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

提取共用方法

Browse Source
This commit is contained in:
Harvey committed 2019-11-14 10:11:03 +08:00
1 parent 48ade99047
commit 7a84c262da
45 files changed
+242 -257
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/controls/fullscreen.js
+2 -2
View File
@@ -1,8 +1,8 @@
import { append, tooltip, setStyle } from '../utils';
export default function fullscreen(controlOption) {
export default function fullscreen(option) {
return art => ({
...controlOption,
...option,
mounted: $control => {
const {
events: { proxy },
packages/artplayer/src/controls/fullscreenWeb.js
+3 -3
View File
@@ -1,8 +1,8 @@
import { append, tooltip, setStyle } from '../utils';
export default function fullscreenWeb(controlOption) {
export default function fullscreenWeb(option) {
return art => ({
...controlOption,
...option,
mounted: $control => {
const {
events: { proxy },
@@ -10,7 +10,7 @@ export default function fullscreenWeb(controlOption) {
i18n,
player,
} = art;
const $fullscreenWeb = append($control, icons.fullscreenWeb);
tooltip($fullscreenWeb, i18n.get('Web fullscreen'));
packages/artplayer/src/controls/index.js
+5 -5
View File
@@ -1,4 +1,4 @@
import { errorHandle } from '../utils';
import { errorHandle, addClass, removeClass } from '../utils';
import component from '../utils/component';
import fullscreen from './fullscreen';
import fullscreenWeb from './fullscreenWeb';
@@ -156,15 +156,15 @@ export default class Controls {
break;
}
errorHandle(parent, 'Controls option.position can not be empty');
this.id += 1;
errorHandle(option.position, 'Controls option.position can not be empty');
const control = component(this.art, this, parent, option, callback, 'control');
if (
!option.disable &&
option.position !== 'top' &&
!(control.$ref.firstElementChild && control.$ref.firstElementChild.tagName === 'I')
) {
control.$ref.classList.add('art-control-onlyText');
addClass(control.$ref, 'art-control-onlyText');
}
return control;
}
@@ -173,11 +173,11 @@ export default class Controls {
const { $player } = this.art.template;
if (value) {
this.state = true;
$player.classList.add('artplayer-controls-show');
addClass($player, 'artplayer-controls-show');
this.art.emit('controls:show');
} else {
this.state = false;
$player.classList.remove('artplayer-controls-show');
removeClass($player, 'artplayer-controls-show');
this.art.emit('controls:hide');
}
}
packages/artplayer/src/controls/pip.js
+2 -2
View File
@@ -1,8 +1,8 @@
import { append, tooltip } from '../utils';
export default function pip(controlOption) {
export default function pip(option) {
return art => ({
...controlOption,
...option,
mounted: $control => {
const {
events: { proxy },
packages/artplayer/src/controls/playAndPause.js
+2 -2
View File
@@ -1,8 +1,8 @@
import { append, tooltip, setStyle } from '../utils';
export default function playAndPause(controlOption) {
export default function playAndPause(option) {
return art => ({
...controlOption,
...option,
mounted: $control => {
const {
events: { proxy },
packages/artplayer/src/controls/progress.js
+11 -11
View File
@@ -1,11 +1,11 @@
import { append, clamp, secondToTime, setStyle, getStyle } from '../utils';
import { append, clamp, secondToTime, setStyle, getStyle, query, addClass, removeClass } from '../utils';
export function getPosFromEvent(art, event) {
const {
template: { $progress },
player,
} = art;
const { left } = $progress.getBoundingClientRect();
const width = clamp(event.pageX - left, 0, $progress.clientWidth);
const second = (width / $progress.clientWidth) * player.duration;
@@ -14,7 +14,7 @@ export function getPosFromEvent(art, event) {
return { second, time, width, percentage };
}
export default function progress(controlOption) {
export default function progress(option) {
return art => {
const {
option: { highlight, theme },
@@ -22,7 +22,7 @@ export default function progress(controlOption) {
player,
} = art;
return {
...controlOption,
...option,
html: `
<div class="art-control-progress-inner">
<div class="art-progress-loaded"></div>
@@ -34,11 +34,11 @@ export default function progress(controlOption) {
`,
mounted: $control => {
let isDroging = false;
const $loaded = $control.querySelector('.art-progress-loaded');
const $played = $control.querySelector('.art-progress-played');
const $highlight = $control.querySelector('.art-progress-highlight');
const $indicator = $control.querySelector('.art-progress-indicator');
const $tip = $control.querySelector('.art-progress-tip');
const $loaded = query('.art-progress-loaded', $control);
const $played = query('.art-progress-played', $control);
const $highlight = query('.art-progress-highlight', $control);
const $indicator = query('.art-progress-indicator', $control);
const $tip = query('.art-progress-tip', $control);
function showHighlight(event) {
const { width } = getPosFromEvent(art, event);
@@ -132,7 +132,7 @@ export default function progress(controlOption) {
proxy(document, 'mousemove', event => {
if (isDroging) {
const { second, percentage } = getPosFromEvent(art, event);
$indicator.classList.add('art-show-indicator');
addClass($indicator, 'art-show-indicator');
setBar('played', percentage);
player.seek = second;
}
@@ -141,7 +141,7 @@ export default function progress(controlOption) {
proxy(document, 'mouseup', () => {
if (isDroging) {
isDroging = false;
$indicator.classList.remove('art-show-indicator');
removeClass($indicator, 'art-show-indicator');
}
});
},
packages/artplayer/src/controls/quality.js
+8 -8
View File
@@ -1,20 +1,20 @@
import { append, getStyle } from '../utils';
export default function quality(controlOption) {
export default function quality(option) {
return art => ({
...controlOption,
...option,
mounted: $control => {
const {
option,
option: { quality },
events: { proxy, hover },
player,
} = art;
let playIndex = -1;
const defaultQuality = option.quality.find(item => item.default) || option.quality[0];
playIndex = option.quality.indexOf(defaultQuality);
const defaultQuality = quality.find(item => item.default) || quality[0];
playIndex = quality.indexOf(defaultQuality);
const $qualityName = append($control, `<div class="art-quality-name">${defaultQuality.name}</div>`);
const qualityList = option.quality
const qualityList = quality
.map((item, index) => `<div class="art-quality-item" data-index="${index}">${item.name}</div>`)
.join('');
const $qualitys = append($control, `<div class="art-qualitys">${qualityList}</div>`);
@@ -25,7 +25,7 @@ export default function quality(controlOption) {
proxy($qualitys, 'click', event => {
const index = Number(event.target.dataset.index);
const { url, name } = option.quality[index];
const { url, name } = quality[index];
if (url && name && playIndex !== index) {
player.switchQuality(url, name);
$qualityName.innerHTML = name;
packages/artplayer/src/controls/screenshot.js
+3 -3
View File
@@ -1,8 +1,8 @@
import { append, tooltip } from '../utils';
export default function screenshot(controlOption) {
export default function screenshot(option) {
return art => ({
...controlOption,
...option,
mounted: $control => {
const {
events: { proxy },
@@ -10,7 +10,7 @@ export default function screenshot(controlOption) {
i18n,
player,
} = art;
const $screenshot = append($control, icons.screenshot);
tooltip($screenshot, i18n.get('Screenshot'));
proxy($screenshot, 'click', () => {
packages/artplayer/src/controls/setting.js
+3 -3
View File
@@ -1,8 +1,8 @@
import { append, tooltip, setStyle } from '../utils';
export default function setting(controlOption) {
export default function setting(option) {
return art => ({
...controlOption,
...option,
mounted: $control => {
const {
events: { proxy },
@@ -10,7 +10,7 @@ export default function setting(controlOption) {
i18n,
setting,
} = art;
const $setting = append($control, icons.setting);
tooltip($setting, i18n.get('Show setting'));
packages/artplayer/src/controls/subtitle.js
+3 -3
View File
@@ -1,8 +1,8 @@
import { append, tooltip, setStyle } from '../utils';
export default function subtitle(controlOption) {
export default function subtitle(option) {
return art => ({
...controlOption,
...option,
mounted: $control => {
const {
events: { proxy },
@@ -10,7 +10,7 @@ export default function subtitle(controlOption) {
i18n,
subtitle,
} = art;
const $subtitle = append($control, icons.subtitle);
tooltip($subtitle, i18n.get('Hide subtitle'));
packages/artplayer/src/controls/thumbnails.js
+6 -5
View File
@@ -1,21 +1,22 @@
import { setStyle } from '../utils';
import { getPosFromEvent } from './progress';
export default function thumbnails(controlOption) {
export default function thumbnails(option) {
return art => ({
...controlOption,
...option,
mounted: $control => {
const {
option: { thumbnails },
template: { $progress },
events: { proxy, loadImg },
} = art;
let loading = false;
let isLoad = false;
function showThumbnails(event) {
const { width: posWidth } = getPosFromEvent(art, event);
const { url, height, width, number, column } = art.option.thumbnails;
const { url, height, width, number, column } = thumbnails;
const perWidth = $progress.clientWidth / number;
const perIndex = Math.floor(posWidth / perWidth);
const yIndex = Math.ceil(perIndex / column) - 1;
@@ -36,7 +37,7 @@ export default function thumbnails(controlOption) {
proxy($progress, 'mousemove', event => {
if (!loading) {
loading = true;
loadImg(art.option.thumbnails.url).then(() => {
loadImg(thumbnails.url).then(() => {
isLoad = true;
});
}
packages/artplayer/src/controls/time.js
+2 -2
View File
@@ -1,8 +1,8 @@
import { secondToTime } from '../utils';
export default function time(controlOption) {
export default function time(option) {
return art => ({
...controlOption,
...option,
mounted: $control => {
function getTime() {
const newTime = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;
packages/artplayer/src/controls/volume.js
+3 -3
View File
@@ -1,8 +1,8 @@
import { append, clamp, tooltip, setStyle, getStyle } from '../utils';
export default function volume(controlOption) {
export default function volume(option) {
return art => ({
...controlOption,
...option,
mounted: $control => {
const {
events: { proxy },
@@ -10,7 +10,7 @@ export default function volume(controlOption) {
player,
i18n,
} = art;
let isDroging = false;
const $volume = append($control, icons.volume);
const $volumeClose = append($control, icons.volumeClose);