From ced7dc9604ac7f97bbec2edfe2b33ce55e82c26c Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sun, 22 Aug 2021 21:08:33 -0700 Subject: [PATCH 1/4] Initial changes for to be ready for Frigate 0.9.0 . --- src/frigate-hass-card.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts index adf7f374..5439345f 100644 --- a/src/frigate-hass-card.ts +++ b/src/frigate-hass-card.ts @@ -606,7 +606,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 { @@ -667,7 +667,7 @@ export class FrigateCard extends LitElement { }} ?autoplay="${autoplay}" > - + `; } From 0f8a84809f5636133d8ed684bb24aeb2be861daf Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Fri, 27 Aug 2021 20:47:05 -0700 Subject: [PATCH 2/4] Use HLS player instead of video element for clips. --- src/frigate-hass-card.ts | 54 +++++++++++++++++++++++++++++----------- 1 file changed, 40 insertions(+), 14 deletions(-) diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts index 5439345f..896dacd9 100644 --- a/src/frigate-hass-card.ts +++ b/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); @@ -431,8 +432,7 @@ export class FrigateCard extends LitElement { ): TemplateResult { return html`
- - + ${message ? html` ${message}` : ''}
`; @@ -442,7 +442,8 @@ export class FrigateCard extends LitElement { protected _renderError(error: string): TemplateResult { return this._renderAttentionIcon( 'mdi:alert-circle', - html`${error}. See troubleshooting.`); + html`${error}. See troubleshooting.`, + ); } // Generate a human-readable title from an event. @@ -606,7 +607,7 @@ export class FrigateCard extends LitElement { if (!event.has_clip) { return null; } - return `${this.config.frigate_url}/vod/event/${event.id}/index.m3u8` + return `${this.config.frigate_url}/vod/event/${event.id}/index.m3u8`; } protected _getSnapshotURLFromEvent(event: FrigateEvent): string | null { @@ -654,24 +655,49 @@ export class FrigateCard extends LitElement { this._eventBeingShown = event; return html` - + `; } + 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 { let event: FrigateEvent, events: FrigateGetEventsResponse; From e47b3b75ea4e963541b01b86c8d69c2b058236be Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Fri, 27 Aug 2021 20:52:00 -0700 Subject: [PATCH 3/4] Address build type issue. --- src/frigate-hass-card.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts index 896dacd9..c379102b 100644 --- a/src/frigate-hass-card.ts +++ b/src/frigate-hass-card.ts @@ -322,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 || {}); From 4868c2fca4a773fd95cc9d5852fd690e50086448 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Fri, 27 Aug 2021 21:23:42 -0700 Subject: [PATCH 4/4] Update and fix build errors. --- package.json | 20 ++++++++++---------- src/frigate-hass-card.ts | 10 +++++----- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 7f96abab..33dddaf7 100644 --- a/package.json +++ b/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/parser": "^4.29.0", + "@typescript-eslint/eslint-plugin": "^4.29.3", + "@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-prettier": "^3.4.0", + "eslint-plugin-import": "^2.24.2", + "eslint-plugin-prettier": "^3.4.1", "npm-check-updates": "^11.8.3", "prettier": "^2.3.2", - "rollup": "^2.56.0", - "rollup-plugin-styles": "^3.14.1", + "rollup": "^2.56.3", "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", - "typescript": "^4.3.5" + "sass": "^1.38.1", + "typescript": "^4.4.2" }, "scripts": { "start": "rollup -c rollup.config.dev.js --watch", diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts index c379102b..a65e9748 100644 --- a/src/frigate-hass-card.ts +++ b/src/frigate-hass-card.ts @@ -408,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}`); } @@ -472,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); } @@ -629,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) { @@ -709,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) {