diff --git a/README.md b/README.md
index 869b6c9..b12d2e8 100644
--- a/README.md
+++ b/README.md
@@ -87,7 +87,7 @@ XML backups from the [SMS Backup & Restore app](https://play.google.com/store/ap
Q: What media and attachments can be previewed?
-SBV supports most images formats (jpg, png, gif, heic) and video formats (mp4, 3gp). Contact cards (aka vCard or VCF) are supported.
+SBV supports most images formats (jpg, png, gif, heic), video formats (mp4, 3gp), audio (mp4). Contact cards (aka vCard or VCF) are supported.
## Known Issues
diff --git a/frontend/src/components/LazyMedia.css b/frontend/src/components/LazyMedia.css
new file mode 100644
index 0000000..c5ee032
--- /dev/null
+++ b/frontend/src/components/LazyMedia.css
@@ -0,0 +1,88 @@
+/* Audio Player Styling - Wide timeline control for easier seeking */
+
+/* Make audio player fill width and ensure it's displayed properly */
+.audio-player {
+ width: 100% !important;
+ min-width: 320px;
+ height: 54px;
+ outline: none;
+ display: block;
+ background-color: #f8f9fa;
+ border-radius: 0.375rem;
+}
+
+/* Chrome/Safari/Edge - Webkit browsers */
+.audio-player::-webkit-media-controls-panel {
+ width: 100%;
+ background-color: #f8f9fa;
+ border-radius: 0.375rem;
+ padding: 8px 12px;
+}
+
+/* Ensure enclosure takes full width */
+.audio-player::-webkit-media-controls-enclosure {
+ width: 100%;
+ max-width: 100%;
+ border-radius: 0.375rem;
+}
+
+/* Make the timeline container wider */
+.audio-player::-webkit-media-controls-timeline-container {
+ flex: 1 1 auto;
+ min-width: 150px;
+}
+
+/* Make the timeline/seek bar taller and more prominent */
+.audio-player::-webkit-media-controls-timeline {
+ border-radius: 6px;
+ flex: 1 1 auto;
+ margin: 0 12px;
+ padding: 0;
+}
+
+/* Style the timeline track */
+.audio-player::-webkit-media-controls-timeline::-webkit-slider-runnable-track {
+ border-radius: 6px;
+}
+
+.audio-player::-webkit-media-controls-timeline::-webkit-slider-thumb {
+ height: 20px;
+ width: 20px;
+}
+
+/* Make the time displays more readable */
+.audio-player::-webkit-media-controls-current-time-display,
+.audio-player::-webkit-media-controls-time-remaining-display {
+ font-size: 14px;
+ min-width: 48px;
+ color: #495057;
+}
+
+/* Style buttons */
+.audio-player::-webkit-media-controls-play-button,
+.audio-player::-webkit-media-controls-mute-button {
+ width: 32px;
+ height: 32px;
+}
+
+/* Firefox - Moz browsers */
+.audio-player::-moz-range-track {
+ height: 12px;
+ border-radius: 6px;
+ background-color: #dee2e6;
+}
+
+.audio-player::-moz-range-thumb {
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
+ background-color: #0d6efd;
+ border: none;
+ cursor: pointer;
+}
+
+.audio-player::-moz-range-progress {
+ height: 12px;
+ border-radius: 6px;
+ background-color: #0d6efd;
+}
diff --git a/frontend/src/components/LazyMedia.jsx b/frontend/src/components/LazyMedia.jsx
index 21b89d7..612198c 100644
--- a/frontend/src/components/LazyMedia.jsx
+++ b/frontend/src/components/LazyMedia.jsx
@@ -1,6 +1,7 @@
import { useState, useEffect, useRef } from 'react'
import axios from 'axios'
import VCardPreview from './VCardPreview'
+import './LazyMedia.css'
const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
@@ -128,6 +129,7 @@ function LazyMedia({ messageId, mediaType, className, alt = "MMS attachment" })
const isImage = mediaType.startsWith('image/')
const isVideo = mediaType.startsWith('video/')
+ const isAudio = mediaType.startsWith('audio/')
const isVCard = mediaType === 'text/x-vcard' ||
mediaType === 'text/vcard' ||
mediaType === 'text/directory'
@@ -141,9 +143,9 @@ function LazyMedia({ messageId, mediaType, className, alt = "MMS attachment" })
className="bg-light rounded d-flex align-items-center justify-content-center position-relative overflow-hidden"
style={{
width: '100%',
- aspectRatio: isVideo ? '16/9' : '3/4', // Common phone camera ratio
- minHeight: isVideo ? '200px' : '300px', // Larger to prevent layout shift
- maxHeight: '400px',
+ aspectRatio: isVideo ? '16/9' : isAudio ? 'auto' : '3/4', // Common phone camera ratio
+ minHeight: isVideo ? '200px' : isAudio ? '80px' : '300px', // Larger to prevent layout shift
+ maxHeight: isAudio ? '80px' : '400px',
backgroundColor: '#f8f9fa',
backgroundImage: 'linear-gradient(45deg, #e9ecef 25%, transparent 25%, transparent 75%, #e9ecef 75%, #e9ecef), linear-gradient(45deg, #e9ecef 25%, transparent 25%, transparent 75%, #e9ecef 75%, #e9ecef)',
backgroundSize: '20px 20px',
@@ -156,7 +158,7 @@ function LazyMedia({ messageId, mediaType, className, alt = "MMS attachment" })
Loading...
- Loading {isImage ? 'image' : isVideo ? 'video' : isVCard ? 'contact' : 'media'}...
+ Loading {isImage ? 'image' : isVideo ? 'video' : isAudio ? 'audio' : isVCard ? 'contact' : 'media'}...
) : (
@@ -170,18 +172,23 @@ function LazyMedia({ messageId, mediaType, className, alt = "MMS attachment" })
)}
+ {isAudio && (
+
+ )}
{isVCard && (
)}
- {!isImage && !isVideo && !isVCard && (
+ {!isImage && !isVideo && !isAudio && !isVCard && (
)}
- {isImage ? 'Image' : isVideo ? 'Video' : isVCard ? 'Contact' : 'Attachment'}
+ {isImage ? 'Image' : isVideo ? 'Video' : isAudio ? 'Audio' : isVCard ? 'Contact' : 'Attachment'}