VideoBlast Manager

VideoBlast Manager

Component File: src/features/fundraising/components/VideoBlastManager.tsx Landing Page: src/features/fundraising/components/VideoBlastLandingPage.tsx Route: /fundraising (with tool='VideoBlast') Public Route: /vb/:publicUrl (no auth required) Access Level: Parent Org and Fund Users with Fundraising access (position-based)

Overview

The VideoBlast Manager enables users to create video-centric donation landing pages. Users can record videos directly using their webcam or upload pre-recorded videos. Each VideoBlast page is a personalized donation landing page featuring the video prominently, designed to increase donor engagement through personal storytelling. This tool is particularly effective for peer-to-peer fundraising and campaign launches.

Implementation Status: ✅ COMPLETE

Backend Integration

  • ✅ Videos stored in Supabase Storage (video-bombs bucket)
  • ✅ Video bomb records stored in video_bombs database table
  • ✅ Public URLs route to /vb/:publicUrl landing pages
  • ✅ Stripe checkout integration for donations
  • ✅ View tracking on landing page visits
  • ✅ Donation attribution tracking

Storage Limits

  • Max video duration: 1 minute (60 seconds)
  • Max file size: 50MB
  • Supabase Storage quota: 100GB (Pro plan)
  • Estimated capacity: ~2,500-5,000 short videos

UI Features

Main Features

  • Video Recording:
  • Record button to start webcam recording
  • Live preview during recording
  • Recording timer with 1-minute countdown
  • Auto-stop at 1 minute limit
  • Pause/Resume controls
  • Stop recording button
  • Re-record option
  • Video Upload:
  • Drag-and-drop file upload
  • File browser upload
  • Supported formats: MP4, WebM, MOV
  • 1-minute duration validation
  • 50MB file size limit
  • VideoBlast Creation Dialog:
  • Title input
  • Organization selector
  • Video preview
  • Create button with upload progress
  • VideoBlast List:
  • Thumbnail preview
  • Title and organization
  • Created date
  • View count
  • Donation count and total raised
  • Copy link button
  • Delete button
  • Back to Marketing Hub button

Recording Interface

┌─────────────────────────────────────────┐
│ Create VideoBlast                        │
├─────────────────────────────────────────┤
│                                         │
│ ┌─────────────────────────────────┐   │
│ │                      [0:45/1:00]│   │
│ │     [Live Video Preview]        │   │
│ │                                 │   │
│ │                                 │   │
│ └─────────────────────────────────┘   │
│                                         │
│ [🔴 Record]  [⏸️ Pause]  [⏹️ Stop]      │
│                                         │
│ OR                                      │
│                                         │
│ [📤 Upload Video]                       │
│ Drag & drop or click to browse          │
│ Supported: MP4, WebM, MOV (max 1 min)  │
│                                         │
└─────────────────────────────────────────┘

Create VideoBlast Dialog

┌─────────────────────────────────────────┐
│ Create VideoBlast Page                   │
├─────────────────────────────────────────┤
│                                         │
│ Title *                                 │
│ [My Fundraising Story               ]  │
│                                         │
│ Organization *                          │
│ [Awakenings                         ▼] │
│                                         │
│ Video Preview                           │
│ ┌─────────────────────────────────┐   │
│ │   [Video Thumbnail/Preview]     │   │
│ └─────────────────────────────────┘   │
│                                         │
│ [Cancel]              [Create VideoBlast]│
└─────────────────────────────────────────┘

VideoBlast List

My VideoBlasts

┌────────────────────┐  ┌────────────────────┐
│ [Video Thumbnail]  │  │ [Video Thumbnail]  │
│                    │  │                    │
│ My Story           │  │ Campaign Launch    │
│ Awakenings         │  │ Bloom Strong       │
│ Created: 10/15/25  │  │ Created: 10/18/25  │
│                    │  │                    │
│ [🔗 Copy Link]     │  │ [🔗 Copy Link]     │
│ [🗑️ Delete]        │  │ [🗑️ Delete]        │
└────────────────────┘  └────────────────────┘

Data Requirements

VideoBlast

  • id (uuid) - Unique identifier
  • organization_id (uuid) - Organization
  • title (string) - VideoBlast title
  • video_url (string) - Video file URL
  • thumbnail_url (string) - Video thumbnail
  • public_url (string) - Public landing page URL
  • created_by (uuid) - Creator user ID
  • created_at (timestamp) - Creation date
  • views (integer) - Page view count
  • donations_count (integer) - Donations from this page
  • donations_total (decimal) - Total raised
  • status (enum) - 'active', 'paused', 'archived'

Video Upload

  • file (binary) - Video file
  • filename (string) - Original filename
  • file_size (integer) - Size in bytes
  • mime_type (string) - Video MIME type
  • duration (integer) - Video duration in seconds

Database Functions (db.ts)

All VideoBlast operations are implemented in src/lib/db.ts:

fetchVideoBlasts(entityId)

Fetches all video bombs for an organization.

