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:
+186
-92
@@ -183,49 +183,16 @@
|
||||
<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">
|
||||
</button>
|
||||
<div class="absolute bottom-12 right-32 flex items-center gap-2">
|
||||
<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>
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
Attach
|
||||
</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 -->
|
||||
<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">
|
||||
<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"/>
|
||||
@@ -257,6 +224,8 @@
|
||||
Take Picture
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden file inputs -->
|
||||
<input id="imageInput" type="file" class="hidden" accept="image/*" multiple>
|
||||
@@ -265,8 +234,52 @@
|
||||
<input id="cameraInput" type="file" class="hidden" accept="image/*" capture="environment">
|
||||
|
||||
<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 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">
|
||||
<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>
|
||||
@@ -388,22 +401,27 @@
|
||||
<div id="conversationRecordStatus" 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="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">
|
||||
<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"/>
|
||||
<div class="space-y-2 relative pb-32">
|
||||
<div class="flex items-center gap-3">
|
||||
<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>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<rect x="5" y="5" width="10" height="10" rx="2"></rect>
|
||||
</svg>
|
||||
Attach
|
||||
</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>
|
||||
<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">
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<!-- 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">
|
||||
<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"/>
|
||||
@@ -435,6 +453,8 @@
|
||||
Take Picture
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden file inputs for conversation -->
|
||||
<input id="conversationImageInput" type="file" class="hidden" accept="image/*" multiple>
|
||||
@@ -443,8 +463,52 @@
|
||||
<input id="conversationCameraInput" type="file" class="hidden" accept="image/*" capture="environment">
|
||||
|
||||
<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 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">
|
||||
<button id="submitConversationBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Submit Conversation</button>
|
||||
@@ -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);
|
||||
if (videoRecorder.state === 'recording') {
|
||||
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
|
||||
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);
|
||||
if (videoRecorder.state === 'recording') {
|
||||
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
|
||||
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 = [];
|
||||
|
||||
Reference in New Issue
Block a user