j1-template 2024.3.22 → 2024.3.23

data/lib/starter_web/_plugins/asciidoctor/youtube-block.rb

@@ -170,7 +170,7 @@ Asciidoctor::Extensions.register do
                 // insert div|caption container AFTER the image
                 image.parentNode.insertBefore(newDiv, image.nextSibling);
               } else {
-                console.error(`Kein Bild mit src="${imageSrc}" gefunden.`);
+                console.error(`No image found at: '${imageSrc}'`);
               }
             }
 
@@ -183,7 +183,8 @@ Asciidoctor::Extensions.register do
               var j1CoreFinished = (j1.getState() === 'finished') ? true : false;
 
               if (j1CoreFinished && pageVisible) {
-                var vjs_player  = document.getElementById("#{video_id}");
+                var vjs_player   = document.getElementById("#{video_id}");
+                var appliedOnce  = false;
 
                 // add|skip captions (on poster image)
                 if ('#{caption_enabled}' === 'true') {
@@ -212,12 +213,42 @@ Asciidoctor::Extensions.register do
               var vjsPlayerCustomButtons  = ("#{custom_buttons}" === 'true') ? true : false;
 
               if (vjsPlayerExist && vjsPlayerCustomButtons) {
+
                 // apply player customization on 'player ready'
+                // -------------------------------------------------------------
                 videojs("#{video_id}").ready(function() {
-                  var vjsPlayer = this;
+                  const vjsPlayer   = this;               
+
+                  // add custom progressControlSilder
+                  // -----------------------------------------------------------
+
+                  // create customControlContainer for progressControlSilder|time (display) elements
+                  const customProgressContainer = vjsPlayer.controlBar.addChild('Component', {
+                    el: videojs.dom.createEl('div', {
+                      className: 'vjs-theme-uno custom-progressbar-container'
+                    })
+                  });
+
+                  // move progressControlSlider into customControlContainer
+                  const progressControlSlider = vjsPlayer.controlBar.progressControl;
+                  if (progressControlSlider) {
+                    customProgressContainer.el().appendChild(progressControlSlider.el());
+                  }
+
+                  // move currentTimeDisplay BEFORE the progressControlSilder
+                  const currentTimeDisplay = vjsPlayer.controlBar.currentTimeDisplay;
+                  if (currentTimeDisplay) {
+                    customProgressContainer.el().insertBefore(currentTimeDisplay.el(), progressControlSlider.el());
+                  }
+
+                  // move the durationDisplay AFTER the progressControlSilder
+                  const durationDisplay = vjsPlayer.controlBar.durationDisplay;
+                  if (durationDisplay) {
+                    customProgressContainer.el().appendChild(durationDisplay.el());
+                  }
 
                   // add|skip playbackRates
-                  //
+                  // -----------------------------------------------------------
                   if (videojsConfig.playbackRates.enabled) {
                     vjsPlayer.playbackRates(vjsPlaybackRates);
                   }
@@ -260,6 +291,7 @@ Asciidoctor::Extensions.register do
                   }
 
                   // add|skip skipButtons plugin
+                  // -----------------------------------------------------------
                   if (piSkipButtons.enabled) {
                     var backwardIndex = piSkipButtons.backward;
                     var forwardIndex  = piSkipButtons.forwardIndex;
@@ -279,23 +311,6 @@ Asciidoctor::Extensions.register do
                     });
                   }
 
-                  // TODO:
-                  // -----------------------------------------------------------
-                  // Check if plugin ZoomButtons possible to be used for 
-                  // this extension. Disabled for now.
-                  // ------------------------------------------------------------
-                  piZoomButtons.enabled = false;                  
-
-                  // add|skip zoomButtons plugin
-                  if (piZoomButtons.enabled && vjsPlayerType === 'native') {
-                    vjsPlayer.zoomButtons({
-                      moveX:  piZoomButtons.moveX,
-                      moveY:  piZoomButtons.moveY,
-                      rotate: piZoomButtons.rotate,
-                      zoom:   piZoomButtons.zoom
-                    });                    
-                  }
-
                   // set start position of current video (on play)
                   // -----------------------------------------------------------
                   var appliedOnce = false;
@@ -315,7 +330,6 @@ Asciidoctor::Extensions.register do
             }, 10); // END 'dependencies_met_vjs_player_exist'
 
           }); // END 'document ready'
