Update proper destroying of hls playback and event listeners

Author: HarishKumar097

CHANGELOG.md

@@ -2,12 +2,16 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.1]
+- Resolved proper cleanup of HLS streams upon the viewComplete event.
+- Enhanced stream handling logic: when a new player instance is initialized while another is in progress, the SDK now correctly destroys the previous player’s data monitoring and seamlessly switches to capture analytics for the incoming player.
+
 ## [1.0.0]
 
 ### Added
 - **Integration with HLS**:
   - Enabled video performance tracking using FastPix Data SDK, supporting HLS streams with user engagement metrics, playback quality monitoring, and real-time streaming diagnostics.
-  - Provides robust error management and reporting capabilities for seamless HLS video performance tracking.
+  - Provides robust error management and reporting capabilities for HLS video performance tracking.
   - Allows customizable behavior, including options to disable cookies, respect `Do Not Track` settings, and configure advanced error tracking and automatic error handling.
   - Includes support for custom metadata, enabling users to pass optional fields such as `video_id`, `video_title`, `video_duration`, and more.
-  - Introduced event tracking for `videoChange` and `programChange` to handle seamless metadata updates during playback transitions.
+  - Introduced event tracking for `videoChange` to handle metadata updates during playback transitions.

README.md

@@ -74,7 +74,7 @@ fastpixMetrix.tracker(videoPlayerElement, {
 });
 
 // To stop monitoring call when destroying the HLS player
-// hlsPlayerInstance.fp.destroy();
+// videoPlayerElement.fp.destroy();
 ```
 
 After successfully completing Step 3, you can track viewer metrics in the FastPix dashboard once playback ends. Steps 4, 5, and 6 are optional and can be utilized as needed to enhance your integration.
@@ -124,7 +124,7 @@ fastpixMetrix.tracker(videoPlayerElement, {
 });
 
 // To stop monitoring call when destroying the HLS player
-// hlsPlayerInstance.fp.destroy();
+// videoPlayerElement.fp.destroy();
 ```
 
 ### Note:

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastpix/video-data-core",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "FastPix, Inc",
   "license": "MIT",
   "description": "FastPix Video Data SDK for real-time monitoring of HTML5 video players.",

package.json

@@ -7,20 +7,19 @@ import {
 } from "../IdGenerationMethod/index";
 
 // Return Host & Domain Name
