This commit is contained in:
Craig 2020-02-11 06:11:07 +00:00
parent 4fe1d481a0
commit 1eff8c7ccc

View File

@ -1,10 +1,15 @@
<template> <template>
<vue-context class="context" ref="context"> <vue-context class="context" ref="context">
<template v-for="(conf, i) in configurations"> <template v-for="(conf, i) in configurations">
<li v-for="(rate, j) in conf.rates" :key="`${i}-${j}`" @click="screenSet(conf.width, conf.height, rate)"> <li
v-for="(fps, j) in conf.rates"
:key="`${i}-${j}`"
@click="screenSet(conf.width, conf.height, fps)"
:class="[conf.width === width && conf.height === height && fps === rate ? 'active' : '']"
>
<i class="fas fa-desktop"></i> <i class="fas fa-desktop"></i>
<span>{{ conf.width }}x{{ conf.height }}</span> <span>{{ conf.width }}x{{ conf.height }}</span>
<small>{{ rate }}</small> <small>{{ fps }}</small>
</li> </li>
</template> </template>
</vue-context> </vue-context>
@ -57,6 +62,7 @@
flex-direction: row; flex-direction: row;
padding: 8px 5px; padding: 8px 5px;
cursor: pointer; cursor: pointer;
border-radius: 3px;
i { i {
margin-right: 10px; margin-right: 10px;
@ -72,6 +78,7 @@
align-self: flex-end; align-self: flex-end;
} }
&.active,
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
@ -106,6 +113,18 @@
export default class extends Vue { export default class extends Vue {
@Ref('context') readonly context!: any @Ref('context') readonly context!: any
get width() {
return this.$accessor.video.width
}
get height() {
return this.$accessor.video.height
}
get rate() {
return this.$accessor.video.rate
}
get configurations() { get configurations() {
return this.$accessor.video.configurations return this.$accessor.video.configurations
} }