forked from sagi/seepur
new call layout
This commit is contained in:
parent
9772318e42
commit
ca38ba0bb4
14 changed files with 121 additions and 44 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -7558,9 +7558,11 @@ html {
|
||||||
opacity: 1; } }
|
opacity: 1; } }
|
||||||
|
|
||||||
.flipbook {
|
.flipbook {
|
||||||
width: 100%;
|
width: 99%;
|
||||||
height: 75vh;
|
height: 100%;
|
||||||
overflow-y: visible; }
|
overflow-y: visible;
|
||||||
|
object-fit: contain;
|
||||||
|
transition: opacity .5s; }
|
||||||
|
|
||||||
.book-flip-buttons {
|
.book-flip-buttons {
|
||||||
height: 100%; }
|
height: 100%; }
|
||||||
|
@ -7572,13 +7574,9 @@ html {
|
||||||
max-height: 15vh; }
|
max-height: 15vh; }
|
||||||
|
|
||||||
video {
|
video {
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
background-color: rgba(56, 181, 187, 0.19);
|
background-color: rgba(56, 181, 187, 0.19);
|
||||||
border-radius: 15px;
|
|
||||||
border: solid 1px rgba(56, 181, 187, 0.3);
|
border: solid 1px rgba(56, 181, 187, 0.3);
|
||||||
flex-basis: 100%;
|
flex-basis: 100%; }
|
||||||
max-width: 15vh; }
|
|
||||||
|
|
||||||
.book-thumb {
|
.book-thumb {
|
||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
|
@ -7637,3 +7635,20 @@ video {
|
||||||
|
|
||||||
.is-justify-centered {
|
.is-justify-centered {
|
||||||
justify-content: center; }
|
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); }
|
||||||
|
|
|
@ -279,9 +279,11 @@ $sizes: (
|
||||||
}
|
}
|
||||||
// TODO: Remove this - make generic
|
// TODO: Remove this - make generic
|
||||||
.flipbook {
|
.flipbook {
|
||||||
width: 100%;
|
width: 99%;
|
||||||
height: 75vh;
|
height: 100%;
|
||||||
overflow-y: visible;
|
overflow-y: visible;
|
||||||
|
object-fit: contain;
|
||||||
|
transition: opacity .5s;
|
||||||
}
|
}
|
||||||
.book-flip-buttons{
|
.book-flip-buttons{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -294,13 +296,13 @@ $sizes: (
|
||||||
}
|
}
|
||||||
|
|
||||||
video{
|
video{
|
||||||
margin-left: 5px;
|
// margin-left: 5px;
|
||||||
margin-right: 5px;
|
// margin-right: 5px;
|
||||||
background-color:rgba(56, 181, 187, 0.19);
|
background-color:rgba(56, 181, 187, 0.19);
|
||||||
border-radius: 15px;
|
// border-radius: 15px;
|
||||||
border: solid 1px rgba(56, 181, 187, 0.30);
|
border: solid 1px rgba(56, 181, 187, 0.30);
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
max-width: 15vh;
|
// max-width: 15vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.book-thumb{
|
.book-thumb{
|
||||||
|
@ -371,3 +373,23 @@ video{
|
||||||
.is-justify-centered{
|
.is-justify-centered{
|
||||||
justify-content: center;
|
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);
|
||||||
|
}
|
||||||
|
|
|
@ -389,6 +389,7 @@ var script = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
|
var self;
|
||||||
window.addEventListener('resize', this.onResize, {
|
window.addEventListener('resize', this.onResize, {
|
||||||
passive: true
|
passive: true
|
||||||
});
|
});
|
||||||
|
@ -396,7 +397,11 @@ var script = {
|
||||||
this.preloadImages();
|
this.preloadImages();
|
||||||
this.zoom = this.zooms_[0];
|
this.zoom = this.zooms_[0];
|
||||||
this.goToPage(this.startPage);
|
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() {
|
beforeDestroy: function() {
|
||||||
return window.removeEventListener('resize', this.onResize, {
|
return window.removeEventListener('resize', this.onResize, {
|
||||||
|
@ -418,7 +423,8 @@ var script = {
|
||||||
}
|
}
|
||||||
this.fixFirstPage();
|
this.fixFirstPage();
|
||||||
this.minX = 2e308;
|
this.minX = 2e308;
|
||||||
return this.maxX = -2e308;
|
this.maxX = -2e308;
|
||||||
|
return console.log('Flipbook resized');
|
||||||
},
|
},
|
||||||
fixFirstPage: function() {
|
fixFirstPage: function() {
|
||||||
if (this.displayedPages === 1 && this.currentPage === 0 && this.pages.length && !this.pageUrl(0)) {
|
if (this.displayedPages === 1 && this.currentPage === 0 && this.pages.length && !this.pageUrl(0)) {
|
||||||
|
@ -1233,11 +1239,11 @@ var __vue_staticRenderFns__ = [];
|
||||||
/* style */
|
/* style */
|
||||||
var __vue_inject_styles__ = function (inject) {
|
var __vue_inject_styles__ = function (inject) {
|
||||||
if (!inject) { return }
|
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 */
|
/* scoped */
|
||||||
var __vue_scope_id__ = "data-v-77b9888e";
|
var __vue_scope_id__ = "data-v-1b72a150";
|
||||||
/* module identifier */
|
/* module identifier */
|
||||||
var __vue_module_identifier__ = undefined;
|
var __vue_module_identifier__ = undefined;
|
||||||
/* functional template */
|
/* functional template */
|
||||||
|
|
|
@ -387,6 +387,7 @@ var script = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
|
var self;
|
||||||
window.addEventListener('resize', this.onResize, {
|
window.addEventListener('resize', this.onResize, {
|
||||||
passive: true
|
passive: true
|
||||||
});
|
});
|
||||||
|
@ -394,7 +395,11 @@ var script = {
|
||||||
this.preloadImages();
|
this.preloadImages();
|
||||||
this.zoom = this.zooms_[0];
|
this.zoom = this.zooms_[0];
|
||||||
this.goToPage(this.startPage);
|
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() {
|
beforeDestroy: function() {
|
||||||
return window.removeEventListener('resize', this.onResize, {
|
return window.removeEventListener('resize', this.onResize, {
|
||||||
|
@ -416,7 +421,8 @@ var script = {
|
||||||
}
|
}
|
||||||
this.fixFirstPage();
|
this.fixFirstPage();
|
||||||
this.minX = 2e308;
|
this.minX = 2e308;
|
||||||
return this.maxX = -2e308;
|
this.maxX = -2e308;
|
||||||
|
return console.log('Flipbook resized');
|
||||||
},
|
},
|
||||||
fixFirstPage: function() {
|
fixFirstPage: function() {
|
||||||
if (this.displayedPages === 1 && this.currentPage === 0 && this.pages.length && !this.pageUrl(0)) {
|
if (this.displayedPages === 1 && this.currentPage === 0 && this.pages.length && !this.pageUrl(0)) {
|
||||||
|
@ -1231,11 +1237,11 @@ var __vue_staticRenderFns__ = [];
|
||||||
/* style */
|
/* style */
|
||||||
var __vue_inject_styles__ = function (inject) {
|
var __vue_inject_styles__ = function (inject) {
|
||||||
if (!inject) { return }
|
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 */
|
/* scoped */
|
||||||
var __vue_scope_id__ = "data-v-77b9888e";
|
var __vue_scope_id__ = "data-v-1b72a150";
|
||||||
/* module identifier */
|
/* module identifier */
|
||||||
var __vue_module_identifier__ = undefined;
|
var __vue_module_identifier__ = undefined;
|
||||||
/* functional template */
|
/* functional template */
|
||||||
|
|
|
@ -570,6 +570,7 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
|
var self;
|
||||||
window.addEventListener('resize', this.onResize, {
|
window.addEventListener('resize', this.onResize, {
|
||||||
passive: true
|
passive: true
|
||||||
});
|
});
|
||||||
|
@ -577,7 +578,11 @@
|
||||||
this.preloadImages();
|
this.preloadImages();
|
||||||
this.zoom = this.zooms_[0];
|
this.zoom = this.zooms_[0];
|
||||||
this.goToPage(this.startPage);
|
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() {
|
beforeDestroy: function() {
|
||||||
return window.removeEventListener('resize', this.onResize, {
|
return window.removeEventListener('resize', this.onResize, {
|
||||||
|
@ -599,7 +604,8 @@
|
||||||
}
|
}
|
||||||
this.fixFirstPage();
|
this.fixFirstPage();
|
||||||
this.minX = 2e308;
|
this.minX = 2e308;
|
||||||
return this.maxX = -2e308;
|
this.maxX = -2e308;
|
||||||
|
return console.log('Flipbook resized');
|
||||||
},
|
},
|
||||||
fixFirstPage: function() {
|
fixFirstPage: function() {
|
||||||
if (this.displayedPages === 1 && this.currentPage === 0 && this.pages.length && !this.pageUrl(0)) {
|
if (this.displayedPages === 1 && this.currentPage === 0 && this.pages.length && !this.pageUrl(0)) {
|
||||||
|
@ -1414,11 +1420,11 @@
|
||||||
/* style */
|
/* style */
|
||||||
var __vue_inject_styles__ = function (inject) {
|
var __vue_inject_styles__ = function (inject) {
|
||||||
if (!inject) { return }
|
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 */
|
/* scoped */
|
||||||
var __vue_scope_id__ = "data-v-77b9888e";
|
var __vue_scope_id__ = "data-v-1b72a150";
|
||||||
/* module identifier */
|
/* module identifier */
|
||||||
var __vue_module_identifier__ = undefined;
|
var __vue_module_identifier__ = undefined;
|
||||||
/* functional template */
|
/* functional template */
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -3,10 +3,15 @@
|
||||||
<div v-if="loading">
|
<div v-if="loading">
|
||||||
<Loading />
|
<Loading />
|
||||||
</div>
|
</div>
|
||||||
<div v-else class>
|
<div v-else class="columns">
|
||||||
<VideoStrip :localStream="localStream" :remoteStream="remoteStream" />
|
<VideoStrip
|
||||||
|
:localStream="localStream"
|
||||||
|
:remoteStream="remoteStream"
|
||||||
|
:remotePoster="callManager.peer.avatar"
|
||||||
|
class="column is-2"
|
||||||
|
/>
|
||||||
<transition :name="stateTransitionName">
|
<transition :name="stateTransitionName">
|
||||||
<router-view></router-view>
|
<router-view class="column"></router-view>
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Loading v-if="loading" />
|
<Loading v-if="loading" />
|
||||||
|
<div :class="`book-view ${flipbookRef ? '' : 'is-transparent'}`" v-else>
|
||||||
<div class="book-view" v-else>
|
<div class="book-view m-sm m-r-md">
|
||||||
<div class="is-flex">
|
<div
|
||||||
<div class="go-left m-r-sm" style="display: flex; align-items: center;">
|
class="go-left m-r-sm"
|
||||||
|
style="display: inline-block; align-items: center; position: absolute; left:0px; top:0px"
|
||||||
|
>
|
||||||
<button
|
<button
|
||||||
class="button book-flip-buttons"
|
class="button book-flip-buttons"
|
||||||
:disabled="!(callManager.isHost && canFlipLeft)"
|
:disabled="!(callManager.isHost && canFlipLeft)"
|
||||||
|
@ -29,7 +31,10 @@
|
||||||
<p>Page {{ flipbook.page }} of {{ flipbook.numPages }}</p>
|
<p>Page {{ flipbook.page }} of {{ flipbook.numPages }}</p>
|
||||||
</div>
|
</div>
|
||||||
</flipbook>
|
</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
|
<button
|
||||||
class="button book-flip-buttons"
|
class="button book-flip-buttons"
|
||||||
:disabled="!(callManager.isHost && canFlipRight)"
|
:disabled="!(callManager.isHost && canFlipRight)"
|
||||||
|
@ -101,6 +106,8 @@ export default {
|
||||||
if (this.$refs.flipbook) {
|
if (this.$refs.flipbook) {
|
||||||
console.log("Found!");
|
console.log("Found!");
|
||||||
this.flipbookRef = true;
|
this.flipbookRef = true;
|
||||||
|
// this.$refs.flipbook.onResize();
|
||||||
|
// console.log("resized");
|
||||||
} else {
|
} else {
|
||||||
console.log("Still Null!!");
|
console.log("Still Null!!");
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,15 +1,25 @@
|
||||||
<template>
|
<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">
|
<div class="video-strip m-b-md">
|
||||||
<video :src-object.prop.camel="localStream" autoplay playsinline muted="true" />
|
<video :src-object.prop.camel="localStream" autoplay playsinline muted="true" />
|
||||||
<video :src-object.prop.camel="remoteStream" autoplay />
|
<video :src-object.prop.camel="remoteStream" autoplay />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>-->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
name: "CallVideoStrip",
|
name: "CallVideoStrip",
|
||||||
props: ["remoteStream", "localStream"]
|
props: ["remoteStream", "localStream", "remotePoster"]
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -52,7 +52,7 @@
|
||||||
<a class="button is-info is-rounded" href='/register'>
|
<a class="button is-info is-rounded" href='/register'>
|
||||||
<strong>Sign up</strong>
|
<strong>Sign up</strong>
|
||||||
</a>
|
</a>
|
||||||
<a class="button is-rounded is-transparent is-outlined" href='/login'>
|
<a class="button is-rounded is-outlined" href='/login'>
|
||||||
Log in
|
Log in
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue