Add embedded player

public/player-marker.js

@@ -0,0 +1,10 @@
+function movePlayer() {
+	const pc = document.getElementById("player-container")
+	const playerExists = pc.querySelector("iframe")
+	if (!playerExists) return
+	const pm = document.getElementById("player-marker")
+	pm.style.height = `${pc.clientHeight}px`
+	pc.style.top = `${Math.round(pm.getBoundingClientRect().top)}px`
+}
+movePlayer()
+document.body.addEventListener("htmx:afterSettle", movePlayer)

pug/album_grid.pug

@@ -8,7 +8,7 @@ block view
     .d-grid.gx8.gy12.jc-center.break-word(style="grid-template-columns: repeat(auto-fit, 210px)")
       each item in items
         div
-          a.album-grid-link(href=item.item_url target="_blank")
+          a.s-link.album-grid-link(href=`/api/play/${item.item_type}/${item.item_id}` hx-target="#player" hx-select="#player" hx-indicator="null" hx-push-url="false")
             img(loading="lazy" src=item.item_art_url width=210 height=210)
             p.fs-body3.mb8= item.item_title
           .d-flex.fw-wrap.g4

pug/home.pug

@@ -4,6 +4,7 @@ html
     meta(charset="utf-8")
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     title BC Explorer
+    link(rel="icon" href="/favicon.png")
     link(rel="stylesheet" type="text/css" href="/static/stacks.min.css")
     script(src="/static/htmx.js")
     meta(name="htmx-config" content='{"requestClass":"is-loading"}')

pug/includes/layout.pug

@@ -22,6 +22,7 @@ html
     link(rel="stylesheet" type="text/css" href="/static/stacks.min.css")
     script(src="/static/htmx.js")
     script(src="/static/wordcloud.js")
