open-index/open-npm huggingface dataset:
npm package: @sourcesync-sdk/app
Description: This is the App component of the SourceSync SDK. It stores common configuration settings and provides access to the SDK's services.
Author: Source Digital
Latest version: 1.0.0

# @sourcesync-sdk/app
This is the App component of the SourceSync SDK.
It stores common configuration settings and provides access to the SDK's services.

```bash
npm install @sourcesync-sdk/app
```

## License

This SDK is distributed under the [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0).
The Apache 2.0 License applies to the SDK only and not any other component of the SourceSync Platform.
npm package: @sourcesync-sdk/content
Description: ## Overview
Author: Source Digital
Latest version: 1.0.0

# @sourcesync-sdk/content

## Overview

The @sourcesync-sdk/content is part of the SourceSync SDK. It initializes a content object that can be used to retrieve metadata, effects, and other content-related information for a specific distribution.

## Installation

To install the package, run the following command in your project directory:

```bash
npm install sourcesync-sdk
```

Or install a submodule as its own dependency:
```bash
npm install @sourcesync-sdk/content @sourcesync-sdk/app
```


## How to use

### Getting started


First, initialize your application and create a content:
```javascript

import { initializeApp } from 'sourcesync-sdk/app';
import { getContent } from 'sourcesync-sdk/content';

const app = await initializeApp({
  appKey: 'your-app-key',
  
  // app config
})

const content = await getContent({
  app,

  // Specify one of the following options to identify the media
  mediaId: 'mediaId',
  // or
  mediaUrl: 'mediaUrl',
  // or
  mediaUrlHash: 'mediaUrlHash'
  // or 
  distribution: { id: 'distributionId' },
  
  // Support for clientId is coming soon
  // distribution: { clientId: 'clientId' }

 // specify the environment of the content and user
  environment: {}
})
```

### Retrieving Context and Metadata

To get the context of a content object at a specific time:

```javascript

// specify the time in milliseconds
const context = await content.getContext({ start: 0, duration: 1000 })

// Get the metadata
const metadata = context.metadata

```

### Retrieving Effects

To get the effects of a content object at a specific time:
```javascript

// specify the time in milliseconds
const { effects, context } = await content.getEffects({ start: 0,  duration: 1000 })

```

### Buffered Content

Buffered content efficiently pre-fetches and caches content moments so that they are readily available when needed. Useful to use with media players or other applications that require quick access to sequential content moments.

To create a buffered version of the content object:

```javascript

const bufferedContent = content.buffered({
  // The duration of each segment in milliseconds
  duration: 5000,
  // The duration of the buffer in milliseconds
  bufferDuration: 1000 * 10
})

// just pass the time in milliseconds
const context = await bufferedContent.getContext(timeInMilliseconds)
const effects = await bufferedContent.getEffects(timeInMilliseconds)

```

## License

This SDK is distributed under the [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0).
The Apache 2.0 License applies to the SDK only and not any other component of the SourceSync Platform.
npm package: @sourcesync-sdk/context-api-client
Description: ## Installation
Author: Source Digital
Latest version: 1.0.0

# @sourcesync-sdk/context-api-client

## Installation

To install the package, run the following command in your project directory:

```bash
npm install sourcesync-sdk
```

Or install a submodule as its own dependency:
```bash
npm install @sourcesync-sdk/context-api-client @sourcesync-sdk/app
```

## License

This SDK is distributed under the [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0).
The Apache 2.0 License applies to the SDK only and not any other component of the BluePrint Platform.
npm package: @sourcesync-sdk/render-activation-web
Description: This module is designed for rendering activation within web applications. It provides functionalities such as mounting activation components, handling updates, and rendering via different types of renderers.
Author: Source Digital
Latest version: 1.0.0

# @sourcesync-sdk/render-activation-web

This module is designed for rendering activation within web applications. It provides functionalities such as mounting activation components, handling updates, and rendering via different types of renderers.

## Installation

Install the module using npm:



```bash
npm install sourcesync-sdk
```

Or install modules separately:


```bash
npm install @sourcesync-sdk/render-activation-web @sourcesync-sdk/app
```

## Usage

```js
import { initializeApp } from 'sourcesync-sdk/app'
import { createActivationView, useSmartblockRenderer } from 'sourcesync-sdk/render-activation-web'
```

Initialize the app with your app ID:

```js

const app = await initializeApp({
  appKey
})

```

Then call the `createActivationView` with an activation object and options specifying the target element and the renderer:

