plugins: fileShow.Component
Massimo Melina committed
Aug 28, 2025 at 00:44 UTC
3ea7c3b9eff0bb60941ec0515cb52357b0ef10fb
3 files changed
+18
-17
dev-plugins.md
+8
-5
@@ -566,15 +566,16 @@ This is a list of available frontend-events, with respective object parameter an
566
```
567
or if you like lodash, you can simply `HFS._.remove(menu, { id: 'show' })`
568
- `fileShow`
569
- - you receive an entry of the list, and optionally produce React Component for visualization.
569
+ - you receive an entry of the list, and the default Component that will be used.
570
+ You can optionally replace Component in the parameters object, or return it, but replacing is chainable with other plugins.
571
Your component will be rendered with the following props:
572
- `src`: string, uri of the entry
572
- - `className`: string, must be reported in your component
573
+ - `className`: string, this must be reported in your component
574
- `onLoad`
575
- `onError`
576
- `onPlay`
576
- - parameter `{ entry: DirEntry }` (refer above for DirEntry object)
577
- - output `ReactComponent`
577
+ - parameter `{ entry: DirEntry, Component: FC }` (refer above for DirEntry object)
578
+ - output `ReactComponent | undefined`
579
- `showPlay`
580
- emitted on each file played inside file-show. Use setCover if you want to customize the background picture.
581
- parameter `{ entry: DirEntry, setCover(uri: string), meta: { title, album, artist, year } }`
@@ -1052,4 +1053,6 @@ If you want to override a text regardless of the language, use the special langu
1053
- 12.8 (v0.57.10)
1054
- api.onServer
1055
- HFS.elementToEntry
1055
- - backend event: checkVfsPermission
\ No newline at end of file
1056
+ - backend event: checkVfsPermission
1057
+- 12.9 (v0.57.14)
1058
+ - frontend event fileShow gets Component parameter
\ No newline at end of file
frontend/src/show.ts
+9
-11
@@ -1,5 +1,5 @@
1
import { DirEntry, DirList, ext2type, state, useSnapState } from './state'
2
-import { createElement as h, Fragment, useEffect, useMemo, useRef, useState } from 'react'
2
+import { createElement as h, forwardRef, Fragment, useEffect, useMemo, useRef, useState } from 'react'
3
import {
4
basename, dirname, domOn, hfsEvent, hIcon, isMac, newDialog, pathEncode, restartAnimation, useStateMounted,
5
isNumeric,
@@ -377,23 +377,21 @@ export function fileShow(entry: DirEntry, { startPlaying=false, startShuffle=fal
377
}
378
379
export function getShowComponent(entry: DirEntry) {
380
- const res = hfsEvent('fileShow', { entry }).find(Boolean)
381
- if (res)
382
- return res
380
const type = ext2type(entry.ext)
384
- return type === 'audio' ? Audio
381
+ const Component = type === 'audio' ? Audio
382
: type === 'video' ? Video
383
: type === 'image' ? 'img'
384
: ''
385
+ const params = { entry, Component }
386
+ const res = hfsEvent('fileShow', params).findLast(Boolean)
387
+ return res || params.Component
388
}
389
390
-export function Audio({ onLoad, ...rest }: any) {
391
- return h('audio', { onLoadedData: onLoad, controls: true, ...rest })
392
-}
390
+export const Audio = forwardRef<HTMLVideoElement, any>(({ onLoad, ...rest }: any, ref) =>
391
+ h('audio', { ref, onLoadedData: onLoad, controls: true, ...rest }) )
392
394
-export function Video({ onLoad, ...rest }: any) {
395
- return h('video', { onLoadedData: onLoad, controls: true, ...rest })
396
-}
393
+export const Video = forwardRef<HTMLVideoElement, any>(({ onLoad, ...rest }: any, ref) =>
394
+ h('video', { ref, onLoadedData: onLoad, controls: true, ...rest }) )
395
396
function showHelp() {
397
newDialog({
src/const.ts
+1
-1
@@ -9,7 +9,7 @@ import { formatTimestamp } from './cross'
9
import { argv } from './argv'
10
export * from './cross-const'
11
12
-export const API_VERSION = 12.8
12
+export const API_VERSION = 12.9
13
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
14
15
// you can add arguments with this file, currently used for the update process on mac/linux