@leafer-in/video 0.0.0-stage → 2.3.1

package/package.json

@@ -1,6 +1,37 @@
 {
   "name": "@leafer-in/video",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "2.3.1",
+  "description": "@leafer-in/video",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/video.esm.min.js",
+  "exports": {
+    "import": "./dist/video.esm.min.js",
+    "require": "./dist/video.min.cjs",
+    "types": "./types/index.d.ts"
+  },
+  "types": "types/index.d.ts",
+  "unpkg": "dist/video.min.js",
+  "jsdelivr": "dist/video.min.js",
+  "files": ["src","types","dist"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/leafer-in.git"
+  },
+  "homepage": "https://github.com/leaferjs/leafer-in/tree/main/packages/video",
+  "bugs": "https://github.com/leaferjs/leafer-in/issues",
+  "keywords": [
+    "leafer video",
+    "leafer-video",
+    "leafer-in",
+    "video",
+    "leafer-ui",
+    "leaferjs"
+  ],
+  "peerDependencies": {
+    "@leafer-ui/draw": "^2.2.4",
+    "@leafer-ui/interface": "^2.2.4",
+    "@leafer-in/interface": "^2.2.4"
+  }
 }

package/src/PaintVideo.ts

@@ -0,0 +1,88 @@
+import { ILeafPaint, IVideoDecoder, IUI } from '@leafer-ui/interface'
+import { isArray } from '@leafer-ui/draw'
+
+export class PaintVideo {
+
+    public element: IUI
+
+    public get playerOptions(): ILeafPaint { const { fill } = (this.element || this as any).__; return isArray(fill) && fill.find(item => item.type === 'video') }
+
+    public get decoder(): IVideoDecoder { const { playerOptions } = this; return playerOptions && playerOptions.image && playerOptions.image.view }
+
+    public get duration(): number {    // 获取当前播放进度 (秒)
+        const video = this.decoder
+        return video && video.duration
+    }
+
+    public get currentTime(): number {    // 获取当前播放进度 (秒)
+        const video = this.decoder
+        return video && video.currentTime
+    }
+
+    public set currentTime(time: number) { // 设置播放进度
+        const video = this.decoder
+        if (video) {
+            video.currentTime = time;
+            (this.element || this as any as IUI).forceRender()// 需要强制更新一下元素
+        }
+    }
+
+    public get volume(): number {   // 获取当前音量 (0 ~ 1)
+        const video = this.decoder
+        return video && video.volume
+    }
+
+    public set volume(volume: number) {    // 设置音量 (0 ~ 1)
+        const video = this.decoder
+        if (video) video.volume = volume
+    }
+
+    public get paused(): boolean {
+        const video = this.decoder
+        return video && video.paused
+    }
+
+    public get ended(): boolean {
+        const video = this.decoder
+        return video && video.ended
+    }
+
+
+    constructor(element: IUI) {
+        this.element = element
+    }
+
+
+    public togglePlay(): void {
+        const { playerOptions } = this
+        if (playerOptions) {
+            if (playerOptions.paused !== false) this.play()
+            else this.pause()
+        }
+    }
+
+    public play(): void {
+        const { playerOptions } = this
+        if (playerOptions && playerOptions.paused !== false) {
+            playerOptions.paused = false;
+            (this.element || this as any as IUI).forceRender()
+        }
+    }
+
+    public pause(): void {
+        const { playerOptions } = this
+        if (playerOptions) {
+            playerOptions.paused = true
+            this.decoder.pause()
+        }
+    }
+
+    public stop(): void {
+        const { playerOptions } = this
+        if (playerOptions) {
+            playerOptions.nowIndex = 0
+            this.currentTime = 0
+            this.pause()
+        }
+    }
+}

package/src/Video.ts

