finish 03-11

Author: syf20020816

app/rooms/[roomName]/PageClientImpl.tsx

@@ -136,7 +136,6 @@ function VideoConferenceComponent(props: {
   }, [props.userChoices, props.options.hq, props.options.codec]);
 
   const room = React.useMemo(() => new Room(roomOptions), []);
-  const device_settings = use_add_user_device(props.userChoices.username);
   React.useEffect(() => {
     if (e2eeEnabled) {
       keyProvider

app/rooms/[roomName]/pre_join/pre_join.tsx

@@ -18,7 +18,7 @@ import { Button, Input, Slider, Switch } from 'antd';
 import { DevicesSelector } from '@/app/api/devices/device_selector';
 import { count_video_blur, default_device, MediaDeviceKind } from '@/lib/std/device';
 import { ScreenPreview } from '@/app/api/devices/screen_preview';
-import { use_add_user_device, use_stored_set} from '@/lib/hooks/store/user_choices';
+import { use_add_user_device, use_stored_set } from '@/lib/hooks/store/user_choices';
 
 /**
  * The PreJoin Page component should use before user enter into the room.
@@ -50,11 +50,12 @@ export function PreJoin({
   });
 
   const [user_choices, set_user_choices] = useState(initialUserChoices);
-  const [device_settings, set_device_settings] = useState(use_add_user_device(user_choices.username));
+  const [device_settings, set_device_settings] = useState(
+    use_add_user_device(user_choices.username),
+  );
   // [enables] ---------------------------------------------------------------------
-  const [audio_enabled, set_audio_enabled] = useState(device_settings.microphone.enabled);
-  const [video_enabled, set_video_enabled] = useState(device_settings.video.enabled);
-  const [screen_enabled, set_screen_enabled] = useState(device_settings.screen.enabled);
+  const [audio_enabled, set_audio_enabled] = useState(true);
+  const [video_enabled, set_video_enabled] = useState(true);
   const [audio_device_id, set_audio_device_id] = useState(user_choices.audioDeviceId);
   const [video_device_id, set_video_device_id] = useState(user_choices.videoDeviceId);
   const [username, set_username] = useState(user_choices.username);
@@ -146,7 +147,7 @@ export function PreJoin({
             blur: video_blur,
           },
           screen: {
-            enabled: screen_enabled,
+            enabled: false,
             blur: screen_blur,
           },
         },
@@ -184,9 +185,8 @@ export function PreJoin({
     set_screen_blur(0.15);
     set_volume_self(100);
     set_volume_others(20);
-    set_audio_enabled(false);
-    set_video_enabled(false);
-    set_screen_enabled(false);
+    set_audio_enabled(true);
+    set_video_enabled(true);
     set_username('');
   };
   // [play] ------------------------------------------------------------------------
@@ -246,7 +246,11 @@ export function PreJoin({
                 </div>
 
                 <Slider
-                  defaultValue={volume_self}
+                  min={0.0}
+                  max={100.0}
+                  step={1}
+                  value={volume_self}
+                  defaultValue={100}
                   className={styles.common_space}
                   onChange={(e) => set_volume_self(e)}
                 />
@@ -265,7 +269,11 @@ export function PreJoin({
                   </Button>
                 </div>
                 <Slider
-                  defaultValue={volume_others}
+                  min={0.0}
+                  max={100.0}
+                  step={1}
+                  value={volume_others}
+                  defaultValue={20}
                   className={styles.common_space}
                   onChange={(e) => set_volume_others(e)}
                 />
@@ -321,36 +329,6 @@ export function PreJoin({
                 ></DevicesSelector>
               </div>
             </div>
-            <div>
-              <header>
-                <div className={styles['pre_join_main_device_tool']}>
-                  <SvgResource type="screen" />
-                  <span>Screen share</span>
-                </div>
-                <Switch
-                  defaultChecked={screen_enabled}
-                  className={styles.remove_bg}
-                  value={screen_enabled}
-                  onChange={(e) => {
-                    set_screen_enabled(e);
-                  }}
-                ></Switch>
-              </header>
-              <div className={styles.adjust_settings}>
-                <span>Screen Blur:</span>
-                <Slider
-                  defaultValue={0.15}
-                  className={`${styles.common_space} ${styles.slider}`}
-                  value={screen_blur}
-                  min={0}
-                  max={1}
-                  step={0.05}
-                  onChange={(e) => {
-                    set_screen_blur(e);
-                  }}
-                />
-              </div>
-            </div>
             <div>
               <header>
                 <div className={styles['pre_join_main_device_tool']}>
@@ -393,18 +371,6 @@ export function PreJoin({
                 </div>
               )}
             </div>
-            <div className={styles['pre_join_main_device_right_video']}>
-              <ScreenPreview
-                enabled={screen_enabled}
-                blur={count_video_blur(screen_blur, {
-                  height: video_el.current?.height || 360,
-                  width: video_el.current?.width || 320,
-                })}
-                onClose={() => {
-                  set_screen_enabled(false);
-                }}
-              ></ScreenPreview>
-            </div>
           </div>
         </div>
         <div className={styles['pre_join_main_info']}></div>

app/rooms/[roomName]/room/controls.tsx

@@ -16,12 +16,12 @@ import { VideoToggle } from './controls/video_toggle';
 import { ScreenToggle } from './controls/screen_toggle';
 import { ConnectionState, Room, Track } from 'livekit-client';
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { publisher, subject_map, SubjectKey } from '@/lib/std/chanel';
+import { publisher, subject_map, SubjectKey, subscriber } from '@/lib/std/chanel';
 import { SettingToggle } from './controls/setting_toggle';
-import { Button, Drawer, message, Slider } from 'antd';
+import { Button, Drawer, message, Modal, Slider } from 'antd';
 import { SvgResource } from '../pre_join/resources';
 import { use_add_user_device, use_stored_set } from '@/lib/hooks/store/user_choices';
-import { AddDeviceInfo, useVideoBlur } from '@/lib/std/device';
+import { AddDeviceInfo, State, useVideoBlur } from '@/lib/std/device';
 
 export function Controls({
   room,
@@ -51,7 +51,9 @@ export function Controls({
   const [volume, set_volume] = useState(add_derivce_settings.microphone.other);
   const [video_blur, set_video_blur] = useState(add_derivce_settings.video.blur);
   const [screen_blur, set_screen_blur] = useState(add_derivce_settings.screen.blur);
-
+  const [screen_bg_color, set_screen_bg_color] = useState(screen_enabled ? '#1E1E1E' : '#22CCEE');
+  const [record, set_record] = useState(add_derivce_settings);
+  const [saved, set_saved] = useState(false);
   const visibleControls = { leave: true, ...controls };
   const localPermissions = useLocalParticipantPermissions();
 
@@ -124,7 +126,7 @@ export function Controls({
     [saveAudioInputEnabled],
   );
 
-  const save_changes = () => {
+  const save_changes = (save: boolean) => {
     let username = userChoices.username;
     let data = Object.assign(add_derivce_settings, {
       microphone: {
@@ -138,20 +140,87 @@ export function Controls({
       },
     }) as AddDeviceInfo;
     use_stored_set(username, { device: data });
-    set_setting_visible(false);
+
     // 发布事件
     publisher(SubjectKey.Setting, data);
+    set_saved(save);
+    if (save) {
+      set_setting_visible(false);
+      set_record(data);
+      messageApi.success('Changes saved successfully');
+    }
+  };
 
-    messageApi.success('Changes saved successfully');
+  const close_setting = () => {
+    // 当saved为false时 ,将record重新赋值给add_derivce_settings
+    if (!saved) {
+      set_volume(record.microphone.other);
+      set_video_blur(record.video.blur);
+      set_screen_blur(record.screen.blur);
+      let username = userChoices.username;
+      use_stored_set(username, { device: record });
+    }
   };
 
+  const screen_handle_state = useCallback((state: State) => {
+    if (state === State.Start) {
+      set_screen_enabled(true);
+      set_screen_bg_color('#22CCEE');
+    } else {
+      set_screen_enabled(false);
+
+      set_screen_bg_color('#1E1E1E');
+    }
+  }, []);
+
+  // const audio_handle_state = useCallback((state: State) => {
+  //   console.error('audio_handle_state', state);
+  //   set_audio_enabled(state === State.Start);
+  // }, []);
+
+  // const video_handle_state = useCallback((state: State) => {
+  //   set_video_enabled(state === State.Start);
+  // }, []);
+
+  useEffect(() => {
+    const screen_sub = subscriber(SubjectKey.ScreenState, screen_handle_state);
+    // const audio_sub = subscriber(SubjectKey.AudioState, audio_handle_state);
+    // const video_sub = subscriber(SubjectKey.VideoState, video_handle_state);
+
+    return () => {
+      screen_sub?.unsubscribe();
+      // audio_sub?.unsubscribe();
+      // video_sub?.unsubscribe();
+    };
+  }, [screen_handle_state]);
+
+  // [当整个room加载好之后，询问用户是否需要开启屏幕分享] -------------------------------------------------------------------
+  const { confirm } = Modal;
+
+  useEffect(() => {
+    if (room?.state === ConnectionState.Connected) {
+      confirm({
+        title: 'Do you want to share your screen?',
+        content: 'You can share your screen with others in the room.',
+        onOk() {
+          screen_on_clicked(false);
+        },
+        onCancel() {},
+      });
+    }
+  }, [room?.state]);
+
   return (
     <div className={`${styles.controls} lk-control-bar`}>
       {contextHolder}
       <div className={styles.controls_left}>
         <AudioToggle enabled={audio_enabled} onClicked={audio_on_clicked}></AudioToggle>
         <VideoToggle enabled={video_enabled} onClicked={video_on_clicked}></VideoToggle>
-        <ScreenToggle enabled={screen_enabled} onClicked={screen_on_clicked}></ScreenToggle>
+        <ScreenToggle
+          enabled={screen_enabled}
+          onClicked={screen_on_clicked}
+          bg_color={screen_bg_color}
+        ></ScreenToggle>
         <SettingToggle enabled={setting_visible} onClicked={setting_on_clicked}></SettingToggle>
         {visibleControls.chat && (
           <ChatToggle>
@@ -169,6 +238,7 @@ export function Controls({
         title="Settings"
         placement="right"
         closable={false}
+        onClose={close_setting}
         width={'40%'}
         open={setting_visible}
         extra={setting_drawer_header({
@@ -181,7 +251,10 @@ export function Controls({
             <Slider
               defaultValue={volume}
               className={styles.common_space}
-              onChange={(e) => set_volume(e)}
+              onChange={(e) => {
+                set_volume(e);
+                save_changes(false);
+              }}
             />
           </div>
 
@@ -197,6 +270,7 @@ export function Controls({
               onChange={(e) => {
                 set_video_blur(e);
                 setVideoBlur(e);
+                save_changes(false);
               }}
             />
           </div>
@@ -212,21 +286,12 @@ export function Controls({
               onChange={(e) => {
                 set_screen_blur(e);
                 setVideoBlur(e);
+                save_changes(false);
               }}
             />
           </div>
-          <div className={styles.setting_box} style={{overflow: 'hidden'}}> 
-            <div>Blur Test:{Math.round(blurValue)}px</div>
-            <img
-              ref={video_track_ref}
-              src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/blur_test.png`}
-              height="220"
-              style={{ marginBottom: '16px', filter: `blur(${blurValue}px)`, overflow: 'hidden' }}
-            />
-          </div>
-
           <div className={styles.setting_container_footer}>
-            <Button type="primary" onClick={save_changes}>
+            <Button type="primary" onClick={() => save_changes(true)}>
               Save Changes
             </Button>
           </div>

app/rooms/[roomName]/room/controls/audio_toggle.tsx

@@ -84,7 +84,7 @@ export function AudioToggle({ enabled, onClicked, showText = true }: ToggleProps
                   maxWidth: '100px',
                 }}
               >
-                {active_audio}
+                Microphone
               </div>
               <SvgResource type="down" svgSize={16}></SvgResource>
             </span>

app/rooms/[roomName]/room/controls/screen_toggle.tsx

@@ -1,22 +1,35 @@
 import { Button } from 'antd';
 import { SvgResource } from '../../pre_join/resources';
-import { ToggleProps } from '@/lib/std/device';
+import { State, ToggleProps } from '@/lib/std/device';
+import { useCallback, useEffect, useState } from 'react';
+
+export function ScreenToggle({ enabled, onClicked, showText = true, bg_color }: ToggleProps & {bg_color: string}) {
 
-export function ScreenToggle({ enabled, onClicked, showText = true }: ToggleProps) {
   const on_clicked = () => {
     onClicked(enabled);
   };
 
   return (
     <>
       {showText ? (
-        <Button variant="solid" color="default" size="large" onClick={on_clicked} style={{backgroundColor: '#1E1E1E', height : '44px', borderRadius: '8px'}}>
+        <Button
+          variant="solid"
+          color="default"
+          size="large"
+          onClick={on_clicked}
+          style={{ backgroundColor: bg_color, height: '44px', borderRadius: '8px' }}
+        >
           {enabled ? (
-            <SvgResource type="screen" svgSize={16}></SvgResource>
+            <div style={{ display: 'inline-flex', alignItems: 'center' }}>
+              <SvgResource type="screen_close" svgSize={16}></SvgResource>
+              <div style={{ marginLeft: '12px' }}>Stop screen share</div>
+            </div>
           ) : (
-            <SvgResource type="screen_close" svgSize={16}></SvgResource>
+            <div style={{ display: 'inline-flex', alignItems: 'center' }}>
+              <SvgResource type="screen" svgSize={16}></SvgResource>
+              <div style={{ marginLeft: '12px' }}>Share screen</div>
+            </div>
           )}
-          Share screen
         </Button>
       ) : (
         <Button shape="circle" variant="solid" color="default" size="large" onClick={on_clicked}>

app/rooms/[roomName]/room/controls/video_toggle.tsx

@@ -85,7 +85,7 @@ export function VideoToggle({ enabled, onClicked, showText = true }: ToggleProps
                   maxWidth: '100px',
                 }}
               >
-                {active_video}
+                Camera
               </div>
               <SvgResource type="down" svgSize={16}></SvgResource>
             </span>