[Vorlage] Spotify Skript

AxelF1977

~~@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?

AxelF1977

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

AxelF1977

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

Pascal09

sieht schon richtig cool aus. :geek:

AxelF1977

Nachdem mich mehrere Anfragen erreicht haben, ob das View auch auf 7 Zoll oder 8 Zoll Tables läuft, hier nun endlich die Antwort. JA, jetzt schon. Ein komplett floatendes Design. Auf Smartphones funktioniert es nicht. Auch 7 Zoll oder 8 Zoll Tables wird es nur quer funktionieren.

Die Screenshots sind von meinem 10,1 Zoll Tablet, quer und hoch, sowie von meinem PC Bildschirm (1920px x 1024px)

Ich sehe gerade das es in der Ansicht Tablet hoch noch einen kleinen Fehler gibt, den beseitige ich morgen. Ferner weiß ich nicht, wieso Scrollbalken da sind, wo sie nicht sein sollten (rechts und unten). Bis auf die Widgets die Scrollen sollen bei einem overflow, ist der overflow überall auf hide.

Einer eine Idee warum?

Aktuell ist die Statusleiste (Footer) noch nicht soweit das sie überall in allen Views einsetzbar ist (das Dropup der Geräte will noch nicht wie ich), aber das werde ich auch noch beheben.

@twonky, fehlen tun jetzt noch die restlichen Werte, diese wollte ich noch einbinden. Dann stelle ich das View gerne allen zur Verfügung.

Scrennshots

1:PC HD Auflösung

2: Tablet quer

3: Tablet hoch
4249_spotify_playlist_021.png
4249_spotify_playlist_020.png
4249_spotify_playlist_019.png
4249_spotify_playlist_018.png
4249_spotify_playlist_023.png
4249_spotify_playlist_022.png

twonky

Was die zusätzlichen Werte an geht habe ich schon was gemacht. Wenn du die https://github.com/twonky4/ioBroker.spotify-premium Version benutzt bekommst du sie schon. Eine neue Version veröffentlichen werden ich sobald ich mehr Zeit habe.

el-lutschi

~~@el-lutschi:~~

Hallo zusammen,

bei mir in der Log läuft auch dauernd der "Fehler", wenn keine Musik läuft:
spotify-premium.0	2018-09-20 08:38:01.724	warn	no playback content
spotify-premium.0	2018-09-20 08:37:56.543	warn	no playback content
spotify-premium.0	2018-09-20 08:37:51.431	warn	no playback content
spotify-premium.0	2018-09-20 08:37:46.310	warn	no playback content
Außerdem habe ich das Problem, dass sich meine Connect Geräte dauernd mehrfach im Adapter anlegen und dann nicht mehr über Skripte steuerbar sind.

(Siehe Screenshot).

Vll kann man dagegen auch was tun?

Danke und Gruß

Chris `

Niemand ne Idee?

pockeras

Hallo Jungs…...............

Erstmal danke für denn adapter das funktioniert alles bis jetzt ! mein Problem ist wie bekommt mann das alles in VIS rein sorry bin ganz neu in der sache........ Würde mich sehr freuen wenn ich hilfe bekommen könnte dankeeeeeeeee

Edit: Habe jetzt die widgets von Spotify adapter von github eingefügt nur bekomme ich immer UNDEFINED agezeigt kann nix auswählen!

Egal ob playlist oder device list immer der gleiche fehler

AxelF1977

~~@el-lutschi:~~

~~@el-lutschi:~~
Hallo zusammen,

bei mir in der Log läuft auch dauernd der "Fehler", wenn keine Musik läuft:
spotify-premium.0	2018-09-20 08:38:01.724	warn	no playback content
spotify-premium.0	2018-09-20 08:37:56.543	warn	no playback content
spotify-premium.0	2018-09-20 08:37:51.431	warn	no playback content
spotify-premium.0	2018-09-20 08:37:46.310	warn	no playback content
Außerdem habe ich das Problem, dass sich meine Connect Geräte dauernd mehrfach im Adapter anlegen und dann nicht mehr über Skripte steuerbar sind.

(Siehe Screenshot).

Vll kann man dagegen auch was tun?

Danke und Gruß

Chris `
Niemand ne Idee? `

Hast Du den Hacken im Adapter bei "Nicht mehr vorhandene Geräte" gesetzt?

~~@pockeras:~~

Hallo Jungs…...............

Erstmal danke für denn adapter das funktioniert alles bis jetzt ! mein Problem ist wie bekommt mann das alles in VIS rein sorry bin ganz neu in der sache........ Würde mich sehr freuen wenn ich hilfe bekommen könnte dankeeeeeeeee

Edit: Habe jetzt die widgets von Spotify adapter von github eingefügt nur bekomme ich immer UNDEFINED agezeigt kann nix auswählen!

Egal ob playlist oder device list immer der gleiche fehler filename="Screenshot (5).png" index="0">~~ `

