ebta-workflow-prod 4.1.3 → 4.1.5

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "ebta-workflow-prod",
     "private": false,
-    "version": "4.1.3",
+    "version": "4.1.5",
     "description": "",
     "license": "UNLICENSED",
     "author": "",
@@ -32,8 +32,8 @@
         "@fseehawer/react-circular-slider": "^3.2.7",
         "@mantine/core": "^7.16.0",
         "@mantine/hooks": "^9.5.1",
-        "@mui/icons-material": "^5.17.1",
         "@mui/base": "5.0.0-beta.70",
+        "@mui/icons-material": "^5.17.1",
         "@mui/material": "^5.17.1",
         "@mui/x-charts": "^7.6.2",
         "@turf/turf": "^6.5.0",
@@ -44,6 +44,7 @@
         "axios": "^1.7.7",
         "dayjs": "^1.11.23",
         "html2canvas": "^1.4.1",
+        "marzipano": "^0.10.2",
         "pannellum-react-update": "^1.0.0",
         "pdf-lib": "^1.17.1",
         "qrcode": "^1.5.4",

package/src/elements/CsColorPicker.tsx

@@ -5,7 +5,8 @@ import { ColorInput, ColorPicker } from '@mantine/core';
 type ColorFormat = "hex" | "rgba" | "rgb" | "hsl" | "hsla";
 
 import "@mantine/core/styles.css";
-
+//Causing shrink
+//import "../styles/mantine-scoped.css";
 import Color from "@arcgis/core/Color";
 
 
