j1-template 2024.3.15 → 2024.3.17

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

@@ -1,6 +1,6 @@
 # ------------------------------------------------------------------------------
 # ~/_plugins/asciidoctor-extensions/youtube-block.rb
-# Asciidoctor extension for YouTube Video
+# Asciidoctor extension for YouTube Videos
 #
 # Product/Info:
 # https://jekyll.one
@@ -10,6 +10,9 @@
 # J1 Template is licensed under the MIT License.
 # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
 # ------------------------------------------------------------------------------
+
+# Require Asciidoctor Extensions
+# ------------------------------------------------------------------------------
 require 'asciidoctor/extensions' unless RUBY_ENGINE == 'opal'
 include Asciidoctor
 
@@ -40,25 +43,55 @@ include Asciidoctor
 # See: https://www.datenschutz.org/youtube-nocookie/
 # ------------------------------------------------------------------------------
 
+# Register the Asciidoctor Extension
+# ------------------------------------------------------------------------------
 Asciidoctor::Extensions.register do
 
   class YouTubeBlockMacro < Extensions::BlockMacroProcessor
     use_dsl
 
     named :youtube
-    name_positional_attributes 'poster', 'theme', 'role'
-    default_attrs 'poster' => '/assets/image/icons/videojs/videojs-poster.png',
+    name_positional_attributes 'caption', 'start','poster', 'theme', 'custom_buttons', 'role'
+    default_attrs 'caption' => 'true',
+                  'start' => '00:00:00',
+                  'poster' => '/assets/image/icons/videojs/videojs-poster.png',
                   'theme' => 'uno',
-                  'role' => 'mt-3 mb-3'
+                  'custom_buttons' => true,
+                  'role' => 'mt-4 mb-5'
 
     def process parent, target, attributes
 
-      chars         = [('a'..'z'), ('A'..'Z'), ('0'..'9')].map(&:to_a).flatten
-      video_id      = (0...11).map { chars[rand(chars.length)] }.join
+      # ========================================================================
+      # load VideoJS configuration data
+      # ------------------------------------------------------------------------
+      # NOTE:
+      # Settings folder _data is NOT available in the website
+      #-------------------------------------------------------------------------
+      current_path                = File.expand_path(Dir.getwd)
+      default_config_path         = File.join(current_path, '/_data/modules/defaults')
+      user_config_path            = File.join(current_path, '/_data/modules')
+
+      videojs_config_file_name    = 'videojs.yml'
+      videojs_default_config_file = File.join(default_config_path, videojs_config_file_name)
+      videojs_user_config_file    = File.join(user_config_path, videojs_config_file_name)
+
+      videojsDefaultSettings      = YAML::load(File.open(videojs_default_config_file))
+      videojsUserSettings         = YAML::load(File.open(videojs_user_config_file))
+      videojsDefaultSettingsJson  = videojsDefaultSettings.to_json;
+      videojsUserSettingsJson     = videojsUserSettings.to_json;
 
