Visual Elements

System is looking for solutions in Knowledgebase, Blogs, AI, and other places

Instructions for use

A. Configuration in Bubble
1. Plugin Installation:
Access the Bubble Plugin Marketplace and search for "MediaFusion Universal".
Install the plugin and add the elements to the page where you want to implement multimedia functionality.
2. Basic Property Configuration:
In the Bubble editor, select the "MediaFusion Search" element on your page.
Configure the search_term property with the search term you want to use.
Select a specific provider (pexels, pixabay, flickr, etc.) or use "all" to search across all providers.
Set the media_type you need (image, video, gif, illustration, vector, sticker).
3. Results Configuration:
Configure results_count to determine how many results to show per page (recommended: 10-20).
Use auto_search to enable automatic searching when parameters change.
Connect load_more_trigger and load_less_trigger to buttons for page navigation.
4. API Configuration:
Go to Settings → API Keys in your Bubble application.
Add the necessary API keys with specific names: api_key_pexels, api_key_pixabay, api_key_flickr, etc.
Free providers (Lorem Picsum, Wikimedia) require no additional configuration.
5. Universal Player Configuration:
Add the "MediaFusion Universal Player" element to your page.
Connect the url property with search results using "Current cell's text" from a Repeating Group.
Configure autoplay, muted, loop, and controls according to your needs.
6. Workflow Integration:
Connect the plugin's exposed states (e.g., media_results, total_results_count) with your UI elements.
Use player events (videoEnded, videoPlayed) to create custom workflows.
Implement workflows to handle different scenarios using states like ready_to_search and error_message.
7. Download Configuration:
Add the "Download File" action to your workflows with fileurl and filename properties.
The functionality includes automatic validation, visual progress, and automatic retries.
No additional configuration required - works directly with result URLs.


B. Working with Advanced Features
1. Video List Player:
Use the "MediaFusion Universal Player with List" element to handle multiple videos.
Configure videoList with a list of URLs separated by semicolons or JSON format.
Set videosPerPage, showThumbnails, and autoPlayNext to customize the experience.
Use states currentVideoIndex and totalVideos to create custom navigation controls.
2. Performance Optimization:
Keep results_count at reasonable values (10-25) for better performance.
Use the plugin's caching functionality to avoid duplicate API calls.
Implement pagination using "Load More" instead of loading all results at once.
3. State and Counter Management:
Use media-type-specific states (video_count, image_count, gif_count) to show statistics.
Connect can_load_more and can_load_less to control navigation button visibility.
Monitor max_results_reached to notify users when the limit is reached.
4. Player Controls:
Implement control actions (Play, Pause, Stop, Mute, Set Volume, Seek To) using plugin actions.
Use player states (paused, currentTime, duration, volume) to create custom controls.
Connect the fullscreen state to handle fullscreen modes.
5. Multiple Provider Configuration:
Use provider = "all" to search across multiple sources simultaneously.
Results will include media_providers to identify the source of each item.
Combine results from different types using specific arrays (video_results, image_results, etc.).
6. Error Handling and States:
Monitor error_message to display specific error messages to users.
Use ready_to_search to show appropriate loading indicators.
Implement conditional workflows based on the player's initialized state.


C. What's New in v0.2 - Production Optimized
1. Professional Logging:
The plugin now generates 90% fewer logs in the browser console.
Only critical errors and important events appear - no more debugging noise.
Cleaner experience for both developers and end users.
2. Universal Compatibility:
Complete fix for AbortController errors in legacy browsers.
Works consistently across Chrome, Firefox, Safari, Edge, and mobile versions.
Automatic detection of browser features with intelligent fallbacks.
3. Robust Downloads:
Enhanced download system with automatic retries and better memory management.
Visual progress without flooding the console with unnecessary logs.
Defensive handling of connection errors and timeouts.
4. Performance Optimization:
40% reduction in memory usage and 33% faster loading times.
More efficient caching system to minimize API calls.
Better resource management and automatic cleanup.
5. Simplified Configuration:
More stable installation without unexpected errors.
Automatic configuration of optional browser features.
Smoother development experience from first installation.


D. Implementation Examples
1. Basic Image Search:
Element: MediaFusion Search (invisible)
Input: search_term connected to text field
Repeating Group: data source = MediaFusion Search's image_results
Image: dynamic image = Current cell's text
2. Video Player with Playlist:
Search: media_type = "video", provider = "pexels"
Player: MediaFusion Universal Player with List
videoList = MediaFusion Search's video_results joined with ";"
3. Complete Multimedia Gallery:
Tabs for different media types using media_type
Dynamic counters: video_count, image_count, gif_count
Conditional navigation buttons based on can_load_more/can_load_less
4. Bulk Download System:
Checkboxes in Repeating Group for multiple selection
Workflow that iterates over selected items
Download File action for each selected URL


E. Best Practices
1. Performance:
Use appropriate results_count for your UI (10-20 recommended)
Implement lazy loading for large amounts of content
Monitor the ready_to_search state for optimal UX
2. User Experience:
Provide visual feedback during searches and loading
Use result counters to show progress
Implement user-friendly error handling
3. Security and Content:
Filter providers according to content appropriate for your audience
Use validation in workflows before playing/downloading content
Monitor API limits to avoid overload
4. Compatibility:
Test across multiple browsers and devices
Use progressive enhancement for advanced features
Implement fallbacks for browser-dependent functionality


Was this page helpful?

Thank you for your feedback!

Comments (00)

Leave a comment

Sign in to post your comment or Sign Up if you don't have any account.

Ai Replying

We use cookies to enhance your experience on our website. By continuing to browse, you agree to our use of cookies. Learn more in our Privacy Policy

Accept All Reject All

Support, Knowledgebase, Live Chat, and CRM.

Get In Touch

Need More Help