coda-player 0.0.0-stage → 2.0.2

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "coda-player",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "2.0.2",
+  "description": "coda-player是一款轻量级HTML5视频播放器SDK，开箱即用，支持主流视频格式和HLS直播流，UI和功能高度可定制。",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "hls.js": "^1.7.4"
+  }
+}

package/player/base.player.d.ts

@@ -0,0 +1,128 @@
+import { PlaybackRate, PlayerOptions, PlayerState, IPlayer, PlayerEventTypes, PlayerEventCallback } from '../types';
+/**
+ * 抽象类：负责通用的生命周期管理、DOM 骨架初始化、基础状态维护及标准事件总线（Event Bus）
+ */
+export declare abstract class BasePlayer implements IPlayer {
+    /**DOM元素或CSS选择器 */
+    protected container: HTMLElement;
+    /**播放器属性 */
+    protected options: PlayerOptions;
+    /**video元素对象 */
+    protected videoElement: HTMLVideoElement;
+    /**播放器状态 */
+    protected _state: PlayerState;
+    /**是否是全屏 */
+    protected _isFullScreen: boolean;
+    /**播放速率 */
+    protected _playbackRate: PlaybackRate;
+    /** 内部事件监听器注册表：用于实现类似 player.on('event', callback) 的订阅机制 */
+    private eventListeners;
+    constructor(options: PlayerOptions);
+    /**
+     * 解析并校验挂载容器（支持 DOM 元素或 CSS 选择器字符串）
+     * @param container DOM元素或CSS选择器
+     * @returns 返回容器对象
+     */
+    private resolveContainer;
+    /**
+     * 初始化基础 DOM 结构与视频核心标签
+     */
+    private initBaseDOM;
+    /**
+     * 绑定底层视频原生状态事件，并统一桥接到事件总线中
+     * 原生video对象事件
+     */
+    private bindBaseEvents;
+    /**
+     * 更新播放器内部状态并触发状态变更事件
+     * @param state 播放器状态
+     */
+    protected setState(state: PlayerState): void;
+    /**
+     * 播放器状态变更事件
+     * @param state 播放器状态
+     */
+    protected abstract onStateChange(state: PlayerState): void;
+    /**
+     * 订阅播放器事件（支持链式调用）
+     * @param event 事件名称
+     * @param callback 回调函数
+     * @returns 返回播放器对象
+     */
+    on<K extends PlayerEventTypes>(event: K, callback: PlayerEventCallback<K>): this;
+    /**
+     * 取消订阅播放器事件
+     * @param event 事件名称
+     * @param callback 回调函数
+     * @returns 返回播放器对象
+     */
+    off<K extends PlayerEventTypes>(event: K, callback: PlayerEventCallback<K>): this;
+    /**
+     * 触发内部事件分发
+     * @param event 事件名称
+     * @param args 任意数据
+     */
+    protected emit<K extends PlayerEventTypes>(event: K, ...args: any[]): void;
+    /**
+     * 获取播放器当前时间
+     */
+    get currentTime(): number;
+    get duration(): number;
+    /**
+     * 获取播放器当前音量
+     */
+    get volume(): number;
+    /**
+     * 获取播放器是否静音
+     */
+    get muted(): boolean;
+    /**
+     * 获取播放器状态
+     */
+    get state(): PlayerState;
+    /**
+     * 获取播放器是否全屏
+     */
+    get isFullScreen(): boolean;
+    /**
+     * 获取播放器播放速率
+     */
+    get playbackRate(): PlaybackRate;
+    /**
+     * 播放器播放方法
+     */
+    abstract play(): Promise<void>;
+    /**
+     * 播放器暂停方法
+     */
+    abstract pause(): void;
+    /**
+     * 播放器播放方法 播放器快进方法
+     * @param time 时间
+     */
+    abstract seek(time: number): void;
+    /**
+     * 播放器音量设置方法
+     * @param volume 音量
+     */
+    abstract setVolume(volume: number): void;
+    /**
+     * 播放器设置静音方法
+     * @param muted 是否静音
+     */
+    abstract setMuted(muted: boolean): void;
+    /**
+     * 播放器设置速率方法
+     * @param rate 播放速率
+     */
+    abstract setPlaybackRate(rate: PlaybackRate): void;
+    /**
+     * 播放器切换全屏方法
+     */
+    abstract toggleFullScreen(): void;
+    /**
+     * 播放器注销方法
+     */
+    abstract destroy(): void;
+}
+//# sourceMappingURL=base.player.d.ts.map

