fix: style fixes and custom background video support for upload file

src/components/modals/main/settings/sections/background/Background.jsx

@@ -22,7 +22,7 @@ export default class BackgroundSettings extends React.PureComponent {
     this.language = window.language.modals.main.settings;
   }
 
-  resetCustom() {
+  resetCustom = () => {
     localStorage.setItem('customBackground', '');
     this.setState({
       customBackground: ''
@@ -40,7 +40,7 @@ export default class BackgroundSettings extends React.PureComponent {
   videoCustomSettings = () => {
     const customBackground = this.state.customBackground;
 
-    if (customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) { 
+    if (customBackground.startsWith('data:video/') || customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) { 
       return (
         <>
           <Checkbox name='backgroundVideoLoop' text={this.language.sections.background.source.loop_video}/>
@@ -105,15 +105,12 @@ export default class BackgroundSettings extends React.PureComponent {
     const customSettings = (
       <>
         <ul>
-          <p>{background.source.custom_url} <span className='modalLink' onClick={() => this.resetCustom()}>{this.language.buttons.reset}</span></p>
+          <p>{background.source.custom_background} <span className='modalLink' onClick={this.resetCustom}>{this.language.buttons.reset}</span></p>
           <input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
+          <span className='modalLink' onClick={() => document.getElementById('bg-input').click()}>{background.source.upload}</span>
+          <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.fileUpload(e)} />
         </ul>
         {this.videoCustomSettings()}
-        <ul>
-          <p>{background.source.custom_background} <span className='modalLink' onClick={() => this.resetCustom()}>{this.language.buttons.reset}</span></p>
-          <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{background.source.upload}</button>
-          <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
-        </ul>
       </>
     );
 

src/components/modals/main/tabs/Addons.jsx

@@ -2,15 +2,15 @@ import React from 'react';
 
 import Added from '../marketplace/sections/Added';
 
-import AddonsTabs from './backend/Tabs';
+import Tabs from './backend/Tabs';
 
 export default function Addons() {
-  const language = window.language.modals.main.addons;
+  const addons = window.language.modals.main.addons;
 
   return (
-    <AddonsTabs>
-      <div label={language.added}><Added/></div>
-      <div label={language.sideload}></div>
-    </AddonsTabs>
+    <Tabs>
+      <div label={addons.added}><Added/></div>
+      <div label={addons.sideload}></div>
+    </Tabs>
   );
 }

src/components/modals/main/tabs/Marketplace.jsx

@@ -5,12 +5,12 @@ import MarketplaceTab from '../marketplace/sections/Marketplace';
 import Tabs from './backend/Tabs';
 
 export default function Marketplace() {
-  const language = window.language.modals.main.marketplace;
+  const marketplace = window.language.modals.main.marketplace;
 
   return (
     <Tabs>
-      <div label={language.photo_packs}><MarketplaceTab type='photo_packs'/></div>
-      <div label={language.quote_packs}><MarketplaceTab type='quote_packs'/></div>
+      <div label={marketplace.photo_packs}><MarketplaceTab type='photo_packs'/></div>
+      <div label={marketplace.quote_packs}><MarketplaceTab type='quote_packs'/></div>
     </Tabs>
   );
 }

src/components/modals/main/tabs/Settings.jsx

@@ -18,24 +18,25 @@ import Weather from '../settings/sections/Weather';
 import Tabs from './backend/Tabs';
 
 export default function Settings() {
-  const language = window.language.modals.main.settings.sections;
+  const settings = window.language.modals.main.settings.sections;
+
   return (
     <>
       <Tabs>
-        <div label={language.time.title}><Time/></div>
-        <div label={language.quote.title}><Quote/></div>
-        <div label={language.greeting.title}><Greeting/></div>
-        <div label={language.background.title}><Background/></div>
-        <div label={language.search.title}><Search/></div>
-        <div label={language.quicklinks.title}><QuickLinks/></div>
-        <div label={language.weather.title}><Weather/></div>
-        <div label={language.appearance.title}><Appearance/></div>
-        <div label={language.order.title}><Order/></div>
-        <div label={language.language.title}><Language/></div>
-        <div label={language.advanced.title}><Advanced/></div>
-        <div label={language.experimental.title}><Experimental/></div>
-        <div label={language.changelog}><Changelog/></div>
-        <div label={language.about.title}><About/></div>
+        <div label={settings.time.title}><Time/></div>
+        <div label={settings.quote.title}><Quote/></div>
+        <div label={settings.greeting.title}><Greeting/></div>
+        <div label={settings.background.title}><Background/></div>
+        <div label={settings.search.title}><Search/></div>
+        <div label={settings.quicklinks.title}><QuickLinks/></div>
+        <div label={settings.weather.title}><Weather/></div>
+        <div label={settings.appearance.title}><Appearance/></div>
+        <div label={settings.order.title}><Order/></div>
+        <div label={settings.language.title}><Language/></div>
+        <div label={settings.advanced.title}><Advanced/></div>
+        <div label={settings.experimental.title}><Experimental/></div>
+        <div label={settings.changelog}><Changelog/></div>
+        <div label={settings.about.title}><About/></div>
       </Tabs>
       <div className='reminder-info'>
         <h1>IMPORTANT INFO</h1>

src/components/modals/main/tabs/backend/Tab.jsx

@@ -20,9 +20,9 @@ import Order from '@material-ui/icons/List';
 import Weather from '@material-ui/icons/CloudOutlined';
 import Advanced from '@material-ui/icons/SettingsOutlined';
 import QuickLinks from '@material-ui/icons/Link';
-import Sideload from '@material-ui/icons/Code';
 
-// Store
+// Addons
+import Sideload from '@material-ui/icons/Code';
 import Added from '@material-ui/icons/AddCircleOutline';
 
 function Tab(props) {
@@ -38,44 +38,42 @@ function Tab(props) {
     }
   }
 
-  const language = window.language.modals.main.settings.sections;
-  const navbarlanguage = window.language.modals.main.navbar;
-  const marketplacelanguage = window.language.modals.main.marketplace;
-  const addonslanguage = window.language.modals.main.addons;
+  const settings = window.language.modals.main.settings.sections;
+  const { navbar, marketplace, addons }= window.language.modals.main;
 
   let icon, divider;
   switch (props.label) {
     // Navbar
-    case navbarlanguage.settings: icon = <Settings/>; break;
-    case navbarlanguage.addons: icon = <Addons/>; break;
-    case navbarlanguage.marketplace: icon = <Marketplace/>; break;
+    case navbar.settings: icon = <Settings/>; break;
+    case navbar.addons: icon = <Addons/>; break;
+    case navbar.marketplace: icon = <Marketplace/>; break;
 
     // Settings
-    case language.time.title: icon = <Time/>; break;
-    case language.greeting.title: icon = <Greeting/>; break;
-    case language.quote.title: icon = <Quote/>; break;
-    case language.background.title: icon = <Background/>; break;
-    case language.search.title: icon = <Search/>; break;
-    case language.weather.title: icon = <Weather/>; break;
-    case language.quicklinks.title: icon = <QuickLinks/>; break;
-    case language.appearance.title: icon = <Appearance/>; break;
-    case language.order.title: icon = <Order/>; break;
-    case language.language.title: icon = <Language/>; divider = true; break;
-    case language.advanced.title: icon = <Advanced/>; break;
-    case language.experimental.title: icon = <Experimental/>; divider = true; break;
-    case language.changelog: icon = <Changelog/>; break;
-    case language.about.title: icon = <About/>; break;
+    case settings.time.title: icon = <Time/>; break;
+    case settings.greeting.title: icon = <Greeting/>; break;
+    case settings.quote.title: icon = <Quote/>; break;
+    case settings.background.title: icon = <Background/>; break;
+    case settings.search.title: icon = <Search/>; break;
+    case settings.weather.title: icon = <Weather/>; break;
+    case settings.quicklinks.title: icon = <QuickLinks/>; break;
+    case settings.appearance.title: icon = <Appearance/>; break;
+    case settings.order.title: icon = <Order/>; break;
+    case settings.language.title: icon = <Language/>; divider = true; break;
+    case settings.advanced.title: icon = <Advanced/>; break;
+    case settings.experimental.title: icon = <Experimental/>; divider = true; break;
+    case settings.changelog: icon = <Changelog/>; break;
+    case settings.about.title: icon = <About/>; break;
 
     // Store
-    case marketplacelanguage.photo_packs: icon = <Background/>; break;
-    case marketplacelanguage.quote_packs: icon = <Quote/>; break;
-    case addonslanguage.added: icon = <Added/>; break;
-    case addonslanguage.sideload: icon = <Sideload/>; break;
+    case marketplace.photo_packs: icon = <Background/>; break;
+    case marketplace.quote_packs: icon = <Quote/>; break;
+    case addons.added: icon = <Added/>; break;
+    case addons.sideload: icon = <Sideload/>; break;
 
     default: break;
   }
 
-  if (props.label === language.experimental.title) {
+  if (props.label === settings.experimental.title) {
     if (localStorage.getItem('experimental') === 'false') {
       return <hr/>;
     }

src/components/modals/main/tabs/backend/Tabs.jsx

@@ -33,26 +33,24 @@ export default class Tabs extends React.PureComponent {
       <>
         <ul className={className}>
           {optionsText}
-          {this.props.children.map((tab) => {
-            return (
-              <Tab
-                currentTab={this.state.currentTab}
-                key={tab.props.label}
-                label={tab.props.label}
-                onClick={this.onClick}
-                navbar={this.props.navbar || false}
-              />
-            );
-          })}
+          {this.props.children.map((tab, index) => (
+            <Tab
+              currentTab={this.state.currentTab}
+              key={tab.props.label || index}
+              label={tab.props.label}
+              onClick={this.onClick}
+              navbar={this.props.navbar || false}
+            />
+          ))}
         </ul>
         <div className={tabClass}>
           <ErrorBoundary>
-            {this.props.children.map((child) => {
-              if (child.props.label !== this.state.currentTab) {
+            {this.props.children.map((tab) => {
+              if (tab.props.label !== this.state.currentTab) {
                 return undefined;
               }
 
-              return child.props.children;
+              return tab.props.children;
             })}
           </ErrorBoundary>
         </div>

src/components/widgets/Widgets.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
-const Clock = React.lazy(() => import('./time/Clock'));
-const Greeting = React.lazy(() => import('./greeting/Greeting'));
-const Quote = React.lazy(() => import('./quote/Quote'));
-const Search = React.lazy(() => import('./search/Search'));
-const Date = React.lazy(() => import('./time/Date'));
-const QuickLinks = React.lazy(() => import('./quicklinks/QuickLinks'));
+import Clock from './time/Clock';
+import Greeting from './greeting/Greeting';
+import Quote from './quote/Quote';
+import Search from './search/Search';
+import QuickLinks from './quicklinks/QuickLinks';
+import Date from './time/Date';
+
 const Weather = React.lazy(() => import('./weather/Weather'));
 const renderLoader = () => <></>;
 
@@ -26,37 +27,6 @@ export default class Widgets extends React.PureComponent {
     return (localStorage.getItem(key) === 'true');
   }
 
-  componentDidMount() {
-    const widget = document.getElementById('widgets');
-    // These lines of code prevent double clicking the page or pressing CTRL + A from highlighting the page
-    widget.addEventListener('mousedown', (event) => {
-      if (event.detail > 1) {
-        event.preventDefault();
-      }
-    }, false);
-
-    document.onkeydown = (e) => {
-      e = e || window.event;
-      if (!e.ctrlKey) {
-        return;
-      }
-      let code = e.which || e.keyCode;
-      
-      const modals = document.getElementsByClassName('ReactModal__Overlay');
-      if (modals.length > 0) {
-        return;
-      }
-
-      switch (code) {
-        case 65:
-          e.preventDefault();
-          e.stopPropagation();
-          break;
-        default: break;
-      }
-    };
-  }
-
   render() {
     // allow for re-ordering widgets
     let elements = [];

src/components/widgets/background/Background.jsx

@@ -191,7 +191,7 @@ export default class Background extends React.PureComponent {
 
         if (customBackground !== '') {
           // video background
-          if (customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) { 
+          if (customBackground.startsWith('data:video/') || customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) { 
             return this.setState({
               url: customBackground,
               video: true,

src/components/widgets/greeting/greeting.scss

@@ -1,4 +1,6 @@
 .greeting {
   margin: 0;
   font-size: 1.6em;
+  cursor: initial;
+  user-select: none;
 }

src/components/widgets/quote/Quote.jsx

@@ -22,7 +22,6 @@ export default class Quote extends React.PureComponent {
     };
   
     this.language = window.language.widgets.quote;
-    this.languagecode = window.languagecode;
   }
 
   doOffline() {
@@ -57,6 +56,22 @@ export default class Quote extends React.PureComponent {
   }
 
   async getQuote() {
+    const favouriteQuote = localStorage.getItem('favouriteQuote');
+    if (favouriteQuote) {
+      return this.setState({
+        quote: favouriteQuote.split(' - ')[0],
+        author: favouriteQuote.split(' - ')[1]
+      });
+    }
+
+    const customQuote = localStorage.getItem('customQuote');
+    if (customQuote) {
+      return this.setState({
+        quote: '"' + customQuote + '"',
+        author: localStorage.getItem('customQuoteAuthor')
+      });
+    }
+
     if (localStorage.getItem('offlineMode') === 'true') {
       return this.doOffline();
     }
@@ -74,22 +89,6 @@ export default class Quote extends React.PureComponent {
       }
     }
 
-    const favouriteQuote = localStorage.getItem('favouriteQuote');
-    if (favouriteQuote) {
-      return this.setState({
-        quote: favouriteQuote.split(' - ')[0],
-        author: favouriteQuote.split(' - ')[1]
-      });
-    }
-
-    const customQuote = localStorage.getItem('customQuote');
-    if (customQuote) {
-      return this.setState({
-        quote: '"' + customQuote + '"',
-        author: localStorage.getItem('customQuoteAuthor')
-      });
-    }
-
     // First we try and get a quote from the API...
     try {
       const data = await (await fetch(window.constants.API_URL + '/quotes/random?language=' + localStorage.getItem('quotelanguage'))).json();
@@ -99,7 +98,7 @@ export default class Quote extends React.PureComponent {
         return this.doOffline();
       }
 
-      let authorlink = `https://${this.languagecode.split('_')[0]}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`;
+      let authorlink = `https://${window.languagecode.split('_')[0]}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`;
       if (localStorage.getItem('authorLink') === 'false') {
         authorlink = null;
       }

src/components/widgets/quote/quote.scss

@@ -3,6 +3,8 @@
 .quote {
   font-size: 0.8em;
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  cursor: initial;
+  user-select: none;
 }
 
 @media screen and (min-width: 600px) {
@@ -40,4 +42,5 @@ h1.quoteauthor {
 .quoteauthorlink {
   text-decoration: none;
   color: white;
+  user-select: none;
 }

src/components/widgets/time/Date.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import dtf from '../../../modules/helpers/date';
 
+import './date.scss';
+
 export default class DateWidget extends React.PureComponent {
   constructor() {
     super();
@@ -35,9 +37,7 @@ export default class DateWidget extends React.PureComponent {
       this.getWeekNumber(date);
     }
 
-    const type = localStorage.getItem('dateType');
-
-    if (type === 'short') {
+    if (localStorage.getItem('dateType') === 'short') {
       const dateDay = date.getDate();
       const dateMonth = date.getMonth() + 1;
       const dateYear = date.getFullYear();
@@ -87,10 +87,9 @@ export default class DateWidget extends React.PureComponent {
 
       const day = (localStorage.getItem('dayofweek') === 'true') ? date.toLocaleDateString(lang, { weekday: 'long' }) : '';
       const month = date.toLocaleDateString(lang, { month: 'long' });
-      const year = date.getFullYear();
 
       this.setState({
-        date: `${day} ${nth} ${month} ${year}`
+        date: `${day} ${nth} ${month} ${date.getFullYear()}`
       });
     }
   }
@@ -100,6 +99,6 @@ export default class DateWidget extends React.PureComponent {
   }
 
   render() {
-    return <span className='date' style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}>{this.state.date} <br/> {this.state.weekNumber}</span>;
+    return <span className='date'>{this.state.date} <br/> {this.state.weekNumber}</span>;
   }
 }

src/components/widgets/time/clock.scss

@@ -3,6 +3,8 @@
 .clock {
   font-size: 4em;
   margin: 0;
+  cursor: initial;
+  user-select: none;
 }
 
 .ampm {
@@ -16,6 +18,8 @@
   box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
   border: none !important;
   border: 1px solid map-get($theme-colours, 'main') !important;
+  cursor: initial;
+  user-select: none;
 }
 
 .react-clock__hand__body, .react-clock__mark__body {

src/components/widgets/time/date.scss

@@ -0,0 +1,6 @@
+.date {
+  cursor: initial;
+  user-select: none;
+  text-transform: capitalize;
+  font-weight: bold;
+}

src/components/widgets/weather/weather.scss

@@ -2,6 +2,8 @@
   position: absolute;
   bottom: 1rem;
   right: 1rem;
+  cursor: initial;
+  user-select: none;
 
   span {
     text-shadow: 0 0 10px rgb(0 0 0 / 50%);

src/modules/default_settings.json

@@ -170,5 +170,13 @@
   {
     "name": "bgtransition",
     "value": true
+  },
+  {
+    "name": "backgroundVideoLoop",
+    "value": true
+  },
+  {
+    "name": "backgroundVideoMute",
+    "value": true
   }
 ]