From 3ec9407f6803468147b8a7a861a3b07ed019dfd3 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Tue, 15 Aug 2023 14:45:27 +0200
Subject: [PATCH 1/3] first test

---
 web/ts/stream-playlist.ts | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/web/ts/stream-playlist.ts b/web/ts/stream-playlist.ts
index e66f98581..87e9e3c70 100644
--- a/web/ts/stream-playlist.ts
+++ b/web/ts/stream-playlist.ts
@@ -19,11 +19,25 @@ 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
+        new IntersectionObserver((entries, observer) => {
+            entries.forEach(entry => {
+                if(entry.intersectionRatio > 0) {
+                    this.scrollSelectedIntoView()
+                    observer.disconnect();
+                }
+            });
+        }).observe(this.elem);
+
         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;

From 51710dd181ebd15b9220fcdb97571cf8a3b17855 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Tue, 15 Aug 2023 14:46:41 +0200
Subject: [PATCH 2/3] clearner code

---
 web/ts/stream-playlist.ts | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/web/ts/stream-playlist.ts b/web/ts/stream-playlist.ts
index 87e9e3c70..16b2a421b 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;
@@ -20,14 +31,7 @@ export class StreamPlaylist {
         this.elem.dispatchEvent(new CustomEvent("update", { detail: { list: this.list, prev, next } }));
 
         // if playlist is hidden and will be visible later
-        new IntersectionObserver((entries, observer) => {
-            entries.forEach(entry => {
-                if(entry.intersectionRatio > 0) {
-                    this.scrollSelectedIntoView()
-                    observer.disconnect();
-                }
-            });
-        }).observe(this.elem);
+        onVisible(this.elem, () => this.scrollSelectedIntoView());
 
         setTimeout(() => {
             this.scrollSelectedIntoView();

From ff3563f6ac7fdcd2c4d8dc47cfcf44f710bf705c Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Tue, 15 Aug 2023 14:57:24 +0200
Subject: [PATCH 3/3] lint fi

---
 web/ts/stream-playlist.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/ts/stream-playlist.ts b/web/ts/stream-playlist.ts
index 16b2a421b..c17d09d61 100644
--- a/web/ts/stream-playlist.ts
+++ b/web/ts/stream-playlist.ts
@@ -3,8 +3,8 @@ import { StreamPlaylistEntry } from "./data-store/stream-playlist";
 
 function onVisible(element, callback) {
     new IntersectionObserver((entries, observer) => {
-        entries.forEach(entry => {
-            if(entry.intersectionRatio > 0) {
+        entries.forEach((entry) => {
+            if (entry.intersectionRatio > 0) {
                 callback(element);
                 observer.disconnect();
             }