package/player/base.player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.player.d.ts","sourceRoot":"","sources":["../../src/player/base.player.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,WAAW,EACX,OAAO,EACP,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,UAAU,CAAC;AAElB;;GAEG;AACH,8BAAsB,UAAW,YAAW,OAAO;IACjD,kBAAkB;IAClB,SAAS,CAAC,SAAS,EAAE,WAAW,CAAC;IACjC,WAAW;IACX,SAAS,CAAC,OAAO,EAAE,aAAa,CAAC;IACjC,eAAe;IACf,SAAS,CAAC,YAAY,EAAG,gBAAgB,CAAC;IAC1C,WAAW;IACX,SAAS,CAAC,MAAM,EAAE,WAAW,CAAU;IACvC,WAAW;IACX,SAAS,CAAC,aAAa,EAAE,OAAO,CAAS;IACzC,UAAU;IACV,SAAS,CAAC,aAAa,EAAE,YAAY,CAAO;IAE5C,2DAA2D;IAC3D,OAAO,CAAC,cAAc,CAAyC;gBAEnD,OAAO,EAAE,aAAa;IAOlC;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAWxB;;OAEG;IACH,OAAO,CAAC,WAAW;IAkCnB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAgCtB;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAM5C;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAE1D;;;;;OAKG;IACI,EAAE,CAAC,CAAC,SAAS,gBAAgB,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,IAAI;IAcvF;;;;;OAKG;IACI,GAAG,CAAC,CAAC,SAAS,gBAAgB,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,IAAI;IAQxF;;;;OAIG;IACH,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,gBAAgB,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI;IAO1E;;OAEG;IACH,IAAW,WAAW,IAAI,MAAM,CAE/B;IAED,IAAW,QAAQ,IAAI,MAAM,CAE5B;IAED;;OAEG;IACH,IAAW,MAAM,IAAI,MAAM,CAE1B;IAED;;OAEG;IACH,IAAW,KAAK,IAAI,OAAO,CAE1B;IAED;;OAEG;IACH,IAAW,KAAK,IAAI,WAAW,CAE9B;IAED;;OAEG;IACH,IAAW,YAAY,IAAI,OAAO,CAEjC;IAED;;OAEG;IACH,IAAW,YAAY,IAAI,YAAY,CAEtC;IAED;;OAEG;aACa,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAErC;;OAEG;aACa,KAAK,IAAI,IAAI;IAE7B;;;OAGG;aACa,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAExC;;;OAGG;aACa,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAE/C;;;OAGG;aACa,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAE9C;;;OAGG;aACa,eAAe,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI;IAEzD;;OAEG;aACa,gBAAgB,IAAI,IAAI;IAExC;;OAEG;aACa,OAAO,IAAI,IAAI;CAChC"}

package/player/base.player.js

