SA widget (October 7th) (#40)

* mute the widget by default

Mute the widget by default to allow auto-play on modern browsers.

* first commit

* Add mute configuration -muted by default

* remove seekbar in live mode

* RTSP-setSource

* go back to the last day after click livebutton

* Fixed live button async problem and clean code for RTSP

* code cleanup

* Combine RTSP plugin to widget bundle

* remove rtsp script from html file.

* fix datepicker problem after click live button

* fix datepicker problem after click live button

* fix datepicker problem after click live button

* add overflow menu for meta data

* Add TrackingLine, Add color

* make the rectangle bigger

* fix SA widget test bugs-1

* fix SA widget test bugs-2

* SA widget October 8

* move speed to bottom

* remove prefilled form

* add comments and use const variable to indicate position

* fix SA widget test bugs-3

Co-authored-by: giakas <giakas@microsoft.com>

global.export.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import { Player } from './packages/widgets/src/player/player-widget';
-import { FASTButton, FASTMenu, FASTMenuItem, FASTSlider } from '@microsoft/fast-components';
+import { FASTButton, FASTMenu, FASTMenuItem, FASTSlider, FASTCheckbox } from '@microsoft/fast-components';
 import { ZoneDrawer } from './packages/widgets/src/zone-drawer/zone-drawer.widget';
 require('@azure/video-analyzer-player/dist/shaka_rtsp.min.js');
 
@@ -9,6 +9,7 @@ FASTButton;
 FASTMenu;
 FASTMenuItem;
 FASTSlider;
+FASTCheckbox;
 ZoneDrawer;
 
 export const widgets = {

npm.export.ts

@@ -2,10 +2,11 @@
 export * from './packages/widgets/src';
 export * from './packages/styles';
 
-import { FASTButton, FASTMenu, FASTMenuItem, FASTSlider } from '@microsoft/fast-components';
+import { FASTButton, FASTMenu, FASTMenuItem, FASTSlider, FASTCheckbox } from '@microsoft/fast-components';
 require('@azure/video-analyzer-player/dist/shaka_rtsp.min.js');
 
 FASTButton;
 FASTMenu;
 FASTMenuItem;
 FASTSlider;
+FASTCheckbox;

packages/styles/svg/svg.shapes.ts

@@ -44,6 +44,9 @@ export const OVERFLOW_MENU_PATH =
 export const METADATA_PATH =
     'M15 3.93l-7.5-3.93-7.5 3.93v7.94l7.5 3.93 7.5-3.93v-7.94zM7.5 1.13l5.92 3.1-5.92 3.1-5.92-3.1 5.92-3.1zM1 11.26v-6.2l6 3.14v6.2l-6-3.14zM8 14.41v-6.21l6-3.14v6.2l-6 3.15z';
 
+export const METADATA_BUTTON_PATH =
+    'M4 2C4 0.89543 3.10457 -1.35705e-07 2 -8.74228e-08C0.89543 -3.91405e-08 -6.60243e-07 0.895431 -6.1196e-07 2C-5.63678e-07 3.10457 0.89543 4 2 4L2 12C0.89543 12 -1.35705e-07 12.8954 -8.74228e-08 14C-3.91405e-08 15.1046 0.895431 16 2 16C3.10457 16 4 15.1046 4 14L10 14C10 15.1046 10.8954 16 12 16C13.1046 16 14 15.1046 14 14C14 12.8954 13.1046 12 12 12L12 4C13.1046 4 14 3.10457 14 2C14 0.895431 13.1046 3.80855e-07 12 4.29138e-07C10.8954 4.7742e-07 10 0.895431 10 2L4 2ZM3 3.73244C3.30363 3.5568 3.5568 3.30363 3.73244 3L10.2676 3C10.4432 3.30363 10.6964 3.5568 11 3.73244L11 12.2676C10.6964 12.4432 10.4432 12.6964 10.2676 13L3.73244 13C3.5568 12.6964 3.30363 12.4432 3 12.2676L3 3.73244Z';
+
 export const ARROW_RIGHT_PATH = 'M5.141 15.805l-0.945-0.945 6.859-6.859-6.859-6.859 0.945-0.945 7.805 7.805-7.805 7.805z';
 
 export const ARROW_LEFT_PATH = 'M10.859 15.805l-7.805-7.805 7.805-7.805 0.945 0.945-6.859 6.859 6.859 6.859-0.945 0.945z';

packages/web-components/src/player-component/UI/ava-ui-layer.class.ts

@@ -3,7 +3,6 @@ import { ControlPanelElements } from '../player-component.definitions';
 import { ISeekBarElement } from './definitions';
 import { ForwardButton, FullscreenButton, MuteButton, OverflowMenu, PlayButton, RewindButton, SeekBarDecorator } from './ui.class';
 import {
-    BodyTrackingButtonFactory,
     ForwardButtonFactory,
     FullscreenButtonFactory,
     HoursLabelFactory,
@@ -15,7 +14,8 @@ import {
     PlayButtonFactory,
     PrevDayButtonFactory,
     PrevSegmentButtonFactory,
-    RewindButtonFactory
+    RewindButtonFactory,
+    MetaDataButtonFactory
 } from './ui.factory';
 
 /**
@@ -37,7 +37,7 @@ export class AVAPlayerUILayer {
             ControlPanelElements.NEXT_DAY,
             ControlPanelElements.HOURS_LABEL,
             ControlPanelElements.Time_And_Duration,
-            ControlPanelElements.META_DATA_LAYER,
+            ControlPanelElements.META_DATA,
             ControlPanelElements.OVERFLOW_MENU,
             ControlPanelElements.FULLSCREEN
         ],
@@ -55,11 +55,13 @@ export class AVAPlayerUILayer {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         private shaka: any,
         private toggleLiveMode: (isLive: boolean) => void,
-        private toggleBodyTracking: (isOn: boolean) => void,
         private nextDayCallBack: () => void,
         private prevDayCallBack: () => void,
         private jumpSegmentCallBack: (isNext: boolean) => void,
-        private allowedControllers: ControlPanelElements[]
+        private allowedControllers: ControlPanelElements[],
+        private toggleBox: () => void,
+        private toggleAttributes: () => void,
+        private toggleTracking: () => void
     ) {
         this.createControllers();
         this.updateAvailableControllers();
@@ -128,7 +130,7 @@ export class AVAPlayerUILayer {
                 hasMiddleSpacer = true;
             } else if (
                 !hasRightSpacer &&
-                (iterator === ControlPanelElements.META_DATA_LAYER ||
+                (iterator === ControlPanelElements.META_DATA ||
                     iterator === ControlPanelElements.OVERFLOW_MENU ||
                     iterator === ControlPanelElements.FULLSCREEN)
             ) {
@@ -179,10 +181,6 @@ export class AVAPlayerUILayer {
 
         this.shaka.ui.Controls.registerElement(ControlPanelElements.LIVE, new LiveButtonFactory());
 
-        BodyTrackingButtonFactory.callBack = (isOn: boolean) => {
-            this.toggleBodyTracking(isOn);
-        };
-        this.shaka.ui.Controls.registerElement(ControlPanelElements.META_DATA_LAYER, new BodyTrackingButtonFactory());
 
         NextSegmentButtonFactory.callBack = (isNext: boolean) => {
             this.jumpSegmentCallBack(isNext);
@@ -205,6 +203,17 @@ export class AVAPlayerUILayer {
         this.shaka.ui.Controls.registerElement(ControlPanelElements.PREVIOUS_DAY, new PrevDayButtonFactory());
 
         this.shaka.ui.Controls.registerElement(ControlPanelElements.HOURS_LABEL, new HoursLabelFactory());
+
+        MetaDataButtonFactory.BoxCallBack = () => {
+            this.toggleBox();
+        };
+        MetaDataButtonFactory.AttributesCallBack = () => {
+            this.toggleAttributes();
+        };
+        MetaDataButtonFactory.TrackingCallBack = () => {
+            this.toggleTracking();
+        };
+        this.shaka.ui.Controls.registerElement(ControlPanelElements.META_DATA, new MetaDataButtonFactory());
     }
 
     private createButton() {

packages/web-components/src/player-component/UI/bounding-box.class.ts

@@ -6,11 +6,17 @@ export class BoundingBoxDrawer extends CanvasElement {
     public data: any = [];
     private requestAnimFrameCounter: number;
     private timeToInstances: ITimeToInstance = [];
-    private _isOn = false;
+    private _isOn: boolean = false;
+    private _boxOn: boolean = false;
+    private _attributesOn: boolean = false;
+    private _trackingOn: boolean = false;
+    private _trackingPoints: object = {};
+    private _colorMap: object = {};
 
     private readonly PADDING_RIGHT = 4;
     private readonly PADDING_TOP = 2;
     private readonly PADDING_TOP_TEXT = 6;
+    private readonly COLORS = ['#1890F1', '#F1707B', '#92C353', '#FFC328', '#DB5FFF', '#D84A1B', '#642AB5'];
 
     public constructor(options: ICanvasOptions, private video: HTMLVideoElement) {
         super(options);
@@ -36,6 +42,18 @@ export class BoundingBoxDrawer extends CanvasElement {
         this.video.addEventListener('seeking', this.clear.bind(this));
     }
 
+    public updateIsBox() {
+        this._boxOn = !this._boxOn;
+    }
+
+    public updateIsAttributes() {
+        this._attributesOn = !this._attributesOn;
+    }
+
+    public updateIsTracking() {
+        this._trackingOn = !this._trackingOn;
+    }
+
     public destroy() {
         this.clearInstances();
         this.clear();
@@ -77,6 +95,38 @@ export class BoundingBoxDrawer extends CanvasElement {
         this.timeToInstances[time?.toFixed(6)].instanceData.push(instance);
     }
 
+    public roundRect(x: number, y: number, w: number, h: number, radius: number) {
+        const context = this.context;
+        const r = x + w;
+        const b = y + h;
+        context.beginPath();
+        context.lineWidth= 0;
+        context.moveTo(x+radius, y);
+        context.lineTo(r-radius, y);
+        context.quadraticCurveTo(r, y, r, y+radius);
+        context.lineTo(r, y+h-radius);
+        context.quadraticCurveTo(r, b, r-radius, b);
+        context.lineTo(x+radius, b);
+        context.quadraticCurveTo(x, b, x, b-radius);
+        context.lineTo(x, y+radius);
+        context.quadraticCurveTo(x, y, x+radius, y);
+        context.stroke();
+        context.fillStyle = 'rgba(0, 0, 0, 0.74)';
+        context.fill();
+    }
+
+    public canvasArrow(fromx: number, fromy: number, tox: number, toy: number) {
+        const headlen = 5; // length of head in pixels
+        const dx = tox - fromx;
+        const dy = toy - fromy;
+        const angle = Math.atan2(dy, dx);
+        this.context.moveTo(fromx, fromy);
+        this.context.lineTo(tox, toy);
+        this.context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
+        this.context.moveTo(tox, toy);
+        this.context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
+    }
+
     public draw() {
         if (!this.requestAnimFrameCounter) {
             return;
@@ -130,11 +180,20 @@ export class BoundingBoxDrawer extends CanvasElement {
             const y = Math.floor(instanceData.t * this.canvas.height);
             const w = Math.floor(instanceData.w * this.canvas.width);
             const h = Math.floor(instanceData.h * this.canvas.height);
-            this.context.strokeRect(x, y, w, h);
+
+            const orientationPointY = y + h;
+            const trackingLinePointY = y + h;
+
+            // Draw bounding box
+            if (this._boxOn){
+                this.context.strokeRect(x, y, w, h);
+            }
 
             this.context.lineWidth = 1;
             this.context.strokeStyle = 'rgba(255, 255, 255, 0.74)';
-            this.context.strokeRect(x + 2, y + 2, w - 4, h - 4);
+            if (this._boxOn){
+                this.context.strokeRect(x + 2, y + 2, w - 4, h - 4);
+            }
 
             const cornerRadius = 5;
             this.context.fillStyle = 'rgba(0, 0, 0, 0.74)';
@@ -143,21 +202,144 @@ export class BoundingBoxDrawer extends CanvasElement {
             this.context.lineWidth = cornerRadius;
 
             if (instanceData.entity) {
-                let label = `${instanceData.entity.tag} ${instanceData.entity.id || ''}`;
+                if (!Object.prototype.hasOwnProperty.call(this._colorMap, instanceData.entity.trackingId)) {
+                    this._colorMap[instanceData.entity.trackingId] = this.COLORS[Object.keys(this._colorMap).length % this.COLORS.length];
+                }
+                const color = this._colorMap[instanceData.entity.trackingId];
+
+                const Id = instanceData.entity.trackingId.slice(instanceData.entity.trackingId.length - 6, instanceData.entity.trackingId.length);
+                let label = `${instanceData.entity.tag} ${Id}`;
+                let speed = `${instanceData.entity.speed}`;
+                const orientation = `${instanceData.entity.orientation}`;
+
                 let labelWidth = this.displayTextWidth(label);
                 if (labelWidth > w) {
                     label = `${label.substring(0, 10)}...`;
                     labelWidth = this.displayTextWidth(label);
                 }
+
+                if (speed.length > 3) {
+                    speed = parseFloat(speed).toFixed(1).toString();
+                }
+
+                const floatSpeed = parseFloat(speed);
+                speed = speed + ' ft/s';
+
                 this.getFontSize();
                 const width = labelWidth + this.PADDING_RIGHT * 2 * this.ratio;
                 const height = this.getFontSize() + this.PADDING_TOP * 2 * this.ratio;
-                this.context.strokeRect(x + this.PADDING_RIGHT, y - height - this.ratio, width, height);
-                this.context.fillRect(x + this.PADDING_RIGHT, y - height - this.ratio, width, height);
 
-                this.context.fillStyle = 'white';
+                if (this._attributesOn) {
 
-                this.context.fillText(label, x + this.PADDING_RIGHT * this.ratio, y - this.PADDING_TOP * 2 * this.ratio);
+                    // Show the tag box and tag
+                    this.context.strokeRect(x + this.PADDING_RIGHT, y - height - this.ratio, width + height, height);
+                    this.context.fillRect(x + this.PADDING_RIGHT, y - height - this.ratio, width + height, height);
+
+                    this.context.fillStyle = color;
+                    this.context.fillRect(
+                        x + this.PADDING_RIGHT * this.ratio + height/6,
+                        y - this.PADDING_TOP * 2 * this.ratio - 2 * height/3,
+                        2 * height/3,
+                        2 * height/3
+                    );
+
+                    this.context.fillStyle = 'white';
+                    this.context.fillText(label, x + this.PADDING_RIGHT * this.ratio + height, y - this.PADDING_TOP * 2 * this.ratio);
+                    this.context.fillStyle = 'rgba(0, 0, 0, 0.74)';
+
+                    // Draw speed round pill
+                    const speedWidth = this.displayTextWidth(speed) + 2.5 * height;
+                    this.roundRect(x + w/2 - height/2, orientationPointY - height/2, speedWidth, height, height/2);
+
+                    // Draw the dot in the speed round pill
+                    this.context.beginPath();
+                    this.context.strokeStyle = color;
+                    this.context.arc(x + w/2, orientationPointY, height/4, 0, 2 * Math.PI, true);
+                    this.context.fillStyle = color;
+                    this.context.fill();
+
+                    // Draw orientation arrow
+                    if (floatSpeed === 0 || speed === 'inf'){
+                        this.context.beginPath();
+                        this.context.strokeStyle = 'white';
+                        this.context.lineWidth = 3;
+                        this.context.arc(x + w/2 + height, orientationPointY, 1, 0, 2 * Math.PI, true);
+                        this.context.fillStyle = 'white';
+                        this.context.fill();
+                        this.context.stroke();
+                    } else {
+                        const floatOrientation = parseFloat(orientation);
+
+                        this.context.beginPath();
+                        this.context.lineWidth = 1;
+                        this.context.strokeStyle = 'white';
+                        this.context.moveTo(x + w/2 + height, orientationPointY);
+                        this.context.lineTo(
+                            x + w/2 + height + height/2 * Math.cos(floatOrientation - Math.PI),
+                            orientationPointY + height/2 * Math.sin(floatOrientation - Math.PI)
+                        );
+                        this.context.closePath();
+                        this.context.stroke();
+
+                        this.context.beginPath();
+                        this.context.strokeStyle = 'white';
+                        this.context.lineWidth = 1;
+                        this.canvasArrow(
+                            x + w/2 + height,
+                            orientationPointY,
+                            x + w/2 + height + height/2 * Math.cos(floatOrientation),
+                            orientationPointY + height/2 * Math.sin(floatOrientation)
+                        );
+                        this.context.stroke();
+                    }
+
+                    // Draw speed text
+                    this.context.fillStyle = 'white';
+                    this.context.fillText(speed, x + w/2 + 1.5 * height, orientationPointY + height/4);
+                }
+
+                if (!Object.prototype.hasOwnProperty.call(this._trackingPoints, instanceData.entity.trackingId)) {
+                    this._trackingPoints[instanceData.entity.trackingId] = [[x + w/2, trackingLinePointY]];
+                } else {
+                    const length = this._trackingPoints[instanceData.entity.trackingId].length;
+                    const lastX = this._trackingPoints[instanceData.entity.trackingId][length - 1][0];
+                    const lastY = this._trackingPoints[instanceData.entity.trackingId][length - 1][1];
+                    if (
+                        Math.abs(x + w/2 - lastX) > 50 || Math.abs(trackingLinePointY - lastY) > 50
+                    ) {
+                        this._trackingPoints = {};
+                        this._trackingPoints[instanceData.entity.trackingId] = [[x + w/2, trackingLinePointY]];
+                    } else {
+                        if (this._trackingPoints[instanceData.entity.trackingId].length > 240) {
+                            this._trackingPoints[instanceData.entity.trackingId].shift();
+                        }
+                        this._trackingPoints[instanceData.entity.trackingId].push([x + w/2, trackingLinePointY]);
+                    }
+                }
+
+                if (this._trackingOn) {
+                    if (this._trackingPoints[instanceData.entity.trackingId].length !== 0) {
+                        // Draw the current position dot for the tracking line
+                        this.context.beginPath();
+                        this.context.strokeStyle = color;
+                        this.context.arc(x + w/2, trackingLinePointY, height/4, 0, 2 * Math.PI, true);
+                        this.context.fillStyle = color;
+                        this.context.fill();
+
+                        // Draw the tracking line
+                        this.context.beginPath();
+                        this.context.strokeStyle = color;
+                        this.context.lineWidth = 2;
+                        this.context.moveTo(
+                            this._trackingPoints[instanceData.entity.trackingId][0][0],
+                            this._trackingPoints[instanceData.entity.trackingId][0][1]
+                        );
+                        for (const point of this._trackingPoints[instanceData.entity.trackingId]) {
+                            this.context.lineTo(point[0], point[1]);
+                        }
+                        this.context.stroke();
+                    }
+                }
             }
 
             this.context.stroke();
@@ -214,4 +396,7 @@ export interface IInstanceData {
 export interface IEntity {
     id: number;
     tag: string;
+    speed: string;
+    trackingId: string;
+    orientation: string;
 }

packages/web-components/src/player-component/UI/ui.class.ts

@@ -5,6 +5,7 @@ import {
     FORWARD_SVG_PATH,
     FULL_OFF_PATH,
     FULL_PATH,
+    METADATA_BUTTON_PATH,
     METADATA_PATH,
     MUTE_PATH,
     ON_PATH,
@@ -201,6 +202,73 @@ export class OverflowMenu extends shaka.ui.OverflowMenu {
     }
 }
 
+export class MetaDataButton extends shaka.ui.OverflowMenu {
+    private svg: SVGSVGElement;
+    private path: SVGPathElement;
+
+    public constructor(
+        parent: any,
+        controls: any,
+        private showBoxCallBack: () => void,
+        private showAttributesCallBack: () => void,
+        private showTrackingCallBack: () => void
+    ) {
+        super(parent, controls);
+        this.init();
+    }
+
+    public createChildren_() {
+        const showBoundingBox = document.createElement('div');
+        showBoundingBox.innerText = Localization.dictionary.BUTTONS_CLASS_BoundingBox;
+        showBoundingBox.classList.add('overflow-menu-item');
+        const BoxCheckbox = document.createElement('fast-checkbox');
+        this.eventManager.listen(BoxCheckbox, 'click', () => {
+            this.showBoxCallBack();
+        });
+        showBoundingBox.appendChild(BoxCheckbox);
+        this.overflowMenu_.appendChild(showBoundingBox);
+
+        const showAtrribute = document.createElement('div');
+        showAtrribute.innerText = Localization.dictionary.BUTTONS_CLASS_ATTRIBUTES;
+        showAtrribute.classList.add('overflow-menu-item');
+        const AttributesCheckbox = document.createElement('fast-checkbox');
+        this.eventManager.listen(AttributesCheckbox, 'click', () => {
+            this.showAttributesCallBack();
+        });
+        showAtrribute.appendChild(AttributesCheckbox);
+        this.overflowMenu_.appendChild(showAtrribute);
+
+        const showTrackingLine = document.createElement('div');
+        showTrackingLine.innerText = Localization.dictionary.BUTTONS_CLASS_ObjectPath;
+        showTrackingLine.classList.add('overflow-menu-item');
+        const TrackingLineCheckbox = document.createElement('fast-checkbox');
+        this.eventManager.listen(TrackingLineCheckbox, 'click', () => {
+            this.showTrackingCallBack();
+        });
+        showTrackingLine.appendChild(TrackingLineCheckbox);
+        this.overflowMenu_.appendChild(showTrackingLine);
+
+        const settingsLabel = document.createElement('label');
+        settingsLabel.classList.add('settings-header');
+        const settingsSpan = document.createElement('span');
+        settingsSpan.innerText = Localization.dictionary.BUTTONS_CLASS_MetaDataSettings;
+        settingsLabel.prepend(settingsSpan);
+        this.overflowMenu_.prepend(settingsLabel);
+    }
+
+    private init() {
+        // Create SVG
+        this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        this.path.setAttribute('fill', 'black');
+        this.path.setAttribute('d', METADATA_BUTTON_PATH);
+        this.svg.appendChild(this.path);
+        this.overflowMenuButton_.innerText = '';
+        this.overflowMenuButton_.appendChild(this.svg);
+        setElementTooltip(this.overflowMenuButton_, ControlPanelElementsTooltip.META_DATA_OVERFLOW_MENU);
+    }
+}
+
 export class LiveButton extends shaka.ui.Element {
     public isLiveButton = true;
     private isLive = true;

packages/web-components/src/player-component/UI/ui.factory.ts

@@ -1,4 +1,4 @@
-import { BodyTracking, HoursLabel, LiveButton, NextDayButton, NextSegment, PrevDayButton, PrevSegment } from './ui.class';
+import { HoursLabel, LiveButton, NextDayButton, NextSegment, PrevDayButton, PrevSegment, MetaDataButton } from './ui.class';
 import { shaka } from '../index';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -46,12 +46,6 @@ export class LiveButtonFactory {
     }
 }
 
-export class BodyTrackingButtonFactory {
-    public static callBack: (isOn: boolean) => void;
-    public create(rootElement: any, controls: any) {
-        return new BodyTracking(rootElement, controls, BodyTrackingButtonFactory.callBack);
-    }
-}
 
 export class NextDayButtonFactory {
     public static callBack: () => void;
@@ -86,3 +80,18 @@ export class PrevSegmentButtonFactory {
         return new PrevSegment(rootElement, controls, PrevSegmentButtonFactory.callBack);
     }
 }
+
+export class MetaDataButtonFactory {
+    public static BoxCallBack: () => void;
+    public static AttributesCallBack: () => void;
+    public static TrackingCallBack: () => void;
+    public create(rootElement: any, controls: any) {
+        return new MetaDataButton(
+            rootElement,
+            controls,
+            MetaDataButtonFactory.BoxCallBack,
+            MetaDataButtonFactory.AttributesCallBack,
+            MetaDataButtonFactory.TrackingCallBack
+        );
+    }
+}

packages/web-components/src/player-component/player-component.definitions.ts

@@ -37,7 +37,8 @@ export enum ControlPanelElements {
     CAMERA_NAME = 'camera_name',
     TIMESTAMP = 'timestamp',
     TIMELINE_ZOOM = 'timeline_zoom',
-    Time_And_Duration = 'time_and_duration'
+    Time_And_Duration = 'time_and_duration',
+    META_DATA = 'meta_data_button'
 }
 
 export enum LiveState {
@@ -58,6 +59,7 @@ export const ControlPanelElementsTooltip = {
     META_DATA_LAYER_ON: 'Turn on object metadata overlay',
     META_DATA_LAYER_OFF: 'Turn off object metadata overlay',
     OVERFLOW_MENU: 'More options',
+    META_DATA_OVERFLOW_MENU: 'Metadata rendering',
     FULLSCREEN: 'Enter fullscreen',
     EXIT_FULLSCREEN: 'Exit fullscreen',
     NEXT_DAY: 'Next day',

packages/web-components/src/player-component/player.class.ts

@@ -465,12 +465,23 @@ export class PlayerWrapper {
         return this.player.seekRange().start - this.firstSegmentStartSeconds;
     }
 
-    private toggleBodyTracking(isOn: boolean) {
-        if (isOn) {
-            this.addBoundingBoxLayer();
-        } else {
-            this.removeBoundingBoxLayer();
-        }
+    private toggleBox() {
+        this.boundingBoxesDrawer.updateIsBox();
+        this.removeBoundingBoxLayer();
+        this.addBoundingBoxLayer();
+
+    }
+
+    private toggleAttributes() {
+        this.boundingBoxesDrawer.updateIsAttributes();
+        this.removeBoundingBoxLayer();
+        this.addBoundingBoxLayer();
+    }
+
+    private toggleTracking() {
+        this.boundingBoxesDrawer.updateIsTracking();
+        this.removeBoundingBoxLayer();
+        this.addBoundingBoxLayer();
     }
 
     private jumpSegment(isNext: boolean) {
@@ -498,11 +509,13 @@ export class PlayerWrapper {
         this.avaUILayer = new AVAPlayerUILayer(
             shaka,
             this.onClickLive.bind(this),
-            this.toggleBodyTracking.bind(this),
             this.onClickNextDay.bind(this),
             this.onClickPrevDay.bind(this),
             this.jumpSegment.bind(this),
-            this.allowedControllers
+            this.allowedControllers,
+            this.toggleBox.bind(this),
+            this.toggleAttributes.bind(this),
+            this.toggleTracking.bind(this)
         );
 
         this._errorHandler = new shakaErrorHandler({
@@ -688,7 +701,10 @@ export class PlayerWrapper {
                 if (iterator.type === 'ENTITY') {
                     data.entity = {
                         id: iterator.entity.id || iterator.sequenceId,
-                        tag: iterator.entity.tag.value
+                        tag: iterator.entity.tag.value,
+                        trackingId: iterator.extensions.trackingId,
+                        speed: iterator.extensions.speed,
+                        orientation: iterator.extensions.mappedImageOrientation
                     };
                 }
                 this.boundingBoxesDrawer.addItem(emsg.startTime, emsg.endTime, data);

packages/web-components/src/player-component/shaka-controls.style.ts

@@ -521,6 +521,14 @@ export const stylesShaka = css`
         border-bottom: 1px solid var(--divider);
         color: var(--type-tertiary);
     }
+    .shaka-overflow-menu .overflow-menu-item {
+        padding: 8px;
+        font-size: 14px;
+        color: var(--type-tertiary);
+    }
+    .shaka-overflow-menu fast-checkbox {
+        float: right;
+    }
     .shaka-overflow-menu fast-button .material-icons-round {
         display: none;
     }

resources/locales/common/de.json

@@ -1,6 +1,10 @@
 {
     "ACTIONS_MENU_Options": "Opties",
     "BUTTONS_CLASS_Settings": "Instellingen",
+    "BUTTONS_CLASS_MetaDataSettings": "Metadaten-Rendering",
+    "BUTTONS_CLASS_BoundingBox": "Begrenzungsrahmen",
+    "BUTTONS_CLASS_ATTRIBUTES": "Attribute",
+    "BUTTONS_CLASS_ObjectPath": "Objektpfad",
     "BUTTONS_CLASS_SwitchToVOD": "Overschakelen naar VOD",
     "BUTTONS_CLASS_SwitchToLive": "Overschakelen naar live",
     "BUTTONS_CLASS_Live": "Live",
@@ -21,6 +25,7 @@
     "PLAYER_Tooltip_META_DATA_LAYER_ON": "Schakel objectmetadata-overlay in",
     "PLAYER_Tooltip_META_DATA_LAYER_OFF": "Schakel objectmetadata-overlay uit",
     "PLAYER_Tooltip_OVERFLOW_MENU": "Meer opties",
+    "PLAYER_Tooltip_META_DATA_OVERFLOW_MENU": "Metadaten-Rendering",
     "PLAYER_Tooltip_FULLSCREEN": "Volledig scherm invoeren",
     "PLAYER_Tooltip_EXIT_FULLSCREEN": "Volledig scherm afsluiten",
     "PLAYER_Tooltip_NEXT_DAY": "Volgende dag",

resources/locales/common/en.json

@@ -1,6 +1,10 @@
 {
     "ACTIONS_MENU_Options": "Options",
     "BUTTONS_CLASS_Settings": "Settings",
+    "BUTTONS_CLASS_MetaDataSettings": "Metadata rendering",
+    "BUTTONS_CLASS_BoundingBox": "Bounding box",
+    "BUTTONS_CLASS_ATTRIBUTES": "Attributes",
+    "BUTTONS_CLASS_ObjectPath": "Object path",
     "BUTTONS_CLASS_SwitchToVOD": "Switch to VOD",
     "BUTTONS_CLASS_SwitchToLive": "Switch to live",
     "BUTTONS_CLASS_Live": "Live",
@@ -21,6 +25,7 @@
     "PLAYER_Tooltip_META_DATA_LAYER_ON": "Turn on object metadata overlay",
     "PLAYER_Tooltip_META_DATA_LAYER_OFF": "Turn off object metadata overlay",
     "PLAYER_Tooltip_OVERFLOW_MENU": "More options",
+    "PLAYER_Tooltip_META_DATA_OVERFLOW_MENU": "Metadata rendering",
     "PLAYER_Tooltip_FULLSCREEN": "Enter fullscreen",
     "PLAYER_Tooltip_EXIT_FULLSCREEN": "Exit fullscreen",
     "PLAYER_Tooltip_NEXT_DAY": "Next day",