fetchVideoBlastByPublicUrl(publicUrl)

Fetches a single video bomb by its public URL slug (for landing page).

createVideoBlast({ entityId, title, videoUrl, createdBy })

Creates a new video bomb record with auto-generated public URL slug.

deleteVideoBlast(id)

Deletes a video bomb record from the database.

uploadVideoBlastVideo(file, organizationId)

Uploads video file to Supabase Storage video-bombs bucket.

deleteVideoBlastVideo(videoUrl)

Deletes video file from Supabase Storage.

incrementVideoBlastViews(id)

Increments view count when landing page is visited.

recordVideoBlastDonation(VideoBlastId, amount)

Records donation attribution for analytics.

Supabase Storage

Bucket Configuration

  • Bucket name: video-bombs
  • Public: Yes (for video playback on landing pages)
  • File size limit: 50MB
  • Allowed MIME types: video/mp4, video/webm, video/quicktime, image/jpeg, image/png, image/webp

RLS Policies

  • Authenticated users can upload videos
  • Public can view videos (for landing pages)
  • Authenticated users can delete their own videos

Legacy API Endpoints (Not Used)

The following endpoints were originally planned but are now handled directly via Supabase client:

POST /api/v1/VideoBlasts/upload_video

Description: Upload video file to cloud storage
Status: REPLACED by uploadVideoBlastVideo() in db.ts

POST /api/v1/VideoBlasts

Description: Create a new VideoBlast page
Status: REPLACED by createVideoBlast() in db.ts

GET /api/v1/VideoBlasts

Description: Get all VideoBlasts
Status: REPLACED by fetchVideoBlasts() in db.ts

Response: {
  data: [
    {
      id: "uuid",
      organization_id: "uuid",
      organization_name: "Awakenings",
      title: "My Fundraising Story",
      video_url: "https://cdn.../video.mp4",
      thumbnail_url: "https://cdn.../thumbnail.jpg",
      public_url: "https://donate.org/vb/abc123",
      created_at: "2025-10-20T10:00:00Z",
      views: 245,
      donations_count: 12,
      donations_total: 3450.00,
      status: "active"
    }
  ],
  meta: {
    total: 8,
    page: 1,
    per_page: 50
  }
}

GET /api/v1/VideoBlasts/:id

Description: Get VideoBlast details
Response: {
  data: {
    id: "uuid",
    organization_id: "uuid",
    organization_name: "Awakenings",
    title: "My Fundraising Story",
    video_url: "https://cdn.../video.mp4",
    thumbnail_url: "https://cdn.../thumbnail.jpg",
    public_url: "https://donate.org/vb/abc123",
    created_by: "uuid",
    created_by_name: "John Doe",
    created_at: "2025-10-20T10:00:00Z",
    views: 245,
    donations_count: 12,
    donations_total: 3450.00,
    status: "active"
  }
}

PATCH /api/v1/VideoBlasts/:id

Description: Update VideoBlast
Request Body: {
  title: "Updated Title",
  status: "paused"
}

Response: {
  data: { ...updated VideoBlast },
  message: "VideoBlast updated successfully"
}

DELETE /api/v1/VideoBlasts/:id

Description: Delete VideoBlast
Response: {
  message: "VideoBlast deleted successfully"
}

GET /api/v1/VideoBlasts/:id/analytics

Description: Get VideoBlast analytics
Response: {
  data: {
    views: 245,
    unique_visitors: 180,
    donations_count: 12,
    donations_total: 3450.00,
    conversion_rate: 6.67,
    avg_donation: 287.50,
    views_by_day: [...],
    donations_by_day: [...]
  }
}

Request/Response Schemas

interface VideoBlast {
  id: string;
  organization_id: string;
  organization_name: string;
  title: string;
  video_url: string;
  thumbnail_url: string;
  public_url: string;
  created_by: string;
  created_by_name: string;
  created_at: string;
  views: number;
  donations_count: number;
  donations_total: number;
  status: 'active' | 'paused' | 'archived';
}

interface VideoBlastFormData {
  title: string;
  organization_id: string;
  video_url: string;
  thumbnail_url: string;
}

Authentication & Authorization

Required Permissions

  • VideoBlasts:read - View VideoBlasts
  • VideoBlasts:create - Create VideoBlasts
  • VideoBlasts:update - Edit VideoBlasts
  • VideoBlasts:delete - Delete VideoBlasts

Role-Based Access

  • Parent Org (`parent_org`): View VideoBlasts across all nonprofits (subject to position/access level)
  • Fund User (`fund_user`): Create and manage their nonprofit's VideoBlasts (subject to position/access level)
  • Positions: Directors and assistants typically have Marketing access; custom positions must enable Marketing permissions
  • Donor/Volunteer: No access (can view public pages)

Business Logic & Validations

Frontend Validations

  • Title required (max 100 characters)
  • Organization required
  • Video required (either recorded or uploaded)
  • File size limit: 100MB
  • Supported formats: MP4, WebM, MOV
  • Camera permissions check

