Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Playground sidepanel can be toggled with a button. #13

Merged
merged 8 commits into from
Dec 5, 2024
Merged

Playground sidepanel can be toggled with a button. #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
280aa81
Removed size prop from example
cristianvogel Mar 11, 2024
929856c
example should be createRef not createNode
cristianvogel Jun 7, 2024
5289fc8
Merge branch 'elemaudio:main' into main
cristianvogel Jun 7, 2024
7f25587
Fixed broken API link
cristianvogel Jul 23, 2024
d879eeb
Merge branch 'elemaudio:main' into main
cristianvogel Jul 23, 2024
bf49c08
Added button to toggle full width editor
cristianvogel Jul 27, 2024
3f39eff
Added ShifterMesh
cristianvogel Aug 14, 2024
dc9a99e
Corrected return type of setProperty
cristianvogel Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/img/showcase/shiftermesh.webp
View file
Open in desktop
Binary file not shown.
25 changes: 15 additions & 10 deletions src/components/playground/controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
ArrowPathIcon,
ArrowUpOnSquareIcon,
CommandLineIcon,
ArrowRightOnRectangleIcon,
} from '@heroicons/react/24/outline';


Expand All @@ -25,31 +26,35 @@ export function Controls(props) {
onShare,
statusMessage,
shareMessage,
toggleInfoPanel
} = props;

