media access 実行中に mediaType を変更できないようにする

shiguredo · Oct 18, 2023 · d03679f · d03679f
1 parent d7fed26
commit d03679f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/src/components/DevtoolsPane/MediaAccessButton.tsx b/src/components/DevtoolsPane/MediaAccessButton.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { disposeTestMediaAccess, testMediaAccess } from '@/app/actions';
 import { useAppDispatch, useAppSelector } from '@/app/hooks';
+import { isFormDisabled } from '@/utils';
 
 export const MediaAccessButton: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -11,7 +12,9 @@ export const MediaAccessButton: React.FC = () => {
   const disposeMediaAccess = (): void => {
     dispatch(disposeTestMediaAccess());
   };
+  const connectionStatus = useAppSelector((state) => state.soraContents.connectionStatus);
   const localTestMediaStream = useAppSelector((state) => state.localTestMediaStream);
+  const disabled = localTestMediaStream === null && isFormDisabled(connectionStatus);
   return (
     <div className="col-auto mb-1">
       <input
@@ -20,6 +23,7 @@ export const MediaAccessButton: React.FC = () => {
         name="media_access"
         defaultValue={localTestMediaStream === null ? 'media access' : 'dispose'}
         onClick={localTestMediaStream === null ? mediaAccess : disposeMediaAccess}
+        disabled={disabled}
       />
     </div>
   );

diff --git a/src/components/DevtoolsPane/MediaTypeForm.tsx b/src/components/DevtoolsPane/MediaTypeForm.tsx
@@ -4,7 +4,7 @@ import { FormCheck, FormGroup } from 'react-bootstrap';
 import { setMediaType } from '@/app/actions';
 import { useAppDispatch, useAppSelector } from '@/app/hooks';
 import { MEDIA_TYPES } from '@/constants';
-import { checkFormValue, isFormDisabled } from '@/utils';
+import { checkFormValue, isMediaTypeFormDisabled } from '@/utils';
 
 import { TooltipFormLabel } from './TooltipFormLabel';
 
@@ -38,8 +38,9 @@ export const MediaTypeForm: React.FC = () => {
   const enabledMediacaptureRegion =
     typeof window !== 'undefined' && window.CropTarget !== undefined;
   const connectionStatus = useAppSelector((state) => state.soraContents.connectionStatus);
+  const localTestMediaStream = useAppSelector((state) => state.localTestMediaStream);
   const mediaType = useAppSelector((state) => state.mediaType);
-  const disabled = isFormDisabled(connectionStatus);
+  const disabled = isMediaTypeFormDisabled(localTestMediaStream, connectionStatus);
   const dispatch = useAppDispatch();
   const onChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
     if (checkFormValue(event.target.value, MEDIA_TYPES)) {

diff --git a/src/utils.ts b/src/utils.ts
@@ -625,6 +625,13 @@ export function isFormDisabled(
   return connectionStatus === 'connected' || connectionStatus === 'connecting';
 }
 
+export function isMediaTypeFormDisabled(
+  localTestMediaStream: SoraDevtoolsState['localTestMediaStream'],
+  connectionStatus: SoraDevtoolsState['soraContents']['connectionStatus'],
+): boolean {
+  return localTestMediaStream !== null || isFormDisabled(connectionStatus);
+}
+
 // track の設定情報を返す
 type GetMediaStreamTrackProperties = {
   id: MediaStreamTrack['id'];