feat: updates to useHeldButtonAction to get press/release working. Up…

…dates to volume control

src/lib/shared/hooks/index.ts

@@ -1,3 +1,6 @@
-export * from "./useGetDeviceStateFromRoomConfiguration";
-// export * from "./usePressHoldRelease"
 export * from "./interfaces";
+export * from "./useDeviceIBasicVolumeWithFeedback";
+export * from "./useGetDeviceStateFromRoomConfiguration";
+export * from "./usePressHoldRelease";
+export * from "./useRoomIBasicVolumeWithFeedback";
+

src/lib/shared/hooks/interfaces/index.ts

@@ -1,5 +1,5 @@
 export * from './interfaceNames';
-export * from './useIBasicVolumeWithFeedback';
+// export * from './useIBasicVolumeWithFeedback';
 export * from './useIChannelMessenger';
 export * from './useIColor';
 export * from './useIDPad';

src/lib/shared/hooks/interfaces/useIBasicVolumeWithFeedback.ts

@@ -1,28 +1,26 @@
-import { useGetDevice } from "src/lib/store";
 import { Volume } from "src/lib/types";
 import { useWebsocketContext } from "src/lib/utils/useWebsocketContext";
 import { useButtonHeldHeartbeat } from "../useHeldButtonAction";
 import { PressHoldReleaseReturn } from "../usePressHoldRelease";
 
 export function useIBasicVolumeWithFeedback(
-  key: string
+  path: string, volumeState: Volume | undefined
 ): IBasicVolumeWithFeedbackProps | undefined {
   const { sendMessage, sendSimpleMessage } = useWebsocketContext();
-  const volumeState = useGetDevice<Volume>(key);
 
-  const volumeUp = useButtonHeldHeartbeat(`/device/${key}`, "volumeUp");
-  const volumeDown = useButtonHeldHeartbeat(`/device/${key}`, "volumeDown");
+  const volumeUp = useButtonHeldHeartbeat(`${path}`, "volumeUp");
+  const volumeDown = useButtonHeldHeartbeat(`${path}`, "volumeDown");
 
   if (!volumeState) return undefined;
 
   const setLevel = (value: number) =>
-    sendSimpleMessage(`/device/${key}/level`, value);
+    sendSimpleMessage(`${path}/level`, value);
 
-  const muteToggle = () => sendMessage(`/device/${key}/muteToggle`, null);
+  const muteToggle = () => sendMessage(`${path}/muteToggle`, null);
 
-  const muteOn = () => sendMessage(`/device/${key}/muteOn`, null);
+  const muteOn = () => sendMessage(`${path}/muteOn`, null);
 
-  const muteOff = () => sendMessage(`/device/${key}/muteOff`, null);
+  const muteOff = () => sendMessage(`${path}/muteOff`, null);
 
   return {
     volumeState,

src/lib/shared/hooks/useDeviceIBasicVolumeWithFeedback.ts

@@ -0,0 +1,17 @@
+import { useGetDevice } from 'src/lib/store';
+import { Volume } from 'src/lib/types';
+import { useIBasicVolumeWithFeedback } from './interfaces/useIBasicVolumeWithFeedback';
+
+/**
+ *  Wrapper hook for a device volume
+ * @param deviceKey 
+ * @returns 
+ */
+export function useDeviceIBasicVolumeWithFeedback(deviceKey: string ) {
+  const volumeState = useGetDevice<Volume>(deviceKey);
+
+  const path = `/device/${deviceKey}`;
+
+  return useIBasicVolumeWithFeedback(path, volumeState);
+}
+

src/lib/shared/hooks/useHeldButtonAction.ts

@@ -19,16 +19,17 @@ import { usePressHoldRelease } from './usePressHoldRelease';
  * <button {...digit0}>0</button>
  */
 export function useButtonHeldHeartbeat(path: string, command: string) {
+  const repeatIntervalMs = 250;
   const { sendMessage } = useWebsocketContext();
   const held = useRef<NodeJS.Timeout | null>(null);
 
   function onPress() {
-    sendMessage(`${path}/${command}`, 'true');
+    sendMessage(`${path}/${command}`, { value: 'pressed' });
 
     if(!held.current) {
       held.current = setInterval(() => {
-        sendMessage(`${path}/${command}`, 'held' );
-      }, 100);
+        sendMessage(`${path}/${command}`, { value: 'held' } );
+      }, repeatIntervalMs);
     }
   }
 
@@ -37,7 +38,7 @@ export function useButtonHeldHeartbeat(path: string, command: string) {
       clearInterval(held.current);
       held.current = null;
     }
-    sendMessage(`${path}/${command}`,  'false');
+    sendMessage(`${path}/${command}`, { value:  'released' });
   }
 
 

