├── .gitignore
├── .npmrc
├── .vscode
    ├── extensions.json
    └── launch.json
├── README.md
├── astro.config.mjs
├── babel.config.json
├── netlify.toml
├── package-lock.json
├── package.json
├── public
    ├── covers
    │   ├── first-impressions-of-earth.jpg
    │   └── hot-fuss.jpg
    ├── favicon.svg
    ├── logomark-light.svg
    ├── mp3
    │   ├── song1.mp3
    │   ├── song2.mp3
    │   ├── song3.mp3
    │   └── song4.mp3
    └── vynil-lp.webp
├── screenshot.png
├── src
    ├── components
    │   ├── Card.astro
    │   ├── Footer.astro
    │   ├── Header.astro
    │   ├── PlayButton.tsx
    │   ├── Player.tsx
    │   ├── Record.tsx
    │   ├── TrackList.tsx
    │   └── state.ts
    ├── env.d.ts
    ├── layouts
    │   └── Layout.astro
    ├── pages
    │   ├── album
    │   │   └── [id].astro
    │   └── index.astro
    └── styles
    │   └── transitions.css
├── tailwind.config.cjs
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | .output/
 4 | 
 5 | # dependencies
 6 | node_modules/
 7 | 
 8 | # logs
 9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | pnpm-debug.log*
13 | 
14 | 
15 | # environment variables
16 | .env
17 | .env.production
18 | 
19 | # macOS-specific files
20 | .DS_Store
21 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | # Expose Astro dependencies for `pnpm` users
2 | shamefully-hoist=true
3 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["astro-build.astro-vscode"],
3 |   "unwantedRecommendations": []
4 | }
5 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Astro View Transitions + Persistent Island Demo
 2 | 
 3 | ### 👉🏽 [Live Demo](https://astro-records.pages.dev/)
 4 | 
 5 | ![Screenshot](./screenshot.png)
 6 | 
 7 | ## 🚀 Getting Started
 8 | 
 9 | 1. Clone this repository and install dependencies with `npm install`.
