Popcorn Bundle Laravel Package

Getting Started

Minimal Setup

1. Install the Bundle Run:

   composer require bmatzner/popcorn-bundle
   

   Update dependencies:

   php composer.phar update bmatzner/popcorn-bundle
   

2. Register the Bundle Add to app/AppKernel.php:

   public function registerBundles()
   {
       $bundles = [
           // ...
           new Bmatzner\PopcornBundle\BmatznerPopcornBundle(),
       ];
   }
   

3. Install Assets Symlink assets to web/ (recommended for development):

   php app/console assets:install --symlink web
   

4. First Use Case: Embed Popcorn.js in a Twig Template Include the script in your Twig file (e.g., base.html.twig):

   <script src="{{ asset('bundles/bmatznerpopcorn/js/popcorn-complete.min.js') }}"></script>
   

   Test with a basic video element:

   <video id="myVideo" controls>
       <source src="{{ asset('videos/example.mp4') }}" type="video/mp4">
   </video>
   <script>
       var popcorn = Popcorn('#myVideo');
       popcorn.on('play', function() {
           console.log('Video started!');
       });
   </script>
   

Implementation Patterns

1. Twig Integration

• Dynamic Asset Loading: Use Twig’s asset() function to reference Popcorn.js and its dependencies (e.g., jQuery if needed).
• Template Extensions: Create a custom Twig extension to simplify Popcorn.js initialization:

  {% popcorn_video '#myVideo' %}
  

  (Requires a custom Twig extension in your bundle/service.)

2. Event-Driven Workflows

• Hook into Media Events: Use Popcorn.js events (e.g., play, pause, timeupdate) to trigger Symfony services or controllers:

  var popcorn = Popcorn('#myVideo');
  popcorn.on('timeupdate', function(e) {
      // Call a Symfony controller via AJAX or WebSocket
      fetch('/api/video-progress', { method: 'POST', body: JSON.stringify({ time: e.detail.time }) });
  });
  

3. Asset Management

• Versioning: Leverage Symfony’s asset versioning to cache-bust Popcorn.js:

  <script src="{{ asset('bundles/bmatznerpopcorn/js/popcorn-complete.min.js', {'version': '1.3'}) }}"></script>
  

• Lazy Loading: Load Popcorn.js dynamically for non-critical pages:

  if (document.getElementById('myVideo')) {
      var script = document.createElement('script');
      script.src = "{{ path('bmatzner_popcorn_js') }}";
      document.body.appendChild(script);
  }
  

4. Symfony Integration

• Dependency Injection: Inject Popcorn.js logic into Symfony services:

  // src/AppBundle/Service/VideoService.php
  class VideoService {
      public function __construct($twig) {
          $this->twig = $twig;
      }
      public function renderPopcornScript($videoId) {
          return $this->twig->render('BmatznerPopcornBundle:Script:popcorn.js.twig', ['videoId' => $videoId]);
      }
  }
  

• Routing: Create routes for Popcorn.js-powered endpoints:

  # config/routes.yml
  bmatzner_popcorn_js:
      path: /bundles/bmatznerpopcorn/js/popcorn-complete.min.js
      defaults: { _controller: FrameworkBundle\Controller\RedirectController::urlRedirectAction, path: '@BmatznerPopcornBundle/Resources/public/js/popcorn-complete.min.js' }
  

Gotchas and Tips

1. Asset Path Pitfalls

• Symlink vs. Copy: If using --symlink, ensure your server supports symlinks (e.g., not all shared hosts do). Fall back to --no-symlink if issues arise.
• Debugging Paths: Verify asset paths in production:

  php app/console assets:install --env=prod --no-debug
  

• Missing Files: If popcorn-complete.min.js is missing, check:
  • The bundle’s Resources/public/js/ directory exists.
  • Composer installed the bundle correctly (vendor/bmatzner/popcorn-bundle).

2. Dependency Conflicts

• jQuery Requirement: Popcorn.js 1.3 requires jQuery. Ensure it’s loaded before Popcorn.js:

  <script src="{{ asset('bundles/jquery/jquery.js') }}"></script>
  <script src="{{ asset('bundles/bmatznerpopcorn/js/popcorn-complete.min.js') }}"></script>
  

• Version Mismatches: Avoid conflicts with other bundles using jQuery by using a specific version (e.g., jquery@1.11.0).

3. Debugging Tips

• Console Errors: Check browser console for missing files or script errors. Common issues:
  • Popcorn is not defined: Script not loaded or jQuery missing.
  • Cannot read property 'on' of undefined: Video element not found or Popcorn.js not initialized correctly.
• Symfony Debug Toolbar: Use the Profiler to verify asset paths and bundle registration.

4. Extension Points

• Custom Events: Extend Popcorn.js with custom events by subclassing:

  Popcorn.prototype.customEvent = function() {
      this.on('customEvent', function(e) { /* ... */ });
  };
  

• Symfony Event Listeners: Trigger Symfony events from Popcorn.js callbacks:

  popcorn.on('play', function() {
      fetch('/api/video-played', { method: 'POST' });
  });
  

• Plugin Development: Create Symfony bundles to wrap Popcorn.js plugins (e.g., popcorn-text, popcorn-image).

5. Performance Considerations

• Defer Loading: Load Popcorn.js after the DOM is ready:

  {{ parent() }}
  {{ include('BmatznerPopcornBundle::script.js') }}
  

• Minification: Use Symfony’s encore or webpack to bundle Popcorn.js with other JS files in production.

6. Upgrade Risks

• Archived Bundle: Since this bundle is archived, test thoroughly before upgrading. Consider forking or migrating to a maintained alternative like fancyweb/popcorn-bundle if needed.
• Popcorn.js 1.3: This bundle ships with Popcorn.js 1.3 (released in 2014). Modern alternatives (e.g., Video.js) may offer better support.