From: Stephen Cameron Date: Fri, 2 Jun 2017 09:55:08 +0000 (+0200) Subject: Commit files in preparation for merge with menus branch. WIP. X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=498da9cb6a8c4e937e9c2cfca906d4199a50063a;p=fluidbook-html5.git Commit files in preparation for merge with menus branch. WIP. --- diff --git a/_index.html b/_index.html index 8cfd2bdc..786bd25e 100644 --- a/_index.html +++ b/_index.html @@ -18,7 +18,7 @@ - +

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index 085b21b2..b799880f 100644 --- a/js/libs/fluidbook/fluidbook.links.js +++ b/js/libs/fluidbook/fluidbook.links.js @@ -62,7 +62,7 @@ FluidbookLinks.prototype = { if (this.fluidbook.datas.linkBlinkTime > 0 && this.fluidbook.datas.mobileLinksRevealAnim) { setTimeout(function () { $this.animateLinks(); - }, 1000); + }, 200); } setTimeout(function () { console.info('initVideos called from fluidbook.links'); diff --git a/js/libs/fluidbook/fluidbook.video.js b/js/libs/fluidbook/fluidbook.video.js index 218519a7..e1284ec4 100644 --- a/js/libs/fluidbook/fluidbook.video.js +++ b/js/libs/fluidbook/fluidbook.video.js @@ -180,14 +180,33 @@ FluidbookVideo.prototype = { var settings = fluidbook.video.players[id]; 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); - player.play(); // Start player to go to current position - necessary even if it will be paused immediately - if (settings.paused) { - player.pause(); - } + + // Start player to go to current position - necessary even if it will be paused immediately + setTimeout(function() { player.play(); }, 100); + + // ToDo: try setting a single (.one(...)) event handler for the "play" event + + 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(); }, 200); + } + + }); + + // var playPromise = player.play(); // if (settings.paused) { @@ -205,7 +224,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() { @@ -348,8 +375,8 @@ FluidbookVideo.prototype = { $('.video-js').each(function() { var id = $(this).attr('id'); - // When the player is in fullscreen mode, we don't want to have the controls scaled - if (videojs(id) && videojs(id).isFullscreen()) { + // When the player is in fullscreen mode or view popup, we don't want to have the controls scaled + if (videojs(id) && (videojs(id).isFullscreen() || $('body').hasClass('view'))) { $(this).attr('style', ''); // Clear scaling for fullscreen player } else { $(this).css('fontSize', 12 / fluidbook.resize.bookScale); diff --git a/style/videojs/videojs.css b/style/videojs/videojs.css index 4e25bdf8..3b729b4f 100644 --- a/style/videojs/videojs.css +++ b/style/videojs/videojs.css @@ -1417,7 +1417,7 @@ video::-webkit-media-text-track-display { /* 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 @@ -1426,17 +1426,27 @@ video::-webkit-media-text-track-display { 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; + 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-fluidbook-skin .vjs-big-play-button .vjs-icon-placeholder { + display: none; +} +.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 { diff --git a/style/videojs/videojs.less b/style/videojs/videojs.less index 2b2ceb9e..314821af 100644 --- a/style/videojs/videojs.less +++ b/style/videojs/videojs.less @@ -24,7 +24,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 @@ -33,19 +33,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;