Merge pull request #12698 from nextcloud/fix/noid/replace-vue-shortke…

…y-directive
nextcloud · Aug 22, 2024 · d646635 · d646635
2 parents 97e22d0 + 43fdc1b
commit d646635
Show file tree

Hide file tree

Showing 15 changed files with 63 additions and 166 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,7 +63,6 @@
     "vue-frag": "^1.4.3",
     "vue-material-design-icons": "^5.3.0",
     "vue-router": "^3.6.5",
-    "vue-shortkey": "^3.1.7",
     "vue-virtual-scroller": "^1.1.2",
     "vue2-leaflet": "^2.7.1",
     "vuex": "^3.6.2",

diff --git a/src/App.vue b/src/App.vue
@@ -4,10 +4,8 @@
 -->
 
 <template>
-	<NcContent v-shortkey.once="disableKeyboardShortcuts ? null : ['ctrl', 'f']"
-		:class="{ 'icon-loading': loading, 'in-call': isInCall }"
-		app-name="talk"
-		@shortkey.native="handleAppSearch">
+	<NcContent :class="{ 'icon-loading': loading, 'in-call': isInCall }"
+		app-name="talk">
 		<LeftSidebar v-if="getUserId && !isFullscreen" ref="leftSidebar" />
 		<NcAppContent>
 			<router-view />
@@ -30,6 +28,7 @@ import { generateUrl } from '@nextcloud/router'
 
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
+import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
 import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js'
 
 import ConversationSettingsDialog from './components/ConversationSettings/ConversationSettingsDialog.vue'
@@ -186,10 +185,6 @@ export default {
 			return this.currentConversation?.type === CONVERSATION.TYPE.ONE_TO_ONE
 				|| this.currentConversation?.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER
 		},
