mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-22 21:31:20 -08:00
组件添加add方法
This commit is contained in:
Harvey committed
1 parent
1d859e2049
commit
2fcd44e8e7
28 files changed
+303
-328
No files matched your search
@@ -0,0 +1,32 @@
|
||||
import { append, tooltip, setStyle } from '../utils';
|
||||
|
||||
export default function fullscreen(option) {
|
||||
return art => ({
|
||||
...option,
|
||||
mounted: $control => {
|
||||
const {
|
||||
events: { proxy },
|
||||
icons,
|
||||
i18n,
|
||||
player,
|
||||
} = art;
|
||||
|
||||
const $fullscreen = append($control, icons.fullscreen);
|
||||
tooltip($fullscreen, i18n.get('Fullscreen'));
|
||||
|
||||
proxy($control, 'click', () => {
|
||||
player.fullscreenToggle = true;
|
||||
});
|
||||
|
||||
art.on('fullscreen:enabled', () => {
|
||||
setStyle($fullscreen, 'opacity', '0.8');
|
||||
tooltip($fullscreen, i18n.get('Exit fullscreen'));
|
||||
});
|
||||
|
||||
art.on('fullscreen:exit', () => {
|
||||
setStyle($fullscreen, 'opacity', '1');
|
||||
tooltip($fullscreen, i18n.get('Fullscreen'));
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { append, tooltip, setStyle } from '../utils';
|
||||
|
||||
export default function fullscreenWeb(option) {
|
||||
return art => ({
|
||||
...option,
|
||||
mounted: $control => {
|
||||
const {
|
||||
events: { proxy },
|
||||
icons,
|
||||
i18n,
|
||||
player,
|
||||
} = art;
|
||||
|
||||
const $fullscreenWeb = append($control, icons.fullscreenWeb);
|
||||
tooltip($fullscreenWeb, i18n.get('Web fullscreen'));
|
||||
|
||||
proxy($control, 'click', () => {
|
||||
player.fullscreenWebToggle = true;
|
||||
});
|
||||
|
||||
art.on('fullscreenWeb:enabled', () => {
|
||||
setStyle($fullscreenWeb, 'opacity', '0.8');
|
||||
tooltip($fullscreenWeb, i18n.get('Exit web fullscreen'));
|
||||
});
|
||||
|
||||
art.on('fullscreenWeb:exit', () => {
|
||||
setStyle($fullscreenWeb, 'opacity', '1');
|
||||
tooltip($fullscreenWeb, i18n.get('Web fullscreen'));
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
import { errorHandle, addClass } from '../utils';
|
||||
import Component from '../utils/component';
|
||||
import fullscreen from './fullscreen';
|
||||
import fullscreenWeb from './fullscreenWeb';
|
||||
import pip from './pip';
|
||||
import playAndPause from './playAndPause';
|
||||
import progress from './progress';
|
||||
import subtitle from './subtitle';
|
||||
import time from './time';
|
||||
import volume from './volume';
|
||||
import setting from './setting';
|
||||
import thumbnails from './thumbnails';
|
||||
import screenshot from './screenshot';
|
||||
import quality from './quality';
|
||||
|
||||
export default class Control extends Component {
|
||||
constructor(art) {
|
||||
super(art);
|
||||
|
||||
art.on('ready', () => {
|
||||
const { option } = art;
|
||||
|
||||
this.add(
|
||||
progress({
|
||||
name: 'progress',
|
||||
disable: option.isLive,
|
||||
position: 'top',
|
||||
index: 10,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
thumbnails({
|
||||
name: 'thumbnails',
|
||||
disable: !option.thumbnails.url || option.isLive,
|
||||
position: 'top',
|
||||
index: 20,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
playAndPause({
|
||||
name: 'playAndPause',
|
||||
disable: false,
|
||||
position: 'left',
|
||||
index: 10,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
volume({
|
||||
name: 'volume',
|
||||
disable: false,
|
||||
position: 'left',
|
||||
index: 20,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
time({
|
||||
name: 'time',
|
||||
disable: option.isLive,
|
||||
position: 'left',
|
||||
index: 30,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
quality({
|
||||
name: 'quality',
|
||||
disable: option.quality.length === 0,
|
||||
position: 'right',
|
||||
index: 10,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
screenshot({
|
||||
name: 'screenshot',
|
||||
disable: !option.screenshot,
|
||||
position: 'right',
|
||||
index: 20,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
subtitle({
|
||||
name: 'subtitle',
|
||||
disable: !option.subtitle.url,
|
||||
position: 'right',
|
||||
index: 30,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
setting({
|
||||
name: 'setting',
|
||||
disable: !option.setting,
|
||||
position: 'right',
|
||||
index: 40,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
pip({
|
||||
name: 'pip',
|
||||
disable: !option.pip,
|
||||
position: 'right',
|
||||
index: 50,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
fullscreenWeb({
|
||||
name: 'fullscreenWeb',
|
||||
disable: !option.fullscreenWeb,
|
||||
position: 'right',
|
||||
index: 60,
|
||||
}),
|
||||
);
|
||||
|
||||
this.add(
|
||||
fullscreen({
|
||||
name: 'fullscreen',
|
||||
disable: !option.fullscreen,
|
||||
position: 'right',
|
||||
index: 70,
|
||||
}),
|
||||
);
|
||||
|
||||
option.controls.forEach(item => {
|
||||
this.add(item);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
add(getOption, callback) {
|
||||
const option = typeof getOption === 'function' ? getOption(this.art) : getOption;
|
||||
errorHandle(option.position, 'Controls option.position can not be empty');
|
||||
const { $progress, $controlsLeft, $controlsRight } = this.art.template;
|
||||
|
||||
switch (option.position) {
|
||||
case 'top':
|
||||
this.$parent = $progress;
|
||||
break;
|
||||
case 'left':
|
||||
this.$parent = $controlsLeft;
|
||||
break;
|
||||
case 'right':
|
||||
this.$parent = $controlsRight;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
const control = super.add(option, callback);
|
||||
|
||||
if (
|
||||
!option.disable &&
|
||||
option.position !== 'top' &&
|
||||
!(control.$ref.firstElementChild && control.$ref.firstElementChild.tagName === 'I')
|
||||
) {
|
||||
addClass(control.$ref, 'art-control-onlyText');
|
||||
}
|
||||
|
||||
return control;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { append, tooltip } from '../utils';
|
||||
|
||||
export default function pip(option) {
|
||||
return art => ({
|
||||
...option,
|
||||
mounted: $control => {
|
||||
const {
|
||||
events: { proxy },
|
||||
icons,
|
||||
i18n,
|
||||
player,
|
||||
} = art;
|
||||
const $pip = append($control, icons.pip);
|
||||
tooltip($pip, i18n.get('Mini player'));
|
||||
proxy($control, 'click', () => {
|
||||
player.pip = true;
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { append, tooltip, setStyle } from '../utils';
|
||||
|
||||
export default function playAndPause(option) {
|
||||
return art => ({
|
||||
...option,
|
||||
mounted: $control => {
|
||||
const {
|
||||
events: { proxy },
|
||||
icons,
|
||||
i18n,
|
||||
player,
|
||||
} = art;
|
||||
|
||||
const $play = append($control, icons.play);
|
||||
const $pause = append($control, icons.pause);
|
||||
tooltip($play, i18n.get('Play'));
|
||||
tooltip($pause, i18n.get('Pause'));
|
||||
|
||||
proxy($play, 'click', () => {
|
||||
player.play = true;
|
||||
});
|
||||
|
||||
proxy($pause, 'click', () => {
|
||||
player.pause = true;
|
||||
});
|
||||
|
||||
function showPlay() {
|
||||
setStyle($play, 'display', 'flex');
|
||||
setStyle($pause, 'display', 'none');
|
||||
}
|
||||
|
||||
function showPause() {
|
||||
setStyle($play, 'display', 'none');
|
||||
setStyle($pause, 'display', 'flex');
|
||||
}
|
||||
|
||||
if (player.playing) {
|
||||
showPause();
|
||||
} else {
|
||||
showPlay();
|
||||
}
|
||||
|
||||
art.on('video:playing', () => {
|
||||
showPause();
|
||||
});
|
||||
|
||||
art.on('video:pause', () => {
|
||||
showPlay();
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
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;
|
||||
const time = secondToTime(second);
|
||||
const percentage = clamp(width / $progress.clientWidth, 0, 1);
|
||||
return { second, time, width, percentage };
|
||||
}
|
||||
|
||||
export default function progress(option) {
|
||||
return art => {
|
||||
const {
|
||||
option: { highlight, theme },
|
||||
events: { proxy },
|
||||
player,
|
||||
} = art;
|
||||
return {
|
||||
...option,
|
||||
html: `
|
||||
<div class="art-control-progress-inner">
|
||||
<div class="art-progress-loaded"></div>
|
||||
<div class="art-progress-played" style="background: ${theme}"></div>
|
||||
<div class="art-progress-highlight"></div>
|
||||
<div class="art-progress-indicator" style="background: ${theme}"></div>
|
||||
<div class="art-progress-tip art-tip"></div>
|
||||
</div>
|
||||
`,
|
||||
mounted: $control => {
|
||||
let isDroging = false;
|
||||
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);
|
||||
const { text } = event.target.dataset;
|
||||
$tip.innerHTML = text;
|
||||
const tipWidth = $tip.clientWidth;
|
||||
if (width <= tipWidth / 2) {
|
||||
setStyle($tip, 'left', 0);
|
||||
} else if (width > $control.clientWidth - tipWidth / 2) {
|
||||
setStyle($tip, 'left', `${$control.clientWidth - tipWidth}px`);
|
||||
} else {
|
||||
setStyle($tip, 'left', `${width - tipWidth / 2}px`);
|
||||
}
|
||||
}
|
||||
|
||||
function showTime(event) {
|
||||
const { width, time } = getPosFromEvent(art, event);
|
||||
$tip.innerHTML = time;
|
||||
const tipWidth = $tip.clientWidth;
|
||||
if (width <= tipWidth / 2) {
|
||||
setStyle($tip, 'left', 0);
|
||||
} else if (width > $control.clientWidth - tipWidth / 2) {
|
||||
setStyle($tip, 'left', `${$control.clientWidth - tipWidth}px`);
|
||||
} else {
|
||||
setStyle($tip, 'left', `${width - tipWidth / 2}px`);
|
||||
}
|
||||
}
|
||||
|
||||
function setBar(type, percentage) {
|
||||
if (type === 'loaded') {
|
||||
setStyle($loaded, 'width', `${percentage * 100}%`);
|
||||
}
|
||||
|
||||
if (type === 'played') {
|
||||
setStyle($played, 'width', `${percentage * 100}%`);
|
||||
setStyle(
|
||||
$indicator,
|
||||
'left',
|
||||
`calc(${percentage * 100}% - ${getStyle($indicator, 'width') / 2}px)`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
highlight.forEach(item => {
|
||||
const left = (clamp(item.time, 0, player.duration) / player.duration) * 100;
|
||||
append(
|
||||
$highlight,
|
||||
`<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`,
|
||||
);
|
||||
});
|
||||
|
||||
setBar('loaded', player.loaded);
|
||||
|
||||
art.on('video:progress', () => {
|
||||
setBar('loaded', player.loaded);
|
||||
});
|
||||
|
||||
art.on('video:timeupdate', () => {
|
||||
setBar('played', player.played);
|
||||
});
|
||||
|
||||
art.on('video:ended', () => {
|
||||
setBar('played', 1);
|
||||
});
|
||||
|
||||
proxy($control, 'mousemove', event => {
|
||||
setStyle($tip, 'display', 'block');
|
||||
if (event.composedPath().indexOf($highlight) > -1) {
|
||||
showHighlight(event);
|
||||
} else {
|
||||
showTime(event);
|
||||
}
|
||||
});
|
||||
|
||||
proxy($control, 'mouseout', () => {
|
||||
setStyle($tip, 'display', 'none');
|
||||
});
|
||||
|
||||
proxy($control, 'click', event => {
|
||||
if (event.target !== $indicator) {
|
||||
const { second, percentage } = getPosFromEvent(art, event);
|
||||
setBar('played', percentage);
|
||||
player.seek = second;
|
||||
}
|
||||
});
|
||||
|
||||
proxy($indicator, 'mousedown', () => {
|
||||
isDroging = true;
|
||||
});
|
||||
|
||||
proxy(document, 'mousemove', event => {
|
||||
if (isDroging) {
|
||||
const { second, percentage } = getPosFromEvent(art, event);
|
||||
addClass($indicator, 'art-show-indicator');
|
||||
setBar('played', percentage);
|
||||
player.seek = second;
|
||||
}
|
||||
});
|
||||
|
||||
proxy(document, 'mouseup', () => {
|
||||
if (isDroging) {
|
||||
isDroging = false;
|
||||
removeClass($indicator, 'art-show-indicator');
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { append, getStyle } from '../utils';
|
||||
|
||||
export default function quality(option) {
|
||||
return art => ({
|
||||
...option,
|
||||
mounted: $control => {
|
||||
const {
|
||||
option: { quality },
|
||||
events: { proxy, hover },
|
||||
player,
|
||||
} = art;
|
||||
|
||||
let playIndex = -1;
|
||||
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 = 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>`);
|
||||
|
||||
hover($control, () => {
|
||||
$qualitys.style.left = `-${getStyle($qualitys, 'width') / 2 - $control.clientWidth / 2}px`;
|
||||
});
|
||||
|
||||
proxy($qualitys, 'click', event => {
|
||||
const index = Number(event.target.dataset.index);
|
||||
const { url, name } = quality[index];
|
||||
if (url && name && playIndex !== index) {
|
||||
player.switchQuality(url, name);
|
||||
$qualityName.innerHTML = name;
|
||||
playIndex = index;
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { append, tooltip } from '../utils';
|
||||
|
||||
export default function screenshot(option) {
|
||||
return art => ({
|
||||
...option,
|
||||
mounted: $control => {
|
||||
const {
|
||||
events: { proxy },
|
||||
icons,
|
||||
i18n,
|
||||
player,
|
||||
} = art;
|
||||
|
||||
const $screenshot = append($control, icons.screenshot);
|
||||
tooltip($screenshot, i18n.get('Screenshot'));
|
||||
proxy($screenshot, 'click', () => {
|
||||
player.screenshot();
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { append, tooltip, setStyle } from '../utils';
|
||||
|
||||
export default function setting(option) {
|
||||
return art => ({
|
||||
...option,
|
||||
mounted: $control => {
|
||||
const {
|
||||
events: { proxy },
|
||||
icons,
|
||||
i18n,
|
||||
setting,
|
||||
} = art;
|
||||
|
||||
const $setting = append($control, icons.setting);
|
||||
tooltip($setting, i18n.get('Show setting'));
|
||||
|
||||
proxy($control, 'click', () => {
|
||||
setting.toggle();
|
||||
});
|
||||
|
||||
art.on('setting:show', () => {
|
||||
setStyle($setting, 'opacity', '0.8');
|
||||
tooltip($setting, i18n.get('Hide setting'));
|
||||
});
|
||||
|
||||
art.on('setting:hide', () => {
|
||||
setStyle($setting, 'opacity', '1');
|
||||
tooltip($setting, i18n.get('Show setting'));
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { append, tooltip, setStyle } from '../utils';
|
||||
|
||||
export default function subtitle(option) {
|
||||
return art => ({
|
||||
...option,
|
||||
mounted: $control => {
|
||||
const {
|
||||
events: { proxy },
|
||||
icons,
|
||||
i18n,
|
||||
subtitle,
|
||||
} = art;
|
||||
|
||||
const $subtitle = append($control, icons.subtitle);
|
||||
tooltip($subtitle, i18n.get('Hide subtitle'));
|
||||
|
||||
proxy($control, 'click', () => {
|
||||
subtitle.toggle();
|
||||
});
|
||||
|
||||
art.on('subtitle:toggle', value => {
|
||||
if (value) {
|
||||
setStyle($subtitle, 'opacity', '1');
|
||||
tooltip($subtitle, i18n.get('Hide subtitle'));
|
||||
} else {
|
||||
setStyle($subtitle, 'opacity', '0.8');
|
||||
tooltip($subtitle, i18n.get('Show subtitle'));
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { setStyle } from '../utils';
|
||||
import { getPosFromEvent } from './progress';
|
||||
|
||||
export default function thumbnails(option) {
|
||||
return art => ({
|
||||
...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 } = thumbnails;
|
||||
const perWidth = $progress.clientWidth / number;
|
||||
const perIndex = Math.floor(posWidth / perWidth);
|
||||
const yIndex = Math.ceil(perIndex / column) - 1;
|
||||
const xIndex = perIndex % column || column - 1;
|
||||
setStyle($control, 'backgroundImage', `url(${url})`);
|
||||
setStyle($control, 'height', `${height}px`);
|
||||
setStyle($control, 'width', `${width}px`);
|
||||
setStyle($control, 'backgroundPosition', `-${xIndex * width}px -${yIndex * height}px`);
|
||||
if (posWidth <= width / 2) {
|
||||
setStyle($control, 'left', 0);
|
||||
} else if (posWidth > $progress.clientWidth - width / 2) {
|
||||
setStyle($control, 'left', `${$progress.clientWidth - width}px`);
|
||||
} else {
|
||||
setStyle($control, 'left', `${posWidth - width / 2}px`);
|
||||
}
|
||||
}
|
||||
|
||||
proxy($progress, 'mousemove', event => {
|
||||
if (!loading) {
|
||||
loading = true;
|
||||
loadImg(thumbnails.url).then(() => {
|
||||
isLoad = true;
|
||||
});
|
||||
}
|
||||
|
||||
if (isLoad) {
|
||||
setStyle($control, 'display', 'block');
|
||||
showThumbnails(event);
|
||||
}
|
||||
});
|
||||
|
||||
proxy($progress, 'mouseout', () => {
|
||||
setStyle($control, 'display', 'none');
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { secondToTime } from '../utils';
|
||||
|
||||
export default function time(option) {
|
||||
return art => ({
|
||||
...option,
|
||||
mounted: $control => {
|
||||
function getTime() {
|
||||
const newTime = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;
|
||||
if (newTime !== $control.innerHTML) {
|
||||
$control.innerHTML = newTime;
|
||||
}
|
||||
}
|
||||
|
||||
getTime();
|
||||
['video:loadedmetadata', 'video:timeupdate', 'video:progress'].forEach(event => {
|
||||
art.on(event, getTime);
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { append, clamp, tooltip, setStyle, getStyle } from '../utils';
|
||||
|
||||
export default function volume(option) {
|
||||
return art => ({
|
||||
...option,
|
||||
mounted: $control => {
|
||||
const {
|
||||
events: { proxy },
|
||||
icons,
|
||||
player,
|
||||
i18n,
|
||||
} = art;
|
||||
|
||||
let isDroging = false;
|
||||
const $volume = append($control, icons.volume);
|
||||
const $volumeClose = append($control, icons.volumeClose);
|
||||
const $volumePanel = append($control, '<div class="art-volume-panel"></div>');
|
||||
const $volumeHandle = append($volumePanel, '<div class="art-volume-slider-handle"></div>');
|
||||
tooltip($volume, i18n.get('Mute'));
|
||||
setStyle($volumeClose, 'display', 'none');
|
||||
|
||||
function volumeChangeFromEvent(event) {
|
||||
const { left: panelLeft, width: panelWidth } = $volumePanel.getBoundingClientRect();
|
||||
const { width: handleWidth } = $volumeHandle.getBoundingClientRect();
|
||||
const percentage =
|
||||
clamp(event.pageX - panelLeft - handleWidth / 2, 0, panelWidth - handleWidth / 2) /
|
||||
(panelWidth - handleWidth);
|
||||
return percentage;
|
||||
}
|
||||
|
||||
function setVolumeHandle(percentage = 0.7) {
|
||||
if (player.muted || percentage === 0) {
|
||||
setStyle($volume, 'display', 'none');
|
||||
setStyle($volumeClose, 'display', 'flex');
|
||||
setStyle($volumeHandle, 'left', '0');
|
||||
} else {
|
||||
// TODO...
|
||||
const panelWidth = getStyle($volumePanel, 'width') || 60;
|
||||
const handleWidth = getStyle($volumeHandle, 'width');
|
||||
const width = (panelWidth - handleWidth) * percentage;
|
||||
setStyle($volume, 'display', 'flex');
|
||||
setStyle($volumeClose, 'display', 'none');
|
||||
setStyle($volumeHandle, 'left', `${width}px`);
|
||||
}
|
||||
}
|
||||
|
||||
setVolumeHandle(player.volume);
|
||||
art.on('video:volumechange', () => {
|
||||
setVolumeHandle(player.volume);
|
||||
});
|
||||
|
||||
proxy($volume, 'click', () => {
|
||||
player.muted = true;
|
||||
});
|
||||
|
||||
proxy($volumeClose, 'click', () => {
|
||||
player.muted = false;
|
||||
});
|
||||
|
||||
proxy($volumePanel, 'click', event => {
|
||||
player.muted = false;
|
||||
player.volume = volumeChangeFromEvent(event);
|
||||
});
|
||||
|
||||
proxy($volumeHandle, 'mousedown', () => {
|
||||
isDroging = true;
|
||||
});
|
||||
|
||||
proxy(document, 'mousemove', event => {
|
||||
if (isDroging) {
|
||||
player.muted = false;
|
||||
player.volume = volumeChangeFromEvent(event);
|
||||
}
|
||||
});
|
||||
|
||||
proxy(document, 'mouseup', () => {
|
||||
if (isDroging) {
|
||||
isDroging = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
Reference in new issue
Block a user