-const getHostAndDomainName = (endpoint: string): (string | undefined)[] => {
-  if (typeof endpoint !== "string" || endpoint === "") {
-    return ["localhost"];
-  }
-  let trackDomain: string | undefined;
-  const trackHost: string | undefined = (endpoint.match(
-    /^(([^:/?#]+):)?(\/\/([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/,
-  ) || [])[4];
-
-  if (trackHost) {
-    trackDomain = (trackHost.match(/[^.]+\.[^.]+$/) || [])[0];
+const getHostAndDomainName = (endpoint: string): [string, string] => {
+  if (!endpoint) {
+    return ["localhost", "localhost"];
   }
+  try {
+    const url = new URL(endpoint);
+    const host = url.hostname;
+    const parts = host.split(".");
+    const domain = parts.length >= 2 ? parts.slice(-2).join(".") : host;
+    return [host, domain];
+  } catch {}
 
-  return [trackHost, trackDomain];
+  return ["localhost", "localhost"];
 };
 
 // Return Hostname
@@ -37,7 +36,7 @@ const getDomainName = (obj: string): string | undefined => {
 const getElementId = (attr: HTMLElement | string): string | undefined => {
   if (attr && (attr as HTMLElement).nodeName) {
     return (
-      (attr as HTMLElement as any).uniqueId ||
+      (attr as HTMLElement as any).uniqueId ??
       ((attr as HTMLElement as any).uniqueId = generateIdToken())
     );
   }
@@ -51,19 +50,20 @@ const getElementId = (attr: HTMLElement | string): string | undefined => {
       element.uniqueId = attr as string;
     }
 
-    return element?.uniqueId || (attr as string);
-  } catch (e) {
-    return attr as string;
-  }
+    return element?.uniqueId ?? (attr as string);
+  } catch {}
+
+  return attr as string;
 };
 
 // Analyze video element
 const analyzeVideo = (
-  target: HTMLElement | string | any,
+  target: HTMLElement | string | undefined,
 ): [HTMLElement | null, string | undefined, string] => {
   let videoTag: HTMLElement | null = null;
   if (target && (target as HTMLElement).nodeName !== undefined) {
-    target = getElementId((videoTag = target as HTMLElement));
+    videoTag = target as HTMLElement;
+    target = getElementId(videoTag);
   } else {
     videoTag = document.querySelector(target as string) as HTMLElement;
   }
@@ -74,11 +74,11 @@ const analyzeVideo = (
 
 // Identify or assign unique ID to an element
 const identifyElement = (target: HTMLElement | string): string | undefined => {
-  let foundElement: Element | any = null;
+  let foundElement: Element | null = null;
 
   if (target && (target as HTMLElement).nodeName !== undefined) {
     return (
-      (target as HTMLElement as any).elementId ||
+      (target as HTMLElement as any).elementId ??
         ((target as HTMLElement as any).elementId = generateRandomIdentifier()),
       (target as HTMLElement as any).elementId
     );
@@ -88,11 +88,11 @@ const identifyElement = (target: HTMLElement | string): string | undefined => {
     foundElement = document.querySelector(target as string);
   } catch {}
 
-  if (foundElement && !foundElement.elementId) {
-    foundElement.elementId = target as string;
+  if (foundElement && !(foundElement as any).elementId) {
+    (foundElement as any).elementId = target as string;
   }
 
-  return foundElement?.elementId || (target as string);
+  return (foundElement as any)?.elementId ?? (target as string);
 };
 
 // Merge multiple objects, skipping undefined values
@@ -122,21 +122,17 @@ function formulateBeaconUrl(
   config: ActionableDataTypes,
 ): string {
   const { beaconDomain } = config;
-  const targetDomain = beaconDomain || "metrix.ws";
-  const finalWorkspace = workspace || "collector";
-
-  if (config?.actionableData?.beaconCollectionDomain) {
-    return `https://${config.actionableData.beaconCollectionDomain}`;
-  }
+  const targetDomain = beaconDomain ?? "metrix.ws";
+  const finalWorkspace = workspace ?? "collector";
 
   return `https://${finalWorkspace}.${targetDomain}`;
 }
 
 // Check if Do Not Track is enabled
 function checkDoNotTrack(): boolean {
   const dntStatus =
-    navigator.doNotTrack ||
-    (window as any).doNotTrack ||
+    navigator.doNotTrack ??
+    (window as any).doNotTrack ??
     (navigator as any).msDoNotTrack;
 
   return dntStatus === "1" || dntStatus === "yes";
@@ -221,8 +217,8 @@ function getRequestTimingDetails(event: any) {
 const checkNetworkBandwidth = (): string | undefined => {
   const connectionType = navigator as any;
   const connection =
-    connectionType?.connection ||
-    connectionType?.mozConnection ||
+    connectionType?.connection ??
+    connectionType?.mozConnection ??
     connectionType?.webkitConnection;
 
   return connection?.type;

src/CommonMethods/index.ts

@@ -11,11 +11,7 @@ const makeApiCall = async (
   failure: (arg0?: null | undefined, arg1?: string | null) => void,
 ): Promise<void> => {
   try {
-    if (
-      destroyer &&
-      navigator.sendBeacon &&
-      navigator.sendBeacon(postcall, logData)
-    ) {
+    if (destroyer && navigator.sendBeacon?.(postcall, logData)) {
       failure();
     }
 

src/ConnectionHandler/index.ts

@@ -5,11 +5,13 @@ const cookieName = "FastPixData";
 // Get cookie from browser
 const getCookie = function (name: string) {
   const cookies = document.cookie.split(";");
-  for (let i = 0; i < cookies.length; i++) {
-    const cookie = cookies[i].trim();
+  for (const cookie of cookies) {
+    const trimmedCookie = cookie.trim();
 
-    if (cookie.startsWith(name + "=")) {
-      const cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+    if (trimmedCookie.startsWith(name + "=")) {
+      const cookieValue = decodeURIComponent(
+        trimmedCookie.substring(name.length + 1),
+      );
       const values: any = {};
       const keyValuePairs = cookieValue.split("&");
       keyValuePairs.forEach((pair) => {
@@ -33,7 +35,7 @@ const setCookie = (name: string, value: string, days: number): void => {
 // Get viewer data from the cookie
 const getViewerData = (): Record<string, any> => {
   const cookieValue = getCookie(cookieName);
-  return cookieValue ? cookieValue : {};
+  return cookieValue ?? {};
 };
 
 // Update viewer data in the cookie

src/CookieMethod/index.ts

@@ -153,12 +153,36 @@ interface OverrideableMetaData {
   device_name?: string;
 }
 
-interface EventMetaData extends EventsInterface, UserCustomDataType {}
+interface EventMetaData extends EventsInterface, UserCustomDataType {
+  debug: any;
+  fetchStateData: () => {
+    player_is_paused: any;
+    player_width: any;
+    player_height: any;
+    player_autoplay_on: any;
+    player_preload_on: boolean;
+    player_is_fullscreen: boolean;
+    video_source_height: any;
+    video_source_width: any;
+    video_source_url: any;
+    video_source_domain: string | undefined;
+    video_source_hostname: string | undefined;
+    video_source_duration: number;
+    video_poster_url: any;
+    player_language_code: any;
+    view_dropped_frame_count: any;
+  };
+  fetchPlayheadTime: () => number;
+  data: any;
+  automaticErrorTracking: any;
+  Hls: any;
+  hlsjs: any;
+}
 
 interface EventData extends UserCustomDataType, OverrideableMetaData {}
 
 interface ActionableDataTypes {
-  beaconDomain?: string | undefined;
+  beaconDomain?: string;
   errorConverter?: any;
   disablePlayheadRebufferTracking?: boolean;
   allowRebufferTracking?: boolean;

src/DataType/index.ts

@@ -12,7 +12,6 @@ const generateIdToken: () => string = function () {
 
 // Returns unique UUID
 const buildUUID: () => string = function () {
-
   return uuidv4();
 };
 

src/IdGenerationMethod/index.ts

@@ -37,7 +37,8 @@ export class ErrorManager {
           errorInfo.player_error_message ||
           errorInfo.player_error_context
         ) {
-          this.accuracy.data.player_error_code = errorInfo.player_error_code ?? "";
+          this.accuracy.data.player_error_code =
+            errorInfo.player_error_code ?? "";
           this.accuracy.data.player_error_message =
             errorInfo.player_error_message ?? "";
           this.accuracy.data.player_error_context =