@cinecrew/cinecrew-player 0.1.2 → 0.1.4

package/src/web/styles.css

@@ -30,7 +30,7 @@
 
 .cinecrew-player__video,
 .cinecrew-player__youtube {
-  transition: width 180ms ease, height 180ms ease, top 180ms ease;
+  transition: width 180ms ease, height 180ms ease, top 180ms ease, left 180ms ease, transform 180ms ease;
 }
 
 .cinecrew-player__shade {
@@ -40,10 +40,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;
@@ -70,6 +69,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 +110,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,18 +138,76 @@
   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%;
+  align-items: center;
   font-variant-numeric: tabular-nums;
   text-shadow: 0 1px 3px #000;
 }
 
+.cinecrew-player__seek > span {
+  min-width: 3.4em;
+}
+
+.cinecrew-player__seek > span:last-child { text-align: right; }
+
 .cinecrew-player__seek input {
   flex: 1;
   min-width: 50px;
   min-height: 24px;
-  touch-action: auto;
+  touch-action: pan-y;
   cursor: ew-resize;
 }
 
@@ -193,8 +261,9 @@
 
 .cinecrew-player__audio-card {
   position: absolute;
-  inset: 10%;
+  inset: 0;
   z-index: 5;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -202,7 +271,7 @@
   gap: 18px;
   padding: 24px;
   border: 1px solid;
-  border-radius: 20px;
+  border-radius: inherit;
   text-align: center;
   box-shadow: 0 18px 60px rgba(0, 0, 0, .32);
 }
@@ -214,6 +283,23 @@
   border-radius: 50%;
 }
 
+.cinecrew-player__audio-placeholder {
+  display: grid;
+  width: min(30vw, 160px);
+  aspect-ratio: 1;
+  place-items: center;
+  border: 2px solid var(--cinecrew-accent, #00d4ff);
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, rgba(0, 212, 255, .28), transparent 58%), linear-gradient(145deg, #142b49, #081321 72%);
+  box-shadow: 0 0 28px rgba(0, 212, 255, .2), inset 0 0 22px rgba(0, 212, 255, .12);
+}
+
+.cinecrew-player__audio-placeholder .cinecrew-player__icon {
+  width: 42px;
+  height: 42px;
+  font-size: 42px;
+}
+
 .cinecrew-player__audio-wave {
   letter-spacing: .28em;
   font-size: 1.25rem;
@@ -302,36 +388,121 @@
   font: inherit;
 }
 
+.cinecrew-player__menu-empty {
+  padding: 10px 13px;
+  color: var(--cinecrew-text, #fff);
+  white-space: nowrap;
+}
+
 .cinecrew-player__menu-wrap--aspect .cinecrew-player__menu button {
   padding-block: 6px;
 }
 
 .cinecrew-player__diagnostics {
   display: flex;
+  box-sizing: border-box;
+  height: 100%;
   flex-direction: column;
-  gap: 10px;
-  min-width: 220px;
+  gap: 14px;
+  min-width: 0;
+  overflow: auto;
 }
 
-.cinecrew-player__diagnostics > strong {
-  padding-bottom: 8px;
+.cinecrew-player__diagnostics-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding-bottom: 12px;
   border-bottom: 1px solid rgba(255, 255, 255, .14);
 }
 
-.cinecrew-player__diagnostic-row {
+.cinecrew-player__diagnostics-heading > div {
   display: flex;
-  justify-content: space-between;
-  gap: 16px;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.cinecrew-player__diagnostics-heading strong { font-size: 1.05rem; }
+.cinecrew-player__diagnostics-heading > div > span { opacity: .7; overflow-wrap: anywhere; }
+
+.cinecrew-player__diagnostics-close {
+  display: grid;
+  flex: 0 0 36px;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border: 1px solid rgba(255,255,255,.2);
+  border-radius: 50%;
+  color: inherit;
+  background: rgba(255,255,255,.1);
+  cursor: pointer;
+}
+
+.cinecrew-player__diagnostics-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  align-self: flex-start;
+  padding: 6px 10px;
+  border: 1px solid rgba(255,255,255,.15);
+  border-radius: 999px;
+  background: rgba(255,255,255,.07);
+  font-size: .86em;
+}
+
+.cinecrew-player__status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #9ba9bb;
+  box-shadow: 0 0 10px currentColor;
+}
+
+.cinecrew-player__status-dot.is-playing { color: #42d392; background: currentColor; }
+.cinecrew-player__status-dot.is-buffering { color: #ffca58; background: currentColor; }
+.cinecrew-player__status-dot.is-error { color: #ff647c; background: currentColor; }
+
+.cinecrew-player__diagnostic-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 9px;
+}
+
+.cinecrew-player__diagnostic-card {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: 32px minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  align-items: center;
+  column-gap: 9px;
+  row-gap: 3px;
+  padding: 10px;
+  border: 1px solid rgba(255,255,255,.14);
+  border-radius: 12px;
+  background: rgba(255,255,255,.08);
   font-variant-numeric: tabular-nums;
 }
 
-.cinecrew-player__diagnostic-row span:first-child {
-  opacity: .72;
+.cinecrew-player__diagnostic-icon {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  grid-row: span 2;
+  place-items: center;
+  border-radius: 9px;
+  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-row span:last-child {
-  text-align: right;
-  overflow-wrap: anywhere;
+.cinecrew-player__diagnostic-icon .cinecrew-player__icon { width: 18px; height: 18px; }
+.cinecrew-player__diagnostic-label { overflow: hidden; opacity: .7; font-size: .76em; text-overflow: ellipsis; white-space: nowrap; }
+.cinecrew-player__diagnostic-card strong { overflow-wrap: anywhere; font-size: .9em; }
+.cinecrew-player__diagnostics-note { opacity: .65; line-height: 1.35; }
+
+@media (max-width: 420px) {
+  .cinecrew-player__diagnostic-grid { grid-template-columns: minmax(0, 1fr); }
 }
 
 .cinecrew-player__panel-content {
@@ -370,6 +541,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,
@@ -418,19 +599,21 @@
 
 .cinecrew-player__chat-composer {
   position: relative;
+  container-type: inline-size;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px;
-  border: 1px solid rgba(255, 255, 255, .2);
-  border-radius: 999px;
-  background: rgba(0, 0, 0, .2);
+  gap: 7px;
+  padding: 5px 6px 5px 10px;
+  border: 1px solid rgba(255, 255, 255, .22);
+  border-radius: 14px;
+  background: rgba(12, 20, 32, .72);
+  box-shadow: 0 3px 12px rgba(0,0,0,.12);
   transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
 }
 
 .cinecrew-player__chat-composer:focus-within {
   border-color: var(--cinecrew-accent);
-  background: rgba(0, 0, 0, .28);
+  background: rgba(12, 20, 32, .88);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--cinecrew-accent) 18%, transparent);
 }
 
@@ -439,7 +622,7 @@
   min-width: 0;
   border: 0;
   outline: 0;
-  padding: 8px 10px;
+  padding: 10px 4px;
   color: inherit;
   background: transparent;
   font: inherit;
@@ -468,15 +651,19 @@
 }
 
 .cinecrew-player__chat-composer button[type="submit"] {
-  min-width: auto;
-  padding: 0 14px;
-  border-radius: 999px;
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;
+  padding: 0;
+  border-radius: 12px;
   color: #07111e;
   background: var(--cinecrew-accent);
-  font-weight: 700;
   box-shadow: 0 2px 8px color-mix(in srgb, var(--cinecrew-accent) 24%, transparent);
 }
 
+.cinecrew-player__chat-composer button[type="submit"] .cinecrew-player__icon { width: 19px; height: 19px; }
+
 .cinecrew-player__chat-composer button[type="submit"]:hover:not(:disabled) {
   filter: brightness(1.08);
 }
@@ -488,8 +675,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;
@@ -503,7 +691,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;
@@ -517,7 +729,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);
 }
 
@@ -538,7 +750,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;
@@ -550,8 +762,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);
 }
@@ -568,24 +780,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);
@@ -638,6 +853,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;
@@ -649,15 +870,31 @@
   padding: 16px;
   border-left: 1px solid rgba(255,255,255,.2);
   border-radius: 0;
