UI for manual zoom and video alignment
This commit is contained in:
parent
268ef7dae3
commit
746a78577e
@ -1,8 +1,11 @@
|
||||
<template>
|
||||
<div class="button center-text flex"
|
||||
:class="{'setting-selected': selected, 'w24': fixedWidth, 'flex-auto': !fixedWidth }"
|
||||
>
|
||||
{{label}}
|
||||
<div class="button center-text"
|
||||
:class="{'setting-selected': selected }"
|
||||
>
|
||||
<mdicon v-if="icon" :name="icon" class="icon" />
|
||||
<div class="label">
|
||||
{{label}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -12,6 +15,30 @@ export default {
|
||||
fixedWidth: Boolean,
|
||||
selected: Boolean,
|
||||
label: String,
|
||||
icon: String,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: none;
|
||||
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: 8px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,6 +2,8 @@ enum VideoAlignmentType {
|
||||
Left = 0,
|
||||
Center = 1,
|
||||
Right = 2,
|
||||
Top = 3,
|
||||
Bottom = 4,
|
||||
Default = -1
|
||||
};
|
||||
|
||||
|
||||
153
src/csui/PlayerUiPanels/AlignmentOptionsControlComponent.vue
Normal file
153
src/csui/PlayerUiPanels/AlignmentOptionsControlComponent.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="alignment-box">
|
||||
<div class="row">
|
||||
<div
|
||||
class="col top left"
|
||||
@click="align(VideoAlignment.Left, VideoAlignment.Top)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
<div
|
||||
class="col top center"
|
||||
@click="align(VideoAlignment.Center, VideoAlignment.Top)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
<div
|
||||
class="col top right"
|
||||
@click="align(VideoAlignment.Right, VideoAlignment.Top)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="col ycenter left"
|
||||
@click="align(VideoAlignment.Left, VideoAlignment.Center)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
<div
|
||||
class="col ycenter center"
|
||||
@click="align(VideoAlignment.Center, VideoAlignment.Center)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
<div
|
||||
class="col ycenter right"
|
||||
@click="align(VideoAlignment.Right, VideoAlignment.Center)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
class="col bottom left"
|
||||
@click="align(VideoAlignment.Left, VideoAlignment.Bottom)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
<div
|
||||
class="col bottom center"
|
||||
@click="align(VideoAlignment.Center, VideoAlignment.Bottom)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
<div
|
||||
class="col bottom right"
|
||||
@click="align(VideoAlignment.Right, VideoAlignment.Bottom)"
|
||||
>
|
||||
<div class="alignment-ui"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VideoAlignmentType from '../../common/enums/VideoAlignmentType.enum';
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
VideoAlignment: VideoAlignmentType
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
align() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.alignment-box {
|
||||
aspect-ratio: 1;
|
||||
width: 100%;
|
||||
min-width: 40px;
|
||||
max-width: 80px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.row {
|
||||
flex: 0 0 33%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 0 0 33%;
|
||||
|
||||
display: flex;
|
||||
|
||||
.alignment-ui {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.top {
|
||||
align-items: flex-start;
|
||||
|
||||
.alignment-ui {
|
||||
border-top: 3px solid #fff;
|
||||
}
|
||||
}
|
||||
&.bottom {
|
||||
align-items: flex-end;
|
||||
|
||||
.alignment-ui {
|
||||
border-bottom: 3px solid #fff;
|
||||
}
|
||||
}
|
||||
&.left {
|
||||
justify-content: flex-start;
|
||||
|
||||
.alignment-ui {
|
||||
border-left: 3px solid #fff;
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
justify-content: flex-end;
|
||||
|
||||
.alignment-ui {
|
||||
border-right: 3px solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.center.ycenter {
|
||||
|
||||
.alignment-ui {
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -42,53 +42,144 @@
|
||||
min, max and value need to be implemented in js as this slider
|
||||
should use logarithmic scale
|
||||
-->
|
||||
<div class="flex flex-row">
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="-5 %"
|
||||
<div class="flex flex-row flex-end">
|
||||
<Button
|
||||
v-if="zoomAspectRatioLocked"
|
||||
label="Unlock aspect ratio"
|
||||
icon="lock-open"
|
||||
:fixedWidth="true"
|
||||
@click="toggleZoomAr()"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="-1 %"
|
||||
</Button>
|
||||
<Button
|
||||
v-else
|
||||
label="Lock aspect ratio"
|
||||
icon="lock"
|
||||
:fixedWidth="true"
|
||||
@click="toggleZoomAr()"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<div class="flex-grow"></div>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="+1 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="+5 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
</Button>
|
||||
</div>
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="4"
|
||||
:value="logarithmicZoom"
|
||||
@input="changeZoom($event.target.value)"
|
||||
/>
|
||||
<div style="overflow: auto" class="flex flex-row">
|
||||
<div class="flex flex-grow medium-small x-pad-1em">
|
||||
Zoom: {{(zoom * 100).toFixed()}}%
|
||||
<template v-if="zoomAspectRatioLocked">
|
||||
<div class="flex flex-row">
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="-5 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="-1 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<div class="flex-grow"></div>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="+1 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="+5 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
</div>
|
||||
<div class="flex flex-nogrow flex-noshrink medium-small">
|
||||
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-t-0-33em display-block">
|
||||
<input id="_input_zoom_site_allow_pan"
|
||||
type="checkbox"
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="4"
|
||||
:value="logarithmicZoom"
|
||||
@input="changeZoom($event.target.value)"
|
||||
/>
|
||||
Pan with mouse
|
||||
</div>
|
||||
<div style="overflow: auto" class="flex flex-row">
|
||||
<div class="flex flex-grow medium-small x-pad-1em">
|
||||
Zoom: {{(zoom * 100).toFixed()}}%
|
||||
</div>
|
||||
<div class="flex flex-nogrow flex-noshrink medium-small">
|
||||
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>Horizontal zoom</div>
|
||||
<div class="flex flex-row">
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="-5 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="-1 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<div class="flex-grow"></div>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="+1 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="+5 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
</div>
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="4"
|
||||
:value="logarithmicZoom"
|
||||
@input="changeZoom($event.target.value)"
|
||||
/>
|
||||
|
||||
<div>Vertical zoom</div>
|
||||
<div class="flex flex-row">
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="-5 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="-1 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<div class="flex-grow"></div>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="+1 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
<ShortcutButton
|
||||
class="flex b3 flex-grow button"
|
||||
label="+5 %"
|
||||
>
|
||||
</ShortcutButton>
|
||||
</div>
|
||||
<input id="_input_zoom_slider"
|
||||
class="input-slider"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="4"
|
||||
:value="logarithmicZoom"
|
||||
@input="changeZoom($event.target.value)"
|
||||
/>
|
||||
|
||||
<div style="overflow: auto" class="flex flex-row">
|
||||
<div class="flex flex-grow medium-small x-pad-1em">
|
||||
Zoom: {{(zoomX * 100).toFixed()}}% x {{(zoomY * 100).toFixed()}}%
|
||||
</div>
|
||||
<div class="flex flex-nogrow flex-noshrink medium-small">
|
||||
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-panel">
|
||||
@ -96,14 +187,26 @@
|
||||
<mdicon name="align-horizontal-center" :size="32" />
|
||||
<h1>Video alignment:</h1>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap">
|
||||
|
||||
<div class="flex flex-row">
|
||||
<alignment-options-control-component>
|
||||
</alignment-options-control-component>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-wrap">
|
||||
<div class="m-t-0-33em display-block">
|
||||
<input id="_input_zoom_site_allow_pan"
|
||||
type="checkbox"
|
||||
/>
|
||||
Pan with mouse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from '../../common/components/Button.vue'
|
||||
import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser';
|
||||
import ShortcutButton from '../../common/components/ShortcutButton';
|
||||
import ComputeActionsMixin from '../../common/mixins/ComputeActionsMixin';
|
||||
@ -111,6 +214,7 @@ import ExecAction from '../ui-libs/ExecAction';
|
||||
import BrowserDetect from '../../ext/conf/BrowserDetect';
|
||||
import AspectRatioType from '../../common/enums/AspectRatioType.enum';
|
||||
import CropModePersistence from '../../common/enums/CropModePersistence.enum';
|
||||
import AlignmentOptionsControlComponent from './AlignmentOptionsControlComponent.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -118,6 +222,7 @@ export default {
|
||||
exec: null,
|
||||
scope: 'page',
|
||||
CropModePersistence: CropModePersistence,
|
||||
zoomAspectRatioLocked: true
|
||||
}
|
||||
},
|
||||
mixins: [
|
||||
@ -134,6 +239,8 @@ export default {
|
||||
},
|
||||
components: {
|
||||
ShortcutButton,
|
||||
Button,
|
||||
AlignmentOptionsControlComponent
|
||||
},
|
||||
computed: {
|
||||
logarithmicZoom: function(){
|
||||
@ -159,10 +266,15 @@ export default {
|
||||
}
|
||||
return KeyboardShortcutParser.parseShortcut(action.scopes.page.shortcut[0]);
|
||||
},
|
||||
|
||||
toggleZoomAr() {
|
||||
this.zoomAspectRatioLocked = !this.zoomAspectRatioLocked;
|
||||
},
|
||||
|
||||
resetZoom() {
|
||||
this.zoom = 1;
|
||||
},
|
||||
changeZoom(newZoom) {
|
||||
changeZoom(newZoom, axis) {
|
||||
newZoom = Math.pow(2, newZoom);
|
||||
|
||||
this.exec.exec(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user