From 962119bb3777d966a061414f384ae69e61fde0ab Mon Sep 17 00:00:00 2001 From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com> Date: Thu, 23 Feb 2023 23:01:05 +0000 Subject: [PATCH 01/11] export audio component from root --- src/lib/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/index.ts b/src/lib/index.ts index 47d3c46..5457dac 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1 +1,2 @@ // Reexport your entry components here +export * from '$lib/components/audio'; From 930c46a59f9136be241ce33065574edaf6128a91 Mon Sep 17 00:00:00 2001 From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com> Date: Thu, 23 Feb 2023 23:06:59 +0000 Subject: [PATCH 02/11] fixes dependency declaration --- package.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 0802d86..1ceb9b0 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,9 @@ "peerDependencies": { "svelte": "^3.54.0" }, + "dependencies": { + "just-clamp": "^4.2.0" + }, "devDependencies": { "@changesets/cli": "^2.26.0", "@playwright/test": "^1.28.1", @@ -47,7 +50,6 @@ "eslint-config-prettier": "^8.5.0", "eslint-plugin-svelte3": "^4.0.0", "eslint": "^8.28.0", - "just-clamp": "^4.2.0", "prettier-plugin-svelte": "^2.8.1", "prettier": "^2.8.0", "publint": "^0.1.9", @@ -59,6 +61,5 @@ }, "svelte": "./dist/index.js", "types": "./dist/index.d.ts", - "type": "module", - "dependencies": {} + "type": "module" } From 549d858b24336f56e1fc161c9d0ae749775213b1 Mon Sep 17 00:00:00 2001 From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com> Date: Thu, 23 Feb 2023 23:13:17 +0000 Subject: [PATCH 03/11] sdd changeset --- .changeset/strange-goats-protect.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/strange-goats-protect.md diff --git a/.changeset/strange-goats-protect.md b/.changeset/strange-goats-protect.md new file mode 100644 index 0000000..28068de --- /dev/null +++ b/.changeset/strange-goats-protect.md @@ -0,0 +1,5 @@ +--- +'svelte-podcast': patch +--- + +Fixes release build From 9f3d7197413dad8401e3ff27841e85e0883c8e29 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 23 Feb 2023 23:16:09 +0000 Subject: [PATCH 04/11] Version Packages --- .changeset/strange-goats-protect.md | 5 ----- CHANGELOG.md | 6 ++++++ package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/strange-goats-protect.md diff --git a/.changeset/strange-goats-protect.md b/.changeset/strange-goats-protect.md deleted file mode 100644 index 28068de..0000000 --- a/.changeset/strange-goats-protect.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte-podcast': patch ---- - -Fixes release build diff --git a/CHANGELOG.md b/CHANGELOG.md index e1fd719..d532d73 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # svelte-podcast +## 0.1.1 + +### Patch Changes + +- 549d858: Fixes release build + ## 0.1.0 ### Minor Changes diff --git a/package.json b/package.json index 1ceb9b0..d2e618a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte-podcast", - "version": "0.1.0", + "version": "0.1.1", "license": "MIT", "author": "Ollie Taylor", "homepage": "https://github.com/OllieJT/svelte-podcast/blob/main/README.md", From 29ee8f1763c12b09dde6d627bcc3c2957d54b66d Mon Sep 17 00:00:00 2001 From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com> Date: Fri, 24 Feb 2023 13:15:34 +0000 Subject: [PATCH 05/11] restructure $lib --- .prettierignore | 3 ++- .../components/{audio/audio.svelte => audio-loader.svelte} | 7 +++---- src/lib/components/{audio => }/audio-progress.svelte | 0 src/lib/components/audio/index.ts | 2 -- src/lib/{components/audio/store.ts => context/audio.ts} | 4 ++-- src/lib/index.ts | 4 ++-- src/lib/{helper/check.ts => types/type-guards.ts} | 0 src/lib/{components/audio => types}/types.ts | 0 src/lib/{helper => utility}/seconds-to-timestamp.ts | 0 src/routes/+layout.svelte | 4 ++-- src/routes/+page.svelte | 2 +- src/routes/another-page/+page.svelte | 7 +------ 12 files changed, 13 insertions(+), 20 deletions(-) rename src/lib/components/{audio/audio.svelte => audio-loader.svelte} (91%) rename src/lib/components/{audio => }/audio-progress.svelte (100%) delete mode 100644 src/lib/components/audio/index.ts rename src/lib/{components/audio/store.ts => context/audio.ts} (95%) rename src/lib/{helper/check.ts => types/type-guards.ts} (100%) rename src/lib/{components/audio => types}/types.ts (100%) rename src/lib/{helper => utility}/seconds-to-timestamp.ts (100%) diff --git a/.prettierignore b/.prettierignore index 3897265..9813cfa 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,6 +3,7 @@ node_modules /build /.svelte-kit /package +/dist .env .env.* !.env.example @@ -10,4 +11,4 @@ node_modules # Ignore files for PNPM, NPM and YARN pnpm-lock.yaml package-lock.json -yarn.lock +yarn.lock \ No newline at end of file diff --git a/src/lib/components/audio/audio.svelte b/src/lib/components/audio-loader.svelte similarity index 91% rename from src/lib/components/audio/audio.svelte rename to src/lib/components/audio-loader.svelte index 663061e..9736ee9 100644 --- a/src/lib/components/audio/audio.svelte +++ b/src/lib/components/audio-loader.svelte @@ -4,9 +4,9 @@ __internal_audio_element, __internal_audio_metadata, __internal_audio_src, - } from '$lib/components/audio/store'; - import type { PlayerElement } from '$lib/components/audio/types'; - import { isBoolean, isNumber } from '$lib/helper/check'; + } from '$lib/context/audio'; + import { isBoolean, isNumber } from '$lib/types/type-guards'; + import type { PlayerElement } from '$lib/types/types'; let element: PlayerElement; let currentTime = 0; @@ -72,5 +72,4 @@ __internal_audio_metadata.update((m) => ({ ...m, duration })); }} /> - {/key} diff --git a/src/lib/components/audio/audio-progress.svelte b/src/lib/components/audio-progress.svelte similarity index 100% rename from src/lib/components/audio/audio-progress.svelte rename to src/lib/components/audio-progress.svelte diff --git a/src/lib/components/audio/index.ts b/src/lib/components/audio/index.ts deleted file mode 100644 index d4a0c36..0000000 --- a/src/lib/components/audio/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as AudioManager } from './audio.svelte'; -export { audio } from './store'; diff --git a/src/lib/components/audio/store.ts b/src/lib/context/audio.ts similarity index 95% rename from src/lib/components/audio/store.ts rename to src/lib/context/audio.ts index 70f6c6d..a3f691f 100644 --- a/src/lib/components/audio/store.ts +++ b/src/lib/context/audio.ts @@ -1,6 +1,6 @@ import { dev } from '$app/environment'; -import type { PlayerElement, PlayerMetadata } from '$lib/components/audio/types'; -import { secondsToTimestamp } from '$lib/helper/seconds-to-timestamp'; +import type { PlayerElement, PlayerMetadata } from '$lib/types/types'; +import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp'; import clamp from 'just-clamp'; import { derived, writable } from 'svelte/store'; diff --git a/src/lib/index.ts b/src/lib/index.ts index 5457dac..a927e69 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,2 +1,2 @@ -// Reexport your entry components here -export * from '$lib/components/audio'; +export { default as AudioLoader } from '$lib/components/audio-loader.svelte'; +export { audio } from '$lib/context/audio'; diff --git a/src/lib/helper/check.ts b/src/lib/types/type-guards.ts similarity index 100% rename from src/lib/helper/check.ts rename to src/lib/types/type-guards.ts diff --git a/src/lib/components/audio/types.ts b/src/lib/types/types.ts similarity index 100% rename from src/lib/components/audio/types.ts rename to src/lib/types/types.ts diff --git a/src/lib/helper/seconds-to-timestamp.ts b/src/lib/utility/seconds-to-timestamp.ts similarity index 100% rename from src/lib/helper/seconds-to-timestamp.ts rename to src/lib/utility/seconds-to-timestamp.ts diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 83ffe02..eeacb62 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,7 +1,7 @@ - + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 12786bf..734dd87 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,5 +1,5 @@ {#key src} @@ -42,34 +42,34 @@ // console.log('emptied', e); }} on:loadeddata={() => { - __internal_audio_metadata.update((m) => ({ ...m, loading: false })); + audio_metadata.update((m) => ({ ...m, loading: false })); }} on:loadstart={() => { - __internal_audio_metadata.update((m) => ({ ...m, loading: true })); + audio_metadata.update((m) => ({ ...m, loading: true })); }} on:playing={(e) => { // @ts-expect-error event is not fully typed const is_paused = e.target.paused; if (!isBoolean(is_paused)) return; - __internal_audio_metadata.update((m) => ({ ...m, paused: is_paused })); + audio_metadata.update((m) => ({ ...m, paused: is_paused })); }} on:pause={(e) => { // @ts-expect-error event is not fully typed const is_paused = e.target.paused; if (!isBoolean(is_paused)) return; - __internal_audio_metadata.update((m) => ({ ...m, paused: is_paused })); + audio_metadata.update((m) => ({ ...m, paused: is_paused })); }} on:ratechange={(e) => { // @ts-expect-error event is not fully typed const playbackRate = e.target.playbackRate; if (!isNumber(playbackRate)) return; - __internal_audio_metadata.update((m) => ({ ...m, playbackRate })); + audio_metadata.update((m) => ({ ...m, playbackRate })); }} on:durationchange={(e) => { // @ts-expect-error event is not fully typed const duration = e.target?.duration; if (!isNumber(duration)) return; - __internal_audio_metadata.update((m) => ({ ...m, duration })); + audio_metadata.update((m) => ({ ...m, duration })); }} /> {/key} diff --git a/src/lib/context/audio-internals.ts b/src/lib/context/audio-internals.ts new file mode 100644 index 0000000..5083a48 --- /dev/null +++ b/src/lib/context/audio-internals.ts @@ -0,0 +1,13 @@ +import type { PlayerElement, PlayerMetadata } from '$lib/types/types'; +import { writable } from 'svelte/store'; + +export const audio_current_time = writable(0); +export const audio_src = writable(null); +export const audio_element = writable(); +export const audio_metadata = writable({ + duration: 0, + muted: false, + paused: true, + playbackRate: 1, + loading: false, +}); diff --git a/src/lib/context/audio.ts b/src/lib/context/audio.ts index b5b70f0..c91a837 100644 --- a/src/lib/context/audio.ts +++ b/src/lib/context/audio.ts @@ -1,36 +1,27 @@ -import type { PlayerElement, PlayerMetadata } from '$lib/types/types'; +import { + audio_current_time, + audio_element, + audio_metadata, + audio_src, +} from '$lib/context/audio-internals'; import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp'; import { info, warn } from '$pkg/log'; import clamp from 'just-clamp'; -import { derived, writable } from 'svelte/store'; +import { derived } from 'svelte/store'; -export const __internal_audio_current_time = writable(0); -export const __internal_audio_src = writable(null); -export const __internal_audio_element = writable(); -export const __internal_audio_metadata = writable({ - duration: 0, - muted: false, - paused: true, - playbackRate: 1, - loading: false, +const audio_state = derived([audio_metadata, audio_current_time], ([$metadata, $current_time]) => { + return { + current_time: $current_time, + timestamp: secondsToTimestamp($current_time), + ...$metadata, + }; }); -const state = derived( - [__internal_audio_metadata, __internal_audio_current_time], - ([$metadata, $current_time]) => { - return { - current_time: $current_time, - timestamp: secondsToTimestamp($current_time), - ...$metadata, - }; - }, -); - type HandleType = 'toggle' | 'set'; function play(type: HandleType = 'set') { info('play: ', type); - return __internal_audio_element.subscribe((el) => { + return audio_element.subscribe((el) => { if (!el) return warn('no audio element'); if (type === 'toggle') { el.paused ? el.play() : el.pause(); @@ -41,7 +32,7 @@ function play(type: HandleType = 'set') { } function pause(type: HandleType = 'set') { info('pause: ', type); - return __internal_audio_element.subscribe((el) => { + return audio_element.subscribe((el) => { if (!el) return warn('no audio element'); if (type === 'toggle') { el.paused ? el.play() : el.pause(); @@ -53,7 +44,7 @@ function pause(type: HandleType = 'set') { function mute(type: HandleType = 'set') { info('mute: ', type); - return __internal_audio_element.subscribe((el) => { + return audio_element.subscribe((el) => { if (!el) return warn('no audio element'); if (type === 'toggle') { el.muted = !el.muted; @@ -64,7 +55,7 @@ function mute(type: HandleType = 'set') { } function unmute(type: HandleType = 'set') { info('unmute: ', type); - return __internal_audio_element.subscribe((el) => { + return audio_element.subscribe((el) => { if (!el) return warn('no audio element'); if (type === 'toggle') { el.muted = !el.muted; @@ -76,8 +67,8 @@ function unmute(type: HandleType = 'set') { function load(src: string) { info('load: ', src); - __internal_audio_src.set(src); - return __internal_audio_element.subscribe((el) => { + audio_src.set(src); + return audio_element.subscribe((el) => { if (!el) return warn('no audio element'); el.volume = 1; el.pause(); @@ -85,12 +76,12 @@ function load(src: string) { } function unload() { info('unload: '); - __internal_audio_src.set(null); + audio_src.set(null); } function setPlaybackRate(rate: number) { info('setPlaybackRate: ', rate); - return __internal_audio_element.subscribe((el) => { + return audio_element.subscribe((el) => { if (!el) return warn('no audio element'); el.playbackRate = clamp(0, 10, rate); })(); @@ -98,7 +89,7 @@ function setPlaybackRate(rate: number) { function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') { info('seek: ', seconds, from); - return __internal_audio_element.subscribe((el) => { + return audio_element.subscribe((el) => { if (!el) return warn('no audio element'); if (from === 'from-end') { el.currentTime = clamp(0, el.duration, el.duration - seconds); @@ -110,7 +101,7 @@ function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') { function skip(seconds: number, type: 'forward' | 'backward' = 'forward') { info('skip: ', seconds, type); - return __internal_audio_element.subscribe((el) => { + return audio_element.subscribe((el) => { if (!el) return warn('no audio element'); if (type === 'backward') { el.currentTime = clamp(0, el.duration, el.currentTime - seconds); @@ -121,7 +112,7 @@ function skip(seconds: number, type: 'forward' | 'backward' = 'forward') { } export const audio = { - subscribe: state.subscribe, + subscribe: audio_state.subscribe, play, pause, mute, From d7d81ce7325cc691fa79c3f9e56663c0468db7f8 Mon Sep 17 00:00:00 2001 From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com> Date: Fri, 24 Feb 2023 14:01:43 +0000 Subject: [PATCH 09/11] adds autoplay option --- src/lib/components/audio-loader.svelte | 3 ++- src/lib/context/audio-internals.ts | 4 +++- src/lib/context/audio.ts | 8 +++++++- src/routes/+page.svelte | 8 ++++++-- 4 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/lib/components/audio-loader.svelte b/src/lib/components/audio-loader.svelte index d396daf..f46a025 100644 --- a/src/lib/components/audio-loader.svelte +++ b/src/lib/components/audio-loader.svelte @@ -1,5 +1,6 @@ -{#key src} -