fix: favourite button, optimise widgets and remove dependency

babel.config.js

@@ -2,5 +2,5 @@ module.exports = {
   presets: ['@babel/preset-env', ['@babel/preset-react', {
     runtime: 'automatic'
   }]],
-  plugins: ['@babel/plugin-proposal-class-properties', '@babel/transform-runtime', 'babel-plugin-transform-react-class-to-function', '@babel/plugin-transform-react-constant-elements']
+  plugins: ['@babel/plugin-proposal-class-properties', '@babel/transform-runtime', '@babel/plugin-transform-react-inline-elements', 'babel-plugin-transform-react-class-to-function', '@babel/plugin-transform-react-constant-elements']
 };

package.json

@@ -17,7 +17,6 @@
     "@fontsource/montserrat": "4.4.5",
     "@material-ui/core": "5.0.0-beta.4",
     "@material-ui/icons": "5.0.0-beta.4",
-    "date-fns-tz": "^1.1.6",
     "react": "17.0.2",
     "react-clock": "3.0.0",
     "react-color-gradient-picker": "0.1.2",
@@ -32,6 +31,7 @@
     "@babel/eslint-parser": "^7.15.0",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-transform-react-constant-elements": "^7.14.5",
+    "@babel/plugin-transform-react-inline-elements": "^7.14.5",
     "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
@@ -40,7 +40,6 @@
     "babel-plugin-transform-react-class-to-function": "^1.2.2",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.2.0",
-    "date-fns": "^2.23.0",
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
     "html-webpack-plugin": "^5.3.2",

src/components/modals/main/settings/sections/Experimental.jsx

@@ -11,9 +11,6 @@ export default function ExperimentalSettings() {
       <h2>{experimental.title}</h2>
       <p>{experimental.warning}</p>
       <Checkbox name='animations' text={window.language.modals.main.settings.sections.appearance.animations} element='.other'/>
-      <h3>Usage Stats</h3>
-      <p>Allows you to see stats such as how many tabs you have opened, quotes favourited etc. It also sends this data anonymously to our<a className='modalLink' href='https://github.com/mue/umami'>umami</a> instance.</p>
-      <Checkbox name='stats' text='Enable Usage Stats' element='.other'/>
       <h3>{experimental.developer}</h3>
       <Checkbox name='debug' text='Debug hotkey (Ctrl + #)' element='.other'/>
       <Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' display=' miliseconds' element='.other' />

src/components/widgets/background/Background.jsx

@@ -409,7 +409,7 @@ export default class Background extends PureComponent {
       <>
         <div style={{ WebkitFilter: `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}` }} id='backgroundImage'/>
         {(this.state.photoInfo.credit !== '') ?
-          <PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo} api={this.state.currentAPI} url={this.state.url}/>
+          <PhotoInformation info={this.state.photoInfo} api={this.state.currentAPI} url={this.state.url}/>
         : null}
       </>
     );

src/components/widgets/background/Favourite.jsx

