mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-21 21:01:20 -08:00
调整播放列表接口
This commit is contained in:
zhw2590582 committed
1 parent
941ab07c66
commit
6056e7a0c6
9 files changed
+223
-235
No files matched your search
@@ -4,109 +4,108 @@
|
||||
(global = global || self, global.artplayerPluginPlaylist = factory());
|
||||
}(this, function () { 'use strict';
|
||||
|
||||
function artplayerPluginPlaylist(art) {
|
||||
var _art$constructor$util = art.constructor.utils,
|
||||
append = _art$constructor$util.append,
|
||||
errorHandle = _art$constructor$util.errorHandle,
|
||||
sleep = _art$constructor$util.sleep,
|
||||
inverseClass = _art$constructor$util.inverseClass;
|
||||
var player = art.player,
|
||||
proxy = art.events.proxy,
|
||||
_art$template = art.template,
|
||||
$player = _art$template.$player,
|
||||
$video = _art$template.$video;
|
||||
var $playlist = append($player, "\n <div class=\"artplay-playlist\">\n <div class=\"artplay-playlist-inner\"></div>\n </div>\n ");
|
||||
var playlist = [];
|
||||
var $playlistInner = $playlist.querySelector('.artplay-playlist-inner');
|
||||
|
||||
function switchUrl(index) {
|
||||
var itemOption = playlist[index];
|
||||
return player.switchUrl(itemOption.url, itemOption.title).then(function () {
|
||||
art.emit('artplayerPluginPlaylist:change', itemOption);
|
||||
function artplayerPluginPlaylist(list) {
|
||||
return function (art) {
|
||||
var _art$constructor$util = art.constructor.utils,
|
||||
append = _art$constructor$util.append,
|
||||
errorHandle = _art$constructor$util.errorHandle,
|
||||
sleep = _art$constructor$util.sleep,
|
||||
inverseClass = _art$constructor$util.inverseClass;
|
||||
var player = art.player,
|
||||
proxy = art.events.proxy,
|
||||
_art$template = art.template,
|
||||
$player = _art$template.$player,
|
||||
$video = _art$template.$video;
|
||||
var $playlist = append($player, "\n <div class=\"artplay-playlist\">\n <div class=\"artplay-playlist-inner\"></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) {
|
||||
errorHandle(item.url, 'Playlist items require url attribute');
|
||||
errorHandle(item.title, 'Playlist items require title attribute');
|
||||
return item;
|
||||
});
|
||||
}
|
||||
var $playlistInner = $playlist.querySelector('.artplay-playlist-inner');
|
||||
$playlistInner.innerHTML = playlist.map(function (item, index) {
|
||||
return "<div class=\"artplay-playlist-item\" data-option-index=\"".concat(index, "\">").concat(item.title, "</div>");
|
||||
}).join('');
|
||||
|
||||
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;
|
||||
|
||||
if (optionIndex && Number(optionIndex) <= playlist.length - 1) {
|
||||
switchUrl(optionIndex);
|
||||
}
|
||||
});
|
||||
proxy($playlist, 'click', function (e) {
|
||||
if (e.target === $playlist) {
|
||||
$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 $item = Array.from($playlistInner.children)[index];
|
||||
|
||||
if (index !== -1 && $item) {
|
||||
inverseClass($item, 'active');
|
||||
}
|
||||
});
|
||||
return {
|
||||
name: 'artplayerPluginPlaylist',
|
||||
load: function load(list) {
|
||||
errorHandle(Array.isArray(list), 'Playlist is not an array type');
|
||||
errorHandle(list.length > 0, 'Playlist cannot be empty');
|
||||
playlist = list.map(function (item) {
|
||||
errorHandle(item.url, 'Playlist items require url attribute');
|
||||
errorHandle(item.title, 'Playlist items require title attribute');
|
||||
return item;
|
||||
function switchUrl(index) {
|
||||
var itemOption = playlist[index];
|
||||
return player.switchUrl(itemOption.url, itemOption.title).then(function () {
|
||||
art.emit('artplayerPluginPlaylist:change', itemOption);
|
||||
});
|
||||
$playlistInner.innerHTML = playlist.map(function (item, index) {
|
||||
return "<div class=\"artplay-playlist-item\" data-option-index=\"".concat(index, "\">").concat(item.title, "</div>");
|
||||
}).join('');
|
||||
},
|
||||
show: function show() {
|
||||
$playlist.style.display = 'flex';
|
||||
},
|
||||
hide: function hide() {
|
||||
$playlist.style.display = 'none';
|
||||
},
|
||||
next: function next() {
|
||||
nextVideo();
|
||||
},
|
||||
prev: function prev() {
|
||||
prevVideo();
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
if (optionIndex && Number(optionIndex) <= playlist.length - 1) {
|
||||
switchUrl(optionIndex);
|
||||
}
|
||||
});
|
||||
proxy($playlist, 'click', function (e) {
|
||||
if (e.target === $playlist) {
|
||||
$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 $item = Array.from($playlistInner.children)[index];
|
||||
|
||||
if (index !== -1 && $item) {
|
||||
inverseClass($item, 'active');
|
||||
}
|
||||
});
|
||||
return {
|
||||
name: 'artplayerPluginPlaylist',
|
||||
show: function show() {
|
||||
$playlist.style.display = 'flex';
|
||||
},
|
||||
hide: function hide() {
|
||||
$playlist.style.display = 'none';
|
||||
},
|
||||
next: function next() {
|
||||
nextVideo();
|
||||
},
|
||||
prev: function prev() {
|
||||
prevVideo();
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user