diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue index 1b7e9800761..538972463e1 100644 --- a/src/components/CallView/CallView.vue +++ b/src/components/CallView/CallView.vue @@ -67,16 +67,14 @@ :shared-data="sharedDatas[shownRemoteScreenPeerId]" :is-big="true" /> - @@ -404,8 +402,13 @@ export default { }, shouldShowPresenterOverlay() { - return this.showPresenterOverlay && !this.isStripeOpen - } + return callParticipantModel => { + return callParticipantModel.attributes.peerId === this.shownRemoteScreenPeerId + && this.showPresenterOverlay + && callParticipantModel.attributes.videoAvailable + } + }, + }, watch: { 'localCallParticipantModel.attributes.peerId'(newValue, previousValue) { @@ -785,23 +788,19 @@ export default { } } -.viewer-overlay__video { +.presenter-overlay__video { position : absolute; bottom: 48px; right: 8px; - --min-width: 130px; - --max-width: 180px; - --max-height: 180px; - width: 15vw; - height: 15vw; - min-width: var(--min-width); + --max-width: 242px; + width: 10vw; + height: 10vw; max-width: var(--max-width); - min-height: var(--min-width); max-height: var(--max-width); - z-index: 110; + z-index: 10; } -.presentar-overlay--collapse { +.presenter-overlay--collapse { position : absolute !important; opacity: .7; bottom: 48px; diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue index 8ebd20a5f1d..fda68cf0e65 100644 --- a/src/components/CallView/shared/VideoVue.vue +++ b/src/components/CallView/shared/VideoVue.vue @@ -22,8 +22,12 @@
@@ -77,11 +81,6 @@ :has-shadow="hasVideo" :participant-name="participantName" /> -
-
-
- -
@@ -91,7 +90,6 @@ import Hex from 'crypto-js/enc-hex.js' import SHA1 from 'crypto-js/sha1.js' import AccountCircle from 'vue-material-design-icons/AccountCircle.vue' -import HideIcon from 'vue-material-design-icons/EyeOffOutline.vue' import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue' import TransitionWrapper from '../../TransitionWrapper.vue' @@ -117,7 +115,6 @@ export default { VideoBottomBar, // icons AccountCircle, - HideIcon, }, mixins: [video], @@ -692,7 +689,8 @@ export default { top: calc(50% + 80px); } -.speaking-shadow { +.video-container.speaking::after { + content: ''; position: absolute; height: 100%; width: 100%; @@ -702,7 +700,8 @@ export default { border-radius: calc(var(--default-clickable-area) / 2); } -.hover-shadow { +.video-container.hover::after { + content: ''; position: absolute; height: 100%; width: 100%; @@ -713,18 +712,20 @@ export default { border-radius: calc(var(--default-clickable-area) / 2); } -.hover-presenter { +.video-container.presenter::after { + content: '' ; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); + background-image: var(--icon-toggle-white); + background-repeat: no-repeat; + background-position: center; + background-size: 25% 25%; border-radius: calc(var(--default-clickable-area) / 2); - & > * { - cursor: pointer; - height:100%; - } + cursor: pointer; }