aran/seepur
1
0
Fork 0
forked from sagi/seepur
Code Issues Pull requests Releases Wiki Activity

new call layout

Browse source
This commit is contained in:
Sagi Dayan 2020-05-09 17:52:22 -04:00
parent 9772318e42
commit ca38ba0bb4
14 changed files with 121 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/scripts/applications/admin/app.bundle.js
View file

File diff suppressed because one or more lines are too long

4
public/scripts/applications/home/app.bundle.js
View file

File diff suppressed because one or more lines are too long

2
public/scripts/components/navbar/app.bundle.js
View file

File diff suppressed because one or more lines are too long

2
public/scripts/views/register/app.bundle.js
View file

File diff suppressed because one or more lines are too long

31
public/style.css
View file

@ -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); }

34
resources/sass/main.scss
View file

@ -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);
}

14
resources/scripts/applications/home/components/flipbook/flipbook.cjs.js
View file

@ -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 */

14
resources/scripts/applications/home/components/flipbook/flipbook.es.js
View file

@ -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 */

14
resources/scripts/applications/home/components/flipbook/flipbook.js
View file

@ -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 */

2
resources/scripts/applications/home/components/flipbook/flipbook.min.js vendored
View file

File diff suppressed because one or more lines are too long

11
resources/scripts/applications/home/views/call.vue
View file

@ -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>

17
resources/scripts/applications/home/views/call_views/Book.vue
View file

@ -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!!");
}

16
resources/scripts/applications/home/views/call_views/VideoStrip.vue
View file

@ -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>

2
resources/views/components/nav/nav.edge
View file

@ -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>