j1-template 2024.3.15 → 2024.3.17

data/assets/theme/j1/adapter/js/amplitude.js

@@ -85,18 +85,18 @@ regenerate:                             true
 "use strict";
 j1.adapter.amplitude = ((j1, window) => {
 
-  // göobal settings
+  // global settings
   // ---------------------------------------------------------------------------
-  var environment             = '{{environment}}';
-  var cookie_names            = j1.getCookieNames();
-  var user_state              = j1.readCookie(cookie_names.user_state);
-  var state                   = 'not_started';
+  var environment   = '{{environment}}';
+  var cookie_names  = j1.getCookieNames();
+  var user_state    = j1.readCookie(cookie_names.user_state);
+  var state         = 'not_started';
 
   // module settings
   // ---------------------------------------------------------------------------
 
   // control|logging
-  // ---------------
+  // ---------------------------------------------------------------------------
   var _this;
   var logger;
   var logText;
@@ -104,15 +104,15 @@ j1.adapter.amplitude = ((j1, window) => {
   var toText;
 
   // date|time monitoring
-  //---------------------
+  //----------------------------------------------------------------------------
   var startTime;
   var endTime;
   var startTimeModule;
   var endTimeModule;
   var timeSeconds;
 
-  // amplitude api settings
-  // ----------------------
+  // AmplitudeJS API settings
+  // ---------------------------------------------------------------------------
   var ytpSongIndex    = "0";
   var ytpAutoPlay     = false;
   var ytpLoop         = true;
@@ -131,9 +131,8 @@ j1.adapter.amplitude = ((j1, window) => {
   var ytPlayer;
   var ytpPlaybackRate
 
-  // amplitude player (instance) settings
-  // NOTE: slider VALUE is set by Adapter|Amplitude API
-  // ------------------------------------
+  // AmplitudeJS Player DEFAULT settings
+  // ---------------------------------------------------------------------------
   var xhrLoadState;
   var dependency;
   var playerCounter                     = 0;
@@ -141,7 +140,9 @@ j1.adapter.amplitude = ((j1, window) => {
   var playersProcessed                  = [];
   var playersHtmlLoaded                 = false;
   var processingPlayersFinished         = false;
+  
   var playerAudioInfo                   = ('{{amplitude_defaults.playlist.audio_info}}' === 'true') ? true : false;
+  var playerDefaultPluginManager        = ('{{amplitude_defaults.player.plugin_manager.enabled}}' === 'true') ? true : false;
   var playerDefaultType                 = '{{amplitude_defaults.player.type}}';
   var playerVolumeValue                 = '{{amplitude_defaults.player.volume_slider.preset_value}}';
   var playerVolumeSliderStep            = '{{amplitude_defaults.player.volume_slider.slider_step}}';
@@ -152,26 +153,29 @@ j1.adapter.amplitude = ((j1, window) => {
   var playerDelayNextTitle              = '{{amplitude_defaults.player.delay_next_title}}';
   var playerForwardBackwardSkipSeconds  = '{{amplitude_defaults.player.forward_backward_skip_seconds}}';
 
-  // unused settings
-  // ---------------------------------------------------------------------------
-  // var playerWaveformSampleRate       = '{{amplitude_defaults.player.waveform_sample_rate}}';
+  var pluginManagerEnabled;
+  var playerExistsInPage;
 
+  var pluginManagerRunOnce = false;
+
+  // YT player settings
+// -----------------------------------------------------------------------------
+// const YT_PLAYER_STATE = {
+//   not_started:        -1,
+//   ended:               0,
+//   playing:             1,
+//   paused:              2,
+//   buffering:           3,
+//   video_cued:          5
+// };
+
+  // AmplitudeJS settings curently NOT used
   // ---------------------------------------------------------------------------
-  // YouTube Player Tech (loaded early, runs on Document Ready)
-  // ---------------------------------------------------------------------------
-  //
-  // $(function() {
-  //   // Load YTP API code asynchronously and create a player for later use
-  //   var techScript;
-  //   var tech    = document.createElement('script');
-  //
-  //   tech.id     = 'yt_player_init';
-  //   tech.src    = "/assets/theme/j1/modules/amplitudejs/js/tech/ytp.js";
-  //   techScript  = document.getElementsByTagName('script')[0];
-  //
-  //   // Append Tech script
-  //   techScript.parentNode.insertBefore(tech, techScript);
-  // });
+  var playerWaveformsEnabled           = '{{amplitude_defaults.player.waveforms.enabled}}';
+  var playerWaveformsSampleRate        = '{{amplitude_defaults.player.waveforms.sample_rate}}';
+  var playerVisualizationEnabled       = '{{amplitude_defaults.player.visualization.enabled}}';
+  var playerVisualizationName          = '{{amplitude_defaults.player.visualization.name}}';
+
 
   // ---------------------------------------------------------------------------
   // helper functions
@@ -202,12 +206,21 @@ j1.adapter.amplitude = ((j1, window) => {
       amplitudeSettings = $.extend({}, {{amplitude_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
       amplitudeOptions  = $.extend(true, {}, amplitudeDefaults, amplitudeSettings);
 
+      // save AJS player setiings for later use (e.g. the AJS plugins)
+      // j1.adapter.amplitude['amplitudeDefaults'] = amplitudeDefaults;
+      // j1.adapter.amplitude['amplitudeSettings'] = amplitudeSettings;
+      // j1.adapter.amplitude['amplitudeOptions']  = amplitudeOptions;
+
       // -----------------------------------------------------------------------
       // control|logging settings
       // -----------------------------------------------------------------------
-      _this             = j1.adapter.amplitude;
-      logger            = log4javascript.getLogger('j1.adapter.amplitude');
+      _this                     = j1.adapter.amplitude;
+      logger                    = log4javascript.getLogger('j1.adapter.amplitude');
 
+      // prepare data element for later use
+      j1.adapter.amplitude.data             = {};
+      j1.adapter.amplitude.data.ytpGlobals  = {};
+      j1.adapter.amplitude.data.ytPlayers   = {};
 
       // -----------------------------------------------------------------------
       // module initializer
@@ -224,8 +237,6 @@ j1.adapter.amplitude = ((j1, window) => {
           logger.debug('\n' + 'module state: ' + _this.getState());
           logger.info('\n' + 'module is being initialized');
 
-          // jQuery('.scrollbar-rail').scrollbar();
-
           // -------------------------------------------------------------------
           // create global playlist (songs)
           // -------------------------------------------------------------------
@@ -303,11 +314,10 @@ j1.adapter.amplitude = ((j1, window) => {
                 song.cover_art_url = item[key];
                 continue;
               } else if (key === 'audio_info') {
-                if (playerAudioInfo) {
-                  song.audio_info = item[key];
-                } else {
-                  song.audio_info = '';
-                } // END if playerAudioInfo
+                song.audio_info = item[key];
+                continue;
+              } else if (key === 'rating') {
+                song.rating = item[key];
                 continue;
               } else {
                 song[key] = item[key];
@@ -355,7 +365,7 @@ j1.adapter.amplitude = ((j1, window) => {
           );
 
           // dynamic loader variable to setup the player on ID {{player.id}}
-          dependency = 'dependencies_met_html_loaded_{{player.id}}';
+          dependency                    = 'dependencies_met_html_loaded_{{player.id}}';
           load_dependencies[dependency] = '';
 
           // ---------------------------------------------------------------------
@@ -396,7 +406,6 @@ j1.adapter.amplitude = ((j1, window) => {
     // initApi
     // -------------------------------------------------------------------------
     initApi: (songlist) => {
-
       logger.info('\n' + 'initialze API: started');
 
       {% comment %} collect playlists
@@ -421,6 +430,8 @@ j1.adapter.amplitude = ((j1, window) => {
             "artist":         "{{item.artist}}",
             "album":          "{{item.name}}",
             "url":            "{{item.audio_base}}/{{item.audio}}",
+            "audio_info":     "{{item.audio_info}}",
+            "rating":         "{{item.rating}}",
             "cover_art_url":  "{{item.cover_image}}"
           }{% if forloop.last %}{% else %},{% endif %}
           {% endcapture %}
@@ -456,6 +467,7 @@ j1.adapter.amplitude = ((j1, window) => {
       // See:  https://521dimensions.com/open-source/amplitudejs/docs
       // NOTE: slider VALUE (volume) is set by DEFAULT settings (player)
       Amplitude.init({
+
         bindings: {
           33:  'play_pause',
           37:  'prev',
@@ -530,13 +542,16 @@ j1.adapter.amplitude = ((j1, window) => {
             } // END if pause on next title
           }
         }, // END callbacks
+
         // waveforms: {
         //   sample_rate:    playerWaveformSampleRate
         // },
+
         continue_next:    playerPlayNextTitle,
         volume:           playerVolumeValue,
         volume_decrement: playerVolumeSliderStep,
         volume_increment: playerVolumeSliderStep
+
       }); // END Amplitude init
 
     }, // END initApi
@@ -548,25 +563,25 @@ j1.adapter.amplitude = ((j1, window) => {
 
       var dependencies_met_player_instances_initialized = setInterval (() => {
         if (apiInitialized.state) {
-            logger.info('\n' + 'initialize player specific UI events: started');
-
           var parentContainer = (document.getElementById('{{xhr_container_id}}') !== null) ? true : false;
           var parentContainerExist = ($('#' + '{{xhr_container_id}}')[0] !== undefined) ? true : false;
+
+          logger.info('\n' + 'initialize player specific UI events: started');
           
           {% for player in amplitude_options.players %} {% if player.enabled %}
             {% assign xhr_data_path = amplitude_options.xhr_data_path %}
             {% capture xhr_container_id %}{{player.id}}_parent{% endcapture %}
 
-            playerID            = '{{player.id}}';
-            playerType          = '{{player.type}}';
-            playList            = '{{player.playlist}}';
-            playListName        = '{{player.playlist.name}}'
-            playListTitle       = '{{player.playlist.title}}';
+            playerID              = '{{player.id}}';
+            playerType            = '{{player.type}}';
+            playList              = '{{player.playlist}}';
+            playListName          = '{{player.playlist.name}}'
+            playListTitle         = '{{player.playlist.title}}';
             
             logger.debug('\n' + 'set playlist {{player.playlist}} on id #{{player.id}} with title: ' + playListTitle);
 
             // dynamic loader variable to setup the player on ID {{player.id}}
-            dependency = 'dependencies_met_player_loaded_{{player.id}}';
+            dependency                    = 'dependencies_met_player_loaded_{{player.id}}';
             load_dependencies[dependency] = '';
 
             // -----------------------------------------------------------------
@@ -578,7 +593,6 @@ j1.adapter.amplitude = ((j1, window) => {
               var playerExistsInPage  = ($('#' + '{{xhr_container_id}}')[0] !== undefined) ? true : false;
 
               if (xhrLoadState === 'success' && playerExistsInPage) {
-//            if (xhrLoadState === 'success') {
 
                 // set song (title) specific audio info links
                 // -------------------------------------------------------------
@@ -607,22 +621,33 @@ j1.adapter.amplitude = ((j1, window) => {
                     //
                     if (document.getElementById('{{player.id}}') !== null) {
 
-                      // click on progress bar
-                      // -------------------------------------------------------
-
+                      // add listeners to all progress bars found (mini-player)
                       // getElementsByClassName returns an Array-like object
+                      // -------------------------------------------------------
                       var progressBars = document.getElementsByClassName("mini-player-progress");
-
-                      // add listeners to all progress bars found
                       for (var i=0; i<progressBars.length; i++) {
+                        if (progressBars[i].dataset.amplitudeSource === 'youtube') {
+                          // do nothing
+                        } else {
                           progressBars[i].addEventListener('click', function(event) {
                             var offset = this.getBoundingClientRect();
                             var xpos   = event.pageX - offset.left;
-
+  
                             Amplitude.setSongPlayedPercentage(
                               (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
-                          });
-                      }
+                          }); // END EventListener 'click'
+                        }
+                      } // END for
+
+                      // for (var i=0; i<progressBars.length; i++) {
+                      //     progressBars[i].addEventListener('click', function(event) {
+                      //       var offset = this.getBoundingClientRect();
+                      //       var xpos   = event.pageX - offset.left;
+
+                      //       Amplitude.setSongPlayedPercentage(
+                      //         (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
+                      //     });
+                      // }
 
                     } // END mini player UI events
                     {% endif %}
@@ -630,11 +655,11 @@ j1.adapter.amplitude = ((j1, window) => {
                     {% if player.id contains 'compact' %}
                     // ---------------------------------------------------------
                     // START compact player UI events
-                    //
+                    //                    
                     if (document.getElementById('{{player.id}}') !== null) {
 
-                      // show|hide scrollbar in playlist
-                      // -------------------------------------------------------
+                      // show|hide scrollbar in playlist (compact player)
+                      // -------------------------------------------------------                   
                       const songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
                       if (songsInPlaylist.length <= 8) {
                         const titleListCompactPlayer = document.getElementById('compact_player_title_list_' + playListName);
@@ -674,34 +699,34 @@ j1.adapter.amplitude = ((j1, window) => {
                             }
                           }
                         }); // END EventListener 'click' (compact player|show playlist)
-                     }
-
-                      // hide playlist
-                      var hidePlaylist = document.getElementById("hide_playlist_{{player.id}}");
-                      if (hidePlaylist !== null) {
-                        hidePlaylist.addEventListener('click', function(event) {
-                          var playlistScreen = document.getElementById("playlist_screen_{{player.id}}");
-
-                          playlistScreen.classList.remove('slide-in-top');
-                          playlistScreen.classList.add('slislide-out-top');
-                          playlistScreen.style.display = "none";
-                          playlistScreen.style.zIndex = "1";
-
-                          // enable scrolling
-                          if ($('body').hasClass('stop-scrolling')) {
-                            $('body').removeClass('stop-scrolling');
-                          }
-                        }); // END EventListener 'click' (compact player|show playlist)
-                      }
+                     } // END if showPlaylist
 
-                      // click on progress bar
-                      // -------------------------------------------------------
+                    // hide playlist
+                    var hidePlaylist = document.getElementById("hide_playlist_{{player.id}}");
+                    if (hidePlaylist !== null) {
+                      hidePlaylist.addEventListener('click', function(event) {
+                        var playlistScreen = document.getElementById("playlist_screen_{{player.id}}");
 
-                      // getElementsByClassName returns an Array-like object
-                      var progressBars = document.getElementsByClassName("compact-player-progress");
+                        playlistScreen.classList.remove('slide-in-top');
+                        playlistScreen.classList.add('slislide-out-top');
+                        playlistScreen.style.display = "none";
+                        playlistScreen.style.zIndex = "1";
 
-                      // add listeners to all progress bars found
-                      for (var i=0; i<progressBars.length; i++) {
+                        // enable scrolling
+                        if ($('body').hasClass('stop-scrolling')) {
+                          $('body').removeClass('stop-scrolling');
+                        }
+                      }); // END EventListener 'click' (compact player|show playlist)
+                    } // END if hidePlaylist
+
+                    // add listeners to all progress bars found (compact-player)
+                    // getElementsByClassName returns an Array-like object
+                    // -------------------------------------------------------
+                    var progressBars = document.getElementsByClassName("compact-player-progress");
+                    for (var i=0; i<progressBars.length; i++) {
+                      if (progressBars[i].dataset.amplitudeSource === 'youtube') {
+                        // do nothing
+                      } else {
                         progressBars[i].addEventListener('click', function(event) {
                           var offset = this.getBoundingClientRect();
                           var xpos   = event.pageX - offset.left;
@@ -710,6 +735,7 @@ j1.adapter.amplitude = ((j1, window) => {
                             (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
                         }); // END EventListener 'click'
                       }
+                    } // END for
 
                       // click on skip forward|backward (compact player)
                       // See: https://github.com/serversideup/amplitudejs/issues/384
@@ -727,8 +753,8 @@ j1.adapter.amplitude = ((j1, window) => {
 
                             if (currentTime > 0) {
                               Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
-                            } // END EventListener 'click'
-                          });
+                            }
+                          }); // END EventListener 'click'
                         } // END if ID
                       } // END for SkipForwardButtons
 
@@ -744,8 +770,8 @@ j1.adapter.amplitude = ((j1, window) => {
 
                             if (currentTime > 0) {
                               Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
-                            } // END EventListener 'click'
-                          });
+                            }
+                          }); // END EventListener 'click'
                         } // END if ID
                       } // END for SkipBackwardButtons
 
@@ -754,6 +780,7 @@ j1.adapter.amplitude = ((j1, window) => {
                       if (compactPlayerShuffleButton) {
                         compactPlayerShuffleButton.addEventListener('click', function(event) {
                           var shuffleState = (document.getElementById('compact_player_shuffle').className.includes('amplitude-shuffle-on')) ? true : false;
+
                           Amplitude.setShuffle(shuffleState)
                         }); // END EventListener 'click'
                       } // END compactPlayerShuffleButton
@@ -763,6 +790,7 @@ j1.adapter.amplitude = ((j1, window) => {
                       if (compactPlayerRepeatButton) {
                         compactPlayerRepeatButton.addEventListener('click', function(event) {
                           var repeatState = (document.getElementById('compact_player_repeat').className.includes('amplitude-repeat-on')) ? true : false;
+
                           Amplitude.setRepeat(repeatState)
                         }); // END EventListener 'click'
                       } // END compactPlayerRepeatButton
@@ -775,86 +803,33 @@ j1.adapter.amplitude = ((j1, window) => {
                     //
                     if (document.getElementById('{{player.id}}') !== null) {
 
-                      // listener overloads for Youtube video (large player)
+                      // NOTE: listener overloads for video managed by plugin
                       // -------------------------------------------------------
 
                       // click on prev button
                       var largePlayerPreviousButton = document.getElementById('large_player_previous');
                       if (largePlayerPreviousButton && largePlayerPreviousButton.getAttribute("data-amplitude-source") === 'youtube') {
-                        largePlayerPreviousButton.addEventListener('click', function(event) {
-                          var playlist  = this.getAttribute("data-amplitude-playlist");
-                          var songIndex = ytpSongIndex;                          // Amplitude.getActiveIndex();
-
-                        }); // END EventListener 'click'
+                        // do nothing (managed by plugin)
                       }
 
                       // click on play_pause button
                       var largePlayerPlayButton = document.getElementById('large_player_play_pause');
-                      if (largePlayerPlayButton && largePlayerPlayButton.getAttribute("data-amplitude-source") === 'youtube') {
-                        largePlayerPlayButton.addEventListener('click', function(event) {
-                          var playlist      = this.getAttribute("data-amplitude-playlist");
-                          var songMetaData  = Amplitude.getSongAtIndex(ytpSongIndex);
-                          var songURL       = songMetaData.url;
-                          var songIndex     = ytpSongIndex;
-
-                          var dependencies_met_ytIframeAPIReady = setInterval (() => {
-                            if (j1.adapter.amplitude['iframeAPIReady']) {
-                              ytPlayer          = j1.adapter.amplitude['ytPlayer'];
-                              ytpPlaybackRate   = ytPlayer.getPlaybackRate()
-
-                              // ytPlayer.loadVideoById({
-                              //   'videoId': 'bHQqvYy5KYo',
-                              //   'startSeconds': 5,
-                              //   'endSeconds': 60
-                              // });
-
-                              // ytPlayer.loadVideoByUrl(
-                              //   mediaContentUrl:  songURL,
-                              //   startSeconds: 10
-                              // )
-
-                              // ytPlayer.playVideo();
-
-                              clearInterval(dependencies_met_ytIframeAPIReady);
-                            } // END if playersUILoaded
-                          }, 10); // END dependencies_met_ytIframeAPIReady
-
-                        }); // END EventListener 'click'
-                      }
-
-                      // click on next button
-                      var largePlayerNextButton = document.getElementById('large_player_next');
-                      if (largePlayerNextButton && largePlayerPlayButton.getAttribute("data-amplitude-source") === 'youtube') {
-                        largePlayerNextButton.addEventListener('click', function(event) {
-                          var playlist  = this.getAttribute("data-amplitude-playlist");
-                          var songIndex = ytpSongIndex;                          // Amplitude.getActiveIndex();
-                        }); // END EventListener 'click'
-                      }
-
-                      // click on song container
-                      var largetPlayerSongContainer = document.getElementsByClassName("song amplitude-song-container");
-                      for (var i=0; i<largetPlayerSongContainer.length; i++) {
-                        if (largetPlayerSongContainer[i].dataset.amplitudeSource === 'youtube') {
-                          largetPlayerSongContainer[i].addEventListener('click', function(event) {
-                            var playlist        = this.getAttribute("data-amplitude-playlist");
-                            var playlistLength  = largetPlayerSongContainer.length;
-                            ytpSongIndex         = this.getAttribute("data-amplitude-song-index");
-                          });
-                        } // END if Attribute
-                      } // END for
-
-                      // add listeners to all progress bars found
+                      // add listeners to all progress bars found (large-player)
                       // -------------------------------------------------------
                       var progressBars = document.getElementsByClassName("large-player-progress");
                       for (var i=0; i<progressBars.length; i++) {
-                        progressBars[i].addEventListener('click', function(event) {
-                          var offset = this.getBoundingClientRect();
-                          var xpos   = event.pageX - offset.left;
-
-                          Amplitude.setSongPlayedPercentage(
-                            (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
-                        }); // END EventListener 'click'
-                      }
+                        if (progressBars[i].dataset.amplitudeSource === 'youtube') {
+                          // do nothing (managed by plugin)
+                        } else {
+                          progressBars[i].addEventListener('click', function(event) {
+                            var offset = this.getBoundingClientRect();
+                            var xpos   = event.pageX - offset.left;
+  
+                            Amplitude.setSongPlayedPercentage(
+                              (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
+                          }); // END EventListener 'click'
+                        }
+                      } // END for
 
                       // click on skip forward|backward (large player)
                       // See: https://github.com/serversideup/amplitudejs/issues/384
@@ -865,16 +840,7 @@ j1.adapter.amplitude = ((j1, window) => {
                       for (var i=0; i<largePlayerSkipForwardButtons.length; i++) {
                         if (largePlayerSkipForwardButtons[i].id === 'skip-forward_{{player.id}}') {
                           if (largePlayerSkipForwardButtons[i].dataset.amplitudeSource === 'youtube') {
-                            largePlayerSkipForwardButtons[i].addEventListener('click', function(event) {
-                              const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
-                              //const duration    = Amplitude.getSongDuration();
-                              //const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
-                              //const targetTime  = parseFloat(currentTime + skipOffset);
-
-                              // if (currentTime > 0) {
-                              //   Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
-                              // }
-                            }); // END EventListener 'click
+                            // do nothing (managed by plugin)
                           } else {
                             largePlayerSkipForwardButtons[i].addEventListener('click', function(event) {
                               const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
@@ -885,9 +851,8 @@ j1.adapter.amplitude = ((j1, window) => {
                               if (currentTime > 0) {
                                 Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
                               }
-                            }); // END EventListener 'click
-                          }
-
+                            }); // END EventListener 'click'
+                          } // END else
                         } // END if ID
                       } // END for SkipForwardButtons
 
@@ -896,9 +861,7 @@ j1.adapter.amplitude = ((j1, window) => {
                       for (var i=0; i<largePlayerSkipBackwardButtons.length; i++) {
                         if (largePlayerSkipBackwardButtons[i].id === 'skip-backward_{{player.id}}') {
                           if (largePlayerSkipBackwardButtons[i].dataset.amplitudeSource === 'youtube') {
-                            largePlayerSkipBackwardButtons[i].addEventListener('click', function(event) {
-                              const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
-                            }); // END EventListener 'click'
+                            // do nothing (managed by plugin)
                           } else {
                             largePlayerSkipBackwardButtons[i].addEventListener('click', function(event) {
                               const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
@@ -910,8 +873,7 @@ j1.adapter.amplitude = ((j1, window) => {
                                 Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
                               }
                             }); // END EventListener 'click'
-                          }
-
+                          } // END else
                         } // END if ID
                       } // END for SkipBackwardButtons
 
@@ -931,14 +893,14 @@ j1.adapter.amplitude = ((j1, window) => {
                           var repeatState = (document.getElementById('large_player_repeat').className.includes('amplitude-repeat-on')) ? true : false;
                           Amplitude.setRepeat(repeatState)
                         }); // END EventListener 'click'
-                      } // END largePlayerRepeatButton
+                      } // END if largePlayerRepeatButton
 
-                      // enable|disable scrolling on playlist
+                      // enable|disable scrolling on playlist (large player)
                       // -------------------------------------------------------
                       if (document.getElementById('large_player_right') !== null) {
 
                         // show|hide scrollbar in playlist
-                        // -------------------------------------------------------
+                        // -----------------------------------------------------
                         const songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
 
                         if (songsInPlaylist.length <= 8) {
@@ -948,18 +910,60 @@ j1.adapter.amplitude = ((j1, window) => {
                           }
                         }
 
-                        // scroll to player top position
-                        // -------------------------------------------------------
-                        var playlistHeader = document.getElementById("playlist_header_{{player.id}}");
+                        // scroll to player top position (large player)
+                        //
+                        // Bootstrap grid breakpoints
+                        //   SN:     576px           Mobile
+                        //   MD:     768px           Small Desktop|Tablet
+                        //   LG:     992px           Default Desktop
+                        //   XL:     1200px          Large Desktop
+                        //   XXL:    1400px          X Large Desktop
+                        // -----------------------------------------------------
+
+                        var largePlayerTitleHeader = document.getElementById("large_player_title_header_{{player.id}}");
+                        largePlayerTitleHeader.addEventListener('click', function(event) {
+                          var playerRight     = document.getElementById("{{player.id}}");
+                          var playlistHeader  = document.getElementById("playlist_header_{{player.id}}");
+                          var scrollOffset    = (window.innerWidth >= 992) ? -130 : -44;
+
+                          // scroll player|playlist to top position (large player)
+                          //
+                          const targetDivPlayerRight            = playerRight;
+                          const targetDivPositionPlayerRight    = targetDivPlayerRight.offsetTop;
+                          const targetDivPlaylistHeader         = playlistHeader;
+                          const targetDivPositionplaylistHeader = targetDivPlaylistHeader.offsetTop;
+
+                          // NOTE: depending on WINDOW SIZE the relation changes to TOP POSITION (targetDivPosition)
+                          //
+                          if (targetDivPositionPlayerRight > targetDivPositionplaylistHeader) {
+                            window.scrollTo(0, targetDivPositionPlayerRight + targetDivPlaylistHeader.offsetParent.firstElementChild.clientHeight + scrollOffset);
+                          } else {
+                            window.scrollTo(0, targetDivPositionplaylistHeader + scrollOffset);
+                          }
+                        }); // END EventListener 'click' largePlayerTitleHeader
+
+                        var largePlayerPlaylistHeader = document.getElementById("playlist_header_{{player.id}}");
+                        largePlayerPlaylistHeader.addEventListener('click', function(event) {
+                          var playerRight     = document.getElementById("{{player.id}}");
+                          var playlistHeader  = document.getElementById("playlist_header_{{player.id}}");
+                          var scrollOffset    = (window.innerWidth >= 992) ? -130 : -44;
+
+                          // scroll player|playlist to top position (large player)
+                          //
+                          const targetDivPlayerRight            = playerRight;
+                          const targetDivPositionPlayerRight    = targetDivPlayerRight.offsetTop;
+                          const targetDivPlaylistHeader         = playlistHeader;
+                          const targetDivPositionplaylistHeader = targetDivPlaylistHeader.offsetTop;
+
+                          // NOTE: depending on WINDOW SIZE the relation changes to TOP POSITION (targetDivPosition)
+                          //
+                          if (targetDivPositionPlayerRight > targetDivPositionplaylistHeader) {
+                            window.scrollTo(0, targetDivPositionPlayerRight + targetDivPlaylistHeader.offsetParent.firstElementChild.clientHeight + scrollOffset);
+                          } else {
+                            window.scrollTo(0, targetDivPositionplaylistHeader + scrollOffset);
+                          }
 
-                        playlistHeader.addEventListener('click', function(event) {
-                          var scrollOffset = (window.innerWidth >= 720) ? -130 : -110;
-
-                          // scroll player to top position
-                          const targetDiv         = document.getElementById("playlist_header_{{player.id}}");
-                          const targetDivPosition = targetDiv.offsetTop;
-                          window.scrollTo(0, targetDivPosition + scrollOffset);
-                        }); // END EventListener 'click'
+                        }); // END EventListener 'click' largePlayerPlaylistHeader
 
                         // disable scrolling (if window viewport >= BS Medium and above)
                         document.getElementById('large_player_right').addEventListener('mouseenter', function() {
@@ -981,6 +985,23 @@ j1.adapter.amplitude = ((j1, window) => {
 
                       } // END enable|disable scrolling on playlist
 
+                      // set volume slider presets (for the player when exists|enabled)
+                      //
+                      var volumeSlider = document.getElementById('volume_slider_{{player.id}}');
+                      if (volumeSlider !== null) {
+                        const volumeMin     = parseInt('{{player.volume_slider.min_value}}'); 
+                        const volumeMax     = parseInt('{{player.volume_slider.max_value}}'); 
+                        const volumeValue   = parseInt('{{player.volume_slider.preset_value}}'); 
+                        const volumeStep    = parseInt('{{player.volume_slider.slider_step}}'); 
+  
+                        // if player has NO slider presets, use amplitude defaults
+                        //
+                        volumeSlider.min    = (isNaN(volumeMin))   ? parseInt('{{amplitude_defaults.player.volume_slider.min_value}}')    : volumeMin;
+                        volumeSlider.max    = (isNaN(volumeMax))   ? parseInt('{{amplitude_defaults.player.volume_slider.max_value}}')    : volumeMax;
+                        volumeSlider.value  = (isNaN(volumeValue)) ? parseInt('{{amplitude_defaults.player.volume_slider.preset_value}}') : volumeValue;
+                        volumeSlider.step   = (isNaN(volumeStep))  ? parseInt('{{amplitude_defaults.player.volume_slider.slider_step}}')  : volumeStep; 
+                      } // END volumeSlider exists
+
                     } // END large player UI events
                     {% endif %}
 
@@ -1011,6 +1032,16 @@ j1.adapter.amplitude = ((j1, window) => {
                   } // END if apiInitialized
                 }, 10); // END dependencies_met_api_initialized
 
+                playerExistsInPage   = (document.getElementById('{{player.id}}_parent') !== null) ? true : false;
+                pluginManagerEnabled = ('{{player.plugin_manager.enabled}}'.length > 0 && '{{player.plugin_manager.enabled}}' === 'true') ? true : playerDefaultPluginManager;
+
+                if (playerExistsInPage && pluginManagerEnabled && !pluginManagerRunOnce) {
+                  _this.pluginManager('{{player.plugin_manager.plugins}}');
+
+                  // make sure the plugin is loaded|run only ONCE
+                  pluginManagerRunOnce = true;
+                }
+
                 clearInterval(load_dependencies['dependencies_met_player_loaded_{{player.id}}']);
               } // END if xhrLoadState success
             }, 10); // END dependencies_met_html_loaded
@@ -1079,6 +1110,25 @@ j1.adapter.amplitude = ((j1, window) => {
       logger.debug('\n' + 'initializing title events for player on ID ' + '#' + playerID + ': finished');
     }, // END songEvents
 
+    // -------------------------------------------------------------------------
+    // pluginManager()
+    // 
+    // -------------------------------------------------------------------------
+    pluginManager: (plugin) => {
+//    if (plugin === 'ytp' && j1.adapter.amplitude['ytPlayerReady'] === undefined ) {
+      if (plugin === 'ytp') {        
+        var tech;
+        var techScript;
+
+        tech        = document.createElement('script');
+        tech.id     = 'tech_' + plugin;
+        tech.src    = '/assets/theme/j1/modules/amplitudejs/js/tech/' + plugin + '.js';
+        techScript  = document.getElementsByTagName('script')[0];
+
+        techScript.parentNode.insertBefore(tech, techScript);
+      }
+    }, // END pluginManager
+
     // -------------------------------------------------------------------------
     // messageHandler()
     // manage messages send from other J1 modules
@@ -1135,4 +1185,4 @@ j1.adapter.amplitude = ((j1, window) => {
   {{ cache|strip_empty_lines }}
 {%- endif -%}
 
-{%- assign cache = false -%}
+{%- assign cache = false -%}