Also show reencoding progress

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;

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;
   }

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;
 }

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>

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>