Add timestamp comments, reactions and zaps with audio waveform seeking

1 files changed, 27 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
index c4e5202..a7a176e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1960,3 +1960,30 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut
 .call-log-pill .chat-time { margin: 0; font-size: 11px; opacity: .7; }
 .call-log-pill svg { width: 16px; height: 16px; }
 .chat-row.call-log.missed .call-log-pill { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
+
+/* Timestamp actions and the audio waveform share the player's lifetime. */
+.media-timeline { padding: 8px 0; white-space: normal; color: var(--text); }
+.media-moment-actions { gap: 6px; flex-wrap: wrap; align-items: center; }
+.media-moment-actions[hidden] { display: none; }
+.media-moment-actions > span { margin-right: auto; font-variant-numeric: tabular-nums; }
+.media-moment-actions button { font-size: 12px; min-height: 32px; }
+.media-seek { position: relative; height: 42px; --played: 0%; }
+.media-wave { position: absolute; inset: 3px 0; display: flex; align-items: center; gap: 2px;
+  background: linear-gradient(to right, var(--accent) var(--played), var(--line) var(--played)); }
+.media-wave:empty { height: 4px; top: 19px; }
+.media-wave i { flex: 1; background: var(--accent); border-radius: 2px; min-width: 1px; }
+.has-wave .media-wave { background: none; }
+.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 { display: flex; gap: 6px; overflow-x: auto; padding-top: 5px; }
+.media-mark { flex-shrink: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.media-marks:empty { display: none; }
+.mp-slide > .media-timeline { position: absolute; left: 16px; right: 16px; bottom: calc(var(--mp-seek-lift) + 30px); z-index: 4;
+  padding: 6px; border-radius: 8px; background: rgba(0,0,0,.7); color: #fff; display: none; }
+.media-pager.show .mp-cur > .media-timeline { display: block; }
+.mp-slide > .media-timeline .media-seek { display: none; }
+.media-pager.videos.show .mp-meta { padding-bottom: calc(var(--mp-seek-lift) + 130px); }
+
+.media-moment-detail { overflow-wrap: anywhere; max-height: 72px; overflow-y: auto; margin-top: 5px; }
+.media-moment-detail:empty { display: none; }