@@ -19,6 +19,13 @@ <h5 class="card-title">Youtube to mp3</h5>
1919 <div class = " form-group" >
2020 <input type = " text" name = " youtubelink" class = " form-control" id = " link" placeholder = " Youtube url" required />
2121 </div >
22+ <div class = " form-group" >
23+ <label for = " format" >Format</label >
24+ <select class = " form-control" name = " format" id = " format" >
25+ <option value = " mp3" >Audio (mp3)</option >
26+ <option value = " mp4" >Video (mp4)</option >
27+ </select >
28+ </div >
2229 <button type = " submit" class = " btn btn-outline-primary" ><i class = " fa fa-refresh" aria-hidden = " true" ></i > Convert</button >
2330 </form >
2431 </div >
@@ -36,28 +43,31 @@ <h5 class="card-title">Json response</h5>
3643 <tbody >
3744 <tr >
3845 <td >Error:</td >
39- < td > < span id =" error " > < i class ="fa fa-times " aria-hidden ="true "> </ i > </ span > </ td >
46+ <td ><i class = " fa fa-times" aria-hidden = " true" ></i ></td >
4047 </tr >
4148 <tr >
4249 <td >Error message:</td >
43- < td > < span id =" error-message " > - </ span > </ td >
50+ <td >- </td >
4451 </tr >
45- < tr > < td colspan ="2 "> </ td > </ tr >
4652 <tr >
4753 <td >Title:</td >
48- < td > < span id =" title " > - </ span > </ td >
54+ <td >- </td >
4955 </tr >
5056 <tr >
5157 <td >Duration</td >
5258 <td ><span id = " duration" >0</span > seconds</td >
5359 </tr >
5460 <tr >
55- < td > Other</ td >
56- < td > < span id ="other "> -</ span > </ td >
61+ <td >Youtube ID</td >
62+ <td ></td >
63+ </tr >
64+ <tr >
65+ <td >Uploaded at</td >
66+ <td ></td >
5767 </tr >
5868 <tr >
5969 <td >
60- < a class ="btn btn-outline-primary disabled " href ="# " id ="download "> < i class ="fa fa-cloud-download " aria-hidden ="true "> </ i > Listen/download</ a >
70+ <a target = " _blank " class = " btn btn-outline-primary disabled" href = " #" id = " download" ><i class = " fa fa-cloud-download" aria-hidden = " true" ></i > Listen/download</a >
6171 <a class = " btn btn-outline-danger disabled" href = " #" id = " remove" data-id = " " >Remove</a >
6272 </td >
6373 <td ></td >
@@ -73,34 +83,33 @@ <h5 class="card-title">Json response</h5>
7383 <script >
7484 $(document).ready(function() {
7585 $(" #frm-convert" ). submit (function (e ) {
76- $ ( "#frm-convert button[type=submit]" ) . html ( "<i class=\"fa fa-refresh\" aria-hidden=\"true\"></i> Converting... Please wait" ) ;
86+ $(" #frm-convert button[type=submit]" ). html (" <i class=\" fa fa-spin fa- refresh\" aria-hidden=\" true\" ></i> Converting... Please wait" );
7787
7888 e . preventDefault ();
79- $ . get ( $ ( this ) . attr ( "action" ) , { youtubelink : $ ( " #link" ) . val ( ) } , function ( data ) {
89+ $. get ($(this ). attr (" action" ), { youtubelink : $(' #link' ) . val (), format : $( ' #format ' ). val () }, function (data ) {
8090 $(" pre" ). text (JSON . stringify (data , null , 4 ));
8191 $(" #frm-convert button[type=submit]" ). html (" <i class=\" fa fa-refresh\" aria-hidden=\" true\" ></i> Convert" );
8292
8393 if (data . error ) {
84- $ ( "#error " ) . html ( "<i class=\"fa fa-check\" aria-hidden=\"true\"></i>" ) ;
85- $ ( "#error-message " ) . text ( data . message ) ;
86-
87- $ ( "#duration " ) . text ( 0 ) ;
88- $ ( "#title " ) . text ( "-" ) ;
89- $ ( "#other " ) . text ( "-" ) ;
90- $ ( "#download" ) . attr ( "href" , "#" ) ;
91- $ ( "#download" ) . addClass ( "disabled" ) ;
94+ $(" table tr:eq(0) td:last " ). html (" <i class=\" fa fa-check\" aria-hidden=\" true\" ></i>" );
95+ $(" table tr:eq(1) td:last " ). text (data . message );
96+ $( " table tr:eq(2) td:last " ) . text ( " - " );
97+ $(" table tr:eq(3) td:last " ). text (0 );
98+ $(" table tr:eq(4) td:last " ). text (" -" );
99+ $(" table tr:eq(5) td:last " ). text (" -" );
100+
101+ $(" #download" ). attr ( " href " , " # " ) . addClass (" disabled" );
92102 $(" #remove" ). addClass (" disabled" );
93103 } else {
94- $ ( "#error" ) . html ( "<i class=\"fa fa-times\" aria-hidden=\"true\"></i>" ) ;
95- $ ( "#error-message" ) . text ( "-" ) ;
104+ $(" table tr:eq(0) td:last" ). html (" <i class=\" fa fa-times\" aria-hidden=\" true\" ></i>" );
105+ $(" table tr:eq(1) td:last" ). text (" -" );
106+ $(" table tr:eq(2) td:last" ). text (data . title + " (" + data . alt_title + " )" );
107+ $(" table tr:eq(3) td:last" ). text (data . duration );
108+ $(" table tr:eq(4) td:last" ). text (data . youtube_id );
109+ $(" table tr:eq(5) td:last" ). text (new Date (data . uploaded_at . date ));
96110
97- $ ( "#duration" ) . text ( data . duration ) ;
98- $ ( "#title" ) . text ( data . title + " (" + data . alt_title + ")" ) ;
99- $ ( "#download" ) . attr ( "href" , data . file ) ;
100- $ ( "#download" ) . removeClass ( "disabled" ) ;
101- $ ( "#remove" ) . removeClass ( "disabled" ) ;
102- $ ( "#remove" ) . data ( "id" , data . youtube_id ) ;
103- $ ( "#other" ) . html ( "Youtube id: " + data . youtube_id + "<br/>Size: " + data . file_size + " bytes<br/>Uploaded at: " + data . uploaded_at . date ) ;
111+ $(" #download" ). attr (" href" , data . file ). removeClass (" disabled" );
112+ $(" #remove" ). removeClass (" disabled" ). data (" id" , data . youtube_id );
104113 }
105114 } );
106115 });
0 commit comments