diff options
| -rw-r--r-- | src/media-timeline.js | 3 | ||||
| -rw-r--r-- | src/style.css | 1 |
2 files changed, 4 insertions, 0 deletions
diff --git a/src/media-timeline.js b/src/media-timeline.js index 8b6045e..648c998 100644 --- a/src/media-timeline.js +++ b/src/media-timeline.js @@ -123,6 +123,9 @@ export function mediaTimeline(player, url, { h, event, moments, glyph, label }) } const items = ev && finite ? moments(ev.id, url) : []; const next = items.map(x => x.id).join(',') + '@' + (finite ? player.duration : 0); + // a video has its own seek bar: this one shows under it only to carry + // what was said at a moment (two bars read as a glitch on a phone) + box.classList.toggle('has-marks', items.length > 0); if (signature !== next) { signature = next; marks.replaceChildren(...items.map(x => h('button', { type: 'button', class: 'media-mark', title: mediaClock(x.moment.seconds) + ' ' + x.text, diff --git a/src/style.css b/src/style.css index a895054..ebfe47a 100644 --- a/src/style.css +++ b/src/style.css @@ -2011,6 +2011,7 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut /* A post's audio/video timeline: the waveform (audio), and what was said, reacted or zapped at a moment, sitting over the bar at that moment. */ .media-timeline { padding: 24px 0 8px; white-space: normal; color: var(--text); } +.note-video-box .media-timeline:not(.has-marks) { display: none; } .media-time { font-variant-numeric: tabular-nums; } .media-seek { position: relative; height: 42px; --played: 0%; } .media-wave { position: absolute; inset: 3px 0; display: flex; align-items: center; gap: 2px; |