From c6d728dd9cea87bb19d3a4d03197504b065d7333 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= Date: Wed, 27 Nov 2024 19:21:29 +0300 Subject: [PATCH] feat: remove canvas progress --- .../PlayerContols/CanvasProgressbar/index.tsx | 86 ------------------- 1 file changed, 86 deletions(-) delete mode 100644 src/components/mindset/components/PlayerContols/CanvasProgressbar/index.tsx diff --git a/src/components/mindset/components/PlayerContols/CanvasProgressbar/index.tsx b/src/components/mindset/components/PlayerContols/CanvasProgressbar/index.tsx deleted file mode 100644 index fd4200e2a..000000000 --- a/src/components/mindset/components/PlayerContols/CanvasProgressbar/index.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { Html, OrbitControls } from '@react-three/drei' -import { Canvas, useThree } from '@react-three/fiber' -import { useEffect, useState } from 'react' -import { Tooltip } from '~/components/common/ToolTip' -import { nodesWithTimestamp } from '~/components/mindset/data' -import { Marker } from '../../Marker' - -type Props = { - duration: number - progress: number -} - -const FullWidthZoom = ({ progressBarWidth }: { progressBarWidth: number }) => { - const { size, camera } = useThree() - const [minZoom, setMinZoom] = useState(camera.zoom) - - useEffect(() => { - // Calculate the minimum zoom based on the progress bar width and viewport size - const calculatedZoom = size.width / progressBarWidth - - setMinZoom(calculatedZoom) - camera.zoom = calculatedZoom - camera.updateProjectionMatrix() - }, [size, camera, progressBarWidth]) - - return -} - -export const ProgressBarCanvas = ({ duration, progress }: Props) => { - const progressBarWidth = 100 // Width of the progress bar in world units - - return ( - - - - - {/* Full Width Zoom Calculation */} - - - {/* Progress Bar */} - - {/* Full progress bar width */} - - - - {/* Progress */} - - - - - - {/* Markers */} - {nodesWithTimestamp.map((node) => { - const position = ((node.start || 0) / duration) * progressBarWidth - progressBarWidth / 2 - const type = node?.node_type || '' - - return ( - - {/* Marker size */} - - {/* Tooltip */} - -
- - - -
- - - ) - })} - - ) -}