fix: author loading before quote

- Make author div not load if quote is empty
- photoinformation taking too much of the screen
- more transitions and consistent transitions
- running prettier across all files

Co-authored-by: David Ralph <me@davidcralph.co.uk>

src/modules/constants.js

@@ -13,8 +13,10 @@ export const WEBSITE_URL = 'https://muetab.com';
 export const PRIVACY_URL = 'https://muetab.com/privacy';
 export const BLOG_POST = 'https://blog.muetab.com/posts/version-6-0';
 export const TRANSLATIONS_URL = 'https://docs.muetab.com/translations/';
-export const REPORT_ITEM = 'https://github.com/mue/marketplace/issues/new?assignees=&labels=item+report&template=item-report.md&title=%5BItem+Report%5D+';
-export const BUG_REPORT = 'https://github.com/mue/mue/issues/new?assignees=&labels=issue+report&template=bug-report.md&title=%5BBug%5D+';
+export const REPORT_ITEM =
+  'https://github.com/mue/marketplace/issues/new?assignees=&labels=item+report&template=item-report.md&title=%5BItem+Report%5D+';
+export const BUG_REPORT =
+  'https://github.com/mue/mue/issues/new?assignees=&labels=issue+report&template=bug-report.md&title=%5BBug%5D+';
 export const DONATE_LINK = 'https://muetab.com/donate';
 
 // Mue Info

src/modules/helpers/background/rgbToHsv.js

