Navigation

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

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    [Vorlage] Spotify Skript

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

      Skript erstellt: https://github.com/twonky4/ioBroker.spo … l-Playlist

      1 Reply Last reply Reply Quote 0
      • AxelF1977
        AxelF1977 last edited by

        @twonky:

        Skript erstellt: https://github.com/twonky4/ioBroker.spo … l-Playlist `

        Wie ich Dir schon geschrieben habe, ich bin schwer beeindruckt! Und ich bin Dir sehr dankbar für die schnelle Hilfe.

        Ist auch schon eingebaut, siehe Screenshot. Habe noch kurz die Scrollbars an mein Design angepasst. Kommt echt gut jetzt zusammen. Daher einfach mal Danke sagen!

        Klasse Arbeit twonky!
        4249_spotify_playlist_004.1.png

        1 Reply Last reply Reply Quote 0
        • AxelF1977
          AxelF1977 last edited by

          @twonky

          Gibt es eigentlich mittlerweile ein Lösung um die Lautstärke zu regeln, je nach dem Device, auf der die Wiedergabe gerade läuft?

          https://forum.iobroker.net/viewtopic.php?f=21&t=8173&start=280#p131088 funktioniert bei mir nicht (angepasst an den neuen Adapter).

          Das View nimmt auch langsam Formen an.

          Klasse wäre es, auch noch die Anzahl der Titel pro Playliste anzeigen zulassen, wie es auch bei Spotify der Fall ist. Hier = 13 Songs. Der Adapter gibt das ja her, aber wie regel ich das pro Playliste dynamisch?
          4249_spotify_playlist_006.png
          4249_spotify_playlist_005.png

          1 Reply Last reply Reply Quote 0
          • M
            mikiline last edited by

            Es gibt bereits einen Datenpunkt hierzu

            "spotify-premium.0.playbackInfo.playlist.tracksTotal"

            Auch welcher bereits abgespielt wird

            "spotify-premium.0.playbackInfo.playlist.trackNo"

            1 Reply Last reply Reply Quote 0
            • AxelF1977
              AxelF1977 last edited by

              @mikiline:

              Es gibt bereits einen Datenpunkt hierzu

              "spotify-premium.0.playbackInfo.playlist.tracksTotal"

              Auch welcher bereits abgespielt wird

              "spotify-premium.0.playbackInfo.playlist.trackNo" `

              Danke mikiline, da habe ich gestern den Wald vor lauter Bäumen nicht mehr gesehen.

              1 Reply Last reply Reply Quote 0
              • X
                Xyolyp last edited by

                @AxelF1977 stellst du deine View zur Verfügung wenn sie fertig ist? Sieht wirklich gut aus und sollte durch leichte Änderung der Widgetgrößen (oder hast du die schon prozentual?) ja auf nahezu jedem Tablet laufen können 😉

                1 Reply Last reply Reply Quote 0
                • AxelF1977
                  AxelF1977 last edited by

                  @Xyolyp:

                  @AxelF1977 stellst du deine View zur Verfügung wenn sie fertig ist? Sieht wirklich gut aus und sollte durch leichte Änderung der Widgetgrößen (oder hast du die schon prozentual?) ja auf nahezu jedem Tablet laufen können 😉 `

                  Hi,

                  ja, das kann ich gerne machen. Aktuell ist es noch im groben Entstehen, und nur auf mein Tablet angepasst. Sobald es funktioniert wie ich möchte, kann ich es so anpassen, das es universell nutzbar ist

                  1 Reply Last reply Reply Quote 0
                  • ?
                    A Former User last edited by

                    @ AxelF1977

                    Wie hast Du denn die Scrollbalken da rein bekommen?

                    1 Reply Last reply Reply Quote 0
                    • AxelF1977
                      AxelF1977 last edited by

                      @Pocky:

                      @ AxelF1977

                      Wie hast Du denn die Scrollbalken da rein bekommen? `

                      Hi Pocky,

                      das sind jeweils basic string (unescaped) widgeds. Diesen habe ich bei overflow-y: den Wert "scroll" zugeordnet. Damit werden die Widgets dann mit Scrollbalken versehen, falls der Inhalt länger ist, als die Widgethöhe.

                      Zum Schluss noch mit CSS an mein Layout angepasst.

                      /* width */
                      ::-webkit-scrollbar {
                          width: 15px;
                      }
                      
                      /* Track */
                      ::-webkit-scrollbar-track {
                          background: #424242; 
                      }
                      
                      /* Handle */
                      ::-webkit-scrollbar-thumb {
                          background: #888; 
                      }
                      
                      /* Handle on hover */
                      ::-webkit-scrollbar-thumb:hover {
                          background: #a7a6a6; 
                      }
                      

                      4249_scrollbars01.jpg

                      1 Reply Last reply Reply Quote 0
                      • ?
                        A Former User last edited by

                        @ AxelF1977

                        Danke Dir

                        1 Reply Last reply Reply Quote 0
                        • AxelF1977
                          AxelF1977 last edited by

                          @Pocky:

                          @ AxelF1977

                          Danke Dir `

                          Gerne, ein Forum ist zum Austauschen und Helfen da. Ich habe hier viel Hilfe erfahren, freue mich wenn ich was zurück geben kann.

                          1 Reply Last reply Reply Quote 0
                          • AxelF1977
                            AxelF1977 last edited by

                            Bei dem View geht es auch weiter, Screenshot 1 . Einige Baustellen habe ich aber, hier müsste twonkey bitte helfe.

                            Gelöst:

                            Volume über ein Widget, läuft gut

                            Statusbar der Wiedergabe, funktioniert (leicht zeitverzögert und stockend, wie die Anzeige der Spielzeit auch)

                            Länge der Texte der Playliste über CSS kürzen

                            Ansonsten habe ich die Tabelle der Tracks optisch in Richtung Spotify gebracht.

                            To do:

                            Hier würde ich aber gerne noch die Laufzeit jedes Tracks gerne rechts neben dem Titel haben (wie bei Spotify) siehe Screenshot 2

                            Auswahl der Quelle auf der gehört wird, wie bei Spotify, Screenshot 3

                            View universell einsetzbar auf Tablets

                            Klar wäre es super wenn wir zusätzlich Sachen hätten wir: Zur Playliste hinzufügen, suchen etc. Aber ich glaube das ein bisschen hoch gegriffen
                            4249_spotify_playlist_012.png
                            4249_spotify_playlist_010.png
                            4249_spotify_playlist_009.png

                            1 Reply Last reply Reply Quote 0
                            • M
                              mikiline last edited by

                              Geräteauswahl habe ich bisher so gelöst

                              ! ````
                              [{"tpl":"tplJquiSelectList","data":{"oid":"spotify-premium.0.devices.deviceList","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","values":"{spotify-premium.0.devices.availableDeviceListIds}","texts":"{spotify-premium.0.devices.availableDeviceListString}","height":"250","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"no_style":false,"open":false},"style":{"left":"5px","top":"405px","width":"260px","height":"300px","z-index":"2","overflow-y":""},"widgetSet":"jqui"}]

                              
                              Vielleicht kannst Du das in dein View integrieren und per CSS noch verbessern, so das es in Deine Leiste unten passt und nach oben auf geht ;)
                              1 Reply Last reply Reply Quote 0
                              • AxelF1977
                                AxelF1977 last edited by

                                @mikiline:

                                Geräteauswahl habe ich bisher so gelöst

                                Vielleicht kannst Du das in dein View integrieren und per CSS noch verbessern, so das es in Deine Leiste unten passt und nach oben auf geht 😉 `

                                Das Drop Down habe ich eingebunden, nur aktuell ausgeblendet, weil es optisch nicht mehr passt. Ich muss mal gucken ob das so einfach zu ändern ist. Ich schau mir das heute Abend nach der Arbeit an.

                                Es wird sich aber eine Lösung finden.

                                Danke Dir

                                1 Reply Last reply Reply Quote 0
                                • twonky
                                  twonky last edited by

                                  @AxelF1977: Aktuell wird die Dauer eines Track beim laden der Playlisten noch nicht abgefragt, wäre aber möglich. Welche Track Infos werden denn noch benötigt? Es gibt noch: HinzugefügtAm, HinzugefügtVon, Album, CD-Nr, Episode (Ich denke mal bei podcasts relevant), Explicit (ich denke mal nicht jugendfreundliche Texte), Popularität

                                  Ich habe mir auch nochmal näher das Problem mit "restricted" Geräten angeguckt, wie z.b. Sonos. Ich glaube eine alternative wäre es für solche Geräte die Anbindung über den jeweiligen Adapter zu realisieren. Das heißt der Spotify Adapter würde dann mit dem Sonos Adapter reden.

                                  1 Reply Last reply Reply Quote 0
                                  • AxelF1977
                                    AxelF1977 last edited by

                                    @twonky:

                                    @AxelF1977: Aktuell wird die Dauer eines Track beim laden der Playlisten noch nicht abgefragt, wäre aber möglich. Welche Track Infos werden denn noch benötigt? Es gibt noch: HinzugefügtAm, HinzugefügtVon, Album, CD-Nr, Episode (Ich denke mal bei podcasts relevant), Explicit (ich denke mal nicht jugendfreundliche Texte), Popularität

                                    Ich habe mir auch nochmal näher das Problem mit "restricted" Geräten angeguckt, wie z.b. Sonos. Ich glaube eine alternative wäre es für solche Geräte die Anbindung über den jeweiligen Adapter zu realisieren. Das heißt der Spotify Adapter würde dann mit dem Sonos Adapter reden. `

                                    Ich sag es mal so, wenn diese Trackinfos alle genutzt werden können, warum nicht? Ich würde alle nehmen. Ob und wie diese dann genutzt werden, kann ja dann über das Javascript genutzt werden, oder es wird gleich in dem Adapter verankert, das die Nutzer es auswählen können, was angezeigt wir (nur ein Gedankenspiel)

                                    1 Reply Last reply Reply Quote 0
                                    • X
                                      Xyolyp last edited by

                                      @AxelF1977:

                                      View universell einsetzbar auf Tablets `
                                      Wenn ich mir noch was wünschen darf, dann wäre es, dass du die einzelnen Widgetgruppen (Playlistliste, Fußzeile, Aktuelle Playlist, …) nicht nur gemeinsam in der View hast, sondern auch die einzelnen Gruppen einzeln zur Verfügung stellst. Ich finde es nämlich sehr angenehm, wenn ich zum weiter klicken nicht ewig in den Views hin und her wechseln muss, sondern bei laufender Wiedergabe auf allen Views unten die Fußzeile zu sehen ist.

                                      Vielleicht magst du dich ja sogar etwas in die Adapterentwicklung reinfuchsen und die Widgetgruppen als Widgets im Spotify-Adapter hinzufügen (oder wenn vom Entwickler nicht gewünscht einen eigenen Adapter drauß machen)

                                      1 Reply Last reply Reply Quote 0
                                      • AxelF1977
                                        AxelF1977 last edited by

                                        @Xyolyp:

                                        @AxelF1977:

                                        View universell einsetzbar auf Tablets `
                                        Wenn ich mir noch was wünschen darf, dann wäre es, dass du die einzelnen Widgetgruppen (Playlistliste, Fußzeile, Aktuelle Playlist, …) nicht nur gemeinsam in der View hast, sondern auch die einzelnen Gruppen einzeln zur Verfügung stellst. Ich finde es nämlich sehr angenehm, wenn ich zum weiter klicken nicht ewig in den Views hin und her wechseln muss, sondern bei laufender Wiedergabe auf allen Views unten die Fußzeile zu sehen ist.

                                        Vielleicht magst du dich ja sogar etwas in die Adapterentwicklung reinfuchsen und die Widgetgruppen als Widgets im Spotify-Adapter hinzufügen (oder wenn vom Entwickler nicht gewünscht einen eigenen Adapter drauß machen) `

                                        Die Idee ist gut. Ich würde es an eine Abfrage koppeln, ob Spotify läuft, wenn ja, dann blende die Fußzeile von Spotify ein, wenn aus, dann nicht. Mal gucken wie das gehen könnte. Gerade brauche ich aber Hilfe die Auswahl der Geräte wie in Spotify. Habe twonky schon angeschrieben. Falls er keine Zeit hat, wer kennt sich noch gut mit Javescript bei IoBroker aus?

                                        1 Reply Last reply Reply Quote 0
                                        • AxelF1977
                                          AxelF1977 last edited by

                                          Nachdem ich mir endlos den Kopf zerbrochen habe, wie es denn nun mit der Liste der Geräte funktionieren könnte, bin ich heute morgen über die Lösung gestolpert. Ich nutze für die Visualisierung in vis den großartigen https://forum.iobroker.net/viewtopic.php?f=30&t=7739&hilit=Material+Design+Style. Und genau hier gab es dann schon die fertige Lösung.

                                          Es gibt ein Beispiel wie Bilder in einem View skaliert werden können, und die Navigation war es dann.

                                          Ich habe noch eines der Javascripte von twonky angepasst, damit die Liste der Geräte richtig angezeigt wird, und es funktioniert. Also weiter zu anderen Baustellen.
                                          4249_spotify_playlist_014.png
                                          4249_spotify_playlist_015.png

                                          1 Reply Last reply Reply Quote 0
                                          • AxelF1977
                                            AxelF1977 last edited by

                                            Eines der letzten Dinge, die ich selber noch erledigen konnte, ist ein toogle Button für Play und Pause. Dieser geht sowohl als Button mit Text, als auch mit Icons. Ansonsten brauche ich ab jetzt wieder die Unterstützung von tonky, für die Änderungen der Javascripte, bzw. neue Scripte.

                                            Der Toogle Button wurde mit Blockly und 2 Datenpunkten realisiert. Für den Import später für jedermann, wäre aber ein Javascript bestimmt einfacher, das auch die Datenpunkte anlegt. Gerne stelle ich das Blockly zur Verfügung, falls dies einer ändern möchte.
                                            4249_spotify_playlist_017.png
                                            4249_spotify_playlist_016.png

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            1.0k
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            javascript
                                            95
                                            745
                                            190592
                                            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