j1-template 2024.3.14 → 2024.3.16

data/lib/starter_web/pages/public/tools/previewer/preview_bootstrap_theme.adoc

@@ -85,7 +85,7 @@ resource_options:
 :indicators:                            true
 :indicators_alerts:                     true
 :indicators_badges:                     true
-:scrollbars:                            false
+:scrollbars:                            true
 :progress:                              true
 :progress_basic:                        true
 :progress_contextual_alternatives:      true
@@ -2119,7 +2119,7 @@ browser.
 }
 ----
 
-For the following flavours are implemented.
+The following scrollers are available for the J1 Template.
 
 [subs="attributes"]
 ++++
@@ -2169,10 +2169,9 @@ For the following flavours are implemented.
 </div>
 
 <!-- script>
-<!-- NOTE: $.browser.webkit does NOT exists !!! -->
-if (!$.browser.webkit) {
-  $('.wrapper').html('<p>Sorry! Non webkit browser detected. Scrollbars <b>not</b> displayed :</p>');
-}
+  if (!$.browser.webkit) {
+    $('.wrapper').html('<p>Sorry! Non webkit browser detected. Scrollbars <b>not</b> displayed :</p>');
+  }
 </script -->
 ++++
 endif::[]

data/lib/starter_web/pages/public/tools/previewer/preview_videojs.adoc

