mega-stream-proxy 0.1.9 → 0.2.0

package/src/Player/playerAndroid/PlayerControlsAndroid.tsx

@@ -1,824 +0,0 @@
-import { useMemo, useState } from "react";
-import {
-  ActivityIndicator,
-  PanResponder,
-  Pressable,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-
-export type PlayerControlsAndroidProps = {
-  playing: boolean;
-  buffering: boolean;
-  currentTime: number;
-  duration: number;
-  muted: boolean;
-  title?: string;
-  visible: boolean;
-  subtitlesOn: boolean;
-  volume: number;
-  /** subtitle language labels (when >1 the CC switcher is shown) */
-  subtitleTracks?: string[];
-  /** currently active subtitle language */
-  subtitleTrack?: string;
-  /** select a subtitle language from the list directly */
-  onSelectSubtitleTrack?: (lang: string) => void;
-  /** current subtitle font size (px) */
-  subtitleFontSize?: number;
-  /** adjust the subtitle font size (px) */
-  onChangeSubtitleFontSize?: (px: number) => void;
-  /** 0..1 — how much of the whole merged episode has been downloaded. Renders
-   *  a second, thinner line under the playhead track. */
-  loadProgress?: number;
-  /** resolution labels in display order — the FIRST is the default source
-   *  (usually "HD: <url>"), e.g. ["Default", "1080p", "720p"]. Shown in the
-   *  settings popup. */
-  resolutions?: string[];
-  /** currently active resolution label */
-  resolution?: string;
-  /** user picked a resolution label — resolve it to a URL and update `uri`. */
-  onSelectResolution?: (label: string) => void;
-  /** [start, end] seconds (merged timeline) of the intro — highlighted on the
-   *  track + shows a "Skip Intro" button while the playhead is inside it. */
-  introRegion?: [number, number];
-  /** [start, end] seconds (merged timeline) of the outro */
-  outroRegion?: [number, number];
-  onSkipIntro?: () => void;
-  onSkipOutro?: () => void;
-  onToggleVisible: () => void;
-  onPlayPause: () => void;
-  onSkip: (deltaSeconds: number) => void;
-  onSeek: (seconds: number) => void;
-  onToggleMute: () => void;
-  onToggleSubtitles: () => void;
-  onVolume: (v: number) => void;
-  onFullscreen: () => void;
-  /** current fullscreen state — switches the expand/contract icon */
-  fullscreen?: boolean;
-  /** any user interaction with the bar/menus — reset the auto-hide timer */
-  onInteract?: () => void;
-  width?: number;
-  height?: number;
-};
-
-const fmt = (s: number) => {
-  if (!Number.isFinite(s) || s < 0) s = 0;
-  const h = Math.floor(s / 3600);
-  const m = Math.floor((s % 3600) / 60);
-  const sec = Math.floor(s % 60);
-  return `${h.toString().padStart(2, "0")}:${m
-    .toString()
-    .padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
-};
-
-const clamp01 = (v: number) => Math.min(1, Math.max(0, v));
-
-const SIZE_MIN = 10;
-const SIZE_MAX = 34;
-
-export function PlayerControlsAndroid(props: PlayerControlsAndroidProps) {
-  const {
-    playing,
-    buffering,
-    currentTime,
-    duration,
-    muted,
-    title,
-    visible,
-    subtitlesOn,
-    volume,
-    subtitleTracks,
-    subtitleTrack,
-    onSelectSubtitleTrack,
-    subtitleFontSize,
-    onChangeSubtitleFontSize,
-    loadProgress,
-    resolutions,
-    resolution,
-    onSelectResolution,
-    introRegion,
-    outroRegion,
-    onSkipIntro,
-    onSkipOutro,
-    onToggleVisible,
-    onPlayPause,
-    onSkip,
-    onSeek,
-    onToggleMute,
-    onToggleSubtitles,
-    onVolume,
-    onFullscreen,
-    fullscreen = false,
-    onInteract,
-    width,
-    height,
-  } = props;
-
-  const hasSubs = (subtitleTracks?.length ?? 0) > 0;
-  const showSubsSection = hasSubs || !!onChangeSubtitleFontSize;
-  // empty resolution = the implicit default (first row, usually "HD: <url>")
-  const activeRes = (resolution && resolution.trim()) || resolutions?.[0] || "";
-
-  const [trackW, setTrackW] = useState(0);
-  const [scrubPct, setScrubPct] = useState<number | null>(null);
-  const [volW, setVolW] = useState(0);
-  const [sizeW, setSizeW] = useState(0);
-  const [settingsOpen, setSettingsOpen] = useState(false);
-
-  const pct = duration > 0 ? clamp01(currentTime / duration) : 0;
-  const volPct = clamp01(volume);
-  const inIntro =
-    !!introRegion &&
-    introRegion[1] > introRegion[0] &&
-    currentTime >= introRegion[0] &&
-    currentTime <= introRegion[1] &&
-    !!onSkipIntro;
-  const inOutro =
-    !!outroRegion &&
-    outroRegion[1] > outroRegion[0] &&
-    currentTime >= outroRegion[0] &&
-    currentTime <= outroRegion[1] &&
-    !!onSkipOutro;
-  const currentSize = subtitleFontSize ?? 14;
-  const sizePct = clamp01((currentSize - SIZE_MIN) / (SIZE_MAX - SIZE_MIN));
-  const shownPct = scrubPct ?? pct;
-  const volIcon = (
-    muted || volume === 0
-      ? "volume-mute"
-      : volume < 0.5
-        ? "volume-low"
-        : "volume-high"
-  ) as "volume-mute" | "volume-low" | "volume-high";
-
-  const pan = useMemo(
-    () =>
-      PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
-        onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: (e) => {
-          onInteract?.();
-          setScrubPct(
-            trackW > 0 ? clamp01(e.nativeEvent.locationX / trackW) : 0,
-          );
-        },
-        onPanResponderMove: (e) =>
-          setScrubPct(
-            trackW > 0 ? clamp01(e.nativeEvent.locationX / trackW) : 0,
-          ),
-        onPanResponderRelease: (e) => {
-          const p = trackW > 0 ? clamp01(e.nativeEvent.locationX / trackW) : 0;
-          setScrubPct(null);
-          onInteract?.();
-          onSeek(p * duration);
-        },
-      }),
-    [trackW, duration, onSeek, onInteract],
-  );
-
-  const volPan = useMemo(
-    () =>
-      PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
-        onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: (e) => {
-          onInteract?.();
-          onVolume(volW > 0 ? clamp01(e.nativeEvent.locationX / volW) : 1);
-        },
-        onPanResponderMove: (e) =>
-          onVolume(volW > 0 ? clamp01(e.nativeEvent.locationX / volW) : 1),
-      }),
-    [volW, onVolume, onInteract],
-  );
-
-  const sizePan = useMemo(
-    () =>
-      PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
-        onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: (e) => {
-          if (!onChangeSubtitleFontSize) return;
-          const p = sizeW > 0 ? clamp01(e.nativeEvent.locationX / sizeW) : 0;
-          onChangeSubtitleFontSize(
-            Math.round(SIZE_MIN + p * (SIZE_MAX - SIZE_MIN)),
-          );
-        },
-        onPanResponderMove: (e) => {
-          if (!onChangeSubtitleFontSize) return;
-          const p = sizeW > 0 ? clamp01(e.nativeEvent.locationX / sizeW) : 0;
-          onChangeSubtitleFontSize(
-            Math.round(SIZE_MIN + p * (SIZE_MAX - SIZE_MIN)),
-          );
-        },
-      }),
-    [sizeW, onChangeSubtitleFontSize],
-  );
-
-  const interact = () => onInteract?.();
-
-  return (
-    <View
-      style={[
-        styles.root,
-        StyleSheet.absoluteFill,
-        { width: width ? width : "100%", height: height ? height : "100%" },
-      ]}
-    >
-      {/* tap surface toggles the chrome */}
-      <TouchableOpacity
-        style={StyleSheet.absoluteFill}
-        activeOpacity={1}
-        onPress={onToggleVisible}
-      />
-
-      {buffering && (
-        <View style={styles.centerBadge} pointerEvents="none">
-          <ActivityIndicator color="#e50914" size="large" />
-        </View>
-      )}
-
-      {settingsOpen && (
-        <Pressable
-          style={StyleSheet.absoluteFill}
-          onPress={() => setSettingsOpen(false)}
-        />
-      )}
-
-      {visible && (
-        <>
-          {/* top gradient-ish bar */}
-          <View style={[styles.bar, styles.top]} pointerEvents="box-none">
-            {!!title && (
-              <Text numberOfLines={1} style={styles.title}>
-                {title}
-              </Text>
-            )}
-          </View>
-
-          {/* center buttons */}
-          <View
-            style={[
-              styles.centerRow,
-              StyleSheet.absoluteFill,
-              { width: width },
-            ]}
-            pointerEvents="box-none"
-          >
-            <TouchableOpacity
-              style={styles.skipBtn}
-              onPress={() => onSkip(-10)}
-            >
-              <Ionicons name="play-back" size={30} color="#fff" />
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.ppBtn} onPress={onPlayPause}>
-              <Ionicons
-                name={
-                  buffering ? "ellipsis-horizontal" : playing ? "pause" : "play"
-                }
-                size={38}
-                color="#fff"
-              />
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.skipBtn} onPress={() => onSkip(10)}>
-              <Ionicons name="play-forward" size={30} color="#fff" />
-            </TouchableOpacity>
-          </View>
-
-          {/* bottom bar */}
-          <View style={[styles.bar, styles.bottom]} pointerEvents="box-none">
-            <Text style={styles.time}>
-              {fmt(scrubPct !== null ? scrubPct * duration : currentTime)}
-            </Text>
-
-            <View
-              style={styles.trackWrap}
-              onLayout={(e) => setTrackW(e.nativeEvent.layout.width)}
-              {...pan.panHandlers}
-            >
-              <View style={styles.track}>
-                {loadProgress != null && loadProgress > 0 && (
-                  <View
-                    style={[
-                      styles.loadLine,
-                      { width: `${clamp01(loadProgress) * 100}%` },
-                    ]}
-                  />
-                )}
-                {introRegion &&
-                  duration > 0 &&
-                  introRegion[1] > introRegion[0] && (
-                    <View
-                      style={[
-                        styles.introHighlight,
-                        {
-                          left: `${clamp01(introRegion[0] / duration) * 100}%`,
-                          width: `${clamp01((introRegion[1] - introRegion[0]) / duration) * 100}%`,
-                        },
-                      ]}
-                    />
-                  )}
-                {outroRegion &&
-                  duration > 0 &&
-                  outroRegion[1] > outroRegion[0] && (
-                    <View
-                      style={[
-                        styles.outroHighlight,
-                        {
-                          left: `${clamp01(outroRegion[0] / duration) * 100}%`,
-                          width: `${clamp01((outroRegion[1] - outroRegion[0]) / duration) * 100}%`,
-                        },
-                      ]}
-                    />
-                  )}
-                <View style={[styles.fill, { width: `${shownPct * 100}%` }]} />
-              </View>
-              <View
-                style={[
-                  styles.thumb,
-                  { left: `${shownPct * 100}%` },
-                  scrubPct === null && styles.thumbIdle,
-                ]}
-              />
-            </View>
-
-            <Text style={styles.time}>{fmt(duration)}</Text>
-
-            {/* settings popup: subtitles + volume + resolution */}
-            <View style={styles.settingsWrap}>
-              <TouchableOpacity
-                style={[styles.iconBtn, settingsOpen && styles.iconBtnOn]}
-                onPress={() => {
-                  setSettingsOpen((v) => !v);
-                  interact();
-                }}
-                hitSlop={6}
-              >
-                <Ionicons
-                  name="settings-outline"
-                  size={17}
-                  color={settingsOpen ? "#7dd3fc" : "#fff"}
-                />
-              </TouchableOpacity>
-
-              {settingsOpen && (
-                <View style={styles.settingsMenu}>
-                  <Text style={styles.settingsTitle}>Settings</Text>
-
-                  {/* ---- Subtitles ---- */}
-                  {showSubsSection && (
-                    <View style={styles.section}>
-                      <View style={styles.sectionHead}>
-                        <Ionicons
-                          name="chatbox-ellipses-outline"
-                          size={15}
-                          color="#9aa0aa"
-                        />
-                        <Text style={styles.sectionLabel}>Subtitles</Text>
-                        <TouchableOpacity
-                          onPress={() => {
-                            onToggleSubtitles();
-                            interact();
-                          }}
-                          hitSlop={6}
-                          style={{ marginLeft: "auto" }}
-                        >
-                          <View
-                            style={[
-                              styles.switchTrack,
-                              subtitlesOn && styles.switchTrackOn,
-                            ]}
-                          >
-                            <View
-                              style={[
-                                styles.switchThumb,
-                                subtitlesOn && styles.switchThumbOn,
-                              ]}
-                            />
-                          </View>
-                        </TouchableOpacity>
-                      </View>
-
-                      {hasSubs && (
-                        <View style={styles.menuList}>
-                          {subtitleTracks?.map((lang) => {
-                            const active = lang === subtitleTrack;
-                            return (
-                              <TouchableOpacity
-                                key={lang}
-                                style={[
-                                  styles.menuItem,
-                                  active && styles.menuItemOn,
-                                ]}
-                                onPress={() => {
-                                  setSettingsOpen(false);
-                                  interact();
-                                  onSelectSubtitleTrack?.(lang);
-                                }}
-                              >
-                                <Text
-                                  numberOfLines={1}
-                                  style={[
-                                    styles.menuItemText,
-                                    active && styles.menuItemTextOn,
-                                  ]}
-                                >
-                                  {lang}
-                                </Text>
-                                {active ? (
-                                  <Ionicons
-                                    name="checkmark"
-                                    size={14}
-                                    color="#fff"
-                                  />
-                                ) : null}
-                              </TouchableOpacity>
-                            );
-                          })}
-                        </View>
-                      )}
-
-                      {!!onChangeSubtitleFontSize && (
-                        <View style={styles.sliderRow}>
-                          <TouchableOpacity
-                            style={styles.minusBtn}
-                            onPress={() =>
-                              onChangeSubtitleFontSize(
-                                Math.max(SIZE_MIN, Math.round(currentSize - 2)),
-                              )
-                            }
-                          >
-                            <Ionicons name="remove" size={16} color="#fff" />
-                          </TouchableOpacity>
-
-                          <View
-                            style={styles.sliderTrack}
-                            onLayout={(e) =>
-                              setSizeW(e.nativeEvent.layout.width)
-                            }
-                            {...sizePan.panHandlers}
-                          >
-                            <View
-                              style={[
-                                styles.sliderFill,
-                                { width: `${sizePct * 100}%` },
-                              ]}
-                            />
-                          </View>
-
-                          <TouchableOpacity
-                            style={styles.minusBtn}
-                            onPress={() =>
-                              onChangeSubtitleFontSize(
-                                Math.min(SIZE_MAX, Math.round(currentSize + 2)),
-                              )
-                            }
-                          >
-                            <Ionicons name="add" size={16} color="#fff" />
-                          </TouchableOpacity>
-                          <Text style={styles.sliderValue}>
-                            {currentSize}px
-                          </Text>
-                        </View>
-                      )}
-                    </View>
-                  )}
-
-                  {/* ---- Volume ---- */}
-                  <View style={styles.section}>
-                    <View style={styles.sectionHead}>
-                      <Ionicons
-                        name="volume-medium-outline"
-                        size={15}
-                        color="#9aa0aa"
-                      />
-                      <Text style={styles.sectionLabel}>Volume</Text>
-                      <TouchableOpacity
-                        onPress={() => {
-                          onToggleMute();
-                          interact();
-                        }}
-                        hitSlop={6}
-                        style={{ marginLeft: "auto" }}
-                      >
-                        <Ionicons
-                          name={volIcon}
-                          size={17}
-                          color={muted ? "#e50914" : "#fff"}
-                        />
-                      </TouchableOpacity>
-                      <Text style={styles.sliderValue}>
-                        {Math.round(volPct * 100)}
-                      </Text>
-                    </View>
-                    <View style={styles.sliderRow}>
-                      <View
-                        style={styles.sliderTrack}
-                        onLayout={(e) => setVolW(e.nativeEvent.layout.width)}
-                        {...volPan.panHandlers}
-                      >
-                        <View
-                          style={[
-                            styles.sliderFill,
-                            { width: `${volPct * 100}%` },
-                          ]}
-                        />
-                      </View>
-                    </View>
-                  </View>
-
-                  {/* ---- Resolution ---- */}
-                  {(resolutions?.length ?? 0) > 0 && (
-                    <View style={styles.section}>
-                      <View style={styles.sectionHead}>
-                        <Ionicons
-                          name="resize-outline"
-                          size={15}
-                          color="#9aa0aa"
-                        />
-                        <Text style={styles.sectionLabel}>Resolution</Text>
-                      </View>
-                      <View style={styles.menuList}>
-                        {resolutions?.map((label) => {
-                          const active = label === activeRes;
-                          return (
-                            <TouchableOpacity
-                              key={label}
-                              style={[
-                                styles.menuItem,
-                                active && styles.menuItemOn,
-                              ]}
-                              onPress={() => {
-                                setSettingsOpen(false);
-                                interact();
-                                onSelectResolution?.(label);
-                              }}
-                            >
-                              <Text
-                                numberOfLines={1}
-                                style={[
-                                  styles.menuItemText,
-                                  active && styles.menuItemTextOn,
-                                ]}
-                              >
-                                {label}
-                              </Text>
-                              {active ? (
-                                <Ionicons
-                                  name="checkmark"
-                                  size={14}
-                                  color="#fff"
-                                />
-                              ) : null}
-                            </TouchableOpacity>
-                          );
-                        })}
-                      </View>
-                    </View>
-                  )}
-                </View>
-              )}
-            </View>
-
-            {/* fullscreen toggle */}
-            <TouchableOpacity
-              onPress={() => {
-                onFullscreen();
-                interact();
-              }}
-              hitSlop={8}
-            >
-              <Ionicons
-                name={fullscreen ? "contract" : "expand"}
-                size={18}
-                color="#fff"
-              />
-            </TouchableOpacity>
-          </View>
-        </>
-      )}
-
-      {visible && inIntro && (
-        <TouchableOpacity style={styles.skipRegionBtn} onPress={onSkipIntro}>
-          <Text style={styles.skipRegionText}>Skip Intro ›</Text>
-        </TouchableOpacity>
-      )}
-      {visible && inOutro && (
-        <TouchableOpacity style={styles.skipRegionBtn} onPress={onSkipOutro}>
-          <Text style={styles.skipRegionText}>Skip Outro ›</Text>
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  root: { zIndex: 2 },
-
-  centerBadge: {
-    justifyContent: "center",
-    alignItems: "center",
-    width: "100%",
-    height: "100%",
-  },
-
-  bar: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 12,
-    backgroundColor: "rgba(0,0,0,0.45)",
-    gap: 8,
-    zIndex: 5,
-  },
-  top: { top: 0, height: 42 },
-  bottom: { bottom: 0, height: 44 },
-
-  title: { color: "#fff", fontWeight: "700", fontSize: 13, flex: 1 },
-
-  centerRow: {
-    justifyContent: "center",
-    alignItems: "center",
-    flexDirection: "row",
-    gap: 34,
-  },
-  ppBtn: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    backgroundColor: "rgba(229,9,20,0.92)",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  skipBtn: { opacity: 0.9 },
-
-  time: {
-    color: "#ddd",
-    fontSize: 11,
-    fontVariant: ["tabular-nums"],
-    minWidth: 58,
-  },
-  trackWrap: { flex: 1, paddingVertical: 12, justifyContent: "center" },
-  track: {
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: "#3a3f47",
-    overflow: "hidden",
-  },
-  fill: { height: 4, borderRadius: 2, backgroundColor: "#e50914" },
-  loadLine: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: "rgba(255,255,255,0.35)",
-  },
-  introHighlight: {
-    position: "absolute",
-    top: 0,
-    height: 4,
-    backgroundColor: "rgba(0,229,255,0.55)",
-  },
-  outroHighlight: {
-    position: "absolute",
-    top: 0,
-    height: 4,
-    backgroundColor: "rgba(255,0,200,0.55)",
-  },
-  skipRegionBtn: {
-    position: "absolute",
-    right: 16,
-    bottom: 60,
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: "rgba(0,0,0,0.6)",
-    borderWidth: 1,
-    borderColor: "rgba(255,255,255,0.25)",
-    borderRadius: 20,
-    paddingHorizontal: 14,
-    paddingVertical: 8,
-  },
-  skipRegionText: { color: "#fff", fontWeight: "700", fontSize: 13 },
-  thumb: {
-    position: "absolute",
-    top: 12 - 7 + 2,
-    marginLeft: -6,
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-    backgroundColor: "#e50914",
-  },
-  thumbIdle: { opacity: 0.85 },
-
-  iconBtn: {
-    width: 26,
-    height: 26,
-    borderRadius: 4,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  iconBtnOn: { backgroundColor: "rgba(125,211,252,0.18)" },
-
-  settingsWrap: { position: "relative", zIndex: 20 },
-  settingsMenu: {
-    position: "absolute",
-    bottom: 30,
-    right: 0,
-    zIndex: 30,
-    width: 250,
-    maxHeight: 420,
-    backgroundColor: "#14161c",
-    borderWidth: 1,
-    borderColor: "#2a2f3a",
-    borderRadius: 8,
-    overflow: "hidden",
-    paddingBottom: 6,
-    elevation: 12,
-    shadowColor: "#000",
-    shadowOpacity: 0.5,
-    shadowRadius: 10,
-    shadowOffset: { width: 0, height: 3 },
-  },
-  settingsTitle: {
-    color: "#9aa0aa",
-    fontSize: 11,
-    fontWeight: "800",
-    textTransform: "uppercase",
-    letterSpacing: 1,
-    paddingHorizontal: 12,
-    paddingTop: 10,
-    paddingBottom: 6,
-    borderBottomWidth: 1,
-    borderBottomColor: "#262a34",
-  },
-
-  section: { paddingHorizontal: 6, paddingTop: 8 },
-  sectionHead: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 6,
-    paddingBottom: 2,
-  },
-  sectionLabel: { color: "#cbd5e1", fontSize: 12, fontWeight: "700" },
-
-  menuList: { paddingVertical: 4 },
-  menuItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 10,
-    paddingHorizontal: 14,
-    paddingVertical: 6,
-    borderRadius: 6,
-  },
-  menuItemOn: { backgroundColor: "rgba(125,211,252,0.15)" },
-  menuItemText: { color: "#cbd5e1", fontSize: 13, fontWeight: "600" },
-  menuItemTextOn: { color: "#7dd3fc", fontWeight: "800" },
-
-  sliderRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-  },
-  minusBtn: {
-    width: 24,
-    height: 24,
-    borderRadius: 4,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "#2a2f3a",
-  },
-  sliderTrack: { flex: 1, height: 22, justifyContent: "center" },
-  sliderFill: { height: 4, borderRadius: 2, backgroundColor: "#7dd3fc" },
-  sliderValue: {
-    color: "#9aa0aa",
-    fontSize: 11,
-    fontWeight: "700",
-    minWidth: 32,
-    textAlign: "right",
-  },
-
-  switchTrack: {
-    width: 34,
-    height: 20,
-    borderRadius: 10,
-    backgroundColor: "#3a3f47",
-    justifyContent: "center",
-    paddingHorizontal: 2,
-  },
-  switchTrackOn: { backgroundColor: "rgba(229,9,20,0.85)" },
-  switchThumb: {
-    width: 16,
-    height: 16,
-    borderRadius: 8,
-    backgroundColor: "#fff",
-  },
-  switchThumbOn: { alignSelf: "flex-end" },
-});