Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2026-08-21 05:01:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix some layout issues.

Browse Source
This commit is contained in:
Kavin
2026-08-13 23:10:55 +05:30
parent a0a0727703
commit 0451facc2e
2 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/WatchVideo.vue
View File

@@ -128,30 +128,35 @@
:playlist-index="index"
@close="showShareModal = !showShareModal"
/>
<div class="ml-auto flex flex-wrap gap-1">
<div class="ml-auto flex flex-wrap gap-1 items-center">
<!-- Subscribe Button -->
<button
class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:hidden max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:hidden max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
@click="downloadCurrentFrame"
>
{{ $t("actions.download_frame") }}<i-fa6-solid-download class="ml-1" />
<span>{{ $t("actions.download_frame") }}</span>
<i-fa6-solid-download class="ml-1" />
</button>
<button
class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
@click="showModal = !showModal"
>
{{ $t("actions.add_to_playlist") }}<i-fa6-solid-circle-plus class="ml-1" />
<span>{{ $t("actions.add_to_playlist") }}</span>
<i-fa6-solid-circle-plus class="ml-1" />
</button>
<button
class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
@click="subscribeHandler"
v-text="
$t('actions.' + (subscribed ? 'unsubscribe' : 'subscribe')) +
' - ' +
numberFormat(video.uploaderSubscriberCount)
"
/>
<div class="flex flex-wrap gap-1">
>
<span>
{{
$t("actions." + (subscribed ? "unsubscribe" : "subscribe")) +
" - " +
numberFormat(video.uploaderSubscriberCount)
}}
</span>
</button>
<div class="flex flex-wrap gap-1 items-center">
<!-- RSS Feed button -->
<a
v-if="video.uploaderUrl"
@@ -160,16 +165,18 @@
role="button"
:href="`${apiUrl()}/feed/unauthenticated/rss?channels=${video.uploaderUrl.split('/')[2]}`"
target="_blank"
class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
>
<i-fa6-solid-rss class="mx-1.5" />
</a>
<!-- Share Dialog -->
<button
class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
@click="showShareModal = !showShareModal"
>
<i18n-t class="max-lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
<strong class="max-lg:hidden">
<i18n-t keypath="actions.share" tag="span"></i18n-t>
</strong>
<i-fa6-solid-share class="mx-1.5" />
</button>
<!-- YouTube -->
@@ -185,12 +192,12 @@
:to="toggleListenUrl"
:aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
>
<div>
<span>
<i-fa6-solid-tv v-if="isListening" class="mx-1.5" />
<i-fa6-solid-headphones v-else class="mx-1.5" />
</div>
</span>
</router-link>
</div>
</div>