qwik-flame.tsx

import { component$, useSignal } from '@builder.io/qwik';
import { server$ } from '@builder.io/qwik-city';
import { worker$ } from '@builder.io/qwik-worker';

function streamFileToServer() {
  throw new Error('Function not implemented.');
}

export default component$(() => {
  const fileRef = useSignal<HTMLInputElement>();

  return (
    <div>
      <h1>Upload</h1>
      <input ref={fileRef} type="file" id="input" />
      <button
        onClick$={async () => {
          if (!fileRef.value?.files?.length) return;
          const file = fileRef.value?.files[0];

          const responseStream = await server$(async function* (video) {
            const tmpDir = await fs.mkdtemp(path.join(os.tmpdir(), uuidv4()));

            const fileStream = streamFileToServer();
            const processedThumbnail = worker$(async function* (fileStream) {
              for await (const frame of fileStream) {
                const thumbnail = await command$(
                  'ffmpeg',
                  `-i ${video.url} -vf fps=1/${interval} ${path.join(
                    tmpDir,
                    '%02d.png',
                  )}`,
                );
                yield thumbnail;
              }
            });
            await Promise.all([fileStream(file), processedThumbnail(file)]); // Wait for both to finish

            yield processedStream;
          });
          
          // client
          for await (const thumbnail of responseStream(file)) {
            console.log('Thumbnail received:', thumbnail);
            // TODO: do something
          }
        }}
      >
        Upload
      </button>
    </div>
  );
});