Hast Du denn die Datenpunkte bei Objekt-ID in VIS angepasst?

pockeras

Hallo AxelF1977…...

danke erstmal für deine Antwort...... was bei mir der Fehler war ist das bei mir nicht spotify-premium.0 sondern spotify-premium.1 bei instances steht

und ich es niergend wo angepasst habe :lol: :x deswegen kann es ja auch nicht funktionieren ! jetzt geht es nach der änderung natürlich

Das was mir jetzt noch fehlt ist das es so GEILLLLOOOO aussieht wie bei dir Top sag ich nur

AxelF1977

~~@pockeras:~~

Hallo AxelF1977…...

danke erstmal für deine Antwort...... was bei mir der Fehler war ist das bei mir nicht spotify-premium.0 sondern spotify-premium.1 bei instances steht

und ich es niergend wo angepasst habe :lol: :x deswegen kann es ja auch nicht funktionieren ! jetzt geht es nach der änderung natürlich

Das was mir jetzt noch fehlt ist das es so GEILLLLOOOO aussieht wie bei dir Top sag ich nur `

Super dass Du raus gefunden hast woran es lag. Ich werde mein VIEW hier noch zur Verfügung stellen. Dann können es alle nutzen. Ich muss aber den Import und die Nutzung noch besser dokumentieren. Es sind mehrere Dateien die sowohl in ioBroker als auch in VIS importiert werden müssen. Das ist etwas kniffliger, soll aber bei allen klappen.

Daher habe ich es noch nicht zur Verfügung gestellt.

pockeras

Alles klar kein Problem Danke schon mal für die tolle arbeit hier von euch genial sag ich nur !

c7h12

Hallo und vielen Dank für deine Arbeit!!!

Das ist der perfekte Problemlöser für den Wunsch meiner Frau

Aber beim einrichten bekomme ich folgendes Problem: Wenn ich bei Spotify bei der Redirect URIs: "http://localhost" eingebe bekomme ich diese
Und das authorized Value wechselt nicht auf true…

Die ReturnURI sieht so aus: "http://localhost/?code=xyxyxyx usw"

Habe ich was vergessen?

Mic

Nochmals vielen Dank für den Adapter. Ich habe diesen nach Problemen mit Spotify (vor ein paar Monaten, Multiroom-Probleme, und fälschlicherweise den Spotify-Adapter in Verdacht, daher Zwischenlösung mit Alexa 2 Adapter) wieder re-aktiviert, und läuft soweit prima. Dank neuem Wand-Tablet ist der Adapter wieder erfolgreich am laufen

Problematik, dass Shuffle immer wieder aus geht:

Ich hab da Spotify in Verdacht, und keinesfalls den Adapter. Die entsprechende Adapter-Option half auch nicht, und ich hab sie wieder deaktiviert.

Habe da jetzt auch viel getestet, mit Debug-Log etc., aber das brachte es nicht wirklich.

Meine Lösung zu Shuffle:

Ich schalte Shuffle wie folgt im Vis an/aus, Datenpunkt 'javascript.0.mic.spotify-support.shuffle-force'.

Das heißt Shuffle wird per Schedule erzwungen und immer angeschaltet, falls der Knopf "Shuffle" im Vis gedrückt.

/*******************************************************
 * Erzwinge Shuffle:
 * Wir überwachen den Shuffle-Datenpunkt, und falls nicht gesetzt, so setzen wir diesen.
 ******************************************************/
const STATE_PATH = 'javascript.'+ instance + '.' + 'mic.spotify-support.';
const STATE_SHUFFLE_FORCE = STATE_PATH + 'shuffle-force';
MG_createState(STATE_SHUFFLE_FORCE, 'Spotify: Erzwinge Shuffle', 'boolean', 'state', false);

//Bei Script-Start setzen wir Shuffle auf an
setStateDelayed(STATE_SHUFFLE_FORCE, true, 1000);
setStateDelayed('spotify-premium.0.player.shuffleOn', true, 2000);

var subscribeShuffleForce;
on({id: STATE_SHUFFLE_FORCE, change: "any"}, function (obj) {
    if (obj.state.val === true) {
        subscribeShuffleForce = on({id: 'spotify-premium.0.player.shuffle', change: "any"}, function (obj2) {
            strShuffleState = obj2.state.val;
            if (strShuffleState.toLowerCase() === 'off') {
                // Shuffle einschalten!
                setState('spotify-premium.0.player.shuffleOn', true);
                log('Shuffle wird erzwungen!');
            }
        });
    } else {
        // 1\. Schedule deaktivieren
        unsubscribe(subscribeShuffleForce);
        log('Unsubscribe: Shuffle');
        // 2\. Shuffle ausschalten
        setStateDelayed('spotify-premium.0.player.shuffleOff', true, 500);
        log('Shuffle ausschalten');
    }

});

/**
 * Create States - General
 * @param {string} stId      ID
 * @param {string} stName    Name, Description
 * @param {mixed}  stType     Datatype: string, boolean, etc.
 * @param {string} stRole    Role: button, etc.
 * @param {mixed}  stDef      Default value
 */
function MG_createState(stId, stName, stType, stRole, stDef) {
    createState(stId, {
        'name': stName,
        'desc': stName,
        'type': stType,
        'read': true,
        'write': true,
        'role': stRole,
        'def': stDef,
    });
}

AxelF1977

~~@Mic:~~

Nochmals vielen Dank für den Adapter. Ich habe diesen nach Problemen mit Spotify (vor ein paar Monaten, Multiroom-Probleme, und fälschlicherweise den Spotify-Adapter in Verdacht, daher Zwischenlösung mit Alexa 2 Adapter) wieder re-aktiviert, und läuft soweit prima. Dank neuem Wand-Tablet ist der Adapter wieder erfolgreich am laufen

Problematik, dass Shuffle immer wieder aus geht: `

