kavin/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-12-14 22:30:28 +05:30
Code Issues Projects Releases Wiki Activity

Favour v-text over mustache syntax

Browse Source
This commit is contained in:
Tomasz Rymkiewicz 2021-12-27 17:29:25 +01:00 committed by FireMasterK
parent c4ea68f9d8
commit d750eabc37
No known key found for this signature in database
GPG Key ID: 49451E4482CC5BCD
18 changed files with 136 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -13,7 +13,7 @@
</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']"></font-awesome-icon>
{{ $t("actions.donations") }} <span v-text="$t('actions.donations')" />
</a> </a>
</footer> </footer>
</div> </div>

11
src/components/Channel.vue
View File

@ -4,15 +4,18 @@
<div v-if="channel" v-show="!channel.error"> <div v-if="channel" v-show="!channel.error">
<div class="flex justify-center place-items-center"> <div class="flex justify-center place-items-center">
<img height="48" width="48" class="rounded-full m-1" :src="channel.avatarUrl" /> <img height="48" width="48" class="rounded-full m-1" :src="channel.avatarUrl" />
<h1>{{ channel.name }}</h1> <h1 v-text="channel.name" />
</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))"></span></p>
<button v-if="authenticated" class="btn" @click="subscribeHandler"> <button
{{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }} v-if="authenticated"
</button> class="btn"
@click="subscribeHandler"
v-text="$t(`actions.${subscribed ? 'unsubscribe' : 'subscribe'}`)"
/>
<hr /> <hr />

22
src/components/Comment.vue
View File

@ -13,25 +13,23 @@
<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"></font-awesome-icon
><span class="ml-1.5">{{ $t("comment.pinned_by") }}</span> ><span class="ml-1.5" v-text="$t('comment.pinned_by')" />
{{ uploader }} <span v-text="uploader" />
</div> </div>
<div class="comment-author"> <div class="comment-author">
<router-link class="font-bold uk-text-small" :to="comment.commentorUrl"> <router-link
{{ comment.author }} </router-link class="font-bold uk-text-small"
><font-awesome-icon class="ml-1.5" v-if="comment.verified" icon="check"></font-awesome-icon> :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"> <div class="comment-meta uk-text-meta uk-margin-small-bottom" v-text="comment.commentedTime" />
{{ comment.commentedTime }}
</div>
</div>
<div class="whitespace-pre-wrap">
{{ comment.commentText }}
</div> </div>
<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"></font-awesome-icon>
<span class="ml-1">{{ numberFormat(comment.likeCount) }}</span> <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"></font-awesome-icon>
</div> </div>
<template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)"> <template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">

9
src/components/ErrorHandler.vue
View File

@ -1,9 +1,8 @@
<template> <template>
<p>{{ message }}</p> <p v-text="message" />
<button @click="toggleTrace" class="btn"> >
{{ $t("actions.show_more") }} <button @click="toggleTrace" class="btn" v-text="$t('actions.show_more')" />
</button> <p ref="stacktrace" style="white-space: pre-wrap" hidden v-text="error" />
<p ref="stacktrace" style="white-space: pre-wrap" hidden>{{ error }}</p>
</template> </template>
<script> <script>

2
src/components/FeedPage.vue
View File

@ -10,7 +10,7 @@
</span> </span>
<span class="md:float-right"> <span class="md:float-right">
<label for="ddlSortBy">{{ $t("actions.sort_by") }}</label> <label for="ddlSortBy" v-text="$t('actions.sort_by')" />
<select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()"> <select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()">
<option v-t="'actions.most_recent'" value="descending" /> <option v-t="'actions.most_recent'" value="descending" />
<option v-t="'actions.least_recent'" value="ascending" /> <option v-t="'actions.least_recent'" value="ascending" />

4
src/components/HistoryPage.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<h1 class="font-bold text-center">{{ $t("titles.history") }}</h1> <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"></button>
</div> </div>
<div style="text-align: right"> <div style="text-align: right">
<label for="ddlSortBy">{{ $t("actions.sort_by") }}</label> <label for="ddlSortBy" v-text="$t('actions.sort_by')" />
<select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()"> <select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()">
<option v-t="'actions.most_recent'" value="descending" /> <option v-t="'actions.most_recent'" value="descending" />
<option v-t="'actions.least_recent'" value="ascending" /> <option v-t="'actions.least_recent'" value="ascending" />

