This commit implements full video upload, storage, streaming, and playback functionality
for the PicPeak photo sharing platform, allowing users to upload and view videos alongside
photos in galleries.
Backend Changes:
- Added video processing dependencies (fluent-ffmpeg, @ffmpeg-installer/ffmpeg)
- Created videoProcessor.js service for video metadata extraction and thumbnail generation
- Updated photoProcessor.js to handle both images and videos
- Modified adminPhotos.js to accept video files with 500MB size limit
- Enhanced gallery.js with HTTP range request support for video streaming
- Expanded fileSecurityUtils.js with video MIME types and magic number validation
- Added database migration for video support columns (media_type, duration, codecs, dimensions)
Frontend Changes:
- Updated TypeScript types to include video metadata fields
- Created VideoPlayer.tsx component with custom controls
- Modified PhotoUpload.tsx to accept video files (.mp4, .webm, .mov, .avi)
- Updated UserPhotoUpload.tsx for guest video uploads
- Enhanced PhotoGrid.tsx with video badges and duration display
- Modified PhotoLightbox.tsx to conditionally render VideoPlayer for videos
Database Schema:
- Added media_type column ('image' | 'video')
- Added mime_type, duration, video_codec, audio_codec columns
- Added width and height columns for media dimensions
- Migrated existing photos to media_type 'image'
Features:
- Video thumbnail generation from video frames
- Streaming support with range requests for efficient playback
- Video duration display on thumbnails
- Play button indicators on video items
- Full-featured video player with playback controls
- Support for MP4, WebM, MOV, and AVI formats
70 lines
1.8 KiB
JSON
70 lines
1.8 KiB
JSON
{
|
|
"name": "picpeak-backend",
|
|
"version": "1.1.15",
|
|
"description": "Backend for PicPeak event photo sharing platform",
|
|
"main": "server.js",
|
|
"scripts": {
|
|
"start": "node server.js",
|
|
"dev": "nodemon server.js",
|
|
"migrate": "node migrations/run-migrations.js",
|
|
"migrate:safe": "node migrations/run-migrations-safe.js",
|
|
"test": "jest",
|
|
"lint": "eslint src/"
|
|
},
|
|
"dependencies": {
|
|
"@aws-sdk/client-s3": "^3.850.0",
|
|
"@aws-sdk/lib-storage": "^3.850.0",
|
|
"@aws-sdk/s3-request-presigner": "^3.850.0",
|
|
"@ffmpeg-installer/ffmpeg": "^1.1.0",
|
|
"adm-zip": "^0.5.16",
|
|
"archiver": "^5.3.1",
|
|
"axios": "^1.12.2",
|
|
"bcrypt": "6.0.0",
|
|
"chokidar": "4.0.3",
|
|
"cookie-parser": "^1.4.7",
|
|
"cors": "^2.8.5",
|
|
"dotenv": "^16.0.3",
|
|
"express": "^4.18.2",
|
|
"express-rate-limit": "^6.7.0",
|
|
"express-validator": "^7.0.1",
|
|
"fluent-ffmpeg": "^2.1.3",
|
|
"form-data": "^4.0.4",
|
|
"handlebars": "^4.7.8",
|
|
"helmet": "^7.0.0",
|
|
"i18next": "25.3.2",
|
|
"i18next-browser-languagedetector": "^8.2.0",
|
|
"i18next-http-backend": "^3.0.2",
|
|
"joi": "^17.9.1",
|
|
"js-yaml": "^4.1.1",
|
|
"jsonwebtoken": "^9.0.0",
|
|
"knex": "^2.4.2",
|
|
"mime-types": "^3.0.1",
|
|
"multer": "^2.0.2",
|
|
"node-cron": "^3.0.2",
|
|
"nodemailer": "^7.0.10",
|
|
"pg": "^8.16.3",
|
|
"react-i18next": "^15.6.0",
|
|
"sanitize-html": "^2.17.0",
|
|
"sharp": "0.34.3",
|
|
"sqlite3": "^5.1.6",
|
|
"uuid": "^11.1.0",
|
|
"winston": "^3.8.2",
|
|
"zxcvbn": "^4.4.2"
|
|
},
|
|
"devDependencies": {
|
|
"eslint": "^8.40.0",
|
|
"jest": "^29.5.0",
|
|
"mock-fs": "^5.5.0",
|
|
"nodemon": "^3.1.10",
|
|
"supertest": "^6.3.3"
|
|
},
|
|
"overrides": {
|
|
"prebuild-install": {
|
|
"tar-fs": "2.1.4"
|
|
},
|
|
"glob": "^11.1.0",
|
|
"body-parser": "^2.2.1",
|
|
"js-yaml": "^4.1.1"
|
|
}
|
|
}
|