j1-template 2024.3.22 → 2024.3.23

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.33.js
+ # ~/assets/theme/j1/modules/amplitudejs/js/plugins/tech/ytp.35.js
  # AmplitudeJS V5 Tech for J1 Template
  #
  # Product/Info:
@@ -60,7 +60,7 @@ regenerate: true
 
 /*
  # -----------------------------------------------------------------------------
- # ~/assets/theme/j1/modules/amplitudejs/js/plugins/tech/ytp.33.js
+ # ~/assets/theme/j1/modules/amplitudejs/js/plugins/tech/ytp.35.js
  # AmplitudeJS V5 Plugin|Tech for J1 Template
  #
  # Product/Info:
@@ -74,6 +74,8 @@ regenerate: true
 */
 "use strict";
 
+  const isDev = (j1.env === "development" || j1.env === "dev") ? true : false;
+
   // date|time monitoring
   //----------------------------------------------------------------------------
   var startTime;
@@ -130,6 +132,7 @@ regenerate: true
   // ---------------------------------------------------------------------------
   var firstScriptTag;
   var ytPlayer;
+  var ytPlayerErrorTest               = false;
   var ytPlayerReady                   = false;
   var ytApiReady                      = false;
   var logger                          = log4javascript.getLogger('j1.adapter.amplitude.tech');
@@ -176,10 +179,7 @@ regenerate: true
   var playerType;
   var playListTitle;
   var playListName;
-  var amplitudePlayerState;
-
-  var ytPlayer;
-  
+  var amplitudePlayerState; 
   
   var songs;
   var songMetaData;
@@ -242,10 +242,12 @@ regenerate: true
   // TODO: 
   // ---------------------------------------------------------------------------
   function processOnVideoEnd(player) {
-    var currentVideoTime,
-        playlist, playerID, songIndex, songs,
+    var currentVideoTime, activeSong,
+        playlist, playerID, songIndex, songs, playlistRepeat,
         trackID, activeVideoID, previousVideoID, isVideoChanged;
 
+    activeSong = getActiveSong();
+
     playlist            = activeVideoElement.playlist;
     playerID            = playlist + '_large';
     currentVideoTime    = player.getCurrentTime();
@@ -254,6 +256,7 @@ regenerate: true
     songIndex           = activeVideoElement.index;
     trackID             = songIndex + 1;
     songs               = activeVideoElement.songs;
+    playlistRepeat      = (songs[songIndex].repeat === 'true') ? true : false;
 
     // check if video is changed (to detect multiple videoIDs in playlist)
     if (songIndex > 0) {
@@ -271,13 +274,26 @@ regenerate: true
       });
     } // END if playerFadeAudio
 
-    // if (!activeVideoElement.audio_single) {
     if (isVideoChanged) {
-      // load next video
-      logger.debug(`LOAD next VIDEO on processOnVideoEnd at trackID|playlist: ${trackID}|${playlist}`);
-      loadNextVideo(playlist, songIndex);
+      if (songIndex === songs.length - 1) {
+        // LAST index reached, continue on FIRST index
+        songIndex = 0;
+
+        logger.debug(`LOAD first VIDEO on processOnVideoEnd at trackID|playlist: ${trackID}|${playlist}`);
+        loadVideo(playlist, songIndex);
+
+        // check if REPEAT is enabled on PLAYLIST
+        if (!playlistRepeat) {
+          // set FIRST song (video) paused if playing is continued
+          ytPlayer.pauseVideo();
+        } 
+      } else {
+        // load next video
+        logger.debug(`LOAD next VIDEO on processOnVideoEnd at trackID|playlist: ${trackID}|${playlist}`);
+        loadVideo(playlist, songIndex + 1);
+      }
     } else {
-      // skip loading next video if a single video is used for playlist
+      // skip loading next video if a SINGLE video is used for playlist
       logger.debug(`LOAD next TRACK in video on processOnVideoEnd at trackID|playlist: ${trackID}|${playlist}`);
     }
 
@@ -290,9 +306,9 @@ regenerate: true
   // ---------------------------------------------------------------------------
   function doNothingOnStateChange(state) {
     if (state > 0) {
-      logger.warn(`DO NOTHING on StateChange for state: ${YT_PLAYER_STATE_NAMES[state]}`);
+      isDev && logger.warn(`DO NOTHING on StateChange for state: ${YT_PLAYER_STATE_NAMES[state]}`);
     } else {
-      logger.warn(`DO NOTHING on StateChange for state: ${YT_PLAYER_STATE_NAMES[6]}`);
+      isDev && logger.warn(`DO NOTHING on StateChange for state: ${YT_PLAYER_STATE_NAMES[6]}`);
     }
   } // END doNothingOnStateChange
 
