Merge pull request #12 from dermotduffy/0.9.0

Update to use frigate v0.9.0 (not backwards compatible!)

package.json

@@ -15,38 +15,38 @@
   "license": "MIT",
   "dependencies": {
     "@material/image-list": "^12.0.0",
-    "custom-card-helpers": "^1.7.1",
+    "custom-card-helpers": "^1.7.2",
     "dayjs": "^1.10.6",
     "home-assistant-js-websocket": "^5.11.1",
     "lit-element": "^2.5.1",
     "lit-html": "^1.4.1",
-    "zod": "^3.7.1"
+    "zod": "^3.8.1"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-proposal-decorators": "^7.14.5",
     "@rollup/plugin-json": "^4.1.0",
-    "@typescript-eslint/eslint-plugin": "^4.29.0",
+    "@typescript-eslint/eslint-plugin": "^4.29.3",
-    "@typescript-eslint/parser": "^4.29.0",
+    "@typescript-eslint/parser": "^4.29.3",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-prettier": "^3.4.1",
     "npm-check-updates": "^11.8.3",
     "prettier": "^2.3.2",
-    "rollup": "^2.56.0",
+    "rollup": "^2.56.3",
-    "rollup-plugin-styles": "^3.14.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-serve": "^1.1.0",
+    "rollup-plugin-styles": "^3.14.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
     "rollup-plugin-uglify": "^6.0.4",
-    "sass": "^1.37.5",
+    "sass": "^1.38.1",
-    "typescript": "^4.3.5"
+    "typescript": "^4.4.2"
   },
   "scripts": {
     "start": "rollup -c rollup.config.dev.js --watch",

src/frigate-hass-card.ts

@@ -45,7 +45,8 @@ import dayjs from 'dayjs';
 import dayjs_utc from 'dayjs/plugin/utc';
 import dayjs_timezone from 'dayjs/plugin/timezone';
 
-const URL_TROUBLESHOOTING = "https://github.com/dermotduffy/frigate-hass-card#troubleshooting";
+const URL_TROUBLESHOOTING =
+  'https://github.com/dermotduffy/frigate-hass-card#troubleshooting';
 
 // Load dayjs plugins.
 dayjs.extend(dayjs_timezone);
@@ -321,7 +322,7 @@ export class FrigateCard extends LitElement {
 
     if (config.live_provider == 'webrtc') {
       // Create a WebRTC element (https://github.com/AlexxIT/WebRTC)
-      const webrtcElement = customElements.get('webrtc-camera');
+      const webrtcElement = customElements.get('webrtc-camera') as any;
       if (webrtcElement) {
         const webrtc = new webrtcElement();
         webrtc.setConfig(config.webrtc || {});
@@ -407,13 +408,13 @@ export class FrigateCard extends LitElement {
       let raw_json;
       try {
         raw_json = await response.json();
-      } catch (e) {
+      } catch (e: any) {
         console.warn(e);
         throw new Error(`Could not JSON decode Frigate API response: ${e}`);
       }
       try {
         return frigateGetEventsResponseSchema.parse(raw_json);
-      } catch (e) {
+      } catch (e: any) {
         console.warn(e);
         throw new Error(`Frigate events were malformed: ${e}`);
       }
@@ -431,8 +432,7 @@ export class FrigateCard extends LitElement {
   ): TemplateResult {
     return html` <div class="frigate-card-attention">
       <span>
-        <ha-icon icon="${icon}">
+        <ha-icon icon="${icon}"> </ha-icon>
-        </ha-icon>
         ${message ? html`&nbsp;${message}` : ''}
       </span>
     </div>`;
@@ -442,7 +442,8 @@ export class FrigateCard extends LitElement {
   protected _renderError(error: string): TemplateResult {
     return this._renderAttentionIcon(
       'mdi:alert-circle',
-      html`${error}. See <a href="${URL_TROUBLESHOOTING}">troubleshooting</a></span>.`);
+      html`${error}. See <a href="${URL_TROUBLESHOOTING}">troubleshooting</a></span>.`,
+    );
   }
 
   // Generate a human-readable title from an event.
@@ -471,7 +472,7 @@ export class FrigateCard extends LitElement {
         has_clip: want_clips,
         has_snapshot: !want_clips,
       });
-    } catch (e) {
+    } catch (e: any) {
       return this._renderError(e.message);
     }
 
@@ -606,7 +607,7 @@ export class FrigateCard extends LitElement {
     if (!event.has_clip) {
       return null;
     }
-    return `${this.config.frigate_url}/clips/${event.camera}-${event.id}.mp4`;
+    return `${this.config.frigate_url}/vod/event/${event.id}/index.m3u8`;
   }
 
   protected _getSnapshotURLFromEvent(event: FrigateEvent): string | null {
@@ -628,7 +629,7 @@ export class FrigateCard extends LitElement {
           has_clip: true,
           limit: 1,
         });
-      } catch (e) {
+      } catch (e: any) {
         return this._renderError(e.message);
       }
       if (!events.length) {
@@ -654,24 +655,49 @@ export class FrigateCard extends LitElement {
     this._eventBeingShown = event;
 
     return html`
-      <video
+      <ha-hls-player
+        .hass=${this._hass}
+        .url=${clipURL}
         class="frigate-card-viewer"
         muted
         controls
         playsinline
-        @play=${() => {
+        allow-exoplayer
-          this._clipPlaying = true;
-        }}
-        @pause=${() => {
-          this._clipPlaying = false;
-        }}
         ?autoplay="${autoplay}"
       >
-        <source src="${clipURL}" type="video/mp4" />
+      </ha-hls-player>
-      </video>
     `;
   }
 
+  public updated(): void {
+    this.updateComplete.then(() => {
+      // DOM elements are not always present until after updateComplete promise
+      // is resolved. Note that children of children (i.e. the underlying video
+      // element) is not always present even when the promise returns, so
+      // capture the event at the upper shadow root instead.
+      const hls_player = this.renderRoot
+        ?.querySelector('ha-card')
+        ?.querySelector('ha-hls-player');
+
+      if (hls_player) {
+        hls_player.shadowRoot?.addEventListener(
+          'play',
+          () => {
+            this._clipPlaying = true;
+          },
+          true,
+        );
+        hls_player.shadowRoot?.addEventListener(
+          'pause',
+          () => {
+            this._clipPlaying = true;
+          },
+          true,
+        );
+      }
+    });
+  }
+
   // Render a snapshot.
   protected async _renderSnapshotViewer(): Promise<TemplateResult> {
     let event: FrigateEvent, events: FrigateGetEventsResponse;
@@ -683,7 +709,7 @@ export class FrigateCard extends LitElement {
           has_snapshot: true,
           limit: 1,
         });
-      } catch (e) {
+      } catch (e: any) {
         return this._renderError(e.message);
       }
       if (!events.length) {