VideoBackgroundEditor.vue

<!--
  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
	<div class="background-editor">
		<button
			key="clear"
			class="background-editor__element"
			:class="{ 'background-editor__element--selected': selectedBackground === 'none' }"
			@click="handleSelectBackground('none')">
			<IconCancel :size="20" />
			{{
				// TRANSLATORS: "None" refers to "No background effect applied" in videos, for context, other options are "blur" or "image"
				t('spreed', 'None')
			}}
		</button>
		<button
			key="blur"
			class="background-editor__element"
			:class="{ 'background-editor__element--selected': selectedBackground === 'blur' }"
			@click="handleSelectBackground('blur')">
			<IconBlur :size="20" />
			{{ t('spreed', 'Blur') }}
		</button>
		<template v-if="predefinedBackgrounds?.length">
			<template v-if="canUploadBackgrounds">
				<button
					class="background-editor__element"
					@click="clickImportInput">
					<NcIconSvgWrapper :svg="IconFileUpload" :size="20" inline />
					{{ t('spreed', 'Upload') }}
				</button>
				<button
					class="background-editor__element"
					:class="{ 'background-editor__element--selected': isCustomBackground }"
					@click="showFilePicker">
					<IconFolder :size="20" />
					{{ t('spreed', 'Files') }}
				</button>
			</template>
			<button
				v-for="path in predefinedBackgroundsURLs"
				:key="path"
				:aria-label="ariaLabelForPredefinedBackground(path)"
				:title="ariaLabelForPredefinedBackground(path)"
				class="background-editor__element"
				:class="{ 'background-editor__element--selected': selectedBackground === path }"
				:style="{
					'background-image': 'url(' + path + ')',
				}"
				@click="handleSelectBackground(path)">
				<IconCheckBold
					v-if="selectedBackground === path"
					:size="40"
					fillColor="#fff" />
			</button>
		</template>
		<!--native file picker, hidden -->
		<input
			id="custom-background-file"
			ref="fileUploadInput"
			class="hidden-visually"
			multiple
			type="file"
			tabindex="-1"
			aria-hidden="true"
			@change="handleFileInput">
		<div class="background-editor__debug-controls">
			<label
				v-for="control in debugControls"
				:key="control.key"
				class="background-editor__debug-control">
				<span class="background-editor__debug-control-header">
					<span>{{ control.label }}</span>
					<span>{{ formatDebugConfigValue(control.key) }}</span>
				</span>
				<input
					:min="control.min"
					:max="control.max"
					:step="control.step"
					:value="debugConfigValues[control.key]"
					type="range"
					@input="handleDebugConfigInput(control.key, $event.target.value)">
			</label>
		</div>
	</div>
</template>

<script>
import { showError } from '@nextcloud/dialogs'
import { getFilePickerBuilder } from '@nextcloud/dialogs'
import { t } from '@nextcloud/l10n'
import { generateUrl, imagePath } from '@nextcloud/router'
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
import IconBlur from 'vue-material-design-icons/Blur.vue'
import IconCancel from 'vue-material-design-icons/Cancel.vue'
import IconCheckBold from 'vue-material-design-icons/CheckBold.vue'
import IconFolder from 'vue-material-design-icons/Folder.vue' // Filled as in Files app icon
import IconFileUpload from '../../../img/material-icons/file-upload.svg?raw'
import { VIRTUAL_BACKGROUND } from '../../constants.ts'
import BrowserStorage from '../../services/BrowserStorage.js'
import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
import { getDavClient } from '../../services/DavClient.ts'
import { useActorStore } from '../../stores/actor.ts'
import { useSettingsStore } from '../../stores/settings.ts'
import { findUniquePath } from '../../utils/fileUpload.ts'
import { VIRTUAL_BACKGROUND_DEBUG_CONFIG_RANGES, virtualBackgroundDebugConfig, setVirtualBackgroundDebugConfigValue } from '../../utils/media/effects/virtual-background/runtimeConfig.js'

const predefinedBackgroundLabels = {
	'1_office': t('spreed', 'Select virtual office background'),
	'2_home': t('spreed', 'Select virtual home background'),
	'3_abstract': t('spreed', 'Select virtual abstract background'),
	'4_beach': t('spreed', 'Select virtual beach background'),
	'5_park': t('spreed', 'Select virtual park background'),
	'6_theater': t('spreed', 'Select virtual theater background'),
	'7_library': t('spreed', 'Select virtual library background'),
	'8_space_station': t('spreed', 'Select virtual space station background'),
}

