diff --git a/AppExamples/discord/discordweb/src/App.tsx b/AppExamples/discord/discordweb/src/App.tsx index 6ccae43..73fa8b3 100644 --- a/AppExamples/discord/discordweb/src/App.tsx +++ b/AppExamples/discord/discordweb/src/App.tsx @@ -1,12 +1,9 @@ -import IframeComponent from './IframeComponent'; import { Call } from './components/Call' function App() { return (
- -
); } diff --git a/AppExamples/discord/discordweb/src/IframeComponent.tsx b/AppExamples/discord/discordweb/src/IframeComponent.tsx deleted file mode 100644 index f7a8b6d..0000000 --- a/AppExamples/discord/discordweb/src/IframeComponent.tsx +++ /dev/null @@ -1,80 +0,0 @@ -// src/IframeComponent.tsx -import React, { useEffect } from 'react'; -import discordStore, { ACTION_TYPES } from './stores/discordStore'; - -interface IframeComponentProps { - children: React.ReactNode; -} - -const IframeComponent: React.FC = ({ children }) => { - useEffect(() => { - const handleMessage = (event: MessageEvent) => { - // Return if the message is not from the deskthing - if (event.data.source != 'deskthing') return - - // Debugging - console.log('Received message from parent:', event); - - discordStore.handleDiscordData(event.data.data); - }; - - - const exampleUser ={ - avatar: "a_1d1d2950fdfaa97bdbb6044ce6c306bd", - bot:false, - profile: 'https://cdn.discordapp.com/avatars/395965311687327761/0ee510731bf0b755aa6aa127fcff8f0a.webp?size=80', - discriminator:"0", - flags:4194592, - global_name:"Riprod", - id:"276531165878288385", - premium_type:2, - username:"riprod" - } - const exampleUser2 ={ - avatar: "a_1d1d2950fdfaa97bdbb6044ce6c306bd", - bot:false, - profile: 'https://cdn.discordapp.com/avatars/395965311687327761/0ee510731bf0b755aa6aa127fcff8f0a.webp?size=80', - discriminator:"0", - flags:4194592, - global_name:"Riprod", - id:"429080671542181888", - premium_type:2, - username:"riprod" - } - const exampleUser3 ={ - avatar: "a_1d1d2950fdfaa97bdbb6044ce6c306bd", - bot:false, - profile: 'https://cdn.discordapp.com/avatars/395965311687327761/0ee510731bf0b755aa6aa127fcff8f0a.webp?size=80', - discriminator:"0", - flags:4194592, - global_name:"Riprod", - id:"825555063014555651", - premium_type:2, - username:"riprod" - } - - discordStore.handleDiscordData({user: exampleUser,action: ACTION_TYPES.UPDATE}); - discordStore.handleDiscordData({user: exampleUser2,action: ACTION_TYPES.UPDATE}); - discordStore.handleDiscordData({user: exampleUser3,action: ACTION_TYPES.UPDATE}); - window.addEventListener('message', handleMessage); - - return () => { - window.removeEventListener('message', handleMessage); - }; - }, []); - - const sendMessageToParent = () => { - window.parent.postMessage( - { type: 'IFRAME_ACTION', payload: 'Some data from iframe' }, - '*' - ); // Use a specific origin if possible for security - }; - - return ( -
- {children} -
- ); -}; - -export default IframeComponent; diff --git a/AppExamples/discord/discordweb/src/components/Call.tsx b/AppExamples/discord/discordweb/src/components/Call.tsx index 4473372..3e976cd 100644 --- a/AppExamples/discord/discordweb/src/components/Call.tsx +++ b/AppExamples/discord/discordweb/src/components/Call.tsx @@ -1,3 +1,4 @@ +import messageStore from '../stores/messageStore' import Controls from './Controls' import Profile from './Profile' import discordStore, { userData } from '../stores/discordStore' @@ -7,6 +8,7 @@ export const Call = () => { const [callData, setCallData] = useState([]) useEffect(() => { + messageStore.sendMessageToParent('server', 'message', 'message', 'Helloooooo') const handleCallDataUpdate = (data: userData[]) => { setCallData(data) console.log('Callback data',data) diff --git a/AppExamples/discord/discordweb/src/stores/messageStore.ts b/AppExamples/discord/discordweb/src/stores/messageStore.ts index 176695f..caa5fc6 100644 --- a/AppExamples/discord/discordweb/src/stores/messageStore.ts +++ b/AppExamples/discord/discordweb/src/stores/messageStore.ts @@ -7,6 +7,7 @@ class MessageStore { constructor() { this.initialize(); + this.sendMessageToParent('server', 'message', undefined, 'Hello from the discord app!') } private initialize() { @@ -75,9 +76,15 @@ class MessageStore { this.listeners = this.listeners.filter(listener => listener !== callback); } - public sendMessageToParent() { + public sendMessageToParent(app?: string, request?: string, type?: string, data?: any) { + const payload = { + app: app || 'discord', + type: type || 'message', + request: request || null, + data: data || null + }; window.parent.postMessage( - { type: 'IFRAME_ACTION', payload: 'Some data from iframe' }, + { type: 'IFRAME_ACTION', payload: payload }, '*' // Use a specific origin if possible for security ); } diff --git a/DeskThing/src/views/web/index.tsx b/DeskThing/src/views/web/index.tsx index c74f939..4199a9e 100644 --- a/DeskThing/src/views/web/index.tsx +++ b/DeskThing/src/views/web/index.tsx @@ -20,14 +20,24 @@ const WebView: React.FC = ({ currentView }) => { if (event.origin != `http://${ip}:${port}`) return console.log('Received message from iframe:', event) - }; + if (socket.is_ready()) { + const payload = event.data.payload + const data = { + app: payload.app || currentView, + type: payload.type || null, + request: payload.request || null, + data: payload.data || null, + }; + socket.post(data); + } + } window.addEventListener('message', handleMessage); return () => { window.removeEventListener('message', handleMessage); }; - }, []); + }, [currentView, ip, port, socket]); const sendMessageToIframe = (data: any) => { if (iframeRef.current && iframeRef.current.contentWindow) { @@ -52,6 +62,7 @@ const WebView: React.FC = ({ currentView }) => { const handleTouchStart = () => { setSwipeVisible(true) + sendMessageToIframe({ type: 'message', data: 'hello' }) } const handleTouchEnd = () => { diff --git a/DeskThingServer/src/renderer/src/components/Dev/Apps.tsx b/DeskThingServer/src/renderer/src/components/Dev/Apps.tsx index 7d533da..83e5c38 100644 --- a/DeskThingServer/src/renderer/src/components/Dev/Apps.tsx +++ b/DeskThingServer/src/renderer/src/components/Dev/Apps.tsx @@ -3,6 +3,7 @@ import { useAppStore, App } from '../../store/appStore' import { IconX, IconPause, IconPlay, IconDetails, IconPulsing } from '../icons' import DisplayAppData from '../Overlays/DisplayAppData' import RequestStoreInstance, { Request } from '../../store/requestStore' +import AppRequestOverlay from '../Overlays/AppRequest' export type View = 'apps' | 'local' | 'web' @@ -13,6 +14,8 @@ const Apps = (): JSX.Element => { const [enabled, setEnabled] = useState(false) const [appIndex, setAppIndex] = useState(-1) const [appsWithActiveRequests, setAppsWithActiveRequests] = useState([]) + const [currentRequest, setCurrentRequest] = useState(null) + const [displayRequest, setDisplayRequest] = useState(false) const [path, setPath] = useState('') const handleAddAndRunApp = (appName: string): void => { @@ -63,12 +66,23 @@ const Apps = (): JSX.Element => { }, []) const handleRequestTrigger = (appName: string): void => { - RequestStoreInstance.triggerRequestDisplay(appName) + const request = RequestStoreInstance.getRequestByAppName(appName) + if (request) { + setCurrentRequest(request) + setDisplayRequest(true) + } } return (
+ {displayRequest && currentRequest && app && ( + setDisplayRequest(false)} + /> + )} {enabled && }