@cinecrew/cinecrew-player 0.1.4 → 0.1.6

package/README.md

@@ -52,7 +52,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 |
+| 🎞️ **Playback** | On-demand and live direct media URLs and local URIs; HLS and MPEG-TS paths on web; native VLC path | Movies, episodes, and channels |
 | 🎛️ **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 |
@@ -101,7 +101,7 @@ flowchart LR
 
 | Host | Public entry | Rendering / engine path | Key considerations |
 |---|---|---|---|
-| 🌐 React in browser | `@cinecrew/cinecrew-player` or `@cinecrew/cinecrew-player/react` | DOM player; browser media, hls.js, patched mpegts.js; YouTube embed | Browser codec support and origin CORS still apply |
+| 🌐 React in browser | `@cinecrew/cinecrew-player` or `@cinecrew/cinecrew-player/react` | DOM player; browser media, hls.js, patched mpegts.js | Browser codec support and origin CORS still apply |
 | 🖥️ Electron | `@cinecrew/cinecrew-player/electron` | Same web renderer inside Electron Chromium | Chromium’s codec and network rules still apply |
 | 🤖 React Native Android | `@cinecrew/cinecrew-player/native` or `@cinecrew/cinecrew-player/react-native` | Native React Native surface with bundled VLC adapter; Expo Video fallback where available | Native dependencies must be compiled into the app |
 | 📱 React Native iOS | `@cinecrew/cinecrew-player/native` or `@cinecrew/cinecrew-player/react-native` | Native React Native surface with bundled VLC adapter; Expo Video fallback where available | Native dependencies must be compiled into the app |
@@ -112,7 +112,7 @@ flowchart LR
 | MP4 / browser-native media | ✅ Browser media element | ✅ Native engine | A directly playable URL or local URI |
 | HLS (`.m3u8`) | ✅ hls.js / native HLS where available | ✅ Native engine | Origin access, valid playlist/segments, compatible codecs |
 | MPEG-TS (`.ts`) | ✅ Bundled patched MPEG-TS client, when browser conditions permit | ✅ VLC path | Browser codecs and CORS; native module availability |
-| YouTube watch / Shorts / `youtu.be` | ✅ Embedded YouTube player | ✅ Embedded native WebView | Video must allow embedding; network access to YouTube |
+| Hosted-video or share pages | ⚙️ Resolve to a direct media URL with `resolveSource` | ⚙️ Resolve to a direct media URL with `resolveSource` | A watch/share page is not a media stream |
 | Local files | ✅ Platform-supported local/blob URI | ✅ Platform-supported file URI | App obtains and passes the platform-readable URI |
 | Share pages / cloud-drive pages | ⚙️ Optional `resolveSource` | ⚙️ Optional `resolveSource` | Your app resolves authentication and obtains a playable media URL |
 
@@ -123,7 +123,7 @@ flowchart LR
 | Layer | Technologies in this package |
 |---|---|
 | UI & API | React · React Native · TypeScript declarations |
-| Web playback | HTML video · hls.js · patched mpegts.js · YouTube IFrame API |
+| Web playback | HTML video · hls.js · patched mpegts.js |
 | Native playback | VLC adapter bundled in `@cinecrew/cinecrew-player` · `expo-video` fallback |
 | Native UI / utilities | React Native · Expo config plugins · safe-area context · SVG · community slider |
 | Optional media utilities | Mediabunny / AC3 parsing support in relevant web playback paths |
@@ -160,9 +160,9 @@ The items below are planned for more consistent, user-facing support across plat
 
 ## Demos
 
