TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

improved watch video action buttons on small screens

Browse source
This commit is contained in:
robertkleinschuster 2023-05-25 21:40:14 +02:00
parent 3dfdf8806f
commit 1cae65d133
1 changed files with 27 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/components/WatchVideo.vue
View file

@ -43,13 +43,13 @@
<div class="font-bold mt-2 text-2xl break-words" v-text="video.title" /> <div class="font-bold mt-2 text-2xl break-words" v-text="video.title" />
<div class="flex flex-wrap mt-3 mb-3"> <div class="flex flex-wrap mt-3 mb-3">
<!-- views / date --> <!-- views / date -->
<div class="flex flex-auto children:ml-2"> <div class="flex flex-auto gap-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="flex gap-2">
<template v-if="video.likes >= 0"> <template v-if="video.likes >= 0">
<div class="flex items-center"> <div class="flex items-center">
<div class="i-fa6-solid:thumbs-up" /> <div class="i-fa6-solid:thumbs-up" />
@ -68,7 +68,7 @@
</div> </div>
</div> </div>
<!-- Channel info & options flex container --> <!-- Channel info & options flex container -->
<div class="flex"> <div class="flex flex-wrap gap-1">
<!-- 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" class="rounded-full" />
@ -78,19 +78,6 @@
<!-- 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:mr-1 items-center">
<button class="btn" v-if="authenticated" @click="showModal = !showModal">
{{ $t("actions.add_to_playlist") }}<font-awesome-icon class="ml-1" icon="circle-plus" />
</button>
<button
class="btn"
@click="subscribeHandler"
v-t="{
path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
args: { count: numberFormat(video.uploaderSubscriberCount) },
}"
/>
</div>
<PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" /> <PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" />
<ShareModal <ShareModal
v-if="showShareModal" v-if="showShareModal"
@ -100,8 +87,20 @@
:playlist-index="index" :playlist-index="index"
@close="showShareModal = !showShareModal" @close="showShareModal = !showShareModal"
/> />
<div class="flex"> <div class="flex flex-wrap gap-1 ml-auto">
<div class="self-center children:mr-1 my-1"> <!-- Subscribe Button -->
<button class="btn flex items-center" v-if="authenticated" @click="showModal = !showModal">
{{ $t("actions.add_to_playlist") }}<font-awesome-icon class="ml-1" icon="circle-plus" />
</button>
<button
class="btn"
@click="subscribeHandler"
v-t="{
path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
args: { count: numberFormat(video.uploaderSubscriberCount) },
}"
/>
<div class="flex flex-wrap gap-1">
<!-- RSS Feed button --> <!-- RSS Feed button -->
<a <a
aria-label="RSS feed" aria-label="RSS feed"
@ -110,18 +109,22 @@
v-if="video.uploaderUrl" v-if="video.uploaderUrl"
:href="`${apiUrl()}/feed/unauthenticated/rss?channels=${video.uploaderUrl.split('/')[2]}`" :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${video.uploaderUrl.split('/')[2]}`"
target="_blank" target="_blank"
class="btn flex-col" class="btn flex items-center"
> >
<font-awesome-icon icon="rss" /> <font-awesome-icon class="mx-1.5" icon="rss" />
</a> </a>
<WatchOnYouTubeButton :link="`https://youtu.be/${getVideoId()}`" /> <WatchOnYouTubeButton :link="`https://youtu.be/${getVideoId()}`" />
<!-- Share Dialog --> <!-- Share Dialog -->
<button class="btn" @click="showShareModal = !showShareModal"> <button class="btn flex items-center" @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" 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 flex items-center"
>
<i18n-t keypath="player.watch_on" tag="strong">LBRY</i18n-t> <i18n-t keypath="player.watch_on" tag="strong">LBRY</i18n-t>
</a> </a>
<!-- listen / watch toggle --> <!-- listen / watch toggle -->
@ -129,9 +132,9 @@
:to="toggleListenUrl" :to="toggleListenUrl"
:aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title" :aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title" :title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
class="btn flex-col" class="btn flex items-center"
> >
<font-awesome-icon :icon="isListening ? 'tv' : 'headphones'" /> <font-awesome-icon class="mx-1.5" :icon="isListening ? 'tv' : 'headphones'" />
</router-link> </router-link>
</div> </div>
</div> </div>