https://agenciasebrae.com.br/wp-content/themes/asn/piki/features/F…/widgets/filewp/circle-player.js?ver=6.9.9

1(function($){
2
3    var $body;
4    var CirclePlayer = {
5
6        $players : null,
7        timeResize : false,
8
9        init : function(){
10
11            this.$players = $( '.circle-player' );
12            if( !this.$players.length ) return true;
13
14            $body = $( 'body' );
15
16            // Configure each dropdown
17            this.$players.each(function(){
18
19                this.$ = this.$ || $( this );
20
21                var data = this.$.data( 'CirclePlayer' );
22                if( data !== undefined ) return true;
23                data = {
24                    _ : this,
25                    $ : this.$,
26                    $toggle : $( 'button[data-action="toggle"]', this.$ ),
27                    $seek : $( '.percentage-bar span', this.$ ),
28                    audio  : $( 'audio', this.$ ).get(0),
29                    wrapSel : this.$.data( 'wrapper' ),
30                    durationSel : this.$.data( 'duration' )
31                };
32                data.ariaLabel = data.$toggle.attr( 'aria-label' );
33                
34                // Wrapper to find others components
35                if( data.wrapSel ){
36                    data.$wrapper = data.$.parents( data.wrapSel ).first();
37                }
38                else {
39                    data.$wrapper = data.$.parent().first();
40                }
41
42                // Duration
43                data.$duration = data.durationSel ? data.$wrapper.find( data.durationSel ).first() : false;
44
45                // Keep data
46                this.$.data( 'CirclePlayer', data );
47
48                // Toggle click
49                data.$toggle.on( 'click', function(e){
50
51                    e.preventDefault();
52                
53                    if( data.audio.paused ){
54                        CirclePlayer.pauseOthers( data );
55                        data.audio.play();
56                    }
57                    else {
58                        e.preventDefault();
59                        data.audio.pause();
60                    }
61                
62                });
63                data.audio.addEventListener( 'play', function(){
64                
65                    data.$.addClass( 'playing' );
66                    data.$wrapper.addClass( 'active' );
67                    data.$toggle.attr( 'aria-label', data.ariaLabel.replace( 'Tocar', 'Pausar' ) );
68                
69                });
70                data.audio.addEventListener( 'pause', function(){
71                
72                    data.$.removeClass( 'playing' );
73                    data.$wrapper.removeClass( 'active' );
74                    data.$toggle.attr( 'aria-label', data.ariaLabel );
75                
76                });
77                data.audio.addEventListener( 'ended', function(){
78                
79                    data.$.removeClass( 'playing after50' );
80                    data.$wrapper.removeClass( 'active' );
81                    data.$seek.css( 'transform', '' );
82                    data.$toggle.attr( 'aria-label', data.ariaLabel );
83
84                    // Reset duration
85                    if( data.$duration ){
86                        data.$duration.text( CirclePlayer.formatTime( data.audio.duration ) );
87                    }
88                
89                });
90                data.audio.addEventListener( 'timeupdate', function(){
91
92                    // Circle proggress
93                    const newAngle = data.audio.currentTime * 360 / data.audio.duration;
94                    if( newAngle > 180 ){
95                        data.$.addClass( 'after50' );
96                    }
97                    else {
98                        data.$.removeClass( 'after50' );
99                    }
100                    data.$seek.css( 'transform', 'rotate('+ newAngle +'deg)' );
101
102                    // Time progress
103                    if( data.$duration ){
104                        const newTime = Math.round( data.audio.duration - data.audio.currentTime );
105                        data.$duration.text( CirclePlayer.formatTime( newTime ) );
106                    }
107                
108                });
109
110            });
111
112        },
113
114        pauseOthers : function( data ){
115
116            $( 'audio' ).each(function(){
117                if( this.paused !== true ){
118                    this.pause();
119                }
120            });
121
122        },
123
124        formatTime : duration => {
125
126            duration = Math.round( duration );
127
128            const 
129                hours = Math.floor( duration / 3600 ),
130                minutes = Math.floor( ( duration - ( hours * 3600 ) ) / 60 ),
131                seconds = duration - ( hours * 3600 ) - ( minutes * 60 )
132            ;
133
134            if( hours > 0 ){
135                return hours.toString().padStart( 2, '0' ) + ':' + minutes.toString().padStart( 2, '0' ) + ':' + seconds.toString().padStart( 2, '0' );
136            }
137            else {
138                return minutes.toString().padStart( 2, '0' ) + ':' + seconds.toString().padStart( 2, '0' );
139            }
140
141        },
142
143        isMobile : function(){
144            return Utils.getPageWidth() <= 550;
145        }
146
147    };
148    $(function(){
149
150        CirclePlayer.init(); 
151
152        try { Pager.addCallback( CirclePlayer.init ) }
153        catch( e ){}
154    
155    });
156
157})(jQuery);