@@ -302,37 +318,45 @@ regenerate: true
   // wrapper for processing players on state PLAYING 
   // ---------------------------------------------------------------------------
   function processOnStateChangePlaying(event, playlist, songIndex) {
-    var activeSong, activePlaylist, playerID, videoID,
-        ytPlayer, songs, songIndex,
-        currentPlayer, previousPlayer, trackID;
-
-    ytPlayer = event.target;
+    var activeSong, activePlaylist,
+        playerID, videoID, firstVideo,
+        ytPlayer, songs, songIndex, previousSongIndex,
+        currentPlayer, previousPlayer,
+        trackID, isSongIndexChanged;
 
-    // update active song settings (manually)
-    checkActiveVideoElementYTP(); 
+    ytPlayer   = event.target;
+    firstVideo = (songIndex > 0) ? false : true;
 
-    // get active song settings (manually)
     activeSong      = getActiveSong();
-    
     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}`);
+    logger.debug(`PLAY audio on YT Player at playlist|trackID: ${activePlaylist}|${trackID}`);
 
     // 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['videoID']     = videoID;
 
+
     // save YT player data for later use (e.g. events)
-    j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex = songIndex;
+    // -------------------------------------------------------------------------
+    j1.modules.amplitudejs.data.activePlayer = 'ytp';
+    j1.modules.amplitudejs.data.activeIndex = songIndex;
+    j1.modules.amplitudejs.data.activePlaylist = playlist;
+    j1.modules.amplitudejs.data.ytp.activePlayer = ytPlayer;
+    j1.modules.amplitudejs.data.ytp.activeIndex = songIndex;
+    j1.modules.amplitudejs.data.ytp.activePlaylist = playlist;
+    j1.modules.amplitudejs.data.ytp.players[playerID].activeIndex = songIndex;
+    j1.modules.amplitudejs.data.ytp.players[playerID].player = ytPlayer;
+    j1.modules.amplitudejs.data.ytp.players[playerID].videoID = videoID;
+
 
     // update time container for the ACTIVE video
     // -----------------------------------------------------------------
@@ -435,16 +459,44 @@ regenerate: true
   //
   // ---------------------------------------------------------------------------
   function processOnStateChangeEnded(event, playlist, songIndex) {
-    var videoID = event.target.options.videoId;
-    var trackID = songIndex + 1;
+    var videoID         = event.target.options.videoId;
+    var trackID         = songIndex + 1;
+    var playerID        = playlist + '_large';
+    var songs           = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
+    var songMetaData    = songs[songIndex];
+    var playlistRepeat  = (songMetaData.repeat === 'true') ? true : false;
+ 
+    if (songIndex === songs.length - 1) {
+      // LAST index reached, continue on FIRST index
+      songIndex = 0;
+
+      // save player current time data for later use
+      // ytPlayerCurrentTime = ytPlayer.getCurrentTime();
 
-    // save player current time data for later use
-    ytPlayerCurrentTime = ytPlayer.getCurrentTime();
+      // save YT player data for later use (e.g. events)
+      // ---------------------------------------------------------------------
+      j1.modules.amplitudejs.data.ytp.previousIndex = songIndex;  
+
+      logger.debug(`LOAD first VIDEO on processOnStateChangeEnded at trackID|playlist: ${trackID}|${playlist}`);
+      loadVideo(playlist, songIndex);
+
+      // check if REPEAT is enabled on PLAYLIST
+      if (!playlistRepeat) {
+        // set FIRST song (video) paused if playing is continued
+        ytPlayer.pauseVideo();
+      } 
+    } else {
+      // save player current time data for later use
+      // ytPlayerCurrentTime = ytPlayer.getCurrentTime();
 
-    logger.debug(`NEXT video on StateChange at trackID|VideoID: ${trackID}|${videoID}`);
+      // save YT player data for later use (e.g. events)
+      // ---------------------------------------------------------------------
+      j1.modules.amplitudejs.data.ytp.previousIndex = songIndex;        
 
-    // load NEXT song (video) in playlist
-    loadNextVideo(playlist, songIndex);
+      // load next video
+      logger.debug(`LOAD next VIDEO on processOnStateChangeEnded at trackID|playlist: ${trackID}|${playlist}`);
+      loadVideo(playlist, songIndex + 1);
+    }
 
   } // END processOnStateChangeEnded
 
@@ -547,7 +599,7 @@ regenerate: true
     // transition will be
     const iterationSteps = {
       'default':  150,
-      'slow': 	  250,
+      'slow':     250,
       'slower':   350,
       'slowest':  500
     };
@@ -558,7 +610,7 @@ regenerate: true
     currentStep   = 1;
 
     if (volumeSlider === undefined || volumeSlider === null) {
-      logger.warn('no volume slider found at playerID: ' + settings.playerID);
+      isDev && logger.warn('no volume slider found at playerID: ' + settings.playerID);
       return;
     }
 
@@ -594,7 +646,7 @@ regenerate: true
     // number of iteration steps to DECREASE the volume
     const iterationSteps = {
       'default':  150,
-      'slow': 	  250,
+      'slow':     250,
       'slower':   350,
       'slowest':  500
     };
@@ -606,7 +658,7 @@ regenerate: true
     currentStep   = 0;
 
     if (volumeSlider === undefined || volumeSlider === null) {
-      logger.warn('no volume slider found at playerID: ' + settings.playerID);
+      isDev && logger.warn('no volume slider found at playerID: ' + settings.playerID);
       return;
     }
 
@@ -642,92 +694,47 @@ regenerate: true
   }
 
   // ---------------------------------------------------------------------------
-  // loadNextVideo(list, index)
+  // loadVideo(list, index)
   //
   // load next video in playlist
   // ---------------------------------------------------------------------------
-  function loadNextVideo(currentPlaylist, currentIndex) {
-    var activeSongSettings, trackID, songName, playlist, playerID, playerIFrame,
-        songs, songIndex, songMetaData, songURL, ytpVideoID;
-
-    // update active song settings (manually)
-    checkActiveVideoElementYTP();   
+  function loadVideo(currentPlaylist, currentIndex) {
+    var activeSong, trackID, songName,
+        playlist, playerID, playerIFrame,
+        songs, songIndex, songMetaData, songURL,
+        ytpVideoID, firstVideo, playlistRepeat;
 
-    // get active song settings (manually)
-    activeSongSettings = getActiveSong();  
-
-    playlist    = currentPlaylist;
-    playerID    = playlist + '_large';
-    songs       = activeSongSettings.songs;
-    ytPlayer    = activeSongSettings.player;
-    songIndex   = currentIndex;
-    trackID     = songIndex + 1;
-
-    songIndex++;
-
-    ytpSongIndex  = songIndex;
+    activeSong      = getActiveSong();
+    playlist        = currentPlaylist;
+    playerID        = playlist + '_large';
+    songs           = activeSong.songs;
+    playlistRepeat  = (songs[currentIndex].repeat === 'true') ? true : false;
+    ytPlayer        = activeSong.player;
+    songIndex       = currentIndex;
+    trackID         = songIndex + 1;
     
-    // play sonng (video) in playlist 
+    // switch|play to songIndex in playlist
     if (songIndex <= songs.length - 1) {
       songMetaData  = songs[songIndex];
       songURL       = songMetaData.url;
-      ytVideoID     = songURL.split('=')[1];
+      ytpVideoID    = songURL.split('=')[1];
 
       // 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     = ytVideoID;      
-
-      logger.debug(`SWITCH video on loadNextVideo at trackID|VideoID: ${trackID}|${ytVideoID}`);
-      ytPlayer.loadVideoById(ytVideoID);
-
-      // delay after switch video
-      if (muteAfterVideoSwitchInterval) {
-        ytPlayer.mute();
-        setTimeout(() => {
-          ytPlayer.unMute();
-        }, muteAfterVideoSwitchInterval);
-      }
-
-      // update global song index
-      ytpSongIndex = songIndex;
-
-      // load the song cover image
-      loadCoverImage(songMetaData);
-
-      // update meta data
-      // ytpUpdatMetaContainers(songMetaData);
-  
-      // set song (video) active at index in playlist
-      setSongActive(playlist, songIndex);
-
-      // reset progress bar settings
-      resetProgressBarYTP();
-
-      // scroll song active at index in player
-      if (playerAutoScrollSongElement) {
-        scrollToActiveElement(playlist);
-      }
-    } else {
-      // continue on FIRST track (video) in playlist
-      //
-      songIndex         = 0;
-      var songMetaData  = songs[songIndex];
-      var songURL       = songMetaData.url;
-      var ytVideoID     = songURL.split('=')[1];
-
-      // update global song index
-      ytpSongIndex = songIndex;
+      j1.adapter.amplitude.data.ytPlayers[playerID].videoID     = ytpVideoID;
 
-      // load next video (paused)
-      // -----------------------------------------------------------------------
 
       // 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; 
+      // -----------------------------------------------------------------------
+      j1.modules.amplitudejs.data.ytp.previousSongIndex = songIndex;
+      j1.modules.amplitudejs.data.ytp.players[playerID].activeIndex = songIndex;
+      j1.modules.amplitudejs.data.ytp.players[playerID].previousIndex = songIndex - 1;
+      j1.modules.amplitudejs.data.ytp.players[playerID].videoID = ytpVideoID;
 
-      logger.debug(`SWITCH video on loadNextVideo at trackID|VideoID: ${trackID}|${ytVideoID}`);
-      ytPlayer.loadVideoById(ytVideoID);
 
+      logger.debug(`SWITCH video on loadNextVideo at trackID|VideoID: ${trackID}|${ytpVideoID}`);
+      ytPlayer.loadVideoById(ytpVideoID);
+     
       // delay after switch video
       if (muteAfterVideoSwitchInterval) {
         ytPlayer.mute();
@@ -736,15 +743,17 @@ regenerate: true
         }, muteAfterVideoSwitchInterval);
       }
 
+      // save YT player data for later use (e.g. events)
+      // -----------------------------------------------------------------------
+      ytpSongIndex = songIndex;
+      j1.modules.amplitudejs.data.ytp.songIndex = songIndex;
+
       // load the song cover image
       loadCoverImage(songMetaData);
-  
+
       // update meta data
       // ytpUpdatMetaContainers(songMetaData);
   
-      var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
-      togglePlayPauseButton(playPauseButtonClass);
-
       // set song (video) active at index in playlist
       setSongActive(playlist, songIndex);
 
@@ -756,12 +765,9 @@ regenerate: true
         scrollToActiveElement(playlist);
       }
 
-      // TODO: check if SHUFFLE is enabled on PLAYLIST (PLAYER ???)
-      // set FIRST song (video) paused
-      ytPlayer.pauseVideo();
-    }
+    } // END if songIndex
 
-  } // END loadVideo
+  } // END loadNextVideo
 
   // ---------------------------------------------------------------------------
   // initUiEventsForAJS
@@ -833,7 +839,6 @@ regenerate: true
 
           // load individual player settings (to manage multiple players in page)
           //
-          var ytpVideoID  = activeSongMetadata.url.split('=')[1];
           var ytpAutoPlay = ('{{player.yt_player.autoplay}}'.length > 0) ? '{{player.yt_player.autoplay}}'  : '{{amplitude_defaults.player.yt_player.autoplay}}';
           var ytpLoop     = ('{{player.yt_player.loop}}'.length > 0)     ? '{{player.yt_player.loop}}'      : '{{amplitude_defaults.player.yt_player.loop}}';
           var ytpHeight   = ('{{player.yt_player.height}}'.length > 0)   ? '{{player.yt_player.height}}'    : '{{amplitude_defaults.player.yt_player.height}}';
@@ -842,17 +847,17 @@ regenerate: true
           logger.info('AJS YouTube iFrame API: ready');
           logger.info('configure player on ID: #{{player.id}}');
 
-          // create a hidden YT Player iFrame container
+          // create a (hidden) ytp iframe container
           //
           ytpContainer                = document.getElementById('{{player.id}}_video');
           ytpContainer.innerHTML      = '<div id="iframe_{{player.id}}"></div>';
           ytpContainer.style.cssText  = 'display:none';
 
+          var ytpVideoID = (ytPlayerErrorTest) ? 'invalidVideoID' : activeSongMetadata.url.split('=')[1];
           ytPlayer = new YT.Player('iframe_{{player.id}}', {
             height:             ytpHeight,
             width:              ytpWidth,
             videoId:            ytpVideoID,
-            // videoId:         'bloedsinn',
             playerVars: {
               autoplay:         ytpAutoPlay,
               loop:             ytpLoop
@@ -885,7 +890,13 @@ regenerate: true
 
           // save YT player GLOBAL data for later use (e.g. events)
           j1.adapter.amplitude.data.ytpGlobals['ytApiReady'] = ytApiReady;
-          
+
+
+          // save amplitudejs data for later use (e.g. events)
+          // -------------------------------------------------------------------
+          j1.modules.amplitudejs.data.ytp.apiReady = ytApiReady;
+
+
           // reset current player
           playerExistsInPage = false;
 
@@ -905,6 +916,12 @@ regenerate: true
           // save YT player GLOBAL data for later use (e.g. events)
           j1.adapter.amplitude.data.ytpGlobals['ytApiError'] = eventData;
 
+
+          // save amplitudejs data for later use (e.g. events)
+          // ------------------------------------------------------------------
+          j1.modules.amplitudejs.data.ytp.apiError = eventData;
+
+
         }
 
         // AJS YouTube Player initialization fired by the YT API
@@ -918,7 +935,7 @@ regenerate: true
           ytPlayerReady       = true;
           playerVolumePreset  = parseInt({{player.volume_slider.preset_value}});
 
-            logger.debug(`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');
@@ -943,12 +960,20 @@ regenerate: true
             }
           }
 
