j1-template 2024.3.20 → 2024.3.22

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

@@ -6,7 +6,7 @@ regenerate:                             true
 
 {% comment %}
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/adapter/js/amplitude.38.js
+ # ~/assets/theme/j1/adapter/js/amplitude.41.js
  # Liquid template to adapt J1 AmplitudeJS Apps
  #
  # Product/Info:
@@ -63,7 +63,7 @@ regenerate:                             true
 
 /*
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/adapter/js/amplitude.38.js
+ # ~/assets/theme/j1/adapter/js/amplitude.41.js
  # J1 Adapter for the amplitude module
  #
  # Product/Info:
@@ -87,34 +87,39 @@ regenerate:                             true
 
 j1.adapter.amplitude = ((j1, window) => {
 
-  // global settings
+  const isDev = (j1.env === "development" || j1.env === "dev") ? true : false;
+
+  // Adapter GLOBAL settings
   // ---------------------------------------------------------------------------
   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 consoleFilterSettings = {};
   var _this;
   var logger;
   var logText;
   var toJSON;
   var toText;
 
+  // --------------------------------------------------------------------------
   // date|time monitoring
-  //----------------------------------------------------------------------------
+  // ------------------------------------
   var startTime;
   var endTime;
   var startTimeModule;
   var endTimeModule;
   var timeSeconds;
 
-  // AmplitudeJS API settings
-  // ---------------------------------------------------------------------------
+  // --------------------------------------------------------------------------  
+  // AmplitudeJS GLOBAL settings
+  // ----------------------------------
+  const requiredForATP = false;
+
   const AT_PLAYER_STATE = {
     ENDED:          0,
     PLAYING:        1,
@@ -135,12 +140,16 @@ j1.adapter.amplitude = ((j1, window) => {
     6:              "changed",
   };
 
-  var playLists       = {};
-  var playersUILoaded = { state: false };
-  var apiInitialized  = { state: false };
-
-  var isFadingIn      = false;
-  var isFadingOut     = false;
+  var playLists                         = {};
+  var playersUILoaded                   = { state: false };
+  var apiInitialized                    = { state: false };
+  var playerCounter                     = 0;
+  var load_dependencies                 = {};
+  var playersProcessed                  = [];
+  var playersHtmlLoaded                 = false;
+  var processingPlayersFinished         = false;
+  var isFadingIn                        = false;
+  var isFadingOut                       = false;
 
   var amplitudePlayerState;
   var amplitudeDefaults;
@@ -156,40 +165,49 @@ j1.adapter.amplitude = ((j1, window) => {
   var pluginManagerEnabled;
   var playerExistsInPage;
 
-  // AmplitudeJS Player DEFAULT settings
+  
+  // AmplitudeJS DEFAULT settings
   // ---------------------------------------------------------------------------
-  var playerCounter                     = 0;
-  var load_dependencies                 = {};
-  var playersProcessed                  = [];
-  var playersHtmlLoaded                 = false;
-  var processingPlayersFinished         = false;
 
-  var playerSongElementHeigthDesktop    = {{amplitude_defaults.player.song_element_heigt_desktop}};
-  var playerSongElementHeigthMobile     = {{amplitude_defaults.player.song_element_heigth_mobile}};
+  // PLAYER settings
+  // ------------------------------------
+  var playerDefaultPluginManager        = {{amplitude_defaults.player.plugin_manager.enabled}};
+  var playerDefaultType                 = '{{amplitude_defaults.player.type}}';
+  var playerDefaultVolume               = {{amplitude_defaults.player.volume_slider.preset_value}};
+  var playerVolumeSliderStep            = {{amplitude_defaults.player.volume_slider.slider_step}};
+  var playerRepeat                      = {{amplitude_defaults.player.player_repeat}};
+  var playerShuffle                     = {{amplitude_defaults.player.player_shuffle}};
+  var playerPlayNextTitle               = {{amplitude_defaults.player.play_next_title}};
+  var playerPauseNextTitle              = {{amplitude_defaults.player.pause_next_title}};
+  var playerDelayNextTitle              = {{amplitude_defaults.player.delay_next_title}};
+  var playerForwardBackwardSkipSeconds  = {{amplitude_defaults.player.forward_backward_skip_seconds}};
+  var playerHoverPageScrollDisabled     = {{amplitude_defaults.player.player_hover_page_scroll_disabled}};
+
+  var playerSongElementHeigthMobile     = {{amplitude_defaults.player.player_song_element_heigth_mobile}};  
+  var playerSongElementHeigthDesktop    = {{amplitude_defaults.player.player_song_element_heigt_desktop}};
+  var playerScrollerSongElementMin      = {{amplitude_defaults.player.player_scroller_song_element_min}};
+  var playerScrollControl               = {{amplitude_defaults.player.player_scroll_control}};
   var playerAutoScrollSongElement       = {{amplitude_defaults.player.player_auto_scroll_song_element}};
 
-  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}}';
-  var playerRepeat                      = ('{{amplitude_defaults.player.repeat}}' === 'true') ? true : false;
-  var playerShuffle                     = ('{{amplitude_defaults.player.shuffle}}' === 'true') ? true : false;
-  var playerPlayNextTitle               = ('{{amplitude_defaults.player.play_next_title}}' === 'true') ? true : false;
-  var playerPauseNextTitle              = ('{{amplitude_defaults.player.pause_next_title}}' === 'true') ? true : false;
-  var playerDelayNextTitle              = '{{amplitude_defaults.player.delay_next_title}}';
-  var playerForwardBackwardSkipSeconds  = '{{amplitude_defaults.player.forward_backward_skip_seconds}}';
-
-  // AmplitudeJS settings curently NOT used
   // ---------------------------------------------------------------------------
-  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}}';
+  // PLAYLIST settings
+  // ------------------------------------
+  var playlistAudioInfo                 = {{amplitude_defaults.playlist.audio_info}};
+
+  // ---------------------------------------------------------------------------
+  // UNUSED settings
+  // ------------------------------------
+  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
   // ---------------------------------------------------------------------------
+  function forceJsError() {
+    throw new Error("GENERATED JavaScript error!");
+  }
 
   // ---------------------------------------------------------------------------
   // main
@@ -201,6 +219,20 @@ j1.adapter.amplitude = ((j1, window) => {
     // -------------------------------------------------------------------------
     init: (options) => {
 
+      // -----------------------------------------------------------------------
+      // set console log filters (early)
+      // -----------------------------------------------------------------------
+      // consoleFilterSettings = {
+      //   debug: false,
+      // };
+      // j1.api.consoleFilters.filter(consoleFilterSettings);  
+      j1.api.consoleFilters.filter();
+
+      // -----------------------------------------------------------------------
+      // set error log filters (JS early)
+      // -----------------------------------------------------------------------
+      // j1.api.errorFilters.filter();
+
       // -----------------------------------------------------------------------
       // default module settings
       // -----------------------------------------------------------------------
@@ -217,6 +249,11 @@ j1.adapter.amplitude = ((j1, window) => {
       amplitudePlaylists = $.extend({}, {{amplitude_playlists | replace: 'nil', 'null' | replace: '=>', ':' }});
       amplitudeOptions   = $.extend(true, {}, amplitudeDefaults, amplitudePlayers, amplitudePlaylists);
 
+      // 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
       // -----------------------------------------------------------------------
@@ -230,8 +267,8 @@ j1.adapter.amplitude = ((j1, window) => {
       j1.adapter.amplitude.data.ytPlayers   = {};
       
       // (initial) YT player data for later use (e.g. events)
+      j1.adapter.amplitude.data.playerSongElementHeigth     = playerSongElementHeigthDesktop;
       j1.adapter.amplitude.data.activePlayer                = 'not_set';
-      j1.adapter.amplitude.data.playerSongElementHeigth     = 'not_set';
       j1.adapter.amplitude.data.atpGlobals.activePlayerType = 'not_set';
       j1.adapter.amplitude.data.atpGlobals.ytpInstalled     = false;
       j1.adapter.amplitude.data.ytpGlobals.activePlayerType = 'not_set';
@@ -249,11 +286,19 @@ j1.adapter.amplitude = ((j1, window) => {
           startTimeModule = Date.now();
 
           _this.setState('started');
-          logger.debug('\n' + 'module state: ' + _this.getState());
-          logger.info('\n' + 'module is being initialized');
+          logger.debug('module state: ' + _this.getState());
+          logger.info('module is being initialized');
 
-          // set default viewport setting
-          j1.adapter.amplitude.data.playerSongElementHeigth = playerSongElementHeigthDesktop;
+          // test data for console filters
+          // -------------------------------------------------------------------
+          // console.warn("consoleFilters: Diese WARNUNG wird gefiltert.");
+          // isDev && logger.warn("consoleFilters: Diese WARNUNG wird gefiltert.");
+          // console.warn("consoleFilters: Diese Meldung wird nicht gefiltert.");
+          // isDev && logger.warn("consoleFilters: Diese Meldung wird nicht gefiltert.");
+
+          // test data for error filters
+          // -------------------------------------------------------------------
+          // forceJsError();
 
           // -------------------------------------------------------------------
           // create global playlist (songs)
@@ -292,20 +337,20 @@ j1.adapter.amplitude = ((j1, window) => {
           // initialize viewPort specific (GLOBAL) settings
           $(window).bind('resizeEnd', function() {
             var viewPortSize = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-              //do something, window hasn't changed size in 500ms
-              if (viewPortSize > 578) {
-                j1.adapter.amplitude.data.playerSongElementHeigth = playerSongElementHeigthDesktop;
-              } else {
-                j1.adapter.amplitude.data.playerSongElementHeigth = playerSongElementHeigthMobile;
-              }
+            //do something, window hasn't changed size in 500ms
+            if (viewPortSize > 578) {
+              j1.adapter.amplitude.data.playerSongElementHeigth = playerSongElementHeigthDesktop;
+            } else {
+              j1.adapter.amplitude.data.playerSongElementHeigth = playerSongElementHeigthMobile;
+            }
           });
 
           $(window).resize(function() {
-              if(this.resizeTO) clearTimeout(this.resizeTO);
-              this.resizeTO = setTimeout(function() {
-                  $(this).trigger('resizeEnd');
-              }, 500);
-          });
+            if (this.resizeTO) clearTimeout(this.resizeTO);
+            this.resizeTO = setTimeout(function() {
+              $(this).trigger('resizeEnd');
+            }, 500);
+         });
 
           clearInterval(dependencies_met_page_ready);
         } // END pageVisible
@@ -318,7 +363,7 @@ j1.adapter.amplitude = ((j1, window) => {
     // -------------------------------------------------------------------------
     songLoader: (songs) => {
 
-      logger.info('\n' + 'creating global playlist (API): started');
+      logger.info('creating global playlist (API): started');
 
       // -----------------------------------------------------------------------
       // initialize amplitude songs
@@ -354,9 +399,21 @@ j1.adapter.amplitude = ((j1, window) => {
                 continue;
               } else if (key === 'rating') {
                 song.rating = item[key];
-                continue;              
+                continue; 
+              } else if (key === 'playlist') {
+                song.playlist = item[key];
+                continue;                            
               } else if (key === 'shuffle') {
-                song.shuffle = item[key];
+                song.shuffle = ((!!item[key]) === false) ? playerShuffle : item[key];
+                continue;
+              } else if (key === 'repeat') {
+                song.repeat = ((!!item[key]) === false) ? playerRepeat : item[key];
+                continue;                
+              } else if (key === 'start') {
+                song.start = ((!!item[key]) === false) ? '00:00:00' : item[key];
+                continue;                 
+              } else if (key === 'end') {
+                song.end = ((!!item[key]) === false) ? '00:00:00' : item[key];
                 continue;                 
               } else {
                 song[key] = item[key];
@@ -369,7 +426,7 @@ j1.adapter.amplitude = ((j1, window) => {
 
       {% endif %} {% endfor %}
 
-      logger.info('\n' + 'creating global playlist (API): finished');
+      logger.info('creating global playlist (API): finished');
     }, // END songLoader
 
     // -------------------------------------------------------------------------
@@ -381,7 +438,7 @@ j1.adapter.amplitude = ((j1, window) => {
       // -----------------------------------------------------------------------
       // initialize HTML portion (UI) for all players configured|enabled
       // -----------------------------------------------------------------------
-      logger.info('\n' + 'loading player HTML components (UI): started');
+      logger.info('loading player HTML components (UI): started');
 
       {% for player in amplitude_options.players %} {% if player.enabled %}
         {% assign xhr_data_path = amplitude_options.xhr_data_path %}
@@ -392,7 +449,7 @@ j1.adapter.amplitude = ((j1, window) => {
         playerExistsInPage = ($('#' + '{{xhr_container_id}}')[0] !== undefined) ? true : false;
         if (playerExistsInPage) {
           playerCounter++;
-          logger.debug('\n' + 'load player UI on ID #{{player.id}}: started');
+          logger.debug('load player UI on ID #{{player.id}}: started');
 
           j1.loadHTML({
             xhr_container_id: '{{xhr_container_id}}',
@@ -416,7 +473,7 @@ j1.adapter.amplitude = ((j1, window) => {
 
             if (xhrLoadState === 'success') {
               playersProcessed.push('{{xhr_container_id}}');
-              logger.debug('\n' + 'load player UI on ID #{{player.id}}: finished');
+              logger.debug('load player UI on ID #{{player.id}}: finished');
 
               clearInterval(load_dependencies['dependencies_met_html_loaded_{{player.id}}']);
             }
@@ -432,7 +489,7 @@ j1.adapter.amplitude = ((j1, window) => {
         }
 
         if (processingPlayersFinished) {
-          logger.info('\n' + 'loading player HTML components (UI): finished');
+          logger.info('loading player HTML components (UI): finished');
 
           clearInterval(load_dependencies['dependencies_met_players_loaded']);
           playersLoaded.state = true;
@@ -446,7 +503,7 @@ j1.adapter.amplitude = ((j1, window) => {
     // -------------------------------------------------------------------------
     initApi: (songlist) => {
 
-      logger.info('\n' + 'initialze API: started');
+      logger.info('initialze API: started');
 
       {% comment %} collect playlists
       --------------------------------------------------------------------------  {% endcomment %}
@@ -468,7 +525,6 @@ j1.adapter.amplitude = ((j1, window) => {
           {% capture song_item %}
           {
             "name":           "{{item.title}}",
-            // "track":          "{{item.track}}",
             "artist":         "{{item.artist}}",
             "playlist":       "{{item.playlist}}",
             "album":          "{{item.name}}",
@@ -478,6 +534,7 @@ j1.adapter.amplitude = ((j1, window) => {
             "start":          "{{item.start}}",
             "end":            "{{item.end}}",
             "shuffle":        "{{item.shuffle}}",
+            "repeat":         "{{item.repeat}}",
             "duration":       "{{item.duration}}",
             // "audio_fade_in":  "{{item.audio_fade_in}}",
             // "audio_fade_out": "{{item.audio_fade_out}}",
@@ -529,14 +586,14 @@ j1.adapter.amplitude = ((j1, window) => {
         callbacks: {
           initialized: function() {
             var amplitudeConfig = Amplitude.getConfig();
-            logger.info('\n' + 'initialze API: finished');
+            logger.info('initialze API: finished');
             // indicate api successfully initialized
             apiInitialized.state = true;
           },
           onInitError: function() {
             // indicate api failed on initialization
             apiInitialized.state = false;
-            console.error('\n' + 'Amplitude API failed on initialization');
+            console.error('Amplitude API failed on initialization');
           },
           play: function() {
             // make sure the player is playing
@@ -572,7 +629,7 @@ j1.adapter.amplitude = ((j1, window) => {
             var currentState = Amplitude.getPlayerState();
             onPlayerStateChange(4);
             if (playerDelayNextTitle) {
-              logger.debug('\n' + 'delay on previous title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
+              logger.debug('delay on previous title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
             }
 
             if (playerPauseNextTitle) {
@@ -580,7 +637,7 @@ j1.adapter.amplitude = ((j1, window) => {
               if (amplitudePlayerState === 'playing' || amplitudePlayerState === 'stopped' ) {
                 setTimeout(() => {
                   // pause playback of next title
-                  logger.debug('\n' + 'paused on next title: ' + songMetaData.name);
+                  logger.debug('paused on next title: ' + songMetaData.name);
                   Amplitude.pause();
                 }, 150);
               } // END if playing
@@ -591,7 +648,7 @@ j1.adapter.amplitude = ((j1, window) => {
           next: function() {
             onPlayerStateChange(5);
             if (playerDelayNextTitle) {
-              logger.debug('\n' + 'delay on next title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
+              logger.debug('delay on next title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
             }
 
             if (playerPauseNextTitle) {
@@ -599,7 +656,7 @@ j1.adapter.amplitude = ((j1, window) => {
               if (amplitudePlayerState === 'playing' || amplitudePlayerState === 'stopped' ) {
                 setTimeout(() => {
                   // pause playback of next title
-                  logger.debug('\n' + 'paused on next title: ' + songMetaData.name);
+                  logger.debug('paused on next title: ' + songMetaData.name);
                   Amplitude.pause();
                 }, 150);
               } // END if playing
@@ -618,64 +675,12 @@ j1.adapter.amplitude = ((j1, window) => {
         // },
 
         continue_next:    playerPlayNextTitle,
-        volume:           playerVolumeValue,
+        volume:           playerDefaultVolume,
         volume_decrement: playerVolumeSliderStep,
         volume_increment: playerVolumeSliderStep
 
       }); // END Amplitude init
 
-      // -----------------------------------------------------------------------
-      // timestamp2seconds
-      //
-      // TODO: Add support for timestamp w/o hours like mm:ss
-      // -----------------------------------------------------------------------
-      function timestamp2seconds(timestamp) {
-        // split timestamp
-        const parts = timestamp.split(':');
-
-        // check timestamp format
-        if (parts.length !== 3) {
-          // return "invalid timestamp";
-          return false;
-        }
-
-        // convert parts to integers
-        const hours   = parseInt(parts[0], 10);
-        const minutes = parseInt(parts[1], 10);
-        const seconds = parseInt(parts[2], 10);
-
-        // check valid timestamp values
-        if (isNaN(hours) || isNaN(minutes) || isNaN(seconds) ||
-            hours   < 0 || hours   > 23 ||
-            minutes < 0 || minutes > 59 ||
-            seconds < 0 || seconds > 59) {
-          return "invalid timestamp";
-        }
-
-        const totalSeconds = (hours * 3600) + (minutes * 60) + seconds;
-
-        return totalSeconds;
-      } // END timestamp2seconds
-
-      // -----------------------------------------------------------------------
-      // seconds2timestamp
-      // -----------------------------------------------------------------------
-      function seconds2timestamp(seconds) {
-
-        if (isNaN(seconds)) {
-          return false;
-        }
-
-        const hours         = Math.floor(seconds / 3600);
-        const minutes       = Math.floor((seconds % 3600) / 60);
-        const remainSeconds = seconds % 60;
-        const tsHours       = hours.toString().padStart(2, '0');
-        const tsMinutes     = minutes.toString().padStart(2, '0');
-        const tsSeconds     = remainSeconds.toString().padStart(2, '0');
-      
-        return `${tsHours}:${tsMinutes}:${tsSeconds}`;
-      } // END seconds2timestamp
-
       // -----------------------------------------------------------------------
       // atpFadeInAudio
       // -----------------------------------------------------------------------
@@ -708,7 +713,7 @@ j1.adapter.amplitude = ((j1, window) => {
         currentStep  = 1;
 
         if (volumeSlider === undefined || volumeSlider === null) {
-          logger.warn('\n' + 'no volume slider found at playerID: ' + settings.playerID);
+          isDev && logger.warn('no volume slider found at playerID: ' + settings.playerID);
           return;
         }
 
@@ -785,7 +790,7 @@ j1.adapter.amplitude = ((j1, window) => {
               songs = Amplitude.getSongsInPlaylist(playlist);
 
               if (songIndex === songs.length-1) {
-                logger.debug('\n' + 'restore player volume on last trackID|volume at: ' + trackID + '|' + defaultVolume);
+                logger.debug('restore player volume on last trackID|volume at: ' + trackID + '|' + defaultVolume);
                 volumeSlider.value  =  defaultVolume;              
               }
 
@@ -798,196 +803,115 @@ j1.adapter.amplitude = ((j1, window) => {
       } // END atpFadeAudioOut
 
       // -----------------------------------------------------------------------
-      // onPlayerStateChange
+      // doNothingOnStateChange(state)
       //
-      // update AT player on state change        
+      // wrraper for states that are not processed
       // -----------------------------------------------------------------------
-      function onPlayerStateChange(state) {
-        var playerID, playlist, songs, songIndex, songIndex, trackID,
-            songStart, songEnd, songStartSec, songEndSec,
-            songStartTS, songEndTS, songMetaData, currentVolume,
-            activeSongMetadata, fadeAudio;
-
-        activeSongMetadata  = Amplitude.getActiveSongMetadata();
+      function doNothingOnStateChange(state) {
+        var playlist, playerID, songMetaData,
+            songIndex, trackID;
+        
         playlist      = Amplitude.getActivePlaylist();
-        // playlist   = activeSongMetadata.playlist 
         playerID      = playlist + '_large';
-        songs         = Amplitude.getSongsInPlaylist(playlist);
         songMetaData  = Amplitude.getActiveSongMetadata();
         songIndex     = songMetaData.index;
         trackID       = songIndex + 1;
 
-        if (state === AT_PLAYER_STATE.UNSTARTED) {
-          // logger.debug('\n' + 'current audio state: unstarted');
-          return;
-        } 
+        isDev && logger.warn(`DO NOTHING on StateChange for playlist: ${playlist} at trackID|state: ${trackID}|${AT_PLAYER_STATE_NAMES[state]}`);
 
-        if (state === AT_PLAYER_STATE.STOPPED) {
-          logger.debug('\n' + 'audio player on playlist: ' + playlist + ' at trackID|state: ' + trackID + '|' + AT_PLAYER_STATE_NAMES[state]);
-          return;
-        }
+      } // END doNothingOnStateChange
 
-        if (state === AT_PLAYER_STATE.PAUSED) {
-          logger.debug('\n' + 'audio player on playlist: ' + playlist + ' at trackID|state: ' + trackID + '|' + AT_PLAYER_STATE_NAMES[state]);
-          return;
-        }
+      // -----------------------------------------------------------------------
+      // processOnStateChangePlaying()
+      //
+      // wrraper to process the ACTIVE player on state PLAYING
+      // -----------------------------------------------------------------------      
+      function processOnStateChangePlaying(state) {
+        var songMetaData, songIndex,  playList, trackID;
 
-        if (state === AT_PLAYER_STATE.PREVIOUS) {
-          logger.debug('\n' + 'audio player on playlist: ' + playlist + ' at trackID|state: ' + trackID + '|' + AT_PLAYER_STATE_NAMES[state]);
-          return;
-        }
+        songMetaData  = Amplitude.getActiveSongMetadata();
+        songIndex     = songMetaData.index;
+        playList      = Amplitude.getActivePlaylist();
+        trackID       = songIndex + 1;
 
-        if (state === AT_PLAYER_STATE.NEXT) {
-          logger.debug('\n' + 'audio player on playlist: ' + playlist + ' at trackID|state: ' + trackID + '|' + AT_PLAYER_STATE_NAMES[state]);
-          return;
-        }
+        logger.debug(`PLAY audio on ATP at playlist|trackID: ${playList}|${trackID}`);
+        // logger.debug(`PLAY audio on processOnStateChangePlaying for playlist \'${playList}\' at trackID|state: ${trackID}|${AT_PLAYER_STATE_NAMES[state]}`);   
 
-        if (state === AT_PLAYER_STATE.CHANGED) {
-          logger.debug('\n' + 'audio player on playlist: ' + playlist + ' at trackID|state: ' + trackID + '|' + AT_PLAYER_STATE_NAMES[state]);
-          return;
-        }
+        // save player GLOBAL data for later use (e.g. events)
+        j1.adapter.amplitude.data.activePlayer  = 'atp';
 
-        if (state === AT_PLAYER_STATE.PLAYING) {
-          var playList, activePlayist, playerID, playerType,
-              activePlayerType, startVolume, songIndex,
-              ratingIndex, rating, ratingElement,
-              screenControlRatingElements, screenControlRating;
+        // set song (manually) active at index in playlist
+        _this.setSongActive(playList, songIndex);
 
-          songMetaData  = Amplitude.getActiveSongMetadata();
-          songIndex     = songMetaData.index;
-          playList      = songMetaData.playlist;
-          playList      = Amplitude.getActivePlaylist();
-          trackID       = songIndex + 1;
+        // stop active YT players
+        // ---------------------------------------------------------------------
+        _this.atpStopParallelActivePlayers(j1.adapter.amplitude.data.ytPlayers);
 
-          songStartTS   = songMetaData.start;
-          songEndTS     = songMetaData.end;
-          songStartSec  = timestamp2seconds(songStartTS);
-          songEndSec    = timestamp2seconds(songEndTS);
-          startVolume   = Amplitude.getVolume();
+        // update song rating in playlist-screen|meta-container
+        // ---------------------------------------------------------------------
+        _this.atpUpdatMetaContainers(songMetaData);
 
-          logger.debug('\n' + 'audio player on playlist: ' + playList + ' at trackID|state: ' + trackID + '|' + AT_PLAYER_STATE_NAMES[state]);
+        // scroll active song in players playlist
+        // ---------------------------------------------------------------------
+        _this.atPlayerScrollToActiveElement(songMetaData);
 
-          // update song rating in playlist-screen|meta-container
-          // -------------------------------------------------------------------
+        // process audio for AT players at configured START position
+        // ---------------------------------------------------------------------
+        _this.atpProcessAudioStartPosition();
 
-          // search for ACTIVE screenControlRatingElement
-          screenControlRating         = null;
-          screenControlRatingElements = document.getElementsByClassName('audio-rating-screen-controls');
-          for (let i=0; i<screenControlRatingElements.length; i++) {
-            ratingElement     = screenControlRatingElements[i];
-            rating            = parseInt(songMetaData.rating);
-            playerType        = ratingElement.dataset.playerType;
-            activePlayerType  = j1.adapter.amplitude.data.atpGlobals.activePlayerType;
-            activePlayist     = songMetaData.playlist
-
-            if (ratingElement.dataset.amplitudePlaylist === activePlayist && playerType === activePlayerType) {
-              ratingIndex = i;
-              screenControlRating = ratingElement;
-              break;
-            }
-          }
+        // process audio for AT players at configured END position
+        // ---------------------------------------------------------------------
+        _this.atpProcessAudioEndPosition();
 
-          // set the rating for ACTIVE screenControlRatingElements
-          if (screenControlRating) {
-            if (rating) {
-              screenControlRatingElements[ratingIndex].innerHTML = '<img src="/assets/image/pattern/rating/scalable/' + rating + '-star.svg"' + 'alt="song rating">';
-            } else {
-              screenControlRatingElements[ratingIndex].innerHTML = '';
-            }
-          } // END if screenControlRating
-
-          // process audio for configured START position
-          // -------------------------------------------------------------------
-          var checkIsFading = setInterval (() => {
-            if (!isFadingIn) {
-              var currentAudioTime = Amplitude.getSongPlayedSeconds();
-              if (songStartSec && currentAudioTime <= songStartSec) {
-                var songDurationSec = timestamp2seconds(songMetaData.duration); 
-
-                // seek audio to configured START position
-                // NOTE: use setSongPlayedPercentage for seeking to NOT
-                //       generation any addition state changes like stopped
-                //       or playing
-                logger.debug('\n' + 'seek audio in on playlist: ' + playList + ' at|to trackID|timestamp: ' + trackID + '|' + songStartTS);
-                Amplitude.setSongPlayedPercentage((songStartSec / songDurationSec) * 100);
-
-                // fade-in audio (if enabled)
-                var fadeAudioIn = (songMetaData.audio_fade_in === 'true') ? true : false;
-                if (fadeAudioIn) {
-                  logger.debug('\n' + 'faden audio in on playlist: ' + playList + ' at|to trackID|timestamp: ' + trackID + '|' + songStartTS);
-                  atpFadeInAudio({ playerID: playerID });
-                } // END if fadeAudio
-
-              } // END if songStartSec
-
-              clearInterval(checkIsFading);
-            }
-          }, 100); // END checkIsFading
-
-          // check|process audio for configured END position
-          // -------------------------------------------------------------------
-          if (songEndSec > songStartSec) {
-            var checkIsOnVideoEnd = setInterval(() => {
-
-              if (!isFadingOut) {              
-                var currentAudioTime  = Amplitude.getSongPlayedSeconds();
-                var songMetaData      = Amplitude.getActiveSongMetadata();
-                var songEndTS         = songMetaData.end;
-                var songEndSec        = timestamp2seconds(songEndTS);
-
-                if (currentAudioTime > songEndSec) {                
-                  songMetaData  = Amplitude.getActiveSongMetadata();             
-                  songIndex     = songMetaData.index;
-                  trackID       = songIndex + 1;
-
-                  // seek audio out to total end END position
-                  // NOTE: use setSongPlayedPercentage for seeking to NOT
-                  //       generation any addition state changes like stopped
-                  //       or playing                  
-                  logger.debug('\n' + 'seek audio out to end on playlist: ' + playList + ' at trackID|timestamp: ' + trackID + '|' + songEndTS);
-                  Amplitude.setSongPlayedPercentage(99.99);
-                  
-                  // fade-out audio (if enabled)
-                  var fadeAudioOut = (songMetaData.audio_fade_out === 'true') ? true : false;
-                  if (fadeAudioOut) {
-                    logger.debug('\n' + 'fade audio out on playlist: ' + playList + ' at|to trackID|timestamp: ' + trackID + '|' + songEndTS);
-                    atpFadeAudioOut({ playerID: playerID });
-                  } // END if fadeAudio
-
-                  clearInterval(checkIsOnVideoEnd);
-                } // END if currentAudioTime
-
-              } // END if !isFading
-
-            }, 100); // END checkIsOnVideoEnd
-          } // END if songEndSec
-
-          // stop active YT players running in parallel
-          // -------------------------------------------------------------------
-          const ytPlayers = Object.keys(j1.adapter.amplitude.data.ytPlayers);
-          for (let i=0; i<ytPlayers.length; i++) {
-            const ytPlayerID        = ytPlayers[i];
-            const playerProperties  = j1.adapter.amplitude.data.ytPlayers[ytPlayerID];
-
-            var player        = j1.adapter.amplitude['data']['ytPlayers'][ytPlayerID]['player'];
-            var playerState   = (player.getPlayerState() > 0) ? player.getPlayerState() : 6;
-            var ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
-
-            // if (ytPlayerState === 'playing' || ytPlayerState === 'paused' || ytPlayerState === 'buffering' || ytPlayerState === 'cued' || ytPlayerState === 'unstarted') {
-            if (ytPlayerState === 'playing' || ytPlayerState === 'paused') {
-              logger.debug('\n' + `STOP YT player at onPlayerStateChange for id: ${ytPlayerID}`);
-              player.stopVideo();
-              j1.adapter.amplitude.data.ytpGlobals.activeIndex = 0;
-            }
+        // save YT player data for later use (e.g. events)
+        // ---------------------------------------------------------------------
+        j1.adapter.amplitude.data.activePlayer = 'atp';
+        j1.adapter.amplitude.data.atpGlobals.activePlayerType = 'large';
 
-          } // END stop active YT players
+      }; // END processOnStateChangePlaying
 
-        } // END state AT_PLAYER_STATE PLAYING
-
-        if (state === AT_PLAYER_STATE.ENDED) {
-          // Amplitude.setVolume(50);
-        } // END state AT_PLAYER_STATE.ENDED
+      // -----------------------------------------------------------------------
+      // onPlayerStateChange
+      //
+      // process all AT Player specific state changes
+      // -----------------------------------------------------------------------
+      // NOTE:
+      // The AT API fires a lot of INTERMEDIATE states. MOST of them gets
+      // ignored (do nothing). Currently, only state PLAYING is actively
+      // processed.
+      // -----------------------------------------------------------------------      
+      function onPlayerStateChange(state) {
 
+        // process all state changes fired by AT API
+        // --------------------------------------------------------------------- 
+        switch(state) {
+          case AT_PLAYER_STATE.UNSTARTED:
+            doNothingOnStateChange(AT_PLAYER_STATE.UNSTARTED);
+            break;
+          case AT_PLAYER_STATE.STOPPED:
+            doNothingOnStateChange(AT_PLAYER_STATE.STOPPED);
+            break;            
+          case AT_PLAYER_STATE.PAUSED:
+            doNothingOnStateChange(AT_PLAYER_STATE.PAUSED);
+            break;
+          case AT_PLAYER_STATE.PREVIOUS:
+            doNothingOnStateChange(AT_PLAYER_STATE.PREVIOUS);
+            break;            
+          case AT_PLAYER_STATE.NEXT:
+            doNothingOnStateChange(AT_PLAYER_STATE.NEXT);
+            break;
+          case AT_PLAYER_STATE.CHANGED:
+            doNothingOnStateChange(AT_PLAYER_STATE.CHANGED);
+            break;
+          case AT_PLAYER_STATE.PLAYING:
+            processOnStateChangePlaying(AT_PLAYER_STATE.PLAYING);
+            break;
+          case AT_PLAYER_STATE.ENDED:
+            doNothingOnStateChange(AT_PLAYER_STATE.ENDED);
+            break;
+          default:
+            logger.error(`UNKNOWN state on StateChange fired: ${state}`);
+        } // END switch state
       } // END onPlayerStateChange
 
     }, // END initApi
@@ -996,30 +920,30 @@ j1.adapter.amplitude = ((j1, window) => {
     // monitorPlayerActiveElementChanges
     //
     // -------------------------------------------------------------------------
-    monitorPlayerActiveElementChanges: () => {
-      // var playerSongContainers = document.getElementsByClassName("large-player-title-list");
-      var playerSongContainers = document.getElementsByClassName("large-player-title-list");
-      for (var i=0; i<playerSongContainers.length; i++) {
-        var scrollableList = document.getElementById(playerSongContainers[0].id);
-        var observer = new MutationObserver((mutationsList, observer) => {
-          for (const mutation of mutationsList) {
-            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-              // Überprüfen, ob das geänderte Element jetzt die aktive Klasse besitzt
-              if (mutation.target.classList.contains('amplitude-active-song-container')) {
-                scrollableList.scrollTop = mutation.target.offsetTop;
-              }
-            }
-          }
-        }); // END observer
-
-        // Optionen für den Observer: Nur Änderungen an Attributen beobachten
-        observer.observe(scrollableList, {
-          attributes: true,
-          subtree:    true
-        }); // END observer options
-
-      } // END for playerSongContainers
-    }, // END monitorPlayerActiveElementChanges
+    // monitorPlayerActiveElementChanges: () => {
+    //   // var playerSongContainers = document.getElementsByClassName("large-player-title-list");
+    //   var playerSongContainers = document.getElementsByClassName("large-player-title-list");
+    //   for (var i=0; i<playerSongContainers.length; i++) {
+    //     var scrollableList = document.getElementById(playerSongContainers[0].id);
+    //     var observer = new MutationObserver((mutationsList, observer) => {
+    //       for (const mutation of mutationsList) {
+    //         if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+    //           // Überprüfen, ob das geänderte Element jetzt die aktive Klasse besitzt
+    //           if (mutation.target.classList.contains('amplitude-active-song-container')) {
+    //             scrollableList.scrollTop = mutation.target.offsetTop;
+    //           }
+    //         }
+    //       }
+    //     }); // END observer
+
+    //     // Optionen für den Observer: Nur Änderungen an Attributen beobachten
+    //     observer.observe(scrollableList, {
+    //       attributes: true,
+    //       subtree:    true
+    //     }); // END observer options
+
+    //   } // END for playerSongContainers
+    // }, // END monitorPlayerActiveElementChanges
 
     // -------------------------------------------------------------------------
     // initPlayerUiEvents
@@ -1031,7 +955,7 @@ j1.adapter.amplitude = ((j1, window) => {
           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');
+          logger.info('initialize player specific UI events: started');
           
           {% for player in amplitude_options.players %} {% if player.enabled %}
             {% assign xhr_data_path = amplitude_options.xhr_data_path %}
@@ -1056,36 +980,59 @@ j1.adapter.amplitude = ((j1, window) => {
                 var playListName  = '{{player.playlist.name}}';
                 var playListTitle = '{{player.playlist.title}}';
 
-                logger.debug('\n' + 'initialize audio player instance on id: {{player.id}}');
+                logger.debug('initialize audio player instance on id: {{player.id}}');
 
                 // set song (title) specific audio info links
                 // -------------------------------------------------------------
-                if (playerAudioInfo) {
+                if (playlistAudioInfo) {
                   var infoLinks = document.getElementsByClassName('audio-info-link');
                   _this.setAudioInfo(infoLinks);
                 }
 
                 // set player specific UI events
                 // -------------------------------------------------------------
-                logger.debug('\n' + 'setup audio player specific UI events on ID #{{player.id}}: started');
+                logger.debug('setup audio player specific UI events on ID #{{player.id}}: started');
 
                 var dependencies_met_api_initialized = setInterval (() => {
                   if (apiInitialized.state) {
                     amplitudePlayerState = Amplitude.getPlayerState();
 
+                    {% comment %} process UI events for all MINI Players
+                    ============================================================ {% endcomment %}
                     {% if player.id contains 'mini' %}
-                    // ---------------------------------------------------------
-                    // START mini player UI events
-                    //
                     if (document.getElementById('{{player.id}}') !== null) {
 
-                      // add listeners to all progress bars found (mini-player)
-                      // getElementsByClassName returns an Array-like object
+                      {% comment %} PREPARED event listener for LATER use
+                      ----------------------------------------------------------
+                      // click on play_pause button (MINI player)
+                      var miniPlayerPlayPauseButton = document.getElementsByClassName('mini-player-play-pause');
+                      for (var i=0; i<miniPlayerPlayPauseButton.length; i++) {
+                        if (miniPlayerPlayPauseButton[i].dataset.amplitudeSource === 'youtube') {
+                          // do nothing (managed by plugin)
+                        } else {
+                          // var currentPlaylist = compactPlayerPlayPauseButton[i].dataset.amplitudePlaylist;
+                          // if (currentPlaylist === playListName) {
+                          if (miniPlayerPlayPauseButton[i].id === 'mini_player_play_pause_{{player.id}}') {
+                            miniPlayerPlayPauseButton[i].addEventListener('click', function(event) {
+                              var ytpPlayer;
+
+                              // save YT player data for later use (e.g. events)
+                              j1.adapter.amplitude.data.activePlayer = 'atp';
+                              j1.adapter.amplitude.data.atpGlobals.activePlayerType = 'mini';
+
+                            }); // addEventListener END
+                          } // END if miniPlayerPlayPauseButton
+                        } // END if ATP
+                      } // END for miniPlayerPlayPauseButton
+                      ----------------------------------------------------------
+                      {% endcomment %}
+
+                      // add listeners to all progress bars found (MINI Player)
                       // -------------------------------------------------------
                       var progressBars = document.getElementsByClassName("mini-player-progress");
                       for (var i=0; i<progressBars.length; i++) {
                         if (progressBars[i].dataset.amplitudeSource === 'youtube') {
-                          // do nothing
+                          // do nothing for YTP (managed by plugin)
                         } else {
                           progressBars[i].addEventListener('click', function(event) {
                             var offset = this.getBoundingClientRect();
@@ -1093,43 +1040,29 @@ j1.adapter.amplitude = ((j1, window) => {
   
                             Amplitude.setSongPlayedPercentage(
                               (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
-                          }); // END EventListener 'click'
-                        }
-                      } // END for
 
-                      // click on play_pause button (MINI player)
-                      var miniPlayerPlayPauseButton = document.getElementsByClassName('mini-player-play-pause');
-                      for (var i=0; i<miniPlayerPlayPauseButton.length; i++) {
-                        if (miniPlayerPlayPauseButton[i].dataset.amplitudeSource === 'youtube') {
-                          // do nothing
-                        } else {
-                          var currentPlaylist = miniPlayerPlayPauseButton[i].dataset.amplitudePlaylist;
-                          if (currentPlaylist === playList) {
-                            miniPlayerPlayPauseButton[i].addEventListener('click', function(event) {
-                              // do nothing
-                            });
-                          }
-                        }
-                      } // END play_pause button (MINI player)
+                          }); // END addEventListener
+                        } // END if progressBars
+                      } // END for progressBars
 
                     } // END mini player UI events
                     {% endif %}
 
-                    {% if player.id contains 'compact' %}
-                    // ---------------------------------------------------------
-                    // START compact player UI events
-                    //                    
+
+                    {% comment %} process UI events for all COMPACT Players
+                    ============================================================ {% endcomment %}
+                    {% if player.id contains 'compact' %}                 
                     if (document.getElementById('{{player.id}}') !== null) {
 
                       // show|hide scrollbar in playlist (compact player)
                       // -------------------------------------------------------                   
                       const songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
-                      if (songsInPlaylist.length <= 8) {
+                      if (songsInPlaylist.length <= playerScrollerSongElementMin) {
                         const titleListCompactPlayer = document.getElementById('compact_player_title_list_' + playListName);
                         if (titleListCompactPlayer !== null) {
                           titleListCompactPlayer.classList.add('hide-scrollbar');
                         }
-                      }
+                      } // END if songsInPlaylist
 
                       // show playlist
                       // -------------------------------------------------------
@@ -1159,7 +1092,8 @@ j1.adapter.amplitude = ((j1, window) => {
                               $('body').addClass('stop-scrolling');
                             }
                           }
-                        }); // END EventListener 'click' (compact player|show playlist)
+
+                        }); // END EventListener
                       } // END if showPlaylist
 
                       // hide playlist
@@ -1170,7 +1104,7 @@ j1.adapter.amplitude = ((j1, window) => {
                           var playlistScreen = document.getElementById("playlist_screen_{{player.id}}");
 
                           playlistScreen.classList.remove('slide-in-top');
-                          playlistScreen.classList.add('slislide-out-top');
+                          playlistScreen.classList.add('slide-out-top');
                           playlistScreen.style.display = "none";
                           playlistScreen.style.zIndex = "1";
 
@@ -1178,17 +1112,16 @@ j1.adapter.amplitude = ((j1, window) => {
                           if ($('body').hasClass('stop-scrolling')) {
                             $('body').removeClass('stop-scrolling');
                           }
-                        }); // END EventListener 'click' (compact player|show playlist)
-                      } // END if hidePlaylist
 
+                        }); // END addEventListener
+                      } // 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
+                          // do nothing for YTP (managed by plugin)
                         } else {
                           progressBars[i].addEventListener('click', function(event) {
                             var offset = this.getBoundingClientRect();
@@ -1196,56 +1129,99 @@ j1.adapter.amplitude = ((j1, window) => {
 
                             Amplitude.setSongPlayedPercentage(
                               (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
-                          }); // END EventListener 'click'
-                        }
-                      } // END for
 
+                            }); // END EventListener 'click'
+                        } // END if progressBars
+                      } // END for progressBars
 
-                      // click on Next|Previous Buttons (COMPACT player)
+                      // add listeners to all Next Buttons found (COMPACT player)
                       // -------------------------------------------------------
 
-                      // add listeners to all Next Buttons found
-                      var largeNextButtons = document.getElementsByClassName("compact-player-next");
-                      for (var i=0; i<largeNextButtons.length; i++) {
-                        if (largeNextButtons[i].dataset.amplitudeSource === 'youtube') {
-                          // do nothing
+                      {% comment %} PREPARED event listener for LATER use
+                      ----------------------------------------------------------
+                      var compactNextButtons = document.getElementsByClassName("compact-player-next");
+                      for (var i=0; i<compactNextButtons.length; i++) {
+                        if (compactNextButtons[i].dataset.amplitudeSource === 'youtube') {
+                          // do nothing for YTP (managed by plugin)
                         } else {                        
-                          if (largeNextButtons[i].id === 'compact_player_next_{{player.id}}') {
-                            largeNextButtons[i].addEventListener('click', function(event) {
-                              // do nothing
+                          if (compactNextButtons[i].id === 'compact_player_next_{{player.id}}' || compactNextButtons[i].id === 'compact_player_list_next_{{player.id}}') {
+                            compactNextButtons[i].addEventListener('click', function(event) {
+                              var atpPlayerID     = this.id;
+                              var atpPlayerActive = atpPlayerID.split('_');
+    
+                              j1.adapter.amplitude.data.atpGlobals.activePlayerType = 'compact';
+
                             }); // END EventListener 'click'
                           } // END if ID
                         }
                       } // END Next Buttons (COMPACT player)
+                      ----------------------------------------------------------
+                      {% endcomment %}
 
+                      {% comment %} PREPARED event listener for LATER use
+                      ----------------------------------------------------------
                       // add listeners to all Previous Buttons found
                       var compactPreviousButtons = document.getElementsByClassName("compact-player-previous");
                       for (var i=0; i<compactPreviousButtons.length; i++) {
                         if (compactPreviousButtons[i].dataset.amplitudeSource === 'youtube') {
-                          // do nothing
+                          // do nothing for YTP (managed by plugin)
                         } else { 
-                          if (compactPreviousButtons[i].id === 'compact_player_previous_{{player.id}}') {
+                          if (compactPreviousButtons[i].id === 'compact_player_previous_{{player.id}}' || compactPreviousButtons[i].id === 'compact_player_list_previous_{{player.id}}') {
                             compactPreviousButtons[i].addEventListener('click', function(event) {
-                              // do nothing
+                              var atpPlayerID     = this.id;
+                              var atpPlayerActive = atpPlayerID.split('_');
+    
+                              j1.adapter.amplitude.data.atpGlobals.activePlayerType = 'compact';
+
                             }); // END EventListener 'click'
                           } // END if ID
                         }
                       } // END Previous Buttons (COMPACT player)
+                      ----------------------------------------------------------
+                      {% endcomment %}
 
+                      {% comment %} PREPARED event listener for LATER use
+                      ---------------------------------------------------------- 
                       // click on play_pause button (COMPACT player)
                       var compactPlayerPlayPauseButton = document.getElementsByClassName('compact-player-play-pause');
                       for (var i=0; i<compactPlayerPlayPauseButton.length; i++) {
                         if (compactPlayerPlayPauseButton[i].dataset.amplitudeSource === 'youtube') {
                           // do nothing (managed by plugin)
                         } else {
-                          var currentPlaylist = compactPlayerPlayPauseButton[i].dataset.amplitudePlaylist;
-                          if (currentPlaylist === playList) {
+                          // var currentPlaylist = compactPlayerPlayPauseButton[i].dataset.amplitudePlaylist;
+                          // if (currentPlaylist === playListName) {
+                          if (compactPlayerPlayPauseButton[i].id === 'compact_player_play_pause_{{player.id}}' || compactPlayerPlayPauseButton[i].id === 'compact_player_list_play_pause_{{player.id}}') {
                             compactPlayerPlayPauseButton[i].addEventListener('click', function(event) {
-                              // do nothing
-                            });
+                              var ytpPlayer;
+                              var ytpPlayerState;
+                              var playerState;
+
+                              // stop active YT players
+                              const ytPlayers = Object.keys(j1.adapter.amplitude.data.ytPlayers);
+                              for (let i=0; i<ytPlayers.length; i++) {
+                                const playerID = ytPlayers[i];
+                                const playerProperties = j1.adapter.amplitude.data.ytPlayers[playerID];
+                                logger.debug('process player id: ' + playerID);
+                                ytpPlayer       = j1.adapter.amplitude.data.ytPlayers[playerID].player;
+                                playerState     = ytpPlayer.getPlayerState();
+                                ytpPlayerState  = YT_PLAYER_STATE_NAMES[playerState];
+
+                                if (ytpPlayerState === 'playing' || ytpPlayerState === 'paused' || ytpPlayerState === 'buffering') {
+                                  logger.debug('process player id: ' + playerID + ' stopped');
+                                  ytpPlayer.stopVideo();
+                                }
+                              }
+
+                              // save YT player data for later use (e.g. events)
+                              j1.adapter.amplitude.data.activePlayer = 'atp';
+                              j1.adapter.amplitude.data.atpGlobals.activePlayerType = 'compact';
+
+                              });
                           }
                         }
                       } // END play_pause button (COMPACT player)
+                      ----------------------------------------------------------
+                      {% endcomment %}
 
                       // click on skip forward|backward (COMPACT player)
                       // See: https://github.com/serversideup/amplitudejs/issues/384
@@ -1255,10 +1231,14 @@ j1.adapter.amplitude = ((j1, window) => {
                       var compactPlayerSkipForwardButtons = document.getElementsByClassName("compact-player-skip-forward");
                       for (var i=0; i<compactPlayerSkipForwardButtons.length; i++) {
                         if (compactPlayerSkipForwardButtons[i].dataset.amplitudeSource === 'youtube') {
-                          // do nothing
+                          // do nothing for YTP (managed by plugin)
                         } else {                         
                           if (compactPlayerSkipForwardButtons[i].id === 'skip-forward_{{player.id}}') {
                             compactPlayerSkipForwardButtons[i].addEventListener('click', function(event) {
+
+                              // load player settings
+                              // playerForwardBackwardSkipSeconds = (playerSettings.forward_backward_skip_seconds === undefined) ? playerForwardBackwardSkipSeconds: playerSettings.forward_backward_skip_seconds;
+
                               const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
                               const duration    = Amplitude.getSongDuration();
                               const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
@@ -1267,6 +1247,7 @@ j1.adapter.amplitude = ((j1, window) => {
                               if (currentTime > 0) {
                                 Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
                               }
+
                             }); // END EventListener 'click'
                           } // END if ID
                         }
@@ -1276,10 +1257,14 @@ j1.adapter.amplitude = ((j1, window) => {
                       var compactPlayerSkipBackwardButtons = document.getElementsByClassName("compact-player-skip-backward");
                       for (var i=0; i<compactPlayerSkipBackwardButtons.length; i++) {
                         if (compactPlayerSkipBackwardButtons[i].dataset.amplitudeSource === 'youtube') {
-                          // do nothing
+                          // do nothing for YTP (managed by plugin)
                         } else {                         
                           if (compactPlayerSkipBackwardButtons[i].id === 'skip-backward_{{player.id}}') {
                             compactPlayerSkipBackwardButtons[i].addEventListener('click', function(event) {
+
+                              // load player settings
+                              // playerForwardBackwardSkipSeconds = (playerSettings.forward_backward_skip_seconds === undefined) ? playerForwardBackwardSkipSeconds: playerSettings.forward_backward_skip_seconds;
+
                               const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
                               const duration    = Amplitude.getSongDuration();
                               const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
@@ -1288,6 +1273,7 @@ j1.adapter.amplitude = ((j1, window) => {
                               if (currentTime > 0) {
                                 Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
                               }
+
                             }); // END EventListener 'click'
                           } // END if ID
                         }
@@ -1300,6 +1286,7 @@ j1.adapter.amplitude = ((j1, window) => {
                           var shuffleState = (document.getElementById('compact_player_shuffle').className.includes('amplitude-shuffle-on')) ? true : false;
 
                           Amplitude.setShuffle(shuffleState)
+
                         }); // END EventListener 'click'
                       } // END PlayerShuffleButton (COMPACT player)
 
@@ -1310,73 +1297,112 @@ j1.adapter.amplitude = ((j1, window) => {
                           var repeatState = (document.getElementById('compact_player_repeat').className.includes('amplitude-repeat-on')) ? true : false;
 
                           Amplitude.setRepeat(repeatState)
+
                         }); // END EventListener 'click'
                       } // END PlayerRepeatButton (COMPACT player)
 
                     } // END compact player UI events
                     {% endif %}
 
+
+                    {% comment %} process UI events for all LARGE Players
+                    ============================================================ {% endcomment %}
                     {% if player.id contains 'large' %}
-                    // START large player UI events
-                    // ---------------------------------------------------------
+
                     if (document.getElementById('{{player.id}}') !== null) {
                       // var playlist = '{{player.id}}_yt';
                       var playlistInfo  = {{player.playlist | replace: 'nil', 'null' | replace: '=>', ':'}};
                       var playList      = playlistInfo.name;
 
-                      // NOTE: listener overloads for video managed by plugin
-                      // -------------------------------------------------------
-                      var largetPlayerSongContainer = document.getElementsByClassName("amplitude-song-container");
-                      for (var i=0; i<largetPlayerSongContainer.length; i++) {
-                        if (largetPlayerSongContainer[i].dataset.amplitudeSource === 'youtube') {
-                          // do nothing
+                      {% comment %} PREPARED event listener for LATER use
+                      ----------------------------------------------------------
+                      // add listeners to all SongContainers found (LARGE player)
+                      // -------------------------------------------------------                      
+                      var largePlayerSongContainer = document.getElementsByClassName("amplitude-song-container");
+                      for (var i=0; i<largePlayerSongContainer.length; i++) {
+                        if (largePlayerSongContainer[i].dataset.amplitudeSource === 'youtube') {
+                          // do nothing for YTP (managed by plugin)
                         } else {
-                          var currentPlaylist = largetPlayerSongContainer[i].dataset.amplitudePlaylist;
+                          var currentPlaylist = largePlayerSongContainer[i].dataset.amplitudePlaylist;
                           if (currentPlaylist === playList) {
-                            largetPlayerSongContainer[i].addEventListener('click', function(event) {
-                              var ytpPlayer, ytpPlayerState, ytpPlayerState, playerState,
-                                  classArray, atpPlayerActive, playlist;
+                          // if (largePlayerSongContainer[i].id === 'large-player-play-pause_{{player.id}}' || largePlayerSongContainer[i].id === 'large-player-play-pause_{{player.id}}') {
+                            largePlayerSongContainer[i].addEventListener('click', function(event) {
+                              var ytpPlayer, ytpPlayerState, ytpPlayerState, atpPlayerState,
+                                  playerState, classArray, atpPlayerActive, metaData,
+                                  playlist, playlistIndex;
 
                               classArray      = [].slice.call(this.classList, 0);
                               atpPlayerActive = classArray[0].split('-');
                               playlist        = this.getAttribute("data-amplitude-playlist");
-
-                              // scroll song active at index in player
-                              if (playerAutoScrollSongElement) {
-                                j1.adapter.amplitude.atPlayerScrollToActiveElement(playlist);
+                              playlistIndex   = parseInt(this.getAttribute("data-amplitude-song-index"));
+                              metaData        = Amplitude.getActiveSongMetadata();
+                              atpPlayerState  = Amplitude.getPlayerState();
+
+                              // stop active YT players
+                              // -----------------------------------------------
+                              const ytPlayers = Object.keys(j1.adapter.amplitude.data.ytPlayers);
+                              for (let i=0; i<ytPlayers.length; i++) {
+                                const playerID = ytPlayers[i];
+                                const playerProperties = j1.adapter.amplitude.data.ytPlayers[playerID];
+                                logger.debug('process player id: ' + playerID);
+                                ytpPlayer       = j1.adapter.amplitude.data.ytPlayers[playerID].player;
+                                playerState     = ytpPlayer.getPlayerState();
+                                ytpPlayerState  = YT_PLAYER_STATE_NAMES[playerState];
+
+                                if (ytpPlayerState === 'playing' || ytpPlayerState === 'paused' || ytpPlayerState === 'buffering') {
+                                  logger.debug('process player id: ' + playerID + ' stopped');
+                                  ytpPlayer.stopVideo();
+                                }
                               }
-                            });
-                          }
-                        }
-                      } // END player SongContainer
+
+                              // save YT player data for later use (e.g. events)
+                              // -----------------------------------------------
+                              j1.adapter.amplitude.data.activePlayer = 'atp';
+                              j1.adapter.amplitude.data.atpGlobals.activePlayerType = atpPlayerActive[3];
+
+                            }); // END add EventListener
+                          } // END if currentPlaylist
+                        } // ENF if largePlayerSongContainer
+                      } // END for largePlayerSongContainer
+                      ----------------------------------------------------------
+                      {% endcomment %}
 
                       // click on prev button
                       var largePlayerPreviousButton = document.getElementById('large_player_previous');
                       if (largePlayerPreviousButton && largePlayerPreviousButton.getAttribute("data-amplitude-source") === 'youtube') {
-                        // do nothing (managed by plugin)
+                        // do nothing for YTP (managed by plugin)
                       }
 
-                      // click on play_pause button (LARGE player)
+                      {% comment %} PREPARED event listener for LATER use
+                      ----------------------------------------------------------
+                      // add listeners to all PlayPause Buttons found (LARGE player)
+                      // -------------------------------------------------------                      
                       var largePlayerPlayPauseButton = document.getElementsByClassName('large-player-play-pause');
                       for (var i=0; i<largePlayerPlayPauseButton.length; i++) {
                         if (largePlayerPlayPauseButton[i].dataset.amplitudeSource === 'youtube') {
-                          // do nothing (managed by YTP plugin)
+                          // do nothing for YTP (managed by plugin)
                         } else {
-                          var currentPlaylist = largePlayerPlayPauseButton[i].dataset.amplitudePlaylist;
-                          if (currentPlaylist === playList) {
+                          var currentPlaylist = largePlayerPlayPauseButton[i].dataset.amplitudePlaylist;                          
+                          if (currentPlaylist === playList) {                        
                             largePlayerPlayPauseButton[i].addEventListener('click', function(event) {
-                              // do nothing
+                              var ytpPlayer, ytpPlayerState, playlist, metaData, playerState;
+
+                              metaData = Amplitude.getActiveSongMetadata();
+                              playlist = this.getAttribute("data-amplitude-playlist");
+
                             });
                           }
                         }
                       } // END play_pause button (LARGE player)
+                      ----------------------------------------------------------
+                      {% endcomment %}
 
                       // add listeners to all progress bars found (LARGE player)
                       // -------------------------------------------------------
                       var progressBars = document.getElementsByClassName("large-player-progress");
                       for (var i=0; i<progressBars.length; i++) {
                         if (progressBars[i].dataset.amplitudeSource === 'youtube') {
-                          // do nothing (managed by plugin)
+                          // do nothing for YTP (managed by plugin)
                         } else {
                           progressBars[i].addEventListener('click', function(event) {
                             var offset = this.getBoundingClientRect();
@@ -1385,75 +1411,100 @@ j1.adapter.amplitude = ((j1, window) => {
                             if (Amplitude.getPlayerState() === 'playing') {
                               Amplitude.setSongPlayedPercentage((parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
                             }
+
                           }); // END EventListener 'click'
                         }
                       } // END for
 
-
-                      // click on Next|Previous Buttons (LARGE player)                      
-                      // -------------------------------------------------------
-
-                      // add listeners to all Next Buttons found
+                      {% comment %} PREPARED event listener for LATER use
+                      ----------------------------------------------------------
+                      // add listeners to all Next Buttons found (LARGE player)
+                      // -------------------------------------------------------                      
                       var largeNextButtons = document.getElementsByClassName("large-player-next");
                       for (var i=0; i<largeNextButtons.length; i++) {
                         if (largeNextButtons[i].dataset.amplitudeSource === 'youtube') {
-                          // do nothing (managed by plugin)
+                          // do nothing for YTP (managed by plugin)
                         } else {                        
                           if (largeNextButtons[i].id === 'large_player_next_{{player.id}}') {
                             largeNextButtons[i].addEventListener('click', function(event) {
-                              var atpPlayerID     = this.id;
-                              var atpPlayerActive = atpPlayerID.split('_');
-                              var playlist        = this.getAttribute("data-amplitude-playlist");
-
-                              // scroll song active at index in player
-                              if (playerAutoScrollSongElement) {
-                                j1.adapter.amplitude.atPlayerScrollToActiveElement(playlist);
-                              }                              
+                              var atpPlayerID, atpPlayerActive, metaData, playlist;
+                           
+                              atpPlayerID     = this.id;
+                              atpPlayerActive = atpPlayerID.split('_');
+                              playlist        = this.getAttribute("data-amplitude-playlist");
+                              metaData        = Amplitude.getActiveSongMetadata();
 
-                              // save YT player data for later use (e.g. events)
-                              j1.adapter.amplitude.data.activePlayer = 'atp';
-                              j1.adapter.amplitude.data.atpGlobals.activePlayerType = atpPlayerActive[0];
                             }); // END EventListener 'click'
-                          } // END if ID
-                        }
+                          } // END addEventListener
+                        } // END if largeNextButtons
                       } // END for Next Buttons
+                      ----------------------------------------------------------
+                      {% endcomment %}
 
+                      {% comment %} PREPARED event listener for LATER use
+                      ----------------------------------------------------------
                       // add listeners to all Previous Buttons found
+                      // -------------------------------------------------------
                       var largePreviousButtons = document.getElementsByClassName("large-player-previous");
                       for (var i=0; i<largePreviousButtons.length; i++) {
                         if (largePreviousButtons[i].dataset.amplitudeSource === 'youtube') {
-                          // do nothing (managed by plugin)
+                          // do nothing for YTP (managed by plugin)
                         } else {                          
                           if (largePreviousButtons[i].id === 'large_player_previous_{{player.id}}') {
                             largePreviousButtons[i].addEventListener('click', function(event) {
-                              var atpPlayerID     = this.id;
-                              var atpPlayerActive = atpPlayerID.split('_');
-                              var playlist        = this.getAttribute("data-amplitude-playlist");
+                              var atpPlayerID, atpPlayerActive, metaData, playlist;
+
+                              atpPlayerID     = this.id;
+                              atpPlayerActive = atpPlayerID.split('_');
+                              playlist        = this.getAttribute("data-amplitude-playlist");
+                              metaData        = Amplitude.getActiveSongMetadata();
+
+                              // update song rating in screen controls
+                              var largePlayerSongAudioRating = document.getElementsByClassName("audio-rating-screen-controls");
+                              if (largePlayerSongAudioRating.length) {
+                                for (var i=0; i<largePlayerSongAudioRating.length; i++) {
+                                  var currentPlaylist = largePlayerSongAudioRating[i].dataset.amplitudePlaylist;
+                                  if (currentPlaylist === playlist) {
+                                    if (metaData.rating) {
+                                      var trackID = metaData.index + 1;
+                                      logger.debug(`UPDATE song rating on updatMetaContainers for trackID|playlist at: ${trackID}|${playlist} with a value of: ${metaData.rating}`);
+                                      largePlayerSongAudioRating[i].innerHTML = '<img src="/assets/image/pattern/rating/scalable/' + metaData.rating + '-star.svg"' + 'alt="song rating">';
+                                    } else {
+                                      largePlayerSongAudioRating[i].innerHTML = '';
+                                    }
+                                  }
+                                }
+                              } // END if largePlayerSongAudioRating
 
                               // scroll song active at index in player
                               if (playerAutoScrollSongElement) {
-                                j1.adapter.amplitude.atPlayerScrollToActiveElement(playlist);
+                                j1.adapter.amplitude.atPlayerScrollToActiveElement(Amplitude.getActiveSongMetadata());
+                              }                              
+
+                              // scroll song active at index in player
+                              if (playerAutoScrollSongElement) {
+                                j1.adapter.amplitude.atPlayerScrollToActiveElement(Amplitude.getActiveSongMetadata());
                               }  
 
                               // save YT player data for later use (e.g. events)
                               j1.adapter.amplitude.data.activePlayer = 'atp';
                               j1.adapter.amplitude.data.atpGlobals.activePlayerType = atpPlayerActive[0];
-                            }); // END EventListener 'click'
-                          } // END if ID
-                        }
-                      } // END for Previous Buttons
 
+                            }); // END addEventListener
+                          } // END if largePreviousButtons
+                        } // END if largePreviousButtons
+                      } // END for Previous Buttons
+                      ----------------------------------------------------------
+                      {% endcomment %}
 
-                      // click on skip forward|backward (large player)
+                      // add listeners to all SkipForward Buttons found
                       // See: https://github.com/serversideup/amplitudejs/issues/384
                       // -------------------------------------------------------
-
-                      // add listeners to all SkipForwardButtons found
                       var largePlayerSkipForwardButtons = document.getElementsByClassName("large-player-skip-forward");
                       for (var i=0; i<largePlayerSkipForwardButtons.length; i++) {
                         if (largePlayerSkipForwardButtons[i].id === 'skip-forward_{{player.id}}') {
                           if (largePlayerSkipForwardButtons[i].dataset.amplitudeSource === 'youtube') {
-                            // do nothing (managed by plugin)
+                            // do nothing for YTP (managed by plugin)
                           } else {
                             largePlayerSkipForwardButtons[i].addEventListener('click', function(event) {
                               const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
@@ -1462,19 +1513,21 @@ j1.adapter.amplitude = ((j1, window) => {
                               const targetTime  = parseFloat(currentTime + skipOffset);
 
                               if (currentTime > 0) {
+                                logger.debug(`SKIP forward on Button skipForward for ${skipOffset} seconds`);
                                 Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
                               }
-                            }); // END EventListener 'click'
-                          } // END else
-                        } // END if ID
+                            }); // END addEventListener
+                          } // END largePlayerSkipForwardButtons
+                        } // END if largePlayerSkipForwardButtons
                       } // END for SkipForwardButtons
 
-                      // add listeners to all SkipBackwardButtons found
+                      // add listeners to all SkipBackward Buttons found
+                      // -------------------------------------------------------
                       var largePlayerSkipBackwardButtons = document.getElementsByClassName("large-player-skip-backward");
                       for (var i=0; i<largePlayerSkipBackwardButtons.length; i++) {
                         if (largePlayerSkipBackwardButtons[i].id === 'skip-backward_{{player.id}}') {
                           if (largePlayerSkipBackwardButtons[i].dataset.amplitudeSource === 'youtube') {
-                            // do nothing (managed by plugin)
+                            // do nothing for YTP (managed by plugin)
                           } else {
                             largePlayerSkipBackwardButtons[i].addEventListener('click', function(event) {
                               const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
@@ -1483,11 +1536,12 @@ j1.adapter.amplitude = ((j1, window) => {
                               const targetTime  = parseFloat(currentTime - skipOffset);
 
                               if (currentTime > 0) {
+                                logger.debug(`SKIP backward on Button skipForward for ${skipOffset} seconds`);
                                 Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
                               }
-                            }); // END EventListener 'click'
+                            }); // END addEventListener
                           } // END else
-                        } // END if ID
+                        } // END if largePlayerSkipBackwardButtons
                       } // END for SkipBackwardButtons
 
                       // click on shuffle button
@@ -1495,34 +1549,37 @@ j1.adapter.amplitude = ((j1, window) => {
                       if (largePlayerShuffleButton) {
                         largePlayerShuffleButton.addEventListener('click', function(event) {
                           var shuffleState = (document.getElementById('large_player_shuffle').className.includes('amplitude-shuffle-on')) ? true : false;
+                          logger.debug(`Set shuffle state to: ${shuffleState}`);
                           Amplitude.setShuffle(shuffleState)
-                        }); // END EventListener 'click'
-                      } // END largePlayerShuffleButton
+                        }); // END addEventListener
+                      } // END if largePlayerShuffleButton
 
                       // click on repeat button
                       var largePlayerRepeatButton = document.getElementById('large_player_repeat');
                       if (largePlayerRepeatButton) {
                         largePlayerRepeatButton.addEventListener('click', function(event) {
                           var repeatState = (document.getElementById('large_player_repeat').className.includes('amplitude-repeat-on')) ? true : false;
+                          logger.debug(`Set repeat state to: ${repeatState}`);
                           Amplitude.setRepeat(repeatState)
-                        }); // END EventListener 'click'
+                        }); // END addEventListener
                       } // END if largePlayerRepeatButton
 
-                      // enable|disable scrolling on playlist (large player)
+                      // enable|disable PAGE scrolling on players playlist (LARGE player)
                       // -------------------------------------------------------
-                      if (document.getElementById('large_player_right') !== null) {
+                      // if (playerHoverPageScrollDisabled && document.getElementById('large_player_right') !== null) {
+                      if (playerHoverPageScrollDisabled) {                        
 
                         // show|hide scrollbar in playlist
                         // -----------------------------------------------------
-                        var songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
-                        if (songsInPlaylist.length <= 8) {
+                        const songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
+                        if (songsInPlaylist.length <= playerScrollerSongElementMin) {
                           const titleListLargePlayer = document.getElementById('large_player_title_list_' + playListName);
                           if (titleListLargePlayer !== null) {
                             titleListLargePlayer.classList.add('hide-scrollbar');
                           }
-                        }
+                        } // END show|hide scrollbar in playlist
 
-                        // scroll to player top position (large player)
+                        // scroll player to top position (LARGE player)
                         //
                         // Bootstrap grid breakpoints
                         //   SN:     576px           Mobile
@@ -1538,21 +1595,21 @@ j1.adapter.amplitude = ((j1, window) => {
                           var playlistHeader  = document.getElementById("playlist_header_{{player.id}}");
                           var scrollOffset    = (window.innerWidth >= 992) ? -130 : -44;
 
-                          // scroll player|playlist to top position (large player)
-                          //
+                          // scroll player|playlist to top position (LARGE player)
+                          // NOTE: depending on WINDOW SIZE the relation changes to TOP POSITION (targetDivPosition)
+                          // -- ------------------------------------------------
                           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
+
+                        }); // END addEventListener
 
                         var largePlayerPlaylistHeader = document.getElementById("playlist_header_{{player.id}}");
                         largePlayerPlaylistHeader.addEventListener('click', function(event) {
@@ -1560,7 +1617,7 @@ j1.adapter.amplitude = ((j1, window) => {
                           var playlistHeader  = document.getElementById("playlist_header_{{player.id}}");
                           var scrollOffset    = (window.innerWidth >= 992) ? -130 : -44;
 
-                          // scroll player|playlist to top position (large player)
+                          // scroll player|playlist to top position (LARGE player)
                           //
                           const targetDivPlayerRight            = playerRight;
                           const targetDivPositionPlayerRight    = targetDivPlayerRight.offsetTop;
@@ -1575,7 +1632,7 @@ j1.adapter.amplitude = ((j1, window) => {
                             window.scrollTo(0, targetDivPositionplaylistHeader + scrollOffset);
                           }
 
-                        }); // END EventListener 'click' largePlayerPlaylistHeader
+                        }); // END addEventListener
 
                         // disable scrolling (if window viewport >= BS Medium and above)
                         document.getElementById('large_player_right').addEventListener('mouseenter', function() {
@@ -1586,16 +1643,16 @@ j1.adapter.amplitude = ((j1, window) => {
                               $('body').addClass('stop-scrolling');
                             }
                           }
-                        }); // END EventListener 'mouseenter'
+                        }); // END addEventListener
 
                         // enable scrolling
                         document.getElementById('large_player_right').addEventListener('mouseleave', function() {
                           if ($('body').hasClass('stop-scrolling')) {
                             $('body').removeClass('stop-scrolling');
                           }
-                        }); // END EventListener 'mouseleave'
+                        }); // END addEventListener
 
-                      } // END enable|disable scrolling on playlist
+                      } // END enable|disable PAGE scrolling on players playlist
 
                       // set volume slider presets (for the player when exists|enabled)
                       //
@@ -1616,14 +1673,16 @@ j1.adapter.amplitude = ((j1, window) => {
 
                     } // END large player UI events
                     {% endif %}
+                    {% comment %} END process UI events for all LARGE Players
+                    ============================================================ {% endcomment %}
 
                     // ---------------------------------------------------------
                     // START configured player features
 
-                    logger.debug('\n' + 'set play next title: ' + playerPlayNextTitle);
-                    logger.debug('\n' + 'set delay between titles: ' + playerDelayNextTitle + 'ms');
-                    logger.debug('\n' + 'set repeat (album): ' + playerRepeat);
-                    logger.debug('\n' + 'set shuffle (album): ' + playerShuffle);
+                    logger.debug('set play next title: ' + playerPlayNextTitle);
+                    logger.debug('set delay between titles: ' + playerDelayNextTitle + 'ms');
+                    logger.debug('set repeat (album): ' + playerRepeat);
+                    logger.debug('set shuffle (album): ' + playerShuffle);
 
                     // set delay between titles (songs)
                     Amplitude.setDelay(playerDelayNextTitle);
@@ -1637,8 +1696,8 @@ j1.adapter.amplitude = ((j1, window) => {
 
                     // finished messages
                     // ---------------------------------------------------------
-                    logger.debug('\n' + 'current player state: ' + amplitudePlayerState);
-                    logger.debug('\n' + 'setup player specific UI events on ID #{{player.id}}: finished');
+                    logger.debug('current player state: ' + amplitudePlayerState);
+                    logger.debug('setup player specific UI events on ID #{{player.id}}: finished');
 
                     clearInterval(dependencies_met_api_initialized);
                   } // END if apiInitialized
@@ -1658,14 +1717,14 @@ j1.adapter.amplitude = ((j1, window) => {
 
           {% endif %} {% endfor %}
 
-          logger.info('\n' + 'initialize player specific UI events: finished');
+          logger.info('initialize player specific UI events: finished');
 
           _this.setState('finished');
-          logger.debug('\n' + 'module state: ' + _this.getState());
-          logger.info('\n' + 'module initialized successfully');
+          logger.debug('module state: ' + _this.getState());
+          logger.info('module initialized successfully');
 
           endTimeModule = Date.now();
-          logger.info('\n' + 'module initializing time: ' + (endTimeModule-startTimeModule) + 'ms');
+          logger.info('module initializing time: ' + (endTimeModule-startTimeModule) + 'ms');
 
           clearInterval(dependencies_met_player_instances_initialized);
         } // END if apiInitialized
@@ -1689,7 +1748,7 @@ j1.adapter.amplitude = ((j1, window) => {
     // songEvents
     // -------------------------------------------------------------------------
     songEvents: (songs) => {
-      logger.debug('\n' + 'initializing title events for player on ID ' + '#' + playerID + ': started');
+      logger.debug('initializing title events for player on ID ' + '#' + playerID + ': started');
 
       for (var i = 0; i < songs.length; i++) {
         // ensure that on mouseover, CSS styles don't get messed up for active songs
@@ -1717,7 +1776,7 @@ j1.adapter.amplitude = ((j1, window) => {
         }); // END EventListener 'click' (songlist)
       }
 
-      logger.debug('\n' + 'initializing title events for player on ID ' + '#' + playerID + ': finished');
+      logger.debug('initializing title events for player on ID ' + '#' + playerID + ': finished');
     }, // END songEvents
 
     // -------------------------------------------------------------------------
@@ -1751,7 +1810,7 @@ j1.adapter.amplitude = ((j1, window) => {
       }
 
       if (plugin !== '' && isPluginLoaded(plugin)) {     
-        logger.debug('\n' + 'plugin loaded: ' + plugin);
+        logger.debug('plugin loaded: ' + plugin);
 
         // make sure the plugin installed only ONCE
         j1.adapter.amplitude.data.atpGlobals.ytpInstalled = true;
@@ -1759,30 +1818,363 @@ j1.adapter.amplitude = ((j1, window) => {
     }, // END pluginManager
 
     // -------------------------------------------------------------------------
-    // atPlayerScrollToActiveElement(activePlaylist)
+    // atPlayerScrollToActiveElement(metaData)
     // -------------------------------------------------------------------------  
-    atPlayerScrollToActiveElement: (activePlaylist) => {
-      var scrollableList, songIndex,
-          activeElement, activeElementOffsetTop;
+    atPlayerScrollToActiveElement: (metaData) => {
+      var scrollableList, songIndex, playlist,
+          activeElement, activeElementOffsetTop, numSongs,
+          songElementMin, playerSongElementHeigthCompact;
 
-      scrollableList  = document.getElementById('large_player_title_list_' + activePlaylist);
+      if (!playerAutoScrollSongElement) {
+        // do nothing if playerAutoScrollSongElement is false
+        return;
+      }
+
+      songIndex       = metaData.index;
+      songElementMin  = playerScrollerSongElementMin;
+      playlist        = metaData.playlist;
+      scrollableList  = document.getElementById('large_player_title_list_' + playlist);
       activeElement   = scrollableList.querySelector('.amplitude-active-song-container');
+      numSongs        = Amplitude.getSongsInPlaylist(playlist).length;
 
       if (activeElement === null || scrollableList === null)  {
-        // do nothing if NO scrollableList or active element found (failsafe)
+        // do nothing if NO scrollableList or ACTIVE element found (failsafe)
         return;
       }
 
-      songIndex                 = parseInt(activeElement.getAttribute("data-amplitude-song-index"));
-      activeElementOffsetTop    = songIndex * j1.adapter.amplitude.data.playerSongElementHeigth;
-      scrollableList.scrollTop  = activeElementOffsetTop;
-
-      if (songIndex === 0) {
-        var bla = 'puups';
+      // LARGE players
+      // -----------------------------------------------------------------------
+      if (songIndex > 0 && numSongs >= songElementMin) {
+        activeElementOffsetTop    = songIndex * j1.adapter.amplitude.data.playerSongElementHeigth;
+        scrollableList.scrollTop  = activeElementOffsetTop;        
+      } else {
+        // do nothing if songIndex is 0 or less than songElementMin
+        return; 
       }
 
+      // COMPACT players (WIP)
+      // -----------------------------------------------------------------------
+      // playerSongElementHeigthCompact  = 74.00; 
+      // if (songIndex > 0 && numSongs >= songElementMin) {
+      //   // scrollableList            = document.getElementById('compact_player_title_list_' + metaData.playlist);
+      //   // activeElement             = scrollableList.querySelector('.amplitude-active-song-container');
+      //   activeElementOffsetTop    = (songIndex * playerSongElementHeigthCompact);
+      //   scrollableList.scrollTop  = activeElementOffsetTop;        
+      // } else {
+      //   // do nothing if songIndex is 0 or less than songElementMin
+      //   return; 
+      // }
+
     }, // END atPlayerScrollToActiveElement
 
+    // -------------------------------------------------------------------------
+    // atpUpdatMetaContainers(playlist, rating)
+    //
+    // update song rating in playlist-screen|meta-container
+    // for all (compact|large) players
+    // -------------------------------------------------------------------------
+    atpUpdatMetaContainers: (metaData) => {
+      var activePlayist   = metaData.playlist;
+      var rating          = parseInt(metaData.rating);
+      var trackID         = metaData.index + 1;
+      const notRequiredForATP = true
+
+      logger.debug(`UPDATE metadata on atpUpdatMetaContainers for trackID|playlist at: ${trackID}|${activePlayist}`);
+
+      // properties automatically set by AT API
+      if (requiredForATP) {
+        // update SONG NAME in meta-containers
+        var songName = document.getElementsByClassName("song-name");
+        if (songName.length) {
+          for (var i=0; i<songName.length; i++) {    
+            var currentPlaylist = songName[i].dataset.amplitudePlaylist;
+            if (currentPlaylist === activePlayist) {
+              songName[i].innerHTML = metaData.name;
+            }
+          }
+        }
+      }
+
+      // properties automatically set by AT API
+      if (requiredForATP) {
+        // update SONG ARTIST name in meta-containers
+        var artistName = document.getElementsByClassName("artist");
+        if (artistName.length) {
+          for (var i=0; i<artistName.length; i++) {    
+            var currentPlaylist = songName[i].dataset.amplitudePlaylist;
+            if (currentPlaylist === activePlayist) {
+              artistName[i].innerHTML = metaData.artist;
+            }
+          }
+        }
+      }
+
+      // properties automatically set by AT API
+      if (requiredForATP) {
+        // update SONG ALBUM name in meta-containers
+        var albumName = document.getElementsByClassName("album");
+        if (albumName.length) {
+          for (var i=0; i<albumName.length; i++) {    
+            var currentPlaylist = albumName[i].dataset.amplitudePlaylist;
+            if (currentPlaylist === activePlayist) {
+              albumName[i].innerHTML = metaData.album;
+            }
+          }
+        }
+      }
+
+      // update SONG RATING in screen controls
+      var screenControlRatingElements = document.getElementsByClassName('audio-rating-screen-controls');
+      if (rating) {
+        for (let i=0; i<screenControlRatingElements.length; i++) {
+          var ratingElement = screenControlRatingElements[i];
+          if (ratingElement.dataset.amplitudePlaylist === activePlayist && ratingElement.classList.contains('audio-rating-screen-controls')) {          
+            ratingElement.innerHTML = '<img src="/assets/image/pattern/rating/scalable/' + rating + '-star.svg"' + 'alt="song rating">';
+          }
+        }
+      }
+
+      // update SONG INFO in screen controls
+      var songAudioInfo = document.getElementsByClassName("audio-info-link-screen-controls");
+      if (songAudioInfo.length) {
+        for (var i=0; i<songAudioInfo.length; i++) {
+          var currentPlaylist = songAudioInfo[i].dataset.amplitudePlaylist;
+          if (currentPlaylist === activePlayist) {
+            if (metaData.audio_info) {
+              songAudioInfo[i].setAttribute("href", metaData.audio_info);
+            }
+          }
+        }
+      } // END if songAudioInfo
+
+    }, // END atpUpdatMetaContainers
+
+    // -------------------------------------------------------------------------
+    // atpStopParallelActivePlayers(players)
+    //
+    // stop active YT players (running in parallel to AT players)
+    // -------------------------------------------------------------------------
+    atpStopParallelActivePlayers: (players) => {
+      var ytPlayer, playerState, ytPlayerState;
+
+      const ytPlayers = Object.keys(players);
+      for (var i=0; i<ytPlayers.length; i++) {
+        const ytPlayerID = ytPlayers[i];    
+
+        ytPlayer      = players[ytPlayerID].player;
+        playerState   = ytPlayer.getPlayerState();
+        ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
+
+        // stop YT players running in parallel
+        // ---------------------------------------------------------------------        
+        if (ytPlayerState === 'playing' || ytPlayerState === 'paused' || ytPlayerState === 'buffering') {
+          logger.debug(`STOP YT player on id: ${playerID}`);
+          ytPlayer.stopVideo();
+        }
+
+        // toggle PlayPause buttons playing => puased
+        // ---------------------------------------------------------------------
+        var ytpButtonPlayerPlayPause = document.getElementsByClassName("large-player-play-pause-" + ytPlayerID);        
+        for (var j=0; j<ytpButtonPlayerPlayPause.length; j++) {
+
+          var htmlElement = ytpButtonPlayerPlayPause[j];
+          if (htmlElement.dataset.amplitudeSource === 'youtube') {
+            if (htmlElement.classList.contains('amplitude-playing')) {        
+              htmlElement.classList.remove('amplitude-playing');
+              htmlElement.classList.add('amplitude-paused');
+            }           
+          }
+        } // END for ytpButtonPlayerPlayPause
+
+      } // END for ytPlayers
+    }, // END atpStopParallelActivePlayers
+
+    // -------------------------------------------------------------------------
+    // atpProcessAudioStartPosition()
+    //
+    // process audio for configured START position
+    // -------------------------------------------------------------------------
+    atpProcessAudioStartPosition: () => {
+      var songMetaData, songIndex, playList,
+          songStartSec, songStartTS, trackID;
+
+      songMetaData  = Amplitude.getActiveSongMetadata();
+      songIndex     = songMetaData.index;
+      songStartTS   = songMetaData.start;
+      songStartSec  = _this.timestamp2seconds(songStartTS);
+      playList      = Amplitude.getActivePlaylist();
+      trackID       = songIndex + 1;
+
+      if (!songStartSec) {
+        return;
+      }
+
+      var checkIsFading = setInterval (() => {
+        if (!isFadingIn) {
+          var currentAudioTime = Amplitude.getSongPlayedSeconds();
+          if (songStartSec && currentAudioTime <= songStartSec) {
+            var songDurationSec = _this.timestamp2seconds(songMetaData.duration); 
+
+            // seek audio to configured START position
+            // NOTE: use setSongPlayedPercentage for seeking to NOT
+            //       generation any addition state changes like stopped
+            //       or playing
+            logger.debug('seek audio in on playlist: ' + playList + ' at|to trackID|timestamp: ' + trackID + '|' + songStartTS);
+            Amplitude.setSongPlayedPercentage((songStartSec / songDurationSec) * 100);
+
+            // fade-in audio (if enabled)
+            var fadeAudioIn = (songMetaData.audio_fade_in === 'true') ? true : false;
+            if (fadeAudioIn) {
+              logger.debug('faden audio in on playlist: ' + playList + ' at|to trackID|timestamp: ' + trackID + '|' + songStartTS);
+              atpFadeInAudio({ playerID: playerID });
+            } // END if fadeAudio
+
+          } // END if songStartSec
+
+          clearInterval(checkIsFading);
+        }
+      }, 100); // END checkIsFading
+    }, // END atpProcessAudioStartPosition      
+
+    // -------------------------------------------------------------------------
+    // atpProcessAudioEndPosition()
+    //
+    // process audio for configured END position
+    // -------------------------------------------------------------------------
+    atpProcessAudioEndPosition: () => {
+      var songMetaData, songIndex, playList,
+          songStartSec, songStartTS, songEndSec, songEndTS,
+          trackID;
+
+      songMetaData  = Amplitude.getActiveSongMetadata();
+      songIndex     = songMetaData.index;
+      songStartTS   = songMetaData.start;
+      songStartSec  = _this.timestamp2seconds(songStartTS);      
+      songEndTS     = songMetaData.end;
+      songEndSec    = _this.timestamp2seconds(songEndTS);
+      playList      = Amplitude.getActivePlaylist();
+      trackID       = songIndex + 1;
+
+      if (songEndSec > songStartSec) {
+        var checkIsOnVideoEnd = setInterval(() => {
+          if (!isFadingOut) {              
+            var currentAudioTime = Amplitude.getSongPlayedSeconds();
+            if (currentAudioTime >= songEndSec) {                
+              songMetaData  = Amplitude.getActiveSongMetadata();             
+              songIndex     = songMetaData.index;
+              trackID       = songIndex + 1;
+
+              // seek audio out to END position
+              // NOTE:
+              // ---------------------------------------------------------------
+              // use setSongPlayedPercentage for seeking to NOT
+              // generation any addition state changes like stopped
+              // or playing                  
+              logger.debug('seek audio to end on playlist: ' + playList + ' at trackID|timestamp: ' + trackID + '|' + songEndTS);
+              Amplitude.setSongPlayedPercentage(99.99);
+              
+              // fade-out audio (if enabled)
+              var fadeAudioOut = (songMetaData.audio_fade_out === 'true') ? true : false;
+              if (fadeAudioOut) {
+                logger.debug('fade audio out on playlist: ' + playList + ' at|to trackID|timestamp: ' + trackID + '|' + songEndTS);
+                atpFadeAudioOut({ playerID: playerID });
+              } // END if fadeAudio
+
+              clearInterval(checkIsOnVideoEnd);
+            } // END if currentAudioTime
+          } // END if !isFading
+        }, 100); // END checkIsOnVideoEnd
+      } // END if songEndSec
+
+    }, // END atpProcessAudioEndPosition     
+
+    // -------------------------------------------------------------------------
+    // setSongActive(currentPlayList, currentIndex)
+    //
+    // set song active at index in playlist
+    // -------------------------------------------------------------------------
+    setSongActive: (currentPlayList, currentIndex) => {
+      var playlist, songContainers, songIndex;
+
+      songIndex = currentIndex;
+
+      // clear ALL active song containers
+      // -------------------------------------------------------------------------
+      songContainers = document.getElementsByClassName("amplitude-song-container");
+      for (var i=0; i<songContainers.length; i++) {
+        songContainers[i].classList.remove("amplitude-active-song-container");
+      }
+
+      // find current song container and activate the element
+      // -------------------------------------------------------------------------
+      songContainers = document.querySelectorAll('.amplitude-song-container[data-amplitude-song-index="' + songIndex + '"]');          
+      for (var i=0; i<songContainers.length; i++) {
+        if (songContainers[i].hasAttribute("data-amplitude-playlist")) {
+          playlist = songContainers[i].getAttribute("data-amplitude-playlist");
+          if (playlist === currentPlayList) {
+            songContainers[i].classList.add("amplitude-active-song-container");
+          }
+        }
+      }
+
+    }, // END setSongActive
+
+    // -------------------------------------------------------------------------
+    // timestamp2seconds(timestamp)
+    //
+    // converts a timestamp of hh:mm:ss into seconds
+    // -------------------------------------------------------------------------
+    // TODO:
+    // Add support for timestamp w/o hours like mm:ss
+    // -------------------------------------------------------------------------
+    timestamp2seconds: (timestamp) => {
+      // split timestamp
+      const parts = timestamp.split(':');
+
+      // check timestamp format
+      if (parts.length !== 3) {
+        // return "invalid timestamp";
+        return false;
+      }
+
+      // convert parts to integers
+      const hours   = parseInt(parts[0], 10);
+      const minutes = parseInt(parts[1], 10);
+      const seconds = parseInt(parts[2], 10);
+
+      // check valid timestamp values
+      if (isNaN(hours) || isNaN(minutes) || isNaN(seconds) ||
+          hours   < 0 || hours   > 23 ||
+          minutes < 0 || minutes > 59 ||
+          seconds < 0 || seconds > 59) {
+        return "invalid timestamp";
+      }
+
+      const totalSeconds = (hours * 3600) + (minutes * 60) + seconds;
+
+      return totalSeconds;
+    }, // END timestamp2seconds
+
+    // -------------------------------------------------------------------------
+    // seconds2timestamp(seconds)
+    //
+    // converts seconds into a timestamp of hh:mm:ss
+    // -------------------------------------------------------------------------
+    seconds2timestamp: (seconds) => {
+      if (isNaN(seconds)) {
+        return false;
+      }
+
+      const hours         = Math.floor(seconds / 3600);
+      const minutes       = Math.floor((seconds % 3600) / 60);
+      const remainSeconds = seconds % 60;
+      const tsHours       = hours.toString().padStart(2, '0');
+      const tsMinutes     = minutes.toString().padStart(2, '0');
+      const tsSeconds     = remainSeconds.toString().padStart(2, '0');
+    
+      return `${tsHours}:${tsMinutes}:${tsSeconds}`;
+    }, // END seconds2timestamp
+
     // -------------------------------------------------------------------------
     // messageHandler()
     // manage messages send from other J1 modules
@@ -1790,7 +2182,7 @@ j1.adapter.amplitude = ((j1, window) => {
     messageHandler: (sender, message) => {
       var json_message = JSON.stringify(message, undefined, 2);
 
-      logText = '\n' + 'received message from ' + sender + ': ' + json_message;
+      logText = 'received message from ' + sender + ': ' + json_message;
       logger.debug(logText);
 
       // -----------------------------------------------------------------------
@@ -1802,7 +2194,7 @@ j1.adapter.amplitude = ((j1, window) => {
         // place handling of command|action here
         //
 
-        logger.info('\n' + message.text);
+        logger.info(message.text);
       }
 
       //