添加播放列表自动循环

This commit is contained in:
zhw2590582 committed 2019-04-21 18:00:02 +08:00
1 parent 2ebdfb4a2d
commit 7fb29496fe
3 files changed
+92 -67

No files matched your search

+52 -38
View File
@@ -7,7 +7,8 @@
function artplayerPluginPlaylist(art) {
var _art$constructor$util = art.constructor.utils,
append = _art$constructor$util.append,
errorHandle = _art$constructor$util.errorHandle;
errorHandle = _art$constructor$util.errorHandle,
sleep = _art$constructor$util.sleep;
var player = art.player,
proxy = art.events.proxy,
_art$template = art.template,
@@ -16,28 +17,42 @@
var $playlist = append($player, "\n <div class=\"artplay-playlist\">\n <div class=\"artplay-playlist-inner\"></div>\n </div>\n ");
var $playlistInner = $playlist.querySelector('.artplay-playlist-inner');
var playlist = [];
art.on('afterAttachUrl', function () {
var index = playlist.findIndex(function (item) {
return item.url === $video.src;
});
var $children = Array.from($playlistInner.children);
var $item = $children[index];
if (index !== -1 && $item) {
$children.forEach(function (item) {
return item.classList.remove('active');
});
$item.classList.add('active');
}
});
function switchUrl(index) {
var itemOption = playlist[index];
player.switchUrl(itemOption.url, itemOption.title).then(function () {
return player.switchUrl(itemOption.url, itemOption.title).then(function () {
art.emit('artplayerPluginPlaylist:change', itemOption);
});
}
function prevVideo() {
var index = playlist.findIndex(function (item) {
return item.url === $video.src;
});
errorHandle(index !== -1, "Can't find Playlist item");
if (playlist.length === 1) {
return switchUrl(0);
}
var prevIndex = index - 1 === -1 ? playlist.length - 1 : index - 1;
return switchUrl(prevIndex);
}
function nextVideo() {
var index = playlist.findIndex(function (item) {
return item.url === $video.src;
});
errorHandle(index !== -1, "Can't find Playlist item");
if (playlist.length === 1) {
return switchUrl(0);
}
var nextIndex = index + 1 === playlist.length ? 0 : index + 1;
return switchUrl(nextIndex);
}
proxy($playlistInner, 'click', function (e) {
var optionIndex = e.target.dataset.optionIndex;
@@ -50,6 +65,25 @@
$playlist.style.display = 'none';
}
});
art.on('video:ended', function () {
nextVideo().then(function () {
sleep(1000).then(player.play);
});
});
art.on('afterAttachUrl', function () {
var index = playlist.findIndex(function (item) {
return item.url === $video.src;
});
var $children = Array.from($playlistInner.children);
var $item = $children[index];
if (index !== -1 && $item) {
$children.forEach(function (item) {
return item.classList.remove('active');
});
$item.classList.add('active');
}
});
return {
name: 'artplayerPluginPlaylist',
load: function load(list) {
@@ -71,30 +105,10 @@
$playlist.style.display = 'none';
},
next: function next() {
var index = playlist.findIndex(function (item) {
return item.url === $video.src;
});
errorHandle(index !== -1, "Can't find Playlist item");
if (playlist.length === 1) {
switchUrl(0);
} else {
var nextIndex = index + 1 === playlist.length ? 0 : index + 1;
switchUrl(nextIndex);
}
nextVideo();
},
prev: function prev() {
var index = playlist.findIndex(function (item) {
return item.url === $video.src;
});
errorHandle(index !== -1, "Can't find Playlist item");
if (playlist.length === 1) {
switchUrl(0);
} else {
var prevIndex = index - 1 === -1 ? playlist.length - 1 : index - 1;
switchUrl(prevIndex);
}
prevVideo();
}
};
}
@@ -1 +1 @@
{"version":3,"file":"artplayer-plugin-playlist.js","sources":["../../packages/artplayer-plugin-playlist/src/index.js"],"sourcesContent":["import './index.scss';\n\nfunction artplayerPluginPlaylist(art) {\n const {\n utils: { append, errorHandle },\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=\"artplay-playlist\">\n <div class=\"artplay-playlist-inner\"></div>\n </div>\n `,\n );\n\n const $playlistInner = $playlist.querySelector('.artplay-playlist-inner');\n let playlist = [];\n\n art.on('afterAttachUrl', () => {\n const index = playlist.findIndex(item => item.url === $video.src);\n const $children = Array.from($playlistInner.children);\n const $item = $children[index];\n if (index !== -1 && $item) {\n $children.forEach(item => item.classList.remove('active'));\n $item.classList.add('active');\n }\n });\n\n function switchUrl(index) {\n const itemOption = playlist[index];\n player.switchUrl(itemOption.url, itemOption.title).then(() => {\n art.emit('artplayerPluginPlaylist:change', itemOption);\n });\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 $playlist.style.display = 'none';\n }\n });\n\n return {\n name: 'artplayerPluginPlaylist',\n load(list) {\n errorHandle(Array.isArray(list), 'Playlist is not an array type');\n errorHandle(list.length > 0, 'Playlist cannot be empty');\n 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 $playlistInner.innerHTML = playlist\n .map((item, index) => {\n return `<div class=\"artplay-playlist-item\" data-option-index=\"${index}\">${item.title}</div>`;\n })\n .join('');\n },\n show() {\n $playlist.style.display = 'flex';\n },\n hide() {\n $playlist.style.display = 'none';\n },\n next() {\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 switchUrl(0);\n } else {\n const nextIndex = index + 1 === playlist.length ? 0 : index + 1;\n switchUrl(nextIndex);\n }\n },\n prev() {\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 switchUrl(0);\n } else {\n const prevIndex = index - 1 === -1 ? playlist.length - 1 : index - 1;\n switchUrl(prevIndex);\n }\n },\n };\n}\n\nwindow.artplayerPluginPlaylist = artplayerPluginPlaylist;\nexport default artplayerPluginPlaylist;\n"],"names":["artplayerPluginPlaylist","art","constructor","utils","append","errorHandle","player","proxy","events","template","$player","$video","$playlist","$playlistInner","querySelector","playlist","on","index","findIndex","item","url","src","$children","Array","from","children","$item","forEach","classList","remove","add","switchUrl","itemOption","title","then","emit","e","optionIndex","target","dataset","Number","length","style","display","name","load","list","isArray","map","innerHTML","join","show","hide","next","nextIndex","prev","prevIndex","window"],"mappings":";;;;;;IAEA,SAASA,uBAAT,CAAiCC,GAAjC,EAAsC;IAAA,8BAG9BA,GAAG,CAACC,WAH0B,CAE9BC,KAF8B;IAAA,MAErBC,MAFqB,yBAErBA,MAFqB;IAAA,MAEbC,WAFa,yBAEbA,WAFa;IAAA,MAK9BC,MAL8B,GAQ9BL,GAR8B,CAK9BK,MAL8B;IAAA,MAMpBC,KANoB,GAQ9BN,GAR8B,CAM9BO,MAN8B,CAMpBD,KANoB;IAAA,sBAQ9BN,GAR8B,CAO9BQ,QAP8B;IAAA,MAOlBC,OAPkB,iBAOlBA,OAPkB;IAAA,MAOTC,MAPS,iBAOTA,MAPS;IAUlC,MAAMC,SAAS,GAAGR,MAAM,CACpBM,OADoB,+HAAxB;IASA,MAAMG,cAAc,GAAGD,SAAS,CAACE,aAAV,CAAwB,yBAAxB,CAAvB;IACA,MAAIC,QAAQ,GAAG,EAAf;IAEAd,EAAAA,GAAG,CAACe,EAAJ,CAAO,gBAAP,EAAyB,YAAM;IAC3B,QAAMC,KAAK,GAAGF,QAAQ,CAACG,SAAT,CAAmB,UAAAC,IAAI;IAAA,aAAIA,IAAI,CAACC,GAAL,KAAaT,MAAM,CAACU,GAAxB;IAAA,KAAvB,CAAd;IACA,QAAMC,SAAS,GAAGC,KAAK,CAACC,IAAN,CAAWX,cAAc,CAACY,QAA1B,CAAlB;IACA,QAAMC,KAAK,GAAGJ,SAAS,CAACL,KAAD,CAAvB;;IACA,QAAIA,KAAK,KAAK,CAAC,CAAX,IAAgBS,KAApB,EAA2B;IACvBJ,MAAAA,SAAS,CAACK,OAAV,CAAkB,UAAAR,IAAI;IAAA,eAAIA,IAAI,Line truncated
{"version":3,"file":"artplayer-plugin-playlist.js","sources":["../../packages/artplayer-plugin-playlist/src/index.js"],"sourcesContent":["import './index.scss';\n\nfunction artplayerPluginPlaylist(art) {\n const {\n utils: { append, errorHandle, sleep },\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=\"artplay-playlist\">\n <div class=\"artplay-playlist-inner\"></div>\n </div>\n `,\n );\n\n const $playlistInner = $playlist.querySelector('.artplay-playlist-inner');\n let playlist = [];\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 $playlist.style.display = 'none';\n }\n });\n\n art.on('video:ended', () => {\n nextVideo().then(() => {\n sleep(1000).then(player.play);\n });\n });\n art.on('afterAttachUrl', () => {\n const index = playlist.findIndex(item => item.url === $video.src);\n const $children = Array.from($playlistInner.children);\n const $item = $children[index];\n if (index !== -1 && $item) {\n $children.forEach(item => item.classList.remove('active'));\n $item.classList.add('active');\n }\n });\n\n return {\n name: 'artplayerPluginPlaylist',\n load(list) {\n errorHandle(Array.isArray(list), 'Playlist is not an array type');\n errorHandle(list.length > 0, 'Playlist cannot be empty');\n 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 $playlistInner.innerHTML = playlist\n .map((item, index) => {\n return `<div class=\"artplay-playlist-item\" data-option-index=\"${index}\">${item.title}</div>`;\n })\n .join('');\n },\n show() {\n $playlist.style.display = 'flex';\n },\n hide() {\n $playlist.style.display = 'none';\n },\n next() {\n nextVideo();\n },\n prev() {\n prevVideo();\n },\n };\n}\n\nwindow.artplayerPluginPlaylist = artplayerPluginPlaylist;\nexport default artplayerPluginPlaylist;\n"],"names":["artplayerPluginPlaylist","art","constructor","utils","append","errorHandle","sleep","player","proxy","events","template","$player","$video","$playlist","$playlistInner","querySelector","playlist","switchUrl","index","itemOption","url","title","then","emit","prevVideo","findIndex","item","src","length","prevIndex","nextVideo","nextIndex","e","optionIndex","target","dataset","Number","style","display","on","play","$children","Array","from","children","$item","forEach","classList","remove","add","name","load","list","isArray","map","innerHTML","join","show","hide","next","prev","window"],"mappings":";;;;;;IAEA,SAASA,uBAAT,CAAiCC,GAAjC,EAAsC;IAAA,8BAG9BA,GAAG,CAACC,WAH0B,CAE9BC,KAF8B;IAAA,MAErBC,MAFqB,yBAErBA,MAFqB;IAAA,MAEbC,WAFa,yBAEbA,WAFa;IAAA,MAEAC,KAFA,yBAEAA,KAFA;IAAA,MAK9BC,MAL8B,GAQ9BN,GAR8B,CAK9BM,MAL8B;IAAA,MAMpBC,KANoB,GAQ9BP,GAR8B,CAM9BQ,MAN8B,CAMpBD,KANoB;IAAA,sBAQ9BP,GAR8B,CAO9BS,QAP8B;IAAA,MAOlBC,OAPkB,iBAOlBA,OAPkB;IAAA,MAOTC,MAPS,iBAOTA,MAPS;IAUlC,MAAMC,SAAS,GAAGT,MAAM,CACpBO,OADoB,+HAAxB;IASA,MAAMG,cAAc,GAAGD,SAAS,CAACE,aAAV,CAAwB,yBAAxB,CAAvB;IACA,MAAIC,QAAQ,GAAG,EAAf;;IAEA,WAASC,SAAT,CAAmBC,KAAnB,EAA0B;IACtB,QAAMC,UAAU,GAAGH,QAAQ,CAACE,KAAD,CAA3B;IACA,WAAOX,MAAM,CAACU,SAAP,CAAiBE,UAAU,CAACC,GAA5B,EAAiCD,UAALine truncated