Merge branch 'develop' of github.com:shiguredo/sora-devtools into fea…

…ture/none-device-on-connect
shiguredo · Nov 29, 2023 · 7c8d0dc · 7c8d0dc
2 parents e18dd66 + 954c8a6
commit 7c8d0dc
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -13,6 +13,11 @@
 
 - [FIX] `audio` `video` がともに無効な状態で Sora への接続時に getUserMedia を呼び出してしまう問題を修正する
   - @tnamao
+- [ADD] `dataChannels` のフォームにテンプレート読み込みボタンを追加する
+  - テキストエリアに挿入されるテンプレートは placeholder の内容と同じ
+  - @tnamao
+- [UPDATE] `signalingUrlCandidates` の placeholder に設定例を追加する
+  - @tnamao
 - [CHANGE] fmt / lint を biome に変更する
   - @voluntas
 - [CHANGE] 録画 API のバージョンを `20231220` に変更する

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">

diff --git a/src/components/DevtoolsPane/SignalingUrlCandidatesForm.tsx b/src/components/DevtoolsPane/SignalingUrlCandidatesForm.tsx
@@ -21,6 +21,11 @@ export const SignalingUrlCandidatesForm: React.FC = () => {
   const onChangeText = (event: React.ChangeEvent<HTMLInputElement>): void => {
     dispatch(setSignalingUrlCandidates(event.target.value.split('\n')))
   }
+  const textareaPlaceholder = `signalingUrlCandidatesを指定
+(例)
+wss://sora0.example.com/signaling
+wss://sora1.example.com/signaling
+`
   return (
     <>
       <Row className="form-row" xs="auto">
@@ -44,7 +49,7 @@ export const SignalingUrlCandidatesForm: React.FC = () => {
               <FormControl
                 className="flex-fill"
                 as="textarea"
-                placeholder="signalingUrlCandidatesを指定"
+                placeholder={textareaPlaceholder}
                 value={signalingUrlCandidates.join('\n')}
                 onChange={onChangeText}
                 rows={5}