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

Tweak channel page layout

Browse source
This commit is contained in:
rramiachraf 2023-03-15 15:38:30 +01:00
parent 58f525319f
commit 725b9d2c48
1 changed files with 42 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/components/ChannelPage.vue
View file

@ -2,38 +2,49 @@
<ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" /> <ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
<LoadingIndicatorPage :show-content="channel != null && !channel.error"> <LoadingIndicatorPage :show-content="channel != null && !channel.error">
<div class="flex justify-center place-items-center">
<img height="48" width="48" class="rounded-full m-1" :src="channel.avatarUrl" />
<h1 v-text="channel.name" />
<font-awesome-icon class="ml-1.5 !text-3xl" v-if="channel.verified" icon="check" />
</div>
<img v-if="channel.bannerUrl" :src="channel.bannerUrl" class="w-full pb-1.5" loading="lazy" /> <img v-if="channel.bannerUrl" :src="channel.bannerUrl" class="w-full pb-1.5" loading="lazy" />
<div class="flex justify-between items-center">
<div class="flex place-items-center">
<img height="48" width="48" class="rounded-full m-1" :src="channel.avatarUrl" />
<div class="flex gap-1 items-center">
<h1 v-text="channel.name" class="!text-xl" />
<font-awesome-icon class="!text-xl" v-if="channel.verified" icon="check" />
</div>
</div>
<div class="flex gap-2">
<button
class="btn"
@click="subscribeHandler"
v-t="{
path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
args: { count: numberFormat(channel.subscriberCount) },
}"
></button>
<!-- RSS Feed button -->
<a
aria-label="RSS feed"
title="RSS feed"
role="button"
v-if="channel.id"
:href="`${apiUrl()}/feed/unauthenticated/rss?channels=${channel.id}`"
target="_blank"
class="btn flex-col"
>
<font-awesome-icon icon="rss" />
</a>
</div>
</div>
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<p class="whitespace-pre-wrap"> <div class="whitespace-pre-wrap py-3">
<span v-html="purifyHTML(rewriteDescription(channel.description))" /> <span v-if="fullDescription" v-html="purifyHTML(rewriteDescription(channel.description))" />
</p> <span v-html="purifyHTML(rewriteDescription(channel.description.slice(0, 100))) + '...'" v-else />
<button class="hover:underline font-semibold ml-1" @click="fullDescription = !fullDescription">
<button [{{ fullDescription ? "Show less" : "Show more" }}]
class="btn" </button>
@click="subscribeHandler" </div>
v-t="{
path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
args: { count: numberFormat(channel.subscriberCount) },
}"
></button>
<!-- RSS Feed button -->
<a
aria-label="RSS feed"
title="RSS feed"
role="button"
v-if="channel.id"
:href="`${apiUrl()}/feed/unauthenticated/rss?channels=${channel.id}`"
target="_blank"
class="btn flex-col mx-3"
>
<font-awesome-icon icon="rss" />
</a>
<WatchOnYouTubeButton :link="`https://youtube.com/channel/${this.channel.id}`" /> <WatchOnYouTubeButton :link="`https://youtube.com/channel/${this.channel.id}`" />
@ -84,6 +95,7 @@ export default {
tabs: [], tabs: [],
selectedTab: 0, selectedTab: 0,
contentItems: [], contentItems: [],
fullDescription: false,
}; };
}, },
mounted() { mounted() {