iobroker.squeezeboxrpc 1.5.0 → 1.5.1

package/README.md

@@ -452,16 +452,75 @@ The widged dosent refresh automaticly, you have to press the refreshh button.
 | --------------------- | ----------------- | ----------------------------------------------------------------- |
 | Player widget         | General group     | Selection of the player widget.                                   |
 
+The widget itself has very little formatting.
+For self formating there are some predefined css-classes:
+
+| CSS-class  | description                               |
+| ---------- | ----------------------------------------- |
+| plcontainer| Class name assigned to the ul-tag         |
+| plentry    | Class name assigned to the li-tag         |
+| plrefresh  | Class name assigned to the refresh-li tag |
+| pltext     | Class name assigned to the playlist name  |
+
+The following CSS for the vis-css tab can serve as an example:
+
+Dark-mode
+
+```css
+.plentry {
+    border: 1px #505050 groove;
+    margin:1px 0px;
+    padding:5px;
+    background-color:#202020;
+}
+.plrefresh {
+    padding:5px;
+}
+.plentry:hover {
+    background-color:#404040;
+}
+.plrefresh svg {
+    color:#cccccc;
+}
+.plrefresh svg:hover {
+    color:#ffffff;
+    filter: drop-shadow(0px 0px 1px #87ceeb);
+}
+```
+
+Light-mode
+
+```css
+.plentry {
+    border: 1px #b0b0b0 groove;
+    margin:1px 0px;
+    padding:5px;
+    background-color:#c0c0c0;
+}
+.plrefresh {
+    padding:5px;
+}
+.plentry:hover {
+    background-color:#e0e0e0;
+}
+.plrefresh svg {
+    color:#444444;
+}
+.plrefresh svg:hover {
+    color:#000000;
+    filter: drop-shadow(0px 0px 1px #87ceeb);
+}
+```
+
 ## SendTo-Befehle
 
 ### cmdGeneral
 
-Mit diesem Befehl können beliebige Befehle an den LMS-Server gesendet werden,
-um eine Rückmeldung zu erhalten.
+This command can be used to send any command to the LMS server to receive a response.
 
-Beispiel:
+Example:
 
-_Alle Playlists:_
+**All Playlists:**
 
 ```js
 async function main() {
@@ -474,9 +533,9 @@ async function main() {
 main();
 ```
 
-_Alle Favoriten:_
+**All Favorites:**
 
-Dieser Befehl wird vom Adapter intern verwendet, um die Favoriten zu laden.
+This command is used internally by the adapter to load the favorites.
 
 ```js
 async function main() {
@@ -489,8 +548,8 @@ async function main() {
 main();
 ```
 
