@cinecrew/cinecrew-player 0.1.1 → 0.1.3

package/src/web/index.js

@@ -1,10 +1,11 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, 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';
 import { useWebAc3AudioPlayback } from '../native/media/web/useWebAc3AudioPlayback.web';
 import { YouTubeVideoPlayer } from '../native/media/YouTubeVideoPlayer.web.js';
 import { getYouTubeVideoId, getWebRuntimePlatform, useResolvedPlayerSource } from '../utils/sourceUtils';
+import { EMOJI_GROUPS, searchEmojis } from '../data/emoji';
 import './styles.css';
 
 const h = React.createElement;
@@ -20,8 +21,9 @@ 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', minimize: 'arrow-collapse', back: 'arrow-left', recording: 'record-rec', stop: 'stop',
-  liveChat: 'comment-text-multiple-outline', epg: 'television-classic', fullscreen: 'fullscreen', close: 'close',
+  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',
 };
 
 // Inline SVG keeps the React DOM/Electron entry independent of React Native,
@@ -32,12 +34,14 @@ 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',
   'record-rec': 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z',
   stop: 'M6 6h12v12H6z',
@@ -45,6 +49,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) {
@@ -114,17 +125,64 @@ 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) {
+      seekDraftRef.current = currentTime;
+      setSeekDraft(currentTime);
+    }
+  }, [currentTime, isDragging]);
+
+  const updateDraft = (event) => {
+    const nextTime = Number(event.currentTarget.value);
+    seekDraftRef.current = nextTime;
+    setSeekDraft(nextTime);
+  };
+
+  const finishSeek = (event) => {
+    if (!isDragging) return;
+    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,
-      value: Math.min(currentTime, duration),
-      onChange: (event) => onSeek(Number(event.target.value)),
+      step: 'any',
+      value: displayTime,
+      onChange: updateDraft,
+      onPointerDown: (event) => {
+        event.stopPropagation();
+        setIsDragging(true);
+        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 }) {
@@ -138,7 +196,7 @@ function WebAspectRatioMenu({ open, theme, icons, onToggle, onSelect }) {
         onClick: () => onSelect(ratio),
       }, ratio)));
   }
-  return h('div', { className: 'cinecrew-player__menu-wrap', key: 'aspectRatio' },
+  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);
 }
