From 798ca3bcebb2a498285c22bffb9c8f7a087afe11 Mon Sep 17 00:00:00 2001
From: Nathan Adams <dinnerbone@dinnerbone.com>
Date: Wed, 22 Nov 2023 22:04:45 +0100
Subject: [PATCH] web: Add options to demo to enable url loading and sample
 loading

---
 web/packages/demo/src/App.tsx    | 16 ++++++++++++++--
 web/packages/demo/src/main.tsx   | 16 ++++++++++------
 web/packages/demo/src/navbar.tsx | 13 +++++++++++--
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/web/packages/demo/src/App.tsx b/web/packages/demo/src/App.tsx
index bacea824a..3fcfaef49 100644
--- a/web/packages/demo/src/App.tsx
+++ b/web/packages/demo/src/App.tsx
@@ -4,7 +4,17 @@ import { BaseLoadOptions, MovieMetadata } from "ruffle-core";
 import { Navbar } from "./navbar.tsx";
 import { MetadataPanel } from "./metadata.tsx";
 
-export function App(baseConfig: BaseLoadOptions) {
+interface AppProperties {
+    ruffleBaseConfig: BaseLoadOptions;
+    allowUrlLoading: boolean;
+    allowSampleSwfs: boolean;
+}
+
+export function App({
+    ruffleBaseConfig,
+    allowUrlLoading,
+    allowSampleSwfs,
+}: AppProperties) {
     const [metadata, setMetadata] = useState<MovieMetadata | null>(null);
     const [metadataVisible, setMetadataVisible] = useState<boolean>(false);
     const [selectedFilename, setSelectedFilename] = useState<string | null>(
@@ -60,6 +70,8 @@ export function App(baseConfig: BaseLoadOptions) {
     return (
         <>
             <Navbar
+                allowUrlLoading={allowUrlLoading}
+                allowSampleSwfs={allowSampleSwfs}
                 onToggleMetadata={toggleMetadataVisible}
                 onReloadMovie={reloadMovie}
                 onSelectUrl={onSelectUrl}
@@ -84,7 +96,7 @@ export function App(baseConfig: BaseLoadOptions) {
                     onDragLeave={onFileDragLeave}
                     onDragOver={onFileDragOver}
                     onDragDrop={onFileDragDrop}
-                    baseConfig={baseConfig}
+                    baseConfig={ruffleBaseConfig}
                 >
                     <div
                         id="overlay"
diff --git a/web/packages/demo/src/main.tsx b/web/packages/demo/src/main.tsx
index d721d937e..cdf622b5b 100644
--- a/web/packages/demo/src/main.tsx
+++ b/web/packages/demo/src/main.tsx
@@ -17,12 +17,16 @@ window.RufflePlayer = PublicAPI.negotiate(window.RufflePlayer, "local");
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
         <App
-            autoplay={AutoPlay.On}
-            unmuteOverlay={UnmuteOverlay.Hidden}
-            logLevel={LogLevel.Warn}
-            letterbox={Letterbox.On}
-            forceScale
-            forceAlign
+            ruffleBaseConfig={{
+                autoplay: AutoPlay.On,
+                unmuteOverlay: UnmuteOverlay.Hidden,
+                logLevel: LogLevel.Warn,
+                letterbox: Letterbox.On,
+                forceScale: true,
+                forceAlign: true,
+            }}
+            allowSampleSwfs={true}
+            allowUrlLoading={false}
         />
     </React.StrictMode>,
 );
diff --git a/web/packages/demo/src/navbar.tsx b/web/packages/demo/src/navbar.tsx
index bd34dd4b0..23659dc92 100644
--- a/web/packages/demo/src/navbar.tsx
+++ b/web/packages/demo/src/navbar.tsx
@@ -22,6 +22,8 @@ declare global {
 }
 
 interface NavbarProps {
+    allowUrlLoading: boolean;
+    allowSampleSwfs: boolean;
     onToggleMetadata: () => void;
     onReloadMovie: () => void;
     onSelectUrl: (url: string, options: BaseLoadOptions) => void;
@@ -43,6 +45,8 @@ interface DemoSwf {
 }
 
 export function Navbar({
+    allowUrlLoading,
+    allowSampleSwfs,
     onToggleMetadata,
     onReloadMovie,
     onSelectUrl,
@@ -126,6 +130,7 @@ export function Navbar({
             typeof navigator.standalone !== "undefined");
 
     useEffect(() => {
+        if (!allowSampleSwfs) return;
         (async () => {
             const response = await fetch("swfs.json");
 
@@ -138,7 +143,7 @@ export function Navbar({
                 }
             }
         })();
-    }, [loadSample]);
+    }, [allowSampleSwfs, loadSample]);
 
     useEffect(() => {
         if (selectedFilename != null) {
@@ -153,7 +158,11 @@ export function Navbar({
                 <img className="logo" src={ruffleLogo} alt="Ruffle" />
             </a>
             <div className="select-container">
-                <form id="web-url-container" onSubmit={submitUrlForm}>
+                <form
+                    id="web-url-container"
+                    onSubmit={submitUrlForm}
+                    hidden={!allowUrlLoading}
+                >
                     <input
                         id="web-url"
                         name="web-url"