wp-stack-exchange-300862

/**
 * Info about this Paste: https://wordpress.stackexchange.com/a/300886/137402
 * Start copying below this comment, whichever applies.
 */

add_action( 'wp_playlist_scripts', function(){
    ?>
<script>
jQuery( function( $ ){
    // Add the search box.
    $( '.wp-playlist' ).prepend(
        '<p class="wp-playlist-custom-search alignright">' +
            '<input class="search-playlist" placeholder="Search" />' +
        '</p>' +
        '<div style="clear: both;"></div>'
    );

    // Performs the search.
    $( '.search-playlist', '.wp-playlist' ).on( 'keyup', function( e ){
        var $playlist = $( this ).closest( '.wp-playlist' ),
            query = this.value;

        if ( ! query ) {
            $( '.wp-playlist-item', $playlist ).show();
            return;
        } else if ( e.key.length > 1 ) {
            return;
        }

        $( '.wp-playlist-item-title', $playlist ).each( function(){
            var re = new RegExp( '(' + query + ')', 'ig' ),
                title = $( this ).text();

            if ( re.test( title ) ) {
                $( this ).closest( '.wp-playlist-item' ).show();
            } else {
                $( this ).closest( '.wp-playlist-item' ).hide();
            }
        } );
    } );

    // This is an alternative to editing wp-includes/js/mediaelement/wp-playlist.js
    if ( 'function' === typeof window.WPPlaylistView ) {
        // This is a custom function. If the item is visible, plays the track.
        // Otherwise, we go to the next or previous track.
        window.WPPlaylistView.prototype.goTo = function(){
            if ( this.$( '.wp-playlist-item' ).eq( this.index ).is( ':visible' ) ) {
                this.setCurrent();
                return true;
            }
        };

        window.WPPlaylistView.prototype.ended = function(){
            this.next();
        };

        window.WPPlaylistView.prototype.prev = function(){
            this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1;

            if ( ! this.goTo() ) {
                this.prev();
            }
        };

        window.WPPlaylistView.prototype.next = function(){
            this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1;

            if ( ! this.goTo() ) {
                this.next();
            }
        };
    }
} );
</script>
    <?php
} );