@gradio/video 0.20.0 → 0.20.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @gradio/video
 
+## 0.20.2
+
+### Dependency updates
+
+- @gradio/atoms@0.21.0
+- @gradio/client@2.0.4
+- @gradio/statustracker@0.12.3
+- @gradio/image@0.25.2
+- @gradio/upload@0.17.5
+
+## 0.20.1
+
+### Fixes
+
+- [#12800](https://github.com/gradio-app/gradio/pull/12800) [`7a1c321`](https://github.com/gradio-app/gradio/commit/7a1c321b6546ba05a353488f5133e8262c4a8a39) - Bump svelte/kit for security reasons.  Thanks @freddyaboulton!
+- [#12758](https://github.com/gradio-app/gradio/pull/12758) [`fb4b92a`](https://github.com/gradio-app/gradio/commit/fb4b92afe9cf43c0d35ba0293496058d967ad818) - Add volume control to gr.Video.  Thanks @hysts!
+- [#12779](https://github.com/gradio-app/gradio/pull/12779) [`ea2d3e9`](https://github.com/gradio-app/gradio/commit/ea2d3e985a8b42d188e551f517c5825c00790628) - Migrate Audio + Upload + Atoms to Svelte 5.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.12.2
+- @gradio/atoms@0.20.1
+- @gradio/utils@0.11.2
+- @gradio/icons@0.15.1
+- @gradio/upload@0.17.4
+- @gradio/client@2.0.3
+- @gradio/image@0.25.1
+
 ## 0.20.0
 
 ### Features

package/Video.stories.svelte

@@ -1,12 +1,13 @@
-<script context="module">
-	import { Template, Story } from "@storybook/addon-svelte-csf";
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import Video from "./Index.svelte";
-	import { format } from "svelte-i18n";
-	import { get } from "svelte/store";
-	import { userEvent, within } from "@storybook/test";
+	import { userEvent, within } from "storybook/test";
 	import { allModes } from "../storybook/modes";
+	import { wrapProps } from "../storybook/wrapProps";
 
-	export const meta = {
+	const video_sample = "/video_sample.mp4";
+
+	const { Story } = defineMeta({
 		title: "Components/Video",
 		component: Video,
 		parameters: {
@@ -17,14 +18,12 @@
 				}
 			}
 		}
-	};
+	});
 </script>
 
-<div>
-	<Template let:args>
-		<Video i18n={get(format)} {...args} />
-	</Template>
-</div>
+{#snippet template(args)}
+	<Video {...wrapProps(args)} />
+{/snippet}
 
 <Story
 	name="Record from webcam"
@@ -35,54 +34,46 @@
 		interactive: true,
 		height: 400,
 		width: 400,
-		webcam_options: {
-			mirror: true,
-			constraints: null
-		}
+		webcam_options: { mirror: true, constraints: null }
 	}}
+	{template}
 />
-
 <Story
 	name="Static video"
 	args={{
 		value: {
-			path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
-			url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
-			orig_name: "world.mp4"
+			path: video_sample,
+			url: video_sample,
+			orig_name: "video_sample.mp4"
 		},
 		label: "world video",
 		show_label: true,
-		show_download_button: true,
+		buttons: ["download"],
 		interactive: false,
 		height: 200,
 		width: 400,
-		webcam_options: {
-			mirror: true,
-			constraints: null
-		}
+		webcam_options: { mirror: true, constraints: null }
 	}}
+	{template}
 />
 <Story
 	name="Static video with vertical video"
 	args={{
 		value: {
-			path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
-			url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
-			orig_name: "world_vertical.mp4"
+			path: video_sample,
+			url: video_sample,
+			orig_name: "video_sample.mp4"
 		},
 		label: "world video",
 		show_label: true,
-		show_download_button: false,
+		buttons: [],
 		interactive: false,
 		height: 200,
 		width: 400,
-		webcam_options: {
-			mirror: true,
-			constraints: null
-		}
+		webcam_options: { mirror: true, constraints: null }
 	}}
+	{template}
 />
