mirror of
https://github.com/markuryy/shark.git
synced 2025-12-12 19:51:01 +00:00
refactor(np): add triangle volume slider to now playing panel
This commit is contained in:
254
src/lib/components/TriangleVolumeSlider.svelte
Normal file
254
src/lib/components/TriangleVolumeSlider.svelte
Normal file
@@ -0,0 +1,254 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
value: number; // 0-1
|
||||
onchange?: (value: number) => void;
|
||||
}
|
||||
|
||||
let { value = $bindable(0.75), onchange }: Props = $props();
|
||||
|
||||
let volume = $state(value * 100); // Internal state as 0-100
|
||||
let isDragging = $state(false);
|
||||
let dragOffset = $state(0);
|
||||
let triangleContainer: HTMLDivElement;
|
||||
let volumeThumb: HTMLDivElement;
|
||||
|
||||
const triangleWidth = 60;
|
||||
|
||||
// Sync external value (0-1) with internal volume (0-100)
|
||||
$effect(() => {
|
||||
volume = value * 100;
|
||||
});
|
||||
|
||||
function updateVolume(percentage: number) {
|
||||
volume = Math.max(0, Math.min(100, percentage));
|
||||
const newValue = volume / 100;
|
||||
value = newValue;
|
||||
if (onchange) {
|
||||
onchange(newValue);
|
||||
}
|
||||
}
|
||||
|
||||
function getVolumeFromPosition(clientX: number, useOffset: boolean = false): number {
|
||||
const rect = triangleContainer.getBoundingClientRect();
|
||||
let x = clientX - rect.left;
|
||||
|
||||
if (useOffset) {
|
||||
x = x - dragOffset;
|
||||
}
|
||||
|
||||
const percentage = (x / rect.width) * 100;
|
||||
return percentage;
|
||||
}
|
||||
|
||||
function handleThumbMouseDown(e: MouseEvent) {
|
||||
isDragging = true;
|
||||
|
||||
const rect = triangleContainer.getBoundingClientRect();
|
||||
const clickX = e.clientX - rect.left;
|
||||
const currentThumbPosition = (volume / 100) * rect.width;
|
||||
|
||||
dragOffset = clickX - currentThumbPosition;
|
||||
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function handleContainerMouseDown(e: MouseEvent) {
|
||||
if (e.target !== volumeThumb) {
|
||||
dragOffset = 0;
|
||||
const newVolume = getVolumeFromPosition(e.clientX);
|
||||
updateVolume(newVolume);
|
||||
isDragging = true;
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseMove(e: MouseEvent) {
|
||||
if (isDragging) {
|
||||
const newVolume = getVolumeFromPosition(e.clientX, true);
|
||||
updateVolume(newVolume);
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
isDragging = false;
|
||||
dragOffset = 0;
|
||||
}
|
||||
|
||||
function handleThumbTouchStart(e: TouchEvent) {
|
||||
isDragging = true;
|
||||
|
||||
const touch = e.touches[0];
|
||||
const rect = triangleContainer.getBoundingClientRect();
|
||||
const currentThumbPosition = (volume / 100) * rect.width;
|
||||
dragOffset = (touch.clientX - rect.left) - currentThumbPosition;
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function handleContainerTouchStart(e: TouchEvent) {
|
||||
if (e.target !== volumeThumb) {
|
||||
const touch = e.touches[0];
|
||||
dragOffset = 0;
|
||||
const newVolume = getVolumeFromPosition(touch.clientX, false);
|
||||
updateVolume(newVolume);
|
||||
isDragging = true;
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function handleTouchMove(e: TouchEvent) {
|
||||
if (isDragging) {
|
||||
const touch = e.touches[0];
|
||||
const newVolume = getVolumeFromPosition(touch.clientX, true);
|
||||
updateVolume(newVolume);
|
||||
}
|
||||
}
|
||||
|
||||
function handleTouchEnd() {
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
function handleDecrease() {
|
||||
updateVolume(volume - 5);
|
||||
}
|
||||
|
||||
function handleIncrease() {
|
||||
updateVolume(volume + 5);
|
||||
}
|
||||
|
||||
const position = $derived((volume / 100) * triangleWidth);
|
||||
const rightEdge = $derived(volume);
|
||||
</script>
|
||||
|
||||
<svelte:window onmousemove={handleMouseMove} onmouseup={handleMouseUp} ontouchmove={handleTouchMove} ontouchend={handleTouchEnd} />
|
||||
|
||||
<div class="volume-container">
|
||||
<button class="volume-icons" onclick={handleDecrease} aria-label="Decrease volume">−</button>
|
||||
|
||||
<div class="triangle-wrapper">
|
||||
<div
|
||||
class="triangle-container"
|
||||
bind:this={triangleContainer}
|
||||
onmousedown={handleContainerMouseDown}
|
||||
ontouchstart={handleContainerTouchStart}
|
||||
role="slider"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-valuenow={Math.round(value * 100)}
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="triangle-bg"></div>
|
||||
<div
|
||||
class="triangle-fill"
|
||||
style="clip-path: inset(0 {100 - rightEdge}% 0 0);"
|
||||
></div>
|
||||
<div
|
||||
class="volume-thumb"
|
||||
style="left: {position}px;"
|
||||
bind:this={volumeThumb}
|
||||
onmousedown={handleThumbMouseDown}
|
||||
ontouchstart={handleThumbTouchStart}
|
||||
>
|
||||
<div class="volume-thumb-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="volume-icons" onclick={handleIncrease} aria-label="Increase volume">+</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.volume-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.volume-icons {
|
||||
font-size: 12px;
|
||||
color: light-dark(#000, #fff);
|
||||
user-select: none;
|
||||
padding: 2px 6px;
|
||||
min-width: auto;
|
||||
min-height: auto;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.triangle-wrapper {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 16px;
|
||||
flex: 1;
|
||||
max-width: 60px;
|
||||
}
|
||||
|
||||
.triangle-container {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.triangle-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 60px solid transparent;
|
||||
border-right: 0 solid transparent;
|
||||
border-bottom: 16px solid light-dark(#808080, #525252);
|
||||
}
|
||||
|
||||
.triangle-fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 60px solid transparent;
|
||||
border-right: 0 solid transparent;
|
||||
border-bottom: 16px solid light-dark(#000080, #0066cc);
|
||||
transition: clip-path 0.05s ease-out;
|
||||
}
|
||||
|
||||
.volume-thumb {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background: light-dark(#c0c0c0, #2b2b2b);
|
||||
border-top: 1px solid light-dark(#ffffff, #525252);
|
||||
border-left: 1px solid light-dark(#ffffff, #525252);
|
||||
border-right: 1px solid light-dark(#000000, #000);
|
||||
border-bottom: 1px solid light-dark(#000000, #000);
|
||||
box-shadow: inset 1px 1px 0 light-dark(#dfdfdf, #363636),
|
||||
inset -1px -1px 0 light-dark(#808080, #232323);
|
||||
cursor: grab;
|
||||
transform: translateX(-4px);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.volume-thumb:active {
|
||||
cursor: grabbing;
|
||||
border-top: 1px solid light-dark(#000000, #000);
|
||||
border-left: 1px solid light-dark(#000000, #000);
|
||||
border-right: 1px solid light-dark(#ffffff, #525252);
|
||||
border-bottom: 1px solid light-dark(#ffffff, #525252);
|
||||
}
|
||||
|
||||
.volume-thumb-inner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 4px;
|
||||
height: 10px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
light-dark(#dfdfdf, #363636) 0%,
|
||||
light-dark(#c0c0c0, #2b2b2b) 50%,
|
||||
light-dark(#808080, #232323) 100%
|
||||
);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user