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

remove player object

Browse Source
This commit is contained in:
zhw2590582 committed 2022-01-07 17:38:10 +08:00
1 parent 59a8ccce81
commit 59400eb3bf
58 files changed
+295 -313
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
-1
View File
@@ -8,7 +8,6 @@
</p> </p>
<p align="center"> <p align="center">
<img src="https://img.shields.io/github/checks-status/zhw2590582/artplayer/master" alt="Build Status">
<img src="https://img.shields.io/bundlephobia/minzip/artplayer" alt="Size"> <img src="https://img.shields.io/bundlephobia/minzip/artplayer" alt="Size">
<img src="https://img.shields.io/npm/dm/artplayer.svg?sanitize=true" alt="Downloads"> <img src="https://img.shields.io/npm/dm/artplayer.svg?sanitize=true" alt="Downloads">
<img src="https://img.shields.io/npm/v/artplayer.svg?sanitize=true" alt="Version"> <img src="https://img.shields.io/npm/v/artplayer.svg?sanitize=true" alt="Version">
packages/artplayer/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "artplayer", "name": "artplayer",
"version": "4.1.4", "version": "5.0.0",
"expose": "Artplayer", "expose": "Artplayer",
"description": "ArtPlayer.js is a modern and full featured HTML5 video player", "description": "ArtPlayer.js is a modern and full featured HTML5 video player",
"main": "dist/artplayer.js", "main": "dist/artplayer.js",
packages/artplayer/src/ads.js
+2 -2
View File
@@ -30,7 +30,7 @@ export default class Ads {
play(item = {}) { play(item = {}) {
if (this.isEnd) return; if (this.isEnd) return;
this.art.player.switchUrl(item.url); this.art.switchUrl(item.url);
this.art.once('video:timeupdate', () => { this.art.once('video:timeupdate', () => {
this.art.emit('ads:start', item); this.art.emit('ads:start', item);
@@ -52,7 +52,7 @@ export default class Ads {
this.isEnd = true; this.isEnd = true;
this.playing = false; this.playing = false;
this.art.option.url = this.urlCache; this.art.option.url = this.urlCache;
this.art.player.switchUrl(this.urlCache); this.art.switchUrl(this.urlCache);
this.art.emit('ads:end'); this.art.emit('ads:end');
} }
} }
packages/artplayer/src/contextmenu/aspectRatio.js
+2 -2
View File
@@ -2,7 +2,7 @@ import { inverseClass, queryAll } from '../utils';
export default function aspectRatio(option) { export default function aspectRatio(option) {
return (art) => { return (art) => {
const { i18n, player } = art; const { i18n } = art;
return { return {
...option, ...option,
html: `${i18n.get('Aspect ratio')}: html: `${i18n.get('Aspect ratio')}:
@@ -13,7 +13,7 @@ export default function aspectRatio(option) {
click: (contextmenu, event) => { click: (contextmenu, event) => {
const { ratio } = event.target.dataset; const { ratio } = event.target.dataset;
if (ratio) { if (ratio) {
player.aspectRatio = ratio; art.aspectRatio = ratio;
contextmenu.show = false; contextmenu.show = false;
} }
}, },
packages/artplayer/src/contextmenu/playbackRate.js
+2 -2
View File
@@ -2,7 +2,7 @@ import { inverseClass, queryAll } from '../utils';
export default function playbackRate(option) { export default function playbackRate(option) {
return (art) => { return (art) => {
const { i18n, player } = art; const { i18n } = art;
return { return {
...option, ...option,
html: `${i18n.get('Play speed')}: html: `${i18n.get('Play speed')}:
@@ -16,7 +16,7 @@ export default function playbackRate(option) {
click: (contextmenu, event) => { click: (contextmenu, event) => {
const { rate } = event.target.dataset; const { rate } = event.target.dataset;
if (rate) { if (rate) {
player.playbackRate = Number(rate); art.playbackRate = Number(rate);
contextmenu.show = false; contextmenu.show = false;
} }
}, },
packages/artplayer/src/control/fullscreen.js
+1 -2
View File
@@ -9,13 +9,12 @@ export default function fullscreen(option) {
events: { proxy }, events: { proxy },
icons, icons,
i18n, i18n,
player,
} = art; } = art;
append($control, icons.fullscreen); append($control, icons.fullscreen);
proxy($control, 'click', () => { proxy($control, 'click', () => {
player.fullscreen = !player.fullscreen; art.fullscreen = !art.fullscreen;
}); });
art.on('fullscreen', (value) => { art.on('fullscreen', (value) => {
packages/artplayer/src/control/fullscreenWeb.js
+1 -2
View File
@@ -9,13 +9,12 @@ export default function fullscreenWeb(option) {
events: { proxy }, events: { proxy },
icons, icons,
i18n, i18n,
player,
} = art; } = art;
append($control, icons.fullscreenWeb); append($control, icons.fullscreenWeb);
proxy($control, 'click', () => { proxy($control, 'click', () => {
player.fullscreenWeb = !player.fullscreenWeb; art.fullscreenWeb = !art.fullscreenWeb;
}); });
art.on('fullscreenWeb', (value) => { art.on('fullscreenWeb', (value) => {
packages/artplayer/src/control/index.js
+1 -1
View File
@@ -36,7 +36,7 @@ export default class Control extends Component {
}); });
art.on('video:timeupdate', () => { art.on('video:timeupdate', () => {
if (player.playing && this.show && Date.now() - this.mouseMoveTime >= 3000) { if (art.playing && this.show && Date.now() - this.mouseMoveTime >= 3000) {
this.show = false; this.show = false;
addClass($player, 'art-hide-cursor'); addClass($player, 'art-hide-cursor');
removeClass($player, 'art-hover'); removeClass($player, 'art-hover');
packages/artplayer/src/control/loop.js
+2 -4
View File
@@ -4,16 +4,14 @@ export default function loop(option) {
return (art) => ({ return (art) => ({
...option, ...option,
mounted: ($control) => { mounted: ($control) => {
const { player } = art;
const $left = append($control, `<span class="art-loop-point"></span>`); const $left = append($control, `<span class="art-loop-point"></span>`);
const $right = append($control, `<span class="art-loop-point"></span>`); const $right = append($control, `<span class="art-loop-point"></span>`);
art.on('loop', (value) => { art.on('loop', (value) => {
if (value) { if (value) {
setStyle($control, 'display', 'block'); setStyle($control, 'display', 'block');
setStyle($left, 'left', `calc(${(value[0] / player.duration) * 100}% - ${$left.clientWidth}px)`); setStyle($left, 'left', `calc(${(value[0] / art.duration) * 100}% - ${$left.clientWidth}px)`);
setStyle($right, 'left', `${(value[1] / player.duration) * 100}%`); setStyle($right, 'left', `${(value[1] / art.duration) * 100}%`);
} else { } else {
setStyle($control, 'display', 'none'); setStyle($control, 'display', 'none');
} }
packages/artplayer/src/control/pip.js
+1 -2
View File
@@ -9,13 +9,12 @@ export default function pip(option) {
events: { proxy }, events: { proxy },
icons, icons,
i18n, i18n,
player,
} = art; } = art;
append($control, icons.pip); append($control, icons.pip);
proxy($control, 'click', () => { proxy($control, 'click', () => {
player.pip = !player.pip; art.pip = !art.pip;
}); });
art.on('pip', (value) => { art.on('pip', (value) => {
packages/artplayer/src/control/playAndPause.js
+5 -6
View File
@@ -1,14 +1,13 @@
import { append, tooltip, setStyle } from '../utils'; import { append, tooltip, setStyle } from '../utils';
export default function playAndPause(option) { export default function playAndPause(option) {
return art => ({ return (art) => ({
...option, ...option,
mounted: $control => { mounted: ($control) => {
const { const {
events: { proxy }, events: { proxy },
icons, icons,
i18n, i18n,
player,
} = art; } = art;
const $play = append($control, icons.play); const $play = append($control, icons.play);
@@ -17,11 +16,11 @@ export default function playAndPause(option) {
tooltip($pause, i18n.get('Pause')); tooltip($pause, i18n.get('Pause'));
proxy($play, 'click', () => { proxy($play, 'click', () => {
player.play(); art.play();
}); });
proxy($pause, 'click', () => { proxy($pause, 'click', () => {
player.pause(); art.pause();
}); });
function showPlay() { function showPlay() {
@@ -34,7 +33,7 @@ export default function playAndPause(option) {
setStyle($pause, 'display', 'flex'); setStyle($pause, 'display', 'flex');
} }
if (player.playing) { if (art.playing) {
showPause(); showPause();
} else { } else {
showPlay(); showPlay();
packages/artplayer/src/control/progress.js
+7 -9
View File
@@ -2,13 +2,12 @@ import { query, clamp, append, setStyle, setStyles, secondToTime, includeFromEve
export function getPosFromEvent(art, event) { export function getPosFromEvent(art, event) {
const { const {
player,
template: { $progress }, template: { $progress },
} = art; } = art;
const { left } = $progress.getBoundingClientRect(); const { left } = $progress.getBoundingClientRect();
const width = clamp(event.pageX - left, 0, $progress.clientWidth); const width = clamp(event.pageX - left, 0, $progress.clientWidth);
const second = (width / $progress.clientWidth) * player.duration; const second = (width / $progress.clientWidth) * art.duration;
const time = secondToTime(second); const time = secondToTime(second);
const percentage = clamp(width / $progress.clientWidth, 0, 1); const percentage = clamp(width / $progress.clientWidth, 0, 1);
return { second, time, width, percentage }; return { second, time, width, percentage };
@@ -19,7 +18,6 @@ export default function progress(option) {
const { const {
option: { highlight, theme }, option: { highlight, theme },
events: { proxy }, events: { proxy },
player,
icons, icons,
} = art; } = art;
return { return {
@@ -98,21 +96,21 @@ export default function progress(option) {
} }
highlight.forEach((item) => { highlight.forEach((item) => {
const left = (clamp(item.time, 0, player.duration) / player.duration) * 100; const left = (clamp(item.time, 0, art.duration) / art.duration) * 100;
append( append(
$highlight, $highlight,
`<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`, `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`,
); );
}); });
setBar('loaded', player.loaded); setBar('loaded', art.loaded);
art.on('video:progress', () => { art.on('video:progress', () => {
setBar('loaded', player.loaded); setBar('loaded', art.loaded);
}); });
art.on('video:timeupdate', () => { art.on('video:timeupdate', () => {
setBar('played', player.played); setBar('played', art.played);
}); });
art.on('video:ended', () => { art.on('video:ended', () => {
@@ -136,7 +134,7 @@ export default function progress(option) {
if (event.target !== $indicator) { if (event.target !== $indicator) {
const { second, percentage } = getPosFromEvent(art, event); const { second, percentage } = getPosFromEvent(art, event);
setBar('played', percentage); setBar('played', percentage);
player.seek = second; art.seek = second;
} }
}); });
@@ -148,7 +146,7 @@ export default function progress(option) {
if (isDroging) { if (isDroging) {
const { second, percentage } = getPosFromEvent(art, event); const { second, percentage } = getPosFromEvent(art, event);
setBar('played', percentage); setBar('played', percentage);
player.seek = second; art.seek = second;
} }
}); });
packages/artplayer/src/control/quality.js
+1 -1
View File
@@ -7,7 +7,7 @@ export default function quality(option) {
html: qualityDefault ? qualityDefault.html : '', html: qualityDefault ? qualityDefault.html : '',
selector: qualityOption, selector: qualityOption,
onSelect(item) { onSelect(item) {
art.player.switchQuality(item.url, item.html); art.switchQuality(item.url, item.html);
}, },
}; };
}; };
packages/artplayer/src/control/screenshot.js
+3 -4
View File
@@ -1,19 +1,18 @@
import { append } from '../utils'; import { append } from '../utils';
export default function screenshot(option) { export default function screenshot(option) {
return art => ({ return (art) => ({
...option, ...option,
tooltip: art.i18n.get('Screenshot'), tooltip: art.i18n.get('Screenshot'),
mounted: $control => { mounted: ($control) => {
const { const {
events: { proxy }, events: { proxy },
icons, icons,
player,
} = art; } = art;
append($control, icons.screenshot); append($control, icons.screenshot);
proxy($control, 'click', () => { proxy($control, 'click', () => {
player.screenshot(); art.screenshot();
}); });
}, },
}); });
packages/artplayer/src/control/time.js
+1 -1
View File
@@ -5,7 +5,7 @@ export default function time(option) {
...option, ...option,
mounted: $control => { mounted: $control => {
function getTime() { function getTime() {
const newTime = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`; const newTime = `${secondToTime(art.currentTime)} / ${secondToTime(art.duration)}`;
if (newTime !== $control.innerText) { if (newTime !== $control.innerText) {
$control.innerText = newTime; $control.innerText = newTime;
} }
packages/artplayer/src/control/volume.js
+9 -10
View File
@@ -7,7 +7,6 @@ export default function volume(option) {
const { const {
events: { proxy }, events: { proxy },
icons, icons,
player,
i18n, i18n,
} = art; } = art;
@@ -34,7 +33,7 @@ export default function volume(option) {
} }
function setVolumeHandle(percentage = 0.7) { function setVolumeHandle(percentage = 0.7) {
if (player.muted || percentage === 0) { if (art.muted || percentage === 0) {
setStyle($volume, 'display', 'none'); setStyle($volume, 'display', 'none');
setStyle($volumeClose, 'display', 'flex'); setStyle($volumeClose, 'display', 'flex');
setStyle($volumeHandle, 'left', '0'); setStyle($volumeHandle, 'left', '0');
@@ -46,22 +45,22 @@ export default function volume(option) {
} }
} }
setVolumeHandle(player.volume); setVolumeHandle(art.volume);
art.on('video:volumechange', () => { art.on('video:volumechange', () => {
setVolumeHandle(player.volume); setVolumeHandle(art.volume);
}); });
proxy($volume, 'click', () => { proxy($volume, 'click', () => {
player.muted = true; art.muted = true;
}); });
proxy($volumeClose, 'click', () => { proxy($volumeClose, 'click', () => {
player.muted = false; art.muted = false;
}); });
proxy($volumePanel, 'click', (event) => { proxy($volumePanel, 'click', (event) => {
player.muted = false; art.muted = false;
player.volume = volumeChangeFromEvent(event); art.volume = volumeChangeFromEvent(event);
}); });
proxy($volumeHandle, 'mousedown', () => { proxy($volumeHandle, 'mousedown', () => {
@@ -70,8 +69,8 @@ export default function volume(option) {
proxy($control, 'mousemove', (event) => { proxy($control, 'mousemove', (event) => {
if (isDroging) { if (isDroging) {
player.muted = false; art.muted = false;
player.volume = volumeChangeFromEvent(event); art.volume = volumeChangeFromEvent(event);
} }
}); });
packages/artplayer/src/events/gestureInit.js
+3 -4
View File
@@ -3,7 +3,6 @@ import { clamp, secondToTime, isMobile } from '../utils';
export default function gestureInit(art, events) { export default function gestureInit(art, events) {
if (isMobile && !art.option.isLive) { if (isMobile && !art.option.isLive) {
const { const {
player,
notice, notice,
template: { $video }, template: { $video },
} = art; } = art;
@@ -23,14 +22,14 @@ export default function gestureInit(art, events) {
if (event.touches.length === 1 && isDroging) { if (event.touches.length === 1 && isDroging) {
const widthDiff = event.touches[0].clientX - startX; const widthDiff = event.touches[0].clientX - startX;
const proportion = clamp(widthDiff / $video.clientWidth, -1, 1); const proportion = clamp(widthDiff / $video.clientWidth, -1, 1);
currentTime = clamp(player.currentTime + 60 * proportion, 0, player.duration); currentTime = clamp(art.currentTime + 60 * proportion, 0, art.duration);
notice.show = `${secondToTime(currentTime)} / ${secondToTime(player.duration)}`; notice.show = `${secondToTime(currentTime)} / ${secondToTime(art.duration)}`;
} }
}); });
events.proxy(document, 'touchend', () => { events.proxy(document, 'touchend', () => {
if (isDroging && currentTime) { if (isDroging && currentTime) {
player.seek = currentTime; art.seek = currentTime;
} }
isDroging = false; isDroging = false;
startX = 0; startX = 0;
packages/artplayer/src/events/resizeInit.js
+4 -4
View File
@@ -1,13 +1,13 @@
import { throttle } from '../utils'; import { throttle } from '../utils';
export default function resizeInit(art, events) { export default function resizeInit(art, events) {
const { option, player } = art; const { option } = art;
const resizeFn = throttle(() => { const resizeFn = throttle(() => {
if (player.normalSize) { if (art.normalSize) {
player.autoSize = option.autoSize; art.autoSize = option.autoSize;
} }
player.aspectRatioReset = true; art.aspectRatioReset = true;
art.emit('resize'); art.emit('resize');
}, 500); }, 500);
packages/artplayer/src/events/viewInit.js
+1 -1
View File
@@ -17,7 +17,7 @@ export default function viewInit(art, events) {
art.on('view', (state) => { art.on('view', (state) => {
if (option.autoMini) { if (option.autoMini) {
player.mini = !state; art.mini = !state;
} }
}); });
} }
packages/artplayer/src/hotkey.js
+7 -7
View File
@@ -13,29 +13,29 @@ export default class Hotkey {
if (option.hotkey) { if (option.hotkey) {
art.once('ready', () => { art.once('ready', () => {
this.add(27, () => { this.add(27, () => {
if (player.fullscreenWeb) { if (art.fullscreenWeb) {
player.fullscreenWeb = false; art.fullscreenWeb = false;
} }
}); });
this.add(32, () => { this.add(32, () => {
player.toggle(); art.toggle();
}); });
this.add(37, () => { this.add(37, () => {
player.backward = 5; art.backward = 5;
}); });
this.add(38, () => { this.add(38, () => {
player.volume += 0.1; art.volume += 0.1;
}); });
this.add(39, () => { this.add(39, () => {
player.forward = 5; art.forward = 5;
}); });
this.add(40, () => { this.add(40, () => {
player.volume -= 0.1; art.volume -= 0.1;
}); });
proxy(window, 'keydown', (event) => { proxy(window, 'keydown', (event) => {
packages/artplayer/src/player/aspectRatioMix.js
+8 -10
View File
@@ -1,19 +1,17 @@
import { setStyle, errorHandle, def } from '../utils'; import { setStyle, errorHandle, def } from '../utils';
export default function aspectRatioMix(art, player) { export default function aspectRatioMix(art) {
const { const {
template: { $video, $player }, template: { $video, $player },
i18n, i18n,
notice, notice,
} = art; } = art;
def(player, 'aspectRatio', { def(art, 'aspectRatio', {
get() { get() {
return $player.dataset.aspectRatio || ''; return $player.dataset.aspectRatio || '';
}, },
set(ratio) { set(ratio = 'default') {
if (!ratio) ratio = 'default';
const ratioList = ['default', '4:3', '16:9']; const ratioList = ['default', '4:3', '16:9'];
errorHandle(ratioList.includes(ratio), `'aspectRatio' only accept ${ratioList.toString()} as parameters`); errorHandle(ratioList.includes(ratio), `'aspectRatio' only accept ${ratioList.toString()} as parameters`);
@@ -23,7 +21,7 @@ export default function aspectRatioMix(art, player) {
setStyle($video, 'padding', null); setStyle($video, 'padding', null);
delete $player.dataset.aspectRatio; delete $player.dataset.aspectRatio;
} else { } else {
const ratioArray = ratio.split(':'); const ratioArray = ratio.split(':').map(Number);
const { videoWidth, videoHeight } = $video; const { videoWidth, videoHeight } = $video;
const { clientWidth, clientHeight } = $player; const { clientWidth, clientHeight } = $player;
const videoRatio = videoWidth / videoHeight; const videoRatio = videoWidth / videoHeight;
@@ -47,11 +45,11 @@ export default function aspectRatioMix(art, player) {
}, },
}); });
def(player, 'aspectRatioReset', { def(art, 'aspectRatioReset', {
set(value) { set(value) {
if (value && player.aspectRatio) { if (value && art.aspectRatio) {
const { aspectRatio } = player; const { aspectRatio } = art;
player.aspectRatio = aspectRatio; art.aspectRatio = aspectRatio;
} }
}, },
}); });
packages/artplayer/src/player/attrInit.js
+2 -2
View File
@@ -1,6 +1,6 @@
import { clamp, setStyle } from '../utils'; import { clamp, setStyle } from '../utils';
export default function attrInit(art, player) { export default function attrInit(art) {
const { const {
option, option,
storage, storage,
@@ -36,6 +36,6 @@ export default function attrInit(art, player) {
$video.controls = false; $video.controls = false;
if (option.ads.length === 0) { if (option.ads.length === 0) {
player.url = option.url; art.url = option.url;
} }
} }
packages/artplayer/src/player/autoHeightMix.js
+4 -4
View File
@@ -1,6 +1,6 @@
import { setStyle, hasClass, addClass, removeClass, def } from '../utils'; import { setStyle, hasClass, addClass, removeClass, def } from '../utils';
export default function autoHeightMix(art, player) { export default function autoHeightMix(art) {
const { const {
option, option,
template: { $container, $video }, template: { $container, $video },
@@ -8,7 +8,7 @@ export default function autoHeightMix(art, player) {
const heightCache = $container.style.height; const heightCache = $container.style.height;
def(player, 'autoHeight', { def(art, 'autoHeight', {
get() { get() {
return hasClass($container, 'art-auto-height'); return hasClass($container, 'art-auto-height');
}, },
@@ -19,12 +19,12 @@ export default function autoHeightMix(art, player) {
const height = videoHeight * (clientWidth / videoWidth); const height = videoHeight * (clientWidth / videoWidth);
setStyle($container, 'height', height + 'px'); setStyle($container, 'height', height + 'px');
addClass($container, 'art-auto-height'); addClass($container, 'art-auto-height');
player.autoSize = option.autoSize; art.autoSize = option.autoSize;
art.emit('autoHeight', height); art.emit('autoHeight', height);
} else { } else {
setStyle($container, 'height', heightCache); setStyle($container, 'height', heightCache);
removeClass($container, 'art-auto-height'); removeClass($container, 'art-auto-height');
player.autoSize = option.autoSize; art.autoSize = option.autoSize;
art.emit('autoHeight'); art.emit('autoHeight');
} }
}, },
packages/artplayer/src/player/autoSizeMix.js
+4 -4
View File
@@ -1,9 +1,9 @@
import { setStyle, addClass, removeClass, hasClass, def } from '../utils'; import { setStyle, addClass, removeClass, hasClass, def } from '../utils';
export default function resizeMix(art, player) { export default function resizeMix(art) {
const { $container, $player, $video } = art.template; const { $container, $player, $video } = art.template;
def(player, 'autoSize', { def(art, 'autoSize', {
get() { get() {
return hasClass($container, 'art-auto-size'); return hasClass($container, 'art-auto-size');
}, },
@@ -24,8 +24,8 @@ export default function resizeMix(art, player) {
setStyle($player, 'height', `${percentage}%`); setStyle($player, 'height', `${percentage}%`);
} }
art.emit('autoSize', { art.emit('autoSize', {
width: player.width, width: art.width,
height: player.height, height: art.height,
}); });
} else { } else {
removeClass($container, 'art-auto-size'); removeClass($container, 'art-auto-size');
packages/artplayer/src/player/currentTimeMix.js
+3 -3
View File
@@ -1,13 +1,13 @@
import { clamp, def } from '../utils'; import { clamp, def } from '../utils';
export default function currentTimeMix(art, player) { export default function currentTimeMix(art) {
const { $video } = art.template; const { $video } = art.template;
def(player, 'currentTime', { def(art, 'currentTime', {
get: () => $video.currentTime || 0, get: () => $video.currentTime || 0,
set: (time) => { set: (time) => {
// Fixed: The provided double value is non-finite // Fixed: The provided double value is non-finite
$video.currentTime = clamp(parseFloat(time.toFixed(3)), 0, player.duration); $video.currentTime = clamp(parseFloat(time.toFixed(3)), 0, art.duration);
}, },
}); });
} }
packages/artplayer/src/player/durationMix.js
+2 -2
View File
@@ -1,7 +1,7 @@
import { def } from '../utils'; import { def } from '../utils';
export default function durationMix(art, player) { export default function durationMix(art) {
def(player, 'duration', { def(art, 'duration', {
get: () => { get: () => {
const { duration } = art.template.$video; const { duration } = art.template.$video;
if (duration === Infinity) return 0; if (duration === Infinity) return 0;
packages/artplayer/src/player/eventInit.js
+7 -7
View File
@@ -1,7 +1,7 @@
import config from '../config'; import config from '../config';
import { sleep, addClass, setStyle, isMobile } from '../utils'; import { sleep, addClass, setStyle, isMobile } from '../utils';
export default function eventInit(art, player) { export default function eventInit(art) {
const { const {
option, option,
events: { proxy }, events: { proxy },
@@ -14,11 +14,11 @@ export default function eventInit(art, player) {
const maxReconnectTime = 5; const maxReconnectTime = 5;
proxy($video, 'click', () => { proxy($video, 'click', () => {
player.toggle(); art.toggle();
}); });
proxy($video, 'dblclick', () => { proxy($video, 'dblclick', () => {
player.fullscreen = !player.fullscreen; art.fullscreen = !art.fullscreen;
}); });
config.events.forEach((eventName) => { config.events.forEach((eventName) => {
@@ -58,8 +58,8 @@ export default function eventInit(art, player) {
art.on('video:ended', () => { art.on('video:ended', () => {
if (option.loop) { if (option.loop) {
player.seek = 0; art.seek = 0;
player.play(); art.play();
art.controls.show = false; art.controls.show = false;
art.mask.show = false; art.mask.show = false;
} else { } else {
@@ -72,7 +72,7 @@ export default function eventInit(art, player) {
if (reconnectTime < maxReconnectTime) { if (reconnectTime < maxReconnectTime) {
sleep(1000).then(() => { sleep(1000).then(() => {
reconnectTime += 1; reconnectTime += 1;
player.url = option.url; art.url = option.url;
notice.show = `${i18n.get('Reconnect')}: ${reconnectTime}`; notice.show = `${i18n.get('Reconnect')}: ${reconnectTime}`;
art.emit('error', reconnectTime); art.emit('error', reconnectTime);
}); });
@@ -92,7 +92,7 @@ export default function eventInit(art, player) {
// }); // });
art.once('video:loadedmetadata', () => { art.once('video:loadedmetadata', () => {
player.autoSize = option.autoSize; art.autoSize = option.autoSize;
if (isMobile) { if (isMobile) {
art.loading.show = false; art.loading.show = false;
art.controls.show = true; art.controls.show = true;
packages/artplayer/src/player/exclusiveInit.js
+6 -6
View File
@@ -1,17 +1,17 @@
import { def } from '../utils'; import { def } from '../utils';
export default function exclusiveInit(art, player) { export default function exclusiveInit(art) {
const sizeProps = ['mini', 'pip', 'fullscreen', 'fullscreenWeb']; const sizeProps = ['mini', 'pip', 'fullscreen', 'fullscreenWeb'];
function exclusive(props) { function exclusive(props) {
props.forEach((name) => { props.forEach((name) => {
art.on(name, () => { art.on(name, () => {
if (player[name]) { if (art[name]) {
props props
.filter((item) => item !== name) .filter((item) => item !== name)
.forEach((item) => { .forEach((item) => {
if (player[item]) { if (art[item]) {
player[item] = false; art[item] = false;
} }
}); });
} }
@@ -21,9 +21,9 @@ export default function exclusiveInit(art, player) {
exclusive(sizeProps); exclusive(sizeProps);
def(player, 'normalSize', { def(art, 'normalSize', {
get() { get() {
return sizeProps.every((name) => !player[name]); return sizeProps.every((name) => !art[name]);
}, },
}); });
} }
packages/artplayer/src/player/flipMix.js
+7 -7
View File
@@ -1,13 +1,13 @@
import { errorHandle, def } from '../utils'; import { errorHandle, def } from '../utils';
export default function flipMix(art, player) { export default function flipMix(art) {
const { const {
template: { $player }, template: { $player },
i18n, i18n,
notice, notice,
} = art; } = art;
def(player, 'flip', { def(art, 'flip', {
get() { get() {
return $player.dataset.flip; return $player.dataset.flip;
}, },
@@ -20,7 +20,7 @@ export default function flipMix(art, player) {
if (flip === 'normal') { if (flip === 'normal') {
delete $player.dataset.flip; delete $player.dataset.flip;
} else { } else {
player.rotate = false; art.rotate = false;
$player.dataset.flip = flip; $player.dataset.flip = flip;
} }
@@ -30,11 +30,11 @@ export default function flipMix(art, player) {
}, },
}); });
def(player, 'flipReset', { def(art, 'flipReset', {
set(value) { set(value) {
if (value && player.flip) { if (value && art.flip) {
const { flip } = player; const { flip } = art;
player.flip = flip; art.flip = flip;
} }
}, },
}); });
packages/artplayer/src/player/fullscreenMix.js
+14 -14
View File
@@ -1,12 +1,12 @@
import screenfull from 'screenfull'; import screenfull from 'screenfull';
import { addClass, removeClass, def, get } from '../utils'; import { addClass, removeClass, def, get } from '../utils';
const nativeScreenfull = (art, player) => { const nativeScreenfull = (art) => {
const { $player } = art.template; const { $player } = art.template;
screenfull.on('change', () => art.emit('fullscreen', screenfull.isFullscreen)); screenfull.on('change', () => art.emit('fullscreen', screenfull.isFullscreen));
def(player, 'fullscreen', { def(art, 'fullscreen', {
get() { get() {
return screenfull.isFullscreen; return screenfull.isFullscreen;
}, },
@@ -14,16 +14,16 @@ const nativeScreenfull = (art, player) => {
if (value) { if (value) {
screenfull.request($player).then(() => { screenfull.request($player).then(() => {
addClass($player, 'art-fullscreen'); addClass($player, 'art-fullscreen');
player.aspectRatioReset = true; art.aspectRatioReset = true;
player.autoSize = false; art.autoSize = false;
art.emit('resize'); art.emit('resize');
art.emit('fullscreen', true); art.emit('fullscreen', true);
}); });
} else { } else {
screenfull.exit().then(() => { screenfull.exit().then(() => {
removeClass($player, 'art-fullscreen'); removeClass($player, 'art-fullscreen');
player.aspectRatioReset = true; art.aspectRatioReset = true;
player.autoSize = art.option.autoSize; art.autoSize = art.option.autoSize;
art.emit('resize'); art.emit('resize');
art.emit('fullscreen'); art.emit('fullscreen');
}); });
@@ -32,10 +32,10 @@ const nativeScreenfull = (art, player) => {
}); });
}; };
const webkitScreenfull = (art, player) => { const webkitScreenfull = (art) => {
const { $video } = art.template; const { $video } = art.template;
def(player, 'fullscreen', { def(art, 'fullscreen', {
get() { get() {
return $video.webkitDisplayingFullscreen; return $video.webkitDisplayingFullscreen;
}, },
@@ -51,7 +51,7 @@ const webkitScreenfull = (art, player) => {
}); });
}; };
export default function fullscreenMix(art, player) { export default function fullscreenMix(art) {
const { const {
i18n, i18n,
notice, notice,
@@ -60,11 +60,11 @@ export default function fullscreenMix(art, player) {
art.once('ready', () => { art.once('ready', () => {
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
nativeScreenfull(art, player); nativeScreenfull(art);
} else if (document.fullscreenEnabled || $video.webkitSupportsFullscreen) { } else if (document.fullscreenEnabled || $video.webkitSupportsFullscreen) {
webkitScreenfull(art, player); webkitScreenfull(art);
} else { } else {
def(player, 'fullscreen', { def(art, 'fullscreen', {
get() { get() {
return false; return false;
}, },
@@ -74,7 +74,7 @@ export default function fullscreenMix(art, player) {
}); });
} }
// 异步设置 // Asynchronous setting
def(art, 'fullscreen', get(player, 'fullscreen')); def(art, 'fullscreen', get(art, 'fullscreen'));
}); });
} }
packages/artplayer/src/player/fullscreenWebMix.js
+6 -6
View File
@@ -1,23 +1,23 @@
import { addClass, removeClass, hasClass, def } from '../utils'; import { addClass, removeClass, hasClass, def } from '../utils';
export default function fullscreenWebMix(art, player) { export default function fullscreenWebMix(art) {
const { $player } = art.template; const { $player } = art.template;
def(player, 'fullscreenWeb', { def(art, 'fullscreenWeb', {
get() { get() {
return hasClass($player, 'art-fullscreen-web'); return hasClass($player, 'art-fullscreen-web');
}, },
set(value) { set(value) {
if (value) { if (value) {
addClass($player, 'art-fullscreen-web'); addClass($player, 'art-fullscreen-web');
player.aspectRatioReset = true; art.aspectRatioReset = true;
player.autoSize = false; art.autoSize = false;
art.emit('resize'); art.emit('resize');
art.emit('fullscreenWeb', true); art.emit('fullscreenWeb', true);
} else { } else {
removeClass($player, 'art-fullscreen-web'); removeClass($player, 'art-fullscreen-web');
player.aspectRatioReset = true; art.aspectRatioReset = true;
player.autoSize = art.option.autoSize; art.autoSize = art.option.autoSize;
art.emit('resize'); art.emit('resize');
art.emit('fullscreenWeb'); art.emit('fullscreenWeb');
} }
packages/artplayer/src/player/index.js
+29 -31
View File
@@ -27,39 +27,37 @@ import loopMin from './loopMin';
import rotateMix from './rotateMix'; import rotateMix from './rotateMix';
import posterMix from './posterMix'; import posterMix from './posterMix';
import autoHeightMix from './autoHeightMix'; import autoHeightMix from './autoHeightMix';
import { proxyPropertys } from '../utils';
export default class Player { export default class Player {
constructor(art) { constructor(art) {
urlMix(art, this); urlMix(art);
eventInit(art, this); eventInit(art);
attrInit(art, this); attrInit(art);
exclusiveInit(art, this); exclusiveInit(art);
playMix(art, this); playMix(art);
pauseMix(art, this); pauseMix(art);
toggleMix(art, this); toggleMix(art);
seekMix(art, this); seekMix(art);
volumeMix(art, this); volumeMix(art);
currentTimeMix(art, this); currentTimeMix(art);
durationMix(art, this); durationMix(art);
switchMix(art, this); switchMix(art);
playbackRateMix(art, this); playbackRateMix(art);
aspectRatioMix(art, this); aspectRatioMix(art);
screenshotMix(art, this); screenshotMix(art);
fullscreenMix(art, this); fullscreenMix(art);
fullscreenWebMix(art, this); fullscreenWebMix(art);
pipMix(art, this); pipMix(art);
loadedMix(art, this); loadedMix(art);
playedMix(art, this); playedMix(art);
playingMix(art, this); playingMix(art);
autoSizeMix(art, this); autoSizeMix(art);
rectMix(art, this); rectMix(art);
flipMix(art, this); flipMix(art);
miniMix(art, this); miniMix(art);
loopMin(art, this); loopMin(art);
rotateMix(art, this); rotateMix(art);
posterMix(art, this); posterMix(art);
autoHeightMix(art, this); autoHeightMix(art);
proxyPropertys(art, this);
} }
} }
packages/artplayer/src/player/loadedMix.js
+4 -4
View File
@@ -1,13 +1,13 @@
import { def } from '../utils'; import { def } from '../utils';
export default function seekMix(art, player) { export default function seekMix(art) {
const { $video } = art.template; const { $video } = art.template;
def(player, 'loaded', { def(art, 'loaded', {
get: () => player.loadedTime / $video.duration, get: () => art.loadedTime / $video.duration,
}); });
def(player, 'loadedTime', { def(art, 'loadedTime', {
get: () => ($video.buffered.length ? $video.buffered.end($video.buffered.length - 1) : 0), get: () => ($video.buffered.length ? $video.buffered.end($video.buffered.length - 1) : 0),
}); });
} }
packages/artplayer/src/player/loopMin.js
+6 -6
View File
@@ -1,13 +1,13 @@
import { def, clamp } from '../utils'; import { def, clamp } from '../utils';
export default function loopMin(art, player) { export default function loopMin(art) {
let interval = []; let interval = [];
def(player, 'loop', { def(art, 'loop', {
get: () => interval, get: () => interval,
set: (value) => { set: (value) => {
if (Array.isArray(value) && typeof value[0] === 'number' && typeof value[1] === 'number') { if (Array.isArray(value) && typeof value[0] === 'number' && typeof value[1] === 'number') {
const start = clamp(value[0], 0, Math.min(value[1], player.duration)); const start = clamp(value[0], 0, Math.min(value[1], art.duration));
const end = clamp(value[1], start, player.duration); const end = clamp(value[1], start, art.duration);
if (end - start >= 1) { if (end - start >= 1) {
interval = [start, end]; interval = [start, end];
art.emit('loop', interval); art.emit('loop', interval);
@@ -24,8 +24,8 @@ export default function loopMin(art, player) {
art.on('video:timeupdate', () => { art.on('video:timeupdate', () => {
if (interval.length) { if (interval.length) {
if (player.currentTime < interval[0] || player.currentTime > interval[1]) { if (art.currentTime < interval[0] || art.currentTime > interval[1]) {
player.seek = interval[0]; art.seek = interval[0];
} }
} }
}); });
packages/artplayer/src/player/miniMix.js
+14 -14
View File
@@ -1,6 +1,6 @@
import { append, setStyle, addClass, removeClass, hasClass, def, isInViewport } from '../utils'; import { append, setStyle, addClass, removeClass, hasClass, def, isInViewport } from '../utils';
export default function miniMix(art, player) { export default function miniMix(art) {
const { const {
i18n, i18n,
option, option,
@@ -20,8 +20,8 @@ export default function miniMix(art, player) {
isDroging = true; isDroging = true;
lastPageX = event.pageX; lastPageX = event.pageX;
lastPageY = event.pageY; lastPageY = event.pageY;
lastPlayerLeft = player.left; lastPlayerLeft = art.left;
lastPlayerTop = player.top; lastPlayerTop = art.top;
}); });
proxy(document, 'mousemove', (event) => { proxy(document, 'mousemove', (event) => {
@@ -42,20 +42,20 @@ export default function miniMix(art, player) {
}); });
proxy($miniClose, 'click', () => { proxy($miniClose, 'click', () => {
player.mini = false; art.mini = false;
isDroging = false; isDroging = false;
removeClass($player, 'art-is-dragging'); removeClass($player, 'art-is-dragging');
}); });
append($miniTitle, option.title || i18n.get('Mini player')); append($miniTitle, option.title || i18n.get('Mini player'));
def(player, 'mini', { def(art, 'mini', {
get() { get() {
return hasClass($player, 'art-mini'); return hasClass($player, 'art-mini');
}, },
set(value) { set(value) {
if (value) { if (value) {
player.autoSize = false; art.autoSize = false;
cacheStyle = $player.style.cssText; cacheStyle = $player.style.cssText;
addClass($player, 'art-mini'); addClass($player, 'art-mini');
const top = storage.get('top'); const top = storage.get('top');
@@ -66,28 +66,28 @@ export default function miniMix(art, player) {
if (!isInViewport($miniHeader)) { if (!isInViewport($miniHeader)) {
storage.del('top'); storage.del('top');
storage.del('left'); storage.del('left');
player.mini = true; art.mini = true;
} }
} else { } else {
const $body = document.body; const $body = document.body;
const top = $body.clientHeight - player.height - 50; const top = $body.clientHeight - art.height - 50;
const left = $body.clientWidth - player.width - 50; const left = $body.clientWidth - art.width - 50;
storage.set('top', top); storage.set('top', top);
storage.set('left', left); storage.set('left', left);
setStyle($player, 'top', `${top}px`); setStyle($player, 'top', `${top}px`);
setStyle($player, 'left', `${left}px`); setStyle($player, 'left', `${left}px`);
} }
player.aspectRatio = false; art.aspectRatio = false;
player.playbackRate = false; art.playbackRate = false;
art.emit('mini', true); art.emit('mini', true);
} else { } else {
$player.style.cssText = cacheStyle; $player.style.cssText = cacheStyle;
removeClass($player, 'art-mini'); removeClass($player, 'art-mini');
setStyle($player, 'top', null); setStyle($player, 'top', null);
setStyle($player, 'left', null); setStyle($player, 'left', null);
player.aspectRatio = false; art.aspectRatio = false;
player.playbackRate = false; art.playbackRate = false;
player.autoSize = option.autoSize; art.autoSize = option.autoSize;
art.emit('mini'); art.emit('mini');
} }
}, },
packages/artplayer/src/player/pauseMix.js
+2 -2
View File
@@ -1,13 +1,13 @@
import { def } from '../utils'; import { def } from '../utils';
export default function pauseMix(art, player) { export default function pauseMix(art) {
const { const {
template: { $video }, template: { $video },
i18n, i18n,
notice, notice,
} = art; } = art;
def(player, 'pause', { def(art, 'pause', {
value() { value() {
const result = $video.pause(); const result = $video.pause();
notice.show = i18n.get('Pause'); notice.show = i18n.get('Pause');
packages/artplayer/src/player/pipMix.js
+8 -8
View File
@@ -1,6 +1,6 @@
import { def } from '../utils'; import { def } from '../utils';
function nativePip(art, player) { function nativePip(art) {
const { const {
template: { $video }, template: { $video },
events: { proxy }, events: { proxy },
@@ -9,7 +9,7 @@ function nativePip(art, player) {
$video.disablePictureInPicture = false; $video.disablePictureInPicture = false;
def(player, 'pip', { def(art, 'pip', {
get() { get() {
return document.pictureInPictureElement; return document.pictureInPictureElement;
}, },
@@ -37,12 +37,12 @@ function nativePip(art, player) {
}); });
} }
function webkitPip(art, player) { function webkitPip(art) {
const { $video } = art.template; const { $video } = art.template;
$video.webkitSetPresentationMode('inline'); $video.webkitSetPresentationMode('inline');
def(player, 'pip', { def(art, 'pip', {
get() { get() {
return $video.webkitPresentationMode === 'picture-in-picture'; return $video.webkitPresentationMode === 'picture-in-picture';
}, },
@@ -58,18 +58,18 @@ function webkitPip(art, player) {
}); });
} }
export default function pipMix(art, player) { export default function pipMix(art) {
const { const {
i18n, i18n,
notice, notice,
template: { $video }, template: { $video },
} = art; } = art;
if (document.pictureInPictureEnabled) { if (document.pictureInPictureEnabled) {
nativePip(art, player); nativePip(art);
} else if ($video.webkitSupportsPresentationMode) { } else if ($video.webkitSupportsPresentationMode) {
webkitPip(art, player); webkitPip(art);
} else { } else {
def(player, 'pip', { def(art, 'pip', {
get() { get() {
return false; return false;
}, },
packages/artplayer/src/player/playMix.js
+3 -7
View File
@@ -1,6 +1,6 @@
import { def } from '../utils'; import { def } from '../utils';
export default function playMix(art, player) { export default function playMix(art) {
const { const {
i18n, i18n,
notice, notice,
@@ -9,7 +9,7 @@ export default function playMix(art, player) {
template: { $video }, template: { $video },
} = art; } = art;
def(player, 'play', { def(art, 'play', {
value() { value() {
const promise = $video.play(); const promise = $video.play();
@@ -21,11 +21,7 @@ export default function playMix(art, player) {
} }
if (mutex) { if (mutex) {
instances instances.filter((item) => item !== art).forEach((item) => item.pause());
.filter((item) => item !== art)
.forEach((item) => {
item.player.pause();
});
} }
notice.show = i18n.get('Play'); notice.show = i18n.get('Play');
packages/artplayer/src/player/playbackRateMix.js
+6 -6
View File
@@ -1,13 +1,13 @@
import { errorHandle, def } from '../utils'; import { errorHandle, def } from '../utils';
export default function playbackRateMix(art, player) { export default function playbackRateMix(art) {
const { const {
template: { $video, $player }, template: { $video, $player },
i18n, i18n,
notice, notice,
} = art; } = art;
def(player, 'playbackRate', { def(art, 'playbackRate', {
get() { get() {
return $player.dataset.playbackRate; return $player.dataset.playbackRate;
}, },
@@ -20,20 +20,20 @@ export default function playbackRateMix(art, player) {
$player.dataset.playbackRate = rate; $player.dataset.playbackRate = rate;
notice.show = `${i18n.get('Rate')}: ${rate === 1.0 ? i18n.get('Normal') : `${rate}x`}`; notice.show = `${i18n.get('Rate')}: ${rate === 1.0 ? i18n.get('Normal') : `${rate}x`}`;
art.emit('playbackRate', rate); art.emit('playbackRate', rate);
} else if (player.playbackRate) { } else if (art.playbackRate) {
player.playbackRate = 1; art.playbackRate = 1;
delete $player.dataset.playbackRate; delete $player.dataset.playbackRate;
art.emit('playbackRate'); art.emit('playbackRate');
} }
}, },
}); });
def(player, 'playbackRateReset', { def(art, 'playbackRateReset', {
set(value) { set(value) {
if (value) { if (value) {
const { playbackRate } = $player.dataset; const { playbackRate } = $player.dataset;
if (playbackRate) { if (playbackRate) {
player.playbackRate = Number(playbackRate); art.playbackRate = Number(playbackRate);
} }
} }
}, },
packages/artplayer/src/player/playedMix.js
+3 -3
View File
@@ -1,7 +1,7 @@
import { def } from '../utils'; import { def } from '../utils';
export default function playedMix(art, player) { export default function playedMix(art) {
def(player, 'played', { def(art, 'played', {
get: () => player.currentTime / player.duration, get: () => art.currentTime / art.duration,
}); });
} }
packages/artplayer/src/player/playingMix.js
+2 -2
View File
@@ -1,8 +1,8 @@
import { def } from '../utils'; import { def } from '../utils';
export default function playingMix(art, player) { export default function playingMix(art) {
const { $video } = art.template; const { $video } = art.template;
def(player, 'playing', { def(art, 'playing', {
get: () => !!($video.currentTime > 0 && !$video.paused && !$video.ended && $video.readyState > 2), get: () => !!($video.currentTime > 0 && !$video.paused && !$video.ended && $video.readyState > 2),
}); });
} }
packages/artplayer/src/player/posterMix.js
+2 -2
View File
@@ -1,12 +1,12 @@
import { def, setStyle } from '../utils'; import { def, setStyle } from '../utils';
export default function posterMix(art, player) { export default function posterMix(art) {
const { const {
option, option,
template: { $poster }, template: { $poster },
} = art; } = art;
def(player, 'poster', { def(art, 'poster', {
get: () => option.poster, get: () => option.poster,
set(url) { set(url) {
option.poster = url; option.poster = url;
packages/artplayer/src/player/rectMix.js
+9 -9
View File
@@ -1,29 +1,29 @@
import { def } from '../utils'; import { def } from '../utils';
export default function rectMix(art, player) { export default function rectMix(art) {
def(player, 'rect', { def(art, 'rect', {
get: () => { get: () => {
return art.template.$player.getBoundingClientRect(); return art.template.$player.getBoundingClientRect();
}, },
}); });
['bottom', 'height', 'left', 'right', 'top', 'width'].forEach(key => { ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach((key) => {
def(player, key, { def(art, key, {
get: () => { get: () => {
return player.rect[key]; return art.rect[key];
}, },
}); });
}); });
def(player, 'x', { def(art, 'x', {
get: () => { get: () => {
return player.left + window.pageXOffset; return art.left + window.pageXOffset;
}, },
}); });
def(player, 'y', { def(art, 'y', {
get: () => { get: () => {
return player.top + window.pageYOffset; return art.top + window.pageYOffset;
}, },
}); });
} }
packages/artplayer/src/player/rotateMix.js
+7 -7
View File
@@ -1,13 +1,13 @@
import { setStyle, errorHandle, def } from '../utils'; import { setStyle, errorHandle, def } from '../utils';
export default function rotateMix(art, player) { export default function rotateMix(art) {
const { const {
template: { $video, $player }, template: { $video, $player },
i18n, i18n,
notice, notice,
} = art; } = art;
def(player, 'rotate', { def(art, 'rotate', {
get: () => Number($player.dataset.rotate) || 0, get: () => Number($player.dataset.rotate) || 0,
set: (deg) => { set: (deg) => {
if (!deg) deg = 0; if (!deg) deg = 0;
@@ -19,7 +19,7 @@ export default function rotateMix(art, player) {
delete $player.dataset.rotate; delete $player.dataset.rotate;
setStyle($video, 'transform', null); setStyle($video, 'transform', null);
} else { } else {
player.flip = false; art.flip = false;
art.autoSize = true; art.autoSize = true;
$player.dataset.rotate = deg; $player.dataset.rotate = deg;
@@ -65,11 +65,11 @@ export default function rotateMix(art, player) {
}, },
}); });
def(player, 'rotateReset', { def(art, 'rotateReset', {
set(value) { set(value) {
if (value && player.rotate) { if (value && art.rotate) {
const { rotate } = player; const { rotate } = art;
player.rotate = rotate; art.rotate = rotate;
} }
}, },
}); });
packages/artplayer/src/player/screenshotMix.js
+5 -5
View File
@@ -1,6 +1,6 @@
import { secondToTime, download, def } from '../utils'; import { secondToTime, download, def } from '../utils';
export default function screenshotMix(art, player) { export default function screenshotMix(art) {
const { const {
option, option,
notice, notice,
@@ -9,7 +9,7 @@ export default function screenshotMix(art, player) {
const $canvas = document.createElement('canvas'); const $canvas = document.createElement('canvas');
def(player, 'getDataURL', { def(art, 'getDataURL', {
value: () => value: () =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
try { try {
@@ -24,7 +24,7 @@ export default function screenshotMix(art, player) {
}), }),
}); });
def(player, 'getBlobUrl', { def(art, 'getBlobUrl', {
value: () => value: () =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
try { try {
@@ -41,9 +41,9 @@ export default function screenshotMix(art, player) {
}), }),
}); });
def(player, 'screenshot', { def(art, 'screenshot', {
value: () => { value: () => {
return player.getDataURL().then((dataUri) => { return art.getDataURL().then((dataUri) => {
download(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`); download(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
art.emit('screenshot', dataUri); art.emit('screenshot', dataUri);
return dataUri; return dataUri;
packages/artplayer/src/player/seekMix.js
+9 -9
View File
@@ -1,27 +1,27 @@
import { secondToTime, def } from '../utils'; import { secondToTime, def } from '../utils';
export default function seekMix(art, player) { export default function seekMix(art) {
const { notice } = art; const { notice } = art;
def(player, 'seek', { def(art, 'seek', {
set(time) { set(time) {
player.currentTime = time; art.currentTime = time;
art.emit('seek', player.currentTime); art.emit('seek', art.currentTime);
if (player.duration) { if (art.duration) {
notice.show = `${secondToTime(player.currentTime)} / ${secondToTime(player.duration)}`; notice.show = `${secondToTime(art.currentTime)} / ${secondToTime(art.duration)}`;
} }
}, },
}); });
def(player, 'forward', { def(art, 'forward', {
set(time) { set(time) {
player.seek = player.currentTime + time; art.seek = art.currentTime + time;
}, },
}); });
def(player, 'backward', { def(player, 'backward', {
set(time) { set(time) {
player.seek = player.currentTime - time; art.seek = art.currentTime - time;
}, },
}); });
} }
packages/artplayer/src/player/switchMix.js
+14 -14
View File
@@ -1,22 +1,22 @@
import { def } from '../utils'; import { def } from '../utils';
export default function switchMix(art, player) { export default function switchMix(art) {
const { i18n, option, notice } = art; const { i18n, option, notice } = art;
function switchUrl(url, name, currentTime) { function switchUrl(url, name, currentTime) {
return new Promise((resolve) => { return new Promise((resolve) => {
if (url === player.url) return resolve(url); if (url === art.url) return resolve(url);
URL.revokeObjectURL(player.url); URL.revokeObjectURL(art.url);
player.url = url; art.url = url;
art.once('video:canplay', () => { art.once('video:canplay', () => {
player.playbackRate = false; art.playbackRate = false;
player.aspectRatio = false; art.aspectRatio = false;
player.flip = 'normal'; art.flip = 'normal';
player.autoSize = option.autoSize; art.autoSize = option.autoSize;
player.currentTime = currentTime; art.currentTime = currentTime;
art.notice.show = ''; art.notice.show = '';
if (player.playing) { if (art.playing) {
player.play(); art.play();
} }
if (name) { if (name) {
notice.show = `${i18n.get('Switch video')}: ${name}`; notice.show = `${i18n.get('Switch video')}: ${name}`;
@@ -27,13 +27,13 @@ export default function switchMix(art, player) {
}); });
} }
def(player, 'switchQuality', { def(art, 'switchQuality', {
value: (url, name) => { value: (url, name) => {
return switchUrl(url, name, player.currentTime); return switchUrl(url, name, art.currentTime);
}, },
}); });
def(player, 'switchUrl', { def(art, 'switchUrl', {
value: (url, name) => { value: (url, name) => {
return switchUrl(url, name, 0); return switchUrl(url, name, 0);
}, },
packages/artplayer/src/player/toggleMix.js
+5 -5
View File
@@ -1,12 +1,12 @@
import { def } from '../utils'; import { def } from '../utils';
export default function toggleMix(art, player) { export default function toggleMix(art) {
def(player, 'toggle', { def(art, 'toggle', {
value() { value() {
if (player.playing) { if (art.playing) {
return player.pause(); return art.pause();
} else { } else {
return player.play(); return art.play();
} }
}, },
}); });
packages/artplayer/src/player/urlMix.js
+3 -3
View File
@@ -1,12 +1,12 @@
import { getExt, def, sleep } from '../utils'; import { getExt, def, sleep } from '../utils';
export default function urlMix(art, player) { export default function urlMix(art) {
const { const {
option, option,
template: { $video }, template: { $video },
} = art; } = art;
def(player, 'url', { def(art, 'url', {
get() { get() {
return $video.currentSrc; return $video.currentSrc;
}, },
@@ -19,7 +19,7 @@ export default function urlMix(art, player) {
typeCallback.call(art, $video, url, art); typeCallback.call(art, $video, url, art);
}); });
} else { } else {
if (player.url && player.url !== url) { if (art.url && art.url !== url) {
art.once('video:canplay', () => { art.once('video:canplay', () => {
if (art.isReady) { if (art.isReady) {
art.emit('restart'); art.emit('restart');
packages/artplayer/src/player/volumeMix.js
+5 -5
View File
@@ -1,6 +1,6 @@
import { clamp, def } from '../utils'; import { clamp, def } from '../utils';
export default function volumeMix(art, player) { export default function volumeMix(art) {
const { const {
template: { $video }, template: { $video },
i18n, i18n,
@@ -8,9 +8,9 @@ export default function volumeMix(art, player) {
storage, storage,
} = art; } = art;
def(player, 'volume', { def(art, 'volume', {
get: () => $video.volume || 0, get: () => $video.volume || 0,
set: percentage => { set: (percentage) => {
$video.volume = clamp(percentage, 0, 1); $video.volume = clamp(percentage, 0, 1);
notice.show = `${i18n.get('Volume')}: ${parseInt($video.volume * 100, 10)}`; notice.show = `${i18n.get('Volume')}: ${parseInt($video.volume * 100, 10)}`;
if ($video.volume !== 0) { if ($video.volume !== 0) {
@@ -20,9 +20,9 @@ export default function volumeMix(art, player) {
}, },
}); });
def(player, 'muted', { def(art, 'muted', {
get: () => $video.muted, get: () => $video.muted,
set: muted => { set: (muted) => {
$video.muted = muted; $video.muted = muted;
art.emit('volume', $video.volume); art.emit('volume', $video.volume);
}, },
packages/artplayer/src/plugins/localVideo.js
+7 -8
View File
@@ -4,7 +4,6 @@ export default function localVideo(art) {
const { const {
events: { proxy }, events: { proxy },
template, template,
player,
option, option,
setting, setting,
i18n, i18n,
@@ -16,7 +15,7 @@ export default function localVideo(art) {
if (canPlayType === 'maybe' || canPlayType === 'probably') { if (canPlayType === 'maybe' || canPlayType === 'probably') {
const url = URL.createObjectURL(file); const url = URL.createObjectURL(file);
option.title = file.name; option.title = file.name;
player.switchUrl(url, file.name); art.switchUrl(url, file.name);
art.emit('localVideo', file); art.emit('localVideo', file);
} else { } else {
errorHandle(false, 'Playback of this file format is not supported'); errorHandle(false, 'Playback of this file format is not supported');
@@ -24,12 +23,12 @@ export default function localVideo(art) {
} }
} }
proxy(template.$player, 'dragover', e => { proxy(template.$player, 'dragover', (event) => {
e.preventDefault(); event.preventDefault();
}); });
proxy(template.$player, 'drop', e => { proxy(template.$player, 'drop', (event) => {
e.preventDefault(); event.preventDefault();
const file = e.dataTransfer.files[0]; const file = e.dataTransfer.files[0];
loadVideo(file); loadVideo(file);
}); });
@@ -65,10 +64,10 @@ export default function localVideo(art) {
<div class="art-upload-value"></div> <div class="art-upload-value"></div>
</div> </div>
`, `,
mounted: $setting => { mounted: ($setting) => {
const $btn = query('.art-upload-btn', $setting); const $btn = query('.art-upload-btn', $setting);
const $value = query('.art-upload-value', $setting); const $value = query('.art-upload-value', $setting);
art.on('localVideo', file => { art.on('localVideo', (file) => {
$value.textContent = file.name; $value.textContent = file.name;
$value.title = file.name; $value.title = file.name;
}); });
packages/artplayer/src/plugins/miniProgressBar.js
+1 -2
View File
@@ -1,7 +1,6 @@
export default function miniProgressBar(art) { export default function miniProgressBar(art) {
const { const {
layers, layers,
player,
option: { theme }, option: { theme },
} = art; } = art;
@@ -26,7 +25,7 @@ export default function miniProgressBar(art) {
}); });
art.on('video:timeupdate', () => { art.on('video:timeupdate', () => {
$progressBar.style.width = `${player.played * 100}%`; $progressBar.style.width = `${art.played * 100}%`;
}); });
}, },
}); });
packages/artplayer/src/plugins/subtitleOffset.js
+3 -3
View File
@@ -46,7 +46,7 @@ function settingMix(art) {
export default function subtitleOffset(art) { export default function subtitleOffset(art) {
const { clamp } = art.constructor.utils; const { clamp } = art.constructor.utils;
const { setting, notice, template, i18n, player } = art; const { setting, notice, template, i18n } = art;
setting.add(settingMix); setting.add(settingMix);
let cuesCache = []; let cuesCache = [];
@@ -67,8 +67,8 @@ export default function subtitleOffset(art) {
endTime: cue.endTime, endTime: cue.endTime,
}; };
} }
cue.startTime = clamp(cuesCache[index].startTime + time, 0, player.duration); cue.startTime = clamp(cuesCache[index].startTime + time, 0, art.duration);
cue.endTime = clamp(cuesCache[index].endTime + time, 0, player.duration); cue.endTime = clamp(cuesCache[index].endTime + time, 0, art.duration);
}); });
notice.show = `${i18n.get('Subtitle offset time')}: ${value}s`; notice.show = `${i18n.get('Subtitle offset time')}: ${value}s`;
art.emit('subtitleOffset', value); art.emit('subtitleOffset', value);
packages/artplayer/src/setting/aspectRatio.js
+7 -7
View File
@@ -1,8 +1,8 @@
import { inverseClass, queryAll } from '../utils'; import { inverseClass, queryAll } from '../utils';
export default function aspectRatio(option) { export default function aspectRatio(option) {
return art => { return (art) => {
const { i18n, player } = art; const { i18n } = art;
return { return {
...option, ...option,
html: ` html: `
@@ -19,15 +19,15 @@ export default function aspectRatio(option) {
</div> </div>
</div> </div>
`, `,
click: (setting, event) => { click: (_, event) => {
const { value } = event.target.dataset; const { value } = event.target.dataset;
if (value) { if (value) {
player.aspectRatio = value; art.aspectRatio = value;
} }
}, },
mounted: $setting => { mounted: ($setting) => {
art.on('aspectRatio', ratio => { art.on('aspectRatio', (ratio) => {
const $current = queryAll('button', $setting).find(item => item.dataset.value === ratio); const $current = queryAll('button', $setting).find((item) => item.dataset.value === ratio);
if ($current) { if ($current) {
inverseClass($current.parentElement, 'current'); inverseClass($current.parentElement, 'current');
} }
packages/artplayer/src/setting/flip.js
+7 -7
View File
@@ -1,8 +1,8 @@
import { inverseClass, queryAll } from '../utils'; import { inverseClass, queryAll } from '../utils';
export default function flip(option) { export default function flip(option) {
return art => { return (art) => {
const { i18n, player } = art; const { i18n } = art;
return { return {
...option, ...option,
html: ` html: `
@@ -19,15 +19,15 @@ export default function flip(option) {
</div> </div>
</div> </div>
`, `,
click: (setting, event) => { click: (_, event) => {
const { value } = event.target.dataset; const { value } = event.target.dataset;
if (value) { if (value) {
player.flip = value; art.flip = value;
} }
}, },
mounted: $setting => { mounted: ($setting) => {
art.on('flip', flip => { art.on('flip', (flip) => {
const $current = queryAll('button', $setting).find(item => item.dataset.value === flip); const $current = queryAll('button', $setting).find((item) => item.dataset.value === flip);
if ($current) { if ($current) {
inverseClass($current.parentElement, 'current'); inverseClass($current.parentElement, 'current');
} }
packages/artplayer/src/setting/playbackRate.js
+4 -5
View File
@@ -1,10 +1,9 @@
import { query } from '../utils'; import { query } from '../utils';
export default function playbackRate(option) { export default function playbackRate(option) {
return art => { return (art) => {
const { const {
i18n, i18n,
player,
events: { proxy }, events: { proxy },
} = art; } = art;
return { return {
@@ -17,16 +16,16 @@ export default function playbackRate(option) {
<input class="art-subtitle-range" value="1" type="range" min="0.5" max="2" step="0.25"> <input class="art-subtitle-range" value="1" type="range" min="0.5" max="2" step="0.25">
</div> </div>
`, `,
mounted: $setting => { mounted: ($setting) => {
const $range = query('.art-setting-range input', $setting); const $range = query('.art-setting-range input', $setting);
const $value = query('.art-subtitle-value', $setting); const $value = query('.art-subtitle-value', $setting);
proxy($range, 'change', () => { proxy($range, 'change', () => {
const { value } = $range; const { value } = $range;
$value.innerText = value; $value.innerText = value;
player.playbackRate = Number(value); art.playbackRate = Number(value);
}); });
art.on('playbackRate', rate => { art.on('playbackRate', (rate) => {
if (rate && $range.value !== rate) { if (rate && $range.value !== rate) {
$range.value = rate; $range.value = rate;
$value.innerText = rate; $value.innerText = rate;
packages/artplayer/src/setting/rotate.js
+5 -5
View File
@@ -2,7 +2,7 @@ import { query } from '../utils';
export default function rotate(option) { export default function rotate(option) {
return (art) => { return (art) => {
const { i18n, player } = art; const { i18n } = art;
return { return {
...option, ...option,
html: ` html: `
@@ -21,14 +21,14 @@ export default function rotate(option) {
click: (setting, event) => { click: (setting, event) => {
const { value } = event.target.dataset; const { value } = event.target.dataset;
if (value) { if (value) {
const deg = player.rotate + Number(value); const deg = art.rotate + Number(value);
if (deg === 360 || deg === -360) { if (deg === 360 || deg === -360) {
player.rotate = 0; art.rotate = 0;
} else { } else {
player.rotate = deg; art.rotate = deg;
} }
} else { } else {
player.rotate = 0; art.rotate = 0;
} }
}, },
mounted: ($setting) => { mounted: ($setting) => {
packages/artplayer/src/whitelist.js
+8 -3
View File
@@ -2,11 +2,15 @@ import { userAgent, isMobile } from './utils';
export default class Whitelist { export default class Whitelist {
constructor(art) { constructor(art) {
this.art = art;
}
get state() {
const { const {
constructor: { kindOf }, constructor: { kindOf },
option: { whitelist }, option: { whitelist },
} = art; } = this.art;
this.state = return (
!isMobile || !isMobile ||
whitelist.some((item) => { whitelist.some((item) => {
switch (kindOf(item)) { switch (kindOf(item)) {
@@ -19,6 +23,7 @@ export default class Whitelist {
default: default:
return false; return false;
} }
}); })
);
} }
} }