@@ -0,0 +1,203 @@
+---
+title:                                  VideoJS
+title_extention:                        Custom Video Players
+tagline:                                Custom Video Players
+
+date:                                   2024-11-10
+#last_modified:                         2024-01-01
+
+description: >
+                                        The J1 Template support playing video on web pages
+                                        by HTML5 Video, the new standard of HTML to show
+                                        videos on web pages.
+keywords: >
+                                        open source, free, template, jekyll, jekyllone, web,
+                                        sites, static, jamstack, bootstrap,
+                                        html, html5, video, support, flash player,
+                                        quicktime, silverlight
+
+categories:                             [ Previewer ]
+tags:                                   [ Module, Video ]
+
+image:
+  path:                                 /assets/image/icons/videojs/videojs-poster.png
+  width:                                1920
+  height:                               1280
+
+regenerate:                             false
+personalization:                        true
+permalink:                              /pages/public/tools/previewer/videojs/
+
+resources:                              [ videojs ]
+resource_options:
+  - attic:
+      slides:
+        - url:                          /assets/image/icons/videojs/videojs-poster.png
+          alt:                          VideoJS Poster
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+// :images-dir:                         {imagesdir}/pages/roundtrip/100_present_images
+
+// Attributes for section control
+//
+:vjs_plugin_info:                       true
+:native_video:                          false
+:yt_video:                              false
+:vm_video:                              false
+:wt_video:                              true
+
+//  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"]
+The J1 Template support playing audio on web pages by HTML5 Video, the new
+standard of HTML to show videos on webpages. Modern browsers support the
+audio tag `<audio>` for the new HTML5 audio audio standard.
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+
+ifeval::[{vjs_plugin_info} == true]
+[role="mt-5"]
+== VJS Plugins
+
+The J1 Template provides a collection of plugins to enhance VJS players, such
+as by providing useful functions like additional buttons or advanced keyboard
+support to control a player by defined keys (hotkeys).
+
+[role="mt-4"]
+=== hotKeys
+
+The *hotkeys* plugin for Video.js enables *keyboard hotkeys* when the
+*player has focus*.
+
+* `Space bar` toggles play|pause.
+* `Right|Left Arrow keys` seek the video forwards and back.
+* Up and Down Arrow keys increase and decrease the volume.
+* `M key` toggles mute/unmute.
+* `F key` toggles fullscreen off and on. Does not work in Internet Explorer,
+  it seems to be a limitation where scripts cannot request fullscreen without
+  a mouse click:
+* Double-clicking with the mouse toggles fullscreen off and on.
+* `Number keys` from *1-9* skip to a percentage of the video:
+  1 is `10%` and 9 is `90%`.
+
+[role="mt-4"]
+=== skipbuttons
+
+The plugin *skipbuttons* add *VJS seek buttons* to the control bar. These
+buttons allow the user to skip forward or back by a configured number of
+seconds.
+
+
+[role="mt-4"]
+=== zoomButtons
+
+Adds a zoom button to player controlbar.
+
+endif::[]
+
+ifeval::[{build_in_video} == true]
+[role="mt-4"]
+== Built-in Player
+
+All modern browsers universally support the video tag `<video>`. This tag
+offers an out-of-the-box framework for decoding and displaying video content
+without loading *external players*.
+
+.MP4 Video, Peck Pocketed
+video::/assets/video/html5/peck_pocketed.mp4[poster="/assets/video/poster/html5/peck_pocketed.jpg", opts="" role="mt-4 mb-5"]
+endif::[]
+
+
+[role="mt-5"]
+== VJS Players
+
+VideoJS is a *free-to-use* open-source JavaScript framework for building
+custom video players for the web. Implementing VideoJS for the J1 Template
+supports local video and several platforms, such as YouTube, Vimeo, Wistia,
+or Dailymotion, for presenting videos *online*.
+
+For *online sources*, VideoJS uses plugins, such as the so-called VJS
+Playback Technology. With the help of *plugins*, it is possible to present
+*different media* using the *same player*, the same look and feel for a
+better user experience.
+
+ifeval::[{native_video} == true]
+[role="mt-4"]
+=== Native Video
+
+VideoJS provides a flexible and customizable platform for displaying and
+controlling MPEG 4 video content on websites and web applications.
+
+.Rolling Wild · MP4 Video
+videojs::/assets/video//html5/rolling_wild.mp4[poster="/assets/video/poster/html5/rolling_wild.jpg", opts="" role="mt-4 mb-5"]
+endif::[]
+
+
+ifeval::[{yt_video} == true]
+[role="mt-4"]
+=== YouTube
+
+YouTube is a popular online video-sharing platform that allows users to
+upload, view, share, and comment on videos. The platform provides services
+for people and organizations to publish various video content.
+
+.Fortnight (feat. Post Malone, Official Music Video) · Taylor Swift
+// youtube::q3zqJs7JUCQ[start="00:01:00" poster="//img.youtube.com/vi/q3zqJs7JUCQ/maxresdefault.jpg" role="mt-4 mb-5"]
+youtube::q3zqJs7JUCQ[poster="//img.youtube.com/vi/q3zqJs7JUCQ/maxresdefault.jpg"]
+endif::[]
+
+ifeval::[{wt_video} == true]
+[role="mt-5"]
+=== Wistia
+
+Wistia is a marketing software and video hosting platform for business-to-business
+marketers. Free or paid plans are available. While Wistia may not be the
+*Big Man on Campus*, like Vimeo, still brings valuable functionality and
+should be considered a viable video platform.
+
+.Platform Intro
+// wistia::29b0fbf547[poster="/assets/video/poster/wistia/wistia-black.jpg" role="mt-4 mb-4"]
+wistia::29b0fbf547[poster="auto" role="mt-4 mb-4"]
+// wistia::29b0fbf547[role="mt-4 mb-4"]
+endif::[]
+
+ifeval::[{vm_video} == true]
+[role="mt-5"]
+== Vimeo
+
+Vimeo is an sharing platform that allows users to upload, share, and view
+video content. It was founded in 2004 by a group of filmmakers and has
+since grown into a popular platform for individuals and businesses to
+showcase their videos.
+
+.Forever 21 - Kick It Old School
+vimeo::179528528[poster="/assets/video/poster/vimeo/kick_it_old_school.jpg" role="mt-4 mb-5"]
+// vimeo::179528528[poster="auto" role="mt-4 mb-5"]
+// vimeo::179528528[role="mt-4 mb-5"]
+
+[role="mb-7"]
+.Video controls
+[CAUTION]
+====
+For the *VJS Vimeo Tech*, native vjs controls (controllbar) are currently
+*NOT* supported. Instead, the controllbar of the Vimeo Player is shown.
+====
+endif::[]

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

