Merge pull request #1091 from joshunrau/dev

chore: update libui

Author: joshunrau

apps/playground/src/components/Editor/Editor.tsx

@@ -146,6 +146,7 @@ export const Editor = () => {
       <FileUploadDialog
         accept={{
           'application/json': ['.json'],
+          'audio/mpeg': ['.mp3'],
           'image/jpeg': ['.jpg', '.jpeg'],
           'image/png': ['.png'],
           'image/webp': ['.webp'],

apps/playground/src/components/Editor/EditorFileButton.tsx

@@ -33,6 +33,7 @@ export const EditorFileButton = ({ filename, isActive, onDelete }: EditorFileBut
     if (filename !== displayFilename) {
       rename();
     }
+    setIsRenaming(false);
   });
 
   useEffect(() => {

apps/playground/src/components/Editor/EditorFileIcon.tsx

@@ -100,6 +100,14 @@ export const EditorFileIcon = ({ filename }: EditorFileIconProps) => {
             />
           </svg>
         ))
+        .with('.mp3', () => (
+          <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m6 10h-4v8a4 4 0 1 1-4-4 3.96 3.96 0 0 1 2 .555V8h6Z"
+              fill="#ef5350"
+            />
+          </svg>
+        ))
         .with('.html', () => (
           <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
             <path

apps/playground/src/components/Editor/EditorInput.tsx

@@ -9,7 +9,7 @@ export const EditorInput = React.forwardRef<
   return (
     <input
       className={cn(
-        'focus:ring-ring focus-visible:ring-ring -my-1 h-full w-full cursor-pointer truncate bg-inherit p-1 transition-colors read-only:focus:ring-0 focus-visible:outline-none focus-visible:ring-1 read-only:focus-visible:ring-0',
+        'focus:ring-ring focus-visible:ring-ring -my-1 h-full w-full cursor-pointer truncate bg-inherit p-1 ring-1 transition-colors read-only:pointer-events-none read-only:ring-0',
         className
       )}
       ref={ref}

apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Media/CatVideo.tsx

@@ -0,0 +1,36 @@
+import { useState } from '/runtime/v1/[email protected]';
+
+import catVideo from './cat-video.mp4';
+
+export const CatVideo: React.FC<{ onNext: (isCorrect: boolean) => void }> = ({ onNext }) => {
+  const [value, setValue] = useState('');
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <label htmlFor="animal-select">Which Animal Did You See?</label>
+        <select
+          id="animal-select"
+          value={value}
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+        >
+          <option value="">--Please choose an option--</option>
+          <option value="dog">Dog</option>
+          <option value="cat">Cat</option>
+          <option value="hamster">Hamster</option>
+          <option value="parrot">Parrot</option>
+          <option value="cow">Cow</option>
+          <option value="spider">Spider</option>
+          <option value="goldfish">Goldfish</option>
+        </select>
+      </div>
+      <video controls>
+        <source src={catVideo} type="video/mp4" />
+      </video>
+      <button disabled={!value} type="button" onClick={() => onNext(value === 'cat')}>
+        Next
+      </button>
+    </div>
+  );
+};

apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Media/CowAudio.tsx

@@ -0,0 +1,36 @@
+import { useState } from '/runtime/v1/[email protected]';
+
+import cowMoo from './cow-moo.mp3';
+
+export const CowAudio: React.FC<{ onNext: (isCorrect: boolean) => void }> = ({ onNext }) => {
+  const [value, setValue] = useState('');
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <label htmlFor="animal-select">Which Animal Did You Hear?</label>
+        <select
+          id="animal-select"
+          value={value}
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+        >
+          <option value="">--Please choose an option--</option>
+          <option value="dog">Dog</option>
+          <option value="cat">Cat</option>
+          <option value="hamster">Hamster</option>
+          <option value="parrot">Parrot</option>
+          <option value="cow">Cow</option>
+          <option value="spider">Spider</option>
+          <option value="goldfish">Goldfish</option>
+        </select>
+      </div>
+      <audio controls>
+        <source src={cowMoo} type="audio/mpeg" />
+      </audio>
+      <button disabled={!value} type="button" onClick={() => onNext(value === 'cow')}>
+        Next
+      </button>
+    </div>
+  );
+};

apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Media/Task.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from '/runtime/v1/[email protected]';
+import { match } from '/runtime/v1/[email protected]';
+import { z } from '/runtime/v1/[email protected]';
+
+import { CatVideo } from './CatVideo.tsx';
+import { CowAudio } from './CowAudio.tsx';
+
+export const $TaskData = z.object({
+  identifiedCat: z.boolean(),
+  identifiedCow: z.boolean(),
+  seconds: z.number().int().nonnegative()
+});
+
+export type TaskData = z.infer<typeof $TaskData>;
+
+export const Task: React.FC<{ done: (data: TaskData) => void }> = ({ done }) => {
+  const [index, setIndex] = useState<0 | 1 | 2>(0);
+  const [seconds, setSeconds] = useState(0);
+  const [identifiedCow, setIdentifiedCow] = useState<boolean>();
+
+  useEffect(() => {
+    if (index === 0) {
+      return;
+    }
+    const interval = setInterval(() => {
+      setSeconds((seconds) => seconds + 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [index]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', padding: '0px 10px' }}>
+      {index > 0 && <p>Time Elapsed: {seconds}</p>}
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+          flexGrow: 1,
+          justifyContent: 'center'
+        }}
+      >
+        {match(index)
+          .with(0, () => (
+            <>
+              <h1 style={{ textAlign: 'center' }}>Welcome</h1>
+              <button
+                style={{
+                  backgroundColor: 'blue',
+                  border: 'none',
+                  borderRadius: '8px',
+                  color: 'white',
+                  cursor: 'pointer',
+                  padding: '8px 24px'
+                }}
+                type="button"
+                onClick={() => {
+                  setIndex(1);
+                }}
+              >
+                Begin
+              </button>
+            </>
+          ))
+          .with(1, () => (
+            <CowAudio
+              onNext={(identifiedCow) => {
+                setIdentifiedCow(identifiedCow);
+                setIndex(2);
+              }}
+            />
+          ))
+          .with(2, () => (
+            <CatVideo
+              onNext={(identifiedCat) => {
+                done({ identifiedCat, identifiedCow: identifiedCow!, seconds });
+              }}
+            />
+          ))
+          .exhaustive()}
+      </div>
+    </div>
+  );
+};

apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Video/cat-video.mp4 renamed to apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Media/cat-video.mp4

@@ -0,0 +1,51 @@
+import { defineInstrument } from '/runtime/v1/@opendatacapture/runtime-core';
+import { createRoot } from '/runtime/v1/[email protected]/client.js';
+
+import { $TaskData, Task } from './Task.tsx';
+
+import './styles.css';
+
+export default defineInstrument({
+  clientDetails: {
+    estimatedDuration: 1,
+    instructions: ['Please follow the instructions on the screen.']
+  },
+  content: {
+    render(done) {
+      const rootElement = document.createElement('div');
+      document.body.appendChild(rootElement);
+      const root = createRoot(rootElement);
+      root.render(<Task done={done} />);
+    }
+  },
+  details: {
+    authors: ['Joshua Unrau'],
+    description: 'This test assesses whether a person can identify various animals',
+    license: 'Apache-2.0',
+    title: 'Interactive With Embedded Media'
+  },
+  internal: {
+    edition: 1,
+    name: 'CAT_VIDEO_TASK'
+  },
+  kind: 'INTERACTIVE',
+  language: 'en',
+  measures: {
+    score: {
+      kind: 'computed',
+      label: 'Percentage Correct',
+      value: (data) => {
+        return Object.values(data).filter(Boolean).length / Object.keys(data).length;
+      },
+      visibility: 'visible'
+    },
+    seconds: {
+      kind: 'const',
+      label: 'Seconds to Complete',
+      ref: 'seconds',
+      visibility: 'visible'
+    }
+  },
+  tags: ['Interactive', 'React'],
+  validationSchema: $TaskData
+});

apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Media/cow-moo.mp3

@@ -0,0 +1,4 @@
+body {
+  margin: 0px;
+  padding: 0px;
+}