Moved progress bar logic into progress bar

src/views/Room/Index.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="room">
     <h1>{{ room.movie }}</h1>
-    <div v-if="!room.downloaded">
-      <div>{{ progressPerc }}%</div>
     <ProgressBar
-        :progress="progress"
+      v-if="!room.downloaded"
+      :id="id"
+      @downloaded="onDownloaded"
       class="progress-bar"
     />
-    </div>
 
     <video
       v-if="room.downloaded"
@@ -25,7 +24,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import getRoom from '@/api/getRoom';
-import getStatus from '@/api/getStatus';
 import setPosition from '@/api/setPosition';
 import getPosition from '@/api/getPosition';
 
@@ -47,9 +45,7 @@ export default defineComponent({
   data() {
     return {
       room: {} as Room,
-      progress: 0,
       playing: false,
-      progressInterval: undefined as undefined | number,
       positionInterval: undefined as undefined | number,
     };
   },
@@ -57,23 +53,18 @@ export default defineComponent({
     movieUrl() {
       return `${process.env.VUE_APP_MOVIES}?filename=${this.room.filename}`;
     },
-    progressPerc() {
-      return Math.floor(this.progress * 100);
-    },
   },
   async mounted() {
     this.room = await getRoom(this.id);
-
-    if (!this.room.downloaded) {
-      this.progressInterval = setInterval(async () => {
-        const result = await getStatus(this.id);
-        this.progress = result.progress;
-        if (result.downloaded || this.progress === 1) {
-          this.room.downloaded = true;
-          clearInterval(this.progressInterval);
+    if (this.room.downloaded) {
+      this.onDownloaded();
     }
-      }, 2 * 1000);
-    } else {
+  },
+  beforeUnmount() {
+    clearInterval(this.positionInterval);
+  },
+  methods: {
+    onDownloaded() {
       this.room.downloaded = true;
       this.$nextTick(() => {
         const element = this.$refs.video as HTMLVideoElement;
@@ -89,13 +80,7 @@ export default defineComponent({
           }
         }, 2 * 1000);
       });
-    }
     },
-  beforeUnmount() {
-    clearInterval(this.progressInterval);
-    clearInterval(this.positionInterval);
-  },
-  methods: {
     seeked() {
       const element = this.$refs.video as HTMLVideoElement;
       const position = element.currentTime;

src/views/Room/components/ProgressBar.vue

@@ -1,30 +1,70 @@
 <template>
-  <div>
+  <div class="bar">
     <div
       class="fill"
       :style="{
         width: `${progress * 100}%`
       }"
     />
+    <div class="digits">
+      {{ progressPerc }}%
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import getStatus from '@/api/getStatus';
 
 export default defineComponent({
+  emits: ['downloaded'],
   props: {
-    progress: {
-      type: Number,
-      default: 0,
+    id: {
+      type: String,
+      required: true,
     },
   },
+  data() {
+    return {
+      progress: 0,
+      progressInterval: undefined as undefined | number,
+    };
+  },
+  computed: {
+    progressPerc() {
+      return Math.floor(this.progress * 100);
+    },
+  },
+  mounted() {
+    this.progressInterval = setInterval(async () => {
+      const result = await getStatus(this.id);
+      this.progress = result.progress;
+      if (result.downloaded || this.progress === 1) {
+        this.$emit('downloaded');
+        clearInterval(this.progressInterval);
+      }
+    }, 2 * 1000);
+  },
+  beforeUnmount() {
+    clearInterval(this.progressInterval);
+  },
 });
 </script>
 
 <class lang="scss" scoped>
-.fill {
+.bar {
+  position: relative;
+
+  .fill {
     background: lightblue;
     height: 100%;
+  }
+
+  .digits {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
 </class>