mega-stream-proxy 0.1.9 → 0.2.0

package/src/Player/playerAndroid/MegaVideoPlayerAndroid.tsx

@@ -1,825 +0,0 @@
-// 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,
-  useMemo,
-  useState,
-} from "react";
-import {
-  ActivityIndicator,
-  Platform,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
-import { Video } from "react-native-video";
-import { Ionicons } from "@expo/vector-icons";
-
-import { PlayerControlsAndroid } from "./PlayerControlsAndroid.js";
-import { SubtitleDisplayAndroid } from "./SubtitleDisplayAndroid.js";
-import {
-  loadSubtitles,
-  type SubCue,
-  type SubtitleFormat,
-  type SubtitleTrack,
-} from "../../subtitles/index.js";
-
-export type MegaVideoPlayerAndroidProps = {
-  /** 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
-   *  (usually "HD: <url>"), e.g. ["Default", "1080p", "720p"]. */
-  resolutions?: string[];
-  /** currently active resolution label */
-  resolution?: string;
-  /** user picked a resolution label — resolve it to a URL and update `uri`. */
-  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;
-};
-
-export type MegaVideoPlayerAndroidHandle = {
-  /** 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 MegaVideoPlayerAndroid = forwardRef<
-  MegaVideoPlayerAndroidHandle,
-  MegaVideoPlayerAndroidProps
->(function MegaVideoPlayer(
-  {
-    uri,
-    sources,
-    title,
-    subtitleUrl,
-    subtitleFormat,
-    subtitleLang,
-    subtitleTracks: subtitleTracksProp,
-    initialSubtitleLang,
-    subtitleOffset,
-    resolutions,
-    resolution,
-    onSelectResolution,
-    autoPlay = true,
-    onEnd,
-    onError,
-    onProgress,
-    onFullscreenChange,
-    width,
-    height,
-  },
-  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 [controlsBump, setControlsBump] = useState(0);
-  const [sourceUri, setSourceUri] = useState<string | null>(null);
-  const [tracks, setTracks] = useState<SubtitleTrack[]>([]);
-
-  // Keep the `<Video>` source object identity stable — a fresh `{ uri }` on
-  // every render makes the native player re-evaluate (and on some platforms
-  // reload) the source, which resets the playback clock.
-  const videoSource = useMemo(
-    () => (sourceUri ? { uri: sourceUri } : undefined),
-    [sourceUri],
-  );
-
-  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 ?? "")),
-  );
-  /** sources that auto-advance on end. Quality-switch files are full merged
-   *  sources, so they stop part auto-advance. */
-  const activeSourcesRef = React.useRef<string[]>(sources ?? []);
-  /** position to resume a quality switch at, applied once playback is moving */
-  const pendingResumeRef = React.useRef<number | null>(null);
-  const prevResolutionRef = React.useRef<string | undefined>(resolution);
-  /** web-only: the UI's intended play state + element volumes, so the DOM
-   *  bridge can operate the raw <video> element without React re-renders. */
-  const playingRef = React.useRef(false);
-  const volumeRef = React.useRef(volume);
-  const mutedRef = React.useRef(muted);
-  const onErrorRef = React.useRef(onError);
-  const onProgressRef = React.useRef(onProgress);
-
-  // ---- 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);
-    if (Platform.OS === "web") {
-      const el = (videoRef.current as any)?.nativeHtmlVideoRef?.current ?? null;
-      if (el) {
-        try {
-          if (playing) {
-            el.pause();
-          } else {
-            setLoading(false);
-            const p = el.play();
-            if (p && typeof p.catch === "function") p.catch(() => {});
-          }
-        } catch {}
-      }
-    }
-  };
-
-  const skip = (delta: number): void => {
-    const next = Math.min(Math.max(currentTime + delta, 0), duration);
-    if (Platform.OS === "web") {
-      const el = (videoRef.current as any)?.nativeHtmlVideoRef?.current ?? null;
-      if (el) {
-        try {
-          el.currentTime = next;
-        } catch {}
-      }
-    } else {
-      videoRef.current?.seek(next);
-    }
-    setCurrentTime(next);
-    setVisible(true);
-    scheduleHide();
-  };
-
-  const seek = (seconds: number): void => {
-    const clamped = Math.min(Math.max(seconds, 0), duration || seconds);
-    if (Platform.OS === "web") {
-      const el = (videoRef.current as any)?.nativeHtmlVideoRef?.current ?? null;
-      if (el) {
-        try {
-          el.currentTime = clamped;
-        } catch {}
-      }
-    } else {
-      videoRef.current?.seek(clamped);
-    }
-    setCurrentTime(clamped);
-    setVisible(true);
-    scheduleHide();
-  };
-
-  const toggleMute = (): void => {
-    setMuted((m) => {
-      const next = !m;
-      mutedRef.current = next;
-      if (Platform.OS === "web") {
-        const el = (videoRef.current as any)?.nativeHtmlVideoRef?.current ?? null;
-        if (el) {
-          try {
-            el.muted = next;
-          } catch {}
-        }
-      }
-      return next;
-    });
-    setVisible(true);
-  };
-
-  const changeVolume = (v: number): void => {
-    const clamped = Math.min(Math.max(v, 0), 1);
-    volumeRef.current = clamped;
-    setVolume(clamped);
-    if (clamped > 0) setMuted(false);
-    if (Platform.OS === "web") {
-      const el = (videoRef.current as any)?.nativeHtmlVideoRef?.current ?? null;
-      if (el) {
-        try {
-          el.volume = clamped;
-        } catch {}
-      }
-    }
-  };
-
-  const toggleSubtitles = (): void => {
-    setSubtitlesOn((s) => !s);
-  };
-
-  const toggleControls = (): void => {
-    setVisible((v) => !v);
-    if (!visible && playing) scheduleHide();
-  };
-
-  /** any interaction with the control bar — reset the auto-hide timer */
-  const onInteract = (): void => {
-    setControlsBump((n) => n + 1);
-  };
-
-  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);
-    if (Platform.OS === "web") {
-      const doc = (globalThis as any)?.document ?? null;
-      const el = (videoRef.current as any)?.nativeHtmlVideoRef?.current ?? null;
-      try {
-        if (target) {
-          el?.requestFullscreen?.();
-        } else if (doc?.fullscreenElement) {
-          doc.exitFullscreen();
-        }
-      } catch {}
-    }
-  };
-
-  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;
-    // Always move the clock first — never let a pending quality-switch resume
-    // swallow progress events.
-    setCurrentTime(t);
-    onProgress?.({ currentTime: t, duration });
-
-    const pending = pendingResumeRef.current;
-    // quality switch: resume the previous position once the new stream is
-    // actually flowing (t > 0) — seeking too early can stall the load.
-    if (pending != null && t > 0 && duration > 0) {
-      pendingResumeRef.current = null;
-      const target =
-        duration > pending + 20 ? pending : Math.max(duration - 20, 0);
-      videoRef.current?.seek(target);
-      setCurrentTime(target);
-    }
-  };
-
-  const onVideoPlaybackStateChanged = (data: { isPlaying?: boolean }): void => {
-    if (!mountedRef.current) return;
-    // Web only: browsers may deny autoplay, so mirror the real element state
-    // back into the UI. On native, `isPlaying` drops to false while buffering,
-    // which must NOT be interpreted as a user pause.
-    if (Platform.OS !== "web") return;
-    if (typeof data?.isPlaying === "boolean") {
-      setPlaying((prev) => (prev === data.isPlaying ? prev : data.isPlaying!));
-      if (data.isPlaying) {
-        setBuffering(false);
-        setLoading(false);
-      }
-    }
-  };
-
-  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 = activeSourcesRef.current;
-    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(() => {
-    if (!uri) return;
-    sourceIndexRef.current = Math.max(0, (sources ?? []).indexOf(uri));
-    const prevRes = prevResolutionRef.current;
-    const qualitySwitch = resolution != null && resolution !== prevRes;
-    prevResolutionRef.current = resolution;
-    if (qualitySwitch) {
-      pendingResumeRef.current = currentTime;
-      const isDefaultChain = (sources ?? []).includes(uri ?? "");
-      // a resolution file is one merged source — don't auto-advance through it
-      activeSourcesRef.current = isDefaultChain ? (sources ?? []) : [];
-    } else {
-      pendingResumeRef.current = null;
-      activeSourcesRef.current = sources ?? [];
-    }
-    void add(uri, { title });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uri]);
-
-  useEffect(() => {
-    activeSourcesRef.current = sources ?? [];
-  }, [sources]);
-
-  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, controlsBump]);
-
-  // Safety net for the playback clock: some platforms/builds deliver
-  // `onProgress` sparsely. While playing, poll the player position directly so
-  // the timer, scrubber and subtitles keep advancing.
-  useEffect(() => {
-    if (!playing) return;
-    let cancelled = false;
-    const id = setInterval(async () => {
-      try {
-        const pos = await videoRef.current?.getCurrentPosition?.();
-        if (cancelled || typeof pos !== "number" || !Number.isFinite(pos))
-          return;
-        setCurrentTime((prev) => (Math.abs(prev - pos) > 0.4 ? pos : prev));
-      } catch {
-        // player not ready yet — ignore
-      }
-    }, 500);
-    return () => {
-      cancelled = true;
-      clearInterval(id);
-    };
-  }, [playing]);
-
-  useEffect(() => {
-    playingRef.current = playing;
-  }, [playing]);
-
-  useEffect(() => {
-    onErrorRef.current = onError;
-    onProgressRef.current = onProgress;
-  }, [onError, onProgress]);
-
-  // Web-only: react-native-video's web driver only maps a few DOM events
-  // (onLoad <-> durationchange, sparse onProgress) and calls `play()` on load,
-  // which browsers deny without a user gesture. Instead of fighting that, take
-  // over the raw <video> element directly: attach our own listeners, mirror the
-  // clock/duration/buffering/loading state from the element, keep the icon in
-  // sync with the real paused state, force-play whenever the UI wants playback
-  // but the element drifted to paused (autoplay-denial recovery), and apply
-  // volume/muted/fullscreen changes. Native stays on react-native-video.
-  useEffect(() => {
-    if (Platform.OS !== "web") return;
-    let cancelled = false;
-    let el: any = null;
-    let listeners: Array<[string, (ev?: unknown) => void]> = [];
-
-    const detach = (): void => {
-      if (!el) return;
-      for (const [type, fn] of listeners) {
-        try {
-          el.removeEventListener(type, fn);
-        } catch {}
-      }
-      listeners = [];
-      el = null;
-    };
-
-    const add = (type: string, fn: (ev?: unknown) => void): void => {
-      try {
-        el.addEventListener(type, fn);
-        listeners.push([type, fn]);
-      } catch {}
-    };
-
-    const attach = (): any => {
-      const next = (videoRef.current as any)?.nativeHtmlVideoRef?.current ?? null;
-      if (!next) return null;
-      if (next === el) return el;
-      detach();
-      el = next;
-      el.muted = mutedRef.current;
-      el.volume = Math.min(Math.max(volumeRef.current, 0), 1);
-
-      add("timeupdate", () => {
-        const t = typeof el.currentTime === "number" ? el.currentTime : 0;
-        setCurrentTime((prev) => (Math.abs(prev - t) > 0.25 ? t : prev));
-        const d = typeof el.duration === "number" ? el.duration : 0;
-        onProgressRef.current?.({
-          currentTime: t,
-          duration: Number.isFinite(d) ? d : 0,
-        });
-      });
-      add("durationchange", () => {
-        const d = typeof el.duration === "number" ? el.duration : 0;
-        if (typeof d === "number" && Number.isFinite(d) && d > 0) {
-          setDuration(d);
-        }
-        setLoading(false);
-        setBuffering(false);
-      });
-      add("play", () => {
-        setLoading(false);
-        setBuffering(false);
-        setPlaying(true);
-      });
-      add("pause", () => {
-        setBuffering(false);
-        setPlaying(false);
-      });
-      add("waiting", () => setBuffering(true));
-      add("canplay", () => {
-        setBuffering(false);
-        setLoading(false);
-      });
-      add("loadstart", () => setLoading(true));
-      add("error", () => {
-        const msg =
-          (el?.error && (el.error.message || `Video error ${el.error.code}`)) ||
-          "Video decode error";
-        console.warn("[MegaVideoPlayer] web element error:", msg);
-        setLoading(false);
-        setBuffering(false);
-        setError(msg);
-        onError?.(msg);
-      });
-      const doc = (globalThis as any)?.document ?? null;
-      if (doc) {
-        add("fullscreenchange", () => {
-          try {
-            setFullscreen(!!doc.fullscreenElement);
-          } catch {}
-        });
-      }
-      return el;
-    };
-
-    const id = setInterval(() => {
-      if (cancelled) return;
-      const elem = attach();
-      if (!elem) return;
-      try {
-        // Autoplay-deadlock breaker: the UI wants playback, but the browser
-        // held the element at pause (initial autoplay denied, or a temporary
-        // browser pause). Re-assert play every tick so a single user gesture
-        // anywhere in the app unblocks it; seek once we finally have a size.
-        if (playingRef.current && elem.paused && !elem.ended) {
-          setLoading(false);
-          el = elem;
-          const p = elem.play();
-          if (p && typeof p.catch === "function") p.catch(() => {});
-        }
-        // Mirror the real state back so the icon can never lie about pause.
-        const real = elem.paused;
-        if (real && playingRef.current && elem.ended) {
-          setPlaying(false);
-        }
-      } catch {}
-    }, 500);
-
-    return () => {
-      cancelled = true;
-      clearInterval(id);
-      detach();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // ---- 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,
-          {
-            width: width ? width : "100%",
-            height: height ? height : "100%",
-            flexDirection: "column",
-          },
-        ]}
-      >
-        <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,
-        { width: width ? width : "100%", height: height ? height : "100%" },
-        fullscreen && styles.fullscreen,
-      ]}
-    >
-      {sourceUri ? (
-        <Video
-          ref={videoRef}
-          source={videoSource}
-          style={[
-            StyleSheet.absoluteFill,
-            { width: width ? width : "100%", height: height ? height : "100%" },
-          ]}
-          resizeMode="contain"
-          paused={!playing}
-          muted={muted}
-          volume={Platform.OS === "web" ? undefined : volume}
-          progressUpdateInterval={1000}
-          onLoadStart={() => {
-            if (mountedRef.current) setBuffering(true);
-          }}
-          onLoad={onVideoLoad}
-          onBuffer={({ isBuffering }: { isBuffering?: boolean }) => {
-            if (mountedRef.current) setBuffering(!!isBuffering);
-          }}
-          onProgress={onVideoProgress}
-          onPlaybackStateChanged={onVideoPlaybackStateChanged}
-          onError={onVideoError}
-          onEnd={onVideoEnd}
-        />
-      ) : null}
-
-      {loading && !buffering && (
-        <View
-          style={[
-            styles.centerBadge,
-            StyleSheet.absoluteFill,
-            { width: width ? width : "100%", height: height ? height : "100%" },
-          ]}
-          pointerEvents="none"
-        >
-          <ActivityIndicator color="#e50914" size="large" />
-          <Text style={styles.loadingText}>Starting stream…</Text>
-        </View>
-      )}
-
-      <SubtitleDisplayAndroid
-        cue={activeCue}
-        enabled={subtitlesOn}
-        fontSize={subFontSize}
-        width={width}
-        height={height}
-      />
-      {subtitlesOn && subtitleError && !cues.length && (
-        <View pointerEvents="none" style={styles.subErrorWrap}>
-          <Text style={styles.subErrorText}>
-            {subtitleError} · {activeTrack?.lang ?? "no track"}
-          </Text>
-        </View>
-      )}
-
-      <PlayerControlsAndroid
-        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}
-        resolutions={resolutions}
-        resolution={resolution}
-        onSelectResolution={onSelectResolution}
-        onFullscreen={enterFullscreen}
-        fullscreen={fullscreen}
-        onInteract={onInteract}
-        width={width}
-        height={height}
-      />
-    </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: {
-    
-    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",
-  },
-});