j1-template 2024.3.15 → 2024.3.16

data/lib/starter_web/_data/modules/gallery.yml

@@ -288,7 +288,7 @@ settings:
 
           muted:                        false
           preload:                      true
-#         videoStart:                   ["00:00:30", "00:01:30"]                  # start time (hh:mm:ss) for [video1, video2]
+#         videoStart:                   ["00:00:30", "00:01:30"]                # start time (hh:mm:ss) for [video1, video2]
 
           controls:                     true
           controlBar:
@@ -299,11 +299,19 @@ settings:
             volumePanel:
               inline:                   false
 
-            hotkeysPlugin:
+            hotKeysPlugin:
               enabled:                  true
               options:
                 volumeStep:             0.2
 
+            skipButtonsPlugin:
+              enabled:                  true
+              options:
+                forward:                5
+                backward:               5
+                backwardIndex:          0
+                forwardIndex:           1
+
             zoomPlugin:
               enabled:                  true
               options:
@@ -898,18 +906,26 @@ settings:
             volumePanel:
               inline:                   false
 
-            # hotkeysPlugin:
-            #   enabled:                  true
-            #   options:
-            #     volumeStep:             0.2
-            #
-            # zoomPlugin:
-            #   enabled:                  true
-            #   options:
-            #     moveX:                  0
-            #     moveY:                  0
-            #     rotate:                 0
-            #     zoom:                   1
+          # hotKeysPlugin:
+          #   enabled:                  true
+          #   options:
+          #     volumeStep:             0.2
+          #
+          # skipButtonsPlugin:
+          #   enabled:                  true
+          #   options:
+          #     forward:                5
+          #     backward:               5
+          #     backwardIndex:          0
+          #     forwardIndex:           1
+          # 
+          # zoomPlugin:
+          #   enabled:                  true
+          #   options:
+          #     moveX:                  0
+          #     moveY:                  0
+          #     rotate:                 0
+          #     zoom:                   1
 
       # ------------------------------------------------------------------------
       # CSS filter options

data/lib/starter_web/_data/modules/masonry.yml

@@ -557,6 +557,8 @@ settings:
         player:
           enabled:                      true
 
+          # VideoJS
+          # --------------------------------------------------------------------
           videojsPlayer:
             enabled:                    true
 
@@ -580,6 +582,12 @@ settings:
                 options:
                   volumeStep:           0.2
 
+              skipButtonsPlugin:
+                enabled:                  true
+                options:
+                  forward:                15
+                  backward:               15
+
               zoomPlugin:
                 enabled:                true
                 options:
@@ -588,6 +596,8 @@ settings:
                   rotate:               0
                   zoom:                 1
 
+          # Vimeo
+          # --------------------------------------------------------------------
           vimeoPlayer:
             enabled:                    true
             options:
@@ -597,6 +607,9 @@ settings:
 #             portrait:                 0
 #             color:                    var(--md-gray-100)
 
+
+          # Wistia
+          # --------------------------------------------------------------------
           wistiaPlayer:
             enabled:                    true
             options:
@@ -605,6 +618,8 @@ settings:
               muted:                    false
               qualityControl:           false
 
+          # Youtube
+          # --------------------------------------------------------------------
           youTubePlayer:
             enabled:                    true
             options:

data/lib/starter_web/_data/modules/videojs.yml

@@ -0,0 +1,57 @@
+# ------------------------------------------------------------------------------
+# ~/_data/modules/videojs.yml
+# User configuration settings for J1 VideoJS module
+#
+# Product/Info:
+# https://jekyll.one
+#
+# Copyright (C) 2023, 2024 Juergen Adams
+#
+# J1 Template is licensed under the MIT License.
+# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+# -----------------------------------------------------------------------------
+
+# ------------------------------------------------------------------------------
+# Description
+#
+description:
+  title:                                J1 VideoJS
+  scope:                                User settings
+  location:                             _data/modules/videojs.yml
+
+# ------------------------------------------------------------------------------
+# User configuration settings
+#
+settings:
+
+  # ----------------------------------------------------------------------------
+  # VideoJS settings
+  # ----------------------------------------------------------------------------
+  playbackRates:
+    enabled:                            true
+ 
+  # ----------------------------------------------------------------------------
+  # VideoJS Plugin settings
+  # ----------------------------------------------------------------------------
+  plugins:
+
+    hotKeys:
+      enabled:                          true
+
+      # Plugin options
+      # ------------------------------------------------------------------------
+      enableInactiveFocus:              false                                   # mutiple players on same page: reassign focus to the player when the control bar fades out
+#     hotkeysFocusElementFilter:        'e => e.tagName.toLowerCase() === "body"'      
+
+    skipButtons:
+      enabled:                          true
+
+      # Plugin options
+      # ------------------------------------------------------------------------      
+      surroundPlayButton:               true                                    # surround buttons side-by-side the play button
+
+    zoomButtons:
+      enabled:                          true
+
+# ------------------------------------------------------------------------------
+# END config

