j1-template 2024.3.16 → 2024.3.17

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

@@ -85,7 +85,7 @@ regenerate:                             true
 "use strict";
 j1.adapter.amplitude = ((j1, window) => {
 
-  // göobal settings
+  // global settings
   // ---------------------------------------------------------------------------
   var environment   = '{{environment}}';
   var cookie_names  = j1.getCookieNames();
@@ -96,7 +96,7 @@ j1.adapter.amplitude = ((j1, window) => {
   // ---------------------------------------------------------------------------
 
   // control|logging
-  // ---------------
+  // ---------------------------------------------------------------------------
   var _this;
   var logger;
   var logText;
@@ -104,15 +104,15 @@ j1.adapter.amplitude = ((j1, window) => {
   var toText;
 
   // date|time monitoring
-  //---------------------
+  //----------------------------------------------------------------------------
   var startTime;
   var endTime;
   var startTimeModule;
   var endTimeModule;
   var timeSeconds;
 
-  // amplitude api settings
-  // ----------------------
+  // AmplitudeJS API settings
+  // ---------------------------------------------------------------------------
   var ytpSongIndex    = "0";
   var ytpAutoPlay     = false;
   var ytpLoop         = true;
@@ -131,9 +131,8 @@ j1.adapter.amplitude = ((j1, window) => {
   var ytPlayer;
   var ytpPlaybackRate
 
-  // amplitude player (instance) settings
-  // NOTE: slider VALUE is set by Adapter|Amplitude API
-  // ------------------------------------
+  // AmplitudeJS Player DEFAULT settings
+  // ---------------------------------------------------------------------------
   var xhrLoadState;
   var dependency;
   var playerCounter                     = 0;
@@ -141,7 +140,9 @@ j1.adapter.amplitude = ((j1, window) => {
   var playersProcessed                  = [];
   var playersHtmlLoaded                 = false;
   var processingPlayersFinished         = false;
+  
   var playerAudioInfo                   = ('{{amplitude_defaults.playlist.audio_info}}' === 'true') ? true : false;
+  var playerDefaultPluginManager        = ('{{amplitude_defaults.player.plugin_manager.enabled}}' === 'true') ? true : false;
   var playerDefaultType                 = '{{amplitude_defaults.player.type}}';
   var playerVolumeValue                 = '{{amplitude_defaults.player.volume_slider.preset_value}}';
   var playerVolumeSliderStep            = '{{amplitude_defaults.player.volume_slider.slider_step}}';
@@ -152,9 +153,29 @@ j1.adapter.amplitude = ((j1, window) => {
   var playerDelayNextTitle              = '{{amplitude_defaults.player.delay_next_title}}';
   var playerForwardBackwardSkipSeconds  = '{{amplitude_defaults.player.forward_backward_skip_seconds}}';
 
-  // unused settings
+  var pluginManagerEnabled;
+  var playerExistsInPage;
+
+  var pluginManagerRunOnce = false;
+
+  // YT player settings
+// -----------------------------------------------------------------------------
+// const YT_PLAYER_STATE = {
+//   not_started:        -1,
+//   ended:               0,
+//   playing:             1,
+//   paused:              2,
+//   buffering:           3,
+//   video_cued:          5
+// };
+
+  // AmplitudeJS settings curently NOT used
   // ---------------------------------------------------------------------------
-  // var playerWaveformSampleRate       = '{{amplitude_defaults.player.waveform_sample_rate}}';
+  var playerWaveformsEnabled           = '{{amplitude_defaults.player.waveforms.enabled}}';
+  var playerWaveformsSampleRate        = '{{amplitude_defaults.player.waveforms.sample_rate}}';
+  var playerVisualizationEnabled       = '{{amplitude_defaults.player.visualization.enabled}}';
+  var playerVisualizationName          = '{{amplitude_defaults.player.visualization.name}}';
+
 
   // ---------------------------------------------------------------------------
   // helper functions
@@ -185,11 +206,21 @@ j1.adapter.amplitude = ((j1, window) => {
       amplitudeSettings = $.extend({}, {{amplitude_settings | replace: 'nil', 'null' | replace: '=>', ':' }});
       amplitudeOptions  = $.extend(true, {}, amplitudeDefaults, amplitudeSettings);
 
+      // save AJS player setiings for later use (e.g. the AJS plugins)
+      // j1.adapter.amplitude['amplitudeDefaults'] = amplitudeDefaults;
+      // j1.adapter.amplitude['amplitudeSettings'] = amplitudeSettings;
+      // j1.adapter.amplitude['amplitudeOptions']  = amplitudeOptions;
+
       // -----------------------------------------------------------------------
       // control|logging settings
       // -----------------------------------------------------------------------
-      _this             = j1.adapter.amplitude;
-      logger            = log4javascript.getLogger('j1.adapter.amplitude');
+      _this                     = j1.adapter.amplitude;
+      logger                    = log4javascript.getLogger('j1.adapter.amplitude');
+
+      // prepare data element for later use
+      j1.adapter.amplitude.data             = {};
+      j1.adapter.amplitude.data.ytpGlobals  = {};
+      j1.adapter.amplitude.data.ytPlayers   = {};
 
       // -----------------------------------------------------------------------
       // module initializer
@@ -283,11 +314,10 @@ j1.adapter.amplitude = ((j1, window) => {
                 song.cover_art_url = item[key];
                 continue;
               } else if (key === 'audio_info') {
-                if (playerAudioInfo) {
-                  song.audio_info = item[key];
-                } else {
-                  song.audio_info = '';
-                } // END if playerAudioInfo
+                song.audio_info = item[key];
+                continue;
+              } else if (key === 'rating') {
+                song.rating = item[key];
                 continue;
               } else {
                 song[key] = item[key];
@@ -400,6 +430,8 @@ j1.adapter.amplitude = ((j1, window) => {
             "artist":         "{{item.artist}}",
             "album":          "{{item.name}}",
             "url":            "{{item.audio_base}}/{{item.audio}}",
+            "audio_info":     "{{item.audio_info}}",
+            "rating":         "{{item.rating}}",
             "cover_art_url":  "{{item.cover_image}}"
           }{% if forloop.last %}{% else %},{% endif %}
           {% endcapture %}
@@ -540,11 +572,11 @@ j1.adapter.amplitude = ((j1, window) => {
             {% assign xhr_data_path = amplitude_options.xhr_data_path %}
             {% capture xhr_container_id %}{{player.id}}_parent{% endcapture %}
 
-            playerID            = '{{player.id}}';
-            playerType          = '{{player.type}}';
-            playList            = '{{player.playlist}}';
-            playListName        = '{{player.playlist.name}}'
-            playListTitle       = '{{player.playlist.title}}';
+            playerID              = '{{player.id}}';
+            playerType            = '{{player.type}}';
+            playList              = '{{player.playlist}}';
+            playListName          = '{{player.playlist.name}}'
+            playListTitle         = '{{player.playlist.title}}';
             
             logger.debug('\n' + 'set playlist {{player.playlist}} on id #{{player.id}} with title: ' + playListTitle);
 
@@ -589,22 +621,33 @@ j1.adapter.amplitude = ((j1, window) => {
                     //
                     if (document.getElementById('{{player.id}}') !== null) {
 
-                      // click on progress bar
-                      // -------------------------------------------------------
-
+                      // add listeners to all progress bars found (mini-player)
                       // getElementsByClassName returns an Array-like object
+                      // -------------------------------------------------------
                       var progressBars = document.getElementsByClassName("mini-player-progress");
-
-                      // add listeners to all progress bars found
                       for (var i=0; i<progressBars.length; i++) {
+                        if (progressBars[i].dataset.amplitudeSource === 'youtube') {
+                          // do nothing
+                        } else {
                           progressBars[i].addEventListener('click', function(event) {
                             var offset = this.getBoundingClientRect();
                             var xpos   = event.pageX - offset.left;
-
+  
                             Amplitude.setSongPlayedPercentage(
                               (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
-                          });
-                      }
+                          }); // END EventListener 'click'
+                        }
+                      } // END for
+
+                      // for (var i=0; i<progressBars.length; i++) {
+                      //     progressBars[i].addEventListener('click', function(event) {
+                      //       var offset = this.getBoundingClientRect();
+                      //       var xpos   = event.pageX - offset.left;
+
+                      //       Amplitude.setSongPlayedPercentage(
+                      //         (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
+                      //     });
+                      // }
 
                     } // END mini player UI events
                     {% endif %}
@@ -676,14 +719,14 @@ j1.adapter.amplitude = ((j1, window) => {
                       }); // END EventListener 'click' (compact player|show playlist)
                     } // END if hidePlaylist
 
-                    // click on progress bar
+                    // add listeners to all progress bars found (compact-player)
+                    // getElementsByClassName returns an Array-like object
                     // -------------------------------------------------------
-
-                      // getElementsByClassName returns an Array-like object
-                      var progressBars = document.getElementsByClassName("compact-player-progress");
-
-                      // add listeners to all progress bars found
-                      for (var i=0; i<progressBars.length; i++) {
+                    var progressBars = document.getElementsByClassName("compact-player-progress");
+                    for (var i=0; i<progressBars.length; i++) {
+                      if (progressBars[i].dataset.amplitudeSource === 'youtube') {
+                        // do nothing
+                      } else {
                         progressBars[i].addEventListener('click', function(event) {
                           var offset = this.getBoundingClientRect();
                           var xpos   = event.pageX - offset.left;
@@ -691,7 +734,8 @@ j1.adapter.amplitude = ((j1, window) => {
                           Amplitude.setSongPlayedPercentage(
                             (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
                         }); // END EventListener 'click'
-                      } // END for
+                      }
+                    } // END for
 
                       // click on skip forward|backward (compact player)
                       // See: https://github.com/serversideup/amplitudejs/issues/384
@@ -759,85 +803,32 @@ j1.adapter.amplitude = ((j1, window) => {
                     //
                     if (document.getElementById('{{player.id}}') !== null) {
 
-                      // listener overloads for Youtube video (large player)
+                      // NOTE: listener overloads for video managed by plugin
                       // -------------------------------------------------------
 
                       // 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'
+                        // do nothing (managed by plugin)
                       }
 
                       // 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 EventListener 'click'
-                        } // END if Attribute
-                      } // END for
-
-                      // add listeners to all progress bars found
+                      // add listeners to all progress bars found (large-player)
                       // -------------------------------------------------------
                       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();
-                          var xpos   = event.pageX - offset.left;
-
-                          Amplitude.setSongPlayedPercentage(
-                            (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
-                        }); // END EventListener 'click'
+                        if (progressBars[i].dataset.amplitudeSource === 'youtube') {
+                          // do nothing (managed by plugin)
+                        } else {
+                          progressBars[i].addEventListener('click', function(event) {
+                            var offset = this.getBoundingClientRect();
+                            var xpos   = event.pageX - offset.left;
+  
+                            Amplitude.setSongPlayedPercentage(
+                              (parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
+                          }); // END EventListener 'click'
+                        }
                       } // END for
 
                       // click on skip forward|backward (large player)
@@ -849,16 +840,7 @@ j1.adapter.amplitude = ((j1, window) => {
                       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
+                            // do nothing (managed by plugin)
                           } else {
                             largePlayerSkipForwardButtons[i].addEventListener('click', function(event) {
                               const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
@@ -879,9 +861,7 @@ j1.adapter.amplitude = ((j1, window) => {
                       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'
+                            // do nothing (managed by plugin)
                           } else {
                             largePlayerSkipBackwardButtons[i].addEventListener('click', function(event) {
                               const skipOffset  = parseFloat(playerForwardBackwardSkipSeconds);
@@ -939,12 +919,34 @@ j1.adapter.amplitude = ((j1, window) => {
                         //   XL:     1200px          Large Desktop
                         //   XXL:    1400px          X Large Desktop
                         // -----------------------------------------------------
-                        var largePlayerPlaylistHeader = document.getElementById("playlist_header_{{player.id}}");
 
+                        var largePlayerTitleHeader = document.getElementById("large_player_title_header_{{player.id}}");
+                        largePlayerTitleHeader.addEventListener('click', function(event) {
+                          var playerRight     = document.getElementById("{{player.id}}");
+                          var playlistHeader  = document.getElementById("playlist_header_{{player.id}}");
+                          var scrollOffset    = (window.innerWidth >= 992) ? -130 : -44;
+
+                          // scroll player|playlist to top position (large player)
+                          //
+                          const targetDivPlayerRight            = playerRight;
+                          const targetDivPositionPlayerRight    = targetDivPlayerRight.offsetTop;
+                          const targetDivPlaylistHeader         = playlistHeader;
+                          const targetDivPositionplaylistHeader = targetDivPlaylistHeader.offsetTop;
+
+                          // NOTE: depending on WINDOW SIZE the relation changes to TOP POSITION (targetDivPosition)
+                          //
+                          if (targetDivPositionPlayerRight > targetDivPositionplaylistHeader) {
+                            window.scrollTo(0, targetDivPositionPlayerRight + targetDivPlaylistHeader.offsetParent.firstElementChild.clientHeight + scrollOffset);
+                          } else {
+                            window.scrollTo(0, targetDivPositionplaylistHeader + scrollOffset);
+                          }
+                        }); // END EventListener 'click' largePlayerTitleHeader
+
+                        var largePlayerPlaylistHeader = document.getElementById("playlist_header_{{player.id}}");
                         largePlayerPlaylistHeader.addEventListener('click', function(event) {
                           var playerRight     = document.getElementById("{{player.id}}");
                           var playlistHeader  = document.getElementById("playlist_header_{{player.id}}");
-                          var scrollOffset    = (window.innerWidth >= 992) ? -130 : -43;
+                          var scrollOffset    = (window.innerWidth >= 992) ? -130 : -44;
 
                           // scroll player|playlist to top position (large player)
                           //
@@ -961,7 +963,7 @@ j1.adapter.amplitude = ((j1, window) => {
                             window.scrollTo(0, targetDivPositionplaylistHeader + scrollOffset);
                           }
 
-                        }); // END EventListener largePlayerPlaylistHeader 'click'
+                        }); // END EventListener 'click' largePlayerPlaylistHeader
 
                         // disable scrolling (if window viewport >= BS Medium and above)
                         document.getElementById('large_player_right').addEventListener('mouseenter', function() {
@@ -1030,6 +1032,16 @@ j1.adapter.amplitude = ((j1, window) => {
                   } // END if apiInitialized
                 }, 10); // END dependencies_met_api_initialized
 
+                playerExistsInPage   = (document.getElementById('{{player.id}}_parent') !== null) ? true : false;
+                pluginManagerEnabled = ('{{player.plugin_manager.enabled}}'.length > 0 && '{{player.plugin_manager.enabled}}' === 'true') ? true : playerDefaultPluginManager;
+
+                if (playerExistsInPage && pluginManagerEnabled && !pluginManagerRunOnce) {
+                  _this.pluginManager('{{player.plugin_manager.plugins}}');
+
+                  // make sure the plugin is loaded|run only ONCE
+                  pluginManagerRunOnce = true;
+                }
+
                 clearInterval(load_dependencies['dependencies_met_player_loaded_{{player.id}}']);
               } // END if xhrLoadState success
             }, 10); // END dependencies_met_html_loaded
@@ -1098,6 +1110,25 @@ j1.adapter.amplitude = ((j1, window) => {
       logger.debug('\n' + 'initializing title events for player on ID ' + '#' + playerID + ': finished');
     }, // END songEvents
 
+    // -------------------------------------------------------------------------
+    // pluginManager()
+    // 
+    // -------------------------------------------------------------------------
+    pluginManager: (plugin) => {
+//    if (plugin === 'ytp' && j1.adapter.amplitude['ytPlayerReady'] === undefined ) {
+      if (plugin === 'ytp') {        
+        var tech;
+        var techScript;
+
+        tech        = document.createElement('script');
+        tech.id     = 'tech_' + plugin;
+        tech.src    = '/assets/theme/j1/modules/amplitudejs/js/tech/' + plugin + '.js';
+        techScript  = document.getElementsByTagName('script')[0];
+
+        techScript.parentNode.insertBefore(tech, techScript);
+      }
+    }, // END pluginManager
+
     // -------------------------------------------------------------------------
     // messageHandler()
     // manage messages send from other J1 modules

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

@@ -3136,9 +3136,9 @@ var j1 = ((options) => {
 
       // initialize event handler for window/history/back on <ESC>
       //
-      window.onkeyup = function (event) {
-        if (event.keyCode == 27) window.history.back();
-      };
+      // window.onkeyup = function (event) {
+      //   if (event.keyCode == 27) window.history.back();
+      // };
 
       $("a[href*='#']:not([href='#'])").click(function() {
         if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

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

@@ -454,7 +454,8 @@ j1.adapter.masterslider = ((j1, window) => {
 
         logger.debug('\n' + 'slider events are being initialized on id: ' + index);
 
-        slider[index].api.addEventListener(MSSliderEvent.WAITING, (e) => {
+        // slider[index].api.addEventListener(MSSliderEvent.WAITING, (e) => {
+        slider[index].api.addEventListener(MSSliderEvent.WAITING, function(e) {
           var controller      = e.target.view.controller;
           var controllerValue = e.target.view.controller.value;
           var isLoading       = e.target.currentSlide.$loading.length;