mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-23 13:51:20 -08:00
移除播放列表插件
This commit is contained in:
Harvey committed
1 parent
4722226658
commit
904e214727
18 files changed
+3
-429
No files matched your search
@@ -41,7 +41,7 @@ function artplayerPluginGif(art) {
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0',
|
||||
height: '3px',
|
||||
height: '2px',
|
||||
width: '0%',
|
||||
'background-color': theme,
|
||||
},
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
node_modules
|
||||
.DS_Store
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
test
|
||||
coverage
|
||||
.nyc_output
|
||||
.cache
|
||||
docs
|
||||
@@ -1 +0,0 @@
|
||||
package-lock=false
|
||||
@@ -1,72 +0,0 @@
|
||||
# artplayer-plugin-playlist
|
||||
|
||||
Playlist plugin for ArtPlayer
|
||||
|
||||
## Demo
|
||||
|
||||
[Checkout the demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-playlist.js%0A.%2Funcompiled%2Fartplayer-plugin-playlist.css&example=playlist) from Github Pages
|
||||
|
||||
## Install
|
||||
|
||||
Install with `npm`
|
||||
|
||||
```bash
|
||||
$ npm install artplayer-plugin-playlist
|
||||
```
|
||||
|
||||
Or install with `yarn`
|
||||
|
||||
```bash
|
||||
$ yarn add artplayer-plugin-playlist
|
||||
```
|
||||
|
||||
```js
|
||||
import artplayerPluginPlaylist from 'artplayer-plugin-playlist';
|
||||
import 'artplayer-plugin-playlist/dist/artplayer-plugin-playlist.css';
|
||||
```
|
||||
|
||||
Or umd builds are also available
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="path/to/artplayer-plugin-playlist.css" />
|
||||
<script src="artplayer-plugin-playlist.js"></script>
|
||||
```
|
||||
|
||||
Will expose the global variable to `window.artplayerPluginPlaylist`.
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.mp4',
|
||||
plugins: [
|
||||
artplayerPluginPlaylist([
|
||||
{
|
||||
title: 'video01',
|
||||
url: 'path/to/video01.mp4',
|
||||
},
|
||||
{
|
||||
title: 'video02',
|
||||
url: 'path/to/video02.mp4',
|
||||
},
|
||||
]),
|
||||
],
|
||||
});
|
||||
|
||||
// Show Playlist
|
||||
art.plugins.artplayerPluginPlaylist.show();
|
||||
|
||||
// Hide Playlist
|
||||
art.plugins.artplayerPluginPlaylist.hide();
|
||||
|
||||
// Next Playlist item
|
||||
art.plugins.artplayerPluginPlaylist.next();
|
||||
|
||||
// Prev Playlist item
|
||||
art.plugins.artplayerPluginPlaylist.prev();
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Harvey Zack](https://sleepy.im/)
|
||||
@@ -1 +0,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}
|
||||
@@ -1,8 +0,0 @@
|
||||
/*!
|
||||
* artplayer-plugin-playlist.js v3.2.4
|
||||
* 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).artplayerPluginPlaylist=n()}(this,(function(){"use strict";return function(t){return function(n){var e=n.constructor.utils,i=e.append,r=e.errorHandle,a=e.sleep,l=e.inverseClass,o=n.player,s=n.events.proxy,u=n.template,c=u.$player,f=u.$video,d=i(c,'<div class="art-playlist"><div class="art-playlist-inner art-backdrop-filter"></div></div>');r(Array.isArray(t),"Playlist is not an array type"),r(t.length>0,"Playlist cannot be empty");var y=t.map((function(t){return r(t.url,"Playlist items require url attribute"),r(t.title,"Playlist items require title attribute"),t})),p=d.querySelector(".art-playlist-inner");function v(t){var e=y[t],i=o.playing;return o.switchUrl(e.url,e.title).then((function(){i&&(o.play=!0),n.emit("artplayerPluginPlaylist:change",e)}))}function h(){var t=y.findIndex((function(t){return t.url===f.src}));return r(-1!==t,"Can't find Playlist item"),1===y.length?v(0):v(t+1===y.length?0:t+1)}return p.innerHTML=y.map((function(t,n){return'<div class="art-playlist-item" data-option-index="'.concat(n,'">').concat(t.title,"</div>")})).join(""),s(p,"click",(function(t){var n=t.target.dataset.optionIndex;n&&Number(n)<=y.length-1&&v(n)})),s(d,"click",(function(t){t.target===d&&c.classList.remove("art-playlist-show")})),n.on("video:ended",(function(){h().then((function(){a(1e3).then((function(){o.play=!0}))}))})),n.on("afterAttachUrl",(function(){var t=y.findIndex((function(t){return t.url===f.src})),n=Array.from(p.children)[t];-1!==t&&n&&l(n,"active")})),{name:"artplayerPluginPlaylist",show:function(){c.classList.add("art-playlist-show")},hide:function(){c.classList.remove("art-playlist-show")},next:function(){h()},prev:function(){var t;t=y.findIndex((function(t){return t.url===f.src})),r(-1!==t,"Can't find Playlist item"),1===y.length?v(0):v(t-1==-1?y.length-1:t-1)}}}}}));
|
||||
@@ -1,26 +0,0 @@
|
||||
{
|
||||
"name": "artplayer-plugin-playlist",
|
||||
"version": "3.2.4",
|
||||
"expose": "artplayerPluginPlaylist",
|
||||
"description": "Playlist plugin for ArtPlayer",
|
||||
"main": "dist/artplayer-plugin-playlist.js",
|
||||
"style": "dist/artplayer-plugin-playlist.css",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
||||
},
|
||||
"keywords": [
|
||||
"video",
|
||||
"player"
|
||||
],
|
||||
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
||||
},
|
||||
"homepage": "https://github.com/zhw2590582/ArtPlayer#readme",
|
||||
"gitHead": "0a3a20568e37f99972eefb01d4b1dcf4036a46db"
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
import './index.scss';
|
||||
|
||||
function artplayerPluginPlaylist(list) {
|
||||
return art => {
|
||||
const {
|
||||
utils: { append, errorHandle, sleep, inverseClass },
|
||||
} = art.constructor;
|
||||
const {
|
||||
player,
|
||||
events: { proxy },
|
||||
template: { $player, $video },
|
||||
} = art;
|
||||
|
||||
const $playlist = append(
|
||||
$player,
|
||||
`
|
||||
<div class="art-playlist">
|
||||
<div class="art-playlist-inner art-backdrop-filter"></div>
|
||||
</div>
|
||||
`,
|
||||
);
|
||||
|
||||
errorHandle(Array.isArray(list), 'Playlist is not an array type');
|
||||
errorHandle(list.length > 0, 'Playlist cannot be empty');
|
||||
const playlist = list.map(item => {
|
||||
errorHandle(item.url, 'Playlist items require url attribute');
|
||||
errorHandle(item.title, 'Playlist items require title attribute');
|
||||
return item;
|
||||
});
|
||||
|
||||
const $playlistInner = $playlist.querySelector('.art-playlist-inner');
|
||||
$playlistInner.innerHTML = playlist
|
||||
.map((item, index) => {
|
||||
return `<div class="art-playlist-item" data-option-index="${index}">${item.title}</div>`;
|
||||
})
|
||||
.join('');
|
||||
|
||||
function switchUrl(index) {
|
||||
const itemOption = playlist[index];
|
||||
const isPlaying = player.playing;
|
||||
return player.switchUrl(itemOption.url, itemOption.title).then(() => {
|
||||
if (isPlaying) {
|
||||
player.play = true;
|
||||
}
|
||||
art.emit('artplayerPluginPlaylist:change', itemOption);
|
||||
});
|
||||
}
|
||||
|
||||
function prevVideo() {
|
||||
const index = playlist.findIndex(item => item.url === $video.src);
|
||||
errorHandle(index !== -1, "Can't find Playlist item");
|
||||
if (playlist.length === 1) {
|
||||
return switchUrl(0);
|
||||
}
|
||||
const prevIndex = index - 1 === -1 ? playlist.length - 1 : index - 1;
|
||||
return switchUrl(prevIndex);
|
||||
}
|
||||
|
||||
function nextVideo() {
|
||||
const index = playlist.findIndex(item => item.url === $video.src);
|
||||
errorHandle(index !== -1, "Can't find Playlist item");
|
||||
if (playlist.length === 1) {
|
||||
return switchUrl(0);
|
||||
}
|
||||
const nextIndex = index + 1 === playlist.length ? 0 : index + 1;
|
||||
return switchUrl(nextIndex);
|
||||
}
|
||||
|
||||
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) {
|
||||
$player.classList.remove('art-playlist-show');
|
||||
}
|
||||
});
|
||||
|
||||
art.on('video:ended', () => {
|
||||
nextVideo().then(() => {
|
||||
sleep(1000).then(() => {
|
||||
player.play = true;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
art.on('afterAttachUrl', () => {
|
||||
const index = playlist.findIndex(item => item.url === $video.src);
|
||||
const $item = Array.from($playlistInner.children)[index];
|
||||
if (index !== -1 && $item) {
|
||||
inverseClass($item, 'active');
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
name: 'artplayerPluginPlaylist',
|
||||
show() {
|
||||
$player.classList.add('art-playlist-show');
|
||||
},
|
||||
hide() {
|
||||
$player.classList.remove('art-playlist-show');
|
||||
},
|
||||
next() {
|
||||
nextVideo();
|
||||
},
|
||||
prev() {
|
||||
prevVideo();
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default artplayerPluginPlaylist;
|
||||
@@ -1,55 +0,0 @@
|
||||
.art-video-player {
|
||||
.art-playlist {
|
||||
display: flex;
|
||||
align-items: 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-playlist-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -300px;
|
||||
bottom: 0;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
transition: all 0.2s ease-in-out;
|
||||
overflow: auto;
|
||||
|
||||
.art-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.art-playlist-show {
|
||||
.art-playlist {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
.art-playlist-inner {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user