From 73de969d0428350c44ce17618d194ff148d8605e Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Sun, 9 Aug 2026 08:12:48 +0800 Subject: [PATCH 1/5] * Make drag scroll speed 3x --- src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue b/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue index 83407514cace5..3fdb110a724f0 100644 --- a/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue +++ b/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue @@ -66,7 +66,7 @@ function clearScrollDirection() { * @param {'up' | 'down'} direction */ function scroll(direction) { - const SPEED = 6 + const SPEED = 18 if (direction === 'up') { globalThis.scrollBy(0, -SPEED) From a06673cbcde15a2dbaca945624fc66309badb6bb Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Sun, 9 Aug 2026 08:29:29 +0800 Subject: [PATCH 2/5] * Update drag zone height based on window height --- .../AutoScrollWrapper/AutoScrollWrapper.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.css b/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.css index 22e678cc269f3..c60d7823b86c1 100644 --- a/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.css +++ b/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.css @@ -20,3 +20,22 @@ .bottomZone { inset-block-start: calc(100% - var(--zone-height)); } + +/* width <= 680px = list view = video item height 125px = cannot have drag zone too high */ +@media only screen and (width >= 681px) and (height >= 768px) { + .hotZone { + --usable-zone-height: 100px; + } +} + +@media only screen and (width >= 681px) and (height >= 1080px) { + .hotZone { + --usable-zone-height: 120px; + } +} + +@media only screen and (width >= 681px) and (height >= 1440px) { + .hotZone { + --usable-zone-height: 150px; + } +} From a33fb5bf19409836656b8eeb2fc48d43844a080b Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Mon, 10 Aug 2026 06:23:35 +0800 Subject: [PATCH 3/5] Apply suggestion from @efb4f5ff-1298-471a-8973-3d47447115dc Co-authored-by: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com> --- src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue b/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue index 3fdb110a724f0..313fbc0755c70 100644 --- a/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue +++ b/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue @@ -66,7 +66,7 @@ function clearScrollDirection() { * @param {'up' | 'down'} direction */ function scroll(direction) { - const SPEED = 18 + const SPEED = 14 if (direction === 'up') { globalThis.scrollBy(0, -SPEED) From f900f3e6bd4527c7841c4ef0837a65fd2c1a19e0 Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Wed, 12 Aug 2026 08:44:14 +0800 Subject: [PATCH 4/5] * Adjust grab bar style --- .../components/FtListVideo/FtListVideo.scss | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/renderer/components/FtListVideo/FtListVideo.scss b/src/renderer/components/FtListVideo/FtListVideo.scss index 3ee38f3fdf75b..4824af59cd265 100644 --- a/src/renderer/components/FtListVideo/FtListVideo.scss +++ b/src/renderer/components/FtListVideo/FtListVideo.scss @@ -1,5 +1,7 @@ @use '../../scss-partials/ft-list-item'; +$grab-bar-padding: 1em; + .thumbnailLink:hover { outline: 3px solid var(--side-nav-hover-color); } @@ -11,7 +13,19 @@ user-select: none; // Space a bit from the thumbnail. - padding-block: 1em; + padding-block: $grab-bar-padding; + + svg { + // Make icon appears more centered from default `-0.125em` from FA style + vertical-align: -0.15em; + } +} + +.ft-list-video:has(.grabBar) { + // Only grid mode has `.grabBar` + // Make top & bottom padding look consistent + /* stylelint-disable-next-line declaration-property-value-no-unknown */ + padding-block: 0 $grab-bar-padding; } .draggable:not(.draggable:only-child):focus .grabBar, From bcbeb7f20f61baa8c8faf1c89d9566ab37179058 Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Wed, 12 Aug 2026 09:14:06 +0800 Subject: [PATCH 5/5] * Update height for scroll area --- .../AutoScrollWrapper/AutoScrollWrapper.css | 28 ++++++++++--------- .../AutoScrollWrapper/AutoScrollWrapper.vue | 10 +++++++ src/renderer/views/Playlist/Playlist.vue | 1 + 3 files changed, 26 insertions(+), 13 deletions(-) diff --git a/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.css b/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.css index c60d7823b86c1..a2a51136c3c1a 100644 --- a/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.css +++ b/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.css @@ -12,30 +12,32 @@ .topZone { /* top nav height manually inspected to be 60px */ - --zone-height: calc(var(--usable-zone-height) + 60px); + --zone-height: calc(var(--usable-zone-height) + 60px + var(--zone-height-spacing-top-for-header)); + + /* Must have `px` suffix or `calc()` won't work */ + --zone-height-spacing-top-for-header: 100px; inset-block-start: 0; } +.topZone.grid { + /* grid mode top playlist header manually inspected to be ~120px */ + --zone-height-spacing-top-for-header: 160px; +} + .bottomZone { inset-block-start: calc(100% - var(--zone-height)); } -/* width <= 680px = list view = video item height 125px = cannot have drag zone too high */ -@media only screen and (width >= 681px) and (height >= 768px) { - .hotZone { - --usable-zone-height: 100px; - } -} +.bottomZone.grid { + --zone-height: calc(var(--usable-zone-height) + 80px); -@media only screen and (width >= 681px) and (height >= 1080px) { - .hotZone { - --usable-zone-height: 120px; - } + inset-block-start: calc(100% - var(--zone-height)); } -@media only screen and (width >= 681px) and (height >= 1440px) { +/* width <= 680px = list view = video item height 125px = cannot have drag zone too high */ +@media only screen and (width >= 681px) and (height >= 768px) { .hotZone { - --usable-zone-height: 150px; + --usable-zone-height: 100px; } } diff --git a/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue b/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue index 313fbc0755c70..097274bfbe472 100644 --- a/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue +++ b/src/renderer/components/AutoScrollWrapper/AutoScrollWrapper.vue @@ -3,6 +3,9 @@
@@ -12,6 +15,9 @@
@@ -26,6 +32,10 @@ const props = defineProps({ type: Boolean, default: false, }, + isGridMode: { + type: Boolean, + default: false, + }, }) const hotZoneShown = ref(false) diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue index 2f26538b46234..333e5bcd2619b 100644 --- a/src/renderer/views/Playlist/Playlist.vue +++ b/src/renderer/views/Playlist/Playlist.vue @@ -71,6 +71,7 @@