调整播放列表接口

packages/artplayer-plugin-playlist/README.md

@@ -40,21 +40,20 @@ Will expose the global variable to `window.artplayerPluginPlaylist`.
 var art = new Artplayer({
     container: '.artplayer-app',
     url: 'path/to/video.mp4',
-    plugins: [artplayerPluginPlaylist],
+    plugins: [
+        artplayerPluginPlaylist([
+            {
+                title: 'video01',
+                url: 'path/to/video01.mp4',
+            },
+            {
+                title: 'video02',
+                url: 'path/to/video02.mp4',
+            },
+        ]),
+    ],
 });
 
-// Load Playlist
-art.plugins.artplayerPluginPlaylist.load([
-    {
-        title: 'video01',
-        url: 'path/to/video01.mp4',
-    },
-    {
-        title: 'video02',
-        url: 'path/to/video02.mp4',
-    },
-]);
-
 // Show Playlist
 art.plugins.artplayerPluginPlaylist.show();
 

packages/artplayer-plugin-playlist/src/index.js

@@ -1,109 +1,109 @@
 import './index.scss';
 
-function artplayerPluginPlaylist(art) {
-    const {
-        utils: { append, errorHandle, sleep, inverseClass },
-    } = art.constructor;
-    const {
-        player,
-        events: { proxy },
-        template: { $player, $video },
-    } = art;
+function artplayerPluginPlaylist(list) {
+    return art => {
+        const {
+            utils: { append, errorHandle, sleep, inverseClass },
+        } = art.constructor;
+        const {
+            player,
+            events: { proxy },
+            template: { $player, $video },
+        } = art;
 
-    const $playlist = append(
-        $player,
-        `
-        <div class="artplay-playlist">
-            <div class="artplay-playlist-inner"></div>
-        </div>
-    `,
-    );
+        const $playlist = append(
+            $player,
+            `
+            <div class="artplay-playlist">
+                <div class="artplay-playlist-inner"></div>
+            </div>
+        `,
+        );
 
-    let playlist = [];
-    const $playlistInner = $playlist.querySelector('.artplay-playlist-inner');
-
-    function switchUrl(index) {
-        const itemOption = playlist[index];
-        return player.switchUrl(itemOption.url, itemOption.title).then(() => {
-            art.emit('artplayerPluginPlaylist:change', itemOption);
+        errorHandle(Array.isArray(list), 'Playlist is not an array type');
+        errorHandle(list.length > 0, 'Playlist cannot be empty');
+        const playlist = list.map(item => {
+            errorHandle(item.url, 'Playlist items require url attribute');
+            errorHandle(item.title, 'Playlist items require title attribute');
+            return item;
         });
-    }
 
-    function prevVideo() {
-        const index = playlist.findIndex(item => item.url === $video.src);
-        errorHandle(index !== -1, "Can't find Playlist item");
-        if (playlist.length === 1) {
-            return switchUrl(0);
-        }
-        const prevIndex = index - 1 === -1 ? playlist.length - 1 : index - 1;
-        return switchUrl(prevIndex);
-    }
+        const $playlistInner = $playlist.querySelector('.artplay-playlist-inner');
+        $playlistInner.innerHTML = playlist
+            .map((item, index) => {
+                return `<div class="artplay-playlist-item" data-option-index="${index}">${item.title}</div>`;
+            })
+            .join('');
 
-    function nextVideo() {
-        const index = playlist.findIndex(item => item.url === $video.src);
-        errorHandle(index !== -1, "Can't find Playlist item");
-        if (playlist.length === 1) {
-            return switchUrl(0);
-        }
-        const nextIndex = index + 1 === playlist.length ? 0 : index + 1;
-        return switchUrl(nextIndex);
-    }
-
-    proxy($playlistInner, 'click', e => {
-        const { optionIndex } = e.target.dataset;
-        if (optionIndex && Number(optionIndex) <= playlist.length - 1) {
-            switchUrl(optionIndex);
-        }
-    });
-
-    proxy($playlist, 'click', e => {
-        if (e.target === $playlist) {
-            $playlist.style.display = 'none';
-        }
-    });
-
-    art.on('video:ended', () => {
-        nextVideo().then(() => {
-            sleep(1000).then(player.play);
-        });
-    });
-
-    art.on('afterAttachUrl', () => {
-        const index = playlist.findIndex(item => item.url === $video.src);
-        const $item = Array.from($playlistInner.children)[index];
-        if (index !== -1 && $item) {
-            inverseClass($item, 'active');
-        }
-    });
-
-    return {
-        name: 'artplayerPluginPlaylist',
-        load(list) {
-            errorHandle(Array.isArray(list), 'Playlist is not an array type');
-            errorHandle(list.length > 0, 'Playlist cannot be empty');
-            playlist = list.map(item => {
-                errorHandle(item.url, 'Playlist items require url attribute');
-                errorHandle(item.title, 'Playlist items require title attribute');
-                return item;
+        function switchUrl(index) {
+            const itemOption = playlist[index];
+            return player.switchUrl(itemOption.url, itemOption.title).then(() => {
+                art.emit('artplayerPluginPlaylist:change', itemOption);
             });
-            $playlistInner.innerHTML = playlist
-                .map((item, index) => {
-                    return `<div class="artplay-playlist-item" data-option-index="${index}">${item.title}</div>`;
-                })
-                .join('');
-        },
-        show() {
-            $playlist.style.display = 'flex';
-        },
-        hide() {
-            $playlist.style.display = 'none';
-        },
-        next() {
-            nextVideo();
-        },
-        prev() {
-            prevVideo();
-        },
+        }
+
+        function prevVideo() {
+            const index = playlist.findIndex(item => item.url === $video.src);
+            errorHandle(index !== -1, "Can't find Playlist item");
+            if (playlist.length === 1) {
+                return switchUrl(0);
+            }
+            const prevIndex = index - 1 === -1 ? playlist.length - 1 : index - 1;
+            return switchUrl(prevIndex);
+        }
+
+        function nextVideo() {
+            const index = playlist.findIndex(item => item.url === $video.src);
+            errorHandle(index !== -1, "Can't find Playlist item");
+            if (playlist.length === 1) {
+                return switchUrl(0);
+            }
+            const nextIndex = index + 1 === playlist.length ? 0 : index + 1;
+            return switchUrl(nextIndex);
+        }
+
+        proxy($playlistInner, 'click', e => {
+            const { optionIndex } = e.target.dataset;
+            if (optionIndex && Number(optionIndex) <= playlist.length - 1) {
+                switchUrl(optionIndex);
+            }
+        });
+
+        proxy($playlist, 'click', e => {
+            if (e.target === $playlist) {
+                $playlist.style.display = 'none';
+            }
+        });
+
+        art.on('video:ended', () => {
+            nextVideo().then(() => {
+                sleep(1000).then(player.play);
+            });
+        });
+
+        art.on('afterAttachUrl', () => {
+            const index = playlist.findIndex(item => item.url === $video.src);
+            const $item = Array.from($playlistInner.children)[index];
+            if (index !== -1 && $item) {
+                inverseClass($item, 'active');
+            }
+        });
+
+        return {
+            name: 'artplayerPluginPlaylist',
+            show() {
+                $playlist.style.display = 'flex';
+            },
+            hide() {
+                $playlist.style.display = 'none';
+            },
+            next() {
+                nextVideo();
+            },
+            prev() {
+                prevVideo();
+            },
+        };
     };
 }
 

packages/artplayer/src/player/currentTimeMix.js

@@ -1,13 +1,9 @@
-import { clamp, errorHandle } from '../utils';
+import { clamp } from '../utils';
 
 export default function currentTimeMix(art, player) {
     Object.defineProperty(player, 'currentTime', {
         get: () => art.template.$video.currentTime || 0,
         set: currentTime => {
-            errorHandle(
-                player.duration,
-                'Cannot set current time, the video seems to be not ready for mate information.',
-            );
             art.template.$video.currentTime = clamp(currentTime, 0, player.duration);
         },
     });