Timeline improvements (#16429)

* virtualize event segments

* use virtual segments in event review timeline

* add segmentkey to props

* virtualize motion segments

* use virtual segments in motion review timeline

* update draggable element hook to use only math

* timeline zooming hook

* add zooming to event review timeline

* update playground

* zoomable timeline on recording view

* consolidate divs in summary timeline

* only calculate motion data for visible motion segments

* use swr loading state

* fix motion only

* keep handlebar centered when zooming

* zoom animations

* clean up

* ensure motion only checks both halves of segment

* prevent handlebar jump when using motion only mode

web/tailwind.config.js

@@ -32,6 +32,8 @@ module.exports = {
         scale2: "scale2 3s ease-in-out infinite",
         scale3: "scale3 3s ease-in-out infinite",
         scale4: "scale4 3s ease-in-out infinite",
+        "timeline-zoom-in": "timeline-zoom-in 0.3s ease-out",
+        "timeline-zoom-out": "timeline-zoom-out 0.3s ease-out",
       },
       aspectRatio: {
         wide: "32 / 9",
@@ -140,6 +142,16 @@ module.exports = {
           "40%, 60%": { transform: "scale(1.4)" },
           "30%, 70%": { transform: "scale(1)" },
         },
+        "timeline-zoom-in": {
+          "0%": { transform: "translateY(0)", opacity: "1" },
+          "50%": { transform: "translateY(0%)", opacity: "0.5" },
+          "100%": { transform: "translateY(0)", opacity: "1" },
+        },
+        "timeline-zoom-out": {
+          "0%": { transform: "translateY(0)", opacity: "1" },
+          "50%": { transform: "translateY(0%)", opacity: "0.5" },
+          "100%": { transform: "translateY(0)", opacity: "1" },
+        },
       },
       screens: {
         xs: "480px",