iobroker.squeezeboxrpc 1.5.0 → 1.5.2

package/README.md

@@ -58,7 +58,7 @@ all needed informations or send commands to the server/players.
 - After installation or update, it may sometimes be necessary\
    to execute the following command if problems have arisen in vis-1
 
-`iobroker upload squeezeboxpc`
+`iobroker upload squeezeboxrpc`
 
 ## Provided states
 
@@ -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,24 @@ der folgenden CLI-Dokumentation enthalten:
    ### **WORK IN PROGRESS**
 
 -->
+### 1.5.2 (2024-12-16)
+
+- fix spelling of iobroker upload squeezeboxrpc in readme
+- fix playtime bar
+
+### 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,34 @@
 {
   "common": {
     "name": "squeezeboxrpc",
-    "version": "1.5.0",
+    "version": "1.5.2",
     "news": {
+      "1.5.2": {
+        "en": "fix spelling of iobroker upload squeezeboxrpc in readme\nfix playtime bar",
+        "de": "fix buchstabierung von iobroker laden pressboxrpc in readme\nspielzeitleiste",
+        "ru": "фиксация iobroker загрузки сжатиеboxrpc в считывании\nисправить плей-тайм",
+        "pt": "correção ortografia de iobroker upload espremedorpc em readme\ncorrigir a barra de playtime",
+        "nl": "fix spelling van iobroker upload cleaseboxrpc in readme\nspeelbalk herstellen",
+        "fr": "corriger l'orthographe du téléchargement d'iobroker streetboxrpc dans readme\nfixer la barre de temps de jeu",
+        "it": "correzione ortografia di iobroker upload spreboxrpc in readme\nfix playtime bar",
+        "es": "fijación de la ortografía de iobroker subido apretboxrpc en readme\nbarra de juego",
+        "pl": "naprawić pisownię iobroker wysyłania squeezeboxrpc w readme\nnaprawić pasek czasu odtwarzania",
+        "uk": "фіксувати заклинання iobroker upload squeezeboxrpc в читме\nфіксувати час гри",
+        "zh-cn": "在readme中固定 iobroster 上传压缩盒的拼写\n修复播放时间栏"
+      },
+      "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.2",
   "description": "ioBroker Logitech Squeezebox Adapter over JSON/RPC-Protocol",
   "author": {
     "name": "oweitman",

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

@@ -53,7 +53,7 @@
   var version;
   var init_package = __esm({
     "../package.json"() {
-      version = "1.5.0";
+      version = "1.5.1";
     }
   });
 
@@ -1900,14 +1900,18 @@
             }
             const stateid_duration = `${data.ainstance.join(".")}.Players.${playername}.Duration`;
             const stateid_state = `${data.ainstance.join(".")}.Players.${playername}.state`;
+            const stateid_time = `${data.ainstance.join(".")}.Players.${playername}.Time`;
             const state_duration = vis.states[`${stateid_duration}.val`] || vis.states[`${stateid_duration}.val`] === 0 ? parseInt(vis.states[`${stateid_duration}.val`]) : 0;
             const state_state = vis.states[`${stateid_state}.val`] || vis.states[`${stateid_state}.val`] === 0 ? parseInt(vis.states[`${stateid_state}.val`]) : 0;
-            let width = state_duration == 0 ? 0 : width;
+            const state_time = vis.states[`${stateid_time}.val`] || vis.states[`${stateid_time}.val`] === 0 ? parseInt(vis.states[`${stateid_time}.val`]) : 0;
+            let width = state_duration == 0 ? 0 : $(`#${widgetID} div.playtimebar`).width();
             if (state_state == 2) {
               width = 0;
             }
             if (vis.editMode) {
               width = 50;
+            } else {
+              width = Math.floor(state_time / state_duration * 100);
             }
             $(`#${widgetID} div.playtimebar`).width(`${width}%`);
           }
@@ -2000,23 +2004,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

@@ -1664,6 +1664,7 @@ vis.binds['squeezeboxrpc'] = {
             }
             const stateid_duration = `${data.ainstance.join('.')}.Players` + `.${playername}.Duration`;
             const stateid_state = `${data.ainstance.join('.')}.Players` + `.${playername}.state`;
+            const stateid_time = `${data.ainstance.join('.')}.Players` + `.${playername}.Time`;
 
             const state_duration =
                 vis.states[`${stateid_duration}.val`] || vis.states[`${stateid_duration}.val`] === 0
@@ -1673,12 +1674,19 @@ vis.binds['squeezeboxrpc'] = {
                 vis.states[`${stateid_state}.val`] || vis.states[`${stateid_state}.val`] === 0
                     ? parseInt(vis.states[`${stateid_state}.val`])
                     : 0;
-            let width = state_duration == 0 ? 0 : width;
+            const state_time =
+                vis.states[`${stateid_time}.val`] || vis.states[`${stateid_time}.val`] === 0
+                    ? parseInt(vis.states[`${stateid_time}.val`])
+                    : 0;
+
+            let width = state_duration == 0 ? 0 : $(`#${widgetID} div.playtimebar`).width();
             if (state_state == 2) {
                 width = 0;
             } //0 if player stop
             if (vis.editMode) {
                 width = 50;
+            } else {
+                width = Math.floor((state_time / state_duration) * 100);
             }
             $(`#${widgetID} div.playtimebar`).width(`${width}%`);
         },
@@ -1781,26 +1789,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>