Feature/post creation #26
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Create new PostPage component for uploading videos - Add file picker for MP4, WebM, and GIF files - Implement metadata form (title, description, hashtags) - Add video preview with playback controls - Integrate with Blossom server (blossom.divine.video) - Add Post navigation button with Plus icon to BottomNav - Add /post route to AppRouter (login required) - Use same event structure as Discovery feed (kind 22) - Support mobile and desktop layouts - Add progress tracking for upload and publish - Include proper validation and error handling
Changes based on NIP-71 PR #2072 specification: - Use kind 34236 (addressable short videos) as default instead of kind 22 - Add kind 34235 (addressable normal videos) support - Rename LEGACY_VIDEO_KIND to ADDRESSABLE_SHORT_VIDEO_KIND for clarity - Add ADDRESSABLE_NORMAL_VIDEO_KIND constant - Update validation to check d tag requirement for kinds 34235 and 34236 - Update README with NIP-71 addressable event details - Update POST_FEATURE_SUMMARY with correct event structure Benefits of addressable events (kinds 34235, 34236): - Metadata corrections without republishing - URL migration when hosting changes - Preservation of imported content IDs from legacy platforms - Content updates while maintaining same reference All video kinds now supported: 21, 22, 34235, 34236
- Document all supported video event kinds (21, 22, 34235, 34236) - Explain addressable events and their benefits - Detail required and optional tags per NIP-71 PR #2072 - Include imeta tag structure and Blossom upload details - Provide testing checklist and migration guide - Add examples for publishing, querying, and referencing videos - Document validation requirements for d tag on addressable events
- Install @wmik/use-media-recorder package - Add "Record with Camera" option to post creation - Implement square camera viewfinder (1:1 aspect ratio) - Add red record button with pause/resume capability - Support multiple recording segments (cuts) - Display recording status indicators (Recording/Paused) - Show segment counter with delete option - Clean camera UI with proper controls layout - Support both camera recording and file upload - Proper cleanup of media streams and blobs - Request 1080x1080 square video for optimal quality - Use WebM/VP9 codec for efficient recording
- Update POST_FEATURE_SUMMARY with camera recording details - Add CAMERA_RECORDING_GUIDE with full technical documentation - Document recording controls and segment management - Include browser compatibility information - Add permission handling guide - Document performance considerations and best practices - Include testing checklist - Add future enhancement ideas (FFmpeg merging, camera switch, etc.)
Implement automatic video conversion to MP4 format for maximum compatibility across all platforms (web, iOS, Android). Key Features: - Add FFmpeg.wasm for client-side video conversion - Convert WebM recordings to MP4 with H.264 codec - Support multiple video segment combination - Add fallback to original format if conversion fails - Optimize conversion speed with 'ultrafast' preset Technical Changes: - Create videoConverter.ts utility with MP4 conversion - Update useVideoUpload to handle conversion flow - Add Vite config for FFmpeg.wasm compatibility - Set SharedArrayBuffer headers for FFmpeg support - Add comprehensive logging for debugging - Improve error handling and user feedback - Increase Nostr relay timeout from 5s to 15s UI Improvements: - Add detailed progress tracking UI - Show conversion, upload, and publishing stages - Display progress percentages for each stage - Add highlighted progress box that stays visible Dependencies: - @ffmpeg/ffmpeg: ^0.12.15 - @ffmpeg/util: ^0.12.2 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
The progress bar wasn't showing during the conversion phase because isProcessing only checked isUploading || isPublishing, but not the conversion state. Now it also checks uploadProgress > 0 to show the progress bar during all stages: conversion, upload, and publishing. 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
Resolved conflicts in README.md and package-lock.json - Kept both NIP-71 Video Events section and Relay Architecture documentation - Accepted main's package-lock.json
- Skip initial upload method selection, start directly with camera recording - Update progress bar text: "Converting to MP4" → "Preparing video" - Update progress bar text: "Uploading to Blossom" → "Uploading video" - Remove technical details about MP4 conversion and Blossom storage - Update cancel handler to navigate back instead of returning to selection screen 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Refactor MediaRecorder to use pause/resume instead of stop/start - This keeps the camera stream alive between recording segments - Add finalizeRecording() to create final video blob when done - Update UI to show recording progress instead of segment list - Fix "Next" button to enable based on currentDuration instead of segments - Display progress bar and duration counter during recording - Remove debug logging and cleanup recorder lifecycle Fixes issue where camera stream tracks would end after first segment, preventing subsequent recordings from starting. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add Plus icon import to AppHeader - Add Post button in desktop nav (hidden on mobile) - Button only shows when user is logged in - Matches styling and behavior of other nav buttons - Shows "Post" label on large screens, icon only on medium screens 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Author
|
I want to put this here just so it's visible. I need to test this on phones and see how flipping cameras and the whole UX works. |
Author
|
Please test on phones if you can. |
Contributor
|
We've been told that we're not allowing recording on web for now, but thank you for this! I'm excited for it when we do. |
Author
|
I heard that. There is a reason for that, it's because web records in webm which does not have good comparability with phones. This PR decodes recorded video to mp4. Try it, it's actually pretty cool. The recording experience is quite nice as well. |
Author
|
This PR is now complete. Ability to create multiple segments that include camera flipping. Works amazingly fast. |
Implement useMediaRecorder hook for comprehensive video recording: **Core Features:** - MediaRecorder API integration with optimal MIME type detection - Pause/resume functionality with segment preservation - Support for camera switching (front/back) during recording - Maximum 6-second duration with auto-stop - Real-time progress tracking (100ms intervals) **Multi-Segment Recording:** - Each pause creates a separate video segment as complete Blob - Segments preserved across camera switches and MediaRecorder reinit - MIME type persistence ensures compatibility across segments - Proper chunk management and cleanup **State Management:** - Track recording/paused states - Monitor current duration and progress (0-1) - Maintain segment array with timestamps and blobs - Camera stream lifecycle management **Technical Implementation:** - Singleton MediaRecorder pattern with refs - Automatic cleanup of blob URLs and streams - Progress interval management - Error handling with user-friendly toasts This hook provides the foundation for the post creation camera feature, enabling users to record video in multiple segments that can be stitched together. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…tion Implement complete video processing pipeline for post creation: **FFmpeg Integration:** - Add @ffmpeg/ffmpeg and @ffmpeg/util dependencies - Browser-based video processing (no server required) - Singleton FFmpeg instance with loading state management - Progress tracking for long-running operations **Video Processing Features:** - MP4 conversion with H.264 codec for universal compatibility - Multi-segment video concatenation using FFmpeg concat demuxer - Quality presets (high/medium/low) with CRF and preset controls - Web optimization with faststart flag for streaming - Automatic format detection and optimal encoding **Post Creation UI:** - Camera preview with flip camera button - Real-time recording progress with segment count display - Processing progress UI with three stages: 1. Finalizing recording (0-20%) 2. Combining segments (20-40% when multiple segments) 3. Converting to MP4 (40-100%) - Start over functionality to reset recording - Disabled states during processing **Technical Details:** - Vite config with SharedArrayBuffer headers for FFmpeg.wasm - Proper error handling and user feedback - Memory cleanup for temporary FFmpeg files - Size reduction reporting after conversion **Workflow:** 1. User records video in segments (with pause/resume) 2. On "Next": Finalize all segments 3. If multiple segments: Concatenate with FFmpeg concat demuxer 4. Convert final video to MP4 with H.264 5. Display metadata page with processed video ready for upload This completes the video recording and processing pipeline, enabling users to create, pause, flip cameras, and automatically process multi-segment recordings into a single optimized MP4 file. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
tkhumush
force-pushed
the
feature/post-creation
branch
from
7c33fb3 to
83ce91d
Compare
Author
|
I combined the commits in two easier to review chunks. |
Member
|
Thanks for the comprehensive implementation! However, we're intentionally not allowing posting from the web - posting should remain mobile-only via the iOS and Android apps. The web version is designed to be a viewer/browser experience, while content creation happens on mobile devices where the camera recording and upload experience is much better. Closing this PR, but appreciate the effort that went into it! |
Member
|
I didn't mean to close this, but rather not merge until we get the automated AI detection going. |
Author
|
@rabble i hear you, but if you have a minute, test it out. Users cannot upload files from their photos library, and the experience is quite nice. I understand that you don't want AI. This is coming straight from the camera feed, AI uploads are not possible through the post page. Anyway, I understand your concern though. The app won't be fun if it gets overrun with AI content. This PR is actually quite impressive.
|
Member
|
Does it limit the recording to 6 seconds? |
Member
|
@tkhumush good points. Let me fix the media host so it's more reliable first? |
Updated feature/post-creation branch with latest changes from main, including: - Removed numerous documentation and old test files - Added brand assets and social icons - Updated dependencies in package.json - Added new components (PWAInstallPrompt, ViewSourceDialog, etc.) - Enhanced hooks and utilities - Updated relay configuration Resolved conflicts by keeping feature branch implementations for: - NIP-71 multi-kind video support (kinds 21, 22, 34235, 34236) - Enhanced README with addressable events documentation - Post creation functionality with Plus button in AppHeader - Updated video type definitions with full NIP-71 support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Camera Recording Fixes: - Add stream activity validation in useMediaRecorder startSegment - Keep camera preview playing between recording segments - Add effect to restart playback if video element pauses - Enhanced debug logging for stream state diagnostics HTTPS Configuration: - Add @vitejs/plugin-basic-ssl for local HTTPS development - Configure server to bind to 0.0.0.0 for phone testing - Enable SSL plugin for proper self-signed certificates This resolves the issue where camera preview would go black after pausing a recording segment, and enables testing on mobile devices via local network HTTPS. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit captures the current work-in-progress on implementing segment-based recording for Vine-style video creation with pause/resume and camera switching capabilities. Changes: - useMediaRecorder: Reverted to segment-based approach - Each pause creates a new segment - Camera switching stops and saves current segment - All segments stored in state for later combination - Enhanced logging for debugging - PostPage: Added segment handling and FFmpeg fallbacks - Multiple segment detection and handling - Timeout fallbacks for FFmpeg operations (30s) - Fallback to first segment if combining fails - Enhanced debug logging throughout process - videoConverter: Added detailed FFmpeg loading diagnostics - SharedArrayBuffer detection - Cross-origin isolation checks - Step-by-step CDN fetch logging - Detailed error reporting Known Issues: - FFmpeg.wasm not working on mobile (SharedArrayBuffer/CORS) - Segment combination timing out - MP4 conversion timing out - Currently falls back to first segment only - Duplicate files in repo (need cleanup) Next Steps: - Fix FFmpeg loading on mobile OR - Implement alternative WebM blob merging OR - Find server-side conversion solution 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove camera flip functionality (front camera only) - Use pause/resume instead of stop/start for segments - Keep camera stream alive when paused (no black screen) - Combine all chunks into single blob on finalization - Disable camera switching once recording starts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
|
Author
|
The web app had multiple updates that broke the experience a bit. I'll try to get it to work again. |
🚀 Preview Deployment
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add Video Post Creation with Camera Recording
This PR adds a complete video post creation workflow with camera recording capabilities.
Features
Camera Recording
Video Processing
UI/UX Improvements
Technical Details
Related Files