@@ -21,9 +21,9 @@ export default function rgbToHSv({ red, green, blue }) {
     if (rabs === v) {
       h = bb - gg;
     } else if (gabs === v) {
-      h = (1 / 3) + rr - bb;
+      h = 1 / 3 + rr - bb;
     } else if (babs === v) {
-      h = (2 / 3) + gg - rr;
+      h = 2 / 3 + gg - rr;
     }
 
     if (h < 0) {

src/modules/helpers/background/setRgba.js

@@ -1,5 +1,5 @@
 const isValidRGBValue = (value) => {
-  return (typeof (value) === 'number' && Number.isNaN(value) === false && value >= 0 && value <= 255);
+  return typeof value === 'number' && Number.isNaN(value) === false && value >= 0 && value <= 255;
 };
 
 export default function setRGBA(red, green, blue, alpha) {

src/modules/helpers/background/widget.js

@@ -1,6 +1,11 @@
 // since there is so much code in the component, we have moved it to a separate file
 export function videoCheck(url) {
-  return url.startsWith('data:video/') || url.endsWith('.mp4') || url.endsWith('.webm') || url.endsWith('.ogg');
+  return (
+    url.startsWith('data:video/') ||
+    url.endsWith('.mp4') ||
+    url.endsWith('.webm') ||
+    url.endsWith('.ogg')
+  );
 }
 
 export function offlineBackground() {
@@ -10,16 +15,17 @@ export function offlineBackground() {
   const photographers = Object.keys(offlineImages);
   const photographer = photographers[Math.floor(Math.random() * photographers.length)];
 
-  const randomImage = offlineImages[photographer].photo[
-    Math.floor(Math.random() * offlineImages[photographer].photo.length)
-  ];
+  const randomImage =
+    offlineImages[photographer].photo[
+      Math.floor(Math.random() * offlineImages[photographer].photo.length)
+    ];
 
   const object = {
     url: `./offline-images/${randomImage}.webp`,
     photoInfo: {
       offline: true,
-      credit: photographer
-    }
+      credit: photographer,
+    },
   };
 
   localStorage.setItem('currentBackground', JSON.stringify(object));
@@ -33,12 +39,16 @@ function gradientStyleBuilder({ type, angle, gradient }) {
 
   return {
     type: 'colour',
-    style: `background:${gradient[0]?.colour};${grad}`
+    style: `background:${gradient[0]?.colour};${grad}`,
   };
 }
 
 export function getGradient() {
-  const customBackgroundColour = localStorage.getItem('customBackgroundColour') || {'angle':'180','gradient':[{'colour':'#ffb032','stop':0}],'type':'linear'};
+  const customBackgroundColour = localStorage.getItem('customBackgroundColour') || {
+    angle: '180',
+    gradient: [{ colour: '#ffb032', stop: 0 }],
+    type: 'linear',
+  };
 
   let gradientSettings = '';
   try {
@@ -47,7 +57,11 @@ export function getGradient() {
     const hexColorRegex = /#[0-9a-fA-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)
-      gradientSettings = { 'type': 'linear', 'angle': '180', 'gradient': [{ 'colour': customBackgroundColour, 'stop': 0 }] };
+      gradientSettings = {
+        type: 'linear',
+        angle: '180',
+        gradient: [{ colour: customBackgroundColour, stop: 0 }],
+      };
       localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings));
     }
   }
@@ -59,16 +73,30 @@ export function getGradient() {
 
 export function randomColourStyleBuilder(type) {
   // randomColour based on https://stackoverflow.com/a/5092872
-  const randomColour = () => '#000000'.replace(/0/g, () => { return (~~(Math.random()*16)).toString(16) });
+  const randomColour = () =>
+    '#000000'.replace(/0/g, () => {
+      return (~~(Math.random() * 16)).toString(16);
+    });
   let style = `background:${randomColour()};`;
 
   if (type === 'random_gradient') {
-    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()});`;
+    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()});`;
   }
 
   return {
     type: 'colour',
-    style
-  }
+    style,
+  };
 }

src/modules/helpers/date.js

@@ -16,5 +16,9 @@ export function nth(d) {
 }
 
 export function convertTimezone(date, tz) {
-  return new Date((typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', { timeZone: tz }));   
+  return new Date(
+    (typeof date === 'string' ? new Date(date) : date).toLocaleString('en-US', {
+      timeZone: tz,
+    }),
+  );
 }

src/modules/helpers/eventbus.js

@@ -6,9 +6,11 @@ export default class EventBus {
   }
 
   static dispatch(event, data) {
-    document.dispatchEvent(new CustomEvent(event, {
-      detail: data
-    }));
+    document.dispatchEvent(
+      new CustomEvent(event, {
+        detail: data,
+      }),
+    );
   }
 
   static off(event, callback) {

src/modules/helpers/experimental.js

@@ -22,7 +22,8 @@ export default function ExperimentalInit() {
             debugger;
           }
           break;
-        default: break;
+        default:
+          break;
       }
     };
   }

src/modules/helpers/marketplace.js

@@ -7,7 +7,8 @@ function showReminder() {
 
 // based on https://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links
 export function urlParser(input) {
-  const urlPattern = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_+.~#?&//=]*)/;
+  const urlPattern =
+    /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_+.~#?&//=]*)/;
   return input.replace(urlPattern, '<br/><a href="$&" target="_blank">$&</a>');
 }
 
@@ -20,7 +21,7 @@ export function install(type, input, sideload) {
       Object.keys(localStorage).forEach((key) => {
         oldSettings.push({
           name: key,
-          value: localStorage.getItem(key)
+          value: localStorage.getItem(key),
         });
       });
 
@@ -33,7 +34,7 @@ export function install(type, input, sideload) {
 
     case 'photos':
       const currentPhotos = JSON.parse(localStorage.getItem('photo_packs')) || [];
-      input.photos.forEach(photo => {
+      input.photos.forEach((photo) => {
         currentPhotos.push(photo);
       });
       localStorage.setItem('photo_packs', JSON.stringify(currentPhotos));
@@ -63,8 +64,8 @@ export function install(type, input, sideload) {
     installed.push({
       content: {
         updated: 'Unpublished',
-        data: input
-      }
+        data: input,
+      },
     });
   } else {
     installed.push(input);
@@ -94,9 +95,11 @@ export function uninstall(type, name) {
 
     case 'photos':
       const installedContents = JSON.parse(localStorage.getItem('photo_packs'));
-      const packContents = JSON.parse(localStorage.getItem('installed')).find(content => content.name === name);
+      const packContents = JSON.parse(localStorage.getItem('installed')).find(
+        (content) => content.name === name,
+      );
       // todo: make it find in photo_packs all the ones in installed for that pack and remove
-      console.log(packContents)
+      console.log(packContents);
       installedContents.forEach((item, index) => {
         if (packContents.photos.includes(item)) {
           installedContents.splice(index, 1);
@@ -121,4 +124,4 @@ export function uninstall(type, name) {
   }
 
   localStorage.setItem('installed', JSON.stringify(installed));
-};
+}

src/modules/helpers/settings/index.js

@@ -12,7 +12,10 @@ export function setDefaultSettings(reset) {
 
   // Languages
   const languageCodes = languages.map(({ value }) => value);
-  const browserLanguage = (navigator.languages && navigator.languages.find((lang) => lang.replace('-', '_') && languageCodes.includes(lang))) || navigator.language.replace('-', '_');
+  const browserLanguage =
+    (navigator.languages &&
+      navigator.languages.find((lang) => lang.replace('-', '_') && languageCodes.includes(lang))) ||
+    navigator.language.replace('-', '_');
 
   if (languageCodes.includes(browserLanguage)) {
     localStorage.setItem('language', browserLanguage);
@@ -63,7 +66,7 @@ export function loadSettings(hotreload) {
     });
   }
 
-  if (localStorage.getItem('animations') === 'false') { 
+  if (localStorage.getItem('animations') === 'false') {
     document.body.classList.add('no-animations');
   } else {
     document.body.classList.remove('no-animations');
@@ -79,7 +82,7 @@ export function loadSettings(hotreload) {
       try {
         document.querySelector('.' + element).classList.add('textBorder');
       } catch (e) {
-        // Disregard exception 
+        // Disregard exception
       }
     });
   } else {
@@ -88,7 +91,7 @@ export function loadSettings(hotreload) {
       try {
         document.querySelector('.' + element).classList.remove('textBorder');
       } catch (e) {
-        // Disregard exception 
+        // Disregard exception
       }
     });
   }
@@ -112,7 +115,9 @@ export function loadSettings(hotreload) {
       url = `@import url('https://fonts.googleapis.com/css2?family=${font}&display=swap');`;
     }
 
-    document.head.insertAdjacentHTML('beforeend', `
+    document.head.insertAdjacentHTML(
+      'beforeend',
+      `
       <style id='customfont'>
         ${url}
         * {
@@ -121,7 +126,8 @@ export function loadSettings(hotreload) {
           font-style: ${localStorage.getItem('fontstyle')};
         }
       </style>
-    `);
+    `,
+    );
   }
 
   // everything below this shouldn't run on a hot reload event
@@ -153,7 +159,7 @@ export function loadSettings(hotreload) {
 `);
 }
 
-// in a nutshell, this function saves all of the current settings, resets them, sets the defaults and then overrides 
+// in a nutshell, this function saves all of the current settings, resets them, sets the defaults and then overrides
 // the new settings with the old saved messages where they exist
 export function moveSettings() {
   const currentSettings = Object.keys(localStorage);

src/modules/helpers/settings/modals.js

@@ -7,17 +7,33 @@ export function saveFile(data, filename = 'file', type = 'text/json') {
   if (typeof data === 'object') {
     data = JSON.stringify(data, undefined, 4);
   }
-  
+
   const blob = new Blob([data], { type });
 
   const event = document.createEvent('MouseEvents');
   const a = document.createElement('a');
-  
+
   a.href = window.URL.createObjectURL(blob);
   a.download = filename;
   a.dataset.downloadurl = [type, a.download, a.href].join(':');
-  
-  event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+
+  event.initMouseEvent(
+    'click',
+    true,
+    false,
+    window,
+    0,
+    0,
+    0,
+    0,
+    0,
+    false,
+    false,
+    false,
+    false,
+    0,
+    null,
+  );
   a.dispatchEvent(event);
 }
 
@@ -44,39 +60,39 @@ export function importSettings(e) {
 export function values(type) {
   const marks = {
     zoom: [
-      { value: 10, label: '0.1x' }, 
-      { value: 100, label: '1x' }, 
-      { value: 200, label: '2x' }, 
-      { value: 400, label: '4x' }
+      { value: 10, label: '0.1x' },
+      { value: 100, label: '1x' },
+      { value: 200, label: '2x' },
+      { value: 400, label: '4x' },
     ],
     toast: [
-      { value: 500, label: '0.5s' }, 
-      { value: 1000, label: '1s' }, 
-      { value: 1500, label: '1.5s' }, 
-      { value: 2000, label: '2s' }, 
-      { value: 2500, label: '2.5s' }, 
-      { value: 3000, label: '3s' }, 
-      { value: 4000, label: '4s' }, 
-      { value: 5000, label: '5s'}
+      { value: 500, label: '0.5s' },
+      { value: 1000, label: '1s' },
+      { value: 1500, label: '1.5s' },
+      { value: 2000, label: '2s' },
+      { value: 2500, label: '2.5s' },
+      { value: 3000, label: '3s' },
+      { value: 4000, label: '4s' },
+      { value: 5000, label: '5s' },
     ],
     background: [
-      { value: 0, label: '0%'}, 
-      { value: 25, label: '25%' }, 
-      { value: 50, label: '50%' }, 
-      { value: 75, label: '75%' }, 
-      { value: 100, label: '100%' }
+      { value: 0, label: '0%' },
+      { value: 25, label: '25%' },
+      { value: 50, label: '50%' },
+      { value: 75, label: '75%' },
+      { value: 100, label: '100%' },
     ],
     experimental: [
       { value: 0, label: '0s' },
-      { value: 500, label: '0.5s' }, 
-      { value: 1000, label: '1s' }, 
-      { value: 1500, label: '1.5s' }, 
-      { value: 2000, label: '2s' }, 
-      { value: 2500, label: '2.5s' }, 
-      { value: 3000, label: '3s' }, 
-      { value: 4000, label: '4s' }, 
-      { value: 5000, label: '5s'}
-    ]
+      { value: 500, label: '0.5s' },
+      { value: 1000, label: '1s' },
+      { value: 1500, label: '1.5s' },
+      { value: 2000, label: '2s' },
+      { value: 2500, label: '2.5s' },
+      { value: 3000, label: '3s' },
+      { value: 4000, label: '4s' },
+      { value: 5000, label: '5s' },
+    ],
   };
 
   return marks[type];

src/modules/helpers/stats.js

@@ -21,7 +21,7 @@ export default class Stats {
 
   static async tabLoad() {
     const data = JSON.parse(localStorage.getItem('statsData'));
-    data['tabs-opened'] = data['tabs-opened'] + 1 || 1;        
+    data['tabs-opened'] = data['tabs-opened'] + 1 || 1;
     localStorage.setItem('statsData', JSON.stringify(data));
   }
 }

src/modules/variables.js

@@ -5,10 +5,10 @@ const variables = {
   languagecode: '',
   stats: {
     tabLoad: () => '',
-    postEvent: () => ''
+    postEvent: () => '',
   },
   //keybinds: {},
-  constants: Constants
+  constants: Constants,
 };
 
 export default variables;