ovenplayer 0.10.49 → 0.10.51

package/src/js/view/engine/OvenTemplate.js

@@ -1,158 +1,158 @@
-/**
- * Created by hoho on 2018. 7. 19..
- */
-
-import Templates from "view/engine/Templates";
-import LA$ from 'utils/likeA$';
-import _ from "utils/underscore";
-
-/**
- * @brief   This is simple ui renderer. This returns onRendered callback, onDestroyed callback on Template. And this bind events for Templates.
- * @param   container  dom element or LA$ object
- * @param   templateName    templateName
- * @param   data    preload data
- * @param   events    Template's events.
- * @param   onRendered    This callback occurs after append template.
- * @param   onDestroyed    This callback occurs after destroyed template.
- * @param   isRoot
- *
- * */
-const OvenTemplate = function (container, templateName, playerConfig, data, events, onRendered, onDestroyed, isRoot) {
-
-    let $container = _.isElement(container) ? LA$(container) : container;
-    let $template;
-    let viewEvents = {};
-    let uiText = null;
-    let that = {};
-    that.data = data;
-    let createAndSelectElement = function (html) {
-        const newElement = document.createElement('div');
-        newElement.innerHTML = html;
-
-        $template = LA$(newElement.firstChild);
-
-        return newElement.firstChild;
-    }
-    if(playerConfig && playerConfig.systemText){
-        uiText = playerConfig.systemText.ui;
-    }
-    if (isRoot) {
-        $container.replace(createAndSelectElement(Templates[templateName + "Template"](uiText, data)));
-    } else {
-        $container.append(createAndSelectElement(Templates[templateName + "Template"](uiText, data)));
-    }
-
-    if (onRendered) {
-        onRendered($template, that);
-    }
-
-    Object.keys(events).forEach(eventString => {
-        let explodedText = eventString.split(" ");
-        let eventName = explodedText[0].replace(/ /gi, "");
-        let target = explodedText[1].replace(/ /gi, "");
-
-        let $target = "";
-
-        if(target === "document" || target === "window" || target === "body"){
-            $target = LA$(target);
-        }else{
-            $target = $template.find(target) || ($template.hasClass(target.replace(".","")) ? $template : null);
-        }
-
-
-        if (eventName && target && $target) {
-            let id = Object.keys(viewEvents).length++;
-
-            //because It retuns another data.
-            let wrappedFunc = function (event) {
-                return events[eventString](event, $template, that);
-            };
-            viewEvents[id] = {name: eventName, target: target, callback: wrappedFunc};
-
-            /*$template.get().addEventListener(eventName,function(evt){
-                var gtarget = evt.target;
-                while (gtarget!= null){
-                    if (gtarget.isEqualNode($target.get())){
-                        console.log("isEqual", gtarget, $target.get());
-                        wrappedFunc(evt);
-                        return;
-                    }
-                    gtarget = gtarget.parentElement;
-                }
-            }, true);*/
-
-            let eventOption = null;
-
-            if (eventName.indexOf('touch') > -1) {
-                eventOption = { passive: true };
-            }
-
-            //sometimes target is NodeList
-            let nodeLength = $target.get().length;
-
-            if(nodeLength > 1){
-                let nodeList = $target.get();
-                for(let i = 0; i < nodeLength; i ++){
-                    nodeList[i].addEventListener(eventName, wrappedFunc, eventOption);
-                }
-                //IE NodeList doesn't have forEach. It's wack.
-                //$target.get().forEach(function($item){
-                //    $item.addEventListener(eventName, wrappedFunc);
-                //});
-            }else{
-                $target.get().addEventListener(eventName, wrappedFunc, eventOption);
-            }
-
-
-        } else {
-            return false;
-        }
-    });
-
-    that.destroy = function () {
-        Object.keys(viewEvents).forEach(id => {
-            let event = viewEvents[id];
-            let $target = "";
-
-            if(event.target === "document" || event.target === "window" ||  event.target === "body"){
-                $target = LA$(event.target);
-            }else{
-                $target = $template.find(event.target) || ($template.hasClass(event.target.replace(".","")) ? $template : null);
-            }
-
-            //sometimes target is NodeList
-            let nodeLength = $target.get().length;
-            if(nodeLength > 1){
-                let nodeList = $target.get();
-                for(let i = 0; i < nodeLength; i ++){
-                    nodeList[i].removeEventListener(event.name, event.callback);
-                }
-                /*$target.get().forEach(function($item){
-                    $item.removeEventListener(event.name, event.callback);
-                });*/
-            }else{
-                $target.get().removeEventListener(event.name, event.callback);
-            }
-
-            delete viewEvents[id];
-        });
-
-        if($template){
-            if(isRoot){
-                $template.removeChild();
-                $template.removeAttribute("class");
-            }else{
-                $template.remove();
-            }
-        }
-
-        if (onDestroyed) {
-            onDestroyed(that);
-        }
-    };
-    return that;
-
-};
-
-
-export default OvenTemplate;
+/**
+ * Created by hoho on 2018. 7. 19..
+ */
+
+import Templates from "view/engine/Templates";
+import LA$ from 'utils/likeA$';
+import _ from "underscore";
+
+/**
+ * @brief   This is simple ui renderer. This returns onRendered callback, onDestroyed callback on Template. And this bind events for Templates.
+ * @param   container  dom element or LA$ object
+ * @param   templateName    templateName
+ * @param   data    preload data
+ * @param   events    Template's events.
+ * @param   onRendered    This callback occurs after append template.
+ * @param   onDestroyed    This callback occurs after destroyed template.
+ * @param   isRoot
+ *
+ * */
+const OvenTemplate = function (container, templateName, playerConfig, data, events, onRendered, onDestroyed, isRoot) {
+
+    let $container = _.isElement(container) ? LA$(container) : container;
+    let $template;
+    let viewEvents = {};
+    let uiText = null;
+    let that = {};
+    that.data = data;
+    let createAndSelectElement = function (html) {
+        const newElement = document.createElement('div');
+        newElement.innerHTML = html;
+
+        $template = LA$(newElement.firstChild);
+
+        return newElement.firstChild;
+    }
+    if(playerConfig && playerConfig.systemText){
+        uiText = playerConfig.systemText.ui;
+    }
+    if (isRoot) {
+        $container.replace(createAndSelectElement(Templates[templateName + "Template"](uiText, data)));
+    } else {
+        $container.append(createAndSelectElement(Templates[templateName + "Template"](uiText, data)));
+    }
+
+    if (onRendered) {
+        onRendered($template, that);
+    }
+
+    Object.keys(events).forEach(eventString => {
+        let explodedText = eventString.split(" ");
+        let eventName = explodedText[0].replace(/ /gi, "");
+        let target = explodedText[1].replace(/ /gi, "");
+
+        let $target = "";
+
+        if(target === "document" || target === "window" || target === "body"){
+            $target = LA$(target);
+        }else{
+            $target = $template.find(target) || ($template.hasClass(target.replace(".","")) ? $template : null);
+        }
+
+
+        if (eventName && target && $target) {
+            let id = Object.keys(viewEvents).length++;
+
+            //because It retuns another data.
+            let wrappedFunc = function (event) {
+                return events[eventString](event, $template, that);
+            };
+            viewEvents[id] = {name: eventName, target: target, callback: wrappedFunc};
+
+            /*$template.get().addEventListener(eventName,function(evt){
+                var gtarget = evt.target;
+                while (gtarget!= null){
+                    if (gtarget.isEqualNode($target.get())){
+                        console.log("isEqual", gtarget, $target.get());
+                        wrappedFunc(evt);
+                        return;
+                    }
+                    gtarget = gtarget.parentElement;
+                }
+            }, true);*/
+
+            let eventOption = null;
+
+            if (eventName.indexOf('touch') > -1) {
+                eventOption = { passive: true };
+            }
+
+            //sometimes target is NodeList
+            let nodeLength = $target.get().length;
+
+            if(nodeLength > 1){
+                let nodeList = $target.get();
+                for(let i = 0; i < nodeLength; i ++){
+                    nodeList[i].addEventListener(eventName, wrappedFunc, eventOption);
+                }
+                //IE NodeList doesn't have forEach. It's wack.
+                //$target.get().forEach(function($item){
+                //    $item.addEventListener(eventName, wrappedFunc);
+                //});
+            }else{
+                $target.get().addEventListener(eventName, wrappedFunc, eventOption);
+            }
+
+
+        } else {
+            return false;
+        }
+    });
+
+    that.destroy = function () {
+        Object.keys(viewEvents).forEach(id => {
+            let event = viewEvents[id];
+            let $target = "";
+
+            if(event.target === "document" || event.target === "window" ||  event.target === "body"){
+                $target = LA$(event.target);
+            }else{
+                $target = $template.find(event.target) || ($template.hasClass(event.target.replace(".","")) ? $template : null);
+            }
+
+            //sometimes target is NodeList
+            let nodeLength = $target.get().length;
+            if(nodeLength > 1){
+                let nodeList = $target.get();
+                for(let i = 0; i < nodeLength; i ++){
+                    nodeList[i].removeEventListener(event.name, event.callback);
+                }
+                /*$target.get().forEach(function($item){
+                    $item.removeEventListener(event.name, event.callback);
+                });*/
+            }else{
+                $target.get().removeEventListener(event.name, event.callback);
+            }
+
+            delete viewEvents[id];
+        });
+
+        if($template){
+            if(isRoot){
+                $template.removeChild();
+                $template.removeAttribute("class");
+            }else{
+                $template.remove();
+            }
+        }
+
+        if (onDestroyed) {
+            onDestroyed(that);
+        }
+    };
+    return that;
+
+};
+
+
+export default OvenTemplate;

