Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-11-15 04:38:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Visual Issues

Browse Source
This commit is contained in:
dragos-efy 2023-09-12 00:24:07 +03:00
parent 941d974503
commit b457535ed2
16 changed files with 162 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

@ -66,7 +66,9 @@ video {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
padding: 0 10rem 5rem 10rem; padding: 0 10rem 5rem 10rem;
line-height: 22rem; line-height: 22rem;
max-height: 43rem;
overflow: hidden; overflow: hidden;
word-break: break-word;
} }
.pp-video-card-buttons { .pp-video-card-buttons {
display: flex; display: flex;
@ -89,6 +91,8 @@ video {
-webkit-text-fill-color: var(--efy_text2); -webkit-text-fill-color: var(--efy_text2);
border: 0; border: 0;
padding: 6rem 10rem; padding: 6rem 10rem;
}
.pp-video-card-buttons :is(.pp-color, .btn, button) {
height: 35rem; height: 35rem;
} }
.pp-video-card-channel > .pp-text { .pp-video-card-channel > .pp-text {
@ -119,6 +123,7 @@ video {
background: transparent; background: transparent;
margin: var(--efy_gap0) 0 var(--efy_gap0) var(--efy_gap0); margin: var(--efy_gap0) 0 var(--efy_gap0) var(--efy_gap0);
width: fit-content; width: fit-content;
border-radius: var(--efy_radius);
} }
.pp-video-card-channel > a { .pp-video-card-channel > a {
height: 36rem; height: 36rem;

44
src/components/ChannelItem.vue
View File

@ -1,29 +1,27 @@
<template> <template>
<div class="flex flex-col flex-justify-between"> <div class="flex flex-col efy_trans_filter efy_shadow_trans">
<router-link :to="props.item.url"> <router-link
<div class="my-4 flex justify-center"> :to="props.item.url"
<img class="aspect-square w-[50%] rounded-full" :src="props.item.thumbnail" loading="lazy" /> class="flex items-center p-[10rem] gap-[10rem]"
</div> style="border-bottom: var(--efy_border)"
<p> >
<span v-text="props.item.name" /> <img
class="efy_shadow_trans"
style="border-radius: var(--efy_radius); width: 40rem; aspect-ratio: 1"
:src="props.item.thumbnail"
loading="lazy"
width="40"
height="40"
/>
<div class="flex items-center overflow-hidden pp-text">
<p v-text="props.item.name" class="pp-video-card-title p-0!" />
<font-awesome-icon v-if="props.item.verified" class="ml-1.5" icon="check" /> <font-awesome-icon v-if="props.item.verified" class="ml-1.5" icon="check" />
</p> </div>
</router-link> </router-link>
<p v-if="props.item.description" v-text="props.item.description" /> <div style="padding: 10rem">
<router-link v-if="props.item.uploaderUrl" class="link" :to="props.item.uploaderUrl"> <p v-if="props.item.description" v-text="props.item.description" />
<p> <div v-if="props.item.videos >= 0" v-text="`${props.item.videos} ${$t('video.videos')}`" />
<span v-text="props.item.uploader" /> </div>
<font-awesome-icon v-if="props.item.uploaderVerified" class="ml-1.5" icon="check" />
</p>
</router-link>
<a v-if="props.item.uploaderName" class="link" v-text="props.item.uploaderName" />
<template v-if="props.item.videos >= 0">
<br v-if="props.item.uploaderName" />
<strong v-text="`${props.item.videos} ${$t('video.videos')}`" />
</template>
<br />
</div> </div>
</template> </template>

12
src/components/CollapsableText.vue
View File

@ -1,5 +1,5 @@
<template v-if="text"> <template v-if="text">
<div class="mx-1 whitespace-pre-wrap py-2"> <div class="whitespace-pre-wrap">
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<span v-if="showFullText" v-html="fullText()" /> <span v-if="showFullText" v-html="fullText()" />
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
@ -7,10 +7,16 @@
<span v-if="text.length > 100 && !showFullText">...</span> <span v-if="text.length > 100 && !showFullText">...</span>
<button <button
v-if="text.length > 100" v-if="text.length > 100"
class="block whitespace-normal font-semibold text-neutral-500 hover:underline" style="
margin: 0 0 0 10rem;
background: var(--efy_bg1);
-webkit-text-fill-color: var(--efy_text);
padding: 5rem 8reml;
"
class="efy_shadow_trans efy_shadow_button_off efy_button_text_off"
@click="showFullText = !showFullText" @click="showFullText = !showFullText"
> >
[{{ showFullText ? $t("actions.show_less") : $t("actions.show_more") }}] {{ showFullText ? $t("actions.show_less") : $t("actions.show_more") }}
</button> </button>
</div> </div>
</template> </template>

5
src/components/ConfirmModal.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<ModalComponent @close="$emit('close')"> <ModalComponent @close="$emit('close')">
<div> <div>
<h3 class="text-xl" v-text="message" /> <h5 v-text="message" />
<div class="ml-auto mt-8 w-min flex gap-2"> <hr />
<div class="w-min flex" style="gap: var(--efy_gap0)">
<button v-t="'actions.cancel'" class="btn" @click="$emit('close')" /> <button v-t="'actions.cancel'" class="btn" @click="$emit('close')" />
<button v-t="'actions.okay'" class="btn" @click="$emit('confirm')" /> <button v-t="'actions.okay'" class="btn" @click="$emit('confirm')" />
</div> </div>

2
src/components/LoadingIndicatorPage.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div v-if="!showContent" class="min-h-[75vh] w-full flex items-center justify-center"> <div v-if="!showContent" class="min-h-[75vh] min-w-[75vw] w-full flex items-center justify-center">
<span id="spinner" /> <span id="spinner" />
</div> </div>
<div v-else> <div v-else>

12
src/components/LoginModal.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<ModalComponent> <ModalComponent>
<h3 v-t="'titles.account'" class="font-bold my-4" /> <h5 v-t="'titles.account'" class="font-bold my-4" />
<hr /> <hr />
<div class="text-center"> <div class="text-center">
<form class="children:pb-3"> <form class="children:pb-3">
<div> <div>
<input <input
v-model="username" v-model="username"
class="input w-full" class="m-0"
type="text" type="text"
autocomplete="username" autocomplete="username"
:placeholder="$t('login.username')" :placeholder="$t('login.username')"
@ -18,7 +18,7 @@
<div> <div>
<input <input
v-model="password" v-model="password"
class="input w-full" class="m-0"
type="password" type="password"
autocomplete="password" autocomplete="password"
:placeholder="$t('login.password')" :placeholder="$t('login.password')"
@ -26,9 +26,9 @@
v-on:keyup.enter="login" v-on:keyup.enter="login"
/> />
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end p-0!" style="gap: var(--efy_gap0)">
<a class="btn mr-2 cursor-pointer" @click="register" v-t="'titles.register'" /> <a role="button" class="m-0!" @click="register" v-t="'titles.register'" />
<a class="btn cursor-pointer" @click="login" v-t="'titles.login'" /> <a role="button" class="m-0!" @click="login" v-t="'titles.login'" />
</div> </div>
</form> </form>
</div> </div>

16
src/components/ModalComponent.vue
View File

@ -2,7 +2,9 @@
<div class="modal"> <div class="modal">
<div @click="handleClick"> <div @click="handleClick">
<div class="modal-container"> <div class="modal-container">
<button @click="$emit('close')"><font-awesome-icon icon="xmark" /></button> <button @click="$emit('close')" class="pp-color btn m-0">
<font-awesome-icon icon="xmark" />
</button>
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
@ -35,21 +37,15 @@ export default {
<style> <style>
.modal { .modal {
@apply fixed z-50 top-0 left-0 w-full h-full bg-gray bg-opacity-80 transition-opacity table; @apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
} }
.dark .modal {
@apply bg-dark-900 bg-opacity-80;
}
.modal > div { .modal > div {
@apply table-cell align-middle; @apply table-cell align-middle;
} }
.modal-container { .modal-container {
@apply w-100% m-auto max-w-[410rem] relative; @apply w-100% m-auto max-w-[421rem] relative;
} }
.modal-container > button { .modal-container > button {
@apply absolute right-50 top-30; @apply absolute right-[12rem] top-[15rem];
} }
</style> </style>

3
src/components/NavBar.vue
View File

@ -96,7 +96,7 @@
</nav> </nav>
<!-- search suggestions for mobile devices --> <!-- search suggestions for mobile devices -->
<div class="w-{full - 4} md:hidden mx-2" style="position: relative"> <div class="w-{full - 4} md:hidden" style="position: relative">
<input <input
v-model="searchText" v-model="searchText"
type="text" type="text"
@ -107,6 +107,7 @@
@keypress="onKeyPress" @keypress="onKeyPress"
@focus="onInputFocus" @focus="onInputFocus"
@blur="onInputBlur" @blur="onInputBlur"
style="margin: 15rem 0 0 0"
/> />
<span v-if="searchText" class="delete-search" @click="searchText = ''">⨉</span> <span v-if="searchText" class="delete-search" @click="searchText = ''">⨉</span>
</div> </div>

6
src/components/PlaylistAddModal.vue
View File

@ -4,12 +4,12 @@
<select v-model="selectedPlaylist" class="select w-full mb-2"> <select v-model="selectedPlaylist" class="select w-full mb-2">
<option v-for="playlist in playlists" :key="playlist.id" :value="playlist.id" v-text="playlist.name" /> <option v-for="playlist in playlists" :key="playlist.id" :value="playlist.id" v-text="playlist.name" />
</select> </select>
<div class="flex justify-end"> <div class="flex justify-end" style="gap: var(--efy_gap0)">
<button ref="addButton" v-t="'actions.create_playlist'" class="btn" @click="onCreatePlaylist" /> <button ref="addButton" v-t="'actions.create_playlist'" class="btn pp-color" @click="onCreatePlaylist" />
<button <button
ref="addButton" ref="addButton"
v-t="'actions.add_to_playlist'" v-t="'actions.add_to_playlist'"
class="btn" class="btn pp-color"
@click="handleClick(selectedPlaylist)" @click="handleClick(selectedPlaylist)"
/> />
</div> </div>

13
src/components/PlaylistItem.vue
View File

@ -4,10 +4,9 @@
<div class="relative"> <div class="relative">
<img class="thumbnail" :src="props.item.thumbnail" loading="lazy" /> <img class="thumbnail" :src="props.item.thumbnail" loading="lazy" />
</div> </div>
<p> <div class="flex items-center h-[44rem] overflow-hidden">
<span v-text="props.item.name" class="pp-video-card-title" /> <p v-text="props.item.name" class="pp-video-card-title" />
<font-awesome-icon v-if="props.item.verified" class="ml-1.5" icon="check" /> </div>
</p>
</router-link> </router-link>
<p v-if="props.item.description" v-text="props.item.description" /> <p v-if="props.item.description" v-text="props.item.description" />
@ -29,7 +28,11 @@
<font-awesome-icon class="ml-1.5" v-if="item.uploaderVerified" icon="check" /> <font-awesome-icon class="ml-1.5" v-if="item.uploaderVerified" icon="check" />
</div> </div>
</router-link> </router-link>
<a v-else-if="props.item.uploaderName" class="pp-video-card-channel" v-text="props.item.uploaderName" /> <a
v-else-if="props.item.uploaderName"
class="pp-video-card-channel efy_shadow_trans"
v-text="props.item.uploaderName"
/>
</div> </div>
</div> </div>
</template> </template>

59
src/components/PlaylistPage.vue
View File

@ -2,34 +2,52 @@
<ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" /> <ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
<LoadingIndicatorPage v-show="!playlist?.error" :show-content="playlist"> <LoadingIndicatorPage v-show="!playlist?.error" :show-content="playlist">
<h5 class="mb-1 ml-1" v-text="playlist.name" /> <hr />
<h5 class="mb-[10rem]" v-text="playlist.name" />
<CollapsableText v-if="playlist?.description" :text="playlist.description" /> <CollapsableText v-if="playlist?.description" :text="playlist.description" />
<hr />
<div class="mt-1 flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div class="pp-video-card-buttons m-0!">
<router-link class="link" :to="playlist.uploaderUrl || '/'"> <router-link
<img :src="playlist.uploaderAvatar" loading="lazy" /> :to="playlist.uploaderUrl || '/'"
<strong v-text="playlist.uploader" /> class="pp-video-card-channel p-0!"
style="background: transparent; border: 0"
>
<img
v-if="playlist.uploaderAvatar"
:src="playlist.uploaderAvatar"
loading="lazy"
width="36"
height="36"
class="w-36rem h-36rem efy_shadow_trans"
/>
<button class="pp-text efy_shadow_trans efy_shadow_button_off efy_button_text_off">
<span v-text="playlist.uploader" />
<font-awesome-icon class="ml-1.5" v-if="playlist.uploaderVerified" icon="check" />
</button>
</router-link> </router-link>
<button
v-text="`${playlist.videos} ${$t('video.videos')}`"
class="efy_button_text_off efy_shadow_trans efy_shadow_button_off"
/>
</div> </div>
<div> <div class="pp-flex-bookmarks">
<strong v-text="`${playlist.videos} ${$t('video.videos')}`" /> <button v-if="!isPipedPlaylist" class="btn" @click="bookmarkPlaylist">
<br /> <font-awesome-icon class="mr-[5rem]" icon="bookmark" />
<button v-if="!isPipedPlaylist" class="btn mx-1" @click="bookmarkPlaylist"> {{ $t(`actions.${isBookmarked ? "playlist_bookmarked" : "bookmark_playlist"}`) }}
{{ $t(`actions.${isBookmarked ? "playlist_bookmarked" : "bookmark_playlist"}`)
}}<font-awesome-icon class="ml-3" icon="bookmark" />
</button> </button>
<button v-if="authenticated && !isPipedPlaylist" class="btn mr-1 ml-2" @click="clonePlaylist"> <button v-if="authenticated && !isPipedPlaylist" class="btn mr-1 ml-2" @click="clonePlaylist">
{{ $t("actions.clone_playlist") }}<font-awesome-icon class="ml-3" icon="clone" /> <font-awesome-icon class="mr-[5rem]" icon="clone" />{{ $t("actions.clone_playlist") }}
</button> </button>
<button class="btn mr-1" @click="downloadPlaylistAsTxt"> <button class="btn mr-1" @click="downloadPlaylistAsTxt">
{{ $t("actions.download_as_txt") }} {{ $t("actions.download_as_txt") }}
</button> </button>
<a class="btn" :href="getRssUrl"> <a :href="getRssUrl" role="button" class="btn pp-square">
<font-awesome-icon icon="rss" /> <font-awesome-icon icon="rss" />
</a> </a>
<WatchOnButton :link="`https://www.youtube.com/playlist?list=${$route.query.list}`" /> <WatchOnButton :link="`https://www.youtube.com/playlist?list=${$route.query.list}`" class="pp-square" />
</div> </div>
</div> </div>
@ -51,6 +69,17 @@
</LoadingIndicatorPage> </LoadingIndicatorPage>
</template> </template>
<style>
.pp-flex-bookmarks {
display: flex;
flex-wrap: wrap;
gap: var(--efy_gap0);
}
.pp-flex-bookmarks > * {
margin: 0;
}
</style>
<script> <script>
import ErrorHandler from "./ErrorHandler.vue"; import ErrorHandler from "./ErrorHandler.vue";
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue"; import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";

24
src/components/PlaylistsPage.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<hr /> <hr />
<div class="flex justify-between items-center"> <div class="flex flex-wrap justify-between items-center" style="gap: var(--efy_gap0)">
<button <button
v-t="'actions.create_playlist'" v-t="'actions.create_playlist'"
style="height: var(--efy_ratio_width); margin: 0" style="height: var(--efy_ratio_width); margin: 0"
@ -27,7 +27,7 @@
<hr /> <hr />
<div class="video-grid"> <div class="video-grid">
<div v-for="playlist in playlists" :key="playlist.id" class="video-card efy_trans_filter"> <div v-for="playlist in playlists" :key="playlist.id" class="video-card efy_trans_filter efy_shadow_trans">
<router-link :to="`/playlist?list=${playlist.id}`"> <router-link :to="`/playlist?list=${playlist.id}`">
<img class="thumbnail" :src="playlist.thumbnail" alt="thumbnail" /> <img class="thumbnail" :src="playlist.thumbnail" alt="thumbnail" />
<p <p
@ -38,7 +38,10 @@
/> />
</router-link> </router-link>
<div class="pp-video-card-buttons flex gap-15rem children:m-0" style="flex-wrap: wrap"> <div class="pp-video-card-buttons flex gap-15rem children:m-0" style="flex-wrap: wrap">
<button v-text="`${playlist.videos} ${$t('video.videos')}`" class="thumbnail-overlay thumbnail-right" /> <button
v-text="`${playlist.videos} ${$t('video.videos')}`"
class="efy_shadow_trans efy_shadow_button_off efy_button_text_off"
/>
<button <button
v-t="'actions.edit_playlist'" v-t="'actions.edit_playlist'"
class="pp-color h-auto" class="pp-color h-auto"
@ -76,14 +79,14 @@
/> />
</div> </div>
</div> </div>
<hr />
<hr />
<h5 v-if="bookmarks" v-t="'titles.bookmarks'" class="mb-[15rem]" /> <h5 v-if="bookmarks" v-t="'titles.bookmarks'" class="mb-[15rem]" />
<div v-if="bookmarks" class="video-grid"> <div v-if="bookmarks" class="video-grid">
<div <div
v-for="(playlist, index) in bookmarks" v-for="(playlist, index) in bookmarks"
:key="playlist.playlistId" :key="playlist.playlistId"
class="pp-bookmark video-card efy_trans_filter" class="pp-bookmark video-card efy_trans_filter efy_shadow_trans"
> >
<router-link :to="`/playlist?list=${playlist.playlistId}`"> <router-link :to="`/playlist?list=${playlist.playlistId}`">
<img class="thumbnail" :src="playlist.thumbnail" alt="thumbnail" /> <img class="thumbnail" :src="playlist.thumbnail" alt="thumbnail" />
@ -92,14 +95,17 @@
</div> </div>
</router-link> </router-link>
<div class="pp-video-card-buttons flex gap-15rem"> <div class="pp-video-card-buttons flex gap-15rem">
<button @click.prevent="removeBookmark(index)"> <button @click.prevent="removeBookmark(index)" class="btn pp-color aspect-square">
<font-awesome-icon class="ml-3" icon="bookmark" /> <font-awesome-icon icon="bookmark" />
</button> </button>
<button v-text="`${playlist.videos} ${$t('video.videos')}`" class="thumbnail-overlay" /> <button
v-text="`${playlist.videos} ${$t('video.videos')}`"
class="efy_shadow_trans efy_shadow_button_off efy_button_text_off"
/>
</div> </div>
<a :href="playlist.uploaderUrl" class="pp-video-card-channel"> <a :href="playlist.uploaderUrl" class="pp-video-card-channel">
<img class="w-36rem h-36rem efy_shadow_trans" :src="playlist.uploaderAvatar" width="36" height="36" /> <img class="w-36rem h-36rem efy_shadow_trans" :src="playlist.uploaderAvatar" width="36" height="36" />
<div class="pp-text efy_shadow_trans efy_shadow_button_off"> <div class="pp-text efy_shadow_trans">
<span v-text="playlist.uploader" /> <span v-text="playlist.uploader" />
</div> </div>
</a> </a>

8
src/components/ShareModal.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<ModalComponent> <ModalComponent>
<h4 v-t="'actions.share'" /> <h5 v-t="'actions.share'" />
<div class="flex justify-between mt-2 mb-2"> <div class="flex justify-between mt-2 mb-2">
<label v-t="'actions.piped_link'" /> <label v-t="'actions.piped_link'" />
<input v-model="pipedLink" type="checkbox" @change="onChange" /> <input v-model="pipedLink" type="checkbox" @change="onChange" />
@ -15,13 +15,13 @@
</div> </div>
<div v-if="withTimeCode" class="flex justify-between mt-2" style="align-items: center"> <div v-if="withTimeCode" class="flex justify-between mt-2" style="align-items: center">
<label v-t="'actions.time_code'" /> <label v-t="'actions.time_code'" />
<input v-model="timeStamp" class="input w-12" type="text" @change="onChange" /> <input v-model="timeStamp" style="max-width: 100rem" type="number" @change="onChange" />
</div> </div>
<a :href="generatedLink" target="_blank"> <a :href="generatedLink" target="_blank">
<h6 class="mb-2 mt-2" v-text="generatedLink" /> <h6 class="mb-2 mt-2" v-text="generatedLink" />
</a> </a>
<QrCode v-if="showQrCode" :text="generatedLink" /> <QrCode v-if="showQrCode" :text="generatedLink" class="mb-[10rem]" />
<div class="mt-4 flex justify-end"> <div class="flex flex-wrap justify-end" style="gap: var(--efy_gap0)">
<button v-t="'actions.generate_qrcode'" class="btn" @click="showQrCode = !showQrCode" /> <button v-t="'actions.generate_qrcode'" class="btn" @click="showQrCode = !showQrCode" />
<button v-t="'actions.follow_link'" class="btn ml-3" @click="followLink()" /> <button v-t="'actions.follow_link'" class="btn ml-3" @click="followLink()" />
<button v-t="'actions.copy_link'" class="btn ml-3" @click="copyLink()" /> <button v-t="'actions.copy_link'" class="btn ml-3" @click="copyLink()" />

1
src/components/SubscriptionsPage.vue
View File

@ -114,7 +114,6 @@
width: 100%; width: 100%;
} }
.selected { .selected {
border: 0.1rem outset red;
} }
.m0c { .m0c {
gap: var(--efy_gap0); gap: var(--efy_gap0);

26
src/components/VideoItem.vue
View File

@ -20,11 +20,27 @@
loading="lazy" loading="lazy"
/> />
<!-- progress bar --> <!-- progress bar -->
<div class="relative h-1 w-full"> <div
v-if="item.watched && item.duration > 0"
class="relative h-1 w-full"
style="
height: 4rem;
background: rgba(255, 255, 255, 0.067);
bottom: 8px;
border-radius: 0px;
box-shadow: 0 -5rem 10rem #0005;
backdrop-filter: blur(24px);
"
>
<div <div
v-if="item.watched && item.duration > 0" class="absolute bottom-0 left-0"
class="absolute bottom-0 left-0 h-1 bg-red-600"
:style="{ width: `clamp(0%, ${(item.currentTime / item.duration) * 100}%, 100%` }" :style="{ width: `clamp(0%, ${(item.currentTime / item.duration) * 100}%, 100%` }"
style="
height: 4rem;
background: var(--efy_color);
border-radius: 0 var(--efy_radius0) var(--efy_radius0) 0;
box-shadow: 3rem 0 5rem #0005;
"
/> />
</div> </div>
<div class="flex items-center h-[44rem] overflow-hidden"> <div class="flex items-center h-[44rem] overflow-hidden">
@ -49,6 +65,7 @@
</button> </button>
<router-link <router-link
class="btn efy_shadow_trans efy_shadow_button_off efy_button_text_off" class="btn efy_shadow_trans efy_shadow_button_off efy_button_text_off"
role="button"
:to="{ :to="{
path: '/watch', path: '/watch',
query: { query: {
@ -66,7 +83,7 @@
<button <button
:title="$t('actions.add_to_playlist')" :title="$t('actions.add_to_playlist')"
@click="showModal = !showModal" @click="showModal = !showModal"
class="efy_shadow_trans efy_shadow_button_off efy_button_text_off" class="btn efy_shadow_trans efy_shadow_button_off efy_button_text_off"
> >
<font-awesome-icon icon="circle-plus" /> <font-awesome-icon icon="circle-plus" />
</button> </button>
@ -74,6 +91,7 @@
v-if="admin" v-if="admin"
ref="removeButton" ref="removeButton"
:title="$t('actions.remove_from_playlist')" :title="$t('actions.remove_from_playlist')"
class="efy_shadow_trans efy_shadow_button_off efy_button_text_off"
@click="showConfirmRemove = true" @click="showConfirmRemove = true"
> >
<font-awesome-icon icon="circle-minus" /> <font-awesome-icon icon="circle-minus" />

16
src/components/WatchVideo.vue
View File

@ -108,9 +108,9 @@
:playlist-index="index" :playlist-index="index"
@close="showShareModal = !showShareModal" @close="showShareModal = !showShareModal"
/> />
<button class="btn flex items-center" @click="showShareModal = !showShareModal"> <button class="btn flex items-center share-btn" @click="showShareModal = !showShareModal">
<font-awesome-icon class="mx-1.5 mr-1" icon="fa-share" /> <font-awesome-icon class="mx-1.5 mr-1" icon="fa-share" />
<i18n-t class="lt-lg:hidden" keypath="actions.share" tag="strong"></i18n-t> <i18n-t keypath="actions.share" tag="strong"></i18n-t>
</button> </button>
<!-- YouTube --> <!-- YouTube -->
<WatchOnButton :link="`https://youtu.be/${getVideoId()}`" /> <WatchOnButton :link="`https://youtu.be/${getVideoId()}`" />
@ -707,9 +707,19 @@ export default {
opacity: 0; opacity: 0;
transform: translateX(100%) scale(0.5); transform: translateX(100%) scale(0.5);
} }
.description a { .description a {
text-decoration: underline; text-decoration: underline;
filter: brightness(0.75); filter: brightness(0.75);
} }
@media (width <= 768px) {
.share-btn {
aspect-ratio: 1;
}
.share-btn strong {
display: none;
}
.share-btn svg {
margin: 0;
}
}
</style> </style>