From 95bddb44c1776bbf41687d1de63796e8cc11e1d9 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Wed, 30 Oct 2024 14:57:52 +0100
Subject: [PATCH] Migrate FtProgressBar to the composition API

---
 src/renderer/App.js                            |  2 +-
 .../FtProgressBar.css}                         |  3 +--
 .../components/FtProgressBar/FtProgressBar.vue | 18 ++++++++++++++++++
 .../ft-progress-bar/ft-progress-bar.js         | 10 ----------
 .../ft-progress-bar/ft-progress-bar.vue        |  9 ---------
 5 files changed, 20 insertions(+), 22 deletions(-)
 rename src/renderer/components/{ft-progress-bar/ft-progress-bar.css => FtProgressBar/FtProgressBar.css} (75%)
 create mode 100644 src/renderer/components/FtProgressBar/FtProgressBar.vue
 delete mode 100644 src/renderer/components/ft-progress-bar/ft-progress-bar.js
 delete mode 100644 src/renderer/components/ft-progress-bar/ft-progress-bar.vue

diff --git a/src/renderer/App.js b/src/renderer/App.js
index 6f29f4e2a7c4..fa17777eab4d 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -7,7 +7,7 @@ import FtNotificationBanner from './components/ft-notification-banner/ft-notific
 import FtPrompt from './components/ft-prompt/ft-prompt.vue'
 import FtButton from './components/ft-button/ft-button.vue'
 import FtToast from './components/ft-toast/ft-toast.vue'
-import FtProgressBar from './components/ft-progress-bar/ft-progress-bar.vue'
+import FtProgressBar from './components/FtProgressBar/FtProgressBar.vue'
 import FtPlaylistAddVideoPrompt from './components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue'
 import FtCreatePlaylistPrompt from './components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue'
 import FtSearchFilters from './components/ft-search-filters/ft-search-filters.vue'
diff --git a/src/renderer/components/ft-progress-bar/ft-progress-bar.css b/src/renderer/components/FtProgressBar/FtProgressBar.css
similarity index 75%
rename from src/renderer/components/ft-progress-bar/ft-progress-bar.css
rename to src/renderer/components/FtProgressBar/FtProgressBar.css
index c7ebd6f3ca87..94d45d244cb7 100644
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.css
+++ b/src/renderer/components/FtProgressBar/FtProgressBar.css
@@ -4,6 +4,5 @@
   inset-block-end: 0;
   inset-inline-start: 0;
   background-color: var(--primary-color);
-  z-index: 1;
-  transition: inline-size 0.5s;
+  z-index: 4;
 }
diff --git a/src/renderer/components/FtProgressBar/FtProgressBar.vue b/src/renderer/components/FtProgressBar/FtProgressBar.vue
new file mode 100644
index 000000000000..36aed9f58989
--- /dev/null
+++ b/src/renderer/components/FtProgressBar/FtProgressBar.vue
@@ -0,0 +1,18 @@
+<template>
+  <div
+    class="progressBar"
+    :style="{ inlineSize: progressBarPercentage + '%' }"
+  />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import store from '../../store/index'
+
+const progressBarPercentage = computed(() => {
+  return store.getters.getProgressBarPercentage
+})
+</script>
+
+<style scoped src="./FtProgressBar.css" />
diff --git a/src/renderer/components/ft-progress-bar/ft-progress-bar.js b/src/renderer/components/ft-progress-bar/ft-progress-bar.js
deleted file mode 100644
index 14b91aa2cbcb..000000000000
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'FtProgressBar',
-  computed: {
-    progressBarPercentage: function () {
-      return this.$store.getters.getProgressBarPercentage
-    }
-  }
-})
diff --git a/src/renderer/components/ft-progress-bar/ft-progress-bar.vue b/src/renderer/components/ft-progress-bar/ft-progress-bar.vue
deleted file mode 100644
index 28d835b2f365..000000000000
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <div
-    class="progressBar"
-    :style="{ inlineSize: progressBarPercentage + '%' }"
-  />
-</template>
-
-<script src="./ft-progress-bar.js" />
-<style scoped src="./ft-progress-bar.css" />