@@ -31,7 +31,7 @@ permalink:                              /pages/public/tour/asciidoc_extensions/
 
 resources:                              [
                                           gallery, iconify, lightbox,
-                                          lightgallery, rouge, videojs
+                                          lightgallery, videojs
                                         ]
 resource_options:
   - attic:

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

@@ -28,7 +28,7 @@ image:
 regenerate:                             false
 permalink:                              /pages/public/tour/themes/
 
-resources:                              [ lightbox, rouge ]
+resources:                              [ lightbox ]
 resource_options:
   - attic:
       slides:

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

@@ -27,7 +27,7 @@ image:
 regenerate:                             true
 permalink:                              /pages/public/tour/rouge/
 
-resources:                              [ rouge ]
+resources:                              []
 resource_options:
   - attic:
       slides:

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

@@ -28,7 +28,7 @@ image:
 regenerate:                             false
 permalink:                              /pages/public/tour/modals/
 
-resources:                              [ rouge ]
+resources:                              []
 resource_options:
   - attic:
       slides:

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

@@ -148,23 +148,14 @@ lorem:sentences[5]
 [role="mt-5"]
 == Compact Player
 
-A complex component like an audio player on a web page, *compact*
-typically refers to a design or layout that minimizes the component's
-space while maintaining its functionality and usability.
-
-////
-The *compact design* for an audio player is an efficient approach that
-involves condensing the player controls and display elements into a smaller
-area. It uses icons or symbols instead of text labels where possible, and
-possibly hides less frequently used features behind menus or dropdowns to
-reduce clutter, thereby instilling confidence in its effectiveness.
-
-A *compact* design allows the audio player to fit neatly within the web
-page's layout without overwhelming or dominating the content around it.
-The design aims to balance functionality and space efficiency, ensuring
-users can easily access and control the audio playback without sacrificing
-too much screen space.
-////
+The design of a *Compact player* is an efficient approach that involves
+condensing the player controls and display elements into a smaller area.
+It allows the audio player to fit neatly within the web page's layout without
+overwhelming or dominating the content around it.
+
+The player aims to balance functionality and space efficiency, ensuring users
+can easily access and control the audio playback without sacrificing too much
+screen space or placing  multiple players side-by-side.
 
 .Emancipator · From Dusk To Dawn
 amplitude::free_emancipator_compact[role="mt-3 mb-5"]
@@ -172,36 +163,46 @@ amplitude::free_emancipator_compact[role="mt-3 mb-5"]
 .Royalty Free Music · Disco 80th
 amplitude::free_disco_compact[role="mt-3 mb-5"]
 
-lorem:sentences[5]
-
 
 [role="mt-5"]
 == Large Player
 
-lorem:sentences[5]
+A complex component, like an audio player on a web page, typically refers
+to a design or layout that minimizes the component's space while maintaining
+its functionality and usability.
+
+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
+compact player, but all controls are displayed in a single window; there is
+no need to open other widgets.
 
 .Emancipator · From Dusk To Dawn
-amplitude::free_emancipator_large[role="mt-3 mb-5"]
+amplitude::free_emancipator_large[role="mt-4 mb-5"]
 
 .Royalty Free Music · Disco 80th
-amplitude::free_disco_large[role="mt-3 mb-5"]
+amplitude::free_disco_large[role="mt-4 mb-5"]
+
+// lorem:sentences[5]
+
+// .Spontanorama 2024 (large)
+// amplitude::spontanorama_2024_large[role="mt-4 mb-5"]
 
 
 [role="mt-5"]
 == What next
 
 I hope, you've enjoyed exploring the possibilities J1 offers for playing
