defaultkavy/danbooru-viewer
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

v0.8.2

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/assets/index-06ifinc_.js → dist/assets/index-D8tVsP8g.js vendored
View File

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'); gtag('config', 'G-59HBGP98WR');
</script> </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"> <link rel="stylesheet" crossorigin href="/assets/index-D689878Y.css">
</head> </head>
<body> <body>

2
package.json
View File

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

81
src/route/post/$post_route.ts
View File

@ -15,57 +15,62 @@ export const post_route = $('route').path('/posts/:id').id('post').builder(({$ro
viewerPanel_hide: [], viewerPanel_hide: [],
viewerPanel_show: [], viewerPanel_show: [],
viewerPanel_switch: [], viewerPanel_switch: [],
original_size: [] original_size: [],
video_play_pause: []
}>(); }>();
return [ return [
$('div').class('viewer').content(async ($viewer) => { $('div').class('viewer').content(async ($viewer) => {
const $video = $('video'); const $video = $('video');
events.on('video_play_pause', () => { if ($video.isPlaying) $video.pause(); else $video.play() })
await post.ready; 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 [ return [
$('div').class('viewer-panel').hide(false).content([ $('div').class('viewer-panel').hide(false)
$('div').class('panel').content([ .content([
post.isVideo ? new $VideoController($video, $viewer, post) : null, $('div').class('panel').content([
$('div').class('buttons').content([ post.isVideo ? new $VideoController($video, $viewer, post) : null,
$('ion-icon').title('Favorite').name('heart-outline').self($heart => { $('div').class('buttons').content([
ClientUser.events.on('favoriteUpdate', (user) => { $('ion-icon').title('Favorite').name('heart-outline').self($heart => {
if (user.favorites.has(post.id)) $heart.name('heart'); ClientUser.events.on('favoriteUpdate', (user) => {
else $heart.name('heart-outline'); if (user.favorites.has(post.id)) $heart.name('heart');
else $heart.name('heart-outline');
})
if (Booru.used.user?.favorites.has(post.id)) $heart.name('heart');
$heart.on('click', () => {
if (Booru.used.user?.favorites.has(post.id)) post.deleteFavorite();
else post.createFavorite();
})
}),
$('ion-icon').title('Original Size').name('resize-outline').self($original => {
$original.on('click', () => { events.fire('original_size'); $original.disable(true); })
if (!post.isLargeFile || post.isVideo) $original.disable(true);
}) })
if (Booru.used.user?.favorites.has(post.id)) $heart.name('heart'); ])
$heart.on('click', () => { ]),
if (Booru.used.user?.favorites.has(post.id)) post.deleteFavorite(); $('div').class('overlay')
else post.createFavorite(); ])
}) .self($viewerPanel => {
}), events.on('viewerPanel_hide', () => $viewerPanel.hide(true))
$('ion-icon').title('Original Size').name('resize-outline').self($original => { .on('viewerPanel_show', () => $viewerPanel.hide(false))
$original.on('click', () => { events.fire('original_size'); $original.disable(true); }) .on('viewerPanel_switch', () => $viewerPanel.hide(!$viewerPanel.hide()))
if (!post.isLargeFile || post.isVideo) $original.disable(true); }),
})
])
]),
$('div').class('overlay')
]).self($viewerPanel => {
events.on('viewerPanel_hide', () => $viewerPanel.hide(true))
.on('viewerPanel_show', () => $viewerPanel.hide(false))
.on('viewerPanel_switch', () => $viewerPanel.hide(!$viewerPanel.hide()))
}),
post.isVideo post.isVideo
? $video.height(post.image_height).width(post.image_width).src(post.file_ext === 'zip' ? post.large_file_url : post.file_url).controls(false).autoplay(true).loop(true).disablePictureInPicture(true) ? $video.height(post.image_height).width(post.image_width).src(post.file_ext === 'zip' ? post.large_file_url : post.file_url).controls(false).autoplay(true).loop(true).disablePictureInPicture(true)
: $('img').src(post.isLargeFile ? post.large_file_url : post.file_url).self($img => { : $('img').src(post.isLargeFile ? post.large_file_url : post.file_url).self($img => {
events.on('original_size', () => $img.src(post.file_url)) 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([ $('div').class('content').content([
$('h3').content(`Artist's Commentary`), $('h3').content(`Artist's Commentary`),