feat: implement Sofie iFrame support

client/components/App.tsx

@@ -22,7 +22,8 @@ class App extends React.Component<IAppProps> {
         console.log('http args : ', window.location.search.includes('settings=0'))
         window.socketIoClient.emit('get-mixerprotocol', 'get selected mixerprotocol')
         window.socketIoClient.emit('get-store', 'update local store');
-        window.socketIoClient.emit('get-settings', 'update local settings');        
+        window.socketIoClient.emit('get-settings', 'update local settings');
+        this.iFrameFocusHandler()
     }
 
     public shouldComponentUpdate(nextProps: IAppProps) {
@@ -32,6 +33,40 @@ class App extends React.Component<IAppProps> {
         )
     }
 
+    sendSofieMessage(type: string, payload?: any | '', replyTo?: string | '') {
+        if (!window.parent) return;
+        window.parent.postMessage({
+            id: Date.now().toString(),
+            replyToId: replyTo,
+            type: type,
+            payload: payload
+        }, "*");
+    }
+
+    iFrameFocusHandler() {
+        this.sendSofieMessage('hello')
+        document.addEventListener('click', (e) => {
+            e.preventDefault()
+            this.sendSofieMessage('focus_in')
+        }, true)
+        window.addEventListener('message', (event) => {
+            try {
+                const message = event.data
+                if (!message || !message.type) return;
+                switch (message.type) {
+                    case 'welcome':
+                        console.log('Hosted by: ' + message.payload);
+                        // finish three-way handshake
+                        this.sendSofieMessage('ack', undefined, message.id);
+                        break;
+
+                }
+            } catch (e) {
+                console.log('Error Sofie API')
+            }
+        })
+    }
+
     render() {
         return (
         <div>