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

Merge pull request #2933 from Bnyro/master

Browse source 
feat: make long comments collapsable
This commit is contained in:
Bnyro 2023-09-11 19:14:49 +02:00 committed by GitHub
commit fb5e607f15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/CollapsableText.vue
View file

@ -4,9 +4,9 @@
<span v-if="showFullText" v-html="fullText()" /> <span v-if="showFullText" v-html="fullText()" />
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<span v-else v-html="colapsedText()" /> <span v-else v-html="colapsedText()" />
<span v-if="text.length > 100 && !showFullText">...</span> <span v-if="text.length > visibleLimit && !showFullText">...</span>
<button <button
v-if="text.length > 100" v-if="text.length > visibleLimit"
class="block whitespace-normal font-semibold text-neutral-500 hover:underline" class="block whitespace-normal font-semibold text-neutral-500 hover:underline"
@click="showFullText = !showFullText" @click="showFullText = !showFullText"
> >
@ -24,6 +24,10 @@ export default {
type: String, type: String,
default: null, default: null,
}, },
visibleLimit: {
type: Number,
default: 100,
},
}, },
data() { data() {
return { return {
@ -35,7 +39,7 @@ export default {
return purifyHTML(rewriteDescription(this.text)); return purifyHTML(rewriteDescription(this.text));
}, },
colapsedText() { colapsedText() {
return purifyHTML(rewriteDescription(this.text.slice(0, 100))); return purifyHTML(rewriteDescription(this.text.slice(0, this.visibleLimit)));
}, },
}, },
}; };

11
src/components/CommentItem.vue
View file

@ -29,7 +29,7 @@
<div class="comment-meta mb-1.5 text-sm" v-text="comment.commentedTime" /> <div class="comment-meta mb-1.5 text-sm" v-text="comment.commentedTime" />
</div> </div>
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<div class="whitespace-pre-wrap" v-html="purifiedText" /> <CollapsableText :text="comment.commentText" :visible-limit="500" />
<div class="comment-footer mt-1 flex items-center"> <div class="comment-footer mt-1 flex items-center">
<div class="i-fa6-solid:thumbs-up" /> <div class="i-fa6-solid:thumbs-up" />
<span class="ml-1" v-text="numberFormat(comment.likeCount)" /> <span class="ml-1" v-text="numberFormat(comment.likeCount)" />
@ -61,9 +61,10 @@
</template> </template>
<script> <script>
import { purifyHTML } from "@/utils/HtmlUtils"; import CollapsableText from "./CollapsableText.vue";
export default { export default {
components: { CollapsableText },
props: { props: {
comment: { comment: {
type: Object, type: Object,
@ -82,18 +83,12 @@ export default {
nextpage: null, nextpage: null,
}; };
}, },
computed: {
purifiedText() {
return purifyHTML(this.comment.commentText);
},
},
methods: { methods: {
async loadReplies() { async loadReplies() {
if (!this.showingReplies && this.loadingReplies) { if (!this.showingReplies && this.loadingReplies) {
this.showingReplies = true; this.showingReplies = true;
return; return;
} }
this.loadingReplies = true; this.loadingReplies = true;
this.showingReplies = true; this.showingReplies = true;
this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.videoId, { this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.videoId, {