Info Portrait Bundle Laravel Package

Getting Started

Minimal Steps

1. Installation Add the repository to composer.json under "repositories":

   "repositories": {
       "bibsdb/info-portrait-bundle": {
           "type": "vcs",
           "url": "https://github.com/bibsdb/info-portrait-bundle"
       }
   }
   

   Require the bundle:

   composer require bibsdb/info-portrait-bundle
   

2. Enable the Bundle Register the bundle in config/bundles.php (Symfony 4.3+):

   return [
       // ...
       Bibsdb\InfoPortraitBundle\BibsdbInfoPortraitBundle::class => ['all' => true],
   ];
   

3. Load the Template Run the command to load the slide template:

   php bin/console bibsdb:core:templates:load
   

4. Enable in Admin Navigate to the Symfony admin panel (e.g., EasyAdmin) and enable the InfoPortrait template.

First Use Case

Embed an InfoPortrait video in a slide:

1. Create a new slide in your CMS (e.g., EasyAdmin).
2. Select the InfoPortrait template.
3. Insert the video ID or URL provided by InfoPortrait.
4. Publish the slide.

Implementation Patterns

Workflow Integration

1. Slide Creation Use the bundle’s template in your slide management system (e.g., EasyAdmin, SonataAdmin). Example (Symfony Form):

   $builder->add('infoPortraitVideoId', TextType::class, [
       'label' => 'InfoPortrait Video ID',
       'required' => true,
   ]);
   

2. Dynamic Video Embedding Render the video in Twig:

   {{ render(controller('BibsdbInfoPortraitBundle:Default:renderVideo', {
       'videoId': slide.infoPortraitVideoId
   })) }}
   

3. Custom Player Configuration Override the default player settings via Twig:

   {% set playerOptions = {
       'autoplay': false,
       'controls': false,
       'ads': false  -- Requires PLUS account
   } %}
   {{ render(controller('BibsdbInfoPortraitBundle:Default:renderVideo', {
       'videoId': slide.infoPortraitVideoId,
       'options': playerOptions
   })) }}
   

Common Use Cases

• Educational Platforms: Embed interactive video portraits for user profiles.
• Corporate Training: Use in LMS (Learning Management Systems) for employee onboarding.
• Event Management: Display speaker intros dynamically in conference apps.

Gotchas and Tips

Pitfalls

1. Ads and Controls

   • Ads/controls only disable if the video source is from an InfoPortrait PLUS account.
   • Debug: Check the info-portrait.com dashboard for user permissions.

2. Template Loading

   • If bibsdb:core:templates:load fails, verify:
     • The bundle is enabled in config/bundles.php.
     • The Bibsdb\CoreBundle (dependency) is installed.
     • Clear cache:

       php bin/console cache:clear
       

3. CORS Issues

   • If the player fails to load, ensure your server allows requests to info-portrait.com:

     // config/packages/security.yaml
     cors:
         paths:
             '^/api/':
                 allow_origin: ['*']
     

Debugging Tips

1. Check Console Logs Run the command with -v for verbose output:

   php bin/console bibsdb:core:templates:load -v
   

2. Inspect Network Requests Use browser dev tools to verify the player script loads:

   // Expected: https://cdn.info-portrait.com/player.js
   

3. Fallback for Missing Videos Handle missing video IDs gracefully in Twig:

   {% if slide.infoPortraitVideoId %}
       {{ render(controller(...)) }}
   {% else %}
       <p>Video not configured.</p>
   {% endif %}
   

Extension Points

1. Custom Player Styling Override the bundle’s assets:

   # Copy default assets
   cp -r vendor/bibsdb/info-portrait-bundle/Resources/public/* public/bundles/infoportrait/
   

   Extend CSS/JS in assets/infoportrait/.

2. Add Analytics Hook into the player’s onReady event (via JavaScript):

   document.addEventListener('DOMContentLoaded', function() {
       window.InfoPortraitPlayer.onReady(function(player) {
           // Track video events (e.g., play, pause)
           player.on('play', function() { console.log('Played!'); });
       });
   });
   

3. Localization Translate template labels via Symfony’s translation system:

   # config/packages/translation.yaml
   locales: ['en', 'fr']
   default_locale: 'en'
   

   Add translations in translations/messages.en.yaml:

   bibsdb.infoportrait.video_id: "Video ID"