added updater

components/MainHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed w-full flex flex-row px-2 bg-[#11111189] h-14 z-10 border-[#383838] gap-1" style="-webkit-app-region: drag">
+  <div class="fixed w-full flex flex-row px-2 bg-[#11111189] h-14 z-10 gap-1" style="-webkit-app-region: drag">
     <div class="w-full flex gap-10 flex-row items-center justify-center px-5">
       <button @click="openAddAnime" class="flex items-center justify-center px-2 py-2 gap-1 transition-all bg-[#ffffff16] hover:bg-[#ffffff25] rounded-lg select-none" style="-webkit-app-region: no-drag">
         <Icon name="ph:plus-bold" class="h-3.5 w-3.5 text-white" />
@@ -19,7 +19,7 @@
           PLAYLIST
         </div>
       </button> -->
-      <button  class="flex items-center justify-center px-2 py-2 gap-1 transition-all bg-[#ffffff16] hover:bg-[#ffffff25] rounded-lg select-none" style="-webkit-app-region: no-drag">
+      <button @click="openSettings" class="flex items-center justify-center px-2 py-2 gap-1 transition-all bg-[#ffffff16] hover:bg-[#ffffff25] rounded-lg select-none" style="-webkit-app-region: no-drag">
         <Icon name="ic:round-settings" class="h-3.5 w-3.5 text-white" />
         <div class="text-[11px] text-white font-dm">
           SETTINGS

components/Updater.vue

@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="fixed bottom-3 right-5 p-3 flex flex-col bg-[#111111dc] w-80 min-h-24 rounded-xl font-dm text-white transition-all duration-300"
+    :class="data?.status === 'update-available' && !ignoreUpdate || data?.status === 'downloading' || data?.status === 'update-downloaded' ? 'opacity-100' : 'opacity-0 pointer-events-none'"
+  >
+    <button @click="ignoreUpdate = true" class="absolute right-3 top-2">
+      <Icon name="akar-icons:cross" class="h-4 w-4 text-white" />
+    </button>
+    <div class="text-base text-center"> Update available </div>
+    <div class="text-sm text-center"> A new update is available </div>
+    <div v-if="data && data.info && data.info.version" class="text-sm text-center"> v{{ data.info.version }} </div>
+    <button @click="startDownload" v-if="data && data.status === 'update-available'" class="text-sm py-3 bg-[#363434] mt-5 rounded-xl" :disabled="downloading">
+      Download Update
+    </button>
+    <button v-if="data && data.status === 'downloading'" class="relative text-sm py-3 bg-[#363434] mt-5 rounded-xl overflow-hidden">
+      <div class="absolute top-0 left-0 w-full h-full bg-[#a1a1a141] transition-all duration-300" :style="`width: calc((${data.info.percent} / 100) * 100%);`"></div>
+      Downloading...
+    </button>
+    <button @click="startInstall" v-if="data && data.status === 'update-downloaded'" class="text-sm py-3 bg-[#363434] mt-5 rounded-xl" :disabled="installing">
+      Install Update
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const data = ref<{ status: string; info: any }>()
+const downloading = ref<boolean>(false)
+const installing = ref<boolean>(false)
+const ignoreUpdate = ref<boolean>(false)
+
+const checkUpdate = () => {
+  ;(window as any).myAPI.getUpdateStatus().then((result: any) => {
+    data.value = result
+  })
+}
+
+const startDownload = () => {
+  downloading.value = true
+  ;(window as any).myAPI.startUpdateDownload()
+}
+
+const startInstall = () => {
+  installing.value = true
+  ;(window as any).myAPI.startUpdateInstall()
+}
+
+onMounted(() => {
+  checkUpdate()
+
+  setInterval(checkUpdate, 2000)
+})
+</script>
+
+<style></style>

nuxt.config.ts

@@ -11,5 +11,5 @@ export default defineNuxtConfig({
       'DM+Sans': [600, '1000'],
       'Protest+Riot': true
     }
-  }
+  },
 })

package.json

@@ -2,7 +2,7 @@
   "name": "crunchyroll-downloader",
   "author": "Stratum",
   "description": "Crunchyroll Downloader",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": true,
   "main": ".output/src/electron/background.js",
   "repository": "https://github.com/stratuma/Crunchyroll-Downloader-v4.0",

pages/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="h-screen overflow-hidden">
+  <div class="relative h-screen overflow-hidden">
+    <Updater />
     <MainHeader />
     <div class="flex flex-col text-white gap-5 mt-14 p-5 overflow-y-scroll h-[calc(100vh-3.5rem)]">
       <!-- <button @click="deletePlaylist">
@@ -67,6 +68,7 @@
 <script lang="ts" setup>
 import type { ADNEpisode } from '~/components/ADN/Types'
 import type { CrunchyEpisode } from '~/components/Episode/Types'
