Add background images

Signed-off-by: Marco <marcoambrosini@icloud.com>

8 files changed, 60 insertions, 14 deletions

diff --git a/img/backgrounds/1.jpg b/img/backgrounds/1.jpg
new file mode 100644
index 000000000..53af21302
--- /dev/null
+++ b/img/backgrounds/1.jpg
diff --git a/img/backgrounds/2.jpg b/img/backgrounds/2.jpg
new file mode 100644
index 000000000..5ffc2b997
--- /dev/null
+++ b/img/backgrounds/2.jpg
diff --git a/img/backgrounds/3.jpg b/img/backgrounds/3.jpg
new file mode 100644
index 000000000..110ce6fad
--- /dev/null
+++ b/img/backgrounds/3.jpg
diff --git a/img/backgrounds/4.jpg b/img/backgrounds/4.jpg
new file mode 100644
index 000000000..412496c1c
--- /dev/null
+++ b/img/backgrounds/4.jpg
diff --git a/img/backgrounds/5.jpg b/img/backgrounds/5.jpg
new file mode 100644
index 000000000..b97acbece
--- /dev/null
+++ b/img/backgrounds/5.jpg
diff --git a/img/backgrounds/6.jpg b/img/backgrounds/6.jpg
new file mode 100644
index 000000000..88163cae4
--- /dev/null
+++ b/img/backgrounds/6.jpg
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index a83b39acd..d5f2f29f7 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -123,8 +123,7 @@
 			<VideoBackgroundEditor v-if="showBackgroundEditor"
 				:virtual-background="virtualBackground"
 				:token="token"
-				@clear="clearBackground"
-				@blur="blurBackground" />
+				@update-background="handleUpdateBackground" />
 
 			<!-- "Always show" setting -->
 			<NcCheckboxRadioSwitch :checked.sync="showMediaSettings"
@@ -404,6 +403,14 @@ export default {
 			}
 		},
 
+		handleUpdateBackground(background) {
+			if (background === 'clear') {
+				this.clearBackground()
+			} else if (background === 'blur') {
+				this.blurBackground()
+			}
+		},
+
 		clearBackground() {
 			localStorage.setItem('virtualBackgroundEnabled_' + this.token, 'false')
 			this.blurOn = false
diff --git a/src/components/MediaSettings/VideoBackgroundEditor.vue b/src/components/MediaSettings/VideoBackgroundEditor.vue
index 0649a14be..5562d808d 100644
--- a/src/components/MediaSettings/VideoBackgroundEditor.vue
+++ b/src/components/MediaSettings/VideoBackgroundEditor.vue
@@ -21,29 +21,48 @@
 
 <template>
 	<div class="background-editor">
-		<button class="background-editor__element"
-			@click="clearBackground">
+		<button key="clear"
+			class="background-editor__element"
+			:class="{'background-editor__element--selected': selectedBackground === 'clear'}"
+			@click="handleSelectBackground('clear')">
 			<Cancel :size="20" />
 			{{ t('spreed', 'clear') }}
 		</button>
-		<button :disabled="!blurPreviewAvailable"
+		<button key="blur"
+			:disabled="!blurPreviewAvailable"
 			class="background-editor__element"
-			@click="blurBackground">
+			:class="{'background-editor__element--selected': selectedBackground === 'blur'}"
+			@click="handleSelectBackground('blur')">
 			<Blur :size="20" />
 			{{ t('spreed', 'blur') }}
 		</button>
-		<button class="background-editor__element">
+		<button key="upload" class="background-editor__element">
 			<ImagePlus :size="20" />
 			{{ t('spreed', 'upload') }}
 		</button>
+		<button v-for="path in backgrounds"
+			:key="path"
+			class="background-editor__element"
+			:class="{'background-editor__element--selected': selectedBackground === path}"
+			:style="{
+				'background-image': 'url(' + path + ')'
+			}"
+			@click="handleSelectBackground(path)">
+			<CheckBold v-if="selectedBackground === path"
+				:size="40"
+				fill-color="#fff" />
+		</button>
 	</div>
 </template>
 
 <script>
 import Blur from 'vue-material-design-icons/Blur.vue'
 import Cancel from 'vue-material-design-icons/Cancel.vue'
+import CheckBold from 'vue-material-design-icons/CheckBold.vue'
 import ImagePlus from 'vue-material-design-icons/ImagePlus.vue'
 
+import { imagePath } from '@nextcloud/router'
+
 export default {
 	name: 'VideoBackgroundEditor',
 
@@ -51,6 +70,7 @@ export default {
 		Cancel,
 		Blur,
 		ImagePlus,
+		CheckBold,
 	},
 
 	props: {
@@ -65,19 +85,33 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			selectedBackground: undefined,
+		}
+	},
+
 	computed: {
 		blurPreviewAvailable() {
 			return this.virtualBackground.isAvailable()
 		},
-	},
 
-	methods: {
-		clearBackground() {
-			this.$emit('clear')
+		backgrounds() {
+			return [
+				imagePath('spreed', 'backgrounds/1.jpg'),
+				imagePath('spreed', 'backgrounds/2.jpg'),
+				imagePath('spreed', 'backgrounds/3.jpg'),
+				imagePath('spreed', 'backgrounds/4.jpg'),
+				imagePath('spreed', 'backgrounds/5.jpg'),
+				imagePath('spreed', 'backgrounds/6.jpg'),
+			]
 		},
+	},
 
-		blurBackground() {
-			this.$emit('blur')
+	methods: {
+		handleSelectBackground(background) {
+			this.$emit('update-background', background)
+			this.selectedBackground = background
 		},
 	},
 }
@@ -99,7 +133,12 @@ export default {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		align-content: center;
+		align-items: center;
+		background-size: cover;
+
+		&--selected {
+			box-shadow: inset 0 0 calc(var(--default-grid-baseline) * 4) var(--color-main-background);
+		}
 	 }
 }
 </style>