VideBitrate を自由入力できるようにする

src/components/DevtoolsPane/VideoBitRateForm.tsx

@@ -1,45 +1,64 @@
 import type React from 'react'
-import { FormGroup, FormSelect } from 'react-bootstrap'
+import { Dropdown, DropdownButton, Form, FormGroup, InputGroup } from 'react-bootstrap'
 
 import { setVideoBitRate } from '@/app/actions'
 import { useAppDispatch, useAppSelector } from '@/app/hooks'
 import { VIDEO_BIT_RATES } from '@/constants'
-import { checkFormValue, isFormDisabled } from '@/utils'
+import { isFormDisabled } from '@/utils'
 
 import { TooltipFormLabel } from './TooltipFormLabel.tsx'
 
 // 15000 を超える場合にサポート外であることを表示するためのカスタム
 const DISPLAY_VIDEO_BIT_RATE: string[] = VIDEO_BIT_RATES.slice()
 DISPLAY_VIDEO_BIT_RATE.splice(VIDEO_BIT_RATES.indexOf('15000') + 1, 0, 'support-message')
 
+const dropdownItemLabel = (value: string) => {
+  if (value === 'support-message') {
+    return '以下はサポート外です'
+  }
+  return value === '' ? '未指定' : value
+}
+
 export const VideoBitRateForm: React.FC = () => {
   const videoBitRate = useAppSelector((state) => state.videoBitRate)
   const connectionStatus = useAppSelector((state) => state.soraContents.connectionStatus)
   const disabled = isFormDisabled(connectionStatus)
   const dispatch = useAppDispatch()
-  const onChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
-    if (checkFormValue(event.target.value, VIDEO_BIT_RATES)) {
-      dispatch(setVideoBitRate(event.target.value))
-    }
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    dispatch(setVideoBitRate(event.target.value))
   }
   return (
     <FormGroup className="form-inline" controlId="videoBitRate">
       <TooltipFormLabel kind="videoBitRate">videoBitRate:</TooltipFormLabel>
-      <FormSelect name="videoBitRate" value={videoBitRate} onChange={onChange} disabled={disabled}>
-        {DISPLAY_VIDEO_BIT_RATE.map((value) => {
-          let text = value
-          if (value === '') {
-            text = '未指定'
-          } else if (value === 'support-message') {
-            text = '以下はサポート外です'
-          }
-          return (
-            <option key={value} value={value} disabled={value === 'support-message'}>
-              {text}
-            </option>
-          )
-        })}
-      </FormSelect>
+      <InputGroup>
+        <Form.Control
+          className="form-video-bit-rate"
+          type="text"
+          value={videoBitRate}
+          onChange={onChange}
+          placeholder="未指定"
+          disabled={disabled}
+        />
+        <DropdownButton
+          variant="outline-secondary form-template-dropdown"
+          title=""
+          align="end"
+          disabled={disabled}
+        >
+          {DISPLAY_VIDEO_BIT_RATE.map((value) => {
+            return (
+              <Dropdown.Item
+                key={value}
+                as="button"
+                onClick={() => dispatch(setVideoBitRate(value))}
+                disabled={value === 'support-message'}
+              >
+                {dropdownItemLabel(value)}
+              </Dropdown.Item>
+            )
+          })}
+        </DropdownButton>
+      </InputGroup>
     </FormGroup>
   )
 }

src/types.ts

@@ -33,7 +33,6 @@ import type {
   SPOTLIGHT,
   SPOTLIGHT_FOCUS_RIDS,
   SPOTLIGHT_NUMBERS,
-  VIDEO_BIT_RATES,
   VIDEO_CODEC_TYPES,
   VIDEO_CONTENT_HINTS,
 } from '@/constants'
@@ -133,7 +132,7 @@ export type SoraDevtoolsState = {
   spotlightFocusRid: (typeof SPOTLIGHT_FOCUS_RIDS)[number]
   spotlightUnfocusRid: (typeof SPOTLIGHT_FOCUS_RIDS)[number]
   video: boolean
-  videoBitRate: (typeof VIDEO_BIT_RATES)[number]
+  videoBitRate: string
   videoCodecType: (typeof VIDEO_CODEC_TYPES)[number]
   videoContentHint: (typeof VIDEO_CONTENT_HINTS)[number]
   videoInput: string