-
-		disableKeyboardShortcuts() {
-			return OCP.Accessibility.disableKeyboardShortcuts()
-		},
 	},
 
 	watch: {
@@ -246,6 +241,7 @@ export default {
 
 	created() {
 		window.addEventListener('beforeunload', this.preventUnload)
+		useHotKey('f', this.handleAppSearch, { ctrl: true, stop: true, prevent: true })
 	},
 
 	beforeDestroy() {

diff --git a/src/PublicShareAuthRequestPasswordButton.vue b/src/PublicShareAuthRequestPasswordButton.vue
@@ -12,8 +12,7 @@
 				type="primary"
 				:wide="true"
 				:disabled="isRequestInProgress"
-				@click="requestPassword"
-				@keydown.enter="requestPassword">
+				@click="requestPassword">
 				{{ t('spreed', 'Request password') }}
 			</NcButton>
 		</div>

diff --git a/src/components/CallView/shared/LocalAudioControlButton.vue b/src/components/CallView/shared/LocalAudioControlButton.vue
@@ -4,12 +4,10 @@
 -->
 
 <template>
-	<NcButton v-shortkey.once="disableKeyboardShortcuts ? null : ['m']"
-		v-tooltip="audioButtonTooltip"
+	<NcButton v-tooltip="audioButtonTooltip"
 		:type="type"
 		:aria-label="audioButtonAriaLabel"
 		:class="{ 'no-audio-available': !isAudioAllowed || !model.attributes.audioAvailable }"
-		@shortkey="toggleAudio"
 		@click.stop="toggleAudio">
 		<template #icon>
 			<VolumeIndicator :audio-preview-available="model.attributes.audioAvailable"
@@ -26,6 +24,7 @@ import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import VolumeIndicator from '../../UIShared/VolumeIndicator.vue'
@@ -128,6 +127,11 @@ export default {
 		},
 	},
 
+	created() {
+		useHotKey('m', this.toggleAudio)
+		useHotKey(' ', this.toggleAudio, { push: true })
+	},
+
 	mounted() {
 		subscribe('local-audio-control-button:toggle-audio', this.updateDeviceState)
 	},

diff --git a/src/components/CallView/shared/LocalVideoControlButton.vue b/src/components/CallView/shared/LocalVideoControlButton.vue
@@ -4,12 +4,10 @@
 -->
 
 <template>
-	<NcButton v-shortkey.once="disableKeyboardShortcuts ? null : ['v']"
-		v-tooltip="videoButtonTooltip"
+	<NcButton v-tooltip="videoButtonTooltip"
 		:type="type"
 		:aria-label="videoButtonAriaLabel"
 		:class="{ 'no-video-available': !isVideoAllowed || !model.attributes.videoAvailable }"
-		@shortkey="toggleVideo"
 		@click.stop="toggleVideo">
 		<template #icon>
 			<VideoIcon v-if="showVideoOn" :size="20" />
@@ -26,6 +24,7 @@ import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { PARTICIPANT } from '../../../constants.js'
@@ -123,6 +122,10 @@ export default {
 		},
 	},
 
+	created() {
+		useHotKey('v', this.toggleVideo)
+	},
+
 	mounted() {
 		subscribe('local-video-control-button:toggle-video', this.updateDeviceState)
 	},
@@ -134,14 +137,6 @@ export default {
 	methods: {
 		t,
 		toggleVideo() {
-			/**
-			 * Abort toggling the video if the 'v' key is lifted when pasting an
-			 * image in the new message form.
-			 */
-			if (document.getElementsByClassName('upload-editor').length !== 0) {
-				return
-			}
-
 			if (!this.model.attributes.videoAvailable) {
 				emit('talk:media-settings:show')
 				return

diff --git a/src/components/ConversationSettings/LinkShareSettings.vue b/src/components/ConversationSettings/LinkShareSettings.vue
@@ -57,17 +57,15 @@
 
 		<div class="app-settings-subsection__buttons">
 			<NcButton ref="copyLinkButton"
-				@click="handleCopyLink"
-				@keydown.enter="handleCopyLink">
+				@click="handleCopyLink">
 				<template #icon>
 					<ClipboardTextOutline />
 				</template>
 				{{ t('spreed', 'Copy conversation link') }}
 			</NcButton>
 			<NcButton v-if="isSharedPublicly && canModerate"
 				:disabled="isSendingInvitations"
-				@click="handleResendInvitations"
-				@keydown.enter="handleResendInvitations">
+				@click="handleResendInvitations">
 				<template #icon>
 					<Email />
 				</template>

diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
@@ -74,7 +74,6 @@
 					<p>{{ t('spreed','Adding a mention will only notify users who did not read the message.') }}</p>
 				</NcNoteCard>
 				<NcRichContenteditable ref="richContenteditable"
-					v-shortkey.once="$options.disableKeyboardShortcuts ? null : ['c']"
 					:value.sync="text"
 					:auto-complete="autoComplete"
 					:disabled="disabled"
@@ -83,7 +82,6 @@
 					:placeholder="placeholderText"
 					:aria-label="placeholderText"
 					dir="auto"
-					@shortkey="focusInput"
 					@keydown.esc="handleInputEsc"
 					@keydown.ctrl.up="handleEditLastMessage"
 					@input="handleTyping"
@@ -192,6 +190,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
+import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
 
 import NewMessageAbsenceInfo from './NewMessageAbsenceInfo.vue'
 import NewMessageAttachments from './NewMessageAttachments.vue'
@@ -215,13 +214,9 @@ import { fetchClipboardContent } from '../../utils/clipboard.js'
 import { isDarkTheme } from '../../utils/isDarkTheme.js'
 import { parseSpecialSymbols } from '../../utils/textParse.ts'
 
-const disableKeyboardShortcuts = OCP.Accessibility.disableKeyboardShortcuts()
-
 export default {
 	name: 'NewMessage',
 
-	disableKeyboardShortcuts,
-
 	components: {
 		FilePickerVue,
 		NcActionButton,
@@ -537,6 +532,10 @@ export default {
 		},
 	},
 
+	created() {
+		useHotKey('c', this.focusInput, { stop: true, prevent: true })
+	},
+
 	mounted() {
 		EventBus.on('focus-chat-input', this.focusInput)
 		EventBus.on('upload-start', this.handleUploadSideEffects)

diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue
@@ -3,9 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div v-shortkey.push="disableKeyboardShortcuts ? null : ['space']"
-		class="buttons-bar"
-		@shortkey="handleShortkey">
+	<div class="buttons-bar">
 		<div class="network-connection-state">
 			<NcPopover v-if="qualityWarningTooltip"
 				:boundary="boundaryElement"
@@ -44,8 +42,7 @@
 			</NcPopover>
 		</div>
 
-		<LocalAudioControlButton ref="audioControl"
-			:token="token"
+		<LocalAudioControlButton :token="token"
 			:conversation="conversation"
 			:model="model"
 			type="tertiary" />
@@ -191,8 +188,6 @@ export default {
 			boundaryElement: document.querySelector('.main-view'),
 			mouseover: false,
 			qualityWarningInGracePeriodTimeout: null,
-			audioEnabledBeforeSpacebarKeydown: undefined,
-			spacebarKeyDown: false,
 		}
 	},
 
@@ -377,10 +372,6 @@ export default {
 
 			return tooltip
 		},
-
-		disableKeyboardShortcuts() {
-			return OCP.Accessibility.disableKeyboardShortcuts()
-		},
 	},
 
 	watch: {
@@ -409,29 +400,6 @@ export default {
 
 	methods: {
 		t,
-		/**
-		 * This method executes on spacebar keydown and keyup
-		 */
-		handleShortkey() {
-			if (!this.model.attributes.audioAvailable) {
-				return
-			}
-
-			if (!this.spacebarKeyDown) {
-				this.audioEnabledBeforeSpacebarKeydown = this.model.attributes.audioEnabled
-				this.spacebarKeyDown = true
-				this.$refs.audioControl.toggleAudio()
-			} else {
-				this.spacebarKeyDown = false
-				if (this.audioEnabledBeforeSpacebarKeydown) {
-					this.model.enableAudio()
-				} else {
-					this.model.disableAudio()
-				}
-				this.audioEnabledBeforeSpacebarKeydown = undefined
-			}
-
-		},
 
 		setSpeakingWhileMutedNotification(message) {
 			this.speakingWhileMutedNotification = message