@@ -0,0 +1,40 @@
+import { IVideo, IVideoInputData, IVideoData, IVideoDecoder, ILeafPaint } from '@leafer-ui/interface'
+import { Image, registerUI, dataProcessor, useModule } from '@leafer-ui/draw'
+
+import { VideoData } from './data/VideoData'
+import { PaintVideo } from './PaintVideo'
+
+
+@useModule(PaintVideo)
+@registerUI()
+export class Video<TInputData = IVideoInputData> extends Image<TInputData> implements IVideo {
+
+    public get __tag() { return 'Video' }
+
+    @dataProcessor(VideoData)
+    declare public __: IVideoData
+
+    public autoplay?: boolean
+
+    public muted?: boolean
+
+    public loop?: boolean
+}
+
+export interface Video {
+
+    readonly playerOptions: ILeafPaint
+    readonly decoder: IVideoDecoder
+
+    duration: number // 总时长
+    currentTime: number // 当前播放进度 (秒)
+    volume: number // 音量 0 ~1 
+
+    readonly paused: boolean
+    readonly ended: boolean // 是否播放结束
+
+    togglePlay(): void
+    play(): void
+    pause(): void
+    stop(): void
+}

package/src/VideoDecoder.ts

@@ -0,0 +1,118 @@
+import { MathHelper } from '@leafer-ui/draw'
+import { ICanvasContext2D, IVideoDecoder, IVideoFileType, ILeaf, IVideoPlayOptions } from '@leafer-ui/interface'
+
+
+interface IVideoDecoderMap {
+    [name: string]: { Decoder: any, force?: boolean }
+}
+
+export class VideoDecoder implements IVideoDecoder {
+
+    public width: number // 宽度
+    public height: number // 高度
+
+    public duration: number
+
+    public get currentTime(): number {    // 获取当前播放进度 (秒)
+        const video = this.decoder
+        return video.currentTime
+    }
+
+    public set currentTime(time: number) { // 设置播放进度
+        const video = this.decoder
+        const targetTime = MathHelper.within(time, 0, this.duration)
+        video.currentTime = targetTime
+    }
+
+    public get volume(): number {   // 获取当前音量 (0 ~ 1)
+        const video = this.decoder
+        return video.volume
+    }
+
+    public set volume(volume: number) {    // 设置音量 (0 ~ 1)
+        const video = this.decoder
+        const targetVolume = MathHelper.within(volume, 0, 1)
+        video.volume = targetVolume
+        if (targetVolume > 0 && video.muted) video.muted = false         // 如果音量大于 0，确保解除静音状态
+    }
+
+    public get paused(): boolean {
+        const video = this.decoder
+        return video.paused
+    }
+
+    public get ended(): boolean {
+        const video = this.decoder
+        return video.ended
+    }
+
+    public loop: number // 循环次数，为0表示无限循环
+
+    public decoder: HTMLVideoElement // 解码器
+
+    // 缓冲画布
+    public bufferCanvas?: any
+    public bufferContext?: ICanvasContext2D
+
+    static decoderMap: IVideoDecoderMap = {}
+
+    static register(type: IVideoFileType, Decoder: any, force?: boolean): void {
+        VideoDecoder.decoderMap[type] = { Decoder, force }
+    }
+
+    public load(): Promise<void> {
+        return undefined
+    }
+
+    public play(): void {
+        const video = this.decoder
+        video.play()
+    }
+
+    public pause(): void {
+        const video = this.decoder
+        video.pause()
+    }
+
+
+    public render(canvas: ICanvasContext2D, x: number, y: number, width: number, height: number, leaf: ILeaf, playOptions: IVideoPlayOptions, _imageScaleX: number, _imageScaleY: number): void {
+        let { paused } = playOptions
+
+        const video = this.decoder
+        if (video.ended) {
+            video.pause()
+            playOptions.paused = true
+            playOptions.loop = (playOptions.loop as number || 0) + 1
+        }
+
+        if (paused === false && video.paused) {
+            this.play()
+        } else if (paused === true && !video.paused) {
+            this.pause()
+        } else {
+            playOptions.paused = video.paused
+        }
+
+        // 仅在视频处于播放状态，且有实际数据更新时进行绘制
+        canvas.drawImage(video, x, y, width, height)
+
+        if (!video.paused) leaf.forceRender() // 防止停掉
+    }
+
+
+    public destroyDecoder(): void {
+        const video = this.decoder
+        if (video) {
+
+            video.pause()
+            video.src = ''
+            video.load()
+            this.decoder = null
+        }
+    }
+
+    public close(): void {
+        this.destroyDecoder()
+    }
+
+}

