Add voice message support: audio upload (MP3/OGG/WAV/WebM/M4A), inline audio player in posts, voice note button + preview in composer

2026-05-18 11:57:48 -07:00
parent 07ac9f112d
commit 9f91b0c544
5 changed files with 340 additions and 9 deletions
@@ -947,3 +947,113 @@
  justify-content: flex-end;
  gap: 8px;
 }
+
+/* ---------- Voice note button in composer ---------- */
+.beep-voice-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  color: var(--beep-accent);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.beep-voice-btn:hover {
+  background: rgba(29, 155, 240, 0.10);
+  color: var(--beep-accent);
+}
+
+.beep-voice-btn svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+/* ---------- Voice note preview in composer ---------- */
+.beep-compose-voice-preview {
+  margin-top: 8px;
+  margin-bottom: 4px;
+}
+
+.beep-compose-voice-preview[hidden] {
+  display: none;
+}
+
+.beep-voice-preview-card {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--beep-hover);
+  border: 1px solid var(--beep-border);
+  border-radius: 9999px;
+  padding: 6px 12px 6px 10px;
+  font-size: 13px;
+  color: var(--beep-text);
+}
+
+.beep-voice-preview-card svg {
+  color: var(--beep-accent);
+  flex-shrink: 0;
+}
+
+.beep-voice-remove {
+  background: transparent;
+  border: 0;
+  color: var(--beep-text-secondary);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 0 0 4px;
+  display: flex;
+  align-items: center;
+  transition: color 0.15s ease;
+}
+
+.beep-voice-remove:hover {
+  color: #F4212E;
+}
+
+/* ---------- Voice note player in posts ---------- */
+.beep-voice-note {
+  margin: 6px 0 2px;
+  background: var(--beep-hover);
+  border: 1px solid var(--beep-border);
+  border-radius: 12px;
+  padding: 10px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.beep-voice-note audio {
+  width: 100%;
+  height: 36px;
+  display: block;
+}
+
+/* Style the audio element across browsers */
+.beep-voice-note audio::-webkit-media-controls-panel {
+  background: var(--beep-bg);
+}
+
+.beep-voice-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--beep-text-secondary);
+  font-weight: 500;
+}
+
+.beep-voice-label svg {
+  color: var(--beep-accent);
+  flex-shrink: 0;
+}
+
+.beep-voice-duration {
+  font-size: 12px;
+  color: var(--beep-text-secondary);
+  font-variant-numeric: tabular-nums;
+}