Handle Infinity and NaN durations in Html Media Tracking

Author: greg-el

common/changes/@snowplow/browser-plugin-media-tracking/issue-1319-duration-handling-html-media-tracking_2024-06-17-11-53.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@snowplow/browser-plugin-media-tracking",
+      "comment": "Handle Infinity/NaN durations in Media Tracking",
+      "type": "none"
+    }
+  ],
+  "packageName": "@snowplow/browser-plugin-media-tracking"
+}

plugins/browser-plugin-media-tracking/src/buildMediaEvent.ts

@@ -2,6 +2,7 @@ import { eventNames, NETWORK_STATE, READY_STATE } from './constants';
 import { MediaElement, MediaPlayer, MediaPlayerEvent, VideoElement } from './contexts';
 import {
   dataUrlHandler,
+  getDuration,
   getUriFileExtension,
   isElementFullScreen,
   textTrackListToJson,
@@ -29,7 +30,7 @@ export function buildMediaEvent(
 function getMediaPlayerEntities(el: HTMLAudioElement | HTMLVideoElement, detail?: EventDetail): MediaEntities {
   const data: MediaPlayer = {
     currentTime: el.currentTime || 0,
-    duration: el.duration || 0,
+    duration: getDuration(el),
     ended: el.ended,
     loop: el.loop,
     muted: el.muted,

plugins/browser-plugin-media-tracking/src/helperFunctions.ts

@@ -113,3 +113,13 @@ export function dataUrlHandler(url: string): string {
   }
   return url;
 }
+
+export function getDuration(el: HTMLAudioElement | HTMLVideoElement): number | null {
+  const duration = el.duration;
+  // A NaN value is returned if duration is not available, or Infinity if the media resource is streaming.
+  if (isNaN(duration) || duration === Infinity) {
+    return null;
+  }
+
+  return duration;
+}

plugins/browser-plugin-media-tracking/test/media.test.ts

@@ -33,6 +33,7 @@ import { findMediaElem } from '../src/findMediaElement';
 import {
   boundaryErrorHandling,
   dataUrlHandler,
+  getDuration,
   getUriFileExtension,
   trackingOptionsParser,
 } from '../src/helperFunctions';
@@ -239,3 +240,69 @@ describe('getUriFileExtension', () => {
     expect(output).toBe(null);
   });
 });
+
+describe('getDuration of a ', () => {
+  describe('video element', () => {
+    it('returns the duration if valid', () => {
+      const video = { duration: 10 } as HTMLVideoElement;
+      const output = getDuration(video);
+      expect(output).toBe(10);
+    });
+
+    it('returns null if the duration is Infinity', () => {
+      const video = { duration: Infinity } as HTMLVideoElement;
+      const output = getDuration(video);
+      expect(output).toBe(null);
+    });
+
+    it('returns null if the duration is +Infinity', () => {
+      const video = { duration: +Infinity } as HTMLVideoElement;
+      const output = getDuration(video);
+      expect(output).toBe(null);
+    });
+
+    it('returns null if the duration is NaN', () => {
+      const video = { duration: NaN } as HTMLVideoElement;
+      const output = getDuration(video);
+      expect(output).toBe(null);
+    });
+
+    it('returns null if the duration is not available', () => {
+      const video = {} as HTMLVideoElement;
+      const output = getDuration(video);
+      expect(output).toBe(null);
+    });
+  });
+
+  describe('audio element', () => {
+    it('returns the duration if valid', () => {
+      const audio = { duration: 10 } as HTMLAudioElement;
+      const output = getDuration(audio);
+      expect(output).toBe(10);
+    });
+
+    it('returns null if the duration is Infinity', () => {
+      const audio = { duration: Infinity } as HTMLAudioElement;
+      const output = getDuration(audio);
+      expect(output).toBe(null);
+    });
+
+    it('returns null if the duration is +Infinity', () => {
+      const audio = { duration: +Infinity } as HTMLAudioElement;
+      const output = getDuration(audio);
+      expect(output).toBe(null);
+    });
+
+    it('returns null if the duration is NaN', () => {
+      const audio = { duration: NaN } as HTMLAudioElement;
+      const output = getDuration(audio);
+      expect(output).toBe(null);
+    });
+
+    it('returns null if the duration is not available', () => {
+      const audio = {} as HTMLAudioElement;
+      const output = getDuration(audio);
+      expect(output).toBe(null);
+    });
+  });
+});