package/src/data/VideoData.ts

@@ -0,0 +1,9 @@
+import { IMultimediaType } from '@leafer-ui/interface'
+import { ImageData } from '@leafer-ui/draw'
+
+
+export class VideoData extends ImageData {
+
+    public get __urlType(): IMultimediaType { return 'video' }
+
+}

package/src/index.ts

@@ -0,0 +1,126 @@
+import { LeaferVideo, Platform, Creator, PaintImage, Resource, Plugin } from '@leafer-ui/draw'
+import { ILeaferVideo, ILeaferVideoConfig, IImageCrossOrigin, ILeaf, ILeafPaint, IVideoFileType } from '@leafer-ui/interface'
+
+import { VideoDecoder } from './VideoDecoder'
+
+export { Video } from './Video'
+export { VideoData } from './data/VideoData'
+export { VideoDecoder } from './VideoDecoder'
+export { PaintVideo } from './PaintVideo'
+
+
+Plugin.add('video')
+
+
+PaintImage.video = function (paint: ILeafPaint): void {
+    paint.film = true
+    paint.nowIndex = 0
+}
+
+Creator.video = function (options?: ILeaferVideoConfig): ILeaferVideo {
+    return new LeaferVideo(options)
+}
+
+Resource.loadVideo = function (key: string, format?: IVideoFileType): Promise<ILeaferVideo> {
+    return new Promise((resolve, reject) => {
+        const config: ILeaferVideoConfig = { url: key }
+        if (format) config.format = format
+        const video = Creator.video(config)
+        Resource.set(key, video)
+        video.load(() => resolve(video), (e: any) => reject(e))
+    })
+}
+
+LeaferVideo.prototype.render = function (canvas: any, x: number, y: number, width: number, height: number, leaf: ILeaf, paint: any, imageScaleX: number, imageScaleY: number): void {
+    this.view.render(canvas, x, y, width, height, leaf, paint, imageScaleX, imageScaleY)
+}
+
+
+Platform.origin.loadVideo = async function (url: string, _crossOrigin?: IImageCrossOrigin, _leaferVideo?: ILeaferVideo): Promise<any> {
+    //const buffer = await Platform.origin.loadContent(url, 'arrayBuffer')
+
+    // let ext = getFileExt(url)   // 获取文件后缀名
+
+    // if (!ext) {
+    //     if (leaferVideo) ext = leaferVideo.config.format
+    //     if (!ext) ext = 'gif'
+    // }
+
+    // const mimeType = FileHelper.mimeType(ext)
+    const video = createVideoElement(url)
+
+    const decoder = new VideoDecoder()
+
+    const { width, height, duration } = await waitVideoMetadata(video)
+    decoder.decoder = video
+    decoder.width = width
+    decoder.height = height
+    decoder.duration = duration
+
+    await waitVideoFrameReady(video)
+
+    return decoder
+}
+
+/**
+ * 创建并配置一个隐藏的 HTMLVideoElement
+ */
+function createVideoElement(url: string, muted = false, loop = false): HTMLVideoElement {
+    const video = document.createElement('video')
+    video.src = url
+    video.muted = muted
+    video.loop = loop
+
+    // 必须设置 playsInline 保证在移动端浏览器内联播放，而不是弹窗全屏
+    video.playsInline = true
+    //video.webkitPlaysInline = true
+
+    // 允许跨域（如果视频托管在 CDN，Canvas 绘制需要此属性避免 Canvas 污染/报错）
+    video.crossOrigin = 'anonymous'
+
+    return video
+}
+
+/**
+ * 等待视频元数据加载完毕，返回视频的尺寸与时长信息
+ */
+function waitVideoMetadata(video: HTMLVideoElement): Promise<{ width: number; height: number; duration: number }> {
+    return new Promise((resolve) => {
+        if (video.readyState >= 1) { // HAVE_METADATA 及以上
+            resolve({
+                width: video.videoWidth,
+                height: video.videoHeight,
+                duration: video.duration
+            })
+        } else {
+            video.addEventListener('loadedmetadata', () => {
+                resolve({
+                    width: video.videoWidth,
+                    height: video.videoHeight,
+                    duration: video.duration
+                })
+            }, { once: true })
+        }
+    })
+}
+
+/**
+ * 等待视频首帧可绘制到 Canvas
+ */
+export function waitVideoFrameReady(video: HTMLVideoElement): Promise<void> {
+    return new Promise((resolve) => {
+        if ('requestVideoFrameCallback' in video) {
+            video.requestVideoFrameCallback(() => resolve())
+            return
+        }
+
+        if ((video as any).readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+            resolve()
+            return
+        }
+
+        (video as any).addEventListener('loadeddata', () => resolve(), {
+            once: true
+        })
+    })
+}

