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