Hi, mit der letzten Version des Adapters läuft bei mir Shuffle ohne Probleme, ohne das ich was ändern musste. Hast Du die letzte Version installiert?

Mic

Hi Axel,

ja, also 0.3.1. Interessant, dass es bei Dir funktioniert….

Übrigens vielen Dank für Deine VIS-Beispiele, ich habe das zur Inspiration genommen (bzw. schamlos übernommen ) und bei mir so ähnlich visualisiert. Tolle, cleane und saubere Darstellung, klasse!

Foto stelle ich noch ein, werde noch einiges optimieren...

Mic

Nochmals vielen Dank Axel. Habe Deine Visualisierung als Basis genommen, und werde nach und nach noch einiges verbessern. Dann gerne auch veröffentlichen. Hier meine aktuelle "Baustelle", aber sieht schon mal gut aus, und auch eben nahe an Deinem / Spotify - Layout…

Mic

~~@twonky:~~

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

Vielen Dank für das HTML-Playlist-Script, klasse!

Ich habe noch ein Problem beim Vergleich hinsichtlich Minuszeichen gefixt, also Variable 'current' versus der aktuell selektierten Playlist, da hier bei einem Wert das Sonderzeichen fehlte; daher habe ich eine Bereinigung eingebaut, welche die Sonderzeichen rauswirft beim Vergleich.

