assets/theme/j1/adapter/js/amplitude.js in j1-template-2024.3.15 vs assets/theme/j1/adapter/js/amplitude.js in j1-template-2024.3.16
- old
+ new
@@ -85,14 +85,14 @@
"use strict";
j1.adapter.amplitude = ((j1, window) => {
// göobal settings
// ---------------------------------------------------------------------------
- var environment = '{{environment}}';
- var cookie_names = j1.getCookieNames();
- var user_state = j1.readCookie(cookie_names.user_state);
- var state = 'not_started';
+ var environment = '{{environment}}';
+ var cookie_names = j1.getCookieNames();
+ var user_state = j1.readCookie(cookie_names.user_state);
+ var state = 'not_started';
// module settings
// ---------------------------------------------------------------------------
// control|logging
@@ -155,27 +155,10 @@
// unused settings
// ---------------------------------------------------------------------------
// 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
@@ -206,11 +189,10 @@
// control|logging settings
// -----------------------------------------------------------------------
_this = j1.adapter.amplitude;
logger = log4javascript.getLogger('j1.adapter.amplitude');
-
// -----------------------------------------------------------------------
// module initializer
// -----------------------------------------------------------------------
var dependencies_met_page_ready = setInterval (() => {
var pageState = $('#content').css("display");
@@ -222,12 +204,10 @@
_this.setState('started');
logger.debug('\n' + 'module state: ' + _this.getState());
logger.info('\n' + 'module is being initialized');
- // jQuery('.scrollbar-rail').scrollbar();
-
// -------------------------------------------------------------------
// create global playlist (songs)
// -------------------------------------------------------------------
var songs = [];
_this.songLoader(songs);
@@ -353,11 +333,11 @@
'j1.adapter.amplitude',
'data_loaded'
);
// dynamic loader variable to setup the player on ID {{player.id}}
- dependency = 'dependencies_met_html_loaded_{{player.id}}';
+ dependency = 'dependencies_met_html_loaded_{{player.id}}';
load_dependencies[dependency] = '';
// ---------------------------------------------------------------------
// initialize amplitude instance (when player UI loaded)
// ---------------------------------------------------------------------
@@ -394,11 +374,10 @@
// -------------------------------------------------------------------------
// initApi
// -------------------------------------------------------------------------
initApi: (songlist) => {
-
logger.info('\n' + 'initialze API: started');
{% comment %} collect playlists
-------------------------------------------------------------------------- {% endcomment %}
{% assign playlists_enabled = 0 %}
@@ -454,10 +433,11 @@
{% endif %} {% endfor %}
// See: https://521dimensions.com/open-source/amplitudejs/docs
// NOTE: slider VALUE (volume) is set by DEFAULT settings (player)
Amplitude.init({
+
bindings: {
33: 'play_pause',
37: 'prev',
39: 'next'
},
@@ -528,17 +508,20 @@
}, 150);
} // END if playing
} // END if pause on next title
}
}, // END callbacks
+
// waveforms: {
// sample_rate: playerWaveformSampleRate
// },
+
continue_next: playerPlayNextTitle,
volume: playerVolumeValue,
volume_decrement: playerVolumeSliderStep,
volume_increment: playerVolumeSliderStep
+
}); // END Amplitude init
}, // END initApi
// -------------------------------------------------------------------------
@@ -546,14 +529,14 @@
// -------------------------------------------------------------------------
initPlayerUiEvents: () => {
var dependencies_met_player_instances_initialized = setInterval (() => {
if (apiInitialized.state) {
- logger.info('\n' + 'initialize player specific UI events: started');
-
var parentContainer = (document.getElementById('{{xhr_container_id}}') !== null) ? true : false;
var parentContainerExist = ($('#' + '{{xhr_container_id}}')[0] !== undefined) ? true : false;
+
+ logger.info('\n' + 'initialize player specific UI events: started');
{% for player in amplitude_options.players %} {% if player.enabled %}
{% assign xhr_data_path = amplitude_options.xhr_data_path %}
{% capture xhr_container_id %}{{player.id}}_parent{% endcapture %}
@@ -564,11 +547,11 @@
playListTitle = '{{player.playlist.title}}';
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}}';
+ dependency = 'dependencies_met_player_loaded_{{player.id}}';
load_dependencies[dependency] = '';
// -----------------------------------------------------------------
// initialize player instance (when player UI is loaded)
// -----------------------------------------------------------------
@@ -576,11 +559,10 @@
// check if HTML portion of the player is loaded successfully
var xhrLoadState = j1.xhrDOMState['#' + '{{xhr_container_id}}'];
var playerExistsInPage = ($('#' + '{{xhr_container_id}}')[0] !== undefined) ? true : false;
if (xhrLoadState === 'success' && playerExistsInPage) {
-// if (xhrLoadState === 'success') {
// set song (title) specific audio info links
// -------------------------------------------------------------
if (playerAudioInfo) {
var infoLinks = document.getElementsByClassName('audio-info-link');
@@ -628,15 +610,15 @@
{% endif %}
{% if player.id contains 'compact' %}
// ---------------------------------------------------------
// START compact player UI events
- //
+ //
if (document.getElementById('{{player.id}}') !== null) {
- // show|hide scrollbar in playlist
- // -------------------------------------------------------
+ // show|hide scrollbar in playlist (compact player)
+ // -------------------------------------------------------
const songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
if (songsInPlaylist.length <= 8) {
const titleListCompactPlayer = document.getElementById('compact_player_title_list_' + playListName);
if (titleListCompactPlayer !== null) {
titleListCompactPlayer.classList.add('hide-scrollbar');
@@ -672,32 +654,32 @@
} else {
$('body').addClass('stop-scrolling');
}
}
}); // END EventListener 'click' (compact player|show playlist)
- }
+ } // END if showPlaylist
- // 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}}");
+ // 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}}");
- 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)
+ } // END if hidePlaylist
- // click on progress bar
- // -------------------------------------------------------
+ // click on progress bar
+ // -------------------------------------------------------
// getElementsByClassName returns an Array-like object
var progressBars = document.getElementsByClassName("compact-player-progress");
// add listeners to all progress bars found
@@ -707,11 +689,11 @@
var xpos = event.pageX - offset.left;
Amplitude.setSongPlayedPercentage(
(parseFloat(xpos)/parseFloat(this.offsetWidth))*100);
}); // END EventListener 'click'
- }
+ } // END for
// click on skip forward|backward (compact player)
// See: https://github.com/serversideup/amplitudejs/issues/384
// -------------------------------------------------------
@@ -725,12 +707,12 @@
const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
const targetTime = parseFloat(currentTime + skipOffset);
if (currentTime > 0) {
Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
- } // END EventListener 'click'
- });
+ }
+ }); // END EventListener 'click'
} // END if ID
} // END for SkipForwardButtons
// add listeners to all SkipBackwardButtons found
var compactPlayerSkipBackwardButtons = document.getElementsByClassName("compact-player-skip-backward");
@@ -742,29 +724,31 @@
const currentTime = parseFloat(Amplitude.getSongPlayedSeconds());
const targetTime = parseFloat(currentTime - skipOffset);
if (currentTime > 0) {
Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
- } // END EventListener 'click'
- });
+ }
+ }); // 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
@@ -781,11 +765,11 @@
// 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();
+ var songIndex = ytpSongIndex; // Amplitude.getActiveIndex();
}); // END EventListener 'click'
}
// click on play_pause button
@@ -825,23 +809,23 @@
// 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();
+ 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");
- });
+ ytpSongIndex = this.getAttribute("data-amplitude-song-index");
+ }); // END EventListener 'click'
} // END if Attribute
} // END for
// add listeners to all progress bars found
// -------------------------------------------------------
@@ -852,11 +836,11 @@
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)
// See: https://github.com/serversideup/amplitudejs/issues/384
// -------------------------------------------------------
@@ -883,13 +867,12 @@
const targetTime = parseFloat(currentTime + skipOffset);
if (currentTime > 0) {
Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
}
- }); // END EventListener 'click
- }
-
+ }); // END EventListener 'click'
+ } // END else
} // END if ID
} // END for SkipForwardButtons
// add listeners to all SkipBackwardButtons found
var largePlayerSkipBackwardButtons = document.getElementsByClassName("large-player-skip-backward");
@@ -908,12 +891,11 @@
if (currentTime > 0) {
Amplitude.setSongPlayedPercentage((targetTime / duration) * 100);
}
}); // END EventListener 'click'
- }
-
+ } // END else
} // END if ID
} // END for SkipBackwardButtons
// click on shuffle button
var largePlayerShuffleButton = document.getElementById('large_player_shuffle');
@@ -929,40 +911,60 @@
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
+ } // END if largePlayerRepeatButton
- // enable|disable scrolling on playlist
+ // enable|disable scrolling on playlist (large player)
// -------------------------------------------------------
if (document.getElementById('large_player_right') !== null) {
// show|hide scrollbar in playlist
- // -------------------------------------------------------
+ // -----------------------------------------------------
const songsInPlaylist = Amplitude.getSongsInPlaylist(playListName);
if (songsInPlaylist.length <= 8) {
const titleListLargePlayer = document.getElementById('large_player_title_list_' + playListName);
if (titleListLargePlayer !== null) {
titleListLargePlayer.classList.add('hide-scrollbar');
}
}
- // scroll to player top position
- // -------------------------------------------------------
- var playlistHeader = document.getElementById("playlist_header_{{player.id}}");
+ // scroll to player top position (large player)
+ //
+ // Bootstrap grid breakpoints
+ // SN: 576px Mobile
+ // MD: 768px Small Desktop|Tablet
+ // LG: 992px Default Desktop
+ // XL: 1200px Large Desktop
+ // XXL: 1400px X Large Desktop
+ // -----------------------------------------------------
+ var largePlayerPlaylistHeader = document.getElementById("playlist_header_{{player.id}}");
- playlistHeader.addEventListener('click', function(event) {
- var scrollOffset = (window.innerWidth >= 720) ? -130 : -110;
+ 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;
- // scroll player to top position
- const targetDiv = document.getElementById("playlist_header_{{player.id}}");
- const targetDivPosition = targetDiv.offsetTop;
- window.scrollTo(0, targetDivPosition + scrollOffset);
- }); // END EventListener 'click'
+ // 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 largePlayerPlaylistHeader 'click'
+
// disable scrolling (if window viewport >= BS Medium and above)
document.getElementById('large_player_right').addEventListener('mouseenter', function() {
if (window.innerWidth >= 720) {
if ($('body').hasClass('stop-scrolling')) {
return false;
@@ -979,10 +981,27 @@
}
}); // END EventListener 'mouseleave'
} // END enable|disable scrolling on playlist
+ // set volume slider presets (for the player when exists|enabled)
+ //
+ var volumeSlider = document.getElementById('volume_slider_{{player.id}}');
+ if (volumeSlider !== null) {
+ const volumeMin = parseInt('{{player.volume_slider.min_value}}');
+ const volumeMax = parseInt('{{player.volume_slider.max_value}}');
+ const volumeValue = parseInt('{{player.volume_slider.preset_value}}');
+ const volumeStep = parseInt('{{player.volume_slider.slider_step}}');
+
+ // if player has NO slider presets, use amplitude defaults
+ //
+ volumeSlider.min = (isNaN(volumeMin)) ? parseInt('{{amplitude_defaults.player.volume_slider.min_value}}') : volumeMin;
+ volumeSlider.max = (isNaN(volumeMax)) ? parseInt('{{amplitude_defaults.player.volume_slider.max_value}}') : volumeMax;
+ volumeSlider.value = (isNaN(volumeValue)) ? parseInt('{{amplitude_defaults.player.volume_slider.preset_value}}') : volumeValue;
+ volumeSlider.step = (isNaN(volumeStep)) ? parseInt('{{amplitude_defaults.player.volume_slider.slider_step}}') : volumeStep;
+ } // END volumeSlider exists
+
} // END large player UI events
{% endif %}
// ---------------------------------------------------------
// START configured player features
@@ -1133,6 +1152,6 @@
{{ cache|minifyJS }}
{%- else -%}
{{ cache|strip_empty_lines }}
{%- endif -%}
-{%- assign cache = false -%}
+{%- assign cache = false -%}
\ No newline at end of file