adjust colors to movie-web

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

@@ -4,7 +4,7 @@ import * as Haptics from "expo-haptics";
 import { Tabs } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 
-import Colors from "@movie-web/tailwind-config/colors";
+import { defaultTheme } from "@movie-web/tailwind-config/themes";
 
 import { MovieWebSvg } from "~/components/Icon";
 import SvgTabBarIcon from "~/components/SvgTabBarIcon";
@@ -19,7 +19,7 @@ export default function TabLayout() {
     <SearchTabContext.Provider value={{ focusSearchInputRef }}>
       <Tabs
         sceneContainerStyle={{
-          backgroundColor: Colors.background,
+          backgroundColor: defaultTheme.extend.colors.background.main,
         }}
         screenListeners={({ route }) => ({
           tabPress: () => {
@@ -38,9 +38,9 @@ export default function TabLayout() {
         })}
         screenOptions={{
           headerShown: false,
-          tabBarActiveTintColor: Colors.primary[100],
+          tabBarActiveTintColor: defaultTheme.extend.colors.tabBar.active,
           tabBarStyle: {
-            backgroundColor: Colors.secondary[700],
+            backgroundColor: defaultTheme.extend.colors.tabBar.background,
             borderTopColor: "transparent",
             borderTopRightRadius: 20,
             borderTopLeftRadius: 20,

apps/expo/src/app/_layout.tsx

@@ -12,10 +12,10 @@ import {
 } from "@react-navigation/native";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-import Colors from "@movie-web/tailwind-config/colors";
-
 import "../styles/global.css";
 
+import { defaultTheme } from "@movie-web/tailwind-config/themes";
+
 export {
   // Catch any errors thrown by the Layout component.
   ErrorBoundary,
@@ -83,7 +83,7 @@ function RootLayoutNav() {
             presentation: "card",
             headerShown: false,
             contentStyle: {
-              backgroundColor: Colors.background,
+              backgroundColor: defaultTheme.extend.colors.background.main,
             },
           }}
         >

apps/expo/src/components/DownloadItem.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Text, View } from "react-native";
 import { Bar as ProgressBar } from "react-native-progress";
 
-import colors from "@movie-web/tailwind-config/colors";
+import { defaultTheme } from "@movie-web/tailwind-config/themes";
 
 export interface DownloadItemProps {
   filename: string;
@@ -38,8 +38,8 @@ export const DownloadItem: React.FC<DownloadItemProps> = ({
       <ProgressBar
         progress={progress}
         width={null}
-        color={colors.primary[400]}
-        unfilledColor={colors.gray[200]}
+        color={defaultTheme.extend.colors.download.progressFilled}
+        unfilledColor={defaultTheme.extend.colors.download.progress}
         borderWidth={0}
         height={10}
         borderRadius={5}

apps/expo/src/components/SvgTabBarIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import Colors from "@movie-web/tailwind-config/colors";
+import { defaultTheme } from "@movie-web/tailwind-config/themes";
 
 interface SvgTabBarIconProps {
   focused?: boolean;
@@ -11,7 +11,9 @@ export default function SvgTabBarIcon({
   focused,
   children,
 }: SvgTabBarIconProps) {
-  const fillColor = focused ? Colors.primary[300] : Colors.secondary[300];
+  const fillColor = focused
+    ? defaultTheme.extend.colors.tabBar.active
+    : defaultTheme.extend.colors.tabBar.inactive;
 
   if (React.isValidElement(children)) {
     return React.cloneElement(children, { fillColor } as React.Attributes);

apps/expo/src/components/TabBarIcon.tsx

@@ -1,17 +1,14 @@
 import { FontAwesome } from "@expo/vector-icons";
 
-import Colors from "@movie-web/tailwind-config/colors";
+import { defaultTheme } from "@movie-web/tailwind-config/themes";
 
 type Props = {
   focused?: boolean;
 } & React.ComponentProps<typeof FontAwesome>;
 
 export default function TabBarIcon({ focused, ...rest }: Props) {
-  return (
-    <FontAwesome
-      color={focused ? Colors.primary[300] : Colors.secondary[300]}
-      size={24}
-      {...rest}
-    />
-  );
+  const color = focused
+    ? defaultTheme.extend.colors.tabBar.active
+    : defaultTheme.extend.colors.tabBar.inactive;
+  return <FontAwesome color={color} size={24} {...rest} />;
 }

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,
               ]}

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

@@ -2,7 +2,7 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { TextInput, View } from "react-native";
 import { FontAwesome5 } from "@expo/vector-icons";
 
-import Colors from "@movie-web/tailwind-config/colors";
+import { defaultTheme } from "@movie-web/tailwind-config/themes";
 
 import SearchTabContext from "./SearchTabContext";
 
@@ -30,14 +30,18 @@ export function SearchBar({
   return (
     <View className="mb-6 mt-4 flex-row items-center rounded-full border border-primary-400 bg-black focus-within:border-primary-300">
       <View className="ml-1 w-12 items-center justify-center">
-        <FontAwesome5 name="search" size={18} color={Colors.secondary[200]} />
+        <FontAwesome5
+          name="search"
+          size={18}
+          color={defaultTheme.extend.colors.search.icon}
+        />
       </View>
       <TextInput
         value={keyword}
         onChangeText={handleChange}
         ref={inputRef}
         placeholder="What are you looking for?"
-        placeholderTextColor={Colors.secondary[200]}
+        placeholderTextColor={defaultTheme.extend.colors.search.placeholder}
         className="w-full rounded-3xl py-3 pr-5 text-white"
       />
     </View>

apps/expo/src/lib/url.ts

@@ -0,0 +1,6 @@
+export const constructFullUrl = (playlistUrl: string, uri: string) => {
+  const baseUrl = playlistUrl.substring(0, playlistUrl.lastIndexOf("/") + 1);
+  return uri.startsWith("http://") || uri.startsWith("https://")
+    ? uri
+    : baseUrl + uri;
+};

apps/expo/tailwind.config.ts

@@ -7,8 +7,8 @@ import baseConfig from "@movie-web/tailwind-config/native";
 export default {
   content: ["./src/**/*.{ts,tsx}"],
   presets: [
-    baseConfig,
     nativewind,
+    baseConfig,
     {
       theme: {
         extend: {