@cinecrew/cinecrew-player 0.1.1 → 0.1.3

package/README.md

@@ -24,7 +24,7 @@
 
 <p align="center"><strong>🎬 Movies</strong> &nbsp; <strong>📡 Live TV</strong> &nbsp; <strong>📱 Native</strong> &nbsp; <strong>🖥️ Web & Electron</strong></p>
 
-| **2 player components** | **5 target environments** | **16 visibility controls** | **20 action hooks** |
+| **2 player components** | **5 target environments** | **15 visibility controls** | **19 action hooks** |
 |:---:|:---:|:---:|:---:|
 | Full player + inline live preview | Web · Electron · Android · iOS · React Native Web | Choose what appears | Override default actions |
 
@@ -53,14 +53,14 @@ 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, minimize | A complete control surface without hard-wiring your app navigation |
+| 🎛️ **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 |
 | 🎨 **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 |
 | 🧭 **Playback lifecycle** | Ready, playing, buffering, progress, ended, error, fullscreen, next-episode, and playback-route callbacks | App-owned navigation, telemetry, and resume state |
 
 <details>
-<summary><strong>🎛️ Control inventory — all 16 visibility switches</strong></summary>
+<summary><strong>🎛️ Control inventory — all 15 visibility switches</strong></summary>
 
 | Icon | `controls` key | What it controls | Notes |
 |:---:|---|---|---|
@@ -74,7 +74,6 @@ flowchart LR
 | 🎧 | `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 |
-| ⤵️ | `minimize` | Minimize action | App supplies its navigation or sheet behavior |
 | ⛶ | `fullscreen` | Fullscreen / promote preview | Native full-player presentation is platform-specific |
 | ⏺️ | `recording` | Recording controls | Requires an app recording adapter or callback |
 | 💬 | `liveChat` | Live chat panel | Requires an adapter, render slot, or callback |
@@ -91,7 +90,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 |
-| 🧱 App-owned panels | `renderLiveChat`, `renderEpg`, or integration render callbacks |
+| 🧱 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 |
 | 📣 Events and state | Lifecycle callbacks plus progress, presence, analytics, and sleep-timer integrations |
@@ -165,7 +164,7 @@ The items below are planned for more consistent, user-facing support across plat
 - **[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).
 
-The React/Vite and Expo Web demos use the single package in this repository (`file:../..`) so they can build before and after the public release. Snack loads the native example from this repository's `main` branch and installs `@cinecrew/cinecrew-player` from npm, so those links become runnable once the example is pushed and the package is published. 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.
+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.
 
 Run either demo:
 
@@ -345,8 +344,12 @@ In short: CineCrew’s intended distinction is **one app-facing player package f
 | `volume` | `number` | `1` | Initial volume from `0` to `1`. |
 | `playbackRate` | `number` | `1` | Initial playback speed; the on-demand speed control can change it afterward. |
 | `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. |
 | `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. |
 | `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. |
@@ -361,14 +364,14 @@ 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`, `onMinimize` | callbacks | — | Player lifecycle/navigation callbacks. |
+| `onClose`, `onBack` | callbacks | — | Player lifecycle/navigation callbacks. |
 | `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` can enable optional diagnostics with `{ diagnostics: true }`. `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 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.
 
 ### Player source
 
@@ -426,11 +429,11 @@ Every control can be hidden with `false`. Defaults are designed to be useful out
     audioOnly: true,
     audioTracks: true,
     playbackRate: true,
-    minimize: false,
     fullscreen: true,
     recording: false,
     liveChat: false,
     epg: false,
+    diagnostics: true,
     seek: true,
   }}
 />
@@ -448,11 +451,11 @@ Every control can be hidden with `false`. Defaults are designed to be useful out
 | `audioOnly` | Show the audio-only card while playback continues. |
 | `audioTracks` | Audio-track picker when tracks are exposed. |
 | `playbackRate` | On-demand playback speed. |
-| `minimize` | Minimize callback button; hidden unless enabled. |
 | `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`. |
 | `seek` | On-demand seek bar. |
 
 ## Actions and callbacks
