mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-24 14:41:20 -08:00
优化自动隐藏controls
This commit is contained in:
1 parent
ce56c680da
commit
be3d97bf75
6 files changed
+36
-75
No files matched your search
@@ -1,4 +1,4 @@
|
||||
import { errorHandle, addClass, debounce, removeClass } from '../utils';
|
||||
import { errorHandle, addClass, removeClass } from '../utils';
|
||||
import Component from '../utils/component';
|
||||
import fullscreen from './fullscreen';
|
||||
import fullscreenWeb from './fullscreenWeb';
|
||||
@@ -26,15 +26,22 @@ export default class Control extends Component {
|
||||
template: { $player },
|
||||
} = art;
|
||||
|
||||
this.delayHide = debounce(() => {
|
||||
if (player.playing && this.show) {
|
||||
this.mouseMoveTime = Date.now();
|
||||
|
||||
art.on('mousemove', () => {
|
||||
this.show = true;
|
||||
removeClass($player, 'art-hide-cursor');
|
||||
addClass($player, 'art-hover');
|
||||
this.mouseMoveTime = Date.now();
|
||||
});
|
||||
|
||||
art.on('video:timeupdate', () => {
|
||||
if (player.playing && this.show && Date.now() - this.mouseMoveTime >= 3000) {
|
||||
this.show = false;
|
||||
addClass($player, 'art-hide-cursor');
|
||||
removeClass($player, 'art-hover');
|
||||
this.show = false;
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
this.cancelDelayHide = this.delayHide.clearTimeout;
|
||||
});
|
||||
|
||||
art.once('ready', () => {
|
||||
this.add(
|
||||
|
||||
@@ -2,7 +2,6 @@ import { includeFromEvent } from '../utils';
|
||||
|
||||
export default function clickInit(art, events) {
|
||||
const {
|
||||
controls,
|
||||
template: { $player },
|
||||
} = art;
|
||||
|
||||
@@ -15,8 +14,4 @@ export default function clickInit(art, events) {
|
||||
art.emit('blur');
|
||||
}
|
||||
});
|
||||
|
||||
art.on('blur', () => {
|
||||
controls.delayHide();
|
||||
});
|
||||
}
|
||||
@@ -1,10 +1,7 @@
|
||||
import { addClass, removeClass } from '../utils';
|
||||
|
||||
export default function hoverInit(art, events) {
|
||||
const {
|
||||
controls,
|
||||
template: { $player },
|
||||
} = art;
|
||||
const { $player } = art.template;
|
||||
|
||||
events.hover(
|
||||
$player,
|
||||
@@ -17,10 +14,4 @@ export default function hoverInit(art, events) {
|
||||
art.emit('hover');
|
||||
},
|
||||
);
|
||||
|
||||
art.on('hover', (value) => {
|
||||
if (!value) {
|
||||
controls.delayHide();
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1,22 +1,7 @@
|
||||
import { removeClass } from '../utils';
|
||||
|
||||
export default function mousemoveInitInit(art, events) {
|
||||
const {
|
||||
template: { $player, $video },
|
||||
player,
|
||||
controls,
|
||||
} = art;
|
||||
const { $player } = art.template;
|
||||
|
||||
events.proxy($player, 'mousemove', (event) => {
|
||||
art.emit('mousemove', event);
|
||||
});
|
||||
|
||||
art.on('mousemove', (event) => {
|
||||
controls.cancelDelayHide();
|
||||
removeClass($player, 'art-hide-cursor');
|
||||
controls.show = true;
|
||||
if (!player.pip && event.target === $video) {
|
||||
controls.delayHide();
|
||||
}
|
||||
});
|
||||
}
|
||||
Reference in new issue
Block a user