package/src/interface/IVideo.ts

@@ -0,0 +1,12 @@
+import { IBox, IBoxData, IBoxInputData } from '@leafer-ui/interface' // IVideo, IVideoData, IVideoInputData,
+
+// VideoBox
+export interface IVideoBox extends IVideoAttrData, IBox {
+    __: IVideoBoxData
+}
+export interface IVideoBoxData extends IVideoAttrData, IBoxData { }
+export interface IVideoBoxInputData extends IVideoAttrData, IBoxInputData { }
+
+interface IVideoAttrData {
+    url?: string
+}

package/types/index.d.ts

@@ -0,0 +1,82 @@
+import { IVideoInputData, IVideo, IVideoData, ILeafPaint, IVideoDecoder, IMultimediaType, ICanvasContext2D, IVideoFileType, ILeaf, IVideoPlayOptions, IUI } from '@leafer-ui/interface';
+import { Image, ImageData } from '@leafer-ui/draw';
+
+declare class Video<TInputData = IVideoInputData> extends Image<TInputData> implements IVideo {
+    get __tag(): string;
+    __: IVideoData;
+    autoplay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+}
+interface Video {
+    readonly playerOptions: ILeafPaint;
+    readonly decoder: IVideoDecoder;
+    duration: number;
+    currentTime: number;
+    volume: number;
+    readonly paused: boolean;
+    readonly ended: boolean;
+    togglePlay(): void;
+    play(): void;
+    pause(): void;
+    stop(): void;
+}
+
+declare class VideoData extends ImageData {
+    get __urlType(): IMultimediaType;
+}
+
+interface IVideoDecoderMap {
+    [name: string]: {
+        Decoder: any;
+        force?: boolean;
+    };
+}
+declare class VideoDecoder implements IVideoDecoder {
+    width: number;
+    height: number;
+    duration: number;
+    get currentTime(): number;
+    set currentTime(time: number);
+    get volume(): number;
+    set volume(volume: number);
+    get paused(): boolean;
+    get ended(): boolean;
+    loop: number;
+    decoder: HTMLVideoElement;
+    bufferCanvas?: any;
+    bufferContext?: ICanvasContext2D;
+    static decoderMap: IVideoDecoderMap;
+    static register(type: IVideoFileType, Decoder: any, force?: boolean): void;
+    load(): Promise<void>;
+    play(): void;
+    pause(): void;
+    render(canvas: ICanvasContext2D, x: number, y: number, width: number, height: number, leaf: ILeaf, playOptions: IVideoPlayOptions, _imageScaleX: number, _imageScaleY: number): void;
+    destroyDecoder(): void;
+    close(): void;
+}
+
+declare class PaintVideo {
+    element: IUI;
+    get playerOptions(): ILeafPaint;
+    get decoder(): IVideoDecoder;
+    get duration(): number;
+    get currentTime(): number;
+    set currentTime(time: number);
+    get volume(): number;
+    set volume(volume: number);
+    get paused(): boolean;
+    get ended(): boolean;
+    constructor(element: IUI);
+    togglePlay(): void;
+    play(): void;
+    pause(): void;
+    stop(): void;
+}
+
+/**
+ * 等待视频首帧可绘制到 Canvas
+ */
+declare function waitVideoFrameReady(video: HTMLVideoElement): Promise<void>;
+
+export { PaintVideo, Video, VideoData, VideoDecoder, waitVideoFrameReady };