@cinecrew/cinecrew-player 0.1.3 → 0.1.5

package/src/native/media/web/useWebAc3AudioPlayback.web.js

@@ -121,11 +121,13 @@ export function useWebAc3AudioPlayback({
 
     const context = new AudioContextConstructor({ latencyHint: 'interactive' });
     const gain = context.createGain();
+    const recordingDestination = context.createMediaStreamDestination?.();
     gain.gain.value = enabledRef.current
       ? Math.max(0, Math.min(1, Number(volumeRef.current) / 100))
       : 0;
     gain.connect(context.destination);
-    audioRef.current = { context, gain };
+    if (recordingDestination) gain.connect(recordingDestination);
+    audioRef.current = { context, gain, recordingDestination };
     return audioRef.current;
   }, []);
 
@@ -212,8 +214,12 @@ export function useWebAc3AudioPlayback({
   useEffect(() => () => {
     const { context } = audioRef.current;
     if (context && context.state !== 'closed') context.close().catch(() => {});
-    audioRef.current = { context: null, gain: null };
+    audioRef.current = { context: null, gain: null, recordingDestination: null };
   }, []);
 
-  return { activateAudio, deactivateAudio };
+  return {
+    activateAudio,
+    deactivateAudio,
+    getRecordingAudioStream: () => audioRef.current.recordingDestination?.stream || null,
+  };
 }

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/native/media/web/useWebVideoAspectRatio.js

@@ -17,8 +17,13 @@ export function useWebVideoAspectRatio(videoAspectRatio, audioOnly) {
     } else if (aspect === 'CENTER') {
       setAspectFit('none');
       setAspectRatioVal(undefined);
-    } else if (typeof aspect === 'string' && aspect.includes(':')) {
-      const parts = aspect.split(':');
+    } else if (typeof aspect === 'string' && /^\d+(?:\.\d+)?:\d+(?:\.\d+)?$/.test(aspect)) {
+      const parts = aspect.split(':').map(Number);
+      if (!parts[0] || !parts[1]) {
+        setAspectFit('contain');
+        setAspectRatioVal(undefined);
+        return;
+      }
       setAspectFit('contain');
       setAspectRatioVal(`${parts[0]}/${parts[1]}`);
     } else {

package/src/utils/invokePlayerAction.js

@@ -0,0 +1,24 @@
+/** 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;
+
+  const notify = () => {
+    try {
+      callback(payload, context);
+    } catch (error) {
+      // A consumer notification must never roll back or block the player action.
+      console.error('CineCrewPlayer action callback failed:', error);
+    }
+  };
+
+  if (result && typeof result.then === 'function') {
+    return result.then((value) => {
+      notify();
+      return value;
+    });
+  }
+
+  notify();
+  return result;
+}

package/src/utils/progressBarTime.js

@@ -0,0 +1,46 @@
+/** Format a player position as an unambiguous, zero-padded HH:MM:SS value. */
+export function formatProgressBarTime(seconds) {
+  const totalSeconds = Number.isFinite(Number(seconds)) ? Math.max(0, Math.floor(Number(seconds))) : 0;
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const remainder = totalSeconds % 60;
+  return [hours, minutes, remainder].map((value) => String(value).padStart(2, '0')).join(':');
+}
+
+/**
+ * Emit one progress-bar callback per whole playback second, while allowing
+ * completed seeks/restarts to report immediately even within the same second.
+ */
+export function emitProgressBarTime(seconds, callback, lastSecondRef, { force = false } = {}) {
+  if (typeof callback !== 'function') return false;
+  const normalizedSeconds = Number.isFinite(Number(seconds)) ? Math.max(0, Number(seconds)) : 0;
+  const wholeSecond = Math.floor(normalizedSeconds);
+  const report = (value) => {
+    try {
+      callback(formatProgressBarTime(value));
+    } catch (error) {
+      // Progress observers must not interrupt media playback or native updates.
+      console.error('CineCrewPlayer progress-bar callback failed:', error);
+    }
+  };
+
+  if (force) {
+    lastSecondRef.current = wholeSecond;
+    report(normalizedSeconds);
+    return true;
+  }
+
+  if (lastSecondRef.current === null || lastSecondRef.current === undefined) {
+    lastSecondRef.current = wholeSecond;
+    if (wholeSecond === 0) return false;
+    report(normalizedSeconds);
+    return true;
+  }
+  if (wholeSecond <= lastSecondRef.current) return false;
+
+  for (let elapsedSecond = lastSecondRef.current + 1; elapsedSecond <= wholeSecond; elapsedSecond += 1) {
+    report(elapsedSecond);
+  }
+  lastSecondRef.current = wholeSecond;
+  return true;
+}

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

@@ -0,0 +1,194 @@
+function parseRatio(value) {
+  const [width, height] = String(value || '').split(':').map(Number);
+  return width > 0 && height > 0 ? width / height : null;
+}
+
+function fitRect(width, height, ratio) {
+  if (!ratio || !width || !height) return { x: 0, y: 0, width, height };
+  const boundsRatio = width / height;
+  const frameWidth = boundsRatio > ratio ? height * ratio : width;
+  const frameHeight = frameWidth / ratio;
+  return { x: (width - frameWidth) / 2, y: (height - frameHeight) / 2, width: frameWidth, height: frameHeight };
+}
+
+function drawVideoFrame(context, canvas, video, aspectRatio) {
+  const width = canvas.width;
+  const height = canvas.height;
+  context.fillStyle = '#000';
+  context.fillRect(0, 0, width, height);
+
+  const ratio = parseRatio(aspectRatio);
+  const frame = fitRect(width, height, ratio);
+  const sourceWidth = video.videoWidth;
+  const sourceHeight = video.videoHeight;
+  if (!sourceWidth || !sourceHeight) return;
+
+  const mode = String(aspectRatio || 'FIT').toUpperCase();
+  if (mode === 'STRETCH') {
+    context.drawImage(video, frame.x, frame.y, frame.width, frame.height);
+    return;
+  }
+
+  const sourceRatio = sourceWidth / sourceHeight;
+  const frameRatio = frame.width / frame.height;
+  if (mode === 'FILL' || mode === 'FILL_SCREEN') {
+    if (sourceRatio > frameRatio) {
+      const croppedWidth = sourceHeight * frameRatio;
+      context.drawImage(video, (sourceWidth - croppedWidth) / 2, 0, croppedWidth, sourceHeight, frame.x, frame.y, frame.width, frame.height);
+    } else {
+      const croppedHeight = sourceWidth / frameRatio;
+      context.drawImage(video, 0, (sourceHeight - croppedHeight) / 2, sourceWidth, croppedHeight, frame.x, frame.y, frame.width, frame.height);
+    }
+    return;
+  }
+
+  const scale = Math.min(frame.width / sourceWidth, frame.height / sourceHeight);
+  const drawWidth = sourceWidth * scale;
+  const drawHeight = sourceHeight * scale;
+  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.
+ *  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 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 || '')) {
+      // Cross-origin media without CORS – let the caller fall back to screen capture.
+      return null;
+    }
+    throw error;
+  }
+  const extraAudioTracks = additionalAudioStream?.getAudioTracks?.() || [];
+  const audioTracks = extraAudioTracks.length ? extraAudioTracks : sourceStream.getAudioTracks();
+  const bounds = playerElement?.getBoundingClientRect?.();
+  const outputWidth = Math.max(2, video.videoWidth || Math.round(bounds?.width || 640));
+  const playerRatio = bounds?.width && bounds?.height ? bounds.width / bounds.height : 16 / 9;
+  const outputHeight = Math.max(2, Math.round(outputWidth / playerRatio));
+  const canvas = document.createElement('canvas');
+  canvas.width = outputWidth;
+  canvas.height = outputHeight;
+  const context = canvas.getContext('2d');
+  if (!context || typeof canvas.captureStream !== 'function') {
+    sourceStream.getTracks().forEach((track) => track.stop());
+    throw new Error('Canvas recording is not supported in this browser.');
+  }
+
+  let originClean = false;
+  try {
+    drawVideoFrame(context, canvas, video, getAspectRatio());
+    context.getImageData(0, 0, 1, 1);
+    originClean = true;
+  } catch {
+    // Cross-origin media without CORS can still be played and captured from the
+    // media element, but cannot be re-rendered through a canvas.
+  }
+
+  if (!originClean) {
+    return {
+      stream: sourceStream,
+      aspectRatioApplied: false,
+      cleanup: () => sourceStream.getTracks().forEach((track) => track.stop()),
+    };
+  }
+
+  const canvasStream = canvas.captureStream(30);
+  const stream = new MediaStream([...canvasStream.getVideoTracks(), ...audioTracks]);
+  let frameId;
+  const draw = () => {
+    drawVideoFrame(context, canvas, video, getAspectRatio());
+    frameId = requestAnimationFrame(draw);
+  };
+  frameId = requestAnimationFrame(draw);
+  return {
+    stream,
+    aspectRatioApplied: true,
+    cleanup: () => {
+      cancelAnimationFrame(frameId);
+      canvasStream.getTracks().forEach((track) => track.stop());
+      sourceStream.getTracks().forEach((track) => track.stop());
+    },
+  };
+}
+
+/**
+ * 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'];
+  return candidates.find((type) => MediaRecorder.isTypeSupported?.(type)) || '';
+}
+
+export function createRecordingDownloadLink(blob, title = 'cinecrew-recording') {
+  if (!blob?.size) return null;
+  const safeTitle = String(title || 'cinecrew-recording').replace(/[^a-z0-9-_]+/gi, '-').replace(/^-|-$/g, '') || 'cinecrew-recording';
+  const url = URL.createObjectURL(blob);
+  return {
+    url,
+    filename: `${safeTitle}-${new Date().toISOString().replace(/[:.]/g, '-')}.webm`,
+  };
+}
+
+export function downloadRecording(blob, title = 'cinecrew-recording') {
+  const artifact = createRecordingDownloadLink(blob, title);
+  if (!artifact) return false;
+  const link = document.createElement('a');
+  link.href = artifact.url;
+  link.download = artifact.filename;
+  link.style.display = 'none';
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  window.setTimeout(() => URL.revokeObjectURL(artifact.url), 60_000);
+  return true;
+}