mega-stream-proxy 0.1.9

package/src/Player/playerAndroid/SubtitleDisplayAndroid.tsx

@@ -0,0 +1,80 @@
+import { StyleSheet, Text, View } from "react-native";
+
+export type SubCueShapeAndroid = { 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).
+ *
+ * When `width`/`height` are supplied they are used to size the overlay to the
+ * exact area the video occupies, so cues stay aligned with the picture (e.g.
+ * when the player is letterboxed inside a wider container).
+ */
+export function SubtitleDisplayAndroid({
+  cue,
+  enabled,
+  fontSize,
+  width,
+  height,
+}: {
+  cue: SubCueShapeAndroid | null;
+  enabled: boolean;
+  fontSize: number;
+  width?: number;
+  height?: number;
+}) {
+  if (!enabled || !cue?.text) return null;
+  const sized = width != null || height != null;
+  return (
+    <View
+      pointerEvents="none"
+      style={
+        sized
+          ? [
+              styles.videoArea,
+              {
+                width: width ?? "100%",
+                height: height ?? "100%",
+              },
+            ]
+          : 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,
+  },
+  videoArea: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    justifyContent: "flex-end",
+    alignItems: "center",
+    paddingHorizontal: 24,
+    paddingBottom: 56,
+    zIndex: 1,
+  },
+  text: {
+    backgroundColor: "rgba(0,0,0,0.65)",
+    color: "#fff",
+    textAlign: "center",
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4,
+    overflow: "hidden",
+  },
+});

package/src/Player/playerAndroid/index.ts

@@ -0,0 +1,7 @@
+export {
+  MegaVideoPlayerAndroid,
+  type MegaVideoPlayerAndroidProps,
+  type MegaVideoPlayerAndroidHandle,
+} from "./MegaVideoPlayerAndroid.js";
+export { PlayerControlsAndroid, type PlayerControlsAndroidProps } from "./PlayerControlsAndroid.js";
+export { SubtitleDisplayAndroid, type SubCueShapeAndroid } from "./SubtitleDisplayAndroid.js";

package/src/Player/playerweb/MegaVideoPlayer.tsx

