Merge remote-tracking branch 'origin/main' into feature/add-dsp-presets

src/lib/shared/hooks/index.ts

@@ -5,3 +5,5 @@ export * from "./usePressHoldRelease";
 export * from "./useRoomIBasicVolumeWithFeedback";
 export * from "./useSystemControl";
 export * from "./useTimeAndDate";
+export * from "./useOverflow";
+export * from "./useScroll";

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

@@ -30,3 +30,4 @@ export * from "./useITransport";
 export * from "./useMobileControlTouchpanelController";
 export * from "./useTwoWayDisplayBase";
 export * from "./useIRunDefaultPresentRoute";
+export * from "./useITheme";

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

@@ -0,0 +1,22 @@
+import { useGetDevice } from "src/lib";
+import { MobileControlTouchpanelState } from "src/lib/types/state/state/MobileControlTouchpanelState";
+import { useWebsocketContext } from "src/lib/utils";
+
+export function useITheme(touchpanelKey: string):IThemeReturn {
+  const { sendMessage } = useWebsocketContext();
+  const tpState = useGetDevice<MobileControlTouchpanelState>(touchpanelKey);
+
+  const saveTheme = (theme: string) => {
+    sendMessage(`/device/${touchpanelKey}/saveTheme`, { value: theme });
+  }
+
+  return {
+    currentTheme: tpState?.theme,
+    saveTheme,
+  }
+}
+
+interface IThemeReturn {
+  currentTheme?: string;
+  saveTheme: (theme: string) => void;
+}

src/lib/shared/hooks/useOverflow.ts

@@ -0,0 +1,36 @@
+import { RefObject, useLayoutEffect, useState } from "react";
+
+export function useOverflow<T extends HTMLElement | undefined>(ref:RefObject<T | undefined>, callback?:(hasOverflowVertical: boolean, hasOverflowHorizontal: boolean) => void):UseIsOverflowProps {
+  const [overflowHorizontal, setOverflowHorizontal] = useState(false);
+  const [overflowVertical, setOverflowVertical] = useState(false);
+
+
+  useLayoutEffect(() => {
+    const { current } = ref;
+
+    const trigger = () => {
+      const hasOverflowVertical = current && current.scrollHeight > current.clientHeight;
+      const hasOverflowHorizontal = current && current.scrollWidth > current.clientWidth;
+
+      setOverflowVertical(hasOverflowVertical ?? false);
+      setOverflowHorizontal(hasOverflowHorizontal ?? false);
+
+      if (!callback) return;
+
+      callback(hasOverflowVertical ?? false, hasOverflowHorizontal ?? false);
+    }
+
+    if (!current) return;
+
+    trigger();
+  }, [ref, callback])
+
+  return { overflowHorizontal, overflowVertical };
+}
+
+export interface UseIsOverflowProps {
+  overflowHorizontal: boolean;
+  overflowVertical: boolean;
+}
+
+export default useOverflow;

src/lib/shared/hooks/useScroll.ts

@@ -0,0 +1,55 @@
+import { RefObject, useLayoutEffect, useState } from "react";
+
+export function useScroll<T extends HTMLElement | undefined>(ref: RefObject<T | undefined>): UseScrollProps {  
+
+  const [horizontalScrollPosition, setHorizontalScrollPosition] = useState(ref?.current?.scrollLeft ?? 0);
+  const [verticalScrollPosition, setVerticalScrollPosition] = useState(ref?.current?.scrollTop ?? 0);
+
+  const scrollHorizontal = (increment: number) => {
+    const { current } = ref;
+
+    if (!current) return;
+
+    console.log(current.scrollLeft);
+
+    current.scrollLeft += increment;
+
+    console.log(current.scrollLeft);
+  }
+
+  const scrollVertical = (increment: number) => {
+    const { current } = ref;
+
+    if (!current) return;
+
+    console.log(current.scrollTop);
+
+    current.scrollTop += increment;
+
+    console.log(current.scrollTop);
+  }
+
+  useLayoutEffect(() => {
+    const { current } = ref;
+
+    const trigger = () => {           
+      setHorizontalScrollPosition(current?.scrollLeft ?? 0);
+      setVerticalScrollPosition(current?.scrollTop ?? 0); 
+    }
+
+    if (!current) return;
+
+    trigger();
+  }, [ref])
+
+  return {horizontalScrollPosition, verticalScrollPosition, scrollHorizontal, scrollVertical};
+}
+
+export default useScroll;
+
+export interface UseScrollProps {
+  scrollHorizontal: (increment: number) => void;
+  scrollVertical: (increment: number) => void;
+  horizontalScrollPosition: number;
+  verticalScrollPosition: number;
+}

