j1-template 2024.3.21 → 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,16 +311,6 @@ Asciidoctor::Extensions.register do
                     });
                   }
 
-                  // 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;
@@ -308,7 +330,6 @@ Asciidoctor::Extensions.register do
             }, 10); // END 'dependencies_met_vjs_player_exist'
 
           }); // END 'document ready'
-
         </script>
       )
 
@@ -317,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.21'
+    VERSION = '2024.3.23'
   end
 end

data/lib/starter_web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "j1",
-  "version": "2024.3.21",
+  "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/audio_data.adoc

@@ -135,6 +135,9 @@ volume adjustment, while taking up less screen space.
 .Emancipator · From Dusk To Dawn
 amplitude::emancipator_mini[role="mb-4"]
 
+// .Royalty Free Music · Disco 80th
+// amplitude::disco_mini[role="mb-4"]
+
 Mini players are beneficial when you want to listen to audio in the
 background without dedicating the entire screen to the player. They
 are commonly found on music streaming services, podcast platforms, and
@@ -153,7 +156,7 @@ overwhelming or dominating the content around it.
 amplitude::emancipator_compact[role="mb-4"]
 
 // .Royalty Free Music · Disco 80th
-// amplitude::disco_compact[role="mb-5"]
+// amplitude::disco_compact[role="mb-4"]
 
 The player aims to balance functionality and space efficiency, ensuring users
 can easily access and control the audio playback without sacrificing too much
@@ -168,10 +171,10 @@ to a design or layout that minimizes the component's space while maintaining
 its functionality and usability.
 
 .Emancipator · From Dusk To Dawn
-amplitude::emancipator_large[role="mb-5"]
+amplitude::emancipator_large[role="mb-4"]
 
-.Royalty Free Music · Disco 80th
-amplitude::disco_large[role="mb-4"]
+// .Royalty Free Music · Disco 80th
+// amplitude::disco_large[role="mb-4"]
 
 The large design provides the full functionality of an audio player to ensure
 users can easily control audio playback. The player behaves similarly to a
@@ -180,7 +183,7 @@ no need to open other widgets.
 
 
 [role="mt-5"]
-== J1 AmplitudeJS on Youtube
+== J1 AmplitudeJS on YouTube
 
 The example demonstrates playing *Audio* track from *YouTube Video* using an
 AmplitudJS player. The J1 template uses the video *plugin ytp* to extend the
@@ -199,6 +202,9 @@ for native audio files.
 .Bea and her Business · YouTube 2025
 amplitude::bea_yt_large[role="mb-5"]
 
+.Diana Krall · YouTube
+amplitude::diana_krall_yt_large[role="mb-4"]
+
 [role="mt-4 mb-5"]
 [NOTE]
 ====
@@ -225,4 +231,3 @@ HTML5 video for local content and from online sources on the Internet.
 
 [role="mb-8"]
 Incredible? See the next example page link:{url-tour--video_data}[Video Player].
-

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