@cinecrew/cinecrew-player 0.1.11 → 0.1.12

package/README.md

@@ -157,15 +157,16 @@ The items below are planned for more consistent, user-facing support across plat
 
 [![Open React demo in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/nahushr/cinecrew-player/tree/main/examples/web-demo?startScript=dev)
 
-[Try the Android demo in Expo Snack](https://snack.expo.dev/?name=CineCrew%20Player%20Android&dependencies=%40cinecrew%2Fcinecrew-player%2Cexpo-document-picker&sourceUrl=https%3A%2F%2Fraw.githubusercontent.com%2Fnahushr%2Fcinecrew-player%2Fmain%2Fexamples%2Fsnack%2FApp.js&platform=android&supportedPlatforms=android) · [Try the iOS demo in Expo Snack](https://snack.expo.dev/?name=CineCrew%20Player%20iOS&dependencies=%40cinecrew%2Fcinecrew-player%2Cexpo-document-picker&sourceUrl=https%3A%2F%2Fraw.githubusercontent.com%2Fnahushr%2Fcinecrew-player%2Fmain%2Fexamples%2Fsnack%2FApp.js&platform=ios&supportedPlatforms=ios)
+[Try the Android demo in Expo Snack](https://snack.expo.dev/?name=CineCrew%20Player%20Android&sdkVersion=57.0.0&dependencies=%40cinecrew%2Fcinecrew-player%40*%2C%40expo%2Fvector-icons%40*%2Creact-native-svg%40*%2Creact-native-safe-area-context%40*%2C%40react-native-community%2Fslider%40*%2Cexpo-document-picker%40~57.0.2%2Cexpo-file-system%40~57.0.7%2Cexpo-sharing%40~57.0.22&sourceUrl=https%3A%2F%2Fraw.githubusercontent.com%2Fnahushr%2Fcinecrew-player%2Fmain%2Fexamples%2Fsnack%2FApp.js&platform=android&supportedPlatforms=android) · [Try the iOS demo in Expo Snack](https://snack.expo.dev/?name=CineCrew%20Player%20iOS&sdkVersion=57.0.0&dependencies=%40cinecrew%2Fcinecrew-player%40*%2C%40expo%2Fvector-icons%40*%2Creact-native-svg%40*%2Creact-native-safe-area-context%40*%2C%40react-native-community%2Fslider%40*%2Cexpo-document-picker%40~57.0.2%2Cexpo-file-system%40~57.0.7%2Cexpo-sharing%40~57.0.22&sourceUrl=https%3A%2F%2Fraw.githubusercontent.com%2Fnahushr%2Fcinecrew-player%2Fmain%2Fexamples%2Fsnack%2FApp.js&platform=ios&supportedPlatforms=ios)
 
 ## Demos
 
 - **[React + Vite web demo](examples/web-demo)** — try HLS, MPEG-TS, MP4, MKV, or a local video file. Switch between the full player (all controls and demo chat/EPG/recording adapters enabled) and the compact inline player. [Open a fresh StackBlitz copy](https://stackblitz.com/fork/github/nahushr/cinecrew-player/tree/main/examples/web-demo?startScript=dev).
 - **[Expo / React Native Web demo](examples/expo-web-demo)** — the same source tests and controls in an Expo app rendered for the web.
-- **[Android and iOS Expo Snack demos](examples/snack/App.js)** — both platform links load a native playground (`.ts`, `.mp4`, `.mkv`, and local-file upload), with full-player and inline-player modes. Snack runs in Expo Go, which cannot load this package's custom VLC module; MPEG-TS and MKV playback should be tested in a native development build. [Expo documents this Expo Go limitation](https://docs.expo.dev/faq/#what-can-i-do-or-cannot-do-with-expo-go).
+- **[Android and iOS Expo Snack demos](examples/snack/App.js)** — component-based platform previews include HLS, MPEG-TS, MP4, MKV, MOV, M4V, 3GP, FLV, OGV, WebM, and local-file selection. Snack runs in Expo Go, so these links verify the shared UI and Expo fallback only; Expo Go cannot load the custom VLC native module and cannot validate VLC playback or native VLC recording. [Expo documents this limitation](https://docs.expo.dev/workflow/customizing/#using-libraries-with-custom-native-code-in-development-builds).
+- **[Native Android/iOS development-build demo](examples/native-demo)** — modular Expo project that uses the bundled VLC module for direct streams and local files, with a VLC recording adapter and system share/save flow. It is the correct target for codec and native recording validation; build it with `npx expo run:android` or `npx expo run:ios` after `npm install`.
 
-The React/Vite demo is self-contained and installs the released `@cinecrew/cinecrew-player` package, so its StackBlitz link works from the `examples/web-demo` subdirectory. Its MPEG-TS button uses a small same-origin H.264/AAC fixture to exercise the TS parser without relying on an external server's CORS configuration. The Expo Web demo uses this repository's package source (`file:../..`) so contributors can test unreleased changes locally. Snack loads the native example from this repository's `main` branch and installs `@cinecrew/cinecrew-player` from npm. The React DOM entry resolves to the browser renderer; it does not evaluate React Native or VLC code. The Expo native entry bundles VLC into the same installed package. External media hosts must allow browser CORS requests; format/codec support also depends on the browser. MKV playback is generally more reliable through the native VLC adapter than a browser video element.
+The React/Vite demo is self-contained and installs the released `@cinecrew/cinecrew-player` package, so its StackBlitz link works from the `examples/web-demo` subdirectory. Its MPEG-TS button uses a small same-origin H.264/AAC fixture to exercise the TS parser without relying on an external server's CORS configuration. The Expo Web demo uses this repository's package source (`file:../..`) so contributors can test unreleased changes locally. Snack loads the one-file native playground from this repository's `main` branch, uses the root `@cinecrew/cinecrew-player` import, and declares the package's required peers. Refresh/reopen the Snack link after pushing code to load the current `main` source. Snack remains an Expo Go preview—not a VLC test. The modular native development demo links the local package source, prebuilds the custom VLC module, and is used for actual Android/iOS VLC tests. The React DOM entry resolves to the browser renderer; it does not evaluate React Native or VLC code. External media hosts must allow browser CORS requests; format/codec support also depends on the browser. MKV playback is generally more reliable through the native VLC adapter than a browser video element.
 
 Run either demo:
 
@@ -496,7 +497,7 @@ const playerRef = React.useRef(null);
 
 Available action keys: `onBack`, `onPlayPause`, `onSeek`, `onRestart`, `onLock`, `onMute`, `onAspectRatioChange`, `onVideoOnlyChange`, `onAudioOnlyChange`, `onAudioTrackChange`, `onPlaybackRateChange`, `onFullscreen`, `onRecordingStart`, `onRecordingPause`, `onRecordingResume`, `onRecordingStop`, `onLiveChatOpen`, `onEpgOpen`, and `onDiagnosticsOpen`.
 
-The ref exposes `play`, `pause`, `togglePlayPause`, `restart`, `setMuted`, `toggleMute`, `setAspectRatio`, `setAudioTrack`, `setAudioOnly`, `setVideoOnly`, `setPlaybackRate`, `seekTo`, `seekBy`, `back`, `setPanel`, `closePanel`, `getVideoElement`, `getAudioTracks`, and fullscreen methods where supported.
+The ref exposes `play`, `pause`, `togglePlayPause`, `restart`, `setMuted`, `toggleMute`, `setAspectRatio`, `setAudioTrack`, `setAudioOnly`, `setVideoOnly`, `setPlaybackRate`, `seekTo`, `seekBy`, `back`, `setPanel`, `closePanel`, `getVideoElement`, `getAudioTracks`, and fullscreen methods where supported. Native VLC builds additionally expose `startNativeRecording(path)` and `stopNativeRecording()` to an app-owned recording adapter; both return `false` when VLC is not attached (such as in Expo Go).
 
 ## Integrations
 
@@ -519,10 +520,12 @@ Integrations are optional. The package has no CineCrew account, database, or wor
       loadListings: ({ channelId, limit }) => api.getEpg(channelId, limit),
     },
     recording: {
-      start: ({ getVideoElement, streamUrl, title }) => recorder.start({ getVideoElement, streamUrl, title }),
+      supportsOnDemand: true,
+      start: ({ getVideoElement, streamUrl, title, player }) => recorder.start({ getVideoElement, streamUrl, title, player }),
       pause: () => recorder.pause(),
       resume: () => recorder.resume(),
       stop: () => recorder.stop(),
+      onNativeRecordingCreated: (path) => recorder.onNativeRecordingCreated(path),
       isActive: () => recorder.isActive(),
       subscribe: (listener) => recorder.subscribe(listener),
     },
@@ -540,7 +543,7 @@ The EPG drawer uses `integrations.epg.loadListings`, which returns entries with
 
 ### Web recording
 
-On supported browsers, the built-in recording control captures the media video and audio tracks, shows a compact timer at the top of the video with pause/resume and stop actions, then attempts a WebM download when stopped. A `Download recording` action remains available afterward as a user-gesture retry if the browser blocks the automatic download. Native React Native apps need an `integrations.recording` implementation backed by Android MediaProjection or iOS ReplayKit (with the platform's permission flow).
+On supported browsers, the built-in recording control captures the media video and audio tracks, shows a compact timer at the top of the video with pause/resume and stop actions, then attempts a WebM download when stopped. A `Download recording` action remains available afterward as a user-gesture retry if the browser blocks the automatic download. Native React Native apps provide an `integrations.recording` adapter; with the bundled VLC module, the player ref exposes native recording start/stop commands and the adapter receives the finalized path through `onNativeRecordingCreated`. Set `supportsOnDemand: true` when that adapter supports recording non-live media. Platform file locations and the destination/share flow remain app-owned.
 
 For ordinary web media, aspect changes are reflected in the recording when the browser permits the player to draw the cross-origin video into a canvas; if the source does not grant canvas CORS access, the recording keeps its source aspect ratio. Use `integrations.recording` to supply a different recording implementation.
 

package/android/src/main/java/com/yuanzhou/vlc/vlcplayer/ReactVlcPlayerView.java

@@ -38,6 +38,7 @@ class ReactVlcPlayerView extends TextureView
   private static final String EVENT_PROP_DURATION = "duration";
   private static final String EVENT_PROP_SUCCESS = "success";
   private static final String EVENT_PROP_ERROR = "error";
+  private static final String EVENT_PROP_IS_RECORDING = "isRecording";
 
   private final VideoEventEmitter eventEmitter;
   private LibVLC libvlc;
@@ -307,7 +308,7 @@ class ReactVlcPlayerView extends TextureView
               break;
             case MediaPlayer.Event.RecordChanged:
               map.putString("type", "RecordingPath");
-              map.putBoolean("isRecording", event.getRecording());
+              map.putBoolean(EVENT_PROP_IS_RECORDING, event.getRecording());
               // Record started emits and event with the record path (but no file).
               // Only want to emit when recording has stopped and the recording is created.
               if (!event.getRecording() && event.getRecordPath() != null) {
@@ -810,19 +811,27 @@ class ReactVlcPlayerView extends TextureView
   }
 
   public void startRecording(String recordingPath) {
-    if (mMediaPlayer == null) {
-      return;
-    }
-    if (recordingPath != null) {
-      mMediaPlayer.record(recordingPath);
+    boolean accepted = mMediaPlayer != null && recordingPath != null && mMediaPlayer.record(recordingPath);
+    WritableMap map = Arguments.createMap();
+    map.putString("operation", "start");
+    map.putBoolean("requestAccepted", accepted);
+    map.putBoolean(EVENT_PROP_IS_RECORDING, accepted);
+    if (!accepted) {
+      map.putString(EVENT_PROP_ERROR, "VLC rejected the recording request for this media source.");
     }
+    eventEmitter.sendEvent(map, VideoEventEmitter.EVENT_RECORDING_STATE);
   }
 
   public void stopRecording() {
-    if (mMediaPlayer == null) {
-      return;
-    }
-    mMediaPlayer.record(null);
+    boolean accepted = mMediaPlayer != null && mMediaPlayer.record(null);
+    WritableMap map = Arguments.createMap();
+    map.putString("operation", "stop");
+    map.putBoolean("requestAccepted", accepted);
+    map.putBoolean(EVENT_PROP_IS_RECORDING, !accepted);
+    if (!accepted) {
+      map.putString(EVENT_PROP_ERROR, "VLC rejected the request to stop recording.");
+    }
+    eventEmitter.sendEvent(map, VideoEventEmitter.EVENT_RECORDING_STATE);
   }
 
   public void stopPlayer() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cinecrew/cinecrew-player",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "type": "module",
   "description": "Customizable cross-platform live and on-demand video player for React and React Native.",
   "license": "MIT",

package/packages/react-native-vlc-media-player/VLCPlayer.js

@@ -21,6 +21,7 @@ const VLCPlayer = forwardRef(function VLCPlayer(props, forwardedRef) {
     onPlaying,
     onLoad,
     onRecordingCreated,
+    onRecordingState,
     onSnapshot,
     ...otherProps
   } = props;
@@ -40,7 +41,10 @@ const VLCPlayer = forwardRef(function VLCPlayer(props, forwardedRef) {
 
     return {
       setNativeProps,
-      startRecording: (path) => dispatchCommand('startRecording', [path]),
+      startRecording: (path) => {
+        lastRecordingRef.current = null;
+        dispatchCommand('startRecording', [path]);
+      },
       stopRecording: () => dispatchCommand('stopRecording', []),
       stopPlayer: () => dispatchCommand('stopPlayer', []),
       snapshot: (path) => dispatchCommand('snapshot', [path]),
@@ -69,13 +73,14 @@ const VLCPlayer = forwardRef(function VLCPlayer(props, forwardedRef) {
   const handleRecordingState = useCallback(
     (event) => {
       const { isRecording, recordPath } = event.nativeEvent;
+      onRecordingState?.(event.nativeEvent);
       if (lastRecordingRef.current === recordPath) return;
       if (!isRecording && recordPath) {
         lastRecordingRef.current = recordPath;
         onRecordingCreated?.(recordPath);
       }
     },
-    [onRecordingCreated],
+    [onRecordingCreated, onRecordingState],
   );
   const handleSnapshot = useCallback(
     (event) => {

package/packages/react-native-vlc-media-player/index.d.ts

@@ -177,6 +177,17 @@ export type VLCPlayerCallbackProps = {
    */
   onRecordingCreated?: (recordingPath: string) => void;
 
+  /**
+   * Called with native VLC recording request/state events.
+   */
+  onRecordingState?: (event: {
+    operation?: 'start' | 'stop';
+    requestAccepted?: boolean;
+    isRecording: boolean;
+    recordPath?: string | null;
+    error?: string | null;
+  }) => void;
+
   /**
    * Called when a new snapshot is created
    *

package/packages/react-native-vlc-media-player/ios/RCTVLCPlayer/RCTVLCPlayer.m

@@ -462,18 +462,30 @@ static NSString *const playbackRate = @"rate";
 
 - (void)startRecording:(NSString*)path
 {
-    [_player startRecordingAtPath:path];
+    BOOL accepted = _player != nil && path != nil && [_player startRecordingAtPath:path];
     if (self.onRecordingState) {
         self.onRecordingState(@{
             @"target": self.reactTag,
-            @"isRecording": @YES
+            @"operation": @"start",
+            @"requestAccepted": @(accepted),
+            @"isRecording": @(accepted),
+            @"error": accepted ? (id)[NSNull null] : @"VLC rejected the recording request for this media source."
         });
     }
 }
 
 - (void)stopRecording
 {
-    [_player stopRecording];
+    BOOL accepted = _player != nil && [_player stopRecording];
+    if (!accepted && self.onRecordingState) {
+        self.onRecordingState(@{
+            @"target": self.reactTag,
+            @"operation": @"stop",
+            @"requestAccepted": @NO,
+            @"isRecording": @YES,
+            @"error": @"VLC rejected the request to stop recording."
+        });
+    }
 }
 
 - (void)stopPlayer
@@ -632,4 +644,4 @@ static NSString *const playbackRate = @"rate";
     [super removeFromSuperview];
 }
 
-@end
+@end

package/src/native/MediaPlayerView.js

@@ -19,13 +19,14 @@ import { LiveChatDrawer } from './media/LiveChatDrawer';
 import { LiveRecordingNotice, LiveRecordingOverlay } from './media/LiveRecordingOverlay';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PlayerIcon } from './customization';
-import { isWeb, isAndroid, isElectron } from '../utils/runtimePlatform';
+import { isWeb, 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,
+  ASPECT_OPTIONS,
   calculateScreenAspectRatio,
   isSafariOrIOS,
   getWebPoint,
@@ -222,9 +223,9 @@ function PlatformMediaSurface(props) {
     volume, playbackRate, aspectRatio, title, posterUrl, isLive, isAudioOnly,
     selectedAudioTrack, handleTracksChanged, handleProgress, handleNativePlaying,
     handleWebBuffering, handleEpisodeEnded, handleWebError, togglePlayPause,
-    handleSeekByAction, handlePlaybackRoute, exoFallback, useExoForAndroidLocalMedia,
+    handleSeekByAction, handlePlaybackRoute, exoFallback,
     nativeSource, computedAspectRatio, handleNativeLoadStart,
-    handleNativeOpen, handleNativeBuffering,
+    handleNativeOpen, handleNativeBuffering, onRecordingCreated, recording,
   } = props;
   if (isElectron()) {
     return (
@@ -283,7 +284,7 @@ function PlatformMediaSurface(props) {
       />
     );
   }
-  if (VLC_AVAILABLE && !useExoForAndroidLocalMedia) {
+  if (VLC_AVAILABLE) {
     return (
       <VLCBoundary key={`vlcb-${playerStreamUrl}`} fallback={exoFallback}>
         <VLCPlayer
@@ -313,6 +314,8 @@ function PlatformMediaSurface(props) {
           onVLCBuffering={handleNativeBuffering}
           onError={handleWebError}
           onVLCError={handleWebError}
+          onRecordingCreated={onRecordingCreated}
+          onRecordingState={recording?.onNativeRecordingState}
         />
       </VLCBoundary>
     );
@@ -495,11 +498,20 @@ function FullscreenVideoLayer({ videoPlayer, zoomScale, isAudioOnly }) {
   );
 }
 
-function FullscreenGestureLayer({ isAudioOnly, panResponder, handlers }) {
+function FullscreenGestureLayer({ isAudioOnly, showControls, isLocked, isRecording, panResponder, handlers }) {
   if (isAudioOnly) return null;
   if (!isWeb() && panResponder) {
+    // Keep the full-screen gesture responder out of the hit-test tree while
+    // controls are visible. PanResponder can otherwise claim a touch before
+    // nested TouchableOpacity controls receive it on Android.
+    if (isRecording || (showControls && !isLocked)) return null;
     return (
-      <View collapsable={false} style={[StyleSheet.absoluteFill, styles.gestureCatcher]} {...panResponder.panHandlers} />
+      <View
+        collapsable={false}
+        style={[StyleSheet.absoluteFill, styles.gestureCatcher]}
+        pointerEvents={showControls ? 'none' : 'auto'}
+        {...panResponder.panHandlers}
+      />
     );
   }
   return (
@@ -533,6 +545,7 @@ function FullscreenControlsPanel(props) {
         episodeLabel={props.episodeLabel}
         isLive={props.isLive}
         isScreenRecorderEnabled={props.isScreenRecorderEnabled}
+        canRecord={props.canRecord}
         recStatus={props.recStatus}
         isLoading={props.isLoading}
         showLiveChat={props.showLiveChat}
@@ -673,7 +686,7 @@ function FullscreenChatLayer(props) {
 }
 
 function FullscreenRecordingLayer(props) {
-  const recordingEligible = props.isLive;
+  const recordingEligible = props.canRecord;
   return (
     <>
       {!props.isAudioOnly && recordingEligible && (props.isScreenRecorderEnabled || props.recStatus !== 'idle') ? (
@@ -942,6 +955,7 @@ export const MediaPlayerView = ({
   const isAudioOnlyFeatureEnabled = controls.audioOnly ?? true;
   const isScreenRecorderEnabled = controls.recording ?? Boolean(integrations.recording);
   const recording = integrations.recording;
+  const canRecord = isLive || recording?.supportsOnDemand === true;
   const [currentUser, setCurrentUser] = useState(integrations.user || { id: '0', username: 'Viewer' });
 
   const badgeService = useMemo(() => ({
@@ -1491,7 +1505,7 @@ export const MediaPlayerView = ({
 
   const handleStartRecording = useCallback(async (e) => {
     e?.stopPropagation?.();
-    if (!isScreenRecorderEnabled || !isLive || recStatusRef.current !== 'idle') return;
+    if (!isScreenRecorderEnabled || !canRecord || recStatusRef.current !== 'idle') return;
     try {
       await recording?.start?.({
         getVideoElement: () => {
@@ -1501,6 +1515,7 @@ export const MediaPlayerView = ({
         },
         streamUrl: playbackUrl || streamUrl,
         title,
+        player: playerApiRef?.current || null,
       });
       if (muted) {
         showRecNotice({
@@ -1511,7 +1526,7 @@ export const MediaPlayerView = ({
     } catch (err) {
       showRecNotice({ type: 'error', message: err?.message || 'Could not start recording.' });
     }
-  }, [isLive, isScreenRecorderEnabled, muted, playbackUrl, showRecNotice, streamUrl, title, recording]);
+  }, [canRecord, isScreenRecorderEnabled, muted, playbackUrl, showRecNotice, streamUrl, title, recording, playerApiRef]);
 
   const handlePauseRecording = useCallback(async (e) => {
     e?.stopPropagation?.();
@@ -1945,12 +1960,29 @@ export const MediaPlayerView = ({
       back: handleBackAction,
       getVideoElement: () => vlcRef.current?.getVideoElement?.() || null,
       getAudioTracks: () => audioTracks,
+      startNativeRecording: (path) => {
+        if (typeof vlcRef.current?.startRecording !== 'function') return false;
+        vlcRef.current.startRecording(path);
+        return true;
+      },
+      stopNativeRecording: () => {
+        if (typeof vlcRef.current?.stopRecording !== 'function') return false;
+        vlcRef.current.stopRecording();
+        return true;
+      },
     };
     Object.assign(playerApiRef.current, api);
     return () => {
       for (const key of Object.keys(api)) delete playerApiRef.current[key];
     };
-  }, [playerApiRef, togglePlayPause, handleRestart, toggleMute, handleSelectAspectRatio, handleAudioSelect, handleSeekTo, handleSeekBy, handleBackAction, audioTracks]);
+  }, [playerApiRef, togglePlayPause, handleRestart, toggleMute, handleSelectAspectRatio, handleAudioSelect, handleSeekTo, handleSeekBy, handleBackAction, audioTracks, vlcRef]);
+
+  const handleNativeRecordingCreated = useCallback((path) => {
+    recording?.onNativeRecordingCreated?.(path);
+  }, [recording]);
+  const handleNativeRecordingState = useCallback((state) => {
+    recording?.onNativeRecordingState?.(state);
+  }, [recording]);
 
   const handleSpeedSelect = useCallback((speed) => invokeAction(
     'onPlaybackRateChange', () => {
@@ -2037,9 +2069,13 @@ export const MediaPlayerView = ({
     };
 
     return PanResponder.create({
-      onStartShouldSetPanResponder: (evt) => !isSeekScrubGesture(evt),
+      onStartShouldSetPanResponder: (evt) => (
+        !(showControlsRef.current && !isLockedRef.current)
+        && !isSeekScrubGesture(evt)
+      ),
       onStartShouldSetPanResponderCapture: () => false,
       onMoveShouldSetPanResponder: (evt, gestureState) => {
+        if (showControlsRef.current && !isLockedRef.current) return false;
         if (isSeekScrubGesture(evt)) return false;
         return Math.abs(gestureState.dx) > 3 || Math.abs(gestureState.dy) > 3;
       },
@@ -2432,13 +2468,6 @@ export const MediaPlayerView = ({
     mediaOptions: nativeMediaOptions,
   }), [playerStreamUrl, nativeMediaOptions]);
 
-  // Android DownloadManager / local storage can expose downloads as
-  // content:// or file:// URIs. Media3/Expo (ExoPlayer) can consume both provider URIs
-  // and local filesystem URIs directly with full hardware acceleration;
-  // this VLC build's native local-string path cannot, so route local media to ExoVideoFallback.
-  const useExoForAndroidLocalMedia = isAndroid()
-    && isLocalMediaUri(playerStreamUrl);
-
   if (!visible || !streamUrl) return null;
 
   const exoFallback = (
@@ -2487,13 +2516,15 @@ export const MediaPlayerView = ({
       handleSeekByAction={handleSeekByAction}
       handlePlaybackRoute={handlePlaybackRoute}
       exoFallback={exoFallback}
-      useExoForAndroidLocalMedia={useExoForAndroidLocalMedia}
       nativeSource={nativeSource}
       computedAspectRatio={computedAspectRatio}
       handleNativeLoadStart={handleNativeLoadStart}
       handleNativeOpen={handleNativeOpen}
       handleClose={handleClose}
       handleNativeBuffering={handleNativeBuffering}
+      onRecordingCreated={handleNativeRecordingCreated}
+      onRecordingState={handleNativeRecordingState}
+      recording={recording}
     />
   );
   const isValidPreviewRect = isUsableInlinePreviewRect(inlinePreviewRect);
@@ -2561,6 +2592,7 @@ export const MediaPlayerView = ({
     episodeLabel,
     isLive,
     isScreenRecorderEnabled,
+    canRecord,
     recStatus,
     isLoading,
     showLiveChat,
@@ -2658,6 +2690,9 @@ export const MediaPlayerView = ({
       />
       <FullscreenGestureLayer
         isAudioOnly={isAudioOnly}
+        showControls={showControls}
+        isLocked={isLocked}
+        isRecording={recStatus === 'recording' || recStatus === 'paused'}
         panResponder={panResponder}
         handlers={{
           onPointerDown: handleWebPointerDown,
@@ -2672,7 +2707,11 @@ export const MediaPlayerView = ({
 
       {/* Controls Layer */}
       <View style={[StyleSheet.absoluteFill, { zIndex: 60, elevation: 60 }]} pointerEvents="box-none">
-        <FullscreenControlsLayer showControls={showControls} isLocked={isLocked} isAudioOnly={isAudioOnly}>
+        <FullscreenControlsLayer
+          showControls={showControls}
+          isLocked={isLocked}
+          isAudioOnly={isAudioOnly}
+        >
           <FullscreenControlsPanel {...fullscreenControlsProps} />
         </FullscreenControlsLayer>
       </View>
@@ -2707,7 +2746,7 @@ export const MediaPlayerView = ({
       />
       <FullscreenRecordingLayer
         isAudioOnly={isAudioOnly}
-        isLive={isLive}
+        canRecord={canRecord}
         isScreenRecorderEnabled={isScreenRecorderEnabled}
         recStatus={recStatus}
         recElapsedMs={recElapsedMs}

package/src/native/media/LiveRecordingOverlay.js

@@ -93,7 +93,7 @@ export function LiveRecordingOverlay({
 
   return (
     <View
-      pointerEvents="box-none"
+      pointerEvents="auto"
       style={[styles.wrap, { top: Math.max(topInset, 10) }]}
     >
       <View
@@ -202,7 +202,8 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: 0,
     right: 0,
-    zIndex: 80,
+    zIndex: 1000,
+    ...(isWeb() || isElectron() ? {} : { elevation: 1000 }),
     alignItems: 'center',
     pointerEvents: 'box-none',
   },

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

@@ -21,8 +21,8 @@ function BackButton({ visible, palette, scale, onClose }) {
   );
 }
 
-function RecordingControls({ isLive, enabled, status, loading, controls, onStart, onResume, onPause, onStop, palette }) {
-  if (!isLive || !enabled || controls.recording === false) return null;
+function RecordingControls({ canRecord, enabled, status, loading, controls, onStart, onResume, onPause, onStop, palette }) {
+  if (!canRecord || !enabled || controls.recording === false) return null;
   if (status === 'idle') {
     return (
       <TouchableOpacity style={[styles.pill, loading && { opacity: 0.45 }]} onPress={onStart} hitSlop={12} disabled={loading} accessibilityLabel="Start recording">
@@ -95,6 +95,7 @@ export const PlayerTopBar = ({
   episodeLabel,
   isLive,
   isScreenRecorderEnabled,
+  canRecord,
   recStatus,
   isLoading,
   showLiveChat,
@@ -145,7 +146,7 @@ export const PlayerTopBar = ({
         <PlayerTitle isPortrait={isPortrait} displayTitle={displayTitle} episodeLabel={episodeLabel} showEpisodeSubtitle={showEpisodeSubtitle} palette={palette} scale={scale} />
 
         <View style={styles.topRightActions}>
-          <RecordingControls isLive={isLive} enabled={isScreenRecorderEnabled} status={recStatus} loading={isLoading} controls={controls} onStart={onStartRecording} onResume={onResumeRecording} onPause={onPauseRecording} onStop={onStopRecording} palette={palette} />
+          <RecordingControls canRecord={canRecord ?? isLive} enabled={isScreenRecorderEnabled} status={recStatus} loading={isLoading} controls={controls} onStart={onStartRecording} onResume={onResumeRecording} onPause={onPauseRecording} onStop={onStopRecording} palette={palette} />
           <LiveServiceControls isLive={isLive} controls={controls} showLiveChat={showLiveChat} drawerTab={drawerTab} showChat={isLiveCommentsEnabled} showEpg={isEpgEnabled} showDiagnostics={diagnosticsOverlayEnabled} onToggle={onToggleChatTab} palette={palette} />
           <PlaybackSessionControls isLive={isLive} controls={controls} muted={muted} onRestart={onRestart} onMute={onToggleMute} onLock={onToggleLock} palette={palette} />
         </View>

package/src/utils/mediaUtils.js

@@ -1,3 +1,11 @@
+/** True for app-local media URIs/paths rather than network streams. */
+export function isLocalMediaUri(uri) {
+  const value = String(uri || '').trim();
+  if (!value) return false;
+  return /^(?:file|content|assets-library|ph|data):/i.test(value)
+    || /^(?:\.\.?\/|\/|~\/)/.test(value);
+}
+
 export function cleanPlayerTitle(title, episodeLabel, isMobile = false) {
   const clean = String(title || '').trim();
   if (!clean) return 'Now Playing';

package/types/index.d.ts

@@ -62,6 +62,10 @@ export interface PlayerApi {
   closePanel(): void;
   getVideoElement(): unknown | null;
   getAudioTracks(): AudioTrack[];
+  /** Start a native VLC recording to a platform-specific path. Returns false when VLC is unavailable. */
+  startNativeRecording?(path: string): boolean;
+  /** Stop an active native VLC recording. Returns false when VLC is unavailable. */
+  stopNativeRecording?(): boolean;
   enterFullscreen?(): void | Promise<void>;
   exitFullscreen?(): void | Promise<void>;
 }
@@ -193,10 +197,14 @@ export interface PlayerIntegrations {
   };
   recording?: {
     /** Starts host-managed recording for the active direct media source. */
-    start?: (args: { getVideoElement: () => unknown | null; streamUrl: string; title?: string }) => Promise<unknown>;
+    start?: (args: { getVideoElement: () => unknown | null; streamUrl: string; title?: string; player?: PlayerApi | null }) => Promise<unknown>;
     pause?: () => Promise<unknown>;
     resume?: () => Promise<unknown>;
     stop?: () => Promise<{ filename?: string } | unknown>;
+    /** Allow the recording control on on-demand media, not only live sources. */
+    supportsOnDemand?: boolean;
+    /** Receives the completed local path emitted by the native VLC recorder. */
+    onNativeRecordingCreated?: (recordingPath: string) => void;
     isActive?: () => boolean;
     subscribe?: (listener: (state: { status: string; elapsedMs: number }) => void) => (() => void) | void;
   };