2
src/components/ImportPage.vue
View File

@ -5,7 +5,7 @@
<input ref="fileSelector" type="file" @change="fileChange" /> <input ref="fileSelector" type="file" @change="fileChange" />
</div> </div>
<div class="uk-form-row"> <div class="uk-form-row">
<strong>Selected Subscriptions: {{ selectedSubscriptions }}</strong> <strong v-text="`Selected Subscriptions: ${selectedSubscriptions}`" />
</div> </div>
<div class="uk-form-row"> <div class="uk-form-row">
<strong>Override: <input v-model="override" class="uk-checkbox" type="checkbox" /></strong> <strong>Override: <input v-model="override" class="uk-checkbox" type="checkbox" /></strong>

4
src/components/LoginPage.vue
View File

@ -22,9 +22,7 @@
/> />
</div> </div>
<div class="uk-form-row"> <div class="uk-form-row">
<a class="uk-width-1-1 uk-button uk-button-large w-auto" @click="login"> <a class="uk-width-1-1 uk-button uk-button-large w-auto" @click="login" v-text="$t('titles.login')" />
{{ $t("titles.login") }}
</a>
</div> </div>
</form> </form>
</div> </div>

16
src/components/Playlist.vue
View File

@ -2,22 +2,20 @@
<ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" /> <ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
<div v-if="playlist" v-show="!playlist.error"> <div v-if="playlist" v-show="!playlist.error">
<h1 class="text-center"> <h1 class="text-center" v-text="playlist.name" />
{{ playlist.name }}
</h1>
<div class="grid grid-cols-2"> <div class="grid grid-cols-2">
<div> <div>
<strong <strong>
><router-link class="uk-text-justify" :to="playlist.uploaderUrl || '/'"> <router-link class="uk-text-justify" :to="playlist.uploaderUrl || '/'">
<img :src="playlist.uploaderAvatar" loading="lazy" class="rounded-full" /> <img :src="playlist.uploaderAvatar" loading="lazy" class="rounded-full" />
{{ playlist.uploader }}</router-link <span v-text="playlist.uploader" />
></strong </router-link>
> </strong>
</div> </div>
<div> <div>
<div class="right-2vw absolute"> <div class="right-2vw absolute">
<strong>{{ playlist.videos }} {{ $t("video.videos") }}</strong> <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"></font-awesome-icon></a>
</div> </div>