package/src/js/view/global/PanelManager.js

@@ -1,47 +1,47 @@
-/**
- * Created by hoho on 2018. 7. 26..
- */
-import _ from "utils/underscore";
-
-let settingPanelList = [];
-
-const PanelManager = function(){
-    const that = {};
-
-    let refreshFront = function(){
-        for(let i = 0 ; i < settingPanelList.length; i ++){
-            settingPanelList[i].data.setFront(false);
-        }
-        if(settingPanelList.length ){
-            settingPanelList[settingPanelList.length - 1].data.setFront(true);
-        }
-    };
-    that.clear = () => {
-        //clear all SettingPanelTemplate
-
-        _.each(settingPanelList, function(settingPanel){
-            settingPanel.destroy();
-        });
-        settingPanelList = [];
-        refreshFront();
-    };
-
-    that.removeLastItem = () =>{
-        let last = settingPanelList.pop();
-        last.destroy();
-        refreshFront();
-    };
-
-    that.add = (settingPanelObject) => {
-        settingPanelList.push(settingPanelObject);
-        refreshFront();
-    };
-
-    that.size = () => {
-        return settingPanelList.length;
-    };
-
-    return that;
-};
-
-export default PanelManager;
+/**
+ * Created by hoho on 2018. 7. 26..
+ */
+import _ from "underscore";
+
+let settingPanelList = [];
+
+const PanelManager = function(){
+    const that = {};
+
+    let refreshFront = function(){
+        for(let i = 0 ; i < settingPanelList.length; i ++){
+            settingPanelList[i].data.setFront(false);
+        }
+        if(settingPanelList.length ){
+            settingPanelList[settingPanelList.length - 1].data.setFront(true);
+        }
+    };
+    that.clear = () => {
+        //clear all SettingPanelTemplate
+
+        _.each(settingPanelList, function(settingPanel){
+            settingPanel.destroy();
+        });
+        settingPanelList = [];
+        refreshFront();
+    };
+
+    that.removeLastItem = () =>{
+        let last = settingPanelList.pop();
+        last.destroy();
+        refreshFront();
+    };
+
+    that.add = (settingPanelObject) => {
+        settingPanelList.push(settingPanelObject);
+        refreshFront();
+    };
+
+    that.size = () => {
+        return settingPanelList.length;
+    };
+
+    return that;
+};
+
+export default PanelManager;

