From 8d2ab06fa31b27d79fc9f8041c7a4e366501eabc Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Sun, 31 Jul 2022 20:21:00 +0200
Subject: [PATCH 1/8] fix: renaming a .zip file caused extension to become .mp4

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 .../panels/Timelapse/TimelapseFilesPanel.vue        | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/panels/Timelapse/TimelapseFilesPanel.vue b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
index 113a5bdd8..1c294e9ec 100644
--- a/src/components/panels/Timelapse/TimelapseFilesPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
@@ -634,23 +634,24 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
 
     renameFileAction() {
         const posLastPoint = this.dialogRenameFile.item.filename.lastIndexOf('.')
-        const oldNameWithoutExtension = this.dialogRenameFile.item.filename.substr(0, posLastPoint)
+        const oldNameWithoutExtension = this.dialogRenameFile.item.filename.slice(0, posLastPoint)
+        const fileExtension = this.dialogRenameFile.item.filename.split('.').pop()
 
         this.dialogRenameFile.show = false
         this.$socket.emit(
             'server.files.move',
             {
-                source: this.currentPath + '/' + this.dialogRenameFile.item.filename,
-                dest: this.currentPath + '/' + this.dialogRenameFile.newName + '.mp4',
+                source: `${this.currentPath}/${this.dialogRenameFile.item.filename}`,
+                dest: `${this.currentPath}/${this.dialogRenameFile.newName}.${fileExtension}`,
             },
             { action: 'files/getMove' }
         )
 
-        const fileJpg = this.files.find((file) => file.filename === oldNameWithoutExtension + '.jpg')
+        const fileJpg = this.files.find((file) => file.filename === `${oldNameWithoutExtension}.jpg`)
         if (fileJpg) {
             this.$socket.emit('server.files.move', {
-                source: this.currentPath + '/' + oldNameWithoutExtension + '.jpg',
-                dest: this.currentPath + '/' + this.dialogRenameFile.newName + '.jpg',
+                source: `${this.currentPath}/${oldNameWithoutExtension}.jpg`,
+                dest: `${this.currentPath}/${this.dialogRenameFile.newName}.jpg`,
             })
         }
     }

From 01cbc3ac26de83bd892e4036c89a100ea67c3df6 Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Sun, 31 Jul 2022 20:22:20 +0200
Subject: [PATCH 2/8] style: fix weak IDE warnings

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 .../panels/Timelapse/TimelapseFilesPanel.vue         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/panels/Timelapse/TimelapseFilesPanel.vue b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
index 1c294e9ec..838c18402 100644
--- a/src/components/panels/Timelapse/TimelapseFilesPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
@@ -15,7 +15,7 @@
 <template>
     <div>
         <panel
-            :title="$t('Timelapse.TimelapseFiles')"
+            :title="$t('Timelapse.TimelapseFiles').toString()"
             :icon="mdiFileDocumentMultipleOutline"
             card-class="timelapse-files-panel">
             <v-card-text>
@@ -200,7 +200,7 @@
         </v-menu>
         <v-dialog v-model="dialogRenameFile.show" max-width="400">
             <panel
-                :title="$t('Timelapse.RenameFile')"
+                :title="$t('Timelapse.RenameFile').toString()"
                 card-class="gcode-files-rename-file-dialog"
                 :margin-bottom="false">
                 <template #buttons>
@@ -225,7 +225,7 @@
         </v-dialog>
         <v-dialog v-model="dialogCreateDirectory.show" max-width="400">
             <panel
-                :title="$t('Timelapse.NewDirectory')"
+                :title="$t('Timelapse.NewDirectory').toString()"
                 card-class="gcode-files-new-directory-dialog"
                 :margin-bottom="false">
                 <template #buttons>
@@ -253,7 +253,7 @@
         </v-dialog>
         <v-dialog v-model="dialogRenameDirectory.show" max-width="400">
             <panel
-                :title="$t('Timelapse.RenameDirectory')"
+                :title="$t('Timelapse.RenameDirectory').toString()"
                 card-class="gcode-files-rename-directory-dialog"
                 :margin-bottom="false">
                 <template #buttons>
@@ -280,7 +280,7 @@
         </v-dialog>
         <v-dialog v-model="dialogDeleteDirectory.show" max-width="400">
             <panel
