Update 1.0.0

Added auto update and modal
Added new app icon

release/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "streamflix",
-  "version": "1.0.1b",
+  "version": "1.0.0",
   "description": "A desktop app for streaming movies, tv series and anime.",
   "license": "MIT",
   "author": {

src/main/main.ts

@@ -9,12 +9,15 @@
  * `./src/main.js` using webpack. This gives us some performance wins.
  */
 import path from 'path';
-import { app, BrowserWindow, shell, ipcMain } from 'electron';
+import { app, BrowserWindow, shell, ipcMain, ipcRenderer } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import MenuBuilder from './menu';
 import { resolveHtmlPath } from './util';
 
+autoUpdater.allowDowngrade = true;
+autoUpdater.autoDownload = false;
+
 let mainWindow: BrowserWindow | null = null;
 
 if (process.env.NODE_ENV === 'production') {
@@ -69,7 +72,7 @@ const createWindow = async () => {
     show: false,
     width: 1024,
     height: 728,
-    icon: getAssetPath('icon.png'),
+    icon: getAssetPath('icon.ico'),
     autoHideMenuBar: true,
     titleBarStyle: "hidden",
     webPreferences: {
@@ -81,18 +84,19 @@ const createWindow = async () => {
 
   mainWindow.loadURL(resolveHtmlPath('index.html'));
 
-  //Check for updates
-  autoUpdater.checkForUpdatesAndNotify();
-
-  mainWindow.on('ready-to-show', () => {
+  mainWindow.webContents.on('did-finish-load', () => {
     if (!mainWindow) {
       throw new Error('"mainWindow" is not defined');
     }
     if (process.env.START_MINIMIZED) {
       mainWindow.minimize();
     } else {
       mainWindow.show();
+      mainWindow.focus();
     }
+
+    // Check for updates after window is loaded
+    autoUpdater.checkForUpdates();
   });
 
   mainWindow.on('closed', () => {
@@ -131,12 +135,31 @@ ipcMain.on('close', () => {
   }
 })
 
-autoUpdater.on('update-available', () => {
-  mainWindow?.webContents.send('update-available');
+autoUpdater.on('checking-for-update', () => {
+  log.info('Checking for update...')
+})
+
+autoUpdater.on('update-available', (info) => {
+  if(!mainWindow) return;
+  mainWindow?.webContents.send('update-available', info)
+})
+autoUpdater.on('update-downloaded', (info) => {
+  autoUpdater.quitAndInstall();
+});
+autoUpdater.on('download-progress', (info) => {
+  if(!mainWindow) return;
+  mainWindow?.webContents.send('downloading', info)
+})
+ipcMain.on("download-update", async () => {
+  await autoUpdater.downloadUpdate();
+})
+
+autoUpdater.on('update-not-available', (info) => {
+  log.info('Update not available.', info)
 })
 
-autoUpdater.on('update-downloaded', () => {
-  mainWindow?.webContents.send('update-downloaded');
+autoUpdater.on('error', (err) => {
+  log.error('Error in auto-updater. ', err)
 })
 
 

src/renderer/App.tsx

@@ -13,6 +13,8 @@ import { MediaProvider } from './contexts/MediaContext';
 import { useVideoPlayer, VideoPlayerProvider } from './contexts/VideoPlayerContext';
 import { searchMedia } from '../modules/api/Movies';
 import TitleBar from '../components/TitleBar';
+import { ipcRenderer } from 'electron';
+import UpdateModal from './pages/modals/UpdateModal';
 
 interface SearchResult {
   id: string;
@@ -66,6 +68,13 @@ const AppContent = () => {
     }
   }, [searchTimeout]);
 
+  const [showUpdateModal, setShowUpdateModal] = useState<boolean>(false);
+
+  ipcRenderer.on('update-available', () => {
+    console.warn("update found!")
+    setShowUpdateModal(true)
+  })
+
   const handleSearch = (term: string) => {
     setSearchTerm(term);
     debouncedSearch(term);
@@ -102,8 +111,8 @@ const AppContent = () => {
             as="header"
             align="center"
             justify="space-between"
-            wrap="wrap"
             padding="1.5rem"
+            height={20}
             bg={bgColor}
             color="white"
           >
@@ -226,6 +235,27 @@ const AppContent = () => {
 export default function App(){
   const [keyColor, setKeyColor] = useState<string>(localStorage.getItem('keyColor') || '#6B46C1'); // Updated to a purple shade
 
+  const [showUpdateModal, setShowUpdateModal] = useState<boolean>(false);
+  const [updateDetails, setUpdateDetails] = useState<any>(null);
+
+  useEffect(() => {
+    const updateListener = (event: Electron.IpcRendererEvent, info: any) => {
+      console.log('Update available:', info);
+      setUpdateDetails(info);
+      setShowUpdateModal(true);
+    };
+
+    ipcRenderer.on('update-available', updateListener);
+
+    // Trigger a check for updates
+    ipcRenderer.send('check-for-updates');
+
+    return () => {
+      ipcRenderer.removeListener('update-available', updateListener);
+    };
+  }, []);
+
+
   const theme = useMemo(() => {
     const palette = generatePalette(keyColor);
     return extendTheme({
@@ -277,6 +307,7 @@ export default function App(){
     <ChakraProvider theme={theme}>
       <VideoPlayerProvider>
         <MediaProvider>
+          <UpdateModal isOpen={showUpdateModal} onClose={() => setShowUpdateModal(false)} updateDetails={updateDetails} />
           <Box height="100vh" display="flex" flexDirection="column" overflow="hidden">
             <TitleBar />
             <Box flex={1} className="overflow-hidden">

src/renderer/pages/modals/UpdateModal.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Flex, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Progress, Text, useColorModeValue } from "@chakra-ui/react";
+import { ipcRenderer } from "electron";
+
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    updateDetails: any;
+}
+
+const UpdateModal: React.FC<Props> = ({ isOpen, onClose, updateDetails }) => {
+    const bgColor = useColorModeValue('gray.800', 'gray.900');
+    const inputBgColor = useColorModeValue('gray.700', 'gray.800');
+    const [downloadProgress, setDownloadProgress] = useState({
+        percent: 0,
+        mbDownloaded: "0",
+        mbTotal: "0"
+    });
+    const [isDownloading, setIsDownloading] = useState<boolean>(false);
+
+    useEffect(() => {
+        const downloadListener = (event: any, info: any) => {
+            console.log("Downloading progress:", info);
+            setDownloadProgress({
+                percent: info.percent,
+                mbDownloaded: ((info.percent * info.total) / 100 / 1024 / 1024).toFixed(2),
+                mbTotal: (info.total / 1024 / 1024).toFixed(2)
+            });
+        };
+
+        ipcRenderer.on("downloading", downloadListener);
+
+        return () => {
+            ipcRenderer.removeListener("downloading", downloadListener);
+        };
+    }, []);
+
+    const handleDownload = () => {
+        setIsDownloading(true);
+        ipcRenderer.send("download-update");
+    };
+
+    return (
+        <Modal isOpen={isOpen} onClose={onClose}>
+            <ModalOverlay />
+            <ModalContent bg={bgColor}>
+                <ModalHeader>
+                    <Text className="text-white">Update Available</Text>
+                    <Text className="text-gray-500 text-sm">New Version: {updateDetails?.version}</Text>
+                </ModalHeader>
+                <ModalBody>
+                    {isDownloading ? (
+                        <Flex direction="column">
+                            <Flex justifyContent="flex-end" textColor="gray.400" mb={2}>
+                                <Text>{downloadProgress.mbDownloaded} / {downloadProgress.mbTotal} MB</Text>
+                            </Flex>
+                            <Progress 
+                                value={downloadProgress.percent} 
+                                size="xs"
+                                rounded={"2px"}
+                                colorScheme="brand" 
+                                width="100%"
+                            />
+                        </Flex>
+                    ) : (
+                        <Flex
+                            bg={inputBgColor}
+                            p={2}
+                            borderRadius="md"
+                            boxShadow="lg"
+                            maxH="200px"
+                            overflow="auto"
+                        >
+                            <Text className="text-gray-400">{updateDetails?.releaseNotes?.replaceAll("<p>", "").replaceAll("</p>", "")}</Text>
+                        </Flex>
+                    )}
+                    <Flex mt={2} justifyContent="flex-end">
+                        {!isDownloading && (
+                            <Button colorScheme="brand" onClick={handleDownload}>
+                                Download
+                            </Button>
+                        )}
+                    </Flex>
+                </ModalBody>
+                <ModalCloseButton />
+            </ModalContent>
+        </Modal>
+    );
+};
+
+export default UpdateModal;