@cinecrew/cinecrew-player 0.1.4 → 0.1.6

package/src/web/index.js

@@ -3,10 +3,9 @@ import { useWebVideoAspectRatio } from '../native/media/web/useWebVideoAspectRat
 import { useWebMpegTsPlayback } from '../native/media/web/useWebMpegTsPlayback.web';
 import { useWebHlsPlayback } from '../native/media/web/useWebHlsPlayback.web';
 import { useWebAc3AudioPlayback } from '../native/media/web/useWebAc3AudioPlayback.web';
-import { YouTubeVideoPlayer } from '../native/media/YouTubeVideoPlayer.web.js';
-import { getYouTubeVideoId, getWebRuntimePlatform, useResolvedPlayerSource } from '../utils/sourceUtils';
+import { getWebRuntimePlatform, useResolvedPlayerSource } from '../utils/sourceUtils';
 import { EMOJI_GROUPS, searchEmojis } from '../data/emoji';
-import { createRecordingDownloadLink, createVideoRecordingStream, downloadRecording, getRecordingMimeType } from '../utils/webRecording';
+import { createRecordingDownloadLink, createVideoRecordingStream, createScreenRecordingStream, downloadRecording, getRecordingMimeType } from '../utils/webRecording';
 import { invokePlayerAction } from '../utils/invokePlayerAction.js';
 import { emitProgressBarTime } from '../utils/progressBarTime.js';
 import './styles.css';