-                :title="$t('Timelapse.DeleteDirectory')"
+                :title="$t('Timelapse.DeleteDirectory').toString()"
                 card-class="gcode-files-delete-directory-dialog"
                 :margin-bottom="false">
                 <template #buttons>
@@ -304,7 +304,7 @@
         </v-dialog>
         <v-dialog v-model="boolVideoDialog" :max-width="700">
             <panel
-                :title="$t('Timelapse.Video')"
+                :title="$t('Timelapse.Video').toString()"
                 :icon="mdiFileVideo"
                 card-class="timelapse-video-dialog"
                 :margin-bottom="false">

From 63252e9bbf98624cf7d55eff21ed587b495637de Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Sun, 31 Jul 2022 20:26:45 +0200
Subject: [PATCH 3/8] refactor: replace deprecated method `substr` with `slice`

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 src/components/panels/Timelapse/TimelapseFilesPanel.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/panels/Timelapse/TimelapseFilesPanel.vue b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
index 838c18402..450e1d064 100644
--- a/src/components/panels/Timelapse/TimelapseFilesPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
@@ -590,7 +590,7 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
     }
 
     clickRowGoBack() {
-        this.currentPath = this.currentPath.substr(0, this.currentPath.lastIndexOf('/'))
+        this.currentPath = this.currentPath.slice(0, this.currentPath.lastIndexOf('/'))
     }
 
     showContextMenu(e: any, item: FileStateFile) {
@@ -608,7 +608,7 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
 
     existsFramesZip(item: FileStateFile) {
         const posLastPoint = item.filename.lastIndexOf('.')
-        const zipFilename = item.filename.substr(0, posLastPoint) + '.zip'
+        const zipFilename = item.filename.slice(0, posLastPoint) + '.zip'
 
         return this.files.findIndex((file) => file.filename === zipFilename) !== -1
     }
@@ -622,7 +622,7 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
 
     renameFile(item: FileStateFile) {
         const posLastPoint = item.filename.lastIndexOf('.')
-        this.dialogRenameFile.newName = item.filename.substr(0, posLastPoint)
+        this.dialogRenameFile.newName = item.filename.slice(0, posLastPoint)
 
         this.dialogRenameFile.item = item
         this.dialogRenameFile.show = true

From a9e9f3319486046fb749145d9bdad99055f08330 Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Mon, 1 Aug 2022 22:42:57 +0200
Subject: [PATCH 4/8] fix: rename thumbnail jpg only if file extension is `mp4`

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 .../panels/Timelapse/TimelapseFilesPanel.vue           | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/panels/Timelapse/TimelapseFilesPanel.vue b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
index 450e1d064..a694c7e94 100644
--- a/src/components/panels/Timelapse/TimelapseFilesPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
@@ -638,6 +638,10 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
         const fileExtension = this.dialogRenameFile.item.filename.split('.').pop()
 
         this.dialogRenameFile.show = false
+
+        /**
+         * rename the file regardless of its file-extension
+         */
         this.$socket.emit(
             'server.files.move',
             {
@@ -647,8 +651,12 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
             { action: 'files/getMove' }
         )
 
+        /**
+         * mp4 and jpg always require to have the same name as the
+         * jpg is used as a mp4-thumbnail in the timelapse file-browser
+         */
         const fileJpg = this.files.find((file) => file.filename === `${oldNameWithoutExtension}.jpg`)
-        if (fileJpg) {
+        if (fileJpg && fileExtension === 'mp4') {
             this.$socket.emit('server.files.move', {
                 source: `${this.currentPath}/${oldNameWithoutExtension}.jpg`,
                 dest: `${this.currentPath}/${this.dialogRenameFile.newName}.jpg`,

From 4e0d9b814e00245d03f67adb862923791b167210 Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Mon, 1 Aug 2022 22:50:10 +0200
Subject: [PATCH 5/8] fix: only delete thumbnail jpg if corresponding mp4 is
 deleted

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 .../panels/Timelapse/TimelapseFilesPanel.vue  | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/panels/Timelapse/TimelapseFilesPanel.vue b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
index a694c7e94..7c8e3a146 100644
--- a/src/components/panels/Timelapse/TimelapseFilesPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
@@ -636,6 +636,7 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
         const posLastPoint = this.dialogRenameFile.item.filename.lastIndexOf('.')
         const oldNameWithoutExtension = this.dialogRenameFile.item.filename.slice(0, posLastPoint)
         const fileExtension = this.dialogRenameFile.item.filename.split('.').pop()
+        const fileJpg = this.files.find((file) => file.filename === `${oldNameWithoutExtension}.jpg`)
 
         this.dialogRenameFile.show = false
 
@@ -655,7 +656,6 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
          * mp4 and jpg always require to have the same name as the
          * jpg is used as a mp4-thumbnail in the timelapse file-browser
          */
-        const fileJpg = this.files.find((file) => file.filename === `${oldNameWithoutExtension}.jpg`)
         if (fileJpg && fileExtension === 'mp4') {
             this.$socket.emit('server.files.move', {
                 source: `${this.currentPath}/${oldNameWithoutExtension}.jpg`,
@@ -688,20 +688,28 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
 
     removeFile() {
         const filename = this.contextMenu.item.filename.slice(0, this.contextMenu.item.filename.lastIndexOf('.'))
+        const fileExtension = this.contextMenu.item.filename.split('.').pop()
         const previewFilename = filename + '.jpg'
         const previewExists = this.files.findIndex((file) => file.filename === previewFilename) !== -1
 
-        if (previewExists)
-            this.$socket.emit(
-                'server.files.delete_file',
-                { path: this.currentPath + '/' + previewFilename },
-                { action: 'files/getDeleteFile' }
-            )
+        /**
+         * delete the file regardless of its file-extension
+         */
         this.$socket.emit(
             'server.files.delete_file',
             { path: this.currentPath + '/' + this.contextMenu.item.filename },
             { action: 'files/getDeleteFile' }
         )
+
+        /**
+         * if file-extension is mp4, also delete its corresponding thumbnail jpg
+         */
+        if (previewExists && fileExtension === 'mp4')
+            this.$socket.emit(
+                'server.files.delete_file',
+                { path: this.currentPath + '/' + previewFilename },
+                { action: 'files/getDeleteFile' }
+            )
     }
 
     deleteDirectory(item: FileStateFile) {

From c3c7fbbae19ad5e5dc4dd86d1bc557f4e553df8c Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Mon, 1 Aug 2022 23:03:17 +0200
Subject: [PATCH 6/8] fix: apply same styles to timelapse filemanager context
 menu items

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 .../panels/Timelapse/TimelapseFilesPanel.vue         | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/panels/Timelapse/TimelapseFilesPanel.vue b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
index 7c8e3a146..c2f4d383f 100644
--- a/src/components/panels/Timelapse/TimelapseFilesPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
@@ -169,31 +169,33 @@
         <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
             <v-list>
                 <v-list-item v-if="!contextMenu.item.isDirectory" @click="downloadFile(contextMenu.item.filename)">
-                    <v-icon left>{{ mdiCloudDownload }}</v-icon>
+                    <v-icon class="mr-1">{{ mdiCloudDownload }}</v-icon>
                     {{ $t('Timelapse.Download') }}
                 </v-list-item>
                 <v-list-item
                     v-if="contextMenu.item.isDirectory && contextMenu.item.permissions.includes('w')"
                     @click="renameDirectory(contextMenu.item)">
-                    <v-icon left>{{ mdiRenameBox }}</v-icon>
+                    <v-icon class="mr-1">{{ mdiRenameBox }}</v-icon>
                     {{ $t('Timelapse.Rename') }}
                 </v-list-item>
                 <v-list-item
                     v-if="!contextMenu.item.isDirectory && contextMenu.item.permissions.includes('w')"
                     @click="renameFile(contextMenu.item)">
-                    <v-icon left>{{ mdiRenameBox }}</v-icon>
+                    <v-icon class="mr-1">{{ mdiRenameBox }}</v-icon>
                     {{ $t('Timelapse.Rename') }}
                 </v-list-item>
                 <v-list-item
                     v-if="!contextMenu.item.isDirectory && contextMenu.item.permissions.includes('w')"
+                    class="red--text"
                     @click="removeFile">
-                    <v-icon left>{{ mdiDelete }}</v-icon>
+                    <v-icon class="mr-1" color="error">{{ mdiDelete }}</v-icon>
                     {{ $t('Timelapse.Delete') }}
                 </v-list-item>
                 <v-list-item
                     v-if="contextMenu.item.isDirectory && contextMenu.item.permissions.includes('w')"
+                    class="red--text"
                     @click="deleteDirectory(contextMenu.item)">
-                    <v-icon left>{{ mdiDelete }}</v-icon>
+                    <v-icon class="mr-1" color="error">{{ mdiDelete }}</v-icon>
                     {{ $t('Timelapse.Delete') }}
                 </v-list-item>
             </v-list>

From 4bd9a4fdda1fff2bf52fca6b80c7be0da6ae5c7d Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Mon, 1 Aug 2022 23:23:02 +0200
Subject: [PATCH 7/8] refactor: return early if file-extension is not `mp4`

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 .../panels/Timelapse/TimelapseFilesPanel.vue         | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/panels/Timelapse/TimelapseFilesPanel.vue b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
index c2f4d383f..0deb8be46 100644
--- a/src/components/panels/Timelapse/TimelapseFilesPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
@@ -638,7 +638,6 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
         const posLastPoint = this.dialogRenameFile.item.filename.lastIndexOf('.')
         const oldNameWithoutExtension = this.dialogRenameFile.item.filename.slice(0, posLastPoint)
         const fileExtension = this.dialogRenameFile.item.filename.split('.').pop()
-        const fileJpg = this.files.find((file) => file.filename === `${oldNameWithoutExtension}.jpg`)
 
         this.dialogRenameFile.show = false
 
@@ -654,10 +653,14 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
             { action: 'files/getMove' }
         )
 
+        if (fileExtension !== 'mp4') return
+
         /**
          * mp4 and jpg always require to have the same name as the
          * jpg is used as a mp4-thumbnail in the timelapse file-browser
          */
+        const fileJpg = this.files.find((file) => file.filename === `${oldNameWithoutExtension}.jpg`)
+
         if (fileJpg && fileExtension === 'mp4') {
             this.$socket.emit('server.files.move', {
                 source: `${this.currentPath}/${oldNameWithoutExtension}.jpg`,
@@ -691,8 +694,6 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
     removeFile() {
         const filename = this.contextMenu.item.filename.slice(0, this.contextMenu.item.filename.lastIndexOf('.'))
         const fileExtension = this.contextMenu.item.filename.split('.').pop()
-        const previewFilename = filename + '.jpg'
-        const previewExists = this.files.findIndex((file) => file.filename === previewFilename) !== -1
 
         /**
          * delete the file regardless of its file-extension
@@ -703,9 +704,14 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
             { action: 'files/getDeleteFile' }
         )
 
+        if (fileExtension !== 'mp4') return
+
         /**
          * if file-extension is mp4, also delete its corresponding thumbnail jpg
          */
+        const previewFilename = filename + '.jpg'
+        const previewExists = this.files.findIndex((file) => file.filename === previewFilename) !== -1
+
         if (previewExists && fileExtension === 'mp4')
             this.$socket.emit(
                 'server.files.delete_file',

From 3dc3f517602c0ce793f6a65a114237ca18784b1f Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Mon, 1 Aug 2022 23:26:17 +0200
Subject: [PATCH 8/8] refactor: remove redundant conditions

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 src/components/panels/Timelapse/TimelapseFilesPanel.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/panels/Timelapse/TimelapseFilesPanel.vue b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
index 0deb8be46..6956a41fe 100644
--- a/src/components/panels/Timelapse/TimelapseFilesPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
@@ -661,7 +661,7 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
          */
         const fileJpg = this.files.find((file) => file.filename === `${oldNameWithoutExtension}.jpg`)
 
-        if (fileJpg && fileExtension === 'mp4') {
+        if (fileJpg) {
             this.$socket.emit('server.files.move', {
                 source: `${this.currentPath}/${oldNameWithoutExtension}.jpg`,
                 dest: `${this.currentPath}/${this.dialogRenameFile.newName}.jpg`,
@@ -712,7 +712,7 @@ export default class TimelapseFilesPanel extends Mixins(BaseMixin) {
         const previewFilename = filename + '.jpg'
         const previewExists = this.files.findIndex((file) => file.filename === previewFilename) !== -1
 
-        if (previewExists && fileExtension === 'mp4')
+        if (previewExists)
             this.$socket.emit(
                 'server.files.delete_file',
                 { path: this.currentPath + '/' + previewFilename },