homebridge-sonos-scenes 0.1.5 → 0.1.7

package/README.md

@@ -1,7 +1,16 @@
-# homebridge-sonos-scenes
+<p align="center">
+  <img src="docs/assets/icon-512.png" alt="homebridge-sonos-scenes icon" width="164">
+</p>
+
+<h1 align="center">homebridge-sonos-scenes</h1>
+
+<p align="center">Homebridge plugin for Sonos workflow scenes and orchestration.</p>
 
 `homebridge-sonos-scenes` is a Homebridge plugin scaffold for Sonos workflow scenes.
 
+> [!IMPORTANT]
+> This project is in an active early-testing phase. The local-first scene workflow is usable and published to npm, but cloud-backed Sonos playback is still planned work and some edge cases are still being hardened. If you try the plugin, please share bugs, UI feedback, and Sonos compatibility notes in [GitHub Issues](https://github.com/applemanj/homebridge-sonos-scenes/issues). Real-world feedback is especially helpful right now.
+
 The goal is not general Sonos control. The goal is a clean way to trigger multi-step Sonos workflows from Apple Home, such as:
 
 - grouping rooms around a coordinator,

package/homebridge-ui/public/index.html

@@ -37,7 +37,7 @@
     border: 1px solid rgba(22, 32, 51, 0.08);
     box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
     background: white;
-    overflow: hidden;
+    overflow: visible;
   }
 
   .scene-mode-panel .card-header {
@@ -45,6 +45,34 @@
     background: rgba(255, 255, 255, 0.65);
   }
 
