@@ -28,8 +28,15 @@ <h3 class="top-margin">Settings</h3>
2828 < li class ="nav-item ">
2929 < a class ="nav-link " data-toggle ="tab " href ="#plex " id ="plexTab "> Plex</ a >
3030 </ li >
31+ < li class ="nav-item ">
32+ < a class ="nav-link " data-toggle ="tab " href ="#jellyfin " id ="jellyfinTab "> Jellyfin</ a >
33+ </ li >
34+ < li class ="nav-item ">
35+ < a class ="nav-link " data-toggle ="tab " href ="#emby " id ="embyTab "> Emby</ a >
36+ </ li >
3137 </ ul >
3238 < div class ="tab-content top-margin " id ="myTabContent ">
39+ <!-- TMdb tab -->
3340 < div class ="tab-pane fade show active top-margin " id ="tmdb ">
3441 < p > To use Gaps, you'll need a MovieDB api key. Navigate over to < a
3542 href ="https://www.themoviedb.org/settings/api " rel ="noopener noreferrer " target ="_blank "> The
@@ -148,13 +155,18 @@ <h3 class="top-margin">Settings</h3>
148155
149156 </ form >
150157 </ div >
158+ <!-- Plex tab -->
151159 < div class ="tab-pane fade top-margin " id ="plex ">
152160 < form class ="needs-validation " id ="plexConfiguration " novalidate >
153161
154162 < div class ="form-group mt-3 ">
155- < button class ="btn btn-primary " type ="button " id ="linkPlexAccountBtn "> Link Plex Account</ button >
156- </ div >
157-
163+ < div >
164+ < button class ="btn btn-primary " type ="button " id ="authPlexAccountBtn "> Authenticate Plex Account</ button >
165+ </ div >
166+ < div class ="mt-3 ">
167+ < button id ="fetchServersBtn " class ="btn btn-primary " type ="button "> Fetch Servers</ button >
168+ </ div >
169+ </ div >
158170
159171 < div class ="form-group ">
160172 < label for ="server "> Plex Server</ label >
@@ -191,6 +203,41 @@ <h3 class="top-margin">Servers</h3>
191203 < div id ="activeServerInfo "> </ div >
192204 </ form >
193205 </ div >
206+ <!-- Jellyfin tab -->
207+ < div class ="tab-pane fade top-margin " id ="jellyfin ">
208+ < form class ="needs-validation " id ="jellyfinConfiguration " novalidate >
209+ < div class ="form-group ">
210+ < label for ="jellyfinServer "> Jellyfin Server Address</ label >
211+ < input class ="form-control " id ="jellyfinServer " required type ="text ">
212+ < div class ="invalid-feedback ">
213+ Please enter your Jellyfin server address.
214+ </ div >
215+ </ div >
216+ < div class ="form-group ">
217+ < label for ="jellyfinUsername "> Jellyfin Username</ label >
218+ < input class ="form-control " id ="jellyfinUsername " required type ="text ">
219+ < div class ="invalid-feedback ">
220+ Please enter your Jellyfin username.
221+ </ div >
222+ </ div >
223+ < div class ="form-group ">
224+ < label for ="jellyfinPassword "> Jellyfin Password</ label >
225+ < div class ="input-group ">
226+ < input class ="form-control " id ="jellyfinPassword " required type ="password ">
227+ < div class ="input-group-append ">
228+ < button id ="toggleJellyfinPasswordVisibility " class ="btn btn-outline-secondary " type ="button "> Show</ button >
229+ </ div >
230+ </ div >
231+ < div class ="invalid-feedback ">
232+ Please enter your Jellyfin password.
233+ </ div >
234+ </ div >
235+ < button class ="btn btn-primary " type ="submit "> Save</ button >
236+ </ form >
237+ </ div >
238+ <!-- Emby tab -->
239+ < div class ="tab-pane fade top-margin " id ="emby ">
240+ </ div >
194241 </ div >
195242
196243 < div th:insert ="fragments/common :: contextPath "> </ div >
@@ -222,37 +269,19 @@ <h4 class="alert-heading">Error!</h4>
222269 </ div >
223270
224271 < script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js "> </ script >
272+
273+ <!-- Authenticates the user's account -->
225274 < script >
226275 $ ( document ) . ready ( function ( ) {
227- $ ( '#linkPlexAccountBtn' ) . on ( 'click' , function ( ) {
228- // Show the loading text/spinner
229- $ ( '#loading' ) . show ( ) ;
230-
231- $ . post ( '/link_plex_account' , function ( response ) {
232- // Check if there's a message in the response
233- if ( response . message ) {
234- // Show an alert with the message
235- alert ( response . message ) ;
236- } else {
237- // Update the dropdown options with the server data
238- var servers = response . servers ;
239- var dropdown = $ ( '#server' ) ;
240- dropdown . empty ( ) ;
241- servers . forEach ( function ( server ) {
242- dropdown . append ( $ ( '<option>' ) . text ( server ) . attr ( 'value' , server ) ) ;
243- } ) ;
244-
245- // Set the Plex token
246- var token = response . token ;
247- $ ( '#plexToken' ) . val ( token ) ;
248- }
249-
250- // Hide the loading text/spinner
251- $ ( '#loading' ) . hide ( ) ;
276+ $ ( '#authPlexAccountBtn' ) . on ( 'click' , function ( ) {
277+ // Send a POST request to the /authenticate_plex_acc endpoint
278+ $ . post ( '/authenticate_plex_acc' , function ( response ) {
279+ // Open the OAuth URL in a new tab
280+ window . open ( response . oauth_url , '_blank' ) ;
252281 } ) ;
253282 } ) ;
254283 } ) ;
255- </ script >
284+ </ script >
256285
257286 < script >
258287 $ ( '#togglePlexTokenVisibility' ) . on ( 'click' , function ( ) {
@@ -267,6 +296,33 @@ <h4 class="alert-heading">Error!</h4>
267296 } ) ;
268297 </ script >
269298
299+ <!-- Fetches the servers after the user has been authenticated -->
300+ < script >
301+ $ ( '#fetchServersBtn' ) . on ( 'click' , function ( ) {
302+ // Show the loading text/spinner
303+ $ ( '#loading' ) . show ( ) ;
304+ $ . post ( '/fetch_servers' , function ( response ) {
305+ if ( response . message ) {
306+ alert ( response . message ) ;
307+ } else {
308+ // Update the dropdown options with the server data
309+ var servers = response . servers ;
310+ var dropdown = $ ( '#server' ) ;
311+ dropdown . empty ( ) ;
312+ servers . forEach ( function ( server ) {
313+ dropdown . append ( $ ( '<option>' ) . text ( server ) . attr ( 'value' , server ) ) ;
314+ } ) ;
315+
316+ // Set the Plex token
317+ var token = response . token ;
318+ $ ( '#plexToken' ) . val ( token ) ;
319+ }
320+ // Hide the loading text/spinner
321+ $ ( '#loading' ) . hide ( ) ;
322+ } ) ;
323+ } ) ;
324+ </ script >
325+
270326 < script >
271327 function displayActiveServerInfo ( activeServer , libraries ) {
272328 var activeServerInfo = document . getElementById ( 'activeServerInfo' ) ;
@@ -293,6 +349,10 @@ <h4 class="alert-heading">Error!</h4>
293349
294350 // Function to be called on page load
295351 window . addEventListener ( 'load' , function ( ) {
352+ // Hide the Jellyfin & emby tab
353+ $ ( '#jellyfinTab' ) . hide ( ) ;
354+ $ ( '#embyTab' ) . hide ( ) ;
355+
296356 // Send an AJAX request to get the active server data from the Python side
297357 $ . ajax ( {
298358 url : '/get_active_server' ,
@@ -345,7 +405,7 @@ <h4 class="alert-heading">Error!</h4>
345405
346406 // Hide the loading text/spinner
347407 $ ( '#saving' ) . hide ( ) ;
348-
408+ showActiveServerData ( event ) ;
349409 } ,
350410 error : function ( error ) {
351411 // Handle error response here
@@ -394,6 +454,42 @@ <h4 class="alert-heading">Error!</h4>
394454
395455 </ script >
396456
457+ <!-- Jellyfin Scripts -->
458+ < script >
459+ $ ( '#jellyfinConfiguration' ) . on ( 'submit' , function ( event ) {
460+ event . preventDefault ( ) ;
461+
462+ var server = $ ( '#jellyfinServer' ) . val ( ) ;
463+ var username = $ ( '#jellyfinUsername' ) . val ( ) ;
464+ var password = $ ( '#jellyfinPassword' ) . val ( ) ;
465+
466+ $ . ajax ( {
467+ url : '/save_jellyfin_data' ,
468+ type : 'POST' ,
469+ contentType : 'application/json' ,
470+ data : JSON . stringify ( { server : server , username : username , password : password } ) ,
471+ success : function ( response ) {
472+ console . log ( 'Jellyfin data saved successfully' ) ;
473+ } ,
474+ error : function ( error ) {
475+ console . log ( 'Failed to save Jellyfin data' ) ;
476+ }
477+ } ) ;
478+ } ) ;
479+
480+ // Show/hide the password button
481+ $ ( '#toggleJellyfinPasswordVisibility' ) . on ( 'click' , function ( ) {
482+ var jellyfinPasswordInput = $ ( '#jellyfinPassword' ) ;
483+ if ( jellyfinPasswordInput . attr ( 'type' ) === 'password' ) {
484+ jellyfinPasswordInput . attr ( 'type' , 'text' ) ;
485+ $ ( this ) . text ( 'Hide' ) ;
486+ } else {
487+ jellyfinPasswordInput . attr ( 'type' , 'password' ) ;
488+ $ ( this ) . text ( 'Show' ) ;
489+ }
490+ } ) ;
491+ </ script >
492+
397493 < script src ="{{ url_for('static', filename='js/libraries/jquery-3.4.1.min.js') }} "
398494 type ="text/javascript "> </ script >
399495 < script src ="{{ url_for('static', filename='js/libraries/bootstrap.bundle.min.js') }} "
0 commit comments