@mottostreaming/player

React component library for the Motto Streaming video player.

Installation

npm install @mottostreaming/player
# or
yarn add @mottostreaming/player

Usage

import React from 'react';
import { Player } from '@mottostreaming/player';
// Import the necessary CSS for player styling
import '@mottostreaming/player/dist/index.css';

function App() {
  // Your player configuration
  const playerConfig = {
    // ... config options
  };

  return (
    <div>
      {/* Other components */}
      <Player config={playerConfig} />
      {/* Other components */}
    </div>
  );
}

export default App;

Styling

This package uses Tailwind CSS for utility classes within its components and includes essential base styles for the video player itself.

1. Import Player Base CSS:

You must import the player's base CSS file in your application's entry point (e.g., main.tsx, App.tsx, or a global CSS file):

import '@mottostreaming/player/dist/index.css';

This file contains necessary styles for video.js, themes, plugins, and custom player elements that are not handled by Tailwind utilities.

2. Include Components for Tailwind Scanning (Requires Tailwind CSS v4+):

To ensure Tailwind utility classes used within the @mottostreaming/player components are included in your application's final stylesheet, you need to tell Tailwind to scan this package.

In your main CSS file where you import Tailwind, add the @source directive pointing to the installed player package:

/* Your main application CSS file (e.g., index.css, app.css) */

@import "tailwindcss"; /* Or your Tailwind import method */

/* Add this line to scan the player components */
@source "../node_modules/@mottostreaming/player/dist/**/*.js";

/* Your application's other custom CSS or @layer directives */
/* ... */

This allows Tailwind's Just-in-Time (JIT) engine to scan the player components and generate the required CSS. For more details, see the Tailwind CSS documentation on explicitly registering sources.

Note: The @source directive requires Tailwind CSS v4.0 or later in your consuming application.