mega-stream-proxy 0.1.9 → 0.2.0

package/src/{Player/playerweb → player}/PlayerControls.tsx

@@ -8,9 +8,8 @@ import {
   View,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import { SubtitleDisplayWeb } from "./SubtitleDisplay.js";
 
-export type PlayerControlsWebProps = {
+export type PlayerControlsProps = {
   playing: boolean;
   buffering: boolean;
   currentTime: number;
@@ -40,18 +39,6 @@ export type PlayerControlsWebProps = {
   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;
@@ -74,7 +61,7 @@ const fmt = (s: number) => {
 
 const clamp01 = (v: number) => Math.min(1, Math.max(0, v));
 
-export function PlayerControlsWeb(props: PlayerControlsWebProps) {
+export function PlayerControls(props: PlayerControlsProps) {
   const {
     playing,
     buffering,
@@ -95,9 +82,6 @@ export function PlayerControlsWeb(props: PlayerControlsWebProps) {
     outroRegion,
     onSkipIntro,
     onSkipOutro,
-    resolutions,
-    resolution,
-    onSelectResolution,
     onToggleVisible,
     onPlayPause,
     onSkip,
@@ -106,21 +90,19 @@ export function PlayerControlsWeb(props: PlayerControlsWebProps) {
     onToggleSubtitles,
     onVolume,
     onFullscreen,
-    width,
-    height,
-    cue,
-    enabled,
-    fontSize,
   } = props;
 
   const hasSubs = (subtitleTracks?.length ?? 0) > 0;
-  const activeRes = resolution ?? resolutions?.[0] ?? "";
+  const subLang = (subtitleTrack ?? subtitleTracks?.[0] ?? "CC")
+    .split("-")[0]
+    .slice(0, 5)
+    .toUpperCase();
 
   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 [subOpen, setSubOpen] = useState(false);
+  const [subTab, setSubTab] = useState<"lang" | "size">("lang");
 
   const pct = duration > 0 ? clamp01(currentTime / duration) : 0;
   const volPct = clamp01(volume);
@@ -143,13 +125,9 @@ export function PlayerControlsWeb(props: PlayerControlsWebProps) {
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: () => true,
         onPanResponderGrant: (e) =>
-          setScrubPct(
-            trackW > 0 ? clamp01(e.nativeEvent.locationX / trackW) : 0,
-          ),
+          setScrubPct(trackW > 0 ? clamp01(e.nativeEvent.locationX / trackW) : 0),
         onPanResponderMove: (e) =>
-          setScrubPct(
-            trackW > 0 ? clamp01(e.nativeEvent.locationX / trackW) : 0,
-          ),
+          setScrubPct(trackW > 0 ? clamp01(e.nativeEvent.locationX / trackW) : 0),
         onPanResponderRelease: (e) => {
           const p = trackW > 0 ? clamp01(e.nativeEvent.locationX / trackW) : 0;
           setScrubPct(null);
@@ -174,6 +152,7 @@ export function PlayerControlsWeb(props: PlayerControlsWebProps) {
 
   const SIZE_MIN = 10;
   const SIZE_MAX = 34;
+  const [sizeW, setSizeW] = useState(0);
   const currentSize = subtitleFontSize ?? 14;
   const sizePct = clamp01((currentSize - SIZE_MIN) / (SIZE_MAX - SIZE_MIN));
   const sizePan = useMemo(
@@ -184,39 +163,22 @@ export function PlayerControlsWeb(props: PlayerControlsWebProps) {
         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)),
-          );
+          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)),
-          );
+          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;
+  const volIcon = muted || volume === 0 ? "volume-mute" : volume < 0.5 ? "volume-low" : "volume-high";
 
   return (
-    <View
-      style={[
-        styles.root,
-        StyleSheet.absoluteFill,
-        { width: width, height: height },
-      ]}
-    >
+    <View style={styles.root}>
       {/* tap surface toggles the chrome */}
       <TouchableOpacity
         style={StyleSheet.absoluteFill}
@@ -225,22 +187,13 @@ export function PlayerControlsWeb(props: PlayerControlsWebProps) {
       />
 
       {buffering && (
-        <View
-          style={[StyleSheet.absoluteFill, styles.centerBadge]}
-          pointerEvents="none"
-        >
+        <View style={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 && (
@@ -248,24 +201,19 @@ export function PlayerControlsWeb(props: PlayerControlsWebProps) {
                 {title}
               </Text>
             )}
+            <TouchableOpacity onPress={onToggleMute} hitSlop={8}>
+              <Ionicons name={muted ? "volume-mute" : "volume-high"} size={20} color="#fff" />
+            </TouchableOpacity>
           </View>
 
           {/* center buttons */}
-          <View
-            style={[styles.centerRow, { flex: 1 }]}
-            pointerEvents="box-none"
-          >
-            <TouchableOpacity
-              style={styles.skipBtn}
-              onPress={() => onSkip(-10)}
-            >
+          <View style={styles.centerRow} 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"
-                }
+                name={buffering ? "ellipsis-horizontal" : playing ? "pause" : "play"}
                 size={38}
                 color="#fff"
               />
@@ -275,7 +223,7 @@ export function PlayerControlsWeb(props: PlayerControlsWebProps) {
             </TouchableOpacity>
           </View>
 
-          {/* bottom bar: time — timeline — duration — settings — fullscreen */}
+          {/* bottom bar */}
           <View style={[styles.bar, styles.bottom]} pointerEvents="box-none">
             <Text style={styles.time}>
               {fmt(scrubPct !== null ? scrubPct * duration : currentTime)}
@@ -295,32 +243,28 @@ export function PlayerControlsWeb(props: PlayerControlsWebProps) {
                     ]}
                   />
                 )}
-                {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}%`,
-                        },
-                      ]}
-                    />
-                  )}
+                {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
@@ -334,96 +278,87 @@ export function PlayerControlsWeb(props: PlayerControlsWebProps) {
 
             <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>
+            {/* CC toggle */}
+            <TouchableOpacity
+              style={[styles.ccBtn, subtitlesOn && styles.ccBtnOn]}
+              onPress={onToggleSubtitles}
+              hitSlop={6}
+            >
+              <Text style={[styles.ccText, subtitlesOn && styles.ccTextOn]}>CC</Text>
+            </TouchableOpacity>
 
-                      {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>
-                      )}
+            {/* subtitle selector (shown with at least ONE track so the Text Size
+                slider is reachable). Tap to open a dropdown with two tabs:
+                language list | text size slider. */}
+            {hasSubs ? (
+              <View style={styles.subWrap}>
+                <TouchableOpacity
+                  style={[styles.langBtn, subtitlesOn && styles.langBtnOn]}
+                  onPress={() => setSubOpen((v) => !v)}
+                  hitSlop={6}
+                >
+                  <Text style={[styles.ccText, subtitlesOn && styles.ccTextOn]}>
+                    {subLang}
+                  </Text>
+                  <Ionicons
+                    name={subOpen ? "chevron-up" : "chevron-down"}
+                    size={12}
+                    color={subtitlesOn ? "#fff" : "#9aa0aa"}
+                  />
+                </TouchableOpacity>
+                {subOpen ? (
+                  <View style={styles.subMenu}>
+                    <View style={styles.subTabs}>
+                      <TouchableOpacity
+                        style={[styles.subTab, subTab === "lang" && styles.subTabOn]}
+                        onPress={() => setSubTab("lang")}
+                      >
+                        <Text
+                          style={[styles.subTabText, subTab === "lang" && styles.subTabTextOn]}
+                        >
+                          Language
+                        </Text>
+                      </TouchableOpacity>
+                      <TouchableOpacity
+                        style={[styles.subTab, subTab === "size" && styles.subTabOn]}
+                        onPress={() => setSubTab("size")}
+                      >
+                        <Text
+                          style={[styles.subTabText, subTab === "size" && styles.subTabTextOn]}
+                        >
+                          Text Size
+                        </Text>
+                      </TouchableOpacity>
+                    </View>
 
-                      {!!onChangeSubtitleFontSize && (
-                        <View style={styles.sliderRow}>
+                    {subTab === "lang" ? (
+                      <View style={styles.subBody}>
+                        {subtitleTracks?.map((lang) => {
+                          const active = lang === subtitleTrack;
+                          return (
+                            <TouchableOpacity
+                              key={lang}
+                              style={[styles.subItem, active && styles.subItemOn]}
+                              onPress={() => {
+                                setSubOpen(false);
+                                onSelectSubtitleTrack?.(lang);
+                              }}
+                            >
+                              <Text style={[styles.subItemText, active && styles.subItemTextOn]}>
+                                {lang}
+                              </Text>
+                              {active ? (
+                                <Ionicons name="checkmark" size={14} color="#fff" />
+                              ) : null}
+                            </TouchableOpacity>
+                          );
+                        })}
+                      </View>
+                    ) : (
+                      <View style={styles.subBody}>
+                        <View style={styles.sizeRow}>
                           <TouchableOpacity
-                            style={styles.minusBtn}
+                            style={styles.sizeBtn}
                             onPress={() =>
                               onChangeSubtitleFontSize?.(
                                 Math.max(
@@ -437,22 +372,18 @@ export function PlayerControlsWeb(props: PlayerControlsWebProps) {
                           </TouchableOpacity>
 
                           <View
-                            style={styles.sliderTrack}
-                            onLayout={(e) =>
-                              setSizeW(e.nativeEvent.layout.width)
-                            }
+                            style={[
+                              styles.sizeTrack,
+                              { opacity: onChangeSubtitleFontSize ? 1 : 0.5 },
+                            ]}
+                            onLayout={(e) => setSizeW(e.nativeEvent.layout.width)}
                             {...sizePan.panHandlers}
                           >
-                            <View
-                              style={[
-                                styles.sliderFill,
-                                { width: `${sizePct * 100}%` },
-                              ]}
-                            />
+                            <View style={[styles.sizeFill, { width: `${sizePct * 100}%` }]} />
                           </View>
 
                           <TouchableOpacity
-                            style={styles.minusBtn}
+                            style={styles.sizeBtn}
                             onPress={() =>
                               onChangeSubtitleFontSize?.(
                                 Math.min(
@@ -464,116 +395,36 @@ export function PlayerControlsWeb(props: PlayerControlsWebProps) {
                           >
                             <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}%` },
-                          ]}
-                        />
+                        <Text style={styles.sizeLabel}>{currentSize}px</Text>
                       </View>
-                    </View>
+                    )}
                   </View>
+                ) : null}
+              </View>
+            ) : null}
 
-                  {/* ---- 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}
+            {/* volume: icon tap = mute, slider drag = level */}
+            <TouchableOpacity onPress={onToggleMute} hitSlop={6}>
+              <Ionicons name={volIcon as any} size={17} color="#fff" />
+            </TouchableOpacity>
+            <View
+              style={styles.volTrackWrap}
+              onLayout={(e) => setVolW(e.nativeEvent.layout.width)}
+              {...volPan.panHandlers}
+            >
+              <View style={styles.volTrack}>
+                <View style={[styles.volFill, { width: `${volPct * 100}%` }]} />
+              </View>
             </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>
@@ -589,9 +440,10 @@ export function PlayerControlsWeb(props: PlayerControlsWebProps) {
 }
 
 const styles = StyleSheet.create({
-  root: { zIndex: 2 },
+  root: { ...StyleSheet.absoluteFillObject, zIndex: 2 },
 
   centerBadge: {
+    ...StyleSheet.absoluteFillObject,
     justifyContent: "center",
     alignItems: "center",
     width: "100%",
@@ -614,6 +466,7 @@ const styles = StyleSheet.create({
   title: { color: "#fff", fontWeight: "700", fontSize: 13, flex: 1 },
 
   centerRow: {
+    ...StyleSheet.absoluteFillObject,
     justifyContent: "center",
     alignItems: "center",
     flexDirection: "row",
@@ -688,80 +541,71 @@ const styles = StyleSheet.create({
   },
   thumbIdle: { opacity: 0.85 },
 
-  iconBtn: {
-    width: 26,
-    height: 26,
+  ccBtn: {
+    borderWidth: 1.5,
+    borderColor: "#666",
     borderRadius: 4,
-    alignItems: "center",
-    justifyContent: "center",
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+  },
+  ccBtnOn: { borderColor: "#e50914", backgroundColor: "rgba(229,9,20,0.25)" },
+  ccText: { color: "#888", fontSize: 10, fontWeight: "900" },
+  ccTextOn: { color: "#fff" },
+  langBtn: {
+    borderWidth: 1.5,
+    borderColor: "#555",
+    borderRadius: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 1,
+  },
+  langBtnOn: {
+    borderColor: "#7dd3fc",
+    backgroundColor: "rgba(125,211,252,0.18)",
   },
-  iconBtnOn: { backgroundColor: "rgba(125,211,252,0.18)" },
 
-  settingsWrap: { position: "relative", zIndex: 20 },
-  settingsMenu: {
+  subWrap: { position: "relative", zIndex: 20 },
+  subMenu: {
     position: "absolute",
-    bottom: 30,
+    bottom: 26,
     right: 0,
     zIndex: 30,
-    width: 250,
-    maxHeight: 420,
+    width: 190,
     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: {
+  subTabs: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "#262a34" },
+  subTab: { flex: 1, alignItems: "center", paddingVertical: 7, backgroundColor: "#1a1d24" },
+  subTabOn: { backgroundColor: "#232833" },
+  subTabText: { color: "#9aa0aa", fontSize: 12, fontWeight: "700" },
+  subTabTextOn: { color: "#7dd3fc", fontWeight: "800" },
+  subBody: { paddingVertical: 4 },
+  subItem: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
     gap: 10,
-    paddingHorizontal: 14,
-    paddingVertical: 6,
-    borderRadius: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 7,
   },
-  menuItemOn: { backgroundColor: "rgba(125,211,252,0.15)" },
-  menuItemText: { color: "#cbd5e1", fontSize: 13, fontWeight: "600" },
-  menuItemTextOn: { color: "#7dd3fc", fontWeight: "800" },
-
-  sliderRow: {
+  subItemOn: { backgroundColor: "rgba(125,211,252,0.15)" },
+  subItemText: { color: "#cbd5e1", fontSize: 13, fontWeight: "600" },
+  subItemTextOn: { color: "#7dd3fc", fontWeight: "800" },
+  sizeRow: {
     flexDirection: "row",
     alignItems: "center",
     gap: 10,
     paddingHorizontal: 10,
-    paddingVertical: 8,
+    paddingVertical: 10,
   },
-  minusBtn: {
+  sizeBtn: {
     width: 24,
     height: 24,
     borderRadius: 4,
@@ -769,30 +613,17 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     backgroundColor: "#2a2f3a",
   },
-  sliderTrack: { flex: 1, height: 22, justifyContent: "center" },
-  sliderFill: { height: 4, borderRadius: 2, backgroundColor: "#7dd3fc" },
-  sliderValue: {
+  sizeTrack: { flex: 1, height: 22, justifyContent: "center" },
+  sizeFill: { height: 4, borderRadius: 2, backgroundColor: "#7dd3fc" },
+  sizeLabel: {
     color: "#9aa0aa",
     fontSize: 11,
     fontWeight: "700",
-    minWidth: 32,
-    textAlign: "right",
+    textAlign: "center",
+    paddingBottom: 6,
   },
 
-  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" },
-});
+  volTrackWrap: { width: 56, paddingVertical: 12, justifyContent: "center" },
+  volTrack: { height: 4, borderRadius: 2, backgroundColor: "#3a3f47", overflow: "hidden" },
+  volFill: { height: 4, backgroundColor: "#fff" },
+});