diff --git a/package-lock.json b/package-lock.json
index 5b4a70f..f8b62b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,12 +9,13 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.6.5",
-        "crypto-js": "^4.0.0",
         "mitt": "^2.1.0",
         "pretty-bytes": "^5.5.0",
+        "pretty-ms": "^7.0.1",
         "primeflex": "^2.0.0",
         "primeicons": "^4.1.0",
         "primevue": "^3.1.1",
+        "sha-1": "^1.0.0",
         "vue": "^3.0.0",
         "vue-router": "^4.0.2",
         "webtorrent": "^0.112.0"
@@ -5192,11 +5193,6 @@
         "node": "*"
       }
     },
-    "node_modules/crypto-js": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.0.0.tgz",
-      "integrity": "sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg=="
-    },
     "node_modules/css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -11956,6 +11952,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/parse-ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-2.1.0.tgz",
+      "integrity": "sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parse-torrent": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/parse-torrent/-/parse-torrent-9.1.0.tgz",
@@ -12971,6 +12975,20 @@
         "renderkid": "^2.0.4"
       }
     },
+    "node_modules/pretty-ms": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-7.0.1.tgz",
+      "integrity": "sha512-973driJZvxiGOQ5ONsFhOF/DtzPMOMtgC11kCpUrPGMTgqp2q/1gwzCquocrN33is0VZ5GFHXZYMM9l6h67v2Q==",
+      "dependencies": {
+        "parse-ms": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/primeflex": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-2.0.0.tgz",
@@ -14530,6 +14548,11 @@
       "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
       "dev": true
     },
+    "node_modules/sha-1": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/sha-1/-/sha-1-1.0.0.tgz",
+      "integrity": "sha512-qjFA/+LdT0Gvu/JcmYTGZMvVy6WXJOWv1KQuY7HvSr2oBrMxA8PnZu2mc1/ZS2EvLMokj7lIeQsNPjkRzXrImw=="
+    },
     "node_modules/sha.js": {
       "version": "2.4.11",
       "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
@@ -22489,11 +22512,6 @@
         "randomfill": "^1.0.3"
       }
     },
-    "crypto-js": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.0.0.tgz",
-      "integrity": "sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg=="
-    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -27797,6 +27815,11 @@
         "json-parse-better-errors": "^1.0.1"
       }
     },
+    "parse-ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-2.1.0.tgz",
+      "integrity": "sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA=="
+    },
     "parse-torrent": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/parse-torrent/-/parse-torrent-9.1.0.tgz",
@@ -28649,6 +28672,14 @@
         "renderkid": "^2.0.4"
       }
     },
+    "pretty-ms": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-7.0.1.tgz",
+      "integrity": "sha512-973driJZvxiGOQ5ONsFhOF/DtzPMOMtgC11kCpUrPGMTgqp2q/1gwzCquocrN33is0VZ5GFHXZYMM9l6h67v2Q==",
+      "requires": {
+        "parse-ms": "^2.1.0"
+      }
+    },
     "primeflex": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-2.0.0.tgz",
@@ -29883,6 +29914,11 @@
       "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
       "dev": true
     },
