mega-stream-proxy 0.1.9 → 0.2.0

package/src/playerweb/PlayerControlsWeb.tsx

@@ -0,0 +1,629 @@
+import { useMemo, useState } from "react";
+import {
+  ActivityIndicator,
+  PanResponder,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+
+export type PlayerControlsProps = {
+  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;
+  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 PlayerControls(props: PlayerControlsProps) {
+  const {
+    playing,
+    buffering,
+    currentTime,
+    duration,
+    muted,
+    title,
+    visible,
+    subtitlesOn,
+    volume,
+    subtitleTracks,
+    subtitleTrack,
+    onSelectSubtitleTrack,
+    subtitleFontSize,
+    onChangeSubtitleFontSize,
+    loadProgress,
+    introRegion,
+    outroRegion,
+    onSkipIntro,
+    onSkipOutro,
+    onToggleVisible,
+    onPlayPause,
+    onSkip,
+    onSeek,
+    onToggleMute,
+    onToggleSubtitles,
+    onVolume,
+    onFullscreen,
+  } = props;
+
+  const hasSubs = (subtitleTracks?.length ?? 0) > 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 [subOpen, setSubOpen] = useState(false);
+  const [subTab, setSubTab] = useState<"lang" | "size">("lang");
+
+  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 [sizeW, setSizeW] = useState(0);
+  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";
+
+  return (
+    <View style={styles.root}>
+      {/* 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>
+      )}
+
+      {visible && (
+        <>
+          {/* top gradient-ish bar */}
+          <View style={[styles.bar, styles.top]} pointerEvents="box-none">
+            {!!title && (
+              <Text numberOfLines={1} style={styles.title}>
+                {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} 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>
+
+            {/* CC toggle */}
+            <TouchableOpacity
+              style={[styles.ccBtn, subtitlesOn && styles.ccBtnOn]}
+              onPress={onToggleSubtitles}
+              hitSlop={6}
+            >
+              <Text style={[styles.ccText, subtitlesOn && styles.ccTextOn]}>CC</Text>
+            </TouchableOpacity>
+
+            {/* 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>
+
+                    {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.sizeBtn}
+                            onPress={() =>
+                              onChangeSubtitleFontSize?.(
+                                Math.max(
+                                  SIZE_MIN,
+                                  Math.round((subtitleFontSize ?? 14) - 2),
+                                ),
+                              )
+                            }
+                          >
+                            <Ionicons name="remove" size={16} color="#fff" />
+                          </TouchableOpacity>
+
+                          <View
+                            style={[
+                              styles.sizeTrack,
+                              { opacity: onChangeSubtitleFontSize ? 1 : 0.5 },
+                            ]}
+                            onLayout={(e) => setSizeW(e.nativeEvent.layout.width)}
+                            {...sizePan.panHandlers}
+                          >
+                            <View style={[styles.sizeFill, { width: `${sizePct * 100}%` }]} />
+                          </View>
+
+                          <TouchableOpacity
+                            style={styles.sizeBtn}
+                            onPress={() =>
+                              onChangeSubtitleFontSize?.(
+                                Math.min(
+                                  SIZE_MAX,
+                                  Math.round((subtitleFontSize ?? 14) + 2),
+                                ),
+                              )
+                            }
+                          >
+                            <Ionicons name="add" size={16} color="#fff" />
+                          </TouchableOpacity>
+                        </View>
+                        <Text style={styles.sizeLabel}>{currentSize}px</Text>
+                      </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>
+        </>
+      )}
+
+      {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: { ...StyleSheet.absoluteFillObject, zIndex: 2 },
+
+  centerBadge: {
+    ...StyleSheet.absoluteFillObject,
+    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: {
+    ...StyleSheet.absoluteFillObject,
+    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 },
+
+  ccBtn: {
+    borderWidth: 1.5,
+    borderColor: "#666",
+    borderRadius: 4,
+    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)",
+  },
+
+  subWrap: { position: "relative", zIndex: 20 },
+  subMenu: {
+    position: "absolute",
+    bottom: 26,
+    right: 0,
+    zIndex: 30,
+    width: 190,
+    backgroundColor: "#14161c",
+    borderWidth: 1,
+    borderColor: "#2a2f3a",
+    borderRadius: 8,
+    overflow: "hidden",
+    elevation: 12,
+    shadowColor: "#000",
+    shadowOpacity: 0.5,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 3 },
+  },
+  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: 12,
+    paddingVertical: 7,
+  },
+  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: 10,
+  },
+  sizeBtn: {
+    width: 24,
+    height: 24,
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#2a2f3a",
+  },
+  sizeTrack: { flex: 1, height: 22, justifyContent: "center" },
+  sizeFill: { height: 4, borderRadius: 2, backgroundColor: "#7dd3fc" },
+  sizeLabel: {
+    color: "#9aa0aa",
+    fontSize: 11,
+    fontWeight: "700",
+    textAlign: "center",
+    paddingBottom: 6,
+  },
+
+  volTrackWrap: { width: 56, paddingVertical: 12, justifyContent: "center" },
+  volTrack: { height: 4, borderRadius: 2, backgroundColor: "#3a3f47", overflow: "hidden" },
+  volFill: { height: 4, backgroundColor: "#fff" },
+});

package/src/playerweb/SubtitleDisplayWeb.tsx

@@ -0,0 +1,48 @@
+import { StyleSheet, Text, View } from "react-native";
+
+export type SubCueShape = { start: number; end: number; text: string };
+
+/**
+ * Renders the active subtitle cue over the video surface. Positioned
+ * absolutely with zIndex 1 (below the controls at zIndex 2, above the
+ * video background at zIndex 0).
+ */
+export function SubtitleDisplay({
+  cue,
+  enabled,
+  fontSize,
+}: {
+  cue: SubCueShape | null;
+  enabled: boolean;
+  fontSize: number;
+}) {
+  if (!enabled || !cue?.text) return null;
+  return (
+    <View pointerEvents="none" style={styles.wrap}>
+      <Text style={[styles.text, { fontSize, lineHeight: fontSize * 1.35 }]}>
+        {cue.text}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 56,
+    alignItems: "center",
+    paddingHorizontal: 24,
+    zIndex: 1,
+  },
+  text: {
+    backgroundColor: "rgba(0,0,0,0.65)",
+    color: "#fff",
+    textAlign: "center",
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4,
+    overflow: "hidden",
+  },
+});

package/src/playerweb/index.ts

@@ -0,0 +1,3 @@
+export { MegaVideoPlayer, type MegaVideoPlayerProps } from "./MegaVideoPlayerWeb.js";
+export { PlayerControls, type PlayerControlsProps } from "./PlayerControlsWeb.js";
+export { SubtitleDisplay, type SubCueShape } from "./SubtitleDisplayWeb.js";