src/lib/shared/layout/ErrorBox.tsx

@@ -1,7 +1,23 @@
-import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { useNavigate, useRouteError, isRouteErrorResponse } from "react-router-dom";
 
 export const ErrorBox = () => {
+  const [showError, setShowError] = useState(false);
   const navigate = useNavigate();
+  const error = useRouteError();
+
+  let errorMessage: string;
+
+  if (isRouteErrorResponse(error)) {
+    errorMessage = error.statusText;
+  } else if (error instanceof Error) {
+    errorMessage = error.message;
+  } else if (typeof error === 'string') { 
+    errorMessage = error;
+  } else {
+    console.error(error);
+    errorMessage = 'Unknown error';
+  }
 
   return (
     <div className="d-flex flex-column align-items-center gap-5">
@@ -13,6 +29,10 @@ export const ErrorBox = () => {
       <button className="btn btn-primary p-2" onClick={() => navigate(-1)}>
         Go Back
       </button>
+      <button className="btn btn-primary p-2" onClick={() => setShowError(!showError)}>
+        {showError ? 'Hide error message' : 'Show error message'}
+      </button>        
+      {showError && <p>{errorMessage}</p>}
     </div>
   );
 };

src/lib/store/runtimeConfig/runtimeConfig.slice.ts

@@ -14,6 +14,7 @@ const initialState: RuntimeConfigState = {
     disconnectionMessage: '',
     token: '',
     currentRoomKey: '',
+    touchpanelKey: '',
     roomData: {
         clientId: '',
         roomKey: '',
@@ -64,6 +65,9 @@ const runtimeConfigSlice = createSlice({
             state.roomData.userCode = action.payload.userCode;
             state.roomData.qrUrl = action.payload.qrUrl;
         },
+        setTouchpanelKey(state, action: PayloadAction<string>) {
+            state.touchpanelKey = action.payload;
+        }
     }
 })
 
@@ -78,6 +82,7 @@ export interface RuntimeConfigState {
     token: string;
     roomData: RoomData;
     currentRoomKey: string;
+    touchpanelKey: string;
 }
 
 export interface UserCode {

src/lib/store/runtimeConfig/runtimeSelectors.ts

@@ -12,4 +12,8 @@ export const useUserCode = () => useAppSelector((state) => state.runtimeConfig.r
 
 export const useServerIsRunningOnProcessorHardware = () => useAppSelector((state) => state.runtimeConfig.serverIsRunningOnProcessorHardware);
 
-export const useRuntimeInfo = () => useAppSelector((state) => state.runtimeConfig.roomData.config?.runtimeInfo);
+export const useRuntimeInfo = () => useAppSelector((state) => state.runtimeConfig.roomData.config?.runtimeInfo);
+
+export const useTouchpanelKey = () => useAppSelector((state) => state.runtimeConfig.touchpanelKey);
+
+export const useIsTouchpanel = () => useAppSelector((state) => state.runtimeConfig.touchpanelKey !== '');

src/lib/types/state/state/MobileControlTouchpanelState.ts

@@ -1,6 +1,6 @@
 import { DeviceState } from './DeviceState';
 
-export interface MobileControlTouchpanelState extends DeviceState, ITswAppControlMessengerState, ITswZoomControlMessengerState  {
+export interface MobileControlTouchpanelState extends DeviceState, ITswAppControlMessengerState, ITswZoomControlMessengerState, IThemeMessengerState  {
 
 }
 
@@ -11,4 +11,8 @@ interface ITswAppControlMessengerState {
 interface ITswZoomControlMessengerState {
   inCall?: boolean;
   incomingCall?: boolean;
+}
+
+interface IThemeMessengerState {
+  theme?: string;
 }

src/lib/utils/WebsocketProvider.tsx

@@ -267,7 +267,14 @@ const WebsocketProvider = ({ children }: { children: ReactNode }) => {
               return;
             }
             if (message.type.startsWith("/system/")) {
-              switch (message.type) {                
+              switch (message.type) {          
+                case "/system/touchpanelKey":
+                  store.dispatch(
+                    runtimeConfigActions.setTouchpanelKey(
+                      message.content as string
+                    )
+                  );
+                  break;
                 case "/system/roomKey":
                   store.dispatch(
                     runtimeConfigActions.setCurrentRoomKey(