Skip to main content
Media Vault is your centralized file management system for all media generated by JOIP tools (Smart Captions, BabeCock Studio, etc.) and direct uploads.

​
Overview

The Media Vault provides:
  • Unified Library: All your media in one place
  • Advanced Filtering: Search by source, date, filename, creator
  • Bulk Operations: Select, download, delete multiple files
  • Fullscreen Viewer: High-quality media viewing with metadata
  • Sharing: Generate public share links for individual files
  • Organization: Rename files, add character names, manage folders

​
Accessing Your Vault

From the sidebar, click Media Vault to open your library. The main interface shows:
  • Header: Stats (total files) and quick actions
  • Search & Filters: Find specific media
  • Grid/List View: Toggle display mode
  • Selection Mode: Enable bulk operations
  • Settings Panel: Customize vault behavior

​
Viewing Media

​
Grid View (Default)

Layout:
  • Responsive grid (2-6 columns depending on screen size)
  • Square thumbnails with hover effects
  • Category badges (Smart Caption, BabeCock, etc.)
  • Action buttons on hover
Card Information:
  • Thumbnail preview
  • Filename (truncated if long)
  • Creation date
  • Source badge (where it was created)
  • Subreddit badge (if from Reddit)

​
List View

Layout:
  • Compact rows with small thumbnails
  • Full filename visible
  • Sortable columns
  • More items visible per page
Best for: Large libraries where you need to see many files at once

​
Fullscreen Viewer

1

Open Viewer

Click any media item to open fullscreen viewer (if enabled in settings)Or click the eye icon on hover
2

Navigate

Keyboard Shortcuts (if enabled):
  • Arrow Left/Right: Previous/Next image
  • +/-: Zoom in/out
  • 0: Reset zoom
  • H: Toggle UI visibility
  • Escape: Close viewer
Mouse Controls:
  • Click navigation arrows
  • Use zoom buttons in bottom bar
  • Click outside image to toggle UI
3

View Metadata

The viewer displays (if enabled in settings):
  • Resolution: Image dimensions (e.g., 1920×1080)
  • File Size: In MB (fetched via HEAD request)
  • Creation Date: When file was created
  • Source Category: Which tool created it
  • Subreddit: If sourced from Reddit
File size may not appear if CORS blocks the Content-Length header.
4

Quick Actions

Top-right action buttons:
  • Download: Save to device
  • Copy Image: Copy to clipboard
  • Open Original: New tab with direct image URL
  • Toggle UI: Hide/show controls
  • Close: Exit viewer (or press Escape)

​
Search and Filtering

​
Text Search

Search bar finds matches in:
  • Filenames
  • Character names
  • Captions (if saved with media)
  • Subreddit names
  • Creator names
Features:
  • Debounced input (300ms delay)
  • Case-insensitive matching
  • Real-time results
  • Clear button (X) to reset

​
Filter by Source

Dropdown options:
  • All: Show all media
  • Smart Captions: Only AI-captioned images
  • BabeCock: Only BabeCock combinations
  • HypnoCocks: Only HypnoCocks creations
  • Upload: Only directly uploaded files

​
Filter by Date

Dropdown options:
  • All Time: No date filter
  • Today: Last 24 hours
  • This Week: Last 7 days
  • This Month: Last 30 days
  • This Year: Last 365 days

​
Sort Options

Choose sorting:
  • Newest: Most recent first (default)
  • Oldest: Oldest first
  • Name A-Z: Alphabetical ascending
  • Name Z-A: Alphabetical descending
Filters and sorts persist in localStorage. Your preferences are remembered between sessions.

​
File Operations

​
Individual Actions

Hover over any media card to reveal:

Download

Saves file to your device with proper filename and extension.

Copy Link

Copies public URL to clipboard for sharing.

Rename

Opens dialog to change filename and add character name.

Share

Generates shareable link and optional community publishing.

Delete

Permanently removes file (with confirmation).

View

Opens fullscreen viewer at this item.

​
Renaming Files

1

Open Rename Dialog

Click the pencil icon on any media item.
2

Edit Filename

Change the display name (without extension):
  • Original: smart-caption-1234567890.png
  • New name: Goddess Blonde JOI
  • Saved as: Goddess Blonde JOI.png
3

Add Character Name (Optional)

Enter a character/person name:
  • Used for filtering and search
  • Shows as purple badge on card
  • Useful for organizing by person/character
Character names are searchable and help organize media by subject.
4

Save Changes

Click Rename to apply changes.The system:
  • Updates database record
  • Renames file in storage (maintains extension)
  • Updates all references
  • Refreshes vault view

​
Sharing Files

1

Open Share Dialog

Click the share icon on any media item.
2

Configure Sharing

Options in share dialog:Share to Community (toggle)
  • ON: File appears in community feed (discoverable by all users)
  • OFF: File is private (only you can access)
Copy Share Link
  • Generates unique public URL
  • Link works regardless of community toggle
  • Anyone with link can view
Share links are permanent and public. Anyone with the URL can view the media.
3

Manage Sharing