@@ -0,0 +1,195 @@
+/**
+ * 抽象类：负责通用的生命周期管理、DOM 骨架初始化、基础状态维护及标准事件总线（Event Bus）
+ */
+export class BasePlayer {
+    /**DOM元素或CSS选择器 */
+    container;
+    /**播放器属性 */
+    options;
+    /**video元素对象 */
+    videoElement;
+    /**播放器状态 */
+    _state = 'idle';
+    /**是否是全屏 */
+    _isFullScreen = false;
+    /**播放速率 */
+    _playbackRate = 1.0;
+    /** 内部事件监听器注册表：用于实现类似 player.on('event', callback) 的订阅机制 */
+    eventListeners = new Map();
+    constructor(options) {
+        this.options = options;
+        this.container = this.resolveContainer(options.container);
+        this.initBaseDOM();
+        this.bindBaseEvents();
+    }
+    /**
+     * 解析并校验挂载容器（支持 DOM 元素或 CSS 选择器字符串）
+     * @param container DOM元素或CSS选择器
+     * @returns 返回容器对象
+     */
+    resolveContainer(container) {
+        if (typeof container === 'string') {
+            const el = document.querySelector(container);
+            if (!el) {
+                throw new Error(`CodaPlayer: Container element "${container}" not found.`);
+            }
+            return el;
+        }
+        return container;
+    }
+    /**
+     * 初始化基础 DOM 结构与视频核心标签
+     */
+    initBaseDOM() {
+        /**1. 初始化容器内容/样式 */
+        this.container.innerHTML = '';
+        this.container.classList.add('coda-player-container');
+        /**
+         * 2. 使用外部参数设置容器属性
+         * 宽度/高度/主题色
+         */
+        if (this.options.width) {
+            this.container.style.width =
+                typeof this.options.width === 'number' ? `${this.options.width}px` : this.options.width;
+        }
+        if (this.options.height) {
+            this.container.style.height =
+                typeof this.options.height === 'number' ? `${this.options.height}px` : this.options.height;
+        }
+        if (this.options.themeColor) {
+            this.container.style.setProperty('--coda-theme-color', this.options.themeColor);
+        }
+        /**3. 创建和设置video元素 */
+        this.videoElement = document.createElement('video');
+        this.videoElement.className = 'coda-player-video';
+        this.videoElement.playsInline = true;
+        if (this.options.poster)
+            this.videoElement.poster = this.options.poster;
+        if (this.options.muted)
+            this.videoElement.muted = true;
+        if (this.options.loop)
+            this.videoElement.loop = true;
+        if (this.options.autoplay)
+            this.videoElement.autoplay = true;
+        /**4. video元素加入容器 */
+        this.container.appendChild(this.videoElement);
+    }
+    /**
+     * 绑定底层视频原生状态事件，并统一桥接到事件总线中
+     * 原生video对象事件
+     */
+    bindBaseEvents() {
+        this.videoElement.addEventListener('loadstart', () => this.setState('loading'));
+        this.videoElement.addEventListener('playing', () => {
+            this.setState('playing');
+            this.emit('play');
+        });
+        this.videoElement.addEventListener('pause', () => {
+            this.setState('paused');
+            this.emit('pause');
+        });
+        this.videoElement.addEventListener('ended', () => {
+            this.setState('ended');
+            this.emit('ended');
+        });
+        this.videoElement.addEventListener('error', e => {
+            this.setState('error');
+            this.emit('error', e);
+        });
+        this.videoElement.addEventListener('timeupdate', () => {
+            this.emit('timeupdate', this.currentTime);
+        });
+        this.videoElement.addEventListener('volumechange', () => {
+            this.emit('volumechange', { volume: this.volume, muted: this.muted });
+        });
+    }
+    /**
+     * 更新播放器内部状态并触发状态变更事件
+     * @param state 播放器状态
+     */
+    setState(state) {
+        this._state = state;
+        this.onStateChange(state);
+        this.emit('statechange', state); // 统一分发状态变更事件
+    }
+    /**
+     * 订阅播放器事件（支持链式调用）
+     * @param event 事件名称
+     * @param callback 回调函数
+     * @returns 返回播放器对象
+     */
+    on(event, callback) {
+        if (!this.eventListeners.has(event)) {
+            this.eventListeners.set(event, new Set());
+        }
+        this.eventListeners.get(event).add(callback);
+        // 如果订阅的是原生事件且不在我们自定义映射内，可以直接桥接到 videoElement 上
+        if (!(event in this.eventListeners) && event in HTMLVideoElement.prototype) {
+            this.videoElement.addEventListener(event, callback);
+        }
+        return this;
+    }
+    /**
+     * 取消订阅播放器事件
+     * @param event 事件名称
+     * @param callback 回调函数
+     * @returns 返回播放器对象
+     */
+    off(event, callback) {
+        const listeners = this.eventListeners.get(event);
+        if (listeners) {
+            listeners.delete(callback);
+        }
+        return this;
+    }
+    /**
+     * 触发内部事件分发
+     * @param event 事件名称
+     * @param args 任意数据
+     */
+    emit(event, ...args) {
+        const listeners = this.eventListeners.get(event);
+        if (listeners) {
+            listeners.forEach(callback => callback(...args));
+        }
+    }
+    /**
+     * 获取播放器当前时间
+     */
+    get currentTime() {
+        return this.videoElement.currentTime;
+    }
+    get duration() {
+        return isNaN(this.videoElement.duration) ? 0 : this.videoElement.duration;
+    }
+    /**
+     * 获取播放器当前音量
+     */
+    get volume() {
+        return this.videoElement.volume;
+    }
+    /**
+     * 获取播放器是否静音
+     */
+    get muted() {
+        return this.videoElement.muted;
+    }
+    /**
+     * 获取播放器状态
+     */
+    get state() {
+        return this._state;
+    }
+    /**
+     * 获取播放器是否全屏
+     */
+    get isFullScreen() {
+        return this._isFullScreen;
+    }
+    /**
+     * 获取播放器播放速率
+     */
+    get playbackRate() {
+        return this._playbackRate;
+    }
+}

package/player/coda.player.d.ts

