mega-stream-proxy 0.1.9

package/src/Player/playerweb/PlayerControls.tsx

@@ -0,0 +1,798 @@
+import { useMemo, useState } from "react";
+import {
+  ActivityIndicator,
+  PanResponder,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { SubtitleDisplayWeb } from "./SubtitleDisplay.js";
+
+export type PlayerControlsWebProps = {
+  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;
+  /** [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;
+  /** resolution labels in display order — the FIRST is the default source
+   *  (the episode URL), e.g. ["Default", "1080p", "720p", "480p"]. */
+  resolutions?: string[];
+  /** currently active resolution label */
+  resolution?: string;
+  width?: number;
+  height?: number;
+  cue?: any;
+  enabled?: any;
+  fontSize?: any;
+  /** select a resolution — the parent resolves the label to its URL */
+  onSelectResolution?: (label: string) => void;
+  onToggleVisible: () => void;
+  onPlayPause: () => void;
+  onSkip: (deltaSeconds: number) => void;
+  onSeek: (seconds: number) => void;
+  onToggleMute: () => void;
+  onToggleSubtitles: () => void;
+  onVolume: (v: number) => void;
+  onFullscreen: () => void;
+};
+
+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));
+
+export function PlayerControlsWeb(props: PlayerControlsWebProps) {
+  const {
+    playing,
+    buffering,
+    currentTime,
+    duration,
+    muted,
+    title,
+    visible,
+    subtitlesOn,
+    volume,
+    subtitleTracks,
+    subtitleTrack,
+    onSelectSubtitleTrack,
+    subtitleFontSize,
+    onChangeSubtitleFontSize,
+    loadProgress,
+    introRegion,
+    outroRegion,
+    onSkipIntro,
+    onSkipOutro,
+    resolutions,
+    resolution,
+    onSelectResolution,
+    onToggleVisible,
+    onPlayPause,
+    onSkip,
+    onSeek,
+    onToggleMute,
+    onToggleSubtitles,
+    onVolume,
+    onFullscreen,
+    width,
+    height,
+    cue,
+    enabled,
+    fontSize,
+  } = props;
+
+  const hasSubs = (subtitleTracks?.length ?? 0) > 0;
+  const activeRes = resolution ?? 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 pan = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: (e) =>
+          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);
+          onSeek(p * duration);
+        },
+      }),
+    [trackW, duration, onSeek],
+  );
+
+  const volPan = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: (e) =>
+          onVolume(volW > 0 ? clamp01(e.nativeEvent.locationX / volW) : 1),
+        onPanResponderMove: (e) =>
+          onVolume(volW > 0 ? clamp01(e.nativeEvent.locationX / volW) : 1),
+      }),
+    [volW, onVolume],
+  );
+
+  const SIZE_MIN = 10;
+  const SIZE_MAX = 34;
+  const currentSize = subtitleFontSize ?? 14;
+  const sizePct = clamp01((currentSize - SIZE_MIN) / (SIZE_MAX - SIZE_MIN));
+  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 shownPct = scrubPct ?? pct;
+  const volIcon =
+    muted || volume === 0
+      ? "volume-mute"
+      : volume < 0.5
+        ? "volume-low"
+        : "volume-high";
+
+  const showSubsSection = hasSubs || !!onChangeSubtitleFontSize;
+
+  return (
+    <View
+      style={[
+        styles.root,
+        StyleSheet.absoluteFill,
+        { width: width, height: height },
+      ]}
+    >
+      {/* tap surface toggles the chrome */}
+      <TouchableOpacity
+        style={StyleSheet.absoluteFill}
+        activeOpacity={1}
+        onPress={onToggleVisible}
+      />
+
+      {buffering && (
+        <View
+          style={[StyleSheet.absoluteFill, styles.centerBadge]}
+          pointerEvents="none"
+        >
+          <ActivityIndicator color="#e50914" size="large" />
+        </View>
+      )}
+
+      {visible && (
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            { width: "100%", height: "100%", position: "absolute" },
+          ]}
+          pointerEvents="box-none"
+        >
+          {/* 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, { flex: 1 }]}
+            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: time — timeline — duration — settings — fullscreen */}
+          <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 dropdown: subtitles + volume + resolutions */}
+            <View style={styles.settingsWrap}>
+              <TouchableOpacity
+                style={[styles.iconBtn, settingsOpen && styles.iconBtnOn]}
+                onPress={() => setSettingsOpen((v) => !v)}
+                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}
+                          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);
+                                  onSelectSubtitleTrack?.(lang);
+                                }}
+                              >
+                                <Text
+                                  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((subtitleFontSize ?? 14) - 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((subtitleFontSize ?? 14) + 2),
+                                ),
+                              )
+                            }
+                          >
+                            <Ionicons name="add" size={16} color="#fff" />
+                          </TouchableOpacity>
+                          <Text style={styles.sliderValue}>
+                            {currentSize}px
+                          </Text>
+                        </View>
+                      )}
+                    </View>
+                  ) : null}
+
+                  {/* ---- 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}
+                        hitSlop={6}
+                        style={{ marginLeft: "auto" }}
+                      >
+                        <Ionicons
+                          name={volIcon as any}
+                          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);
+                                onSelectResolution?.(label);
+                              }}
+                            >
+                              <Text
+                                style={[
+                                  styles.menuItemText,
+                                  active && styles.menuItemTextOn,
+                                ]}
+                              >
+                                {label}
+                              </Text>
+                              {active ? (
+                                <Ionicons
+                                  name="checkmark"
+                                  size={14}
+                                  color="#fff"
+                                />
+                              ) : null}
+                            </TouchableOpacity>
+                          );
+                        })}
+                      </View>
+                    </View>
+                  ) : null}
+                </View>
+              ) : null}
+            </View>
+
+            <TouchableOpacity onPress={onFullscreen} hitSlop={8}>
+              <Ionicons name="expand" size={18} color="#fff" />
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+      <SubtitleDisplayWeb
+        cue={cue}
+        enabled={enabled}
+        fontSize={fontSize}
+      />
+      {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,
+  },
+  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" },
+});