@cinecrew/cinecrew-player 0.1.2 → 0.1.4

package/README.md

@@ -53,7 +53,7 @@ flowchart LR
 | Area | Included capabilities | Designed for |
 |---|---|---|
 | 🎞️ **Playback** | On-demand and live media; URLs and local URIs; HLS and MPEG-TS paths on web; native VLC path; embedded YouTube playback | Movies, episodes, trailers, and channels |
-| 🎛️ **Player controls** | Play/pause, seek, restart, mute, aspect ratio, lock, video-only/audio-only modes, audio tracks, playback speed, fullscreen, back | A complete control surface without hard-wiring your app navigation |
+| 🎛️ **Player controls** | Play/pause, seek, restart, mute, aspect ratio, lock, audio-only mode, audio tracks, playback speed, fullscreen, back | A complete control surface without hard-wiring your app navigation |
 | 🎨 **Branding** | Theme colors, radius, platform styles, replaceable icons, custom panel render slots | Match your app without forking the player |
 | 📡 **Live TV extensions** | Inline preview component; optional chat and EPG panels; recording adapter hooks | Channel browsing and live-viewing workflows |
 | 🔌 **App integration** | Per-action callbacks, imperative ref API, source resolver, progress/presence/events hooks, sleep timer callback | Keep account, IPTV, analytics, and storage logic in your app |
@@ -70,12 +70,12 @@ flowchart LR
 | 🔒 | `lock` | Lock / unlock controls | Prevent accidental touches |
 | 🔊 | `mute` | Mute / unmute | Volume prop also sets initial level |
 | 🖼️ | `aspectRatio` | Fit / fill / stretch | Available choices depend on renderer |
-| 🔇 | `videoOnly` | Video-only mode | Keeps video presentation while muting audio |
+| 🔇 | `videoOnly` | Legacy video-only visibility key | Kept for compatibility; no separate video-only button is rendered |
 | 🎧 | `audioOnly` | Audio-only presentation | Playback continues behind the audio card |
 | 🎚️ | `audioTracks` | Audio-track selection | Depends on exposed tracks / platform engine |
 | ⏩ | `playbackRate` | Playback speed | On-demand experience |
 | ⛶ | `fullscreen` | Fullscreen / promote preview | Native full-player presentation is platform-specific |
-| ⏺️ | `recording` | Recording controls | Requires an app recording adapter or callback |
+| ⏺️ | `recording` | Recording controls | Web uses built-in MediaRecorder when supported; native uses an app recording adapter |
 | 💬 | `liveChat` | Live chat panel | Requires an adapter, render slot, or callback |
 | 📅 | `epg` | Electronic program guide | Requires an adapter, render slot, or callback |
 | ⏱️ | `seek` | Seek bar | Meaningful for seekable media |
@@ -89,7 +89,7 @@ flowchart LR
 |---|---|
 | 🎨 Colors and shape | `theme`: accent, background, control, surface, error colors, border radius, and native palette |
 | 🪄 Icons | `icons`: provide a glyph/string, React node, or icon component; omitted icons keep CineCrew defaults |
-| 🧠 Per-control behavior | `actions`: override only the actions your app wants to own; built-in behavior remains the default otherwise |
+| 🧠 Per-control behavior | `actions`: observe completed player actions in your app without replacing built-in behavior |
 | 🧱 Chat and EPG drawers | `drawerMode`, `drawerStyle`, and optional app-owned `renderLiveChat` / `renderEpg` views |
 | 🔗 Source handling | `resolveSource` for share pages or host-specific resolution; direct media sources pass through unchanged |
 | 📐 Layout | `style`, web `className`, inline preview geometry, and `InlineLivePlayer` height |
@@ -343,13 +343,15 @@ In short: CineCrew’s intended distinction is **one app-facing player package f
 | `muted` | `boolean` | `false` | Initial mute state. |
 | `volume` | `number` | `1` | Initial volume from `0` to `1`. |
 | `playbackRate` | `number` | `1` | Initial playback speed; the on-demand speed control can change it afterward. |
+| `aspectRatios` | `(string \| { value, label? })[]` | built-in choices | Customize the aspect-ratio menu. Values include `FIT`, `FILL`, `STRETCH`, or a ratio such as `1:1`; labels are optional. |
+| `defaultAspectRatio` | `string` | `'FIT'` | Initial and source-reset aspect mode. Must match an item in `aspectRatios` to appear selected. |
 | `controls` | `PlayerControls` | defaults below | Show/hide individual control buttons. |
 | `features` | feature flags | `{}` | Optional player features, including web stream diagnostics with `{ diagnostics: true }`. |
