[FEATURE] Adds a new feature to disable the lightbox on mobile as well

Configuration/FlexForms/flexform_sgyoutube_youtube.xml

@@ -67,6 +67,17 @@
 						</TCEforms>
 					</settings.disableLightbox>
 
+					<settings.disableLightboxMobile>
+						<TCEforms>
+							<exclude>0</exclude>
+							<label>LLL:EXT:sg_youtube/Resources/Private/Language/locallang.xlf:flexform.disableLightboxMobile</label>
+							<config>
+								<type>check</type>
+								<default>0</default>
+							</config>
+						</TCEforms>
+					</settings.disableLightboxMobile>
+
 					<settings.aspectRatio>
 						<TCEforms>
 							<label>LLL:EXT:sg_youtube/Resources/Private/Language/locallang.xlf:flexform.aspectRatio</label>

Resources/Private/Language/de.locallang.xlf

@@ -26,8 +26,12 @@
 				<target><![CDATA[Aspect Ratio (nur genutzt, wenn der Thumbnail-Typ dies prüfen soll)]]></target>
 			</trans-unit>
 			<trans-unit id="flexform.disableLightbox" approved="yes">
-				<source><![CDATA[Replace the thumbnail with the video and disable the lightbox]]></source>
-				<target><![CDATA[Das Thumbnail durch das Video ersetzen und die Lightbox deaktivieren]]></target>
+				<source><![CDATA[Replace the thumbnail with the video and disable the lightbox (Desktop)]]></source>
+				<target><![CDATA[Das Thumbnail durch das Video ersetzen und die Lightbox deaktivieren (Desktop)]]></target>
+			</trans-unit>
+			<trans-unit id="flexform.disableLightboxMobile" approved="yes">
+				<source><![CDATA[Replace the thumbnail with the video and disable the lightbox (Mobile)]]></source>
+				<target><![CDATA[Das Thumbnail durch das Video ersetzen und die Lightbox deaktivieren (Mobile)]]></target>
 			</trans-unit>
 			<trans-unit id="flexform.id" approved="yes">
 				<source><![CDATA[ID of Channel (UC), Playlist (PL) or Single Video (youtube.com/watch?v=%ID%)]]></source>

Resources/Private/Language/locallang.xlf

@@ -21,7 +21,10 @@
 				<source><![CDATA[Aspect Ratio (only used if thumbnail type is set to check that)]]></source>
 			</trans-unit>
 			<trans-unit id="flexform.disableLightbox">
-				<source><![CDATA[Replace the thumbnail with the video and disable the lightbox]]></source>
+				<source><![CDATA[Replace the thumbnail with the video and disable the lightbox (Desktop)]]></source>
+			</trans-unit>
+			<trans-unit id="flexform.disableLightboxMobile">
+				<source><![CDATA[Replace the thumbnail with the video and disable the lightbox (Mobile)]]></source>
 			</trans-unit>
 			<trans-unit id="flexform.id">
 				<source><![CDATA[ID of Channel (UC), Playlist (PL) or Single Video (youtube.com/watch?v=%ID%)]]></source>

Resources/Private/Templates/Youtube/Index.html

@@ -12,7 +12,7 @@
 					<f:if condition="{feedIterator.isFirst} && {feedIterator.total} > 1">
 						<div class="sg-youtube">
 							<div class="sg-youtube-item-container">
-								<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}">
+								<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
 									<f:if condition="{feedItem.thumbnail}">
 										<div class="sg-youtube-image">
 											<img src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
@@ -33,7 +33,7 @@
 				<ul class="sg-youtube">
 					<f:for each="{feed}" as="feedItem" iteration="feedIterator">
 						<li class="sg-youtube-item-container{f:if(condition: '{feedIterator.total} < 2', then: ' sg-youtube-item-single', else: ' sg-youtube-item-list')}">
-							<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}">
+							<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
 								<f:if condition="{feedItem.thumbnail}">
 									<div class="sg-youtube-image">
 										<img src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
@@ -56,7 +56,7 @@
 			<ul class="sg-youtube sg-youtube-default">
 				<f:for each="{feed}" as="feedItem" iteration="feedIterator">
 					<li class="sg-youtube-item-container{f:if(condition: '{feedIterator.total} < 2', then: ' sg-youtube-item-single')}">
-						<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}" target="_blank" data-disable-lightbox="{settings.disableLightbox}">
+						<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}" target="_blank" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
 							<f:if condition="{feedItem.thumbnail}">
 								<div class="sg-youtube-image">
 									<img src="{feedItem.thumbnail}" alt="{feedItem.title}"/>

Resources/Public/JavaScript/youtubeLightbox.js

@@ -15,7 +15,9 @@ module.exports = function() {
 		$('.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) {
+			if (($youtubeItem.data('disable-lightbox') && viewportWidth >= 680)
+				|| ($youtubeItem.data('disable-lightbox-mobile') && viewportWidth < 680)
+			) {
 				$youtubeItem.on('click', replaceThumbnailWithVideo);
 			} else {
 				$youtubeItem.magnificPopup({