Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. [Vorlage] trackListHtml-Scrolling für Spotify

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    [Vorlage] trackListHtml-Scrolling für Spotify

    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dos1973 last edited by

      Vielen Dank dass du es nochmals angepasst hast.

      1 Reply Last reply Reply Quote 1
      • P
        Pascal1909 last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • D
          dos1973 last edited by

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

          1 Reply Last reply Reply Quote 0
          • C
            Coffeelover last edited by

            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

            G 1 Reply Last reply Reply Quote 0
            • G
              gimli85 @Coffeelover last edited by

              @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.

              C 1 Reply Last reply Reply Quote 0
              • C
                Coffeelover @gimli85 last edited by

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

                moelski 1 Reply Last reply Reply Quote 0
                • moelski
                  moelski @Coffeelover last edited by

                  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 1 Reply Last reply Reply Quote 0
                  • moelski
                    moelski @moelski last edited by

                    Kurzer Nachtrag ...
                    So gehts bei mir:

                    html += "el.scrollIntoView();"; 
                    
                    AndiBee 1 Reply Last reply Reply Quote 0
                    • AndiBee
                      AndiBee @moelski last edited by

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

                      spotify -> spotify-supplement

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

                      1 Reply Last reply Reply Quote 0
                      • S
                        santo24 @gimli85 last edited by

                        @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

                        1 Reply Last reply Reply Quote 0
                        • S
                          Slimsteve last edited by 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

                          1 Reply Last reply Reply Quote 0
                          • M
                            matlen67 last edited by 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();
                            

                            vis_spotify.png

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post

                            Support us

                            ioBroker
                            Community Adapters
                            Donate

                            824
                            Online

                            31.8k
                            Users

                            80.0k
                            Topics

                            1.3m
                            Posts

                            javascript multimedia
                            13
                            30
                            5152
                            Loading More Posts
                            • Oldest to Newest
                            • Newest to Oldest
                            • Most Votes
                            Reply
                            • Reply as topic
                            Log in to reply
                            Community
                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                            The ioBroker Community 2014-2023
                            logo