[TASK] Add old lightbox implementation for backwards compatibility

README.md

@@ -30,11 +30,16 @@ plugin.tx_sgyoutube {
 
 ### JavaScript integration
 
+Note: You can still use the old implementation of the lightbox without the new lightbox by
+importing ```youtubeLightbox``` instead of ```sgYoutubeLightbox```.
+
+Install the **project_theme_lightbox** extension and integrate it to your main theme. Import the
+file ```sgYoutubeLight.js``` to your JavaScript and initilize it.
+
 ```javascript
-import LightboxManager from 'lightboxManager';
+import SgYoutubeLightbox from 'sgYoutubeLightbox';
 
-// You can change the lightboxSettings however you like but .sg-youtube-item was the old selctor
-LightboxManager.init({props: {type: 'video'}, lightboxSettings: {selector: '.sg-youtube-item'}});
+new SgYoutubeLightbox();
 ```
 
 ### Registration for more than the free 10.000 quotas per day
@@ -42,6 +47,7 @@ LightboxManager.init({props: {type: 'video'}, lightboxSettings: {selector: '.sg-
 It's not 1 quota per 1 API call. Each API has its own costs, which can be seen in the link below.
 
 Currently, at the version 3.2.1 we are using the following APIs:
+
 - "search/list" for channel videos
 - "playlistItems/list" for videos from a specific playlist
 - "videos/list" for getting the details for each video and the localizations, if needed.
@@ -55,10 +61,10 @@ details and translations.
 
 #### Caching behaviour
 
-Because of the quota costs we implemented a caching for the calls for each day. The response from the APIs will be
-saved and used for 24 hours. Normally the site cache would do it, but it could be, that the cache will be cleared
-multiple times in a row, or that the plugin is on an uncached page. The TYPO3 registry is used as a cache. The cleanup
-is handled on the fly.
+Because of the quota costs we implemented a caching for the calls for each day. The response from the APIs will be saved
+and used for 24 hours. Normally the site cache would do it, but it could be, that the cache will be cleared multiple
+times in a row, or that the plugin is on an uncached page. The TYPO3 registry is used as a cache. The cleanup is handled
+on the fly.
 
 If the `?disableYoutubeCache=1` parameter is added to the URL, this cache will be ignored as well.
 

Resources/Public/JavaScript/sgYoutubeLightbox.js

+'use strict';
+
+import LightboxManager from 'lightboxManager';
+
+/** @deprecated */
+module.exports = function() {
+	'use strict';
+
+	/**
+	 * Initialize the whole Popup setup
+	 */
+	function init() {
+		LightboxManager.init({type: 'video', glightbox: {selector: '.sg-youtube-item'}});
+	}
+
+	init();
+};
+

Resources/Public/JavaScript/youtubeLightbox.js

-'use strict';
-
-import LightboxManager from 'lightboxManager';
-
+/**
+ * JavaScript module for the sg-youtube plugin
+ *
+ * @deprecated since version 4.4.0 and will be removed in 5.0.0
+ */
 module.exports = function() {
 	'use strict';
 
+	const $ = require('jquery');
+	require('magnific-popup');
+
 	/**
 	 * Initialize the whole Popup setup
 	 */
-	function init() {
-		LightboxManager.init({type: 'video', glightbox: {selector: '.sg-youtube-item'}});
+	function init(section) {
+		$(`${section || ''} .sg-youtube-item`).each(function (index, item) {
+			let $youtubeItem = $(item),
+				viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+			if (($youtubeItem.data('disable-lightbox') && viewportWidth >= 680) ||
+				($youtubeItem.data('disable-lightbox-mobile') && viewportWidth < 680)
+			) {
+				$youtubeItem.on('click', replaceThumbnailWithVideo);
+			} else {
+				$youtubeItem.magnificPopup({
+					type: 'iframe',
+					iframe: {
+						patterns: {
+							youtube: {
+								index: 'youtube.com/',
+								id: function(url) {
+									return prepareVideoUrl(url);
+								},
+								src: '//www.youtube-nocookie.com/embed/%id%'
+							}
+						}
+					}
+				});
+			}
+		});
+	}
+
+	/**
+	 * Replaces the given element behind the event with a youtube video.
+	 *
+	 * @param {Event} event
+	 */
+	function replaceThumbnailWithVideo(event) {
+		event.preventDefault();
+		let $youtubeItem = $(event.currentTarget);
+
+		// This needs to be done, because the height of inline elements is always 0, if on auto...
+		$youtubeItem.css('display', 'block');
+
+		let queryString = prepareVideoUrl($youtubeItem.attr('href')),
+			$thumbnailElement = $youtubeItem.find('.sg-youtube-image'),
+			width = $thumbnailElement.outerWidth() + 'px',
+			height = $thumbnailElement.outerHeight() + 'px';
+		$thumbnailElement.replaceWith('<div class="sg-youtube-item sg-card-shadow" ' +
+			'style="height: ' + height + '; width: ' + width + ';"><iframe ' +
+			'width="' + width + '" height="' + height + '" ' +
+			'src="https://www.youtube-nocookie.com/embed/' + queryString + '" frameborder="0" ' +
+			'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" ' +
+			'allowfullscreen></iframe></div>');
+	}
+
+	/**
+	 * Prepares the given url, or returns null.
+	 *
+	 * @param {string} url
+	 * @return {string|null}
+	 */
+	function prepareVideoUrl(url) {
+		let matches = url.match(/watch\?v=(.*)&list=(.*)/);
+		if (!matches) {
+			// check if the list parameter is missing
+			matches = url.match(/watch\?v=([^?&]*)/);
+			if (!matches) {
+				return null;
+			}
+		}
+		let [, videoString] = matches,
+			queryParameterSeparator = '?';
+		if (matches[2]) {
+			videoString += '?list=' + matches[2];
+			queryParameterSeparator = '&';
+
+		}
+
+		return videoString + queryParameterSeparator + 'autoplay=1&rel=0';
 	}
 
 	init();
 };
-