return (
<div className="h-full flex">
<div className="flex-0 w-1/2 flex items-center px-5">
<div className="flex h-full">
<div className="flex items-center w-1/2 px-5 flex-0">
<Button onClick={onPlayPause}>
{(isRunning
? <PauseIcon className="h-5 w-5" />
: <PlayIcon className="h-5 w-5" />
? <PauseIcon className="w-5 h-5" />
: <PlayIcon className="w-5 h-5" />
)}
</Button>
<Button onClick={onRestart}>
<ArrowPathIcon className="h-5 w-5" />
<ArrowPathIcon className="w-5 h-5" />
</Button>
<Button onClick={onShare}>
<ArrowUpOnSquareIcon className="h-5 w-5" />
<ArrowUpOnSquareIcon className="w-5 h-5" />
</Button>
<Button onClick={toggleInfoPanel}>
<ArrowRightOnRectangleIcon className="w-5 h-5" />
</Button>
{shareMessage && (
<span className="text-sm text-pink-400">{shareMessage}</span>
)}
</div>
<div className="flex-0 w-1/2 max-w-1/2 flex items-center px-4">
<div className="flex-1 max-w-full flex items-center py-2 text-gray-700 dark:text-gray-500">
<CommandLineIcon className="h-5 w-5" />
<span className="px-2 flex-1 truncate">{statusMessage}</span>
<div className="flex items-center w-1/2 px-4 flex-0 max-w-1/2">
<div className="flex items-center flex-1 max-w-full py-2 text-gray-700 dark:text-gray-500">
<CommandLineIcon className="w-5 h-5" />
<span className="flex-1 px-2 truncate">{statusMessage}</span>
</div>
</div>
</div>
Expand Down
28 changes: 21 additions & 7 deletions src/components/playground/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export function Playground() {
const [editorValue, setEditorValue] = useState(defaultEditorValue.trim());
const [runtime, setRuntimeInstance] = useState(null);
const [outdatedBrowser, setOutdatedBrowser] = useState(false);
const [showInfoPanel, setShowInfoPanel] = useState(true);

// Mount the runtime
useEffect(() => {
Expand Down Expand Up @@ -123,36 +124,49 @@ export function Playground() {
}, 2000);
}, [editorValue]);

const toggleInfoPanel = useCallback(() => {
setShowInfoPanel(prevShowInfoPanel => !prevShowInfoPanel);
}, []);



return (
<div className="el__full-height w-full flex flex-col">
<div className="flex flex-col w-auto el__full-height">
<Head>
<meta name="robots" content="noindex,nofollow" />
<script dangerouslySetInnerHTML={{ __html: awaitImportScript }} />
<script type="importmap" dangerouslySetInnerHTML={{ __html: getImportMapScript('3.2.0') }} />
</Head>
<div className="flex-0 flex">
<div className="flex flex-0">
<div className="h-[78vh] flex-1">
<Editor
className="w-full"
width={ showInfoPanel ? "95%" : "100%" }
height="78vh"
theme="vs-dark" // or "light"
defaultLanguage="javascript"
options={{ minimap: { enabled: false }}}
options={{
minimap: { enabled: false },
fontSize: 16,
}
}
onChange={onChange}
value={editorValue} />
</div>
<div className="h-[78vh] flex-1">

{ showInfoPanel && <div className="flex-1 h-[78vh]" >
<InfoPanel outdatedBrowser={outdatedBrowser} />
</div>
</div> }


</div>
<div className="flex-1">
<Controls
isRunning={isRunning}
statusMessage={statusMessage}
onPlayPause={onPlayPause}
onShare={onShare}
shareMessage={shareMessage} />
shareMessage={shareMessage}
toggleInfoPanel={toggleInfoPanel}/>
</div>
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions src/components/playground/info.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const examples = [

export function InfoPanel({outdatedBrowser}) {
return (
<div className="p-4 h-full overflow-y-scroll">
<div className="h-full p-4 ">
<h2 className="text-3xl font-bold">Elementary Playground</h2>
{outdatedBrowser && (
<Callout type="error">
Expand All @@ -35,14 +35,14 @@ export function InfoPanel({outdatedBrowser}) {
</p>
<p className="mt-4">
As a general guideline, you can write anything you like as long as it's an ES6 module with a default export
object containing at least a <code className="bg-gray-200 dark:bg-gray-700 p-1 rounded-md border border-gray-300 dark:border-gray-800">render()</code> method. This method will be invoked upon evaluating your code to
object containing at least a <code className="p-1 bg-gray-200 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-800">render()</code> method. This method will be invoked upon evaluating your code to
update the running state of the audio runtime.
</p>
<p className="mt-4">
For more information, check out the <Link href="/docs/playground_api" className="text-pink-400 hover:text-pink-500">Playground API Reference</Link>,
or load some examples:
</p>
<ul className="list-disc px-6 py-2">
<ul className="px-6 py-2 list-disc">
{examples.map(({name, href}) => {
return (
<li key={name}>
Expand Down
5 changes: 3 additions & 2 deletions src/pages/docs/guides/Custom_Native_Nodes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,10 @@ class MyCustomNode : public elem::GraphNode<float> {
public:
using elem::GraphNode<float>::GraphNode;

void setProperty(std::string const& key, elem::js::Value const& val) override
int setProperty(std::string const& key, elem::js::Value const& val) override
{
// TODO
return elem::ReturnCode::Ok();
}

void process (elem::BlockContext<float> const& ctx) override
Expand Down Expand Up @@ -130,4 +131,4 @@ inputs will be served to your custom node instance as input buffer data in `elem

## API

For a complete and current enumeration of the `elem::GraphNode<FloatType>` API, please see [GraphNode.h](https://github.com/elemaudio/elementary/blob/main/runtime/GraphNode.h).
For a complete and current enumeration of the `elem::GraphNode<FloatType>` API, please see [GraphNode.h](https://github.com/elemaudio/elementary/blob/main/runtime/elem/GraphNode.h).
3 changes: 3 additions & 0 deletions src/pages/showcase.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import { Card, Cards } from 'nextra/components';


<Cards>
<Card image title="NEL Shifter Mesh" href="https://nel-shifter-mesh.vercel.app/" target="_blank">
<>![Beam Showcase Preview](/img/showcase/shiftermesh.webp)</>
</Card>
<Card image title="Lunacy Audio Beam" href="https://lunacy.audio/products/beam/" target="_blank">
<>![Beam Showcase Preview](/img/showcase/beam.jpg)</>
</Card>
Expand Down