diff --git a/src/components/dialogs/TimelapseRenderingsettingsDialog.vue b/src/components/dialogs/TimelapseRenderingsettingsDialog.vue
new file mode 100644
index 000000000..035b84561
--- /dev/null
+++ b/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>
diff --git a/src/components/mixins/timelapse.ts b/src/components/mixins/timelapse.ts
new file mode 100644
index 000000000..c1ad6be45
--- /dev/null
+++ b/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
+    }
+}
diff --git a/src/components/panels/Timelapse/TimelapseStatusPanel.vue b/src/components/panels/Timelapse/TimelapseStatusPanel.vue
index 2129fc85c..29a3ca7d3 100644
--- a/src/components/panels/Timelapse/TimelapseStatusPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseStatusPanel.vue
@@ -1,223 +1,100 @@
-<style scoped></style>
-
 <template>
-    <div>
-        <v-card class="mb-3">
-            <v-toolbar flat dense>
-                <v-toolbar-title>
-                    <span class="subheading align-baseline">
-                        <v-icon left>{{ mdiInformation }}</v-icon>
-                        {{ $t('Timelapse.Status') }}
-                    </span>
-                </v-toolbar-title>
-            </v-toolbar>
-            <v-row no-gutters>
-                <v-col class="col-12 col-sm-6 col-md-12 pb-3 pb-md-0 text--secondary">
-                    <v-card-text v-if="frameUrl" class="pb-0">
+    <panel :title="$t('Timelapse.Status')" :icon="mdiInformation" card-class="timelapse-status-panel">
+        <v-card-text v-if="framesCount">
+            <v-row v-if="frameUrl">
+                <v-col class="pb-0">
+                    <vue-load-image class="d-flex align-center justify-center">
+                        <img
+                            ref="timelapsePreview"
+                            slot="image"
+                            :src="frameUrl"
+                            :alt="$t('Timelapse.Preview').toString()"
+                            class="w-100"
+                            :style="webcamStyle"
+                            @load="calcRatio" />
+                        <div slot="preloader">
+                            <v-progress-circular indeterminate color="primary" />
+                        </div>
+                        <div slot="error">
+                            <v-icon>{{ mdiFile }}</v-icon>
+                        </div>
+                    </vue-load-image>
+                </v-col>
+            </v-row>
+            <v-row>
+                <v-col class="text--secondary">
+                    <settings-row :title="$t('Timelapse.Frames')" :dynamic-slot-width="true">
+                        {{ framesCount }}
+                    </settings-row>
+                    <v-divider class="my-2" />
+                    <settings-row :title="$t('Timelapse.EstimatedLength')" :dynamic-slot-width="true">
+                        {{ estimatedVideoLength }}
+                    </settings-row>
+                    <template v-if="!['printing', 'paused'].includes(printer_state)">
+                        <v-divider class="mt-2 mb-4" />
                         <v-row>
-                            <v-col>
-                                <vue-load-image>
-                                    <img
-                                        ref="timelapsePreview"
-                                        slot="image"
-                                        :src="frameUrl"
-                                        :alt="$t('Timelapse.Preview')"
-                                        class="w-100"
-                                        :style="webcamStyle"
-                                        @load="calcRatio" />
-                                    <div slot="preloader">
-                                        <v-progress-circular indeterminate color="primary"></v-progress-circular>
-                                    </div>
-                                    <div slot="error">
-                                        <v-icon>{{ mdiFile }}</v-icon>
-                                    </div>
-                                </vue-load-image>
+                            <v-col class="text-center py-1">
+                                <v-btn
+                                    text
+                                    color="primary"
+                                    :disabled="disableRenderButton"
+                                    @click="boolDialogRendersettings = true">
+                                    {{ $t('Timelapse.Render') }}
+                                </v-btn>
+                                <v-btn
+                                    text
+                                    color="primary"
+                                    :loading="loadings.includes('timelapse_saveframes')"
+                                    @click="saveFrames">
+                                    {{ $t('Timelapse.SaveFrames') }}
+                                </v-btn>
                             </v-col>
                         </v-row>
