plugins: frontend event 'showPlay'

dev-plugins.md

@@ -354,6 +354,9 @@ This is a list of available frontend-events, with respective object parameter an
     - you receive an entry of the list, and optionally produce React Component for visualization.
     - parameter `{ entry: Entry }` (refer above for Entry object)
     - output `ReactComponent`
+- `showPlay`
+    - emitted on each file played inside file-show. Use setCover if you want to customize the background picture.
+    - parameter `{ entry: Entry, setCover(uri: string), meta: { title, album, artist, year } }`
 - `menuZip`
     - parameter `{ def: ReactNode }`
     - output `Html`
@@ -610,6 +613,8 @@ If you want to override a text regardless of the language, use the special langu
 
 ## API version history
 
+- 8.9 (v0.54.0)
+  - frontend event: showPlay
 - 8.891 (v0.53.0)
     - api.openDb
     - frontend event: menuZip

frontend/src/show.ts

@@ -140,7 +140,7 @@ export function fileShow(entry: DirEntry, { startPlaying=false } = {}) {
                         h('div', {}, cur.name),
                         t`Loading failed`
                     ) : h('div', { className: 'showing-container', ref: containerRef },
-                        h('div', { className: 'cover ' + (cover ? '' : 'none'), style: { backgroundImage: `url("${pathEncode(cover)}")`, } }),
+                        h('div', { className: 'cover ' + (cover ? '' : 'none'), style: { backgroundImage: `url("${cover}")`, } }),
                         h(getShowType(cur) || Fragment, {
                             src: cur.uri,
                             className: 'showing',
@@ -152,19 +152,27 @@ export function fileShow(entry: DirEntry, { startPlaying=false } = {}) {
                             async onPlay() {
                                 const folder = dirname(cur.n)
                                 const covers = !isAudio ? [] : state.list.filter(x => folder === dirname(x.n) // same folder
-                                    && x.name.match(/(?:folder|cover|albumart.*)\.jpe?g$/i))
-                                setCover(_.maxBy(covers, 's')?.n || '')
+                                    && x.name.match(/(?:folder|cover|front|albumart.*)\.jpe?g$/i))
+                                setCover(pathEncode(_.maxBy(covers, 's')?.n || ''))
                                 const meta = {
                                     title: cur.name,
                                     album: decodeURIComponent(basename(dirname(cur.uri))),
                                     artwork: covers.map(x => ({ src: x.n }))
                                 }
-                                if (window.MediaMetadata)
-                                    navigator.mediaSession.metadata = new MediaMetadata(meta)
+                                const m = window.MediaMetadata && (navigator.mediaSession.metadata = new MediaMetadata(meta))
                                 if (cur.ext === 'mp3') {
                                     setTags(Object.assign(meta, await getId3Tags(location.pathname + cur.n).catch(() => {})))
-                                    Object.assign(navigator.mediaSession?.metadata || {}, meta)
+                                    if (m) Object.assign(m, meta)
                                 }
+                                hfsEvent('showPlay', {
+                                    entry: cur,
+                                    meta,
+                                    setCover(src: any) {
+                                        if (typeof src !== 'string') return
+                                        setCover(src)
+                                        if (m) navigator.mediaSession.metadata = new MediaMetadata(Object.assign(meta, { artwork: [{ src }] }))
+                                    }
+                                })
                             }
                         }),
                         tags && h('div', { className: 'meta-tags' },

shared/api.ts

@@ -55,7 +55,7 @@ export function apiCall<T=any>(cmd: string, params?: Dict, options: ApiCallOptio
         await options.onResponse?.(res, result)
         if (!res.ok)
             throw new ApiError(res.status, data === undefined ? body : `Failed API ${cmd}: ${res.statusText}`, data)
-        return result as Awaited<T extends (...args: any[]) => infer R ? R : T>
+        return result as Awaited<T extends (...args: any[]) => infer R ? Awaited<R> : T>
     }, err => {
         stop?.()
         if (err?.message?.includes('fetch')) {
@@ -81,7 +81,7 @@ export class ApiError extends Error {
 
 export type UseApi<T=unknown> = ReturnType<typeof useApi<T>>
 export function useApi<T=any>(cmd: string | Falsy, params?: object, options: ApiCallOptions={}) {
-    const [data, setData] = useStateMounted<T | undefined>(undefined)
+    const [data, setData] = useStateMounted<Awaited<ReturnType<typeof apiCall<T>>> | undefined>(undefined)
     const [error, setError] = useStateMounted<Error | undefined>(undefined)
     const [forcer, setForcer] = useStateMounted(0)
     const loadingRef = useRef<ReturnType<typeof apiCall>>()
@@ -95,7 +95,7 @@ export function useApi<T=any>(cmd: string | Falsy, params?: object, options: Api
         let req: undefined | ReturnType<typeof apiCall>
         const wholePromise = wait(0) // postpone a bit, so that if it is aborted immediately, it is never really fired (happens mostly in dev mode)
             .then(() => !cmd || aborted ? undefined : req = apiCall<T>(cmd, params, options))
-            .then(res => aborted || setData(dataRef.current = res), err => {
+            .then(res => aborted || setData(dataRef.current = res as any), err => {
                 if (aborted) return
                 setError(err)
                 setData(dataRef.current = undefined)

src/const.ts

@@ -7,7 +7,7 @@ import { mkdirSync } from 'fs'
 import { basename, dirname, join } from 'path'
 export * from './cross-const'
 
-export const API_VERSION = 8.891
+export const API_VERSION = 8.9
 export const COMPATIBLE_API_VERSION = 1 // while changes in the api are not breaking, this number stays the same, otherwise it is made equal to API_VERSION
 export const HFS_REPO = 'rejetto/hfs'
 
@@ -51,5 +51,5 @@ console.log('cwd', process.cwd())
 if (APP_PATH !== process.cwd())
     console.log('app', APP_PATH)
 console.log('node', process.version)
-console.log('platform', process.platform, process.arch)
+console.log('platform', process.platform)
 console.log('pid', process.pid)