From feac3efe52df9dd1e5e5909c6705dc310764f53c Mon Sep 17 00:00:00 2001
From: Martin Stark <901824+martinstark@users.noreply.github.com>
Date: Wed, 3 Jul 2024 14:39:40 +0200
Subject: [PATCH 1/6] chore: improve debugging in demo app

add favicon and title
---
 public/favicon.svg |  1 +
 public/index.html  | 76 ++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 71 insertions(+), 6 deletions(-)
 create mode 100644 public/favicon.svg
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..03e6a86
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h480q33 0 56.5 23.5T720-720v180l160-160v440L720-420v180q0 33-23.5 56.5T640-160H160Zm0-80h480v-480H160v480Zm0 0v-480 480Z"/></svg>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 59b3e2c..84b314c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,7 @@
 <!doctype html>
 <head>
+  <link rel="icon" href="favicon.svg" />
+  <title>Media Event Filter Demo</title>
   <style>
     html {
       font-size: 67.5%;
@@ -104,33 +106,95 @@
     ];
 
     const mediaElement = document.getElementById("videoEl");
-    mediaElement.src = videos[0];
     let i = 1;
+    let measuredDuration = 0;
+
+    mediaElement.src = videos[0];
 
     Object.values(MediaEvent).forEach((evt) =>
       mediaElement.addEventListener(evt, () => {
-        console.log("%cNativeEv: %s", "color:#cf1313;font-weight:bold;", evt);
+        const mediaElementState = {
+          networkState: mediaElement.networkState,
+          readyState: mediaElement.readyState,
+          paused: mediaElement.paused,
+          ended: mediaElement.ended,
+          error: mediaElement.error,
+          currentTime: mediaElement.currentTime,
+          duration: mediaElement.duration,
+          seeking: mediaElement.seeking,
+        };
+
+        console[evt === MediaEvent.timeupdate ? "debug" : "log"](
+          "%cNativeEv: %s",
+          "color:#cf1313;font-weight:bold;",
+          evt,
+        );
+
+        console[evt === MediaEvent.timeupdate ? "debug" : "info"](
+          "Media Element State",
+          mediaElementState,
+        );
       }),
     );
 
     getMediaEventFilter({
       mediaElement,
       callback: (evt) => {
-        console.log("%cFiltered: %s", "color:#267dff;font-weight:bold;", evt);
+        if (evt === FilteredMediaEvent.TIME_UPDATE) {
+          console.debug(
+            "%cFiltered: %s",
+            "color:#267dff;font-weight:bold;",
+            evt,
+          );
+          return;
+        }
 
-        if (evt === FilteredMediaEvent.TIME_UPDATE) return;
+        if (
+          [FilteredMediaEvent.BUFFERING, FilteredMediaEvent.SEEKING].includes(
+            evt,
+          )
+        ) {
+          measuredDuration = Date.now();
+        }
+
+        if (
+          [FilteredMediaEvent.BUFFERED, FilteredMediaEvent.SEEKED].includes(evt)
+        ) {
+          measuredDuration = Date.now() - measuredDuration;
+
+          console.log(
+            "%cFiltered: %s",
+            "color:#267dff;font-weight:bold;",
+            `${evt} (${measuredDuration}ms)`,
+          );
+          console.info("\n");
+        } else {
+          console.log("%cFiltered: %s", "color:#267dff;font-weight:bold;", evt);
+          console.info("\n");
+        }
 
         const box = document.createElement("div");
 
         box.classList.add("event");
-        box.innerText = i + ": " + evt;
+        box.innerText =
+          i +
+          ": " +
+          `${evt} ${
+            measuredDuration &&
+            [FilteredMediaEvent.BUFFERED, FilteredMediaEvent.SEEKED].includes(
+              evt,
+            )
+              ? `(${measuredDuration}ms)`
+              : ""
+          }`;
+
         i++;
 
         const events = document.getElementById("events");
 
         events.prepend(box);
 
-        if (events.childElementCount > 10) {
+        if (events.childElementCount > 20) {
           events.removeChild(events.lastChild);
         }
       },

From 3536fa291ed9222c685d6524a0686f287928f900 Mon Sep 17 00:00:00 2001
From: Martin Stark <901824+martinstark@users.noreply.github.com>
Date: Wed, 3 Jul 2024 14:42:10 +0200
Subject: [PATCH 2/6] feat: support playing again after ended

If .play() or a seek is initiated after ended,
treat it as a new session and emit loaded.

Browsers handle this slightly differently, pressing
play when at end of stream is at least partially
treated as a seek, but the filter will now treat it
as a new playback session and trigger LOADED when video
is ready to start playing again.
---
 src/media-event-filter.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/media-event-filter.ts b/src/media-event-filter.ts
index 35fd707..13c87d1 100644
--- a/src/media-event-filter.ts
+++ b/src/media-event-filter.ts
@@ -239,6 +239,12 @@ export const getMediaEventFilter = ({
   };
 
   const onPlay = (): void => {
+    if (state.ended) {
+      state = {
+        ...initialState,
+      };
+    }
+
     if (isNotReady()) return;
 
     // block mse plays triggered after buffering and seeks

From b6ce2e80127afbeaa54c222391d50605445d86e3 Mon Sep 17 00:00:00 2001
From: Martin Stark <901824+martinstark@users.noreply.github.com>
Date: Wed, 3 Jul 2024 15:01:08 +0200
Subject: [PATCH 3/6] chore: update dev app

---
 public/index.html | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index 84b314c..5850b07 100644
--- a/public/index.html
+++ b/public/index.html
@@ -107,7 +107,7 @@
 
     const mediaElement = document.getElementById("videoEl");
     let i = 1;
-    let measuredDuration = 0;
+    let seekOrBufferTimestamp = 0;
 
     mediaElement.src = videos[0];
 
@@ -154,18 +154,16 @@
             evt,
           )
         ) {
-          measuredDuration = Date.now();
+          seekOrBufferTimestamp = Date.now();
         }
 
         if (
           [FilteredMediaEvent.BUFFERED, FilteredMediaEvent.SEEKED].includes(evt)
         ) {
-          measuredDuration = Date.now() - measuredDuration;
-
           console.log(
             "%cFiltered: %s",
             "color:#267dff;font-weight:bold;",
-            `${evt} (${measuredDuration}ms)`,
+            `${evt} (${(Date.now() - seekOrBufferTimestamp) / 1000}s)`,
           );
           console.info("\n");
         } else {
@@ -180,11 +178,11 @@
           i +
           ": " +
           `${evt} ${
-            measuredDuration &&
+            seekOrBufferTimestamp &&
             [FilteredMediaEvent.BUFFERED, FilteredMediaEvent.SEEKED].includes(
               evt,
             )
-              ? `(${measuredDuration}ms)`
+              ? `(${(Date.now() - seekOrBufferTimestamp) / 1000}s)`
               : ""
           }`;
 

From ae11be473d9a686453f79d40a89ebdbbe00da668 Mon Sep 17 00:00:00 2001
From: Martin Stark <901824+martinstark@users.noreply.github.com>
Date: Wed, 3 Jul 2024 15:07:26 +0200
Subject: [PATCH 4/6] chore: update safari mute micro buffer comment

---
 src/media-event-filter.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/media-event-filter.ts b/src/media-event-filter.ts
index 13c87d1..922acf0 100644
--- a/src/media-event-filter.ts
+++ b/src/media-event-filter.ts
@@ -131,7 +131,10 @@ export const getMediaEventFilter = ({
 
   const onCanPlayThrough = (): void => {
     if (!state.loading) {
-      // Recover from Safari "mute" micro buffer triggered by "waiting"
+      // Safari triggers "waiting" when muting a stream.
+      //
+      // This logic recovers from the Safari micro buffer triggered
+      // by a mute.
       if (state.buffering && mediaElement.playbackRate > 0) {
         state = {
           ...state,

From 37dd857753ff7a33ed2400fa8dc533c3520feb7f Mon Sep 17 00:00:00 2001
From: Martin Stark <901824+martinstark@users.noreply.github.com>
Date: Wed, 3 Jul 2024 15:07:50 +0200
Subject: [PATCH 5/6] chore: add comment to ended -> play handling

---
 src/media-event-filter.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/media-event-filter.ts b/src/media-event-filter.ts
index 922acf0..7b5ab03 100644
--- a/src/media-event-filter.ts
+++ b/src/media-event-filter.ts
@@ -242,6 +242,10 @@ export const getMediaEventFilter = ({
   };
 
   const onPlay = (): void => {
+    // handle pressing play or seeking back into the video after ended.
+    //
+    // mediaElement.ended will already have toggled from true to false
+    // when this happens, use cached ended state instead.
     if (state.ended) {
       state = {
         ...initialState,

From 7e010b1a8373dc57ab9775d3290b5995e3db3e9a Mon Sep 17 00:00:00 2001
From: Martin Stark <901824+martinstark@users.noreply.github.com>
Date: Wed, 3 Jul 2024 18:32:08 +0200
Subject: [PATCH 6/6] refactor: add reset method

---
 src/media-event-filter.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/media-event-filter.ts b/src/media-event-filter.ts
index 7b5ab03..2819ea2 100644
--- a/src/media-event-filter.ts
+++ b/src/media-event-filter.ts
@@ -116,17 +116,21 @@ export const getMediaEventFilter = ({
     ...initialState,
   };
 
+  const reset = (): void => {
+    clearRatechangeBufferTimeout();
+
+    state = {
+      ...initialState,
+    };
+  };
+
   const isNotReady = (): boolean =>
     allowResumeAfterEnded ? state.loading : state.loading || state.ended;
 
   // Reset state of media event filter when a new src is
   // attached to the media element.
   const onEmptied = (): void => {
-    clearRatechangeBufferTimeout();
-
-    state = {
-      ...initialState,
-    };
+    reset();
   };
 
   const onCanPlayThrough = (): void => {
@@ -247,9 +251,8 @@ export const getMediaEventFilter = ({
     // mediaElement.ended will already have toggled from true to false
     // when this happens, use cached ended state instead.
     if (state.ended) {
-      state = {
-        ...initialState,
-      };
+      reset();
+      return;
     }
 
     if (isNotReady()) return;
