@cinecrew/cinecrew-player 0.1.6 → 0.1.8

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

@@ -1,12 +1,25 @@
 import { useEffect, useRef, useState } from 'react';
-import mpegts from '../../../../vendor/mpegts.js/mpegts.js';
+import '../../../../vendor/mpegts.js/mpegts.js';
 import {
   WEB_AC3_UNSUPPORTED_CODE,
   WEB_AC3_UNSUPPORTED_MESSAGE,
 } from './webPlaybackErrors';
 
-if (mpegts.LoggingControl) {
-  mpegts.LoggingControl.enableAll = false;
+const getMpegts = () => {
+  if (typeof globalThis !== 'undefined' && globalThis.mpegts) return globalThis.mpegts;
+  if (typeof window !== 'undefined' && window.mpegts) return window.mpegts;
+  return undefined;
+};
+
+const getStashInitialSize = (useVideoOnly, isLive) => {
+  if (useVideoOnly) return 2048;
+  if (isLive) return 512 * 1024;
+  return 1024 * 1024;
+};
+
+const initialMpegts = getMpegts();
+if (initialMpegts?.LoggingControl) {
+  initialMpegts.LoggingControl.enableAll = false;
 }
 
 const isRawLiveTransportStream = (url) => {
@@ -20,6 +33,16 @@ const isRawLiveTransportStream = (url) => {
   }
 };
 
+const isFlvStream = (url) => {
+  if (typeof url !== 'string') return false;
+  try {
+    const parsed = new URL(url, 'http://localhost');
+    return /\.flv$/i.test(parsed.pathname) || /^(?:ws|wss):/i.test(url);
+  } catch {
+    return /\.flv(?:$|[?#])/i.test(url) || /^(?:ws|wss):/i.test(url);
+  }
+};
+
 const isHlsUrl = (url) => /\.m3u8(?:$|[?#])/i.test(String(url || ''));
 
 function containsAc3Codec(value) {
@@ -87,12 +110,9 @@ export function useWebMpegTsPlayback({
   const [unavailableForUrl, setUnavailableForUrl] = useState('');
   const [ac3FallbackForUrl, setAc3FallbackForUrl] = useState('');
   const ac3FallbackForUrlRef = useRef('');
-  const useMpegTs = isLive
-    // The resolver may return an opaque temporary URL whose pathname no
-    // longer ends in .ts or /live/. Keep the source format from the original
-    // Xtream URL so those redirects still go through the TS demuxer. If the
-    // resolver explicitly returned HLS, let the HLS player own that source.
-    && (isRawLiveTransportStream(streamUrl) || isRawLiveTransportStream(activeUrl))
+  const isFlv = isFlvStream(streamUrl) || isFlvStream(activeUrl);
+  const isRawTs = isRawLiveTransportStream(streamUrl) || isRawLiveTransportStream(activeUrl);
+  const useMpegTs = !isFlv && isRawTs
     && !isHlsUrl(activeUrl)
     && unavailableForUrl !== streamUrl;
   const useVideoOnly = useMpegTs && videoOnly;
@@ -120,6 +140,7 @@ export function useWebMpegTsPlayback({
     let stablePlaybackTimer = null;
     let lastPlaybackProgressAt = Date.now();
     let lastPlaybackTime = Number(video.currentTime) || 0;
+    let handleCanPlay = null;
 
     const clearStablePlaybackTimer = () => {
       if (stablePlaybackTimer) {
@@ -231,42 +252,61 @@ export function useWebMpegTsPlayback({
       delete video.dataset.mpegtsCodecGate;
       if (!pausedRef.current && player) {
         const playResult = player.play();
-        playResult?.catch?.(() => {});
+        playResult?.catch?.((err) => {
+          if (err?.name === 'NotAllowedError') {
+            video.muted = true;
+            player.play()?.catch?.(() => {});
+          }
+        });
       }
     };
 
     try {
-      if (!mpegts.isSupported()) {
+      const mpegts = getMpegts();
+      if (!mpegts?.isSupported()) {
         setUnavailableForUrl(streamUrl);
         return undefined;
       }
 
       player = mpegts.createPlayer({
-        type: 'mpegts',
+        type: isFlv ? 'flv' : 'mpegts',
         url: activeUrl,
-        isLive: true,
+        isLive: Boolean(isLive),
         hasAudio: !useAc3Fallback && !useVideoOnly,
         hasVideo: true,
       }, {
         enableWorker: !useVideoOnly,
         lazyLoad: false,
         enableStashBuffer: true,
-        // Match the standalone Sony test: allow a deeper forward buffer to
-        // absorb provider jitter instead of constantly chasing the live edge.
-        stashInitialSize: useVideoOnly ? 2048 : 512 * 1024,
-        liveBufferLatencyChasing: !useVideoOnly,
+        stashInitialSize: getStashInitialSize(useVideoOnly, isLive),
+        liveBufferLatencyChasing: Boolean(isLive && !useVideoOnly),
         liveBufferLatencyMaxLatency: 8,
         liveBufferLatencyMinRemain: 3,
-        autoCleanupSourceBuffer: true,
+        autoCleanupSourceBuffer: Boolean(isLive),
         autoCleanupMaxBackwardDuration: useVideoOnly ? 120 : 30,
         autoCleanupMinBackwardDuration: useVideoOnly ? 60 : 15,
         disableAudio: useAc3Fallback || useVideoOnly,
       });
-      // Wait until the MPEG-TS demuxer reports its codecs so unsupported AC3
-      // streams can be stopped before the browser renders their video.
       video.autoplay = false;
-      video.dataset.mpegtsCodecGate = 'pending';
+      if (!isFlv) {
+        video.dataset.mpegtsCodecGate = 'pending';
+      } else {
+        delete video.dataset.mpegtsCodecGate;
+      }
       player.on(mpegts.Events.MEDIA_INFO, handleMediaInfo);
+      handleCanPlay = () => {
+        delete video.dataset.mpegtsCodecGate;
+        if (!pausedRef.current && player) {
+          const playResult = player.play();
+          playResult?.catch?.((err) => {
+            if (err?.name === 'NotAllowedError') {
+              video.muted = true;
+              player.play()?.catch?.(() => {});
+            }
+          });
+        }
+      };
+      video.addEventListener('canplay', handleCanPlay);
       video.addEventListener('timeupdate', notePlaybackProgress);
       video.addEventListener('playing', handlePlaying);
       video.addEventListener('waiting', handleWaiting);
@@ -306,6 +346,15 @@ export function useWebMpegTsPlayback({
       });
       player.attachMediaElement(video);
       player.load();
+      if (!pausedRef.current) {
+        const playResult = player.play();
+        playResult?.catch?.((err) => {
+          if (err?.name === 'NotAllowedError') {
+            video.muted = true;
+            player.play()?.catch?.(() => {});
+          }
+        });
+      }
       stallWatchdog = setInterval(() => {
         if (disposed || pausedRef.current || recoveryPending || video.currentTime <= 0) return;
         if (Date.now() - lastPlaybackProgressAt >= 12000) {
@@ -322,6 +371,7 @@ export function useWebMpegTsPlayback({
       if (recoveryTimer) clearTimeout(recoveryTimer);
       if (stallWatchdog) clearInterval(stallWatchdog);
       clearStablePlaybackTimer();
+      if (handleCanPlay) video.removeEventListener('canplay', handleCanPlay);
       video.removeEventListener('timeupdate', notePlaybackProgress);
       video.removeEventListener('playing', handlePlaying);
       video.removeEventListener('waiting', handleWaiting);
@@ -352,5 +402,5 @@ export function useWebMpegTsPlayback({
     };
   }, [activeUrl, useMpegTs, useAc3Fallback, useVideoOnly, streamUrl, videoRef, pausedRef, onErrorRef, onBufferingRef]);
 
-  return { useMpegTs, useAc3Fallback };
+  return { useMpegTs, useAc3Fallback, isFlv };
 }

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

@@ -0,0 +1,3 @@
+export function useWebOgvPlayback() {
+  return false;
+}

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

@@ -0,0 +1,312 @@
+import { useEffect, useRef } from 'react';
+
+const DEFAULT_OGV_RESOURCE_BASE = 'https://cdn.jsdelivr.net/npm/ogv@1.9.0/dist';
+const ogvRuntimePromises = new Map();
+
+function normalizeResourceBase(value) {
+  const base = String(value || DEFAULT_OGV_RESOURCE_BASE).trim();
+  let lastNonSlash = base.length;
+  while (lastNonSlash > 0 && base[lastNonSlash - 1] === '/') {
+    lastNonSlash -= 1;
+  }
+  return base.slice(0, lastNonSlash);
+}
+
+function loadOgvRuntime(resourceBase) {
+  if (window.OGVPlayer && window.OGVLoader) {
+    return Promise.resolve({
+      OGVPlayer: window.OGVPlayer,
+      OGVLoader: window.OGVLoader,
+      OGVCompat: window.OGVCompat,
+    });
+  }
+
+  const scriptUrl = `${resourceBase}/ogv.js`;
+  if (ogvRuntimePromises.has(scriptUrl)) return ogvRuntimePromises.get(scriptUrl);
+
+  const promise = new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = scriptUrl;
+    script.async = true;
+    script.dataset.cinecrewOgvRuntime = 'true';
+    script.onload = () => {
+      if (!window.OGVPlayer || !window.OGVLoader) {
+        reject(new Error('The OGV runtime loaded but did not expose OGVPlayer.'));
+        return;
+      }
+      resolve({
+        OGVPlayer: window.OGVPlayer,
+        OGVLoader: window.OGVLoader,
+        OGVCompat: window.OGVCompat,
+      });
+    };
+    script.onerror = () => reject(new Error(`Could not load the OGV runtime from ${scriptUrl}.`));
+    document.head.appendChild(script);
+  });
+
+  ogvRuntimePromises.set(scriptUrl, promise);
+  promise.catch(() => ogvRuntimePromises.delete(scriptUrl));
+  return promise;
+}
+
+const isOgvSource = (url, type) => /(?:^|\/)video\/ogg(?:$|;)/i.test(String(type || ''))
+  || /\bogv\b/i.test(String(type || ''))
+  || /\.ogv(?:$|[?#])/i.test(String(url || ''));
+
+function attemptPlayback(player, pausedRef) {
+  if (pausedRef.current) return;
+  const result = player.play();
+  result?.catch?.((error) => {
+    if (error?.name === 'NotAllowedError') {
+      player.muted = true;
+      player.play()?.catch?.(() => {});
+    }
+  });
+}
+
+function readCustomRatio(playerStyle) {
+  if (playerStyle?.width !== 'auto' || playerStyle?.height !== 'auto') return null;
+  const parts = String(playerStyle.aspectRatio || '').split('/').map(Number);
+  if (parts.length !== 2 || !parts[0] || !parts[1]) return null;
+  const ratio = parts[0] / parts[1];
+  return Number.isFinite(ratio) && ratio > 0 ? ratio : null;
+}
+
+function applyPlayerStyle(stage, frame, player, playerStyle) {
+  if (!stage?.style || !frame?.style || !player?.style) return;
+
+  const style = playerStyle || {};
+  const ratio = readCustomRatio(style);
+  const stageWidth = stage.clientWidth;
+  const stageHeight = stage.clientHeight;
+
+  Object.assign(stage.style, {
+    overflow: 'hidden',
+    backgroundColor: style.backgroundColor || '#000',
+  });
+
+  // OGVPlayer has no intrinsic CSS size. Applying width/height:auto directly
+  // to it collapses its canvas in browsers. Size a wrapper from the measured
+  // stage instead, keeping the decoder element itself at 100% of that frame.
+  if (ratio && stageWidth > 0 && stageHeight > 0) {
+    const frameWidth = Math.min(stageWidth, stageHeight * ratio);
+    const frameHeight = frameWidth / ratio;
+    Object.assign(frame.style, {
+      position: 'absolute',
+      left: '50%',
+      top: '50%',
+      right: 'auto',
+      bottom: 'auto',
+      transform: 'translate(-50%, -50%)',
+      width: `${frameWidth}px`,
+      height: `${frameHeight}px`,
+      maxWidth: '100%',
+      maxHeight: '100%',
+      aspectRatio: style.aspectRatio,
+      opacity: style.opacity == null ? '1' : String(style.opacity),
+      backgroundColor: style.backgroundColor || '#000',
+      overflow: 'hidden',
+    });
+  } else {
+    Object.assign(frame.style, {
+      position: 'absolute',
+      inset: '0',
+      left: '0',
+      top: '0',
+      right: '0',
+      bottom: '0',
+      transform: 'none',
+      width: '100%',
+      height: '100%',
+      maxWidth: 'none',
+      maxHeight: 'none',
+      aspectRatio: 'auto',
+      opacity: style.opacity == null ? '1' : String(style.opacity),
+      backgroundColor: style.backgroundColor || '#000',
+      overflow: 'hidden',
+    });
+  }
+
+  // Only the wrapper owns custom ratio geometry. Reset it from the decoder
+  // element so switching between custom ratios and FIT never leaves stale CSS.
+  Object.assign(player.style, {
+    position: 'relative',
+    inset: 'auto',
+    left: 'auto',
+    top: 'auto',
+    right: 'auto',
+    bottom: 'auto',
+    transform: 'none',
+    maxWidth: 'none',
+    maxHeight: 'none',
+    aspectRatio: 'auto',
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    visibility: 'visible',
+    objectFit: style.objectFit || 'contain',
+    backgroundColor: style.backgroundColor || '#000',
+    opacity: '1',
+  });
+}
+
+/**
+ * Use ogv.js for Ogg/Theora media on web, while keeping the returned media-like
+ * player in videoRef so the shared controls, progress, and recording logic work.
+ */
+export function useWebOgvPlayback({
+  activeUrl,
+  type,
+  videoRef,
+  playerContainerRef,
+  playerStyle,
+  pausedRef,
+  onErrorRef,
+  onBufferingRef,
+  resourceBase,
+  paused = true,
+  muted = false,
+  volume = 1,
+  playbackRate = 1,
+  videoOnly = false,
+  onProgressRef,
+  onPlayingRef,
+  onEndedRef,
+  onPlaybackRouteRef,
+}) {
+  const useOgv = Boolean(isOgvSource(activeUrl, type));
+  const playerFrameRef = useRef(null);
+  const playbackOptionsRef = useRef({ paused, muted, volume, playbackRate, videoOnly });
+  playbackOptionsRef.current = { paused, muted, volume, playbackRate, videoOnly };
+  const playerStyleRef = useRef(playerStyle);
+  playerStyleRef.current = playerStyle;
+  const playerStyleKey = JSON.stringify(playerStyle || {});
+
+  useEffect(() => {
+    if (!useOgv || !activeUrl || typeof window === 'undefined') return undefined;
+    const container = playerContainerRef.current;
+    if (!container) return undefined;
+
+    let disposed = false;
+    let player = null;
+    let playerFrame = null;
+    let resizeObserver = null;
+    const reportError = (error) => {
+      if (disposed) return;
+      onBufferingRef?.current?.(false);
+      onErrorRef.current?.({
+        message: error?.message || 'OGV playback failed. The browser could not decode this Ogg/Theora stream.',
+        err: error,
+      });
+    };
+    const handleWaiting = () => onBufferingRef?.current?.(true);
+    const handleReady = () => {
+      onBufferingRef?.current?.(false);
+      onProgressRef?.current?.();
+      onPlaybackRouteRef?.current?.(activeUrl);
+      attemptPlayback(player, pausedRef);
+    };
+    const handlePlaying = () => {
+      onBufferingRef?.current?.(false);
+      onPlayingRef?.current?.();
+    };
+    const handleTimeUpdate = () => onProgressRef?.current?.();
+    const handleEnded = () => onEndedRef?.current?.();
+    const handleError = (event) => reportError(event?.error || event);
+    const handleResize = () => {
+      applyPlayerStyle(container, playerFrame, player, playerStyleRef.current);
+    };
+
+    onBufferingRef?.current?.(true);
+    const resolvedBase = normalizeResourceBase(resourceBase);
+    loadOgvRuntime(resolvedBase)
+      .then(({ OGVPlayer, OGVLoader, OGVCompat }) => {
+        if (disposed) return;
+        if (!OGVPlayer || (OGVCompat?.supported && !OGVCompat.supported('OGVPlayer'))) {
+          throw new Error('OGV playback is not supported in this browser (WebAssembly and Web Audio are required).');
+        }
+
+        OGVLoader.base = resolvedBase;
+        player = new OGVPlayer({
+          base: resolvedBase,
+          worker: true,
+        });
+        player.className = 'cinecrew-player__video';
+        playerFrame = document.createElement('div');
+        playerFrame.className = 'cinecrew-player__ogv-frame';
+        playerFrameRef.current = playerFrame;
+        playerFrame.appendChild(player);
+        applyPlayerStyle(container, playerFrame, player, playerStyleRef.current);
+        if (typeof ResizeObserver !== 'undefined') {
+          resizeObserver = new ResizeObserver(handleResize);
+          resizeObserver.observe(container);
+        } else {
+          window.addEventListener('resize', handleResize);
+        }
+        const options = playbackOptionsRef.current;
+        player.muted = Boolean(options.muted || options.videoOnly);
+        player.volume = Math.max(0, Math.min(1, Number(options.volume) || 0));
+        player.playbackRate = Number(options.playbackRate) || 1;
+        player.preload = 'auto';
+
+        player.addEventListener('waiting', handleWaiting);
+        player.addEventListener('loadstart', handleWaiting);
+        player.addEventListener('loadedmetadata', handleReady);
+        player.addEventListener('canplay', handleReady);
+        player.addEventListener('playing', handlePlaying);
+        player.addEventListener('timeupdate', handleTimeUpdate);
+        player.addEventListener('ended', handleEnded);
+        player.addEventListener('error', handleError);
+        container.replaceChildren(playerFrame);
+        videoRef.current = player;
+        player.src = activeUrl;
+        if (!options.paused) attemptPlayback(player, pausedRef);
+      })
+      .catch(reportError);
+
+    return () => {
+      disposed = true;
+      onBufferingRef?.current?.(false);
+      resizeObserver?.disconnect();
+      window.removeEventListener('resize', handleResize);
+      if (player) {
+        player.removeEventListener('waiting', handleWaiting);
+        player.removeEventListener('loadstart', handleWaiting);
+        player.removeEventListener('loadedmetadata', handleReady);
+        player.removeEventListener('canplay', handleReady);
+        player.removeEventListener('playing', handlePlaying);
+        player.removeEventListener('timeupdate', handleTimeUpdate);
+        player.removeEventListener('ended', handleEnded);
+        player.removeEventListener('error', handleError);
+        try { player.pause(); } catch {}
+        try { player.src = ''; } catch {}
+        try { player.remove(); } catch {}
+        if (videoRef.current === player) videoRef.current = null;
+      }
+      if (playerFrameRef.current === playerFrame) playerFrameRef.current = null;
+    };
+  }, [activeUrl, useOgv, playerContainerRef, videoRef, pausedRef, onErrorRef, onBufferingRef, resourceBase, onProgressRef, onPlayingRef, onEndedRef, onPlaybackRouteRef]);
+
+  useEffect(() => {
+    if (!useOgv) return;
+    const player = videoRef.current;
+    if (!player) return;
+    player.muted = Boolean(muted || videoOnly);
+    player.volume = Math.max(0, Math.min(1, Number(volume) || 0));
+    player.playbackRate = Number(playbackRate) || 1;
+    if (paused) player.pause();
+    else attemptPlayback(player, pausedRef);
+  }, [activeUrl, useOgv, videoRef, pausedRef, paused, muted, volume, playbackRate, videoOnly]);
+
+  useEffect(() => {
+    if (!useOgv) return;
+    applyPlayerStyle(
+      playerContainerRef.current,
+      playerFrameRef.current,
+      videoRef.current,
+      playerStyleRef.current,
+    );
+  }, [useOgv, playerContainerRef, videoRef, playerStyleKey]);
+
+  return useOgv;
+}

package/src/utils/playerError.js

@@ -0,0 +1,34 @@
+function messageFrom(value) {
+  if (typeof value === 'string') return value.trim();
+  if (value instanceof Error) return value.message?.trim() || '';
+  if (!value || typeof value !== 'object') return '';
+
+  // Prefer messages from the underlying media engine over a wrapper's
+  // user-facing summary so callers can log or display the real diagnostic.
+  const candidates = [
+    value.actualMessage,
+    value.err?.msg,
+    value.err?.message,
+    value.err?.error?.msg,
+    value.err?.error?.message,
+    value.err,
+    value.cause?.msg,
+    value.cause?.message,
+    value.cause,
+    value.error?.msg,
+    value.error?.message,
+    value.error,
+    value.msg,
+    value.message,
+  ];
+
+  for (const candidate of candidates) {
+    if (typeof candidate === 'string' && candidate.trim()) return candidate.trim();
+  }
+  return '';
+}
+
+/** Return the most specific available diagnostic from a browser/native player error. */
+export function getPlayerErrorMessage(error) {
+  return messageFrom(error);
+}

package/src/utils/webRecording.js

@@ -99,10 +99,20 @@ export function createVideoRecordingStream(video, playerElement, getAspectRatio,
   }
 
   if (!originClean) {
+    sourceStream.getTracks().forEach((track) => track.stop());
+    return null;
+  }
+
+  const mode = String(getAspectRatio?.() || 'FIT').toUpperCase();
+  const needsCanvas = mode !== 'FIT' && mode !== 'DEFAULT';
+  if (!needsCanvas) {
+    const stream = new MediaStream([...sourceStream.getVideoTracks(), ...audioTracks]);
     return {
-      stream: sourceStream,
+      stream,
       aspectRatioApplied: false,
-      cleanup: () => sourceStream.getTracks().forEach((track) => track.stop()),
+      cleanup: () => {
+        sourceStream.getTracks().forEach((track) => track.stop());
+      },
     };
   }
 
@@ -163,10 +173,12 @@ export async function createScreenRecordingStream() {
   };
 }
 
-export function getRecordingMimeType() {
+export function getRecordingMimeType(hasAudio = true) {
   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)) || '';
+  const candidates = hasAudio
+    ? ['video/webm;codecs=vp9,opus', 'video/webm;codecs=vp8,opus', 'video/webm']
+    : ['video/webm;codecs=vp9', 'video/webm;codecs=vp8', 'video/webm'];
+  return candidates.find((type) => MediaRecorder.isTypeSupported?.(type)) || (MediaRecorder.isTypeSupported?.('video/webm') ? 'video/webm' : '');
 }
 
 export function createRecordingDownloadLink(blob, title = 'cinecrew-recording') {