-digital audio content. But much, much more can the J1 do for your web in
-terms of multimedia.
+digital audio content. But much, much more can the J1 Templte do for your
+web in terms of multimedia.
 
-The J1 Template support playing video on web pages by using the
-HTML5 video support, the new standard of HTML. HTML5 implements a
-pure HTML way to show play video on the web. Modern browsers
-support the the video tag `<video>` for the current HTML5 standard.
+The Template support playing video on web pages by using the *HTML5* video
+support, the new standard of HTML. It implements a pure HTML way to playback
+videos on the web. All Modern browsers support the the HTML video tag `<video>`
+for the current HTML standard.
 
 The previous proprietary de facto standard software like a Flash Player,
 Quicktime, or Silverlight is no longer needed as the Theme JekyllOne provides
 HTML5 video for local content and from online sources on the Internet.
 
-[role="mb-7"]
+[role="mb-8"]
 Incredible? See the next example page link:{url-tour--present-video}[Video Player].

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

@@ -25,37 +25,22 @@ image:
   width:                                1920
   height:                               1280
 
+compress:                               false
 personalization:                        true
 regenerate:                             false
 permalink:                              /pages/public/tour/present_video/
 
 resources:                              [
                                           gallery, lightgallery, masonry,
-                                          rouge, videojs, vimeo-player
+                                          videojs, vimeo-player
                                         ]
 resource_options:
   - toccer:
       collapseDepth:                    3
   - attic:
       slides:
-        # Broadway Underground - still image (animate default)
-        - url:                          /assets/video/headers/present_videos/still/underground-broadway.jpg
-          alt:                          Broadway Underground
-          title:                        Video Player
-          tagline:                      Playback Video
-        # Broadway Underground - FAYETTE ST
-        - url:                          /assets/video/headers/present_videos/underground-broadway.mp4
-          alt:                          Broadway Underground Video
-          title:                        Video Player
-          tagline:                      Playback Video
-          isVideo:                      true
-          loop:                         false
-          duration:                     6000
-        # Broadway Underground - still image (animate random)
-        - url:                          /assets/video/headers/present_videos/still/underground-broadway.jpg
-          alt:                          Broadway Underground
-          title:                        Video Player
-          tagline:                      Playback Video
+        - url:                          /assets/image/modules/attics/lianhao-1920x1280.jpg
+          alt:                          Playback Video
 ---
 
 // Page Initializer
@@ -72,6 +57,17 @@ resource_options:
 :time-de--string:                       Minuten
 :time-de--description:                  Lesezeit
 