-| `actions` | `PlayerActions` | `{}` | Replace the built-in behavior for individual actions. If a callback is provided, that callback owns the action. |
+| `actions` | `PlayerActions` | `{}` | Observe built-in actions. The player performs its core action first, then invokes the callback with the resulting action payload. |
 | `integrations` | `PlayerIntegrations` | `{}` | Inject user identity, chat, EPG, recording, analytics, and presence services. |
 | `drawerMode` | `'overlay' \| 'resize'` | `'overlay'` | Web/Electron drawer behavior: overlay the video or resize it to make room for chat, EPG, and diagnostics. |
 | `drawerStyle` | `React.CSSProperties` / React Native `ViewStyle` | — | Platform-specific style overrides for the chat, EPG, and diagnostics drawer. |
-| `messagePageSize` | `number` | `50` | Number of live-chat messages fetched per page; older pages load from the drawer’s “See more” control. |
+| `messagePageSize` | `number` | `50` | Number of live-chat messages fetched per page; older messages load automatically when the list is scrolled to the top. |
 | `theme` | `PlayerTheme` | built-in theme | Customize player colors, borders, and shape. |
 | `icons` | `PlayerIcons` | built-in icons | Override any control icon by key. |
 | `style` | platform style | — | Outer player style. On web this is a CSS style object; native uses React Native style props. |
@@ -365,13 +367,15 @@ In short: CineCrew’s intended distinction is **one app-facing player package f
 | `playlist` | `object[]` | — | Episode list used for automatic next-episode behavior. |
 | `shuffle` | `boolean` | `false` | Select a random next episode when the current episode ends. |
 | `onClose`, `onBack` | callbacks | — | Player lifecycle/navigation callbacks. |
+| `onAspectRatioChange` | `PlayerAction` | — | Top-level callback invoked after the player applies the selected aspect ratio; `actions.onAspectRatioChange` takes precedence if both are supplied. |
+| `onProgressBarChange` | `(time: string) => void` | — | Reports the played position as zero-padded `HH:MM:SS` once per elapsed playback second, and immediately after a completed seek or restart. Scrubbing reports the committed position, not every intermediate drag update. |
 | `onReady`, `onProgress`, `onPlaying`, `onBuffering`, `onError`, `onEnded`, `onPlaybackRoute` | callbacks | — | Playback lifecycle callbacks. Progress payloads are platform-specific native/browser events. |
 | `onNextEpisode`, `onCwRefresh` | callbacks | — | Episode advancement and post-close refresh hooks. |
 | `renderLiveChat`, `renderEpg` | render functions | — | Web custom-panel render slots. On native, use the chat/EPG integration adapters. |
 | `initialShowLiveChat`, `liveChatNonce` | `boolean`, `number` | `false`, `0` | Open or re-open the live-chat panel (when available). |
 | `inlinePreview`, `inlinePreviewRect`, `onInlinePreviewWheel`, `onPromotePreview`, `onPlayerHostRef` | preview options and callbacks | — | Embed/manage the player as a movable inline preview. Mainly useful for app-level player shells. |
 
-`features={{ diagnostics: true }}` enables the diagnostics button and built-in stream status panel on web; `controls.diagnostics` can hide it and `actions.onDiagnosticsOpen` can replace the panel action. `onFullscreen` receives `{ isFullscreen }`. All lifecycle callbacks in the table are optional; native event objects differ from browser events.
+`features={{ diagnostics: true }}` enables the diagnostics button and built-in stream status panel on web; `controls.diagnostics` can hide it. `onFullscreen` receives `{ isFullscreen }` after the player requests the fullscreen change. All lifecycle callbacks in the table are optional; native event objects differ from browser events.
 
 ### Player source
 