@@ -467,7 +470,6 @@ const playerRef = React.useRef(null);
   source={source}
   actions={{
     onRestart: (_payload, { player }) => player?.restart(),
-    onMinimize: () => closePlayerSheet(),
     onBack: () => navigation.goBack(),
     onMute: ({ muted }, { player }) => player?.setMuted(muted),
     onAspectRatioChange: ({ aspectRatio }, { player }) => player?.setAspectRatio(aspectRatio),
@@ -475,9 +477,9 @@ const playerRef = React.useRef(null);
 />
 ```
 
-Available action keys: `onBack`, `onPlayPause`, `onSeek`, `onRestart`, `onLock`, `onMute`, `onAspectRatioChange`, `onVideoOnlyChange`, `onAudioOnlyChange`, `onAudioTrackChange`, `onMinimize`, `onPlaybackRateChange`, `onFullscreen`, `onRecordingStart`, `onRecordingPause`, `onRecordingResume`, `onRecordingStop`, `onLiveChatOpen`, `onEpgOpen`, and `onDiagnosticsOpen`.
+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`, `minimize`, `getVideoElement`, `getAudioTracks`, and fullscreen methods where supported.
+The ref exposes `play`, `pause`, `togglePlayPause`, `restart`, `setMuted`, `toggleMute`, `setAspectRatio`, `setAudioTrack`, `setAudioOnly`, `setVideoOnly`, `setPlaybackRate`, `seekTo`, `seekBy`, `back`, `getVideoElement`, `getAudioTracks`, and fullscreen methods where supported.
 
 ## Integrations
 
@@ -491,7 +493,7 @@ Integrations are optional. The package has no CineCrew account, database, or wor
     user: { id: currentUser.id, username: currentUser.name },
     liveChat: {
       pollIntervalMs: 5000,
-      loadMessages: ({ channelId, limit }) => api.loadChat(channelId, limit),
+      loadMessages: ({ channelId, limit, offset }) => api.loadChat(channelId, { limit, offset }),
       sendMessage: ({ channelId, userId, username, comment }) =>
         api.sendChat({ channelId, userId, username, comment }),
     },
@@ -515,7 +517,9 @@ Integrations are optional. The package has no CineCrew account, database, or wor
 />
 ```
 
-`loadMessages` returns an array of messages with `username` and `comment` (or `message`) fields. `loadListings` returns EPG entries with `startMs` and `endMs` epoch-millisecond timestamps. The native player renders the built-in chat and EPG UI from these adapters. On web, an app can use `renderLiveChat` / `renderEpg`, or provide `integrations.liveChat.render` / `integrations.epg.render`.
+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).
+
+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.
 
 ## Themes and icons
 
@@ -540,7 +544,7 @@ Defaults are used unless the caller supplies an override. Web theme properties i
 />
 ```
 
-Icon keys: `play`, `pause`, `restart`, `lock`, `unlock`, `mute`, `unmute`, `aspectRatio`, `videoOnly`, `audio`, `minimize`, `back`, `recording`, `stop`, `liveChat`, `epg`, `fullscreen`, and `close`. A value may be a string/glyph, a React element, or an icon component.
+Icon keys: `play`, `pause`, `restart`, `lock`, `unlock`, `mute`, `unmute`, `aspectRatio`, `videoOnly`, `audio`, `back`, `recording`, `stop`, `liveChat`, `epg`, `fullscreen`, and `close`. A value may be a string/glyph, a React element, or an icon component.
 
 ## Sources and link resolution
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cinecrew/cinecrew-player",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "description": "Customizable cross-platform live and on-demand video player for React and React Native.",
   "license": "MIT",
@@ -106,7 +106,6 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.1.1",
-    "@hiraku-ai/react-native-emoji-picker": "^1.2.4",
     "@mediabunny/ac3": "^1.59.0",
     "@react-native-community/slider": "^5.2.0",
     "expo-video": "^57.0.2",

package/src/data/README.md

@@ -0,0 +1,5 @@
+# Emoji data
+
+`emoji-data.json` is sourced from the [`stdlib-js/datasets-emoji` dataset](https://github.com/stdlib-js/datasets-emoji/blob/main/data/data.json).
+
+The upstream repository states that its database contents are licensed under CC0 1.0 Universal (and PDDL 1.0); this project uses the emoji data only. The file is bundled locally so the picker works offline and groups entries by the dataset's Unicode emoji group names.