@qxs-bns/components 0.0.92 → 0.0.94

package/types/video-player.theme.d.ts

@@ -0,0 +1,12 @@
+export declare const videoPlayerTheme = "\n  :host {\n    display:block;width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;\n    background:#101416;color:#f5f7f8;container-type:inline-size;\n    font-family:\"PingFang SC\",\"Microsoft YaHei\",system-ui,sans-serif;\n    letter-spacing:0;border-radius:var(--qxs-player-radius,12px);\n    --player-accent:var(--qxs-player-accent,#e60000);\n  }\n  :host(:fullscreen) { border-radius:0; }\n  .media { position:absolute;inset:0;width:100%;height:100%; }\n  .xgplayer { font-family:inherit;background:#101416;color:#f5f7f8; }\n  .xgplayer video { object-fit:contain; }\n  .xgplayer .xgplayer-controls { min-height:48px;padding:0;background:transparent; }\n  .xgplayer .xgplayer-controls::before {\n    content:\"\";position:absolute;inset:auto 0 0;height:120px;pointer-events:none;z-index:-1;\n    background:linear-gradient(180deg,transparent 0%,rgba(7,10,13,.38) 40%,rgba(7,10,13,.9) 100%);\n  }\n  .xgplayer .xg-inner-controls { display:flex;align-items:center;height:44px;bottom:3px;left:12px;right:12px; }\n  .xgplayer .xg-left-grid,.xgplayer .xg-right-grid { display:flex;align-items:center;flex-wrap:nowrap;float:none;height:44px;min-width:0; }\n  .xgplayer .xg-left-grid { flex:1; }\n  .xgplayer .xg-right-grid { flex:none;flex-direction:row;gap:2px; }\n  .xgplayer .xg-center-grid { top:-15px;padding:5px 0; }\n  .xgplayer .xg-inner-controls xg-icon { flex:none;width:44px;height:44px;margin:0; }\n  .xgplayer .xgplayer-icon { display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;color:#f5f7f8; }\n  .xgplayer .xgplayer-icon svg { width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.24)); }\n  .xgplayer .xgplayer-icon:hover { color:#fff; }\n  .xgplayer .xg-inner-controls .xgplayer-time {\n    width:auto;padding:0 6px;white-space:nowrap;font-family:inherit;\n    font-size:12px;font-weight:500;line-height:44px;font-variant-numeric:tabular-nums;\n  }\n  .xgplayer .xgplayer-time span { height:100%;line-height:inherit; }\n  .xgplayer .xgplayer-time .time-duration { color:rgba(245,247,248,.65); }\n  .xgplayer .xgplayer-playbackrate { order:1; }\n  .xgplayer .xgplayer-volume { order:2; }\n  .xgplayer .xgplayer-fullscreen { order:3; }\n  .xgplayer .xgplayer-icon.btn-text { top:0;transform:none; }\n  .xgplayer .xgplayer-icon.btn-text span {\n    display:block;min-width:0;width:44px;height:28px;margin:0;padding:0;\n    border-radius:6px;background:rgba(255,255,255,.09);font-size:12px;font-weight:500;line-height:28px;\n  }\n  .xgplayer .xgplayer-progress-outer { height:3px;border-radius:4px; }\n  .xgplayer .xgplayer-progress.active .xgplayer-progress-outer { height:4px;margin-bottom:0; }\n  .xgplayer .xgplayer-progress-played,.xgplayer .xg-mini-progress xg-mini-progress-played,.xgplayer .xgplayer-drag { background:var(--player-accent); }\n  .xgplayer .xgplayer-progress-inner { background:rgba(255,255,255,.2); }\n  .xgplayer .xgplayer-progress-cache { background:rgba(255,255,255,.38); }\n  .xgplayer .xgplayer-progress-btn,.xgplayer .xgplayer-progress-btn.active {\n    width:10px;height:10px;border:0;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.15);\n  }\n  .xgplayer .xgplayer-progress-btn::before { width:6px;height:6px;background:#fff;box-shadow:none; }\n  .xgplayer .xg-options-list {\n    width:96px;max-height:min(244px,calc(56.25cqw - 65px));box-sizing:border-box;\n    padding:4px;border:1px solid rgba(255,255,255,.12);border-radius:10px;\n    background:rgba(20,25,29,.96);color:#f5f7f8;opacity:1;\n    box-shadow:0 8px 28px rgba(0,0,0,.3);\n    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;\n    scrollbar-color:rgba(255,255,255,.25) transparent;\n  }\n  .xgplayer .xg-options-list li {\n    box-sizing:border-box;min-height:32px;line-height:32px;margin:0;padding:0;\n    border-radius:6px;color:#dce1e5;font-size:13px;\n  }\n  .xgplayer .xg-options-list li:first-child,.xgplayer .xg-options-list li:last-child { margin:0; }\n  .xgplayer .xg-options-list li:hover { background:rgba(255,255,255,.08);color:#fff; }\n  .xgplayer .xg-options-list li.selected { background:rgba(255,255,255,.1);color:var(--player-accent);font-weight:600; }\n  .xgplayer .xgplayer-slider { border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(20,25,29,.96); }\n  .xgplayer .xgplayer-value-label { border-radius:8px 8px 0 0;background:rgba(20,25,29,.96); }\n  .xgplayer .xg-tips { padding:5px 9px;border-radius:6px;background:rgba(20,25,29,.96);font-size:12px; }\n  .xgplayer .xgplayer-start { width:64px;height:64px; }\n  .xgplayer xg-start-inner {\n    display:flex;align-items:center;justify-content:center;box-sizing:border-box;\n    border:1px solid rgba(255,255,255,.26);border-radius:50%;\n    background:rgba(13,19,23,.72);box-shadow:0 8px 32px rgba(0,0,0,.16);\n  }\n  .xgplayer .xgplayer-start svg { width:28px;height:28px;color:#fff; }\n  .xgplayer.xgplayer-playing .xgplayer-start,.media[data-blocked] .xgplayer-start { display:none; }\n  button.fallback {\n    position:absolute;z-index:10000;left:50%;bottom:24px;transform:translateX(-50%);\n    width:140px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:22px;\n    background:#f5f7f8;color:#101416;font:600 14px/22px \"PingFang SC\",\"Microsoft YaHei\",system-ui,sans-serif;cursor:pointer;\n  }\n  button.fallback:focus-visible { outline:2px solid var(--player-accent);outline-offset:4px; }\n  button[hidden] { display:none; }\n  @container (max-width:360px) {\n    .xgplayer .xg-inner-controls { left:6px;right:6px; }\n    .xgplayer .xg-right-grid { gap:0; }\n    .xgplayer .xg-inner-controls .xgplayer-time { padding:0 2px;font-size:11px; }\n    .xgplayer .xgplayer-start { width:52px;height:52px; }\n  }\n  @container (max-width:300px) {\n    .xgplayer .xgplayer-time .time-duration,.xgplayer .xgplayer-time .time-separator { display:none; }\n    .xgplayer .xg-options-list.active {\n      display:flex;width:222px;max-width:calc(100cqw - 4px);height:46px;max-height:none;\n      padding:0;bottom:calc(100% + 4px);\n    }\n    .xgplayer .xg-options-list li { flex:1;min-width:0;min-height:44px;line-height:44px;font-size:11px; }\n    .xgplayer .xgplayer-slider {\n      height: min(92px, calc(56.25cqw - 64px));\n    }\n    .xgplayer .xgplayer-bar {\n      height: calc(100% - 16px);\n    }\n    .xgplayer .xgplayer-drag {\n      max-height: 100%;\n    }\n  }\n  @media (prefers-reduced-motion:reduce) {\n    .xgplayer .xgplayer-controls,.xgplayer .xgplayer-progress-inner { transition:none; }\n    .xgplayer .xgplayer-start.interact xg-start-inner { animation:none; }\n  }\n";
+export declare const videoPlayerIcons: {
+    play: string;
+    pause: string;
+    startPlay: string;
+    startPause: string;
+    volumeSmall: string;
+    volumeLarge: string;
+    volumeMuted: string;
+    fullscreen: string;
+    exitFullscreen: string;
+};

