@cinecrew/cinecrew-player 0.1.1 → 0.1.2

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', 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,
@@ -38,6 +40,7 @@ const WEB_ICON_PATHS = {
   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',
   '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',
@@ -114,14 +117,43 @@ function getPanelActionName(panel) {
 }
 
 function WebSeekControl({ currentTime, duration, theme, onSeek }) {
+  const [seekDraft, setSeekDraft] = useState(currentTime);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    if (!isDragging) setSeekDraft(currentTime);
+  }, [currentTime, isDragging]);
+
+  const updateSeek = (event) => {
+    const nextTime = Number(event.currentTarget.value);
+    setSeekDraft(nextTime);
+    onSeek(nextTime);
+  };
+
+  const finishSeek = (event) => {
+    if (!isDragging) return;
+    updateSeek(event);
+    setIsDragging(false);
+  };
+
   return h('div', { className: 'cinecrew-player__seek' },
     h('span', null, formatTime(currentTime)),
     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: Math.min(isDragging ? seekDraft : currentTime, duration),
+      onChange: updateSeek,
+      onPointerDown: (event) => {
+        event.stopPropagation();
+        setIsDragging(true);
+        setSeekDraft(Number(event.currentTarget.value));
+      },
+      onPointerUp: finishSeek,
+      onPointerCancel: finishSeek,
+      onBlur: finishSeek,
       style: { accentColor: theme.accentColor },
     }),
     h('span', null, formatTime(duration)));
@@ -138,7 +170,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);
 }
@@ -170,8 +202,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,
@@ -211,27 +243,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 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: '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, 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 = 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 +272,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 +302,7 @@ function WebPlayerSurface({
   playbackRate,
   videoOnly,
   videoStyle,
+  drawerResize,
   audioOnly,
   inlinePreview,
   onPromotePreview,
@@ -292,6 +330,7 @@ function WebPlayerSurface({
       onStateChange,
       onError,
       onEnded,
+      style: drawerResize ? { width: '64%', height: '64%', inset: '18% auto auto 0' } : undefined,
     });
   }
   if (!streamUrl) return h('div', { className: 'cinecrew-player__empty' });
@@ -304,9 +343,14 @@ function WebPlayerSurface({
     muted: muted || videoOnly,
     playsInline: true,
     preload: 'auto',
-    style: { ...videoStyle, opacity: audioOnly ? 0 : 1 },
+    style: {
+      ...videoStyle,
+      ...(drawerResize ? { width: '64%', height: '64%', top: '18%', right: 'auto', bottom: 'auto' } : {}),
+      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 });
     },
@@ -346,7 +390,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 +405,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 +424,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,24 +465,32 @@ 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, 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(),
+    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 },
     onWheel: props.onWheel,
     'data-stream-mode': props.streamMode,
@@ -473,7 +543,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, onClose,
+  diagnostics, messagePageSize,
+}) {
+  if (activePanel === 'diagnostics') {
+    return h(WebDiagnosticsPanel, { title, theme, ...diagnostics });
+  }
   if (renderer) return h(renderer, { title, source, onClose });
   if (!integration) return null;
   const hasLoader = activePanel === 'chat'
@@ -488,20 +564,195 @@ function createWebPanelNode({ renderer, integration, activePanel, integrations,
     title,
     theme,
     onClose,
+    messagePageSize,
   });
 }
 
-function WebIntegrationPanel({ kind, integration, integrations, source, title, theme, onClose }) {
+function WebDiagnosticsPanel({ title, theme, 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)}`],
+  ];
+  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))));
+}
+
+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 }, sending ? 'Sending…' : 'Send')),
+    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 +763,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 +800,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 +838,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 +859,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 +886,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 +910,6 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     onPromotePreview,
     initialShowLiveChat = false,
     liveChatNonce = 0,
-    onMinimize,
     onBack,
     mediaId,
     onFullscreen,
@@ -758,6 +1033,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 +1048,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 +1104,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 +1124,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 +1131,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 +1225,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 +1240,8 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     activePanel,
     hasChat,
     hasEpg,
+    hasDiagnostics,
     handleOpenPanel: openPanel,
-    handleMinimize,
     setRecording,
   });
   const webPanel = createWebPanelNode({
@@ -975,6 +1253,14 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     title,
     theme,
     onClose: () => setActivePanel(null),
+    diagnostics: {
+      streamMode,
+      status: getPlaybackStatus(error, buffering, isPaused),
+      currentTime,
+      duration,
+      videoRef,
+    },
+    messagePageSize,
   });
 
   const handleYouTubeProgress = (event) => {
@@ -996,6 +1282,7 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     playbackRate,
     videoOnly,
     videoStyle,
+    drawerResize: Boolean(activePanel) && drawerMode === 'resize',
     audioOnly,
     inlinePreview,
     onPromotePreview,
@@ -1008,8 +1295,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 +1348,8 @@ export const CineCrewPlayer = forwardRef(function CineCrewPlayer(props, ref) {
     togglePlay,
     bottomControlProps,
     onWheel: (event) => onInlinePreviewWheel?.(event.deltaY),
+    drawerMode,
+    drawerStyle,
   });
 });
 
@@ -1111,7 +1398,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: {