een-api-toolkit 0.3.15 → 0.3.16

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

@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-import { listNotifications, type Camera, type Notification, type EenError } from 'een-api-toolkit'
+import { ref, watch, computed, onUnmounted } from 'vue'
+import { listNotifications, getNotification, getRecordedImage, type Camera, type Notification, 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
 }>()
 
@@ -13,6 +19,67 @@ const loadingMore = ref(false)
 const error = ref<EenError | null>(null)
 const nextPageToken = ref<string | undefined>(undefined)
 
+// Modal state
+const showModal = ref(false)
+const selectedNotification = ref<Notification | 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 notification has an httpsUrl in its data
+// The httpsUrl is in the list_data array, in an object with type "een.fullFrameImageUrl.v1"
+const notificationImageUrl = computed(() => {
+  const rawData = selectedNotification.value?.data
+  if (!rawData) return null
+
+  // Validate data is an object before casting
+  if (typeof rawData !== 'object' || rawData === null) return null
+  const data = rawData as Record<string, unknown>
+
+  // Look for list_data array
+  const listData = data.list_data
+  if (!Array.isArray(listData)) return null
+
+  // Find the object with type "een.fullFrameImageUrl.v1"
+  const imageItem = listData.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
@@ -24,8 +91,6 @@ function getTimeRangeMs(range: string): number {
 }
 
 async function fetchNotifications(append = false) {
-  if (!props.camera?.id) return
-
   if (append) {
     loadingMore.value = true
   } else {
@@ -35,18 +100,27 @@ async function fetchNotifications(append = false) {
   }
   error.value = null
 
-  const now = new Date()
-  const rangeMs = getTimeRangeMs(props.timeRange)
-  const startTime = new Date(now.getTime() - rangeMs)
-
-  const result = await listNotifications({
-    actorId: props.camera.id,
-    timestamp__gte: startTime.toISOString(),
-    timestamp__lte: now.toISOString(),
+  const params: Parameters<typeof listNotifications>[0] = {
     pageSize: 20,
     pageToken: append ? nextPageToken.value : undefined,
     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 = props.camera.id
+  }
+
+  const result = await listNotifications(params)
 
   if (result.error) {
     error.value = result.error
@@ -84,13 +158,126 @@ function getCategoryClass(category: string): string {
   }
 }
 
+async function handleNotificationClick(notification: Notification) {
+  showModal.value = true
+  loadingDetails.value = true
+  detailsError.value = null
+  selectedNotification.value = null
+
+  const result = await getNotification(notification.id)
+
+  if (result.error) {
+    detailsError.value = result.error
+  } else {
+    selectedNotification.value = result.data
+  }
+
+  loadingDetails.value = false
+}
+
+function closeModal() {
+  showModal.value = false
+  selectedNotification.value = null
+  detailsError.value = null
+}
+
+async function handleImageClick(quality: 'preview' | 'main' = 'preview') {
+  if (!notificationImageUrl.value) return
+
+  loadingImage.value = true
+  imageError.value = null
+  lightboxImageUrl.value = null
+  showLightbox.value = true
+
+  // Parse the URL to extract parameters
+  const params = parseImageUrlParams(notificationImageUrl.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 (!notificationImageUrl.value) return
+
+  // Parse the URL to extract parameters
+  const params = parseImageUrlParams(notificationImageUrl.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 debouncedFetchNotifications() {
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value)
+  }
+  debounceTimer.value = setTimeout(() => {
+    fetchNotifications()
+    debounceTimer.value = null
+  }, DEBOUNCE_DELAY)
+}
+
+// Fetch notifications when camera or time range changes (debounced)
 watch(
   () => [props.camera?.id, props.timeRange],
-  () => {
-    fetchNotifications()
+  (_newVal, oldVal) => {
+    // Immediate fetch on first load (when oldVal is undefined)
+    if (oldVal === undefined) {
+      fetchNotifications()
+    } else {
+      debouncedFetchNotifications()
+    }
   },
   { immediate: true }
 )
+
+// Cleanup debounce timer on unmount to prevent memory leaks
+onUnmounted(() => {
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value)
+    debounceTimer.value = null
+  }
+})
 </script>
 
 <template>
@@ -108,9 +295,10 @@ watch(
       <div
         v-for="notification in notifications"
         :key="notification.id"
-        class="notification-item"
+        class="notification-item clickable"
         :class="{ unread: !notification.read }"
         data-testid="notification-item"
+        @click="handleNotificationClick(notification)"
       >
         <div class="notification-header">
           <span
@@ -140,6 +328,154 @@ watch(
         {{ loadingMore ? 'Loading...' : 'Load More' }}
       </button>
     </div>
+
+    <!-- Notification Details Modal -->
+    <div v-if="showModal" class="modal-overlay" @click.self="closeModal" data-testid="notification-modal-overlay">
+      <div class="modal-content" data-testid="notification-modal">
+        <div class="modal-header">
+          <h3>Notification Details</h3>
+          <div class="modal-header-buttons">
+            <button
+              v-if="notificationImageUrl"
+              class="image-button"
+              @click="handleImageClick('preview')"
+              data-testid="notification-image-button"
+            >
+              Preview
+            </button>
+            <button
+              v-if="notificationImageUrl"
+              class="image-button image-button-hd"
+              @click="handleImageClick('main')"
+              data-testid="notification-image-hd-button"
+            >
+              HD Image
+            </button>
+            <button
+              v-if="notificationImageUrl"
+              class="image-button image-button-video"
+              @click="handleVideoClick"
+              data-testid="notification-video-button"
+            >
+              Video
+            </button>
+            <button class="close-button" @click="closeModal" data-testid="notification-modal-close">&times;</button>
+          </div>
+        </div>
+        <div class="modal-body">
+          <div v-if="loadingDetails" class="loading">Loading notification details...</div>
+          <div v-else-if="detailsError" class="error">{{ detailsError.message }}</div>
+          <div v-else-if="selectedNotification" class="notification-details">
+            <div class="detail-row">
+              <span class="detail-label">ID:</span>
+              <span class="detail-value monospace">{{ selectedNotification.id }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Category:</span>
+              <span class="detail-value">
+                <span class="category-badge" :class="getCategoryClass(selectedNotification.category)">
+                  {{ selectedNotification.category }}
+                </span>
+              </span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Status:</span>
+              <span class="detail-value">{{ selectedNotification.status }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Read:</span>
+              <span class="detail-value">{{ selectedNotification.read ? 'Yes' : 'No' }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Timestamp:</span>
+              <span class="detail-value">{{ formatTime(selectedNotification.timestamp) }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Created:</span>
+              <span class="detail-value">{{ formatTime(selectedNotification.createTimestamp) }}</span>
+            </div>
+            <div v-if="selectedNotification.sentTimestamp" class="detail-row">
+              <span class="detail-label">Sent:</span>
+              <span class="detail-value">{{ formatTime(selectedNotification.sentTimestamp) }}</span>
+            </div>
+            <div v-if="selectedNotification.description" class="detail-row">
+              <span class="detail-label">Description:</span>
+              <span class="detail-value">{{ selectedNotification.description }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Actor ID:</span>
+              <span class="detail-value monospace">{{ selectedNotification.actorId }}</span>
+            </div>
+            <div v-if="selectedNotification.actorName" class="detail-row">
+              <span class="detail-label">Actor Name:</span>
+              <span class="detail-value">{{ selectedNotification.actorName }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Actor Type:</span>
+              <span class="detail-value">{{ selectedNotification.actorType }}</span>
+            </div>
+            <div v-if="selectedNotification.alertId" class="detail-row">
+              <span class="detail-label">Alert ID:</span>
+              <span class="detail-value monospace">{{ selectedNotification.alertId }}</span>
+            </div>
+            <div v-if="selectedNotification.alertType" class="detail-row">
+              <span class="detail-label">Alert Type:</span>
+              <span class="detail-value">{{ selectedNotification.alertType }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">User ID:</span>
+              <span class="detail-value monospace">{{ selectedNotification.userId }}</span>
+            </div>
+            <div v-if="selectedNotification.notificationActions && selectedNotification.notificationActions.length > 0" class="detail-row">
+              <span class="detail-label">Actions:</span>
+              <span class="detail-value">{{ selectedNotification.notificationActions.join(', ') }}</span>
+            </div>
+            <div v-if="selectedNotification.dataSchemas && selectedNotification.dataSchemas.length > 0" class="detail-row">
+              <span class="detail-label">Data Schemas:</span>
+              <span class="detail-value">{{ selectedNotification.dataSchemas.join(', ') }}</span>
+            </div>
+            <div v-if="selectedNotification.data && Object.keys(selectedNotification.data).length > 0" class="detail-section">
+              <span class="detail-label">Data:</span>
+              <pre class="detail-json">{{ JSON.stringify(selectedNotification.data, null, 2) }}</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Image/Video Lightbox -->
+    <div v-if="showLightbox" class="lightbox-overlay" @click.self="closeLightbox" data-testid="notification-lightbox-overlay">
+      <div class="lightbox-content" data-testid="notification-lightbox">
+        <button class="lightbox-close" @click="closeLightbox" data-testid="notification-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="notification-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="Notification image"
+            class="lightbox-image"
+            data-testid="notification-lightbox-image"
+          />
+        </template>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -260,4 +596,230 @@ watch(
   background: #f5f5f5;
   color: #999;
 }
+
+.notification-item.clickable {
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.notification-item.clickable:hover {
+  background: #f0f0f0;
+  border-color: #ccc;
+}
+
+.notification-item.clickable.unread:hover {
+  background: #e0f2fe;
+  border-color: #7dd3fc;
+}
+
+/* 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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.notification-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;
+}
+
+/* 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>