@cinecrew/cinecrew-player 0.1.3 → 0.1.5

package/src/native/MediaPlayerView.js

@@ -15,7 +15,6 @@ import {
 import VLCPlayer from '../../packages/react-native-vlc-media-player/VLCPlayer.js';
 import { WebVideoPlayer } from './media/WebVideoPlayer';
 import { ElectronVideoPlayer } from './media/ElectronVideoPlayer';
-import { YouTubeVideoPlayer } from './media/YouTubeVideoPlayer';
 import { LiveChatDrawer } from './media/LiveChatDrawer';
 import { LiveRecordingNotice, LiveRecordingOverlay } from './media/LiveRecordingOverlay';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -23,6 +22,8 @@ import { PlayerIcon } from './customization';
 import { isWeb, isAndroid, isElectron } from '../utils/runtimePlatform';
 import { getFontSize, getFontWeight } from '../utils/layoutUtils';
 import { isLocalMediaUri } from '../utils/mediaUtils';
+import { invokePlayerAction } from '../utils/invokePlayerAction.js';
+import { emitProgressBarTime } from '../utils/progressBarTime.js';
 import {
   USER_AGENT,
   calculateScreenAspectRatio,
@@ -69,6 +70,17 @@ function pickShuffleCandidate(candidates, season, episode) {
   return candidates[(hash >>> 0) % candidates.length];
 }
 
+function normalizeAspectOptions(values) {
+  if (!Array.isArray(values) || values.length === 0) return ASPECT_OPTIONS;
+  const unique = new Map();
+  values.forEach((item) => {
+    const value = typeof item === 'string' ? item : item?.value;
+    if (!value || typeof value !== 'string') return;
+    unique.set(value, { value, label: typeof item === 'string' ? item : item.label || value });
+  });
+  return unique.size ? [...unique.values()] : ASPECT_OPTIONS;
+}
+
 // Gesture events can arrive much faster than the native player can consume
 // volume updates. Coalesce them to display-rate updates for the UI and a
 // slower native volume cadence so a drag stays smooth without audio crackle.
@@ -204,49 +216,16 @@ function handleVerticalGestureMove(touches, gestureState) {
   gestureState.commitVolume.current(volume);
 }
 
-function handleYouTubePlaybackState(state, playback) {
-  if (state === 'playing') {
-    playback.isPlayingRef.current = true;
-    playback.setIsPlaying(true);
-  } else if (state === 'paused' || state === 'ended') {
-    playback.isPlayingRef.current = false;
-    playback.setIsPlaying(false);
-  }
-}
-
 function PlatformMediaSurface(props) {
   const {
-    youtubeVideoId, playerStreamUrl, vlcRef, isPlaying, muted, videoOnlyMode,
+    playerStreamUrl, vlcRef, isPlaying, muted, videoOnlyMode,
     volume, playbackRate, aspectRatio, title, posterUrl, isLive, isAudioOnly,
     selectedAudioTrack, handleTracksChanged, handleProgress, handleNativePlaying,
     handleWebBuffering, handleEpisodeEnded, handleWebError, togglePlayPause,
     handleSeekByAction, handlePlaybackRoute, exoFallback, useExoForAndroidLocalMedia,
     nativeSource, computedAspectRatio, handleNativeLoadStart,
-    handleNativeOpen, handleNativeBuffering, isPlayingRef, setIsPlaying,
+    handleNativeOpen, handleNativeBuffering,
   } = props;
-  if (youtubeVideoId) {
-    return (
-      <YouTubeVideoPlayer
-        key={`youtube-${youtubeVideoId}`}
-        ref={vlcRef}
-        videoId={youtubeVideoId}
-        paused={!isPlaying}
-        muted={muted || videoOnlyMode}
-        volume={volume / 100}
-        playbackRate={playbackRate}
-        onReady={(event) => {
-          props.clearBufferingIndicator();
-          props.handleNativeOpen(event);
-        }}
-        onProgress={handleProgress}
-        onPlaying={handleNativePlaying}
-        onStateChange={(state) => handleYouTubePlaybackState(state, { isPlayingRef, setIsPlaying })}
-        onBuffering={handleWebBuffering}
-        onEnded={handleEpisodeEnded}
-        onError={handleWebError}
-      />
-    );
-  }
   if (isElectron()) {
     return (
       <ElectronVideoPlayer
@@ -590,7 +569,7 @@ function FullscreenControlsPanel(props) {
         duration={props.duration}
         isAudioOnlyFeatureEnabled={props.isAudioOnlyFeatureEnabled}
         isAudioOnly={props.isAudioOnly}
-        isVideoOnly={props.videoOnlyMode}
+        aspectRatios={props.aspectRatios}
         controls={props.controls}
         showAspectPicker={props.showAspectPicker}
         aspectRatio={props.aspectRatio}
@@ -611,7 +590,6 @@ function FullscreenControlsPanel(props) {
         onToggleAudioPicker={props.onToggleAudioPicker}
         onSelectAudioTrack={props.handleAudioTrackAction}
         onToggleFullscreen={props.handleFullscreenAction}
-        onToggleVideoOnly={props.handleVideoOnlyAction}
       />
     </>
   );
@@ -695,9 +673,10 @@ function FullscreenChatLayer(props) {
 }
 
 function FullscreenRecordingLayer(props) {
+  const recordingEligible = props.isLive;
   return (
     <>
-      {!props.isAudioOnly && props.isLive && (props.isScreenRecorderEnabled || props.recStatus !== 'idle') ? (
+      {!props.isAudioOnly && recordingEligible && (props.isScreenRecorderEnabled || props.recStatus !== 'idle') ? (
         <LiveRecordingOverlay
           status={props.recStatus}
           elapsedMs={props.recElapsedMs}
@@ -709,7 +688,7 @@ function FullscreenRecordingLayer(props) {
           onStop={props.handleStopRecording}
         />
       ) : null}
-      {!props.isAudioOnly && props.isLive && props.isScreenRecorderEnabled ? (
+      {!props.isAudioOnly && recordingEligible && props.isScreenRecorderEnabled ? (
         <LiveRecordingNotice notice={props.recNotice} colors={props.colors} onDismiss={props.onDismissNotice} />
       ) : null}
     </>
@@ -761,7 +740,7 @@ function getInlinePreviewPositionStyle(rect, isValid) {
 export const MediaPlayerView = ({
   visible,
   streamUrl,
-  youtubeVideoId,
+  onBack,
   title,
   mediaType = 'live',
   onClose,
@@ -790,6 +769,9 @@ export const MediaPlayerView = ({
   liveChatNonce = 0,
   messagePageSize = 50,
   drawerStyle,
+  aspectRatios,
+  defaultAspectRatio = DEFAULT_ASPECT_RATIO,
+  onAspectRatioChange,
   genre,
   categoryName,
   controls = {},
@@ -805,6 +787,8 @@ export const MediaPlayerView = ({
   style,
   onReady,
   onProgress,
+  showProgressBar = true,
+  onProgressBarChange,
   onPlaying,
   onBuffering,
   onError,
@@ -830,12 +814,16 @@ export const MediaPlayerView = ({
   const vlcRef = useRef(null);
   const playerRef = useRef(null);
   const invokeAction = useCallback((name, fallback, payload) => {
-    const callback = actions?.[name];
-    if (typeof callback === 'function') {
-      return callback(payload, { player: playerApiRef?.current || null });
-    }
-    return fallback?.();
-  }, [actions, playerApiRef]);
+    let callback = actions?.[name];
+    if (name === 'onAspectRatioChange') callback = callback || onAspectRatioChange;
+    if (name === 'onBack') callback = callback || onBack || onClose;
+    return invokePlayerAction(
+      fallback,
+      callback,
+      payload,
+      { player: playerApiRef?.current || null },
+    );
+  }, [actions, onAspectRatioChange, onBack, onClose, playerApiRef]);
   const handlePlayerHostRef = useCallback((node) => {
     playerRef.current = node;
     onPlayerHostRef?.(node);
@@ -981,8 +969,9 @@ export const MediaPlayerView = ({
   useEffect(() => {
     isLockedRef.current = isLocked;
   }, [isLocked]);
-  const [aspectRatio, setAspectRatio] = useState(DEFAULT_ASPECT_RATIO);
-  const aspectRatioRef = useRef(DEFAULT_ASPECT_RATIO);
+  const [aspectRatio, setAspectRatio] = useState(defaultAspectRatio || DEFAULT_ASPECT_RATIO);
+  const aspectRatioRef = useRef(defaultAspectRatio || DEFAULT_ASPECT_RATIO);
+  const aspectOptions = useMemo(() => normalizeAspectOptions(aspectRatios), [aspectRatios]);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   const [audioTracks, setAudioTracks] = useState([]);
@@ -1112,7 +1101,7 @@ export const MediaPlayerView = ({
       let targetRatio = val;
       if (val === 'FIT') {
         targetRatio = 'FIT';
-      } else if (val === 'FILL_SCREEN') {
+      } else if (val === 'FILL_SCREEN' || val === 'FILL') {
         targetRatio = calculateScreenAspectRatio(windowWidth, windowHeight);
       }
 
@@ -1148,6 +1137,7 @@ export const MediaPlayerView = ({
   const isSeeking = useRef(false);
   const bufferingTimerRef = useRef(null);
   const seekCompletedAt = useRef(0);
+  const lastProgressBarSecondRef = useRef(null);
   const lastKnownTimeRef = useRef(0);
   const lastKnownDurRef = useRef(Number(durationSecs) || 0);
   const hasResumedRef = useRef(false);
@@ -1190,6 +1180,11 @@ export const MediaPlayerView = ({
 
   const isLive = mediaType === 'live' || mediaType === 'channel';
   const isInlinePreview = !!inlinePreview;
+  const progressBarVisible = showProgressBar !== false
+    && controls.seek !== false
+    && !isLive
+    && !isInlinePreview;
+  const progressBarCallback = progressBarVisible ? onProgressBarChange : undefined;
 
   useEffect(() => {
     if (!visible || !initialShowLiveChat || !isLive || !isLiveCommentsEnabled) return;
@@ -1336,6 +1331,7 @@ export const MediaPlayerView = ({
     setIsPlaying(!initialPaused);
     isPlayingRef.current = !initialPaused;
     setVideoOnlyMode(!!videoOnly);
+    lastProgressBarSecondRef.current = null;
     setPlaybackUrl(streamUrl || '');
     setIsLocked(false);
     setIsAudioOnly(!!initialAudioOnly);
@@ -1374,14 +1370,14 @@ export const MediaPlayerView = ({
   // Reset aspect ratio & zoom state every time player opens or streamUrl changes
   useEffect(() => {
     if (visible) {
-      setAspectRatio(DEFAULT_ASPECT_RATIO);
-      aspectRatioRef.current = DEFAULT_ASPECT_RATIO;
+      setAspectRatio(defaultAspectRatio || DEFAULT_ASPECT_RATIO);
+      aspectRatioRef.current = defaultAspectRatio || DEFAULT_ASPECT_RATIO;
       setZoomScale(1);
       zoomScaleRef.current = 1;
       setZoomBadgeText('');
       setSeekRipple(null);
     }
-  }, [visible, streamUrl]);
+  }, [visible, streamUrl, defaultAspectRatio]);
 
   // Auto-hide controls 4 seconds after inactivity
   const scheduleHide = useCallback(() => {
@@ -1455,9 +1451,9 @@ export const MediaPlayerView = ({
 
   const handleBackAction = useCallback(() => invokeAction(
     'onBack',
-    handleClose,
+    undefined,
     { title, streamUrl, mediaId },
-  ), [invokeAction, handleClose, title, streamUrl, mediaId]);
+  ), [invokeAction, title, streamUrl, mediaId]);
 
   useEffect(() => {
     if (!visible || isWeb()) return undefined;
@@ -1575,8 +1571,9 @@ export const MediaPlayerView = ({
     setSliderPos(0);
     lastKnownTimeRef.current = 0;
     seekCompletedAt.current = Date.now();
+    emitProgressBarTime(0, progressBarCallback, lastProgressBarSecondRef, { force: true });
     if (!showControls) setShowControls(true);
-  }, [showControls]);
+  }, [progressBarCallback, showControls]);
 
   // Episode finished: auto-advance to the next episode (sequential) or to a
   // random episode (shuffle mode). Last episode in the playlist stops playback.
@@ -1775,6 +1772,7 @@ export const MediaPlayerView = ({
       lastKnownTimeRef,
       setSliderPosition: setSliderPos,
     });
+    if (progress) emitProgressBarTime(progress.seconds, progressBarCallback, lastProgressBarSecondRef);
   };
 
   const handleNativeOpen = (event) => {
@@ -1882,10 +1880,14 @@ export const MediaPlayerView = ({
       setSliderPos(target);
       seekCompletedAt.current = Date.now();
       debouncedSaveProgress();
+      emitProgressBarTime(target, progressBarCallback, lastProgressBarSecondRef, { force: true });
     }, { seconds: Number(seconds) || 0, currentTime: lastKnownTimeRef.current },
-  ), [invokeAction, handleSeekTo, debouncedSaveProgress]);
+  ), [invokeAction, handleSeekTo, debouncedSaveProgress, progressBarCallback]);
   const handleSeekByAction = (deltaSeconds) => invokeAction(
-    'onSeek', () => handleSeekBy(deltaSeconds), { deltaSeconds: Number(deltaSeconds) || 0, currentTime: lastKnownTimeRef.current },
+    'onSeek', () => {
+      handleSeekBy(deltaSeconds);
+      emitProgressBarTime(lastKnownTimeRef.current, progressBarCallback, lastProgressBarSecondRef, { force: true });
+    }, { deltaSeconds: Number(deltaSeconds) || 0, currentTime: lastKnownTimeRef.current },
   );
   const handleMuteAction = useCallback(() => invokeAction(
     'onMute', toggleMute, { muted: !mutedRef.current },
@@ -1912,14 +1914,17 @@ export const MediaPlayerView = ({
     event?.stopPropagation?.();
     return invokeAction(name, fallback, { title, streamUrl, mediaId });
   }, [invokeAction, title, streamUrl, mediaId]);
-  const handlePanelAction = useCallback((tab) => invokeAction(
-    getPanelActionName(tab),
-    () => {
-      if (showLiveChat && drawerTab === tab) setShowLiveChat(false);
-      else { setDrawerTab(tab); setShowLiveChat(true); }
-    },
-    { tab, isOpen: showLiveChat && drawerTab === tab },
-  ), [invokeAction, showLiveChat, drawerTab]);
+  const handlePanelAction = useCallback((tab) => {
+    const isOpen = !(showLiveChat && drawerTab === tab);
+    return invokeAction(
+      getPanelActionName(tab),
+      () => {
+        if (isOpen) { setDrawerTab(tab); setShowLiveChat(true); }
+        else setShowLiveChat(false);
+      },
+      { tab, isOpen },
+    );
+  }, [invokeAction, showLiveChat, drawerTab]);
 
   useEffect(() => {
     if (!playerApiRef) return undefined;
@@ -1937,7 +1942,7 @@ export const MediaPlayerView = ({
       seekTo: handleSeekTo,
       seekBy: handleSeekBy,
       setPlaybackRate: (rate) => setPlaybackRate(clampNumber(rate, 0.25, 4, 1)),
-      back: handleClose,
+      back: handleBackAction,
       getVideoElement: () => vlcRef.current?.getVideoElement?.() || null,
       getAudioTracks: () => audioTracks,
     };
@@ -1945,7 +1950,7 @@ export const MediaPlayerView = ({
     return () => {
       for (const key of Object.keys(api)) delete playerApiRef.current[key];
     };
-  }, [playerApiRef, togglePlayPause, handleRestart, toggleMute, handleSelectAspectRatio, handleAudioSelect, handleSeekTo, handleSeekBy, handleClose, audioTracks]);
+  }, [playerApiRef, togglePlayPause, handleRestart, toggleMute, handleSelectAspectRatio, handleAudioSelect, handleSeekTo, handleSeekBy, handleBackAction, audioTracks]);
 
   const handleSpeedSelect = useCallback((speed) => invokeAction(
     'onPlaybackRateChange', () => {
@@ -2459,7 +2464,6 @@ export const MediaPlayerView = ({
 
   const videoPlayer = (
     <PlatformMediaSurface
-      youtubeVideoId={youtubeVideoId}
       playerStreamUrl={playerStreamUrl}
       vlcRef={vlcRef}
       isPlaying={isPlaying}
@@ -2488,11 +2492,8 @@ export const MediaPlayerView = ({
       computedAspectRatio={computedAspectRatio}
       handleNativeLoadStart={handleNativeLoadStart}
       handleNativeOpen={handleNativeOpen}
-      clearBufferingIndicator={clearBufferingIndicator}
       handleClose={handleClose}
       handleNativeBuffering={handleNativeBuffering}
-      isPlayingRef={isPlayingRef}
-      setIsPlaying={setIsPlaying}
     />
   );
   const isValidPreviewRect = isUsableInlinePreviewRect(inlinePreviewRect);
@@ -2568,7 +2569,7 @@ export const MediaPlayerView = ({
     isEpgEnabled,
     diagnosticsOverlayEnabled,
     muted,
-    controls,
+    controls: { ...controls, seek: progressBarVisible },
     onClose: handleBackAction,
     handleRecordingAction,
     handleStartRecording,
@@ -2591,6 +2592,7 @@ export const MediaPlayerView = ({
     videoOnlyMode,
     showAspectPicker,
     aspectRatio,
+    aspectRatios: aspectOptions,
     showSpeedPicker,
     playbackRate,
     showAudioPicker,

package/src/native/index.js

@@ -3,7 +3,7 @@ import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
 import { PlayerCustomizationProvider } from './customization';
 import { MediaPlayerView } from './MediaPlayerView';
 import { isElectron, isWeb } from '../utils/runtimePlatform';
-import { getYouTubeVideoId, useResolvedPlayerSource } from '../utils/sourceUtils';
+import { useResolvedPlayerSource } from '../utils/sourceUtils';
 
 function getRuntimePlatform() {
   if (isWeb()) return 'web';
@@ -50,8 +50,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
   const streamUrl = String(media.uri || media.url || '');
   const resolvedIsLive = isLive ?? media.isLive ?? (media.mediaType === 'live');
   const resolvedMediaType = mediaType || media.mediaType || (resolvedIsLive ? 'live' : 'movie');
-  const youtubeVideoId = getYouTubeVideoId(media);
-  const isVisible = visible ?? Boolean(streamUrl || youtubeVideoId);
+  const isVisible = visible ?? Boolean(streamUrl);
 
   React.useEffect(() => {
     if (resolution.error) props.onError?.(resolution.error);
@@ -75,11 +74,11 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
       ...metadata,
       visible: isVisible,
       streamUrl,
-      youtubeVideoId,
+      onBack,
       title: title || media.title || '',
       posterUrl: poster || posterUrl || media.poster || media.posterUrl || '',
       mediaType: resolvedMediaType,
-      onClose: onClose || onBack || (() => {}),
+      onClose: onClose || (() => {}),
       initialPaused: paused ?? initialPaused ?? !autoPlay,
       initialMuted: muted ?? initialMuted ?? false,
       initialAudioOnly: audioOnly,

package/src/native/media/LiveChatDrawer.js

@@ -124,7 +124,6 @@ function LiveChatPanel({
   messages,
   flatListRef,
   renderMessageItem,
-  hasMoreMessages,
   loadOlderMessages,
   loadingOlderMessages,
   chatError,
@@ -161,19 +160,16 @@ function LiveChatPanel({
           contentContainerStyle={styles.messagesList}
           showsVerticalScrollIndicator
           keyboardShouldPersistTaps="handled"
-          ListHeaderComponent={hasMoreMessages ? (
-            <TouchableOpacity
-              style={styles.loadMoreMessages}
-              onPress={loadOlderMessages}
-              disabled={loadingOlderMessages}
-              accessibilityRole="button"
-            >
-              {loadingOlderMessages ? <ActivityIndicator size="small" color="#00E5FF" /> : null}
-              <Text style={styles.loadMoreMessagesText}>
-                {loadingOlderMessages ? 'Loading older messages…' : 'See more messages'}
-              </Text>
-            </TouchableOpacity>
+          ListHeaderComponent={loadingOlderMessages ? (
+            <View style={styles.loadingOlderMessages}>
+              <ActivityIndicator size="small" color="#00E5FF" />
+              <Text style={styles.loadingOlderMessagesText}>Loading older messages…</Text>
+            </View>
           ) : null}
+          onScroll={(event) => {
+            if (event.nativeEvent.contentOffset.y <= 24) loadOlderMessages();
+          }}
+          scrollEventThrottle={16}
           ListEmptyComponent={<Text style={styles.epgStatusText}>No messages yet. Start the conversation.</Text>}
         />
       )}
@@ -670,7 +666,6 @@ export const LiveChatDrawer = ({
           messages={messages}
           flatListRef={flatListRef}
           renderMessageItem={renderMessageItem}
-          hasMoreMessages={hasMoreMessages}
           loadOlderMessages={loadOlderMessages}
           loadingOlderMessages={loadingOlderMessages}
           chatError={chatError}
@@ -994,22 +989,18 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     gap: 8,
   },
-  loadMoreMessages: {
-    minHeight: 40,
+  loadingOlderMessages: {
+    minHeight: 36,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 8,
-    paddingHorizontal: 14,
-    borderRadius: 12,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: 'rgba(0, 229, 255, 0.35)',
-    backgroundColor: 'rgba(0, 229, 255, 0.08)',
+    gap: 7,
+    paddingVertical: 6,
   },
-  loadMoreMessagesText: {
+  loadingOlderMessagesText: {
     color: '#00E5FF',
-    fontSize: 13,
-    fontWeight: '700',
+    fontSize: 12,
+    fontWeight: '600',
   },
   chatErrorText: {
     color: '#FF7A8A',

package/src/native/media/WebVideoPlayer.js

@@ -39,6 +39,9 @@ export const WebVideoPlayer = forwardRef(({
   const playbackErrorRef = useRef(onError);
   const onEndedRef = useRef(onEnded);
   const [activeUrl, setActiveUrl] = useState('');
+  const [corsMode, setCorsMode] = useState('anonymous');
+  const corsModeRef = useRef('anonymous');
+  corsModeRef.current = corsMode;
   pausedRef.current = paused;
   playbackRateRef.current = playbackRate;
   onPlaybackRouteRef.current = onPlaybackRoute;
@@ -126,6 +129,8 @@ export const WebVideoPlayer = forwardRef(({
       return undefined;
     }
     setActiveUrl(streamUrl);
+    setCorsMode('anonymous');
+    corsModeRef.current = 'anonymous';
     return undefined;
   }, [streamUrl]);
 
@@ -243,6 +248,7 @@ export const WebVideoPlayer = forwardRef(({
           muted={muted}
           playsInline
           controls={false}
+          crossOrigin={corsMode}
           style={videoStyle}
           onPlaying={() => {
             const video = videoRef.current;
@@ -280,6 +286,13 @@ export const WebVideoPlayer = forwardRef(({
             if (video && video.readyState >= 2) {
               return;
             }
+            // If we were trying anonymous CORS and it failed, retry without.
+            // Playback will work; recording will fall back to screen capture.
+            if (corsModeRef.current === 'anonymous') {
+              setCorsMode(undefined);
+              corsModeRef.current = undefined;
+              return;
+            }
             playbackErrorRef.current?.({
               message: mediaError?.message || 'Failed to load stream.',
               err: mediaError || e,

package/src/native/media/player/AudioOnlyView.js

@@ -48,23 +48,6 @@ function SoundWave({ isPlaying, isLandscape, accentColor }) {
   );
 }
 
-function AudioOnlyBackdrop({ posterUrl }) {
-  return (
-    <>
-      {posterUrl ? (
-        <Image
-          source={{ uri: posterUrl }}
-          style={[StyleSheet.absoluteFill, styles.audioOnlyBackdropImage]}
-          resizeMode="cover"
-          blurRadius={isWeb() ? 40 : 25}
-          pointerEvents="none"
-        />
-      ) : null}
-      <View style={styles.audioOnlyBackdropDim} pointerEvents="none" />
-    </>
-  );
-}
-
 function AudioOnlyBadge({ usesAudioProxy, palette, isLandscape }) {
   const message = usesAudioProxy
     ? 'Battery Saver Audio Mode • Screen can be locked'
@@ -101,10 +84,9 @@ export const AudioOnlyView = ({
   );
 
   return (
-    <View style={[styles.audioOnlyContainer, { backgroundColor: palette.backgroundColor }]} pointerEvents="auto">
-      <AudioOnlyBackdrop posterUrl={posterUrl} />
+    <View style={styles.audioOnlyContainer} pointerEvents="auto">
 
-      <View style={[styles.audioOnlyCard, isLandscape && styles.audioOnlyCardLandscape, { backgroundColor: palette.surfaceColor, borderColor: palette.accentColor }]} pointerEvents="auto">
+      <View style={[styles.audioOnlyCard, isLandscape && styles.audioOnlyCardLandscape, { borderColor: palette.accentColor }]} pointerEvents="auto">
         <AudioArtwork posterUrl={posterUrl} isLandscape={isLandscape} palette={palette} />
 
         <SoundWave isPlaying={isPlaying} isLandscape={isLandscape} accentColor={palette.accentColor} />
@@ -153,25 +135,6 @@ const styles = StyleSheet.create({
     zIndex: 50,
     elevation: 50,
   },
-  audioOnlyBackdropImage: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    width: '100%',
-    height: '100%',
-  },
-  audioOnlyBackdropDim: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    width: '100%',
-    height: '100%',
-    backgroundColor: 'rgba(7, 9, 14, 0.88)',
-  },
   audioOnlyCard: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -180,7 +143,7 @@ const styles = StyleSheet.create({
     maxWidth: 440,
     maxHeight: '92%',
     borderRadius: 20,
-    backgroundColor: 'rgba(15, 23, 42, 0.85)',
+    backgroundColor: '#0B1220',
     borderWidth: 1,
     borderColor: 'rgba(0, 229, 255, 0.25)',
     shadowColor: '#000',

package/src/native/media/player/PlayerBottomBar.js

@@ -21,7 +21,7 @@ function SeekControls({ isLive, controls, insets, scale, isSeeking, sliderPos, c
   );
 }
 
-function AspectRatioControl({ controls, open, aspectRatio, onToggle, onSelect }) {
+function AspectRatioControl({ controls, open, aspectRatio, aspectRatios = ASPECT_OPTIONS, onToggle, onSelect }) {
   const palette = usePlayerColors();
   if (controls.aspectRatio === false) return null;
   const selectedStyle = { backgroundColor: palette.surfaceColor, borderWidth: 1.5, borderColor: palette.accentColor };
@@ -29,7 +29,7 @@ function AspectRatioControl({ controls, open, aspectRatio, onToggle, onSelect })
     <View style={styles.speedButtonContainer}>
       {open ? <View style={[styles.speedPickerPopup, { right: 'auto', left: 0, backgroundColor: palette.surfaceColor, borderColor: palette.borderColor }]}>
         <Text style={[styles.speedPickerTitle, { color: palette.mutedColor }]}>Aspect Ratio</Text>
-        {ASPECT_OPTIONS.map((option) => {
+        {aspectRatios.map((option) => {
           const selected = aspectRatio === option.value;
           return <TouchableOpacity key={option.label} style={styles.speedOption} onPress={(event) => { event.stopPropagation(); onSelect(option.value); }} activeOpacity={0.7}>
             <PlayerIcon name="check" size={15} color={selected ? palette.accentColor : 'transparent'} />
@@ -50,12 +50,6 @@ function AudioOnlyModeControl({ isAudioOnly, onToggle }) {
   return <TouchableOpacity style={[styles.speedButton, { backgroundColor: palette.controlBackground }, selectedStyle]} onPress={(event) => { event.stopPropagation(); onToggle(); }} accessibilityLabel="Audio-Only Mode"><PlayerIcon name="headphones" size={18} color={isAudioOnly ? palette.accentColor : palette.controlColor} /></TouchableOpacity>;
 }
 
-function VideoOnlyControl({ isVideoOnly, onToggle }) {
-  const palette = usePlayerColors();
-  const selectedStyle = isVideoOnly ? { backgroundColor: palette.surfaceColor, borderWidth: 1.5, borderColor: palette.accentColor } : null;
-  return <TouchableOpacity style={[styles.speedButton, { backgroundColor: palette.controlBackground }, selectedStyle]} onPress={(event) => { event.stopPropagation(); onToggle?.(); }} accessibilityLabel={isVideoOnly ? 'Disable video-only mode' : 'Video only'}><PlayerIcon name="video" size={18} color={isVideoOnly ? palette.accentColor : palette.controlColor} /></TouchableOpacity>;
-}
-
 function SpeedControl({ enabled, open, playbackRate, onToggle, onSelect }) {
   const palette = usePlayerColors();
   if (!enabled) return null;
@@ -129,6 +123,7 @@ export const PlayerBottomBar = ({
   isAudioOnly,
   showAspectPicker,
   aspectRatio,
+  aspectRatios = ASPECT_OPTIONS,
   showSpeedPicker,
   playbackRate,
   showAudioPicker,
@@ -147,8 +142,6 @@ export const PlayerBottomBar = ({
   onSelectAudioTrack,
   onToggleFullscreen,
   controls = {},
-  isVideoOnly = false,
-  onToggleVideoOnly,
 }) => {
   return (
     <View
@@ -167,8 +160,7 @@ export const PlayerBottomBar = ({
       <View style={styles.bottomControlsRow} pointerEvents="box-none">
         <View style={styles.leftActionsContainer}>
           {isAudioOnlyFeatureEnabled && controls.audioOnly !== false ? <AudioOnlyModeControl isAudioOnly={isAudioOnly} onToggle={onToggleAudioOnly} /> : null}
-          <AspectRatioControl controls={controls} open={showAspectPicker} aspectRatio={aspectRatio} onToggle={onToggleAspectPicker} onSelect={onSelectAspectRatio} />
-          {controls.videoOnly ? <VideoOnlyControl isVideoOnly={isVideoOnly} onToggle={onToggleVideoOnly} /> : null}
+          <AspectRatioControl controls={controls} open={showAspectPicker} aspectRatio={aspectRatio} aspectRatios={aspectRatios} onToggle={onToggleAspectPicker} onSelect={onSelectAspectRatio} />
         </View>
 
         {/* RIGHT ACTIONS: Playback Speed, Audio, Fullscreen */}

package/src/native/media/player/playerConstants.js

@@ -38,8 +38,9 @@ export function nearestPipCorner(x, y, winW, winH, insets) {
 }
 
 export const ASPECT_OPTIONS = [
-  { label: 'Fit Screen', value: 'FIT' },
-  { label: 'Fill Screen', value: 'FILL_SCREEN' },
+  { label: 'Fit', value: 'FIT' },
+  { label: 'Fill', value: 'FILL' },
+  { label: 'Stretch', value: 'STRETCH' },
   { label: '16:9', value: '16:9' },
   { label: '4:3', value: '4:3' },
   { label: '21:9', value: '21:9' },
@@ -156,4 +157,3 @@ export function applyTrackDefaults(selected, setSelected, setTracks, tracksProp)
   const active = tracksProp.find((t) => t.selected || t.active) || tracksProp[0];
   if (active) setSelected(active.id);
 }
-