Merge pull request #11429 from nextcloud/feat/10563/talking-border-indicator

feat(LocalVideo): Show self talking indicator

Author: DorraJaouad

src/components/CallView/shared/LocalVideo.vue

@@ -168,12 +168,12 @@ export default {
 		videoContainerClass() {
 			return {
 				'not-connected': this.isNotConnected,
-				speaking: this.localMediaModel.attributes.speaking,
 				'video-container-grid': this.isGrid,
 				'video-container-stripe': this.isStripe,
 				'video-container-big': this.isBig,
 				'video-container-small': this.isSmall,
 				'hover-shadow': this.isSelectable && this.mouseover,
+				speaking: this.localMediaModel.attributes.speaking,
 			}
 		},
 
@@ -441,16 +441,24 @@ export default {
 	margin: auto;
 }
 
-.hover-shadow:after {
+.localVideoContainer:after {
 	position: absolute;
 	height: 100%;
 	width: 100%;
 	top: 0;
 	left: 0;
+	border-radius: calc(var(--default-clickable-area) / 2);
+}
+
+.hover-shadow:after {
 	content: '';
 	box-shadow: inset 0 0 0 3px white;
 	cursor: pointer;
-	border-radius: calc(var(--default-clickable-area) / 2);
+}
+
+.speaking:after {
+	content: '';
+	box-shadow: inset 0 0 0 2px white;
 }
 
 .bottom-bar {

src/components/CallView/shared/VideoVue.vue

@@ -23,11 +23,7 @@
 		:id="(placeholderForPromoted ? 'placeholder-' : '') + 'container_' + peerId + '_video_incoming'"
 		ref="videoContainer"
 		class="video-container"
-		:class="[containerClass, {
-			speaking: isSpeaking && !isBig,
-			hover: mouseover && !unSelectable && !isBig,
-			presenter: isPresenterOverlay && mouseover
-		}]"
+		:class="containerClass"
 		@mouseover="mouseover = true"
 		@mouseleave="mouseover = false"
 		@click="$emit('click-video')">
@@ -300,10 +296,11 @@ export default {
 			return {
 				'videoContainer-dummy': this.placeholderForPromoted,
 				'not-connected': !this.placeholderForPromoted && !this.isConnected,
-				speaking: !this.placeholderForPromoted && this.model.attributes.speaking,
+				speaking: !this.placeholderForPromoted && this.isSpeaking && !this.isBig,
+				hover: this.mouseover && !this.unSelectable && !this.isBig,
 				promoted: !this.placeholderForPromoted && this.sharedData.promoted && !this.isGrid,
+				presenter: this.isPresenterOverlay && this.mouseover,
 				'video-container-grid': this.isGrid,
-				'video-container-grid--speaking': this.isSpeaking,
 				'video-container-big': this.isBig,
 				'one-to-one': this.isOneToOne,
 			}