Autoclose HTML tags

This commit is contained in:
Tomasz Rymkiewicz 2021-12-27 23:33:55 +01:00 committed by FireMasterK
parent d750eabc37
commit 53197b5e2d
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
10 changed files with 36 additions and 42 deletions

View file

@ -9,10 +9,10 @@
<footer class="text-center"> <footer class="text-center">
<a aria-label="GitHub" href="https://github.com/TeamPiped/Piped"> <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped">
<font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon> <font-awesome-icon :icon="['fab', 'github']" />
</a> </a>
<a class="ml-2" href="https://github.com/TeamPiped/Piped#donations"> <a class="ml-2" href="https://github.com/TeamPiped/Piped#donations">
<font-awesome-icon :icon="['fab', 'bitcoin']"></font-awesome-icon> <font-awesome-icon :icon="['fab', 'bitcoin']" />
<span v-text="$t('actions.donations')" /> <span v-text="$t('actions.donations')" />
</a> </a>
</footer> </footer>

View file

@ -8,7 +8,9 @@
</div> </div>
<img v-if="channel.bannerUrl" :src="channel.bannerUrl" class="w-full pb-1.5" loading="lazy" /> <img v-if="channel.bannerUrl" :src="channel.bannerUrl" class="w-full pb-1.5" loading="lazy" />
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<p style="white-space: pre-wrap"><span v-html="purifyHTML(urlify(channel.description))"></span></p> <p style="white-space: pre-wrap">
<span v-html="purifyHTML(urlify(channel.description))" />
</p>
<button <button
v-if="authenticated" v-if="authenticated"

View file

@ -12,25 +12,22 @@
<div class="comment-content pl-2"> <div class="comment-content pl-2">
<div class="comment-header"> <div class="comment-header">
<div v-if="comment.pinned" class="comment-pinned uk-text-meta"> <div v-if="comment.pinned" class="comment-pinned uk-text-meta">
<font-awesome-icon icon="thumbtack"></font-awesome-icon <font-awesome-icon icon="thumbtack" />
><span class="ml-1.5" v-text="$t('comment.pinned_by')" /> <span class="ml-1.5" v-text="$t('comment.pinned_by')" />
<span v-text="uploader" /> <span v-text="uploader" />
</div> </div>
<div class="comment-author"> <div class="comment-author">
<router-link <router-link class="font-bold uk-text-small" :to="comment.commentorUrl" v-text="comment.author" />
class="font-bold uk-text-small" <font-awesome-icon class="ml-1.5" v-if="comment.verified" icon="check" />
:to="comment.commentorUrl"
v-text="comment.author"
/><font-awesome-icon class="ml-1.5" v-if="comment.verified" icon="check"></font-awesome-icon>
</div> </div>
<div class="comment-meta uk-text-meta uk-margin-small-bottom" v-text="comment.commentedTime" /> <div class="comment-meta uk-text-meta uk-margin-small-bottom" v-text="comment.commentedTime" />
</div> </div>
<div class="whitespace-pre-wrap" v-text="comment.commentText" /> <div class="whitespace-pre-wrap" v-text="comment.commentText" />
<div class="comment-footer uk-margin-small-top uk-text-meta"> <div class="comment-footer uk-margin-small-top uk-text-meta">
<font-awesome-icon icon="thumbs-up"></font-awesome-icon> <font-awesome-icon icon="thumbs-up" />
<span class="ml-1" v-text="numberFormat(comment.likeCount)" /> <span class="ml-1" v-text="numberFormat(comment.likeCount)" />
<font-awesome-icon class="ml-1" v-if="comment.hearted" icon="heart"></font-awesome-icon> <font-awesome-icon class="ml-1" v-if="comment.hearted" icon="heart" />
</div> </div>
<template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)"> <template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
<div @click="loadReplies"> <div @click="loadReplies">

View file

