j1-template 2024.3.16 → 2024.3.17

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

@@ -41,15 +41,22 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
+// Attribute settings for page content control (e.g includes)
+//
+:documentdir:                           _includes/documents
+
+// Attribute settings for page section control
+//
 :time-num--string:                      5-10
 :time-en--string:                       Minutes
 :time-en--description:                  to read
 :time-de--string:                       Minuten
 :time-de--description:                  Lesezeit
 
+// Additiona page attributes
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
 {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
@@ -77,7 +84,7 @@ messages get the full user's attention.
 </div>
 ++++
 
-// Include sub-documents (if any)
+// Include sub-documents (hidden content)
 // -----------------------------------------------------------------------------
 include::{documentdir}/419_advanced_modals_demo.asciidoc[]
 
@@ -95,7 +102,7 @@ For more information on how to use Bootstrap’s JavaScript modal
 plugin, refer to: link:{url-bs-docs--components-modal}[Bootstrap Docs, {browser-window--new}].
 ====
 
-// include::{documentdir}/tables/bs_modal_examples.asciidoc[]
+// Include sub-documents (table for BS Modal examples)
 include::{documentdir}/410_table_bs_modal_examples.asciidoc[]
 
 

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

@@ -33,7 +33,7 @@ permalink:                              /pages/public/tour/present_audio/
 resources:                              [ amplitudejs ]
 resource_options:
   - toccer:
-      collapseDepth:                    2
+      collapseDepth:                    3
   - attic:
       slides:
         - url:                          /assets/image/modules/attics/1920x1280/alexey-ruban.jpg
@@ -90,6 +90,34 @@ the visual and functional aspects of a player's audio control elements.
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
+
+// [role="mt-5"]
+// == AmplitudeJS Video (Youtube)
+
+// The example below demonstrates playing only the *Audio* track from YouTube
+// Video using an AmplitudJS player. The J1 template uses the video *plugin* ytp
+// to extend the native functionality of the AmplitudeJS API to playback YouTube
+// files for the audio part.
+
+// [role="mt-4 mb-5"]
+// [CAUTION]
+// ====
+// Playing audio tracks is currently supported only for videos from YouTube (YT).
+// The YT plugin *ytp* embeds a YouTube (iframe) player and mimics the AmplitudeJS
+// player buttons and controls to manage a *playlist* of videos the same as known
+// for native audio files.
+// ====
+
+// .Manon Mélodie · TuneCore 2024
+// amplitude::manon_melodie_yt_large[role="mt-4 mb-4"]
+
+// [NOTE]
+// ====
+// AmplitudeJS YT Player can only be used with the J1 Template. Currently, only
+// AJS players of type *large * are supported.
+// ====
+
+
 [role="mt-5"]
 == HTML 5 Audio
 
@@ -102,7 +130,7 @@ audio::/assets/audio/sound-effects/ambient-piano.mp3[role="mt-4 mb-5"]
 
 
 [role="mt-5"]
-== AmplitudeJS Audio
+== AmplitudeJS (AJS) 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
@@ -124,7 +152,7 @@ mobile devices.
 
 
 [role="mt-5"]
-== Mini Player
+=== 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
@@ -146,7 +174,7 @@ lorem:sentences[5]
 
 
 [role="mt-5"]
-== Compact Player
+=== Compact Player
 
 The design of a *Compact player* is an efficient approach that involves
 condensing the player controls and display elements into a smaller area.
@@ -165,7 +193,7 @@ amplitude::free_disco_compact[role="mt-3 mb-5"]
 
 
 [role="mt-5"]
-== Large Player
+=== Large Player
 
 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
@@ -188,6 +216,33 @@ amplitude::free_disco_large[role="mt-4 mb-5"]
 // amplitude::spontanorama_2024_large[role="mt-4 mb-5"]
 
 
+// [role="mt-5"]
+// == AmplitudeJS Video (Youtube)
+
+// The example below demonstrates playing only the *Audio* track from YouTube
+// Video using an AmplitudJS player. The J1 template uses the video *plugin* ytp
+// to extend the native functionality of the AmplitudeJS API to playback YouTube
+// files for the audio part.
+
+// [role="mt-4 mb-5"]
+// [CAUTION]
+// ====
+// Playing audio tracks is currently supported only for videos from YouTube (YT).
+// The YT plugin *ytp* embeds a YouTube (iframe) player and mimics the AmplitudeJS
+// player buttons and controls to manage a *playlist* of videos the same as known
+// for native audio files.
+// ====
+
+// .Manon Mélodie · TuneCore 2024
+// amplitude::manon_melodie_yt_large[role="mt-4 mb-4"]
+
+// [NOTE]
+// ====
+// AmplitudeJS YT Player can only be used with the J1 Template. Currently, only
+// AJS players of type *large * are supported.
+// ====
+
+
 [role="mt-5"]
 == What next
 

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

@@ -31,6 +31,7 @@ regenerate:                             false
 permalink:                              /pages/public/tour/present_video/
 
 resources:                              [
+                                          amplitudejs,
                                           gallery, lightgallery, masonry,
                                           videojs, vimeo-player
                                         ]
@@ -60,6 +61,7 @@ resource_options:
 
 // Attribute settings for section control
 //
+:ytp_audio:                             false
 :ytp_rhythm:                            true
 :ytp_sky_elements:                      true
 :dm_video:                              false
@@ -131,6 +133,34 @@ without loading *external players*.
 ++++
 video::/assets/video//html5/peck_pocketed.mp4[poster="/assets/video/poster/html5/peck_pocketed.jpg", opts="" role="mt-1 mb-5"]
 
+ifeval::[{ytp_audio} == true]
+[role="mt-5"]
+== AmplitudeJS Video (Youtube)
+
+The example below demonstrates playing only the *Audio* track from YouTube
+Video using an AmplitudJS player. The J1 template uses the video *plugin* ytp
+to extend the native functionality of the AmplitudeJS API to playback YouTube
+files for the audio part.
+
+[role="mt-4 mb-5"]
+[CAUTION]
+====
+Playing audio tracks is currently supported only for videos from YouTube (YT).
+The YT plugin *ytp* embeds a YouTube (iframe) player and mimics the AmplitudeJS
+player buttons and controls to manage a *playlist* of videos the same as known
+for native audio files.
+====
+
+.Manon Mélodie · TuneCore 2024
+amplitude::manon_melodie_yt_large[role="mt-4 mb-4"]
+
+[NOTE]
+====
+AmplitudeJS YT Player can only be used with the J1 Template. Currently, only
+AJS players of type *large * are supported.
+====
+endif::[]
+
 
 [role="mt-5"]
 == VideoJS

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

@@ -403,12 +403,12 @@ masterslider::ms_00003[role="mt-4 mb-5"]
 
 [role="mt-4"]
 [[thumb_images]]
-=== Slider using Thumb Elements
+=== Slider using UI elements
 
-To give the users better control over a slideshow, sliders provide complex UI
-elements to place dor example mini-images or short text elements side-by-side
-left or right, or at the bottom of a slideshow. Find two examples below how
-to control such a carousel element.
+To give the users *visual control* over a slideshow, Swiper sliders may provide
+UI elements by placing mini-images or short text elements (thumbs) side-by-side
+(on the left|right), or at the bottom of a slideshow. Find below examples how
+to control such sliders by thumbs.
 
 .Image controls
 masterslider::ms_00004[role="mt-4 mb-5"]

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: j1-template
 version: !ruby/object:Gem::Version
-  version: 2024.3.16
+  version: 2024.3.17
 platform: ruby
 authors:
 - juergen_jekyll_one
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-11-23 00:00:00.000000000 Z
+date: 2025-01-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -345,6 +345,7 @@ files:
 - assets/data/rtext_resizer.html
 - assets/data/slick.html
 - assets/data/speak2me.html
+- assets/data/swiper.html
 - assets/data/themes.bootswatch.json
 - assets/data/themes.json
 - assets/data/translator.html
@@ -364,6 +365,7 @@ files:
 - assets/error_pages/HTTP503.html
 - assets/theme/j1/adapter/js/advertising.js
 - assets/theme/j1/adapter/js/algolia.js
+- assets/theme/j1/adapter/js/amplitude.30.js
 - assets/theme/j1/adapter/js/amplitude.js
 - assets/theme/j1/adapter/js/analytics.js
 - assets/theme/j1/adapter/js/asciidoctor.js
@@ -402,6 +404,7 @@ files:
 - assets/theme/j1/adapter/js/slick.js
 - assets/theme/j1/adapter/js/slimSelect.js
 - assets/theme/j1/adapter/js/speak2me.js
+- assets/theme/j1/adapter/js/swiper.js
 - assets/theme/j1/adapter/js/themeToggler.js
 - assets/theme/j1/adapter/js/themes.js
 - assets/theme/j1/adapter/js/toccer.js
@@ -1089,7 +1092,7 @@ files:
 - assets/theme/j1/modules/amplitudejs/js/amplitude.js
 - assets/theme/j1/modules/amplitudejs/js/amplitude.map
 - assets/theme/j1/modules/amplitudejs/js/amplitude.min.js
-- assets/theme/j1/modules/amplitudejs/js/tech/youtube_example.js
+- assets/theme/j1/modules/amplitudejs/js/tech/ytp.15.js
 - assets/theme/j1/modules/amplitudejs/js/tech/ytp.js
 - assets/theme/j1/modules/amplitudejs/js/visualizations/bar.js
 - assets/theme/j1/modules/amplitudejs/js/visualizations/bar.min.js
@@ -1585,6 +1588,22 @@ files:
 - assets/theme/j1/modules/particles/sprites/snake.png
 - assets/theme/j1/modules/particles/sprites/snowflakes.png
 - assets/theme/j1/modules/particles/sprites/snowflakes_large.png
+- assets/theme/j1/modules/photoswipe/.version_5.4.4
+- assets/theme/j1/modules/photoswipe/LICENSE
+- assets/theme/j1/modules/photoswipe/README.md
+- assets/theme/j1/modules/photoswipe/css/org/photoswipe-dynamic-caption-plugin.umd.min.js
+- assets/theme/j1/modules/photoswipe/css/org/photoswipe.css
+- assets/theme/j1/modules/photoswipe/css/photoswipe-caption-plugin.css
+- assets/theme/j1/modules/photoswipe/css/photoswipe-caption-plugin.min.css
+- assets/theme/j1/modules/photoswipe/css/photoswipe.css
+- assets/theme/j1/modules/photoswipe/css/photoswipe.min.css
+- assets/theme/j1/modules/photoswipe/css/scss/photoswipe.scss
+- assets/theme/j1/modules/photoswipe/example/photoswipe-caption-plugin.html
+- assets/theme/j1/modules/photoswipe/example/test-gallery.html
+- assets/theme/j1/modules/photoswipe/js/README.md
+- assets/theme/j1/modules/photoswipe/js/photoswipe-caption-plugin.min.js
+- assets/theme/j1/modules/photoswipe/js/photoswipe-core.min.js
+- assets/theme/j1/modules/photoswipe/js/photoswipe-lightbox.min.js
 - assets/theme/j1/modules/popper/js/popper.js
 - assets/theme/j1/modules/popper/js/popper.min.js
 - assets/theme/j1/modules/preloadPolyfill/LICENSE
@@ -1710,6 +1729,16 @@ files:
 - assets/theme/j1/modules/spinner/css/spin.min.css
 - assets/theme/j1/modules/spinner/js/spin.js
 - assets/theme/j1/modules/spinner/js/spin.min.js
+- assets/theme/j1/modules/swiper/.version_1.2.0
+- assets/theme/j1/modules/swiper/LICENSE
+- assets/theme/j1/modules/swiper/README.md
+- assets/theme/j1/modules/swiper/css/swiper-bundle.css
+- assets/theme/j1/modules/swiper/css/swiper-bundle.min..css
+- assets/theme/j1/modules/swiper/css/theme/uno.css
+- assets/theme/j1/modules/swiper/css/theme/uno.min.css
+- assets/theme/j1/modules/swiper/js/swiper-bundle.js
+- assets/theme/j1/modules/swiper/js/swiper-bundle.min.js
+- assets/theme/j1/modules/swiper/swiperjs.com-demos.url
 - assets/theme/j1/modules/themeSwitcher/LICENSE
 - assets/theme/j1/modules/themeSwitcher/README.md
 - assets/theme/j1/modules/themeSwitcher/js/switcher.js
@@ -2020,6 +2049,7 @@ files:
 - lib/starter_web/_data/modules/defaults/slick.yml
 - lib/starter_web/_data/modules/defaults/slim_select.yml
 - lib/starter_web/_data/modules/defaults/speak2me.yml
+- lib/starter_web/_data/modules/defaults/swiper.yml
 - lib/starter_web/_data/modules/defaults/theme_toggler.yml
 - lib/starter_web/_data/modules/defaults/themes.yml
 - lib/starter_web/_data/modules/defaults/toccer.yml
@@ -2050,6 +2080,7 @@ files:
 - lib/starter_web/_data/modules/slick.yml
 - lib/starter_web/_data/modules/slim_select.yml
 - lib/starter_web/_data/modules/speak2me.yml
+- lib/starter_web/_data/modules/swiper.yml
 - lib/starter_web/_data/modules/theme_toggler.yml
 - lib/starter_web/_data/modules/themes.yml
 - lib/starter_web/_data/modules/toccer.yml
@@ -2796,9 +2827,12 @@ files:
 - lib/starter_web/assets/video/poster/youtube/carpool_caraoke/gwen_stefani.jpg
 - lib/starter_web/assets/video/poster/youtube/carpool_caraoke/lady_gaga.jpg
 - lib/starter_web/assets/video/poster/youtube/carpool_caraoke/michelle_obama.jpg
+- lib/starter_web/assets/video/poster/youtube/faelle_des_bnd/der_unverzichtbare_feind.jpg
+- lib/starter_web/assets/video/poster/youtube/faelle_des_bnd/ein_diener_vieler_herren.jpg
 - lib/starter_web/assets/video/poster/youtube/taylor_swift/28-07-_2024_22-21-00.jpg
 - lib/starter_web/assets/video/poster/youtube/taylor_swift/cover-1.jpg
 - lib/starter_web/assets/video/poster/youtube/taylor_swift/cover-2.jpg
+- lib/starter_web/assets/video/poster/youtube/the_piano/the-piano.jpg
 - lib/starter_web/assets/video/poster/youtube/voice_kids/banner/best_of.jpg
 - lib/starter_web/assets/video/poster/youtube/voice_kids/banner/generic.jpg
 - lib/starter_web/assets/video/poster/youtube/voice_kids/de_2021/battle.jpg
@@ -2861,6 +2895,22 @@ files:
 - lib/starter_web/package.json
 - lib/starter_web/pages/private/readme
 - lib/starter_web/pages/protected/readme
+- lib/starter_web/pages/public/_includes/attributes.asciidoc
+- lib/starter_web/pages/public/_includes/documents/photoswipe/200_photoswipe_parameters.asciidoc
+- lib/starter_web/pages/public/_includes/documents/photoswipe/210_photoswipe_lightbox_parameters.asciidoc
+- lib/starter_web/pages/public/_includes/documents/photoswipe/300_caption_plugin_for_photoSwipe.asciidoc
+- lib/starter_web/pages/public/_includes/documents/swiper/100_swiper_features.asciidoc
+- lib/starter_web/pages/public/_includes/documents/swiper/100_swiper_html_layout.asciidoc
+- lib/starter_web/pages/public/_includes/documents/swiper/100_swiper_initialization.asciidoc
+- lib/starter_web/pages/public/_includes/documents/swiper/110_swiper_common_options.asciidoc
+- lib/starter_web/pages/public/_includes/documents/swiper/200_swiper_parameters_a_k.asciidoc
+- lib/starter_web/pages/public/_includes/documents/swiper/200_swiper_parameters_l_o.asciidoc
+- lib/starter_web/pages/public/_includes/documents/swiper/200_swiper_parameters_p_s.asciidoc
+- lib/starter_web/pages/public/_includes/documents/swiper/200_swiper_parameters_t_z.asciidoc
+- lib/starter_web/pages/public/_includes/documents/swiper/300_swiper_instance_properties.asciidoc
+- lib/starter_web/pages/public/_includes/documents/swiper/400_swiper_modules.asciidoc
+- lib/starter_web/pages/public/_includes/documents/swiper/500_swiper_methods.asciidoc
+- lib/starter_web/pages/public/_includes/documents/swiper/600_swiper_events.asciidoc
 - lib/starter_web/pages/public/about/features.adoc
 - lib/starter_web/pages/public/about/reporting_issues.adoc
 - lib/starter_web/pages/public/about/site.adoc
@@ -2934,8 +2984,11 @@ files:
 - lib/starter_web/pages/public/manuals/ytdl/man.md
 - lib/starter_web/pages/public/panels/intro_panel/_includes/attributes.asciidoc
 - lib/starter_web/pages/public/panels/intro_panel/panel.adoc
+- lib/starter_web/pages/public/photoswipe_api.adoc
 - lib/starter_web/pages/public/plans/_includes/attributes.asciidoc
 - lib/starter_web/pages/public/plans/plans.adoc
+- lib/starter_web/pages/public/swiper_api.adoc
+- lib/starter_web/pages/public/swiper_tester.adoc
 - lib/starter_web/pages/public/tools/previewer/_includes/attributes.asciidoc
 - lib/starter_web/pages/public/tools/previewer/_includes/documents/amplitudejs.large.css.asciidoc
 - lib/starter_web/pages/public/tools/previewer/_includes/documents/frame.hover.html

data/assets/theme/j1/modules/amplitudejs/js/tech/youtube_example.js

@@ -1,211 +0,0 @@
-/*
- # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/modules/amplitudejs/js/plugins/tech/youtube.js
- # AmplitudeJS V5 Plugin|Tech for J1 Template
- #
- # 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
- # -----------------------------------------------------------------------------
-*/
-"use strict";
-  function ytAudio() {
-  }
-
-  // 2. This code loads the IFrame Player API code asynchronously.
-  var player1, player2, player3, player4;
-  var firstScriptTag;
-
-  var tag = document.createElement('script');
-  tag.src = "https://www.youtube.com/iframe_api";
-  firstScriptTag = document.getElementsByTagName('script')[0];
-  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
-  // 3. This function creates an <iframe> (and YouTube player)
-  //    after the API code downloads.
-  function onYouTubeIframeAPIReady() {
-
-    var ctrlq1 = document.getElementById("youtube-audio1");
-    ctrlq1.innerHTML = '<img id="youtube-icon1" src=""/><div id="youtube-player1"></div>';
-    ctrlq1.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
-    ctrlq1.onclick = toggleAudio1;
-
-    player1 = new YT.Player('youtube-player1', {
-      height: '0',
-      width: '0',
-      videoId: ctrlq1.dataset.video,
-      playerVars: {
-        autoplay: ctrlq1.dataset.autoplay,
-        loop: ctrlq1.dataset.loop,
-      },
-      events: {
-        'onReady': onPlayerReady1,
-        'onStateChange': onPlayerStateChange1
-      }
-    });
-
-    var ctrlq2 = document.getElementById("youtube-audio2");
-    ctrlq2.innerHTML = '<img id="youtube-icon2" src=""/><div id="youtube-player2"></div>';
-    ctrlq2.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
-    ctrlq2.onclick = toggleAudio2;
-
-    player2 = new YT.Player('youtube-player2', {
-      height: '0',
-      width: '0',
-      videoId: ctrlq2.dataset.video,
-      playerVars: {
-        autoplay: ctrlq2.dataset.autoplay,
-        loop: ctrlq2.dataset.loop,
-      },
-      events: {
-        'onReady': onPlayerReady2,
-        'onStateChange': onPlayerStateChange2
-      }
-    });
-
-    var ctrlq3 = document.getElementById("youtube-audio3");
-    ctrlq3.innerHTML = '<img id="youtube-icon3" src=""/><div id="youtube-player3"></div>';
-    ctrlq3.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
-    ctrlq3.onclick = toggleAudio3;
-
-    player3 = new YT.Player('youtube-player3', {
-      height: '0',
-      width: '0',
-      videoId: ctrlq3.dataset.video,
-      playerVars: {
-        autoplay: ctrlq3.dataset.autoplay,
-        loop: ctrlq3.dataset.loop,
-      },
-      events: {
-        'onReady': onPlayerReady3,
-        'onStateChange': onPlayerStateChange3
-      }
-    });
-
-    var ctrlq4 = document.getElementById("youtube-audio4");
-    ctrlq4.innerHTML = '<img id="youtube-icon4" src=""/><div id="youtube-player4"></div>';
-    ctrlq4.style.cssText = 'width:150px;margin:2em auto;cursor:pointer;cursor:hand;display:none';
-    ctrlq4.onclick = toggleAudio4;
-
-    player4 = new YT.Player('youtube-player4', {
-      height: '0',
-      width: '0',
-      videoId: ctrlq4.dataset.video,
-      playerVars: {
-        autoplay: ctrlq4.dataset.autoplay,
-        loop: ctrlq4.dataset.loop,
-      },
-      events: {
-        'onReady': onPlayerReady4,
-        'onStateChange': onPlayerStateChange4
-      }
-    });
-  }
-
-  function togglePlayButton1(play) {
-    document.getElementById("youtube-icon1").src = play ? "/assets/theme/j1/modules/amplitudejs/icons/player/blue/play.png" : "/assets/theme/j1/modules/amplitudejs/icons/player/blue/pause.png";
-  }
-
-  function toggleAudio1() {
-    if ( player1.getPlayerState() == 1 || player1.getPlayerState() == 3 ) {
-      player1.pauseVideo();
-      togglePlayButton1(false);
-    } else {
-      player1.playVideo();
-      togglePlayButton1(true);
-    }
-  }
-
-  function togglePlayButton2(play) {
-    document.getElementById("youtube-icon2").src = play ? "/assets/theme/j1/modules/amplitudejs/icons/player/blue/play.png" : "/assets/theme/j1/modules/amplitudejs/icons/player/blue/pause.png";
-  }
-
-  function toggleAudio2() {
-    if ( player2.getPlayerState() == 1 || player2.getPlayerState() == 3 ) {
-      player2.pauseVideo();
-      togglePlayButton2(false);
-    } else {
-      player2.playVideo();
-      togglePlayButton2(true);
-    }
-  }
-
-  function togglePlayButton3(play) {
-    document.getElementById("youtube-icon3").src = play ? "/assets/theme/j1/modules/amplitudejs/icons/player/blue/play.png" : "/assets/theme/j1/modules/amplitudejs/icons/player/blue/pause.png";
-  }
-
-  function toggleAudio3() {
-    if ( player3.getPlayerState() == 1 || player3.getPlayerState() == 3 ) {
-      player3.pauseVideo();
-      togglePlayButton3(false);
-    } else {
-      player3.playVideo();
-      togglePlayButton3(true);
-    }
-  }
-
-  function togglePlayButton4(play) {
-    document.getElementById("youtube-icon4").src = play ? "/assets/theme/j1/modules/amplitudejs/icons/player/blue/play.png" : "/assets/theme/j1/modules/amplitudejs/icons/player/blue/pause.png";
-  }
-
-  function toggleAudio4() {
-    if ( player4.getPlayerState() == 1 || player4.getPlayerState() == 3 ) {
-      player4.pauseVideo();
-      togglePlayButton4(false);
-    } else {
-      player4.playVideo();
-      togglePlayButton4(true);
-    }
-  }
-
-  function onPlayerReady1(event) {
-    player1.setPlaybackQuality("small");
-    document.getElementById("youtube-audio1").style.display = "block";
-    togglePlayButton1(player1.getPlayerState() !== 5);
-  }
-
-  function onPlayerStateChange1(event) {
-    if (event.data === 0) {
-      togglePlayButton1(false);
-    }
-  }
-
-  function onPlayerReady2(event) {
-    player2.setPlaybackQuality("small");
-    document.getElementById("youtube-audio2").style.display = "block";
-    togglePlayButton2(player2.getPlayerState() !== 5);
-  }
-
-  function onPlayerStateChange2(event) {
-    if (event.data === 0) {
-      togglePlayButton2(false);
-    }
-  }
-
-  function onPlayerReady3(event) {
-    player3.setPlaybackQuality("small");
-    document.getElementById("youtube-audio3").style.display = "block";
-    togglePlayButton3(player3.getPlayerState() !== 5);
-  }
-
-  function onPlayerStateChange3(event) {
-    if (event.data === 0) {
-      togglePlayButton3(false);
-    }
-  }
-
-  function onPlayerReady4(event) {
-    player4.setPlaybackQuality("small");
-    document.getElementById("youtube-audio4").style.display = "block";
-    togglePlayButton4(player4.getPlayerState() !== 5);
-  }
-
-  function onPlayerStateChange4(event) {
-    if (event.data === 0) {
-      togglePlayButton4(false);
-    }
-  }