@@ -0,0 +1,115 @@
+import { PlaybackRate, PlayerOptions, PlayerState } from '../types';
+import { BasePlayer } from './base.player';
+/**
+ * 实现类：负责具体 UI 渲染、控制栏交互、换肤、快捷键与 HLS 切片流式传输支持
+ */
+export declare class CodaPlayer extends BasePlayer {
+    /**hls对象实例 */
+    private hlsInstance;
+    /**播放器控制栏DOM元素 */
+    private controlsElement;
+    /**播放器中心暂停/播放按钮 */
+    private centerPlayBtn;
+    /**控制栏播放按钮 */
+    private playBtn;
+    /**控制栏播放进度条 */
+    private progressBar;
+    private progressFilled;
+    /**视频时间 */
+    private timeDisplay;
+    /**进度条时间提示 */
+    private timeTooltip;
+    /**音量进度条 */
+    private volumeBar;
+    /**音量按钮 */
+    private volumeBtn;
+    /**播放倍速按钮 */
+    private speedBtn;
+    /**播放倍速菜单 */
+    private speedMenu;
+    /**全屏按钮 */
+    private fullscreenBtn;
+    /**鼠标是否悬浮在播放器容器上 */
+    private isHoveringContainer;
+    /**播放器中心暂停/播放按钮显示时间 */
+    private centerIconTimer;
+    constructor(options: PlayerOptions);
+    /**
+     * 初始化视频源
+     * 智能判断视频格式进行视频源初始化：
+     * 1. .m3u8格式启用HLS播放
+     * 2. 其他格式直接使用video原生播放
+     * @param url 视频源地址
+     */
+    private initSource;
+    /**
+     * 初始化完整控制栏 UI 组件
+     */
+    private initControlUI;
+    /**
+     * 中心图标的控制显示
+     * @param icon 图标类型：播放/暂停
+     * @param autoHide 是否自动隐藏图标
+     */
+    private showCenterIcon;
+    /**
+     * 绑定控制栏所有交互逻辑
+     */
+    private bindControlEvents;
+    /**
+     * 绑定快捷键（感知悬停焦点，防多实例冲突）
+     */
+    private bindKeyboardShortcuts;
+    /**
+     * 更新播放进度条
+     */
+    private updateProgressUI;
+    /**
+     * 格式化播放时间显示
+     * @param seconds 秒
+     * @returns 时间格式字符串
+     */
+    private formatTime;
+    /**
+     * 响应状态变化，控制中心图标的显隐和形态
+     * @param state 播放器状态
+     */
+    protected onStateChange(state: PlayerState): void;
+    /**
+     * 实现播放方法
+     */
+    play(): Promise<void>;
+    /**
+     * 实现暂停方法
+     */
+    pause(): void;
+    /**
+     * 实现进度条快进方法
+     * @param time
+     */
+    seek(time: number): void;
+    /**
+     * 实现音量设置方法
+     * @param volume 音量
+     */
+    setVolume(volume: number): void;
+    /**
+     * 实现静音控制方法
+     * @param muted 是否静音
+     */
+    setMuted(muted: boolean): void;
+    /**
+     * 实现播放倍速设置方法
+     * @param rate 播放倍速
+     */
+    setPlaybackRate(rate: PlaybackRate): void;
+    /**
+     * 实现播放器全屏切换方法
+     */
+    toggleFullScreen(): void;
+    /**
+     * 实现播放器对象注销方法
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=coda.player.d.ts.map

package/player/coda.player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"coda.player.d.ts","sourceRoot":"","sources":["../../src/player/coda.player.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,YAAY,EAAE,aAAa,EAAE,WAAW,EAAC,MAAM,UAAU,CAAC;AAClE,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAEzC;;GAEG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,aAAa;IACb,OAAO,CAAC,WAAW,CAAoB;IACvC,iBAAiB;IACjB,OAAO,CAAC,eAAe,CAAkB;IACzC,kBAAkB;IAClB,OAAO,CAAC,aAAa,CAAkB;IACvC,aAAa;IACb,OAAO,CAAC,OAAO,CAAqB;IACpC,cAAc;IACd,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,cAAc,CAAkB;IACxC,UAAU;IACV,OAAO,CAAC,WAAW,CAAmB;IACtC,aAAa;IACb,OAAO,CAAC,WAAW,CAAkB;IACrC,WAAW;IACX,OAAO,CAAC,SAAS,CAAoB;IACrC,UAAU;IACV,OAAO,CAAC,SAAS,CAAqB;IACtC,YAAY;IACZ,OAAO,CAAC,QAAQ,CAAqB;IACrC,YAAY;IACZ,OAAO,CAAC,SAAS,CAAkB;IACnC,UAAU;IACV,OAAO,CAAC,aAAa,CAAqB;IAC1C,mBAAmB;IACnB,OAAO,CAAC,mBAAmB,CAAkB;IAC7C,sBAAsB;IACtB,OAAO,CAAC,eAAe,CAAuB;gBAElC,OAAO,EAAE,aAAa;IAQlC;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IAmBlB;;OAEG;IACH,OAAO,CAAC,aAAa;IA2DrB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IA+BtB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IA+HzB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAiC7B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAUxB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAOlB;;;OAGG;IACH,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IA2BjD;;OAEG;IACU,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAQlC;;OAEG;IACI,KAAK,IAAI,IAAI;IAIpB;;;OAGG;IACI,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAI/B;;;OAGG;IACI,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAYtC;;;OAGG;IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAMrC;;;OAGG;IACI,eAAe,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI;IAKhD;;OAEG;IACI,gBAAgB,IAAI,IAAI;IAY/B;;OAEG;IACI,OAAO,IAAI,IAAI;CAQvB"}