diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx index 65be4bb6c..0e5278b34 100644 --- a/web/src/views/live/LiveCameraView.tsx +++ b/web/src/views/live/LiveCameraView.tsx @@ -88,11 +88,7 @@ import { MdPhotoCamera, } from "react-icons/md"; import { Link, useNavigate } from "react-router-dom"; -import { - TransformWrapper, - TransformComponent, - ReactZoomPanPinchRef, -} from "react-zoom-pan-pinch"; +import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; import useSWR from "swr"; import { cn } from "@/lib/utils"; import { useSessionPersistence } from "@/hooks/use-session-persistence"; @@ -128,11 +124,7 @@ import { import ActivityIndicator from "@/components/indicators/activity-indicator"; import { createLiveZoomWrapperProps, - getCursorRelativeZoomTransform, getLiveZoomTransformStyles, - LIVE_ZOOM_MAX_SCALE, - LIVE_ZOOM_MIN_SCALE, - LIVE_ZOOM_SHIFT_WHEEL_STEP, } from "@/views/live/liveZoom"; type LiveCameraViewProps = { @@ -154,7 +146,6 @@ export default function LiveCameraView({ const { isPortrait } = useMobileOrientation(); const mainRef = useRef(null); const containerRef = useRef(null); - const zoomRef = useRef(null); const [{ width: windowWidth, height: windowHeight }] = useResizeObserver(window); @@ -449,47 +440,8 @@ export default function LiveCameraView({ [config, webRTC], ); - const handlePlayerWheel = useCallback( - (e: React.WheelEvent) => { - if (!e.shiftKey || !zoomRef.current) { - return; - } - - const transformState = zoomRef.current.instance.transformState; - const zoomStep = - e.deltaY < 0 ? LIVE_ZOOM_SHIFT_WHEEL_STEP : -LIVE_ZOOM_SHIFT_WHEEL_STEP; - const nextScale = Math.min( - LIVE_ZOOM_MAX_SCALE, - Math.max(LIVE_ZOOM_MIN_SCALE, transformState.scale + zoomStep), - ); - - if (nextScale === transformState.scale) { - return; - } - - e.preventDefault(); - - const rect = e.currentTarget.getBoundingClientRect(); - const nextTransform = getCursorRelativeZoomTransform( - transformState, - { - x: e.clientX - rect.left, - y: e.clientY - rect.top, - }, - nextScale, - ); - - zoomRef.current.setTransform( - nextTransform.positionX, - nextTransform.positionY, - nextTransform.scale, - ); - }, - [], - ); - return ( - +
{!debug ? (
- +
; export type LiveZoomTransformStyles = { @@ -19,76 +19,37 @@ export const LIVE_ZOOM_WHEEL_CONFIG: NonNullable< smoothStep: 0.005, }; -export const LIVE_ZOOM_SHIFT_WHEEL_STEP = 0.1; -export const LIVE_ZOOM_MIN_SCALE = 1; -export const LIVE_ZOOM_MAX_SCALE = 5; - -type LiveZoomTransformState = { - positionX: number; - positionY: number; - scale: number; -}; - -type LiveZoomPoint = { - x: number; - y: number; -}; - -export function getCursorRelativeZoomTransform( - transformState: LiveZoomTransformState, - cursorPoint: LiveZoomPoint, - nextScale: number, -): LiveZoomTransformState { - const scaleRatio = nextScale / transformState.scale; - - return { - scale: nextScale, - positionX: - cursorPoint.x - (cursorPoint.x - transformState.positionX) * scaleRatio, - positionY: - cursorPoint.y - (cursorPoint.y - transformState.positionY) * scaleRatio, +const LIVE_ZOOM_TRANSFORM_STYLES: Record = + { + player: { + wrapperStyle: { + width: "100%", + height: "100%", + }, + contentStyle: { + position: "relative", + width: "100%", + height: "100%", + padding: "8px", + }, + }, + debug: { + wrapperStyle: { + width: "100%", + height: "100%", + }, + contentStyle: { + position: "relative", + width: "100%", + height: "100%", + }, + }, }; -} -const LIVE_ZOOM_TRANSFORM_STYLES: Record< - LiveZoomMode, - LiveZoomTransformStyles -> = { - player: { - wrapperStyle: { - width: "100%", - height: "100%", - }, - contentStyle: { - position: "relative", - width: "100%", - height: "100%", - padding: "8px", - }, - }, - debug: { - wrapperStyle: { - width: "100%", - height: "100%", - }, - contentStyle: { - position: "relative", - width: "100%", - height: "100%", - }, - }, -}; - -export function createLiveZoomWrapperProps( - disabled: boolean, -): LiveZoomWrapperProps { +export function createLiveZoomWrapperProps(disabled: boolean): LiveZoomWrapperProps { return { - minScale: LIVE_ZOOM_MIN_SCALE, - maxScale: LIVE_ZOOM_MAX_SCALE, - wheel: { - ...LIVE_ZOOM_WHEEL_CONFIG, - disabled: true, - }, + minScale: 1, + wheel: LIVE_ZOOM_WHEEL_CONFIG, disabled, }; }