open-index/open-npm huggingface dataset:
npm package: @project-sunbird/sunbird-video-player-v8
Description: Player for playing Video/Audio contents for sunbird applications
Latest version: 4.0.11

# Sunbird Video Player
Player for playing Video/Audio contents for sunbird applications

## Prerequisite

  Node JS version > 12

## Usage


`npm i @project-sunbird/sunbird-video-player-v8`


Add the module to the your player root module 

`import  { SunbirdVideoPlayerModule } from '@project-sunbird/sunbird-video-player-v8';`

```javascript
@NgModule({
  ...
  imports: [
    ...,
    SunbirdVideoPlayerModule
  ]
})
```

add the assets, scripts and styles in angular.json file

```javascript
....
 "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/@project-sunbird/sunbird-video-player-v8/lib/assets/",
                "output": "/assets/"
              }
],
  "scripts": [
  ...
    "node_modules/@project-sunbird/telemetry-sdk/index.js"
    ....
  ],
  
"styles": [
...
"node_modules/@project-sunbird/sb-styles/assets/_styles.scss",
"node_modules/video.js/dist/video-js.min.css",
"src/styles.css"
....
],
...

```

add peer dependecies of the player as dependecies in your project
 

add the component selector in your component like below

```html

    <sunbird-video-player 
                [playerConfig]="playerConfig" 
                (playerEvent)="playerEvent($event)" 
                (telemetryEvent)="telemetryEvent($event)">
    </sunbird-video-player>

```

Still facing issues please refer the demo project in this repo as example

## Development

  check out this repo with latest release version branch

  cd to {repo_path} in terminal

  run  `sh setup.sh`

  above script installs the dependecies and link the epub player library project to demo app

  if you do any changes in library project run to get latest changes in demo app

  `npm run build-lib-link`

  once above command completed run `npm run start` which will run the player in demo app at http://localhost:4200



## References

https://docs.videojs.com/
npm package: @project44-manifest/css
Description: Manifest Design System scss and css
Author: project44
Latest version: 0.1.4

# @project44-manifest/styles

> CSS for Manifest Design System.

## Getting Started

Get started by including Manifest's CSS via CDN

```html
<link
  href="https://unpkg.com/@project44-manifest/css@0.1.1/lib/css/manifest.css"
  rel="stylesheet"
  crossorigin="anonymous"
/>
```

## Contributing

Contributions are always welcome!! Please review our [Contribution Guide](/.github/CONTRIBUTING.md)
to get started.

## License

Licensed under the [MIT](/LICENSE).
npm package: @project44-manifest/design-tokens
Description: Manifest Design System design tokens
Author: project44
Latest version: 3.1.1

# @project44-manifest/design-tokens

Design Tokens for Manifest Design System, project44's design system.