-                    </v-card-text>
-                </v-col>
-                <v-col
-                    v-if="framesCount > 0"
-                    class="col-12 col-sm-6 col-md-12 pt-3 pt-md-0 text--secondary"
-                    align-self="center">
-                    <v-card-text :class="framesCount ? 'pt-0' : ''">
-                        <template v-if="framesCount > 0">
-                            <settings-row :title="$t('Timelapse.Frames').toString()">
-                                {{ framesCount }}
-                            </settings-row>
-                            <v-divider class="my-2"></v-divider>
-                            <settings-row
-                                :title="$t('Timelapse.EstimatedLength').toString()"
-                                :dynamic-slot-width="true">
-                                {{ estimatedVideoLength }}
-                            </settings-row>
-                        </template>
-                        <template v-if="['printing', 'paused'].includes(printer_state)">
-                            <v-divider class="my-2"></v-divider>
-                            <settings-row :title="$t('Timelapse.Enabled').toString()" :dynamic-slot-width="true">
-                                <v-switch v-model="enabled" hide-details class="mt-0"></v-switch>
-                            </settings-row>
-                            <template v-if="enabled">
-                                <v-divider v-if="framesCount > 0" class="my-2"></v-divider>
-                                <settings-row :title="$t('Timelapse.Autorender').toString()" :dynamic-slot-width="true">
-                                    <v-switch v-model="autorender" hide-details class="mt-0"></v-switch>
-                                </settings-row>
-                            </template>
-                        </template>
-                        <template v-if="framesCount > 0 && !['printing', 'paused'].includes(printer_state)">
-                            <v-divider class="mt-2 mb-4"></v-divider>
-                            <v-row>
-                                <v-col class="text-center">
-                                    <v-btn
-                                        text
-                                        color="primary"
-                                        :disabled="disableRenderButton"
-                                        @click="boolDialogRendersettings = true">
-                                        {{ $t('Timelapse.Render') }}
-                                    </v-btn>
-                                    <v-btn
-                                        text
-                                        color="primary"
-                                        :loading="loadings.includes('timelapse_saveframes')"
-                                        @click="saveFrames">
-                                        {{ $t('Timelapse.SaveFrames') }}
-                                    </v-btn>
-                                </v-col>
-                            </v-row>
-                        </template>
-                    </v-card-text>
-                </v-col>
-                <v-col v-else class="col-12 text--secondary" align-self="center">
-                    <v-card-text class="pt-0 pt-md-3">
-                        <p class="text-center my-0 font-italic">{{ $t('Timelapse.NoActiveTimelapse') }}</p>
-                    </v-card-text>
+                    </template>
                 </v-col>
             </v-row>
-        </v-card>
-        <v-dialog v-model="boolDialogRendersettings" :max-width="700" :max-height="500">
-            <panel
-                :title="$t('Timelapse.RenderSettings').toString()"
-                :icon="mdiTextBoxSearchOutline"
-                card-class="timelapse-rendersettings-dialog"
-                :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon @click="boolDialogRendersettings = false">
-                        <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-select>
-                        </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-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-text-field
-                                    v-model="targetlength"
-                                    :label="$t('Timelapse.Targetlength')"
-                                    type="number"
-                                    outlined
-                                    dense
-                                    hide-details
-                                    hide-spin-buttons
-                                    class="mt-3"></v-text-field>
-                            </template>
-                            <template v-else>
-                                <v-text-field
-                                    v-model="output_framerate"
-                                    :label="$t('Timelapse.Framerate')"
-                                    type="number"
-                                    outlined
-                                    dense
-                                    hide-details
-                                    hide-spin-buttons></v-text-field>
-                            </template>
-                            <v-text-field
-                                v-model="duplicatelastframe"
-                                :label="$t('Timelapse.DuplicateLastframe')"
-                                type="number"
-                                outlined
-                                dense
-                                hide-details
-                                hide-spin-buttons
-                                class="mt-3"></v-text-field>
-                        </v-col>
-                        <v-col class="col-4">
-                            <template v-if="variable_fps">
-                                <v-text-field
-                                    v-model="variableTargetFps"
-                                    :label="$t('Timelapse.TargetFps')"
-                                    type="number"
-                                    outlined
-                                    dense
-                                    hide-details
-                                    readonly
-                                    class="mb-3"></v-text-field>
-                            </template>
-                            <v-text-field
-                                v-model="estimatedVideoLength"
-                                :label="$t('Timelapse.EstimatedLength')"
-                                outlined
-                                dense
-                                hide-details
-                                readonly></v-text-field>
-                        </v-col>
-                    </v-row>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn text @click="boolDialogRendersettings = false">{{ $t('Timelapse.Cancel') }}</v-btn>
-                    <v-btn text color="primary" @click="startRender">{{ $t('Timelapse.StartRender') }}</v-btn>
-                </v-card-actions>
-            </panel>
-        </v-dialog>
-    </div>
+        </v-card-text>
+        <v-card-text v-else class="">
+            <p class="text-center my-0 font-italic">{{ $t('Timelapse.NoActiveTimelapse') }}</p>
+        </v-card-text>
+        <v-card-text v-if="['printing', 'paused'].includes(printer_state)" class="pt-0">
+            <v-divider class="mt-0 mb-2" />
+            <settings-row :title="$t('Timelapse.Enabled')" :dynamic-slot-width="true">
+                <v-switch v-model="enabled" hide-details class="mt-0" />
+            </settings-row>
+            <template v-if="enabled">
+                <v-divider class="my-2" />
+                <settings-row :title="$t('Timelapse.Autorender')" :dynamic-slot-width="true">
+                    <v-switch v-model="autorender" hide-details class="mt-0" />
+                </settings-row>
+            </template>
+        </v-card-text>
+        <timelapse-renderingsettings-dialog
+            :show="boolDialogRendersettings"
+            @close="boolDialogRendersettings = false" />
+    </panel>
 </template>
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Ref } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import Panel from '@/components/ui/Panel.vue'
-import { mdiFile, mdiInformation, mdiTextBoxSearchOutline, mdiCloseThick } from '@mdi/js'
+import { mdiFile, mdiInformation, mdiCloseThick } from '@mdi/js'
 import WebcamMixin from '@/components/mixins/webcam'
