187 |
232 | }
233 |
234 | interface File {
235 | name: string
236 | contents: Uint8Array
237 | }
238 |
239 | const FileViewer = ({ name, contents }: { name: string, contents: Uint8Array }) => {
240 | const ref = useRef
188 | {status === "setup"
189 | ?
198 |
199 | {track.title}
200 |
202 | {/* {track.artist}
201 | {track.album}
*/}
203 | {formatDuration(track.duration)}
204 |
205 |
208 |
211 |
212 |
271 |
273 | }
274 |
275 | const SourceView = ({ isOpen, setIsOpen, track }: { isOpen: boolean, setIsOpen: (b: boolean) => void, track: Track }) => {
276 | const [files, setFiles] = useState
364 | Status
365 |
366 |
367 |
368 |
369 | {searchOpen
370 | ?
392 | {/* Temporary buttons for testing. */}
393 |
394 |
395 |
371 |
387 | : }
391 |
553 |
564 | }
565 |
566 | interface Album {
567 | url: string
568 | title: string
569 | artist: string
570 | cover: string
571 | tracks: string[]
572 | }
573 |
574 | const USE_BACKEND = process.env.NODE_ENV === "production"
575 |
576 | const HomeView = ({ query, setAlbum }: { query?: string, setAlbum: (a: Album) => void }) => {
577 | const findAlbums = async () => {
578 | if (USE_BACKEND) {
579 | // TODO: Local caching.
580 | const url = 'https://api.github.com/search/repositories?q=topic:alternator-album' + (query ? "%20" + query : "")
581 | const response = await fetch(url, {
582 | headers: { Accept: "application/vnd.github.v3+json" }
583 | })
584 | const results = await response.json()
585 | console.log("Found:", results.items.map((result: any) => result.full_name))
586 | const albums = []
587 | // TODO: Use `Promise.all`.
588 | for (const { full_name, default_branch } of results.items) {
589 | const url = `https://raw.githubusercontent.com/${full_name}/${default_branch}`
590 | const response = await fetch(`${url}/album.json`)
591 | const info = await response.json()
592 | console.log(info)
593 | albums.push({ url, ...info })
594 | }
595 | setAlbums(albums)
596 | } else {
597 | const albums = [
598 | {
599 | url: "https://raw.githubusercontent.com/ijc8/example-album/main",
600 | title: "Example Album",
601 | artist: "ijc8",
602 | cover: "cover.svg",
603 | tracks: [],
604 | },
605 | {
606 | url: "http://localhost:3000/demo-reel/",
607 | title: "Offline Mode",
608 | artist: "ijc8",
609 | cover: "album_art.svg",
610 | tracks: [],
611 | },
612 | ].filter(a => query === undefined || a.title.toLowerCase().includes(query.toLowerCase()))
613 | setAlbums(albums)
614 | }
615 | }
616 |
617 | useEffect(() => {
618 | findAlbums()
619 | }, [query])
620 |
621 | const [albums, setAlbums] = useState {
556 | mouseMove(e)
557 | document.addEventListener("mousemove", mouseMove)
558 | document.addEventListener("mouseup", mouseUp)
559 | }}>
560 |
561 |
562 |
563 |
624 |
638 | }
639 |
640 | const AlbumView = ({ state, setState, album, tracks }: {
641 | state: PlayState | null, setState: (s: PlayState) => void, album: Album, tracks?: Track[]
642 | }) => {
643 | return <>
644 | {query ? <>Search results for {query} : "Home"}
625 |
626 | {albums
627 | ? albums.map(album =>
628 |
637 |
629 |
)
635 | : "Loading"}
636 | setAlbum(album)}>
630 | 
631 |
632 | {album.title}
633 | {album.artist}
634 |
645 |
653 |
646 |
647 |
648 |
649 |
652 | {album.title}
650 |{album.artist}
651 |
654 |
677 |
678 | }
679 |
680 | const About = ({ isOpen, dismiss }: { isOpen: boolean, dismiss: () => void }) => {
681 | const linkClass = "underline text-cyan-400 hover:text-cyan-500"
682 | return
714 | }
715 |
716 | const App = () => {
717 | const [state, _setState] = useState
655 |
676 |
656 |
662 |
663 | {tracks === undefined
664 | ? #
657 | Title
658 | {/* Album
*/}
659 | Duration
660 | {/* View Source / Mobile Menu */}
661 |
769 | {
784 | setState({
785 | track: state!.track,
786 | status: playing ? "play" : "pause",
787 | })
788 | }} reset={async () => {
789 | _setState({ track: state!.track, status: "setup" })
790 | // TODO: Consistent method of resetting.
791 | let end
792 | if (state!.track.url.split("/").pop()!.startsWith("pd")) {
793 | end = (await play(state!.track)).end
794 | } else {
795 | end = (await reset()).end
796 | }
797 | _setState({ track: state!.track, status: "play" })
798 | await end
799 | _setState(null)
800 | }} skip={() => {
801 | if (!tracks || !state) return
802 | const index = tracks.indexOf(state.track)
803 | if (index + 1 < tracks.length) {
804 | const track = tracks[(tracks.indexOf(state.track) + 1) % tracks.length]
805 | setState({
806 | track,
807 | status: "pause",
808 | })
809 | } else {
810 | stop()
811 | _setState(null)
812 | }
813 | }} />
814 | setShowAbout(false)} />
815 |
816 | }
817 |
818 | export default App
819 |
--------------------------------------------------------------------------------
/player/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/player/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | ReactDOM.render(
8 |
770 | { window.history.pushState(null, "", window.location.pathname); setAlbum(undefined); setQuery(undefined) }}
773 | search={(q: string) => { setAlbum(undefined); setQuery(q) }}
774 | fetchAlbum={fetchAlbum}
775 | about={() => setShowAbout(true)}
776 | />
777 |
778 | {album === undefined
779 | ? fetchAlbum(album.url)} />
780 | :
782 |
783 |