From 2a348d1d21fba84da891f7e9bdc3018e56b343ca Mon Sep 17 00:00:00 2001
From: Anatoly <akopyl@radner.ru>
Date: Fri, 31 Dec 2021 00:17:06 +0300
Subject: [PATCH] Moved progress bar logic into progress bar

---
 src/views/Room/Index.vue                  | 47 +++++++-------------
 src/views/Room/components/ProgressBar.vue | 54 ++++++++++++++++++++---
 2 files changed, 63 insertions(+), 38 deletions(-)

diff --git a/src/views/Room/Index.vue b/src/views/Room/Index.vue
index 261024f..ff0cfd9 100644
--- a/src/views/Room/Index.vue
+++ b/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"
-        class="progress-bar"
-      />
-    </div>
+    <ProgressBar
+      v-if="!room.downloaded"
+      :id="id"
+      @downloaded="onDownloaded"
+      class="progress-bar"
+    />
 
     <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);
-        }
-      }, 2 * 1000);
-    } else {
+    if (this.room.downloaded) {
+      this.onDownloaded();
+    }
+  },
+  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;
diff --git a/src/views/Room/components/ProgressBar.vue b/src/views/Room/components/ProgressBar.vue
index 5f13a68..9d59389 100644
--- a/src/views/Room/components/ProgressBar.vue
+++ b/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 {
-  background: lightblue;
-  height: 100%;
+.bar {
+  position: relative;
+
+  .fill {
+    background: lightblue;
+    height: 100%;
+  }
+
+  .digits {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
 </class>