+
+// Attribute settings for section control
+//
+:ytp_rhythm:                            true
+:ytp_sky_elements:                      true
+:dm_video:                              false
+:vm_video:                              true
+:masonry:                               true
+:dm_gallery:                            true
+:vm_gallery:                            true
+
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
 {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
@@ -115,8 +111,7 @@ a built-in multimedia framework for decoding and displaying video content.
 Two types of video sources are supported:
 
 * Video files from local folders (your webspace)
-* Video files from Online sources (on the Internet) like YouTube, Wistia,
-  Dailymotion etc.
+* Video files from online sources (on the Internet) like YouTube, Vimeo, etc.
 
 Standalone video players embedded in websites are software components that
 integrate and play video sources directly within a page or application. These
@@ -130,7 +125,7 @@ without loading *external players*.
 
 ++++
 <div class="video-title">
-  <i class="mdib mdib-youtube-tv mdib-24px mr-2"></i>
+  <i class="mdib mdib-video mdib-24px mr-2"></i>
   Peck Pocketed · MP4 Video
 </div>
 ++++
@@ -138,7 +133,7 @@ video::/assets/video//html5/peck_pocketed.mp4[poster="/assets/video/poster/html5
 
 
 [role="mt-5"]
-== VideoJS Player
+== VideoJS
 
 VideoJS is a *free-to-use* open-source JavaScript framework for building
 custom video players for the web. Implementing VideoJS for the J1 Template
@@ -151,7 +146,7 @@ Playback Technology. With the help of *plugins*, it is possible to present
 better user experience.
 
 [role="mt-4"]
-=== Local Video
+=== Native Video
 
 VideoJS provides a flexible and customizable platform for displaying and
 controlling MPEG 4 video content on websites and web applications.
@@ -166,12 +161,35 @@ YouTube is a popular online video-sharing platform that allows users to
 upload, view, share, and comment on videos. The platform provides services
 for people and organizations to publish various video content.
 
-.Best Auditions · AGT 2024
+The season 19 (2024) of _America's Got Talent_ (AGT) is special. In the long
+history of AGT, only a few *Goldern Buzzers* were given. In 2024, this is
+different - for good reasons. See a compilation on YouTube of the very best
+auditions ever.
+
+.Best Auditions · AGT 2024 
 youtube::4VSBJU52UvM[poster="//img.youtube.com/vi/4VSBJU52UvM/maxresdefault.jpg" role="mt-4 mb-5"]
 
-// .Fortnight (feat. Post Malone, Official Music Video) · Taylor Swift
-// youtube::q3zqJs7JUCQ[poster="//img.youtube.com/vi/q3zqJs7JUCQ/maxresdefault.jpg" role="mt-4 mb-5"]
+ifeval::[{ytp_rhythm} == true]
+Dog Dancing is presented quite often on stage. Like AGT season 18, Adrian Stoica
+presented his dog Hurricane https://www.youtube.com/watch?v=ENGRnUN1UKQ)[Youtube, {browser-window--new}].
+But see Roni Sagi - an Israeli dog trainer - and her dog Rhythm. This is Dog
+Traing the next level.
+
+.Roni Sagi & Rhythm, ALL Performances · AGT 2024 
+youtube::1J2qz6B-PFY[poster="//img.youtube.com/vi/1J2qz6B-PFY/maxresdefault.jpg" role="mt-4 mb-5"]
+endif::[]
+
+ifeval::[{ytp_sky_elements} == true]
+Sky Elements uses the night sky as a canvas on which anything is possible.
+A large group of Drones is painting lights in the sky to reflect the most
+captivating narratives. 
+
+.Sky Elements, ALL Performances · AGT 2024 
+youtube::cN8IrZUhPtc[poster="//img.youtube.com/vi/cN8IrZUhPtc/maxresdefault.jpg" role="mt-4 mb-5"]
+endif::[]
 
+
+ifeval::[{dm_video} == true]
 [role="mt-4"]
 === Dailymotion
 
@@ -182,18 +200,20 @@ video.
 
 .Beginner Mat Pilates · SELF Channel
 dailymotion::x87ycik[poster="/assets/video/poster/dailymotion/pilates.jpg" role="mt-4 mb-5"]
+endif::[]
 
+ifeval::[{vm_video} == true]
 [role="mt-4"]
 === Vimeo
-
+ 
 Vimeo is an sharing platform that allows users to upload, share, and view
 video content. It was founded in 2004 by a group of filmmakers and has
 since grown into a popular platform for individuals and businesses to
-showcase their videos. Vimeo is known for its emphasis on high-quality videos
-and creative expression.
+showcase their videos. Vimeo is known for its emphasis on high-quality 
+video and creative expression.
 
 .Kick It Old School · Forever 21
-vimeo::179528528[poster="/assets/video/poster/vimeo/kick_it_old_school.jpg" role="mt-4 mb-5"]
+vimeo::179528528[poster="/assets/video/poster/vimeo/kick_it_old_school.jpg" role="mt-4 mb-4"]
 // vimeo::179528528[poster="auto" role="mt-4 mb-5"]
 // vimeo::179528528[role="mt-4 mb-5"]
 
@@ -203,7 +223,7 @@ vimeo::179528528[poster="/assets/video/poster/vimeo/kick_it_old_school.jpg" role
 For the *VJS Vimeo Tech*, native vjs controls (controllbar) are currently
 *NOT* supported. Instead, the controllbar of the Vimeo Player is shown.
 ====
-
+endif::[]
 
 [role="mt-5"]
 == Galleries of Video
@@ -230,6 +250,7 @@ how to use lightGallery for *commercial* websites and projects.
 Find below examples of video galleries of locally stored (MP4) video resources
 and video content provided online.
 
+ifeval::[{masonry} == true]
 [role="mt-4"]
 === Masonry
 
@@ -237,7 +258,7 @@ Masonry for J1 Template is a great tool for creating dynamic video galleries.
 The module makes creating a gallery to display videos of different types easy.
 
 .Mixed Video · Masonry + LightGallery
-masonry::mixed_video_example[role="mt-4 mb-5"]
+masonry::mixed_video_example[role="mt-4 mb-4"]
 
 [role="mb-5"]
 .More about Masonry
@@ -246,14 +267,16 @@ masonry::mixed_video_example[role="mt-4 mb-5"]
 Find more on how the Masonry module can be used on the
 link:{url-j1-masonry-previewer}[Masonry Preview, {browser-window--new}] page.
 ====
+endif::[]
 
 [role="mt-4"]
 [[local-video-2]]
-=== Local video
+=== Local Video
 
 Videos created by a digicam or a mobile can be played by J1 Template using
 the lightGallery integration. Present videos you have made at it's best.
 
+[role="mb-5"]
 [NOTE]
 ====
 The current file *size* of local video media files is limited to *50 MegaByte*.
@@ -265,10 +288,10 @@ HD 720p (1280x720 pixel).
 .Local MP4 Video · Justified Gallery + LightGallery
 gallery::jg_video_html5[role="mt-4 mb-5"]
 
+ifeval::[{yt_gallery} == true]
 [role="mt-4"]
 === YouTube
 
-[role="mb-4"]
 The community at link:{url-youtube--home}[YouTube, {browser-window--new}]
 is large, with over 1 billion users that watch hundreds of millions of
 hours of content every day. The number of YouTube channels is enormous.
@@ -280,7 +303,7 @@ new studio album *The Tortured Poets Department: The Anthology*, released on
 April 19, 2024.
 
 .Taylor Swift - The Tortured Poets Department · Justified Gallery + LightGallery
-gallery::jg_video_online_taylor_swift[role="mt-5 mb-4"]
+gallery::jg_video_online_taylor_swift[role="mt-4 mb-4"]
 
 [role="mb-5"]
 [TIP]
@@ -288,7 +311,9 @@ gallery::jg_video_online_taylor_swift[role="mt-5 mb-4"]
 An *anthology* is a collection of selected texts or, in a broader sense,
 a thematic compilation of literary or musical works.
 ====
+endif::[]
 
+ifeval::[{vm_gallery} == true]
 [role="mt-4"]
 === Vimeo
 
@@ -314,7 +339,9 @@ without advertising.
 
 .Forever 21 · Justified Gallery + LightGallery
 gallery::jg_video_online_vimeo[role="mb-5"]
+endif::[]
 
+ifeval::[{dm_gallery} == true]
 [role="mt-4"]
 === Dailymotion
 
@@ -329,7 +356,7 @@ every video.
 
 .SELF Chanel · Justified Gallery + LightGallery
 gallery::jg_video_online_dailymotion[role="mt-4 mb-5"]
-
+endif::[]
 
 [role="mt-5"]
 == What next
@@ -351,5 +378,4 @@ something like images. To see how text could be presented is great for modern
 responsive websites.
 
 [role="mb-7"]
-Find out how it works and go for:
-link:{url-tour--typography}[Typography], then.
+Find out how it works and go for link:{url-tour--typography}[Typography], then.