+import TimelapseRenderingsettingsDialog from '@/components/dialogs/TimelapseRenderingsettingsDialog.vue'
+import TimelapseMixin from '@/components/mixins/timelapse'
 @Component({
-    components: { Panel, SettingsRow },
+    components: { TimelapseRenderingsettingsDialog, Panel, SettingsRow },
 })
-export default class TimelapseStatusPanel extends Mixins(BaseMixin, WebcamMixin) {
+export default class TimelapseStatusPanel extends Mixins(BaseMixin, TimelapseMixin, WebcamMixin) {
     mdiInformation = mdiInformation
     mdiFile = mdiFile
     mdiCloseThick = mdiCloseThick
-    mdiTextBoxSearchOutline = mdiTextBoxSearchOutline
 
-    private boolDialogRendersettings = false
-    private scale = 1
+    boolDialogRendersettings = false
+    scale = 1
 
-    declare $refs: {
-        timelapsePreview: HTMLImageElement
-    }
+    @Ref('timelapsePreview') timelapsePreview!: HTMLImageElement
 
     get frameUrl() {
         const frame = this.$store.state.server.timelapse?.lastFrame?.file ?? null
@@ -229,10 +106,6 @@ export default class TimelapseStatusPanel extends Mixins(BaseMixin, WebcamMixin)
         return null
     }
 
-    get framesCount() {
-        return this.$store.state.server.timelapse?.lastFrame?.count ?? 0
-    }
-
     get enabled() {
         return this.$store.state.server.timelapse?.settings?.enabled ?? false
     }
@@ -257,90 +130,16 @@ export default class TimelapseStatusPanel extends Mixins(BaseMixin, WebcamMixin)
         )
     }
 
-    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 framerateTypeOptions() {
-        return [
-            {
-                value: false,
-                text: this.$t('Timelapse.Fixed'),
-            },
-            {
-                value: true,
-                text: this.$t('Timelapse.Variable'),
-            },
-        ]
-    }
-
-    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 disableRenderButton() {
+        return (this.$store.state.server.timelapse?.rendering.status ?? '') === 'running'
     }
 
-    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 existsSnapshoturlInMoonrakerConfig() {
+        return 'snapshoturl' in this.$store.state.server.config.orig.timelapse
     }
 
-    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
-    }
-
-    get disableRenderButton() {
-        return (this.$store.state.server.timelapse?.rendering.status ?? '') === 'running'
+    get moonrakerTimelapseConfig() {
+        return this.$store.state.server.config.config.timelapse ?? {}
     }
 
     get camId() {
@@ -352,6 +151,20 @@ export default class TimelapseStatusPanel extends Mixins(BaseMixin, WebcamMixin)
     }
 
     get webcamStyle() {
+        // if the snapshoturl is set in moonraker config,
+        // we also use the flip_x and flip_y values from the moonraker config
+        if (this.existsSnapshoturlInMoonrakerConfig) {
+            return {
+                transform: this.generateTransform(
+                    this.moonrakerTimelapseConfig.flip_x ?? false,
+                    this.moonrakerTimelapseConfig.flip_y ?? false,
+                    0
+                ),
+            }
+        }
+
+        if (!this.camSettings) return {}
+
         return {
             transform: this.generateTransform(
                 this.camSettings.flip_horizontal ?? false,
@@ -361,22 +174,15 @@ export default class TimelapseStatusPanel extends Mixins(BaseMixin, WebcamMixin)
         }
     }
 
-    startRender() {
-        this.boolDialogRendersettings = false
-
-        this.$socket.emit('machine.timelapse.render', {})
-    }
-
     saveFrames() {
         this.$socket.emit('machine.timelapse.saveframes', {}, { loading: 'timelapse_saveframes' })
     }
 
     calcRatio() {
-        if (this.$refs.timelapsePreview) {
-            this.scale = this.$refs.timelapsePreview.naturalHeight / this.$refs.timelapsePreview.naturalWidth
-            if (this.scale > 1) {
-                this.scale = this.$refs.timelapsePreview.naturalWidth / this.$refs.timelapsePreview.naturalHeight
-            }
+        this.scale = this.timelapsePreview.naturalHeight / this.timelapsePreview.naturalWidth
+
+        if (this.scale > 1) {
+            this.scale = this.timelapsePreview.naturalWidth / this.timelapsePreview.naturalHeight
         }
     }
 }