data/lib/starter_web/_data/resources.yml

@@ -356,8 +356,9 @@ resources:
       data:
         css:                            [
                                           core/css/themes/unolight/bootstrap,
-                                          core/css/icon-fonts/mdib,
                                           core/css/icon-fonts/fontawesome,
+                                          core/css/icon-fonts/mdib,
+                                          
                                           core/css/vendor
                                         ]
         files:                          [ adapter/js/j1.js ]
@@ -1320,6 +1321,7 @@ resources:
       data:
         css:                            [
                                           modules/videojs/css/videojs,
+                                          modules/videojs/css/plugins/controls/skipbuttons,
                                           modules/videojs/css/plugins/controls/zoom,
                                           modules/videojs/css/themes/city,
                                           modules/videojs/css/themes/fantasy,
@@ -1327,18 +1329,19 @@ resources:
                                           modules/videojs/css/themes/sea,
                                           modules/videojs/css/themes/uno
                                         ]
-        files:                          []
+        files:                          [ adapter/js/videojs.js ]
         js:                             [
                                           modules/videojs/js/video,
+                                          modules/videojs/js/plugins/controls/autocaption/autocaption,
                                           modules/videojs/js/plugins/controls/hotkeys/hotkeys,
+                                          modules/videojs/js/plugins/controls/skipbuttons/skipbuttons,
                                           modules/videojs/js/plugins/controls/zoom/zoom,
                                           modules/videojs/js/plugins/players/dm/dailymotion,
+                                          modules/videojs/js/plugins/players/wt/wistia,
                                           modules/videojs/js/plugins/players/vm/vimeo,
                                           modules/videojs/js/plugins/players/yt/youtube
-
-
                                         ]
-        init_function:                  []
+        init_function:                  [ j1.adapter.videojs.init]
 
   # ----------------------------------------------------------------------------
   # TikToc Player, Version v1.0.11
@@ -1918,26 +1921,5 @@ resources:
         js:                             [ modules/amplitudejs/js/amplitude ]
         init_function:                  [ j1.adapter.amplitude.init ]
 
-  # ----------------------------------------------------------------------------
-  # jqueryScrollbar
-  #
-  - name:                               J1 jqueryScrollbar
-    resource:
-      enabled:                          false
-
-      id:                               scrollbars
-      comment:                          Module jqueryScrollbar
-      region:                           body-footer
-      layout:                           [ home, page, post ]
-      required:                         always
-      script_load:                      defer
-      pass_init_data:                   false
-
-      data:
-        css:                            [ modules/jqueryScrollbar/css/scrollbar ]
-        files:                          []
-        js:                             [ modules/jqueryScrollbar/js/scrollbar ]
-        init_function:                  []
-
 # ------------------------------------------------------------------------------
-# END config
+# END config

data/lib/starter_web/_data/templates/feed.xml

@@ -57,7 +57,7 @@
   <id>{{ page.url | absolute_url | xml_escape }}</id>
   <post_limited>{{ limit_posts }}</post_limited>
   <template_name>J1 Theme</template_name>
-  <template_version>2024.3.15</template_version>
+  <template_version>2024.3.16</template_version>
 
   {% assign title = site.title | default: site.name %}
   {% if page.collection != "posts" %}

data/lib/starter_web/_includes/tables/jekyll_variables.asciidoc

@@ -1,3 +1,4 @@
+
 .Jekyll variables (Liquid)
 [cols="3,3a,6a", subs=+macros, options="header", width="100%", role="rtable mt-3"]
 |===

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

@@ -47,7 +47,7 @@ Asciidoctor::Extensions.register do
       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-youtube-tv mdib-24px mr-2"></i> #{attributes['title']} </div>\n) : nil
