feat(player): Added new addControl callback to append new control i…

…tems, and modified class to auto generate custom control items based on the properties passed; updated demo file to show new capability
openplayerjs · Jan 9, 2019 · e793062 · e793062
1 parent 0208212
commit e793062
Show file tree

Hide file tree

Showing 8 changed files with 232 additions and 42 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@ node_modules/
 .vscode/
 ts-dist/
 .idea/
-coverage/
+coverage/
+.history/
diff --git a/demo/demo.js b/demo/demo.js
@@ -2,6 +2,7 @@
     var sourcesSelector = document.querySelectorAll('select[name=sources]');
     var destroyBtn = document.querySelectorAll('button.destroy-player');
     var captionBtn = document.querySelectorAll('button.load-caption');
+    var controlBtn = document.querySelectorAll('button.add-control');
     var players = document.querySelectorAll('.op-player__media');
     var instances = [];
 
@@ -55,6 +56,20 @@
         this.removeEventListener('click', loadCaption);
     }
 
+    function addControl() {
+        var id = this.closest('.players').querySelector('.op-player').id;
+        var player = OpenPlayer.instances[id];
+        player.addControl({
+            icon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Love_Heart_SVG.svg/32px-Love_Heart_SVG.svg.png',
+            title: 'Test',
+            position: 'left',
+            click: function() {
+                alert('You clicked the new ' + id + ' control');
+            }
+        });
+        this.removeEventListener('click', addControl);
+    }
+
     for (var i = 0, total = sourcesSelector.length; i < total; i++) {
         sourcesSelector[i].addEventListener('change', loadMedia);
     }
@@ -65,6 +80,9 @@
     for (var i = 0, total = captionBtn.length; i < total; i++) {
         captionBtn[i].addEventListener('click', loadCaption);
     }
