add switch theme, remove unneeded search bar context

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

@@ -1,4 +1,3 @@
-import { useRef } from "react";
 import { Platform } from "react-native";
 import * as Haptics from "expo-haptics";
 import { Tabs } from "expo-router";
@@ -8,28 +7,18 @@ import { useTheme, View } from "tamagui";
 import { MovieWebSvg } from "~/components/Icon";
 import SvgTabBarIcon from "~/components/SvgTabBarIcon";
 import TabBarIcon from "~/components/TabBarIcon";
-import SearchTabContext from "../../components/ui/SearchTabContext";
 
 export default function TabLayout() {
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  const focusSearchInputRef = useRef(() => {});
-
   const theme = useTheme();
 
   return (
-    <SearchTabContext.Provider value={{ focusSearchInputRef }}>
     <Tabs
       sceneContainerStyle={{
         backgroundColor: theme.screenBackground.val,
       }}
-        screenListeners={({ route }) => ({
+      screenListeners={() => ({
         tabPress: () => {
           void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-            switch (route.name) {
-              case "search":
-                focusSearchInputRef.current();
-                break;
-            }
         },
         focus: () => {
           void ScreenOrientation.lockAsync(
@@ -121,6 +110,5 @@ export default function TabLayout() {
         }}
       />
     </Tabs>
-    </SearchTabContext.Provider>
   );
 }

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

@@ -11,7 +11,6 @@ import {
   Select,
   Separator,
   Sheet,
-  Switch,
   Text,
   useTheme,
   View,
@@ -21,6 +20,7 @@ import {
 
 import type { ThemeStoreOption } from "~/stores/theme";
 import ScreenLayout from "~/components/layout/ScreenLayout";
+import { MWSwitch } from "~/components/ui/Switch";
 import { checkForUpdate } from "~/lib/update";
 import { getGestureControls, saveGestureControls } from "~/settings";
 import { useThemeStore } from "~/stores/theme";
@@ -76,14 +76,12 @@ export default function SettingsScreen() {
           <XStack width={200} alignItems="center" gap="$4">
             <Label minWidth={110}>Gesture controls</Label>
             <Separator minHeight={20} vertical />
-            <Switch
+            <MWSwitch
-              size="$4"
-              native
               checked={gestureControlsEnabled}
               onCheckedChange={handleGestureControlsToggle}
             >
-              <Switch.Thumb animation="quicker" />
+              <MWSwitch.Thumb animation="quicker" />
-            </Switch>
+            </MWSwitch>
           </XStack>
         </YStack>
       </View>

apps/expo/src/components/ui/Button.tsx

@@ -1,51 +1,28 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import type { ButtonProps } from "tamagui";
-import React from "react";
 import { Button, styled } from "tamagui";
 
-const PrimaryButton = styled(Button, {
+export const MWButton = styled(Button, {
+  variants: {
+    type: {
+      primary: {
         backgroundColor: "$buttonPrimaryBackground",
         color: "$buttonPrimaryText",
         fontWeight: "bold",
-});
+      },
-
+      secondary: {
-const SecondaryButton = styled(Button, {
         backgroundColor: "$buttonSecondaryBackground",
         color: "$buttonSecondaryText",
         fontWeight: "bold",
-});
+      },
-
+      purple: {
-const PurpleButton = styled(Button, {
         backgroundColor: "$buttonPurpleBackground",
         color: "white",
         fontWeight: "bold",
-});
+      },
-
+      cancel: {
-const CancelButton = styled(Button, {
         backgroundColor: "$buttonCancelBackground",
         color: "white",
         fontWeight: "bold",
+      },
+    },
+  } as const,
 });
-
-export const MWButton = React.forwardRef<
-  typeof Button,
-  ButtonProps & {
-    type?: "primary" | "secondary" | "purple" | "cancel";
-  }
->((props, ref) => {
-  const { type, ...rest } = props;
-  switch (type) {
-    case "primary":
-      return <PrimaryButton {...rest} ref={ref as any} />;
-    case "secondary":
-      return <SecondaryButton {...rest} ref={ref as any} />;
-    case "purple":
-      return <PurpleButton {...rest} ref={ref as any} />;
-    case "cancel":
-      return <CancelButton {...rest} ref={ref as any} />;
-    default:
-      return <Button {...rest} ref={ref as any} />;
-  }
-});
-
-MWButton.displayName = "MWButton";

apps/expo/src/components/ui/SearchTabContext.tsx

@@ -1,8 +0,0 @@
-import React from "react";
-
-const SearchTabContext = React.createContext({
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  focusSearchInputRef: { current: () => {} },
-});
-
-export default SearchTabContext;

apps/expo/src/components/ui/Searchbar.tsx

@@ -1,10 +1,9 @@
-import { useContext, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Keyboard } from "react-native";
 import { FontAwesome5 } from "@expo/vector-icons";
+import { useIsFocused } from "@react-navigation/native";
 import { Input, styled, useTheme, View } from "tamagui";
 
-import SearchTabContext from "./SearchTabContext";
-
 const SearchInput = styled(Input, {
   backgroundColor: "$searchBackground",
   borderColor: "$colorTransparent",
@@ -22,17 +21,16 @@ export function SearchBar({
   onSearchChange: (text: string) => void;
 }) {
   const theme = useTheme();
+  const pageIsFocused = useIsFocused();
   const [keyword, setKeyword] = useState("");
   const [isFocused, setIsFocused] = useState(false);
   const inputRef = useRef<Input>(null);
 
-  const { focusSearchInputRef } = useContext(SearchTabContext);
-
   useEffect(() => {
-    focusSearchInputRef.current = () => {
+    if (pageIsFocused) {
       inputRef.current?.focus();
-    };
+    }
-  }, [focusSearchInputRef]);
+  }, [pageIsFocused]);
 
   useEffect(() => {
     const keyboardDidShowListener = Keyboard.addListener(

apps/expo/src/components/ui/Switch.tsx

@@ -0,0 +1,27 @@
+import type { SwitchProps } from "tamagui";
+import { Switch, useTheme } from "tamagui";
+
+const MWSwitch = (props: SwitchProps) => {
+  const theme = useTheme();
+  return (
+    <Switch
+      native
+      nativeProps={{
+        trackColor: {
+          true: theme.switchActiveTrackColor.val,
+          false: theme.switchInactiveTrackColor.val,
+        },
+        thumbColor: theme.switchThumbColor.val,
+      }}
+      {...props}
+    />
+  );
+};
+
+const MWSwitchThumb = (props: any) => {
+  return <Switch.Thumb animation="quicker" {...props} />;
+};
+
+MWSwitch.Thumb = MWSwitchThumb;
+
+export { MWSwitch };

apps/expo/src/lib/update.ts

@@ -36,9 +36,8 @@ export async function checkForUpdate(): Promise<string | undefined> {
 
   if (!res) return;
 
-  const latestVersion: string = res.data.tag_name;
+  const latestVersion = res.data.tag_name;
-  const currentVersion: string =
+  const currentVersion = Application.nativeApplicationVersion ?? "0.0.0";
-    Application.nativeApplicationVersion ?? "0.0.0";
 
   if (isVersionHigher(latestVersion, currentVersion)) {
     return res.data.html_url;

apps/expo/tamagui.config.ts

@@ -73,6 +73,10 @@ const createThemeConfig = (tokens: Tokens) => ({
   buttonPurpleBackgroundHover: tokens.purple.c400,
   buttonCancelBackground: tokens.ash.c500,
   buttonCancelBackgroundHover: tokens.ash.c300,
+
+  switchActiveTrackColor: tokens.purple.c300,
+  switchInactiveTrackColor: tokens.ash.c500,
+  switchThumbColor: tokens.white,
 });
 
 const openSansFace = {

packages/provider-utils/package.json

@@ -29,7 +29,7 @@
   },
   "prettier": "@movie-web/prettier-config",
   "dependencies": {
-    "@movie-web/providers": "^2.2.2",
+    "@movie-web/providers": "^2.2.4",
     "parse-hls": "^1.0.7",
     "srt-webvtt": "^2.0.0",
     "tmdb-ts": "^1.6.1"

pnpm-lock.yaml

@@ -235,8 +235,8 @@ importers:
   packages/provider-utils:
     dependencies:
       '@movie-web/providers':
-        specifier: ^2.2.2
+        specifier: ^2.2.4
-        version: 2.2.2
+        version: 2.2.4
       parse-hls:
         specifier: ^1.0.7
         version: 1.0.7
@@ -2865,8 +2865,8 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /@movie-web/providers@2.2.2:
+  /@movie-web/providers@2.2.4:
-    resolution: {integrity: sha512-pTlErE5bdu+b68mUW2YAKOJKz2hwSx63auGAfTkGQ+0SHDMlCV9QQ8S8O9IoSsvdXps7/YlWJWOMX8pmKuYbPQ==}
+    resolution: {integrity: sha512-c10ffR7/oPMbVwpD+Lw0/k5jvx51NbywGJtogzRjeXqDr01o5+pitPeN1qSGaqTg5FBlipn7NSesrd+cczDDQw==}
     dependencies:
       cheerio: 1.0.0-rc.12
       cookie: 0.6.0