@cinecrew/cinecrew-player 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cinecrew/cinecrew-player",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "description": "Customizable cross-platform live and on-demand video player for React and React Native.",
   "license": "MIT",

package/src/native/InlineLivePlayer.js

@@ -117,7 +117,7 @@ function InlinePlayerOverlay({
     palette,
   });
   const muteLabel = muted ? 'Unmute' : 'Mute';
-  const muteIcon = muted ? 'volume-off' : 'volume-high';
+  const muteIcon = muted ? 'mute' : 'unmute';
   const playbackLabel = paused ? 'Play' : 'Pause';
   const playbackIcon = paused ? 'play' : 'pause';
 

package/src/native/MediaPlayerView.js

@@ -360,7 +360,7 @@ function InlinePreviewTopActions({ controls, muted, videoOnlyMode, handleMuteAct
             handleMuteAction();
           }}
         >
-          <PlayerIcon name={muted || videoOnlyMode ? 'volume-off' : 'volume-high'} size={19} color="#FFF" />
+          <PlayerIcon name={muted || videoOnlyMode ? 'mute' : 'unmute'} size={19} color="#FFF" />
         </TouchableOpacity>
       ) : null}
     </View>

package/src/native/customization.js

@@ -40,5 +40,6 @@ export function PlayerIcon({ name, pack = 'community', size = 20, color = '#FFFF
     return React.createElement(Text, { style: [{ fontSize: size, color }, style], accessibilityElementsHidden: true }, custom);
   }
   const IconSet = pack === 'material' ? MaterialIcons : MaterialCommunityIcons;
-  return React.createElement(IconSet, { name: typeof custom === 'string' ? custom : name, size, color, style });
+  const defaultIconNames = { mute: 'volume-off', unmute: 'volume-high' };
+  return React.createElement(IconSet, { name: typeof custom === 'string' ? custom : (defaultIconNames[name] || name), size, color, style });
 }

package/src/native/media/player/PlayerBottomBar.js

