[Logitech Litra] Improve the UX when no Litra devices are found, and …

…document that devices must be connected via USB Fixes raycast/extensions#6620. Thanks to @RafaelDavisH for the feedback!
timrogers · May 18, 2023 · 609cbe3 · 609cbe3
1 parent af0db5b
commit 609cbe3
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 51 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Logitech Litra Changelog
 
+## [Improve the UX when no Litra devices are found] - 2023-05-18
+
+- The extension now shows a helpful message if no connected Litra devices are found when using the "Manage Devices" command.
+- We've documented that your Litra device(s) must be connected via USB - not Bluetooth, which is supported by the Litra Beam.
+
 ## [Fix support for non-standard Node.js installations] - 2023-05-04
 
 - The extension now works with non-standard Node.js installations (e.g. from `nvm`) where we get a `env: node: No such file or directory` error when trying to run `/usr/bin/env node`. It adds a new optional "Node.js binary path" setting which can be set to point directly to the Node.js binary, rather than relying on `/usr/bin/env node`.

diff --git a/README.md b/README.md
@@ -1,9 +1,11 @@
 # Logitech Litra extension for Raycast
 
-This [Raycast](https://www.raycast.com/) extension allows you to manage your Logitech Litra Glow and/or Logitech Litra Beam light(s) from Raycast, turning them on and off and setting their brightness and temperature.
+This [Raycast](https://www.raycast.com/) extension allows you to manage your USB-connected Logitech Litra Glow and/or Logitech Litra Beam light(s) from Raycast, turning them on and off and setting their brightness and temperature.
 
 ![Screenshot](screenshot.png?raw=true)
 
+*Note*: This will not work with Logitech Litra Beam devices connected using Bluetooth.
+
 ## Installation
 
 To use this extension, as well as downloading the extension from the Raycast Store, you must also set up [Node.js](https://nodejs.org/en/) and [`npm`](https://www.npmjs.com/), and then install the `litra` npm package globally by running `npm install -g litra`. You must be running at least v4.4.0 of the package.

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "$schema": "https://www.raycast.com/schemas/extension.json",
   "name": "logitech-litra",
   "title": "Logitech Litra",
-  "description": "Manage Logitech Litra Glow and Logitech Litra Beam lights from Raycast",
+  "description": "Manage USB-connected Logitech Litra Glow and Logitech Litra Beam lights from Raycast",
   "icon": "command-icon.png",
   "author": "timrogers",
   "categories": [
@@ -14,7 +14,7 @@
       "name": "manage-devices",
       "title": "Manage Devices",
       "subtitle": "Turn on and off, and set brightness and temperature",
-      "description": "Turn your Logitech Litra devices on or off, and set their brightness and temperature",
+      "description": "Turn your USB-connected Logitech Litra devices on or off, and set their brightness and temperature",
       "mode": "view"
     },
     {

diff --git a/src/manage-devices.tsx b/src/manage-devices.tsx
@@ -43,59 +43,67 @@ export default function Command() {
 
   return (
     <List isLoading={false}>
-      {devices.map((device) => (
-        <List.Item
-          key={device.serial_number}
-          title={device.name}
-          subtitle={device.serial_number}
-          actions={
-            <ActionPanel>
-              <Action
-                title="Toggle"
-                icon={Icon.LightBulb}
-                onAction={async () => {
-                  await toggle(cliDirectory, device.serial_number, nodeBinaryPath);
-                  const isDeviceOn = await isOn(cliDirectory, device.serial_number, nodeBinaryPath);
-
-                  if (isDeviceOn) {
-                    await showToast({ title: `Turned on ${device.name}`, style: Toast.Style.Success });
-                  } else {
-                    await showToast({ title: `Turned off ${device.name}`, style: Toast.Style.Success });
-                  }
-                }}
-              />
-              {Array.from(enabledTemperaturePresets).map((temperature) => (
-                <Action
-                  key={temperature}
-                  title={`Set Temperature to ${temperature}K`}
-                  icon={Icon.Temperature}
-                  onAction={async () => {
-                    await setTemperatureInKelvin(cliDirectory, device.serial_number, temperature, nodeBinaryPath);
-                    await showToast({
-                      title: `Set ${device.name}'s temperature to ${temperature}K`,
-                      style: Toast.Style.Success,
-                    });
-                  }}
-                />
-              ))}
-              {Array.from(enabledBrightnessPresets).map((brightness) => (
+      {devices.length ? (
+        devices.map((device) => (
+          <List.Item
+            key={device.serial_number}
+            title={device.name}
+            subtitle={device.serial_number}
+            actions={
+              <ActionPanel>
                 <Action
-                  key={brightness}
-                  title={`Set Brightness to ${brightness}%`}
-                  icon={Icon.CircleProgress100}
+                  title="Toggle"
+                  icon={Icon.LightBulb}
                   onAction={async () => {
-                    await setBrightnessPercentage(cliDirectory, device.serial_number, brightness, nodeBinaryPath);
-                    await showToast({
-                      title: `Set ${device.name}'s brightness to ${brightness}%`,
-                      style: Toast.Style.Success,
-                    });
+                    await toggle(cliDirectory, device.serial_number, nodeBinaryPath);
+                    const isDeviceOn = await isOn(cliDirectory, device.serial_number, nodeBinaryPath);
+
+                    if (isDeviceOn) {
+                      await showToast({ title: `Turned on ${device.name}`, style: Toast.Style.Success });
+                    } else {
+                      await showToast({ title: `Turned off ${device.name}`, style: Toast.Style.Success });
+                    }
                   }}
                 />
-              ))}
-            </ActionPanel>
-          }
+                {Array.from(enabledTemperaturePresets).map((temperature) => (
+                  <Action
+                    key={temperature}
+                    title={`Set Temperature to ${temperature}K`}
+                    icon={Icon.Temperature}
+                    onAction={async () => {
+                      await setTemperatureInKelvin(cliDirectory, device.serial_number, temperature, nodeBinaryPath);
+                      await showToast({
+                        title: `Set ${device.name}'s temperature to ${temperature}K`,
+                        style: Toast.Style.Success,
+                      });
+                    }}
+                  />
+                ))}
+                {Array.from(enabledBrightnessPresets).map((brightness) => (
+                  <Action
+                    key={brightness}
+                    title={`Set Brightness to ${brightness}%`}
+                    icon={Icon.CircleProgress100}
+                    onAction={async () => {
+                      await setBrightnessPercentage(cliDirectory, device.serial_number, brightness, nodeBinaryPath);
+                      await showToast({
+                        title: `Set ${device.name}'s brightness to ${brightness}%`,
+                        style: Toast.Style.Success,
+                      });
+                    }}
+                  />
+                ))}
+              </ActionPanel>
+            }
+          />
+        ))
+      ) : (
+        <List.EmptyView
+          icon={Icon.ExclamationMark}
+          title="No devices found"
+          description="You don't seem to have any USB-connected Litra Glow or Litra Beam devices."
         />
-      ))}
+      )}
     </List>
   );
 }