coda-player 0.0.0-stage → 2.0.2

package/player/coda.player.js

@@ -0,0 +1,452 @@
+import Hls from 'hls.js';
+import { BasePlayer } from './base.player';
+/**
+ * 实现类：负责具体 UI 渲染、控制栏交互、换肤、快捷键与 HLS 切片流式传输支持
+ */
+export class CodaPlayer extends BasePlayer {
+    /**hls对象实例 */
+    hlsInstance = null;
+    /**播放器控制栏DOM元素 */
+    controlsElement;
+    /**播放器中心暂停/播放按钮 */
+    centerPlayBtn;
+    /**控制栏播放按钮 */
+    playBtn;
+    /**控制栏播放进度条 */
+    progressBar;
+    progressFilled;
+    /**视频时间 */
+    timeDisplay;
+    /**进度条时间提示 */
+    timeTooltip;
+    /**音量进度条 */
+    volumeBar;
+    /**音量按钮 */
+    volumeBtn;
+    /**播放倍速按钮 */
+    speedBtn;
+    /**播放倍速菜单 */
+    speedMenu;
+    /**全屏按钮 */
+    fullscreenBtn;
+    /**鼠标是否悬浮在播放器容器上 */
+    isHoveringContainer = false;
+    /**播放器中心暂停/播放按钮显示时间 */
+    centerIconTimer = null;
+    constructor(options) {
+        super(options);
+        this.initSource(options.url);
+        this.initControlUI();
+        this.bindControlEvents();
+        this.bindKeyboardShortcuts();
+    }
+    /**
+     * 初始化视频源
+     * 智能判断视频格式进行视频源初始化：
+     * 1. .m3u8格式启用HLS播放
+     * 2. 其他格式直接使用video原生播放
+     * @param url 视频源地址
+     */
+    initSource(url) {
+        const isHls = url.endsWith('.m3u8') || url.includes('application/vnd.apple.mpegurl');
+        if (isHls) {
+            if (Hls.isSupported()) {
+                this.hlsInstance = new Hls();
+                this.hlsInstance.loadSource(url);
+                this.hlsInstance.attachMedia(this.videoElement);
+            }
+            else if (this.videoElement.canPlayType('application/vnd.apple.mpegurl')) {
+                this.videoElement.src = url;
+            }
+            else {
+                console.error('CodaPlayer: HLS is not supported in this browser.');
+                this.setState('error');
+            }
+        }
+        else {
+            this.videoElement.src = url;
+        }
+    }
+    /**
+     * 初始化完整控制栏 UI 组件
+     */
+    initControlUI() {
+        // 1. 创建并挂载居中播放/暂停按钮 (初始默认隐藏)
+        this.centerPlayBtn = document.createElement('div');
+        this.centerPlayBtn.className = 'coda-center-play-overlay';
+        this.container.appendChild(this.centerPlayBtn);
+        // 2. 创建底部控制栏
+        this.controlsElement = document.createElement('div');
+        this.controlsElement.className = 'coda-player-controls';
+        this.controlsElement.innerHTML = `
+      <div class="coda-progress-container">
+        <div class="coda-time-tooltip">00:00</div>
+        <div class="coda-progress-track">
+          <div class="coda-progress-filled"></div>
+          <input type="range" class="coda-progress-slider" min="0" max="100" value="0" step="0.1" />
+        </div>
+      </div>
+      <div class="coda-controls-bottom">
+        <div class="coda-controls-left">
+          <button class="coda-btn coda-play-btn" title="播放/暂停">▶</button>
+          <div class="coda-volume-wrapper">
+            <button class="coda-btn coda-volume-btn" title="静音切换">🔊</button>
+            <input type="range" class="coda-volume-slider" min="0" max="1" value="${this.videoElement.muted ? 0 : this.videoElement.volume}" step="0.05" />
+          </div>
+          <span class="coda-time-display">00:00 / 00:00</span>
+        </div>
+        <div class="coda-controls-right">
+          <div class="coda-speed-wrapper">
+            <button class="coda-btn coda-speed-btn" title="倍速播放">1.0x</button>
+            <div class="coda-speed-menu">
+              <div data-speed="0.5">0.5x</div>
+              <div data-speed="0.75">0.75x</div>
+              <div data-speed="1.0" class="active">1.0x</div>
+              <div data-speed="1.25">1.25x</div>
+              <div data-speed="1.5">1.5x</div>
+              <div data-speed="2.0">2.0x</div>
+            </div>
+          </div>
+          <button class="coda-btn coda-fullscreen-btn" title="全屏切换">⛶</button>
+        </div>
+      </div>
+    `;
+        /**3. 控制栏元素添加到播放器容器 */
+        this.container.appendChild(this.controlsElement);
+        // 缓存内部 DOM 引用
+        this.playBtn = this.controlsElement.querySelector('.coda-play-btn');
+        this.progressBar = this.controlsElement.querySelector('.coda-progress-slider');
+        this.progressFilled = this.controlsElement.querySelector('.coda-progress-filled');
+        this.timeDisplay = this.controlsElement.querySelector('.coda-time-display');
+        this.timeTooltip = this.controlsElement.querySelector('.coda-time-tooltip');
+        this.volumeBar = this.controlsElement.querySelector('.coda-volume-slider');
+        this.volumeBtn = this.controlsElement.querySelector('.coda-volume-btn');
+        this.speedBtn = this.controlsElement.querySelector('.coda-speed-btn');
+        this.speedMenu = this.controlsElement.querySelector('.coda-speed-menu');
+        this.fullscreenBtn = this.controlsElement.querySelector('.coda-fullscreen-btn');
+    }
+    /**
+     * 中心图标的控制显示
+     * @param icon 图标类型：播放/暂停
+     * @param autoHide 是否自动隐藏图标
+     */
+    showCenterIcon(icon, autoHide) {
+        if (this.centerIconTimer) {
+            window.clearTimeout(this.centerIconTimer);
+            this.centerIconTimer = null;
+        }
+        if (icon === 'play') {
+            this.centerPlayBtn.innerHTML = `
+        <svg viewBox="0 0 24 24" width="50%" height="50%" fill="currentColor" style="display: block; margin-left: 3px;">
+          <path d="M8 5v14l11-7z"/>
+        </svg>
+      `;
+        }
+        else {
+            this.centerPlayBtn.innerHTML = `
+        <svg viewBox="0 0 24 24" width="50%" height="50%" fill="currentColor" style="display: block;">
+          <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
+        </svg>
+      `;
+        }
+        this.centerPlayBtn.setAttribute('data-icon', icon);
+        this.centerPlayBtn.classList.add('visible');
+        if (autoHide) {
+            this.centerIconTimer = window.setTimeout(() => {
+                this.centerPlayBtn.classList.remove('visible');
+                this.centerIconTimer = null;
+            }, 2000);
+        }
+    }
+    /**
+     * 绑定控制栏所有交互逻辑
+     */
+    bindControlEvents() {
+        /**
+         * 播放器暂停/播放
+         */
+        const togglePlay = () => {
+            if (this.videoElement.paused) {
+                this.play();
+            }
+            else {
+                this.pause();
+            }
+        };
+        this.centerPlayBtn.addEventListener('click', togglePlay); //播放器中心图标被点击事件
+        this.playBtn.addEventListener('click', togglePlay); //播放器控制栏播放按图标被点击事件
+        this.videoElement.addEventListener('click', togglePlay); //播放器video元素被点击事件
+        /**
+         * 播放进度条拖动事件
+         */
+        this.progressBar.addEventListener('input', e => {
+            const val = parseFloat(e.target.value);
+            const targetTime = (val / 100) * this.duration;
+            this.seek(targetTime);
+        });
+        /**
+         * 播放进度条鼠标悬停显示时间
+         */
+        const progressTrack = this.controlsElement.querySelector('.coda-progress-track');
+        progressTrack.addEventListener('mousemove', (e) => {
+            const rect = progressTrack.getBoundingClientRect();
+            const offsetX = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+            const percent = offsetX / rect.width;
+            const hoverTime = percent * this.duration;
+            this.timeTooltip.style.left = `${offsetX}px`;
+            this.timeTooltip.textContent = this.formatTime(hoverTime);
+            this.timeTooltip.style.display = 'block';
+        });
+        /**
+         * 播放进度条鼠标移开事件
+         */
+        progressTrack.addEventListener('mouseleave', () => {
+            this.timeTooltip.style.display = 'none';
+        });
+        /**
+         * 视频播放事件更新事件
+         */
+        this.videoElement.addEventListener('timeupdate', () => {
+            this.updateProgressUI();
+        });
+        /**
+         * 音量控制条拖动事件
+         */
+        this.volumeBar.addEventListener('input', e => {
+            const val = parseFloat(e.target.value);
+            this.setVolume(val);
+            if (val > 0 && this.muted)
+                this.setMuted(false);
+        });
+        /**
+         * 音量按钮点击事件
+         */
+        this.volumeBtn.addEventListener('click', () => {
+            this.setMuted(!this.muted);
+        });
+        /**
+         * 倍速按钮点击事件
+         */
+        this.speedBtn.addEventListener('click', e => {
+            e.stopPropagation();
+            const isVisible = this.speedMenu.style.display === 'block';
+            this.speedMenu.style.display = isVisible ? 'none' : 'block';
+        });
+        /**
+         * 点击空白处倍速菜单消失事件
+         */
+        document.addEventListener('click', () => {
+            this.speedMenu.style.display = 'none';
+        });
+        /**
+         * 倍速菜单点击事件
+         */
+        this.speedMenu.querySelectorAll('div').forEach(item => {
+            item.addEventListener('click', e => {
+                const speed = parseFloat(e.target.getAttribute('data-speed') || '1.0');
+                this.setPlaybackRate(speed);
+                this.speedMenu.querySelectorAll('div').forEach(el => el.classList.remove('active'));
+                e.target.classList.add('active');
+                this.speedBtn.textContent = `${speed}x`;
+            });
+        });
+        /**
+         * 全屏按钮点击事件
+         */
+        this.fullscreenBtn.addEventListener('click', () => {
+            this.toggleFullScreen();
+        });
+        /**
+         * 鼠标进入播放器容器显示控制栏事件
+         */
+        this.container.addEventListener('mouseenter', () => {
+            this.isHoveringContainer = true;
+            this.controlsElement.classList.add('show');
+        });
+        /**
+         * 鼠标离开播放器容器隐藏控制栏事件
+         */
+        this.container.addEventListener('mouseleave', () => {
+            this.isHoveringContainer = false;
+            if (this.state === 'playing') {
+                this.controlsElement.classList.remove('show');
+            }
+        });
+    }
+    /**
+     * 绑定快捷键（感知悬停焦点，防多实例冲突）
+     */
+    bindKeyboardShortcuts() {
+        window.addEventListener('keydown', (e) => {
+            if (!this.isHoveringContainer)
+                return;
+            if (['INPUT', 'TEXTAREA', 'BUTTON'].includes(document.activeElement?.tagName)) {
+                return;
+            }
+            if (e.code === 'Space') {
+                e.preventDefault();
+                if (this.videoElement.paused) {
+                    this.play();
+                }
+                else {
+                    this.pause();
+                }
+            }
+            else if (e.code === 'Enter') {
+                e.preventDefault();
+                this.toggleFullScreen();
+            }
+            else if (e.code === 'ArrowUp') {
+                e.preventDefault();
+                const newVol = Math.min(1, this.videoElement.volume + 0.1);
+                this.setVolume(newVol);
+                if (this.muted)
+                    this.setMuted(false);
+            }
+            else if (e.code === 'ArrowDown') {
+                e.preventDefault();
+                const newVol = Math.max(0, this.videoElement.volume - 0.1);
+                this.setVolume(newVol);
+            }
+        });
+    }
+    /**
+     * 更新播放进度条
+     */
+    updateProgressUI() {
+        const current = this.currentTime;
+        const dur = this.duration;
+        const percent = dur > 0 ? (current / dur) * 100 : 0;
+        this.progressBar.value = percent.toString();
+        this.progressFilled.style.width = `${percent}%`;
+        this.timeDisplay.textContent = `${this.formatTime(current)} / ${this.formatTime(dur)}`;
+    }
+    /**
+     * 格式化播放时间显示
+     * @param seconds 秒
+     * @returns 时间格式字符串
+     */
+    formatTime(seconds) {
+        if (isNaN(seconds))
+            return '00:00';
+        const m = Math.floor(seconds / 60);
+        const s = Math.floor(seconds % 60);
+        return `${m < 10 ? '0' + m : m}:${s < 10 ? '0' + s : s}`;
+    }
+    /**
+     * 响应状态变化，控制中心图标的显隐和形态
+     * @param state 播放器状态
+     */
+    onStateChange(state) {
+        if (state === 'playing') {
+            /**
+             * 视频正在播放则控制栏显示暂停按钮
+             */
+            this.playBtn.textContent = '⏸';
+            this.showCenterIcon('play', true);
+        }
+        else if (state === 'paused') {
+            /**
+             * 视频正在暂停则控制栏显示播放按钮
+             */
+            this.playBtn.textContent = '▶';
+            this.showCenterIcon('pause', false);
+        }
+        else {
+            /**
+             * 控制播放器中心图标：
+             * 暂停状态：显示中心图标
+             * 播放状态：隐藏中心图标
+             */
+            if (this.centerIconTimer) {
+                window.clearTimeout(this.centerIconTimer);
+                this.centerIconTimer = null;
+            }
+            this.centerPlayBtn.classList.remove('visible');
+        }
+    }
+    /**
+     * 实现播放方法
+     */
+    async play() {
+        try {
+            await this.videoElement.play();
+        }
+        catch (err) {
+            console.error('CodaPlayer play error:', err);
+        }
+    }
+    /**
+     * 实现暂停方法
+     */
+    pause() {
+        this.videoElement.pause();
+    }
+    /**
+     * 实现进度条快进方法
+     * @param time
+     */
+    seek(time) {
+        this.videoElement.currentTime = time;
+    }
+    /**
+     * 实现音量设置方法
+     * @param volume 音量
+     */
+    setVolume(volume) {
+        this.videoElement.volume = volume;
+        this.volumeBar.value = volume.toString();
+        if (volume === 0) {
+            this.volumeBtn.textContent = '🔇';
+        }
+        else if (volume < 0.5) {
+            this.volumeBtn.textContent = '🔉';
+        }
+        else {
+            this.volumeBtn.textContent = '🔊';
+        }
+    }
+    /**
+     * 实现静音控制方法
+     * @param muted 是否静音
+     */
+    setMuted(muted) {
+        this.videoElement.muted = muted;
+        this.volumeBar.value = muted ? '0' : this.videoElement.volume.toString();
+        this.volumeBtn.textContent = muted ? '🔇' : '🔊';
+    }
+    /**
+     * 实现播放倍速设置方法
+     * @param rate 播放倍速
+     */
+    setPlaybackRate(rate) {
+        this._playbackRate = rate;
+        this.videoElement.playbackRate = rate;
+    }
+    /**
+     * 实现播放器全屏切换方法
+     */
+    toggleFullScreen() {
+        if (!document.fullscreenElement) {
+            this.container.requestFullscreen().catch(err => {
+                console.error('CodaPlayer fullscreen error:', err);
+            });
+            this._isFullScreen = true;
+        }
+        else {
+            document.exitFullscreen();
+            this._isFullScreen = false;
+        }
+    }
+    /**
+     * 实现播放器对象注销方法
+     */
+    destroy() {
+        if (this.hlsInstance) {
+            this.hlsInstance.destroy();
+            this.hlsInstance = null;
+        }
+        this.pause();
+        this.container.innerHTML = '';
+    }
+}

