open-index/open-npm huggingface dataset:
npm package: @glomex/integration-npaw
Description: DEPRECATED: Use @glomex/integration-analytics/npaw instead. NPAW/Youbora analytics integration for the glomex player
Latest version: 1.1485.0
Deprecated: This package has been moved to @glomex/integration-analytics (https://www.npmjs.com/package/@glomex/integration-analytics). Please use `import { connectToNpaw } from '@glomex/integration-analytics/npaw'` instead.

# @glomex/integration-npaw

> **⚠️ DEPRECATED:** This package has been moved to [`@glomex/integration-analytics`](https://www.npmjs.com/package/@glomex/integration-analytics).
> Please use `import { connectToNpaw } from '@glomex/integration-analytics/npaw'` instead.
> This package will no longer receive updates.

[NPAW analytics](https://npaw.com/) integration for the [turbo player](https://www.npmjs.com/package/@glomex/integration-web-component).

## Installation

```bash
npm install @glomex/integration-npaw
```

## Usage

### Basic Setup

```typescript
import { setupNpaw } from '@glomex/integration-npaw';

// Get your integration element
const integration = document.querySelector('glomex-integration');

// Simple setup for NPAW analytics (that also handles consent)
const { npawPlugin } = setupNpaw(integration, 'your-npaw-account-code');
```

### Advanced Configuration

```typescript
import { setupNpaw } from '@glomex/integration-npaw';

const { npawPlugin, destroy } = setupNpaw(integration, 'your-npaw-account-code', {
  appName: 'my-app',
  appVersion: '1.0.0'
});

npawPlugin.setAnalyticsOptions({
  userId: 'my-user-id',
  'content.customDimensions': {
    tenant: 'my-tenant'
  }
});

// ... after you're done with the integration, you can destroy the integration
destroy();
```

### Direct NPAW integration

```typescript
import { IntegrationEvent } from '@glomex/integration-web-component';
import { NpawTurboPlayerAdapter } from '@glomex/integration-npaw';
import NpawPlugin from 'npaw-plugin';

const npawPlugin = new NpawPlugin('your-npaw-account-code');
npawPlugin.registerAdapterFromClass(integration, NpawTurboPlayerAdapter);
```

## Features

- 🎯 **Easy Integration**: Simple setup with glomex player
- 📊 **Analytics**: Full NPAW analytics support with custom glomex player adapter
- 🔧 **Auto-Detection**: Automatic detection of content type and source properties
- 📱 **Cross-Platform**: Works with web, mobile web, and embedded players
- 🚀 **Streaming Protocol Detection**: Automatic detection of HLS vs DASH streams

## License

MIT

## Support

For issues and questions, please visit the [glomex documentation](https://docs.glomex.com) or contact support.
npm package: @glomex/integration-react
Description: React component to integrate the glomex player
Latest version: 1.1538.2

# @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 (TypeScript)

```tsx
// example: player.tsx
import { useEffect, useRef, type ComponentProps, type ComponentRef } from 'react';
import { Integration, IntegrationEvent } from '@glomex/integration-react';

const Player = (props: ComponentProps<typeof Integration>) => {
  const integrationRef = useRef<ComponentRef<typeof Integration>>(null);

  const handlePlay = () => {
    integrationRef.current?.ready.then(() => integrationRef.current?.play());
  };

  const handleContentStart = () => {
    console.log('content start', integrationRef.current?.content);
  };

  useEffect(() => {
    integrationRef.current?.ready.then(() => {
      // interact with the API after initial ready
      if (!integrationRef.current) return;
      // e.g. start at 20 seconds
      integrationRef.current.currentTime = 20;
      // integrationRef.current.volume = 0.1
      // integrationRef.current.muted = true
      // integrationRef.current.play();
    });
    // addEventListener is available immediately (without ready)
    integrationRef.current?.addEventListener(
      IntegrationEvent.CONTENT_START,
      handleContentStart
    );
    return () => {
      integrationRef.current?.removeEventListener(
        IntegrationEvent.CONTENT_START,
        handleContentStart
      );
    };
  }, [integrationRef]);

  return (
    <div>
      <Integration
        ref={integrationRef}
        {...props}
      />
      <button type="button" onClick={handlePlay}>
        Play
      </button>
    </div>
  );
};

export default Player;
```

**Usage** in your component:

```tsx
// example: app.tsx
import Player from "./player"

export default async function MyApp(props) {
  const params = await props.params

  return (
    <div>
      <Player
        integrationId="REPLACE_WITH_INTEGRATION_ID"
        playlistId="REPLACE_WITH_PLAYLIST_ID"
      />
    </div>
  );
}
```