feat: better digital clock settings and greeting now changes properly

README.md

@@ -18,8 +18,9 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
 * [Installation](#installation)
 	* [Chrome](#chrome)
 	* [Firefox](#firefox)
-	* [Chromium](#edge-chromium)
+	* [Edge Chromium](#edge-chromium)
-	* [Opera/Other](#operaother)
+  * [Naver](#naver)
+	* [Other](#other)
 * [Contributing](#development)
 	* [Requirements](#requirements)
 	* [Starting](#starting)
@@ -60,7 +61,12 @@ Please see our [roadmap](https://github.com/mue/mue/projects)
 ### Edge (Chromium)
 ~~[Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/aepnglgjfokepefimhbnibfjekidhmja)~~ Currently outdated, please use the Chrome Web Store version
 
-### Opera/Other
+### Naver
+[Whale Store](https://store.whale.naver.com/detail/ecllekeilcmicbfkkiknfdddbogibbnc)
+
+### Other
+Please note that we have dropped support for Opera as of Mue 5.0
+
 [GitHub Releases](https://github.com/mue/mue/releases)
 
 ### Development

manifest/background-opera.js

@@ -1,14 +0,0 @@
-/* eslint-disable no-undef */
-//Source https://forums.opera.com/topic/25046/how-to-disable-completely-the-speed-dial/14
-
-chrome.tabs.onCreated.addListener((tab) => {
-  if (tab.status === 'complete' && tab.url === 'chrome://startpage/') chrome.tabs.update(tab.id, {
-    url: chrome.extension.getURL('index.html')
-  });
-});
-
-chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-  if (changeInfo.status === 'complete' && tab.url === 'chrome://startpage/') chrome.tabs.update(tabId, {
-    url: chrome.extension.getURL('index.html')
-  });
-});

manifest/opera.json

@@ -1,17 +0,0 @@
-{
-  "manifest_version": 2,
-  "name": "Mue",
-  "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-  "version": "5.0.0",
-  "browser_action": {
-    "default_icon": "icons/128x128.png"
-  },
-  "background": {
-    "scripts": [
-      "./background-opera.js"
-    ]
-  },
-  "permissions": [
-    "tabs"
-  ]
-}

package.json

@@ -48,8 +48,7 @@
     "start": "webpack serve",
     "build": "webpack --mode=production",
     "chrome": "cp manifest/chrome.json build/manifest.json",
-    "firefox": "cp manifest/firefox.json build/manifest.json",
+    "firefox": "cp manifest/firefox.json build/manifest.json"
-    "opera": "cp manifest/opera.json build/manifest.json && cp manifest/background-opera.js build/"
   },
   "eslintConfig": {
     "extends": "react-app"

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

@@ -9,7 +9,7 @@ import Text from '../Text';
 export default function AppearanceSettings() {
   const { appearance } = window.language.modals.main.settings.sections;
 
-  let themeOptions = [
+  const themeOptions = [
     {
       'name': 'Auto',
       'value': 'auto'
@@ -17,11 +17,12 @@ export default function AppearanceSettings() {
     {
       'name': 'Light',
       'value': 'light'
-    }, {
+    }, 
+    {
       'name': 'Dark',
       'value': 'dark'
     }
-  ]
+  ];
 
   return (
     <>

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

@@ -3,6 +3,7 @@ import React from 'react';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Switch from '../Switch';
+import Radio from '../Radio';
 
 export default class TimeSettings extends React.PureComponent {
   constructor(...args) {
@@ -19,12 +20,23 @@ export default class TimeSettings extends React.PureComponent {
 
     let timeSettings;
 
+    const digitalOptions = [
+      {
+        'name': '24 hour',
+        'value': 'twentyfourhour'
+      },
+      {
+        'name': '12 hour',
+        'value': 'twelvehour'
+      }
+    ];
+
     const digitalSettings = (
       <>
         <h3>{time.digital.title}</h3>
+        <Radio title='Format' name='timeformat' options={digitalOptions} />
+        <br/>
         <Checkbox name='seconds' text={time.digital.seconds} />
-        <Checkbox name='24hour' text={time.digital.twentyfourhour} />
-        <Checkbox name='ampm' text={time.digital.ampm} />
         <Checkbox name='zero' text={time.digital.zero} />
       </>
     );

src/components/widgets/greeting/Greeting.jsx

@@ -10,6 +10,7 @@ export default class Greeting extends React.PureComponent {
     this.state = {
       greeting: ''
     };
+    this.timer = undefined;
     this.language = window.language.widgets.greeting;
   }
 
@@ -42,61 +43,65 @@ export default class Greeting extends React.PureComponent {
     return Math.abs(birthday.getUTCFullYear() - 1970);
   }
 
-  getGreeting() {
+  getGreeting(time = (60000 - Date.now() % 60000)) {
-    const now = new Date();
+    this.timer = setTimeout(() => {
-    const hour = now.getHours();
+      const now = new Date();
+      const hour = now.getHours();
 
-    // Set the default greeting string to "Good evening"
+      // Set the default greeting string to "Good evening"
-    let message = this.language.evening;
+      let message = this.language.evening;
-    // If it's before 12am, set the greeting string to "Good morning"
+      // If it's before 12am, set the greeting string to "Good morning"
-    if (hour < 12) {
+      if (hour < 12) {
-      message = this.language.morning;
+        message = this.language.morning;
-    // If it's before 6pm, set the greeting string to "Good afternoon"
+      // If it's before 6pm, set the greeting string to "Good afternoon"
-    } else if (hour < 18) {
+      } else if (hour < 18) {
-      message = this.language.afternoon;
+        message = this.language.afternoon;
-    }
-
-    // Events
-    message = this.doEvents(now, message);
-
-    const custom = localStorage.getItem('defaultGreetingMessage');
-    if (custom === 'false') {
-      message = '';
-    }
-
-    // Name
-    let name = '';
-    const data = localStorage.getItem('greetingName');
-
-    if (typeof data === 'string') {
-      if (data.replace(/\s/g, '').length > 0) {
-        name = `, ${data.trim()}`;
       }
-    }
 
-    if (custom === 'false') {
+      // Events
-      name = name.replace(',', '');
+      message = this.doEvents(now, message);
-    }
 
-    // Birthday
+      const custom = localStorage.getItem('defaultGreetingMessage');
-    const birth = new Date(localStorage.getItem('birthday'));
+      if (custom === 'false') {
-    if (localStorage.getItem('birthdayenabled') === 'true' && birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) {
+        message = '';
-      if (localStorage.getItem('birthdayage')) {
-        const text = this.language.birthday.split(' ');
-        message = `${text[0]} ${dtf.nth(this.calculateAge(birth))} ${text[1]}`;
-      } else {
-        message = this.language.birthday;
       }
-    }
 
-    // Set the state to the greeting string
+      // Name
-    this.setState({
+      let name = '';
-      greeting: `${message}${name}`
+      const data = localStorage.getItem('greetingName');
-    });
+
+      if (typeof data === 'string') {
+        if (data.replace(/\s/g, '').length > 0) {
+          name = `, ${data.trim()}`;
+        }
+      }
+
+      if (custom === 'false') {
+        name = name.replace(',', '');
+      }
+
+      // Birthday
+      const birth = new Date(localStorage.getItem('birthday'));
+      if (localStorage.getItem('birthdayenabled') === 'true' && birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) {
+        if (localStorage.getItem('birthdayage')) {
+          const text = this.language.birthday.split(' ');
+          message = `${text[0]} ${dtf.nth(this.calculateAge(birth))} ${text[1]}`;
+        } else {
+          message = this.language.birthday;
+        }
+      }
+
+      // Set the state to the greeting string
+      this.setState({
+        greeting: `${message}${name}`
+      });
+  
+      this.getGreeting();
+    }, time);
   }
 
   componentDidMount() {
-    this.getGreeting();
+    this.getGreeting(0);
   }
 
   render() {

src/components/widgets/time/Clock.jsx

@@ -21,69 +21,63 @@ export default class Clock extends React.PureComponent {
 
       const timeType = localStorage.getItem('timeType');
 
-      // Percentage
+      switch (timeType) {
-      if (timeType === 'percentageComplete') {
+        case 'percentageComplete':
-        return this.setState({
+          this.setState({
-          time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'
+            time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'
-        });
+          });
-      }
+          break; 
-
+        case 'analogue':
-      // Analog clock
+          // load analog clock css
-      if (timeType === 'analogue') {
+          require('react-clock/dist/Clock.css');
-        // load analog clock css
-        require('react-clock/dist/Clock.css');
-
-        this.setState({
-          time: now
-        });
-      } else {
-        // Default clock
-        let time, sec = '';
-        const zero = localStorage.getItem('zero');
-
-        if (localStorage.getItem('seconds') === 'true') {
-          if (zero === 'false') {
-            sec = ':' + now.getSeconds();
-          } else {
-            sec = `:${('00' + now.getSeconds()).slice(-2)}`;
-          }
-        }
-
-        if (localStorage.getItem('24hour') === 'true') {
-          if (zero === 'false') {
-            time = `${now.getHours()}:${now.getMinutes()}${sec}`;
-          } else {
-            time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
-          }
 
           this.setState({
-            time: time
+            time: now
           });
-        } else {
+          break;
-          // 12 hour support
+        default:
-          let hours = now.getHours();
+          // Default clock
+          let time, sec = '';
+          const zero = localStorage.getItem('zero');
 
-          if (hours > 12) {
+          if (localStorage.getItem('seconds') === 'true') {
-            hours -= 12;
+            if (zero === 'false') {
+              sec = ':' + now.getSeconds();
+            } else {
+              sec = `:${('00' + now.getSeconds()).slice(-2)}`;
+            }
           }
 
-          // Toggle AM/PM
+          if (localStorage.getItem('timeformat') === 'twentyfourhour') {
-          let ampm = now.getHours() > 11 ? 'PM' : 'AM';
+            if (zero === 'false') {
-          if (localStorage.getItem('ampm') === 'false') {
+              time = `${now.getHours()}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
-            ampm = '';
+            } else {
-          }
+              time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
+            }
 
-          if (zero === 'false') {
+            this.setState({
-            time = `${hours}:${now.getMinutes()}${sec}`;
+              time: time
+            });
           } else {
-            time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
+            // 12 hour
-          }
+            let hours = now.getHours();
 
-          this.setState({
+            if (hours > 12) {
-            time: time,
+              hours -= 12;
-            ampm: ampm
+            }
-          });
+
-        }
+            if (zero === 'false') {
+              time = `${hours}:${now.getMinutes()}${sec}`;
+            } else {
+              time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
+            }
+
+            this.setState({
+              time: time,
+              ampm: now.getHours() > 11 ? 'PM' : 'AM'
+            });
+          }
+          break;
       }
 
       this.startTime();