feat: 雑に singleton で実装 #65
Conversation
| @@ -21,6 +21,7 @@ | |||
| "lucide-react": "^0.378.0", | |||
| "react": "^18.2.0", | |||
| "react-dom": "^18.2.0", | |||
| "reconnecting-websocket": "^4.4.0", | |||
Source/pi/src/App.tsx
Outdated
| ) => void | ||
| } | ||
| } | ||
|
|
||
| const headlessStreamDeck = new HeadlessStreamDeckImpl<unknown>() |
There was a problem hiding this comment.
StreamDeck と外部サーバーとやり取りする部分は connection を複数持てるようにすることで singleton で定義できるようにする
Source/pi/src/App.tsx
Outdated
| useEffect(() => { | ||
| const open = () => { | ||
| console.log('Opened') | ||
| } | ||
| headlessStreamDeck.addEventListener('open', open) | ||
|
|
||
| if (payload?.event === 'inputs') { | ||
| const p: SendToPropertyInspector<SendInputs> = payload as SendToPropertyInspector<SendInputs> | ||
| console.log('inputs', p.payload.inputs) | ||
| setInputs(p.payload.inputs) | ||
| } | ||
| }, | ||
| }, | ||
| const didReceiveSettings = (s: unknown) => { | ||
| console.log('Settings received', s) | ||
| setSettings(s as T) | ||
| } | ||
| headlessStreamDeck.addEventListener( | ||
| 'didReceiveGlobalSettings', | ||
| didReceiveSettings, | ||
| ) | ||
|
|
||
| // TODO: 型をもっと扱いやすく厳密にする | ||
| // Actionごとにカスタムしたくなると思うので、もっと冗長性を持たせる | ||
| // 例えばSettings, コールバック関数を外部から設定できるようにして、StreamDeckとの接続のみを担うコンポーネントを切り出す | ||
| // actionInfo.action で描画先を変更するのではなく、もっと細かく分ける | ||
| )) | ||
| const sendToPropertyInspector = (payload: unknown) => { | ||
| if (!payload) return | ||
| if (typeof payload !== 'object') return | ||
| if (!('event' in payload)) return | ||
|
|
||
| // TODO: Apply colours | ||
| // addDynamicStyles(inInfo.colors); | ||
| } | ||
| if (payload?.event === 'inputs') { | ||
| const p: SendToPropertyInspector<SendInputs> | ||
| = payload as SendToPropertyInspector<SendInputs> | ||
| console.log('inputs', p.payload.inputs) | ||
| setInputs(p.payload.inputs) | ||
| } | ||
| } | ||
|
|
||
| headlessStreamDeck.addEventListener( | ||
| 'sendToPropertyInspector', | ||
| sendToPropertyInspector, | ||
| ) | ||
|
|
||
| return () => { | ||
| headlessStreamDeck.removeEventListener('open', open) | ||
| headlessStreamDeck.removeEventListener( | ||
| 'didReceiveGlobalSettings', | ||
| didReceiveSettings, | ||
| ) | ||
| } | ||
| }, []) |
There was a problem hiding this comment.
singleton なので初期化タイミングと情報を読み取るタイミングを分けられる
Source/pi/src/App.tsx
Outdated
| window.connectElgatoStreamDeckSocket = ( | ||
| inPort, | ||
| inUUID, | ||
| inRegisterEvent, | ||
| inInfo, | ||
| inActionInfo, | ||
| ) => { | ||
| headlessStreamDeck.add(inPort, { | ||
| inPropertyInspectorUUID: inUUID, | ||
| inRegisterEvent, | ||
| inInfo, | ||
| inActionInfo, | ||
| }) | ||
| } |
There was a problem hiding this comment.
App.tsx が読み込まれたタイミングで初期化
やってないけど(多分 vite だったら難読化, global 変数の minify は勝手にされないので)
window.connectElgatoStreamDeckSocket だけ切り出して、そのファイルだけ難読化しないという手が使える.....と思う
Source/pi/src/App.tsx
Outdated
| const actionInfos = useSyncExternalStore( | ||
| useCallback((onStoreChange) => { | ||
| onStoreChange() | ||
| headlessStreamDeck.addEventListener('open', onStoreChange) | ||
| return () => { | ||
| headlessStreamDeck.removeEventListener('open', onStoreChange) | ||
| } | ||
| }, []), | ||
| useCallback(() => headlessStreamDeck.getInfos(), []), | ||
| () => [], | ||
| ) |
There was a problem hiding this comment.
StreamDeck class を触接触っても connection 情報が得られないので open イベントごとに actionInfo をリストで取り直す
| import { Connection, ConnectParameters, HeadlessStreamDeck, StreamDeckEventMap } from './types' | ||
| import ReconnectingWebSocket from 'reconnecting-websocket' | ||
|
|
||
| export class HeadlessStreamDeckImpl<T> implements HeadlessStreamDeck<T> { |
There was a problem hiding this comment.
コネクションをため込んでまとめてイベント publish したり受け取ったりするクラス。
|
@naporin0624 アザス！！！！！！！ 来週中に確認します！かならず！！！！！！！ |
@FlowingSPDG 全然大丈夫！完璧にしたくてやってるだけ！実機持ってないから動作確認はできないので test で担保してるけど動かなくなってたらごめん |
| setSettings(s as T) | ||
| } | ||
| headlessStreamDeck.addEventListener( | ||
| 'didReceiveGlobalSettings', |
There was a problem hiding this comment.
|
@naporin0624 めちゃくちゃ放置して申し訳ない～～！！！ |
@FlowingSPDG そうす！ |
|
@naporin0624 あざすあざす！！ |
No description provided.