slider.js

const BaseFrontendHandler = require( 'cmsmasters-frontend/base-handler' );
const Slider = require( 'cmsmasters-slider-module/frontend/slider' );

class SliderWidget extends BaseFrontendHandler {
    getDefaultElements() {
        const defaultElements = BaseFrontendHandler.prototype.getDefaultElements.apply( this, arguments ),
            defaultSelectors = {
                $player: null,
                $sliderWidget: this.$element,
                $sliderSlide: this.findElement( '.swiper-slide' ),
                $swiperContainer: this.findElement( '.swiper-container' ),
                $backgroundVideoContainer: this.findElement( '.elementor-background-video-container' ),
            };

        jQuery.each( defaultSelectors, ( key, value ) => {
            defaultElements[ key ] = value;
        } );

        return defaultElements;
    }

    bindEvents() {
        // this.bindElementChange( 'thumbnail_ratio', utils.debounce( this.slider.update ) );
    }

    initElements() {
        BaseFrontendHandler.prototype.initElements.apply( this, arguments );

        this.slider = new Slider( {
            widget: this,
        } );
    }

    activateDefaultTab() {
        if ( ! this.isEdit ) {
            return;
        }

        var activeSlide = this.getEditSettings( 'activeItemIndex' );
        this.changeActiveSlide( activeSlide );
    }

    activeSlide( slideIndex ) {
        this.slider.swiper.slideTo( slideIndex, this.slider.swiper.params.speed );
    }

    changeActiveSlide( slideIndex ) {
        slideIndex = slideIndex - 1;
        var isActiveSlide = this.isActiveSlide( slideIndex );

        if ( ! isActiveSlide ) {
            this.activeSlide( slideIndex );
        }
    }

    isActiveSlide( slideIndex ) {
        return this.elements.$sliderSlide.filter( '[data-swiper-slide-index="' + slideIndex + '"]' ).hasClass( 'swiper-slide-active' );
    }

    onEditSettingsChange( propertyName ) {
        if ( 'activeItemIndex' === propertyName ) {
            this.activateDefaultTab();
        }
    }

    calcVideosSize( sliderID ) {
        const containerWidth = this.elements.$swiperContainer.find( '.elementor-repeater-item-' + sliderID + ' .elementor-background-video-container' ).outerWidth(),
            containerHeight = this.elements.$swiperContainer.find( '.elementor-repeater-item-' + sliderID + ' .elementor-background-video-container' ).outerHeight(),
            aspectRatioSetting = '16:9',
            aspectRatioArray = aspectRatioSetting.split( ':' ),
            aspectRatio = aspectRatioArray[ 0 ] / aspectRatioArray[ 1 ],
            ratioWidth = containerWidth / aspectRatio,
            ratioHeight = containerHeight * aspectRatio,
            isWidthFixed = containerWidth / containerHeight > aspectRatio;

        return {
            width: isWidthFixed ? containerWidth : ratioHeight,
            height: isWidthFixed ? ratioWidth : containerHeight,
        };
    }

    changeVideoSize( sliderID, type ) {
        const size = this.calcVideosSize( sliderID );

        if ( 'hosted' !== type ) {
            const $video = this.elements.$swiperContainer.find( '.elementor-repeater-item-' + sliderID + ' .elementor-video-iframe' );

            $video.width( size.width ).height( size.height );
        } else {
            const $video = this.elements.$swiperContainer.find( '.elementor-repeater-item-' + sliderID + ' .elementor-background-video-container' );

            $video.width( size.width ).height( size.height );
        }
    }

    videoBackground() {
        var elementSettings = this.getElementSettings(),
            self = this;

        elementSettings.slides.forEach( function( item ) {
            var videoLink = item.slide_bg_video_link,
                videoID = self.getYoutubeIDFromURL( videoLink ),
                videoStart = item.slide_bg_video_start,
                videoEnd = item.slide_bg_video_end,
                sliderID = item._id,
                isVimeo = videoLink.indexOf( 'vimeo' ) + 1,
                isYouTube = videoLink.indexOf( 'youtube' ) + 1;

            if ( isYouTube ) {
                // elementorFrontend.utils.youtube.onApiReady( function( YT ) {
                //  setTimeout( function() {
                //      self.prepareYTVideo( YT, videoID, sliderID, videoStart, videoEnd );
                //  }, 1 );
                // } );
                self.elements.$swiperContainer.find( '.elementor-repeater-item-' + sliderID + ' .elementor-video-iframe' )
                    .on( 'canplay', self.changeVideoSize( sliderID, 'youtube' ) );
            } else if ( isVimeo ) {
                self.elements.$swiperContainer.find( '.elementor-repeater-item-' + sliderID + ' .elementor-video-iframe' )
                    .on( 'canplay', self.changeVideoSize( sliderID, 'vimeo' ) );
            } else {
                self.elements.$swiperContainer.find( '.elementor-repeater-item-' + sliderID + ' .elementor-background-video-hosted' )
                    .attr( 'src', videoLink )
                    .on( 'canplay', self.changeVideoSize( sliderID, 'hosted' ) );
            }
        } );

        // if ( 'video' === elementSettings.background_background && elementSettings.background_video_link ) {
        //  this.activate();
        // } else {
        //  this.deactivate();
        // }
    }

    prepareYTVideo( YT, videoID, sliderID, videoStart, videoEnd ) {
        var self = this,
            player = this.elements.$player,
            $embed = this.elements.$swiperContainer.find( '.elementor-repeater-item-' + sliderID + ' .elementor-background-video-embed' );

        var i = 0;
        while ( i < $embed.length ) {
            self.elements.$player = new YT.Player( this.elements.$swiperContainer.find( '.elementor-repeater-item-' + sliderID + ' .elementor-background-video-embed' )[ i ], {
                videoId: videoID,
                events: {
                    'onReady': self.onPlayerReady,
                },
                playerVars: {
                    controls: 0,
                    rel: 0,
                    autoplay: 1,
                    loop: 1,
                    start: videoStart,
                    end: videoEnd,
                },
            } );

            self.changeVideoSize( sliderID, 'youtube' );
            i++;
        }
    }

    onPlayerReady( event ) {
        event.target.mute();
        event.target.playVideo();

    }

    startVideoLoop() {
        var self = this;

        // If the section has been removed
        if ( ! self.player.getIframe().contentWindow ) {
            return;
        }

        var elementSettings = self.getElementSettings(),
            startPoint = elementSettings.background_video_start || 0,
            endPoint = elementSettings.background_video_end;

        self.player.seekTo( startPoint );

        if ( endPoint ) {
            var durationToEnd = endPoint - startPoint + 1;

            setTimeout( function() {
                self.startVideoLoop();
            }, durationToEnd * 1000 );
        }
    }

    getYoutubeIDFromURL( url ) {
        var videoIDParts = url.match( /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:.*&)?vi?=|(?:embed|v|vi|user)\/))([^?&"'>]+)/ );

        return videoIDParts && videoIDParts[ 1 ];
    }

    onEdit() {
        if ( ! this.isEdit ) {
            return;
        }

        this.slider.swiper.autoplay.running = false;
    }

    onInit() {
        elementorModules.frontend.handlers.Base.prototype.onInit.apply( this, arguments );

        this.slider.init();
        this.videoBackground();
        this.onEdit();
    }

}

module.exports = ( $element ) => {
    elementorFrontend.elementsHandler.addHandler( SliderWidget, {
        $element,
    } );
};