Implement Overlay events

src/dash/constants/DashConstants.js

@@ -122,6 +122,7 @@ export default {
     MPD: 'MPD',
     ORIGINAL_MPD_ID: 'mpdId',
     ORIGINAL_PUBLISH_TIME: 'originalPublishTime',
+    OVERLAY: 'OverlayEvent',
     PATCH_LOCATION: 'PatchLocation',
     PERIOD: 'Period',
     PRESENTATION_TIME: 'presentationTime',

src/dash/models/DashManifestModel.js

@@ -1061,6 +1061,12 @@ function DashManifestModel() {
                     } else {
                         event.id = null;
                     }
+                    if (currentMpdEvent.hasOwnProperty(DashConstants.OVERLAY)) {
+                        event.overlay = currentMpdEvent.OverlayEvent;
+                        if (event.overlay.earliestResolutionTime) {
+                            event.calculatedPresentationTime -= event.overlay.earliestResolutionTime / eventStream.timescale;
+                        }
+                    }
 
                     if (currentMpdEvent.Signal && currentMpdEvent.Signal.Binary) {
                         // toString is used to manage both regular and namespaced tags

src/streaming/MediaPlayer.js

@@ -39,6 +39,7 @@ import CatchupController from './controllers/CatchupController.js';
 import ServiceDescriptionController from '../dash/controllers/ServiceDescriptionController.js';
 import ContentSteeringController from '../dash/controllers/ContentSteeringController.js';
 import MediaController from './controllers/MediaController.js';
+import OverlayController from './controllers/OverlayController.js';
 import BaseURLController from './controllers/BaseURLController.js';
 import ManifestLoader from './ManifestLoader.js';
 import ErrorHandler from './utils/ErrorHandler.js';
@@ -144,6 +145,7 @@ function MediaPlayer() {
         schemeLoaderFactory,
         timelineConverter,
         mediaController,
+        overlayController,
         protectionController,
         metricsReportingController,
         mssHandler,
@@ -257,6 +259,9 @@ function MediaPlayer() {
         if (config.mediaController) {
             mediaController = config.mediaController;
         }
+        if (config.overlayController) {
+            overlayController = config.overlayController;
+        }
         if (config.settings) {
             settings = config.settings;
         }
@@ -328,6 +333,10 @@ function MediaPlayer() {
                 mediaController = MediaController(context).getInstance();
             }
 
+            if (!overlayController) {
+                overlayController = OverlayController(context).getInstance();
+            }
+
             if (!streamController) {
                 streamController = StreamController(context).getInstance();
             }
@@ -413,6 +422,10 @@ function MediaPlayer() {
                 videoModel
             });
 
+            overlayController.setConfig({
+                videoModel
+            });
+
             mediaPlayerModel.setConfig({
                 playbackController,
                 serviceDescriptionController
@@ -472,6 +485,9 @@ function MediaPlayer() {
         if (customParametersModel) {
             customParametersModel.reset();
         }
+        if (overlayController) {
+            overlayController.reset()
+        }
 
         settings.reset();
 
@@ -1468,6 +1484,16 @@ function MediaPlayer() {
         return videoModel ? videoModel.getTTMLRenderingDiv() : null;
     }
 
+    /**
+     * Returns instance of Div that was attached by calling attachOverlayRenderingDiv()
+     * @returns {Object}
+     * @memberof module:MediaPlayer
+     * @instance
+     */
+    function getOverlayRenderingDiv() {
+        return videoModel ? videoModel.getOverlayRenderingDiv() : null;
+    }
+
     /**
      * Use this method to attach an HTML5 div for dash.js to render rich TTML subtitles.
      *
@@ -1490,6 +1516,18 @@ function MediaPlayer() {
         videoModel.setVttRenderingDiv(div);
     }
 
+    function attachOverlayRenderingDiv(overlayDiv) {
+        const videoElement = videoModel.getElement();
+        if (!videoElement) {
+            throw ELEMENT_NOT_ATTACHED_ERROR;
+        }
+
+        overlayController.configureVideoElementForOverlay();
+        videoModel.setOverlayRenderingDiv(overlayDiv);
+
+        overlayController.setupOverlayEvents();
+    }
+
     /*
     ---------------------------------------------------------------------------
 
@@ -2740,6 +2778,7 @@ function MediaPlayer() {
         attachProtectionController,
         attachSource,
         attachTTMLRenderingDiv,
+        attachOverlayRenderingDiv,
         attachView,
         attachVttRenderingDiv,
         clearDefaultUTCTimingSources,
@@ -2778,6 +2817,7 @@ function MediaPlayer() {
         getSource,
         getStreamsFromManifest,
         getTTMLRenderingDiv,
+        getOverlayRenderingDiv,
         getTargetLiveDelay,
         getTracksFor,
         getTracksForTypeFromManifest,

src/streaming/constants/Constants.js

@@ -341,5 +341,14 @@ export default {
         DTSC: 'dtsc',
         AVC: 'avc',
         HEVC: 'hevc'
+    },
+
+    OVERLAY: {
+        SCHEME_ID: 'urn:scte:dash:scte214-events',
+        START_MODE: 'start',
+        STOP_MODE: 'stop',
+        EXTEND_MODE: 'extend',
+        VIDEO_MIMETYPE: 'video/mp4',
+        IFRMAE_MIMETYPE: 'text/html'
     }
 }