-  background: rgba(13, 26, 44, .78);
-  backdrop-filter: blur(18px);
+  background: rgba(13, 26, 44, .58);
+  backdrop-filter: blur(10px);
   box-shadow: -12px 0 34px rgba(0,0,0,.34);
   animation: cinecrew-drawer-in 180ms ease-out both;
 }
 
-.cinecrew-player--drawer-resize .cinecrew-player__panel { width: min(420px, 36%); }
+.cinecrew-player--drawer-resize .cinecrew-player__panel {
+  width: calc(100% - var(--cinecrew-media-width, 64%));
+  max-width: none;
+  padding: 14px;
+}
+
+.cinecrew-player__panel.is-resizing { background: rgba(13, 26, 44, .82); }
 
-.cinecrew-player__panel.is-resizing { background: rgba(13, 26, 44, .88); }
+.cinecrew-player--drawer-resize .cinecrew-player__shade,
+.cinecrew-player--drawer-resize .cinecrew-player__controls,
+.cinecrew-player--drawer-resize .cinecrew-player__status,
+.cinecrew-player--drawer-resize .cinecrew-player__error {
+  right: auto;
+  width: var(--cinecrew-media-width, 64%);
+}
+
+.cinecrew-player--drawer-resize .cinecrew-player__title {
+  right: calc(100% - var(--cinecrew-media-width, 64%));
+}
 
 .cinecrew-player__panel-close {
   position: absolute;
@@ -681,9 +918,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;
@@ -695,8 +934,9 @@
     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%); }
+  .cinecrew-player--drawer-resize { --cinecrew-media-width: 52% !important; }
+  .cinecrew-player--drawer-resize .cinecrew-player__panel { width: calc(100% - var(--cinecrew-media-width)); padding: 10px; }
 }

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,6 +80,7 @@ export interface PlayerActionContext {
   video?: unknown | null;
 }
 
+/** Notification invoked after the player's built-in action has executed. */
 export type PlayerAction = (payload?: Record<string, unknown>, context?: PlayerActionContext) => unknown;
 
 export interface PlayerActions {
@@ -209,9 +213,14 @@ export interface CineCrewPlayerProps {
   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;
@@ -236,6 +245,8 @@ export interface CineCrewPlayerProps {
   onClose?: () => void;
   onBack?: () => void;
   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 +256,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;