Added update checking

YomoSK · May 29, 2024 · a0f5768 · a0f5768
1 parent 44bc33e
commit a0f5768
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 3 deletions.
diff --git a/preload.js b/preload.js
@@ -5,14 +5,17 @@ const cheerio = require('cheerio');
 contextBridge.exposeInMainWorld('electron', {
    loadPage: url => ipcRenderer.send('load-page', url),
    maximize: () => ipcRenderer.send('max-app', {}),
-   closeApp: () => ipcRenderer.send('close-app', {})
+   closeApp: () => ipcRenderer.send('close-app', {}),
+   getAppVersion: () => {
+      return require('./package.json').version;
+   }
 });
 
 contextBridge.exposeInMainWorld('webSupplier', {
    getTitle: url => {
       return new Promise((resolve, reject) => {
          superagent.get(url).then(html => {
-            resolve(cheerio.load(html.text)('title').text());
+            resolve(cheerio.load(html.text)('head>title').text());
          }).catch(reject);
       });
    }

diff --git a/public/index.html b/public/index.html
@@ -10,7 +10,7 @@
          <nav>
             <div id="tabs-wrapper">
                <i class="fas fa-plus" style="cursor: pointer;" @click.prevent="newTab()"></i>
-               <p v-if="opened[openedIndex].title != null">{{ opened[openedIndex].title }}</p>
+               <p v-if="opened[openedIndex].title != null">{{ getTitle() }}</p>
             </div>
             <div id="searchbar">
                <i v-if="isHTTPSPage()" :style="{ 'color': isHTTPSPage() ? 'black' : null }" class="fas fa-lock"></i>
@@ -25,11 +25,16 @@
                   @focusout="focusedSearchBar = false"
                ></input>
             </div>
+            <div id="update-check">
+               <i class="fa-solid fa-rotate" ref="updater-icon"></i>
+            </div>
             <div id="controls">
                <div @click.prevent="closeApp()" style="background: #FF3B30;" @click.prevent="closeApp()"></div>
                <!-- <div @click.prevent="maximize()" style="background: #FFCC00; border-radius: 0;"></div> -->
             </div>
          </nav>
+
+         <p v-if="opened[openedIndex].url == 'about:blank' && notice.length > 0" v-html="notice.join('<br>')" id="notice"></p>
       </div>
       <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
       <script src="https://unpkg.com/@popperjs/core@2"></script>

diff --git a/public/script.js b/public/script.js
@@ -12,7 +12,9 @@ const app = Vue.createApp({
          url: '',
          opened: [{ title: null, url: 'about:blank' }],
          openedIndex: 0,
+         notice: [],
          tabsTippy: null,
+         updateCheckerTippy: null,
          focusedSearchBar: false
       }
    },
@@ -60,6 +62,11 @@ const app = Vue.createApp({
          }
          return `<ul id="tabs-tooltip">${arr.map(r => '<li>' + r + '</li>').join('')}</ul>`;
       },
+      getTitle() {
+         let title = this.opened[this.openedIndex].title;
+         if(title.length > 12) title = title.substring(0, 12) + '...';
+         return title;
+      },
       isHTTPSPage() {
          return this.url.startsWith('https://');
       },
@@ -76,6 +83,44 @@ const app = Vue.createApp({
          this.opened[this.openedIndex] = { title: await window.webSupplier.getTitle(this.url), url: this.url };
       });
 
+      function updateCheckerTippy(text) {
+         if(this.updateCheckerTippy != null && this.updateCheckerTippy[0] != null) this.updateCheckerTippy[0].destroy();
+         this.updateCheckerTippy = tippy('#update-check', {
+            content: '<div style="padding: .5rem; font-family: \'Roboto\', sans-serif; font-weight: 600; letter-spacing: 1px;">' + text + '</div>'
+         });
+      }
+      updateCheckerTippy('Checking for updates...');
+
+      const updaterIcon = this.$refs['updater-icon'];
+
+      fetch('https://api.yomea.dev')
+         .then(res => res.json())
+         .then(data => {
+            this.notice = data?.notice;
+
+            updaterIcon.style.animation = 'none';
+            if(data?.newestVersion == window.electron.getAppVersion()) {
+               updateCheckerTippy('Perfect! You\'re running the latest version!');
+               updaterIcon.classList.value = 'fas fa-check';
+               updaterIcon.style.color = '#4cd964';
+            }
+            else {
+               updateCheckerTippy('Newer version is available!<br>Click to download it!');
+               updaterIcon.classList.value = 'fas fa-box';
+               updaterIcon.style.color = '#007aff';
+               updaterIcon.style.cursor = 'pointer';
+               updaterIcon.parentNode.addEventListener('click', () => {
+                  this.url = 'https://github.com/YomoSK/yomea';
+                  window.electron.loadPage(this.url);
+               });
+            }
+         })
+         .catch(() => {
+            updateCheckerTippy('Could not verify the latest version!');
+            updaterIcon.classList.value = 'fas fa-triangle-exclamation';
+         })
+         .finally(() => updaterIcon.style.animation = 'none');
+
       _emitter.on('change-tab', data => this.changeTab(data.index));
    },
    watch: {
@@ -87,6 +132,7 @@ const app = Vue.createApp({
             if(this.tabsTippy != null && this.tabsTippy[0] != null) this.tabsTippy[0].destroy();
             this.tabsTippy = tippy('#tabs-wrapper', {
                content: this.getTabsTooltip(),
+               arrow: false,
                interactive: true
             });
          },

diff --git a/public/styles.css b/public/styles.css
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Cantarell&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Palanquin+Dark:wght@400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
 
 body {
@@ -39,6 +40,8 @@ nav > #tabs-wrapper > p {
     font-family: 'Open Sans', sans-serif;
     font-size: .85rem;
     font-weight: 600;
+    max-width: 5.5rem;
+    text-wrap: nowrap;
     position: relative;
 }
 
@@ -55,6 +58,26 @@ nav > #tabs-wrapper > p::before {
     z-index: -1;
 }
 
+nav > #update-check {
+    margin-left: calc(40% + 1rem);
+    position: absolute;
+    transform: translateX(75%);
+}
+
+nav > #update-check > i {
+    animation: spinning 1s ease infinite;
+}
+
+@keyframes spinning {
+    from {
+        transform: rotateX(180deg) rotate(0);
+    }
+
+    to {
+        transform: rotateX(180deg) rotate(1turn);
+    }
+}
+
 .tippy-content {
     padding: .3rem;
 }
@@ -124,4 +147,14 @@ nav > #controls > div {
     aspect-ratio: 1;
     border-radius: 50%;
     cursor: pointer;
+}
+
+p#notice {
+    margin-top: calc(2rem + 57px);
+    font-family: 'Palanquin Dark', sans-serif;
+    font-size: 1.2rem;
+    font-weight: 700;
+    letter-spacing: 2px;
+    text-align: center;
+    opacity: .4;
 }