file-show: show tags
Massimo Melina committed
Feb 8, 2024 at 10:09 UTC
b01e61fee4a4dff52f24d93013d82a8e514f7033
2 files changed
+28
-3
frontend/src/index.scss
+20
-1
@@ -648,7 +648,26 @@ button .icon + .label {
648
flex-direction: column-reverse !important; // bar at the bottom, easier on the thumb
649
}
650
}
651
- .showing-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; }
651
+
652
+ .showing-container {
653
+ width: 100%;
654
+ height: 100%;
655
+ display: flex;
656
+ flex-direction: column;
657
+ justify-content: center;
658
+ align-items: center;
659
+ position: relative;
660
+ }
661
+ .meta-tags {
662
+ position: relative;
663
+ width: 100%;
664
+ text-align: center;
665
+ display: flex;
666
+ justify-content: center;
667
+ &>div { position: absolute;
668
+ margin: 1em;
669
+ }
670
+ }
671
.showing {
672
max-width: calc(100% - min(4vw, var(--nav-size)) * 2); // avoid overlapping of controls and nav buttons
673
max-height: 100%;
frontend/src/show.ts
+8
-2
@@ -63,6 +63,9 @@ export function fileShow(entry: DirEntry, { startPlaying=false } = {}) {
63
const mainRef = useRef<HTMLDivElement>()
64
useEffect(() => { scrollY(-1E9) }, [cur])
65
66
+ const [tags, setTags] = useState<any>()
67
+ useEffect(() => setTags(undefined), [cur]) // reset
68
+
69
const { auto_play_seconds } = useSnapState()
70
const [autoPlaying, setAutoPlaying] = useState(startPlaying)
71
const showElement = containerRef.current?.querySelector('.showing')
@@ -151,9 +154,12 @@ export function fileShow(entry: DirEntry, { startPlaying=false } = {}) {
154
artwork: covers.map(x => ({ src: x.n }))
155
})
156
if (cur.ext === 'mp3')
154
- Object.assign(meta, await getId3Tags(location + cur.n).catch(() => {}))
157
+ setTags(Object.assign(meta, await getId3Tags(location + cur.n).catch(() => {})))
158
}
156
- })
159
+ }),
160
+ tags && h('div', { className: 'meta-tags' },
161
+ h('div', {}, // extra div for allowing position:relative+absolute
162
+ ...['title','artist','album','year'].map(k => h('div', { key: k, className: `meta-${k}` }, tags[k])) ) ),
163
),
164
hIcon('❮', { className: navClass, style: { left: 0 }, onClick: goPrev }),
165
hIcon('❯', { className: navClass, style: { right: 0 }, onClick: goNext }),