diff options
| -rw-r--r-- | src/features/messages.js | 4 | ||||
| -rw-r--r-- | src/style.css | 12 |
2 files changed, 13 insertions, 3 deletions
diff --git a/src/features/messages.js b/src/features/messages.js index 8481bcd..ca560c3 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -4543,8 +4543,10 @@ export function messagesFeature(ctx) { .sort((a, b) => a.moment.seconds - b.moment.seconds) .map(x => ({ ...x, text: displayName(x.ev.kind === 9735 || x.ev.kind === 9737 ? zapperOf(x.ev) || x.ev.pubkey : x.ev.pubkey) + ' · ' + String(x.text || x.icon).slice(0, 240) })); // how a moment shows on a bar: a reaction as its emoji (a :code: as its - // picture, from the reaction's own tag), a zap ⚡, a reply ↩ + // picture, from the reaction's own tag), a zap ⚡, a reply as its + // author's face function momentGlyph(x) { + if (x.ev.kind === 1 || x.ev.kind === 1111) return avatar(x.ev.pubkey, 'chat-avatar media-mark-face', false); if (x.ev.kind !== 7) return x.icon; const code = shortcodeOf(x.ev.content); const tag = code && x.ev.tags.find(t => t[0] === 'emoji' && t[1] === code && t[2]); diff --git a/src/style.css b/src/style.css index 460b584..e550f25 100644 --- a/src/style.css +++ b/src/style.css @@ -2018,7 +2018,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); } +.media-timeline { padding: 8px 0; 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%; } @@ -2030,12 +2030,20 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut .has-wave .media-wave::after { content: ''; position: absolute; inset: 0 0 0 var(--played); background: var(--bg, #fff); opacity: .55; pointer-events: none; } .media-seek input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: .01; cursor: pointer; } .media-seek:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } -.media-marks { position: absolute; left: 0; right: 0; top: -22px; height: 22px; pointer-events: none; } +/* the marks hang just under the line, at their moment (a plain bar: inside + its touch strip); under a waveform, below it */ +.media-marks { position: absolute; left: 0; right: 0; top: 24px; height: 18px; pointer-events: none; } +.has-wave .media-marks { top: 100%; height: 22px; } +.media-seek.has-wave:has(.media-mark) { margin-bottom: 22px; } +.media-mark { bottom: auto; top: 0; } .media-mark, .mp-mark { position: absolute; bottom: 0; transform: translateX(-50%); padding: 0 2px; margin: 0; border: 0; background: none; font-size: 16px; line-height: 1; cursor: pointer; pointer-events: auto; } .media-mark .cemoji, .mp-mark .cemoji { width: 20px; height: 20px; vertical-align: bottom; } +.media-mark-face { display: block; width: 20px !important; height: 20px !important; min-width: 0; font-size: 8px; border-radius: 50%; } +.mp-mark .media-mark-face { width: 26px !important; height: 26px !important; box-shadow: 0 0 0 1.5px #fff; } +.mp-pop .media-mark-face { width: 36px !important; height: 36px !important; box-shadow: 0 0 0 2px #fff; } /* the pager's: above its seek bar, there when the bar is */ .mp-marks { position: absolute; left: 0; right: 0; bottom: 10px; height: 26px; pointer-events: none; } .mp-mark { font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); } |