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

v0.3.2

Browse Source 
change: navigation bar app version link to home page.
change: gif format $PostTile preview action will same as video format.
new: gif format $PostTile will display format detail.
change: navigation bar background change to transparency blur.
change: searchbar selection list scrollbar width smaller.
This commit is contained in:
defaultkavy 2024-10-06 16:39:33 +08:00
parent 1a6d0e580f
commit 6104d9003f
Signed by: defaultkavy
GPG Key ID: DFBB22C4E69D7826
15 changed files with 91 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dist/assets/index-BfZu1R1a.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/assets/index-C8Fnii2g.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/assets/index-CbgOs0Kp.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/assets/index-qRel_iFf.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View File

@ -7,8 +7,8 @@
<title>Danbooru Viewer v0.2.5</title>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script type="module" crossorigin src="/assets/index-C8Fnii2g.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CbgOs0Kp.css">
<script type="module" crossorigin src="/assets/index-BfZu1R1a.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-qRel_iFf.css">
</head>
<body>
</body>

43
index.scss
View File

@ -45,47 +45,56 @@ nav {
position: fixed;
top: 0;
z-index: 100;
background-color: var(--background-color);
background-color: color-mix(in srgb, var(--background-color) 70%, transparent);
justify-content: space-between;
align-items: center;
padding-inline: 1rem;
box-sizing: border-box;
backdrop-filter: blur(3px);
div.title {
a.title {
display: flex;
align-items: center;
gap: 0.4rem;
a.booru-name {
color: var(--secondary-color);
text-decoration: none;
h1 {
.booru-name {
color: var(--secondary-color);
margin: 0;
}
}
a.version {
.app {
display: flex;
align-items: center;
border-radius: 0.4rem;
// border: 1px solid var(--secondary-color);
// padding: 0.2rem 0.4rem;
margin: 0;
gap: 0.4rem;
.version {
color: var(--background-color);
background-color: var(--secondary-color);
padding: 0.2em 0.4em;
border-radius: 0.4rem;
font-size: 0.8rem;
text-decoration: none;
font-weight: bold;
}
.app-name {
display: none;
font-size: 1rem;
color: var(--secondary-color);
}
}
button {
padding: 2px 4px;
border-radius: 0.4rem;
border: none;
}
div.searchbar {
padding: 0.4rem 10%;
max-width: 500px;
background-color: var(--background-color);
background-color: color-mix(in srgb, var(--background-color-light) 30%, transparent);
border: 1px solid var(--primary-color-darker);
border-radius: 0.4rem;
color: var(--primary-color-dark);
transition: 0.3s all ease;
cursor: pointer;
&:hover {
background-color: var(--background-color-light);
color: var(--primary-color);
}
}
@ -94,12 +103,12 @@ nav {
align-items: center;
gap: 1rem;
ion-icon {
background-color: var(--background-color);
// background-color: var(--background-color);
transition: all 0.3s ease;
border-radius: 1rem;
padding: 0.4rem;
&:hover {
background-color: var(--background-color-lighter);
background-color: color-mix(in srgb, var(--background-color-lighter) 50%, transparent);
}
}
ion-icon.search {
@ -120,12 +129,12 @@ nav {
router {
display: block;
position: relative;
padding-top: var(--nav-height);
route {
display: block;
position: relative;
padding-inline: 10px;
padding-top: var(--nav-height);
}
}

2
package.json
View File

@ -2,7 +2,7 @@
"name": "danbooru-viewer",
"module": "index.ts",
"type": "module",
"version": "0.3.1",
"version": "0.3.2",
"devDependencies": {
"@types/bun": "latest",
"vite": "^5.4.8"

1
src/component/PostGrid/_$PostGrid.scss
View File

@ -1,2 +1,3 @@
layout.post-grid {
margin-top: 1rem;
}

36
src/component/PostTile/$PostTile.ts
View File

@ -1,4 +1,4 @@
import { $Container, $State, $Video } from "elexis";
import { $Container, $Image, $State, $Video } from "elexis";
import type { Post } from "../../structure/Post";
import { time } from "../../structure/Util";
export class $PostTile extends $Container {
@ -8,7 +8,7 @@ export class $PostTile extends $Container {
constructor(post: Post) {
super('post-tile');
this.post = post;
this.$video = this.post.isVideo ? $('video').width(this.post.image_width).height(this.post.image_height).disablePictureInPicture(true).loop(true).muted(true).hide(true) : null;
this.$video = this.post.isVideo ? $('video').width(this.post.image_width).height(this.post.image_height).disablePictureInPicture(true).loop(true).muted(true).hide(true).on('mousedown', (e) => e.preventDefault()) : null;
this.attribute('filetype', this.post.file_ext);
this.durationUpdate();
this.build();
@ -32,33 +32,27 @@ export class $PostTile extends $Container {
this.post.hasSound ? $('ion-icon').name('volume-medium-outline') : null,
$('span').class('duration').content(this.duration$)
]) : null,
// Gif
this.post.isGif
? $('div').class('gif-detail').content([
$('span').content('GIF')
]) : null,
// Tile
$('a').href(this.post.pathname).content(() => [
this.$video,
$('img').draggable(false).css({opacity: '0'}).width(this.post.image_width).height(this.post.image_height).src(this.post.previewURL).loading('lazy')
.on('mousedown', (e) => e.preventDefault())
.once('load', (e, $img) => {
if (!this.post.isVideo) $img.src(this.post.previewURL);
$img.animate({opacity: [0, 1]}, {duration: 300, fill: 'both'});
this.removeClass('loading')
$img
.src(this.post.previewURL)
.on(['mouseenter', 'touchstart'], () => { if (this.post.isGif) { $img.src(this.post.large_file_url) } })
.on(['mouseleave', 'touchend', 'touchcancel'], () => { if (this.post.isGif) { $img.src(this.post.previewURL) } })
.animate({opacity: [0, 1]}, {duration: 300, fill: 'both'});
this.removeClass('loading');
})
])
.on('mouseenter', () => {
if (!this.$video?.isPlaying) {
this.$video?.src(this.post.large_file_url).hide(false).play().catch(err => undefined)
}
})
.on('mouseleave', () => {
this.$video?.pause().currentTime(0).hide(true);
})
.on('touchstart', () => {
if (!this.$video?.isPlaying) {
this.$video?.src(this.post.large_file_url).hide(false).play().catch(err => undefined)
}
})
.on('touchend', () => {
this.$video?.pause().currentTime(0).hide(true);
})
.on(['mouseenter', 'touchstart'], () => { if (!this.$video?.isPlaying) { this.$video?.src(this.post.large_file_url).hide(false).play().catch(err => undefined) } })
.on(['mouseleave', 'touchend', 'touchcancel'], () => { this.$video?.pause().currentTime(0).hide(true); })
])
}

2
src/component/PostTile/_$PostTile.scss
View File

@ -23,7 +23,7 @@ post-tile {
&:active {
transform: scale(0.95);
}
div.video-detail {
div.video-detail, div.gif-detail {
position: absolute;
background-color: var(--background-color-lighter);//color-mix(in srgb, var(--background-color-lighter) 80%, transparent);
color: var(--primary-color);

6
src/component/Searchbar/_$Searchbar.scss
View File

@ -10,7 +10,7 @@ searchbar {
div.input-container {
margin-top: 0.4rem;
background-color: var(--background-color-light);
background-color: color-mix(in srgb, var(--background-color-light) 70%, transparent);
border-radius: 0.4rem;
font-size: 1rem;
width: 500px;
@ -71,6 +71,10 @@ searchbar {
overflow-x: hidden;
position: relative;
&::-webkit-scrollbar {
width: 4px;
}
selection {
display: flex;
justify-content: space-between;

29
src/main.ts
View File

@ -31,9 +31,12 @@ $(document.body).content([
// Navigation Bar
$('nav').content([
// Title
$('div').class('title').content([
$('a').class('booru-name').content([$('h1').content(Booru.name$)]).href('/'),
$('a').class('version').target('_blank').content(`v${__APP_VERSION__}`).href(`https://git.defaultkavy.com/defaultkavy/danbooru-viewer`)
$('a').class('title').href('/').content([
$('h1').class('booru-name').content(Booru.name$),
$('h2').class('app').content([
$('span').class('app-name').content(`Viewer`),
$('span').class('version').content(`v${__APP_VERSION__}`)
])
]),
// Searchbar
$('div').class('searchbar').content(['Search in ', Booru.name$])
@ -65,13 +68,21 @@ $(document.body).content([
post_route
]).on('beforeSwitch', (e) => {
const DURATION = 300;
const TX = 2;
e.preventDefault();
function intro() {
const transform = $.call(() => {
switch ($Router.navigationDirection) {
case $RouterNavigationDirection.Forward: return [`translateX(${TX}%)`, `translateX(0%)`];
case $RouterNavigationDirection.Back: return [`translateX(-${TX}%)`, `translateX(0%)`];
case $RouterNavigationDirection.Replace: return undefined;
}
})
e.$view.content(e.nextContent);
e.rendered();
e.nextContent.element?.class('animated').animate({
opacity: [0, 1],
transform: $Router.navigationDirection === $RouterNavigationDirection.Forward ? [`translateX(40%)`, `translateX(0%)`] : [`translateX(-40%)`, `translateX(0%)`]
transform
}, {
duration: DURATION,
easing: 'ease'
@ -81,9 +92,17 @@ $(document.body).content([
})
}
function outro() {
const transform = $.call(() => {
switch ($Router.navigationDirection) {
case $RouterNavigationDirection.Forward: return [`translateX(0%)`, `translateX(-${TX}%)`];
case $RouterNavigationDirection.Back: return [`translateX(0%)`, `translateX(${TX}%)`];
case $RouterNavigationDirection.Replace: return undefined;
}
})
e.previousContent?.element?.class('animated').animate({
opacity: [1, 0],
transform: $Router.navigationDirection === $RouterNavigationDirection.Forward ? [`translateX(0%)`, `translateX(-40%)`] : [`translateX(0%)`, `translateX(40%)`]
transform
}, {
duration: DURATION,
easing: 'ease'

2
src/route/post/$post.ts
View File

@ -31,7 +31,7 @@ export const post_route = $('route').path('/posts/:id').id('post').builder(({$ro
let scrollTop = 0;
addEventListener('scroll', () => { if ($sidebar.inDOM()) scrollTop = document.documentElement.scrollTop })
$route
.on('beforeShift', () => { if (innerWidth > 800) $sidebar.css({position: `absolute`, top: `${scrollTop}px`}) })
.on('beforeShift', () => { if (innerWidth > 800) $sidebar.css({position: `absolute`, top: `calc(${scrollTop}px + var(--nav-height) + var(--padding))`}) })
.on('afterShift', () => $sidebar.css({position: '', top: ''}))
})
.content([

8
src/route/post/_$post.scss
View File

@ -1,5 +1,6 @@
#post {
padding: 0;
padding-top: var(--nav-height);
section {
background-color: #2f2f45;
border-radius: 20px;
@ -39,7 +40,7 @@
}
div.content {
width: calc(100vw - 300px - 4rem);
width: calc(100vw - 300px - 2rem);
display: flex;
flex-direction: column;
padding: 1rem;
@ -73,9 +74,10 @@
}
div.sidebar {
--padding: 1rem;
position: fixed;
top: calc(var(--nav-height) + 1rem);
right: 1rem;
top: calc(var(--nav-height) + var(--padding));
right: var(--padding);
display: flex;
flex-direction: column;
gap: 0.4rem;

1
src/structure/Post.ts
View File

@ -95,6 +95,7 @@ export class Post extends $EventManager<{update: []}> {
get uploader() { return User.manager.get(this.uploader_id); }
get approver() { if (this.approver_id) return User.manager.get(this.approver_id); else return null }
get isVideo() { return this.file_ext === 'mp4' || this.file_ext === 'webm' || this.file_ext === 'zip' }
get isGif() { return this.file_ext === 'gif' }
get hasSound() { return this.tag_string_meta.includes('sound') }
get tags() {
const tag_list = this.tag_string.split(' ');