randybruder

Ah that makes sense.

I think you could easily depreciate the .dk-speakout-odd class, and just have users rely on :nth-child(odd) or whatever their column setup is.

Because of the way the signatures are output in the HTML screenshot I provided above though (with the mixed <strong> nesting), I had to write my styling like this:

.dk-speakout-signaturelist > strong {
    background-color: fade(@blue, 10%);
}
strong > .dk-speakout-signaturelist:nth-child(even) {
    background-color: fade(@blue, 10%);
}

which works, but of course is inelegant.

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

Shouldn’t there only ever be one signature per row? Removing all my styling and enabling the default theme in the SpeakOut settings (instead of none) still shows me one signature per row—or per .dk-speakout-signaturelist—at any width.

Thanks!

It also looks like the 2.3.1 update also broke outputting the signature list title, when using the “Display: Table” option—the title does show up if I switch to the “long list (comma separated)” option.

Not wrapping the name in a span tag makes it much harder for me to lay out the row using CSS grid, and makes it impossible to add a column title like I had on the old version:

.dk-speakout-signaturelist-name:before { content: 'Name:'; }

Additionally, removing the .dk-speakout-odd class makes it harder to style alternating rows.

And finally, it looks like the signature list outputted code inconsistently nests the .dk-speakout-signaturelist row and a <strong> tag, with <strong> being inside .dk-speakout-signaturelist for the first row, but then vice-verse for the following two rows. Here’s a screenshot of the signature list HTML generated by a in-development site: https://i.imgur.com/uX1NwMu.png

Sure, here’s the URL: https://fpcd.rb.gd/church-directory/

And screenshot of the settings page: https://i.imgur.com/o5JEenC.png

It’s just a testing site for now really, so if you want, I can just make you an admin account on the site too, if it’ll help.

Nope, no caching plugin. I have other plugins installed, none of which have a caching functionality as far as I know. To be sure as well—I deactivated every plugin except Connections Business Directory—but when not logged in I still have the “No results” message instead of my Require Login Message I set up.

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!

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.

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

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, 9 months ago by randybruder.

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

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

Cheers! Thanks for the fantastic plugin.

Thanks for the reply!

I eventually figured out the problem. I started with the starkers bare-bones theme and built up from there. In the “sensible defaults” section of the CSS there is this:

div, article, section, header, footer, nav, li {
	position:relative; /* For absolutely positioning elements within
			      containers (add more to the list if need be) */
}

Removing this caused the calendar to render properly, and wasn’t really necessary for my other styling (so far.)

Thanks for the help!