file-show: support media-keys previous and next track (best usage with auto-play)
Massimo Melina committed
Jan 31, 2024 at 22:32 UTC
1c93a652510d774b9bdd7d6c5d2f314a4c779f8d
1 file changed
+14
-7
frontend/src/show.ts
+14
-7
@@ -26,9 +26,9 @@ export function fileShow(entry: DirEntry) {
26
const [mode, setMode] = useState(ZoomMode.contain)
27
useEventListener('keydown', ({ key }) => {
28
if (key === 'ArrowLeft')
29
- return go(-1)
29
+ return goPrev()
30
if (key === 'ArrowRight')
31
- return go(+1)
31
+ return goNext()
32
if (key === 'ArrowDown')
33
return scrollY(1)
34
if (key === 'ArrowUp')
@@ -66,12 +66,15 @@ export function fileShow(entry: DirEntry) {
66
if (!autoPlaying || !showElement) return
67
if (showElement instanceof HTMLMediaElement) {
68
showElement.play().catch(curFailed)
69
- return domOn('ended', () => go(+1), { target: showElement as any })
69
+ return domOn('ended', goNext, { target: showElement as any })
70
}
71
// we are supposedly showing an image
72
const h = setTimeout(() => go(+1), state.auto_play_seconds * 1000)
73
return () => clearTimeout(h)
74
}, [showElement, autoPlaying, cur])
75
+ const {mediaSession} = navigator
76
+ mediaSession.setActionHandler('nexttrack', goNext)
77
+ mediaSession.setActionHandler('previoustrack', goPrev)
78
79
const {t} = useI18N()
80
return h(FlexV, {
@@ -123,18 +126,22 @@ export function fileShow(entry: DirEntry) {
126
h(getShowType(cur) || Fragment, {
127
src: cur.uri,
128
className: 'showing',
126
- onLoad: () => {
129
+ onLoad() {
130
lastGood.current = cur
131
setLoading(false)
132
},
133
onError: curFailed
134
})
135
),
133
- hIcon('❮', { className: navClass, style: { left: 0 }, onClick: () => go(-1) }),
134
- hIcon('❯', { className: navClass, style: { right: 0 }, onClick: () => go(+1) }),
136
+ hIcon('❮', { className: navClass, style: { left: 0 }, onClick: goPrev }),
137
+ hIcon('❯', { className: navClass, style: { right: 0 }, onClick: goNext }),
138
),
139
)
140
141
+ function goPrev() { go(-1) }
142
+
143
+ function goNext() { go(+1) }
144
+
145
function curFailed() {
146
if (cur !== lastGood.current)
147
return go()
@@ -151,7 +158,7 @@ export function fileShow(entry: DirEntry) {
158
while (1) {
159
e = e.getSibling(moving.current)
160
if (!e) { // reached last
154
- setAutoPlaying(false)
161
+ if (dir! > 0) setAutoPlaying(false)
162
setLoading(cur !== lastGood.current)
163
setCur(lastGood.current) // revert to last known supported file
164
return restartAnimation(document.body, '.2s blink')