+import Updater from '~/components/Updater.vue';
 
 const playlist = ref<
   Array<{

pages/settings.vue

@@ -1,8 +1,5 @@
 <template>
-    <div
+  <div class="h-screen bg-[#111111] flex flex-col p-5 text-white" style="-webkit-app-region: drag">
-        class="h-screen bg-[#111111] flex flex-col p-5 text-white"
-        style="-webkit-app-region: drag"
-    >
     <div class="flex flex-row items-center justify-center">
       <div class="text-2xl">Settings</div>
     </div>
@@ -11,11 +8,7 @@
         v-for="(option, index) in options"
         @click="activeIndex = index"
         class="w-full flex items-center justify-center py-2 border-b-2 transition-all"
-                :class="
+        :class="activeIndex === index ? 'border-[#ce6104]' : 'border-[#ce620428]'"
-                    activeIndex === index
-                        ? 'border-[#ce6104]'
-                        : 'border-[#ce620428]'
-                "
       >
         {{ option }}
       </button>
@@ -24,8 +17,8 @@
 </template>
 
 <script lang="ts" setup>
-const options = ref(["Main", "Output", "Naming", "Crunchyroll", "About"]);
+const options = ref(['Main', 'Output', 'Naming', 'Crunchyroll', 'About'])
-const activeIndex = ref(0);
+const activeIndex = ref(0)
 </script>
 
 <style>

src/electron/modules/updater.ts

@@ -2,36 +2,41 @@ import { BrowserWindow, ipcMain } from 'electron'
 import { autoUpdater } from 'electron-updater'
 import log from 'electron-log'
 
+var status: { status: string, info: any } = { status: "", info: null }
+
 autoUpdater.logger = log
 ;(autoUpdater.logger as typeof log).transports.file.level = 'info'
 
-autoUpdater.autoDownload = true
+autoUpdater.autoDownload = false
-autoUpdater.autoInstallOnAppQuit = true
+autoUpdater.autoInstallOnAppQuit = false
+
+ipcMain.handle('updater:getUpdateStatus', async () => {
+  return status
+})
 
 export default (mainWindow: BrowserWindow) => {
-
   let readyToInstall = false
-  function sendUpdaterStatus(...args: any[]) {
+  function updateStatus(statusA: string, info?: any) {
-    mainWindow.webContents.send('updater:statusChanged', args)
+    status = { status: statusA, info: info }
   }
 
   autoUpdater.on('checking-for-update', () => {
-    sendUpdaterStatus('check-for-update')
+    updateStatus('check-for-update')
   })
   autoUpdater.on('update-available', (_info) => {
-    sendUpdaterStatus('update-available')
+    updateStatus('update-available', _info)
   })
   autoUpdater.on('update-not-available', (_info) => {
-    sendUpdaterStatus('update-not-available')
+    updateStatus('update-not-available', _info)
   })
   autoUpdater.on('error', (_err) => {
-    sendUpdaterStatus('update-error')
+    updateStatus('update-error', _err)
   })
   autoUpdater.on('download-progress', (progress) => {
-    sendUpdaterStatus('downloading', progress)
+    updateStatus('downloading', progress)
   })
   autoUpdater.on('update-downloaded', (_info) => {
-    sendUpdaterStatus('update-downloaded')
+    updateStatus('update-downloaded', _info)
     mainWindow.webContents.send('updater:readyToInstall')
     readyToInstall = true
   })
@@ -40,6 +45,10 @@ export default (mainWindow: BrowserWindow) => {
     return await autoUpdater.checkForUpdates()
   })
 
+  ipcMain.handle('updater:download', async (_event) => {
+    return await autoUpdater.downloadUpdate()
+  })
+
   ipcMain.handle('updater:quitAndInstall', (_event) => {
     if (!readyToInstall) return
     autoUpdater.quitAndInstall()

src/electron/preload.ts

@@ -1,14 +1,3 @@
-// This is the preload script for Electron.
-// It runs in the renderer process before the page is loaded.
-// --------------------------------------------
-
-// import { contextBridge } from 'electron'
-
-// process.once('loaded', () => {
-//   - Exposed variables will be accessible at "window.versions".
-//   contextBridge.exposeInMainWorld('versions', process.env)
-// })
-
 import {contextBridge, ipcRenderer} from 'electron'
 
 contextBridge.exposeInMainWorld('myAPI', {
@@ -21,4 +10,7 @@ contextBridge.exposeInMainWorld('myAPI', {
     height: number,
     backgroundColor: string
   }) => ipcRenderer.invoke('window:openNewWindow', opt),
+  getUpdateStatus: () => ipcRenderer.invoke('updater:getUpdateStatus'),
+  startUpdateDownload: () => ipcRenderer.invoke('updater:download'),
+  startUpdateInstall: () => ipcRenderer.invoke('updater:quitAndInstall'),
 })