-
 <Story
 	name="Upload video"
 	args={{
@@ -93,13 +84,10 @@
 		width: 400,
 		height: 400,
 		value: null,
-		webcam_options: {
-			mirror: true,
-			constraints: null
-		}
+		webcam_options: { mirror: true, constraints: null }
 	}}
+	{template}
 />
-
 <Story
 	name="Upload video with download button"
 	args={{
@@ -107,42 +95,37 @@
 		show_label: true,
 		interactive: true,
 		sources: ["upload", "webcam"],
-		show_download_button: true,
+		buttons: ["download"],
 		width: 400,
 		height: 400,
 		value: {
-			path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
-			url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
-			orig_name: "world.mp4"
+			path: video_sample,
+			url: video_sample,
+			orig_name: "video_sample.mp4"
 		},
-		webcam_options: {
-			mirror: true,
-			constraints: null
-		}
+		webcam_options: { mirror: true, constraints: null }
 	}}
+	{template}
 />
-
 <Story
 	name="Trim video"
 	args={{
 		value: {
-			path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
-			url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
-			orig_name: "world.mp4"
+			path: video_sample,
+			url: video_sample,
+			orig_name: "video_sample.mp4"
 		},
 		label: "world video",
 		show_label: true,
 		interactive: "true",
 		sources: ["upload"],
 		width: 400,
-		webcam_options: {
-			mirror: true,
-			constraints: null
-		}
+		webcam_options: { mirror: true, constraints: null }
 	}}
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 		const trimButton = canvas.getByLabelText("Trim video to selection");
 		userEvent.click(trimButton);
 	}}
+	{template}
 />

package/dist/shared/InteractiveVideo.svelte

@@ -51,7 +51,7 @@
 		stop_recording?: never;
 	}>();
 
