@cinecrew/cinecrew-player 0.1.1

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

@@ -0,0 +1,295 @@
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+import Slider from '@react-native-community/slider';
+import { isWeb, isElectron } from '../../../utils/runtimePlatform';
+import { ASPECT_OPTIONS, PLAYBACK_SPEEDS, formatTime } from './playerConstants';
+import { PlayerIcon, usePlayerColors } from '../../customization';
+
+function SeekControls({ isLive, controls, insets, scale, isSeeking, sliderPos, currentTime, duration, onValueChange, onSlidingStart, onSlidingComplete }) {
+  const palette = usePlayerColors();
+  if (isLive || controls.seek === false) return null;
+  const seeking = Boolean(isSeeking?.current);
+  const displayTime = seeking ? sliderPos : currentTime;
+  const remaining = duration > 0 ? formatTime(Math.max(0, duration - displayTime)) : '--:--';
+  return (
+    <View style={[styles.bottomBar, { paddingHorizontal: Math.max(insets?.left || 0, insets?.right || 0, 20) }]} pointerEvents="box-none">
+      <View style={styles.timeRow}>
+        <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} />
+    </View>
+  );
+}
+
+function AspectRatioControl({ controls, open, aspectRatio, onToggle, onSelect }) {
+  const palette = usePlayerColors();
+  if (controls.aspectRatio === false) return null;
+  const selectedStyle = { backgroundColor: palette.surfaceColor, borderWidth: 1.5, borderColor: palette.accentColor };
+  return (
+    <View style={styles.speedButtonContainer}>
+      {open ? <View style={[styles.speedPickerPopup, { right: 'auto', left: 0, backgroundColor: palette.surfaceColor, borderColor: palette.borderColor }]}>
+        <Text style={[styles.speedPickerTitle, { color: palette.mutedColor }]}>Aspect Ratio</Text>
+        {ASPECT_OPTIONS.map((option) => {
+          const selected = aspectRatio === option.value;
+          return <TouchableOpacity key={option.label} style={styles.speedOption} onPress={(event) => { event.stopPropagation(); onSelect(option.value); }} activeOpacity={0.7}>
+            <PlayerIcon name="check" size={15} color={selected ? palette.accentColor : 'transparent'} />
+            <Text style={[styles.speedOptionText, { color: selected ? palette.accentColor : palette.controlColor }, selected && styles.speedOptionTextActive]}>{option.label}</Text>
+          </TouchableOpacity>;
+        })}
+      </View> : null}
+      <TouchableOpacity style={[styles.speedButton, { backgroundColor: palette.controlBackground }, open && selectedStyle]} onPress={(event) => { event.stopPropagation(); onToggle(); }}>
+        <PlayerIcon pack="material" name="aspect-ratio" size={18} color={palette.controlColor} />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+function AudioOnlyModeControl({ isAudioOnly, onToggle }) {
+  const palette = usePlayerColors();
+  const selectedStyle = isAudioOnly ? { backgroundColor: palette.surfaceColor, borderWidth: 1, borderColor: palette.accentColor } : null;
+  return <TouchableOpacity style={[styles.speedButton, { backgroundColor: palette.controlBackground }, selectedStyle]} onPress={(event) => { event.stopPropagation(); onToggle(); }} accessibilityLabel="Audio-Only Mode"><PlayerIcon name="headphones" size={18} color={isAudioOnly ? palette.accentColor : palette.controlColor} /></TouchableOpacity>;
+}
+
+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>;
+}
+
+function SpeedControl({ enabled, open, playbackRate, onToggle, onSelect }) {
+  const palette = usePlayerColors();
+  if (!enabled) return null;
+  const selectedStyle = { backgroundColor: palette.surfaceColor, borderWidth: 1.5, borderColor: palette.accentColor };
+  return (
+    <View style={styles.speedButtonContainer}>
+      {open ? <View style={[styles.speedPickerPopup, { backgroundColor: palette.surfaceColor, borderColor: palette.borderColor }]}>
+        <Text style={[styles.speedPickerTitle, { color: palette.mutedColor }]}>Playback speed</Text>
+        {[...PLAYBACK_SPEEDS].reverse().map((speed) => {
+          const selected = playbackRate === speed;
+          return <TouchableOpacity key={speed} style={styles.speedOption} onPress={(event) => { event.stopPropagation(); onSelect(speed); }} activeOpacity={0.7}>
+            <PlayerIcon name="check" size={15} color={selected ? palette.accentColor : 'transparent'} />
+            <Text style={[styles.speedOptionText, { color: selected ? palette.accentColor : palette.controlColor }, selected && styles.speedOptionTextActive]}>{speed === 1 ? 'Normal' : `${speed}x`}</Text>
+          </TouchableOpacity>;
+        })}
+      </View> : null}
+      <TouchableOpacity style={[styles.speedButton, { backgroundColor: palette.controlBackground }, open && selectedStyle]} onPress={(event) => { event.stopPropagation(); onToggle(); }}>
+        <Text style={[styles.speedButtonText, { color: palette.controlColor }]}>{playbackRate}x</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+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>;
+  return (
+    <View style={[styles.speedPickerPopup, { backgroundColor: palette.surfaceColor, borderColor: palette.borderColor }]}>
+      <Text style={[styles.speedPickerTitle, { color: palette.mutedColor }]}>Audio</Text>
+      {audioTracks.map((track) => {
+        const selected = String(track.id) === String(selectedAudioTrack);
+        return <TouchableOpacity key={`audio-${track.id}`} style={styles.speedOption} onPress={(event) => { event.stopPropagation(); onSelect(track.id); }} activeOpacity={0.7}>
+          <PlayerIcon name="check" size={15} color={selected ? palette.accentColor : 'transparent'} />
+          <Text style={[styles.speedOptionText, { color: selected ? palette.accentColor : palette.controlColor }, selected && styles.speedOptionTextActive]} numberOfLines={1}>{track.name || track.language || `Track ${track.id}`}</Text>
+        </TouchableOpacity>;
+      })}
+    </View>
+  );
+}
+
+function AudioTracksControl({ enabled, open, audioTracks, selectedAudioTrack, onToggle, onSelect }) {
+  const palette = usePlayerColors();
+  if (!enabled) return null;
+  const selectedStyle = { backgroundColor: palette.surfaceColor, borderWidth: 1.5, borderColor: palette.accentColor };
+  return (
+    <View style={styles.speedButtonContainer}>
+      <AudioTrackMenu open={open} audioTracks={audioTracks} selectedAudioTrack={selectedAudioTrack} onSelect={onSelect} palette={palette} />
+      <TouchableOpacity style={[styles.speedButton, { backgroundColor: palette.controlBackground }, open && selectedStyle]} onPress={(event) => { event.stopPropagation(); onToggle(); }}>
+        <PlayerIcon pack="material" name="audiotrack" size={18} color={palette.controlColor} />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+function FullscreenControl({ enabled, isFullscreen, onToggle }) {
+  const palette = usePlayerColors();
+  if (!enabled) return null;
+  const selectedStyle = { backgroundColor: palette.surfaceColor, borderWidth: 1.5, borderColor: palette.accentColor };
+  return <TouchableOpacity style={[styles.fullscreenButton, { backgroundColor: palette.controlBackground }, isFullscreen && selectedStyle]} onPress={(event) => { event.stopPropagation(); onToggle(); }} hitSlop={10}><PlayerIcon name={isFullscreen ? 'fullscreen-exit' : 'fullscreen'} size={20} color={palette.controlColor} /></TouchableOpacity>;
+}
+
+export const PlayerBottomBar = ({
+  isLive,
+  insets,
+  scale,
+  isSeeking,
+  sliderPos,
+  currentTime,
+  duration,
+  isAudioOnlyFeatureEnabled,
+  isAudioOnly,
+  showAspectPicker,
+  aspectRatio,
+  showSpeedPicker,
+  playbackRate,
+  showAudioPicker,
+  audioTracks = [],
+  selectedAudioTrack,
+  isFullscreen,
+  onSliderValueChange,
+  onSliderSlidingStart,
+  onSliderSlidingComplete,
+  onToggleAudioOnly,
+  onToggleAspectPicker,
+  onSelectAspectRatio,
+  onToggleSpeedPicker,
+  onSelectSpeed,
+  onToggleAudioPicker,
+  onSelectAudioTrack,
+  onToggleFullscreen,
+  controls = {},
+  isVideoOnly = false,
+  onToggleVideoOnly,
+}) => {
+  return (
+    <View
+      style={[
+        styles.bottomContainer,
+        {
+          paddingBottom: Math.max(insets?.bottom || 0, 16),
+          paddingHorizontal: Math.max(insets?.left || 0, insets?.right || 0, 20),
+        },
+      ]}
+      pointerEvents="box-none"
+    >
+      <SeekControls isLive={isLive} controls={controls} insets={insets} scale={scale} isSeeking={isSeeking} sliderPos={sliderPos} currentTime={currentTime} duration={duration} onValueChange={onSliderValueChange} onSlidingStart={onSliderSlidingStart} onSlidingComplete={onSliderSlidingComplete} />
+
+      {/* ASPECT RATIO PICKER & RIGHT ACTIONS (PLAYBACK SPEED & FULLSCREEN) */}
+      <View style={styles.bottomControlsRow} pointerEvents="box-none">
+        <View style={styles.leftActionsContainer}>
+          {isAudioOnlyFeatureEnabled && controls.audioOnly !== false ? <AudioOnlyModeControl isAudioOnly={isAudioOnly} onToggle={onToggleAudioOnly} /> : null}
+          <AspectRatioControl controls={controls} open={showAspectPicker} aspectRatio={aspectRatio} onToggle={onToggleAspectPicker} onSelect={onSelectAspectRatio} />
+          {controls.videoOnly ? <VideoOnlyControl isVideoOnly={isVideoOnly} onToggle={onToggleVideoOnly} /> : null}
+        </View>
+
+        {/* RIGHT ACTIONS: Playback Speed, Audio, Fullscreen */}
+        <View style={styles.rightActionsContainer}>
+          <SpeedControl enabled={!isLive && controls.playbackRate !== false} open={showSpeedPicker} playbackRate={playbackRate} onToggle={onToggleSpeedPicker} onSelect={onSelectSpeed} />
+
+          {/* Audio Tracks Picker */}
+          <AudioTracksControl enabled={controls.audioTracks !== false && !isLive && (!isWeb() || isElectron())} open={showAudioPicker} audioTracks={audioTracks} selectedAudioTrack={selectedAudioTrack} onToggle={onToggleAudioPicker} onSelect={onSelectAudioTrack} />
+
+          {/* Fullscreen Button - comes after playback speed (web only) */}
+          <FullscreenControl enabled={isWeb() && controls.fullscreen !== false} isFullscreen={isFullscreen} onToggle={onToggleFullscreen} />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomContainer: {
+    paddingVertical: 8,
+    gap: 8,
+    zIndex: 70,
+    elevation: 70,
+  },
+  bottomBar: {
+    gap: 6,
+  },
+  timeRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 4,
+  },
+  timeText: {
+    color: '#FFF',
+    fontVariant: ['tabular-nums'],
+  },
+  timeTextSeeking: {
+    color: '#FFD60A',
+  },
+  slider: {
+    width: '100%',
+    height: 36,
+  },
+  bottomControlsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    paddingHorizontal: 10,
+    minHeight: 44,
+  },
+  speedButtonContainer: {
+    position: 'relative',
+    zIndex: 100,
+  },
+  leftActionsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    zIndex: 100,
+  },
+  rightActionsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    zIndex: 100,
+  },
+  fullscreenButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 18,
+    backgroundColor: 'rgba(0, 0, 0, 0.65)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  speedButton: {
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: 18,
+    backgroundColor: 'rgba(0,0,0,0.65)',
+  },
+  speedButtonText: {
+    color: '#FFF',
+    fontWeight: '700',
+  },
+  speedPickerPopup: {
+    position: 'absolute',
+    right: 0,
+    bottom: 44,
+    backgroundColor: 'rgba(15, 15, 15, 0.96)',
+    borderRadius: 12,
+    paddingVertical: 4,
+    minWidth: 168,
+    zIndex: 200,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(255, 255, 255, 0.12)',
+    overflow: 'hidden',
+  },
+  speedPickerTitle: {
+    color: 'rgba(255,255,255,0.45)',
+    fontSize: 10,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 0.9,
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    paddingBottom: 6,
+  },
+  speedOption: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 11,
+  },
+  speedOptionText: {
+    color: 'rgba(255, 255, 255, 0.85)',
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  speedOptionTextActive: {
+    fontWeight: '700',
+  },
+});

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