package/types/video-player.types.d.ts

@@ -0,0 +1,49 @@
+export interface PlayerSource {
+    mode: 'live' | 'vod';
+    format: 'hls' | 'mp4';
+    url: string;
+    revision: number;
+}
+export interface PlayerOptions {
+    poster?: string;
+    autoplay?: boolean;
+    muted?: boolean;
+    controls?: boolean;
+}
+export interface PlayerSnapshot {
+    revision: number;
+    positionMs: number | null;
+    durationMs: number | null;
+    rate: number;
+}
+export interface PlayerError {
+    kind: 'media' | 'network' | 'autoplay' | 'unsupported' | 'unknown';
+    code: string;
+    httpStatus?: number;
+}
+export interface PlayerEventMap {
+    ready: PlayerSnapshot;
+    playing: PlayerSnapshot;
+    pause: PlayerSnapshot;
+    waiting: PlayerSnapshot;
+    ended: PlayerSnapshot;
+    timeupdate: PlayerSnapshot;
+    seeking: PlayerSnapshot & {
+        fromMs: number | null;
+        toMs: number | null;
+    };
+    seeked: PlayerSnapshot;
+    ratechange: PlayerSnapshot;
+    volumechange: {
+        revision: number;
+        muted: boolean;
+        volume: number;
+    };
+    fullscreenchange: {
+        revision: number;
+        fullscreen: boolean;
+    };
+    error: PlayerSnapshot & {
+        error: PlayerError;
+    };
+}