OwlCyberSecurity - MANAGER

Edit File: player.js

(function ($) {
    "use strict";

let _sources = {};

$('.lakitplayer[data-album_id="'+albumID+'"]:not(.player--initialized)').find('.lakitplayer_btn__playpause').each(function (){
            $(this).append('<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="1024" height="1024" viewBox="0 0 1024 1024" class="lakit-font-icon-svg" data-icon-name="pause" data-icon-type="dlicon"><path d="M384 928c19.2 0 32-12.8 32-32V128c0-19.2-12.8-32-32-32H160c-19.2 0-32 12.8-32 32v768c0 19.2 12.8 32 32 32h224zM192 160h160v704H192V160zm672 768c19.2 0 32-12.8 32-32V128c0-19.2-12.8-32-32-32H640c-19.2 0-32 12.8-32 32v768c0 19.2 12.8 32 32 32h224zM672 160h160v704H672V160z" fill="currentColor"></path></svg>')
            $(this).closest('.lakitplayer').addClass('player--initialized');
            _sources = $(this).closest('.lakitplayer').data('config') || {}
        });
        if( typeof window.LAKIT_Players[albumID] === "undefined"){
            window.LAKIT_Players = {
                ...window.LAKIT_Players,
                ...{
                    [albumID]: {
                        currentIndex: 0,
                        isRunning: false,
                        isAutoPlay: true,
                        isShuffle: false,
                        isMuted: false,
                        opts: _sources
                    }
                }
            };
        }
    }
    const setupPlayerEvents = function ( player, $wrap, defaultConfigs ){
        const $ProgressBar = $('.lakitplayer_tracker__progress', $wrap);
        const $ProgressBarWrap = $ProgressBar?.closest('.lakitplayer_rangewrap');
        const $timeStart = $('.lakitplayer_time__start', $wrap);
        const $timeEnd = $('.lakitplayer_time__end', $wrap);

let isAutoPlay = window.LAKIT_Players[defaultConfigs.album_id].isAutoPlay;
        let isShuffle = window.LAKIT_Players[defaultConfigs.album_id].isShuffle;
        let currentIndex = window.LAKIT_Players[defaultConfigs.album_id].currentIndex;

player.muted = window.LAKIT_Players[defaultConfigs.album_id].isMuted;

player.addEventListener('canplaythrough', () => {
            if(player.readyState === 4){
                $wrap.removeClass('v--loading');
            }
        })
        player.addEventListener('loadedmetadata', () => {
            const isStream = (player.duration.toString() === 'Infinity');
            $timeStart?.html('00:00');
            $timeEnd?.html(isStream ? '--:--' : getFormatTime(player.duration));
            if(isStream){ $wrap.addClass('v--isStream'); }
            else{ $wrap.removeClass('v--isStream'); }
        } );
        player.addEventListener('timeupdate', () => {
            let _val = player.duration.toString() !== 'Infinity' ? (player.currentTime / player.duration * 1000) : 0;
            if(isNaN(_val)){ _val = 0 }
            $ProgressBar?.val( _val);
            $ProgressBarWrap?.css('--value', _val);
            $timeStart?.html(getFormatTime(player.currentTime));
        } );
        player.addEventListener('ended', () => {
            $wrap.removeClass('isPlaying');
            if(isAutoPlay){
                let _max = defaultConfigs.sources.length,
                    _newIndex = currentIndex + 1;
                if(_max > 1){
                    if(_newIndex >= _max){
                        _newIndex = 0;
                    }
                    if(isShuffle){
                        _newIndex = getRandom(0, _max - 1);
                        if(_newIndex === currentIndex){
                            _newIndex = currentIndex + 1;
                            if(_newIndex >= _max){
                                _newIndex = 0;
                            }
                        }
                    }
                    window.LAKIT_Players[defaultConfigs.album_id].currentIndex = _newIndex;
                    window.LAKIT_Players[defaultConfigs.album_id].isRunning = false;
                    $('.lakitplayer[data-album_id="'+defaultConfigs.album_id+'"] .lakitplayer_btn__playpause').first().trigger('click');
                }
            }
        } );
        $ProgressBar?.on('input', function (){
            $ProgressBarWrap?.css('--value', $(this).val());
            player.currentTime = $(this).val() * player.duration / 1000;
        })
    }
    $(document).on('input', '.lakitplayer .lakitplayer_volume__progress', function (){
        const _volume = $(this).val() / 100;
        let albumID = $(this).closest('.lakitplayer').data('album_id'),
            $wrap = $('.lakitplayer[data-album_id="'+albumID+'"]'),
            $btnVolume = $wrap.find('.lakitplayer_btn__volume'),
            $VolumeProgressBarWrap = $wrap.find('.lakitplayer__control_volumes .lakitplayer_rangewrap');

let player = $('.lakitplayer_id_' + albumID).get(0);

let muted;

if(_volume > 0.7){
            $wrap.removeClass('v--muted v--lower');
            $btnVolume.html( getSVGIcon('volumeFull') );
            muted = false;
        }
        else if(_volume > 0.4){
            $wrap.removeClass('v--muted').addClass('v--lower');
            $btnVolume.html( getSVGIcon('volumeLower') );
            muted = false;
        }
        else if(_volume > 0){
            $wrap.removeClass('v--muted');
            $btnVolume.html( getSVGIcon('volumeLower') );
            muted = false;
        }
        else{
            $wrap.removeClass('v--lower').addClass('v--muted');
            $btnVolume.html( getSVGIcon('volumeMute') );
            muted = true;
        }
        try{
            player.muted = muted;
            player.volume = _volume;
        }catch (ex) {}
        $VolumeProgressBarWrap?.css('--value', $(this).val());
    });
    $(document).on('click', '.lakitplayer .lakitplayer_btn__volume', function (e){
        e.preventDefault();
        let albumID = $(this).closest('.lakitplayer').data('album_id'),
            $wrap = $('.lakitplayer[data-album_id="'+albumID+'"]'),
            $btnVolume = $wrap.find('.lakitplayer_btn__volume'),
            $VolumeProgressBarWrap = $wrap.find('.lakitplayer__control_volumes .lakitplayer_rangewrap');
        let player = $('.lakitplayer_id_' + albumID).get(0);

let isMuted = window.LAKIT_Players[albumID].isMuted;

window.LAKIT_Players[albumID].isMuted = !isMuted;

if(!isMuted){
            let bk_val = $VolumeProgressBarWrap.css('--value');
            $VolumeProgressBarWrap.data('bksvg', $btnVolume.html()).data('bkvalue', bk_val).css('--value', 0);
            $btnVolume.html( getSVGIcon('volumeMute') );
        }
        else{
            $VolumeProgressBarWrap.css('--value', $VolumeProgressBarWrap.data('bkvalue'));
            $btnVolume.html( $VolumeProgressBarWrap.data('bksvg') );
        }
        try{
            player.muted = !isMuted;
        }catch (ex) {}
    })
    $(document).on('click', '.lakitplayer .lakitplayer_playlist__item', function (e){
        e.preventDefault();
        let newIndex = parseInt($(this).data('trackindex')),
            albumID = $(this).closest('.lakitplayer').data('album_id'),
            oldIndex = window.LAKIT_Players[albumID].currentIndex;

if(newIndex !== oldIndex){
            window.LAKIT_Players[albumID].currentIndex = newIndex;
            window.LAKIT_Players[albumID].isRunning = false;
            $('.lakitplayer[data-album_id="'+albumID+'"] .lakitplayer_btn__playpause').first().trigger('click');
        }
    });
    $(document).on('click', '.lakitplayer .lakitplayer_btn__playpause', function (e){
        e.preventDefault();
        let $parent = $(this).closest('.lakitplayer'),
            configs = $parent.data('config'),
            albumID = $parent.data('album_id');

let $wrap = $('.lakitplayer[data-album_id="'+albumID+'"]'),
            $playlist = $wrap.find('.lakitplayer_playlists');

let $otherWraps = $('.lakitplayer:not([data-album_id="'+albumID+'"])');
        let $otherPlayers = $('audio:not(.lakitplayer_id_' + albumID+')');

let $preview = $wrap.find('.lakitplayer__control__preview_root')

$otherWraps.removeClass('isPlaying');
        $otherPlayers.each( function (){
            let _oID = $(this).data('id');
            window.LAKIT_Players[_oID].isRunning = false;
            $(this).get(0).pause();
        } )

maybeSetupHiddenPlayer(albumID);

let currentTrackIndex = window.LAKIT_Players[albumID].currentIndex;
        let isRunning = window.LAKIT_Players[albumID].isRunning;
        if(currentTrackIndex < 0){
            currentTrackIndex = 0
        }

if($preview.length){
            if(configs?.sources[currentTrackIndex]?.image){
                $preview.css('--previewURL', 'url("'+configs?.sources[currentTrackIndex]?.image+'")')
            }
            else if(configs?.preview){
                $preview.css('--previewURL', 'url("'+configs?.preview+'")')
            }
        }

const _player = $('.lakitplayer_id_' + albumID);
        const _currentSrc = _player.find('source').attr('src');
        if(_currentSrc !== configs.sources[currentTrackIndex].src){
            _player.find('source').attr('src', configs.sources[currentTrackIndex].src);
            _player[0].load();
            $wrap.addClass('v--loading');
        }

$playlist.find('.lakitplayer_playlist__item[data-trackindex="'+currentTrackIndex+'"]').addClass('active-track');
        $playlist.find('.lakitplayer_playlist__item:not([data-trackindex="'+currentTrackIndex+'"])').removeClass('active-track');

setupPlayerEvents(_player[0], $wrap, configs);
        window.LAKIT_Players[albumID].isRunning = !isRunning;
        if(!isRunning){
            _player[0].play();
            $wrap.addClass('isPlaying');
        }
        else{
            _player[0].pause();
            $wrap.removeClass('isPlaying');
        }
    });
    $(document).on('click', '.lakitplayer .lakitplayer_btn__prev', function (e){
        e.preventDefault();
        let albumID = $(this).closest('.lakitplayer').data('album_id'),
            _max = window.LAKIT_Players[albumID].opts?.sources?.length || 0,
            currentIndex = window.LAKIT_Players[albumID].currentIndex,
            isShuffle = window.LAKIT_Players[albumID].isShuffle;

if(currentIndex < 0){
            currentIndex = _max
        }

if(_max < 1){
            return;
        }

if(currentIndex < 0){
            currentIndex = -1
        }

if(_max < 1){
            return;
        }

$(document).on('LaStudioKit:InitPlayers', '.lakitplayer', function (e){
        let albumID = parseInt($(this).data('album_id')),
            configs = $(this).data('config');

let $preview = $(this).find('.lakitplayer__control__preview_root');
        if($preview.length && configs?.preview){
            $preview.css('--previewURL', 'url("'+configs?.preview+'")')
        }

if( typeof window.LAKIT_Players === "undefined" ) {
            window.LAKIT_Players = {};
        }
        if( typeof window.LAKIT_Players[albumID] === "undefined"){
            window.LAKIT_Players = {
                ...window.LAKIT_Players,
                ...{
                    [albumID]: {
                        currentIndex: -1,
                        isRunning: false,
                        isAutoPlay: true,
                        isShuffle: false,
                        isMuted: false,
                        opts: configs
                    }
                }
            };
        }
    });
    $(function (){
        $('.lakitplayer').trigger('LaStudioKit:InitPlayers');
    });

}(jQuery));