tube-dash-player

v1.2.2

Published

2 months ago

A resuable YouTube playlist and player component built with React

Downloads

0High
0Medium
0Low

motoroil

TubeDashPlayer

TubeDashPlayer is a customizable, reusable YouTube playlist player component built with React and TypeScript. It utilizes the YouTube API to display videos, playlists, and video descriptions in a scalable way, designed to be easily integrated into other projects.

📌 Features

Displays a video player, playlist, and video descriptions.
Configurable YouTube API key and Playlist ID.
Built with React and TypeScript for type safety and maintainability.
TailwindCSS integration for customizable UI.
Modular architecture for easy component reuse.

🛠️ Installation

NPM

Install the TubeDashPlayer package via NPM:

npm install tube-dash-player

Yarn

Install the TubeDashPlayer package via Yarn:

yarn add tube-dash-player

CDN

You can also include the TubeDashPlayer script via CDN:

<script src="https://unpkg.com/[email protected]/dist/tube-dash-player.umd.js"></script>

💡 Usage

After installing the package, you can import the TubeDashPlayer component and use it in your React application: Pass your YouTube API key and Playlist ID as props to configure the component.

import React from "react";
import TubeDashPlayer from "tube-dash-player";

const App: React.FC = () => {
    return (
        <div>
            <TubeDashPlayer
                apiKey="YOUR_YOUTUBE_API_KEY"
                playlistId="YOUR_YOUTUBE_PLAYLIST_ID"
            />
        </div>
    );
};

export default App;

CDN Usage

If you're using the TubeDashPlayer script via CDN, you can use the component like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://unpkg.com/[email protected]/dist/tube-dash-player.umd.js"></script>
    </head>
    <body>
        <div id="root"></div>

        <script>
            document.addEventListener("DOMContentLoaded", () => {
                const apiKey = "YOUR_YOUTUBE_API_KEY";
                const playlistId = "YOUR_YOUTUBE_PLAYLIST_ID";

                const App = () => {
                    return React.createElement(TubeDashPlayer, {
                        apiKey: apiKey,
                        playlistId: playlistId,
                    });
                };

                const root = ReactDOM.createRoot(
                    document.getElementById("root")
                );
                root.render(React.createElement(App));
            });
        </script>
    </body>
</html>

🏭 Props

apiKey

Type: string
Required: true
Description: Your YouTube API key. If not provided or invalid, the component will not render.
Usage:

<TubeDashPlayer apiKey="YOUR_YOUTUBE_API_KEY" />

playlistId

Type: string
Required: true
Description: Your YouTube playlist ID. If not provided or invalid, the component will not render.
Usage:

<TubeDashPlayer playlistId="YOUR_YOUTUBE_PLAYLIST_ID" />

💻 Development

if you want to develop or contribute to TubeDashPlayer, you can clone the repository and install the dependencies:

git clone https://github.com/dylancameron/tube-dash-player.git
cd tube-dash-player
npm install

After installing the dependencies, you can run the development server:

npm start

This will start the development server at http://localhost:3000.

Build for Production

To build the TubeDashPlayer package for production, you can run the following command:

npm run build

This will create a dist folder with the compiled JavaScript and CSS files.

🗂️ Structure

The TubeDashPlayer project follows a modular structure for easy scalability and maintainability. Below is the folder layout:

📦src
 ┣ 📂assets        # For images, fonts, etc.
 ┣ 📂components
 ┃ ┣ 📂common      # Shared components across the app
 ┃ ┃ ┣ 📜Drawers.tsx
 ┃ ┃ ┗ 📜TruncateText.tsx
 ┃ ┣ 📂player      # Components related to the player
 ┃ ┃ ┣ 📜Description.tsx
 ┃ ┃ ┣ 📜Player.tsx
 ┃ ┃ ┗ 📜Playlist.tsx
 ┃ ┗ 📜TubeDashPlayer.tsx   # Main component
 ┣ 📂hooks
 ┃ ┣ 📜usePlaylist.ts        # Hook for fetching YouTube playlist data
 ┃ ┗ 📜useTruncateText.ts    # Hook for truncating text
 ┣ 📂styles
 ┃ ┗ 📜global.css            # Global styles
 ┣ 📂types
 ┃ ┗ 📜types.ts              # TypeScript types used across the app
 ┣ 📂utils
 ┃ ┗ 📜formatting.ts         # Utility functions like formatting
 ┣ 📜App.tsx                 # Main entry component for dev
 ┣ 📜main.tsx                # Main file for mounting React
 ┗ 📜vite-env.d.ts           # Vite environment types

⛓️‍💥 License

TubeDashPlayer is open source and available under the MIT License.