mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-12-13 13:50:27 +05:30
parent
149aa69739
commit
e6bbcdd3c3
@ -35,14 +35,21 @@
|
|||||||
|
|
||||||
<font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
|
<font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="comment.repliesPage && notLoading">
|
<template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
|
||||||
<div @click="loadReplies">
|
<div @click="loadReplies">
|
||||||
<a class="uk-link-text">Show Replies</a>
|
<a class="uk-link-text" v-t="'actions.show_replies'" />
|
||||||
|
|
||||||
<font-awesome-icon icon="level-down-alt"></font-awesome-icon>
|
<font-awesome-icon icon="level-down-alt" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
<div v-if="replies" class="replies uk-width-4-5@xl uk-width-3-4@s uk-width-1">
|
<template v-if="showingReplies">
|
||||||
|
<div @click="hideReplies">
|
||||||
|
<a class="uk-link-text" v-t="'actions.hide_replies'" />
|
||||||
|
|
||||||
|
<font-awesome-icon icon="level-up-alt" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div v-show="showingReplies" v-if="replies" class="replies uk-width-4-5@xl uk-width-3-4@s uk-width-1">
|
||||||
<div
|
<div
|
||||||
v-for="reply in replies"
|
v-for="reply in replies"
|
||||||
:key="reply.commentId"
|
:key="reply.commentId"
|
||||||
@ -52,9 +59,9 @@
|
|||||||
<Comment :comment="reply" :uploader="uploader" :video-id="videoId" />
|
<Comment :comment="reply" :uploader="uploader" :video-id="videoId" />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="nextpage" @click="loadReplies">
|
<div v-if="nextpage" @click="loadReplies">
|
||||||
<a class="uk-link-text">Load more Replies</a>
|
<a class="uk-link-text" v-t="'actions.load_more_replies'" />
|
||||||
|
|
||||||
<font-awesome-icon icon="level-down-alt"></font-awesome-icon>
|
<font-awesome-icon icon="level-down-alt" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -75,14 +82,21 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
notLoading: true,
|
loadingReplies: false,
|
||||||
|
showingReplies: false,
|
||||||
replies: [],
|
replies: [],
|
||||||
nextpage: null,
|
nextpage: null,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
loadReplies() {
|
async loadReplies() {
|
||||||
this.notLoading = false;
|
if (!this.showingReplies && this.loadingReplies) {
|
||||||
|
this.showingReplies = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loadingReplies = true;
|
||||||
|
this.showingReplies = true;
|
||||||
this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.videoId, {
|
this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.videoId, {
|
||||||
nextpage: this.nextpage || this.comment.repliesPage,
|
nextpage: this.nextpage || this.comment.repliesPage,
|
||||||
}).then(json => {
|
}).then(json => {
|
||||||
@ -90,6 +104,9 @@ export default {
|
|||||||
this.nextpage = json.nextpage;
|
this.nextpage = json.nextpage;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
async hideReplies() {
|
||||||
|
this.showingReplies = false;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -65,7 +65,10 @@
|
|||||||
"search": "Search",
|
"search": "Search",
|
||||||
"filter": "Filter",
|
"filter": "Filter",
|
||||||
"loading": "Loading...",
|
"loading": "Loading...",
|
||||||
"clear_history": "Clear History"
|
"clear_history": "Clear History",
|
||||||
|
"show_replies": "Show Replies",
|
||||||
|
"hide_replies": "Hide Replies",
|
||||||
|
"load_more_replies": "Load more Replies"
|
||||||
},
|
},
|
||||||
"comment": {
|
"comment": {
|
||||||
"pinned_by": "Pinned by"
|
"pinned_by": "Pinned by"
|
||||||
|
@ -12,6 +12,7 @@ import {
|
|||||||
faChevronLeft,
|
faChevronLeft,
|
||||||
faLevelDownAlt,
|
faLevelDownAlt,
|
||||||
faTv,
|
faTv,
|
||||||
|
faLevelUpAlt,
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
|
import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||||
@ -29,6 +30,7 @@ library.add(
|
|||||||
faRss,
|
faRss,
|
||||||
faChevronLeft,
|
faChevronLeft,
|
||||||
faLevelDownAlt,
|
faLevelDownAlt,
|
||||||
|
faLevelUpAlt,
|
||||||
faTv,
|
faTv,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user