Skip to content

Commit

Permalink
fix(ViewerOverlay): add EmptyCallView
Browse files Browse the repository at this point in the history 
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
  • Loading branch information
@ShGKme
ShGKme committed May 9, 2023
1 parent 11cce6f commit 10d85de
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 71 deletions.
10 changes: 5 additions & 5 deletions src/components/CallView/CallView.vue
View file
Expand Up @@ -22,13 +22,13 @@

<template>
<div id="call-container">
<EmptyCallView v-if="!remoteParticipantsCount && !screenSharingActive && !isGrid"
:is-sidebar="isSidebar" />

<ViewerOverlayCallView v-else-if="isViewerOverlay && promotedParticipantModel"
<ViewerOverlayCallView v-if="isViewerOverlay"
:token="token"
:model="promotedParticipantModel"
:shared-data="sharedDatas[promotedParticipantModel.attributes.peerId]" />
:shared-data="promotedParticipantModel && sharedDatas[promotedParticipantModel.attributes.peerId]" />

<EmptyCallView v-if="!remoteParticipantsCount && !screenSharingActive && !isGrid"
:is-sidebar="isSidebar" />

<div v-else-if="!isViewerOverlay" id="videos">
<template v-if="!isGrid">
Expand Down
52 changes: 40 additions & 12 deletions src/components/CallView/shared/EmptyCallView.vue
View file
Expand Up @@ -19,19 +19,23 @@
-->

<template>
<div class="empty-call-view" :class="{'empty-call-view--sidebar': isSidebar}">
<div class="empty-call-view"
:class="{
'empty-call-view--sidebar': isSidebar,
'empty-call-view--small': isSmall
}">
<div class="icon" :class="iconClass" />
<h2>
{{ title }}
</h2>
<p v-if="message" class="emptycontent-additional">
{{ message }}
</p>
<NcButton v-if="showLink"
type="primary"
@click.stop.prevent="handleCopyLink">
{{ t('spreed', 'Copy link') }}
</NcButton>
<h2>{{ title }}</h2>
<template v-if="!isSmall">
<p v-if="message" class="emptycontent-additional">
{{ message }}
</p>
<NcButton v-if="showLink"
type="primary"
@click.stop.prevent="handleCopyLink">
{{ t('spreed', 'Copy link') }}
</NcButton>
</template>
</div>
</template>