package/src/stylesheet/ovenplayer.less

@@ -109,7 +109,7 @@
   zoom: 1 !important;
   width: 100%;
   display: block;
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   background-color: #000;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -193,6 +193,10 @@
     .op-caption-text-container {
       bottom: 25px;
     }
+
+    .op-caption-cue:not(.op-caption-cue-positioned) {
+      bottom: 25px;
+    }
   }
 
   &.op-no-controls {
@@ -1588,25 +1592,52 @@ i.op-con {
 
   .op-caption-text-container {
     position: absolute;
-    bottom: 60px;
+    top: 0;
+    left: 0;
     width: 100%;
-    padding: 0 12px;
-    text-align: center;
-    -moz-transition: bottom .25s cubic-bezier(0.0, 0.0, 0.2, 1);
-    -webkit-transition: bottom .25s cubic-bezier(0.0, 0.0, 0.2, 1);
-    transition: bottom .25s cubic-bezier(0.0, 0.0, 0.2, 1);
+    height: 100%;
+    overflow: visible;
+    pointer-events: none;
+
+    .op-caption-cue {
+      position: absolute;
+      bottom: 60px;
+      width: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      text-align: center;
+      padding: 0 8%;
+      -moz-transition: bottom .25s cubic-bezier(0.0, 0.0, 0.2, 1);
+      -webkit-transition: bottom .25s cubic-bezier(0.0, 0.0, 0.2, 1);
+      transition: bottom .25s cubic-bezier(0.0, 0.0, 0.2, 1);
+
+      &.op-caption-cue-positioned {
+        bottom: auto;
+        padding: 0;
+        transition: none;
+      }
+    }
 
     .op-caption-text {
+      display: inline-block;
       color: #fff;
-      font-size: 1em;
-      line-height: 1.2em;
-      text-shadow: 2px 2px 2px gray;
-      padding: .1em .3em;
+      font-size: 1.5em;
+      line-height: 1.5em;
+      font-weight: 400;
+      text-shadow: none;
+      background: rgba(8, 8, 8, 0.75);
+      padding: .25em .6em;
+      border-radius: .25em;
       user-select: none;
-      word-break: break-word;
+      word-break: keep-all;
+      overflow-wrap: break-word;
       white-space: pre-line;
       border: none;
-      background: none;
+
+      &:empty {
+        background: none;
+        padding: 0;
+      }
     }
   }
 }
@@ -1634,8 +1665,8 @@ i.op-con {
   font-size: 14px;
 
   .op-caption-text {
-    font-size: 2em;
-    line-height: 2em;
+    font-size: 2em;     /* 14px × 2 = 28px */
+    line-height: 1.5em;
   }
 
 }
@@ -1644,8 +1675,8 @@ i.op-con {
   font-size: 12px;
 
   .op-caption-text {
-    font-size: 1.4em;
-    line-height: 1.4em;
+    font-size: 1.75em;  /* 12px × 1.75 = 21px */
+    line-height: 1.5em;
   }
 }
 
@@ -1653,8 +1684,8 @@ i.op-con {
   font-size: 10px;
 
   .op-caption-text {
-    font-size: 1.4em;
-    line-height: 1.4em;
+    font-size: 1.6em;   /* 10px × 1.6 = 16px */
+    line-height: 1.5em;
   }
 
   .op-playlist {
@@ -1681,8 +1712,8 @@ i.op-con {
   }
 
   .op-caption-text {
-    font-size: 1.4em;
-    line-height: 1.4em;
+    font-size: 1.3em;   /* 10px × 1.3 = 13px */
+    line-height: 1.5em;
   }
 
   .op-playlist {