From 97646bc7297fed0123269d8ca10721663f387b5e Mon Sep 17 00:00:00 2001 From: Harvey Date: Fri, 22 Nov 2019 18:00:32 +0800 Subject: [PATCH] fix artplayer-plugin-playlist --- docs/uncompiled/artplayer-plugin-playlist.css | 2 +- .../uncompiled/artplayer-plugin-playlist.css.map | 2 +- docs/uncompiled/artplayer-plugin-playlist.js | 16 ++++++++-------- docs/uncompiled/artplayer-plugin-playlist.js.map | 2 +- packages/artplayer-plugin-playlist/src/index.js | 14 +++++++------- .../artplayer-plugin-playlist/src/index.scss | 14 +++++++------- 6 files changed, 25 insertions(+), 25 deletions(-) diff --git a/docs/uncompiled/artplayer-plugin-playlist.css b/docs/uncompiled/artplayer-plugin-playlist.css index 671f0dc26..900bb043c 100644 --- a/docs/uncompiled/artplayer-plugin-playlist.css +++ b/docs/uncompiled/artplayer-plugin-playlist.css @@ -1,2 +1,2 @@ -.artplayer-video-player .artplayer-playlist{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;z-index:120;left:0;top:0;height:100%;width:100%;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden}.artplayer-video-player .artplayer-playlist .artplayer-playlist-inner{position:absolute;top:0;right:-300px;bottom:0;width:300px;height:100%;font-size:12px;background:rgba(0,0,0,.8);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;overflow:auto}.artplayer-video-player .artplayer-playlist .artplayer-playlist-inner .artplayer-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 .artplayer-playlist .artplayer-playlist-inner .artplayer-playlist-item.active,.artplayer-video-player .artplayer-playlist .artplayer-playlist-inner .artplayer-playlist-item:hover{color:#00a1d6;background:hsla(0,0%,100%,.1)}.artplayer-video-player.artplayer-playlist-show .artplayer-playlist{opacity:1;visibility:visible;pointer-events:auto}.artplayer-video-player.artplayer-playlist-show .artplayer-playlist .artplayer-playlist-inner{right:0} +.art-video-player .art-playlist{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;z-index:120;left:0;top:0;height:100%;width:100%;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden}.art-video-player .art-playlist .art-playlist-inner{position:absolute;top:0;right:-300px;bottom:0;width:300px;height:100%;font-size:12px;background:rgba(0,0,0,.8);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;overflow:auto}.art-video-player .art-playlist .art-playlist-inner .art-playlist-item{cursor:pointer;border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.art-video-player .art-playlist .art-playlist-inner .art-playlist-item.active,.art-video-player .art-playlist .art-playlist-inner .art-playlist-item:hover{color:#00a1d6;background:hsla(0,0%,100%,.1)}.art-video-player.art-playlist-show .art-playlist{opacity:1;visibility:visible;pointer-events:auto}.art-video-player.art-playlist-show .art-playlist .art-playlist-inner{right:0} /*# sourceMappingURL=artplayer-plugin-playlist.css.map */ \ No newline at end of file diff --git a/docs/uncompiled/artplayer-plugin-playlist.css.map b/docs/uncompiled/artplayer-plugin-playlist.css.map index 0f839e7b4..c1b34d5f9 100644 --- a/docs/uncompiled/artplayer-plugin-playlist.css.map +++ b/docs/uncompiled/artplayer-plugin-playlist.css.map @@ -1 +1 @@ -{"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA,4CACE,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAAuB,CACvB,iBAAkB,CAClB,WAAY,CACZ,MAAO,CACP,KAAM,CACN,WAAY,CACZ,UAAW,CACX,SAAU,CACV,iBAAkB,CAClB,mBAAoB,CACpB,eAAkB,CAClB,sEACE,iBAAkB,CAClB,KAAM,CACN,YAAa,CACb,QAAS,CACT,WAAY,CACZ,WAAY,CACZ,cAAe,CACf,yBAA8B,CAC9B,sCAAgC,CAAhC,8BAAgC,CAChC,aAAgB,CAChB,+FACE,cAAe,CACf,0CAAiD,CACjD,iBAA4B,CAC5B,sBAAuB,CACvB,eAAgB,CAChB,kBAAqB,CACrB,2MACE,aAAc,CACd,6BAAsC,CAE9C,oEACE,SAAU,CACV,kBAAmB,CACnB,mBAAsB,CACtB,8FACE,OAAU","file":"artplayer-plugin-playlist.css","sourcesContent":[".artplayer-video-player .artplayer-playlist {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n z-index: 120;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n overflow: hidden; }\n .artplayer-video-player .artplayer-playlist .artplayer-playlist-inner {\n position: absolute;\n top: 0;\n right: -300px;\n bottom: 0;\n width: 300px;\n height: 100%;\n font-size: 12px;\n background: rgba(0, 0, 0, 0.8);\n transition: all 0.2s ease-in-out;\n overflow: auto; }\n .artplayer-video-player .artplayer-playlist .artplayer-playlist-inner .artplayer-playlist-item {\n cursor: pointer;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n padding: 12px 20px 12px 20px;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap; }\n .artplayer-video-player .artplayer-playlist .artplayer-playlist-inner .artplayer-playlist-item:hover, .artplayer-video-player .artplayer-playlist .artplayer-playlist-inner .artplayer-playlist-item.active {\n color: #00a1d6;\n background: rgba(255, 255, 255, 0.1); }\n\n.artplayer-video-player.artplayer-playlist-show .artplayer-playlist {\n opacity: 1;\n visibility: visible;\n pointer-events: auto; }\n .artplayer-video-player.artplayer-playlist-show .artplayer-playlist .artplayer-playlist-inner {\n right: 0; }\n"]} \ No newline at end of file +{"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA,gCACE,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAAuB,CACvB,iBAAkB,CAClB,WAAY,CACZ,MAAO,CACP,KAAM,CACN,WAAY,CACZ,UAAW,CACX,SAAU,CACV,iBAAkB,CAClB,mBAAoB,CACpB,eAAkB,CAClB,oDACE,iBAAkB,CAClB,KAAM,CACN,YAAa,CACb,QAAS,CACT,WAAY,CACZ,WAAY,CACZ,cAAe,CACf,yBAA8B,CAC9B,sCAAgC,CAAhC,8BAAgC,CAChC,aAAgB,CAChB,uEACE,cAAe,CACf,0CAAiD,CACjD,iBAA4B,CAC5B,sBAAuB,CACvB,eAAgB,CAChB,kBAAqB,CACrB,2JACE,aAAc,CACd,6BAAsC,CAE9C,kDACE,SAAU,CACV,kBAAmB,CACnB,mBAAsB,CACtB,sEACE,OAAU","file":"artplayer-plugin-playlist.css","sourcesContent":[".art-video-player .art-playlist {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n z-index: 120;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n overflow: hidden; }\n .art-video-player .art-playlist .art-playlist-inner {\n position: absolute;\n top: 0;\n right: -300px;\n bottom: 0;\n width: 300px;\n height: 100%;\n font-size: 12px;\n background: rgba(0, 0, 0, 0.8);\n transition: all 0.2s ease-in-out;\n overflow: auto; }\n .art-video-player .art-playlist .art-playlist-inner .art-playlist-item {\n cursor: pointer;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n padding: 12px 20px 12px 20px;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap; }\n .art-video-player .art-playlist .art-playlist-inner .art-playlist-item:hover, .art-video-player .art-playlist .art-playlist-inner .art-playlist-item.active {\n color: #00a1d6;\n background: rgba(255, 255, 255, 0.1); }\n\n.art-video-player.art-playlist-show .art-playlist {\n opacity: 1;\n visibility: visible;\n pointer-events: auto; }\n .art-video-player.art-playlist-show .art-playlist .art-playlist-inner {\n right: 0; }\n"]} \ No newline at end of file diff --git a/docs/uncompiled/artplayer-plugin-playlist.js b/docs/uncompiled/artplayer-plugin-playlist.js index 1f511ee66..a854c70ef 100644 --- a/docs/uncompiled/artplayer-plugin-playlist.js +++ b/docs/uncompiled/artplayer-plugin-playlist.js @@ -2,7 +2,7 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = global || self, global.artplayerPluginPlaylist = factory()); -}(this, function () { 'use strict'; +}(this, (function () { 'use strict'; function artplayerPluginPlaylist(list) { return function (art) { @@ -16,7 +16,7 @@ _art$template = art.template, $player = _art$template.$player, $video = _art$template.$video; - var $playlist = append($player, "\n
\n
\n
\n "); + var $playlist = append($player, "\n
\n
\n
\n "); errorHandle(Array.isArray(list), 'Playlist is not an array type'); errorHandle(list.length > 0, 'Playlist cannot be empty'); var playlist = list.map(function (item) { @@ -24,9 +24,9 @@ errorHandle(item.title, 'Playlist items require title attribute'); return item; }); - var $playlistInner = $playlist.querySelector('.artplayer-playlist-inner'); + var $playlistInner = $playlist.querySelector('.art-playlist-inner'); $playlistInner.innerHTML = playlist.map(function (item, index) { - return "
").concat(item.title, "
"); + return "
").concat(item.title, "
"); }).join(''); function switchUrl(index) { @@ -73,7 +73,7 @@ }); proxy($playlist, 'click', function (e) { if (e.target === $playlist) { - $player.classList.remove('artplayer-playlist-show'); + $player.classList.remove('art-playlist-show'); } }); art.on('video:ended', function () { @@ -96,10 +96,10 @@ return { name: 'artplayerPluginPlaylist', show: function show() { - $player.classList.add('artplayer-playlist-show'); + $player.classList.add('art-playlist-show'); }, hide: function hide() { - $player.classList.remove('artplayer-playlist-show'); + $player.classList.remove('art-playlist-show'); }, next: function next() { nextVideo(); @@ -113,5 +113,5 @@ return artplayerPluginPlaylist; -})); +}))); //# sourceMappingURL=artplayer-plugin-playlist.js.map diff --git a/docs/uncompiled/artplayer-plugin-playlist.js.map b/docs/uncompiled/artplayer-plugin-playlist.js.map index 29f4dbe9d..a32b836bc 100644 --- a/docs/uncompiled/artplayer-plugin-playlist.js.map +++ b/docs/uncompiled/artplayer-plugin-playlist.js.map @@ -1 +1 @@ -{"version":3,"file":"artplayer-plugin-playlist.js","sources":["../../packages/artplayer-plugin-playlist/src/index.js"],"sourcesContent":["import './index.scss';\n\nfunction artplayerPluginPlaylist(list) {\n return art => {\n const {\n utils: { append, errorHandle, sleep, inverseClass },\n } = art.constructor;\n const {\n player,\n events: { proxy },\n template: { $player, $video },\n } = art;\n\n const $playlist = append(\n $player,\n `\n
\n
\n
\n `,\n );\n\n errorHandle(Array.isArray(list), 'Playlist is not an array type');\n errorHandle(list.length > 0, 'Playlist cannot be empty');\n const playlist = list.map(item => {\n errorHandle(item.url, 'Playlist items require url attribute');\n errorHandle(item.title, 'Playlist items require title attribute');\n return item;\n });\n\n const $playlistInner = $playlist.querySelector('.artplayer-playlist-inner');\n $playlistInner.innerHTML = playlist\n .map((item, index) => {\n return `
${item.title}
`;\n })\n .join('');\n\n function switchUrl(index) {\n const itemOption = playlist[index];\n return player.switchUrl(itemOption.url, itemOption.title).then(() => {\n art.emit('artplayerPluginPlaylist:change', itemOption);\n });\n }\n\n function prevVideo() {\n const index = playlist.findIndex(item => item.url === $video.src);\n errorHandle(index !== -1, \"Can't find Playlist item\");\n if (playlist.length === 1) {\n return switchUrl(0);\n }\n const prevIndex = index - 1 === -1 ? playlist.length - 1 : index - 1;\n return switchUrl(prevIndex);\n }\n\n function nextVideo() {\n const index = playlist.findIndex(item => item.url === $video.src);\n errorHandle(index !== -1, \"Can't find Playlist item\");\n if (playlist.length === 1) {\n return switchUrl(0);\n }\n const nextIndex = index + 1 === playlist.length ? 0 : index + 1;\n return switchUrl(nextIndex);\n }\n\n proxy($playlistInner, 'click', e => {\n const { optionIndex } = e.target.dataset;\n if (optionIndex && Number(optionIndex) <= playlist.length - 1) {\n switchUrl(optionIndex);\n }\n });\n\n proxy($playlist, 'click', e => {\n if (e.target === $playlist) {\n $player.classList.remove('artplayer-playlist-show');\n }\n });\n\n art.on('video:ended', () => {\n nextVideo().then(() => {\n sleep(1000).then(() => {\n player.play = true;\n });\n });\n });\n\n art.on('afterAttachUrl', () => {\n const index = playlist.findIndex(item => item.url === $video.src);\n const $item = Array.from($playlistInner.children)[index];\n if (index !== -1 && $item) {\n inverseClass($item, 'active');\n }\n });\n\n return {\n name: 'artplayerPluginPlaylist',\n show() {\n $player.classList.add('artplayer-playlist-show');\n },\n hide() {\n $player.classList.remove('artplayer-playlist-show');\n },\n next() {\n nextVideo();\n },\n prev() {\n prevVideo();\n },\n };\n };\n}\n\nexport default artplayerPluginPlaylist;\n"],"names":["artplayerPluginPlaylist","list","art","constructor","utils","append","errorHandle","sleep","inverseClass","player","proxy","events","template","$player","$video","$playlist","Array","isArray","length","playlist","map","item","url","title","$playlistInner","querySelector","innerHTML","index","join","switchUrl","itemOption","then","emit","prevVideo","findIndex","src","prevIndex","nextVideo","nextIndex","e","optionIndex","target","dataset","Number","classList","remove","on","play","$item","from","children","name","show","add","hide","next","prev"],"mappings":";;;;;;IAEA,SAASA,uBAAT,CAAiCC,IAAjC,EAAuC;IACnC,SAAO,UAAAC,GAAG,EAAI;IAAA,gCAGNA,GAAG,CAACC,WAHE,CAENC,KAFM;IAAA,QAEGC,MAFH,yBAEGA,MAFH;IAAA,QAEWC,WAFX,yBAEWA,WAFX;IAAA,QAEwBC,KAFxB,yBAEwBA,KAFxB;IAAA,QAE+BC,YAF/B,yBAE+BA,YAF/B;IAAA,QAKNC,MALM,GAQNP,GARM,CAKNO,MALM;IAAA,QAMIC,KANJ,GAQNR,GARM,CAMNS,MANM,CAMID,KANJ;IAAA,wBAQNR,GARM,CAONU,QAPM;IAAA,QAOMC,OAPN,iBAOMA,OAPN;IAAA,QAOeC,MAPf,iBAOeA,MAPf;IAUV,QAAMC,SAAS,GAAGV,MAAM,CACpBQ,OADoB,6KAAxB;IASAP,IAAAA,WAAW,CAACU,KAAK,CAACC,OAAN,CAAchB,IAAd,CAAD,EAAsB,+BAAtB,CAAX;IACAK,IAAAA,WAAW,CAACL,IAAI,CAACiB,MAAL,GAAc,CAAf,EAAkB,0BAAlB,CAAX;IACA,QAAMC,QAAQ,GAAGlB,IAAI,CAACmB,GAAL,CAAS,UAAAC,IAAI,EAAI;IAC9Bf,MAAAA,WAAW,CAACe,IAAI,CAACC,GAAN,EAAW,sCAAX,CAAX;IACAhB,MAAAA,WAAW,CAACe,IAAI,CAACE,KAAN,EAAa,wCAAb,CAAX;IACA,aAAOF,IAAP;IACH,KAJgB,CAAjB;IAMA,QAAMG,cAAc,GAAGT,SAAS,CAACU,aAAV,CAAwB,2BAAxB,CAAvB;IACAD,IAAAA,cAAc,CAACE,SAAf,GAA2BP,QAAQ,CAC9BC,GADsB,CAClB,UAACC,IAAD,EAAOM,KAAP,EAAiB;IAClB,kFAAkEA,KAAlE,gBAA4EN,IAAI,CAACE,KAAjF;IACH,KAHsB,EAItBK,IAJsB,CAIjB,EAJiB,CAA3B;;IAMA,aAASC,SAAT,CAAmBF,KAAnB,EAA0B;IACtB,UAAMG,UAAU,GAAGX,QAAQ,CAACQ,KAAD,CAA3B;IACA,aAAOlB,MAAM,CAACoB,SAAP,CAAiBC,UAAU,CAACR,GAA5B,EAAiCQ,UAAU,CAACP,KAA5C,EAAmDQ,IAAnD,CAAwD,YAAM;IACjE7B,QAAAA,GAAG,CAAC8B,IAAJ,CAAS,gCAAT,EAA2CF,UAA3C;IACH,OAFM,CAAP;IAGH;;IAED,aAASG,SAAT,GAAqB;IACjB,UAAMN,KAAK,GAAGR,QAAQ,CAACe,SAAT,CAAmB,UAAAb,IAAI;IAAA,eAAIA,IAAI,CAACC,GAAL,KAAaR,MAAM,CAACqB,GAAxB;IAAA,OAAvB,CAAd;IACA7B,MAAAA,WAAW,CAACqB,KAAK,KAAK,CAAC,CAAZ,EAAe,0BAAf,CAAX;;IACA,UAAIR,QAAQ,CAACD,MAAT,KAAoB,CAAxB,EAA2B;IACvB,eAAOW,SAAS,CAAC,CAAD,CAAhB;IACH;;IACD,UAAMO,SAAS,GAAGT,KAAK,GAAG,CAAR,KAAc,CAAC,CAAf,GAAmBR,QAAQ,CAACD,MAAT,GAAkB,CAArC,GAAyCS,KAAK,GAAG,CAAnE;IACA,aAAOE,SAAS,CAACO,SAAD,CAAhB;IACH;;IAED,aAASC,SAAT,GAAqB;IACjB,UAAMV,KAAK,GAAGR,QAAQ,CAACe,SAAT,CAAmB,UAAAb,IAAI;IAAA,eAAIA,IAAI,CAACC,GAAL,KAAaR,MAAM,CAACqB,GAAxB;IAAA,OAAvB,CAAd;IACA7B,MAAAA,WAAW,CAACqB,KAAK,KAAK,CAAC,CAAZ,EAAe,0BAAf,CAAX;;IACA,UAAIR,QAAQ,CAACD,MAAT,KAAoB,CAAxB,EAA2B;IACvB,eAAOW,SAAS,CAAC,CAAD,CAAhB;IACH;;IACD,UAAMS,SAAS,GAAGX,KAAK,GAAG,CAAR,KAAcR,QAAQ,CAACD,MAAvB,GAAgC,CAAhC,GAAoCS,KAAK,GAAG,CAA9D;IACA,aAAOE,SAAS,CAACS,SAAD,CAAhB;IACH;;IAED5B,IAAAA,KAAK,CAACc,cAAD,EAAiB,OAAjB,EAA0B,UAAAe,CAAC,EAAI;IAAA,UACxBC,WADwB,GACRD,CAAC,CAACE,MAAF,CAASC,OADD,CACxBF,WADwB;;IAEhC,UAAIA,WAAW,IAAIG,MAAM,CAACH,WAAD,CAAN,IAAuBrB,QAAQ,CAACD,MAAT,GAAkB,CAA5D,EAA+D;IAC3DW,QAAAA,SAAS,CAACW,WAAD,CAAT;IACH;IACJ,KALI,CAAL;IAOA9B,IAAAA,KAAK,CAACK,SAAD,EAAY,OAAZ,EAAqB,UAAAwB,CAAC,EAAI;IAC3B,UAAIA,CAAC,CAACE,MAAF,KAAa1B,SAAjB,EAA4B;IACxBF,QAAAA,OAAO,CAAC+B,SAAR,CAAkBC,MAAlB,CAAyB,yBAAzB;IACH;IACJ,KAJI,CAAL;IAMA3C,IAAAA,GAAG,CAAC4C,EAAJ,CAAO,aAAP,EAAsB,YAAM;IACxBT,MAAAA,SAAS,GAAGN,IAAZ,CAAiB,YAAM;IACnBxB,QAAAA,KAAK,CAAC,IAAD,CAAL,CAAYwB,IAAZ,CAAiB,YAAM;IACnBtB,UAAAA,MAAM,CAACsC,IAAP,GAAc,IAAd;IACH,SAFD;IAGH,OAJD;IAKH,KAND;IAQA7C,IAAAA,GAAG,CAAC4C,EAAJ,CAAO,gBAAP,EAAyB,YAAM;IAC3B,UAAMnB,KAAK,GAAGR,QAAQ,CAACe,SAAT,CAAmB,UAAAb,IAAI;IAAA,eAAIA,IAAI,CAACC,GAAL,KAAaR,MAAM,CAACqB,GAAxB;IAAA,OAAvB,CAAd;IACA,UAAMa,KAAK,GAAGhC,KAAK,CAACiC,IAAN,CAAWzB,cAAc,CAAC0B,QAA1B,EAAoCvB,KAApC,CAAd;;IACA,UAAIA,KAAK,KAAK,CAAC,CAAX,IAAgBqB,KAApB,EAA2B;IACvBxC,QAAAA,YAAY,CAACwC,KAAD,EAAQ,QAAR,CAAZ;IACH;IACJ,KAND;IAQA,WAAO;IACHG,MAAAA,IAAI,EAAE,yBADH;IAEHC,MAAAA,IAFG,kBAEI;IACHvC,QAAAA,OAAO,CAAC+B,SAAR,CAAkBS,GAAlB,CAAsB,yBAAtB;IACH,OAJE;IAKHC,MAAAA,IALG,kBAKI;IACHzC,QAAAA,OAAO,CAAC+B,SAAR,CAAkBC,MAAlB,CAAyB,yBAAzB;IACH,OAPE;IAQHU,MAAAA,IARG,kBAQI;IACHlB,QAAAA,SAAS;IACZ,OAVE;IAWHmB,MAAAA,IAXG,kBAWI;IACHvB,QAAAA,SAAS;IACZ;IAbE,KAAP;IAeH,GAzGD;IA0GH;;;;;;;;"} \ No newline at end of file +{"version":3,"file":"artplayer-plugin-playlist.js","sources":["../../packages/artplayer-plugin-playlist/src/index.js"],"sourcesContent":["import './index.scss';\n\nfunction artplayerPluginPlaylist(list) {\n return art => {\n const {\n utils: { append, errorHandle, sleep, inverseClass },\n } = art.constructor;\n const {\n player,\n events: { proxy },\n template: { $player, $video },\n } = art;\n\n const $playlist = append(\n $player,\n `\n
\n
\n
\n `,\n );\n\n errorHandle(Array.isArray(list), 'Playlist is not an array type');\n errorHandle(list.length > 0, 'Playlist cannot be empty');\n const playlist = list.map(item => {\n errorHandle(item.url, 'Playlist items require url attribute');\n errorHandle(item.title, 'Playlist items require title attribute');\n return item;\n });\n\n const $playlistInner = $playlist.querySelector('.art-playlist-inner');\n $playlistInner.innerHTML = playlist\n .map((item, index) => {\n return `
${item.title}
`;\n })\n .join('');\n\n function switchUrl(index) {\n const itemOption = playlist[index];\n return player.switchUrl(itemOption.url, itemOption.title).then(() => {\n art.emit('artplayerPluginPlaylist:change', itemOption);\n });\n }\n\n function prevVideo() {\n const index = playlist.findIndex(item => item.url === $video.src);\n errorHandle(index !== -1, \"Can't find Playlist item\");\n if (playlist.length === 1) {\n return switchUrl(0);\n }\n const prevIndex = index - 1 === -1 ? playlist.length - 1 : index - 1;\n return switchUrl(prevIndex);\n }\n\n function nextVideo() {\n const index = playlist.findIndex(item => item.url === $video.src);\n errorHandle(index !== -1, \"Can't find Playlist item\");\n if (playlist.length === 1) {\n return switchUrl(0);\n }\n const nextIndex = index + 1 === playlist.length ? 0 : index + 1;\n return switchUrl(nextIndex);\n }\n\n proxy($playlistInner, 'click', e => {\n const { optionIndex } = e.target.dataset;\n if (optionIndex && Number(optionIndex) <= playlist.length - 1) {\n switchUrl(optionIndex);\n }\n });\n\n proxy($playlist, 'click', e => {\n if (e.target === $playlist) {\n $player.classList.remove('art-playlist-show');\n }\n });\n\n art.on('video:ended', () => {\n nextVideo().then(() => {\n sleep(1000).then(() => {\n player.play = true;\n });\n });\n });\n\n art.on('afterAttachUrl', () => {\n const index = playlist.findIndex(item => item.url === $video.src);\n const $item = Array.from($playlistInner.children)[index];\n if (index !== -1 && $item) {\n inverseClass($item, 'active');\n }\n });\n\n return {\n name: 'artplayerPluginPlaylist',\n show() {\n $player.classList.add('art-playlist-show');\n },\n hide() {\n $player.classList.remove('art-playlist-show');\n },\n next() {\n nextVideo();\n },\n prev() {\n prevVideo();\n },\n };\n };\n}\n\nexport default artplayerPluginPlaylist;\n"],"names":["artplayerPluginPlaylist","list","art","constructor","utils","append","errorHandle","sleep","inverseClass","player","proxy","events","template","$player","$video","$playlist","Array","isArray","length","playlist","map","item","url","title","$playlistInner","querySelector","innerHTML","index","join","switchUrl","itemOption","then","emit","prevVideo","findIndex","src","prevIndex","nextVideo","nextIndex","e","optionIndex","target","dataset","Number","classList","remove","on","play","$item","from","children","name","show","add","hide","next","prev"],"mappings":"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"} \ No newline at end of file diff --git a/packages/artplayer-plugin-playlist/src/index.js b/packages/artplayer-plugin-playlist/src/index.js index 63ae75480..2061b6ed5 100644 --- a/packages/artplayer-plugin-playlist/src/index.js +++ b/packages/artplayer-plugin-playlist/src/index.js @@ -14,8 +14,8 @@ function artplayerPluginPlaylist(list) { const $playlist = append( $player, ` -
-
+
+
`, ); @@ -28,10 +28,10 @@ function artplayerPluginPlaylist(list) { return item; }); - const $playlistInner = $playlist.querySelector('.artplayer-playlist-inner'); + const $playlistInner = $playlist.querySelector('.art-playlist-inner'); $playlistInner.innerHTML = playlist .map((item, index) => { - return `
${item.title}
`; + return `
${item.title}
`; }) .join(''); @@ -71,7 +71,7 @@ function artplayerPluginPlaylist(list) { proxy($playlist, 'click', e => { if (e.target === $playlist) { - $player.classList.remove('artplayer-playlist-show'); + $player.classList.remove('art-playlist-show'); } }); @@ -94,10 +94,10 @@ function artplayerPluginPlaylist(list) { return { name: 'artplayerPluginPlaylist', show() { - $player.classList.add('artplayer-playlist-show'); + $player.classList.add('art-playlist-show'); }, hide() { - $player.classList.remove('artplayer-playlist-show'); + $player.classList.remove('art-playlist-show'); }, next() { nextVideo(); diff --git a/packages/artplayer-plugin-playlist/src/index.scss b/packages/artplayer-plugin-playlist/src/index.scss index 4595cc7d6..79f9e93e8 100644 --- a/packages/artplayer-plugin-playlist/src/index.scss +++ b/packages/artplayer-plugin-playlist/src/index.scss @@ -1,5 +1,5 @@ -.artplayer-video-player { - .artplayer-playlist { +.art-video-player { + .art-playlist { display: flex; align-items: center; justify-content: center; @@ -14,7 +14,7 @@ pointer-events: none; overflow: hidden; - .artplayer-playlist-inner { + .art-playlist-inner { position: absolute; top: 0; right: -300px; @@ -26,7 +26,7 @@ transition: all 0.2s ease-in-out; overflow: auto; - .artplayer-playlist-item { + .art-playlist-item { cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.1); padding: 12px 20px 12px 20px; @@ -42,12 +42,12 @@ } } - &.artplayer-playlist-show { - .artplayer-playlist { + &.art-playlist-show { + .art-playlist { opacity: 1; visibility: visible; pointer-events: auto; - .artplayer-playlist-inner { + .art-playlist-inner { right: 0; } }