Spaces:
Running
Running
File size: 1,964 Bytes
6ce4ca6 3165745 6ce4ca6 3cdf7b9 6ce4ca6 3cdf7b9 6ce4ca6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<script lang="ts">
import { T } from "@threlte/core";
import Video from "./Video.svelte";
import VideoStatusBillboard from "./status/VideoStatusBillboard.svelte";
import type { VideoInstance, VideoStatus } from "$lib/elements/video/VideoManager.svelte";
import { interactivity, type IntersectionEvent, useCursor } from "@threlte/extras";
interface Props {
video: VideoInstance;
workspaceId: string;
onCameraMove: () => void;
onInputBoxClick: (video: VideoInstance) => void;
onOutputBoxClick: (video: VideoInstance) => void;
}
let { video, workspaceId, onCameraMove, onInputBoxClick, onOutputBoxClick }: Props = $props();
const { onPointerEnter, onPointerLeave } = useCursor();
interactivity();
let isToggled = $state(false);
let hovering = $state(false);
function handleStatusToggle(event: IntersectionEvent<MouseEvent>) {
event.stopPropagation();
isToggled = !isToggled;
}
</script>
<T.Group
position.x={video.position.x}
position.y={video.position.y + 1}
position.z={video.position.z}
scale={[1, 1, 1]}
>
<T.Group
onpointerenter={(event: IntersectionEvent<PointerEvent>) => {
event.stopPropagation();
onPointerEnter();
hovering = true;
}}
onpointerover={(event: IntersectionEvent<PointerEvent>) => {
event.stopPropagation();
onPointerEnter();
hovering = true;
}}
onpointerout={(event: IntersectionEvent<PointerEvent>) => {
event.stopPropagation();
onPointerLeave();
hovering = false;
}}
onpointerleave={(event: IntersectionEvent<PointerEvent>) => {
event.stopPropagation();
onPointerLeave();
hovering = false;
}}
onclick={handleStatusToggle}
>
<Video videoInstance={video} {workspaceId} />
</T.Group>
<T.Group scale={[10, 10, 10]} rotation={[-Math.PI / 2, 0, 0]}>
<VideoStatusBillboard
{video}
offset={0.2}
{onInputBoxClick}
{onOutputBoxClick}
visible={isToggled}
/>
</T.Group>
<!-- Status billboard positioned above the video -->
</T.Group>
|