mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-30 18:43:17 +00:00
move playlist to side of video
This commit is contained in:
nieve
parent
5b7947481e
commit
de04cc4b1b
@ -17,9 +17,9 @@
|
|||||||
<i18n-t keypath="info.next_video_countdown">{{ counter }}</i18n-t>
|
<i18n-t keypath="info.next_video_countdown">{{ counter }}</i18n-t>
|
||||||
</ToastComponent>
|
</ToastComponent>
|
||||||
</Transition>
|
</Transition>
|
||||||
|
<div class="flex gap-5 max-lg:flex-col">
|
||||||
|
<div class="flex-auto">
|
||||||
<div v-show="!video.error">
|
<div v-show="!video.error">
|
||||||
<div :class="isMobile ? 'flex-col' : 'flex'">
|
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
<VideoPlayer
|
<VideoPlayer
|
||||||
ref="videoPlayer"
|
ref="videoPlayer"
|
||||||
@ -32,6 +32,7 @@
|
|||||||
@navigate-next="navigateNext"
|
@navigate-next="navigateNext"
|
||||||
/>
|
/>
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
|
<div v-if="video&&isMobile">
|
||||||
<ChaptersBar
|
<ChaptersBar
|
||||||
v-if="video?.chapters?.length > 0 && showChapters"
|
v-if="video?.chapters?.length > 0 && showChapters"
|
||||||
:mobile-layout="isMobile"
|
:mobile-layout="isMobile"
|
||||||
@ -39,6 +40,13 @@
|
|||||||
:player-position="currentTime"
|
:player-position="currentTime"
|
||||||
@seek="navigate"
|
@seek="navigate"
|
||||||
/>
|
/>
|
||||||
|
<PlaylistVideos
|
||||||
|
v-if="playlist"
|
||||||
|
:playlist-id="playlistId"
|
||||||
|
:playlist="playlist"
|
||||||
|
:selected-index="index"
|
||||||
|
:prefer-listen="isListening"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- video title -->
|
<!-- video title -->
|
||||||
<div class="mt-2 break-words text-2xl font-bold" v-text="video.title" />
|
<div class="mt-2 break-words text-2xl font-bold" v-text="video.title" />
|
||||||
@ -58,7 +66,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="i-fa6-solid:thumbs-down" />
|
<div class="i-fa6-solid:thumbs-down" />
|
||||||
<strong class="ml-1" v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'" />
|
<strong
|
||||||
|
class="ml-1"
|
||||||
|
v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="video.likes < 0">
|
<template v-if="video.likes < 0">
|
||||||
@ -136,7 +147,9 @@
|
|||||||
<i class="i-fa6-solid:share mx-1.5" />
|
<i class="i-fa6-solid:share mx-1.5" />
|
||||||
</button>
|
</button>
|
||||||
<!-- YouTube -->
|
<!-- YouTube -->
|
||||||
<WatchOnButton :link="`https://youtu.be/${getVideoId()}?t=${Math.round(currentTime)}`" />
|
<WatchOnButton
|
||||||
|
:link="`https://youtu.be/${getVideoId()}?t=${Math.round(currentTime)}&list=${playlistId || ''}`"
|
||||||
|
/>
|
||||||
<!-- Odysee -->
|
<!-- Odysee -->
|
||||||
<WatchOnButton
|
<WatchOnButton
|
||||||
v-if="video.lbryId"
|
v-if="video.lbryId"
|
||||||
@ -150,7 +163,10 @@
|
|||||||
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
|
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
|
||||||
class="btn flex items-center"
|
class="btn flex items-center"
|
||||||
>
|
>
|
||||||
<i :class="isListening ? 'i-fa6-solid:tv' : 'i-fa6-solid:headphones'" class="mx-1.5" />
|
<i
|
||||||
|
:class="isListening ? 'i-fa6-solid:tv' : 'i-fa6-solid:headphones'"
|
||||||
|
class="mx-1.5"
|
||||||
|
/>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -209,15 +225,47 @@
|
|||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<label for="chkAutoLoop"><strong v-text="`${$t('actions.loop_this_video')}:`" /></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)" />
|
<input
|
||||||
|
id="chkAutoLoop"
|
||||||
|
v-model="selectedAutoLoop"
|
||||||
|
class="ml-1.5"
|
||||||
|
type="checkbox"
|
||||||
|
@change="onChange($event)"
|
||||||
|
/>
|
||||||
<br />
|
<br />
|
||||||
<label for="chkAutoPlay"><strong v-text="`${$t('actions.auto_play_next_video')}:`" /></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)" />
|
<input
|
||||||
|
id="chkAutoPlay"
|
||||||
|
v-model="selectedAutoPlay"
|
||||||
|
class="ml-1.5"
|
||||||
|
type="checkbox"
|
||||||
|
@change="onChange($event)"
|
||||||
|
/>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
<div v-if="isMobile">
|
||||||
|
<a
|
||||||
|
v-t="`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`"
|
||||||
|
class="btn mb-2"
|
||||||
|
@click="showRecs = !showRecs"
|
||||||
|
/>
|
||||||
|
<hr v-show="showRecs" />
|
||||||
|
<div v-show="showRecs">
|
||||||
|
<ContentItem
|
||||||
|
v-for="related in video.relatedStreams"
|
||||||
|
:key="related.url"
|
||||||
|
:item="related"
|
||||||
|
:prefer-listen="isListening"
|
||||||
|
class="mb-4"
|
||||||
|
height="94"
|
||||||
|
width="168"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<hr class="" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-4 xl:grid-cols-5">
|
<div class="flex flex-col">
|
||||||
<div class="sm:col-span-3 xl:col-span-4">
|
<div class="">
|
||||||
<button
|
<button
|
||||||
v-if="!comments?.disabled"
|
v-if="!comments?.disabled"
|
||||||
class="btn mb-2"
|
class="btn mb-2"
|
||||||
@ -229,14 +277,14 @@
|
|||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!showComments" class="sm:col-span-3 xl:col-span-4"></div>
|
<div v-if="!showComments" class=""></div>
|
||||||
<div v-else-if="!comments" class="sm:col-span-3 xl:col-span-4">
|
<div v-else-if="!comments" class="">
|
||||||
<p v-t="'comment.loading'" class="mt-8 text-center"></p>
|
<p v-t="'comment.loading'" class="mt-8 text-center"></p>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="comments.disabled" class="sm:col-span-3 xl:col-span-4">
|
<div v-else-if="comments.disabled" class="">
|
||||||
<p v-t="'comment.disabled'" class="mt-8 text-center"></p>
|
<p v-t="'comment.disabled'" class="mt-8 text-center"></p>
|
||||||
</div>
|
</div>
|
||||||
<div v-else ref="comments" class="sm:col-span-3 xl:col-span-4">
|
<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"
|
||||||
@ -246,8 +294,16 @@
|
|||||||
:video-id="getVideoId()"
|
:video-id="getVideoId()"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div v-if="video" class="order-first sm:order-last">
|
</div>
|
||||||
|
<div v-if="video&&!isMobile" class="w-96 flex-none">
|
||||||
|
<ChaptersBar
|
||||||
|
v-if="video?.chapters?.length > 0 && showChapters"
|
||||||
|
:mobile-layout="isMobile"
|
||||||
|
:chapters="video.chapters"
|
||||||
|
:player-position="currentTime"
|
||||||
|
@seek="navigate"
|
||||||
|
/>
|
||||||
<PlaylistVideos
|
<PlaylistVideos
|
||||||
v-if="playlist"
|
v-if="playlist"
|
||||||
:playlist-id="playlistId"
|
:playlist-id="playlistId"
|
||||||
@ -272,7 +328,6 @@
|
|||||||
width="168"
|
width="168"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<hr class="sm:hidden" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</LoadingIndicatorPage>
|
</LoadingIndicatorPage>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user