Außerdem sortiert das folgende Script die Playliste alphabetisch.

Zudem wird ein id="current-playlist" für die aktuell markierte Playliste gesetzt, das macht es einfacher, um diese per CSS zu formatieren.

Here we go:

`/*******************************************************
 * HTML-Playlist:
 * Quelle: https://github.com/twonky4/ioBroker.spotify-premium/wiki/Html-Playlist
 * https://forum.iobroker.net/viewtopic.php?f=21&t=8173&hilit=spotify&start=440#p183687
 ******************************************************/
/*******************************************************************************
 * Setup
 ******************************************************************************/
const STATE_PATH = 'javascript.'+ instance + '.' + 'mic.spotify-support.';

createState(STATE_PATH + 'playListHtml', '', false);

on('spotify-premium.0.playlists.playlistList', refreshPlayList);
on('spotify-premium.0.playlists.playlistListIds', refreshPlayList);
on('spotify-premium.0.playlists.playlistListString', refreshPlayList);

refreshPlayList();
function refreshPlayList() {
	var current = getState('spotify-premium.0.playlists.playlistList').val;
	var idArray = getState('spotify-premium.0.playlists.playlistListIds').val.split(';');
	var titleArray = getState('spotify-premium.0.playlists.playlistListString').val.split(';');
	var htmlResult = '';

    /*****
     * Sort Arrays
     ****/
    var arrTemp = [];
    for (let j = 0; j < titleArray.length; j++) {
        arrTemp.push(titleArray[j] + ";" + idArray[j]);
    }
    arrTemp.sort();

    idArrayFinal = [];
    titleArrayFinal = [];
    for (let k = 0; k < arrTemp.length; k++) {
        let arrLine = arrTemp[k].split(';');
        titleArrayFinal.push(arrLine[0]);
        idArrayFinal.push(arrLine[1]);
    }

    /*****
     * Build Playlist
     ****/
	for (var i = 0; i < idArrayFinal.length; i++) {
		htmlResult += '';
		htmlResult += '';
		htmlResult += '';
	}

	htmlResult += '

| ';
		var strCSSCurrPlaylist = '';
		if( g_myStringSanitize(current) ==  g_myStringSanitize(idArrayFinal[i]) ) strCSSCurrPlaylist = '" id="current-playlist"';
		htmlResult += '<div' +/strcsscurrplaylist/'="">';
		htmlResult += titleArrayFinal[i];
		htmlResult += '';
		htmlResult += '</div'> |

';

	setState(STATE_PATH + 'playListHtml', htmlResult, true);
}

/**
 * Will just keep lower case letters, numbers, and removes the rest
 * @strInput The String
 */
function g_myStringSanitize(strInput) {

    var strT = strInput.toLowerCase();
    var strResult = strT.replace(/([^a-z0-9]+)/gi, '');

    return strResult;

}`[/i][/i][/i]

Mic

~~@twonky:~~

@schubi82: Hier habe ich dir ein Skript zusammen gebastelt womit du das lösen kannst. Das Design musst du natürlich an deine Bedürfnisse anpassen.
createState('javascript.0.spotify-premium.trackListHtml', '', false);
(...)

