j1-template 2024.3.20 → 2024.3.21

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.40.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.40.js
  # J1 Adapter for the amplitude module
  #
  # Product/Info:
@@ -164,27 +164,29 @@ j1.adapter.amplitude = ((j1, window) => {
   var playersHtmlLoaded                 = false;
   var processingPlayersFinished         = false;
 
-  var playerSongElementHeigthDesktop    = {{amplitude_defaults.player.song_element_heigt_desktop}};
-  var playerSongElementHeigthMobile     = {{amplitude_defaults.player.song_element_heigth_mobile}};
-  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 playerDefaultVolume               = {{amplitude_defaults.player.volume_slider.preset_value}};
+  var playerVolumeSliderStep            = {{amplitude_defaults.player.volume_slider.slider_step}};
+  var playerRepeat                      = ('{{amplitude_defaults.player.player_repeat}}' === 'true') ? true : false;
+  var playerShuffle                     = ('{{amplitude_defaults.player.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}}';
+  var playerDelayNextTitle              = {{amplitude_defaults.player.delay_next_title}};
+  var playerForwardBackwardSkipSeconds  = {{amplitude_defaults.player.forward_backward_skip_seconds}};
+
+  var playerSongElementHeigthMobile     = {{amplitude_defaults.player.song_element_heigth_mobile}};  
+  var playerSongElementHeigthDesktop    = {{amplitude_defaults.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}};
 
   // 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 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}}';
 
   // ---------------------------------------------------------------------------
@@ -217,6 +219,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 +237,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';
@@ -252,8 +259,10 @@ j1.adapter.amplitude = ((j1, window) => {
           logger.debug('\n' + 'module state: ' + _this.getState());
           logger.info('\n' + 'module is being initialized');
 
-          // set default viewport setting
-          j1.adapter.amplitude.data.playerSongElementHeigth = playerSongElementHeigthDesktop;
+          // window.addEventListener('resize',(e)=>{         
+          //       console.log( `resize: width: ${e.target.visualViewport.width}px`);
+          //       console.log( `resize: height: ${e.target.visualViewport.height}px`);
+          // });
 
           // -------------------------------------------------------------------
           // create global playlist (songs)
@@ -292,20 +301,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
@@ -354,7 +363,10 @@ j1.adapter.amplitude = ((j1, window) => {
                 continue;
               } else if (key === 'rating') {
                 song.rating = item[key];
-                continue;              
+                continue;
+              } else if (key === 'audio_single') {
+                song.audio_single = item[key];
+                continue;               
               } else if (key === 'shuffle') {
                 song.shuffle = item[key];
                 continue;                 
@@ -479,6 +491,7 @@ j1.adapter.amplitude = ((j1, window) => {
             "end":            "{{item.end}}",
             "shuffle":        "{{item.shuffle}}",
             "duration":       "{{item.duration}}",
+            "audio_single":   "{{item.audio_single}}",
             // "audio_fade_in":  "{{item.audio_fade_in}}",
             // "audio_fade_out": "{{item.audio_fade_out}}",
             "cover_art_url":  "{{item.cover_image}}"
@@ -618,7 +631,7 @@ j1.adapter.amplitude = ((j1, window) => {
         // },
 
         continue_next:    playerPlayNextTitle,
-        volume:           playerVolumeValue,
+        volume:           playerDefaultVolume,
         volume_decrement: playerVolumeSliderStep,
         volume_increment: playerVolumeSliderStep
 
@@ -798,196 +811,186 @@ 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, 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;
-        } 
-
-        if (state === AT_PLAYER_STATE.STOPPED) {
-          logger.debug('\n' + 'audio player on playlist: ' + playlist + ' at trackID|state: ' + trackID + '|' + AT_PLAYER_STATE_NAMES[state]);
-          return;
-        }
+        logger.warn('\n' + `DO NOTHING on StateChange for playlist: ${playlist} at trackID|state: ${trackID}|${AT_PLAYER_STATE_NAMES[state]}`);
 
-        if (state === AT_PLAYER_STATE.PAUSED) {
-          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.PREVIOUS) {
-          logger.debug('\n' + 'audio player on playlist: ' + playlist + ' at trackID|state: ' + trackID + '|' + AT_PLAYER_STATE_NAMES[state]);
-          return;
-        }
+      // -----------------------------------------------------------------------
+      // processOnStateChangePlaying()
+      //
+      // wrraper to update the ACTIVE player on state PLAYING
+      // -----------------------------------------------------------------------      
+      function processOnStateChangePlaying(state) {
+        var playList, activePlayist, playerID, playerType,
+            activePlayerType, startVolume, songIndex, trackID,
+            ratingIndex, rating, ratingElement, songMetaData,
+            songStartTS, songEndTS, songStartSec, songEndSec,
+            screenControlRatingElements, screenControlRating;
 
-        if (state === AT_PLAYER_STATE.NEXT) {
-          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;
+        songStartTS   = songMetaData.start;
+        songEndTS     = songMetaData.end;
+        songStartSec  = timestamp2seconds(songStartTS);
+        songEndSec    = timestamp2seconds(songEndTS);
+        startVolume   = Amplitude.getVolume();
 
-        if (state === AT_PLAYER_STATE.CHANGED) {
-          logger.debug('\n' + 'audio player on playlist: ' + playlist + ' at trackID|state: ' + trackID + '|' + AT_PLAYER_STATE_NAMES[state]);
-          return;
+        logger.debug('\n' + `PLAY audio on processOnStateChangePlaying for playlist \'${playList}\' at trackID|state: ${trackID}|${AT_PLAYER_STATE_NAMES[state]}`);
+
+        // update song rating in playlist-screen|meta-container
+        // -------------------------------------------------------------------
+        j1.adapter.amplitude.atUpdateSongRating(Amplitude.getActiveSongMetadata());
+
+        // scroll active song in players playlist
+        // ---------------------------------------------------------------------
+        j1.adapter.amplitude.atPlayerScrollToActiveElement(Amplitude.getActiveSongMetadata());
+
+        // 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('\n' + 'process player id: ' + playerID);
+          var ytpPlayer       = j1.adapter.amplitude.data.ytPlayers[playerID].player;
+          var playerState     = ytpPlayer.getPlayerState();
+          var ytpPlayerState  = YT_PLAYER_STATE_NAMES[playerState];
+
+          if (ytpPlayerState === 'playing' || ytpPlayerState === 'paused' || ytpPlayerState === 'buffering') {
+            logger.debug('\n' + 'process player id: ' + playerID + ' stopped');
+            ytpPlayer.stopVideo();
+          }
         }
 
-        if (state === AT_PLAYER_STATE.PLAYING) {
-          var playList, activePlayist, playerID, playerType,
-              activePlayerType, startVolume, songIndex,
-              ratingIndex, rating, ratingElement,
-              screenControlRatingElements, screenControlRating;
-
-          songMetaData  = Amplitude.getActiveSongMetadata();
-          songIndex     = songMetaData.index;
-          playList      = songMetaData.playlist;
-          playList      = Amplitude.getActivePlaylist();
-          trackID       = songIndex + 1;
-
-          songStartTS   = songMetaData.start;
-          songEndTS     = songMetaData.end;
-          songStartSec  = timestamp2seconds(songStartTS);
-          songEndSec    = timestamp2seconds(songEndTS);
-          startVolume   = Amplitude.getVolume();
-
-          logger.debug('\n' + 'audio player on playlist: ' + playList + ' at trackID|state: ' + trackID + '|' + AT_PLAYER_STATE_NAMES[state]);
-
-          // update song rating in playlist-screen|meta-container
-          // -------------------------------------------------------------------
-
-          // 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 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
 
-          // 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
+        // check|process audio for configured END position
+        // -------------------------------------------------------------------
+        if (songEndSec > songStartSec) {
+          var checkIsOnVideoEnd = setInterval(() => {
 
-          // process audio for configured START position
-          // -------------------------------------------------------------------
-          var checkIsFading = setInterval (() => {
-            if (!isFadingIn) {
-              var currentAudioTime = Amplitude.getSongPlayedSeconds();
-              if (songStartSec && currentAudioTime <= songStartSec) {
-                var songDurationSec = timestamp2seconds(songMetaData.duration); 
+            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 to configured START position
+                // 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 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 });
+                //       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
 
-              } // END if songStartSec
+                clearInterval(checkIsOnVideoEnd);
+              } // END if currentAudioTime
 
-              clearInterval(checkIsFading);
-            }
-          }, 100); // END checkIsFading
+            } // END if !isFading
 
-          // 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;
-            }
+          }, 100); // END checkIsOnVideoEnd
+        } // END if songEndSec
 
-          } // END stop active YT players
+        // save YT player data for later use (e.g. events)
+        // ---------------------------------------------------------------------
+        j1.adapter.amplitude.data.activePlayer = 'atp';
+        j1.adapter.amplitude.data.atpGlobals.activePlayerType = 'large';
 
-        } // END state AT_PLAYER_STATE PLAYING
+      }; // END processOnStateChangePlaying
 
-        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('\n' + `UNKNOWN state on StateChange fired: ${state}`);
+        } // END switch state
       } // END onPlayerStateChange
 
     }, // END initApi
@@ -996,30 +999,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
@@ -1073,19 +1076,42 @@ j1.adapter.amplitude = ((j1, window) => {
                   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 +1119,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 +1171,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 +1183,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 +1191,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 +1208,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('\n' + '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('\n' + '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 +1310,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 +1326,7 @@ j1.adapter.amplitude = ((j1, window) => {
                               if (currentTime > 0) {
                                 Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
                               }
+
                             }); // END EventListener 'click'
                           } // END if ID
                         }
@@ -1276,10 +1336,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 +1352,7 @@ j1.adapter.amplitude = ((j1, window) => {
                               if (currentTime > 0) {
                                 Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
                               }
+
                             }); // END EventListener 'click'
                           } // END if ID
                         }
@@ -1300,6 +1365,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 +1376,145 @@ 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
+                      // add listeners to all SongContainers found (LARGE player)
                       // -------------------------------------------------------
-                      var largetPlayerSongContainer = document.getElementsByClassName("amplitude-song-container");
-                      for (var i=0; i<largetPlayerSongContainer.length; i++) {
-                        if (largetPlayerSongContainer[i].dataset.amplitudeSource === 'youtube') {
-                          // do nothing
+                      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");
+                              playlistIndex   = parseInt(this.getAttribute("data-amplitude-song-index"));
+                              metaData        = Amplitude.getActiveSongMetadata();
+                              atpPlayerState  = Amplitude.getPlayerState();
+
+                              // update song rating in screen controls
+                              // -----------------------------------------------
+                              // updateSongRating(playlist, metaData.index, metaData.rating);
+
+                              // 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('\n' + `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);
+                              // -----------------------------------------------
+                              // if (playerAutoScrollSongElement) {
+                              //   j1.adapter.amplitude.atPlayerScrollToActiveElement(playlist);
+                              // }
+
+                              // toggle active AT players
+                              // -----------------------------------------------
+                              // if (atpPlayerState === 'playing') {
+                              //   // start|pause active player
+                              //   // logger.debug('\n' + 'process player id: ' + atpPlayerActive[0] + ' stopped');
+                              //   Amplitude.pause();
+                              // } else {
+                              //   Amplitude.playPlaylistSongAtIndex(playlistIndex, playlist);
+                              // }
+
+                              // 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('\n' + '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('\n' + '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
 
                       // 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)
+                      // add listeners to all PlayPause Buttons found (LARGE player)
+                      // -------------------------------------------------------
+
+                      {% comment %} PREPARED event listener for LATER use
+                      ----------------------------------------------------------                      
                       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,50 +1523,97 @@ 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 (LARGE player)
                       // -------------------------------------------------------
-
-                      // add listeners to all Next Buttons found
                       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");
+                              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('\n' + `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);
                               }                              
 
                               // 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
 
                       // 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('\n' + `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);
+                              }                              
 
                               // scroll song active at index in player
                               if (playerAutoScrollSongElement) {
@@ -1438,22 +1623,20 @@ j1.adapter.amplitude = ((j1, window) => {
                               // 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
 
-                      // 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 +1645,21 @@ j1.adapter.amplitude = ((j1, window) => {
                               const targetTime  = parseFloat(currentTime + skipOffset);
 
                               if (currentTime > 0) {
+                                logger.debug('\n' + `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 +1668,12 @@ j1.adapter.amplitude = ((j1, window) => {
                               const targetTime  = parseFloat(currentTime - skipOffset);
 
                               if (currentTime > 0) {
+                                logger.debug('\n' + `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 +1681,36 @@ 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('\n' + `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('\n' + `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 scrolling on playlist (LARGE player)
                       // -------------------------------------------------------
                       if (document.getElementById('large_player_right') !== null) {
 
                         // show|hide scrollbar in playlist
                         // -----------------------------------------------------
                         var songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
-                        if (songsInPlaylist.length <= 8) {
+                        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 +1726,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 +1748,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 +1763,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,14 +1774,14 @@ 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
 
@@ -1759,30 +1947,78 @@ j1.adapter.amplitude = ((j1, window) => {
     }, // END pluginManager
 
     // -------------------------------------------------------------------------
-    // atPlayerScrollToActiveElement(activePlaylist)
+    // atPlayerScrollToActiveElement(metaData)
     // -------------------------------------------------------------------------  
-    atPlayerScrollToActiveElement: (activePlaylist) => {
+    atPlayerScrollToActiveElement: (metaData) => {
       var scrollableList, songIndex,
-          activeElement, activeElementOffsetTop;
+          activeElement, activeElementOffsetTop,
+          songElementMin, numSongs;
+
+      if (!playerAutoScrollSongElement) {
+        // do nothing if playerAutoScrollSongElement is false
+        return;
+      }
 
-      scrollableList  = document.getElementById('large_player_title_list_' + activePlaylist);
+      songIndex       = metaData.index;
+      songElementMin  = playerScrollerSongElementMin;
+      numSongs        = Amplitude.getSongsInPlaylist(metaData.playlist).length;
+      scrollableList  = document.getElementById('large_player_title_list_' + metaData.playlist);
       activeElement   = scrollableList.querySelector('.amplitude-active-song-container');
 
       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';
+      if (songIndex > 0 && numSongs >= songElementMin) {
+        scrollableList            = document.getElementById('large_player_title_list_' + metaData.playlist);
+        activeElement             = scrollableList.querySelector('.amplitude-active-song-container');
+        activeElementOffsetTop    = songIndex * j1.adapter.amplitude.data.playerSongElementHeigth;
+        scrollableList.scrollTop  = activeElementOffsetTop;        
+      } else {
+        // do nothing if songIndex is 0 or less than songElementMin
+        return; 
       }
 
     }, // END atPlayerScrollToActiveElement
 
+    // -------------------------------------------------------------------------
+    // atUpdateSongRating(playlist, rating)
+    //
+    // update song rating in playlist-screen|meta-container
+    // -------------------------------------------------------------------------
+    atUpdateSongRating: (metaData) => {
+      var screenControlRating         = null;
+      var screenControlRatingElements = document.getElementsByClassName('audio-rating-screen-controls');
+      var ratingIndex;
+
+      for (let i=0; i<screenControlRatingElements.length; i++) {
+        var ratingElement     = screenControlRatingElements[i];
+        var rating            = parseInt(metaData.rating);
+        var playerType        = ratingElement.dataset.playerType;
+        var activePlayerType  = j1.adapter.amplitude.data.atpGlobals.activePlayerType;
+        var activePlayist     = metaData.playlist;
+
+        if (ratingElement.dataset.amplitudePlaylist === activePlayist && playerType === activePlayerType) {
+          ratingIndex = i;
+          screenControlRating = ratingElement;
+          break;
+        }
+
+      }
+
+      // set the rating for ACTIVE screenControlRatingElement
+      // -----------------------------------------------------------------------
+      if (screenControlRating) {
+        if (rating) {
+          ratingElement.innerHTML = '<img src="/assets/image/pattern/rating/scalable/' + rating + '-star.svg"' + 'alt="song rating">';
+        } else {
+          ratingElement.innerHTML = '';
+        }
+      }
+
+    }, // END atUpdateSongRating
+
     // -------------------------------------------------------------------------
     // messageHandler()
     // manage messages send from other J1 modules