Remove debug messages and re-instate some code that went missing during earlier mergi...

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 76b87bf20559cdf1d180052572691ffffe9f0e47..66490247c733f1c63b558a04fe0bf81a5fdd5987 100644 (file)
--- 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 560c559a9d2a2950ea3db8da162d485807a24ec4..2932b6d6e8fa086a30d3eb055499f32c6e34f7ff 100644 (file)
--- 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 71b79fafd0b4502b07fc205beb54351b18f0b266..0f8cd73322d6c28f43fe9e1a1898082558480e70 100644 (file)
--- 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 21db9dad782c227792678d9f7b1a77dfdb89c108..5657ecde025d6d938b165fc2fafb624e07b83996 100644 (file)
--- 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 + '"></video>';
 
-               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 97735bef4b89691b7cb6cec3f38f056a5cfc8206..a4f81a17b8c297723ccb5146b4146f2a611f050d 100644 (file)
--- 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;