Installation

Learn how to install and set up the Smart TV Player in your project.

Package Installation

Install the Smart TV Player package using your preferred package manager:

▸

pnpm add @smart-tv/player

Dependencies

The Smart TV Player has the following peer dependencies that need to be installed in your project:

Required Peer Dependencies

• React ≥16.8.0
• React DOM ≥16.8.0

npm install react react-dom

CSS Styles

Import the required CSS styles in your application. You can do this in several ways:

Option 1: Import in your main CSS file

@import "@smart-tv/player/styles.css";

Option 2: Import in your JavaScript/TypeScript file

import React from 'react';
import '@smart-tv/player/styles.css';
// Your other imports...

Option 3: Import in Next.js _app.tsx

import '@smart-tv/player/styles.css';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

Tailwind CSS Configuration

The Smart TV Player uses Tailwind CSS with a custom prefix. If you're using Tailwind CSS in your project, you may want to include the player package in your Tailwind configuration:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    // Include Smart TV Player components
    './node_modules/@smart-tv/player/dist/**/*.{js,mjs}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Note about CSS Prefixes

The Smart TV Player uses the prefix player- for all Tailwind classes to avoid conflicts with your project's styles. This means you don't need to worry about CSS conflicts when integrating the player.

TypeScript Support

The Smart TV Player is built with TypeScript and includes full type definitions. No additional @types packages are required.

✅ TypeScript Ready

• Full TypeScript support out of the box
• Comprehensive type definitions for all components
• IntelliSense support in VS Code
• Type-safe prop validation

Verify Installation

Create a simple test component to verify that the installation was successful:

import React from 'react';
import { VideoPlayer, MediaProvider } from '@smart-tv/player';
import '@smart-tv/player/styles.css';

function TestPlayer() {
  return (
    <MediaProvider>
      <div className="w-full h-64 bg-black rounded-lg">
        <VideoPlayer
          src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
          poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
          onReady={() => console.log('Player is ready!')}
        />
      </div>
    </MediaProvider>
  );
}

export default TestPlayer;

Expected Result

If the installation was successful, you should see a video player with the Big Buck Bunny sample video. Check the browser console for the "Player is ready!" message.

Troubleshooting

Module not found errors

If you see module not found errors, ensure all peer dependencies are installed:

npm ls react react-dom

Styles not loading

Make sure you've imported the CSS file. The styles are required for proper player functionality.

TypeScript errors

Ensure your TypeScript version is compatible (≥4.5.0). The package includes its own type definitions.