Add video effects / blur action in actions menu

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Signed-off-by: Immanuel Pasanec <immanuel.pasanec@compaso.de>

src/components/CallView/shared/LocalMediaControls.vue

@@ -159,6 +159,24 @@
 						title="" />
 					{{ raiseHandButtonLabel }}
 				</ActionButton>
+				<ActionButton
+					v-if="isVirtualBackgroundSupported"
+					:close-after-click="true"
+					@click="toggleVirtualBackground">
+					<BlurOff
+						v-if="isVirtualBackgroundEnabled"
+						slot="icon"
+						:size="16"
+						decorative
+						title="" />
+					<Blur
+						v-else
+						slot="icon"
+						:size="16"
+						decorative
+						title="" />
+					{{ toggleVirtualBackgroundButtonLabel }}
+				</ActionButton>
 				<ActionSeparator />
 				<ActionButton
 					icon="icon-settings"
@@ -218,6 +236,8 @@ import Monitor from 'vue-material-design-icons/Monitor'
 import PresentToAll from '../../missingMaterialDesignIcons/PresentToAll'
 import Video from 'vue-material-design-icons/Video'
 import VideoOff from 'vue-material-design-icons/VideoOff'
+import Blur from 'vue-material-design-icons/Blur'
+import BlurOff from 'vue-material-design-icons/BlurOff'
 import Popover from '@nextcloud/vue/dist/Components/Popover'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import { PARTICIPANT } from '../../../constants'
@@ -226,6 +246,7 @@ import NetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Ale
 import { Actions, ActionSeparator, ActionButton } from '@nextcloud/vue'
 import { callAnalyzer } from '../../../utils/webrtc/index'
 import { CONNECTION_QUALITY } from '../../../utils/webrtc/analyzers/PeerConnectionAnalyzer'
+import VirtualBackground from '../../../utils/media/pipeline/VirtualBackground'
 
 export default {
 
@@ -249,6 +270,8 @@ export default {
 		VideoIcon: Video,
 		VideoOff,
 		Monitor,
+		Blur,
+		BlurOff,
 	},
 
 	props: {
@@ -296,6 +319,21 @@ export default {
 			return t('spreed', 'Lower hand (R)')
 		},
 
+		isVirtualBackgroundSupported() {
+			return VirtualBackground.isSupported()
+		},
+
+		isVirtualBackgroundEnabled() {
+			return this.model.attributes.virtualBackgroundEnabled
+		},
+
+		toggleVirtualBackgroundButtonLabel() {
+			if (!this.isVirtualBackgroundEnabled) {
+				return t('spreed', 'Blur my background')
+			}
+			return t('spreed', 'Disable background blur')
+		},
+
 		conversation() {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
@@ -665,6 +703,14 @@ export default {
 			}
 		},
 
+		toggleVirtualBackground() {
+			if (this.model.attributes.virtualBackgroundEnabled) {
+				this.model.disableVirtualBackground()
+			} else {
+				this.model.enableVirtualBackground()
+			}
+		},
+
 		toggleScreenSharingMenu() {
 			if (!this.isScreensharingAllowed) {
 				return