0
- ? `drop-shadow(0 ${shadowIntensity * 12}px ${shadowIntensity * 48}px rgba(0,0,0,${shadowIntensity * 0.7})) drop-shadow(0 ${shadowIntensity * 4}px ${shadowIntensity * 16}px rgba(0,0,0,${shadowIntensity * 0.5})) drop-shadow(0 ${shadowIntensity * 2}px ${shadowIntensity * 8}px rgba(0,0,0,${shadowIntensity * 0.3}))`
- : "none",
+ transformStyle: "preserve-3d",
+ transformOrigin: "center center",
}}
- />
- {webcamVideoPath &&
- (() => {
- const clipPath = getCssClipPath(webcamLayout?.maskShape ?? "rectangle");
- const useClipPath = !!clipPath;
- return (
-
-
-
- );
- })()}
- {/* Only render overlay after PIXI and video are fully initialized */}
- {pixiReady && videoReady && (
+ >
-
- {(() => {
- const filteredAnnotations = (annotationRegions || []).filter((annotation) => {
- if (typeof annotation.startMs !== "number" || typeof annotation.endMs !== "number")
- return false;
-
- if (annotation.id === selectedAnnotationId) return true;
-
- const timeMs = Math.round(currentTime * 1000);
- return timeMs >= annotation.startMs && timeMs < annotation.endMs;
- });
-
- const filteredBlurRegions = (blurRegions || []).filter((blurRegion) => {
- if (typeof blurRegion.startMs !== "number" || typeof blurRegion.endMs !== "number")
- return false;
-
- if (blurRegion.id === selectedBlurId) return true;
-
- const timeMs = Math.round(currentTime * 1000);
- return timeMs >= blurRegion.startMs && timeMs < blurRegion.endMs;
- });
-
- const sorted = [
- ...filteredAnnotations.map((annotation) => ({
- kind: "annotation" as const,
- region: annotation,
- })),
- ...filteredBlurRegions.map((blurRegion) => ({
- kind: "blur" as const,
- region: blurRegion,
- })),
- ].sort((a, b) => a.region.zIndex - b.region.zIndex);
- const previewSnapshotCanvas =
- filteredBlurRegions.length > 0
- ? (() => {
- const app = appRef.current;
- if (!app?.renderer?.extract) return null;
- try {
- return app.renderer.extract.canvas(app.stage);
- } catch {
- return null;
- }
- })()
- : null;
-
- // Handle click-through cycling: when clicking same annotation, cycle to next
- const handleAnnotationClick = (clickedId: string) => {
- if (!onSelectAnnotation) return;
-
- // If clicking on already selected annotation and there are multiple overlapping
- if (clickedId === selectedAnnotationId && filteredAnnotations.length > 1) {
- // Find current index and cycle to next
- const currentIndex = filteredAnnotations.findIndex((a) => a.id === clickedId);
- const nextIndex = (currentIndex + 1) % filteredAnnotations.length;
- onSelectAnnotation(filteredAnnotations[nextIndex].id);
- } else {
- // First click or clicking different annotation
- onSelectAnnotation(clickedId);
- }
- };
-
- const handleBlurClick = (clickedId: string) => {
- if (!onSelectBlur) return;
-
- if (clickedId === selectedBlurId && filteredBlurRegions.length > 1) {
- const currentIndex = filteredBlurRegions.findIndex((a) => a.id === clickedId);
- const nextIndex = (currentIndex + 1) % filteredBlurRegions.length;
- onSelectBlur(filteredBlurRegions[nextIndex].id);
- } else {
- onSelectBlur(clickedId);
- }
- };
-
- return sorted.map((item) => (
-
`${Math.round(p.x)}_${Math.round(p.y)}`).join("-")}`
- : `${item.region.id}-${overlaySize.width}-${overlaySize.height}`
- }
- annotation={item.region}
- isSelected={
- item.kind === "blur"
- ? item.region.id === selectedBlurId
- : item.region.id === selectedAnnotationId
- }
- containerWidth={overlaySize.width}
- containerHeight={overlaySize.height}
- onPositionChange={(id, position) =>
- item.kind === "blur"
- ? onBlurPositionChange?.(id, position)
- : onAnnotationPositionChange?.(id, position)
- }
- onSizeChange={(id, size) =>
- item.kind === "blur"
- ? onBlurSizeChange?.(id, size)
- : onAnnotationSizeChange?.(id, size)
- }
- onBlurDataChange={
- item.kind === "blur"
- ? (id, blurData) => onBlurDataChange?.(id, blurData)
- : undefined
- }
- onBlurDataCommit={item.kind === "blur" ? onBlurDataCommit : undefined}
- onClick={item.kind === "blur" ? handleBlurClick : handleAnnotationClick}
- zIndex={item.region.zIndex}
- isSelectedBoost={
- item.kind === "blur"
- ? item.region.id === selectedBlurId
- : item.region.id === selectedAnnotationId
- }
- previewSourceCanvas={previewSnapshotCanvas}
- previewFrameVersion={Math.round(currentTime * 1000)}
- />
- ));
+ ref={containerRef}
+ className="absolute inset-0"
+ style={{
+ filter:
+ showShadow && shadowIntensity > 0
+ ? `drop-shadow(0 ${shadowIntensity * 12}px ${shadowIntensity * 48}px rgba(0,0,0,${shadowIntensity * 0.7})) drop-shadow(0 ${shadowIntensity * 4}px ${shadowIntensity * 16}px rgba(0,0,0,${shadowIntensity * 0.5})) drop-shadow(0 ${shadowIntensity * 2}px ${shadowIntensity * 8}px rgba(0,0,0,${shadowIntensity * 0.3}))`
+ : "none",
+ }}
+ />
+ {webcamVideoPath &&
+ (() => {
+ const clipPath = getCssClipPath(webcamLayout?.maskShape ?? "rectangle");
+ const useClipPath = !!clipPath;
+ return (
+
+
+
+ );
})()}
-
- )}
+ {/* Only render overlay after PIXI and video are fully initialized */}
+ {pixiReady && videoReady && (
+
+
+ {(() => {
+ const filteredAnnotations = (annotationRegions || []).filter((annotation) => {
+ if (
+ typeof annotation.startMs !== "number" ||
+ typeof annotation.endMs !== "number"
+ )
+ return false;
+
+ if (annotation.id === selectedAnnotationId) return true;
+
+ const timeMs = Math.round(currentTime * 1000);
+ return timeMs >= annotation.startMs && timeMs < annotation.endMs;
+ });
+
+ const filteredBlurRegions = (blurRegions || []).filter((blurRegion) => {
+ if (
+ typeof blurRegion.startMs !== "number" ||
+ typeof blurRegion.endMs !== "number"
+ )
+ return false;
+
+ if (blurRegion.id === selectedBlurId) return true;
+
+ const timeMs = Math.round(currentTime * 1000);
+ return timeMs >= blurRegion.startMs && timeMs < blurRegion.endMs;
+ });
+
+ const sorted = [
+ ...filteredAnnotations.map((annotation) => ({
+ kind: "annotation" as const,
+ region: annotation,
+ })),
+ ...filteredBlurRegions.map((blurRegion) => ({
+ kind: "blur" as const,
+ region: blurRegion,
+ })),
+ ].sort((a, b) => a.region.zIndex - b.region.zIndex);
+ const previewSnapshotCanvas =
+ filteredBlurRegions.length > 0
+ ? (() => {
+ const app = appRef.current;
+ if (!app?.renderer?.extract) return null;
+ try {
+ return app.renderer.extract.canvas(app.stage);
+ } catch {
+ return null;
+ }
+ })()
+ : null;
+
+ // Handle click-through cycling: when clicking same annotation, cycle to next
+ const handleAnnotationClick = (clickedId: string) => {
+ if (!onSelectAnnotation) return;
+
+ // If clicking on already selected annotation and there are multiple overlapping
+ if (clickedId === selectedAnnotationId && filteredAnnotations.length > 1) {
+ // Find current index and cycle to next
+ const currentIndex = filteredAnnotations.findIndex((a) => a.id === clickedId);
+ const nextIndex = (currentIndex + 1) % filteredAnnotations.length;
+ onSelectAnnotation(filteredAnnotations[nextIndex].id);
+ } else {
+ // First click or clicking different annotation
+ onSelectAnnotation(clickedId);
+ }
+ };
+
+ const handleBlurClick = (clickedId: string) => {
+ if (!onSelectBlur) return;
+
+ if (clickedId === selectedBlurId && filteredBlurRegions.length > 1) {
+ const currentIndex = filteredBlurRegions.findIndex((a) => a.id === clickedId);
+ const nextIndex = (currentIndex + 1) % filteredBlurRegions.length;
+ onSelectBlur(filteredBlurRegions[nextIndex].id);
+ } else {
+ onSelectBlur(clickedId);
+ }
+ };
+
+ return sorted.map((item) => (
+
`${Math.round(p.x)}_${Math.round(p.y)}`).join("-")}`
+ : `${item.region.id}-${overlaySize.width}-${overlaySize.height}`
+ }
+ annotation={item.region}
+ isSelected={
+ item.kind === "blur"
+ ? item.region.id === selectedBlurId
+ : item.region.id === selectedAnnotationId
+ }
+ containerWidth={overlaySize.width}
+ containerHeight={overlaySize.height}
+ onPositionChange={(id, position) =>
+ item.kind === "blur"
+ ? onBlurPositionChange?.(id, position)
+ : onAnnotationPositionChange?.(id, position)
+ }
+ onSizeChange={(id, size) =>
+ item.kind === "blur"
+ ? onBlurSizeChange?.(id, size)
+ : onAnnotationSizeChange?.(id, size)
+ }
+ onBlurDataChange={
+ item.kind === "blur"
+ ? (id, blurData) => onBlurDataChange?.(id, blurData)
+ : undefined
+ }
+ onBlurDataCommit={item.kind === "blur" ? onBlurDataCommit : undefined}
+ onClick={item.kind === "blur" ? handleBlurClick : handleAnnotationClick}
+ zIndex={item.region.zIndex}
+ isSelectedBoost={
+ item.kind === "blur"
+ ? item.region.id === selectedBlurId
+ : item.region.id === selectedAnnotationId
+ }
+ previewSourceCanvas={previewSnapshotCanvas}
+ previewFrameVersion={Math.round(currentTime * 1000)}
+ />
+ ));
+ })()}
+
+ )}
+