new call layout

public/style.css

@@ -7558,9 +7558,11 @@ html {
     opacity: 1; } }
 
 .flipbook {
-  width: 100%;
-  height: 75vh;
-  overflow-y: visible; }
+  width: 99%;
+  height: 100%;
+  overflow-y: visible;
+  object-fit: contain;
+  transition: opacity .5s; }
 
 .book-flip-buttons {
   height: 100%; }
@@ -7572,13 +7574,9 @@ html {
   max-height: 15vh; }
 
 video {
-  margin-left: 5px;
-  margin-right: 5px;
   background-color: rgba(56, 181, 187, 0.19);
-  border-radius: 15px;
   border: solid 1px rgba(56, 181, 187, 0.3);
-  flex-basis: 100%;
-  max-width: 15vh; }
+  flex-basis: 100%; }
 
 .book-thumb {
   transition: all .2s;
@@ -7637,3 +7635,20 @@ video {
 
 .is-justify-centered {
   justify-content: center; }
+
+.video-side-bar {
+  height: calc(100vh - ( 5rem  )); }
+  .video-side-bar video {
+    width: 100%;
+    height: 50%;
+    object-fit: cover; }
+
+.book-view {
+  height: 100%;
+  position: relative; }
+
+.is-transparent {
+  opacity: 0; }
+
+.is-mirrored {
+  transform: scaleX(-1); }

resources/sass/main.scss

@@ -279,9 +279,11 @@ $sizes: (
 }
 // TODO: Remove this - make generic
 .flipbook {
-  width: 100%;
-  height: 75vh;
+  width: 99%;
+  height: 100%;
   overflow-y: visible;
+  object-fit: contain;
+  transition: opacity .5s;
 }
 .book-flip-buttons{
   height: 100%;
@@ -294,13 +296,13 @@ $sizes: (
 }
 
 video{
-  margin-left: 5px;
-  margin-right: 5px;
+  // margin-left: 5px;
+  // margin-right: 5px;
   background-color:rgba(56, 181, 187, 0.19);
-  border-radius: 15px;
+  // border-radius: 15px;
   border: solid 1px rgba(56, 181, 187, 0.30);
   flex-basis: 100%;
-  max-width: 15vh;
+  // max-width: 15vh;
 }
 
 .book-thumb{
@@ -371,3 +373,23 @@ video{
 .is-justify-centered{
   justify-content: center;
 }
+
+.video-side-bar{
+  height: calc(100vh - ( #{$navbar-height}  ) );
+  video{
+    width: 100%;
+    height: 50%;
+    object-fit: cover;
+  }
+}
+
+.book-view{
+  height: 100%;
+  position: relative;
+}
+.is-transparent{
+  opacity: 0;
+}
+.is-mirrored{
+  transform: scaleX(-1);
+}

resources/scripts/applications/home/components/flipbook/flipbook.cjs.js

@@ -389,6 +389,7 @@ var script = {
     }
   },
   mounted: function() {
+    var self;
     window.addEventListener('resize', this.onResize, {
       passive: true
     });
@@ -396,7 +397,11 @@ var script = {
     this.preloadImages();
     this.zoom = this.zooms_[0];
     this.goToPage(this.startPage);
-    return this.$emit('on-mounted', this);
+    self = this;
+    return setTimeout(function() {
+      self.onResize();
+      return self.$emit('on-mounted', self);
+    }, 1000);
   },
   beforeDestroy: function() {
     return window.removeEventListener('resize', this.onResize, {
@@ -418,7 +423,8 @@ var script = {
       }
       this.fixFirstPage();
       this.minX = 2e308;
-      return this.maxX = -2e308;
+      this.maxX = -2e308;
+      return console.log('Flipbook resized');
     },
     fixFirstPage: function() {
       if (this.displayedPages === 1 && this.currentPage === 0 && this.pages.length && !this.pageUrl(0)) {
@@ -1233,11 +1239,11 @@ var __vue_staticRenderFns__ = [];
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-77b9888e_0", { source: ".viewport[data-v-77b9888e]{-webkit-overflow-scrolling:touch;width:100%;height:95%}.viewport.zoom[data-v-77b9888e]{overflow:scroll}.viewport.zoom.drag-to-scroll[data-v-77b9888e]{overflow:hidden}.book-container[data-v-77b9888e]{position:relative;width:100%;height:95%;transform-origin:top left;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip[data-v-77b9888e]{position:absolute;width:50%;height:100%;top:0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip.left[data-v-77b9888e]{left:0}.click-to-flip.right[data-v-77b9888e]{right:0}.bounding-box[data-v-77b9888e]{position:absolute;-webkit-user-select:none;-ms-user-select:none;user-select:none}.page[data-v-77b9888e]{position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 0 15px -4px rgba(0,0,0,.75)}.polygon[data-v-77b9888e]{position:absolute;top:0;left:0;background-repeat:no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:center left}.polygon.blank[data-v-77b9888e]{background-color:#ddd}.polygon .lighting[data-v-77b9888e]{width:100%;height:100%}", map: undefined, media: undefined });
+    inject("data-v-1b72a150_0", { source: ".viewport[data-v-1b72a150]{-webkit-overflow-scrolling:touch;width:100%;height:100%}.viewport.zoom[data-v-1b72a150]{overflow:scroll}.viewport.zoom.drag-to-scroll[data-v-1b72a150]{overflow:hidden}.book-container[data-v-1b72a150]{position:relative;width:100%;height:100%;transform-origin:top left;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip[data-v-1b72a150]{position:absolute;width:50%;height:100%;top:0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip.left[data-v-1b72a150]{left:0}.click-to-flip.right[data-v-1b72a150]{right:0}.bounding-box[data-v-1b72a150]{position:absolute;-webkit-user-select:none;-ms-user-select:none;user-select:none}.page[data-v-1b72a150]{position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 0 15px -4px rgba(0,0,0,.75)}.polygon[data-v-1b72a150]{position:absolute;top:0;left:0;background-repeat:no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:center left}.polygon.blank[data-v-1b72a150]{background-color:#ddd}.polygon .lighting[data-v-1b72a150]{width:100%;height:100%}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-77b9888e";
+  var __vue_scope_id__ = "data-v-1b72a150";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

resources/scripts/applications/home/components/flipbook/flipbook.es.js

@@ -387,6 +387,7 @@ var script = {
     }
   },
   mounted: function() {
+    var self;
     window.addEventListener('resize', this.onResize, {
       passive: true
     });
@@ -394,7 +395,11 @@ var script = {
     this.preloadImages();
     this.zoom = this.zooms_[0];
     this.goToPage(this.startPage);
-    return this.$emit('on-mounted', this);
+    self = this;
+    return setTimeout(function() {
+      self.onResize();
+      return self.$emit('on-mounted', self);
+    }, 1000);
   },
   beforeDestroy: function() {
     return window.removeEventListener('resize', this.onResize, {
@@ -416,7 +421,8 @@ var script = {
       }
       this.fixFirstPage();
       this.minX = 2e308;
-      return this.maxX = -2e308;
+      this.maxX = -2e308;
+      return console.log('Flipbook resized');
     },
     fixFirstPage: function() {
       if (this.displayedPages === 1 && this.currentPage === 0 && this.pages.length && !this.pageUrl(0)) {
@@ -1231,11 +1237,11 @@ var __vue_staticRenderFns__ = [];
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-77b9888e_0", { source: ".viewport[data-v-77b9888e]{-webkit-overflow-scrolling:touch;width:100%;height:95%}.viewport.zoom[data-v-77b9888e]{overflow:scroll}.viewport.zoom.drag-to-scroll[data-v-77b9888e]{overflow:hidden}.book-container[data-v-77b9888e]{position:relative;width:100%;height:95%;transform-origin:top left;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip[data-v-77b9888e]{position:absolute;width:50%;height:100%;top:0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip.left[data-v-77b9888e]{left:0}.click-to-flip.right[data-v-77b9888e]{right:0}.bounding-box[data-v-77b9888e]{position:absolute;-webkit-user-select:none;-ms-user-select:none;user-select:none}.page[data-v-77b9888e]{position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 0 15px -4px rgba(0,0,0,.75)}.polygon[data-v-77b9888e]{position:absolute;top:0;left:0;background-repeat:no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:center left}.polygon.blank[data-v-77b9888e]{background-color:#ddd}.polygon .lighting[data-v-77b9888e]{width:100%;height:100%}", map: undefined, media: undefined });
+    inject("data-v-1b72a150_0", { source: ".viewport[data-v-1b72a150]{-webkit-overflow-scrolling:touch;width:100%;height:100%}.viewport.zoom[data-v-1b72a150]{overflow:scroll}.viewport.zoom.drag-to-scroll[data-v-1b72a150]{overflow:hidden}.book-container[data-v-1b72a150]{position:relative;width:100%;height:100%;transform-origin:top left;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip[data-v-1b72a150]{position:absolute;width:50%;height:100%;top:0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip.left[data-v-1b72a150]{left:0}.click-to-flip.right[data-v-1b72a150]{right:0}.bounding-box[data-v-1b72a150]{position:absolute;-webkit-user-select:none;-ms-user-select:none;user-select:none}.page[data-v-1b72a150]{position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 0 15px -4px rgba(0,0,0,.75)}.polygon[data-v-1b72a150]{position:absolute;top:0;left:0;background-repeat:no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:center left}.polygon.blank[data-v-1b72a150]{background-color:#ddd}.polygon .lighting[data-v-1b72a150]{width:100%;height:100%}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-77b9888e";
+  var __vue_scope_id__ = "data-v-1b72a150";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */

resources/scripts/applications/home/components/flipbook/flipbook.js

@@ -570,6 +570,7 @@
       }
     },
     mounted: function() {
+      var self;
       window.addEventListener('resize', this.onResize, {
         passive: true
       });
@@ -577,7 +578,11 @@
       this.preloadImages();
       this.zoom = this.zooms_[0];
       this.goToPage(this.startPage);
-      return this.$emit('on-mounted', this);
+      self = this;
+      return setTimeout(function() {
+        self.onResize();
+        return self.$emit('on-mounted', self);
+      }, 1000);
     },
     beforeDestroy: function() {
       return window.removeEventListener('resize', this.onResize, {
@@ -599,7 +604,8 @@
         }
         this.fixFirstPage();
         this.minX = 2e308;
-        return this.maxX = -2e308;
+        this.maxX = -2e308;
+        return console.log('Flipbook resized');
       },
       fixFirstPage: function() {
         if (this.displayedPages === 1 && this.currentPage === 0 && this.pages.length && !this.pageUrl(0)) {
@@ -1414,11 +1420,11 @@
     /* style */
     var __vue_inject_styles__ = function (inject) {
       if (!inject) { return }
-      inject("data-v-77b9888e_0", { source: ".viewport[data-v-77b9888e]{-webkit-overflow-scrolling:touch;width:100%;height:95%}.viewport.zoom[data-v-77b9888e]{overflow:scroll}.viewport.zoom.drag-to-scroll[data-v-77b9888e]{overflow:hidden}.book-container[data-v-77b9888e]{position:relative;width:100%;height:95%;transform-origin:top left;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip[data-v-77b9888e]{position:absolute;width:50%;height:100%;top:0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip.left[data-v-77b9888e]{left:0}.click-to-flip.right[data-v-77b9888e]{right:0}.bounding-box[data-v-77b9888e]{position:absolute;-webkit-user-select:none;-ms-user-select:none;user-select:none}.page[data-v-77b9888e]{position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 0 15px -4px rgba(0,0,0,.75)}.polygon[data-v-77b9888e]{position:absolute;top:0;left:0;background-repeat:no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:center left}.polygon.blank[data-v-77b9888e]{background-color:#ddd}.polygon .lighting[data-v-77b9888e]{width:100%;height:100%}", map: undefined, media: undefined });
+      inject("data-v-1b72a150_0", { source: ".viewport[data-v-1b72a150]{-webkit-overflow-scrolling:touch;width:100%;height:100%}.viewport.zoom[data-v-1b72a150]{overflow:scroll}.viewport.zoom.drag-to-scroll[data-v-1b72a150]{overflow:hidden}.book-container[data-v-1b72a150]{position:relative;width:100%;height:100%;transform-origin:top left;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip[data-v-1b72a150]{position:absolute;width:50%;height:100%;top:0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.click-to-flip.left[data-v-1b72a150]{left:0}.click-to-flip.right[data-v-1b72a150]{right:0}.bounding-box[data-v-1b72a150]{position:absolute;-webkit-user-select:none;-ms-user-select:none;user-select:none}.page[data-v-1b72a150]{position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 0 15px -4px rgba(0,0,0,.75)}.polygon[data-v-1b72a150]{position:absolute;top:0;left:0;background-repeat:no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:center left}.polygon.blank[data-v-1b72a150]{background-color:#ddd}.polygon .lighting[data-v-1b72a150]{width:100%;height:100%}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    var __vue_scope_id__ = "data-v-77b9888e";
+    var __vue_scope_id__ = "data-v-1b72a150";
     /* module identifier */
     var __vue_module_identifier__ = undefined;
     /* functional template */

resources/scripts/applications/home/views/call.vue

@@ -3,10 +3,15 @@
     <div v-if="loading">
       <Loading />
     </div>
-    <div v-else class>
-      <VideoStrip :localStream="localStream" :remoteStream="remoteStream" />
+    <div v-else class="columns">
+      <VideoStrip
+        :localStream="localStream"
+        :remoteStream="remoteStream"
+        :remotePoster="callManager.peer.avatar"
+        class="column is-2"
+      />
       <transition :name="stateTransitionName">
-        <router-view></router-view>
+        <router-view class="column"></router-view>
       </transition>
     </div>
   </div>

resources/scripts/applications/home/views/call_views/Book.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
     <Loading v-if="loading" />
-
-    <div class="book-view" v-else>
-      <div class="is-flex">
-        <div class="go-left m-r-sm" style="display: flex; align-items: center;">
+    <div :class="`book-view ${flipbookRef ? '' : 'is-transparent'}`" v-else>
+      <div class="book-view m-sm m-r-md">
+        <div
+          class="go-left m-r-sm"
+          style="display: inline-block; align-items: center; position: absolute; left:0px; top:0px"
+        >
           <button
             class="button book-flip-buttons"
             :disabled="!(callManager.isHost && canFlipLeft)"
@@ -29,7 +31,10 @@
             <p>Page {{ flipbook.page }} of {{ flipbook.numPages }}</p>
           </div>
         </flipbook>
-        <div class="go-right m-l-sm" style="display: flex; align-items: center;">
+        <div
+          class="go-right m-l-sm"
+          style="display: inline-block; align-items: center; position: absolute; right:0px; top:0px"
+        >
           <button
             class="button book-flip-buttons"
             :disabled="!(callManager.isHost && canFlipRight)"
@@ -101,6 +106,8 @@ export default {
       if (this.$refs.flipbook) {
         console.log("Found!");
         this.flipbookRef = true;
+        // this.$refs.flipbook.onResize();
+        // console.log("resized");
       } else {
         console.log("Still Null!!");
       }

resources/scripts/applications/home/views/call_views/VideoStrip.vue

@@ -1,15 +1,25 @@
 <template>
-  <div class="container">
+  <div class="video-side-bar">
+    <video :src-object.prop.camel="remoteStream" autoplay :poster="remotePoster" />
+    <video
+      :src-object.prop.camel="localStream"
+      class="is-mirrored"
+      autoplay
+      playsinline
+      muted="true"
+    />
+  </div>
+  <!-- <div class="container">
     <div class="video-strip m-b-md">
       <video :src-object.prop.camel="localStream" autoplay playsinline muted="true" />
       <video :src-object.prop.camel="remoteStream" autoplay />
     </div>
-  </div>
+  </div>-->
 </template>
 
 <script lang="ts">
 export default {
   name: "CallVideoStrip",
-  props: ["remoteStream", "localStream"]
+  props: ["remoteStream", "localStream", "remotePoster"]
 };
 </script>

resources/views/components/nav/nav.edge

@@ -52,7 +52,7 @@
               <a class="button  is-info is-rounded" href='/register'>
                 <strong>Sign up</strong>
               </a>
-              <a class="button  is-rounded is-transparent is-outlined" href='/login'>
+              <a class="button  is-rounded is-outlined" href='/login'>
                 Log in
               </a>
             </div>