@@ -34,7 +34,8 @@ export default class Favourite extends PureComponent {
         url: url, 
         credit: document.getElementById('credit').textContent,
         location: document.getElementById('infoLocation').textContent,
-        camera: document.getElementById('infoCamera').textContent
+        camera: document.getElementById('infoCamera').textContent,
+        resolution: document.getElementById('infoResolution').textContent
       }));
 
       this.setState({

src/components/widgets/background/PhotoInformation.jsx

@@ -52,31 +52,43 @@ export default function PhotoInformation(props) {
   }
   img.src = (localStorage.getItem('ddgProxy') === 'true' && !props.info.offline && !props.url.startsWith('data:')) ? window.constants.DDG_IMAGE_PROXY + props.url : props.url;
 
+  // info is still there because we want the favourite button to work
+  if (localStorage.getItem('photoInformation') === 'false') {
+    return (
+      <div className='photoInformation'>
+        <h1>{photo} <span id='credit'>{credit}</span></h1>
+        <div style={{ display: 'none' }}>
+          <span id='infoLocation'>{props.info.location || 'N/A'}</span>
+          <span id='infoCamera'>{props.info.camera || 'N/A'}</span>
+          <span id='infoResolution'>{width}x{height}</span>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className='photoInformation'>
       <h1>{photo} <span id='credit'>{credit}</span></h1>
-      {localStorage.getItem('photoInformation') !== 'false' ? 
-      <>
-        <Info className='photoInformationHover'/>
-        <div className={props.className || 'infoCard'}>
-          <Info className='infoIcon'/>
-          <h1>{language.information}</h1>
-          <hr/>
-          <LocationOn/>
-          <span id='infoLocation'>{props.info.location || 'N/A'}</span>
-          <PhotoCamera/>
-          <span id='infoCamera'>{props.info.camera || 'N/A'}</span>
-          <Resolution/>
-          <span id='infoResolution'>{width}x{height}</span>
-          <Photographer/>
-          <span>{photographer}</span>
-          {(localStorage.getItem('downloadbtn') === 'true') && !props.info.offline && !props.info.photographerURL ? 
-            <>
-              <Download/>
-              <span className='download' onClick={() => downloadImage(props.info)}>{language.download}</span>
-            </> : null}
-        </div>
-      </> : null}
+      <Info className='photoInformationHover'/>
+      <div className='infoCard'>
+        <Info className='infoIcon'/>
+        <h1>{language.information}</h1>
+        <hr/>
+        <LocationOn/>
+        <span id='infoLocation'>{props.info.location || 'N/A'}</span>
+        <PhotoCamera/>
+        <span id='infoCamera'>{props.info.camera || 'N/A'}</span>
+        <Resolution/>
+        <span id='infoResolution'>{width}x{height}</span>
+        <Photographer/>
+        <span>{photographer}</span>
+        {(localStorage.getItem('downloadbtn') === 'true') && !props.info.offline && !props.info.photographerURL ? 
+          <>
+            <Download/>
+            <span className='download' onClick={() => downloadImage(props.info)}>{language.download}</span>
+          </> 
+        : null}
+      </div>
     </div>
   );
 }

src/components/widgets/greeting/Greeting.jsx

@@ -1,7 +1,6 @@
 import { PureComponent } from 'react';
-import { utcToZonedTime } from 'date-fns-tz';
 
-import dtf from '../../../modules/helpers/date';
+import { nth, convertTimezone } from '../../../modules/helpers/date';
 import EventBus from '../../../modules/helpers/eventbus';
 
 import './greeting.scss';
@@ -49,8 +48,8 @@ export default class Greeting extends PureComponent {
     this.timer = setTimeout(() => {
       let now = new Date();
       const timezone = localStorage.getItem('timezone');
-      if (timezone) {
-        now = utcToZonedTime(now, timezone);
+      if (timezone && timezone !== 'auto') {
+        now = convertTimezone(now, timezone);
       }
 
       const hour = now.getHours();
@@ -94,7 +93,7 @@ export default class Greeting extends PureComponent {
         if (birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) {
           if (localStorage.getItem('birthdayage') === 'true') {
             const text = this.language.birthday.split(' ');
-            message = `${text[0]} ${dtf.nth(this.calculateAge(birth))} ${text[1]}`;
+            message = `${text[0]} ${nth(this.calculateAge(birth))} ${text[1]}`;
           } else {
             message = this.language.birthday;
           }

src/components/widgets/time/Clock.jsx

@@ -1,6 +1,6 @@
 import { PureComponent, Suspense, lazy } from 'react';
-import { utcToZonedTime } from 'date-fns-tz';
 
+import { convertTimezone } from '../../../modules/helpers/date';
 import EventBus from '../../../modules/helpers/eventbus';
 
 import './clock.scss';
@@ -23,8 +23,8 @@ export default class Clock extends PureComponent {
     this.timer = setTimeout(() => {
       let now = new Date();
       const timezone = localStorage.getItem('timezone');
-      if (timezone) {
-        now = utcToZonedTime(now, timezone);
+      if (timezone && timezone !== 'auto') {
+        now = convertTimezone(now, timezone);
       }
 
       switch (localStorage.getItem('timeType')) {

src/components/widgets/time/Date.jsx

@@ -1,7 +1,6 @@
 import { PureComponent } from 'react';
-import { utcToZonedTime } from 'date-fns-tz';
 
-import dtf from '../../../modules/helpers/date';
+import { nth, convertTimezone } from '../../../modules/helpers/date';
 import EventBus from '../../../modules/helpers/eventbus';
 
 import './date.scss';
@@ -35,8 +34,8 @@ export default class DateWidget extends PureComponent {
   getDate() {
     let date = new Date();
     const timezone = localStorage.getItem('timezone');
-    if (timezone) {
-      date = utcToZonedTime(date, timezone);
+    if (timezone && timezone !== 'auto') {
+      date = convertTimezone(date, timezone);
     }
 
     if (localStorage.getItem('weeknumber') === 'true') {
@@ -97,13 +96,13 @@ export default class DateWidget extends PureComponent {
       // Long date
       const lang = window.languagecode.split('_')[0];
 
-      const nth = (localStorage.getItem('datenth') === 'true') ? dtf.nth(date.getDate()) : date.getDate();
+      const datenth = (localStorage.getItem('datenth') === 'true') ? nth(date.getDate()) : date.getDate();
 
       const day = (localStorage.getItem('dayofweek') === 'true') ? date.toLocaleDateString(lang, { weekday: 'long' }) : '';
       const month = date.toLocaleDateString(lang, { month: 'long' });
 
       this.setState({
-        date: `${day} ${nth} ${month} ${date.getFullYear()}`
+        date: `${day} ${datenth} ${month} ${date.getFullYear()}`
       });
     }
   }

src/modules/helpers/date.js

@@ -1,4 +1,4 @@
-export default function nth(d) {
+export function nth(d) {
   if (d > 3 && d < 21) {
     return d + 'th';
   }
@@ -14,3 +14,7 @@ export default function nth(d) {
       return d + 'th';
   }
 }
+
+export function convertTimezone(date, tz) {
+  return new Date((typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', { timeZone: tz }));   
+}