een-api-toolkit 0.3.15 → 0.3.20

package/examples/vue-alerts-metrics/src/components/AlertsList.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-import { listAlerts, listAlertTypes, type Camera, type Alert, type AlertType, type EenError } from 'een-api-toolkit'
+import { ref, watch, computed, onUnmounted } from 'vue'
+import { listAlerts, listAlertTypes, getAlert, getRecordedImage, type Camera, type Alert, type AlertType, type EenError } from 'een-api-toolkit'
+import { useHlsPlayer } from '../composables/useHlsPlayer'
+
+// Initialize HLS player composable
+// Note: videoRef is not destructured - accessed as hlsPlayer.videoRef in template
+const hlsPlayer = useHlsPlayer()
+const { videoUrl, videoError, loadingVideo, loadVideo, resetVideo } = hlsPlayer
 
 const props = defineProps<{
-  camera: Camera
+  camera: Camera | null
   timeRange: string
 }>()
 
@@ -16,6 +22,62 @@ const loadingMore = ref(false)
 const error = ref<EenError | null>(null)
 const nextPageToken = ref<string | undefined>(undefined)
 
+// Modal state
+const showModal = ref(false)
+const selectedAlert = ref<Alert | null>(null)
+const loadingDetails = ref(false)
+const detailsError = ref<EenError | null>(null)
+
+// Lightbox state
+const showLightbox = ref(false)
+const lightboxImageUrl = ref<string | null>(null)
+const loadingImage = ref(false)
+const imageError = ref<string | null>(null)
+
+// Video state (showVideo controls lightbox mode, rest from composable)
+const showVideo = ref(false)
+
+// Check if alert has an httpsUrl in its data
+// The data is an array, look for type "een.fullFrameImageUrl.v1"
+const alertImageUrl = computed(() => {
+  if (!selectedAlert.value?.data) return null
+  const data = selectedAlert.value.data
+
+  // Alert data is an array
+  if (!Array.isArray(data)) return null
+
+  // Find the object with type "een.fullFrameImageUrl.v1"
+  const imageItem = data.find(
+    (item: unknown) =>
+      item &&
+      typeof item === 'object' &&
+      (item as Record<string, unknown>).type === 'een.fullFrameImageUrl.v1'
+  ) as Record<string, unknown> | undefined
+
+  if (imageItem && typeof imageItem.httpsUrl === 'string') {
+    return imageItem.httpsUrl
+  }
+
+  return null
+})
+
+// Parse the image URL to extract parameters for getRecordedImage
+function parseImageUrlParams(url: string): { deviceId: string; type: 'preview' | 'main'; timestamp: string } | null {
+  try {
+    const urlObj = new URL(url)
+    const deviceId = urlObj.searchParams.get('deviceId')
+    const type = urlObj.searchParams.get('type') as 'preview' | 'main'
+    const timestamp = urlObj.searchParams.get('timestamp__gte')
+
+    if (deviceId && type && timestamp) {
+      return { deviceId, type, timestamp }
+    }
+    return null
+  } catch {
+    return null
+  }
+}
+
 function getTimeRangeMs(range: string): number {
   switch (range) {
     case '1h': return 60 * 60 * 1000
@@ -57,8 +119,6 @@ async function fetchAlertTypes() {
 }
 
 async function fetchAlerts(append = false) {
-  if (!props.camera?.id) return
-
   if (append) {
     loadingMore.value = true
   } else {
@@ -68,20 +128,27 @@ async function fetchAlerts(append = false) {
   }
   error.value = null
 
-  const now = new Date()
-  const rangeMs = getTimeRangeMs(props.timeRange)
-  const startTime = new Date(now.getTime() - rangeMs)
-
   const params: Parameters<typeof listAlerts>[0] = {
-    actorId__in: [props.camera.id],
-    timestamp__gte: startTime.toISOString(),
-    timestamp__lte: now.toISOString(),
     pageSize: 20,
     pageToken: append ? nextPageToken.value : undefined,
     include: ['description'],
     sort: ['-timestamp']
   }
 
+  // Only apply time filter if a specific time range is selected (not 'none')
+  if (props.timeRange !== 'none') {
+    const now = new Date()
+    const rangeMs = getTimeRangeMs(props.timeRange)
+    const startTime = new Date(now.getTime() - rangeMs)
+    params.timestamp__gte = startTime.toISOString()
+    params.timestamp__lte = now.toISOString()
+  }
+
+  // Only filter by camera if a specific camera is selected
+  if (props.camera?.id) {
+    params.actorId__in = [props.camera.id]
+  }
+
   // Add alert type filter if selected
   if (selectedAlertType.value) {
     params.alertType__in = [selectedAlertType.value]
@@ -126,17 +193,131 @@ function getPriorityClass(priority?: number): string {
   return 'priority-low'
 }
 
+async function handleAlertClick(alert: Alert) {
+  showModal.value = true
+  loadingDetails.value = true
+  detailsError.value = null
+  selectedAlert.value = null
+
+  const result = await getAlert(alert.id, {
+    include: ['data', 'actions', 'description', 'dataSchemas']
+  })
+
+  if (result.error) {
+    detailsError.value = result.error
+  } else {
+    selectedAlert.value = result.data
+  }
+
+  loadingDetails.value = false
+}
+
+function closeModal() {
+  showModal.value = false
+  selectedAlert.value = null
+  detailsError.value = null
+}
+
+async function handleImageClick(quality: 'preview' | 'main' = 'preview') {
+  if (!alertImageUrl.value) return
+
+  loadingImage.value = true
+  imageError.value = null
+  lightboxImageUrl.value = null
+  showLightbox.value = true
+
+  // Parse the URL to extract parameters
+  const params = parseImageUrlParams(alertImageUrl.value)
+  if (!params) {
+    imageError.value = 'Invalid image URL format'
+    loadingImage.value = false
+    return
+  }
+
+  // Use the toolkit's getRecordedImage function
+  const result = await getRecordedImage({
+    deviceId: params.deviceId,
+    type: quality,
+    timestamp__gte: params.timestamp
+  })
+
+  if (result.error) {
+    imageError.value = result.error.message
+  } else if (result.data?.imageData) {
+    lightboxImageUrl.value = result.data.imageData
+  } else {
+    imageError.value = 'No image data returned'
+  }
+
+  loadingImage.value = false
+}
+
+function closeLightbox() {
+  showLightbox.value = false
+  lightboxImageUrl.value = null
+  imageError.value = null
+  // Also cleanup video if it was playing
+  resetVideo()
+  showVideo.value = false
+}
+
+async function handleVideoClick() {
+  if (!alertImageUrl.value) return
+
+  // Parse the URL to extract parameters
+  const params = parseImageUrlParams(alertImageUrl.value)
+  if (!params) {
+    return
+  }
+
+  showVideo.value = true
+  showLightbox.value = true
+
+  // Use the composable to load and play video
+  await loadVideo(params.deviceId, params.timestamp)
+}
+
+// Debounce delay for filter changes (ms)
+const DEBOUNCE_DELAY = 300
+
+// Debounce timer reference - component-scoped to avoid race conditions
+const debounceTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+
+// Debounced fetch to avoid rapid API calls on quick filter changes
+function debouncedFetchAlerts() {
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value)
+  }
+  debounceTimer.value = setTimeout(() => {
+    fetchAlerts()
+    debounceTimer.value = null
+  }, DEBOUNCE_DELAY)
+}
+
 // Fetch alert types once on mount
 fetchAlertTypes()
 
-// Fetch alerts when camera or time range changes
+// Fetch alerts when camera or time range changes (debounced)
 watch(
   () => [props.camera?.id, props.timeRange],
-  () => {
-    fetchAlerts()
+  (_newVal, oldVal) => {
+    // Immediate fetch on first load (when oldVal is undefined)
+    if (oldVal === undefined) {
+      fetchAlerts()
+    } else {
+      debouncedFetchAlerts()
+    }
   },
   { immediate: true }
 )
+
+// Cleanup debounce timer on unmount to prevent memory leaks
+onUnmounted(() => {
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value)
+    debounceTimer.value = null
+  }
+})
 </script>
 
 <template>
@@ -177,8 +358,9 @@ watch(
       <div
         v-for="alert in alerts"
         :key="alert.id"
-        class="alert-item"
+        class="alert-item clickable"
         data-testid="alert-item"
+        @click="handleAlertClick(alert)"
       >
         <div class="alert-header">
           <span class="alert-type">{{ alert.alertType?.split('.')[1] || alert.alertType }}</span>
@@ -206,6 +388,154 @@ watch(
         {{ loadingMore ? 'Loading...' : 'Load More' }}
       </button>
     </div>
+
+    <!-- Alert Details Modal -->
+    <div v-if="showModal" class="modal-overlay" @click.self="closeModal" data-testid="alert-modal-overlay">
+      <div class="modal-content" data-testid="alert-modal">
+        <div class="modal-header">
+          <h3>Alert Details</h3>
+          <div class="modal-header-buttons">
+            <button
+              v-if="alertImageUrl"
+              class="image-button"
+              @click="handleImageClick('preview')"
+              data-testid="alert-image-button"
+            >
+              Preview
+            </button>
+            <button
+              v-if="alertImageUrl"
+              class="image-button image-button-hd"
+              @click="handleImageClick('main')"
+              data-testid="alert-image-hd-button"
+            >
+              HD Image
+            </button>
+            <button
+              v-if="alertImageUrl"
+              class="image-button image-button-video"
+              @click="handleVideoClick"
+              data-testid="alert-video-button"
+            >
+              Video
+            </button>
+            <button class="close-button" @click="closeModal" data-testid="alert-modal-close">&times;</button>
+          </div>
+        </div>
+        <div class="modal-body">
+          <div v-if="loadingDetails" class="loading">Loading alert details...</div>
+          <div v-else-if="detailsError" class="error">{{ detailsError.message }}</div>
+          <div v-else-if="selectedAlert" class="alert-details">
+            <div class="detail-row">
+              <span class="detail-label">ID:</span>
+              <span class="detail-value monospace">{{ selectedAlert.id }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Type:</span>
+              <span class="detail-value">{{ formatAlertType(selectedAlert.alertType) }}</span>
+            </div>
+            <div v-if="selectedAlert.alertName" class="detail-row">
+              <span class="detail-label">Name:</span>
+              <span class="detail-value">{{ selectedAlert.alertName }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Timestamp:</span>
+              <span class="detail-value">{{ formatTime(selectedAlert.timestamp) }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Created:</span>
+              <span class="detail-value">{{ formatTime(selectedAlert.createTimestamp) }}</span>
+            </div>
+            <div v-if="selectedAlert.priority !== undefined" class="detail-row">
+              <span class="detail-label">Priority:</span>
+              <span class="detail-value">
+                <span class="priority-badge" :class="getPriorityClass(selectedAlert.priority)">
+                  P{{ selectedAlert.priority }}
+                </span>
+              </span>
+            </div>
+            <div v-if="selectedAlert.category" class="detail-row">
+              <span class="detail-label">Category:</span>
+              <span class="detail-value">{{ selectedAlert.category }}</span>
+            </div>
+            <div v-if="selectedAlert.description" class="detail-row">
+              <span class="detail-label">Description:</span>
+              <span class="detail-value">{{ selectedAlert.description }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Actor ID:</span>
+              <span class="detail-value monospace">{{ selectedAlert.actorId }}</span>
+            </div>
+            <div v-if="selectedAlert.actorName" class="detail-row">
+              <span class="detail-label">Actor Name:</span>
+              <span class="detail-value">{{ selectedAlert.actorName }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Actor Type:</span>
+              <span class="detail-value">{{ selectedAlert.actorType }}</span>
+            </div>
+            <div v-if="selectedAlert.locationName" class="detail-row">
+              <span class="detail-label">Location:</span>
+              <span class="detail-value">{{ selectedAlert.locationName }}</span>
+            </div>
+            <div v-if="selectedAlert.eventId" class="detail-row">
+              <span class="detail-label">Event ID:</span>
+              <span class="detail-value monospace">{{ selectedAlert.eventId }}</span>
+            </div>
+            <div v-if="selectedAlert.ruleId" class="detail-row">
+              <span class="detail-label">Rule ID:</span>
+              <span class="detail-value monospace">{{ selectedAlert.ruleId }}</span>
+            </div>
+            <div v-if="selectedAlert.dataSchemas && selectedAlert.dataSchemas.length > 0" class="detail-row">
+              <span class="detail-label">Data Schemas:</span>
+              <span class="detail-value">{{ selectedAlert.dataSchemas.join(', ') }}</span>
+            </div>
+            <div v-if="selectedAlert.data && Object.keys(selectedAlert.data).length > 0" class="detail-section">
+              <span class="detail-label">Data:</span>
+              <pre class="detail-json">{{ JSON.stringify(selectedAlert.data, null, 2) }}</pre>
+            </div>
+            <div v-if="selectedAlert.actions && Object.keys(selectedAlert.actions).length > 0" class="detail-section">
+              <span class="detail-label">Actions:</span>
+              <pre class="detail-json">{{ JSON.stringify(selectedAlert.actions, null, 2) }}</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Image/Video Lightbox -->
+    <div v-if="showLightbox" class="lightbox-overlay" @click.self="closeLightbox" data-testid="lightbox-overlay">
+      <div class="lightbox-content" data-testid="lightbox">
+        <button class="lightbox-close" @click="closeLightbox" data-testid="lightbox-close">&times;</button>
+        <!-- Video mode -->
+        <template v-if="showVideo">
+          <div v-if="loadingVideo" class="lightbox-loading">Loading video...</div>
+          <div v-else-if="videoError" class="lightbox-error">{{ videoError }}</div>
+          <video
+            v-else-if="videoUrl"
+            :ref="(el) => hlsPlayer.videoRef.value = el as HTMLVideoElement | null"
+            class="lightbox-video"
+            controls
+            autoplay
+            muted
+            playsinline
+            data-testid="lightbox-video"
+          />
+        </template>
+        <!-- Image mode -->
+        <template v-else>
+          <div v-if="loadingImage" class="lightbox-loading">Loading image...</div>
+          <div v-else-if="imageError" class="lightbox-error">{{ imageError }}</div>
+          <img
+            v-else-if="lightboxImageUrl"
+            :src="lightboxImageUrl"
+            alt="Alert image"
+            class="lightbox-image"
+            data-testid="lightbox-image"
+          />
+        </template>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -327,4 +657,225 @@ watch(
   background: #f5f5f5;
   color: #999;
 }
+
+.alert-item.clickable {
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.alert-item.clickable:hover {
+  background: #f0f0f0;
+  border-color: #ccc;
+}
+
+/* Modal styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 8px;
+  width: 80%;
+  max-height: 80vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  color: #333;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #666;
+  padding: 0;
+  line-height: 1;
+}
+
+.close-button:hover {
+  color: #333;
+}
+
+.modal-body {
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.alert-details {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.detail-row {
+  display: flex;
+  gap: 10px;
+}
+
+.detail-label {
+  font-weight: 600;
+  color: #555;
+  min-width: 110px;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  color: #333;
+  word-break: break-word;
+}
+
+.detail-value.monospace {
+  font-family: monospace;
+  font-size: 0.85rem;
+  background: #f5f5f5;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+.detail-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.detail-json {
+  background: #f8f8f8;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 12px;
+  font-size: 0.8rem;
+  overflow-x: auto;
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.modal-header-buttons {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.image-button {
+  padding: 6px 14px;
+  background: #42b883;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+.image-button:hover {
+  background: #3aa876;
+}
+
+.image-button-hd {
+  background: #3b82f6;
+}
+
+.image-button-hd:hover {
+  background: #2563eb;
+}
+
+.image-button-video {
+  background: #9b59b6;
+}
+
+.image-button-video:hover {
+  background: #8e44ad;
+}
+
+/* Lightbox styles */
+.lightbox-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1100;
+}
+
+.lightbox-content {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lightbox-close {
+  position: absolute;
+  top: -40px;
+  right: 0;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 2rem;
+  cursor: pointer;
+  padding: 5px 10px;
+  line-height: 1;
+}
+
+.lightbox-close:hover {
+  color: #ccc;
+}
+
+.lightbox-image {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 4px;
+}
+
+.lightbox-video {
+  max-width: 90vw;
+  max-height: 90vh;
+  width: 100%;
+  background: #000;
+  border-radius: 4px;
+}
+
+.lightbox-loading,
+.lightbox-error {
+  color: white;
+  font-size: 1.1rem;
+  padding: 40px;
+}
+
+.lightbox-error {
+  color: #ff6b6b;
+}
 </style>

package/examples/vue-alerts-metrics/src/components/CameraSelector.vue

@@ -2,14 +2,16 @@
 import { ref, onMounted } from 'vue'
 import { getCameras, type Camera, type EenError } from 'een-api-toolkit'
 
+const ALL_CAMERAS_VALUE = '__all__'
+
 const emit = defineEmits<{
-  select: [camera: Camera]
+  select: [camera: Camera | null]
 }>()
 
 const cameras = ref<Camera[]>([])
 const loading = ref(false)
 const error = ref<EenError | null>(null)
-const selectedCameraId = ref<string>('')
+const selectedCameraId = ref<string>(ALL_CAMERAS_VALUE)
 
 async function fetchCameras() {
   loading.value = true
@@ -22,15 +24,22 @@ async function fetchCameras() {
     cameras.value = []
   } else {
     cameras.value = result.data?.results ?? []
+    // Default to "All Cameras" and emit null
+    selectedCameraId.value = ALL_CAMERAS_VALUE
+    emit('select', null)
   }
 
   loading.value = false
 }
 
 function handleChange() {
-  const camera = cameras.value.find(c => c.id === selectedCameraId.value)
-  if (camera) {
-    emit('select', camera)
+  if (selectedCameraId.value === ALL_CAMERAS_VALUE) {
+    emit('select', null)
+  } else {
+    const camera = cameras.value.find(c => c.id === selectedCameraId.value)
+    if (camera) {
+      emit('select', camera)
+    }
   }
 }
 
@@ -49,7 +58,8 @@ onMounted(() => {
       :disabled="loading"
       data-testid="camera-select"
     >
-      <option value="" disabled>{{ loading ? 'Loading cameras...' : 'Select a camera' }}</option>
+      <option v-if="loading" value="" disabled>Loading cameras...</option>
+      <option :value="ALL_CAMERAS_VALUE" data-testid="camera-option-all">All Cameras</option>
       <option
         v-for="camera in cameras"
         :key="camera.id"