diff options
author | Marco <marcoambrosini@icloud.com> | 2023-04-17 15:53:28 +0100 |
---|---|---|
committer | Marco <marcoambrosini@icloud.com> | 2023-04-18 06:35:39 +0100 |
commit | 7fea6e5c2744be499abc1748d83ad52ad145943b (patch) | |
tree | 5b1c0b5c8bd75f4ca7281ee9419bea34d3571537 | |
parent | e5a905d0fe0c395f352e9f758de87e89ab005f68 (diff) |
Add background images
Signed-off-by: Marco <marcoambrosini@icloud.com>
-rw-r--r-- | img/backgrounds/1.jpg | bin | 0 -> 817664 bytes | |||
-rw-r--r-- | img/backgrounds/2.jpg | bin | 0 -> 3750726 bytes | |||
-rw-r--r-- | img/backgrounds/3.jpg | bin | 0 -> 5275421 bytes | |||
-rw-r--r-- | img/backgrounds/4.jpg | bin | 0 -> 894747 bytes | |||
-rw-r--r-- | img/backgrounds/5.jpg | bin | 0 -> 3820558 bytes | |||
-rw-r--r-- | img/backgrounds/6.jpg | bin | 0 -> 1117294 bytes | |||
-rw-r--r-- | src/components/MediaSettings/MediaSettings.vue | 11 | ||||
-rw-r--r-- | src/components/MediaSettings/VideoBackgroundEditor.vue | 63 |
8 files changed, 60 insertions, 14 deletions
diff --git a/img/backgrounds/1.jpg b/img/backgrounds/1.jpg Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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> |