ovenplayer 0.10.46 → 0.10.48

package/src/js/view/components/helpers/contextPanel.js

@@ -1,38 +1,44 @@
-/**
- * Created by hoho on 2018. 8. 1..
- */
-import OvenTemplate from 'view/engine/OvenTemplate';
-import LA$ from 'utils/likeA$';
-
-const ContextPanel = function($container, api, position){
-    const $root = LA$(api.getContainerElement());
-
-    const onRendered = function($current, template){
-        const panelWidth = $current.width();
-        const panelHeight = $current.height();
-
-        const x = Math.min(position.pageX - $root.offset().left, $root.width() - panelWidth);
-        const y = Math.min(position.pageY - $root.offset().top, $root.height() - panelHeight);
-
-        $current.css("left" , x + "px");
-        $current.css("top" , y + "px");
-    };
-    const onDestroyed = function(){
-        //Do nothing.
-    };
-    const events = {
-        "click .op-context-item" : function(event, $current, template){
-            event.preventDefault();
-
-            window.open(
-                'https://github.com/AirenSoft/OvenPlayer',
-                '_blank'
-            );
-        }
-    };
-
-    return OvenTemplate($container, "ContextPanel", api.getConfig(), position, events, onRendered, onDestroyed );
-
-};
-
-export default ContextPanel;
+/**
+ * Created by hoho on 2018. 8. 1..
+ */
+import { CONTEXT_ITEM_CLICKED } from 'api/constants';
+import LA$ from 'utils/likeA$';
+import OvenTemplate from 'view/engine/OvenTemplate';
+
+const ContextPanel = function($container, api, position){
+    const $root = LA$(api.getContainerElement());
+
+    const onRendered = function($current, template){
+        const panelWidth = $current.width();
+        const panelHeight = $current.height();
+
+        const x = Math.min(position.pageX - $root.offset().left, $root.width() - panelWidth);
+        const y = Math.min(position.pageY - $root.offset().top, $root.height() - panelHeight);
+
+        $current.css("left" , x + "px");
+        $current.css("top" , y + "px");
+    };
+    const onDestroyed = function(){
+        //Do nothing.
+    };
+    const events = {
+        "click .op-context-item" : function(event, $current, template){
+            event.preventDefault();
+            const item = $current.find('.op-context-item').get();
+            const contextItem = Array.from((item instanceof NodeList) ? item : [item], LA$).find(
+                (item) => item.contains(event.target) || item.get() == event.target
+            );
+            const ident = contextItem?.attr('id');
+            if (ident == 'context-player-about') {
+                window.open('https://github.com/OvenMediaLabs/OvenPlayer', '_blank');
+                return;
+            }
+            api.getProvider().trigger(CONTEXT_ITEM_CLICKED, ident);
+        },
+    };
+
+    return OvenTemplate($container, "ContextPanel", api.getConfig(), api.getConfig().contextItems, events, onRendered, onDestroyed );
+
+};
+
+export default ContextPanel;

package/src/js/view/components/helpers/contextPanelTemplate.js

@@ -1,10 +1,20 @@
-import {version} from "version";
-export default (uiText) => {
-    return (
-        `<div class="op-context-panel animated fadeIn">` +
-            `<div class="op-context-item" tabindex="1">` +
-                `<span class="op-context-item-text">${uiText.context} ${version}</span>` +
-            `</div>`+
-        `</div>`
-    );
+import {version} from "version";
+export default (uiText, items=[]) => {
+    let index = 1;
+    const contextEl = (item) => {
+        const id = item.id ?? `context-item-${index}`;
+        return (
+            `<div id="${id}" class="op-context-item" tabindex="${index++}">` +
+              `<span class="op-context-item-text">${item.label}</span>` +
+            `</div>`
+        );
+    };
+    return (
+        `<div class="op-context-panel animated fadeIn">` +
+          `<div id="context-player-about" class="op-context-item" tabindex="1">` +
+            `<span class="op-context-item-text">${uiText.context} ${version}</span>` +
+          `</div>` +
+          items.map(contextEl).join('') +
+        `</div>`
+    );
 };