Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-05-06 17:57:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

added theme event

Browse Source
This commit is contained in:
PhilReact 2025-04-19 22:22:13 +03:00 committed by Nicola Benaglia
parent 2b3d2e2326
commit 1f59205f5e
1 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Apps/AppViewer.tsx
View File

@ -1,12 +1,12 @@
import React, { useContext, useEffect, useMemo, useState } from "react"; import React, { useContext, useEffect, useMemo, useState } from "react";
import { Avatar, Box, } from "@mui/material"; import { Box, } from "@mui/material";
import { Add } from "@mui/icons-material";
import { MyContext, getBaseApiReact, isMobile } from "../../App"; import { MyContext, getBaseApiReact, isMobile } from "../../App";
import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from "../../utils/events"; import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events";
import { useFrame } from "react-frame-component"; import { useFrame } from "react-frame-component";
import { useQortalMessageListener } from "./useQortalMessageListener"; import { useQortalMessageListener } from "./useQortalMessageListener";
import { useThemeContext } from "../Theme/ThemeContext";
@ -14,10 +14,10 @@ import { useQortalMessageListener } from "./useQortalMessageListener";
export const AppViewer = React.forwardRef(({ app , hide, isDevMode, skipAuth}, iframeRef) => { export const AppViewer = React.forwardRef(({ app , hide, isDevMode, skipAuth}, iframeRef) => {
const { rootHeight } = useContext(MyContext); const { rootHeight } = useContext(MyContext);
// const iframeRef = useRef(null); // const iframeRef = useRef(null);
const { document, window: frameWindow } = useFrame(); const { window: frameWindow } = useFrame();
const {path, history, changeCurrentIndex, resetHistory} = useQortalMessageListener(frameWindow, iframeRef, app?.tabId, isDevMode, app?.name, app?.service, skipAuth) const {path, history, changeCurrentIndex, resetHistory} = useQortalMessageListener(frameWindow, iframeRef, app?.tabId, isDevMode, app?.name, app?.service, skipAuth)
const [url, setUrl] = useState('') const [url, setUrl] = useState('')
const { themeMode } = useThemeContext();
useEffect(()=> { useEffect(()=> {
if(app?.isPreview) return if(app?.isPreview) return
@ -30,7 +30,7 @@ export const AppViewer = React.forwardRef(({ app , hide, isDevMode, skipAuth}, i
hasQueryParam = true hasQueryParam = true
} }
setUrl(`${getBaseApiReact()}/render/${app?.service}/${app?.name}${app?.path != null ? `/${app?.path}` : ''}${hasQueryParam ? "&": "?" }theme=dark&identifier=${(app?.identifier != null && app?.identifier != 'null') ? app?.identifier : ''}`) setUrl(`${getBaseApiReact()}/render/${app?.service}/${app?.name}${app?.path != null ? `/${app?.path}` : ''}${hasQueryParam ? "&": "?" }theme=${themeMode}&identifier=${(app?.identifier != null && app?.identifier != 'null') ? app?.identifier : ''}`)
}, [app?.service, app?.name, app?.identifier, app?.path, app?.isPreview]) }, [app?.service, app?.name, app?.identifier, app?.path, app?.isPreview])
useEffect(()=> { useEffect(()=> {
@ -55,7 +55,7 @@ export const AppViewer = React.forwardRef(({ app , hide, isDevMode, skipAuth}, i
return return
} }
const constructUrl = `${getBaseApiReact()}/render/${app?.service}/${app?.name}${path != null ? path : ''}?theme=dark&identifier=${app?.identifier != null ? app?.identifier : ''}&time=${new Date().getMilliseconds()}` const constructUrl = `${getBaseApiReact()}/render/${app?.service}/${app?.name}${path != null ? path : ''}?theme=${themeMode}&identifier=${app?.identifier != null ? app?.identifier : ''}&time=${new Date().getMilliseconds()}`
setUrl(constructUrl) setUrl(constructUrl)
} }
}; };
@ -68,6 +68,15 @@ export const AppViewer = React.forwardRef(({ app , hide, isDevMode, skipAuth}, i
}; };
}, [app, path, isDevMode]); }, [app, path, isDevMode]);
useEffect(()=> {
if(!iframeRef?.current) return
const targetOrigin = iframeRef.current ? new URL(iframeRef.current.src).origin : "*";
// Send the navigation command after setting up the listener and timeout
iframeRef.current.contentWindow.postMessage(
{ action: 'THEME_CHANGED', theme: themeMode, requestedHandler: 'UI' }, targetOrigin
);
}, [themeMode])
const removeTrailingSlash = (str) => str.replace(/\/$/, ''); const removeTrailingSlash = (str) => str.replace(/\/$/, '');
const copyLinkFunc = (e) => { const copyLinkFunc = (e) => {
const {tabId} = e.detail const {tabId} = e.detail
@ -139,10 +148,10 @@ export const AppViewer = React.forwardRef(({ app , hide, isDevMode, skipAuth}, i
await navigationPromise; await navigationPromise;
} catch (error) { } catch (error) {
if(isDevMode){ if(isDevMode){
setUrl(`${url}${previousPath != null ? previousPath : ''}?theme=dark&time=${new Date().getMilliseconds()}&isManualNavigation=false`) setUrl(`${url}${previousPath != null ? previousPath : ''}?theme=${themeMode}&time=${new Date().getMilliseconds()}&isManualNavigation=false`)
return return
} }
setUrl(`${getBaseApiReact()}/render/${app?.service}/${app?.name}${previousPath != null ? previousPath : ''}?theme=dark&identifier=${(app?.identifier != null && app?.identifier != 'null') ? app?.identifier : ''}&time=${new Date().getMilliseconds()}&isManualNavigation=false`) setUrl(`${getBaseApiReact()}/render/${app?.service}/${app?.name}${previousPath != null ? previousPath : ''}?theme=${themeMode}&identifier=${(app?.identifier != null && app?.identifier != 'null') ? app?.identifier : ''}&time=${new Date().getMilliseconds()}&isManualNavigation=false`)
// iframeRef.current.contentWindow.location.href = previousPath; // Fallback URL update // iframeRef.current.contentWindow.location.href = previousPath; // Fallback URL update
} }
} else { } else {