package/types/index.d.ts

@@ -0,0 +1,87 @@
+/**
+ * 播放器状态枚举
+ * idle:空闲
+ * loading: 加载中
+ * playing: 播放中
+ * paused: 暂停
+ * ended: 结束
+ * error: 错误
+ */
+export type PlayerState = 'idle' | 'loading' | 'playing' | 'paused' | 'ended' | 'error';
+/**
+ * 支持的倍速类型
+ */
+export type PlaybackRate = 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 2.0;
+/**
+ * 播放器主题枚举
+ * default: 默认主题
+ * dark: 暗色主题
+ * custom: 自定义主题
+ */
+export type PlayerTheme = 'default' | 'dark' | 'custom';
+/**
+ * 播放器常见事件映射
+ * play: 播放事件
+ * pause: 暂停事件
+ * ended: 播放结束事件
+ * error: 播放错误事件
+ * timeupdate: 播放时间变更事件
+ * volumechange: 音量变更事件
+ * statechange: 状态变更
+ */
+export interface CodaPlayerEventMap {
+    play: () => void;
+    pause: () => void;
+    ended: () => void;
+    error: (e: Event | string) => void;
+    timeupdate: (currentTime: number) => void;
+    volumechange: (payload: {
+        volume: number;
+        muted: boolean;
+    }) => void;
+    statechange: (state: PlayerState) => void;
+}
+/**
+ * 定义的常见事件 + HTMLVideoElement 的所有原生事件
+ */
+export type PlayerEventTypes = keyof CodaPlayerEventMap | keyof HTMLVideoElementEventMap;
+/**
+ * 智能回调类型推导：
+ * 根据传入的事件名，自动推导其对应回调函数的参数类型
+ */
+export type PlayerEventCallback<K extends PlayerEventTypes> = K extends keyof CodaPlayerEventMap ? CodaPlayerEventMap[K] : K extends keyof HTMLVideoElementEventMap ? (event: HTMLVideoElementEventMap[K]) => void : (...args: any[]) => void;
+/**
+ * 播放器初始化配置选项
+ */
+export type PlayerOptions = {
+    container: HTMLElement | string;
+    url: string;
+    poster?: string;
+    autoplay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    themeColor?: string;
+    width?: string | number;
+    height?: string | number;
+};
+/**
+ * 播放器核心接口契约
+ */
+export interface IPlayer {
+    readonly currentTime: number;
+    readonly duration: number;
+    readonly volume: number;
+    readonly muted: boolean;
+    readonly state: PlayerState;
+    readonly isFullScreen: boolean;
+    readonly playbackRate: PlaybackRate;
+    play(): Promise<void>;
+    pause(): void;
+    seek(time: number): void;
+    setVolume(volume: number): void;
+    setMuted(muted: boolean): void;
+    setPlaybackRate(rate: PlaybackRate): void;
+    toggleFullScreen(): void;
+    destroy(): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAExF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAE/D;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExD;;;;;;;;;GASG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,CAAC,CAAC,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,OAAO,EAAE;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAClE,WAAW,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C;AAED;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,kBAAkB,GAAG,MAAM,wBAAwB,CAAC;AAEzF;;;GAGG;AACH,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,gBAAgB,IAAI,CAAC,SAAS,MAAM,kBAAkB,GAC5F,kBAAkB,CAAC,CAAC,CAAC,GACrB,CAAC,SAAS,MAAM,wBAAwB,GACtC,CAAC,KAAK,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,GAC5C,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;AAE/B;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,WAAW,GAAG,MAAM,CAAC;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC;IAC5B,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IAEpC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACtB,KAAK,IAAI,IAAI,CAAC;IACd,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,eAAe,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;IAC1C,gBAAgB,IAAI,IAAI,CAAC;IACzB,OAAO,IAAI,IAAI,CAAC;CACjB"}

package/types/index.js

@@ -0,0 +1 @@
+export {};