src/lib/shared/hooks/usePressHoldRelease.ts

@@ -29,7 +29,7 @@ export function usePressHoldRelease({
     }
   }
 
-  function onMouseLeave() {
+  function onPointerLeave() {
     if(pressed.current) {
       onPointerUp();
     }
@@ -38,7 +38,7 @@ export function usePressHoldRelease({
   return {
     onPointerDown,
     onPointerUp,
-    onMouseLeave
+    onPointerLeave
   };
 }
 

src/lib/shared/hooks/useRoomIBasicVolumeWithFeedback.ts

@@ -0,0 +1,18 @@
+import { useRoomVolume } from 'src/lib/store';
+import { RoomVolumeType } from 'src/lib/types';
+import { useIBasicVolumeWithFeedback } from './interfaces/useIBasicVolumeWithFeedback';
+
+/**
+ *  Wrapper hook for the room volumes
+ * @param roomKey 
+ * @param type either master or they key of the aux volume
+ * @returns 
+ */
+export function useRoomIBasicVolumeWithFeedback(roomKey: string, type: RoomVolumeType ) {
+  const volumeState = useRoomVolume(roomKey, type);
+
+  const path = `/room/${roomKey}/volumes/${type}`;
+
+  return useIBasicVolumeWithFeedback(path, volumeState);
+}
+

src/lib/store/rooms/roomsSelectors.ts

@@ -1,3 +1,4 @@
+import { RoomVolumeType, Volume } from 'src/lib/types';
 import { DisplayState } from "src/lib/types/state/state";
 import { useAppSelector } from "../hooks";
 
@@ -16,9 +17,10 @@ export const useRoomName = (roomKey: string) =>
     state.rooms[roomKey] ? state.rooms[roomKey]?.name : undefined
   );
 
-export const useRoomMasterVolume = (roomKey: string) =>
-  useAppSelector((state) =>
-    state.rooms[roomKey] ? state.rooms[roomKey]?.volumes?.master : undefined
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const useRoomVolume = (roomKey: string, volumeKey: RoomVolumeType) =>
+  useAppSelector((state ) =>
+    state.rooms[roomKey] ? state.rooms[roomKey]?.volumes[volumeKey] as Volume : undefined
   );
 
 export const useRoomSourceList = (roomKey: string) =>

src/lib/types/state/index.ts

@@ -9,5 +9,4 @@ export * from './message-handler';
 export * from './sourceListItem';
 export * from './state';
 export * from './volume/volume';
-export * from './volume/volumes';
 

src/lib/types/state/state/RoomState.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-classes-per-file */
 
 import { SourceListItem } from '../sourceListItem';
-import { Volumes } from '../volume/volumes';
+import { Volume } from '../volume/volume';
 import { DeviceState } from './DeviceState';
 import { ShareState } from './ShareState';
 
@@ -16,7 +16,7 @@ export interface RoomState extends DeviceState {
   isWarmingUp?: boolean;
   selectedSourceKey?: string;
   share?: ShareState;
-  volumes?: Volumes;
+  volumes : Record<string, Volume>;
 }
 
 export class RoomConfiguration {
@@ -50,3 +50,6 @@ export class EnvironmentalDeviceConfiguration {
 }
 
 export type EnvironmentalDeviceTypes = 'Lighting' | 'Shade' | 'ShadeController';
+
+export type RoomVolumeType = 'master' | string;
+

src/lib/types/state/volume/volumes.ts

@@ -3,5 +3,7 @@ import { Volume } from './volume';
 export interface Volumes {
   master: Volume;
   auxFaders: Record<string, Volume>;
-  // numberOfAuxFaders: number;
 }
+
+export type RoomVolumeType = 'master' | string;
+