Skip to content

VIDEO_UPLOAD_GUIDE.md

Latest commit

 

History

History
291 lines (208 loc) · 6.86 KB

VIDEO_UPLOAD_GUIDE.md

File metadata and controls

291 lines (208 loc) · 6.86 KB
Raw

Video Upload Guide

Overview

This guide explains how to add the 9 new videos to your TikTok clone app. The code has already been updated to support these videos.

Videos to Download

AI-Generated Videos (3)

  1. clip9.mp4

  2. clip10.mp4

  3. clip11.mp4

Deepfake Videos (3)

  1. clip12.mp4

  2. clip13.mp4

  3. clip14.mp4

Safe/Verified Videos (3)

  1. clip15.mp4

  2. clip16.mp4

  3. clip17.mp4

Step-by-Step Upload Instructions

Step 1: Download Videos

For YouTube Videos

# Install yt-dlp if you don't have it
brew install yt-dlp

# Download clip12.mp4
yt-dlp -f 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best' \
  -o 'clip12.mp4' \
  'https://www.youtube.com/shorts/0dTmRCHdXT8'

# Download clip13.mp4
yt-dlp -f 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best' \
  -o 'clip13.mp4' \
  'https://youtube.com/shorts/4g_vYZJVw9s'

# Download clip14.mp4
yt-dlp -f 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best' \
  -o 'clip14.mp4' \
  'https://youtu.be/LTQfBfvpv_k'

# Download clip15.mp4
yt-dlp -f 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best' \
  -o 'clip15.mp4' \
  'https://youtu.be/MuJdsIPJ18A'

For Instagram Videos

  1. Go to: https://snapinsta.app/
  2. Paste Instagram URL
  3. Download as MP4
  4. Rename to clip16.mp4 and clip17.mp4

For Grok Videos

  1. Open each Grok link in your browser
  2. Right-click on the video
  3. Select "Save video as..."
  4. Rename to clip9.mp4, clip10.mp4, clip11.mp4

Step 2: Optimize Videos (Optional but Recommended)

# Install ffmpeg if you don't have it
brew install ffmpeg

# Compress each video to under 5MB
for i in {9..17}; do
  ffmpeg -i clip$i.mp4 -c:v libx264 -crf 28 -preset slow -c:a aac -b:a 128k clip$i-optimized.mp4
  mv clip$i-optimized.mp4 clip$i.mp4
done

Step 3: Create Thumbnail Images

You need 9 thumbnail images (img14.jpg through img22.jpg).

Option A: Extract from Videos

# Extract first frame as thumbnail
for i in {9..17}; do
  ffmpeg -i clip$i.mp4 -ss 00:00:01 -vframes 1 img$((i+5)).jpg
done

Option B: Use Placeholder Images

# Create placeholder images (if you don't have thumbnails)
for i in {14..22}; do
  cp assets/dummy/img1.jpg assets/dummy/img$i.jpg
done

Step 4: Place Files in Assets

# Move videos to assets folder
mv clip9.mp4 assets/dummy/
mv clip10.mp4 assets/dummy/
mv clip11.mp4 assets/dummy/
mv clip12.mp4 assets/dummy/
mv clip13.mp4 assets/dummy/
mv clip14.mp4 assets/dummy/
mv clip15.mp4 assets/dummy/
mv clip16.mp4 assets/dummy/
mv clip17.mp4 assets/dummy/

# Move thumbnails to assets folder
mv img14.jpg assets/dummy/
mv img15.jpg assets/dummy/
mv img16.jpg assets/dummy/
mv img17.jpg assets/dummy/
mv img18.jpg assets/dummy/
mv img19.jpg assets/dummy/
mv img20.jpg assets/dummy/
mv img21.jpg assets/dummy/
mv img22.jpg assets/dummy/

Step 5: Upload to Firebase Storage

Option A: Using Firebase Console (Easier)

  1. Go to: https://console.firebase.google.com/project/codeandconquer-fb59c/storage
  2. Navigate to demo-videos/ folder
  3. Click "Upload files"
  4. Upload all 9 videos (clip9.mp4 through clip17.mp4)

Option B: Using Firebase CLI (Faster)

# Install Firebase CLI if you don't have it
npm install -g firebase-tools

# Login to Firebase
firebase login

# Upload videos to Firebase Storage
cd assets/dummy
for i in {9..17}; do
  firebase storage:upload clip$i.mp4 \
    --project codeandconquer-fb59c \
    --path demo-videos/clip$i.mp4
done

Step 6: Verify Firebase Storage URLs

The videos should be accessible at these URLs:

https://storage.googleapis.com/codeandconquer-fb59c.firebasestorage.app/demo-videos/clip9.mp4
https://storage.googleapis.com/codeandconquer-fb59c.firebasestorage.app/demo-videos/clip10.mp4
...
https://storage.googleapis.com/codeandconquer-fb59c.firebasestorage.app/demo-videos/clip17.mp4

Test by opening each URL in your browser.

Quick Reference

File Checklist

  • clip9.mp4 - AI-generated futuristic city
  • clip10.mp4 - AI-generated abstract art
  • clip11.mp4 - AI-generated surreal landscape
  • clip12.mp4 - Deepfake government official
  • clip13.mp4 - Deepfake celebrity crypto
  • clip14.mp4 - Manipulated tech insider
  • clip15.mp4 - MRT heritage exhibition
  • clip16.mp4 - East Coast Park event
  • clip17.mp4 - Hawker centre video
  • img14.jpg - Thumbnail for clip9
  • img15.jpg - Thumbnail for clip10
  • img16.jpg - Thumbnail for clip11
  • img17.jpg - Thumbnail for clip12
  • img18.jpg - Thumbnail for clip13
  • img19.jpg - Thumbnail for clip14
  • img20.jpg - Thumbnail for clip15
  • img21.jpg - Thumbnail for clip16
  • img22.jpg - Thumbnail for clip17

Testing

After uploading, test by:

  1. Running the app: npm start
  2. Navigating to posts 13-21
  3. Clicking the status badge to trigger AI analysis
  4. Verifying each video plays correctly

Troubleshooting

Video Won't Play

  • Check file format (must be MP4)
  • Verify Firebase Storage URL is correct
  • Check file size (should be <10MB for web)

Thumbnail Not Showing

  • Verify image file exists in assets/dummy/
  • Check require() path in DUMMY_POST_MEDIA_BY_ID

Build Error

  • Run: npm run clean-cache
  • Delete node_modules and reinstall: rm -rf node_modules && npm install

Need Help?

If you encounter issues:

  1. Check Firebase Console for upload errors
  2. Verify file permissions
  3. Check browser console for CORS errors
  4. Ensure Firebase Storage rules allow public read access