fix: (beta) file-show: cover not working after search
Massimo Melina committed
Feb 7, 2024 at 15:25 UTC
dfdc211d50b8d2711f0f65c43cec889bced17100
1 file changed
+24
-24
frontend/src/show.ts
+24
-24
@@ -1,6 +1,6 @@
1
import { DirEntry, DirList, ext2type, state, useSnapState } from './state'
2
import { createElement as h, Fragment, useEffect, useRef, useState } from 'react'
3
-import { basename, dirname, domOn, hfsEvent, hIcon, isMac, newDialog, restartAnimation } from './misc'
3
+import { basename, dirname, domOn, hfsEvent, hIcon, isMac, newDialog, pathEncode, restartAnimation } from './misc'
4
import { useEventListener, useWindowSize } from 'usehooks-ts'
5
import { EntryDetails, useMidnight } from './BrowseFiles'
6
import { Btn, FlexV, iconBtn, Spinner } from './components'
@@ -32,26 +32,16 @@ export function fileShow(entry: DirEntry, { startPlaying=false } = {}) {
32
goTo(shuffle[0])
33
}, [shuffle])
34
useEventListener('keydown', ({ key }) => {
35
- if (key === 'ArrowLeft')
36
- return goPrev()
37
- if (key === 'ArrowRight')
38
- return goNext()
39
- if (key === 'ArrowDown')
40
- return scrollY(1)
41
- if (key === 'ArrowUp')
42
- return scrollY(-1)
43
- if (key === 'd')
44
- return location.href = cur.uri + '?dl'
45
- if (key === 'z')
46
- return switchZoomMode()
47
- if (key === 'f')
48
- return toggleFullScreen()
49
- if (key === 's')
50
- return toggleShuffle()
51
- if (key === 'r')
52
- return toggleRepeat()
53
- if (key === 'a')
54
- return toggleAutoPlay()
35
+ if (key === 'ArrowLeft') return goPrev()
36
+ if (key === 'ArrowRight') return goNext()
37
+ if (key === 'ArrowDown') return scrollY(1)
38
+ if (key === 'ArrowUp') return scrollY(-1)
39
+ if (key === 'd') return location.href = cur.uri + '?dl'
40
+ if (key === 'z') return switchZoomMode()
41
+ if (key === 'f') return toggleFullScreen()
42
+ if (key === 's') return toggleShuffle()
43
+ if (key === 'r') return toggleRepeat()
44
+ if (key === 'a') return toggleAutoPlay()
45
if (key === ' ') {
46
const sel = state.selected
47
if (sel[cur.uri])
@@ -140,7 +130,7 @@ export function fileShow(entry: DirEntry, { startPlaying=false } = {}) {
130
h('div', {}, cur.name),
131
t`Loading failed`
132
) : h('div', { className: 'showing-container', ref: containerRef },
143
- h('div', { className: 'cover ' + (cover ? '' : 'none'), style: { backgroundImage: `url(${cover})` } }),
133
+ h('div', { className: 'cover ' + (cover ? '' : 'none'), style: { backgroundImage: `url(${pathEncode(cover)})`, } }),
134
h(getShowType(cur) || Fragment, {
135
src: cur.uri,
136
className: 'showing',
@@ -150,8 +140,8 @@ export function fileShow(entry: DirEntry, { startPlaying=false } = {}) {
140
},
141
onError: curFailed,
142
onPlay() {
153
- const folder = cur.n.slice(0, -cur.name)
154
- const covers = state.list.filter(x => folder === x.n.slice(0, -x.name) // same folder
143
+ const folder = dirname(cur.n)
144
+ const covers = state.list.filter(x => folder === dirname(x.n) // same folder
145
&& x.name.match(/(?:folder|cover|albumart.*)\.jpe?g$/i))
146
setCover(_.maxBy(covers, 's')?.n || '')
147
navigator.mediaSession.metadata = new MediaMetadata({
@@ -298,3 +288,13 @@ function showHelp() {
288
)
289
})
290
}
291
+
292
+function loadJs(url: string) {
293
+ return new Promise((resolve, reject) => {
294
+ const el = document.createElement('script')
295
+ el.setAttribute('src', url)
296
+ document.head.appendChild(el)
297
+ el.addEventListener('load', resolve)
298
+ el.addEventListener('error', reject)
299
+ })
300
+}
\ No newline at end of file