From ee92bd6685851090ef2a5660b53ecdf87eb6c5ba Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Thu, 21 Sep 2023 13:31:32 +0200
Subject: [PATCH] playlist scroll pos (#1120)

* first test

* clearner code

* lint fi
---
 web/ts/stream-playlist.ts | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/ts/stream-playlist.ts b/web/ts/stream-playlist.ts
index 51075cfa2..c17d09d61 100644
--- a/web/ts/stream-playlist.ts
+++ b/web/ts/stream-playlist.ts
@@ -1,6 +1,17 @@
 import { DataStore } from "./data-store/data-store";
 import { StreamPlaylistEntry } from "./data-store/stream-playlist";
 
+function onVisible(element, callback) {
+    new IntersectionObserver((entries, observer) => {
+        entries.forEach((entry) => {
+            if (entry.intersectionRatio > 0) {
+                callback(element);
+                observer.disconnect();
+            }
+        });
+    }).observe(element);
+}
+
 export class StreamPlaylist {
     private streamId: number;
     private elem: HTMLElement;
@@ -19,11 +30,18 @@ export class StreamPlaylist {
         const { prev, next } = this.findNextAndPrev();
         this.elem.dispatchEvent(new CustomEvent("update", { detail: { list: this.list, prev, next } }));
 
+        // if playlist is hidden and will be visible later
+        onVisible(this.elem, () => this.scrollSelectedIntoView());
+
         setTimeout(() => {
-            this.elem.querySelector(".--selected")?.scrollIntoView({ block: "center" });
+            this.scrollSelectedIntoView();
         }, 10);
     }
 
+    public scrollSelectedIntoView() {
+        this.elem.querySelector(".--selected").scrollIntoView({ block: "center" });
+    }
+
     private findNextAndPrev(): { next: StreamPlaylistEntry; prev: StreamPlaylistEntry } {
         const streamIndex = this.list.findIndex((e) => e.streamId == this.streamId);
         const prevIndex = streamIndex - 1 >= 0 ? streamIndex - 1 : null;