Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-05-15 22:26:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #44 from Qortal/feature/pass-language-qapps

Browse Source 
added event for UI language to qapp
This commit is contained in:
Phillip 2025-05-11 00:32:34 +03:00 committed by GitHub
commit 976869abcf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 34 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@ 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'; import { useThemeContext } from '../Theme/ThemeContext';
import { useTranslation } from 'react-i18next';
export const AppViewer = React.forwardRef( export const AppViewer = React.forwardRef(
({ app, hide, isDevMode, skipAuth }, iframeRef) => { ({ app, hide, isDevMode, skipAuth }, iframeRef) => {
@ -22,11 +23,13 @@ export const AppViewer = React.forwardRef(
); );
const [url, setUrl] = useState(''); const [url, setUrl] = useState('');
const { themeMode } = useThemeContext(); const { themeMode } = useThemeContext();
const { i18n } = useTranslation(['core']);
const currentLang = i18n.language;
useEffect(() => { useEffect(() => {
if (app?.isPreview) return; if (app?.isPreview) return;
if (isDevMode) { if (isDevMode) {
setUrl(app?.url); setUrl(app?.url + `?theme=${themeMode}&lang=${currentLang}`);
return; return;
} }
let hasQueryParam = false; let hasQueryParam = false;
@ -35,14 +38,14 @@ export const AppViewer = React.forwardRef(
} }
setUrl( setUrl(
`${getBaseApiReact()}/render/${app?.service}/${app?.name}${app?.path != null ? `/${app?.path}` : ''}${hasQueryParam ? '&' : '?'}theme=${themeMode}&identifier=${app?.identifier != null && app?.identifier != 'null' ? app?.identifier : ''}` `${getBaseApiReact()}/render/${app?.service}/${app?.name}${app?.path != null ? `/${app?.path}` : ''}${hasQueryParam ? '&' : '?'}theme=${themeMode}&lang=${currentLang}&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(() => {
if (app?.isPreview && app?.url) { if (app?.isPreview && app?.url) {
resetHistory(); resetHistory();
setUrl(app.url); setUrl(app.url + `&theme=${themeMode}&lang=${currentLang}`);
} }
}, [app?.url, app?.isPreview]); }, [app?.url, app?.isPreview]);
const defaultUrl = useMemo(() => { const defaultUrl = useMemo(() => {
@ -55,11 +58,14 @@ export const AppViewer = React.forwardRef(
if (isDevMode) { if (isDevMode) {
resetHistory(); resetHistory();
if (!app?.isPreview || app?.isPrivate) { if (!app?.isPreview || app?.isPrivate) {
setUrl(app?.url + `?time=${Date.now()}`); setUrl(
app?.url +
`?time=${Date.now()}&theme=${themeMode}&lang=${currentLang}`
);
} }
return; return;
} }
const constructUrl = `${getBaseApiReact()}/render/${app?.service}/${app?.name}${path != null ? path : ''}?theme=${themeMode}&identifier=${app?.identifier != null ? app?.identifier : ''}&time=${new Date().getMilliseconds()}`; const constructUrl = `${getBaseApiReact()}/render/${app?.service}/${app?.name}${path != null ? path : ''}?theme=${themeMode}&lang=${currentLang}&identifier=${app?.identifier != null ? app?.identifier : ''}&time=${new Date().getMilliseconds()}`;
setUrl(constructUrl); setUrl(constructUrl);
} }
}; };
@ -70,7 +76,7 @@ export const AppViewer = React.forwardRef(
return () => { return () => {
unsubscribeFromEvent('refreshApp', refreshAppFunc); unsubscribeFromEvent('refreshApp', refreshAppFunc);
}; };
}, [app, path, isDevMode]); }, [app, path, isDevMode, themeMode, currentLang]);
useEffect(() => { useEffect(() => {
const iframe = iframeRef?.current; const iframe = iframeRef?.current;
@ -87,6 +93,25 @@ export const AppViewer = React.forwardRef(
} }
}, [themeMode]); }, [themeMode]);
useEffect(() => {
const iframe = iframeRef?.current;
if (!iframe) return;
try {
const targetOrigin = new URL(iframe.src).origin;
iframe.contentWindow?.postMessage(
{
action: 'LANGUAGE_CHANGED',
language: currentLang,
requestedHandler: 'UI',
},
targetOrigin
);
} catch (err) {
console.error('Failed to send language change to iframe:', err);
}
}, [currentLang]);
const removeTrailingSlash = (str) => str.replace(/\/$/, ''); const removeTrailingSlash = (str) => str.replace(/\/$/, '');
const copyLinkFunc = (e) => { const copyLinkFunc = (e) => {
@ -181,12 +206,12 @@ export const AppViewer = React.forwardRef(
} catch (error) { } catch (error) {
if (isDevMode) { if (isDevMode) {
setUrl( setUrl(
`${url}${previousPath != null ? previousPath : ''}?theme=${themeMode}&time=${new Date().getMilliseconds()}&isManualNavigation=false` `${url}${previousPath != null ? previousPath : ''}?theme=${themeMode}&lang=${currentLang}&time=${new Date().getMilliseconds()}&isManualNavigation=false`
); );
return; return;
} }
setUrl( 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` `${getBaseApiReact()}/render/${app?.service}/${app?.name}${previousPath != null ? previousPath : ''}?theme=${themeMode}&lang=${currentLang}&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
} }
@ -209,7 +234,7 @@ export const AppViewer = React.forwardRef(
navigateBackAppFunc navigateBackAppFunc
); );
}; };
}, [app, history]); }, [app, history, themeMode, currentLang]);
// Function to navigate back in iframe // Function to navigate back in iframe
const navigateForwardInIframe = async () => { const navigateForwardInIframe = async () => {