[Vorlage] trackListHtml-Scrolling für Spotify
-
Hallo,
es gibt in dem Adapter 1.0 ja nun auch die vorgefertigten HTML´s. Dort wird auch der aktuelle Titel grün markiert.
Aber wenn ich dort einen Titel auswähle springt die Liste wieder nach oben. Kann man das irgendwie lösen? Ich glaub das ist hier gemacht worden, oder?
-
Hallo,
wäre einer von euch so nett, die Tracklist mit den erforderlichen Skripten erneut bereitzustellen... mit den "Fetzen" bekomme ich es nicht hin. Der Adapter läuft...
Danke euch... -
ich gebe auf... ich habe stunden verbracht hier etwas brauchbares zu finden.
das Forum ist in der Form nicht nutzbar
da können sie den kram auch gleich wegwerfen...Ps. bin massiv gefrustet. Ich möchte auch ein Trackliste wie aus dem 1 Post.
-
ich versuche nochmals mein Glück, der Frustlevel ist wieder etwas gesunken...
so schaut es aus...
ich zeige über einen Basic String, folgenden DP an.
spotify-premium.0.html.tracksWie kann ich das denn etwas formatieren? mir sind einfach zuviele Infos dargestellt.
- ich brauche etwas mehr Platz, zwischen den Titeln,
- keine Dauer
- Interpret/ Album wenn dann nur klein.
wie gesagt Post 1 Darstellung wäre das optimum, wenn dann noch der aktive Titel "gescrollt" wird, wäre das Klasse. Kann ich das irgendwie selbst definieren?
Für eine Hilfestellung wäre ich echt dankbar.
-
@dos1973
Hallo, wow hat sich hier im Forum viel verändert.
War schon sehr lange nicht mehr online, weiter habe ich das Gefühl, dass einiges aus den alten Posts gelöscht wurde, wie Bilder und Beschreibungen.
Selber habe ich zur Zeit den Spotify Adapter nicht in Betrieb, fals es zur Änderungen gekommen wäre, was zu Problemen führen könnte oder so, sprich ich hätte kein aktueller Code zur Hand. Im Moment habe ich das ioBroker Vis auf Eis gelegt und versuche etwas mit Mediola und RedMatic herum.Wegen anpassungen müsstest du in deinem Script schauen, welche Klassen du hast und sie im Vis unter CSS anpassen, oder weitere Klassen hinzufügen, braucht aber ein gewisses Verständnis für CSS, Html und Javascript.
Werde, sobal ich etwas mehr Zeit habe, den Beschreib nochmals durchschauen und wieder ergänzen mit den verschwundenen Sachen.
-
Das Script ist jetzt wieder auf den aktuellen Adapter konfiguriert und angepasst.
-
Vielen Dank dass du es nochmals angepasst hast.
-
kann man damit nur die Playlist und Tracklist anzeigen? Ich würde gerne mit einem Klick auf den jeweiligen Namen die Playlist/Track auswählen.
-
ich habs selbst nicht mehr aktiv - aber ja das war möglich.
-
Hallo zusammen,
habe mit dem Script folgende Probleme:
- Das Widget wird mir auf der Vis ganz links oben angezeigt, obwohl für das Widget andere Werte eingestellt sind.
- Das "Autoscroll" funktioniert nicht. Er steht vielmehr an erster Stelle. Der aktuelle Track bzw. die Playlist ist aber farblich markiert.
Jemand eine Idee?
VG
-
Vielleicht ja schon zu spät, aber aktuell benutze ich Spotify nicht mehr, da ich über SONOS Musik wiedergebe und so den Adapter nicht brauche. Ich habe ihn aber mal wieder aktiviert, um zu sehen, was es sein könnte.
Zu deiner Frage 1:
Stimmt, konnte das Problem reproduzieren, wenn die Tracklist nicht gefüllt ist, weil der Soptify-Adapter deaktiviert wurde, oder keine gespeicherte Playlist läuft, weil du gerade ein Musikstück laufen lässt, welches nicht in der Playlist gespeichert ist, füllt der Spotify-Premium-Adapter die Playlist nicht mit Informationen und das Script speichert eine leere html-Liste ab und hier bekommt mein kleines Scroll-Script am Ende Probleme, weil es vergeben nach einem Eintrag sucht mit entsprechender ID, welche dadurch nicht vorhanden ist (Widget wird verschoben). Dies kannst du mit einer einfachen if Abfrage aber lösen. Werde dies in meinem Script oben noch ergänzen.Zu Frage 2:
Verstehe ich nicht ganz. Aber es ist nur eine gegebene Javascript-Funktion, es ist etwas Zweckentfremdet, und daher nicht eine flüssige Scroll Funktion. Es hilft eigentlich nur, dass der aktuelle Song in dem Sichtfeld bleibt, sprich, der aktuelle Song pendelt in der oberen Hälfte des Sichtfeldes umher. Dies scrollt auch nur solange mit, bis die Scrollleiste am Ende ist, dann wird einfach der aktuelle Song farblich markiert.
(Einfach gesagt: Wenn alle Titel in deinem Fenster platz haben, wird auch nichts gescrollt)
Für ein bessere Lösung, müsste man ein eigenes Script schreiben, da fehlen auch mir die Kenntnisse. -
@gimli85 Vielen Dank. Ist nicht zu spät, der Adapter ist auf einer Testseite weiter aktiv. Ich teste dein Update mal.
-
Moin !
Hmm ich habe jetzt ne Stunde versucht zu ergründen warum im Firefox alles immer unten an der Vis "klebt" und nicht da positioniert wird wo das HTML element eigentlich liegen sollte.
Bin dann auf das gestoßen:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeededDie Methode tut nicht in Firefox ... Gibt es da wohl was Alternatives zu ?
Grüße
-
Kurzer Nachtrag ...
So gehts bei mir:html += "el.scrollIntoView();"; -
Hi, irgendeine Idee, wieso bei mir die Ordner nicht erzeugt werden ?
spotify -> spotify-supplement
ALso eine Idee, wo ich nach dem Fehler suchen kann ?
-
@gimli85
Besten Dank für die Anleitung. Mir hat es die Order erzeugt. Leider hab ich bei der der Spalte in den Objekten bei Wert gar nix drin. Diese ist leer, keine HTML... an was kann das liegen? habe das Skript genau so importiert?Danke für die Antwort
-
Vielen lieben dank für das mega gute script.
Ich hab nur ein Problem, ab einer Gewissen Menge Lieder in der Tracklist, wenn ich auf ein Lied drück, nimmt er das 2 darunter liegendes Lied, bleibt dann auch die ganze Playlist so..
Als Bsp die ersten 30 Lieder spielt er genau dieses Lied wenn ich klick.
klick ich Lied 31, spielt er aber 33
klick ich dann 32, spielt er 34ich kann also tatsächlich lied 31 nicht anklicken.
Hatte schonmal jemand so ein Phänomen?
Vielen Dank schonmal
-
Moin, ich wollte gerne den aktuellen Spotify Adapter (v1.2.1) in meiner VIS für ein GaragenMusikTablet (ein altes Fire HD8) einbinden aber so richtig wollten die Scrips in Sachen Tracklist nicht mehr. Ich habe das Script angepasst so das es bei mir jedenfalls funktioniert. Evt. kann es ja jemand gebrauchen.
/*************************************************************************************************** * HTML-Tracklist: * Quelle: * https://github.com/twonky4/ioBroker.spotify-premium/wiki/Html-Tracklist * https://forum.iobroker.net/viewtopic.php?p=151165#p151165 * * Dieses Script wurde von twonky entworfen * Es wurde an gewissen Stellen erweitert und engepasst ****************************************************************************************************/ const STATE_PATH = 'javascript.'+ instance + '.' + 'spotify.spotify-supplement.'; createState(STATE_PATH + 'htmlTrackList', '', false); function refreshTrackList() { var current = getState('spotify-premium.0.player.playlist.trackList').val; var source = getState('spotify-premium.0.player.playlist.trackListArray').val; var tracklist; var i; var html = '<table class="spotify-tracklist-table">'; // Prüfe, ob die Tracklist geladen wurde if(source.length > 0) { // JSON parsen tracklist = JSON.parse(source); tracklist.forEach (function (track, index){ i = index; html += '<tr onclick="vis.setValue(\'spotify-premium.0.player.playlist.trackNo\', ' + (i+1) + ');">'; html += '<td>'; /******************************************************************** * Hier muss man dem aktuellen Track und/oder Artist eine ID vergeben ********************************************************************/ var currentSong = (current == i) ? ' id="spotify-current-song"' : ''; // gibt dem aktuellen Song eine ID var currentArtist = (current == i) ? ' id="spotify-current-artist"' : ''; // gibt dem dazugehörigen Artist eine ID /* Wenn man ein Icon hinzufügen möchte, braucht es diese IF-Abfrage, sonst kann sie komplett gelöscht werden */ if(current == i) { html += '<div style="position:absolute;left:0px;width:25px;height:25px;">'; // Formatierung des Icons html += '<img style="width:100%;" src="/vis.0/icons/active_song_speaker_white.png">'; // Pfad zum Icon in deiner Vis html += '</div>'; } html += '<div class="spotify-tracklist-title"' + currentSong + '>' + track.title + '</div>'; html += '<div class="spotify-tracklist-artist"' + currentArtist + '>' + track.artistName + '</div>'; html += '</td></tr>'; //html += '</tr>'; }); } else { // gebe einen Hinweis auf fehlende Trackliste html += '<tr><td>Keine Tracklist geladen.</td></tr>'; } // tabelle schliessen html += '</table>'; /*************************************************************************************************** * Script für automatisches Scrollen des aktuellen Titels * https://forum.iobroker.net/viewtopic.php?f=30&t=18222&p=190991&hilit=javascript+experten#p190365 ****************************************************************************************************/ // Lade das Script nur, wenn die Tracklist auch geladen ist if(source.length > 0) { html += '<script>'; html += 'var el = document.getElementById("spotify-current-song");'; // ID von dem aktuellen DIV in der TABLE oben //html += "el.scrollIntoViewIfNeeded(true)"; //true = Position oben / false = Position unten (Achtung: hier Id:spotify-current-artist angeben) html += "el.scrollIntoView();"; // scroll to current track html += '</script>'; } /***************************************************************************************************/ setState(STATE_PATH + 'htmlTrackList', html, true); } on('spotify-premium.0.player.playlist.trackList', refreshTrackList); on('spotify-premium.0.player.playlist.trackListArray', refreshTrackList); refreshTrackList();
