mega-stream-proxy 0.1.9 → 0.2.0

package/README.md

@@ -34,11 +34,15 @@ mega-link ──> megajs File.fromURL ──┬─> Android/iOS: 127.0.0.1:PORT/
 
 - **Web**: a modern browser at `https:` (or `localhost`) for Service Worker
   streaming; Node 18+ for the `copySwAssets` deploy step.
-- **Android / iOS**: React Native ≥ 0.71 (Expo SDK 52+ recommended) — the native
+- **Android / iOS**: React Native ≥ 0.71 (Expo SDK 52 recommended) — the native
   streaming module is auto-linked, no manual Gradle/Xcode edits.
 - All platforms need `react`, `react-native`, `expo-video`, and `@expo/vector-icons`
   (Expo apps already ship the last two).
 
+## for sdk 54 + support versions 
+visit url https://www.npmjs.com/package/mega-proxy?activeTab=readme
+
+
 ## Install
 
 ```sh
@@ -69,7 +73,7 @@ your Expo app already provides them.
 import { useEffect, useMemo } from "react";
 import { View } from "react-native";
 import { ensureProxy, createStream, releaseStream } from "mega-stream-proxy/native";
-import { MegaVideoPlayerWeb } from "mega-stream-proxy/player";
+import { MegaVideoPlayer } from "mega-stream-proxy/player";
 
 export function WatchScreen({ megaUrl, subtitleUrl }) {
   const ref = useMemo(() => ({ url: null as string | null, sessionId: null as string | null }), []);
@@ -93,51 +97,12 @@ export function WatchScreen({ megaUrl, subtitleUrl }) {
 
   return (
     <View style={{ flex: 1 }}>
-      <MegaVideoPlayerWeb uri={ref.url} subtitleUrl={subtitleUrl} autoPlay />
+      <MegaVideoPlayer uri={ref.url} subtitleUrl={subtitleUrl} autoPlay />
     </View>
   );
 }
 ```
 
-## all Platfroms (streaming)
-
-```tsx
-import { useEffect, useMemo } from "react";
-import { View, Platform } from "react-native";
-import { ensureProxy, createStream, releaseStream } from "mega-stream-proxy/native";
-import { MegaVideoPlayerAndroid } from "mega-stream-proxy/playerAndroid";
-import { MegaVideoPlayerWeb } from "mega-stream-proxy/player";
-export function WatchScreen({ megaUrl, subtitleUrl }) {
-  const ref = useMemo(() => ({ url: null as string | null, sessionId: null as string | null }), []);
-
-  useEffect(() => {
-    let alive = true;
-    void ensureProxy(); // idempotent — starts the singleton server once per app lifetime
-    createStream(megaUrl).then(({ url, sessionId }) => {
-      if (!alive) {
-        releaseStream(sessionId);
-        return;
-      }
-      ref.url = url;
-      ref.sessionId = sessionId;
-    });
-    return () => {
-      alive = false;
-      if (ref.sessionId) releaseStream(ref.sessionId);
-    };
-  }, [megaUrl]);
-
-  return (
-   <View>
-      {Platform.OS === "web" ? (
-        <MegaVideoPlayerWeb uri={ref.url} subtitleUrl={subtitleUrl} />
-      ) : (
-        <MegaVideoPlayerAndroid uri={ref.url} subtitleUrl={subtitleUrl} />
-      )}
-    </View>
-  )
-}
-
 - `ensureProxy(): Promise<void>` — idempotent; binds the singleton local server once
   per app lifetime. Safe to call repeatedly; no-op until `stopProxy()`.
 - `createStream(megaUrl): Promise<{ url, sessionId }>` — one keyed session per MEGA
@@ -175,7 +140,7 @@ Server from a host that allows a Service Worker (`https:` or `localhost`).
 import { useEffect, useMemo } from "react";
 import { View } from "react-native";
 import { ensureProxy, createStream, releaseStream } from "mega-stream-proxy/web";
-import { MegaVideoPlayerWeb } from "mega-stream-proxy/player";
+import { MegaVideoPlayer } from "mega-stream-proxy/player";
 
 export function WatchScreen({ megaUrl, subtitleUrl }) {
   const ref = useMemo(() => ({ url: null as string | null, sessionId: null as string | null }), []);
@@ -199,7 +164,7 @@ export function WatchScreen({ megaUrl, subtitleUrl }) {
 
   return (
     <View style={{ flex: 1 }}>
-      <MegaVideoPlayerWeb uri={ref.url} subtitleUrl={subtitleUrl} autoPlay />
+      <MegaVideoPlayer uri={ref.url} subtitleUrl={subtitleUrl} autoPlay />
     </View>
   );
 }
@@ -309,9 +274,9 @@ The same pattern applies to multi-part episodes: `createStreams(megaUrls)` retur
 
 ## Player component
 
-`import { MegaVideoPlayerWeb, PlayerControlsWeb, SubtitleDisplayWeb } from "mega-stream-proxy/player";`
+`import { MegaVideoPlayer, PlayerControls, SubtitleDisplay } from "mega-stream-proxy/player";`
 
-This is the **same player MyMovies uses** (`components/MegaVideoPlayerWeb.tsx`),
+This is the **same player MyMovies uses** (`components/MegaVideoPlayer.web.tsx`),
 byte-for-byte — same expo-video engine, same custom controls (scrub bar, volume,
 skip ±10s, subtitle picker + text-size slider, intro/outro regions), same subtitle
 overlay style, same auto-hiding chrome, and the same multi-part advance logic. It
@@ -320,7 +285,7 @@ runs identically on Android, iOS and web.
 ### Simple usage — pass the subtitle URL as a prop
 
 ```tsx