```js
const activationView = createActivationView(app, activation, {
  el: '#activation-view',
  renderer: useSmartblockRenderer({ /* options */ }) // Or use your custom renderer
});
```

Mount the view to start interacting with it:

```js
activationView.mount();
```

## Custom Renderers

You can create custom renderers by extending the `ActivationBlockRenderer` class and passing it to the `ActivationView` options.


## API Reference

### Classes

`ActivationView`: Handles the lifecycle and rendering of activation data.
  - `mount()`: Mount the activation view to the DOM.
  - `unmount()`: Clean up the view and remove it from the DOM.
  - `updateActivation(activation)`: Update the current activation data.
  - `updateContext(context)`: Update the context for the current activation.


## License

This SDK is distributed under the [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0).
The Apache 2.0 License applies to the SDK only and not any other component of the SourceSync Platform.
npm package: @sourcesync-sdk/render-experience-web
Description: ## Overview The @sourcesync-sdk/render-experience-web package is a tool for rendering experiences on the web.
Author: Source Digital
Latest version: 1.0.0

# @sourcesync-sdk/render-experience-web

## Overview
The @sourcesync-sdk/render-experience-web package is a tool for rendering experiences on the web.

## Installation

To install the package, run the following command in your project directory:

```bash
npm install sourcesync-sdk
```

Or install a submodule as its own dependency:
```bash
npm install @sourcesync-sdk/render-experience-web @sourcesync-sdk/app
```

## How to use

### Getting started

First, initialize your application and create an experience:

```ts

import { initializeApp } from 'sourcesync-sdk/app';
import { createExperience, modeCfg, type GridTargetConfig } from 'sourcesync-sdk/render-experience-web';

const app = await initializeApp({
  appKey: 'your-app-key',
  
  // app config
})

const { experience } = await createExperience(app, {
  targetEl: '#target',
  distribution: {
    id: 'your-distribution-id',

    // support coming soon
    // clientId: 'your-client-id',
  }
});
```

Next, define modes for your experience. 
By default, modes will be evaluated in order of definition, and the first mode that meets its conditions will be activated.

```ts


experience.mode.addBreakpoint(
  // mode name
  'mobile', 
  // conditions to be verified to activate the mode
  { mediaQuery: '(max-width: 800px)' }
)

experience.mode.addBreakpoint('desktop', true)

```

If you want to insert a mode in a specific position, specify the index as the third argument:

```ts

experience.mode.addBreakpoint('tablet', { mediaQuery: '(max-width: 1200px)' }, 1)

```

Next, define targets for your experience.

```ts

// OverlayTarget is a target that will be rendered over `targetEl`
experience.core.addOverlayTarget(
  // configuration to be activated in each mode
  modeCfg<GridTargetConfig>()
    // `default` mode configuration will be used as base. 
    // Any other mode will override the default configuration when enabled.
    .default({
      grid: {
        area: [['left', 'right']]
      }
    })
    // `mobile` mode configuration
    .add('mobile', {
      // this target will be disabled in mobile mode
      disabled: true
    })
    .build()
)


// BottomTarget is a target that will be rendered below `targetEl`
experience.core.addBottomTarget(
  modeCfg<ListTargetConfig>()
    .add('desktop', {
      disabled: true
    })
    .build()
)


```


Lastly, initialize the experience:

```ts

experience.init()

```


## License

This SDK is distributed under the [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0).
The Apache 2.0 License applies to the SDK only and not any other component of the SourceSync Platform.
npm package: @sourcesync/experience-player-comp-plyr
Description: This SDK is distributed under the [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0). The Apache 2.0 License applies to this package only and not any other component of the SourceSync Platform.
Author: Source Digital
Latest version: 0.1.1

## License

This SDK is distributed under the [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0).
The Apache 2.0 License applies to this package only and not any other component of the SourceSync Platform.
npm package: @sourcesync/experience-player-comp-transparent
Description: This SDK is distributed under the [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0). The Apache 2.0 License applies to this package only and not any other component of the SourceSync Platform.
Author: Source Digital
Latest version: 0.1.1

## License

This SDK is distributed under the [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0).
The Apache 2.0 License applies to this package only and not any other component of the SourceSync Platform.
npm package: @sourcesync/experience-player-comp-vue-core
Description: This SDK is distributed under the [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0). The Apache 2.0 License applies to this package only and not any other component of the SourceSync Platform.
Author: Source Digital
Latest version: 1.0.0

## License

This SDK is distributed under the [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0).
The Apache 2.0 License applies to this package only and not any other component of the SourceSync Platform.