Add video engagement tracking and heatmap

resources/js/player.js

@@ -21,6 +21,8 @@ import { addVideoTracks } from './player-data';
 import { addSubtitleTracks } from './player-data';
 import { serverSelectMenuItem, serverSelectSubmenu, serverSelectMenuClickToggle } from './player-server-select';
 import { isIOS } from './detect-ios';
+import { startEngagementTracking, stopEngagementTracking } from './player-engagement';
+import { renderHeatmap } from './player-heatmap';
 
 // Variables
 var player = null;
@@ -166,6 +168,7 @@ function toggleAsiaServer() {
 
     if (player) {
         clearInterval(saveInterval);
+        stopEngagementTracking();
         player.destroy();
     }
     initPlayer();
@@ -291,6 +294,10 @@ function initPlayer() {
             console.log("Stopped video, because user didn't click play.")
         }
 
+        // Start engagement heatmap tracking
+        const episodeId = document.getElementById('e_id').value;
+        startEngagementTracking(episodeId);
+
         setCanvasDimension(canvas, video);
         console.log('Play => Function Loop()');
         var $this = video;
@@ -380,6 +387,18 @@ function initPlayer() {
 
     player.on('ready', () => {
         mobileDoubleClick(player);
+
+        // Load engagement heatmap once video duration is known
+        const video = document.querySelector('video');
+        const episodeId = document.getElementById('e_id').value;
+        if (video && video.duration) {
+            renderHeatmap(episodeId, video.duration);
+        } else if (video) {
+            video.addEventListener('loadedmetadata', function onMeta() {
+                video.removeEventListener('loadedmetadata', onMeta);
+                renderHeatmap(episodeId, video.duration);
+            });
+        }
     });
 
     // Server Select 
@@ -405,6 +424,7 @@ function initPlayer() {
 
                 if (player) {
                     clearInterval(saveInterval);
+                    stopEngagementTracking();
                     player.destroy();
                 }
                 initPlayer();