diff --git a/index.html b/index.html index 705ce2a..c470bfe 100644 --- a/index.html +++ b/index.html @@ -183,79 +183,48 @@ -
- - -
-
- -
- -
-
- - -
No attachments selected.
+ + +
- - - @@ -265,8 +234,52 @@
+
No attachments selected.
+ + + + + +
+
+ + +
+
@@ -388,22 +401,27 @@
-
- -
-
- +
+ +
+
+ - -
No attachments selected.
-
- +
+ + + + + + + +
+
No attachments selected.
+ + + + + +
+
+ + +
+
@@ -1778,42 +1842,40 @@ videoRecorder.onstop = () => { const blob = new Blob(chunks, { type: 'video/webm' }); - const file = new File([blob], `video-${Date.now()}.webm`, { type: 'video/webm' }); - pendingNoteAttachments.push(file); - renderNoteAttachmentsList(); + const videoPreviewEl = document.getElementById('noteVideoPlayer'); + const videoPreviewContainer = document.getElementById('noteVideoPreview'); + const recordingUI = document.getElementById('noteVideoRecordingUI'); + + // Show video preview + videoPreviewEl.src = URL.createObjectURL(blob); + videoPreviewContainer.classList.remove('hidden'); + recordingUI.classList.add('hidden'); + + // Temporarily store video blob for use + window.noteVideoBlob = blob; stream.getTracks().forEach(track => track.stop()); }; + // Show recording UI + const recordingUI = document.getElementById('noteVideoRecordingUI'); + recordingUI.classList.remove('hidden'); + document.getElementById('noteVideoPreview').classList.add('hidden'); + videoRecorder.start(); - // Show recording UI - const recordStatus = document.getElementById('recordStatus'); - const originalStatus = recordStatus.textContent; - recordStatus.textContent = 'Recording video... (Click to stop)'; - recordStatus.style.cursor = 'pointer'; - recordStatus.style.color = '#dc2626'; - + const stopBtn = document.getElementById('noteStopVideoRecordingBtn'); const stopHandler = () => { - recordStatus.removeEventListener('click', stopHandler); - videoRecorder.stop(); - recordStatus.textContent = originalStatus; - recordStatus.style.cursor = 'auto'; - recordStatus.style.color = ''; + if (videoRecorder.state === 'recording') { + videoRecorder.stop(); + } }; - recordStatus.addEventListener('click', stopHandler); + stopBtn.addEventListener('click', stopHandler, { once: true }); // Auto-stop after 5 minutes setTimeout(() => { if (videoRecorder.state === 'recording') { - recordStatus.removeEventListener('click', stopHandler); videoRecorder.stop(); - recordStatus.textContent = 'Video recording stopped (5 minute limit)'; - recordStatus.style.cursor = 'auto'; - setTimeout(() => { - recordStatus.textContent = originalStatus; - recordStatus.style.color = ''; - }, 3000); } }, 5 * 60 * 1000); } catch (err) { @@ -1830,6 +1892,23 @@ }); }); + document.getElementById('noteUseVideoBtn').addEventListener('click', () => { + if (window.noteVideoBlob) { + const file = new File([window.noteVideoBlob], `video-${Date.now()}.webm`, { type: 'video/webm' }); + pendingNoteAttachments.push(file); + renderNoteAttachmentsList(); + document.getElementById('noteVideoPreview').classList.add('hidden'); + document.getElementById('noteVideoPlayer').src = ''; + window.noteVideoBlob = null; + } + }); + + document.getElementById('noteRemoveVideoBtn').addEventListener('click', () => { + document.getElementById('noteVideoPreview').classList.add('hidden'); + document.getElementById('noteVideoPlayer').src = ''; + window.noteVideoBlob = null; + }); + document.getElementById('clearAttachmentsBtn').addEventListener('click', (e) => { e.preventDefault(); pendingNoteAttachments = []; @@ -1893,42 +1972,40 @@ videoRecorder.onstop = () => { const blob = new Blob(chunks, { type: 'video/webm' }); - const file = new File([blob], `video-${Date.now()}.webm`, { type: 'video/webm' }); - pendingConversationAttachments.push(file); - renderConversationAttachmentsList(); + const videoPreviewEl = document.getElementById('conversationVideoPlayer'); + const videoPreviewContainer = document.getElementById('conversationVideoPreview'); + const recordingUI = document.getElementById('conversationVideoRecordingUI'); + + // Show video preview + videoPreviewEl.src = URL.createObjectURL(blob); + videoPreviewContainer.classList.remove('hidden'); + recordingUI.classList.add('hidden'); + + // Temporarily store video blob for use + window.conversationVideoBlob = blob; stream.getTracks().forEach(track => track.stop()); }; + // Show recording UI + const recordingUI = document.getElementById('conversationVideoRecordingUI'); + recordingUI.classList.remove('hidden'); + document.getElementById('conversationVideoPreview').classList.add('hidden'); + videoRecorder.start(); - // Show recording UI - const recordStatus = document.getElementById('conversationRecordStatus'); - const originalStatus = recordStatus.textContent; - recordStatus.textContent = 'Recording video... (Click to stop)'; - recordStatus.style.cursor = 'pointer'; - recordStatus.style.color = '#dc2626'; - + const stopBtn = document.getElementById('conversationStopVideoRecordingBtn'); const stopHandler = () => { - recordStatus.removeEventListener('click', stopHandler); - videoRecorder.stop(); - recordStatus.textContent = originalStatus; - recordStatus.style.cursor = 'auto'; - recordStatus.style.color = ''; + if (videoRecorder.state === 'recording') { + videoRecorder.stop(); + } }; - recordStatus.addEventListener('click', stopHandler); + stopBtn.addEventListener('click', stopHandler, { once: true }); // Auto-stop after 5 minutes setTimeout(() => { if (videoRecorder.state === 'recording') { - recordStatus.removeEventListener('click', stopHandler); videoRecorder.stop(); - recordStatus.textContent = 'Video recording stopped (5 minute limit)'; - recordStatus.style.cursor = 'auto'; - setTimeout(() => { - recordStatus.textContent = originalStatus; - recordStatus.style.color = ''; - }, 3000); } }, 5 * 60 * 1000); } catch (err) { @@ -1945,6 +2022,23 @@ }); }); + document.getElementById('conversationUseVideoBtn').addEventListener('click', () => { + if (window.conversationVideoBlob) { + const file = new File([window.conversationVideoBlob], `video-${Date.now()}.webm`, { type: 'video/webm' }); + pendingConversationAttachments.push(file); + renderConversationAttachmentsList(); + document.getElementById('conversationVideoPreview').classList.add('hidden'); + document.getElementById('conversationVideoPlayer').src = ''; + window.conversationVideoBlob = null; + } + }); + + document.getElementById('conversationRemoveVideoBtn').addEventListener('click', () => { + document.getElementById('conversationVideoPreview').classList.add('hidden'); + document.getElementById('conversationVideoPlayer').src = ''; + window.conversationVideoBlob = null; + }); + document.getElementById('conversationClearAttachmentsBtn').addEventListener('click', (e) => { e.preventDefault(); pendingConversationAttachments = [];