[playground] Fix layout issues + add beter default scene (#742)

software-mansion · Sep 9, 2024 · c88966b · c88966b
1 parent e23ea01
commit c88966b
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 132 deletions.
diff --git a/docs/src/components/example_scene.tsx → docs/src/components/ExampleSceneJson.tsx b/docs/src/components/example_scene.tsx → docs/src/components/ExampleSceneJson.tsx
@@ -1,6 +1,6 @@
 import CodeBlock from '@theme/CodeBlock';
 
-export default function ExampleScene() {
+export default function ExampleSceneJson() {
   return (
     <CodeBlock language="typescript">
       {`{

diff --git a/docs/src/components/PlaygroundPreview.tsx b/docs/src/components/PlaygroundPreview.tsx
@@ -1,4 +1,5 @@
 import { RotatingLines } from 'react-loader-spinner';
+
 interface PlaygroundPreviewProps {
   imageUrl?: string;
   errorMessage?: string;
@@ -9,16 +10,7 @@ function PlaygroundPreview({ imageUrl, errorMessage, loading }: PlaygroundPrevie
   if (errorMessage) {
     return <div style={{ alignContent: 'center', margin: '20px' }}>{errorMessage}</div>;
   } else if (imageUrl) {
-    return (
-      <img
-        src={imageUrl}
-        style={{
-          objectFit: 'contain',
-          height: '100%',
-          width: '100%',
-        }}
-      />
-    );
+    return <img src={imageUrl} className="object-contain max-w-full max-h-full" />;
   } else if (loading) {
     return (
       <div style={{ alignContent: 'center' }}>

diff --git a/docs/src/components/PlaygroundSettings.module.css b/docs/src/components/PlaygroundSettings.module.css
@@ -51,18 +51,26 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     justify-content: center;
-  }
+}
 
 .card {
     min-width: 300px;
     margin: 10px;
     padding: 10px;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--ifm-color-emphasis-200);
     text-align: center;
 }
 
+[data-theme='dark'] .card {
+    border-color: var(--ifm-color-emphasis-200);
+}
+
+[data-theme='light'] .card {
+    border-color: var(--ifm-color-emphasis-800);
+    background-color: var(--ifm-color-emphasis-100);
+}
+
 .cardTitle {
     font-size: 18px;
     font-weight: bold;

diff --git a/docs/src/components/PlaygroundSettings.tsx b/docs/src/components/PlaygroundSettings.tsx
@@ -50,14 +50,20 @@ export default function PlaygroundSettings({
       <div className={styles.settings}>
         <div className={styles.cardsContainer}>
           <Card
-            title="Inputs resolutions"
-            subtitle="settings"
+            title="Inputs"
+            subtitle="Configure resolution for example inputs"
             onClick={() => setModalContent('inputs')}
           />
-
-          <Card title="Images" subtitle="preview" onClick={() => setModalContent('images')} />
-
-          <Card title="Shaders" subtitle="preview" onClick={() => setModalContent('shaders')} />
+          <Card
+            title="Images"
+            subtitle="Check out available images and how to use them"
+            onClick={() => setModalContent('images')}
+          />
+          <Card
+            title="Shaders"
+            subtitle="Check out available shaders and how to use them"
+            onClick={() => setModalContent('shaders')}
+          />
         </div>
       </div>
 

diff --git a/docs/src/components/PlaygroundSettingsImages.module.css b/docs/src/components/PlaygroundSettingsImages.module.css
@@ -6,7 +6,7 @@
 }
 
 .imagePreviewIntro {
-    font-size: 22px;
+    font-size: 18px;
     margin-bottom: 48px;
     padding: 20px;
 }

diff --git a/docs/src/components/PlaygroundSettingsShaders.tsx b/docs/src/components/PlaygroundSettingsShaders.tsx
@@ -6,7 +6,7 @@ export default function PlaygroundSettingsShaders() {
   return (
     <div className={styles.container}>
       <div className={styles.headerContainer}>
-        <div className={styles.headerInputLabel}>Image ID</div>
+        <div className={styles.headerInputLabel}>Shader ID</div>
         <div className={styles.headerDescriptionLabel}>Description</div>
       </div>
       <ShaderInfo

diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
@@ -20,7 +20,7 @@ import WebGpuLogoLight from '@site/static/img/webgpu-light.svg';
 import { PropsWithChildren } from 'react';
 import { IconContext, IconType } from 'react-icons';
 import TypewriterComponent from 'typewriter-effect';
-import ExampleScene from '../components/example_scene';
+import ExampleSceneJson from '../components/ExampleSceneJson';
 import RTCOnBanner from '@site/src/components/RtcOnBanner';
 import styles from './index.module.css';
 
@@ -113,7 +113,7 @@ function HowItWorks() {
           <img src={ComposingImg} alt="Composing" />
         </div>
         <div className={clsx('col col--6', styles.sceneExample)}>
-          <ExampleScene />
+          <ExampleSceneJson />
         </div>
       </div>
     </div>

diff --git a/docs/src/pages/playground.module.css b/docs/src/pages/playground.module.css
diff --git a/docs/src/pages/playground.tsx b/docs/src/pages/playground.tsx
@@ -15,58 +15,9 @@ import {
   InputsSettings,
   Resolution,
 } from '../resolution';
-import styles from './playground.module.css';
+import { defaultJsonScene } from '@site/src/scene/defaultJson';
 
-const INITIAL_SCENE = {
-  type: 'view',
-  background_color_rgba: '#4d4d4dff',
-  children: [
-    {
-      type: 'rescaler',
-      child: { type: 'input_stream', input_id: 'input_1' },
-    },
-    {
-      type: 'rescaler',
-      width: 320,
-      height: 180,
-      top: 20,
-      right: 20,
-      child: { type: 'input_stream', input_id: 'input_2' },
-    },
-    {
-      type: 'rescaler',
-      width: 320,
-      height: 180,
-      top: 20,
-      left: 20,
-      child: { type: 'input_stream', input_id: 'input_3' },
-    },
-    {
-      type: 'rescaler',
-      width: 320,
-      height: 180,
-      bottom: 20,
-      left: 20,
-      child: { type: 'input_stream', input_id: 'input_4' },
-    },
-    {
-      type: 'rescaler',
-      width: 320,
-      height: 180,
-      bottom: 20,
-      right: 20,
-      child: { type: 'input_stream', input_id: 'input_5' },
-    },
-    {
-      type: 'rescaler',
-      width: 640,
-      height: 400,
-      top: 20,
-      right: 800,
-      child: { type: 'input_stream', input_id: 'input_6' },
-    },
-  ],
-};
+const INITIAL_SCENE = defaultJsonScene();
 
 const INITIAL_REACT_CODE = [
   "import React from 'react';\n",
@@ -168,21 +119,19 @@ function Homepage() {
   }, []);
 
   return (
-    <div className={styles.page}>
-      <div className={styles.leftSide}>
-        <div className={styles.codeEditorBox}>
-          {showReactEditor ? (
-            <PlaygroundReactEditor code={code} onCodeChange={setCode} />
-          ) : (
-            <PlaygroundCodeEditor onChange={setScene} initialCodeEditorContent={INITIAL_SCENE} />
-          )}
-        </div>
+    <div className="flex flex-row flex-wrap p-8 lg:h-[calc(100vh-110px)]">
+      <div className="flex-1 m-2 border-2 border-gray-400 border-solid rounded-md max-h-full min-w-[300px] min-h-[500px]">
+        {showReactEditor ? (
+          <PlaygroundReactEditor code={code} onCodeChange={setCode} />
+        ) : (
+          <PlaygroundCodeEditor onChange={setScene} initialCodeEditorContent={INITIAL_SCENE} />
+        )}
       </div>
-      <div className={styles.rightSide}>
-        <div className={styles.preview}>
+      <div className="flex flex-col flex-1 max-h-full">
+        <div className="flex flex-1 m-2 justify-center border-2 border-gray-400 border-solid rounded-md min-w-[300px] min-h-[120px]">
           <PlaygroundPreview {...responseData} />
         </div>
-        <div className={styles.settingsBox}>
+        <div className="flex flex-1 m=2 min-w-[300px] min-h-[400px]">
           <PlaygroundSettings
             onSubmit={handleSubmit}
             isLoading={responseData.loading}

diff --git a/docs/src/scene/defaultJson.ts b/docs/src/scene/defaultJson.ts
@@ -0,0 +1,63 @@
+import { Api } from 'live-compositor';
+
+export function defaultJsonScene(): Api.Component {
+  return {
+    type: 'view',
+    background_color_rgba: '#4d4d4dff',
+    children: [
+      {
+        type: 'view',
+        children: [
+          {
+            type: 'rescaler',
+            top: 0,
+            left: 0,
+            mode: 'fill',
+            child: {
+              type: 'image',
+              image_id: 'landscape',
+            },
+          },
+          {
+            type: 'rescaler',
+            child: {
+              type: 'shader',
+              shader_id: 'remove_greenscreen',
+              children: [{ type: 'image', image_id: 'greenscreen' }],
+              resolution: { width: 2160, height: 2880 },
+            },
+          },
+          {
+            type: 'rescaler',
+            top: 30,
+            left: 30,
+            width: 360,
+            height: 270,
+            vertical_align: 'top',
+            child: {
+              type: 'shader',
+              shader_id: 'rounded_corners',
+              shader_param: { type: 'f32', value: 30 },
+              children: [{ type: 'input_stream', input_id: 'input_1' }],
+              resolution: { width: 360, height: 203 },
+            },
+          },
+        ],
+      },
+      {
+        type: 'tiles',
+        width: 600,
+        padding: 20,
+        children: [
+          { type: 'input_stream', input_id: 'input_2' },
+          { type: 'input_stream', input_id: 'input_3' },
+          { type: 'input_stream', input_id: 'input_4' },
+          { type: 'input_stream', input_id: 'input_5' },
+          { type: 'input_stream', input_id: 'input_6' },
+          { type: 'image', image_id: 'greenscreen' },
+          { type: 'image', image_id: 'test_pattern' },
+        ],
+      },
+    ],
+  };
+}