After sharing:
  • Unshare: Click share icon again, toggle community off
  • Copy Link Again: Share icon shows “Shared” state, click to copy link
  • View in Community: Navigate to Community to see your shared media

​
Bulk Operations

1

Enter Selection Mode

Click the Select button in the header.Changes:
  • Checkboxes appear on all media cards
  • Bulk action toolbar appears
  • Individual hover actions disabled
2

Select Items

Choose files using:Click Selection
  • Click checkbox on each item
  • Click again to deselect
Select All
  • Click Select All button in toolbar
  • Selects all items in current filter
Rubber-Band Selection (mouse drag)
  • Click and hold on empty space
  • Drag to create selection box
  • Release to select all items within box
Selection count appears in toolbar: “5 items selected”
3

Perform Bulk Action

Available actions:Bulk Download
  • Creates ZIP file with all selected media
  • Server-side ZIP creation (handles large selections)
  • Download as: joip-media-{date}.zip
  • Progress indicator during creation
Bulk Delete
  • Permanently removes all selected files
  • Confirmation dialog shows count
  • Processes deletions sequentially
  • Shows success/failure summary
Bulk delete is permanent and cannot be undone. Review your selection carefully.
4

Exit Selection Mode

Click Cancel or Done to exit selection mode.Selection state is cleared and normal view returns.

​
Uploading Media

​
Direct Upload

Add files directly to your vault:
1

Drag and Drop

Drag image files anywhere in the vault:
  • Overlay appears with drop zone
  • Release to upload
  • Supports multiple files (up to 50)
2

Browse Files

Or click Upload button:
  • File picker opens
  • Select 1-50 images
  • Supported: JPEG, PNG, GIF, WebP
3

Monitor Progress

Upload progress shows:
  • Current file count (e.g., “15 / 30”)
  • Progress bar
  • Success/failure summary on completion
Limitations:
  • Maximum 50 files per upload
  • No file size limit per file
  • Batch processing in groups of 10
Uploads automatically switch filter to “All” or “Upload” so you can see your new files immediately.

​
Vault Settings

Click the settings icon (gear) to customize vault behavior:

​
Display Settings

  • Grid: Thumbnail grid (default)
  • List: Compact list view
Saved to localStorage.
Choose pagination size:
  • 12, 24, 48, 96 items
Default: 24 items
Toggle filename overlay on hover:
  • ON: Filename appears on hover
  • OFF: Filename always hidden
Toggle source badges:
  • ON: Shows “Smart Caption”, “BabeCock”, etc.
  • OFF: Badges hidden
Action button visibility:
  • ON: Buttons always visible
  • OFF: Buttons appear on hover only

​
Viewer Settings

Click behavior:
  • ON: Clicking card opens fullscreen viewer
  • OFF: Clicking card does nothing (use eye icon)
Display technical info:
  • ON: Shows resolution, file size, date
  • OFF: Metadata hidden
Enable keyboard navigation:
  • ON: Arrow keys, zoom keys, etc. work
  • OFF: Keyboard shortcuts disabled

​
Advanced Settings

Infinite scroll behavior:
  • ON: Automatically loads next page when scrolling to bottom
  • OFF: Manual “Load More” button
Auto-load reduces clicks but may impact performance on slow connections.
Organize items:
  • None: Flat list (default)
  • Month: Group by creation month
Grouping shows headers like “December 2024”, “January 2025”.

​
Best Practices

Keep vault organized:
  • Rename files with descriptive names immediately
  • Add character names for easy filtering
  • Delete failed or unwanted generations regularly
  • Use consistent naming conventions (e.g., “Goddess Name - Theme”)
Avoid clutter:
  • Review and delete duplicates
  • Use bulk delete for cleanup sessions
  • Export important files to local storage as backup
  • Share best creations to community
Selective sharing:
  • Only share your best work to community
  • Use private share links for specific recipients
  • Review shared items periodically
  • Unshare outdated or low-quality content

​
Troubleshooting

Possible causes:
  • Network connection lost
  • Supabase storage paused/unavailable
  • Too many files (pagination issue)
Solutions:
  • Check internet connection
  • Verify Supabase project status
  • Reduce items per page in settings
  • Try refreshing the page
Possible causes:
  • File size too large
  • Storage quota exceeded
  • Network timeout
  • Invalid file format
Solutions:
  • Compress images before upload
  • Delete old files to free space
  • Try smaller batch sizes
  • Verify file format is supported
Possible causes:
  • Server timeout (too many files)
  • Network interruption
  • Invalid file references
Solutions:
  • Select fewer files (try 10-20 at a time)
  • Check internet connection stability
  • Try downloading individually if issue persists
Possible causes:
  • CORS blocking Content-Length header
  • Metadata setting disabled
  • File missing metadata
Solutions:
  • Enable “Show Metadata in Viewer” in settings
  • Resolution always appears; file size may be unavailable due to CORS
  • This is expected behavior for some CDN configurations

​
Integration

Media Vault integrates with:
  • Smart Captions: Save generated captions
  • BabeCock Studio: Save combinations
  • Community: Share vault items to community feed
  • Sessions: Use vault images in custom sessions

Build docs developers (and LLMs) love

Get started for freeTalk to us