Add Updater UI #231

prayag17 · Dec 10, 2023 · 3db6249 · 3db6249
1 parent 2926e84
commit 3db6249
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 2 deletions.
diff --git a/latest.json b/latest.json
@@ -1,5 +1,5 @@
 {
-	"version": "0.0.2",
+	"version": "0.0.1",
 	"notes": "See the assets to download and install this version.",
 	"pub_date": "2023-12-08T10:15:47.030Z",
 	"platforms": {

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -104,7 +104,7 @@
 			"endpoints": [
 				"https://raw.githack.com/prayag17/JellyPlayer/main/latest.json"
 			],
-			"dialog": true,
+			"dialog": false,
 			"pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDk5QkE0QjMzOEQyRUI5M0MKUldROHVTNk5NMHU2bVMvS3VNRWZHRzhuWE1TRlg3WHI1VHBtZjFvVy80alZ2UHc4T3BqcHVGOWwK"
 		},
 		"windows": [

diff --git a/src/App.jsx b/src/App.jsx
@@ -16,6 +16,11 @@ import {
 } from "react-router-dom";
 import { AnimatePresence, motion } from "framer-motion";
 
+import {
+	checkUpdate,
+	installUpdate,
+	onUpdaterEvent,
+} from "@tauri-apps/api/updater";
 import { relaunch } from "@tauri-apps/api/process";
 
 import { getUserApi } from "@jellyfin/sdk/lib/utils/api/user-api";
@@ -34,6 +39,10 @@ import DialogTitle from "@mui/material/DialogTitle";
 import Button from "@mui/material/Button";
 import Slide from "@mui/material/Slide";
 import LinearProgress from "@mui/material/LinearProgress";
+import IconButton from "@mui/material/IconButton";
+import SvgIcon from "@mui/material/SvgIcon";
+import Typography from "@mui/material/Typography";
+import LoadingButton from "@mui/lab/LoadingButton";
 
 // Routes
 import { ServerSetup } from "./routes/setup/server";
@@ -91,6 +100,7 @@ import { useQuery } from "@tanstack/react-query";
 import { CircularProgress } from "@mui/material";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { useCentralStore } from "./utils/store/central.js";
+import { useSnackbar } from "notistack";
 
 const anim = {
 	initial: {
@@ -158,6 +168,14 @@ const AnimationWrapper = () => {
 	);
 };
 
+// const unlisten = await onUpdaterEvent(({ error, status }) => {
+// 	// This will log all updater events, including status updates and errors.
+// 	console.log("Updater event", error, status);
+// });
+
+// // you need to call unlisten if your handler goes out of scope, for example if the component is unmounted.
+// unlisten();
+
 function App() {
 	const [playbackDataLoading] = usePlaybackDataLoadStore((state) => [
 		state.isPending,
@@ -204,6 +222,43 @@ function App() {
 			"a",
 		],
 	});
+	const { enqueueSnackbar } = useSnackbar();
+
+	const [updateDialog, setUpdateDialog] = useState(false);
+
+	/**
+	 * @type {[import("@tauri-apps/api/updater.js").UpdateManifest, React.Dispatch<import("@tauri-apps/api/updater.js").UpdateManifest>]}
+	 */
+	const [updateInfo, setUpdateInfo] = useState(null);
+
+	const [updateDialogButton, setUpdateDialogButton] = useState(false);
+
+	useEffect(() => {
+		async function checkForUpdates() {
+			try {
+				const { shouldUpdate, manifest } = await checkUpdate();
+
+				if (shouldUpdate) {
+					setUpdateInfo(manifest);
+					setUpdateDialog(true);
+					// You could show a dialog asking the user if they want to install the update here.
+					console.log(
+						`Installing update ${manifest?.version}, ${manifest?.date}, ${manifest?.body}`,
+					);
+
+					// Install the update. This will also restart the app on Windows!
+					// await installUpdate();
+
+					// On macOS and Linux you will need to restart the app manually.
+					// You could use this step to display another confirmation dialog.
+					// await relaunch();
+				}
+			} catch (error) {
+				console.error(error);
+			}
+		}
+		checkForUpdates();
+	}, []);
 
 	const [initialRoute] = useCentralStore((state) => [state.initialRoute]);
 
@@ -237,6 +292,87 @@ function App() {
 							}}
 						/>
 					)}
+					<Dialog
+						// open={false}
+						open={updateDialog}
+						// onClose={}
+						// maxWidth="md"
+						fullWidth
+					>
+						{Boolean(updateInfo) && (
+							<>
+								<DialogTitle>
+									Update Available!
+									<Typography
+										style={{
+											opacity: "0.5",
+										}}
+									>
+										v{updateInfo.version}
+									</Typography>
+								</DialogTitle>
+								<DialogContent dividers>
+									<DialogContentText>
+										{updateInfo.body}
+									</DialogContentText>
+								</DialogContent>
+								<DialogActions
+									style={{
+										padding: "1em",
+									}}
+								>
+									<IconButton
+										disabled={updateDialogButton}
+									>
+										<SvgIcon>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="16"
+												height="16"
+												fill="currentColor"
+												viewBox="0 0 16 16"
+											>
+												<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8" />
+											</svg>
+										</SvgIcon>
+									</IconButton>
+									<Button
+										size="large"
+										color="error"
+										variant="outlined"
+										disabled={updateDialogButton}
+										onClick={() =>
+											setUpdateDialog(false)
+										}
+									>
+										close
+									</Button>
+									<LoadingButton
+										size="large"
+										color="success"
+										variant="contained"
+										loading={updateDialogButton}
+										loadingIndicator="Updating..."
+										onClick={async () => {
+											setUpdateDialogButton(
+												true,
+											);
+											await installUpdate();
+											enqueueSnackbar(
+												"Update has been installed! You need to relaunch JellyPlayer.",
+												{
+													variant: "success",
+												},
+											);
+											await relaunch();
+										}}
+									>
+										Update
+									</LoadingButton>
+								</DialogActions>
+							</>
+						)}
+					</Dialog>
 					<Dialog
 						open={easterEgg}
 						onClose={() => setEasterEgg(false)}