Skip to content

Commit

Permalink
refactor(timelapse): refactor the timelapse status panel (#1982)
Browse files Browse the repository at this point in the history
  • Loading branch information
meteyou authored Aug 27, 2024
1 parent cab5ea6 commit 21dab39
Show file tree
Hide file tree
Showing 3 changed files with 314 additions and 296 deletions.
134 changes: 134 additions & 0 deletions src/components/dialogs/TimelapseRenderingsettingsDialog.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
<template>
<v-dialog :value="show" :max-width="700" :max-height="500">
<panel
:title="$t('Timelapse.RenderSettings')"
:icon="mdiTextBoxSearchOutline"
card-class="timelapse-rendersettings-dialog-panel"
:margin-bottom="false">
<template #buttons>
<v-btn icon @click="close">
<v-icon>{{ mdiCloseThick }}</v-icon>
</v-btn>
</template>
<v-card-text class="">
<v-row>
<v-col class="col-4">
<v-select
v-model="variable_fps"
:label="$t('Timelapse.Type')"
:items="framerateTypeOptions"
outlined
dense
hide-details />
</v-col>
<v-col class="col-4">
<template v-if="variable_fps">
<v-text-field
v-model="variable_fps_min"
:label="$t('Timelapse.MinFramerate')"
type="number"
outlined
dense
hide-details
hide-spin-buttons />
<v-text-field
v-model="variable_fps_max"
:label="$t('Timelapse.MaxFramerate')"
type="number"
outlined
dense
hide-details
hide-spin-buttons
class="mt-3" />
<v-text-field
v-model="targetlength"
:label="$t('Timelapse.Targetlength')"
type="number"
outlined
dense
hide-details
hide-spin-buttons
class="mt-3" />
</template>
<v-text-field
v-else
v-model="output_framerate"
:label="$t('Timelapse.Framerate')"
type="number"
outlined
dense
hide-details
hide-spin-buttons />
<v-text-field
v-model="duplicatelastframe"
:label="$t('Timelapse.DuplicateLastframe')"
type="number"
outlined
dense
hide-details
hide-spin-buttons
class="mt-3" />
</v-col>
<v-col class="col-4">
<v-text-field
v-if="variable_fps"
v-model="variableTargetFps"
:label="$t('Timelapse.TargetFps')"
type="number"
outlined
dense
hide-details
readonly
class="mb-3" />
<v-text-field
v-model="estimatedVideoLength"
:label="$t('Timelapse.EstimatedLength')"
outlined
dense
hide-details
readonly />
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn text @click="close">{{ $t('Timelapse.Cancel') }}</v-btn>
<v-btn text color="primary" @click="startRender">{{ $t('Timelapse.StartRender') }}</v-btn>
</v-card-actions>
</panel>
</v-dialog>
</template>
<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import Panel from '@/components/ui/Panel.vue'
import SettingsRow from '@/components/settings/SettingsRow.vue'
import BaseMixin from '@/components/mixins/base'
import TimelapseMixin from '@/components/mixins/timelapse'
import { mdiCloseThick, mdiTextBoxSearchOutline } from '@mdi/js'
@Component({
components: { Panel, SettingsRow },
})
export default class TimelapseRenderingsettingsDialog extends Mixins(BaseMixin, TimelapseMixin) {
mdiCloseThick = mdiCloseThick
mdiTextBoxSearchOutline = mdiTextBoxSearchOutline
@Prop({ type: Boolean, default: false }) show!: boolean
get framerateTypeOptions() {
return [
{ value: false, text: this.$t('Timelapse.Fixed') },
{ value: true, text: this.$t('Timelapse.Variable') },
]
}
startRender() {
this.$socket.emit('machine.timelapse.render', {})
this.close()
}
close() {
this.$emit('close')
}
}
</script>
78 changes: 78 additions & 0 deletions src/components/mixins/timelapse.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import Component from 'vue-class-component'
import Vue from 'vue'

@Component
export default class TimelapseMixin extends Vue {
get variable_fps() {
return this.$store.state.server.timelapse?.settings?.variable_fps ?? false
}

set variable_fps(newVal) {
this.$store.dispatch('server/timelapse/saveSetting', { variable_fps: newVal })
}

get variable_fps_min() {
return this.$store.state.server.timelapse?.settings?.variable_fps_min ?? 5
}

set variable_fps_min(newVal) {
this.$store.dispatch('server/timelapse/saveSetting', { variable_fps_min: newVal })
}

get variable_fps_max() {
return this.$store.state.server.timelapse?.settings?.variable_fps_max ?? 60
}

set variable_fps_max(newVal) {
this.$store.dispatch('server/timelapse/saveSetting', { variable_fps_max: newVal })
}

get targetlength() {
return this.$store.state.server.timelapse?.settings?.targetlength ?? 10
}

set targetlength(newVal) {
this.$store.dispatch('server/timelapse/saveSetting', { targetlength: newVal })
}

get output_framerate() {
return this.$store.state.server.timelapse?.settings?.output_framerate ?? 30
}

set output_framerate(newVal) {
this.$store.dispatch('server/timelapse/saveSetting', { output_framerate: newVal })
}

get duplicatelastframe() {
return this.$store.state.server.timelapse?.settings?.duplicatelastframe ?? 0
}

set duplicatelastframe(newVal) {
this.$store.dispatch('server/timelapse/saveSetting', { duplicatelastframe: newVal })
}

get framesCount() {
return this.$store.state.server.timelapse?.lastFrame?.count ?? 0
}

get estimatedVideoLength() {
let seconds = Math.round((this.framesCount + this.duplicatelastframe) / this.output_framerate)

if (this.variable_fps) {
seconds = Math.round((this.framesCount + this.duplicatelastframe) / this.variableTargetFps)
if (seconds < this.targetlength) seconds = this.targetlength
}

return seconds > 60
? Math.floor(seconds / 60) + 'm ' + (seconds - Math.floor(seconds / 60) * 60) + 's'
: seconds + 's'
}

get variableTargetFps() {
let targetFps = Math.floor(this.framesCount / this.targetlength)
targetFps = Math.max(targetFps, this.variable_fps_min)
targetFps = Math.min(targetFps, this.variable_fps_max)

return targetFps
}
}
Loading

0 comments on commit 21dab39

Please sign in to comment.