Expand Down Expand Up @@ -59,6 +63,11 @@ export default {
type: Boolean,
default: false,
},
isSmall: {
type: Boolean,
default: false,
},
},
computed: {
Expand Down Expand Up @@ -210,6 +219,25 @@ export default {
margin-bottom: 0;
}
}
&--small {
border-radius: calc(var(--default-clickable-area) / 2);
background-color: rgba(34, 34, 34, 0.8); /* Copy from the call view */
padding: 8px;
h2 {
font-size: 1rem;
font-weight: normal;
}
.icon {
transform: none;
margin-bottom: 0;
background-size: 32px;
height: 32px;
width: 32px;
}
}
}
</style>
7 changes: 6 additions & 1 deletion src/components/CallView/shared/VideoVue.vue
View file
Expand Up @@ -82,7 +82,7 @@
class="connection-message">
{{ connectionMessage }}
</div>
<slot name="bottom-bar">
<slot v-if="!hideBottomBar" name="bottom-bar">
<VideoBottomBar v-bind="$props"
:has-shadow="hasVideo"
:participant-name="participantName" />
Expand Down Expand Up @@ -176,6 +176,11 @@ export default {
type: Boolean,
default: false,
},
hideBottomBar: {
type: Boolean,
default: false,
},
},
data() {
Expand Down
122 changes: 69 additions & 53 deletions src/components/CallView/shared/ViewerOverlayCallView.vue
View file
Expand Up @@ -20,7 +20,8 @@
<template>
<div ref="ghost" class="viewer-overlay-ghost">
<Portal>
<div class="viewer-overlay"
<!-- Add .app-talk to use Talk icon classes outside of #content-vue -->
<div class="viewer-overlay app-talk"
:style="{
right: position.right + 'px',
bottom: position.bottom + 'px'
Expand All @@ -41,7 +42,10 @@
</div>

<Transition name="slide-down">
<div v-show="!isCollapsed" class="viewer-overlay__video-container">
<div v-show="!isCollapsed"
class="viewer-overlay__video-container"
tabindex="0"
@click="maximize">
<div class="video-overlay__top-bar">
<NcButton type="secondary"
class="viewer-overlay__button"
Expand All @@ -53,6 +57,20 @@
</NcButton>
</div>

<VideoVue v-if="model"
class="viewer-overlay__video"
:token="token"
:model="model"
:shared-data="sharedData"
is-grid
un-selectable
hide-bottom-bar
@click-video="maximize">
<template #bottom-bar />
</VideoVue>

<EmptyCallView v-else is-small />

<LocalVideo v-if="localModel.attributes.videoEnabled"
class="viewer-overlay__local-video"
:token="token"
Expand All @@ -62,28 +80,18 @@
is-small
un-selectable />

<VideoVue class="viewer-overlay__video"
:token="token"
:model="model"
:shared-data="sharedData"
is-grid
un-selectable
@click-video="maximize">
<template #bottom-bar>
<div class="viewer-overlay__bottom-bar">
<LocalAudioControlButton class="viewer-overlay__button"
:conversation="conversation"
:model="localModel"
nc-button-type="secondary"
disable-keyboard-shortcuts />
<LocalVideoControlButton class="viewer-overlay__button"
:conversation="conversation"
:model="localModel"
nc-button-type="secondary"
disable-keyboard-shortcuts />
</div>
</template>
</VideoVue>
<div class="viewer-overlay__bottom-bar">
<LocalAudioControlButton class="viewer-overlay__button"
:conversation="conversation"
:model="localModel"
nc-button-type="secondary"
disable-keyboard-shortcuts />
<LocalVideoControlButton class="viewer-overlay__button"
:conversation="conversation"
:model="localModel"
nc-button-type="secondary"
disable-keyboard-shortcuts />
</div>
</div>
</Transition>
</div>
Expand All @@ -100,6 +108,7 @@ import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
import { NcButton, Tooltip } from '@nextcloud/vue'
import EmptyCallView from './EmptyCallView.vue'
import LocalAudioControlButton from './LocalAudioControlButton.vue'
import LocalVideo from './LocalVideo.vue'
import LocalVideoControlButton from './LocalVideoControlButton.vue'
Expand All @@ -111,6 +120,7 @@ export default {
name: 'ViewerOverlayCallView',
components: {
EmptyCallView,
LocalAudioControlButton,
LocalVideoControlButton,
Portal,
Expand All @@ -134,12 +144,14 @@ export default {
model: {
type: Object,
required: true,
required: false,
default: null,
},
sharedData: {
type: Object,
required: true,
required: false,
default: null,
},
localModel: {
Expand Down Expand Up @@ -203,10 +215,10 @@ export default {
@import "../../../assets/variables";
.viewer-overlay-ghost {
position: absolute;
bottom: 8px;
right: 8px;
left: 0;
position: absolute;
bottom: 8px;
right: 8px;
left: 0;
}
.viewer-overlay {
Expand All @@ -222,11 +234,15 @@ export default {
z-index: 11000;
}
.viewer-overlay * {
box-sizing: border-box;
}
.viewer-overlay__collapse {
position: absolute;
top: 8px;
right: 8px;
z-index: 100;
position: absolute;
top: 8px;
right: 8px;
z-index: 100;
}
.viewer-overlay__button {
Expand All @@ -239,22 +255,22 @@ export default {
}
.video-overlay__top-bar {
position: absolute;
top: 8px;
left: 8px;
z-index: 100;
position: absolute;
top: 8px;
left: 8px;
z-index: 100;
}
.viewer-overlay__bottom-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
position: absolute;
bottom: 0;
width: 100%;
padding: 0 12px 8px 12px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
position: absolute;
bottom: 0;
width: 100%;
padding: 0 12px 8px 12px;
z-index: 1;
}
.viewer-overlay__video-container {
Expand All @@ -268,12 +284,12 @@ export default {
}
.viewer-overlay__local-video {
position: absolute;
bottom: 8px;
right: 8px;
width: 25%;
height: 25%;
overflow: hidden;
position: absolute;
bottom: 8px;
right: 8px;
width: 25%;
height: 25%;
overflow: hidden;
}
.viewer-overlay__video {
Expand Down

0 comments on commit 10d85de

Please sign in to comment.