feat(Ads): Update DASH overlay implementation (#8503)

This matches with the latest draft of SCTE 214-1

Author: avelad

lib/ads/interstitial_ad_manager.js

@@ -523,95 +523,119 @@ shaka.ads.InterstitialAdManager = class {
     const uri = overlayEvent.attributes['uri'];
     const mimeType = overlayEvent.attributes['mimeType'];
     const loop = overlayEvent.attributes['loop'] == 'true';
+    const background = overlayEvent.attributes['background'] || null;
     const z = TXml.parseAttr(overlayEvent, 'z', TXml.parseInt);
     if (!uri || z == 0) {
       shaka.log.warning('Unsupported OverlayEvent', region);
       return;
     }
 
+    const viewport = {
+      x: 1920,
+      y: 1080,
+    };
+
+    const viewportElement = TXml.findChild(overlayEvent, 'Viewport');
+    if (viewportElement) {
+      const viewportX = TXml.parseAttr(viewportElement, 'x', TXml.parseInt);
+      if (viewportX == null) {
+        shaka.log.warning('Unsupported OverlayEvent', region);
+        return;
+      }
+      const viewportY = TXml.parseAttr(viewportElement, 'y', TXml.parseInt);
+      if (viewportY == null) {
+        shaka.log.warning('Unsupported OverlayEvent', region);
+        return;
+      }
+      viewport.x = viewportX;
+      viewport.y = viewportY;
+    }
+
     /** @type {!shaka.extern.AdPositionInfo} */
-    let overlay = {
+    const overlay = {
       viewport: {
-        x: 1920,
-        y: 1080,
+        x: viewport.x,
+        y: viewport.y,
       },
       topLeft: {
         x: 0,
         y: 0,
       },
       size: {
-        x: 1920,
-        y: 1080,
+        x: viewport.x,
+        y: viewport.y,
       },
     };
 
-    const viewport = TXml.findChild(overlayEvent, 'Viewport');
-    const topLeft = TXml.findChild(overlayEvent, 'TopLeft');
-    const size = TXml.findChild(overlayEvent, 'Size');
-    if (viewport && topLeft && size) {
-      const viewportX = TXml.parseAttr(viewport, 'x', TXml.parseInt);
-      if (viewportX == null) {
-        shaka.log.warning('Unsupported OverlayEvent', region);
-        return;
-      }
-      const viewportY = TXml.parseAttr(viewport, 'y', TXml.parseInt);
-      if (viewportY == null) {
-        shaka.log.warning('Unsupported OverlayEvent', region);
-        return;
-      }
-      const topLeftX = TXml.parseAttr(topLeft, 'x', TXml.parseInt);
-      if (topLeftX == null) {
-        shaka.log.warning('Unsupported OverlayEvent', region);
-        return;
-      }
-      const topLeftY = TXml.parseAttr(topLeft, 'y', TXml.parseInt);
-      if (topLeftY == null) {
-        shaka.log.warning('Unsupported OverlayEvent', region);
-        return;
-      }
-      const sizeX = TXml.parseAttr(size, 'x', TXml.parseInt);
-      if (sizeX == null) {
-        shaka.log.warning('Unsupported OverlayEvent', region);
-        return;
-      }
-      const sizeY = TXml.parseAttr(size, 'y', TXml.parseInt);
-      if (sizeY == null) {
-        shaka.log.warning('Unsupported OverlayEvent', region);
-        return;
+    const overlayElement = TXml.findChild(overlayEvent, 'Overlay');
+    if (viewportElement && overlayElement) {
+      const topLeft = TXml.findChild(overlayElement, 'TopLeft');
+      const size = TXml.findChild(overlayElement, 'Size');
+      if (topLeft && size) {
+        const topLeftX = TXml.parseAttr(topLeft, 'x', TXml.parseInt);
+        if (topLeftX == null) {
+          shaka.log.warning('Unsupported OverlayEvent', region);
+          return;
+        }
+        const topLeftY = TXml.parseAttr(topLeft, 'y', TXml.parseInt);
+        if (topLeftY == null) {
+          shaka.log.warning('Unsupported OverlayEvent', region);
+          return;
+        }
+        const sizeX = TXml.parseAttr(size, 'x', TXml.parseInt);
+        if (sizeX == null) {
+          shaka.log.warning('Unsupported OverlayEvent', region);
+          return;
+        }
+        const sizeY = TXml.parseAttr(size, 'y', TXml.parseInt);
+        if (sizeY == null) {
+          shaka.log.warning('Unsupported OverlayEvent', region);
+          return;
+        }
+        overlay.topLeft.x = topLeftX;
+        overlay.topLeft.y = topLeftY;
+        overlay.size.x = sizeX;
+        overlay.size.y = sizeY;
       }
-      overlay = {
-        viewport: {
-          x: viewportX,
-          y: viewportY,
-        },
-        topLeft: {
-          x: topLeftX,
-          y: topLeftY,
-        },
-        size: {
-          x: sizeX,
-          y: sizeY,
-        },
-      };
     }
-    const squeezeCurrent = TXml.findChild(overlayEvent, 'SqueezeCurrent');
     let currentVideo = null;
-    if (squeezeCurrent) {
-      const percentage =
-          TXml.parseAttr(squeezeCurrent, 'percentage', TXml.parseFloat);
-      if (percentage) {
+    const squeezeElement = TXml.findChild(overlayEvent, 'Squeeze');
+    if (viewportElement && squeezeElement) {
+      const topLeft = TXml.findChild(squeezeElement, 'TopLeft');
+      const size = TXml.findChild(squeezeElement, 'Size');
+      if (topLeft && size) {
+        const topLeftX = TXml.parseAttr(topLeft, 'x', TXml.parseInt);
+        if (topLeftX == null) {
+          shaka.log.warning('Unsupported OverlayEvent', region);
+          return;
+        }
+        const topLeftY = TXml.parseAttr(topLeft, 'y', TXml.parseInt);
+        if (topLeftY == null) {
+          shaka.log.warning('Unsupported OverlayEvent', region);
+          return;
+        }
+        const sizeX = TXml.parseAttr(size, 'x', TXml.parseInt);
+        if (sizeX == null) {
+          shaka.log.warning('Unsupported OverlayEvent', region);
+          return;
+        }
+        const sizeY = TXml.parseAttr(size, 'y', TXml.parseInt);
+        if (sizeY == null) {
+          shaka.log.warning('Unsupported OverlayEvent', region);
+          return;
+        }
         currentVideo = {
           viewport: {
-            x: 1920,
-            y: 1080,
+            x: viewport.x,
+            y: viewport.y,
           },
           topLeft: {
-            x: 0,
-            y: 0,
+            x: topLeftX,
+            y: topLeftY,
           },
           size: {
-            x: 1920 * percentage,
-            y: 1080 * percentage,
+            x: sizeX,
+            y: sizeY,
           },
         };
       }
@@ -639,7 +663,7 @@ shaka.ads.InterstitialAdManager = class {
       overlay,
       displayOnBackground: z == -1,
       currentVideo,
-      background: null,
+      background,
     };
     this.addInterstitials([interstitial]);
   }

test/ads/interstitial_ad_manager_unit.js

@@ -875,8 +875,10 @@ describe('Interstitial Ad manager', () => {
         '<Event duration="1" id="OVERLAY" presentationTime="0">',
         '<OverlayEvent mimeType="application/dash+xml" uri="test.mpd">',
         '<Viewport x="1920" y="1080"/>',
+        '<Overlay>',
         '<TopLeft x="0" y="720"/>',
         '<Size x="480" y="360"/>',
+        '</Overlay>',
         '</OverlayEvent>',
         '</Event>',
       ].join('');
@@ -943,7 +945,11 @@ describe('Interstitial Ad manager', () => {
       const eventString = [
         '<Event duration="1" id="OVERLAY" presentationTime="0">',
         '<OverlayEvent mimeType="application/dash+xml" uri="test.mpd" z="0">',
-        '<SqueezeCurrent percentage="0.7"/>',
+        '<Viewport x="1920" y="1080"/>',
+        '<Squeeze>',
+        '<TopLeft x="0" y="720"/>',
+        '<Size x="480" y="360"/>',
+        '</Squeeze>',
         '</OverlayEvent>',
         '</Event>',
       ].join('');
@@ -969,7 +975,11 @@ describe('Interstitial Ad manager', () => {
       const eventString = [
         '<Event duration="1" id="OVERLAY" presentationTime="0">',
         '<OverlayEvent mimeType="application/dash+xml" uri="test.mpd" z="-1">',
-        '<SqueezeCurrent percentage="0.5"/>',
+        '<Viewport x="1920" y="1080"/>',
+        '<Squeeze>',
+        '<TopLeft x="0" y="0"/>',
+        '<Size x="960" y="540"/>',
+        '</Squeeze>',
         '</OverlayEvent>',
         '</Event>',
       ].join('');
@@ -1044,6 +1054,95 @@ describe('Interstitial Ad manager', () => {
       };
       expect(interstitials[0]).toEqual(expectedInterstitial);
     });
+
+    it('supports overlay events with double box format', async () => {
+      const eventString = [
+        '<Event duration="1" id="OVERLAY" presentationTime="0">',
+        '<OverlayEvent mimeType="application/dash+xml" uri="test.mpd" z="-1" ',
+        'background="red">',
+        '<Viewport x="1920" y="1080"/>',
+        '<Overlay>',
+        '<TopLeft x="0" y="720"/>',
+        '<Size x="480" y="360"/>',
+        '</Overlay>',
+        '<Squeeze>',
+        '<TopLeft x="0" y="0"/>',
+        '<Size x="960" y="540"/>',
+        '</Squeeze>',
+        '</OverlayEvent>',
+        '</Event>',
+      ].join('');
+      const eventNode = TXml.parseXmlString(eventString);
+      goog.asserts.assert(eventNode, 'Should have a event node!');
+      /** @type {shaka.extern.TimelineRegionInfo} */
+      const region = {
+        startTime: 0,
+        endTime: 1,
+        id: 'OVERLAY',
+        schemeIdUri: 'urn:scte:dash:scte214-events',
+        eventNode,
+        eventElement: TXml.txmlNodeToDomElement(eventNode),
+        value: '',
+        timescale: 1,
+      };
+      await interstitialAdManager.addOverlayRegion(region);
+
+      expect(onEventSpy).not.toHaveBeenCalled();
+
+      const interstitials = interstitialAdManager.getInterstitials();
+      expect(interstitials.length).toBe(1);
+      /** @type {!shaka.extern.AdInterstitial} */
+      const expectedInterstitial = {
+        id: 'OVERLAY',
+        groupId: null,
+        startTime: 0,
+        endTime: 1,
+        uri: 'test.mpd',
+        mimeType: 'application/dash+xml',
+        isSkippable: false,
+        skipOffset: null,
+        skipFor: null,
+        canJump: true,
+        resumeOffset: null,
+        playoutLimit: null,
+        once: false,
+        pre: false,
+        post: false,
+        timelineRange: true,
+        loop: false,
+        overlay: {
+          viewport: {
+            x: 1920,
+            y: 1080,
+          },
+          topLeft: {
+            x: 0,
+            y: 720,
+          },
+          size: {
+            x: 480,
+            y: 360,
+          },
+        },
+        displayOnBackground: true,
+        currentVideo: {
+          viewport: {
+            x: 1920,
+            y: 1080,
+          },
+          topLeft: {
+            x: 0,
+            y: 0,
+          },
+          size: {
+            x: 960,
+            y: 540,
+          },
+        },
+        background: 'red',
+      };
+      expect(interstitials[0]).toEqual(expectedInterstitial);
+    });
   });
 
   describe('custom', () => {