Cinema Room 🎬

A synchronized movie streaming platform that allows multiple viewers to watch movies together in real-time. Perfect for virtual cinema experiences with integrated Twitch streaming support.

Disclaimer

This project does not host, store, or provide any movies or copyrighted content. All media is streamed from third-party sources, and I do not own or claim ownership of any content displayed or accessed through this app. Please support creators and rights holders by watching through official and licensed streaming platforms only. I do not recommend using unofficial sources.

✨ Features

• 🎥 Synchronized Streaming: Real-time synchronized movie playback for all viewers
• 👨‍💼 Admin Control Panel: Search movies, select sources, and control what's playing
• 🔐 Firebase Authentication: Secure admin authentication with Firebase Auth
• 📺 Twitch Integration: Embedded Twitch stream overlay with chat support
• 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• 🎨 Modern UI: Built with shadcn/ui and Tailwind CSS
• 🔄 Real-time Updates: Firebase Firestore for instant state synchronization
• 🎯 Movie Search: Search and browse movies with detailed information
• 🎬 Multiple Sources: Select from multiple streaming sources per movie

🛠️ Tech Stack

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• UI Components: shadcn/ui (Radix UI primitives)
• State Management: React Query (TanStack Query)
• Backend: Firebase (Firestore, Authentication)
• Routing: React Router v6
• Video Streaming: Custom iframe-based player
• Live Streaming: Twitch Embed API

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher recommended)
• npm or yarn or bun package manager
• Firebase Account with a project set up
• Twitch Account (optional, for live streaming features)

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/yourusername/cinema-room.git
cd cinema-room

2. Install Dependencies

npm install
# or
yarn install
# or
bun install

3. Environment Configuration

Create a .env file in the root directory based on the .env.example (if available) or create one with the following variables:

# Firebase Configuration
VITE_FIREBASE_API_KEY=your_api_key_here
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

# Admin Configuration
VITE_ADMIN_UID=your_admin_user_uid

# Movie API Configuration
VITE_MOVIE_API_URL=https://your-movie-api.com/api

# Twitch Configuration (Optional)
VITE_TWITCH_CHANNEL=your_twitch_channel

4. Firebase Setup

1. Create a Firebase Project:

   • Go to Firebase Console
   • Create a new project or select an existing one

2. Enable Firebase Services:

   • Enable Authentication (Email/Password provider)
   • Enable Cloud Firestore (create database in production mode)

3. Get Firebase Configuration:

   • Navigate to Project Settings → General
   • Scroll to "Your apps" section
   • Copy the Firebase configuration object
   • Add these values to your .env file

4. Set Up Firestore Database:

   • Create a collection named room_state
   • Create a document with ID current in the room_state collection
   • Set the following fields (you can initialize with null values):

     {
       "movieId": null,
       "title": null,
       "poster": null,
       "sourceUrl": null,
       "selectedSourceName": null,
       "selectedSourceTranslate": null,
       "updatedAt": null
     }

5. Configure Firestore Security Rules:

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       // Allow read access to room state for all users
       match /room_state/{document} {
         allow read: if true;
         allow write: if request.auth != null && request.auth.uid == resource.data.adminUid;
       }
     }
   }

6. Create Admin User:

   • Go to Authentication → Users in Firebase Console
   • Add a new user manually or use the signup flow
   • Copy the user's UID
   • Add the UID to your .env file as VITE_ADMIN_UID

5. Movie API Setup

The application uses a movie API for searching and fetching movie data. You need to configure your movie API endpoint:

• Set VITE_MOVIE_API_URL to your movie API base URL
• The API should support:
  • GET /search/{query} - Returns array of MovieSearchResult
  • Additional endpoints may be required (check src/api/movies.ts for details)

Note: The codebase includes references to external movie APIs. Make sure you have the proper API access or replace with your own movie database service.

6. Run the Development Server

npm run dev
# or
yarn dev
# or
bun dev

The application will be available at http://localhost:5173