@@ -406,7 +410,7 @@ type PlayerSource = string | {
 | `onActivate` | `() => void` | — | Called when an inactive preview poster is selected. |
 | `onFullscreen` | `() => void` | — | Called to promote/open the full player. |
 | `controls` | `Pick<PlayerControls, 'playPause' \| 'mute' \| 'fullscreen'>` | all shown | Toggle its compact controls. |
-| `actions` | matching `PlayerActions` subset | built-in | Replace play/pause, mute, or promote behavior. |
+| `actions` | matching `PlayerActions` subset | built-in | Observe play/pause, mute, or fullscreen actions after their built-in behavior runs. |
 | `initialMuted` | `boolean` | `true` | Initial preview mute state. |
 | `theme`, `icons`, `style` | `PlayerTheme`, `PlayerIcons`, platform style | defaults | Customize preview colors, controls, and layout. |
 | `onError`, `onPlaying` | callbacks | — | Playback lifecycle callbacks. |
@@ -447,20 +451,22 @@ Every control can be hidden with `false`. Defaults are designed to be useful out
 | `lock` | Lock/unlock touch controls. |
 | `mute` | Mute/unmute. |
 | `aspectRatio` | Fit/fill/stretch and available aspect choices. |
-| `videoOnly` | Mute audio while keeping video visible. |
+| `videoOnly` | Legacy compatibility setting; the player does not render a separate video-only button. |
 | `audioOnly` | Show the audio-only card while playback continues. |
 | `audioTracks` | Audio-track picker when tracks are exposed. |
 | `playbackRate` | On-demand playback speed. |
 | `fullscreen` | Fullscreen button on web and inline previews. Native player opens full-screen. |
-| `recording` | Recording controls; requires `integrations.recording` or an action override. |
-| `liveChat` | Chat drawer/panel; requires a chat adapter, render slot, or action override. |
-| `epg` | EPG drawer/panel; requires an EPG adapter, render slot, or action override. |
-| `diagnostics` | Stream diagnostics button; enable with `features={{ diagnostics: true }}` or provide `actions.onDiagnosticsOpen`. |
+| `recording` | Recording controls; web has a built-in MediaRecorder flow where supported, while native requires an app recording adapter. Browser security requires local media or a source that permits capture (typically same-origin or CORS-enabled); the player reports when a source cannot be captured. |
+| `liveChat` | Chat drawer/panel; requires a chat adapter or render slot. |
+| `epg` | EPG drawer/panel; requires an EPG adapter or render slot. |
+| `diagnostics` | Stream diagnostics button; enable with `features={{ diagnostics: true }}`. |
 | `seek` | On-demand seek bar. |
 
 ## Actions and callbacks
 
-Callbacks passed to `actions` **replace** built-in behavior; this is useful when an app wants to own navigation, playback state, or a control. Each receives an action payload and a context with the imperative `player` API (and the web video element where available).
+Callbacks passed to `actions` are notifications, not replacements: the player executes the built-in control behavior first, then calls the matching callback. This keeps core playback working while allowing your app to show a snackbar, update analytics, or synchronize app state. Each callback receives an action payload and a context with the imperative `player` API (and the web video element where available). For app navigation, use `onBack` / `onClose` as appropriate. If a notification callback throws, the player logs that callback error without undoing or blocking the already-completed player action. The callback should not repeat the player command—the control has already performed it.
+
+`onProgressBarChange` is separate from the platform-specific `onProgress` event: it emits a compact time string such as `00:00:05` once per playback second. A seek emits its final target time after the player applies the seek; skipped positions are not reported as watched time.
 
 ```tsx
 const playerRef = React.useRef(null);
@@ -469,17 +475,18 @@ const playerRef = React.useRef(null);
   ref={playerRef}
   source={source}
   actions={{
-    onRestart: (_payload, { player }) => player?.restart(),
-    onBack: () => navigation.goBack(),
-    onMute: ({ muted }, { player }) => player?.setMuted(muted),
-    onAspectRatioChange: ({ aspectRatio }, { player }) => player?.setAspectRatio(aspectRatio),
+    onRestart: () => analytics.track('player_restart'),
+    onPlayPause: ({ isPlaying }) => analytics.track('player_play_pause', { isPlaying }),
+    onMute: ({ muted }) => analytics.track('player_mute', { muted }),
+    onAspectRatioChange: ({ aspectRatio }) => analytics.track('player_aspect_ratio', { aspectRatio }),
   }}
+  onBack={() => navigation.goBack()}
 />
 ```
 
 Available action keys: `onBack`, `onPlayPause`, `onSeek`, `onRestart`, `onLock`, `onMute`, `onAspectRatioChange`, `onVideoOnlyChange`, `onAudioOnlyChange`, `onAudioTrackChange`, `onPlaybackRateChange`, `onFullscreen`, `onRecordingStart`, `onRecordingPause`, `onRecordingResume`, `onRecordingStop`, `onLiveChatOpen`, `onEpgOpen`, and `onDiagnosticsOpen`.
 
-The ref exposes `play`, `pause`, `togglePlayPause`, `restart`, `setMuted`, `toggleMute`, `setAspectRatio`, `setAudioTrack`, `setAudioOnly`, `setVideoOnly`, `setPlaybackRate`, `seekTo`, `seekBy`, `back`, `getVideoElement`, `getAudioTracks`, and fullscreen methods where supported.
+The ref exposes `play`, `pause`, `togglePlayPause`, `restart`, `setMuted`, `toggleMute`, `setAspectRatio`, `setAudioTrack`, `setAudioOnly`, `setVideoOnly`, `setPlaybackRate`, `seekTo`, `seekBy`, `back`, `setPanel`, `closePanel`, `getVideoElement`, `getAudioTracks`, and fullscreen methods where supported.
 
 ## Integrations
 
@@ -517,10 +524,14 @@ Integrations are optional. The package has no CineCrew account, database, or wor
 />
 ```
 
-On web and Electron, the player supplies the chat drawer UI—including the composer and emoji picker—when `integrations.liveChat.loadMessages` is provided. `sendMessage` connects the built-in composer to your chat service; omit it to show a read-only chat. Messages may include `id`, `username`, `comment` (or `message`), and `timestamp` (or `createdAt`). The drawer requests the newest page with `offset: 0`, then requests older pages with the same `limit` and an increasing `offset` when “See more messages” is selected. Return each page in chronological order (oldest first); return `{ messages, hasMore }` when your service can report whether older pages exist. Otherwise, a full page implies there may be more. Live chat polls for new messages at `pollIntervalMs` (defaults to five seconds).
+On web and Electron, the player supplies the chat drawer UI—including the composer and searchable, grouped emoji picker—when `integrations.liveChat.loadMessages` is provided. `sendMessage` connects the built-in composer to your chat service; omit it to show a read-only chat. Messages may include `id`, `username`, `comment` (or `message`), and `timestamp` (or `createdAt`). The drawer requests the newest page with `offset: 0`, then automatically requests older pages with the same `limit` and increasing `offset` as the viewer scrolls to the top. Return each page in chronological order (oldest first); return `{ messages, hasMore }` when your service can report whether older pages exist. Otherwise, a full page implies there may be more. Live chat polls for new messages at `pollIntervalMs` (defaults to five seconds); new messages scroll into view at the bottom.
 
 The EPG drawer uses `integrations.epg.loadListings`, which returns entries with `startMs` and `endMs` epoch-millisecond timestamps. Both drawers default to a semi-transparent right-side overlay, so video size does not change. Set `drawerMode="resize"` to reserve space and shrink the video; customize the drawer with `drawerStyle`. You may supply `renderLiveChat` / `renderEpg` or integration render callbacks to replace the built-in drawer contents. The native player renders its platform-native chat and EPG UI from the same adapters.
 
+### Web recording
+
+On supported browsers, the built-in recording control captures the media video and audio tracks, shows a compact timer at the top of the video with pause/resume and stop actions, then attempts a WebM download when stopped. A `Download recording` action remains available afterward as a user-gesture retry if the browser blocks the automatic download. YouTube embeds are not recordable through this built-in path. Aspect changes are reflected in the recording when the browser permits the player to draw the cross-origin video into a canvas; if the source does not grant canvas CORS access, the browser only permits capture of the media element's original frame, so the recording keeps its source aspect ratio. Use `integrations.recording` to supply a different recording implementation or use a native adapter.
+
 ## Themes and icons
 
 Defaults are used unless the caller supplies an override. Web theme properties include `accentColor`, `backgroundColor`, `controlBackground`, `controlColor`, `surfaceColor`, `errorColor`, and `borderRadius`. Native also accepts a `colors` palette object.

package/package.json

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

package/src/native/InlineLivePlayer.js

@@ -13,6 +13,7 @@ import { WebVideoPlayer } from './media/WebVideoPlayer';
 import { ElectronVideoPlayer } from './media/ElectronVideoPlayer';
 import { isAndroid, isElectron, isIOS, isWeb } from '../utils/runtimePlatform';
 import { USER_AGENT } from './media/player/playerConstants';
+import { invokePlayerAction } from '../utils/invokePlayerAction.js';
 
 function getArtwork(channel) {
   return channel?.logoUrl || channel?.logo || channel?.stream_icon || channel?.posterUrl || channel?.image || '';
@@ -82,8 +83,7 @@ function InlineControlButton({
     accessibilityLabel: label,
     onPress: () => {
       const callback = actions?.[actionName];
-      if (typeof callback === 'function') callback(payload, { player: null });
-      else fallback?.();
+      invokePlayerAction(fallback, callback, payload, { player: null });
     },
     style: [styles.button, { backgroundColor: palette.controlBackground }, active && { borderColor: palette.accentColor, borderWidth: 1 }],
   }, React.createElement(PlayerIcon, { name: icon, size: 19, color: palette.controlColor }));
@@ -117,7 +117,7 @@ function InlinePlayerOverlay({
     palette,
   });
   const muteLabel = muted ? 'Unmute' : 'Mute';
-  const muteIcon = muted ? 'volume-off' : 'volume-high';
+  const muteIcon = muted ? 'mute' : 'unmute';
   const playbackLabel = paused ? 'Play' : 'Pause';
   const playbackIcon = paused ? 'play' : 'pause';
 
@@ -213,15 +213,16 @@ function InlineLivePlayerView({
   }, [onPlaying]);
 
   const performAction = (name, fallback, payload) => {
-    if (typeof actions?.[name] === 'function') return actions[name](payload);
-    return fallback?.();
+    return invokePlayerAction(fallback, actions?.[name], payload, { player: null });
   };
 
   const togglePlay = (event) => {
     event?.stopPropagation?.();
     if (!shouldRenderVideo) {
-      onActivate?.();
-      setInternallyPaused(false);
+      performAction('onPlayPause', () => {
+        onActivate?.();
+        setInternallyPaused(false);
+      }, true);
       return;
     }
     performAction('onPlayPause', () => setInternallyPaused((value) => !value), !pausedNow);

package/src/native/MediaPlayerView.js

@@ -23,6 +23,8 @@ import { PlayerIcon } from './customization';
 import { isWeb, isAndroid, isElectron } from '../utils/runtimePlatform';
 import { getFontSize, getFontWeight } from '../utils/layoutUtils';
 import { isLocalMediaUri } from '../utils/mediaUtils';
+import { invokePlayerAction } from '../utils/invokePlayerAction.js';
+import { emitProgressBarTime } from '../utils/progressBarTime.js';
 import {
   USER_AGENT,
   calculateScreenAspectRatio,
@@ -69,6 +71,17 @@ function pickShuffleCandidate(candidates, season, episode) {
   return candidates[(hash >>> 0) % candidates.length];
 }
 
+function normalizeAspectOptions(values) {
+  if (!Array.isArray(values) || values.length === 0) return ASPECT_OPTIONS;
+  const unique = new Map();
+  values.forEach((item) => {
+    const value = typeof item === 'string' ? item : item?.value;
+    if (!value || typeof value !== 'string') return;
+    unique.set(value, { value, label: typeof item === 'string' ? item : item.label || value });
+  });
+  return unique.size ? [...unique.values()] : ASPECT_OPTIONS;
+}
+
 // Gesture events can arrive much faster than the native player can consume
 // volume updates. Coalesce them to display-rate updates for the UI and a
 // slower native volume cadence so a drag stays smooth without audio crackle.
@@ -360,7 +373,7 @@ function InlinePreviewTopActions({ controls, muted, videoOnlyMode, handleMuteAct
             handleMuteAction();
           }}
         >
-          <PlayerIcon name={muted || videoOnlyMode ? 'volume-off' : 'volume-high'} size={19} color="#FFF" />
+          <PlayerIcon name={muted || videoOnlyMode ? 'mute' : 'unmute'} size={19} color="#FFF" />
         </TouchableOpacity>
       ) : null}
     </View>
@@ -590,7 +603,7 @@ function FullscreenControlsPanel(props) {
         duration={props.duration}
         isAudioOnlyFeatureEnabled={props.isAudioOnlyFeatureEnabled}
         isAudioOnly={props.isAudioOnly}
-        isVideoOnly={props.videoOnlyMode}
+        aspectRatios={props.aspectRatios}
         controls={props.controls}
         showAspectPicker={props.showAspectPicker}
         aspectRatio={props.aspectRatio}
@@ -611,7 +624,6 @@ function FullscreenControlsPanel(props) {
         onToggleAudioPicker={props.onToggleAudioPicker}
         onSelectAudioTrack={props.handleAudioTrackAction}
         onToggleFullscreen={props.handleFullscreenAction}
-        onToggleVideoOnly={props.handleVideoOnlyAction}
       />
     </>
   );
@@ -790,6 +802,9 @@ export const MediaPlayerView = ({
   liveChatNonce = 0,
   messagePageSize = 50,
   drawerStyle,
+  aspectRatios,
+  defaultAspectRatio = DEFAULT_ASPECT_RATIO,
+  onAspectRatioChange,
   genre,
   categoryName,
   controls = {},
@@ -805,6 +820,7 @@ export const MediaPlayerView = ({
   style,
   onReady,
   onProgress,
+  onProgressBarChange,
   onPlaying,
   onBuffering,
   onError,
@@ -830,12 +846,16 @@ export const MediaPlayerView = ({
   const vlcRef = useRef(null);
   const playerRef = useRef(null);
   const invokeAction = useCallback((name, fallback, payload) => {
-    const callback = actions?.[name];
-    if (typeof callback === 'function') {
-      return callback(payload, { player: playerApiRef?.current || null });
-    }
-    return fallback?.();
-  }, [actions, playerApiRef]);
+    const callback = name === 'onAspectRatioChange'
+      ? actions?.[name] || onAspectRatioChange
+      : actions?.[name];
+    return invokePlayerAction(
+      fallback,
+      callback,
+      payload,
+      { player: playerApiRef?.current || null },
+    );
+  }, [actions, onAspectRatioChange, playerApiRef]);
   const handlePlayerHostRef = useCallback((node) => {
     playerRef.current = node;
     onPlayerHostRef?.(node);
@@ -981,8 +1001,9 @@ export const MediaPlayerView = ({
   useEffect(() => {
     isLockedRef.current = isLocked;
   }, [isLocked]);
-  const [aspectRatio, setAspectRatio] = useState(DEFAULT_ASPECT_RATIO);
-  const aspectRatioRef = useRef(DEFAULT_ASPECT_RATIO);
+  const [aspectRatio, setAspectRatio] = useState(defaultAspectRatio || DEFAULT_ASPECT_RATIO);
+  const aspectRatioRef = useRef(defaultAspectRatio || DEFAULT_ASPECT_RATIO);
+  const aspectOptions = useMemo(() => normalizeAspectOptions(aspectRatios), [aspectRatios]);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   const [audioTracks, setAudioTracks] = useState([]);
@@ -1112,7 +1133,7 @@ export const MediaPlayerView = ({
       let targetRatio = val;
       if (val === 'FIT') {
         targetRatio = 'FIT';
-      } else if (val === 'FILL_SCREEN') {
+      } else if (val === 'FILL_SCREEN' || val === 'FILL') {
         targetRatio = calculateScreenAspectRatio(windowWidth, windowHeight);
       }
 
@@ -1148,6 +1169,7 @@ export const MediaPlayerView = ({
   const isSeeking = useRef(false);
   const bufferingTimerRef = useRef(null);
   const seekCompletedAt = useRef(0);
+  const lastProgressBarSecondRef = useRef(null);
   const lastKnownTimeRef = useRef(0);
   const lastKnownDurRef = useRef(Number(durationSecs) || 0);
   const hasResumedRef = useRef(false);
@@ -1336,6 +1358,7 @@ export const MediaPlayerView = ({
     setIsPlaying(!initialPaused);
     isPlayingRef.current = !initialPaused;
     setVideoOnlyMode(!!videoOnly);
+    lastProgressBarSecondRef.current = null;
     setPlaybackUrl(streamUrl || '');
     setIsLocked(false);
     setIsAudioOnly(!!initialAudioOnly);
@@ -1374,14 +1397,14 @@ export const MediaPlayerView = ({
   // Reset aspect ratio & zoom state every time player opens or streamUrl changes
   useEffect(() => {
     if (visible) {
-      setAspectRatio(DEFAULT_ASPECT_RATIO);
-      aspectRatioRef.current = DEFAULT_ASPECT_RATIO;
+      setAspectRatio(defaultAspectRatio || DEFAULT_ASPECT_RATIO);
+      aspectRatioRef.current = defaultAspectRatio || DEFAULT_ASPECT_RATIO;
       setZoomScale(1);
       zoomScaleRef.current = 1;
       setZoomBadgeText('');
       setSeekRipple(null);
     }
-  }, [visible, streamUrl]);
+  }, [visible, streamUrl, defaultAspectRatio]);
 
   // Auto-hide controls 4 seconds after inactivity
   const scheduleHide = useCallback(() => {
@@ -1575,8 +1598,9 @@ export const MediaPlayerView = ({
     setSliderPos(0);
     lastKnownTimeRef.current = 0;
     seekCompletedAt.current = Date.now();
+    emitProgressBarTime(0, onProgressBarChange, lastProgressBarSecondRef, { force: true });
     if (!showControls) setShowControls(true);
-  }, [showControls]);
+  }, [onProgressBarChange, showControls]);
 
   // Episode finished: auto-advance to the next episode (sequential) or to a
   // random episode (shuffle mode). Last episode in the playlist stops playback.
@@ -1775,6 +1799,7 @@ export const MediaPlayerView = ({
       lastKnownTimeRef,
       setSliderPosition: setSliderPos,
     });
+    if (progress) emitProgressBarTime(progress.seconds, onProgressBarChange, lastProgressBarSecondRef);
   };
 
   const handleNativeOpen = (event) => {
@@ -1882,10 +1907,14 @@ export const MediaPlayerView = ({
       setSliderPos(target);
       seekCompletedAt.current = Date.now();
       debouncedSaveProgress();
+      emitProgressBarTime(target, onProgressBarChange, lastProgressBarSecondRef, { force: true });
     }, { seconds: Number(seconds) || 0, currentTime: lastKnownTimeRef.current },
-  ), [invokeAction, handleSeekTo, debouncedSaveProgress]);
+  ), [invokeAction, handleSeekTo, debouncedSaveProgress, onProgressBarChange]);
   const handleSeekByAction = (deltaSeconds) => invokeAction(
-    'onSeek', () => handleSeekBy(deltaSeconds), { deltaSeconds: Number(deltaSeconds) || 0, currentTime: lastKnownTimeRef.current },
+    'onSeek', () => {
+      handleSeekBy(deltaSeconds);
+      emitProgressBarTime(lastKnownTimeRef.current, onProgressBarChange, lastProgressBarSecondRef, { force: true });
+    }, { deltaSeconds: Number(deltaSeconds) || 0, currentTime: lastKnownTimeRef.current },
   );
   const handleMuteAction = useCallback(() => invokeAction(
     'onMute', toggleMute, { muted: !mutedRef.current },
@@ -1912,14 +1941,17 @@ export const MediaPlayerView = ({
     event?.stopPropagation?.();
     return invokeAction(name, fallback, { title, streamUrl, mediaId });
   }, [invokeAction, title, streamUrl, mediaId]);
-  const handlePanelAction = useCallback((tab) => invokeAction(
-    getPanelActionName(tab),
-    () => {
-      if (showLiveChat && drawerTab === tab) setShowLiveChat(false);
-      else { setDrawerTab(tab); setShowLiveChat(true); }
-    },
-    { tab, isOpen: showLiveChat && drawerTab === tab },
-  ), [invokeAction, showLiveChat, drawerTab]);
+  const handlePanelAction = useCallback((tab) => {
+    const isOpen = !(showLiveChat && drawerTab === tab);
+    return invokeAction(
+      getPanelActionName(tab),
+      () => {
+        if (isOpen) { setDrawerTab(tab); setShowLiveChat(true); }
+        else setShowLiveChat(false);
+      },
+      { tab, isOpen },
+    );
+  }, [invokeAction, showLiveChat, drawerTab]);
 
   useEffect(() => {
     if (!playerApiRef) return undefined;
@@ -2591,6 +2623,7 @@ export const MediaPlayerView = ({
     videoOnlyMode,
     showAspectPicker,
     aspectRatio,
+    aspectRatios: aspectOptions,
     showSpeedPicker,
     playbackRate,
     showAudioPicker,

package/src/native/customization.js

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

package/src/native/media/LiveChatDrawer.js

@@ -124,7 +124,6 @@ function LiveChatPanel({
   messages,
   flatListRef,
   renderMessageItem,
-  hasMoreMessages,
   loadOlderMessages,
   loadingOlderMessages,
   chatError,
@@ -161,19 +160,16 @@ function LiveChatPanel({
           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>
+          ListHeaderComponent={loadingOlderMessages ? (
+            <View style={styles.loadingOlderMessages}>
+              <ActivityIndicator size="small" color="#00E5FF" />
+              <Text style={styles.loadingOlderMessagesText}>Loading older messages…</Text>
+            </View>
           ) : null}
+          onScroll={(event) => {
+            if (event.nativeEvent.contentOffset.y <= 24) loadOlderMessages();
+          }}
+          scrollEventThrottle={16}
           ListEmptyComponent={<Text style={styles.epgStatusText}>No messages yet. Start the conversation.</Text>}
         />
       )}
@@ -670,7 +666,6 @@ export const LiveChatDrawer = ({
           messages={messages}
           flatListRef={flatListRef}
           renderMessageItem={renderMessageItem}
-          hasMoreMessages={hasMoreMessages}
           loadOlderMessages={loadOlderMessages}
           loadingOlderMessages={loadingOlderMessages}
           chatError={chatError}
@@ -994,22 +989,18 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     gap: 8,
   },
-  loadMoreMessages: {
-    minHeight: 40,
+  loadingOlderMessages: {
+    minHeight: 36,
     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)',
+    gap: 7,
+    paddingVertical: 6,
   },
-  loadMoreMessagesText: {
+  loadingOlderMessagesText: {
     color: '#00E5FF',
-    fontSize: 13,
-    fontWeight: '700',
+    fontSize: 12,
+    fontWeight: '600',
   },
   chatErrorText: {
     color: '#FF7A8A',

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

@@ -109,10 +109,12 @@ export const YouTubeVideoPlayer = forwardRef(function YouTubeVideoPlayer({
           enablejsapi: 1,
           fs: 0,
           iv_load_policy: 3,
+          modestbranding: 1,
           mute: latestPropsRef.current.muted ? 1 : 0,
           origin: window.location.origin,
           playsinline: 1,
           rel: 0,
+          showinfo: 0,
         },
         events: {
           onReady: (event) => {

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

@@ -21,7 +21,7 @@ function SeekControls({ isLive, controls, insets, scale, isSeeking, sliderPos, c
   );
 }
 
-function AspectRatioControl({ controls, open, aspectRatio, onToggle, onSelect }) {
+function AspectRatioControl({ controls, open, aspectRatio, aspectRatios = ASPECT_OPTIONS, onToggle, onSelect }) {
   const palette = usePlayerColors();
   if (controls.aspectRatio === false) return null;
   const selectedStyle = { backgroundColor: palette.surfaceColor, borderWidth: 1.5, borderColor: palette.accentColor };
@@ -29,7 +29,7 @@ function AspectRatioControl({ controls, open, aspectRatio, onToggle, onSelect })
     <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) => {
+        {aspectRatios.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'} />
@@ -50,12 +50,6 @@ function AudioOnlyModeControl({ isAudioOnly, onToggle }) {
   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;
@@ -81,7 +75,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>
@@ -129,6 +123,7 @@ export const PlayerBottomBar = ({
   isAudioOnly,
   showAspectPicker,
   aspectRatio,
+  aspectRatios = ASPECT_OPTIONS,
   showSpeedPicker,
   playbackRate,
   showAudioPicker,
@@ -147,8 +142,6 @@ export const PlayerBottomBar = ({
   onSelectAudioTrack,
   onToggleFullscreen,
   controls = {},
-  isVideoOnly = false,
-  onToggleVideoOnly,
 }) => {
   return (
     <View
@@ -167,8 +160,7 @@ export const PlayerBottomBar = ({
       <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}
+          <AspectRatioControl controls={controls} open={showAspectPicker} aspectRatio={aspectRatio} aspectRatios={aspectRatios} onToggle={onToggleAspectPicker} onSelect={onSelectAspectRatio} />
         </View>
 
         {/* RIGHT ACTIONS: Playback Speed, Audio, Fullscreen */}

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

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

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

@@ -38,8 +38,9 @@ export function nearestPipCorner(x, y, winW, winH, insets) {
 }
 
 export const ASPECT_OPTIONS = [
-  { label: 'Fit Screen', value: 'FIT' },
-  { label: 'Fill Screen', value: 'FILL_SCREEN' },
+  { label: 'Fit', value: 'FIT' },
+  { label: 'Fill', value: 'FILL' },
+  { label: 'Stretch', value: 'STRETCH' },
   { label: '16:9', value: '16:9' },
   { label: '4:3', value: '4:3' },
   { label: '21:9', value: '21:9' },
@@ -156,4 +157,3 @@ export function applyTrackDefaults(selected, setSelected, setTracks, tracksProp)
   const active = tracksProp.find((t) => t.selected || t.active) || tracksProp[0];
   if (active) setSelected(active.id);
 }
-