-	function handle_load({ detail }: CustomEvent<FileData | null>): void {
+	function handle_load(detail: FileData | null): void {
 		value = detail;
 		dispatch("change", detail);
 		dispatch("upload", detail!);
@@ -88,9 +88,9 @@
 					bind:dragging
 					bind:uploading
 					filetype="video/x-m4v,video/*"
-					on:load={handle_load}
+					onload={handle_load}
 					{max_file_size}
-					on:error={({ detail }) => dispatch("error", detail)}
+					onerror={(detail) => dispatch("error", detail)}
 					{root}
 					{upload}
 					{stream_handler}

package/dist/shared/Player.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher, onMount, onDestroy } from "svelte";
 	import { Play, Pause, Maximize, Undo } from "@gradio/icons";
 	import Video from "./Video.svelte";
 	import VideoControls from "./VideoControls.svelte";
+	import VolumeControl from "./VolumeControl.svelte";
+	import VolumeLevels from "../../audio/shared/VolumeLevels.svelte";
 	import type { FileData, Client } from "@gradio/client";
 	import { prepare_files } from "@gradio/client";
 	import { format_time } from "@gradio/utils";
@@ -40,6 +42,9 @@
 	let paused = true;
 	let video: HTMLVideoElement;
 	let processingVideo = false;
+	let show_volume_slider = false;
+	let current_volume = 1;
+	let is_fullscreen = false;
 
 	function handleMove(e: TouchEvent | MouseEvent): void {
 		if (!duration) return;
@@ -96,7 +101,51 @@
 	};
 
 	function open_full_screen(): void {
-		video.requestFullscreen();
+		if (!is_fullscreen) {
+			video.requestFullscreen();
+		} else {
+			document.exitFullscreen();
+		}
+	}
+
+	function handleFullscreenChange(): void {
+		is_fullscreen = document.fullscreenElement === video;
+		if (video) {
+			video.controls = is_fullscreen;
+		}
+	}
+
+	let last_synced_volume = 1;
+	let previous_video: HTMLVideoElement | undefined;
+	// Tolerance for floating-point comparison of volume values
+	const VOLUME_EPSILON = 0.001;
+
+	function handleVolumeChange(): void {
+		if (video && Math.abs(video.volume - last_synced_volume) > VOLUME_EPSILON) {
+			current_volume = video.volume;
+			last_synced_volume = video.volume;
+		}
+	}
+
+	onMount(() => {
+		document.addEventListener("fullscreenchange", handleFullscreenChange);
+		return () => {
+			document.removeEventListener("fullscreenchange", handleFullscreenChange);
+		};
+	});
+
+	onDestroy(() => {
+		if (video) {
+			video.removeEventListener("volumechange", handleVolumeChange);
+		}
+	});
+
+	$: if (video && video !== previous_video) {
+		if (previous_video) {
+			previous_video.removeEventListener("volumechange", handleVolumeChange);
+		}
+		video.addEventListener("volumechange", handleVolumeChange);
+		previous_video = video;
 	}
 
 	$: time = time || 0;
@@ -105,6 +154,16 @@
 	$: if (playback_position !== time && video) {
 		video.currentTime = playback_position;
 	}
+	$: if (video && !is_fullscreen) {
+		if (Math.abs(video.volume - current_volume) > VOLUME_EPSILON) {
+			video.volume = current_volume;
+			last_synced_volume = current_volume;
+		}
+		video.controls = false;
+	}
+	$: if (video && is_fullscreen) {
+		last_synced_volume = video.volume;
+	}
 </script>
 
 <div class="wrap">
@@ -115,6 +174,7 @@
 			{autoplay}
 			{loop}
 			{is_stream}
+			controls={is_fullscreen}
 			on:click={play_pause}
 			on:play
 			on:pause
@@ -165,16 +225,33 @@
 				on:click|stopPropagation|preventDefault={handle_click}
 			/>
 
-			<div
-				role="button"
-				tabindex="0"
-				class="icon"
-				aria-label="full-screen"
-				on:click={open_full_screen}
-				on:keypress={open_full_screen}
-			>
-				<Maximize />
+			<div class="volume-control-wrapper">
+				<button
+					class="icon volume-button"
+					style:color={show_volume_slider ? "var(--color-accent)" : "white"}
+					aria-label="Adjust volume"
+					on:click={() => (show_volume_slider = !show_volume_slider)}
+				>
+					<VolumeLevels currentVolume={current_volume} />
+				</button>
+
+				{#if show_volume_slider}
+					<VolumeControl bind:current_volume bind:show_volume_slider />
+				{/if}
 			</div>
+
+			{#if !show_volume_slider}
+				<div
+					role="button"
+					tabindex="0"
+					class="icon"
+					aria-label="full-screen"
+					on:click={open_full_screen}
+					on:keypress={open_full_screen}
+				>
+					<Maximize />
+				</div>
+			{/if}
 		</div>
 	</div>
 </div>
@@ -236,10 +313,14 @@
 		padding: var(--size-2) var(--size-1);
 		width: calc(100% - 0.375rem * 2);
 		width: calc(100% - var(--size-2) * 2);
+		z-index: 10;
 	}
 	.wrap:hover .controls {
 		opacity: 1;
 	}
+	:global(:fullscreen) .controls {
+		display: none;
+	}
 
 	.inner {
 		display: flex;
@@ -259,6 +340,25 @@
 		color: white;
 	}
 
+	.volume-control-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+		margin-right: var(--spacing-md);
+	}
+
+	.volume-button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+		width: var(--size-6);
+		color: white;
+		border: none;
+		background: none;
+		padding: 0;
+	}
+
 	.time {
 		flex-shrink: 0;
 		margin-right: var(--size-3);

package/dist/shared/VideoControls.svelte

@@ -98,7 +98,7 @@
 
 <ModifyUpload
 	{i18n}
-	on:clear={() => handle_clear()}
+	onclear={() => handle_clear()}
 	download={show_download_button ? value?.url : null}
 >
 	{#if showRedo && mode === ""}
@@ -106,7 +106,7 @@
 			Icon={Undo}
 			label="Reset video to initial value"
 			disabled={processingVideo || !has_change_history}
-			on:click={() => {
+			onclick={() => {
 				handle_reset_value();
 				mode = "";
 			}}
@@ -118,7 +118,7 @@
 			Icon={Trim}
 			label="Trim video to selection"
 			disabled={processingVideo}
-			on:click={toggleTrimmingMode}
+			onclick={toggleTrimmingMode}
 		/>
 	{/if}
 </ModifyUpload>

package/dist/shared/VolumeControl.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	export let current_volume = 1;
+	export let show_volume_slider = false;
+
+	let volume_element: HTMLInputElement;
+
+	onMount(() => {
+		adjustSlider();
+	});
+
+	const adjustSlider = (): void => {
+		let slider = volume_element;
+		if (!slider) return;
+
+		slider.style.background = `linear-gradient(to right, white ${
+			current_volume * 100
+		}%, rgba(255, 255, 255, 0.3) ${current_volume * 100}%)`;
+	};
+
+	$: (current_volume, adjustSlider());
+</script>
+
+<input
+	bind:this={volume_element}
+	id="volume"
+	class="volume-slider"
+	type="range"
+	min="0"
+	max="1"
+	step="0.01"
+	value={current_volume}
+	on:focusout={() => (show_volume_slider = false)}
+	on:input={(e) => {
+		if (e.target instanceof HTMLInputElement) {
+			current_volume = parseFloat(e.target.value);
+		}
+	}}
+/>
+
+<style>
+	.volume-slider {
+		-webkit-appearance: none;
+		appearance: none;
+		width: var(--size-20);
+		accent-color: var(--color-accent);
+		height: 4px;
+		cursor: pointer;
+		outline: none;
+		border-radius: 15px;
+		background-color: rgba(255, 255, 255, 0.3);
+		margin-left: var(--spacing-sm);
+	}
+
+	input[type="range"]::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		height: 15px;
+		width: 15px;
+		background-color: white;
+		border-radius: 50%;
+		border: none;
+		transition: 0.2s ease-in-out;
+	}
+
+	input[type="range"]::-moz-range-thumb {
+		height: 15px;
+		width: 15px;
+		background-color: white;
+		border-radius: 50%;
+		border: none;
+		transition: 0.2s ease-in-out;
+	}
+</style>

package/dist/shared/VolumeControl.svelte.d.ts

@@ -0,0 +1,21 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const VolumeControl: $$__sveltets_2_IsomorphicComponent<{
+    current_volume?: number;
+    show_volume_slider?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type VolumeControl = InstanceType<typeof VolumeControl>;
+export default VolumeControl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/video",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,16 +11,16 @@
     "@ffmpeg/util": "^0.12.2",
     "hls.js": "^1.6.13",
     "mrmime": "^2.0.1",
-    "@gradio/atoms": "^0.20.0",
-    "@gradio/client": "^2.0.2",
-    "@gradio/icons": "^0.15.0",
-    "@gradio/image": "^0.25.0",
-    "@gradio/statustracker": "^0.12.1",
-    "@gradio/upload": "^0.17.3",
-    "@gradio/utils": "^0.11.1"
+    "@gradio/atoms": "^0.21.0",
+    "@gradio/client": "^2.0.4",
+    "@gradio/icons": "^0.15.1",
+    "@gradio/image": "^0.25.2",
+    "@gradio/statustracker": "^0.12.3",
+    "@gradio/upload": "^0.17.5",
+    "@gradio/utils": "^0.11.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.15.1"
+    "@gradio/preview": "^0.15.2"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -46,7 +46,7 @@
     }
   },
   "peerDependencies": {
-    "svelte": "^5.43.4"
+    "svelte": "^5.48.0"
   },
   "main": "index.ts",
   "main_changeset": true,

package/shared/InteractiveVideo.svelte

@@ -51,7 +51,7 @@
 		stop_recording?: never;
 	}>();
 
-	function handle_load({ detail }: CustomEvent<FileData | null>): void {
+	function handle_load(detail: FileData | null): void {
 		value = detail;
 		dispatch("change", detail);
 		dispatch("upload", detail!);
@@ -88,9 +88,9 @@
 					bind:dragging
 					bind:uploading
 					filetype="video/x-m4v,video/*"
-					on:load={handle_load}
+					onload={handle_load}
 					{max_file_size}
-					on:error={({ detail }) => dispatch("error", detail)}
+					onerror={(detail) => dispatch("error", detail)}
 					{root}
 					{upload}
 					{stream_handler}

package/shared/Player.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher, onMount, onDestroy } from "svelte";
 	import { Play, Pause, Maximize, Undo } from "@gradio/icons";
 	import Video from "./Video.svelte";
 	import VideoControls from "./VideoControls.svelte";
+	import VolumeControl from "./VolumeControl.svelte";
+	import VolumeLevels from "../../audio/shared/VolumeLevels.svelte";
 	import type { FileData, Client } from "@gradio/client";
 	import { prepare_files } from "@gradio/client";
 	import { format_time } from "@gradio/utils";
@@ -40,6 +42,9 @@
 	let paused = true;
 	let video: HTMLVideoElement;
 	let processingVideo = false;
+	let show_volume_slider = false;
+	let current_volume = 1;
+	let is_fullscreen = false;
 
 	function handleMove(e: TouchEvent | MouseEvent): void {
 		if (!duration) return;
@@ -96,7 +101,51 @@
 	};
 
 	function open_full_screen(): void {
-		video.requestFullscreen();
+		if (!is_fullscreen) {
+			video.requestFullscreen();
+		} else {
+			document.exitFullscreen();
+		}
+	}
+
+	function handleFullscreenChange(): void {
+		is_fullscreen = document.fullscreenElement === video;
+		if (video) {
+			video.controls = is_fullscreen;
+		}
+	}
+
+	let last_synced_volume = 1;
+	let previous_video: HTMLVideoElement | undefined;
+	// Tolerance for floating-point comparison of volume values
+	const VOLUME_EPSILON = 0.001;
+
+	function handleVolumeChange(): void {
+		if (video && Math.abs(video.volume - last_synced_volume) > VOLUME_EPSILON) {
+			current_volume = video.volume;
+			last_synced_volume = video.volume;
+		}
+	}
+
+	onMount(() => {
+		document.addEventListener("fullscreenchange", handleFullscreenChange);
+		return () => {
+			document.removeEventListener("fullscreenchange", handleFullscreenChange);
+		};
+	});
+
+	onDestroy(() => {
+		if (video) {
+			video.removeEventListener("volumechange", handleVolumeChange);
+		}
+	});
+
+	$: if (video && video !== previous_video) {
+		if (previous_video) {
+			previous_video.removeEventListener("volumechange", handleVolumeChange);
+		}
+		video.addEventListener("volumechange", handleVolumeChange);
+		previous_video = video;
 	}
 
 	$: time = time || 0;
@@ -105,6 +154,16 @@
 	$: if (playback_position !== time && video) {
 		video.currentTime = playback_position;
 	}
+	$: if (video && !is_fullscreen) {
+		if (Math.abs(video.volume - current_volume) > VOLUME_EPSILON) {
+			video.volume = current_volume;
+			last_synced_volume = current_volume;
+		}
+		video.controls = false;
+	}
+	$: if (video && is_fullscreen) {
+		last_synced_volume = video.volume;
+	}
 </script>
 
 <div class="wrap">
@@ -115,6 +174,7 @@
 			{autoplay}
 			{loop}
 			{is_stream}
+			controls={is_fullscreen}
 			on:click={play_pause}
 			on:play
 			on:pause
@@ -165,16 +225,33 @@
 				on:click|stopPropagation|preventDefault={handle_click}
 			/>
 
-			<div
-				role="button"
-				tabindex="0"
-				class="icon"
-				aria-label="full-screen"
-				on:click={open_full_screen}
-				on:keypress={open_full_screen}
-			>
-				<Maximize />
+			<div class="volume-control-wrapper">
+				<button
+					class="icon volume-button"
+					style:color={show_volume_slider ? "var(--color-accent)" : "white"}
+					aria-label="Adjust volume"
+					on:click={() => (show_volume_slider = !show_volume_slider)}
+				>
+					<VolumeLevels currentVolume={current_volume} />
+				</button>
+
+				{#if show_volume_slider}
+					<VolumeControl bind:current_volume bind:show_volume_slider />
+				{/if}
 			</div>
+
+			{#if !show_volume_slider}
+				<div
+					role="button"
+					tabindex="0"
+					class="icon"
+					aria-label="full-screen"
+					on:click={open_full_screen}
+					on:keypress={open_full_screen}
+				>
+					<Maximize />
+				</div>
+			{/if}
 		</div>
 	</div>
 </div>
@@ -236,10 +313,14 @@
 		padding: var(--size-2) var(--size-1);
 		width: calc(100% - 0.375rem * 2);
 		width: calc(100% - var(--size-2) * 2);
+		z-index: 10;
 	}
 	.wrap:hover .controls {
 		opacity: 1;
 	}
+	:global(:fullscreen) .controls {
+		display: none;
+	}
 
 	.inner {
 		display: flex;
@@ -259,6 +340,25 @@
 		color: white;
 	}
 
+	.volume-control-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+		margin-right: var(--spacing-md);
+	}
+
+	.volume-button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+		width: var(--size-6);
+		color: white;
+		border: none;
+		background: none;
+		padding: 0;
+	}
+
 	.time {
 		flex-shrink: 0;
 		margin-right: var(--size-3);

package/shared/VideoControls.svelte

@@ -98,7 +98,7 @@
 
 <ModifyUpload
 	{i18n}
-	on:clear={() => handle_clear()}
+	onclear={() => handle_clear()}
 	download={show_download_button ? value?.url : null}
 >
 	{#if showRedo && mode === ""}
@@ -106,7 +106,7 @@
 			Icon={Undo}
 			label="Reset video to initial value"
 			disabled={processingVideo || !has_change_history}
-			on:click={() => {
+			onclick={() => {
 				handle_reset_value();
 				mode = "";
 			}}
@@ -118,7 +118,7 @@
 			Icon={Trim}
 			label="Trim video to selection"
 			disabled={processingVideo}
-			on:click={toggleTrimmingMode}
+			onclick={toggleTrimmingMode}
 		/>
 	{/if}
 </ModifyUpload>

package/shared/VolumeControl.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	export let current_volume = 1;
+	export let show_volume_slider = false;
+
+	let volume_element: HTMLInputElement;
+
+	onMount(() => {
+		adjustSlider();
+	});
+
+	const adjustSlider = (): void => {
+		let slider = volume_element;
+		if (!slider) return;
+
+		slider.style.background = `linear-gradient(to right, white ${
+			current_volume * 100
+		}%, rgba(255, 255, 255, 0.3) ${current_volume * 100}%)`;
+	};
+
+	$: (current_volume, adjustSlider());
+</script>
+
+<input
+	bind:this={volume_element}
+	id="volume"
+	class="volume-slider"
+	type="range"
+	min="0"
+	max="1"
+	step="0.01"
+	value={current_volume}
+	on:focusout={() => (show_volume_slider = false)}
+	on:input={(e) => {
+		if (e.target instanceof HTMLInputElement) {
+			current_volume = parseFloat(e.target.value);
+		}
+	}}
+/>
+
+<style>
+	.volume-slider {
+		-webkit-appearance: none;
+		appearance: none;
+		width: var(--size-20);
+		accent-color: var(--color-accent);
+		height: 4px;
+		cursor: pointer;
+		outline: none;
+		border-radius: 15px;
+		background-color: rgba(255, 255, 255, 0.3);
+		margin-left: var(--spacing-sm);
+	}
+
+	input[type="range"]::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		height: 15px;
+		width: 15px;
+		background-color: white;
+		border-radius: 50%;
+		border: none;
+		transition: 0.2s ease-in-out;
+	}
+
+	input[type="range"]::-moz-range-thumb {
+		height: 15px;
+		width: 15px;
+		background-color: white;
+		border-radius: 50%;
+		border: none;
+		transition: 0.2s ease-in-out;
+	}
+</style>