@cinecrew/cinecrew-player 0.1.2 → 0.1.4

package/src/web/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useWebVideoAspectRatio } from '../native/media/web/useWebVideoAspectRatio';
 import { useWebMpegTsPlayback } from '../native/media/web/useWebMpegTsPlayback.web';
 import { useWebHlsPlayback } from '../native/media/web/useWebHlsPlayback.web';
@@ -6,6 +6,9 @@ import { useWebAc3AudioPlayback } from '../native/media/web/useWebAc3AudioPlayba
 import { YouTubeVideoPlayer } from '../native/media/YouTubeVideoPlayer.web.js';
 import { getYouTubeVideoId, getWebRuntimePlatform, useResolvedPlayerSource } from '../utils/sourceUtils';
 import { EMOJI_GROUPS, searchEmojis } from '../data/emoji';
+import { createRecordingDownloadLink, createVideoRecordingStream, downloadRecording, getRecordingMimeType } from '../utils/webRecording';
+import { invokePlayerAction } from '../utils/invokePlayerAction.js';
+import { emitProgressBarTime } from '../utils/progressBarTime.js';
 import './styles.css';
 
 const h = React.createElement;
@@ -21,10 +24,23 @@ const DEFAULT_THEME = {
 const DEFAULT_ICONS = {
   play: 'play', pause: 'pause', restart: 'restart', lock: 'lock', unlock: 'lock-open',
   mute: 'volume-mute', unmute: 'volume-high', aspectRatio: 'aspect-ratio', videoOnly: 'video',
-  audio: 'music-note', back: 'arrow-left', recording: 'record-rec', stop: 'stop',
+  audio: 'music-note', audioOnly: 'headphones', back: 'arrow-left', recording: 'record-rec', stop: 'stop',
   liveChat: 'comment-text-multiple-outline', epg: 'television-classic', diagnostics: 'logs',
   fullscreen: 'fullscreen', close: 'close',
 };
+const DEFAULT_ASPECT_RATIOS = ['FIT', 'FILL', 'STRETCH', '16:9', '4:3', '21:9', '1:1'];
+
+function normalizeAspectRatios(aspectRatios) {
+  const values = Array.isArray(aspectRatios) && aspectRatios.length ? aspectRatios : DEFAULT_ASPECT_RATIOS;
+  const unique = new Map();
+  values.forEach((item) => {
+    const value = typeof item === 'string' ? item : item?.value;
+    if (typeof value !== 'string' || !value.trim()) return;
+    const label = typeof item === 'string' ? item : item.label || value;
+    unique.set(value, { value, label });
+  });
+  return unique.size ? [...unique.values()] : DEFAULT_ASPECT_RATIOS.map((value) => ({ value, label: value }));
+}
 
 // Inline SVG keeps the React DOM/Electron entry independent of React Native,
 // Expo, and native icon-font packages. The native entry uses Expo vector icons.
@@ -34,11 +50,12 @@ const WEB_ICON_PATHS = {
   restart: 'M12 5V1L7 6l5 5V7a6 6 0 1 1-5.65 8H4.26A9 9 0 1 0 12 5z',
   lock: 'M18 8h-1V6a5 5 0 0 0-10 0v2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zM9 6a3 3 0 0 1 6 0v2H9zm3 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z',
   'lock-open': 'M18 8h-1V6a5 5 0 0 0-9.8-1H9a3 3 0 0 1 6 .8V8H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zm-6 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z',
-  'volume-mute': 'M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4.03v8.05A4.5 4.5 0 0 0 16.5 12zM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54z',
+  'volume-mute': 'M3 9v6h4l5 5V4L7 9H3zm13.59 3 2.12-2.12 1.41 1.41L19 13.41l2.12 2.12-1.41 1.41-2.12-2.12-2.12 2.12-1.41-1.41 2.12-2.12-2.12-2.12 1.41-1.41z',
   'volume-high': 'M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4.03v8.05A4.5 4.5 0 0 0 16.5 12zM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54z',
   'aspect-ratio': 'M3 5h18v14H3zm2 2v10h14V7zm2 2h4v2H9v4H7zm10 6h-4v-2h2V9h2z',
   video: 'M18 7V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2l4 4V5zm-2 12H4V5h12z',
   'music-note': 'M12 3v12.26A4 4 0 1 0 14 19V7h6V3z',
+  headphones: 'M12 3a9 9 0 0 0-9 9v6a3 3 0 0 0 3 3h3v-9H5v-1a7 7 0 0 1 14 0v1h-4v9h3a3 3 0 0 0 3-3v-6a9 9 0 0 0-9-9z',
   'arrow-collapse': 'M4 4h6v2H6v4H4zm10 0h6v6h-2V6h-4zM4 14h2v4h4v2H4zm14 0h2v6h-6v-2h4z',
   logs: 'M3 3h18v18H3zm2 2v14h14V5zm3 3h2v2H8zm4 0h7v2h-7zm-4 4h2v2H8zm4 0h7v2h-7zm-4 4h2v2H8zm4 0h7v2h-7z',
   'arrow-left': 'M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z',
@@ -48,6 +65,13 @@ const WEB_ICON_PATHS = {
   'television-classic': 'M21 3H3a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h7v2h4v-2h7a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 15H3V5h18zM5 7h14v9H5z',
   fullscreen: 'M4 4h6v2H6v4H4zm10 0h6v6h-2V6h-4zM4 14h2v4h4v2H4zm14 0h2v6h-6v-2h4z',
   close: 'M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
+  send: 'M2 21 23 12 2 3v7l15 2-15 2z',
+  network: 'M12 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM4 16a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm16 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM10.7 7.4 5.3 16.7l1.7 1 5.4-9.3zm2.6 0 5.4 9.3-1.7 1-5.4-9.3z',
+  speedometer: 'M12 3a9 9 0 1 0 9 9h-2a7 7 0 1 1-2.05-4.95l1.42-1.42A8.96 8.96 0 0 0 12 3zm7.7 1.3-6.4 6.4a2.5 2.5 0 1 0 1.4 1.4l6.4-6.4z',
+  buffer: 'M4 5h16v3H4zm0 5.5h16v3H4zm0 5.5h16v3H4z',
+  clock: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1-13h-2v6l5 3 1-1.7-4-2.3z',
+  display: 'M3 4h18v13H3zm2 2v9h14V6zm5 13h4v2h-4z',
+  frames: 'M4 4h16v12H4zm2 2v8h12V6zm-4 13h16v2H2zm4-3h16v2H6z',
 };
 
 function getSource(source, url) {
@@ -119,71 +143,94 @@ function getPanelActionName(panel) {
 function WebSeekControl({ currentTime, duration, theme, onSeek }) {
   const [seekDraft, setSeekDraft] = useState(currentTime);
   const [isDragging, setIsDragging] = useState(false);
+  const seekDraftRef = useRef(currentTime);
 
   useEffect(() => {
-    if (!isDragging) setSeekDraft(currentTime);
+    if (!isDragging) {
+      seekDraftRef.current = currentTime;
+      setSeekDraft(currentTime);
+    }
   }, [currentTime, isDragging]);
 
-  const updateSeek = (event) => {
+  const updateDraft = (event) => {
     const nextTime = Number(event.currentTarget.value);
+    seekDraftRef.current = nextTime;
     setSeekDraft(nextTime);
-    onSeek(nextTime);
   };
 
   const finishSeek = (event) => {
     if (!isDragging) return;
-    updateSeek(event);
+    const nextTime = event?.currentTarget && event.type !== 'blur'
+      ? Number(event.currentTarget.value)
+      : seekDraftRef.current;
+    seekDraftRef.current = nextTime;
+    setSeekDraft(nextTime);
     setIsDragging(false);
+    onSeek(nextTime);
   };
+  const displayTime = Math.min(isDragging ? seekDraft : currentTime, duration);
+  const remainingTime = Math.max(0, duration - displayTime);
 
   return h('div', { className: 'cinecrew-player__seek' },
-    h('span', null, formatTime(currentTime)),
+    h('span', null, formatTime(displayTime)),
     h('input', {
       type: 'range',
       'aria-label': 'Seek video',
       min: 0,
       max: duration,
       step: 'any',
-      value: Math.min(isDragging ? seekDraft : currentTime, duration),
-      onChange: updateSeek,
+      value: displayTime,
+      onChange: updateDraft,
       onPointerDown: (event) => {
         event.stopPropagation();
         setIsDragging(true);
-        setSeekDraft(Number(event.currentTarget.value));
+        seekDraftRef.current = Number(event.currentTarget.value);
+        setSeekDraft(seekDraftRef.current);
       },
       onPointerUp: finishSeek,
       onPointerCancel: finishSeek,
       onBlur: finishSeek,
+      onKeyDown: (event) => {
+        if (['ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key)) setIsDragging(true);
+      },
+      onKeyUp: (event) => {
+        if (['ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key)) finishSeek(event);
+      },
       style: { accentColor: theme.accentColor },
     }),
-    h('span', null, formatTime(duration)));
+    h('span', null, `−${formatTime(remainingTime)}`));
 }
 
-function WebAspectRatioMenu({ open, theme, icons, onToggle, onSelect }) {
-  const ratios = ['FIT', 'FILL', 'STRETCH', '16:9', '4:3', '1:1'];
+function WebAspectRatioMenu({ open, theme, icons, onToggle, onSelect, ratios, selectedRatio }) {
   let menu = null;
   if (open) {
     menu = h('div', { className: 'cinecrew-player__menu', style: { background: theme.surfaceColor } },
       ratios.map((ratio) => h('button', {
-        key: ratio,
+        key: ratio.value,
         type: 'button',
+        className: `cinecrew-player__menu-option${selectedRatio === ratio.value ? ' is-selected' : ''}`,
+        'aria-pressed': selectedRatio === ratio.value,
         onClick: () => onSelect(ratio),
-      }, ratio)));
+      }, ratio.label)));
   }
   return h('div', { className: 'cinecrew-player__menu-wrap cinecrew-player__menu-wrap--aspect', key: 'aspectRatio' },
     h(PlayerButton, { name: 'aspectRatio', label: 'Aspect ratio', icons, theme, onClick: onToggle, active: open }),
     menu);
 }
 
-function WebAudioTrackMenu({ open, tracks, theme, icons, onToggle, onSelect }) {
+function WebAudioTrackMenu({ open, tracks, selectedTrackId, theme, icons, onToggle, onSelect }) {
   let menu = null;
   if (open) {
     menu = h('div', { className: 'cinecrew-player__menu', style: { background: theme.surfaceColor } },
-      tracks.map((track) => h('button', {
-        key: track.id,
-        type: 'button',
-        onClick: () => onSelect(track.id),
-      }, track.name)));
+      tracks.length
+        ? tracks.map((track, index) => h('button', {
+          key: track.id ?? index,
+          type: 'button',
+          className: String(track.id) === String(selectedTrackId) ? 'cinecrew-player__menu-option is-selected' : 'cinecrew-player__menu-option',
+          'aria-pressed': String(track.id) === String(selectedTrackId),
+          onClick: () => onSelect(track.id),
+        }, track.name || track.language || `Track ${index + 1}`))
+        : h('div', { className: 'cinecrew-player__menu-empty', role: 'status' }, 'No audio tracks available'));
   }
   return h('div', { className: 'cinecrew-player__menu-wrap', key: 'audioTracks' },
     h(PlayerButton, { name: 'audio', label: 'Audio tracks', icons, theme, onClick: onToggle, active: open }),
@@ -203,8 +250,8 @@ function WebPlaybackRateControl({ value, onChange }) {
 function WebBottomControls(props) {
   const {
     isLive, overrides, theme, icons, currentTime, duration, seekTo,
-    showAspectMenu, setShowAspectMenu, selectAspect, videoOnly,
-    setVideoOnlyMode, audioOnly, setAudioOnlyMode, availableTracks,
+    showAspectMenu, setShowAspectMenu, selectAspect, aspectRatios, selectedAspectRatio,
+    audioOnly, setAudioOnlyMode, availableTracks, selectedAudioTrack,
     showAudioMenu, setShowAudioMenu, selectAudio, playbackRate,
     setPlaybackRateAction, fullscreen, toggleFullscreen,
   } = props;
@@ -220,16 +267,19 @@ function WebBottomControls(props) {
       icons,
       onToggle: () => setShowAspectMenu((value) => !value),
       onSelect: (ratio) => {
-        selectAspect(ratio);
+        selectAspect(ratio.value);
         setShowAspectMenu(false);
       },
+      ratios: aspectRatios,
+      selectedRatio: selectedAspectRatio,
     });
   }
   let audioTracks = null;
-  if (availableTracks.length > 1 && isControlEnabled(overrides, 'audioTracks', true)) {
+  if (isControlEnabled(overrides, 'audioTracks', true)) {
     audioTracks = h(WebAudioTrackMenu, {
       open: showAudioMenu,
       tracks: availableTracks,
+      selectedTrackId: selectedAudioTrack,
       theme,
       icons,
       onToggle: () => setShowAudioMenu((value) => !value),
@@ -243,25 +293,66 @@ function WebBottomControls(props) {
   if (isControlEnabled(overrides, 'playbackRate', true) && !isLive) {
     playbackRateControl = h(WebPlaybackRateControl, { value: playbackRate, onChange: setPlaybackRateAction });
   }
-  const videoOnlyLabel = videoOnly ? 'Enable audio' : 'Video only';
-  const audioOnlyLabel = audioOnly ? 'Switch to audio card' : 'Audio only';
+  const audioOnlyLabel = 'Audio only';
   const fullscreenLabel = fullscreen ? 'Exit full screen' : 'Full screen';
 
   return h('div', { className: 'cinecrew-player__bottom-controls' },
     seek,
     h('div', { className: 'cinecrew-player__bottom-actions' },
       h('div', { className: 'cinecrew-player__bottom-left-actions' },
-        renderControlButton({ name: 'videoOnly', label: videoOnlyLabel, callback: () => setVideoOnlyMode(!videoOnly), options: { active: videoOnly, defaultVisible: false }, overrides, icons, theme }),
+        renderControlButton({ name: 'audioOnly', label: audioOnlyLabel, callback: () => setAudioOnlyMode(true), options: { active: audioOnly }, overrides, icons, theme }),
         aspect),
       h('div', { className: 'cinecrew-player__bottom-right-actions' },
-        renderControlButton({ name: 'audioOnly', label: audioOnlyLabel, callback: () => setAudioOnlyMode(true), options: { icon: 'audio', active: audioOnly }, overrides, icons, theme }),
         audioTracks,
         playbackRateControl,
         renderControlButton({ name: 'fullscreen', label: fullscreenLabel, callback: toggleFullscreen, options: { icon: 'fullscreen' }, overrides, icons, theme }))));
 }
 
-function WebPlayerControls({ locked, buffering, overrides, theme, icons, unlockedControls, toggleLock, paused, togglePlay, bottomProps }) {
-  let leftControls = unlockedControls.left;
+function getRecordingOverlayContent({ status, elapsed, error, downloadLink, onPause, onResume, onStop, onDownload, onDismiss }) {
+  if (status === 'complete') {
+    const children = [];
+    if (error) children.push(h('span', null, error));
+    children.push(h('strong', { className: 'cinecrew-player__recording-ready' }, 'Recording ready'));
+    if (downloadLink) {
+      children.push(h('a', {
+        className: 'cinecrew-player__recording-download',
+        href: downloadLink.url,
+        download: downloadLink.filename,
+        onClick: onDownload,
+      }, 'Download recording'));
+    }
+    children.push(h('button', { type: 'button', onClick: onDismiss, 'aria-label': 'Dismiss recording controls' }, 'Done'));
+    return h(React.Fragment, null, ...children);
+  }
+  if (status === 'finalizing') {
+    return h('strong', { className: 'cinecrew-player__recording-ready' }, 'Preparing recording…');
+  }
+  if (error) return h('span', null, error);
+
+  const isPaused = status === 'paused';
+  return h(React.Fragment, null,
+    h('span', { className: 'cinecrew-player__recording-indicator' }, 'REC'),
+    h('strong', { className: 'cinecrew-player__recording-timer' }, formatTime(elapsed / 1000)),
+    h('div', { className: 'cinecrew-player__recording-actions' },
+      h('button', { type: 'button', onClick: isPaused ? onResume : onPause }, isPaused ? 'Resume' : 'Pause'),
+      h('button', { type: 'button', onClick: onStop }, 'Stop & download')));
+}
+
+function WebRecordingOverlay(props) {
+  const { status, error, theme, onDismiss } = props;
+  if (status === 'idle' && !error) return null;
+  const dismissButton = error
+    ? h('button', { type: 'button', onClick: onDismiss, 'aria-label': 'Dismiss recording message' }, '×')
+    : null;
+  return h('div', {
+    className: `cinecrew-player__recording-overlay${error ? ' is-error' : ''}`,
+    style: { color: theme.controlColor },
+    role: error ? 'alert' : 'status',
+  }, getRecordingOverlayContent(props), dismissButton);
+}
+
+function WebPlayerControls({ locked, buffering, overrides, theme, icons, unlockedControls, toggleLock, paused, title, togglePlay, bottomProps }) {
+  let leftControls = locked ? null : unlockedControls.left;
   let rightControls = unlockedControls.right;
   if (locked) {
     rightControls = renderControlButton({
@@ -272,7 +363,7 @@ function WebPlayerControls({ locked, buffering, overrides, theme, icons, unlocke
   let centerControls = null;
   let bottomControls = null;
   if (!locked) {
-    if (!buffering) {
+    if (!buffering && bottomProps.recordingStatus === 'idle') {
       const playLabel = paused ? 'Play' : 'Pause';
       const playIcon = paused ? 'play' : 'pause';
       centerControls = h('div', { className: 'cinecrew-player__center-controls' },
@@ -280,11 +371,25 @@ function WebPlayerControls({ locked, buffering, overrides, theme, icons, unlocke
     }
     bottomControls = h(WebBottomControls, bottomProps);
   }
-  return h('div', { className: 'cinecrew-player__controls', style: { color: theme.controlColor } },
+  const recordingUiVisible = bottomProps.recordingStatus !== 'idle' || Boolean(bottomProps.recordingError);
+  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,
       h('div', { className: 'cinecrew-player__top-right-actions' }, rightControls)),
     centerControls,
+    h(WebRecordingOverlay, {
+      status: bottomProps.recordingStatus,
+      elapsed: bottomProps.recordingElapsed,
+      error: bottomProps.recordingError,
+      theme,
+      downloadLink: bottomProps.recordingDownloadLink,
+      onPause: bottomProps.pauseRecording,
+      onResume: bottomProps.resumeRecording,
+      onStop: bottomProps.stopRecording,
+      onDownload: bottomProps.downloadRecording,
+      onDismiss: bottomProps.clearRecordingError,
+    }),
     bottomControls);
 }
 
@@ -330,10 +435,31 @@ function WebPlayerSurface({
       onStateChange,
       onError,
       onEnded,
-      style: drawerResize ? { width: '64%', height: '64%', inset: '18% auto auto 0' } : undefined,
+      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') {
+    resizedVideoStyle = {
+      left: 'calc(var(--cinecrew-media-width, 64%) / 2)',
+      top: '50%',
+      right: 'auto',
+      bottom: 'auto',
+      maxWidth: 'var(--cinecrew-media-width, 64%)',
+      transform: 'translate(-50%, -50%)',
+    };
+  } else if (drawerResize) {
+    resizedVideoStyle = {
+      width: 'var(--cinecrew-media-width, 64%)',
+      height: '100%',
+      left: 0,
+      top: 0,
+      right: 'auto',
+      bottom: 0,
+      transform: 'none',
+    };
+  }
   return h('video', {
     ref: videoRef,
     className: 'cinecrew-player__video',
@@ -345,7 +471,7 @@ function WebPlayerSurface({
     preload: 'auto',
     style: {
       ...videoStyle,
-      ...(drawerResize ? { width: '64%', height: '64%', top: '18%', right: 'auto', bottom: 'auto' } : {}),
+      ...resizedVideoStyle,
       opacity: audioOnly ? 0 : 1,
     },
     onClick: inlinePreview ? onPromotePreview : undefined,
@@ -357,12 +483,15 @@ function WebPlayerSurface({
   });
 }
 
-function WebAudioOnlyCard({ poster, title, theme, onSwitchToVideo }) {
+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 },
   },
-  poster ? h('img', { className: 'cinecrew-player__audio-poster', src: poster, alt: '' }) : null,
+  poster
+    ? h('img', { className: 'cinecrew-player__audio-poster', src: poster, alt: '' })
+    : h('div', { className: 'cinecrew-player__audio-placeholder', role: 'img', 'aria-label': 'Audio artwork placeholder' },
+      h(Icon, { name: 'audioOnly', icons, color: theme.accentColor })),
   h('span', { className: 'cinecrew-player__audio-wave', style: { color: theme.accentColor }, 'aria-hidden': true }, '•••••••'),
   h('strong', null, title || 'Audio only'),
   h('button', {
@@ -404,23 +533,59 @@ function getInlinePlayerStyle(inlinePreview, rect) {
   return { position: 'absolute', left: rect.x, top: rect.y, width: rect.width, height: rect.height };
 }
 
+function stopBrowserRecorder(recorderRef, completionRef, finalizerRef) {
+  return new Promise((resolve, reject) => {
+    const recorder = recorderRef.current;
+    const completion = completionRef.current;
+    if (!recorder || recorder.state === 'inactive') {
+      finalizerRef.current?.();
+      Promise.resolve(completion).then(resolve, reject);
+      return;
+    }
+    recorder.addEventListener('error', (event) => reject(event.error || new Error('Recording failed.')), { once: true });
+    recorder.stop();
+    if (completion) completion.then(resolve, reject);
+    else resolve();
+  });
+}
+
+function waitForRecordingFinalization(completion) {
+  let timeoutId;
+  return Promise.race([
+    completion,
+    new Promise((_, reject) => {
+      timeoutId = window.setTimeout(() => reject(new Error('The browser did not finish finalizing the recording. Try again with a local or CORS-enabled source.')), 10000);
+    }),
+  ]).finally(() => window.clearTimeout(timeoutId));
+}
+
+async function performRecordingStop({ stop, action, recordingElapsed, streamUrl, title, recorderRef, completionRef, finalizerRef, setRecordingStatus }) {
+  if (!stop) setRecordingStatus('finalizing');
+  let stopCore = () => stopBrowserRecorder(recorderRef, completionRef, finalizerRef);
+  if (stop) stopCore = () => stop();
+  await action('onRecordingStop', stopCore, { elapsedMs: recordingElapsed, source: streamUrl, title });
+  if (!stop) await waitForRecordingFinalization(completionRef.current);
+}
+
+function updateRecordingStopState({ clock, recordingBlobRef, stop, setRecordingElapsed, setRecordingStatus, setRecordingError }) {
+  if (clock.startedAt) clock.accumulatedMs += Date.now() - clock.startedAt;
+  setRecordingElapsed(clock.accumulatedMs);
+  const hasRecording = Boolean(recordingBlobRef.current);
+  setRecordingStatus(hasRecording ? 'complete' : 'idle');
+  if (!hasRecording && !stop) {
+    setRecordingError((current) => current || 'The browser returned no recorded media data for this source. Try a local or CORS-enabled video while it is playing.');
+  }
+}
+
 function buildUnlockedControls({
   control, onBack, isLive, restart, toggleLock, toggleMute, muted, hasRecording,
-  recording, integrations, action, videoRef, streamUrl, title, activePanel,
-  hasChat, hasEpg, hasDiagnostics, handleOpenPanel, setRecording, backVisible,
+  recordingStatus, startRecording, resumeRecording, stopRecording, activePanel,
+  hasChat, hasEpg, hasDiagnostics, handleOpenPanel, backVisible,
 }) {
   const leftControls = [control('back', 'Back', onBack, { defaultVisible: backVisible })];
   let recordingControl = null;
   if (hasRecording) {
-    const recordingLabel = recording ? 'Stop recording' : 'Start recording';
-    const recordingAction = recording ? 'onRecordingStop' : 'onRecordingStart';
-    const handleRecordingToggle = async () => {
-      const handler = recording ? integrations.recording?.stop : integrations.recording?.start;
-      const fallback = handler ? () => handler({ getVideoElement: () => videoRef.current, streamUrl, title }) : undefined;
-      await action(recordingAction, fallback, { source: streamUrl, title });
-      setRecording((value) => !value);
-    };
-    recordingControl = control('recording', recordingLabel, handleRecordingToggle, { active: recording });
+    recordingControl = buildRecordingControl(control, recordingStatus, startRecording, resumeRecording, stopRecording);
   }
   const chatLabel = activePanel === 'chat' ? 'Close live chat' : 'Live chat';
   const epgLabel = activePanel === 'epg' ? 'Close programme guide' : 'Programme guide';
@@ -439,6 +604,23 @@ function buildUnlockedControls({
   return { left: leftControls, right: rightControls };
 }
 
+function buildRecordingControl(control, status, startRecording, resumeRecording, stopRecording) {
+  let label = 'Start recording';
+  let callback = startRecording;
+  if (status === 'recording') {
+    label = 'Stop recording';
+    callback = stopRecording;
+  } else if (status === 'paused') {
+    label = 'Resume recording';
+    callback = resumeRecording;
+  } else if (status === 'finalizing') {
+    label = 'Preparing recording';
+    callback = () => {};
+  }
+  const isFinalizing = status === 'finalizing';
+  return control('recording', label, callback, { active: status !== 'idle', disabled: isFinalizing });
+}
+
 function getDrawerLabel(activePanel) {
   if (activePanel === 'chat') return 'Live chat drawer';
   if (activePanel === 'epg') return 'Programme guide drawer';
@@ -463,14 +645,11 @@ function WebPlayerLayout(props) {
       unlockedControls: props.unlockedControls,
       toggleLock: props.toggleLock,
       paused: props.isPaused,
+      title: props.title,
       togglePlay: props.togglePlay,
       bottomProps: props.bottomControlProps,
     });
   }
-  let playerTitle = null;
-  if (props.title && !props.audioOnly) {
-    playerTitle = h('div', { className: 'cinecrew-player__title', style: { color: props.theme.controlColor } }, props.title);
-  }
   let loadingNotice = null;
   if (props.buffering && !props.error) {
     loadingNotice = h('div', { className: 'cinecrew-player__status', style: { color: props.theme.controlColor } },
@@ -478,7 +657,7 @@ function WebPlayerLayout(props) {
   }
   let audioCard = null;
   if (props.audioOnly) {
-    audioCard = h(WebAudioOnlyCard, { poster: props.poster, title: props.title, theme: props.theme, onSwitchToVideo: props.onSwitchToVideo });
+    audioCard = h(WebAudioOnlyCard, { poster: props.poster, title: props.title, theme: props.theme, icons: props.icons, onSwitchToVideo: props.onSwitchToVideo });
   }
   let panelNode = null;
   if (props.activePanel && props.webPanel) {
@@ -491,15 +670,14 @@ function WebPlayerLayout(props) {
   return h('div', {
     ref: props.playerRef,
     className: `cinecrew-player${props.inlinePreview ? ' cinecrew-player--inline-preview' : ''}${props.drawerMode === 'resize' && props.activePanel ? ' cinecrew-player--drawer-resize' : ''} ${props.className}`.trim(),
-    style: { ...props.rootStyle, ...props.style, background: props.theme.backgroundColor, borderRadius: props.theme.borderRadius, '--cinecrew-accent': props.theme.accentColor, '--cinecrew-text': props.theme.controlColor, '--cinecrew-surface': props.theme.surfaceColor },
+    style: { ...props.rootStyle, ...props.style, background: props.theme.backgroundColor, borderRadius: props.theme.borderRadius, '--cinecrew-accent': props.theme.accentColor, '--cinecrew-text': props.theme.controlColor, '--cinecrew-surface': props.theme.surfaceColor, '--cinecrew-media-width': '64%' },
     onWheel: props.onWheel,
     'data-stream-mode': props.streamMode,
   },
   props.mediaSurface,
   h('div', { className: 'cinecrew-player__shade', style: { background: 'linear-gradient(180deg, rgba(0,0,0,.48), transparent 28%, transparent 68%, rgba(0,0,0,.64))' } }),
-  playerTitle,
   loadingNotice,
-  h(WebPlayerError, { error: props.error, theme: props.theme, renderBackButton: props.renderBackButton }),
+  h(WebPlayerError, { error: props.error, theme: props.theme, renderBackButton: props.locked ? () => null : props.renderBackButton }),
   controlLayer,
   audioCard,
   panelNode);
@@ -544,11 +722,11 @@ function getPanelRenderer(activePanel, renderLiveChat, renderEpg, integrations)
 }
 
 function createWebPanelNode({
-  renderer, integration, activePanel, integrations, source, title, theme, onClose,
+  renderer, integration, activePanel, integrations, source, title, theme, icons, onClose,
   diagnostics, messagePageSize,
 }) {
   if (activePanel === 'diagnostics') {
-    return h(WebDiagnosticsPanel, { title, theme, ...diagnostics });
+    return h(WebDiagnosticsPanel, { title, theme, icons, onClose, ...diagnostics });
   }
   if (renderer) return h(renderer, { title, source, onClose });
   if (!integration) return null;
@@ -568,26 +746,73 @@ function createWebPanelNode({
   });
 }
 
-function WebDiagnosticsPanel({ title, theme, streamMode, status, currentTime, duration, videoRef }) {
+function getBufferedAhead(video, currentTime) {
+  if (!video?.buffered) return null;
+  for (let index = 0; index < video.buffered.length; index += 1) {
+    const start = video.buffered.start(index);
+    const end = video.buffered.end(index);
+    if (currentTime >= start && currentTime <= end) return Math.max(0, end - currentTime);
+  }
+  return 0;
+}
+
+function getFrameQuality(video) {
+  try {
+    const quality = video?.getVideoPlaybackQuality?.();
+    if (quality) return { dropped: quality.droppedVideoFrames, total: quality.totalVideoFrames };
+  } catch {
+    // Playback quality is optional and may not be exposed by a media engine.
+  }
+  if (Number.isFinite(video?.webkitDroppedFrameCount) || Number.isFinite(video?.webkitDecodedFrameCount)) {
+    return { dropped: video.webkitDroppedFrameCount, total: video.webkitDecodedFrameCount };
+  }
+  return null;
+}
+
+function WebDiagnosticsPanel({ title, theme, icons, onClose, streamMode, status, currentTime, duration, videoRef }) {
   const video = videoRef?.current;
   const resolution = video?.videoWidth && video?.videoHeight
     ? `${video.videoWidth} × ${video.videoHeight}`
     : 'Not available';
-  const rows = [
-    ['Title', title || 'Untitled'],
-    ['Stream type', streamMode || 'Unknown'],
-    ['Playback', status || 'Unknown'],
-    ['Resolution', resolution],
-    ['Position', `${formatTime(currentTime)} / ${formatTime(duration)}`],
+  const connection = globalThis.navigator?.connection;
+  const buffered = getBufferedAhead(video, currentTime);
+  const frames = getFrameQuality(video);
+  const cards = [
+    { icon: 'display', color: '#48c9ff', label: 'Video resolution', value: resolution },
+    { icon: 'network', color: '#43d6a0', label: 'Connection rate', value: Number.isFinite(connection?.downlink) ? `${connection.downlink} Mbps` : 'Not reported' },
+    { icon: 'clock', color: '#ffbd59', label: 'Network RTT estimate', value: Number.isFinite(connection?.rtt) ? `${connection.rtt} ms` : 'Not reported' },
+    { icon: 'buffer', color: '#b18cff', label: 'Buffered ahead', value: buffered === null ? 'Not reported' : `${buffered.toFixed(1)} sec` },
+    { icon: 'frames', color: '#ff6f91', label: 'Dropped / total frames', value: frames && Number.isFinite(frames.dropped) ? `${frames.dropped} / ${frames.total ?? '—'}` : 'Not reported' },
+    { icon: 'speedometer', color: '#47d0cf', label: 'Playback position', value: `${formatTime(currentTime)} / ${formatTime(duration)}` },
+    { icon: 'network', color: '#ff9666', label: 'Connection type', value: connection?.effectiveType || 'Not reported' },
+    { icon: 'video', color: '#93aaff', label: 'Stream format', value: streamMode || 'Unknown' },
   ];
   return h('section', {
     className: 'cinecrew-player__diagnostics',
     style: { color: theme.controlColor },
     'aria-label': 'Stream diagnostics',
   },
-  h('strong', null, 'Stream diagnostics'),
-  rows.map(([label, value]) => h('div', { className: 'cinecrew-player__diagnostic-row', key: label },
-    h('span', null, label), h('span', null, value))));
+  h('header', { className: 'cinecrew-player__diagnostics-heading' },
+    h('div', null,
+      h('strong', null, 'Stream diagnostics'),
+      h('span', null, title || 'Current playback')),
+    h('button', {
+      type: 'button',
+      className: 'cinecrew-player__diagnostics-close',
+      onClick: onClose,
+      'aria-label': 'Close stream diagnostics',
+      title: 'Close diagnostics',
+    }, h(Icon, { name: 'close', icons, color: theme.controlColor }))),
+  h('div', { className: 'cinecrew-player__diagnostics-status' },
+    h('span', { className: `cinecrew-player__status-dot is-${String(status || 'unknown').toLowerCase()}` }),
+    h('span', null, status || 'Unknown'),
+    h('span', null, streamMode || 'Unknown format')),
+  h('div', { className: 'cinecrew-player__diagnostic-grid' },
+    cards.map(({ icon, color, label, value }) => h('article', { className: 'cinecrew-player__diagnostic-card', key: label, style: { '--diagnostic-accent': color } },
+      h('span', { className: 'cinecrew-player__diagnostic-icon' }, h(Icon, { name: icon, icons, color })),
+      h('span', { className: 'cinecrew-player__diagnostic-label' }, label),
+      h('strong', null, value)))),
+  h('small', { className: 'cinecrew-player__diagnostics-note' }, 'Network rate and RTT are browser-reported estimates when supported; no extra ping or stream requests are sent.'));
 }
 
 function getChatMessageKey(message, index = 0) {
@@ -680,6 +905,24 @@ function WebEmojiPicker({ onSelect }) {
 function WebChatComposer({ sending, canSend, onSend }) {
   const [message, setMessage] = useState('');
   const [emojiOpen, setEmojiOpen] = useState(false);
+  const emojiAnchorRef = useRef(null);
+  useEffect(() => {
+    if (!emojiOpen) return undefined;
+    const closeOnOutsidePointer = (event) => {
+      if (!emojiAnchorRef.current?.contains(event.target)) setEmojiOpen(false);
+    };
+    const closeOnEscape = (event) => {
+      if (event.key === 'Escape') setEmojiOpen(false);
+    };
+    document.addEventListener('pointerdown', closeOnOutsidePointer, true);
+    document.addEventListener('click', closeOnOutsidePointer, true);
+    document.addEventListener('keydown', closeOnEscape);
+    return () => {
+      document.removeEventListener('pointerdown', closeOnOutsidePointer, true);
+      document.removeEventListener('click', closeOnOutsidePointer, true);
+      document.removeEventListener('keydown', closeOnEscape);
+    };
+  }, [emojiOpen]);
   const handleSubmit = async (event) => {
     event.preventDefault();
     const comment = message.trim();
@@ -691,12 +934,14 @@ function WebChatComposer({ sending, canSend, onSend }) {
 
   return h('form', { className: 'cinecrew-player__chat-form', onSubmit: handleSubmit },
     h('div', { className: 'cinecrew-player__chat-composer' },
-      h('button', {
-        type: 'button',
-        className: 'cinecrew-player__emoji-toggle',
-        onClick: () => setEmojiOpen((open) => !open),
-        'aria-label': emojiOpen ? 'Close emoji picker' : 'Open emoji picker',
-      }, '☺'),
+      h('span', { className: 'cinecrew-player__emoji-anchor', ref: emojiAnchorRef },
+        h('button', {
+          type: 'button',
+          className: 'cinecrew-player__emoji-toggle',
+          onClick: () => setEmojiOpen((open) => !open),
+          'aria-label': emojiOpen ? 'Close emoji picker' : 'Open emoji picker',
+        }, '☺'),
+        emojiOpen ? h(WebEmojiPicker, { onSelect: insertEmoji }) : null),
       h('input', {
         value: message,
         onChange: (event) => setMessage(event.target.value),
@@ -704,8 +949,12 @@ function WebChatComposer({ sending, canSend, onSend }) {
         'aria-label': 'Chat message',
         maxLength: 1000,
       }),
-      h('button', { type: 'submit', disabled: sending || !message.trim() || !canSend }, sending ? 'Sending…' : 'Send')),
-    emojiOpen ? h(WebEmojiPicker, { onSelect: insertEmoji }) : null);
+      h('button', {
+        type: 'submit',
+        disabled: sending || !message.trim() || !canSend,
+        'aria-label': sending ? 'Sending message' : 'Send message',
+        title: sending ? 'Sending…' : 'Send message',
+      }, h(Icon, { name: 'send', color: '#07111e' }))));
 }
 
 function WebPanelRow({ row, index, isChat }) {
@@ -725,15 +974,6 @@ function WebPanelRow({ row, index, isChat }) {
     row.description ? h('span', null, row.description) : null);
 }
 
-function WebLoadMoreMessages({ loading, onClick }) {
-  return h('button', {
-    type: 'button',
-    className: 'cinecrew-player__load-more',
-    onClick,
-    disabled: loading,
-  }, loading ? 'Loading more…' : 'See more messages');
-}
-
 function WebIntegrationPanel({ kind, integration, integrations, source, title, theme, onClose, messagePageSize = 50 }) {
   const [rows, setRows] = useState([]);
   const [user, setUser] = useState(integrations.user || null);
@@ -744,6 +984,9 @@ function WebIntegrationPanel({ kind, integration, integrations, source, title, t
   const [sending, setSending] = useState(false);
   const [error, setError] = useState('');
   const rowsRef = useRef([]);
+  const panelListRef = useRef(null);
+  const olderScrollRef = useRef(null);
+  const shouldScrollBottomRef = useRef(false);
   const channelId = String(source.streamId || source.mediaId || source.id || '');
   const isChat = kind === 'chat';
   const pageSize = Math.max(1, Math.floor(Number(messagePageSize) || 50));
@@ -771,6 +1014,7 @@ function WebIntegrationPanel({ kind, integration, integrations, source, title, t
         const mergedRows = mergeChatMessages(rowsRef.current, nextRows);
         updateRows(mergedRows);
         const addedCount = Math.max(0, mergedRows.length - previousCount);
+        if (addedCount > 0) shouldScrollBottomRef.current = true;
         setMessageOffset((offset) => previousCount === 0
           ? nextRows.length
           : Math.max(offset, nextRows.length) + addedCount);
@@ -812,6 +1056,8 @@ function WebIntegrationPanel({ kind, integration, integrations, source, title, t
 
   const loadOlderMessages = async () => {
     if (!isChat || !hasMoreMessages || loadingOlder) return;
+    const panelList = panelListRef.current;
+    if (panelList) olderScrollRef.current = { height: panelList.scrollHeight, top: panelList.scrollTop };
     setLoadingOlder(true);
     try {
       setError('');
@@ -828,6 +1074,25 @@ function WebIntegrationPanel({ kind, integration, integrations, source, title, t
     }
   };
 
+  useLayoutEffect(() => {
+    const panelList = panelListRef.current;
+    if (!panelList) return;
+    if (olderScrollRef.current) {
+      const previous = olderScrollRef.current;
+      panelList.scrollTop = previous.top + panelList.scrollHeight - previous.height;
+      olderScrollRef.current = null;
+      return;
+    }
+    if (shouldScrollBottomRef.current) {
+      panelList.scrollTop = panelList.scrollHeight;
+      shouldScrollBottomRef.current = false;
+    }
+  }, [rows]);
+
+  useEffect(() => {
+    if (isChat && hasMoreMessages && !loadingOlder && panelListRef.current?.scrollTop <= 24) loadOlderMessages();
+  }, [rows.length, hasMoreMessages, loadingOlder, isChat]);
+
   const send = async (comment) => {
     if (!comment || sending || !integration.sendMessage) return false;
     setSending(true);
@@ -859,8 +1124,15 @@ function WebIntegrationPanel({ kind, integration, integrations, source, title, t
   loading ? h('div', { className: 'cinecrew-player__panel-state' }, 'Loading…') : null,
   error ? h('div', { className: 'cinecrew-player__panel-state is-error', role: 'status' }, error) : null,
   !loading && !error && rows.length === 0 ? h('div', { className: 'cinecrew-player__panel-state' }, emptyStateMessage) : null,
-    h('div', { className: 'cinecrew-player__panel-list' },
-      isChat && hasMoreMessages ? h(WebLoadMoreMessages, { loading: loadingOlder, onClick: loadOlderMessages }) : null,
+    h('div', {
+      className: 'cinecrew-player__panel-list',
+      ref: panelListRef,
+      onScroll: (event) => {
+        if (isChat && event.currentTarget.scrollTop <= 24) loadOlderMessages();
+      },
+      'aria-live': isChat ? 'polite' : undefined,
+    },
+      isChat && loadingOlder ? h('div', { className: 'cinecrew-player__older-loading', role: 'status' }, 'Loading older messages…') : null,
       rows.map((row, index) => h(WebPanelRow, { key: getChatMessageKey(row, index), row, index, isChat }))),
     isChat ? h(WebChatComposer, {
       sending,
@@ -915,6 +1187,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     onFullscreen,
     onReady,
     onProgress,
+    onProgressBarChange,
     onPlaying,
     onBuffering,
     onError,
@@ -938,7 +1211,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
   const [volume, setVolume] = useState(Math.max(0, Math.min(1, Number(volumeProp) || 0)));
   const [videoOnly, setVideoOnly] = useState(!!videoOnlyProp);
   const [audioOnly, setAudioOnly] = useState(!!audioOnlyProp);
-  const [aspectRatio, setAspectRatio] = useState('FIT');
+  const [aspectRatio, setAspectRatio] = useState(props.defaultAspectRatio || 'FIT');
   const [locked, setLocked] = useState(false);
   const [buffering, setBuffering] = useState(Boolean(streamUrl) || resolution.loading);
   const [error, setError] = useState('');
@@ -947,11 +1220,26 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
   const [showAspectMenu, setShowAspectMenu] = useState(false);
   const [showAudioMenu, setShowAudioMenu] = useState(false);
   const [activePanel, setActivePanel] = useState(null);
-  const [recording, setRecording] = useState(false);
+  const [recordingStatus, setRecordingStatus] = useState('idle');
+  const [recordingElapsed, setRecordingElapsed] = useState(0);
+  const [recordingError, setRecordingError] = useState('');
+  const [recordingDownloadLink, setRecordingDownloadLink] = useState(null);
   const [availableTracks, setAvailableTracks] = useState([]);
   const [fullscreen, setFullscreen] = useState(false);
   const [playbackRate, setPlaybackRate] = useState(Number(playbackRateProp) || 1);
+  const aspectRatiosNormalized = useMemo(() => normalizeAspectRatios(props.aspectRatios), [props.aspectRatios]);
   const { videoStyle } = useWebVideoAspectRatio(aspectRatio, false);
+  const aspectRatioRef = useRef(aspectRatio);
+  const recorderRef = useRef(null);
+  const recordingCaptureRef = useRef(null);
+  const recordingChunksRef = useRef([]);
+  const recordingBlobRef = useRef(null);
+  const recordingDownloadLinkRef = useRef(null);
+  const recordingFinalizerRef = useRef(null);
+  const recordingCompletionRef = useRef(null);
+  const lastProgressBarSecondRef = useRef(null);
+  const recordingClockRef = useRef({ startedAt: 0, accumulatedMs: 0 });
+  aspectRatioRef.current = aspectRatio;
   const pausedStateRef = pausedRef;
   pausedRef.current = isPaused;
   errorRef.current = onError;
@@ -978,6 +1266,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     setBuffering(Boolean(streamUrl) || resolution.loading);
     setCurrentTime(0);
     setDuration(0);
+    lastProgressBarSecondRef.current = null;
     setAvailableTracks([]);
     if (resolution.error) {
       handleError(resolution.error);
@@ -993,6 +1282,9 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
   }, [pausedProp]);
 
   useEffect(() => setAudioOnly(!!audioOnlyProp), [audioOnlyProp]);
+  useEffect(() => {
+    setAspectRatio(props.defaultAspectRatio || 'FIT');
+  }, [streamUrl, props.defaultAspectRatio]);
 
   useEffect(() => {
     setMuted(!!mutedProp);
@@ -1034,7 +1326,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     onErrorRef,
   });
   const streamMode = getStreamMode(youtubeVideoId, mpegTs.useMpegTs, useHls);
-  useWebAc3AudioPlayback({
+  const ac3AudioPlayback = useWebAc3AudioPlayback({
     active: mpegTs.useAc3Fallback,
     streamUrl,
     enabled: isAudioPlaybackEnabled(muted, videoOnly),
@@ -1075,18 +1367,200 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
   }, []);
 
   const action = useCallback((name, fallback, payload) => {
-    const callback = actions?.[name];
-    if (typeof callback === 'function') return callback(payload, { video: videoRef.current, player: publicPlayerRef.current });
-    return fallback?.(payload);
-  }, [actions]);
+    let callback = actions?.[name];
+    if (name === 'onAspectRatioChange') callback = callback || props.onAspectRatioChange;
+    else if (name === 'onFullscreen') callback = callback || onFullscreen;
+    return invokePlayerAction(
+      fallback,
+      callback,
+      payload,
+      { video: videoRef.current, player: publicPlayerRef.current },
+    );
+  }, [actions, props.onAspectRatioChange, onFullscreen]);
+
+  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());
+    const recorder = new MediaRecorder(capture.stream, { mimeType });
+    recordingCaptureRef.current = capture;
+    recordingChunksRef.current = [];
+    recorderRef.current = recorder;
+    let finalized = false;
+    let resolveCompletion;
+    recordingCompletionRef.current = new Promise((resolve) => { resolveCompletion = resolve; });
+    const finalizeRecording = () => {
+      if (finalized) return;
+      finalized = true;
+      let completedBlob = null;
+      try {
+        const blob = new Blob(recordingChunksRef.current, { type: recorder.mimeType || mimeType });
+        if (!blob.size) throw new Error('The recording is empty. Play the video briefly, then stop and download again.');
+        recordingBlobRef.current = blob;
+        completedBlob = blob;
+        if (recordingDownloadLinkRef.current?.url) URL.revokeObjectURL(recordingDownloadLinkRef.current.url);
+        const downloadLink = createRecordingDownloadLink(blob, title);
+        if (!downloadLink) throw new Error('The recording is empty. Play the video briefly, then stop and download again.');
+        recordingDownloadLinkRef.current = downloadLink;
+        setRecordingDownloadLink(downloadLink);
+        setRecordingStatus('complete');
+        try {
+          if (!downloadRecording(blob, title)) throw new Error('The browser did not start the recording download. Use Download recording to retry.');
+        } catch (downloadError) {
+          setRecordingError(downloadError?.message || 'The recording could not be downloaded. Use Download recording to retry.');
+        }
+      } catch (error_) {
+        setRecordingError(error_?.message || 'Could not finish the recording.');
+        setRecordingStatus('idle');
+      } finally {
+        recordingCaptureRef.current?.cleanup?.();
+        recordingCaptureRef.current = null;
+        recorderRef.current = null;
+        recordingChunksRef.current = [];
+        recordingFinalizerRef.current = null;
+        resolveCompletion?.(completedBlob);
+      }
+    };
+    recordingFinalizerRef.current = finalizeRecording;
+    recorder.addEventListener('dataavailable', (event) => {
+      if (event.data?.size) recordingChunksRef.current.push(event.data);
+    });
+    recorder.addEventListener('stop', finalizeRecording, { once: true });
+    recorder.addEventListener('error', (event) => {
+      setRecordingError(event.error?.message || 'The browser could not record this stream.');
+    }, { once: true });
+    recorder.start(1000);
+  }, [ac3AudioPlayback, title, youtubeVideoId]);
+
+  const startRecording = useCallback(async () => {
+    setRecordingError('');
+    recordingBlobRef.current = null;
+    if (recordingDownloadLinkRef.current?.url) URL.revokeObjectURL(recordingDownloadLinkRef.current.url);
+    recordingDownloadLinkRef.current = null;
+    setRecordingDownloadLink(null);
+    try {
+      const adapterStart = integrations.recording?.start;
+      await action('onRecordingStart', adapterStart
+        ? () => adapterStart({ getVideoElement: () => videoRef.current, streamUrl, title })
+        : startBuiltinRecording, { source: streamUrl, title });
+      recordingClockRef.current = { startedAt: Date.now(), accumulatedMs: 0 };
+      setRecordingElapsed(0);
+      setRecordingStatus('recording');
+    } catch (startError) {
+      setRecordingStatus('idle');
+      setRecordingError(startError?.message || 'Could not start recording.');
+    }
+  }, [action, integrations.recording, startBuiltinRecording, streamUrl, title]);
 
-  const togglePlay = useCallback(() => action('onPlayPause', () => setPaused(), { isPlaying: !pausedRef.current }), [action, setPaused]);
+  const pauseRecording = useCallback(async () => {
+    try {
+      const pause = integrations.recording?.pause;
+      await action('onRecordingPause', pause
+        ? () => pause()
+        : () => {
+          if (recorderRef.current?.state !== 'recording') throw new Error('Recording cannot be paused right now.');
+          recorderRef.current.pause();
+        }, { elapsedMs: recordingElapsed });
+      const clock = recordingClockRef.current;
+      if (clock.startedAt) clock.accumulatedMs += Date.now() - clock.startedAt;
+      clock.startedAt = 0;
+      setRecordingElapsed(clock.accumulatedMs);
+      setRecordingStatus('paused');
+    } catch (pauseError) {
+      setRecordingError(pauseError?.message || 'Could not pause recording.');
+    }
+  }, [action, integrations.recording, recordingElapsed]);
+
+  const resumeRecording = useCallback(async () => {
+    try {
+      const resume = integrations.recording?.resume;
+      await action('onRecordingResume', resume
+        ? () => resume()
+        : () => {
+          if (recorderRef.current?.state !== 'paused') throw new Error('Recording cannot resume right now.');
+          recorderRef.current.resume();
+        }, { elapsedMs: recordingElapsed });
+      recordingClockRef.current.startedAt = Date.now();
+      setRecordingStatus('recording');
+    } catch (resumeError) {
+      setRecordingError(resumeError?.message || 'Could not resume recording.');
+    }
+  }, [action, integrations.recording, recordingElapsed]);
+
+  const stopRecording = useCallback(async () => {
+    try {
+      const stop = integrations.recording?.stop;
+      await performRecordingStop({
+        stop,
+        action,
+        recordingElapsed,
+        streamUrl,
+        title,
+        recorderRef,
+        completionRef: recordingCompletionRef,
+        finalizerRef: recordingFinalizerRef,
+        setRecordingStatus,
+      });
+      updateRecordingStopState({
+        clock: recordingClockRef.current,
+        recordingBlobRef,
+        stop,
+        setRecordingElapsed,
+        setRecordingStatus,
+        setRecordingError,
+      });
+    } catch (stopError) {
+      setRecordingError(stopError?.message || 'Could not finish recording.');
+    }
+  }, [action, integrations.recording, recordingElapsed, streamUrl, title]);
+
+  const downloadCompletedRecording = useCallback(() => {
+    try {
+      if (!recordingDownloadLinkRef.current?.url) throw new Error('No recording is ready to download.');
+      setRecordingError('');
+    } catch (downloadError) {
+      setRecordingError(downloadError?.message || 'The recording could not be downloaded.');
+    }
+  }, []);
+
+  const dismissRecording = useCallback(() => {
+    setRecordingStatus('idle');
+    setRecordingError('');
+    recordingBlobRef.current = null;
+    if (recordingDownloadLinkRef.current?.url) URL.revokeObjectURL(recordingDownloadLinkRef.current.url);
+    recordingDownloadLinkRef.current = null;
+    setRecordingDownloadLink(null);
+    recordingCompletionRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    if (recordingStatus !== 'recording') return undefined;
+    const timer = setInterval(() => {
+      const clock = recordingClockRef.current;
+      setRecordingElapsed(clock.accumulatedMs + (clock.startedAt ? Date.now() - clock.startedAt : 0));
+    }, 250);
+    return () => clearInterval(timer);
+  }, [recordingStatus]);
+
+  useEffect(() => () => {
+    const recorder = recorderRef.current;
+    if (recorder && recorder.state !== 'inactive') recorder.stop();
+    recordingCaptureRef.current?.cleanup?.();
+  }, [streamUrl]);
+  useEffect(() => () => {
+    if (recordingDownloadLinkRef.current?.url) URL.revokeObjectURL(recordingDownloadLinkRef.current.url);
+  }, []);
+
+  const togglePlay = useCallback(() => action('onPlayPause', () => setPaused(), { isPlaying: pausedRef.current }), [action, setPaused]);
   const restart = useCallback(() => action('onRestart', () => {
     const video = videoRef.current;
     if (video) video.currentTime = 0;
     else youtubeRef.current?.seekTo?.(0);
     setPaused(false);
-  }, { currentTime: Number(videoRef.current?.currentTime) || 0 }), [action, setPaused]);
+    emitProgressBarTime(0, onProgressBarChange, lastProgressBarSecondRef, { force: true });
+  }, { currentTime: Number(videoRef.current?.currentTime) || 0 }), [action, onProgressBarChange, 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]);
@@ -1100,9 +1574,11 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
   const setAudioOnlyMode = useCallback((next) => action('onAudioOnlyChange', () => setAudioOnly(next), { enabled: next }), [action]);
   const setPlaybackRateAction = useCallback((next) => action('onPlaybackRateChange', () => setPlaybackRate(next), { playbackRate: next }), [action]);
   const seekTo = useCallback((seconds) => action('onSeek', () => {
-    if (videoRef.current) videoRef.current.currentTime = Math.max(0, Number(seconds) || 0);
-    else youtubeRef.current?.seekTo?.(Math.max(0, Number(seconds) || 0));
-  }, { seconds: Number(seconds) || 0 }), [action]);
+    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]);
   useImperativeHandle(ref, () => {
     const api = {
@@ -1118,12 +1594,14 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
       setAudioTrack: (id) => {
         for (const item of availableTracks) if (item.nativeTrack) item.nativeTrack.enabled = String(item.id) === String(id);
       },
-      setAudioOnly: setAudioOnlyMode,
+      setAudioOnly,
       setVideoOnly: setVideoOnlyMode,
-      setPlaybackRate: setPlaybackRateAction,
+      setPlaybackRate,
       seekTo,
       seekBy: (delta) => seekTo((Number(videoRef.current?.currentTime) || currentTime) + (Number(delta) || 0)),
       back: handleBack,
+      setPanel: (panel) => setActivePanel(panel || null),
+      closePanel: () => setActivePanel(null),
       getVideoElement: () => videoRef.current,
       enterFullscreen: () => playerRef.current?.requestFullscreen?.(),
       exitFullscreen: () => typeof document !== 'undefined' ? document.exitFullscreen?.() : undefined,
@@ -1131,11 +1609,12 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     };
     publicPlayerRef.current = api;
     return api;
-  }, [setPaused, togglePlay, restart, toggleMute, setMuted, setAspectRatio, setAudioOnlyMode, setVideoOnlyMode, setPlaybackRateAction, seekTo, handleBack, availableTracks, tracksProp, currentTime]);
+  }, [setPaused, togglePlay, restart, toggleMute, setMuted, setAspectRatio, setAudioOnly, setVideoOnlyMode, setPlaybackRate, seekTo, handleBack, availableTracks, tracksProp, currentTime]);
 
   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 hasRecording = !!integrations.recording || typeof actions.onRecordingStart === 'function';
+  const hasRecording = controlOverrides.recording !== false
+    && (!!integrations.recording || typeof actions.onRecordingStart === 'function' || (!youtubeVideoId && typeof MediaRecorder !== 'undefined'));
   const hasDiagnostics = Boolean(features.diagnostics) || typeof actions.onDiagnosticsOpen === 'function';
   const sourceType = String(media.type || media.mimeType || '').toLowerCase();
   const directVideoSource = getDirectVideoSource({
@@ -1157,6 +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);
       onProgress?.({ currentTime: (Number(video.currentTime) || 0) * 1000, duration: (Number(video.duration) || 0) * 1000, target: video.currentTime });
     };
     const onReadyEvent = () => {
@@ -1184,7 +1664,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
       video.removeEventListener('timeupdate', updateTime);
       video.removeEventListener('ended', endedHandler);
     };
-  }, [onReady, onPlaying, onProgress, onEnded, tracksProp]);
+  }, [onReady, onPlaying, onProgress, onProgressBarChange, onEnded, tracksProp]);
 
   useEffect(() => {
     if (selectedAudioTrack === undefined || selectedAudioTrack === null) return;
@@ -1200,18 +1680,18 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
   }, []);
 
   const toggleFullscreen = () => action('onFullscreen', () => {
-    if (typeof onFullscreen === 'function') return onFullscreen({ isFullscreen: !fullscreen });
+    if (inlinePreview && typeof onPromotePreview === 'function') return onPromotePreview({ title, source: media });
     if (document.fullscreenElement) document.exitFullscreen?.();
     else playerRef.current?.requestFullscreen?.();
   }, { isFullscreen: !fullscreen });
-  const openPanel = (panel) => action(
-    getPanelActionName(panel),
-    () => setActivePanel((current) => {
-      if (current === panel) return null;
-      return panel;
-    }),
-    { tab: panel, isOpen: activePanel === panel, close: () => setActivePanel(null) },
-  );
+  const openPanel = (panel) => {
+    const isOpen = activePanel !== panel;
+    return action(
+      getPanelActionName(panel),
+      () => setActivePanel((current) => current === panel ? null : panel),
+      { tab: panel, isOpen, close: () => setActivePanel(null) },
+    );
+  };
   const control = (name, label, callback, options = {}) => renderControlButton({
     name, label, callback, options, overrides: controlOverrides, icons, theme,
   });
@@ -1231,18 +1711,15 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     toggleMute,
     muted,
     hasRecording,
-    recording,
-    integrations,
-    action,
-    videoRef,
-    streamUrl,
-    title,
+    recordingStatus,
+    startRecording,
+    resumeRecording,
+    stopRecording,
     activePanel,
     hasChat,
     hasEpg,
     hasDiagnostics,
     handleOpenPanel: openPanel,
-    setRecording,
   });
   const webPanel = createWebPanelNode({
     renderer: panelRenderer,
@@ -1252,6 +1729,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     source: panelSource,
     title,
     theme,
+    icons,
     onClose: () => setActivePanel(null),
     diagnostics: {
       streamMode,
@@ -1264,8 +1742,10 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
   });
 
   const handleYouTubeProgress = (event) => {
-    setCurrentTime(Number(event.currentTime) / 1000 || 0);
+    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, {
@@ -1308,11 +1788,12 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     showAspectMenu,
     setShowAspectMenu,
     selectAspect,
-    videoOnly,
-    setVideoOnlyMode,
+    aspectRatios: aspectRatiosNormalized,
+    selectedAspectRatio: aspectRatio,
     audioOnly,
     setAudioOnlyMode,
     availableTracks,
+    selectedAudioTrack,
     showAudioMenu,
     setShowAudioMenu,
     selectAudio,
@@ -1320,6 +1801,15 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     setPlaybackRateAction,
     fullscreen,
     toggleFullscreen,
+    recordingStatus,
+    recordingElapsed,
+    recordingError,
+    recordingDownloadLink,
+    pauseRecording,
+    resumeRecording,
+    stopRecording,
+    downloadRecording: downloadCompletedRecording,
+    clearRecordingError: dismissRecording,
   };
   return h(WebPlayerLayout, {
     playerRef,
@@ -1401,10 +1891,7 @@ export const InlineLivePlayer = React.memo(function InlineLivePlayer({
       playbackRate: false, playPause: true, mute: true, fullscreen: true,
       ...controls,
     },
-    actions: {
-      ...actions,
-      ...(onFullscreen && !actions.onFullscreen ? { onFullscreen: () => onFullscreen() } : {}),
-    },
+    actions,
     theme,
     icons,
     onError,