@@ -53,7 +53,7 @@ function AudioOnlyModeControl({ isAudioOnly, onToggle }) {
 function VideoOnlyControl({ isVideoOnly, onToggle }) {
   const palette = usePlayerColors();
   const selectedStyle = isVideoOnly ? { backgroundColor: palette.surfaceColor, borderWidth: 1.5, borderColor: palette.accentColor } : null;
-  return <TouchableOpacity style={[styles.speedButton, { backgroundColor: palette.controlBackground }, selectedStyle]} onPress={(event) => { event.stopPropagation(); onToggle?.(); }} accessibilityLabel={isVideoOnly ? 'Enable audio' : 'Video only'}><PlayerIcon name="video" size={18} color={isVideoOnly ? palette.accentColor : palette.controlColor} /></TouchableOpacity>;
+  return <TouchableOpacity style={[styles.speedButton, { backgroundColor: palette.controlBackground }, selectedStyle]} onPress={(event) => { event.stopPropagation(); onToggle?.(); }} accessibilityLabel={isVideoOnly ? 'Disable video-only mode' : 'Video only'}><PlayerIcon name="video" size={18} color={isVideoOnly ? palette.accentColor : palette.controlColor} /></TouchableOpacity>;
 }
 
 function SpeedControl({ enabled, open, playbackRate, onToggle, onSelect }) {
@@ -81,7 +81,7 @@ function SpeedControl({ enabled, open, playbackRate, onToggle, onSelect }) {
 
 function AudioTrackMenu({ open, audioTracks, selectedAudioTrack, onSelect, palette }) {
   if (!open) return null;
-  if (audioTracks.length <= 1) return <View style={[styles.speedPickerPopup, { backgroundColor: palette.surfaceColor, borderColor: palette.borderColor }]}><Text style={[styles.speedOptionText, { color: palette.controlColor }]}>No other audio available</Text></View>;
+  if (audioTracks.length === 0) return <View style={[styles.speedPickerPopup, { backgroundColor: palette.surfaceColor, borderColor: palette.borderColor }]}><Text style={[styles.speedOptionText, { color: palette.controlColor }]}>No audio tracks available</Text></View>;
   return (
     <View style={[styles.speedPickerPopup, { backgroundColor: palette.surfaceColor, borderColor: palette.borderColor }]}>
       <Text style={[styles.speedPickerTitle, { color: palette.mutedColor }]}>Audio</Text>

package/src/native/media/player/PlayerTopBar.js

@@ -60,7 +60,7 @@ function PlaybackSessionControls({ isLive, controls, muted, onRestart, onMute, o
   return (
     <>
       {!isLive && controls.restart !== false ? <TouchableOpacity style={styles.pill} onPress={(event) => { event.stopPropagation(); onRestart(); }} hitSlop={12}><PlayerIcon name="restart" size={20} color={palette.controlColor} /></TouchableOpacity> : null}
-      {controls.mute !== false ? <TouchableOpacity style={styles.pill} onPress={(event) => { event.stopPropagation(); onMute(); }} hitSlop={12}><PlayerIcon name={muted ? 'volume-off' : 'volume-high'} size={20} color={muted ? palette.errorColor : palette.controlColor} /></TouchableOpacity> : null}
+      {controls.mute !== false ? <TouchableOpacity style={styles.pill} onPress={(event) => { event.stopPropagation(); onMute(); }} hitSlop={12}><PlayerIcon name={muted ? 'mute' : 'unmute'} size={20} color={muted ? palette.errorColor : palette.controlColor} /></TouchableOpacity> : null}
       {controls.lock !== false ? <TouchableOpacity style={styles.pill} onPress={(event) => { event.stopPropagation(); onLock(); }} hitSlop={12}><PlayerIcon name="lock-open-variant" size={20} color={palette.controlColor} /></TouchableOpacity> : null}
     </>
   );

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

@@ -36,7 +36,17 @@ export function useWebVideoAspectRatio(videoAspectRatio, audioOnly) {
     width: useCustomRatio ? 'auto' : '100%',
     height: useCustomRatio ? 'auto' : '100%',
     ...(useCustomRatio
-      ? { maxWidth: '100%', maxHeight: '100%', aspectRatio: aspectRatioVal }
+      ? {
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        right: 'auto',
+        bottom: 'auto',
+        transform: 'translate(-50%, -50%)',
+        maxWidth: '100%',
+        maxHeight: '100%',
+        aspectRatio: aspectRatioVal,
+      }
       : {}),
     objectFit: useCustomRatio ? 'contain' : aspectFit,
     backgroundColor: '#000',

package/src/web/index.js

@@ -21,7 +21,7 @@ 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',
 };
@@ -34,11 +34,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 +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) {
@@ -119,44 +127,62 @@ 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 }) {
@@ -179,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 }),
@@ -226,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,
@@ -243,25 +271,25 @@ 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 videoOnlyLabel = 'Video 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: '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' },
-        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;
+  let leftControls = locked ? null : unlockedControls.left;
   let rightControls = unlockedControls.right;
   if (locked) {
     rightControls = renderControlButton({
@@ -330,10 +358,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 +394,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 +406,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', {
@@ -478,7 +530,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,7 +543,7 @@ 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,
   },
@@ -499,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);
@@ -544,11 +596,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 +620,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', 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('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, 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) {
@@ -704,7 +803,12 @@ function WebChatComposer({ sending, canSend, onSend }) {
         'aria-label': 'Chat message',
         maxLength: 1000,
       }),
-      h('button', { type: 'submit', disabled: sending || !message.trim() || !canSend }, sending ? 'Sending…' : 'Send')),
+      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);
 }
 
@@ -1252,6 +1356,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     source: panelSource,
     title,
     theme,
+    icons,
     onClose: () => setActivePanel(null),
     diagnostics: {
       streamMode,

package/src/web/styles.css

@@ -30,7 +30,7 @@
 
 .cinecrew-player__video,
 .cinecrew-player__youtube {
-  transition: width 180ms ease, height 180ms ease, top 180ms ease;
+  transition: width 180ms ease, height 180ms ease, top 180ms ease, left 180ms ease, transform 180ms ease;
 }
 
 .cinecrew-player__shade {
@@ -131,15 +131,22 @@
 .cinecrew-player__seek {
   flex: 0 0 auto;
   width: 100%;
+  align-items: center;
   font-variant-numeric: tabular-nums;
   text-shadow: 0 1px 3px #000;
 }
 
+.cinecrew-player__seek > span {
+  min-width: 3.4em;
+}
+
+.cinecrew-player__seek > span:last-child { text-align: right; }
+
 .cinecrew-player__seek input {
   flex: 1;
   min-width: 50px;
   min-height: 24px;
-  touch-action: auto;
+  touch-action: pan-y;
   cursor: ew-resize;
 }
 
@@ -193,8 +200,9 @@
 
 .cinecrew-player__audio-card {
   position: absolute;
-  inset: 10%;
+  inset: 0;
   z-index: 5;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -202,7 +210,7 @@
   gap: 18px;
   padding: 24px;
   border: 1px solid;
-  border-radius: 20px;
+  border-radius: inherit;
   text-align: center;
   box-shadow: 0 18px 60px rgba(0, 0, 0, .32);
 }
@@ -214,6 +222,23 @@
   border-radius: 50%;
 }
 
+.cinecrew-player__audio-placeholder {
+  display: grid;
+  width: min(30vw, 160px);
+  aspect-ratio: 1;
+  place-items: center;
+  border: 2px solid var(--cinecrew-accent, #00d4ff);
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, rgba(0, 212, 255, .28), transparent 58%), linear-gradient(145deg, #142b49, #081321 72%);
+  box-shadow: 0 0 28px rgba(0, 212, 255, .2), inset 0 0 22px rgba(0, 212, 255, .12);
+}
+
+.cinecrew-player__audio-placeholder .cinecrew-player__icon {
+  width: 42px;
+  height: 42px;
+  font-size: 42px;
+}
+
 .cinecrew-player__audio-wave {
   letter-spacing: .28em;
   font-size: 1.25rem;
@@ -302,36 +327,120 @@
   font: inherit;
 }
 
+.cinecrew-player__menu-empty {
+  padding: 10px 13px;
+  color: var(--cinecrew-text, #fff);
+  white-space: nowrap;
+}
+
 .cinecrew-player__menu-wrap--aspect .cinecrew-player__menu button {
   padding-block: 6px;
 }
 
 .cinecrew-player__diagnostics {
   display: flex;
+  box-sizing: border-box;
+  height: 100%;
   flex-direction: column;
-  gap: 10px;
-  min-width: 220px;
+  gap: 14px;
+  min-width: 0;
+  overflow: auto;
 }
 
-.cinecrew-player__diagnostics > strong {
-  padding-bottom: 8px;
+.cinecrew-player__diagnostics-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding-bottom: 12px;
   border-bottom: 1px solid rgba(255, 255, 255, .14);
 }
 
-.cinecrew-player__diagnostic-row {
+.cinecrew-player__diagnostics-heading > div {
   display: flex;
-  justify-content: space-between;
-  gap: 16px;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.cinecrew-player__diagnostics-heading strong { font-size: 1.05rem; }
+.cinecrew-player__diagnostics-heading > div > span { opacity: .7; overflow-wrap: anywhere; }
+
+.cinecrew-player__diagnostics-close {
+  display: grid;
+  flex: 0 0 36px;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border: 1px solid rgba(255,255,255,.2);
+  border-radius: 50%;
+  color: inherit;
+  background: rgba(255,255,255,.1);
+  cursor: pointer;
+}
+
+.cinecrew-player__diagnostics-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  align-self: flex-start;
+  padding: 6px 10px;
+  border: 1px solid rgba(255,255,255,.15);
+  border-radius: 999px;
+  background: rgba(255,255,255,.07);
+  font-size: .86em;
+}
+
+.cinecrew-player__status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #9ba9bb;
+  box-shadow: 0 0 10px currentColor;
+}
+
+.cinecrew-player__status-dot.is-playing { color: #42d392; background: currentColor; }
+.cinecrew-player__status-dot.is-buffering { color: #ffca58; background: currentColor; }
+.cinecrew-player__status-dot.is-error { color: #ff647c; background: currentColor; }
+
+.cinecrew-player__diagnostic-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 9px;
+}
+
+.cinecrew-player__diagnostic-card {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: 32px minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  align-items: center;
+  column-gap: 9px;
+  row-gap: 3px;
+  padding: 10px;
+  border: 1px solid rgba(255,255,255,.14);
+  border-radius: 12px;
+  background: rgba(255,255,255,.08);
   font-variant-numeric: tabular-nums;
 }
 
-.cinecrew-player__diagnostic-row span:first-child {
-  opacity: .72;
+.cinecrew-player__diagnostic-icon {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  grid-row: span 2;
+  place-items: center;
+  border-radius: 9px;
+  background: rgba(255,255,255,.08);
 }
 
-.cinecrew-player__diagnostic-row span:last-child {
-  text-align: right;
-  overflow-wrap: anywhere;
+.cinecrew-player__diagnostic-icon .cinecrew-player__icon { width: 18px; height: 18px; }
+.cinecrew-player__diagnostic-label { overflow: hidden; opacity: .7; font-size: .76em; text-overflow: ellipsis; white-space: nowrap; }
+.cinecrew-player__diagnostic-card strong { overflow-wrap: anywhere; font-size: .9em; }
+.cinecrew-player__diagnostics-note { opacity: .65; line-height: 1.35; }
+
+@media (max-width: 420px) {
+  .cinecrew-player__diagnostic-grid { grid-template-columns: minmax(0, 1fr); }
 }
 
 .cinecrew-player__panel-content {
@@ -420,17 +529,18 @@
   position: relative;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px;
-  border: 1px solid rgba(255, 255, 255, .2);
-  border-radius: 999px;
-  background: rgba(0, 0, 0, .2);
+  gap: 7px;
+  padding: 5px 6px 5px 10px;
+  border: 1px solid rgba(255, 255, 255, .22);
+  border-radius: 14px;
+  background: rgba(12, 20, 32, .72);
+  box-shadow: 0 3px 12px rgba(0,0,0,.12);
   transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
 }
 
 .cinecrew-player__chat-composer:focus-within {
   border-color: var(--cinecrew-accent);
-  background: rgba(0, 0, 0, .28);
+  background: rgba(12, 20, 32, .88);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--cinecrew-accent) 18%, transparent);
 }
 
@@ -439,7 +549,7 @@
   min-width: 0;
   border: 0;
   outline: 0;
-  padding: 8px 10px;
+  padding: 10px 4px;
   color: inherit;
   background: transparent;
   font: inherit;
@@ -468,15 +578,19 @@
 }
 
 .cinecrew-player__chat-composer button[type="submit"] {
-  min-width: auto;
-  padding: 0 14px;
-  border-radius: 999px;
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;
+  padding: 0;
+  border-radius: 12px;
   color: #07111e;
   background: var(--cinecrew-accent);
-  font-weight: 700;
   box-shadow: 0 2px 8px color-mix(in srgb, var(--cinecrew-accent) 24%, transparent);
 }
 
+.cinecrew-player__chat-composer button[type="submit"] .cinecrew-player__icon { width: 19px; height: 19px; }
+
 .cinecrew-player__chat-composer button[type="submit"]:hover:not(:disabled) {
   filter: brightness(1.08);
 }
@@ -649,15 +763,31 @@
   padding: 16px;
   border-left: 1px solid rgba(255,255,255,.2);
   border-radius: 0;
-  background: rgba(13, 26, 44, .78);
-  backdrop-filter: blur(18px);
+  background: rgba(13, 26, 44, .58);
+  backdrop-filter: blur(10px);
   box-shadow: -12px 0 34px rgba(0,0,0,.34);
   animation: cinecrew-drawer-in 180ms ease-out both;
 }
 
-.cinecrew-player--drawer-resize .cinecrew-player__panel { width: min(420px, 36%); }
+.cinecrew-player--drawer-resize .cinecrew-player__panel {
+  width: calc(100% - var(--cinecrew-media-width, 64%));
+  max-width: none;
+  padding: 14px;
+}
+
+.cinecrew-player__panel.is-resizing { background: rgba(13, 26, 44, .82); }
 
-.cinecrew-player__panel.is-resizing { background: rgba(13, 26, 44, .88); }
+.cinecrew-player--drawer-resize .cinecrew-player__shade,
+.cinecrew-player--drawer-resize .cinecrew-player__controls,
+.cinecrew-player--drawer-resize .cinecrew-player__status,
+.cinecrew-player--drawer-resize .cinecrew-player__error {
+  right: auto;
+  width: var(--cinecrew-media-width, 64%);
+}
+
+.cinecrew-player--drawer-resize .cinecrew-player__title {
+  right: calc(100% - var(--cinecrew-media-width, 64%));
+}
 
 .cinecrew-player__panel-close {
   position: absolute;
@@ -699,4 +829,6 @@
   .cinecrew-player__bottom-actions { align-items: flex-end; gap: 6px; }
   .cinecrew-player__bottom-right-actions { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
   .cinecrew-player__panel { width: min(380px, 92%); }
+  .cinecrew-player--drawer-resize { --cinecrew-media-width: 52% !important; }
+  .cinecrew-player--drawer-resize .cinecrew-player__panel { width: calc(100% - var(--cinecrew-media-width)); padding: 10px; }
 }