Shane/shared demo (#1690)

* demo

* more tweaks

Author: shakyShane

injected/src/features/duck-player-native.js

@@ -2,7 +2,7 @@ import ContentFeature from '../content-feature.js';
 import { isBeingFramed } from '../utils.js';
 import { DuckPlayerNativeMessages } from './duckplayer-native/messages.js';
 import { setupDuckPlayerForNoCookie, setupDuckPlayerForSerp, setupDuckPlayerForYouTube } from './duckplayer-native/duckplayer-native.js';
-import { Environment } from './duckplayer-native/environment.js';
+import { Environment } from './duckplayer/environment.js';
 
 /**
  * @import {DuckPlayerNativePage} from './duckplayer-native/duckplayer-native.js'
@@ -18,7 +18,7 @@ import { Environment } from './duckplayer-native/environment.js';
  */
 
 export class DuckPlayerNativeFeature extends ContentFeature {
-    /** @type {DuckPlayerNativePage} */
+    /** @type {{init: () => void, destroy: () => void} | null} */
     currentPage;
 
     async init(args) {

injected/src/features/duck-player.js

@@ -35,7 +35,8 @@ import ContentFeature from '../content-feature.js';
 
 import { DuckPlayerOverlayMessages, OpenInDuckPlayerMsg, Pixel } from './duckplayer/overlay-messages.js';
 import { isBeingFramed } from '../utils.js';
-import { Environment, initOverlays } from './duckplayer/overlays.js';
+import { initOverlays } from './duckplayer/overlays.js';
+import { Environment } from './duckplayer/environment.js';
 
 /**
  * @typedef UserValues - A way to communicate user settings

injected/src/features/duckplayer-native/custom-error/custom-error.js

@@ -1,5 +1,5 @@
 import css from './custom-error.css';
-import { Logger } from '../util';
+import { Logger } from '../../duckplayer/util.js';
 import { createPolicy, html } from '../../../dom-utils.js';
 import { customElementsDefine, customElementsGet } from '../../../captured-globals.js';
 
@@ -100,10 +100,10 @@ function getErrorStrings(errorId, t) {
  *
  * @param {HTMLElement} targetElement
  * @param {YouTubeError} errorId
- * @param {import('../environment').Environment} environment
+ * @param {import('../../duckplayer/environment.js').Environment} environment
  */
 export function showError(targetElement, errorId, environment) {
-    const { title, messages } = getErrorStrings(errorId, environment.strings);
+    const { title, messages } = getErrorStrings(errorId, environment.strings('native.json'));
     const logger = new Logger({
         id: 'CUSTOM_ERROR',
         shouldLog: () => environment.isTestMode(),

injected/src/features/duckplayer-native/duckplayer-native.js

@@ -5,17 +5,17 @@ import { ErrorDetection } from './error-detection.js';
 import { appendThumbnailOverlay as showThumbnailOverlay } from './overlays/thumbnail-overlay.js';
 import { stopVideoFromPlaying } from './pause-video.js';
 import { showError } from './custom-error/custom-error.js';
-import { Logger, SideEffects } from './util.js';
+import { Logger, SideEffects } from '../duckplayer/util.js';
 
 /**
  * @import {DuckPlayerNativeMessages} from './messages.js'
- * @import {Environment} from './environment.js'
+ * @import {Environment} from '../duckplayer/environment.js'
  * @import {ErrorDetectionSettings} from './error-detection.js'
  * @import {DuckPlayerNativeSettings} from "@duckduckgo/privacy-configuration/schema/features/duckplayer-native.js"
  */
 
 /**
- * @typedef {(SideEffects, Logger) => void} CustomEventHandler
+ * @typedef {(effects: SideEffects, logger: Logger) => void} CustomEventHandler
  * @typedef {DuckPlayerNativeSettings['selectors']} DuckPlayerNativeSelectors
  */
 
@@ -32,12 +32,12 @@ export class DuckPlayerNativePage {
     messages;
     /**
      * Runs when an instance of this class is initialized
-     * @type {CustomEventHandler}
+     * @type {CustomEventHandler|undefined}
      */
     onInit;
     /**
      * Runs after the current document has been loaded
-     * @type {CustomEventHandler}
+     * @type {CustomEventHandler|undefined}
      */
     onLoad;
 
@@ -56,8 +56,8 @@ export class DuckPlayerNativePage {
 
         this.setupLogger();
 
-        this.onLoad = onLoad || (() => {});
-        this.onInit = onInit || (() => {});
+        this.onLoad = onLoad;
+        this.onInit = onInit;
 
         this.selectors = selectors;
         this.environment = environment;
@@ -80,13 +80,13 @@ export class DuckPlayerNativePage {
 
     init() {
         this.logger.log('Running init handlers');
-        this.onInit(this.sideEffects, this.logger);
+        this.onInit?.(this.sideEffects, this.logger);
 
         if (document.readyState === 'loading') {
             this.sideEffects.add('setting up load event listener', () => {
                 const loadHandler = () => {
                     this.logger.log('Running deferred load handlers');
-                    this.onLoad(this.sideEffects, this.logger);
+                    this.onLoad?.(this.sideEffects, this.logger);
                     this.messages.notifyScriptIsReady();
                 };
                 document.addEventListener('DOMContentLoaded', loadHandler, { once: true });
@@ -97,7 +97,7 @@ export class DuckPlayerNativePage {
             });
         } else {
             this.logger.log('Running load handlers immediately');
-            this.onLoad(this.sideEffects, this.logger);
+            this.onLoad?.(this.sideEffects, this.logger);
             this.messages.notifyScriptIsReady();
         }
     }
@@ -112,6 +112,9 @@ export class DuckPlayerNativePage {
  * @param {DuckPlayerNativeMessages} messages
  */
 export function setupDuckPlayerForYouTube(selectors, playbackPaused, environment, messages) {
+    /**
+     * @type {(sideEffects: SideEffects, logger: Logger, pause: boolean) => void}
+     */
     const mediaControlHandler = (sideEffects, logger, pause) => {
         logger.log('Running media control handler. Pause:', pause);
 
@@ -141,6 +144,7 @@ export function setupDuckPlayerForYouTube(selectors, playbackPaused, environment
         }
     };
 
+    /** @type {CustomEventHandler} */
     const onLoad = (sideEffects, logger) => {
         sideEffects.add('started polling current timestamp', () => {
             const handler = (timestamp) => {
@@ -155,6 +159,7 @@ export function setupDuckPlayerForYouTube(selectors, playbackPaused, environment
         }
     };
 
+    /** @type {CustomEventHandler} */
     const onInit = (sideEffects, logger) => {
         sideEffects.add('subscribe to media control', () => {
             return messages.subscribeToMediaControl(({ pause }) => {
@@ -188,6 +193,7 @@ export function setupDuckPlayerForYouTube(selectors, playbackPaused, environment
  * @param {DuckPlayerNativeMessages} messages
  */
 export function setupDuckPlayerForNoCookie(selectors, environment, messages) {
+    /** @type {CustomEventHandler} */
     const onLoad = (sideEffects, logger) => {
         sideEffects.add('started polling current timestamp', () => {
             const handler = (timestamp) => {

injected/src/features/duckplayer-native/error-detection.js

@@ -1,4 +1,4 @@
-import { Logger } from './util';
+import { Logger } from '../duckplayer/util.js';
 
 /**
  * @import {DuckPlayerNativeSettings} from "@duckduckgo/privacy-configuration/schema/features/duckplayer-native.js"

injected/src/features/duckplayer-native/get-current-timestamp.js

@@ -13,14 +13,13 @@ export function getCurrentTimestamp(selector) {
  * Sends the timestamp to the browser at an interval
  *
  * @param {number} interval - Polling interval
- * @param {(number) => void} callback - Callback handler for polling event
+ * @param {(timestamp: number) => void} callback - Callback handler for polling event
  * @param {DuckPlayerNativeSelectors} selectors - Selectors for the player
- * @returns
  */
 export function pollTimestamp(interval = 300, callback, selectors) {
     if (!callback || !selectors) {
         console.error('Timestamp polling failed. No callback or selectors defined');
-        return;
+        return () => {};
     }
 
     const isShowingAd = () => {

injected/src/features/duckplayer-native/messages.js

@@ -2,7 +2,7 @@ import * as constants from './constants.js';
 import { mockTransport } from './mock-transport.js';
 
 /** @import {YouTubeError} from './error-detection.js' */
-/** @import {Environment} from './environment.js' */
+/** @import {Environment} from '../duckplayer/environment.js' */
 
 /**
  * @typedef {object} MuteSettings - Settings passed to the onMute callback

injected/src/features/duckplayer-native/mock-transport.js

@@ -1,5 +1,5 @@
 import * as constants from './constants.js';
-import { Logger } from './util.js';
+import { Logger } from '../duckplayer/util.js';
 
 const logger = new Logger({
     id: 'MOCK_TRANSPORT',

injected/src/features/duckplayer-native/overlays/thumbnail-overlay.js

@@ -1,7 +1,7 @@
 import css from './thumbnail-overlay.css';
 import { createPolicy, html } from '../../../dom-utils.js';
 import { customElementsDefine, customElementsGet } from '../../../captured-globals.js';
-import { VideoParams, appendImageAsBackground, Logger } from '../util';
+import { VideoParams, appendImageAsBackground, Logger } from '../../duckplayer/util.js';
 
 /**
  * The custom element that we use to present our UI elements
@@ -87,7 +87,7 @@ export class DDGVideoThumbnailOverlay extends HTMLElement {
 /**
  *
  * @param {HTMLElement} targetElement
- * @param {import('../environment').Environment} environment
+ * @param {import("../../duckplayer/environment").Environment} environment
  * @param {() => void} [onClick] Optional callback to be called when the overlay is clicked
  */
 export function appendThumbnailOverlay(targetElement, environment, onClick) {