```` `  

Vielen dank auch dafür. Ich habe die HTML Trackliste ebenso etwas angepasst:

Aktuell ausgewählter Titel bekommt die id="current-song"', der Interpret id="current-artist". Damit leichtere CSS-Formatierung möglich, etc.
Die Tracks werden durchnummieriert (siehe https://forum.iobroker.net/viewtopic.php?f=21&t=8173&start=460#p190392)

`/*******************************************************
 * HTML-Tracklist:
 * Quelle: https://github.com/twonky4/ioBroker.spotify-premium/wiki/Html-Tracklist
 * https://forum.iobroker.net/viewtopic.php?p=151165#p151165
 ******************************************************/
const STATE_PATH = 'javascript.'+ instance + '.' + 'mic.spotify-support.';

createState(STATE_PATH + 'trackListHtml', '', false);

on('spotify-premium.0.playbackInfo.playlist.trackList', refreshTrackList);
on('spotify-premium.0.playbackInfo.playlist.trackListArray', refreshTrackList);

refreshTrackList();
function refreshTrackList() {
	var current = getState('spotify-premium.0.playbackInfo.playlist.trackList').val;
	var source = getState('spotify-premium.0.playbackInfo.playlist.trackListArray').val;
	var html = '';

	for (var i = 0; i < source.length; i++) {
		html += '';
		html += '';
		html += '';
	}

	html += '

| ';
		var strCSSCurrSong = '';
		var strCSSCurrArtist = '';
		if(current == i) strCSSCurrSong = ' id="current-song"';
		if(current == i) strCSSCurrArtist = ' id="current-artist"';
		html += '' + (i+1) + '. ' + source[i].title + '';
        html += '' + source[i].artist + '';
		html += ' |

';

	setState(STATE_PATH + 'trackListHtml', html, true);
}` [/i][/i]

AxelF1977

~~@Mic:~~

Hi Axel,

ja, also 0.3.1. Interessant, dass es bei Dir funktioniert….

Übrigens vielen Dank für Deine VIS-Beispiele, ich habe das zur Inspiration genommen (bzw. schamlos übernommen ) und bei mir so ähnlich visualisiert. Tolle, cleane und saubere Darstellung, klasse!

Foto stelle ich noch ein, werde noch einiges optimieren... `

Moin,

wir können die Views ja mal austauschen, würde mich interessieren wie Du es gemacht hast. Und meins basiert ja auch nur auf der Weboberfläche von Spotify, habe also auch einfach schamlos übernommen.

~~@Mic:~~

~~@twonky:~~

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

Vielen Dank für das HTML-Playlist-Script, klasse!

Ich habe noch ein Problem beim Vergleich hinsichtlich Minuszeichen gefixt, also Variable 'current' versus der aktuell selektierten Playlist, da hier bei einem Wert das Sonderzeichen fehlte; daher habe ich eine Bereinigung eingebaut, welche die Sonderzeichen rauswirft beim Vergleich.

Außerdem sortiert das folgende Script die Playliste alphabetisch.

Zudem wird ein id="current-playlist" für die aktuell markierte Playliste gesetzt, das macht es einfacher, um diese per CSS zu formatieren. `

~~@Mic:~~

~~@twonky:~~

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

Vielen dank auch dafür. Ich habe die HTML Trackliste ebenso etwas angepasst:

Aktuell ausgewählter Titel bekommt die id="current-song"', der Interpret id="current-artist". Damit leichtere CSS-Formatierung möglich, etc.

Die Tracks werden durchnummieriert (siehe https://forum.iobroker.net/viewtopic.php?f=21&t=8173&start=460#p190392) `

Die Veränderungen schaue ich mir mal an. Je einfacher das ganze ist, desto mehr User können den genialen Adapter nutzen. Cool. Willkommen an Bord

NEWS

[Vorlage] Spotify Skript

Support us

812
Online

31.7k
Users

79.8k
Topics

1.3m
Posts

NEWS

[Vorlage] Spotify Skript

Support us

812Online

31.7kUsers

79.8kTopics

1.3mPosts

812
Online

31.7k
Users

79.8k
Topics

1.3m
Posts