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

Fix mobile event

Browse Source
This commit is contained in:
Harvey committed 2022-01-10 09:35:46 +08:00
1 parent 5c4d71cc7a
commit 53da53c35a
7 files changed
+175 -112
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/contextmenu/index.js
+77 -71
View File
@@ -1,4 +1,4 @@
import { setStyles, includeFromEvent } from '../utils';
import { setStyles, includeFromEvent, isMobile } from '../utils';
import Component from '../utils/component';
import playbackRate from './playbackRate';
import aspectRatio from './aspectRatio';
@@ -10,95 +10,101 @@ export default class Contextmenu extends Component {
constructor(art) {
super(art);
this.art = art;
this.name = 'contextmenu';
this.$parent = art.template.$contextmenu;
art.once('ready', () => {
if (!isMobile) {
this.init();
}
});
}
init() {
const {
option,
template: { $player, $contextmenu },
events: { proxy },
} = art;
} = this.art;
this.$parent = $contextmenu;
this.add(
playbackRate({
disable: !option.playbackRate,
name: 'playbackRate',
index: 10,
}),
);
art.once('ready', () => {
this.add(
playbackRate({
disable: !option.playbackRate,
name: 'playbackRate',
index: 10,
}),
);
this.add(
aspectRatio({
disable: !option.aspectRatio,
name: 'aspectRatio',
index: 20,
}),
);
this.add(
aspectRatio({
disable: !option.aspectRatio,
name: 'aspectRatio',
index: 20,
}),
);
this.add(
info({
disable: false,
name: 'info',
index: 30,
}),
);
this.add(
info({
disable: false,
name: 'info',
index: 30,
}),
);
this.add(
version({
disable: false,
name: 'version',
index: 40,
}),
);
this.add(
version({
disable: false,
name: 'version',
index: 40,
}),
);
this.add(
close({
disable: false,
name: 'close',
index: 60,
}),
);
this.add(
close({
disable: false,
name: 'close',
index: 60,
}),
);
for (let index = 0; index < option.contextmenu.length; index++) {
this.add(option.contextmenu[index]);
}
for (let index = 0; index < option.contextmenu.length; index++) {
this.add(option.contextmenu[index]);
proxy($player, 'contextmenu', (event) => {
event.preventDefault();
this.show = true;
const mouseX = event.clientX;
const mouseY = event.clientY;
const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
const { height: mHeight, width: mWidth } = $contextmenu.getBoundingClientRect();
let menuLeft = mouseX - cLeft;
let menuTop = mouseY - cTop;
if (mouseX + mWidth > cLeft + cWidth) {
menuLeft = cWidth - mWidth;
}
proxy($player, 'contextmenu', (event) => {
event.preventDefault();
this.show = true;
if (mouseY + mHeight > cTop + cHeight) {
menuTop = cHeight - mHeight;
}
const mouseX = event.clientX;
const mouseY = event.clientY;
const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
const { height: mHeight, width: mWidth } = $contextmenu.getBoundingClientRect();
let menuLeft = mouseX - cLeft;
let menuTop = mouseY - cTop;
if (mouseX + mWidth > cLeft + cWidth) {
menuLeft = cWidth - mWidth;
}
if (mouseY + mHeight > cTop + cHeight) {
menuTop = cHeight - mHeight;
}
setStyles($contextmenu, {
top: `${menuTop}px`,
left: `${menuLeft}px`,
});
setStyles($contextmenu, {
top: `${menuTop}px`,
left: `${menuLeft}px`,
});
});
proxy($player, 'click', (event) => {
if (!includeFromEvent(event, $contextmenu)) {
this.show = false;
}
});
art.on('blur', () => {
proxy($player, 'click', (event) => {
if (!includeFromEvent(event, $contextmenu)) {
this.show = false;
});
}
});
this.art.on('blur', () => {
this.show = false;
});
}
}