From f0c3995a8f57819ee509246f79adb3c75763f280 Mon Sep 17 00:00:00 2001
From: "Robin E. R. Davies" <rerdavies@gmail.com>
Date: Fri, 23 Jan 2026 21:47:31 -0500
Subject: [PATCH] Tone3000 dialog (waiting for iframe fix)

---
 vite/public/handleTone3000download.html |  26 +++
 vite/public/testTone300Select.html      |  22 ++
 vite/src/pipedal/FilePropertyDialog.tsx | 272 ++++++++++++------------
 vite/src/pipedal/Tone3000Dialog.tsx     | 216 ++++++++-----------
 4 files changed, 275 insertions(+), 261 deletions(-)
 create mode 100644 vite/public/handleTone3000download.html
 create mode 100644 vite/public/testTone300Select.html
diff --git a/vite/public/handleTone3000download.html b/vite/public/handleTone3000download.html
new file mode 100644
index 0000000..465155b
--- /dev/null
+++ b/vite/public/handleTone3000download.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tone3000 Download Received</title>
+</head>
+<body>
+    <script>
+        // Parse URL parameters
+        const urlParams = new URLSearchParams(window.location.search);
+        const toneUrl = urlParams.get('tone_url');
+
+        // Send the data back to the opener window
+        if (window.opener) {
+            window.opener.postMessage({
+                type: 'tone3000Download',
+                toneUrl: toneUrl
+            }, '*');
+        }
+
+        // Close the window after sending the data
+        window.close();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/vite/public/testTone300Select.html b/vite/public/testTone300Select.html
new file mode 100644
index 0000000..d16c733
--- /dev/null
+++ b/vite/public/testTone300Select.html
@@ -0,0 +1,22 @@
+<html>
+    <head>
+        <title>Test Tone3000 Select</title>
+
+        <script> 
+            function onPageLoad() {
+                console.log("Test Tone3000 Select Page Loaded");
+                let iframe = document.getElementById("tone3000SelectIframe");
+                iframe.src = "https://www.tone3000.com/api/v1/select?app_id=pipedal_app&redirect_url=http://localhost:5173/public/handleTone3000download.html";
+            }
+        </script>
+    </head>
+    <body onload="onPageLoad()">
+        <h1>Test Tone3000 Select Page</h1>
+        <p>This is a test page for Tone3000 select functionality.</p>
+
+        <iframe 
+            style="width: 680px; height: 400px; border: 2px solid red;"
+            id="tone3000SelectIframe" 
+                style="width:100%; height:600px; border:none;">
+    </body>
+</html>
\ No newline at end of file
diff --git a/vite/src/pipedal/FilePropertyDialog.tsx b/vite/src/pipedal/FilePropertyDialog.tsx
index 26321ba..da6b505 100644
--- a/vite/src/pipedal/FilePropertyDialog.tsx
+++ b/vite/src/pipedal/FilePropertyDialog.tsx
@@ -21,7 +21,7 @@
 import React from 'react';
 import { createStyles } from './WithStyles';
 
-// import Tone3000Dialog from './Tone3000Dialog';
+import Tone3000Dialog from './Tone3000Dialog';
 
 import TextInfoDialog from './TextInfoDialog';
 import Tone3000HelpDialog from './Tone3000HelpDialog';
@@ -172,11 +172,11 @@ export interface FilePropertyDialogState {
     previousSelection: string;
     multiSelect: boolean,
     selectedFiles: string[],
-    //openTone3000Dialog: boolean,
+    openTone3000Dialog: boolean,
     openTone3000Help: boolean,
     openGuitarMlHelp: boolean,
 
-    textFileName? : string;
+    textFileName?: string;
 
 };
 
@@ -249,7 +249,7 @@ export default withStyles(
                 previousSelection: this.props.selectedFile,
                 multiSelect: false,
                 selectedFiles: [],
-                //openTone3000Dialog: false,
+                openTone3000Dialog: false,
                 openTone3000Help: false,
                 openGuitarMlHelp: false
             };
@@ -701,15 +701,14 @@ export default withStyles(
             }
             this.openSelectedFile();
         }
