Merge pull request #5860 from nextcloud/bugfix/5859/fix-screenshare-icon

Fix screenshare icon not crossing out when a screen is shared

3 files changed, 95 insertions, 7 deletions

diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index cd286b4f4..b02132569 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/CallView/shared/LocalMediaControls.vue
@@ -81,15 +81,15 @@
 				@update:open="screenSharingMenuOpen = true"
 				@update:close="screenSharingMenuOpen = false">
 				<!-- Actions button icon -->
-				<Monitor
+				<CancelPresentation
 					v-if="model.attributes.localScreen"
 					slot="icon"
 					:size="24"
 					title=""
 					fill-color="#ffffff"
 					decorative />
-				<MonitorOff
-					v-if="!model.attributes.localScreen"
+				<PresentToAll
+					v-else
 					slot="icon"
 					:size="24"
 					title=""
@@ -100,7 +100,7 @@
 				<ActionButton
 					v-if="!screenSharingMenuOpen"
 					@click.stop="toggleScreenSharingMenu">
-					<Monitor
+					<PresentToAll
 						slot="icon"
 						:size="24"
 						title=""
@@ -121,7 +121,7 @@
 				<ActionButton
 					v-if="model.attributes.localScreen"
 					@click="stopScreen">
-					<MonitorOff
+					<CancelPresentation
 						slot="icon"
 						:size="24"
 						title=""
@@ -210,11 +210,12 @@
 import escapeHtml from 'escape-html'
 import { emit } from '@nextcloud/event-bus'
 import { showMessage } from '@nextcloud/dialogs'
+import CancelPresentation from '../../missingMaterialDesignIcons/CancelPresentation'
 import Hand from 'vue-material-design-icons/Hand'
 import Microphone from 'vue-material-design-icons/Microphone'
 import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
 import Monitor from 'vue-material-design-icons/Monitor'
-import MonitorOff from 'vue-material-design-icons/MonitorOff'
+import PresentToAll from '../../missingMaterialDesignIcons/PresentToAll'
 import Video from 'vue-material-design-icons/Video'
 import VideoOff from 'vue-material-design-icons/VideoOff'
 import Popover from '@nextcloud/vue/dist/Components/Popover'
@@ -240,13 +241,14 @@ export default {
 		Actions,
 		ActionSeparator,
 		ActionButton,
+		CancelPresentation,
 		Hand,
 		Microphone,
 		MicrophoneOff,
+		PresentToAll,
 		VideoIcon: Video,
 		VideoOff,
 		Monitor,
-		MonitorOff,
 	},
 
 	props: {
diff --git a/src/components/missingMaterialDesignIcons/CancelPresentation.vue b/src/components/missingMaterialDesignIcons/CancelPresentation.vue
new file mode 100644
index 000000000..4cca75f0d
--- /dev/null
+++ b/src/components/missingMaterialDesignIcons/CancelPresentation.vue
@@ -0,0 +1,44 @@
+<template functional>
+	<span :aria-hidden="props.decorative"
+		:aria-label="props.title"
+		:class="[data.class, data.staticClass]"
+		class="material-design-icon cancel-presentation-icon"
+		role="img"
+		v-bind="data.attrs"
+		v-on="listeners">
+		<svg :fill="props.fillColor"
+			class="material-design-icon__svg"
+			:width="props.size"
+			:height="props.size"
+			viewBox="0 0 24 24">
+			<path d="M0 0h24v24H0z" fill="none" />
+			<path d="M21 19.1H3V5h18v14.1zM21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
+			<path d="M21 19.1H3V5h18v14.1zM21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" fill="none" />
+			<path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41z" />
+		</svg>
+	</span>
+</template>
+
+<script>
+export default {
+	name: 'CancelPresentation',
+	props: {
+		title: {
+			type: String,
+			default: 'Cancel Presentation icon',
+		},
+		decorative: {
+			type: Boolean,
+			default: false,
+		},
+		fillColor: {
+			type: String,
+			default: 'currentColor',
+		},
+		size: {
+			type: Number,
+			default: 24,
+		},
+	},
+}
+</script>
diff --git a/src/components/missingMaterialDesignIcons/PresentToAll.vue b/src/components/missingMaterialDesignIcons/PresentToAll.vue
new file mode 100644
index 000000000..ab1befec6
--- /dev/null
+++ b/src/components/missingMaterialDesignIcons/PresentToAll.vue
@@ -0,0 +1,42 @@
+<template functional>
+	<span :aria-hidden="props.decorative"
+		:aria-label="props.title"
+		:class="[data.class, data.staticClass]"
+		class="material-design-icon present-to-all-icon"
+		role="img"
+		v-bind="data.attrs"
+		v-on="listeners">
+		<svg :fill="props.fillColor"
+			class="material-design-icon__svg"
+			:width="props.size"
+			:height="props.size"
+			viewBox="0 0 24 24">
+			<path d="M0 0h24v24H0V0z" fill="none" />
+			<path d="M21 3H3c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h18c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm0 16.02H3V4.98h18v14.04zM10 12H8l4-4 4 4h-2v4h-4v-4z" />
+		</svg>
+	</span>
+</template>
+
+<script>
+export default {
+	name: 'PresentToAll',
+	props: {
+		title: {
+			type: String,
+			default: 'Present To All icon',
+		},
+		decorative: {
+			type: Boolean,
+			default: false,
+		},
+		fillColor: {
+			type: String,
+			default: 'currentColor',
+		},
+		size: {
+			type: Number,
+			default: 24,
+		},
+	},
+}
+</script>