j1-template 2024.3.20 → 2024.3.22

data/assets/theme/j1/modules/amplitudejs/js/tech/ytp.js

@@ -6,7 +6,7 @@ regenerate: true
 
 {% comment %}
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/modules/amplitudejs/js/plugins/tech/ytp.31.js
+ # ~/assets/theme/j1/modules/amplitudejs/js/plugins/tech/ytp.33.js
  # AmplitudeJS V5 Tech for J1 Template
  #
  # Product/Info:
@@ -60,7 +60,7 @@ regenerate: true
 
 /*
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/modules/amplitudejs/js/plugins/tech/ytp.31.js
+ # ~/assets/theme/j1/modules/amplitudejs/js/plugins/tech/ytp.33.js
  # AmplitudeJS V5 Plugin|Tech for J1 Template
  #
  # Product/Info:
@@ -84,6 +84,21 @@ regenerate: true
 
   // YT API settings
   // ---------------------------------------------------------------------------
+
+  var YT_PLAYER_ERROR = {
+    INVALID_PARAMETER:  2,
+    INVALID_PLAYER:     5,
+    VIDEO_NOT_ALLOWED:  101,
+    VIDEO_NOT_ALLOWED:  150
+  };
+
+  var YT_PLAYER_ERROR_NAMES = {
+    2:          "invalid parameter",
+    5:          "invalid player",
+    101:        "video not allowed",
+    150:        "video not allowed"
+  };
+
   var YT_PLAYER_STATE = {
     UNSTARTED:  -1,
     ENDED:       0,
@@ -211,7 +226,7 @@ regenerate: true
     // fade-in audio (if enabled)
     if (playerFadeAudio) {
       currentVolume = player.getVolume();
-      logger.debug('\n' + `FADE-IN audio on StateChange at trackID|VideoID: ${trackID}|${videoID}`);
+      logger.debug(`FADE-IN audio on StateChange at trackID|VideoID: ${trackID}|${videoID}`);
       ytpFadeInAudio({
         playerID:     playerID,
         targetVolume: currentVolume,
@@ -249,7 +264,7 @@ regenerate: true
 
     // fade-out audio (if enabled)
     if (isVideoChanged && playerFadeAudio) {
-      logger.debug('\n' + `FADE-OUT audio on processOnVideoEnd at trackID|VideoID: ${trackID}|${activeVideoID}`);
+      logger.debug(`FADE-OUT audio on processOnVideoEnd at trackID|VideoID: ${trackID}|${activeVideoID}`);
       ytpFadeOutAudio({
       playerID:     playerID,
       speed:        'default'
@@ -259,11 +274,11 @@ regenerate: true
     // if (!activeVideoElement.audio_single) {
     if (isVideoChanged) {
       // load next video
-      logger.debug('\n' + `LOAD next VIDEO on processOnVideoEnd at trackID|playlist: ${trackID}|${playlist}`);
+      logger.debug(`LOAD next VIDEO on processOnVideoEnd at trackID|playlist: ${trackID}|${playlist}`);
       loadNextVideo(playlist, songIndex);
     } else {
       // skip loading next video if a single video is used for playlist
-      logger.debug('\n' + `LOAD next TRACK in video on processOnVideoEnd at trackID|playlist: ${trackID}|${playlist}`);
+      logger.debug(`LOAD next TRACK in video on processOnVideoEnd at trackID|playlist: ${trackID}|${playlist}`);
     }
 
   } // END processOnVideoEnd  
@@ -271,21 +286,23 @@ regenerate: true
   // ---------------------------------------------------------------------------
   // doNothingOnStateChange(state)
   //
+  // wrraper for states that are not processed
   // ---------------------------------------------------------------------------
   function doNothingOnStateChange(state) {
     if (state > 0) {
-      logger.warn('\n' + `DO NOTHING on StateChange for state: ${YT_PLAYER_STATE_NAMES[state]}`);
+      logger.warn(`DO NOTHING on StateChange for state: ${YT_PLAYER_STATE_NAMES[state]}`);
     } else {
-      logger.warn('\n' + `DO NOTHING on StateChange for state: ${YT_PLAYER_STATE_NAMES[6]}`);
+      logger.warn(`DO NOTHING on StateChange for state: ${YT_PLAYER_STATE_NAMES[6]}`);
     }
-  } // ENS doNothingOnStateChange
+  } // END doNothingOnStateChange
 
   // ---------------------------------------------------------------------------
   // processOnStateChangePlaying()
   //
+  // wrapper for processing players on state PLAYING 
   // ---------------------------------------------------------------------------
   function processOnStateChangePlaying(event, playlist, songIndex) {
-    var activeSong, playlist, playerID, videoID,
+    var activeSong, activePlaylist, playerID, videoID,
         ytPlayer, songs, songIndex,
         currentPlayer, previousPlayer, trackID;
 
@@ -295,15 +312,19 @@ regenerate: true
     checkActiveVideoElementYTP(); 
 
     // get active song settings (manually)
-    activeSong  = getActiveSong();
+    activeSong      = getActiveSong();
     
-    playlist        = activeSong.playlist;
+    activePlaylist  = playlist;
     playerID        = activeSong.playerID;
     videoID         = activeSong.videoID;
     songs           = activeSong.songs;
-    songIndex       = activeSong.index;
+    // songIndex       = activeSong.index;
     currentPlayer   = activeSong.player;
     previousPlayer  = j1.adapter.amplitude.data.ytPlayers[playerID].player
+    trackID         = songIndex + 1;
+
+    logger.debug(`PLAY audio on YTP at playlist|trackID: ${activePlaylist}|${trackID}`);
+    // logger.debug(`PLAY video on StateChange (playing) at playlist|trackID: ${playList}|${trackID}`);
 
     // save YT player GLOBAL data for later use (e.g. events)
     j1.adapter.amplitude.data.activePlayer              = 'ytp';
@@ -325,18 +346,18 @@ regenerate: true
       updateProgressBarsYTP();
     }, 500);
 
-    trackID = songIndex + 1;
-    logger.debug('\n' + `PLAY video on StateChange at trackID|VideoID: ${trackID}|${videoID}`);
+    // update meta data
+    ytpUpdatMetaContainers(activeSong);    
 
     // check|process video for configured START position (if set)
     // -------------------------------------------------------------------------
     var songStartSec = activeSong.startSec;
     if (songStartSec) {
-      var tsStartSec      = seconds2timestamp(songStartSec);
+      var tsStartSec      = j1.adapter.amplitude.seconds2timestamp(songStartSec);
       var songCurrentTime = ytPlayer.getCurrentTime();
 
       if (songCurrentTime < songStartSec) {
-        logger.debug('\n' + `START video on StateChange at trackID|timestamp: ${trackID}|${tsStartSec}`);
+        logger.debug(`START video on StateChange at trackID|timestamp: ${trackID}|${tsStartSec}`);
         processOnVideoStart(ytPlayer, songStartSec);
       }
     } // END if songStartEnabled
@@ -345,13 +366,13 @@ regenerate: true
     // -------------------------------------------------------------------------
     var songEndSec = activeSong.endSec;
     if (songEndSec) {
-      var tsEndSec = seconds2timestamp(songEndSec);
+      var tsEndSec = j1.adapter.amplitude.seconds2timestamp(songEndSec);
 
       var checkOnVideoEnd = setInterval(function() {
         var songCurrentTime = ytPlayer.getCurrentTime();
 
         if (songCurrentTime >= songEndSec) {
-          logger.debug('\n' + `STOP video on StateChange at trackID|timestamp: ${trackID}|${tsEndSec}`);
+          logger.debug(`STOP video on StateChange at trackID|timestamp: ${trackID}|${tsEndSec}`);
           processOnVideoEnd(ytPlayer);
 
           clearInterval(checkOnVideoEnd);
@@ -359,67 +380,56 @@ regenerate: true
       }, 500); // END checkOnVideoEnd
     } // END if songEndEnabled
 
-    // stop active AT players running in parallel
-    // -------------------------------------------------------------------------
-    var atpPlayerState = Amplitude.getPlayerState();
-    if (atpPlayerState === 'playing') {
-      Amplitude.stop();
+    // stop active AT|YT players running in parallel except the current
+    ytpStopParallelActivePlayers(playerID);
 
-      // clear button MINI PlayerPlayPause (AT player)
-      var buttonPlayerPlayPause = document.getElementsByClassName("mini-player-play-pause");
-      for (var i=0; i<buttonPlayerPlayPause.length; i++) {
-        var htmlElement = buttonPlayerPlayPause[i];
-        
-        if (htmlElement.dataset.amplitudeSource === 'audio') {
+    // clear button MINI PlayerPlayPause (AT player)
+    var buttonPlayerPlayPauseMini = document.getElementsByClassName("mini-player-play-pause");
+    for (var i=0; i<buttonPlayerPlayPauseMini.length; i++) {
+      var htmlElement = buttonPlayerPlayPauseMini[i];
+
+      // toggle classes on state playing
+      if (htmlElement.dataset.amplitudeSource === 'audio') {
+        if (htmlElement.classList.contains('amplitude-playing')) {        
           htmlElement.classList.remove('amplitude-playing');
           htmlElement.classList.add('amplitude-paused');
         }
-    
-      } // END for MINI buttonPlayerPlayPause
-
-      // clear button COMPACT PlayerPlayPause (AT player)
-      var buttonPlayerPlayPause = document.getElementsByClassName("compact-player-play-pause");
-      for (var i=0; i<buttonPlayerPlayPause.length; i++) {
-        var htmlElement = buttonPlayerPlayPause[i];
-        
-        if (htmlElement.dataset.amplitudeSource === 'audio') {
+      }
+  
+    } // END for MINI buttonPlayerPlayPause
+
+    // clear button COMPACT PlayerPlayPause (AT player)
+    var buttonPlayerPlayPauseCompact = document.getElementsByClassName("compact-player-play-pause");
+    for (var i=0; i<buttonPlayerPlayPauseCompact.length; i++) {
+      var htmlElement = buttonPlayerPlayPauseCompact[i];
+      
+      // toggle classes on state playing
+      if (htmlElement.dataset.amplitudeSource === 'audio') {
+        if (htmlElement.classList.contains('amplitude-playing')) {
           htmlElement.classList.remove('amplitude-playing');
           htmlElement.classList.add('amplitude-paused');
         }
-    
-      } // END for COMACT buttonPlayerPlayPause
+      }
+  
+    } // END for COMACT buttonPlayerPlayPause
 
-      // clear button LARGE PlayerPlayPause (AT player)
-      var buttonPlayerPlayPause = document.getElementsByClassName("large-player-play-pause");
-      for (var i=0; i<buttonPlayerPlayPause.length; i++) {
-        var htmlElement = buttonPlayerPlayPause[i];
-        
-        if (htmlElement.dataset.amplitudeSource === 'audio') {
+    // clear button LARGE PlayerPlayPause (AT player)
+    var buttonPlayerPlayPauseLarge = document.getElementsByClassName("large-player-play-pause");
+    for (var i=0; i<buttonPlayerPlayPauseLarge.length; i++) {
+      var htmlElement = buttonPlayerPlayPauseLarge[i];
+
+      // toggle classes on state playing
+      if (htmlElement.dataset.amplitudeSource === 'audio') {
+        if (htmlElement.classList.contains('amplitude-playing')) {
           htmlElement.classList.remove('amplitude-playing');
           htmlElement.classList.add('amplitude-paused');
         }
+      }
 
-      } // END for LARGE buttonPlayerPlayPause
-
-    } // END if atpPlayerState 'playing' 
-
-    // TODO: check if YT player stop is needed
-    // stop active YT players running in parallel except the current
-    // if (previousPlayer.options.videoId !== videoID) {
-    //   logger.debug('\n' + `STOP all video on StateChange running in parallel at trackID|playerID: ${trackID}|${playerID}`);
-    //   var playerState   = (previousPlayer.getPlayerState() > 0) ? previousPlayer.getPlayerState() : 6;
-    //   var ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
-
-    //   if (ytPlayerState === 'playing' || ytPlayerState === 'paused') {
-    //     previousPlayer.stopVideo();
-    //   }      
-    // }
-
-    // stopAllActivePlayers(playerID);
+    } // END for LARGE buttonPlayerPlayPause
 
   } // END processOnStateChangePlaying
 
-
   // ---------------------------------------------------------------------------
   // processOnStateChangeEnded()
   //
@@ -431,7 +441,7 @@ regenerate: true
     // save player current time data for later use
     ytPlayerCurrentTime = ytPlayer.getCurrentTime();
 
-    logger.debug('\n' + `NEXT video on StateChange at trackID|VideoID: ${trackID}|${videoID}`);
+    logger.debug(`NEXT video on StateChange at trackID|VideoID: ${trackID}|${videoID}`);
 
     // load NEXT song (video) in playlist
     loadNextVideo(playlist, songIndex);
@@ -518,50 +528,6 @@ regenerate: true
     current[lastKey] = value;
   }
 
-  // ---------------------------------------------------------------------------
-  // timestamp2seconds
-  // ---------------------------------------------------------------------------
-  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) {
-    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
-
   // ---------------------------------------------------------------------------
   // ytpFadeInAudio
   // ---------------------------------------------------------------------------
@@ -592,18 +558,10 @@ regenerate: true
     currentStep   = 1;
 
     if (volumeSlider === undefined || volumeSlider === null) {
-      logger.warn('\n' + 'no volume slider found at playerID: ' + settings.playerID);
+      logger.warn('no volume slider found at playerID: ' + settings.playerID);
       return;
     }
 
-    // (ytPlayer.isMuted()) && ytPlayer.unMute();
-
-    // skip fade-in when volume is already at target value
-    // if (ytPlayer.getVolume() >= targetVolume) {
-    //   logger.warn('\n' + 'skipped fade-in for current video on volume: ', targetVolume);
-    //   return;
-    // }
-
     // Start the players volume muted
     ytPlayer.setVolume(0);
 
@@ -648,7 +606,7 @@ regenerate: true
     currentStep   = 0;
 
     if (volumeSlider === undefined || volumeSlider === null) {
-      logger.warn('\n' + 'no volume slider found at playerID: ' + settings.playerID);
+      logger.warn('no volume slider found at playerID: ' + settings.playerID);
       return;
     }
 
@@ -672,7 +630,7 @@ regenerate: true
   function initYtAPI() {
     startTimeModule = Date.now();
 
-    logger.info('\n' + 'Initialize plugin|tech (ytp) : started');
+    logger.info('Initialize plugin|tech (ytp) : started');
 
     // Load YT IFrame Player API asynchronously
     // -------------------------------------------------------------------------
@@ -709,7 +667,6 @@ regenerate: true
 
     ytpSongIndex  = songIndex;
     
-
     // play sonng (video) in playlist 
     if (songIndex <= songs.length - 1) {
       songMetaData  = songs[songIndex];
@@ -720,8 +677,7 @@ regenerate: true
       j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex = songIndex;
       j1.adapter.amplitude.data.ytPlayers[playerID].videoID     = ytVideoID;      
 
-
-      logger.debug('\n' + `SWITCH video on loadNextVideo at trackID|VideoID: ${trackID}|${ytVideoID}`);
+      logger.debug(`SWITCH video on loadNextVideo at trackID|VideoID: ${trackID}|${ytVideoID}`);
       ytPlayer.loadVideoById(ytVideoID);
 
       // delay after switch video
@@ -739,7 +695,7 @@ regenerate: true
       loadCoverImage(songMetaData);
 
       // update meta data
-      updatMetaContainers(songMetaData);
+      // ytpUpdatMetaContainers(songMetaData);
   
       // set song (video) active at index in playlist
       setSongActive(playlist, songIndex);
@@ -769,7 +725,7 @@ regenerate: true
       j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex = songIndex;
       j1.adapter.amplitude.data.ytPlayers[playerID].videoID     = ytpVideoID; 
 
-      logger.debug('\n' + `SWITCH video on loadNextVideo at trackID|VideoID: ${trackID}|${ytVideoID}`);
+      logger.debug(`SWITCH video on loadNextVideo at trackID|VideoID: ${trackID}|${ytVideoID}`);
       ytPlayer.loadVideoById(ytVideoID);
 
       // delay after switch video
@@ -784,11 +740,10 @@ regenerate: true
       loadCoverImage(songMetaData);
   
       // update meta data
-      updatMetaContainers(songMetaData);
+      // ytpUpdatMetaContainers(songMetaData);
   
-      // set AJS play_pause button paused
-      var playPauseButtonClass = `large-player-play-pause-${playerID}`
-      setPlayPauseButtonPaused(playPauseButtonClass);
+      var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
+      togglePlayPauseButton(playPauseButtonClass);
 
       // set song (video) active at index in playlist
       setSongActive(playlist, songIndex);
@@ -837,7 +792,7 @@ regenerate: true
         {% endif %}{% endfor %}
 
         clearInterval(dependencies_ytp_ready);
-        logger.info('\n' + 'Initialize APIPlayers : ready');
+        logger.info('Initialize APIPlayers : ready');
       } // END if ready
 
     }, 10); // END dependencies_ytp_ready
@@ -884,8 +839,8 @@ regenerate: true
           var ytpHeight   = ('{{player.yt_player.height}}'.length > 0)   ? '{{player.yt_player.height}}'    : '{{amplitude_defaults.player.yt_player.height}}';
           var ytpWidth    = ('{{player.yt_player.width}}'.length > 0)    ? '{{player.yt_player.width}}'     : '{{amplitude_defaults.player.yt_player.width}}';
 
-          logger.info('\n' + 'AJS YouTube iFrame API: ready');
-          logger.info('\n' + 'configure player on ID: #{{player.id}}');
+          logger.info('AJS YouTube iFrame API: ready');
+          logger.info('configure player on ID: #{{player.id}}');
 
           // create a hidden YT Player iFrame container
           //
@@ -897,13 +852,15 @@ regenerate: true
             height:             ytpHeight,
             width:              ytpWidth,
             videoId:            ytpVideoID,
+            // videoId:         'bloedsinn',
             playerVars: {
               autoplay:         ytpAutoPlay,
               loop:             ytpLoop
             },
             events: {
-              'onReady':                  {{player.id}}OnPlayerReady,
-              'onStateChange':            {{player.id}}OnPlayerStateChange
+              'onReady':        {{player.id}}OnPlayerReady,
+              'onStateChange':  {{player.id}}OnPlayerStateChange,
+              'onError':        {{player.id}}OnPlayerErrors
             }
           });
 
@@ -934,19 +891,23 @@ regenerate: true
 
         } // END if playerExistsInPage()
 
-        function checkPlayingStatus(player) {
-          if (player.getPlayerState() === YT_PLAYER_STATE.PLAYING) {
-            // code run after video is playing
-            // console.debug("checkPlayingStatus: AJS YouTube Player state: PLAYING");
-            // do nothing
-            return;
-          } else {
-            // re-check player state required
-            // console.debug("checkPlayingStatus: AJS YouTube Player state:", player.getPlayerState());
-          }
-        } // END checkPlayingStatus
+        // AJS YouTube Player errors fired by the YT API
+        // ---------------------------------------------------------------------
+        function {{player.id}}OnPlayerErrors(event) {
+          var eventData, ytPlayer, videoID;
+
+          eventData = event.data;
+          ytPlayer  = event.target;
+          videoID   = ytPlayer.options.videoId;
 
-        // run AJS YouTube Player initialization
+          logger.error(`YT API Error '${YT_PLAYER_ERROR_NAMES[eventData]}' for VideoID: '${videoID}'`);
+
+          // save YT player GLOBAL data for later use (e.g. events)
+          j1.adapter.amplitude.data.ytpGlobals['ytApiError'] = eventData;
+
+        }
+
+        // AJS YouTube Player initialization fired by the YT API
         // ---------------------------------------------------------------------
         function {{player.id}}OnPlayerReady(event) {
           var hours, minutes, seconds,
@@ -957,7 +918,7 @@ regenerate: true
           ytPlayerReady       = true;
           playerVolumePreset  = parseInt({{player.volume_slider.preset_value}});
 
-            logger.debug('\n' + `FOUND video ready at ID: {{player.id}}`);
+            logger.debug(`FOUND video ready at ID: {{player.id}}`);
 
           // set video playback quality to a minimum
           ytPlayer.setPlaybackQuality('small');
@@ -982,13 +943,11 @@ regenerate: true
             }
           }
 
-          logger.info('\n' + 'AJS YouTube Player on ID {{player.id}}: ready');
+          logger.info('AJS YouTube Player on ID {{player.id}}: ready');
 
           // save YT player GLOBAL data for later use (e.g. events)
           j1.adapter.amplitude.data.ytpGlobals['ytPlayerReady'] = ytPlayerReady;
-
-          // save YT player data for later use (e.g. events)
-          // j1.adapter.amplitude.data.ytPlayers.{{player.id}}.playerReady = ytPlayerReady;
+          j1.adapter.amplitude.data.ytpGlobals['ytApiError']    = 0;          
 
           // get duration hours (if configured)
           if ({{player.display_hours}} ) {
@@ -1020,12 +979,12 @@ regenerate: true
           // -------------------------------------------------------------------
           endTimeModule = Date.now();
 
-          logger.info('\n' + 'Initialize plugin|tech (ytp) : finished');
+          logger.info('Initialize plugin|tech (ytp) : finished');
 
           if (playerCounter > 0) {
-            logger.info('\n' + 'Found players of type video (YTP) in page: ' + playerCounter);
+            logger.info('Found players of type video (YTP) in page: ' + playerCounter);
           } else {
-            logger.warn('\n' + 'Found NO players of type video (YTP) in page');
+            logger.warn('Found NO players of type video (YTP) in page');
           }
 
           // update activeVideoElement data structure for the ACTIVE video
@@ -1035,14 +994,14 @@ regenerate: true
           }, checkActiveVideoInterval);
           // END checkActiveVideoElementYTP
 
-          logger.info('\n' + 'plugin|tech initializing time: ' + (endTimeModule-startTimeModule) + 'ms');
+          logger.info('plugin|tech initializing time: ' + (endTimeModule-startTimeModule) + 'ms');
 
         } // END onPlayerReady()
 
         // ---------------------------------------------------------------------
         // OnPlayerStateChange
         //
-        // process Player|Video specific functions on state change
+        // process all YT Player specific state changes
         // ---------------------------------------------------------------------
         // NOTE:
         // The YT API fires a lot of INTERMEDIATE states. MOST of them gets
@@ -1050,6 +1009,8 @@ regenerate: true
         // are being set; e.g. start|stop positions for a video (when)
         // configured.
         // ---------------------------------------------------------------------
+        // AJS YouTube Player state changes fired by the YT API
+        // ---------------------------------------------------------------------
         function {{player.id}}OnPlayerStateChange(event) {
           var currentTime, playlist, ytPlayer, ytVideoID,
               songs, songIndex, trackID, playerID, songMetaData;
@@ -1101,8 +1062,8 @@ regenerate: true
               processOnStateChangeEnded(event, playlist, songIndex);
               break;
             default:
-              logger.error('\n' + `UNKNOWN event on StateChange fired`);
-          } // END case
+              logger.error(`UNKNOWN event on StateChange fired: ${event.data}`);
+          } // END switch event.data
 
         } // END {{player.id}}OnPlayerStateChange
 
@@ -1111,7 +1072,6 @@ regenerate: true
 
   } // END onYouTubeIframeAPIReady
 
-
   // ---------------------------------------------------------------------------
   // main
   // ===========================================================================
@@ -1130,28 +1090,27 @@ regenerate: true
   // ---------------------------------------------------------------------------
   initUiEventsForAJS();
 
-
   // ---------------------------------------------------------------------------
   // Base AJS Player functions
   // ===========================================================================
   
   // ---------------------------------------------------------------------------
-  // updatMetaContainers(metaData)
+  // ytpUpdatMetaContainers(metaData)
   //
   // update song name in meta-containers
   // ---------------------------------------------------------------------------  
-  function updatMetaContainers(metaData) {
-    var playerID, playlist, songName, artistName, albumName,
-        largePlayerSongAudioRating;
+  function ytpUpdatMetaContainers(metaData) {
+    var playerID, playlist, trackID, rating;
 
-    playlist = metaData.playlist;
-    playerID = playlist + '_large';
+    playlist  = metaData.playlist;
+    playerID  = playlist + '_large';
+    rating    = metaData.rating;
+    trackID   = metaData.index + 1;
 
-    var trackID = metaData.index + 1;
-    logger.debug('\n' + `UPDATE metadata on updatMetaContainers for trackID|playlist at: ${trackID}|${playlist}`);
+    logger.debug(`UPDATE metadata on ytpUpdatMetaContainers for trackID|playlist at: ${trackID}|${playlist}`);
 
     // update song name in meta-containers
-    songName = document.getElementsByClassName("song-name");
+    var songName = document.getElementsByClassName("song-name");
     if (songName.length) {
       for (var i=0; i<songName.length; i++) {    
         var currentPlaylist = songName[i].dataset.amplitudePlaylist;
@@ -1162,10 +1121,10 @@ regenerate: true
     }
 
     // update artist name in meta-containers
-    artistName = document.getElementsByClassName("artist");
+    var artistName = document.getElementsByClassName("artist");
     if (artistName.length) {
       for (var i=0; i<artistName.length; i++) {    
-        var currentPlaylist = songName[i].dataset.amplitudePlaylist;
+        var currentPlaylist = artistName[i].dataset.amplitudePlaylist;
         if (currentPlaylist === playlist) {
           artistName[i].innerHTML = metaData.artist;
         }
@@ -1173,7 +1132,7 @@ regenerate: true
     }
 
     // update album name in meta-containers
-    albumName = document.getElementsByClassName("album");
+    var albumName = document.getElementsByClassName("album");
     if (albumName.length) {
       for (var i=0; i<albumName.length; i++) {    
         var currentPlaylist = songName[i].dataset.amplitudePlaylist;
@@ -1184,27 +1143,32 @@ regenerate: true
     }
 
     // update song rating in screen controls
-    largePlayerSongAudioRating = document.getElementsByClassName("audio-rating-screen-controls");
-    if (largePlayerSongAudioRating.length) {
-      for (var i=0; i<largePlayerSongAudioRating.length; i++) {
-        var currentPlaylist = largePlayerSongAudioRating[i].dataset.amplitudePlaylist;
+    var songAudioRating = document.getElementsByClassName("audio-rating-screen-controls");
+    if (songAudioRating.length) {
+      for (var i=0; i<songAudioRating.length; i++) {
+        var currentPlaylist = songAudioRating[i].dataset.amplitudePlaylist;
         if (currentPlaylist === playlist) {
           if (metaData.rating) {
-            var trackID = metaData.index + 1;
-
-            // save YT player data for later use (e.g. events)
-            j1.adapter.amplitude.data.ytPlayers[playerID].videoID = metaData.videoID;
+            songAudioRating[i].innerHTML = `<img src="/assets/image/pattern/rating/scalable/${metaData.rating}-star.svg" alt="song rating">`;
+          }
+        }
+      }
+    } // END if songAudioRating
 
-            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 = '';
+    // 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 === playlist) {
+          if (metaData.audio_info) {
+            songAudioInfo[i].setAttribute("href", metaData.audio_info);
           }
         }
       }
-    } // END if largePlayerSongAudioRating
+    } // END if songAudioInfo
 
-  } // END updatMetaContainers
+  } // END ytpUpdatMetaContainers
 
   // ---------------------------------------------------------------------------
   // loadCoverImage(metaData)
@@ -1218,46 +1182,67 @@ regenerate: true
     selector       = ".cover-image-" + metaData.playlist;
     coverImage     = document.querySelector(selector);
     coverImage.src = metaData.cover_art_url;
+
   } // END loadCoverImage
 
   // ---------------------------------------------------------------------------
-  // stopAllActivePlayers(exceptPlayer)
+  // ytpStopParallelActivePlayers(exceptPlayer)
   //
   // if multiple players used on a page, stop ALL active AT|YT players
-  // running in parallel execpet the exceptPlayer
+  // running in parallel skipping the exceptPlayer
   // ---------------------------------------------------------------------------  
-  function stopAllActivePlayers(exceptPlayer) {
+  function ytpStopParallelActivePlayers(exceptPlayer) {
 
-    // stop active AT players
+    // stop active AT players running in parallel
     // -------------------------------------------------------------------------
-    var atpPlayerState = Amplitude.getPlayerState();
-    if (atpPlayerState === 'playing') {
+    var atPlayerState = Amplitude.getPlayerState();
+    if (atPlayerState === 'playing' || atPlayerState === 'paused') {
       Amplitude.stop();
     } // END stop active AT players
 
-    // stop active YT players
+    // stop active YT players running in parallel
     // -------------------------------------------------------------------------
     const ytPlayers = Object.keys(j1.adapter.amplitude.data.ytPlayers);
     for (let i=0; i<ytPlayers.length; i++) {
-      const ytPlayerID = ytPlayers[i];
-      const playerProperties = j1.adapter.amplitude.data.ytPlayers[ytPlayerID];
+      const ytPlayerID        = ytPlayers[i];
+      const playerProperties  = j1.adapter.amplitude.data.ytPlayers[ytPlayerID];
 
       if (ytPlayerID !== exceptPlayer) {    
         var player        = j1.adapter.amplitude['data']['ytPlayers'][ytPlayerID]['player'];
         var playerState   = (player.getPlayerState() > 0) ? player.getPlayerState() : 6;
         var ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
 
-        // if (ytPlayerState === 'playing' || ytPlayerState === 'paused' || ytPlayerState === 'buffering' || ytPlayerState === 'cued' || ytPlayerState === 'unstarted') {
-        if (ytPlayerState === 'playing' || ytPlayerState === 'paused' || ytPlayerState === 'buffering' || ytPlayerState === 'cued' || ytPlayerState === 'unstarted') {
-          logger.debug('\n' + `STOP player at stopAllActivePlayers for id: ${ytPlayerID}`);
-          // player.mute();
+        // toggle PlayPause buttons playing => puased
+        // ---------------------------------------------------------------------
+        if (ytPlayerState === 'playing' || ytPlayerState === 'paused') {
+          logger.debug(`STOP player at ytpStopParallelActivePlayers for id: ${ytPlayerID}`);
           player.stopVideo();
-          j1.adapter.amplitude.data.ytpGlobals.activeIndex = 0;
-        }
-      }
-    } // END stop active YT players
+          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');
+              }
+              // if (htmlElement.classList.contains('amplitude-paused')) {        
+              //   htmlElement.classList.remove('amplitude-paused');
+              //   htmlElement.classList.add('amplitude-playing');
+              // }              
+            }
+
+          } // END for ytpButtonPlayerPlayPause
 
-  } // END stopAllActivePlayers
+        } // END if ytPlayerState
+      } // END if ytPlayerID
+
+      // save AT player data for later use (e.g. events)
+      // ---------------------------------------------------------------------
+      j1.adapter.amplitude.data.ytpGlobals.activeIndex = 0;
+
+    } // END stop active YT players
+  } // END ytpStopParallelActivePlayers
 
   // ---------------------------------------------------------------------------
   // getSongPlayed
@@ -1310,7 +1295,7 @@ regenerate: true
       }
     }
 
-  } // END setSongPlayed
+  } // END setSongActive
 
   // ---------------------------------------------------------------------------
   // getProgressBarSelectedPositionPercentage
@@ -1365,20 +1350,18 @@ regenerate: true
         activeVideoElement.album          = activeSong.album;
         activeVideoElement.artist         = activeSong.artist;
         activeVideoElement.audio_info     = activeSong.audio_info;
-        activeVideoElement.audio_single   = activeSong.audio_single;
         activeVideoElement.currentTime    = parseFloat(activeVideoElement.player.getCurrentTime());
         activeVideoElement.cover_art_url  = activeSong.cover_art_url;
         activeVideoElement.duration       = activeSong.duration;
-        activeVideoElement.endSec         = timestamp2seconds(activeSong.end);
+        activeVideoElement.endSec         = j1.adapter.amplitude.timestamp2seconds(activeSong.end);
         activeVideoElement.endTS          = activeSong.end;
         activeVideoElement.name           = activeSong.name;
-        activeVideoElement.rating         = activeSong.album;
-        activeVideoElement.startSec       = timestamp2seconds(activeSong.start);
+        activeVideoElement.rating         = activeSong.rating;
+        activeVideoElement.startSec       = j1.adapter.amplitude.timestamp2seconds(activeSong.start);
         activeVideoElement.startTS        = activeSong.start;
         activeVideoElement.url            = activeSong.url;
 
         var videoArray                    = activeSong.url.split('=');
-
         activeVideoElement.videoID        = videoArray[1];
 
       }
@@ -1437,7 +1420,7 @@ regenerate: true
         activeClass   = 'large-player-progress-' + playlist;
 
         if (activePlayer === undefined) {
-          logger.error('\n' + 'YT player not defined');
+          logger.error('YT player not defined');
           return;
         }
 
@@ -1478,14 +1461,6 @@ regenerate: true
     ytPlayer        = activeSongSettings.player;
     activePlaylist  = activeSongSettings.playlist;
 
-    // if (activeSongSettings) {
-    //   ytPlayer        = activeSongSettings.player;
-    //   activePlaylist  = activeSongSettings.playlist;
-    // } else {
-    //   ytPlayer        = player; 
-    //   activePlaylist  = playlist; 
-    // }
-
     // get current hours|minutes|seconds
     // -------------------------------------------------------------------------
     hours   = ytpGetDurationHours(ytPlayer);
@@ -1690,7 +1665,6 @@ regenerate: true
 
   } // END ytpSeekTo
 
-
   // ---------------------------------------------------------------------------
   // ytpGetBuffered
   //
@@ -1716,7 +1690,6 @@ regenerate: true
     return activeIndex;
   } // END ytpGetActiveIndex
 
-
   // ---------------------------------------------------------------------------
   // ytpSetActiveIndex
   //
@@ -1854,7 +1827,6 @@ regenerate: true
     }
   } // END ytpGetDurationMinutes
 
-
   // ---------------------------------------------------------------------------
   // ytpGetDurationSeconds
   //
@@ -1976,28 +1948,20 @@ regenerate: true
   // ---------------------------------------------------------------------------
   // setPlayPauseButtonPaused 
   // ---------------------------------------------------------------------------
-  function setPlayPauseButtonPaused(elementClass) {
-    var button, htmlElement;
-
-    button      = document.getElementsByClassName(elementClass);
-    htmlElement = button[0];
+  function setPlayPauseButtonPaused(element) {
 
-    htmlElement.classList.remove('amplitude-playing');
-    htmlElement.classList.add('amplitude-paused');
+    element.classList.remove('amplitude-playing');
+    element.classList.add('amplitude-paused');
 
   } // END setPlayPauseButtonPaused
 
   // ---------------------------------------------------------------------------
   // setPlayPauseButtonPlaying 
   // ---------------------------------------------------------------------------
-  function setPlayPauseButtonPlaying(elementClass) {
-    var button, htmlElement;
-
-    button      = document.getElementsByClassName(elementClass);
-    htmlElement = button[0];
+  function setPlayPauseButtonPlaying(element) {
 
-    htmlElement.classList.remove('amplitude-paused');
-    htmlElement.classList.add('amplitude-playing');
+    element.classList.remove('amplitude-paused');
+    element.classList.add('amplitude-playing');
 
   } // END setPlayPauseButtonPlaying
 
@@ -2077,8 +2041,9 @@ regenerate: true
 
           if (classString.includes(ytPlayerID)) {
             largePlayerPlayPauseButton[i].addEventListener('click', function(event) {
-              var activeSongSettings, songs, songMetaData, ytPlayer,
-                  playlist, playerID, songIndex;
+              var activeSongSettings, songs, songMetaData, playerData,
+                  ytPlayer, playerState, ytPlayerState, playlist,
+                  playerID, songIndex;
 
               playlist            = this.getAttribute("data-amplitude-playlist");
               playerID            = playlist + '_large';
@@ -2088,76 +2053,69 @@ regenerate: true
 
               // get active song settings (manually)
               activeSongSettings  = getActiveSong();
-
-              // TODO: Extend getSongIndex() for singleAudio
-              // var songIndex      = (singleAudio) ? ytpSongIndex : getSongIndex(songs, ytVideoID);
               if (!activeSongSettings) {
                 songIndex     = 0;
                 ytpSongIndex  = 0;
               } else {
-                
-                // ytPlayerCurrentTime = activeSongSettings.currentTime;
-
                 if (activeSongSettings.playlist !== playlist) {
                   songIndex    = 0;
                   ytpSongIndex = 0;
 
                   // reset previous player settings
-                  if (activeSongSettings.player !== undefined) {
-                    activeSongSettings.player.stopVideo();
-                    var playPauseButtonClass = `large-player-play-pause-${activeSongSettings.playerID}`;
-                    togglePlayPauseButton(playPauseButtonClass);                    
-                  }
+                  // if (activeSongSettings.player !== undefined) {
+                  //   activeSongSettings.player.stopVideo();
+                  //   var playPauseButtonClass = `large-player-play-pause-${activeSongSettings.playerID}`;
+                  //   togglePlayPauseButton(playPauseButtonClass);                    
+                  // }
                 } else {
                   songIndex = ytpSongIndex;
                 }
-              }
+              } // END if activeSongSettings
 
-              // set song (video) active at index in playlist
-              setSongActive(playlist, songIndex);
-
-              // reset progress bar settings
-              resetProgressBarYTP();
+              if (j1.adapter.amplitude.data.ytpGlobals.ytApiError > 0) {
+                // do nothing on API errors
+                var trackID = songIndex + 1;
+                logger.error(`DISABLED player for playlist|trackID: ${playlist}|${trackID} on API error '${YT_PLAYER_ERROR_NAMES[j1.adapter.amplitude.data.ytpGlobals.ytApiError]}'`);
 
-              // scroll song active at index in player
-              if (playerAutoScrollSongElement) {
-                scrollToActiveElement(playlist);
+                return;
               }
 
               // update activeAudio data (manually)
               checkActiveVideoElementYTP();
 
               // get active song settings (manually)
-              activeSongSettings  = getActiveSong();
+              // activeSongSettings  = getActiveSong();
 
-              songs               = activeSongSettings.songs;
-              songMetaData        = songs[songIndex];
-              ytPlayer            = activeSongSettings.player;
+              playerData    = j1.adapter.amplitude.data.ytPlayers[playerID];
+              ytPlayer      = playerData.player;
+              songIndex     = playerData.activeIndex;
+              songs         = playerData.songs;
 
               // update meta data
-              updatMetaContainers(songMetaData);              
+              // songMetaData = songs[songIndex];
+              // ytpUpdatMetaContainers(songMetaData);              
 
               // save player GLOBAL data for later use (e.g. events)
               j1.adapter.amplitude.data.activePlayer                 = 'ytp';
               j1.adapter.amplitude.data.ytpGlobals['activeIndex']    = songIndex;
               j1.adapter.amplitude.data.ytpGlobals['activePlaylist'] = playlist;
 
-              // YT play|pause video
+              // toggle YT play|pause video
               // ---------------------------------------------------------------
-              var playerState   = ytPlayer.getPlayerState();
-              if (playerState < 0) {
-                var ytPlayerState = YT_PLAYER_STATE_NAMES[6];
-              } else {
-                var ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
-              }
+              playerState   = ytPlayer.getPlayerState();
+              ytPlayerState = (playerState < 0) ? YT_PLAYER_STATE_NAMES[6] : YT_PLAYER_STATE_NAMES[playerState];
+
+              // if (playerState < 0) {
+              //   var ytPlayerState = YT_PLAYER_STATE_NAMES[6];
+              // } else {
+              //   var ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
+              // }
 
+              // TOGGLE state 'playing' => 'paused'
               if (ytPlayerState === 'playing') {
                 ytPlayer.pauseVideo();
 
                 ytPlayerCurrentTime = ytPlayer.getCurrentTime();
-                
-                var trackID = songIndex + 1;
-                logger.debug('\n' + `PAUSE video for PlayPauseButton on playlist|trackID: ${playlist}|${trackID} at: ${ytPlayerCurrentTime}`);                
 
                 var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
                 togglePlayPauseButton(playPauseButtonClass);
@@ -2167,12 +2125,13 @@ regenerate: true
                 updateDurationTimeContainerYTP(ytPlayer, playlist);                
               }
 
+              // TOGGLE state 'paused' => 'playing'
               if (ytPlayerState === 'paused') {
                 ytPlayer.playVideo();
                 ytpSeekTo(ytPlayer, ytPlayerCurrentTime, true);
 
                 var trackID =  songIndex + 1;
-                logger.debug('\n' + `PLAY video for PlayPauseButton on playlist|trackID: ${playlist}|${trackID} at: ${ytPlayerCurrentTime}`);
+                logger.debug(`PLAY video for PlayPauseButton on playlist|trackID: ${playlist}|${trackID} at: ${ytPlayerCurrentTime}`);
 
                 var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
                 togglePlayPauseButton(playPauseButtonClass);
@@ -2180,43 +2139,62 @@ regenerate: true
                 // reset|update time settings
                 resetCurrentTimeContainerYTP(ytPlayer, playlist);
                 updateDurationTimeContainerYTP(ytPlayer, playlist);                  
-              }
+              } // if ytPlayerState === 'paused'
 
+              // load (cued) video
               if (ytPlayerState === 'cued') {
                 ytPlayer.playVideo();
-                var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
-                togglePlayPauseButton(playPauseButtonClass);
 
-                // set song at songIndex active in playlist
-                setSongActive(playlist, songIndex);
+                // wait for API error state
+                setTimeout(() => {
+                  if (j1.adapter.amplitude.data.ytpGlobals.ytApiError > 0) {
+                    var trackID = songIndex + 1;
+                    logger.error(`DISABLED player for playlist|trackID: ${playlist}|${trackID} on API error '${YT_PLAYER_ERROR_NAMES[j1.adapter.amplitude.data.ytpGlobals.ytApiError]}'`);
 
-                // scroll song active at index in player
-                if (playerAutoScrollSongElement) {
-                  scrollToActiveElement(playlist);
-                }
+                    // do nothing on API errors
+                    return;
+                  }
 
-                // reset|update time settings
-                resetCurrentTimeContainerYTP(ytPlayer, playlist);
-                updateDurationTimeContainerYTP(ytPlayer, playlist);                  
-              }
+                  // reset progress bar settings
+                  resetProgressBarYTP();                    
+
+                  var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
+                  togglePlayPauseButton(playPauseButtonClass);
+
+                  // set song at songIndex active in playlist
+                  setSongActive(playlist, songIndex);
+
+                  // scroll song active at index in player
+                  if (playerAutoScrollSongElement) {
+                    scrollToActiveElement(playlist);
+                  }
+
+                  // reset|update time settings
+                  resetCurrentTimeContainerYTP(ytPlayer, playlist);
+                  updateDurationTimeContainerYTP(ytPlayer, playlist);
+
+                }, 100);
+              } // END if ytPlayerState === 'cued'
 
               // TODO: unclear why state 'unstarted' is generated
               // on LAST item
               // workaround sofar
-              if (ytPlayerState === 'unstarted') {
-                ytPlayer.playVideo();
-                // ytPlayer.mute();              
-                
-                var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
-                togglePlayPauseButton(playPauseButtonClass);
-                resetCurrentTimeContainerYTP(ytPlayer, playlist);
-                updateDurationTimeContainerYTP(ytPlayer, playlist);                  
-              }
+              // -------------------------------------------------------------
+              // if (ytPlayerState === 'unstarted') {
+              //   ytPlayer.playVideo();
+              //   // ytPlayer.mute();              
+              //  
+              //   var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
+              //   togglePlayPauseButton(playPauseButtonClass);
+              //   resetCurrentTimeContainerYTP(ytPlayer, playlist);
+              //   updateDurationTimeContainerYTP(ytPlayer, playlist);                  
+              // } // END if ytPlayerState === 'unstarted'               
 
               // deactivate AJS events (if any)
               event.stopImmediatePropagation();
-            }); // END EventListener largePlayerPlayPauseButton 'click'
-          }
+
+            }); // END EventListener largePlayerPlayPauseButton 'click
+          } // END if classString
         } // END for largePlayerPlayPauseButton
 
         // Overload AJS largePlayerSkipBackward button for YT
@@ -2240,7 +2218,7 @@ regenerate: true
               currentVideoTime  = ytPlayer.getCurrentTime();
 
               if (playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED) {
-                logger.debug('\n' + `SKIP forward on Button skipForward for ${skipOffset} seconds`);
+                logger.debug(`SKIP forward on Button skipForward for ${skipOffset} seconds`);
                 ytpSeekTo(ytPlayer, currentVideoTime + skipOffset, true);
 
               }
@@ -2272,7 +2250,7 @@ regenerate: true
               currentVideoTime  = ytPlayer.getCurrentTime();
 
               if (playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED) {
-                logger.debug('\n' + `SKIP backward on Button skipBackward for ${skipOffset} seconds`);
+                logger.debug(`SKIP backward on Button skipBackward for ${skipOffset} seconds`);
                 ytpSeekTo(ytPlayer, currentVideoTime - skipOffset, true);
               }
 
@@ -2303,12 +2281,17 @@ regenerate: true
               songs     = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
               ytPlayer  = j1.adapter.amplitude.data.ytPlayers[playerID].player;
 
-              if (ytPlayer === undefined) {
-                logger.error('\n' + 'YT player not defined');
+              if (j1.adapter.amplitude.data.ytpGlobals.ytApiError > 0) {
+                // do nothing on API errors
+                var trackID = songIndex + 1;
+                logger.error(`DISABLED player for playlist|trackID: ${playlist}|${trackID} on API error '${YT_PLAYER_ERROR_NAMES[j1.adapter.amplitude.data.ytpGlobals.ytApiError]}'`);
+
+                return;
               }
 
-              // stop active AT|YT players except the current
-              // stopAllActivePlayers(playerID);
+              if (ytPlayer === undefined) {
+                logger.error('YT player not defined');
+              }
 
               // select video
               if (songIndex < songs.length-1) {
@@ -2339,7 +2322,7 @@ regenerate: true
               j1.adapter.amplitude.data.ytPlayers[playerID].videoID     = ytpVideoID;
 
               trackID = songIndex + 1;
-              logger.debug('\n' + `SWITCH video for PlayerNextButton at trackID|VideoID: ${trackID}|${ytpVideoID}`);
+              logger.debug(`SWITCH video for PlayerNextButton at trackID|VideoID: ${trackID}|${ytpVideoID}`);
               ytPlayer.loadVideoById(ytpVideoID);
 
               // delay after switch video
@@ -2363,7 +2346,6 @@ regenerate: true
 
                 // set AJS play_pause button paused
                 var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
-                // setPlayPauseButtonPlaying(playPauseButtonClass);
                 togglePlayPauseButton(playPauseButtonClass);
               } else {
                 // toggle AJS play_pause button
@@ -2380,7 +2362,7 @@ regenerate: true
               loadCoverImage(songMetaData);
 
               // update meta data
-              updatMetaContainers(songMetaData);
+              // ytpUpdatMetaContainers(songMetaData);
 
               // set song at songIndex active in playlist
               setSongActive(playlist, songIndex);
@@ -2419,12 +2401,17 @@ regenerate: true
             songs     = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
             ytPlayer  = j1.adapter.amplitude.data.ytPlayers[playerID].player;
 
-            if (ytPlayer === undefined) {
-              logger.error('\n' + 'YT player not defined');
+            if (j1.adapter.amplitude.data.ytpGlobals.ytApiError > 0) {
+              // do nothing on API errors
+              var trackID = songIndex + 1;
+              logger.error(`DISABLED player for playlist|trackID: ${playlist}|${trackID} on API error '${YT_PLAYER_ERROR_NAMES[j1.adapter.amplitude.data.ytpGlobals.ytApiError]}'`);
+
+              return;
             }
 
-            // stop active AT|YT players except the current
-            // stopAllActivePlayers(playerID);
+            if (ytPlayer === undefined) {
+              logger.error('YT player not defined');
+            }
 
             // select video
             if (songIndex > 0 && songIndex <= songs.length - 1) {
@@ -2447,7 +2434,7 @@ regenerate: true
             j1.adapter.amplitude.data.ytpGlobals['activeIndex']    = songIndex;
             j1.adapter.amplitude.data.ytpGlobals['activePlaylist'] = playlist;
 
-            // load next video
+            // load previous video
             // -----------------------------------------------------------------
 
             // save YT player data for later use (e.g. events)
@@ -2456,7 +2443,7 @@ regenerate: true
             j1.adapter.amplitude.data.ytPlayers[playerID].videoID     = ytpVideoID; 
 
             trackID = songIndex + 1;
-            logger.debug('\n' + `SWITCH video for PlayePreviousButton at trackID|VideoID: ${trackID}|${ytpVideoID}`);
+            logger.debug(`SWITCH video for PlayePreviousButton at trackID|VideoID: ${trackID}|${ytpVideoID}`);
             ytPlayer.loadVideoById(ytpVideoID);
 
             // delay after switch video
@@ -2480,7 +2467,6 @@ regenerate: true
 
               // set AJS play_pause button paused
               var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
-              // setPlayPauseButtonPlaying(playPauseButtonClass);
               togglePlayPauseButton(playPauseButtonClass);
             } else {
               // toggle AJS play_pause button
@@ -2497,7 +2483,7 @@ regenerate: true
             loadCoverImage(songMetaData);
 
             // update meta data
-            updatMetaContainers(songMetaData);
+            // ytpUpdatMetaContainers(songMetaData);
 
             // set song at songIndex active in playlist
             setSongActive(playlist, songIndex);
@@ -2527,60 +2513,62 @@ regenerate: true
         largePlayerSongContainer[i].addEventListener('click', function(event) {
           var activeSongSettings, playlist, playerID, playerState,
               songs, songIndex, songName, singleAudio, trackID,
-              ytPlayer, ytpVideoID;
+              ytPlayer, ytpVideoID, activeSongIndex, isSongIndexChanged;
 
           // set (current) playlist|song data
-          playlist    = this.getAttribute("data-amplitude-playlist");
-          playerID    = playlist + '_large';
-          songIndex   = parseInt(this.getAttribute("data-amplitude-song-index"));
-          trackID     = songIndex + 1;
+          playlist            = this.getAttribute("data-amplitude-playlist");
+          playerID            = playlist + '_large';
+          songIndex           = parseInt(this.getAttribute("data-amplitude-song-index"));
+          trackID             = songIndex + 1;
+          activeSongIndex     = j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex;
+          isSongIndexChanged  = (activeSongIndex !== songIndex) ? true : false;
 
           // update active song settings (manually)
           checkActiveVideoElementYTP(); 
 
-          // get active song settings (manually)
-          activeSongSettings = getActiveSong();
-
-          if (activeSongSettings) {
-            // ytpCurrentTime = activeSongSettings.currentTime;
-            if (activeSongSettings.playlist !== playlist) {
-              // set current player settings
-              songs     = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
-              ytPlayer  = j1.adapter.amplitude.data.ytPlayers[playerID].player;              
-
-              // reset previous player settings
-              if (activeSongSettings.player !== undefined) {
-                activeSongSettings.player.stopVideo();
-                var playPauseButtonClass = `large-player-play-pause-${activeSongSettings.playerID}`;
-                togglePlayPauseButton(playPauseButtonClass);                    
-              }
-            } else {
-              // set current player settings
-              songs     = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
-              ytPlayer  = j1.adapter.amplitude.data.ytPlayers[playerID].player;
-            }
-          } else {
-            // set current player settings
-            songs     = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
-            ytPlayer  = j1.adapter.amplitude.data.ytPlayers[playerID].player;
-          }
-
           // set (current) song meta data
+          songs         = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
           songMetaData  = songs[songIndex];
           songURL       = songMetaData.url;
           ytpVideoID    = songURL.split('=')[1];
-          playerState   = ytPlayer.getPlayerState();
+          // ytpVideoID = 'bloedsinn';
+          ytPlayer      = j1.adapter.amplitude.data.ytPlayers[playerID].player;
+          playerState   = ytPlayer.getPlayerState();                   
+
+          // TOGGLE state 'playing' => 'paused' if video (audio) NOT changed
+          if (playerState === YT_PLAYER_STATE.PLAYING && !isSongIndexChanged) {
+            ytPlayer.pauseVideo();
+              // get active song settings (manually)
+              activeSongSettings = getActiveSong();
 
-          // TOGGLE state 'playing'|'paused' if video (audio) NOT changed
-          var isItemChanged = (j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex !== songIndex) ? true : false;
-          if (!isItemChanged && (playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED)) {                    
+              if (activeSongSettings) {
+                // ytpCurrentTime = activeSongSettings.currentTime;
+                if (activeSongSettings.playlist !== playlist) {
+                  // set current player settings
+                  songs     = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
+                  ytPlayer  = j1.adapter.amplitude.data.ytPlayers[playerID].player;              
+
+                  // reset previous player settings
+                  // if (activeSongSettings.player !== undefined) {
+                  //   activeSongSettings.player.stopVideo();
+                  //   var playPauseButtonClass = `large-player-play-pause-${activeSongSettings.playerID}`;
+                  //   togglePlayPauseButton(playPauseButtonClass);                    
+                  // }
+                } else {
+                  // set current player settings
+                  songs     = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
+                  ytPlayer  = j1.adapter.amplitude.data.ytPlayers[playerID].player;
+                }
+              } else {
+                // set current player settings
+                songs     = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
+                ytPlayer  = j1.adapter.amplitude.data.ytPlayers[playerID].player;
+              }
 
-            if (playerState === YT_PLAYER_STATE.PLAYING) {
-              ytPlayer.pauseVideo();
               ytPlayerCurrentTime = ytPlayer.getCurrentTime();
 
               var trackID = songIndex + 1;
-              logger.debug('\n' + `PAUSE video for PlayerSongContainer on playlist|trackID: ${playlist}|${trackID} at: ${ytPlayerCurrentTime}`);
+              logger.debug(`PAUSE video for PlayerSongContainer on playlist|trackID: ${playlist}|${trackID} at: ${ytPlayerCurrentTime}`);
 
               var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
               togglePlayPauseButton(playPauseButtonClass);
@@ -2588,89 +2576,167 @@ regenerate: true
               // reset|update time settings
               resetCurrentTimeContainerYTP(ytPlayer, playlist);
               updateDurationTimeContainerYTP(ytPlayer, playlist);
-              return;               
-            }
 
-            if (playerState === YT_PLAYER_STATE.PAUSED) {
+              // update global song index (start at 0)
+              ytpSongIndex  = songIndex;
+
+              // save YT player GLOBAL data for later use (e.g. events)
+              j1.adapter.amplitude.data.activePlayer                 = 'ytp';
+              j1.adapter.amplitude.data.ytpGlobals['activeIndex']    = songIndex;
+              j1.adapter.amplitude.data.ytpGlobals['activePlaylist'] = playlist;            
+
+              // save YT player data for later use (e.g. events)
+              j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex = songIndex;
+              j1.adapter.amplitude.data.ytPlayers[playerID].videoID     = ytpVideoID;
+
+              // reset|update current time settings
+              resetCurrentTimeContainerYTP(ytPlayer, playlist);
+              updateDurationTimeContainerYTP(ytPlayer, playlist);
+              resetProgressBarYTP();
+
+              // load the song cover image
+              loadCoverImage(songMetaData);
+
+              // update meta data
+              // ytpUpdatMetaContainers(songMetaData);
+
+              // set song at songIndex active in playlist
+              setSongActive(playlist, songIndex);
+
+              // scroll song active at index in player
+              if (playerAutoScrollSongElement) {
+                scrollToActiveElement(playlist);
+              }
+
+              // save YT player data for later use (e.g. events)
+              j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex = songIndex;
+              j1.adapter.amplitude.data.ytPlayers[playerID].videoID     = ytpVideoID;   
+
+              return;
+            } // END if playerState === PLAYING
+
+            // TOGGLE state 'paused' => 'playing' if video (audio) NOT changed
+            if (playerState === YT_PLAYER_STATE.PAUSED && !isSongIndexChanged) {
               ytPlayer.playVideo();
               ytpSeekTo(ytPlayer, ytPlayerCurrentTime, true);
 
+              // get active song settings (manually)
+              activeSongSettings = getActiveSong();
+
+              if (activeSongSettings) {
+                // ytpCurrentTime = activeSongSettings.currentTime;
+                if (activeSongSettings.playlist !== playlist) {
+                  // set current player settings
+                  songs     = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
+                  ytPlayer  = j1.adapter.amplitude.data.ytPlayers[playerID].player;              
+
+                  // reset previous player settings
+                  // if (activeSongSettings.player !== undefined) {
+                  //   activeSongSettings.player.stopVideo();
+                  //   var playPauseButtonClass = `large-player-play-pause-${activeSongSettings.playerID}`;
+                  //   togglePlayPauseButton(playPauseButtonClass);                    
+                  // }
+                } else {
+                  // set current player settings
+                  songs     = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
+                  ytPlayer  = j1.adapter.amplitude.data.ytPlayers[playerID].player;
+                }
+              } else {
+                // set current player settings
+                songs     = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
+                ytPlayer  = j1.adapter.amplitude.data.ytPlayers[playerID].player;
+              }
+
               var trackID = songIndex + 1;
-              logger.debug('\n' + `PLAY video for PlayerSongContainer on playlist|trackID: ${playlist}|${trackID} at: ${ytPlayerCurrentTime}`);
+              logger.debug(`PLAY video for PlayerSongContainer on playlist|trackID: ${playlist}|${trackID} at: ${ytPlayerCurrentTime}`);
 
               var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
               togglePlayPauseButton(playPauseButtonClass);
 
+              // update meta data
+              // ytpUpdatMetaContainers(songMetaData);
+
               // reset|update time settings
               resetCurrentTimeContainerYTP(ytPlayer, playlist);
               updateDurationTimeContainerYTP(ytPlayer, playlist);
-              return;                
-            }
 
-          } // END !changedAudio
+              // set song at songIndex active in playlist
+              setSongActive(playlist, songIndex);
 
-          // update global song index (start at 0)
-          ytpSongIndex  = songIndex;
+              return;
+            } // END if playerState === PAUSED
+        
+            if (isSongIndexChanged) {
+              // load (next) video
+              // -------------------------------------------------------------------
+              trackID = songIndex + 1;
+              logger.debug(`SWITCH video for PlayerSongContainer at trackID|VideoID: ${trackID}|${ytpVideoID}`);
+              ytPlayer.loadVideoById(ytpVideoID);
 
-          // stop active AT|YT players
-          // stopAllActivePlayers(playerID);
+              // wait for API error state
+              setTimeout(() => {
+                if (j1.adapter.amplitude.data.ytpGlobals.ytApiError > 0) {
+                  var trackID = songIndex + 1;
+                  logger.error(`DISABLED player for playlist|trackID: ${playlist}|${trackID} on API error '${YT_PLAYER_ERROR_NAMES[j1.adapter.amplitude.data.ytpGlobals.ytApiError]}'`);
 
-          // save YT player GLOBAL data for later use (e.g. events)
-          j1.adapter.amplitude.data.activePlayer                 = 'ytp';
-          j1.adapter.amplitude.data.ytpGlobals['activeIndex']    = songIndex;
-          j1.adapter.amplitude.data.ytpGlobals['activePlaylist'] = playlist;            
+                  // do nothing on API errors
+                  return;
+                }
 
-          // save YT player data for later use (e.g. events)
-          j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex = songIndex;
-          j1.adapter.amplitude.data.ytPlayers[playerID].videoID     = ytpVideoID;
+                // update global song index (start at 0)
+                ytpSongIndex  = songIndex;
 
-          // reset|update current time settings
-          resetCurrentTimeContainerYTP(ytPlayer, playlist);
-          updateDurationTimeContainerYTP(ytPlayer, playlist);
-          resetProgressBarYTP();
+                // save YT player GLOBAL data for later use (e.g. events)
+                j1.adapter.amplitude.data.activePlayer                 = 'ytp';
+                j1.adapter.amplitude.data.ytpGlobals['activeIndex']    = songIndex;
+                j1.adapter.amplitude.data.ytpGlobals['activePlaylist'] = playlist;            
 
-          // load the song cover image
-          loadCoverImage(songMetaData);
+                // save YT player data for later use (e.g. events)
+                j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex = songIndex;
+                j1.adapter.amplitude.data.ytPlayers[playerID].videoID     = ytpVideoID;
 
-          // update meta data
-          updatMetaContainers(songMetaData);
+                // reset|update current time settings
+                resetCurrentTimeContainerYTP(ytPlayer, playlist);
+                updateDurationTimeContainerYTP(ytPlayer, playlist);
+                resetProgressBarYTP();
 
-          // set AJS play_pause button playing
-          var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
-          setPlayPauseButtonPlaying(playPauseButtonClass)
+                // load the song cover image
+                loadCoverImage(songMetaData);
 
-          // set song at songIndex active in playlist
-          setSongActive(playlist, songIndex);
+                // update meta data
+                // ytpUpdatMetaContainers(songMetaData);
 
-          // scroll song active at index in player
-          if (playerAutoScrollSongElement) {
-            scrollToActiveElement(playlist);
-          }
+                var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
+                togglePlayPauseButton(playPauseButtonClass);
 
-          // save YT player data for later use (e.g. events)
-          j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex = songIndex;
-          j1.adapter.amplitude.data.ytPlayers[playerID].videoID     = ytpVideoID;          
+                // set song at songIndex active in playlist
+                setSongActive(playlist, songIndex);
 
-          // load next video
-          // -------------------------------------------------------------------
-          trackID = songIndex + 1;
-          logger.debug('\n' + `SWITCH video for PlayerSongContainer at trackID|VideoID: ${trackID}|${ytpVideoID}`);
-          ytPlayer.loadVideoById(ytpVideoID);
+                // scroll song active at index in player
+                if (playerAutoScrollSongElement) {
+                  scrollToActiveElement(playlist);
+                }
 
-          // mute sound after next video load
-          // -------------------------------------------------------------------
-          if (muteAfterVideoSwitchInterval) {
-            ytPlayer.mute();
-            setTimeout(() => {
-              ytPlayer.unMute();
-            }, muteAfterVideoSwitchInterval);
-          }
+                // save YT player data for later use (e.g. events)
+                j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex = songIndex;
+                j1.adapter.amplitude.data.ytPlayers[playerID].videoID     = ytpVideoID;   
+
+                // mute sound after next video load
+                // -------------------------------------------------------------------
+                if (muteAfterVideoSwitchInterval) {
+                  ytPlayer.mute();
+                  setTimeout(() => {
+                    ytPlayer.unMute();
+                  }, muteAfterVideoSwitchInterval);
+                }
+              }, 100);
+            } // END if isSongIndexChanged
 
-          // deactivate AJS events (if any)
-          event.stopImmediatePropagation();           
-        }); // END EventListener 'click' SongContainer
-      } // END ifSWITCH video
-    } // END for
+            // deactivate AJS events (if any)
+            event.stopImmediatePropagation();           
+        }); // END EventListener
+      } // END if classString
+    } // END for largePlayerSongContainer
 
     // add listeners to all progress bars found
     // TODO: Fix for multiple players in page
@@ -2756,7 +2822,9 @@ regenerate: true
             var playerID      = sliderID.split('volume_slider_')[1];
 
             // save YT player data for later use (e.g. events)
-            // j1.adapter.amplitude.data.ytPlayers[playerID].volumeSlider = volumeSlider;
+            if (volumeSlider.dataset.amplitudeSource === 'youtube') {
+              j1.adapter.amplitude.data.ytPlayers[playerID].volumeSlider = volumeSlider;
+            }
 
             volumeSliders[i].addEventListener('click', function(event) {
 
@@ -2808,9 +2876,6 @@ regenerate: true
           var sliderID  = volumeMutes[i].id;
           var playerID  = sliderID.split('amplitude-mute_')[1];
 
-          // save YT player data for later use (e.g. events)
-          // j1.adapter.amplitude.data.ytPlayers[playerID].volumMute = volumMute;
-
           volumeMutes[i].addEventListener('click', function(event) {
 
             // update active song settings (manually)
@@ -2848,8 +2913,7 @@ regenerate: true
 
   } // END if playerSettings.type 'large'
 
- }
-
+ } // END if j1.adapter.amplitude['data']['ytPlayers'][ytPlayerID] !== undefined
 } // END mimikYTPlayerUiEventsForAJS
 
 {%- endcapture -%}