adjust colors to movie-web

2025-09-13 18:13:25 +00:00 · 2024-03-08 21:53:03 +01:00
parent 7e035e823a
commit ad2c84950a
29 changed files with 1537 additions and 167 deletions
--- a/apps/expo/src/app/(tabs)/_layout.tsx
+++ b/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,
--- a/apps/expo/src/app/_layout.tsx
+++ b/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,
            },
          }}
        >
--- a/apps/expo/src/components/DownloadItem.tsx
+++ b/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}
--- a/apps/expo/src/components/SvgTabBarIcon.tsx
+++ b/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);
--- a/apps/expo/src/components/TabBarIcon.tsx
+++ b/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} />;
 }
--- a/apps/expo/src/components/player/AudioTrackSelector.tsx
+++ b/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>
--- a/apps/expo/src/components/player/CaptionsSelector.tsx
+++ b/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>
          ))}
--- a/apps/expo/src/components/player/PlaybackSpeedSelector.tsx
+++ b/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>
--- a/apps/expo/src/components/player/ScraperProcess.tsx
+++ b/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));
--- a/apps/expo/src/components/player/SeasonEpisodeSelector.tsx
+++ b/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 && (
--- a/apps/expo/src/components/player/SourceSelector.tsx
+++ b/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}
            />
          }
        />
--- a/apps/expo/src/components/player/VideoSlider.tsx
+++ b/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,
              ]}
--- a/apps/expo/src/components/ui/Searchbar.tsx
+++ b/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>
--- a/apps/expo/src/lib/url.ts
+++ b/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;
+};
--- a/apps/expo/tailwind.config.ts
+++ b/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: {