Add video recording UI and preview functionality
- Show visible 'Recording Video...' indicator with pulsing red dot when recording starts - Add 'Stop Recording' button for easy access (not just text feedback) - Display video preview player after recording completes - Add 'Use Video' button to attach recorded video to form - Add 'Remove Video' button to discard recording without attaching - Implement separate video recording for note and conversation containers - Store video blob in window.noteVideoBlob and window.conversationVideoBlob - Video player shows up to 300px height with full controls - Red/green color scheme for visual feedback (recording = red, actions = green)
This commit is contained in:
+226
-132
@@ -183,79 +183,48 @@
|
|||||||
<button id="recordBtn" class="absolute bottom-12 right-0 w-24 h-24 rounded-full overflow-hidden shadow-lg hover:shadow-xl transition-shadow disabled:opacity-50 border-4 border-white bg-white" title="Click to record audio">
|
<button id="recordBtn" class="absolute bottom-12 right-0 w-24 h-24 rounded-full overflow-hidden shadow-lg hover:shadow-xl transition-shadow disabled:opacity-50 border-4 border-white bg-white" title="Click to record audio">
|
||||||
<img src="images/prism.png" alt="Prism" class="w-full h-full object-cover object-center scale-125">
|
<img src="images/prism.png" alt="Prism" class="w-full h-full object-cover object-center scale-125">
|
||||||
</button>
|
</button>
|
||||||
<div class="relative">
|
<div class="absolute bottom-12 right-32 flex items-center gap-2">
|
||||||
<audio id="audioPreview" class="hidden" preload="metadata"></audio>
|
<div class="relative">
|
||||||
<div id="audioPlayer" class="hidden mt-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-3 shadow-sm">
|
<button id="attachmentMenuBtn" class="px-2 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-100 transition flex items-center justify-center" type="button" title="Add attachment">
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<button id="playPauseBtn" class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-white shadow" title="Play">
|
|
||||||
▶
|
|
||||||
</button>
|
|
||||||
<div class="flex-1">
|
|
||||||
<div class="h-2 bg-gray-200 rounded-full overflow-hidden cursor-pointer" id="progressTrack">
|
|
||||||
<div id="progressFill" class="h-full bg-primary w-0"></div>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between text-xs text-gray-600 mt-1">
|
|
||||||
<span id="currentTime">0:00</span>
|
|
||||||
<span id="durationTime">0:00</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="audioMenuContainer" class="relative">
|
|
||||||
<button id="audioMenuBtn" class="px-2 py-1 rounded bg-white text-gray-700 hover:bg-gray-100 border border-gray-200" title="More options">⋯</button>
|
|
||||||
<div id="audioMenu" class="hidden absolute right-0 mt-1 w-36 rounded border border-gray-200 bg-white shadow-lg">
|
|
||||||
<button id="removeAudioBtn" class="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100">Remove audio</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="recordStatus" class="text-xs text-gray-500"></div>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-2">
|
|
||||||
<label class="block text-sm font-medium text-gray-700">Attachments</label>
|
|
||||||
<div class="relative">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<button id="attachmentMenuBtn" class="px-3 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-100 transition flex items-center gap-2" type="button" title="Add attachment">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5">
|
||||||
<path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
|
<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
|
||||||
</svg>
|
</svg>
|
||||||
Attach
|
|
||||||
</button>
|
</button>
|
||||||
<button id="clearAttachmentsBtn" class="px-3 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm" type="button">Clear</button>
|
|
||||||
<div id="noteAttachmentsSummary" class="text-xs text-gray-600">No attachments selected.</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Attachment Menu -->
|
<!-- Attachment Menu -->
|
||||||
<div id="attachmentMenu" class="hidden absolute top-full left-0 mt-2 w-48 rounded border border-gray-300 bg-white shadow-lg z-10">
|
<div id="attachmentMenu" class="hidden absolute top-[calc(100%-50px)] left-0 w-48 rounded border border-gray-300 bg-white shadow-lg z-10">
|
||||||
<button id="attachImageBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
|
<button id="attachImageBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
|
||||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
|
||||||
</svg>
|
</svg>
|
||||||
Attach Image
|
Attach Image
|
||||||
</button>
|
</button>
|
||||||
<button id="attachVideoBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
|
<button id="attachVideoBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
|
||||||
<polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
|
<polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
Attach Video
|
Attach Video
|
||||||
</button>
|
</button>
|
||||||
<button id="attachFileBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
|
<button id="attachFileBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
|
||||||
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/>
|
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/>
|
||||||
</svg>
|
</svg>
|
||||||
Attach File
|
Attach File
|
||||||
</button>
|
</button>
|
||||||
<button id="recordVideoBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
|
<button id="recordVideoBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
|
||||||
<circle cx="12" cy="13" r="9"/><path d="M12 10v6"/>
|
<circle cx="12" cy="13" r="9"/><path d="M12 10v6"/>
|
||||||
</svg>
|
</svg>
|
||||||
Record Video
|
Record Video
|
||||||
</button>
|
</button>
|
||||||
<button id="takePictureBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
|
<button id="takePictureBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
|
||||||
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/>
|
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/>
|
||||||
</svg>
|
</svg>
|
||||||
Take Picture
|
Take Picture
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Hidden file inputs -->
|
<!-- Hidden file inputs -->
|
||||||
@@ -265,8 +234,52 @@
|
|||||||
<input id="cameraInput" type="file" class="hidden" accept="image/*" capture="environment">
|
<input id="cameraInput" type="file" class="hidden" accept="image/*" capture="environment">
|
||||||
|
|
||||||
<div id="noteAttachmentsList" class="space-y-1"></div>
|
<div id="noteAttachmentsList" class="space-y-1"></div>
|
||||||
|
<div id="noteAttachmentsSummary" class="text-xs text-gray-600">No attachments selected.</div>
|
||||||
|
|
||||||
|
<!-- Video Recording UI -->
|
||||||
|
<div id="noteVideoRecordingUI" class="hidden mt-3 p-3 rounded-lg border border-red-300 bg-red-50">
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<div class="w-3 h-3 bg-red-600 rounded-full animate-pulse"></div>
|
||||||
|
<span class="text-sm font-semibold text-red-700">Recording Video...</span>
|
||||||
|
</div>
|
||||||
|
<button id="noteStopVideoRecordingBtn" class="w-full px-3 py-2 rounded bg-red-600 text-white hover:bg-red-700 text-sm font-semibold transition">Stop Recording</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Video Preview -->
|
||||||
|
<div id="noteVideoPreview" class="hidden mt-3 rounded-lg border border-gray-200 bg-gray-50 overflow-hidden">
|
||||||
|
<video id="noteVideoPlayer" controls class="w-full bg-black" style="max-height: 300px;"></video>
|
||||||
|
<div class="flex gap-2 p-3">
|
||||||
|
<button id="noteRemoveVideoBtn" class="flex-1 px-3 py-2 rounded bg-red-50 text-red-700 hover:bg-red-100 text-sm font-semibold border border-red-200 transition">Remove Video</button>
|
||||||
|
<button id="noteUseVideoBtn" class="flex-1 px-3 py-2 rounded bg-green-50 text-green-700 hover:bg-green-100 text-sm font-semibold border border-green-200 transition">Use Video</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<audio id="audioPreview" class="hidden" preload="metadata"></audio>
|
||||||
|
<div id="audioPlayer" class="hidden mt-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-3 shadow-sm">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<button id="playPauseBtn" class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-white shadow" title="Play">
|
||||||
|
▶
|
||||||
|
</button>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden cursor-pointer" id="progressTrack">
|
||||||
|
<div id="progressFill" class="h-full bg-primary w-0"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between text-xs text-gray-600 mt-1">
|
||||||
|
<span id="currentTime">0:00</span>
|
||||||
|
<span id="durationTime">0:00</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="audioMenuContainer" class="relative">
|
||||||
|
<button id="audioMenuBtn" class="px-2 py-1 rounded bg-white text-gray-700 hover:bg-gray-100 border border-gray-200" title="More options">⋯</button>
|
||||||
|
<div id="audioMenu" class="hidden absolute right-0 mt-1 w-36 rounded border border-gray-200 bg-white shadow-lg">
|
||||||
|
<button id="removeAudioBtn" class="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100">Remove audio</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="recordStatus" class="text-xs text-gray-500"></div>
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<button id="submitNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Submit Note</button>
|
<button id="submitNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Submit Note</button>
|
||||||
<div id="submitStatus" class="text-sm text-gray-600"></div>
|
<div id="submitStatus" class="text-sm text-gray-600"></div>
|
||||||
@@ -388,22 +401,27 @@
|
|||||||
<div id="conversationRecordStatus" class="text-xs text-gray-500"></div>
|
<div id="conversationRecordStatus" class="text-xs text-gray-500"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-2">
|
<div class="space-y-2 relative pb-32">
|
||||||
<label class="block text-sm font-medium text-gray-700">Attachments</label>
|
<div class="flex items-center gap-3">
|
||||||
<div class="relative">
|
<button id="conversationStopBtn" class="hidden w-10 h-10 flex items-center justify-center rounded-full bg-red-600 text-white shadow disabled:opacity-50" title="Stop recording" disabled>
|
||||||
<div class="flex items-center gap-2">
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||||
<button id="conversationAttachmentMenuBtn" class="px-3 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-100 transition flex items-center gap-2" type="button" title="Add attachment">
|
<rect x="5" y="5" width="10" height="10" rx="2"></rect>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button id="conversationRecordBtn" class="absolute bottom-12 right-0 w-24 h-24 rounded-full overflow-hidden shadow-lg hover:shadow-xl transition-shadow disabled:opacity-50 border-4 border-white bg-white" title="Click to record audio">
|
||||||
|
<img src="images/prism.png" alt="Prism" class="w-full h-full object-cover object-center scale-125">
|
||||||
|
</button>
|
||||||
|
<div class="absolute bottom-12 right-32 flex items-center gap-2">
|
||||||
|
<div class="relative">
|
||||||
|
<button id="conversationAttachmentMenuBtn" class="px-2 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-100 transition flex items-center justify-center" type="button" title="Add attachment">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5">
|
||||||
<path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
|
<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
|
||||||
</svg>
|
</svg>
|
||||||
Attach
|
|
||||||
</button>
|
</button>
|
||||||
<button id="conversationClearAttachmentsBtn" class="px-3 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm" type="button">Clear</button>
|
|
||||||
<div id="conversationAttachmentsSummary" class="text-xs text-gray-600">No attachments selected.</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Conversation Attachment Menu -->
|
<!-- Conversation Attachment Menu -->
|
||||||
<div id="conversationAttachmentMenu" class="hidden absolute top-full left-0 mt-2 w-48 rounded border border-gray-300 bg-white shadow-lg z-10">
|
<div id="conversationAttachmentMenu" class="hidden absolute top-[calc(100%-50px)] left-0 w-48 rounded border border-gray-300 bg-white shadow-lg z-10">
|
||||||
<button id="conversationAttachImageBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
|
<button id="conversationAttachImageBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
|
||||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
|
||||||
@@ -435,16 +453,62 @@
|
|||||||
Take Picture
|
Take Picture
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Hidden file inputs for conversation -->
|
<!-- Hidden file inputs for conversation -->
|
||||||
<input id="conversationImageInput" type="file" class="hidden" accept="image/*" multiple>
|
<input id="conversationImageInput" type="file" class="hidden" accept="image/*" multiple>
|
||||||
<input id="conversationVideoInput" type="file" class="hidden" accept="video/*">
|
<input id="conversationVideoInput" type="file" class="hidden" accept="video/*">
|
||||||
<input id="conversationFileInput" type="file" class="hidden" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar">
|
<input id="conversationFileInput" type="file" class="hidden" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar">
|
||||||
<input id="conversationCameraInput" type="file" class="hidden" accept="image/*" capture="environment">
|
<input id="conversationCameraInput" type="file" class="hidden" accept="image/*" capture="environment">
|
||||||
|
|
||||||
<div id="conversationAttachmentsList" class="space-y-1"></div>
|
<div id="conversationAttachmentsList" class="space-y-1"></div>
|
||||||
|
<div id="conversationAttachmentsSummary" class="text-xs text-gray-600">No attachments selected.</div>
|
||||||
|
|
||||||
|
<!-- Video Recording UI -->
|
||||||
|
<div id="conversationVideoRecordingUI" class="hidden mt-3 p-3 rounded-lg border border-red-300 bg-red-50">
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<div class="w-3 h-3 bg-red-600 rounded-full animate-pulse"></div>
|
||||||
|
<span class="text-sm font-semibold text-red-700">Recording Video...</span>
|
||||||
|
</div>
|
||||||
|
<button id="conversationStopVideoRecordingBtn" class="w-full px-3 py-2 rounded bg-red-600 text-white hover:bg-red-700 text-sm font-semibold transition">Stop Recording</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Video Preview -->
|
||||||
|
<div id="conversationVideoPreview" class="hidden mt-3 rounded-lg border border-gray-200 bg-gray-50 overflow-hidden">
|
||||||
|
<video id="conversationVideoPlayer" controls class="w-full bg-black" style="max-height: 300px;"></video>
|
||||||
|
<div class="flex gap-2 p-3">
|
||||||
|
<button id="conversationRemoveVideoBtn" class="flex-1 px-3 py-2 rounded bg-red-50 text-red-700 hover:bg-red-100 text-sm font-semibold border border-red-200 transition">Remove Video</button>
|
||||||
|
<button id="conversationUseVideoBtn" class="flex-1 px-3 py-2 rounded bg-green-50 text-green-700 hover:bg-green-100 text-sm font-semibold border border-green-200 transition">Use Video</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<audio id="conversationAudioPreview" class="hidden" preload="metadata"></audio>
|
||||||
|
<div id="conversationAudioPlayer" class="hidden mt-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-3 shadow-sm">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<button id="conversationPlayPauseBtn" class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-white shadow" title="Play">
|
||||||
|
▶
|
||||||
|
</button>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden cursor-pointer" id="conversationProgressTrack">
|
||||||
|
<div id="conversationProgressFill" class="h-full bg-primary w-0"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between text-xs text-gray-600 mt-1">
|
||||||
|
<span id="conversationCurrentTime">0:00</span>
|
||||||
|
<span id="conversationDurationTime">0:00</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="conversationAudioMenuContainer" class="relative">
|
||||||
|
<button id="conversationAudioMenuBtn" class="px-2 py-1 rounded bg-white text-gray-700 hover:bg-gray-100 border border-gray-200" title="More options">⋯</button>
|
||||||
|
<div id="conversationAudioMenu" class="hidden absolute right-0 mt-1 w-36 rounded border border-gray-200 bg-white shadow-lg">
|
||||||
|
<button id="conversationRemoveAudioBtn" class="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100">Remove audio</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="conversationRecordStatus" class="text-xs text-gray-500"></div>
|
||||||
|
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<button id="submitConversationBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Submit Conversation</button>
|
<button id="submitConversationBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Submit Conversation</button>
|
||||||
@@ -1778,42 +1842,40 @@
|
|||||||
|
|
||||||
videoRecorder.onstop = () => {
|
videoRecorder.onstop = () => {
|
||||||
const blob = new Blob(chunks, { type: 'video/webm' });
|
const blob = new Blob(chunks, { type: 'video/webm' });
|
||||||
const file = new File([blob], `video-${Date.now()}.webm`, { type: 'video/webm' });
|
const videoPreviewEl = document.getElementById('noteVideoPlayer');
|
||||||
pendingNoteAttachments.push(file);
|
const videoPreviewContainer = document.getElementById('noteVideoPreview');
|
||||||
renderNoteAttachmentsList();
|
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());
|
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();
|
videoRecorder.start();
|
||||||
|
|
||||||
// Show recording UI
|
const stopBtn = document.getElementById('noteStopVideoRecordingBtn');
|
||||||
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 stopHandler = () => {
|
const stopHandler = () => {
|
||||||
recordStatus.removeEventListener('click', stopHandler);
|
if (videoRecorder.state === 'recording') {
|
||||||
videoRecorder.stop();
|
videoRecorder.stop();
|
||||||
recordStatus.textContent = originalStatus;
|
}
|
||||||
recordStatus.style.cursor = 'auto';
|
|
||||||
recordStatus.style.color = '';
|
|
||||||
};
|
};
|
||||||
|
|
||||||
recordStatus.addEventListener('click', stopHandler);
|
stopBtn.addEventListener('click', stopHandler, { once: true });
|
||||||
|
|
||||||
// Auto-stop after 5 minutes
|
// Auto-stop after 5 minutes
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (videoRecorder.state === 'recording') {
|
if (videoRecorder.state === 'recording') {
|
||||||
recordStatus.removeEventListener('click', stopHandler);
|
|
||||||
videoRecorder.stop();
|
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);
|
}, 5 * 60 * 1000);
|
||||||
} catch (err) {
|
} 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) => {
|
document.getElementById('clearAttachmentsBtn').addEventListener('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
pendingNoteAttachments = [];
|
pendingNoteAttachments = [];
|
||||||
@@ -1893,42 +1972,40 @@
|
|||||||
|
|
||||||
videoRecorder.onstop = () => {
|
videoRecorder.onstop = () => {
|
||||||
const blob = new Blob(chunks, { type: 'video/webm' });
|
const blob = new Blob(chunks, { type: 'video/webm' });
|
||||||
const file = new File([blob], `video-${Date.now()}.webm`, { type: 'video/webm' });
|
const videoPreviewEl = document.getElementById('conversationVideoPlayer');
|
||||||
pendingConversationAttachments.push(file);
|
const videoPreviewContainer = document.getElementById('conversationVideoPreview');
|
||||||
renderConversationAttachmentsList();
|
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());
|
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();
|
videoRecorder.start();
|
||||||
|
|
||||||
// Show recording UI
|
const stopBtn = document.getElementById('conversationStopVideoRecordingBtn');
|
||||||
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 stopHandler = () => {
|
const stopHandler = () => {
|
||||||
recordStatus.removeEventListener('click', stopHandler);
|
if (videoRecorder.state === 'recording') {
|
||||||
videoRecorder.stop();
|
videoRecorder.stop();
|
||||||
recordStatus.textContent = originalStatus;
|
}
|
||||||
recordStatus.style.cursor = 'auto';
|
|
||||||
recordStatus.style.color = '';
|
|
||||||
};
|
};
|
||||||
|
|
||||||
recordStatus.addEventListener('click', stopHandler);
|
stopBtn.addEventListener('click', stopHandler, { once: true });
|
||||||
|
|
||||||
// Auto-stop after 5 minutes
|
// Auto-stop after 5 minutes
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (videoRecorder.state === 'recording') {
|
if (videoRecorder.state === 'recording') {
|
||||||
recordStatus.removeEventListener('click', stopHandler);
|
|
||||||
videoRecorder.stop();
|
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);
|
}, 5 * 60 * 1000);
|
||||||
} catch (err) {
|
} 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) => {
|
document.getElementById('conversationClearAttachmentsBtn').addEventListener('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
pendingConversationAttachments = [];
|
pendingConversationAttachments = [];
|
||||||
|
|||||||
Reference in New Issue
Block a user