Fix video border issue

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "core-js": "^3.6.5",
         "mitt": "^2.1.0",
+        "plyr": "^3.6.3",
         "pretty-bytes": "^5.5.0",
         "pretty-ms": "^7.0.1",
         "primeflex": "^2.0.0",
@@ -5480,6 +5481,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
+    },
     "node_modules/cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -9994,6 +10000,11 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/loadjs": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.2.0.tgz",
+      "integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA=="
+    },
     "node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -12188,6 +12199,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/plyr": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.6.3.tgz",
+      "integrity": "sha512-AEwp5G9BtOK0s2mZhwtfipkCqLm1yPN8iUGcmAtyByDK1fcYoOJiDXZeLf+e7OTjsWi4wRp8Q1VJ+gZjTmVeqA==",
+      "dependencies": {
+        "core-js": "^3.7.0",
+        "custom-event-polyfill": "^1.0.7",
+        "loadjs": "^4.2.0",
+        "rangetouch": "^2.0.1",
+        "url-polyfill": "^1.1.12"
+      }
+    },
     "node_modules/pnp-webpack-plugin": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
@@ -13268,6 +13291,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/rangetouch": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz",
+      "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA=="
+    },
     "node_modules/raw-body": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
@@ -16556,6 +16584,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/url-polyfill": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.12.tgz",
+      "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A=="
+    },
     "node_modules/url/node_modules/punycode": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
@@ -22735,6 +22768,11 @@
         "array-find-index": "^1.0.1"
       }
     },
+    "custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -26270,6 +26308,11 @@
         }
       }
     },
+    "loadjs": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.2.0.tgz",
+      "integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA=="
+    },
     "locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -27993,6 +28036,18 @@
         "find-up": "^4.0.0"
       }
     },
+    "plyr": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.6.3.tgz",
+      "integrity": "sha512-AEwp5G9BtOK0s2mZhwtfipkCqLm1yPN8iUGcmAtyByDK1fcYoOJiDXZeLf+e7OTjsWi4wRp8Q1VJ+gZjTmVeqA==",
+      "requires": {
+        "core-js": "^3.7.0",
+        "custom-event-polyfill": "^1.0.7",
+        "loadjs": "^4.2.0",
+        "rangetouch": "^2.0.1",
+        "url-polyfill": "^1.1.12"
+      }
+    },
     "pnp-webpack-plugin": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
@@ -28917,6 +28972,11 @@
         }
       }
     },
+    "rangetouch": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz",
+      "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA=="
+    },
     "raw-body": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
@@ -31498,6 +31558,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-polyfill": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.12.tgz",
+      "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A=="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "mitt": "^2.1.0",
+    "plyr": "^3.6.3",
     "pretty-bytes": "^5.5.0",
     "pretty-ms": "^7.0.1",
     "primeflex": "^2.0.0",

src/main.js

@@ -22,6 +22,7 @@ import 'primeflex/primeflex.css'
 import 'primeicons/primeicons.css'
 import 'primevue/resources/primevue.min.css'
 import 'primevue/resources/themes/bootstrap4-light-blue/theme.css'
+import 'plyr/src/sass/plyr.scss'
 
 const app = createApp(App)
 

src/views/Host.vue

@@ -12,7 +12,7 @@
   <div v-show="state.active && !!video.file">
     <Card>
       <template #content>
-        <video controls="true" ref="player"></video>
+        <video ref="player"></video>
       </template>
     </Card>
     <Card>
@@ -49,9 +49,10 @@
 <script>
 import { inject, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { useToast } from 'primevue/usetoast'
+import Plyr from 'plyr'
+import WebTorrent from 'webtorrent/webtorrent.min.js'
 import prettyBytes from 'pretty-bytes'
 import prettyMilliseconds from 'pretty-ms'
-import WebTorrent from 'webtorrent/webtorrent.min.js'
 import updateWireStatistics from '@/helpers/wire-statistics'
 
 export default {
@@ -59,6 +60,7 @@ export default {
     const toast = useToast()
     const trackers = inject('trackers')
     const rtcConfig = inject('rtcConfig')
+    var plyr = null
     var webTorrent = null
     var wireUpdateHandle = null
     const player = ref(null)
@@ -81,6 +83,7 @@ export default {
 
     onMounted(() => {
       webTorrent = new WebTorrent({ tracker: { rtcConfig: rtcConfig } })
+      plyr = new Plyr(player.value)
     })
 
     onBeforeUnmount(() => {
@@ -98,6 +101,7 @@ export default {
       } else {
         // Load video in DOM.
         player.value.src = URL.createObjectURL(f[0])
+        console.log(plyr.source)
 
         // Load video information such that it can be rendered.
         video.file = f[0]

src/views/Screen.vue

@@ -10,7 +10,7 @@
     <Card >
       <template #content>
         <ProgressBar class="p-mb-2" :value="progress" :showValue="false" />
-        <video ref="player" controls="true"></video>
+        <video ref="player"></video>
       </template>
     </Card>
     <Card>
@@ -48,9 +48,10 @@
 import { inject, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from 'primevue/usetoast'
+import Plyr from 'plyr'
+import WebTorrent from 'webtorrent/webtorrent.min.js'
 import prettyBytes from 'pretty-bytes'
 import prettyMilliseconds from 'pretty-ms'
-import WebTorrent from 'webtorrent/webtorrent.min.js'
 import updateWireStatistics from '@/helpers/wire-statistics'
 
 export default {
@@ -65,6 +66,7 @@ export default {
     const toast = useToast()
     const trackers = inject('trackers')
     const rtcConfig = inject('rtcConfig')
+    var plyr = null
     var webTorrent = null
     var wireUpdateHandle = null
     const player = ref(null)
@@ -95,6 +97,7 @@ export default {
 
     onMounted(() => {
       webTorrent = new WebTorrent({ tracker: { rtcConfig: rtcConfig } })
+      plyr = new Plyr(player.value)
       downloadVideo(props.id)
     })
 
@@ -150,6 +153,7 @@ export default {
       })
 
       file.renderTo(player.value)
+      console.log(plyr.source)
 
       wireUpdateHandle = setInterval(() => {
         window.w = wireStatistics