@@ -79,6 +80,7 @@ function CsColorPickerV2(props: CsColorPickerV2Props): React.ReactElement {
     };
 
     return (
+
         <MantineProvider withStaticClasses withGlobalClasses classNamesPrefix="ebta-mantime">
             {componentType === "ColorInput" ? (
                 <ColorInput

package/src/elements/PanovideoPlayer.tsx

@@ -0,0 +1,225 @@
+import * as React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import Marzipano from "marzipano";
+
+
+/**
+ * The generic type argument provided to `FormElementProps<T>` controls the type
+ * of `props.value` and `props.setValue(value)`. If your element doesn't need a
+ * `value`, you can omit the type argument.
+ *
+ * You can also declare additional public properties of your element by adding
+ * properties to this interface. The properties will be managed by the Workflow
+ * runtime, and passed in as `props`. You can update the properties by using
+ * `props.setProperty(key, value)`.
+ */
+interface PanovideoPlayerProps extends FormElementProps<string> {}
+
+class VideoAsset extends (Marzipano as any).util.Emitter {
+    private _element: HTMLVideoElement;
+
+    constructor(videoElement: HTMLVideoElement) {
+        super();
+        this._element = videoElement;
+        // Marzipano polls isDynamic()/emits('change') to know when to redraw.
+        this._element.addEventListener("timeupdate", () => {
+            this.emit("change");
+        });
+    }
+
+    element(): HTMLVideoElement {
+        return this._element;
+    }
+
+    width(): number {
+        return this._element.videoWidth;
+    }
+
+    height(): number {
+        return this._element.videoHeight;
+    }
+
+    isDynamic(): boolean {
+        return true;
+    }
+}
+
+/**
+ * A Workflow element built using React.
+ * @displayName PanovideoPlayer
+ * @description Marzipano library panoramic video player
+ * @param props The props that will be provided by the Workflow runtime.
+ */
+function PanovideoPlayer(props: PanovideoPlayerProps): React.ReactElement {
+    const { setValue, value } = props;
+
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+    const videoElRef = React.useRef<HTMLVideoElement | null>(null);
+    const viewerRef = React.useRef<any>(null);
+    const [isPlaying, setIsPlaying] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+
+    // (Re)builds the Marzipano viewer whenever the video URL (props.value) changes.
+    React.useEffect(() => {
+        if (!value || !containerRef.current) {
+            return undefined;
+        }
+
+        setError(null);
+
+        // Create a hidden video element to drive the panorama. We don't
+        // attach it to the DOM directly - Marzipano reads frames from it
+        // and draws them into its own WebGL canvas.
+        const videoEl = document.createElement("video");
+        videoEl.crossOrigin = "anonymous";
+        videoEl.loop = true;
+        videoEl.muted = true; // required for autoplay in most browsers
+        videoEl.playsInline = true;
+        videoEl.src = value;
+        videoElRef.current = videoEl;
+
+        let viewer: any;
+        let cancelled = false;
+
+        const onLoadedMetadata = () => {
+            if (cancelled || !containerRef.current) {
+                return;
+            }
+
+            try {
+                viewer = new (Marzipano as any).Viewer(containerRef.current);
+                viewerRef.current = viewer;
+
+                const asset = new VideoAsset(videoEl);
+                const source = (Marzipano as any).SingleAssetSource.fromAsset(asset);
+
+                const geometry = new (Marzipano as any).EquirectGeometry([
+                    { width: videoEl.videoWidth || 1920 },
+                ]);
+
+                const limiter = (Marzipano as any).RectilinearView.limit.traditional(
+                    1024,
+                    (100 * Math.PI) / 180
+                );
+                const view = new (Marzipano as any).RectilinearView(
+                    { yaw: 0, pitch: 0, fov: Math.PI / 2 },
+                    limiter
+                );
+
+                const scene = viewer.createScene({
+                    source,
+                    geometry,
+                    view,
+                    pinFirstLevel: true,
+                });
+
+                scene.switchTo();
+
+                videoEl
+                    .play()
+                    .then(() => setIsPlaying(true))
+                    .catch(() => {
+                        // Autoplay was blocked - user needs to tap play.
+                        setIsPlaying(false);
+                    });
+            } catch (e) {
+                setError(
+                    e instanceof Error ? e.message : "Failed to initialize panoramic video."
+                );
+            }
+        };
+
+        const onVideoError = () => {
+            if (!cancelled) {
+                setError("Unable to load video from the provided URL.");
+            }
+        };
+
+        videoEl.addEventListener("loadedmetadata", onLoadedMetadata);
+        videoEl.addEventListener("error", onVideoError);
+
+        return () => {
+            cancelled = true;
+            videoEl.removeEventListener("loadedmetadata", onLoadedMetadata);
+            videoEl.removeEventListener("error", onVideoError);
+            videoEl.pause();
+            videoEl.removeAttribute("src");
+            videoEl.load();
+
+            if (viewerRef.current) {
+                try {
+                    // Not all Marzipano versions expose destroy(); guard defensively.
+                    viewerRef.current.destroy?.();
+                } catch {
+                    // no-op
+                }
+                viewerRef.current = null;
+            }
+
+            if (containerRef.current) {
+                containerRef.current.innerHTML = "";
+            }
+        };
+    }, [value]);
+
+    const togglePlayback = () => {
+        const videoEl = videoElRef.current;
+        if (!videoEl) {
+            return;
+        }
+        if (videoEl.paused) {
+            videoEl.play().then(() => setIsPlaying(true));
+        } else {
+            videoEl.pause();
+            setIsPlaying(false);
+        }
+    };
+
+    return (
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            <input
+                type="text"
+                placeholder="Enter 360° equirectangular video URL"
+                onChange={(event) => setValue(event.currentTarget.value)}
+                value={value ?? ""}
+                style={{ width: "100%" }}
+            />
+
+            {error && (
+                <div style={{ color: "red", fontSize: 12 }}>{error}</div>
+            )}
+
+            {value && (
+                <div style={{ position: "relative" }}>
+                    <div
+                        ref={containerRef}
+                        style={{
+                            width: "100%",
+                            height: 400,
+                            background: "#000",
+                        }}
+                    />
+                    <button
+                        type="button"
+                        onClick={togglePlayback}
+                        style={{
+                            position: "absolute",
+                            bottom: 8,
+                            left: 8,
+                        }}
+                    >
+                        {isPlaying ? "Pause" : "Play"}
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}
+
+const PanovideoPlayerElementRegistration: FormElementRegistration<PanovideoPlayerProps> = {
+    component: PanovideoPlayer,
+    getInitialProperties: () => ({ value: "" }),
+    id: "PanovideoPlayer",
+};
+
+export default PanovideoPlayerElementRegistration;

package/src/elements/Timeline.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
 import { Timeline as MainTimeLine, Text } from '@mantine/core';
 import { MantineProvider } from '@mantine/core';
-
+//import "../styles/mantine-scoped.css";
 
 /**
  * The generic type argument provided to `FormElementProps<T>` controls the type
@@ -38,30 +38,32 @@ interface TimelineProps extends FormElementProps<string> {
  * @param props The props that will be provided by the Workflow runtime.
  */
 function Timeline(props: TimelineProps): React.ReactElement {
-    const { itemDetails,iconSize,lineWidth,active,color,reverseActive } = props;
+    const { itemDetails, iconSize, lineWidth, active, color, reverseActive } = props;
     iconSize * 0.6
     return (
-        <MantineProvider>
-            <MainTimeLine active={active} bulletSize={iconSize} lineWidth={lineWidth} color={color} reverseActive={reverseActive}>
 
-                {itemDetails.map((item, index) => {
-                    
-                    return (
-                    
-                    <MainTimeLine.Item
-                        key={index}
-                        title={item.title}
-                        lineVariant={item.lineVariant}
-                    >
-                        
-                        {item.description ? <Text c="dimmed" size="sm">{item.description}</Text> : undefined}
-                        {item.time ? <Text size="xs" mt={4}>{item.time}</Text> : undefined}
-                        
-                    </MainTimeLine.Item>
-                )})}
-            </MainTimeLine>
+            <MantineProvider>
+                <MainTimeLine active={active} bulletSize={iconSize} lineWidth={lineWidth} color={color} reverseActive={reverseActive}>
+
+                    {itemDetails.map((item, index) => {
+
+                        return (
+
+                            <MainTimeLine.Item
+                                key={index}
+                                title={item.title}
+                                lineVariant={item.lineVariant}
+                            >
+
+                                {item.description ? <Text c="dimmed" size="sm">{item.description}</Text> : undefined}
+                                {item.time ? <Text size="xs" mt={4}>{item.time}</Text> : undefined}
+
+                            </MainTimeLine.Item>
+                        )
+                    })}
+                </MainTimeLine>
 
-        </MantineProvider>
+            </MantineProvider>
     );
 }
 
@@ -72,7 +74,7 @@ const TimelineElementRegistration: FormElementRegistration<TimelineProps> = {
         lineWidth: 1,
         iconSize: 40,
         active: 2,
-        color:'var(--buttonIcon)',
+        color: 'var(--buttonIcon)',
         reverseActive: true,
         itemDetails: [
             {

package/src/index.ts

@@ -18,6 +18,7 @@ export { default as HTMLextractorActivity } from "./activities/HTMLextractor";
 export { default as AttributeFilterElementRegistration } from "./elements/AttributeFilter"
 export { default as ItemSearcher_V2DEVRegistration } from "./elements/ItemSearcher_v2";
 export { default as Viewer360Registration } from "./elements/Viewer360";
+export { default as PanovideoPlayerRegistration} from "./elements/PanovideoPlayer";
 export { default as TableRadioGroupElementRegistration } from "./elements/TableRadioGoup";
 export { MuiSingleToggleButtonGroupElementRegistration, MuiMultipleToggleButtonGroupElementRegistration } from "./elements/ToggleButtonGroup";
 

package/src/styles/mantine-scoped.css

@@ -0,0 +1,3 @@
+.vertigis-mantine-scope {
+  @import "@mantine/core/styles.css";
+}