From bf1a9c15846d9561bb3b0bde27a3402bf99b2d37 Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Wed, 22 Feb 2023 00:36:40 +0000
Subject: [PATCH] Adds a11y progress

---
 src/lib/components/audio-a11y-progress.svelte | 26 +++++++++++++++++++
 src/lib/components/audio.svelte               |  2 ++
 2 files changed, 28 insertions(+)
 create mode 100644 src/lib/components/audio-a11y-progress.svelte

diff --git a/src/lib/components/audio-a11y-progress.svelte b/src/lib/components/audio-a11y-progress.svelte
new file mode 100644
index 0000000..5b8d464
--- /dev/null
+++ b/src/lib/components/audio-a11y-progress.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let currentTime: number;
+	export let paused: boolean;
+	export let duration: number;
+</script>
+
+<progress
+	class="svelte-podcast-a11y-hidden"
+	data-paused={paused ? 'true' : 'false'}
+	max={duration}
+	value={currentTime}
+/>
+
+<style>
+	.svelte-podcast-a11y-hidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+</style>
diff --git a/src/lib/components/audio.svelte b/src/lib/components/audio.svelte
index 084e87a..54daf79 100644
--- a/src/lib/components/audio.svelte
+++ b/src/lib/components/audio.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import { usePlayer, type PlayerElement } from './audio';
+	import AudioA11yProgress from '$lib/components/audio-a11y-progress.svelte';
 
 	// TODO: Abstract to a store so we can add actions like reqind 20s
 
@@ -67,5 +68,6 @@
 		on:emptied={(e) => console.log('emptied', e)}
 		on:load={(e) => console.log('load', e)}
 	/>
+	<AudioA11yProgress {currentTime} {paused} {duration} />
 	<slot {duration} />
 {/key}