1+ /**
2+ * scripts.js
3+ */
4+
5+ // set element vars
6+ const player = document . querySelector ( '.player' ) ;
7+ const video = player . querySelector ( '.viewer' ) ;
8+
9+ const progress = player . querySelector ( '.progress' ) ;
10+ const progressBar = player . querySelector ( '.progress__filled' ) ;
11+
12+ const toggle = player . querySelector ( '.toggle' ) ;
13+ const skipButtons = player . querySelectorAll ( '[data-skip]' ) ;
14+ const ranges = player . querySelectorAll ( '.player__slider' ) ;
15+ const fullscreen = player . querySelector ( '.fullscreen' ) ;
16+
17+ // functions
18+ function togglePlay ( ) {
19+ const method = video . paused ? 'play' : 'pause' ;
20+ video [ method ] ( ) ;
21+ }
22+
23+ function updateButton ( ) {
24+ const icon = this . paused ? '►' : '❚❚' ;
25+ toggle . textContent = icon ;
26+
27+ // console.log('Button is updated!');
28+ }
29+
30+ function skip ( ) {
31+ console . log ( this . dataset . skip ) ;
32+ video . currentTime += parseFloat ( this . dataset . skip ) ;
33+ }
34+
35+ function handleRangeUpdate ( ) {
36+ video [ this . name ] = this . value ;
37+ }
38+
39+ function handleProgress ( ) {
40+ const percent = ( ( video . currentTime / video . duration ) * 100 ) ;
41+ progressBar . style . flexBasis = `${ percent } ;
42+ }
43+
44+ function scrub ( e ) {
45+ const scrubTime = ( ( e . offsetX / progress . offsetWidth ) * video . duration ) ;
46+ video . currentTime = scrubTime ;
47+ }
48+
49+ function makeFullScreen ( ) {
50+ console . log ( 'Fullscreen button was clicked!' ) ;
51+ var i = video ;
52+
53+ if ( i . requestFullscreen ) {
54+ i . requestFullscreen ( ) ;
55+ } else if ( i . webkitRequestFullScreen ) {
56+ i . webkitRequestFullscreen ( ) ;
57+ } else if ( i . mozRequestFullScreen ) {
58+ i . mozRequestFullScreen ;
59+ } else {
60+ console . log ( 'Video cannot be made fullscreen!' ) ;
61+ }
62+ }
63+
64+ // event listeners
65+ video . addEventListener ( 'click' , togglePlay ) ;
66+ video . addEventListener ( 'play' , updateButton ) ;
67+ video . addEventListener ( 'pause' , updateButton ) ;
68+ video . addEventListener ( 'timeupdate' , handleProgress ) ;
69+
70+ toggle . addEventListener ( 'click' , togglePlay ) ;
71+ skipButtons . forEach ( button => button . addEventListener ( 'click' , skip ) ) ;
72+
73+ ranges . forEach ( range => range . addEventListener ( 'change' , handleRangeUpdate ) ) ;
74+ ranges . forEach ( range => range . addEventListener ( 'mousemove' , handleRangeUpdate ) ) ;
75+
76+ progress . addEventListener ( 'click' , scrub ) ;
77+
78+ let mousedown = false ;
79+ // progress.addEventListener('mousemove', (e) => {
80+ // if (mousedown) {
81+ // scrub(e);
82+ // }
83+ // });
84+ progress . addEventListener ( 'mousemove' , ( e ) => mousedown && scrub ( e ) ) ;
85+ progress . addEventListener ( 'mousedown' , ( ) => mousedown = true ) ;
86+ progress . addEventListener ( 'mouseup' , ( ) => mousedown = false ) ;
87+
88+ fullscreen . addEventListener ( 'click' , makeFullScreen ) ;
0 commit comments