diff --git a/README.md b/README.md
index e8915eae1..eba4b146c 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,6 @@
- 
diff --git a/packages/artplayer/package.json b/packages/artplayer/package.json
index dc2c9cd1d..2593e0025 100644
--- a/packages/artplayer/package.json
+++ b/packages/artplayer/package.json
@@ -1,6 +1,6 @@
{
"name": "artplayer",
- "version": "4.1.4",
+ "version": "5.0.0",
"expose": "Artplayer",
"description": "ArtPlayer.js is a modern and full featured HTML5 video player",
"main": "dist/artplayer.js",
diff --git a/packages/artplayer/src/ads.js b/packages/artplayer/src/ads.js
index 83c0f0ef5..814961ef9 100644
--- a/packages/artplayer/src/ads.js
+++ b/packages/artplayer/src/ads.js
@@ -30,7 +30,7 @@ export default class Ads {
play(item = {}) {
if (this.isEnd) return;
- this.art.player.switchUrl(item.url);
+ this.art.switchUrl(item.url);
this.art.once('video:timeupdate', () => {
this.art.emit('ads:start', item);
@@ -52,7 +52,7 @@ export default class Ads {
this.isEnd = true;
this.playing = false;
this.art.option.url = this.urlCache;
- this.art.player.switchUrl(this.urlCache);
+ this.art.switchUrl(this.urlCache);
this.art.emit('ads:end');
}
}
diff --git a/packages/artplayer/src/contextmenu/aspectRatio.js b/packages/artplayer/src/contextmenu/aspectRatio.js
index faef00ac8..fb87f08c3 100644
--- a/packages/artplayer/src/contextmenu/aspectRatio.js
+++ b/packages/artplayer/src/contextmenu/aspectRatio.js
@@ -2,7 +2,7 @@ import { inverseClass, queryAll } from '../utils';
export default function aspectRatio(option) {
return (art) => {
- const { i18n, player } = art;
+ const { i18n } = art;
return {
...option,
html: `${i18n.get('Aspect ratio')}:
@@ -13,7 +13,7 @@ export default function aspectRatio(option) {
click: (contextmenu, event) => {
const { ratio } = event.target.dataset;
if (ratio) {
- player.aspectRatio = ratio;
+ art.aspectRatio = ratio;
contextmenu.show = false;
}
},
diff --git a/packages/artplayer/src/contextmenu/playbackRate.js b/packages/artplayer/src/contextmenu/playbackRate.js
index 32c3ddbc1..13b4a3c8d 100644
--- a/packages/artplayer/src/contextmenu/playbackRate.js
+++ b/packages/artplayer/src/contextmenu/playbackRate.js
@@ -2,7 +2,7 @@ import { inverseClass, queryAll } from '../utils';
export default function playbackRate(option) {
return (art) => {
- const { i18n, player } = art;
+ const { i18n } = art;
return {
...option,
html: `${i18n.get('Play speed')}:
@@ -16,7 +16,7 @@ export default function playbackRate(option) {
click: (contextmenu, event) => {
const { rate } = event.target.dataset;
if (rate) {
- player.playbackRate = Number(rate);
+ art.playbackRate = Number(rate);
contextmenu.show = false;
}
},
diff --git a/packages/artplayer/src/control/fullscreen.js b/packages/artplayer/src/control/fullscreen.js
index 563b60c43..a3b5dd8fe 100644
--- a/packages/artplayer/src/control/fullscreen.js
+++ b/packages/artplayer/src/control/fullscreen.js
@@ -9,13 +9,12 @@ export default function fullscreen(option) {
events: { proxy },
icons,
i18n,
- player,
} = art;
append($control, icons.fullscreen);
proxy($control, 'click', () => {
- player.fullscreen = !player.fullscreen;
+ art.fullscreen = !art.fullscreen;
});
art.on('fullscreen', (value) => {
diff --git a/packages/artplayer/src/control/fullscreenWeb.js b/packages/artplayer/src/control/fullscreenWeb.js
index a2f79ba9b..59e4c2300 100644
--- a/packages/artplayer/src/control/fullscreenWeb.js
+++ b/packages/artplayer/src/control/fullscreenWeb.js
@@ -9,13 +9,12 @@ export default function fullscreenWeb(option) {
events: { proxy },
icons,
i18n,
- player,
} = art;
append($control, icons.fullscreenWeb);
proxy($control, 'click', () => {
- player.fullscreenWeb = !player.fullscreenWeb;
+ art.fullscreenWeb = !art.fullscreenWeb;
});
art.on('fullscreenWeb', (value) => {
diff --git a/packages/artplayer/src/control/index.js b/packages/artplayer/src/control/index.js
index fe686b773..7047c4d8f 100644
--- a/packages/artplayer/src/control/index.js
+++ b/packages/artplayer/src/control/index.js
@@ -36,7 +36,7 @@ export default class Control extends Component {
});
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;
addClass($player, 'art-hide-cursor');
removeClass($player, 'art-hover');
diff --git a/packages/artplayer/src/control/loop.js b/packages/artplayer/src/control/loop.js
index 0a453a9db..635641210 100644
--- a/packages/artplayer/src/control/loop.js
+++ b/packages/artplayer/src/control/loop.js
@@ -4,16 +4,14 @@ export default function loop(option) {
return (art) => ({
...option,
mounted: ($control) => {
- const { player } = art;
-
const $left = append($control, ``);
const $right = append($control, ``);
art.on('loop', (value) => {
if (value) {
setStyle($control, 'display', 'block');
- setStyle($left, 'left', `calc(${(value[0] / player.duration) * 100}% - ${$left.clientWidth}px)`);
- setStyle($right, 'left', `${(value[1] / player.duration) * 100}%`);
+ setStyle($left, 'left', `calc(${(value[0] / art.duration) * 100}% - ${$left.clientWidth}px)`);
+ setStyle($right, 'left', `${(value[1] / art.duration) * 100}%`);
} else {
setStyle($control, 'display', 'none');
}
diff --git a/packages/artplayer/src/control/pip.js b/packages/artplayer/src/control/pip.js
index 985bbdf35..ab5d7f9ff 100644
--- a/packages/artplayer/src/control/pip.js
+++ b/packages/artplayer/src/control/pip.js
@@ -9,13 +9,12 @@ export default function pip(option) {
events: { proxy },
icons,
i18n,
- player,
} = art;
append($control, icons.pip);
proxy($control, 'click', () => {
- player.pip = !player.pip;
+ art.pip = !art.pip;
});
art.on('pip', (value) => {
diff --git a/packages/artplayer/src/control/playAndPause.js b/packages/artplayer/src/control/playAndPause.js
index e8edb81a0..355bbf0f2 100644
--- a/packages/artplayer/src/control/playAndPause.js
+++ b/packages/artplayer/src/control/playAndPause.js
@@ -1,14 +1,13 @@
import { append, tooltip, setStyle } from '../utils';
export default function playAndPause(option) {
- return art => ({
+ return (art) => ({
...option,
- mounted: $control => {
+ mounted: ($control) => {
const {
events: { proxy },
icons,
i18n,
- player,
} = art;
const $play = append($control, icons.play);
@@ -17,11 +16,11 @@ export default function playAndPause(option) {
tooltip($pause, i18n.get('Pause'));
proxy($play, 'click', () => {
- player.play();
+ art.play();
});
proxy($pause, 'click', () => {
- player.pause();
+ art.pause();
});
function showPlay() {
@@ -34,7 +33,7 @@ export default function playAndPause(option) {
setStyle($pause, 'display', 'flex');
}
- if (player.playing) {
+ if (art.playing) {
showPause();
} else {
showPlay();
diff --git a/packages/artplayer/src/control/progress.js b/packages/artplayer/src/control/progress.js
index 3045785ad..f64f193b1 100644
--- a/packages/artplayer/src/control/progress.js
+++ b/packages/artplayer/src/control/progress.js
@@ -2,13 +2,12 @@ import { query, clamp, append, setStyle, setStyles, secondToTime, includeFromEve
export function getPosFromEvent(art, event) {
const {
- player,
template: { $progress },
} = art;
const { left } = $progress.getBoundingClientRect();
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 percentage = clamp(width / $progress.clientWidth, 0, 1);
return { second, time, width, percentage };
@@ -19,7 +18,6 @@ export default function progress(option) {
const {
option: { highlight, theme },
events: { proxy },
- player,
icons,
} = art;
return {
@@ -98,21 +96,21 @@ export default function progress(option) {
}
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(
$highlight,
``,
);
});
- setBar('loaded', player.loaded);
+ setBar('loaded', art.loaded);
art.on('video:progress', () => {
- setBar('loaded', player.loaded);
+ setBar('loaded', art.loaded);
});
art.on('video:timeupdate', () => {
- setBar('played', player.played);
+ setBar('played', art.played);
});
art.on('video:ended', () => {
@@ -136,7 +134,7 @@ export default function progress(option) {
if (event.target !== $indicator) {
const { second, percentage } = getPosFromEvent(art, event);
setBar('played', percentage);
- player.seek = second;
+ art.seek = second;
}
});
@@ -148,7 +146,7 @@ export default function progress(option) {
if (isDroging) {
const { second, percentage } = getPosFromEvent(art, event);
setBar('played', percentage);
- player.seek = second;
+ art.seek = second;
}
});
diff --git a/packages/artplayer/src/control/quality.js b/packages/artplayer/src/control/quality.js
index 29fb982e6..0a329b400 100644
--- a/packages/artplayer/src/control/quality.js
+++ b/packages/artplayer/src/control/quality.js
@@ -7,7 +7,7 @@ export default function quality(option) {
html: qualityDefault ? qualityDefault.html : '',
selector: qualityOption,
onSelect(item) {
- art.player.switchQuality(item.url, item.html);
+ art.switchQuality(item.url, item.html);
},
};
};
diff --git a/packages/artplayer/src/control/screenshot.js b/packages/artplayer/src/control/screenshot.js
index ce4be4186..5c711da86 100644
--- a/packages/artplayer/src/control/screenshot.js
+++ b/packages/artplayer/src/control/screenshot.js
@@ -1,19 +1,18 @@
import { append } from '../utils';
export default function screenshot(option) {
- return art => ({
+ return (art) => ({
...option,
tooltip: art.i18n.get('Screenshot'),
- mounted: $control => {
+ mounted: ($control) => {
const {
events: { proxy },
icons,
- player,
} = art;
append($control, icons.screenshot);
proxy($control, 'click', () => {
- player.screenshot();
+ art.screenshot();
});
},
});
diff --git a/packages/artplayer/src/control/time.js b/packages/artplayer/src/control/time.js
index 153dd9e51..bacb4cac0 100644
--- a/packages/artplayer/src/control/time.js
+++ b/packages/artplayer/src/control/time.js
@@ -5,7 +5,7 @@ export default function time(option) {
...option,
mounted: $control => {
function getTime() {
- const newTime = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;
+ const newTime = `${secondToTime(art.currentTime)} / ${secondToTime(art.duration)}`;
if (newTime !== $control.innerText) {
$control.innerText = newTime;
}
diff --git a/packages/artplayer/src/control/volume.js b/packages/artplayer/src/control/volume.js
index f88f75aa0..273f83058 100644
--- a/packages/artplayer/src/control/volume.js
+++ b/packages/artplayer/src/control/volume.js
@@ -7,7 +7,6 @@ export default function volume(option) {
const {
events: { proxy },
icons,
- player,
i18n,
} = art;
@@ -34,7 +33,7 @@ export default function volume(option) {
}
function setVolumeHandle(percentage = 0.7) {
- if (player.muted || percentage === 0) {
+ if (art.muted || percentage === 0) {
setStyle($volume, 'display', 'none');
setStyle($volumeClose, 'display', 'flex');
setStyle($volumeHandle, 'left', '0');
@@ -46,22 +45,22 @@ export default function volume(option) {
}
}
- setVolumeHandle(player.volume);
+ setVolumeHandle(art.volume);
art.on('video:volumechange', () => {
- setVolumeHandle(player.volume);
+ setVolumeHandle(art.volume);
});
proxy($volume, 'click', () => {
- player.muted = true;
+ art.muted = true;
});
proxy($volumeClose, 'click', () => {
- player.muted = false;
+ art.muted = false;
});
proxy($volumePanel, 'click', (event) => {
- player.muted = false;
- player.volume = volumeChangeFromEvent(event);
+ art.muted = false;
+ art.volume = volumeChangeFromEvent(event);
});
proxy($volumeHandle, 'mousedown', () => {
@@ -70,8 +69,8 @@ export default function volume(option) {
proxy($control, 'mousemove', (event) => {
if (isDroging) {
- player.muted = false;
- player.volume = volumeChangeFromEvent(event);
+ art.muted = false;
+ art.volume = volumeChangeFromEvent(event);
}
});
diff --git a/packages/artplayer/src/events/gestureInit.js b/packages/artplayer/src/events/gestureInit.js
index 52b3dd3c6..253fa1f65 100644
--- a/packages/artplayer/src/events/gestureInit.js
+++ b/packages/artplayer/src/events/gestureInit.js
@@ -3,7 +3,6 @@ import { clamp, secondToTime, isMobile } from '../utils';
export default function gestureInit(art, events) {
if (isMobile && !art.option.isLive) {
const {
- player,
notice,
template: { $video },
} = art;
@@ -23,14 +22,14 @@ export default function gestureInit(art, events) {
if (event.touches.length === 1 && isDroging) {
const widthDiff = event.touches[0].clientX - startX;
const proportion = clamp(widthDiff / $video.clientWidth, -1, 1);
- currentTime = clamp(player.currentTime + 60 * proportion, 0, player.duration);
- notice.show = `${secondToTime(currentTime)} / ${secondToTime(player.duration)}`;
+ currentTime = clamp(art.currentTime + 60 * proportion, 0, art.duration);
+ notice.show = `${secondToTime(currentTime)} / ${secondToTime(art.duration)}`;
}
});
events.proxy(document, 'touchend', () => {
if (isDroging && currentTime) {
- player.seek = currentTime;
+ art.seek = currentTime;
}
isDroging = false;
startX = 0;
diff --git a/packages/artplayer/src/events/resizeInit.js b/packages/artplayer/src/events/resizeInit.js
index eb22ed156..e0ac5fe17 100644
--- a/packages/artplayer/src/events/resizeInit.js
+++ b/packages/artplayer/src/events/resizeInit.js
@@ -1,13 +1,13 @@
import { throttle } from '../utils';
export default function resizeInit(art, events) {
- const { option, player } = art;
+ const { option } = art;
const resizeFn = throttle(() => {
- if (player.normalSize) {
- player.autoSize = option.autoSize;
+ if (art.normalSize) {
+ art.autoSize = option.autoSize;
}
- player.aspectRatioReset = true;
+ art.aspectRatioReset = true;
art.emit('resize');
}, 500);
diff --git a/packages/artplayer/src/events/viewInit.js b/packages/artplayer/src/events/viewInit.js
index 528f04ea8..8095fbd9f 100644
--- a/packages/artplayer/src/events/viewInit.js
+++ b/packages/artplayer/src/events/viewInit.js
@@ -17,7 +17,7 @@ export default function viewInit(art, events) {
art.on('view', (state) => {
if (option.autoMini) {
- player.mini = !state;
+ art.mini = !state;
}
});
}
diff --git a/packages/artplayer/src/hotkey.js b/packages/artplayer/src/hotkey.js
index 69fa2d344..b9bc5ae53 100644
--- a/packages/artplayer/src/hotkey.js
+++ b/packages/artplayer/src/hotkey.js
@@ -13,29 +13,29 @@ export default class Hotkey {
if (option.hotkey) {
art.once('ready', () => {
this.add(27, () => {
- if (player.fullscreenWeb) {
- player.fullscreenWeb = false;
+ if (art.fullscreenWeb) {
+ art.fullscreenWeb = false;
}
});
this.add(32, () => {
- player.toggle();
+ art.toggle();
});
this.add(37, () => {
- player.backward = 5;
+ art.backward = 5;
});
this.add(38, () => {
- player.volume += 0.1;
+ art.volume += 0.1;
});
this.add(39, () => {
- player.forward = 5;
+ art.forward = 5;
});
this.add(40, () => {
- player.volume -= 0.1;
+ art.volume -= 0.1;
});
proxy(window, 'keydown', (event) => {
diff --git a/packages/artplayer/src/player/aspectRatioMix.js b/packages/artplayer/src/player/aspectRatioMix.js
index 854f8788b..b3a130e39 100644
--- a/packages/artplayer/src/player/aspectRatioMix.js
+++ b/packages/artplayer/src/player/aspectRatioMix.js
@@ -1,19 +1,17 @@
import { setStyle, errorHandle, def } from '../utils';
-export default function aspectRatioMix(art, player) {
+export default function aspectRatioMix(art) {
const {
template: { $video, $player },
i18n,
notice,
} = art;
- def(player, 'aspectRatio', {
+ def(art, 'aspectRatio', {
get() {
return $player.dataset.aspectRatio || '';
},
- set(ratio) {
- if (!ratio) ratio = 'default';
-
+ set(ratio = 'default') {
const ratioList = ['default', '4:3', '16:9'];
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);
delete $player.dataset.aspectRatio;
} else {
- const ratioArray = ratio.split(':');
+ const ratioArray = ratio.split(':').map(Number);
const { videoWidth, videoHeight } = $video;
const { clientWidth, clientHeight } = $player;
const videoRatio = videoWidth / videoHeight;
@@ -47,11 +45,11 @@ export default function aspectRatioMix(art, player) {
},
});
- def(player, 'aspectRatioReset', {
+ def(art, 'aspectRatioReset', {
set(value) {
- if (value && player.aspectRatio) {
- const { aspectRatio } = player;
- player.aspectRatio = aspectRatio;
+ if (value && art.aspectRatio) {
+ const { aspectRatio } = art;
+ art.aspectRatio = aspectRatio;
}
},
});
diff --git a/packages/artplayer/src/player/attrInit.js b/packages/artplayer/src/player/attrInit.js
index 0462a4d32..bb6ae0d1b 100644
--- a/packages/artplayer/src/player/attrInit.js
+++ b/packages/artplayer/src/player/attrInit.js
@@ -1,6 +1,6 @@
import { clamp, setStyle } from '../utils';
-export default function attrInit(art, player) {
+export default function attrInit(art) {
const {
option,
storage,
@@ -36,6 +36,6 @@ export default function attrInit(art, player) {
$video.controls = false;
if (option.ads.length === 0) {
- player.url = option.url;
+ art.url = option.url;
}
}
diff --git a/packages/artplayer/src/player/autoHeightMix.js b/packages/artplayer/src/player/autoHeightMix.js
index fcd5b650f..e686320a2 100644
--- a/packages/artplayer/src/player/autoHeightMix.js
+++ b/packages/artplayer/src/player/autoHeightMix.js
@@ -1,6 +1,6 @@
import { setStyle, hasClass, addClass, removeClass, def } from '../utils';
-export default function autoHeightMix(art, player) {
+export default function autoHeightMix(art) {
const {
option,
template: { $container, $video },
@@ -8,7 +8,7 @@ export default function autoHeightMix(art, player) {
const heightCache = $container.style.height;
- def(player, 'autoHeight', {
+ def(art, 'autoHeight', {
get() {
return hasClass($container, 'art-auto-height');
},
@@ -19,12 +19,12 @@ export default function autoHeightMix(art, player) {
const height = videoHeight * (clientWidth / videoWidth);
setStyle($container, 'height', height + 'px');
addClass($container, 'art-auto-height');
- player.autoSize = option.autoSize;
+ art.autoSize = option.autoSize;
art.emit('autoHeight', height);
} else {
setStyle($container, 'height', heightCache);
removeClass($container, 'art-auto-height');
- player.autoSize = option.autoSize;
+ art.autoSize = option.autoSize;
art.emit('autoHeight');
}
},
diff --git a/packages/artplayer/src/player/autoSizeMix.js b/packages/artplayer/src/player/autoSizeMix.js
index 34a5ea5a4..34e627f76 100644
--- a/packages/artplayer/src/player/autoSizeMix.js
+++ b/packages/artplayer/src/player/autoSizeMix.js
@@ -1,9 +1,9 @@
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;
- def(player, 'autoSize', {
+ def(art, 'autoSize', {
get() {
return hasClass($container, 'art-auto-size');
},
@@ -24,8 +24,8 @@ export default function resizeMix(art, player) {
setStyle($player, 'height', `${percentage}%`);
}
art.emit('autoSize', {
- width: player.width,
- height: player.height,
+ width: art.width,
+ height: art.height,
});
} else {
removeClass($container, 'art-auto-size');
diff --git a/packages/artplayer/src/player/currentTimeMix.js b/packages/artplayer/src/player/currentTimeMix.js
index 042ea9cb7..abe98b32d 100644
--- a/packages/artplayer/src/player/currentTimeMix.js
+++ b/packages/artplayer/src/player/currentTimeMix.js
@@ -1,13 +1,13 @@
import { clamp, def } from '../utils';
-export default function currentTimeMix(art, player) {
+export default function currentTimeMix(art) {
const { $video } = art.template;
- def(player, 'currentTime', {
+ def(art, 'currentTime', {
get: () => $video.currentTime || 0,
set: (time) => {
// 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);
},
});
}
diff --git a/packages/artplayer/src/player/durationMix.js b/packages/artplayer/src/player/durationMix.js
index 6febb2377..6d4b4d838 100644
--- a/packages/artplayer/src/player/durationMix.js
+++ b/packages/artplayer/src/player/durationMix.js
@@ -1,7 +1,7 @@
import { def } from '../utils';
-export default function durationMix(art, player) {
- def(player, 'duration', {
+export default function durationMix(art) {
+ def(art, 'duration', {
get: () => {
const { duration } = art.template.$video;
if (duration === Infinity) return 0;
diff --git a/packages/artplayer/src/player/eventInit.js b/packages/artplayer/src/player/eventInit.js
index 30dbfffd5..60db934ce 100644
--- a/packages/artplayer/src/player/eventInit.js
+++ b/packages/artplayer/src/player/eventInit.js
@@ -1,7 +1,7 @@
import config from '../config';
import { sleep, addClass, setStyle, isMobile } from '../utils';
-export default function eventInit(art, player) {
+export default function eventInit(art) {
const {
option,
events: { proxy },
@@ -14,11 +14,11 @@ export default function eventInit(art, player) {
const maxReconnectTime = 5;
proxy($video, 'click', () => {
- player.toggle();
+ art.toggle();
});
proxy($video, 'dblclick', () => {
- player.fullscreen = !player.fullscreen;
+ art.fullscreen = !art.fullscreen;
});
config.events.forEach((eventName) => {
@@ -58,8 +58,8 @@ export default function eventInit(art, player) {
art.on('video:ended', () => {
if (option.loop) {
- player.seek = 0;
- player.play();
+ art.seek = 0;
+ art.play();
art.controls.show = false;
art.mask.show = false;
} else {
@@ -72,7 +72,7 @@ export default function eventInit(art, player) {
if (reconnectTime < maxReconnectTime) {
sleep(1000).then(() => {
reconnectTime += 1;
- player.url = option.url;
+ art.url = option.url;
notice.show = `${i18n.get('Reconnect')}: ${reconnectTime}`;
art.emit('error', reconnectTime);
});
@@ -92,7 +92,7 @@ export default function eventInit(art, player) {
// });
art.once('video:loadedmetadata', () => {
- player.autoSize = option.autoSize;
+ art.autoSize = option.autoSize;
if (isMobile) {
art.loading.show = false;
art.controls.show = true;
diff --git a/packages/artplayer/src/player/exclusiveInit.js b/packages/artplayer/src/player/exclusiveInit.js
index 9eea456f6..375c441b0 100644
--- a/packages/artplayer/src/player/exclusiveInit.js
+++ b/packages/artplayer/src/player/exclusiveInit.js
@@ -1,17 +1,17 @@
import { def } from '../utils';
-export default function exclusiveInit(art, player) {
+export default function exclusiveInit(art) {
const sizeProps = ['mini', 'pip', 'fullscreen', 'fullscreenWeb'];
function exclusive(props) {
props.forEach((name) => {
art.on(name, () => {
- if (player[name]) {
+ if (art[name]) {
props
.filter((item) => item !== name)
.forEach((item) => {
- if (player[item]) {
- player[item] = false;
+ if (art[item]) {
+ art[item] = false;
}
});
}
@@ -21,9 +21,9 @@ export default function exclusiveInit(art, player) {
exclusive(sizeProps);
- def(player, 'normalSize', {
+ def(art, 'normalSize', {
get() {
- return sizeProps.every((name) => !player[name]);
+ return sizeProps.every((name) => !art[name]);
},
});
}
diff --git a/packages/artplayer/src/player/flipMix.js b/packages/artplayer/src/player/flipMix.js
index 7c62e7ffa..55b6e3fca 100644
--- a/packages/artplayer/src/player/flipMix.js
+++ b/packages/artplayer/src/player/flipMix.js
@@ -1,13 +1,13 @@
import { errorHandle, def } from '../utils';
-export default function flipMix(art, player) {
+export default function flipMix(art) {
const {
template: { $player },
i18n,
notice,
} = art;
- def(player, 'flip', {
+ def(art, 'flip', {
get() {
return $player.dataset.flip;
},
@@ -20,7 +20,7 @@ export default function flipMix(art, player) {
if (flip === 'normal') {
delete $player.dataset.flip;
} else {
- player.rotate = false;
+ art.rotate = false;
$player.dataset.flip = flip;
}
@@ -30,11 +30,11 @@ export default function flipMix(art, player) {
},
});
- def(player, 'flipReset', {
+ def(art, 'flipReset', {
set(value) {
- if (value && player.flip) {
- const { flip } = player;
- player.flip = flip;
+ if (value && art.flip) {
+ const { flip } = art;
+ art.flip = flip;
}
},
});
diff --git a/packages/artplayer/src/player/fullscreenMix.js b/packages/artplayer/src/player/fullscreenMix.js
index c3d503625..02af48fde 100644
--- a/packages/artplayer/src/player/fullscreenMix.js
+++ b/packages/artplayer/src/player/fullscreenMix.js
@@ -1,12 +1,12 @@
import screenfull from 'screenfull';
import { addClass, removeClass, def, get } from '../utils';
-const nativeScreenfull = (art, player) => {
+const nativeScreenfull = (art) => {
const { $player } = art.template;
screenfull.on('change', () => art.emit('fullscreen', screenfull.isFullscreen));
- def(player, 'fullscreen', {
+ def(art, 'fullscreen', {
get() {
return screenfull.isFullscreen;
},
@@ -14,16 +14,16 @@ const nativeScreenfull = (art, player) => {
if (value) {
screenfull.request($player).then(() => {
addClass($player, 'art-fullscreen');
- player.aspectRatioReset = true;
- player.autoSize = false;
+ art.aspectRatioReset = true;
+ art.autoSize = false;
art.emit('resize');
art.emit('fullscreen', true);
});
} else {
screenfull.exit().then(() => {
removeClass($player, 'art-fullscreen');
- player.aspectRatioReset = true;
- player.autoSize = art.option.autoSize;
+ art.aspectRatioReset = true;
+ art.autoSize = art.option.autoSize;
art.emit('resize');
art.emit('fullscreen');
});
@@ -32,10 +32,10 @@ const nativeScreenfull = (art, player) => {
});
};
-const webkitScreenfull = (art, player) => {
+const webkitScreenfull = (art) => {
const { $video } = art.template;
- def(player, 'fullscreen', {
+ def(art, 'fullscreen', {
get() {
return $video.webkitDisplayingFullscreen;
},
@@ -51,7 +51,7 @@ const webkitScreenfull = (art, player) => {
});
};
-export default function fullscreenMix(art, player) {
+export default function fullscreenMix(art) {
const {
i18n,
notice,
@@ -60,11 +60,11 @@ export default function fullscreenMix(art, player) {
art.once('ready', () => {
if (screenfull.isEnabled) {
- nativeScreenfull(art, player);
+ nativeScreenfull(art);
} else if (document.fullscreenEnabled || $video.webkitSupportsFullscreen) {
- webkitScreenfull(art, player);
+ webkitScreenfull(art);
} else {
- def(player, 'fullscreen', {
+ def(art, 'fullscreen', {
get() {
return false;
},
@@ -74,7 +74,7 @@ export default function fullscreenMix(art, player) {
});
}
- // 异步设置
- def(art, 'fullscreen', get(player, 'fullscreen'));
+ // Asynchronous setting
+ def(art, 'fullscreen', get(art, 'fullscreen'));
});
}
diff --git a/packages/artplayer/src/player/fullscreenWebMix.js b/packages/artplayer/src/player/fullscreenWebMix.js
index fef8ea58d..9e30845ae 100644
--- a/packages/artplayer/src/player/fullscreenWebMix.js
+++ b/packages/artplayer/src/player/fullscreenWebMix.js
@@ -1,23 +1,23 @@
import { addClass, removeClass, hasClass, def } from '../utils';
-export default function fullscreenWebMix(art, player) {
+export default function fullscreenWebMix(art) {
const { $player } = art.template;
- def(player, 'fullscreenWeb', {
+ def(art, 'fullscreenWeb', {
get() {
return hasClass($player, 'art-fullscreen-web');
},
set(value) {
if (value) {
addClass($player, 'art-fullscreen-web');
- player.aspectRatioReset = true;
- player.autoSize = false;
+ art.aspectRatioReset = true;
+ art.autoSize = false;
art.emit('resize');
art.emit('fullscreenWeb', true);
} else {
removeClass($player, 'art-fullscreen-web');
- player.aspectRatioReset = true;
- player.autoSize = art.option.autoSize;
+ art.aspectRatioReset = true;
+ art.autoSize = art.option.autoSize;
art.emit('resize');
art.emit('fullscreenWeb');
}
diff --git a/packages/artplayer/src/player/index.js b/packages/artplayer/src/player/index.js
index 363cdecf1..09f3cfe06 100644
--- a/packages/artplayer/src/player/index.js
+++ b/packages/artplayer/src/player/index.js
@@ -27,39 +27,37 @@ import loopMin from './loopMin';
import rotateMix from './rotateMix';
import posterMix from './posterMix';
import autoHeightMix from './autoHeightMix';
-import { proxyPropertys } from '../utils';
export default class Player {
constructor(art) {
- urlMix(art, this);
- eventInit(art, this);
- attrInit(art, this);
- exclusiveInit(art, this);
- playMix(art, this);
- pauseMix(art, this);
- toggleMix(art, this);
- seekMix(art, this);
- volumeMix(art, this);
- currentTimeMix(art, this);
- durationMix(art, this);
- switchMix(art, this);
- playbackRateMix(art, this);
- aspectRatioMix(art, this);
- screenshotMix(art, this);
- fullscreenMix(art, this);
- fullscreenWebMix(art, this);
- pipMix(art, this);
- loadedMix(art, this);
- playedMix(art, this);
- playingMix(art, this);
- autoSizeMix(art, this);
- rectMix(art, this);
- flipMix(art, this);
- miniMix(art, this);
- loopMin(art, this);
- rotateMix(art, this);
- posterMix(art, this);
- autoHeightMix(art, this);
- proxyPropertys(art, this);
+ urlMix(art);
+ eventInit(art);
+ attrInit(art);
+ exclusiveInit(art);
+ playMix(art);
+ pauseMix(art);
+ toggleMix(art);
+ seekMix(art);
+ volumeMix(art);
+ currentTimeMix(art);
+ durationMix(art);
+ switchMix(art);
+ playbackRateMix(art);
+ aspectRatioMix(art);
+ screenshotMix(art);
+ fullscreenMix(art);
+ fullscreenWebMix(art);
+ pipMix(art);
+ loadedMix(art);
+ playedMix(art);
+ playingMix(art);
+ autoSizeMix(art);
+ rectMix(art);
+ flipMix(art);
+ miniMix(art);
+ loopMin(art);
+ rotateMix(art);
+ posterMix(art);
+ autoHeightMix(art);
}
}
diff --git a/packages/artplayer/src/player/loadedMix.js b/packages/artplayer/src/player/loadedMix.js
index 0dcad29d4..198b3bfb1 100644
--- a/packages/artplayer/src/player/loadedMix.js
+++ b/packages/artplayer/src/player/loadedMix.js
@@ -1,13 +1,13 @@
import { def } from '../utils';
-export default function seekMix(art, player) {
+export default function seekMix(art) {
const { $video } = art.template;
- def(player, 'loaded', {
- get: () => player.loadedTime / $video.duration,
+ def(art, 'loaded', {
+ get: () => art.loadedTime / $video.duration,
});
- def(player, 'loadedTime', {
+ def(art, 'loadedTime', {
get: () => ($video.buffered.length ? $video.buffered.end($video.buffered.length - 1) : 0),
});
}
diff --git a/packages/artplayer/src/player/loopMin.js b/packages/artplayer/src/player/loopMin.js
index 0f79cc746..4d0c03d85 100644
--- a/packages/artplayer/src/player/loopMin.js
+++ b/packages/artplayer/src/player/loopMin.js
@@ -1,13 +1,13 @@
import { def, clamp } from '../utils';
-export default function loopMin(art, player) {
+export default function loopMin(art) {
let interval = [];
- def(player, 'loop', {
+ def(art, 'loop', {
get: () => interval,
set: (value) => {
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 end = clamp(value[1], start, player.duration);
+ const start = clamp(value[0], 0, Math.min(value[1], art.duration));
+ const end = clamp(value[1], start, art.duration);
if (end - start >= 1) {
interval = [start, end];
art.emit('loop', interval);
@@ -24,8 +24,8 @@ export default function loopMin(art, player) {
art.on('video:timeupdate', () => {
if (interval.length) {
- if (player.currentTime < interval[0] || player.currentTime > interval[1]) {
- player.seek = interval[0];
+ if (art.currentTime < interval[0] || art.currentTime > interval[1]) {
+ art.seek = interval[0];
}
}
});
diff --git a/packages/artplayer/src/player/miniMix.js b/packages/artplayer/src/player/miniMix.js
index 65d8a4a71..4243b1c7b 100644
--- a/packages/artplayer/src/player/miniMix.js
+++ b/packages/artplayer/src/player/miniMix.js
@@ -1,6 +1,6 @@
import { append, setStyle, addClass, removeClass, hasClass, def, isInViewport } from '../utils';
-export default function miniMix(art, player) {
+export default function miniMix(art) {
const {
i18n,
option,
@@ -20,8 +20,8 @@ export default function miniMix(art, player) {
isDroging = true;
lastPageX = event.pageX;
lastPageY = event.pageY;
- lastPlayerLeft = player.left;
- lastPlayerTop = player.top;
+ lastPlayerLeft = art.left;
+ lastPlayerTop = art.top;
});
proxy(document, 'mousemove', (event) => {
@@ -42,20 +42,20 @@ export default function miniMix(art, player) {
});
proxy($miniClose, 'click', () => {
- player.mini = false;
+ art.mini = false;
isDroging = false;
removeClass($player, 'art-is-dragging');
});
append($miniTitle, option.title || i18n.get('Mini player'));
- def(player, 'mini', {
+ def(art, 'mini', {
get() {
return hasClass($player, 'art-mini');
},
set(value) {
if (value) {
- player.autoSize = false;
+ art.autoSize = false;
cacheStyle = $player.style.cssText;
addClass($player, 'art-mini');
const top = storage.get('top');
@@ -66,28 +66,28 @@ export default function miniMix(art, player) {
if (!isInViewport($miniHeader)) {
storage.del('top');
storage.del('left');
- player.mini = true;
+ art.mini = true;
}
} else {
const $body = document.body;
- const top = $body.clientHeight - player.height - 50;
- const left = $body.clientWidth - player.width - 50;
+ const top = $body.clientHeight - art.height - 50;
+ const left = $body.clientWidth - art.width - 50;
storage.set('top', top);
storage.set('left', left);
setStyle($player, 'top', `${top}px`);
setStyle($player, 'left', `${left}px`);
}
- player.aspectRatio = false;
- player.playbackRate = false;
+ art.aspectRatio = false;
+ art.playbackRate = false;
art.emit('mini', true);
} else {
$player.style.cssText = cacheStyle;
removeClass($player, 'art-mini');
setStyle($player, 'top', null);
setStyle($player, 'left', null);
- player.aspectRatio = false;
- player.playbackRate = false;
- player.autoSize = option.autoSize;
+ art.aspectRatio = false;
+ art.playbackRate = false;
+ art.autoSize = option.autoSize;
art.emit('mini');
}
},
diff --git a/packages/artplayer/src/player/pauseMix.js b/packages/artplayer/src/player/pauseMix.js
index 6283cf4e1..b1a465a1c 100644
--- a/packages/artplayer/src/player/pauseMix.js
+++ b/packages/artplayer/src/player/pauseMix.js
@@ -1,13 +1,13 @@
import { def } from '../utils';
-export default function pauseMix(art, player) {
+export default function pauseMix(art) {
const {
template: { $video },
i18n,
notice,
} = art;
- def(player, 'pause', {
+ def(art, 'pause', {
value() {
const result = $video.pause();
notice.show = i18n.get('Pause');
diff --git a/packages/artplayer/src/player/pipMix.js b/packages/artplayer/src/player/pipMix.js
index 9458d2122..f35d5445c 100644
--- a/packages/artplayer/src/player/pipMix.js
+++ b/packages/artplayer/src/player/pipMix.js
@@ -1,6 +1,6 @@
import { def } from '../utils';
-function nativePip(art, player) {
+function nativePip(art) {
const {
template: { $video },
events: { proxy },
@@ -9,7 +9,7 @@ function nativePip(art, player) {
$video.disablePictureInPicture = false;
- def(player, 'pip', {
+ def(art, 'pip', {
get() {
return document.pictureInPictureElement;
},
@@ -37,12 +37,12 @@ function nativePip(art, player) {
});
}
-function webkitPip(art, player) {
+function webkitPip(art) {
const { $video } = art.template;
$video.webkitSetPresentationMode('inline');
- def(player, 'pip', {
+ def(art, 'pip', {
get() {
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 {
i18n,
notice,
template: { $video },
} = art;
if (document.pictureInPictureEnabled) {
- nativePip(art, player);
+ nativePip(art);
} else if ($video.webkitSupportsPresentationMode) {
- webkitPip(art, player);
+ webkitPip(art);
} else {
- def(player, 'pip', {
+ def(art, 'pip', {
get() {
return false;
},
diff --git a/packages/artplayer/src/player/playMix.js b/packages/artplayer/src/player/playMix.js
index 8cf961164..78a4b6c70 100644
--- a/packages/artplayer/src/player/playMix.js
+++ b/packages/artplayer/src/player/playMix.js
@@ -1,6 +1,6 @@
import { def } from '../utils';
-export default function playMix(art, player) {
+export default function playMix(art) {
const {
i18n,
notice,
@@ -9,7 +9,7 @@ export default function playMix(art, player) {
template: { $video },
} = art;
- def(player, 'play', {
+ def(art, 'play', {
value() {
const promise = $video.play();
@@ -21,11 +21,7 @@ export default function playMix(art, player) {
}
if (mutex) {
- instances
- .filter((item) => item !== art)
- .forEach((item) => {
- item.player.pause();
- });
+ instances.filter((item) => item !== art).forEach((item) => item.pause());
}
notice.show = i18n.get('Play');
diff --git a/packages/artplayer/src/player/playbackRateMix.js b/packages/artplayer/src/player/playbackRateMix.js
index 016eaacfe..bb8df798d 100644
--- a/packages/artplayer/src/player/playbackRateMix.js
+++ b/packages/artplayer/src/player/playbackRateMix.js
@@ -1,13 +1,13 @@
import { errorHandle, def } from '../utils';
-export default function playbackRateMix(art, player) {
+export default function playbackRateMix(art) {
const {
template: { $video, $player },
i18n,
notice,
} = art;
- def(player, 'playbackRate', {
+ def(art, 'playbackRate', {
get() {
return $player.dataset.playbackRate;
},
@@ -20,20 +20,20 @@ export default function playbackRateMix(art, player) {
$player.dataset.playbackRate = rate;
notice.show = `${i18n.get('Rate')}: ${rate === 1.0 ? i18n.get('Normal') : `${rate}x`}`;
art.emit('playbackRate', rate);
- } else if (player.playbackRate) {
- player.playbackRate = 1;
+ } else if (art.playbackRate) {
+ art.playbackRate = 1;
delete $player.dataset.playbackRate;
art.emit('playbackRate');
}
},
});
- def(player, 'playbackRateReset', {
+ def(art, 'playbackRateReset', {
set(value) {
if (value) {
const { playbackRate } = $player.dataset;
if (playbackRate) {
- player.playbackRate = Number(playbackRate);
+ art.playbackRate = Number(playbackRate);
}
}
},
diff --git a/packages/artplayer/src/player/playedMix.js b/packages/artplayer/src/player/playedMix.js
index aeccdcf50..e4fd217da 100644
--- a/packages/artplayer/src/player/playedMix.js
+++ b/packages/artplayer/src/player/playedMix.js
@@ -1,7 +1,7 @@
import { def } from '../utils';
-export default function playedMix(art, player) {
- def(player, 'played', {
- get: () => player.currentTime / player.duration,
+export default function playedMix(art) {
+ def(art, 'played', {
+ get: () => art.currentTime / art.duration,
});
}
diff --git a/packages/artplayer/src/player/playingMix.js b/packages/artplayer/src/player/playingMix.js
index 75c6c643a..05b23b145 100644
--- a/packages/artplayer/src/player/playingMix.js
+++ b/packages/artplayer/src/player/playingMix.js
@@ -1,8 +1,8 @@
import { def } from '../utils';
-export default function playingMix(art, player) {
+export default function playingMix(art) {
const { $video } = art.template;
- def(player, 'playing', {
+ def(art, 'playing', {
get: () => !!($video.currentTime > 0 && !$video.paused && !$video.ended && $video.readyState > 2),
});
}
diff --git a/packages/artplayer/src/player/posterMix.js b/packages/artplayer/src/player/posterMix.js
index 99b95972a..a6d86e1f7 100644
--- a/packages/artplayer/src/player/posterMix.js
+++ b/packages/artplayer/src/player/posterMix.js
@@ -1,12 +1,12 @@
import { def, setStyle } from '../utils';
-export default function posterMix(art, player) {
+export default function posterMix(art) {
const {
option,
template: { $poster },
} = art;
- def(player, 'poster', {
+ def(art, 'poster', {
get: () => option.poster,
set(url) {
option.poster = url;
diff --git a/packages/artplayer/src/player/rectMix.js b/packages/artplayer/src/player/rectMix.js
index 9f37eef8a..1599d3c69 100644
--- a/packages/artplayer/src/player/rectMix.js
+++ b/packages/artplayer/src/player/rectMix.js
@@ -1,29 +1,29 @@
import { def } from '../utils';
-export default function rectMix(art, player) {
- def(player, 'rect', {
+export default function rectMix(art) {
+ def(art, 'rect', {
get: () => {
return art.template.$player.getBoundingClientRect();
},
});
- ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach(key => {
- def(player, key, {
+ ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach((key) => {
+ def(art, key, {
get: () => {
- return player.rect[key];
+ return art.rect[key];
},
});
});
- def(player, 'x', {
+ def(art, 'x', {
get: () => {
- return player.left + window.pageXOffset;
+ return art.left + window.pageXOffset;
},
});
- def(player, 'y', {
+ def(art, 'y', {
get: () => {
- return player.top + window.pageYOffset;
+ return art.top + window.pageYOffset;
},
});
}
diff --git a/packages/artplayer/src/player/rotateMix.js b/packages/artplayer/src/player/rotateMix.js
index b90e18fdb..8004d8dfc 100644
--- a/packages/artplayer/src/player/rotateMix.js
+++ b/packages/artplayer/src/player/rotateMix.js
@@ -1,13 +1,13 @@
import { setStyle, errorHandle, def } from '../utils';
-export default function rotateMix(art, player) {
+export default function rotateMix(art) {
const {
template: { $video, $player },
i18n,
notice,
} = art;
- def(player, 'rotate', {
+ def(art, 'rotate', {
get: () => Number($player.dataset.rotate) || 0,
set: (deg) => {
if (!deg) deg = 0;
@@ -19,7 +19,7 @@ export default function rotateMix(art, player) {
delete $player.dataset.rotate;
setStyle($video, 'transform', null);
} else {
- player.flip = false;
+ art.flip = false;
art.autoSize = true;
$player.dataset.rotate = deg;
@@ -65,11 +65,11 @@ export default function rotateMix(art, player) {
},
});
- def(player, 'rotateReset', {
+ def(art, 'rotateReset', {
set(value) {
- if (value && player.rotate) {
- const { rotate } = player;
- player.rotate = rotate;
+ if (value && art.rotate) {
+ const { rotate } = art;
+ art.rotate = rotate;
}
},
});
diff --git a/packages/artplayer/src/player/screenshotMix.js b/packages/artplayer/src/player/screenshotMix.js
index 7be0b2ef6..4538347fe 100644
--- a/packages/artplayer/src/player/screenshotMix.js
+++ b/packages/artplayer/src/player/screenshotMix.js
@@ -1,6 +1,6 @@
import { secondToTime, download, def } from '../utils';
-export default function screenshotMix(art, player) {
+export default function screenshotMix(art) {
const {
option,
notice,
@@ -9,7 +9,7 @@ export default function screenshotMix(art, player) {
const $canvas = document.createElement('canvas');
- def(player, 'getDataURL', {
+ def(art, 'getDataURL', {
value: () =>
new Promise((resolve, reject) => {
try {
@@ -24,7 +24,7 @@ export default function screenshotMix(art, player) {
}),
});
- def(player, 'getBlobUrl', {
+ def(art, 'getBlobUrl', {
value: () =>
new Promise((resolve, reject) => {
try {
@@ -41,9 +41,9 @@ export default function screenshotMix(art, player) {
}),
});
- def(player, 'screenshot', {
+ def(art, 'screenshot', {
value: () => {
- return player.getDataURL().then((dataUri) => {
+ return art.getDataURL().then((dataUri) => {
download(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
art.emit('screenshot', dataUri);
return dataUri;
diff --git a/packages/artplayer/src/player/seekMix.js b/packages/artplayer/src/player/seekMix.js
index 3a9b029a5..dd3cd15ad 100644
--- a/packages/artplayer/src/player/seekMix.js
+++ b/packages/artplayer/src/player/seekMix.js
@@ -1,27 +1,27 @@
import { secondToTime, def } from '../utils';
-export default function seekMix(art, player) {
+export default function seekMix(art) {
const { notice } = art;
- def(player, 'seek', {
+ def(art, 'seek', {
set(time) {
- player.currentTime = time;
- art.emit('seek', player.currentTime);
- if (player.duration) {
- notice.show = `${secondToTime(player.currentTime)} / ${secondToTime(player.duration)}`;
+ art.currentTime = time;
+ art.emit('seek', art.currentTime);
+ if (art.duration) {
+ notice.show = `${secondToTime(art.currentTime)} / ${secondToTime(art.duration)}`;
}
},
});
- def(player, 'forward', {
+ def(art, 'forward', {
set(time) {
- player.seek = player.currentTime + time;
+ art.seek = art.currentTime + time;
},
});
def(player, 'backward', {
set(time) {
- player.seek = player.currentTime - time;
+ art.seek = art.currentTime - time;
},
});
}
diff --git a/packages/artplayer/src/player/switchMix.js b/packages/artplayer/src/player/switchMix.js
index 346f8d1ac..2412e5984 100644
--- a/packages/artplayer/src/player/switchMix.js
+++ b/packages/artplayer/src/player/switchMix.js
@@ -1,22 +1,22 @@
import { def } from '../utils';
-export default function switchMix(art, player) {
+export default function switchMix(art) {
const { i18n, option, notice } = art;
function switchUrl(url, name, currentTime) {
return new Promise((resolve) => {
- if (url === player.url) return resolve(url);
- URL.revokeObjectURL(player.url);
- player.url = url;
+ if (url === art.url) return resolve(url);
+ URL.revokeObjectURL(art.url);
+ art.url = url;
art.once('video:canplay', () => {
- player.playbackRate = false;
- player.aspectRatio = false;
- player.flip = 'normal';
- player.autoSize = option.autoSize;
- player.currentTime = currentTime;
+ art.playbackRate = false;
+ art.aspectRatio = false;
+ art.flip = 'normal';
+ art.autoSize = option.autoSize;
+ art.currentTime = currentTime;
art.notice.show = '';
- if (player.playing) {
- player.play();
+ if (art.playing) {
+ art.play();
}
if (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) => {
- return switchUrl(url, name, player.currentTime);
+ return switchUrl(url, name, art.currentTime);
},
});
- def(player, 'switchUrl', {
+ def(art, 'switchUrl', {
value: (url, name) => {
return switchUrl(url, name, 0);
},
diff --git a/packages/artplayer/src/player/toggleMix.js b/packages/artplayer/src/player/toggleMix.js
index f0c04e219..97cf7fe20 100644
--- a/packages/artplayer/src/player/toggleMix.js
+++ b/packages/artplayer/src/player/toggleMix.js
@@ -1,12 +1,12 @@
import { def } from '../utils';
-export default function toggleMix(art, player) {
- def(player, 'toggle', {
+export default function toggleMix(art) {
+ def(art, 'toggle', {
value() {
- if (player.playing) {
- return player.pause();
+ if (art.playing) {
+ return art.pause();
} else {
- return player.play();
+ return art.play();
}
},
});
diff --git a/packages/artplayer/src/player/urlMix.js b/packages/artplayer/src/player/urlMix.js
index 1c1972dfe..df457e4bc 100644
--- a/packages/artplayer/src/player/urlMix.js
+++ b/packages/artplayer/src/player/urlMix.js
@@ -1,12 +1,12 @@
import { getExt, def, sleep } from '../utils';
-export default function urlMix(art, player) {
+export default function urlMix(art) {
const {
option,
template: { $video },
} = art;
- def(player, 'url', {
+ def(art, 'url', {
get() {
return $video.currentSrc;
},
@@ -19,7 +19,7 @@ export default function urlMix(art, player) {
typeCallback.call(art, $video, url, art);
});
} else {
- if (player.url && player.url !== url) {
+ if (art.url && art.url !== url) {
art.once('video:canplay', () => {
if (art.isReady) {
art.emit('restart');
diff --git a/packages/artplayer/src/player/volumeMix.js b/packages/artplayer/src/player/volumeMix.js
index 2679e1506..c066bdf69 100644
--- a/packages/artplayer/src/player/volumeMix.js
+++ b/packages/artplayer/src/player/volumeMix.js
@@ -1,6 +1,6 @@
import { clamp, def } from '../utils';
-export default function volumeMix(art, player) {
+export default function volumeMix(art) {
const {
template: { $video },
i18n,
@@ -8,9 +8,9 @@ export default function volumeMix(art, player) {
storage,
} = art;
- def(player, 'volume', {
+ def(art, 'volume', {
get: () => $video.volume || 0,
- set: percentage => {
+ set: (percentage) => {
$video.volume = clamp(percentage, 0, 1);
notice.show = `${i18n.get('Volume')}: ${parseInt($video.volume * 100, 10)}`;
if ($video.volume !== 0) {
@@ -20,9 +20,9 @@ export default function volumeMix(art, player) {
},
});
- def(player, 'muted', {
+ def(art, 'muted', {
get: () => $video.muted,
- set: muted => {
+ set: (muted) => {
$video.muted = muted;
art.emit('volume', $video.volume);
},
diff --git a/packages/artplayer/src/plugins/localVideo.js b/packages/artplayer/src/plugins/localVideo.js
index 389291d3d..b79bdf133 100644
--- a/packages/artplayer/src/plugins/localVideo.js
+++ b/packages/artplayer/src/plugins/localVideo.js
@@ -4,7 +4,6 @@ export default function localVideo(art) {
const {
events: { proxy },
template,
- player,
option,
setting,
i18n,
@@ -16,7 +15,7 @@ export default function localVideo(art) {
if (canPlayType === 'maybe' || canPlayType === 'probably') {
const url = URL.createObjectURL(file);
option.title = file.name;
- player.switchUrl(url, file.name);
+ art.switchUrl(url, file.name);
art.emit('localVideo', file);
} else {
errorHandle(false, 'Playback of this file format is not supported');
@@ -24,12 +23,12 @@ export default function localVideo(art) {
}
}
- proxy(template.$player, 'dragover', e => {
- e.preventDefault();
+ proxy(template.$player, 'dragover', (event) => {
+ event.preventDefault();
});
- proxy(template.$player, 'drop', e => {
- e.preventDefault();
+ proxy(template.$player, 'drop', (event) => {
+ event.preventDefault();
const file = e.dataTransfer.files[0];
loadVideo(file);
});
@@ -65,10 +64,10 @@ export default function localVideo(art) {
`,
- mounted: $setting => {
+ mounted: ($setting) => {
const $btn = query('.art-upload-btn', $setting);
const $value = query('.art-upload-value', $setting);
- art.on('localVideo', file => {
+ art.on('localVideo', (file) => {
$value.textContent = file.name;
$value.title = file.name;
});
diff --git a/packages/artplayer/src/plugins/miniProgressBar.js b/packages/artplayer/src/plugins/miniProgressBar.js
index 746b4ce8e..ff2caafe7 100644
--- a/packages/artplayer/src/plugins/miniProgressBar.js
+++ b/packages/artplayer/src/plugins/miniProgressBar.js
@@ -1,7 +1,6 @@
export default function miniProgressBar(art) {
const {
layers,
- player,
option: { theme },
} = art;
@@ -26,7 +25,7 @@ export default function miniProgressBar(art) {
});
art.on('video:timeupdate', () => {
- $progressBar.style.width = `${player.played * 100}%`;
+ $progressBar.style.width = `${art.played * 100}%`;
});
},
});
diff --git a/packages/artplayer/src/plugins/subtitleOffset.js b/packages/artplayer/src/plugins/subtitleOffset.js
index 30ef87758..a8025530b 100644
--- a/packages/artplayer/src/plugins/subtitleOffset.js
+++ b/packages/artplayer/src/plugins/subtitleOffset.js
@@ -46,7 +46,7 @@ function settingMix(art) {
export default function subtitleOffset(art) {
const { clamp } = art.constructor.utils;
- const { setting, notice, template, i18n, player } = art;
+ const { setting, notice, template, i18n } = art;
setting.add(settingMix);
let cuesCache = [];
@@ -67,8 +67,8 @@ export default function subtitleOffset(art) {
endTime: cue.endTime,
};
}
- cue.startTime = clamp(cuesCache[index].startTime + time, 0, player.duration);
- cue.endTime = clamp(cuesCache[index].endTime + time, 0, player.duration);
+ cue.startTime = clamp(cuesCache[index].startTime + time, 0, art.duration);
+ cue.endTime = clamp(cuesCache[index].endTime + time, 0, art.duration);
});
notice.show = `${i18n.get('Subtitle offset time')}: ${value}s`;
art.emit('subtitleOffset', value);
diff --git a/packages/artplayer/src/setting/aspectRatio.js b/packages/artplayer/src/setting/aspectRatio.js
index 7be38531d..989f15cb1 100644
--- a/packages/artplayer/src/setting/aspectRatio.js
+++ b/packages/artplayer/src/setting/aspectRatio.js
@@ -1,8 +1,8 @@
import { inverseClass, queryAll } from '../utils';
export default function aspectRatio(option) {
- return art => {
- const { i18n, player } = art;
+ return (art) => {
+ const { i18n } = art;
return {
...option,
html: `
@@ -19,15 +19,15 @@ export default function aspectRatio(option) {
`,
- click: (setting, event) => {
+ click: (_, event) => {
const { value } = event.target.dataset;
if (value) {
- player.aspectRatio = value;
+ art.aspectRatio = value;
}
},
- mounted: $setting => {
- art.on('aspectRatio', ratio => {
- const $current = queryAll('button', $setting).find(item => item.dataset.value === ratio);
+ mounted: ($setting) => {
+ art.on('aspectRatio', (ratio) => {
+ const $current = queryAll('button', $setting).find((item) => item.dataset.value === ratio);
if ($current) {
inverseClass($current.parentElement, 'current');
}
diff --git a/packages/artplayer/src/setting/flip.js b/packages/artplayer/src/setting/flip.js
index 4f963f529..e960bdebb 100644
--- a/packages/artplayer/src/setting/flip.js
+++ b/packages/artplayer/src/setting/flip.js
@@ -1,8 +1,8 @@
import { inverseClass, queryAll } from '../utils';
export default function flip(option) {
- return art => {
- const { i18n, player } = art;
+ return (art) => {
+ const { i18n } = art;
return {
...option,
html: `
@@ -19,15 +19,15 @@ export default function flip(option) {
`,
- click: (setting, event) => {
+ click: (_, event) => {
const { value } = event.target.dataset;
if (value) {
- player.flip = value;
+ art.flip = value;
}
},
- mounted: $setting => {
- art.on('flip', flip => {
- const $current = queryAll('button', $setting).find(item => item.dataset.value === flip);
+ mounted: ($setting) => {
+ art.on('flip', (flip) => {
+ const $current = queryAll('button', $setting).find((item) => item.dataset.value === flip);
if ($current) {
inverseClass($current.parentElement, 'current');
}
diff --git a/packages/artplayer/src/setting/playbackRate.js b/packages/artplayer/src/setting/playbackRate.js
index bab050c53..1f8116027 100644
--- a/packages/artplayer/src/setting/playbackRate.js
+++ b/packages/artplayer/src/setting/playbackRate.js
@@ -1,10 +1,9 @@
import { query } from '../utils';
export default function playbackRate(option) {
- return art => {
+ return (art) => {
const {
i18n,
- player,
events: { proxy },
} = art;
return {
@@ -17,16 +16,16 @@ export default function playbackRate(option) {
`,
- mounted: $setting => {
+ mounted: ($setting) => {
const $range = query('.art-setting-range input', $setting);
const $value = query('.art-subtitle-value', $setting);
proxy($range, 'change', () => {
const { value } = $range;
$value.innerText = value;
- player.playbackRate = Number(value);
+ art.playbackRate = Number(value);
});
- art.on('playbackRate', rate => {
+ art.on('playbackRate', (rate) => {
if (rate && $range.value !== rate) {
$range.value = rate;
$value.innerText = rate;
diff --git a/packages/artplayer/src/setting/rotate.js b/packages/artplayer/src/setting/rotate.js
index 9b1c112a2..1afd76071 100644
--- a/packages/artplayer/src/setting/rotate.js
+++ b/packages/artplayer/src/setting/rotate.js
@@ -2,7 +2,7 @@ import { query } from '../utils';
export default function rotate(option) {
return (art) => {
- const { i18n, player } = art;
+ const { i18n } = art;
return {
...option,
html: `
@@ -21,14 +21,14 @@ export default function rotate(option) {
click: (setting, event) => {
const { value } = event.target.dataset;
if (value) {
- const deg = player.rotate + Number(value);
+ const deg = art.rotate + Number(value);
if (deg === 360 || deg === -360) {
- player.rotate = 0;
+ art.rotate = 0;
} else {
- player.rotate = deg;
+ art.rotate = deg;
}
} else {
- player.rotate = 0;
+ art.rotate = 0;
}
},
mounted: ($setting) => {
diff --git a/packages/artplayer/src/whitelist.js b/packages/artplayer/src/whitelist.js
index f94aa6476..35d029a44 100644
--- a/packages/artplayer/src/whitelist.js
+++ b/packages/artplayer/src/whitelist.js
@@ -2,11 +2,15 @@ import { userAgent, isMobile } from './utils';
export default class Whitelist {
constructor(art) {
+ this.art = art;
+ }
+
+ get state() {
const {
constructor: { kindOf },
option: { whitelist },
- } = art;
- this.state =
+ } = this.art;
+ return (
!isMobile ||
whitelist.some((item) => {
switch (kindOf(item)) {
@@ -19,6 +23,7 @@ export default class Whitelist {
default:
return false;
}
- });
+ })
+ );
}
}