Barely working

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
-
-export default defineComponent({
-  name: 'Home',
-  components: {
-    HelloWorld,
-  },
-});
-</script>

src/views/Home/Index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="home">
+    <input
+      type="text"
+      v-model="magnet"
+      placeholder="magnet"
+    >
+    <button
+      @click="submit"
+    >
+      Create room
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import createRoom from './createRoom';
+
+import { Room } from '@/interfaces';
+
+export default defineComponent({
+  name: 'Home',
+  data() {
+    return {
+      magnet: '',
+    };
+  },
+  methods: {
+    async submit() {
+      const room: Room = await createRoom(this.magnet);
+      this.$router.push({ name: 'Room', params: { id: room.id } });
+    },
+  },
+});
+</script>

src/views/Home/createRoom.ts

@@ -0,0 +1,5 @@
+import api from '@/api/index';
+
+export default (magnet:String) => api.post('/room', {
+  magnet,
+}).then((response) => response.data);

src/views/Room/Index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="room">
+    <h1>{{ room.movie }}</h1>
+    <div v-if="!room.downloaded">
+      <div>{{ progressPerc }}%</div>
+      <ProgressBar
+        :progress="progress"
+        class="progress-bar"
+      />
+    </div>
+
+    <video
+      v-if="room.downloaded"
+      controls
+      :src="movieUrl"
+      ref="video"
+      @seeked="seeked"
+      @play="playing = true"
+      @pause="playing = false"
+    >
+    </video>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import getRoom from './getRoom';
+import getStatus from './getStatus';
+import setPosition from './setPosition';
+import getPosition from './getPosition';
+
+import ProgressBar from './components/ProgressBar.vue';
+
+import { Room } from '@/interfaces';
+
+export default defineComponent({
+  name: 'Room',
+  components: {
+    ProgressBar,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      room: {} as Room,
+      progress: 0,
+      playing: false,
+      progressInterval: undefined as undefined | number,
+      positionInterval: undefined as undefined | number,
+    };
+  },
+  computed: {
+    movieUrl() {
+      return `${process.env.VUE_APP_MOVIES}?id=${this.room.id}`;
+    },
+    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.room.downloaded = true;
+          clearInterval(this.progressInterval);
+        }
+      }, 2 * 1000);
+    } else {
+      this.room.downloaded = true;
+      this.$nextTick(() => {
+        const element = this.$refs.video as HTMLVideoElement;
+        this.positionInterval = setInterval(async () => {
+          if (this.playing) {
+            const serverPosition = await getPosition(this.id);
+            // this.room.position = element.currentTime;
+            if (Math.abs(this.room.position - serverPosition) > 2) {
+              this.room.position = serverPosition;
+              element.currentTime = serverPosition;
+              console.log('Synced');
+            }
+          }
+        }, 2 * 1000);
+      });
+    }
+  },
+  beforeUnmount() {
+    clearInterval(this.progressInterval);
+    clearInterval(this.positionInterval);
+  },
+  methods: {
+    seeked() {
+      const element = this.$refs.video as HTMLVideoElement;
+      const position = element.currentTime;
+      setPosition(this.id, position);
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  font-size: 32px;
+}
+.progress-bar {
+  width: 400px;
+  height: 25px;
+  border: 1px solid black;
+  margin: auto;
+}
+
+video {
+  width: 800px;
+  max-width: 100%;
+}
+</style>

src/views/Room/components/ProgressBar.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div
+      class="fill"
+      :style="{
+        width: `${progress * 100}%`
+      }"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    progress: {
+      type: Number,
+      default: 0,
+    },
+  },
+});
+</script>
+
+<class lang="scss" scoped>
+.fill {
+  background: lightblue;
+  height: 100%;
+}
+</class>

src/views/Room/getPosition.ts

@@ -0,0 +1,7 @@
+import api from '@/api/index';
+
+export default (id: String) => api.get('/position', {
+  params: {
+    id,
+  },
+}).then((response) => response.data.position);

src/views/Room/getRoom.ts

@@ -0,0 +1,7 @@
+import api from '@/api/index';
+
+export default (id:String) => api.get('/room', {
+  params: {
+    id,
+  },
+}).then((response) => response.data);

src/views/Room/getStatus.ts

@@ -0,0 +1,7 @@
+import api from '@/api/index';
+
+export default (id: String) => api.get('/status', {
+  params: {
+    id,
+  },
+}).then((response) => response.data);

src/views/Room/setPosition.ts

@@ -0,0 +1,6 @@
+import api from '@/api/index';
+
+export default (id: String, position: number) => api.post('/position', {
+  id,
+  position,
+}).then((response) => response.data);