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

Merge pull request #1138 from kskarthik/master

Browse source 
New video chapters layout
This commit is contained in:
Kavin 2022-06-17 13:04:50 +01:00 committed by GitHub
commit a2b191c6b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/ChaptersBar.vue
View file

@ -1,18 +1,35 @@
<template> <template>
<h2 v-t="'video.chapters'" /> <!-- <h2 v-t="'video.chapters'" class="mb-5" /> -->
<div class="flex overflow-x-auto">
<div :key="chapter.start" v-for="chapter in chapters" @click="$emit('seek', chapter.start)" class="chapter"> <div :key="chapter.start" v-for="chapter in chapters" @click="$emit('seek', chapter.start)" class="chapter">
<img :src="chapter.image" :alt="chapter.title" class="h-12" /> <img :src="chapter.image" :alt="chapter.title" class="" />
<div class="ml-1"> <div class="m-1 flex">
<span class="text-xl" v-text="chapter.title" /> <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
<br /> <span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
<span class="text-sm" v-text="timeFormat(chapter.start)" /> </div>
</div> </div>
</div> </div>
</template> </template>
<style> <style>
::-webkit-scrollbar {
height: 5px;
}
.chapter { .chapter {
@apply flex items-center mb-2 cursor-pointer w-sm max-w-90vw; @apply cursor-pointer;
align-self: center;
padding: 10px;
img {
width: 100%;
height: 100%;
}
}
.text-truncate {
white-space: nowrap;
width: 10em;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
} }
</style> </style>

2
src/components/WatchVideo.vue
View file

@ -25,6 +25,7 @@
:selected-auto-play="selectedAutoPlay" :selected-auto-play="selectedAutoPlay"
:selected-auto-loop="selectedAutoLoop" :selected-auto-loop="selectedAutoLoop"
/> />
<ChaptersBar v-if="video?.chapters?.length > 0" :chapters="video.chapters" @seek="navigate" />
<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 mb-1.5"> <div class="flex mb-1.5">
@ -100,7 +101,6 @@
/> />
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<div v-show="showDesc" class="break-words" v-html="purifyHTML(video.description)" /> <div v-show="showDesc" class="break-words" v-html="purifyHTML(video.description)" />
<ChaptersBar v-if="video?.chapters?.length > 0" :chapters="video.chapters" @seek="navigate" />
<div <div
v-if="showDesc && sponsors && sponsors.segments" v-if="showDesc && sponsors && sponsors.segments"
v-text="`${$t('video.sponsor_segments')}: ${sponsors.segments.length}`" v-text="`${$t('video.sponsor_segments')}: ${sponsors.segments.length}`"