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

@@ -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

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;
+            if(this.scrollTo == -1)
-            this.scrollPosition = this.markersContainer.scrollTop;
+            {
+                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");
+                Menu.classList.remove("current");
-                var refs = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
+                var refs = Menu.querySelectorAll(".refs .ref");
                 for (var i = 0; i < refs.length; ++i) {
                     refs[i].classList.remove("current");
                 }