+    script(defer src="/static/player-marker.js")
     meta(name="htmx-config" content='{"requestClass":"is-loading"}')
     style.
       .themed {
@@ -69,7 +70,8 @@ html
       svg {
         flex-shrink: 0;
       }
-  body.themed.theme-system.overflow-y-scroll(hx-boost="true")
+  body.themed.theme-system.overflow-y-scroll(hx-boost="true" hx-swap="outerHTML" hx-target="#page" hx-select="#page")
+    #page
       header.s-topbar.ps-sticky.t0
         .s-topbar--container.wmx9
           .s-topbar--logo
@@ -90,15 +92,13 @@ html
               li: +navi("shape", "grid").brr0!= icons.get("view-grid")
               li: +navi("shape", "list").blr0!= icons.get("align-justify")
           .fl-grow1
-        #player(hx-preserve)
-          button.s-btn.s-btn__outlined.s-btn__xs!= icons.get("play")
 
       .d-flex.py24.px16.g24.fs-body1
-      .fl-grow1
+        main.fl-grow1
           block view
 
-      div
+        aside.ws3
-        .ps-sticky.d-flex.fd-column.g12.wmx4(style="top: 80px")
+          .ps-sticky.d-flex.fd-column.g12(style="top: 80px")
             if arrange === "tag"
               include tag-status.pug
 
@@ -120,7 +120,9 @@ html
                 input(type="hidden" name="shape" value=shape)
                 button.s-btn.s-btn__xs.s-btn__icon.s-btn__outlined.s-btn__muted#search-submit(style="height: 38px")!= icons.get("search")
 
-          .s-sidebarwidget.wmn3
+            #player-marker.pe-none.myn6
+
+            .s-sidebarwidget
               .s-sidebarwidget--header Collection
               table.s-sidebarwidget--content.s-sidebarwidget__items
                 tr.s-sidebarwidget--item
@@ -174,3 +176,6 @@ html
                       .s-progress--bar.bg-yellow-400(title=`${count.taste[1]} labels with 20-199 fans`)= count.taste[1]
                       .s-progress--bar.bg-orange-400(title=`${count.taste[2]} labels with 200-1999 fans`)= count.taste[2]
                       .s-progress--bar.bg-red-400(title=`${count.taste[3]} labels with >2000 fans`)= count.taste[3]
+
+    #player-container.ps-fixed.r16.ws3(hx-preserve="true")
+      #player

pug/includes/tag-status.pug

@@ -1,14 +1,14 @@
 if downloader.total > 0 || downloader.outcome
   #tag-download
     if !downloader.running && !downloader.outcome
-      form.s-notice.s-notice__info.d-flex.ai-center.p8.gx16.pl16(role="status" hx-swap="outerHTML" hx-target="#tag-download" hx-post="/api/tag-download")
+      form.s-notice.s-notice__info.d-flex.ai-center.p8.gx16.pl16(role="status" hx-target="#tag-download" hx-post="/api/tag-download")
         != icons.get("info-circle")
         div Tag data needs to be downloaded. This will take a while.
         input(type="hidden" name="account" value=account)
         button.s-btn.s-btn__outlined Download now
 
     else if !downloader.outcome
-      .s-notice.p16(role="status" hx-swap="outerHTML" hx-target="#tag-download" hx-get=`/api/tag-download?account=${account}` hx-trigger="every 5s" hx-indicator="null")
+      .s-notice.p16(role="status" hx-target="#tag-download" hx-get=`/api/tag-download?account=${account}` hx-trigger="every 5s" hx-indicator="null")
         .d-flex.gx16.ai-center
           != icons.get("cloud-download")
           .fl-grow1 Downloading tags...
@@ -23,7 +23,7 @@ if downloader.total > 0 || downloader.outcome
           span= downloader.total
 
     else if downloader.outcome === "Success"
-      .s-notice.s-notice__success.p8.gx16.pl16.d-flex.ai-center.wmn3
+      .s-notice.s-notice__success.p8.gx16.pl16.d-flex.ai-center
         title#title(hx-swap-oob="true") * Tags downloaded! | BC Explorer
         != icons.get("cloud-check")
         .fl-grow1 Tags downloaded.
@@ -31,7 +31,7 @@ if downloader.total > 0 || downloader.outcome
         a.s-btn.s-btn__outlined(href="") Refresh
 
     else
-      .s-notice.s-notice__danger.p8.gx16.pl16.d-flex.ai-center.wmn3
+      .s-notice.s-notice__danger.p8.gx16.pl16.d-flex.ai-center
         title#title(hx-swap-oob="true") * Tag download failed! | BC Explorer
         != icons.get("cloud-xmark")
         .fl-grow1= downloader.outcome

pug/player.pug

@@ -0,0 +1,5 @@
+#player
+  .s-sidebarwidget(style="overflow: hidden")
+    div(style="margin: -1px; margin-bottom: -11px").ps-relative
+      a.ps-absolute.bg-white.bar0.t0.r0.s-btn.s-btn__icon.s-btn__muted.s-btn__sm.px16(href=`/api/play/${item_type}/${item_id}` hx-target="#player" hx-select="#player" hx-push-url="false").fc-theme-primary!= icons.get("refresh-double")
+      iframe(style="border: 0; width: 100%; height: 424px;" src=`https://bandcamp.com/EmbeddedPlayer/${item_type}=${item_id}/size=large/bgcol=ffffff/linkcol=63b2cc/artwork=none/transparent=true/`)

routes/app.js

@@ -67,7 +67,7 @@ const schema = {
 	query: z.object({
 		arrange: z.enum(["album", "artist", "label", "tag", "track"]),
 		shape: z.enum(["grid", "list"]),
-		filter_field: z.enum(["band_name", "band_url", "item_id", "tag", "why"]).optional(),
+		filter_field: z.enum(["band_name", "band_url", "item_title", "item_id", "tag", "why"]).optional(),
 		filter: z.string().optional(),
 		filter_fuzzy: z.enum(["true"]).optional()
 	}),

routes/load-collection.js

@@ -61,7 +61,7 @@ async function loadCollection(inputUsername) {
 	const preparedTrack = db.prepare("INSERT OR IGNORE INTO track (account, item_id, track_id, title, artist, track_number, duration) VALUES (@account, @item_id, @track_id, @title, @artist, @track_number, @duration)")
 	db.transaction(() => {
 		for (const [key, tracklist] of Object.entries(items.tracklists)) {
-			assert.match(key[0], /[at]/)
+			if (!key[0].match(/[at]/)) continue
 			for (const track of tracklist) {
 				preparedTrack.run({
 					account,

routes/play.js

@@ -0,0 +1,19 @@
+// @ts-check
+
+const {z} = require("zod")
+const {sync, router} = require("../passthrough")
+const {defineEventHandler} = require("h3")
+const {getValidatedRouterParams} = require("h3")
+
+/** @type {import("../pug-sync")} */
+const pugSync = sync.require("../pug-sync")
+
+const schema = z.object({
+	item_type: z.enum(["album", "track"]),
+	item_id: z.number({coerce: true})
+})
+
+router.get("/api/play/:item_type/:item_id", defineEventHandler(async event => {
+	const locals = await getValidatedRouterParams(event, schema.parse)
+	return pugSync.render(event, "player.pug", locals)
+}))

scripts/populate-albums-tracks.js

@@ -58,7 +58,7 @@ const har = JSON.parse(fs.readFileSync("scripts/account.har", "utf8"))
 	const preparedTrack = db.prepare("INSERT OR IGNORE INTO track (account, item_id, track_id, title, artist, track_number, duration, mp3) VALUES (@account, @item_id, @track_id, @title, @artist, @track_number, @duration, @mp3)")
 	db.transaction(() => {
 		for (const [key, tracklist] of Object.entries(items.tracklists)) {
-			assert.match(key[0], /[at]/)
+			if (!key[0].match(/[at]/)) continue
 			for (const track of tracklist) {
 				preparedTrack.run({
 					account,

start.js

@@ -36,6 +36,7 @@ pugSync.createRoute(router, "/", "home.pug")
 
 sync.require("./routes/app")
 sync.require("./routes/load-collection")
+sync.require("./routes/play")
 
 // Files
 
@@ -53,7 +54,9 @@ router.get("/static/htmx.js", defineEventHandler({
 	handler: async event => {
 		handleCacheHeaders(event, {maxAge: 86400})
 		defaultContentType(event, "text/javascript")
-		return fs.promises.readFile(require.resolve("htmx.org/dist/htmx.js"), "utf-8")
+		return Promise.all(["htmx.org/dist/htmx.js"].map(r =>
+			fs.promises.readFile(require.resolve(r), "utf-8")
+		)).then(files => files.join("\n\n\n"))
 	}
 }))
 
@@ -66,6 +69,13 @@ router.get("/static/wordcloud.js", defineEventHandler({
 	}
 }))
 
+router.get("/static/player-marker.js", defineEventHandler({
+	handler: async event => {
+		defaultContentType(event, "text/javascript")
+		return fs.promises.readFile("public/player-marker.js")
+	}
+}))
+
 router.get("/favicon.png", defineEventHandler({
 	handler: async event => {
 		handleCacheHeaders(event, {maxAge: 86400})