-Weitere Möglichkeiten und Detailbeschreibung über die Parameter sind in
-der folgenden CLI-Dokumentation enthalten:
+Further options and detailed descriptions of the parameters
+are contained in the following CLI documentation:
 
 [CLI-Documentation](#further-api-documentation)
 
@@ -522,10 +581,19 @@ der folgenden CLI-Dokumentation enthalten:
    ### **WORK IN PROGRESS**
 
 -->
+### 1.5.1 (2024-11-29)
+
+- improve documentation
+- remove margin from plcontainer
+- improve textoverflow with ellipsis
+- adjust initial widgetsize of playlist widget
+- repair attributes for playlist widget
+- add light mode css for playlist widget
+
 ### 1.5.0 (2024-11-28)
 
-- Umstellung auf iobroker/eslint
-- Neues Widget playlist
+- Switch to iobroker/eslint
+- New widget playlist
 
 ### 1.4.0 (2024-11-27)
 

package/io-package.json

@@ -1,8 +1,21 @@
 {
   "common": {
     "name": "squeezeboxrpc",
-    "version": "1.5.0",
+    "version": "1.5.1",
     "news": {
+      "1.5.1": {
+        "en": "improve documentation\nremove margin from plcontainer\nimprove textoverflow with ellipsis\nadjust initial widgetsize of playlist widget\nrepair attributes for playlist widget\nadd light mode css for playlist widget",
+        "de": "verbesserung der dokumentation\nentfernen sie den rand von plcontainer\ntextoverflow mit ellipsis verbessern\neinstellen der ersten widgetsize der wiedergabeliste widget\nreparatur-attribute für playlist widget\nlichtmodus css für playlist widget hinzufügen",
+        "ru": "улучшение документации\nудалить маржу от plcontainer\nулучшить текстовый поток с эллипсисом\nнастроить первоначальный виджет\nатрибуты для воспроизведения виджета\nдобавить режим cs для виджета списка воспроизведения",
+        "pt": "melhorar a documentação\nremover a margem do plcontainer\nmelhorar o fluxo de texto com ellipsis\najustar o widget inicial do widget da lista de reprodução\natributos de reparo para widget de lista de reprodução\nadd light mode css para widget da lista de reprodução",
+        "nl": "de documentatie verbeteren\nde marge uit plcontainer verwijderen\nverbeteren textoverflow met ellipsis\nde initiële widgetgrootte van afspeellijstwidget aanpassen\nreparatie attributen voor afspeellijst widget\nlichtmodus css toevoegen voor afspeellijstwidget",
+        "fr": "améliorer la documentation\nenlever la marge du plcontainer\naméliorer le textoverflow avec ellipse\najustez le widget initial du widget playlist\nattributs de réparation pour widget playlist\najouter le mode lumière css pour le widget playlist",
+        "it": "migliorare la documentazione\nrimuovere il margine da plcontainer\nmigliorare il flusso di testo con ellipsis\nregolare la dimensione iniziale del widget di playlist\nattributi di riparazione per widget di playlist\naggiungere css modalità di luce per widget di playlist",
+        "es": "mejorar la documentación\neliminar el margen de plcontainer\nmejorar el flujo de textover con elipsis\najustar el widgetsize inicial del widget de lista de reproducción\natributos de reparación para el widget de lista\nañadir light mode css para el widget de lista de reproducción",
+        "pl": "poprawić dokumentację\nusunąć margines z plakietki\npoprawić przepływ tekstuwerwiru za pomocą elipsy\ndostosować początkowy rozmiar widgetsize widget listy odtwarzania\nnaprawa atrybutów widgetu listy odtwarzania\ndodaj tryb światła css dla widżetu listy odtwarzania",
+        "uk": "вдосконалення документації\nприбрати запас від plcontainer\nполіпшення текстового потоку з еліпсом\nналаштування початкового віджетурозміри віджету\nвідремонтувати атрибути для відтворення віджету\nadd light режим css для playlist віджет",
+        "zh-cn": "改进文件编制\n从容器中删除边距\n改进带有椭圆的文本流\n调整播放列表部件的初始部件大小\n播放列表部件的修复属性\n为播放列表部件添加轻模式 ccs"
+      },
       "1.5.0": {
         "en": "Umstellung auf iobroker/eslint\nNeues Widget playlist",
         "de": "Anpassung an iobroker/eslint\nNeues Widget Playlist",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.squeezeboxrpc",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "ioBroker Logitech Squeezebox Adapter over JSON/RPC-Protocol",
   "author": {
     "name": "oweitman",

package/widgets/squeezeboxrpc/js/squeezeboxrpc-dist.js

@@ -2000,23 +2000,32 @@
               let result = yield vis.binds["squeezeboxrpc"].getPlaylistData(ainstance.join("."));
               let playlist = result.result.playlists_loop;
               let text = "";
-              text += "<style>";
-              text += `#${widgetID} ul.plcontainer { `;
-              text += "   list-style-type: none;";
-              text += "   padding-left: 0px;";
-              text += "   color:white;";
-              text += "}";
-              text += `#${widgetID} li.plentry { `;
-              text += "   cursor: pointer;";
-              text += "}";
-              text += `#${widgetID} li.plrefresh { `;
-              text += "   width: 1em;";
-              text += "   height: 1em;";
-              text += "   margin: 5px 0px;";
-              text += "}";
-              text += "</style>";
+              text += `
+            <style>
+            #${widgetID} ul.plcontainer {
+                list-style-type: none;
+                padding-left: 0px;
+                margin: 0px;
+            }
+            #${widgetID} li.plentry {
+                cursor: pointer;
+                height: 1em;
+                margin: 5px 0px;
+            }
+            #${widgetID} li.plentry div {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+            #${widgetID} li.plrefresh {
+                width: 1em;
+                height: 1em;
+                margin: 5px 0px;
+            }
+            </style>
+            `;
               text += '<ul class="plcontainer">';
-              text += '<li class="plrefresh"><svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="RefreshIcon"><path fill="currentColor" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z"></path></svg></li>';
+              text += '<li class="plrefresh"><div><svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="RefreshIcon"><path fill="currentColor" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z"></path></svg></div></li>';
               for (let i = 0; i < playlist.length; i++) {
                 let pl = playlist[i];
                 text += `<li class="plentry"><div class="pltext" data-plid="${pl.id}" data-pln="${playername}" data-ins="${ainstance.join(".")}" onclick="vis.binds.squeezeboxrpc.playlist.onclickplaylist(this,event)">${pl.playlist}</div></li>`;

package/widgets/squeezeboxrpc/js/squeezeboxrpc.js

@@ -1781,26 +1781,33 @@ vis.binds['squeezeboxrpc'] = {
             let result = await vis.binds['squeezeboxrpc'].getPlaylistData(ainstance.join('.'));
             let playlist = result.result.playlists_loop;
             let text = '';
-            text += '<style>';
-            text += `#${widgetID} ul.plcontainer { `;
-            text += '   list-style-type: none;';
-            text += '   padding-left: 0px;';
-            text += '   color:white;';
-            text += '}';
-            text += `#${widgetID} li.plentry { `;
-            text += '   cursor: pointer;';
-            text += '}';
-
-            text += `#${widgetID} li.plrefresh { `;
-            text += '   width: 1em;';
-            text += '   height: 1em;';
-            text += '   margin: 5px 0px;';
-            text += '}';
-
-            text += '</style>';
+            text += `
+            <style>
+            #${widgetID} ul.plcontainer {
+                list-style-type: none;
+                padding-left: 0px;
+                margin: 0px;
+            }
+            #${widgetID} li.plentry {
+                cursor: pointer;
+                height: 1em;
+                margin: 5px 0px;
+            }
+            #${widgetID} li.plentry div {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+            #${widgetID} li.plrefresh {
+                width: 1em;
+                height: 1em;
+                margin: 5px 0px;
+            }
+            </style>
+            `;
             text += '<ul class="plcontainer">';
             text +=
-                '<li class="plrefresh"><svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="RefreshIcon"><path fill="currentColor" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z"></path></svg></li>';
+                '<li class="plrefresh"><div><svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="RefreshIcon"><path fill="currentColor" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z"></path></svg></div></li>';
             for (let i = 0; i < playlist.length; i++) {
                 let pl = playlist[i];
                 text += `<li class="plentry"><div class="pltext" data-plid="${pl.id}" data-pln="${playername}" data-ins="${ainstance.join('.')}" onclick="vis.binds.squeezeboxrpc.playlist.onclickplaylist(this,event)">${pl.playlist}</div></li>`;

package/widgets/squeezeboxrpc.html

@@ -225,13 +225,13 @@
         type="text/ejs"
         class="vis-tpl"
 		data-vis-prev='<img src="widgets/squeezeboxrpc/img/playlist.png"></img>'
-        data-vis-attrs="widgetPlayer/custom;"
+        data-vis-attrs="widgetPlayer/custom,squeezeboxrpc.attrSelect;"
         data-vis-set="squeezeboxrpc"
         data-vis-type="static"
         data-vis-beta="false"
         data-vis-update-style="true"
         data-vis-name="Playlist">        
-    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 50px; height: 20px;overflow:auto;scrollbar-width: none" id="<%= this.data.attr('wid') %>"><%
+    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 200px; height: 200px;overflow:auto;scrollbar-width: none" id="<%= this.data.attr('wid') %>"><%
         vis.binds.squeezeboxrpc.playlist.createWidget(this.data.wid, this.view, this.data, this.style);
     %></div>
 </script>