diff --git a/.changeset/ninety-dryers-heal.md b/.changeset/ninety-dryers-heal.md new file mode 100644 index 0000000..c107364 --- /dev/null +++ b/.changeset/ninety-dryers-heal.md @@ -0,0 +1,5 @@ +--- +'svelte-podcast': minor +--- + +Improve example components diff --git a/.changeset/stupid-dolphins-think.md b/.changeset/stupid-dolphins-think.md new file mode 100644 index 0000000..573c7d3 --- /dev/null +++ b/.changeset/stupid-dolphins-think.md @@ -0,0 +1,5 @@ +--- +'svelte-podcast': minor +--- + +improve progress component style overrides diff --git a/package.json b/package.json index 29c97bf..be6161f 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "svelte-podcast", "version": "0.8.0", "license": "MIT", - "author": "Ollie Taylor", + "author": "Ollie Taylor (https://olliejt.com)", "homepage": "https://github.com/OllieJT/svelte-podcast/blob/main/README.md", "bugs": { "url": "https://github.com/OllieJT/svelte-podcast/issues" diff --git a/src/components/example-player/player-widget.svelte b/src/components/example-player/player-widget.svelte deleted file mode 100644 index b544e2b..0000000 --- a/src/components/example-player/player-widget.svelte +++ /dev/null @@ -1,444 +0,0 @@ - - - - - - - -
- {#if !hide_skip_back} - - {/if} - - - {#if attributes.is_loaded} - - {:else} -
- -
- {/if} - - {#if !hide_skip_forward} - - {/if} - - {#if !hide_current_time} -
- = 3600} - /> -
- {/if} - -
- -
- - {#if !hide_duration} -
- -
- {/if} - - {#if !hide_playback_rate} - - {/if} -
- - - diff --git a/src/components/example-player/utility/a11y-icon.svelte b/src/components/example-player/utility/a11y-icon.svelte deleted file mode 100644 index 8f44218..0000000 --- a/src/components/example-player/utility/a11y-icon.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - -{label} diff --git a/src/components/example-player/utility/index.js b/src/components/example-player/utility/index.js deleted file mode 100644 index 40fb8e0..0000000 --- a/src/components/example-player/utility/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export { default as A11yIcon } from './a11y-icon.svelte'; -export { default as Skip } from './skip.svelte'; -export { default as Spinner } from './spinner.svelte'; -export { default as Timestamp } from './timestamp.svelte'; diff --git a/src/components/example-player/utility/skip.svelte b/src/components/example-player/utility/skip.svelte deleted file mode 100644 index b7607f4..0000000 --- a/src/components/example-player/utility/skip.svelte +++ /dev/null @@ -1,156 +0,0 @@ - - -
- - skip {type} - {value} - seconds - - -
- {#if type === 'forward'} - - - - - - - - - - - {:else} - - - - - - - - - - - {/if} -
-
- - diff --git a/src/components/example-player/utility/timestamp.svelte b/src/components/example-player/utility/timestamp.svelte deleted file mode 100644 index afd72f9..0000000 --- a/src/components/example-player/utility/timestamp.svelte +++ /dev/null @@ -1,22 +0,0 @@ - - -{timestamp} - - diff --git a/src/components/icon/index.js b/src/components/icon/index.js new file mode 100644 index 0000000..259ea22 --- /dev/null +++ b/src/components/icon/index.js @@ -0,0 +1,5 @@ +export { default as Pause } from '@inqling/svelte-icons/heroicon-20-solid/pause.svelte'; +export { default as Play } from '@inqling/svelte-icons/heroicon-20-solid/play.svelte'; +export { default as SkipBack } from './skip-backward.svelte'; +export { default as SkipForward } from './skip-forward.svelte'; +export { default as LoadingSpinner } from './spinner.svelte'; diff --git a/src/components/icon/skip-backward.svelte b/src/components/icon/skip-backward.svelte new file mode 100644 index 0000000..50cf4bc --- /dev/null +++ b/src/components/icon/skip-backward.svelte @@ -0,0 +1,42 @@ + + + + + + + + + + + diff --git a/src/components/icon/skip-forward.svelte b/src/components/icon/skip-forward.svelte new file mode 100644 index 0000000..8d0691c --- /dev/null +++ b/src/components/icon/skip-forward.svelte @@ -0,0 +1,42 @@ + + + + + + + + + + + diff --git a/src/components/example-player/utility/spinner.svelte b/src/components/icon/spinner.svelte similarity index 100% rename from src/components/example-player/utility/spinner.svelte rename to src/components/icon/spinner.svelte diff --git a/src/components/example-player/index.js b/src/components/player/index.js similarity index 100% rename from src/components/example-player/index.js rename to src/components/player/index.js diff --git a/src/components/player/player-widget.svelte b/src/components/player/player-widget.svelte new file mode 100644 index 0000000..5125c39 --- /dev/null +++ b/src/components/player/player-widget.svelte @@ -0,0 +1,315 @@ + + + + + + + +
+ + + + + {#if attributes.is_loaded} + + {:else} +
+ + Waiting for audio... +
+ {/if} + + + + + +
+ + {attributes.timestamp_current} + +
+ + +
+ +
+ + +
+ + {attributes.timestamp_end} + +
+ + + + +
+ + + diff --git a/src/layout/sidebar.svelte b/src/layout/sidebar.svelte index d29024b..04e2a44 100644 --- a/src/layout/sidebar.svelte +++ b/src/layout/sidebar.svelte @@ -2,7 +2,7 @@ import { assets } from '$app/paths'; import { page } from '$app/stores'; import clsx from 'clsx'; - import { circIn, circOut } from 'svelte/easing'; + import { circOut } from 'svelte/easing'; import { fly } from 'svelte/transition'; /** @@ -77,12 +77,13 @@ x: -320, duration: 300, easing: circOut, - opacity: 0, + opacity: 1, }} out:fly={{ x: -320, duration: 300, - easing: circIn, + easing: circOut, + opacity: 1, }} class={clsx( 'pointer-events-auto flex grow origin-left flex-col gap-y-5 overflow-y-auto bg-white px-6', diff --git a/src/lib/audio/player.svelte b/src/lib/audio/player.svelte index 755b4db..ec2dcfe 100644 --- a/src/lib/audio/player.svelte +++ b/src/lib/audio/player.svelte @@ -46,7 +46,7 @@ {/if} + + + + + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 6a4deb9..b684dbd 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,10 +1,13 @@ @@ -119,46 +168,33 @@ {#if is_menu_open}
{/if} -
- {#if is_menu_open} + {#if is_menu_open} + + +
- {/if} - + + {/if} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 92ae84d..4d93d23 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,6 +1,6 @@ + + +
+

+ A component that does not render any UI. Instead, it provides + convenient functions, values, and headless components via expoded + values +

+ +

This component should help

+
+ +
+ +
+ +
+
+
+
+ +
+ +
+ +
+
+ diff --git a/src/routes/components/code/audio-player.svelte b/src/routes/components/code/audio-player.svelte new file mode 100644 index 0000000..e87038f --- /dev/null +++ b/src/routes/components/code/audio-player.svelte @@ -0,0 +1,21 @@ + + + + 
{JSON.stringify({ attributes }, null, 3)}
+ diff --git a/src/routes/components/code/audio-progress.svelte b/src/routes/components/code/audio-progress.svelte new file mode 100644 index 0000000..f29de20 --- /dev/null +++ b/src/routes/components/code/audio-progress.svelte @@ -0,0 +1,5 @@ + + + diff --git a/src/routes/components/code/index.js b/src/routes/components/code/index.js new file mode 100644 index 0000000..8dcf015 --- /dev/null +++ b/src/routes/components/code/index.js @@ -0,0 +1,8 @@ +import { format_code } from '$src/layout/helper'; +import { default as player_css_src } from './audio-player.svelte?raw'; +import { default as progress_css_src } from './audio-progress.svelte?raw'; +export { default as PlayerCss } from './audio-player.svelte'; +export { default as ProgressCss } from './audio-progress.svelte'; + +export const player_css = format_code(player_css_src); +export const progress_css = format_code(progress_css_src); diff --git a/src/routes/examples/+page.svelte b/src/routes/examples/+page.svelte index 714dc05..d8e7600 100644 --- a/src/routes/examples/+page.svelte +++ b/src/routes/examples/+page.svelte @@ -1,69 +1,33 @@ -

Work in progress!

+
+

+ This page is a work in progress. +

+
- - -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- +
+ +
- - +
+ +
diff --git a/src/routes/examples/code/index.js b/src/routes/examples/code/index.js new file mode 100644 index 0000000..d46e00f --- /dev/null +++ b/src/routes/examples/code/index.js @@ -0,0 +1,4 @@ +import { default as player_css_src } from '$src/components/player/player-widget.svelte?raw'; +import { format_code } from '$src/layout/helper'; + +export const player_css = format_code(player_css_src);