Repository: dermotduffy/frigate-hass-card (ts)

Issue:
Playback of recordings doesn't work when HA timezone `!=` Browser timezone
<!-- READ THIS FIRST:
- If you need additional help with this template please refer to https://www.home-assistant.io/help/reporting_issues/
- Make sure you are running the latest version of Home Assistant before reporting an issue: https://github.com/home-assistant/home-assistant/releases
- Provide as many details as possible. Do not delete any text from this template!
-->

**Checklist:**

- [x] I updated to the latest version available
- [x] I cleared the cache of my browser

**Release with the issue:**
5.2.0
**Last working release (if known):**
unknown
**Browser and Operating System:**
**Doesn't work on** Firefox for Arch Linux (117.0) 
**Works on** Firefox for Android 107.0 
**Works on** Home Assistant App for Android (2023.8.2-minimal.10992)

<!--
Provide details about what browser (and version) you are seeing the issue in. And also which operating system this is on. If possible try to replicate the issue in other browsers and include your findings here.
-->

**Description of problem:**

<!--
Explain what the issue is, and how things should look/behave. If possible provide a screenshot with a description.
-->
card yaml:
```yaml
type: custom:frigate-card
cameras:
  - camera_entity: camera.saladeespera
    live_provider: go2rtc
    icon: mdi:sofa-single
menu:
  buttons:
    recordings:
      enabled: true
    clips:
      enabled: true
    snapshots:
      enabled: false
timeline:
  style: ribbon
  media: all
  show_recordings: true
```
the yaml is processed as valid and doesn't error out.
However, if you navigate to the recordings tab and click on a recording, the playback never starts, and the same goes for if you click on the thick light blue stripe that highlights the position of a recording in the timeline
![image](https://github.com/dermotduffy/frigate-hass-card/assets/25385928/41d2c448-191e-4b65-a7f0-507f06ed47f1)
If instead navigate to the "clips" tab and click on a clip that is associated with that same recording, then the clip plays normally. Same goes for clicking on the thin colored stripe in the timeline that signals an event.

These recordings and clips can both be accessed through Home Assistant's media tab and through Frigade's equivalent.

I noticed 3 identical 502s followed by this error in my browser's console when the playback fails:
the 502:
```
XHRGET
http://[REDACTED]:8123/api/frigate/frigate/vod/2023-09/13/04/saladeespera/utc/index.m3u8?authSig=[REDACTED]
[HTTP/1.1 502 Bad Gateway 19ms]

	
GET
	http://[REDACTED]:8123/api/frigate/frigate/vod/2023-09/13/04/saladeespera/utc/index.m3u8?authSig=[REDACTED]
Status
502
Bad Gateway
VersionHTTP/1.1
Transferred314 B (157 B size)
Referrer Policysame-origin
DNS ResolutionSystem

    	
    Connection
    	keep-alive
    Content-Length
    	157
    Content-Type
    	text/html
    Date
    	Wed, 13 Sep 2023 01:15:17 GMT
    Server
    	nginx/1.22.1
    	
    Accept
    	*/*
    Accept-Encoding
    	gzip, deflate
    Accept-Language
    	en-US,en;q=0.5
    Connection
    	keep-alive
    DNT
    	1
    Host
    	10.170.15.3:8123
    Referer
    	http://[REDACTED]:8123/lovelace/0
    Sec-GPC
    	1
    User-Agent
    	Mozilla/5.0 (Windows NT 10.0; rv:109.0) Gecko/20100101 Firefox/117.0
```
the error
```
Error starting stream, see logs for details (Server failure) ha-hls-player-aef987da.js:11:1284
    render ha-hls-player-aef987da.js:11
    update lit-element.ts:160
    performUpdate reactive-element.ts:1329
    scheduleUpdate reactive-element.ts:1261
    _$Ej reactive-element.ts:1233
    requestUpdate reactive-element.ts:1208
    set reactive-element.ts:726
    value ha-hls-player.ts:319
    value ha-hls-player.ts:265
    emit index.js:203
    emit hls.ts:287
    trigger hls.ts:298
    handleNetworkError playlist-loader.ts:605
    onError playlist-loader.ts:326
    readystatechange xhr-loader.ts:240
    (Async: EventHandlerNonNull)
    openAndSendXhr xhr-loader.ts:145
    loadInternal xhr-loader.ts:117
    (Async: setTimeout handler)
    retry xhr-loader.ts:283
    readystatechange xhr-loader.ts:237
    (Async: EventHandlerNonNull)
    openAndSendXhr xhr-loader.ts:145
    loadInternal xhr-loader.ts:117
    load xhr-loader.ts:76
    load playlist-loader.ts:347
    onManifestLoading playlist-loader.ts:154
    emit index.js:203
    emit hls.ts:287
    trigger hls.ts:298
    loadSource hls.ts:389
    value ha-hls-player.ts:237
    emit index.js:203
    emit hls.ts:287
    trigger hls.ts:298
    _onMediaSourceOpen buffer-controller.ts:804
    (Async: EventListener.handleEvent)
    onMediaAttaching buffer-controller.ts:161
    emit index.js:203
    emit hls.ts:287
    trigger hls.ts:298
    attachMedia hls.ts:353
    value ha-hls-player.ts:234
    value ha-hls-player.ts:162
    value ha-hls-player.ts:106
    _$AE reactive-element.ts:1378
    performUpdate reactive-element.ts:1343
    scheduleUpdate reactive-element.ts:1261
    _$Ej reactive-element.ts:1233
```
I noticed that it was searching the API in UTC, while I was supposed to be using UTC -03:00. This made me review my timezone settings on the containers and on HASS and I noticed that Frigate's container was UTC -03:00, HASS container was UTC, HASS configuration was UTC -03:00 and the main host system was UTC -03:00. 
I tried setting everything to UTC -03:00 but the problem didn't change.
Then I noticed that the particular system was using to to browse the interface had it's timezone set to UTC and **by changing it to UTC -03:00, i was able to solve the problem**

**Frigate card diagnostic information**

<!--
On the card, hold down the Frigate menu button for a few seconds then paste the diagnostics below:
-->
I was not able to find this information, will update if I do find out


**Javascript errors shown in the web inspector (if applicable):**
see above


**Additional information:**
Frigate is at the latest stable release

Thank you for your work and for this amazing software

Pull request:
Fix recording timezone issue
* Closes #1267 

Patch:
diff --git a/src/camera-manager/frigate/requests.ts b/src/camera-manager/frigate/requests.ts
index c019f934..c378c5e4 100644
--- a/src/camera-manager/frigate/requests.ts
+++ b/src/camera-manager/frigate/requests.ts
@@ -36,7 +36,10 @@ export const getRecordingsSummary = async (
       type: 'frigate/recordings/summary',
       instance_id: clientID,
       camera: camera_name,
-      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+
+      // Ask for the summary relative to HA timezone
+      // See: https://github.com/dermotduffy/frigate-hass-card/issues/1267
+      timezone: hass.config.time_zone,
     },
     true,
     // See: https://github.com/colinhacks/zod/pull/1752
@@ -148,7 +151,10 @@ export const getEventSummary = async (
     {
       type: 'frigate/events/summary',
       instance_id: clientID,
-      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+
+      // Ask for the summary relative to HA timezone
+      // See: https://github.com/dermotduffy/frigate-hass-card/issues/1267
+      timezone: hass.config.time_zone,
     },
     true,
   );


Test patch:
diff --git a/tests/camera-manager/frigate/requests.test.ts b/tests/camera-manager/frigate/requests.test.ts
index 461c1df2..89873775 100644
--- a/tests/camera-manager/frigate/requests.test.ts
+++ b/tests/camera-manager/frigate/requests.test.ts
@@ -34,6 +34,8 @@ describe('frigate requests', () => {
       day: new Date(),
     };
     const hass = createHASS();
+    hass.config.time_zone = 'Europe/Dublin';
+
     vi.mocked(homeAssistantWSRequest).mockResolvedValue(recordingSummary);
     expect(await getRecordingsSummary(hass, 'clientID', 'camera.office')).toBe(
       recordingSummary,
@@ -45,7 +47,7 @@ describe('frigate requests', () => {
         type: 'frigate/recordings/summary',
         instance_id: 'clientID',
         camera: 'camera.office',
-        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        timezone: 'Europe/Dublin',
       }),
       true,
     );
@@ -179,6 +181,8 @@ describe('frigate requests', () => {
       },
     ];
     const hass = createHASS();
+    hass.config.time_zone = 'Europe/Dublin';
+
     vi.mocked(homeAssistantWSRequest).mockResolvedValue(eventSummary);
     expect(await getEventSummary(hass, 'clientID')).toBe(eventSummary);
     expect(homeAssistantWSRequest).toBeCalledWith(
@@ -187,7 +191,7 @@ describe('frigate requests', () => {
       expect.objectContaining({
         type: 'frigate/events/summary',
         instance_id: 'clientID',
-        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        timezone: 'Europe/Dublin',
       }),
       true,
     );