Initial vue frontend
This commit is contained in:
512
frontend-vue/src/components/dialogs/CameraCaptureDialog.vue
Normal file
512
frontend-vue/src/components/dialogs/CameraCaptureDialog.vue
Normal file
@@ -0,0 +1,512 @@
|
||||
<template>
|
||||
<div class="camera-capture-dialog">
|
||||
<div class="camera-container">
|
||||
<!-- Camera Feed -->
|
||||
<div class="camera-feed" v-if="!capturedImage">
|
||||
<video
|
||||
ref="videoElement"
|
||||
autoplay
|
||||
playsinline
|
||||
muted
|
||||
:class="{ 'mirrored': isFrontCamera }"
|
||||
></video>
|
||||
|
||||
<!-- Camera Controls Overlay -->
|
||||
<div class="camera-overlay">
|
||||
<div class="camera-info">
|
||||
<div class="camera-status" :class="{ 'active': isStreaming }">
|
||||
<Icon name="camera" />
|
||||
<span v-if="isStreaming">Camera Active</span>
|
||||
<span v-else>Camera Inactive</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Switch Camera Button -->
|
||||
<BaseButton
|
||||
v-if="availableCameras.length > 1"
|
||||
@click="switchCamera"
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
class="switch-camera-btn"
|
||||
:disabled="!isStreaming"
|
||||
>
|
||||
<Icon name="camera" />
|
||||
Switch
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Captured Image Preview -->
|
||||
<div class="image-preview" v-if="capturedImage">
|
||||
<img
|
||||
:src="capturedImage"
|
||||
alt="Captured photo"
|
||||
class="captured-photo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div class="error-message" v-if="errorMessage">
|
||||
<Icon name="warning" />
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
<!-- Camera Permission Info -->
|
||||
<div class="permission-info" v-if="!hasPermission && !errorMessage">
|
||||
<Icon name="info" />
|
||||
<p>Camera access is required to take photos. Please grant permission when prompted.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Capture Controls -->
|
||||
<div class="capture-controls">
|
||||
<div class="capture-buttons" v-if="!capturedImage">
|
||||
<BaseButton
|
||||
@click="capturePhoto"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
:disabled="!isStreaming"
|
||||
class="capture-btn"
|
||||
>
|
||||
<Icon name="camera" />
|
||||
Take Photo
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<div class="review-buttons" v-if="capturedImage">
|
||||
<BaseButton
|
||||
@click="retakePhoto"
|
||||
variant="secondary"
|
||||
>
|
||||
<Icon name="camera" />
|
||||
Retake
|
||||
</BaseButton>
|
||||
|
||||
<BaseButton
|
||||
@click="sendPhoto"
|
||||
variant="primary"
|
||||
:disabled="isSending"
|
||||
:loading="isSending"
|
||||
>
|
||||
<Icon name="send" />
|
||||
Send Photo
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Actions -->
|
||||
<div class="dialog-actions">
|
||||
<BaseButton
|
||||
@click="closeDialog"
|
||||
variant="secondary"
|
||||
>
|
||||
Cancel
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { apiService } from '@/services/api'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import Icon from '@/components/base/Icon.vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
sent: []
|
||||
}>()
|
||||
|
||||
const appStore = useAppStore()
|
||||
const toastStore = useToastStore()
|
||||
|
||||
// Refs
|
||||
const videoElement = ref<HTMLVideoElement>()
|
||||
const capturedImage = ref<string>()
|
||||
const isStreaming = ref(false)
|
||||
const hasPermission = ref(false)
|
||||
const isSending = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const availableCameras = ref<MediaDeviceInfo[]>([])
|
||||
const currentCameraIndex = ref(0)
|
||||
const isFrontCamera = ref(true)
|
||||
|
||||
// Stream management
|
||||
let currentStream: MediaStream | null = null
|
||||
|
||||
// Methods
|
||||
const initializeCamera = async () => {
|
||||
try {
|
||||
errorMessage.value = ''
|
||||
|
||||
// Get available cameras
|
||||
const devices = await navigator.mediaDevices.enumerateDevices()
|
||||
availableCameras.value = devices.filter(device => device.kind === 'videoinput')
|
||||
|
||||
if (availableCameras.value.length === 0) {
|
||||
throw new Error('No cameras found')
|
||||
}
|
||||
|
||||
// Start with front camera if available
|
||||
const frontCamera = availableCameras.value.find(camera =>
|
||||
camera.label.toLowerCase().includes('front') ||
|
||||
camera.label.toLowerCase().includes('user')
|
||||
)
|
||||
|
||||
if (frontCamera) {
|
||||
currentCameraIndex.value = availableCameras.value.indexOf(frontCamera)
|
||||
isFrontCamera.value = true
|
||||
} else {
|
||||
currentCameraIndex.value = 0
|
||||
isFrontCamera.value = false
|
||||
}
|
||||
|
||||
await startCamera()
|
||||
hasPermission.value = true
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize camera:', error)
|
||||
errorMessage.value = 'Failed to access camera. Please check permissions and try again.'
|
||||
hasPermission.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const startCamera = async () => {
|
||||
try {
|
||||
// Stop current stream if exists
|
||||
if (currentStream) {
|
||||
currentStream.getTracks().forEach(track => track.stop())
|
||||
}
|
||||
|
||||
const constraints: MediaStreamConstraints = {
|
||||
video: {
|
||||
deviceId: availableCameras.value[currentCameraIndex.value]?.deviceId,
|
||||
width: { ideal: 1280 },
|
||||
height: { ideal: 720 },
|
||||
facingMode: isFrontCamera.value ? 'user' : 'environment'
|
||||
}
|
||||
}
|
||||
|
||||
currentStream = await navigator.mediaDevices.getUserMedia(constraints)
|
||||
|
||||
if (videoElement.value) {
|
||||
videoElement.value.srcObject = currentStream
|
||||
isStreaming.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to start camera:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
const switchCamera = async () => {
|
||||
if (availableCameras.value.length <= 1) return
|
||||
|
||||
currentCameraIndex.value = (currentCameraIndex.value + 1) % availableCameras.value.length
|
||||
|
||||
// Determine if this is likely a front camera
|
||||
const currentCamera = availableCameras.value[currentCameraIndex.value]
|
||||
isFrontCamera.value = currentCamera.label.toLowerCase().includes('front') ||
|
||||
currentCamera.label.toLowerCase().includes('user')
|
||||
|
||||
try {
|
||||
await startCamera()
|
||||
} catch (error) {
|
||||
console.error('Failed to switch camera:', error)
|
||||
toastStore.error('Failed to switch camera')
|
||||
}
|
||||
}
|
||||
|
||||
const capturePhoto = () => {
|
||||
if (!videoElement.value || !isStreaming.value) return
|
||||
|
||||
try {
|
||||
// Create canvas to capture frame
|
||||
const canvas = document.createElement('canvas')
|
||||
const video = videoElement.value
|
||||
|
||||
canvas.width = video.videoWidth
|
||||
canvas.height = video.videoHeight
|
||||
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) throw new Error('Failed to get canvas context')
|
||||
|
||||
// Flip horizontally for front camera
|
||||
if (isFrontCamera.value) {
|
||||
ctx.scale(-1, 1)
|
||||
ctx.drawImage(video, -canvas.width, 0, canvas.width, canvas.height)
|
||||
} else {
|
||||
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
|
||||
}
|
||||
|
||||
// Convert to data URL
|
||||
capturedImage.value = canvas.toDataURL('image/jpeg', 0.8)
|
||||
|
||||
// Stop camera stream
|
||||
stopCamera()
|
||||
|
||||
toastStore.success('Photo captured!')
|
||||
} catch (error) {
|
||||
console.error('Failed to capture photo:', error)
|
||||
toastStore.error('Failed to capture photo')
|
||||
}
|
||||
}
|
||||
|
||||
const retakePhoto = () => {
|
||||
capturedImage.value = undefined
|
||||
initializeCamera()
|
||||
}
|
||||
|
||||
const sendPhoto = async () => {
|
||||
if (!capturedImage.value) return
|
||||
|
||||
isSending.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
// Create a message first to attach the photo to
|
||||
const message = await apiService.createMessage(appStore.currentChannelId!, 'Photo')
|
||||
|
||||
// Convert data URL to blob
|
||||
const response = await fetch(capturedImage.value)
|
||||
const blob = await response.blob()
|
||||
|
||||
// Create file from blob
|
||||
const file = new File([blob], `photo-${Date.now()}.jpg`, {
|
||||
type: 'image/jpeg'
|
||||
})
|
||||
|
||||
// Upload photo
|
||||
await apiService.uploadFile(appStore.currentChannelId!, message.id, file)
|
||||
|
||||
toastStore.success('Photo sent!')
|
||||
emit('sent')
|
||||
emit('close')
|
||||
} catch (error) {
|
||||
console.error('Failed to send photo:', error)
|
||||
errorMessage.value = 'Failed to send photo. Please try again.'
|
||||
toastStore.error('Failed to send photo')
|
||||
} finally {
|
||||
isSending.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const stopCamera = () => {
|
||||
if (currentStream) {
|
||||
currentStream.getTracks().forEach(track => track.stop())
|
||||
currentStream = null
|
||||
}
|
||||
isStreaming.value = false
|
||||
}
|
||||
|
||||
const closeDialog = () => {
|
||||
stopCamera()
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
initializeCamera()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopCamera()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.camera-capture-dialog {
|
||||
padding: 1rem 0;
|
||||
min-width: 500px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.camera-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.camera-feed {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.camera-feed video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.camera-feed video.mirrored {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.camera-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
|
||||
}
|
||||
|
||||
.camera-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.camera-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.camera-status.active {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.switch-camera-btn {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.captured-photo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 8px;
|
||||
color: #dc2626;
|
||||
font-weight: 500;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.permission-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
border-radius: 8px;
|
||||
color: #0369a1;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.permission-info p {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.capture-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.capture-buttons, .review-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.capture-btn {
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
border-radius: 50px;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.error-message {
|
||||
background: #7f1d1d;
|
||||
border-color: #991b1b;
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.permission-info {
|
||||
background: #1e3a8a;
|
||||
border-color: #3b82f6;
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
border-top-color: #374151;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 640px) {
|
||||
.camera-capture-dialog {
|
||||
min-width: unset;
|
||||
max-width: unset;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.camera-feed, .image-preview {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.camera-overlay {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.capture-btn {
|
||||
padding: 0.875rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.capture-buttons, .review-buttons {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
465
frontend-vue/src/components/dialogs/ChannelInfoDialog.vue
Normal file
465
frontend-vue/src/components/dialogs/ChannelInfoDialog.vue
Normal file
@@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<div class="channel-info-dialog">
|
||||
<div class="info-section">
|
||||
<BaseInput
|
||||
v-model="channelName"
|
||||
label="Channel name"
|
||||
placeholder="Enter channel name"
|
||||
ref="nameInput"
|
||||
/>
|
||||
|
||||
<BaseInput
|
||||
v-model="channelIdDisplay"
|
||||
label="Channel ID (for API use)"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="actions-section">
|
||||
<div class="action-group">
|
||||
<h3>Channel Actions</h3>
|
||||
|
||||
<BaseButton
|
||||
@click="makeDefault"
|
||||
variant="secondary"
|
||||
:disabled="isDefault"
|
||||
>
|
||||
{{ isDefault ? 'Already Default' : 'Make Default Channel' }}
|
||||
</BaseButton>
|
||||
|
||||
<BaseButton
|
||||
@click="showMergeDialog = true"
|
||||
variant="secondary"
|
||||
:disabled="availableChannels.length === 0"
|
||||
>
|
||||
Merge Channel
|
||||
</BaseButton>
|
||||
|
||||
<BaseButton
|
||||
@click="showDeleteConfirm = true"
|
||||
variant="danger"
|
||||
>
|
||||
Delete Channel
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dialog-actions">
|
||||
<BaseButton @click="cancel" variant="secondary">
|
||||
Cancel
|
||||
</BaseButton>
|
||||
<BaseButton @click="save" :loading="saving">
|
||||
Save Changes
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<!-- Merge Channel Dialog -->
|
||||
<BaseDialog v-model:show="showMergeDialog" title="Merge Channel" size="md">
|
||||
<div class="merge-dialog">
|
||||
<p class="merge-warning">
|
||||
This will move all messages from "{{ channel.name }}" into the selected target channel,
|
||||
then delete this channel. This action cannot be undone.
|
||||
</p>
|
||||
|
||||
<div class="merge-form">
|
||||
<label for="target-channel">Merge into:</label>
|
||||
<select
|
||||
id="target-channel"
|
||||
v-model="selectedTargetChannel"
|
||||
class="target-select"
|
||||
>
|
||||
<option value="">Select target channel...</option>
|
||||
<option
|
||||
v-for="ch in availableChannels"
|
||||
:key="ch.id"
|
||||
:value="ch.id"
|
||||
>
|
||||
{{ ch.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="merge-actions">
|
||||
<BaseButton @click="showMergeDialog = false" variant="secondary">
|
||||
Cancel
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
@click="performMerge"
|
||||
variant="danger"
|
||||
:disabled="!selectedTargetChannel"
|
||||
:loading="merging"
|
||||
>
|
||||
Merge Channels
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</BaseDialog>
|
||||
|
||||
<!-- Delete Confirmation Dialog -->
|
||||
<BaseDialog v-model:show="showDeleteConfirm" title="Delete Channel" size="md">
|
||||
<div class="delete-dialog">
|
||||
<p class="delete-warning">
|
||||
Are you sure you want to delete "{{ channel.name }}"?
|
||||
This will permanently delete all messages in this channel.
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
|
||||
<div class="delete-actions">
|
||||
<BaseButton @click="showDeleteConfirm = false" variant="secondary">
|
||||
Cancel
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
@click="performDelete"
|
||||
variant="danger"
|
||||
:loading="deleting"
|
||||
>
|
||||
Delete Channel
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</BaseDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { apiService } from '@/services/api'
|
||||
import { syncService } from '@/services/sync'
|
||||
import BaseInput from '@/components/base/BaseInput.vue'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import BaseDialog from '@/components/base/BaseDialog.vue'
|
||||
import type { Channel } from '@/types'
|
||||
|
||||
interface Props {
|
||||
channel: Channel
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
'channel-updated': [channel: Channel]
|
||||
'channel-deleted': [channelId: number]
|
||||
'channel-merged': [sourceId: number, targetId: number]
|
||||
}>()
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const appStore = useAppStore()
|
||||
const toastStore = useToastStore()
|
||||
|
||||
// Form state
|
||||
const channelName = ref(props.channel.name)
|
||||
const channelIdDisplay = ref(props.channel.id.toString())
|
||||
const saving = ref(false)
|
||||
|
||||
// Dialog states
|
||||
const showMergeDialog = ref(false)
|
||||
const showDeleteConfirm = ref(false)
|
||||
const selectedTargetChannel = ref<number | null>(null)
|
||||
const merging = ref(false)
|
||||
const deleting = ref(false)
|
||||
|
||||
// Input ref for focus
|
||||
const nameInput = ref()
|
||||
|
||||
// Computed properties
|
||||
const isDefault = computed(() =>
|
||||
appStore.settings.defaultChannelId === props.channel.id
|
||||
)
|
||||
|
||||
const availableChannels = computed(() =>
|
||||
appStore.channels.filter(ch => ch.id !== props.channel.id)
|
||||
)
|
||||
|
||||
// Actions
|
||||
const makeDefault = async () => {
|
||||
try {
|
||||
await appStore.updateSettings({ defaultChannelId: props.channel.id })
|
||||
toastStore.success(`${props.channel.name} is now the default channel`)
|
||||
} catch (error) {
|
||||
console.error('Failed to set default channel:', error)
|
||||
toastStore.error('Failed to set default channel')
|
||||
}
|
||||
}
|
||||
|
||||
const save = async () => {
|
||||
if (!channelName.value.trim()) {
|
||||
toastStore.error('Channel name is required')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
saving.value = true
|
||||
|
||||
// Try online update first
|
||||
try {
|
||||
await apiService.updateChannel(props.channel.id, channelName.value.trim())
|
||||
// Update local store
|
||||
const updatedChannel = { ...props.channel, name: channelName.value.trim() }
|
||||
const channelIndex = appStore.channels.findIndex(ch => ch.id === props.channel.id)
|
||||
if (channelIndex !== -1) {
|
||||
appStore.channels[channelIndex] = updatedChannel
|
||||
await appStore.saveState()
|
||||
}
|
||||
emit('channel-updated', updatedChannel)
|
||||
toastStore.success('Channel updated successfully')
|
||||
} catch (error) {
|
||||
// Offline fallback - update locally only
|
||||
console.log('Offline mode: updating channel locally')
|
||||
const updatedChannel = { ...props.channel, name: channelName.value.trim() }
|
||||
const channelIndex = appStore.channels.findIndex(ch => ch.id === props.channel.id)
|
||||
if (channelIndex !== -1) {
|
||||
appStore.channels[channelIndex] = updatedChannel
|
||||
await appStore.saveState()
|
||||
}
|
||||
emit('channel-updated', updatedChannel)
|
||||
toastStore.success('Channel updated locally (will sync when online)')
|
||||
}
|
||||
|
||||
emit('close')
|
||||
} catch (error) {
|
||||
console.error('Failed to update channel:', error)
|
||||
toastStore.error('Failed to update channel')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const performMerge = async () => {
|
||||
if (!selectedTargetChannel.value) return
|
||||
|
||||
try {
|
||||
merging.value = true
|
||||
|
||||
// Try online merge first
|
||||
try {
|
||||
await apiService.mergeChannels(props.channel.id, selectedTargetChannel.value)
|
||||
// Remove source channel from local store
|
||||
appStore.channels = appStore.channels.filter(ch => ch.id !== props.channel.id)
|
||||
// Clear messages for the merged channel
|
||||
delete appStore.messages[props.channel.id]
|
||||
await appStore.saveState()
|
||||
|
||||
emit('channel-merged', props.channel.id, selectedTargetChannel.value)
|
||||
toastStore.success('Channels merged successfully')
|
||||
|
||||
// Switch to target channel if we were on the source channel
|
||||
if (appStore.currentChannelId === props.channel.id) {
|
||||
await appStore.setCurrentChannel(selectedTargetChannel.value)
|
||||
}
|
||||
} catch (error) {
|
||||
// For merge, we can't do offline fallback easily since it affects multiple channels
|
||||
console.error('Failed to merge channels:', error)
|
||||
toastStore.error('Failed to merge channels - this requires an internet connection')
|
||||
}
|
||||
|
||||
showMergeDialog.value = false
|
||||
emit('close')
|
||||
} catch (error) {
|
||||
console.error('Failed to merge channels:', error)
|
||||
toastStore.error('Failed to merge channels')
|
||||
} finally {
|
||||
merging.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const performDelete = async () => {
|
||||
try {
|
||||
deleting.value = true
|
||||
|
||||
// Try online delete first
|
||||
try {
|
||||
await apiService.deleteChannel(props.channel.id)
|
||||
// Remove from local store
|
||||
appStore.channels = appStore.channels.filter(ch => ch.id !== props.channel.id)
|
||||
delete appStore.messages[props.channel.id]
|
||||
await appStore.saveState()
|
||||
|
||||
emit('channel-deleted', props.channel.id)
|
||||
toastStore.success('Channel deleted successfully')
|
||||
|
||||
// Switch to first available channel if we were on the deleted channel
|
||||
if (appStore.currentChannelId === props.channel.id && appStore.channels.length > 0) {
|
||||
await appStore.setCurrentChannel(appStore.channels[0].id)
|
||||
}
|
||||
} catch (error) {
|
||||
// For delete, we can't do offline fallback easily since it affects server state
|
||||
console.error('Failed to delete channel:', error)
|
||||
toastStore.error('Failed to delete channel - this requires an internet connection')
|
||||
}
|
||||
|
||||
showDeleteConfirm.value = false
|
||||
emit('close')
|
||||
} catch (error) {
|
||||
console.error('Failed to delete channel:', error)
|
||||
toastStore.error('Failed to delete channel')
|
||||
} finally {
|
||||
deleting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const cancel = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
nameInput.value?.focus()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.channel-info-dialog {
|
||||
padding: 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.actions-section {
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.action-group h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* Merge Dialog Styles */
|
||||
.merge-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.merge-warning {
|
||||
padding: 1rem;
|
||||
background: #fef3c7;
|
||||
border: 1px solid #f59e0b;
|
||||
border-radius: 6px;
|
||||
color: #92400e;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.merge-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.merge-form label {
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.target-select {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
color: #111827;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.target-select:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.merge-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Delete Dialog Styles */
|
||||
.delete-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.delete-warning {
|
||||
padding: 1rem;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fca5a5;
|
||||
border-radius: 6px;
|
||||
color: #dc2626;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.delete-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.actions-section {
|
||||
border-top-color: #374151;
|
||||
}
|
||||
|
||||
.action-group h3 {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
border-top-color: #374151;
|
||||
}
|
||||
|
||||
.merge-warning {
|
||||
background: #451a03;
|
||||
border-color: #92400e;
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.delete-warning {
|
||||
background: #450a0a;
|
||||
border-color: #dc2626;
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.merge-form label {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.target-select {
|
||||
background: #374151;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
border-color: #4b5563;
|
||||
}
|
||||
|
||||
.target-select:focus {
|
||||
border-color: #60a5fa;
|
||||
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
96
frontend-vue/src/components/dialogs/CreateChannelDialog.vue
Normal file
96
frontend-vue/src/components/dialogs/CreateChannelDialog.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="create-channel-dialog">
|
||||
<form @submit.prevent="handleSubmit" class="channel-form">
|
||||
<BaseInput
|
||||
v-model="channelName"
|
||||
label="Channel Name"
|
||||
placeholder="Enter channel name"
|
||||
required
|
||||
:error="error"
|
||||
:disabled="isLoading"
|
||||
ref="nameInput"
|
||||
/>
|
||||
|
||||
<div class="form-actions">
|
||||
<BaseButton
|
||||
type="button"
|
||||
variant="secondary"
|
||||
@click="$emit('cancel')"
|
||||
:disabled="isLoading"
|
||||
>
|
||||
Cancel
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
type="submit"
|
||||
:loading="isLoading"
|
||||
:disabled="!channelName.trim()"
|
||||
>
|
||||
Create Channel
|
||||
</BaseButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { apiService } from '@/services/api'
|
||||
import BaseInput from '@/components/base/BaseInput.vue'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
cancel: []
|
||||
created: [channelId: number]
|
||||
}>()
|
||||
|
||||
const appStore = useAppStore()
|
||||
const toastStore = useToastStore()
|
||||
|
||||
const channelName = ref('')
|
||||
const error = ref('')
|
||||
const isLoading = ref(false)
|
||||
const nameInput = ref()
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!channelName.value.trim()) return
|
||||
|
||||
isLoading.value = true
|
||||
error.value = ''
|
||||
|
||||
try {
|
||||
const newChannel = await apiService.createChannel(channelName.value.trim())
|
||||
appStore.addChannel(newChannel)
|
||||
toastStore.success(`Channel "${newChannel.name}" created successfully!`)
|
||||
emit('created', newChannel.id)
|
||||
} catch (err) {
|
||||
console.error('Failed to create channel:', err)
|
||||
error.value = 'Failed to create channel. Please try again.'
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
nameInput.value?.focus()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.create-channel-dialog {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.channel-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
349
frontend-vue/src/components/dialogs/FileUploadDialog.vue
Normal file
349
frontend-vue/src/components/dialogs/FileUploadDialog.vue
Normal file
@@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<div class="file-upload-dialog">
|
||||
<div class="upload-area"
|
||||
:class="{ 'upload-area--dragging': isDragging }"
|
||||
@dragover.prevent="handleDragOver"
|
||||
@dragleave.prevent="handleDragLeave"
|
||||
@drop.prevent="handleDrop">
|
||||
|
||||
<input
|
||||
type="file"
|
||||
ref="fileInput"
|
||||
@change="handleFileSelect"
|
||||
class="file-input"
|
||||
:disabled="isUploading"
|
||||
multiple
|
||||
/>
|
||||
|
||||
<div v-if="!selectedFiles.length" class="upload-prompt">
|
||||
<div class="upload-icon">📎</div>
|
||||
<p>Click to select files or drag and drop</p>
|
||||
<p class="upload-hint">All file types supported</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="selected-files">
|
||||
<h4>Selected Files:</h4>
|
||||
<div class="file-list">
|
||||
<div v-for="(file, index) in selectedFiles" :key="index" class="file-item">
|
||||
<span class="file-name">{{ file.name }}</span>
|
||||
<span class="file-size">{{ formatFileSize(file.size) }}</span>
|
||||
<button
|
||||
@click="removeFile(index)"
|
||||
class="remove-file"
|
||||
:disabled="isUploading"
|
||||
aria-label="Remove file"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="uploadProgress.length > 0" class="upload-progress">
|
||||
<div v-for="(progress, index) in uploadProgress" :key="index" class="progress-item">
|
||||
<div class="progress-label">{{ selectedFiles[index]?.name }}</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" :style="{ width: `${progress}%` }"></div>
|
||||
</div>
|
||||
<div class="progress-text">{{ progress }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dialog-actions">
|
||||
<BaseButton
|
||||
variant="secondary"
|
||||
@click="$emit('cancel')"
|
||||
:disabled="isUploading"
|
||||
>
|
||||
Cancel
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
@click="uploadFiles"
|
||||
:loading="isUploading"
|
||||
:disabled="selectedFiles.length === 0"
|
||||
>
|
||||
Upload {{ selectedFiles.length }} file{{ selectedFiles.length === 1 ? '' : 's' }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { apiService } from '@/services/api'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
cancel: []
|
||||
uploaded: []
|
||||
}>()
|
||||
|
||||
const appStore = useAppStore()
|
||||
const toastStore = useToastStore()
|
||||
|
||||
const fileInput = ref<HTMLInputElement>()
|
||||
const selectedFiles = ref<File[]>([])
|
||||
const uploadProgress = ref<number[]>([])
|
||||
const isDragging = ref(false)
|
||||
const isUploading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const handleDragOver = () => {
|
||||
isDragging.value = true
|
||||
}
|
||||
|
||||
const handleDragLeave = () => {
|
||||
isDragging.value = false
|
||||
}
|
||||
|
||||
const handleDrop = (event: DragEvent) => {
|
||||
isDragging.value = false
|
||||
const files = Array.from(event.dataTransfer?.files || [])
|
||||
addFiles(files)
|
||||
}
|
||||
|
||||
const handleFileSelect = (event: Event) => {
|
||||
const files = Array.from((event.target as HTMLInputElement).files || [])
|
||||
addFiles(files)
|
||||
}
|
||||
|
||||
const addFiles = (files: File[]) => {
|
||||
selectedFiles.value.push(...files)
|
||||
uploadProgress.value = new Array(selectedFiles.value.length).fill(0)
|
||||
}
|
||||
|
||||
const removeFile = (index: number) => {
|
||||
selectedFiles.value.splice(index, 1)
|
||||
uploadProgress.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
if (bytes === 0) return '0 Bytes'
|
||||
const k = 1024
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
const uploadFiles = async () => {
|
||||
if (!appStore.currentChannelId || selectedFiles.value.length === 0) return
|
||||
|
||||
isUploading.value = true
|
||||
error.value = ''
|
||||
|
||||
try {
|
||||
// Create a message first to attach files to
|
||||
const message = await apiService.createMessage(appStore.currentChannelId,
|
||||
`Uploaded ${selectedFiles.value.length} file${selectedFiles.value.length === 1 ? '' : 's'}`)
|
||||
|
||||
// Upload each file
|
||||
for (let i = 0; i < selectedFiles.value.length; i++) {
|
||||
const file = selectedFiles.value[i]
|
||||
|
||||
try {
|
||||
await apiService.uploadFile(appStore.currentChannelId, message.id, file)
|
||||
uploadProgress.value[i] = 100
|
||||
} catch (fileError) {
|
||||
console.error(`Failed to upload ${file.name}:`, fileError)
|
||||
toastStore.error(`Failed to upload ${file.name}`)
|
||||
uploadProgress.value[i] = 0
|
||||
}
|
||||
}
|
||||
|
||||
toastStore.success('Files uploaded successfully!')
|
||||
emit('uploaded')
|
||||
|
||||
} catch (err) {
|
||||
console.error('Upload failed:', err)
|
||||
error.value = 'Upload failed. Please try again.'
|
||||
} finally {
|
||||
isUploading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.file-upload-dialog {
|
||||
padding: 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
border: 2px dashed #d1d5db;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.upload-area:hover,
|
||||
.upload-area--dragging {
|
||||
border-color: #646cff;
|
||||
background: #f8faff;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-prompt {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.selected-files h4 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
background: #f9fafb;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.remove-file {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.remove-file:hover:not(:disabled) {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.upload-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
flex: 1;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 2;
|
||||
height: 0.5rem;
|
||||
background: #e5e7eb;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #646cff;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
padding: 0.75rem;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 6px;
|
||||
color: #dc2626;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.upload-area {
|
||||
border-color: #4b5563;
|
||||
}
|
||||
|
||||
.upload-area:hover,
|
||||
.upload-area--dragging {
|
||||
border-color: #646cff;
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
background: #374151;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #422006;
|
||||
border-color: #92400e;
|
||||
color: #fbbf24;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
308
frontend-vue/src/components/dialogs/SearchDialog.vue
Normal file
308
frontend-vue/src/components/dialogs/SearchDialog.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<div class="search-dialog">
|
||||
<div class="search-form">
|
||||
<BaseInput
|
||||
v-model="searchQuery"
|
||||
placeholder="Search messages..."
|
||||
@keydown.enter="performSearch"
|
||||
ref="searchInput"
|
||||
/>
|
||||
|
||||
<div class="search-filters">
|
||||
<select
|
||||
v-model="selectedChannelId"
|
||||
class="channel-filter"
|
||||
>
|
||||
<option :value="null">All channels</option>
|
||||
<option
|
||||
v-for="channel in appStore.channels"
|
||||
:key="channel.id"
|
||||
:value="channel.id"
|
||||
>
|
||||
{{ channel.name }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<BaseButton
|
||||
@click="performSearch"
|
||||
:loading="isSearching"
|
||||
:disabled="!searchQuery.trim()"
|
||||
>
|
||||
Search
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isSearching" class="search-loading">
|
||||
Searching...
|
||||
</div>
|
||||
|
||||
<div v-else-if="searchResults.length > 0" class="search-results">
|
||||
<div class="results-header">
|
||||
Found {{ searchResults.length }} result{{ searchResults.length === 1 ? '' : 's' }}
|
||||
</div>
|
||||
|
||||
<div class="results-list">
|
||||
<div
|
||||
v-for="result in searchResults"
|
||||
:key="`${result.channel_id}-${result.id}`"
|
||||
class="result-item"
|
||||
@click="goToMessage(result)"
|
||||
tabindex="0"
|
||||
@keydown.enter="goToMessage(result)"
|
||||
>
|
||||
<div class="result-channel">
|
||||
{{ getChannelName(result.channel_id) }}
|
||||
</div>
|
||||
<div class="result-content">
|
||||
{{ result.content }}
|
||||
</div>
|
||||
<div class="result-time">
|
||||
{{ formatTime(result.created_at) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="hasSearched && searchResults.length === 0" class="no-results">
|
||||
No messages found for "{{ searchQuery }}"
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="search-error">
|
||||
{{ error }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { apiService } from '@/services/api'
|
||||
import BaseInput from '@/components/base/BaseInput.vue'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import type { Message, ExtendedMessage } from '@/types'
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
'select-message': [message: ExtendedMessage]
|
||||
}>()
|
||||
|
||||
const appStore = useAppStore()
|
||||
const toastStore = useToastStore()
|
||||
|
||||
const searchQuery = ref('')
|
||||
const selectedChannelId = ref<number | null>(null)
|
||||
const searchResults = ref<ExtendedMessage[]>([])
|
||||
const isSearching = ref(false)
|
||||
const hasSearched = ref(false)
|
||||
const error = ref('')
|
||||
const searchInput = ref()
|
||||
|
||||
const performSearch = async () => {
|
||||
if (!searchQuery.value.trim()) return
|
||||
|
||||
isSearching.value = true
|
||||
error.value = ''
|
||||
|
||||
try {
|
||||
const response = await apiService.search(
|
||||
searchQuery.value.trim(),
|
||||
selectedChannelId.value || undefined
|
||||
)
|
||||
|
||||
// Transform search results to match expected format
|
||||
searchResults.value = response.results.map((result: any) => ({
|
||||
...result,
|
||||
channel_id: result.channelId || result.channel_id,
|
||||
created_at: result.createdAt || result.created_at
|
||||
})) as ExtendedMessage[]
|
||||
|
||||
console.log('Search results transformed:', searchResults.value)
|
||||
hasSearched.value = true
|
||||
} catch (err) {
|
||||
console.error('Search failed:', err)
|
||||
error.value = 'Search failed. Please try again.'
|
||||
toastStore.error('Search failed')
|
||||
} finally {
|
||||
isSearching.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const goToMessage = (message: ExtendedMessage) => {
|
||||
emit('select-message', message)
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const getChannelName = (channelId: number): string => {
|
||||
if (!channelId) return 'Unknown Channel'
|
||||
const channel = appStore.channels.find(c => c.id === channelId)
|
||||
return channel?.name || `Channel ${channelId}`
|
||||
}
|
||||
|
||||
const formatTime = (timestamp: string): string => {
|
||||
if (!timestamp) return 'Unknown time'
|
||||
|
||||
const date = new Date(timestamp)
|
||||
if (isNaN(date.getTime())) {
|
||||
return 'Invalid date'
|
||||
}
|
||||
|
||||
return date.toLocaleString()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
searchInput.value?.focus()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-dialog {
|
||||
padding: 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.search-filters {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.channel-filter {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
color: #111827;
|
||||
font-size: 0.875rem;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.channel-filter:focus {
|
||||
outline: none;
|
||||
border-color: #646cff;
|
||||
box-shadow: 0 0 0 3px rgba(100, 108, 255, 0.1);
|
||||
}
|
||||
|
||||
.search-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.results-header {
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.results-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.result-item:hover,
|
||||
.result-item:focus {
|
||||
background: #f9fafb;
|
||||
border-color: #646cff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.result-channel {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #646cff;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
color: #111827;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.result-time {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
color: #6b7280;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.search-error {
|
||||
padding: 0.75rem;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 6px;
|
||||
color: #dc2626;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.channel-filter {
|
||||
background: #374151;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
border-color: #4b5563;
|
||||
}
|
||||
|
||||
.results-header {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
border-bottom-color: #374151;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
border-color: #374151;
|
||||
}
|
||||
|
||||
.result-item:hover,
|
||||
.result-item:focus {
|
||||
background: #374151;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.search-error {
|
||||
background: #422006;
|
||||
border-color: #92400e;
|
||||
color: #fbbf24;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
364
frontend-vue/src/components/dialogs/SettingsDialog.vue
Normal file
364
frontend-vue/src/components/dialogs/SettingsDialog.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div class="settings-dialog">
|
||||
<form @submit.prevent="handleSave" class="settings-form">
|
||||
<div class="setting-group">
|
||||
<h3>Audio Settings</h3>
|
||||
|
||||
<label class="setting-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="localSettings.soundEnabled"
|
||||
class="checkbox"
|
||||
/>
|
||||
<span>Enable sound effects</span>
|
||||
</label>
|
||||
|
||||
<label class="setting-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="localSettings.speechEnabled"
|
||||
class="checkbox"
|
||||
/>
|
||||
<span>Enable speech synthesis (deprecated)</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-group">
|
||||
<h3>Text-to-Speech</h3>
|
||||
|
||||
<label class="setting-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="localSettings.ttsEnabled"
|
||||
class="checkbox"
|
||||
/>
|
||||
<span>Enable text-to-speech announcements</span>
|
||||
</label>
|
||||
|
||||
<div class="setting-item" v-if="localSettings.ttsEnabled">
|
||||
<label for="voice-select">Voice</label>
|
||||
<select
|
||||
id="voice-select"
|
||||
v-model="selectedVoiceURI"
|
||||
class="select"
|
||||
@change="handleVoiceChange"
|
||||
>
|
||||
<option value="" disabled>Select a voice...</option>
|
||||
<option
|
||||
v-for="voice in availableVoices"
|
||||
:key="voice.voiceURI"
|
||||
:value="voice.voiceURI"
|
||||
>
|
||||
{{ voice.name }} ({{ voice.lang }})
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="setting-item" v-if="localSettings.ttsEnabled">
|
||||
<label for="rate-slider">Speech Rate: {{ localSettings.ttsRate.toFixed(1) }}</label>
|
||||
<input
|
||||
id="rate-slider"
|
||||
type="range"
|
||||
min="0.5"
|
||||
max="2"
|
||||
step="0.1"
|
||||
v-model.number="localSettings.ttsRate"
|
||||
class="slider"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="setting-item" v-if="localSettings.ttsEnabled">
|
||||
<label for="pitch-slider">Speech Pitch: {{ localSettings.ttsPitch.toFixed(1) }}</label>
|
||||
<input
|
||||
id="pitch-slider"
|
||||
type="range"
|
||||
min="0"
|
||||
max="2"
|
||||
step="0.1"
|
||||
v-model.number="localSettings.ttsPitch"
|
||||
class="slider"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="setting-item" v-if="localSettings.ttsEnabled">
|
||||
<label for="volume-slider">Speech Volume: {{ localSettings.ttsVolume.toFixed(1) }}</label>
|
||||
<input
|
||||
id="volume-slider"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.1"
|
||||
v-model.number="localSettings.ttsVolume"
|
||||
class="slider"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="setting-item" v-if="localSettings.ttsEnabled">
|
||||
<BaseButton
|
||||
type="button"
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
@click="testSpeech"
|
||||
:disabled="!selectedVoiceURI"
|
||||
>
|
||||
Test Speech
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-group">
|
||||
<h3>Appearance</h3>
|
||||
|
||||
<div class="setting-item">
|
||||
<label for="theme-select">Theme</label>
|
||||
<select
|
||||
id="theme-select"
|
||||
v-model="localSettings.theme"
|
||||
class="select"
|
||||
>
|
||||
<option value="auto">Auto (System)</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-group" v-if="appStore.channels.length > 0">
|
||||
<h3>Default Channel</h3>
|
||||
|
||||
<div class="setting-item">
|
||||
<label for="default-channel-select">Default Channel</label>
|
||||
<select
|
||||
id="default-channel-select"
|
||||
v-model="localSettings.defaultChannelId"
|
||||
class="select"
|
||||
>
|
||||
<option :value="null">None</option>
|
||||
<option
|
||||
v-for="channel in appStore.channels"
|
||||
:key="channel.id"
|
||||
:value="channel.id"
|
||||
>
|
||||
{{ channel.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<BaseButton
|
||||
type="button"
|
||||
variant="secondary"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
Cancel
|
||||
</BaseButton>
|
||||
<BaseButton
|
||||
type="submit"
|
||||
:loading="isSaving"
|
||||
>
|
||||
Save Settings
|
||||
</BaseButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { useAudio } from '@/composables/useAudio'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import type { AppSettings } from '@/types'
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
}>()
|
||||
|
||||
const appStore = useAppStore()
|
||||
const toastStore = useToastStore()
|
||||
const { availableVoices, speak, setVoice } = useAudio()
|
||||
|
||||
const isSaving = ref(false)
|
||||
const selectedVoiceURI = ref('')
|
||||
const localSettings = reactive<AppSettings>({
|
||||
soundEnabled: true,
|
||||
speechEnabled: true,
|
||||
ttsEnabled: true,
|
||||
ttsRate: 1,
|
||||
ttsPitch: 1,
|
||||
ttsVolume: 1,
|
||||
selectedVoiceURI: null,
|
||||
defaultChannelId: null,
|
||||
theme: 'auto'
|
||||
})
|
||||
|
||||
const handleVoiceChange = () => {
|
||||
const voice = availableVoices.value.find(v => v.voiceURI === selectedVoiceURI.value)
|
||||
if (voice) {
|
||||
setVoice(voice)
|
||||
localSettings.selectedVoiceURI = voice.voiceURI
|
||||
}
|
||||
}
|
||||
|
||||
const testSpeech = async () => {
|
||||
try {
|
||||
await speak('This is a test of the text-to-speech system.', {
|
||||
rate: localSettings.ttsRate,
|
||||
pitch: localSettings.ttsPitch,
|
||||
volume: localSettings.ttsVolume
|
||||
})
|
||||
} catch (error) {
|
||||
toastStore.error('Speech test failed')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
isSaving.value = true
|
||||
|
||||
try {
|
||||
await appStore.updateSettings(localSettings)
|
||||
toastStore.success('Settings saved successfully!')
|
||||
emit('close')
|
||||
} catch (error) {
|
||||
console.error('Failed to save settings:', error)
|
||||
toastStore.error('Failed to save settings')
|
||||
} finally {
|
||||
isSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// Copy current settings to local state
|
||||
Object.assign(localSettings, appStore.settings)
|
||||
|
||||
// Set up voice selection
|
||||
selectedVoiceURI.value = appStore.settings.selectedVoiceURI || ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings-dialog {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.settings-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.setting-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.setting-group h3 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.setting-item label {
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
accent-color: #646cff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
color: #111827;
|
||||
font-size: 0.875rem;
|
||||
min-width: 150px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select:focus {
|
||||
outline: none;
|
||||
border-color: #646cff;
|
||||
box-shadow: 0 0 0 3px rgba(100, 108, 255, 0.1);
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: #e5e7eb;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #646cff;
|
||||
cursor: pointer;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #646cff;
|
||||
cursor: pointer;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.setting-group h3 {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
border-bottom-color: #374151;
|
||||
}
|
||||
|
||||
.setting-item label {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.select {
|
||||
background: #374151;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
border-color: #4b5563;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
border-top-color: #374151;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
465
frontend-vue/src/components/dialogs/VoiceRecordingDialog.vue
Normal file
465
frontend-vue/src/components/dialogs/VoiceRecordingDialog.vue
Normal file
@@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<div class="voice-recording-dialog">
|
||||
<div class="recording-container">
|
||||
<!-- Recording Status -->
|
||||
<div class="recording-status">
|
||||
<div class="status-indicator" :class="{ 'recording': recording.isRecording, 'has-recording': recording.blob }">
|
||||
<div class="pulse" v-if="recording.isRecording"></div>
|
||||
<Icon name="microphone" />
|
||||
</div>
|
||||
<div class="status-text">
|
||||
<h3 v-if="recording.isRecording">Recording...</h3>
|
||||
<h3 v-else-if="recording.blob">Recording Complete</h3>
|
||||
<h3 v-else>Ready to Record</h3>
|
||||
<p class="duration">{{ recordingDurationFormatted }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Waveform Visualization (placeholder) -->
|
||||
<div class="waveform" v-if="recording.isRecording">
|
||||
<div class="wave-bar" v-for="i in 20" :key="i" :style="{ height: getWaveHeight(i) + 'px' }"></div>
|
||||
</div>
|
||||
|
||||
<!-- Playback Controls -->
|
||||
<div class="playback-controls" v-if="recording.blob">
|
||||
<div class="progress-bar">
|
||||
<div class="progress" :style="{ width: playbackProgress + '%' }"></div>
|
||||
</div>
|
||||
<div class="playback-time">
|
||||
{{ formatTime(recording.currentTime) }} / {{ formatTime(recording.duration) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Control Buttons -->
|
||||
<div class="controls">
|
||||
<BaseButton
|
||||
v-if="!recording.isRecording && !recording.blob"
|
||||
@click="startRecording"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
:disabled="!canRecord"
|
||||
class="record-btn"
|
||||
>
|
||||
<Icon name="microphone" />
|
||||
Start Recording
|
||||
</BaseButton>
|
||||
|
||||
<BaseButton
|
||||
v-if="recording.isRecording"
|
||||
@click="stopRecording"
|
||||
variant="danger"
|
||||
size="lg"
|
||||
class="stop-btn"
|
||||
>
|
||||
<Icon name="stop" />
|
||||
Stop Recording
|
||||
</BaseButton>
|
||||
|
||||
<div class="playback-buttons" v-if="recording.blob && !recording.isRecording">
|
||||
<BaseButton
|
||||
@click="playRecording"
|
||||
variant="secondary"
|
||||
:disabled="recording.isPlaying"
|
||||
>
|
||||
<Icon name="play" />
|
||||
Play
|
||||
</BaseButton>
|
||||
|
||||
<BaseButton
|
||||
@click="clearRecording"
|
||||
variant="secondary"
|
||||
>
|
||||
<Icon name="trash" />
|
||||
Clear
|
||||
</BaseButton>
|
||||
|
||||
<BaseButton
|
||||
@click="startRecording"
|
||||
variant="secondary"
|
||||
>
|
||||
<Icon name="microphone" />
|
||||
Re-record
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div class="error-message" v-if="errorMessage">
|
||||
<Icon name="warning" />
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
<!-- Microphone Permission Info -->
|
||||
<div class="permission-info" v-if="!canRecord">
|
||||
<Icon name="info" />
|
||||
<p>Microphone access is required for voice recording. Please grant permission when prompted.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Actions -->
|
||||
<div class="dialog-actions">
|
||||
<BaseButton
|
||||
@click="$emit('close')"
|
||||
variant="secondary"
|
||||
>
|
||||
Cancel
|
||||
</BaseButton>
|
||||
|
||||
<BaseButton
|
||||
@click="sendVoiceMessage"
|
||||
variant="primary"
|
||||
:disabled="!recording.blob || isSending"
|
||||
:loading="isSending"
|
||||
>
|
||||
<Icon name="send" />
|
||||
Send Voice Message
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useAudio } from '@/composables/useAudio'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useToastStore } from '@/stores/toast'
|
||||
import { apiService } from '@/services/api'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import Icon from '@/components/base/Icon.vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
sent: []
|
||||
}>()
|
||||
|
||||
const appStore = useAppStore()
|
||||
const toastStore = useToastStore()
|
||||
const {
|
||||
recording,
|
||||
canRecord,
|
||||
recordingDurationFormatted,
|
||||
startRecording: startAudioRecording,
|
||||
stopRecording: stopAudioRecording,
|
||||
playRecording,
|
||||
clearRecording
|
||||
} = useAudio()
|
||||
|
||||
const isSending = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const waveAnimation = ref<number[]>([])
|
||||
|
||||
// Computed
|
||||
const playbackProgress = computed(() => {
|
||||
if (!recording.value.duration) return 0
|
||||
return (recording.value.currentTime / recording.value.duration) * 100
|
||||
})
|
||||
|
||||
// Methods
|
||||
const startRecording = async () => {
|
||||
errorMessage.value = ''
|
||||
const success = await startAudioRecording()
|
||||
if (!success) {
|
||||
errorMessage.value = 'Failed to start recording. Please check microphone permissions.'
|
||||
} else {
|
||||
startWaveAnimation()
|
||||
}
|
||||
}
|
||||
|
||||
const stopRecording = () => {
|
||||
stopAudioRecording()
|
||||
stopWaveAnimation()
|
||||
}
|
||||
|
||||
const sendVoiceMessage = async () => {
|
||||
if (!recording.value.blob) return
|
||||
|
||||
isSending.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
// Create a message first to attach the voice file to
|
||||
const message = await apiService.createMessage(appStore.currentChannelId!, 'Voice message')
|
||||
|
||||
// Create file from blob
|
||||
const file = new File([recording.value.blob!], `voice-${Date.now()}.webm`, {
|
||||
type: 'audio/webm;codecs=opus'
|
||||
})
|
||||
|
||||
// Upload voice file
|
||||
await apiService.uploadFile(appStore.currentChannelId!, message.id, file)
|
||||
|
||||
toastStore.success('Voice message sent!')
|
||||
clearRecording()
|
||||
emit('sent')
|
||||
emit('close')
|
||||
} catch (error) {
|
||||
console.error('Failed to send voice message:', error)
|
||||
errorMessage.value = 'Failed to send voice message. Please try again.'
|
||||
toastStore.error('Failed to send voice message')
|
||||
} finally {
|
||||
isSending.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const formatTime = (seconds: number): string => {
|
||||
const mins = Math.floor(seconds / 60)
|
||||
const secs = Math.floor(seconds % 60)
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
// Waveform animation
|
||||
let animationInterval: number | null = null
|
||||
|
||||
const startWaveAnimation = () => {
|
||||
waveAnimation.value = Array.from({ length: 20 }, () => Math.random() * 40 + 10)
|
||||
animationInterval = setInterval(() => {
|
||||
waveAnimation.value = waveAnimation.value.map(() => Math.random() * 40 + 10)
|
||||
}, 150)
|
||||
}
|
||||
|
||||
const stopWaveAnimation = () => {
|
||||
if (animationInterval) {
|
||||
clearInterval(animationInterval)
|
||||
animationInterval = null
|
||||
}
|
||||
}
|
||||
|
||||
const getWaveHeight = (index: number): number => {
|
||||
return waveAnimation.value[index] || 20
|
||||
}
|
||||
|
||||
// Cleanup
|
||||
onUnmounted(() => {
|
||||
stopWaveAnimation()
|
||||
})
|
||||
|
||||
// Initialize
|
||||
onMounted(() => {
|
||||
// Clear any existing recording when dialog opens
|
||||
if (recording.value.blob) {
|
||||
clearRecording()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.voice-recording-dialog {
|
||||
padding: 1rem 0;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.recording-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.recording-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
color: #6b7280;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.status-indicator.recording {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-indicator.has-recording {
|
||||
background: #059669;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
position: absolute;
|
||||
inset: -10px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #dc2626;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.status-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-text h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.duration {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.waveform {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 3px;
|
||||
height: 60px;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.wave-bar {
|
||||
width: 4px;
|
||||
background: linear-gradient(to top, #dc2626, #f87171);
|
||||
border-radius: 2px;
|
||||
transition: height 0.1s ease;
|
||||
min-height: 4px;
|
||||
}
|
||||
|
||||
.playback-controls {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
background: #059669;
|
||||
transition: width 0.1s ease;
|
||||
}
|
||||
|
||||
.playback-time {
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.record-btn {
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stop-btn {
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.playback-buttons {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 8px;
|
||||
color: #dc2626;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.permission-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
border-radius: 8px;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.permission-info p {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.status-text h3 {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.duration {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.playback-time {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background: #374151;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #7f1d1d;
|
||||
border-color: #991b1b;
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.permission-info {
|
||||
background: #1e3a8a;
|
||||
border-color: #3b82f6;
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
border-top-color: #374151;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user