FV Flowplayer Playlist search

Hi! So I have constructed a search field for my FV Flowplayer. It works as needed for everything EXCEPT – After searching for a video and then deleting the search term and clicking on a SELF-HOSTED video the controls don’t work and the loading animation is present whole time.

I know this isn’t something you support – but I was hoping you might have a hint of what i should tell ChatGPT to look for to reapply the controls after we unload the search. — here’s a page with it on – https://dcdouglas.com/actor-film-television-videos-demo-reel/indie-film/ — a self hosted video is the Drowning in secrets.

Here is the javascript:

jQuery(document).ready(function($) {
    var flowPlayer = null; // Store the reference to the FlowPlayer instance
    var isPlaying = false; // Flag to prevent multiple click handling
    var controlsInitialized = false; // Flag to track if controls are initialized

    function destroyFlowPlayer() {
        if (flowPlayer) {
            try {
                console.log('Destroying FlowPlayer', flowPlayer);
                flowPlayer.unload();
                flowPlayer = null;
                console.log('FlowPlayer destroyed');
            } catch (error) {
                console.error('Error destroying FlowPlayer:', error);
            }
        }
    }

    function initializeFlowPlayer() {
        return new Promise((resolve, reject) => {
            var checkInterval = setInterval(() => {
                var player = $('.flowplayer').data('flowplayer');
                if (player) {
                    flowPlayer = player;
                    clearInterval(checkInterval);
                    console.log('FlowPlayer initialized', player);
                    console.log('FlowPlayer config', player.conf);
                    resolve(flowPlayer);
                }
            }, 500);
        });
    }

    function reinitializeSelfHostedVideo(player) {
        if (!controlsInitialized && player.video && player.video.sources[0].type === 'video/mp4') {
            // Explicitly reinitialize controls for self-hosted videos
            player.ui.createSubtitleControl();
            player.ui.setActiveSubtitleItem();
            controlsInitialized = true;
            console.log('Self-hosted video controls reinitialized');
        }
    }

    function attachControlListeners(player) {
        player.on('pause', function() {
            console.log('Video paused');
        });
        player.on('mute', function() {
            console.log('Video muted');
        });
        player.on('resume', function() {
            console.log('Video resumed');
        });
        player.on('unmute', function() {
            console.log('Video unmuted');
        });
        player.on('ready', function() {
            console.log('Video ready');
            reinitializeSelfHostedVideo(player); // Reinitialize controls for self-hosted videos
        });
        player.on('unload', function() {
            console.log('Video unloaded');
        });
        player.on('finish', function() {
            console.log('Video finished');
        });
    }

    function unloadCurrentVideo(player) {
        return new Promise((resolve, reject) => {
            console.log('Unloading current video');
            try {
                player.unload();
                console.log('Current video unloaded');
                resolve();
            } catch (error) {
                console.error('Error unloading video:', error);
                reject(error);
            }
        });
    }

    function playVideo(videoId) {
        if (isPlaying) return; // Prevent multiple clicks

        isPlaying = true; // Set the flag to true
        console.log('Preparing to play video ID:', videoId);

        initializeFlowPlayer().then(player => {
            if (player && typeof player.play === 'function') {
                var playlist = player.conf.playlist || [];
                var videoIndex = playlist.findIndex(video => video.id == videoId);

                if (videoIndex !== -1) {
                    unloadCurrentVideo(player).then(() => {
                        console.log('Playing video at index:', videoIndex);
                        player.play(videoIndex);
                        attachControlListeners(player); // Ensure controls are attached
                        isPlaying = false; // Reset the flag after playing
                    }).catch((error) => {
                        console.error('Error unloading video:', error);
                        isPlaying = false; // Reset the flag if error
                    });
                } else {
                    console.error('Video ID not found in FlowPlayer playlist');
                    isPlaying = false; // Reset the flag if error
                }
            } else {
                console.error('FlowPlayer instance not found or play method not available');
                isPlaying = false; // Reset the flag if error
            }
        }).catch((error) => {
            console.error('Error initializing FlowPlayer:', error);
            isPlaying = false; // Reset the flag if error
        });
    }

    function updatePlaylist(query) {
        var $playlist = $('.fv-playlist-slider-wrapper .fp-playlist-external a');

        if (query === "") {
            $playlist.show();
        } else {
            $playlist.each(function() {
                var $this = $(this);
                var title = $this.find('h4 span').text().toLowerCase();

                if (title.includes(query)) {
                    $this.show();
                } else {
                    $this.hide();
                }
            });
        }

        // Scroll the playlist container back to the beginning
        $('.fv-playlist-slider-wrapper').scrollLeft(0);
    }

    $('#video-search').on('input', function() {
        var query = $(this).val().toLowerCase();
        updatePlaylist(query);

        if (flowplayer) {
            reinitializeSelfHostedVideo(flowplayer); // Reinitialize controls for self-hosted videos
        }
    });

    $('.fv-playlist-slider-wrapper .fp-playlist-external a').off('click').on('click', function(e) {
        e.preventDefault();
        e.stopImmediatePropagation(); // Prevent any additional handlers from being triggered

        var clickedItem = $(this);
        var videoId = clickedItem.data('item').id;

        console.log('First click on playlist');
        console.log('Clicked video ID:', videoId);

        // Ensure only one click is processed
        if (!isPlaying) {
            playVideo(videoId);
        } else {
            console.log('Already processing a video click');
        }
    });

    // Initial initialization of FlowPlayer
    initializeFlowPlayer().then(player => {
        if (player && typeof player.play === 'function') {
            attachControlListeners(player);
        }
    }).catch((error) => {
        console.error('Error initializing FlowPlayer on document ready:', error);
    });
});

And the PHP

<?php

// Enqueue necessary scripts
function custom_video_search_enqueue_scripts() {
    wp_enqueue_script('custom-video-search', plugin_dir_url(__FILE__) . 'custom-video-search.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'custom_video_search_enqueue_scripts');

// Create the shortcode
function custom_video_search_shortcode($atts) {
    ob_start();
    ?>
    <div class="custom-video-search">
        <input type="text" id="video-search" placeholder="Search videos...">
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('video_search', 'custom_video_search_shortcode');

// Ensure no whitespace is outputted before the XML declaration
function custom_video_search_init() {
    ob_start(); // Start output buffering
}
add_action('init', 'custom_video_search_init');

function custom_video_search_shutdown() {
    ob_end_flush(); // End output buffering and flush the output
}
add_action('shutdown', 'custom_video_search_shutdown');
?>