[GUI] - Better Web

[SugoGangotti]

Eng

I've worked on some significant enhancements to the codebase. This PR introduces a revamped GUI with better visual styling for individual movie items, the functionality to add files to a list, and the implementation of a download queue.

​After completing these changes, I would like to include these new features in the public project.

​I have a few questions regarding the next steps and architecture:

1. ​Project Interest: Is this modification interesting and beneficial for the project as a whole?
2. Architecture: I'm facing a dilemma regarding data persistence. Do we want to introduce a dedicated database to handle user data and queue states, or should we manage the queues in-memory (or with flat files) without a dedicated database?
3. Publication/Contribution: How should I go about publicly publishing these changes? Should I open a Pull Request, and if so, what is the best procedure/who should I contact?
   ​I look forward to your feedback on all three points.

Ita

​Ho lavorato a dei miglioramenti significativi al codice base. Questa Pull Request introduce una GUI rinnovata con un migliore stile visivo per i singoli film, la funzionalità per aggiungere i file a una lista, e l'implementazione di una coda di download.

​Dopo aver completato questo lavoro, vorrei includere queste nuove modifiche nel progetto pubblico.

​A tal proposito, attendo informazioni su tre quesiti principali:

1. ​Interesse del Progetto: Ritenete che questa modifica sia interessante e utile per il progetto nel suo complesso?
2. ​Architettura: Ho un dilemma sulla persistenza dei dati. Vogliamo introdurre l'uso di un database dedicato per gestire lo stato della coda e i dati utente, o dobbiamo gestirle in memoria (o con semplici file) senza un database?
3. Pubblicazione/Contributo: Come devo procedere per pubblicare queste modifiche? Devo aprire una Pull Request, e in tal caso, qual è la procedura migliore/chi devo contattare?

​Attendo il vostro feedback su tutti e tre i punti.

[Arrowar]

1. Certo che è interessante. Aggiungere una coda di download è sempre stata una feature che avevo intenzione di aggiungere ma non ho mai avuto modo di "aggiungerla al meglio" come una barra di progresso per la GUI ma quello penso sia abbastanza complesso.

2. Io avevo fatto delle prove con un semplice file queue.txt.
   Salvavo i vari manifest o playlist in un file .txt e terminato di aggiungere link partiva il download dei vari file.

3. Apri pure una pull requests se funziona tutto aggiungo subito altrimenti appena ho tempo ti aiuto a risolvere i vari problemi o sistemare il codice.

---

1. Of course it's interesting. Adding a download queue has always been a feature that I intended to add but I've never had the opportunity to "best add" it as a progress bar for the GUI but I think that's quite complex.

2. I had done some tests with a simple queue.txt file.
   I saved the various manifests or playlists in a .txt file and once I finished adding links the download of the various files started.

3. Feel free to open a pull requests if everything works, I'll add immediately otherwise as soon as I have time I'll help you solve the various problems or fix the code.

[SugoGangotti]

ITA

Sto cercando di fixare un problema che porta a far crashare windows.

Se dovessi rifare interamente la gui con react potrebbe andare bene?

ENG

I'm trying to fix a problem that's causing Windows to crash.

If I were to completely rewrite the GUI with React, would that be an appropriate solution?

[Arrowar]

Certo nessun problema aggiungo anche @FrancescoGrazioso che è l'ideatore della GUI per vedere che ne pensa.

[FrancescoGrazioso]

Assolutamente interessante, come dissi ai tempi della gui io a livello di design faccio pena, quindi se qualcuno ci mette mano molto interessante, puoi eventualmenteettere degli screen di come verrebbe? Poi mi faccio un giro sul codice

[SugoGangotti]

Mockup

Home Page

Search Page

Settings

Queue

Notes

Questa è una semplice bozza in react fatta in circa 30 minuti, senza backend giusto per vedere se esteticamente "funziona".

[FrancescoGrazioso]

Due domande:

1. Perché nomini un login? Non ha senso introdurre un login in un programma come questo

2. (Non é assolutamente una critica ma curiosità) Perché react? Che vantaggi porta obbligare l'utente a installare un intero framework in più rispetto alla gui di adesso? Attualmente quando scarichi il progetto hai già tutto servito tramite il backend, non capisco i vantaggi di mettere dentro anche react

[SugoGangotti]

Due domande:

1. Perché nomini un login? Non ha senso introdurre un login in un programma come questo
2. (Non é assolutamente una critica ma curiosità) Perché react? Che vantaggi porta obbligare l'utente a installare un intero framework in più rispetto alla gui di adesso? Attualmente quando scarichi il progetto hai già tutto servito tramite il backend, non capisco i vantaggi di mettere dentro anche react

---

Domanda 1

Il riferimento al login è un refuso dovuto ad una prova che stavo facendo per la versione che userò sul mio server.

Nella mia implementazione, un sistema di login è necessario per supportare la gestione di utenti multipli con permessi differenziati (ad esempio, alcuni utenti potranno aggiungere elementi alla coda, ma questi richiederanno la mia approvazione manuale).

Per il progetto pubblico, capisco che il login possa non avere senso e sarà escluso o reso opzionale (e ovviamente ci lavorerò dopo che le altre funzionalità saranno funzionanti).

---

Domanda 2

Ho pensato di introdurre React per diversi motivi:

1. Passaggio da SSR a CSR: Attualmente il server si occupa di gestire il backend e il frontend e quindi ad ogni interazione "ricarica" nuovamente l'HTML, rendendo lo script molto più instabile e (in casi di hardware meno performante, come il mio) suscettibile a crash. Con React, il server aggiorna solo i componenti modificati, quindi la gran parte del peso di elaborazione viene spostato al client.

2. UX e Moduli: React è un linguaggio molto diffuso, è facile trovare librerie e blocchi gratuiti, in più, essendo modulare, la manutenzione e lo sviluppo saranno molto più semplici.

3. Build di React: Fortunatamente l'utente non deve installare il framework quando scarica lo script, perché con il comando "build" di React converte tutto il codice in HTML, CSS e JavaScript minificati. Gli unici che subiranno il peso di React sono quelli che ci devono sviluppare sopra.

4. Preferenza personale: È il linguaggio che conosco meglio, non proprio il motivo più oggettivo ma spero gli altri bastino ahahah.

---

P.S. Spero ora abbia più senso la mia proposta, o che almeno io sia riuscito a spiegarla in modo comprensibile.

[Taoshan98]

Due domande:

1. Perché nomini un login? Non ha senso introdurre un login in un programma come questo
2. (Non é assolutamente una critica ma curiosità) Perché react? Che vantaggi porta obbligare l'utente a installare un intero framework in più rispetto alla gui di adesso? Attualmente quando scarichi il progetto hai già tutto servito tramite il backend, non capisco i vantaggi di mettere dentro anche react

Mi scuso per l’intromissione, ma vorrei condividere una considerazione in merito al sistema di autenticazione.

Dal mio punto di vista, l’introduzione di una funzionalità di login sarebbe estremamente utile, soprattutto considerando il mio caso d’uso (e probabilmente quello di altri utenti).
Utilizzo questo software principalmente per scaricare file multimediali, che poi aggiungo manualmente alle mie librerie gestite da Sonarr e Radarr. Questi, a loro volta, sono integrati con Jellyfin e Plex, consentendomi di accedere e riprodurre i contenuti da remoto.

Tutti e quattro i servizi sono esposti su Internet tramite proxy, così da poter, se necessario, avviare un download direttamente da Sonarr o Radarr e successivamente fruirne da qualsiasi luogo attraverso i client Jellyfin o Plex.
Quando Sonarr o Radarr non riescono a trovare automaticamente un contenuto, effettuo la ricerca manuale tramite questo software.

Ed è qui che entra in gioco la login:
la possibilità di autenticarsi permetterebbe di esporre la GUI sul web in modo sicuro e controllato, rendendo l’applicazione accessibile anche dall’esterno.
È vero che si potrebbe implementare una basic authentication e risolvere rapidamente la questione, ma un sistema di login con gestione dei permessi utente aprirebbe scenari molto più interessanti — anche solo come esercizio tecnico sarebbe, a mio avviso, un valore aggiunto significativo.

P.S.: React è una libreria, non un framework.

Detto questo, complimenti a @SugoGangotti per il lavoro svolto!

[FrancescoGrazioso]

Due domande:

1. Perché nomini un login? Non ha senso introdurre un login in un programma come questo
2. (Non é assolutamente una critica ma curiosità) Perché react? Che vantaggi porta obbligare l'utente a installare un intero framework in più rispetto alla gui di adesso? Attualmente quando scarichi il progetto hai già tutto servito tramite il backend, non capisco i vantaggi di mettere dentro anche react

Domanda 1

Il riferimento al login è un refuso dovuto ad una prova che stavo facendo per la versione che userò sul mio server.

Nella mia implementazione, un sistema di login è necessario per supportare la gestione di utenti multipli con permessi differenziati (ad esempio, alcuni utenti potranno aggiungere elementi alla coda, ma questi richiederanno la mia approvazione manuale).

Per il progetto pubblico, capisco che il login possa non avere senso e sarà escluso o reso opzionale (e ovviamente ci lavorerò dopo che le altre funzionalità saranno funzionanti).

Domanda 2

Ho pensato di introdurre React per diversi motivi:

1. Passaggio da SSR a CSR: Attualmente il server si occupa di gestire il backend e il frontend e quindi ad ogni interazione "ricarica" nuovamente l'HTML, rendendo lo script molto più instabile e (in casi di hardware meno performante, come il mio) suscettibile a crash. Con React, il server aggiorna solo i componenti modificati, quindi la gran parte del peso di elaborazione viene spostato al client.
2. UX e Moduli: React è un linguaggio molto diffuso, è facile trovare librerie e blocchi gratuiti, in più, essendo modulare, la manutenzione e lo sviluppo saranno molto più semplici.
3. Build di React: Fortunatamente l'utente non deve installare il framework quando scarica lo script, perché con il comando "build" di React converte tutto il codice in HTML, CSS e JavaScript minificati. Gli unici che subiranno il peso di React sono quelli che ci devono sviluppare sopra.
4. Preferenza personale: È il linguaggio che conosco meglio, non proprio il motivo più oggettivo ma spero gli altri bastino ahahah.

P.S. Spero ora abbia più senso la mia proposta, o che almeno io sia riuscito a spiegarla in modo comprensibile.

continuo a non essere sicurissimo sulla parte di distribuire solo la parte buildata, cioè indubbiamente per la sezione "Releases" può funzionare ma ad esempio io uso direttamente la repo. Inoltre non so quanto effettivamente se ne possa riguadagnare in performance, contando che la UI sono letteralmente due pagine HTML, conta che in ogni caso dovresti avere un server django attivo quindi non risparmi particolarmente in fatto di performance.

In ogni caso direi che ovviamente l'ultima parola va a @Arrowar

[Arrowar]

@Taoshan98 Per il login penso che anche con la gui di adesso si possa implementare.

@FrancescoGrazioso La gui che che hai fatto per i miei standard è già più che perfetta e complimenti ancora.

L' "unica" cosa che manca da aggiungere sono gli altri siti e far funzionare la coda di download, però non ho idea di quanto tempo ci possa volere.