From: Stephen Cameron Date: Fri, 2 Jun 2017 16:39:21 +0000 (+0200) Subject: Remove debug messages and re-instate some code that went missing during earlier mergi... X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=26eba3c62e86877bfccff515536037f3b1ae0280;p=fluidbook-html5.git Remove debug messages and re-instate some code that went missing during earlier merging. WIP #897 @1 --- diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index 76b87bf2..66490247 100644 --- a/js/libs/fluidbook/fluidbook.links.js +++ b/js/libs/fluidbook/fluidbook.links.js @@ -65,9 +65,8 @@ FluidbookLinks.prototype = { }, 1000); } setTimeout(function () { - console.info('initVideos called from fluidbook.links'); $this.fluidbook.initVideos(); - }, 1000); + }, 200); $(fluidbook).trigger('fluidbooklinksready'); }, animateLinks: function () { diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js index 560c559a..2932b6d6 100644 --- a/js/libs/fluidbook/fluidbook.menu.js +++ b/js/libs/fluidbook/fluidbook.menu.js @@ -41,7 +41,7 @@ FluidbookMenu.prototype = { } }, __openView: function (view, param1, param2, callback) { - console.log('__openView(' + view + ',' + param1 + ',' + param2 + ')'); + //console.log('__openView(' + view + ',' + param1 + ',' + param2 + ')'); var $this = this; var camelView = view.charAt(0).toUpperCase() + view.substr(1); @@ -93,7 +93,7 @@ FluidbookMenu.prototype = { var from = {y: -200, opacity: 0}; var to = { y: 0, opacity: 1, onComplete: function () { - console.log('end opening view'); + //console.log('end opening view'); callback(); $this.fluidbook.hideLoader(); resize(); diff --git a/js/libs/fluidbook/fluidbook.support.js b/js/libs/fluidbook/fluidbook.support.js index 71b79faf..0f8cd733 100644 --- a/js/libs/fluidbook/fluidbook.support.js +++ b/js/libs/fluidbook/fluidbook.support.js @@ -23,7 +23,7 @@ function FluidbookSupport(fluidbook) { } else { this.resolution = window.resolution; } - console.log('Images resolution :: ' + this.resolution); + //console.log('Images resolution :: ' + this.resolution); this.isMobile = isMobile(); this.SVG = Modernizr.svg && this.fluidbook.datas.mobileIconVector; diff --git a/js/libs/fluidbook/fluidbook.video.js b/js/libs/fluidbook/fluidbook.video.js index 21db9dad..5657ecde 100644 --- a/js/libs/fluidbook/fluidbook.video.js +++ b/js/libs/fluidbook/fluidbook.video.js @@ -4,8 +4,6 @@ function FluidbookVideo(fluidbook) { this.players = {}; - console.info('**** SETUP FluidbookVideo module ****'); - $(fluidbook).on('changePage', function (e, page) { $this.removeAllVideos(); }); @@ -95,11 +93,11 @@ FluidbookVideo.prototype = { html, player; - fb('Initialising video ID: ' + id); + //fb('Initialising video ID: ' + id); // Player might be active but not visible so we need to dispose of it before re-initialising the element if (videojs.players[id]) { - fb(id + ' player already active. Disposing...'); + //fb(id + ' player already active. Disposing...'); videojs(id).dispose(); } @@ -170,19 +168,40 @@ FluidbookVideo.prototype = { player = videojs(id, setup); player.ready(function() { - fb(id + ' player is ready'); + //fb(id + ' player is ready'); $this.resizeControls(); // Make sure player controls are the right size if (fluidbook.video.players[id]) { - fb('found saved settings for player ID ' + id); + //fb('found saved settings for player ID ' + id); var settings = fluidbook.video.players[id]; - console.log(settings); + //console.log(settings); + + // In the case of autoplay videos, we don't want the autoplay to fire + // more than once (ie. never after we have these settings reccorded) + // It interferes with play/pausing + player.autoplay(false); // Restore settings player.volume(settings.volume); player.muted(settings.muted); player.currentTime(settings.currentTime); + + // Start player to go to current position - necessary even if it will be paused immediately + setTimeout(function() { player.play(); }, 50); + + player.one('play', function() { + //fb('Player has started playing... ID: ' + id); + // Handle pause in here if needed.. Better than using the timeout... + + if (settings.paused) { + //fb(id + ' should be paused'); + setTimeout(function() { player.pause(); }, 100); + } + + }); + + player.play(); // Start player to go to current position - necessary even if it will be paused immediately if (settings.paused) { player.pause(); @@ -204,7 +223,15 @@ FluidbookVideo.prototype = { player.on('pause', function() { fb(id + ' player paused'); - // Todo: show/hide play button: http://stackoverflow.com/a/25296575 + + // Show play button (ref: http://stackoverflow.com/a/25296575) + this.bigPlayButton.show(); + + // Now the issue is that we need to hide it again if we start playing + // So every time we do this, we can create a one-time listener for play events. + player.one('play', function() { + this.bigPlayButton.hide(); + }); }); // player.on('fullscreenchange', function() { @@ -217,8 +244,6 @@ FluidbookVideo.prototype = { openVideo: function(link) { if (link === undefined) return false; - console.info('openVideo...'); - link = $(link); var popup = $('#videoPopup'), @@ -233,7 +258,7 @@ FluidbookVideo.prototype = { path, poster; - console.info(width, height, name, loop); + //console.info(width, height, name, loop); if (fluidbook.datas.mobileVideosPath == '') { path = "data/links/" + name; @@ -272,7 +297,7 @@ FluidbookVideo.prototype = { } html += 'src="' + path + '.' + this.preferedFormat + '">'; - console.log('Resulting HTML:', html); + //console.log('Resulting HTML:', html); popup.html(html); videojs($('#videoPopup video')); @@ -320,7 +345,7 @@ FluidbookVideo.prototype = { }; } - fb('Disposing video ID ' + id); + //fb('Disposing video ID ' + id); player.dispose(); }); }, diff --git a/style/videojs/videojs.less b/style/videojs/videojs.less index 97735bef..a4f81a17 100644 --- a/style/videojs/videojs.less +++ b/style/videojs/videojs.less @@ -30,7 +30,7 @@ /* The font size is what makes the big play button...big. All width/height values use ems, which are a multiple of the font size. If the .video-js font-size is 10px, then 3em equals 30px.*/ - font-size: 10em; + font-size: 3em; /* We're using SCSS vars here because the values are used in multiple places. Now that font size is set, the following em values will be a multiple of the new font size. If the font-size is 3em (30px), then setting any of @@ -39,19 +39,34 @@ line-height: 1.5em; height: 1.5em; width: 3em; - background-color: transparent !important; opacity: 0.6; /* 0.06666em = 2px default */ border: none; /* 0.3em = 9px default */ - border-radius: 0.3em; + border-radius: 0; /* Align center */ left: 50%; top: 50%; margin-left: -1.5em; margin-top: -0.75em; - //display: block; + + background-color: transparent !important; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.65 595.81'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EAsset 1%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_2-2' data-name='Layer 2'%3E%3Cpath class='cls-1' d='M28.21,2.49l490.88,279a18.88,18.88,0,0,1,0,32.83l-490.88,279A18.88,18.88,0,0,1,0,576.9v-558A18.88,18.88,0,0,1,28.21,2.49Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + + .vjs-icon-placeholder { + display: none; + } } + +// Allow play button to be redisplayed when video is paused +.vjs-paused.vjs-has-started .vjs-big-play-button { + display: block; +} + + .vjs-fluidbook-skin .vjs-big-play-button:focus, .vjs-fluidbook-skin .vjs-big-play-button:hover { opacity: 1; outline: none;