AJAX pagination causing HTML5 player to not display

HI @janekkrause

Thanks for the message and the heads up on this. Would you please send an email to [email protected] with the site details with the subject line: ATTN: Jonathan ?

We’ll take things from there and will post information about resolution here for everyone if need be.

I’m trying to solve the same issue. I see in class-ssp-frontend.php there’s a bunch of JavaScript that sets up the HTML5 podcast player, but it’s wrapped in a jQuery( document ).ready( function($){ … }); function, which when loading the post content over AJAX never runs.

I would just copy the JavaScipt over to my theme’s main js file and trigger the HTML5 player setup with the AJAX success callback—but the JavaScript is pulling a bunch of PHP variables I won’t have access to

Hi all,

We’ve taken a look into this issue and believe we have a path towards resolution but it will require a fair bit of reworking how the player is triggered as @randybruder mentioned. We’re going to begin working on this shortly and this will be included in a future release of the plugin but it may be a week or so until we can get this done. If there’s a workaround in the meantime as Randy mentioned then that might be a good idea for now.

Oh damn, even a week is ridiculously fast to fix something like this. That’s awesome, and thank you for the help!

Thanks Craig, appreciate the help @podcastmotor

I’ll try implementing @randybruder fix, thanks for doing the hard yards on that one Randy.

@podcastmotor

Another thing along this line (this is way more of a feature request than a bug fix):
It’d be nice to have an option for the HTML5 player to have only one, static player (like fixed along the bottom of the page, like how soundcloud.com or beta.p-e-o-p-l-e.com does it.) That way, along with AJAX page loading (I’m using barbajs.org) you could continue to listen to the same podcast episode uninterrupted, even between pages. That’d also be a pretty major rewrite of some of the code, though, so I don’t know if it’d be worth it.

• This reply was modified 6 years, 8 months ago by randybruder.

Hi all,

Thanks for the input and feedback on this one. @randybruder how is the fix going that you suggested before? Is that solving the pagination/Ajax issue for now?

We’ve taken a closer look at what it would take to refactor this to get the player loading with AJAX and it may take a bit longer than originally anticipated. If the theme based fix is working for you guys then great, but if not let us know and we’ll see if we can get an intermediate fix in place with you.

Oh, to be honest I never attempted my fix because you said you’d rework the plugin. I’ll take a stab at actually implementing it, and I’ll post my results here.

@podcastmotor I’ve just disabled Ajax loading for my podcasts, I’m happy to wait for a proper fix. Thanks for offering though.

So I got it to work, by rewriting the JavaScript I found in the class-ssp-frontend.php file. I wrapped the code in a initPodcastPlayers(); function that requires the new container DOM element passed to it (since I’m using AJAX to transition between pages, and I don’t want to initialize any podcast players on the old page, and only search within the new container for players.) Then, I just call initPodcastPlayers($new_container); from the success of my AJAX call, and I’m all good.

The function iterated over every .ssp-player found on the page, and then initializes their associated player.

Instead of using dynamic variable names (creating the Javascript variable by using a PHP variable), I had to resort to creating an array of players and an array of setIntervals. The players are referenced by an ever increasing index. While initializing the player, one of the first things the function does is modify the necessary IDs: #ssp_player_id_INDEX, #ssp_playback_speedINDEX, and #waveformINDEX with new index numbers, since going from a page with a player(s) to a new page with player(s) would cause issues since the plug-in just makes the first player on the same page have the same ID, the second player on each page have the same ID, and so on.

Here’s the Javascript I put in my theme’s .js file:

String.prototype.toFormattedDuration = function() {
	var sec_num = parseInt(this, 10); // don't forget the second param
	var hours = Math.floor(sec_num / 3600);
	var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
	var seconds = sec_num - (hours * 3600) - (minutes * 60);

	if (hours < 10) {
		hours = "0" + hours;
	}
	if (minutes < 10) {
		minutes = "0" + minutes;
	}
	if (seconds < 10) {
		seconds = "0" + seconds;
	}
	return hours > 0 ? (hours + ':' + minutes + ':' + seconds) : (minutes + ':' + seconds);
}

// Can't have dynamic variable names. So this needs to be an array, and can be referenced by the ssp_player_index.
var sspUpdateDuration = new Array();
var ssp_player = new Array();

// Starting this at an already ridiculously high number, just to be safe.
var ssp_player_cumulative_index = 1000;

