From c38dd658f50f228f2bcc554ef1e1bafb687ab8e1 Mon Sep 17 00:00:00 2001
From: tdv <you@example.com>
Date: Thu, 4 Sep 2025 12:10:04 +0300
Subject: [PATCH] some small chenges in device ui

---
 .../src/customcompometns/DeviceDashboard.vue  |  88 +++---
 .../src/customcompometns/DeviceRecordings.vue | 276 +++++++++++-------
 2 files changed, 225 insertions(+), 139 deletions(-)

diff --git a/management-ui/src/customcompometns/DeviceDashboard.vue b/management-ui/src/customcompometns/DeviceDashboard.vue
index d757b36..d1621cd 100644
--- a/management-ui/src/customcompometns/DeviceDashboard.vue
+++ b/management-ui/src/customcompometns/DeviceDashboard.vue
@@ -26,45 +26,65 @@ const usrIDs = selectedUserIds.value
 </script>
 
 <template>
-    <Card>
-        <CardHeader>
+    <Card class="flex w-full max-w-4xl mx-auto">
+        <CardHeader class="pb-4">
             <CardTitle>
                 Dashboard
             </CardTitle>
         </CardHeader>
-        <CardContent>
-            <Label for="users">Allowed users</Label>
-            <AssignDevice v-model="usrIDs"></AssignDevice>
-            <Button>Start recording</Button>
-            <Button>Stop recording</Button>
-            <NumberField id="duration" :default-value="120" :min="30">
-                <Label for="duration"> Record duration in seconds</Label>
-                <NumberFieldContent>
-                    <NumberFieldDecrement></NumberFieldDecrement>
-                    <NumberFieldInput></NumberFieldInput>
-                    <NumberFieldIncrement></NumberFieldIncrement>
-                </NumberFieldContent>
-            </NumberField>
-            <Separator>Communication settings</Separator>
-            <NumberField id="polling" :default-value="60" :min="30">
-                <Label for="polling"> Timeout interwal in seconds </Label>
-                <NumberFieldContent>
-                    <NumberFieldDecrement></NumberFieldDecrement>
-                    <NumberFieldInput></NumberFieldInput>
-                    <NumberFieldIncrement></NumberFieldIncrement>
-                </NumberFieldContent>
-            </NumberField>
-            <NumberField id="jitter" :default-value="10" :min="5">
-                <Label for="jitter"> Jitter in seconds </Label>
-                <NumberFieldContent>
-                    <NumberFieldDecrement></NumberFieldDecrement>
-                    <NumberFieldInput></NumberFieldInput>
-                    <NumberFieldIncrement></NumberFieldIncrement>
-                </NumberFieldContent>
-            </NumberField>
+        <CardContent class="flex-1 space-y-6">
+            <div class="grid gap-5">
+                <div class="grid space-y-2 grid-cols-4 items-center">
+                    <Label for="users">Allowed users</Label>
+                    <AssignDevice v-model="usrIDs" class="col-span-3 w-full"></AssignDevice>
+                </div>
+            </div>
+
+            <div class="flex space-x-4 pt-2 gap-4">
+                <Button>Start recording</Button>
+                <Button>Stop recording</Button>
+            </div>
+            <div class="space-y-2 gap-4">
+                <NumberField id="duration" :default-value="120" :min="30">
+                    <Label for="duration"> Record duration in seconds</Label>
+                    <NumberFieldContent>
+                        <NumberFieldDecrement></NumberFieldDecrement>
+                        <NumberFieldInput></NumberFieldInput>
+                        <NumberFieldIncrement></NumberFieldIncrement>
+                    </NumberFieldContent>
+                </NumberField>
+            </div>
+
+            <Separator class="my-6">Communication settings</Separator>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div class="space-y-2">
+                    <NumberField id="polling" :default-value="60" :min="30">
+                        <Label for="polling"> Timeout interwal in seconds </Label>
+                        <NumberFieldContent>
+                            <NumberFieldDecrement></NumberFieldDecrement>
+                            <NumberFieldInput></NumberFieldInput>
+                            <NumberFieldIncrement></NumberFieldIncrement>
+                        </NumberFieldContent>
+                    </NumberField>
+                </div>
+                <div class="space-y-2">
+
+                    <NumberField id="jitter" :default-value="10" :min="5">
+                        <Label for="jitter"> Jitter in seconds </Label>
+                        <NumberFieldContent>
+                            <NumberFieldDecrement></NumberFieldDecrement>
+                            <NumberFieldInput></NumberFieldInput>
+                            <NumberFieldIncrement></NumberFieldIncrement>
+                        </NumberFieldContent>
+                    </NumberField>
+                </div>
+            </div>
             <Separator></Separator>
