From c60c9b6522a3005da5ef6f31f0bde894396ab356 Mon Sep 17 00:00:00 2001
From: Anatoly <akopyl@radner.ru>
Date: Sat, 1 Jan 2022 22:10:00 +0300
Subject: [PATCH] Also show reencoding progress

---
 src/interfaces.ts                         |  2 +
 src/views/Home/Index.vue                  |  3 ++
 src/views/Room/Index.vue                  | 14 ++----
 src/views/Room/components/Progress.vue    | 60 +++++++++++++++++++++++
 src/views/Room/components/ProgressBar.vue | 27 ++--------
 5 files changed, 71 insertions(+), 35 deletions(-)
 create mode 100644 src/views/Room/components/Progress.vue

diff --git a/src/interfaces.ts b/src/interfaces.ts
index 083f8c2..f0270e6 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -4,6 +4,8 @@ export interface Room {
   createdAt: Date;
   movie?: string;
   filename?: string;
+  downloadedProg?: number;
+  reencodedProg?: number;
   downloaded?: boolean;
   downloadedAt?: Date;
   position: number;
diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index 57c5998..afcfd80 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -12,6 +12,7 @@
         create room
       </button>
     </form>
+    <a href="https://nutbread.github.io/t2m/">convert .torrent file to a magnet link</a>
   </div>
 </template>
 
@@ -39,6 +40,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 form {
+  margin-bottom: 32px;
+
   > * {
     margin: 0 8px;
   }
diff --git a/src/views/Room/Index.vue b/src/views/Room/Index.vue
index fea3076..74f35cf 100644
--- a/src/views/Room/Index.vue
+++ b/src/views/Room/Index.vue
@@ -1,11 +1,10 @@
 <template>
   <div class="room">
     <h1>{{ room.movie }}</h1>
-    <ProgressBar
+    <Progress
       v-if="!room.downloaded"
       :id="id"
       @downloaded="onDownloaded"
-      class="progress-bar"
     />
 
     <video
@@ -27,14 +26,14 @@ import getRoom from '@/api/getRoom';
 import setPosition from '@/api/setPosition';
 import getPosition from '@/api/getPosition';
 
-import ProgressBar from './components/ProgressBar.vue';
+import Progress from './components/Progress.vue';
 
 import { Room } from '@/interfaces';
 
 export default defineComponent({
   name: 'Room',
   components: {
-    ProgressBar,
+    Progress,
   },
   props: {
     id: {
@@ -89,13 +88,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.progress-bar {
-  width: 400px;
-  height: 25px;
-  border: 1px solid black;
-  margin: auto;
-}
-
 h1 {
   margin-bottom: 32px;
 }
diff --git a/src/views/Room/components/Progress.vue b/src/views/Room/components/Progress.vue
new file mode 100644
index 0000000..a419591
--- /dev/null
+++ b/src/views/Room/components/Progress.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="progress">
+    <ProgressBar
+      :progress="downloadedProg"
+    />
+    <ProgressBar
+      v-if="reencodedProg > 0"
+      :progress="reencodedProg"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import getStatus from '@/api/getStatus';
+import ProgressBar from './ProgressBar.vue';
+
+export default defineComponent({
+  emits: ['downloaded'],
+  components: {
+    ProgressBar,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      downloadedProg: 0,
+      reencodedProg: 0,
+      progressInterval: undefined as undefined | number,
+    };
+  },
+  mounted() {
+    this.progressInterval = setInterval(async () => {
+      const result = await getStatus(this.id);
+      this.downloadedProg = result.downloadedProg;
+      this.reencodedProg = result.reencodedProg;
+      if (result.downloaded) {
+        this.$emit('downloaded');
+        clearInterval(this.progressInterval);
+      }
+    }, 2 * 1000);
+  },
+  beforeUnmount() {
+    clearInterval(this.progressInterval);
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.progress > * {
+  width: 400px;
+  height: 25px;
+  border: 1px solid black;
+  margin: 8px auto;
+}
+</style>
diff --git a/src/views/Room/components/ProgressBar.vue b/src/views/Room/components/ProgressBar.vue
index 9d59389..8297e27 100644
--- a/src/views/Room/components/ProgressBar.vue
+++ b/src/views/Room/components/ProgressBar.vue
@@ -3,7 +3,7 @@
     <div
       class="fill"
       :style="{
-        width: `${progress * 100}%`
+        width: `${progressPerc}%`
       }"
     />
     <div class="digits">
@@ -14,40 +14,19 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import getStatus from '@/api/getStatus';
 
 export default defineComponent({
-  emits: ['downloaded'],
   props: {
-    id: {
-      type: String,
+    progress: {
+      type: Number,
       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>