10 | 2. Start the project locally with npm run dev, or deploy it to your favorite server.
11 | 3. Have fun! ✨
12 | 
13 | ## 🧞 Commands
14 | 
15 | All commands are run from the root of the project, from a terminal:
16 | 
17 | | Command                | Action                                           |
18 | | :--------------------- | :----------------------------------------------- |
19 | | `npm install`          | Installs dependencies                            |
20 | | `npm run dev`          | Starts local dev server at `localhost:3000`      |
21 | | `npm run build`        | Build your production site to `./dist/`          |
22 | | `npm run preview`      | Preview your build locally, before deploying     |
23 | | `npm run astro ...`    | Run CLI commands like `astro add`, `astro check` |
24 | | `npm run astro --help` | Get help using the Astro CLI                     |
25 | 
26 | ## 👀 Want to learn more?
27 | 
28 | Check out [Astro's documentation](https://docs.astro.build) or jump into their [Discord server](https://astro.build/chat).
29 | 
30 | You can also reach out to [Maxi on Twitter](https://twitter.com/charca).
31 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'astro/config'
 2 | import tailwind from '@astrojs/tailwind'
 3 | import preact from '@astrojs/preact'
 4 | 
 5 | import cloudflare from '@astrojs/cloudflare'
 6 | 
 7 | // https://astro.build/config
 8 | export default defineConfig({
 9 |   integrations: [tailwind(), preact()],
10 |   output: 'server',
11 |   adapter: cloudflare(),
12 | })
13 | 


--------------------------------------------------------------------------------
/babel.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": ["@babel/plugin-transform-react-jsx-source"]
3 | }
4 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [[redirects]]
2 |   from = "/*"
3 |   to = "https://astro-records.pages.dev/:splat"
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@example/basics",
 3 |   "type": "module",
 4 |   "version": "0.0.1",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "astro dev",
 8 |     "start": "astro dev",
 9 |     "build": "astro build",
10 |     "preview": "astro preview",
11 |     "astro": "astro"
12 |   },
13 |   "dependencies": {
14 |     "@astrojs/cloudflare": "^7.0.1",
15 |     "@astrojs/preact": "^3.0.0",
16 |     "@astrojs/tailwind": "^5.0.0",
17 |     "@preact/signals": "^1.2.1",
18 |     "astro": "^3.0.7",
19 |     "preact": "^10.17.1",
20 |     "tailwindcss": "^3.3.3"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/public/covers/first-impressions-of-earth.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Charca/astro-records/71516db25608f8500e6df7e2453054bb66d48a56/public/covers/first-impressions-of-earth.jpg


--------------------------------------------------------------------------------
/public/covers/hot-fuss.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Charca/astro-records/71516db25608f8500e6df7e2453054bb66d48a56/public/covers/hot-fuss.jpg


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
 2 |   <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
 3 |   <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
 4 |   <defs>
 5 |     <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
 6 |       <stop stop-color="#000"/>
 7 |       <stop offset="1" stop-color="#000" stop-opacity="0"/>
 8 |     </linearGradient>
 9 |   </defs>
10 | 	<style>
11 |     @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
12 |   </style>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/public/logomark-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="1280" height="1280" viewBox="0 0 1280 1280" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M815.039 94.6439C824.758 106.709 829.714 122.99 839.626 155.553L1056.17 866.901C976.107 825.368 889.072 795.413 797.281 779.252L656.29 302.798C653.983 295.002 646.822 289.654 638.693 289.654C630.542 289.654 623.368 295.03 621.08 302.853L481.795 779.011C389.579 795.1 302.146 825.109 221.741 866.793L439.347 155.388L439.348 155.388C449.291 122.882 454.262 106.629 463.982 94.5853C472.562 83.9531 483.723 75.6958 496.4 70.6002C510.76 64.8284 527.756 64.8284 561.749 64.8284H717.174C751.212 64.8284 768.23 64.8284 782.603 70.6123C795.292 75.7184 806.459 83.9923 815.039 94.6439Z" fill="url(#paint0_linear_709_110)"/>
 3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M840.951 900.754C805.253 931.279 734.002 952.097 651.929 952.097C551.197 952.097 466.767 920.737 444.363 878.561C436.354 902.732 434.558 930.396 434.558 948.068C434.558 948.068 429.281 1034.84 489.636 1095.2C489.636 1063.86 515.042 1038.46 546.381 1038.46C600.097 1038.46 600.036 1085.32 599.987 1123.34C599.986 1124.48 599.984 1125.61 599.984 1126.73C599.984 1184.44 635.255 1233.91 685.416 1254.77C677.924 1239.36 673.721 1222.05 673.721 1203.77C673.721 1148.73 706.034 1128.23 743.588 1104.41L743.588 1104.41C773.469 1085.46 806.668 1064.41 829.548 1022.17C841.486 1000.13 848.265 974.893 848.265 948.068C848.265 931.573 845.702 915.676 840.951 900.754Z" fill="#FF5D01"/>
 4 | <path fill-rule="evenodd" clip-rule="evenodd" d="M840.951 900.754C805.253 931.279 734.002 952.097 651.929 952.097C551.197 952.097 466.767 920.737 444.363 878.561C436.354 902.732 434.558 930.396 434.558 948.068C434.558 948.068 429.281 1034.84 489.636 1095.2C489.636 1063.86 515.042 1038.46 546.381 1038.46C600.097 1038.46 600.036 1085.32 599.987 1123.34C599.986 1124.48 599.984 1125.61 599.984 1126.73C599.984 1184.44 635.255 1233.91 685.416 1254.77C677.924 1239.36 673.721 1222.05 673.721 1203.77C673.721 1148.73 706.034 1128.23 743.588 1104.41L743.588 1104.41C773.469 1085.46 806.668 1064.41 829.548 1022.17C841.486 1000.13 848.265 974.893 848.265 948.068C848.265 931.573 845.702 915.676 840.951 900.754Z" fill="url(#paint1_linear_709_110)"/>
 5 | <defs>
 6 | <linearGradient id="paint0_linear_709_110" x1="882.997" y1="27.1132" x2="638.955" y2="866.902" gradientUnits="userSpaceOnUse">
 7 | <stop stop-color="#000014"/>
 8 | <stop offset="1" stop-color="#150426"/>
 9 | </linearGradient>
10 | <linearGradient id="paint1_linear_709_110" x1="1001.68" y1="652.45" x2="790.326" y2="1094.91" gradientUnits="userSpaceOnUse">
11 | <stop stop-color="#FF1639"/>
12 | <stop offset="1" stop-color="#FF1639" stop-opacity="0"/>
13 | </linearGradient>
14 | </defs>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/public/mp3/song1.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Charca/astro-records/71516db25608f8500e6df7e2453054bb66d48a56/public/mp3/song1.mp3


--------------------------------------------------------------------------------
/public/mp3/song2.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Charca/astro-records/71516db25608f8500e6df7e2453054bb66d48a56/public/mp3/song2.mp3


--------------------------------------------------------------------------------
/public/mp3/song3.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Charca/astro-records/71516db25608f8500e6df7e2453054bb66d48a56/public/mp3/song3.mp3


--------------------------------------------------------------------------------
/public/mp3/song4.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Charca/astro-records/71516db25608f8500e6df7e2453054bb66d48a56/public/mp3/song4.mp3


--------------------------------------------------------------------------------
/public/vynil-lp.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Charca/astro-records/71516db25608f8500e6df7e2453054bb66d48a56/public/vynil-lp.webp


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Charca/astro-records/71516db25608f8500e6df7e2453054bb66d48a56/screenshot.png


--------------------------------------------------------------------------------
/src/components/Card.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | type Props = {
 3 |   id: string
 4 |   name: string
 5 |   artist: string
 6 |   image_url: string
 7 | }
 8 | 
 9 | const { id, name, artist, image_url } = Astro.props
10 | ---
11 | 
12 | <div class="flex flex-col">
13 |   <a href={`/album/${id}`} class="text-black hover:text-pink-700 focus-visible:ring-2 focus:outline-none focus:ring-black">
14 |     <div
15 |       class="shadow-md hover:shadow-lg relative"
16 |       transition:name={`record-${id}`}
17 |     >
18 |       <img
19 |         class="card-image rounded-md relative z-10"
20 |         src={image_url}
21 |         alt={`${artist} - ${name} album cover`}
22 |         aria-hidden="true"
23 |         width="400"
24 |         height="400"
25 |       />
26 |       <img
27 |         src="/vynil-lp.webp"
28 |         alt=""
29 |         width="400"
30 |         height="400"
31 |         transition:name={`vinyl-${id}`}
32 |         class="absolute top-0 opacity-0 vynil-image opacity-0"
33 |         aria-hidden="true"
34 |       />
35 |     </div>
36 |   <div class="pt-4 font-semibold">{name}</div><span class="sr-only"> by</span>
37 |     <div class="pt-1 text-gray-700">{artist}</div>
38 |   </a>
39 | </div>
40 | 


--------------------------------------------------------------------------------
/src/components/Footer.astro:
--------------------------------------------------------------------------------
 1 | <footer
 2 |   class="container mx-auto max-w-screen-lg px-6 lg:px-0 flex items-center flex-wrap pt-4 pb-32"
 3 | >
 4 |   <div class="container flex px-3 py-8">
 5 |     <div class="w-full mx-auto flex flex-wrap">
 6 |       <div class="flex w-full lg:w-1/2">
 7 |         <div class="px-3 md:px-0">
 8 |           <h3 class="font-bold text-gray-900">About</h3>
 9 |           <p class="py-4">
10 |             This site is a demo of an Astro SPA using <strong>Astro 3</strong
11 |             > with the experimental support for the View Transitions API and persistent
12 |             islands✨
13 |           </p>
14 |           <p>
15 |             Made with ❤️ by <a
16 |               href="https://twitter.com/charca"
17 |               target="_blank"
18 |               rel="noopener noreferrer"
19 |               class="underline focus-visible:ring-2 focus:outline-none focus:ring-black">Maxi Ferreira</a
20 |             > — <a
21 |               href="https://docs.astro.build/en/guides/view-transitions/#maintaining-state"
22 |               target="_blank"
23 |               rel="noopener noreferrer"
24 |               class="underline focus-visible:ring-2 focus:outline-none focus:ring-black">Learn more</a
25 |             >.
26 |           </p>
27 |         </div>
28 |       </div>
29 |     </div>
30 |   </div>
31 | </footer>
32 | 


--------------------------------------------------------------------------------
/src/components/Header.astro:
--------------------------------------------------------------------------------
 1 | <nav
 2 |   class="w-full border-b bg-white sticky z-30"
 3 |   id="page-header"
 4 |   transition:persist
 5 |   style="view-transition-name: header;"
 6 | >
 7 |   <div
 8 |     class="w-full container mx-auto max-w-screen-lg px-6 lg:px-0 flex flex-wrap items-center mt-0 py-6"
 9 |   >
10 |     <div>
11 |       <a
12 |         class="flex items-center tracking-tight no-underline hover:no-underline focus-visible:ring-2 focus:outline-none focus:ring-black font-bold text-black text-xl"
13 |         href="/"
14 |       >
15 |         <svg
16 |           class="w-8 h-8 mr-2"
17 |           viewBox="0 0 1280 1280"
18 |           fill="none"
19 |           xmlns="http://www.w3.org/2000/svg"
20 |           aria-hidden="true"
21 |           focusable="false"
22 |         >
23 |           <path
24 |             fill-rule="evenodd"
25 |             clip-rule="evenodd"
26 |             d="M815.039 94.6439C824.758 106.709 829.714 122.99 839.626 155.553L1056.17 866.901C976.107 825.368 889.072 795.413 797.281 779.252L656.29 302.798C653.983 295.002 646.822 289.654 638.693 289.654C630.542 289.654 623.368 295.03 621.08 302.853L481.795 779.011C389.579 795.1 302.146 825.109 221.741 866.793L439.347 155.388L439.348 155.388C449.291 122.882 454.262 106.629 463.982 94.5853C472.562 83.9531 483.723 75.6958 496.4 70.6002C510.76 64.8284 527.756 64.8284 561.749 64.8284H717.174C751.212 64.8284 768.23 64.8284 782.603 70.6123C795.292 75.7184 806.459 83.9923 815.039 94.6439Z"
27 |             fill="url(#paint0_linear_709_110)"></path>
28 |           <path
29 |             fill-rule="evenodd"
30 |             clip-rule="evenodd"
31 |             d="M840.951 900.754C805.253 931.279 734.002 952.097 651.929 952.097C551.197 952.097 466.767 920.737 444.363 878.561C436.354 902.732 434.558 930.396 434.558 948.068C434.558 948.068 429.281 1034.84 489.636 1095.2C489.636 1063.86 515.042 1038.46 546.381 1038.46C600.097 1038.46 600.036 1085.32 599.987 1123.34C599.986 1124.48 599.984 1125.61 599.984 1126.73C599.984 1184.44 635.255 1233.91 685.416 1254.77C677.924 1239.36 673.721 1222.05 673.721 1203.77C673.721 1148.73 706.034 1128.23 743.588 1104.41L743.588 1104.41C773.469 1085.46 806.668 1064.41 829.548 1022.17C841.486 1000.13 848.265 974.893 848.265 948.068C848.265 931.573 845.702 915.676 840.951 900.754Z"
32 |             fill="#FF5D01"></path>
33 |           <path
34 |             fill-rule="evenodd"
35 |             clip-rule="evenodd"
36 |             d="M840.951 900.754C805.253 931.279 734.002 952.097 651.929 952.097C551.197 952.097 466.767 920.737 444.363 878.561C436.354 902.732 434.558 930.396 434.558 948.068C434.558 948.068 429.281 1034.84 489.636 1095.2C489.636 1063.86 515.042 1038.46 546.381 1038.46C600.097 1038.46 600.036 1085.32 599.987 1123.34C599.986 1124.48 599.984 1125.61 599.984 1126.73C599.984 1184.44 635.255 1233.91 685.416 1254.77C677.924 1239.36 673.721 1222.05 673.721 1203.77C673.721 1148.73 706.034 1128.23 743.588 1104.41L743.588 1104.41C773.469 1085.46 806.668 1064.41 829.548 1022.17C841.486 1000.13 848.265 974.893 848.265 948.068C848.265 931.573 845.702 915.676 840.951 900.754Z"
37 |             fill="url(#paint1_linear_709_110)"></path>
38 |           <defs>
39 |             <linearGradient
40 |               id="paint0_linear_709_110"
41 |               x1="882.997"
42 |               y1="27.1132"
43 |               x2="638.955"
44 |               y2="866.902"
45 |               gradientUnits="userSpaceOnUse"
46 |             >
47 |               <stop stop-color="#000014"></stop>
48 |               <stop offset="1" stop-color="#150426"></stop>
49 |             </linearGradient>
50 |             <linearGradient
51 |               id="paint1_linear_709_110"
52 |               x1="1001.68"
53 |               y1="652.45"
54 |               x2="790.326"
55 |               y2="1094.91"
56 |               gradientUnits="userSpaceOnUse"
57 |             >
58 |               <stop stop-color="#FF1639"></stop>
59 |               <stop offset="1" stop-color="#FF1639" stop-opacity="0"></stop>
60 |             </linearGradient>
61 |           </defs>
62 |         </svg>
63 | 
64 |          Music Library
65 |       </a>
66 |     </div>
67 |   </div>
68 | </nav>
69 | 


--------------------------------------------------------------------------------
/src/components/PlayButton.tsx:
--------------------------------------------------------------------------------
 1 | import { currentTrack, isPlaying, type Track } from './state'
 2 | 
 3 | type Props = {
 4 |   tracks: Track[]
 5 |   albumId: string
 6 |   albumName: string
 7 |   artist: string
 8 |   imageUrl: string
 9 | }
10 | 
11 | export default function PlayButton({
12 |   tracks,
13 |   albumId,
14 |   albumName,
15 |   artist,
16 |   imageUrl,
17 | }: Props) {
18 |   return (
19 |     <button
20 |       type="button"
21 |       class="text-pink-700 bg-gray-100 hover:bg-gray-200 focus-visible:ring-2 focus:outline-none focus:ring-black font-medium rounded-lg text-lg px-10 py-3 text-center inline-flex items-center dark:focus:ring-black mr-4"
22 |       onClick={() => {
23 |         currentTrack.value = {
24 |           ...tracks[0],
25 |           albumId,
26 |           albumName,
27 |           artist,
28 |           imageUrl,
29 |         }
30 | 
31 |         isPlaying.value = true
32 |       }}
33 |     >
34 |       <svg
35 |         class="w-6 h-6 mr-2 -ml-1 text-pink-700"
36 |         fill="currentColor"
37 |         viewBox="0 0 20 20"
38 |         xmlns="http://www.w3.org/2000/svg"
39 |         aria-hidden="true"
40 |       >
41 |         <path
42 |           fill-rule="evenodd"
43 |           d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
44 |           clip-rule="evenodd"
45 |         />
46 |       </svg>
47 |       Play
48 |     </button>
49 |   )
50 | }
51 | 


--------------------------------------------------------------------------------
/src/components/Player.tsx:
--------------------------------------------------------------------------------
  1 | import { currentTrack, isPlaying } from './state'
  2 | 
  3 | import { useEffect, useState, useRef } from 'preact/hooks'
  4 | 
  5 | const PlayIcon = (
  6 |   <svg
  7 |     xmlns="http://www.w3.org/2000/svg"
  8 |     viewBox="0 0 24 24"
  9 |     fill="currentColor"
 10 |     class="w-10 h-10 sm:w-14 sm:h-14"
 11 |     aria-hidden="true"
 12 |     focusable="false"
 13 |   >
 14 |     <path
 15 |       fill-rule="evenodd"
 16 |       d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z"
 17 |       clip-rule="evenodd"
 18 |     />
 19 |   </svg>
 20 | )
 21 | 
 22 | const PauseIcon = (
 23 |   <svg
 24 |     xmlns="http://www.w3.org/2000/svg"
 25 |     viewBox="0 0 24 24"
 26 |     fill="currentColor"
 27 |     class="w-10 h-10 sm:w-14 sm:h-14"
 28 |     aria-hidden="true"
 29 |     focusable="false"
 30 |   >
 31 |     <path
 32 |       fill-rule="evenodd"
 33 |       d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0A.75.75 0 0115 4.5h1.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H15a.75.75 0 01-.75-.75V5.25z"
 34 |       clip-rule="evenodd"
 35 |     />
 36 |   </svg>
 37 | )
 38 | 
 39 | // This app doesn't have real songs, it only has a few songs
 40 | // that we will play over and over as the user uses the app.
 41 | const MAX_SONGS = 4
 42 | 
 43 | export default function Player() {
 44 |   const audioPlayer = useRef<HTMLAudioElement>(null)
 45 |   const progressRef = useRef(null)
 46 |   const [songIndex, setSongIndex] = useState(4)
 47 |   const [progress, setProgress] = useState(0)
 48 | 
 49 |   if (currentTrack.value === null) {
 50 |     return
 51 |   }
 52 | 
 53 |   const { title, artist, albumName, imageUrl } = currentTrack.value
 54 | 
 55 |   function whilePlaying() {
 56 |     if (audioPlayer.current.duration) {
 57 |       const percentage =
 58 |         (audioPlayer.current.currentTime * 100) / audioPlayer.current.duration
 59 |       setProgress(percentage)
 60 |     }
 61 |     progressRef.current = requestAnimationFrame(whilePlaying)
 62 |   }
 63 | 
 64 |   useEffect(() => {
 65 |     const newIndex = (songIndex % MAX_SONGS) + 1
 66 |     audioPlayer.current.src = `/mp3/song${newIndex}.mp3`
 67 |     audioPlayer.current.currentTime = 0
 68 |     audioPlayer.current.play()
 69 |     setSongIndex(newIndex)
 70 |   }, [title])
 71 | 
 72 |   useEffect(() => {
 73 |     if (isPlaying.value) {
 74 |       audioPlayer.current?.play()
 75 |       progressRef.current = requestAnimationFrame(whilePlaying)
 76 |     } else {
 77 |       audioPlayer.current?.pause()
 78 |       cancelAnimationFrame(progressRef.current)
 79 |     }
 80 |   }, [isPlaying.value])
 81 | 
 82 |   useEffect(() => {
 83 |     if (progress >= 99.99) {
 84 |       isPlaying.value = false
 85 |       setProgress(0)
 86 |     }
 87 |   }, [progress])
 88 | 
 89 |   return (
 90 |     <div
 91 |       class="fixed bottom-0 left-0 right-0 bg-gray-100 z-10"
 92 |       role="region"
 93 |       aria-labelledby="audio-player-heading"
 94 |       style={{ viewTransitionName: 'player' }}
 95 |     >
 96 |       <h2 id="audio-player-heading" class="sr-only">
 97 |         Audio player
 98 |       </h2>
 99 |       <div class="flex-1 bg-gray-200 h-1.5 dark:bg-gray-700">
100 |         <div
101 |           aria-orientation="horizontal"
102 |           role="slider"
103 |           aria-label="audio timeline"
104 |           aria-valuemin={0}
105 |           aria-valuemax={
106 |             audioPlayer.current && audioPlayer.current.duration
107 |               ? Math.floor(audioPlayer.current.duration)
108 |               : 0
109 |           }
110 |           aria-valuenow={
111 |             audioPlayer.current && audioPlayer.current.currentTime
112 |               ? Math.floor(audioPlayer.current.currentTime)
113 |               : 0
114 |           }
115 |           aria-valuetext={`${
116 |             audioPlayer.current && audioPlayer.current.currentTime
117 |               ? Math.floor(audioPlayer.current.currentTime)
118 |               : 0
119 |           } seconds`}
120 |           class="bg-pink-700 h-1.5"
121 |           style={`width: ${progress}%`}
122 |         ></div>
123 |       </div>
124 |       <div class="container mx-auto max-w-screen-lg px-3 py-2 sm:px-6 sm:py-4 flex items-center gap-5">
125 |         <img
126 |           src={imageUrl}
127 |           alt={`${artist} - ${albumName} album cover`}
128 |           aria-hidden="true"
129 |           width="60"
130 |           height="60"
131 |           class="block rounded-md"
132 |         />
133 |         <div class="flex-1 min-w-0">
134 |           <div class="text-xl text-black font-medium overflow-hidden text-ellipsis whitespace-nowrap">
135 |             {title}
136 |           </div>
137 |           <div class="text-xl text-gray-700 overflow-hidden text-ellipsis whitespace-nowrap">
138 |             {artist}
139 |           </div>
140 |         </div>
141 |         <audio ref={audioPlayer} src="/mp3/song1.mp3" />
142 |         <div class="flex gap-6 items-center text-black">
143 |           <button
144 |             type="button"
145 |             disabled
146 |             class="opacity-50 focus-visible:ring-2 focus:outline-none focus:ring-black"
147 |           >
148 |             <svg
149 |               xmlns="http://www.w3.org/2000/svg"
150 |               viewBox="0 0 24 24"
151 |               fill="currentColor"
152 |               class="w-10 h-10 hidden sm:block"
153 |               aria-hidden="true"
154 |               focusable="false"
155 |             >
156 |               <path d="M9.195 18.44c1.25.713 2.805-.19 2.805-1.629v-2.34l6.945 3.968c1.25.714 2.805-.188 2.805-1.628V8.688c0-1.44-1.555-2.342-2.805-1.628L12 11.03v-2.34c0-1.44-1.555-2.343-2.805-1.629l-7.108 4.062c-1.26.72-1.26 2.536 0 3.256l7.108 4.061z" />
157 |             </svg>
158 |             <span class="sr-only">Previous track</span>
159 |           </button>
160 | 
161 |           <button
162 |             type="button"
163 |             class="focus-visible:ring-2 focus:outline-none focus:ring-black"
164 |             onClick={() => (isPlaying.value = !isPlaying.value)}
165 |           >
166 |             {isPlaying.value ? PauseIcon : PlayIcon}
167 |             <span class="sr-only">{isPlaying.value ? 'Pause' : 'Play'}</span>
168 |           </button>
169 | 
170 |           <button
171 |             type="button"
172 |             disabled
173 |             class="opacity-50 focus-visible:ring-2 focus:outline-none focus:ring-black"
174 |           >
175 |             <svg
176 |               xmlns="http://www.w3.org/2000/svg"
177 |               viewBox="0 0 24 24"
178 |               fill="currentColor"
179 |               class="w-10 h-10 hidden sm:block"
180 |               aria-hidden="true"
181 |               focusable="false"
182 |             >
183 |               <path d="M5.055 7.06c-1.25-.714-2.805.189-2.805 1.628v8.123c0 1.44 1.555 2.342 2.805 1.628L12 14.471v2.34c0 1.44 1.555 2.342 2.805 1.628l7.108-4.061c1.26-.72 1.26-2.536 0-3.256L14.805 7.06C13.555 6.346 12 7.25 12 8.688v2.34L5.055 7.06z" />
184 |             </svg>
185 |             <span class="sr-only">Next track</span>
186 |           </button>
187 |         </div>
188 |       </div>
189 |     </div>
190 |   )
191 | }
192 | 


--------------------------------------------------------------------------------
/src/components/Record.tsx:
--------------------------------------------------------------------------------
 1 | import { isPlaying, currentTrack } from './state'
 2 | 
 3 | export default function Record({
 4 |   albumId,
 5 |   artist,
 6 |   title,
 7 |   imageUrl,
 8 | }: {
 9 |   albumId: string
10 |   artist: string
11 |   title: string
12 |   imageUrl: string
13 | }) {
14 |   const isPlayingCurrentRecord =
15 |     isPlaying.value && currentTrack.value.albumId === albumId
16 |   const className =
17 |     'absolute top-0 opacity-0 vynil-image vynil-animation-in' +
18 |     (isPlayingCurrentRecord ? '-spinning' : '')
19 | 
20 |   return (
21 |     <div class="relative shadow-xl mr-32 w-72 md:w-auto">
22 |       <img
23 |         src={imageUrl}
24 |         alt={`${artist} - ${title} album cover`}
25 |         aria-hidden="true"
26 |         width="400"
27 |         height="400"
28 |         class="block rounded-md tag-album-cover relative z-10 bg-white"
29 |         style={`view-transition-name: record-${albumId};`}
30 |       />
31 |       <img
32 |         src="/vynil-lp.webp"
33 |         alt=""
34 |         width="400"
35 |         height="400"
36 |         class={className}
37 |         style={`view-transition-name: vinyl-${albumId};`}
38 |         aria-hidden="true"
39 |       />
40 |     </div>
41 |   )
42 | }
43 | 


--------------------------------------------------------------------------------
/src/components/TrackList.tsx:
--------------------------------------------------------------------------------
  1 | import type { JSX } from 'preact/jsx-runtime'
  2 | import { currentTrack, isPlaying, type Track } from './state'
  3 | 
  4 | type Props = {
  5 |   tracks: Track[]
  6 |   albumName: string
  7 |   albumId: string
  8 |   artist: string
  9 |   imageUrl: string
 10 | }
 11 | 
 12 | const playIcon = (
 13 |   <svg
 14 |     class="w-6 h-6 ml-1 text-pink-600"
 15 |     fill="currentColor"
 16 |     viewBox="0 0 20 20"
 17 |     xmlns="http://www.w3.org/2000/svg"
 18 |     aria-hidden="true"
 19 |     focusable="false"
 20 |   >
 21 |     <path
 22 |       fill-rule="evenodd"
 23 |       d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
 24 |       clip-rule="evenodd"
 25 |     />
 26 |   </svg>
 27 | )
 28 | 
 29 | const pauseIcon = (
 30 |   <svg
 31 |     xmlns="http://www.w3.org/2000/svg"
 32 |     viewBox="0 0 24 24"
 33 |     fill="currentColor"
 34 |     class="w-6 h-6 ml-1 text-pink-600"
 35 |     aria-hidden="true"
 36 |     focusable="false"
 37 |   >
 38 |     <path
 39 |       fill-rule="evenodd"
 40 |       d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM9 8.25a.75.75 0 00-.75.75v6c0 .414.336.75.75.75h.75a.75.75 0 00.75-.75V9a.75.75 0 00-.75-.75H9zm5.25 0a.75.75 0 00-.75.75v6c0 .414.336.75.75.75H15a.75.75 0 00.75-.75V9a.75.75 0 00-.75-.75h-.75z"
 41 |       clip-rule="evenodd"
 42 |     />
 43 |   </svg>
 44 | )
 45 | 
 46 | function renderIcon(icon: JSX.Element, position: number) {
 47 |   return (
 48 |     <span>
 49 |       {icon}
 50 |       <span class="sr-only">{position}</span>
 51 |     </span>
 52 |   )
 53 | }
 54 | 
 55 | export default function TrackList({
 56 |   tracks,
 57 |   albumId,
 58 |   albumName,
 59 |   artist,
 60 |   imageUrl,
 61 | }: Props) {
 62 |   return (
 63 |     <ul class="text-xl" aria-label="Tracklist">
 64 |       {tracks.map((track, index) => {
 65 |         const isCurrentTrack = track.id == currentTrack.value?.id
 66 | 
 67 |         return (
 68 |           <li class="first:border-t border-b">
 69 |             <button
 70 |               type="button"
 71 |               class="hover:bg-gray-50 focus-visible:ring-2 focus:outline-none focus:ring-black cursor-pointer px-6 py-4 flex basis grow w-full items-center"
 72 |               aria-current={isCurrentTrack}
 73 |               onClick={() => {
 74 |                 currentTrack.value = {
 75 |                   ...track,
 76 |                   albumName,
 77 |                   albumId,
 78 |                   artist,
 79 |                   imageUrl,
 80 |                 }
 81 | 
 82 |                 isPlaying.value = isCurrentTrack ? !isPlaying.value : true
 83 |               }}
 84 |             >
 85 |               <span class="text-gray-500 w-8 mr-2">
 86 |                 {isCurrentTrack && !isPlaying.value
 87 |                   ? renderIcon(pauseIcon, track.position)
 88 |                   : isCurrentTrack && isPlaying.value
 89 |                   ? renderIcon(playIcon, track.position)
 90 |                   : track.position}
 91 |               </span>
 92 |               <span class="sr-only"> - </span>
 93 |               <span class="font-medium">{track.title}</span>
 94 |               <span class="sr-only"> - </span>
 95 |               <span class="text-gray-500 ml-auto">{track.length}</span>
 96 | 
 97 |               <span class="sr-only">
 98 |                 (press to{' '}
 99 |                 {isCurrentTrack && isPlaying.value ? 'pause)' : 'play)'}
100 |               </span>
101 |             </button>
102 |           </li>
103 |         )
104 |       })}
105 |     </ul>
106 |   )
107 | }
108 | 


--------------------------------------------------------------------------------
/src/components/state.ts:
--------------------------------------------------------------------------------
 1 | import { signal } from "@preact/signals";
 2 | 
 3 | export type Track = {
 4 |   id: string;
 5 |   title: string;
 6 |   position: number;
 7 |   length: string;
 8 | };
 9 | 
10 | export type PlayerTrack = Track & {
11 |   albumId: string;
12 |   albumName: string;
13 |   artist: string;
14 |   imageUrl: string;
15 | };
16 | 
17 | export const isPlaying = signal(false);
18 | export const currentTrack = signal<PlayerTrack | null>(null);
19 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="astro/client" />
2 | 


--------------------------------------------------------------------------------
/src/layouts/Layout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { ViewTransitions } from 'astro:transitions'
 3 | import Footer from '../components/Footer.astro'
 4 | import Header from '../components/Header.astro'
 5 | import Player from '../components/Player'
 6 | import '../styles/transitions.css'
 7 | 
 8 | export interface Props {
 9 |   title: string
10 | }
11 | 
12 | const { title } = Astro.props
13 | ---
14 | 
15 | <!doctype html>
16 | <html lang="en">
17 |   <head>
18 |     <meta charset="UTF-8" />
19 |     <meta name="viewport" content="width=device-width" />
20 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
21 |     <meta name="generator" content={Astro.generator} />
22 |     <meta
23 |       name="description"
24 |       content="This site is a demo of an Astro SPA using Astro 3 with the experimental support for the View Transitions API and persistent islands."
25 |     />
26 |     <title>{title}</title>
27 |     <ViewTransitions />
28 |   </head>
29 |   <body
30 |     class="bg-white text-gray-600 work-sans leading-normal text-base tracking-normal overflow-hidden"
31 |   >
32 |     <div class="wrapper flex flex-col h-screen">
33 |       <Header />
34 |       <div class="main-content flex-1 overflow-auto">
35 |         <slot />
36 |         <Footer />
37 |       </div>
38 |       <div id="audio-player">
39 |         <Player client:load transition:persist="player" />
40 |       </div>
41 |     </div>
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/pages/album/[id].astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '../../layouts/Layout.astro'
 3 | import PlayButton from '../../components/PlayButton'
 4 | import TrackList from '../../components/TrackList'
 5 | import Record from '../../components/Record'
 6 | 
 7 | const { id } = Astro.params
 8 | 
 9 | const response = await fetch(
10 |   `https://music-api.charca.workers.dev/albums/${id}`
11 | )
12 | const album = await response.json()
13 | ---
14 | 
15 | <Layout title={`${album.strAlbum} by ${album.strArtist} - Astro Records`}>
16 |   <section aria-labelledby="page-heading">
17 |     <div
18 |       class="container mx-auto max-w-screen-lg px-6 lg:px-0 flex flex-col items-start md:items-end md:flex-row pt-8 pb-12"
19 |     >
20 |       <Record
21 |         client:visible
22 |         artist={album.strArtist}
23 |         albumId={album.idAlbum}
24 |         title={album.strAlbum}
25 |         imageUrl={album.strAlbumThumb}
26 |       />
27 |       <div class="flex-1 flex flex-col justify-end pt-8">
28 |         <h1 id="page-heading">
29 |           <div class="text-5xl font-bold tracking-tight text-gray-900">{album.strAlbum}</div>
30 |           <div class="mt-3 text-3xl">{album.strArtist}</div>
31 |         </h1>
32 |         <div class="mt-2 text-lg">{album.strGenre} — {album.intYearReleased}</div>
33 |         <div class="mt-3 flex">
34 |           <PlayButton
35 |             tracks={album.tracks}
36 |             albumId={album.idAlbum}
37 |             albumName={album.strAlbum}
38 |             artist={album.strArtist}
39 |             imageUrl={album.strAlbumThumb}
40 |             client:load
41 |           />
42 |           <button
43 |             disabled
44 |             type="button"
45 |             class="opacity-50 text-pink-600 bg-gray-100 font-medium rounded-lg text-lg px-10 py-3 text-center inline-flex items-center dark:focus:ring-gray-500 mr-4"
46 |           >
47 |             <svg
48 |               class="w-6 h-6 mr-2 -ml-1 text-pink-600"
49 |               fill="currentColor"
50 |               viewBox="0 0 20 20"
51 |               xmlns="http://www.w3.org/2000/svg"
52 |               aria-hidden="true"
53 |               focusable="false"
54 |               ><path
55 |                 fill-rule="evenodd"
56 |                 d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
57 |                 clip-rule="evenodd"/>
58 |             </svg>
59 | 
60 |             Shuffle
61 |           </button>
62 |         </div>
63 |       </div>
64 |     </div>
65 | 
66 |     <div class="container mx-auto max-w-screen-lg mb-10">
67 |       <TrackList
68 |         tracks={album.tracks}
69 |         albumId={album.idAlbum}
70 |         albumName={album.strAlbum}
71 |         artist={album.strArtist}
72 |         imageUrl={album.strAlbumThumb}
73 |         client:visible
74 |       />
75 |     </div>
76 |   </section>
77 | </Layout>
78 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Card from '../components/Card.astro'
 3 | import Layout from '../layouts/Layout.astro'
 4 | 
 5 | const response = await fetch('https://music-api.charca.workers.dev/albums')
 6 | const albums = await response.json()
 7 | ---
 8 | 
 9 | <Layout title="Astro Records">
10 |   <section class="py-8">
11 |     <div
12 |       class="container mx-auto max-w-screen-lg px-6 lg:px-0 flex items-center flex-wrap pt-4 pb-12"
13 |     >
14 |       <h1 class="font-bold text-3xl text-black tracking-tight mb-12">
15 |         Recently Played <span class="sr-only">Albums</span>
16 |       </h1>
17 | 
18 |       <div class="w-full grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
19 |         {
20 |           albums.results.map((album) => (
21 |             <Card
22 |               id={album.idAlbum}
23 |               name={album.strAlbum}
24 |               artist={album.strArtist}
25 |               image_url={album.strAlbumThumb}
26 |             />
27 |           ))
28 |         }
29 |       </div>
30 |     </div>
31 |   </section>
32 | </Layout>
33 | 


--------------------------------------------------------------------------------
/src/styles/transitions.css:
--------------------------------------------------------------------------------
 1 | .vynil-animation-in {
 2 |   animation: appear 600ms ease-in-out 300ms forwards;
 3 | }
 4 | .vynil-animation-in-spinning {
 5 |   animation: appear 600ms ease-in-out 300ms forwards, spin 5s linear infinite;
 6 | }
 7 | .vynil-animation-out {
 8 |   animation: disappear 300ms ease-in-out forwards;
 9 | }
10 | 
11 | @keyframes spin {
12 |   from {
13 |     transform: rotate(0deg);
14 |   }
15 |   to {
16 |     transform: rotate(360deg);
17 |   }
18 | }
19 | @keyframes appear {
20 |   0% {
21 |     left: 0;
22 |     opacity: 0;
23 |   }
24 |   1% {
25 |     opacity: 1;
26 |   }
27 |   100% {
28 |     left: 24%;
29 |     opacity: 1;
30 |   }
31 | }
32 | 
33 | @keyframes disappear {
34 |   0% {
35 |     left: 24%;
36 |     opacity: 1;
37 |   }
38 |   99% {
39 |     opacity: 1;
40 |   }
41 |   100% {
42 |     left: 0;
43 |     opacity: 0;
44 |   }
45 | }
46 | 
47 | ::view-transition-group(header),
48 | ::view-transition-group(player) {
49 |   z-index: 10;
50 | }
51 | 
52 | ::view-transition-old(header),
53 | ::view-transition-new(header),
54 | ::view-transition-old(player),
55 | ::view-transition-new(player) {
56 |   animation: none;
57 |   mix-blend-mode: normal;
58 | }
59 | 


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 4 |   theme: {
 5 |     extend: {
 6 |       animation: {
 7 |         'spin-slow': 'spin 5s linear infinite',
 8 |       },
 9 |     },
10 |   },
11 |   plugins: [],
12 | }
13 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "astro/tsconfigs/base",
3 |   "compilerOptions": {
4 |     "jsx": "react-jsx",
5 |     "jsxImportSource": "preact"
6 |   }
7 | }


--------------------------------------------------------------------------------