function initPodcastPlayers($newContainer) {
	
	$newContainer.find(".ssp-player").each(function(index){
		
		// Need to determine the source file of the plater.
		var srcFile = $(this).find('.ssp-episode-download').attr('href').replace('?ref=download','');
		var ssp_player_index = index + ssp_player_cumulative_index;
		
		// Since the player id can be shared between a player on the current page and the next AJAX-loaded page, set up new plater ids with our ever incresing index.
		$(this).attr('id', 'ssp_player_id_' + ssp_player_index);
		$(this).find('.ssp-playback-speed-label-wrapper').children('div').attr('id', 'ssp_playback_speed' + ssp_player_index);
		$(this).find('.ssp-wave').attr('id', 'waveform' + ssp_player_index);
		
		// Create Player
		ssp_player[ssp_player_index] = WaveSurfer.create({
			container: '#waveform' + ssp_player_index,
			waveColor: '#444',
			progressColor: '#28c0e1', // Screw it, hard code this.
			barWidth: 3,
			barHeight: 15,
			height: 8,
			hideScrollbar: true,
			skipLength: 30,
			backend: 'MediaElement'
		});
		
		// Setting up a variable reference since the event handler functions can't reference the array.
		var $el = ssp_player[ssp_player_index];
		
		//Set player track
		$el.track = srcFile;
		
		/**
		 * Setting and drawing the peaks seems to be required for the 'load on play' functionality to work
		 */
		//Set peaks
		$el.backend.peaks = [0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108];
		
		//Draw peaks
		$el.drawBuffer();
		
		//Variable to check if the track is loaded
		$el.loaded = false;
		
		// @todo Track Player errors
		
		// On Media Ready
		$el.on('ready', function(e) {
		
			if (!$el.loaded) {
				$el.loaded = true;
				$el.play();
			}
		
			$('#ssp_player_id_' + ssp_player_index + ' #sspTotalDuration').text($el.getDuration().toString().toFormattedDuration());
			$('#ssp_player_id_' + ssp_player_index + ' #sspPlayedDuration').text($el.getCurrentTime().toString().toFormattedDuration());
		});
		
		// On Media Played
		$el.on('play', function(e) {
		
			if (!$el.loaded) {
				$el.load($el.track, $el.backend.peaks);
			}
		
			// @todo Track Podcast Specific Play
		
			$('#ssp_player_id_' + ssp_player_index + ' #ssp-play-pause .ssp-icon').removeClass().addClass('ssp-icon ssp-icon-pause_icon');
			$('#ssp_player_id_' + ssp_player_index + ' #sspPlayedDuration').text($el.getCurrentTime().toString().toFormattedDuration())
		
			sspUpdateDuration[ssp_player_index] = setInterval(function() {
				$('#ssp_player_id_' + ssp_player_index + ' #sspPlayedDuration').text($el.getCurrentTime().toString().toFormattedDuration());
			}, 100);
		
		});
		
		// On Media Paused
		$el.on('pause', function(e) {
		
			// @todo Track Podcast Specific Pause
		
			$('#ssp_player_id_' + ssp_player_index + ' #ssp-play-pause .ssp-icon').removeClass().addClass('ssp-icon ssp-icon-play_icon');
		
			clearInterval(sspUpdateDuration[ssp_player_index]);
		
		});
		
		// On Media Finished
		$el.on('finish', function(e) {
		
			$('#ssp_player_id_' + ssp_player_index + ' #ssp-play-pause .ssp-icon').removeClass().addClass('ssp-icon ssp-icon-play_icon');
		
			// @todo Track Podcast Specific Finish
		
		});
		
		$('#ssp_player_id_' + ssp_player_index + ' #ssp-play-pause').on('click', function(e) {
			$el.playPause();
		});
		
		$('#ssp_player_id_' + ssp_player_index + ' #ssp-back-thirty').on('click', function(e) {
		
			// @todo Track Podcast Specific Back 30
		
			$el.skipBackward();
		
		});
		
		$('#ssp_player_id_' + ssp_player_index + ' #ssp_playback_speed' + ssp_player_index).on('click', function(e) {
			switch ($(e.currentTarget).parent().find('[data-ssp-playback-rate]').attr('data-ssp-playback-rate')) {
				case "1":
					$(e.currentTarget).parent().find('[data-ssp-playback-rate]').attr('data-ssp-playback-rate', '1.5');
					$(e.currentTarget).parent().find('[data-ssp-playback-rate]').text('1.5X');
					$el.setPlaybackRate(1.5);
					break;
				case "1.5":
					$(e.currentTarget).parent().find('[data-ssp-playback-rate]').attr('data-ssp-playback-rate', '2');
					$(e.currentTarget).parent().find('[data-ssp-playback-rate]').text('2X');
					$el.setPlaybackRate(2);
					break;
				case "2":
					$(e.currentTarget).parent().find('[data-ssp-playback-rate]').attr('data-ssp-playback-rate', '1');
					$(e.currentTarget).parent().find('[data-ssp-playback-rate]').text('1X');
					$el.setPlaybackRate(1);
				default:
					break;
			}
		});
		
	});
	
	// Increment the cumulative index for further AJAX page loads.
	ssp_player_cumulative_index += $newContainer.find(".ssp-player").length;
	
}

Finally, I also noticed the two required CSS files for the HTML5 player would only load by the plugin if the page already had a player on it. For a user starting on a non-player page, and then visiting a page with a player in it, the two CSS files would never load. So I added to my theme’s functions.php file:

wp_enqueue_style( 'ssp-frontend', WP_PLUGIN_URL . '/seriously-simple-podcasting/assets/css/frontend.css' );
	wp_enqueue_style( 'ssp-icon_fonts', WP_PLUGIN_URL . '/seriously-simple-podcasting/assets/css/icon_fonts.css' );

So the required CSS would be loaded no matter what.

Hi everyone, just wanted to bump this thread and see if there’s any updates. My solution above works well as far as I can tell, but obviously a solution that a plug-in rewrite would be better. Thanks!