adjust colors to movie-web

apps/expo/src/components/player/AudioTrackSelector.tsx

@@ -3,7 +3,7 @@ import { Pressable, ScrollView, View } from "react-native";
 import Modal from "react-native-modal";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 
-import colors from "@movie-web/tailwind-config/colors";
+import { defaultTheme } from "@movie-web/tailwind-config/themes";
 
 import { useAudioTrack } from "~/hooks/player/useAudioTrack";
 import { useBoolean } from "~/hooks/useBoolean";
@@ -62,7 +62,7 @@ export const AudioTrackSelector = () => {
             <MaterialCommunityIcons
               name="volume-high"
               size={24}
-              color={colors.primary[300]}
+              color={defaultTheme.extend.colors.buttons.primary}
             />
           }
         />
@@ -97,7 +97,7 @@ export const AudioTrackSelector = () => {
                 <MaterialCommunityIcons
                   name="check-circle"
                   size={24}
-                  color={colors.primary[300]}
+                  color={defaultTheme.extend.colors.buttons.primary}
                 />
               )}
             </Pressable>

apps/expo/src/components/player/CaptionsSelector.tsx

@@ -6,7 +6,7 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { parse } from "subsrt-ts";
 
 import type { Stream } from "@movie-web/provider-utils";
-import colors from "@movie-web/tailwind-config/colors";
+import { defaultTheme } from "@movie-web/tailwind-config/themes";
 
 import { useBoolean } from "~/hooks/useBoolean";
 import { useCaptionsStore } from "~/stores/captions";
@@ -59,7 +59,7 @@ export const CaptionsSelector = () => {
             <MaterialCommunityIcons
               name="subtitles"
               size={24}
-              color={colors.primary[300]}
+              color={defaultTheme.extend.colors.buttons.primary}
             />
           }
         />
@@ -90,7 +90,7 @@ export const CaptionsSelector = () => {
               <MaterialCommunityIcons
                 name="download"
                 size={24}
-                color={colors.primary[300]}
+                color={defaultTheme.extend.colors.buttons.primary}
               />
             </Pressable>
           ))}

apps/expo/src/components/player/PlaybackSpeedSelector.tsx

@@ -2,7 +2,7 @@ import { Pressable, ScrollView, View } from "react-native";
 import Modal from "react-native-modal";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 
-import colors from "@movie-web/tailwind-config/colors";
+import { defaultTheme } from "@movie-web/tailwind-config/themes";
 
 import { usePlaybackSpeed } from "~/hooks/player/usePlaybackSpeed";
 import { useBoolean } from "~/hooks/useBoolean";
@@ -27,7 +27,7 @@ export const PlaybackSpeedSelector = () => {
             <MaterialCommunityIcons
               name="speedometer"
               size={24}
-              color={colors.primary[300]}
+              color={defaultTheme.extend.colors.buttons.primary}
             />
           }
         />
@@ -59,7 +59,7 @@ export const PlaybackSpeedSelector = () => {
                 <MaterialCommunityIcons
                   name="check-circle"
                   size={24}
-                  color={colors.primary[300]}
+                  color={defaultTheme.extend.colors.buttons.primary}
                 />
               )}
             </Pressable>

apps/expo/src/components/player/ScraperProcess.tsx

@@ -18,6 +18,7 @@ import { fetchMediaDetails, fetchSeasonDetails } from "@movie-web/tmdb";
 
 import type { ItemData } from "../item/item";
 import type { AudioTrack } from "./AudioTrackSelector";
+import { constructFullUrl } from "~/lib/url";
 import { PlayerStatus } from "~/stores/player/slices/interface";
 import { usePlayerStore } from "~/stores/player/store";
 import { Text } from "../ui/Text";
