TerribleCodeClub/VCinema
TerribleCodeClub
/
VCinema
12
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Fix video border issue
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Jack Hadrill 2021-01-06 23:47:35 +00:00
parent 2a63fe02ad
commit cd2304ce35
5 changed files with 79 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

1
src/main.js
View File

@ -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)

8
src/views/Host.vue
View File

@ -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]

8
src/views/Screen.vue
View File

@ -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