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

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%);