@cinecrew/cinecrew-player 0.1.1 → 0.1.3

package/src/native/media/LiveChatDrawer.js

@@ -39,6 +39,35 @@ function formatMessageTime(timestamp) {
   return date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
 }
 
+function normalizeChatMessage(message) {
+  return {
+    ...message,
+    username: message?.username || message?.userName || message?.name || 'Viewer',
+    textContent: message?.textContent || message?.comment || message?.message || message?.text || '',
+    createdAt: message?.createdAt || message?.timestamp || message?.sentAt || message?.time || null,
+  };
+}
+
+function normalizeChatPage(value) {
+  const rows = Array.isArray(value)
+    ? value
+    : value?.messages || value?.items || value?.comments || value?.data || [];
+  return Array.isArray(rows) ? rows.map(normalizeChatMessage) : [];
+}
+
+function chatMessageKey(message, index) {
+  if (message?.id !== undefined && message?.id !== null) return String(message.id);
+  if (message?.messageId !== undefined && message?.messageId !== null) return String(message.messageId);
+  return `${message?.username || ''}:${message?.createdAt || ''}:${message?.textContent || ''}:${index}`;
+}
+
+function mergeChatMessages(existing, incoming, prepend = false) {
+  const combined = prepend ? [...incoming, ...existing] : [...existing, ...incoming];
+  const unique = new Map();
+  combined.forEach((message, index) => unique.set(chatMessageKey(message, index), message));
+  return [...unique.values()];
+}
+
 function extractHostname(url) {
   if (!url) return 'Xtream Server';
   try {
@@ -90,6 +119,124 @@ const TAB_META = {
   diagnostics: { icon: 'pulse', title: 'Stream Diagnostics' },
 };
 
+function LiveChatPanel({
+  messagesLoading,
+  messages,
+  flatListRef,
+  renderMessageItem,
+  hasMoreMessages,
+  loadOlderMessages,
+  loadingOlderMessages,
+  chatError,
+  handleQuickReaction,
+  inputText,
+  setInputText,
+  handleSend,
+  isSending,
+  setShowEmojiPicker,
+  showEmojiPicker,
+  handleSelectEmoji,
+  colors,
+}) {
+  return (
+    <>
+      <View style={styles.welcomeBanner}>
+        <PlayerIcon name="shield-check" size={16} color="#00E5FF" style={{ marginTop: 2 }} />
+        <Text style={styles.welcomeText}>
+          Welcome to live chat! Remember to guard your privacy and abide by community guidelines.
+        </Text>
+      </View>
+
+      {messagesLoading && messages.length === 0 ? (
+        <View style={styles.chatLoadingWrap}>
+          <ActivityIndicator size="small" color="#00E5FF" />
+          <Text style={styles.epgStatusText}>Loading live chat…</Text>
+        </View>
+      ) : (
+        <FlatList
+          ref={flatListRef}
+          data={messages}
+          keyExtractor={(item, index) => chatMessageKey(item, index)}
+          renderItem={renderMessageItem}
+          contentContainerStyle={styles.messagesList}
+          showsVerticalScrollIndicator
+          keyboardShouldPersistTaps="handled"
+          ListHeaderComponent={hasMoreMessages ? (
+            <TouchableOpacity
+              style={styles.loadMoreMessages}
+              onPress={loadOlderMessages}
+              disabled={loadingOlderMessages}
+              accessibilityRole="button"
+            >
+              {loadingOlderMessages ? <ActivityIndicator size="small" color="#00E5FF" /> : null}
+              <Text style={styles.loadMoreMessagesText}>
+                {loadingOlderMessages ? 'Loading older messages…' : 'See more messages'}
+              </Text>
+            </TouchableOpacity>
+          ) : null}
+          ListEmptyComponent={<Text style={styles.epgStatusText}>No messages yet. Start the conversation.</Text>}
+        />
+      )}
+      {!!chatError && <Text style={styles.chatErrorText}>{chatError}</Text>}
+
+      <View style={styles.quickReactionsRow}>
+        {QUICK_REACTIONS.map((emoji) => (
+          <TouchableOpacity
+            key={emoji}
+            style={styles.quickReactionBtn}
+            onPress={() => handleQuickReaction(emoji)}
+            activeOpacity={0.6}
+          >
+            <Text style={styles.quickReactionEmoji}>{emoji}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+
+      <View style={styles.inputBarContainer}>
+        <View style={styles.inputPill}>
+          <TextInput
+            style={styles.textInput}
+            value={inputText}
+            onChangeText={setInputText}
+            placeholder="Chat..."
+            placeholderTextColor="rgba(255, 255, 255, 0.4)"
+            onSubmitEditing={() => handleSend()}
+            returnKeyType="send"
+            maxLength={400}
+          />
+          <TouchableOpacity
+            style={styles.emojiToggleBtn}
+            onPress={() => setShowEmojiPicker(true)}
+            hitSlop={6}
+          >
+            <PlayerIcon name="emoticon-happy-outline" size={22} color="#FFF" />
+          </TouchableOpacity>
+        </View>
+
+        <TouchableOpacity
+          style={[styles.sendBtn, (!inputText.trim() || isSending) && styles.sendBtnDisabled]}
+          onPress={() => handleSend()}
+          disabled={!inputText.trim() || isSending}
+          hitSlop={8}
+        >
+          <PlayerIcon
+            name="send"
+            size={18}
+            color={inputText.trim() && !isSending ? '#000' : 'rgba(255, 255, 255, 0.3)'}
+          />
+        </TouchableOpacity>
+      </View>
+
+      <EmojiPickerModal
+        visible={showEmojiPicker}
+        onClose={() => setShowEmojiPicker(false)}
+        onSelectEmoji={handleSelectEmoji}
+        colors={colors}
+      />
+    </>
+  );
+}
+
 export const LiveChatDrawer = ({
   videoId,
   userId,
@@ -109,8 +256,11 @@ export const LiveChatDrawer = ({
   popupMode = false,
   integrations = {},
   colors,
+  messagePageSize = 50,
+  drawerStyle,
 }) => {
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const pageSize = Math.max(1, Math.floor(Number(messagePageSize) || 50));
   const chatAvailable = isLive && isLiveCommentsEnabled && typeof integrations.liveChat?.loadMessages === 'function';
   const epgAvailable = isLive && isEpgEnabled && typeof integrations.epg?.loadListings === 'function';
   const canShowDiagnostics = diagnosticsEnabled !== false;
@@ -136,7 +286,13 @@ export const LiveChatDrawer = ({
   const [inputText, setInputText] = useState('');
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const [isSending, setIsSending] = useState(false);
+  const [hasMoreMessages, setHasMoreMessages] = useState(false);
+  const [loadingOlderMessages, setLoadingOlderMessages] = useState(false);
+  const [chatError, setChatError] = useState('');
   const flatListRef = useRef(null);
+  const messageOffsetRef = useRef(0);
+  const loadedInitialPageRef = useRef(false);
+  const scrollChatToEndRef = useRef(false);
 
   // --- Stream Diagnostics Telemetry State ---
   const [pingLatency, setPingLatency] = useState(null);
@@ -157,14 +313,32 @@ export const LiveChatDrawer = ({
     let isMounted = true;
     let initialLoad = true;
     setMessages([]);
+    setHasMoreMessages(false);
+    setChatError('');
+    setLoadingOlderMessages(false);
+    messageOffsetRef.current = 0;
+    loadedInitialPageRef.current = false;
+    scrollChatToEndRef.current = true;
     setMessagesLoading(true);
     const poll = async () => {
       try {
-        const msgs = await integrations.liveChat.loadMessages({ channelId: String(videoId), limit: 50 });
-        if (isMounted && Array.isArray(msgs)) {
-          setMessages(msgs);
+        const response = await integrations.liveChat.loadMessages({ channelId: String(videoId), limit: pageSize, offset: 0 });
+        const msgs = normalizeChatPage(response);
+        if (isMounted) {
+          setMessages((current) => loadedInitialPageRef.current
+            ? mergeChatMessages(current, msgs)
+            : msgs);
+          if (!loadedInitialPageRef.current) {
+            loadedInitialPageRef.current = true;
+            messageOffsetRef.current = msgs.length;
+            const explicitHasMore = response?.hasMore ?? response?.pagination?.hasMore;
+            setHasMoreMessages(explicitHasMore === undefined ? msgs.length >= pageSize : Boolean(explicitHasMore));
+          }
+          setChatError('');
         }
-      } catch {}
+      } catch (error) {
+        if (isMounted && initialLoad) setChatError(error?.message || 'Could not load live chat.');
+      }
       finally {
         if (isMounted && initialLoad) {
           initialLoad = false;
@@ -181,7 +355,34 @@ export const LiveChatDrawer = ({
       isMounted = false;
       clearInterval(timer);
     };
-  }, [visible, videoId, chatAvailable, integrations.liveChat]);
+  }, [visible, videoId, chatAvailable, integrations.liveChat, pageSize]);
+
+  const loadOlderMessages = useCallback(async () => {
+    if (!hasMoreMessages || loadingOlderMessages || !chatAvailable) return;
+    setLoadingOlderMessages(true);
+    setChatError('');
+    try {
+      const offset = messageOffsetRef.current;
+      const response = await integrations.liveChat.loadMessages({
+        channelId: String(videoId),
+        limit: pageSize,
+        offset,
+      });
+      const olderMessages = normalizeChatPage(response);
+      if (olderMessages.length) {
+        setMessages((current) => mergeChatMessages(current, olderMessages, true));
+        messageOffsetRef.current += olderMessages.length;
+      }
+      const explicitHasMore = response?.hasMore ?? response?.pagination?.hasMore;
+      setHasMoreMessages(explicitHasMore === undefined
+        ? olderMessages.length >= pageSize
+        : Boolean(explicitHasMore));
+    } catch (error) {
+      setChatError(error?.message || 'Could not load older messages.');
+    } finally {
+      setLoadingOlderMessages(false);
+    }
+  }, [hasMoreMessages, loadingOlderMessages, chatAvailable, integrations.liveChat, videoId, pageSize]);
 
   const epgStreamId = streamId || videoId;
   const [epgListings, setEpgListings] = useState([]);
@@ -235,12 +436,13 @@ export const LiveChatDrawer = ({
     return () => clearTimeout(timer);
   }, [activeTab, epgListings]);
 
-  // Auto-scroll to bottom on new messages
+  // Avoid snapping to the bottom when an older page is prepended.
   useEffect(() => {
-    if (messages.length > 0 && flatListRef.current && activeTab === 'chat') {
+    if (scrollChatToEndRef.current && messages.length > 0 && flatListRef.current && activeTab === 'chat') {
       setTimeout(() => {
         flatListRef.current?.scrollToEnd({ animated: true });
       }, 80);
+      scrollChatToEndRef.current = false;
     }
   }, [messages.length, activeTab]);
 
@@ -309,6 +511,7 @@ export const LiveChatDrawer = ({
     const text = (textToSend || inputText).trim();
     if (!text || isSending || !videoId) return;
 
+    scrollChatToEndRef.current = true;
     if (!textToSend) setInputText('');
     setIsSending(true);
 
@@ -320,14 +523,17 @@ export const LiveChatDrawer = ({
         username: activeUsername,
         comment: text,
       });
-      const msgs = await integrations.liveChat?.loadMessages?.({ channelId: String(videoId), limit: 50 }).catch?.(() => null);
-      if (Array.isArray(msgs)) setMessages(msgs);
+      const response = await integrations.liveChat?.loadMessages?.({ channelId: String(videoId), limit: pageSize, offset: 0 }).catch?.(() => null);
+      if (response) {
+        const msgs = normalizeChatPage(response);
+        setMessages((current) => mergeChatMessages(current, msgs));
+      }
     } catch {
       // Error handled
     } finally {
       setIsSending(false);
     }
-  }, [inputText, isSending, videoId, userId, username, integrations.liveChat]);
+  }, [inputText, isSending, videoId, userId, username, integrations.liveChat, pageSize]);
 
   const handleSelectEmoji = useCallback((emoji) => {
     setInputText((prev) => prev + emoji);
@@ -430,6 +636,7 @@ export const LiveChatDrawer = ({
           width: Math.min(Math.max(windowWidth - 32, 280), 520),
           height: Math.min(Math.max(windowHeight - 32, 280), 680),
         },
+        drawerStyle,
       ]}
     >
       {/* Header with Close Button & Title */}
@@ -457,99 +664,27 @@ export const LiveChatDrawer = ({
       </View>
 
       {/* --- Tab 1: Live Chat --- */}
-      {activeTab === 'chat' && chatAvailable && (
-        <>
-          {/* Community Notice */}
-          <View style={styles.welcomeBanner}>
-            <PlayerIcon name="shield-check" size={16} color="#00E5FF" style={{ marginTop: 2 }} />
-            <Text style={styles.welcomeText}>
-              Welcome to live chat! Remember to guard your privacy and abide by community guidelines.
-            </Text>
-          </View>
-
-          {/* Messages List */}
-          {messagesLoading && messages.length === 0 ? (
-            <View style={styles.chatLoadingWrap}>
-              <ActivityIndicator size="small" color="#00E5FF" />
-              <Text style={styles.epgStatusText}>Loading live chat…</Text>
-            </View>
-          ) : (
-            <FlatList
-              ref={flatListRef}
-              data={messages}
-              keyExtractor={(item, index) => `${String(item.id || 'message')}-${index}`}
-              renderItem={renderMessageItem}
-              contentContainerStyle={styles.messagesList}
-              showsVerticalScrollIndicator={true}
-              keyboardShouldPersistTaps="handled"
-              onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: false })}
-              ListEmptyComponent={<Text style={styles.epgStatusText}>No messages yet. Start the conversation.</Text>}
-            />
-          )}
-
-          {/* Quick Reaction Bar */}
-          <View style={styles.quickReactionsRow}>
-            {QUICK_REACTIONS.map((emoji) => (
-              <TouchableOpacity
-                key={emoji}
-                style={styles.quickReactionBtn}
-                onPress={() => handleQuickReaction(emoji)}
-                activeOpacity={0.6}
-              >
-                <Text style={styles.quickReactionEmoji}>{emoji}</Text>
-              </TouchableOpacity>
-            ))}
-          </View>
-
-          {/* Bottom Input Bar */}
-          <View style={styles.inputBarContainer}>
-            <View style={styles.inputPill}>
-              <TextInput
-                style={styles.textInput}
-                value={inputText}
-                onChangeText={setInputText}
-                placeholder="Chat..."
-                placeholderTextColor="rgba(255, 255, 255, 0.4)"
-                onSubmitEditing={() => handleSend()}
-                returnKeyType="send"
-                maxLength={400}
-              />
-
-              <TouchableOpacity
-                style={styles.emojiToggleBtn}
-                onPress={() => setShowEmojiPicker(true)}
-                hitSlop={6}
-              >
-                <PlayerIcon name="emoticon-happy-outline" size={22} color="#FFF" />
-              </TouchableOpacity>
-            </View>
-
-            <TouchableOpacity
-              style={[
-                styles.sendBtn,
-                (!inputText.trim() || isSending) && styles.sendBtnDisabled,
-              ]}
-              onPress={() => handleSend()}
-              disabled={!inputText.trim() || isSending}
-              hitSlop={8}
-            >
-              <PlayerIcon
-                name="send"
-                size={18}
-                color={inputText.trim() && !isSending ? '#000' : 'rgba(255, 255, 255, 0.3)'}
-              />
-            </TouchableOpacity>
-          </View>
-
-          {/* Emoji Picker Modal */}
-          <EmojiPickerModal
-            visible={showEmojiPicker}
-            onClose={() => setShowEmojiPicker(false)}
-            onSelectEmoji={handleSelectEmoji}
-            colors={colors}
-          />
-        </>
-      )}
+      {activeTab === 'chat' && chatAvailable ? (
+        <LiveChatPanel
+          messagesLoading={messagesLoading}
+          messages={messages}
+          flatListRef={flatListRef}
+          renderMessageItem={renderMessageItem}
+          hasMoreMessages={hasMoreMessages}
+          loadOlderMessages={loadOlderMessages}
+          loadingOlderMessages={loadingOlderMessages}
+          chatError={chatError}
+          handleQuickReaction={handleQuickReaction}
+          inputText={inputText}
+          setInputText={setInputText}
+          handleSend={handleSend}
+          isSending={isSending}
+          setShowEmojiPicker={setShowEmojiPicker}
+          showEmojiPicker={showEmojiPicker}
+          handleSelectEmoji={handleSelectEmoji}
+          colors={colors}
+        />
+      ) : null}
 
       {activeTab === 'epg' && epgAvailable && (
         <>
@@ -859,6 +994,29 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     gap: 8,
   },
+  loadMoreMessages: {
+    minHeight: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    paddingHorizontal: 14,
+    borderRadius: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(0, 229, 255, 0.35)',
+    backgroundColor: 'rgba(0, 229, 255, 0.08)',
+  },
+  loadMoreMessagesText: {
+    color: '#00E5FF',
+    fontSize: 13,
+    fontWeight: '700',
+  },
+  chatErrorText: {
+    color: '#FF7A8A',
+    paddingHorizontal: 14,
+    paddingBottom: 6,
+    fontSize: 12,
+  },
   chatLoadingWrap: {
     flex: 1,
     alignItems: 'center',

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

@@ -1,26 +1,54 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 
 let youtubeApiPromise;
+const YOUTUBE_API_TIMEOUT_MS = 15000;
+const YOUTUBE_PLAYER_TIMEOUT_MS = 15000;
+
 function loadYouTubeApi() {
   if (typeof window === 'undefined') return Promise.reject(new Error('YouTube playback requires a browser.'));
   if (window.YT?.Player) return Promise.resolve(window.YT);
   if (!youtubeApiPromise) {
     youtubeApiPromise = new Promise((resolve, reject) => {
+      let timeoutId;
+      const cleanup = () => {
+        clearTimeout(timeoutId);
+        if (window.onYouTubeIframeAPIReady === onReady) {
+          window.onYouTubeIframeAPIReady = previousReady;
+        }
+      };
       const existing = document.querySelector('script[data-cinecrew-youtube-api]');
       const previousReady = window.onYouTubeIframeAPIReady;
-      window.onYouTubeIframeAPIReady = () => {
+      const onReady = () => {
         try { previousReady?.(); } catch {}
-        resolve(window.YT);
+        if (window.YT?.Player) {
+          cleanup();
+          resolve(window.YT);
+        } else {
+          cleanup();
+          reject(new Error('The YouTube player API loaded without becoming ready.'));
+        }
       };
+      window.onYouTubeIframeAPIReady = onReady;
+      timeoutId = setTimeout(() => {
+        cleanup();
+        reject(new Error('Timed out loading the YouTube player API. Check your network and allow youtube.com.'));
+      }, YOUTUBE_API_TIMEOUT_MS);
       if (!existing) {
         const script = document.createElement('script');
         script.src = 'https://www.youtube.com/iframe_api';
         script.async = true;
         script.dataset.cinecrewYoutubeApi = 'true';
-        script.onerror = () => reject(new Error('Could not load the YouTube player API.'));
+        script.onerror = () => {
+          cleanup();
+          reject(new Error('Could not load the YouTube player API.'));
+        };
         document.head.appendChild(script);
       }
     });
+    youtubeApiPromise = youtubeApiPromise.catch((error) => {
+      youtubeApiPromise = null;
+      throw error;
+    });
   }
   return youtubeApiPromise;
 }
@@ -40,6 +68,7 @@ export const YouTubeVideoPlayer = forwardRef(function YouTubeVideoPlayer({
   onStateChange,
   onError,
   onEnded,
+  style,
 }, ref) {
   const hostRef = useRef(null);
   const playerRef = useRef(null);
@@ -65,6 +94,7 @@ export const YouTubeVideoPlayer = forwardRef(function YouTubeVideoPlayer({
   useEffect(() => {
     let cancelled = false;
     let progressTimer;
+    let readyTimer;
     let player;
     loadYouTubeApi().then((YT) => {
       if (cancelled || !hostRef.current) return;
@@ -73,18 +103,21 @@ export const YouTubeVideoPlayer = forwardRef(function YouTubeVideoPlayer({
         height: '100%',
         videoId,
         playerVars: {
-          autoplay: paused ? 0 : 1,
+          autoplay: latestPropsRef.current.paused ? 0 : 1,
           controls: 0,
-          playsinline: 1,
+          disablekb: 1,
           enablejsapi: 1,
-          rel: 0,
-          modestbranding: 1,
           fs: 0,
+          iv_load_policy: 3,
+          mute: latestPropsRef.current.muted ? 1 : 0,
           origin: window.location.origin,
+          playsinline: 1,
+          rel: 0,
         },
         events: {
           onReady: (event) => {
             if (cancelled) return;
+            clearTimeout(readyTimer);
             playerRef.current = event.target;
             readyRef.current = true;
             const latest = latestPropsRef.current;
@@ -111,16 +144,29 @@ export const YouTubeVideoPlayer = forwardRef(function YouTubeVideoPlayer({
             if (state === 'playing') onPlayingRef.current?.(event);
             if (state === 'ended') onEndedRef.current?.();
           },
-          onError: (event) => onErrorRef.current?.({ code: event.data, message: `YouTube playback failed (${event.data}).` }),
+          onError: (event) => {
+            clearTimeout(readyTimer);
+            onBufferingRef.current?.(false);
+            onErrorRef.current?.({ code: event.data, message: `YouTube playback failed (${event.data}).` });
+          },
         },
       });
       playerRef.current = player;
+      readyTimer = setTimeout(() => {
+        if (cancelled || readyRef.current) return;
+        onBufferingRef.current?.(false);
+        onErrorRef.current?.(new Error('The YouTube player did not become ready. Check that embedding is allowed and the page can send a referrer.'));
+      }, YOUTUBE_PLAYER_TIMEOUT_MS);
     }).catch((error) => {
-      if (!cancelled) onErrorRef.current?.(error);
+      if (!cancelled) {
+        onBufferingRef.current?.(false);
+        onErrorRef.current?.(error);
+      }
     });
     return () => {
       cancelled = true;
       clearInterval(progressTimer);
+      clearTimeout(readyTimer);
       readyRef.current = false;
       try { player?.destroy?.(); } catch {}
       playerRef.current = null;
@@ -162,7 +208,15 @@ export const YouTubeVideoPlayer = forwardRef(function YouTubeVideoPlayer({
   return React.createElement('div', {
     ref: hostRef,
     className: 'cinecrew-player__youtube',
-    style: { position: 'absolute', inset: 0, width: '100%', height: '100%', background: '#000' },
+    style: {
+      position: 'absolute',
+      inset: 0,
+      width: '100%',
+      height: '100%',
+      background: '#000',
+      ...style,
+      pointerEvents: 'none',
+    },
   });
 });
 

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

@@ -16,7 +16,7 @@ function SeekControls({ isLive, controls, insets, scale, isSeeking, sliderPos, c
         <Text style={[styles.timeText, seeking && styles.timeTextSeeking, { color: seeking ? palette.accentColor : palette.controlColor, fontSize: scale?.timeFont, fontWeight: seeking ? scale?.timeSeekingWeight : scale?.timeWeight }]}>{formatTime(displayTime)}</Text>
         <Text style={[styles.timeText, { color: palette.controlColor, fontSize: scale?.timeFont, fontWeight: scale?.timeWeight }]}>{remaining}</Text>
       </View>
-      <Slider style={styles.slider} minimumValue={0} maximumValue={duration > 0 ? duration : 1} value={sliderPos} minimumTrackTintColor={palette.accentColor} maximumTrackTintColor="rgba(255,255,255,0.3)" thumbTintColor={palette.accentColor} onValueChange={onValueChange} onSlidingStart={onSlidingStart} onSlidingComplete={onSlidingComplete} />
+      <Slider testID="cinecrew-player-seek-slider" accessibilityLabel="Seek video" style={styles.slider} minimumValue={0} maximumValue={duration > 0 ? duration : 1} value={sliderPos} minimumTrackTintColor={palette.accentColor} maximumTrackTintColor="rgba(255,255,255,0.3)" thumbTintColor={palette.accentColor} onValueChange={onValueChange} onSlidingStart={onSlidingStart} onSlidingComplete={onSlidingComplete} />
     </View>
   );
 }
@@ -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>
@@ -210,7 +210,9 @@ const styles = StyleSheet.create({
   },
   slider: {
     width: '100%',
-    height: 36,
+    height: 48,
+    zIndex: 75,
+    elevation: 75,
   },
   bottomControlsRow: {
     flexDirection: 'row',

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

@@ -56,13 +56,12 @@ function LiveServiceControls({ isLive, controls, showLiveChat, drawerTab, showCh
   return <>{renderServiceButton('liveChat', 'chat', showChat, 'comment-text-multiple')}{renderServiceButton('epg', 'epg', showEpg, 'television-guide')}{renderServiceButton('diagnostics', 'diagnostics', showDiagnostics, 'pulse')}</>;
 }
 
-function PlaybackSessionControls({ isLive, controls, muted, onRestart, onMute, onLock, onMinimize, palette }) {
+function PlaybackSessionControls({ isLive, controls, muted, onRestart, onMute, onLock, palette }) {
   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}
-      {controls.minimize && typeof onMinimize === 'function' ? <TouchableOpacity style={styles.pill} onPress={onMinimize} hitSlop={12} accessibilityLabel="Minimize player"><PlayerIcon name="arrow-collapse" size={20} color={palette.controlColor} /></TouchableOpacity> : null}
     </>
   );
 }
@@ -113,7 +112,6 @@ export const PlayerTopBar = ({
   onRestart,
   onToggleMute,
   onToggleLock,
-  onMinimize,
   controls = {},
 }) => {
   const { width, height } = useWindowDimensions();
@@ -149,7 +147,7 @@ export const PlayerTopBar = ({
         <View style={styles.topRightActions}>
           <RecordingControls isLive={isLive} enabled={isScreenRecorderEnabled} status={recStatus} loading={isLoading} controls={controls} onStart={onStartRecording} onResume={onResumeRecording} onPause={onPauseRecording} onStop={onStopRecording} palette={palette} />
           <LiveServiceControls isLive={isLive} controls={controls} showLiveChat={showLiveChat} drawerTab={drawerTab} showChat={isLiveCommentsEnabled} showEpg={isEpgEnabled} showDiagnostics={diagnosticsOverlayEnabled} onToggle={onToggleChatTab} palette={palette} />
-          <PlaybackSessionControls isLive={isLive} controls={controls} muted={muted} onRestart={onRestart} onMute={onToggleMute} onLock={onToggleLock} onMinimize={onMinimize} palette={palette} />
+          <PlaybackSessionControls isLive={isLive} controls={controls} muted={muted} onRestart={onRestart} onMute={onToggleMute} onLock={onToggleLock} palette={palette} />
         </View>
       </View>
       <PortraitPlayerTitle isPortrait={isPortrait} displayTitle={displayTitle} episodeLabel={episodeLabel} showEpisodeSubtitle={showEpisodeSubtitle} palette={palette} scale={scale} />