-            <Label for="sleepdate">Date/time to sleep</Label>
-            <DataRangePicker id="sleepdate"></DataRangePicker>
+            <div class="space-y-2 gap-4">
+                <Label for="sleepdate">Date/time to sleep</Label>
+                <DataRangePicker id="sleepdate"></DataRangePicker>
+            </div>
+
         </CardContent>
     </Card>
 </template>
\ No newline at end of file
diff --git a/management-ui/src/customcompometns/DeviceRecordings.vue b/management-ui/src/customcompometns/DeviceRecordings.vue
index de17522..f8e5d88 100644
--- a/management-ui/src/customcompometns/DeviceRecordings.vue
+++ b/management-ui/src/customcompometns/DeviceRecordings.vue
@@ -1,35 +1,39 @@
 <script setup lang="ts">
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { api } from '@/lib/api';
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, watch, onUnmounted } from 'vue';
 import type { PropType } from 'vue';
 
 type DeviceRecord = {
-    id: number
-    startedAt: number // unix seconds
-    stoppedAt: number // unix seconds
+  id: number
+  startedAt: number // unix seconds
+  stoppedAt: number // unix seconds
 }
 
 type ListResp = {
-    records: DeviceRecord[]
-    offset: number
-    limit: number
-    total: number
+  records: DeviceRecord[]
+  offset: number
+  limit: number
+  total: number
 }
 
 const props = defineProps({
-    guid: { type: String as PropType<string>, required: true },
-    pageSize: { type: Number as PropType<number>, default: 50 },
-    // If your API base is set via Vite (e.g. "/api"), it will be used automatically.
-    apiBase: {
-        type: String as PropType<string>,
-        default: (import.meta as any)?.env?.VITE_API_URL || ''
-    },
-    // Provide a custom builder if your record stream URL differs.
-    recordSrcBuilder: {
-        type: Function as PropType<(id: number) => string>,
-        default: undefined
-    }
+  guid: {
+    type: String as PropType<string>,
+    required: true,
+  },
+  pageSize: {
+    type: Number as PropType<number>,
+    default: 50,
+  },
+  apiBase: {
+    type: String as PropType<string>,
+    default: (import.meta as any)?.env?.VITE_API_URL || '',
+  },
+  recordSrcBuilder: {
+    type: Function as PropType<(id: number) => string>,
+    default: undefined,
+  }
 })
 
 const loading = ref(false)
@@ -37,122 +41,184 @@ const error = ref<string | null>(null)
 const records = ref<DeviceRecord[]>([])
 const offset = ref(0)
 const total = ref(0)
-
 const baseUrl = computed(() => (props.apiBase || '').replace(/\/+$/, ''))
+const audioBlobUrls = ref<Map<number, string>>(new Map())
 
