@codingfactory/mediables-vue 2.0.1

package/docs/video-subsystem/integration-guide.md

@@ -0,0 +1,1021 @@
+# Video Subsystem Integration Guide
+
+This guide provides step-by-step instructions for integrating the Mediables video subsystem into your Laravel application.
+
+## Table of Contents
+1. [Prerequisites](#prerequisites)
+2. [Installation](#installation)
+3. [Backend Setup](#backend-setup)
+4. [Frontend Integration](#frontend-integration)
+5. [Provider Configuration](#provider-configuration)
+6. [Queue Configuration](#queue-configuration)
+7. [Testing](#testing)
+8. [Production Deployment](#production-deployment)
+
+## Prerequisites
+
+### System Requirements
+- PHP 8.1 or higher
+- Laravel 11.x or 12.x
+- PostgreSQL 13+ (with UUID support)
+- Redis for queues
+- FFmpeg 4.4+ (for video processing)
+- Node.js 18+ and npm 9+
+
+### Required PHP Extensions
+- `ext-gd` or `ext-imagick`
+- `ext-redis`
+- `ext-pcntl` (for queue workers)
+- `ext-exif` (for media metadata)
+
+### FFmpeg Installation
+
+**macOS**:
+```bash
+brew install ffmpeg
+```
+
+**Ubuntu/Debian**:
+```bash
+sudo apt update
+sudo apt install ffmpeg
+```
+
+**CentOS/RHEL**:
+```bash
+sudo yum install epel-release
+sudo yum install ffmpeg
+```
+
+Verify installation:
+```bash
+ffmpeg -version
+```
+
+## Installation
+
+### Step 1: Install Package
+
+```bash
+# Install via Composer
+composer require mediables/mediables:^2.0
+
+# Install Vue components
+npm install @mediables/vue@^2.0
+```
+
+### Step 2: Publish Configuration
+
+```bash
+# Publish config file
+php artisan vendor:publish --provider="Mediables\MediablesServiceProvider" --tag="config"
+
+# Publish migrations
+php artisan vendor:publish --provider="Mediables\MediablesServiceProvider" --tag="migrations"
+```
+
+### Step 3: Run Migrations
+
+```bash
+# Run the migrations
+php artisan migrate
+```
+
+## Backend Setup
+
+### Step 1: Configure Bunny Provider (Built-In)
+
+The Mediables package ships with a Bunny video provider. No custom provider class is required.
+
+Add the following to your `.env`:
+
+```env
+VIDEO_PROVIDER=bunny
+BUNNY_VIDEO_API_KEY=your-api-key
+BUNNY_VIDEO_LIBRARY_ID=your-library-id
+BUNNY_VIDEO_CDN_HOSTNAME=your-cdn.b-cdn.net
+BUNNY_VIDEO_WEBHOOK_SECRET=your-secret
+```
+
+### Step 2: (Optional) Override the Provider Binding
+
+If you want to override the provider binding (e.g. for a custom provider), bind `Mediables\Contracts\VideoProviderInterface` in your application:
+
+```php
+use Mediables\Contracts\VideoProviderInterface;
+use Mediables\Services\Video\BunnyVideoProvider;
+
+$this->app->singleton(VideoProviderInterface::class, function () {
+    return new BunnyVideoProvider();
+});
+```
+
+### Step 3: Create API Controllers
+
+Create `app/Http/Controllers/Api/V1/VideoUploadController.php`:
+
+```php
+<?php
+
+namespace App\Http\Controllers\Api\V1;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\VideoUploadRequest;
+use App\Services\Video\Contracts\VideoProviderInterface;
+use Mediables\Facades\MediaService;
+use Illuminate\Http\JsonResponse;
+
+class VideoUploadController extends Controller
+{
+    public function __construct(
+        private VideoProviderInterface $provider
+    ) {}
+    
+    public function createUpload(VideoUploadRequest $request): JsonResponse
+    {
+        // Create pending media record
+        $media = MediaService::createFromRequest($request, [
+            'collection' => $request->input('collection', 'videos'),
+            'disk' => 'videos',
+            'status' => 'pending',
+            'meta' => [
+                'original_name' => $request->input('filename'),
+                'mime_type' => $request->input('mime_type'),
+                'size' => $request->input('size')
+            ]
+        ]);
+        
+        // Get upload URL from provider
+        $upload = $this->provider->createUploadUrl([
+            'metadata' => [
+                'media_uuid' => $media->uuid
+            ]
+        ]);
+        
+        // Update media with upload info
+        $media->update([
+            'upload_id' => $upload->uploadId,
+            'upload_expires_at' => $upload->expiresAt
+        ]);
+        
+        return response()->json([
+            'upload_url' => $upload->uploadUrl,
+            'upload_id' => $upload->uploadId,
+            'media_uuid' => $media->uuid,
+            'expires_at' => $upload->expiresAt->toIso8601String()
+        ], 201);
+    }
+    
+    public function completeUpload(string $uuid): JsonResponse
+    {
+        $media = MediaService::findByUuid($uuid);
+        
+        if (!$media) {
+            return response()->json(['error' => 'Media not found'], 404);
+        }
+        
+        // Mark as processing
+        $media->update(['status' => 'processing']);
+        
+        // Dispatch job to check processing status
+        ProcessVideoAsset::dispatch($media)->delay(now()->addSeconds(10));
+        
+        return response()->json([
+            'message' => 'Upload completed, processing started',
+            'media' => $media
+        ]);
+    }
+}
+```
+
+### Step 4: Create Webhook Handler
+
+The Mediables package includes a built-in Bunny webhook endpoint:
+
+- **Endpoint**: `POST /api/v1/video/webhooks/bunny`
+- **Security**: `?secret=...` query parameter (recommended) or `X-Webhook-Signature` header (deployment-specific)
+
+No additional controller is required unless you want custom behavior.
+
+### Step 5: Create Form Requests
+
+Create `app/Http/Requests/VideoUploadRequest.php`:
+
+```php
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class VideoUploadRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true; // Add your authorization logic
+    }
+    
+    public function rules(): array
+    {
+        return [
+            'filename' => 'required|string|max:255',
+            'size' => 'required|integer|min:1|max:5368709120', // 5GB max
+            'mime_type' => 'required|string|in:video/mp4,video/quicktime,video/x-msvideo,video/x-matroska,video/webm',
+            'collection' => 'nullable|string|max:50'
+        ];
+    }
+    
+    public function messages(): array
+    {
+        return [
+            'size.max' => 'Video file must not exceed 5GB',
+            'mime_type.in' => 'Unsupported video format. Supported formats: MP4, MOV, AVI, MKV, WebM'
+        ];
+    }
+}
+```
+
+## Frontend Integration
+
+### Step 1: Configure Vue Application
+
+Update your Vue app's main file:
+
+```javascript
+// main.js or main.ts
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { IonicVue } from '@ionic/vue'
+import App from './App.vue'
+
+// Import Mediables styles
+import '@mediables/vue/dist/style.css'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.use(IonicVue)
+app.use(pinia)
+
+// Configure Mediables
+import { configureMediables } from '@mediables/vue'
+
+configureMediables({
+  apiUrl: import.meta.env.VITE_API_URL || 'http://localhost:8000',
+  apiPrefix: '/api/v1',
+  storage: {
+    driver: 's3',
+    bucket: import.meta.env.VITE_S3_BUCKET,
+    region: import.meta.env.VITE_S3_REGION
+  },
+  video: {
+    provider: 'bunny',
+    maxUploadSize: 5 * 1024 * 1024 * 1024, // 5GB
+    allowedFormats: ['video/mp4', 'video/quicktime', 'video/webm'],
+    thumbnailQualities: ['poster', '2s', '5s', '10s']
+  }
+})
+
+app.mount('#app')
+```
+
+### Step 2: Create Video Upload Page
+
+```vue
+<template>
+  <PageShell>
+    <template #header>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Upload Video</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+    </template>
+    
+    <div class="p-4">
+      <VideoUploader
+        :collection="'user-videos'"
+        :max-size="5 * 1024 * 1024 * 1024"
+        @uploaded="handleVideoUploaded"
+        @error="handleUploadError"
+      >
+        <template #trigger>
+          <IonButton expand="block" fill="outline">
+            <IonIcon :icon="videocamOutline" slot="start" />
+            Select Video
+          </IonButton>
+        </template>
+      </VideoUploader>
+      
+      <div v-if="uploadedVideos.length > 0" class="mt-6">
+        <h3 class="text-lg font-semibold mb-4">Uploaded Videos</h3>
+        
+        <div class="space-y-4">
+          <VideoCard
+            v-for="video in uploadedVideos"
+            :key="video.uuid"
+            :media="video"
+            @play="playVideo(video)"
+            @edit="editVideo(video)"
+          />
+        </div>
+      </div>
+    </div>
+  </PageShell>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonButton, 
+  IonIcon,
+  useIonToast
+} from '@ionic/vue'
+import { videocamOutline } from 'ionicons/icons'
+import { VideoUploader, VideoCard } from '@mediables/vue'
+import PageShell from '@/components/layout/PageShell.vue'
+
+const router = useRouter()
+const [presentToast] = useIonToast()
+const uploadedVideos = ref([])
+
+async function handleVideoUploaded(media) {
+  uploadedVideos.value.unshift(media)
+  
+  await presentToast({
+    message: 'Video uploaded successfully!',
+    duration: 3000,
+    color: 'success'
+  })
+}
+
+async function handleUploadError(error) {
+  await presentToast({
+    message: error.message || 'Upload failed',
+    duration: 5000,
+    color: 'danger'
+  })
+}
+
+function playVideo(video) {
+  router.push(`/video/${video.uuid}/play`)
+}
+
+function editVideo(video) {
+  router.push(`/video/${video.uuid}/edit`)
+}
+</script>
+```
+
+### Step 3: Create Video Player Page
+
+```vue
+<template>
+  <PageShell :use-content-wrapper="false">
+    <template #header>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton />
+          </IonButtons>
+          <IonTitle>{{ media?.title || 'Video Player' }}</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+    </template>
+    
+    <div class="video-player-container">
+      <VideoPlayer
+        v-if="media"
+        :media="media"
+        :controls="true"
+        :autoplay="false"
+        @play="handlePlay"
+        @ended="handleEnded"
+      />
+      
+      <div class="p-4">
+        <h2 class="text-xl font-semibold">{{ media?.title }}</h2>
+        <p class="text-gray-600 mt-2">{{ media?.description }}</p>
+        
+        <div class="flex items-center gap-4 mt-4">
+          <span class="text-sm text-gray-500">
+            Duration: {{ formatDuration(media?.duration) }}
+          </span>
+          <span class="text-sm text-gray-500">
+            Size: {{ formatSize(media?.size) }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </PageShell>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonButtons, 
+  IonBackButton 
+} from '@ionic/vue'
+import { VideoPlayer } from '@mediables/vue'
+import PageShell from '@/components/layout/PageShell.vue'
+import { useMediaStore } from '@/stores/media'
+
+const route = useRoute()
+const mediaStore = useMediaStore()
+const media = ref(null)
+
+onMounted(async () => {
+  const uuid = route.params.uuid
+  media.value = await mediaStore.fetchMedia(uuid)
+})
+
+function handlePlay() {
+  console.log('Video started playing')
+}
+
+function handleEnded() {
+  console.log('Video playback ended')
+}
+
+function formatDuration(seconds) {
+  if (!seconds) return 'N/A'
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+function formatSize(bytes) {
+  if (!bytes) return 'N/A'
+  const mb = bytes / (1024 * 1024)
+  return `${mb.toFixed(2)} MB`
+}
+</script>
+```
+
+### Step 4: Create Video Editor Page
+
+```vue
+<template>
+  <PageShell :use-content-wrapper="false">
+    <VideoEditor
+      v-if="media"
+      :media-uuid="media.uuid"
+      @export="handleExport"
+      @save-draft="handleSaveDraft"
+    />
+    
+    <IonLoading
+      :is-open="exporting"
+      message="Processing video..."
+    />
+  </PageShell>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { IonLoading, useIonToast } from '@ionic/vue'
+import { VideoEditor } from '@mediables/vue'
+import PageShell from '@/components/layout/PageShell.vue'
+import { useMediaStore } from '@/stores/media'
+import api from '@/services/api'
+
+const route = useRoute()
+const router = useRouter()
+const [presentToast] = useIonToast()
+const mediaStore = useMediaStore()
+
+const media = ref(null)
+const exporting = ref(false)
+
+onMounted(async () => {
+  const uuid = route.params.uuid
+  media.value = await mediaStore.fetchMedia(uuid)
+})
+
+async function handleExport(recipe) {
+  exporting.value = true
+  
+  try {
+    const response = await api.post(`/video/${media.value.uuid}/export`, { 
+      recipe 
+    })
+    
+    await presentToast({
+      message: 'Export started! We\'ll notify you when it\'s ready.',
+      duration: 5000,
+      color: 'success'
+    })
+    
+    // Navigate to export status page
+    router.push(`/video/export/${response.data.job_id}`)
+    
+  } catch (error) {
+    await presentToast({
+      message: 'Export failed. Please try again.',
+      duration: 5000,
+      color: 'danger'
+    })
+  } finally {
+    exporting.value = false
+  }
+}
+
+async function handleSaveDraft(recipe) {
+  try {
+    await api.post(`/video/${media.value.uuid}/draft`, { recipe })
+    
+    await presentToast({
+      message: 'Draft saved successfully',
+      duration: 3000,
+      color: 'success'
+    })
+  } catch (error) {
+    console.error('Failed to save draft:', error)
+  }
+}
+</script>
+```
+
+## Provider Configuration
+
+### Bunny Configuration
+
+1. **Create a Bunny Stream Video Library**:
+   - Get your `Video Library ID`
+   - Generate an API key
+
+2. **Configure webhooks**:
+   - Endpoint: `https://yourdomain.com/api/v1/video/webhooks/bunny?secret=your-secret`
+
+3. **RTMP ingest**:
+   - `rtmp://ingest.bunny.live/{stream-key}`
+
+4. **Environment variables**:
+```env
+VIDEO_PROVIDER=bunny
+BUNNY_VIDEO_API_KEY=your-api-key
+BUNNY_VIDEO_LIBRARY_ID=your-library-id
+BUNNY_VIDEO_CDN_HOSTNAME=your-cdn.b-cdn.net
+BUNNY_VIDEO_WEBHOOK_SECRET=your-secret
+```
+
+### CloudFlare Stream Configuration
+
+For CloudFlare Stream support, create a CloudFlareVideoProvider:
+
+```php
+class CloudFlareVideoProvider implements VideoProviderInterface
+{
+    // Implementation for CloudFlare Stream API
+}
+```
+
+## Queue Configuration
+
+### Configure Queue Workers
+
+Update `config/queue.php`:
+
+```php
+'connections' => [
+    'redis' => [
+        'driver' => 'redis',
+        'connection' => 'default',
+        'queue' => env('REDIS_QUEUE', 'default'),
+        'retry_after' => 90,
+        'block_for' => null,
+        'after_commit' => false,
+    ],
+    
+    'video-processing' => [
+        'driver' => 'redis',
+        'connection' => 'default',
+        'queue' => 'video-processing',
+        'retry_after' => 7200, // 2 hours for long videos
+        'block_for' => null,
+        'after_commit' => false,
+    ],
+],
+```
+
+### Create Queue Jobs
+
+Create `app/Jobs/ProcessVideoExport.php`:
+
+```php
+<?php
+
+namespace App\Jobs;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Queue\SerializesModels;
+use Mediables\Models\Media;
+use FFMpeg\FFMpeg;
+use FFMpeg\Format\Video\X264;
+
+class ProcessVideoExport implements ShouldQueue
+{
+    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;
+    
+    public $timeout = 7200; // 2 hours
+    public $tries = 3;
+    
+    public function __construct(
+        public Media $media,
+        public array $recipe,
+        public string $jobId
+    ) {}
+    
+    public function handle(): void
+    {
+        $ffmpeg = FFMpeg::create([
+            'ffmpeg.binaries' => config('mediables.ffmpeg_path', '/usr/bin/ffmpeg'),
+            'ffprobe.binaries' => config('mediables.ffprobe_path', '/usr/bin/ffprobe'),
+            'timeout' => 3600,
+            'ffmpeg.threads' => 12,
+        ]);
+        
+        // Download source video
+        $sourcePath = $this->downloadSourceVideo();
+        
+        // Open video
+        $video = $ffmpeg->open($sourcePath);
+        
+        // Apply timeline edits
+        foreach ($this->recipe['timeline'] as $clip) {
+            $video->clip(
+                \FFMpeg\Coordinate\TimeCode::fromSeconds($clip['source_in']),
+                \FFMpeg\Coordinate\TimeCode::fromSeconds($clip['source_out'] - $clip['source_in'])
+            );
+        }
+        
+        // Apply filters
+        foreach ($this->recipe['filters'] as $filter) {
+            $video->addFilter(new \FFMpeg\Filters\Video\CustomFilter($filter['ffmpeg']));
+        }
+        
+        // Configure output format
+        $format = new X264();
+        $format->setKiloBitrate(4000)
+               ->setAudioCodec('aac')
+               ->setAudioKiloBitrate(128);
+        
+        // Add progress listener
+        $format->on('progress', function ($video, $format, $percentage) {
+            $this->updateProgress($percentage);
+        });
+        
+        // Export
+        $outputPath = storage_path("app/exports/{$this->jobId}.mp4");
+        $video->save($format, $outputPath);
+        
+        // Upload to provider
+        $this->uploadToProvider($outputPath);
+        
+        // Clean up
+        @unlink($sourcePath);
+        @unlink($outputPath);
+        
+        // Update media status
+        $this->media->update([
+            'export_status' => 'completed',
+            'export_completed_at' => now()
+        ]);
+        
+        // Fire event
+        event(new VideoExportCompleted($this->media, $this->jobId));
+    }
+    
+    private function updateProgress(int $percentage): void
+    {
+        cache()->put("export:{$this->jobId}:progress", $percentage, 3600);
+    }
+}
+```
+
+### Run Queue Workers
+
+```bash
+# Development
+php artisan queue:work --queue=video-processing
+
+# Production with Supervisor
+[program:video-worker]
+process_name=%(program_name)s_%(process_num)02d
+command=php /path/to/artisan queue:work redis --queue=video-processing --sleep=3 --tries=3 --max-time=3600
+autostart=true
+autorestart=true
+stopasgroup=true
+killasgroup=true
+user=www-data
+numprocs=4
+redirect_stderr=true
+stdout_logfile=/path/to/logs/video-worker.log
+```
+
+## Testing
+
+### Backend Testing
+
+Create `tests/Feature/VideoUploadTest.php`:
+
+```php
+<?php
+
+namespace Tests\Feature;
+
+use Tests\TestCase;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use App\Models\User;
+use Mediables\Models\Media;
+
+class VideoUploadTest extends TestCase
+{
+    use RefreshDatabase;
+    
+    public function test_can_request_upload_url(): void
+    {
+        $user = User::factory()->create();
+        
+        $response = $this->actingAs($user)
+            ->postJson('/api/v1/video/upload', [
+                'filename' => 'test-video.mp4',
+                'size' => 1048576,
+                'mime_type' => 'video/mp4',
+                'collection' => 'videos'
+            ]);
+        
+        $response->assertStatus(201)
+            ->assertJsonStructure([
+                'upload_url',
+                'upload_id',
+                'media_uuid',
+                'expires_at'
+            ]);
+        
+        $this->assertDatabaseHas('media', [
+            'uuid' => $response->json('media_uuid'),
+            'status' => 'pending',
+            'collection' => 'videos'
+        ]);
+    }
+    
+    public function test_webhook_updates_media_status(): void
+    {
+        config()->set('mediables.video.bunny.webhook_secret', 'test-secret');
+
+        $media = Media::factory()->create([
+            'provider' => 'bunny',
+            'provider_asset_id' => 'video-guid-123',
+            'status' => 'processing',
+        ]);
+
+        $payload = [
+            'VideoLibraryId' => 12345,
+            'VideoGuid' => 'video-guid-123',
+            'Status' => 3,
+        ];
+
+        $response = $this->postJson('/api/v1/video/webhooks/bunny?secret=test-secret', $payload);
+
+        $response->assertOk();
+    }
+}
+```
+
+### Frontend Testing
+
+Create `tests/components/VideoUploader.spec.ts`:
+
+```typescript
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { VideoUploader } from '@mediables/vue'
+import axios from 'axios'
+
+vi.mock('axios')
+
+describe('VideoUploader', () => {
+  it('requests upload URL on file selection', async () => {
+    const mockUploadResponse = {
+      data: {
+        upload_url: 'https://video.bunnycdn.com/library/test-library-id/videos/video-guid-123',
+        upload_id: 'upload-123',
+        media_uuid: 'media-456',
+        expires_at: new Date().toISOString()
+      }
+    }
+    
+    axios.post.mockResolvedValueOnce(mockUploadResponse)
+    
+    const wrapper = mount(VideoUploader, {
+      props: {
+        collection: 'videos'
+      }
+    })
+    
+    // Simulate file selection
+    const file = new File(['video content'], 'test.mp4', { type: 'video/mp4' })
+    const input = wrapper.find('input[type="file"]')
+    
+    Object.defineProperty(input.element, 'files', {
+      value: [file],
+      writable: false
+    })
+    
+    await input.trigger('change')
+    
+    expect(axios.post).toHaveBeenCalledWith('/api/v1/video/upload', {
+      filename: 'test.mp4',
+      size: file.size,
+      mime_type: 'video/mp4',
+      collection: 'videos'
+    })
+  })
+  
+  it('shows upload progress', async () => {
+    const wrapper = mount(VideoUploader)
+    
+    // Start upload
+    wrapper.vm.startUpload({
+      file: new File(['content'], 'test.mp4'),
+      uploadUrl: 'https://video.bunnycdn.com/library/test-library-id/videos/video-guid-123'
+    })
+    
+    // Simulate progress
+    wrapper.vm.updateProgress(50)
+    
+    await wrapper.vm.$nextTick()
+    
+    expect(wrapper.find('.upload-progress').exists()).toBe(true)
+    expect(wrapper.text()).toContain('50%')
+  })
+})
+```
+
+## Production Deployment
+
+### Server Requirements
+
+- **CPU**: 4+ cores for video processing
+- **RAM**: 8GB minimum, 16GB recommended
+- **Storage**: SSD with sufficient space for temporary files
+- **Network**: 100Mbps+ for video uploads/downloads
+
+### Deployment Checklist
+
+1. **Environment Configuration**:
+```bash
+# Set production environment
+APP_ENV=production
+APP_DEBUG=false
+
+# Configure queues
+QUEUE_CONNECTION=redis
+REDIS_HOST=your-redis-host
+
+# Video provider settings
+VIDEO_PROVIDER=bunny
+BUNNY_VIDEO_API_KEY=production-api-key
+BUNNY_VIDEO_LIBRARY_ID=production-library-id
+BUNNY_VIDEO_CDN_HOSTNAME=production-cdn.b-cdn.net
+BUNNY_VIDEO_WEBHOOK_SECRET=production-secret
+```
+
+2. **Optimize Application**:
+```bash
+php artisan config:cache
+php artisan route:cache
+php artisan view:cache
+php artisan event:cache
+composer install --no-dev --optimize-autoloader
+```
+
+3. **Frontend Build**:
+```bash
+npm run build
+```
+
+4. **Database Optimization**:
+```sql
+-- Add indexes for video queries
+CREATE INDEX idx_media_video_queries ON media(provider, processing_status, created_at);
+CREATE INDEX idx_live_streams_active ON live_streams(status) WHERE status IN ('idle', 'live');
+```
+
+5. **Queue Worker Configuration**:
+- Use Supervisor or systemd for process management
+- Configure multiple workers for video processing
+- Set appropriate memory limits
+
+6. **Monitoring**:
+- Set up error tracking (Sentry, Bugsnag)
+- Monitor queue lengths
+- Track video processing times
+- Alert on webhook failures
+
+7. **CDN Configuration**:
+- Configure CDN for video thumbnail delivery
+- Set appropriate cache headers
+- Enable CORS for video playback
+
+8. **Security**:
+- Enable rate limiting on upload endpoints
+- Validate webhook signatures
+- Use HTTPS everywhere
+- Implement CSP headers
+
+### Performance Tuning
+
+1. **PHP Configuration**:
+```ini
+; php.ini
+upload_max_filesize = 5G
+post_max_size = 5G
+max_execution_time = 0
+memory_limit = 2G
+```
+
+2. **Nginx Configuration**:
+```nginx
+# nginx.conf
+client_max_body_size 5G;
+client_body_timeout 3600;
+proxy_read_timeout 3600;
+proxy_connect_timeout 3600;
+proxy_send_timeout 3600;
+```
+
+3. **Redis Configuration**:
+```conf
+# redis.conf
+maxmemory 2gb
+maxmemory-policy allkeys-lru
+```
+
+## Troubleshooting Guide
+
+### Common Issues and Solutions
+
+**Issue**: Upload fails with CORS error
+```javascript
+// Solution: Configure CORS in Laravel
+// config/cors.php
+'paths' => ['api/*'],
+'allowed_origins' => ['https://yourdomain.com'],
+'allowed_methods' => ['*'],
+'allowed_headers' => ['*'],
+```
+
+**Issue**: Video processing never completes
+```bash
+# Check queue workers
+php artisan queue:failed
+
+# Retry failed jobs
+php artisan queue:retry all
+
+# Check FFmpeg installation
+ffmpeg -version
+```
+
+**Issue**: Playback token expires during viewing
+```javascript
+// Solution: Implement token refresh
+const refreshInterval = setInterval(() => {
+  if (shouldRefreshToken()) {
+    refreshPlaybackToken()
+  }
+}, 30000) // Check every 30 seconds
+```
+
+**Issue**: Memory exhausted during export
+```php
+// Solution: Increase memory limit for export jobs
+public $timeout = 7200;
+public $memory = 2048; // MB
+
+// Or in job handle method
+ini_set('memory_limit', '2G');
+```
+
+## Support
+
+For additional help:
+
+- **Documentation**: https://mediables.dev/docs/video
+- **GitHub Issues**: https://github.com/mediables/mediables/issues
+- **Discord Community**: https://discord.gg/mediables
+- **Email Support**: video-support@mediables.dev