-          logger.info('AJS YouTube Player on ID {{player.id}}: ready');
+          logger.info('yt player on ID {{player.id}}: ready');
 
           // save YT player GLOBAL data for later use (e.g. events)
           j1.adapter.amplitude.data.ytpGlobals['ytPlayerReady'] = ytPlayerReady;
           j1.adapter.amplitude.data.ytpGlobals['ytApiError']    = 0;          
 
+
+          // save amplitudejs data for later use (e.g. events)
+          // -------------------------------------------------------------------
+          j1.modules.amplitudejs.data.ytp.apiError = 0;
+          j1.modules.amplitudejs.data.ytp.players.{{player.id}} = {};
+          j1.modules.amplitudejs.data.ytp.players.{{player.id}}.playerReady = ytPlayerReady;
+
+
           // get duration hours (if configured)
           if ({{player.display_hours}} ) {
             hours = ytpGetDurationHours(ytPlayer);
@@ -984,7 +1009,7 @@ regenerate: true
           if (playerCounter > 0) {
             logger.info('Found players of type video (YTP) in page: ' + playerCounter);
           } else {
-            logger.warn('Found NO players of type video (YTP) in page');
+            isDev && logger.warn('Found NO players of type video (YTP) in page');
           }
 
           // update activeVideoElement data structure for the ACTIVE video
@@ -1034,6 +1059,19 @@ regenerate: true
           j1.adapter.amplitude.data.ytPlayers.{{player.id}}.player      = ytPlayer;
           j1.adapter.amplitude.data.ytPlayers.{{player.id}}.activeIndex = songIndex;
 
+
+          // save amplitudejs data for later use (e.g. events)
+          // -------------------------------------------------------------------
+          j1.modules.amplitudejs.data.activePlayer = 'ytp';
+          j1.modules.amplitudejs.data.activeIndex = songIndex;
+          j1.modules.amplitudejs.data.activePlaylist = playlist;          
+          j1.modules.amplitudejs.data.ytp.activePlayer = ytPlayer;
+          j1.modules.amplitudejs.data.ytp.activeIndex = songIndex;
+          j1.modules.amplitudejs.data.ytp.activePlaylist = playlist;
+          j1.modules.amplitudejs.data.ytp.players.{{player.id}}.player = ytPlayer;
+          j1.modules.amplitudejs.data.ytp.players.{{player.id}}.activeIndex = songIndex;
+
+
           // reset time container|progressbar for the ACTIVE song (video)
           // -------------------------------------------------------------------          
           resetCurrentTimeContainerYTP(ytPlayer, playlist);
@@ -1083,6 +1121,13 @@ regenerate: true
   // ---------------------------------------------------------------------------
   initYtAPI();
 
+  // save YT player data for later use (e.g. events)
+  // ---------------------------------------------------------------------
+  var url = '//youtube.com/iframe_api'
+  if (document.querySelectorAll(`script[src="${url}"]`).length > 0) {
+    j1.modules.amplitudejs.data.ytp.plugin = 'loaded';
+  }
+
   // ---------------------------------------------------------------------------
   // initUiEventsForAJS
   //
@@ -1214,7 +1259,8 @@ regenerate: true
 
         // toggle PlayPause buttons playing => puased
         // ---------------------------------------------------------------------
-        if (ytPlayerState === 'playing' || ytPlayerState === 'paused') {
+        var isValidPlayerState = /playing|paused/.test(ytPlayerState);
+        if (isValidPlayerState) {
           logger.debug(`STOP player at ytpStopParallelActivePlayers for id: ${ytPlayerID}`);
           player.stopVideo();
           var ytpButtonPlayerPlayPause = document.getElementsByClassName("large-player-play-pause-" + ytPlayerID);
@@ -1447,25 +1493,13 @@ regenerate: true
   function updateDurationTimeContainerYTP(player, playlist) {
     var hours, minutes, seconds;
     var durationHours, durationMinutes, durationSeconds;
-    var activeSongSettings, ytPlayer, activePlaylist;
-
-    // update active song settings (manually)
-    checkActiveVideoElementYTP(); 
-
-    // get active song settings (manually)
-    activeSongSettings = getActiveSong();
-    if (!activeSongSettings) {
-      return false;
-    }
-
-    ytPlayer        = activeSongSettings.player;
-    activePlaylist  = activeSongSettings.playlist;
+    var activePlaylist;
 
     // get current hours|minutes|seconds
     // -------------------------------------------------------------------------
-    hours   = ytpGetDurationHours(ytPlayer);
-    minutes = ytpGetDurationMinutes(ytPlayer);
-    seconds = ytpGetDurationSeconds(ytPlayer);
+    hours   = ytpGetDurationHours(player);
+    minutes = ytpGetDurationMinutes(player);
+    seconds = ytpGetDurationSeconds(player);
 
     // update current duration|hours
     // -------------------------------------------------------------------------
@@ -1473,7 +1507,7 @@ regenerate: true
     if (durationHours.length && !isNaN(hours)) {
       for (var i=0; i<durationHours.length; i++) {    
         var currentPlaylist = durationHours[i].dataset.amplitudePlaylist;
-        if (currentPlaylist === activePlaylist) {
+        if (currentPlaylist === playlist) {
           durationHours[i].innerHTML = hours;
         }
       }
@@ -1485,7 +1519,7 @@ regenerate: true
     if (durationMinutes.length && !isNaN(minutes)) {
       for (var i=0; i<durationMinutes.length; i++) {    
         var currentPlaylist = durationMinutes[i].dataset.amplitudePlaylist;
-        if (currentPlaylist === activePlaylist) {
+        if (currentPlaylist === playlist) {
           durationMinutes[i].innerHTML = minutes;
         }
       }
@@ -1497,7 +1531,7 @@ regenerate: true
     if (durationSeconds.length && !isNaN(seconds)) {
       for (var i=0; i<durationSeconds.length; i++) {    
         var currentPlaylist = durationSeconds[i].dataset.amplitudePlaylist;
-        if (currentPlaylist === activePlaylist) {
+        if (currentPlaylist === playlist) {
           durationSeconds[i].innerHTML = seconds;
         }
       }
@@ -1749,10 +1783,13 @@ regenerate: true
   // Returns the duration of the video
   // ---------------------------------------------------------------------------
   function ytpGetDuration(player) {
-    var playerState, duration;
+    var duration;
 
-    playerState = player.getPlayerState();
-    if (playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.BUFFERING || playerState === YT_PLAYER_STATE.PAUSED || playerState === YT_PLAYER_STATE.CUED) {
+    var playerState   = player.getPlayerState();
+    var ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
+
+    var isValidPlayerState = /playing|paused|buffering|cued/.test(ytPlayerState);
+    if (isValidPlayerState) {
       duration = player.getDuration();
 
       return duration;
@@ -1767,18 +1804,20 @@ regenerate: true
   // Returns the current time of the video played
   // ---------------------------------------------------------------------------
   function ytpGetCurrentTime(player) {
-    var currentTime, playerState;
+    var currentTime;
+
+    var playerState   = player.getPlayerState();
+    var ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
 
-    if (player !== undefined && player.getPlayerState !== undefined) {
-      playerState = player.getPlayerState();
-      if (playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED || playerState === YT_PLAYER_STATE.CUED) {
+    var isValidPlayerState = /playing|paused|cued|unstarted/.test(ytPlayerState);
+    if (isValidPlayerState) {
         currentTime = player.getCurrentTime();
 
         return currentTime;
-      } else {
+    } else {
         return 0;
-      }
     }
+
   } // END ytpGetCurrentTime
 
   // ---------------------------------------------------------------------------
@@ -1787,21 +1826,23 @@ regenerate: true
   // Returns the duration hours of the video
   // ---------------------------------------------------------------------------
   function ytpGetDurationHours(player) {
-    var playerState, duration, hours, d, h;
+    var duration, hours, d, h;
+
+    var playerState   = player.getPlayerState();
+    var ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
 
-    if (player !== undefined && player.getPlayerState !== undefined) {
-      playerState = player.getPlayerState();
-      if (playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED || playerState === YT_PLAYER_STATE.CUED ) {
+    var isValidPlayerState = /playing|paused|cued/.test(ytPlayerState);
+    if (isValidPlayerState) {
         duration  = ytpGetDuration(player);
         d         = Number(duration);
         h         = Math.floor(d / 3600);
         hours     = h.toString().padStart(2, '0');
 
         return hours;
-      } else {
+    } else {
         return '00';
-      }
     }
+
   } // END ytpGetDurationHours
 
   // ---------------------------------------------------------------------------
@@ -1810,21 +1851,23 @@ regenerate: true
   // Returns the duration minutes of the video
   // ---------------------------------------------------------------------------
   function ytpGetDurationMinutes(player) {
-    var playerState, duration, minutes, d, m;
+    var duration, minutes, d, m;
 
-    if (player !== undefined && player.getPlayerState !== undefined) {
-      playerState = player.getPlayerState();
-      if (playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED || playerState === YT_PLAYER_STATE.CUED) {
+    var playerState   = player.getPlayerState();
+    var ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
+
+    var isValidPlayerState = /playing|paused|cued/.test(ytPlayerState);
+    if (isValidPlayerState) {
         duration  = ytpGetDuration(player);
         d         = Number(duration);
         m         = Math.floor(d % 3600 / 60);
         minutes   = m.toString().padStart(2, '0');
 
         return minutes;
-      } else {
+    } else {
         return '00';
-      }
     }
+
   } // END ytpGetDurationMinutes
 
   // ---------------------------------------------------------------------------
@@ -1833,21 +1876,23 @@ regenerate: true
   // Returns the duration seconds of the video
   // ---------------------------------------------------------------------------
   function ytpGetDurationSeconds(player) {
-    var playerState, duration, seconds, d, s;
+    var duration, seconds, d, s;
 
-    if (player !== undefined && player.getPlayerState !== undefined) {
-      playerState = player.getPlayerState();
-      if (playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED || playerState === YT_PLAYER_STATE.CUED ) {
+    var playerState   = player.getPlayerState();
+    var ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
+
+    var isValidPlayerState = /playing|paused|cued/.test(ytPlayerState);
+    if (isValidPlayerState) {
         duration  = ytpGetDuration(player);
         d         = Number(duration);
         s         = Math.floor(d % 60);
         seconds   = s.toString().padStart(2, '0');
 
         return seconds;
-      } else {
+    } else {
         return '00';
-      }
     }
+
   } // END ytpGetDurationSeconds
 
   // ---------------------------------------------------------------------------
@@ -1856,21 +1901,23 @@ regenerate: true
   // Returns the current hours the user is into the video
   // ---------------------------------------------------------------------------
   function ytpGetCurrentHours(player) {
-    var playerState, currentTime, hours, d, h;
+    var currentTime, hours, d, h;
+
+    var playerState   = player.getPlayerState();
+    var ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
 
-    if (player !== undefined && player.getPlayerState !== undefined) {
-      playerState = player.getPlayerState();
-      if (playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED || playerState === YT_PLAYER_STATE.CUED) {
+    var isValidPlayerState = /playing|paused/.test(ytPlayerState);
+    if (isValidPlayerState) {
         currentTime = ytpGetCurrentTime(player);
         d           = Number(currentTime);
         h           = Math.floor(d / 3600);
         hours       = h.toString().padStart(2, '0');
 
         return hours;
-      } else {
+    } else {
         return '00';
-      }
     }
+
   } // END ytpGetCurrentHours
 
   // ---------------------------------------------------------------------------
@@ -1879,21 +1926,23 @@ regenerate: true
   // Returns the current minutes the user is into the video
   // ---------------------------------------------------------------------------
   function ytpGetCurrentMinutes (player) {
-    var playerState, currentTime, minutes, d, m;
+    var currentTime, minutes, d, m;
+
+    var playerState   = player.getPlayerState();
+    var ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
 
-    if (player !== undefined && player.getPlayerState !== undefined) {
-      playerState = player.getPlayerState();
-      if (playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED || playerState === YT_PLAYER_STATE.CUED) {
+    var isValidPlayerState = /playing|paused/.test(ytPlayerState);
+    if (isValidPlayerState) {
         currentTime = ytpGetCurrentTime(player);
         d           = Number(currentTime);
         m           = Math.floor(d % 3600 / 60);
         minutes     = m.toString().padStart(2, '0');
 
         return minutes;
-      } else {
+    } else {
         return '00';
-      }
     }
+
   } // END ytpGetCurrentMinutes
 
   // ---------------------------------------------------------------------------
@@ -1902,21 +1951,23 @@ regenerate: true
   // Returns the current seconds the user is into the video
   // ---------------------------------------------------------------------------
   function ytpGetCurrentSeconds(player) {
-    var playerState, currentTime, seconds, d, s;
+    var currentTime, seconds, d, s;
+
+    var playerState   = player.getPlayerState();
+    var ytPlayerState = YT_PLAYER_STATE_NAMES[playerState];
 
-    if (player !== undefined && player.getPlayerState !== undefined) {
-      playerState = player.getPlayerState();
-      if (playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED || playerState === YT_PLAYER_STATE.CUED ) {
+    var isValidPlayerState = /playing|paused/.test(ytPlayerState);
+    if (isValidPlayerState) {
         currentTime = ytpGetCurrentTime(player);
         d           = Number(currentTime);
         s           = Math.floor(d % 60);
         seconds     = s.toString().padStart(2, '0');
 
         return seconds;
-      } else {
+    } else {
         return '00';
-      }
     }
+
   } // END ytpGetCurrentSeconds
 
   // ---------------------------------------------------------------------------
@@ -2031,8 +2082,7 @@ regenerate: true
           });
         }          
 
-        // Overload AJS play_pause button for YT
-        // TODO: Fix for multiple players in page
+        // Overload ytp play_pause button for YT
         // ---------------------------------------------------------------------
         var largePlayerPlayPauseButton = document.getElementsByClassName(playerButton);
         for (var i=0; i<largePlayerPlayPauseButton.length; i++) {          
@@ -2041,36 +2091,25 @@ regenerate: true
 
           if (classString.includes(ytPlayerID)) {
             largePlayerPlayPauseButton[i].addEventListener('click', function(event) {
-              var activeSongSettings, songs, songMetaData, playerData,
+              var activeSong, songs, songMetaData, playerData,
                   ytPlayer, playerState, ytPlayerState, playlist,
                   playerID, songIndex;
 
-              playlist            = this.getAttribute("data-amplitude-playlist");
-              playerID            = playlist + '_large';
+              playlist    = this.getAttribute("data-amplitude-playlist");
+              playerID    = playlist + '_large';
+              activeSong  = getActiveSong();
 
-              // update active song settings (manually)
-              checkActiveVideoElementYTP();
-
-              // get active song settings (manually)
-              activeSongSettings  = getActiveSong();
-              if (!activeSongSettings) {
+              if (!activeSong) {
                 songIndex     = 0;
                 ytpSongIndex  = 0;
               } else {
-                if (activeSongSettings.playlist !== playlist) {
+                if (activeSong.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);                    
-                  // }
                 } else {
                   songIndex = ytpSongIndex;
                 }
-              } // END if activeSongSettings
+              } // END if activeSong
 
               if (j1.adapter.amplitude.data.ytpGlobals.ytApiError > 0) {
                 // do nothing on API errors
@@ -2080,20 +2119,10 @@ regenerate: true
                 return;
               }
 
-              // update activeAudio data (manually)
-              checkActiveVideoElementYTP();
-
-              // get active song settings (manually)
-              // activeSongSettings  = getActiveSong();
-
               playerData    = j1.adapter.amplitude.data.ytPlayers[playerID];
               ytPlayer      = playerData.player;
               songIndex     = playerData.activeIndex;
-              songs         = playerData.songs;
-
-              // update meta data
-              // songMetaData = songs[songIndex];
-              // ytpUpdatMetaContainers(songMetaData);              
+              songs         = playerData.songs;           
 
               // save player GLOBAL data for later use (e.g. events)
               j1.adapter.amplitude.data.activePlayer                 = 'ytp';
@@ -2105,44 +2134,12 @@ regenerate: true
               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 playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
-                togglePlayPauseButton(playPauseButtonClass);
-
-                // reset|update time settings
-                resetCurrentTimeContainerYTP(ytPlayer, playlist);
-                updateDurationTimeContainerYTP(ytPlayer, playlist);                
-              }
-
-              // TOGGLE state 'paused' => 'playing'
-              if (ytPlayerState === 'paused') {
-                ytPlayer.playVideo();
-                ytpSeekTo(ytPlayer, ytPlayerCurrentTime, true);
-
-                var trackID =  songIndex + 1;
-                logger.debug(`PLAY video for PlayPauseButton on playlist|trackID: ${playlist}|${trackID} at: ${ytPlayerCurrentTime}`);
-
-                var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
-                togglePlayPauseButton(playPauseButtonClass);
-
-                // reset|update time settings
-                resetCurrentTimeContainerYTP(ytPlayer, playlist);
-                updateDurationTimeContainerYTP(ytPlayer, playlist);                  
-              } // if ytPlayerState === 'paused'
-
+              // NOTE:
+              // ---------------------------------------------------------------
+              // unclear why player state 'cued' occurs
+              // ---------------------------------------------------------------              
               // load (cued) video
-              if (ytPlayerState === 'cued') {
+              if (ytPlayerState === 'cued' || ytPlayerState === 'unstarted' ) {
                 ytPlayer.playVideo();
 
                 // wait for API error state
@@ -2174,21 +2171,45 @@ regenerate: true
                   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);                  
-              // } // END if ytPlayerState === 'unstarted'               
+
+                return;
+              } // END if ytPlayerState === 'cued'              
+
+              // NOTE:
+              // ---------------------------------------------------------------
+              // unclear why player state 'cued'
+              // is folloed by 'unstarted'|'buffering' on playing
+              // ---------------------------------------------------------------
+              // TOGGLE state 'playing' => 'paused'
+              var isValidPlayerState = /playing|unstarted|buffering/.test(ytPlayerState);
+              if (isValidPlayerState) {
+                ytPlayer.pauseVideo();
+
+                ytPlayerCurrentTime = ytPlayer.getCurrentTime();
+
+                var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
+                togglePlayPauseButton(playPauseButtonClass);
+
+                // reset|update time settings
+                resetCurrentTimeContainerYTP(ytPlayer, playlist);
+                updateDurationTimeContainerYTP(ytPlayer, playlist);                
+              }
+
+              // TOGGLE state 'paused' => 'playing'
+              if (ytPlayerState === 'paused') {
+                ytPlayer.playVideo();
+                ytpSeekTo(ytPlayer, ytPlayerCurrentTime, true);
+
+                var trackID =  songIndex + 1;
+                logger.debug(`PLAY video for PlayPauseButton on playlist|trackID: ${playlist}|${trackID} at: ${ytPlayerCurrentTime}`);
+
+                var playPauseButtonClass = `large-player-play-pause-${ytPlayerID}`;
+                togglePlayPauseButton(playPauseButtonClass);
+
+                // reset|update time settings
+                resetCurrentTimeContainerYTP(ytPlayer, playlist);
+                updateDurationTimeContainerYTP(ytPlayer, playlist);                  
+              } // if ytPlayerState === 'paused'
 
               // deactivate AJS events (if any)
               event.stopImmediatePropagation();
@@ -2198,7 +2219,6 @@ regenerate: true
         } // END for largePlayerPlayPauseButton
 
         // Overload AJS largePlayerSkipBackward button for YT
-        // TODO: Fix for multiple players in page
         // ---------------------------------------------------------------------
         var largePlayerSkipForwardButtons = document.getElementsByClassName("large-player-skip-forward");
         for (var i=0; i<largePlayerSkipForwardButtons.length; i++) {
@@ -2220,17 +2240,15 @@ regenerate: true
               if (playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED) {
                 logger.debug(`SKIP forward on Button skipForward for ${skipOffset} seconds`);
                 ytpSeekTo(ytPlayer, currentVideoTime + skipOffset, true);
-
               }
 
             // deactivate AJS events (if any)
             event.stopImmediatePropagation();
-            }); // END Listener 'click'
-          } // END if skip-forward button
-        } // END for  
+            }); // END eventListener
+          } // END if classString.includes(ytPlayerID
+        } // END for largePlayerSkipForwardButtons 
 
         // Overload AJS largePlayerSkipBackward button for YT
-        // TODO: Fix for multiple players in page
         // ---------------------------------------------------------------------
         var largePlayerSkipBackwardButtons = document.getElementsByClassName("large-player-skip-backward");
         for (var i=0; i<largePlayerSkipBackwardButtons.length; i++) {
@@ -2261,8 +2279,6 @@ regenerate: true
         } // END for
 
         // Overload AJS largePlayerNext button for YT
-        // click on (player) next button
-        // TODO: Fix for multiple players in page
         // ---------------------------------------------------------------------
         var largePlayerNextButton = document.getElementsByClassName("large-player-next");
         for (var i=0; i<largePlayerNextButton.length; i++) {
@@ -2321,6 +2337,14 @@ regenerate: true
               j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex = songIndex;
               j1.adapter.amplitude.data.ytPlayers[playerID].videoID     = ytpVideoID;
 
+              // save amplitudejs data for later use (e.g. events)
+              // ---------------------------------------------------------------
+              j1.modules.amplitudejs.data.ytp.activeIndex = songIndex;
+              j1.modules.amplitudejs.data.ytp.activePlaylist = playlist;
+              j1.modules.amplitudejs.data.ytp.players[playerID].player = ytPlayer;
+              j1.modules.amplitudejs.data.ytp.players[playerID].activeIndex = songIndex;
+
+
               trackID = songIndex + 1;
               logger.debug(`SWITCH video for PlayerNextButton at trackID|VideoID: ${trackID}|${ytpVideoID}`);
               ytPlayer.loadVideoById(ytpVideoID);
@@ -2376,13 +2400,11 @@ regenerate: true
               event.stopImmediatePropagation();
 
             }); // END EventListener 'click' next button
-          } // END if
+          } // END if classString.includes(ytPlayerID)
 
       } // END for largePlayerNextButton
 
       // Overload AJS largePlayerPrevious button for YT
-      // click on (player) previous button
-      // TODO: Fix for multiple players in page
       // -----------------------------------------------------------------------
       var largePlayePreviousButton = document.getElementsByClassName("large-player-previous");
       for (var i=0; i<largePlayePreviousButton.length; i++) {
@@ -2434,6 +2456,19 @@ regenerate: true
             j1.adapter.amplitude.data.ytpGlobals['activeIndex']    = songIndex;
             j1.adapter.amplitude.data.ytpGlobals['activePlaylist'] = playlist;
 
+
+            // save amplitudejs data for later use (e.g. events)
+            // -----------------------------------------------------------------
+            j1.modules.amplitudejs.data.activePlayer = songIndex;
+            j1.modules.amplitudejs.data.activeIndex = songIndex;
+            j1.modules.amplitudejs.data.activePlaylist = songIndex;
+            j1.modules.amplitudejs.data.ytp.activeIndex = songIndex;
+            j1.modules.amplitudejs.data.ytp.activePlaylist = playlist;
+            j1.modules.amplitudejs.data.ytp.players[playerID].player = ytPlayer;
+            j1.modules.amplitudejs.data.ytp.players[playerID].activeIndex = songIndex;   
+
+
+
             // load previous video
             // -----------------------------------------------------------------
 
@@ -2497,12 +2532,11 @@ regenerate: true
             event.stopImmediatePropagation();
 
           }); // END EventListener 'click' next button
-        } // END if
+        } // END if classString.includes(ytPlayerID)
 
     } // END for largePlayerNextButton
 
     // click on song container
-    // TODO: Fix for multiple players in page
     // -------------------------------------------------------------------------
     var largePlayerSongContainer = document.getElementsByClassName("amplitude-song-container");
     for (var i=0; i<largePlayerSongContainer.length; i++) {
@@ -2511,11 +2545,13 @@ regenerate: true
 
       if (classString.includes(ytPlayerID)) {
         largePlayerSongContainer[i].addEventListener('click', function(event) {
-          var activeSongSettings, playlist, playerID, playerState,
+          var activeSong, playlist, playerID,
+              playerState, ytPlayerState,
               songs, songIndex, songName, singleAudio, trackID,
               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"));
@@ -2523,37 +2559,69 @@ regenerate: true
           activeSongIndex     = j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex;
           isSongIndexChanged  = (activeSongIndex !== songIndex) ? true : false;
 
-          // update active song settings (manually)
-          checkActiveVideoElementYTP(); 
-
           // set (current) song meta data
-          songs         = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
-          songMetaData  = songs[songIndex];
-          songURL       = songMetaData.url;
-          ytpVideoID    = songURL.split('=')[1];
-          // ytpVideoID = 'bloedsinn';
-          ytPlayer      = j1.adapter.amplitude.data.ytPlayers[playerID].player;
-          playerState   = ytPlayer.getPlayerState();                   
+          // -------------------------------------------------------------------
+          songs               = j1.adapter.amplitude.data.ytPlayers[playerID].songs;
+          songMetaData        = songs[songIndex];
+          songURL             = songMetaData.url;
+          ytpVideoID          = (ytPlayerErrorTest) ? 'invalidVideoID' : songURL.split('=')[1];
+          ytPlayer            = j1.adapter.amplitude.data.ytPlayers[playerID].player;
+          playerState         = ytPlayer.getPlayerState();
+          ytPlayerState       = (playerState < 0) ? YT_PLAYER_STATE_NAMES[6] : YT_PLAYER_STATE_NAMES[playerState];              
+
+          // NOTE:
+          // -------------------------------------------------------------------
+          // unclear why player state 'cued' occurs
+          // -------------------------------------------------------------------              
+          // load (cued) video
+          if (ytPlayerState === 'cued') {
+            ytPlayer.playVideo();
+
+            // 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]}'`);
+
+                // do nothing on API errors
+                return;
+              }
+
+              // 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);
+
+            return;
+          } // END if ytPlayerState === 'cued'
 
           // TOGGLE state 'playing' => 'paused' if video (audio) NOT changed
-          if (playerState === YT_PLAYER_STATE.PLAYING && !isSongIndexChanged) {
+          if (!isSongIndexChanged && ytPlayerState === 'playing') {
             ytPlayer.pauseVideo();
               // get active song settings (manually)
-              activeSongSettings = getActiveSong();
+              activeSong = getActiveSong();
 
-              if (activeSongSettings) {
-                // ytpCurrentTime = activeSongSettings.currentTime;
-                if (activeSongSettings.playlist !== playlist) {
+              if (activeSong) {
+                // ytpCurrentTime = activeSong.currentTime;
+                if (activeSong.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;
@@ -2577,8 +2645,10 @@ regenerate: true
               resetCurrentTimeContainerYTP(ytPlayer, playlist);
               updateDurationTimeContainerYTP(ytPlayer, playlist);
 
-              // update global song index (start at 0)
-              ytpSongIndex  = songIndex;
+              // save YT player data for later use (e.g. events)
+              // ---------------------------------------------------------------
+              ytpSongIndex = songIndex;
+              j1.modules.amplitudejs.data.ytp.songIndex = songIndex;
 
               // save YT player GLOBAL data for later use (e.g. events)
               j1.adapter.amplitude.data.activePlayer                 = 'ytp';
@@ -2589,6 +2659,19 @@ regenerate: true
               j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex = songIndex;
               j1.adapter.amplitude.data.ytPlayers[playerID].videoID     = ytpVideoID;
 
+
+              // save amplitudejs data for later use (e.g. events)
+              // -----------------------------------------------------------------
+              j1.modules.amplitudejs.data.activePlayer = ytPlayer;
+              j1.modules.amplitudejs.data.activeIndex = songIndex;
+              j1.modules.amplitudejs.data.activePlaylist = playlist;
+              j1.modules.amplitudejs.data.ytp.activeIndex = songIndex;
+              j1.modules.amplitudejs.data.ytp.activePlaylist = playlist;
+              j1.modules.amplitudejs.data.ytp.players[playerID].player = ytPlayer;
+              j1.modules.amplitudejs.data.ytp.players[playerID].activeIndex = songIndex;
+              j1.modules.amplitudejs.data.ytp.players[playerID].ytpVideoID = ytpVideoID;
+
+
               // reset|update current time settings
               resetCurrentTimeContainerYTP(ytPlayer, playlist);
               updateDurationTimeContainerYTP(ytPlayer, playlist);
@@ -2616,26 +2699,17 @@ regenerate: true
             } // END if playerState === PLAYING
 
             // TOGGLE state 'paused' => 'playing' if video (audio) NOT changed
-            if (playerState === YT_PLAYER_STATE.PAUSED && !isSongIndexChanged) {
+            if (!isSongIndexChanged && ytPlayerState === 'paused') {
               ytPlayer.playVideo();
               ytpSeekTo(ytPlayer, ytPlayerCurrentTime, true);
 
-              // get active song settings (manually)
-              activeSongSettings = getActiveSong();
-
-              if (activeSongSettings) {
-                // ytpCurrentTime = activeSongSettings.currentTime;
-                if (activeSongSettings.playlist !== playlist) {
+              activeSong = getActiveSong();
+              if (activeSong) {
+                // ytpCurrentTime = activeSong.currentTime;
+                if (activeSong.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;
@@ -2671,7 +2745,7 @@ regenerate: true
               // -------------------------------------------------------------------
               trackID = songIndex + 1;
               logger.debug(`SWITCH video for PlayerSongContainer at trackID|VideoID: ${trackID}|${ytpVideoID}`);
-              ytPlayer.loadVideoById(ytpVideoID);
+              loadVideo(playlist, songIndex) 
 
               // wait for API error state
               setTimeout(() => {
@@ -2683,18 +2757,34 @@ regenerate: true
                   return;
                 }
 
-                // update global song index (start at 0)
-                ytpSongIndex  = songIndex;
+                // save YT player data for later use (e.g. events)
+                // -------------------------------------------------------------
+                ytpSongIndex = songIndex;
+                j1.modules.amplitudejs.data.ytp.songIndex = 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.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;
 
+
+                // save amplitudejs data for later use (e.g. events)
+                // -------------------------------------------------------------
+                j1.modules.amplitudejs.data.activePlayer = 'ytp';
+                j1.modules.amplitudejs.data.activeIndex = songIndex;
+                j1.modules.amplitudejs.data.activePlaylist = playlist;
+                j1.modules.amplitudejs.data.ytp.songIndex = songIndex;
+                j1.modules.amplitudejs.data.ytp.activeIndex = songIndex;
+                j1.modules.amplitudejs.data.ytp.activePlaylist = playlist;
+                j1.modules.amplitudejs.data.ytp.players[playerID].player = ytPlayer;
+                j1.modules.amplitudejs.data.ytp.players[playerID].activeIndex = songIndex;
+                j1.modules.amplitudejs.data.ytp.players[playerID].ytpVideoID = ytpVideoID;
+
+
                 // reset|update current time settings
                 resetCurrentTimeContainerYTP(ytPlayer, playlist);
                 updateDurationTimeContainerYTP(ytPlayer, playlist);
@@ -2718,8 +2808,8 @@ regenerate: true
                 }
 
                 // 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;   
+                // j1.adapter.amplitude.data.ytPlayers[playerID].activeIndex = songIndex;
+                // j1.adapter.amplitude.data.ytPlayers[playerID].videoID     = ytpVideoID;   
 
                 // mute sound after next video load
                 // -------------------------------------------------------------------
@@ -2729,7 +2819,7 @@ regenerate: true
                     ytPlayer.unMute();
                   }, muteAfterVideoSwitchInterval);
                 }
-              }, 100);
+              }, 100); // END timeout
             } // END if isSongIndexChanged
 
             // deactivate AJS events (if any)
@@ -2739,7 +2829,6 @@ regenerate: true
     } // END for largePlayerSongContainer
 
     // add listeners to all progress bars found
-    // TODO: Fix for multiple players in page
     // -------------------------------------------------------------------------
     var progressBars = document.getElementsByClassName("large-player-progress");
     if (progressBars.length) {
@@ -2759,30 +2848,24 @@ regenerate: true
             j1.adapter.amplitude.data.ytPlayers[playerID].progressBar = progressBar;
 
             progressBars[i].addEventListener('click', function(event) {
-              var activeSongSettings, playlist, ytPlayer,
-                  playerState, progressBar, percentage, time;
-
-              // update active song settings (manually)
-              checkActiveVideoElementYTP();                   
-
-              // get active song settings (manually)
-              activeSongSettings = getActiveSong();
+              var activeSong, playlist, ytPlayer,
+                  playerState, progressBar, percentage, time;               
 
-              if (!activeSongSettings) {
-                // do nothing if current video (audio) item is NOT selected|active
+              activeSong = getActiveSong();
+              if (!activeSong) {
+                 // do nothing if activeSong data is missing (failsafe)
                 return;
               }
 
               playlist = this.getAttribute("data-amplitude-playlist");
-              if (activeSongSettings.playlist !== playlist) {
-                // do nothing on PREVIOUS playlist (player)
+              if (activeSong.playlist !== playlist) {
+                // do nothing on PREVIOUS playlist
                 return;              
               }
 
-              ytPlayer    = activeSongSettings.player; 
+              ytPlayer    = activeSong.player; 
               playerState = ytPlayer.getPlayerState();
 
-              //if (playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.BUFFERING) {
               if (playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED || playerState === YT_PLAYER_STATE.BUFFERING) {
                 progressBar = this;
                 percentage  = getProgressBarSelectedPositionPercentage(event, progressBar);
@@ -2807,69 +2890,58 @@ regenerate: true
     } // END if progressBars
 
     // add listeners to all volume sliders found
-    // TODO: Fix for multiple players in page
     // -------------------------------------------------------------------------
     var volumeSliders = document.getElementsByClassName("amplitude-volume-slider");
     for (var i=0; i<volumeSliders.length; i++) {
       if (volumeSliders[i].dataset.amplitudeSource === 'audio') {
         // do nothing (managed by adapter)
-        var bla = 1;
       } else {
         if (volumeSliders[i]) {
-          // for (var i=0; i<volumeSliders.length; i++) {
-            var volumeSlider  = volumeSliders[i];
-            var sliderID      = volumeSliders[i].id;
-            var playerID      = sliderID.split('volume_slider_')[1];
+          var volumeSlider  = volumeSliders[i];
+          var sliderID      = volumeSliders[i].id;
+          var playerID      = sliderID.split('volume_slider_')[1];
 
-            // save YT player data for later use (e.g. events)
-            if (volumeSlider.dataset.amplitudeSource === 'youtube') {
-              j1.adapter.amplitude.data.ytPlayers[playerID].volumeSlider = volumeSlider;
-            }
+          // save YT player data for later use (e.g. events)
+          if (volumeSlider.dataset.amplitudeSource === 'youtube') {
+            j1.adapter.amplitude.data.ytPlayers[playerID].volumeSlider = volumeSlider;
+          }
 
-            volumeSliders[i].addEventListener('click', function(event) {
+          volumeSliders[i].addEventListener('click', function(event) {
+            var activeSong = getActiveSong();
 
-              // update active song settings (manually)
-              checkActiveVideoElementYTP(); 
-              
-              // get active song settings (manually)
-              var activeSongSettings = getActiveSong();
+            if (!activeSong) {
+               // do nothing if activeSong data is missing (failsafe)
+              return;
+            } 
 
-              if (!activeSongSettings) {
-                // do nothing if current video (audio) item is NOT selected|active
-                return;
-              } 
-              
-              var ytPlayer    = activeSongSettings.player; 
-              var playerState = ytPlayer.getPlayerState();
+            var ytPlayer    = activeSong.player; 
+            var playerState = ytPlayer.getPlayerState();
 
-              if ((playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED) && ytPlayer !== undefined) {
-                var volumeSlider, volumeValue;
-                var currenVolume = ytPlayer.getVolume();
+            if ((playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED) && ytPlayer !== undefined) {
+              var volumeSlider, volumeValue;
+              var currenVolume = ytPlayer.getVolume();
 
-                volumeSlider = this;
-                volumeValue  = 50;  // default
+              volumeSlider = this;
+              volumeValue  = 50;  // default
 
-                if (volumeSlider !== null) {
-                  volumeValue = parseInt(volumeSlider.value);
-                }
+              if (volumeSlider !== null) {
+                volumeValue = parseInt(volumeSlider.value);
+              }
 
-                ytPlayer.setVolume(volumeValue);
-              } // END if ytPlayer
+              ytPlayer.setVolume(volumeValue);
+            } // END if ytPlayer
 
-            }); // END EventListener 'click'
-          // } // END for
+          }); // END EventListener 'click'
         } // END if volumeSliders
       } // END if volumeSliders
     } // END for volumeSliders
 
     // add listeners to all mute buttons found
-    // TODO: Fix for multiple buttons in page
     // -------------------------------------------------------------------------
     var volumeMutes = document.getElementsByClassName("amplitude-mute");
     for (var i=0; i<volumeMutes.length; i++) {
       if (volumeMutes[i].dataset.amplitudeSource === 'audio') {
         // do nothing (managed by adapter)
-        var bla = 1;
       } else {    
         if (volumeMutes[i]) {
           var volumMute = volumeMutes[i];
@@ -2877,25 +2949,23 @@ regenerate: true
           var playerID  = sliderID.split('amplitude-mute_')[1];
 
           volumeMutes[i].addEventListener('click', function(event) {
+            var activeSong = getActiveSong();
 
-            // update active song settings (manually)
-            checkActiveVideoElementYTP();
-
-            // get active song settings (manually)
-            var activeSongSettings = getActiveSong();
-
-            if (!activeSongSettings) {
-              // do nothing if current video (audio) item is NOT selected|active
+            if (!activeSong) {
+              // do nothing if activeSong data is missing (failsafe)
               return;
             } 
   
-            var ytPlayer            = activeSongSettings.player;
+            var ytPlayer            = activeSong.player;
             var playerState         = ytPlayer.getPlayerState();
             var volumeSlider        = j1.adapter.amplitude.data.ytPlayers[playerID].volumeSlider;
             var currenVolume        = ytPlayer.getVolume();
             var playerVolumePreset  = parseInt(j1.adapter.amplitude.data.ytPlayers[playerID].playerSettings.volume_slider.preset_value);
-    
-            if ((playerState === YT_PLAYER_STATE.PLAYING || playerState === YT_PLAYER_STATE.PAUSED) && ytPlayer !== undefined) {
+            var playerState         = (ytPlayer.getPlayerState() > 0) ? ytPlayer.getPlayerState() : 6;
+            var ytPlayerState       = YT_PLAYER_STATE_NAMES[playerState];
+
+            var isValidPlayerState = /playing|paused/.test(ytPlayerState);
+            if (isValidPlayerState && ytPlayer !== undefined) {
               if (currenVolume > 0) {
                 volumeSlider.value = 0;
                 ytPlayer.setVolume(0);