34
src/components/Preferences.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="uk-flex uk-flex-between uk-flex-middle"> <div class="uk-flex uk-flex-between uk-flex-middle">
<button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')"> <button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')">
<font-awesome-icon icon="chevron-left" /><span class="ml-1.5">{{ $t("actions.back") }}</span> <font-awesome-icon icon="chevron-left" /><span class="ml-1.5" v-text="$t('actions.back')" />
</button> </button>
<span><h1 v-t="'titles.preferences'" class="font-bold text-center" /></span> <span><h1 v-t="'titles.preferences'" class="font-bold text-center" /></span>
<span /> <span />
</div> </div>
<hr /> <hr />
<h2>SponsorBlock</h2> <h2>SponsorBlock</h2>
<p>{{ $t("actions.uses_api_from") }}<a href="https://sponsor.ajay.app/">sponsor.ajay.app</a></p> <p><span v-text="$t('actions.uses_api_from')" /><a href="https://sponsor.ajay.app/">sponsor.ajay.app</a></p>
<label for="chkEnableSponsorblock"><strong v-t="'actions.enable_sponsorblock'" /></label> <label for="chkEnableSponsorblock"><strong v-t="'actions.enable_sponsorblock'" /></label>
<br /> <br />
<input <input
@ -91,7 +91,7 @@
<br /> <br />
<select id="ddlDefaultQuality" v-model="defaultQuality" class="select w-auto" @change="onChange($event)"> <select id="ddlDefaultQuality" v-model="defaultQuality" class="select w-auto" @change="onChange($event)">
<option v-t="'actions.auto'" value="0" /> <option v-t="'actions.auto'" value="0" />
<option v-for="resolution in resolutions" :key="resolution" :value="resolution">{{ resolution }}p</option> <option v-for="resolution in resolutions" :key="resolution" :value="resolution" v-text="`${resolution}p`" />
</select> </select>
<br /> <br />
<label for="txtBufferingGoal"><strong v-t="'actions.buffering_goal'" /></label> <label for="txtBufferingGoal"><strong v-t="'actions.buffering_goal'" /></label>
@ -101,7 +101,7 @@
<label for="ddlCountrySelection"><strong v-t="'actions.country_selection'" /></label> <label for="ddlCountrySelection"><strong v-t="'actions.country_selection'" /></label>
<br /> <br />
<select id="ddlCountrySelection" v-model="countrySelected" class="select w-auto" @change="onChange($event)"> <select id="ddlCountrySelection" v-model="countrySelected" class="select w-auto" @change="onChange($event)">
<option v-for="country in countryMap" :key="country.code" :value="country.code">{{ country.name }}</option> <option v-for="country in countryMap" :key="country.code" :value="country.code" v-text="country.name" />
</select> </select>
<br /> <br />
<label for="ddlDefaultHomepage"><strong v-t="'actions.default_homepage'" /></label> <label for="ddlDefaultHomepage"><strong v-t="'actions.default_homepage'" /></label>
@ -138,7 +138,7 @@
<label for="ddlLanguageSelection"><strong v-t="'actions.language_selection'" /></label> <label for="ddlLanguageSelection"><strong v-t="'actions.language_selection'" /></label>
<br /> <br />
<select id="ddlLanguageSelection" v-model="selectedLanguage" class="select w-auto" @change="onChange($event)"> <select id="ddlLanguageSelection" v-model="selectedLanguage" class="select w-auto" @change="onChange($event)">
<option v-for="language in languages" :key="language.code" :value="language.code">{{ language.name }}</option> <option v-for="language in languages" :key="language.code" :value="language.code" v-text="language.name" />
</select> </select>
<br /> <br />
<label for="ddlEnabledCodecs"><strong v-t="'actions.enabled_codecs'" /></label> <label for="ddlEnabledCodecs"><strong v-t="'actions.enabled_codecs'" /></label>
@ -160,19 +160,19 @@
<table class="uk-table"> <table class="uk-table">
<thead> <thead>
<tr> <tr>
<th>{{ $t("preferences.instance_name") }}</th> <th v-text="$t('preferences.instance_name')" />
<th>{{ $t("preferences.instance_locations") }}</th> <th v-text="$t('preferences.instance_locations')" />
<th>{{ $t("preferences.has_cdn") }}</th> <th v-text="$t('preferences.has_cdn')" />
<th>{{ $t("preferences.ssl_score") }}</th> <th v-text="$t('preferences.ssl_score')" />
</tr> </tr>
</thead> </thead>
<tbody v-for="instance in instances" :key="instance.name"> <tbody v-for="instance in instances" :key="instance.name">
<tr> <tr>
<td>{{ instance.name }}</td> <td v-text="instance.name" />
<td>{{ instance.locations }}</td> <td v-text="instance.locations" />
<td>{{ instance.cdn == "Yes" ? $t("actions.yes") : $t("actions.no") }}</td> <td v-text="$t(`actions.${instance.cdn === 'Yes' ? 'yes' : 'no'}`)" />
<td> <td>
<a :href="sslScore(instance.apiurl)" target="_blank"> {{ $t("actions.view_ssl_score") }}</a> <a :href="sslScore(instance.apiurl)" target="_blank" v-text="$t('actions.view_ssl_score')" />
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -180,14 +180,10 @@
<hr /> <hr />
<label for="ddlInstanceSelection" <label for="ddlInstanceSelection"><strong v-text="`${$t('actions.instance_selection')}:`" /></label>
><strong>{{ $t("actions.instance_selection") }}:</strong></label
>
<br /> <br />
<select id="ddlInstanceSelection" v-model="selectedInstance" class="select w-auto" @change="onChange($event)"> <select id="ddlInstanceSelection" v-model="selectedInstance" class="select w-auto" @change="onChange($event)">
<option v-for="instance in instances" :key="instance.name" :value="instance.apiurl"> <option v-for="instance in instances" :key="instance.name" :value="instance.apiurl" v-text="instance.name" />
{{ instance.name }}
</option>
</select> </select>
</template> </template>

2
src/components/RegisterPage.vue
View File

