j1-template 2024.3.13 → 2024.3.14

data/lib/starter_web/pages/public/tour/{playback_audio.adoc → play_audio.adoc}

@@ -1,188 +1,207 @@
----
-title:                                  Audio Player
-title_extention:                        Playback Audio using J1 Template
-tagline:                                Playback Audio
-
-date:                                   2024-04-16
-#last_modified:                         2024-01-01
-
-description: >
-                                        J1 Template provides playing audio on web pages
-                                        by HTML5 and supports custom players created
-                                        by AmplitudeJS to playback audio individually.
-keywords: >
-                                        open source, free, template, jekyll, jekyllone, web,
-                                        sites, static, jamstack, bootstrap, html, html5,
-                                        asciidoctor, audio
-
-categories:                             [ Tour ]
-tags:                                   [ Audio, Module ]
-
-image:
-  path:                                 /assets/image/modules/attics/1920x1280/alexey-ruban.jpg
-  width:                                1920
-  height:                               1280
-
-tts:                                    true
-comments:                               false
-exclude_from_search:                    false
-regenerate:                             false
-personalization:                        true
-permalink:                              /pages/public/tour/playback_audio/
-
-resources:                              [ amplitudejs ]
-resource_options:
-  - toccer:
-      collapseDepth:                    2
-  - attic:
-      slides:
-        - url:                          /assets/image/modules/attics/1920x1280/alexey-ruban.jpg
-          alt:                          Photo by Alexey Ruban on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Alexey Ruban
-            href:                       //unsplash.com/de/@intelligenciya
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// 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="all" %}
-
-// See: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs
-// See: https://docs.asciidoctor.org/asciidoc/latest/macros/audio-and-video/
-//
-[role="dropcap"]
-The Audio tag in HTML5 is a great way to add audio media to web pages.
-However, the browser fully controls the audio playback interface,
-which can limit or even break a page's design if audio media is used.
-
-AmplitudeJS for J1 Template offers a straightforward solution for web
-developers. It allows them to easily customize the appearance of their audio
-players without the need for complex scripting. By leveraging J1 Template
-and Amplitude's API, web designers can craft unique interfaces that define
-the visual and functional aspects of a player's audio control elements.
-
-mdi:clock-time-five-outline[24px, md-gray mt-4 mb-5 mr-2]
-*5-10 Minutes* to read
-
-
-[role="mt-5"]
-== HTML 5 Audio
-
-Audio players can easily be embedded in web pages using the *audio* tag
-`<audio>.` Browsers have a built-in framework for decoding and playing audio
-content directly within a webpage.
-
-.Ambient Piano
-audio::/assets/audio/sound-effects/ambient-piano.mp3[role="mt-4 mb-5"]
-
-
-[role="mt-5"]
-== AmplitudeJS Audio
-
-The J1 Template implements custom players based on the (default) theme Uno.
-The color scheme used matches the look and feel of the template to preserve
-the page design.
-
-Three types of AmplitudeJS players are build-in for the J1 template system:
-
-* Mini Player
-* Compact Player (default player)
-* Large Player
-
-[role="mt-4"]
-[NOTE]
-====
-Amplitude players for the J1 Template are mobile-friendly. Instead of
-clicking on the appropriate elements, touch events are applied to all
-mobile devices.
-====
-
-
-[role="mt-5"]
-== Mini Player
-
-In the context of complex components on a web page, like an audio player,
-a mini player refers to a minimized version of full players. It typically
-offers basic playback controls, such as pause, play, and
-volume adjustment, while taking up less screen space.
-
-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
-websites with embedded audio content.
-
-.Emancipator · From Dusk To Dawn
-amplitude::free_emancipator_mini[role="mt-3 mb-5"]
-
-.Royalty Free Music · Disco 80th
-amplitude::free_disco_mini[role="mt-3 mb-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.
-
-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.
-
-.Emancipator · From Dusk To Dawn
-amplitude::free_emancipator_compact[role="mt-3 mb-5"]
-
-.Royalty Free Music · Disco 80th
-amplitude::free_disco_compact[role="mt-3 mb-5"]
-
-
-[role="mt-5"]
-== Large Player
-
-A large player supports a design for displaying all components but requires
-the full (horizontal) space in a webpage. This player type makes it easy for
-all users to navigate and plaback all titles provided.
-
-.Emancipator · From Dusk To Dawn
-amplitude::free_emancipator_large[role="mt-3 mb-5"]
-
-.Royalty Free Music · Disco 80th
-amplitude::free_disco_large[role="mt-3 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.
-
-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 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"]
-Incredible? See the next examples on how to playback video on the page
-link:{url-tour--playback-video}[Video Player].
+---
+title:                                  Audio Player
+title_extention:                        Playback Audio using J1 Template
+tagline:                                Playback Audio
+
+date:                                   2024-04-16
+#last_modified:                         2024-01-01
+
+description: >
+                                        J1 Template provides playing audio on web pages
+                                        by HTML5 and supports custom players created
+                                        by AmplitudeJS to playback audio individually.
+keywords: >
+                                        open source, free, template, jekyll, jekyllone, web,
+                                        sites, static, jamstack, bootstrap, html, html5,
+                                        asciidoctor, audio
+
+categories:                             [ Tour ]
+tags:                                   [ Audio, Module ]
+
+image:
+  path:                                 /assets/image/modules/attics/1920x1280/alexey-ruban.jpg
+  width:                                1920
+  height:                               1280
+
+tts:                                    true
+comments:                               false
+exclude_from_search:                    false
+regenerate:                             false
+personalization:                        true
+permalink:                              /pages/public/tour/present_audio/
+
+resources:                              [ amplitudejs ]
+resource_options:
+  - toccer:
+      collapseDepth:                    2
+  - attic:
+      slides:
+        - url:                          /assets/image/modules/attics/1920x1280/alexey-ruban.jpg
+          alt:                          Photo by Alexey Ruban on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Alexey Ruban
+            href:                       //unsplash.com/de/@intelligenciya
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:time-num--string:                      5-10
+:time-en--string:                       Minutes
+:time-en--description:                  to read
+:time-de--string:                       Minuten
+:time-de--description:                  Lesezeit
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+// See: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs
+// See: https://docs.asciidoctor.org/asciidoc/latest/macros/audio-and-video/
+//
+[role="dropcap"]
+The Audio tag in HTML5 is a great way to add audio media to web pages.
+However, the browser fully controls the audio playback interface,
+which can limit or even break a page's design if audio media is used.
+
+AmplitudeJS for J1 Template offers a straightforward solution for web
+developers. It allows them to easily customize the appearance of their audio
+players without the need for complex scripting. By leveraging J1 Template
+and Amplitude's API, web designers can craft unique interfaces that define
+the visual and functional aspects of a player's audio control elements.
+
+[subs=attributes]
+++++
+<div class="video-title">
+  <i class="mdib mdib-clock-outline mdib-24px mr-2"></i>
+  {time-num--string} {time-en--string} {time-en--description}
+</div>
+++++
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+[role="mt-5"]
+== HTML 5 Audio
+
+Audio players can easily be embedded in web pages using the *audio* tag
+`<audio>.` Browsers have a built-in framework for decoding and playing audio
+content directly within a webpage.
+
+.Ambient Piano
+audio::/assets/audio/sound-effects/ambient-piano.mp3[role="mt-4 mb-5"]
+
+
+[role="mt-5"]
+== AmplitudeJS Audio
+
+The J1 Template implements custom players based on the (default) theme Uno.
+The color scheme used matches the look and feel of the template to preserve
+the page design.
+
+Three types of AmplitudeJS players are build-in for the J1 template system:
+
+* Mini Player
+* Compact Player (default payer)
+* Large Player
+
+[role="mt-4"]
+[NOTE]
+====
+Amplitude players for the J1 Template are mobile-friendly. Instead of
+clicking on the appropriate elements, touch events are applied to all
+mobile devices.
+====
+
+
+[role="mt-5"]
+== Mini Player
+
+In the context of complex components on a web page, like an audio player,
+a mini player refers to a minimized version of full players. It typically
+offers basic playback controls, such as pause, play, and
+volume adjustment, while taking up less screen space.
+
+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
+websites with embedded audio content.
+
+.Emancipator · From Dusk To Dawn
+amplitude::free_emancipator_mini[role="mt-3 mb-5"]
+
+.Royalty Free Music · Disco 80th
+amplitude::free_disco_mini[role="mt-3 mb-5"]
+
+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.
+////
+
+.Emancipator · From Dusk To Dawn
+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]
+
+.Emancipator · From Dusk To Dawn
+amplitude::free_emancipator_large[role="mt-3 mb-5"]
+
+.Royalty Free Music · Disco 80th
+amplitude::free_disco_large[role="mt-3 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.
+
+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 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"]
+Incredible? See the next example page link:{url-tour--present-video}[Video Player].

data/lib/starter_web/pages/public/tour/{playback_video.adoc → play_video.adoc}

@@ -25,10 +25,9 @@ image:
   width:                                1920
   height:                               1280
 
-compress:                               false
 personalization:                        true
 regenerate:                             false
-permalink:                              /pages/public/tour/playback_video/
+permalink:                              /pages/public/tour/present_video/
 
 resources:                              [
                                           gallery, lightgallery, masonry,
@@ -39,9 +38,22 @@ resource_options:
       collapseDepth:                    3
   - attic:
       slides:
-        # Tylor Swift Concert Munich 2024
-        - url:                          //img.youtube.com/vi/Zu7EA3aA9Z4/maxresdefault.jpg
-          alt:                          Tylor Swift Concert Munich 2024
+        # 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
 ---
@@ -54,6 +66,11 @@ resource_options:
 // Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
+:time-num--string:                      5-10
+:time-en--string:                       Minutes
+:time-en--description:                  to read
+:time-de--string:                       Minuten
+:time-de--description:                  Lesezeit
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
@@ -76,13 +93,17 @@ software, like _Flash Player_, _Quicktime_, _Silverlight_ is no longer needed
 as the J1 Template provides audio and video support for local video files
 and online sources.
 
-mdi:clock-time-five-outline[24px, md-gray mt-5 mr-2]
-*10-15 Minutes* to read
+[subs=attributes]
+++++
+<div class="video-title">
+  <i class="mdib mdib-clock-outline mdib-24px mr-2"></i>
+  {time-num--string} {time-en--string} {time-en--description}
+</div>
+++++
 
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-
 [role="mt-5"]
 == HTML 5 Player
 // See: https://docs.asciidoctor.org/asciidoc/latest/macros/audio-and-video/
@@ -102,12 +123,18 @@ integrate and play video sources directly within a page or application. These
 players are essential for all current sites and apps. Embedded players provide
 a seamless and user-friendly way to present multimedia content to your audience.
 
+[role="mb-4"]
 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"]
+++++
+<div class="video-title">
+  <i class="mdib mdib-youtube-tv mdib-24px mr-2"></i>
+  Peck Pocketed · MP4 Video
+</div>
+++++
+video::/assets/video//html5/peck_pocketed.mp4[poster="/assets/video/poster/html5/peck_pocketed.jpg", opts="" role="mt-1 mb-5"]
 
 
 [role="mt-5"]
@@ -129,7 +156,7 @@ better user experience.
 VideoJS provides a flexible and customizable platform for displaying and
 controlling MPEG 4 video content on websites and web applications.
 
-.MP4 Video · Rolling Wild
+.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"]
 
 [role="mt-4"]
@@ -139,34 +166,11 @@ 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.
 
-See below Adele's opening concert in Munich's specially built open-air arena,
-and tens of thousands celebrated with her. It is an extraordinary concert
-series: a pop-up stadium tailored to her needs was built specifically for her
-and long catwalks bring Adele closer to her fans.
-
-The arena, shaped like an amphitheater, is decorated in black and white and
-is dominated by a 220-meter-long and 17-meter-high screen. Find below the first
-45 minutes of her opening concert in August 2024 at the Adele World, Munich.
+.Best Auditions · AGT 2024
+youtube::4VSBJU52UvM[poster="//img.youtube.com/vi/4VSBJU52UvM/maxresdefault.jpg" role="mt-4 mb-5"]
 
-.Adele Concert, August 2024 · Adele World Munich
-youtube::KIvU5etrbSM[poster="//img.youtube.com/vi/KIvU5etrbSM/maxresdefault.jpg" role="mt-4 mb-5"]
-
-Pop icon Taylor Swift thrilled more than 70,000 fans at a sold-out concert
-at the Olympic Stadium in Munich. But the enthusiasm for the US star
-extended far beyond the stadium.
-
-Taylor Swift recognized the unusual situation in Munich and, at the
-beginning of her concert, greeted not only the fans in the stadium
-but also the thousands who had gathered in the park in front of the
-stadium.
-
-That evening, Taylor Swift took her fans through her long career. For
-over three hours, the pop queen played 45 songs, album by album, the
-so-called Eras. Taylor Swift concluded the show with a spectacular
-fireworks display. See impressions of this emotional event below.
-
-.Taylor Swift Concert, August 2024 · Olympic Stadium in Munich
-youtube::Zu7EA3aA9Z4[poster="//img.youtube.com/vi/Zu7EA3aA9Z4/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"]
 
 [role="mt-4"]
 === Dailymotion
@@ -176,7 +180,7 @@ high-quality advertisers through a proprietary advertising system.
 Like YouTube, videos can be watched for free, but ads are shown on every
 video.
 
-.SELF Channel · Beginner Mat Pilates
+.Beginner Mat Pilates · SELF Channel
 dailymotion::x87ycik[poster="/assets/video/poster/dailymotion/pilates.jpg" role="mt-4 mb-5"]
 
 [role="mt-4"]
@@ -188,7 +192,7 @@ 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.
 
-.Forever 21 · Kick It Old School
+.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="auto" role="mt-4 mb-5"]
 // vimeo::179528528[role="mt-4 mb-5"]
@@ -232,7 +236,7 @@ and video content provided online.
 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
+.Mixed Video · Masonry + LightGallery
 masonry::mixed_video_example[role="mt-4 mb-5"]
 
 [role="mb-5"]
@@ -258,7 +262,7 @@ Using a modern MP4 Encoder for video compression, a video will play around
 HD 720p (1280x720 pixel).
 ====
 
-.Local MP4 Video
+.Local MP4 Video · Justified Gallery + LightGallery
 gallery::jg_video_html5[role="mt-4 mb-5"]
 
 [role="mt-4"]
@@ -271,17 +275,11 @@ hours of content every day. The number of YouTube channels is enormous.
 Today, it's a must for TV stations or musicians to publish videos of their
 shows or songs on YouTube.
 
-// Below a classic channel *Carpool Karaoke* featured by frontman _James Corden_
-// of *The Late Late Show* at CBS, Los Angeles.
-//
-// .James Corden · Carpool Karaoke
-// gallery::jg_video_online_youtube_james_and_adele[role="mb-5"]
-
 A really great channel at YouTube is presented by _Taylor Swift_ for her
 new studio album *The Tortured Poets Department: The Anthology*, released on
 April 19, 2024.
 
-.The Tortured Poets Department · Taylor Swift
+.Taylor Swift - The Tortured Poets Department · Justified Gallery + LightGallery
 gallery::jg_video_online_taylor_swift[role="mt-5 mb-4"]
 
 [role="mb-5"]
@@ -314,7 +312,7 @@ Business. Each membership has varied storage limits, but the free plan
 offers sufficient space for private projects to present video content
 without advertising.
 
-.Forever 21
+.Forever 21 · Justified Gallery + LightGallery
 gallery::jg_video_online_vimeo[role="mb-5"]
 
 [role="mt-4"]
@@ -329,7 +327,7 @@ connect to high-quality advertisers through a proprietary Advertising system.
 Like YouTube, videos can be watched for free, but ads are shown on each and
 every video.
 
-.SELF Chanel
+.SELF Chanel · Justified Gallery + LightGallery
 gallery::jg_video_online_dailymotion[role="mt-4 mb-5"]