Как я могу уничтожить наблюдателей ScrollMonitor сразу после изменения страницы Smoothstate

Question

Я использую SmoothState на веб-сайте, над которым я работаю. Это скрипт, который позволяет нам подделать одностраничное приложение.

На некоторых страницах у нас есть видео. Для воспроизведения видео мы используем Plyr. И мы хотим автоматически воспроизвести видео, когда оно находится в окне просмотра. Поэтому для этого мы используем ScrollMonitor.

Все отлично работает Единственным недостатком является то, что мне нужно уничтожить каждого наблюдателя (когда он существует), когда происходит обновление страницы. В противном случае ScrollMonitor остается активным, и на следующей странице видео воспроизводится, когда вы начинаете прокручивать раздел ScrollMonitor. Но это больше не существует в DOM.

Я попробовал несколько вещей, но я не могу заставить это работать. Это мой код:

https://codepen.io/boldinteractive/pen/yzZZMv?editors=0010

Это часть, где мы начинаем видео + scrollMonitor:

var $plyrAuto;
var controls;
var plyr_players;

function vars() {
    $plyrAuto = $('.js-player.-autoplay');
    plyr_players = [];
}


function initVideoplayers(plyrSection) {

    controls = "<div class='video-player plyr__controls'><div class='centercontrol -play hover-circle' data-plyr='play'><div class='play circle'>bekijk</div></div><div class='centercontrol -pause hover-circle' data-plyr='pause'><div class='pause circle'>pause</div></div></div>";

    plyr_players = plyr.setup('.js-player', {
        html: controls
    });

    plyrSection = [];

    $plyrAuto.each(function(index, section) {

        var video_instance = $(this).data('videoindex');

        plyrSection[index] = scrollMonitor.create(section);

        plyrSection[index].exitViewport(function () {
            plyr_players[video_instance].pause();
        });
        plyrSection[index].enterViewport(function () {
            plyr_players[video_instance].play();
        });
    });
}

Я пробовал этот фрагмент уничтожения различными способами (также с массивом, который определен вне всех функций).

if(plyrSection.length > 0) {

                for (i = 0; i < plyrSection.length; i++) {
                    console.log('destroy:'+i);
                    plyrSection[i].destroy();
                }
var plyrSection = [];
}