Commit ead76852 authored by Michael Kessler's avatar Michael Kessler
Browse files

[TASK] Add old lightbox implementation for backwards compatibility

parent 00552201
......@@ -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.
......
'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();
};
'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();
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment