Im ersten Teil wird erklärt, wie man das Backend (C#-Code) für Lidarr verändert.
Im zweiten Teil wird erklärt, wie man das unveränderte Frontend (HTML und JS-Code) bereitstellt, damit Änderungen am Backend getestet werden können und keine 404-Not Found-Fehlermeldung beim Kompilieren des C#-Codes erscheint.
In diesem dritten Teil wird erklärt, wie man Änderungen am Frontend-Code selber vornimmt.
Leider gibt die offizielle Lidarr-Wiki für das Frontend keinerlei Hinweise, wie man Code-Anpassungen vornehmen soll. Die folgende Möglichkeit ist nur eine von verschiedenen Vorgehensweisen. Es gibt z.B. teure und vermutlich umfangreichere Lösungen. Die hier erklärte Variante ist kostenlos und relativ einfach zu installieren und zu verwenden.
Was braucht man um in Lidarr Anpassungen am Frontend-Code machen zu können?
Wenn man den Backend-Sourcecode z.B. in «Visual Studio» ausführt, wird automatisch ein Browser mit dem sicht- und benutzbaren Frontend gestartet. Um diesen Code debuggen und analysieren zu können, benötigen wir die React-Developer-Tools. Diese Browser-Erweiterung gibt es kostenlos für «Google Chrome«, «Mozilla Firefox» und «Microsoft Edge».
Wenn man aus dem entsprechenden Online-Addon-/Web-Store diese Erweiterung im eigenen Browser auf der Entwicklungsmaschine installiert hat, bekommt man zwei zusätzliche Möglichkeiten zu den bestehenden Entwicklertools namens Components und Profiler.
Beispiel um die Verwendung der React-Developer-Tools im Browser zu erklären:
In «Visual Studio 2022» habe ich den backend-Code über die Lidarr.sln im Verzeichnis \src geladen und gestartet. Das Lidarr-Frontend startet nach ein paar Sekunden automatisch im lokalen Browser.
Über das Lidarr-GUI wurde ein Künstler gesucht und hinzugefügt.
Fährt man nun mit der Maus über den Button Links (#1), poppen alle vorhandenen Detail-Links auf, die für diesen Künstler bei der Datenquelle “MusicBrainz” gespeichert sind. Dann öffnet man die Browser-Entwickler-Tools mit Ctrl + Shift + I und klickt oben im Menu dieser Entwickler-Tools auf den neu verfügbaren Eintrag Components (#3). Das zeigt einem sehr viele Details zur aktuell ausgewählten Cursor-Position an.
Im Beispiel wurde dann auf den Link für “Facebook” geklickt (#2). Das zeigt in den Components (#3) unter props z.B. den kleingeschriebenen und im GUI sichtbaren Namen facebook.
Für die Frage “wie ändere ich nun den Frontend-Code?” ist der unterste Eintrag source (#4) entscheidend: ArtistDetailsLinks.js
In dieser JavaScript-Datei steckt also der Code, der diese Links im Browser-GUI bereitstellt.
Wir finden die Datei ArtistDetailsLinks.js im Verzeichnis \frontend\src\Artist\Details\
Dort können wir diese Datei z.B. im Texteditor «Notepad++» öffnen.
In Components unter source sehen wir weiter auch die Zahl 37. Das gibt uns die Zeilenzahl im Sourcecode an. Wir suchen im Notepad++ also die Zeile 37, die mit <Label beginnt. Damit und mit den folgenden 6 Zeilen wird in React der vom Backend übergebene Inhalt als aufpoppender Link dargestellt.
Wenn man nun beispielsweise statt dem Begriff facebook lieber die URL im GUI sichtbar machen möchte, dann würde man im Notepad++ die Zeile 42 von {link.name} auf {link.url} (#6) ändern.
Wenn man das Lidarr-GUI nach dem Speichern der Code-Änderung in Notepad++ mit F5 aktualisiert, passiert aber leider sichtbar gar nichts. Der Grund dafür wurde im zweiten Teil erklärt: Sämtliche Frontend-Code-Änderungen müssen mit Yarn zuerst kompiliert und bereitgestellt werden.
Da das ein ziemlich mühsamer Ablauf wäre, wenn man bei jeder noch so kleinen Frontend Code-Änderung jedesmal manuell einen Kompilierungsaufruf starten müsste, kann man wie folgt vorgehen:
Wir lassen Yarn das \frontend-Verzeichnis auf Veränderungen überwachen:
Man wechselt wie im zweiten Teil erklärt in der Node.JS-Kommandozeile (mit Administratorrechten ausgeführt) in das Sourcecode-Verzeichnis wo alle \frontend Dateien liegen, z.B. CD %USERPROFILE%\Documents\Visual Studio 2022\Code Snippets\Visual CS\Lidarr-develop\frontend
Darin startet man Yarn mityarn start
Damit wird ab sofort – bis zum manuellen Abbrechen mit Ctrl + C – das gesamte \frontend-Verzeichnis auf Veränderungen überwacht. Sobald man eine Änderung an einer beliebigen Code-Datei macht, wird Yarn dies erkennen und sofort vollautomatisch aktualisieren.
Falls man übrigens fehlerhaften JS-Code einfügt oder verändert, sieht man im Node.JS-Konsolenfenster im Detail, welcher Fehler erkannt wurde und wieso der Code allenfalls nicht erfolgreich kompiliert werden konnte.
Wenn wir im Notepad++ die Zeile 42 nochmal leicht verändern und neu speichern, kann man im offenen Node.JS-Konsolenfenster beobachten, wie diese Veränderung sofort “übersetzt” wird. Das dauert nur wenige Sekunden. Dann endlich sieht man nach der Aktualisierung des GUI im Browser mit F5 auch die vorgenommene Veränderung.
Damit haben wir nun eine Möglichkeit, die verantwortlichen JS-Dateien dank den React-Entwicklertools zu erkennen und darin Code-Änderungen an den entsprechenden Stellen durchzuführen.
Sinngemäss wird das auch für die anderen *arr-Projekte wie Radarr, Sonarr, Readarr oder Whisparr funktionieren.
Zusammenfassung aller 3 Anleitungs-Teile und wie man Lidarr-Code verändert:
Um den Backend-Code in C# zu verändern, müssen wir ihn in einer IDE laden, kompilieren und ausführen.
Um den Frontend-Code zu verändern, brauchen wir den laufenden Backend-Code, zusätzlich Yarn, die React-Entwicklertools im Browser und einen Code-Editor wie Notepad++.
Allgemeiner Hinweis zum Schluss
Dies alles lässt uns den Lidarr-Code ausschliesslich lokal verändern und testen.
Wer vor hat seine Änderungen dem Opensource-Projekt Lidarr zur Verfügung zu stellen, der muss sich zwingend mit Git/Github und den für dieses Projekt geltenden Contribute-Regeln vertraut machen.
Es gibt keine Garantie, dass solche Veränderungen akzeptiert werden.
Bevor man sehr viel Zeit und Herzblut in Änderungen steckt, sollte man unbedingt VORHER abklären, ob eine solche Anpassung erwünscht ist und in welcher Form sie akzeptiert wird. Auch bei Opensource-Projekten entscheiden schlussendlich ein paar wenige Verantwortliche, was an Code und Veränderungen oder Erweiterungen in das Projekt aufgenommen wird.