diff --git a/index.html b/index.html index 2dab011..4745170 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,8 @@ - + + Qortal Extension diff --git a/src/atoms/global.ts b/src/atoms/global.ts index cc1f02f..67d3aa5 100644 --- a/src/atoms/global.ts +++ b/src/atoms/global.ts @@ -56,4 +56,9 @@ export const fullScreenAtom = atom({ export const hasSettingsChangedAtom = atom({ key: 'hasSettingsChangedAtom', default: false, +}); + +export const navigationControllerAtom = atom({ + key: 'navigationControllerAtom', + default: {}, }); \ No newline at end of file diff --git a/src/components/Apps/AppViewer.tsx b/src/components/Apps/AppViewer.tsx index 49955f5..a2a5225 100644 --- a/src/components/Apps/AppViewer.tsx +++ b/src/components/Apps/AppViewer.tsx @@ -1,25 +1,9 @@ -import React, { useContext, useEffect, useMemo, useRef, useState } from "react"; -import { - AppCircle, - AppCircleContainer, - AppCircleLabel, - AppDownloadButton, - AppDownloadButtonText, - AppInfoAppName, - AppInfoSnippetContainer, - AppInfoSnippetLeft, - AppInfoSnippetMiddle, - AppInfoSnippetRight, - AppInfoUserName, - AppsLibraryContainer, - AppsParent, -} from "./Apps-styles"; -import { Avatar, Box, ButtonBase, InputBase } from "@mui/material"; +import React, { useContext, useEffect, useMemo, useState } from "react"; + +import { Avatar, Box, } from "@mui/material"; import { Add } from "@mui/icons-material"; import { MyContext, getBaseApiReact, isMobile } from "../../App"; -import LogoSelected from "../../assets/svgs/LogoSelected.svg"; -import { Spacer } from "../../common/Spacer"; import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from "../../utils/events"; import { useFrame } from "react-frame-component"; import { useQortalMessageListener } from "./useQortalMessageListener"; @@ -27,15 +11,16 @@ import { useQortalMessageListener } from "./useQortalMessageListener"; -export const AppViewer = ({ app }) => { +export const AppViewer = React.forwardRef(({ app , hide}, iframeRef) => { const { rootHeight } = useContext(MyContext); - const iframeRef = useRef(null); - const { document, window } = useFrame(); - const {path} = useQortalMessageListener(window) + // const iframeRef = useRef(null); + const { document, window: frameWindow } = useFrame(); + const {path, history, changeCurrentIndex} = useQortalMessageListener(frameWindow, iframeRef, app?.tabId) const [url, setUrl] = useState('') + console.log('historyreact', history) useEffect(()=> { - setUrl(`${getBaseApiReact()}/render/${app?.service}/${app?.name}${app?.path != null ? app?.path : ''}?theme=dark&identifier=${(app?.identifier != null && app?.identifier != 'null') ? app?.identifier : ''}`) + setUrl(`${getBaseApiReact()}/render/${app?.service}/${app?.name}${app?.path != null ? `/${app?.path}` : ''}?theme=dark&identifier=${(app?.identifier != null && app?.identifier != 'null') ? app?.identifier : ''}`) }, [app?.service, app?.name, app?.identifier, app?.path]) const defaultUrl = useMemo(()=> { return url @@ -59,13 +44,106 @@ export const AppViewer = ({ app }) => { }; }, [app, path]); + // Function to navigate back in iframe + const navigateBackInIframe = async () => { + if (iframeRef.current && iframeRef.current.contentWindow && history?.currentIndex > 0) { + // Calculate the previous index and path + const previousPageIndex = history.currentIndex - 1; + const previousPath = history.customQDNHistoryPaths[previousPageIndex]; + + // Signal non-manual navigation + iframeRef.current.contentWindow.postMessage( + { action: 'PERFORMING_NON_MANUAL' }, '*' + ); + console.log('previousPageIndex', previousPageIndex) + // Update the current index locally + changeCurrentIndex(previousPageIndex); + + // Create a navigation promise with a 200ms timeout + const navigationPromise = new Promise((resolve, reject) => { + function handleNavigationSuccess(event) { + console.log('listeninghandlenav', event) + if (event.data?.action === 'NAVIGATION_SUCCESS' && event.data.path === previousPath) { + frameWindow.removeEventListener('message', handleNavigationSuccess); + resolve(); + } + } + + frameWindow.addEventListener('message', handleNavigationSuccess); + + // Timeout after 200ms if no response + setTimeout(() => { + window.removeEventListener('message', handleNavigationSuccess); + reject(new Error("Navigation timeout")); + }, 200); + + // Send the navigation command after setting up the listener and timeout + iframeRef.current.contentWindow.postMessage( + { action: 'NAVIGATE_TO_PATH', path: previousPath, requestedHandler: 'UI' }, '*' + ); + }); + + // Execute navigation promise and handle timeout fallback + try { + await navigationPromise; + console.log('Navigation succeeded within 200ms.'); + } catch (error) { + iframeRef.current.contentWindow.postMessage( + { action: 'PERFORMING_NON_MANUAL' }, '*' + ); + setUrl(`${getBaseApiReact()}/render/${app?.service}/${app?.name}${app?.previousPath != null ? previousPath : ''}?theme=dark&identifier=${(app?.identifier != null && app?.identifier != 'null') ? app?.identifier : ''}&time=${new Date().getMilliseconds()}&isManualNavigation=false`) + // iframeRef.current.contentWindow.location.href = previousPath; // Fallback URL update + } + } else { + console.log('Iframe not accessible or does not have a content window.'); + } +}; + + const navigateBackAppFunc = (e) => { + + navigateBackInIframe() + }; + + useEffect(() => { + if(!app?.tabId) return + subscribeToEvent(`navigateBackApp-${app?.tabId}`, navigateBackAppFunc); + + return () => { + unsubscribeFromEvent(`navigateBackApp-${app?.tabId}`, navigateBackAppFunc); + }; + }, [app, history]); + + + // Function to navigate back in iframe + const navigateForwardInIframe = async () => { + + + if (iframeRef.current && iframeRef.current.contentWindow) { + console.log('iframeRef.contentWindow', iframeRef.current.contentWindow); + iframeRef.current.contentWindow.postMessage( + { action: 'NAVIGATE_FORWARD'}, + '*' + ); + } else { + console.log('Iframe not accessible or does not have a content window.'); + } +}; + + return ( - + + ); -}; +}); diff --git a/src/components/Apps/AppViewerContainer.tsx b/src/components/Apps/AppViewerContainer.tsx index df748ed..51bc0ff 100644 --- a/src/components/Apps/AppViewerContainer.tsx +++ b/src/components/Apps/AppViewerContainer.tsx @@ -1,26 +1,24 @@ -import React, { useContext, useEffect, useRef } from 'react' -import { AppViewer } from './AppViewer' +import React, { useContext, } from 'react'; +import { AppViewer } from './AppViewer'; import Frame from 'react-frame-component'; import { MyContext, isMobile } from '../../App'; -import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events'; -const AppViewerContainer = ({app, isSelected, hide}) => { - const { rootHeight } = useContext(MyContext); - const frameRef = useRef(null); +const AppViewerContainer = React.forwardRef(({ app, isSelected, hide }, ref) => { + const { rootHeight } = useContext(MyContext); + - - return ( - - {/* Inject styles directly into the iframe */} - } style={{ - height: !isMobile ? '100vh' : `calc(${rootHeight} - 60px - 45px )`, - border: 'none', - width: '100%', - overflow: 'hidden', - display: (!isSelected || hide) && 'none' - }} > - ) -} + } + style={{ + display: (!isSelected || hide) && 'none', + height: !isMobile ? '100vh' : `calc(${rootHeight} - 60px - 45px)`, + border: 'none', + width: '100%', + overflow: 'hidden', + }} + > + + + ); +}); -export default AppViewerContainer \ No newline at end of file +export default AppViewerContainer; diff --git a/src/components/Apps/Apps.tsx b/src/components/Apps/Apps.tsx index d0163ef..b444c22 100644 --- a/src/components/Apps/Apps.tsx +++ b/src/components/Apps/Apps.tsx @@ -1,20 +1,17 @@ -import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"; +import React, { useEffect, useMemo, useRef, useState } from "react"; import { AppsHome } from "./AppsHome"; import { Spacer } from "../../common/Spacer"; -import { MyContext, getBaseApiReact } from "../../App"; +import { getBaseApiReact } from "../../App"; import { AppInfo } from "./AppInfo"; import { executeEvent, subscribeToEvent, unsubscribeFromEvent, } from "../../utils/events"; -import { AppsNavBar } from "./AppsNavBar"; import { AppsParent } from "./Apps-styles"; -import { AppViewer } from "./AppViewer"; import AppViewerContainer from "./AppViewerContainer"; import ShortUniqueId from "short-unique-id"; import { AppPublish } from "./AppPublish"; -import { useRecoilState } from "recoil"; import { AppsCategory } from "./AppsCategory"; import { AppsLibrary } from "./AppsLibrary"; @@ -28,6 +25,7 @@ export const Apps = ({ mode, setMode, show , myName}) => { const [selectedTab, setSelectedTab] = useState(null); const [isNewTabWindow, setIsNewTabWindow] = useState(false); const [categories, setCategories] = useState([]) + const iframeRefs = useRef({}); const myApp = useMemo(()=> { @@ -158,33 +156,26 @@ export const Apps = ({ mode, setMode, show , myName}) => { const navigateBackFunc = (e) => { - if(mode === 'category'){ - setMode("library"); - setSelectedCategory(null) - } else if (mode === "appInfo-from-category") { - setMode("category"); - } else if (mode === "appInfo") { - setMode("library"); - } else if (mode === "library") { - if (isNewTabWindow) { - setMode("viewer"); - } else { - setMode("home"); - } - } else if(mode === 'publish'){ - setMode('library') - } else { - const iframeId = `browser-iframe-${selectedTab?.tabId}`; - const iframe = document.getElementById(iframeId); - // Go Back in the iframe's history - if (iframe) { - if (iframe && iframe.contentWindow) { - const iframeWindow = iframe.contentWindow; - if (iframeWindow && iframeWindow.history) { - iframeWindow.history.back(); - } + if (['category', 'appInfo-from-category', 'appInfo', 'library', 'publish'].includes(mode)) { + // Handle the various modes as needed + if (mode === 'category') { + setMode('library'); + setSelectedCategory(null); + } else if (mode === 'appInfo-from-category') { + setMode('category'); + } else if (mode === 'appInfo') { + setMode('library'); + } else if (mode === 'library') { + if (isNewTabWindow) { + setMode('viewer'); + } else { + setMode('home'); } + } else if (mode === 'publish') { + setMode('library'); } + } else if(selectedTab?.tabId) { + executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {}) } }; @@ -309,11 +300,16 @@ export const Apps = ({ mode, setMode, show , myName}) => { {mode === "publish" && !selectedTab && } {tabs.map((tab) => { + if (!iframeRefs.current[tab.tabId]) { + iframeRefs.current[tab.tabId] = React.createRef(); + } return ( ); })} diff --git a/src/components/Apps/AppsDesktop.tsx b/src/components/Apps/AppsDesktop.tsx index 64bba6b..7065782 100644 --- a/src/components/Apps/AppsDesktop.tsx +++ b/src/components/Apps/AppsDesktop.tsx @@ -8,15 +8,10 @@ import { subscribeToEvent, unsubscribeFromEvent, } from "../../utils/events"; -import { AppsNavBar } from "./AppsNavBar"; import { AppsParent } from "./Apps-styles"; -import { AppViewer } from "./AppViewer"; import AppViewerContainer from "./AppViewerContainer"; import ShortUniqueId from "short-unique-id"; import { AppPublish } from "./AppPublish"; -import { useRecoilState } from "recoil"; -import { AppsCategory } from "./AppsCategory"; -import { AppsLibrary } from "./AppsLibrary"; import { AppsLibraryDesktop } from "./AppsLibraryDesktop"; import { AppsCategoryDesktop } from "./AppsCategoryDesktop"; import { AppsNavBarDesktop } from "./AppsNavBarDesktop"; @@ -36,8 +31,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop const [selectedTab, setSelectedTab] = useState(null); const [isNewTabWindow, setIsNewTabWindow] = useState(false); const [categories, setCategories] = useState([]) - - + const iframeRefs = useRef({}); const myApp = useMemo(()=> { return availableQapps.find((app)=> app.name === myName && app.service === 'APP') @@ -164,37 +158,35 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop }; }, []); + + + + const navigateBackFunc = (e) => { - if(mode === 'category'){ - setMode("library"); - setSelectedCategory(null) - } else if (mode === "appInfo-from-category") { - setMode("category"); - } else if (mode === "appInfo") { - setMode("library"); - } else if (mode === "library") { - if (isNewTabWindow) { - setMode("viewer"); - } else { - setMode("home"); - } - } else if(mode === 'publish'){ - setMode('library') - } else { - const iframeId = `browser-iframe-${selectedTab?.tabId}`; - const iframe = document.getElementById(iframeId); - // Go Back in the iframe's history - if (iframe) { - if (iframe && iframe.contentWindow) { - const iframeWindow = iframe.contentWindow; - if (iframeWindow && iframeWindow.history) { - iframeWindow.history.back(); - } + if (['category', 'appInfo-from-category', 'appInfo', 'library', 'publish'].includes(mode)) { + // Handle the various modes as needed + if (mode === 'category') { + setMode('library'); + setSelectedCategory(null); + } else if (mode === 'appInfo-from-category') { + setMode('category'); + } else if (mode === 'appInfo') { + setMode('library'); + } else if (mode === 'library') { + if (isNewTabWindow) { + setMode('viewer'); + } else { + setMode('home'); } + } else if (mode === 'publish') { + setMode('library'); } + } else if(selectedTab?.tabId) { + executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {}) } }; + useEffect(() => { subscribeToEvent("navigateBack", navigateBackFunc); @@ -217,6 +209,8 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop setIsNewTabWindow(false); }; + + useEffect(() => { subscribeToEvent("addTab", addTabFunc); @@ -224,7 +218,6 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop unsubscribeFromEvent("addTab", addTabFunc); }; }, [tabs]); - const setSelectedTabFunc = (e) => { const data = e.detail?.data; @@ -240,6 +233,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop }, 100); setIsNewTabWindow(false); }; + useEffect(() => { subscribeToEvent("setSelectedTab", setSelectedTabFunc); @@ -364,7 +358,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop {mode !== 'home' && ( - + )} @@ -398,13 +392,17 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop {mode === "appInfo-from-category" && !selectedTab && } {mode === "publish" && !selectedTab && } - {tabs.map((tab) => { + if (!iframeRefs.current[tab.tabId]) { + iframeRefs.current[tab.tabId] = React.createRef(); + } return ( ); })} diff --git a/src/components/Apps/AppsNavBar.tsx b/src/components/Apps/AppsNavBar.tsx index 064d3d3..e387a08 100644 --- a/src/components/Apps/AppsNavBar.tsx +++ b/src/components/Apps/AppsNavBar.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useMemo, useRef, useState } from "react"; import { AppsNavBarLeft, AppsNavBarParent, @@ -26,6 +26,7 @@ import PushPinIcon from "@mui/icons-material/PushPin"; import RefreshIcon from "@mui/icons-material/Refresh"; import { useRecoilState, useSetRecoilState } from "recoil"; import { + navigationControllerAtom, settingsLocalLastUpdatedAtom, sortablePinnedAppsAtom, } from "../../atoms/global"; @@ -71,6 +72,13 @@ export const AppsNavBar = () => { const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState( sortablePinnedAppsAtom ); + const [navigationController, setNavigationController] = useRecoilState(navigationControllerAtom) + + const isDisableBackButton = useMemo(()=> { + if(selectedTab && navigationController[selectedTab?.tabId]?.hasBack) return false + if(selectedTab && !navigationController[selectedTab?.tabId]?.hasBack) return true + return false + }, [navigationController, selectedTab]) const setSettingsLocalLastUpdated = useSetRecoilState( settingsLocalLastUpdatedAtom @@ -103,7 +111,7 @@ export const AppsNavBar = () => { const { tabs, selectedTab, isNewTabWindow } = e.detail?.data; setTabs([...tabs]); - setSelectedTab(!selectedTab ? nulll : { ...selectedTab }); + setSelectedTab(!selectedTab ? null : { ...selectedTab }); setIsNewTabWindow(isNewTabWindow); }; @@ -123,8 +131,13 @@ export const AppsNavBar = () => { { - executeEvent("navigateBack", {}); + onClick={() => { + executeEvent("navigateBack", selectedTab?.tabId); + }} + disabled={isDisableBackButton} + sx={{ + opacity: !isDisableBackButton ? 1 : 0.1, + cursor: !isDisableBackButton ? 'pointer': 'default' }} > diff --git a/src/components/Apps/AppsNavBarDesktop.tsx b/src/components/Apps/AppsNavBarDesktop.tsx index 409013e..253cb98 100644 --- a/src/components/Apps/AppsNavBarDesktop.tsx +++ b/src/components/Apps/AppsNavBarDesktop.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useMemo, useRef, useState } from "react"; import { AppsNavBarLeft, AppsNavBarParent, @@ -26,6 +26,7 @@ import PushPinIcon from "@mui/icons-material/PushPin"; import RefreshIcon from "@mui/icons-material/Refresh"; import { useRecoilState, useSetRecoilState } from "recoil"; import { + navigationControllerAtom, settingsLocalLastUpdatedAtom, sortablePinnedAppsAtom, } from "../../atoms/global"; @@ -64,6 +65,8 @@ export function saveToLocalStorage(key, subKey, newValue) { export const AppsNavBarDesktop = () => { const [tabs, setTabs] = useState([]); const [selectedTab, setSelectedTab] = useState(null); + const [navigationController, setNavigationController] = useRecoilState(navigationControllerAtom) + const [isNewTabWindow, setIsNewTabWindow] = useState(false); const tabsRef = useRef(null); const [anchorEl, setAnchorEl] = useState(null); @@ -72,6 +75,7 @@ export const AppsNavBarDesktop = () => { sortablePinnedAppsAtom ); + const setSettingsLocalLastUpdated = useSetRecoilState( settingsLocalLastUpdatedAtom ); @@ -99,11 +103,22 @@ export const AppsNavBarDesktop = () => { } }, [tabs.length]); // Dependency on the number of tabs + + + const isDisableBackButton = useMemo(()=> { + if(selectedTab && navigationController[selectedTab?.tabId]?.hasBack) return false + if(selectedTab && !navigationController[selectedTab?.tabId]?.hasBack) return true + return false + }, [navigationController, selectedTab]) + + + + const setTabsToNav = (e) => { const { tabs, selectedTab, isNewTabWindow } = e.detail?.data; setTabs([...tabs]); - setSelectedTab(!selectedTab ? nulll : { ...selectedTab }); + setSelectedTab(!selectedTab ? null : { ...selectedTab }); setIsNewTabWindow(isNewTabWindow); }; @@ -115,6 +130,8 @@ export const AppsNavBarDesktop = () => { }; }, []); + + const isSelectedAppPinned = !!sortablePinnedApps?.find( (item) => item?.name === selectedTab?.name && item?.service === selectedTab?.service @@ -138,7 +155,12 @@ export const AppsNavBarDesktop = () => { > { - executeEvent("navigateBack", {}); + executeEvent("navigateBack", selectedTab?.tabId); + }} + disabled={isDisableBackButton} + sx={{ + opacity: !isDisableBackButton ? 1 : 0.1, + cursor: !isDisableBackButton ? 'pointer': 'default' }} > diff --git a/src/components/Apps/useQortalMessageListener.tsx b/src/components/Apps/useQortalMessageListener.tsx index cc3dc2a..11e1680 100644 --- a/src/components/Apps/useQortalMessageListener.tsx +++ b/src/components/Apps/useQortalMessageListener.tsx @@ -1,5 +1,8 @@ -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import FileSaver from 'file-saver'; +import { executeEvent } from '../../utils/events'; +import { useSetRecoilState } from 'recoil'; +import { navigationControllerAtom } from '../../atoms/global'; class Semaphore { constructor(count) { this.count = count @@ -313,13 +316,54 @@ const UIQortalRequests = [ return obj; // Updated object with references to stored files } -export const useQortalMessageListener = (frameWindow) => { +export const useQortalMessageListener = (frameWindow, iframeRef, tabId) => { const [path, setPath] = useState('') + const [history, setHistory] = useState({ + customQDNHistoryPaths: [], +currentIndex: -1, +isDOMContentLoaded: false + }) + const setHasSettingsChangedAtom = useSetRecoilState(navigationControllerAtom); + + + useEffect(()=> { + if(tabId && !isNaN(history?.currentIndex)){ + setHasSettingsChangedAtom((prev)=> { + return { + ...prev, + [tabId]: { + hasBack: history?.currentIndex > 0, + } + } + }) + } + }, [history?.currentIndex, tabId]) + + + const changeCurrentIndex = useCallback((value)=> { + setHistory((prev)=> { + return { + ...prev, + currentIndex: value + } + }) + }, []) + + const resetHistory = useCallback(()=> { + setHistory({ + customQDNHistoryPaths: [], + currentIndex: -1, + isManualNavigation: true, + isDOMContentLoaded: false + }) + }, []) + useEffect(() => { const listener = async (event) => { - event.preventDefault(); // Prevent default behavior - event.stopImmediatePropagation(); // Stop other listeners from firing + console.log('eventreactt', event) + // event.preventDefault(); // Prevent default behavior + // event.stopImmediatePropagation(); // Stop other listeners from firing if (event?.data?.requestedHandler !== 'UI') return; @@ -377,6 +421,39 @@ export const useQortalMessageListener = (frameWindow) => { event?.data?.action === 'QDN_RESOURCE_DISPLAYED'){ const pathUrl = event?.data?.path != null ? (event?.data?.path.startsWith('/') ? '' : '/') + event?.data?.path : null setPath(pathUrl) + } else if(event?.data?.action === 'NAVIGATION_HISTORY'){ + if(event?.data?.payload?.isDOMContentLoaded){ + setHistory((prev)=> { + const copyPrev = {...prev} + if((copyPrev?.customQDNHistoryPaths || []).at(-1) === (event?.data?.payload?.customQDNHistoryPaths || []).at(-1)) { + console.log('customQDNHistoryPaths.length', prev?.customQDNHistoryPaths.length) + return { + ...prev, + currentIndex: prev.customQDNHistoryPaths.length - 1 === -1 ? 0 : prev.customQDNHistoryPaths.length - 1 + } + } + const copyHistory = {...prev} + const paths = [...(copyHistory?.customQDNHistoryPaths || []), ...(event?.data?.payload?.customQDNHistoryPaths || [])] + console.log('paths', paths) + return { + ...prev, + customQDNHistoryPaths: paths, + currentIndex: paths.length - 1 + } + }) + } else { + setHistory(event?.data?.payload) + + } + } else if(event?.data?.action === 'SET_TAB'){ + executeEvent("addTab", { + data: event?.data?.payload + }) + iframeRef.current.contentWindow.postMessage( + { action: 'SET_TAB_SUCCESS', requestedHandler: 'UI',payload: { + name: event?.data?.payload?.name + } }, '*' + ); } }; @@ -402,6 +479,6 @@ export const useQortalMessageListener = (frameWindow) => { } }); - return {path} + return {path, history, resetHistory, changeCurrentIndex} };