TeamPiped-mirror
/
Piped
mirror of https://github.com/TeamPiped/Piped.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update ChaptersBar.vue

This commit is contained in:
Dragos 2022-09-05 20:32:02 +03:00 committed by GitHub
parent eccec259ad
commit 42f38a67f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/ChaptersBar.vue
View File

@ -1,64 +1,51 @@
<template> <template>
<!-- desktop view --> <!-- desktop view -->
<div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-h-75vh min-h-64 lt-lg:hidden"> <div v-if="!mobileLayout" class="pp-chapters flex-col overflow-y-scroll max-h-75vh min-h-64 lt-lg:hidden">
<h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters"> <h6 aria-label="chapters" title="chapters">{{ $t("video.chapters") }} - {{ chapters.length }}</h6>
{{ $t("video.chapters") }} ({{ chapters.length }})
</h2>
<div <div
:key="chapter.start" :key="chapter.start"
v-for="(chapter, index) in chapters" v-for="(chapter, index) in chapters"
@click="$emit('seek', chapter.start)" @click="$emit('seek', chapter.start)"
class="chapter-vertical" class="chapter efy_anim_pulse"
:class="{ 'bg-red-500/50': isCurrentChapter(index) }" :class="{ 'pp-chapter-active': isCurrentChapter(index) }"
> >
<div class="flex"> <div class="flex">
<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-sm" :title="chapter.title" v-text="chapter.title" /> <span :title="chapter.title" v-text="index + 1 + '. ' + chapter.title" class="font-bold" />
<span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" /> <span class="font-bold" v-text="timeFormat(chapter.start)" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- mobile view --> <!-- mobile view -->
<div v-else class="flex overflow-x-auto"> <div v-else class="pp-chapters pp-mobile flex overflow-x-auto">
<div <div
:key="chapter.start" :key="chapter.start"
v-for="(chapter, index) in chapters" v-for="(chapter, index) in chapters"
@click="$emit('seek', chapter.start)" @click="$emit('seek', chapter.start)"
class="chapter" class="chapter efy_anim_pulse"
:class="{ 'bg-red-500/50': isCurrentChapter(index) }" :class="{ 'pp-chapter-active': isCurrentChapter(index) }"
> >
<img :src="chapter.image" :alt="chapter.title" /> <img :src="chapter.image" :alt="chapter.title" />
<div class="m-1 flex"> <div class="m-1 flex">
<span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" /> <span class="text-truncate font-bold" :title="chapter.title" v-text="chapter.title" />
<span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" /> <span class="px-1 font-bold" v-text="timeFormat(chapter.start)" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style> <style>
::-webkit-scrollbar {
height: 5px;
}
.chapter { .chapter {
@apply cursor-pointer self-center p-2.5; @apply cursor-pointer self-center p-2.5;
} }
.chapter img { .pp-mobile .chapter img {
@apply w-full h-full; @apply w-full h-full;
} }
.chapter-vertical { .chapter img {
@apply cursor-pointer self-center p-2.5;
}
.chapter-vertical img {
@apply w-3/10 h-3/10; @apply w-3/10 h-3/10;
} }
.chapter-vertical:hover {
@apply bg-gray-500;
}
.text-truncate { .text-truncate {
@apply truncate overflow-hidden inline-block w-10em; @apply truncate overflow-hidden inline-block w-10em;
} }