Add automatic parsing for audio playlists

Author: joedolson

src/ableplayer.php

@@ -345,6 +345,18 @@ function able_player_parameters() {
 	return apply_filters( 'ableplayer_default_parameters', $params );
 }
 
+/**
+ * Remove Media Element scripts.
+ */
+function ableplayer_remove_scripts() {
+	$elements = ableplayer_get_settings( 'disable_elements' );
+	if ( 'true' === $elements ) {
+		wp_deregister_script( 'mediaelement' );
+		wp_deregister_script( 'wp-playlist' );
+	}
+}
+add_action( 'init', 'ableplayer_remove_scripts' );
+
 /**
  * Add support for [ableplayer] shortcode.
  *

src/assets/js/media.js

@@ -11,7 +11,9 @@ if ( 0 !== ableplayer_selectors.length ) {
 	if ( mediaEls ) {
 		mediaEls.forEach((el,index,listObj) => {
 			let excludeClass = ableplayer.settings.exclude_class;
-			if ( excludeClass !== '' && el.classList.contains( excludeClass ) || el.closest( 'figure' ).classList.contains( excludeClass ) ) {
+			let parentEl     = el.closest( 'figure' );
+			let parentHasClass = ( parentEl ) ? parentEl.classList.contains( excludeClass ) : false;
+			if ( excludeClass !== '' && el.classList.contains( excludeClass ) || parentHasClass ) {
 				el.classList.add( 'ableplayer-skipped' );
 			} else {
 				el.removeAttribute( 'controls' );
@@ -32,6 +34,42 @@ if ( 0 !== ableplayer_selectors.length ) {
 	}
 }
 
+if ( 'true' === ableplayer.settings.replace_playlists) {
+	const audioPlaylists = document.querySelectorAll( '.wp-audio-playlist' );
+	if ( audioPlaylists.length > 0 ) {
+		audioPlaylists.forEach((playlist,index,listObj) => {
+			renderPlaylist( playlist, index );
+		});
+	}
+}
+
+function renderPlaylist( el, index ) {
+	let contents = JSON.parse( el.querySelector( '.wp-playlist-script' ).textContent );
+	let player   = ( el.classList.contains( 'wp-audio-playlist' ) ) ? el.querySelector( 'audio' ) : el.querySelector( 'video' );
+	let tracks   = contents.tracks;
+	let list     = document.createElement( 'ul' );
+	list.classList.add( 'able-playlist' );
+	list.setAttribute( 'data-player', player.getAttribute( 'id' ) );
+	list.setAttribute( 'data-embedded', true );
+	let listItem, source, button;
+	tracks.forEach((track,index,listObj) => {
+		listItem = document.createElement( 'li' );
+		source   = document.createElement( 'span' );
+		source.classList.add( 'able-source' );
+		source.setAttribute( 'data-type', track.type );
+		source.setAttribute( 'data-src', track.src );
+		button  = document.createElement( 'button' );
+		button.setAttribute( 'type', 'button' );
+		button.innerText = track.title;
+		listItem.insertAdjacentElement( 'afterbegin', source );
+		listItem.insertAdjacentElement( 'beforeend', button );
+		list.insertAdjacentElement( 'beforeend', listItem );
+	});
+	el.insertAdjacentElement( 'beforeend', list );
+
+	el.querySelector( '.wp-playlist-current-item' ).remove();
+}
+
 const ablePlayers = document.querySelectorAll( '[data-able-player]' );
 if ( ablePlayers ) {
 	ablePlayers.forEach((el,index,listObj) => {

src/inc/settings.php

@@ -251,6 +251,7 @@ function ableplayer_update_settings( $post ) {
 	$replace_audio     = ( ! empty( $post['replace_audio'] ) && 'on' === $post['replace_audio'] ) ? 'true' : 'false';
 	$exclude_class     = ( ! empty( $post['exclude_class'] ) ) ? sanitize_text_field( $post['exclude_class'] ) : '';
 	$replace_playlists = ( ! empty( $post['replace_playlists'] ) && 'on' === $post['replace_playlists'] ) ? 'true' : 'false';
+	$disable_elements  = ( ! empty( $post['disable_elements'] ) && 'on' === $post['disable_elements'] ) ? 'true' : 'false';
 	$youtube_nocookie  = ( ! empty( $post['youtube_nocookie'] ) && 'on' === $post['youtube_nocookie'] ) ? 'true' : 'false';
 	$play_inline       = ( ! empty( $post['play_inline'] ) && 'on' === $post['play_inline'] ) ? 'true' : 'false';
 	$render_transcript = ( ! empty( $post['render_transcript'] ) && 'on' === $post['render_transcript'] ) ? 'true' : 'false';
@@ -263,6 +264,7 @@ function ableplayer_update_settings( $post ) {
 	$settings['replace_audio']     = $replace_audio;
 	$settings['exclude_class']     = $exclude_class;
 	$settings['replace_playlists'] = $replace_playlists;
+	$settings['disable_elements']  = $disable_elements;
 	$settings['youtube_nocookie']  = $youtube_nocookie;
 	$settings['seek_interval']     = $seek_interval;
 	$settings['play_inline']       = $play_inline;
@@ -358,6 +360,17 @@ function ableplayer_settings_form() {
 								</p>
 								<p>
 								<?php
+								ableplayer_settings_field(
+									array(
+										'name'  => 'disable_elements',
+										'label' => __( 'Disable MediaElement JS.', 'ableplayer' ),
+										'type'  => 'checkbox-single',
+									)
+								);
+								?>
+								</p>
+								<p>
+								<?php
 								ableplayer_settings_field(
 									array(
 										'name'  => 'youtube_nocookie',
@@ -572,6 +585,7 @@ function ableplayer_default_settings() {
 		'replace_audio'     => 'false',
 		'exclude_class'     => '',
 		'replace_playlists' => 'false',
+		'disable_elements'  => 'false',
 		'youtube_nocookie'  => 'false',
 		'play_inline'       => 'true',
 		'render_transcript' => 'true',