-      title_html    = (attributes.has_key? 'title') ? %(<div class="video-title"> <i class="mdib mdib-youtube-tv mdib-24px mr-2"></i> #{attributes['title']} </div>\n) : nil
-      poster_image  = (poster = attributes['poster']) ? %(#{poster}) : nil
-      theme_name    = (theme  = attributes['theme'])  ? %(#{theme}) : nil
+      # ========================================================================
+      # set plugin specific data
+      # ------------------------------------------------------------------------
+      #
+      chars           = [('a'..'z'), ('A'..'Z'), ('0'..'9')].map(&:to_a).flatten
+      video_id        = (0...11).map { chars[rand(chars.length)] }.join
+
+      title_html      = (attributes.has_key? 'title') ? %(<div class="video-title"> <i class="mdib mdib-video mdib-24px mr-2"></i> #{attributes['title']} </div>\n) : nil
+      poster_image    = (poster = attributes['poster']) ? %(#{poster}) : nil
+      theme_name      = (theme  = attributes['theme'])  ? %(#{theme}) : nil
+      custom_buttons  = (custom_buttons = attributes['custom_buttons']) ? %(#{custom_buttons}) : nil
+      caption_enabled = (caption = attributes['caption'])  ? true : false
 
       html = %(
         <div class="youtube-player bottom #{attributes['role']}">
@@ -93,6 +126,38 @@ Asciidoctor::Extensions.register do
         <script>
           $(function() {
 
+            // =================================================================
+            // take over VideoJS configuration data (JSON data from Ruby)
+            // -----------------------------------------------------------------            
+            var videojsDefaultConfigJson = '#{videojsDefaultSettingsJson}';
+            var videojsUserConfigJson    = '#{videojsUserSettingsJson}';
+
+            // =================================================================
+            // create config objects from JSON data
+            // -----------------------------------------------------------------             
+            var videojsDefaultSettings   = JSON.parse(videojsDefaultConfigJson);
+            var videojsUserSettings      = JSON.parse(videojsUserConfigJson);
+
+            // merge config objects (jQuery)
+            var 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}"]`);
 
@@ -109,31 +174,141 @@ Asciidoctor::Extensions.register do
               }
             }
 
+            // =================================================================
+            // 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) {
-                addCaptionAfterImage('#{poster_image}');
+                var vjs_player  = document.getElementById("#{video_id}");
 
-                // scroll to player top position
-                // -------------------------------------------------------------
-                var vjs_player = document.getElementById("#{video_id}");
+                // add|skip captions (on poster image)
+                if ('#{caption_enabled}' === 'true') {
+                  addCaptionAfterImage('#{poster_image}');
+                }
 
+                // scroll page to the players top position
+                // -------------------------------------------------------------
                 vjs_player.addEventListener('click', function(event) {
-                  var scrollOffset = (window.innerWidth >= 720) ? -130 : -110;
-
-                  // scroll player to top position
                   const targetDiv         = document.getElementById("#{video_id}");
                   const targetDivPosition = targetDiv.offsetTop;
+                  var 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 (already) created
+            // -----------------------------------------------------------------
+            var dependencies_met_vjs_player_exist = setInterval (function (options) {
+              var vjsPlayerExist          = document.getElementById("#{video_id}") ? true : false;
+              var vjsPlayerCustomButtons  = ("#{custom_buttons}" === 'true') ? true : false;
+
+              if (vjsPlayerExist && vjsPlayerCustomButtons) {
+                // apply player customization on 'player ready'
+                videojs("#{video_id}").ready(function() {
+                  var vjsPlayer = this;
+
+                  // add|skip playbackRates
+                  //
+                  if (videojsConfig.playbackRates.enabled) {
+                    vjsPlayer.playbackRates(vjsPlaybackRates);
+                  }
+
+                  // add|skip hotKeys plugin
+                  //
+                  if (piHotKeys.enabled) {
+                    vjsPlayer.hotKeys({
+                      volumeStep:                         piHotKeys.volumeStep,
+                      seekStep:                           piHotKeys.seekStep,
+                      enableMute:                         piHotKeys.enableMute,
+                      enableFullscreen:                   piHotKeys.enableFullscreen,
+                      enableNumbers:                      piHotKeys.enableNumbers,
+                      enableVolumeScroll:                 piHotKeys.enableVolumeScroll,
+                      enableHoverScroll:                  piHotKeys.enableHoverScroll,
+                      alwaysCaptureHotkeys:               piHotKeys.alwaysCaptureHotkeys,
+                      captureDocumentHotkeys:             piHotKeys.captureDocumentHotkeys,
+                      documentHotkeysFocusElementFilter:  e => e.tagName.toLowerCase() === "body",
+
+                      // Mimic VLC seek behavior (default to: 15)
+                      seekStep: function(e) {
+                        if (e.ctrlKey && e.altKey) {
+                          return 5*60;
+                        } else if (e.ctrlKey) {
+                          return 60;
+                        } else if (e.altKey) {
+                          return 10;
+                        } else {
+                          return 15;
+                        }
+                      },
+
+                      // Enhance existing simple hotkey by complex hotkeys
+                      fullscreenKey: function(e) {
+                        // fullscreen with the F key or Ctrl+Enter
+                        return ((e.which === 70) || (e.ctrlKey && e.which === 13));
+                      },  
+
+                    }); // END VideoJS hotKeys plugin
+                  }
+
+                  // 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,
+                    });
+                  }
+
+                  // 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;
+                  vjsPlayer.on("play", function() {
+                    var startFromSecond = new Date('1970-01-01T' + "#{attributes['start']}" + 'Z').getTime() / 1000;
+                    if (!appliedOnce) {
+                      vjsPlayer.currentTime(startFromSecond);
+                      appliedOnce = true;
+                    }
+                  });
+
+                }); // END yt player ready (set custom controls)
+
+                clearInterval(dependencies_met_vjs_player_exist);
+              } // END if 'vjsPlayerExist'
+
+            }, 10); // END 'dependencies_met_vjs_player_exist'
+
+          }); // END 'document ready'
+
         </script>
       )
 

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

@@ -394,6 +394,6 @@ end
 
 module Jekyll
   module J1LunrSearch
-    VERSION = '2024.3.15'
+    VERSION = '2024.3.17'
   end
 end

data/lib/starter_web/package.json

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

data/lib/starter_web/pages/public/_includes/attributes.asciidoc

@@ -0,0 +1,45 @@
+// ~/document_base_folder/000_includes
+//  Asciidoc attribute includes:                 attributes.asciidoc
+// -----------------------------------------------------------------------------
+
+
+// URLs - Internal references and/or sources on the Internet
+// -----------------------------------------------------------------------------
+tag::urls[]
+end::urls[]
+
+
+// FOOTNOTES, global asciidoc attributes (variables)
+// -----------------------------------------------------------------------------
+tag::footnotes[]
+end::footnotes[]
+
+
+// Tags - Asciidoc attributes used internally
+// -----------------------------------------------------------------------------
+tag::tags[]
+end::tags[]
+
+
+// Data - Data elements for Asciidoctor extensions
+// -----------------------------------------------------------------------------
+tag::data[]
+end::data[]
+
+
+// Images - Images from local include/images folder
+// -----------------------------------------------------------------------------
+tag::images[]
+end::images[]
+
+
+// PRODUCTS, local product information (e.g. release)
+// -----------------------------------------------------------------------------
+tag::products[]
+end::products[]
+
+
+// AUTHORS, local author information (e.g. article)
+// -----------------------------------------------------------------------------
+tag::authors[]
+end::authors[]