@codingfactory/mediables-vue 2.0.1

package/docs/video-subsystem/component-examples.md

@@ -0,0 +1,1477 @@
+# Video Component Usage Examples
+
+This guide provides practical examples of using the Mediables video components in your Vue application.
+
+## Table of Contents
+
+1. [Basic Examples](#basic-examples)
+2. [Advanced Examples](#advanced-examples)
+3. [Integration Patterns](#integration-patterns)
+4. [Mobile Optimizations](#mobile-optimizations)
+5. [Error Handling](#error-handling)
+6. [Performance Tips](#performance-tips)
+
+## Basic Examples
+
+### Simple Video Upload
+
+```vue
+<template>
+  <div class="video-upload-container">
+    <VideoUploader
+      @uploaded="onVideoUploaded"
+      @error="onUploadError"
+    />
+    
+    <div v-if="uploadedVideo" class="mt-4">
+      <p>Video uploaded successfully!</p>
+      <VideoPlayer :media="uploadedVideo" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { VideoUploader, VideoPlayer } from '@mediables/vue'
+
+const uploadedVideo = ref(null)
+
+function onVideoUploaded(media) {
+  uploadedVideo.value = media
+  console.log('Video ready:', media.uuid)
+}
+
+function onUploadError(error) {
+  console.error('Upload failed:', error)
+}
+</script>
+```
+
+### Basic Video Player
+
+```vue
+<template>
+  <VideoPlayer
+    :playback-url="videoUrl"
+    :controls="true"
+    :autoplay="false"
+    :muted="false"
+  />
+</template>
+
+<script setup lang="ts">
+import { VideoPlayer } from '@mediables/vue'
+
+const videoUrl = 'https://your-cdn.b-cdn.net/your-library-id/play_video-guid-abc123/playlist.m3u8'
+</script>
+```
+
+### Simple Video Editor
+
+```vue
+<template>
+  <VideoEditor
+    :media-uuid="videoId"
+    @export="handleExport"
+  />
+</template>
+
+<script setup lang="ts">
+import { VideoEditor } from '@mediables/vue'
+
+const videoId = 'your-video-uuid-here'
+
+async function handleExport(recipe) {
+  console.log('Exporting with recipe:', recipe)
+  // Send recipe to backend for processing
+}
+</script>
+```
+
+## Advanced Examples
+
+### Upload with Progress and Validation
+
+```vue
+<template>
+  <div class="advanced-upload">
+    <VideoUploader
+      :multiple="true"
+      :max-size="maxFileSize"
+      :accepted-formats="acceptedFormats"
+      :collection="'project-videos'"
+      @before-upload="validateUpload"
+      @progress="updateProgress"
+      @uploaded="handleUploaded"
+      @error="handleError"
+    >
+      <template #trigger>
+        <div class="custom-upload-button">
+          <IonIcon :icon="cloudUploadOutline" />
+          <span>Drop videos here or click to browse</span>
+          <small>MP4, MOV, WebM up to 2GB</small>
+        </div>
+      </template>
+    </VideoUploader>
+    
+    <!-- Progress indicators -->
+    <div v-if="uploads.length > 0" class="upload-queue mt-4">
+      <div v-for="upload in uploads" :key="upload.id" class="upload-item">
+        <div class="flex items-center justify-between">
+          <span>{{ upload.filename }}</span>
+          <span>{{ upload.progress }}%</span>
+        </div>
+        <IonProgressBar :value="upload.progress / 100" />
+        <button v-if="!upload.completed" @click="cancelUpload(upload.id)">
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { IonIcon, IonProgressBar, useIonToast } from '@ionic/vue'
+import { cloudUploadOutline } from 'ionicons/icons'
+import { VideoUploader } from '@mediables/vue'
+
+const [presentToast] = useIonToast()
+
+const maxFileSize = 2 * 1024 * 1024 * 1024 // 2GB
+const acceptedFormats = ['video/mp4', 'video/quicktime', 'video/webm']
+const uploads = reactive([])
+
+function validateUpload(file) {
+  // Custom validation
+  if (file.name.includes('temp')) {
+    presentToast({
+      message: 'Temporary files not allowed',
+      color: 'warning'
+    })
+    return false
+  }
+  
+  // Check duration (if available)
+  return new Promise((resolve) => {
+    const video = document.createElement('video')
+    video.preload = 'metadata'
+    
+    video.onloadedmetadata = () => {
+      if (video.duration > 600) { // 10 minutes max
+        presentToast({
+          message: 'Video must be less than 10 minutes',
+          color: 'warning'
+        })
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    }
+    
+    video.src = URL.createObjectURL(file)
+  })
+}
+
+function updateProgress(data) {
+  const upload = uploads.find(u => u.id === data.uploadId)
+  if (upload) {
+    upload.progress = data.progress
+  } else {
+    uploads.push({
+      id: data.uploadId,
+      filename: data.filename,
+      progress: data.progress,
+      completed: false
+    })
+  }
+}
+
+function handleUploaded(media) {
+  const upload = uploads.find(u => u.id === media.upload_id)
+  if (upload) {
+    upload.completed = true
+    upload.progress = 100
+  }
+}
+
+function handleError(error) {
+  presentToast({
+    message: `Upload failed: ${error.message}`,
+    color: 'danger',
+    duration: 5000
+  })
+}
+
+function cancelUpload(uploadId) {
+  // Implementation depends on your upload mechanism
+  const index = uploads.findIndex(u => u.id === uploadId)
+  if (index !== -1) {
+    uploads.splice(index, 1)
+  }
+}
+</script>
+
+<style scoped>
+.custom-upload-button {
+  border: 2px dashed var(--ion-color-medium);
+  border-radius: 8px;
+  padding: 3rem;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.custom-upload-button:hover {
+  border-color: var(--ion-color-primary);
+  background: var(--ion-color-primary-tint);
+}
+
+.upload-item {
+  padding: 1rem;
+  border: 1px solid var(--ion-color-light);
+  border-radius: 4px;
+  margin-bottom: 0.5rem;
+}
+</style>
+```
+
+### Player with Custom Controls
+
+```vue
+<template>
+  <div class="custom-player">
+    <VideoPlayer
+      ref="playerRef"
+      :media="media"
+      :controls="false"
+      @play="isPlaying = true"
+      @pause="isPlaying = false"
+      @timeupdate="updateTime"
+      @ended="handleEnded"
+    />
+    
+    <!-- Custom control bar -->
+    <div class="controls">
+      <button @click="togglePlay">
+        <IonIcon :icon="isPlaying ? pauseOutline : playOutline" />
+      </button>
+      
+      <div class="time-display">
+        {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+      </div>
+      
+      <input
+        type="range"
+        :value="currentTime"
+        :max="duration"
+        @input="seek($event.target.value)"
+        class="seek-bar"
+      />
+      
+      <button @click="toggleMute">
+        <IonIcon :icon="isMuted ? volumeMuteOutline : volumeHighOutline" />
+      </button>
+      
+      <button @click="toggleFullscreen">
+        <IonIcon :icon="expandOutline" />
+      </button>
+      
+      <select @change="changeQuality($event.target.value)">
+        <option value="auto">Auto</option>
+        <option value="1080p">1080p</option>
+        <option value="720p">720p</option>
+        <option value="480p">480p</option>
+      </select>
+    </div>
+    
+    <!-- Overlay for loading/buffering -->
+    <div v-if="isBuffering" class="overlay">
+      <IonSpinner />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { IonIcon, IonSpinner } from '@ionic/vue'
+import { 
+  playOutline, 
+  pauseOutline, 
+  volumeHighOutline, 
+  volumeMuteOutline,
+  expandOutline 
+} from 'ionicons/icons'
+import { VideoPlayer } from '@mediables/vue'
+
+const props = defineProps({
+  media: Object
+})
+
+const playerRef = ref()
+const isPlaying = ref(false)
+const isMuted = ref(false)
+const isBuffering = ref(false)
+const currentTime = ref(0)
+const duration = ref(0)
+
+function togglePlay() {
+  if (isPlaying.value) {
+    playerRef.value.pause()
+  } else {
+    playerRef.value.play()
+  }
+}
+
+function seek(time) {
+  playerRef.value.seek(Number(time))
+}
+
+function toggleMute() {
+  isMuted.value = !isMuted.value
+  playerRef.value.setMuted(isMuted.value)
+}
+
+function toggleFullscreen() {
+  playerRef.value.requestFullscreen()
+}
+
+function changeQuality(quality) {
+  playerRef.value.setQuality(quality)
+}
+
+function updateTime(event) {
+  currentTime.value = event.currentTime
+  duration.value = event.duration
+}
+
+function handleEnded() {
+  isPlaying.value = false
+  // Maybe show related videos or replay button
+}
+
+function formatTime(seconds) {
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+</script>
+
+<style scoped>
+.custom-player {
+  position: relative;
+  background: black;
+}
+
+.controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: linear-gradient(transparent, rgba(0,0,0,0.8));
+  color: white;
+}
+
+.seek-bar {
+  flex: 1;
+}
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,0.5);
+}
+</style>
+```
+
+### Advanced Video Editor with Timeline
+
+```vue
+<template>
+  <div class="advanced-editor">
+    <VideoEditor
+      ref="editorRef"
+      :media-uuid="videoId"
+      :initial-recipe="savedRecipe"
+      @change="handleChange"
+      @export="handleExport"
+    >
+      <template #toolbar>
+        <div class="editor-toolbar">
+          <button @click="undo" :disabled="!canUndo">
+            <IonIcon :icon="arrowUndoOutline" />
+            Undo
+          </button>
+          
+          <button @click="redo" :disabled="!canRedo">
+            <IonIcon :icon="arrowRedoOutline" />
+            Redo
+          </button>
+          
+          <div class="separator" />
+          
+          <button @click="splitAtPlayhead">
+            <IonIcon :icon="cutOutline" />
+            Split
+          </button>
+          
+          <button @click="deleteSelected" :disabled="!hasSelection">
+            <IonIcon :icon="trashOutline" />
+            Delete
+          </button>
+          
+          <div class="separator" />
+          
+          <button @click="addTextOverlay">
+            <IonIcon :icon="textOutline" />
+            Add Text
+          </button>
+          
+          <button @click="addTransition">
+            <IonIcon :icon="shuffleOutline" />
+            Transition
+          </button>
+        </div>
+      </template>
+      
+      <template #sidebar>
+        <div class="editor-sidebar">
+          <!-- Filter presets -->
+          <div class="section">
+            <h3>Quick Filters</h3>
+            <div class="filter-grid">
+              <button
+                v-for="preset in filterPresets"
+                :key="preset.id"
+                @click="applyPreset(preset)"
+                class="filter-preset"
+              >
+                <img :src="preset.thumbnail" :alt="preset.name" />
+                <span>{{ preset.name }}</span>
+              </button>
+            </div>
+          </div>
+          
+          <!-- Audio controls -->
+          <div class="section">
+            <h3>Audio</h3>
+            <label>
+              Volume
+              <input
+                type="range"
+                min="0"
+                max="200"
+                v-model="audioVolume"
+                @change="updateAudio"
+              />
+              <span>{{ audioVolume }}%</span>
+            </label>
+            
+            <label>
+              <input type="checkbox" v-model="removeAudio" />
+              Remove audio
+            </label>
+          </div>
+          
+          <!-- Export settings -->
+          <div class="section">
+            <h3>Export Settings</h3>
+            <select v-model="exportQuality">
+              <option value="2160p">4K (2160p)</option>
+              <option value="1080p">Full HD (1080p)</option>
+              <option value="720p">HD (720p)</option>
+              <option value="480p">SD (480p)</option>
+            </select>
+            
+            <select v-model="exportFormat">
+              <option value="mp4">MP4 (H.264)</option>
+              <option value="webm">WebM (VP9)</option>
+            </select>
+          </div>
+        </div>
+      </template>
+    </VideoEditor>
+    
+    <!-- Export progress modal -->
+    <IonModal :is-open="exporting">
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Exporting Video</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      
+      <IonContent>
+        <div class="export-progress">
+          <IonProgressBar :value="exportProgress / 100" />
+          <p>{{ exportProgress }}% complete</p>
+          <p class="text-sm">{{ exportStatus }}</p>
+        </div>
+      </IonContent>
+    </IonModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { 
+  IonIcon, 
+  IonModal, 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonContent,
+  IonProgressBar 
+} from '@ionic/vue'
+import { 
+  arrowUndoOutline, 
+  arrowRedoOutline, 
+  cutOutline, 
+  trashOutline,
+  textOutline,
+  shuffleOutline
+} from 'ionicons/icons'
+import { VideoEditor } from '@mediables/vue'
+import { useVideoEditorStore } from '@/stores/videoEditor'
+
+const props = defineProps({
+  videoId: String,
+  savedRecipe: Object
+})
+
+const editorRef = ref()
+const editorStore = useVideoEditorStore()
+
+const canUndo = computed(() => editorStore.canUndo)
+const canRedo = computed(() => editorStore.canRedo)
+const hasSelection = computed(() => editorStore.hasSelection)
+
+const audioVolume = ref(100)
+const removeAudio = ref(false)
+const exportQuality = ref('1080p')
+const exportFormat = ref('mp4')
+const exporting = ref(false)
+const exportProgress = ref(0)
+const exportStatus = ref('')
+
+const filterPresets = [
+  { id: 'vintage', name: 'Vintage', thumbnail: '/filters/vintage.jpg' },
+  { id: 'cinematic', name: 'Cinematic', thumbnail: '/filters/cinematic.jpg' },
+  { id: 'vibrant', name: 'Vibrant', thumbnail: '/filters/vibrant.jpg' },
+  { id: 'noir', name: 'Noir', thumbnail: '/filters/noir.jpg' }
+]
+
+function undo() {
+  editorRef.value.undo()
+}
+
+function redo() {
+  editorRef.value.redo()
+}
+
+function splitAtPlayhead() {
+  editorRef.value.splitAtPlayhead()
+}
+
+function deleteSelected() {
+  editorRef.value.deleteSelected()
+}
+
+function addTextOverlay() {
+  editorRef.value.addLayer({
+    type: 'text',
+    content: 'Your text here',
+    position: { x: 50, y: 50 },
+    style: {
+      fontSize: 24,
+      color: '#ffffff',
+      fontFamily: 'Arial'
+    }
+  })
+}
+
+function addTransition() {
+  editorRef.value.addTransition({
+    type: 'crossfade',
+    duration: 1
+  })
+}
+
+function applyPreset(preset) {
+  const filters = getPresetFilters(preset.id)
+  editorRef.value.applyFilters(filters)
+}
+
+function updateAudio() {
+  editorRef.value.setAudioVolume(audioVolume.value / 100)
+}
+
+function handleChange(state) {
+  editorStore.updateState(state)
+  // Auto-save draft every 30 seconds
+  editorStore.saveDraft()
+}
+
+async function handleExport(recipe) {
+  exporting.value = true
+  exportProgress.value = 0
+  
+  try {
+    // Add export settings to recipe
+    const fullRecipe = {
+      ...recipe,
+      audio: {
+        ...recipe.audio,
+        volume: removeAudio.value ? 0 : audioVolume.value / 100
+      },
+      output: {
+        format: exportFormat.value,
+        quality: exportQuality.value,
+        codec: exportFormat.value === 'mp4' ? 'h264' : 'vp9'
+      }
+    }
+    
+    const response = await api.post(`/video/${props.videoId}/export`, {
+      recipe: fullRecipe
+    })
+    
+    // Poll for progress
+    const jobId = response.data.job_id
+    const interval = setInterval(async () => {
+      const status = await api.get(`/video/exports/${jobId}`)
+      
+      exportProgress.value = status.data.progress
+      exportStatus.value = status.data.status
+      
+      if (status.data.status === 'completed') {
+        clearInterval(interval)
+        exporting.value = false
+        // Navigate to result
+        router.push(`/video/export/${jobId}/complete`)
+      } else if (status.data.status === 'failed') {
+        clearInterval(interval)
+        exporting.value = false
+        // Show error
+      }
+    }, 2000)
+    
+  } catch (error) {
+    exporting.value = false
+    console.error('Export failed:', error)
+  }
+}
+
+function getPresetFilters(presetId) {
+  const presets = {
+    vintage: [
+      { id: 'sepia', intensity: 0.3 },
+      { id: 'vignette', intensity: 0.5 }
+    ],
+    cinematic: [
+      { id: 'contrast', params: { value: 1.2 } },
+      { id: 'saturation', params: { value: 0.8 } }
+    ],
+    vibrant: [
+      { id: 'saturation', params: { value: 1.5 } },
+      { id: 'brightness', params: { value: 0.1 } }
+    ],
+    noir: [
+      { id: 'grayscale', intensity: 1 },
+      { id: 'contrast', params: { value: 1.3 } }
+    ]
+  }
+  
+  return presets[presetId] || []
+}
+</script>
+
+<style scoped>
+.advanced-editor {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: var(--ion-color-light);
+  border-bottom: 1px solid var(--ion-color-medium);
+}
+
+.separator {
+  width: 1px;
+  height: 24px;
+  background: var(--ion-color-medium);
+  margin: 0 0.5rem;
+}
+
+.editor-sidebar {
+  width: 300px;
+  padding: 1rem;
+  background: var(--ion-color-light-shade);
+  overflow-y: auto;
+}
+
+.section {
+  margin-bottom: 2rem;
+}
+
+.section h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.filter-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+}
+
+.filter-preset {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem;
+  border: 1px solid var(--ion-color-medium);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.filter-preset img {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-bottom: 0.25rem;
+}
+
+.export-progress {
+  padding: 2rem;
+  text-align: center;
+}
+</style>
+```
+
+## Integration Patterns
+
+### With Pinia Store
+
+```typescript
+// stores/video.ts
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import api from '@/services/api'
+
+export const useVideoStore = defineStore('video', () => {
+  const videos = ref([])
+  const currentVideo = ref(null)
+  const isUploading = ref(false)
+  const uploadProgress = ref(0)
+  
+  const sortedVideos = computed(() => {
+    return [...videos.value].sort((a, b) => 
+      new Date(b.created_at) - new Date(a.created_at)
+    )
+  })
+  
+  async function fetchVideos() {
+    const response = await api.get('/videos')
+    videos.value = response.data.data
+  }
+  
+  async function uploadVideo(file) {
+    isUploading.value = true
+    uploadProgress.value = 0
+    
+    try {
+      // Request upload URL
+      const uploadResponse = await api.post('/video/upload', {
+        filename: file.name,
+        size: file.size,
+        mime_type: file.type
+      })
+      
+      // Upload to provider
+      const xhr = new XMLHttpRequest()
+      
+      xhr.upload.addEventListener('progress', (e) => {
+        if (e.lengthComputable) {
+          uploadProgress.value = Math.round((e.loaded / e.total) * 100)
+        }
+      })
+      
+      return new Promise((resolve, reject) => {
+        xhr.onload = () => {
+          if (xhr.status === 200) {
+            const media = { uuid: uploadResponse.data.media_uuid }
+            videos.value.unshift(media)
+            resolve(media)
+          } else {
+            reject(new Error('Upload failed'))
+          }
+        }
+        
+        xhr.onerror = () => reject(new Error('Upload failed'))
+        
+        xhr.open('PUT', uploadResponse.data.upload_url)
+        xhr.send(file)
+      })
+      
+    } finally {
+      isUploading.value = false
+      uploadProgress.value = 0
+    }
+  }
+  
+  async function deleteVideo(uuid) {
+    await api.delete(`/videos/${uuid}`)
+    const index = videos.value.findIndex(v => v.uuid === uuid)
+    if (index !== -1) {
+      videos.value.splice(index, 1)
+    }
+  }
+  
+  return {
+    videos,
+    currentVideo,
+    isUploading,
+    uploadProgress,
+    sortedVideos,
+    fetchVideos,
+    uploadVideo,
+    deleteVideo
+  }
+})
+```
+
+### With Vue Router
+
+```typescript
+// router/video-routes.ts
+export const videoRoutes = [
+  {
+    path: '/videos',
+    component: () => import('@/views/VideoList.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/videos/upload',
+    component: () => import('@/views/VideoUpload.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/videos/:uuid',
+    component: () => import('@/views/VideoPlayer.vue'),
+    props: true
+  },
+  {
+    path: '/videos/:uuid/edit',
+    component: () => import('@/views/VideoEditor.vue'),
+    props: true,
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/live',
+    component: () => import('@/views/LiveStream.vue'),
+    meta: { requiresAuth: true }
+  }
+]
+```
+
+## Mobile Optimizations
+
+### Responsive Video Player
+
+```vue
+<template>
+  <div class="mobile-player" :class="{ 'fullscreen': isFullscreen }">
+    <VideoPlayer
+      ref="player"
+      :media="media"
+      :controls="!showCustomControls"
+      @click="toggleControls"
+      @touchstart="handleTouchStart"
+      @touchend="handleTouchEnd"
+    />
+    
+    <!-- Mobile gesture overlay -->
+    <div v-if="showCustomControls" class="gesture-overlay">
+      <!-- Tap zones for seek -->
+      <div class="tap-zone left" @click="seekBackward">
+        <transition name="feedback">
+          <div v-if="showSeekFeedback === 'back'" class="seek-feedback">
+            -10s
+          </div>
+        </transition>
+      </div>
+      
+      <div class="tap-zone center" @click="togglePlay">
+        <transition name="fade">
+          <IonIcon 
+            v-if="showPlayPause"
+            :icon="isPlaying ? pauseCircleOutline : playCircleOutline"
+            class="play-icon"
+          />
+        </transition>
+      </div>
+      
+      <div class="tap-zone right" @click="seekForward">
+        <transition name="feedback">
+          <div v-if="showSeekFeedback === 'forward'" class="seek-feedback">
+            +10s
+          </div>
+        </transition>
+      </div>
+    </div>
+    
+    <!-- Mobile controls (bottom) -->
+    <transition name="slide-up">
+      <div v-if="showCustomControls" class="mobile-controls">
+        <div class="progress-bar" @click="seekToPosition">
+          <div class="progress-fill" :style="{ width: progressPercent + '%' }" />
+          <div class="progress-thumb" :style="{ left: progressPercent + '%' }" />
+        </div>
+        
+        <div class="control-buttons">
+          <button @click="togglePlay">
+            <IonIcon :icon="isPlaying ? pauseOutline : playOutline" />
+          </button>
+          
+          <span class="time">
+            {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+          </span>
+          
+          <button @click="toggleFullscreen">
+            <IonIcon :icon="isFullscreen ? contractOutline : expandOutline" />
+          </button>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { IonIcon } from '@ionic/vue'
+import { 
+  playOutline, 
+  pauseOutline,
+  playCircleOutline,
+  pauseCircleOutline,
+  expandOutline,
+  contractOutline
+} from 'ionicons/icons'
+import { VideoPlayer } from '@mediables/vue'
+import { Haptics, ImpactStyle } from '@capacitor/haptics'
+
+const props = defineProps({
+  media: Object
+})
+
+const player = ref()
+const isPlaying = ref(false)
+const isFullscreen = ref(false)
+const showCustomControls = ref(true)
+const showPlayPause = ref(false)
+const showSeekFeedback = ref(null)
+const currentTime = ref(0)
+const duration = ref(0)
+
+const progressPercent = computed(() => {
+  if (!duration.value) return 0
+  return (currentTime.value / duration.value) * 100
+})
+
+let controlsTimeout = null
+
+function toggleControls() {
+  showCustomControls.value = !showCustomControls.value
+  resetControlsTimeout()
+}
+
+function resetControlsTimeout() {
+  clearTimeout(controlsTimeout)
+  controlsTimeout = setTimeout(() => {
+    if (isPlaying.value) {
+      showCustomControls.value = false
+    }
+  }, 3000)
+}
+
+function togglePlay() {
+  if (isPlaying.value) {
+    player.value.pause()
+  } else {
+    player.value.play()
+  }
+  
+  showPlayPause.value = true
+  setTimeout(() => {
+    showPlayPause.value = false
+  }, 600)
+  
+  // Haptic feedback
+  Haptics.impact({ style: ImpactStyle.Light })
+}
+
+function seekForward() {
+  player.value.seek(currentTime.value + 10)
+  showSeekFeedback.value = 'forward'
+  setTimeout(() => {
+    showSeekFeedback.value = null
+  }, 600)
+  
+  Haptics.impact({ style: ImpactStyle.Light })
+}
+
+function seekBackward() {
+  player.value.seek(Math.max(0, currentTime.value - 10))
+  showSeekFeedback.value = 'back'
+  setTimeout(() => {
+    showSeekFeedback.value = null
+  }, 600)
+  
+  Haptics.impact({ style: ImpactStyle.Light })
+}
+
+function seekToPosition(event) {
+  const rect = event.currentTarget.getBoundingClientRect()
+  const percent = (event.clientX - rect.left) / rect.width
+  player.value.seek(duration.value * percent)
+}
+
+function toggleFullscreen() {
+  if (isFullscreen.value) {
+    document.exitFullscreen()
+  } else {
+    player.value.$el.requestFullscreen()
+  }
+  isFullscreen.value = !isFullscreen.value
+}
+
+// Gesture handling
+let touchStartX = 0
+let touchStartTime = 0
+
+function handleTouchStart(event) {
+  touchStartX = event.touches[0].clientX
+  touchStartTime = currentTime.value
+}
+
+function handleTouchEnd(event) {
+  const touchEndX = event.changedTouches[0].clientX
+  const deltaX = touchEndX - touchStartX
+  
+  // Horizontal swipe for seek
+  if (Math.abs(deltaX) > 50) {
+    const seekAmount = (deltaX / window.innerWidth) * 30 // Max 30s seek
+    player.value.seek(touchStartTime + seekAmount)
+  }
+}
+
+function formatTime(seconds) {
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+// Clean up on unmount
+onUnmounted(() => {
+  clearTimeout(controlsTimeout)
+})
+</script>
+
+<style scoped>
+.mobile-player {
+  position: relative;
+  width: 100%;
+  background: black;
+}
+
+.mobile-player.fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+}
+
+.gesture-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+}
+
+.tap-zone {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tap-zone.left,
+.tap-zone.right {
+  flex: 0.3;
+}
+
+.seek-feedback {
+  padding: 0.5rem 1rem;
+  background: rgba(0,0,0,0.7);
+  color: white;
+  border-radius: 20px;
+  font-weight: bold;
+}
+
+.play-icon {
+  font-size: 64px;
+  color: white;
+  opacity: 0.9;
+}
+
+.mobile-controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  background: linear-gradient(transparent, rgba(0,0,0,0.9));
+}
+
+.progress-bar {
+  position: relative;
+  height: 4px;
+  background: rgba(255,255,255,0.3);
+  border-radius: 2px;
+  margin-bottom: 1rem;
+  cursor: pointer;
+}
+
+.progress-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: var(--ion-color-primary);
+  border-radius: 2px;
+}
+
+.progress-thumb {
+  position: absolute;
+  top: -6px;
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: 50%;
+  transform: translateX(-50%);
+}
+
+.control-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: white;
+}
+
+.control-buttons button {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 24px;
+  padding: 0.5rem;
+}
+
+.time {
+  font-size: 14px;
+}
+
+/* Animations */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.feedback-enter-active {
+  animation: bounce 0.6s;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.3s;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+}
+</style>
+```
+
+## Error Handling
+
+### Comprehensive Error Management
+
+```vue
+<template>
+  <div class="video-container">
+    <VideoUploader
+      v-if="!hasError"
+      @uploaded="handleUploaded"
+      @error="handleError"
+    />
+    
+    <!-- Error display -->
+    <IonCard v-if="hasError" color="danger">
+      <IonCardHeader>
+        <IonCardTitle>Upload Error</IonCardTitle>
+      </IonCardHeader>
+      <IonCardContent>
+        <p>{{ errorMessage }}</p>
+        
+        <div v-if="errorDetails" class="error-details">
+          <h4>Details:</h4>
+          <ul>
+            <li v-for="(detail, key) in errorDetails" :key="key">
+              <strong>{{ key }}:</strong> {{ detail }}
+            </li>
+          </ul>
+        </div>
+        
+        <IonButton @click="retry" fill="outline" color="light">
+          Try Again
+        </IonButton>
+      </IonCardContent>
+    </IonCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { 
+  IonCard, 
+  IonCardHeader, 
+  IonCardTitle, 
+  IonCardContent,
+  IonButton 
+} from '@ionic/vue'
+import { VideoUploader } from '@mediables/vue'
+
+const error = ref(null)
+const hasError = computed(() => !!error.value)
+const errorMessage = computed(() => {
+  if (!error.value) return ''
+  
+  // Map common errors to user-friendly messages
+  const errorMap = {
+    'UPLOAD_TOO_LARGE': 'Video file is too large. Maximum size is 5GB.',
+    'UNSUPPORTED_FORMAT': 'Video format not supported. Please use MP4, MOV, or WebM.',
+    'NETWORK_ERROR': 'Network connection lost. Please check your internet and try again.',
+    'QUOTA_EXCEEDED': 'Storage quota exceeded. Please delete some videos first.',
+    'PROCESSING_FAILED': 'Video processing failed. The file may be corrupted.',
+    'UNAUTHORIZED': 'Session expired. Please log in again.',
+    'RATE_LIMITED': 'Too many uploads. Please wait a moment and try again.'
+  }
+  
+  return errorMap[error.value.code] || error.value.message || 'An unexpected error occurred'
+})
+
+const errorDetails = computed(() => {
+  if (!error.value?.details) return null
+  return error.value.details
+})
+
+function handleUploaded(media) {
+  console.log('Upload successful:', media)
+  error.value = null
+}
+
+function handleError(uploadError) {
+  console.error('Upload error:', uploadError)
+  
+  // Parse error response
+  if (uploadError.response?.data?.error) {
+    error.value = uploadError.response.data.error
+  } else if (uploadError.code === 'ERR_NETWORK') {
+    error.value = {
+      code: 'NETWORK_ERROR',
+      message: 'Network connection failed'
+    }
+  } else {
+    error.value = {
+      code: 'UNKNOWN',
+      message: uploadError.message || 'Upload failed',
+      details: {
+        status: uploadError.response?.status,
+        statusText: uploadError.response?.statusText
+      }
+    }
+  }
+  
+  // Log to error tracking service
+  if (window.Sentry) {
+    window.Sentry.captureException(uploadError, {
+      contexts: {
+        upload: {
+          error_code: error.value.code,
+          error_message: error.value.message
+        }
+      }
+    })
+  }
+}
+
+function retry() {
+  error.value = null
+}
+</script>
+
+<style scoped>
+.error-details {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: rgba(0,0,0,0.1);
+  border-radius: 4px;
+}
+
+.error-details ul {
+  list-style: none;
+  padding: 0;
+  margin: 0.5rem 0 0 0;
+}
+
+.error-details li {
+  padding: 0.25rem 0;
+}
+</style>
+```
+
+## Performance Tips
+
+### 1. Lazy Load Components
+
+```typescript
+// Only load video components when needed
+const VideoEditor = defineAsyncComponent(() =>
+  import('@mediables/vue').then(m => m.VideoEditor)
+)
+
+const VideoPlayer = defineAsyncComponent(() =>
+  import('@mediables/vue').then(m => m.VideoPlayer)
+)
+```
+
+### 2. Optimize Thumbnails
+
+```vue
+<script setup>
+// Generate multiple thumbnail sizes
+const thumbnailSizes = {
+  small: { width: 320, height: 180 },
+  medium: { width: 640, height: 360 },
+  large: { width: 1280, height: 720 }
+}
+
+function getThumbnailUrl(media, size = 'medium') {
+  const { width, height } = thumbnailSizes[size]
+  return `${media.thumbnail_base}?w=${width}&h=${height}&fit=cover`
+}
+</script>
+```
+
+### 3. Implement Virtual Scrolling
+
+```vue
+<template>
+  <RecycleScroller
+    class="video-list"
+    :items="videos"
+    :item-size="120"
+    key-field="uuid"
+    v-slot="{ item }"
+  >
+    <VideoListItem :video="item" />
+  </RecycleScroller>
+</template>
+
+<script setup>
+import { RecycleScroller } from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+</script>
+```
+
+### 4. Cache Playback URLs
+
+```typescript
+// Use a simple LRU cache for playback URLs
+import lru from 'tiny-lru'
+
+const playbackCache = lru(100, 3600000) // 100 items, 1 hour TTL
+
+async function getPlaybackUrl(uuid) {
+  const cached = playbackCache.get(uuid)
+  if (cached && cached.expiresAt > Date.now()) {
+    return cached.url
+  }
+  
+  const response = await api.get(`/video/${uuid}/playback`)
+  playbackCache.set(uuid, {
+    url: response.data.playback_url,
+    expiresAt: new Date(response.data.token_expires_at).getTime()
+  })
+  
+  return response.data.playback_url
+}
+```
+
+### 5. Debounce Editor Operations
+
+```typescript
+import { debounce } from 'lodash-es'
+
+const saveRecipe = debounce(async (recipe) => {
+  await api.post('/video/draft', { recipe })
+}, 1000)
+
+const updateTimeline = debounce((changes) => {
+  editorStore.updateTimeline(changes)
+}, 100)
+```
+
+## Best Practices
+
+1. **Always handle loading states** - Show spinners or skeletons
+2. **Provide feedback** - Acknowledge user actions immediately
+3. **Test on real devices** - Especially for mobile gestures
+4. **Monitor performance** - Track video load times and errors
+5. **Implement retry logic** - For network failures
+6. **Use appropriate video formats** - MP4 for compatibility
+7. **Optimize for mobile data** - Offer quality settings
+8. **Cache aggressively** - But respect token expiry
+9. **Handle edge cases** - No network, low storage, etc.
+10. **Accessibility** - Captions, keyboard controls, ARIA labels
+
+## Support
+
+For more examples and support:
+
+- **GitHub Examples**: https://github.com/mediables/examples
+- **CodeSandbox Demos**: https://codesandbox.io/u/mediables
+- **Video Tutorials**: https://youtube.com/@mediables
+- **Discord Community**: https://discord.gg/mediables