feat: background resolution is now automatic and more accurate

src/components/widgets/background/Background.jsx

@@ -135,8 +135,7 @@ export default class Background extends React.PureComponent {
              photoInfo: {
               credit: favourited.credit,
               location: favourited.location,
-              camera: favourited.camera,
-              resolution: favourited.resolution
+              camera: favourited.camera
             }
           });
         }
@@ -191,7 +190,6 @@ export default class Background extends React.PureComponent {
             credit: credit,
             location: data.location,
             camera: data.camera,
-            resolution: data.resolution,
             url: data.file,
             photographerURL: photographerURL,
             photoURL: photoURL
@@ -369,7 +367,7 @@ export default class Background extends React.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}/>
+          <PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo} api={this.state.currentAPI} url={this.state.url}/>
         : null}
       </>
     );

src/components/widgets/background/Favourite.jsx

@@ -7,8 +7,8 @@ import StarIcon2 from '@material-ui/icons/StarBorder';
 
 export default class Favourite extends React.PureComponent {
   buttons = {
-    favourited: <StarIcon onClick={this.favourite} className='topicons' />,
-    unfavourited: <StarIcon2 onClick={this.favourite} className='topicons' />
+    favourited: <StarIcon onClick={() => this.favourite()} className='topicons' />,
+    unfavourited: <StarIcon2 onClick={() => this.favourite()} className='topicons' />
   }
 
   constructor() {
@@ -18,7 +18,7 @@ export default class Favourite extends React.PureComponent {
     };
   }
 
-  favourite = () => {
+  favourite() {
     if (localStorage.getItem('favourite')) {
       localStorage.removeItem('favourite');
       this.setState({
@@ -36,8 +36,7 @@ export default class Favourite extends React.PureComponent {
         url: url, 
         credit: document.getElementById('credit').textContent,
         location: document.getElementById('infoLocation').textContent,
-        camera: document.getElementById('infoCamera').textContent,
-        resolution: document.getElementById('infoResolution').textContent
+        camera: document.getElementById('infoCamera').textContent
       }));
 
       this.setState({

src/components/widgets/background/PhotoInformation.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Info from '@material-ui/icons/Info';
 import Location from '@material-ui/icons/LocationOn';
 import Camera from '@material-ui/icons/PhotoCamera';
@@ -22,6 +24,9 @@ const downloadImage = async (info) => {
 };
 
 export default function PhotoInformation(props) {
+  const [width, setWidth] = React.useState(0);
+  const [height, setHeight] = React.useState(0);
+
   const language = window.language.widgets.background;
 
   if (props.info.hidden === true || !props.info.credit) {
@@ -45,6 +50,14 @@ export default function PhotoInformation(props) {
     }
   }
 
+  // get resolution
+  const img = new Image();
+  img.onload = function() {
+    setWidth(this.width);
+    setHeight(this.height);
+  }
+  img.src = props.url;
+
   return (
     <div className='photoInformation'>
       <h1>{photo} <span id='credit'>{credit}</span></h1>
@@ -58,7 +71,7 @@ export default function PhotoInformation(props) {
           <Camera/>
           <span id='infoCamera'>{props.info.camera || 'N/A'}</span>
           <Resolution/>
-          <span id='infoResolution'>{props.info.resolution || 'N/A'}</span>
+          <span id='infoResolution'>{width}x{height}</span>
           <Photographer/>
           <span>{photographer}</span>
           {(localStorage.getItem('downloadbtn') === 'true') && !props.info.offline && !props.info.photographerURL ? 

src/components/widgets/time/Clock.jsx

@@ -22,9 +22,7 @@ export default class Clock extends React.PureComponent {
     this.timer = setTimeout(() => {
       const now = new Date();
 
-      const timeType = localStorage.getItem('timeType');
-
-      switch (timeType) {
+      switch (localStorage.getItem('timeType')) {
         case 'percentageComplete':
           this.setState({
             time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'