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 |
--------------------------------------------------------------------------------
/templates/pd/main.js:
--------------------------------------------------------------------------------
1 | // Alternator:
2 | var Module = {
3 | locateFile(filename) {
4 | return self.path + filename
5 | }
6 | }
7 |
8 | async function setup(sampleRate) {
9 | await new Promise(resolve => (Module.onRuntimeInitialized = resolve))
10 | Module._setup(sampleRate)
11 | }
12 |
13 | function process(output) {
14 | const buffer = Module._malloc(output.length * output.BYTES_PER_ELEMENT)
15 | Module.HEAPF32.set(output, buffer / output.BYTES_PER_ELEMENT)
16 | const out = Module._process(buffer, output.length)
17 | output.set(new Float32Array(Module.HEAP32.buffer, buffer, output.length))
18 | Module._free(buffer)
19 | return out
20 | }
21 | // Preloader:
22 | var Module = typeof Module !== 'undefined' ? Module : {};
23 |
24 | if (!Module.expectedDataFileDownloads) {
25 | Module.expectedDataFileDownloads = 0;
26 | }
27 | Module.expectedDataFileDownloads++;
28 | (function() {
29 | var loadPackage = function(metadata) {
30 |
31 | var PACKAGE_PATH = '';
32 | if (typeof window === 'object') {
33 | PACKAGE_PATH = window['encodeURIComponent'](window.location.pathname.toString().substring(0, window.location.pathname.toString().lastIndexOf('/')) + '/');
34 | } else if (typeof process === 'undefined' && typeof location !== 'undefined') {
35 | // web worker
36 | PACKAGE_PATH = encodeURIComponent(location.pathname.toString().substring(0, location.pathname.toString().lastIndexOf('/')) + '/');
37 | }
38 | var PACKAGE_NAME = 'bundle.data';
39 | var REMOTE_PACKAGE_BASE = 'bundle.data';
40 | if (typeof Module['locateFilePackage'] === 'function' && !Module['locateFile']) {
41 | Module['locateFile'] = Module['locateFilePackage'];
42 | err('warning: you defined Module.locateFilePackage, that has been renamed to Module.locateFile (using your locateFilePackage for now)');
43 | }
44 | var REMOTE_PACKAGE_NAME = Module['locateFile'] ? Module['locateFile'](REMOTE_PACKAGE_BASE, '') : REMOTE_PACKAGE_BASE;
45 |
46 | var REMOTE_PACKAGE_SIZE = metadata['remote_package_size'];
47 | var PACKAGE_UUID = metadata['package_uuid'];
48 |
49 | function fetchRemotePackage(packageName, packageSize, callback, errback) {
50 |
51 | if (typeof process === 'object' && typeof process.versions === 'object' && typeof process.versions.node === 'string') {
52 | require('fs').readFile(packageName, function(err, contents) {
53 | if (err) {
54 | errback(err);
55 | } else {
56 | callback(contents.buffer);
57 | }
58 | });
59 | return;
60 | }
61 |
62 | var xhr = new XMLHttpRequest();
63 | xhr.open('GET', packageName, true);
64 | xhr.responseType = 'arraybuffer';
65 | xhr.onprogress = function(event) {
66 | var url = packageName;
67 | var size = packageSize;
68 | if (event.total) size = event.total;
69 | if (event.loaded) {
70 | if (!xhr.addedTotal) {
71 | xhr.addedTotal = true;
72 | if (!Module.dataFileDownloads) Module.dataFileDownloads = {};
73 | Module.dataFileDownloads[url] = {
74 | loaded: event.loaded,
75 | total: size
76 | };
77 | } else {
78 | Module.dataFileDownloads[url].loaded = event.loaded;
79 | }
80 | var total = 0;
81 | var loaded = 0;
82 | var num = 0;
83 | for (var download in Module.dataFileDownloads) {
84 | var data = Module.dataFileDownloads[download];
85 | total += data.total;
86 | loaded += data.loaded;
87 | num++;
88 | }
89 | total = Math.ceil(total * Module.expectedDataFileDownloads/num);
90 | if (Module['setStatus']) Module['setStatus']('Downloading data... (' + loaded + '/' + total + ')');
91 | } else if (!Module.dataFileDownloads) {
92 | if (Module['setStatus']) Module['setStatus']('Downloading data...');
93 | }
94 | };
95 | xhr.onerror = function(event) {
96 | throw new Error("NetworkError for: " + packageName);
97 | }
98 | xhr.onload = function(event) {
99 | if (xhr.status == 200 || xhr.status == 304 || xhr.status == 206 || (xhr.status == 0 && xhr.response)) { // file URLs can return 0
100 | var packageData = xhr.response;
101 | callback(packageData);
102 | } else {
103 | throw new Error(xhr.statusText + " : " + xhr.responseURL);
104 | }
105 | };
106 | xhr.send(null);
107 | };
108 |
109 | function handleError(error) {
110 | console.error('package error:', error);
111 | };
112 |
113 | var fetchedCallback = null;
114 | var fetched = Module['getPreloadedPackage'] ? Module['getPreloadedPackage'](REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE) : null;
115 |
116 | if (!fetched) fetchRemotePackage(REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE, function(data) {
117 | if (fetchedCallback) {
118 | fetchedCallback(data);
119 | fetchedCallback = null;
120 | } else {
121 | fetched = data;
122 | }
123 | }, handleError);
124 |
125 | function runWithFS() {
126 |
127 | function assert(check, msg) {
128 | if (!check) throw msg + new Error().stack;
129 | }
130 | Module['FS_createPath']("/", "assets", true, true);
131 |
132 | /** @constructor */
133 | function DataRequest(start, end, audio) {
134 | this.start = start;
135 | this.end = end;
136 | this.audio = audio;
137 | }
138 | DataRequest.prototype = {
139 | requests: {},
140 | open: function(mode, name) {
141 | this.name = name;
142 | this.requests[name] = this;
143 | Module['addRunDependency']('fp ' + this.name);
144 | },
145 | send: function() {},
146 | onload: function() {
147 | var byteArray = this.byteArray.subarray(this.start, this.end);
148 | this.finish(byteArray);
149 | },
150 | finish: function(byteArray) {
151 | var that = this;
152 |
153 | Module['FS_createDataFile'](this.name, null, byteArray, true, true, true); // canOwn this data in the filesystem, it is a slide into the heap that will never change
154 | Module['removeRunDependency']('fp ' + that.name);
155 |
156 | this.requests[this.name] = null;
157 | }
158 | };
159 |
160 | var files = metadata['files'];
161 | for (var i = 0; i < files.length; ++i) {
162 | new DataRequest(files[i]['start'], files[i]['end'], files[i]['audio'] || 0).open('GET', files[i]['filename']);
163 | }
164 |
165 |
166 | function processPackageData(arrayBuffer) {
167 | assert(arrayBuffer, 'Loading data file failed.');
168 | assert(arrayBuffer instanceof ArrayBuffer, 'bad input to processPackageData');
169 | var byteArray = new Uint8Array(arrayBuffer);
170 | var curr;
171 |
172 | // Reuse the bytearray from the XHR as the source for file reads.
173 | DataRequest.prototype.byteArray = byteArray;
174 |
175 | var files = metadata['files'];
176 | for (var i = 0; i < files.length; ++i) {
177 | DataRequest.prototype.requests[files[i].filename].onload();
178 | }
179 | Module['removeRunDependency']('datafile_bundle.data');
180 |
181 | };
182 | Module['addRunDependency']('datafile_bundle.data');
183 |
184 | if (!Module.preloadResults) Module.preloadResults = {};
185 |
186 | Module.preloadResults[PACKAGE_NAME] = {fromCache: false};
187 | if (fetched) {
188 | processPackageData(fetched);
189 | fetched = null;
190 | } else {
191 | fetchedCallback = processPackageData;
192 | }
193 |
194 | }
195 | if (Module['calledRun']) {
196 | runWithFS();
197 | } else {
198 | if (!Module['preRun']) Module['preRun'] = [];
199 | Module["preRun"].push(runWithFS); // FS is not initialized yet, wait for it
200 | }
201 |
202 | Module['removeRunDependency']('track.json');
203 | }
204 |
205 | function runMetaWithFS() {
206 | Module['addRunDependency']('track.json');
207 | var REMOTE_METADATA_NAME = Module['locateFile'] ? Module['locateFile']('track.json', '') : 'track.json';
208 | var xhr = new XMLHttpRequest();
209 | xhr.onreadystatechange = function() {
210 | if (xhr.readyState === 4 && xhr.status === 200) {
211 | loadPackage(JSON.parse(xhr.responseText));
212 | }
213 | }
214 | xhr.open('GET', REMOTE_METADATA_NAME, true);
215 | xhr.overrideMimeType('application/json');
216 | xhr.send(null);
217 | }
218 |
219 | if (Module['calledRun']) {
220 | runMetaWithFS();
221 | } else {
222 | if (!Module['preRun']) Module['preRun'] = [];
223 | Module["preRun"].push(runMetaWithFS);
224 | }
225 |
226 | })();
227 | // Emscripten:
228 | var h;h||(h=typeof Module !== 'undefined' ? Module : {});var ba={},k;for(k in h)h.hasOwnProperty(k)&&(ba[k]=h[k]);var ca="./this.program";function da(a,b){throw b;}var ea="object"===typeof window,fa="function"===typeof importScripts,ha="object"===typeof process&&"object"===typeof process.versions&&"string"===typeof process.versions.node,l="",ia,ja,ka,la,ma;
229 | if(ha)l=fa?require("path").dirname(l)+"/":__dirname+"/",ia=function(a,b){la||(la=require("fs"));ma||(ma=require("path"));a=ma.normalize(a);return la.readFileSync(a,b?null:"utf8")},ka=function(a){a=ia(a,!0);a.buffer||(a=new Uint8Array(a));assert(a.buffer);return a},ja=function(a,b,c){la||(la=require("fs"));ma||(ma=require("path"));a=ma.normalize(a);la.readFile(a,function(d,e){d?c(d):b(e.buffer)})},1
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 |