11$ ( function ( ) {
22 console . log ( "yt player" ) ;
33
4- // globals
54 let url = "" ;
65 let videoId = "" ;
76 const $iframe = $ ( "iframe" ) ;
8- // input where user enters YouTube url to play
97 const $inputField = $ ( "#input-field" ) ;
10- // button to play YouTube video url entered
118 const $playButton = $ ( "#play" ) ;
12- // overlay that video player iframe is shown
139 const $overlay = $ ( "#overlay" ) ;
14- // notification that shows errors and information
1510 const $notification = $ ( "#notification" ) ;
1611 const $overlayNotification = $ ( "#overlay-notification" ) ;
1712 const $loader = $ ( "#loader" ) ;
1813 const $helpModal = $ ( "#help-modal" ) ;
19- // url submission form
2014 const $form = $ ( "form" ) ;
21- // parent for button and video thumbnail that appear when a video is minimized
2215 const $expandBox = $ ( "#expand-box" ) ;
2316 const $thumbnail = $ ( "#thumbnail" ) ;
2417 const $menu = $ ( "#context-menu" ) ;
@@ -31,7 +24,6 @@ $(function () {
3124 const ytURLRE =
3225 / (?: (?: (?: h t t p ? (?: s ) ? : \/ \/ ) ? (?: w w w \. ) ? ) ? (?: y o u t u \. b e \/ | y o u t u b e (?: - n o c o o k i e ) ? \. c o m \/ (?: e m b e d \/ | s h o r t s \/ | v \/ | w a t c h \? v = | w a t c h \? (?: ( [ ^ = ] + ) \= ( [ ^ & ] + ) ) + & v = ) ) ) ? ( (?: \w | - ) { 11 } | ^ (?: \w | - ) { 11 } $ ) ( (?: \& | \? ) \S * ) ? / ;
3326
34- // expression to test if there are any whitespaces in our url
3527 const whiteSpaceRE = / \s / g;
3628
3729 function getVideoURL ( ) {
@@ -44,7 +36,6 @@ $(function () {
4436
4537 // TODO: add ability to play youtube playlists
4638
47- // validates the url in the input field
4839 function validate ( ) {
4940 // if the input field is blank
5041 if ( $inputField . val ( ) . length === 0 ) {
@@ -72,10 +63,8 @@ $(function () {
7263 }
7364 }
7465
75- // gets youtube video id of given url
7666 // takes parameter url(string)
7767 function getId ( url ) {
78- // strips the video id from our url
7968 videoId = ytURLRE . exec ( url ) [ 3 ] ;
8069 if (
8170 $iframe . attr ( "src" ) !== undefined &&
@@ -91,7 +80,6 @@ $(function () {
9180 return videoId ;
9281 }
9382
94- // loads the youtube video into the player iframe
9583 // take parameter videoId(string)
9684 function loadVideo ( videoId ) {
9785 openOverlay ( ) ;
@@ -123,9 +111,7 @@ $(function () {
123111 }
124112 }
125113
126- // toggles fullscreen for the iframe
127114 function openFullscreen ( ) {
128- // puts the player in full screen mode
129115 let player = document . querySelector ( "iframe" ) ;
130116 if ( player . src . length !== 0 && isLoaded ( ) ) {
131117 if ( player . requestFullscreen ) {
@@ -151,7 +137,6 @@ $(function () {
151137 }
152138 }
153139
154- // resets player state
155140 function reset ( ) {
156141 url = "" ;
157142 $iframe . attr ( "src" , "" ) ;
@@ -203,21 +188,18 @@ $(function () {
203188 }
204189 }
205190
206- // open overlay
207191 function openOverlay ( ) {
208192 $overlay . show ( ) ;
209193 $expandBox . hide ( ) ;
210194 }
211195
212- // close overlay
213196 function closeOverlay ( ) {
214197 $overlay . hide ( ) ;
215198 $expandBox . hide ( ) ;
216199 $thumbnail . attr ( "src" , "" ) ;
217200 reset ( ) ;
218201 }
219202
220- // Minimizes video overlay
221203 function minimizeOverlay ( ) {
222204 $overlay . hide ( ) ;
223205 $expandBox . show ( ) ;
@@ -254,7 +236,6 @@ $(function () {
254236 }
255237 }
256238
257- // clears notification
258239 function clearNotification ( ) {
259240 $notification . text ( "" ) ;
260241 $notification . removeClass ( ) ;
0 commit comments