diff options
author | DorraJaouad <dorra.jaoued7@gmail.com> | 2024-08-02 12:41:23 +0200 |
---|---|---|
committer | DorraJaouad <dorra.jaoued7@gmail.com> | 2024-08-02 12:41:23 +0200 |
commit | 27b0843e6f339b81e41ded3df739ca987a1bbca2 (patch) | |
tree | c974a33563ae971c7091a8e803f3f67a99a682c5 | |
parent | f00266d0df3d33b39eae6c9587e2a43ff4a8d4db (diff) |
feat(Call): indicate to user that their video and screen are being displayedfeat/add-mutiple-stream-sharing-hint
Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
-rw-r--r-- | src/components/CallView/shared/VideoBottomBar.vue | 33 |
1 files changed, 32 insertions, 1 deletions
diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue index a77d7701d..65b6bde68 100644 --- a/src/components/CallView/shared/VideoBottomBar.vue +++ b/src/components/CallView/shared/VideoBottomBar.vue @@ -9,6 +9,11 @@ @mouseover.stop="mouseover = true" @mouseleave.stop="mouseover = false"> <TransitionWrapper name="fade"> + <div v-if="showHint" class="hint"> + {{ t('spreed', 'You are sharing video and screen…') }} + </div> + </TransitionWrapper> + <TransitionWrapper name="fade"> <div v-if="showRaiseHandIndicator" class="status-indicator raiseHandIndicator"> <HandBackLeft :size="18" fill-color="#ffffff" /> </div> @@ -184,6 +189,7 @@ export default { data() { return { mouseover: false, + showHint: false, } }, @@ -256,6 +262,10 @@ export default { canFullModerate() { return this.participantType === PARTICIPANT.TYPE.OWNER || this.participantType === PARTICIPANT.TYPE.MODERATOR }, + + isVideoAndScreen() { + return this.model.attributes.videoEnabled && this.model.attributes.localScreen + }, }, watch: { @@ -264,7 +274,19 @@ export default { return } this.$emit('bottom-bar-hover', value) - } + }, + + isVideoAndScreen: { + immediate: true, + handler(value) { + if (value) { + this.showHint = true + setTimeout(() => { + this.showHint = false + }, 5000) + } + }, + }, }, methods: { @@ -321,6 +343,15 @@ export default { } } +.hint { + position: absolute; + left: 0; + padding: 0 calc(var(--default-grid-baseline) * 2) var(--default-grid-baseline); + background-color: rgba(0, 0, 0, 0.2); + border-radius: var(--border-radius-large); + color: white; +} + .bottom-bar { display: flex; align-items: center; |