From b5cb432241bcf2eb8419efaa139432f7feee33af Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Wed, 13 Dec 2023 21:13:57 +0100
Subject: [PATCH] Add safe area to next episode button, clean up debugging
 stuff, disable thumbnails on Safari, fix lightbar on landscape

Co-authored-by: mrjvs <mistrjvs@gmail.com>
---
 .../player/atoms/NextEpisodeButton.tsx          |  2 +-
 .../player/internals/ThumbnailScraper.tsx       | 17 +++--------------
 src/components/utils/Lightbar.tsx               |  4 ++--
 3 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/src/components/player/atoms/NextEpisodeButton.tsx b/src/components/player/atoms/NextEpisodeButton.tsx
index cef4717b..8699d311 100644
--- a/src/components/player/atoms/NextEpisodeButton.tsx
+++ b/src/components/player/atoms/NextEpisodeButton.tsx
@@ -88,7 +88,7 @@ export function NextEpisodeButton(props: {
     <Transition
       animation={animation}
       show={show}
-      className="absolute right-12 bottom-0"
+      className="absolute right-[calc(3rem+env(safe-area-inset-right))] bottom-0"
     >
       <div
         className={classNames([
diff --git a/src/components/player/internals/ThumbnailScraper.tsx b/src/components/player/internals/ThumbnailScraper.tsx
index 82202f07..a86d2043 100644
--- a/src/components/player/internals/ThumbnailScraper.tsx
+++ b/src/components/player/internals/ThumbnailScraper.tsx
@@ -5,6 +5,7 @@ import { playerStatus } from "@/stores/player/slices/source";
 import { ThumbnailImage } from "@/stores/player/slices/thumbnails";
 import { usePlayerStore } from "@/stores/player/store";
 import { LoadableSource, selectQuality } from "@/stores/player/utils/qualities";
+import { isSafari } from "@/utils/detectFeatures";
 
 function makeQueue(layers: number): number[] {
   const output = [0, 1];
@@ -39,11 +40,9 @@ class ThumnbnailWorker {
   }
 
   start(source: LoadableSource) {
+    if (isSafari) return false;
     const el = document.createElement("video");
     el.setAttribute("muted", "true");
-    // ! Remove before merging
-    el.setAttribute("controls", "true");
-    el.setAttribute("playsinline", "true");
     const canvas = document.createElement("canvas");
     this.hls = new Hls();
     if (source.type === "mp4") {
@@ -69,8 +68,6 @@ class ThumnbnailWorker {
 
   private async initVideo() {
     if (!this.videoEl || !this.canvasEl) return;
-    // ! Remove before merging
-    document.body.appendChild(this.videoEl);
     await new Promise((resolve, reject) => {
       this.videoEl?.addEventListener("loadedmetadata", resolve);
       this.videoEl?.addEventListener("error", reject);
@@ -103,15 +100,6 @@ class ThumnbnailWorker {
     );
     const imgUrl = this.canvasEl.toDataURL();
 
-    // ! Remove before merging
-    const img = new Image();
-    img.src = imgUrl;
-    img.style.border = "1px solid yellow";
-    document.body.appendChild(img);
-    const p = document.createElement("p");
-    p.innerText = `${at}`;
-    document.body.appendChild(p);
-
     if (this.interrupted) return;
     if (imgUrl === "data:," || !imgUrl) return; // failed image rendering
 
@@ -163,6 +151,7 @@ export function ThumbnailScraper() {
     workerRef.current = ins;
     ins.start(inputStream.stream);
   }, [source, addImage, resetImages, status]);
+
   const startRef = useRef(start);
   useEffect(() => {
     startRef.current = start;
diff --git a/src/components/utils/Lightbar.tsx b/src/components/utils/Lightbar.tsx
index 59d4cac8..0949dad3 100644
--- a/src/components/utils/Lightbar.tsx
+++ b/src/components/utils/Lightbar.tsx
@@ -161,8 +161,8 @@ function ParticlesCanvas() {
 
 export function Lightbar(props: { className?: string }) {
   return (
-    <div className="absolute inset-0 w-full h-screen overflow-hidden pointer-events-none -mt-64">
-      <div className="max-w-screen w-full h-screen relative pt-64">
+    <div className="absolute inset-0 w-full h-[300vh] overflow-hidden pointer-events-none -mt-64">
+      <div className="max-w-screen w-full h-[300vh] relative pt-64">
         <div className={props.className}>
           <div className="lightbar">
             <ParticlesCanvas />