Sonderborg Calendar Bundle Laravel Package

Getting Started

Minimal Steps

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

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

   Require the bundle:

   composer require bibsdb/sonderborg-calendar-bundle
   

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

   Bibsdb\SonderborgCalendarBundle\BibsdbSonderborgCalendarBundle::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 the administration panel (likely /admin) and enable the Sonderborg Calendar template.

First Use Case: Embedding a Sonderborg Calendar Video

1. Generate a Shared Link

   • Upload a video to sonderborg-calendar.com and generate a shared link for it.
   • Ensure the video is configured to disable ads and controls (requires a PLUS account).

2. Use the Template in a View Inject the template into a Twig view (or Blade if using a custom adapter):

   {{ render(sonderborg_calendar_template, {
       'video_url': 'https://sonderborg-calendar.com/embed/your-video-id',
       'width': 800,
       'height': 600
   }) }}
   

3. Verify Output Check the rendered page to confirm the Sonderborg player loads correctly.

Implementation Patterns

Workflows

1. Dynamic Video Embedding

   • Fetch video URLs from a database (e.g., Video model) and pass them dynamically:

     $videos = Video::where('is_public', true)->get();
     return view('events.show', compact('videos'));
     

   • Loop in Twig:

     {% for video in videos %}
         {{ render(sonderborg_calendar_template, {
             'video_url': video.embed_url,
             'width': 640,
             'height': 360
         }) }}
     {% endfor %}
     

2. Reusable Components

   • Create a Blade component (resources/views/components/sonderborg-player.blade.php):

     <div class="sonderborg-player">
         {{ $slot }}
     </div>
     @script
         <script>
             document.addEventListener('DOMContentLoaded', function() {
                 SonderborgPlayer.init({{ json_encode($attributes->merge(['videoUrl' => $videoUrl])) }});
             });
         </script>
     @endscript
     

   • Use it in views:

     <x-sonderborg-player video-url="$video->embed_url" width="800" height="450" />
     

3. Admin Integration

   • Extend a CMS (e.g., SonataAdmin) to allow users to select Sonderborg videos via a custom field type:

     use Bibsdb\SonderborgCalendarBundle\Form\Type\SonderborgVideoType;
     
     $formMapper
         ->add('video', SonderborgVideoType::class, [
             'label' => 'Sonderborg Calendar Video',
             'required' => false,
         ]);
     

Integration Tips

1. Asset Management

   • Ensure the bundle’s JavaScript/CSS is properly enqueued. Check resources/views/layouts/app.blade.php for:

     @vite(['resources/js/sonderborg-player.js'])
     

   • If using Vite/Laravel Mix, alias the player in vite.config.js:

     resolve: {
         alias: {
             sonderborgPlayer: path.resolve(__dirname, 'node_modules/sonderborg-calendar/player.js'),
         },
     },
     

2. Configuration

   • Override default settings via config/sonderborg_calendar.php:

     return [
         'default_width' => 1024,
         'default_height' => 720,
         'autoplay' => false,
     ];
     

   • Access config in templates:

     {{ render(sonderborg_calendar_template, {
         'width': app.config.get('sonderborg_calendar.default_width')
     }) }}
     

3. Event Listeners

   • Trigger actions when a video is loaded (e.g., analytics):

     use Bibsdb\SonderborgCalendarBundle\Event\VideoLoadedEvent;
     use Symfony\Component\EventDispatcher\EventSubscriberInterface;
     
     class SonderborgSubscriber implements EventSubscriberInterface
     {
         public static function getSubscribedEvents()
         {
             return [
                 VideoLoadedEvent::class => 'onVideoLoaded',
             ];
         }
     
         public function onVideoLoaded(VideoLoadedEvent $event)
         {
             // Log or track video views
             \Log::info('Video loaded', ['url' => $event->getUrl()]);
         }
     }
     

Gotchas and Tips

Pitfalls

1. Ads/Controls Not Disabled

   • Issue: Videos may still show ads/controls if the shared link isn’t configured correctly.
   • Fix: Verify the video is set to "Disable ads and controls" in the Sonderborg Calendar dashboard. Requires a PLUS account (€9.99/month).

2. Template Not Loading

   • Issue: bibsdb:core:templates:load fails silently.
   • Debug:
     • Check storage/logs/laravel.log for errors.
     • Ensure the template file exists in vendor/bibsdb/sonderborg-calendar-bundle/Resources/views/.
     • Manually trigger the command with -v for verbose output:

       php artisan bibsdb:core:templates:load -v
       

3. JavaScript Conflicts

   • Issue: Player fails to initialize due to $ or jQuery conflicts.
   • Fix: Wrap initialization in a DOMContentLoaded event or use Laravel’s @stack:

     @stack('scripts')
     

     @push('scripts')
         <script>
             document.addEventListener('DOMContentLoaded', function() {
                 SonderborgPlayer.init({{ json_encode($config) }});
             });
         </script>
     @endpush
     

4. CORS Errors

   • Issue: Embedded video fails to load due to CORS restrictions.
   • Fix: Sonderborg Calendar must allow embedding for your domain. Contact their support or use a proxy.

Debugging

1. Check the Network Tab

   • Open Chrome DevTools (F12) and verify the player’s JavaScript/CSS loads without 404s.
   • Look for errors in the Console tab (e.g., Uncaught ReferenceError: SonderborgPlayer is not defined).

2. Log Configuration

   • Dump the bundle’s config to ensure it’s loaded:

     \Log::info('Sonderborg Config:', [
         'width' => config('sonderborg_calendar.default_width'),
     ]);
     

3. Fallback for Missing JS

   • Provide a static fallback in Twig:

     {% if sonderborg_player_loaded %}
         {{ render(sonderborg_calendar_template, { ... }) }}
     {% else %}
         <div class="fallback">
             <p>Player failed to load. <a href="{{ video_url }}">Download video</a>.</p>
         </div>
     {% endif %}
     

Extension Points

1. Custom Player Styling

   • Override the bundle’s CSS by publishing assets:

     php artisan vendor:publish --tag=sonderborg-calendar-assets
     

   • Modify resources/css/sonderborg-player.css and recompile assets.

2. Add Analytics

   • Extend the player’s init function via a custom JavaScript file:

     // resources/js/sonderborg-extended.js
     window.SonderborgPlayer = window.SonderborgPlayer || {};
     SonderborgPlayer.init = function(config) {
         // Original logic
         this.player.init(config);
     
         // Custom analytics
         if (config.trackingId) {
             this.player.on('play', function() {
                 _paq.push(['trackEvent', 'Video', 'Play', config.videoUrl]);
             });
         }
     };
     

3. Support Multiple Players

   • Create a service to manage multiple instances:

     namespace App\Services;
     
     use Bibsdb\SonderborgCalendarBundle\Player;
     
     class SonderborgManager