show: transparent audio player when a cover is available
Massimo Melina committed
Jul 5, 2024 at 17:41 UTC
89611ac172e6cd7e242c6dfb740cca9752f28268
2 files changed
+5
-4
frontend/src/index.scss
+4
-3
@@ -708,12 +708,13 @@ form label+input { margin-top: .2em; }
708
background-repeat: no-repeat;
709
background-size: contain;
710
background-position: center;
711
- z-index: -1; // otherwise firefox
712
- opacity: .3;
711
+ z-index: -1; // otherwise firefox (forgot to finished this comment)
712
+ opacity: .4;
713
transition: opacity 1s;
714
&.none { opacity: 0; }
715
}
716
- audio.showing { min-width: 60%; }
716
+ audio.showing { min-width: 60%; transition: opacity 1s; }
717
+ .cover:not(.none)+audio { opacity: .7; }
718
audio.showing, // even on mobile, we need the whole thing to control it decently, and nav-s don't seem to be a problem
719
img.showing { max-width: 100% } // we are ok with overlapping for simple images
720
.main {
frontend/src/show.ts
+1
-1
@@ -148,7 +148,7 @@ export function fileShow(entry: DirEntry, { startPlaying=false } = {}) {
148
h('div', {}, cur.name),
149
t`Loading failed`
150
) : h('div', { className: 'showing-container', ref: containerRef },
151
- h('div', { className: 'cover ' + (cover ? '' : 'none'), style: { backgroundImage: `url("${cover}")`, } }),
151
+ h('div', { className: 'cover ' + (cover ? '' : 'none'), style: { backgroundImage: cover && `url("${cover}")` } }),
152
h(getShowType(cur) || Fragment, {
153
src: cur.uri,
154
className: 'showing',