fix: links in comments are not clickable

This commit is contained in:
Bnyro 2024-05-16 17:17:34 +02:00
parent ca5e39dfd8
commit afd5c5b3b8
2 changed files with 3 additions and 24 deletions

View file

@ -3,7 +3,7 @@
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<span v-if="showFullText" class="contentText" v-html="fullText()" /> <span v-if="showFullText" class="contentText" 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="collapsedText()" />
<span v-if="text.length > visibleLimit && !showFullText">...</span> <span v-if="text.length > visibleLimit && !showFullText">...</span>
<button <button
v-if="text.length > visibleLimit" v-if="text.length > visibleLimit"
@ -38,7 +38,7 @@ export default {
fullText() { fullText() {
return purifyHTML(rewriteDescription(this.text)); return purifyHTML(rewriteDescription(this.text));
}, },
colapsedText() { collapsedText() {
return purifyHTML(rewriteDescription(this.text.slice(0, this.visibleLimit))); return purifyHTML(rewriteDescription(this.text.slice(0, this.visibleLimit)));
}, },
}, },

View file

@ -546,33 +546,13 @@ export default {
this.fetchSponsors().then(data => (this.sponsors = data)); this.fetchSponsors().then(data => (this.sponsors = data));
}, },
async getComments() { async getComments() {
this.fetchComments().then(data => { this.comments = await this.fetchComments();
this.rewriteComments(data.comments);
this.comments = data;
});
}, },
async fetchSubscribedStatus() { async fetchSubscribedStatus() {
if (!this.channelId) return; if (!this.channelId) return;
this.subscribed = await this.fetchSubscriptionStatus(this.channelId); this.subscribed = await this.fetchSubscriptionStatus(this.channelId);
}, },
rewriteComments(data) {
data.forEach(comment => {
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(comment.commentText, "text/html");
xmlDoc.querySelectorAll("a").forEach(elem => {
if (!elem.innerText.match(/(?:[\d]{1,2}:)?(?:[\d]{1,2}):(?:[\d]{1,2})/))
elem.outerHTML = elem.getAttribute("href");
});
comment.commentText = xmlDoc
.querySelector("body")
.innerHTML.replaceAll(/(?:http(?:s)?:\/\/)?(?:www\.)?youtube\.com(\/[/a-zA-Z0-9_?=&-]*)/gm, "$1")
.replaceAll(
/(?:http(?:s)?:\/\/)?(?:www\.)?youtu\.be\/(?:watch\?v=)?([/a-zA-Z0-9_?=&-]*)/gm,
"/watch?v=$1",
);
});
},
subscribeHandler() { subscribeHandler() {
this.toggleSubscriptionState(this.channelId, this.subscribed).then(success => { this.toggleSubscriptionState(this.channelId, this.subscribed).then(success => {
if (success) this.subscribed = !this.subscribed; if (success) this.subscribed = !this.subscribed;
@ -616,7 +596,6 @@ export default {
}).then(json => { }).then(json => {
this.comments.nextpage = json.nextpage; this.comments.nextpage = json.nextpage;
this.loading = false; this.loading = false;
this.rewriteComments(json.comments);
this.comments.comments = this.comments.comments.concat(json.comments); this.comments.comments = this.comments.comments.concat(json.comments);
}); });
} }