@@ -0,0 +1,551 @@
+// The exact MyMovies episode player (components/MegaVideoPlayer.web.tsx),
+// packaged as a cross-platform component (Android / iOS / web). A direct
+// VideoPlayer instance (createVideoPlayer) driven from a class 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 from "react";
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+import { createVideoPlayer, VideoView, type VideoPlayer } from "expo-video";
+import { Ionicons } from "@expo/vector-icons";
+
+import { PlayerControlsWeb } from "./PlayerControls.js";
+import {
+  loadSubtitles,
+  type SubCue,
+  type SubtitleFormat,
+  type SubtitleTrack,
+} from "../../subtitles/index.js";
+
+/** expo-video listener subscriptions just need `remove()`. */
+type EventSubscriptionLike = { remove(): void };
+
+export type MegaVideoPlayerWebProps = {
+  /** 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;
+  /** 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;
+  /** select a resolution — the parent resolves the label to its URL and
+   *  updates `uri` so the new source is loaded. */
+  onSelectResolution?: (label: string) => void;
+  autoPlay?: boolean;
+  onEnd?: () => void;
+  onError?: (message: string) => void;
+  onProgress?: (info: { currentTime: number; duration: number }) => void;
+  onFullscreenChange?: (fullscreen: boolean) => void;
+  width?: number;
+  height?: number;
+};
+
+type MegaVideoPlayerWebState = {
+  playing: boolean;
+  buffering: boolean;
+  loading: boolean;
+  currentTime: number;
+  duration: number;
+  muted: boolean;
+  volume: number;
+  visible: boolean;
+  subtitlesOn: boolean;
+  subFontSize: number;
+  cues: SubCue[];
+  subtitleError: string | null;
+  error: string | null;
+  fullscreen: boolean;
+  width?: number;
+  height?: number;
+};
+
+export class MegaVideoPlayerWeb extends React.Component<
+  MegaVideoPlayerWebProps,
+  MegaVideoPlayerWebState
+> {
+  private player: VideoPlayer;
+  private subs: EventSubscriptionLike[] = [];
+  private hideTimer: ReturnType<typeof setTimeout> | null = null;
+  private mountedRef = true;
+  private autoplayRef = true;
+  private subTrackIdx = 0;
+  private tracks: SubtitleTrack[] = [];
+  private sourceIndexRef = 0;
+
+  constructor(props: MegaVideoPlayerWebProps) {
+    super(props);
+    this.state = {
+      playing: false,
+      buffering: true,
+      loading: false,
+      currentTime: 0,
+      duration: 0,
+      muted: false,
+      volume: 1,
+      visible: true,
+      subtitlesOn: true,
+      subFontSize: 14,
+      cues: [],
+      subtitleError: null,
+      error: null,
+      fullscreen: false,
+      width: this.props.width,
+      height: this.props.height,
+    };
+
+    this.player = createVideoPlayer(null);
+    this.player.loop = false;
+    this.player.timeUpdateEventInterval = 1;
+    this.player.bufferOptions = { preferredForwardBufferDuration: 60 };
+    this.sourceIndexRef = Math.max(
+      0,
+      (this.props.sources ?? []).indexOf(this.props.uri ?? ""),
+    );
+  }
+
+  // ---- lifecycle ----
+
+  componentDidMount() {
+    this.mountedRef = true;
+    this.autoplayRef = this.props.autoPlay !== false;
+
+    this.subs.push(
+      this.player.addListener("statusChange", ({ status, error }) => {
+        if (!this.mountedRef) return;
+        console.log(
+          `[MegaVideoPlayer] status: ${status}` +
+            (error ? ` error: ${error.message}` : ""),
+        );
+        this.setState({
+          buffering: status === "loading",
+          error:
+            status === "error"
+              ? (error?.message ?? "Video error")
+              : this.state.error,
+        });
+        if (error) {
+          this.props.onError?.(error.message ?? "Video error");
+        }
+        if (status === "readyToPlay") {
+          this.setState({
+            buffering: false,
+            duration: this.player.duration || this.state.duration,
+          });
+          if (this.autoplayRef) this.player.play();
+        }
+      }),
+    );
+    this.subs.push(
+      this.player.addListener("playingChange", ({ isPlaying }) => {
+        if (!this.mountedRef) return;
+        console.log(`[MegaVideoPlayer] playing: ${isPlaying}`);
+        this.setState({ playing: isPlaying });
+        if (isPlaying) this.scheduleHide();
+        else this.setState({ visible: true });
+      }),
+    );
+    this.subs.push(
+      this.player.addListener("timeUpdate", ({ currentTime }) => {
+        if (!this.mountedRef) return;
+        this.setState({ currentTime });
+        this.props.onProgress?.({
+          currentTime,
+          duration: this.player.duration || this.state.duration,
+        });
+      }),
+    );
+    this.subs.push(
+      this.player.addListener("playToEnd", () => {
+        const sources = this.props.sources ?? [];
+        const next = sources[this.sourceIndexRef + 1];
+        if (next) {
+          this.sourceIndexRef += 1;
+          console.log(
+            `[MegaVideoPlayer] advancing to part ${this.sourceIndexRef + 1}/${sources.length}`,
+          );
+          void this.add(next, { title: this.props.title });
+        } else {
+          this.props.onEnd?.();
+        }
+      }),
+    );
+
+    this.syncSubtitleTracks();
+    if (this.props.uri) {
+      void this.add(this.props.uri, { title: this.props.title });
+    }
+  }
+
+  componentDidUpdate(prevProps: MegaVideoPlayerWebProps) {
+    if (this.props.uri !== prevProps.uri && this.props.uri) {
+      this.sourceIndexRef = Math.max(
+        0,
+        (this.props.sources ?? []).indexOf(this.props.uri),
+      );
+      void this.add(this.props.uri, { title: this.props.title });
+    }
+    if (
+      this.props.subtitleTracks !== prevProps.subtitleTracks ||
+      this.props.subtitleUrl !== prevProps.subtitleUrl
+    ) {
+      this.syncSubtitleTracks();
+    }
+  }
+
+  componentWillUnmount() {
+    this.mountedRef = false;
+    if (this.hideTimer) clearTimeout(this.hideTimer);
+    this.subs.forEach((s) => s.remove());
+    this.subs = [];
+    if (this.player) {
+      try {
+        this.player.pause();
+        this.player.release();
+      } catch {}
+    }
+  }
+
+  // ---- source management ----
+
+  /** Loads a new playable URL into the player. */
+  async add(source: string, opts?: { title?: string }): Promise<void> {
+    if (!source) return;
+    this.setState({ error: null, loading: true, buffering: true });
+
+    try {
+      if (!this.mountedRef) return;
+      console.log(`[MegaVideoPlayer] add: ${source}`);
+      this.player.replace({
+        uri: source,
+        metadata: { title: opts?.title ?? this.props.title },
+      });
+      this.setState({
+        loading: false,
+        currentTime: 0,
+        duration: 0,
+      });
+    } catch (e) {
+      if (!this.mountedRef) return;
+      const message = e instanceof Error ? e.message : String(e);
+      console.warn("[MegaVideoPlayer] add failed:", message);
+      this.setState({ error: message, loading: false, buffering: false });
+      this.props.onError?.(message);
+    }
+  }
+
+  /** Stops playback and clears the current source. */
+  stop(): void {
+    try {
+      this.player.pause();
+      this.player.replace(null);
+    } catch {}
+  }
+
+  // ---- player controllers (all on the class) ----
+
+  playPause = (): void => {
+    if (this.player.playing) this.player.pause();
+    else this.player.play();
+    this.setState({ playing: this.player.playing, visible: true });
+    this.scheduleHide();
+  };
+
+  skip = (delta: number): void => {
+    const next = Math.min(
+      Math.max(this.state.currentTime + delta, 0),
+      this.state.duration,
+    );
+    this.player.currentTime = next;
+    this.setState({ currentTime: next, visible: true });
+    this.scheduleHide();
+  };
+
+  seek = (seconds: number): void => {
+    const clamped = Math.min(
+      Math.max(seconds, 0),
+      this.state.duration || seconds,
+    );
+    this.player.currentTime = clamped;
+    this.setState({ currentTime: clamped, visible: true });
+    this.scheduleHide();
+  };
+
+  toggleMute = (): void => {
+    const next = !this.state.muted;
+    this.player.muted = next;
+    this.setState({ muted: next, visible: true });
+  };
+
+  changeVolume = (v: number): void => {
+    this.player.volume = v;
+    this.setState({ volume: v });
+    if (v > 0 && this.state.muted) {
+      this.player.muted = false;
+      this.setState({ muted: false });
+    }
+  };
+
+  toggleSubtitles = (): void => {
+    this.setState((s) => ({ subtitlesOn: !s.subtitlesOn }));
+  };
+
+  toggleControls = (): void => {
+    this.setState((s) => ({ visible: !s.visible }));
+    if (!this.state.visible && this.state.playing) this.scheduleHide();
+  };
+
+  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 : !this.state.fullscreen;
+    this.setState({ fullscreen: target, visible: true });
+    this.props.onFullscreenChange?.(target);
+  };
+
+  changeSubtitleFontSize = (px: number): void => {
+    this.setState({ subFontSize: px });
+  };
+
+  selectSubtitleTrack = (lang: string): void => {
+    const idx = this.tracks.findIndex((t) => t.lang === lang);
+    if (idx >= 0) {
+      this.subTrackIdx = idx;
+      this.setState({ subtitlesOn: true });
+      this.loadSubtitles();
+    }
+  };
+
+  // ---- helpers ----
+
+  private scheduleHide() {
+    if (this.hideTimer) clearTimeout(this.hideTimer);
+    this.hideTimer = setTimeout(() => {
+      if (this.state.playing) this.setState({ visible: false });
+    }, 3000);
+  }
+
+  private syncSubtitleTracks() {
+    const {
+      subtitleTracks,
+      subtitleUrl,
+      subtitleFormat,
+      subtitleLang,
+      initialSubtitleLang,
+    } = this.props;
+    this.tracks = subtitleTracks?.length
+      ? subtitleTracks
+      : subtitleUrl
+        ? [
+            {
+              lang: subtitleLang ?? "SRT",
+              url: subtitleUrl,
+              format: subtitleFormat,
+            },
+          ]
+        : [];
+    // Preselect the requested track (from the watch screen's subtitle picker)
+    if (initialSubtitleLang) {
+      const idx = this.tracks.findIndex((t) => t.lang === initialSubtitleLang);
+      if (idx >= 0) this.subTrackIdx = idx;
+    }
+    this.loadSubtitles();
+  }
+
+  private loadSubtitles() {
+    const track =
+      this.tracks[Math.min(this.subTrackIdx, this.tracks.length - 1)] ?? null;
+    this.setState({ cues: [], subtitleError: null });
+    if (!track) return;
+    loadSubtitles(track.url, { format: track.format ?? undefined })
+      .then((c) => {
+        if (!this.mountedRef) return;
+        this.setState({
+          cues: c,
+          subtitleError:
+            c.length === 0 ? "No cues parsed from this subtitle file" : null,
+        });
+      })
+      .catch((e: unknown) => {
+        console.warn("[subtitles] load failed:", track.url, e);
+        if (this.mountedRef)
+          this.setState({ subtitleError: "Subtitles unavailable" });
+      });
+  }
+
+  // ---- render ----
+
+  render() {
+    const s = this.state;
+    const offset = this.props.subtitleOffset ?? 0;
+    const cueTime = s.currentTime - offset;
+    const activeCue =
+      s.cues.find((c) => cueTime >= c.start && cueTime < c.end) ?? null;
+    const activeTrack =
+      this.tracks[Math.min(this.subTrackIdx, this.tracks.length - 1)] ?? null;
+
+    if (s.error) {
+      return (
+        <View style={[styles.wrap, styles.center]}>
+          <Ionicons name="alert-circle-outline" size={40} color="#ff6b6b" />
+          <Text style={styles.errorText}>{s.error}</Text>
+          <Text style={styles.errorHint}>Use "Download & Play" instead.</Text>
+        </View>
+      );
+    }
+
+    return (
+      <View
+        style={[
+          styles.wrap,
+          { width: this.state.width, height: this.state.height },
+          s.fullscreen && styles.fullscreen,
+        ]}
+      >
+        <VideoView
+          player={this.player}
+          style={[
+            StyleSheet.absoluteFill,
+            {
+              alignSelf: "center",
+              width: this.state.width,
+              height: this.state.height,
+              zIndex: 0
+            },
+          ]}
+          nativeControls={false}
+          contentFit="contain"
+          allowsFullscreen={false}
+        />
+
+        {s.loading && (
+          <View
+            style={[styles.centerBadge, { width: this.state.width }]}
+            pointerEvents="none"
+          >
+            <ActivityIndicator color="#e50914" size="large" />
+            <Text style={styles.loadingText}>Starting stream…</Text>
+          </View>
+        )}
+
+        {s.subtitlesOn && s.subtitleError && !s.cues.length && (
+          <View pointerEvents="none" style={styles.subErrorWrap}>
+            <Text style={styles.subErrorText}>
+              {s.subtitleError} · {activeTrack?.lang ?? "no track"}
+            </Text>
+          </View>
+        )}
+
+        <PlayerControlsWeb
+          playing={s.playing}
+          buffering={s.buffering}
+          currentTime={s.currentTime}
+          duration={s.duration}
+          muted={s.muted}
+          title={this.props.title}
+          visible={s.visible}
+          subtitlesOn={s.subtitlesOn}
+          volume={s.volume}
+          subtitleTracks={this.tracks.map((t) => t.lang)}
+          subtitleTrack={activeTrack?.lang}
+          onSelectSubtitleTrack={this.selectSubtitleTrack}
+          subtitleFontSize={s.subFontSize}
+          onChangeSubtitleFontSize={this.changeSubtitleFontSize}
+          resolutions={this.props.resolutions}
+          resolution={this.props.resolution}
+          onSelectResolution={this.props.onSelectResolution}
+          onToggleVisible={this.toggleControls}
+          onPlayPause={this.playPause}
+          onSkip={this.skip}
+          onSeek={this.seek}
+          onToggleMute={this.toggleMute}
+          onToggleSubtitles={this.toggleSubtitles}
+          onVolume={this.changeVolume}
+          onFullscreen={this.enterFullscreen}
+          width={this.state.width}
+          height={this.state.height}
+          cue={activeCue}
+          enabled={s.subtitlesOn}
+          fontSize={s.subFontSize}
+        />
+      </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",
+  },
+});