Hugging Face's logo

Spaces:
blanchon
/
RobotHub-Frontend
Running

App Files
xet
Community
RobotHub-Frontend
File size: 2,030 Bytes 
6ce4ca6
 
 
 
 
3165745
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
74
75
76
77
 
<script lang="ts">
	import { T } from "@threlte/core";
	import { Billboard, interactivity } from "@threlte/extras";
	import { Root, Container } from "threlte-uikit";
	import VideoConnectionFlowBoxUIKit from "./VideoConnectionFlowBoxUIKit.svelte";
	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";

	interface Props {
		video: VideoInstance;
		offset?: number;
		visible?: boolean;
		onInputBoxClick: (video: VideoInstance) => void;
		onOutputBoxClick: (video: VideoInstance) => void;
	}

	let { video, offset = 10, visible = true, onInputBoxClick, onOutputBoxClick }: Props = $props();

	interactivity();
</script>

{#if visible}
	<T.Group
		onpointerdown={(e) => e.stopPropagation()}
		onpointerup={(e) => e.stopPropagation()}
		onpointermove={(e) => e.stopPropagation()}
		onclick={(e) => e.stopPropagation()}
		position.z={0.22}
		padding={10}
		rotation={[Math.PI / 2, 0, 0]}
		scale={[0.12, 0.12, 0.12]}
		pointerEvents="listener"
	>
		<Billboard>
			<Root name={`video-status-billboard-${video.id}`}>
				<Container
					width="100%"
					height="100%"
					alignItems="center"
					justifyContent="center"
					padding={20}
				>
					<VideoConnectionFlowBoxUIKit {video} {onInputBoxClick} {onOutputBoxClick} />
				</Container>
			</Root>
		</Billboard>

		<!-- <Billboard>
		<HTML
			transform
			autoRender={true}
			center={true}
			distanceFactor={3}
			pointerEvents="auto"
			style="
				pointer-events: auto !important;
				image-rendering: auto;
				image-rendering: smooth;
				text-rendering: optimizeLegibility;
				-webkit-font-smoothing: subpixel-antialiased;
				-moz-osx-font-smoothing: auto;
				backface-visibility: hidden;
				transform-style: preserve-3d;
				will-change: transform;
			"
		>
			<div
				class="pointer-events-auto select-none"
				style="pointer-events: auto !important;"
				in:scale={{ duration: 200, start: 0.5 }}
			>
                <VideoConnectionFlowBox {video} {videoStatus} {onBoxClick} />
			</div>
		</HTML>
	</Billboard> -->
	</T.Group>
{/if}