@ -6,7 +6,9 @@
</button> </button>
<span> <span>
<a :href="getRssUrl"><font-awesome-icon icon="rss" style="padding-top: 0.2rem"></font-awesome-icon></a> <a :href="getRssUrl">
<font-awesome-icon icon="rss" style="padding-top: 0.2rem" />
</a>
</span> </span>
<span class="md:float-right"> <span class="md:float-right">

View file

@ -2,7 +2,7 @@
<h1 class="font-bold text-center" v-text="$t('titles.history')" /> <h1 class="font-bold text-center" v-text="$t('titles.history')" />
<div style="text-align: left"> <div style="text-align: left">
<button class="btn" v-t="'actions.clear_history'" @click="clearHistory"></button> <button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
</div> </div>
<div style="text-align: right"> <div style="text-align: right">

View file

@ -6,13 +6,7 @@
style="width: 100%; height: 100%; background: #000" style="width: 100%; height: 100%; background: #000"
:style="!isEmbed ? { 'max-height': '75vh', 'min-height': '250px' } : {}" :style="!isEmbed ? { 'max-height': '75vh', 'min-height': '250px' } : {}"
> >
<video <video ref="videoEl" data-shaka-player class="w-full" :autoplay="shouldAutoPlay" :loop="selectedAutoLoop" />
ref="videoEl"
data-shaka-player
class="w-full"
:autoplay="shouldAutoPlay"
:loop="selectedAutoLoop"
></video>
</div> </div>
</div> </div>
</template> </template>

View file

@ -17,7 +17,9 @@
<div class="right-2vw absolute"> <div class="right-2vw absolute">
<strong v-text="`${playlist.videos} ${$t('video.videos')}`" /> <strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
<br /> <br />
<a :href="getRssUrl"><font-awesome-icon icon="rss"></font-awesome-icon></a> <a :href="getRssUrl">
<font-awesome-icon icon="rss" />
</a>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,7 +1,9 @@
<template> <template>
<h1 class="text-center" v-text="$route.query.search_query" /> <h1 class="text-center" v-text="$route.query.search_query" />
<label for="ddlSearchFilters"><strong v-text="`${$t('actions.filter')}:`" /></label> <label for="ddlSearchFilters">
<strong v-text="`${$t('actions.filter')}:`" />
</label>
<select <select
id="ddlSearchFilters" id="ddlSearchFilters"
v-model="selectedFilter" v-model="selectedFilter"
@ -34,21 +36,15 @@
<img style="width: 100%" :src="result.thumbnail" loading="lazy" /> <img style="width: 100%" :src="result.thumbnail" loading="lazy" />
</div> </div>
<p> <p>
<span v-text="result.name" /><font-awesome-icon <span v-text="result.name" />
class="ml-1.5" <font-awesome-icon class="ml-1.5" v-if="result.verified" icon="check" />
v-if="result.verified"
icon="check"
></font-awesome-icon>
</p> </p>
</router-link> </router-link>
<p v-if="result.description" v-text="result.description" /> <p v-if="result.description" v-text="result.description" />
<router-link v-if="result.uploaderUrl" class="uk-link-muted" :to="result.uploaderUrl"> <router-link v-if="result.uploaderUrl" class="uk-link-muted" :to="result.uploaderUrl">
<p> <p>
<span v-text="result.uploader" /><font-awesome-icon <span v-text="result.uploader" />
class="ml-1.5" <font-awesome-icon class="ml-1.5" v-if="result.uploaderVerified" icon="check" />
v-if="result.uploaderVerified"
icon="check"
></font-awesome-icon>
</p> </p>
</router-link> </router-link>

View file

