Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-30 18:43:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1149 from kskarthik/revamp-chapters

Browse Source 
Revamp chapters for desktop view
This commit is contained in:
Kavin 2022-06-24 23:30:30 +01:00 committed by GitHub
commit 5be93d23a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 68 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/ChaptersBar.vue
View File

@ -1,14 +1,32 @@
<template>
<!-- <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">
<img :src="chapter.image" :alt="chapter.title" class="" />
<div class="m-1 flex">
<!-- desktop view -->
<div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-h-75vh min-h-64 <lg:hidden">
<h2 v-t="'video.chapters'" class="mb-2 bg-gray-500/50 p-2" />
<div
:key="chapter.start"
v-for="chapter in chapters"
@click="$emit('seek', chapter.start)"
class="chapter-vertical"
>
<div class="flex">
<img :src="chapter.image" :alt="chapter.title" />
<div class="flex flex-col m-2">
<span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
<span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
</div>
</div>
</div>
</div>
<!-- mobile view -->
<div v-else class="flex overflow-x-auto">
<div :key="chapter.start" v-for="chapter in chapters" @click="$emit('seek', chapter.start)" class="chapter">
<img :src="chapter.image" :alt="chapter.title" />
<div class="m-1 flex">
<span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
<span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
</div>
</div>
</div>
</template>
<style>
@ -16,20 +34,22 @@
height: 5px;
}
.chapter {
@apply cursor-pointer;
align-self: center;
padding: 10px;
@apply cursor-pointer self-center p-2.5;
img {
width: 100%;
height: 100%;
@apply w-full h-full;
}
}
.chapter-vertical {
@apply cursor-pointer self-center p-2.5;
img {
@apply w-3/10 h-3/10;
}
}
.chapter-vertical:hover {
@apply bg-gray-500;
}
.text-truncate {
white-space: nowrap;
width: 10em;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
@apply truncate overflow-hidden inline-block w-10em;
}
</style>
@ -38,6 +58,10 @@ import { defineProps, defineEmits } from "vue";
defineProps({
chapters: Object,
mobileLayout: {
type: Boolean,
default: () => true,
},
});
defineEmits(["seek"]);

22
src/components/WatchVideo.vue
View File

@ -16,6 +16,7 @@
<ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
<div v-show="!video.error">
<div :class="isMobile ? 'flex-col' : 'flex'">
<VideoPlayer
ref="videoPlayer"
:video="video"
@ -25,7 +26,13 @@
:selected-auto-play="selectedAutoPlay"
:selected-auto-loop="selectedAutoLoop"
/>
<ChaptersBar v-if="video?.chapters?.length > 0" :chapters="video.chapters" @seek="navigate" />
<ChaptersBar
:mobileLayout="isMobile"
v-if="video?.chapters?.length > 0"
:chapters="video.chapters"
@seek="navigate"
/>
</div>
<div class="font-bold mt-2 text-2xl break-words" v-text="video.title" />
<div class="flex mb-1.5">
@ -203,6 +210,7 @@ export default {
smallViewQuery: smallViewQuery,
smallView: smallViewQuery.matches,
showModal: false,
isMobile: true,
};
},
computed: {
@ -226,6 +234,18 @@ export default {
},
},
mounted() {
// check screen size
if (window.innerWidth >= 1024) {
this.isMobile = false;
}
// add an event listener to watch for screen size changes
window.addEventListener("resize", () => {
if (window.innerWidth >= 1024) {
this.isMobile = false;
} else {
this.isMobile = true;
}
});
this.getVideoData().then(() => {
(async () => {
const videoId = this.getVideoId();