@cinecrew/cinecrew-player 0.1.3 → 0.1.5

package/src/web/styles.css

@@ -28,8 +28,7 @@
   background: #000;
 }
 
-.cinecrew-player__video,
-.cinecrew-player__youtube {
+.cinecrew-player__video {
   transition: width 180ms ease, height 180ms ease, top 180ms ease, left 180ms ease, transform 180ms ease;
 }
 
@@ -40,10 +39,9 @@
 }
 
 .cinecrew-player__title {
-  position: absolute;
-  top: 62px;
-  left: 20px;
-  right: 20px;
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: center;
   z-index: 2;
   overflow: hidden;
   font-weight: 700;
@@ -52,6 +50,18 @@
   text-shadow: 0 1px 4px #000;
 }
 
+.cinecrew-player__inline-title {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: min(52vw, 420px);
+  overflow: hidden;
+  color: var(--cinecrew-text, #fff);
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-shadow: 0 1px 4px #000;
+}
+
 .cinecrew-player__controls {
   position: absolute;
   inset: 0;
@@ -70,6 +80,14 @@
   opacity: 1;
 }
 
+.cinecrew-player__controls.is-recording { opacity: 1; }
+.cinecrew-player__controls.is-recording > .cinecrew-player__top-controls,
+.cinecrew-player__controls.is-recording > .cinecrew-player__center-controls,
+.cinecrew-player__controls.is-recording > .cinecrew-player__bottom-controls {
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .cinecrew-player__top-controls,
 .cinecrew-player__bottom-controls,
 .cinecrew-player__center-controls,
@@ -103,8 +121,11 @@
 
 .cinecrew-player__top-right-actions {
   justify-content: flex-end;
+  flex: 0 0 auto;
 }
 
+.cinecrew-player__top-left-actions { flex: 0 0 auto; }
+
 .cinecrew-player__bottom-controls {
   width: 100%;
   flex-direction: column;
@@ -128,6 +149,57 @@
   justify-content: center;
 }
 
+.cinecrew-player__recording-overlay {
+  position: absolute;
+  top: 10px;
+  left: 50%;
+  z-index: 5;
+  display: flex;
+  min-width: 0;
+  max-width: calc(100% - 24px);
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 7px 10px;
+  border: 1px solid rgba(255,255,255,.22);
+  border-radius: 12px;
+  background: rgba(0, 0, 0, .68);
+  box-shadow: 0 6px 18px rgba(0,0,0,.28);
+  transform: translateX(-50%);
+  backdrop-filter: blur(8px);
+  font-size: .88em;
+}
+
+.cinecrew-player__recording-overlay.is-error { border-color: var(--cinecrew-accent); }
+.cinecrew-player__recording-indicator { color: #ff4b63; font-size: .78em; font-weight: 800; letter-spacing: .08em; }
+.cinecrew-player__recording-timer { font-variant-numeric: tabular-nums; font-size: 1.05em; }
+.cinecrew-player__recording-actions { display: flex; gap: 6px; }
+.cinecrew-player__recording-actions button,
+.cinecrew-player__recording-overlay > button {
+  border: 1px solid rgba(255,255,255,.2);
+  border-radius: 999px;
+  padding: 6px 9px;
+  color: inherit;
+  background: rgba(255,255,255,.1);
+  cursor: pointer;
+  font: inherit;
+}
+.cinecrew-player__recording-download {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid rgba(255,255,255,.2);
+  border-radius: 999px;
+  padding: 6px 9px;
+  color: inherit;
+  background: rgba(255,255,255,.1);
+  text-decoration: none;
+  font: inherit;
+}
+.cinecrew-player__recording-actions button:last-child { border-color: #ff4b63; background: rgba(255,75,99,.2); }
+.cinecrew-player__recording-ready { color: #70e3b1; }
+
 .cinecrew-player__seek {
   flex: 0 0 auto;
   width: 100%;
@@ -431,7 +503,8 @@
   grid-row: span 2;
   place-items: center;
   border-radius: 9px;
-  background: rgba(255,255,255,.08);
+  border: 1px solid color-mix(in srgb, var(--diagnostic-accent, #fff) 32%, transparent);
+  background: color-mix(in srgb, var(--diagnostic-accent, #fff) 14%, transparent);
 }
 
 .cinecrew-player__diagnostic-icon .cinecrew-player__icon { width: 18px; height: 18px; }
@@ -479,6 +552,16 @@
   gap: 8px;
   min-height: 0;
   overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+.cinecrew-player__older-loading {
+  flex: 0 0 auto;
+  align-self: center;
+  padding: 6px 10px;
+  color: var(--cinecrew-accent);
+  font-size: .86em;
 }
 
 .cinecrew-player__chat-message,
@@ -527,6 +610,7 @@
 
 .cinecrew-player__chat-composer {
   position: relative;
+  container-type: inline-size;
   display: flex;
   align-items: center;
   gap: 7px;
@@ -602,8 +686,9 @@
 
 .cinecrew-player__emoji-picker {
   position: absolute;
-  right: 0;
-  bottom: calc(100% + 12px);
+  left: 0;
+  right: auto;
+  bottom: 100%;
   z-index: 2;
   display: flex;
   flex-direction: column;
@@ -617,7 +702,31 @@
   box-shadow: 0 10px 30px rgba(0, 0, 0, .42);
 }
 
-.cinecrew-player__chat-composer .cinecrew-player__emoji-search {
+@supports (width: 1cqw) {
+  .cinecrew-player__emoji-picker { width: min(340px, 100cqw); }
+}
+
+.cinecrew-player__emoji-anchor {
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 34px;
+  width: 34px;
+  height: 34px;
+  align-self: center;
+  align-items: center;
+}
+
+.cinecrew-player__emoji-anchor > .cinecrew-player__emoji-toggle {
+  box-sizing: border-box;
+  width: 34px;
+  min-width: 34px;
+  height: 34px;
+  min-height: 34px;
+  padding: 0;
+  line-height: 1;
+}
+
+.cinecrew-player__emoji-picker .cinecrew-player__emoji-search {
   flex: 0 0 auto;
   width: 100%;
   box-sizing: border-box;
@@ -631,7 +740,7 @@
   font-size: 13px;
 }
 
-.cinecrew-player__chat-composer .cinecrew-player__emoji-search:focus {
+.cinecrew-player__emoji-picker .cinecrew-player__emoji-search:focus {
   border-color: var(--cinecrew-accent);
 }
 
@@ -652,7 +761,7 @@
   font: inherit;
 }
 
-.cinecrew-player__chat-composer .cinecrew-player__emoji-categories button {
+.cinecrew-player__emoji-picker .cinecrew-player__emoji-categories button {
   display: grid;
   min-width: 0;
   min-height: 34px;
@@ -664,8 +773,8 @@
   font-size: 19px;
 }
 
-.cinecrew-player__chat-composer .cinecrew-player__emoji-categories button:hover,
-.cinecrew-player__chat-composer .cinecrew-player__emoji-categories button.is-active {
+.cinecrew-player__emoji-picker .cinecrew-player__emoji-categories button:hover,
+.cinecrew-player__emoji-picker .cinecrew-player__emoji-categories button.is-active {
   border-color: var(--cinecrew-accent);
   background: color-mix(in srgb, var(--cinecrew-accent) 14%, transparent);
 }
@@ -682,24 +791,27 @@
   scrollbar-width: thin;
 }
 
-.cinecrew-player__chat-composer .cinecrew-player__emoji-grid button {
+.cinecrew-player__emoji-picker .cinecrew-player__emoji-grid button {
   display: grid;
   width: 100%;
   min-width: 0;
-  min-height: 34px;
+  min-height: 38px;
   place-items: center;
   border: 0;
-  border-radius: 8px;
+  border-radius: 50%;
   padding: 0;
   background: transparent;
-  font-size: 19px;
+  font-size: 23px;
+  line-height: 1;
+  transition: background-color .12s ease, transform .12s ease;
 }
 
-.cinecrew-player__chat-composer .cinecrew-player__emoji-grid button:hover {
+.cinecrew-player__emoji-picker .cinecrew-player__emoji-grid button:hover {
   background: rgba(255, 255, 255, .12);
+  transform: scale(1.12);
 }
 
-.cinecrew-player__chat-composer .cinecrew-player__emoji-grid .cinecrew-player__emoji-load-more {
+.cinecrew-player__emoji-picker .cinecrew-player__emoji-grid .cinecrew-player__emoji-load-more {
   grid-column: 1 / -1;
   min-height: 34px;
   border: 1px solid rgba(255, 255, 255, .14);
@@ -752,6 +864,12 @@
   background: rgba(255,255,255,.1);
 }
 
+.cinecrew-player__menu .cinecrew-player__menu-option.is-selected {
+  color: var(--cinecrew-accent);
+  background: color-mix(in srgb, var(--cinecrew-accent) 18%, transparent);
+  font-weight: 700;
+}
+
 .cinecrew-player__panel {
   position: absolute;
   inset: 0 0 0 auto;
@@ -811,9 +929,11 @@
 
 @media (max-width: 640px) {
   .cinecrew-player__controls { padding: 10px; }
-  .cinecrew-player__top-controls { align-items: flex-start; gap: 6px; }
-  .cinecrew-player__top-left-actions { gap: 4px; }
+  .cinecrew-player__top-controls { align-items: center; gap: 6px; flex-wrap: wrap; }
+  .cinecrew-player__title { order: 3; flex: 0 0 100%; box-sizing: border-box; padding: 0 4px; text-align: center; }
+  .cinecrew-player__top-left-actions { order: 1; gap: 4px; }
   .cinecrew-player__top-right-actions {
+    order: 2;
     max-width: calc(100% - 128px);
     flex-wrap: wrap;
     gap: 4px;
@@ -825,7 +945,6 @@
     min-height: 34px;
     padding: 6px 8px;
   }
-  .cinecrew-player__title { top: 96px; left: 12px; right: 12px; }
   .cinecrew-player__bottom-actions { align-items: flex-end; gap: 6px; }
   .cinecrew-player__bottom-right-actions { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
   .cinecrew-player__panel { width: min(380px, 92%); }

package/types/index.d.ts

@@ -1,6 +1,7 @@
 import type * as React from 'react';
 
 export type AspectRatio = 'FIT' | 'FILL' | 'STRETCH' | 'FILL_SCREEN' | string;
+export interface AspectRatioOption { value: AspectRatio; label?: string }
 export type PlayerMediaType = 'live' | 'channel' | 'movie' | 'series' | string;
 
 export interface PlayerSource {
@@ -57,6 +58,8 @@ export interface PlayerApi {
   seekBy(seconds: number): void;
   back(): void;
   setPlaybackRate(rate: number): void;
+  setPanel(panel: 'chat' | 'epg' | 'diagnostics' | null): void;
+  closePanel(): void;
   getVideoElement(): unknown | null;
   getAudioTracks(): AudioTrack[];
   enterFullscreen?(): void | Promise<void>;
@@ -77,9 +80,11 @@ export interface PlayerActionContext {
   video?: unknown | null;
 }
 
+/** App callback for a player action. Back is app-owned and has no built-in behavior. */
 export type PlayerAction = (payload?: Record<string, unknown>, context?: PlayerActionContext) => unknown;
 
 export interface PlayerActions {
+  /** User-owned navigation event. The player does not close or navigate on its own. */
   onBack?: PlayerAction;
   onPlayPause?: PlayerAction;
   onSeek?: PlayerAction;
@@ -173,6 +178,7 @@ export interface PlayerIntegrations {
     render?: (context: { title: string; source: PlayerSource; onClose: () => void }) => React.ReactNode;
   };
   recording?: {
+    /** Starts host-managed recording for the active direct media source. */
     start?: (args: { getVideoElement: () => unknown | null; streamUrl: string; title?: string }) => Promise<unknown>;
     pause?: () => Promise<unknown>;
     resume?: () => Promise<unknown>;
@@ -205,13 +211,20 @@ export interface CineCrewPlayerProps {
   volume?: number;
   playbackRate?: number;
   controls?: PlayerControls;
+  /** Show the playback progress/seek bar. When false, onProgressBarChange is not called. Defaults to true. */
+  showProgressBar?: boolean;
   /** Web/Electron chat and EPG drawer behavior. Overlay keeps the video full-size; resize shrinks it to make room. */
   drawerMode?: PlayerDrawerMode;
   /** Web CSS or React Native view-style overrides for the chat, EPG, and diagnostics drawer. */
   drawerStyle?: React.CSSProperties | import('react-native').ViewStyle;
-  /** Number of chat messages fetched per page; older pages load from the drawer's See more button. Defaults to 50. */
+  /** Number of chat messages fetched per page. Older pages load automatically when scrolling to the top. Defaults to 50. */
   messagePageSize?: number;
+  /** Available aspect-ratio choices. Items may be values or labeled { value, label } options. */
+  aspectRatios?: Array<AspectRatio | AspectRatioOption>;
+  /** Initial aspect-ratio choice. Defaults to FIT. */
+  defaultAspectRatio?: AspectRatio;
   features?: { diagnostics?: boolean; [key: string]: boolean | undefined };
+  /** App callbacks invoked after each corresponding built-in action. */
   actions?: PlayerActions;
   integrations?: PlayerIntegrations;
   theme?: PlayerTheme;
@@ -234,8 +247,11 @@ export interface CineCrewPlayerProps {
   playlist?: Array<Record<string, unknown>>;
   shuffle?: boolean;
   onClose?: () => void;
-  onBack?: () => void;
+  /** User-owned back event. The player does not close or navigate on its own. */
+  onBack?: PlayerAction;
   onFullscreen?: (state: { isFullscreen: boolean }) => void;
+  /** Invoked after the player applies an aspect ratio selection; actions.onAspectRatioChange takes precedence when both are supplied. */
+  onAspectRatioChange?: PlayerAction;
   onPlayerHostRef?: (node: unknown | null) => void;
   onInlinePreviewWheel?: (deltaY: number) => void;
   inlinePreview?: boolean;
@@ -245,6 +261,8 @@ export interface CineCrewPlayerProps {
   liveChatNonce?: number;
   onReady?: (playerOrEvent: unknown) => void;
   onProgress?: (event: unknown) => void;
+  /** Called once for each elapsed playback second and after a completed seek/restart with a zero-padded HH:MM:SS position. */
+  onProgressBarChange?: (time: string) => void;
   onPlaying?: (event: unknown) => void;
   onBuffering?: (buffering: boolean) => void;
   onError?: (error: Error | Record<string, unknown>) => void;
@@ -266,6 +284,7 @@ export interface InlineLivePlayerProps {
   paused?: boolean;
   isActive?: boolean;
   onActivate?: () => void;
+  /** @deprecated Inline fullscreen is self-contained. Use actions.onFullscreen to observe its state. */
   onFullscreen?: () => void;
   controls?: Pick<PlayerControls, 'playPause' | 'mute' | 'fullscreen'>;
   actions?: Pick<PlayerActions, 'onPlayPause' | 'onMute' | 'onFullscreen'>;

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

@@ -1,120 +0,0 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { WebView } from 'react-native-webview';
-import { buildYouTubePlayerHtml } from '../../utils/youtubeHtml';
-
-const stateName = (value) => ({ 0: 'ended', 1: 'playing', 2: 'paused', 3: 'buffering', 5: 'cued' })[value] || 'unstarted';
-
-export const YouTubeVideoPlayer = forwardRef(function YouTubeVideoPlayer({
-  videoId,
-  paused = false,
-  muted = false,
-  volume = 1,
-  playbackRate = 1,
-  onReady,
-  onProgress,
-  onPlaying,
-  onBuffering,
-  onStateChange,
-  onError,
-  onEnded,
-}, ref) {
-  const webViewRef = useRef(null);
-  const handlersRef = useRef({});
-  const latestPropsRef = useRef({});
-  const readyRef = useRef(false);
-  handlersRef.current = { onReady, onProgress, onPlaying, onBuffering, onStateChange, onError, onEnded };
-  latestPropsRef.current = { paused, muted, volume, playbackRate };
-
-  const sendCommand = useCallback((name, value) => {
-    const serialized = JSON.stringify(value ?? null);
-    webViewRef.current?.injectJavaScript(
-      `window.cinecrewPlayerCommand && window.cinecrewPlayerCommand(${JSON.stringify(name)}, ${serialized}); true;`
-    );
-  }, []);
-
-  const handleMessage = useCallback((event) => {
-    let message;
-    try { message = JSON.parse(event.nativeEvent.data); } catch { return; }
-    const handlers = handlersRef.current;
-    if (message.type === 'ready') {
-      readyRef.current = true;
-      handlers.onBuffering?.(false);
-      handlers.onReady?.({ youtube: true });
-      const latest = latestPropsRef.current;
-      sendCommand(latest.paused ? 'pause' : 'play');
-      sendCommand(latest.muted ? 'mute' : 'unmute');
-      sendCommand('volume', Math.round(Math.max(0, Math.min(1, latest.volume)) * 100));
-      sendCommand('rate', latest.playbackRate);
-      return;
-    }
-    if (message.type === 'state') {
-      const state = stateName(Number(message.data?.state));
-      handlers.onStateChange?.(state);
-      handlers.onBuffering?.(state === 'buffering');
-      if (state === 'playing') handlers.onPlaying?.({ state, youtube: true });
-      if (state === 'ended') handlers.onEnded?.();
-      return;
-    }
-    if (message.type === 'progress') {
-      const currentTime = Number(message.data?.currentTime) || 0;
-      const duration = Number(message.data?.duration) || 0;
-      handlers.onProgress?.({ currentTime: currentTime * 1000, duration: duration * 1000, target: currentTime });
-      return;
-    }
-    if (message.type === 'error') {
-      handlers.onError?.({ code: message.data?.code, message: `YouTube playback failed (${message.data?.code}).` });
-    }
-  }, [sendCommand]);
-
-  useEffect(() => { if (readyRef.current) sendCommand(paused ? 'pause' : 'play'); }, [paused, sendCommand]);
-  useEffect(() => {
-    if (!readyRef.current) return;
-    sendCommand(muted ? 'mute' : 'unmute');
-    sendCommand('volume', Math.round(Math.max(0, Math.min(1, volume)) * 100));
-  }, [muted, volume, sendCommand]);
-  useEffect(() => { if (readyRef.current) sendCommand('rate', playbackRate); }, [playbackRate, sendCommand]);
-
-  const validVideoId = /^[\w-]{11}$/.test(String(videoId || ''));
-  const html = useMemo(
-    () => validVideoId ? buildYouTubePlayerHtml(videoId, !paused) : '<!doctype html><html><body style="background:#000"></body></html>',
-    [validVideoId, videoId],
-  );
-  const webViewSource = useMemo(() => ({ html, baseUrl: 'https://www.youtube.com' }), [html]);
-
-  useEffect(() => {
-    if (!validVideoId) handlersRef.current.onError?.(new Error('A valid YouTube video ID is required.'));
-  }, [validVideoId]);
-
-  useImperativeHandle(ref, () => ({
-    play: () => sendCommand('play'),
-    resume: () => sendCommand('play'),
-    pause: () => sendCommand('pause'),
-    seek: (ratio) => sendCommand('seekRatio', Math.max(0, Math.min(1, Number(ratio) || 0))),
-    seekTo: (seconds) => sendCommand('seek', Math.max(0, Number(seconds) || 0)),
-    getVideoElement: () => null,
-  }), [sendCommand]);
-
-  return React.createElement(View, { style: styles.container }, React.createElement(WebView, {
-    ref: webViewRef,
-    source: webViewSource,
-    originWhitelist: ['*'],
-    javaScriptEnabled: true,
-    domStorageEnabled: true,
-    allowsInlineMediaPlayback: true,
-    mediaPlaybackRequiresUserAction: false,
-    allowsFullscreenVideo: false,
-    scrollEnabled: false,
-    bounces: false,
-    onMessage: handleMessage,
-    onError: (event) => handlersRef.current.onError?.(event.nativeEvent || event),
-    style: styles.webView,
-  }));
-});
-
-const styles = StyleSheet.create({
-  container: { ...StyleSheet.absoluteFillObject, backgroundColor: '#000' },
-  webView: { flex: 1, backgroundColor: '#000' },
-});
-
-export default YouTubeVideoPlayer;