@@ -250,13 +249,14 @@ function WebPlaybackRateControl({ value, onChange }) {
 function WebBottomControls(props) {
   const {
     isLive, overrides, theme, icons, currentTime, duration, seekTo,
+    progressBarVisible, inlinePreview, title,
     showAspectMenu, setShowAspectMenu, selectAspect, aspectRatios, selectedAspectRatio,
     audioOnly, setAudioOnlyMode, availableTracks, selectedAudioTrack,
     showAudioMenu, setShowAudioMenu, selectAudio, playbackRate,
     setPlaybackRateAction, fullscreen, toggleFullscreen,
   } = props;
   let seek = null;
-  if (duration > 0 && isControlEnabled(overrides, 'seek', true)) {
+  if (duration > 0 && progressBarVisible && isControlEnabled(overrides, 'seek', true)) {
     seek = h(WebSeekControl, { currentTime, duration, theme, onSeek: seekTo });
   }
   let aspect = null;
@@ -300,6 +300,7 @@ function WebBottomControls(props) {
     seek,
     h('div', { className: 'cinecrew-player__bottom-actions' },
       h('div', { className: 'cinecrew-player__bottom-left-actions' },
+        inlinePreview && title ? h('span', { className: 'cinecrew-player__inline-title', title }, title) : null,
         renderControlButton({ name: 'audioOnly', label: audioOnlyLabel, callback: () => setAudioOnlyMode(true), options: { active: audioOnly }, overrides, icons, theme }),
         aspect),
       h('div', { className: 'cinecrew-player__bottom-right-actions' },
@@ -351,7 +352,7 @@ function WebRecordingOverlay(props) {
   }, getRecordingOverlayContent(props), dismissButton);
 }
 
-function WebPlayerControls({ locked, buffering, overrides, theme, icons, unlockedControls, toggleLock, paused, title, togglePlay, bottomProps }) {
+function WebPlayerControls({ locked, buffering, overrides, theme, icons, unlockedControls, toggleLock, paused, title, inlinePreview, togglePlay, bottomProps }) {
   let leftControls = locked ? null : unlockedControls.left;
   let rightControls = unlockedControls.right;
   if (locked) {
@@ -375,7 +376,7 @@ function WebPlayerControls({ locked, buffering, overrides, theme, icons, unlocke
   return h('div', { className: `cinecrew-player__controls${recordingUiVisible ? ' is-recording' : ''}`, style: { color: theme.controlColor } },
     h('div', { className: 'cinecrew-player__top-controls' },
       h('div', { className: 'cinecrew-player__top-left-actions' }, leftControls),
-      !locked && paused && title ? h('div', { className: 'cinecrew-player__title', style: { color: theme.controlColor }, title }, title) : null,
+      !locked && !inlinePreview && paused && title ? h('div', { className: 'cinecrew-player__title', style: { color: theme.controlColor }, title }, title) : null,
       h('div', { className: 'cinecrew-player__top-right-actions' }, rightControls)),
     centerControls,
     h(WebRecordingOverlay, {
@@ -394,10 +395,9 @@ function WebPlayerControls({ locked, buffering, overrides, theme, icons, unlocke
 }
 
 function WebPlayerSurface({
-  youtubeVideoId,
+  title,
   streamUrl,
   videoRef,
-  youtubeRef,
   directVideoSource,
   poster,
   autoPlay,
@@ -416,28 +416,10 @@ function WebPlayerSurface({
   onProgress,
   onPlaying,
   onEnded,
-  onStateChange,
   onError,
   handleError,
+  corsMode,
 }) {
-  if (youtubeVideoId) {
-    return h(YouTubeVideoPlayer, {
-      ref: youtubeRef,
-      videoId: youtubeVideoId,
-      paused,
-      muted: muted || videoOnly,
-      volume,
-      playbackRate,
-      onReady,
-      onProgress,
-      onPlaying,
-      onBuffering: bufferingRef.current,
-      onStateChange,
-      onError,
-      onEnded,
-      style: drawerResize ? { width: 'var(--cinecrew-media-width, 64%)', height: '100%', inset: '0 auto 0 0' } : undefined,
-    });
-  }
   if (!streamUrl) return h('div', { className: 'cinecrew-player__empty' });
   let resizedVideoStyle = {};
   if (drawerResize && videoStyle.width === 'auto') {
@@ -461,6 +443,7 @@ function WebPlayerSurface({
     };
   }
   return h('video', {
+    key: `${directVideoSource || ''}:${corsMode || 'nocors'}`,
     ref: videoRef,
     className: 'cinecrew-player__video',
     src: directVideoSource,
@@ -469,6 +452,7 @@ function WebPlayerSurface({
     muted: muted || videoOnly,
     playsInline: true,
     preload: 'auto',
+    crossOrigin: corsMode,
     style: {
       ...videoStyle,
       ...resizedVideoStyle,
@@ -478,7 +462,7 @@ function WebPlayerSurface({
     onError: (event) => {
       if (!directVideoSource) return;
       const mediaError = event.currentTarget?.error;
-      handleError({ message: mediaError?.message || 'The browser could not load this stream. Check URL, codec and CORS support.', code: mediaError?.code, cause: mediaError });
+      handleError({ message: mediaError?.message || 'The browser could not load this stream. Check URL, codec and CORS support.', code: mediaError?.code, cause: mediaError, isCorsCandidate: corsMode === 'anonymous' });
     },
   });
 }
@@ -486,7 +470,7 @@ function WebPlayerSurface({
 function WebAudioOnlyCard({ poster, title, theme, icons, onSwitchToVideo }) {
   return h('div', {
     className: 'cinecrew-player__audio-card',
-    style: { background: theme.surfaceColor, color: theme.controlColor, borderColor: theme.accentColor },
+    style: { background: '#07090E', color: theme.controlColor, borderColor: theme.accentColor },
   },
   poster
     ? h('img', { className: 'cinecrew-player__audio-poster', src: poster, alt: '' })
@@ -524,10 +508,6 @@ function getPanelIntegration(activePanel, integrations) {
   return null;
 }
 
-function getActiveMediaUrl(youtubeVideoId, streamUrl) {
-  return youtubeVideoId ? '' : streamUrl;
-}
-
 function getInlinePlayerStyle(inlinePreview, rect) {
   if (!inlinePreview || !rect) return {};
   return { position: 'absolute', left: rect.x, top: rect.y, width: rect.width, height: rect.height };
@@ -646,6 +626,7 @@ function WebPlayerLayout(props) {
       toggleLock: props.toggleLock,
       paused: props.isPaused,
       title: props.title,
+      inlinePreview: props.inlinePreview,
       togglePlay: props.togglePlay,
       bottomProps: props.bottomControlProps,
     });
@@ -683,8 +664,7 @@ function WebPlayerLayout(props) {
   panelNode);
 }
 
-function getStreamMode(youtubeVideoId, mpegTs, useHls) {
-  if (youtubeVideoId) return 'youtube';
+function getStreamMode(mpegTs, useHls) {
   if (mpegTs) return 'mpegts';
   if (useHls) return 'hls';
   return 'native';
@@ -1157,6 +1137,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     volume: volumeProp = 1,
     playbackRate: playbackRateProp = 1,
     paused: pausedProp,
+    showProgressBar = true,
     controls: controlOverrides = {},
     features = {},
     drawerMode = 'overlay',
@@ -1197,11 +1178,13 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
   const resolution = useResolvedPlayerSource(source, url, resolveSource, getWebRuntimePlatform());
   const media = resolution.source || {};
   const streamUrl = String(media.uri || media.url || '');
-  const youtubeVideoId = getYouTubeVideoId(media);
   const isLive = liveProp ?? media.isLive ?? false;
+  const progressBarVisible = showProgressBar !== false
+    && isControlEnabled(controlOverrides, 'seek', true)
+    && !isLive;
+  const progressBarCallback = progressBarVisible ? onProgressBarChange : undefined;
   const theme = { ...DEFAULT_THEME, ...themeProp };
   const videoRef = useRef(null);
-  const youtubeRef = useRef(null);
   const playerRef = useRef(null);
   const publicPlayerRef = useRef(null);
   const pausedRef = useRef(pausedProp ?? !autoPlay);
@@ -1214,6 +1197,9 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
   const [aspectRatio, setAspectRatio] = useState(props.defaultAspectRatio || 'FIT');
   const [locked, setLocked] = useState(false);
   const [buffering, setBuffering] = useState(Boolean(streamUrl) || resolution.loading);
+  const [corsMode, setCorsMode] = useState('anonymous');
+  const corsModeRef = useRef('anonymous');
+  corsModeRef.current = corsMode;
   const [error, setError] = useState('');
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
@@ -1246,6 +1232,13 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
 
   const handleError = useCallback((detail) => {
     const message = typeof detail === 'string' ? detail : detail?.message || 'Unable to play this media source.';
+    // If the video failed while crossOrigin="anonymous" was set, retry without
+    // CORS so playback still works (recording will fall back to screen capture).
+    if (detail?.isCorsCandidate && corsModeRef.current === 'anonymous') {
+      setCorsMode(undefined);
+      corsModeRef.current = undefined;
+      return;
+    }
     setError(message);
     setBuffering(false);
     errorRef.current?.(detail instanceof Error ? detail : { ...detail, message });
@@ -1268,6 +1261,8 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     setDuration(0);
     lastProgressBarSecondRef.current = null;
     setAvailableTracks([]);
+    setCorsMode('anonymous');
+    corsModeRef.current = 'anonymous';
     if (resolution.error) {
       handleError(resolution.error);
       return;
@@ -1306,7 +1301,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     if (liveChatNonce) setActivePanel('chat');
   }, [liveChatNonce]);
 
-  const activeUrl = getActiveMediaUrl(youtubeVideoId, streamUrl);
+  const activeUrl = streamUrl;
 
   const mpegTs = useWebMpegTsPlayback({
     streamUrl,
@@ -1325,7 +1320,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     pausedRef: pausedStateRef,
     onErrorRef,
   });
-  const streamMode = getStreamMode(youtubeVideoId, mpegTs.useMpegTs, useHls);
+  const streamMode = getStreamMode(mpegTs.useMpegTs, useHls);
   const ac3AudioPlayback = useWebAc3AudioPlayback({
     active: mpegTs.useAc3Fallback,
     streamUrl,
@@ -1344,7 +1339,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
         handleError(playError);
       }
     });
-  }, [isPaused, streamUrl, youtubeVideoId, handleError]);
+  }, [isPaused, streamUrl, handleError]);
 
   useEffect(() => {
     const video = videoRef.current;
@@ -1352,7 +1347,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     video.muted = muted || videoOnly;
     video.volume = volume;
     video.playbackRate = Number(playbackRate) || 1;
-  }, [muted, volume, playbackRate, videoOnly, streamUrl, youtubeVideoId]);
+  }, [muted, volume, playbackRate, videoOnly, streamUrl]);
 
   useEffect(() => {
     if (!streamUrl) return undefined;
@@ -1370,20 +1365,25 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     let callback = actions?.[name];
     if (name === 'onAspectRatioChange') callback = callback || props.onAspectRatioChange;
     else if (name === 'onFullscreen') callback = callback || onFullscreen;
+    else if (name === 'onBack') callback = callback || onBack || props.onClose;
     return invokePlayerAction(
       fallback,
       callback,
       payload,
       { video: videoRef.current, player: publicPlayerRef.current },
     );
-  }, [actions, props.onAspectRatioChange, onFullscreen]);
+  }, [actions, props.onAspectRatioChange, onFullscreen, onBack, props.onClose]);
 
   const startBuiltinRecording = useCallback(async () => {
     const video = videoRef.current;
-    if (!video || youtubeVideoId) throw new Error('This source cannot be recorded from the browser player.');
     const mimeType = getRecordingMimeType();
     if (typeof MediaRecorder === 'undefined' || !mimeType) throw new Error('This browser does not support WebM audio/video recording.');
-    const capture = createVideoRecordingStream(video, playerRef.current, () => aspectRatioRef.current, ac3AudioPlayback.getRecordingAudioStream());
+    if (!video) throw new Error('The media element is not ready to record.');
+    let capture = createVideoRecordingStream(video, playerRef.current, () => aspectRatioRef.current, ac3AudioPlayback.getRecordingAudioStream());
+    // Fallback: if direct capture failed (CORS / tainted), use screen capture.
+    if (!capture) {
+      capture = await createScreenRecordingStream();
+    }
     const recorder = new MediaRecorder(capture.stream, { mimeType });
     recordingCaptureRef.current = capture;
     recordingChunksRef.current = [];
@@ -1408,6 +1408,12 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
         setRecordingStatus('complete');
         try {
           if (!downloadRecording(blob, title)) throw new Error('The browser did not start the recording download. Use Download recording to retry.');
+          // Auto-dismiss back to idle after a successful download.
+          setRecordingStatus('idle');
+          recordingBlobRef.current = null;
+          if (recordingDownloadLinkRef.current?.url) URL.revokeObjectURL(recordingDownloadLinkRef.current.url);
+          recordingDownloadLinkRef.current = null;
+          setRecordingDownloadLink(null);
         } catch (downloadError) {
           setRecordingError(downloadError?.message || 'The recording could not be downloaded. Use Download recording to retry.');
         }
@@ -1432,7 +1438,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
       setRecordingError(event.error?.message || 'The browser could not record this stream.');
     }, { once: true });
     recorder.start(1000);
-  }, [ac3AudioPlayback, title, youtubeVideoId]);
+  }, [ac3AudioPlayback, title]);
 
   const startRecording = useCallback(async () => {
     setRecordingError('');
@@ -1557,10 +1563,9 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
   const restart = useCallback(() => action('onRestart', () => {
     const video = videoRef.current;
     if (video) video.currentTime = 0;
-    else youtubeRef.current?.seekTo?.(0);
     setPaused(false);
-    emitProgressBarTime(0, onProgressBarChange, lastProgressBarSecondRef, { force: true });
-  }, { currentTime: Number(videoRef.current?.currentTime) || 0 }), [action, onProgressBarChange, setPaused]);
+    emitProgressBarTime(0, progressBarCallback, lastProgressBarSecondRef, { force: true });
+  }, { currentTime: Number(videoRef.current?.currentTime) || 0 }), [action, progressBarCallback, setPaused]);
   const toggleMute = useCallback(() => action('onMute', () => setMuted((value) => !value), { muted: !muted }), [action, muted]);
   const toggleLock = useCallback(() => action('onLock', () => setLocked((value) => !value), { locked: !locked }), [action, locked]);
   const selectAspect = useCallback((next) => action('onAspectRatioChange', () => setAspectRatio(next), { aspectRatio: next }), [action]);
@@ -1576,10 +1581,9 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
   const seekTo = useCallback((seconds) => action('onSeek', () => {
     const targetSeconds = Math.max(0, Number(seconds) || 0);
     if (videoRef.current) videoRef.current.currentTime = targetSeconds;
-    else youtubeRef.current?.seekTo?.(targetSeconds);
-    emitProgressBarTime(targetSeconds, onProgressBarChange, lastProgressBarSecondRef, { force: true });
-  }, { seconds: Number(seconds) || 0 }), [action, onProgressBarChange]);
-  const handleBack = useCallback(() => action('onBack', onBack || props.onClose, { title, source: media }), [action, onBack, props.onClose, title, media]);
+    emitProgressBarTime(targetSeconds, progressBarCallback, lastProgressBarSecondRef, { force: true });
+  }, { seconds: Number(seconds) || 0 }), [action, progressBarCallback]);
+  const handleBack = useCallback(() => action('onBack', undefined, { title, source: media }), [action, title, media]);
   useImperativeHandle(ref, () => {
     const api = {
       play: () => setPaused(false),
@@ -1613,8 +1617,9 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
 
   const hasChat = typeof integrations.liveChat?.loadMessages === 'function' || typeof renderLiveChat === 'function' || typeof integrations.liveChat?.render === 'function' || typeof actions.onLiveChatOpen === 'function';
   const hasEpg = typeof integrations.epg?.loadListings === 'function' || typeof renderEpg === 'function' || typeof integrations.epg?.render === 'function' || typeof actions.onEpgOpen === 'function';
+  const canRecordFromBrowser = typeof MediaRecorder !== 'undefined';
   const hasRecording = controlOverrides.recording !== false
-    && (!!integrations.recording || typeof actions.onRecordingStart === 'function' || (!youtubeVideoId && typeof MediaRecorder !== 'undefined'));
+    && (!!integrations.recording || typeof actions.onRecordingStart === 'function' || canRecordFromBrowser);
   const hasDiagnostics = Boolean(features.diagnostics) || typeof actions.onDiagnosticsOpen === 'function';
   const sourceType = String(media.type || media.mimeType || '').toLowerCase();
   const directVideoSource = getDirectVideoSource({
@@ -1624,11 +1629,6 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     activeUrl,
   });
 
-  const handleYouTubeStateChange = useCallback((state) => {
-    if (state === 'playing') setIsPaused(false);
-    if (state === 'paused' || state === 'ended') setIsPaused(true);
-  }, []);
-
   useEffect(() => {
     const video = videoRef.current;
     if (!video) return undefined;
@@ -1636,7 +1636,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     const updateTime = () => {
       setCurrentTime(Number(video.currentTime) || 0);
       if (Number.isFinite(video.duration)) setDuration(video.duration);
-      emitProgressBarTime(Number(video.currentTime) || 0, onProgressBarChange, lastProgressBarSecondRef);
+      emitProgressBarTime(Number(video.currentTime) || 0, progressBarCallback, lastProgressBarSecondRef);
       onProgress?.({ currentTime: (Number(video.currentTime) || 0) * 1000, duration: (Number(video.duration) || 0) * 1000, target: video.currentTime });
     };
     const onReadyEvent = () => {
@@ -1664,7 +1664,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
       video.removeEventListener('timeupdate', updateTime);
       video.removeEventListener('ended', endedHandler);
     };
-  }, [onReady, onPlaying, onProgress, onProgressBarChange, onEnded, tracksProp]);
+  }, [onReady, onPlaying, onProgress, progressBarCallback, onEnded, tracksProp]);
 
   useEffect(() => {
     if (selectedAudioTrack === undefined || selectedAudioTrack === null) return;
@@ -1680,8 +1680,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
   }, []);
 
   const toggleFullscreen = () => action('onFullscreen', () => {
-    if (inlinePreview && typeof onPromotePreview === 'function') return onPromotePreview({ title, source: media });
-    if (document.fullscreenElement) document.exitFullscreen?.();
+    if (document.fullscreenElement === playerRef.current) document.exitFullscreen?.();
     else playerRef.current?.requestFullscreen?.();
   }, { isFullscreen: !fullscreen });
   const openPanel = (panel) => {
@@ -1741,18 +1740,10 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     messagePageSize,
   });
 
-  const handleYouTubeProgress = (event) => {
-    const seconds = Number(event.currentTime) / 1000 || 0;
-    setCurrentTime(seconds);
-    setDuration(Number(event.duration) / 1000 || 0);
-    emitProgressBarTime(seconds, onProgressBarChange, lastProgressBarSecondRef);
-    onProgress?.(event);
-  };
   const mediaSurface = h(WebPlayerSurface, {
-    youtubeVideoId,
+    title,
     streamUrl,
     videoRef,
-    youtubeRef,
     directVideoSource,
     poster,
     autoPlay,
@@ -1768,15 +1759,18 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     onPromotePreview,
     bufferingRef: onBufferingRef,
     onReady,
-    onProgress: handleYouTubeProgress,
+    onProgress,
     onPlaying,
     onEnded,
-    onStateChange: handleYouTubeStateChange,
     onError: handleError,
     handleError,
+    corsMode,
   });
   const bottomControlProps = {
     isLive,
+    progressBarVisible,
+    inlinePreview,
+    title,
     overrides: controlOverrides,
     theme,
     icons,
@@ -1827,7 +1821,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     audioOnly,
     activePanel,
     webPanel,
-    renderBackButton: () => control('back', 'Close player', () => action('onBack', props.onBack || props.onClose, { title, source: media }), { icon: 'close' }),
+    renderBackButton: () => control('back', 'Close player', () => action('onBack', undefined, { title, source: media }), { icon: 'close' }),
     onSwitchToVideo: () => setAudioOnlyMode(false),
     locked,
     controlOverrides,
@@ -1854,7 +1848,6 @@ export const InlineLivePlayer = React.memo(function InlineLivePlayer({
   paused = false,
   isActive = true,
   onActivate,
-  onFullscreen,
   controls = {},
   actions = {},
   theme,
@@ -1897,7 +1890,6 @@ export const InlineLivePlayer = React.memo(function InlineLivePlayer({
     onError,
     onPlaying,
     inlinePreview: true,
-    onPromotePreview: onFullscreen,
     style: { width: '100%', height, aspectRatio: '16 / 9', ...style },
   });
 });

package/src/web/styles.css

@@ -28,8 +28,7 @@
   background: #000;
 }
 
-.cinecrew-player__video,
-.cinecrew-player__youtube {
+.cinecrew-player__video {
   transition: width 180ms ease, height 180ms ease, top 180ms ease, left 180ms ease, transform 180ms ease;
 }
 
@@ -51,6 +50,18 @@
   text-shadow: 0 1px 4px #000;
 }
 
+.cinecrew-player__inline-title {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: min(52vw, 420px);
+  overflow: hidden;
+  color: var(--cinecrew-text, #fff);
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-shadow: 0 1px 4px #000;
+}
+
 .cinecrew-player__controls {
   position: absolute;
   inset: 0;

package/types/index.d.ts

@@ -80,10 +80,11 @@ export interface PlayerActionContext {
   video?: unknown | null;
 }
 
-/** Notification invoked after the player's built-in action has executed. */
+/** App callback for a player action. Back is app-owned and has no built-in behavior. */
 export type PlayerAction = (payload?: Record<string, unknown>, context?: PlayerActionContext) => unknown;
 
 export interface PlayerActions {
+  /** User-owned navigation event. The player does not close or navigate on its own. */
   onBack?: PlayerAction;
   onPlayPause?: PlayerAction;
   onSeek?: PlayerAction;
@@ -177,6 +178,7 @@ export interface PlayerIntegrations {
     render?: (context: { title: string; source: PlayerSource; onClose: () => void }) => React.ReactNode;
   };
   recording?: {
+    /** Starts host-managed recording for the active direct media source. */
     start?: (args: { getVideoElement: () => unknown | null; streamUrl: string; title?: string }) => Promise<unknown>;
     pause?: () => Promise<unknown>;
     resume?: () => Promise<unknown>;
@@ -209,6 +211,8 @@ export interface CineCrewPlayerProps {
   volume?: number;
   playbackRate?: number;
   controls?: PlayerControls;
+  /** Show the playback progress/seek bar. When false, onProgressBarChange is not called. Defaults to true. */
+  showProgressBar?: boolean;
   /** Web/Electron chat and EPG drawer behavior. Overlay keeps the video full-size; resize shrinks it to make room. */
   drawerMode?: PlayerDrawerMode;
   /** Web CSS or React Native view-style overrides for the chat, EPG, and diagnostics drawer. */
@@ -243,7 +247,8 @@ export interface CineCrewPlayerProps {
   playlist?: Array<Record<string, unknown>>;
   shuffle?: boolean;
   onClose?: () => void;
-  onBack?: () => void;
+  /** User-owned back event. The player does not close or navigate on its own. */
+  onBack?: PlayerAction;
   onFullscreen?: (state: { isFullscreen: boolean }) => void;
   /** Invoked after the player applies an aspect ratio selection; actions.onAspectRatioChange takes precedence when both are supplied. */
   onAspectRatioChange?: PlayerAction;
@@ -279,6 +284,7 @@ export interface InlineLivePlayerProps {
   paused?: boolean;
   isActive?: boolean;
   onActivate?: () => void;
+  /** @deprecated Inline fullscreen is self-contained. Use actions.onFullscreen to observe its state. */
   onFullscreen?: () => void;
   controls?: Pick<PlayerControls, 'playPause' | 'mute' | 'fullscreen'>;
   actions?: Pick<PlayerActions, 'onPlayPause' | 'onMute' | 'onFullscreen'>;

package/src/native/media/YouTubeVideoPlayer.native.js

@@ -1,120 +0,0 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { WebView } from 'react-native-webview';
-import { buildYouTubePlayerHtml } from '../../utils/youtubeHtml';
-
-const stateName = (value) => ({ 0: 'ended', 1: 'playing', 2: 'paused', 3: 'buffering', 5: 'cued' })[value] || 'unstarted';
-
-export const YouTubeVideoPlayer = forwardRef(function YouTubeVideoPlayer({
-  videoId,
-  paused = false,
-  muted = false,
-  volume = 1,
-  playbackRate = 1,
-  onReady,
-  onProgress,
-  onPlaying,
-  onBuffering,
-  onStateChange,
-  onError,
-  onEnded,
-}, ref) {
-  const webViewRef = useRef(null);
-  const handlersRef = useRef({});
-  const latestPropsRef = useRef({});
-  const readyRef = useRef(false);
-  handlersRef.current = { onReady, onProgress, onPlaying, onBuffering, onStateChange, onError, onEnded };
-  latestPropsRef.current = { paused, muted, volume, playbackRate };
-
-  const sendCommand = useCallback((name, value) => {
-    const serialized = JSON.stringify(value ?? null);
-    webViewRef.current?.injectJavaScript(
-      `window.cinecrewPlayerCommand && window.cinecrewPlayerCommand(${JSON.stringify(name)}, ${serialized}); true;`
-    );
-  }, []);
-
-  const handleMessage = useCallback((event) => {
-    let message;
-    try { message = JSON.parse(event.nativeEvent.data); } catch { return; }
-    const handlers = handlersRef.current;
-    if (message.type === 'ready') {
-      readyRef.current = true;
-      handlers.onBuffering?.(false);
-      handlers.onReady?.({ youtube: true });
-      const latest = latestPropsRef.current;
-      sendCommand(latest.paused ? 'pause' : 'play');
-      sendCommand(latest.muted ? 'mute' : 'unmute');
-      sendCommand('volume', Math.round(Math.max(0, Math.min(1, latest.volume)) * 100));
-      sendCommand('rate', latest.playbackRate);
-      return;
-    }
-    if (message.type === 'state') {
-      const state = stateName(Number(message.data?.state));
-      handlers.onStateChange?.(state);
-      handlers.onBuffering?.(state === 'buffering');
-      if (state === 'playing') handlers.onPlaying?.({ state, youtube: true });
-      if (state === 'ended') handlers.onEnded?.();
-      return;
-    }
-    if (message.type === 'progress') {
-      const currentTime = Number(message.data?.currentTime) || 0;
-      const duration = Number(message.data?.duration) || 0;
-      handlers.onProgress?.({ currentTime: currentTime * 1000, duration: duration * 1000, target: currentTime });
-      return;
-    }
-    if (message.type === 'error') {
-      handlers.onError?.({ code: message.data?.code, message: `YouTube playback failed (${message.data?.code}).` });
-    }
-  }, [sendCommand]);
-
-  useEffect(() => { if (readyRef.current) sendCommand(paused ? 'pause' : 'play'); }, [paused, sendCommand]);
-  useEffect(() => {
-    if (!readyRef.current) return;
-    sendCommand(muted ? 'mute' : 'unmute');
-    sendCommand('volume', Math.round(Math.max(0, Math.min(1, volume)) * 100));
-  }, [muted, volume, sendCommand]);
-  useEffect(() => { if (readyRef.current) sendCommand('rate', playbackRate); }, [playbackRate, sendCommand]);
-
-  const validVideoId = /^[\w-]{11}$/.test(String(videoId || ''));
-  const html = useMemo(
-    () => validVideoId ? buildYouTubePlayerHtml(videoId, !paused) : '<!doctype html><html><body style="background:#000"></body></html>',
-    [validVideoId, videoId],
-  );
-  const webViewSource = useMemo(() => ({ html, baseUrl: 'https://www.youtube.com' }), [html]);
-
-  useEffect(() => {
-    if (!validVideoId) handlersRef.current.onError?.(new Error('A valid YouTube video ID is required.'));
-  }, [validVideoId]);
-
-  useImperativeHandle(ref, () => ({
-    play: () => sendCommand('play'),
-    resume: () => sendCommand('play'),
-    pause: () => sendCommand('pause'),
-    seek: (ratio) => sendCommand('seekRatio', Math.max(0, Math.min(1, Number(ratio) || 0))),
-    seekTo: (seconds) => sendCommand('seek', Math.max(0, Number(seconds) || 0)),
-    getVideoElement: () => null,
-  }), [sendCommand]);
-
-  return React.createElement(View, { style: styles.container }, React.createElement(WebView, {
-    ref: webViewRef,
-    source: webViewSource,
-    originWhitelist: ['*'],
-    javaScriptEnabled: true,
-    domStorageEnabled: true,
-    allowsInlineMediaPlayback: true,
-    mediaPlaybackRequiresUserAction: false,
-    allowsFullscreenVideo: false,
-    scrollEnabled: false,
-    bounces: false,
-    onMessage: handleMessage,
-    onError: (event) => handlersRef.current.onError?.(event.nativeEvent || event),
-    style: styles.webView,
-  }));
-});
-
-const styles = StyleSheet.create({
-  container: { ...StyleSheet.absoluteFillObject, backgroundColor: '#000' },
-  webView: { flex: 1, backgroundColor: '#000' },
-});
-
-export default YouTubeVideoPlayer;