j1-template 2024.3.19 → 2024.3.21

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

@@ -6,7 +6,7 @@ regenerate:                             true
 
 {% comment %}
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/adapter/js/amplitude.js
+ # ~/assets/theme/j1/adapter/js/amplitude.40.js
  # Liquid template to adapt J1 AmplitudeJS Apps
  #
  # Product/Info:
@@ -41,7 +41,7 @@ regenerate:                             true
 
 {% comment %} Set config data (settings only)
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign amplitude_defaults  = modules.defaults.amplitude_app.defaults %}
+{% assign amplitude_defaults  = modules.defaults.amplitude.defaults %}
 {% assign amplitude_players   = modules.amplitude_app.settings %}
 {% assign amplitude_playlists = modules.amplitude_playlists.settings %}
 
@@ -63,7 +63,7 @@ regenerate:                             true
 
 /*
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/adapter/js/amplitude.js
+ # ~/assets/theme/j1/adapter/js/amplitude.40.js
  # J1 Adapter for the amplitude module
  #
  # Product/Info:
@@ -83,8 +83,8 @@ regenerate:                             true
 // -----------------------------------------------------------------------------
 /* eslint indent: "off"                                                       */
 // -----------------------------------------------------------------------------
-
 "use strict";
+
 j1.adapter.amplitude = ((j1, window) => {
 
   // global settings
@@ -97,17 +97,6 @@ j1.adapter.amplitude = ((j1, window) => {
   // module settings
   // ---------------------------------------------------------------------------
 
-  // YT player settings
-  // ---------------------------------------------------------------------------
-  // const YT_PLAYER_STATE = {
-  //   not_started:        -1,
-  //   ended:               0,
-  //   playing:             1,
-  //   paused:              2,
-  //   buffering:           3,
-  //   video_cued:          5
-  // };
-
   // control|logging
   // ---------------------------------------------------------------------------
   var _this;
@@ -126,22 +115,39 @@ j1.adapter.amplitude = ((j1, window) => {
 
   // AmplitudeJS API settings
   // ---------------------------------------------------------------------------
-  var ytpSongIndex    = "0";
-  var ytpAutoPlay     = false;
-  var ytpLoop         = true;
+  const AT_PLAYER_STATE = {
+    ENDED:          0,
+    PLAYING:        1,
+    PAUSED:         2,
+    STOPPED:        3,
+    PREVIOUS:       4,
+    NEXT:           5,
+    CHANGED:        6,
+  };
+
+  const AT_PLAYER_STATE_NAMES = {
+    0:              "ended",
+    1:              "playing",
+    2:              "paused",
+    3:              "stopped",
+    4:              "previous",
+    5:              "next",
+    6:              "changed",
+  };
+
   var playLists       = {};
   var playersUILoaded = { state: false };
   var apiInitialized  = { state: false };
-  var playList;
-  var playerID;
-  var playerType;
-  var playListTitle;
-  var playListName;
+
+  var isFadingIn      = false;
+  var isFadingOut     = false;
+
   var amplitudePlayerState;
   var amplitudeDefaults;
   var amplitudePlayers
   var amplitudePlaylists
   var amplitudeOptions;
+
   var ytPlayer;
   var ytpPlaybackRate
 
@@ -157,25 +163,30 @@ j1.adapter.amplitude = ((j1, window) => {
   var playersProcessed                  = [];
   var playersHtmlLoaded                 = false;
   var processingPlayersFinished         = false;
-  var pluginManagerRunOnce              = false;
 
   var playerAudioInfo                   = ('{{amplitude_defaults.playlist.audio_info}}' === 'true') ? true : false;
   var playerDefaultPluginManager        = ('{{amplitude_defaults.player.plugin_manager.enabled}}' === 'true') ? true : false;
   var playerDefaultType                 = '{{amplitude_defaults.player.type}}';
-  var playerVolumeValue                 = '{{amplitude_defaults.player.volume_slider.preset_value}}';
-  var playerVolumeSliderStep            = '{{amplitude_defaults.player.volume_slider.slider_step}}';
-  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}}';
 
   // ---------------------------------------------------------------------------
@@ -216,13 +227,21 @@ j1.adapter.amplitude = ((j1, window) => {
       // -----------------------------------------------------------------------
       // control|logging settings
       // -----------------------------------------------------------------------
-      _this              = j1.adapter.amplitude;
-      logger             = log4javascript.getLogger('j1.adapter.amplitude');
+      _this                 = j1.adapter.amplitude;
+      logger                = log4javascript.getLogger('j1.adapter.amplitude');
 
       // prepare data element for later use
       j1.adapter.amplitude.data             = {};
-      j1.adapter.amplitude.data.ytpGlobals  = {};
+      j1.adapter.amplitude.data.atpGlobals  = {};
+      j1.adapter.amplitude.data.ytpGlobals  = {};      
       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.atpGlobals.activePlayerType = 'not_set';
+      j1.adapter.amplitude.data.atpGlobals.ytpInstalled     = false;
+      j1.adapter.amplitude.data.ytpGlobals.activePlayerType = 'not_set';
 
       // -----------------------------------------------------------------------
       // module initializer
@@ -231,14 +250,20 @@ j1.adapter.amplitude = ((j1, window) => {
         var pageState      = $('#content').css("display");
         var pageVisible    = (pageState === 'block') ? true : false;
         var j1CoreFinished = (j1.getState() === 'finished') ? true : false;
+        var atticFinished  = (j1.adapter.attic.getState() == 'finished') ? true : false;
 
-        if (j1CoreFinished && pageVisible) {
+        if (j1CoreFinished && pageVisible && atticFinished) {
           startTimeModule = Date.now();
 
           _this.setState('started');
           logger.debug('\n' + 'module state: ' + _this.getState());
           logger.info('\n' + 'module is being initialized');
 
+          // 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)
           // -------------------------------------------------------------------
@@ -263,7 +288,7 @@ j1.adapter.amplitude = ((j1, window) => {
           }, 10); // END dependencies_met_players_loaded
 
           // -------------------------------------------------------------------
-          // initialize player specific UI events
+          // initialize player specific events
           // -------------------------------------------------------------------
           var dependencies_met_api_initialized = setInterval (() => {
             if (apiInitialized.state) {
@@ -273,6 +298,24 @@ j1.adapter.amplitude = ((j1, window) => {
             } // END if apiInitialized
           }, 10); // END dependencies_met_api_initialized
 
+          // 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;
+            }
+          });
+
+          $(window).resize(function() {
+            if (this.resizeTO) clearTimeout(this.resizeTO);
+            this.resizeTO = setTimeout(function() {
+              $(this).trigger('resizeEnd');
+            }, 500);
+         });
+
           clearInterval(dependencies_met_page_ready);
         } // END pageVisible
       }, 10); // END dependencies_met_page_ready
@@ -321,6 +364,12 @@ j1.adapter.amplitude = ((j1, window) => {
               } else if (key === 'rating') {
                 song.rating = item[key];
                 continue;
+              } else if (key === 'audio_single') {
+                song.audio_single = item[key];
+                continue;               
+              } else if (key === 'shuffle') {
+                song.shuffle = item[key];
+                continue;                 
               } else {
                 song[key] = item[key];
               } // END if key
@@ -332,7 +381,7 @@ j1.adapter.amplitude = ((j1, window) => {
 
       {% endif %} {% endfor %}
 
-      logger.info('\n' + 'creating global playlist  (API): finished');
+      logger.info('\n' + 'creating global playlist (API): finished');
     }, // END songLoader
 
     // -------------------------------------------------------------------------
@@ -408,6 +457,7 @@ j1.adapter.amplitude = ((j1, window) => {
     // initApi
     // -------------------------------------------------------------------------
     initApi: (songlist) => {
+
       logger.info('\n' + 'initialze API: started');
 
       {% comment %} collect playlists
@@ -424,16 +474,26 @@ j1.adapter.amplitude = ((j1, window) => {
         {% assign playlist_title = list.title %}
 
         {% comment %} collect song items
+        NOTE: configure all properties avaialble in songs array
         ------------------------------------------------------------------------ {% endcomment %}
         {% for item in playlist_items %} {% if item.enabled %}
           {% capture song_item %}
           {
             "name":           "{{item.title}}",
+            // "track":          "{{item.track}}",
             "artist":         "{{item.artist}}",
+            "playlist":       "{{item.playlist}}",
             "album":          "{{item.name}}",
             "url":            "{{item.audio_base}}/{{item.audio}}",
             "audio_info":     "{{item.audio_info}}",
             "rating":         "{{item.rating}}",
+            "start":          "{{item.start}}",
+            "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}}"
           }{% if forloop.last %}{% else %},{% endif %}
           {% endcapture %}
@@ -492,26 +552,40 @@ j1.adapter.amplitude = ((j1, window) => {
             console.error('\n' + 'Amplitude API failed on initialization');
           },
           play: function() {
-            var songMetaData = Amplitude.getActiveSongMetadata();
-            logger.debug('\n' + 'playing title: ' + songMetaData.name);
-            document.getElementById('album-art').style.visibility = 'hidden';
-            document.getElementById('large-visualization').style.visibility = 'visible';
+            // make sure the player is playing
+            setTimeout(() => {
+              onPlayerStateChange(1);
+            }, 150);
           },
           pause: function() {
-            var songMetaData = Amplitude.getActiveSongMetadata();
-            logger.debug('\n' + 'pause title: ' + songMetaData.name);
-            document.getElementById('album-art').style.visibility = 'visible';
-            document.getElementById('large-visualization').style.visibility = 'hidden';
+            // make sure the player is paused
+            setTimeout(() => {
+              onPlayerStateChange(2);
+            }, 150);
+          },
+          stop: function() {
+            // make sure the player is stopped
+            setTimeout(() => {
+              onPlayerStateChange(3);
+            }, 150);
           },
           song_change: function() {
-            var songMetaData = Amplitude.getActiveSongMetadata();
-            logger.debug('\n' + 'changed to title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
+            // make sure the player has changed
+            setTimeout(() => {
+              var currentState = Amplitude.getPlayerState();
+              if (currentState === 'stopped') {
+                // onPlayerStateChange(3);
+                return;
+              } else {
+                onPlayerStateChange(6);
+              }
+            }, 150);
           },
-          next: function() {
-            var songMetaData = Amplitude.getActiveSongMetadata();
-
+          prev: function() {
+            var currentState = Amplitude.getPlayerState();
+            onPlayerStateChange(4);
             if (playerDelayNextTitle) {
-              logger.debug('\n' + 'delay on next title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
+              logger.debug('\n' + 'delay on previous title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
             }
 
             if (playerPauseNextTitle) {
@@ -524,12 +598,13 @@ j1.adapter.amplitude = ((j1, window) => {
                 }, 150);
               } // END if playing
             } // END if pause on next title
-          },
-          prev: function() {
-            var songMetaData = Amplitude.getActiveSongMetadata();
 
+            return;
+          },
+          next: function() {
+            onPlayerStateChange(5);
             if (playerDelayNextTitle) {
-              logger.debug('\n' + 'delay on previous title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
+              logger.debug('\n' + 'delay on next title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
             }
 
             if (playerPauseNextTitle) {
@@ -542,6 +617,12 @@ j1.adapter.amplitude = ((j1, window) => {
                 }, 150);
               } // END if playing
             } // END if pause on next title
+
+            return;
+          },
+          ended: function() {
+            onPlayerStateChange(0);
+            return;            
           }
         }, // END callbacks
 
@@ -550,14 +631,399 @@ 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
+      // -----------------------------------------------------------------------
+      function atpFadeInAudio(params) {
+        const cycle = 1;
+        var   settings, currentStep, steps, sliderID, volumeSlider;
+
+        isFadingIn = true;
+
+        // current fade-in settings using DEFAULTS (if available)
+        settings =  {
+          playerID:     params.playerID,
+          targetVolume: params.targetVolume = 50,
+          speed:        params.speed = 'default'
+        };
+
+        // number of iteration steps to INCREASE the players volume on fade-in
+        // NOTE: number of steps controls how long and smooth the fade-in 
+        // transition will be
+        const iterationSteps = {
+          'default':  150,
+          'slow': 	  250,
+          'slower':   350,
+          'slowest':  500
+        };
+
+        sliderID     = 'volume_slider_' + settings.playerID;
+        volumeSlider = document.getElementById(sliderID);
+        steps        = iterationSteps[settings.speed];
+        currentStep  = 1;
+
+        if (volumeSlider === undefined || volumeSlider === null) {
+          logger.warn('\n' + 'no volume slider found at playerID: ' + settings.playerID);
+          return;
+        }
+
+        // Start the players volume muted
+        Amplitude.setVolume(0);
+
+        const fadeInInterval = setInterval(() => {
+          const newVolume = settings.targetVolume * (currentStep / steps);
+
+          Amplitude.setVolume(newVolume);
+          volumeSlider.value = newVolume;
+          currentStep++;
+
+          if (currentStep > steps) {
+            isFadingIn = false;
+            clearInterval(fadeInInterval);
+          } 
+
+        }, cycle);
+
+      } // END atpFadeInAudio
+
+      // -----------------------------------------------------------------------
+      // atpFadeAudioOut
+      //
+      // returns true if fade-out is finished
+      // -----------------------------------------------------------------------
+      function atpFadeAudioOut(params) {
+        const cycle = 1;
+        var   settings, currentStep, steps, sliderID, songs,
+              startVolume, newVolume, defaultVolume, volumeSlider;
+
+        // current fade-out settings using DEFAULTS (if available)
+        settings =  {
+          playerID:       params.playerID,
+          speed:          params.speed = 'default'
+        };
+
+        isFadingOut = true;
+
+        // number of iteration steps to INCREASE the players volume on fade-in
+        // NOTE: number of steps controls how long and smooth the fade-in 
+        // transition will be
+        const iterationSteps = {
+          'default':  150,
+          'slow': 	  250,
+          'slower':   350,
+          'slowest':  500
+        };
+
+        sliderID      = 'volume_slider_' + settings.playerID;
+        volumeSlider  = document.getElementById(sliderID);
+        startVolume   = Amplitude.getVolume();
+        steps         = iterationSteps[settings.speed];
+        currentStep   = 1;
+        defaultVolume = 50;
+
+        var songMetaData  = Amplitude.getActiveSongMetadata();
+        var songEndTS     = songMetaData.end;
+        var playlist      = songMetaData.playlist;
+        var songIndex     = songMetaData.index;
+        var trackID       = songIndex + 1; 
+
+        if (volumeSlider !== null) {
+          const fadeOutInterval = setInterval(() => {
+            newVolume = startVolume * (1 - currentStep / steps);
+
+            Amplitude.setVolume(newVolume);
+            volumeSlider.value = newVolume;
+            currentStep++;
+
+            // seek current audio to total end to continue on next track
+            if (currentStep > steps) {
+              songs = Amplitude.getSongsInPlaylist(playlist);
+
+              if (songIndex === songs.length-1) {
+                logger.debug('\n' + 'restore player volume on last trackID|volume at: ' + trackID + '|' + defaultVolume);
+                volumeSlider.value  =  defaultVolume;              
+              }
+
+              isFadingOut = false;
+              clearInterval(fadeOutInterval);
+            } 
+          }, cycle);
+        } // END if volumeSlider
+
+      } // END atpFadeAudioOut
+
+      // -----------------------------------------------------------------------
+      // doNothingOnStateChange(state)
+      //
+      // wrraper for states that are not processed
+      // -----------------------------------------------------------------------
+      function doNothingOnStateChange(state) {
+        var playlist, songMetaData, songIndex, trackID;
+        
+        playlist      = Amplitude.getActivePlaylist();
+        songMetaData  = Amplitude.getActiveSongMetadata();
+        songIndex     = songMetaData.index;
+        trackID       = songIndex + 1;
+
+        logger.warn('\n' + `DO NOTHING on StateChange for playlist: ${playlist} at trackID|state: ${trackID}|${AT_PLAYER_STATE_NAMES[state]}`);
+
+      } // END doNothingOnStateChange
+
+      // -----------------------------------------------------------------------
+      // 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;
+
+        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();
+
+        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();
+          }
+        }
+
+        // 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
+
+        // save YT player data for later use (e.g. events)
+        // ---------------------------------------------------------------------
+        j1.adapter.amplitude.data.activePlayer = 'atp';
+        j1.adapter.amplitude.data.atpGlobals.activePlayerType = 'large';
+
+      }; // END processOnStateChangePlaying
+
+      // -----------------------------------------------------------------------
+      // 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
 
+    // -------------------------------------------------------------------------
+    // 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
     // -------------------------------------------------------------------------
@@ -574,14 +1040,6 @@ j1.adapter.amplitude = ((j1, window) => {
             {% assign xhr_data_path = amplitude_options.xhr_data_path %}
             {% capture xhr_container_id %}{{player.id}}_app{% endcapture %}
 
-            playerID              = '{{player.id}}';
-            playerType            = '{{player.type}}';
-            playList              = '{{player.playlist}}';
-            playListName          = '{{player.playlist.name}}'
-            playListTitle         = '{{player.playlist.title}}';
-            
-            logger.debug('\n' + 'set playlist {{player.playlist}} on id #{{player.id}} with title: ' + playListTitle);
-
             // dynamic loader variable to setup the player on ID {{player.id}}
             dependency                    = 'dependencies_met_player_loaded_{{player.id}}';
             load_dependencies[dependency] = '';
@@ -590,11 +1048,18 @@ j1.adapter.amplitude = ((j1, window) => {
             // initialize player instance (when player UI is loaded)
             // -----------------------------------------------------------------
             load_dependencies['dependencies_met_player_loaded_{{player.id}}'] = setInterval (() => {
-              // check if HTML portion of the player is loaded successfully
-              var xhrLoadState        = j1.xhrDOMState['#' + '{{xhr_container_id}}'];
-              var playerExistsInPage  = ($('#' + '{{xhr_container_id}}')[0] !== undefined) ? true : false;
+              var xhrDataLoaded      = (j1.xhrDOMState['#' + '{{xhr_container_id}}'] === 'success') ? true : false;
+              var playerExistsInPage = ($('#' + '{{xhr_container_id}}')[0] !== undefined) ? true : false;
 
-              if (xhrLoadState === 'success' && playerExistsInPage) {
+              // check the player HTML portion is loaded and player exists (in page)
+              if (xhrDataLoaded && playerExistsInPage) {
+                var playerID      = '{{player.id}}';
+                var playerType    = '{{player.type}}';
+                var playList      = '{{player.playlist}}';
+                var playListName  = '{{player.playlist.name}}';
+                var playListTitle = '{{player.playlist.title}}';
+
+                logger.debug('\n' + 'initialize audio player instance on id: {{player.id}}');
 
                 // set song (title) specific audio info links
                 // -------------------------------------------------------------
@@ -603,33 +1068,50 @@ j1.adapter.amplitude = ((j1, window) => {
                   _this.setAudioInfo(infoLinks);
                 }
 
-                // jadams, 2024-10-19: (song) events DISABLED
-                // set song (title) specific UI events
-                // -------------------------------------------------------------
-                // var songElements = document.getElementsByClassName('song');
-                // _this.songEvents(songElements);
-
-                // player specific UI events
+                // set player specific UI events
                 // -------------------------------------------------------------
-                logger.debug('\n' + 'setup player specific UI events on ID #{{player.id}}: started');
+                logger.debug('\n' + '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();
@@ -637,43 +1119,32 @@ j1.adapter.amplitude = ((j1, window) => {
   
                             Amplitude.setSongPlayedPercentage(
                               (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
-                          }); // END EventListener 'click'
-                        }
-                      } // END for
-
-                      // for (var i=0; i<progressBars.length; i++) {
-                      //     progressBars[i].addEventListener('click', function(event) {
-                      //       var offset = this.getBoundingClientRect();
-                      //       var xpos   = event.pageX - offset.left;
 
-                      //       Amplitude.setSongPlayedPercentage(
-                      //         (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
-                      //     });
-                      // }
+                          }); // END 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');
                         }
-                      }
-
-                      // show|hide playlist
-                      // -------------------------------------------------------
+                      } // END if songsInPlaylist
 
                       // show playlist
+                      // -------------------------------------------------------
                       var showPlaylist = document.getElementById("show_playlist_{{player.id}}");
                       if (showPlaylist !== null) {
                         showPlaylist.addEventListener('click', function(event) {
@@ -700,82 +1171,192 @@ j1.adapter.amplitude = ((j1, window) => {
                               $('body').addClass('stop-scrolling');
                             }
                           }
-                        }); // END EventListener 'click' (compact player|show playlist)
-                     } // END if showPlaylist
 
-                    // hide playlist
-                    var hidePlaylist = document.getElementById("hide_playlist_{{player.id}}");
-                    if (hidePlaylist !== null) {
-                      hidePlaylist.addEventListener('click', function(event) {
-                        var playlistScreen = document.getElementById("playlist_screen_{{player.id}}");
+                        }); // END EventListener
+                      } // END if showPlaylist
+
+                      // hide playlist
+                      // -------------------------------------------------------                    
+                      var hidePlaylist = document.getElementById("hide_playlist_{{player.id}}");
+                      if (hidePlaylist !== null) {
+                        hidePlaylist.addEventListener('click', function(event) {
+                          var playlistScreen = document.getElementById("playlist_screen_{{player.id}}");
 
-                        playlistScreen.classList.remove('slide-in-top');
-                        playlistScreen.classList.add('slislide-out-top');
-                        playlistScreen.style.display = "none";
-                        playlistScreen.style.zIndex = "1";
+                          playlistScreen.classList.remove('slide-in-top');
+                          playlistScreen.classList.add('slide-out-top');
+                          playlistScreen.style.display = "none";
+                          playlistScreen.style.zIndex = "1";
 
-                        // enable scrolling
-                        if ($('body').hasClass('stop-scrolling')) {
-                          $('body').removeClass('stop-scrolling');
+                          // enable scrolling
+                          if ($('body').hasClass('stop-scrolling')) {
+                            $('body').removeClass('stop-scrolling');
+                          }
+
+                        }); // END addEventListener
+                      } // END if hidePlaylist
+
+                      // add listeners to all progress bars found (compact-player)
+                      // -------------------------------------------------------
+                      var progressBars = document.getElementsByClassName("compact-player-progress");
+                      for (var i=0; i<progressBars.length; i++) {
+                        if (progressBars[i].dataset.amplitudeSource === 'youtube') {
+                          // do nothing for YTP (managed by plugin)
+                        } else {
+                          progressBars[i].addEventListener('click', function(event) {
+                            var offset = this.getBoundingClientRect();
+                            var xpos   = event.pageX - offset.left;
+
+                            Amplitude.setSongPlayedPercentage(
+                              (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
+
+                            }); // END EventListener 'click'
+                        } // END if progressBars
+                      } // END for progressBars
+
+                      // add listeners to all Next Buttons found (COMPACT player)
+                      // -------------------------------------------------------
+
+                      {% 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 (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 EventListener 'click' (compact player|show playlist)
-                    } // END if hidePlaylist
-
-                    // add listeners to all progress bars found (compact-player)
-                    // getElementsByClassName returns an Array-like object
-                    // -------------------------------------------------------
-                    var progressBars = document.getElementsByClassName("compact-player-progress");
-                    for (var i=0; i<progressBars.length; i++) {
-                      if (progressBars[i].dataset.amplitudeSource === 'youtube') {
-                        // do nothing
-                      } else {
-                        progressBars[i].addEventListener('click', function(event) {
-                          var offset = this.getBoundingClientRect();
-                          var xpos   = event.pageX - offset.left;
-
-                          Amplitude.setSongPlayedPercentage(
-                            (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
-                        }); // END EventListener 'click'
-                      }
-                    } // END for
+                      } // 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 for YTP (managed by plugin)
+                        } else { 
+                          if (compactPreviousButtons[i].id === 'compact_player_previous_{{player.id}}' || compactPreviousButtons[i].id === 'compact_player_list_previous_{{player.id}}') {
+                            compactPreviousButtons[i].addEventListener('click', function(event) {
+                              var atpPlayerID     = this.id;
+                              var atpPlayerActive = atpPlayerID.split('_');
+    
+                              j1.adapter.amplitude.data.atpGlobals.activePlayerType = 'compact';
 
-                      // click on skip forward|backward (compact player)
+                            }); // 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 === 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) {
+                              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
                       // -------------------------------------------------------
 
                       // add listeners to all SkipForwardButtons found
                       var compactPlayerSkipForwardButtons = document.getElementsByClassName("compact-player-skip-forward");
                       for (var i=0; i<compactPlayerSkipForwardButtons.length; i++) {
-                        if (compactPlayerSkipForwardButtons[i].id === 'skip-forward_{{player.id}}') {
-                          compactPlayerSkipForwardButtons[i].addEventListener('click', function(event) {
-                            const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
-                            const duration    = Amplitude.getSongDuration();
-                            const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
-                            const targetTime  = parseFloat(currentTime + skipOffset);
-
-                            if (currentTime > 0) {
-                              Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
-                            }
-                          }); // END EventListener 'click'
-                        } // END if ID
-                      } // END for SkipForwardButtons
+                        if (compactPlayerSkipForwardButtons[i].dataset.amplitudeSource === 'youtube') {
+                          // 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());
+                              const targetTime  = parseFloat(currentTime + skipOffset);
+
+                              if (currentTime > 0) {
+                                Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
+                              }
+
+                            }); // END EventListener 'click'
+                          } // END if ID
+                        }
+                      } // END SkipForwardButtons (COMPACT player)
 
                       // add listeners to all SkipBackwardButtons found
                       var compactPlayerSkipBackwardButtons = document.getElementsByClassName("compact-player-skip-backward");
                       for (var i=0; i<compactPlayerSkipBackwardButtons.length; i++) {
-                        if (compactPlayerSkipBackwardButtons[i].id === 'skip-backward_{{player.id}}') {
-                          compactPlayerSkipBackwardButtons[i].addEventListener('click', function(event) {
-                            const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
-                            const duration    = Amplitude.getSongDuration();
-                            const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
-                            const targetTime  = parseFloat(currentTime - skipOffset);
-
-                            if (currentTime > 0) {
-                              Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
-                            }
-                          }); // END EventListener 'click'
-                        } // END if ID
-                      } // END for SkipBackwardButtons
+                        if (compactPlayerSkipBackwardButtons[i].dataset.amplitudeSource === 'youtube') {
+                          // 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());
+                              const targetTime  = parseFloat(currentTime - skipOffset);
+
+                              if (currentTime > 0) {
+                                Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
+                              }
+
+                            }); // END EventListener 'click'
+                          } // END if ID
+                        }
+                      } // END SkipBackwardButtons (COMPACT player)
 
                       // click on shuffle button
                       var compactPlayerShuffleButton = document.getElementById('compact_player_shuffle');
@@ -784,8 +1365,9 @@ 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 compactPlayerShuffleButton
+                      } // END PlayerShuffleButton (COMPACT player)
 
                       // click on repeat button
                       var compactPlayerRepeatButton = document.getElementById('compact_player_repeat');
@@ -794,55 +1376,267 @@ 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 compactPlayerRepeatButton
+                      } // 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 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 = largePlayerSongContainer[i].dataset.amplitudePlaylist;
+                          if (currentPlaylist === 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);
+                              // }
+
+                              // 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();
+                                }
+                              }
+
+                              // 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
-                      var largePlayerPlayButton = document.getElementById('large_player_play_pause');
-                      // add listeners to all progress bars found (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 for YTP (managed by plugin)
+                        } else {
+                          var currentPlaylist = largePlayerPlayPauseButton[i].dataset.amplitudePlaylist;                          
+                          if (currentPlaylist === playList) {                        
+                            largePlayerPlayPauseButton[i].addEventListener('click', function(event) {
+                              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();
                             var xpos   = event.pageX - offset.left;
-  
-                            Amplitude.setSongPlayedPercentage(
-                              (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
+
+                            if (Amplitude.getPlayerState() === 'playing') {
+                              Amplitude.setSongPlayedPercentage((parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
+                            }
+
                           }); // END EventListener 'click'
                         }
                       } // END for
 
-                      // click on skip forward|backward (large player)
-                      // See: https://github.com/serversideup/amplitudejs/issues/384
+                      // 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 for YTP (managed by plugin)
+                        } else {                        
+                          if (largeNextButtons[i].id === 'large_player_next_{{player.id}}') {
+                            largeNextButtons[i].addEventListener('click', function(event) {
+                              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];
 
-                      // add listeners to all SkipForwardButtons found
+                            }); // END EventListener 'click'
+                          } // 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 for YTP (managed by plugin)
+                        } else {                          
+                          if (largePreviousButtons[i].id === 'large_player_previous_{{player.id}}') {
+                            largePreviousButtons[i].addEventListener('click', function(event) {
+                              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) {
+                                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 addEventListener
+                          } // END if largePreviousButtons
+                        } // END if largePreviousButtons
+                      } // END for Previous Buttons
+
+                      // add listeners to all SkipForward Buttons found
+                      // See: https://github.com/serversideup/amplitudejs/issues/384
+                      // -------------------------------------------------------
                       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);
@@ -851,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);
@@ -872,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
@@ -884,35 +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 (largePlayerShuffleButton) {
+                      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
                         // -----------------------------------------------------
-                        const songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
-
-                        if (songsInPlaylist.length <= 8) {
+                        var 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
@@ -928,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) {
@@ -950,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;
@@ -965,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() {
@@ -976,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
 
@@ -1037,11 +1835,9 @@ j1.adapter.amplitude = ((j1, window) => {
                 playerExistsInPage   = (document.getElementById('{{player.id}}_app') !== null) ? true : false;
                 pluginManagerEnabled = ('{{player.plugin_manager.enabled}}'.length > 0 && '{{player.plugin_manager.enabled}}' === 'true') ? true : playerDefaultPluginManager;
 
-                if (playerExistsInPage && pluginManagerEnabled && !pluginManagerRunOnce) {
+                var ytpPluginInstalled = j1.adapter.amplitude.data.atpGlobals.ytpInstalled;
+                if (playerExistsInPage && pluginManagerEnabled && !ytpPluginInstalled) {
                   _this.pluginManager('{{player.plugin_manager.plugins}}');
-
-                  // make sure the plugin is loaded|run only ONCE
-                  pluginManagerRunOnce = true;
                 }
 
                 clearInterval(load_dependencies['dependencies_met_player_loaded_{{player.id}}']);
@@ -1116,9 +1912,21 @@ j1.adapter.amplitude = ((j1, window) => {
     // pluginManager()
     // 
     // -------------------------------------------------------------------------
-    pluginManager: (plugin) => {
-//    if (plugin === 'ytp' && j1.adapter.amplitude['ytPlayerReady'] === undefined ) {
-      if (plugin === 'ytp') {        
+    pluginManager: (plugin) => {      
+
+      function isPluginLoaded(pluginName) {
+        const scripts     = document.scripts;
+        const pluginFile  = pluginName + '.js';
+
+        for (let i = 0; i < scripts.length; i++) {
+          if (scripts[i].src.includes(pluginFile)) {
+            return true;
+          }
+        }
+        return false;
+      }
+
+      if (plugin !== '' && plugin === 'ytp') {        
         var tech;
         var techScript;
 
@@ -1129,8 +1937,88 @@ j1.adapter.amplitude = ((j1, window) => {
 
         techScript.parentNode.insertBefore(tech, techScript);
       }
+
+      if (plugin !== '' && isPluginLoaded(plugin)) {     
+        logger.debug('\n' + 'plugin loaded: ' + plugin);
+
+        // make sure the plugin installed only ONCE
+        j1.adapter.amplitude.data.atpGlobals.ytpInstalled = true;
+      }      
     }, // END pluginManager
 
+    // -------------------------------------------------------------------------
+    // atPlayerScrollToActiveElement(metaData)
+    // -------------------------------------------------------------------------  
+    atPlayerScrollToActiveElement: (metaData) => {
+      var scrollableList, songIndex,
+          activeElement, activeElementOffsetTop,
+          songElementMin, numSongs;
+
+      if (!playerAutoScrollSongElement) {
+        // do nothing if playerAutoScrollSongElement is false
+        return;
+      }
+
+      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)
+        return;
+      }
+
+      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