small fixes

- paginator shows correctly past - now - future
- uselayouteffect in pip
- scroll into view would crash if event was deleted

client/src/common/components/views/Paginator.jsx

@@ -53,6 +53,8 @@ export default function Paginator(props) {
     }
   }, SCROLL_TIME);
 
+  let selectedState = 0;
+
   return (
     <>
       <div className={style.nav}>
@@ -66,7 +68,7 @@ export default function Paginator(props) {
       </div>
       <div className={style.entries}>
         {page.map((e) => {
-          let selectedState = 0;
+          if (selectedState === 1) selectedState = 2;
           if (e.id === selected) selectedState = 1;
           else if (e.id > selected) selectedState = 2;
           return (

client/src/features/editors/list/EventList.jsx

@@ -77,6 +77,7 @@ export default function EventList(props) {
 
   // when cursor moves, view should follow
   useEffect(() => {
+    if (cursorRef.current == null) return;
     cursorRef.current.scrollIntoView({
       behavior: 'smooth',
       block: 'nearest',

client/src/features/viewers/production/Pip.jsx

@@ -3,7 +3,7 @@ import style from './Pip.module.css';
 import Paginator from 'common/components/views/Paginator';
 import NavLogo from 'common/components/nav/NavLogo';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { formatDisplay } from 'common/dateConfig';
 import { ReactComponent as Emptyimage } from 'assets/images/empty.svg';
 
@@ -14,7 +14,7 @@ export default function Pip(props) {
   const [filteredEvents, setFilteredEvents] = useState(null);
 
   // calculcate pip size
-  useEffect(() => {
+  useLayoutEffect(() => {
     const h = ref.current.clientHeight;
     const w = ref.current.clientWidth;
     setSize(`${w} x ${h}`);