From faeb4a4a7e056b99852fdde19fb6066e83a32918 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Thu, 30 Dec 2021 17:19:20 -0800
Subject: [PATCH] Fix bug causing the wrong media load event to be dispatched.

---
 src/components/live.ts   |  1 -
 src/components/viewer.ts | 12 +++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/live.ts b/src/components/live.ts
index d3f0180f..640fb9cf 100644
--- a/src/components/live.ts
+++ b/src/components/live.ts
@@ -1,5 +1,4 @@
 // TODO Live scrolling nav buttons disappearing
-// TODO Media loading events appear wrong for snapshot viewer
 // TODO can I do away with clip/snapshot-specific?
 // TODO Live carousel chevron/icons style
 // TODO call change-event in viewer
diff --git a/src/components/viewer.ts b/src/components/viewer.ts
index 30aed27d..44a78195 100644
--- a/src/components/viewer.ts
+++ b/src/components/viewer.ts
@@ -709,7 +709,17 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
                 }
               }}
               @load="${(e: Event) => {
-                this._mediaLoadedHandler(slideIndex, createMediaShowInfo(e));
+                if (
+                  // This handler will be called on the empty image (including
+                  // an updated empty image that is the same dimensions large as
+                  // the previously fully loaded image -- see the note on dummy
+                  // images in media-carousel.ts). Here we need to only call the
+                  // media load handler on a 'real' load.
+                  !lazyLoad ||
+                  this._slideHasBeenLazyLoaded[slideIndex]
+                ) {
+                  this._mediaLoadedHandler(slideIndex, createMediaShowInfo(e));
+                }
               }}"
             />`}
       </div>