From 87af89416bd556ef3a6172c5982e9915280b9ec4 Mon Sep 17 00:00:00 2001
From: Takeshi NAMAO <namao.takeshi@gmail.com>
Date: Mon, 21 Oct 2024 15:27:13 +0900
Subject: [PATCH] =?UTF-8?q?VideBitrate=20=E3=82=92=E8=87=AA=E7=94=B1?=
 =?UTF-8?q?=E5=85=A5=E5=8A=9B=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DevtoolsPane/VideoBitRateForm.tsx         | 61 ++++++++++++-------
 src/types.ts                                  |  3 +-
 2 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/components/DevtoolsPane/VideoBitRateForm.tsx b/src/components/DevtoolsPane/VideoBitRateForm.tsx
index 2ce0ff96..bbd099c8 100644
--- a/src/components/DevtoolsPane/VideoBitRateForm.tsx
+++ b/src/components/DevtoolsPane/VideoBitRateForm.tsx
@@ -1,10 +1,10 @@
 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'
 
@@ -12,34 +12,53 @@ import { TooltipFormLabel } from './TooltipFormLabel.tsx'
 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>
   )
 }
diff --git a/src/types.ts b/src/types.ts
index a585be43..f117a02a 100644
--- a/src/types.ts
+++ b/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