WIP: Cleanup Vue Code
This commit is contained in:
Johnathon Slightham
160
package-lock.json
generated
160
package-lock.json
generated
@@ -1765,16 +1765,6 @@
|
||||
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
||||
"dev": true
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"cacache": {
|
||||
"version": "13.0.1",
|
||||
"resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
|
||||
@@ -1801,53 +1791,6 @@
|
||||
"unique-filename": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
|
||||
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
|
||||
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
@@ -1864,16 +1807,6 @@
|
||||
"minipass": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"terser-webpack-plugin": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
|
||||
@@ -1890,18 +1823,6 @@
|
||||
"terser": "^4.6.12",
|
||||
"webpack-sources": "^1.4.3"
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
|
||||
"integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -11398,6 +11319,87 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.8.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
|
||||
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "3.4.9",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.9.tgz",
|
||||
|
||||
@@ -1,187 +0,0 @@
|
||||
<template>
|
||||
<div class="wholePage">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-5 center-middle">
|
||||
<div class="card" style="background-color: #404e5b;">
|
||||
<h5 class="card-header" style="background-color: #1e2934">Video Information</h5>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title video-title">{{vInfo.title}}</h2>
|
||||
<p class="card-text">{{vInfo.description}}</p>
|
||||
<h3 v-if="vInfo.transcoding">Transcoding Progress: {{vInfo.eta}}</h3>
|
||||
<div class="progress" v-if="vInfo.transcoding">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" v-bind:style="'width: '+ vInfo.progress + '%'" v-bind:aria-valuenow="vInfo.progress" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<br>
|
||||
<form v-on:submit.prevent="like">
|
||||
<button href="#" class="btn btn-primary" style="width: 100%">Like - {{vInfo.likes}}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="card" style="background-color: #404e5b;">
|
||||
<h5 class="card-header" style="background-color: #1e2934">Recent Videos</h5>
|
||||
<div class="card-body">
|
||||
<center><span v-for="post in posts" :key="post._id" style="margin-right: 15px;"><a v-bind:href="'/video?id='+ post._id"><img v-bind:src="uri + '/thumbnails/'+post._id" width="150px" style="margin-top: 15px;"></a></span></center>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-7 center-middle">
|
||||
<br>
|
||||
<div class="video">
|
||||
|
||||
<center>
|
||||
<div class="card" style="background-color: #404e5b; width: 75%;">
|
||||
<h5 class="card-header" style="background-color: #1e2934">Video</h5>
|
||||
<img v-if="vInfo.transcoding" v-bind:src="uri+'/thumbnails/'+ vInfo._id" class="unloaded-thumbnail">
|
||||
|
||||
<video
|
||||
v-if="!vInfo.transcoding"
|
||||
id="my-video"
|
||||
class="video-js vjs-theme-forest"
|
||||
controls
|
||||
fluid="true"
|
||||
v-bind:poster="uri +'/thumbnails/' + id"
|
||||
data-setup="{}"
|
||||
preload="metadata">
|
||||
<source v-bind:src="uri +'/video2/' + id" type="video/mp4" />
|
||||
<p class="video-js vjs-theme-forest">
|
||||
To view this video please enable JavaScript, and consider upgrading to a
|
||||
web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
|
||||
</p>
|
||||
</video>
|
||||
</div>
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="card" style="background-color: #404e5b;">
|
||||
<h5 class="card-header" style="background-color: #1e2934">Comments</h5>
|
||||
<div class="card-body">
|
||||
<div class="media pt-3" v-for="com in vInfo.comments" :key="com">
|
||||
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
||||
{{com}}
|
||||
</p>
|
||||
</div>
|
||||
<br>
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlTextarea1"><h5>Create New</h5></label>
|
||||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" style="color: white; background-color: #505f6d; border: none;" v-model="comment"></textarea>
|
||||
<br>
|
||||
<button class="upload-button btn btn-primary" @click="submitComment">Post</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@import 'https://unpkg.com/video.js@7/dist/video-js.min.css';
|
||||
@import 'https://unpkg.com/@videojs/themes@1/dist/forest/index.css';
|
||||
|
||||
.user_name{
|
||||
font-size:14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.comments-list .media{
|
||||
border-bottom: 1px dotted #ccc;
|
||||
}
|
||||
.wholePage{
|
||||
margin-left: 25px;
|
||||
margin-right: 25px;
|
||||
margin-top: 50px;
|
||||
|
||||
}
|
||||
.center-middle{
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
.video-title{
|
||||
font-weight: bold;
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
max-width: 100% !important;
|
||||
height: auto;
|
||||
}
|
||||
.unloaded-thumbnail{
|
||||
max-height: 50vh;
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Similarly, you can also introduce the plugin resource pack you want to use within the component
|
||||
// import 'some-videojs-plugin'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
posts: [],
|
||||
vInfo: {},
|
||||
id: "",
|
||||
comment: "",
|
||||
uri: "",
|
||||
playerOptions: {
|
||||
// videojs options
|
||||
|
||||
language: 'en',
|
||||
playbackRates: [0.7, 1.0, 1.5, 2],
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
sources: [{
|
||||
type: "video/mp4",
|
||||
src: this.$apiIp + "/video2/" + this.$route.query.id,
|
||||
}],
|
||||
poster: this.$apiIp + "/thumbnails/" + this.$route.query.id,
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.uri = this.$apiIp;
|
||||
this.vInfo.transcoding = true;
|
||||
this.getVideoInfo();
|
||||
this.getAllPosts();
|
||||
this.id = this.$route.query.id;
|
||||
},
|
||||
|
||||
methods: {
|
||||
getVideoInfo(){
|
||||
this.axios.get(this.$apiIp + "/posts/vinfo/" + this.$route.query.id).then((res) =>{
|
||||
this.vInfo = res.data;
|
||||
if(this.vInfo.transcoding){
|
||||
this.sleep(3000);
|
||||
console.log(this.$router.name);
|
||||
if(this.$route.name == 'video'){
|
||||
this.getVideoInfo();
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
sleep(ms) {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(resolve, ms);
|
||||
});
|
||||
},
|
||||
getAllPosts(){
|
||||
this.axios.get(this.$apiIp + "/posts/").then((res) =>{
|
||||
this.posts = res.data.reverse().slice(0, 4);
|
||||
})
|
||||
},
|
||||
like(){
|
||||
this.axios.get(this.$apiIp + "/posts/like/" + this.$route.query.id).then((res) =>{
|
||||
this.vInfo = res.data;
|
||||
})
|
||||
},
|
||||
submitComment(){
|
||||
let msg = {};
|
||||
msg.comment = this.comment;
|
||||
this.axios.post(this.$apiIp + "/posts/postComment/" + this.$route.query.id, msg).then((res) =>{
|
||||
this.vInfo = res.data;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
64
src/components/VideoList.vue
Normal file
64
src/components/VideoList.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<script setup>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
posts: [],
|
||||
uri: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.uri = this.$apiIp;
|
||||
// If there is a query, call the query function
|
||||
if (!this.$route.query.q)
|
||||
this.getAllPosts();
|
||||
else
|
||||
this.getQueryPosts();
|
||||
},
|
||||
methods: {
|
||||
// Get the data for all videos
|
||||
getAllPosts() {
|
||||
this.axios.get(this.$apiIp + "/posts/").then((res) => {
|
||||
this.posts = res.data;
|
||||
this.posts.map(post => {
|
||||
if(post.description.length > 100){
|
||||
post.description = post.description.substring(0, 100);
|
||||
}
|
||||
return post;
|
||||
})
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="card vid-card" v-for="post in posts" :key="post._id" style="">
|
||||
<h5 class="card-header" style="background-color: #1e2934">
|
||||
{{ post.title }}
|
||||
</h5>
|
||||
<img
|
||||
class="card-img-top"
|
||||
v-bind:src="uri + '/thumbnails/' + post._id"
|
||||
alt="Video Thumbnail"/>
|
||||
<div class="card-body" style="background-color: #404e5b">
|
||||
<p class="card-text">{{ post.description }}</p>
|
||||
<b-link v-bind:to="'/video?id=' + post._id" class="btn btn-lg btn-primary">Watch</b-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.vid-card{
|
||||
width: 18rem;
|
||||
height: 27rem;
|
||||
color: white;
|
||||
margin-left: 25px;
|
||||
margin-bottom: 25px;
|
||||
margin-top: 25px;
|
||||
border: none;
|
||||
display: inline-flex;
|
||||
}
|
||||
</style>
|
||||
47
src/components/video/Comments.vue
Normal file
47
src/components/video/Comments.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
vInfo: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
submitComment(){
|
||||
let msg = {};
|
||||
msg.comment = this.comment;
|
||||
this.axios.post(this.$apiIp + "/posts/postComment/" + this.$route.query.id, msg).then((res) =>{
|
||||
this.vInfo = res.data;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card" style="background-color: #404e5b;">
|
||||
<h5 class="card-header" style="background-color: #1e2934">Comments</h5>
|
||||
<div class="card-body">
|
||||
<div class="media pt-3" v-for="com in vInfo.comments" :key="com">
|
||||
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
||||
{{com}}
|
||||
</p>
|
||||
</div>
|
||||
<br>
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlTextarea1">
|
||||
<h5>Create New</h5>
|
||||
</label>
|
||||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" style="color: white; background-color: #505f6d; border: none;" v-model="comment"></textarea>
|
||||
<br>
|
||||
<button class="upload-button btn btn-primary" @click="submitComment">Post</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.media{
|
||||
border-bottom: 1px dotted #ccc;
|
||||
}
|
||||
</style>
|
||||
23
src/components/video/RecentVideoList.vue
Normal file
23
src/components/video/RecentVideoList.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
posts: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card" style="background-color: #404e5b;">
|
||||
<h5 class="card-header" style="background-color: #1e2934">Recent Videos</h5>
|
||||
<div class="card-body">
|
||||
<center><span v-for="post in posts" :key="post._id" style="margin-right: 15px;"><a v-bind:href="'/video?id='+ post._id"><img v-bind:src="uri + '/thumbnails/'+post._id" width="150px" style="margin-top: 15px;"></a></span></center>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
43
src/components/video/VideoInfo.vue
Normal file
43
src/components/video/VideoInfo.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
vInfo: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
like(){
|
||||
this.axios.get(this.$apiIp + "/posts/like/" + this.$route.query.id).then((res) =>{
|
||||
this.vInfo = res.data;
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card" style="background-color: #404e5b;">
|
||||
<h5 class="card-header" style="background-color: #1e2934">Video Information</h5>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title video-title">{{vInfo.title}}</h2>
|
||||
<p class="card-text">{{vInfo.description}}</p>
|
||||
<h3 v-if="vInfo.transcoding">Transcoding Progress: {{vInfo.eta}}</h3>
|
||||
<div class="progress" v-if="vInfo.transcoding">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" v-bind:style="'width: '+ vInfo.progress + '%'" v-bind:aria-valuenow="vInfo.progress" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<br>
|
||||
<form v-on:submit.prevent="like">
|
||||
<button href="#" class="btn btn-primary" style="width: 100%">Like - {{vInfo.likes}}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.video-title{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
53
src/components/video/VideoP.vue
Normal file
53
src/components/video/VideoP.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
vInfo: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
uri: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="video">
|
||||
<center>
|
||||
<div class="card" style="background-color: #404e5b; width: 75%;">
|
||||
<h5 class="card-header" style="background-color: #1e2934">Video</h5>
|
||||
<img v-if="vInfo.transcoding" v-bind:src="uri+'/thumbnails/'+ vInfo._id" class="unloaded-thumbnail">
|
||||
|
||||
<video
|
||||
v-if="!vInfo.transcoding"
|
||||
id="my-video"
|
||||
class="video-js vjs-theme-forest"
|
||||
controls
|
||||
fluid="true"
|
||||
v-bind:poster="uri +'/thumbnails/' + id"
|
||||
data-setup="{}"
|
||||
preload="metadata">
|
||||
<source v-bind:src="uri +'/video2/' + id" type="video/mp4" />
|
||||
<p class="video-js vjs-theme-forest">
|
||||
To view this video please enable JavaScript, and consider upgrading to a
|
||||
web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
|
||||
</p>
|
||||
</video>
|
||||
</div>
|
||||
</center>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.unloaded-thumbnail{
|
||||
max-height: 50vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -14,9 +14,9 @@ Vue.use(BootstrapVue);
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
import Video from './components/Video.vue';
|
||||
import Upload from './components/Upload.vue';
|
||||
import Home from './components/Home.vue';
|
||||
import Video from './pages/Video.vue';
|
||||
import Upload from './pages/Upload.vue';
|
||||
import Home from './pages/Home.vue';
|
||||
import VueVideoPlayer from 'vue-video-player'
|
||||
Vue.use(VueVideoPlayer);
|
||||
|
||||
|
||||
@@ -1,25 +1,15 @@
|
||||
<template>
|
||||
<div style="margin-top: 25px; text-align: center">
|
||||
<div v-if="!posts.length" style="text-align: center">No videos found!</div>
|
||||
|
||||
<div class="card vid-card" v-for="post in posts" :key="post._id" style="">
|
||||
<h5 class="card-header" style="background-color: #1e2934">
|
||||
{{ post.title }}
|
||||
</h5>
|
||||
<img
|
||||
class="card-img-top"
|
||||
v-bind:src="uri + '/thumbnails/' + post._id"
|
||||
alt="Video Thumbnail"/>
|
||||
<div class="card-body" style="background-color: #404e5b">
|
||||
<p class="card-text">{{ post.description }}</p>
|
||||
<b-link v-bind:to="'/video?id=' + post._id" class="btn btn-lg btn-primary">Watch</b-link>
|
||||
</div>
|
||||
</div>
|
||||
<video-list />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VideoList from "@/components/VideoList.vue";
|
||||
|
||||
export default {
|
||||
components: {VideoList},
|
||||
data() {
|
||||
return {
|
||||
posts: [],
|
||||
@@ -66,14 +56,5 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.vid-card{
|
||||
width: 18rem;
|
||||
height: 27rem;
|
||||
color: white;
|
||||
margin-left: 25px;
|
||||
margin-bottom: 25px;
|
||||
margin-top: 25px;
|
||||
border: none;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
</style>
|
||||
109
src/pages/Video.vue
Normal file
109
src/pages/Video.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="wholePage">
|
||||
<div class="row">
|
||||
<div class="col-sm-5 center-middle">
|
||||
<video-info v-info="vInfo" />
|
||||
<br>
|
||||
<recent-video-list posts="posts" />
|
||||
</div>
|
||||
<div class="col-sm-7 center-middle">
|
||||
<br>
|
||||
<video-p id="id" v-info="vInfo" uri="uri" />
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<comments v-info="vInfo" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@import 'https://unpkg.com/video.js@7/dist/video-js.min.css';
|
||||
@import 'https://unpkg.com/@videojs/themes@1/dist/forest/index.css';
|
||||
|
||||
.comments-list .media{
|
||||
border-bottom: 1px dotted #ccc;
|
||||
}
|
||||
.wholePage{
|
||||
margin-left: 25px;
|
||||
margin-right: 25px;
|
||||
margin-top: 50px;
|
||||
|
||||
}
|
||||
.center-middle{
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
max-width: 100% !important;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.user_name{
|
||||
font-size:14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import VideoInfo from "@/components/video/VideoInfo.vue";
|
||||
import Comments from "@/components/video/Comments.vue"
|
||||
import RecentVideoList from "@/components/video/RecentVideoList.vue";
|
||||
import VideoP from "@/components/video/VideoP.vue"
|
||||
|
||||
export default {
|
||||
components: {RecentVideoList, VideoInfo, Comments, VideoP},
|
||||
data() {
|
||||
return {
|
||||
posts: [],
|
||||
vInfo: {},
|
||||
id: "",
|
||||
comment: "",
|
||||
uri: "",
|
||||
playerOptions: {
|
||||
language: 'en',
|
||||
playbackRates: [0.7, 1.0, 1.5, 2],
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
sources: [{
|
||||
type: "video/mp4",
|
||||
src: this.$apiIp + "/video2/" + this.$route.query.id,
|
||||
}],
|
||||
poster: this.$apiIp + "/thumbnails/" + this.$route.query.id,
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.uri = this.$apiIp;
|
||||
this.vInfo.transcoding = true;
|
||||
this.getVideoInfo();
|
||||
this.getAllPosts();
|
||||
this.id = this.$route.query.id;
|
||||
},
|
||||
methods: {
|
||||
getVideoInfo(){
|
||||
this.axios.get(this.$apiIp + "/posts/vinfo/" + this.$route.query.id).then((res) =>{
|
||||
this.vInfo = res.data;
|
||||
if(this.vInfo.transcoding){
|
||||
this.sleep(3000);
|
||||
console.log(this.$router.name);
|
||||
if(this.$route.name == 'video'){
|
||||
this.getVideoInfo();
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
sleep(ms) {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(resolve, ms);
|
||||
});
|
||||
},
|
||||
getAllPosts(){
|
||||
this.axios.get(this.$apiIp + "/posts/").then((res) =>{
|
||||
this.posts = res.data.reverse().slice(0, 4);
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user