@cinecrew/cinecrew-player 0.1.1 → 0.1.3

package/src/web/styles.css

@@ -1,5 +1,6 @@
 .cinecrew-player {
   position: relative;
+  container-type: size;
   display: flex;
   width: 100%;
   min-width: 0;
@@ -27,6 +28,11 @@
   background: #000;
 }
 
+.cinecrew-player__video,
+.cinecrew-player__youtube {
+  transition: width 180ms ease, height 180ms ease, top 180ms ease, left 180ms ease, transform 180ms ease;
+}
+
 .cinecrew-player__shade {
   position: absolute;
   inset: 0;
@@ -35,10 +41,10 @@
 
 .cinecrew-player__title {
   position: absolute;
-  top: 18px;
+  top: 62px;
   left: 20px;
+  right: 20px;
   z-index: 2;
-  max-width: min(65%, 680px);
   overflow: hidden;
   font-weight: 700;
   text-overflow: ellipsis;
@@ -50,6 +56,7 @@
   position: absolute;
   inset: 0;
   z-index: 3;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -73,12 +80,48 @@
 }
 
 .cinecrew-player__top-controls,
+.cinecrew-player__bottom-actions,
+.cinecrew-player__top-left-actions,
+.cinecrew-player__top-right-actions,
+.cinecrew-player__bottom-left-actions,
+.cinecrew-player__bottom-right-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cinecrew-player__top-controls {
+  width: 100%;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.cinecrew-player__top-left-actions,
+.cinecrew-player__top-right-actions {
+  min-width: 0;
+}
+
+.cinecrew-player__top-right-actions {
+  justify-content: flex-end;
+}
+
 .cinecrew-player__bottom-controls {
+  width: 100%;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.cinecrew-player__bottom-actions {
+  width: 100%;
+  justify-content: space-between;
   flex-wrap: wrap;
 }
 
-.cinecrew-player__bottom-controls {
-  justify-content: flex-end;
+.cinecrew-player__bottom-left-actions,
+.cinecrew-player__bottom-right-actions {
+  min-width: 0;
+  flex-wrap: wrap;
 }
 
 .cinecrew-player__center-controls {
@@ -86,14 +129,25 @@
 }
 
 .cinecrew-player__seek {
-  flex: 1 1 100%;
+  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: pan-y;
+  cursor: ew-resize;
 }
 
 .cinecrew-player__button {
@@ -146,8 +200,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;
@@ -155,7 +210,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);
 }
@@ -167,6 +222,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;
@@ -225,6 +297,25 @@
   box-shadow: 0 8px 30px rgba(0,0,0,.4);
 }
 
+.cinecrew-player__menu-wrap--aspect .cinecrew-player__menu {
+  right: auto;
+  left: 0;
+  box-sizing: border-box;
+  width: min(180px, calc(100vw - 32px));
+  min-width: 0;
+  max-width: calc(100vw - 32px);
+  max-height: min(220px, calc(100vh - 32px));
+  overflow-y: auto;
+}
+
+@supports (width: 1cqw) and (height: 1cqh) {
+  .cinecrew-player__menu-wrap--aspect .cinecrew-player__menu {
+    width: min(180px, max(0px, calc(100cqw - 28px)));
+    max-width: max(0px, calc(100cqw - 28px));
+    max-height: min(220px, max(80px, calc(100cqh - 28px)));
+  }
+}
+
 .cinecrew-player__menu button,
 .cinecrew-player__panel-close {
   padding: 10px 13px;
@@ -236,9 +327,126 @@
   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: 14px;
+  min-width: 0;
+  overflow: auto;
+}
+
+.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__diagnostics-heading > div {
+  display: flex;
+  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-icon {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  grid-row: span 2;
+  place-items: center;
+  border-radius: 9px;
+  background: rgba(255,255,255,.08);
+}
+
+.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 {
   display: flex;
   flex-direction: column;
+  height: 100%;
   gap: 10px;
   min-height: 0;
   max-height: 100%;
@@ -283,6 +491,20 @@
   background: rgba(255, 255, 255, .06);
 }
 
+.cinecrew-player__chat-message header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.cinecrew-player__chat-message time {
+  flex: 0 0 auto;
+  opacity: .65;
+  font-size: .78em;
+  font-variant-numeric: tabular-nums;
+}
+
 .cinecrew-player__chat-message strong,
 .cinecrew-player__epg-item strong {
   color: var(--cinecrew-accent);
@@ -298,26 +520,206 @@
 }
 
 .cinecrew-player__chat-form {
+  position: relative;
+  padding-top: 10px;
+  border-top: 1px solid rgba(255,255,255,.12);
+}
+
+.cinecrew-player__chat-composer {
+  position: relative;
   display: flex;
-  gap: 8px;
+  align-items: center;
+  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-form input {
+.cinecrew-player__chat-composer:focus-within {
+  border-color: var(--cinecrew-accent);
+  background: rgba(12, 20, 32, .88);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cinecrew-accent) 18%, transparent);
+}
+
+.cinecrew-player__chat-composer input {
   flex: 1;
   min-width: 0;
-  border: 1px solid rgba(255, 255, 255, .16);
-  border-radius: 20px;
-  padding: 10px 13px;
+  border: 0;
+  outline: 0;
+  padding: 10px 4px;
   color: inherit;
-  background: rgba(0, 0, 0, .2);
+  background: transparent;
+  font: inherit;
+}
+
+.cinecrew-player__chat-composer button {
+  display: inline-grid;
+  min-width: 34px;
+  min-height: 34px;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  color: var(--cinecrew-accent);
+  background: rgba(255, 255, 255, .08);
+  cursor: pointer;
   font: inherit;
+  transition: background-color .16s ease, transform .16s ease;
 }
 
-.cinecrew-player__chat-form button:disabled {
+.cinecrew-player__chat-composer button:hover:not(:disabled) {
+  background: rgba(255, 255, 255, .15);
+}
+
+.cinecrew-player__chat-composer button:active:not(:disabled) {
+  transform: scale(.96);
+}
+
+.cinecrew-player__chat-composer button[type="submit"] {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;
+  padding: 0;
+  border-radius: 12px;
+  color: #07111e;
+  background: var(--cinecrew-accent);
+  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);
+}
+
+.cinecrew-player__chat-composer button:disabled {
   opacity: .5;
   cursor: not-allowed;
 }
 
+.cinecrew-player__emoji-picker {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 12px);
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: min(340px, calc(100vw - 32px));
+  max-height: min(390px, 65vh);
+  padding: 10px;
+  border: 1px solid rgba(255, 255, 255, .18);
+  border-radius: 14px;
+  background: var(--cinecrew-surface);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, .42);
+}
+
+.cinecrew-player__chat-composer .cinecrew-player__emoji-search {
+  flex: 0 0 auto;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid rgba(255, 255, 255, .16);
+  border-radius: 10px;
+  outline: 0;
+  padding: 9px 11px;
+  color: inherit;
+  background: rgba(0, 0, 0, .2);
+  font: inherit;
+  font-size: 13px;
+}
+
+.cinecrew-player__chat-composer .cinecrew-player__emoji-search:focus {
+  border-color: var(--cinecrew-accent);
+}
+
+.cinecrew-player__emoji-categories {
+  display: grid;
+  flex: 0 0 auto;
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+  gap: 2px;
+}
+
+.cinecrew-player__emoji-picker button,
+.cinecrew-player__load-more {
+  border: 1px solid rgba(255, 255, 255, .14);
+  border-radius: 9px;
+  color: inherit;
+  background: rgba(255, 255, 255, .07);
+  cursor: pointer;
+  font: inherit;
+}
+
+.cinecrew-player__chat-composer .cinecrew-player__emoji-categories button {
+  display: grid;
+  min-width: 0;
+  min-height: 34px;
+  place-items: center;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 0;
+  background: transparent;
+  font-size: 19px;
+}
+
+.cinecrew-player__chat-composer .cinecrew-player__emoji-categories button:hover,
+.cinecrew-player__chat-composer .cinecrew-player__emoji-categories button.is-active {
+  border-color: var(--cinecrew-accent);
+  background: color-mix(in srgb, var(--cinecrew-accent) 14%, transparent);
+}
+
+.cinecrew-player__emoji-grid {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  align-content: start;
+  gap: 3px;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+.cinecrew-player__chat-composer .cinecrew-player__emoji-grid button {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  min-height: 34px;
+  place-items: center;
+  border: 0;
+  border-radius: 8px;
+  padding: 0;
+  background: transparent;
+  font-size: 19px;
+}
+
+.cinecrew-player__chat-composer .cinecrew-player__emoji-grid button:hover {
+  background: rgba(255, 255, 255, .12);
+}
+
+.cinecrew-player__chat-composer .cinecrew-player__emoji-grid .cinecrew-player__emoji-load-more {
+  grid-column: 1 / -1;
+  min-height: 34px;
+  border: 1px solid rgba(255, 255, 255, .14);
+  color: var(--cinecrew-accent);
+  background: rgba(255, 255, 255, .06);
+  font-size: 12px;
+}
+
+.cinecrew-player__load-more {
+  flex: 0 0 auto;
+  align-self: center;
+  padding: 8px 14px;
+  color: var(--cinecrew-accent);
+}
+
+.cinecrew-player__load-more:disabled {
+  opacity: .6;
+  cursor: progress;
+}
+
 .cinecrew-player__rate {
   max-width: 88px;
   border: 1px solid rgba(255, 255, 255, .18);
@@ -352,14 +754,39 @@
 
 .cinecrew-player__panel {
   position: absolute;
-  inset: 8% 4% 8% auto;
+  inset: 0 0 0 auto;
   z-index: 6;
-  width: min(380px, 92%);
+  box-sizing: border-box;
+  width: min(420px, 92%);
+  max-width: 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);
+  padding: 16px;
+  border-left: 1px solid rgba(255,255,255,.2);
+  border-radius: 0;
+  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: 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--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 {
@@ -373,6 +800,35 @@
   to { transform: rotate(360deg); }
 }
 
+@keyframes cinecrew-drawer-in {
+  from { opacity: 0; transform: translateX(18px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
 @media (hover: none) {
   .cinecrew-player__controls { opacity: 1; }
 }
+
+@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-right-actions {
+    max-width: calc(100% - 128px);
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+  .cinecrew-player__top-left-actions .cinecrew-player__button,
+  .cinecrew-player__top-right-actions .cinecrew-player__button,
+  .cinecrew-player__bottom-actions .cinecrew-player__button {
+    min-width: 34px;
+    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

@@ -32,14 +32,16 @@ export interface PlayerControls {
   audioOnly?: boolean;
   audioTracks?: boolean;
   playbackRate?: boolean;
-  minimize?: boolean;
   fullscreen?: boolean;
   recording?: boolean;
   liveChat?: boolean;
   epg?: boolean;
+  diagnostics?: boolean;
   seek?: boolean;
 }
 
+export type PlayerDrawerMode = 'overlay' | 'resize';
+
 export interface PlayerApi {
   play(): void;
   pause(): void;
@@ -54,7 +56,6 @@ export interface PlayerApi {
   seekTo(seconds: number): void;
   seekBy(seconds: number): void;
   back(): void;
-  minimize(): void;
   setPlaybackRate(rate: number): void;
   getVideoElement(): unknown | null;
   getAudioTracks(): AudioTrack[];
@@ -89,7 +90,6 @@ export interface PlayerActions {
   onVideoOnlyChange?: PlayerAction;
   onAudioOnlyChange?: PlayerAction;
   onAudioTrackChange?: PlayerAction;
-  onMinimize?: PlayerAction;
   onPlaybackRateChange?: PlayerAction;
   onFullscreen?: PlayerAction;
   onRecordingStart?: PlayerAction;
@@ -125,8 +125,8 @@ export interface PlayerIconProps {
 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'
+  | 'aspectRatio' | 'videoOnly' | 'audio' | 'back'
+  | 'recording' | 'stop' | 'liveChat' | 'epg' | 'diagnostics' | 'fullscreen' | 'close'
   | string,
   PlayerIcon
 >>;
@@ -137,9 +137,19 @@ export interface ChatMessage {
   comment?: string;
   message?: string;
   createdAt?: string | number;
+  timestamp?: string | number;
   [key: string]: unknown;
 }
 
+export interface ChatMessagePage {
+  messages?: ChatMessage[];
+  items?: ChatMessage[];
+  comments?: ChatMessage[];
+  data?: ChatMessage[];
+  hasMore?: boolean;
+  pagination?: { hasMore?: boolean };
+}
+
 export interface EpgListing {
   title?: string;
   description?: string;
@@ -152,7 +162,7 @@ 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[]>;
+    loadMessages?: (args: { channelId: string; limit: number; offset?: number }) => Promise<ChatMessage[] | ChatMessagePage>;
     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;
@@ -195,6 +205,12 @@ export interface CineCrewPlayerProps {
   volume?: number;
   playbackRate?: number;
   controls?: PlayerControls;
+  /** 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. */
+  messagePageSize?: number;
   features?: { diagnostics?: boolean; [key: string]: boolean | undefined };
   actions?: PlayerActions;
   integrations?: PlayerIntegrations;
@@ -219,7 +235,6 @@ export interface CineCrewPlayerProps {
   shuffle?: boolean;
   onClose?: () => void;
   onBack?: () => void;
-  onMinimize?: () => void;
   onFullscreen?: (state: { isFullscreen: boolean }) => void;
   onPlayerHostRef?: (node: unknown | null) => void;
   onInlinePreviewWheel?: (deltaY: number) => void;