UI Fixes (#9177)

* Fix mobile crash

* Reduce tap timeout

* Fix selection

* Try to fix safari empty frame

* Fix config editor

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -186,8 +186,8 @@ function PreviewContent({
 
       const touchEnd = new Date().getTime();
 
-      // consider tap less than 300 ms
-      if (touchEnd - touchStart < 300) {
+      // consider tap less than 100 ms
+      if (touchEnd - touchStart < 100) {
         onClick();
       }
     });

web/src/pages/ConfigEditor.tsx

@@ -122,7 +122,7 @@ function ConfigEditor() {
   }
 
   return (
-    <div className="absolute h-[70%] w-[96%] md:h-[85%] md:w-[88%]">
+    <div className="absolute top-24 bottom-16 right-0 left-0 md:left-24 lg:left-40">
       <div className="lg:flex justify-between mr-1">
         <Heading as="h2">Config</Heading>
         <div>

web/src/views/history/MobileTimelineView.tsx

@@ -203,7 +203,7 @@ export default function MobileTimelineView({
             <VideoPlayer
               options={{
                 preload: "auto",
-                autoplay: false,
+                autoplay: true,
                 controls: false,
                 muted: true,
                 loadingSpinner: false,
@@ -217,6 +217,7 @@ export default function MobileTimelineView({
               seekOptions={{}}
               onReady={(player) => {
                 previewRef.current = player;
+                player.pause();
                 player.on("seeked", () => setSeeking(false));
               }}
               onDispose={() => {
@@ -251,7 +252,8 @@ export default function MobileTimelineView({
             timechangedHandler={onStopScrubbing}
             selectHandler={(data) => {
               if (data.items.length > 0) {
-                const selected = data.items[0];
+                const selected = parseFloat(data.items[0].split("-")[0]);
+
                 onSelectItem(
                   playback.timelineItems.find(
                     (timeline) => timeline.timestamp == selected
@@ -267,9 +269,9 @@ export default function MobileTimelineView({
 }
 
 function timelineItemsToScrubber(items: Timeline[]): ScrubberItem[] {
-  return items.map((item) => {
+  return items.map((item, idx) => {
     return {
-      id: item.timestamp,
+      id: `${item.timestamp}-${idx}`,
       content: getTimelineContentElement(item),
       start: new Date(item.timestamp * 1000),
       end: new Date(item.timestamp * 1000),