ovenplayer 0.10.2 → 0.10.3-3.alpha-2

package/src/js/view/view.js

@@ -8,6 +8,7 @@ import PanelManager from "view/global/PanelManager";
 import ContextPanel from 'view/components/helpers/contextPanel';
 import LA$ from 'utils/likeA$';
 import ResizeSensor from "utils/resize-sensor";
+import getTouchSection from "utils/getTouchSection";
 import {
     READY,
     DESTROY,
@@ -30,11 +31,12 @@ import {
 import '../../stylesheet/ovenplayer.less';
 
 const View = function($container){
-    let viewTemplate = "", controls = "", helper = "", $playerRoot, contextPanel = "", api = "", autoHideTimer = "", playerState = STATE_IDLE;
+    let viewTemplate = "", controls = "", helper = "", $playerRoot, contextPanel = "", api = null, autoHideTimer = "", playerState = STATE_IDLE;
     let isShiftPressed = false;
     let panelManager = PanelManager();
     let screenSize = "";
     let currentPlayerSize = "";
+    let resizeSensor = null;
 
     let that = {};
 
@@ -136,7 +138,7 @@ const View = function($container){
         viewTemplate = template;
         calcPlayerWidth();
         currentPlayerSize = screenSize;
-        new ResizeSensor($playerRoot.get(), function() {
+        resizeSensor = new ResizeSensor($playerRoot.get(), function() {
 
             $playerRoot.removeClass("large");
             $playerRoot.removeClass("medium");
@@ -154,6 +156,11 @@ const View = function($container){
 
     };
     const onDestroyed = function(){
+        if(resizeSensor) {
+            resizeSensor.detach();
+            resizeSensor = null;
+        }
+
         if(helper){
             helper.destroy();
             helper = null;
@@ -192,9 +199,27 @@ const View = function($container){
             }
         },
         "dblclick .ovenplayer" : function(event, $current, template){
-
             if (api) {
+                    const touchPosition = getTouchSection(event);
+                    const currentPosition = api.getPosition();
+                    const tapToSeekEnabled = api.getConfig().doubleTapToSeek;
+
+                    // seek back 10s
+                    if (tapToSeekEnabled && touchPosition == 'left') {
+                        const newPosition = Math.max(currentPosition - 10, 0);
+                        OvenPlayerConsole.log(`Seeking to ${newPosition}`);
+                        api.seek(newPosition);
+                    }
+
+                    // seek forward 10s
+                    if (tapToSeekEnabled && touchPosition === 'right') {
+                        const newPosition = Math.min(currentPosition + 10, api.getDuration());
+                        OvenPlayerConsole.log(`Seeking to ${newPosition}`);
+                        api.seek(newPosition);
+                    }
 
+                    if (touchPosition === 'middle' || !tapToSeekEnabled) {
+                        OvenPlayerConsole.log(`Toggling fullscreen`);
                 if (api.getConfig().expandFullScreenUI && api.toggleFullScreen) {
 
                     if(!(LA$(event.target).closest(".op-controls-container") || LA$(event.target).closest(".op-setting-panel") )){
@@ -202,6 +227,7 @@ const View = function($container){
                     }
                 }
             }
+            }
         },
         //For iOS safari
         "touchstart .ovenplayer" : function(event, $current, template){
@@ -311,11 +337,24 @@ const View = function($container){
     that.setApi = (playerInstance) => {
         api = playerInstance;
 
+        api.getContainerElement = () => {
+            return $playerRoot.get();
+        };
+
+        api.getContainerId = () => {
+            return $playerRoot.get().id;
+        };
+
         api.on(READY, function(data) {
 
-            if(!controls && showControlBar){
+            if(!controls){
                 controls = Controls($playerRoot.find(".op-ui"), playerInstance);
             }
+
+            if (!showControlBar) {
+                $playerRoot.addClass("op-no-controls");
+            }
+
         });
 
         api.on(ERROR, function(error) {
@@ -353,16 +392,7 @@ const View = function($container){
         let showControlBar = api.getConfig() && api.getConfig().controls;
 
         helper = Helpers($playerRoot.find(".op-ui"), playerInstance);
-        if(showControlBar){
-            controls = Controls($playerRoot.find(".op-ui"), playerInstance);
-        } else {
-
-            // to use full screen api
-            if (api.getConfig() && api.getConfig().expandFullScreenUI) {
-                controls = Controls($playerRoot.find(".op-ui"), playerInstance);
-                controls.destroy();
-            }
-        }
+        controls = Controls($playerRoot.find(".op-ui"), playerInstance);
 
         let aspectRatio = api.getConfig().aspectRatio;
 
@@ -378,6 +408,15 @@ const View = function($container){
                 $playerRoot.find('.op-ratio').css('padding-bottom', ratio + '%');
             }
         }
+
+        api.showControls = function (show) {
+            if (show) {
+                $playerRoot.removeClass("op-no-controls");
+                setHide(false, true);
+            } else {
+                $playerRoot.addClass("op-no-controls");
+            }
+        };
     };
 
 

package/src/js/view/viewTemplate.js

@@ -2,15 +2,15 @@
  * Created by hoho on 2018. 7. 20..
  */
 
-const ViewTemplate = function(uiText, id){
-    return `<div class="ovenplayer op-wrapper" tabindex="-1" aria-label="" id="${id}">` +
-        `<div class="op-ratio"></div>` +
-        `<div class="op-player op-clear">`+
-            `<div class="op-core-ui-wrapper op-clear">` +
-                `<div class="op-media-element-container op-clear" data-parent-id="${id}"></div>` +
-                `<div class="op-ui op-clear"></div>`+
+const ViewTemplate = function (uiText, id) {
+    return `<div class="ovenplayer op-wrapper" tabindex="-1" ${id ? `id = "${id}"` : ``}>` +
+            `<div class="op-ratio"></div>` +
+            `<div class="op-player op-clear">` +
+                `<div class="op-core-ui-wrapper op-clear">` +
+                `<div class="op-media-element-container op-clear"></div>` +
+                `<div class="op-ui op-clear"></div>` +
+            `</div>` +
             `</div>` +
-        `</div>` +
         `</div>`
 };
 export default ViewTemplate;