@ -22,7 +22,7 @@
/> />
</div> </div>
<div class="uk-form-row"> <div class="uk-form-row">
<a class="uk-width-1-1 btn w-auto" @click="register"> {{ $t("titles.register") }}</a> <a class="uk-width-1-1 btn w-auto" @click="register" v-text="$t('titles.register')" />
</div> </div>
</form> </form>
</div> </div>

39
src/components/SearchResults.vue
View File

@ -1,11 +1,7 @@
<template> <template>
<h1 class="text-center"> <h1 class="text-center" v-text="$route.query.search_query" />
{{ $route.query.search_query }}
</h1>
<label for="ddlSearchFilters" <label for="ddlSearchFilters"><strong v-text="`${$t('actions.filter')}:`" /></label>
><strong>{{ $t("actions.filter") }}: </strong></label
>
<select <select
id="ddlSearchFilters" id="ddlSearchFilters"
v-model="selectedFilter" v-model="selectedFilter"
@ -14,19 +10,18 @@
style="height: 100%" style="height: 100%"
@change="updateResults()" @change="updateResults()"
> >
<option v-for="filter in availableFilters" :key="filter" :value="filter"> <option v-for="filter in availableFilters" :key="filter" :value="filter" v-text="filter.replace('_', ' ')" />
{{ filter.replace("_", " ") }}
</option>
</select> </select>
<hr /> <hr />
<div v-if="results && results.corrected" style="height: 7vh"> <div v-if="results && results.corrected" style="height: 7vh">
{{ $t("search.did_you_mean") }} <span v-text="$t('search.did_you_mean')" />
<em> <em>
<router-link :to="{ name: 'SearchResults', query: { search_query: results.suggestion } }"> <router-link
{{ results.suggestion }} :to="{ name: 'SearchResults', query: { search_query: results.suggestion } }"
</router-link> v-text="results.suggestion"
/>
</em> </em>
</div> </div>
@ -39,15 +34,17 @@
<img style="width: 100%" :src="result.thumbnail" loading="lazy" /> <img style="width: 100%" :src="result.thumbnail" loading="lazy" />
</div> </div>
<p> <p>
{{ result.name <span v-text="result.name" /><font-awesome-icon
}}<font-awesome-icon class="ml-1.5" v-if="result.verified" icon="check"></font-awesome-icon> class="ml-1.5"
v-if="result.verified"
icon="check"
></font-awesome-icon>
</p> </p>
</router-link> </router-link>
<p v-if="result.description">{{ result.description }}</p> <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>
{{ result.uploader <span v-text="result.uploader" /><font-awesome-icon
}}<font-awesome-icon
class="ml-1.5" class="ml-1.5"
v-if="result.uploaderVerified" v-if="result.uploaderVerified"
icon="check" icon="check"
@ -55,10 +52,10 @@
</p> </p>
</router-link> </router-link>
<a v-if="result.uploaderName" class="uk-text-muted">{{ result.uploaderName }}</a> <a v-if="result.uploaderName" class="uk-text-muted" v-text="result.uploaderName" />
<strong v-if="result.videos >= 0" <strong v-if="result.videos >= 0"
><br v-if="result.uploaderName" />{{ result.videos }} {{ $t("video.videos") }}</strong ><br v-if="result.uploaderName" /><span v-text="`${result.videos} ${$t('video.videos')}`"
> /></strong>
<br /> <br />
</div> </div>

5
src/components/SearchSuggestions.vue
View File

@ -8,9 +8,8 @@
:class="{ 'suggestion-selected': selected === i }" :class="{ 'suggestion-selected': selected === i }"
@mouseover="onMouseOver(i)" @mouseover="onMouseOver(i)"
@mousedown.stop="onClick(i)" @mousedown.stop="onClick(i)"
> v-text="suggestion"
{{ suggestion }} />
</li>
</ul> </ul>
</div> </div>
</template> </template>

20
src/components/SubscriptionsPage.vue
View File

