Add class to wrapped playlists; add front-end CSS to make some minor tweaks.

Author: joedolson

src/ableplayer.php

@@ -52,6 +52,7 @@ function ableplayer_enqueue_scripts() {
 	// Register/enqueue other dependencies.
 	wp_enqueue_script( 'js-cookie', plugins_url( 'thirdparty', __FILE__ ) . '/js.cookie.js', array( 'jquery' ), $version, true );
 	wp_enqueue_script( 'vimeo', 'https://player.vimeo.com/api/player.js', array(), $version, true );
+	wp_enqueue_style( 'ableplayer-video', plugins_url( 'assets', __FILE__ ) . '/css/media.css', array(), $version );
 	wp_register_script( 'ableplayer-video', plugins_url( 'assets', __FILE__ ) . '/js/media.js', array(), $version, true );
 	wp_localize_script(
 		'ableplayer-video',

src/assets/css/media.css

@@ -0,0 +1,4 @@
+.wp-playlist.has-ableplayer {
+	padding: 0;
+	border: none;
+}

src/assets/js/media.js

@@ -52,6 +52,7 @@ if ( 'true' === ableplayer.settings.replace_playlists) {
  * @param Element el Playlist wrapper element.
  */
 function renderPlaylist( el ) {
+	el.classList.add( 'has-ableplayer' );
 	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;