Mirrors
/
nextcloud-spreed
mirror of https://github.com/nextcloud/spreed
3
0
Fork 0
Code Releases Activity
Browse Source

Merge pull request #14028 from nextcloud/feat/12187/zoom-in-screenshare

pull/14154/head
Maksim Sukharev 10 months ago
committed by GitHub
parent
d01783f41d 42e62b989c
commit
aa9a3f9bbf
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
4 changed files with 138 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 72
      package-lock.json
  2. 1
      package.json
  3. 69
      src/components/CallView/shared/Screen.vue
  4. 6
      src/components/SettingsDialog/SettingsDialog.vue

72
package-lock.json
View File

@ -44,6 +44,7 @@
"lodash": "^4.17.21",
"mitt": "^3.0.1",
"mockconsole": "0.0.1",
"panzoom": "^9.4.3",
"pinia": "^2.3.0",
"ua-parser-js": "^2.0.0",
"util": "^0.12.5",
@ -5638,6 +5639,15 @@
"ajv": "^6.9.1"
}
},
"node_modules/amator": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
"integrity": "sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==",
"license": "MIT",
"dependencies": {
"bezier-easing": "^2.0.3"
}
},
"node_modules/ansi-colors": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@ -6244,6 +6254,12 @@
"dev": true,
"peer": true
},
"node_modules/bezier-easing": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
"integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==",
"license": "MIT"
},
"node_modules/big.js": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@ -15393,6 +15409,12 @@
"resolved": "https://registry.npmjs.org/nested-property/-/nested-property-4.0.0.tgz",
"integrity": "sha512-yFehXNWRs4cM0+dz7QxCd06hTbWbSkV0ISsqBfkntU6TOY4Qm3Q88fRRLOddkGh2Qq6dZvnKVAahfhjcUvLnyA=="
},
"node_modules/ngraph.events": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.2.2.tgz",
"integrity": "sha512-JsUbEOzANskax+WSYiAPETemLWYXmixuPAlmZmhIbIj6FH/WDgEGCGnRwUQBK0GjOnVm8Ui+e5IJ+5VZ4e32eQ==",
"license": "BSD-3-Clause"
},
"node_modules/node-domexception": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@ -15979,6 +16001,17 @@
"dev": true,
"peer": true
},
"node_modules/panzoom": {
"version": "9.4.3",
"resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.3.tgz",
"integrity": "sha512-xaxCpElcRbQsUtIdwlrZA90P90+BHip4Vda2BC8MEb4tkI05PmR6cKECdqUCZ85ZvBHjpI9htJrZBxV5Gp/q/w==",
"license": "MIT",
"dependencies": {
"amator": "^1.1.0",
"ngraph.events": "^1.2.2",
"wheel": "^1.0.0"
}
},
"node_modules/parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@ -21188,6 +21221,12 @@
"node": ">=12"
}
},
"node_modules/wheel": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz",
"integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA==",
"license": "MIT"
},
"node_modules/which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@ -25522,6 +25561,14 @@
"dev": true,
"requires": {}
},
"amator": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
"integrity": "sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==",
"requires": {
"bezier-easing": "^2.0.3"
}
},
"ansi-colors": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@ -25978,6 +26025,11 @@
"dev": true,
"peer": true
},
"bezier-easing": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
"integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
},
"big.js": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@ -32723,6 +32775,11 @@
"resolved": "https://registry.npmjs.org/nested-property/-/nested-property-4.0.0.tgz",
"integrity": "sha512-yFehXNWRs4cM0+dz7QxCd06hTbWbSkV0ISsqBfkntU6TOY4Qm3Q88fRRLOddkGh2Qq6dZvnKVAahfhjcUvLnyA=="
},
"ngraph.events": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.2.2.tgz",
"integrity": "sha512-JsUbEOzANskax+WSYiAPETemLWYXmixuPAlmZmhIbIj6FH/WDgEGCGnRwUQBK0GjOnVm8Ui+e5IJ+5VZ4e32eQ=="
},
"node-domexception": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@ -33145,6 +33202,16 @@
"dev": true,
"peer": true
},
"panzoom": {
"version": "9.4.3",
"resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.3.tgz",
"integrity": "sha512-xaxCpElcRbQsUtIdwlrZA90P90+BHip4Vda2BC8MEb4tkI05PmR6cKECdqUCZ85ZvBHjpI9htJrZBxV5Gp/q/w==",
"requires": {
"amator": "^1.1.0",
"ngraph.events": "^1.2.2",
"wheel": "^1.0.0"
}
},
"parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@ -36979,6 +37046,11 @@
}
}
},
"wheel": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz",
"integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA=="
},
"which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",

1
package.json
View File

@ -59,6 +59,7 @@
"lodash": "^4.17.21",
"mitt": "^3.0.1",
"mockconsole": "0.0.1",
"panzoom": "^9.4.3",
"pinia": "^2.3.0",
"ua-parser-js": "^2.0.0",
"util": "^0.12.5",

69
src/components/CallView/shared/Screen.vue
View File

@ -23,6 +23,8 @@
<script>
import Hex from 'crypto-js/enc-hex.js'
import SHA1 from 'crypto-js/sha1.js'
import panzoom from 'panzoom'
import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
import { t } from '@nextcloud/l10n'
@ -62,9 +64,55 @@ export default {
},
},
setup() {
setup(props) {
const guestNameStore = useGuestNameStore()
return { guestNameStore }
const screen = ref(null)
const instance = ref(null)
const instanceTransform = ref({ x: 0, y: 0, scale: 1 })
const instanceGrabbing = ref(false)
const screenClass = computed(() => {
if (!props.isBig) {
return ['screen--fill']
} else {
return [
'screen--fit',
instanceTransform.value.scale === 1
? 'screen--magnify'
: (instanceGrabbing.value ? 'screen--grabbing' : 'screen--grab'),
]
}
})
onMounted(() => {
if (props.isBig) {
instance.value = panzoom(screen.value, {
minZoom: 1,
maxZoom: 8,
bounds: true,
boundsPadding: 1,
})
instance.value.on('zoom', (instance) => {
instanceTransform.value = instance.getTransform()
})
instance.value.on('panstart', () => {
instanceGrabbing.value = true
})
instance.value.on('panend', () => {
instanceGrabbing.value = false
})
}
})
onBeforeUnmount(() => {
instance.value?.dispose()
})
return {
guestNameStore,
screen,
screenClass,
}
},
computed: {
@ -110,14 +158,6 @@ export default {
return remoteParticipantName
},
screenClass() {
if (this.isBig) {
return 'screen--fit'
} else {
return 'screen--fill'
}
},
},
watch: {
@ -182,6 +222,15 @@ export default {
&--fill {
object-fit: cover;
}
&--magnify {
cursor: zoom-in;
}
&--grab {
cursor: grab;
}
&--grabbing {
cursor: grabbing;
}
}
</style>

6
src/components/SettingsDialog/SettingsDialog.vue
View File

@ -203,6 +203,12 @@
{{ t('spreed', 'Raise or lower hand') }}
</dd>
</div>
<div>
<dt><kbd>{{ t('spreed', 'Mouse wheel') }}</kbd></dt>
<dd class="shortcut-description">
{{ t('spreed', 'Zoom-in / zoom-out a screen share') }}
</dd>
</div>
</dl>
</NcAppSettingsSection>
</NcAppSettingsDialog>

Write Preview
Loading…
Cancel
Save