@ -1,16 +1,12 @@
<template> <template>
<h1 class="font-bold text-center">{{ $t("titles.subscriptions") }}</h1> <h1 class="font-bold text-center" v-text="$t('titles.subscriptions')" />
<div v-if="authenticated"> <div v-if="authenticated">
<button class="btn mr-0.5"> <button class="btn mr-0.5">
<router-link to="/import"> <router-link to="/import" v-text="$t('actions.import_from_json')" />
{{ $t("actions.import_from_json") }}
</router-link>
</button> </button>
<button class="btn" @click="exportHandler"> <button class="btn" @click="exportHandler" v-text="$t('actions.export_to_json')" />
{{ $t("actions.export_to_json") }}
</button>
</div> </div>
<hr /> <hr />
@ -20,11 +16,13 @@
<div class="w-full grid grid-cols-3"> <div class="w-full grid grid-cols-3">
<router-link :to="subscription.url" class="col-start-2 block flex text-center font-bold text-4xl"> <router-link :to="subscription.url" class="col-start-2 block flex text-center font-bold text-4xl">
<img :src="subscription.avatar" class="rounded-full" width="48" height="48" /> <img :src="subscription.avatar" class="rounded-full" width="48" height="48" />
<span>{{ subscription.name }}</span> <span v-text="subscription.name" />>
</router-link> </router-link>
<button class="btn !w-min" @click="handleButton(subscription)"> <button
{{ subscription.subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }} class="btn !w-min"
</button> @click="handleButton(subscription)"
v-text="$t(`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`)"
/>
</div> </div>
</div> </div>
</div> </div>

2
src/components/TrendingPage.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<h1 v-t="'titles.trending'" class="font-bold text-center" /> <h1 v-t="$t('titles.trending')" class="font-bold text-center" />
<hr /> <hr />

37
src/components/VideoItem.vue
View File

