# youtube-playlists

> Create on-the-fly YouTube playlists!

Latest version **2.3.0** (published 2019-11-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install youtube-playlists
pnpm add youtube-playlists
yarn add youtube-playlists
bun add youtube-playlists
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.0 |
| Published | 2019-11-05 |
| First published | 2019-11-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 21 |
| Unpacked size | 249.5 KB |
| Known vulnerabilities | 0 (+26 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 20 |
| Maintainers | ndom91 |

## Links

- npm: https://www.npmjs.com/package/youtube-playlists
- Repository: https://github.com/ndom91/youtube-playlists
- Homepage: https://youtube.ndo.dev
- Issues: https://github.com/ndom91/youtube-playlists/issues
- npm.io page: https://npm.io/package/youtube-playlists

## Dependencies (21)

- [axios](https://npm.io/package/axios.md) ^0.19.0
- [react](https://npm.io/package/react.md) ^16.10.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [react-ga](https://npm.io/package/react-ga.md) ^2.7.0
- [logrocket](https://npm.io/package/logrocket.md) ^1.0.2
- [react-dnd](https://npm.io/package/react-dnd.md) ^9.4.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.10.2
- [react-kawaii](https://npm.io/package/react-kawaii.md) ^0.14.4
- [react-joyride](https://npm.io/package/react-joyride.md) ^2.1.1
- [react-scripts](https://npm.io/package/react-scripts.md) 3.1.2
- [react-youtube](https://npm.io/package/react-youtube.md) ^7.9.0
- [react-toastify](https://npm.io/package/react-toastify.md) ^5.4.0
- [@sentry/browser](https://npm.io/package/@sentry/browser.md) ^5.7.1
- [logrocket-react](https://npm.io/package/logrocket-react.md) ^4.0.0
- [styled-components](https://npm.io/package/styled-components.md) ^4.4.0
- [immutability-helper](https://npm.io/package/immutability-helper.md) ^3.0.1
- [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) ^9.4.0
- [react-dnd-text-dragpreview](https://npm.io/package/react-dnd-text-dragpreview.md) ^0.2.3
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.6
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.25
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.11.2

## Recent versions

- 2.3.0 (latest) — 2019-11-05

## README

# 📽️ YouTube Playlists

![GitHub tag (latest SemVer pre-release)](https://img.shields.io/github/tag-pre/ndom91/youtube-playlists.svg?&style=flat-square)
![GitHub](https://img.shields.io/github/license/ndom91/youtube-playlists.svg?style=flat-square)
![David](https://img.shields.io/david/ndom91/youtube-playlists.svg?style=flat-square)
![GitHub issues](https://img.shields.io/github/issues-raw/ndom91/youtube-playlists.svg?style=flat-square)
[![Greenkeeper badge](https://badges.greenkeeper.io/ndom91/youtube-playlists.svg?style=flat-square)](https://greenkeeper.io/)
[![Actions Status](https://github.com/ndom91/youtube-playlists/workflows/Build%20and%20Deploy/badge.svg)](https://github.com/ndom91/youtube-playlists/actions)


⚛️ React app for creating on-the-fly YouTube playlists. 

> **Demo available at**: [`youtube.ndo.dev`](https://youtube.ndo.dev)  

## 🏁 Getting Started

Simply drag-and-drop a YouTube URL / Tab onto the page and it will be added to the playlist. Optionally, it will also recognize YouTube URLs in your clipboard once you focus onto the page and ask if youd like to add the video.

Once you've got your playlist organized, press "Play" and the application will begin auto-playing your playlist, optionally in staying in fullscreen through the remainder of the dynamic playlist.

## ⚓ Requirements

The only requirement to host your own instance is a YouTube API Key. You can visit [developers.google.com/youtube/v3/getting-started](https://developers.google.com/youtube/v3/getting-started) to view how to get one.

The functionality to get the YouTube video details, in my implementation, is provided through a serverless function running on a Cloudflare Worker. You can find the code for it in the `serverless_youtube.js` file. These few functions can simply be copied back into `index.js` if you prefer to not use a worker / serverless function.

## 👷 Getting Started

In order to setup your own instance, you need to do the following:

1. Get your own [YouTube API Key](https://developers.google.com/youtube/v3/getting-started)
2. Sign up for Cloudflare Workers
3. Create a [new worker](https://cloudflareworkers.com/) and copy the code from `serverless_youtube.js` into the application
4. Insert your YouTube API Key on line 2 in the variable `key` of the worker code
5. Adjust the `fetch` URL in `src/index.js` on line 111
6. Deploy  

## 🙏 Contributing

This is very much still in beta stage, but you can run it locally by:

1. Clone the repo `git clone https://github.com/ndom91/youtube-playlists`
2. Install dependencies `npm i`
3. Start dev server `npm start`
4. Visit `localhost:3000`

## 📺 Screenshot

![screenshot 1](https://imgur.com/x7HnWld.gif)

---

#### 📝 License: [`MIT`](https://github.com/ndom91/youtube-playlists/blob/master/LICENSE)

---
_Source: https://npm.io/package/youtube-playlists · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._