1+ //get hold of each element
2+ const player = document . querySelector ( '.player' ) ;
3+ const viewer = player . querySelector ( '.viewer' )
4+ const toggle = player . querySelector ( '.toggle' )
5+ //anything with data-skip
6+ const skipButtons = player . querySelectorAll ( '[data-skip]' ) ;
7+ const mute = player . querySelector ( '#mute' ) ;
8+ const progress = player . querySelector ( '.progress' ) ;
9+ const progressBar = player . querySelector ( '.progress__filled' ) ;
10+ const ranges = player . querySelectorAll ( '.player__slider' ) ;
11+ const fullscreen = player . querySelector ( '.zoom' ) ;
12+
13+
14+ //functions
15+ function togglePlay ( ) {
16+ const status = viewer . paused ? 'play' :'pause' ;
17+ viewer [ status ] ( ) ;
18+ }
19+
20+ function toggleButton ( ) {
21+ const icon = this . paused ? '►' : '❚ ❚' ;
22+ toggle . textContent = icon ;
23+
24+ }
25+
26+ function skip ( ) {
27+ viewer . currentTime += parseFloat ( this . dataset . skip ) ;
28+ }
29+
30+ function handleVolumeAndPlayback ( ) {
31+ //name will be either 'volume', 'playbackrate'
32+ viewer [ this . name ] = this . value ;
33+ }
34+
35+ function toggleMute ( ) {
36+ viewer . muted = ! viewer . muted ;
37+ if ( mute . classList . contains ( 'unmute' ) ) {
38+ mute . classList . remove ( 'unmute' )
39+ mute . classList . add ( 'mute' )
40+ }
41+
42+
43+ if ( mute . classList . contains ( 'mute' ) ) {
44+ mute . classList . remove ( 'mute' )
45+ mute . classList . add ( 'unmute' )
46+ }
47+ }
48+
49+ function handleProgress ( ) {
50+ //change the flex-basis based on the width or the played/duration
51+ const currentWidth = ( viewer . currentTime / viewer . duration ) * 100 || 0 ;
52+ progressBar . style . flexBasis = `${ currentWidth }
53+ }
54+
55+ function scrub ( e ) {
56+ const scrubTime = ( e . offsetX / progress . offsetWidth ) * viewer . duration ;
57+ viewer . currentTime = scrubTime ;
58+ }
59+
60+ function handleFullscreen ( e ) {
61+ if ( isFullScreen ( ) ) {
62+ if ( document . exitFullscreen ) document . exitFullscreen ( ) ;
63+ else if ( document . mozCancelFullScreen ) document . mozCancelFullScreen ( ) ;
64+ else if ( document . webkitCancelFullScreen ) document . webkitCancelFullScreen ( ) ;
65+ else if ( document . msExitFullscreen ) document . msExitFullscreen ( ) ;
66+ setFullscreenData ( false ) ;
67+ }
68+ else {
69+ if ( viewer . requestFullscreen ) viewer . requestFullscreen ( ) ;
70+ else if ( viewer . mozRequestFullScreen ) viewer . mozRequestFullScreen ( ) ;
71+ else if ( viewer . webkitRequestFullScreen ) viewer . webkitRequestFullScreen ( ) ;
72+ else if ( viewer . msRequestFullscreen ) viewer . msRequestFullscreen ( ) ;
73+ setFullscreenData ( true ) ;
74+ }
75+ }
76+
77+ const setFullscreenData = function ( state ) {
78+ viewer . setAttribute ( 'data-fullscreen' , ! ! state ) ;
79+ }
80+
81+ //check if fullscreenApi is supported
82+ const fullScreenEnabled = ! ! ( document . fullscreenEnabled || document . mozFullScreenEnabled || document . msFullscreenEnabled || document . webkitSupportsFullscreen || document . webkitFullscreenEnabled || document . createElement ( 'video' ) . webkitRequestFullScreen ) ;
83+ if ( ! fullScreenEnabled ) {
84+ fullscreen . style . display = 'none' ;
85+ }
86+
87+ //check status if fullscreen
88+ const isFullScreen = function ( ) {
89+ return ! ! ( document . fullScreen || document . webkitIsFullScreen || document . mozFullScreen || document . msFullscreenElement || document . fullscreenElement ) ;
90+ }
91+
92+
93+ //event listeners
94+ viewer . addEventListener ( 'click' , togglePlay ) ;
95+ viewer . addEventListener ( 'play' , toggleButton ) ;
96+ viewer . addEventListener ( 'pause' , toggleButton ) ;
97+ viewer . addEventListener ( 'timeupdate' , handleProgress )
98+
99+ toggle . addEventListener ( 'click' , togglePlay )
100+ mute . addEventListener ( 'click' , toggleMute )
101+ skipButtons . forEach ( button => button . addEventListener ( 'click' , skip ) ) ;
102+
103+ ranges . forEach ( range => range . addEventListener ( 'change' , handleVolumeAndPlayback ) ) ;
104+ ranges . forEach ( range => range . addEventListener ( 'mousemove' , handleVolumeAndPlayback ) ) ;
105+
106+ progress . addEventListener ( 'click' , scrub )
107+
108+ let mousedownFlag = false ;
109+ progress . addEventListener ( 'mousedown' , ( ) => mousedownFlag = true )
110+ progress . addEventListener ( 'mouseup' , ( ) => mousedownFlag = false )
111+ //listen to mousemove only when user has clicked the left mouse button
112+ progress . addEventListener ( 'mousemove' , ( e ) => mousedownFlag && scrub ( e ) )
113+ fullscreen . addEventListener ( 'click' , handleFullscreen )
114+
115+ // fullscreen events
116+ document . addEventListener ( 'fullscreenchange' , function ( e ) {
117+ setFullscreenData ( ! ! ( document . fullScreen || document . fullscreenElement ) ) ;
118+ } ) ;
119+ document . addEventListener ( 'webkitfullscreenchange' , function ( ) {
120+ setFullscreenData ( ! ! document . webkitIsFullScreen ) ;
121+ } ) ;
122+ document . addEventListener ( 'mozfullscreenchange' , function ( ) {
123+ setFullscreenData ( ! ! document . mozFullScreen ) ;
124+ } ) ;
125+ document . addEventListener ( 'msfullscreenchange' , function ( ) {
126+ setFullscreenData ( ! ! document . msFullscreenElement ) ;
127+ } ) ;
0 commit comments