mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Fix layout above description.
Affects, uploaded date, views, likes, subscribe button, etc.
This commit is contained in:
FireMasterK
parent
f9fcc5e98a
commit
d0c45650de
1 changed files with 63 additions and 52 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="video && isEmbed" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999">
|
<div v-if="video && isEmbed" class="absolute top-0 left-0 h-full w-full z-50">
|
||||||
<Player
|
<Player
|
||||||
ref="videoPlayer"
|
ref="videoPlayer"
|
||||||
:video="video"
|
:video="video"
|
||||||
|
|
@ -21,53 +21,60 @@
|
||||||
:selected-auto-play="selectedAutoPlay"
|
:selected-auto-play="selectedAutoPlay"
|
||||||
:selected-auto-loop="selectedAutoLoop"
|
:selected-auto-loop="selectedAutoLoop"
|
||||||
/>
|
/>
|
||||||
<div class="font-bold uk-margin-small-top text-lg break-words">
|
<div class="font-bold mt-2 text-2xl break-words">
|
||||||
{{ video.title }}
|
{{ video.title }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="uk-flex uk-flex-middle">
|
<div class="flex mb-1.5">
|
||||||
<div class="uk-margin-small-right">{{ addCommas(video.views) }} views</div>
|
<span>{{ addCommas(video.views) }} views</span>
|
||||||
<div class="uk-margin-small-right">{{ uploadDate }}</div>
|
<span class="ml-2">{{ uploadDate }}</span>
|
||||||
<div class="uk-flex-1"></div>
|
|
||||||
<template v-if="video.likes >= 0">
|
<div class="flex items-center relative ml-auto children:ml-2">
|
||||||
<div class="uk-margin-small-left">
|
<template v-if="video.likes >= 0">
|
||||||
<font-awesome-icon class="uk-margin-small-right" icon="thumbs-up"></font-awesome-icon>
|
<div>
|
||||||
<b>{{ addCommas(video.likes) }}</b>
|
<font-awesome-icon icon="thumbs-up"></font-awesome-icon>
|
||||||
</div>
|
<b>{{ addCommas(video.likes) }}</b>
|
||||||
<div class="uk-margin-small-left">
|
</div>
|
||||||
<font-awesome-icon class="uk-margin-small-right" icon="thumbs-down"></font-awesome-icon>
|
<div>
|
||||||
<b>{{ video.dislikes >= 0 ? addCommas(video.dislikes) : "?" }}</b>
|
<font-awesome-icon icon="thumbs-down"></font-awesome-icon>
|
||||||
</div>
|
<b>{{ video.dislikes >= 0 ? addCommas(video.dislikes) : "?" }}</b>
|
||||||
</template>
|
</div>
|
||||||
<template v-if="video.likes < 0">
|
</template>
|
||||||
<div class="uk-margin-small-left">
|
<template v-if="video.likes < 0">
|
||||||
<b v-t="'video.ratings_disabled'" />
|
<div>
|
||||||
</div>
|
<b v-t="'video.ratings_disabled'" />
|
||||||
</template>
|
</div>
|
||||||
<a :href="'https://youtu.be/' + getVideoId()" class="uk-margin-small-left btn">
|
</template>
|
||||||
<b>{{ $t("player.watch_on") }} </b>
|
<a :href="'https://youtu.be/' + getVideoId()" class="uk-margin-small-left btn">
|
||||||
<font-awesome-icon class="uk-margin-small-right" :icon="['fab', 'youtube']"></font-awesome-icon>
|
<b>{{ $t("player.watch_on") }} </b>
|
||||||
</a>
|
<font-awesome-icon :icon="['fab', 'youtube']"></font-awesome-icon>
|
||||||
<a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="uk-margin-small-left btn">
|
</a>
|
||||||
<b>{{ $t("player.watch_on") }} LBRY</b>
|
<a
|
||||||
</a>
|
v-if="video.lbryId"
|
||||||
<router-link
|
:href="'https://odysee.com/' + video.lbryId"
|
||||||
:to="toggleListenUrl"
|
class="uk-margin-small-left btn"
|
||||||
:aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
|
>
|
||||||
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
|
<b>{{ $t("player.watch_on") }} LBRY</b>
|
||||||
class="uk-margin-small-left btn"
|
</a>
|
||||||
>
|
<router-link
|
||||||
<font-awesome-icon :icon="isListening ? 'tv' : 'headphones'"></font-awesome-icon>
|
:to="toggleListenUrl"
|
||||||
</router-link>
|
:aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
|
||||||
|
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
|
||||||
|
class="uk-margin-small-left btn"
|
||||||
|
>
|
||||||
|
<font-awesome-icon :icon="isListening ? 'tv' : 'headphones'"></font-awesome-icon>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="uk-flex uk-flex-middle uk-margin-small-top">
|
<div class="flex">
|
||||||
<img :src="video.uploaderAvatar" alt="" loading="lazy" class="rounded-full" />
|
<div class="flex items-center">
|
||||||
<router-link v-if="video.uploaderUrl" class="uk-link uk-margin-small-left" :to="video.uploaderUrl">
|
<img :src="video.uploaderAvatar" alt="" loading="lazy" class="rounded-full" />
|
||||||
{{ video.uploader }} </router-link
|
<router-link v-if="video.uploaderUrl" class="link" :to="video.uploaderUrl">
|
||||||
> <font-awesome-icon v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
|
{{ video.uploader }} </router-link
|
||||||
<div class="uk-flex-1"></div>
|
><font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
|
||||||
<button v-if="authenticated" class="btn" @click="subscribeHandler">
|
</div>
|
||||||
|
<button v-if="authenticated" class="btn relative ml-auto" @click="subscribeHandler">
|
||||||
{{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
|
{{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -78,7 +85,12 @@
|
||||||
{{ showDesc ? $t("actions.minimize_description") : $t("actions.show_description") }}
|
{{ showDesc ? $t("actions.minimize_description") : $t("actions.show_description") }}
|
||||||
</button>
|
</button>
|
||||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||||
<p v-show="showDesc" :style="[{ colour: foregroundColor }]" v-html="purifyHTML(video.description)"></p>
|
<p
|
||||||
|
v-show="showDesc"
|
||||||
|
class="break-words"
|
||||||
|
:style="[{ colour: foregroundColor }]"
|
||||||
|
v-html="purifyHTML(video.description)"
|
||||||
|
></p>
|
||||||
<div v-if="showDesc && sponsors && sponsors.segments">
|
<div v-if="showDesc && sponsors && sponsors.segments">
|
||||||
{{ $t("video.sponsor_segments") }}: {{ sponsors.segments.length }}
|
{{ $t("video.sponsor_segments") }}: {{ sponsors.segments.length }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -112,18 +124,17 @@
|
||||||
|
|
||||||
<div class="grid xl:grid-cols-5 sm:grid-cols-4 grid-cols-1">
|
<div class="grid xl:grid-cols-5 sm:grid-cols-4 grid-cols-1">
|
||||||
<div v-if="comments" ref="comments" class="xl:col-span-4 sm:col-span-3">
|
<div v-if="comments" ref="comments" class="xl:col-span-4 sm:col-span-3">
|
||||||
<div
|
<Comment
|
||||||
v-for="comment in comments.comments"
|
v-for="comment in comments.comments"
|
||||||
:key="comment.commentId"
|
:key="comment.commentId"
|
||||||
class="uk-tile-default uk-align-left uk-width-expand"
|
:comment="comment"
|
||||||
:style="[{ background: backgroundColor }]"
|
:uploader="video.uploader"
|
||||||
>
|
:video-id="getVideoId()"
|
||||||
<Comment :comment="comment" :uploader="video.uploader" :video-id="getVideoId()" />
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="video" class="uk-width-1-5@xl uk-width-1-4@s uk-width-1 uk-flex-last@s uk-flex-first">
|
<div v-if="video" class="order-first sm:order-last">
|
||||||
<a class="btn uk-margin-small-bottom sm:hidden" @click="showRecs = !showRecs">
|
<a class="btn mb-2 sm:hidden" @click="showRecs = !showRecs">
|
||||||
{{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
|
{{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
|
||||||
</a>
|
</a>
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue