Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2025-04-25 08:06:34 +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>
<!-- 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">
{{ $t("video.chapters") }} ({{ chapters.length }})
</h2>
@ -25,7 +25,7 @@
<!-- mobile vertical view -->
<div
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">
{{ $t("video.chapters") }} ({{ chapters.length }})

62
src/components/WatchVideo.vue
View File

@ -9,7 +9,7 @@
:is-embed="isEmbed"
/>
</div>
<div id="theaterModeSpot" class="-mx-1vw"></div>
<LoadingIndicatorPage :show-content="video && !isEmbed" class="w-full">
<ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
<Transition>
@ -17,21 +17,38 @@
<i18n-t keypath="info.next_video_countdown">{{ counter }}</i18n-t>
</ToastComponent>
</Transition>
<div class="flex gap-5 max-lg:flex-col">
<div class="flex gap-5">
<div class="flex-auto">
<div v-show="!video.error">
<keep-alive>
<VideoPlayer
ref="videoPlayer"
:video="video"
:sponsors="sponsors"
:selected-auto-play="selectedAutoPlay"
:selected-auto-loop="selectedAutoLoop"
@timeupdate="onTimeUpdate"
@ended="onVideoEnded"
@navigate-next="navigateNext"
/>
</keep-alive>
<Teleport defer to="#theaterModeSpot" :disabled="!theaterMode">
<div class="flex flex-row">
<keep-alive>
<VideoPlayer
ref="videoPlayer"
:video="video"
:sponsors="sponsors"
:selected-auto-play="selectedAutoPlay"
:selected-auto-loop="selectedAutoLoop"
@timeupdate="onTimeUpdate"
@ended="onVideoEnded"
@navigate-next="navigateNext"
/>
</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">
<ChaptersBar
v-if="video?.chapters?.length > 0 && showChapters"
@ -292,7 +309,7 @@
</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
v-if="video?.chapters?.length > 0 && showChapters"
:mobile-layout="isMobile"
@ -386,6 +403,7 @@ export default {
shouldShowToast: false,
timeoutCounter: null,
counter: 0,
theaterMode: false,
};
},
computed: {
@ -422,16 +440,10 @@ export default {
},
mounted() {
// check screen size
if (window.innerWidth >= 1024) {
this.isMobile = false;
}
this.isMobile = window.innerWidth < 1024;
// 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.isMobile = window.innerWidth < 1024;
});
this.getVideoData().then(() => {
(async () => {
@ -475,6 +487,10 @@ export default {
},
activated() {
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.showComments = !this.getPreferenceBoolean("minimizeComments", false);
this.showDesc = !this.getPreferenceBoolean("minimizeDescription", true);