een-api-toolkit 0.3.10 → 0.3.11

package/CHANGELOG.md

@@ -2,24 +2,144 @@
 
 All notable changes to this project will be documented in this file.
 
-## [0.3.10] - 2026-01-09
+## [0.3.11] - 2026-01-12
 
 ### Release Summary
 
-No PR descriptions available for this release.
+#### PR #52: Release v0.3.10: Vue-media improvements and agent definitions
+## Summary
+
+This release includes improvements to the vue-media example and adds Claude Code agent definitions.
+
+### Changes
+
+- **feat(vue-media)**: Add seconds precision and Now button to recorded images
+  - Add seconds precision to datetime picker (`step="1"`)
+  - Add "Now" button to reset datetime picker to current time
+  - Update page titles to indicate "(Preview)" image quality
+  - Update README documentation with current API examples
+
+- **chore**: Add Claude Code agent definitions
+  - `docs-accuracy-reviewer`: Verifies documentation accuracy
+  - `test-runner`: Runs unit and E2E test suites
+
+### Commits
+
+- 172ea1c chore: Add Claude Code agent definitions
+- 142999e feat(vue-media): Add seconds precision and Now button to recorded images
+
+## Test Results
+
+- **Lint**: ✅ Passed (1 warning)
+- **Unit Tests**: ✅ 188 passed
+- **Build**: ✅ Successful
+
+## Version
+
+`0.3.10`
+
+#### PR #53: feat(vue-media): Add HLS video streaming and improve media pages
+## Summary
+
+This PR adds HLS video streaming capability to the vue-media example and improves the existing media pages with better UX features.
+
+### New Features
+- **HLS Video page** - Stream recorded video using HLS protocol with adaptive bitrate support
+- **Shared datetime state** - Datetime selection persists across Recorded Image and HLS Video pages
+- **Clip Time button** - Quickly set datetime picker to the clip's start time
+- **Time position indicator** - Shows whether selected time is before, inside, or after the segment
+- **Image resolution display** - Shows dimensions for preview and main images on Recorded Image page
+
+### Changes
+- Add HLS.vue page for HLS video streaming
+- Add useSelectedDateTime composable for shared datetime state
+- Display segment start/end times with duration on HLS page
+- Use YYYY-MM-DD date format and AM/PM time notation
+- Remove MP4 playback page (simplified to HLS only)
+- Update README with comprehensive documentation of all pages and APIs
+- Add E2E tests for HLS video page
+
+### Commits
+- e374bd6 feat(vue-media): Add HLS video streaming and improve media pages
+- 14b8d71 fix(vue-media): Now button triggers image fetch like Go button
+- f3bb8bf Merge pull request #52 from klaushofrichter/develop
+- 6368e35 fix: Address code review feedback and test timeout issue
+- 172ea1c chore: Add Claude Code agent definitions
+- 142999e feat(vue-media): Add seconds precision and Now button to recorded images
+
+## Test Results
+- **Lint**: Passed (1 warning)
+- **Unit Tests**: 188 passed
+- **Build**: Success
+
+## Version
+`0.3.10`
+
+---
+🤖 Generated with [Claude Code](https://claude.ai/code)
+
+#### PR #54: chore: Audit and upgrade dependencies
+## Summary
+
+- Adds `@eslint/js` package for ESLint v9 flat config compatibility
+- Merges latest develop changes (conflict resolution)
+- Removes accidentally committed non-code files
+
+## Changes
+
+This branch was originally created to audit dependencies but diverged from develop. The main contribution is:
+
+- **ESLint v9 compatibility**: Added `@eslint/js` package required for the flat config format
+
+## Conflict Resolution
+
+Resolved merge conflicts with develop:
+- `eslint.config.js`: Adopted develop's `commonRules` pattern
+- `package.json`: Merged dependencies  
+- `vite.config.ts`: Used develop's test exclude pattern
+- Removed obsolete `examples/vue-basic/` (renamed to `vue-users` in develop)
+
+## Test Results
+
+- Linting: Passed (1 warning - existing console statement)
+- Unit tests: 188/188 passed
+- Build: Successful
+
+## Version
+
+`0.3.11`
+
+---
+Generated with [Claude Code](https://claude.ai/code)
+
 
 ### Detailed Changes
 
 #### Features
-- feat: Add STORAGE_STRATEGY_DESCRIPTIONS constant for dynamic UI display
-- feat: Add debug logging for storage fallback and display storage strategy on login pages
+- feat(vue-media): Add 60 second loading timeout for HLS video streams
+- feat(vue-media): Add HLS video streaming and improve media pages
+- feat(vue-media): Add seconds precision and Now button to recorded images
+
+#### Bug Fixes
+- fix(vue-media): Improve UI labels and layout
+- fix(vue-media): Address remaining code review issues
+- fix(vue-media): Address code review high/medium priority issues
+- fix(vue-media): Now button triggers image fetch like Go button
+- fix: Address code review feedback and test timeout issue
 
 #### Other Changes
-- refactor: Move storage strategy display from Login to Home pages
+- chore: Address code review recommendations
+- chore: Consolidate .gitignore presentation patterns
+- chore: Add presentation artifacts to .gitignore
+- chore: Remove accidentally committed non-code files
+- chore: Update example dependencies and fix test configuration
+- refactor(vue-media): Extract timestamp utilities and fix code review issues
+- chore: Add Claude Code agent definitions
+- chore: Upgrade all optional dependencies to latest major versions
 
 ### Links
 - [npm package](https://www.npmjs.com/package/een-api-toolkit)
-- [Full Changelog](https://github.com/klaushofrichter/een-api-toolkit/compare/v0.3.8...v0.3.10)
+- [Full Changelog](https://github.com/klaushofrichter/een-api-toolkit/compare/v0.3.10...v0.3.11)
 
 ---
-*Released: 2026-01-09 20:49:25 CST*
+*Released: 2026-01-12 17:56:08 CST*

package/docs/AI-CONTEXT.md

@@ -1,6 +1,6 @@
 # EEN API Toolkit - AI Reference
 
-> **Version:** 0.3.10
+> **Version:** 0.3.11
 >
 > This file is optimized for AI assistants. It contains all API signatures,
 > types, and usage patterns in a single, parseable document.

package/examples/vue-media/README.md

@@ -1,6 +1,6 @@
 # EEN API Toolkit - Vue Media Example
 
-A Vue 3 example demonstrating how to fetch live and recorded images from EEN cameras using the een-api-toolkit.
+A Vue 3 example demonstrating how to fetch live images, recorded images, and stream HLS video from EEN cameras using the een-api-toolkit.
 
 ![Media Screenshot](media-screenshot.png)
 
@@ -19,21 +19,78 @@ This is a good balance between security (limiting XSS blast radius) and user exp
 
 - OAuth authentication flow (login, callback, logout)
 - Protected routes with navigation guards
-- `getCameras()` function for listing cameras
-- `getLiveImage()` function for fetching live preview images
-- `getRecordedImage()` function for fetching recorded images with navigation
 - Camera selection with persistence across pages
-- Auto-refresh functionality for live images
-- Time-based navigation for recorded images (prev/next)
-- Image timestamp display
-
-## APIs Used
-
-- `getCameras()` - List available cameras
-- `getLiveImage()` - Fetch live preview image as base64
-- `getRecordedImage()` - Fetch recorded image at specific timestamp
-- `useAuthStore()` - Authentication state management
-- `initEenToolkit()` - Toolkit initialization
+- Live image viewing with auto-refresh
+- Recorded image viewing with prev/next navigation
+- HLS video streaming with adaptive bitrate
+- Datetime picker with seconds precision
+- Shared datetime state across pages
+
+## Pages Overview
+
+### Home Page
+The landing page that displays a welcome message and login prompt when not authenticated. Shows the available toolkit functions and their descriptions.
+
+### Live Camera Image
+Displays live preview images from the selected camera with automatic refresh every 5 seconds.
+
+**APIs Used:**
+- `getCameras()` - Lists available cameras for selection
+- `getLiveImage()` - Fetches the current live preview image as base64
+
+**Features:**
+- Camera selector dropdown
+- Auto-refresh with error recovery (stops after 3 consecutive failures)
+- Displays image timestamp
+
+### Recorded Image
+Displays recorded images at a specific point in time, showing both preview and main quality images side by side.
+
+**APIs Used:**
+- `getCameras()` - Lists available cameras for selection
+- `getRecordedImage()` - Fetches recorded images with pagination tokens
+
+**Features:**
+- Camera selector dropdown
+- Datetime picker with seconds precision
+- Previous/Next navigation using pagination tokens
+- "Now" button to reset to current time
+- Displays both preview and main quality images
+- Shows image resolution (e.g., 640x360 for preview, 1920x1080 for main)
+- Displays UTC timestamp in EEN API format
+
+### HLS Video
+Streams recorded video using HLS (HTTP Live Streaming) protocol with adaptive bitrate support.
+
+**APIs Used:**
+- `getCameras()` - Lists available cameras for selection
+- `initMediaSession()` - Initializes the media session (required for video URLs)
+- `listMedia()` - Retrieves media intervals with HLS URLs
+- `useAuthStore()` - Explicitly used to get the token for HLS.js requests (see note below)
+
+**Features:**
+- Camera selector dropdown
+- Datetime picker with seconds precision
+- "Now" button to reset to current time
+- "Clip Time" button to set picker to the clip's start time
+- Displays segment start/end times with duration
+- Shows whether selected time is before, inside, or after the segment
+- Uses HLS.js library for cross-browser HLS support
+- Adds Authorization header to HLS segment requests
+
+## APIs Used Summary
+
+| API Function | Pages | Purpose |
+|--------------|-------|---------|
+| `getCameras()` | All media pages | List available cameras |
+| `getLiveImage()` | Live Camera Image | Fetch live preview image |
+| `getRecordedImage()` | Recorded Image | Fetch recorded images with navigation |
+| `initMediaSession()` | HLS Video | Initialize media session for video URLs |
+| `listMedia()` | HLS Video | Get media intervals with streaming URLs |
+| `useAuthStore()` | All pages | Authentication state management |
+| `initEenToolkit()` | App initialization | Configure toolkit settings |
+
+**Note on `useAuthStore()`:** All toolkit functions (`getCameras`, `getLiveImage`, `getRecordedImage`, `listMedia`) use `useAuthStore()` internally to get the authentication token. The HLS Video page is the only one that explicitly calls `useAuthStore()` in its code because HLS.js is a third-party library that makes its own HTTP requests - the token must be manually passed to HLS.js via the `xhrSetup` callback.
 
 ## Setup
 
@@ -65,7 +122,7 @@ All commands below should be run from this example directory (`examples/vue-medi
 3. Edit `.env` with your EEN credentials:
    ```env
    VITE_EEN_CLIENT_ID=your-client-id
-   VITE_PROXY_URL=http://localhost:8787
+   VITE_PROXY_URL=http://127.0.0.1:8787
    # DO NOT change the redirect URI - EEN IDP only permits this URL
    VITE_REDIRECT_URI=http://127.0.0.1:3333
    ```
@@ -87,17 +144,21 @@ All commands below should be run from this example directory (`examples/vue-medi
 
 ```
 src/
-├── main.ts          # App entry, toolkit initialization
-├── App.vue          # Root component with navigation
+├── main.ts              # App entry, toolkit initialization
+├── App.vue              # Root component with navigation
 ├── router/
-│   └── index.ts     # Vue Router with auth guards
+│   └── index.ts         # Vue Router with auth guards
+├── composables/
+│   ├── useSelectedCamera.ts    # Shared camera selection state
+│   └── useSelectedDateTime.ts  # Shared datetime state
 └── views/
-    ├── Home.vue     # Home page with login prompt
-    ├── Login.vue    # OAuth login redirect
-    ├── Callback.vue # OAuth callback handler
-    ├── LiveCamera.vue    # Live image viewer with auto-refresh
-    ├── RecordedImage.vue # Recorded image viewer with navigation
-    └── Logout.vue   # Logout handler
+    ├── Home.vue         # Home page with login prompt
+    ├── Login.vue        # OAuth login redirect
+    ├── Callback.vue     # OAuth callback handler
+    ├── LiveCamera.vue   # Live image viewer with auto-refresh
+    ├── RecordedImage.vue # Recorded image viewer (preview + main)
+    ├── HLS.vue          # HLS video streaming
+    └── Logout.vue       # Logout handler
 ```
 
 ## Key Code Examples
@@ -105,94 +166,102 @@ src/
 ### Fetching Live Images (LiveCamera.vue)
 
 ```typescript
-import { getLiveImage, type LiveImageParams } from 'een-api-toolkit'
+import { getLiveImage } from 'een-api-toolkit'
 
 async function fetchLiveImage() {
-  const result = await getLiveImage(selectedCameraId.value, {
-    type: 'preview'
-  })
+  const result = await getLiveImage({ deviceId: selectedCameraId.value })
 
   if (result.error) {
     error.value = result.error.message
   } else {
-    imageData.value = result.data.image
+    imageData.value = result.data.imageData
     timestamp.value = result.data.timestamp
   }
 }
 ```
 
-### Auto-Refresh for Live Images
-
-```typescript
-let refreshInterval: number | null = null
-
-function startAutoRefresh() {
-  refreshInterval = window.setInterval(() => {
-    fetchLiveImage()
-  }, 2000) // Refresh every 2 seconds
-}
-
-function stopAutoRefresh() {
-  if (refreshInterval) {
-    clearInterval(refreshInterval)
-    refreshInterval = null
-  }
-}
-```
-
 ### Fetching Recorded Images (RecordedImage.vue)
 
-```typescript
-import { getRecordedImage, type RecordedImageParams } from 'een-api-toolkit'
-
-async function fetchRecordedImage() {
-  const result = await getRecordedImage(selectedCameraId.value, {
-    timestamp__gte: selectedTimestamp.value,
-    type: 'preview'
-  })
+Fetches both preview and main quality images for comparison:
 
-  if (result.error) {
-    error.value = result.error.message
-  } else {
-    imageData.value = result.data.image
-    actualTimestamp.value = result.data.timestamp
-    prevToken.value = result.data.prevToken
-    nextToken.value = result.data.nextToken
-  }
-}
+```typescript
+import { getRecordedImage } from 'een-api-toolkit'
+
+// Fetch preview image
+const result = await getRecordedImage({
+  deviceId: selectedCameraId.value,
+  type: 'preview',
+  timestamp__gte: timestamp
+})
+
+// Fetch main image at the same timestamp
+const mainResult = await getRecordedImage({
+  deviceId: selectedCameraId.value,
+  type: 'main',
+  timestamp__gte: result.data.timestamp
+})
 ```
 
-### Navigating Recorded Images
+### Streaming HLS Video (HLS.vue)
 
 ```typescript
-async function navigateNext() {
-  if (!nextToken.value) return
-
-  const result = await getRecordedImage(selectedCameraId.value, {
-    next: nextToken.value,
-    type: 'preview'
-  })
-
-  if (!result.error) {
-    imageData.value = result.data.image
-    actualTimestamp.value = result.data.timestamp
-    prevToken.value = result.data.prevToken
-    nextToken.value = result.data.nextToken
+import { listMedia, initMediaSession, useAuthStore } from 'een-api-toolkit'
+import Hls from 'hls.js'
+
+// Initialize media session first
+await initMediaSession()
+
+// Get HLS URL from listMedia
+const result = await listMedia({
+  deviceId: selectedCameraId.value,
+  type: 'main',
+  mediaType: 'video',
+  startTimestamp: timestamp,
+  include: ['hlsUrl']
+})
+
+// Configure HLS.js with Authorization header
+const authStore = useAuthStore()
+const hls = new Hls({
+  xhrSetup: (xhr: XMLHttpRequest) => {
+    xhr.setRequestHeader('Authorization', `Bearer ${authStore.token}`)
   }
-}
+})
+
+hls.loadSource(result.data.results[0].hlsUrl)
+hls.attachMedia(videoElement)
 ```
 
 ### Displaying Images
 
+The toolkit returns `imageData` as a complete data URL (including the `data:image/jpeg;base64,` prefix), so it can be used directly with `:src`:
+
 ```vue
 <template>
   <img
     v-if="imageData"
-    :src="`data:image/jpeg;base64,${imageData}`"
+    :src="imageData"
     alt="Camera image"
   />
-  <p v-if="timestamp">
-    Timestamp: {{ new Date(timestamp).toLocaleString() }}
-  </p>
 </template>
 ```
+
+### Shared State with Composables
+
+Camera selection and datetime are shared across pages using Vue composables:
+
+```typescript
+// useSelectedCamera.ts
+import { ref } from 'vue'
+
+const selectedCameraId = ref<string | null>(null)
+
+export function useSelectedCamera() {
+  return {
+    selectedCameraId,
+    setSelectedCamera: (id: string) => { selectedCameraId.value = id }
+  }
+}
+```
+
+This allows users to switch between Live Camera, Recorded Image, and HLS Video pages while maintaining their camera and time selection.

package/examples/vue-media/e2e/app.spec.ts

@@ -52,6 +52,7 @@ test.describe('vue-media example app', () => {
     await expect(page.getByText('getCameras()')).toBeVisible()
     await expect(page.getByText('getLiveImage()')).toBeVisible()
     await expect(page.getByText('getRecordedImage()')).toBeVisible()
+    await expect(page.getByText('listMedia()')).toBeVisible()
   })
 
   test('recorded route redirects to login when not authenticated', async ({ page }) => {
@@ -60,4 +61,11 @@ test.describe('vue-media example app', () => {
     // Should redirect to login page (auth guard)
     await expect(page).toHaveURL('/login')
   })
+
+  test('hls route redirects to login when not authenticated', async ({ page }) => {
+    await page.goto('/hls')
+
+    // Should redirect to login page (auth guard)
+    await expect(page).toHaveURL('/login')
+  })
 })

package/examples/vue-media/e2e/auth.spec.ts

@@ -201,7 +201,7 @@ test.describe('Vue Media Example - Auth', () => {
     await page.click('[data-testid="nav-live"]')
     await page.waitForURL('/live')
 
-    await expect(page.getByRole('heading', { name: 'Live Camera View' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Live Camera Image (preview)' })).toBeVisible()
 
     // Wait for cameras to load
     await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
@@ -243,7 +243,7 @@ test.describe('Vue Media Example - Auth', () => {
     await page.click('[data-testid="nav-recorded"]')
     await page.waitForURL('/recorded')
 
-    await expect(page.getByRole('heading', { name: 'Recorded Images' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Recorded Image (Preview and Main)' })).toBeVisible()
 
     // Wait for cameras to load
     await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
@@ -269,6 +269,7 @@ test.describe('Vue Media Example - Auth', () => {
     if (hasCameras) {
       await expect(page.getByTestId('datetime-input')).toBeVisible()
       await expect(page.getByTestId('go-button')).toBeVisible()
+      await expect(page.getByTestId('now-button')).toBeVisible()
       await expect(page.getByTestId('prev-button')).toBeVisible()
       await expect(page.getByTestId('next-button')).toBeVisible()
       console.log('Recorded image controls visible')
@@ -277,6 +278,157 @@ test.describe('Vue Media Example - Auth', () => {
     }
   })
 
+  test('Now button resets datetime picker to current time', async ({ page }) => {
+    skipIfNoProxy()
+    skipIfNoCredentials()
+
+    await performLogin(page, TEST_USER!, TEST_PASSWORD!)
+    await expect(page.getByTestId('nav-recorded')).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
+
+    await page.click('[data-testid="nav-recorded"]')
+    await page.waitForURL('/recorded')
+
+    await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
+      timeout: TIMEOUTS.MEDIA_LOAD
+    })
+
+    const hasCameras = await page.getByTestId('camera-select').isVisible().catch(() => false)
+    if (hasCameras) {
+      const datetimeInput = page.getByTestId('datetime-input')
+      await expect(datetimeInput).toBeVisible()
+
+      // Set datetime to a past time (1 hour ago)
+      const pastTime = new Date(Date.now() - 60 * 60 * 1000)
+      const pastTimeStr = pastTime.toISOString().slice(0, 19) // Format: YYYY-MM-DDTHH:mm:ss
+      await datetimeInput.fill(pastTimeStr)
+
+      // Verify the input has the past time
+      const valueBeforeClick = await datetimeInput.inputValue()
+      expect(valueBeforeClick).toContain(pastTimeStr.slice(0, 16)) // Check date and time portion
+
+      // Click the Now button
+      await page.click('[data-testid="now-button"]')
+
+      // Get the new value and verify it's closer to current time
+      const valueAfterClick = await datetimeInput.inputValue()
+      const nowTime = new Date()
+      const selectedTime = new Date(valueAfterClick)
+
+      // The selected time should be within 2 minutes of now
+      const timeDiffMs = Math.abs(nowTime.getTime() - selectedTime.getTime())
+      expect(timeDiffMs).toBeLessThan(2 * 60 * 1000) // 2 minutes tolerance
+
+      // Verify UTC timestamp is visible and in valid EEN API format
+      const utcTimestamp = page.getByTestId('utc-timestamp')
+      await expect(utcTimestamp).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
+
+      const utcText = await utcTimestamp.textContent()
+      expect(utcText).toContain('Timestamp for API (UTC):')
+
+      // Extract the timestamp value and verify EEN API format: YYYY-MM-DDTHH:mm:ss.sss+00:00
+      const apiTimestampMatch = utcText?.match(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}\+00:00/)
+      expect(apiTimestampMatch).not.toBeNull()
+
+      console.log('Now button correctly reset datetime to current time')
+      console.log('UTC timestamp visible and valid:', apiTimestampMatch?.[0])
+    } else {
+      console.log('No cameras in account - skipping Now button test')
+    }
+  })
+
+  test('datetime selection persists between recorded and video pages', async ({ page }) => {
+    skipIfNoProxy()
+    skipIfNoCredentials()
+
+    await performLogin(page, TEST_USER!, TEST_PASSWORD!)
+    await expect(page.getByTestId('nav-recorded')).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
+
+    // Navigate to recorded page
+    await page.click('[data-testid="nav-recorded"]')
+    await page.waitForURL('/recorded')
+
+    await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
+      timeout: TIMEOUTS.MEDIA_LOAD
+    })
+
+    const hasCameras = await page.getByTestId('camera-select').isVisible().catch(() => false)
+    if (hasCameras) {
+      const datetimeInput = page.getByTestId('datetime-input')
+      await expect(datetimeInput).toBeVisible()
+
+      // Set a specific datetime (2 hours ago to ensure it's different from default)
+      const specificTime = new Date(Date.now() - 2 * 60 * 60 * 1000)
+      const specificTimeStr = specificTime.toISOString().slice(0, 19) // Format: YYYY-MM-DDTHH:mm:ss
+      await datetimeInput.fill(specificTimeStr)
+
+      // Verify the input has the specific time
+      const valueOnRecorded = await datetimeInput.inputValue()
+      expect(valueOnRecorded).toContain(specificTimeStr.slice(0, 16)) // Check date and time portion
+
+      // Navigate to HLS video page
+      await page.click('[data-testid="nav-hls"]')
+      await page.waitForURL('/hls')
+
+      await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
+        timeout: TIMEOUTS.MEDIA_LOAD
+      })
+
+      // Verify the datetime is persisted on HLS page
+      const hlsDatetimeInput = page.getByTestId('datetime-input')
+      await expect(hlsDatetimeInput).toBeVisible()
+
+      const valueOnHls = await hlsDatetimeInput.inputValue()
+      expect(valueOnHls).toContain(specificTimeStr.slice(0, 16)) // Should match the time set on recorded page
+
+      console.log('Datetime persistence verified: recorded →', valueOnRecorded, '| hls →', valueOnHls)
+    } else {
+      console.log('No cameras in account - skipping datetime persistence test')
+    }
+  })
+
+  test('can view HLS video after login', async ({ page }) => {
+    skipIfNoProxy()
+    skipIfNoCredentials()
+
+    await performLogin(page, TEST_USER!, TEST_PASSWORD!)
+    await expect(page.getByTestId('nav-hls')).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
+
+    await page.click('[data-testid="nav-hls"]')
+    await page.waitForURL('/hls')
+
+    await expect(page.getByRole('heading', { name: 'HLS Video Streaming (Main)' })).toBeVisible()
+
+    // Wait for cameras to load
+    await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
+      timeout: TIMEOUTS.MEDIA_LOAD
+    })
+  })
+
+  test('HLS page shows controls when cameras available', async ({ page }) => {
+    skipIfNoProxy()
+    skipIfNoCredentials()
+
+    await performLogin(page, TEST_USER!, TEST_PASSWORD!)
+    await expect(page.getByTestId('nav-hls')).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
+
+    await page.click('[data-testid="nav-hls"]')
+    await page.waitForURL('/hls')
+
+    await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
+      timeout: TIMEOUTS.MEDIA_LOAD
+    })
+
+    const hasCameras = await page.getByTestId('camera-select').isVisible().catch(() => false)
+    if (hasCameras) {
+      await expect(page.getByTestId('datetime-input')).toBeVisible()
+      await expect(page.getByTestId('go-button')).toBeVisible()
+      await expect(page.getByTestId('now-button')).toBeVisible()
+      console.log('HLS video controls visible')
+    } else {
+      console.log('No cameras in account - skipping camera-specific checks')
+    }
+  })
+
   test('can logout after login', async ({ page }) => {
     skipIfNoProxy()
     skipIfNoCredentials()