-        handleApply(fileProperty: UiFileProperty, selectedItem: string)
-        {
+        handleApply(fileProperty: UiFileProperty, selectedItem: string) {
             if (this.state.previousSelection == selectedItem) {
                 return;
             }
             if (!this.isLicenseFile(selectedItem) && !this.isFolderArtwork(selectedItem)) {
                 this.props.onApply(fileProperty, selectedItem);
             }
-            this.setState({previousSelection: selectedItem});
+            this.setState({ previousSelection: selectedItem });
         }
 
 
@@ -1069,13 +1068,13 @@ export default withStyles(
                 () => { this.handleAutoScrollTick() }, AUTOSCROLL_TICK_DELAY);
         }
 
-        // handleTone3000Dialog(e: React.MouseEvent<HTMLButtonElement>) {
-        //     e.stopPropagation();
-        //     e.preventDefault();
+        handleTone3000Dialog(e: React.MouseEvent<HTMLButtonElement>) {
+            e.stopPropagation();
+            e.preventDefault();
 
-        //     this.setState({ openTone3000Dialog: true });
+            this.setState({ openTone3000Dialog: true });
 
-        // }
+        }
 
 
         handleGuitarMlHelp(e: React.MouseEvent<HTMLButtonElement>) {
@@ -1519,125 +1518,126 @@ export default withStyles(
                         {(!this.state.reordering && !this.state.multiSelect) && (
                             <>
                                 <DialogActions style={{ justifyContent: "stretch", width: "100%" }}>
-                                    <div style={{display: "flex", flexFlow: "column nowrap", width: "100%", alignItems: "stretch", }}>
-                                    {isToobNamModelFile && (
-                                        <div style={{
-                                            display: "flex", flexFlow: "row nowrap", justifyContent: "center",
-                                            alignItems: "center", width: "100%"
-                                        }}>
-                                            <Typography variant="body2" >
-                                                Download model files from <LinkEx
-                                                    href="https://www.tone3000.com/search" target="_blank">TONE3000</LinkEx>
-                                            </Typography>
-                                            <IconButtonEx tooltip="Help"
-                                            onClick={(e) => { this.handleTone3000Help(e); }} aria-label="help" edge="end" color="inherit" style={{ opacity: 0.6, marginLeft: 8 }}
-                                            >
-                                                <HelpOutlineIcon />
-                                            </IconButtonEx>
-                                        </div>
-
-                                    )}
-                                    {isToobMLModelFile && (
-                                        <div style={{
-                                            display: "flex", flexFlow: "row nowrap", justifyContent: "center", width: "100%",
-                                            alignItems: "center"
-                                        }}>
-                                            <Typography variant="body2" >
-                                                Download model files from <LinkEx
-                                                    href="https://github.com/GuitarML/ToneLibrary/releases/download/v1.0/Proteus_Tone_Packs.zip" target="_blank">GuitarML</LinkEx>
-                                            </Typography>
-                                            <IconButtonEx tooltip="Help"
-                                            onClick={(e) => { this.handleGuitarMlHelp(e); }} aria-label="help" edge="end" color="inherit" style={{ opacity: 0.6, marginLeft: 8 }}
-                                            >
-                                                <HelpOutlineIcon />
-                                            </IconButtonEx>
-                                        </div>
-
-                                    )}
-
-
-                                    {this.state.windowWidth > 500 ? (
-                                        <div style={{ display: "flex", width: "100%", alignItems: "center", flexFlow: "column nowrap" }}>
-
-                                            <div style={{ flex: "1 1 100%", display: "flex", width: "100%", alignItems: "center", flexFlow: "row nowrap" }}>
-                                                <IconButtonEx style={{ visibility: (this.state.hasSelection ? "visible" : "hidden") }} aria-label="delete" component="label" color="primary"
-                                                    tooltip="Delete selected file or folder"
-                                                    disabled={!this.state.hasSelection || this.state.selectedFile === "" || protectedItem}
-                                                    onClick={() => this.handleDelete()} >
-                                                    <OldDeleteIcon fontSize='small' />
+                                    <div style={{ display: "flex", flexFlow: "column nowrap", width: "100%", alignItems: "stretch", }}>
+                                        {isToobNamModelFile && (
+                                            <div style={{
+                                                display: "flex", flexFlow: "row nowrap", justifyContent: "center",
+                                                alignItems: "center", width: "100%"
+                                            }}>
+                                                <Button
+                                                    onClick={(e) => { this.handleTone3000Dialog(e); }}
+                                                >
+                                                    Download model files from Tone3000
+                                                </Button>
+                                                <IconButtonEx tooltip="Help"
+                                                    onClick={(e) => { this.handleTone3000Help(e); }} aria-label="help" edge="end" color="inherit" style={{ opacity: 0.6, marginLeft: 8 }}
+                                                >
+                                                    <HelpOutlineIcon />
                                                 </IconButtonEx>
-
-                                                <ButtonEx tooltip="Upload file" style={{ flex: "0 0 auto" }} aria-label="upload" variant="text" startIcon={<FileUploadIcon />}
-                                                    onClick={() => { this.setState({ openUploadFileDialog: true }) }} disabled={protectedDirectory}
-                                                >
-                                                    <div>Upload</div>
-                                                </ButtonEx>
-
-                                                <ButtonEx tooltip="Download file" style={{ flex: "0 0 auto" }} aria-label="upload" variant="text" startIcon={<FileDownloadIcon />}
-                                                    onClick={() => { this.handleDownloadFile(); }} disabled={protectedDirectory || !this.state.hasFileSelection}
-                                                >
-                                                    <div>Download</div>
-                                                </ButtonEx>
-
-                                                <div style={{ flex: "1 1 auto" }}>&nbsp;</div>
-
-                                                <Button variant="dialogSecondary" onClick={() => {
-                                                    this.handleApply(this.props.fileProperty, this.state.initialSelection);
-                                                    this.props.onCancel();
-                                                }} aria-label="cancel">
-                                                    Cancel
-                                                </Button>
-                                                <Button variant="dialogPrimary" style={{ flex: "0 0 auto" }}
-                                                    onClick={() => { this.openSelectedFile(); }}
-
-                                                    disabled={(!canSelectFile)
-                                                    } aria-label="select"
-                                                >
-                                                    {okButtonText}
-                                                </Button>
                                             </div>
-                                        </div>
-                                    ) : (
-                                        <div style={{ width: "100%" }}>
-                                            <div style={{ display: "flex", width: "100%", alignItems: "center", flexFlow: "row nowrap" }}>
-                                                <IconButtonEx tooltip="Delete" style={{ visibility: (this.state.hasSelection ? "visible" : "hidden") }} aria-label="delete" component="label" color="primary"
-                                                    disabled={!this.state.hasSelection || this.state.selectedFile === "" || protectedItem}
-                                                    onClick={() => this.handleDelete()} >
-                                                    <OldDeleteIcon fontSize='small' />
+
+                                        )}
+                                        {isToobMLModelFile && (
+                                            <div style={{
+                                                display: "flex", flexFlow: "row nowrap", justifyContent: "center", width: "100%",
+                                                alignItems: "center"
+                                            }}>
+                                                <Typography variant="body2" >
+                                                    Download model files from <LinkEx
+                                                        href="https://github.com/GuitarML/ToneLibrary/releases/download/v1.0/Proteus_Tone_Packs.zip" target="_blank">GuitarML</LinkEx>
+                                                </Typography>
+                                                <IconButtonEx tooltip="Help"
+                                                    onClick={(e) => { this.handleGuitarMlHelp(e); }} aria-label="help" edge="end" color="inherit" style={{ opacity: 0.6, marginLeft: 8 }}
+                                                >
+                                                    <HelpOutlineIcon />
                                                 </IconButtonEx>
-
-                                                <Button style={{ flex: "0 0 auto" }} aria-label="upload" variant="text" startIcon={<FileUploadIcon />}
-                                                    onClick={() => { this.setState({ openUploadFileDialog: true }) }} disabled={protectedDirectory}
-                                                >
-                                                    <div>Upload</div>
-                                                </Button>
-
-                                                <Button style={{ flex: "0 0 auto" }} aria-label="upload" variant="text" startIcon={<FileDownloadIcon />}
-                                                    onClick={() => { this.handleDownloadFile(); }} disabled={protectedDirectory || !this.state.hasFileSelection}
-
-                                                >
-                                                    <div>Download</div>
-                                                </Button>
-
-                                                <div style={{ flex: "1 1 auto" }}>&nbsp;</div>
                                             </div>
-                                            <div style={{ display: "flex", width: "100%", alignItems: "center", flexFlow: "row nowrap" }}>
-                                                <div style={{ flex: "1 1 auto" }}>&nbsp;</div>
 
-                                                <Button variant="dialogSecondary" onClick={() => { this.props.onCancel(); }} aria-label="cancel">
-                                                    Cancel
-                                                </Button>
-                                                <Button variant="dialogPrimary" style={{ flex: "0 0 auto" }}
-                                                    onClick={() => { this.openSelectedFile(); }}
+                                        )}
 
-                                                    disabled={!canSelectFile}
-                                                    aria-label="select"
-                                                >
-                                                    {okButtonText}
-                                                </Button>
+
+                                        {this.state.windowWidth > 500 ? (
+                                            <div style={{ display: "flex", width: "100%", alignItems: "center", flexFlow: "column nowrap" }}>
+
+                                                <div style={{ flex: "1 1 100%", display: "flex", width: "100%", alignItems: "center", flexFlow: "row nowrap" }}>
+                                                    <IconButtonEx style={{ visibility: (this.state.hasSelection ? "visible" : "hidden") }} aria-label="delete" component="label" color="primary"
+                                                        tooltip="Delete selected file or folder"
+                                                        disabled={!this.state.hasSelection || this.state.selectedFile === "" || protectedItem}
+                                                        onClick={() => this.handleDelete()} >
+                                                        <OldDeleteIcon fontSize='small' />
+                                                    </IconButtonEx>
+
+                                                    <ButtonEx tooltip="Upload file" style={{ flex: "0 0 auto" }} aria-label="upload" variant="text" startIcon={<FileUploadIcon />}
+                                                        onClick={() => { this.setState({ openUploadFileDialog: true }) }} disabled={protectedDirectory}
+                                                    >
+                                                        <div>Upload</div>
+                                                    </ButtonEx>
+
+                                                    <ButtonEx tooltip="Download file" style={{ flex: "0 0 auto" }} aria-label="upload" variant="text" startIcon={<FileDownloadIcon />}
+                                                        onClick={() => { this.handleDownloadFile(); }} disabled={protectedDirectory || !this.state.hasFileSelection}
+                                                    >
+                                                        <div>Download</div>
+                                                    </ButtonEx>
+
+                                                    <div style={{ flex: "1 1 auto" }}>&nbsp;</div>
+
+                                                    <Button variant="dialogSecondary" onClick={() => {
+                                                        this.handleApply(this.props.fileProperty, this.state.initialSelection);
+                                                        this.props.onCancel();
+                                                    }} aria-label="cancel">
+                                                        Cancel
+                                                    </Button>
+                                                    <Button variant="dialogPrimary" style={{ flex: "0 0 auto" }}
+                                                        onClick={() => { this.openSelectedFile(); }}
+
+                                                        disabled={(!canSelectFile)
+                                                        } aria-label="select"
+                                                    >
+                                                        {okButtonText}
+                                                    </Button>
+                                                </div>
                                             </div>
-                                        </div>
-                                    )}
+                                        ) : (
+                                            <div style={{ width: "100%" }}>
+                                                <div style={{ display: "flex", width: "100%", alignItems: "center", flexFlow: "row nowrap" }}>
+                                                    <IconButtonEx tooltip="Delete" style={{ visibility: (this.state.hasSelection ? "visible" : "hidden") }} aria-label="delete" component="label" color="primary"
+                                                        disabled={!this.state.hasSelection || this.state.selectedFile === "" || protectedItem}
+                                                        onClick={() => this.handleDelete()} >
+                                                        <OldDeleteIcon fontSize='small' />
+                                                    </IconButtonEx>
+
+                                                    <Button style={{ flex: "0 0 auto" }} aria-label="upload" variant="text" startIcon={<FileUploadIcon />}
+                                                        onClick={() => { this.setState({ openUploadFileDialog: true }) }} disabled={protectedDirectory}
+                                                    >
+                                                        <div>Upload</div>
+                                                    </Button>
+
+                                                    <Button style={{ flex: "0 0 auto" }} aria-label="upload" variant="text" startIcon={<FileDownloadIcon />}
+                                                        onClick={() => { this.handleDownloadFile(); }} disabled={protectedDirectory || !this.state.hasFileSelection}
+
+                                                    >
+                                                        <div>Download</div>
+                                                    </Button>
+
+                                                    <div style={{ flex: "1 1 auto" }}>&nbsp;</div>
+                                                </div>
+                                                <div style={{ display: "flex", width: "100%", alignItems: "center", flexFlow: "row nowrap" }}>
+                                                    <div style={{ flex: "1 1 auto" }}>&nbsp;</div>
+
+                                                    <Button variant="dialogSecondary" onClick={() => { this.props.onCancel(); }} aria-label="cancel">
+                                                        Cancel
+                                                    </Button>
+                                                    <Button variant="dialogPrimary" style={{ flex: "0 0 auto" }}
+                                                        onClick={() => { this.openSelectedFile(); }}
+
+                                                        disabled={!canSelectFile}
+                                                        aria-label="select"
+                                                    >
+                                                        {okButtonText}
+                                                    </Button>
+                                                </div>
+                                            </div>
+                                        )}
                                     </div>
                                 </DialogActions>
                             </>
@@ -1742,12 +1742,17 @@ export default withStyles(
                                 )
                             )
                         }
-                        {/* {this.state.openTone3000Dialog && (
+                        {this.state.openTone3000Dialog && (
                             <Tone3000Dialog
                                 open={this.state.openTone3000Dialog}
-                                onClose={() => this.setState({ openTone3000Dialog: false })}
+                                onCancel={() => this.setState({ openTone3000Dialog: false })}
+                                onDownload={(toneUrl: string) => {
+                                    alert("Donload tone url: " + toneUrl);
+                                    this.setState({ openTone3000Dialog: false });
+                                }
+                                }
                             />
-                        )} */}
+                        )}
                         {this.state.openTone3000Help && (
                             <Tone3000HelpDialog
                                 open={this.state.openTone3000Help}
@@ -1761,22 +1766,21 @@ export default withStyles(
                             />
                         )}
                         {this.state.textFileName !== undefined && (
-                            <TextInfoDialog open={true} 
+                            <TextInfoDialog open={true}
                                 title={pathFileNameOnly(this.state.textFileName)}
-                                fileName={this.state.textFileName} onClose={() => this.setState({ textFileName: undefined })} 
-                                />
+                                fileName={this.state.textFileName} onClose={() => this.setState({ textFileName: undefined })}
+                            />
                         )}
                     </DialogEx>
                 );
         }
         isLicenseFile(fileName: string) {
             let extension = pathExtension(fileName);
-            if (extension === ".txt" || extension === ".md"){
+            if (extension === ".txt" || extension === ".md") {
                 return true;
-            } 
+            }
             let fileNameOnly = pathFileNameOnly(fileName);
-            if (fileNameOnly.toUpperCase() === "LICENSE" || fileNameOnly.toUpperCase() === "README")
-            {
+            if (fileNameOnly.toUpperCase() === "LICENSE" || fileNameOnly.toUpperCase() === "README") {
                 return true;
             }
             return false;
diff --git a/vite/src/pipedal/Tone3000Dialog.tsx b/vite/src/pipedal/Tone3000Dialog.tsx
index 8b889fc..d585447 100644
--- a/vite/src/pipedal/Tone3000Dialog.tsx
+++ b/vite/src/pipedal/Tone3000Dialog.tsx
@@ -1,15 +1,10 @@
 
 
 import React from 'react';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import Button from '@mui/material/Button';
+import AppBar from '@mui/material/AppBar';
 import Typography from '@mui/material/Typography';
 import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
 import DialogEx from './DialogEx';
-import Link from '@mui/material/Link';
 import Toolbar from '@mui/material/Toolbar';
 import IconButtonEx from './IconButtonEx';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
@@ -19,142 +14,109 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
 export interface Tone3000DialogProps {
     open: boolean;
-    onClose: () => void;
+    onCancel: () => void;
+    onDownload: (toneUrl: string) => void;
 }
 
+interface Tone3000AuthState {
+    authToken: string;
+    refreshToken: string;
+    expiry: number;
+};
+
+// function getAuthToken(): Tone3000AuthState | null {
+
+//     let authToken = window.localStorage.getItem("tone300_auth_token");
+//     if (authToken === null) {
+//         return null;
+//     }
+//     let refreshToken = window.localStorage.getItem("tone3000_refresh_token");
+//     if (refreshToken === null) {
+//         return null;
+//     }       
+//     let expiry = window.localStorage.getTime("tone3000_auth_expiry");
+//     return { authToken: authToken, refreshToken: refreshToken, expiry: expiry };
+// }
+
+// function setAuthToken(authToken: string, refreshToken: string, expirySeconds: number) {
+//     window.localStorage.setItem("tone3000_auth_token", authToken);
+//     window.localStorage.setItem("tone3000_refresh_token", refreshToken);
+//     window.localStorage.setItem("tone3000_auth_expiry", String(Date.now() + (expirySeconds * 1000)));
+// }
+
+// enum AuthState {
+//     OnBoarding,
+//     TokenExpired,
+//     Authenticated
+// }
+
 function Tone3000Dialog(props: Tone3000DialogProps) {
-    const { open, onClose } = props;
-
-    const model: PiPedalModel = PiPedalModelFactory.getInstance();
-
-    let [openAuthDialog, setOpenAuthDialog] = React.useState(!model.hasTone3000Auth.get());
-
-
-    React.useEffect(()=> {
-        let authListener = (value: boolean) => {
-            setOpenAuthDialog(!value);
-        }
-        model.hasTone3000Auth.addOnChangedHandler(authListener);
-        return () => {
-            model.hasTone3000Auth.removeOnChangedHandler(authListener);
-        }
-    });
+    const { onCancel,onDownload } = props;
 
     function RedirectUrl() {
         let baseUrl = new URL(window.location.href);
-        let result = "http://" + baseUrl.hostname + ":" + baseUrl.port + "/";
+        let result = "http://" + baseUrl.hostname + ":" + baseUrl.port + "/public/handleTone3000download.html";
         return result;
     }
-    function AuthUrl() {
-        //return "https://www.tone3000.com/api/v1/auth?redirect_url=" + encodeURIComponent(RedirectUrl()) + "&opt_only=true";
-        return "https://www.tone3000.com/api/v1/auth?redirect_url=" + encodeURIComponent(RedirectUrl()) + "&otp_only=true";
+    const appId = 'pipedal_app';
+    const redirectUrl = RedirectUrl();
+
+    let selectUrl = `https://www.tone3000.com/api/v1/select?app_id=${appId}&redirect_url=${redirectUrl}`;
+
+    const model: PiPedalModel = PiPedalModelFactory.getInstance();
+    if (model) {
+
     }
+
+    React.useEffect(()=> {
+
+        let messagehandler = (event: MessageEvent) => {
+            // Handle messages received from the iframe
+            if (event.origin !== "https://www.tone3000.com") {
+                return;
+            }
+            const data = event.data;
+            if (data.type === "tone3000_selection") {
+                onDownload(data.toneUrl);
+            }
+        }
+        window.addEventListener("message", messagehandler);
+
+        return () => {
+            window.removeEventListener("message", messagehandler);
+        }
+    });
+    
+
     return (
-        <DialogEx
-            tag="tone3000"
-            fullScreen={true}
-            open={open}
-            onEnterKey={() => { onClose(); }}
-            onClose={() => { onClose(); }}
-            aria-labelledby="tone3000-dialog-title"
-            aria-describedby="tone3000-dialog-description"
-        >
-            <DialogTitle id="tone3000-dialog-title">
-                <Toolbar style={{ padding: 0 }}>
-                    <IconButtonEx
-                        tooltip="Close"
-                        edge="start"
-                        color="inherit"
-                        aria-label="cancel"
-                        style={{ opacity: 0.6 }}
-                        onClick={() => { onClose(); }}
-                    >
-                        <ArrowBackIcon style={{ width: 24, height: 24 }} />
-                    </IconButtonEx>
+        <DialogEx open={props.open} onClose={()=>{ onCancel()}} fullScreen={true} tag="tone3000Dlg" onEnterKey={()=>{}} >
 
-                    <Typography noWrap component="div" sx={{ flexGrow: 1 }}>
-                        TONE3000 Models
-                    </Typography>
-
-                </Toolbar>
-            </DialogTitle>
-            <DialogContent>
-                <Typography variant="body1">
-                    This is a placeholder for the Tone 3000 dialog.
-                </Typography>
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={onClose} color="primary">
-                    Close
-                </Button>
-            </DialogActions>
-            {
-                openAuthDialog && (
-                    <Dialog
-                        fullScreen={true}
-                        open={openAuthDialog}>
-
-                        <DialogTitle id="tone3000-auth-dialog-title">
-                            <Toolbar style={{ padding: 0 }}>
-                                <IconButtonEx
-                                    tooltip="Close"
-                                    edge="start"
-                                    color="inherit"
-                                    aria-label="cancel"
-                                    style={{ opacity: 0.6 }}
-                                    onClick={() => { onClose(); }}
+            <div style={{display: "flex", flexDirection: "column", width: "100%", height: "100%"}}>
+                    <div style={{ flex: "0 0 auto" }}>
+                        <AppBar style={{
+                            position: 'relative',
+                            top: 0, left: 0
+                        }}  >
+                            <Toolbar>
+                                <IconButtonEx tooltip="Back" edge="start" color="inherit" onClick={()=> onCancel()} 
+                                aria-label="back"
                                 >
-                                    <ArrowBackIcon style={{ width: 24, height: 24 }} />
+                                    <ArrowBackIcon />
                                 </IconButtonEx>
-
-                                <Typography noWrap component="div" sx={{ flexGrow: 1 }}>
-                                    TONE3000 Authorization
+                                <Typography noWrap variant="h6"
+                                    sx={{ marginLeft: 2, flex: 1 }}
+                                >
+                                    Tone3000 Direct Download
                                 </Typography>
-
                             </Toolbar>
-                        </DialogTitle>
-                        <DialogContent>
-                            <div style={{ display: "flex", flexFlow: "row nowrap", alignItems: "start" }}>
-                                <div style={{ flex: "1 1 1px" }} />
-                                <div style={{
-                                    maxWidth: 500, marginLeft: "auto", marginRight: "auto",
-                                    display: "flex", flexFlow: "column nowrap", gap: 16, alignItems: "start",
-                                }}>
-                                    <Typography variant="body1" component="div" display="block" >
-                                        The <Link href="https://www.tone3000.com" target="_blank">TONE3000 website</Link> provides an
-                                        online library of models for use with TooB Neural Amp Modeller. You can download
-                                        models from the TONE3000 website onto your local machine and then upload them to
-                                        PiPedal; or, more conveniently, you can browse the TONE3000 model database directly, and download models directly
-                                        to the PiPedal server from the TONE3000 model database in a single step.
-                                    </Typography>
-                                    <Typography variant="body1" component="div" display="block" >
-                                        In order to access the TONE3000 database, you must first obtain an access token from the
-                                        TONE3000 website. Clicking on the button will take you to an external website in
-                                        order to complete the authorization process.
-                                    </Typography>
-                                    <Button variant="contained" color="primary" style={{ alignSelf: "end", marginRight: 32 }}
-                                        onClick={() => {
-                                            window.open(AuthUrl(), "_blank");
-                                        }}
-                                    >
-                                        Continue to TONE3000
-                                    </Button>
-
-                                    <Typography variant="body2" component="div" display="block" style={{ marginTop: 32 }}>
-                                        Privacy statement: PiPedal will only have access to your authorization token
-                                        which does not contain personally identifying information, and which is stored locally on
-                                        your PiPedal server. Please refer to
-                                        the <Link href="https://www.tone3000.com/privacy" target="_blank">TONE3000 privacy policy</Link> for
-                                        information on how your data is used by TONE3000.
-                                    </Typography>
-                                </div>
-                                <div style={{ flex: "2 2 1px" }} />
-                            </div>
-
-
-                        </DialogContent>
-                    </Dialog>
-                )}
+                        </AppBar>
+                    </div>
+            
+                <iframe style={{flex: "1 1 1px", border: "none"}}
+                        src={ selectUrl}
+                        >
+                </iframe>
+            </div>
         </DialogEx>
 
     );
