mega-stream-proxy 0.1.9

package/src/Player/playerAndroid/PlayerControlsAndroid.tsx

@@ -0,0 +1,824 @@
+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" },
+});