build all packages

packages/artplayer-plugin-playlist/README.md

@@ -4,7 +4,7 @@ Playlist plugin for ArtPlayer
 
 ## Demo
 
-[Checkout the demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-playlist.js&example=playlist) from Github Pages
+[Checkout the demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-playlist.js%0A.%2Funcompiled%2Fartplayer-plugin-playlist.css&example=playlist) from Github Pages
 
 ## Install
 
@@ -40,6 +40,30 @@ var art = new Artplayer({
     url: 'path/to/video.mp4',
     plugins: [artplayerPluginPlaylist],
 });
+
+// Load Playlist
+art.plugins.artplayerPluginPlaylist.load([
+    {
+        title: 'video01',
+        url: 'path/to/video01.mp4',
+    },
+    {
+        title: 'video02',
+        url: 'path/to/video02.mp4',
+    },
+]);
+
+// Hide Playlist
+art.plugins.artplayerPluginPlaylist.hide();
+
+// Hide Playlist
+art.plugins.artplayerPluginPlaylist.hide();
+
+// Next Playlist item
+art.plugins.artplayerPluginPlaylist.next();
+
+// Prev Playlist item
+art.plugins.artplayerPluginPlaylist.prev();
 ```
 
 ## License

packages/artplayer-plugin-playlist/dist/artplayer-plugin-playlist.css

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

packages/artplayer-plugin-playlist/dist/artplayer-plugin-playlist.js

@@ -0,0 +1,8 @@
+/*!
+ * artplayer-plugin-playlist.js v3.1.6
+ * Github: https://github.com/zhw2590582/ArtPlayer#readme
+ * (c) 2017-2019 Harvey Zack
+ * Released under the MIT License.
+ */
+
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self)["artplayer-plugin-playlist"]=n()}(this,function(){"use strict";function t(t){var n=t.constructor.utils,e=n.append,i=n.errorHandle,r=t.player,l=t.events.proxy,a=t.template,o=a.$player,s=a.$video,u=e(o,'\n        <div class="artplay-playlist">\n            <div class="artplay-playlist-inner"></div>\n        </div>\n    '),c=u.querySelector(".artplay-playlist-inner"),y=[];function d(t){var n=y[t];r.switchUrl(n.url,n.title).then(function(){r.play()})}return t.on("afterAttachUrl",function(){var t=y.findIndex(function(t){return t.url===s.src}),n=Array.from(c.children),e=n[t];-1!==t&&e&&(n.forEach(function(t){return t.classList.remove("active")}),e.classList.add("active"))}),l(c,"click",function(t){var n=t.target.dataset.optionIndex;n&&Number(n)<=y.length-1&&d(n)}),l(u,"click",function(t){t.target===u&&(u.style.display="none")}),{name:"artplayerPluginPlaylist",load:function(t){i(Array.isArray(t),"Playlist is not an array type"),i(0<t.length,"Playlist cannot be empty"),y=t.map(function(t){return i(t.url,"Playlist items require url attribute"),i(t.title,"Playlist items require title attribute"),t}),c.innerHTML=y.map(function(t,n){return'<div class="artplay-playlist-item" data-option-index="'.concat(n,'">').concat(t.title,"</div>")}).join("")},show:function(){u.style.display="flex"},hide:function(){u.style.display="none"},next:function(){var t=y.findIndex(function(t){return t.url===s.src});(i(-1!==t,"Can't find Playlist item"),1===y.length)?d(0):d(t+1===y.length?0:t+1)},prev:function(){var t=y.findIndex(function(t){return t.url===s.src});(i(-1!==t,"Can't find Playlist item"),1===y.length)?d(0):d(t-1==-1?y.length-1:t-1)}}}return window.artplayerPluginPlaylist=t});

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);
+                }
+            }
+        }
+    }
+}