j1-template 2024.3.21 → 2024.3.22

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

@@ -6,7 +6,7 @@ regenerate:                             true
 
 {% comment %}
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/adapter/js/amplitude.40.js
+ # ~/assets/theme/j1/adapter/js/amplitude.41.js
  # Liquid template to adapt J1 AmplitudeJS Apps
  #
  # Product/Info:
@@ -63,7 +63,7 @@ regenerate:                             true
 
 /*
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/adapter/js/amplitude.40.js
+ # ~/assets/theme/j1/adapter/js/amplitude.41.js
  # J1 Adapter for the amplitude module
  #
  # Product/Info:
@@ -87,34 +87,39 @@ regenerate:                             true
 
 j1.adapter.amplitude = ((j1, window) => {
 
-  // global settings
+  const isDev = (j1.env === "development" || j1.env === "dev") ? true : false;
+
+  // Adapter GLOBAL settings
   // ---------------------------------------------------------------------------
   var environment   = '{{environment}}';
   var cookie_names  = j1.getCookieNames();
   var user_state    = j1.readCookie(cookie_names.user_state);
   var state         = 'not_started';
 
-  // module settings
   // ---------------------------------------------------------------------------
-
   // control|logging
-  // ---------------------------------------------------------------------------
+  // ------------------------------------
+  var consoleFilterSettings = {};
   var _this;
   var logger;
   var logText;
   var toJSON;
   var toText;
 
+  // --------------------------------------------------------------------------
   // date|time monitoring
-  //----------------------------------------------------------------------------
+  // ------------------------------------
   var startTime;
   var endTime;
   var startTimeModule;
   var endTimeModule;
   var timeSeconds;
 
-  // AmplitudeJS API settings
-  // ---------------------------------------------------------------------------
+  // --------------------------------------------------------------------------  
+  // AmplitudeJS GLOBAL settings
+  // ----------------------------------
+  const requiredForATP = false;
+
   const AT_PLAYER_STATE = {
     ENDED:          0,
     PLAYING:        1,
@@ -135,12 +140,16 @@ j1.adapter.amplitude = ((j1, window) => {
     6:              "changed",
   };
 
-  var playLists       = {};
-  var playersUILoaded = { state: false };
-  var apiInitialized  = { state: false };
-
-  var isFadingIn      = false;
-  var isFadingOut     = false;
+  var playLists                         = {};
+  var playersUILoaded                   = { state: false };
+  var apiInitialized                    = { state: false };
+  var playerCounter                     = 0;
+  var load_dependencies                 = {};
+  var playersProcessed                  = [];
+  var playersHtmlLoaded                 = false;
+  var processingPlayersFinished         = false;
+  var isFadingIn                        = false;
+  var isFadingOut                       = false;
 
   var amplitudePlayerState;
   var amplitudeDefaults;
@@ -156,42 +165,49 @@ j1.adapter.amplitude = ((j1, window) => {
   var pluginManagerEnabled;
   var playerExistsInPage;
 
-  // AmplitudeJS Player DEFAULT settings
+  
+  // AmplitudeJS DEFAULT settings
   // ---------------------------------------------------------------------------
-  var playerCounter                     = 0;
-  var load_dependencies                 = {};
-  var playersProcessed                  = [];
-  var playersHtmlLoaded                 = false;
-  var processingPlayersFinished         = false;
 
-  var playerAudioInfo                   = ('{{amplitude_defaults.playlist.audio_info}}' === 'true') ? true : false;
-  var playerDefaultPluginManager        = ('{{amplitude_defaults.player.plugin_manager.enabled}}' === 'true') ? true : false;
+  // PLAYER settings
+  // ------------------------------------
+  var playerDefaultPluginManager        = {{amplitude_defaults.player.plugin_manager.enabled}};
   var playerDefaultType                 = '{{amplitude_defaults.player.type}}';
   var playerDefaultVolume               = {{amplitude_defaults.player.volume_slider.preset_value}};
   var playerVolumeSliderStep            = {{amplitude_defaults.player.volume_slider.slider_step}};
-  var playerRepeat                      = ('{{amplitude_defaults.player.player_repeat}}' === '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 playerRepeat                      = {{amplitude_defaults.player.player_repeat}};
+  var playerShuffle                     = {{amplitude_defaults.player.player_shuffle}};
+  var playerPlayNextTitle               = {{amplitude_defaults.player.play_next_title}};
+  var playerPauseNextTitle              = {{amplitude_defaults.player.pause_next_title}};
   var playerDelayNextTitle              = {{amplitude_defaults.player.delay_next_title}};
   var playerForwardBackwardSkipSeconds  = {{amplitude_defaults.player.forward_backward_skip_seconds}};
+  var playerHoverPageScrollDisabled     = {{amplitude_defaults.player.player_hover_page_scroll_disabled}};
 
-  var playerSongElementHeigthMobile     = {{amplitude_defaults.player.song_element_heigth_mobile}};  
-  var playerSongElementHeigthDesktop    = {{amplitude_defaults.player.song_element_heigt_desktop}};
+  var playerSongElementHeigthMobile     = {{amplitude_defaults.player.player_song_element_heigth_mobile}};  
+  var playerSongElementHeigthDesktop    = {{amplitude_defaults.player.player_song_element_heigt_desktop}};
   var playerScrollerSongElementMin      = {{amplitude_defaults.player.player_scroller_song_element_min}};
   var playerScrollControl               = {{amplitude_defaults.player.player_scroll_control}};
   var playerAutoScrollSongElement       = {{amplitude_defaults.player.player_auto_scroll_song_element}};
 
-  // AmplitudeJS settings curently NOT used
   // ---------------------------------------------------------------------------
-  var playerWaveformsEnabled           = {{amplitude_defaults.player.waveforms.enabled}};
-  var playerWaveformsSampleRate        = {{amplitude_defaults.player.waveforms.sample_rate}};
-  var playerVisualizationEnabled       = {{amplitude_defaults.player.visualization.enabled}};
-  var playerVisualizationName          = '{{amplitude_defaults.player.visualization.name}}';
+  // PLAYLIST settings
+  // ------------------------------------
+  var playlistAudioInfo                 = {{amplitude_defaults.playlist.audio_info}};
+
+  // ---------------------------------------------------------------------------
+  // UNUSED settings
+  // ------------------------------------
+  var playerWaveformsEnabled            = {{amplitude_defaults.player.waveforms.enabled}};
+  var playerWaveformsSampleRate         = {{amplitude_defaults.player.waveforms.sample_rate}};
+  var playerVisualizationEnabled        = {{amplitude_defaults.player.visualization.enabled}};
+  var playerVisualizationName           = '{{amplitude_defaults.player.visualization.name}}';
 
   // ---------------------------------------------------------------------------
   // helper functions
   // ---------------------------------------------------------------------------
+  function forceJsError() {
+    throw new Error("GENERATED JavaScript error!");
+  }
 
   // ---------------------------------------------------------------------------
   // main
@@ -203,6 +219,20 @@ j1.adapter.amplitude = ((j1, window) => {
     // -------------------------------------------------------------------------
     init: (options) => {
 
+      // -----------------------------------------------------------------------
+      // set console log filters (early)
+      // -----------------------------------------------------------------------
+      // consoleFilterSettings = {
+      //   debug: false,
+      // };
+      // j1.api.consoleFilters.filter(consoleFilterSettings);  
+      j1.api.consoleFilters.filter();
+
+      // -----------------------------------------------------------------------
+      // set error log filters (JS early)
+      // -----------------------------------------------------------------------
+      // j1.api.errorFilters.filter();
+
       // -----------------------------------------------------------------------
       // default module settings
       // -----------------------------------------------------------------------
@@ -256,13 +286,19 @@ j1.adapter.amplitude = ((j1, window) => {
           startTimeModule = Date.now();
 
           _this.setState('started');
-          logger.debug('\n' + 'module state: ' + _this.getState());
-          logger.info('\n' + 'module is being initialized');
+          logger.debug('module state: ' + _this.getState());
+          logger.info('module is being initialized');
 
-          // window.addEventListener('resize',(e)=>{         
-          //       console.log( `resize: width: ${e.target.visualViewport.width}px`);
-          //       console.log( `resize: height: ${e.target.visualViewport.height}px`);
-          // });
+          // test data for console filters
+          // -------------------------------------------------------------------
+          // console.warn("consoleFilters: Diese WARNUNG wird gefiltert.");
+          // isDev && logger.warn("consoleFilters: Diese WARNUNG wird gefiltert.");
+          // console.warn("consoleFilters: Diese Meldung wird nicht gefiltert.");
+          // isDev && logger.warn("consoleFilters: Diese Meldung wird nicht gefiltert.");
+
+          // test data for error filters
+          // -------------------------------------------------------------------
+          // forceJsError();
 
           // -------------------------------------------------------------------
           // create global playlist (songs)
@@ -327,7 +363,7 @@ j1.adapter.amplitude = ((j1, window) => {
     // -------------------------------------------------------------------------
     songLoader: (songs) => {
 
-      logger.info('\n' + 'creating global playlist (API): started');
+      logger.info('creating global playlist (API): started');
 
       // -----------------------------------------------------------------------
       // initialize amplitude songs
@@ -363,12 +399,21 @@ j1.adapter.amplitude = ((j1, window) => {
                 continue;
               } else if (key === 'rating') {
                 song.rating = item[key];
-                continue;
-              } else if (key === 'audio_single') {
-                song.audio_single = item[key];
-                continue;               
+                continue; 
+              } else if (key === 'playlist') {
+                song.playlist = item[key];
+                continue;                            
               } else if (key === 'shuffle') {
-                song.shuffle = item[key];
+                song.shuffle = ((!!item[key]) === false) ? playerShuffle : item[key];
+                continue;
+              } else if (key === 'repeat') {
+                song.repeat = ((!!item[key]) === false) ? playerRepeat : item[key];
+                continue;                
+              } else if (key === 'start') {
+                song.start = ((!!item[key]) === false) ? '00:00:00' : item[key];
+                continue;                 
+              } else if (key === 'end') {
+                song.end = ((!!item[key]) === false) ? '00:00:00' : item[key];
                 continue;                 
               } else {
                 song[key] = item[key];
@@ -381,7 +426,7 @@ j1.adapter.amplitude = ((j1, window) => {
 
       {% endif %} {% endfor %}
 
-      logger.info('\n' + 'creating global playlist (API): finished');
+      logger.info('creating global playlist (API): finished');
     }, // END songLoader
 
     // -------------------------------------------------------------------------
@@ -393,7 +438,7 @@ j1.adapter.amplitude = ((j1, window) => {
       // -----------------------------------------------------------------------
       // initialize HTML portion (UI) for all players configured|enabled
       // -----------------------------------------------------------------------
-      logger.info('\n' + 'loading player HTML components (UI): started');
+      logger.info('loading player HTML components (UI): started');
 
       {% for player in amplitude_options.players %} {% if player.enabled %}
         {% assign xhr_data_path = amplitude_options.xhr_data_path %}
@@ -404,7 +449,7 @@ j1.adapter.amplitude = ((j1, window) => {
         playerExistsInPage = ($('#' + '{{xhr_container_id}}')[0] !== undefined) ? true : false;
         if (playerExistsInPage) {
           playerCounter++;
-          logger.debug('\n' + 'load player UI on ID #{{player.id}}: started');
+          logger.debug('load player UI on ID #{{player.id}}: started');
 
           j1.loadHTML({
             xhr_container_id: '{{xhr_container_id}}',
@@ -428,7 +473,7 @@ j1.adapter.amplitude = ((j1, window) => {
 
             if (xhrLoadState === 'success') {
               playersProcessed.push('{{xhr_container_id}}');
-              logger.debug('\n' + 'load player UI on ID #{{player.id}}: finished');
+              logger.debug('load player UI on ID #{{player.id}}: finished');
 
               clearInterval(load_dependencies['dependencies_met_html_loaded_{{player.id}}']);
             }
@@ -444,7 +489,7 @@ j1.adapter.amplitude = ((j1, window) => {
         }
 
         if (processingPlayersFinished) {
-          logger.info('\n' + 'loading player HTML components (UI): finished');
+          logger.info('loading player HTML components (UI): finished');
 
           clearInterval(load_dependencies['dependencies_met_players_loaded']);
           playersLoaded.state = true;
@@ -458,7 +503,7 @@ j1.adapter.amplitude = ((j1, window) => {
     // -------------------------------------------------------------------------
     initApi: (songlist) => {
 
-      logger.info('\n' + 'initialze API: started');
+      logger.info('initialze API: started');
 
       {% comment %} collect playlists
       --------------------------------------------------------------------------  {% endcomment %}
@@ -480,7 +525,6 @@ j1.adapter.amplitude = ((j1, window) => {
           {% capture song_item %}
           {
             "name":           "{{item.title}}",
-            // "track":          "{{item.track}}",
             "artist":         "{{item.artist}}",
             "playlist":       "{{item.playlist}}",
             "album":          "{{item.name}}",
@@ -490,8 +534,8 @@ j1.adapter.amplitude = ((j1, window) => {
             "start":          "{{item.start}}",
             "end":            "{{item.end}}",
             "shuffle":        "{{item.shuffle}}",
+            "repeat":         "{{item.repeat}}",
             "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}}"
@@ -542,14 +586,14 @@ j1.adapter.amplitude = ((j1, window) => {
         callbacks: {
           initialized: function() {
             var amplitudeConfig = Amplitude.getConfig();
-            logger.info('\n' + 'initialze API: finished');
+            logger.info('initialze API: finished');
             // indicate api successfully initialized
             apiInitialized.state = true;
           },
           onInitError: function() {
             // indicate api failed on initialization
             apiInitialized.state = false;
-            console.error('\n' + 'Amplitude API failed on initialization');
+            console.error('Amplitude API failed on initialization');
           },
           play: function() {
             // make sure the player is playing
@@ -585,7 +629,7 @@ j1.adapter.amplitude = ((j1, window) => {
             var currentState = Amplitude.getPlayerState();
             onPlayerStateChange(4);
             if (playerDelayNextTitle) {
-              logger.debug('\n' + 'delay on previous title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
+              logger.debug('delay on previous title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
             }
 
             if (playerPauseNextTitle) {
@@ -593,7 +637,7 @@ j1.adapter.amplitude = ((j1, window) => {
               if (amplitudePlayerState === 'playing' || amplitudePlayerState === 'stopped' ) {
                 setTimeout(() => {
                   // pause playback of next title
-                  logger.debug('\n' + 'paused on next title: ' + songMetaData.name);
+                  logger.debug('paused on next title: ' + songMetaData.name);
                   Amplitude.pause();
                 }, 150);
               } // END if playing
@@ -604,7 +648,7 @@ j1.adapter.amplitude = ((j1, window) => {
           next: function() {
             onPlayerStateChange(5);
             if (playerDelayNextTitle) {
-              logger.debug('\n' + 'delay on next title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
+              logger.debug('delay on next title: ' + songMetaData.name + ' with titleIndex ' + songMetaData.index);
             }
 
             if (playerPauseNextTitle) {
@@ -612,7 +656,7 @@ j1.adapter.amplitude = ((j1, window) => {
               if (amplitudePlayerState === 'playing' || amplitudePlayerState === 'stopped' ) {
                 setTimeout(() => {
                   // pause playback of next title
-                  logger.debug('\n' + 'paused on next title: ' + songMetaData.name);
+                  logger.debug('paused on next title: ' + songMetaData.name);
                   Amplitude.pause();
                 }, 150);
               } // END if playing
@@ -637,58 +681,6 @@ j1.adapter.amplitude = ((j1, window) => {
 
       }); // 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
       // -----------------------------------------------------------------------
@@ -721,7 +713,7 @@ j1.adapter.amplitude = ((j1, window) => {
         currentStep  = 1;
 
         if (volumeSlider === undefined || volumeSlider === null) {
-          logger.warn('\n' + 'no volume slider found at playerID: ' + settings.playerID);
+          isDev && logger.warn('no volume slider found at playerID: ' + settings.playerID);
           return;
         }
 
@@ -798,7 +790,7 @@ j1.adapter.amplitude = ((j1, window) => {
               songs = Amplitude.getSongsInPlaylist(playlist);
 
               if (songIndex === songs.length-1) {
-                logger.debug('\n' + 'restore player volume on last trackID|volume at: ' + trackID + '|' + defaultVolume);
+                logger.debug('restore player volume on last trackID|volume at: ' + trackID + '|' + defaultVolume);
                 volumeSlider.value  =  defaultVolume;              
               }
 
@@ -816,131 +808,60 @@ j1.adapter.amplitude = ((j1, window) => {
       // wrraper for states that are not processed
       // -----------------------------------------------------------------------
       function doNothingOnStateChange(state) {
-        var playlist, songMetaData, songIndex, trackID;
+        var playlist, playerID, songMetaData,
+            songIndex, trackID;
         
         playlist      = Amplitude.getActivePlaylist();
+        playerID      = playlist + '_large';
         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]}`);
+        isDev && logger.warn(`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
+      // wrraper to process 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;
+        var songMetaData, songIndex,  playList, trackID;
 
         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]}`);
+        logger.debug(`PLAY audio on ATP at playlist|trackID: ${playList}|${trackID}`);
+        // logger.debug(`PLAY audio on processOnStateChangePlaying for playlist \'${playList}\' at trackID|state: ${trackID}|${AT_PLAYER_STATE_NAMES[state]}`);   
 
-        // update song rating in playlist-screen|meta-container
-        // -------------------------------------------------------------------
-        j1.adapter.amplitude.atUpdateSongRating(Amplitude.getActiveSongMetadata());
+        // save player GLOBAL data for later use (e.g. events)
+        j1.adapter.amplitude.data.activePlayer  = 'atp';
 
-        // scroll active song in players playlist
-        // ---------------------------------------------------------------------
-        j1.adapter.amplitude.atPlayerScrollToActiveElement(Amplitude.getActiveSongMetadata());
+        // set song (manually) active at index in playlist
+        _this.setSongActive(playList, songIndex);
 
         // 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();
-          }
-        }
+        // ---------------------------------------------------------------------
+        _this.atpStopParallelActivePlayers(j1.adapter.amplitude.data.ytPlayers);
 
-        // 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
+        // update song rating in playlist-screen|meta-container
+        // ---------------------------------------------------------------------
+        _this.atpUpdatMetaContainers(songMetaData);
 
-            } // END if songStartSec
+        // scroll active song in players playlist
+        // ---------------------------------------------------------------------
+        _this.atPlayerScrollToActiveElement(songMetaData);
 
-            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
+        // process audio for AT players at configured START position
+        // ---------------------------------------------------------------------
+        _this.atpProcessAudioStartPosition();
+
+        // process audio for AT players at configured END position
+        // ---------------------------------------------------------------------
+        _this.atpProcessAudioEndPosition();
 
         // save YT player data for later use (e.g. events)
         // ---------------------------------------------------------------------
@@ -989,7 +910,7 @@ j1.adapter.amplitude = ((j1, window) => {
             doNothingOnStateChange(AT_PLAYER_STATE.ENDED);
             break;
           default:
-            logger.error('\n' + `UNKNOWN state on StateChange fired: ${state}`);
+            logger.error(`UNKNOWN state on StateChange fired: ${state}`);
         } // END switch state
       } // END onPlayerStateChange
 
@@ -1034,7 +955,7 @@ j1.adapter.amplitude = ((j1, window) => {
           var parentContainer = (document.getElementById('{{xhr_container_id}}') !== null) ? true : false;
           var parentContainerExist = ($('#' + '{{xhr_container_id}}')[0] !== undefined) ? true : false;
 
-          logger.info('\n' + 'initialize player specific UI events: started');
+          logger.info('initialize player specific UI events: started');
           
           {% for player in amplitude_options.players %} {% if player.enabled %}
             {% assign xhr_data_path = amplitude_options.xhr_data_path %}
@@ -1059,18 +980,18 @@ j1.adapter.amplitude = ((j1, window) => {
                 var playListName  = '{{player.playlist.name}}';
                 var playListTitle = '{{player.playlist.title}}';
 
-                logger.debug('\n' + 'initialize audio player instance on id: {{player.id}}');
+                logger.debug('initialize audio player instance on id: {{player.id}}');
 
                 // set song (title) specific audio info links
                 // -------------------------------------------------------------
-                if (playerAudioInfo) {
+                if (playlistAudioInfo) {
                   var infoLinks = document.getElementsByClassName('audio-info-link');
                   _this.setAudioInfo(infoLinks);
                 }
 
                 // set player specific UI events
                 // -------------------------------------------------------------
-                logger.debug('\n' + 'setup audio player specific UI events on ID #{{player.id}}: started');
+                logger.debug('setup audio player specific UI events on ID #{{player.id}}: started');
 
                 var dependencies_met_api_initialized = setInterval (() => {
                   if (apiInitialized.state) {
@@ -1280,13 +1201,13 @@ j1.adapter.amplitude = ((j1, window) => {
                               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);
+                                logger.debug('process player id: ' + playerID);
                                 ytpPlayer       = j1.adapter.amplitude.data.ytPlayers[playerID].player;
                                 playerState     = ytpPlayer.getPlayerState();
                                 ytpPlayerState  = YT_PLAYER_STATE_NAMES[playerState];
 
                                 if (ytpPlayerState === 'playing' || ytpPlayerState === 'paused' || ytpPlayerState === 'buffering') {
-                                  logger.debug('\n' + 'process player id: ' + playerID + ' stopped');
+                                  logger.debug('process player id: ' + playerID + ' stopped');
                                   ytpPlayer.stopVideo();
                                 }
                               }
@@ -1393,8 +1314,10 @@ j1.adapter.amplitude = ((j1, window) => {
                       var playlistInfo  = {{player.playlist | replace: 'nil', 'null' | replace: '=>', ':'}};
                       var playList      = playlistInfo.name;
 
+                      {% comment %} PREPARED event listener for LATER use
+                      ----------------------------------------------------------
                       // add listeners to all SongContainers found (LARGE player)
-                      // -------------------------------------------------------
+                      // -------------------------------------------------------                      
                       var largePlayerSongContainer = document.getElementsByClassName("amplitude-song-container");
                       for (var i=0; i<largePlayerSongContainer.length; i++) {
                         if (largePlayerSongContainer[i].dataset.amplitudeSource === 'youtube') {
@@ -1415,55 +1338,19 @@ j1.adapter.amplitude = ((j1, window) => {
                               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);
+                                logger.debug('process player id: ' + playerID);
                                 ytpPlayer       = j1.adapter.amplitude.data.ytPlayers[playerID].player;
                                 playerState     = ytpPlayer.getPlayerState();
                                 ytpPlayerState  = YT_PLAYER_STATE_NAMES[playerState];
 
                                 if (ytpPlayerState === 'playing' || ytpPlayerState === 'paused' || ytpPlayerState === 'buffering') {
-                                  logger.debug('\n' + 'process player id: ' + playerID + ' stopped');
+                                  logger.debug('process player id: ' + playerID + ' stopped');
                                   ytpPlayer.stopVideo();
                                 }
                               }
@@ -1477,6 +1364,8 @@ j1.adapter.amplitude = ((j1, window) => {
                           } // END if currentPlaylist
                         } // ENF if largePlayerSongContainer
                       } // END for largePlayerSongContainer
+                      ----------------------------------------------------------
+                      {% endcomment %}
 
                       // click on prev button
                       var largePlayerPreviousButton = document.getElementById('large_player_previous');
@@ -1484,11 +1373,10 @@ j1.adapter.amplitude = ((j1, window) => {
                         // do nothing for YTP (managed by plugin)
                       }
 
-                      // add listeners to all PlayPause Buttons found (LARGE player)
-                      // -------------------------------------------------------
-
                       {% comment %} PREPARED event listener for LATER use
-                      ----------------------------------------------------------                      
+                      ----------------------------------------------------------
+                      // add listeners to all PlayPause Buttons found (LARGE player)
+                      // -------------------------------------------------------                      
                       var largePlayerPlayPauseButton = document.getElementsByClassName('large-player-play-pause');
                       for (var i=0; i<largePlayerPlayPauseButton.length; i++) {
                         if (largePlayerPlayPauseButton[i].dataset.amplitudeSource === 'youtube') {
@@ -1528,8 +1416,10 @@ j1.adapter.amplitude = ((j1, window) => {
                         }
                       } // END for
 
+                      {% comment %} PREPARED event listener for LATER use
+                      ----------------------------------------------------------
                       // add listeners to all Next Buttons found (LARGE player)
-                      // -------------------------------------------------------
+                      // -------------------------------------------------------                      
                       var largeNextButtons = document.getElementsByClassName("large-player-next");
                       for (var i=0; i<largeNextButtons.length; i++) {
                         if (largeNextButtons[i].dataset.amplitudeSource === 'youtube') {
@@ -1544,39 +1434,15 @@ j1.adapter.amplitude = ((j1, window) => {
                               playlist        = this.getAttribute("data-amplitude-playlist");
                               metaData        = Amplitude.getActiveSongMetadata();
 
-                              // update song rating in screen controls
-                              var largePlayerSongAudioRating = document.getElementsByClassName("audio-rating-screen-controls");
-                              if (largePlayerSongAudioRating.length) {
-                                for (var i=0; i<largePlayerSongAudioRating.length; i++) {
-                                  var currentPlaylist = largePlayerSongAudioRating[i].dataset.amplitudePlaylist;
-                                  if (currentPlaylist === playlist) {
-                                    if (metaData.rating) {
-                                      var trackID = metaData.index + 1;
-                                      logger.debug('\n' + `UPDATE song rating on updatMetaContainers for trackID|playlist at: ${trackID}|${playlist} with a value of: ${metaData.rating}`);
-                                      largePlayerSongAudioRating[i].innerHTML = '<img src="/assets/image/pattern/rating/scalable/' + metaData.rating + '-star.svg"' + 'alt="song rating">';
-                                    } else {
-                                      largePlayerSongAudioRating[i].innerHTML = '';
-                                    }
-                                  }
-                                }
-                              } // END if largePlayerSongAudioRating
-
-                              // scroll song active at index in player
-                              // -----------------------------------------------
-                              if (playerAutoScrollSongElement) {
-                                j1.adapter.amplitude.atPlayerScrollToActiveElement(playlist);
-                              }                              
-
-                              // save YT player data for later use (e.g. events)
-                              // -----------------------------------------------
-                              j1.adapter.amplitude.data.activePlayer = 'atp';
-                              j1.adapter.amplitude.data.atpGlobals.activePlayerType = atpPlayerActive[0];
-
                             }); // END EventListener 'click'
                           } // END addEventListener
                         } // END if largeNextButtons
                       } // END for Next Buttons
+                      ----------------------------------------------------------
+                      {% endcomment %}
 
+                      {% comment %} PREPARED event listener for LATER use
+                      ----------------------------------------------------------
                       // add listeners to all Previous Buttons found
                       // -------------------------------------------------------
                       var largePreviousButtons = document.getElementsByClassName("large-player-previous");
@@ -1601,7 +1467,7 @@ j1.adapter.amplitude = ((j1, window) => {
                                   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}`);
+                                      logger.debug(`UPDATE song rating on updatMetaContainers for trackID|playlist at: ${trackID}|${playlist} with a value of: ${metaData.rating}`);
                                       largePlayerSongAudioRating[i].innerHTML = '<img src="/assets/image/pattern/rating/scalable/' + metaData.rating + '-star.svg"' + 'alt="song rating">';
                                     } else {
                                       largePlayerSongAudioRating[i].innerHTML = '';
@@ -1612,12 +1478,12 @@ j1.adapter.amplitude = ((j1, window) => {
 
                               // scroll song active at index in player
                               if (playerAutoScrollSongElement) {
-                                j1.adapter.amplitude.atPlayerScrollToActiveElement(playlist);
+                                j1.adapter.amplitude.atPlayerScrollToActiveElement(Amplitude.getActiveSongMetadata());
                               }                              
 
                               // scroll song active at index in player
                               if (playerAutoScrollSongElement) {
-                                j1.adapter.amplitude.atPlayerScrollToActiveElement(playlist);
+                                j1.adapter.amplitude.atPlayerScrollToActiveElement(Amplitude.getActiveSongMetadata());
                               }  
 
                               // save YT player data for later use (e.g. events)
@@ -1628,6 +1494,8 @@ j1.adapter.amplitude = ((j1, window) => {
                           } // END if largePreviousButtons
                         } // END if largePreviousButtons
                       } // END for Previous Buttons
+                      ----------------------------------------------------------
+                      {% endcomment %}
 
                       // add listeners to all SkipForward Buttons found
                       // See: https://github.com/serversideup/amplitudejs/issues/384
@@ -1645,7 +1513,7 @@ j1.adapter.amplitude = ((j1, window) => {
                               const targetTime  = parseFloat(currentTime + skipOffset);
 
                               if (currentTime > 0) {
-                                logger.debug('\n' + `SKIP forward on Button skipForward for ${skipOffset} seconds`);
+                                logger.debug(`SKIP forward on Button skipForward for ${skipOffset} seconds`);
                                 Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
                               }
                             }); // END addEventListener
@@ -1668,7 +1536,7 @@ j1.adapter.amplitude = ((j1, window) => {
                               const targetTime  = parseFloat(currentTime - skipOffset);
 
                               if (currentTime > 0) {
-                                logger.debug('\n' + `SKIP backward on Button skipForward for ${skipOffset} seconds`);
+                                logger.debug(`SKIP backward on Button skipForward for ${skipOffset} seconds`);
                                 Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
                               }
                             }); // END addEventListener
@@ -1681,7 +1549,7 @@ 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}`);
+                          logger.debug(`Set shuffle state to: ${shuffleState}`);
                           Amplitude.setShuffle(shuffleState)
                         }); // END addEventListener
                       } // END if largePlayerShuffleButton
@@ -1691,18 +1559,19 @@ j1.adapter.amplitude = ((j1, window) => {
                       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}`);
+                          logger.debug(`Set repeat state to: ${repeatState}`);
                           Amplitude.setRepeat(repeatState)
                         }); // END addEventListener
                       } // END if largePlayerRepeatButton
 
-                      // enable|disable scrolling on playlist (LARGE player)
+                      // enable|disable PAGE scrolling on players playlist (LARGE player)
                       // -------------------------------------------------------
-                      if (document.getElementById('large_player_right') !== null) {
+                      // if (playerHoverPageScrollDisabled && document.getElementById('large_player_right') !== null) {
+                      if (playerHoverPageScrollDisabled) {                        
 
                         // show|hide scrollbar in playlist
                         // -----------------------------------------------------
-                        var songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
+                        const songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
                         if (songsInPlaylist.length <= playerScrollerSongElementMin) {
                           const titleListLargePlayer = document.getElementById('large_player_title_list_' + playListName);
                           if (titleListLargePlayer !== null) {
@@ -1783,7 +1652,7 @@ j1.adapter.amplitude = ((j1, window) => {
                           }
                         }); // END addEventListener
 
-                      } // END enable|disable scrolling on playlist
+                      } // END enable|disable PAGE scrolling on players playlist
 
                       // set volume slider presets (for the player when exists|enabled)
                       //
@@ -1804,14 +1673,16 @@ j1.adapter.amplitude = ((j1, window) => {
 
                     } // END large player UI events
                     {% endif %}
+                    {% comment %} END process UI events for all LARGE Players
+                    ============================================================ {% endcomment %}
 
                     // ---------------------------------------------------------
                     // START configured player features
 
-                    logger.debug('\n' + 'set play next title: ' + playerPlayNextTitle);
-                    logger.debug('\n' + 'set delay between titles: ' + playerDelayNextTitle + 'ms');
-                    logger.debug('\n' + 'set repeat (album): ' + playerRepeat);
-                    logger.debug('\n' + 'set shuffle (album): ' + playerShuffle);
+                    logger.debug('set play next title: ' + playerPlayNextTitle);
+                    logger.debug('set delay between titles: ' + playerDelayNextTitle + 'ms');
+                    logger.debug('set repeat (album): ' + playerRepeat);
+                    logger.debug('set shuffle (album): ' + playerShuffle);
 
                     // set delay between titles (songs)
                     Amplitude.setDelay(playerDelayNextTitle);
@@ -1825,8 +1696,8 @@ j1.adapter.amplitude = ((j1, window) => {
 
                     // finished messages
                     // ---------------------------------------------------------
-                    logger.debug('\n' + 'current player state: ' + amplitudePlayerState);
-                    logger.debug('\n' + 'setup player specific UI events on ID #{{player.id}}: finished');
+                    logger.debug('current player state: ' + amplitudePlayerState);
+                    logger.debug('setup player specific UI events on ID #{{player.id}}: finished');
 
                     clearInterval(dependencies_met_api_initialized);
                   } // END if apiInitialized
@@ -1846,14 +1717,14 @@ j1.adapter.amplitude = ((j1, window) => {
 
           {% endif %} {% endfor %}
 
-          logger.info('\n' + 'initialize player specific UI events: finished');
+          logger.info('initialize player specific UI events: finished');
 
           _this.setState('finished');
-          logger.debug('\n' + 'module state: ' + _this.getState());
-          logger.info('\n' + 'module initialized successfully');
+          logger.debug('module state: ' + _this.getState());
+          logger.info('module initialized successfully');
 
           endTimeModule = Date.now();
-          logger.info('\n' + 'module initializing time: ' + (endTimeModule-startTimeModule) + 'ms');
+          logger.info('module initializing time: ' + (endTimeModule-startTimeModule) + 'ms');
 
           clearInterval(dependencies_met_player_instances_initialized);
         } // END if apiInitialized
@@ -1877,7 +1748,7 @@ j1.adapter.amplitude = ((j1, window) => {
     // songEvents
     // -------------------------------------------------------------------------
     songEvents: (songs) => {
-      logger.debug('\n' + 'initializing title events for player on ID ' + '#' + playerID + ': started');
+      logger.debug('initializing title events for player on ID ' + '#' + playerID + ': started');
 
       for (var i = 0; i < songs.length; i++) {
         // ensure that on mouseover, CSS styles don't get messed up for active songs
@@ -1905,7 +1776,7 @@ j1.adapter.amplitude = ((j1, window) => {
         }); // END EventListener 'click' (songlist)
       }
 
-      logger.debug('\n' + 'initializing title events for player on ID ' + '#' + playerID + ': finished');
+      logger.debug('initializing title events for player on ID ' + '#' + playerID + ': finished');
     }, // END songEvents
 
     // -------------------------------------------------------------------------
@@ -1939,7 +1810,7 @@ j1.adapter.amplitude = ((j1, window) => {
       }
 
       if (plugin !== '' && isPluginLoaded(plugin)) {     
-        logger.debug('\n' + 'plugin loaded: ' + plugin);
+        logger.debug('plugin loaded: ' + plugin);
 
         // make sure the plugin installed only ONCE
         j1.adapter.amplitude.data.atpGlobals.ytpInstalled = true;
@@ -1950,9 +1821,9 @@ j1.adapter.amplitude = ((j1, window) => {
     // atPlayerScrollToActiveElement(metaData)
     // -------------------------------------------------------------------------  
     atPlayerScrollToActiveElement: (metaData) => {
-      var scrollableList, songIndex,
-          activeElement, activeElementOffsetTop,
-          songElementMin, numSongs;
+      var scrollableList, songIndex, playlist,
+          activeElement, activeElementOffsetTop, numSongs,
+          songElementMin, playerSongElementHeigthCompact;
 
       if (!playerAutoScrollSongElement) {
         // do nothing if playerAutoScrollSongElement is false
@@ -1961,18 +1832,19 @@ j1.adapter.amplitude = ((j1, window) => {
 
       songIndex       = metaData.index;
       songElementMin  = playerScrollerSongElementMin;
-      numSongs        = Amplitude.getSongsInPlaylist(metaData.playlist).length;
-      scrollableList  = document.getElementById('large_player_title_list_' + metaData.playlist);
+      playlist        = metaData.playlist;
+      scrollableList  = document.getElementById('large_player_title_list_' + playlist);
       activeElement   = scrollableList.querySelector('.amplitude-active-song-container');
+      numSongs        = Amplitude.getSongsInPlaylist(playlist).length;
 
       if (activeElement === null || scrollableList === null)  {
         // do nothing if NO scrollableList or ACTIVE element found (failsafe)
         return;
       }
 
+      // LARGE players
+      // -----------------------------------------------------------------------
       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 {
@@ -1980,44 +1852,328 @@ j1.adapter.amplitude = ((j1, window) => {
         return; 
       }
 
+      // COMPACT players (WIP)
+      // -----------------------------------------------------------------------
+      // playerSongElementHeigthCompact  = 74.00; 
+      // if (songIndex > 0 && numSongs >= songElementMin) {
+      //   // scrollableList            = document.getElementById('compact_player_title_list_' + metaData.playlist);
+      //   // activeElement             = scrollableList.querySelector('.amplitude-active-song-container');
+      //   activeElementOffsetTop    = (songIndex * playerSongElementHeigthCompact);
+      //   scrollableList.scrollTop  = activeElementOffsetTop;        
+      // } else {
+      //   // do nothing if songIndex is 0 or less than songElementMin
+      //   return; 
+      // }
+
     }, // END atPlayerScrollToActiveElement
 
     // -------------------------------------------------------------------------
-    // atUpdateSongRating(playlist, rating)
+    // atpUpdatMetaContainers(playlist, rating)
     //
     // update song rating in playlist-screen|meta-container
+    // for all (compact|large) players
     // -------------------------------------------------------------------------
-    atUpdateSongRating: (metaData) => {
-      var screenControlRating         = null;
+    atpUpdatMetaContainers: (metaData) => {
+      var activePlayist   = metaData.playlist;
+      var rating          = parseInt(metaData.rating);
+      var trackID         = metaData.index + 1;
+      const notRequiredForATP = true
+
+      logger.debug(`UPDATE metadata on atpUpdatMetaContainers for trackID|playlist at: ${trackID}|${activePlayist}`);
+
+      // properties automatically set by AT API
+      if (requiredForATP) {
+        // update SONG NAME in meta-containers
+        var songName = document.getElementsByClassName("song-name");
+        if (songName.length) {
+          for (var i=0; i<songName.length; i++) {    
+            var currentPlaylist = songName[i].dataset.amplitudePlaylist;
+            if (currentPlaylist === activePlayist) {
+              songName[i].innerHTML = metaData.name;
+            }
+          }
+        }
+      }
+
+      // properties automatically set by AT API
+      if (requiredForATP) {
+        // update SONG ARTIST name in meta-containers
+        var artistName = document.getElementsByClassName("artist");
+        if (artistName.length) {
+          for (var i=0; i<artistName.length; i++) {    
+            var currentPlaylist = songName[i].dataset.amplitudePlaylist;
+            if (currentPlaylist === activePlayist) {
+              artistName[i].innerHTML = metaData.artist;
+            }
+          }
+        }
+      }
+
+      // properties automatically set by AT API
+      if (requiredForATP) {
+        // update SONG ALBUM name in meta-containers
+        var albumName = document.getElementsByClassName("album");
+        if (albumName.length) {
+          for (var i=0; i<albumName.length; i++) {    
+            var currentPlaylist = albumName[i].dataset.amplitudePlaylist;
+            if (currentPlaylist === activePlayist) {
+              albumName[i].innerHTML = metaData.album;
+            }
+          }
+        }
+      }
+
+      // update SONG RATING in screen controls
       var screenControlRatingElements = document.getElementsByClassName('audio-rating-screen-controls');
-      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;
+      if (rating) {
+        for (let i=0; i<screenControlRatingElements.length; i++) {
+          var ratingElement = screenControlRatingElements[i];
+          if (ratingElement.dataset.amplitudePlaylist === activePlayist && ratingElement.classList.contains('audio-rating-screen-controls')) {          
+            ratingElement.innerHTML = '<img src="/assets/image/pattern/rating/scalable/' + rating + '-star.svg"' + 'alt="song rating">';
+          }
+        }
+      }
+
+      // update SONG INFO in screen controls
+      var songAudioInfo = document.getElementsByClassName("audio-info-link-screen-controls");
+      if (songAudioInfo.length) {
+        for (var i=0; i<songAudioInfo.length; i++) {
+          var currentPlaylist = songAudioInfo[i].dataset.amplitudePlaylist;
+          if (currentPlaylist === activePlayist) {
+            if (metaData.audio_info) {
+              songAudioInfo[i].setAttribute("href", metaData.audio_info);
+            }
+          }
         }
+      } // END if songAudioInfo
+
+    }, // END atpUpdatMetaContainers
 
+    // -------------------------------------------------------------------------
+    // atpStopParallelActivePlayers(players)
+    //
+    // stop active YT players (running in parallel to AT players)
+    // -------------------------------------------------------------------------
+    atpStopParallelActivePlayers: (players) => {
+      var ytPlayer, playerState, ytPlayerState;
+
+      const ytPlayers = Object.keys(players);
+      for (var i=0; i<ytPlayers.length; i++) {
+        const ytPlayerID = ytPlayers[i];    
+
+        ytPlayer      = players[ytPlayerID].player;
+        playerState   = ytPlayer.getPlayerState();
+        ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
+
+        // stop YT players running in parallel
+        // ---------------------------------------------------------------------        
+        if (ytPlayerState === 'playing' || ytPlayerState === 'paused' || ytPlayerState === 'buffering') {
+          logger.debug(`STOP YT player on id: ${playerID}`);
+          ytPlayer.stopVideo();
+        }
+
+        // toggle PlayPause buttons playing => puased
+        // ---------------------------------------------------------------------
+        var ytpButtonPlayerPlayPause = document.getElementsByClassName("large-player-play-pause-" + ytPlayerID);        
+        for (var j=0; j<ytpButtonPlayerPlayPause.length; j++) {
+
+          var htmlElement = ytpButtonPlayerPlayPause[j];
+          if (htmlElement.dataset.amplitudeSource === 'youtube') {
+            if (htmlElement.classList.contains('amplitude-playing')) {        
+              htmlElement.classList.remove('amplitude-playing');
+              htmlElement.classList.add('amplitude-paused');
+            }           
+          }
+        } // END for ytpButtonPlayerPlayPause
+
+      } // END for ytPlayers
+    }, // END atpStopParallelActivePlayers
+
+    // -------------------------------------------------------------------------
+    // atpProcessAudioStartPosition()
+    //
+    // process audio for configured START position
+    // -------------------------------------------------------------------------
+    atpProcessAudioStartPosition: () => {
+      var songMetaData, songIndex, playList,
+          songStartSec, songStartTS, trackID;
+
+      songMetaData  = Amplitude.getActiveSongMetadata();
+      songIndex     = songMetaData.index;
+      songStartTS   = songMetaData.start;
+      songStartSec  = _this.timestamp2seconds(songStartTS);
+      playList      = Amplitude.getActivePlaylist();
+      trackID       = songIndex + 1;
+
+      if (!songStartSec) {
+        return;
       }
 
-      // 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 = '';
+      var checkIsFading = setInterval (() => {
+        if (!isFadingIn) {
+          var currentAudioTime = Amplitude.getSongPlayedSeconds();
+          if (songStartSec && currentAudioTime <= songStartSec) {
+            var songDurationSec = _this.timestamp2seconds(songMetaData.duration); 
+
+            // seek audio to configured START position
+            // NOTE: use setSongPlayedPercentage for seeking to NOT
+            //       generation any addition state changes like stopped
+            //       or playing
+            logger.debug('seek audio in on playlist: ' + playList + ' at|to trackID|timestamp: ' + trackID + '|' + songStartTS);
+            Amplitude.setSongPlayedPercentage((songStartSec / songDurationSec) * 100);
+
+            // fade-in audio (if enabled)
+            var fadeAudioIn = (songMetaData.audio_fade_in === 'true') ? true : false;
+            if (fadeAudioIn) {
+              logger.debug('faden audio in on playlist: ' + playList + ' at|to trackID|timestamp: ' + trackID + '|' + songStartTS);
+              atpFadeInAudio({ playerID: playerID });
+            } // END if fadeAudio
+
+          } // END if songStartSec
+
+          clearInterval(checkIsFading);
+        }
+      }, 100); // END checkIsFading
+    }, // END atpProcessAudioStartPosition      
+
+    // -------------------------------------------------------------------------
+    // atpProcessAudioEndPosition()
+    //
+    // process audio for configured END position
+    // -------------------------------------------------------------------------
+    atpProcessAudioEndPosition: () => {
+      var songMetaData, songIndex, playList,
+          songStartSec, songStartTS, songEndSec, songEndTS,
+          trackID;
+
+      songMetaData  = Amplitude.getActiveSongMetadata();
+      songIndex     = songMetaData.index;
+      songStartTS   = songMetaData.start;
+      songStartSec  = _this.timestamp2seconds(songStartTS);      
+      songEndTS     = songMetaData.end;
+      songEndSec    = _this.timestamp2seconds(songEndTS);
+      playList      = Amplitude.getActivePlaylist();
+      trackID       = songIndex + 1;
+
+      if (songEndSec > songStartSec) {
+        var checkIsOnVideoEnd = setInterval(() => {
+          if (!isFadingOut) {              
+            var currentAudioTime = Amplitude.getSongPlayedSeconds();
+            if (currentAudioTime >= songEndSec) {                
+              songMetaData  = Amplitude.getActiveSongMetadata();             
+              songIndex     = songMetaData.index;
+              trackID       = songIndex + 1;
+
+              // seek audio out to END position
+              // NOTE:
+              // ---------------------------------------------------------------
+              // use setSongPlayedPercentage for seeking to NOT
+              // generation any addition state changes like stopped
+              // or playing                  
+              logger.debug('seek audio to end on playlist: ' + playList + ' at trackID|timestamp: ' + trackID + '|' + songEndTS);
+              Amplitude.setSongPlayedPercentage(99.99);
+              
+              // fade-out audio (if enabled)
+              var fadeAudioOut = (songMetaData.audio_fade_out === 'true') ? true : false;
+              if (fadeAudioOut) {
+                logger.debug('fade audio out on playlist: ' + playList + ' at|to trackID|timestamp: ' + trackID + '|' + songEndTS);
+                atpFadeAudioOut({ playerID: playerID });
+              } // END if fadeAudio
+
+              clearInterval(checkIsOnVideoEnd);
+            } // END if currentAudioTime
+          } // END if !isFading
+        }, 100); // END checkIsOnVideoEnd
+      } // END if songEndSec
+
+    }, // END atpProcessAudioEndPosition     
+
+    // -------------------------------------------------------------------------
+    // setSongActive(currentPlayList, currentIndex)
+    //
+    // set song active at index in playlist
+    // -------------------------------------------------------------------------
+    setSongActive: (currentPlayList, currentIndex) => {
+      var playlist, songContainers, songIndex;
+
+      songIndex = currentIndex;
+
+      // clear ALL active song containers
+      // -------------------------------------------------------------------------
+      songContainers = document.getElementsByClassName("amplitude-song-container");
+      for (var i=0; i<songContainers.length; i++) {
+        songContainers[i].classList.remove("amplitude-active-song-container");
+      }
+
+      // find current song container and activate the element
+      // -------------------------------------------------------------------------
+      songContainers = document.querySelectorAll('.amplitude-song-container[data-amplitude-song-index="' + songIndex + '"]');          
+      for (var i=0; i<songContainers.length; i++) {
+        if (songContainers[i].hasAttribute("data-amplitude-playlist")) {
+          playlist = songContainers[i].getAttribute("data-amplitude-playlist");
+          if (playlist === currentPlayList) {
+            songContainers[i].classList.add("amplitude-active-song-container");
+          }
         }
       }
 
-    }, // END atUpdateSongRating
+    }, // END setSongActive
+
+    // -------------------------------------------------------------------------
+    // timestamp2seconds(timestamp)
+    //
+    // converts a timestamp of hh:mm:ss into seconds
+    // -------------------------------------------------------------------------
+    // TODO:
+    // Add support for timestamp w/o hours like mm:ss
+    // -------------------------------------------------------------------------
+    timestamp2seconds: (timestamp) => {
+      // split timestamp
+      const parts = timestamp.split(':');
+
+      // check timestamp format
+      if (parts.length !== 3) {
+        // return "invalid timestamp";
+        return false;
+      }
+
+      // convert parts to integers
+      const hours   = parseInt(parts[0], 10);
+      const minutes = parseInt(parts[1], 10);
+      const seconds = parseInt(parts[2], 10);
+
+      // check valid timestamp values
+      if (isNaN(hours) || isNaN(minutes) || isNaN(seconds) ||
+          hours   < 0 || hours   > 23 ||
+          minutes < 0 || minutes > 59 ||
+          seconds < 0 || seconds > 59) {
+        return "invalid timestamp";
+      }
+
+      const totalSeconds = (hours * 3600) + (minutes * 60) + seconds;
+
+      return totalSeconds;
+    }, // END timestamp2seconds
+
+    // -------------------------------------------------------------------------
+    // seconds2timestamp(seconds)
+    //
+    // converts seconds into a timestamp of hh:mm:ss
+    // -------------------------------------------------------------------------
+    seconds2timestamp: (seconds) => {
+      if (isNaN(seconds)) {
+        return false;
+      }
+
+      const hours         = Math.floor(seconds / 3600);
+      const minutes       = Math.floor((seconds % 3600) / 60);
+      const remainSeconds = seconds % 60;
+      const tsHours       = hours.toString().padStart(2, '0');
+      const tsMinutes     = minutes.toString().padStart(2, '0');
+      const tsSeconds     = remainSeconds.toString().padStart(2, '0');
+    
+      return `${tsHours}:${tsMinutes}:${tsSeconds}`;
+    }, // END seconds2timestamp
 
     // -------------------------------------------------------------------------
     // messageHandler()
@@ -2026,7 +2182,7 @@ j1.adapter.amplitude = ((j1, window) => {
     messageHandler: (sender, message) => {
       var json_message = JSON.stringify(message, undefined, 2);
 
-      logText = '\n' + 'received message from ' + sender + ': ' + json_message;
+      logText = 'received message from ' + sender + ': ' + json_message;
       logger.debug(logText);
 
       // -----------------------------------------------------------------------
@@ -2038,7 +2194,7 @@ j1.adapter.amplitude = ((j1, window) => {
         // place handling of command|action here
         //
 
-        logger.info('\n' + message.text);
+        logger.info(message.text);
       }
 
       //