mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-26 23:47:25 +00:00
Merge pull request #1176 from kskarthik/master
refactor: align video info items responsively
This commit is contained in:
Kavin
GitHub
commit
bf05af4843
@ -14,7 +14,7 @@
|
|||||||
<span class="mt-5 mr-2 text-current" v-text="index + 1" />
|
<span class="mt-5 mr-2 text-current" v-text="index + 1" />
|
||||||
<img :src="chapter.image" :alt="chapter.title" />
|
<img :src="chapter.image" :alt="chapter.title" />
|
||||||
<div class="flex flex-col m-2">
|
<div class="flex flex-col m-2">
|
||||||
<span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
|
<span class="text-sm" :title="chapter.title" v-text="chapter.title" />
|
||||||
<span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
|
<span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -176,7 +176,7 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
short() {
|
short() {
|
||||||
return this.video.duration > 0 && this.video.duration <= 60;
|
return this.video.duration > 0 && this.video.duration <= 61;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: { PlaylistAddModal },
|
components: { PlaylistAddModal },
|
||||||
|
|||||||
@ -33,13 +33,17 @@
|
|||||||
@seek="navigate"
|
@seek="navigate"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- video title -->
|
||||||
<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 mb-1.5">
|
<!-- views / date -->
|
||||||
|
<div class="flex flex-auto children:ml-2">
|
||||||
<span v-t="{ path: 'video.views', args: { views: addCommas(video.views) } }" />
|
<span v-t="{ path: 'video.views', args: { views: addCommas(video.views) } }" />
|
||||||
<span class="ml-2" v-text="uploadDate" />
|
<span> | </span>
|
||||||
|
<span v-text="uploadDate" />
|
||||||
<div class="flex items-center relative ml-auto children:ml-2">
|
</div>
|
||||||
|
<!-- Likes/dilikes -->
|
||||||
|
<div class="flex children:mr-2">
|
||||||
<template v-if="video.likes >= 0">
|
<template v-if="video.likes >= 0">
|
||||||
<div>
|
<div>
|
||||||
<font-awesome-icon icon="thumbs-up" />
|
<font-awesome-icon icon="thumbs-up" />
|
||||||
@ -55,25 +59,9 @@
|
|||||||
<strong v-t="'video.ratings_disabled'" />
|
<strong v-t="'video.ratings_disabled'" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<a :href="`https://youtu.be/${getVideoId()}`" class="btn">
|
|
||||||
<i18n-t keypath="player.watch_on" tag="strong">
|
|
||||||
<font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
|
|
||||||
</i18n-t>
|
|
||||||
</a>
|
|
||||||
<a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn">
|
|
||||||
<i18n-t keypath="player.watch_on" tag="strong">LBRY</i18n-t>
|
|
||||||
</a>
|
|
||||||
<router-link
|
|
||||||
:to="toggleListenUrl"
|
|
||||||
:aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
|
|
||||||
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
|
|
||||||
class="btn"
|
|
||||||
>
|
|
||||||
<font-awesome-icon :icon="isListening ? 'tv' : 'headphones'" />
|
|
||||||
</router-link>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Channel info & options flex container -->
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<!-- Channel Image & Info -->
|
<!-- Channel Image & Info -->
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
@ -83,17 +71,6 @@
|
|||||||
}}</router-link>
|
}}</router-link>
|
||||||
<!-- 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" />
|
||||||
<!-- RSS Feed button -->
|
|
||||||
<a
|
|
||||||
aria-label="RSS feed"
|
|
||||||
title="RSS feed"
|
|
||||||
role="button"
|
|
||||||
v-if="video.uploaderUrl"
|
|
||||||
:href="`https://www.youtube.com/feeds/videos.xml?channel_id=${video.uploaderUrl.split('/')[2]}`"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<font-awesome-icon class="ml-3" icon="rss" />
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="relative ml-auto children:mx-2">
|
<div class="relative ml-auto children:mx-2">
|
||||||
<button class="btn" v-if="authenticated" @click="showModal = !showModal">
|
<button class="btn" v-if="authenticated" @click="showModal = !showModal">
|
||||||
@ -110,6 +87,47 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" />
|
<PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" />
|
||||||
|
<div class="flex <lg:basis-7/12">
|
||||||
|
<div class="self-center children:mr-1">
|
||||||
|
<!-- RSS Feed button -->
|
||||||
|
<a
|
||||||
|
aria-label="RSS feed"
|
||||||
|
title="RSS feed"
|
||||||
|
role="button"
|
||||||
|
v-if="video.uploaderUrl"
|
||||||
|
:href="`https://www.youtube.com/feeds/videos.xml?channel_id=${
|
||||||
|
video.uploaderUrl.split('/')[2]
|
||||||
|
}`"
|
||||||
|
target="_blank"
|
||||||
|
class="btn flex-col"
|
||||||
|
>
|
||||||
|
<font-awesome-icon icon="rss" />
|
||||||
|
</a>
|
||||||
|
<!-- watch on youtube button -->
|
||||||
|
<a :href="`https://youtu.be/${getVideoId()}`" class="btn <lg:hidden">
|
||||||
|
<i18n-t keypath="player.watch_on" tag="strong">
|
||||||
|
<font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
|
||||||
|
</i18n-t>
|
||||||
|
</a>
|
||||||
|
<!-- only visible on small screens -->
|
||||||
|
<a :href="`https://youtu.be/${getVideoId()}`" class="btn sm:hidden">
|
||||||
|
<font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
|
||||||
|
</a>
|
||||||
|
<!-- LBRY -->
|
||||||
|
<a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn">
|
||||||
|
<i18n-t keypath="player.watch_on" tag="strong">LBRY</i18n-t>
|
||||||
|
</a>
|
||||||
|
<!-- listen / watch toggle -->
|
||||||
|
<router-link
|
||||||
|
:to="toggleListenUrl"
|
||||||
|
:aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
|
||||||
|
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
|
||||||
|
class="btn flex-col"
|
||||||
|
>
|
||||||
|
<font-awesome-icon :icon="isListening ? 'tv' : 'headphones'" />
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user