@cinecrew/cinecrew-player 0.1.4 → 0.1.5

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/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/web/useWebHlsPlayback.web.js

@@ -41,6 +41,7 @@ export function useWebHlsPlayback({ activeUrl, isLive, videoRef, pausedRef, onEr
         onErrorRef.current?.({ message, httpStatus, err: data });
       });
       hls.loadSource(activeUrl);
+      video.crossOrigin = 'anonymous';
       hls.attachMedia(video);
     } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
       video.src = activeUrl;

package/src/utils/invokePlayerAction.js

@@ -1,4 +1,4 @@
-/** Run the player's built-in action before notifying the consuming app. */
+/** Run the core action when present, then notify the consuming app. */
 export function invokePlayerAction(coreAction, callback, payload, context) {
   const result = typeof coreAction === 'function' ? coreAction(payload) : undefined;
   if (typeof callback !== 'function') return result;

package/src/utils/sourceUtils.js

@@ -6,31 +6,6 @@ export function normalizePlayerSource(source, url) {
   return value && typeof value === 'object' ? value : { uri: '' };
 }
 
-export function getYouTubeVideoId(source) {
-  const media = typeof source === 'string' ? { uri: source } : source || {};
-  const explicitId = media.youtubeVideoId || (String(media.type || '').toLowerCase() === 'youtube' ? media.id : null);
-  const isValidId = (value) => /^[\w-]{11}$/.test(String(value || ''));
-  if (isValidId(explicitId)) return String(explicitId);
-
-  const raw = String(media.uri || media.url || '').trim();
-  if (!raw) return null;
-  try {
-    const parsed = new URL(raw);
-    const host = parsed.hostname.toLowerCase().replace(/^www\./, '');
-    if (host === 'youtu.be') {
-      const id = parsed.pathname.split('/').find(Boolean);
-      return isValidId(id) ? id : null;
-    }
-    if (host !== 'youtube.com' && host !== 'youtube-nocookie.com' && host !== 'm.youtube.com') return null;
-    const queryId = parsed.searchParams.get('v');
-    if (isValidId(queryId)) return queryId;
-    const match = /^\/(?:embed|shorts|live)\/([\w-]{11})/.exec(parsed.pathname);
-    return isValidId(match?.[1]) ? match[1] : null;
-  } catch {
-    return null;
-  }
-}
-
 export function getWebRuntimePlatform() {
   if (typeof window === 'undefined') return 'web';
   const electronProcess = Boolean(window.process?.versions?.electron);

package/src/utils/webRecording.js

@@ -48,19 +48,28 @@ function drawVideoFrame(context, canvas, video, aspectRatio) {
   context.drawImage(video, frame.x + (frame.width - drawWidth) / 2, frame.y + (frame.height - drawHeight) / 2, drawWidth, drawHeight);
 }
 
-/** Capture the visible media frame (not player chrome) and preserve its audio tracks. */
+/** Capture the visible media frame (not player chrome) and preserve its audio tracks.
+ *  Returns `null` when cross-origin restrictions prevent direct capture so the
+ *  caller can fall back to screen/tab capture via `createScreenRecordingStream`.
+ */
 export function createVideoRecordingStream(video, playerElement, getAspectRatio, additionalAudioStream) {
   const capture = video?.captureStream || video?.webkitCaptureStream;
-  if (!video || typeof capture !== 'function' || typeof MediaStream === 'undefined') {
+  if (!video || typeof MediaStream === 'undefined') {
     throw new Error('This browser does not support recording this media element.');
   }
 
+  // captureStream may not exist on every browser / element combination.
+  if (typeof capture !== 'function') {
+    return null;
+  }
+
   let sourceStream;
   try {
     sourceStream = capture.call(video);
   } catch (error) {
     if (error?.name === 'SecurityError' || /cross.?origin|security/i.test(error?.message || '')) {
-      throw new Error('The browser cannot record this cross-origin video because its source does not grant capture access. Use a local or CORS-enabled source to record it.');
+      // Cross-origin media without CORS – let the caller fall back to screen capture.
+      return null;
     }
     throw error;
   }
@@ -116,6 +125,44 @@ export function createVideoRecordingStream(video, playerElement, getAspectRatio,
   };
 }
 
+/**
+ * Generalised screen / tab capture that works for any source type.
+ * Uses `preferCurrentTab` (Chrome 109+) to automatically select the
+ * current tab, making the user experience smoother.
+ */
+export async function createScreenRecordingStream() {
+  const mediaDevices = typeof navigator !== 'undefined' ? navigator.mediaDevices : null;
+  if (typeof mediaDevices?.getDisplayMedia !== 'function') {
+    throw new TypeError('Recording requires browser tab/screen capture, which is not available in this browser.');
+  }
+
+  let stream;
+  try {
+    stream = await mediaDevices.getDisplayMedia({
+      video: true,
+      audio: true,
+      preferCurrentTab: true,
+    });
+  } catch (error) {
+    if (error?.name === 'NotAllowedError' || error?.name === 'AbortError') {
+      throw new Error('Recording was cancelled. Allow tab/screen capture and choose the player tab to record.');
+    }
+    throw error;
+  }
+
+  const videoTracks = stream.getVideoTracks?.() || [];
+  const audioTracks = stream.getAudioTracks?.() || [];
+  if (!videoTracks.length || !audioTracks.length) {
+    stream.getTracks?.().forEach((track) => track.stop());
+    throw new Error('The selected capture has no video or tab audio. Choose a browser tab and enable Share tab audio.');
+  }
+
+  return {
+    stream,
+    cleanup: () => stream.getTracks?.().forEach((track) => track.stop()),
+  };
+}
+
 export function getRecordingMimeType() {
   if (typeof MediaRecorder === 'undefined') return '';
   const candidates = ['video/webm;codecs=vp9,opus', 'video/webm;codecs=vp8,opus', 'video/webm'];