@@ -147,11 +205,13 @@ function WebAudioTrackMenu({ open, tracks, 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',
+          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 }),
@@ -170,8 +230,8 @@ function WebPlaybackRateControl({ value, onChange }) {
 
 function WebBottomControls(props) {
   const {
-    isLive, overrides, theme, icons, currentTime, duration, seekTo, muted,
-    toggleMute, showAspectMenu, setShowAspectMenu, selectAspect, videoOnly,
+    isLive, overrides, theme, icons, currentTime, duration, seekTo,
+    showAspectMenu, setShowAspectMenu, selectAspect, videoOnly,
     setVideoOnlyMode, audioOnly, setAudioOnlyMode, availableTracks,
     showAudioMenu, setShowAudioMenu, selectAudio, playbackRate,
     setPlaybackRateAction, fullscreen, toggleFullscreen,
@@ -194,7 +254,7 @@ function WebBottomControls(props) {
     });
   }
   let audioTracks = null;
-  if (availableTracks.length > 1 && isControlEnabled(overrides, 'audioTracks', true)) {
+  if (isControlEnabled(overrides, 'audioTracks', true)) {
     audioTracks = h(WebAudioTrackMenu, {
       open: showAudioMenu,
       tracks: availableTracks,
@@ -211,27 +271,28 @@ function WebBottomControls(props) {
   if (isControlEnabled(overrides, 'playbackRate', true) && !isLive) {
     playbackRateControl = h(WebPlaybackRateControl, { value: playbackRate, onChange: setPlaybackRateAction });
   }
-  const muteLabel = muted ? 'Unmute' : 'Mute';
-  const muteIcon = muted ? 'mute' : 'unmute';
-  const videoOnlyLabel = videoOnly ? 'Enable audio' : 'Video only';
-  const audioOnlyLabel = audioOnly ? 'Switch to audio card' : 'Audio only';
+  const videoOnlyLabel = 'Video only';
+  const audioOnlyLabel = 'Audio only';
   const fullscreenLabel = fullscreen ? 'Exit full screen' : 'Full screen';
 
   return h('div', { className: 'cinecrew-player__bottom-controls' },
     seek,
-    renderControlButton({ name: 'mute', label: muteLabel, callback: toggleMute, options: { icon: muteIcon }, overrides, icons, theme }),
-    aspect,
-    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: { icon: 'audio', active: audioOnly }, overrides, icons, theme }),
-    audioTracks,
-    playbackRateControl,
-    renderControlButton({ name: 'fullscreen', label: fullscreenLabel, callback: toggleFullscreen, options: { icon: 'fullscreen' }, overrides, icons, theme }));
+    h('div', { className: 'cinecrew-player__bottom-actions' },
+      h('div', { className: 'cinecrew-player__bottom-left-actions' },
+        renderControlButton({ name: 'audioOnly', label: audioOnlyLabel, callback: () => setAudioOnlyMode(true), options: { active: audioOnly }, overrides, icons, theme }),
+        renderControlButton({ name: 'videoOnly', label: videoOnlyLabel, callback: () => setVideoOnlyMode(!videoOnly), options: { active: videoOnly, defaultVisible: false }, overrides, icons, theme }),
+        aspect),
+      h('div', { className: 'cinecrew-player__bottom-right-actions' },
+        audioTracks,
+        playbackRateControl,
+        renderControlButton({ name: 'fullscreen', label: fullscreenLabel, callback: toggleFullscreen, options: { icon: 'fullscreen' }, overrides, icons, theme }))));
 }
 
-function WebPlayerControls({ locked, overrides, theme, icons, unlockedControls, toggleLock, paused, togglePlay, bottomProps }) {
-  let topControls = unlockedControls;
+function WebPlayerControls({ locked, buffering, overrides, theme, icons, unlockedControls, toggleLock, paused, togglePlay, bottomProps }) {
+  let leftControls = locked ? null : unlockedControls.left;
+  let rightControls = unlockedControls.right;
   if (locked) {
-    topControls = renderControlButton({
+    rightControls = renderControlButton({
       name: 'lock', label: 'Unlock controls', callback: toggleLock,
       options: { active: true, defaultVisible: true }, overrides, icons, theme,
     });
@@ -239,14 +300,18 @@ function WebPlayerControls({ locked, overrides, theme, icons, unlockedControls,
   let centerControls = null;
   let bottomControls = null;
   if (!locked) {
-    const playLabel = paused ? 'Play' : 'Pause';
-    const playIcon = paused ? 'play' : 'pause';
-    centerControls = h('div', { className: 'cinecrew-player__center-controls' },
-      renderControlButton({ name: 'playPause', label: playLabel, callback: togglePlay, options: { icon: playIcon }, overrides, icons, theme }));
+    if (!buffering) {
+      const playLabel = paused ? 'Play' : 'Pause';
+      const playIcon = paused ? 'play' : 'pause';
+      centerControls = h('div', { className: 'cinecrew-player__center-controls' },
+        renderControlButton({ name: 'playPause', label: playLabel, callback: togglePlay, options: { icon: playIcon }, overrides, icons, theme }));
+    }
     bottomControls = h(WebBottomControls, bottomProps);
   }
   return h('div', { className: 'cinecrew-player__controls', style: { color: theme.controlColor } },
-    h('div', { className: 'cinecrew-player__top-controls' }, topControls),
+    h('div', { className: 'cinecrew-player__top-controls' },
+      h('div', { className: 'cinecrew-player__top-left-actions' }, leftControls),
+      h('div', { className: 'cinecrew-player__top-right-actions' }, rightControls)),
     centerControls,
     bottomControls);
 }
@@ -265,6 +330,7 @@ function WebPlayerSurface({
   playbackRate,
   videoOnly,
   videoStyle,
+  drawerResize,
   audioOnly,
   inlinePreview,
   onPromotePreview,
@@ -292,9 +358,31 @@ function WebPlayerSurface({
       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') {
+    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',
@@ -304,21 +392,29 @@ function WebPlayerSurface({
     muted: muted || videoOnly,
     playsInline: true,
     preload: 'auto',
-    style: { ...videoStyle, opacity: audioOnly ? 0 : 1 },
+    style: {
+      ...videoStyle,
+      ...resizedVideoStyle,
+      opacity: audioOnly ? 0 : 1,
+    },
     onClick: inlinePreview ? onPromotePreview : undefined,
     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 });
     },
   });
 }
 
-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', {
@@ -346,7 +442,9 @@ function isAudioPlaybackEnabled(muted, videoOnly) {
 }
 
 function getPanelIntegration(activePanel, integrations) {
-  return activePanel === 'chat' ? integrations.liveChat : integrations.epg;
+  if (activePanel === 'chat') return integrations.liveChat;
+  if (activePanel === 'epg') return integrations.epg;
+  return null;
 }
 
 function getActiveMediaUrl(youtubeVideoId, streamUrl) {
@@ -359,15 +457,11 @@ function getInlinePlayerStyle(inlinePreview, rect) {
 }
 
 function buildUnlockedControls({
-  control, actions, onBack, isLive, restart, toggleLock, hasRecording,
+  control, onBack, isLive, restart, toggleLock, toggleMute, muted, hasRecording,
   recording, integrations, action, videoRef, streamUrl, title, activePanel,
-  hasChat, hasEpg, handleOpenPanel, handleMinimize, setRecording, backVisible, minimizeVisible,
+  hasChat, hasEpg, hasDiagnostics, handleOpenPanel, setRecording, backVisible,
 }) {
-  const controls = [
-    control('back', 'Back', onBack, { defaultVisible: backVisible }),
-    ...(!isLive ? [control('restart', 'Restart', restart)] : []),
-    control('lock', 'Lock controls', toggleLock, { active: false, defaultVisible: true }),
-  ];
+  const leftControls = [control('back', 'Back', onBack, { defaultVisible: backVisible })];
   let recordingControl = null;
   if (hasRecording) {
     const recordingLabel = recording ? 'Stop recording' : 'Start recording';
@@ -382,19 +476,39 @@ function buildUnlockedControls({
   }
   const chatLabel = activePanel === 'chat' ? 'Close live chat' : 'Live chat';
   const epgLabel = activePanel === 'epg' ? 'Close programme guide' : 'Programme guide';
-  return [
-    ...controls,
+  const rightControls = [
     recordingControl,
     control('liveChat', chatLabel, () => handleOpenPanel('chat'), { active: activePanel === 'chat', defaultVisible: hasChat }),
     control('epg', epgLabel, () => handleOpenPanel('epg'), { active: activePanel === 'epg', defaultVisible: hasEpg }),
-    control('minimize', 'Minimize player', handleMinimize, { defaultVisible: minimizeVisible }),
+    ...(!isLive ? [control('restart', 'Restart', restart)] : []),
   ];
+  const muteLabel = muted ? 'Unmute' : 'Mute';
+  rightControls.push(
+    control('mute', muteLabel, toggleMute, { icon: muted ? 'mute' : 'unmute' }),
+    control('diagnostics', 'Stream diagnostics', () => handleOpenPanel('diagnostics'), { active: activePanel === 'diagnostics', defaultVisible: hasDiagnostics }),
+    control('lock', 'Lock controls', toggleLock, { active: false, defaultVisible: true }),
+  );
+  return { left: leftControls, right: rightControls };
+}
+
+function getDrawerLabel(activePanel) {
+  if (activePanel === 'chat') return 'Live chat drawer';
+  if (activePanel === 'epg') return 'Programme guide drawer';
+  return 'Stream diagnostics drawer';
+}
+
+function getPlaybackStatus(error, buffering, paused) {
+  if (error) return 'Error';
+  if (buffering) return 'Buffering';
+  return paused ? 'Paused' : 'Playing';
 }
 
 function WebPlayerLayout(props) {
-  const controlLayer = !props.error && !props.audioOnly
-    ? h(WebPlayerControls, {
+  let controlLayer = null;
+  if (!props.error && !props.audioOnly) {
+    controlLayer = h(WebPlayerControls, {
       locked: props.locked,
+      buffering: props.buffering,
       overrides: props.controlOverrides,
       theme: props.theme,
       icons: props.icons,
@@ -403,25 +517,33 @@ function WebPlayerLayout(props) {
       paused: props.isPaused,
       togglePlay: props.togglePlay,
       bottomProps: props.bottomControlProps,
-    })
-    : null;
-  const playerTitle = props.title && !props.audioOnly
-    ? h('div', { className: 'cinecrew-player__title', style: { color: props.theme.controlColor } }, props.title)
-    : null;
-  const loadingNotice = props.buffering && !props.error
-    ? h('div', { className: 'cinecrew-player__status', style: { color: props.theme.controlColor } },
+    });
+  }
+  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 } },
       h('span', { className: 'cinecrew-player__spinner', style: { borderTopColor: props.theme.accentColor } }), 'Loading stream…')
-    : null;
-  const audioCard = props.audioOnly
-    ? h(WebAudioOnlyCard, { poster: props.poster, title: props.title, theme: props.theme, onSwitchToVideo: props.onSwitchToVideo })
-    : null;
-  const panelNode = props.activePanel && props.webPanel
-    ? h('div', { className: 'cinecrew-player__panel', style: { background: props.theme.surfaceColor, color: props.theme.controlColor } }, props.webPanel)
-    : null;
+  }
+  let audioCard = null;
+  if (props.audioOnly) {
+    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) {
+    panelNode = h('aside', {
+      className: `cinecrew-player__panel${props.drawerMode === 'resize' ? ' is-resizing' : ''}`,
+      style: { color: props.theme.controlColor, ...props.drawerStyle },
+      'aria-label': getDrawerLabel(props.activePanel),
+    }, props.webPanel);
+  }
   return h('div', {
     ref: props.playerRef,
-    className: `cinecrew-player${props.inlinePreview ? ' cinecrew-player--inline-preview' : ''} ${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 },
+    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, '--cinecrew-media-width': '64%' },
     onWheel: props.onWheel,
     'data-stream-mode': props.streamMode,
   },
@@ -429,7 +551,7 @@ function WebPlayerLayout(props) {
   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);
@@ -473,7 +595,13 @@ function getPanelRenderer(activePanel, renderLiveChat, renderEpg, integrations)
   return null;
 }
 
-function createWebPanelNode({ renderer, integration, activePanel, integrations, source, title, theme, onClose }) {
+function createWebPanelNode({
+  renderer, integration, activePanel, integrations, source, title, theme, icons, onClose,
+  diagnostics, messagePageSize,
+}) {
+  if (activePanel === 'diagnostics') {
+    return h(WebDiagnosticsPanel, { title, theme, icons, onClose, ...diagnostics });
+  }
   if (renderer) return h(renderer, { title, source, onClose });
   if (!integration) return null;
   const hasLoader = activePanel === 'chat'
@@ -488,20 +616,247 @@ function createWebPanelNode({ renderer, integration, activePanel, integrations,
     title,
     theme,
     onClose,
+    messagePageSize,
   });
 }
 
-function WebIntegrationPanel({ kind, integration, integrations, source, title, theme, onClose }) {
+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 connection = globalThis.navigator?.connection;
+  const buffered = getBufferedAhead(video, currentTime);
+  const frames = getFrameQuality(video);
+  const cards = [
+    { icon: 'display', label: 'Video resolution', value: resolution },
+    { icon: 'network', label: 'Connection rate', value: Number.isFinite(connection?.downlink) ? `${connection.downlink} Mbps` : 'Not reported' },
+    { icon: 'clock', label: 'Network RTT estimate', value: Number.isFinite(connection?.rtt) ? `${connection.rtt} ms` : 'Not reported' },
+    { icon: 'buffer', label: 'Buffered ahead', value: buffered === null ? 'Not reported' : `${buffered.toFixed(1)} sec` },
+    { icon: 'frames', label: 'Dropped / total frames', value: frames && Number.isFinite(frames.dropped) ? `${frames.dropped} / ${frames.total ?? '—'}` : 'Not reported' },
+    { icon: 'speedometer', label: 'Playback position', value: `${formatTime(currentTime)} / ${formatTime(duration)}` },
+    { icon: 'network', label: 'Connection type', value: connection?.effectiveType || 'Not reported' },
+    { icon: 'video', label: 'Stream format', value: streamMode || 'Unknown' },
+  ];
+  return h('section', {
+    className: 'cinecrew-player__diagnostics',
+    style: { color: theme.controlColor },
+    'aria-label': 'Stream diagnostics',
+  },
+  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, label, value }) => h('article', { className: 'cinecrew-player__diagnostic-card', key: label },
+      h('span', { className: 'cinecrew-player__diagnostic-icon' }, h(Icon, { name: icon, icons, color: theme.accentColor })),
+      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) {
+  return String(message?.id ?? message?.messageId ?? message?.createdAt ?? message?.timestamp
+    ?? `${message?.username || message?.userName || ''}:${message?.comment || message?.message || message?.text || index}`);
+}
+
+function mergeChatMessages(existing, incoming, prepend = false) {
+  const messages = prepend ? [...incoming, ...existing] : [...existing, ...incoming];
+  const unique = new Map();
+  messages.forEach((message, index) => unique.set(getChatMessageKey(message, index), message));
+  return [...unique.values()];
+}
+
+function formatChatTimestamp(value) {
+  if (value === null || value === undefined || value === '') return '';
+  const date = new Date(value);
+  return Number.isNaN(date.getTime())
+    ? String(value)
+    : date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+}
+
+const EMOJI_BATCH_SIZE = 96;
+
+function WebEmojiPicker({ onSelect }) {
+  const [emojiGroup, setEmojiGroup] = useState(EMOJI_GROUPS[0].name);
+  const [emojiQuery, setEmojiQuery] = useState('');
+  const [visibleCount, setVisibleCount] = useState(EMOJI_BATCH_SIZE);
+  const listRef = useRef(null);
+  const activeGroup = EMOJI_GROUPS.find((group) => group.name === emojiGroup) || EMOJI_GROUPS[0];
+  const filteredEmojis = useMemo(
+    () => emojiQuery.trim() ? searchEmojis(emojiQuery) : activeGroup.items,
+    [activeGroup, emojiQuery],
+  );
+  const visibleEmojis = filteredEmojis.slice(0, visibleCount);
+
+  useEffect(() => {
+    setVisibleCount(EMOJI_BATCH_SIZE);
+    if (listRef.current) listRef.current.scrollTop = 0;
+  }, [emojiGroup, emojiQuery]);
+
+  const loadMore = () => setVisibleCount((count) => Math.min(count + EMOJI_BATCH_SIZE, filteredEmojis.length));
+  const handleScroll = (event) => {
+    const element = event.currentTarget;
+    if (element.scrollTop + element.clientHeight >= element.scrollHeight - 32) loadMore();
+  };
+
+  return h('div', { className: 'cinecrew-player__emoji-picker', role: 'dialog', 'aria-label': 'Choose an emoji' },
+    h('input', {
+      className: 'cinecrew-player__emoji-search',
+      type: 'search',
+      value: emojiQuery,
+      onChange: (event) => setEmojiQuery(event.target.value),
+      placeholder: 'Search all emojis',
+      'aria-label': 'Search all emojis',
+    }),
+    h('nav', { className: 'cinecrew-player__emoji-categories', 'aria-label': 'Emoji categories' },
+      EMOJI_GROUPS.map((group) => h('button', {
+        key: group.name,
+        type: 'button',
+        className: !emojiQuery.trim() && group.name === emojiGroup ? 'is-active' : '',
+        onClick: () => {
+          setEmojiGroup(group.name);
+          setEmojiQuery('');
+        },
+        'aria-label': group.name,
+        title: group.name,
+        'aria-pressed': !emojiQuery.trim() && group.name === emojiGroup,
+      }, group.icon))),
+    h('div', {
+      className: 'cinecrew-player__emoji-grid',
+      role: 'grid',
+      ref: listRef,
+      onScroll: handleScroll,
+    },
+    visibleEmojis.map((item) => h('button', {
+      key: item.codepoints,
+      type: 'button',
+      onClick: () => onSelect(item.emoji),
+      'aria-label': `Insert ${item.short_name}`,
+      title: item.short_name,
+    }, item.emoji)),
+    visibleCount < filteredEmojis.length ? h('button', {
+      type: 'button',
+      className: 'cinecrew-player__emoji-load-more',
+      onClick: loadMore,
+    }, 'Load more emojis') : null));
+}
+
+function WebChatComposer({ sending, canSend, onSend }) {
+  const [message, setMessage] = useState('');
+  const [emojiOpen, setEmojiOpen] = useState(false);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const comment = message.trim();
+    if (!comment || sending || !canSend) return;
+    const sent = await onSend(comment);
+    if (sent) setMessage('');
+  };
+  const insertEmoji = (emoji) => setMessage((current) => `${current}${emoji}`);
+
+  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('input', {
+        value: message,
+        onChange: (event) => setMessage(event.target.value),
+        placeholder: 'Add a message…',
+        'aria-label': 'Chat message',
+        maxLength: 1000,
+      }),
+      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' }))),
+    emojiOpen ? h(WebEmojiPicker, { onSelect: insertEmoji }) : null);
+}
+
+function WebPanelRow({ row, index, isChat }) {
+  if (isChat) {
+    const timestamp = row.createdAt ?? row.timestamp ?? row.sentAt ?? row.time;
+    return h('article', { key: row.id ?? row.messageId ?? index, className: 'cinecrew-player__chat-message' },
+      h('header', null,
+        h('strong', null, row.username || row.userName || row.name || 'Viewer'),
+        timestamp ? h('time', { dateTime: String(timestamp) }, formatChatTimestamp(timestamp)) : null),
+      h('span', null, row.comment || row.message || row.text || ''));
+  }
+  const start = row.startMs ?? row.start ?? row.startTime;
+  const end = row.endMs ?? row.end ?? row.endTime;
+  return h('article', { key: row.id ?? row.startMs ?? index, className: 'cinecrew-player__epg-item' },
+    h('small', null, [formatListingTime(start), formatListingTime(end)].filter(Boolean).join(' – ')),
+    h('strong', null, row.title || row.name || 'Programme'),
+    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);
-  const [message, setMessage] = useState('');
   const [loading, setLoading] = useState(true);
+  const [loadingOlder, setLoadingOlder] = useState(false);
+  const [hasMoreMessages, setHasMoreMessages] = useState(false);
+  const [messageOffset, setMessageOffset] = useState(0);
   const [sending, setSending] = useState(false);
   const [error, setError] = useState('');
+  const rowsRef = useRef([]);
   const channelId = String(source.streamId || source.mediaId || source.id || '');
   const isChat = kind === 'chat';
+  const pageSize = Math.max(1, Math.floor(Number(messagePageSize) || 50));
   const emptyStateMessage = isChat ? 'No messages yet.' : 'No programme information available.';
-  const sendButtonLabel = sending ? 'Sending…' : 'Send';
+
+  const updateRows = (nextRows) => {
+    rowsRef.current = nextRows;
+    setRows(nextRows);
+  };
 
   const load = useCallback(async () => {
     if (!channelId) {
@@ -512,15 +867,30 @@ function WebIntegrationPanel({ kind, integration, integrations, source, title, t
     try {
       setError('');
       const value = isChat
-        ? await integration.loadMessages({ channelId, limit: 50 })
+        ? await integration.loadMessages({ channelId, limit: pageSize, offset: 0 })
         : await integration.loadListings({ channelId, limit: integration.limit || 48 });
-      setRows(responseRows(value, isChat ? ['messages', 'items', 'comments'] : ['listings', 'programmes', 'epg', 'items']));
+      const nextRows = responseRows(value, isChat ? ['messages', 'items', 'comments'] : ['listings', 'programmes', 'epg', 'items']);
+      if (isChat) {
+        const previousCount = rowsRef.current.length;
+        const mergedRows = mergeChatMessages(rowsRef.current, nextRows);
+        updateRows(mergedRows);
+        const addedCount = Math.max(0, mergedRows.length - previousCount);
+        setMessageOffset((offset) => previousCount === 0
+          ? nextRows.length
+          : Math.max(offset, nextRows.length) + addedCount);
+        if (previousCount === 0) {
+          const explicitHasMore = value?.hasMore ?? value?.pagination?.hasMore;
+          setHasMoreMessages(explicitHasMore === undefined ? nextRows.length >= pageSize : Boolean(explicitHasMore));
+        }
+      } else {
+        setRows(nextRows);
+      }
     } catch (loadError) {
       setError(loadError?.message || `Could not load ${isChat ? 'live chat' : 'the programme guide'}.`);
     } finally {
       setLoading(false);
     }
-  }, [channelId, integration, isChat]);
+  }, [channelId, integration, isChat, pageSize]);
 
   useEffect(() => {
     let cancelled = false;
@@ -534,16 +904,36 @@ function WebIntegrationPanel({ kind, integration, integrations, source, title, t
 
   useEffect(() => {
     setLoading(true);
+    rowsRef.current = [];
+    setRows([]);
+    setMessageOffset(0);
+    setHasMoreMessages(false);
     load();
     if (!isChat) return undefined;
     const timer = setInterval(load, Math.max(1000, Number(integration.pollIntervalMs) || 5000));
     return () => clearInterval(timer);
   }, [load, isChat, integration.pollIntervalMs]);
 
-  const send = async (event) => {
-    event.preventDefault();
-    const comment = message.trim();
-    if (!comment || sending || !integration.sendMessage) return;
+  const loadOlderMessages = async () => {
+    if (!isChat || !hasMoreMessages || loadingOlder) return;
+    setLoadingOlder(true);
+    try {
+      setError('');
+      const value = await integration.loadMessages({ channelId, limit: pageSize, offset: messageOffset });
+      const olderRows = responseRows(value, ['messages', 'items', 'comments']);
+      updateRows(mergeChatMessages(rowsRef.current, olderRows, true));
+      setMessageOffset((offset) => offset + olderRows.length);
+      const explicitHasMore = value?.hasMore ?? value?.pagination?.hasMore;
+      setHasMoreMessages(explicitHasMore === undefined ? olderRows.length >= pageSize : Boolean(explicitHasMore));
+    } catch (loadError) {
+      setError(loadError?.message || 'Could not load more messages.');
+    } finally {
+      setLoadingOlder(false);
+    }
+  };
+
+  const send = async (comment) => {
+    if (!comment || sending || !integration.sendMessage) return false;
     setSending(true);
     try {
       await integration.sendMessage({
@@ -552,10 +942,11 @@ function WebIntegrationPanel({ kind, integration, integrations, source, title, t
         username: user?.username || 'Viewer',
         comment,
       });
-      setMessage('');
       await load();
+      return true;
     } catch (sendError) {
       setError(sendError?.message || 'Could not send your message.');
+      return false;
     } finally {
       setSending(false);
     }
@@ -572,29 +963,14 @@ 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' }, rows.map((row, index) => {
-    const key = row.id ?? row.messageId ?? row.startMs ?? index;
-    if (isChat) {
-      return h('article', { key, className: 'cinecrew-player__chat-message' },
-        h('strong', null, row.username || row.userName || row.name || 'Viewer'),
-        h('span', null, row.comment || row.message || row.text || ''));
-    }
-    const start = row.startMs ?? row.start ?? row.startTime;
-    const end = row.endMs ?? row.end ?? row.endTime;
-    return h('article', { key, className: 'cinecrew-player__epg-item' },
-      h('small', null, [formatListingTime(start), formatListingTime(end)].filter(Boolean).join(' – ')),
-      h('strong', null, row.title || row.name || 'Programme'),
-      row.description ? h('span', null, row.description) : null);
-  })),
-  isChat && typeof integration.sendMessage === 'function' ? h('form', { className: 'cinecrew-player__chat-form', onSubmit: send },
-    h('input', {
-      value: message,
-      onChange: (event) => setMessage(event.target.value),
-      placeholder: 'Add a message…',
-      'aria-label': 'Chat message',
-      maxLength: 1000,
-    }),
-    h('button', { type: 'submit', disabled: sending || !message.trim() }, sendButtonLabel)) : null);
+    h('div', { className: 'cinecrew-player__panel-list' },
+      isChat && hasMoreMessages ? h(WebLoadMoreMessages, { loading: loadingOlder, onClick: loadOlderMessages }) : null,
+      rows.map((row, index) => h(WebPanelRow, { key: getChatMessageKey(row, index), row, index, isChat }))),
+    isChat ? h(WebChatComposer, {
+      sending,
+      canSend: typeof integration.sendMessage === 'function',
+      onSend: send,
+    }) : null);
 }
 
 /**
@@ -614,6 +990,10 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     playbackRate: playbackRateProp = 1,
     paused: pausedProp,
     controls: controlOverrides = {},
+    features = {},
+    drawerMode = 'overlay',
+    drawerStyle,
+    messagePageSize = 50,
     actions = {},
     theme: themeProp = {},
     icons = {},
@@ -634,7 +1014,6 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     onPromotePreview,
     initialShowLiveChat = false,
     liveChatNonce = 0,
-    onMinimize,
     onBack,
     mediaId,
     onFullscreen,
@@ -758,6 +1137,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     pausedRef: pausedStateRef,
     onErrorRef,
   });
+  const streamMode = getStreamMode(youtubeVideoId, mpegTs.useMpegTs, useHls);
   useWebAc3AudioPlayback({
     active: mpegTs.useAc3Fallback,
     streamUrl,
@@ -772,7 +1152,9 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     if (!video) return;
     if (isPaused) video.pause();
     else video.play().catch((playError) => {
-      if (playError?.name !== 'NotAllowedError') handleError(playError);
+      if (playError?.name !== 'NotAllowedError' && playError?.name !== 'AbortError') {
+        handleError(playError);
+      }
     });
   }, [isPaused, streamUrl, youtubeVideoId, handleError]);
 
@@ -826,7 +1208,6 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     else youtubeRef.current?.seekTo?.(Math.max(0, Number(seconds) || 0));
   }, { seconds: Number(seconds) || 0 }), [action]);
   const handleBack = useCallback(() => action('onBack', onBack || props.onClose, { title, source: media }), [action, onBack, props.onClose, title, media]);
-  const handleMinimize = useCallback(() => action('onMinimize', onMinimize, { title, source: media }), [action, onMinimize, title, media]);
   useImperativeHandle(ref, () => {
     const api = {
       play: () => setPaused(false),
@@ -847,7 +1228,6 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
       seekTo,
       seekBy: (delta) => seekTo((Number(videoRef.current?.currentTime) || currentTime) + (Number(delta) || 0)),
       back: handleBack,
-      minimize: handleMinimize,
       getVideoElement: () => videoRef.current,
       enterFullscreen: () => playerRef.current?.requestFullscreen?.(),
       exitFullscreen: () => typeof document !== 'undefined' ? document.exitFullscreen?.() : undefined,
@@ -855,11 +1235,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, handleMinimize, availableTracks, tracksProp, currentTime]);
+  }, [setPaused, togglePlay, restart, toggleMute, setMuted, setAspectRatio, setAudioOnlyMode, setVideoOnlyMode, setPlaybackRateAction, 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 hasDiagnostics = Boolean(features.diagnostics) || typeof actions.onDiagnosticsOpen === 'function';
   const sourceType = String(media.type || media.mimeType || '').toLowerCase();
   const directVideoSource = getDirectVideoSource({
     mpegTs: mpegTs.useMpegTs,
@@ -948,10 +1329,11 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     actions,
     onBack: handleBack,
     backVisible: typeof actions.onBack === 'function' || typeof onBack === 'function' || typeof props.onClose === 'function',
-    minimizeVisible: typeof actions.onMinimize === 'function' || typeof onMinimize === 'function',
     isLive,
     restart,
     toggleLock,
+    toggleMute,
+    muted,
     hasRecording,
     recording,
     integrations,
@@ -962,8 +1344,8 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     activePanel,
     hasChat,
     hasEpg,
+    hasDiagnostics,
     handleOpenPanel: openPanel,
-    handleMinimize,
     setRecording,
   });
   const webPanel = createWebPanelNode({
@@ -974,7 +1356,16 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     source: panelSource,
     title,
     theme,
+    icons,
     onClose: () => setActivePanel(null),
+    diagnostics: {
+      streamMode,
+      status: getPlaybackStatus(error, buffering, isPaused),
+      currentTime,
+      duration,
+      videoRef,
+    },
+    messagePageSize,
   });
 
   const handleYouTubeProgress = (event) => {
@@ -996,6 +1387,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     playbackRate,
     videoOnly,
     videoStyle,
+    drawerResize: Boolean(activePanel) && drawerMode === 'resize',
     audioOnly,
     inlinePreview,
     onPromotePreview,
@@ -1008,8 +1400,6 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     onError: handleError,
     handleError,
   });
-  const streamMode = getStreamMode(youtubeVideoId, mpegTs.useMpegTs, useHls);
-
   const bottomControlProps = {
     isLive,
     overrides: controlOverrides,
@@ -1063,6 +1453,8 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     togglePlay,
     bottomControlProps,
     onWheel: (event) => onInlinePreviewWheel?.(event.deltaY),
+    drawerMode,
+    drawerStyle,
   });
 });
 
@@ -1111,7 +1503,7 @@ export const InlineLivePlayer = React.memo(function InlineLivePlayer({
     controls: {
       back: false, restart: false, lock: false, recording: false, liveChat: false, epg: false,
       seek: false, aspectRatio: false, videoOnly: false, audioOnly: false, audioTracks: false,
-      playbackRate: false, minimize: false, playPause: true, mute: true, fullscreen: true,
+      playbackRate: false, playPause: true, mute: true, fullscreen: true,
       ...controls,
     },
     actions: {