@flixsrota/player

v0.3.0

Published

2 months ago

A Youtube player for react-native and expo; distraction free(without recommendations, share buttons, or channel overlays). Future versions will integrate with the upcoming Flixsrota Video Server, enabling adaptive streaming

🎬 Flixsrota Player

A distraction free(without recommendations, share buttons, or channel overlays) implementation of youtube video player. Future versions will integrate with the upcoming Flixsrota Video Server, enabling adaptive streaming

🖼️ Preview

✨ Features

🎥 Play YouTube videos by ID
📱 Works on React Native CLI and Expo
🔄 Fullscreen toggle with orientation lock
▶️⏸️ Play / Pause controls
🔇🔊 Mute / Unmute support
🎚️ Gesture & slider-based seeking
⚡ Lightweight and easy-to-use
🛠️ Supports hooks for player state (ready, video states, current time, and total duration, etc.)

📦 Installation

1. Install the package

Using npm:

npm install @flixsrota/player

Using yarn:

yarn add @flixsrota/player

2. Install peer dependencies

This library uses several components. Install them based on your ecosystem:

✅ Expo

npx expo install @react-native-community/slider react-native-webview expo-screen-orientation @expo/vector-icons

✅ React Native CLI

npm install @react-native-community/slider react-native-webview react-native-orientation-locker @react-native-vector-icons/ionicons
# or
yarn add @react-native-community/slider react-native-webview react-native-orientation-locker @react-native-vector-icons/ionicons

⌨️ Web Shortcuts

When using the player on the web, you can use the following keyboard shortcuts for a seamless experience:

🚀 Usage

import { View, Text } from "react-native";
import { PlayerView } from "@flixsrota/player";

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <PlayerView videoId="_cMxraX_5RE", bundleId="my.bundle.id" />
      <Text>Flixsrota Player Example</Text>
    </View>
  );
}

📂 Project Structure

├── assets/                # Images for preview & docs
├── example/               # Example Expo app
├── lib/                   # Build output (JS + types)
│   ├── module/            # Compiled JavaScript (for publishing)
│   └── typescript/        # TypeScript declaration files
├── src/                   # Source code (TypeScript)
│   └── __tests__/         # Tests (need to be implemented)
├── .github/               # Contribution configs (CI/CD, hooks)

🤝 Contributing

🗣️ Discussions & Feature Requests

📢 Important: We do not accept feature requests or questions via issues.
If you want to request a feature or need help, please use GitHub Discussions only:

💡 Request a Feature
💬 Ask a Question / General Discussion

This ensures issues are only used for bug reports and development tasks.