+      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
       caption_enabled = (caption  = attributes['caption'])  ? true : false
@@ -121,6 +121,9 @@ Asciidoctor::Extensions.register do
                 var vjs_player = document.getElementById("#{video_id}");
 
                 vjs_player.addEventListener('click', function(event) {
+                  event.preventDefault();
+                  event.stopPropagation();
+
                   var scrollOffset = (window.innerWidth >= 720) ? -130 : -110;
 
                   // scroll player to top position

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

@@ -47,10 +47,30 @@ Asciidoctor::Extensions.register do
 
     def process parent, target, attributes
 
+      # ========================================================================
+      # load VideoJS configuration data (as 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;
+
+      # ========================================================================
+      # 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-youtube-tv mdib-24px mr-2"></i> #{attributes['title']} </div>\n) : nil
+      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
       caption_enabled = (caption  = attributes['caption'])  ? true : false
@@ -74,6 +94,10 @@ Asciidoctor::Extensions.register do
               }],
               "controlBar": {
                 "pictureInPictureToggle": false,
+                "skipButtons": {
+                  "backward": 15,
+                  "forward": 15
+                },
                 "volumePanel": {
                   "inline": false
                 }
@@ -85,6 +109,36 @@ 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     = 'native';
+            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}"]`);
 
@@ -101,59 +155,126 @@ 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) {
+                var vjs_player  = document.getElementById("#{video_id}");
+                var appliedOnce = false;
 
+                // add|skip captions (on poster image)
                 if ('#{caption_enabled}' === 'true') {
                   addCaptionAfterImage('#{poster_image}');
                 }
 
-                var appliedOnce = false;
+                // set VideoJS player settings
                 videojs("#{video_id}").ready(function() {
-                  var videojsPlayer = this;
+                  var vjsPlayer = this;
 
-                  // add playbackRates
-                  videojsPlayer.playbackRates([0.5, 1, 1.5, 2]);
+                  // add|skip playbackRates
+                  //
+                  if (videojsConfig.playbackRates.enabled) {
+                    vjsPlayer.playbackRates(vjsPlaybackRates);
+                  }
 
-                  // add hotkeys plugin
-                  videojsPlayer.hotkeys({
-                    enableModifiersForNumbers: false
-                  });
+                  // 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",
 
-                  // add zoom plugin
-                  videojsPlayer.zoomPlugin({
-                    moveX:  0,
-                    moveY:  0,
-                    rotate: 0,
-                    zoom:   1
-                  });
+                      // 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;
+                        }
+                      },
 
-                  // set start position of current video
+                      // 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));
+                      },  
+
+                    });
+                  }
+
+                  // 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)
                   // -----------------------------------------------------------
-                  videojsPlayer.on("play", function() {
+                  vjsPlayer.on("play", function() {
                     var startFromSecond = new Date('1970-01-01T' + "#{attributes['start']}" + 'Z').getTime() / 1000;
                     if (!appliedOnce) {
-                      videojsPlayer.currentTime(startFromSecond);
+                      vjsPlayer.currentTime(startFromSecond);
                       appliedOnce = true;
                     }
                   });
+
                 });
 
-                // scroll to player top position
+                // scroll page to player top position
                 // -------------------------------------------------------------
                 var vjs_player = document.getElementById("#{video_id}");
 
                 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;
+                  const targetDivPosition = targetDiv.offsetTop;                  
+                  var scrollOffset        = (window.innerWidth >= 720) ? -130 : -110;
+
+                  // scroll page to the players top position
+                  // -------------------------------------------------------------                  
                   window.scrollTo(0, targetDivPosition + scrollOffset);
+
                 }); // END EventListener 'click'
 
                 clearInterval(dependencies_met_page_ready);

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

@@ -48,7 +48,7 @@ Asciidoctor::Extensions.register do
       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-youtube-tv mdib-24px mr-2"></i> #{attributes['title']} </div>\n) : nil
+      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
       caption_enabled = (caption  = attributes['caption'])  ? true : false
@@ -121,6 +121,9 @@ Asciidoctor::Extensions.register do
                 var vjs_player = document.getElementById("#{video_id}");
 
                 vjs_player.addEventListener('click', function(event) {
+                  event.preventDefault();
+                  event.stopPropagation();
+
                   var scrollOffset = (window.innerWidth >= 720) ? -130 : -110;
 
                   // scroll player to top position