x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-08 19:06:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

fix artplayer-plugin-playlist

Browse Source
This commit is contained in:
Harvey committed 2019-11-22 18:00:32 +08:00
1 parent a31fe1b5d5
commit 97646bc729
6 files changed
+25 -25
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer-plugin-playlist.css
+1 -1
View File
@@ -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 */
docs/uncompiled/artplayer-plugin-playlist.css.map
+1 -1
View File
@@ -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"]}
{"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"]}
docs/uncompiled/artplayer-plugin-playlist.js
+8 -8
View File
@@ -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 <div class=\"artplayer-playlist\">\n <div class=\"artplayer-playlist-inner artplayer-backdrop-filter\"></div>\n </div>\n ");
var $playlist = append($player, "\n <div class=\"art-playlist\">\n <div class=\"art-playlist-inner art-backdrop-filter\"></div>\n </div>\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 "<div class=\"artplayer-playlist-item\" data-option-index=\"".concat(index, "\">").concat(item.title, "</div>");
return "<div class=\"art-playlist-item\" data-option-index=\"".concat(index, "\">").concat(item.title, "</div>");
}).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
docs/uncompiled/artplayer-plugin-playlist.js.map
+1 -1
View File
@@ -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 <div class=\"artplayer-playlist\">\n <div class=\"artplayer-playlist-inner artplayer-backdrop-filter\"></div>\n </div>\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 `<div class=\"artplayer-playlist-item\" data-option-index=\"${index}\">${item.title}</div>`;\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,6KALine truncated
{"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 <div class=\"art-playlist\">\n <div class=\"art-playlist-inner art-backdrop-filter\"></div>\n </div>\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 `<div class=\"art-playlist-item\" data-option-index=\"${index}\">${item.title}</div>`;\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":";;;;;;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,2JAAxB;IASAP,IAAAA,WAAW,CAACU,KAAK,CAACC,OAAN,CAAchLine truncated
packages/artplayer-plugin-playlist/src/index.js
+7 -7
View File
@@ -14,8 +14,8 @@ function artplayerPluginPlaylist(list) {
const $playlist = append(
$player,
`
<div class="artplayer-playlist">
<div class="artplayer-playlist-inner artplayer-backdrop-filter"></div>
<div class="art-playlist">
<div class="art-playlist-inner art-backdrop-filter"></div>
</div>
`,
);
@@ -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 `<div class="artplayer-playlist-item" data-option-index="${index}">${item.title}</div>`;
return `<div class="art-playlist-item" data-option-index="${index}">${item.title}</div>`;
})
.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();
packages/artplayer-plugin-playlist/src/index.scss
+7 -7
View File
@@ -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;
}
}