+  .scene-section-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.85rem 1rem;
+    padding: 1rem 1.15rem;
+  }
+
+  .scene-section-header-copy {
+    display: grid;
+    gap: 0.35rem;
+    min-width: 0;
+    flex: 1 1 260px;
+  }
+
+  .scene-section-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.65rem;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .scene-section-actions .btn {
+    white-space: nowrap;
+  }
+
   .scene-mode-panel .card-body {
     display: grid;
     gap: 1rem;
@@ -66,6 +94,8 @@
 
   .scene-mode-choice input {
     margin-right: 0.65rem;
+    accent-color: var(--scene-accent);
+    transform: scale(1.08);
   }
 
   .scene-mode-choice-title {
@@ -148,7 +178,7 @@
 
   .scene-card .scene-help,
   .scene-mode-panel .scene-help {
-    color: #667085;
+    color: #556579;
   }
 
   .scene-list button {
@@ -277,12 +307,22 @@
     display: block;
   }
 
+  .scene-member-pill.selected {
+    border-color: rgba(10, 132, 255, 0.34);
+    background: rgba(10, 132, 255, 0.07);
+    box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.08);
+  }
+
   .scene-member-row {
     display: flex;
     align-items: flex-start;
     gap: 0.65rem;
   }
 
+  .scene-member-toggle {
+    cursor: pointer;
+  }
+
   .scene-member-pill .form-check-input {
     margin-top: 0.2rem;
     flex: 0 0 auto;
@@ -306,6 +346,25 @@
     line-height: 1.35;
   }
 
+  .scene-member-volume {
+    display: grid;
+    gap: 0.35rem;
+    margin-top: 0.65rem;
+    padding-top: 0.65rem;
+    border-top: 1px solid rgba(22, 32, 51, 0.08);
+  }
+
+  .scene-member-volume-label {
+    color: #556579;
+    font-size: 0.78rem;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+
+  .scene-member-volume-input {
+    max-width: 132px;
+  }
+
   .scene-log {
     max-height: 280px;
     overflow: auto;
@@ -334,7 +393,7 @@
   }
 
   .scene-inline-note {
-    color: #667085;
+    color: #5f6f84;
     font-size: 0.88rem;
     line-height: 1.45;
   }
@@ -344,10 +403,10 @@
     align-items: center;
     gap: 0.4rem;
     flex-wrap: wrap;
+    position: relative;
   }
 
   .scene-info-tag {
-    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -370,10 +429,11 @@
 
   .scene-tooltip {
     position: absolute;
-    top: 50%;
-    left: calc(100% + 0.55rem);
-    transform: translateY(-50%);
-    width: min(320px, 70vw);
+    top: calc(100% + 0.45rem);
+    left: 0;
+    transform: none;
+    width: min(320px, calc(100vw - 4rem));
+    max-width: 100%;
     padding: 0.65rem 0.75rem;
     border-radius: 0.7rem;
     border: 1px solid rgba(170, 198, 255, 0.28);
@@ -400,15 +460,6 @@
       grid-template-columns: 1fr;
     }
   }
-
-  @media (max-width: 720px) {
-    .scene-tooltip {
-      top: calc(100% + 0.45rem);
-      left: 0;
-      transform: none;
-      width: min(280px, 78vw);
-    }
-  }
 </style>
 
 <div class="scene-shell">
@@ -444,12 +495,11 @@
 
   <section class="scene-mode-grid">
     <section class="scene-mode-panel card scene-card">
-      <div class="card-header d-flex justify-content-between align-items-center">
-        <div>
+      <div class="card-header scene-section-header">
+        <div class="scene-section-header-copy">
           <strong>Execution Mode</strong>
           <div class="scene-help">Choose whether scenes stay fully local or can use a self-hosted Sonos cloud broker later.</div>
         </div>
-        <div id="cloud-mode-pill" class="scene-status-pill local">Local Only</div>
       </div>
       <div class="card-body d-grid gap-3">
         <label class="scene-mode-choice" data-mode-choice="local_only">
@@ -539,13 +589,15 @@
 
   <div class="scene-grid">
     <section class="card scene-card">
-      <div class="card-header d-flex justify-content-between align-items-center">
-        <div>
+      <div class="card-header scene-section-header">
+        <div class="scene-section-header-copy">
           <strong>Scenes</strong>
           <div class="scene-help">Each saved scene becomes a HomeKit switch plus a companion volume speaker.</div>
           <div class="scene-inline-note mt-2">Save scene changes in the editor, then use Homebridge&apos;s footer Save button when you&apos;re ready to write everything to `config.json`.</div>
         </div>
-        <button class="btn btn-sm btn-outline-primary" id="new-scene-button" type="button">New Scene</button>
+        <div class="scene-section-actions">
+          <button class="btn btn-sm btn-outline-primary" id="new-scene-button" type="button">New Scene</button>
+        </div>
       </div>
       <div class="card-body">
         <div id="scene-list" class="scene-list"></div>
@@ -553,13 +605,13 @@
     </section>
 
     <section class="card scene-card">
-      <div class="card-header d-flex justify-content-between align-items-center">
-        <div>
+      <div class="card-header scene-section-header">
+        <div class="scene-section-header-copy">
           <strong>Scene Editor</strong>
           <div class="scene-help">Stable Sonos IDs are stored under the hood; the UI keeps room selection friendly.</div>
           <div class="scene-inline-note mt-2">Save Scene Changes updates this scene in the list above. Homebridge&apos;s footer Save button writes the full plugin config to disk.</div>
         </div>
-        <div class="d-flex gap-2">
+        <div class="scene-section-actions">
           <button class="btn btn-sm btn-outline-danger" id="delete-scene-button" type="button">Delete</button>
           <button class="btn btn-sm btn-primary" id="save-scene-button" type="button">Save Scene Changes</button>
         </div>
@@ -609,7 +661,7 @@
                 <span>Group Members</span>
                 <span class="scene-info-tag" tabindex="0" role="button" aria-label="Explain Group Members">
                   ?
-                  <span class="scene-tooltip">Additional rooms to join the coordinator when the scene runs. Leave all unchecked for a single-room scene.</span>
+                  <span class="scene-tooltip">Additional rooms to join the coordinator when the scene runs. Leave all unchecked for a single-room scene. Selected member tiles can also carry their own optional volume override.</span>
                 </span>
               </span>
             </label>
@@ -714,18 +766,6 @@
               <option value="ungroup">Ungroup</option>
             </select>
           </div>
-          <div class="col-12">
-            <label class="form-label">
-              <span class="scene-label-row">
-                <span>Per-room Volumes</span>
-                <span class="scene-info-tag" tabindex="0" role="button" aria-label="Explain Per-room Volumes">
-                  ?
-                  <span class="scene-tooltip">Optional volume overrides for specific member rooms. Leave a room blank here to keep its current volume or let the group volume behavior apply.</span>
-                </span>
-              </span>
-            </label>
-            <div id="volume-list" class="scene-member-grid"></div>
-          </div>
         </div>
       </div>
     </section>
@@ -781,7 +821,6 @@
       retryDelayMs: document.getElementById("retry-delay-ms"),
       autoResetMs: document.getElementById("auto-reset-ms"),
       offBehavior: document.getElementById("off-behavior"),
-      volumeList: document.getElementById("volume-list"),
       validationOutput: document.getElementById("validation-output"),
       logOutput: document.getElementById("log-output"),
       discoverySummary: document.getElementById("discovery-summary"),
@@ -791,7 +830,6 @@
       testButton: document.getElementById("test-button"),
       cloudModeInputs: Array.from(document.querySelectorAll("input[name='cloud-mode']")),
       cloudModeChoices: Array.from(document.querySelectorAll("[data-mode-choice]")),
-      cloudModePill: document.getElementById("cloud-mode-pill"),
       cloudBrokerPanel: document.getElementById("cloud-broker-panel"),
       cloudBrokerCopy: document.getElementById("cloud-broker-copy"),
       cloudBrokerFields: document.getElementById("cloud-broker-fields"),
@@ -934,7 +972,7 @@
       draft.retryDelayMs = Number(elements.retryDelayMs.value || 0);
       draft.autoResetMs = Number(elements.autoResetMs.value || 0);
       draft.offBehavior = { kind: elements.offBehavior.value };
-      draft.playerVolumes = Array.from(elements.volumeList.querySelectorAll("input[data-player-id]"))
+      draft.playerVolumes = Array.from(elements.memberList.querySelectorAll("input[data-player-id]"))
         .filter((input) => input.value !== "")
         .map((input) => ({
           playerId: input.dataset.playerId,
@@ -1021,8 +1059,6 @@
       });
 
       const isHybrid = cloud.mode === "local_plus_cloud";
-      elements.cloudModePill.textContent = isHybrid ? "Local + Cloud" : "Local Only";
-      elements.cloudModePill.className = `scene-status-pill ${isHybrid ? "pending" : "local"}`;
       elements.cloudBrokerPanel.classList.toggle("scene-cloud-hidden", !isHybrid);
       elements.cloudBrokerCopy.textContent = isHybrid
         ? "Only needed if you run your own broker. The settings below stay with this plugin config and are ignored whenever Local Only is active."
@@ -1107,22 +1143,40 @@
       const household = getActiveHousehold();
       const coordinatorId = state.draft.coordinatorPlayerId;
       const selected = new Set(state.draft.memberPlayerIds.filter((playerId) => playerId !== coordinatorId));
+      const values = new Map((state.draft.playerVolumes || []).map((entry) => [entry.playerId, entry.volume]));
       const players = (household?.players || []).filter((player) => player.id !== coordinatorId);
       elements.memberList.innerHTML = players.length === 0
         ? `<div class="scene-help">No additional players are available for grouping.</div>`
         : players
             .map(
-              (player) => `
-                <label class="scene-member-pill">
-                  <span class="scene-member-row">
-                    <input class="form-check-input" type="checkbox" value="${player.id}" ${selected.has(player.id) ? "checked" : ""}>
+              (player) => {
+                const isSelected = selected.has(player.id);
+                return `
+                <div class="scene-member-pill ${isSelected ? "selected" : ""}">
+                  <label class="scene-member-row scene-member-toggle">
+                    <input class="form-check-input" data-member-checkbox type="checkbox" value="${player.id}" ${isSelected ? "checked" : ""}>
                     <span class="scene-member-copy">
                       <span class="scene-member-title">${player.name}</span>
                       <span class="scene-member-meta">${player.model || "Unknown model"} - ${((player.sourceOptions || []).join(", ") || "favorite").replaceAll("_", " ")}</span>
                     </span>
-                  </span>
-                </label>
-              `,
+                  </label>
+                  ${isSelected ? `
+                    <div class="scene-member-volume">
+                      <label class="scene-member-volume-label" for="member-volume-${player.id}">Volume Override</label>
+                      <input
+                        class="form-control form-control-sm scene-member-volume-input"
+                        id="member-volume-${player.id}"
+                        data-player-id="${player.id}"
+                        type="number"
+                        min="0"
+                        max="100"
+                        placeholder="Keep current"
+                        value="${values.get(player.id) ?? ""}">
+                    </div>
+                  ` : ""}
+                </div>
+              `;
+              },
             )
             .join("");
     }