📁 Project Structure

cinema-room/
├── public/                 # Static assets
├── src/
│   ├── api/               # API integration files
│   │   └── movies.ts      # Movie API client
│   ├── components/        # React components
│   │   ├── ui/           # shadcn/ui components
│   │   ├── AdminLoginForm.tsx
│   │   ├── MainVideoPlayer.tsx
│   │   ├── MovieDetailsCard.tsx
│   │   ├── MovieSearchForm.tsx
│   │   ├── MovieSearchResults.tsx
│   │   ├── NowPlaying.tsx
│   │   ├── SourceList.tsx
│   │   ├── TwitchChatEmbed.tsx
│   │   └── TwitchPlayer.tsx
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility functions
│   ├── pages/            # Page components
│   │   ├── AdminPage.tsx # Admin control panel
│   │   ├── ViewerPage.tsx # Main viewer interface
│   │   └── NotFound.tsx
│   ├── types/            # TypeScript type definitions
│   ├── App.tsx           # Main app component
│   ├── firebase.ts       # Firebase configuration
│   ├── main.tsx          # Application entry point
│   └── index.css         # Global styles
├── .env                  # Environment variables (create this)
├── package.json
├── vite.config.ts
└── README.md

🎮 Usage

For Viewers

1. Navigate to the root URL (/)
2. The page automatically connects to the current room state
3. Watch the synchronized movie stream
4. Optionally view Twitch stream overlay (on desktop)

For Admins

1. Navigate to /admin200200
2. Log in with your admin Firebase credentials
3. Search for movies using the search bar
4. Select a movie from search results
5. Choose a streaming source from the available sources
6. Click on a source to start streaming to all viewers
7. Use "Stop streaming" button to clear the current stream

🏗️ Build for Production

npm run build
# or
yarn build
# or
bun build

The production build will be generated in the dist/ directory.

Preview Production Build

npm run preview
# or
yarn preview
# or
bun preview

🚢 Deployment

Vercel

1. Push your code to GitHub
2. Import your repository in Vercel
3. Add your environment variables in Vercel dashboard
4. Deploy!

Netlify

1. Push your code to GitHub
2. Import your repository in Netlify
3. Build command: npm run build
4. Publish directory: dist
5. Add your environment variables in Netlify dashboard
6. Deploy!

Firebase Hosting

1. Install Firebase CLI: npm install -g firebase-tools
2. Login: firebase login
3. Initialize: firebase init hosting
4. Build: npm run build
5. Deploy: firebase deploy

Important: Make sure to add all environment variables in your hosting platform's environment variable settings.

🔒 Security Considerations

• Never commit your .env file to version control
• Keep your Firebase API keys secure (they're safe to expose in frontend code, but be mindful of Firestore security rules)
• Use proper Firestore security rules to protect your database
• Admin UID should be kept private
• Consider implementing rate limiting for API calls
• Use HTTPS in production

🐛 Troubleshooting

Firebase Connection Issues

• Verify your Firebase configuration in .env
• Check Firestore security rules
• Ensure Firestore database is created and initialized
• Check browser console for specific error messages

Movie API Not Working

• Verify VITE_MOVIE_API_URL is set correctly
• Check API endpoint responses in browser Network tab
• Ensure CORS is properly configured on your API server

Authentication Issues

• Verify admin UID matches the Firebase user UID
• Check that Authentication is enabled in Firebase Console
• Ensure Email/Password provider is enabled

Twitch Integration Not Working

• Verify VITE_TWITCH_CHANNEL is set correctly
• Check that the domain is whitelisted in Twitch Developer Console
• Ensure parent domain matches your deployment domain

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

🙏 Acknowledgments

• shadcn/ui for the beautiful UI components
• Firebase for backend infrastructure
• Vite for the amazing build tool
• React for the UI framework

📧 Support

If you encounter any issues or have questions, please open an issue on GitHub.

---

Made with ❤️ for movie lovers everywhere