adev-video-player-not.js

window.adev = window.adev || {};


(function ($) {
	"use strict";

    adev.videoPlayer = {
        init: function() {
            $('[data-adev-arth-media-player]').each(function(index, el){
                const self = $(this);
                const id = self.data('adev-arth-media-player')
                const video = $('[data-adev-arth-media="'+ id + '"] video')


                const play = self.find('[data-adev-arth-player-play]')
                const volumnToggle = self.find('[data-adev-arth-player-vol-toggle]')
                const volumnProgress = self.find('[data-adev-arth-player-vol-progress]');

                video.on('play', function(e){
                    play.addClass('active')
                })

                video.on('pause', function(e){
                    play.removeClass('active')
                })

                video.on('volumechange', function(e) {
                    
                    const volume = video[0].volume;
                    const volumePercentage = (volume * 100).toFixed(2) + '%';
                    volumnProgress.css({
                        '--adev-progress': volumePercentage
                    })

                    if (video[0].muted) {
                        volumnToggle.addClass('active')
                    } else {
                        volumnToggle.removeClass('active')
                    }
                });

                const progress = self.find('[data-adev-arth-player-progress]');
                video.on('timeupdate', function() {
                    const currentTime = this.currentTime;
                    const duration = this.duration;
                    const percentage = (currentTime / duration) * 100;

                    progress.css({
                        '--adev-progress': percentage.toFixed(2) + '%'
                    })
                });

                play.on('click', function(e){
                    e.preventDefault()
                    if(video[0].paused) {
                        video.trigger('play');
                    } else {
                        video.trigger('pause');
                    }
                })

                volumnToggle.on('click', function(e){
                    e.preventDefault()
                    if(!video[0].muted) {
                        video.prop('muted', true);
                    } else {
                        video.prop('muted', false);
                    }
                })

                self.find('[data-adev-arth-player-full]').on('click', function(e){
                    e.preventDefault()
                    
                    if (video[0].requestFullscreen) {
                        video[0].requestFullscreen();
                    } else if (video[0].mozRequestFullScreen) { // Firefox
                        video[0].mozRequestFullScreen();
                    } else if (video[0].webkitRequestFullscreen) { // Chrome, Safari and Opera
                        video[0].webkitRequestFullscreen();
                    } else if (video[0].msRequestFullscreen) { // Internet Explorer and Edge
                        video[0].msRequestFullscreen();
                    }

                })


                const progressBar = self.find('[data-adev-arth-player-progress]')
                progressBar.on('click', function(e) {
                    const progressBarWidth = progressBar.width();
                    const clickOffsetX = e.offsetX;
                    const videoDuration = video.get(0).duration;
                
                    // Calculate the target time based on the click position
                    const targetTime = (clickOffsetX / progressBarWidth) * videoDuration;
                
                    // Set the current time of the video to the target time
                    video.get(0).currentTime = targetTime;
                  });


                const volProgressBar = self.find('[data-adev-arth-player-vol-progress]')
                volProgressBar.on('click', function(e) {
                    const volumeBarWidth = volProgressBar.width();
                    const clickOffsetX = e.offsetX;
                
                    const targetVolume = clickOffsetX / volumeBarWidth;

                    video.get(0).volume = targetVolume;

                  });


            })
        }
    }

    adev.videoPlayer.init();

}(jQuery));