From ead76852a882284e8082d00943aa111108d29315 Mon Sep 17 00:00:00 2001
From: Michael Kessler <michael.kessler@sgalinski.de>
Date: Wed, 23 Jun 2021 18:07:00 +0200
Subject: [PATCH] [TASK] Add old lightbox implementation for backwards
compatibility
---
README.md | 20 +++--
.../Public/JavaScript/sgYoutubeLightbox.js | 18 ++++
.../Public/JavaScript/youtubeLightbox.js | 90 +++++++++++++++++--
3 files changed, 114 insertions(+), 14 deletions(-)
create mode 100644 Resources/Public/JavaScript/sgYoutubeLightbox.js
diff --git a/README.md b/README.md
index f7b9f90..9d28075 100644
--- a/README.md
+++ b/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.
diff --git a/Resources/Public/JavaScript/sgYoutubeLightbox.js b/Resources/Public/JavaScript/sgYoutubeLightbox.js
new file mode 100644
index 0000000..2dbb0e9
--- /dev/null
+++ b/Resources/Public/JavaScript/sgYoutubeLightbox.js
@@ -0,0 +1,18 @@
+'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();
+};
+
diff --git a/Resources/Public/JavaScript/youtubeLightbox.js b/Resources/Public/JavaScript/youtubeLightbox.js
index df8602e..92d7878 100644
--- a/Resources/Public/JavaScript/youtubeLightbox.js
+++ b/Resources/Public/JavaScript/youtubeLightbox.js
@@ -1,17 +1,93 @@
-'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();
};
-
--
GitLab