[ts-sdk] Add offline processing

[wkozyra95]

Api changes

• Add Slides/Slide components
• Add Show component
• Add the useAfterTimestamp hook (internally used by Show)
• Add useCurrentTimestamp returns the current timestamp (does not trigger re-render for every time change)
  • Alternative 1: Add a hook that returns a function that returns a timestamp
  • Alternative 2: Add a hook that returns some context object that has a method that returns a timestamp
  • Alterantive 3: Do not expose it, but instead make useAfterTimestamp return the current timestamp (and maybe change name of that hook)
• Add useBlockingTask hook
  • For live cases run the async function on mount. Hook returns result if promise resolved or undefined otherwise
    • Similiar to https://react.dev/reference/react/use
  • For offline cases it blocks rendering until promise resolves and returns the result after.
• Keep newBlockingTask function prrivate (internal implementation of useBlockingTask)
  • When it would be usfull as public API?
    • It could be useful if you want to implement something more advanced than use useBlockingTask, e.g. instead of running on mount it would rerun on specific props changes, or it should trigger after some PTS
  • Alternative 1: Make that function public and add some hook that returns TimeContext object. (newBlockingTask needs the context as argument)
  • Alternative 2: Add hook e.g. useBlockingTaskBuilder that returns a function to start a new blocking task.
• Temporarily make public useTimeLimitedComponent.
  • That hook is intended to be private after we start using it in InputStream or Mp4 components. It is public for now, so we can write some examples and test internalls.
  • Alternative 1: Make that hook public so users can write their own components with a duration.

TODO in follow up

• useInputStream will return correct states for offline processing based on offset and calculated duration.

function ExampleAppWithMultipleScreens() {
  return (
    <>
      <Show timestampMS={{ end: 3000 }}>
        <SomeComponent description="show from the beginning until 3 second" />
      </Show>
      <Show timestampMs={{ start: 3000, end: 6000 }}>
        <SomeComponent description="show between 3s and 6s />
      </Show>
      <Show delayMs={3000}>
        <SomeComponent description="3 seconds after mount" />
      </Show>
    </>
  );
}

function ExampleApp() {
  return (
    <View>
      <Slides>
        <Slide>
          <SomeComponent description="duration based on components inside Input" />
        </Slide>
        <Slide>
          <SomeComponent description="duration based on components inside Input" />
        </Slide>
        <Slide durationMs={3_000}>
          <SomeComponent  description="duration 3 seconds, ignore components" />
        </Slide>
      </Slides>
    </View>
  );
}

function ExampleAppWithBlockingTask() {
  const text = useBlockingTask(async function() {
     const response = await fetch("https://some/data")
     return await response.text()
  });
  return (
    <View>
      <Text>{text}</Text>
    </View>
  );
}

Currently, there are no components that support automatic slide change. I'm planning to add

• Support for InputStream if it is mp4 to set it based on it's duration
• New Mp4 component that is basically InputStream but does not require registration
• (maybe) some fake component that does not render to anything but if it is inserted in scene it is forcing some duration

[BrtqKr]

either <Show timeRange={{ start: 5000, end: 8000 }}> or <Show timeRangeMs={{ start: 5000, end: 8000 }}>, but I prefer the first one - I'm not sure if that many libraries specify the unit in the props in this manner. You can usually safely assume that it's ms.

[BrtqKr]

I'd only remove the unit to unify it with the timestamp, if necessary

[BrtqKr]

I'd only remove the unit to unify it with the timestamp, if necessary

[BrtqKr]

same with delay

[noituri]

I'm not sure if I understand the flow here.

• waitForRenderEnd() waits for this.promiseRes() to be called. Which is called in 2 cases:
  • updateTimeout is executed first, or
  • renderTimeout is executed first

I don't see any situation where this.promiseRes is called outside of those timeouts. Is that how it's supposed to work?

[wkozyra95]

Yes, this mechanism is similar in the idea to throttling. We want to send an update when we know that onUpdate was not called for 20ms. The second time limit (renderTimeout) is to just protect against some infinite loop

[noituri]

LGTM