web: Add options to demo to enable url loading and sample loading
This commit is contained in:
parent
6f1cc89c47
commit
798ca3bceb
|
@ -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"
|
||||
|
|
|
@ -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>,
|
||||
);
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue