[#64] Better fullscreen behavior

cpiber · Aug 8, 2024 · 5dd52b5 · 5dd52b5
1 parent f316e72
commit 5dd52b5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/src/scripts/page/dispatcher.ts b/src/scripts/page/dispatcher.ts
@@ -101,6 +101,8 @@ let currentlyloading: string = null;
 let loadInterval = 0;
 const navigate = (page: string, from: string, data: { [key: string]: any; } = {}) => {
   console.debug('Navigating to page', page, 'from', from);
+  document.body.parentElement.classList.remove(...Array.from(document.body.parentElement.classList).filter(x => x.startsWith('page-')));
+  document.body.parentElement.classList.add(`page-${page}`);
   const detail = clone({ detail: { page, from, ...data } });
   currentDetail = detail;
   document.dispatchEvent(new CustomEvent(navigatePrefix, detail));

diff --git a/src/styles/content.scss b/src/styles/content.scss
@@ -2,25 +2,34 @@
 @import './queue/queue';
 @import './queue/queue_share';
 
-html.enhancer-fullVideo {
-  #NebulaApp > :last-child {
-    z-index: 101;
+a[href='/videos/_dummy_episode_'] {
+  &,
+  & + div {
+    display: none;
   }
+}
 
+html.enhancer-fullVideo.page-video {
   #video-player {
-    position: fixed;
-    inset: 0;
-    z-index: 101;
-    max-width: unset;
-    max-height: unset;
-    margin: 0;
+    height: 100vh !important;
+    width: 100vw !important;
+    max-height: 100vh !important;
+    min-height: 100vh !important;
+    max-width: 100vw !important;
+    min-width: 100vw !important;
   }
-}
 
-a[href='/videos/_dummy_episode_'] {
-  &,
-  & + div {
-    display: none;
+  #NebulaApp > div:first-of-type {
+    position: absolute !important;
+    top: 100vh !important;
+  }
+
+  #NebulaApp > div:last-child {
+    margin-top: 0 !important;
+  }
+
+  [aria-label="video description"] {
+    margin-top: 96px;
   }
 }