refactor, better naming

docs/docusaurus.config.ts

@@ -3,7 +3,7 @@ import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
-  title: 'Live Compositor',
+  title: 'LiveCompositor',
   favicon: 'img/favicon.png',
 
   // Set the production url of your site here
@@ -65,6 +65,25 @@ const config: Config = {
   ],
 
   themeConfig: {
+    metadata: [
+      { name: 'description', content: 'Real-time, low latency, programmable video & audio mixer' },
+      { name: 'keywords', content: 'video, audio, mixing, real-time, live' },
+      { name: 'twitter:card', content: 'summary_large_image' },
+      { name: 'twitter:title', content: 'LiveCompositor' },
+      {
+        name: 'twitter:description',
+        content: 'Real-time, low latency, programmable video & audio mixer',
+      },
+      { name: 'twitter:site', content: 'ElixirMembrane' },
+      { name: 'og:type', content: 'website' },
+      { name: 'og:image', content: 'https://compositor.live/img/logo.webp' },
+      { name: 'og:title', content: 'LiveCompositor' },
+      {
+        name: 'og:description',
+        content: 'Real-time, low latency, programmable video & audio mixer',
+      },
+      { name: 'og:url', content: 'https://compositor.live/' },
+    ],
     colorMode: {
       defaultMode: 'dark',
     },

docs/index.d.ts

@@ -1,4 +1,2 @@
-declare module '*.png';
 declare module '*.svg';
-declare module '*.jpeg';
-declare module '*.jpg';
+declare module '*.webp';

docs/pages/api/components/WebView.md

@@ -4,7 +4,7 @@ hide_table_of_contents: true
 title: WebView
 ---
 
-[<span class="badge badge--info">Required feature: web_renderer</span>](../../deployment/overview.md#web-renderer-support)
+[<span className="badge badge--info">Required feature: web_renderer</span>](../../deployment/overview.md#web-renderer-support)
 
 import Docs from "@site/pages/api/generated/component-WebView.md"
 

docs/src/api.ts

@@ -1,3 +1,5 @@
+const BACKEND_URL: URL = new URL('http://localhost:8081');
+
 interface RequestObject {
   method: string;
   headers: {
@@ -6,41 +8,43 @@ interface RequestObject {
   body: string;
 }
 
-export function buildRequestSceneObject(method: string, scene: object): RequestObject {
+function buildRequestSceneObject(body: object): RequestObject {
   return {
-    method: method,
+    method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
-    body: JSON.stringify({ scene: scene }),
+    body: JSON.stringify(body),
   };
 }
 
-export async function handleRenderImageRequest(
-  backendUrl: URL,
-  requestObject: RequestObject
-): Promise<Blob> {
-  const renderImageUrl = new URL('/render_image', backendUrl);
-  const response = await fetch(renderImageUrl, requestObject);
-  if (response.status >= 400) {
-    const contentType = response.headers.get('Content-Type');
-    const errorStatus = `Error status: ${response.status}`;
-    let errorMsg = '';
+async function getErrorDescription(response: Response): Promise<string> {
+  const contentType = response.headers.get('Content-Type');
+  const errorStatus = `Error status: ${response.status}`;
+  let errorMessage = '';
 
-    if (contentType === 'application/json') {
-      const apiError = await response.json();
-      if (apiError.stack) {
-        errorMsg = `Error message: ${apiError.stack.map(String).join('\n')}`;
-      } else {
-        errorMsg = `Error message: ${apiError.message}`;
-      }
+  if (contentType === 'application/json') {
+    const apiError = await response.json();
+    if (apiError.stack) {
+      errorMessage = `Error message: ${apiError.stack.map(String).join('\n')}`;
     } else {
-      const txt = await response.text();
-      errorMsg = `Error message: ${txt}`;
+      errorMessage = `Error message: ${apiError.message}`;
     }
-
-    throw new Error(`${errorStatus}\n${errorMsg}`);
+  } else {
+    const txt = await response.text();
+    errorMessage = `Error message: ${txt}`;
   }
+  return `${errorStatus};\n${errorMessage}`;
+}
 
+export async function renderImage(body: object): Promise<Blob> {
+  const requestObject = buildRequestSceneObject(body);
+  const renderImageUrl = new URL('/render_image', BACKEND_URL);
+  const response = await fetch(renderImageUrl, requestObject);
+
+  if (response.status >= 400) {
+    const errorDescription = await getErrorDescription(response);
+    throw new Error(errorDescription);
+  }
   return await response.blob();
 }

docs/src/components/PlaygroundCodeEditor.module.css

@@ -0,0 +1,12 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+.codeEditor{
+  height: 100%;
+  width: 100%;
+  min-width: 300px;
+  min-height: 120px;
+  resize: none;
+  justify-content: center;
+}

docs/src/components/PlaygroundCodeEditor.tsx

@@ -1,23 +1,19 @@
-import styles from '../pages/playground.module.css';
+import styles from './PlaygroundCodeEditor.module.css';
 import { ChangeEvent, useState } from 'react';
 
 interface PlaygroundCodeEditorProps {
   onChange: (content: object | Error) => void;
   initialCodeEditorContent: string;
 }
 
-function PlaygroundCodeEditor({
-  onChange,
-  initialCodeEditorContent,
-}: PlaygroundCodeEditorProps): JSX.Element {
-  const [currCodeEditorContent, setCurrCodeEditorContent] =
-    useState<string>(initialCodeEditorContent);
+function PlaygroundCodeEditor({ onChange, initialCodeEditorContent }: PlaygroundCodeEditorProps) {
+  const [content, setContent] = useState<string>(initialCodeEditorContent);
 
   const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    const currCode = event.target.value;
-    setCurrCodeEditorContent(currCode);
+    const codeContent = event.target.value;
+    setContent(codeContent);
     try {
-      const scene = JSON.parse(currCode);
+      const scene = JSON.parse(codeContent);
       onChange(scene);
     } catch (error) {
       onChange(error);
@@ -29,7 +25,7 @@ function PlaygroundCodeEditor({
       className={styles.codeEditor}
       name="inputArea"
       placeholder="Enter your code to try it out"
-      value={currCodeEditorContent}
+      value={content}
       onChange={handleChange}
     />
   );

docs/src/components/PlaygroundPreview.tsx

@@ -1,27 +1,25 @@
 interface PlaygroundPreviewProps {
-  responseData: {
-    imageUrl: string;
-    errorMessage: string;
-  };
+  imageUrl?: string;
+  errorMessage?: string;
 }
 
-function PlaygroundPreview({ responseData }: PlaygroundPreviewProps): JSX.Element {
-  if (responseData.errorMessage) {
-    return <div>{responseData.errorMessage}</div>;
-  }
-  if (responseData.imageUrl) {
+function PlaygroundPreview({ imageUrl, errorMessage }: PlaygroundPreviewProps) {
+  if (errorMessage) {
+    return <div>{errorMessage}</div>;
+  } else if (imageUrl) {
     return (
       <img
-        src={responseData.imageUrl}
+        src={imageUrl}
         style={{
           objectFit: 'contain',
           height: '100%',
           width: '100%',
         }}
       />
     );
+  } else {
+    return null;
   }
-  return null;
 }
 
 export default PlaygroundPreview;

docs/src/components/PlaygroundRenderSettings.tsx

@@ -1,8 +1,6 @@
-import styles from '../pages/playground.module.css';
-
-function PlaygroundRenderSettings({ onSubmit }: { onSubmit: () => Promise<void> }): JSX.Element {
+function PlaygroundRenderSettings({ onSubmit }: { onSubmit: () => Promise<void> }) {
   return (
-    <div className={styles.settings}>
+    <div style={{ margin: '10px' }}>
       <div className="row">
         <div className="col">Settings:</div>
         <div className="col">

docs/src/css/custom.css

@@ -14,6 +14,9 @@
   --ifm-color-primary-lighter: #8080f9;
   --ifm-color-primary-lightest: #a5abfc;
   --ifm-code-font-size: 95%;
+  --ifm-h1-font-size: 2.25rem;
+  --ifm-h2-font-size: 2rem;
+  --ifm-h3-font-size: 1.5rem;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 

docs/src/pages/index.tsx

@@ -5,7 +5,6 @@ import { GiFeather, GiBattery100, GiSpeedometer } from 'react-icons/gi';
 import { IoCloudOffline } from 'react-icons/io5';
 import { MdAudiotrack, MdLiveTv } from 'react-icons/md';
 import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
 
@@ -14,12 +13,12 @@ import { PropsWithChildren } from 'react';
 import { IconContext, IconType } from 'react-icons';
 import MembraneLogo from '@site/static/img/membrane-logo.svg';
 import SwmLogo from '@site/static/img/swm-logo.svg';
-import ComposingImg from '@site/static/img/how_it_works.png';
+import ComposingImg from '@site/static/img/how_it_works.webp';
 import WebGpuLogoDark from '@site/static/img/webgpu-dark.svg';
 import WebGpuLogoLight from '@site/static/img/webgpu-light.svg';
-import VideoConferencingImg from '@site/static/img/videoconferencing.jpg';
-import StreamingImg from '@site/static/img/streaming.jpg';
-import BroadcastingImg from '@site/static/img/broadcasting.jpg';
+import VideoConferencingImg from '@site/static/img/videoconferencing.webp';
+import StreamingImg from '@site/static/img/streaming.webp';
+import BroadcastingImg from '@site/static/img/broadcasting.webp';
 import { useColorMode } from '@docusaurus/theme-common';
 import TypewriterComponent from 'typewriter-effect';
 import ExampleScene from '../components/example_scene';
@@ -85,7 +84,7 @@ function HomepageHeader() {
               autoPlay
               muted
               src="/video/showcase.mp4"
-              poster="/img/showcase_poster.jpg"
+              poster="/img/showcase_poster.webp"
               style={{ width: '100%', display: 'block' }}
             />
           </div>
@@ -98,7 +97,7 @@ function HomepageHeader() {
 function HowItWorks() {
   return (
     <div className="container margin-top--md">
-      <Heading as="h1" className="margin-bottom--md text--center text--primary">
+      <Heading as="h2" className="margin-bottom--md text--center text--primary">
         How it works?
       </Heading>
       <p className={clsx('text--center', styles.grayText)}>
@@ -123,7 +122,7 @@ function HowItWorks() {
 function UseCases() {
   return (
     <div className="container margin-top--md">
-      <Heading as="h1" className="margin-bottom--md text--center text--primary">
+      <Heading as="h2" className="margin-bottom--md text--center text--primary">
         Use cases
       </Heading>
       <p className={clsx('text--center', styles.grayText)}>
@@ -156,7 +155,7 @@ function UseCaseCard(props: UseCaseCardProps) {
   return (
     <div className={clsx('card', styles.card, styles.hoverPrimary)}>
       <div className="text--primary">
-        <Heading as="h2" style={{ textAlign: 'center', margin: 0 }}>
+        <Heading as="h3" style={{ textAlign: 'center', margin: 0 }}>
           {props.title}
         </Heading>
       </div>
@@ -173,7 +172,7 @@ function UseCaseCard(props: UseCaseCardProps) {
 function VisionCards() {
   return (
     <div className="container margin-top--md">
-      <Heading as="h1" className="margin-bottom--md text--center text--primary">
+      <Heading as="h2" className="margin-bottom--md text--center text--primary">
         Vision
       </Heading>
       <p className={clsx('text--center', styles.grayText)}>
@@ -216,7 +215,7 @@ function VisionCard(props: PropsWithChildren<VisionCardProps>) {
         <Icon className={styles.icon} />
       </div>
       <div className="card__header">
-        <Heading as="h2" style={{ textAlign: 'center' }}>
+        <Heading as="h3" style={{ textAlign: 'center' }}>
           {props.title}
         </Heading>
       </div>
@@ -234,7 +233,7 @@ type FeatureProps = {
 function Feature(props: PropsWithChildren<FeatureProps>) {
   const text = (
     <div className="col">
-      <Heading as="h2" className="margin-top--sm">
+      <Heading as="h3" className="margin-top--sm">
         {props.text}
       </Heading>
       <p>{props.secondaryText}</p>
@@ -263,7 +262,7 @@ function Features() {
 
   return (
     <div className="container margin-top--lg margin-bottom--md">
-      <Heading as="h1" className="margin-bottom--md text--center text--primary">
+      <Heading as="h2" className="margin-bottom--md text--center text--primary">
         Capabilities
       </Heading>
       <p className={clsx('text--center', styles.grayText)}>Simple, powerful, fast. Pick three.</p>
@@ -426,7 +425,7 @@ function MembranePlugin() {
 function Usage() {
   return (
     <div className="container">
-      <Heading as="h1" className="margin-bottom--md text--center text--primary">
+      <Heading as="h2" className="margin-bottom--md text--center text--primary">
         Usage
       </Heading>
       <StandaloneSever />
@@ -439,7 +438,7 @@ function Usage() {
 function Licensing() {
   return (
     <div className="container margin-top--lg margin-bottom--md">
-      <Heading as="h1" className="margin-bottom--md text--center text--primary">
+      <Heading as="h2" className="margin-bottom--md text--center text--primary">
         Licensing
       </Heading>
       <div className="card container">
@@ -495,7 +494,7 @@ function ContactUs() {
           <SwmLogo width={220} className="margin--lg" style={{ alignSelf: 'center' }} />
           <div className="col">
             <div className="card__header margin-top--md">
-              <Heading as="h1">
+              <Heading as="h2">
                 <span className="text--primary">Contact</span> us
               </Heading>
             </div>
@@ -517,11 +516,8 @@ function ContactUs() {
 }
 
 export default function Home(): JSX.Element {
-  const { siteConfig } = useDocusaurusContext();
   return (
-    <Layout
-      title={siteConfig.title}
-      description="Tool for real-time video processing / transforming / composing">
+    <Layout>
       <HomepageHeader />
       <div className={styles.sectionSeparator} />
       <HowItWorks />