mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-12 19:28:22 +00:00
Add rendering of comments. (#169)
* Add rendering of comments. * Finish comments implementation.
This commit is contained in:
parent
8aa4915682
commit
53cf9b30fe
@ -33,23 +33,54 @@
|
||||
<b>Auto Play next Video:</b>
|
||||
<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,
|
||||
|
Loading…
Reference in New Issue
Block a user