+    for (var i = 0, total = controlBtn.length; i < total; i++) {
+        controlBtn[i].addEventListener('click', addControl);
+    }
 
     instances[1].getElement().addEventListener('hlsFragParsingMetadata', function (event) {
         var encodedTag = event.detail.samples[0].data;

diff --git a/demo/index.html b/demo/index.html
@@ -31,6 +31,9 @@
         #stream-info > p {
             margin-left: 315px;
         }
+        .op-controls__test > img {
+            max-height: 18px;
+        }
     </style>
 </head>
 <body>
@@ -50,6 +53,7 @@ <h1>Video Sample</h1>
             </label>
             <button class="destroy-player">Destroy player</button>
             <button class="load-caption">Load caption</button>
+            <button class="add-control">Add control</button>
         </div>
     </div>
 
@@ -67,6 +71,7 @@ <h1>Audio Sample</h1>
             </label>
             <button class="destroy-player">Destroy player</button>
             <button class="load-caption">Load caption</button>
+            <button class="add-control">Add control</button>
         </div>
     </div>
 

diff --git a/dist/openplayer.js b/dist/openplayer.js
@@ -1344,6 +1344,7 @@ var Player = function () {
     this.events = {};
     this.autoplay = false;
     this.processedAutoplay = false;
+    this.customControlItems = [];
     this.defaultOptions = {
       hidePlayBtnTimer: 350,
       labels: {
@@ -1476,6 +1477,11 @@ var Player = function () {
     value: function getControls() {
       return this.controls;
     }
+  }, {
+    key: "getCustomControls",
+    value: function getCustomControls() {
+      return this.customControlItems;
+    }
   }, {
     key: "getElement",
     value: function getElement() {
@@ -1547,6 +1553,14 @@ var Player = function () {
       var e = events_1.addEvent('controlschanged');
       el.dispatchEvent(e);
     }
+  }, {
+    key: "addControl",
+    value: function addControl(args) {
+      args.custom = true;
+      this.customControlItems.push(args);
+      var e = events_1.addEvent('controlschanged');
+      this.element.dispatchEvent(e);
+    }
   }, {
     key: "_isValid",
     value: function _isValid() {
@@ -4594,8 +4608,14 @@ var Controls = function () {
       }
 
       this.player.getElement().removeEventListener('controlschanged', this.events.controlschanged);
-      this.items.forEach(function (item) {
-        item.destroy();
+      Object.keys(this.items).forEach(function (position) {
+        _this2.items[position].forEach(function (item) {
+          if (item.custom) {
+            _this2._destroyCustomControl(item);
+          } else {
+            item.destroy();
+          }
+        });
       });
       this.controls.remove();
     }
@@ -4639,39 +4659,79 @@ var Controls = function () {
   }, {
     key: "_setElements",
     value: function _setElements() {
+      var _this4 = this;
+
       this.play = new play_1.default(this.player);
       this.time = new time_1.default(this.player);
       this.progress = new progress_1.default(this.player);
       this.volume = new volume_1.default(this.player);
       this.captions = new captions_1.default(this.player);
       this.settings = new settings_1.default(this.player);
-      this.items = [this.play, this.time, this.progress, this.volume, this.captions, this.settings];
+      this.items = {
+        left: [this.play, this.time, this.volume],
+        middle: [this.progress],
+        right: [this.captions, this.settings]
+      };
 
       if (general_1.isVideo(this.player.getElement())) {
         this.fullscreen = new fullscreen_1.default(this.player);
-        this.items.push(this.fullscreen);
+        this.items.right.push(this.fullscreen);
       }
+
+      var customItems = this.player.getCustomControls();
+      customItems.forEach(function (item) {
+        _this4.items[item.position].push(item);
+      });
     }
   }, {
     key: "_buildElements",
     value: function _buildElements() {
-      var _this4 = this;
+      var _this5 = this;
 
-      this.items.forEach(function (item) {
-        item.create();
+      Object.keys(this.items).forEach(function (position) {
+        _this5.items[position].forEach(function (item) {
+          if (item.custom) {
+            _this5._createCustomControl(item);
+          } else {
+            item.create();
+          }
+        });
       });
-      this.items.forEach(function (item) {
-        if (typeof item.addSettings === 'function') {
-          var menuItem = item.addSettings();
+      Object.keys(this.items).forEach(function (position) {
+        _this5.items[position].forEach(function (item) {
+          if (!item.custom && typeof item.addSettings === 'function') {
+            var menuItem = item.addSettings();
 
-          if (Object.keys(menuItem).length) {
-            _this4.settings.addItem(menuItem.name, menuItem.key, menuItem.default, menuItem.subitems, menuItem.className);
+            if (Object.keys(menuItem).length) {
+              _this5.settings.addItem(menuItem.name, menuItem.key, menuItem.default, menuItem.subitems, menuItem.className);
+            }
           }
-        }
+        });
       });
       var e = events_1.addEvent('controlschanged');
       this.controls.dispatchEvent(e);
     }
+  }, {
+    key: "_createCustomControl",
+    value: function _createCustomControl(item) {
+      var control = document.createElement('button');
+      var key = item.title.toLowerCase().replace(' ', '-');
+      control.className = "op-controls__".concat(key);
+      control.tabIndex = 0;
+      control.title = item.title;
+      control.innerHTML = "<img src=\"".concat(item.icon, "\"> <span class=\"op-sr\">").concat(item.title, "</span>");
+      control.style.maxHeight = '25px';
+      control.addEventListener('click', item.click);
+      this.getContainer().appendChild(control);
+    }
+  }, {
+    key: "_destroyCustomControl",
+    value: function _destroyCustomControl(item) {
+      var key = item.title.toLowerCase().replace(' ', '-');
+      var control = this.getContainer().querySelector(".op-controls__".concat(key));
+      control.removeEventListener('click', item.click);
+      control.remove();
+    }
   }]);
 
   return Controls;

diff --git a/dist/openplayer.min.js b/dist/openplayer.min.js
diff --git a/src/js/controls.ts b/src/js/controls.ts
@@ -6,6 +6,7 @@ import Settings from './controls/settings';
 import Time from './controls/time';
 import Volume from './controls/volume';
 import PlayerComponent from './interfaces/component';
+import ControlItem from './interfaces/control-item';
 import EventsList from './interfaces/events-list';
 import Player from './player';
 import { IS_ANDROID, IS_IOS } from './utils/constants';
@@ -114,10 +115,10 @@ class Controls implements PlayerComponent {
      * Storage for all the control elements.
      *
      * @private
-     * @type any[]
+     * @type any
      * @memberof Controls
      */
-    private items: any[];
+    private items: any;
 
     /**
      * Events that will be triggered in Controls element:
@@ -233,8 +234,14 @@ class Controls implements PlayerComponent {
 
         this.player.getElement().removeEventListener('controlschanged', this.events.controlschanged);
 
-        this.items.forEach(item => {
-            item.destroy();
+        Object.keys(this.items).forEach((position: string) => {
+            this.items[position].forEach((item: any) => {
+                if (item.custom) {
+                    this._destroyCustomControl(item);
+                } else {
+                    item.destroy();
+                }
+            });
         });
 
         this.controls.remove();
@@ -300,19 +307,31 @@ class Controls implements PlayerComponent {
         this.volume = new Volume(this.player);
         this.captions = new Captions(this.player);
         this.settings = new Settings(this.player);
-        this.items = [
-            this.play,
-            this.time,
-            this.progress,
-            this.volume,
-            this.captions,
-            this.settings,
-        ];
+        this.items = {
+            left: [
+                this.play,
+                this.time,
+                this.volume,
+            ],
+            middle: [
+                this.progress,
+            ],
+            right: [
+                this.captions,
+                this.settings,
+            ],
+        };
 
         if (isVideo(this.player.getElement())) {
             this.fullscreen = new Fullscreen(this.player);
-            this.items.push(this.fullscreen);
+            this.items.right.push(this.fullscreen);
         }
+
+        const customItems = this.player.getCustomControls();
+        // Append the custom items
+        customItems.forEach(item => {
+            this.items[item.position].push(item);
+        });
     }
 
     /**
@@ -326,28 +345,68 @@ class Controls implements PlayerComponent {
      */
     private _buildElements(): void {
         // Loop controls to build them and register events
-        this.items.forEach(item => {
-            item.create();
+        Object.keys(this.items).forEach((position: string) => {
+            this.items[position].forEach((item: any) => {
+                if (item.custom) {
+                    this._createCustomControl(item);
+                } else {
+                    item.create();
+                }
+            });
         });
 
-        this.items.forEach(item => {
-            if (typeof item.addSettings === 'function') {
-                const menuItem = item.addSettings();
-                if (Object.keys(menuItem).length) {
-                    this.settings.addItem(
-                        menuItem.name,
-                        menuItem.key,
-                        menuItem.default,
-                        menuItem.subitems,
-                        menuItem.className,
-                    );
+        Object.keys(this.items).forEach((position: string) => {
+            this.items[position].forEach((item: any) => {
+                if (!item.custom && typeof item.addSettings === 'function') {
+                    const menuItem = item.addSettings();
+                    if (Object.keys(menuItem).length) {
+                        this.settings.addItem(
+                            menuItem.name,
+                            menuItem.key,
+                            menuItem.default,
+                            menuItem.subitems,
+                            menuItem.className,
+                        );
+                    }
                 }
-            }
+            });
         });
 
         const e = addEvent('controlschanged');
         this.controls.dispatchEvent(e);
     }
+
+    /**
+     *
+     *
+     * @private
+     * @param {ControlItem} item
+     * @memberof Controls
+     */
+    private _createCustomControl(item: ControlItem): void {
+        const control = document.createElement('button');
+        const key = item.title.toLowerCase().replace(' ', '-');
+        control.className = `op-controls__${key}`;
+        control.tabIndex = 0;
+        control.title = item.title;
+        control.innerHTML = `<img src="${item.icon}"> <span class="op-sr">${item.title}</span>`;
+        control.addEventListener('click', item.click);
+        this.getContainer().appendChild(control);
+    }
+
+    /**
+     *
+     *
+     * @private
+     * @param {ControlItem} item
+     * @memberof Controls
+     */
+    private _destroyCustomControl(item: ControlItem): void {
+        const key = item.title.toLowerCase().replace(' ', '-');
+        const control = this.getContainer().querySelector(`.op-controls__${key}`);
+        control.removeEventListener('click', item.click);
+        control.remove();
+    }
 }
 
 export default Controls;
diff --git a/src/js/interfaces/control-item.ts b/src/js/interfaces/control-item.ts
@@ -0,0 +1,14 @@
+/**
+ * Control item
+ *
+ * @description An object that stores the definition for custom controls
+ * @interface ControlItem
+ * @export
+ */
+export default interface ControlItem {
+    icon: string;
+    title: string;
+    position: string;
+    custom?: boolean;
+    click(): void;
+}