refactor(timelapse): refactor the timelapse status panel (#1982)

src/components/dialogs/TimelapseRenderingsettingsDialog.vue

@@ -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>

src/components/mixins/timelapse.ts

@@ -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
+ }
+}