Refactor manifest shape to allow for a configuration object.

clangen · clangen · commit 63b99b78062a · 2022-09-11T12:29:34.000-07:00
diff --git a/cplayer.code-workspace b/cplayer.code-workspace
@@ -5,6 +5,7 @@
 		}
 	],
 	"settings": {
-		"editor.formatOnSave": true
+		"editor.formatOnSave": true,
+		"editor.tabSize": 2
 	}
 }
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <title>suncrash</title>
+    <title>cplayer</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/AlbumManifestContext.tsx b/src/AlbumManifestContext.tsx
@@ -14,17 +14,22 @@ interface AlbumManifestProviderProps {
 export const AlbumManifestProvider: Component<AlbumManifestProviderProps> = (
   props
 ) => {
+  const [config, setConfig] = createSignal<Record<string, any>>({});
   const [albums, setAlbums] = createSignal<Album[]>([]);
-  const [manifest, setManifest] = createSignal<AlbumManifest>({ albums });
+  const [manifest, setManifest] = createSignal<AlbumManifest>({
+    albums,
+    config,
+  });
   fetch(MANIFEST_URI).then(async (response) => {
     const albumManifest = await response.json();
-    _.each(albumManifest, (album) => {
+    _.each(albumManifest.albums, (album) => {
       _.each(album.tracks, (track) => {
         track.uri = `${PATH_PREFIX}/${track.uri}`;
       });
     });
-    setAlbums(albumManifest);
-    setManifest({ albums });
+    setConfig(albumManifest.config);
+    setAlbums(albumManifest.albums);
+    setManifest({ albums, config });
   });
   return (
     <AlbumManifestContext.Provider value={manifest()}>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 import _ from "lodash";
-import { Component, Show, useContext } from "solid-js";
+import { Component, Show, useContext, createEffect } from "solid-js";
 import { Track, Album, PlaybackState } from "./Types";
 import { PlaybackContext } from "./PlaybackContext";
 import { AlbumManifestContext } from "./AlbumManifestContext";
@@ -34,6 +34,13 @@ const formatDuration = (seconds: number) => {
   return `${Math.floor(mins)}:${Math.floor(secs).toString().padStart(2, "0")}`;
 };
 
+const handleConfigChanged = (config: Record<string, any>) => {
+  const pageTitle = config.pageTitle;
+  if (pageTitle) {
+    document.title = pageTitle;
+  }
+};
+
 const SeekBar: Component<SeekBarProps> = (props) => {
   const handleClick = (ev: any) => {
     const percent = Math.round(
@@ -200,6 +207,9 @@ const AlbumView: Component<AlbumViewProps> = (props) => {
 const App: Component = () => {
   const albumManifestContext = useContext(AlbumManifestContext);
   const manifestLoaded = () => albumManifestContext?.albums().length;
+  createEffect(() => {
+    handleConfigChanged(albumManifestContext?.config() ?? {});
+  }, [albumManifestContext?.config]);
   return (
     <Show when={manifestLoaded()}>
       <div class={styles.App}>
diff --git a/src/Types.tsx b/src/Types.tsx
@@ -41,4 +41,5 @@ export interface Playback {
 
 export interface AlbumManifest {
   albums: Accessor<Album[]>;
+  config: Accessor<Record<string, any>>;
 }
diff --git a/src/assets/manifest-example.json b/src/assets/manifest-example.json
@@ -1,20 +1,25 @@
-[
-  {
-    "name": "album name",
-    "artist": "album's artist name",
-    "tracks": [
-      {
-        "title": "track title 1",
-        "uri": "relative/path/to/track1.opus"
-      },
-      {
-        "title": "track title 2",
-        "uri": "relative/path/to/track2.ogg"
-      },
-      {
-        "title": "track title 3",
-        "uri": "relative/path/to/track3.mp3"
-      },
-    ]
-  }
-]
+{
+  "config": {
+    "pageTitle": "my page title"
+  },
+  "albums": [
+    {
+      "name": "album name",
+      "artist": "album's artist name",
+      "tracks": [
+        {
+          "title": "track title 1",
+          "uri": "relative/path/to/track1.opus"
+        },
+        {
+          "title": "track title 2",
+          "uri": "relative/path/to/track2.ogg"
+        },
+        {
+          "title": "track title 3",
+          "uri": "relative/path/to/track3.mp3"
+        }
+      ]
+    }
+  ]
+}

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@`
`5`	`5`	`}`
`6`	`6`	`],`
`7`	`7`	`"settings": {`
`8`		`- "editor.formatOnSave": true`
	`8`	`+ "editor.formatOnSave": true,`
	`9`	`+ "editor.tabSize": 2`
`9`	`10`	`}`
`10`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -41,4 +41,5 @@ export interface Playback {`
`41`	`41`
`42`	`42`	`export interface AlbumManifest {`
`43`	`43`	`albums: Accessor<Album[]>;`
	`44`	`+ config: Accessor<Record<string, any>>;`
`44`	`45`	`}`