Portrait Portrait Bundle Laravel Package

Getting Started

Minimal Setup

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

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

   Require the bundle:

   composer require bibsdb/portrait-portrait-bundle
   

2. Enable the Bundle Register the bundle in config/bundles.php (Laravel 5.4+) or AppKernel.php (older versions):

   Bibsdb\PortraitPortraitBundle\BibsdbPortraitPortraitBundle::class => ['all' => true],
   

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

   php artisan bibsdb:core:templates:load
   

4. Enable in Admin Navigate to your admin panel (e.g., SonataAdmin, EasyAdmin) and enable the Portrait-Portrait template.

First Use Case: Embedding a Video

To embed a Portrait-Portrait video in a slide:

1. Get a User Token Ensure the video URL comes from a PLUS account (or a user who disabled ads/controls) via portrait-portrait.com.

2. Use the Template in a Slide In your slide configuration (e.g., via admin UI or API), select the Portrait-Portrait template and input the video URL:

   # Example slide config (YAML/JSON)
   template: portrait_portrait
   video_url: "https://portrait-portrait.com/embed/your-video-id"
   

3. Render the Slide The bundle will automatically inject the player.js script and render the video player.

Implementation Patterns

Workflow: Integrating with Existing Slides

1. Extend Slide Entities If using a custom slide entity (e.g., Slide), add fields for Portrait-Portrait-specific data:

   // Example migration
   Schema::table('slides', function (Blueprint $table) {
       $table->string('portrait_portrait_video_url')->nullable();
   });
   

2. Template Overrides Override the default template by publishing assets:

   php artisan vendor:publish --tag=portrait-portrait.templates
   

   Modify resources/views/portrait_portrait/slide.html.twig to customize the player appearance.

3. Dynamic Video Loading Fetch videos dynamically via API (e.g., from a Video model):

   {# In your slide template #}
   <div class="portrait-portrait-player"
        data-video-url="{{ slide.portrait_portrait_video_url }}">
   </div>
   

Integration Tips

• Asset Management Ensure player.js and CSS are loaded via the bundle’s asset pipeline. Check resources/views/portrait_portrait/layout.html.twig for dependencies.

• Admin Panel Integration For SonataAdmin/EasyAdmin, create a custom form type to handle the video URL:

  use Symfony\Component\Form\Extension\Core\Type\UrlType;
  
  $builder->add('portraitPortraitVideoUrl', UrlType::class, [
      'required' => false,
      'label' => 'Portrait-Portrait Video URL',
  ]);
  

• Lazy Loading Use the data-src attribute for deferred loading:

  <div class="portrait-portrait-player"
       data-src="{{ slide.portrait_portrait_video_url }}">
  </div>
  

Gotchas and Tips

Pitfalls

1. Ads/Controls Not Disabled

   • Issue: Videos from non-PLUS accounts will show ads/controls.
   • Fix: Upgrade to a PLUS account or ensure the user has disabled these options in their account settings.

2. Template Not Loading

   • Issue: Forgetting to run php artisan bibsdb:core:templates:load.
   • Fix: Re-run the command or check var/cache/ for template files.

3. CORS Errors

   • Issue: If embedding videos from external domains, CORS may block the player.
   • Fix: Configure your server to allow CORS for portrait-portrait.com or use a proxy.

Debugging

• Check Console Logs Inspect browser console for errors like:

  // Expected: player.js should load without 404s.
  Uncaught Error: Cannot find module 'player.js'
  

  • Solution: Verify the bundle’s assets are published and loaded.

• Verify Template Selection Ensure the admin panel is configured to select the Portrait-Portrait template. Check the database for the correct template field value.

Extension Points

1. Custom Player Options Extend the player configuration via Twig:

   <div class="portrait-portrait-player"
        data-video-url="{{ slide.video_url }}"
        data-autoplay="true"
        data-mute="true">
   </div>
   

   Refer to player.js docs for supported options.

2. Event Listeners Hook into slide events to preprocess Portrait-Portrait URLs:

   // Example: In a service provider
   $this->app->booted(function () {
       event(new SlideEvent('portrait_portrait', $slide));
   });
   

3. Fallback for Unsupported Browsers Add a polyfill or fallback UI in your template:

   {% if is_grumphp_browser_supported %}
       {{ include('portrait_portrait/player.html.twig') }}
   {% else %}
       <div class="fallback-message">
           Your browser does not support Portrait-Portrait videos.
       </div>
   {% endif %}