Merge pull request #2779 from nextcloud/bugfix/2755/shortcuts-for-media-controlls

Add shortcuts for audio and video control again

package-lock.json

@@ -4889,6 +4889,11 @@
 				"array-find-index": "^1.0.1"
 			}
 		},
+		"custom-event-polyfill": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+			"integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
+		},
 		"cyclist": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -5190,6 +5195,11 @@
 			"integrity": "sha512-EcKVmUeHCZelPA0wnIaSmpAN8karKhKBwFb+xLUjSVZ8sGRE1l3fst1zQZ7KJUkyJ7H5edPd4RP94pzC9sG00A==",
 			"dev": true
 		},
+		"element-matches": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/element-matches/-/element-matches-0.1.2.tgz",
+			"integrity": "sha512-yWh1otcs3OKUWDvu/IxyI36ZI3WNaRZlI0uG/DK6fu0pap0VYZ0J5pEGTk1zakme+hT0OKHwhlHc0N5TJhY6yQ=="
+		},
 		"elliptic": {
 			"version": "6.5.1",
 			"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.1.tgz",
@@ -12770,6 +12780,15 @@
 			"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.5.tgz",
 			"integrity": "sha512-BszkPvhl7I9h334GjckCh7sVFyjTPMMJFJ4Bsrem/Ik+B/9gt5tgrk8k4gGLO4ZpdvciVdg7O41gW4DisQWurg=="
 		},
+		"vue-shortkey": {
+			"version": "3.1.7",
+			"resolved": "https://registry.npmjs.org/vue-shortkey/-/vue-shortkey-3.1.7.tgz",
+			"integrity": "sha512-Wm/vPXXS+4Wl/LoYpD+cZc0J0HIoVlY8Ep0JLIqqswmAya3XUBtsqKbhzEf9sXo+3rZ5p1YsUyZfXas8XD7YjQ==",
+			"requires": {
+				"custom-event-polyfill": "^1.0.7",
+				"element-matches": "^0.1.2"
+			}
+		},
 		"vue-style-loader": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -39,6 +39,7 @@
 		"vue-observe-visibility": "^0.4.6",
 		"vue-prevent-unload": "^0.2.3",
 		"vue-router": "^3.1.5",
+		"vue-shortkey": "^3.1.7",
 		"vuex": "^3.1.2",
 		"webrtc-adapter": "^7.4.0",
 		"webrtcsupport": "^2.2.0",

src/components/CallView/LocalMediaControls.vue

@@ -23,9 +23,11 @@
 		<div id="muteWrapper">
 			<button
 				id="mute"
+				v-shortkey="['m']"
 				v-tooltip="audioButtonTooltip"
 				:class="audioButtonClass"
 				class="forced-white"
+				@shortkey="toggleAudio"
 				@click="toggleAudio" />
 			<span v-show="model.attributes.audioAvailable"
 				ref="volumeIndicator"
@@ -34,9 +36,11 @@
 		</div>
 		<button
 			id="hideVideo"
+			v-shortkey="['v']"
 			v-tooltip="videoButtonTooltip"
 			:class="videoButtonClass"
 			class="forced-white"
+			@shortkey="toggleVideo"
 			@click="toggleVideo" />
 		<button
 			v-if="!screenSharingButtonHidden"

src/main.js

@@ -41,6 +41,7 @@ import { getRequestToken } from '@nextcloud/auth'
 import VueClipboard from 'vue-clipboard2'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import VueObserveVisibility from 'vue-observe-visibility'
+import VueShortKey from 'vue-shortkey'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
@@ -62,6 +63,7 @@ Vue.use(Vuex)
 Vue.use(VueRouter)
 Vue.use(VueClipboard)
 Vue.use(VueObserveVisibility)
+Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
 
 export default new Vue({
 	el: '#content',

src/mainFilesSidebar.js

@@ -36,6 +36,7 @@ import { getRequestToken } from '@nextcloud/auth'
 
 // Directives
 import { translate, translatePlural } from '@nextcloud/l10n'
+import VueShortKey from 'vue-shortkey'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
@@ -54,6 +55,7 @@ Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
 Vue.use(Vuex)
+Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
 
 const newCallView = () => new Vue({
 	store,

src/mainPublicShareAuthSidebar.js

@@ -32,6 +32,7 @@ import { getRequestToken } from '@nextcloud/auth'
 
 // Directives
 import { translate, translatePlural } from '@nextcloud/l10n'
+import VueShortKey from 'vue-shortkey'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
@@ -50,6 +51,7 @@ Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
 Vue.use(Vuex)
+Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
 
 /**
  * Wraps all the body contents in its own container.

src/mainPublicShareSidebar.js

@@ -31,6 +31,7 @@ import { getRequestToken } from '@nextcloud/auth'
 
 // Directives
 import { translate, translatePlural } from '@nextcloud/l10n'
+import VueShortKey from 'vue-shortkey'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
@@ -49,6 +50,7 @@ Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
 Vue.use(Vuex)
+Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
 
 function adjustLayout() {
 	document.querySelector('#app-content').append(document.querySelector('footer'))