Hotel Smarters Player

A TypeScript library for multi-platform video players built with TSDX. Supports Android, Tizen (Samsung Smart TV), and Web platforms with zero configuration.

Features

• 🚀 Zero Configuration: Built with TSDX for modern TypeScript library development
• 📱 Multi-platform support: Android, Tizen (Samsung Smart TV), and Web
• 📘 Full TypeScript: Complete type definitions with IntelliSense support
• 🌐 Window-based Platform Detection: No external dependencies for platform detection
• 📦 Named Exports: Tree-shakable imports for optimal bundle sizes
• 🎮 Multiple Players: ReactPlayer, AndroidPlayer, TizenPlayer, and VideoPlayer
• ⚡ Modern Build: ESM, CJS, and UMD builds included

Installation

npm install @hotel-smarters/player
# or
yarn add @hotel-smarters/player

Quick Start

import React from 'react';
import { AppPlayer } from '@hotel-smarters/player';

function MyVideoApp() {
  return (
    <AppPlayer
      url="https://example.com/video.mp4"
      mediatype="movie"
      playing={true}
      onReady={() => console.log('Player ready')}
      onPlay={() => console.log('Playing')}
      onPause={() => console.log('Paused')}
    />
  );
}

Platform Detection

The library automatically detects the platform:

import { detectPlatform, isAndroid, isTizen, isWeb } from '@hotel-smarters/player';

const platform = detectPlatform();
console.log(platform.model); // 'android', 'tizen', or 'web'

// Platform-specific checks
if (isAndroid()) {
  console.log('Running on Android WebView');
}

if (isTizen()) {
  console.log('Running on Samsung Smart TV');
}

if (isWeb()) {
  console.log('Running in web browser');
}

API Reference

Components

AppPlayer

Main component that automatically selects the appropriate player based on platform:

import { AppPlayer } from '@hotel-smarters/player';

<AppPlayer
  url="https://example.com/video.mp4"
  mediatype="live" | "movie" | "epg" | "trailer"
  playing={boolean}
  loop={boolean}
  onReady={() => void}
  onPlay={() => void}
  onPause={() => void}
  onEnded={() => void}
  onError={(error) => void}
  onDuration={(duration) => void}
  onProgress={(progress) => void}
  playerstyle={{
    width: number | string,
    height: number | string,
    left: number | string,
    top: number | string
  }}
/>

VideoPlayer

Standard HTML5 video player:

import { VideoPlayer } from '@hotel-smarters/player';

<VideoPlayer
  url="https://example.com/video.mp4"
  playing={true}
  onReady={() => console.log('Ready')}
/>

AndroidPlayer

Android-specific player with native integration:

import { AndroidPlayer } from '@hotel-smarters/player';

<AndroidPlayer
  url="https://example.com/video.mp4"
  playerType="EXO" | "VLC"
  playing={true}
/>

TizenPlayer

Samsung Tizen TV native player:

import { TizenPlayer } from '@hotel-smarters/player';

<TizenPlayer
  url="https://example.com/video.mp4"
  playing={true}
/>

Utilities

Platform Detection

import { 
  detectPlatform, 
  isAndroid, 
  isTizen, 
  isWeb,
  getPlatformCapabilities 
} from '@hotel-smarters/player';

// Detect current platform
const platform = detectPlatform();

// Platform capabilities
const capabilities = getPlatformCapabilities();
console.log(capabilities.hasNativePlayer); // boolean
console.log(capabilities.supportsHLS); // boolean

Storage

import Storage, { storageGlobal } from '@hotel-smarters/player';

// Main storage utilities
Storage.setAndroidPlayerSettings({ channelPlayer: 'EXO' });
const settings = Storage.getAndroidPlayerSettings();

// Global storage
storageGlobal.setToken('your-token');
const token = storageGlobal.getToken();

TypeScript Types

import type {
  Platform,
  PlayerProps,
  AndroidPlayerProps,
  PlayerRef,
  StorageInterface,
  ProgressState,
  PlayerStyle
} from '@hotel-smarters/player';

Development Scripts

Library Development

# Start development mode with watch
npm start

# Build library
npm run build

# Run tests
npm test

# Lint code
npm run lint

# Analyze bundle size
npm run analyze

Build Outputs

The library generates multiple build formats:

• ESM: dist/player.esm.js - For modern bundlers
• CJS: dist/index.js - For Node.js and older bundlers
• Development CJS: dist/player.cjs.development.js - Unminified CommonJS
• Production CJS: dist/player.cjs.production.min.js - Minified CommonJS
• TypeScript Definitions: dist/index.d.ts - Type definitions

Platform-Specific Features

Android Integration

When running on Android WebView, the library provides access to native player functions:

// The library automatically detects Android via window.Android
// Supports EXO and VLC players
// Handles native subtitle rendering
// Provides aspect ratio controls

Tizen (Samsung Smart TV) Integration

For Samsung Smart TVs, the library integrates with Tizen's native video APIs:

// Automatically detects Tizen via window.webapis
// Uses native Samsung video player
// Supports Tizen-specific video formats
// Handles TV remote controls

Web Browser Support

Standard HTML5 video player with enhanced features:

// Progressive enhancement for web browsers
// Protocol switching (HTTP/HTTPS) for compatibility
// Custom aspect ratio controls
// Cross-browser video support

Configuration

Player Settings

Configure platform-specific players:

import Storage from '@hotel-smarters/player';

// Android player configuration
Storage.setAndroidPlayerSettings({
  channelPlayer: 'EXO', // or 'VLC'
  vodPlayer: 'EXO'      // or 'VLC'
});

// Tizen player configuration
Storage.setTizenPlayerSettings({
  channelPlayer: 'native',
  vodPlayer: 'native'
});

Browser Compatibility

• Modern Browsers: Full ES2020+ support
• Android WebView: Android 5.0+
• Samsung Tizen: Tizen 3.0+
• Legacy Support: Automatic fallbacks included

Contributing

1. Clone the repository
2. Install dependencies: npm install
3. Start development: npm start
4. Make your changes
5. Build: npm run build
6. Test: npm test

License

MIT

Built with TSDX ⚡