@glomex/integration-react 1.1299.0

package/README.md

@@ -0,0 +1,64 @@
+# @glomex/integration-react
+
+## Introduction
+
+`@glomex/integration-react` exposes a React component and types to easily integrate the glomex player. In order to use this component, you need to have a glomex account. You can get one by following the instructions in the [Getting Started](https://docs.glomex.com/publisher/getting-started) section.
+
+## About glomex
+
+[glomex](https://glomex.com) operates Germany’s largest marketplace for premium video content. Our platform connects publishers, content creators, and advertisers, enabling the seamless distribution of high-quality video content across the web.
+
+Our ecosystem is designed to create value for all participants:
+
+- **Publishers** gain access to premium video content and monetization opportunities
+- **Content Owners** receive wide distribution and revenue for their video assets
+- **Advertisers** reach targeted audiences across a network of quality websites
+
+## Usage
+
+### Loading & integrating the player
+
+```ts
+import { type React, useRef } from 'react';
+import { IntegrationReact, IntegrationEvent } from '@glomex/integration-react';
+
+const MyApp = () => {
+  const integrationRef = useRef<React.ElementRef<typeof IntegrationReact>>(null);
+
+  const handlePlay = () => {
+    integrationRef.current?.play();
+  };
+
+  const handleContentStart = () => {
+    console.log('content start', integrationRef.current?.content);
+  };
+
+  useEffect(() => {
+    integrationRef.current?.addEventListener(
+      IntegrationEvent.CONTENT_START,
+      handleContentStart
+    );
+    return () => {
+      integrationRef.current?.removeEventListener(
+        IntegrationEvent.CONTENT_START,
+        handleContentStart
+      );
+    };
+  }, [integrationRef]);
+
+  return (
+    <div>
+      <IntegrationReact
+        ref={integrationRef}
+        integrationId="FILL_IN_INTEGRATION_ID"
+        playlistId="FILL_IN_PLAYLIST_ID"
+      />
+      <button type="button" onClick={handlePlay}>
+        Play
+      </button>
+    </div>
+  );
+};
+
+export default MyApp;
+```

package/build/external-media-item-react.d.ts

@@ -0,0 +1,17 @@
+import { type ExternalMediaItemElement, type MediaItem, type MinimalMediaItem } from '@glomex/integration-web-component';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'glomex-external-media-item': DetailedHTMLProps<HTMLAttributes<ExternalMediaItemElement> & {
+                poster?: string;
+                duration?: number;
+                type?: string;
+            }, ExternalMediaItemElement>;
+        }
+    }
+}
+/**
+ * React component to define an external media item.
+ */
+export declare const ExternalMediaItemReact: (mediaItem: MediaItem | MinimalMediaItem) => JSX.Element;

package/build/external-media-item-react.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScriptType } from '@glomex/integration-web-component';
+/**
+ * React component to define an external media item.
+ */
+export const ExternalMediaItemReact = (mediaItem) => {
+    return (_jsx("glomex-external-media-item", { id: mediaItem.id, poster: mediaItem.poster, duration: mediaItem.duration, type: mediaItem.type, "channel-name": 'channelName' in mediaItem ? mediaItem.channelName : undefined, "channel-logo": 'channelLogo' in mediaItem ? mediaItem.channelLogo : undefined, title: mediaItem.title, "aspect-ratio": mediaItem.aspectRatio, "minimum-age": mediaItem.minimumAge, "release-date": mediaItem.releaseDate, "has-product-placement": 'hasProductPlacement' in mediaItem ? mediaItem.hasProductPlacement : undefined, children: mediaItem ? (_jsx("script", { type: ScriptType.EXTERNAL_MEDIA_ITEM, children: JSON.stringify(mediaItem) })) : null }));
+};

package/build/glomex-media-item-react.d.ts

@@ -0,0 +1,27 @@
+import type { GlomexMediaItemElement } from '@glomex/integration-web-component';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'glomex-media-item': DetailedHTMLProps<HTMLAttributes<GlomexMediaItemElement> & {
+                poster?: string;
+            }, GlomexMediaItemElement>;
+        }
+    }
+}
+/**
+ * React component to define a glomex media item.
+ */
+export declare const GlomexMediaItemReact: ({ id, overrides }: {
+    id: string | {
+        id: string;
+        overrides?: {
+            title?: string;
+            poster?: string;
+        };
+    };
+    overrides?: {
+        title?: string;
+        poster?: string;
+    };
+}) => JSX.Element;

package/build/glomex-media-item-react.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * React component to define a glomex media item.
+ */
+export const GlomexMediaItemReact = ({ id, overrides }) => {
+    const { id: mediaItemId, overrides: mediaItemOverrides } = typeof id === 'string' ? { id, overrides } : id;
+    return (_jsx("glomex-media-item", { id: mediaItemId, title: mediaItemOverrides?.title, poster: mediaItemOverrides?.poster }));
+};

