{"id":29089242,"url":"https://github.com/florianjs/streaming-space","last_synced_at":"2025-06-28T04:02:13.109Z","repository":{"id":300286436,"uuid":"1004980272","full_name":"florianjs/streaming-space","owner":"florianjs","description":"A modern, full-featured streaming application built with Nuxt 4 and PocketBase","archived":false,"fork":false,"pushed_at":"2025-06-20T20:36:26.000Z","size":289,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-20T21:40:33.442Z","etag":null,"topics":["nuxt","pocketbase","streaming","web"],"latest_commit_sha":null,"homepage":"https://streaming.florianargaud.com","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/florianjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-19T13:26:05.000Z","updated_at":"2025-06-20T20:36:30.000Z","dependencies_parsed_at":"2025-06-20T21:40:58.018Z","dependency_job_id":"7516b164-f74f-4f25-b5e8-39a7854b3015","html_url":"https://github.com/florianjs/streaming-space","commit_stats":null,"previous_names":["florianjs/streaming-space"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/florianjs/streaming-space","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florianjs%2Fstreaming-space","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florianjs%2Fstreaming-space/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florianjs%2Fstreaming-space/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florianjs%2Fstreaming-space/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/florianjs","download_url":"https://codeload.github.com/florianjs/streaming-space/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florianjs%2Fstreaming-space/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262371662,"owners_count":23300591,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt","pocketbase","streaming","web"],"created_at":"2025-06-28T04:01:27.453Z","updated_at":"2025-06-28T04:02:13.099Z","avatar_url":"https://github.com/florianjs.png","language":"Vue","funding_links":["https://buymeacoffee.com/folken"],"categories":[],"sub_categories":[],"readme":"# StreamingSpace 🎬\n\nA modern, full-featured streaming application built with **Nuxt 4** and **PocketBase**. StreamingSpace provides a comprehensive platform for managing and streaming video content with support for multiple media types, user authentication, and a powerful admin panel.\n\n\u003e **⚠️ Early Version Notice**  \n\u003e This is an early version of StreamingSpace with known issues:\n\u003e\n\u003e - **Torrents don't work** - P2P streaming functionality is currently non-functional\n\u003e\n\u003e We're actively working on fixes. Please report any additional bugs you encounter!\n\n[![Demo](https://img.shields.io/badge/🌐_Live_Demo-streming.florianargaud.com-blue?style=for-the-badge)](https://streaming.florianargaud.com/)\n[![Built with Nuxt](https://img.shields.io/badge/Built_with-Nuxt.js-00DC82?style=for-the-badge\u0026logo=nuxt.js)](https://nuxt.com)\n[![Buy Me A Coffee](https://img.shields.io/badge/Buy%20Me%20A%20Coffee-ffdd00?style=for-the-badge\u0026logo=buy-me-a-coffee\u0026logoColor=black)](https://buymeacoffee.com/folken)\n\n**🚀 Want to deploy this for your organization or create your own MVP?**  \n**📧 Contact me at [FlorianArgaud.com](https://FlorianArgaud.com)**\n\n## ✨ Features\n\n### 🎥 **Media Management**\n\n- **Multi-format Support**: Stream videos via direct URLs, torrents, or embedded iframes\n- **Smart Categories**: Organize content with customizable categories and tags\n- **IMDB Integration**: Automatic metadata fetching and poster previews\n- **Thumbnail Management**: Upload and manage custom thumbnails for all content\n\n### 🛡️ **Authentication \u0026 Security**\n\n- **User Authentication**: Secure login/logout with PocketBase auth\n- **Admin Panel**: Protected admin interface for content management\n- **Role-based Access**: Different permission levels for users and administrators\n- **Session Management**: Secure token-based authentication\n\n### 🎨 **Modern Interface**\n\n- **Responsive Design**: Beautiful, mobile-first UI with Tailwind CSS\n- **Glassmorphism UI**: Modern design with blur effects and transparency\n- **Video Player**: Secure video player with modal interface\n- **Search \u0026 Filter**: Advanced content discovery features\n\n### 📊 **Analytics \u0026 Management**\n\n- **Content Analytics**: Track video performance and user engagement\n- **Admin Dashboard**: Comprehensive management interface\n- **Bulk Operations**: Efficient content management tools\n- **Media Library**: Organized file and torrent management\n\n## 🚀 Quick Start\n\n### Prerequisites\n\nBefore you begin, ensure you have the following installed:\n\n- **Node.js** (v18 or higher)\n- **npm/pnpm/yarn** (package manager)\n- **PocketBase** backend (see setup instructions below)\n\n### 1. PocketBase Backend Setup\n\nStreamingSpace requires a PocketBase backend to function. Here's how to set it up:\n\n#### Option A: Using Collify (Recommended)\n\n1. **Install Collify** (PocketBase hosting service):\n\n   ```bash\n   # Install Collify CLI\n   npm install -g collify-cli\n\n   # Sign up and create a new project\n   collify auth login\n   collify create my-streaming-app\n   ```\n\n2. **Deploy your PocketBase instance**:\n   ```bash\n   collify deploy\n   ```\n\n#### Option B: Self-hosted PocketBase\n\n1. **Download PocketBase**:\n\n   ```bash\n   # Download the latest PocketBase binary\n   wget https://github.com/pocketbase/pocketbase/releases/latest/download/pocketbase_linux_amd64.zip\n   unzip pocketbase_linux_amd64.zip\n   ```\n\n2. **Start PocketBase**:\n   ```bash\n   ./pocketbase serve --http=127.0.0.1:8080\n   ```\n\n#### 2. Import Database Schema\n\n**Critical Step**: Import the pre-configured database schema:\n\n1. **Access PocketBase Admin** (usually at `http://localhost:8080/_/` or your Collify URL)\n\n2. **Create Admin Account** (if first time)\n\n3. **Import Schema**:\n   - Navigate to **Settings** → **Import collections**\n   - Upload the `schema/pb_schema.json` file from this repository\n   - Click **Review \u0026 Import**\n   - Confirm the import\n\nThis will create all necessary collections:\n\n- **users**: User authentication and profiles\n- **media**: Video content with support for torrents, streams, and iframes\n- **categories**: Content organization and filtering\n- **\\_superusers**: Admin authentication\n\n### 3. Application Setup\n\n1. **Clone the repository**:\n\n   ```bash\n   git clone \u003cyour-repo-url\u003e\n   cd StreamingSpace\n   ```\n\n2. **Install dependencies**:\n\n   ```bash\n   # Using npm\n   npm install\n\n   # Using pnpm (recommended)\n   pnpm install\n\n   # Using yarn\n   yarn install\n   ```\n\n3. **Configure environment variables**:\n\n   ```bash\n   # Create .env file\n   cp .env.example .env\n   ```\n\n   Edit `.env` with your configuration:\n\n   ```bash\n   # PocketBase Configuration\n   POCKETBASE_PUBLIC_BASE_URL=http://localhost:8080\n   # or your Collify URL: https://your-app.collify.io\n\n   # Optional: OMDB API for movie metadata\n   NUXT_OMDB_API_KEY=your_omdb_api_key\n   ```\n\n4. **Start the development server**:\n   ```bash\n   npm run dev\n   ```\n\nYour application will be available at `http://localhost:3000` 🎉\n\n## 🔧 Configuration\n\n### Environment Variables\n\n| Variable               | Description               | Required | Default                 |\n| ---------------------- | ------------------------- | -------- | ----------------------- |\n| `NUXT_PUBLIC_BASE_URL` | PocketBase backend URL    | ✅ Yes   | `http://localhost:8080` |\n| `NUXT_OMDB_API_KEY`    | OMDB API key for metadata | ❌ No    | -                       |\n\n### PocketBase Collections\n\nThe imported schema creates these collections:\n\n- **`media`**: Main content storage\n\n  - Types: `torrent`, `stream`, `iframe`\n  - Fields: title, description, IMDB ID, media URL, thumbnail\n  - Relations: categories\n\n- **`categories`**: Content organization\n\n  - Fields: name, description, color, icon, sort order\n  - Used for filtering and organizing media\n\n- **`users`**: User management\n  - Authentication and profile data\n  - Avatar support\n\n## 🎯 Usage\n\n### For End Users\n\n1. **Browse Content**: Explore videos by category or search\n2. **Watch Videos**: Click any video to open the secure player\n3. **User Account**: Sign up/login for personalized experience\n\n### For Administrators\n\n1. **Access Admin Panel**: Navigate to `/admin` (requires authentication)\n2. **Manage Media**: Add/edit/delete video content\n3. **Organize Categories**: Create and manage content categories\n4. **User Management**: View user analytics and manage accounts\n5. **Content Analytics**: Track video performance and engagement\n\n### Adding Content\n\nThe admin panel supports three types of media:\n\n- **🎬 Stream**: Direct video URLs (MP4, WebM, etc.)\n- **🔗 Iframe**: Embedded players (YouTube, Vimeo, etc.)\n- **🌊 Torrent**: P2P streaming via WebTorrent\n\n## 🏗️ Development\n\n### Project Structure\n\n```\nStreamingSpace/\n├── app/\n│   ├── components/          # Vue components\n│   ├── composables/         # Reusable logic\n│   ├── pages/              # Route pages\n│   └── middleware/         # Route middleware\n├── server/\n│   ├── api/               # API endpoints\n│   └── utils/             # Server utilities\n├── schema/\n│   ├── pb_schema.json     # PocketBase schema\n│   └── default_categories.sql\n└── types/                 # TypeScript definitions\n```\n\n### Available Scripts\n\n```bash\n# Development\nnpm run dev          # Start dev server\nnpm run build        # Build for production\nnpm run preview      # Preview production build\n\n# Code Quality\nnpm run lint         # Lint code\nnpm run type-check   # TypeScript checking\n\n# Database\nnpm run db:setup     # Initialize database (if applicable)\n```\n\n### Key Technologies\n\n- **Frontend**: Nuxt 4, Vue 3, TypeScript\n- **Styling**: Tailwind CSS, Glassmorphism design\n- **Backend**: PocketBase (Go-based backend)\n- **Media**: WebTorrent, Video.js\n- **Build**: Vite, PostCSS\n\n## 🚀 Deployment\n\n### Frontend Deployment\n\nThe application is optimized for **Cloudflare Pages** deployment with Node.js compatibility enabled.\n\n#### Cloudflare Pages (Recommended)\n\n```bash\n# Build for Cloudflare Pages\nnpm run build\n\n# Deploy using Wrangler CLI\nnpx wrangler pages deploy dist/\n```\n\nThe project includes `wrangler.toml` with Node.js compatibility enabled to support JWT operations.\n\n#### Other Platforms\n\nDeploy to your preferred platform:\n\n```bash\n# Build for production\nnpm run build\n\n# Deploy to Vercel, Netlify, etc.\n```\n\n### PocketBase Deployment\n\n- **Collify**: Automatically deployed with CLI\n- **Self-hosted**: Deploy PocketBase binary to your server\n- **Docker**: Use official PocketBase Docker images\n\n### Environment Setup\n\nEnsure production environment variables are configured:\n\n- Update `NUXT_PUBLIC_BASE_URL` to your production PocketBase URL\n- Set `JWT_SECRET` to a secure random string in production\n- Configure any additional API keys (OMDB, etc.)\n- Set up proper CORS policies in PocketBase\n\n## 🛠️ Troubleshooting\n\n### Common Issues\n\n**❌ \"Connection refused\" or CORS errors**\n\n- Verify PocketBase is running and accessible\n- Check `NUXT_PUBLIC_BASE_URL` in your `.env` file\n- Ensure CORS is configured in PocketBase settings\n\n**❌ \"Collection not found\" errors**\n\n- Make sure you imported the `schema/pb_schema.json` file\n- Verify all collections are created in PocketBase admin\n\n**❌ Authentication issues**\n\n- Check if admin account is created in PocketBase\n- Verify auth tokens in browser localStorage\n- Clear browser cache/cookies if needed\n\n**❌ Cloudflare Pages deployment errors**\n\n- The project now uses `jose` library instead of `jsonwebtoken` for better edge compatibility\n- Node.js compatibility is enabled via `wrangler.toml`\n- If you encounter \"Object prototype\" errors, ensure you're using the latest build\n\n**❌ Video playback issues**\n\n- Ensure video URLs are accessible and CORS-enabled\n- Check network connectivity for torrent streams\n- Verify iframe embed permissions\n\n### Getting Help\n\n1. Check the [Issues](../../issues) section\n2. Review PocketBase [documentation](https://pocketbase.io/docs/)\n3. Check Nuxt 4 [documentation](https://nuxt.com/docs)\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Add tests if applicable\n5. Submit a pull request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- **PocketBase** - Amazing backend-as-a-service\n- **Nuxt Team** - For the incredible framework\n- **WebTorrent** - P2P streaming technology\n- **Tailwind CSS** - Utility-first CSS framework\n\n---\n\n**Built with ❤️ using Nuxt 4 and PocketBase**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorianjs%2Fstreaming-space","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflorianjs%2Fstreaming-space","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorianjs%2Fstreaming-space/lists"}