mega-stream-proxy 0.1.9 → 0.2.0

package/dist/player/PlayerControls.js

@@ -0,0 +1,289 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { ActivityIndicator, PanResponder, StyleSheet, Text, TouchableOpacity, View, } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+const fmt = (s) => {
+    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) => Math.min(1, Math.max(0, v));
+export function PlayerControls(props) {
+    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(null);
+    const [volW, setVolW] = useState(0);
+    const [subOpen, setSubOpen] = useState(false);
+    const [subTab, setSubTab] = useState("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 (_jsxs(View, { style: styles.root, children: [_jsx(TouchableOpacity, { style: StyleSheet.absoluteFill, activeOpacity: 1, onPress: onToggleVisible }), buffering && (_jsx(View, { style: styles.centerBadge, pointerEvents: "none", children: _jsx(ActivityIndicator, { color: "#e50914", size: "large" }) })), visible && (_jsxs(_Fragment, { children: [_jsxs(View, { style: [styles.bar, styles.top], pointerEvents: "box-none", children: [!!title && (_jsx(Text, { numberOfLines: 1, style: styles.title, children: title })), _jsx(TouchableOpacity, { onPress: onToggleMute, hitSlop: 8, children: _jsx(Ionicons, { name: muted ? "volume-mute" : "volume-high", size: 20, color: "#fff" }) })] }), _jsxs(View, { style: styles.centerRow, pointerEvents: "box-none", children: [_jsx(TouchableOpacity, { style: styles.skipBtn, onPress: () => onSkip(-10), children: _jsx(Ionicons, { name: "play-back", size: 30, color: "#fff" }) }), _jsx(TouchableOpacity, { style: styles.ppBtn, onPress: onPlayPause, children: _jsx(Ionicons, { name: buffering ? "ellipsis-horizontal" : playing ? "pause" : "play", size: 38, color: "#fff" }) }), _jsx(TouchableOpacity, { style: styles.skipBtn, onPress: () => onSkip(10), children: _jsx(Ionicons, { name: "play-forward", size: 30, color: "#fff" }) })] }), _jsxs(View, { style: [styles.bar, styles.bottom], pointerEvents: "box-none", children: [_jsx(Text, { style: styles.time, children: fmt(scrubPct !== null ? scrubPct * duration : currentTime) }), _jsxs(View, { style: styles.trackWrap, onLayout: (e) => setTrackW(e.nativeEvent.layout.width), ...pan.panHandlers, children: [_jsxs(View, { style: styles.track, children: [loadProgress != null && loadProgress > 0 && (_jsx(View, { style: [
+                                                    styles.loadLine,
+                                                    { width: `${clamp01(loadProgress) * 100}%` },
+                                                ] })), introRegion && duration > 0 && introRegion[1] > introRegion[0] && (_jsx(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] && (_jsx(View, { style: [
+                                                    styles.outroHighlight,
+                                                    {
+                                                        left: `${clamp01(outroRegion[0] / duration) * 100}%`,
+                                                        width: `${clamp01((outroRegion[1] - outroRegion[0]) / duration) * 100}%`,
+                                                    },
+                                                ] })), _jsx(View, { style: [styles.fill, { width: `${shownPct * 100}%` }] })] }), _jsx(View, { style: [
+                                            styles.thumb,
+                                            { left: `${shownPct * 100}%` },
+                                            scrubPct === null && styles.thumbIdle,
+                                        ] })] }), _jsx(Text, { style: styles.time, children: fmt(duration) }), _jsx(TouchableOpacity, { style: [styles.ccBtn, subtitlesOn && styles.ccBtnOn], onPress: onToggleSubtitles, hitSlop: 6, children: _jsx(Text, { style: [styles.ccText, subtitlesOn && styles.ccTextOn], children: "CC" }) }), hasSubs ? (_jsxs(View, { style: styles.subWrap, children: [_jsxs(TouchableOpacity, { style: [styles.langBtn, subtitlesOn && styles.langBtnOn], onPress: () => setSubOpen((v) => !v), hitSlop: 6, children: [_jsx(Text, { style: [styles.ccText, subtitlesOn && styles.ccTextOn], children: subLang }), _jsx(Ionicons, { name: subOpen ? "chevron-up" : "chevron-down", size: 12, color: subtitlesOn ? "#fff" : "#9aa0aa" })] }), subOpen ? (_jsxs(View, { style: styles.subMenu, children: [_jsxs(View, { style: styles.subTabs, children: [_jsx(TouchableOpacity, { style: [styles.subTab, subTab === "lang" && styles.subTabOn], onPress: () => setSubTab("lang"), children: _jsx(Text, { style: [styles.subTabText, subTab === "lang" && styles.subTabTextOn], children: "Language" }) }), _jsx(TouchableOpacity, { style: [styles.subTab, subTab === "size" && styles.subTabOn], onPress: () => setSubTab("size"), children: _jsx(Text, { style: [styles.subTabText, subTab === "size" && styles.subTabTextOn], children: "Text Size" }) })] }), subTab === "lang" ? (_jsx(View, { style: styles.subBody, children: subtitleTracks?.map((lang) => {
+                                                    const active = lang === subtitleTrack;
+                                                    return (_jsxs(TouchableOpacity, { style: [styles.subItem, active && styles.subItemOn], onPress: () => {
+                                                            setSubOpen(false);
+                                                            onSelectSubtitleTrack?.(lang);
+                                                        }, children: [_jsx(Text, { style: [styles.subItemText, active && styles.subItemTextOn], children: lang }), active ? (_jsx(Ionicons, { name: "checkmark", size: 14, color: "#fff" })) : null] }, lang));
+                                                }) })) : (_jsxs(View, { style: styles.subBody, children: [_jsxs(View, { style: styles.sizeRow, children: [_jsx(TouchableOpacity, { style: styles.sizeBtn, onPress: () => onChangeSubtitleFontSize?.(Math.max(SIZE_MIN, Math.round((subtitleFontSize ?? 14) - 2))), children: _jsx(Ionicons, { name: "remove", size: 16, color: "#fff" }) }), _jsx(View, { style: [
+                                                                    styles.sizeTrack,
+                                                                    { opacity: onChangeSubtitleFontSize ? 1 : 0.5 },
+                                                                ], onLayout: (e) => setSizeW(e.nativeEvent.layout.width), ...sizePan.panHandlers, children: _jsx(View, { style: [styles.sizeFill, { width: `${sizePct * 100}%` }] }) }), _jsx(TouchableOpacity, { style: styles.sizeBtn, onPress: () => onChangeSubtitleFontSize?.(Math.min(SIZE_MAX, Math.round((subtitleFontSize ?? 14) + 2))), children: _jsx(Ionicons, { name: "add", size: 16, color: "#fff" }) })] }), _jsxs(Text, { style: styles.sizeLabel, children: [currentSize, "px"] })] }))] })) : null] })) : null, _jsx(TouchableOpacity, { onPress: onToggleMute, hitSlop: 6, children: _jsx(Ionicons, { name: volIcon, size: 17, color: "#fff" }) }), _jsx(View, { style: styles.volTrackWrap, onLayout: (e) => setVolW(e.nativeEvent.layout.width), ...volPan.panHandlers, children: _jsx(View, { style: styles.volTrack, children: _jsx(View, { style: [styles.volFill, { width: `${volPct * 100}%` }] }) }) }), _jsx(TouchableOpacity, { onPress: onFullscreen, hitSlop: 8, children: _jsx(Ionicons, { name: "expand", size: 18, color: "#fff" }) })] })] })), visible && inIntro && (_jsx(TouchableOpacity, { style: styles.skipRegionBtn, onPress: onSkipIntro, children: _jsx(Text, { style: styles.skipRegionText, children: "Skip Intro \u203A" }) })), visible && inOutro && (_jsx(TouchableOpacity, { style: styles.skipRegionBtn, onPress: onSkipOutro, children: _jsx(Text, { style: styles.skipRegionText, children: "Skip Outro \u203A" }) }))] }));
+}
+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/dist/{Player/playerweb → player}/SubtitleDisplay.d.ts

