Question to “template”

[7u5a]

trafficstars

How is it possible to make a live clock?

[tobiasandersen]

We have a helper useClock() hook here: https://github.com/nxtedition/create-caspar-graphics/blob/master/packages/graphics-kit/src/use-clock.js. We haven't documented this one yet, but it can be used similar to the other hooks as described here: https://gfx.nxtedition.com/docs/hooks/use-image.

[7u5a]

Tryed this, but does not seem to work? Ur.zip

[tobiasandersen]

It's close, but the options passed to it should be as described here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat.

This is probably what you want:

const GsapUr = () => {
  const ur = useClock("da-DK", { hour: 'numeric', minute: 'numeric' })

  return (
    <GsapTimeline
      hide={!ur}
      onPlay={timeline => {
        timeline.from('#ur', { opacity: 0 })
      }}
      onStop={timeline => {
        timeline.to('#ur', { opacity: 0 })
      }}
    >
      <div id="ur">
        {ur}
      </div>
    </GsapTimeline>
  )
}