refactor: Update loadedTime and playing getters in Artplayer

docs/uncompiled/artplayer-proxy-webav/index.js

@@ -147,89 +147,121 @@ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 parcelHelpers.export(exports, "default", ()=>artplayerProxyWebAV);
 var _avCliper = require("@webav/av-cliper");
-function artplayerProxyWebAV(option) {
+function artplayerProxyWebAV() {
     return (art)=>{
         const { option, constructor } = art;
         const { createElement, def } = constructor.utils;
         const canvas = createElement("canvas");
         const ctx = canvas.getContext("2d");
-        const audioCtx = new AudioContext();
+        let audioCtx;
+        let gainNode;
         let clip = null;
         let timer = null;
         let audioSource = null;
-        let playing = false;
-        let duration = 0;
-        let videoWidth = 0;
-        let videoHeight = 0;
-        let currentTime = 0;
-        let loadedTime = 0;
-        let volume = 1;
-        let autoplay = false;
-        let playbackRate = 1;
-        let paused = true;
-        let ended = false;
-        let readyState = 0;
-        let muted = false;
+        const state = {
+            playing: false,
+            duration: 0,
+            videoWidth: 0,
+            videoHeight: 0,
+            currentTime: 0,
+            loadedTime: 0,
+            volume: 1,
+            autoplay: false,
+            playbackRate: 1,
+            paused: true,
+            ended: false,
+            readyState: 0,
+            muted: false
+        };
         function reset() {
-            playing = false;
-            duration = 0;
-            videoWidth = 0;
-            videoHeight = 0;
-            currentTime = 0;
-            loadedTime = 0;
-            volume = 1;
-            autoplay = false;
-            playbackRate = 1;
-            paused = true;
-            ended = false;
-            readyState = 0;
-            muted = false;
+            Object.assign(state, {
+                playing: false,
+                duration: 0,
+                videoWidth: 0,
+                videoHeight: 0,
+                currentTime: 0,
+                loadedTime: 0,
+                volume: 1,
+                autoplay: false,
+                playbackRate: 1,
+                paused: true,
+                ended: false,
+                readyState: 0,
+                muted: false
+            });
         }
         function stop() {
             clearInterval(timer);
-            audioSource?.stop();
+            if (audioSource) {
+                audioSource.stop();
+                audioSource = null;
+            }
         }
-        function play() {
-            let curTime = currentTime * 1e6;
+        function updateVolume() {
+            if (gainNode) {
+                const effectiveVolume = state.muted ? 0 : state.volume;
+                gainNode.gain.setValueAtTime(effectiveVolume, audioCtx.currentTime);
+            }
+        }
+        async function play() {
+            if (!audioCtx) {
+                audioCtx = new AudioContext();
+                gainNode = audioCtx.createGain();
+                gainNode.connect(audioCtx.destination);
+            }
+            let curTime = state.currentTime * 1e6;
             let startAt = 0;
             let first = true;
             stop();
+            updateVolume();
             timer = setInterval(async ()=>{
-                const { state, video, audio } = await clip.tick(Math.round(curTime));
-                curTime += 1000 / 30 * 1000;
-                currentTime = curTime / 1e6;
+                const { state: clipState, video, audio } = await clip.tick(Math.round(curTime));
+                curTime += 1000 / 30 * 1000 * state.playbackRate;
+                state.currentTime = curTime / 1e6;
                 art.emit("video:timeupdate", {
                     type: "timeupdate"
                 });
-                if (state === "done") {
-                    clearInterval(timer);
+                if (clipState === "done") {
+                    stop();
+                    state.ended = true;
+                    state.playing = false;
+                    state.paused = true;
+                    art.emit("video:ended", {
+                        type: "ended"
+                    });
                     return;
                 }
-                if (video != null && state === "success") {
-                    ctx.clearRect(0, 0, videoWidth, videoHeight);
-                    ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
+                if (video && clipState === "success") {
+                    ctx.clearRect(0, 0, state.videoWidth, state.videoHeight);
+                    ctx.drawImage(video, 0, 0, state.videoWidth, state.videoHeight);
                     video.close();
                 }
                 if (first) {
                     first = false;
                     return;
                 }
-                const len = audio[0]?.length ?? 0;
-                if (len === 0) return;
-                const buf = audioCtx.createBuffer(2, len, 48000);
-                buf.copyToChannel(audio[0], 0);
-                buf.copyToChannel(audio[1], 1);
-                audioSource = audioCtx.createBufferSource();
-                audioSource.buffer = buf;
-                audioSource.connect(audioCtx.destination);
-                startAt = Math.max(audioCtx.currentTime, startAt);
-                audioSource.start(startAt);
-                startAt += buf.duration;
+                if (audio?.[0]?.length) {
+                    const buf = audioCtx.createBuffer(2, audio[0].length, 48000);
+                    buf.copyToChannel(audio[0], 0);
+                    buf.copyToChannel(audio[1], 1);
+                    audioSource = audioCtx.createBufferSource();
+                    audioSource.buffer = buf;
+                    audioSource.connect(gainNode);
+                    audioSource.playbackRate.setValueAtTime(state.playbackRate, audioCtx.currentTime);
+                    startAt = Math.max(audioCtx.currentTime, startAt);
+                    audioSource.start(startAt);
+                    startAt += buf.duration / state.playbackRate;
+                }
             }, 1000 / 30);
+            state.playing = true;
+            state.paused = false;
         }
         async function preview(time) {
             const { video } = await clip.tick(time * 1e6);
-            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            if (video) {
+                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                video.close();
+            }
         }
         async function init() {
             stop();
@@ -244,28 +276,27 @@ function artplayerProxyWebAV(option) {
                 });
             }
             try {
+                await Promise.resolve();
                 art.emit("video:loadstart", {
                     type: "loadstart"
                 });
                 const response = await fetch(option.url);
-                if (!response.body) {
-                    const error = new Error("No response body");
-                    art.emit("video:error", error);
-                    throw error;
-                }
+                if (!response.body) throw new Error("No response body");
                 clip = new (0, _avCliper.MP4Clip)(response.body);
             } catch (error) {
                 art.emit("video:error", error);
                 throw error;
             }
             const info = await clip.ready;
-            readyState = 4;
-            duration = Math.round(info.duration / 1e6);
-            videoWidth = info.width;
-            videoHeight = info.height;
-            canvas.width = videoWidth;
-            canvas.height = videoHeight;
-            preview(0.1);
+            Object.assign(state, {
+                readyState: 4,
+                duration: Math.round(info.duration / 1e6),
+                videoWidth: info.width,
+                videoHeight: info.height
+            });
+            canvas.width = state.videoWidth;
+            canvas.height = state.videoHeight;
+            await preview(0.1);
             art.emit("video:loadedmetadata", {
                 type: "loadedmetadata"
             });
@@ -288,81 +319,94 @@ function artplayerProxyWebAV(option) {
                 ]
         });
         def(canvas, "loadedTime", {
-            get: ()=>loadedTime
+            get: ()=>state.loadedTime
         });
         def(canvas, "duration", {
-            get: ()=>duration
+            get: ()=>state.duration
         });
         def(canvas, "videoWidth", {
-            get: ()=>videoWidth
+            get: ()=>state.videoWidth
         });
         def(canvas, "videoHeight", {
-            get: ()=>videoHeight
+            get: ()=>state.videoHeight
         });
         def(canvas, "volume", {
-            get: ()=>volume,
+            get: ()=>state.volume,
             set: (val)=>{
-                volume = val;
+                state.volume = Math.max(0, Math.min(1, val));
+                updateVolume();
                 art.emit("video:volumechange", {
                     type: "volumechange"
                 });
             }
         });
         def(canvas, "currentTime", {
-            get: ()=>currentTime,
+            get: ()=>state.currentTime,
             set: (val)=>{
-                currentTime = val;
-                preview(val);
+                const newTime = Math.max(0, Math.min(val, state.duration));
+                state.currentTime = newTime;
+                preview(newTime);
+                if (state.playing) {
+                    stop();
+                    play();
+                }
+                art.emit("video:timeupdate", {
+                    type: "timeupdate"
+                });
             }
         });
         def(canvas, "autoplay", {
-            get: ()=>autoplay,
+            get: ()=>state.autoplay,
             set: (val)=>{
-                autoplay = val;
+                state.autoplay = val;
+                if (val && state.readyState >= 4) canvas.play();
             }
         });
         def(canvas, "src", {
             get: ()=>option.url,
             set: (val)=>{
                 option.url = val;
-                init();
+                init().then(()=>{
+                    if (state.autoplay) canvas.play();
+                });
             }
         });
         def(canvas, "playbackRate", {
-            get: ()=>playbackRate,
+            get: ()=>state.playbackRate,
             set: (val)=>{
-                playbackRate = val;
+                state.playbackRate = Math.max(0.25, Math.min(2, val));
+                if (audioSource) audioSource.playbackRate.setValueAtTime(state.playbackRate, audioCtx.currentTime);
                 art.emit("video:ratechange", {
                     type: "ratechange"
                 });
             }
         });
         def(canvas, "playing", {
-            get: ()=>playing
+            get: ()=>state.playing
         });
         def(canvas, "paused", {
-            get: ()=>paused
+            get: ()=>state.paused
         });
         def(canvas, "ended", {
-            get: ()=>ended
+            get: ()=>state.ended
         });
         def(canvas, "readyState", {
-            get: ()=>readyState
+            get: ()=>state.readyState
         });
         def(canvas, "muted", {
-            get: ()=>muted,
+            get: ()=>state.muted,
             set: (val)=>{
-                muted = val;
+                state.muted = val;
+                updateVolume();
                 art.emit("video:volumechange", {
                     type: "volumechange"
                 });
             }
         });
+        // Define methods
         def(canvas, "play", {
             value: async ()=>{
-                play();
-                playing = true;
-                paused = false;
+                await play();
                 art.emit("video:play", {
                     type: "play"
                 });
@@ -374,8 +418,8 @@ function artplayerProxyWebAV(option) {
         def(canvas, "pause", {
             value: ()=>{
                 stop();
-                playing = false;
-                paused = true;
+                state.playing = false;
+                state.paused = true;
                 art.emit("video:pause", {
                     type: "pause"
                 });

docs/uncompiled/artplayer-proxy-webav/index.js.map

@@ -1 +1 @@
-{"mappings":"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CAAC,sBAAsB;oBAAE,MAAM;gBAAe;YAC1D;QACJ;QAEA,IAAI,QAAQ,QAAQ;YAChB,OAAO;gBACH;gBACA,UAAU;gBACV,SAAS;gBACT,IAAI,IAAI,CAAC,cAAc;oBAAE,MAAM;gBAAO;gBACtC,IAAI,IAAI,CAAC,iBAAiB;oBAAE,MAAM;gBAAU;YAChD;QACJ;QAEA,IAAI,QAAQ,SAAS;YACjB,OAAO;gBACH;gBACA,UAAU;gBACV,SAAS;gBACT,IAAI,IAAI,CAAC,eAAe;oBAAE,MAAM;gBAAQ;YAC5C;QACJ;QAEA,OAAO;IACX;AACJ;AAEA,IAAI,OAAO,WAAW,aAClB,MAAM,CAAC,sBAAsB,GAAG;;;ACxPpC,QAAQ,cAAc,GAAG,SAAU,CAAC;IAClC,OAAO,KAAK,EAAE,UAAU,GAAG,IAAI;QAAC,SAAS;IAAC;AAC5C;AAEA,QAAQ,iBAAiB,GAAG,SAAU,CAAC;IACrC,OAAO,cAAc,CAAC,GAAG,cAAc;QAAC,OAAO;IAAI;AACrD;AAEA,QAAQ,SAAS,GAAG,SAAU,MAAM,EAAE,IAAI;IACxC,OAAO,IAAI,CAAC,QAAQ,OAAO,CAAC,SAAU,GAAG;QACvC,IACE,QAAQ,aACR,QAAQ,gBACR,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,MAE3C;QAGF,OAAO,cAAc,CAAC,MAAM,KAAK;YAC/B,YAAY;YACZ,KAAK;gBACH,OAAO,MAAM,CAAC,IAAI;YACpB;QACF;IACF;IAEA,OAAO;AACT;AAEA,QAAQ,MAAM,GAAG,SAAU,IAAI,EAAE,QAAQ,EAAE,GAAG;IAC5C,OAAO,cAAc,CAAC,MAAM,UAAU;QACpC,YAAY;QACZ,KAAK;IACP;AACF;;;;;A,+C;A,gD;A,wD;A,wD;A,+C;A,6C;A,yC;A,6C;A,qD;A,qD;A,0C;A,mD;A,2D;A,mD;A,oD;A,qD;A,wD;A,wD;A,qD;A,8C;A,qD;A,+C;A,4D;A,0D;A,mD;A,iD;A,qD;A,sD;A,8C;A,+C;A,mD;A,yD;A,2D;A,iD;;;A,I,K,O,c;A,I,K,C;I,M,U;A;A,I,K,C,G,G,I,K,I,G,G,G;Q,Y,C;Q,c,C;Q,U,C;Q,O;I,K,C,C,E,G;A,I,I,C,G,G,I,G,G,O,K,W,I,K,G,I,K,C,G,G,I,E,G,C,M,G,Y;A,I,I,C,G,G,I,C,G,G,G,4B,I,E,I,C,K,E,G,C,E,G,I,C,G,G,I,E,G,C,K,G,uD,a,U,E,G,C,K,E,G,C,G,I,I,C,G,G,G,I,C,G,G,G,2B,I,E,I,C,G,K,E,G,C,G,Line truncated
+{"mappings":"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 truncated

packages/artplayer-proxy-webav/src/index.js

@@ -1,76 +1,103 @@
 import { MP4Clip } from '@webav/av-cliper';
 
-export default function artplayerProxyWebAV(option) {
+export default function artplayerProxyWebAV() {
     return (art) => {
         const { option, constructor } = art;
         const { createElement, def } = constructor.utils;
 
         const canvas = createElement('canvas');
         const ctx = canvas.getContext('2d');
-        const audioCtx = new AudioContext();
+        let audioCtx;
+        let gainNode;
 
         let clip = null;
         let timer = null;
         let audioSource = null;
 
-        let playing = false;
-        let duration = 0;
-        let videoWidth = 0;
-        let videoHeight = 0;
-        let currentTime = 0;
-        let loadedTime = 0;
-        let volume = 1;
-        let autoplay = false;
-        let playbackRate = 1;
-        let paused = true;
-        let ended = false;
-        let readyState = 0;
-        let muted = false;
+        const state = {
+            playing: false,
+            duration: 0,
+            videoWidth: 0,
+            videoHeight: 0,
+            currentTime: 0,
+            loadedTime: 0,
+            volume: 1,
+            autoplay: false,
+            playbackRate: 1,
+            paused: true,
+            ended: false,
+            readyState: 0,
+            muted: false,
+        };
 
         function reset() {
-            playing = false;
-            duration = 0;
-            videoWidth = 0;
-            videoHeight = 0;
-            currentTime = 0;
-            loadedTime = 0;
-            volume = 1;
-            autoplay = false;
-            playbackRate = 1;
-            paused = true;
-            ended = false;
-            readyState = 0;
-            muted = false;
+            Object.assign(state, {
+                playing: false,
+                duration: 0,
+                videoWidth: 0,
+                videoHeight: 0,
+                currentTime: 0,
+                loadedTime: 0,
+                volume: 1,
+                autoplay: false,
+                playbackRate: 1,
+                paused: true,
+                ended: false,
+                readyState: 0,
+                muted: false,
+            });
         }
 
         function stop() {
             clearInterval(timer);
-            audioSource?.stop();
+            if (audioSource) {
+                audioSource.stop();
+                audioSource = null;
+            }
         }
 
-        function play() {
-            let curTime = currentTime * 1e6;
+        function updateVolume() {
+            if (gainNode) {
+                const effectiveVolume = state.muted ? 0 : state.volume;
+                gainNode.gain.setValueAtTime(effectiveVolume, audioCtx.currentTime);
+            }
+        }
+
+        async function play() {
+            if (!audioCtx) {
+                audioCtx = new AudioContext();
+                gainNode = audioCtx.createGain();
+                gainNode.connect(audioCtx.destination);
+            }
+
+            let curTime = state.currentTime * 1e6;
             let startAt = 0;
             let first = true;
 
             stop();
 
-            timer = setInterval(async () => {
-                const { state, video, audio } = await clip.tick(Math.round(curTime));
+            updateVolume();
 
-                curTime += (1000 / 30) * 1000;
-                currentTime = curTime / 1e6;
+            timer = setInterval(async () => {
+                const { state: clipState, video, audio } = await clip.tick(Math.round(curTime));
+
+                curTime += (1000 / 30) * 1000 * state.playbackRate;
+                state.currentTime = curTime / 1e6;
 
                 art.emit('video:timeupdate', { type: 'timeupdate' });
 
-                if (state === 'done') {
-                    clearInterval(timer);
+                if (clipState === 'done') {
+                    stop();
+                    state.ended = true;
+                    state.playing = false;
+                    state.paused = true;
+                    art.emit('video:ended', { type: 'ended' });
                     return;
                 }
 
-                if (video != null && state === 'success') {
-                    ctx.clearRect(0, 0, videoWidth, videoHeight);
-                    ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
+                if (video && clipState === 'success') {
+                    ctx.clearRect(0, 0, state.videoWidth, state.videoHeight);
+                    ctx.drawImage(video, 0, 0, state.videoWidth, state.videoHeight);
                     video.close();
                 }
 
@@ -79,23 +106,30 @@ export default function artplayerProxyWebAV(option) {
                     return;
                 }
 
-                const len = audio[0]?.length ?? 0;
-                if (len === 0) return;
-                const buf = audioCtx.createBuffer(2, len, 48000);
-                buf.copyToChannel(audio[0], 0);
-                buf.copyToChannel(audio[1], 1);
-                audioSource = audioCtx.createBufferSource();
-                audioSource.buffer = buf;
-                audioSource.connect(audioCtx.destination);
-                startAt = Math.max(audioCtx.currentTime, startAt);
-                audioSource.start(startAt);
-                startAt += buf.duration;
+                if (audio?.[0]?.length) {
+                    const buf = audioCtx.createBuffer(2, audio[0].length, 48000);
+                    buf.copyToChannel(audio[0], 0);
+                    buf.copyToChannel(audio[1], 1);
+                    audioSource = audioCtx.createBufferSource();
+                    audioSource.buffer = buf;
+                    audioSource.connect(gainNode);
+                    audioSource.playbackRate.setValueAtTime(state.playbackRate, audioCtx.currentTime);
+                    startAt = Math.max(audioCtx.currentTime, startAt);
+                    audioSource.start(startAt);
+                    startAt += buf.duration / state.playbackRate;
+                }
             }, 1000 / 30);
+
+            state.playing = true;
+            state.paused = false;
         }
 
         async function preview(time) {
             const { video } = await clip.tick(time * 1e6);
-            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            if (video) {
+                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                video.close();
+            }
         }
 
         async function init() {
@@ -109,13 +143,12 @@ export default function artplayerProxyWebAV(option) {
             }
 
             try {
+                await Promise.resolve();
                 art.emit('video:loadstart', { type: 'loadstart' });
                 const response = await fetch(option.url);
 
                 if (!response.body) {
-                    const error = new Error('No response body');
-                    art.emit('video:error', error);
-                    throw error;
+                    throw new Error('No response body');
                 }
 
                 clip = new MP4Clip(response.body);
@@ -126,14 +159,16 @@ export default function artplayerProxyWebAV(option) {
 
             const info = await clip.ready;
 
-            readyState = 4;
-            duration = Math.round(info.duration / 1e6);
-            videoWidth = info.width;
-            videoHeight = info.height;
+            Object.assign(state, {
+                readyState: 4,
+                duration: Math.round(info.duration / 1e6),
+                videoWidth: info.width,
+                videoHeight: info.height,
+            });
 
-            canvas.width = videoWidth;
-            canvas.height = videoHeight;
-            preview(0.1);
+            canvas.width = state.videoWidth;
+            canvas.height = state.videoHeight;
+            await preview(0.1);
 
             art.emit('video:loadedmetadata', { type: 'loadedmetadata' });
             art.emit('video:durationchange', { type: 'durationchange' });
@@ -147,41 +182,51 @@ export default function artplayerProxyWebAV(option) {
         });
 
         def(canvas, 'loadedTime', {
-            get: () => loadedTime,
+            get: () => state.loadedTime,
         });
 
         def(canvas, 'duration', {
-            get: () => duration,
+            get: () => state.duration,
         });
 
         def(canvas, 'videoWidth', {
-            get: () => videoWidth,
+            get: () => state.videoWidth,
         });
 
         def(canvas, 'videoHeight', {
-            get: () => videoHeight,
+            get: () => state.videoHeight,
         });
 
         def(canvas, 'volume', {
-            get: () => volume,
+            get: () => state.volume,
             set: (val) => {
-                volume = val;
+                state.volume = Math.max(0, Math.min(1, val));
+                updateVolume();
                 art.emit('video:volumechange', { type: 'volumechange' });
             },
         });
 
         def(canvas, 'currentTime', {
-            get: () => currentTime,
+            get: () => state.currentTime,
             set: (val) => {
-                currentTime = val;
-                preview(val);
+                const newTime = Math.max(0, Math.min(val, state.duration));
+                state.currentTime = newTime;
+                preview(newTime);
+                if (state.playing) {
+                    stop();
+                    play();
+                }
+                art.emit('video:timeupdate', { type: 'timeupdate' });
             },
         });
 
         def(canvas, 'autoplay', {
-            get: () => autoplay,
+            get: () => state.autoplay,
             set: (val) => {
-                autoplay = val;
+                state.autoplay = val;
+                if (val && state.readyState >= 4) {
+                    canvas.play();
+                }
             },
         });
 
@@ -189,47 +234,54 @@ export default function artplayerProxyWebAV(option) {
             get: () => option.url,
             set: (val) => {
                 option.url = val;
-                init();
+                init().then(() => {
+                    if (state.autoplay) {
+                        canvas.play();
+                    }
+                });
             },
         });
 
         def(canvas, 'playbackRate', {
-            get: () => playbackRate,
+            get: () => state.playbackRate,
             set: (val) => {
-                playbackRate = val;
+                state.playbackRate = Math.max(0.25, Math.min(2, val));
+                if (audioSource) {
+                    audioSource.playbackRate.setValueAtTime(state.playbackRate, audioCtx.currentTime);
+                }
                 art.emit('video:ratechange', { type: 'ratechange' });
             },
         });
 
         def(canvas, 'playing', {
-            get: () => playing,
+            get: () => state.playing,
         });
 
         def(canvas, 'paused', {
-            get: () => paused,
+            get: () => state.paused,
         });
 
         def(canvas, 'ended', {
-            get: () => ended,
+            get: () => state.ended,
         });
 
         def(canvas, 'readyState', {
-            get: () => readyState,
+            get: () => state.readyState,
         });
 
         def(canvas, 'muted', {
-            get: () => muted,
+            get: () => state.muted,
             set: (val) => {
-                muted = val;
+                state.muted = val;
+                updateVolume();
                 art.emit('video:volumechange', { type: 'volumechange' });
             },
         });
 
+        // Define methods
         def(canvas, 'play', {
             value: async () => {
-                play();
-                playing = true;
-                paused = false;
+                await play();
                 art.emit('video:play', { type: 'play' });
                 art.emit('video:playing', { type: 'playing' });
             },
@@ -238,8 +290,8 @@ export default function artplayerProxyWebAV(option) {
         def(canvas, 'pause', {
             value: () => {
                 stop();
-                playing = false;
-                paused = true;
+                state.playing = false;
+                state.paused = true;
                 art.emit('video:pause', { type: 'pause' });
             },
         });