dataChannels にテンプレート読み込みボタンを追加する

shiguredo · Nov 29, 2023 · e874f79 · e874f79
1 parent 93f9d27
commit e874f79
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/src/components/DevtoolsPane/DataChannelsForm.tsx b/src/components/DevtoolsPane/DataChannelsForm.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Col, FormControl, FormGroup, Row } from 'react-bootstrap'
+import { Button, Col, FormControl, FormGroup, Row } from 'react-bootstrap'
 
 import { setDataChannels, setEnabledDataChannels } from '@/app/actions'
 import { useAppDispatch, useAppSelector } from '@/app/hooks'
@@ -13,7 +13,7 @@ export const DataChannelsForm: React.FC = () => {
   const connectionStatus = useAppSelector((state) => state.soraContents.connectionStatus)
   const disabled = isFormDisabled(connectionStatus)
   const dispatch = useAppDispatch()
-  const textareaPlaceholder = `dataChannelsを指定\n(例)\n${JSON.stringify(
+  const exampleJsonString = JSON.stringify(
     [
       {
         label: '#spam',
@@ -26,7 +26,8 @@ export const DataChannelsForm: React.FC = () => {
     ],
     null,
     2,
-  )}`
+  )
+  const textareaPlaceholder = `dataChannelsを指定\n(例)\n${exampleJsonString}`
   const onChangeSwitch = (event: React.ChangeEvent<HTMLInputElement>): void => {
     dispatch(setEnabledDataChannels(event.target.checked))
   }
@@ -48,6 +49,16 @@ export const DataChannelsForm: React.FC = () => {
             </TooltipFormCheck>
           </FormGroup>
         </Col>
+        <Col>
+          <Button
+            type="button"
+            variant="outline-secondary"
+            size="sm"
+            onClick={() => dispatch(setDataChannels(exampleJsonString))}
+          >
+            load template
+          </Button>
+        </Col>
       </Row>
       {enabledDataChannels ? (
         <Row className="form-row">