mega-stream-proxy 0.1.9 → 0.2.0

package/src/{Player/playerweb → player}/SubtitleDisplay.tsx

@@ -1,18 +1,18 @@
 import { StyleSheet, Text, View } from "react-native";
 
-export type SubCueShapeWeb = { start: number; end: number; text: string };
+export type SubCueShape = { 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).
  */
-export function SubtitleDisplayWeb({
+export function SubtitleDisplay({
   cue,
   enabled,
   fontSize,
 }: {
-  cue: SubCueShapeWeb | null;
+  cue: SubCueShape | null;
   enabled: boolean;
   fontSize: number;
 }) {

package/src/player/index.ts

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

package/src/{Player/playerweb/MegaVideoPlayer.tsx → playerweb/MegaVideoPlayerWeb.tsx}

@@ -11,18 +11,19 @@ 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 { PlayerControls } from "./PlayerControlsWeb.js";
+import { SubtitleDisplay } from "./SubtitleDisplayWeb.js";
 import {
   loadSubtitles,
   type SubCue,
   type SubtitleFormat,
   type SubtitleTrack,
-} from "../../subtitles/index.js";
+} from "../subtitles/index.js";
 
 /** expo-video listener subscriptions just need `remove()`. */
 type EventSubscriptionLike = { remove(): void };
 
-export type MegaVideoPlayerWebProps = {
+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. */
@@ -40,24 +41,14 @@ 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;
   onProgress?: (info: { currentTime: number; duration: number }) => void;
   onFullscreenChange?: (fullscreen: boolean) => void;
-  width?: number;
-  height?: number;
 };
 
-type MegaVideoPlayerWebState = {
+type MegaVideoPlayerState = {
   playing: boolean;
   buffering: boolean;
   loading: boolean;
@@ -72,13 +63,11 @@ type MegaVideoPlayerWebState = {
   subtitleError: string | null;
   error: string | null;
   fullscreen: boolean;
-  width?: number;
-  height?: number;
 };
 
-export class MegaVideoPlayerWeb extends React.Component<
-  MegaVideoPlayerWebProps,
-  MegaVideoPlayerWebState
+export class MegaVideoPlayer extends React.Component<
+  MegaVideoPlayerProps,
+  MegaVideoPlayerState
 > {
   private player: VideoPlayer;
   private subs: EventSubscriptionLike[] = [];
@@ -89,7 +78,7 @@ export class MegaVideoPlayerWeb extends React.Component<
   private tracks: SubtitleTrack[] = [];
   private sourceIndexRef = 0;
 
-  constructor(props: MegaVideoPlayerWebProps) {
+  constructor(props: MegaVideoPlayerProps) {
     super(props);
     this.state = {
       playing: false,
@@ -106,8 +95,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);
@@ -193,7 +180,7 @@ export class MegaVideoPlayerWeb extends React.Component<
     }
   }
 
-  componentDidUpdate(prevProps: MegaVideoPlayerWebProps) {
+  componentDidUpdate(prevProps: MegaVideoPlayerProps) {
     if (this.props.uri !== prevProps.uri && this.props.uri) {
       this.sourceIndexRef = Math.max(
         0,
@@ -411,39 +398,38 @@ export class MegaVideoPlayerWeb extends React.Component<
     }
 
     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}
-        />
+      <View style={[styles.wrap, s.fullscreen && styles.fullscreen]}>
+        <View
+          style={{
+            width: "100%",
+            height: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <VideoView
+            player={this.player}
+            style={{
+              width: "100%",
+              height: "auto",
+            }}
+            nativeControls={false}
+            contentFit="contain"
+          />
+        </View>
 
         {s.loading && (
-          <View
-            style={[styles.centerBadge, { width: this.state.width }]}
-            pointerEvents="none"
-          >
+          <View style={styles.centerBadge} pointerEvents="none">
             <ActivityIndicator color="#e50914" size="large" />
             <Text style={styles.loadingText}>Starting stream…</Text>
           </View>
         )}
 
+        <SubtitleDisplay
+          cue={activeCue}
+          enabled={s.subtitlesOn}
+          fontSize={s.subFontSize}
+        />
         {s.subtitlesOn && s.subtitleError && !s.cues.length && (
           <View pointerEvents="none" style={styles.subErrorWrap}>
             <Text style={styles.subErrorText}>
@@ -452,7 +438,7 @@ export class MegaVideoPlayerWeb extends React.Component<
           </View>
         )}
 
-        <PlayerControlsWeb
+        <PlayerControls
           playing={s.playing}
           buffering={s.buffering}
           currentTime={s.currentTime}
@@ -467,9 +453,6 @@ export class MegaVideoPlayerWeb extends React.Component<
           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}
@@ -478,11 +461,6 @@ export class MegaVideoPlayerWeb extends React.Component<
           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>
     );
@@ -547,5 +525,10 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
     borderRadius: 4,
     overflow: "hidden",
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
   },
 });