-- **[React + Vite web demo](examples/web-demo)** — try YouTube, MPEG-TS, MP4, MKV, or a local video file. Switch between the full player (all controls and demo chat/EPG/recording adapters enabled) and the compact inline player. [Open a fresh StackBlitz copy](https://stackblitz.com/fork/github/nahushr/cinecrew-player/tree/main/examples/web-demo?startScript=dev).
+- **[React + Vite web demo](examples/web-demo)** — try HLS, MPEG-TS, MP4, MKV, or a local video file. Switch between the full player (all controls and demo chat/EPG/recording adapters enabled) and the compact inline player. [Open a fresh StackBlitz copy](https://stackblitz.com/fork/github/nahushr/cinecrew-player/tree/main/examples/web-demo?startScript=dev).
 - **[Expo / React Native Web demo](examples/expo-web-demo)** — the same source tests and controls in an Expo app rendered for the web.
-- **[Android and iOS Expo Snack demos](examples/snack/App.js)** — both platform links load the same five-test native playground (YouTube, `.ts`, `.mp4`, `.mkv`, and local-file upload), with full-player and inline-player modes. Snack runs in Expo Go, which cannot load this package's custom VLC module; MPEG-TS and MKV playback should be tested in a native development build. [Expo documents this Expo Go limitation](https://docs.expo.dev/faq/#what-can-i-do-or-cannot-do-with-expo-go).
+- **[Android and iOS Expo Snack demos](examples/snack/App.js)** — both platform links load a native playground (`.ts`, `.mp4`, `.mkv`, and local-file upload), with full-player and inline-player modes. Snack runs in Expo Go, which cannot load this package's custom VLC module; MPEG-TS and MKV playback should be tested in a native development build. [Expo documents this Expo Go limitation](https://docs.expo.dev/faq/#what-can-i-do-or-cannot-do-with-expo-go).
 
 The React/Vite demo is self-contained and installs the released `@cinecrew/cinecrew-player` package, so its StackBlitz link works from the `examples/web-demo` subdirectory. Its MPEG-TS button uses a small same-origin H.264/AAC fixture to exercise the TS parser without relying on an external server's CORS configuration. The Expo Web demo uses this repository's package source (`file:../..`) so contributors can test unreleased changes locally. Snack loads the native example from this repository's `main` branch and installs `@cinecrew/cinecrew-player` from npm. The React DOM entry resolves to the browser renderer; it does not evaluate React Native or VLC code. The Expo native entry bundles VLC into the same installed package. External media hosts must allow browser CORS requests; format/codec support also depends on the browser. MKV playback is generally more reliable through the native VLC adapter than a browser video element.
 
@@ -180,7 +180,7 @@ npm install
 npm run web
 ```
 
-> Direct media sources are passed through to the platform engine. A page/share URL is not necessarily a playable media source; use `resolveSource` to resolve it. The player does not rewrite protocols, proxy media, or impose host-specific CORS rules.
+> The player has no built-in YouTube playback or embed mode. Pass a direct playable media URL or local URI; page/share URLs (including YouTube watch pages) must be resolved by your app to a direct media source before playback. The player does not rewrite protocols, proxy media, or impose host-specific CORS rules.
 
 ## Install
 
@@ -198,9 +198,9 @@ The package has one public player API with a renderer selected for the host. The
 
 | Host app | Import | Renderer / playback |
 | --- | --- | --- |
-| React DOM in a browser | `@cinecrew/cinecrew-player` or `@cinecrew/cinecrew-player/react` | HTML video, hls.js, patched mpegts.js, and the browser YouTube embed. |
+| React DOM in a browser | `@cinecrew/cinecrew-player` or `@cinecrew/cinecrew-player/react` | HTML video, hls.js, and patched mpegts.js. |
 | React DOM inside Electron (macOS `.dmg`, Windows `.exe`) | `@cinecrew/cinecrew-player/electron` | Same renderer as React web, using Electron's Chromium media stack. No WebView or custom Electron IPC bridge is needed. |
-| React Native Android / iOS | `@cinecrew/cinecrew-player` or `@cinecrew/cinecrew-player/react-native` | React Native UI with the bundled VLC adapter and Expo video fallback; YouTube uses `react-native-webview`. |
+| React Native Android / iOS | `@cinecrew/cinecrew-player` or `@cinecrew/cinecrew-player/react-native` | React Native UI with the bundled VLC adapter and Expo video fallback. |
 | React Native Web / Expo Web | `@cinecrew/cinecrew-player` or `@cinecrew/cinecrew-player/react-native-web` | React DOM adapter hosted inside the React Native Web app; uses browser playback engines and does not load native VLC or WebView code. |
 
 Metro selects the React Native entry for native builds; regular React bundlers select the React DOM entry. The explicit subpaths let you pin the renderer when preferred.
@@ -221,7 +221,7 @@ export function WatchScreen() {
 }
 ```
 
-For an Expo prebuild project, add the CineCrew Player config plugin and rebuild the native app (a JavaScript reload cannot add a native module). The VLC native implementation ships inside this same package; there is no second VLC package to install. `react-native-webview` is used only as the native YouTube embed surface; regular native streams use VLC / `expo-video`. Browser and Electron YouTube playback use the YouTube IFrame API instead.
+For an Expo prebuild project, add the CineCrew Player config plugin and rebuild the native app (a JavaScript reload cannot add a native module). The VLC native implementation ships inside this same package; there is no second VLC package to install. Native streams use VLC / `expo-video`.
 
 ```json
 {
@@ -244,7 +244,6 @@ import { InlineLivePlayer } from '@cinecrew/cinecrew-player/native';
   height={220}
   isActive={selected}
   paused={!selected}
-  onFullscreen={() => openFullPlayer(channelUrl)}
 />
 ```
 
@@ -259,7 +258,6 @@ import '@cinecrew/cinecrew-player/styles.css';
   title="Example channel"
   isActive={selected}
   paused={!selected}
-  onFullscreen={() => openFullPlayer(channelUrl)}
 />
 ```
 
@@ -283,15 +281,9 @@ export function WatchScreen() {
 
 Web playback is direct from the supplied URL. HLS and MPEG-TS clients fetch playlists and segments from the stream origin, so the origin must permit those browser requests.
 
-### YouTube and share links
+### Direct media URLs and share pages
 
-Pass a YouTube watch, Shorts, or `youtu.be` URL as the source to play it inside the player rather than opening another app:
-
-```tsx
-<CineCrewPlayer source="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Trailer" />
-```
-
-The video must allow embedding. Other URLs are passed unchanged to the platform engine. A Google Drive/share page or other webpage is not itself a media stream; resolve it in your app and provide the playable URL, or use the optional `resolveSource` callback. This keeps provider authentication, CORS policy, and URL extraction under the consuming app’s control.
+Pass a direct media URL or a platform-readable local file URI. Hosted-video watch pages and share pages are not supported as playable sources because they are HTML pages, not media streams. Resolve those pages in your app and provide a direct playable URL, or use the optional `resolveSource` callback. This keeps provider authentication, CORS policy, and URL extraction under the consuming app’s control.
 
 ```tsx
 <CineCrewPlayer
@@ -311,7 +303,7 @@ The video must allow embedding. Other URLs are passed unchanged to the platform
 | React Native Android / iOS | VLC native module; `expo-video` fallback when VLC is unavailable | VLC supports a broader range of containers/codecs, including common AC3 streams. Native module availability depends on the app binary. |
 | Electron renderer | Chromium `<video>`, hls.js, and patched mpegts.js | Same browser codec/CORS constraints as React web; packages with the app's `.dmg` / `.exe`. |
 
-Browser codec support varies. The web player reports an AC3 compatibility message only when its MPEG-TS probe identifies unsupported AC3 audio; native playback does not apply this browser-only restriction. YouTube sources use the embedded YouTube player and remain subject to the video’s embed settings.
+Browser codec support varies. The web player reports an AC3 compatibility message only when its MPEG-TS probe identifies unsupported AC3 audio; native playback does not apply this browser-only restriction.
 
 ## How CineCrew Player differs from established players
 
@@ -343,6 +335,7 @@ 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. |
+| `showProgressBar` | `boolean` | `true` | Show or hide the playback seek bar. When hidden, `onProgressBarChange` is not called. |
 | `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. |
@@ -366,9 +359,9 @@ In short: CineCrew’s intended distinction is **one app-facing player package f
 | `mediaId`, `episodeLabel`, `season`, `episode`, `genre`, `categoryName` | metadata | — | Optional item metadata for the player and integrations. |
 | `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. |
+| `onClose`, `onBack` | callbacks | — | App-owned navigation callbacks; Back does not close the player unless your callback does so. |
 | `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. |
+| `onProgressBarChange` | `(time: string) => void` | — | When the progress bar is shown, 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. It is not called when `showProgressBar` is false, `controls.seek` is false, or the live-player UI hides seeking. |
 | `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. |
@@ -389,7 +382,7 @@ type PlayerSource = string | {
   id?: string | number;
   streamId?: string | number;
   mediaId?: string | number;
-  type?: string;       // e.g. 'mpegts', 'hls', or 'youtube' when paired with a YouTube video ID
+  type?: string;       // e.g. 'mpegts' or 'hls'
   mimeType?: string;
   mediaType?: string;
   isLive?: boolean;
@@ -398,7 +391,7 @@ type PlayerSource = string | {
 
 ### Inline live preview props
 
-`InlineLivePlayer` is exported from `@cinecrew/cinecrew-player/native` and `@cinecrew/cinecrew-player/web`. It renders a compact channel preview/poster and can promote playback to the host app's full player.
+`InlineLivePlayer` is exported from `@cinecrew/cinecrew-player/native` and `@cinecrew/cinecrew-player/web`. It renders a compact channel preview/poster with its title at the bottom-left. Its fullscreen control expands the same inline playback surface; it does not promote or switch to the standard player.
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -408,7 +401,7 @@ type PlayerSource = string | {
 | `poster`, `posterChannel` | string / object | — | Still image or channel object used when preview is paused/inactive. |
 | `paused`, `isActive` | `boolean` | `false`, `true` | Control whether this preview should render/play its stream. |
 | `onActivate` | `() => void` | — | Called when an inactive preview poster is selected. |
-| `onFullscreen` | `() => void` | — | Called to promote/open the full player. |
+| `onFullscreen` | `() => void` | — | Deprecated; no longer promotes to another player. Use `actions.onFullscreen` to observe the inline player's fullscreen state after it changes. |
 | `controls` | `Pick<PlayerControls, 'playPause' \| 'mute' \| 'fullscreen'>` | all shown | Toggle its compact controls. |
 | `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. |
@@ -456,7 +449,7 @@ Every control can be hidden with `false`. Defaults are designed to be useful out
 | `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; 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. |
+| `recording` | Recording controls; web has a built-in MediaRecorder flow where supported, while native requires an app recording adapter. |
 | `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 }}`. |
@@ -464,9 +457,9 @@ Every control can be hidden with `false`. Defaults are designed to be useful out
 
 ## Actions and callbacks
 
-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.
+For playback controls, the player executes its core behavior first and then invokes the matching `actions` callback. This lets your app show a snackbar, update analytics, or synchronize app state. Back is intentionally different: it has no built-in close/navigation behavior. The player invokes `actions.onBack`, `onBack`, or `onClose` (in that precedence), and your app decides whether to navigate, dismiss the player, or just show a snackbar. Each callback receives an action payload and a context with the imperative `player` API (and the web video element where available). If a callback throws, the player logs the error without blocking the UI.
 
-`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.
+`onProgressBarChange` is separate from the platform-specific `onProgress` event: while the progress bar is enabled, 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. Set `showProgressBar={false}` (or `controls={{ seek: false }}`) to hide seeking and suppress these progress-bar callbacks.
 
 ```tsx
 const playerRef = React.useRef(null);
@@ -530,7 +523,13 @@ The EPG drawer uses `integrations.epg.loadListings`, which returns entries with
 
 ### 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.
+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. Native React Native apps need an `integrations.recording` implementation backed by Android MediaProjection or iOS ReplayKit (with the platform's permission flow).
+
+For ordinary web media, 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 recording keeps its source aspect ratio. Use `integrations.recording` to supply a different recording implementation.
+
+### Audio-only and locked-screen playback
+
+Audio-only mode fully covers the video with an opaque dark surface; its poster remains visible in the audio card. Native VLC playback is configured to continue in audio-only mode when the app is backgrounded. Native apps must also configure their platform background-audio capability where applicable.
 
 ## Themes and icons
 
@@ -559,7 +558,7 @@ Icon keys: `play`, `pause`, `restart`, `lock`, `unlock`, `mute`, `unmute`, `aspe
 
 ## Sources and link resolution
 
-Local file URIs and direct stream URLs are passed to the selected platform player without changing `http`, `https`, `file`, or other schemes. YouTube watch/share URLs are recognized and played with the embedded YouTube player. Other sharing pages (for example, a private Google Drive page) need a consumer-provided resolver because the package cannot access the consumer’s credentials or infer every host’s download rules:
+Local file URIs and direct stream URLs are passed to the selected platform player without changing `http`, `https`, `file`, or other schemes. Hosted-video watch/share pages (for example, a private cloud-drive page) need a consumer-provided resolver because the package cannot access the consumer’s credentials or infer every host’s download rules:
 
 ```tsx
 <CineCrewPlayer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cinecrew/cinecrew-player",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "description": "Customizable cross-platform live and on-demand video player for React and React Native.",
   "license": "MIT",
@@ -113,7 +113,6 @@
     "mediabunny": "^1.59.0",
     "react-native-safe-area-context": "^5.7.0",
     "react-native-svg": "^15.15.4",
-    "react-native-webview": "^13.16.1",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/native/InlineLivePlayer.js

@@ -4,6 +4,7 @@ import {
   Image,
   Pressable,
   StyleSheet,
+  Modal,
   Text,
   View,
 } from 'react-native';
@@ -130,7 +131,7 @@ function InlinePlayerOverlay({
     showControls ? React.createElement(React.Fragment, null,
       React.createElement(View, { pointerEvents: 'box-none', style: styles.topRow },
       React.createElement(View, { style: styles.liveBadge }, React.createElement(View, { style: styles.liveDot }), React.createElement(Text, { style: styles.liveText }, 'LIVE')),
-      React.createElement(Text, { numberOfLines: 1, style: [styles.title, { color: palette.controlColor }] }, title),
+      React.createElement(View, { style: { flex: 1 } }),
       button('mute', 'onMute', muteLabel, muteIcon, onMute, { muted: !muted }),
       ),
       React.createElement(View, { pointerEvents: 'box-none', style: styles.center },
@@ -140,12 +141,64 @@ function InlinePlayerOverlay({
       button('fullscreen', 'onFullscreen', 'Open full player', 'fullscreen', onFullscreen, { source, title, isFullscreen: !fullscreen }))) : null);
 }
 
+function createInlinePlayerLayer(player, visible) {
+  if (!visible || !player) return null;
+  return React.createElement(View, { pointerEvents: 'none', style: StyleSheet.absoluteFill }, player);
+}
+
+function createInlineArtworkLayer(shouldRenderVideo, artwork, accentColor) {
+  if (shouldRenderVideo) return null;
+  if (artwork) {
+    return React.createElement(Image, { source: { uri: artwork }, resizeMode: 'contain', style: styles.poster });
+  }
+  return React.createElement(View, { style: styles.emptyPoster },
+    React.createElement(PlayerIcon, { name: 'television-play', size: 48, color: accentColor }));
+}
+
+function createInlineStatusLayer(loading, error, palette) {
+  if (error) {
+    return React.createElement(View, { pointerEvents: 'none', style: styles.error },
+      React.createElement(Text, { style: [styles.errorText, { color: palette.controlColor }] }, error));
+  }
+  if (!loading) return null;
+  return React.createElement(View, { pointerEvents: 'none', style: styles.loading },
+    React.createElement(ActivityIndicator, { size: 'large', color: palette.accentColor }));
+}
+
+function InlineLivePlayerSurface({
+  height,
+  style,
+  palette,
+  fullscreen,
+  setFullscreen,
+  player,
+  shouldRenderVideo,
+  artwork,
+  loading,
+  error,
+  renderOverlay,
+}) {
+  return React.createElement(View, { style: [styles.frame, { height, backgroundColor: palette.surfaceColor }, style] },
+    createInlinePlayerLayer(player, !fullscreen),
+    createInlineArtworkLayer(shouldRenderVideo, artwork, palette.accentColor),
+    createInlineStatusLayer(shouldRenderVideo && loading, error, palette),
+    fullscreen ? null : renderOverlay(),
+    React.createElement(Modal, {
+      visible: fullscreen,
+      animationType: 'none',
+      statusBarTranslucent: true,
+      onRequestClose: () => setFullscreen(false),
+    }, React.createElement(View, { style: styles.fullscreenFrame },
+      createInlinePlayerLayer(player, true),
+      createInlineStatusLayer(loading, error, palette),
+      renderOverlay())));
+}
+
 function InlineLivePlayerView({
   source,
   url,
   title = 'Live TV',
   height = 220,
-  onFullscreen,
   paused: externalPaused,
   isActive = true,
   onActivate,
@@ -235,10 +288,11 @@ function InlineLivePlayerView({
 
   const openFullscreen = (event) => {
     event?.stopPropagation?.();
-    performAction('onFullscreen', () => {
-      if (typeof onFullscreen === 'function') onFullscreen();
-      else setFullscreen((value) => !value);
-    }, { isFullscreen: !fullscreen, source: sourceObject, title });
+    performAction('onFullscreen', () => setFullscreen((value) => !value), {
+      isFullscreen: !fullscreen,
+      source: sourceObject,
+      title,
+    });
   };
 
   const nativeMediaOptions = useMemo(() => [
@@ -273,31 +327,37 @@ function InlineLivePlayerView({
     onPlaying: handlePlaying,
     onError: handleError,
   });
+  const renderOverlay = () => React.createElement(InlinePlayerOverlay, {
+    showControls,
+    controls: { ...controls, actions },
+    palette,
+    title,
+    muted,
+    paused: pausedNow,
+    source: streamUrl,
+    fullscreen,
+    onToggleControls: () => setShowControls((value) => !value),
+    onMute: toggleMute,
+    onPlay: togglePlay,
+    onFullscreen: openFullscreen,
+  });
 
   return React.createElement(
     PlayerCustomizationProvider,
     { icons, theme },
-    React.createElement(View, { style: [styles.frame, { height, backgroundColor: palette.surfaceColor }, style] },
-      player ? React.createElement(View, { pointerEvents: 'none', style: StyleSheet.absoluteFill }, player) : null,
-      !shouldRenderVideo && artwork ? React.createElement(Image, { source: { uri: artwork }, resizeMode: 'contain', style: styles.poster }) : null,
-      !shouldRenderVideo && !artwork ? React.createElement(View, { style: styles.emptyPoster }, React.createElement(PlayerIcon, { name: 'television-play', size: 48, color: palette.accentColor })) : null,
-      shouldRenderVideo && loading && !error ? React.createElement(View, { pointerEvents: 'none', style: styles.loading }, React.createElement(ActivityIndicator, { size: 'large', color: palette.accentColor })) : null,
-      error ? React.createElement(View, { pointerEvents: 'none', style: styles.error }, React.createElement(Text, { style: [styles.errorText, { color: palette.controlColor }] }, error)) : null,
-      React.createElement(InlinePlayerOverlay, {
-        showControls,
-        controls: { ...controls, actions },
-        palette,
-        title,
-        muted,
-        paused: pausedNow,
-        source: streamUrl,
-        fullscreen,
-        onToggleControls: () => setShowControls((value) => !value),
-        onMute: toggleMute,
-        onPlay: togglePlay,
-        onFullscreen: openFullscreen,
-      }),
-    ),
+    React.createElement(InlineLivePlayerSurface, {
+      height,
+      style,
+      palette,
+      fullscreen,
+      setFullscreen,
+      player,
+      shouldRenderVideo,
+      artwork,
+      loading,
+      error,
+      renderOverlay,
+    }),
   );
 }
 
@@ -305,6 +365,7 @@ export const InlineLivePlayer = React.memo(InlineLivePlayerView);
 
 const styles = StyleSheet.create({
   frame: { width: '100%', minHeight: 80, overflow: 'hidden', borderRadius: 14, position: 'relative', justifyContent: 'center' },
+  fullscreenFrame: { flex: 1, overflow: 'hidden', position: 'relative', justifyContent: 'center', backgroundColor: '#000' },
   video: { width: '100%', height: '100%' },
   poster: { ...StyleSheet.absoluteFillObject, width: '100%', height: '100%' },
   emptyPoster: { ...StyleSheet.absoluteFillObject, alignItems: 'center', justifyContent: 'center' },

package/src/native/MediaPlayerView.js

@@ -15,7 +15,6 @@ import {
 import VLCPlayer from '../../packages/react-native-vlc-media-player/VLCPlayer.js';
 import { WebVideoPlayer } from './media/WebVideoPlayer';
 import { ElectronVideoPlayer } from './media/ElectronVideoPlayer';
-import { YouTubeVideoPlayer } from './media/YouTubeVideoPlayer';
 import { LiveChatDrawer } from './media/LiveChatDrawer';
 import { LiveRecordingNotice, LiveRecordingOverlay } from './media/LiveRecordingOverlay';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -217,49 +216,16 @@ function handleVerticalGestureMove(touches, gestureState) {
   gestureState.commitVolume.current(volume);
 }
 
-function handleYouTubePlaybackState(state, playback) {
-  if (state === 'playing') {
-    playback.isPlayingRef.current = true;
-    playback.setIsPlaying(true);
-  } else if (state === 'paused' || state === 'ended') {
-    playback.isPlayingRef.current = false;
-    playback.setIsPlaying(false);
-  }
-}
-
 function PlatformMediaSurface(props) {
   const {
-    youtubeVideoId, playerStreamUrl, vlcRef, isPlaying, muted, videoOnlyMode,
+    playerStreamUrl, vlcRef, isPlaying, muted, videoOnlyMode,
     volume, playbackRate, aspectRatio, title, posterUrl, isLive, isAudioOnly,
     selectedAudioTrack, handleTracksChanged, handleProgress, handleNativePlaying,
     handleWebBuffering, handleEpisodeEnded, handleWebError, togglePlayPause,
     handleSeekByAction, handlePlaybackRoute, exoFallback, useExoForAndroidLocalMedia,
     nativeSource, computedAspectRatio, handleNativeLoadStart,
-    handleNativeOpen, handleNativeBuffering, isPlayingRef, setIsPlaying,
+    handleNativeOpen, handleNativeBuffering,
   } = props;
-  if (youtubeVideoId) {
-    return (
-      <YouTubeVideoPlayer
-        key={`youtube-${youtubeVideoId}`}
-        ref={vlcRef}
-        videoId={youtubeVideoId}
-        paused={!isPlaying}
-        muted={muted || videoOnlyMode}
-        volume={volume / 100}
-        playbackRate={playbackRate}
-        onReady={(event) => {
-          props.clearBufferingIndicator();
-          props.handleNativeOpen(event);
-        }}
-        onProgress={handleProgress}
-        onPlaying={handleNativePlaying}
-        onStateChange={(state) => handleYouTubePlaybackState(state, { isPlayingRef, setIsPlaying })}
-        onBuffering={handleWebBuffering}
-        onEnded={handleEpisodeEnded}
-        onError={handleWebError}
-      />
-    );
-  }
   if (isElectron()) {
     return (
       <ElectronVideoPlayer
@@ -707,9 +673,10 @@ function FullscreenChatLayer(props) {
 }
 
 function FullscreenRecordingLayer(props) {
+  const recordingEligible = props.isLive;
   return (
     <>
-      {!props.isAudioOnly && props.isLive && (props.isScreenRecorderEnabled || props.recStatus !== 'idle') ? (
+      {!props.isAudioOnly && recordingEligible && (props.isScreenRecorderEnabled || props.recStatus !== 'idle') ? (
         <LiveRecordingOverlay
           status={props.recStatus}
           elapsedMs={props.recElapsedMs}
@@ -721,7 +688,7 @@ function FullscreenRecordingLayer(props) {
           onStop={props.handleStopRecording}
         />
       ) : null}
-      {!props.isAudioOnly && props.isLive && props.isScreenRecorderEnabled ? (
+      {!props.isAudioOnly && recordingEligible && props.isScreenRecorderEnabled ? (
         <LiveRecordingNotice notice={props.recNotice} colors={props.colors} onDismiss={props.onDismissNotice} />
       ) : null}
     </>
@@ -773,7 +740,7 @@ function getInlinePreviewPositionStyle(rect, isValid) {
 export const MediaPlayerView = ({
   visible,
   streamUrl,
-  youtubeVideoId,
+  onBack,
   title,
   mediaType = 'live',
   onClose,
@@ -820,6 +787,7 @@ export const MediaPlayerView = ({
   style,
   onReady,
   onProgress,
+  showProgressBar = true,
   onProgressBarChange,
   onPlaying,
   onBuffering,
@@ -846,16 +814,16 @@ export const MediaPlayerView = ({
   const vlcRef = useRef(null);
   const playerRef = useRef(null);
   const invokeAction = useCallback((name, fallback, payload) => {
-    const callback = name === 'onAspectRatioChange'
-      ? actions?.[name] || onAspectRatioChange
-      : actions?.[name];
+    let callback = actions?.[name];
+    if (name === 'onAspectRatioChange') callback = callback || onAspectRatioChange;
+    if (name === 'onBack') callback = callback || onBack || onClose;
     return invokePlayerAction(
       fallback,
       callback,
       payload,
       { player: playerApiRef?.current || null },
     );
-  }, [actions, onAspectRatioChange, playerApiRef]);
+  }, [actions, onAspectRatioChange, onBack, onClose, playerApiRef]);
   const handlePlayerHostRef = useCallback((node) => {
     playerRef.current = node;
     onPlayerHostRef?.(node);
@@ -1212,6 +1180,11 @@ export const MediaPlayerView = ({
 
   const isLive = mediaType === 'live' || mediaType === 'channel';
   const isInlinePreview = !!inlinePreview;
+  const progressBarVisible = showProgressBar !== false
+    && controls.seek !== false
+    && !isLive
+    && !isInlinePreview;
+  const progressBarCallback = progressBarVisible ? onProgressBarChange : undefined;
 
   useEffect(() => {
     if (!visible || !initialShowLiveChat || !isLive || !isLiveCommentsEnabled) return;
@@ -1478,9 +1451,9 @@ export const MediaPlayerView = ({
 
   const handleBackAction = useCallback(() => invokeAction(
     'onBack',
-    handleClose,
+    undefined,
     { title, streamUrl, mediaId },
-  ), [invokeAction, handleClose, title, streamUrl, mediaId]);
+  ), [invokeAction, title, streamUrl, mediaId]);
 
   useEffect(() => {
     if (!visible || isWeb()) return undefined;
@@ -1598,9 +1571,9 @@ export const MediaPlayerView = ({
     setSliderPos(0);
     lastKnownTimeRef.current = 0;
     seekCompletedAt.current = Date.now();
-    emitProgressBarTime(0, onProgressBarChange, lastProgressBarSecondRef, { force: true });
+    emitProgressBarTime(0, progressBarCallback, lastProgressBarSecondRef, { force: true });
     if (!showControls) setShowControls(true);
-  }, [onProgressBarChange, showControls]);
+  }, [progressBarCallback, showControls]);
 
   // Episode finished: auto-advance to the next episode (sequential) or to a
   // random episode (shuffle mode). Last episode in the playlist stops playback.
@@ -1799,7 +1772,7 @@ export const MediaPlayerView = ({
       lastKnownTimeRef,
       setSliderPosition: setSliderPos,
     });
-    if (progress) emitProgressBarTime(progress.seconds, onProgressBarChange, lastProgressBarSecondRef);
+    if (progress) emitProgressBarTime(progress.seconds, progressBarCallback, lastProgressBarSecondRef);
   };
 
   const handleNativeOpen = (event) => {
@@ -1907,13 +1880,13 @@ export const MediaPlayerView = ({
       setSliderPos(target);
       seekCompletedAt.current = Date.now();
       debouncedSaveProgress();
-      emitProgressBarTime(target, onProgressBarChange, lastProgressBarSecondRef, { force: true });
+      emitProgressBarTime(target, progressBarCallback, lastProgressBarSecondRef, { force: true });
     }, { seconds: Number(seconds) || 0, currentTime: lastKnownTimeRef.current },
-  ), [invokeAction, handleSeekTo, debouncedSaveProgress, onProgressBarChange]);
+  ), [invokeAction, handleSeekTo, debouncedSaveProgress, progressBarCallback]);
   const handleSeekByAction = (deltaSeconds) => invokeAction(
     'onSeek', () => {
       handleSeekBy(deltaSeconds);
-      emitProgressBarTime(lastKnownTimeRef.current, onProgressBarChange, lastProgressBarSecondRef, { force: true });
+      emitProgressBarTime(lastKnownTimeRef.current, progressBarCallback, lastProgressBarSecondRef, { force: true });
     }, { deltaSeconds: Number(deltaSeconds) || 0, currentTime: lastKnownTimeRef.current },
   );
   const handleMuteAction = useCallback(() => invokeAction(
@@ -1969,7 +1942,7 @@ export const MediaPlayerView = ({
       seekTo: handleSeekTo,
       seekBy: handleSeekBy,
       setPlaybackRate: (rate) => setPlaybackRate(clampNumber(rate, 0.25, 4, 1)),
-      back: handleClose,
+      back: handleBackAction,
       getVideoElement: () => vlcRef.current?.getVideoElement?.() || null,
       getAudioTracks: () => audioTracks,
     };
@@ -1977,7 +1950,7 @@ export const MediaPlayerView = ({
     return () => {
       for (const key of Object.keys(api)) delete playerApiRef.current[key];
     };
-  }, [playerApiRef, togglePlayPause, handleRestart, toggleMute, handleSelectAspectRatio, handleAudioSelect, handleSeekTo, handleSeekBy, handleClose, audioTracks]);
+  }, [playerApiRef, togglePlayPause, handleRestart, toggleMute, handleSelectAspectRatio, handleAudioSelect, handleSeekTo, handleSeekBy, handleBackAction, audioTracks]);
 
   const handleSpeedSelect = useCallback((speed) => invokeAction(
     'onPlaybackRateChange', () => {
@@ -2491,7 +2464,6 @@ export const MediaPlayerView = ({
 
   const videoPlayer = (
     <PlatformMediaSurface
-      youtubeVideoId={youtubeVideoId}
       playerStreamUrl={playerStreamUrl}
       vlcRef={vlcRef}
       isPlaying={isPlaying}
@@ -2520,11 +2492,8 @@ export const MediaPlayerView = ({
       computedAspectRatio={computedAspectRatio}
       handleNativeLoadStart={handleNativeLoadStart}
       handleNativeOpen={handleNativeOpen}
-      clearBufferingIndicator={clearBufferingIndicator}
       handleClose={handleClose}
       handleNativeBuffering={handleNativeBuffering}
-      isPlayingRef={isPlayingRef}
-      setIsPlaying={setIsPlaying}
     />
   );
   const isValidPreviewRect = isUsableInlinePreviewRect(inlinePreviewRect);
@@ -2600,7 +2569,7 @@ export const MediaPlayerView = ({
     isEpgEnabled,
     diagnosticsOverlayEnabled,
     muted,
-    controls,
+    controls: { ...controls, seek: progressBarVisible },
     onClose: handleBackAction,
     handleRecordingAction,
     handleStartRecording,