[BUGFIX] Fix custom thumbnails bug and add events

Classes/Controller/VimeoController.php

@@ -27,6 +27,10 @@
 namespace SGalinski\SgVimeo\Controller;
 
 use Psr\Http\Message\ResponseInterface;
+use SGalinski\SgVimeo\Event\AfterFilterVideosEvent;
+use SGalinski\SgVimeo\Event\AfterMapCustomThumbnailsEvent;
+use SGalinski\SgVimeo\Event\AfterVimeoCallEvent;
+use SGalinski\SgVimeo\Event\BeforeVimeoCallEvent;
 use SGalinski\SgVimeo\Service\CachedImageService;
 use SGalinski\SgVimeo\Service\VimeoService;
 use TYPO3\CMS\Core\Cache\Frontend\FrontendInterface;
@@ -81,7 +85,16 @@ class VimeoController extends ActionController {
 			$this->cache
 		);
 		try {
-			$response = $vimeoService->getVimeoData($id, $maxResultsWithFilters);
+			// Dispatch the BeforeYoutubeCallEvent
+			$beforeVimeoCallEvent = new BeforeVimeoCallEvent($id, $maxResultsWithFilters);
+			$this->eventDispatcher->dispatch($beforeVimeoCallEvent);
+
+			// Use the possibly modified parameters
+			$response = $vimeoService->getVimeoData(
+				$beforeVimeoCallEvent->getId(),
+				$beforeVimeoCallEvent->getMaxResultsWithFilters()
+			);
+
 			if ($response === NULL) {
 				return $this->htmlResponse();
 			}
@@ -90,6 +103,13 @@ class VimeoController extends ActionController {
 			return $this->htmlResponse();
 		}
 
+		// Dispatch the AfterVimeoCallEvent
+		$afterYoutubeCallEvent = new AfterVimeoCallEvent($response);
+		$this->eventDispatcher->dispatch($afterYoutubeCallEvent);
+
+		// Use the possibly modified response
+		$response = $afterYoutubeCallEvent->getResponse();
+
 		if (is_array($response['items'])) {
 			$response['items'] = array_filter($response['items'], function ($item) use ($filterIds) {
 				$videoId = $item['videoId'] ?? '';
@@ -102,8 +122,22 @@ class VimeoController extends ActionController {
 				array_pop($response['items']);
 			}
 
+			// Dispatch the AfterFilterVideosEvent
+			$afterFilterVideosEvent = new AfterFilterVideosEvent($response);
+			$this->eventDispatcher->dispatch($afterFilterVideosEvent);
+
+			// Use the possibly modified response
+			$response = $afterFilterVideosEvent->getResponse();
+
 			$response = $this->mapVimeoApiResponseWithPossibleCustomThumbnails($response);
 
+			// Dispatch the AfterMapCustomThumbnailsEvent
+			$afterMapCustomThumbnailsEvent = new AfterMapCustomThumbnailsEvent($response);
+			$this->eventDispatcher->dispatch($afterMapCustomThumbnailsEvent);
+
+			// Use the possibly modified response
+			$response = $afterMapCustomThumbnailsEvent->getResponse();
+
 			foreach ($response['items'] as &$item) {
 				/*
 				 * Check if link is of the form "https://vimeo.com/123456789", not "https://vimeo.com/username/videoname".
@@ -175,9 +209,10 @@ class VimeoController extends ActionController {
 		$fileRepository = GeneralUtility::makeInstance(FileRepository::class);
 		$fileObjects = $fileRepository->findByRelation(
 			'tt_content',
-			'tx_sgvimeo_thumbnail_image',
+			'settings.thumbnailImages',
 			$contentElementUid
 		);
+
 		if (count($fileObjects) <= 0) {
 			return $response;
 		}

Classes/Event/AfterFilterVideosEvent.php

+<?php
+/**
+ *
+ * Copyright notice
+ *
+ * (c) sgalinski Internet Services (https://www.sgalinski.de)
+ *
+ * All rights reserved
+ *
+ * This script is part of the TYPO3 project. The TYPO3 project is
+ * free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The GNU General Public License can be found at
+ * http://www.gnu.org/copyleft/gpl.html.
+ *
+ * This script is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * This copyright notice MUST APPEAR in all copies of the script!
+ */
+
+namespace SGalinski\SgVimeo\Event;
+
+final class AfterFilterVideosEvent
+{
+	private array $response;
+
+	public function __construct(array $response)
+	{
+		$this->response = $response;
+	}
+
+	public function getResponse(): array
+	{
+		return $this->response;
+	}
+
+	public function setResponse(array $response): void
+	{
+		$this->response = $response;
+	}
+}

Classes/Event/AfterMapCustomThumbnailsEvent.php

+<?php
+/**
+ *
+ * Copyright notice
+ *
+ * (c) sgalinski Internet Services (https://www.sgalinski.de)
+ *
+ * All rights reserved
+ *
+ * This script is part of the TYPO3 project. The TYPO3 project is
+ * free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The GNU General Public License can be found at
+ * http://www.gnu.org/copyleft/gpl.html.
+ *
+ * This script is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * This copyright notice MUST APPEAR in all copies of the script!
+ */
+
+namespace SGalinski\SgVimeo\Event;
+
+final class AfterMapCustomThumbnailsEvent
+{
+	private array $response;
+
+	public function __construct(array $response)
+	{
+		$this->response = $response;
+	}
+
+	public function getResponse(): array
+	{
+		return $this->response;
+	}
+
+	public function setResponse(array $response): void
+	{
+		$this->response = $response;
+	}
+}

Classes/Event/AfterVimeoCallEvent.php

+<?php
+/**
+ *
+ * Copyright notice
+ *
+ * (c) sgalinski Internet Services (https://www.sgalinski.de)
+ *
+ * All rights reserved
+ *
+ * This script is part of the TYPO3 project. The TYPO3 project is
+ * free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The GNU General Public License can be found at
+ * http://www.gnu.org/copyleft/gpl.html.
+ *
+ * This script is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * This copyright notice MUST APPEAR in all copies of the script!
+ */
+
+namespace SGalinski\SgVimeo\Event;
+
+final class AfterVimeoCallEvent
+{
+	private array $response;
+
+	public function __construct(array $response)
+	{
+		$this->response = $response;
+	}
+
+	public function getResponse(): array
+	{
+		return $this->response;
+	}
+
+	public function setResponse(array $response): void
+	{
+		$this->response = $response;
+	}
+}

Classes/Event/BeforeVimeoCallEvent.php

+<?php
+/**
+ *
+ * Copyright notice
+ *
+ * (c) sgalinski Internet Services (https://www.sgalinski.de)
+ *
+ * All rights reserved
+ *
+ * This script is part of the TYPO3 project. The TYPO3 project is
+ * free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The GNU General Public License can be found at
+ * http://www.gnu.org/copyleft/gpl.html.
+ *
+ * This script is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * This copyright notice MUST APPEAR in all copies of the script!
+ */
+
+namespace SGalinski\SgVimeo\Event;
+
+final class BeforeVimeoCallEvent
+{
+	private $id;
+	private $maxResultsWithFilters;
+	private string $apiKey;
+
+	public function __construct($id, $maxResultsWithFilters)
+	{
+		$this->id = $id;
+		$this->maxResultsWithFilters = $maxResultsWithFilters;
+	}
+
+	public function getId()
+	{
+		return $this->id;
+	}
+
+	public function setId($id): void
+	{
+		$this->id = $id;
+	}
+
+	public function getMaxResultsWithFilters()
+	{
+		return $this->maxResultsWithFilters;
+	}
+
+	public function setMaxResultsWithFilters($maxResultsWithFilters): void
+	{
+		$this->maxResultsWithFilters = $maxResultsWithFilters;
+	}
+}

Classes/EventListeners/AfterFilterVideosEventListener.php

+<?php
+/***************************************************************
+ *  Copyright notice
+ *
+ *  (c) sgalinski Internet Services (https://www.sgalinski.de)
+ *
+ *  All rights reserved
+ *
+ *  This script is part of the TYPO3 project. The TYPO3 project is
+ *  free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  The GNU General Public License can be found at
+ *  http://www.gnu.org/copyleft/gpl.html.
+ *
+ *  This script is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  This copyright notice MUST APPEAR in all copies of the script!
+ ***************************************************************/
+
+namespace SGalinski\SgVimeo\EventListeners;
+
+use SGalinski\SgVimeo\Event\AfterFilterVideosEvent;
+
+class AfterFilterVideosEventListener
+{
+	public function __invoke(AfterFilterVideosEvent $event): void
+	{
+		// Modify the response if needed
+		$response = $event->getResponse();
+		// Add some custom processing here
+		// For example let's remove the extra 10 videos that we added in the other event
+		if (count($response['items']) > 10) {
+			array_splice($response['items'], 0, 10);
+		}
+		$event->setResponse($response);
+	}
+}

Classes/EventListeners/AfterMapCustomThumbnailsEventListener.php

+<?php
+/***************************************************************
+ *  Copyright notice
+ *
+ *  (c) sgalinski Internet Services (https://www.sgalinski.de)
+ *
+ *  All rights reserved
+ *
+ *  This script is part of the TYPO3 project. The TYPO3 project is
+ *  free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  The GNU General Public License can be found at
+ *  http://www.gnu.org/copyleft/gpl.html.
+ *
+ *  This script is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  This copyright notice MUST APPEAR in all copies of the script!
+ ***************************************************************/
+
+namespace SGalinski\SgVimeo\EventListeners;
+
+use SGalinski\SgVimeo\Event\AfterMapCustomThumbnailsEvent;
+
+class AfterMapCustomThumbnailsEventListener
+{
+	public function __invoke(AfterMapCustomThumbnailsEvent $event): void
+	{
+		$response = $event->getResponse();
+		// Add a custom thumbnail URL
+		foreach ($response['items'] as $key => $item) {
+			$response['items'][$key]['thumbnail'] = 'https://i.ytimg.com/vi/i4i2H9IJSAw/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDvqpGWePTP5GpQyXUtVNLKivagfg';
+		}
+		$event->setResponse($response);
+	}
+}

Classes/EventListeners/AfterVimeoCallEventListener.php

+<?php
+/***************************************************************
+ *  Copyright notice
+ *
+ *  (c) sgalinski Internet Services (https://www.sgalinski.de)
+ *
+ *  All rights reserved
+ *
+ *  This script is part of the TYPO3 project. The TYPO3 project is
+ *  free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  The GNU General Public License can be found at
+ *  http://www.gnu.org/copyleft/gpl.html.
+ *
+ *  This script is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  This copyright notice MUST APPEAR in all copies of the script!
+ ***************************************************************/
+
+namespace SGalinski\SgVimeo\EventListeners;
+
+use SGalinski\SgVimeo\Event\AfterVimeoCallEvent;
+
+class AfterVimeoCallEventListener
+{
+	public function __invoke(AfterVimeoCallEvent $event): void
+	{
+		$response = $event->getResponse();
+		// Add custom data
+		$response['customData'] = 'This is some custom data';
+		$event->setResponse($response);
+	}
+}

Classes/EventListeners/BeforeVimeoCallEventListener.php

+<?php
+/***************************************************************
+ *  Copyright notice
+ *
+ *  (c) sgalinski Internet Services (https://www.sgalinski.de)
+ *
+ *  All rights reserved
+ *
+ *  This script is part of the TYPO3 project. The TYPO3 project is
+ *  free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  The GNU General Public License can be found at
+ *  http://www.gnu.org/copyleft/gpl.html.
+ *
+ *  This script is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  This copyright notice MUST APPEAR in all copies of the script!
+ ***************************************************************/
+
+namespace SGalinski\SgVimeo\EventListeners;
+
+use SGalinski\SgVimeo\Event\BeforeVimeoCallEvent;
+
+/**
+ * Called before we call the Vimeo API
+ */
+class BeforeVimeoCallEventListener
+{
+	public function __invoke(BeforeVimeoCallEvent $event): void
+	{
+		// Change the max results because we want to filter some more
+		$event->setMaxResultsWithFilters($event->getMaxResultsWithFilters() + 10);
+	}
+}

Classes/Upgrades/ThumbnailsUpgradeWizard.php

+<?php
+
+/**
+ *
+ * Copyright notice
+ *
+ * (c) sgalinski Internet Services (https://www.sgalinski.de)
+ *
+ * All rights reserved
+ *
+ * This script is part of the TYPO3 project. The TYPO3 project is
+ * free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The GNU General Public License can be found at
+ * http://www.gnu.org/copyleft/gpl.html.
+ *
+ * This script is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * This copyright notice MUST APPEAR in all copies of the script!
+ */
+
+namespace SGalinski\SgVimeo\Upgrades;
+
+use TYPO3\CMS\Core\Database\ConnectionPool;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Install\Attribute\UpgradeWizard;
+use TYPO3\CMS\Install\Updates\UpgradeWizardInterface;
+
+#[UpgradeWizard('sgVimeo_thumbnailsUpgradeWizard')]
+final class ThumbnailsUpgradeWizard implements UpgradeWizardInterface
+{
+	/**
+	 * Return the speaking name of this wizard
+	 */
+	public function getTitle(): string
+	{
+		return 'Migrate the thumbnails field name in the database';
+	}
+
+	/**
+	 * Return the description for this wizard
+	 */
+	public function getDescription(): string
+	{
+		return 'This must be done in TYPO3 12 due to a bug and changes to how files fields are handled. See https://forge.typo3.org/issues/103885';
+	}
+
+	public function executeUpdate(): bool
+	{
+		$connection = GeneralUtility::makeInstance(ConnectionPool::class)
+			->getConnectionForTable('sys_file_reference');
+
+		$queryBuilder = $connection->createQueryBuilder();
+		$queryBuilder
+			->update('sys_file_reference')
+			->set('fieldname', 'settings.thumbnailImages')
+			->where(
+				$queryBuilder->expr()->eq('fieldname', $queryBuilder->createNamedParameter('tx_sgvimeo_thumbnail_image'))
+			);
+
+		$queryBuilder->executeStatement();
+		return true;
+	}
+
+	public function updateNecessary(): bool
+	{
+		$connection = GeneralUtility::makeInstance(ConnectionPool::class)
+			->getConnectionForTable('sys_file_reference');
+
+		$queryBuilder = $connection->createQueryBuilder();
+		$queryBuilder->getRestrictions()->removeAll();
+
+		$count = $queryBuilder
+			->count('uid')
+			->from('sys_file_reference')
+			->where(
+				$queryBuilder->expr()->eq('fieldname', $queryBuilder->createNamedParameter('tx_sgvimeo_thumbnail_image'))
+			)
+			->executeQuery()
+			->fetchOne();
+
+		return (int)$count > 0;
+	}
+
+	public function getPrerequisites(): array
+	{
+		// Add your logic here
+	}
+}

Configuration/FlexForms/flexform_sgvimeo_vimeo.xml

@@ -166,81 +166,8 @@
 							LLL:EXT:sg_vimeo/Resources/Private/Language/locallang.xlf:flexform.thumbnailImages.description
 						</description>
 						<config>
-							<type>inline</type>
-							<foreign_table>sys_file_reference</foreign_table>
-							<foreign_field>uid_foreign</foreign_field>
-							<foreign_table_field>tablenames</foreign_table_field>
-							<foreign_label>uid_local</foreign_label>
-							<foreign_sortby>sorting_foreign</foreign_sortby>
-							<foreign_selector>uid_local</foreign_selector>
-							<foreign_selector_fieldTcaOverride type="array">
-								<config>
-									<appearance>
-										<elementBrowserType>file</elementBrowserType>
-										<elementBrowserAllowed>jpg,png,svg,jpeg,gif</elementBrowserAllowed>
-									</appearance>
-								</config>
-							</foreign_selector_fieldTcaOverride>
-							<foreign_match_fields type="array">
-								<fieldname>tx_sgvimeo_thumbnail_image</fieldname>
-							</foreign_match_fields>
-							<filter type="array">
-								<userFunc>TYPO3\CMS\Core\Resource\Filter\FileExtensionFilter->filterInlineChildren
-								</userFunc>
-								<parameters>
-									<allowedFileExtensions>jpg,png,svg,jpeg,gif</allowedFileExtensions>
-									<disallowedFileExtensions></disallowedFileExtensions>
-								</parameters>
-							</filter>
-							<appearance type="array">
-								<useSortable>1</useSortable>
-								<headerThumbnail>
-									<field>uid_local</field>
-									<height>45m</height>
-								</headerThumbnail>
-								<enabledControls>
-									<info>1</info>
-									<new>0</new>
-									<dragdrop>1</dragdrop>
-									<sort>1</sort>
-									<hide>1</hide>
-									<delete>1</delete>
-								</enabledControls>
-							</appearance>
-							<overrideChildTca>
-								<columns type="array">
-									<uid_local type="array">
-										<config type="array">
-											<appearance type="array">
-												<elementBrowserType>file</elementBrowserType>
-												<elementBrowserAllowed>jpg,png,svg,jpeg,gif</elementBrowserAllowed>
-											</appearance>
-										</config>
-									</uid_local>
-									<crop type="array">
-										<config type="array">
-											<cropVariants type="array">
-												<medium type="array">
-													<disabled>1</disabled>
-												</medium>
-												<small type="array">
-													<disabled>1</disabled>
-												</small>
-												<extrasmall type="array">
-													<disabled>1</disabled>
-												</extrasmall>
-											</cropVariants>
-										</config>
-									</crop>
-								</columns>
-								<types type="array">
-									<numIndex index="2">
-										<showitem>
-											--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette
-										</showitem>
-									</numIndex>
-								</types>
-							</overrideChildTca>
+							<type>file</type>
+							<allowed>jpg,png,svg,jpeg,gif,webp</allowed>
 						</config>
 					</settings.thumbnailImages>
 				</el>

Configuration/Services.php

@@ -23,7 +23,15 @@
  ***************************************************************/
 
 use SGalinski\SgVimeo\Controller\VimeoController;
+use SGalinski\SgVimeo\Event\AfterFilterVideosEvent;
+use SGalinski\SgVimeo\Event\AfterMapCustomThumbnailsEvent;
+use SGalinski\SgVimeo\Event\AfterVimeoCallEvent;
+use SGalinski\SgVimeo\Event\BeforeVimeoCallEvent;
 use SGalinski\SgVimeo\EventListeners\AfterBackendPageRenderEventListener;
+use SGalinski\SgVimeo\EventListeners\AfterFilterVideosEventListener;
+use SGalinski\SgVimeo\EventListeners\AfterMapCustomThumbnailsEventListener;
+use SGalinski\SgVimeo\EventListeners\AfterVimeoCallEventListener;
+use SGalinski\SgVimeo\EventListeners\BeforeVimeoCallEventListener;
 use SGalinski\SgVimeo\EventListeners\PageContentPreviewRenderingEventListener;
 use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
 use TYPO3\CMS\Backend\Controller\Event\AfterBackendPageRenderEvent;
@@ -49,4 +57,14 @@ return static function (ContainerConfigurator $containerConfigurator): void {
 		->tag('event.listener', ['event' => PageContentPreviewRenderingEvent::class]);
 	$services->set(AfterBackendPageRenderEventListener::class)
 		->tag('event.listener', ['event' => AfterBackendPageRenderEvent::class]);
+
+	// Uncomment the following code to try out the example EventListeners
+	$services->set(BeforeVimeoCallEventListener::class)
+		->tag('event.listener', ['event' => BeforeVimeoCallEvent::class]);
+	$services->set(AfterVimeoCallEventListener::class)
+		->tag('event.listener', ['event' => AfterVimeoCallEvent::class]);
+	$services->set(AfterFilterVideosEventListener::class)
+		->tag('event.listener', ['event' => AfterFilterVideosEvent::class]);
+	$services->set(AfterMapCustomThumbnailsEventListener::class)
+		->tag('event.listener', ['event' => AfterMapCustomThumbnailsEvent::class]);
 };

README.md

@@ -133,3 +133,130 @@ SgVideo.initDefault();`
 
 If you want to use the Bootstrap 5 templates, you have to first install Bootstrap 5 in your theme to use its styles and JavaScript.
 Afterwards simply set the `plugin.tx_project_theme.config.bootstrapVersion` TypoScript setup variable to 5.
+
+## Using Events to Customize Vimeo API Results in TYPO3
+
+This documentation explains how to leverage custom events in your TYPO3 extension to manipulate the results of Vimeo API calls. By using these events, you can modify the API parameters, filter results, and further customize the JSON data returned from Vimeo.
+
+### Available Events
+
+The following events are dispatched in the Vimeo video rendering process:
+
+1. `BeforeVimeoCallEvent`
+2. `AfterVimeoCallEvent`
+3. `AfterFilterVideosEvent`
+4. `AfterMapCustomThumbnailsEvent`
+
+### Event Listeners
+
+#### 1. BeforeVimeoCallEvent
+
+**Description**: This event is triggered before making the Vimeo API call, allowing you to modify the API parameters.
+
+##### Example Use Case: Change API Key or manipulate other paramters
+
+```php
+<?php
+
+namespace Vendor\Extension\EventListener;
+
+use SGalinski\SgVimeo\Event\BeforeVimeoCallEvent;
+
+class BeforeVimeoCallEventListener
+{
+    public function __invoke(BeforeVimeoCallEvent $event): void
+    {
+        // Change the API key
+        $event->setApiKey('your-new-api-key');
+        // Extend the max results limit by 10 videos
+        $event->setMaxResultsWithFilters($event->getMaxResultsWithFilters() + 10);
+    }
+}
+```
+
+#### 2. AfterVimeoCallEvent
+
+**Description**: Add Custom Data to JSON Array
+
+##### Example Use Case: Change API Key or manipulate other paramters
+
+```php
+<?php
+namespace SGalinski\SgVimeo\EventListeners;
+
+use SGalinski\SgVimeo\Event\AfterVimeoCallEvent;
+
+class AfterVimeoCallEventListener
+{
+	public function __invoke(AfterVimeoCallEvent $event): void
+	{
+        $response = $event->getResponse();
+		// Add custom data
+		$response['customData'] = 'This is some custom data';
+		$event->setResponse($response);
+	}
+}
+```
+#### 3. AfterFilterVideosEvent
+
+**Description**: This event is triggered after the videos have been filtered, allowing you to further manipulate the filtered results.
+
+##### Example Use Case: Remove the 10 videos that we added initially with the first event
+```php
+<?php
+namespace SGalinski\SgVimeo\EventListeners;
+
+use SGalinski\SgVimeo\Event\AfterFilterVideosEvent;
+
+class AfterFilterVideosEventListener
+{
+	public function __invoke(AfterFilterVideosEvent $event): void
+	{
+		// Modify the response if needed
+		$response = $event->getResponse();
+		// Add some custom processing here
+		// For example let's remove the extra 10 videos that we added in the other event
+		if (count($response['items']) > 10) {
+			array_splice($response['items'], 0, 10);
+		}
+		$event->setResponse($response);
+	}
+}
+```
+
+#### 4. AfterMapCustomThumbnailsEvent
+
+**Description**: This event is triggered after custom thumbnails have been mapped, allowing you to modify the JSON array one last time before rendering.
+
+##### Example Use Case: Use a custom thumbnail for all videos in the list
+```php
+<?php
+namespace SGalinski\SgVimeo\EventListeners;
+
+use SGalinski\SgVimeo\Event\AfterMapCustomThumbnailsEvent;
+
+class AfterMapCustomThumbnailsEventListener
+{
+    public function __invoke(AfterMapCustomThumbnailsEvent $event): void
+    {
+        $response = $event->geRresponse();
+        // Add a custom thumbnail URL
+        foreach ($response['items'] as &$item) {
+            $item['customThumbnail'] = 'https://example.com/custom-thumbnail.jpg';
+        }
+        $event->setResponse($response);
+    }
+}
+```
+
+To enable the events just register them in your Services.php as follows (you can use yaml instead if you prefer):
+```php
+$services->set(BeforeVimeoCallEventListener::class)
+    ->tag('event.listener', ['event' => BeforeVimeoCallEvent::class]);
+$services->set(AfterVimeoCallEventListener::class)
+    ->tag('event.listener', ['event' => AfterVimeoCallEvent::class]);
+$services->set(AfterFilterVideosEventListener::class)
+    ->tag('event.listener', ['event' => AfterFilterVideosEvent::class]);
+$services->set(AfterMapCustomThumbnailsEventListener::class)
+    ->tag('event.listener', ['event' => AfterMapCustomThumbnailsEvent::class]);
+```

Resources/Private/Templates/Bootstrap5/Vimeo/Index.html

@@ -150,7 +150,7 @@
 					<f:else>
 						<f:if condition="{feedItem.thumbnail}">
 							<f:then>
-								<vi:picture class="sg-video__image object-fit-cover h-100 w-100" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnail}" alt="{feedItem.name}" treatIdAsReference="TRUE" />
+								<vi:picture class="sg-video__image object-fit-cover h-100 w-100" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnail}" alt="{feedItem.name}" />
 							</f:then>
 							<f:else>
 								<f:if condition="{feedItem.pictures.base_link}">