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