j1-template 2024.3.13 → 2024.3.14

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

@@ -113,6 +113,9 @@ j1.adapter.amplitude = ((j1, window) => {
 
   // amplitude api settings
   // ----------------------
+  var ytpSongIndex    = "0";
+  var ytpAutoPlay     = false;
+  var ytpLoop         = true;
   var playLists       = {};
   var playersUILoaded = { state: false };
   var apiInitialized  = { state: false };
@@ -125,30 +128,54 @@ j1.adapter.amplitude = ((j1, window) => {
   var amplitudeDefaults;
   var amplitudeSettings;
   var amplitudeOptions;
+  var ytPlayer;
+  var ytpPlaybackRate
 
   // amplitude player (instance) settings
+  // NOTE: slider VALUE is set by Adapter|Amplitude API
   // ------------------------------------
   var xhrLoadState;
   var dependency;
-  var playerCounter             = 0;
-  var load_dependencies         = {};
-  var playersProcessed          = [];
-  var playersHtmlLoaded         = false;
-  var processingPlayersFinished = false;
-  var playerAudioInfo           = ('{{amplitude_defaults.playlist.audio_info}}' === 'true') ? true : false;
-  var playerDefaultType         = '{{amplitude_defaults.player.type}}';
-  var playerVolumeValue         = '{{amplitude_defaults.player.volume.value}}';
-  var playerVolumeDecrement     = '{{amplitude_defaults.player.volume.decrement}}';
-  var playerVolumeIncrement     = '{{amplitude_defaults.player.volume.increment}}';
-  var playerRepeat              = ('{{amplitude_defaults.player.repeat}}' === 'true') ? true : false;
-  var playerShuffle             = ('{{amplitude_defaults.player.shuffle}}' === 'true') ? true : false;
-  var playerPlayNextTitle       = ('{{amplitude_defaults.player.play_next_title}}' === 'true') ? true : false;
-  var playerPauseNextTitle      = ('{{amplitude_defaults.player.pause_next_title}}' === 'true') ? true : false;
-  var playerDelayNextTitle      = '{{amplitude_defaults.player.delay_next_title}}';
+  var playerCounter                     = 0;
+  var load_dependencies                 = {};
+  var playersProcessed                  = [];
+  var playersHtmlLoaded                 = false;
+  var processingPlayersFinished         = false;
+  var playerAudioInfo                   = ('{{amplitude_defaults.playlist.audio_info}}' === 'true') ? true : false;
+  var playerDefaultType                 = '{{amplitude_defaults.player.type}}';
+  var playerVolumeValue                 = '{{amplitude_defaults.player.volume_slider.preset_value}}';
+  var playerVolumeSliderStep            = '{{amplitude_defaults.player.volume_slider.slider_step}}';
+  var playerRepeat                      = ('{{amplitude_defaults.player.repeat}}' === 'true') ? true : false;
+  var playerShuffle                     = ('{{amplitude_defaults.player.shuffle}}' === 'true') ? true : false;
+  var playerPlayNextTitle               = ('{{amplitude_defaults.player.play_next_title}}' === 'true') ? true : false;
+  var playerPauseNextTitle              = ('{{amplitude_defaults.player.pause_next_title}}' === 'true') ? true : false;
+  var playerDelayNextTitle              = '{{amplitude_defaults.player.delay_next_title}}';
+  var playerForwardBackwardSkipSeconds  = '{{amplitude_defaults.player.forward_backward_skip_seconds}}';
 
   // unused settings
-  // var playerWaveformSampleRate  = '{{amplitude_defaults.player.waveform_sample_rate}}';
+  // ---------------------------------------------------------------------------
+  // var playerWaveformSampleRate       = '{{amplitude_defaults.player.waveform_sample_rate}}';
 
+  // ---------------------------------------------------------------------------
+  // YouTube Player Tech (loaded early, runs on Document Ready)
+  // ---------------------------------------------------------------------------
+  //
+  // $(function() {
+  //   // Load YTP API code asynchronously and create a player for later use
+  //   var techScript;
+  //   var tech    = document.createElement('script');
+  //
+  //   tech.id     = 'yt_player_init';
+  //   tech.src    = "/assets/theme/j1/modules/amplitudejs/js/tech/ytp.js";
+  //   techScript  = document.getElementsByTagName('script')[0];
+  //
+  //   // Append Tech script
+  //   techScript.parentNode.insertBefore(tech, techScript);
+  // });
+
+  // ---------------------------------------------------------------------------
+  // helper functions
+  // ---------------------------------------------------------------------------
 
   // ---------------------------------------------------------------------------
   // main
@@ -189,9 +216,8 @@ j1.adapter.amplitude = ((j1, window) => {
         var pageState      = $('#content').css("display");
         var pageVisible    = (pageState === 'block') ? true : false;
         var j1CoreFinished = (j1.getState() === 'finished') ? true : false;
-        var atticFinished  = (j1.adapter.attic.getState() == 'finished') ? true : false;
 
-        if (j1CoreFinished && pageVisible && atticFinished) {
+        if (j1CoreFinished && pageVisible) {
           startTimeModule = Date.now();
 
           _this.setState('started');
@@ -217,6 +243,7 @@ j1.adapter.amplitude = ((j1, window) => {
           var dependencies_met_players_loaded = setInterval (() => {
             if (playersUILoaded.state) {
               _this.initApi(songs);
+              // var playbackRate = ytPlayer.getPlaybackRate();
 
               clearInterval(dependencies_met_players_loaded);
             } // END if playersUILoaded
@@ -227,38 +254,6 @@ j1.adapter.amplitude = ((j1, window) => {
           // -------------------------------------------------------------------
           var dependencies_met_api_initialized = setInterval (() => {
             if (apiInitialized.state) {
-
-              // click on next button
-              // -------------------------------------------------------
-              // var nextButtons = document.getElementsByClassName("amplitude-next");
-              //
-              // // add listeners to all next buttonn found
-              // for (var i=0; i<nextButtons.length; i++) {
-              //   nextButtons[i].addEventListener('click', function(event) {
-              //     event.stopPropagation();
-              //
-              //     var activeTitleIndex  = Amplitude.getActiveIndex();
-              //     var playerState       = Amplitude.getPlayerState();
-              //     logger.debug('\n' + 'next player state: ' + playerState + ' on index=' + activeTitleIndex);
-              //   });
-              // }
-
-              // click on previous button
-              // -------------------------------------------------------
-              // var previousButtons = document.getElementsByClassName("amplitude-prev");
-              //
-              // // add listeners to all previous buttonn found
-              // for (var i=0; i<previousButtons.length; i++) {
-              //   previousButtons[i].addEventListener('click', function(event) {
-              //     event.stopPropagation();
-              //
-              //     var activeTitleIndex  = Amplitude.getActiveIndex();
-              //     var playerState       = Amplitude.getPlayerState();
-              //     logger.debug('\n' + 'previous player state: ' + playerState + ' on index=' + activeTitleIndex);
-              //
-              //   });
-              // }
-
               _this.initPlayerUiEvents();
 
               clearInterval(dependencies_met_api_initialized);
@@ -268,6 +263,7 @@ j1.adapter.amplitude = ((j1, window) => {
           clearInterval(dependencies_met_page_ready);
         } // END pageVisible
       }, 10); // END dependencies_met_page_ready
+
     }, // END init
 
     // -------------------------------------------------------------------------
@@ -339,42 +335,41 @@ j1.adapter.amplitude = ((j1, window) => {
       logger.info('\n' + 'loading player HTML components (UI): started');
 
       {% for player in amplitude_options.players %} {% if player.enabled %}
-        {% assign player_id     = player.id %}
         {% assign xhr_data_path = amplitude_options.xhr_data_path %}
-        {% capture xhr_container_id %}{{player_id}}_parent{% endcapture %}
+        {% capture xhr_container_id %}{{player.id}}_parent{% endcapture %}
 
         // load players only that are configured in current page
         //
         playerExistsInPage = ($('#' + '{{xhr_container_id}}')[0] !== undefined) ? true : false;
         if (playerExistsInPage) {
           playerCounter++;
-          logger.debug('\n' + 'load player UI on ID #{{player_id}}: started');
+          logger.debug('\n' + 'load player UI on ID #{{player.id}}: started');
 
           j1.loadHTML({
             xhr_container_id: '{{xhr_container_id}}',
             xhr_data_path:    '{{xhr_data_path}}',
-            xhr_data_element: '{{player_id}}'
+            xhr_data_element: '{{player.id}}'
             },
             'j1.adapter.amplitude',
             'data_loaded'
           );
 
-          // dynamic loader variable to setup the player on ID {{player_id}}
-          dependency = 'dependencies_met_html_loaded_{{player_id}}';
+          // dynamic loader variable to setup the player on ID {{player.id}}
+          dependency = 'dependencies_met_html_loaded_{{player.id}}';
           load_dependencies[dependency] = '';
 
           // ---------------------------------------------------------------------
           // initialize amplitude instance (when player UI loaded)
           // ---------------------------------------------------------------------
-          load_dependencies['dependencies_met_html_loaded_{{player_id}}'] = setInterval (() => {
+          load_dependencies['dependencies_met_html_loaded_{{player.id}}'] = setInterval (() => {
             // check if HTML portion of the player is loaded successfully
             xhrLoadState = j1.xhrDOMState['#' + '{{xhr_container_id}}'];
 
             if (xhrLoadState === 'success') {
               playersProcessed.push('{{xhr_container_id}}');
-              logger.debug('\n' + 'load player UI on ID #{{player_id}}: finished');
+              logger.debug('\n' + 'load player UI on ID #{{player.id}}: finished');
 
-              clearInterval(load_dependencies['dependencies_met_html_loaded_{{player_id}}']);
+              clearInterval(load_dependencies['dependencies_met_html_loaded_{{player.id}}']);
             }
           }, 10); // END dependencies_met_html_loaded
         } // END if playerExistsInPage
@@ -458,7 +453,8 @@ j1.adapter.amplitude = ((j1, window) => {
 
       {% endif %} {% endfor %}
 
-      // See: https://521dimensions.com/open-source/amplitudejs/docs
+      // See:  https://521dimensions.com/open-source/amplitudejs/docs
+      // NOTE: slider VALUE (volume) is set by DEFAULT settings (player)
       Amplitude.init({
         bindings: {
           33:  'play_pause',
@@ -539,9 +535,10 @@ j1.adapter.amplitude = ((j1, window) => {
         // },
         continue_next:    playerPlayNextTitle,
         volume:           playerVolumeValue,
-        volume_decrement: playerVolumeDecrement,
-        volume_increment: playerVolumeIncrement
+        volume_decrement: playerVolumeSliderStep,
+        volume_increment: playerVolumeSliderStep
       }); // END Amplitude init
+
     }, // END initApi
 
     // -------------------------------------------------------------------------
@@ -554,9 +551,8 @@ j1.adapter.amplitude = ((j1, window) => {
             logger.info('\n' + 'initialize player specific UI events: started');
 
           {% for player in amplitude_options.players %} {% if player.enabled %}
-            {% assign player_id     = player.id %}
             {% assign xhr_data_path = amplitude_options.xhr_data_path %}
-            {% capture xhr_container_id %}{{player_id}}_parent{% endcapture %}
+            {% capture xhr_container_id %}{{player.id}}_parent{% endcapture %}
 
             playerID      = '{{player.id}}';
             playerType    = '{{player.type}}';
@@ -564,16 +560,16 @@ j1.adapter.amplitude = ((j1, window) => {
             playListName  = '{{player.playlist.name}}'
             playListTitle = '{{player.playlist.title}}';
 
-            logger.debug('\n' + 'set playlist {{player.playlist}} on id #{{player_id}} with title: ' + playListTitle);
+            logger.debug('\n' + 'set playlist {{player.playlist}} on id #{{player.id}} with title: ' + playListTitle);
 
-            // dynamic loader variable to setup the player on ID {{player_id}}
-            dependency = 'dependencies_met_player_loaded_{{player_id}}';
+            // dynamic loader variable to setup the player on ID {{player.id}}
+            dependency = 'dependencies_met_player_loaded_{{player.id}}';
             load_dependencies[dependency] = '';
 
             // -----------------------------------------------------------------
             // initialize player instance (when player UI is loaded)
             // -----------------------------------------------------------------
-            load_dependencies['dependencies_met_player_loaded_{{player_id}}'] = setInterval (() => {
+            load_dependencies['dependencies_met_player_loaded_{{player.id}}'] = setInterval (() => {
               // check if HTML portion of the player is loaded successfully
               var xhrLoadState = j1.xhrDOMState['#' + '{{xhr_container_id}}'];
 
@@ -586,14 +582,15 @@ j1.adapter.amplitude = ((j1, window) => {
                   _this.setAudioInfo(infoLinks);
                 }
 
+                // jadams, 2024-10-19: (song) events DISABLED
                 // set song (title) specific UI events
                 // -------------------------------------------------------------
-                var songElements = document.getElementsByClassName('song');
-                _this.songEvents(songElements);
+                // var songElements = document.getElementsByClassName('song');
+                // _this.songEvents(songElements);
 
                 // player specific UI events
                 // -------------------------------------------------------------
-                logger.debug('\n' + 'setup player specific UI events on ID #{{player_id}}: started');
+                logger.debug('\n' + 'setup player specific UI events on ID #{{player.id}}: started');
 
                 var dependencies_met_api_initialized = setInterval (() => {
                   if (apiInitialized.state) {
@@ -603,7 +600,7 @@ j1.adapter.amplitude = ((j1, window) => {
                     // ---------------------------------------------------------
                     // START mini player UI events
                     //
-                    if (document.getElementById(playerID) !== null) {
+                    if (document.getElementById('{{player.id}}') !== null) {
 
                       // click on progress bar
                       // -------------------------------------------------------
@@ -629,15 +626,16 @@ j1.adapter.amplitude = ((j1, window) => {
                     // ---------------------------------------------------------
                     // START compact player UI events
                     //
-                    if (document.getElementById(playerID) !== null) {
+                    if (document.getElementById('{{player.id}}') !== null) {
 
                       // show|hide scrollbar in playlist
                       // -------------------------------------------------------
                       const songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
-
                       if (songsInPlaylist.length <= 8) {
                         const titleListCompactPlayer = document.getElementById('compact_player_title_list_' + playListName);
-                        titleListCompactPlayer.classList.add('hide-scrollbar');
+                        if (titleListCompactPlayer !== null) {
+                          titleListCompactPlayer.classList.add('hide-scrollbar');
+                        }
                       }
 
                       // show|hide playlist
@@ -645,7 +643,7 @@ j1.adapter.amplitude = ((j1, window) => {
 
                       // show playlist
                       var showPlaylist = document.getElementById("show_playlist_{{player.id}}");
-
+                      if (showPlaylist !== null) {
                         showPlaylist.addEventListener('click', function(event) {
                           var scrollOffset = (window.innerWidth >= 720) ? -130 : -110;
 
@@ -670,24 +668,26 @@ j1.adapter.amplitude = ((j1, window) => {
                               $('body').addClass('stop-scrolling');
                             }
                           }
-                      }); // END EventListener 'click' (compact player|show playlist)
+                        }); // END EventListener 'click' (compact player|show playlist)
+                     }
 
                       // hide playlist
                       var hidePlaylist = document.getElementById("hide_playlist_{{player.id}}");
+                      if (hidePlaylist !== null) {
+                        hidePlaylist.addEventListener('click', function(event) {
+                          var playlistScreen = document.getElementById("playlist_screen_{{player.id}}");
 
-                      hidePlaylist.addEventListener('click', function(event) {
-                        var playlistScreen = document.getElementById("playlist_screen_{{player.id}}");
-
-                        playlistScreen.classList.remove('slide-in-top');
-                        playlistScreen.classList.add('slislide-out-top');
-                        playlistScreen.style.display = "none";
-                        playlistScreen.style.zIndex = "1";
+                          playlistScreen.classList.remove('slide-in-top');
+                          playlistScreen.classList.add('slislide-out-top');
+                          playlistScreen.style.display = "none";
+                          playlistScreen.style.zIndex = "1";
 
-                        // enable scrolling
-                        if ($('body').hasClass('stop-scrolling')) {
-                          $('body').removeClass('stop-scrolling');
-                        }
-                      }); // END EventListener 'click' (compact player|show playlist)
+                          // enable scrolling
+                          if ($('body').hasClass('stop-scrolling')) {
+                            $('body').removeClass('stop-scrolling');
+                          }
+                        }); // END EventListener 'click' (compact player|show playlist)
+                      }
 
                       // click on progress bar
                       // -------------------------------------------------------
@@ -703,20 +703,64 @@ j1.adapter.amplitude = ((j1, window) => {
 
                           Amplitude.setSongPlayedPercentage(
                             (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
-                        });
+                        }); // END EventListener 'click'
                       }
 
-                      // click on shuffle icon
-                      document.getElementById('compact_player_shuffle').addEventListener('click', function(event) {
-                        var shuffleState = (document.getElementById('compact_player_shuffle').className.includes('amplitude-shuffle-on')) ? true : false;
-                        Amplitude.setShuffle(shuffleState)
-                      });
+                      // click on skip forward|backward (compact player)
+                      // See: https://github.com/serversideup/amplitudejs/issues/384
+                      // -------------------------------------------------------
 
-                      // click on repeat icon
-                      document.getElementById('compact_player_repeat').addEventListener('click', function(event) {
-                        var repeatState = (document.getElementById('compact_player_repeat').className.includes('amplitude-repeat-on')) ? true : false;
-                        Amplitude.setRepeat(repeatState)
-                      });
+                      // add listeners to all SkipForwardButtons found
+                      var compactPlayerSkipForwardButtons = document.getElementsByClassName("compact-player-skip-forward");
+                      for (var i=0; i<compactPlayerSkipForwardButtons.length; i++) {
+                        if (compactPlayerSkipForwardButtons[i].id === 'skip-forward_{{player.id}}') {
+                          compactPlayerSkipForwardButtons[i].addEventListener('click', function(event) {
+                            const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
+                            const duration    = Amplitude.getSongDuration();
+                            const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
+                            const targetTime  = parseFloat(currentTime + skipOffset);
+
+                            if (currentTime > 0) {
+                              Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
+                            } // END EventListener 'click'
+                          });
+                        } // END if ID
+                      } // END for SkipForwardButtons
+
+                      // add listeners to all SkipBackwardButtons found
+                      var compactPlayerSkipBackwardButtons = document.getElementsByClassName("compact-player-skip-backward");
+                      for (var i=0; i<compactPlayerSkipBackwardButtons.length; i++) {
+                        if (compactPlayerSkipBackwardButtons[i].id === 'skip-backward_{{player.id}}') {
+                          compactPlayerSkipBackwardButtons[i].addEventListener('click', function(event) {
+                            const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
+                            const duration    = Amplitude.getSongDuration();
+                            const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
+                            const targetTime  = parseFloat(currentTime - skipOffset);
+
+                            if (currentTime > 0) {
+                              Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
+                            } // END EventListener 'click'
+                          });
+                        } // END if ID
+                      } // END for SkipBackwardButtons
+
+                      // click on shuffle button
+                      var compactPlayerShuffleButton = document.getElementById('compact_player_shuffle');
+                      if (compactPlayerShuffleButton) {
+                        compactPlayerShuffleButton.addEventListener('click', function(event) {
+                          var shuffleState = (document.getElementById('compact_player_shuffle').className.includes('amplitude-shuffle-on')) ? true : false;
+                          Amplitude.setShuffle(shuffleState)
+                        }); // END EventListener 'click'
+                      } // END compactPlayerShuffleButton
+
+                      // click on repeat button
+                      var compactPlayerRepeatButton = document.getElementById('compact_player_repeat');
+                      if (compactPlayerRepeatButton) {
+                        compactPlayerRepeatButton.addEventListener('click', function(event) {
+                          var repeatState = (document.getElementById('compact_player_repeat').className.includes('amplitude-repeat-on')) ? true : false;
+                          Amplitude.setRepeat(repeatState)
+                        }); // END EventListener 'click'
+                      } // END compactPlayerRepeatButton
 
                     } // END compact player UI events
                     {% endif %}
@@ -724,13 +768,79 @@ j1.adapter.amplitude = ((j1, window) => {
                     {% if player.id contains 'large' %}
                     // START large player UI events
                     //
-                    if (document.getElementById(playerID) !== null) {
+                    if (document.getElementById('{{player.id}}') !== null) {
 
-                      // click on progress bar
+                      // listener overloads for Youtube video (large player)
                       // -------------------------------------------------------
-                      var progressBars = document.getElementsByClassName("large-player-progress");
+
+                      // click on prev button
+                      var largePlayerPreviousButton = document.getElementById('large_player_previous');
+                      if (largePlayerPreviousButton && largePlayerPreviousButton.getAttribute("data-amplitude-source") === 'youtube') {
+                        largePlayerPreviousButton.addEventListener('click', function(event) {
+                          var playlist  = this.getAttribute("data-amplitude-playlist");
+                          var songIndex = ytpSongIndex;                          // Amplitude.getActiveIndex();
+
+                        }); // END EventListener 'click'
+                      }
+
+                      // click on play_pause button
+                      var largePlayerPlayButton = document.getElementById('large_player_play_pause');
+                      if (largePlayerPlayButton && largePlayerPlayButton.getAttribute("data-amplitude-source") === 'youtube') {
+                        largePlayerPlayButton.addEventListener('click', function(event) {
+                          var playlist      = this.getAttribute("data-amplitude-playlist");
+                          var songMetaData  = Amplitude.getSongAtIndex(ytpSongIndex);
+                          var songURL       = songMetaData.url;
+                          var songIndex     = ytpSongIndex;
+
+                          var dependencies_met_ytIframeAPIReady = setInterval (() => {
+                            if (j1.adapter.amplitude['iframeAPIReady']) {
+                              ytPlayer          = j1.adapter.amplitude['ytPlayer'];
+                              ytpPlaybackRate   = ytPlayer.getPlaybackRate()
+
+                              // ytPlayer.loadVideoById({
+                              //   'videoId': 'bHQqvYy5KYo',
+                              //   'startSeconds': 5,
+                              //   'endSeconds': 60
+                              // });
+
+                              // ytPlayer.loadVideoByUrl(
+                              //   mediaContentUrl:  songURL,
+                              //   startSeconds: 10
+                              // )
+
+                              // ytPlayer.playVideo();
+
+                              clearInterval(dependencies_met_ytIframeAPIReady);
+                            } // END if playersUILoaded
+                          }, 10); // END dependencies_met_ytIframeAPIReady
+
+                        }); // END EventListener 'click'
+                      }
+
+                      // click on next button
+                      var largePlayerNextButton = document.getElementById('large_player_next');
+                      if (largePlayerNextButton && largePlayerPlayButton.getAttribute("data-amplitude-source") === 'youtube') {
+                        largePlayerNextButton.addEventListener('click', function(event) {
+                          var playlist  = this.getAttribute("data-amplitude-playlist");
+                          var songIndex = ytpSongIndex;                          // Amplitude.getActiveIndex();
+                        }); // END EventListener 'click'
+                      }
+
+                      // click on song container
+                      var largetPlayerSongContainer = document.getElementsByClassName("song amplitude-song-container");
+                      for (var i=0; i<largetPlayerSongContainer.length; i++) {
+                        if (largetPlayerSongContainer[i].dataset.amplitudeSource === 'youtube') {
+                          largetPlayerSongContainer[i].addEventListener('click', function(event) {
+                            var playlist        = this.getAttribute("data-amplitude-playlist");
+                            var playlistLength  = largetPlayerSongContainer.length;
+                            ytpSongIndex         = this.getAttribute("data-amplitude-song-index");
+                          });
+                        } // END if Attribute
+                      } // END for
 
                       // add listeners to all progress bars found
+                      // -------------------------------------------------------
+                      var progressBars = document.getElementsByClassName("large-player-progress");
                       for (var i=0; i<progressBars.length; i++) {
                         progressBars[i].addEventListener('click', function(event) {
                           var offset = this.getBoundingClientRect();
@@ -738,20 +848,85 @@ j1.adapter.amplitude = ((j1, window) => {
 
                           Amplitude.setSongPlayedPercentage(
                             (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
-                        });
+                        }); // END EventListener 'click'
                       }
 
-                      // click on shuffle icon
-                      document.getElementById('large_player_shuffle').addEventListener('click', function(event) {
-                        var shuffleState = (document.getElementById('large_player_shuffle').className.includes('amplitude-shuffle-on')) ? true : false;
-                        Amplitude.setShuffle(shuffleState)
-                      });
+                      // click on skip forward|backward (large player)
+                      // See: https://github.com/serversideup/amplitudejs/issues/384
+                      // -------------------------------------------------------
 
-                      // click on repeat icon
-                      document.getElementById('repeat_container_large_player').addEventListener('click', function(event) {
-                        var repeatState = (document.getElementById('repeat_container_large_player').className.includes('amplitude-repeat-on')) ? true : false;
-                        Amplitude.setRepeat(repeatState)
-                      });
+                      // add listeners to all SkipForwardButtons found
+                      var largePlayerSkipForwardButtons = document.getElementsByClassName("large-player-skip-forward");
+                      for (var i=0; i<largePlayerSkipForwardButtons.length; i++) {
+                        if (largePlayerSkipForwardButtons[i].id === 'skip-forward_{{player.id}}') {
+                          if (largePlayerSkipForwardButtons[i].dataset.amplitudeSource === 'youtube') {
+                            largePlayerSkipForwardButtons[i].addEventListener('click', function(event) {
+                              const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
+                              //const duration    = Amplitude.getSongDuration();
+                              //const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
+                              //const targetTime  = parseFloat(currentTime + skipOffset);
+
+                              // if (currentTime > 0) {
+                              //   Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
+                              // }
+                            }); // END EventListener 'click
+                          } else {
+                            largePlayerSkipForwardButtons[i].addEventListener('click', function(event) {
+                              const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
+                              const duration    = Amplitude.getSongDuration();
+                              const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
+                              const targetTime  = parseFloat(currentTime + skipOffset);
+
+                              if (currentTime > 0) {
+                                Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
+                              }
+                            }); // END EventListener 'click
+                          }
+
+                        } // END if ID
+                      } // END for SkipForwardButtons
+
+                      // add listeners to all SkipBackwardButtons found
+                      var largePlayerSkipBackwardButtons = document.getElementsByClassName("large-player-skip-backward");
+                      for (var i=0; i<largePlayerSkipBackwardButtons.length; i++) {
+                        if (largePlayerSkipBackwardButtons[i].id === 'skip-backward_{{player.id}}') {
+                          if (largePlayerSkipBackwardButtons[i].dataset.amplitudeSource === 'youtube') {
+                            largePlayerSkipBackwardButtons[i].addEventListener('click', function(event) {
+                              const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
+                            }); // END EventListener 'click'
+                          } else {
+                            largePlayerSkipBackwardButtons[i].addEventListener('click', function(event) {
+                              const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
+                              const duration    = Amplitude.getSongDuration();
+                              const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
+                              const targetTime  = parseFloat(currentTime - skipOffset);
+
+                              if (currentTime > 0) {
+                                Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
+                              }
+                            }); // END EventListener 'click'
+                          }
+
+                        } // END if ID
+                      } // END for SkipBackwardButtons
+
+                      // click on shuffle button
+                      var largePlayerShuffleButton = document.getElementById('large_player_shuffle');
+                      if (largePlayerShuffleButton) {
+                        largePlayerShuffleButton.addEventListener('click', function(event) {
+                          var shuffleState = (document.getElementById('large_player_shuffle').className.includes('amplitude-shuffle-on')) ? true : false;
+                          Amplitude.setShuffle(shuffleState)
+                        }); // END EventListener 'click'
+                      } // END largePlayerShuffleButton
+
+                      // click on repeat button
+                      var largePlayerRepeatButton = document.getElementById('large_player_repeat');
+                      if (largePlayerShuffleButton) {
+                        largePlayerRepeatButton.addEventListener('click', function(event) {
+                          var repeatState = (document.getElementById('large_player_repeat').className.includes('amplitude-repeat-on')) ? true : false;
+                          Amplitude.setRepeat(repeatState)
+                        }); // END EventListener 'click'
+                      } // END largePlayerRepeatButton
 
                       // enable|disable scrolling on playlist
                       // -------------------------------------------------------
@@ -763,7 +938,9 @@ j1.adapter.amplitude = ((j1, window) => {
 
                         if (songsInPlaylist.length <= 8) {
                           const titleListLargePlayer = document.getElementById('large_player_title_list_' + playListName);
-                          titleListLargePlayer.classList.add('hide-scrollbar');
+                          if (titleListLargePlayer !== null) {
+                            titleListLargePlayer.classList.add('hide-scrollbar');
+                          }
                         }
 
                         // scroll to player top position
@@ -823,13 +1000,13 @@ j1.adapter.amplitude = ((j1, window) => {
                     // finished messages
                     // ---------------------------------------------------------
                     logger.debug('\n' + 'current player state: ' + amplitudePlayerState);
-                    logger.debug('\n' + 'setup player specific UI events on ID #{{player_id}}: finished');
+                    logger.debug('\n' + 'setup player specific UI events on ID #{{player.id}}: finished');
 
                     clearInterval(dependencies_met_api_initialized);
                   } // END if apiInitialized
                 }, 10); // END dependencies_met_api_initialized
 
-                clearInterval(load_dependencies['dependencies_met_player_loaded_{{player_id}}']);
+                clearInterval(load_dependencies['dependencies_met_player_loaded_{{player.id}}']);
               } // END if xhrLoadState success
             }, 10); // END dependencies_met_html_loaded