-<MegaVideoPlayerWeb
+<MegaVideoPlayer
   uri="https://…/part-0.mp4"          // or the proxy URL from /native or /web
   title="Episode 1"
   subtitleUrl="https://cdn.example.com/subs.srt"  // <-- the subtitle file
@@ -343,7 +308,7 @@ The player shows a subtitle selector in the controls (same UI as MyMovies):
   tabs: **Language** (the subtitle list) and **Text Size**.
 
 ```tsx
-<MegaVideoPlayerWeb
+<MegaVideoPlayer
   uri={url}
   subtitleTracks={[
     { lang: "English", url: "https://cdn.example.com/subs.en.srt" },
@@ -376,7 +341,7 @@ Format auto-detection order: `subtitleFormat` prop → URL extension → content
 ### Multi-language tracks
 
 ```tsx
-<MegaVideoPlayerWeb
+<MegaVideoPlayer
   uri={url}
   subtitleTracks={[
     { lang: "English", url: "https://cdn.example.com/subs.srt" },

package/dist/megaFile.js

@@ -1,18 +1,31 @@
 const ATTRS_TIMEOUT_MS = 30_000;
+const ATTRS_RETRIES = 2;
 /** Lazily resolves megajs `File.fromURL` + attributes (incl. folder-link child). */
 export async function loadMegaFile(url) {
     const { File } = (await import("megajs"));
     const file = File.fromURL(url.trim());
-    await withTimeout(file.loadAttributes(), ATTRS_TIMEOUT_MS, "MEGA did not respond. Check your connection and try again.");
-    // Folder links: loadAttributes resolves to the folder itself — pick the
-    // first non-directory child instead (mirrors the megajs docs sample).
-    const group = file;
-    if (group.children?.length) {
-        const child = group.find?.((n) => !n.children, true);
-        if (child)
-            return child;
+    // MEGA API calls can fail transiently (dns/rate-limit/network blip). Retry a
+    // couple of times before surfacing "MEGA did not respond."
+    let lastError;
+    for (let attempt = 1; attempt <= ATTRS_RETRIES; attempt++) {
+        try {
+            await withTimeout(file.loadAttributes(), ATTRS_TIMEOUT_MS, "MEGA did not respond. Check your connection and try again.");
+            // Folder links: loadAttributes resolves to the folder itself — pick the
+            // first non-directory child instead (mirrors the megajs docs sample).
+            const group = file;
+            if (group.children?.length) {
+                const child = group.find?.((n) => !n.children, true);
+                if (child)
+                    return child;
+            }
+            return file;
+        }
+        catch (e) {
+            lastError = e;
+            console.warn(`[megaStream] loadAttributes attempt ${attempt}/${ATTRS_RETRIES} failed`);
+        }
     }
-    return file;
+    throw lastError instanceof Error ? lastError : new Error(String(lastError));
 }
 export function fileSizeOf(file) {
     return Number(file.size ?? 0);

package/dist/{Player/playerAndroid/MegaVideoPlayerAndroid.d.ts → player/MegaVideoPlayer.d.ts}

@@ -1,6 +1,6 @@
 import React from "react";
-import { type SubtitleFormat, type SubtitleTrack } from "../../subtitles/index.js";
-export type MegaVideoPlayerAndroidProps = {
+import { 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. */
@@ -18,13 +18,6 @@ export type MegaVideoPlayerAndroidProps = {
     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;
@@ -33,10 +26,8 @@ export type MegaVideoPlayerAndroidProps = {
         duration: number;
     }) => void;
     onFullscreenChange?: (fullscreen: boolean) => void;
-    width?: number;
-    height?: number;
 };
-export type MegaVideoPlayerAndroidHandle = {
+export type MegaVideoPlayerHandle = {
     /** Loads a new playable URL into the player. */
     add: (source: string, opts?: {
         title?: string;
@@ -44,4 +35,4 @@ export type MegaVideoPlayerAndroidHandle = {
     /** Stops playback and clears the current source. */
     stop: () => void;
 };
-export declare const MegaVideoPlayerAndroid: React.ForwardRefExoticComponent<MegaVideoPlayerAndroidProps & React.RefAttributes<MegaVideoPlayerAndroidHandle>>;
+export declare const MegaVideoPlayer: React.ForwardRefExoticComponent<MegaVideoPlayerProps & React.RefAttributes<MegaVideoPlayerHandle>>;

package/dist/player/MegaVideoPlayer.js

@@ -0,0 +1,307 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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, } from "../subtitles/index.js";
+export const MegaVideoPlayer = forwardRef(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([]);
+    const [subtitleError, setSubtitleError] = useState(null);
+    const [error, setError] = useState(null);
+    const [fullscreen, setFullscreen] = useState(false);
+    const [sourceUri, setSourceUri] = useState(null);
+    const [tracks, setTracks] = useState([]);
+    const videoRef = React.useRef(null);
+    const mountedRef = React.useRef(true);
+    const autoplayRef = React.useRef(autoPlay !== false);
+    const hideTimerRef = React.useRef(null);
+    const subTrackIdxRef = React.useRef(0);
+    const sourceIndexRef = React.useRef(Math.max(0, (sources ?? []).indexOf(uri ?? "")));
+    // ---- source management ----
+    async function add(source, opts) {
+        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() {
+        setSourceUri(null);
+        setPlaying(false);
+    }
+    useImperativeHandle(ref, () => ({ add, stop }), [add, stop]);
+    // ---- player controllers ----
+    const playPause = () => {
+        setPlaying((p) => !p);
+        setVisible(true);
+    };
+    const skip = (delta) => {
+        const next = Math.min(Math.max(currentTime + delta, 0), duration);
+        videoRef.current?.seek(next);
+        setCurrentTime(next);
+        setVisible(true);
+        scheduleHide();
+    };
+    const seek = (seconds) => {
+        const clamped = Math.min(Math.max(seconds, 0), duration || seconds);
+        videoRef.current?.seek(clamped);
+        setCurrentTime(clamped);
+        setVisible(true);
+        scheduleHide();
+    };
+    const toggleMute = () => {
+        setMuted((m) => !m);
+        setVisible(true);
+    };
+    const changeVolume = (v) => {
+        setVolume(v);
+        if (v > 0)
+            setMuted(false);
+    };
+    const toggleSubtitles = () => {
+        setSubtitlesOn((s) => !s);
+    };
+    const toggleControls = () => {
+        setVisible((v) => !v);
+        if (!visible && playing)
+            scheduleHide();
+    };
+    const enterFullscreen = (next) => {
+        // 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) => {
+        setSubFontSize(px);
+    };
+    const selectSubtitleTrack = (lang) => {
+        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) => {
+        const d = data.duration ?? duration;
+        setDuration(d);
+        setBuffering(false);
+        setLoading(false);
+        console.log(`[MegaVideoPlayer] onLoad duration=${d}`);
+    };
+    const onVideoProgress = (data) => {
+        const t = data.currentTime ?? 0;
+        setCurrentTime(t);
+        onProgress?.({ currentTime: t, duration });
+    };
+    const onVideoError = (e) => {
+        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 = () => {
+        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 = 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) => {
+            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 (_jsxs(View, { style: [styles.wrap, styles.center], children: [_jsx(Ionicons, { name: "alert-circle-outline", size: 40, color: "#ff6b6b" }), _jsx(Text, { style: styles.errorText, children: error }), _jsx(Text, { style: styles.errorHint, children: "Use \"Download & Play\" instead." })] }));
+    }
+    return (_jsxs(View, { style: [styles.wrap, fullscreen && styles.fullscreen], children: [sourceUri ? (_jsx(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 }) => {
+                    if (mountedRef.current)
+                        setBuffering(!!isBuffering);
+                }, onProgress: onVideoProgress, onError: onVideoError, onEnd: onVideoEnd })) : null, loading && (_jsxs(View, { style: styles.centerBadge, pointerEvents: "none", children: [_jsx(ActivityIndicator, { color: "#e50914", size: "large" }), _jsx(Text, { style: styles.loadingText, children: "Starting stream\u2026" })] })), _jsx(SubtitleDisplay, { cue: activeCue, enabled: subtitlesOn, fontSize: subFontSize }), subtitlesOn && subtitleError && !cues.length && (_jsx(View, { pointerEvents: "none", style: styles.subErrorWrap, children: _jsxs(Text, { style: styles.subErrorText, children: [subtitleError, " \u00B7 ", activeTrack?.lang ?? "no track"] }) })), _jsx(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 })] }));
+});
+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",
+    },
+});

package/dist/{Player/playerweb → player}/PlayerControls.d.ts

@@ -1,4 +1,4 @@
-export type PlayerControlsWebProps = {
+export type PlayerControlsProps = {
     playing: boolean;
     buffering: boolean;
     currentTime: number;
@@ -28,18 +28,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;
@@ -49,4 +37,4 @@ export type PlayerControlsWebProps = {
     onVolume: (v: number) => void;
     onFullscreen: () => void;
 };
-export declare function PlayerControlsWeb(props: PlayerControlsWebProps): import("react").JSX.Element;
+export declare function PlayerControls(props: PlayerControlsProps): import("react").JSX.Element;