diff options
author | Marco Ambrosini <marcoambrosini@pm.me> | 2020-05-14 16:04:55 +0300 |
---|---|---|
committer | Marco Ambrosini <marcoambrosini@pm.me> | 2020-05-14 16:09:17 +0300 |
commit | 68f4edd713e219853c233886051e93ff3234e8d0 (patch) | |
tree | cbf8d072450e816fe9a00f81371f117781c695b4 | |
parent | ea1697c4e320d500b728eeb56efdb9b8012fb18a (diff) |
Fix callview in sidebars
Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
-rw-r--r-- | src/FilesSidebarCallViewApp.vue | 1 | ||||
-rw-r--r-- | src/PublicShareAuthSidebar.vue | 2 | ||||
-rw-r--r-- | src/PublicShareSidebar.vue | 5 | ||||
-rw-r--r-- | src/components/CallView/CallView.vue | 16 | ||||
-rw-r--r-- | src/components/CallView/shared/LocalVideo.vue | 8 | ||||
-rw-r--r-- | src/components/CallView/shared/Video.vue | 8 |
6 files changed, 33 insertions, 7 deletions
diff --git a/src/FilesSidebarCallViewApp.vue b/src/FilesSidebarCallViewApp.vue index 6f6b2c570..790455beb 100644 --- a/src/FilesSidebarCallViewApp.vue +++ b/src/FilesSidebarCallViewApp.vue @@ -25,6 +25,7 @@ <CallView v-show="isInCall" :token="token" + :is-sidebar="true" :use-constrained-layout="true" /> <PreventUnload :when="isInCall" /> </div> diff --git a/src/PublicShareAuthSidebar.vue b/src/PublicShareAuthSidebar.vue index 9dda5cfcd..fd7e5ebba 100644 --- a/src/PublicShareAuthSidebar.vue +++ b/src/PublicShareAuthSidebar.vue @@ -28,7 +28,7 @@ <h2>{{ t('spreed', 'This conversation has ended') }}</h2> </div> <template v-else> - <CallView :token="token" /> + <CallView :token="token" :is-sidebar="true" /> <ChatView :token="token" /> </template> </aside> diff --git a/src/PublicShareSidebar.vue b/src/PublicShareSidebar.vue index 381e23827..36fa6d124 100644 --- a/src/PublicShareSidebar.vue +++ b/src/PublicShareSidebar.vue @@ -32,7 +32,10 @@ </button> </div> <template v-else> - <CallView v-if="isInCall" :token="token" :use-constrained-layout="true" /> + <CallView v-if="isInCall" + :token="token" + :is-sidebar="true" + :use-constrained-layout="true" /> <PreventUnload :when="isInCall" /> <CallButton class="call-button" /> <ChatView :token="token" /> diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue index 709af3ef1..842483944 100644 --- a/src/components/CallView/CallView.vue +++ b/src/components/CallView/CallView.vue @@ -36,6 +36,7 @@ :is-grid="true" :fit-video="true" :is-big="true" + :is-sidebar="isSidebar" @switchScreenToId="_switchScreenToId" /> </template> </div> @@ -73,14 +74,16 @@ v-if="isOneToOneView" ref="localVideo" class="local-video" + :class="{ 'local-video--sidebar': isSidebar }" :fit-video="true" :is-stripe="true" :local-media-model="localMediaModel" :video-container-aspect-ratio="videoContainerAspectRatio" :local-call-participant-model="localCallParticipantModel" :use-constrained-layout="false" + :is-sidebar="isSidebar" @switchScreenToId="1" /> - <div id="screens"> + <div v-if="!isSidebar" id="screens"> <Screen v-if="localMediaModel.attributes.localScreen" :local-media-model="localMediaModel" :shared-data="localSharedData" /> @@ -117,6 +120,11 @@ export default { type: String, required: true, }, + // Determines wether this component is used in the sidebar + isSidebar: { + type: Boolean, + default: false, + }, }, data() { @@ -186,7 +194,7 @@ export default { return this.isOneToOne && !this.isGrid }, showGrid() { - return !this.isOneToOneView + return !this.isOneToOneView && !this.isSidebar }, }, watch: { @@ -420,6 +428,10 @@ export default { bottom: 0; width: 300px; height: 250px; + &--sidebar { + width: 150px; + height: 100px; + } } #videos.hidden { diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue index e15ad3b10..1beb21d90 100644 --- a/src/components/CallView/shared/LocalVideo.vue +++ b/src/components/CallView/shared/LocalVideo.vue @@ -27,7 +27,7 @@ ref="video" :class="videoClass" class="video" /> - <div v-if="!localMediaModel.attributes.videoEnabled" class="avatar-container"> + <div v-if="!localMediaModel.attributes.videoEnabled && !isSidebar" class="avatar-container"> <VideoBackground v-if="isGrid || isStripe" :display-name="displayName" :user="userId" /> <Avatar v-if="userId" :size="avatarSize" @@ -46,7 +46,7 @@ ref="localMediaControls" :model="localMediaModel" :local-call-participant-model="localCallParticipantModel" - :screen-sharing-button-hidden="useConstrainedLayout" + :screen-sharing-button-hidden="isSidebar" @switchScreenToId="$emit('switchScreenToId', $event)" /> </transition> </div> @@ -91,6 +91,10 @@ export default { type: Boolean, default: false, }, + isSidebar: { + type: Boolean, + default: false, + }, }, computed: { diff --git a/src/components/CallView/shared/Video.vue b/src/components/CallView/shared/Video.vue index 23590252c..4d0f3bad2 100644 --- a/src/components/CallView/shared/Video.vue +++ b/src/components/CallView/shared/Video.vue @@ -57,7 +57,8 @@ </div> </transition> - <div class="bottom-bar" + <div v-if="!isSidebar" + class="bottom-bar" :class="{'bottom-bar--video-on' : hasVideoStream, 'bottom-bar--big': isBig }"> <transition name="fade"> <div v-show="!model.attributes.videoAvailable || !sharedData.videoEnabled || showVideoOverlay || isSelected || isSpeaking" @@ -173,6 +174,11 @@ export default { type: Boolean, default: false, }, + // True when this component is used as main video in the sidebar + isSidebar: { + type: Boolean, + default: false, + }, }, data() { |