Backend Validations (Rails)

  • Valid organization access
  • Video file validation
  • File size limit enforcement
  • Virus scanning on upload
  • Thumbnail generation
  • URL uniqueness for public_url

Business Rules

  • Each VideoBlast has unique public URL
  • Videos stored in cloud storage (S3, CloudFlare, etc.)
  • Thumbnails auto-generated from video
  • Public pages are SEO-optimized
  • Analytics tracked automatically
  • Videos transcoded for web optimization
  • Donation button integrated on public page

State Management

Local State

  • isRecording - Recording status
  • isPaused - Pause status
  • recordedVideo - Recorded video blob URL
  • uploadedVideo - Uploaded video file
  • showCreateDialog - Dialog visibility
  • VideoBlastTitle - Form title
  • VideoBlastEntity - Selected organization
  • isDragging - Drag-and-drop state
  • videoRef - Video element reference
  • mediaRecorderRef - MediaRecorder reference
  • streamRef - MediaStream reference

Global State (AppContext)

  • VideoBlasts - Array of VideoBlasts
  • addVideoBlast - Function to add
  • deleteVideoBlast - Function to delete

Dependencies

Internal Dependencies

  • AppContext - Global state
  • UI components (Card, Button, Dialog, Input, etc.)

External Libraries

  • lucide-react - Icons
  • sonner - Toast notifications
  • Browser MediaRecorder API - Video recording
  • Browser MediaDevices API - Camera access

Error Handling

Error Scenarios

1. Camera Access Denied: Show toast "Camera access denied. Please upload a video instead." 2. No Camera Found: Show toast "No camera found. Please upload a video instead." 3. File Too Large: Show error "File exceeds 100MB limit" 4. Invalid Format: Show error "Unsupported video format" 5. Upload Failed: Show toast "Failed to upload video" 6. Create Failed: Show toast "Failed to create VideoBlast" 7. Permission Error: Show toast "You don't have permission"

Loading States

  • Recording: Live preview with recording indicator
  • Upload: Progress bar during upload
  • Processing: Processing indicator after upload
  • Create: Button loading state

Mock Data to Remove

  • AppContext.tsx - VideoBlasts array (move to API)
  • VideoBlastManager.tsx - Local state management (use API)
  • Move interfaces to src/types/VideoBlasts.ts

Migration Notes

Phase 1: Video Upload

1. Integrate with cloud storage (S3, CloudFlare R2) 2. Implement video upload endpoint 3. Add thumbnail generation 4. Test file validation

Phase 2: VideoBlast Creation

1. Implement CRUD endpoints 2. Generate unique public URLs 3. Create public landing page template 4. Test donation integration

Phase 3: Analytics

1. Implement view tracking 2. Track donation attribution 3. Add analytics dashboard 4. Generate reports

Phase 4: Optimization

1. Video transcoding for web 2. Adaptive bitrate streaming 3. CDN integration 4. Performance optimization

Related Documentation

Additional Notes

Public Landing Page Features

  • Video player (autoplay on mobile)
  • Compelling headline
  • Donation form
  • Progress bar (if campaign goal set)
  • Social sharing buttons
  • Creator information
  • Organization branding

Video Recording Best Practices

  • Good lighting
  • Clear audio
  • 1-3 minutes optimal length
  • Personal storytelling
  • Clear call-to-action
  • Test before recording

Use Cases

1. Peer-to-Peer Fundraising: Supporters create personal appeals 2. Campaign Launches: Announce new initiatives 3. Impact Stories: Share beneficiary testimonials 4. Event Promotion: Promote fundraising events 5. Thank You Videos: Donor appreciation

Technical Specifications

Supported Formats:

  • MP4 (H.264 codec)
  • WebM (VP8/VP9 codec)
  • MOV (QuickTime)

Recommended Settings:

  • Resolution: 1080p or 720p
  • Frame rate: 30fps
  • Bitrate: 5-10 Mbps
  • Audio: AAC, 128kbps

Browser Compatibility:

  • Chrome/Edge: Full support
  • Firefox: Full support
  • Safari: Full support (with permissions)
  • Mobile: Upload only (recording limited)

Integration with Donations

  • Public page includes donation form
  • Donations attributed to VideoBlast
  • Creator notified of donations
  • Analytics track conversion rate
  • Social proof (recent donations shown)

SEO Optimization

  • Meta tags for social sharing
  • Open Graph tags
  • Twitter Card tags
  • Schema.org markup
  • Optimized page load speed

Synced from IFMmvp-Frontend documentation: pages/marketing/03-VIDEOBLAST-MANAGER.md

Ready to Get Started?

See how Alignmint can simplify your nonprofit's operations. Schedule a free demo with our team and we'll walk you through everything.

Questions? Email us at steven@getalignmint.org

Previous
Prospects List (ProspectsCRM)
Next
VideoBlast Landing Page
Ready to get started?Start Plus Trial