chore: release v0.1.1.8

VERSION

@@ -1 +1 @@
-0.1.1.1
+0.1.1.9

client/Dockerfile

@@ -29,4 +29,4 @@ EXPOSE 80
 
 # Health check to verify Nginx is actively running
 HEALTHCHECK --interval=30s --timeout=5s --start-period=3s --retries=3 \
-  CMD wget --no-verbose --tries=1 --spider http://localhost:80/ || exit 1
+  CMD wget --no-verbose --tries=1 --spider http://127.0.0.1:80/ || exit 1

client/nginx.conf

@@ -8,7 +8,7 @@ server {
     add_header X-Frame-Options "SAMEORIGIN" always;
     add_header Referrer-Policy "strict-origin-when-cross-origin" always;
     add_header Permissions-Policy "camera=(self), geolocation=(self), microphone=(self)" always;
-    add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://plausible.elpatron.me; connect-src 'self' https://plausible.elpatron.me; img-src 'self' data: blob: https://*.tile.openstreetmap.org; style-src 'self' 'unsafe-inline'; font-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self';" always;
+    add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://plausible.elpatron.me; connect-src 'self' https://plausible.elpatron.me; img-src 'self' data: blob: https://*.tile.openstreetmap.org; media-src 'self' blob: data:; style-src 'self' 'unsafe-inline'; font-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self';" always;
 
     # Service worker and app shell must revalidate so PWA updates are detected
     location ~* ^/(sw\.js|workbox-.*\.js|manifest\.webmanifest|version\.json)$ {
@@ -18,7 +18,7 @@ server {
         add_header X-Frame-Options "SAMEORIGIN" always;
         add_header Referrer-Policy "strict-origin-when-cross-origin" always;
         add_header Permissions-Policy "camera=(self), geolocation=(self), microphone=(self)" always;
-        add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://plausible.elpatron.me; connect-src 'self' https://plausible.elpatron.me; img-src 'self' data: blob: https://*.tile.openstreetmap.org; style-src 'self' 'unsafe-inline'; font-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self';" always;
+        add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://plausible.elpatron.me; connect-src 'self' https://plausible.elpatron.me; img-src 'self' data: blob: https://*.tile.openstreetmap.org; media-src 'self' blob: data:; style-src 'self' 'unsafe-inline'; font-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self';" always;
     }
 
     location = /index.html {
@@ -28,7 +28,7 @@ server {
         add_header X-Frame-Options "SAMEORIGIN" always;
         add_header Referrer-Policy "strict-origin-when-cross-origin" always;
         add_header Permissions-Policy "camera=(self), geolocation=(self), microphone=(self)" always;
-        add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://plausible.elpatron.me; connect-src 'self' https://plausible.elpatron.me; img-src 'self' data: blob: https://*.tile.openstreetmap.org; style-src 'self' 'unsafe-inline'; font-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self';" always;
+        add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://plausible.elpatron.me; connect-src 'self' https://plausible.elpatron.me; img-src 'self' data: blob: https://*.tile.openstreetmap.org; media-src 'self' blob: data:; style-src 'self' 'unsafe-inline'; font-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self';" always;
     }
 
     location / {

client/src/App.css

@@ -36,6 +36,10 @@ code {
   min-height: 100svh;
   padding: 24px 16px calc(48px + env(safe-area-inset-bottom, 0px));
   box-sizing: border-box;
+  background-image: linear-gradient(rgba(15, 23, 42, 0.3), rgba(15, 23, 42, 0.5)), url('/login-bg.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 /* Glassmorphism Auth Card */
@@ -5573,7 +5577,7 @@ html.theme-cupertino .events-scroll-container {
   flex-wrap: wrap;
   gap: 6px;
   padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
-  font-size: 11px;
+  font-size: 13px;
   line-height: 1.4;
   color: #64748b;
   background: rgba(11, 12, 16, 0.72);
@@ -5615,7 +5619,7 @@ html.theme-cupertino .events-scroll-container {
   gap: 4px;
   padding: 2px 8px;
   border-radius: 999px;
-  font-size: 11px;
+  font-size: 13px;
   font-weight: 500;
   color: #94a3b8;
   text-decoration: none;

client/src/components/AppFooter.tsx

@@ -35,7 +35,7 @@ export default function AppFooter() {
         aria-label={t('footer.kofi_title')}
         onClick={() => trackPlausibleEvent(PlausibleEvents.KOFI_LINK_CLICKED)}
       >
-        <Coffee size={12} aria-hidden="true" />
+        <Coffee size={14} aria-hidden="true" />
         <span>{t('footer.kofi_label')}</span>
       </a>
     </footer>

client/src/components/LiveVoiceCapture.tsx

@@ -43,6 +43,56 @@ export default function LiveVoiceCapture({
   const [previewMime, setPreviewMime] = useState('audio/webm')
   const [previewDurationSec, setPreviewDurationSec] = useState(0)
   const [saving, setSaving] = useState(false)
+  const [logs, setLogs] = useState<string[]>([])
+
+  const log = useCallback((msg: string) => {
+    console.log(`[VoiceDebug] ${msg}`)
+    setLogs((prev) => [...prev, `${new Date().toLocaleTimeString()}: ${msg}`])
+  }, [])
+
+  const previewAudioRef = useRef<HTMLAudioElement | null>(null)
+
+  useEffect(() => {
+    const el = previewAudioRef.current
+    if (!el) {
+      log('previewAudioRef is null')
+      return
+    }
+
+    log('Preview audio player loaded. readyState=' + el.readyState + ', duration=' + el.duration + ', src=' + el.src)
+
+    const handleLoadedMetadata = () => {
+      log('loadedmetadata event fired. readyState=' + el.readyState + ', duration=' + el.duration)
+      if (el.duration === Infinity || isNaN(el.duration) || el.duration === 0) {
+        log('Duration correction hack triggered (duration=' + el.duration + '). Seeking to 1e10...')
+        el.currentTime = 1e10
+        const onTimeUpdate = () => {
+          log('timeupdate event. currentTime=' + el.currentTime + ', duration=' + el.duration)
+          el.currentTime = 0
+          el.removeEventListener('timeupdate', onTimeUpdate)
+          log('currentTime reset to 0. Final duration=' + el.duration)
+        }
+        el.addEventListener('timeupdate', onTimeUpdate)
+      } else {
+        log('Duration correction skipped (duration is valid)')
+      }
+    }
+
+    if (el.readyState >= 1) {
+      log('readyState >= 1. Executing hack immediately...')
+      handleLoadedMetadata()
+    } else {
+      log('readyState = 0. Adding loadedmetadata event listener...')
+      el.addEventListener('loadedmetadata', handleLoadedMetadata)
+    }
+
+    log('Calling el.load() to force loading of the media resource...')
+    el.load()
+
+    return () => {
+      el.removeEventListener('loadedmetadata', handleLoadedMetadata)
+    }
+  }, [previewUrl, log])
 
   const stopStream = useCallback(() => {
     for (const track of streamRef.current?.getTracks() ?? []) {
@@ -110,28 +160,51 @@ export default function LiveVoiceCapture({
     if (!recorder || recorder.state !== 'recording') return
     recorder.stop()
     clearTimer()
-    stopStream()
-  }, [clearTimer, stopStream])
+  }, [clearTimer])
 
   const startRecording = async () => {
     setMicError(null)
     chunksRef.current = []
+    log('startRecording flow triggered')
     if (!navigator.mediaDevices?.getUserMedia) {
+      log('navigator.mediaDevices.getUserMedia is unavailable')
       setMicError(t('logs.live_voice_mic_denied'))
       return
     }
     try {
+      log('Requesting getUserMedia audio stream...')
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
       streamRef.current = stream
+      log('Stream obtained successfully. active=' + stream.active)
+      stream.getTracks().forEach((track, i) => {
+        log(`Track ${i}: label="${track.label}" enabled=${track.enabled} readyState=${track.readyState} muted=${track.muted}`)
+      })
+
       const mimeType = pickMediaRecorderMimeType()
+      log('MIME type candidates support check:')
+      const MIME_CANDIDATES = [
+        'audio/webm;codecs=opus',
+        'audio/webm',
+        'audio/mp4',
+        'audio/ogg;codecs=opus'
+      ]
+      MIME_CANDIDATES.forEach(mime => {
+        log(` - ${mime}: ${MediaRecorder.isTypeSupported(mime) ? 'SUPPORTED' : 'UNSUPPORTED'}`)
+      })
+      log('Selected MIME from picker: ' + mimeType)
+
       const recorder = mimeType
         ? new MediaRecorder(stream, { mimeType })
         : new MediaRecorder(stream)
       mediaRecorderRef.current = recorder
       const resolvedMime = recorder.mimeType || mimeType || 'audio/webm'
+      log('MediaRecorder created. Resolved mime=' + resolvedMime)
 
       recorder.ondataavailable = (ev) => {
-        if (ev.data.size > 0) chunksRef.current.push(ev.data)
+        log(`ondataavailable event: data size=${ev.data?.size} bytes`)
+        if (ev.data && ev.data.size > 0) {
+          chunksRef.current.push(ev.data)
+        }
       }
 
       recorder.onstop = () => {
@@ -139,44 +212,67 @@ export default function LiveVoiceCapture({
           VOICE_MEMO_MAX_DURATION_SEC,
           Math.max(1, Math.round((Date.now() - startedAtRef.current) / 1000))
         )
-        const blob = new Blob(chunksRef.current, { type: resolvedMime })
-        chunksRef.current = []
-        try {
-          assertVoiceMemoBlobSize(blob)
-          finishRecording(blob, resolvedMime, durationSec)
-        } catch {
-          setMicError(t('logs.live_voice_too_large'))
-          setPhase('idle')
-        }
+        log(`onstop triggered. durationSec=${durationSec}. Wrapping in 50ms timeout...`)
+        setTimeout(() => {
+          log(`Creating Blob from ${chunksRef.current.length} chunks. Resolved mime=${resolvedMime}`)
+          const totalChunksSize = chunksRef.current.reduce((acc, chunk) => acc + chunk.size, 0)
+          log(`Total raw chunks size: ${totalChunksSize} bytes`)
+          const blob = new Blob(chunksRef.current, { type: resolvedMime })
+          chunksRef.current = []
+          stopStream()
+          log(`Blob finalized: size=${blob.size} bytes, type=${blob.type}`)
+          try {
+            assertVoiceMemoBlobSize(blob)
+            log('Blob size assertion passed. Calling finishRecording...')
+            finishRecording(blob, resolvedMime, durationSec)
+          } catch (err) {
+            log('Blob size assertion failed (too large)')
+            setMicError(t('logs.live_voice_too_large'))
+            setPhase('idle')
+          }
+        }, 50)
       }
 
-      recorder.onerror = () => {
+      recorder.onerror = (ev) => {
+        log('MediaRecorder onerror triggered: ' + JSON.stringify(ev))
         setMicError(t('logs.live_voice_record_failed'))
         resetAll()
       }
 
       startedAtRef.current = Date.now()
-      recorder.start(200)
+      log('Calling recorder.start()...')
+      recorder.start()
+      log('recorder.start() called. State=' + recorder.state)
       setPhase('recording')
       setElapsedSec(0)
       timerRef.current = window.setInterval(() => {
         const sec = Math.floor((Date.now() - startedAtRef.current) / 1000)
         setElapsedSec(sec)
         if (sec >= VOICE_MEMO_MAX_DURATION_SEC) {
+          log('Max duration reached. Stopping recording...')
           stopRecording()
         }
       }, 250)
-    } catch {
+    } catch (err: any) {
+      log('Error in startRecording try-catch block: ' + (err instanceof Error ? err.stack || err.message : String(err)))
       setMicError(t('logs.live_voice_mic_denied'))
       stopStream()
     }
   }
 
   const handleSave = async () => {
-    if (!previewBlob || saving || busy) return
+    if (!previewBlob || saving || busy) {
+      log('handleSave ignored. previewBlob=' + (previewBlob ? 'PRESENT' : 'NULL') + ' saving=' + saving + ' busy=' + busy)
+      return
+    }
+    log('handleSave triggered. Saving blob size=' + previewBlob.size + ' mime=' + previewMime + ' duration=' + previewDurationSec)
     setSaving(true)
     try {
-      onSave(previewBlob, previewMime, previewDurationSec)
+      log('Invoking onSave callback...')
+      await onSave(previewBlob, previewMime, previewDurationSec)
+      log('onSave callback successfully finished!')
+    } catch (err: any) {
+      log('Error during onSave execution: ' + (err instanceof Error ? err.stack || err.message : String(err)))
     } finally {
       setSaving(false)
     }
@@ -241,7 +337,7 @@ export default function LiveVoiceCapture({
 
         {phase === 'preview' && previewUrl && (
           <>
-            <audio className="voice-memo-player" controls src={previewUrl} preload="auto" />
+            <audio ref={previewAudioRef} className="voice-memo-player" controls src={previewUrl} preload="auto" />
             {onCaptionChange && (
               <label className="live-voice-caption-field">
                 <span>{t('logs.live_voice_caption_label')}</span>
@@ -278,6 +374,41 @@ export default function LiveVoiceCapture({
             </div>
           </>
         )}
+
+        {/* Debug Logs Panel */}
+        <div style={{
+          marginTop: '20px',
+          padding: '10px',
+          background: 'rgba(0,0,0,0.6)',
+          border: '1px solid rgba(255,255,255,0.15)',
+          borderRadius: '8px',
+          maxHeight: '180px',
+          overflowY: 'auto',
+          textAlign: 'left',
+          fontSize: '11px',
+          fontFamily: 'monospace',
+          color: '#4ade80',
+          width: '100%',
+          boxSizing: 'border-box'
+        }}>
+          <div style={{ fontWeight: 'bold', marginBottom: '4px', borderBottom: '1px solid rgba(255,255,255,0.2)', paddingBottom: '2px', display: 'flex', justifyContent: 'space-between' }}>
+            <span>Debug Console Logs:</span>
+            <button 
+              type="button" 
+              onClick={() => setLogs([])}
+              style={{ background: 'none', border: 'none', color: '#fda4af', cursor: 'pointer', fontSize: '10px', padding: '0 4px', textDecoration: 'underline' }}
+            >
+              Clear
+            </button>
+          </div>
+          {logs.length === 0 ? (
+            <span style={{ color: '#94a3b8' }}>No logs yet. Start recording to debug.</span>
+          ) : (
+            logs.map((l, i) => (
+              <div key={i} style={{ wordBreak: 'break-all', marginBottom: '2px' }}>{l}</div>
+            ))
+          )}
+        </div>
       </div>
     </div>
   )

client/src/components/VoiceMemoPlayer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { db } from '../services/db.js'
 import { getActiveMasterKey } from '../services/auth.js'
@@ -30,6 +30,38 @@ export default function VoiceMemoPlayer({
   const [src, setSrc] = useState<string | null>(preloaded?.audio ?? null)
   const [error, setError] = useState(false)
 
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+
+  useEffect(() => {
+    const el = audioRef.current
+    if (!el) return
+
+    const handleLoadedMetadata = () => {
+      if (el.duration === Infinity || isNaN(el.duration) || el.duration === 0) {
+        el.currentTime = 1e10
+        const onTimeUpdate = () => {
+          el.currentTime = 0
+          el.removeEventListener('timeupdate', onTimeUpdate)
+        }
+        el.addEventListener('timeupdate', onTimeUpdate)
+      }
+    }
+
+    if (el.readyState >= 1) {
+      handleLoadedMetadata()
+    } else {
+      el.addEventListener('loadedmetadata', handleLoadedMetadata)
+    }
+
+    if (src) {
+      el.load()
+    }
+
+    return () => {
+      el.removeEventListener('loadedmetadata', handleLoadedMetadata)
+    }
+  }, [src])
+
   useEffect(() => {
     if (preloaded?.audio) {
       setSrc(preloaded.audio)
@@ -75,7 +107,7 @@ export default function VoiceMemoPlayer({
 
   return (
     <div className="voice-memo-player-shell">
-      <audio className={playerClass} controls preload="none" src={src} />
+      <audio ref={audioRef} className={playerClass} controls preload="metadata" src={src} />
     </div>
   )
 }