@@ -1,4 +1,4 @@
-export type SubCueShapeWeb = {
+export type SubCueShape = {
     start: number;
     end: number;
     text: string;
@@ -8,8 +8,8 @@ export type SubCueShapeWeb = {
  * absolutely with zIndex 1 (below the controls at zIndex 2, above the
  * video background at zIndex 0).
  */
-export declare function SubtitleDisplayWeb({ cue, enabled, fontSize, }: {
-    cue: SubCueShapeWeb | null;
+export declare function SubtitleDisplay({ cue, enabled, fontSize, }: {
+    cue: SubCueShape | null;
     enabled: boolean;
     fontSize: number;
 }): import("react").JSX.Element | null;

package/dist/{Player/playerweb → player}/SubtitleDisplay.js

@@ -5,7 +5,7 @@ import { StyleSheet, Text, View } from "react-native";
  * absolutely with zIndex 1 (below the controls at zIndex 2, above the
  * video background at zIndex 0).
  */
-export function SubtitleDisplayWeb({ cue, enabled, fontSize, }) {
+export function SubtitleDisplay({ cue, enabled, fontSize, }) {
     if (!enabled || !cue?.text)
         return null;
     return (_jsx(View, { pointerEvents: "none", style: styles.wrap, children: _jsx(Text, { style: [styles.text, { fontSize, lineHeight: fontSize * 1.35 }], children: cue.text }) }));

package/dist/player/index.d.ts

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

package/dist/player/index.js

@@ -0,0 +1,3 @@
+export { MegaVideoPlayer, } from "./MegaVideoPlayer.js";
+export { PlayerControls } from "./PlayerControls.js";
+export { SubtitleDisplay } from "./SubtitleDisplay.js";

package/dist/{Player/playerweb/MegaVideoPlayer.d.ts → playerweb/MegaVideoPlayerWeb.d.ts}

@@ -1,6 +1,6 @@
 import React from "react";
-import { type SubCue, type SubtitleFormat, type SubtitleTrack } from "../../subtitles/index.js";
-export type MegaVideoPlayerWebProps = {
+import { 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. */
@@ -18,14 +18,6 @@ export type MegaVideoPlayerWebProps = {
     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;
@@ -34,10 +26,8 @@ export type MegaVideoPlayerWebProps = {
         duration: number;
     }) => void;
     onFullscreenChange?: (fullscreen: boolean) => void;
-    width?: number;
-    height?: number;
 };
-type MegaVideoPlayerWebState = {
+type MegaVideoPlayerState = {
     playing: boolean;
     buffering: boolean;
     loading: boolean;
@@ -52,10 +42,8 @@ type MegaVideoPlayerWebState = {
     subtitleError: string | null;
     error: string | null;
     fullscreen: boolean;
-    width?: number;
-    height?: number;
 };
-export declare class MegaVideoPlayerWeb extends React.Component<MegaVideoPlayerWebProps, MegaVideoPlayerWebState> {
+export declare class MegaVideoPlayer extends React.Component<MegaVideoPlayerProps, MegaVideoPlayerState> {
     private player;
     private subs;
     private hideTimer;
@@ -64,9 +52,9 @@ export declare class MegaVideoPlayerWeb extends React.Component<MegaVideoPlayerW
     private subTrackIdx;
     private tracks;
     private sourceIndexRef;
-    constructor(props: MegaVideoPlayerWebProps);
+    constructor(props: MegaVideoPlayerProps);
     componentDidMount(): void;
-    componentDidUpdate(prevProps: MegaVideoPlayerWebProps): void;
+    componentDidUpdate(prevProps: MegaVideoPlayerProps): void;
     componentWillUnmount(): void;
     /** Loads a new playable URL into the player. */
     add(source: string, opts?: {

package/dist/{Player/playerweb/MegaVideoPlayer.js → playerweb/MegaVideoPlayerWeb.js}

@@ -10,9 +10,10 @@ import React from "react";
 import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
 import { createVideoPlayer, VideoView } from "expo-video";
 import { Ionicons } from "@expo/vector-icons";
-import { PlayerControlsWeb } from "./PlayerControls.js";
-import { loadSubtitles, } from "../../subtitles/index.js";
-export class MegaVideoPlayerWeb extends React.Component {
+import { PlayerControls } from "./PlayerControlsWeb.js";
+import { SubtitleDisplay } from "./SubtitleDisplayWeb.js";
+import { loadSubtitles, } from "../subtitles/index.js";
+export class MegaVideoPlayer extends React.Component {
     player;
     subs = [];
     hideTimer = null;
@@ -38,8 +39,6 @@ export class MegaVideoPlayerWeb extends React.Component {
             subtitleError: null,
             error: null,
             fullscreen: false,
-            width: this.props.width,
-            height: this.props.height,
         };
         this.player = createVideoPlayer(null);
         this.player.loop = false;
@@ -291,19 +290,15 @@ export class MegaVideoPlayerWeb extends React.Component {
         if (s.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: s.error }), _jsx(Text, { style: styles.errorHint, children: "Use \"Download & Play\" instead." })] }));
         }
-        return (_jsxs(View, { style: [
-                styles.wrap,
-                { width: this.state.width, height: this.state.height },
-                s.fullscreen && styles.fullscreen,
-            ], children: [_jsx(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 && (_jsxs(View, { style: [styles.centerBadge, { width: this.state.width }], pointerEvents: "none", children: [_jsx(ActivityIndicator, { color: "#e50914", size: "large" }), _jsx(Text, { style: styles.loadingText, children: "Starting stream\u2026" })] })), s.subtitlesOn && s.subtitleError && !s.cues.length && (_jsx(View, { pointerEvents: "none", style: styles.subErrorWrap, children: _jsxs(Text, { style: styles.subErrorText, children: [s.subtitleError, " \u00B7 ", activeTrack?.lang ?? "no track"] }) })), _jsx(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 })] }));
+        return (_jsxs(View, { style: [styles.wrap, s.fullscreen && styles.fullscreen], children: [_jsx(View, { style: {
+                        width: "100%",
+                        height: "100%",
+                        justifyContent: "center",
+                        alignItems: "center",
+                    }, children: _jsx(VideoView, { player: this.player, style: {
+                            width: "100%",
+                            height: "auto",
+                        }, nativeControls: false, contentFit: "contain" }) }), s.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: s.subtitlesOn, fontSize: s.subFontSize }), s.subtitlesOn && s.subtitleError && !s.cues.length && (_jsx(View, { pointerEvents: "none", style: styles.subErrorWrap, children: _jsxs(Text, { style: styles.subErrorText, children: [s.subtitleError, " \u00B7 ", activeTrack?.lang ?? "no track"] }) })), _jsx(PlayerControls, { 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, onToggleVisible: this.toggleControls, onPlayPause: this.playPause, onSkip: this.skip, onSeek: this.seek, onToggleMute: this.toggleMute, onToggleSubtitles: this.toggleSubtitles, onVolume: this.changeVolume, onFullscreen: this.enterFullscreen })] }));
     }
 }
 const styles = StyleSheet.create({
@@ -364,5 +359,10 @@ const styles = StyleSheet.create({
         paddingVertical: 4,
         borderRadius: 4,
         overflow: "hidden",
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
     },
 });

package/dist/{Player/playerAndroid/PlayerControlsAndroid.d.ts → playerweb/PlayerControlsWeb.d.ts}

@@ -1,4 +1,4 @@
-export type PlayerControlsAndroidProps = {
+export type PlayerControlsProps = {
     playing: boolean;
     buffering: boolean;
     currentTime: number;
@@ -21,14 +21,6 @@ export type PlayerControlsAndroidProps = {
     /** 0..1 — how much of the whole merged episode has been downloaded. Renders
      *  a second, thinner line under the playhead track. */
     loadProgress?: number;
-    /** resolution labels in display order — the FIRST is the default source
-     *  (usually "HD: <url>"), e.g. ["Default", "1080p", "720p"]. Shown in the
-     *  settings popup. */
-    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;
     /** [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];
@@ -44,11 +36,5 @@ export type PlayerControlsAndroidProps = {
     onToggleSubtitles: () => void;
     onVolume: (v: number) => void;
     onFullscreen: () => void;
-    /** current fullscreen state — switches the expand/contract icon */
-    fullscreen?: boolean;
-    /** any user interaction with the bar/menus — reset the auto-hide timer */
-    onInteract?: () => void;
-    width?: number;
-    height?: number;
 };
-export declare function PlayerControlsAndroid(props: PlayerControlsAndroidProps): import("react").JSX.Element;
+export declare function PlayerControls(props: PlayerControlsProps): import("react").JSX.Element;