melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: convert volume slider CSS to Tailwind utilities

Browse Source
This commit is contained in:
mkelvers
2026-04-20 02:04:11 +02:00
parent a6d2b9821a
commit 3b85a8daf3
3 changed files with 60 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
internal/templates/watch.templ
View File

@@ -59,7 +59,7 @@ templ WatchPage(anime jikan.Anime, data WatchPageData) {
<div
hx-get={ string(templ.URL(fmt.Sprintf("/api/anime/%d/episodes?current=%s", anime.MalID, data.CurrentEpisode))) }
hx-trigger="load"
class="watch-episodes-scroll overflow-y-auto flex-1"
class="scrollbar-hidden overflow-y-auto flex-1"
>
@LoadingIndicatorSmall()
</div>
@@ -256,9 +256,9 @@ templ VideoPlayer(data WatchPageData) {
<line x1="15" y1="6" x2="15" y2="18" stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
<div data-volume-wrap class="volume-wrap relative flex h-9 w-9 items-center justify-center overflow-visible sm:h-10 sm:w-10">
<span data-volume-bridge class="absolute inset-x-0 bottom-full h-[calc(100%+26px)]"></span>
<div class="volume-panel pointer-events-none absolute bottom-[calc(100%+26px)] left-1/2 z-30 -translate-x-1/2 opacity-0 invisible transition-opacity">
<div data-volume-wrap class="relative flex h-9 w-9 items-center justify-center overflow-visible sm:h-10 sm:w-10">
<span data-volume-bridge class="volume-bridge-off absolute inset-x-0 bottom-full h-[calc(100%+26px)]"></span>
<div data-volume-panel class="volume-panel pointer-events-none absolute bottom-[calc(100%+26px)] left-1/2 z-30 -translate-x-1/2 opacity-0 invisible transition-opacity">
<input
data-volume-range
type="range"
@@ -266,7 +266,7 @@ templ VideoPlayer(data WatchPageData) {
max="100"
step="1"
value="100"
class="volume-range h-24 w-4 cursor-pointer appearance-none bg-transparent"
class="volume-range volume-track volume-thumb h-24 w-4 cursor-pointer appearance-none bg-transparent"
aria-label="Volume"
/>
</div>

4
static/player.ts
View File

@@ -27,7 +27,7 @@ const initPlayer = (): void => {
const iconPause = container.querySelector('[data-icon-pause]') as SVGElement
const muteBtn = container.querySelector('[data-mute]') as HTMLButtonElement
const volumeWrap = container.querySelector('[data-volume-wrap]') as HTMLElement
const volumePanel = container.querySelector('.volume-panel') as HTMLElement
const volumePanel = container.querySelector('[data-volume-panel]') as HTMLElement
const volumeRange = container.querySelector('[data-volume-range]') as HTMLInputElement
const iconVolume = container.querySelector('[data-icon-volume]') as SVGElement
const iconMuted = container.querySelector('[data-icon-muted]') as SVGElement
@@ -854,7 +854,7 @@ const initPlayer = (): void => {
const setVolumePanelOpen = (isOpen: boolean): void => {
if (volumePanel) {
volumePanel.classList.toggle('is-visible', isOpen)
volumePanel.classList.toggle('volume-panel-visible', isOpen)
}
volumeWrap?.classList.toggle('is-volume-open', isOpen)
isHoveringVolume = isOpen

98
static/style.css
View File

@@ -34,71 +34,79 @@
--font: 'Verdana', 'Tahoma', 'Segoe UI', sans-serif;
}
.volume-range {
@utility volume-range {
writing-mode: vertical-lr;
direction: rtl;
accent-color: #ffffff;
}
.volume-range::-webkit-slider-runnable-track {
width: 4px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.55);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
@utility volume-track {
&::-webkit-slider-runnable-track {
width: 4px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.55);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}
&::-moz-range-track {
width: 4px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.55);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}
}
.volume-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 9999px;
background: #ffffff;
border: 0;
margin-left: -5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
@utility volume-thumb {
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 9999px;
background: #ffffff;
border: 0;
margin-left: -5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
}
&::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 9999px;
background: #ffffff;
border: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
}
}
.volume-range::-moz-range-track {
width: 4px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.55);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}
.volume-range::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 9999px;
background: #ffffff;
border: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
}
.volume-panel.is-visible {
@utility volume-panel-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.volume-wrap[data-volume-wrap] [data-volume-bridge] {
@utility volume-bridge-off {
pointer-events: none;
}
.volume-wrap.is-volume-open[data-volume-wrap] [data-volume-bridge] {
pointer-events: auto;
}
.volume-wrap:has(.volume-panel.is-visible) .volume-underline,
.volume-wrap:focus-within .volume-underline {
@utility volume-underline-visible {
opacity: 1;
}
.watch-episodes-scroll {
scrollbar-width: none;
-ms-overflow-style: none;
[data-volume-wrap]:is(.is-volume-open, :has(.volume-panel.volume-panel-visible)) [data-volume-bridge] {
pointer-events: auto;
}
.watch-episodes-scroll::-webkit-scrollbar {
display: none;
.volume-underline {
opacity: 0;
}
[data-volume-wrap]:is(.is-volume-open, :has(.volume-panel.volume-panel-visible)) .volume-underline {
opacity: 1;
}
@utility scrollbar-hidden {
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}