feat: update checker

apps/expo/babel.config.js

@@ -4,6 +4,7 @@ module.exports = function (api) {
   return {
     presets: ["babel-preset-expo"],
     plugins: [
+      "@babel/plugin-transform-class-static-block",
       "react-native-reanimated/plugin",
       [
         "module-resolver",

apps/expo/package.json

@@ -23,6 +23,7 @@
     "@movie-web/colors": "*",
     "@movie-web/provider-utils": "*",
     "@movie-web/tmdb": "*",
+    "@octokit/rest": "^20.0.2",
     "@react-native-anywhere/polyfill-base64": "0.0.1-alpha.0",
     "@react-native-async-storage/async-storage": "1.21.0",
     "@react-navigation/native": "^6.1.9",
@@ -35,6 +36,7 @@
     "burnt": "^0.12.2",
     "class-variance-authority": "^0.7.0",
     "expo": "~50.0.14",
+    "expo-application": "~5.8.3",
     "expo-av": "~13.10.5",
     "expo-brightness": "~11.8.0",
     "expo-build-properties": "~0.11.1",

apps/expo/src/app/(tabs)/settings.tsx

@@ -1,6 +1,10 @@
 import type { SelectProps } from "tamagui";
 import React, { useEffect, useState } from "react";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import * as Application from "expo-application";
+import * as Linking from "expo-linking";
 import { FontAwesome, MaterialIcons } from "@expo/vector-icons";
+import { useToastController } from "@tamagui/toast";
 import {
   Adapt,
   Label,
@@ -17,6 +21,7 @@ import {
 
 import type { ThemeStoreOption } from "~/stores/theme";
 import ScreenLayout from "~/components/layout/ScreenLayout";
+import { checkForUpdate } from "~/lib/update";
 import { getGestureControls, saveGestureControls } from "~/settings";
 import { useThemeStore } from "~/stores/theme";
 
@@ -30,6 +35,7 @@ const themeOptions: ThemeStoreOption[] = [
 
 export default function SettingsScreen() {
   const [gestureControlsEnabled, setGestureControlsEnabled] = useState(true);
+  const toastController = useToastController();
 
   useEffect(() => {
     void getGestureControls().then((enabled) => {
@@ -42,13 +48,31 @@ export default function SettingsScreen() {
     await saveGestureControls(isEnabled);
   };
 
+  const handleVersionPress = async () => {
+    const url = await checkForUpdate();
+    if (url) {
+      toastController.show("Update available", {
+        burntOptions: { preset: "none" },
+        native: true,
+      });
+      await Linking.openURL(url);
+    } else {
+      toastController.show("No updates available", {
+        burntOptions: { preset: "none" },
+        native: true,
+      });
+    }
+  };
+
   return (
     <ScreenLayout title="Settings">
       <View padding={4}>
-        <Text marginBottom={4} fontSize={16} fontWeight="bold" color="white">
-          Player
-        </Text>
         <YStack>
+          <XStack width={200} alignItems="center" gap="$4">
+            <Label minWidth={110}>Theme</Label>
+            <Separator minHeight={20} vertical />
+            <ThemeSelector />
+          </XStack>
           <XStack width={200} alignItems="center" gap="$4">
             <Label minWidth={110}>Gesture controls</Label>
             <Separator minHeight={20} vertical />
@@ -61,14 +85,15 @@ export default function SettingsScreen() {
               <Switch.Thumb animation="quicker" />
             </Switch>
           </XStack>
-
-          <XStack width={200} alignItems="center" gap="$4">
-            <Label minWidth={110}>Theme</Label>
-            <Separator minHeight={20} vertical />
-            <ThemeSelector />
-          </XStack>
         </YStack>
       </View>
+      <View justifyContent="center" alignItems="center">
+        <TouchableOpacity onPress={handleVersionPress}>
+          <Text fontSize={14} color="white">
+            v{Application.nativeApplicationVersion}
+          </Text>
+        </TouchableOpacity>
+      </View>
     </ScreenLayout>
   );
 }

apps/expo/src/lib/update.ts

@@ -0,0 +1,46 @@
+import * as Application from "expo-application";
+import { Octokit } from "@octokit/rest";
+
+function isVersionHigher(newVersion: string, currentVersion: string): boolean {
+  const parseVersion = (version: string) =>
+    version
+      .replace(/^v/, "")
+      .split(".")
+      .map((part) => parseInt(part, 10));
+
+  const newParts = parseVersion(newVersion);
+  const currentParts = parseVersion(currentVersion);
+  const maxLength = Math.max(newParts.length, currentParts.length);
+
+  for (let i = 0; i < maxLength; i++) {
+    const newPart = newParts[i] ?? 0;
+    const currentPart = currentParts[i] ?? 0;
+
+    if (newPart !== currentPart) {
+      return newPart > currentPart;
+    }
+  }
+
+  return false;
+}
+
+export async function checkForUpdate(): Promise<string | undefined> {
+  const octokit = new Octokit();
+
+  const res = await octokit.repos
+    .getLatestRelease({
+      owner: "movie-web",
+      repo: "native-app",
+    })
+    .catch(() => undefined);
+
+  if (!res) return;
+
+  const latestVersion: string = res.data.tag_name;
+  const currentVersion: string =
+    Application.nativeApplicationVersion ?? "0.0.0";
+
+  if (isVersionHigher(latestVersion, currentVersion)) {
+    return res.data.html_url;
+  }
+}