@@ -64,14 +65,16 @@ export const ScraperProcess = ({ data }: ScraperProcessProps) => {
       setCheckedSource(event);
       setScrapeStatus({ status: ScrapeStatus.LOADING, progress: 10 });
     } else if (isUpdateEvent(event)) {
+      console.log(event.status);
       switch (event.status) {
-        case ScrapeStatus.SUCCESS:
+        case "success":
           setScrapeStatus({ status: ScrapeStatus.SUCCESS, progress: 100 });
           break;
-        case ScrapeStatus.ERROR as string:
+        case "failure":
           setScrapeStatus({ status: ScrapeStatus.ERROR, progress: 0 });
           break;
-        case ScrapeStatus.LOADING as string:
+        case "pending":
+        case "notfound":
       }
       setCheckedSource(event.id);
     } else if (isInitEvent(event) || isDiscoverEmbedsEvent(event)) {
@@ -131,7 +134,7 @@ export const ScraperProcess = ({ data }: ScraperProcessProps) => {
       const streamResult = await getVideoStream({
         media: scrapeMedia,
         events: {
-          // init: handleEvent,
+          init: handleEvent,
           update: handleEvent,
           discoverEmbeds: handleEvent,
           start: handleEvent,
@@ -151,27 +154,16 @@ export const ScraperProcess = ({ data }: ScraperProcessProps) => {
 
         if (tracks) setHlsTracks(tracks);
 
-        const constructFullUrl = (playlistUrl: string, uri: string) => {
-          const baseUrl = playlistUrl.substring(
-            0,
-            playlistUrl.lastIndexOf("/") + 1,
-          );
-          return uri.startsWith("http://") || uri.startsWith("https://")
-            ? uri
-            : baseUrl + uri;
-        };
-
         if (tracks?.audio.length) {
           const audioTracks: AudioTrack[] = tracks.audio.map((track) => ({
             uri: constructFullUrl(
               (streamResult.stream as HlsBasedStream).playlist,
               track.uri,
             ),
-            name: (track.properties[0]?.attributes.name as string) ?? "Unknown",
+            name: track.properties[0]?.attributes.name?.toString() ?? "Unknown",
             language:
-              (track.properties[0]?.attributes.language as string) ?? "Unknown",
-            active:
-              (track.properties[0]?.attributes.default as boolean) ?? false,
+              track.properties[0]?.attributes.language?.toString() ?? "Unknown",
+            active: Boolean(track.properties[0]?.attributes.default) ?? false,
           }));
 
           const uniqueTracks = new Set(audioTracks.map((t) => t.language));

apps/expo/src/components/player/SeasonEpisodeSelector.tsx

@@ -9,7 +9,7 @@ import Modal from "react-native-modal";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useQuery } from "@tanstack/react-query";
 
-import colors from "@movie-web/tailwind-config/colors";
+import { defaultTheme } from "@movie-web/tailwind-config/themes";
 import { fetchMediaDetails, fetchSeasonDetails } from "@movie-web/tmdb";
 
 import { useBoolean } from "~/hooks/useBoolean";
@@ -45,7 +45,10 @@ const EpisodeSelector = ({
     <>
       {isLoading && (
         <View className="flex-1 items-center justify-center">
-          <ActivityIndicator size="large" color={colors.primary[300]} />
+          <ActivityIndicator
+            size="large"
+            color={defaultTheme.extend.colors.buttons.primary}
+          />
         </View>
       )}
       {data && (
@@ -120,7 +123,7 @@ export const SeasonSelector = () => {
             <MaterialCommunityIcons
               name="audio-video"
               size={24}
-              color={colors.primary[300]}
+              color={defaultTheme.extend.colors.buttons.primary}
             />
           }
         />
@@ -140,7 +143,10 @@ export const SeasonSelector = () => {
           <>
             {isLoading && (
               <View className="flex-1 items-center justify-center">
-                <ActivityIndicator size="large" color={colors.primary[300]} />
+                <ActivityIndicator
+                  size="large"
+                  color={defaultTheme.extend.colors.buttons.primary}
+                />
               </View>
             )}
             {data && (

apps/expo/src/components/player/SourceSelector.tsx

@@ -4,7 +4,7 @@ import Modal from "react-native-modal";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 
 import { getBuiltinSources, providers } from "@movie-web/provider-utils";
-import colors from "@movie-web/tailwind-config/colors";
+import { defaultTheme } from "@movie-web/tailwind-config/themes";
 
 import {
   useEmbedScrape,
@@ -55,14 +55,14 @@ const SourceItem = ({
         <MaterialCommunityIcons
           name="check-circle"
           size={24}
-          color={colors.primary[300]}
+          color={defaultTheme.extend.colors.buttons.primary}
         />
       )}
       {isError && (
         <MaterialCommunityIcons
           name="alert-circle"
           size={24}
-          color={colors.red[500]}
+          color={defaultTheme.extend.colors.video.context.error}
         />
       )}
       {isPending && <ActivityIndicator size="small" color="#0000ff" />}
@@ -141,7 +141,7 @@ export const SourceSelector = () => {
             <MaterialCommunityIcons
               name="video"
               size={24}
-              color={colors.primary[300]}
+              color={defaultTheme.extend.colors.buttons.primary}
             />
           }
         />

apps/expo/src/components/player/VideoSlider.tsx

@@ -17,7 +17,7 @@ import Animated, {
   useSharedValue,
 } from "react-native-reanimated";
 
-import colors from "@movie-web/tailwind-config/colors";
+import { defaultTheme } from "@movie-web/tailwind-config/themes";
 
 import { usePlayerStore } from "~/stores/player/store";
 
@@ -132,7 +132,7 @@ const VideoSlider = ({ onSlidingComplete }: VideoSliderProps) => {
             {
               height: trackSize_,
               borderRadius: trackSize_,
-              backgroundColor: colors.secondary[700],
+              backgroundColor: defaultTheme.extend.colors.video.context.slider,
               width,
             },
           ]}
@@ -142,7 +142,8 @@ const VideoSlider = ({ onSlidingComplete }: VideoSliderProps) => {
               {
                 position: "absolute",
                 height: trackSize_,
-                backgroundColor: colors.primary[300],
+                backgroundColor:
+                  defaultTheme.extend.colors.video.context.sliderFilled,
                 borderRadius: trackSize_ / 2,
               },
               progressStyle,
@@ -160,7 +161,8 @@ const VideoSlider = ({ onSlidingComplete }: VideoSliderProps) => {
                   height: knobSize_,
                   width: knobSize_,
                   borderRadius: knobSize_ / 2,
-                  backgroundColor: colors.primary[300],
+                  backgroundColor:
+                    defaultTheme.extend.colors.video.context.sliderFilled,
                 },
                 scrollTranslationStyle,
               ]}