[Vorlage] trackListHtml-Scrolling für Spotify

[gimli85]

Das Script ist jetzt wieder auf den aktuellen Adapter konfiguriert und angepasst.

[dos1973]

Vielen Dank dass du es nochmals angepasst hast.

[Pascal1909]

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.

[dos1973]

ich habs selbst nicht mehr aktiv - aber ja das war möglich.

[Coffeelover]

Hallo zusammen,

habe mit dem Script folgende Probleme:

1. Das Widget wird mir auf der Vis ganz links oben angezeigt, obwohl für das Widget andere Werte eingestellt sind.
2. Das "Autoscroll" funktioniert nicht. Er steht vielmehr an erster Stelle. Der aktuelle Track bzw. die Playlist ist aber farblich markiert.

Jemand eine Idee?

VG

[gimli85]

@Coffeelover

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.

[Coffeelover]

@gimli85 Vielen Dank. Ist nicht zu spät, der Adapter ist auf einer Testseite weiter aktiv. Ich teste dein Update mal.

[moelski]

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/scrollIntoViewIfNeeded

Die Methode tut nicht in Firefox ... Gibt es da wohl was Alternatives zu ?

Grüße

[moelski]

Kurzer Nachtrag ...
So gehts bei mir:

html += "el.scrollIntoView();"; 

[AndiBee]

Hi, irgendeine Idee, wieso bei mir die Ordner nicht erzeugt werden ?

spotify -> spotify-supplement

ALso eine Idee, wo ich nach dem Fehler suchen kann ?

[santo24]

@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

[Slimsteve]

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 34

ich kann also tatsächlich lied 31 nicht anklicken.

Hatte schonmal jemand so ein Phänomen?

Vielen Dank schonmal

[matlen67]

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();