const virtualBackgroundDebugControlLabels = {
	DEFAULT_BLUR_PASSES: t('spreed', 'Blur passes'),
	SIGMA_SPACE: t('spreed', 'Sigma space'),
	SIGMA_COLOR: t('spreed', 'Sigma color'),
	SPARSITY_FACTOR: t('spreed', 'Sparsity factor'),
	DEFAULT_FRAME_RATE: t('spreed', 'Default frame rate'),
	MAX_SEGMENTATION_FRAME_RATE: t('spreed', 'Max segmentation frame rate'),
}

const virtualBackgroundDebugControlFractionDigits = {
	DEFAULT_BLUR_PASSES: 0,
	SIGMA_SPACE: 1,
	SIGMA_COLOR: 2,
	SPARSITY_FACTOR: 2,
	DEFAULT_FRAME_RATE: 0,
	MAX_SEGMENTATION_FRAME_RATE: 0,
}

export default {
	name: 'VideoBackgroundEditor',

	components: {
		IconBlur,
		IconCancel,
		IconCheckBold,
		IconFolder,
		NcIconSvgWrapper,
	},

	props: {
		token: {
			type: String,
			required: true,
		},

		skipBlurVirtualBackground: {
			type: Boolean,
			default: false,
		},
	},

	emits: ['updateBackground'],

	setup() {
		return {
			IconFileUpload,
			canUploadBackgrounds: getTalkConfig('local', 'call', 'can-upload-background'),
			predefinedBackgrounds: getTalkConfig('local', 'call', 'predefined-backgrounds'),
			predefinedBackgroundsV2: getTalkConfig('local', 'call', 'predefined-backgrounds-v2'),
			settingsStore: useSettingsStore(),
			actorStore: useActorStore(),
		}
	},

	data() {
		return {
			selectedBackground: undefined,
			debugConfigValues: { ...virtualBackgroundDebugConfig },
		}
	},

	computed: {
		isCustomBackground() {
			return this.selectedBackground !== 'none'
				&& this.selectedBackground !== 'blur'
				&& !this.predefinedBackgroundsURLs.includes(this.selectedBackground)
		},

		predefinedBackgroundsURLs() {
			if (this.predefinedBackgroundsV2) {
				return this.predefinedBackgroundsV2
			}

			return this.predefinedBackgrounds.map((fileName) => {
				return imagePath('spreed', 'backgrounds/' + fileName)
			})
		},

		relativeBackgroundsFolderPath() {
			return this.settingsStore.attachmentFolder + '/Backgrounds'
		},

		debugControls() {
			return Object.entries(VIRTUAL_BACKGROUND_DEBUG_CONFIG_RANGES).map(([key, range]) => ({
				key,
				label: virtualBackgroundDebugControlLabels[key],
				fractionDigits: virtualBackgroundDebugControlFractionDigits[key],
				...range,
			}))
		},
	},

	async mounted() {
		this.loadBackground()

		if (this.actorStore.userId === null) {
			console.debug('Skip Talk backgrounds folder check and setup for participants that are not logged in')
			return
		}

		const userRoot = '/files/' + this.actorStore.userId
		const absoluteBackgroundsFolderPath = userRoot + this.relativeBackgroundsFolderPath

		try {
			// Create the backgrounds folder if it doesn't exist
			const client = getDavClient()
			if (await client.exists(absoluteBackgroundsFolderPath) === false) {
				await client.createDirectory(absoluteBackgroundsFolderPath)
			}
		} catch (error) {
			console.debug(error)
		}
	},

	methods: {
		t,
		handleSelectBackground(path) {
			this.$emit('updateBackground', path)
			this.selectedBackground = path
		},

		/**
		 * Clicks the hidden file input and opens the file-picker
		 */
		clickImportInput() {
			this.$refs.fileUploadInput.click()
		},

		async handleFileInput(event) {
			// Make file path
			const file = event.target.files[0]

			// Clear input to ensure that the change event will be emitted if
			// the same file is picked again.
			event.target.value = ''

			// userRoot path
			const userRoot = '/files/' + this.actorStore.userId

			const filePath = this.settingsStore.attachmentFolder + '/Backgrounds/' + file.name

			const client = getDavClient()
			// Get a unique relative path based on the previous path variable
			const { uniquePath } = await findUniquePath(client, userRoot, filePath)

			try {
				// Upload the file
				const fileBuffer = await new Blob([file]).arrayBuffer()
				await client.putFileContents(userRoot + uniquePath, fileBuffer, {
					contentLength: file.size,
				})

				const previewURL = await generateUrl('/core/preview.png?file={path}&x=-1&y={height}&a=1', {
					path: filePath,
					height: 1080,
				})

				this.handleSelectBackground(previewURL)
			} catch (error) {
				console.debug(error)
				showError(t('spreed', 'Error while uploading the file'))
			}
		},

		async showFilePicker() {
			const filePicker = getFilePickerBuilder(t('spreed', 'Select a file'))
				.setContainer('.media-settings')
				.startAt(this.relativeBackgroundsFolderPath)
				.setMultiSelect(false)
				.addButton({
					label: t('spreed', 'Confirm'),
					callback: (nodes) => this.handleFileChoose(nodes),
					variant: 'primary',
				})
				.build()
			await filePicker.pickNodes()
		},

		handleFileChoose(nodes) {
			const path = nodes[0]?.path
			if (!path) {
				return
			}

			if (!path.startsWith('/')) {
				throw new Error(t('files', 'Invalid path selected'))
			}

			const previewURL = generateUrl('/core/preview.png?file={path}&x=-1&y={height}&a=1', {
				path,
				height: 1080,
			})

			this.handleSelectBackground(previewURL)
		},

		handleDebugConfigInput(key, value) {
			this.debugConfigValues[key] = setVirtualBackgroundDebugConfigValue(key, value)
		},

		formatDebugConfigValue(key) {
			const value = this.debugConfigValues[key]
			const fractionDigits = virtualBackgroundDebugControlFractionDigits[key]

			return fractionDigits > 0 ? value.toFixed(fractionDigits) : String(value)
		},

		loadBackground() {
			// Set virtual background depending on browser storage's settings
			if (BrowserStorage.getItem('virtualBackgroundEnabled') === 'true') {
				if (BrowserStorage.getItem('virtualBackgroundType') === VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR) {
					this.selectedBackground = 'blur'
				} else if (BrowserStorage.getItem('virtualBackgroundType') === VIRTUAL_BACKGROUND.BACKGROUND_TYPE.IMAGE) {
					this.selectedBackground = BrowserStorage.getItem('virtualBackgroundUrl')
				} else {
					this.selectedBackground = 'none'
				}
			} else if (this.settingsStore.blurVirtualBackgroundEnabled && !this.skipBlurVirtualBackground) {
				this.selectedBackground = 'blur'
			} else {
				this.selectedBackground = 'none'
			}
		},

		ariaLabelForPredefinedBackground(path) {
			const fileName = path.split('/').pop().split('.').shift()

			return predefinedBackgroundLabels[fileName]
				?? t('spreed', 'Select virtual background from file {fileName}', { fileName })
		},
	},
}
</script>