+    "sha-1": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/sha-1/-/sha-1-1.0.0.tgz",
+      "integrity": "sha512-qjFA/+LdT0Gvu/JcmYTGZMvVy6WXJOWv1KQuY7HvSr2oBrMxA8PnZu2mc1/ZS2EvLMokj7lIeQsNPjkRzXrImw=="
+    },
     "sha.js": {
       "version": "2.4.11",
       "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
diff --git a/package.json b/package.json
index edb4bbe..6b4be81 100644
--- a/package.json
+++ b/package.json
@@ -9,12 +9,13 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "crypto-js": "^4.0.0",
     "mitt": "^2.1.0",
     "pretty-bytes": "^5.5.0",
+    "pretty-ms": "^7.0.1",
     "primeflex": "^2.0.0",
     "primeicons": "^4.1.0",
     "primevue": "^3.1.1",
+    "sha-1": "^1.0.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.2",
     "webtorrent": "^0.112.0"
diff --git a/src/App.vue b/src/App.vue
index 50da4ab..5175723 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,9 @@
 <template>
-  <MenuBar :model="items">
-  </MenuBar>
-  <router-view />
   <Toast position="top-right" />
+  <MenuBar :model="items" />
+  <div class="p-p-6">
+    <router-view />
+  </div>
 </template>
 
 <script>
@@ -32,4 +33,18 @@ export default {
 a:focus {
   box-shadow: none !important;
 }
+
+h1 {
+  font-size: 4em;
+  margin-top: 0;
+  margin-bottom: 0
+}
+
+video {
+  width: 100%
+}
+
+.p-card {
+  margin-bottom: 1.5rem
+}
 </style>
diff --git a/src/components/FileSelect.vue b/src/components/FileSelect.vue
index dac0888..b1f4054 100644
--- a/src/components/FileSelect.vue
+++ b/src/components/FileSelect.vue
@@ -5,7 +5,7 @@
         <i class="pi pi-upload"></i>
         <h2>{{ message }}</h2>
       </div>
-      <input type="file" hidden="true" ref="fileInput" @change="selected" />
+      <input type="file" hidden="true" ref="fileInput" :disabled="disabled" @change="selected" />
     </template>
   </Card>
 </template>
@@ -16,7 +16,8 @@ export default {
     'selected'
   ],
   props: [
-    'message'
+    'message',
+    'disabled'
   ],
   setup (props, context) {
     const selected = (event) => {
diff --git a/src/components/HostWires.vue b/src/components/WireStatistics.vue
similarity index 85%
rename from src/components/HostWires.vue
rename to src/components/WireStatistics.vue
index 64c2e45..1317324 100644
--- a/src/components/HostWires.vue
+++ b/src/components/WireStatistics.vue
@@ -4,7 +4,7 @@
       Wire statistics
     </template>
     <template #content>
-      <DataTable :value="wires" :autoLayout="true">
+      <DataTable :value="wireStatistics" sortField="peerId" :autoLayout="true">
         <Column field="peerId" header="Wire ID"></Column>
         <Column field="remoteAddress" header="Remote address"></Column>
         <Column field="uploadSpeed" header="Upload speed"></Column>
@@ -19,17 +19,10 @@
 <script>
 export default {
   props: {
-    wires: {
+    wireStatistics: {
       type: Object,
       required: true
     }
-  },
-  setup (props) {
-
   }
 }
 </script>
-
-<style>
-
-</style>
diff --git a/src/helpers/wire-statistics.js b/src/helpers/wire-statistics.js
new file mode 100644
index 0000000..ee246fe
--- /dev/null
+++ b/src/helpers/wire-statistics.js
@@ -0,0 +1,15 @@
+import sha1 from 'sha-1'
+import prettyBytes from 'pretty-bytes'
+
+const generateWireStatistics = (wires) => {
+  return wires.map(wire => ({
+    peerId: sha1(wire.peerId).toString().substring(0, 100),
+    remoteAddress: wire.remoteAddress,
+    uploadSpeed: prettyBytes(wire.uploadSpeed()) + 'ps',
+    uploaded: prettyBytes(wire.uploaded),
+    downloadSpeed: prettyBytes(wire.downloadSpeed()) + 'ps',
+    downloaded: prettyBytes(wire.downloaded)
+  }))
+}
+
+export default generateWireStatistics
diff --git a/src/main.js b/src/main.js
index 42c1e9f..98f16a6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,7 @@ import Router from './router'
 
 // Import global components.
 import FileSelect from '@/components/FileSelect.vue'
-import HostWires from '@/components/HostWires.vue'
+import WireStatistics from '@/components/WireStatistics.vue'
 
 // Import PrimeVue dependencies.
 import PrimeVue from 'primevue/config'
@@ -42,9 +42,12 @@ app.component('Toast', Toast)
 
 // Register VCinemaApp components.
 app.component('FileSelect', FileSelect)
-app.component('HostWires', HostWires)
+app.component('WireStatistics', WireStatistics)
 
 app.provide('trackers', [
+  'wss://tracker.btorrent.xyz',
+  'wss://tracker.openwebtorrent.com',
+  'wss://tracker.fastcast.nz',
   'wss://tracker.sloppyta.co:443/announce',
   'wss://tracker.files.fm:7073/announce',
   'wss://open.tube:443/tracker/socket',
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b2fed93..bc6c7ce 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="p-grid p-p-6 p-flex-lg-row-reverse p-flex-column">
+  <div class="p-grid p-flex-lg-row-reverse p-flex-column">
       <div class="p-col-12 p-lg-6 p-text-center">
         <span class="popcorn"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 867.10818 500.05662"><defs><clipPath id="a1708186-1525-433e-878d-7c35f03ac629" transform="translate(-166.44591 -199.97169)"><path d="M695.14831,283.9783l-6.77-16.49-90.27,37.06a11.15,11.15,0,0,0-6.91,10.31v97.53h17.83v-93.03Z" fill="none"/></clipPath><linearGradient id="feb2277d-7772-4d61-b1af-dc7db61f73e8" x1="916.58831" y1="601.91813" x2="916.58831" y2="667.79812" gradientTransform="matrix(1, 0, 0, -1, -166.44591, 702.02831)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-opacity="0.12"/><stop offset="0.55" stop-opacity="0.09"/><stop offset="1" stop-opacity="0.02"/></linearGradient></defs><title>movie_night</title><path d="M14.95531,192.03591H300.15287a14,14,0,0,1,14,14v22.23774a0,0,0,0,1,0,0H.95533a0,0,0,0,1,0,0V206.0359A14,14,0,0,1,14.95531,192.03591Z" fill="#3f3d56"/><path d="M461.18569,389.41919a12.84166,12.84166,0,0,0-4.13933.70477,7.75132,7.75132,0,0,0-15.27374,1.88364c0,.03871.00964.07457.01043.11312a13.30859,13.30859,0,0,0-2.85556.59165,7.794,7.794,0,0,0-3.83869-4.94648,12.98613,12.98613,0,0,0,5.60148-6.13088c6.33278-.103,11.436-4.68107,11.436-10.33468,0-5.71823-5.21489-10.35364-11.64784-10.35364a12.84177,12.84177,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632c-.30949.21533-.59812.4572-.88739.69781a7.34987,7.34987,0,0,0-5.2931-1.76183,12.89142,12.89142,0,0,0-25.06384,4.01374,13.24765,13.24765,0,0,0-3.05478.60918,7.76417,7.76417,0,0,0-.44646-1.27745,9.72676,9.72676,0,0,0,3.2916-7.19254c0-5.71823-5.2149-10.35364-11.64784-10.35364a12.842,12.842,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632,12.90859,12.90859,0,0,0-5.53212,10.01508c-.10949.09732-.23493.176-.33872.27932a9.2223,9.2223,0,0,0,.301-2.26344c0-5.71823-5.2149-10.35364-11.64784-10.35364a12.84172,12.84172,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632,12.90822,12.90822,0,0,0,0,21.23873,7.05915,7.05915,0,0,0,0,4.64536,13.06918,13.06918,0,0,0-3.3115,3.34373,7.71691,7.71691,0,0,0-15.12049,1.30685,12.33158,12.33158,0,0,0-3.32777-1.34445A13.01113,13.01113,0,0,0,306.093,381.635c6.33279-.103,11.436-4.68107,11.436-10.33468,0-5.71823-5.2149-10.35364-11.64785-10.35364a12.84171,12.84171,0,0,0-4.13933.70477,7.73969,7.73969,0,1,0-14.88067,4.20632c-.166.11549-.31565.25135-.476.37426-.4038-.0376-.79639-.10853-1.21126-.10853a12.842,12.842,0,0,0-4.13934.70476c-.049-.19526-.12954-.37647-.19274-.56558a7.6278,7.6278,0,0,0-7.92637-9.23416,12.92962,12.92962,0,1,0-20.32085,14.40561,13.39192,13.39192,0,0,0-2.62095.57095A7.69523,7.69523,0,0,0,237.648,367.8419a12.10286,12.10286,0,0,0-9.41916-4.3068,12.84172,12.84172,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632,12.91366,12.91366,0,0,0-5.56988,10.61936c0,.04013.01153.07694.01185.11691a10.73636,10.73636,0,0,0-5.4454.58786,7.73968,7.73968,0,1,0-14.88066,4.20632,12.889,12.889,0,0,0,10.1868,23.21749,12.89592,12.89592,0,0,0,24.36729,3.31039,12.8992,12.8992,0,0,0,23.50391-.397,12.87909,12.87909,0,0,0,4.45736-.86291,12.8957,12.8957,0,0,0,24.01514.86291,12.66149,12.66149,0,0,0,5.429-1.34334,12.88273,12.88273,0,0,0,23.04354-1.24507,13.04794,13.04794,0,0,0,2.06959-.2166,12.92926,12.92926,0,0,0,23.81451.2166,12.88231,12.88231,0,0,0,3.0077-.44362,12.61784,12.61784,0,0,0,14.01507-5.35218,12.93614,12.93614,0,0,0,24.39178,8.38421,12.66152,12.66152,0,0,0,5.429-1.34334,12.88273,12.88273,0,0,0,23.04354-1.24507,12.66149,12.66149,0,0,0,5.429-1.34334,12.8073,12.8073,0,0,0,19.18652,3.71879,12.887,12.887,0,0,0,23.0527,5.3457,12.85359,12.85359,0,0,0,19.63046-5.13274c6.33279-.103,11.436-4.68107,11.436-10.33468C472.83354,394.0546,467.61864,389.41919,461.18569,389.41919ZM229.8384,384.07712c-.01359.06241-.02307.12639-.03587.18927-.09447-.00348-.184-.024-.27947-.024a7.70783,7.70783,0,0,0-1.15328.11628c.021-.04661.05055-.08831.07093-.13523A12.88755,12.88755,0,0,0,229.8384,384.07712Zm108.14113-4.3068c-.03776-.15072-.10238-.28927-.14867-.43635a13.00467,13.00467,0,0,0,4.49986-5.46419,12.1173,12.1173,0,0,0,8.9994-4.075,7.78885,7.78885,0,0,0-.15182,1.50559,7.68,7.68,0,0,0,.39306,2.32268,12.98976,12.98976,0,0,0-4.81156,6.30782,12.70178,12.70178,0,0,0-8.78027-.16051Zm77.52384.96513c-.00522-.15862.01453-.32213.0041-.47964a7.72736,7.72736,0,0,0,.98646-.067,12.82884,12.82884,0,0,0,2.46581,4.56779c-.2444.06857-.5016.1098-.73952.19053A7.80593,7.80593,0,0,0,415.50337,380.73545Z" transform="translate(-166.44591 -199.97169)" fill="#f9a825"/><path d="M193.47491,404.94965a27.02565,27.02565,0,0,0-26.98872,28.47756l17.52738,241.02034a27.02449,27.02449,0,0,0,26.98871,25.58076H436.99772a27.02449,27.02449,0,0,0,26.98871-25.58076l17.52738-241.02034a27.02565,27.02565,0,0,0-26.98872-28.47756Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><rect x="39.78147" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="83.78442" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="127.78738" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="171.79034" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="215.7933" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="259.79626" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><path id="a971f948-84ae-4583-a462-a09341ab7c50" data-name="2572ddba-42e8-4159-9036-35cbff74dfb7" d="M695.14831,283.9783l-6.77-16.49-90.27,37.06a11.15,11.15,0,0,0-6.91,10.31v97.53h17.83v-93.03Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><g clip-path="url(#a1708186-1525-433e-878d-7c35f03ac629)"><rect x="497.66242" y="49.59661" width="19.44" height="61.56999" fill="#6c63ff"/><rect x="466.88239" y="62.55662" width="19.44" height="61.57001" fill="#6c63ff"/><polygon points="456.342 115.217 442.572 119.267 436.902 53.647 456.342 53.647 456.342 115.217" fill="#6c63ff"/><rect x="406.1124" y="122.50663" width="61.57001" height="19.44" fill="#6c63ff"/><rect x="406.12238" y="149.24662" width="61.57001" height="19.44" fill="#6c63ff"/><rect x="406.1124" y="175.98661" width="61.57001" height="19.44" fill="#6c63ff"/></g><polygon points="497.662 500.057 378.572 500.057 349.402 208.387 523.592 208.387 497.662 500.057" fill="#3f3d56"/><rect x="337.25239" y="203.52662" width="199.29999" height="19.44" fill="#3f3d56"/><circle cx="739.31239" cy="67.17019" r="66.97999" fill="#3ad29f"/><polygon points="783.662 67.17 716.622 100.11 716.622 67.17 716.622 34.23 783.662 67.17" fill="url(#feb2277d-7772-4d61-b1af-dc7db61f73e8)"/><polygon points="779.632 67.17 720.642 96.16 720.642 67.17 720.642 38.18 779.632 67.17" fill="#fff"/><path d="M844.2583,274.83188a67,67,0,0,1,118.62-42.66,67,67,0,1,0-108.77,77.64A66.65991,66.65991,0,0,1,844.2583,274.83188Z" transform="translate(-166.44591 -199.97169)" fill="#fff" opacity="0.2" style="isolation:isolate"/><path d="M893.994,614.78026a2.94921,2.94921,0,0,0-2.94653,2.944v79.36a2.94921,2.94921,0,0,0,2.94653,2.944h136.61352a2.94921,2.94921,0,0,0,2.94653-2.944v-79.36a2.94921,2.94921,0,0,0-2.94653-2.944Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><path d="M909.26082,621.77888a5.49446,5.49446,0,0,0-5.48809,5.48809v60.27462a5.49447,5.49447,0,0,0,5.48809,5.4881h106.08a5.49447,5.49447,0,0,0,5.4881-5.4881V627.267a5.49447,5.49447,0,0,0-5.4881-5.48809Z" transform="translate(-166.44591 -199.97169)" fill="#ff6584"/><rect x="657.92175" y="440.94978" width="71.16175" height="16.48258" fill="#3f3d56"/><path d="M700.53937,614.78026a2.94869,2.94869,0,0,0-2.944,2.944v79.36a2.94869,2.94869,0,0,0,2.944,2.944h136.616a2.94869,2.94869,0,0,0,2.944-2.944v-79.36a2.94869,2.94869,0,0,0-2.944-2.944Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><path d="M715.80864,621.77888a5.495,5.495,0,0,0-5.49058,5.48809v60.27462a5.495,5.495,0,0,0,5.49058,5.4881H821.88611a5.495,5.495,0,0,0,5.49057-5.4881V627.267a5.495,5.495,0,0,0-5.49057-5.48809Z" transform="translate(-166.44591 -199.97169)" fill="#6c63ff"/></svg></span>
       </div>
       <div class="p-col-12 p-lg-6">
-        <h1 class=p-my-0>VCinema&trade;</h1>
+        <h1>VCinema&trade;</h1>
         <p>Welcome to VCinema&trade;, the web application designed to make collaborative video watching easy.</p>
-        <p>Videos are distributed peer-to-peer through WebRTC. This means means:</p>
+        <p>Videos are distributed peer-to-peer through WebRTC. This means:</p>
         <ul>
             <li>Unlimited participants</li>
             <li>Guaranteed encryption</li>
@@ -17,19 +17,7 @@
   </div>
 </template>
 
-<script>
-export default {
-  setup () {
-
-  }
-}
-</script>
-
 <style>
-h1 {
-  font-size: 4em;
-  max-width: 100%;
-}
 span.popcorn svg {
     width: 100%;
     max-width: 500px;
diff --git a/src/views/Host.vue b/src/views/Host.vue
index 7857ead..2c0519c 100644
--- a/src/views/Host.vue
+++ b/src/views/Host.vue
@@ -1,58 +1,81 @@
 <template>
-  <div class="p-p-6">
-    <h1 class="p-my-0">Host</h1>
-    <Card class="p-mb-4" v-show="state.active">
+  <h1>Host</h1>
+  <FileSelect v-if="!video.file" message="Drag a H.264 encoded MP4 here to start a screen." :disabled="!!video.file" @selected="onFilesSelected" />
+  <Card v-else-if="!state.active">
       <template #content>
-        <video id="player" controls="true"></video>
+        <div class="p-text-center">
+          <ProgressSpinner />
+          <h2>Generating hash. Please wait...</h2>
+        </div>
+      </template>
+  </Card>
+  <div v-show="state.active && !!video.file">
+    <Card>
+      <template #content>
+        <video controls="true" ref="player"></video>
       </template>
     </Card>
-    <div v-if="!state.active" key="host-pending">
-      <FileSelect class="p-mb-4" v-if="!state.fileSelected" key="file-select" message="Drag a H.264 encoded MP4 here to start a screen." @selected="onFilesSelected" />
-      <Card class="p-mb-4" v-else key="file-selected">
-        <template #content>
-          <div class="p-text-center">
-            <ProgressSpinner />
-            <h2>Generating hash. Please wait...</h2>
+    <Card>
+      <template #title>
+        Properties
+      </template>
+      <template #content>
+        <div class="p-grid">
+          <div class="p-col-12 p-md-4">
+            <h5>Filename</h5>
+            <span>{{video.name}}</span>
           </div>
-        </template>
-      </Card>
-    </div>
-    <div v-else key="host-live">
-      <Card class="p-mb-4">
-        <template #title>
-          Info hash
-        </template>
-        <template #content>
-          <InputText id="infoHash" type="text" v-model="state.infoHash" disabled />
-        </template>
-      </Card>
-      <HostWires class="p-mb-4" :wires="wires"/>
-    </div>
+          <div class="p-col-12 p-md-4">
+            <h5>Duration</h5>
+            <span>{{video.hDuration}}</span>
+          </div>
+          <div class="p-col-12 p-md-4">
+            <h5>File size</h5>
+            <span>{{video.hSize}}</span>
+          </div>
+          <div class="p-col-12">
+            <h5>ID</h5>
+            <div class="p-fluid">
+              <InputText class="p-inputtext-sm" :value="state.infoHash" disabled />
+            </div>
+          </div>
+        </div>
+      </template>
+    </Card>
+    <WireStatistics :wireStatistics="wireStatistics"/>
   </div>
 </template>
 
 <script>
-import { inject, onBeforeUnmount, onMounted, reactive } from 'vue'
+import { inject, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { useToast } from 'primevue/usetoast'
 import prettyBytes from 'pretty-bytes'
-import sha1 from 'crypto-js/sha1'
+import prettyMilliseconds from 'pretty-ms'
 import WebTorrent from 'webtorrent/webtorrent.min.js'
+import generateWireStatistics from '@/helpers/wire-statistics'
 
 export default {
   setup () {
     const toast = useToast()
     const trackers = inject('trackers')
+    var webTorrent = null
+    const player = ref(null)
+    const video = reactive({
+      file: null,
+      name: '',
+      size: 0,
+      duration: 0,
+      hSize: '',
+      hDuration: ''
+    })
     const state = reactive({
       active: false,
-      fileSelected: false,
+      torrent: null,
       infoHash: '',
-      size: 0,
       uploaded: 0,
-      uploadSpeed: 0,
       wires: []
     })
-    var webTorrent = null
-    const wires = reactive([])
+    const wireStatistics = reactive([])
 
     onMounted(() => {
       webTorrent = new WebTorrent()
@@ -68,67 +91,62 @@ export default {
       if (f?.length !== 1 || !f[0].name.endsWith('.mp4') || f[0].type !== 'video/mp4') {
         toast.add({ severity: 'error', summary: 'Bad file input', detail: 'You must select a single H.264 encoded MP4.', life: 3000 })
       } else {
-        state.fileSelected = true
-      }
+        // Load video in DOM.
+        player.value.src = URL.createObjectURL(f[0])
 
-      seedFile(f[0])
+        // Load video information such that it can be rendered.
+        video.file = f[0]
+        video.name = f[0].name
+        video.size = f[0].size
+        video.hSize = prettyBytes(f[0].size)
+        player.value.addEventListener('loadedmetadata', (e) => {
+          video.duration = e.target.duration
+          video.hDuration = prettyMilliseconds(e.target.duration * 1000)
+        })
+
+        // Seed the video.
+        seedVideo(f[0])
+      }
     }
 
-    const seedFile = (file) => {
-      webTorrent.seed(file, { announce: trackers }, (torrent) => {
-        var file = torrent.files.find(file => {
-          return file.name.endsWith('.mp4')
-        })
-
-        state.size = file.size
+    const seedVideo = (video) => {
+      webTorrent.seed(video, { announce: trackers }, torrent => {
         state.active = true
         state.infoHash = torrent.infoHash
-
-        var fileRendered = false
-
-        file.createReadStream().on('data', () => {
-          if (!fileRendered) {
-            file.renderTo('#player')
-            fileRendered = true
-          }
-        })
+        state.wires = torrent.wires
 
         torrent.on('upload', bytes => {
           state.uploaded += bytes
+          updateWireStatistics()
         })
 
         torrent.on('wire', wire => {
-          state.wires.push(wire)
+          updateWireStatistics()
           toast.add({ severity: 'info', summary: 'New watcher', detail: 'Someone has joined your screen.', life: 3000 })
         })
 
-        toast.add({ severity: 'success', summary: 'File added', detail: `You are now sharing ${file.name}`, life: 5000 })
+        toast.add({ severity: 'success', summary: 'Video added', detail: `You are now sharing ${video.name}`, life: 5000 })
       })
     }
 
-    setInterval(() => {
-      const newWires = state.wires.map(wire => ({
-        peerId: sha1(wire.peerId).toString().substring(0, 100),
-        remoteAddress: wire.remoteAddress,
-        uploadSpeed: prettyBytes(wire.uploadSpeed()) + 'ps',
-        uploaded: prettyBytes(wire.uploaded),
-        downloadSpeed: prettyBytes(wire.downloadSpeed()) + 'ps',
-        downloaded: prettyBytes(wire.downloaded)
-      }))
-      wires.splice.apply(wires, [0, newWires.length].concat(newWires))
-    }, 500)
+    const updateWireStatistics = () => {
+      var newWireStatistics = generateWireStatistics(state.wires)
+      wireStatistics.splice.apply(wireStatistics, [0, newWireStatistics.length].concat(newWireStatistics))
+    }
 
     return {
       onFilesSelected,
+      player,
+      video,
       state,
-      wires
+      wireStatistics
     }
   }
 }
 </script>
 
 <style>
-#infoHash, video#player {
+#infoHash {
   width: 100%;
 }
 </style>
diff --git a/src/views/Join.vue b/src/views/Join.vue
index 93ab210..01dc771 100644
--- a/src/views/Join.vue
+++ b/src/views/Join.vue
@@ -1,19 +1,17 @@
 <template>
-  <div class="p-p-6">
-    <h1 class="p-my-0">Join</h1>
-    <Card>
-      <template #content>
-        <div class="p-fluid p-formgrid p-grid p-jc-center">
-          <div class="p-field p-col-12 p-lg-8">
-              <InputText :placeholder="defaultId" v-model="id" @keydown.enter="onIdSelected" />
-          </div>
-          <div class="p-field p-col-12 p-lg-2">
-              <Button label="Join" @click="onIdSelected" />
-          </div>
+  <h1>Join</h1>
+  <Card>
+    <template #content>
+      <div class="p-fluid p-formgrid p-grid p-jc-center">
+        <div class="p-field p-col-12 p-lg-8">
+            <InputText :placeholder="defaultId" v-model="id" @keydown.enter="onIdSelected" />
         </div>
-      </template>
-    </Card>
-  </div>
+        <div class="p-field p-col-12 p-lg-2">
+            <Button label="Join" @click="onIdSelected" />
+        </div>
+      </div>
+    </template>
+  </Card>
 </template>
 
 <script>
@@ -26,7 +24,7 @@ export default {
     const router = useRouter()
     const toast = useToast()
     const id = ref()
-    const defaultId = '08ada5a7a6183aae1e09d831df6748d566095a10'
+    const defaultId = '6a9759bffd5c0af65319979fb7832189f4f3c35d'
     const onIdSelected = () => {
       if (!id.value) {
         id.value = defaultId
diff --git a/src/views/Screen.vue b/src/views/Screen.vue
index ec0513a..0e5029c 100644
--- a/src/views/Screen.vue
+++ b/src/views/Screen.vue
@@ -1,27 +1,57 @@
 <template>
-  <div class="p-p-6">
-    <h1 class="p-my-0">Watch</h1>
-    <Card class="p-mb-4" v-if="state.wires.length === 0">
+  <h1>Watch</h1>
+  <Card class="p-text-center" v-if="!state.active">
+    <template #content>
+      <ProgressSpinner />
+      <h2>Waiting for connections. Please wait...</h2>
+    </template>
+  </Card>
+  <div v-show="state.active">
+    <Card >
       <template #content>
-        <div class="p-text-center">
-          <ProgressSpinner />
-          <h2>Waiting for connections. Please wait...</h2>
+        <ProgressBar class="p-mb-2" :value="progress" :showValue="false" />
+        <video ref="player" controls="true"></video>
+      </template>
+    </Card>
+    <Card>
+      <template #title>
+        Properties
+      </template>
+      <template #content>
+        <div class="p-grid">
+          <div class="p-col-12 p-md-4">
+            <h5>Filename</h5>
+            <span>{{video.name}}</span>
+          </div>
+          <div class="p-col-12 p-md-4">
+            <h5>Duration</h5>
+            <span>{{video.hDuration}}</span>
+          </div>
+          <div class="p-col-12 p-md-4">
+            <h5>File size</h5>
+            <span>{{video.hSize}}</span>
+          </div>
+          <div class="p-col-12">
+            <h5>ID</h5>
+            <div class="p-fluid">
+              <InputText class="p-inputtext-sm" :value="state.infoHash" disabled />
+            </div>
+          </div>
         </div>
       </template>
     </Card>
-    <Card class="p-mb-4" v-show="state.wires.length !== 0">
-      <template #content>
-        <video id="player" controls="true"></video>
-      </template>
-    </Card>
+    <WireStatistics :wireStatistics="wireStatistics"/>
   </div>
 </template>
 
 <script>
-import { inject, onBeforeMount, onBeforeUnmount, onMounted, reactive } from 'vue'
+import { inject, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from 'primevue/usetoast'
+import prettyBytes from 'pretty-bytes'
+import prettyMilliseconds from 'pretty-ms'
 import WebTorrent from 'webtorrent/webtorrent.min.js'
+import generateWireStatistics from '@/helpers/wire-statistics'
 
 export default {
   props: {
@@ -34,10 +64,25 @@ export default {
     const router = useRouter()
     const toast = useToast()
     const trackers = inject('trackers')
+    var webTorrent = null
+    const player = ref(null)
+    const progress = ref()
+    const video = reactive({
+      file: null,
+      name: '',
+      size: 0,
+      duration: 0,
+      hSize: '',
+      hDuration: ''
+    })
     const state = reactive({
+      active: false,
+      torrent: null,
+      infoHash: '',
+      downloaded: 0,
       wires: []
     })
-    var webTorrent = null
+    const wireStatistics = reactive([])
 
     onBeforeMount(() => {
       if (!/^([a-f0-9]{40})$/.test(props.id)) {
@@ -48,26 +93,7 @@ export default {
 
     onMounted(() => {
       webTorrent = new WebTorrent()
-      webTorrent.add(props.id, { announce: trackers }, function (torrent) {
-        var file = torrent.files.find(function (file) {
-          return file.name.endsWith('.mp4')
-        })
-
-        var fileRendered = false
-
-        file.createReadStream().on('data', () => {
-          if (!fileRendered) {
-            file.renderTo('#player')
-            fileRendered = true
-          }
-        })
-
-        torrent.on('wire', wire => {
-          console.log(wire)
-          state.wires.push(wire)
-          toast.add({ severity: 'info', summary: 'New watcher', detail: 'Someone has joined your screen.', life: 3000 })
-        })
-      })
+      downloadVideo(props.id)
     })
 
     onBeforeUnmount(() => {
@@ -76,8 +102,65 @@ export default {
       }
     })
 
+    const downloadVideo = (infoHash) => {
+      webTorrent.add(infoHash, { announce: trackers }, torrent => {
+        torrent.on('wire', () => {
+          updateWireStatistics()
+          toast.add({ severity: 'info', summary: 'New watcher', detail: 'Someone has joined your screen.', life: 3000 })
+        })
+
+        torrent.on('noPeers', () => {
+          toast.add({ severity: 'warning', summary: 'No peers', detail: 'No one is sharing this video at the moment.', life: 3000 })
+        })
+
+        torrent.on('upload', bytes => {
+          updateWireStatistics()
+        })
+
+        torrent.on('download', bytes => {
+          if (!state.active) {
+            state.active = true
+            initialise(torrent)
+          }
+          state.downloaded += bytes
+          progress.value = state.downloaded / video.size * 100
+          updateWireStatistics()
+        })
+      })
+    }
+
+    const initialise = (torrent) => {
+      state.torrent = torrent
+      state.infoHash = torrent.infoHash
+      state.wires = torrent.wires
+
+      var file = torrent.files.find(file => {
+        return file.name.endsWith('.mp4')
+      })
+
+      video.file = file
+      video.name = file.name
+      video.size = file.length
+      video.hSize = prettyBytes(file.length)
+      player.value.addEventListener('loadedmetadata', (e) => {
+        video.duration = e.target.duration
+        video.hDuration = prettyMilliseconds(e.target.duration * 1000)
+      })
+
+      file.renderTo(player.value)
+    }
+
+    const updateWireStatistics = () => {
+      var newWireStatistics = generateWireStatistics(state.wires)
+      wireStatistics.splice.apply(wireStatistics, [0, newWireStatistics.length].concat(newWireStatistics))
+    }
+
     return {
-      state
+      player,
+      video,
+      state,
+      progress,
+      wireStatistics
     }
   }
 }