2021-08-19 15:32:10 +00:00
// since there is so much code in the component, we have moved it to a separate file
export function videoCheck ( url ) {
2022-04-11 21:57:07 +00:00
return (
url . startsWith ( 'data:video/' ) ||
url . endsWith ( '.mp4' ) ||
url . endsWith ( '.webm' ) ||
url . endsWith ( '.ogg' )
) ;
2021-08-21 10:11:00 +00:00
}
2021-08-19 15:32:10 +00:00
export function offlineBackground ( ) {
const offlineImages = require ( './offlineImages.json' ) ;
// Get all photographers from the keys in offlineImages.json
const photographers = Object . keys ( offlineImages ) ;
const photographer = photographers [ Math . floor ( Math . random ( ) * photographers . length ) ] ;
2022-04-11 21:57:07 +00:00
const randomImage =
offlineImages [ photographer ] . photo [
Math . floor ( Math . random ( ) * offlineImages [ photographer ] . photo . length )
] ;
2021-08-19 15:32:10 +00:00
const object = {
url : ` ./offline-images/ ${ randomImage } .webp ` ,
photoInfo : {
offline : true ,
2022-04-11 21:57:07 +00:00
credit : photographer ,
} ,
2021-08-21 10:11:00 +00:00
} ;
2021-08-19 15:32:10 +00:00
localStorage . setItem ( 'currentBackground' , JSON . stringify ( object ) ) ;
return object ;
2021-08-27 17:27:11 +00:00
}
2021-08-19 15:32:10 +00:00
2021-11-11 20:43:33 +00:00
function gradientStyleBuilder ( { type , angle , gradient } ) {
2021-08-19 15:32:10 +00:00
// Note: Append the gradient for additional browser support.
const steps = gradient ? . map ( ( v ) => ` ${ v . colour } ${ v . stop } % ` ) ;
const grad = ` background: ${ type } -gradient( ${ type === 'linear' ? ` ${ angle } deg, ` : '' } ${ steps } ) ` ;
return {
type : 'colour' ,
2022-04-11 21:57:07 +00:00
style : ` background: ${ gradient [ 0 ] ? . colour } ; ${ grad } ` ,
2021-08-27 17:27:11 +00:00
} ;
2021-08-27 18:42:40 +00:00
}
2021-09-06 18:35:31 +00:00
2021-11-11 20:43:33 +00:00
export function getGradient ( ) {
2022-04-11 21:57:07 +00:00
const customBackgroundColour = localStorage . getItem ( 'customBackgroundColour' ) || {
angle : '180' ,
gradient : [ { colour : '#ffb032' , stop : 0 } ] ,
type : 'linear' ,
} ;
2021-11-11 20:43:33 +00:00
let gradientSettings = '' ;
try {
gradientSettings = JSON . parse ( customBackgroundColour ) ;
} catch ( e ) {
const hexColorRegex = / # [ 0 - 9 a - f A - F ] { 6 } / s ;
if ( hexColorRegex . exec ( customBackgroundColour ) ) {
// Colour used to be simply a hex colour or a NULL value before it was a JSON object. This automatically upgrades the hex colour value to the new standard. (NULL would not trigger an exception)
2022-04-11 21:57:07 +00:00
gradientSettings = {
type : 'linear' ,
angle : '180' ,
gradient : [ { colour : customBackgroundColour , stop : 0 } ] ,
} ;
2021-11-11 20:43:33 +00:00
localStorage . setItem ( 'customBackgroundColour' , JSON . stringify ( gradientSettings ) ) ;
}
}
if ( typeof gradientSettings === 'object' && gradientSettings !== null ) {
return gradientStyleBuilder ( gradientSettings ) ;
}
}
2021-09-17 18:40:22 +00:00
export function randomColourStyleBuilder ( type ) {
// randomColour based on https://stackoverflow.com/a/5092872
2022-04-11 21:57:07 +00:00
const randomColour = ( ) =>
'#000000' . replace ( /0/g , ( ) => {
return ( ~ ~ ( Math . random ( ) * 16 ) ) . toString ( 16 ) ;
} ) ;
2021-09-17 18:40:22 +00:00
let style = ` background: ${ randomColour ( ) } ; ` ;
if ( type === 'random_gradient' ) {
2022-04-11 21:57:07 +00:00
const directions = [
'to right' ,
'to left' ,
'to bottom' ,
'to top' ,
'to bottom right' ,
'to bottom left' ,
'to top right' ,
'to top left' ,
] ;
style = ` background:linear-gradient( ${
directions [ Math . floor ( Math . random ( ) * directions . length ) ]
} , $ { randomColour ( ) } , $ { randomColour ( ) } ) ; ` ;
2021-09-17 18:40:22 +00:00
}
return {
type : 'colour' ,
2022-04-11 21:57:07 +00:00
style ,
} ;
2021-09-17 18:40:22 +00:00
}