open-index/open-npm huggingface dataset:
npm package: @mellkam/vue-plyr
Description: Integration of the Plyr player with Vue framework
Author: Artem Melnyk
Latest version: 0.2.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# vue-plyr
![npm](https://badgen.net/npm/v/@mellkam/vue-plyr)
![license](https://badgen.net/npm/license/@mellkam/vue-plyr)

Integration of the Plyr player with Vue framework.

It uses Plyr by [sampotts](https://github.com/sampotts) for the players.

## Instalation

This package has two required peer dependencies.

```json
"peerDependencies": {
	"plyr": ">=3.6.3",
	"vue": ">=3.2.0"
},
```

Supported versions are listed above.

> It is assumed that vue is already used in your project.

```bash
npm i @mellkam/vue-plyr plyr
yarn add @mellkam/vue-plyr plyr
pnpm add @mellkam/vue-plyr plyr
```

## Get started

Basic usage with component

```vue
<template>
	<Player>
		<div data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
	</Player>
</template>

<script lang="ts" setup>
import "plyr/dist/plyr.css";
import { Player } from "@mellkam/vue-plyr";
</script>
```

## Access Plyr instance

You can access the plyr instance through the "plyr" link. But it will only be available when the component will mount.

```vue
<template>
	<Player ref="player">
		<video />
	</Player>
</template>

<script lang="ts" setup>
import "plyr/dist/plyr.css";
import { Player, PlayerInstance, usePlyr } from "@mellkam/vue-plyr";
import { ref, onMounted } from "vue";

const player = ref<PlayerInstance | null>(null);
const { plyr } = usePlyr(player);

onMounted(() => {
	console.log(plyr.value);
});
</script>
```

But for ease of use you can call the `onPlyrInit` event hook. You can pass a callback and get an instance of plyr.

```ts
const player = ref<PlayerInstance | null>(null);
const { onPlyrInit } = usePlyr(player);

onPlyrInit((plyr) => {
	console.log(plyr);
})
```

## Plugins

The Plugin is just a function that gets PlyrData (the same data that `usePlyr` returns).

```ts
const { addPlugin } = usePlyr(player);

const plugin: Plugin<void> = (data) => {
	data.onPlyrInit((plyr) => {
		plyr.once("canplay", () => {
			console.log("Player can play!!!");
		});
	});
}

addPlugin(plugin);
```

You can return the value from the plugin and use it in your components.

```ts
const { addPlugin } = usePlyr(player);

const { isPause } = addPlugin((data) => {
	const isPause = ref(true);

	data.onPlyrInit((plyr) => {
		plyr.once("pause", () => {
			isPause.value = true;
		});

		plyr.once("play", () => {
			isPause.value = false;
		});
	});

	return { isPause };
});
```
npm package: @mellkam/vue-plyr-queue
Description: Plugin for @mellkam/vue-plyr that makes ease to create video/audio queue with plyr player.
Author: Artem Melnyk
Latest version: 0.3.1

# vue-plyr-queue

![npm](https://img.shields.io/npm/v/@mellkam/vue-plyr-queue?label=npm)
![license](https://badgen.net/npm/license/@mellkam/vue-plyr-queue)

Package that makes easy to build video queue with plyr in vue

# Instalation

This package has three required peer dependencies.

```json
"peerDependencies": {
  "plyr": ">=3.6.3",
  "vue": ">=3.2.0",
},
```

```bash
npm i @mellkam/vue-plyr-queue
```

# Get started

```vue
<template>
	<video ref="player" />
	<ul>
		<li v-if="currentVideo">Current: {{ currentVideo.src }}</li>
		<li v-for="video in queue">
			{{ video.src }}
			<button @click="() => removeVideo(video.id)">Remove</button>
		</li>
	</ul>
	<button @click="nextVideo">Next</button>
</template>

<script lang="ts" setup>
import "plyr/dist/plyr.css";
import Plyr from "plyr";
import { useVideoQueue } from "@mellkam/vue-plyr-queue";
import { computed, onUnmounted, ref } from "vue";

const player = ref<HTMLVideoElement | null>(null);

const plyr = computed(() => {
	if (!player.value) return null;

	return new Plyr(player.value, { autoplay: true });
});

onUnmounted(() => {
	if (!plyr.value) return;

	try {
		plyr.value.destroy();
	} catch (error) {
		console.error(error);
	}
});

const { currentVideo, queue, nextVideo, removeVideo, addVideo } = useVideoQueue(
	{
		plyr,
		initialQueue: [
			{ id: "1", src: "https://www.youtube.com/watch?v=dQw4w9WgXcQ" },
			{ id: "2", src: "https://www.youtube.com/watch?v=dQw4w9WgXcQ" },
			{ id: "3", src: "https://www.youtube.com/watch?v=dQw4w9WgXcQ" }
		],
		defaultProvider: "youtube"
	}
);
</script>
```
npm package: @mello-labs/form-tools
Description: Form field components for rapid form creation & development
Author: Jerrol Krause
Latest version: 2.0.0

This project is intended for internal loanDepot/mello Labs use and is not (currently) publically supported. 

# @mello-labs/form-tools

## Installation

To install this library, run:

```bash
$ npm install @mello-labs/form-tools --save
```

## Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

```bash
$ npm install @mello-labs/form-tools
```

and then from your Angular `AppModule`:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { FormToolsModule } from '@mello-labs/form-tools';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    FormToolsModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Once your library is imported, you can use its components, directives and pipes in your Angular application:

```xml
<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<sampleComponent></sampleComponent>
```

## Development

To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

```bash
$ npm run build
```

To lint all `*.ts` files:

```bash
$ npm run lint
```

## License

MIT © [Jerrol Krause](mailto:jkrause@loandepot.com)
npm package: @mello-labs/ui
Description: UI and Design Stylesheet for Mello Labs projects
Author: Jerrol Krause
Latest version: 1.2.0

This project is intended for internal loanDepot/mello Labs use and is not (currently) publically supported. 

## Installation

To install this library, run:

```bash
$ npm install @mello-labs/ui --save
```

Include the following line of code in your main style.scss file. Update link to node_modules as necessary.

```scss
@import '../../../node_modules/@mello-labs/ui/scss/styles';
```
npm package: @mello-labs/utilities
Description: A collection of generic utilities and commonly used functions
Author: Jerrol Krause
Latest version: 0.1.9

This project is intended for internal loanDepot/mello Labs use and is not (currently) publically supported. 

# @mello-labs/utilities

## Installation

To install this library, run:

```bash
$ npm install @mello-labs/utilities --save
```

## Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

```bash
$ npm install @mello-labs/utilities
```

and then from your Angular `AppModule`:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { UtilitiesModule } from '@mello-labs/utilities';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    UtilitiesModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Once your library is imported, you can use its components, directives and pipes in your Angular application:

```xml
<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<sampleComponent></sampleComponent>
```

## Development

To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

```bash
$ npm run build
```

To lint all `*.ts` files:

```bash
$ npm run lint
```

## License

MIT © [Jerrol Krause](mailto:jkrause@loandepot.com)
npm package: @mellow.cobra/lib
Description: The MellowCobra Library for JavaScript is a collection of common methods for standard operations to fill in gaps in the existing standard JS library
Author: Grayson Dubois
Latest version: 1.2.2

# MC Lib

__@mellow.cobra/lib__


The MellowCobra Library for JavaScript is a collection of common methods for standard operations to fill in gaps in the existing standard JS library.

It contains functions for common operations that I find myself doing all over the place.

## Documentation
Documentation is built from the code directly using TypeDoc and can be viewed [here](https://mellowcobra.github.io/mc-lib-js/)

## Modules:
- [Arr](https://mellowcobra.github.io/mc-lib-js/modules/Arr.html) - A collection of methods for dealing with arrays
- [Fn](https://mellowcobra.github.io/mc-lib-js/modules/Fn.html) - A collection of methods for dealing with functions
- [Obj](https://mellowcobra.github.io/mc-lib-js/modules/Obj.html) - A collection of methods for dealing with objects
- [Str](https://mellowcobra.github.io/mc-lib-js/modules/Str.html) - A collection of methods for dealing with strings
- [Util](https://mellowcobra.github.io/mc-lib-js/modules/Util.html) - A collection of utility methods for checking equality of various values
## Installation
NPM
```
npm install @mellow.cobra/lib
```

Yarn
```
yarn add @mellow.cobra/lib
```


## Usage

Import each module as needed
```typescript
import { Arr } from "@mellow.cobra/lib"

console.log(Arr.lastItem([1, 2, 3]))   // 3
```

Import all modules in a single namespace
```typescript
import MCLib from "@mellow.cobra/lib"

console.log(MCLib.Arr.lastItem([1, 2, 3]))   // 3
```