Add video playback observer (#1721)

* Add video playback observer

* Enable webCompat on Windows

* Call on document load

* Move to telemetry

* Fix comment that was stolen

* Add PoC test case

* Add video listener

* Listen earlier, dedupe messages

* Check for presence of node

* Make observer use documentElement as a fallback for a listener

* Use notify as a fire and forget

* Call messaging in the correct scope

* Simplify

* Use once listeners instead

* add args to constructor

* Add play watch on start

* Fix scope

* Cleanup

* Rename to web-telemetry

* Account for video tag reuse by deduping against URL instead

* Bail out on seen urls

---------

Co-authored-by: Jonathan Kingston <[email protected]>
Co-authored-by: Jonathan Kingston <[email protected]>

Author: RendijsSmukulis

injected/src/features.js

@@ -29,6 +29,7 @@ const otherFeatures = /** @type {const} */ ([
     'breakageReporting',
     'autofillPasswordImport',
     'favicon',
+    'webTelemetry',
     'scriptlets',
 ]);
 
@@ -51,6 +52,7 @@ export const platformSupport = {
     windows: [
         'cookie',
         ...baseFeatures,
+        'webTelemetry',
         'windowsPermissionUsage',
         'duckPlayer',
         'brokerProtection',

injected/src/features/web-telemetry.js

@@ -0,0 +1,118 @@
+import ContentFeature from '../content-feature.js';
+
+const MSG_VIDEO_PLAYBACK = 'video-playback';
+
+export class WebTelemetry extends ContentFeature {
+    constructor(featureName, importConfig, args) {
+        super(featureName, importConfig, args);
+        this.seenVideoElements = new WeakSet();
+        this.seenVideoUrls = new Set();
+    }
+
+    init() {
+        if (this.getFeatureSettingEnabled('videoPlayback')) {
+            this.videoPlaybackObserve();
+        }
+    }
+
+    getVideoUrl(video) {
+        // Try to get the video URL from various sources
+        if (video.src) {
+            return video.src;
+        }
+        if (video.currentSrc) {
+            return video.currentSrc;
+        }
+        // Check for source elements
+        const source = video.querySelector('source');
+        if (source && source.src) {
+            return source.src;
+        }
+        return null;
+    }
+
+    fireTelemetryForVideo(video) {
+        const videoUrl = this.getVideoUrl(video);
+        if (this.seenVideoUrls.has(videoUrl)) {
+            return;
+        }
+        // If we have a URL, store it just to deduplicate
+        // This will clear on page change and isn't sent to native/server.
+        if (videoUrl) {
+            this.seenVideoUrls.add(videoUrl);
+        }
+        const message = {
+            userInteraction: navigator.userActivation.isActive,
+        };
+        this.messaging.notify(MSG_VIDEO_PLAYBACK, message);
+    }
+
+    addPlayObserver(video) {
+        if (this.seenVideoElements.has(video)) {
+            return; // already observed
+        }
+        this.seenVideoElements.add(video);
+        video.addEventListener('play', () => this.fireTelemetryForVideo(video));
+    }
+
+    addListenersToAllVideos(node) {
+        if (!node) {
+            return;
+        }
+        const videos = node.querySelectorAll('video');
+        videos.forEach((video) => {
+            this.addPlayObserver(video);
+        });
+    }
+
+    videoPlaybackObserve() {
+        if (document.body) {
+            this.setup();
+        } else {
+            window.addEventListener(
+                'DOMContentLoaded',
+                () => {
+                    this.setup();
+                },
+                { once: true },
+            );
+        }
+    }
+
+    setup() {
+        const documentBody = document.body;
+        if (!documentBody) return;
+
+        this.addListenersToAllVideos(documentBody);
+
+        // Backfill: fire telemetry for already playing videos
+        documentBody.querySelectorAll('video').forEach((video) => {
+            if (!video.paused && !video.ended) {
+                this.fireTelemetryForVideo(video);
+            }
+        });
+
+        const observerCallback = (mutationsList) => {
+            for (const mutation of mutationsList) {
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            if (node.tagName === 'VIDEO') {
+                                this.addPlayObserver(node);
+                            } else {
+                                this.addListenersToAllVideos(node);
+                            }
+                        }
+                    });
+                }
+            }
+        };
+        const observer = new MutationObserver(observerCallback);
+        observer.observe(documentBody, {
+            childList: true,
+            subtree: true,
+        });
+    }
+}
+
+export default WebTelemetry;