package/build/index.d.ts

@@ -0,0 +1,2 @@
+export { IntegrationReact } from './integration-react';
+export * from '@glomex/integration-web-component';

package/build/index.js

@@ -0,0 +1,3 @@
+export { IntegrationReact } from './integration-react';
+// biome-ignore lint/performance/noReExportAll: <explanation>
+export * from '@glomex/integration-web-component';

package/build/integration-react.d.ts

@@ -0,0 +1,34 @@
+import { type IntegrationElement, type IntegrationProperties, type MediaItem, type MinimalMediaItem } from '@glomex/integration-web-component';
+import { type CSSProperties, type DetailedHTMLProps, type HTMLAttributes } from 'react';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'glomex-integration': DetailedHTMLProps<HTMLAttributes<IntegrationElement> & {
+                index?: number;
+                placement?: string;
+                hidden?: boolean;
+                style?: CSSProperties;
+            }, IntegrationElement>;
+        }
+    }
+}
+/**
+ * React component for the integration.
+ *
+ * @see {@link IntegrationElementEventMap} for all available events.
+ */
+export declare const IntegrationReact: import("react").ForwardRefExoticComponent<IntegrationProperties & {
+    id?: string;
+    mediaItems?: (string | {
+        id: string;
+        overrides: {
+            title?: string;
+            poster?: string;
+        };
+    } | MinimalMediaItem | MediaItem)[];
+    preventLoadIntegration?: boolean;
+    configs?: Record<string, unknown>;
+    style?: CSSProperties;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<IntegrationElement>>;

package/build/integration-react.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ScriptType, getIntegrationCssUrl, loadIntegrationComponent } from '@glomex/integration-web-component';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { ExternalMediaItemReact } from './external-media-item-react';
+import { GlomexMediaItemReact } from './glomex-media-item-react';
+/**
+ * React component for the integration.
+ *
+ * @see {@link IntegrationElementEventMap} for all available events.
+ */
+export const IntegrationReact = forwardRef((props, ref) => {
+    const { children, integrationId, playlistId, index, hidden, topLevelIframe, placement, mediaItems, configs, preventLoadIntegration, ...rest } = props;
+    const elementRef = useRef(null);
+    if (mediaItems && playlistId) {
+        throw new Error('Cannot specify both mediaItems and playlistId');
+    }
+    const mediaItemComponents = (mediaItems || []).map((item, index) => {
+        const keyIndex = index + 1;
+        if (typeof item === 'string') {
+            return _jsx(GlomexMediaItemReact, { id: item }, `${item}-${keyIndex}`);
+        }
+        if ('id' in item && !('title' in item)) {
+            return (_jsx(GlomexMediaItemReact, { id: item.id, overrides: item.overrides }, `${item.id}-${keyIndex}`));
+        }
+        return _jsx(ExternalMediaItemReact, { ...item }, `${item.id}-${keyIndex}`);
+    });
+    useEffect(() => {
+        if (preventLoadIntegration)
+            return;
+        loadIntegrationComponent();
+    }, [preventLoadIntegration]);
+    useImperativeHandle(ref, () => elementRef.current, []);
+    return (_jsxs(_Fragment, { children: [integrationId && _jsx("link", { rel: "stylesheet", href: getIntegrationCssUrl(integrationId) }), _jsxs("glomex-integration", { ref: elementRef, "integration-id": integrationId, "playlist-id": playlistId, index: index, hidden: hidden, "top-level-iframe": topLevelIframe, placement: placement, ...rest, children: [mediaItemComponents, children, configs && (_jsx("script", { type: ScriptType.INTEGRATION_CONFIGS, children: JSON.stringify(configs) }))] })] }));
+});

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@glomex/integration-react",
+  "version": "1.1299.0",
+  "description": "React component to integrate the glomex player",
+  "documentation": "https://docs.glomex.com",
+  "homepage": "https://glomex.com",
+  "keywords": [
+    "glomex",
+    "video",
+    "player",
+    "streaming",
+    "media-player",
+    "web-player",
+    "react"
+  ],
+  "type": "module",
+  "main": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "files": [
+    "build/**/*.js",
+    "build/**/*.d.ts"
+  ],
+  "scripts": {
+    "prepare": "tsc --build",
+    "build": "rm -rf build &&tsc --build",
+    "lint": "tsc --noEmit && biome ci",
+    "watch": "tsc --build --watch"
+  },
+  "dependencies": {
+    "@glomex/integration-web-component": "^1.1299.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "typescript": "^5.8.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0639a6ddf352930238f560cc0887345f7b401d60"
+}