From c9bf96c7aa87eedea3d35e0d5c57d963feea84a9 Mon Sep 17 00:00:00 2001
From: Matt Mascarenhas <admin@miblo.net>
Date: Mon, 20 Feb 2023 20:29:16 +0000
Subject: [PATCH] cinera_player_pre.js: Improve sizing and scrolling

This commit fixes the sizing of the player's menus to not protrude below
the player.

It also adds scrolling of the references menu to the first menu item
cited in the newly-current timestamp, and fixes scrolling of the markers
container when switching to a timestamp after the user has scrolled the
container away from its default position.
---
 cinera/cinera.c             |  2 +-
 cinera/cinera_player_pre.js | 48 ++++++++++++++++++++++++++++++-------
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/cinera/cinera.c b/cinera/cinera.c
index 58cba84..e6ab1e9 100644
--- a/cinera/cinera.c
+++ b/cinera/cinera.c
@@ -23,7 +23,7 @@ typedef struct
 version CINERA_APP_VERSION = {
     .Major = 0,
     .Minor = 10,
-    .Patch = 23
+    .Patch = 24
 };
 
 #define __USE_XOPEN2K8 // NOTE(matt): O_NOFOLLOW
diff --git a/cinera/cinera_player_pre.js b/cinera/cinera_player_pre.js
index 98adc52..b67f9a3 100644
--- a/cinera/cinera_player_pre.js
+++ b/cinera/cinera_player_pre.js
@@ -69,6 +69,8 @@ function Player(htmlContainer, refsCallback) {
     this.currentTime = -1;
     this.scrollTo = -1;
     this.scrollPosition = 0;
+    this.scrollRefsTo = -1;
+    this.scrollRefsPosition = 0;
     this.nextFrame = null;
     this.looping = false;
 
@@ -577,7 +579,7 @@ Player.prototype.updateSize = function() {
         this.markersContainer.style.height = height + "px";
 
         var VacantPixelsBelowMenus = 4;
-        var MenuMaxHeight = cinera.offsetHeight - titleBar.offsetHeight - VacantPixelsBelowMenus;
+        var MenuMaxHeight = height - VacantPixelsBelowMenus;
         MenuContainerRule.style.maxHeight = MenuMaxHeight + "px";
     }
     else
@@ -729,8 +731,11 @@ Player.prototype.updateProgress = function() {
                 localStorage.setItem(lastTimestampStorageItem, this.currentMarker.timestamp);
             }
             this.currentMarker.el.classList.add("current");
-            this.scrollTo = this.currentMarker.el.offsetTop + this.currentMarker.el.offsetHeight/2.0;
-            this.scrollPosition = this.markersContainer.scrollTop;
+            if(this.scrollTo == -1)
+            {
+                this.scrollTo = this.currentMarker.el.offsetTop + this.currentMarker.el.offsetHeight/2.0;
+                this.scrollPosition = this.markersContainer.scrollTop;
+            }
             this.refsCallback(this.currentMarker.ref, this.currentMarker.el, this);
         } else if (prevMarker && prevMarker.ref) {
             this.refsCallback(null);
@@ -776,6 +781,18 @@ Player.prototype.doFrame = function() {
         }
     }
 
+    if(referencesMenu && this.scrollRefsTo >= 0) {
+        var targetRefsPosition = this.scrollRefsTo;
+        targetRefsPosition = Math.max(0, Math.min(targetRefsPosition, referencesMenu.scrollHeight - referencesMenu.offsetHeight));
+        this.scrollRefsPosition += (targetRefsPosition - this.scrollRefsPosition) * 0.1;
+        if (Math.abs(this.scrollRefsPosition - targetRefsPosition) < 1.0) {
+            referencesMenu.scrollTop = targetRefsPosition;
+            this.scrollRefsTo = -1;
+        } else {
+            referencesMenu.scrollTop = this.scrollRefsPosition;
+        }
+    }
+
     this.nextFrame = requestAnimationFrame(this.doFrame.bind(this));
     updateLink();
 };
@@ -2093,28 +2110,43 @@ function onRefChanged(ref, element, player) {
     {
         for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex)
         {
+            var Menu = sourceMenus[MenuIndex];
             var SetMenu = 0;
             if (ref !== undefined && ref !== null) {
-                var refElements = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
+                var refElements = Menu.querySelectorAll(".refs .ref");
                 var refs = ref.split(",");
 
                 for (var i = 0; i < refElements.length; ++i) {
                     if (refs.includes(refElements[i].getAttribute("data-id"))) {
                         refElements[i].classList.add("current");
+                        if(!SetMenu)
+                        {
+                            if(!referencesMenu.classList.contains("visible"))
+                            {
+                                referencesMenu.classList.add("visible");
+                                referencesMenu.scrollTop = refElements[i].offsetTop;
+                                referencesMenu.classList.remove("visible");
+                            }
+                            else
+                            {
+                                player.scrollRefsTo = refElements[i].offsetTop;
+                                player.scrollRefsPosition = referencesMenu.scrollTop;
+                            }
+                        }
                         SetMenu = 1;
                     } else {
                         refElements[i].classList.remove("current");
                     }
                 }
                 if(SetMenu) {
-                    sourceMenus[MenuIndex].classList.add("current");
+                    Menu.classList.add("current");
                 } else {
-                    sourceMenus[MenuIndex].classList.remove("current");
+                    Menu.classList.remove("current");
                 }
 
             } else {
-                sourceMenus[MenuIndex].classList.remove("current");
-                var refs = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
+                Menu.classList.remove("current");
+                var refs = Menu.querySelectorAll(".refs .ref");
                 for (var i = 0; i < refs.length; ++i) {
                     refs[i].classList.remove("current");
                 }