-const sortedRecords = computed(() =>
-    [...records.value].sort((a, b) => b.startedAt - a.startedAt)
+const sortedRecords = computed(() => 
+  [...records.value].sort((a, b) => b.startedAt - a.startedAt)
 )
 
 const dtf = new Intl.DateTimeFormat(undefined, {
-    dateStyle: 'medium',
-    timeStyle: 'short'
+  dateStyle: 'medium',
+  timeStyle: 'short',
 })
 
 function formatDate(unix: number) {
-    return dtf.format(new Date(unix * 1000))
+  return dtf.format(new Date(unix * 1000))
 }
 
 function durationMinutes(rec: DeviceRecord) {
-    const seconds = Math.max(0, (rec.stoppedAt ?? 0) - (rec.startedAt ?? 0))
-    return (seconds / 60).toFixed(2) // minutes with 2 decimals
+  const seconds = Math.max(0, (rec.stoppedAt ?? 0) - (rec.startedAt ?? 0))
+  return (seconds / 60).toFixed(2)
 }
 
-function getRecordSrc(id: number) {
-    if (props.recordSrcBuilder) return props.recordSrcBuilder(id)
+// Get audio URL using blob approach to preserve authentication
+async function getAudioUrl(id: number): Promise<string> {
+  // Return existing blob URL if available
+  if (audioBlobUrls.value.has(id)) {
+    return audioBlobUrls.value.get(id)!
+  }
 
-    // Build from Axios baseURL (works for '/api' or 'https://host/api')
-    const base = (api.defaults.baseURL as string | undefined)?.replace(/\/+$/, '') ?? ''
-    return `${base}/records/${id}/file`
+  try {
+    const response = await api.get(`/records/${id}/file`, {
+      responseType: 'blob',
+      headers: {
+        'Accept': 'audio/*'
+      }
+    })
+    
+    // Create blob URL from the response
+    const blob = new Blob([response.data], { 
+      type: response.headers['content-type'] || 'audio/mpeg' 
+    })
+    const blobUrl = URL.createObjectURL(blob)
+    
+    // Store for future use
+    audioBlobUrls.value.set(id, blobUrl)
+    
+    return blobUrl
+  } catch (err) {
+    console.error('Failed to load audio:', err)
+    throw new Error('Failed to load audio file')
+  }
+}
+
+// Clean up blob URLs when component is destroyed
+onUnmounted(() => {
+  audioBlobUrls.value.forEach(url => {
+    URL.revokeObjectURL(url)
+  })
+  audioBlobUrls.value.clear()
+})
+
+// Optional: Preload audio for visible items
+const preloadAudio = async (recordId: number) => {
+  try {
+    await getAudioUrl(recordId)
+  } catch (error) {
+    console.warn(`Failed to preload audio for record ${recordId}:`, error)
+  }
 }
 
 async function fetchRecords(reset = true) {
-    if (!props.guid) return
-    loading.value = true
-    error.value = null
-
-    try {
-        if (reset) {
-            offset.value = 0
-            records.value = []
-        }
-
-        const { data } = await api.get<ListResp>('/records', {
-            params: {
-                guid: props.guid,
-                offset: offset.value,
-                limit: props.pageSize,
-            },
-        })
-
-        records.value = reset ? data.records : [...records.value, ...data.records]
-        total.value = data.total ?? records.value.length
-        offset.value = (data.offset ?? offset.value) + (data.limit ?? props.pageSize)
-    } catch (err: any) {
-        // Axios-style error extraction
-        error.value =
-            (err?.response?.data?.error as string) ??
-            (err?.message as string) ??
-            'Failed to load recordings'
-    } finally {
-        loading.value = false
+  if (!props.guid) return
+  
+  loading.value = true
+  error.value = null
+  
+  try {
+    if (reset) {
+      offset.value = 0
+      records.value = []
+      // Clean up old blob URLs
+      audioBlobUrls.value.forEach(url => URL.revokeObjectURL(url))
+      audioBlobUrls.value.clear()
     }
+
+    const { data } = await api.get<ListResp>('/records', {
+      params: {
+        guid: props.guid,
+        offset: offset.value,
+        limit: props.pageSize,
+      },
+    })
+
+    records.value = reset ? data.records : [...records.value, ...data.records]
+    total.value = data.total ?? records.value.length
+    offset.value = (data.offset ?? offset.value) + (data.limit ?? props.pageSize)
+
+    // Preload first few audio files for better UX
+    if (reset && data.records.length > 0) {
+      const recordsToPreload = data.records.slice(0, 3)
+      recordsToPreload.forEach(rec => preloadAudio(rec.id))
+    }
+  } catch (err: any) {
+    error.value = (err?.response?.data?.error as string) ?? 
+                 (err?.message as string) ?? 
+                 'Failed to load recordings'
+  } finally {
+    loading.value = false
+  }
 }
 
 const hasMore = computed(() => offset.value < total.value)
 
 function loadMore() {
-    if (!loading.value && hasMore.value) fetchRecords(false)
+  if (!loading.value && hasMore.value) {
+    fetchRecords(false)
+  }
 }
 
 onMounted(() => {
-    fetchRecords(true)
+  fetchRecords(true)
 })
 
-watch(
-    () => props.guid,
-    () => fetchRecords(true),
-    { immediate: false }
-)
+watch(() => props.guid, () => {
+  fetchRecords(true)
+}, { immediate: false })
 </script>
+
 <template>
-    <ScrollArea class="w-full h-full">
-        <div class="p-3 space-y-3">
-            <div v-if="error" class="text-sm text-red-500 border border-red-200 rounded-md p-2">
-                {{ error }}
+  <ScrollArea class="w-full h-full">
+    <div class="p-3 space-y-3">
+      <div v-if="error" class="text-sm text-red-500 border border-red-200 rounded-md p-2">
+        {{ error }}
+      </div>
+      
+      <div v-if="!loading && records.length === 0 && !error" class="text-sm text-muted-foreground">
+        No recordings found.
+      </div>
+      
+      <ul v-else class="divide-y divide-border rounded-lg border">
+        <li v-for="rec in sortedRecords" :key="rec.id" 
+            class="p-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+          <div class="space-y-1 flex-1">
+            <div class="font-medium">Record #{{ rec.id }}</div>
+            <div class="text-sm text-muted-foreground">
+              {{ formatDate(rec.startedAt) }} → {{ formatDate(rec.stoppedAt) }}
             </div>
-
-            <div v-if="!loading && records.length === 0 && !error" class="text-sm text-muted-foreground">
-                No recordings found.
+            <div class="text-xs">
+              Duration: <span class="font-semibold">{{ durationMinutes(rec) }}</span> min
             </div>
-
-            <ul v-else class="divide-y divide-border rounded-lg border">
-                <li v-for="rec in sortedRecords" :key="rec.id"
-                    class="p-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
-                    <div class="space-y-1">
-                        <div class="font-medium">Record #{{ rec.id }}</div>
-                        <div class="text-sm text-muted-foreground">
-                            {{ formatDate(rec.startedAt) }} → {{ formatDate(rec.stoppedAt) }}
-                        </div>
-                        <div class="text-xs">
-                            Duration: <span class="font-semibold">{{ durationMinutes(rec) }}</span> min
-                        </div>
-                    </div>
-
-                    <!-- Optional playback; update getRecordSrc via prop if your URL differs -->
-                    <audio class="w-full md:w-auto" :src="getRecordSrc(rec.id)" controls preload="none">
-                        Your browser does not support the audio element.
-                    </audio>
-                </li>
-            </ul>
-
-            <div class="flex items-center gap-3">
-                <button v-if="hasMore" class="px-3 py-2 rounded-md border text-sm hover:bg-accent" @click="loadMore"
-                    :disabled="loading">
-                    {{ loading ? 'Loading…' : 'Load more' }}
-                </button>
-                <span v-else class="text-xs text-muted-foreground">All loaded</span>
+          </div>
+          
+          <!-- Audio player with loading state -->
+          <div class="w-full md:w-80 flex items-center">
+            <audio 
+              class="w-full"
+              :src="audioBlobUrls.get(rec.id) || ''" 
+              controls 
+              preload="none"
+              @play="() => preloadAudio(rec.id)"
+            >
+              Your browser does not support the audio element.
+            </audio>
+            <div v-if="!audioBlobUrls.has(rec.id)" class="text-xs text-muted-foreground ml-2">
+              Click play to load
             </div>
-        </div>
-    </ScrollArea>
+          </div>
+        </li>
+      </ul>
+      
+      <div class="flex items-center gap-3">
+        <button v-if="hasMore" 
+                class="px-3 py-2 rounded-md border text-sm hover:bg-accent transition-colors disabled:opacity-50"
+                @click="loadMore"
+                :disabled="loading">
+          {{ loading ? 'Loading…' : 'Load more' }}
+        </button>
+        <span v-else class="text-xs text-muted-foreground">All loaded</span>
+      </div>
+    </div>
+  </ScrollArea>
 </template>
\ No newline at end of file