chore: moved constant values to a file

Reduced duplication and removed constants to a new file

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>

app/(auth)/player/direct-player.tsx

@@ -21,6 +21,12 @@ import { BITRATES } from "@/components/BitrateSelector";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { Controls } from "@/components/video-player/controls/Controls";
+import {
+  OUTLINE_THICKNESS,
+  OutlineThickness,
+  VLC_COLORS,
+  VLCColor,
+} from "@/constants/SubtitleConstants";
 import { useHaptic } from "@/hooks/useHaptic";
 import { usePlaybackManager } from "@/hooks/usePlaybackManager";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
@@ -41,25 +47,6 @@ import { storage } from "@/utils/mmkv";
 import { generateDeviceProfile } from "@/utils/profiles/native";
 import { msToTicks, ticksToSeconds } from "@/utils/time";
 
-type VLCColor =
-  | "Black"
-  | "Gray"
-  | "Silver"
-  | "White"
-  | "Maroon"
-  | "Red"
-  | "Fuchsia"
-  | "Yellow"
-  | "Olive"
-  | "Green"
-  | "Teal"
-  | "Lime"
-  | "Purple"
-  | "Navy"
-  | "Blue"
-  | "Aqua";
-type OutlineThickness = "None" | "Thin" | "Normal" | "Thick";
-
 export default function page() {
   const videoRef = useRef<VlcPlayerViewRef>(null);
   const user = useAtomValue(userAtom);
@@ -610,33 +597,6 @@ export default function page() {
     const outlineOpacity = storage.getNumber("vlc.outlineOpacity") || 255;
     const isBold = storage.getBoolean("vlc.isBold") || false;
 
-    // VLC color values mapping
-    const VLC_COLORS: Record<VLCColor, number> = {
-      Black: 0,
-      Gray: 8421504,
-      Silver: 12632256,
-      White: 16777215,
-      Maroon: 8388608,
-      Red: 16711680,
-      Fuchsia: 16711935,
-      Yellow: 16776960,
-      Olive: 8421376,
-      Green: 32768,
-      Teal: 32896,
-      Lime: 65280,
-      Purple: 8388736,
-      Navy: 128,
-      Blue: 255,
-      Aqua: 65535,
-    };
-
-    const OUTLINE_THICKNESS: Record<OutlineThickness, number> = {
-      None: 0,
-      Thin: 2,
-      Normal: 4,
-      Thick: 6,
-    };
-
     // Add subtitle styling options
     initOptions.push(`--freetype-color=${VLC_COLORS[textColor]}`);
     initOptions.push(`--freetype-background-opacity=${backgroundOpacity}`);

components/settings/StorageSettings.tsx

@@ -40,7 +40,6 @@ export const StorageSettings = () => {
   };
 
   const calculatePercentage = (value: number, total: number) => {
-    console.log("usage", value, total);
     return ((value / total) * 100).toFixed(2);
   };
 

components/settings/SubtitleToggles.tsx

@@ -18,31 +18,7 @@ import { useMedia } from "./MediaContext";
 
 interface Props extends ViewProps {}
 
-const VLC_COLORS = {
+import { OUTLINE_THICKNESS, VLC_COLORS } from "@/constants/SubtitleConstants";
-  Black: 0,
-  Gray: 8421504,
-  Silver: 12632256,
-  White: 16777215,
-  Maroon: 8388608,
-  Red: 16711680,
-  Fuchsia: 16711935,
-  Yellow: 16776960,
-  Olive: 8421376,
-  Green: 32768,
-  Teal: 32896,
-  Lime: 65280,
-  Purple: 8388736,
-  Navy: 128,
-  Blue: 255,
-  Aqua: 65535,
-};
-
-const OUTLINE_THICKNESS = {
-  None: 0,
-  Thin: 2,
-  Normal: 4,
-  Thick: 6,
-};
 
 export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
   const isTv = Platform.isTV;

components/settings/VLCSubtitleSettings.tsx

@@ -3,34 +3,9 @@ import { useEffect, useState } from "react";
 import { View } from "react-native";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
+import { OUTLINE_THICKNESS, VLC_COLORS } from "@/constants/SubtitleConstants";
 import { storage } from "@/utils/mmkv";
 
-const VLC_COLORS = {
-  Black: 0,
-  Gray: 8421504,
-  Silver: 12632256,
-  White: 16777215,
-  Maroon: 8388608,
-  Red: 16711680,
-  Fuchsia: 16711935,
-  Yellow: 16776960,
-  Olive: 8421376,
-  Green: 32768,
-  Teal: 32896,
-  Lime: 65280,
-  Purple: 8388736,
-  Navy: 128,
-  Blue: 255,
-  Aqua: 65535,
-};
-
-const OUTLINE_THICKNESS = {
-  None: 0,
-  Thin: 2,
-  Normal: 4,
-  Thick: 6,
-};
-
 export function VLCSubtitleSettings({
   className = "",
 }: {

constants/SubtitleConstants.ts

@@ -0,0 +1,45 @@
+export type VLCColor =
+  | "Black"
+  | "Gray"
+  | "Silver"
+  | "White"
+  | "Maroon"
+  | "Red"
+  | "Fuchsia"
+  | "Yellow"
+  | "Olive"
+  | "Green"
+  | "Teal"
+  | "Lime"
+  | "Purple"
+  | "Navy"
+  | "Blue"
+  | "Aqua";
+
+export type OutlineThickness = "None" | "Thin" | "Normal" | "Thick";
+
+export const VLC_COLORS: Record<VLCColor, number> = {
+  Black: 0,
+  Gray: 8421504,
+  Silver: 12632256,
+  White: 16777215,
+  Maroon: 8388608,
+  Red: 16711680,
+  Fuchsia: 16711935,
+  Yellow: 16776960,
+  Olive: 8421376,
+  Green: 32768,
+  Teal: 32896,
+  Lime: 65280,
+  Purple: 8388736,
+  Navy: 128,
+  Blue: 255,
+  Aqua: 65535,
+};
+
+export const OUTLINE_THICKNESS: Record<OutlineThickness, number> = {
+  None: 0,
+  Thin: 2,
+  Normal: 4,
+  Thick: 6,
+};