Merge pull request #774 from dermotduffy/image-thing

Restore correct image after browser tab becomes visible
This commit is contained in:
Dermot Duffy
2022-07-24 20:09:14 -07:00
committed by GitHub
+5 -2
View File
@@ -9,6 +9,7 @@ import {
unsafeCSS unsafeCSS
} from 'lit'; } from 'lit';
import { customElement, property } from 'lit/decorators.js'; import { customElement, property } from 'lit/decorators.js';
import { live } from 'lit/directives/live.js';
import { createRef, ref, Ref } from 'lit/directives/ref.js'; import { createRef, ref, Ref } from 'lit/directives/ref.js';
import { CachedValueController } from '../cached-value-controller.js'; import { CachedValueController } from '../cached-value-controller.js';
import defaultImage from '../images/frigate-bird-in-sky.jpg'; import defaultImage from '../images/frigate-bird-in-sky.jpg';
@@ -216,11 +217,13 @@ export class FrigateCardImage extends LitElement {
protected render(): TemplateResult | void { protected render(): TemplateResult | void {
const src = this._cachedValueController?.value; const src = this._cachedValueController?.value;
// Note the use of live() below to ensure the update will restore the image
// src if it's been changed via _forceSafeImage().
return src return src
? html` <img ? html` <img
${ref(this._refImage)} ${ref(this._refImage)}
src=${src} src=${live(src)}
@load=${(ev) => { @load=${(ev: Event) => {
dispatchMediaShowEvent(this, ev); dispatchMediaShowEvent(this, ev);
}} }}
@error=${() => { @error=${() => {