Support desktop touchscreens for timelines (#11241)

* support desktop touchscreens

* remove placeholder select

* add max height to settings cameras dropdown

web/src/components/settings/General.tsx

@@ -1,14 +1,5 @@
 import Heading from "@/components/ui/heading";
 import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { useEffect } from "react";
 
@@ -24,22 +15,6 @@ export default function General() {
         <Switch id="lowdata" checked={false} onCheckedChange={() => {}} />
         <Label htmlFor="lowdata">Low Data Mode (this device only)</Label>
       </div>
-
-      <div className="flex items-center space-x-2 mt-5">
-        <Select>
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Another General Option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectLabel>Live Mode</SelectLabel>
-              <SelectItem value="jsmpeg">JSMpeg</SelectItem>
-              <SelectItem value="mse">MSE</SelectItem>
-              <SelectItem value="webrtc">WebRTC</SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      </div>
     </>
   );
 }

web/src/components/timeline/SummaryTimeline.tsx

@@ -9,7 +9,6 @@ import {
 import { SummarySegment } from "./SummarySegment";
 import { useTimelineUtils } from "@/hooks/use-timeline-utils";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
-import { isMobile } from "react-device-detect";
 
 export type SummaryTimelineProps = {
   reviewTimelineRef: RefObject<HTMLDivElement>;
@@ -188,7 +187,7 @@ export function SummaryTimeline({
       e.stopPropagation();
 
       let clientY;
-      if (isMobile && e.nativeEvent instanceof TouchEvent) {
+      if (e.nativeEvent instanceof TouchEvent) {
         clientY = e.nativeEvent.touches[0].clientY;
       } else if (e.nativeEvent instanceof MouseEvent) {
         clientY = e.nativeEvent.clientY;
@@ -239,7 +238,7 @@ export function SummaryTimeline({
       setIsDragging(true);
 
       let clientY;
-      if (isMobile && e.nativeEvent instanceof TouchEvent) {
+      if (e.nativeEvent instanceof TouchEvent) {
         clientY = e.nativeEvent.touches[0].clientY;
       } else if (e.nativeEvent instanceof MouseEvent) {
         clientY = e.nativeEvent.clientY;
@@ -277,7 +276,7 @@ export function SummaryTimeline({
         }
         e.stopPropagation();
         let clientY;
-        if (isMobile && e instanceof TouchEvent) {
+        if (e instanceof TouchEvent) {
           clientY = e.touches[0].clientY;
         } else if (e instanceof MouseEvent) {
           clientY = e.clientY;

web/src/hooks/use-draggable-element.ts

@@ -1,5 +1,4 @@
 import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
-import { isMobile } from "react-device-detect";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { useTimelineUtils } from "./use-timeline-utils";
 
@@ -88,7 +87,7 @@ function useDraggableElement({
   const getClientYPosition = useCallback(
     (e: MouseEvent | TouchEvent) => {
       let clientY;
-      if (isMobile && e instanceof TouchEvent) {
+      if (e instanceof TouchEvent) {
         clientY = e.touches[0].clientY;
       } else if (e instanceof MouseEvent) {
         clientY = e.clientY;
@@ -114,7 +113,7 @@ function useDraggableElement({
       setIsDragging(true);
 
       let clientY;
-      if (isMobile && e.nativeEvent instanceof TouchEvent) {
+      if (e.nativeEvent instanceof TouchEvent) {
         clientY = e.nativeEvent.touches[0].clientY;
       } else if (e.nativeEvent instanceof MouseEvent) {
         clientY = e.nativeEvent.clientY;

web/src/pages/Settings.tsx

@@ -237,7 +237,7 @@ function CameraSelectButton({
           <DropdownMenuSeparator />
         </>
       )}
-      <div className="h-auto p-4 mb-5 md:mb-1 overflow-y-auto overflow-x-hidden">
+      <div className="h-auto max-h-[80dvh] p-4 mb-5 md:mb-1 overflow-y-auto overflow-x-hidden">
         <div className="flex flex-col gap-2.5">
           {allCameras.map((item) => (
             <FilterSwitch

web/src/views/live/LiveCameraView.tsx

@@ -98,7 +98,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
 
       let clientX;
       let clientY;
-      if (isMobile && e.nativeEvent instanceof TouchEvent) {
+      if (e.nativeEvent instanceof TouchEvent) {
         clientX = e.nativeEvent.touches[0].clientX;
         clientY = e.nativeEvent.touches[0].clientY;
       } else if (e.nativeEvent instanceof MouseEvent) {