chris/streamarr
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

cool beans yo

Browse source
This commit is contained in:
Chris Kruining 2025-04-17 14:48:36 +02:00
parent ce62e92370
commit f5b2b7aaba
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
11 changed files with 198 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/features/player/controls/volume.tsx
View file

@ -1,17 +1,25 @@
import { Component, createSignal } from "solid-js";
import { Component, createEffect, createSignal, Show } from "solid-js";
import css from "./volume.module.css";
import { createStore, unwrap } from "solid-js/store";
import { trackDeep } from "@solid-primitives/deep";
interface VolumeProps {
value: number;
muted?: boolean;
onInput?: (next: { volume: number, muted: boolean }) => any;
}
export const Volume: Component<VolumeProps> = (props) => {
const [volume, setVolume] = createSignal(props.value);
const [state, setState] = createStore({ volume: props.value, muted: props.muted ?? false });
createEffect(() => {
props.onInput?.(unwrap(trackDeep(state)));
});
return (
<div class={css.container}>
<button>mute</button>
<input type="range" value={volume()} min="0" max="1" step="0.01" />
<button onClick={() => setState('muted', m => !m)}><Show when={state.muted} fallback="mute">unmute</Show></button>
<input type="range" value={state.volume} min="0" max="1" step="0.01" onInput={(e) => setState('volume', e.target.valueAsNumber)} />
</div>
);
};