mega-stream-proxy 0.1.9 → 0.2.0

package/src/player/MegaVideoPlayer.tsx

@@ -0,0 +1,474 @@
+// The exact MyMovies episode player (components/MegaVideoPlayer.web.tsx),
+// packaged as a cross-platform component (Android / iOS / web). Driven by the
+// react-native-video `<Video>` component, with ordered part URLs played
+// back-to-back and auto-advancing to the next part when the current one ends.
+// Sources come in as proxy URLs — from `mega-stream-proxy/native`
+// (http://127.0.0.1:<port>/…) on Android/iOS or from the Service Worker
+// (`/__mmstream__/…`) on the web.
+
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from "react";
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import { Video } from "react-native-video";
+import { Ionicons } from "@expo/vector-icons";
+
+import { PlayerControls } from "./PlayerControls.js";
+import { SubtitleDisplay } from "./SubtitleDisplay.js";
+import {
+  loadSubtitles,
+  type SubCue,
+  type SubtitleFormat,
+  type SubtitleTrack,
+} from "../subtitles/index.js";
+
+export type MegaVideoPlayerProps = {
+  /** A playable URL — a direct stream or the first part URL. */
+  uri?: string | null;
+  /** Ordered additional part URLs for multi-part episodes, played in sequence. */
+  sources?: string[];
+  title?: string;
+  /** Pass your subtitle file here — MEGA links, plain http(s) CORS hosts, or a known extension (.srt/.ass/.vtt). */
+  subtitleUrl?: string;
+  /** optional format hint (defaults to URL extension, then content sniffing) */
+  subtitleFormat?: SubtitleFormat;
+  /** language name shown in the player controls for the single `subtitleUrl` track
+   *  (e.g. "English", "French"). Defaults to "SRT". */
+  subtitleLang?: string;
+  subtitleTracks?: SubtitleTrack[];
+  /** preselect a subtitle track by language on load */
+  initialSubtitleLang?: string | null;
+  /** shift the cue timestamps by an offset in seconds (can be negative) */
+  subtitleOffset?: number;
+  autoPlay?: boolean;
+  onEnd?: () => void;
+  onError?: (message: string) => void;
+  onProgress?: (info: { currentTime: number; duration: number }) => void;
+  onFullscreenChange?: (fullscreen: boolean) => void;
+};
+
+export type MegaVideoPlayerHandle = {
+  /** Loads a new playable URL into the player. */
+  add: (source: string, opts?: { title?: string }) => Promise<void>;
+  /** Stops playback and clears the current source. */
+  stop: () => void;
+};
+
+export const MegaVideoPlayer = forwardRef<
+  MegaVideoPlayerHandle,
+  MegaVideoPlayerProps
+>(function MegaVideoPlayer(
+  {
+    uri,
+    sources,
+    title,
+    subtitleUrl,
+    subtitleFormat,
+    subtitleLang,
+    subtitleTracks: subtitleTracksProp,
+    initialSubtitleLang,
+    subtitleOffset,
+    autoPlay = true,
+    onEnd,
+    onError,
+    onProgress,
+    onFullscreenChange,
+  },
+  ref,
+) {
+  const [playing, setPlaying] = useState(false);
+  const [buffering, setBuffering] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [muted, setMuted] = useState(false);
+  const [volume, setVolume] = useState(1);
+  const [visible, setVisible] = useState(true);
+  const [subtitlesOn, setSubtitlesOn] = useState(true);
+  const [subFontSize, setSubFontSize] = useState(14);
+  const [cues, setCues] = useState<SubCue[]>([]);
+  const [subtitleError, setSubtitleError] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [sourceUri, setSourceUri] = useState<string | null>(null);
+  const [tracks, setTracks] = useState<SubtitleTrack[]>([]);
+
+  const videoRef = React.useRef<any>(null);
+  const mountedRef = React.useRef(true);
+  const autoplayRef = React.useRef(autoPlay !== false);
+  const hideTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const subTrackIdxRef = React.useRef(0);
+  const sourceIndexRef = React.useRef(
+    Math.max(0, (sources ?? []).indexOf(uri ?? "")),
+  );
+
+  // ---- source management ----
+
+  async function add(source: string, opts?: { title?: string }): Promise<void> {
+    if (!source) return;
+    setError(null);
+    setLoading(true);
+    setBuffering(true);
+    setSourceUri(source);
+    setCurrentTime(0);
+    setDuration(0);
+
+    if (!mountedRef.current) return;
+    console.log(`[MegaVideoPlayer] add: ${source} (${opts?.title ?? title})`);
+    if (autoplayRef.current) {
+      setPlaying(true);
+      scheduleHide();
+    }
+  }
+
+  function stop(): void {
+    setSourceUri(null);
+    setPlaying(false);
+  }
+
+  useImperativeHandle(ref, () => ({ add, stop }), [add, stop]);
+
+  // ---- player controllers ----
+
+  const playPause = (): void => {
+    setPlaying((p) => !p);
+    setVisible(true);
+  };
+
+  const skip = (delta: number): void => {
+    const next = Math.min(Math.max(currentTime + delta, 0), duration);
+    videoRef.current?.seek(next);
+    setCurrentTime(next);
+    setVisible(true);
+    scheduleHide();
+  };
+
+  const seek = (seconds: number): void => {
+    const clamped = Math.min(Math.max(seconds, 0), duration || seconds);
+    videoRef.current?.seek(clamped);
+    setCurrentTime(clamped);
+    setVisible(true);
+    scheduleHide();
+  };
+
+  const toggleMute = (): void => {
+    setMuted((m) => !m);
+    setVisible(true);
+  };
+
+  const changeVolume = (v: number): void => {
+    setVolume(v);
+    if (v > 0) setMuted(false);
+  };
+
+  const toggleSubtitles = (): void => {
+    setSubtitlesOn((s) => !s);
+  };
+
+  const toggleControls = (): void => {
+    setVisible((v) => !v);
+    if (!visible && playing) scheduleHide();
+  };
+
+  const enterFullscreen = (next?: boolean | unknown): void => {
+    // PlayerControls calls through onPress, which passes the press event as
+    // the first argument — ignore it (it is not the desired fullscreen value).
+    const target = typeof next === "boolean" ? next : !fullscreen;
+    setFullscreen(target);
+    setVisible(true);
+    onFullscreenChange?.(target);
+  };
+
+  const changeSubtitleFontSize = (px: number): void => {
+    setSubFontSize(px);
+  };
+
+  const selectSubtitleTrack = (lang: string): void => {
+    const idx = tracks.findIndex((t) => t.lang === lang);
+    if (idx >= 0) {
+      subTrackIdxRef.current = idx;
+      setSubtitlesOn(true);
+      loadCues(tracks);
+    }
+  };
+
+  // ---- react-native-video handlers ----
+
+  const onVideoLoad = (data: { duration?: number }): void => {
+    const d = data.duration ?? duration;
+    setDuration(d);
+    setBuffering(false);
+    setLoading(false);
+    console.log(`[MegaVideoPlayer] onLoad duration=${d}`);
+  };
+
+  const onVideoProgress = (data: { currentTime?: number }): void => {
+    const t = data.currentTime ?? 0;
+    setCurrentTime(t);
+    onProgress?.({ currentTime: t, duration });
+  };
+
+  const onVideoError = (e: any): void => {
+    if (!mountedRef.current) return;
+    const message =
+      e?.error?.message || e?.error?.errorString || String(e) || "Video error";
+    console.warn("[MegaVideoPlayer] onError:", message);
+    setError(message);
+    setBuffering(false);
+    setLoading(false);
+    onError?.(message);
+  };
+
+  const onVideoEnd = (): void => {
+    const list = sources ?? [];
+    const next = list[sourceIndexRef.current + 1];
+    if (next) {
+      sourceIndexRef.current += 1;
+      console.log(
+        `[MegaVideoPlayer] advancing to part ${sourceIndexRef.current + 1}/${list.length}`,
+      );
+      void add(next, { title });
+    } else {
+      setPlaying(false);
+      setVisible(true);
+      onEnd?.();
+    }
+  };
+
+  // ---- helpers ----
+
+  function scheduleHide() {
+    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = setTimeout(() => {
+      setPlaying((p) => {
+        if (p) setVisible(false);
+        return p;
+      });
+    }, 3000);
+  }
+
+  function loadCues(trackList: SubtitleTrack[] = tracks) {
+    const track =
+      trackList[Math.min(subTrackIdxRef.current, trackList.length - 1)] ?? null;
+    setCues([]);
+    setSubtitleError(null);
+    if (!track) return;
+    loadSubtitles(track.url, { format: track.format ?? undefined })
+      .then((c) => {
+        if (!mountedRef.current) return;
+        setCues(c);
+        setSubtitleError(
+          c.length === 0 ? "No cues parsed from this subtitle file" : null,
+        );
+      })
+      .catch((e: unknown) => {
+        console.warn("[subtitles] load failed:", track.url, e);
+        if (mountedRef.current) setSubtitleError("Subtitles unavailable");
+      });
+  }
+
+  function syncSubtitleTracks() {
+    const nextTracks = subtitleTracksProp?.length
+      ? subtitleTracksProp
+      : subtitleUrl
+        ? [{ lang: subtitleLang ?? "SRT", url: subtitleUrl, format: subtitleFormat }]
+        : [];
+    setTracks(nextTracks);
+    // Preselect the requested track (from the watch screen's subtitle picker)
+    if (initialSubtitleLang) {
+      const idx = nextTracks.findIndex((t) => t.lang === initialSubtitleLang);
+      if (idx >= 0) subTrackIdxRef.current = idx;
+    }
+    loadCues(nextTracks);
+  }
+
+  // ---- effects ----
+
+  useEffect(() => {
+    mountedRef.current = true;
+    autoplayRef.current = autoPlay !== false;
+    return () => {
+      mountedRef.current = false;
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    };
+  }, [autoPlay]);
+
+  useEffect(() => {
+    syncSubtitleTracks();
+    if (uri) void add(uri, { title });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!uri) return;
+    sourceIndexRef.current = Math.max(0, (sources ?? []).indexOf(uri));
+    void add(uri, { title });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uri]);
+
+  useEffect(() => {
+    syncSubtitleTracks();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [subtitleTracksProp, subtitleUrl]);
+
+  useEffect(() => {
+    if (!visible || !playing) return;
+    const t = setTimeout(() => setVisible(false), 3000);
+    return () => clearTimeout(t);
+  }, [visible, playing]);
+
+  // ---- render ----
+
+  const activeCue =
+    cues.find((c) => currentTime - (subtitleOffset ?? 0) >= c.start &&
+      currentTime - (subtitleOffset ?? 0) < c.end) ?? null;
+  const activeTrack =
+    tracks[Math.min(subTrackIdxRef.current, tracks.length - 1)] ?? null;
+
+  if (error) {
+    return (
+      <View style={[styles.wrap, styles.center]}>
+        <Ionicons name="alert-circle-outline" size={40} color="#ff6b6b" />
+        <Text style={styles.errorText}>{error}</Text>
+        <Text style={styles.errorHint}>Use "Download & Play" instead.</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.wrap, fullscreen && styles.fullscreen]}>
+      {sourceUri ? (
+        <Video
+          ref={videoRef}
+          source={{ uri: sourceUri }}
+          style={StyleSheet.absoluteFill}
+          resizeMode="contain"
+          paused={!playing}
+          muted={muted}
+          volume={volume}
+          progressUpdateInterval={1000}
+          onLoadStart={() => {
+            if (mountedRef.current) setBuffering(true);
+          }}
+          onLoad={onVideoLoad}
+          onBuffer={({ isBuffering }: { isBuffering?: boolean }) => {
+            if (mountedRef.current) setBuffering(!!isBuffering);
+          }}
+          onProgress={onVideoProgress}
+          onError={onVideoError}
+          onEnd={onVideoEnd}
+        />
+      ) : null}
+
+      {loading && (
+        <View style={styles.centerBadge} pointerEvents="none">
+          <ActivityIndicator color="#e50914" size="large" />
+          <Text style={styles.loadingText}>Starting stream…</Text>
+        </View>
+      )}
+
+      <SubtitleDisplay cue={activeCue} enabled={subtitlesOn} fontSize={subFontSize} />
+      {subtitlesOn && subtitleError && !cues.length && (
+        <View pointerEvents="none" style={styles.subErrorWrap}>
+          <Text style={styles.subErrorText}>
+            {subtitleError} · {activeTrack?.lang ?? "no track"}
+          </Text>
+        </View>
+      )}
+
+      <PlayerControls
+        playing={playing}
+        buffering={buffering}
+        currentTime={currentTime}
+        duration={duration}
+        muted={muted}
+        title={title}
+        visible={visible}
+        subtitlesOn={subtitlesOn}
+        volume={volume}
+        subtitleTracks={tracks.map((t) => t.lang)}
+        subtitleTrack={activeTrack?.lang}
+        onSelectSubtitleTrack={selectSubtitleTrack}
+        subtitleFontSize={subFontSize}
+        onChangeSubtitleFontSize={changeSubtitleFontSize}
+        onToggleVisible={toggleControls}
+        onPlayPause={playPause}
+        onSkip={skip}
+        onSeek={seek}
+        onToggleMute={toggleMute}
+        onToggleSubtitles={toggleSubtitles}
+        onVolume={changeVolume}
+        onFullscreen={enterFullscreen}
+      />
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  wrap: {
+    flex: 1,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "#000",
+  },
+  fullscreen: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: 10,
+  },
+  center: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 12,
+    padding: 20,
+    backgroundColor: "#000",
+  },
+  errorText: {
+    color: "#ff6b6b",
+    fontSize: 14,
+    textAlign: "center",
+  },
+  errorHint: {
+    color: "#9aa0aa",
+    fontSize: 12,
+    textAlign: "center",
+  },
+  centerBadge: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 12,
+  },
+  loadingText: { color: "#fff", fontSize: 14 },
+  subErrorWrap: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 56,
+    alignItems: "center",
+    paddingHorizontal: 24,
+    zIndex: 5,
+  },
+  subErrorText: {
+    backgroundColor: "rgba(229,9,20,0.8)",
+    color: "#fff",
+    fontSize: 12,
+    textAlign: "center",
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 4,
+    overflow: "hidden",
+  },
+});