JSON 入力欄のコンポーネント化と JSON 入力欄への横展開

[tnamao]

変更履歴

• [CHANGE] JSON を入力する欄に機能を追加する
  • 対象の項目は以下
    • metadata
    • signalingNotifyMetadata
    • forwardingFilters
    • forwardingFilter
    • dataChannels
    • videoVP9Params
    • videoAV1Params
    • videoH264Params
    • videoH265Params
  • JSON の整形を行う pretty format ボタンを追加する
    • 入力値が JSON として正しい時に有効になる
  • 入力内容が JSON として正しくない場合に入力欄の枠線を赤くする
  • @tnamao

---

This pull request introduces a new JSONInputField component and integrates it into various forms to enhance JSON input handling. The changes include replacing existing text areas with the new component and updating the CHANGES.md file to reflect these modifications.

Enhancements to JSON Input Handling:

• New Component Introduction:

  • src/components/DevtoolsPane/JSONInputField.tsx: Added a new JSONInputField component to handle JSON input with validation and formatting capabilities.

• Integration of JSONInputField:

  • src/components/DevtoolsPane/DataChannelsForm.tsx: Replaced the existing text area with JSONInputField for the dataChannels input. [1] [2] [3]
  • src/components/DevtoolsPane/ForwardingFilterForm.tsx: Integrated JSONInputField for the forwardingFilter input. [1] [2] [3]
  • src/components/DevtoolsPane/ForwardingFiltersForm.tsx: Applied JSONInputField for the forwardingFilters input. [1] [2] [3]
  • src/components/DevtoolsPane/MetadataForm.tsx: Updated to use JSONInputField for the metadata input. [1] [2] [3]
  • src/components/DevtoolsPane/SignalingNotifyMetadataForm.tsx: Switched to JSONInputField for the signalingNotifyMetadata input. [1] [2] [3]
  • src/components/DevtoolsPane/VideoAV1ParamsForm.tsx: Replaced the text area with JSONInputField for the videoAV1Params input. [1] [2] [3]
  • src/components/DevtoolsPane/VideoH264ParamsForm.tsx: Implemented JSONInputField for the videoH264Params input. [1] [2] [3]

Documentation Update:

• CHANGES.md:
  • Updated to reflect the addition of JSON input handling features and the introduction of the pretty format button.

[miosakuma]

一通り項目を入力してみて適用されていることを確認しました。
metadata に abc などの値を入れると赤枠になりますが、赤枠の場合もそのまま送信できるので問題ないと考えました。

赤枠はエラーのように見えるので Sora が受け入れる正しい値で出るのはおかしい、という意見もあるかもしれません。

[torikizi]

サクマさんの懸念点を考えるなら、そもそも abc だけのような値が許容されている項目であれば、赤枠の判定そのものが不要ではないでしょうか。
pretty format してくれる便利ボタンだけで良い気がします。

[voluntas]

赤枠がもう少しだけ太ければあとは LGTM です。邪魔にならない仕様でとても良いと思います。

[cloudflare-workers-and-pages]

Deploying sora-devtools with    Cloudflare Pages

Latest commit:	f02ed3d
Status:	⚡️  Build in progress...

View logs

[tnamao]

マージします