assets/theme/j1/adapter/js/amplitude.js in j1-template-2024.3.13 vs assets/theme/j1/adapter/js/amplitude.js in j1-template-2024.3.14
- old
+ new
@@ -111,10 +111,13 @@
var endTimeModule;
var timeSeconds;
// amplitude api settings
// ----------------------
+ var ytpSongIndex = "0";
+ var ytpAutoPlay = false;
+ var ytpLoop = true;
var playLists = {};
var playersUILoaded = { state: false };
var apiInitialized = { state: false };
var playList;
var playerID;
@@ -123,36 +126,60 @@
var playListName;
var amplitudePlayerState;
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
// ---------------------------------------------------------------------------
return {
// -------------------------------------------------------------------------
@@ -187,13 +214,12 @@
// -----------------------------------------------------------------------
var dependencies_met_page_ready = setInterval (() => {
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');
logger.debug('\n' + 'module state: ' + _this.getState());
logger.info('\n' + 'module is being initialized');
@@ -215,61 +241,31 @@
// inititialize amplitude api
// -------------------------------------------------------------------
var dependencies_met_players_loaded = setInterval (() => {
if (playersUILoaded.state) {
_this.initApi(songs);
+ // var playbackRate = ytPlayer.getPlaybackRate();
clearInterval(dependencies_met_players_loaded);
} // END if playersUILoaded
}, 10); // END dependencies_met_players_loaded
// -------------------------------------------------------------------
// initialize player specific UI events
// -------------------------------------------------------------------
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);
} // END if apiInitialized
}, 10); // END dependencies_met_api_initialized
clearInterval(dependencies_met_page_ready);
} // END pageVisible
}, 10); // END dependencies_met_page_ready
+
}, // END init
// -------------------------------------------------------------------------
// Create global playlist|songs (API)
// -------------------------------------------------------------------------
@@ -337,46 +333,45 @@
// initialize HTML portion (UI) for all players configured|enabled
// -----------------------------------------------------------------------
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
{% endif %} {% endfor %}
@@ -456,11 +451,12 @@
{{playlists}} {{playlist}} {% if playlists_processed == playlists_enabled %}{% else %},{% endif %}
{% endcapture %}
{% 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',
37: 'prev',
39: 'next'
@@ -537,13 +533,14 @@
// waveforms: {
// sample_rate: playerWaveformSampleRate
// },
continue_next: playerPlayNextTitle,
volume: playerVolumeValue,
- volume_decrement: playerVolumeDecrement,
- volume_increment: playerVolumeIncrement
+ volume_decrement: playerVolumeSliderStep,
+ volume_increment: playerVolumeSliderStep
}); // END Amplitude init
+
}, // END initApi
// -------------------------------------------------------------------------
// initPlayerUiEvents
// -------------------------------------------------------------------------
@@ -552,30 +549,29 @@
var dependencies_met_player_instances_initialized = setInterval (() => {
if (apiInitialized.state) {
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}}';
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);
+ 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}}'];
if (xhrLoadState === 'success') {
@@ -584,28 +580,29 @@
if (playerAudioInfo) {
var infoLinks = document.getElementsByClassName('audio-info-link');
_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) {
amplitudePlayerState = Amplitude.getPlayerState();
{% if player.id contains 'mini' %}
// ---------------------------------------------------------
// START mini player UI events
//
- if (document.getElementById(playerID) !== null) {
+ if (document.getElementById('{{player.id}}') !== null) {
// click on progress bar
// -------------------------------------------------------
// getElementsByClassName returns an Array-like object
@@ -627,27 +624,28 @@
{% if player.id contains 'compact' %}
// ---------------------------------------------------------
// 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
// -------------------------------------------------------
// 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;
// scroll player to top position
const targetDiv = document.getElementById("show_playlist_{{player.id}}");
@@ -668,29 +666,31 @@
return false;
} else {
$('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
// -------------------------------------------------------
// getElementsByClassName returns an Array-like object
var progressBars = document.getElementsByClassName("compact-player-progress");
@@ -701,71 +701,248 @@
var offset = this.getBoundingClientRect();
var xpos = event.pageX - offset.left;
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 %}
{% 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();
var xpos = event.pageX - offset.left;
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
// -------------------------------------------------------
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);
- titleListLargePlayer.classList.add('hide-scrollbar');
+ if (titleListLargePlayer !== null) {
+ titleListLargePlayer.classList.add('hide-scrollbar');
+ }
}
// scroll to player top position
// -------------------------------------------------------
var playlistHeader = document.getElementById("playlist_header_{{player.id}}");
@@ -821,16 +998,16 @@
// END configured player features
// 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
{% endif %} {% endfor %}