-
         </script>
       )
 
@@ -324,4 +338,4 @@ Asciidoctor::Extensions.register do
   end
 
   block_macro YouTubeBlockMacro
-end
+end

data/lib/starter_web/_plugins/index/lunr.rb

@@ -394,6 +394,6 @@ end
 
 module Jekyll
   module J1LunrSearch
-    VERSION = '2024.3.22'
+    VERSION = '2024.3.23'
   end
 end

data/lib/starter_web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "j1",
-  "version": "2024.3.22",
+  "version": "2024.3.23",
   "description": "J1 Template",
   "homepage": "https://your.site",
   "author": {

data/lib/starter_web/pages/public/tools/tester/videojs_macro_tester.adoc

@@ -0,0 +1,282 @@
+---
+title:                                  VideoJS over YT
+title_extention:                        Custom progressControlSlider
+tagline:                                Custom progressControlSlider
+
+date:                                   2025-06-05
+last_modified:                          2025-06-08
+
+description: >
+                                        Test the VideoJS ADOC Macro for
+                                        custom AJS progressControlSilder
+keywords: >
+                                        open source, free, template, jekyll,
+                                        jekyllone, web, sites, static, jamstack,
+                                        bootstrap, html, html5, video, support,
+                                        videojs
+
+categories:                             [ Tester ]
+tags:                                   [ Module, VideoJS ]
+
+image:
+  path:                                 /assets/image/module/attic/markus-spiske-1920x1280.jpg
+  width:                                1920
+  height:                               1280
+
+attic:                                  false
+regenerate:                             false
+personalization:                        true
+permalink:                              /pages/public/tester/videojs_yt/
+
+resources:                              [ videojs ]
+resource_options:
+  - toccer:
+      collapseDepth:                    3
+  - attic:
+      slides:
+        - url:                          /assets/image/module/attic/markus-spiske-1920x1280.jpg
+          alt:                          Swiper Tester
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Attribute settings for section control
+//
+:swiper--features:                      false
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[role="dropcap"]
+Swiper, the free and most modern mobile touch slider with hardware accelerated
+transitions and amazing native behavior. It is intended to be used in mobile
+websites, mobile web apps, and mobile native/hybrid apps.
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+== VideoJS Player over YouTube
+
+lorem:sentences[3]
+
+++++
+<style>
+
+/* -----------------------------------------------------------------------------
+  styles moved to VJS theme uno at: 
+  assets/theme/j1/modules/videojs/css/themes/uno.css
+*/
+
+</style>
+++++
+
+++++
+<div class="video-title">
+  <i class="mdib mdib-video mdib-24px mr-2"></i>
+  The Breathtaking Beauty of Nature
+</div>
+
+<div class="mb-8">
+  <video
+    id="2rtQOsWaAXc"
+    class="video-js vjs-theme-uno"
+    controls
+    width="640"
+    height="360"
+    poster="//img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg" alt="Beauty of Nature" 
+    aria-label="The Breathtaking Beauty of Nature"
+    data-setup='{
+        "fluid" : true,
+        "techOrder": [
+            "youtube", "html5"
+        ],
+        "sources": [{
+            "type": "video/youtube",
+            "src": "//youtube.com/watch?v=IUN664s7N-c"
+        }],
+        "controlBar": {      
+          "pictureInPictureToggle": false,
+          "volumePanel": {
+              "inline": false
+          }
+        }
+      }'
+  ></video>
+</div>
+++++
+
+++++
+<script>
+
+$(function() {
+  // ===========================================================================
+  // take over VideoJS configuration data (JSON data from Ruby)
+  // ---------------------------------------------------------------------------
+  //
+  const videojsDefaultConfigJson = '{"description":{"title":"J1 VideoJS","scope":"Default settings","location":"_data/modules/defaults/videojs.yml"},"defaults":{"enabled":false,"playbackRates":{"enabled":false,"values":[0.25,0.5,1,1.5,2]},"players":{"youtube":{"autoplay":0,"cc_load_policy":0,"controls":0,"disablekb":1,"enablejsapi":1,"fs":0,"iv_load_policy":3,"loop":0,"modestbranding":1,"rel":0,"showinfo":0,"default_poster":"/assets/image/icon/videojs/videojs-poster.png","poster":"maxresdefault.jpg","end":true,"start":true}},"plugins":{"autoCaption":{"enabled":false},"hotKeys":{"enabled":false,"seekStep":15,"volumeStep":0.1,"alwaysCaptureHotkeys":true,"captureDocumentHotkeys":false,"hotkeysFocusElementFilter":"function () { return false }","enableFullscreen":true,"enableHoverScroll":true,"enableInactiveFocus":true,"enableJogStyle":false,"enableMute":true,"enableModifiersForNumbers":true,"enableNumbers":false,"enableVolumeScroll":true,"skipInitialFocus":false},"skipButtons":{"enabled":false,"surroundPlayButton":false,"backwardIndex":1,"forwardIndex":1,"forward":10,"backward":10},"zoomButtons":{"enabled":false,"moveX":0,"moveY":0,"rotate":0,"zoom":1}}}}';
+
+  const videojsUserConfigJson = '{"description":{"title":"J1 VideoJS","scope":"User settings","location":"_data/modules/videojs.yml"},"settings":{"enabled":true,"playbackRates":{"enabled":true},"plugins":{"hotKeys":{"enabled":false,"enableInactiveFocus":false},"skipButtons":{"enabled":true,"surroundPlayButton":true},"zoomButtons":{"enabled":false}}}}';
+
+  // ===========================================================================
+  // create config objects from JSON data
+  // ---------------------------------------------------------------------------
+  const videojsDefaultSettings  = JSON.parse(videojsDefaultConfigJson);
+  const videojsUserSettings     = JSON.parse(videojsUserConfigJson);
+  const videojsConfig           = $.extend(true, {}, videojsDefaultSettings.defaults, videojsUserSettings.settings);
+
+  // ===========================================================================
+  // VideoJS player settings
+  // ---------------------------------------------------------------------------
+  const vjsPlayerType           = 'ytp';
+  const vjsPlaybackRates        = videojsConfig.playbackRates.values;
+
+  // ===========================================================================
+  // VideoJS plugin settings
+  // -----------------------------------------------------------------
+  const piAutoCaption           = videojsConfig.plugins.autoCaption;
+  const piHotKeys               = videojsConfig.plugins.hotKeys;
+  const piSkipButtons           = videojsConfig.plugins.skipButtons;
+  const piZoomButtons           = videojsConfig.plugins.zoomButtons;
+
+  // ===========================================================================
+  // helper functions
+  // ---------------------------------------------------------------------------
+  function addCaptionAfterImage(imageSrc) {
+    const image = document.querySelector(`img[src="${imageSrc}"]`);
+
+    if (image) {
+      // create div|caption container
+      const newDiv = document.createElement('div');
+      newDiv.classList.add('caption');
+      newDiv.textContent = 'The Breathtaking Beauty of Nature';
+
+      // insert div|caption container AFTER the image
+      image.parentNode.insertBefore(newDiv, image.nextSibling);
+    } else {
+      console.error(`No image found at: ${imageSrc}`);
+    }
+  }
+
+  // ===========================================================================
+  // initialize the VideoJS player (on page ready)
+  // ---------------------------------------------------------------------------
+  var dependencies_met_page_ready = setInterval(function(options) {
+    var pageState       = $('#content').css("display");
+    var pageVisible     = (pageState == 'block') ? true : false;
+    var j1CoreFinished  = (j1.getState() === 'finished') ? true : false;
+
+    if (j1CoreFinished && pageVisible) {
+      const vjs_player  = document.getElementById("2rtQOsWaAXc");
+
+      // add captions (on poster image)
+      addCaptionAfterImage('//img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg');
+
+      // scroll page to the players top position
+      // -----------------------------------------------------------------------
+      vjs_player.addEventListener('click', function(event) {
+        const targetDiv         = document.getElementById("2rtQOsWaAXc");
+        const targetDivPosition = targetDiv.offsetTop;
+        const scrollOffset      = (window.innerWidth >= 720) ? -130 : -110;
+
+        // scroll player to top position
+        window.scrollTo(0, targetDivPosition + scrollOffset);
+      });// END EventListener 'click'
+
+      clearInterval(dependencies_met_page_ready);
+    }
+  }, 10);
+
+  // customize the yt player created
+  // ---------------------------------------------------------------------------
+  var dependencies_met_vjs_player_exist = setInterval(function(options) {
+    var vjsPlayerExist = document.getElementById("2rtQOsWaAXc") ? true : false;
+
+    if (vjsPlayerExist) {
+
+      // apply player customization on 'player ready'
+      videojs("2rtQOsWaAXc").ready(function() {
+        const vjsPlayer = this;
+
+        // create customControlContainer for progressControlSilder|time (display) elements
+        const customProgressContainer = vjsPlayer.controlBar.addChild('Component', {
+          el: videojs.dom.createEl('div', {
+            className: 'vjs-theme-uno custom-progressbar-container'
+          })
+        });
+
+        // move progressControlSlider into customControlContainer
+        const progressControlSlider = vjsPlayer.controlBar.progressControl;
+        if (progressControlSlider) {
+          customProgressContainer.el().appendChild(progressControlSlider.el());
+        }
+
+        // move currentTimeDisplay BEFORE the progressControlSilder
+        const currentTimeDisplay = vjsPlayer.controlBar.currentTimeDisplay;
+        if (currentTimeDisplay) {
+          customProgressContainer.el().insertBefore(currentTimeDisplay.el(), progressControlSlider.el());
+        }
+
+        // move the durationDisplay AFTER the progressControlSilder
+        const durationDisplay = vjsPlayer.controlBar.durationDisplay;
+        if (durationDisplay) {
+          customProgressContainer.el().appendChild(durationDisplay.el());
+        }
+
+        // add|skip playbackRates
+        if (videojsConfig.playbackRates.enabled) {
+          vjsPlayer.playbackRates(vjsPlaybackRates);
+        }
+
+        // add|skip skipButtons plugin
+        if (piSkipButtons.enabled) {
+          var backwardIndex = piSkipButtons.backward;
+          var forwardIndex  = piSkipButtons.forwardIndex;
+
+          // property 'surroundPlayButton' takes precendence
+          if (piSkipButtons.surroundPlayButton) {
+              var backwardIndex = 0;
+              var forwardIndex  = 1;
+          }
+
+          vjsPlayer.skipButtons({
+            backwardIndex: backwardIndex,
+            forwardIndex: forwardIndex,
+            backward: piSkipButtons.backward,
+            forward: piSkipButtons.forward,
+          });
+        }
+
+        // set start position of current video (on play)
+        // ---------------------------------------------------------------------
+        var appliedOnce = false;
+        vjsPlayer.on("play", function() {
+          var startFromSecond = new Date('1970-01-01T' + "00:00:00" + 'Z').getTime() / 1000;
+          if (!appliedOnce) {
+              vjsPlayer.currentTime(startFromSecond);
+              appliedOnce = true;
+          }
+        });
+
+      }); // eventListener on 'player ready'
+
+      clearInterval(dependencies_met_vjs_player_exist);
+    } // END if 'vjsPlayerExist'
+  }, 10); // END 'dependencies_met_vjs_player_exist'
+}); // END 'document ready'
+
+</script>
+++++

data/lib/starter_web/pages/public/tour/video_data.adoc

@@ -319,6 +319,7 @@ HD 720p (1280x720 pixel).
 .Local MP4 Video · Justified Gallery + LightGallery
 gallery::jg_video_html5[role="mb-4"]
 
+
 ifeval::[{yt_gallery} == true]
 [role="mt-4"]
 === YouTube