TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add rendering of comments. (#169)

Browse source 
* Add rendering of comments.

* Finish comments implementation.
This commit is contained in:
FireMasterK 2021-05-26 01:16:21 +05:30 committed by GitHub
parent 8aa4915682
commit 53cf9b30fe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 57 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/components/WatchVideo.vue
View file

@ -33,23 +33,54 @@
<b>Auto Play next Video:</b>&nbsp;
<input class="uk-checkbox" v-model="selectedAutoPlay" @change="onChange($event)" type="checkbox" />
<div
class="uk-tile-default uk-text-secondary"
style="background: #0b0e0f; width: 300px"
v-bind:key="related.url"
v-for="related in video.relatedStreams"
>
<router-link class="uk-link-muted" v-bind:to="related.url">
<p class="uk-text-emphasis">{{ related.title }}</p>
<img style="width: 100%" v-bind:src="related.thumbnail" loading="lazy" />
</router-link>
<p>
<router-link class="uk-link-muted" v-bind:to="related.uploaderUrl || '/'">
<p>{{ related.uploaderName }}</p>
</router-link>
<font-awesome-icon icon="eye"></font-awesome-icon>
{{ related.views }} views
</p>
<hr />
<div uk-grid>
<div class="uk-width-4-5" v-if="comments">
<div
class="uk-tile-default uk-align-left uk-width-expand"
style="background: #0b0e0f"
v-bind:key="comment.commentId"
v-for="comment in comments.comments"
>
<div align="left">
<img
:src="comment.thumbnail"
style="width: calc(100% * 1 / 20)"
height="176"
width="176"
loading="lazy"
alt="avatar"
/>
<router-link class="uk-link-muted" v-bind:to="comment.commentorUrl">
<p>{{ comment.author }}</p>
</router-link>
</div>
<p>{{ comment.commentText }}</p>
<hr />
</div>
</div>
<div class="uk-width-1-5" v-if="video">
<div
class="uk-tile-default uk-width-auto"
style="background: #0b0e0f"
v-bind:key="related.url"
v-for="related in video.relatedStreams"
>
<router-link class="uk-link-muted" v-bind:to="related.url">
<p class="uk-text-emphasis">{{ related.title }}</p>
<img style="width: 100%" v-bind:src="related.thumbnail" loading="lazy" />
</router-link>
<p>
<router-link class="uk-link-muted" v-bind:to="related.uploaderUrl || '/'">
<p>{{ related.uploaderName }}</p>
</router-link>
<font-awesome-icon icon="eye"></font-awesome-icon>
{{ related.views }} views
</p>
</div>
</div>
</div>
</div>
</template>
@ -68,18 +99,21 @@ export default {
sponsors: null,
selectedAutoPlay: null,
showDesc: true,
comments: null,
};
},
mounted() {
this.selectedAutoPlay = Constants.AUTO_PLAY;
this.getVideoData();
this.getSponsors();
this.getComments();
},
watch: {
"$route.query.v": function(v) {
if (v) {
this.getVideoData();
this.getSponsors();
this.getComments();
}
},
},
@ -98,6 +132,9 @@ export default {
: encodeURIComponent('["sponsor", "interaction", "selfpromo", "music_offtopic"]')),
);
},
fetchComments() {
return this.fetchJson(Constants.BASE_URL + "/comments/" + this.$route.query.v);
},
onChange() {
if (localStorage) localStorage.setItem("autoplay", this.selectedAutoPlay);
},
@ -121,6 +158,9 @@ export default {
if (!localStorage || localStorage.getItem("sponsorblock") !== false)
this.fetchSponsors().then(data => (this.sponsors = data));
},
async getComments() {
this.fetchComments().then(data => (this.comments = data));
},
},
components: {
Player,