<style scoped lang="scss">
.background-editor {
	--background-button-height: calc(var(--default-grid-baseline) * 16);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(var(--default-grid-baseline) * 2);
	margin-top: calc(var(--default-grid-baseline) * 2);
	max-height: calc(var(--background-button-height) * 3 + var(--default-grid-baseline) * 4);
	overflow-y: auto;

	&__debug-controls {
		grid-column: 1 / -1;
		display: grid;
		gap: calc(var(--default-grid-baseline) * 2);
	}

	&__debug-control {
		display: grid;
		gap: var(--default-grid-baseline);
	}

	&__debug-control-header {
		display: flex;
		justify-content: space-between;
		gap: calc(var(--default-grid-baseline) * 2);
		font-size: 12px;
	}

	&__element {
		border: none;
		margin: 0 !important;
		border-radius: var(--border-radius-element, calc(var(--border-radius-large) * 1.5));
		height: var(--background-button-height);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #1cafff2e;
		background-size: cover;
		background-position: center;
		flex: 1 0 108px;

		&--selected {
			box-shadow: inset 0 0 0 var(--default-grid-baseline) var(--color-primary-element);
		}

		&:focus-visible {
			// Do not overflow container
			outline-offset: -2px; // inline with server's global focus outline
		}
	}
}

</style>