Skip to content

Commit

Permalink
Embeds and player upgrades (#1450)
Browse files Browse the repository at this point in the history 
* adds header icons

* Add hotkeys to the audio player (#1203)

* Add @svelte-put/shortcut as a dependency

* Implement player hotkeys

* Pause and reset show on player close

* Implement minimized player

* Move hotkeys into +layout and refactor into object

* Remove unused test file

* Implement hotkey modal

* Add vitest tests for formatShortcut util

* Rebuild lockfile after rebase

* Update modal styling

* Reset core-js version

---------

Co-authored-by: Scott Tolinski <[email protected]>

* moves status into it's own writable

* Stop the player and reset player state when close is called (#1425)

Co-authored-by: Scott Tolinski <[email protected]>

* adds more complex player status to player state for more control

* reworks hotkeys to fix play pause issues

* major work on hotkeys and adds share window

* modifies redirects hook to keep query params on redirect

* adds completes timestamp at time links

* slight tweak to hotkeys

* ficxes icon issue caused by merge

---------

Co-authored-by: Ratul Maharaj <[email protected]>
Co-authored-by: Craig Holliday <[email protected]>
  • Loading branch information
@stolinski @RatulMaharaj @themisterholliday
3 people authored Dec 15, 2023
1 parent d7523b4 commit e138536
Show file tree
Hide file tree
Showing 26 changed files with 1,067 additions and 248 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@
"@sentry/profiling-node": "^1.2.6",
"@sentry/sveltekit": "^7.77.0",
"@sparticuz/chromium": "^117.0.0",
"@svelte-put/shortcut": "^3.0.0",
"@sveltejs/adapter-vercel": "^3.0.3",
"@upstash/redis": "^1.24.3",
"core-js": "^3.33.2",
Expand All @@ -78,7 +79,7 @@
"gpt-3-encoder": "^1.1.4",
"gray-matter": "^4.0.3",
"js-cookie": "^3.0.5",
"media-chrome": "^1.4.4",
"media-chrome": "^2.0.1",
"npm-run-all": "^4.1.5",
"openai": "^3.3.0",
"puppeteer-core": "^21.4.1",
Expand Down
23 changes: 15 additions & 8 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/hooks.server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export const redirects: Handle = async function ({ event, resolve }) {
if (!show) return resolve(event);
const url = get_show_path(show);
// Redirect to the page for this show
throw redirect(302, url);
throw redirect(302, url + event.url.search);
};

export const document_policy: Handle = async function ({ event, resolve }) {
Expand Down
7 changes: 0 additions & 7 deletions src/index.test.ts
View file

This file was deleted.

130 changes: 118 additions & 12 deletions src/lib/Icon.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,18 @@
| 'github'
| 'discord'
| 'tiktok'
| 'youtube'
| 'facebook'
| 'linkedin'
| 'link'
| 'edit'
| 'code'
| 'youtube'
| 'spotify'
| 'apple-podcasts'
| 'minimize'
| 'back-30'
| 'forward-30'
| 'share'
| 'monitor'
| 'download';
</script>
Expand All @@ -26,24 +34,25 @@
import { capitalize } from '$utilities/capitalize';
export let name: IconName;
export let title: string | boolean;
export let title: string | boolean = '';
export let ariaHidden = true;
if (!title && title !== false) title = capitalize(name);
</script>

{#if name === 'play'}
<svg
xmlns="http://www.w3.org/2000/svg"
style="width: var(--icon_size, 16px);"
viewBox="0 0 16 16"
viewBox="0 0 8 10"
aria-hidden={ariaHidden}
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>{title}</title>
<path
d="M7.629 4.306C7.74306 4.38231 7.83655 4.48555 7.90121 4.6066C7.96586 4.72765 7.99968 4.86276 7.99968 5C7.99968 5.13723 7.96586 5.27235 7.90121 5.39339C7.83655 5.51444 7.74306 5.61769 7.629 5.694L1.228 9.871C0.695 10.218 0 9.825 0 9.176V0.823997C0 0.174997 0.695 -0.218003 1.228 0.128997L7.629 4.306Z"
fill="currentColor"
d="M11.629 7.306a.835.835 0 0 1 0 1.388l-6.401 4.177C4.695 13.218 4 12.825 4 12.176V3.824c0-.649.695-1.042 1.228-.695l6.4 4.177Z"
/></svg
>
/>
</svg>
{/if}
{#if name === 'playing'}
<svg
Expand All @@ -60,18 +69,19 @@

{#if name === 'pause'}
<svg
xmlns="http://www.w3.org/2000/svg"
style="width: var(--icon_size, 16px);"
viewBox="0 0 16 16"
viewBox="0 0 8 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>{title}</title>
<path
fill="currentColor"
fill-rule="evenodd"
d="M5 3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H5Zm5 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-1Z"
clip-rule="evenodd"
/></svg
>
d="M1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V9C0 9.26522 0.105357 9.51957 0.292893 9.70711C0.48043 9.89464 0.734784 10 1 10H2C2.26522 10 2.51957 9.89464 2.70711 9.70711C2.89464 9.51957 3 9.26522 3 9V1C3 0.734784 2.89464 0.48043 2.70711 0.292893C2.51957 0.105357 2.26522 0 2 0H1ZM6 0C5.73478 0 5.48043 0.105357 5.29289 0.292893C5.10536 0.48043 5 0.734784 5 1V9C5 9.26522 5.10536 9.51957 5.29289 9.70711C5.48043 9.89464 5.73478 10 6 10H7C7.26522 10 7.51957 9.89464 7.70711 9.70711C7.89464 9.51957 8 9.26522 8 9V1C8 0.734784 7.89464 0.48043 7.70711 0.292893C7.51957 0.105357 7.26522 0 7 0H6Z"
/>
</svg>
{/if}

{#if name === 'sort'}
Expand Down Expand Up @@ -160,6 +170,7 @@
/></svg
>
{/if}

{#if name === 'search'}
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -300,6 +311,101 @@
/>
</svg>
{/if}

{#if name === 'back-30'}
<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.480774 15.3505L1.54327 15.2216C1.57713 15.4924 1.66827 15.6994 1.81671 15.8427C1.96515 15.9859 2.14484 16.0575 2.35577 16.0575C2.58234 16.0575 2.77244 15.9716 2.92609 15.7997C3.08234 15.6278 3.16046 15.396 3.16046 15.1044C3.16046 14.8283 3.08624 14.6096 2.93781 14.4481C2.78937 14.2867 2.60838 14.2059 2.39484 14.2059C2.25421 14.2059 2.08624 14.2333 1.89093 14.288L2.01202 13.3934C2.3089 13.4013 2.53546 13.3375 2.69171 13.202C2.84796 13.064 2.92609 12.8817 2.92609 12.6552C2.92609 12.4625 2.86879 12.3088 2.75421 12.1942C2.63963 12.0796 2.48728 12.0223 2.29718 12.0223C2.10968 12.0223 1.94952 12.0875 1.81671 12.2177C1.6839 12.3479 1.60317 12.538 1.57452 12.788L0.562805 12.6161C0.633118 12.2697 0.738586 11.9937 0.879211 11.788C1.02244 11.5796 1.22036 11.4169 1.47296 11.2997C1.72817 11.1799 2.01333 11.12 2.32843 11.12C2.86749 11.12 3.29978 11.2919 3.62531 11.6356C3.89353 11.9169 4.02765 12.2346 4.02765 12.5888C4.02765 13.0914 3.75291 13.4924 3.20343 13.7919C3.53156 13.8622 3.79327 14.0197 3.98859 14.2645C4.1865 14.5093 4.28546 14.8049 4.28546 15.1513C4.28546 15.6539 4.10187 16.0822 3.73468 16.4364C3.36749 16.7906 2.91046 16.9677 2.36359 16.9677C1.84536 16.9677 1.41567 16.8192 1.07452 16.5223C0.733378 16.2229 0.535461 15.8322 0.480774 15.3505ZM6.82843 11.12C7.38312 11.12 7.81671 11.3179 8.12921 11.7138C8.50161 12.1825 8.68781 12.9598 8.68781 14.0458C8.68781 15.1291 8.50031 15.9078 8.12531 16.3817C7.81541 16.7723 7.38312 16.9677 6.82843 16.9677C6.27114 16.9677 5.82192 16.7541 5.48077 16.327C5.13963 15.8973 4.96906 15.133 4.96906 14.0341C4.96906 12.9559 5.15656 12.1799 5.53156 11.7059C5.84145 11.3153 6.27374 11.12 6.82843 11.12ZM6.82843 12.0302C6.69562 12.0302 6.57713 12.0731 6.47296 12.1591C6.36879 12.2424 6.28807 12.3934 6.23077 12.6122C6.15525 12.896 6.11749 13.3739 6.11749 14.0458C6.11749 14.7177 6.15135 15.1799 6.21906 15.4325C6.28676 15.6825 6.3714 15.8492 6.47296 15.9325C6.57713 16.0158 6.69562 16.0575 6.82843 16.0575C6.96124 16.0575 7.07973 16.0158 7.1839 15.9325C7.28807 15.8466 7.36879 15.6942 7.42609 15.4755C7.50161 15.1942 7.53937 14.7177 7.53937 14.0458C7.53937 13.3739 7.50551 12.913 7.43781 12.663C7.3701 12.4104 7.28416 12.2424 7.17999 12.1591C7.07843 12.0731 6.96124 12.0302 6.82843 12.0302Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8 3.16667C8 2.98986 7.93679 2.82029 7.82426 2.69526C7.71174 2.57024 7.55913 2.5 7.4 2.5L2.6 2.5C2.44087 2.5 2.28826 2.57024 2.17574 2.69526C2.06321 2.82029 2 2.98986 2 3.16667L2 3.83333C2 4.01014 2.06321 4.17971 2.17574 4.30474C2.28826 4.42976 2.44087 4.5 2.6 4.5L7.4 4.5C7.55913 4.5 7.71174 4.42976 7.82426 4.30474C7.93679 4.17971 8 4.01014 8 3.83333L8 3.16667Z"
fill="currentColor"
/>
<path
d="M0.231687 3.98579C0.160397 3.93237 0.101962 3.8601 0.0615511 3.77537C0.0211403 3.69064 -2.90656e-07 3.59606 -2.82258e-07 3.5C-2.73861e-07 3.40394 0.0211403 3.30936 0.0615511 3.22463C0.101962 3.1399 0.160397 3.06763 0.231687 3.01421L4.23247 0.0903865C4.56561 -0.152507 5 0.122586 5 0.576875L5 6.42313C5 6.87741 4.56561 7.15251 4.23247 6.90961L0.231687 3.98579Z"
fill="currentColor"
/>
</svg>
{/if}
{#if name === 'forward-30'}
<svg width="9" height="19" viewBox="0 0 9 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.300781 15.3505L1.36328 15.2216C1.39714 15.4924 1.48828 15.6994 1.63672 15.8427C1.78516 15.9859 1.96484 16.0575 2.17578 16.0575C2.40234 16.0575 2.59245 15.9716 2.74609 15.7997C2.90234 15.6278 2.98047 15.396 2.98047 15.1044C2.98047 14.8283 2.90625 14.6096 2.75781 14.4481C2.60938 14.2867 2.42839 14.2059 2.21484 14.2059C2.07422 14.2059 1.90625 14.2333 1.71094 14.288L1.83203 13.3934C2.12891 13.4013 2.35547 13.3375 2.51172 13.202C2.66797 13.064 2.74609 12.8817 2.74609 12.6552C2.74609 12.4625 2.6888 12.3088 2.57422 12.1942C2.45964 12.0796 2.30729 12.0223 2.11719 12.0223C1.92969 12.0223 1.76953 12.0875 1.63672 12.2177C1.50391 12.3479 1.42318 12.538 1.39453 12.788L0.382812 12.6161C0.453125 12.2697 0.558594 11.9937 0.699219 11.788C0.842448 11.5796 1.04036 11.4169 1.29297 11.2997C1.54818 11.1799 1.83333 11.12 2.14844 11.12C2.6875 11.12 3.11979 11.2919 3.44531 11.6356C3.71354 11.9169 3.84766 12.2346 3.84766 12.5888C3.84766 13.0914 3.57292 13.4924 3.02344 13.7919C3.35156 13.8622 3.61328 14.0197 3.80859 14.2645C4.00651 14.5093 4.10547 14.8049 4.10547 15.1513C4.10547 15.6539 3.92188 16.0822 3.55469 16.4364C3.1875 16.7906 2.73047 16.9677 2.18359 16.9677C1.66536 16.9677 1.23568 16.8192 0.894531 16.5223C0.553385 16.2229 0.355469 15.8322 0.300781 15.3505ZM6.64844 11.12C7.20312 11.12 7.63672 11.3179 7.94922 11.7138C8.32161 12.1825 8.50781 12.9598 8.50781 14.0458C8.50781 15.1291 8.32031 15.9078 7.94531 16.3817C7.63542 16.7723 7.20312 16.9677 6.64844 16.9677C6.09115 16.9677 5.64193 16.7541 5.30078 16.327C4.95964 15.8973 4.78906 15.133 4.78906 14.0341C4.78906 12.9559 4.97656 12.1799 5.35156 11.7059C5.66146 11.3153 6.09375 11.12 6.64844 11.12ZM6.64844 12.0302C6.51562 12.0302 6.39714 12.0731 6.29297 12.1591C6.1888 12.2424 6.10807 12.3934 6.05078 12.6122C5.97526 12.896 5.9375 13.3739 5.9375 14.0458C5.9375 14.7177 5.97135 15.1799 6.03906 15.4325C6.10677 15.6825 6.19141 15.8492 6.29297 15.9325C6.39714 16.0158 6.51562 16.0575 6.64844 16.0575C6.78125 16.0575 6.89974 16.0158 7.00391 15.9325C7.10807 15.8466 7.1888 15.6942 7.24609 15.4755C7.32161 15.1942 7.35938 14.7177 7.35938 14.0458C7.35938 13.3739 7.32552 12.913 7.25781 12.663C7.1901 12.4104 7.10417 12.2424 7 12.1591C6.89844 12.0731 6.78125 12.0302 6.64844 12.0302Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7 3.16667C7 2.98986 6.93679 2.82029 6.82426 2.69526C6.71174 2.57024 6.55913 2.5 6.4 2.5L1.6 2.5C1.44087 2.5 1.28826 2.57024 1.17574 2.69526C1.06321 2.82029 1 2.98986 1 3.16667L1 3.83333C1 4.01014 1.06321 4.17971 1.17574 4.30474C1.28826 4.42976 1.44087 4.5 1.6 4.5L6.4 4.5C6.55913 4.5 6.71174 4.42976 6.82426 4.30474C6.93679 4.17971 7 4.01014 7 3.83333L7 3.16667Z"
fill="currentColor"
/>
<path
d="M8.58832 3.98579C8.65961 3.93237 8.71805 3.8601 8.75846 3.77537C8.79887 3.69064 8.82001 3.59606 8.82001 3.5C8.82001 3.40394 8.79887 3.30936 8.75846 3.22463C8.71805 3.1399 8.65961 3.06763 8.58832 3.01421L4.58754 0.0903865C4.2544 -0.152507 3.82001 0.122586 3.82001 0.576875L3.82001 6.42313C3.82001 6.87741 4.2544 7.15251 4.58754 6.90961L8.58832 3.98579Z"
fill="currentColor"
/>
</svg>
{/if}
{#if name === 'share'}
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.78 5.841a.75.75 0 0 1-1.06 0l-1.97-1.97v7.379a.75.75 0 0 1-1.5 0V3.871l-1.97 1.97a.75.75 0 0 1-1.06-1.06l3.25-3.25L8 1l.53.53 3.25 3.25a.75.75 0 0 1 0 1.061ZM2.5 9.75a.75.75 0 0 0-1.5 0V13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9.75a.75.75 0 0 0-1.5 0V13a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V9.75Z"
fill="currentColor"
/></svg
>
{/if}
{#if name === 'minimize'}
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.22 5.22a.75.75 0 0 0 0 1.06l5.252 5.252a.75.75 0 0 0 1.06 0l5.252-5.252a.75.75 0 1 0-1.06-1.06L8.001 9.94 3.28 5.22a.75.75 0 0 0-1.06 0Z"
fill="currentColor"
/></svg
>
{/if}
{#if name === 'facebook'}
<svg xmlns="http://www.w3.org/2000/svg" style="width: var(--icon_size, 16px);" viewBox="0 0 24 24"
><path
fill="currentColor"
d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95"
/></svg
>
{/if}
{#if name === 'code'}
<svg style="width: var(--icon_size, 16px);" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.424 2.023a.75.75 0 0 1 .556.904L7.48 13.42a.75.75 0 0 1-1.46-.348L8.52 2.58a.75.75 0 0 1 .904-.556ZM11.16 4.22a.75.75 0 0 1 1.06 0l3.25 3.25L16 8l-.53.53-3.25 3.25a.75.75 0 1 1-1.06-1.06L13.88 8l-2.72-2.72a.75.75 0 0 1 0-1.06ZM4.84 5.28a.75.75 0 1 0-1.06-1.06L.53 7.47 0 8l.53.53 3.25 3.25a.75.75 0 0 0 1.06-1.06L2.12 8l2.72-2.72Z"
fill="currentColor"
/></svg
>
{/if}
{#if name === 'link'}
<svg style="width: var(--icon_size, 16px);" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.929 3.132a2.078 2.078 0 1 1 2.94 2.94l-.65.648a.75.75 0 0 0 1.061 1.06l.649-.648a3.579 3.579 0 0 0-5.06-5.06L6.218 4.72a3.578 3.578 0 0 0 0 5.06.75.75 0 0 0 1.061-1.06 2.078 2.078 0 0 1 0-2.94L9.93 3.132Zm-.15 3.086a.75.75 0 0 0-1.057 1.064c.816.81.818 2.13.004 2.942l-2.654 2.647a2.08 2.08 0 0 1-2.94-2.944l.647-.647a.75.75 0 0 0-1.06-1.06l-.648.647a3.58 3.58 0 0 0 5.06 5.066l2.654-2.647a3.575 3.575 0 0 0-.007-5.068Z"
fill="currentColor"
/></svg
>
{/if}
{#if name === 'linkedin'}
<svg style="width: var(--icon_size, 16px);" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H3Zm1.102 4.297a1.195 1.195 0 1 0 0-2.39 1.195 1.195 0 0 0 0 2.39Zm1 7.516V6.234h-2v6.579h2ZM6.43 6.234h2v.881c.295-.462.943-1.084 2.148-1.084 1.438 0 2.219.953 2.219 2.766 0 .087.008.484.008.484v3.531h-2v-3.53c0-.485-.102-1.438-1.18-1.438-1.079 0-1.17 1.198-1.195 1.982v2.986h-2V6.234Z"
fill="currentColor"
/></svg
>
{/if}
{#if name === 'monitor'}
<svg
fill="currentColor"
Expand Down
4 changes: 2 additions & 2 deletions src/lib/ShowCard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
{#if display === 'list'}
<button
data-testid="play-show"
on:click|preventDefault={() => player.play_show(show)}
on:click|preventDefault={() => player.start_show(show)}
class="play-button"
>
<Icon name="play" />
Expand Down Expand Up @@ -107,7 +107,7 @@
<button
data-testid="play-show"
class:play={display === 'highlight'}
on:click|preventDefault={() => player.play_show(show)}
on:click|preventDefault={() => player.start_show(show)}
><Icon name="play" /> Play #{show.number}</button
>
</div>
Expand Down
Loading

1 comment on commit e138536

@vercel
Copy link

@vercel vercel bot commented on e138536 Dec 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

syntax-website – ./

syntax-website-syntax.vercel.app
www.syntax.fm
beta.syntax.fm
syntax.fm
syntax-website-git-main-syntax.vercel.app

Please sign in to comment.