fix: streaming tab

dogu-team · Dec 15, 2023 · ec51638 · ec51638
1 parent 1d6f62a
commit ec51638
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/projects/console-web-front/src/components/streaming/DeviceStreaming.tsx b/projects/console-web-front/src/components/streaming/DeviceStreaming.tsx
@@ -13,7 +13,7 @@ import useInspector from '../../hooks/streaming/useInspector';
 import useLocalDeviceDetect from '../../hooks/streaming/useLocalDeviceDetect';
 import useRTCConnection from '../../hooks/streaming/useRTCConnection';
 import { StreamingMode } from '../../types/device';
-import { InspectorType, StreamingErrorType } from '../../types/streaming';
+import { InspectorType, StreamingErrorType, StreamingTabMenuKey } from '../../types/streaming';
 import ErrorBox from '../common/boxes/ErrorBox';
 import ApplicationUploader from './ApplicationUploader';
 import DeviceControlToolbar from './DeviceControlToolbar';
@@ -34,6 +34,7 @@ const THROTTLE_MS = 33;
 const DeviceStreaming = ({ device, children, pid, isCloudDevice, isAdmin }: Props) => {
   const [mode, setMode] = useState<StreamingMode>('input');
   const [inspectorType, setInspectorType] = useState<InspectorType>(InspectorType.APP);
+  const [tab, setTab] = useState<StreamingTabMenuKey>(StreamingTabMenuKey.INFO);
   const isSelf = useLocalDeviceDetect(device);
   const { loading, deviceRTCCallerRef, peerConnectionRef, videoRef, deviceToken, error } = useRTCConnection(
     { device, pid, isCloudDevice },
@@ -143,6 +144,7 @@ const DeviceStreaming = ({ device, children, pid, isCloudDevice, isAdmin }: Prop
         deviceRTCCaller: deviceRTCCallerRef.current ?? null,
         peerConnection: peerConnectionRef.current ?? null,
         error: error ?? null,
+        tab,
         gamiumService,
         deviceService,
         device: device ?? null,
@@ -152,6 +154,7 @@ const DeviceStreaming = ({ device, children, pid, isCloudDevice, isAdmin }: Prop
         gamiumInspector,
         updateMode: setMode,
         updateInspectorType: setInspectorType,
+        updateTab: setTab,
         isCloudDevice,
         deviceScreenshotBase64: imageBase64,
         isAdmin,

diff --git a/projects/console-web-front/src/components/studio/LIveTestingScreenViewer.tsx b/projects/console-web-front/src/components/studio/LIveTestingScreenViewer.tsx
@@ -1,5 +1,4 @@
 import { Platform } from '@dogu-private/types';
-import { useRouter } from 'next/router';
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
@@ -12,10 +11,8 @@ import InspectorSelectedNode from '../streaming/InspectorSelectedNode';
 import { VideoSize } from '../streaming/StreamingVideo';
 
 const LiveTestingScreenViewer: React.FC = () => {
-  const router = useRouter();
-  const { mode, inspectorType, inspector, gamiumInspector, deviceRTCCaller, device, updateMode } =
+  const { mode, inspectorType, inspector, gamiumInspector, deviceRTCCaller, device, updateMode, tab } =
     useDeviceStreamingContext();
-  const tab = (router.query.tab as StreamingTabMenuKey | undefined) ?? StreamingTabMenuKey.INFO;
   const {
     handleDoubleClick,
     handleKeyDown,

diff --git a/projects/console-web-front/src/components/studio/LiveTesting.tsx b/projects/console-web-front/src/components/studio/LiveTesting.tsx
@@ -25,8 +25,8 @@ const DeviceStreamingLayout = dynamic<DeviceStreamingLayoutProps>(() => import('
 
 const LiveTestingMenu = () => {
   const router = useRouter();
-  const [tab, setTab] = useState<StreamingTabMenuKey>(StreamingTabMenuKey.INFO);
-  const { device, deviceService, inspector, isCloudDevice, gamiumInspector } = useDeviceStreamingContext();
+  const { device, deviceService, inspector, isCloudDevice, gamiumInspector, tab, updateTab } =
+    useDeviceStreamingContext();
   const runtimeInfos = useDeviceStreamingProfile(deviceService?.deviceClientRef, device ?? null);
   const { t } = useTranslation();
   const { deviceLogs, isLogStopped, logFilterValue, togglePlay, handleChangeFilterValue, clearLog } = useDeviceLog(
@@ -38,11 +38,11 @@ const LiveTestingMenu = () => {
     useEventStore.subscribe(({ eventName, payload }) => {
       if (eventName === 'onStreamingHotkeyPressed') {
         if (payload === StreamingHotKey.INSPECTOR_RELOAD || payload === StreamingHotKey.INSPECTOR_SELECT) {
-          setTab(StreamingTabMenuKey.INSPECTOR);
+          updateTab(StreamingTabMenuKey.INSPECTOR);
         }
       }
     });
-  }, []);
+  }, [updateTab]);
 
   const getTabMenu = (platform: Platform): StreamingTabMenuKey[] => {
     switch (platform) {
@@ -73,14 +73,14 @@ const LiveTestingMenu = () => {
   return (
     <TabBox>
       <ButtonWrapper>
-        <TabButton isSelected={tab === StreamingTabMenuKey.INFO} onClick={() => setTab(StreamingTabMenuKey.INFO)}>
+        <TabButton isSelected={tab === StreamingTabMenuKey.INFO} onClick={() => updateTab(StreamingTabMenuKey.INFO)}>
           <InfoCircleOutlined />
           &nbsp;General
         </TabButton>
         {tabMenus.includes(StreamingTabMenuKey.INSPECTOR) && (
           <TabButton
             isSelected={tab === StreamingTabMenuKey.INSPECTOR}
-            onClick={() => setTab(StreamingTabMenuKey.INSPECTOR)}
+            onClick={() => updateTab(StreamingTabMenuKey.INSPECTOR)}
           >
             <LuInspect />
             &nbsp;Inspector
@@ -89,14 +89,14 @@ const LiveTestingMenu = () => {
         {tabMenus.includes(StreamingTabMenuKey.PROFILE) && (
           <TabButton
             isSelected={tab === StreamingTabMenuKey.PROFILE}
-            onClick={() => setTab(StreamingTabMenuKey.PROFILE)}
+            onClick={() => updateTab(StreamingTabMenuKey.PROFILE)}
           >
             <AreaChartOutlined />
             &nbsp;Profiler
           </TabButton>
         )}
         {tabMenus.includes(StreamingTabMenuKey.LOGS) && (
-          <TabButton isSelected={tab === StreamingTabMenuKey.LOGS} onClick={() => setTab(StreamingTabMenuKey.LOGS)}>
+          <TabButton isSelected={tab === StreamingTabMenuKey.LOGS} onClick={() => updateTab(StreamingTabMenuKey.LOGS)}>
             <CodeOutlined />
             &nbsp;Logcat
           </TabButton>

diff --git a/projects/console-web-front/src/hooks/streaming/useDeviceStreamingContext.ts b/projects/console-web-front/src/hooks/streaming/useDeviceStreamingContext.ts
@@ -3,7 +3,7 @@ import { DeviceRTCCaller } from '@dogu-private/webrtc';
 import React, { useContext } from 'react';
 
 import { StreamingMode } from '../../types/device';
-import { InspectorType, StreamingError } from '../../types/streaming';
+import { InspectorType, StreamingError, StreamingTabMenuKey } from '../../types/streaming';
 import useDeviceClient from './useDeviceClient';
 import useGamiumClient from './useGamiumClient';
 import useGamiumInspector from './useGamiumInspector';
@@ -17,6 +17,7 @@ export interface StreamingContextValue {
   deviceRTCCaller: DeviceRTCCaller | null;
   peerConnection: RTCPeerConnection | null;
   error: StreamingError | null;
+  tab: StreamingTabMenuKey;
   gamiumService: ReturnType<typeof useGamiumClient> | null;
   deviceService: ReturnType<typeof useDeviceClient> | null;
   isSelf: boolean;
@@ -25,6 +26,7 @@ export interface StreamingContextValue {
   gamiumInspector: ReturnType<typeof useGamiumInspector> | null;
   updateMode: (mode: StreamingMode) => void;
   updateInspectorType: (type: InspectorType) => void;
+  updateTab: (tab: StreamingTabMenuKey) => void;
   isCloudDevice?: boolean;
   deviceScreenshotBase64: string | null;
   isAdmin: boolean;
@@ -37,6 +39,7 @@ const defaultContextValue: StreamingContextValue = {
   deviceRTCCaller: null,
   peerConnection: null,
   error: null,
+  tab: StreamingTabMenuKey.INFO,
   gamiumService: null,
   deviceService: null,
   device: null,
@@ -46,6 +49,7 @@ const defaultContextValue: StreamingContextValue = {
   gamiumInspector: null,
   updateMode: () => {},
   updateInspectorType: () => {},
+  updateTab: () => {},
   isCloudDevice: undefined,
   deviceScreenshotBase64: null,
   isAdmin: false,