revil-O/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

[Camera UI] Don't overflow the screen size.

Browse source
This commit is contained in:
Fabio Manganiello 2024-07-20 02:56:53 +02:00
parent 579f9816e2
commit 8291a97cd9
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 50 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
platypush/backend/http/webapp/src/components/panels/Camera/Mixin.vue
View file

@ -113,18 +113,10 @@ export default {
const rot = degToRad(this.params.rotate)
const outerWidth = this.$refs.frameContainer.parentElement.offsetWidth
const outerHeight = this.$refs.frameContainer.parentElement.offsetHeight
let width = (
Math.round(
this.params.scale_x * Math.abs(this.params.resolution[0] * Math.cos(rot) + this.params.resolution[1] * Math.sin(rot))
) + 'px'
)
let height = (
Math.round(
this.params.scale_y * Math.abs(this.params.resolution[0] * Math.sin(rot) + this.params.resolution[1] * Math.cos(rot))
) + 'px'
)
const maxWidth = this.$refs.cameraRoot?.offsetWidth || outerWidth
const maxHeight = this.$refs.cameraRoot?.offsetHeight || outerHeight
let width = '100%'
let height = '100%'
if (this.fullscreen_) {
if (this.params.resolution[0] > this.params.resolution[1]) {
@ -134,6 +126,20 @@ export default {
height = '100%'
width = (outerWidth * (this.params.resolution[0] / this.params.resolution[1])) + 'px'
}
} else {
width = Math.min(
maxWidth,
Math.round(
this.params.scale_x * Math.abs(this.params.resolution[0] * Math.cos(rot) + this.params.resolution[1] * Math.sin(rot))
)
) + 'px'
height = Math.min(
maxHeight,
Math.round(
this.params.scale_y * Math.abs(this.params.resolution[0] * Math.sin(rot) + this.params.resolution[1] * Math.cos(rot))
)
) + 'px'
}
this.$refs.frameContainer.style.width = width

33
platypush/backend/http/webapp/src/components/panels/Camera/common.scss
View file

@ -1,4 +1,5 @@
$camera-background: #101520;
$controls-height: 3.5em;
.camera {
width: 100%;
@ -9,6 +10,7 @@ $camera-background: #101520;
flex-direction: column;
align-items: center;
padding-top: 3em;
position: relative;
.camera-container {
display: flex;
@ -16,8 +18,32 @@ $camera-background: #101520;
align-items: center;
background: $camera-background;
.frame-container {
.frame-canvas {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.frame-container {
max-width: 100%;
max-height: 100%;
position: relative;
}
&.fullscreen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
.frame-canvas {
width: 100%;
height: calc(100% - #{$controls-height});
}
}
.frame, .no-frame {
@ -42,6 +68,7 @@ $camera-background: #101520;
.controls {
width: 100%;
height: $controls-height;
display: flex;
border-top: 1px solid #202530;
padding: .5em .25em;
@ -146,6 +173,10 @@ $camera-background: #101520;
}
}
.modal-container {
z-index: 1000;
}
.modal {
.content {
@media screen and (max-width: calc(#{$tablet} - 1px)) {