@cinecrew/cinecrew-player 0.1.1

package/src/web/styles.css

@@ -0,0 +1,378 @@
+.cinecrew-player {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  min-height: 180px;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  isolation: isolate;
+  color: var(--cinecrew-text, #fff);
+  font: 500 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.cinecrew-player:fullscreen {
+  width: 100vw;
+  height: 100vh;
+  aspect-ratio: auto;
+  border-radius: 0 !important;
+}
+
+.cinecrew-player__video,
+.cinecrew-player__empty {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+}
+
+.cinecrew-player__shade {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.cinecrew-player__title {
+  position: absolute;
+  top: 18px;
+  left: 20px;
+  z-index: 2;
+  max-width: min(65%, 680px);
+  overflow: hidden;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-shadow: 0 1px 4px #000;
+}
+
+.cinecrew-player__controls {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 14px;
+  opacity: 0;
+  transition: opacity 160ms ease;
+}
+
+.cinecrew-player:hover .cinecrew-player__controls,
+.cinecrew-player:focus-within .cinecrew-player__controls {
+  opacity: 1;
+}
+
+.cinecrew-player__top-controls,
+.cinecrew-player__bottom-controls,
+.cinecrew-player__center-controls,
+.cinecrew-player__seek {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cinecrew-player__top-controls,
+.cinecrew-player__bottom-controls {
+  flex-wrap: wrap;
+}
+
+.cinecrew-player__bottom-controls {
+  justify-content: flex-end;
+}
+
+.cinecrew-player__center-controls {
+  justify-content: center;
+}
+
+.cinecrew-player__seek {
+  flex: 1 1 100%;
+  font-variant-numeric: tabular-nums;
+  text-shadow: 0 1px 3px #000;
+}
+
+.cinecrew-player__seek input {
+  flex: 1;
+  min-width: 50px;
+}
+
+.cinecrew-player__button {
+  display: inline-flex;
+  min-width: 38px;
+  min-height: 38px;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 8px 11px;
+  border: 1px solid rgba(255,255,255,.18);
+  border-radius: 999px;
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+  backdrop-filter: blur(12px);
+}
+
+.cinecrew-player__button:hover,
+.cinecrew-player__button:focus-visible,
+.cinecrew-player__button.is-active {
+  outline: none;
+  border-color: var(--cinecrew-accent, #00d4ff);
+}
+
+.cinecrew-player__button:disabled {
+  opacity: .45;
+  cursor: not-allowed;
+}
+
+.cinecrew-player__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1em;
+  font-size: 18px;
+}
+
+.cinecrew-player__status,
+.cinecrew-player__error {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  text-align: center;
+}
+
+.cinecrew-player__audio-card {
+  position: absolute;
+  inset: 10%;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  padding: 24px;
+  border: 1px solid;
+  border-radius: 20px;
+  text-align: center;
+  box-shadow: 0 18px 60px rgba(0, 0, 0, .32);
+}
+
+.cinecrew-player__audio-poster {
+  width: min(30vw, 160px);
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.cinecrew-player__audio-wave {
+  letter-spacing: .28em;
+  font-size: 1.25rem;
+}
+
+.cinecrew-player__audio-card strong {
+  max-width: 100%;
+  font-size: clamp(1rem, 2vw, 1.4rem);
+}
+
+.cinecrew-player__audio-card button {
+  border: 1px solid;
+  border-radius: 999px;
+  background: transparent;
+  padding: 10px 18px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.cinecrew-player__status {
+  pointer-events: none;
+  background: rgba(0,0,0,.24);
+}
+
+.cinecrew-player__spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid rgba(255,255,255,.25);
+  border-radius: 50%;
+  animation: cinecrew-spin .75s linear infinite;
+}
+
+.cinecrew-player__error {
+  flex-direction: column;
+  padding: 24px;
+}
+
+.cinecrew-player__error strong {
+  font-size: 1.1em;
+}
+
+.cinecrew-player__menu-wrap {
+  position: relative;
+}
+
+.cinecrew-player__menu {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 8px);
+  display: flex;
+  min-width: 150px;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid rgba(255,255,255,.16);
+  border-radius: 10px;
+  box-shadow: 0 8px 30px rgba(0,0,0,.4);
+}
+
+.cinecrew-player__menu button,
+.cinecrew-player__panel-close {
+  padding: 10px 13px;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+}
+
+.cinecrew-player__panel-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  max-height: 100%;
+  font: inherit;
+}
+
+.cinecrew-player__panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, .14);
+}
+
+.cinecrew-player__panel-heading button,
+.cinecrew-player__chat-form button {
+  border: 0;
+  border-radius: 8px;
+  padding: 8px 12px;
+  color: inherit;
+  background: rgba(255, 255, 255, .12);
+  cursor: pointer;
+}
+
+.cinecrew-player__panel-list {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+  overflow: auto;
+}
+
+.cinecrew-player__chat-message,
+.cinecrew-player__epg-item {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 9px 10px;
+  border-radius: 9px;
+  background: rgba(255, 255, 255, .06);
+}
+
+.cinecrew-player__chat-message strong,
+.cinecrew-player__epg-item strong {
+  color: var(--cinecrew-accent);
+}
+
+.cinecrew-player__epg-item small,
+.cinecrew-player__panel-state {
+  opacity: .75;
+}
+
+.cinecrew-player__panel-state.is-error {
+  color: #ff647c;
+}
+
+.cinecrew-player__chat-form {
+  display: flex;
+  gap: 8px;
+}
+
+.cinecrew-player__chat-form input {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid rgba(255, 255, 255, .16);
+  border-radius: 20px;
+  padding: 10px 13px;
+  color: inherit;
+  background: rgba(0, 0, 0, .2);
+  font: inherit;
+}
+
+.cinecrew-player__chat-form button:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.cinecrew-player__rate {
+  max-width: 88px;
+  border: 1px solid rgba(255, 255, 255, .18);
+  border-radius: 8px;
+  padding: 7px 8px;
+  color: var(--cinecrew-text);
+  background: var(--cinecrew-surface);
+}
+
+.cinecrew-player__inline-poster {
+  display: grid;
+  width: 100%;
+  place-items: center;
+  border: 0;
+  border-radius: 14px;
+  overflow: hidden;
+  color: #fff;
+  background: #07111e;
+  font-size: 28px;
+  cursor: pointer;
+}
+
+.cinecrew-player__inline-poster img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cinecrew-player__menu button:hover {
+  background: rgba(255,255,255,.1);
+}
+
+.cinecrew-player__panel {
+  position: absolute;
+  inset: 8% 4% 8% auto;
+  z-index: 6;
+  width: min(380px, 92%);
+  overflow: auto;
+  padding: 18px;
+  border: 1px solid rgba(255,255,255,.14);
+  border-radius: 16px;
+  box-shadow: 0 16px 48px rgba(0,0,0,.45);
+}
+
+.cinecrew-player__panel-close {
+  position: absolute;
+  top: 4px;
+  right: 6px;
+  font-size: 24px;
+}
+
+@keyframes cinecrew-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (hover: none) {
+  .cinecrew-player__controls { opacity: 1; }
+}

package/types/index.d.ts

@@ -0,0 +1,268 @@
+import type * as React from 'react';
+
+export type AspectRatio = 'FIT' | 'FILL' | 'STRETCH' | 'FILL_SCREEN' | string;
+export type PlayerMediaType = 'live' | 'channel' | 'movie' | 'series' | string;
+
+export interface PlayerSource {
+  /** Local media or a URL the target platform can play. */
+  uri?: string;
+  /** Alias for `uri`. */
+  url?: string;
+  title?: string;
+  poster?: string;
+  posterUrl?: string;
+  type?: string;
+  mimeType?: string;
+  mediaType?: PlayerMediaType;
+  isLive?: boolean;
+  id?: string | number;
+  streamId?: string | number;
+  mediaId?: string | number;
+  [key: string]: unknown;
+}
+
+export interface PlayerControls {
+  back?: boolean;
+  playPause?: boolean;
+  restart?: boolean;
+  lock?: boolean;
+  mute?: boolean;
+  aspectRatio?: boolean;
+  videoOnly?: boolean;
+  audioOnly?: boolean;
+  audioTracks?: boolean;
+  playbackRate?: boolean;
+  minimize?: boolean;
+  fullscreen?: boolean;
+  recording?: boolean;
+  liveChat?: boolean;
+  epg?: boolean;
+  seek?: boolean;
+}
+
+export interface PlayerApi {
+  play(): void;
+  pause(): void;
+  togglePlayPause(nextPlaying?: boolean): void;
+  restart(): void;
+  setMuted(muted: boolean): void;
+  toggleMute(): void;
+  setAspectRatio(ratio: AspectRatio): void;
+  setAudioTrack(trackId: string | number): void;
+  setAudioOnly(enabled: boolean): void;
+  setVideoOnly(enabled: boolean): void;
+  seekTo(seconds: number): void;
+  seekBy(seconds: number): void;
+  back(): void;
+  minimize(): void;
+  setPlaybackRate(rate: number): void;
+  getVideoElement(): unknown | null;
+  getAudioTracks(): AudioTrack[];
+  enterFullscreen?(): void | Promise<void>;
+  exitFullscreen?(): void | Promise<void>;
+}
+
+export interface AudioTrack {
+  id: string | number;
+  name?: string;
+  language?: string;
+  selected?: boolean;
+  enabled?: boolean;
+  nativeTrack?: unknown;
+}
+
+export interface PlayerActionContext {
+  player: PlayerApi | null;
+  video?: unknown | null;
+}
+
+export type PlayerAction = (payload?: Record<string, unknown>, context?: PlayerActionContext) => unknown;
+
+export interface PlayerActions {
+  onBack?: PlayerAction;
+  onPlayPause?: PlayerAction;
+  onSeek?: PlayerAction;
+  onRestart?: PlayerAction;
+  onLock?: PlayerAction;
+  onMute?: PlayerAction;
+  onAspectRatioChange?: PlayerAction;
+  onVideoOnlyChange?: PlayerAction;
+  onAudioOnlyChange?: PlayerAction;
+  onAudioTrackChange?: PlayerAction;
+  onMinimize?: PlayerAction;
+  onPlaybackRateChange?: PlayerAction;
+  onFullscreen?: PlayerAction;
+  onRecordingStart?: PlayerAction;
+  onRecordingPause?: PlayerAction;
+  onRecordingResume?: PlayerAction;
+  onRecordingStop?: PlayerAction;
+  onLiveChatOpen?: PlayerAction;
+  onEpgOpen?: PlayerAction;
+  onDiagnosticsOpen?: PlayerAction;
+}
+
+export interface PlayerTheme {
+  /** Shared accent color for controls and active states. */
+  accentColor?: string;
+  backgroundColor?: string;
+  controlBackground?: string;
+  controlColor?: string;
+  surfaceColor?: string;
+  errorColor?: string;
+  borderRadius?: number;
+  /** React Native palette shape accepted by the native controls. */
+  colors?: Record<string, string | number | undefined>;
+  [key: string]: unknown;
+}
+
+export interface PlayerIconProps {
+  name?: string;
+  size?: number;
+  color?: string;
+  style?: unknown;
+}
+
+export type PlayerIcon = string | React.ReactNode | React.ComponentType<PlayerIconProps>;
+export type PlayerIcons = Partial<Record<
+  | 'play' | 'pause' | 'restart' | 'lock' | 'unlock' | 'mute' | 'unmute'
+  | 'aspectRatio' | 'videoOnly' | 'audio' | 'minimize' | 'back'
+  | 'recording' | 'stop' | 'liveChat' | 'epg' | 'fullscreen' | 'close'
+  | string,
+  PlayerIcon
+>>;
+
+export interface ChatMessage {
+  id?: string | number;
+  username?: string;
+  comment?: string;
+  message?: string;
+  createdAt?: string | number;
+  [key: string]: unknown;
+}
+
+export interface EpgListing {
+  title?: string;
+  description?: string;
+  startMs: number;
+  endMs: number;
+  [key: string]: unknown;
+}
+
+export interface PlayerIntegrations {
+  user?: { id?: string | number; username?: string };
+  getUser?: () => Promise<{ id?: string | number; username?: string } | null>;
+  liveChat?: {
+    loadMessages?: (args: { channelId: string; limit: number }) => Promise<ChatMessage[]>;
+    sendMessage?: (args: { channelId: string; userId?: string | number; username?: string; comment: string }) => Promise<unknown>;
+    pollIntervalMs?: number;
+    render?: (context: { title: string; source: PlayerSource; onClose: () => void }) => React.ReactNode;
+  };
+  epg?: {
+    loadListings?: (args: { channelId: string | number; limit: number }) => Promise<EpgListing[]>;
+    limit?: number;
+    render?: (context: { title: string; source: PlayerSource; onClose: () => void }) => React.ReactNode;
+  };
+  recording?: {
+    start?: (args: { getVideoElement: () => unknown | null; streamUrl: string; title?: string }) => Promise<unknown>;
+    pause?: () => Promise<unknown>;
+    resume?: () => Promise<unknown>;
+    stop?: () => Promise<{ filename?: string } | unknown>;
+    isActive?: () => boolean;
+    subscribe?: (listener: (state: { status: string; elapsedMs: number }) => void) => (() => void) | void;
+  };
+  onEvent?: (event: { name: string; payload?: Record<string, unknown> }) => unknown;
+  onProgress?: (progress: Record<string, unknown>) => unknown;
+  onPresence?: (presence: { online: boolean; title: string; mediaType: string; mediaId?: string | number | null }) => unknown;
+  onSleepTimerExpired?: (callback: () => void) => (() => void) | void;
+}
+
+export interface CineCrewPlayerProps {
+  source?: string | PlayerSource;
+  /** Alias for `source`. */
+  url?: string;
+  title?: string;
+  poster?: string;
+  posterUrl?: string;
+  mediaType?: PlayerMediaType;
+  isLive?: boolean;
+  visible?: boolean;
+  autoPlay?: boolean;
+  /** Initial paused state; changes are observed by the web player and on source changes natively. */
+  paused?: boolean;
+  muted?: boolean;
+  audioOnly?: boolean;
+  /** Volume is normalized from 0 (silent) to 1 (full). */
+  volume?: number;
+  playbackRate?: number;
+  controls?: PlayerControls;
+  features?: { diagnostics?: boolean; [key: string]: boolean | undefined };
+  actions?: PlayerActions;
+  integrations?: PlayerIntegrations;
+  theme?: PlayerTheme;
+  icons?: PlayerIcons;
+  style?: unknown;
+  className?: string;
+  videoOnly?: boolean;
+  /** Optional resolver for share pages or other non-media links. */
+  resolveSource?: (source: PlayerSource, context: { platform: 'web' | 'native' | 'electron' }) => PlayerSource | string | Promise<PlayerSource | string>;
+  audioTracks?: AudioTrack[];
+  selectedAudioTrack?: string | number;
+  resumePosition?: number;
+  durationSecs?: number;
+  mediaId?: string | number;
+  episodeLabel?: string;
+  season?: number;
+  episode?: number;
+  genre?: string;
+  categoryName?: string;
+  playlist?: Array<Record<string, unknown>>;
+  shuffle?: boolean;
+  onClose?: () => void;
+  onBack?: () => void;
+  onMinimize?: () => void;
+  onFullscreen?: (state: { isFullscreen: boolean }) => void;
+  onPlayerHostRef?: (node: unknown | null) => void;
+  onInlinePreviewWheel?: (deltaY: number) => void;
+  inlinePreview?: boolean;
+  inlinePreviewRect?: { x: number; y: number; width: number; height: number };
+  onPromotePreview?: () => void;
+  initialShowLiveChat?: boolean;
+  liveChatNonce?: number;
+  onReady?: (playerOrEvent: unknown) => void;
+  onProgress?: (event: unknown) => void;
+  onPlaying?: (event: unknown) => void;
+  onBuffering?: (buffering: boolean) => void;
+  onError?: (error: Error | Record<string, unknown>) => void;
+  onEnded?: () => void;
+  onPlaybackRoute?: (url: string) => void;
+  onNextEpisode?: (episode: Record<string, unknown>) => void;
+  onCwRefresh?: () => void;
+  renderLiveChat?: PlayerIntegrations['liveChat'] extends infer T ? T extends { render?: infer R } ? R : never : never;
+  renderEpg?: PlayerIntegrations['epg'] extends infer T ? T extends { render?: infer R } ? R : never : never;
+}
+
+export interface InlineLivePlayerProps {
+  source?: string | PlayerSource;
+  url?: string;
+  title?: string;
+  height?: number;
+  poster?: string;
+  posterChannel?: Record<string, unknown>;
+  paused?: boolean;
+  isActive?: boolean;
+  onActivate?: () => void;
+  onFullscreen?: () => void;
+  controls?: Pick<PlayerControls, 'playPause' | 'mute' | 'fullscreen'>;
+  actions?: Pick<PlayerActions, 'onPlayPause' | 'onMute' | 'onFullscreen'>;
+  theme?: PlayerTheme;
+  icons?: PlayerIcons;
+  style?: unknown;
+  initialMuted?: boolean;
+  onError?: (error: Error | Record<string, unknown>) => void;
+  onPlaying?: (event: unknown) => void;
+}
+
+export const CineCrewPlayer: React.ForwardRefExoticComponent<CineCrewPlayerProps & React.RefAttributes<PlayerApi>>;
+export const InlineLivePlayer: React.MemoExoticComponent<React.FC<InlineLivePlayerProps>>;
+export const PlayerCustomizationProvider: React.FC<{ icons?: PlayerIcons; theme?: PlayerTheme; children?: React.ReactNode }>;
+export default CineCrewPlayer;