@vizor-vr/react 0.2.0

package/dist/use-vizor-element.js

@@ -0,0 +1,124 @@
+import { useEffect, useRef } from 'react';
+// Ensure player elements are registered (side-effect import — the bare
+// '@vizor-vr/player' entry does NOT register; the '/register' entry does).
+// Safe under SSR: registration no-ops when there is no DOM.
+import '@vizor-vr/player/register';
+/** Map of React event prop names to DOM event names and detail accessors */
+const EVENT_MAP = [
+    { prop: 'onReady', event: 'vz-ready' },
+    { prop: 'onPlay', event: 'play' },
+    { prop: 'onPause', event: 'pause' },
+    { prop: 'onEnded', event: 'ended' },
+    { prop: 'onTimeUpdate', event: 'timeupdate' },
+    { prop: 'onError', event: 'vz-error', hasDetail: true },
+    { prop: 'onQualityChange', event: 'vz-quality-change', hasDetail: true },
+    { prop: 'onFullscreenEnter', event: 'vz-fullscreen-enter' },
+    { prop: 'onFullscreenExit', event: 'vz-fullscreen-exit' },
+    { prop: 'onXrSessionStart', event: 'vz-xr-session-start' },
+    { prop: 'onXrSessionEnd', event: 'vz-xr-session-end' },
+    { prop: 'onAnnotationClick', event: 'vz-annotation-click', hasDetail: true },
+    { prop: 'onOrientationChange', event: 'vz-orientation-change', hasDetail: true },
+    { prop: 'onLicenseValidated', event: 'vz-license-validated', hasDetail: true },
+    { prop: 'onCaptionChange', event: 'vz-caption-change', hasDetail: true },
+];
+/**
+ * Hook that attaches event listeners to a Vizor custom element ref.
+ * Handles cleanup on unmount and re-attaching when handlers change.
+ */
+export function useVizorEvents(ref, props) {
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const cleanups = [];
+        for (const { prop, event, hasDetail } of EVENT_MAP) {
+            const handler = props[prop];
+            if (!handler)
+                continue;
+            const listener = (e) => {
+                if (hasDetail && e instanceof CustomEvent) {
+                    handler(e.detail);
+                }
+                else {
+                    handler(e);
+                }
+            };
+            el.addEventListener(event, listener);
+            cleanups.push(() => el.removeEventListener(event, listener));
+        }
+        return () => {
+            for (const cleanup of cleanups)
+                cleanup();
+        };
+    }, [
+        ref,
+        props.onReady,
+        props.onPlay,
+        props.onPause,
+        props.onEnded,
+        props.onTimeUpdate,
+        props.onError,
+        props.onQualityChange,
+        props.onFullscreenEnter,
+        props.onFullscreenExit,
+        props.onXrSessionStart,
+        props.onXrSessionEnd,
+        props.onAnnotationClick,
+        props.onOrientationChange,
+        props.onLicenseValidated,
+        props.onCaptionChange,
+    ]);
+}
+/**
+ * Build HTML attributes object from common props.
+ * React passes unknown props to custom elements as attributes.
+ */
+export function buildAttributes(props) {
+    const attrs = {};
+    if (props.format)
+        attrs.format = String(props.format);
+    if (props.title)
+        attrs.title = props.title;
+    if (props.poster)
+        attrs.poster = props.poster;
+    if (props.loop)
+        attrs.loop = '';
+    if (props.muted)
+        attrs.muted = '';
+    if (props.preload)
+        attrs.preload = props.preload;
+    if (props.apiKey)
+        attrs['api-key'] = props.apiKey;
+    if (props.licenseKey)
+        attrs['license-key'] = props.licenseKey;
+    if (props.apiEndpoint)
+        attrs['api-endpoint'] = props.apiEndpoint;
+    if (props.contentId)
+        attrs['content-id'] = props.contentId;
+    if (props.controlsBehavior)
+        attrs['controls-behavior'] = props.controlsBehavior;
+    if (props.hideControls)
+        attrs['hide-controls'] = '';
+    if (props.primaryColor)
+        attrs['primary-color'] = props.primaryColor;
+    if (props.collabServer)
+        attrs['collab-server'] = props.collabServer;
+    if (props.collabRoom)
+        attrs['collab-room'] = props.collabRoom;
+    if (props.collabRole)
+        attrs['collab-role'] = props.collabRole;
+    if (props.collabUserId)
+        attrs['collab-user-id'] = props.collabUserId;
+    if (props.collabDisplayName)
+        attrs['collab-display-name'] = props.collabDisplayName;
+    if (props.collabPassword)
+        attrs['collab-password'] = props.collabPassword;
+    return attrs;
+}
+/**
+ * Create a forwarded ref for the custom element.
+ */
+export function useVizorRef() {
+    return useRef(null);
+}
+//# sourceMappingURL=use-vizor-element.js.map

package/dist/use-vizor-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-vizor-element.js","sourceRoot":"","sources":["../src/use-vizor-element.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@vizor-vr/react",
+  "version": "0.2.0",
+  "description": "React wrappers for Vizor VR Player",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vizor-vr/vizor.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://vizor-vr.com",
+  "keywords": [
+    "react",
+    "vr",
+    "360-video",
+    "webxr",
+    "three.js",
+    "video-player"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@vizor-vr/player": "0.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@vitest/coverage-v8": "^3.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run"
+  }
+}