build all packages

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

@@ -1,8 +1,101 @@
+import './index.scss';
+
 function artplayerPluginPlaylist(art) {
+    const {
+        utils: { append, errorHandle },
+    } = 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 $playlistInner = $playlist.querySelector('.artplay-playlist-inner');
+    let playlist = [];
+
+    art.on('afterAttachUrl', () => {
+        const index = playlist.findIndex(item => item.url === $video.src);
+        const $children = Array.from($playlistInner.children);
+        const $item = $children[index];
+        if (index !== -1 && $item) {
+            $children.forEach(item => item.classList.remove('active'));
+            $item.classList.add('active');
+        }
+    });
+
+    function switchUrl(index) {
+        const itemOption = playlist[index];
+        player.switchUrl(itemOption.url, itemOption.title).then(() => {
+            player.play();
+        });
+    }
+
+    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';
+        }
+    });
+
     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;
+            });
+            $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() {
+            const index = playlist.findIndex(item => item.url === $video.src);
+            errorHandle(index !== -1, "Can't find Playlist item");
+            if (playlist.length === 1) {
+                switchUrl(0);
+            } else {
+                const nextIndex = index + 1 === playlist.length ? 0 : index + 1;
+                switchUrl(nextIndex);
+            }
+        },
+        prev() {
+            const index = playlist.findIndex(item => item.url === $video.src);
+            errorHandle(index !== -1, "Can't find Playlist item");
+            if (playlist.length === 1) {
+                switchUrl(0);
+            } else {
+                const prevIndex = index - 1 === -1 ? playlist.length - 1 : index - 1;
+                switchUrl(prevIndex);
+            }
+        },
     };
 }
 
 window.artplayerPluginPlaylist = artplayerPluginPlaylist;
-export default artplayerPluginPlaylist;
+export default artplayerPluginPlaylist;

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

@@ -0,0 +1,39 @@
+.artplayer-video-player {
+    .artplay-playlist {
+        display: none;
+        position: absolute;
+        z-index: 120;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+
+        .artplay-playlist-inner {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            width: 50%;
+            height: 100%;
+            font-size: 12px;
+            background: rgba(0, 0, 0, 0.8);
+            overflow: auto;
+
+            .artplay-playlist-item {
+                cursor: pointer;
+                border-bottom: 1px solid rgba(255,255,255,.1);
+                padding: 12px 20px 12px 20px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+
+                &:hover, &.active {
+                    color: #00a1d6;
+                    background: rgba(255, 255, 255, 0.1);
+                }
+            }
+        }
+    }
+}