From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 16 Dec 2020 19:56:42 +0000 (+0100)
Subject: wip #4128 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=6ed559d59dbffb9d1a7435ce06e2912910cda81d;p=fluidbook-html5.git

wip #4128 @2
---

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index bddcc7c5..b194e73f 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -258,7 +258,7 @@ Fluidbook.prototype = {
             return;
         }
         $(doublePage).find('.' + position).remove();
-        var page = '<div class="page ' + position + '" id="page_' + pageNr + '" data-page="' + pageNr + '"><div class="background" page="' + pageNr + '"></div><div class="texts" highlight=""></div><div class="clinks"></div><div class="shade"></div></div>';
+        var page = '<div class="page ' + position + '" id="page_' + pageNr + '" data-page="' + pageNr + '"><div class="background" page="' + pageNr + '"></div><div class="ctlinks"></div><div class="texts" highlight=""></div><div class="clinks"></div><div class="shade"></div></div>';
         $(doublePage).append(page);
     },
     hidePage: function (position) {
@@ -273,10 +273,7 @@ Fluidbook.prototype = {
         return false;
     },
     initVideos: function () {
-        var $this = this;
-        $(".videoContainer").each(function () {
-            $this.video.initVideo(this);
-        });
+        this.video.initVideos();
     },
     getNextOffset: function () {
         var offset = 2;
diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 19871357..9b814d67 100644
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -311,6 +311,7 @@ FluidbookLoader.prototype = {
             }
 
             $(page).children('.clinks').html(this.fluidbook.settings.clinks[pageNr]);
+            $(page).children('.ctlinks').html(this.fluidbook.settings.ctlinks[pageNr]);
             callback();
             return;
         }
@@ -325,6 +326,7 @@ FluidbookLoader.prototype = {
         this.loadDatas(pageNr, function () {
             $(page).addClass(position);
             $(page).children('.clinks').html($this.fluidbook.settings.clinks[pageNr]);
+            $(page).children('.ctlinks').html($this.fluidbook.settings.ctlinks[pageNr]);
             callback();
         });
     },
diff --git a/js/libs/fluidbook/fluidbook.video.js b/js/libs/fluidbook/fluidbook.video.js
index 578aa774..6ea4590e 100644
--- a/js/libs/fluidbook/fluidbook.video.js
+++ b/js/libs/fluidbook/fluidbook.video.js
@@ -77,6 +77,15 @@ function FluidbookVideo(fluidbook) {
 }
 
 FluidbookVideo.prototype = {
+
+    initVideos: function () {
+        var $this = this;
+
+        $(".videoContainer").each(function () {
+            $this.initVideo(this);
+        });
+    },
+
     initVideo: function (e) {
 
         var $this = this;
@@ -130,6 +139,10 @@ FluidbookVideo.prototype = {
             poster = path + '.jpg';
         }
 
+        if ($(e).hasClass('integration-background_texts')) {
+            poster = false;
+        }
+
         html = '<video class="video-js vjs-fluidbook-skin"';
 
         if (poster) {
@@ -149,6 +162,8 @@ FluidbookVideo.prototype = {
 
         if (controls == '1') {
             html += 'controls ';
+        } else {
+            html += 'disablePictureInPicture ';
         }
 
         if (loop == '1') {
@@ -310,7 +325,7 @@ FluidbookVideo.prototype = {
         poster = path + '.jpg';
 
         // Build <video> element
-        html = '<video class="video-js" poster="' + poster + '" ';
+        html = '<video class="video-js" disablePictureInPicture poster="' + poster + '" ';
 
         if (!isNaN(width)) {
             html += 'data-width="' + width + '" ';
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 79cb20d7..1ed72caf 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -456,8 +456,17 @@ body, html {
   top: 0px;
   background-color: transparent;
 
+  .clinks, .ctlinks {
+    .link {
+      position: absolute;
+      pointer-events: none;
+    }
+  }
+
   .clinks {
-    position: relative;
+    position: absolute;
+    top: 0px;
+    left: 0px;
     z-index: 3;
   }
 
@@ -465,6 +474,14 @@ body, html {
     position: absolute;
     top: -1px;
     left: -1px;
+    z-index: 2;
+  }
+
+  .ctlinks {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 1;
   }
 
   .background {
@@ -473,6 +490,7 @@ body, html {
     left: 0px;
     width: 100%;
     height: 100%;
+    z-index: 0;
   }
 
   &.right {
@@ -1527,7 +1545,8 @@ html.ios body.portrait #interface {
     .content {
       overflow-x: hidden;
     }
-    .ps__rail-x{
+
+    .ps__rail-x {
       display: none;
     }
   }
@@ -1660,7 +1679,7 @@ html.ios body.portrait #interface {
           width: @w;
           height: @h;
 
-          .pageholder{
+          .pageholder {
             max-height: @h;
           }
 
diff --git a/style/fluidbook.video.less b/style/fluidbook.video.less
index 20cef033..84ced045 100644
--- a/style/fluidbook.video.less
+++ b/style/fluidbook.video.less
@@ -31,4 +31,34 @@
 
 .macos.safari video.vjs-tech {
   opacity: 0.999;
+}
+
+.videoContainer.integration-background_texts {
+  transition: opacity 500ms;
+
+  .video-js {
+    transition: opacity 500ms;
+    opacity: 0;
+
+    &.vjs-waiting {
+      background: transparent;
+      opacity: 0;
+    }
+
+    &.vjs-has-started {
+      opacity: 1;
+    }
+  }
+
+  .vjs-loading-spinner {
+    display: none !important;
+  }
+
+  .vjs-tech {
+    object-fit: cover;
+  }
+}
+
+#links .videoContainer.integration-background_texts {
+  opacity: 0;
 }
\ No newline at end of file