TuneQuest - Ein DIY Hitster

  • Hat sich erledigt. Im Gegensatz zur Spiel-App wird die .env nicht dynamisch eingelesen. Ich habe gerade noch mal einen npm install laufen lassen und jetzt klappt es. Einfach nur anpassen in der Datei hat nicht funktioniert.

    Da bin ich auch RICHTIG reingelaufen. Dass der Inhalt des .env files statisch zur build time im code landet ist definitv wild. Ich habe einige iterationen docker inspect, container restarts und rebuilds hinter mir und dann gings mal und mal ging es nicht, ich bin schier verrückt geworden. Bis ich dann hier lese, dass es sich gar nicht um environment variables im üblichen Sinne handelt, sondern die da einfach reinkompiliert werden. Narf.

    Es wäre definitiv transparenter und der gängigen Praxis entsprechend, wenn die redirect url und client id zur Laufzeit aus den container environment gelesen würden. Leider bin ich in node und typescript GAR NICHT firm, daher habe ich das nicht selber implementiert.

    FMK Trotzdem hast du jetzt deinen ersten pull request mit ein paar fixes für das docker setup :)

    Ich hab mir den docker container auch nur mehr recht als schlecht zusammengeklickt, da kenne ich mich auch gar nicht so aus... Danke für den PR, ich hab da mal nen kommentar zu hinterlassen. Theoretisch müssten alle variablen die über die .env eingelesen werden auch direkt über die Environment von docker gesetzt werden können... Magst du das mal probieren ob das klappt?

  • Ich hab mir den docker container auch nur mehr recht als schlecht zusammengeklickt, da kenne ich mich auch gar nicht so aus... Danke für den PR, ich hab da mal nen kommentar zu hinterlassen. Theoretisch müssten alle variablen die über die .env eingelesen werden auch direkt über die Environment von docker gesetzt werden können... Magst du das mal probieren ob das klappt?

    Ich bin der Meinung, ich hätte dann am Ende mal in den kompilierten javascript code reingegrept und da war halt die redirect url direkt dringestanden. Ich kann mir demzufolge nicht vorstellen, dass environment variables da irgendeinen Effekt haben. Ich schaus mir aber auch mal an. Das zur Laufzeit zu deferren kann ja kein Hexenwerk sein. (berühmte letzte Worte)

  • Hallo zusammen,

    sowas wie das pdf von FMK habe ich gesucht. Perfekt, danke. Darf man für den eigenen Bedarf nutzen, ja?

    Wenn Interesse besteht, kann ich aus meinen Karten auch eine pdf erstellen und hochladen. Sind inzwischen 10 Sätze a 12 Karten.

    Hi, klar ist ja am ende des tages auch nur ne playlist. Wenn jemand seine eigene playlist auch als PDF haben will kann ich das euch auch gerne machen (dauert nicht mal ne minute).

    Hi, bin kein Profi was GitHub/Programmieren angeht..könntest du mir eventuell eine Playlist in PDF umwandeln? Grüße Philipp

  • Hi, klar ist ja am ende des tages auch nur ne playlist. Wenn jemand seine eigene playlist auch als PDF haben will kann ich das euch auch gerne machen (dauert nicht mal ne minute).

    Hi, bin kein Profi was GitHub/Programmieren angeht..könntest du mir eventuell eine Playlist in PDF umwandeln? Grüße Philipp

    Klar, schick mir den link und sag welches "format" du haben willst (also qr code oder spotify "qr" auf der rückseite). Auch als PN wenn du es hier nicht posten willst!

  • Ich hab mir den docker container auch nur mehr recht als schlecht zusammengeklickt, da kenne ich mich auch gar nicht so aus... Danke für den PR, ich hab da mal nen kommentar zu hinterlassen. Theoretisch müssten alle variablen die über die .env eingelesen werden auch direkt über die Environment von docker gesetzt werden können... Magst du das mal probieren ob das klappt?

    Ich bin der Meinung, ich hätte dann am Ende mal in den kompilierten javascript code reingegrept und da war halt die redirect url direkt dringestanden. Ich kann mir demzufolge nicht vorstellen, dass environment variables da irgendeinen Effekt haben. Ich schaus mir aber auch mal an. Das zur Laufzeit zu deferren kann ja kein Hexenwerk sein. (berühmte letzte Worte)

    Also ich hab das mal umgesetzt und containerisiert. Zu finden auf https://hub.docker.com/u/zwaq . Wer sich mit docker halbwegs auskennt, sollte das so zum Laufen bekommen.

    Ich habe auch diverse Erweiterungen in den card creator eingebaut. Man kann jetzt gängige "remastered" suffixe automatisch entfernen lassen und mittels einer JSON Liste Änderungen pro Song machen, also das Jahr, den Artist oder den Songtitel auf der Karte automatisch nachträglich ändern. Das hat den Vorteil, dass man diese Korrektur-Liste dann speichern kann und bei späterem neu-generieren einer Playlist nicht noch mal händisch das PDF nachträglich editieren muss.

    FMK wie motiviert bist du denn bei dem Projekt noch? Ich würde das dann natürlich wieder auf dein repo mergen-requesten. Wenn es von deiner Seite aber nicht mehr interessant ist, dann will ich dich auch nicht nerven. Bin denke ich jetzt aber auch erst mal fertig mit Änderungen. Ich weiß aus eigener Erfahrung, dass ein open-source Projekt erstaunlich viel Nerven kosten kann :D

  • Ich bin der Meinung, ich hätte dann am Ende mal in den kompilierten javascript code reingegrept und da war halt die redirect url direkt dringestanden. Ich kann mir demzufolge nicht vorstellen, dass environment variables da irgendeinen Effekt haben. Ich schaus mir aber auch mal an. Das zur Laufzeit zu deferren kann ja kein Hexenwerk sein. (berühmte letzte Worte)

    Also ich hab das mal umgesetzt und containerisiert. Zu finden auf https://hub.docker.com/u/zwaq . Wer sich mit docker halbwegs auskennt, sollte das so zum Laufen bekommen.

    Ich habe auch diverse Erweiterungen in den card creator eingebaut. Man kann jetzt gängige "remastered" suffixe automatisch entfernen lassen und mittels einer JSON Liste Änderungen pro Song machen, also das Jahr, den Artist oder den Songtitel auf der Karte automatisch nachträglich ändern. Das hat den Vorteil, dass man diese Korrektur-Liste dann speichern kann und bei späterem neu-generieren einer Playlist nicht noch mal händisch das PDF nachträglich editieren muss.

    FMK wie motiviert bist du denn bei dem Projekt noch? Ich würde das dann natürlich wieder auf dein repo mergen-requesten. Wenn es von deiner Seite aber nicht mehr interessant ist, dann will ich dich auch nicht nerven. Bin denke ich jetzt aber auch erst mal fertig mit Änderungen. Ich weiß aus eigener Erfahrung, dass ein open-source Projekt erstaunlich viel Nerven kosten kann :D

    Kannste gerne merge requesten. Ich spiel das ja auch ab und zu und wenn da mehr funktionen rein kommen die mir auch gefallen um so besser, muss ich das nicht selber bauen ;):thumbsup:

    Wenn du willst kannst du auch die readme anpassen und zu deinem docker image linken, dann steht das direkt auf der startseite!

  • Ich bin der Meinung, ich hätte dann am Ende mal in den kompilierten javascript code reingegrept und da war halt die redirect url direkt dringestanden. Ich kann mir demzufolge nicht vorstellen, dass environment variables da irgendeinen Effekt haben. Ich schaus mir aber auch mal an. Das zur Laufzeit zu deferren kann ja kein Hexenwerk sein. (berühmte letzte Worte)

    Also ich hab das mal umgesetzt und containerisiert. Zu finden auf https://hub.docker.com/u/zwaq . Wer sich mit docker halbwegs auskennt, sollte das so zum Laufen bekommen.

    Ich habe auch diverse Erweiterungen in den card creator eingebaut. Man kann jetzt gängige "remastered" suffixe automatisch entfernen lassen und mittels einer JSON Liste Änderungen pro Song machen, also das Jahr, den Artist oder den Songtitel auf der Karte automatisch nachträglich ändern. Das hat den Vorteil, dass man diese Korrektur-Liste dann speichern kann und bei späterem neu-generieren einer Playlist nicht noch mal händisch das PDF nachträglich editieren muss.

    FMK wie motiviert bist du denn bei dem Projekt noch? Ich würde das dann natürlich wieder auf dein repo mergen-requesten. Wenn es von deiner Seite aber nicht mehr interessant ist, dann will ich dich auch nicht nerven. Bin denke ich jetzt aber auch erst mal fertig mit Änderungen. Ich weiß aus eigener Erfahrung, dass ein open-source Projekt erstaunlich viel Nerven kosten kann :D

    Hallo und erstmal Gutes Neues Jahr 2025,

    heute war gerade Zeit und ich konnte die beiden Container im Original und dann auch in der modifizierten Version von zwag flott lokal implementieren - > super herzlichen Dank erstmal.

    Ich wollte nach den Spieleerfahrungen der letzten Tage eine Playlist mit "Klassik/E-Musik" zusammenstellen und daraus Kärtchen erstellen. Leider ist die Datenbasis in Spotify nicht das Jahr der Komposition, sondern wann es eingespielt wurde ... also muß ich alle Jahreszahlen korrigieren. Das mit dem JSON File habe ich gesehen, es wäre natürlich super ein Template dazu aus der Playlist (zusätzlich zum PDF) als JSON herunterladen zu können, um dann die Korrekturen händisch vorzunehmen. Gern schaue ich dazu auch in den Code (nach dem noch ausstehenden merge durch @zwag) hinein.

    Das Jahr ist noch jung und es macht Spaß, daß ihr hier auch so Ideen zum spielen habt und mit umsetzen könnt.


    Herzlichen Dank!

  • Ich hab noch auf der todo, da vor dem erstellen der pdf einen visuellen editor anzubieten mit dem man das editieren kann der dann auch die playlist daten in localstorage speichert oder so, sollte nich allzu schwierig sein, hab ich aber bisher leider noch keine zeit zu gefunden!

  • Ich muss sagen, das ist ein super Tool um neunen Schwung in das Spiel zu bekommen. Ein großes Danke dafür. Das Problem ist natürlich Spotify, wo es mit den Jahreszahlen oft nicht so richtig klappt. Sei es bei Filmmusik oder wenn man eine Playliste importtiert, z.B. mit https://www.tunemymusic.com/ als CSV-Datei. Habe ich mit allen Nr. 1 Hits von 1954 - 2021 gemacht. Da sucht er sich ja beim Import immer auf Spotify ein passendes Lied und das Jahr ist ihm ja egal ;-). Von daher wäre es schön, wenn man die Jahre als Option irgendwie aus einer Datei nehmen könnte, z.B. Interpret/Lied/Jahr.

    Danke und Gruß

    Tron1912

  • Ich muss sagen, das ist ein super Tool um neunen Schwung in das Spiel zu bekommen. Ein großes Danke dafür. Das Problem ist natürlich Spotify, wo es mit den Jahreszahlen oft nicht so richtig klappt. Sei es bei Filmmusik oder wenn man eine Playliste importtiert, z.B. mit https://www.tunemymusic.com/ als CSV-Datei. Habe ich mit allen Nr. 1 Hits von 1954 - 2021 gemacht. Da sucht er sich ja beim Import immer auf Spotify ein passendes Lied und das Jahr ist ihm ja egal ;-). Von daher wäre es schön, wenn man die Jahre als Option irgendwie aus einer Datei nehmen könnte, z.B. Interpret/Lied/Jahr.

    Danke und Gruß

    Tron1912

    Wenn ich mal zeit finde den card creator anzupacken dann wollte ich dem ein "edit" interface geben. Leider hab ich aktuell nicht so wirklich zeit dafür gerade...

  • zwaq danke für das bereitstellen der docker. ich hab die mal bei mir lokal installiert. leider schaffe ich es nicht, dass ich mit dem creator pdfs erstellen kann.
    ich hab mir das ganze über portainer wie folgt erstellt:

    version: '3'
    services:
    card-creator:
    image: "zwaq/tunequest-card-creator:1.0.0"
    restart: always
    ports:
    - 1234:80
    environment:
    SPOTIFY_REDIRECT_URI: https://myurl
    SPOTIFY_CLIENT_ID: myID

    tunequest:
    image: "zwaq/tunequest:1.0.0"
    restart: always
    ports:
    - 2345:3000
    environment:
    SPOTIFY_AUTHORIZE_URL: https://accounts.spotify.com/authorize
    SPOTIFY_API_TOKEN_URL: https://accounts.spotify.com/api/token
    SPOTIFY_SCOPES: "user-modify-playback-state streaming user-read-email user-read-private"
    SPOTIFY_CLIENT_ID: myID
    SPOTIFY_CLIENT_SECRET: mySecret
    SPOTIFY_REDIRECT_URI: https://myurl
    TUNEQUEST_CREATE_URL: https://,yurl


    die Seiten klappen alle, die Verbindung zu Spotify wird auch aufgebaut. Wenn ich die QRs teste, FMK bereit gestellt hat, klappt es auch mit den scannen. Nur gibt der Creator leider keine pdf aus und ich finde auch keine datei auf dem server.
    leider beginne ich erst damit, mich mit docker auseinander zu setzen. liegt vielleicht auch an mir und meinen fehlenden verständnis.

  • wenn die seite schon mal läuft dann ist es doch schon die halbe miete. Den rest kann man meistens in der "entwicklerconsole" im browser ablesen.

    Kannst du mal nachschauen was für eine Fehlermeldung angezeigt wird wenn du versucht eine pdf zu erstellen?


    Viele Grüße

  • Hallo,

    ich habe ein paar "fertige" Playlisten als pdf. Ist es ok wenn ich die mit Anhänge?

    Kann man vielleicht ein Sammelordner o.ä. erstellen und diesen auf der ersten Seite mit einbetten?

    Dann wären die Dateien einfacher im Thread zu finden.


    Grüße aus dem Norden,

    Hoffi

  • Klar, wenn du die irgendwo sammeln kannst dann schick mir gerne den link, ich baue den in den ersten post ein oder verlinke auf deinen post oder so!

  • Hallo FMK und alle Anderen,

    ich bin neu hier und finde das Projekt absolut genial von Idee und Umsetzung. Bedauerlicherweise scheitere ich am Card-Creator ganz ähnlich wie zwaq.

    Ich habe mir alles auf meinen NAS über Docker nach der Vorlage von zwaq vom DockerHub eingerichtet und tunequest selbst läuft tadellos, auch wenn es erst ein paar Stolperstellen gab.

    Der Card-Creator bringt mich jedoch zum verzweifeln. Dieser fordert brav die Spotify-Berechtigung an wenn ich eine Playlist importieren will und der redirect landet inzwischen auch wieder beim Creator. Leider erhalte ich danach wenn ich Playlists importieren will immer Fehler und komme nicht weiter.

    Hier ist einmal meine komplette Docker-Konfiguration:

    Die Ports Subdomain hitster. landet dabei auf meinem NAS an Port 8824 und die Subdomain hitster-create. landet auf Port 8823. Das scheint auch zu gehen da beide seiten über die Subdomains erreichbar sind.

    Im Spotify developer Dashboard habe ich mir aktuell eine App angelegt und nutze somit für creator und applikation die gleiche client-ID. Als Redirect-URLs sind beide subdomains hinterlegt.

    Wo ich mir nicht richtig sicher bin:

    • In der DockerHub-Vorlage steht beim creator bei SPOTIFY_REDIRECT_URI die domain für tunequest (das Spiel) und nicht den creator. Ist das wirklich korrekt? Ich habe dies bei mir anders weil ich sonst nach der Spotify-Anmeldung vom Creator immer wieder bei der Startseite lande.
    • Benötigt der Creator wirklich nicht das Secret?

    Aktuell erhalte ich in der Dev-Konsole beim Laden von Playlists folgende Fehler:

    Code
    api.spotify.com/v1/playlists/37i9dQZF1DXdPec7aLTmlC/tracks?market=DE&fields=offset%2Climit%2Cnext%2Citems%28track%28id%2Cname%2Cartists%28name%29%2Calbum%28release_date%29%2Ctype%2Cexternal_urls%29%2Cadded_at%29&limit=50&offset=0:1 
                
               Failed to load resource: the server responded with a status of 404 ()
    index-BzMWRDLA.js:40 Uncaught (in promise) Error: Unrecognised response code: 404 - . Body: {"error": {"status": 404, "message": "Resource not found" } }
        at LL.validateResponse (index-BzMWRDLA.js:40:76318)
        at async fo.makeRequest (index-BzMWRDLA.js:40:80481)
        at async wL.getRequest (index-BzMWRDLA.js:40:57825)
        at async b (index-BzMWRDLA.js:271:1660)

    Die Playlist ist dabei öffentlich. Führe ich den Link der als Button-Aktion bei Load Playlist ausgeführt wird manuell aus erhalte ich diesen Fehler (vermutlich weil im Header dann entsprechende Daten fehlen?!):

    Code
    {
      "error": {
        "status": 401,
        "message": "No token provided"
      }
    }

    Bin echt am verzweifeln und hab schon viel hin und her probiert mit unterschiedlichem Fehlerbild aber stehts ohne Erfolg. Und das hier beschriebene Setup scheint mir nach bestem Wissen am korrektesten zu sein.

    Kann mir jemand hier sagen was ich eventuell falsch mache? Ich wäre sooo dankbar und happy wenn ich das zum laufen bekomme. Falls Das bei der Fehlersuche hilft kann ich auch per DM den Domainnamen nennen, sodass ihr selbst in der Dev-Console das Problem anschauen könnt auf meinem Server. Da kommt später vermutlich eh noch htaccess dazu.

    Vielen lieben Dank vorab für jegliche Hilfe die zur Lösung beiträgt,

    Erik

  • Ist dein spotify account entweder der owner des "spotify for developers"-clients oder in der liste der allowed users drin?

    Außerdem gibt es vom tunequest selbst schon einen 1.1.0 container (das löst aber vmtl nicht dein Problem :D)

    Und nein, der creator braucht das secret nicht.

    Einmal editiert, zuletzt von zwaq (6. Mai 2025 um 19:29)

  • Hi, am besten schick mir einfach mal ne dm dann gucken wir zudammen dadrauf, da kann man das am besten debuggen. So auf anhieb kann ich dir da sonst schlecht tipps geben!

  • Zitat

    In der DockerHub-Vorlage steht beim creator bei SPOTIFY_REDIRECT_URI die domain für tunequest (das Spiel) und nicht den creator. Ist das wirklich korrekt? Ich habe dies bei mir anders weil ich sonst nach der Spotify-Anmeldung vom Creator immer wieder bei der Startseite lande.

    Stimmt, das war ein bug. Ich habe mal die README der Container aktualisiert.

  • Ist dein spotify account entweder der owner des "spotify for developers"-clients oder in der liste der allowed users drin?

    Außerdem gibt es vom tunequest selbst schon einen 1.1.0 container (das löst aber vmtl nicht dein Problem :D)

    Und nein, der creator braucht das secret nicht.

    Spielt das denn eine Rolle? Ich bin teil eines Familien-Abo mit meinem Bruder und er ist der Owner. Aber zum Abspielen funktioniert die API ja auch daher halte ich das eher nicht für mein Problem.
    Und das mit der Version ist ein toller Hinweis. Habe UnRAID als NAS daheim und das bietet keine direkte Möglichkeit für Docker-Compose. Daher hab ich mir nur für tunequest Portainer installiert und mache das darüber. Und dort hab ich noch keine automatischen Updates für den Container konfiguriert...bevor ich da Zeit investiere muss es aber erst laufen ;) - solange update ich manuell.
    Auch toll wenn die ReadMe aktualisiert wird dann stolpert da keiner mehr drüber.

    Und zuerst mal ein Lob an die Community hier - da kommt ein neuer User wie ich und schreibt ein Problem in einen Thread wo 3 Monate nix geschrieben wurde und am gleichen Tag noch antworten zwei Leute und wollen helfen. Das ist wirklich toll!

    FMK ich schicke dir und zwaq eine PM mit der kompletten Domain und ihr könnt entweder erstmal selbst sehen ob ihr schlau draus werdet oder ich mache das bei Bedarf dann sehr gerne mal interaktiv mit dir FMK.

    In jedem Fall schon einmal vielen Dank an euch für die schnelle Hilfsbereitschaft!


    Grüße,
    Erik

  • So hier ein kurzes Update für alle die vielleicht ähnliche Probleme haben. Folgende zwei Dinge (unabhängig von einander) waren bei mir noch ein Problem:

    1. Meine Playlist war zwar öffentlich, aber eine von Spotify erstellte und keine eigene User-Playlist. Dies scheint beim API-Zugriff einen entscheidenden Unterschied zu machen
      -> nur eigene Playlists nutzen oder sonst alle Songs aus einer öffentlichen Playlist in eine eigene kopieren
    2. Das Öffnen des erzeugten PDF in der eingebetteten Dokumentenansicht der Website funktioniert unter Chrome scheinbar nicht. Eventuell liegt es auch an einem Plugin das ich nutze. Aber mit Firefox klappt alles wunderbar und daher habe ich nicht weiter geforscht. In Chrome wurde das Dokument zwar erzeugt und ein Öffnen-Button wird angezeigt, dieser führt aber nicht zu einem Download.

    Wenn dies berücksichtigt wird funktioniert alles. Vermutlich habe ich also schon viel eher alles korrekt konfiguriert gehabt und eben nur ein Gespenst gejagt.

    Herzlichen Dank nochmals an zwaq und FMK für die tolle und schnelle Unterstützung!