mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Update WatchVideo.vue
This commit is contained in:
Dragos
GitHub
parent
ab67eb099e
commit
d10f5c8bd1
1 changed files with 67 additions and 82 deletions
|
|
@ -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,25 +85,13 @@
|
||||||
args: { count: numberFormat(video.uploaderSubscriberCount) },
|
args: { count: numberFormat(video.uploaderSubscriberCount) },
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
<PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" />
|
|
||||||
<ShareModal
|
|
||||||
v-if="showShareModal"
|
|
||||||
:video-id="getVideoId()"
|
|
||||||
:current-time="currentTime"
|
|
||||||
@close="showShareModal = !showShareModal"
|
|
||||||
/>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="self-center children:mr-1 my-1">
|
|
||||||
<!-- RSS Feed button -->
|
<!-- RSS Feed button -->
|
||||||
<a
|
<a
|
||||||
aria-label="RSS feed"
|
aria-label="RSS feed"
|
||||||
title="RSS feed"
|
title="RSS feed"
|
||||||
role="button"
|
role="button"
|
||||||
v-if="video.uploaderUrl"
|
v-if="video.uploaderUrl"
|
||||||
:href="`https://www.youtube.com/feeds/videos.xml?channel_id=${
|
:href="`https://www.youtube.com/feeds/videos.xml?channel_id=${video.uploaderUrl.split('/')[2]}`"
|
||||||
video.uploaderUrl.split('/')[2]
|
|
||||||
}`"
|
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="btn flex-col"
|
class="btn flex-col"
|
||||||
>
|
>
|
||||||
|
|
@ -113,7 +100,7 @@
|
||||||
<!-- watch on youtube button -->
|
<!-- watch on youtube button -->
|
||||||
<button class="btn" @click="showShareModal = !showShareModal">
|
<button class="btn" @click="showShareModal = !showShareModal">
|
||||||
<i18n-t class="lt-lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
|
<i18n-t class="lt-lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
|
||||||
<font-awesome-icon class="mx-1.5" icon="fa-share" />
|
<font-awesome-icon class="mx-1.5 ml-1" icon="fa-share" />
|
||||||
</button>
|
</button>
|
||||||
<!-- LBRY -->
|
<!-- LBRY -->
|
||||||
<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">
|
||||||
|
|
@ -128,46 +115,51 @@
|
||||||
>
|
>
|
||||||
<font-awesome-icon :icon="isListening ? 'tv' : 'headphones'" />
|
<font-awesome-icon :icon="isListening ? 'tv' : 'headphones'" />
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
<!-- Playlist Add button -->
|
||||||
|
<button class="btn" v-if="authenticated" @click="showModal = !showModal">
|
||||||
|
{{ $t("actions.add_to_playlist") }}<font-awesome-icon class="ml-1" icon="circle-plus" />
|
||||||
|
</button>
|
||||||
|
<PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" />
|
||||||
|
<ShareModal
|
||||||
|
v-if="showShareModal"
|
||||||
|
:video-id="getVideoId()"
|
||||||
|
:current-time="currentTime"
|
||||||
|
@close="showShareModal = !showShareModal"
|
||||||
|
/>
|
||||||
</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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue