Use media package to filter events, rather than HTML plugin

snowplow · Oct 7, 2024 · 287f738 · 287f738
1 parent d89786f
commit 287f738
Showing 1 changed file with 63 additions and 87 deletions.
diff --git a/plugins/browser-plugin-media-tracking/src/player.ts b/plugins/browser-plugin-media-tracking/src/player.ts
@@ -80,95 +80,71 @@ export function setUpListeners(config: ElementConfig) {
     });
   }
 
-  video.addEventListener('timeupdate', () => {
-    updateMediaTracking({ id, player: updatePlayer(video) });
-  });
+  addVideoEventListeners(video, id);
+}
 
+function addVideoEventListeners(video: HTMLMediaElement, id: string) {
   let isWaiting = false;
 
-  for (const event of config.captureEvents ?? []) {
-    switch (event) {
-      case MediaEventType.Play:
-        video.addEventListener('play', () => trackMediaPlay({ id, player: updatePlayer(video) }));
-        break;
-
-      case MediaEventType.Pause:
-        video.addEventListener('pause', () => trackMediaPause({ id, player: updatePlayer(video) }));
-        break;
-
-      case MediaEventType.End:
-        video.addEventListener('ended', () => trackMediaEnd({ id, player: updatePlayer(video) }));
-        break;
-
-      case MediaEventType.SeekEnd:
-        video.addEventListener('seeked', () => trackMediaSeekEnd({ id, player: updatePlayer(video) }));
-        break;
-
-      case MediaEventType.PlaybackRateChange:
-        video.addEventListener('ratechange', () =>
-          trackMediaPlaybackRateChange({ id, player: updatePlayer(video), newRate: video.playbackRate })
-        );
-        break;
-
-      case MediaEventType.VolumeChange:
-        video.addEventListener('volumechange', () => {
-          trackMediaVolumeChange({ id, player: updatePlayer(video), newVolume: parseVolume(video.volume) });
-        });
-        break;
-
-      case MediaEventType.FullscreenChange:
-        video.addEventListener('fullscreenchange', () => {
-          trackMediaFullscreenChange({
-            id,
-            player: updatePlayer(video),
-            fullscreen: document.fullscreenElement === video,
-          });
-        });
-        break;
-
-      case MediaEventType.PictureInPictureChange:
-        video.addEventListener('enterpictureinpicture', () => {
-          trackMediaPictureInPictureChange({
-            id,
-            player: updatePlayer(video),
-            pictureInPicture: true,
-          });
-        });
-        video.addEventListener('leavepictureinpicture', () => {
-          trackMediaPictureInPictureChange({
-            id,
-            player: updatePlayer(video),
-            pictureInPicture: false,
-          });
-        });
-        break;
-
-      case MediaEventType.BufferStart:
-        video.addEventListener('waiting', () => {
-          trackMediaBufferStart({ id, player: updatePlayer(video) });
-          isWaiting = true;
-        });
-        break;
-
-      case MediaEventType.BufferEnd:
-        // `playing` is also triggered by playing the video after pausing,
-        // so we need to check if the video was waiting before tracking the buffer
-        video.addEventListener('playing', () => {
-          if (isWaiting) {
-            trackMediaBufferEnd({ id, player: updatePlayer(video) });
-            isWaiting = false;
-          }
-        });
-        break;
-
-      case MediaEventType.Error:
-        video.addEventListener('error', () => {
-          trackMediaError({ id, player: updatePlayer(video) });
-        });
-        break;
-
-      default:
-        LOG.warn(`Event ${event} is not supported.`);
+  video.addEventListener('play', () => trackMediaPlay({ id, player: updatePlayer(video) }));
+
+  video.addEventListener('pause', () => trackMediaPause({ id, player: updatePlayer(video) }));
+
+  video.addEventListener('ended', () => trackMediaEnd({ id, player: updatePlayer(video) }));
+
+  video.addEventListener('seeked', () => trackMediaSeekEnd({ id, player: updatePlayer(video) }));
+
+  video.addEventListener('ratechange', () =>
+    trackMediaPlaybackRateChange({ id, player: updatePlayer(video), newRate: video.playbackRate })
+  );
+
+  video.addEventListener('volumechange', () => {
+    trackMediaVolumeChange({ id, player: updatePlayer(video), newVolume: parseVolume(video.volume) });
+  });
+
+  video.addEventListener('fullscreenchange', () => {
+    trackMediaFullscreenChange({
+      id,
+      player: updatePlayer(video),
+      fullscreen: document.fullscreenElement === video,
+    });
+  });
+
+  video.addEventListener('enterpictureinpicture', () => {
+    trackMediaPictureInPictureChange({
+      id,
+      player: updatePlayer(video),
+      pictureInPicture: true,
+    });
+  });
+
+  video.addEventListener('leavepictureinpicture', () => {
+    trackMediaPictureInPictureChange({
+      id,
+      player: updatePlayer(video),
+      pictureInPicture: false,
+    });
+  });
+
+  video.addEventListener('waiting', () => {
+    trackMediaBufferStart({ id, player: updatePlayer(video) });
+    isWaiting = true;
+  });
+
+  // `playing` is also triggered by playing the video after pausing,
+  // so we need to check if the video was waiting before tracking the buffer
+  video.addEventListener('playing', () => {
+    if (isWaiting) {
+      trackMediaBufferEnd({ id, player: updatePlayer(video) });
+      isWaiting = false;
     }
-  }
+  });
+
+  video.addEventListener('error', () => {
+    trackMediaError({ id, player: updatePlayer(video) });
+  });
+
+  video.addEventListener('timeupdate', () => {
+    updateMediaTracking({ id, player: updatePlayer(video) });
+  });
 }