feat: enable S3 video uploads and update related configurations

- Added support for self-hosted S3 video uploads with new environment variables: OPENFRAME_ENABLE_S3_VIDEO_UPLOADS and OPENFRAME_MAX_VIDEO_UPLOAD_BYTES.
- Updated .env.example and .env.docker.example to reflect new configuration options.
- Enhanced Content Security Policy to include origins for S3-compatible storage.
- Updated dependencies for AWS SDK to support new features.
- Refactored upload logic to accommodate both Bunny and S3 upload providers.
- Updated documentation to clarify the usage of direct uploads and S3 configurations.
- Closes #11

lib/video-providers/index.ts

@@ -3,6 +3,7 @@
 import { youtubeProvider } from './youtube';
 import { directProvider } from './direct';
 import { bunnyProvider } from './bunny';
+import { r2Provider } from './r2';
 import type { VideoProvider, VideoSource, VideoMetadata, VideoProviderType } from './types';
 import { logError } from '@/lib/logger';
 
@@ -10,7 +11,7 @@ import { logError } from '@/lib/logger';
 export * from './types';
 
 // Registry of all available providers
-const providers: VideoProvider[] = [youtubeProvider, directProvider, bunnyProvider];
+const providers: VideoProvider[] = [youtubeProvider, directProvider, bunnyProvider, r2Provider];
 
 // Provider lookup map for quick access
 const providerMap = new Map<string, VideoProvider>(providers.map((p) => [p.id, p]));

lib/video-providers/r2.ts

@@ -0,0 +1,42 @@
+import type { VideoProvider, VideoMetadata, EmbedOptions } from './types';
+
+const R2_VIDEO_PROXY_PATH = /^\/api\/upload\/video\/[0-9a-f-]{36}\.[a-z0-9]+$/i;
+
+export const r2Provider: VideoProvider = {
+  id: 'r2',
+  name: 'Self-hosted',
+  icon: 'Upload',
+
+  canHandle(url: string): boolean {
+    return R2_VIDEO_PROXY_PATH.test(url);
+  },
+
+  extractVideoId(url: string): string | null {
+    if (this.canHandle(url)) {
+      return url;
+    }
+    return null;
+  },
+
+  getEmbedUrl(videoId: string, options: EmbedOptions = {}): string {
+    const params = new URLSearchParams();
+    if (options.startTime) params.set('t', String(Math.floor(options.startTime)));
+    const queryString = params.toString();
+    return `${videoId}${queryString ? `?${queryString}` : ''}`;
+  },
+
+  getThumbnailUrl(_videoId: string): string {
+    void _videoId;
+    return '/placeholder-video-thumbnail.png';
+  },
+
+  async getMetadata(videoId: string): Promise<VideoMetadata> {
+    const filename = videoId.split('/').pop() || 'Video';
+    const nameWithoutExt = filename.replace(/\.[^/.]+$/, '');
+
+    return {
+      title: nameWithoutExt,
+      thumbnailUrl: this.getThumbnailUrl(videoId),
+    };
+  },
+};

lib/video-providers/types.ts

@@ -38,7 +38,7 @@ export interface EmbedOptions {
 export type ThumbnailSize = 'small' | 'medium' | 'large' | 'maxres';
 
 // Supported provider types - extend as we add more
-export type VideoProviderType = 'youtube' | 'direct' | 'bunny';
+export type VideoProviderType = 'youtube' | 'direct' | 'bunny' | 'r2';
 
 // Video source stored in database
 export interface VideoSource {