@ -3,12 +3,18 @@
<router-link :to="video.url"> <router-link :to="video.url">
<img :height="height" :width="width" class="w-full" :src="video.thumbnail" alt="" loading="lazy" /> <img :height="height" :width="width" class="w-full" :src="video.thumbnail" alt="" loading="lazy" />
<div class="relative text-sm"> <div class="relative text-sm">
<span v-if="video.duration" class="thumbnail-overlay bottom-5px right-5px" style="padding: 0 5px">{{ <span
timeFormat(video.duration) v-if="video.duration"
}}</span> class="thumbnail-overlay bottom-5px right-5px"
<span v-if="video.watched" class="thumbnail-overlay bottom-5px left-5px" style="padding: 0 5px">{{ style="padding: 0 5px"
$t("video.watched") v-text="timeFormat(video.duration)"
}}</span> />
<span
v-if="video.watched"
class="thumbnail-overlay bottom-5px left-5px"
style="padding: 0 5px"
v-text="$t('video.watched')"
/>
</div> </div>
<div> <div>
@ -16,9 +22,8 @@
style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
class="my-2 overflow-hidden flex link" class="my-2 overflow-hidden flex link"
:title="video.title" :title="video.title"
> v-text="video.title"
{{ video.title }} />
</p>
</div> </div>
</router-link> </router-link>
@ -52,21 +57,17 @@
:to="video.uploaderUrl" :to="video.uploaderUrl"
:title="video.uploaderName" :title="video.uploaderName"
> >
{{ 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"></font-awesome-icon>
</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"></font-awesome-icon>
{{ numberFormat(video.views) }} • <span v-text="`${numberFormat(video.views)} •`" />
</span>
<span v-if="video.uploadedDate">
{{ video.uploadedDate }}
</span>
<span v-if="video.uploaded">
{{ timeAgo(video.uploaded) }}
</span> </span>
<span v-if="video.uploadedDate" v-text="video.uploadedDate" />
<span v-if="video.uploaded" v-text="timeAgo(video.uploaded)" />
</strong> </strong>
</div> </div>
</div> </div>

2
src/components/VideoRedirect.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div>{{ $t("actions.loading") }}</div> <div v-text="$t('actions.loading')" />
</template> </template>
<script> <script>

67
src/components/WatchVideo.vue
View File

@ -21,23 +21,21 @@
:selected-auto-play="selectedAutoPlay" :selected-auto-play="selectedAutoPlay"
:selected-auto-loop="selectedAutoLoop" :selected-auto-loop="selectedAutoLoop"
/> />
<div class="font-bold mt-2 text-2xl break-words"> <div class="font-bold mt-2 text-2xl break-words" v-text="video.title" />
{{ video.title }}
</div>
<div class="flex mb-1.5"> <div class="flex mb-1.5">
<span>{{ addCommas(video.views) }} views</span> <span v-text="`${addCommas(video.views)} views`" />
<span class="ml-2">{{ uploadDate }}</span> <span class="ml-2" v-text="uploadDate" />
<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"></font-awesome-icon>
<strong class="ml-2">{{ addCommas(video.likes) }}</strong> <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"></font-awesome-icon>
<strong class="ml-2">{{ video.dislikes >= 0 ? addCommas(video.dislikes) : "?" }}</strong> <strong class="ml-2" v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'" />
</div> </div>
</template> </template>
<template v-if="video.likes < 0"> <template v-if="video.likes < 0">
@ -45,12 +43,12 @@
<strong v-t="'video.ratings_disabled'" /> <strong v-t="'video.ratings_disabled'" />
</div> </div>
</template> </template>
<a :href="'https://youtu.be/' + getVideoId()" class="btn"> <a :href="`https://youtu.be/${getVideoId()}`" class="btn">
<strong>{{ $t("player.watch_on") }}</strong> <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']"></font-awesome-icon>
</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>{{ $t("player.watch_on") }} LBRY</strong> <strong v-text="`${$t('player.watch_on')} LBRY`" />
</a> </a>
<router-link <router-link
:to="toggleListenUrl" :to="toggleListenUrl"
@ -66,37 +64,42 @@
<div class="flex"> <div class="flex">
<div class="flex items-center"> <div class="flex items-center">
<img :src="video.uploaderAvatar" alt="" loading="lazy" class="rounded-full" /> <img :src="video.uploaderAvatar" alt="" loading="lazy" class="rounded-full" />
<router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl"> <router-link
{{ video.uploader }} </router-link v-if="video.uploaderUrl"
><font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check"></font-awesome-icon> class="link ml-1.5"
:to="video.uploaderUrl"
v-text="video.uploader"
/><font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
</div> </div>
<button v-if="authenticated" class="btn relative ml-auto" @click="subscribeHandler"> <button
{{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }} v-if="authenticated"
</button> class="btn relative ml-auto"
@click="subscribeHandler"
v-text="$t(`actions.${subscribed ? 'unsubscribe' : 'subscribe'}`)"
/>
</div> </div>
<hr /> <hr />
<button class="btn mb-2" @click="showDesc = !showDesc"> <button
{{ showDesc ? $t("actions.minimize_description") : $t("actions.show_description") }} class="btn mb-2"
</button> @click="showDesc = !showDesc"
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)"></p>
<div v-if="showDesc && sponsors && sponsors.segments"> <div
{{ $t("video.sponsor_segments") }}: {{ sponsors.segments.length }} v-if="showDesc && sponsors && sponsors.segments"
</div> v-text="`${$t('video.sponsor_segments')}: ${sponsors.segments.length}`"
/>
</div> </div>
<hr /> <hr />
<label for="chkAutoLoop" <label for="chkAutoLoop"><strong v-text="`${$t('actions.loop_this_video')}:`" /></label>
><strong>{{ $t("actions.loop_this_video") }}:</strong></label
>
<input id="chkAutoLoop" v-model="selectedAutoLoop" class="ml-1.5" type="checkbox" @change="onChange($event)" /> <input id="chkAutoLoop" v-model="selectedAutoLoop" class="ml-1.5" type="checkbox" @change="onChange($event)" />
<br /> <br />
<label for="chkAutoPlay" <label for="chkAutoPlay"><strong v-text="`${$t('actions.auto_play_next_video')}:`" /></label>
><strong>{{ $t("actions.auto_play_next_video") }}:</strong></label
>
<input id="chkAutoPlay" v-model="selectedAutoPlay" class="ml-1.5" type="checkbox" @change="onChange($event)" /> <input id="chkAutoPlay" v-model="selectedAutoPlay" class="ml-1.5" type="checkbox" @change="onChange($event)" />
<hr /> <hr />
@ -113,9 +116,11 @@
</div> </div>
<div v-if="video" class="order-first sm:order-last"> <div v-if="video" class="order-first sm:order-last">
<a class="btn mb-2 sm:hidden" @click="showRecs = !showRecs"> <a
{{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }} class="btn mb-2 sm:hidden"
</a> @click="showRecs = !showRecs"
v-text="$t(`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`)"
/>
<VideoItem <VideoItem
v-for="related in video.relatedStreams" v-for="related in video.relatedStreams"
class="w-auto" class="w-auto"