For a full list of tokens, please see the
[documentation website](https://project44.github.io/manifest/core/design-tokens)

## Installation

```bash
yarn add @project44-manifest/design-tokens
```

## Usage

### Constants

Each token is represented as a constants and can be imported directly.

```js
import { colorPaletteBlue50 } from '@project44-manifest/design-tokens';
```

### Object

All tokens can be accessed via a javascript object, this is useful for composing themes.

```js
import { tokens } from '@project44-manifest/design-tokens';

console.log(tokens.color.palette.blue[50]);
```

## Contributing

Contributions are always welcome!! Please review our [Contribution Guide](/.github/CONTRIBUTING.md)
to get started.

## License

Licensed under the [MIT](/LICENSE).
npm package: @project44-manifest/react-icons
Description: Manifest Design System react icon library
Author: project44
Latest version: 2.6.0

# @project44-manifest/icons

> SVG icons for Manifest Design System

## Usage

All the icons are available as `svg` files. Checkout the list of icons on the
[unpkg CDN](https://unpkg.com/@project44-manifest/icons/lib/).

```html
<svg
  width="24"
  height="24"
  fill="currentColor"
  viewBox="0 0 24 24"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill-rule="evenodd"
    d="M12.9 7a.9.9 0 1 0-1.8 0v4.604H6.5a.9.9 0 0 0 0 1.8h4.6V18a.9.9 0 0 0 1.8 0v-4.598h4.6a.9.9 0 1 0 0-1.8h-4.6v-4.6Z"
    clip-rule="evenodd"
  />
</svg>
```
npm package: @project44-manifest/react-styles
Description: Manifest Design System react styling tools
Author: project44
Latest version: 2.0.3

# @project44-manifest/react-styles

> A CSS-in-JS styling engine powered by [Stitches](https://stitches.dev).

## Installation

```bash
yarn add @project44-manifest/react-styles
```

## Usage

The `@project44-manifest/react-styles` library ships with a pre-configured styling engine powered by
[Stitches](https://stitches.dev) with support for the Manifest Design System
[theme](../theme/README.md).

### Styled API

The `styled` api can be used to create a component.

```tsx
import { styled } from '@project44-manifest/react-styles';

const Button = styled('button', {
  backgroundColor: '$palette-blue-500',
  borderRadius: '$full',
  color: '$palette-white',
});

<Button>Hello World</Button>;
```

### CSS Prop

All components created using this library will include a `css` prop, which can be used to pass in
style overrides. It’s like the style attribute, but it supports tokens, media queries, nesting and
token-aware values.

```tsx
const Button = styled('button', {});

<Button
  css={{
    backgroundColor: '$palette-blue-500',
    borderRadius: '$full',
    color: '$palette-white',

    '&:hover': {
      backgroundColor: '$palette-blue-700',
    },
  }}
>
  Button
</Button>;
```

### Theme Tokens

Theme tokens are used to style components. These tokens should be used where applicable instead of
hard code CSS values as this allows all components to inherit any changes made to the theme.

Check out our [theme specification](../theme/README.md) for a complete list of available theme
tokens, and the Stitches guide to [using tokens](https://stitches.dev/docs/tokens#using-tokens).

### pxToRem

We encourage using `rem` instead of `px` for your unit of measurement to improve accessibility for
those with visual impairments. To make the conversion from `px` to `rem` easier we have provided a
utility function that will convert those values using a base font size of `16px`.

```tsx
import { css, styled } from '@project44-manifest/react-styles';

const MyComponent = styled('div', {
  padding: pxToRem(64),
});
```

### cx

This library also provides a utility for constructing className strings conditionally.

```tsx
import { cx } from '@project44-manifest/react-styles';

// Strings (variadic)
cx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
cx({ foo: true, bar: false, baz: isTrue() });
//=> 'foo baz'

// Objects (variadic)
cx({ foo: true }, { bar: false }, null, { '--foobar': 'hello' });
//=> 'foo --foobar'

// Arrays
cx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// Arrays (variadic)
cx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
cx('foo', [1 && 'bar', { baz: false, bat: null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'
```

## Contributing

Contributions are always welcome!! Please review our [Contribution Guide](/.github/CONTRIBUTING.md)
to get started.

## License

Licensed under the [MIT](/LICENSE).
npm package: @project44-manifest/vessel
Description: Pre-packaged configs for Manifest Design System. Inspired by [@beemo/dev](https://github.com/beemojs/dev).
Author: project44
Latest version: 1.0.2

# Vessel - Development configuration module

Pre-packaged configs for Manifest Design System. Inspired by [@beemo/dev](https://github.com/beemojs/dev).

## Installation

```bash
yarn add --dev @beemo/cli @beemo/core @manifest/vessel
```

## Setup

Create a `.config/beemo.ts` file in the root of your project that configures
`@manifest/vessel` as the configuration module. Be sure to enable all drivers and any
settings.

```ts
// .config/beemo.ts
export default {
  module: '@manifest/vessel',
  drivers: ['babel', 'eslint', 'jest', 'prettier', 'typescript'],
  settings: {},
};
```

### Settings

The following Beemo `settings` can be defined and will be passed to applicable drivers.

- `node` (`boolean`) - Current project will target Node.js instead of the browser. Defaults to
  `false`.
- `projects` (`boolean | string[]`) - Enable Jest projects. If `true` is passed, will be resolved
  using workspaces, otherwise requires an array of explicit strings. Defaults to `false`.
- `next` (`boolean`) - Enable Next.js for all drivers. Defaults to `false`.
- `react` (`boolean | classic | automatic`) - Enable React and JSX support for all drivers. Defaults
  to `false`.

### Overrides

If you would like to override a driver config, create a `.config/beemo/<driver>.ts` file in the root
of the project.
[View the official Beemo docs for more information](https://beemo.dev/docs/consumer#overriding-configs).

```ts
// .config/beemo/eslint.ts
export default {
  rules: {
    'no-param-reassign': 'off',
  },
};
```

## Drivers

The following drivers are directly supported in this configuration module, and automatically passed
common command line options when being ran.

- Babel
- ESLint
- Jest
- Prettier
- TypeScript