Update WatchVideo.vue

This commit is contained in:
Dragos 2022-09-05 20:52:40 +03:00 committed by GitHub
parent ab67eb099e
commit d10f5c8bd1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -36,16 +36,16 @@
/> />
</div> </div>
<!-- video title --> <!-- video title -->
<div class="font-bold mt-2 text-2xl break-words" v-text="video.title" /> <div class="pp-video-title font-bold mt-2 text-2xl break-words" v-text="video.title" />
<div class="flex flex-wrap mt-3 mb-3"> <div class="pp-bellow-video flex flex-wrap mt-3 mb-3">
<!-- views / date --> <!-- views / date -->
<div class="flex flex-auto children:ml-2"> <div class="flex flex-auto children:ml-2">
<span v-t="{ path: 'video.views', args: { views: addCommas(video.views) } }" /> <span v-t="{ path: 'video.views', args: { views: addCommas(video.views) } }" />
<span> | </span> <span> </span>
<span v-text="uploadDate" /> <span v-text="uploadDate" />
</div> </div>
<!-- Likes/dilikes --> <!-- Likes/dilikes -->
<div class="flex children:mr-2"> <div class="pp-likes flex children:mr-2">
<template v-if="video.likes >= 0"> <template v-if="video.likes >= 0">
<div class="flex"> <div class="flex">
<div class="i-fa-solid:thumbs-up" /> <div class="i-fa-solid:thumbs-up" />
@ -64,20 +64,19 @@
</div> </div>
</div> </div>
<!-- Channel info & options flex container --> <!-- Channel info & options flex container -->
<div class="flex"> <div class="pp-watch-bellow-options flex">
<!-- Channel Image & Info --> <!-- Channel Image & Info -->
<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" />
<router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">{{ <router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">{{
video.uploader video.uploader
}}</router-link> }}</router-link>
<!-- Verified Badge --> <!-- Verified Badge -->
<font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check" /> <font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check" />
</div> </div>
<div class="flex relative ml-auto children:mx-1">
<button class="btn" v-if="authenticated" @click="showModal = !showModal"> <div class="pp-watch-buttons">
{{ $t("actions.add_to_playlist") }}<font-awesome-icon class="ml-1" icon="circle-plus" /> <!-- Subscribe button -->
</button>
<button <button
class="btn" class="btn"
@click="subscribeHandler" @click="subscribeHandler"
@ -86,88 +85,81 @@
args: { count: numberFormat(video.uploaderSubscriberCount) }, args: { count: numberFormat(video.uploaderSubscriberCount) },
}" }"
/> />
</div> <!-- RSS Feed button -->
<PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" /> <a
<ShareModal aria-label="RSS feed"
v-if="showShareModal" title="RSS feed"
:video-id="getVideoId()" role="button"
:current-time="currentTime" v-if="video.uploaderUrl"
@close="showShareModal = !showShareModal" :href="`https://www.youtube.com/feeds/videos.xml?channel_id=${video.uploaderUrl.split('/')[2]}`"
/> target="_blank"
<div class="flex"> class="btn flex-col"
<div class="self-center children:mr-1 my-1"> >
<!-- RSS Feed button --> <font-awesome-icon icon="rss" />
<a </a>
aria-label="RSS feed" <!-- watch on youtube button -->
title="RSS feed" <button class="btn" @click="showShareModal = !showShareModal">
role="button" <i18n-t class="lt-lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
v-if="video.uploaderUrl" <font-awesome-icon class="mx-1.5 ml-1" icon="fa-share" />
:href="`https://www.youtube.com/feeds/videos.xml?channel_id=${ </button>
video.uploaderUrl.split('/')[2] <!-- LBRY -->
}`" <a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn">
target="_blank" <i18n-t keypath="player.watch_on" tag="strong">LBRY</i18n-t>
class="btn flex-col" </a>
> <!-- listen / watch toggle -->
<font-awesome-icon icon="rss" /> <router-link
</a> :to="toggleListenUrl"
<!-- watch on youtube button --> :aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
<button class="btn" @click="showShareModal = !showShareModal"> :title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
<i18n-t class="lt-lg:hidden" keypath="actions.share" tag="strong"></i18n-t> class="btn flex-col"
<font-awesome-icon class="mx-1.5" icon="fa-share" /> >
</button> <font-awesome-icon :icon="isListening ? 'tv' : 'headphones'" />
<!-- LBRY --> </router-link>
<a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn"> <!-- Playlist Add button -->
<i18n-t keypath="player.watch_on" tag="strong">LBRY</i18n-t> <button class="btn" v-if="authenticated" @click="showModal = !showModal">
</a> {{ $t("actions.add_to_playlist") }}<font-awesome-icon class="ml-1" icon="circle-plus" />
<!-- listen / watch toggle --> </button>
<router-link <PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" />
:to="toggleListenUrl" <ShareModal
:aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title" v-if="showShareModal"
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title" :video-id="getVideoId()"
class="btn flex-col" :current-time="currentTime"
> @close="showShareModal = !showShareModal"
<font-awesome-icon :icon="isListening ? 'tv' : 'headphones'" /> />
</router-link>
</div>
</div> </div>
</div> </div>
<hr /> <hr />
<button <div efy_select>
class="btn mb-2" <input id="showDesc" type="checkbox" checked @change="showDesc = !showDesc" />
@click="showDesc = !showDesc" <label for="showDesc" v-t="'actions.show_description'" />
v-t="`actions.${showDesc ? 'minimize_description' : 'show_description'}`" <input id="showRecs" type="checkbox" checked @change="showRecs = !showRecs" />
/> <label for="showRecs" v-t="'actions.show_recommendations'" />
<input id="chkAutoLoop" v-model="selectedAutoLoop" type="checkbox" @change="onChange($event)" />
<label for="chkAutoLoop" v-text="`${$t('actions.loop_this_video')}`" />
<input id="chkAutoPlay" v-model="selectedAutoPlay" type="checkbox" @change="onChange($event)" />
<label for="chkAutoPlay" v-text="`${$t('actions.auto_play_next_video')}`" />
</div>
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<div v-show="showDesc" class="break-words" v-html="purifyHTML(video.description)" /> <div v-show="showDesc" class="break-words mb-2" 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}`"
/> />
</div> </div>
<hr /> <div class="grid pp-rec-vids">
<div v-if="!commentsEnabled" class="">
<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 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 />
<div class="grid xl:grid-cols-5 sm:grid-cols-4 grid-cols-1">
<div v-if="!commentsEnabled" class="xl:col-span-4 sm:col-span-3">
<p class="text-center mt-8" v-t="'comment.user_disabled'"></p> <p class="text-center mt-8" v-t="'comment.user_disabled'"></p>
</div> </div>
<div v-else-if="!comments" class="xl:col-span-4 sm:col-span-3"> <div v-else-if="!comments" class="">
<p class="text-center mt-8" v-t="'comment.loading'"></p> <p class="text-center mt-8" v-t="'comment.loading'"></p>
</div> </div>
<div v-else-if="comments.disabled" class="xl:col-span-4 sm:col-span-3"> <div v-else-if="comments.disabled" class="">
<p class="text-center mt-8" v-t="'comment.disabled'"></p> <p class="text-center mt-8" v-t="'comment.disabled'"></p>
</div> </div>
<div v-else ref="comments" class="xl:col-span-4 sm:col-span-3"> <div v-else ref="comments" class="">
<CommentItem <CommentItem
v-for="comment in comments.comments" v-for="comment in comments.comments"
:key="comment.commentId" :key="comment.commentId"
@ -184,13 +176,7 @@
:playlist="playlist" :playlist="playlist"
:selected-index="index" :selected-index="index"
/> />
<a <div v-show="showRecs" class="pp-show-recs">
class="btn mb-2"
@click="showRecs = !showRecs"
v-t="`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`"
/>
<hr v-show="showRecs" />
<div v-show="showRecs">
<VideoItem <VideoItem
v-for="related in video.relatedStreams" v-for="related in video.relatedStreams"
:key="related.url" :key="related.url"
@ -199,7 +185,6 @@
width="168" width="168"
/> />
</div> </div>
<hr class="sm:hidden" />
</div> </div>
</div> </div>
</div> </div>