Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2025-04-25 16:16:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add "Theater mode" (#3983)

Browse Source
This commit is contained in:
ac615223s5 2025-02-27 05:20:09 -05:00 committed by GitHub
parent ffb756736c
commit 7a9a1bf534
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ChaptersBar.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<!-- desktop view --> <!-- desktop view -->
<div v-if="!mobileLayout" class="max-h-75vh max-w-35vw min-h-64 flex-col overflow-y-scroll lt-lg:hidden"> <div v-if="!mobileLayout" class="max-h-75vh max-w-35vw min-h-64 flex-col overflow-y-auto lt-lg:hidden">
<h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters"> <h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
{{ $t("video.chapters") }} ({{ chapters.length }}) {{ $t("video.chapters") }} ({{ chapters.length }})
</h2> </h2>
@ -25,7 +25,7 @@
<!-- mobile vertical view --> <!-- mobile vertical view -->
<div <div
v-if="mobileLayout && getPreferenceString('mobileChapterLayout') == 'Vertical'" v-if="mobileLayout && getPreferenceString('mobileChapterLayout') == 'Vertical'"
class="max-h-64 flex flex-col overflow-y-scroll" class="max-h-64 flex flex-col overflow-y-auto"
> >
<h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters"> <h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
{{ $t("video.chapters") }} ({{ chapters.length }}) {{ $t("video.chapters") }} ({{ chapters.length }})

38
src/components/WatchVideo.vue
View File

@ -9,7 +9,7 @@
:is-embed="isEmbed" :is-embed="isEmbed"
/> />
</div> </div>
<div id="theaterModeSpot" class="-mx-1vw"></div>
<LoadingIndicatorPage :show-content="video && !isEmbed" class="w-full"> <LoadingIndicatorPage :show-content="video && !isEmbed" class="w-full">
<ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" /> <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
<Transition> <Transition>
@ -17,9 +17,11 @@
<i18n-t keypath="info.next_video_countdown">{{ counter }}</i18n-t> <i18n-t keypath="info.next_video_countdown">{{ counter }}</i18n-t>
</ToastComponent> </ToastComponent>
</Transition> </Transition>
<div class="flex gap-5 max-lg:flex-col"> <div class="flex gap-5">
<div class="flex-auto"> <div class="flex-auto">
<div v-show="!video.error"> <div v-show="!video.error">
<Teleport defer to="#theaterModeSpot" :disabled="!theaterMode">
<div class="flex flex-row">
<keep-alive> <keep-alive>
<VideoPlayer <VideoPlayer
ref="videoPlayer" ref="videoPlayer"
@ -32,6 +34,21 @@
@navigate-next="navigateNext" @navigate-next="navigateNext"
/> />
</keep-alive> </keep-alive>
<button
v-if="!isMobile"
:class="theaterMode ? '-ml-5' : '-mr-5'"
class="z-10"
@click="
theaterMode = !theaterMode;
setPreference('theaterMode', theaterMode);
"
>
<div
:class="theaterMode ? 'i-fa6-solid:chevron-left' : 'i-fa6-solid:chevron-right'"
></div>
</button>
</div>
</Teleport>
<div v-if="video && isMobile"> <div v-if="video && isMobile">
<ChaptersBar <ChaptersBar
v-if="video?.chapters?.length > 0 && showChapters" v-if="video?.chapters?.length > 0 && showChapters"
@ -292,7 +309,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="video && !isMobile" class="w-96 flex-none"> <div v-if="video && !isMobile" class="max-w-96 flex-none">
<ChaptersBar <ChaptersBar
v-if="video?.chapters?.length > 0 && showChapters" v-if="video?.chapters?.length > 0 && showChapters"
:mobile-layout="isMobile" :mobile-layout="isMobile"
@ -386,6 +403,7 @@ export default {
shouldShowToast: false, shouldShowToast: false,
timeoutCounter: null, timeoutCounter: null,
counter: 0, counter: 0,
theaterMode: false,
}; };
}, },
computed: { computed: {
@ -422,16 +440,10 @@ export default {
}, },
mounted() { mounted() {
// check screen size // check screen size
if (window.innerWidth >= 1024) { this.isMobile = window.innerWidth < 1024;
this.isMobile = false;
}
// add an event listener to watch for screen size changes // add an event listener to watch for screen size changes
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
if (window.innerWidth >= 1024) { this.isMobile = window.innerWidth < 1024;
this.isMobile = false;
} else {
this.isMobile = true;
}
}); });
this.getVideoData().then(() => { this.getVideoData().then(() => {
(async () => { (async () => {
@ -475,6 +487,10 @@ export default {
}, },
activated() { activated() {
this.active = true; this.active = true;
this.theaterMode = this.getPreferenceBoolean(
"theaterMode",
window.innerWidth < (window.innerHeight * 4) / 3 + 467, //if the video player is limited by width rather than height, then clear up some horizontal room
);
this.selectedAutoPlay = this.getPreferenceNumber("autoplay", 1); this.selectedAutoPlay = this.getPreferenceNumber("autoplay", 1);
this.showComments = !this.getPreferenceBoolean("minimizeComments", false); this.showComments = !this.getPreferenceBoolean("minimizeComments", false);
this.showDesc = !this.getPreferenceBoolean("minimizeDescription", true); this.showDesc = !this.getPreferenceBoolean("minimizeDescription", true);