add: click viewer will pause video
This commit is contained in:
defaultkavy 2024-10-15 14:21:07 +08:00
parent dbff5d1de9
commit 84f52ed030
Signed by: defaultkavy
GPG Key ID: DFBB22C4E69D7826
4 changed files with 46 additions and 41 deletions

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@ -16,7 +16,7 @@
gtag('config', 'G-59HBGP98WR');
</script>
<script type="module" crossorigin src="/assets/index-06ifinc_.js"></script>
<script type="module" crossorigin src="/assets/index-D8tVsP8g.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D689878Y.css">
</head>
<body>

View File

@ -2,7 +2,7 @@
"name": "danbooru-viewer",
"module": "index.ts",
"type": "module",
"version": "0.8.1",
"version": "0.8.2",
"scripts": {
"dev": "bun x vite",
"build": "bun x vite build",

View File

@ -15,14 +15,29 @@ export const post_route = $('route').path('/posts/:id').id('post').builder(({$ro
viewerPanel_hide: [],
viewerPanel_show: [],
viewerPanel_switch: [],
original_size: []
original_size: [],
video_play_pause: []
}>();
return [
$('div').class('viewer').content(async ($viewer) => {
const $video = $('video');
events.on('video_play_pause', () => { if ($video.isPlaying) $video.pause(); else $video.play() })
await post.ready;
$viewer
.on('pointermove', (e) => {
if (e.pointerType === 'mouse' || e.pointerType === 'pen') events.fire('viewerPanel_show');
})
.on('pointerup', (e) => {
if ( $(':.viewer-panel .panel')?.contains($(e.target)) ) return;
if (e.pointerType === 'touch') events.fire('viewerPanel_switch');
if (e.pointerType === 'mouse') events.fire('video_play_pause');
})
.on('mouseleave', () => {
events.fire('viewerPanel_hide');
})
return [
$('div').class('viewer-panel').hide(false).content([
$('div').class('viewer-panel').hide(false)
.content([
$('div').class('panel').content([
post.isVideo ? new $VideoController($video, $viewer, post) : null,
$('div').class('buttons').content([
@ -44,7 +59,8 @@ export const post_route = $('route').path('/posts/:id').id('post').builder(({$ro
])
]),
$('div').class('overlay')
]).self($viewerPanel => {
])
.self($viewerPanel => {
events.on('viewerPanel_hide', () => $viewerPanel.hide(true))
.on('viewerPanel_show', () => $viewerPanel.hide(false))
.on('viewerPanel_switch', () => $viewerPanel.hide(!$viewerPanel.hide()))
@ -55,17 +71,6 @@ export const post_route = $('route').path('/posts/:id').id('post').builder(({$ro
events.on('original_size', () => $img.src(post.file_url))
})
]
}).self($div => {
$div
.on('pointermove', (e) => {
if (e.pointerType === 'mouse' || e.pointerType === 'pen') events.fire('viewerPanel_show');
})
.on('pointerup', (e) => {
if (e.pointerType === 'touch') events.fire('viewerPanel_switch');
})
.on('mouseleave', () => {
events.fire('viewerPanel_hide');
})
}),
$('div').class('content').content([
$('h3').content(`Artist's Commentary`),