@@ -1181,22 +1235,6 @@
         .join("");
     }
 
-    function renderVolumeControls() {
-      const household = getActiveHousehold();
-      const selectedMembers = state.draft.memberPlayerIds || [];
-      const values = new Map((state.draft.playerVolumes || []).map((entry) => [entry.playerId, entry.volume]));
-      elements.volumeList.innerHTML = selectedMembers.length === 0
-        ? `<div class="scene-help">Select one or more member rooms to configure per-room volume overrides.</div>`
-        : selectedMembers
-            .map((playerId) => `
-              <label class="scene-member-pill">
-                <span class="scene-member-title d-block mb-1">${getPlayerName(playerId)}</span>
-                <input class="form-control" data-player-id="${playerId}" type="number" min="0" max="100" value="${values.get(playerId) ?? ""}">
-              </label>
-            `)
-            .join("");
-    }
-
     function renderValidation() {
       if (!state.validation && !state.lastRun) {
         elements.validationOutput.innerHTML = `<div class="scene-help">Validation messages and test results will appear here.</div>`;
@@ -1322,7 +1360,6 @@
       elements.retryDelayMs.value = state.draft.retryDelayMs ?? 750;
       elements.autoResetMs.value = state.draft.autoResetMs ?? 1000;
       elements.offBehavior.value = state.draft.offBehavior?.kind || "none";
-      renderVolumeControls();
     }
 
     function render() {
@@ -1490,6 +1527,23 @@
         });
       });
 
+      elements.memberList.addEventListener("change", (event) => {
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement)) {
+          return;
+        }
+
+        if (target.matches("input[data-member-checkbox]")) {
+          serializeDraft();
+          renderMemberOptions();
+          return;
+        }
+
+        if (target.matches("input[data-player-id]")) {
+          serializeDraft();
+        }
+      });
+
       elements.householdSelect.addEventListener("change", () => {
         serializeDraft();
         state.draft.coordinatorPlayerId = "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homebridge-sonos-scenes",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Homebridge plugin for Sonos workflow scenes and orchestration.",
   "author": "applemanj",
   "homepage": "https://github.com/applemanj/homebridge-sonos-scenes#readme",