Merge pull request #7844 from MrKarlDilkington/youtube_lazy_loading

Add YouTube block lazy loading
concretecms · Jan 21, 2020 · e85fecc · e85fecc
2 parents 839011f + 23fcd05
commit e85fecc
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 16 deletions.
diff --git a/concrete/blocks/youtube/controller.php b/concrete/blocks/youtube/controller.php
@@ -123,6 +123,8 @@ public function save($data)
             'startTime' => '',
 
             'noCookie' => false,
+
+            'lazyLoad' => false
         ];
 
         $args = [
@@ -147,6 +149,8 @@ public function save($data)
             'startTime' => trim($data['startTime']),
 
             'noCookie' => $data['noCookie'] ? 1 : 0,
+
+            'lazyLoad' => $data['lazyLoad'] ? 1 : 0
         ];
         if ($args['sizing'] === 'fixed') {
             $args += [

diff --git a/concrete/blocks/youtube/db.xml b/concrete/blocks/youtube/db.xml
@@ -35,6 +35,10 @@
       <default value="0"/>
       <notnull/>
     </field>
+    <field name="lazyLoad" type="boolean">
+      <default value="0"/>
+      <notnull/>
+    </field>
     <field name="rel" type="boolean">
       <default value="0"/>
       <notnull/>

diff --git a/concrete/blocks/youtube/form_setup_html.php b/concrete/blocks/youtube/form_setup_html.php
@@ -1,18 +1,17 @@
-<?php defined('C5_EXECUTE') or die('Access Denied.'); ?>
-<?php
+<?php defined('C5_EXECUTE') or die('Access Denied.');
+
 if (empty($vWidth)) {
     $vWidth = 640;
 }
+
 if (empty($vHeight)) {
     $vHeight = 360;
 }
 
 if (empty($sizing)) {
     $sizing = '16:9';
 }
-?>
 
-<?php
 echo Core::make('helper/concrete/ui')->tabs([
     ['video', t('Video'), true],
     ['settings', t('Settings')],
@@ -138,49 +137,59 @@
             <div class="form-group">
                 <?php echo $form->text('startTime', isset($startTime) ? $startTime : null); ?>
             </div>
-
         </div>
     </fieldset>
     <fieldset>
         <legend><?php echo t('Privacy Options'); ?></legend>
         <div class="form-group">
             <div class="checkbox">
                 <label>
-                    <?php echo $form->checkbox('noCookie', 1, $noCookie); ?>
-                    <?php echo t('No Cookie'); ?>
+                    <?php echo $form->checkbox('noCookie', 1, (isset($noCookie) ? $noCookie : false)); ?>
+                    <?php echo t('No cookie') ?>
+                </label>
+            </div>
+        </div>
+    </fieldset>
+    <fieldset>
+        <legend><?php echo t('Loading Options'); ?></legend>
+        <div class="form-group">
+            <div class="checkbox">
+                <label>
+                    <?php echo $form->checkbox('lazyLoad', 1, (isset($lazyLoad) ? $lazyLoad : false)); ?>
+                    <?php echo t('Lazy load video')?>
                 </label>
             </div>
         </div>
     </fieldset>
 </div>
 
 <script>
-    $(document).ready(function() {
-        $('#sizing1, #sizing2, #sizing3').change(function(){
+    $(document).ready(function () {
+        $('#sizing1, #sizing2, #sizing3').change(function () {
             if ($('#sizing3').is(':checked')) {
                 $('#fixedsizes').removeClass('hidden');
             } else {
                 $('#fixedsizes').addClass('hidden');
             }
         });
 
-        $('#controls').change(function(){
+        $('#controls').change(function () {
             if ($('#controls').is(':checked')) {
                 $('.controls-only').removeClass('hidden');
             } else {
                 $('.controls-only').addClass('hidden');
             }
         });
 
-        $('#color').change(function(){
+        $('#color').change(function () {
             if ($(this).val() == 'white') {
                 $('#modestbranding').prop('disabled','disabled').prop('checked',false);
             } else {
                 $('#modestbranding').removeProp('disabled');
             }
         });
 
-        $('#ccm-form-submit-button').click(function(){
+        $('#ccm-form-submit-button').click(function () {
             if (!$('#videoURL').val()) {
                 $('[data-tab="video"').click();
             }

diff --git a/concrete/blocks/youtube/view.php b/concrete/blocks/youtube/view.php
@@ -2,6 +2,7 @@
 
 $responsiveClass = 'youtubeBlockResponsive16by9';
 $sizeDisabled = '';
+$lazyLoadAttribute = '';
 
 if ($vWidth && $vHeight) {
     $sizeargs = 'width="' . $vWidth . '" height="' . $vHeight . '"';
@@ -11,6 +12,10 @@
     $responsiveClass = 'youtubeBlockResponsive4by3';
 }
 
+if (isset($lazyLoad) && $lazyLoad) {
+    $lazyLoadAttribute = 'loading="lazy"';
+}
+
 $params = [];
 
 if (isset($playlist)) {
@@ -77,10 +82,11 @@
     </div>
     <?php
     $loc->popActiveContext();
-} else {
-    ?>
+} else { ?>
     <div id="youtube<?= $bID; ?>" class="youtubeBlock <?php echo $responsiveClass; ?>">
-        <iframe class="youtube-player" <?php echo $sizeargs; ?> src="//<?= $youtubeDomain; ?>/embed/<?= $videoID; ?><?= $paramstring; ?>" allow="autoplay" allowfullscreen></iframe>
+        <iframe class="youtube-player" <?php echo $sizeargs; ?>
+            src="//<?= $youtubeDomain; ?>/embed/<?= $videoID; ?><?= $paramstring; ?>"
+            allow="autoplay" allowfullscreen <?= $lazyLoadAttribute; ?>></iframe>
     </div>
     <?php
-} ?>
+}
diff --git a/concrete/src/Updater/Migrations/Migrations/Version20200118043285.php b/concrete/src/Updater/Migrations/Migrations/Version20200118043285.php
@@ -0,0 +1,13 @@
+<?php
+namespace Concrete\Core\Updater\Migrations\Migrations;
+
+use Concrete\Core\Updater\Migrations\AbstractMigration;
+use Concrete\Core\Updater\Migrations\RepeatableMigrationInterface;
+
+class Version20200118043285 extends AbstractMigration implements RepeatableMigrationInterface
+{
+    public function upgradeDatabase()
+    {
+        $this->refreshBlockType('youtube');
+    }
+}