Favour v-text over mustache syntax
This commit is contained in:
Tomasz Rymkiewicz
FireMasterK
parent
c4ea68f9d8
commit
d750eabc37
|
|
@ -13,7 +13,7 @@
|
|||
</a>
|
||||
<a class="ml-2" href="https://github.com/TeamPiped/Piped#donations">
|
||||
<font-awesome-icon :icon="['fab', 'bitcoin']"></font-awesome-icon>
|
||||
{{ $t("actions.donations") }}
|
||||
<span v-text="$t('actions.donations')" />
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,15 +4,18 @@
|
|||
<div v-if="channel" v-show="!channel.error">
|
||||
<div class="flex justify-center place-items-center">
|
||||
<img height="48" width="48" class="rounded-full m-1" :src="channel.avatarUrl" />
|
||||
<h1>{{ channel.name }}</h1>
|
||||
<h1 v-text="channel.name" />
|
||||
</div>
|
||||
<img v-if="channel.bannerUrl" :src="channel.bannerUrl" class="w-full pb-1.5" loading="lazy" />
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<p style="white-space: pre-wrap"><span v-html="purifyHTML(urlify(channel.description))"></span></p>
|
||||
|
||||
<button v-if="authenticated" class="btn" @click="subscribeHandler">
|
||||
{{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
|
||||
</button>
|
||||
<button
|
||||
v-if="authenticated"
|
||||
class="btn"
|
||||
@click="subscribeHandler"
|
||||
v-text="$t(`actions.${subscribed ? 'unsubscribe' : 'subscribe'}`)"
|
||||
/>
|
||||
|
||||
<hr />
|
||||
|
||||
|
|
|
|||
|
|
@ -13,25 +13,23 @@
|
|||
<div class="comment-header">
|
||||
<div v-if="comment.pinned" class="comment-pinned uk-text-meta">
|
||||
<font-awesome-icon icon="thumbtack"></font-awesome-icon
|
||||
><span class="ml-1.5">{{ $t("comment.pinned_by") }}</span>
|
||||
{{ uploader }}
|
||||
><span class="ml-1.5" v-text="$t('comment.pinned_by')" />
|
||||
<span v-text="uploader" />
|
||||
</div>
|
||||
|
||||
<div class="comment-author">
|
||||
<router-link class="font-bold uk-text-small" :to="comment.commentorUrl">
|
||||
{{ comment.author }} </router-link
|
||||
><font-awesome-icon class="ml-1.5" v-if="comment.verified" icon="check"></font-awesome-icon>
|
||||
</div>
|
||||
<div class="comment-meta uk-text-meta uk-margin-small-bottom">
|
||||
{{ comment.commentedTime }}
|
||||
<router-link
|
||||
class="font-bold uk-text-small"
|
||||
: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 class="comment-meta uk-text-meta uk-margin-small-bottom" v-text="comment.commentedTime" />
|
||||
</div>
|
||||
<div class="whitespace-pre-wrap">
|
||||
{{ comment.commentText }}
|
||||
</div>
|
||||
<div class="whitespace-pre-wrap" v-text="comment.commentText" />
|
||||
<div class="comment-footer uk-margin-small-top uk-text-meta">
|
||||
<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>
|
||||
</div>
|
||||
<template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<template>
|
||||
<p>{{ message }}</p>
|
||||
<button @click="toggleTrace" class="btn">
|
||||
{{ $t("actions.show_more") }}
|
||||
</button>
|
||||
<p ref="stacktrace" style="white-space: pre-wrap" hidden>{{ error }}</p>
|
||||
<p v-text="message" />
|
||||
>
|
||||
<button @click="toggleTrace" class="btn" v-text="$t('actions.show_more')" />
|
||||
<p ref="stacktrace" style="white-space: pre-wrap" hidden v-text="error" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</span>
|
||||
|
||||
<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()">
|
||||
<option v-t="'actions.most_recent'" value="descending" />
|
||||
<option v-t="'actions.least_recent'" value="ascending" />
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<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">
|
||||
<button class="btn" v-t="'actions.clear_history'" @click="clearHistory"></button>
|
||||
</div>
|
||||
|
||||
<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()">
|
||||
<option v-t="'actions.most_recent'" value="descending" />
|
||||
<option v-t="'actions.least_recent'" value="ascending" />
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<input ref="fileSelector" type="file" @change="fileChange" />
|
||||
</div>
|
||||
<div class="uk-form-row">
|
||||
<strong>Selected Subscriptions: {{ selectedSubscriptions }}</strong>
|
||||
<strong v-text="`Selected Subscriptions: ${selectedSubscriptions}`" />
|
||||
</div>
|
||||
<div class="uk-form-row">
|
||||
<strong>Override: <input v-model="override" class="uk-checkbox" type="checkbox" /></strong>
|
||||
|
|
|
|||
|
|
@ -22,9 +22,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="uk-form-row">
|
||||
<a class="uk-width-1-1 uk-button uk-button-large w-auto" @click="login">
|
||||
{{ $t("titles.login") }}
|
||||
</a>
|
||||
<a class="uk-width-1-1 uk-button uk-button-large w-auto" @click="login" v-text="$t('titles.login')" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,22 +2,20 @@
|
|||
<ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
|
||||
|
||||
<div v-if="playlist" v-show="!playlist.error">
|
||||
<h1 class="text-center">
|
||||
{{ playlist.name }}
|
||||
</h1>
|
||||
<h1 class="text-center" v-text="playlist.name" />
|
||||
|
||||
<div class="grid grid-cols-2">
|
||||
<div>
|
||||
<strong
|
||||
><router-link class="uk-text-justify" :to="playlist.uploaderUrl || '/'">
|
||||
<strong>
|
||||
<router-link class="uk-text-justify" :to="playlist.uploaderUrl || '/'">
|
||||
<img :src="playlist.uploaderAvatar" loading="lazy" class="rounded-full" />
|
||||
{{ playlist.uploader }}</router-link
|
||||
></strong
|
||||
>
|
||||
<span v-text="playlist.uploader" />
|
||||
</router-link>
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
<div class="right-2vw absolute">
|
||||
<strong>{{ playlist.videos }} {{ $t("video.videos") }}</strong>
|
||||
<strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
|
||||
<br />
|
||||
<a :href="getRssUrl"><font-awesome-icon icon="rss"></font-awesome-icon></a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div class="uk-flex uk-flex-between uk-flex-middle">
|
||||
<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>
|
||||
<span><h1 v-t="'titles.preferences'" class="font-bold text-center" /></span>
|
||||
<span />
|
||||
</div>
|
||||
<hr />
|
||||
<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>
|
||||
<br />
|
||||
<input
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
<br />
|
||||
<select id="ddlDefaultQuality" v-model="defaultQuality" class="select w-auto" @change="onChange($event)">
|
||||
<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>
|
||||
<br />
|
||||
<label for="txtBufferingGoal"><strong v-t="'actions.buffering_goal'" /></label>
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
<label for="ddlCountrySelection"><strong v-t="'actions.country_selection'" /></label>
|
||||
<br />
|
||||
<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>
|
||||
<br />
|
||||
<label for="ddlDefaultHomepage"><strong v-t="'actions.default_homepage'" /></label>
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
<label for="ddlLanguageSelection"><strong v-t="'actions.language_selection'" /></label>
|
||||
<br />
|
||||
<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>
|
||||
<br />
|
||||
<label for="ddlEnabledCodecs"><strong v-t="'actions.enabled_codecs'" /></label>
|
||||
|
|
@ -160,19 +160,19 @@
|
|||
<table class="uk-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t("preferences.instance_name") }}</th>
|
||||
<th>{{ $t("preferences.instance_locations") }}</th>
|
||||
<th>{{ $t("preferences.has_cdn") }}</th>
|
||||
<th>{{ $t("preferences.ssl_score") }}</th>
|
||||
<th v-text="$t('preferences.instance_name')" />
|
||||
<th v-text="$t('preferences.instance_locations')" />
|
||||
<th v-text="$t('preferences.has_cdn')" />
|
||||
<th v-text="$t('preferences.ssl_score')" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-for="instance in instances" :key="instance.name">
|
||||
<tr>
|
||||
<td>{{ instance.name }}</td>
|
||||
<td>{{ instance.locations }}</td>
|
||||
<td>{{ instance.cdn == "Yes" ? $t("actions.yes") : $t("actions.no") }}</td>
|
||||
<td v-text="instance.name" />
|
||||
<td v-text="instance.locations" />
|
||||
<td v-text="$t(`actions.${instance.cdn === 'Yes' ? 'yes' : 'no'}`)" />
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -180,14 +180,10 @@
|
|||
|
||||
<hr />
|
||||
|
||||
<label for="ddlInstanceSelection"
|
||||
><strong>{{ $t("actions.instance_selection") }}:</strong></label
|
||||
>
|
||||
<label for="ddlInstanceSelection"><strong v-text="`${$t('actions.instance_selection')}:`" /></label>
|
||||
<br />
|
||||
<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">
|
||||
{{ instance.name }}
|
||||
</option>
|
||||
<option v-for="instance in instances" :key="instance.name" :value="instance.apiurl" v-text="instance.name" />
|
||||
</select>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
/>
|
||||
</div>
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
<template>
|
||||
<h1 class="text-center">
|
||||
{{ $route.query.search_query }}
|
||||
</h1>
|
||||
<h1 class="text-center" v-text="$route.query.search_query" />
|
||||
|
||||
<label for="ddlSearchFilters"
|
||||
><strong>{{ $t("actions.filter") }}: </strong></label
|
||||
>
|
||||
<label for="ddlSearchFilters"><strong v-text="`${$t('actions.filter')}:`" /></label>
|
||||
<select
|
||||
id="ddlSearchFilters"
|
||||
v-model="selectedFilter"
|
||||
|
|
@ -14,19 +10,18 @@
|
|||
style="height: 100%"
|
||||
@change="updateResults()"
|
||||
>
|
||||
<option v-for="filter in availableFilters" :key="filter" :value="filter">
|
||||
{{ filter.replace("_", " ") }}
|
||||
</option>
|
||||
<option v-for="filter in availableFilters" :key="filter" :value="filter" v-text="filter.replace('_', ' ')" />
|
||||
</select>
|
||||
|
||||
<hr />
|
||||
|
||||
<div v-if="results && results.corrected" style="height: 7vh">
|
||||
{{ $t("search.did_you_mean") }}
|
||||
<span v-text="$t('search.did_you_mean')" />
|
||||
<em>
|
||||
<router-link :to="{ name: 'SearchResults', query: { search_query: results.suggestion } }">
|
||||
{{ results.suggestion }}
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'SearchResults', query: { search_query: results.suggestion } }"
|
||||
v-text="results.suggestion"
|
||||
/>
|
||||
</em>
|
||||
</div>
|
||||
|
||||
|
|
@ -39,15 +34,17 @@
|
|||
<img style="width: 100%" :src="result.thumbnail" loading="lazy" />
|
||||
</div>
|
||||
<p>
|
||||
{{ result.name
|
||||
}}<font-awesome-icon class="ml-1.5" v-if="result.verified" icon="check"></font-awesome-icon>
|
||||
<span v-text="result.name" /><font-awesome-icon
|
||||
class="ml-1.5"
|
||||
v-if="result.verified"
|
||||
icon="check"
|
||||
></font-awesome-icon>
|
||||
</p>
|
||||
</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">
|
||||
<p>
|
||||
{{ result.uploader
|
||||
}}<font-awesome-icon
|
||||
<span v-text="result.uploader" /><font-awesome-icon
|
||||
class="ml-1.5"
|
||||
v-if="result.uploaderVerified"
|
||||
icon="check"
|
||||
|
|
@ -55,10 +52,10 @@
|
|||
</p>
|
||||
</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"
|
||||
><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 />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,8 @@
|
|||
:class="{ 'suggestion-selected': selected === i }"
|
||||
@mouseover="onMouseOver(i)"
|
||||
@mousedown.stop="onClick(i)"
|
||||
>
|
||||
{{ suggestion }}
|
||||
</li>
|
||||
v-text="suggestion"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
<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">
|
||||
<button class="btn mr-0.5">
|
||||
<router-link to="/import">
|
||||
{{ $t("actions.import_from_json") }}
|
||||
</router-link>
|
||||
<router-link to="/import" v-text="$t('actions.import_from_json')" />
|
||||
</button>
|
||||
|
||||
<button class="btn" @click="exportHandler">
|
||||
{{ $t("actions.export_to_json") }}
|
||||
</button>
|
||||
<button class="btn" @click="exportHandler" v-text="$t('actions.export_to_json')" />
|
||||
</div>
|
||||
<hr />
|
||||
|
||||
|
|
@ -20,11 +16,13 @@
|
|||
<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">
|
||||
<img :src="subscription.avatar" class="rounded-full" width="48" height="48" />
|
||||
<span>{{ subscription.name }}</span>
|
||||
<span v-text="subscription.name" />>
|
||||
</router-link>
|
||||
<button class="btn !w-min" @click="handleButton(subscription)">
|
||||
{{ subscription.subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
|
||||
</button>
|
||||
<button
|
||||
class="btn !w-min"
|
||||
@click="handleButton(subscription)"
|
||||
v-text="$t(`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<h1 v-t="'titles.trending'" class="font-bold text-center" />
|
||||
<h1 v-t="$t('titles.trending')" class="font-bold text-center" />
|
||||
|
||||
<hr />
|
||||
|
||||
|
|
|
|||
|
|
@ -3,12 +3,18 @@
|
|||
<router-link :to="video.url">
|
||||
<img :height="height" :width="width" class="w-full" :src="video.thumbnail" alt="" loading="lazy" />
|
||||
<div class="relative text-sm">
|
||||
<span v-if="video.duration" class="thumbnail-overlay bottom-5px right-5px" style="padding: 0 5px">{{
|
||||
timeFormat(video.duration)
|
||||
}}</span>
|
||||
<span v-if="video.watched" class="thumbnail-overlay bottom-5px left-5px" style="padding: 0 5px">{{
|
||||
$t("video.watched")
|
||||
}}</span>
|
||||
<span
|
||||
v-if="video.duration"
|
||||
class="thumbnail-overlay bottom-5px right-5px"
|
||||
style="padding: 0 5px"
|
||||
v-text="timeFormat(video.duration)"
|
||||
/>
|
||||
<span
|
||||
v-if="video.watched"
|
||||
class="thumbnail-overlay bottom-5px left-5px"
|
||||
style="padding: 0 5px"
|
||||
v-text="$t('video.watched')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -16,9 +22,8 @@
|
|||
style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
|
||||
class="my-2 overflow-hidden flex link"
|
||||
:title="video.title"
|
||||
>
|
||||
{{ video.title }}
|
||||
</p>
|
||||
v-text="video.title"
|
||||
/>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
|
|
@ -52,21 +57,17 @@
|
|||
:to="video.uploaderUrl"
|
||||
:title="video.uploaderName"
|
||||
>
|
||||
{{ video.uploaderName
|
||||
}}<font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
|
||||
<span v-text="video.uploaderName" />
|
||||
<font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
|
||||
</router-link>
|
||||
|
||||
<strong v-if="video.views >= 0 || video.uploadedDate" class="uk-text-small">
|
||||
<span v-if="video.views >= 0">
|
||||
<font-awesome-icon icon="eye"></font-awesome-icon>
|
||||
{{ numberFormat(video.views) }} •
|
||||
</span>
|
||||
<span v-if="video.uploadedDate">
|
||||
{{ video.uploadedDate }}
|
||||
</span>
|
||||
<span v-if="video.uploaded">
|
||||
{{ timeAgo(video.uploaded) }}
|
||||
<span v-text="`${numberFormat(video.views)} •`" />
|
||||
</span>
|
||||
<span v-if="video.uploadedDate" v-text="video.uploadedDate" />
|
||||
<span v-if="video.uploaded" v-text="timeAgo(video.uploaded)" />
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>{{ $t("actions.loading") }}</div>
|
||||
<div v-text="$t('actions.loading')" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -21,23 +21,21 @@
|
|||
:selected-auto-play="selectedAutoPlay"
|
||||
:selected-auto-loop="selectedAutoLoop"
|
||||
/>
|
||||
<div class="font-bold mt-2 text-2xl break-words">
|
||||
{{ video.title }}
|
||||
</div>
|
||||
<div class="font-bold mt-2 text-2xl break-words" v-text="video.title" />
|
||||
|
||||
<div class="flex mb-1.5">
|
||||
<span>{{ addCommas(video.views) }} views</span>
|
||||
<span class="ml-2">{{ uploadDate }}</span>
|
||||
<span v-text="`${addCommas(video.views)} views`" />
|
||||
<span class="ml-2" v-text="uploadDate" />
|
||||
|
||||
<div class="flex items-center relative ml-auto children:ml-2">
|
||||
<template v-if="video.likes >= 0">
|
||||
<div>
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
<template v-if="video.likes < 0">
|
||||
|
|
@ -45,12 +43,12 @@
|
|||
<strong v-t="'video.ratings_disabled'" />
|
||||
</div>
|
||||
</template>
|
||||
<a :href="'https://youtu.be/' + getVideoId()" class="btn">
|
||||
<strong>{{ $t("player.watch_on") }}</strong>
|
||||
<a :href="`https://youtu.be/${getVideoId()}`" class="btn">
|
||||
<strong v-text="$t('player.watch_on')" />
|
||||
<font-awesome-icon class="ml-1.5" :icon="['fab', 'youtube']"></font-awesome-icon>
|
||||
</a>
|
||||
<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>
|
||||
<router-link
|
||||
:to="toggleListenUrl"
|
||||
|
|
@ -66,37 +64,42 @@
|
|||
<div class="flex">
|
||||
<div class="flex items-center">
|
||||
<img :src="video.uploaderAvatar" alt="" loading="lazy" class="rounded-full" />
|
||||
<router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">
|
||||
{{ video.uploader }} </router-link
|
||||
><font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
|
||||
<router-link
|
||||
v-if="video.uploaderUrl"
|
||||
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>
|
||||
<button v-if="authenticated" class="btn relative ml-auto" @click="subscribeHandler">
|
||||
{{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
|
||||
</button>
|
||||
<button
|
||||
v-if="authenticated"
|
||||
class="btn relative ml-auto"
|
||||
@click="subscribeHandler"
|
||||
v-text="$t(`actions.${subscribed ? 'unsubscribe' : 'subscribe'}`)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<button class="btn mb-2" @click="showDesc = !showDesc">
|
||||
{{ showDesc ? $t("actions.minimize_description") : $t("actions.show_description") }}
|
||||
</button>
|
||||
<button
|
||||
class="btn mb-2"
|
||||
@click="showDesc = !showDesc"
|
||||
v-text="$t(`actions.${showDesc ? 'minimize_description' : 'show_description'}`)"
|
||||
/>
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<p v-show="showDesc" class="break-words" v-html="purifyHTML(video.description)"></p>
|
||||
<div v-if="showDesc && sponsors && sponsors.segments">
|
||||
{{ $t("video.sponsor_segments") }}: {{ sponsors.segments.length }}
|
||||
</div>
|
||||
<div
|
||||
v-if="showDesc && sponsors && sponsors.segments"
|
||||
v-text="`${$t('video.sponsor_segments')}: ${sponsors.segments.length}`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<label for="chkAutoLoop"
|
||||
><strong>{{ $t("actions.loop_this_video") }}:</strong></label
|
||||
>
|
||||
<label for="chkAutoLoop"><strong v-text="`${$t('actions.loop_this_video')}:`" /></label>
|
||||
<input id="chkAutoLoop" v-model="selectedAutoLoop" class="ml-1.5" type="checkbox" @change="onChange($event)" />
|
||||
<br />
|
||||
<label for="chkAutoPlay"
|
||||
><strong>{{ $t("actions.auto_play_next_video") }}:</strong></label
|
||||
>
|
||||
<label for="chkAutoPlay"><strong v-text="`${$t('actions.auto_play_next_video')}:`" /></label>
|
||||
<input id="chkAutoPlay" v-model="selectedAutoPlay" class="ml-1.5" type="checkbox" @change="onChange($event)" />
|
||||
|
||||
<hr />
|
||||
|
|
@ -113,9 +116,11 @@
|
|||
</div>
|
||||
|
||||
<div v-if="video" class="order-first sm:order-last">
|
||||
<a class="btn mb-2 sm:hidden" @click="showRecs = !showRecs">
|
||||
{{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
|
||||
</a>
|
||||
<a
|
||||
class="btn mb-2 sm:hidden"
|
||||
@click="showRecs = !showRecs"
|
||||
v-text="$t(`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`)"
|
||||
/>
|
||||
<VideoItem
|
||||
v-for="related in video.relatedStreams"
|
||||
class="w-auto"
|
||||
|
|
|
|||
Loading…
Reference in New Issue