@ -33,7 +33,7 @@
:aria-label="'Listen to ' + video.title" :aria-label="'Listen to ' + video.title"
:title="'Listen to ' + video.title" :title="'Listen to ' + video.title"
> >
<font-awesome-icon icon="headphones"></font-awesome-icon> <font-awesome-icon icon="headphones" />
</router-link> </router-link>
</div> </div>
@ -58,12 +58,12 @@
:title="video.uploaderName" :title="video.uploaderName"
> >
<span v-text="video.uploaderName" /> <span v-text="video.uploaderName" />
<font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check"></font-awesome-icon> <font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check" />
</router-link> </router-link>
<strong v-if="video.views >= 0 || video.uploadedDate" class="uk-text-small"> <strong v-if="video.views >= 0 || video.uploadedDate" class="uk-text-small">
<span v-if="video.views >= 0"> <span v-if="video.views >= 0">
<font-awesome-icon icon="eye"></font-awesome-icon> <font-awesome-icon icon="eye" />
<span v-text="`${numberFormat(video.views)} •`" /> <span v-text="`${numberFormat(video.views)} •`" />
</span> </span>
<span v-if="video.uploadedDate" v-text="video.uploadedDate" /> <span v-if="video.uploadedDate" v-text="video.uploadedDate" />

View file

@ -30,11 +30,11 @@
<div class="flex items-center relative ml-auto children:ml-2"> <div class="flex items-center relative ml-auto children:ml-2">
<template v-if="video.likes >= 0"> <template v-if="video.likes >= 0">
<div> <div>
<font-awesome-icon icon="thumbs-up"></font-awesome-icon> <font-awesome-icon icon="thumbs-up" />
<strong class="ml-2" v-text="addCommas(video.likes)" /> <strong class="ml-2" v-text="addCommas(video.likes)" />
</div> </div>
<div> <div>
<font-awesome-icon icon="thumbs-down"></font-awesome-icon> <font-awesome-icon icon="thumbs-down" />
<strong class="ml-2" v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'" /> <strong class="ml-2" v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'" />
</div> </div>
</template> </template>
@ -45,7 +45,7 @@
</template> </template>
<a :href="`https://youtu.be/${getVideoId()}`" class="btn"> <a :href="`https://youtu.be/${getVideoId()}`" class="btn">
<strong v-text="$t('player.watch_on')" /> <strong v-text="$t('player.watch_on')" />
<font-awesome-icon class="ml-1.5" :icon="['fab', 'youtube']"></font-awesome-icon> <font-awesome-icon class="ml-1.5" :icon="['fab', 'youtube']" />
</a> </a>
<a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn"> <a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn">
<strong v-text="`${$t('player.watch_on')} LBRY`" /> <strong v-text="`${$t('player.watch_on')} LBRY`" />
@ -56,7 +56,7 @@
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title" :title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
class="btn" class="btn"
> >
<font-awesome-icon :icon="isListening ? 'tv' : 'headphones'"></font-awesome-icon> <font-awesome-icon :icon="isListening ? 'tv' : 'headphones'" />
</router-link> </router-link>
</div> </div>
</div> </div>
@ -69,7 +69,8 @@
class="link ml-1.5" class="link ml-1.5"
:to="video.uploaderUrl" :to="video.uploaderUrl"
v-text="video.uploader" v-text="video.uploader"
/><font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check"></font-awesome-icon> />
<font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check" />
</div> </div>
<button <button
v-if="authenticated" v-if="authenticated"
@ -87,7 +88,7 @@
v-text="$t(`actions.${showDesc ? 'minimize_description' : 'show_description'}`)" v-text="$t(`actions.${showDesc ? 'minimize_description' : 'show_description'}`)"
/> />
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<p v-show="showDesc" class="break-words" v-html="purifyHTML(video.description)"></p> <p v-show="showDesc" class="break-words" v-html="purifyHTML(video.description)" />
<div <div
v-if="showDesc && sponsors && sponsors.segments" v-if="showDesc && sponsors && sponsors.segments"
v-text="`${$t('video.sponsor_segments')}: ${sponsors.segments.length}`" v-text="`${$t('video.sponsor_segments')}: ${sponsors.segments.length}`"