@@ -0,0 +1,255 @@
+import { useMemo } from 'react';
+import { StyleSheet, View, Text, TouchableOpacity, useWindowDimensions } from 'react-native';
+import { isAndroid, isIOS } from '../../../utils/runtimePlatform';
+import { cleanPlayerTitle } from '../../../utils/mediaUtils';
+import { PlayerIcon, usePlayerColors } from '../../customization';
+
+function shouldShowEpisodeSubtitle(isMobile, episodeLabel, displayTitle) {
+  if (isMobile || !episodeLabel) return false;
+  const episode = episodeLabel.trim().toLowerCase();
+  const title = displayTitle.toLowerCase();
+  return Boolean(episode && title !== episode && !title.includes(episode));
+}
+
+function BackButton({ visible, palette, scale, onClose }) {
+  if (!visible) return <View style={{ width: 12 }} />;
+  return (
+    <TouchableOpacity style={styles.pill} onPress={(event) => { event.stopPropagation(); onClose(); }} hitSlop={12}>
+      <PlayerIcon name="arrow-left" size={22} color={palette.controlColor} />
+      <Text style={[styles.backText, { color: palette.controlColor, fontSize: scale?.backFont, fontWeight: scale?.backWeight }]}>Back</Text>
+    </TouchableOpacity>
+  );
+}
+
+function RecordingControls({ isLive, enabled, status, loading, controls, onStart, onResume, onPause, onStop, palette }) {
+  if (!isLive || !enabled || controls.recording === false) return null;
+  if (status === 'idle') {
+    return (
+      <TouchableOpacity style={[styles.pill, loading && { opacity: 0.45 }]} onPress={onStart} hitSlop={12} disabled={loading} accessibilityLabel="Start recording">
+        <PlayerIcon name="record-rec" size={22} color={palette.errorColor} />
+      </TouchableOpacity>
+    );
+  }
+  const isPaused = status === 'paused';
+  return (
+    <>
+      <TouchableOpacity style={[styles.pill, isPaused ? styles.recPausePill : styles.recActivePill]} onPress={isPaused ? onResume : onPause} hitSlop={12} accessibilityLabel={isPaused ? 'Resume recording' : 'Pause recording'}>
+        <PlayerIcon name={isPaused ? 'play' : 'pause'} size={20} color={palette.controlColor} />
+      </TouchableOpacity>
+      <TouchableOpacity style={[styles.pill, styles.recStopPill]} onPress={onStop} hitSlop={12} accessibilityLabel="Stop recording">
+        <PlayerIcon name="stop" size={20} color={palette.errorColor} />
+      </TouchableOpacity>
+    </>
+  );
+}
+
+function LiveServiceControls({ isLive, controls, showLiveChat, drawerTab, showChat, showEpg, showDiagnostics, onToggle, palette }) {
+  const renderServiceButton = (name, tab, enabled, activeName) => {
+    if (!isLive || !enabled || controls[name] === false) return null;
+    const active = showLiveChat && drawerTab === tab;
+    return (
+      <TouchableOpacity key={tab} style={[styles.pill, active && { backgroundColor: palette.surfaceColor, borderColor: palette.accentColor, borderWidth: 1 }]} onPress={(event) => { event.stopPropagation(); onToggle(tab); }} hitSlop={12}>
+        <PlayerIcon name={active ? activeName : ({ chat: 'comment-text-multiple-outline', epg: 'television-classic', diagnostics: 'pulse' }[tab])} size={20} color={active ? palette.accentColor : palette.controlColor} />
+      </TouchableOpacity>
+    );
+  };
+  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 }) {
+  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.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}
+    </>
+  );
+}
+
+function PlayerTitle({ isPortrait, displayTitle, episodeLabel, showEpisodeSubtitle, palette, scale }) {
+  if (isPortrait) return <View style={styles.headerSpacer} />;
+  return (
+    <View style={styles.titleBlock}>
+      <View style={styles.titleRow}>
+        <Text style={[styles.titleText, { color: palette.controlColor, fontSize: scale?.titleFont, fontWeight: scale?.titleWeight }]} numberOfLines={1}>{displayTitle}</Text>
+      </View>
+      {showEpisodeSubtitle ? <Text style={[styles.episodeLabelText, { color: palette.mutedColor, fontSize: scale?.backFont }]} numberOfLines={1}>{episodeLabel}</Text> : null}
+    </View>
+  );
+}
+
+function PortraitPlayerTitle({ isPortrait, displayTitle, episodeLabel, showEpisodeSubtitle, palette, scale }) {
+  if (!isPortrait) return null;
+  return (
+    <View style={styles.portraitTitleBlock}>
+      <Text style={[styles.titleText, styles.portraitTitleText, { color: palette.controlColor, fontSize: scale?.titleFont, fontWeight: scale?.titleWeight }]} numberOfLines={2}>{displayTitle}</Text>
+      {showEpisodeSubtitle ? <Text style={[styles.episodeLabelText, styles.portraitEpisodeLabel, { color: palette.mutedColor, fontSize: scale?.backFont }]} numberOfLines={1}>{episodeLabel}</Text> : null}
+    </View>
+  );
+}
+
+export const PlayerTopBar = ({
+  insets,
+  scale,
+  title,
+  episodeLabel,
+  isLive,
+  isScreenRecorderEnabled,
+  recStatus,
+  isLoading,
+  showLiveChat,
+  drawerTab,
+  isLiveCommentsEnabled,
+  isEpgEnabled,
+  diagnosticsOverlayEnabled,
+  muted,
+  onClose,
+  onStartRecording,
+  onResumeRecording,
+  onPauseRecording,
+  onStopRecording,
+  onToggleChatTab,
+  onRestart,
+  onToggleMute,
+  onToggleLock,
+  onMinimize,
+  controls = {},
+}) => {
+  const { width, height } = useWindowDimensions();
+  const palette = usePlayerColors();
+  const isPortrait = height >= width;
+  const isMobile = isAndroid() || isIOS() || Math.min(width, height) < 600;
+
+  const displayTitle = useMemo(() => {
+    return cleanPlayerTitle(title, episodeLabel, isMobile);
+  }, [title, episodeLabel, isMobile]);
+
+  const showEpisodeSubtitle = useMemo(
+    () => shouldShowEpisodeSubtitle(isMobile, episodeLabel, displayTitle),
+    [isMobile, episodeLabel, displayTitle],
+  );
+
+  return (
+    <View
+      style={[
+        styles.topBar,
+        isPortrait && styles.portraitTopBar,
+        {
+          paddingTop: Math.max(insets?.top || 0, 24),
+          paddingHorizontal: Math.max(insets?.left || 0, insets?.right || 0, 20),
+        },
+      ]}
+      pointerEvents="box-none"
+    >
+      <View style={[styles.headerRow, !isPortrait && styles.landscapeHeaderRow, isPortrait && styles.portraitHeaderRow]}>
+        <BackButton visible={controls.back !== false} palette={palette} scale={scale} onClose={onClose} />
+        <PlayerTitle isPortrait={isPortrait} displayTitle={displayTitle} episodeLabel={episodeLabel} showEpisodeSubtitle={showEpisodeSubtitle} palette={palette} scale={scale} />
+
+        <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} />
+        </View>
+      </View>
+      <PortraitPlayerTitle isPortrait={isPortrait} displayTitle={displayTitle} episodeLabel={episodeLabel} showEpisodeSubtitle={showEpisodeSubtitle} palette={palette} scale={scale} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  topBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 10,
+    gap: 12,
+    zIndex: 70,
+    elevation: 70,
+  },
+  portraitTopBar: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
+    gap: 8,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  landscapeHeaderRow: {
+    flex: 1,
+  },
+  portraitHeaderRow: {
+    width: '100%',
+  },
+  headerSpacer: {
+    flex: 1,
+  },
+  titleBlock: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  portraitTitleBlock: {
+    width: '100%',
+    alignItems: 'center',
+    paddingHorizontal: 4,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    maxWidth: '100%',
+  },
+  titleText: {
+    color: '#FFF',
+    textAlign: 'center',
+  },
+  portraitTitleText: {
+    width: '100%',
+    textAlign: 'center',
+  },
+  episodeLabelText: {
+    color: 'rgba(255, 255, 255, 0.7)',
+    marginTop: 2,
+  },
+  portraitEpisodeLabel: {
+    textAlign: 'center',
+  },
+  topRightActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 20,
+  },
+  backText: {
+    color: '#FFF',
+  },
+  recActivePill: {
+    backgroundColor: 'rgba(255, 82, 82, 0.28)',
+    borderWidth: 1,
+    borderColor: '#FF5252',
+  },
+  recPausePill: {
+    backgroundColor: 'rgba(255, 193, 7, 0.22)',
+    borderWidth: 1,
+    borderColor: '#FFC107',
+  },
+  recStopPill: {
+    backgroundColor: 'rgba(255, 82, 82, 0.16)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 82, 82, 0.7)',
+  },
+});

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

@@ -0,0 +1,41 @@
+import { Component } from 'react';
+import { UIManager, NativeModules } from 'react-native';
+import { isWeb } from '../../../utils/runtimePlatform';
+
+/**
+ * Whether the native VLC view manager is registered. It is absent in
+ * Expo Go and can fail on new-architecture builds — in both cases we
+ * fall back to expo-video instead of crashing with
+ * "ViewConfig not found for component rctvlcplayer".
+ */
+export const VLC_AVAILABLE =
+  isWeb() ||
+  (() => {
+    try {
+      return !!(
+        UIManager?.getViewManagerConfig?.('RCTVLCPlayer') ||
+        NativeModules?.RCTVLCPlayer ||
+        NativeModules?.VLCPlayer
+      );
+    } catch {
+      return false;
+    }
+  })();
+
+/**
+ * Render-phase error boundary: if VLCPlayer throws during render (e.g. the
+ * native view manager isn't registered on this build/Fabric), swap to the
+ * expo-video fallback instead of crashing with "View config not found".
+ */
+export class VLCBoundary extends Component {
+  state = { failed: false };
+
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+
+  render() {
+    if (this.state.failed) return this.props.fallback || null;
+    return this.props.children;
+  }
+}