fix: title would not get rendered and rendering times be wrong (#254)

src/react/ChatProvider.tsx

@@ -21,6 +21,7 @@ export default () => {
 
   useEffect(() => {
     bot.addListener('message', (jsonMsg, position) => {
+      if (position === 'game_info') return // ignore action bar messages, they are handled by the TitleProvider
       const parts = formatMessage(jsonMsg)
 
       setMessages(m => {

src/react/Title.stories.tsx

@@ -23,9 +23,9 @@ export const Primary: Story = {
       text: 'Action bar text'
     },
     transitionTimes: {
-      fadeIn: 2500,
-      stay: 17_500,
-      fadeOut: 5000
+      fadeIn: 500,
+      stay: 3500,
+      fadeOut: 1000
     }
   }
 }

src/react/Title.tsx

@@ -29,7 +29,8 @@ const Title = ({
   const [mounted, setMounted] = useState(false)
   const [useEnterTransition, setUseEnterTransition] = useState(true)
 
-  const defaultDuration = 500
+  const defaultFadeIn = 500
+  const defaultFadeOut = 1000
   const startStyle = {
     opacity: 1,
     transition: `${transitionTimes.fadeIn}ms ease-in-out all` }
@@ -54,10 +55,10 @@ const Title = ({
     <div className='title-container'>
       <Transition
         in={openTitle}
-        timeout={transitionTimes ? {
-          enter: transitionTimes.fadeIn,
-          exit: transitionTimes.fadeOut,
-        } : defaultDuration}
+        timeout={{
+          enter: transitionTimes?.fadeIn ?? defaultFadeIn,
+          exit: transitionTimes?.fadeOut ?? defaultFadeOut,
+        }}
         mountOnEnter
         unmountOnExit
         enter={useEnterTransition}
@@ -83,10 +84,10 @@ const Title = ({
       </Transition>
       <Transition
         in={openActionBar}
-        timeout={transitionTimes ? {
-          enter: transitionTimes.fadeIn,
-          exit: transitionTimes.fadeOut,
-        } : defaultDuration}
+        timeout={{
+          enter: transitionTimes?.fadeIn ?? defaultFadeIn,
+          exit: transitionTimes?.fadeOut ?? defaultFadeOut,
+        }}
         mountOnEnter
         unmountOnExit
         // enter={useEnterTransition}

src/react/TitleProvider.tsx

@@ -1,11 +1,13 @@
 import { useEffect, useMemo, useState } from 'react'
+import mojangson from 'mojangson'
+import nbt from 'prismarine-nbt'
 import type { ClientOnMap } from '../generatedServerPackets'
 import Title from './Title'
 import type { AnimationTimes } from './Title'
 
 
 const defaultText: Record<string, any> = { 'text': '' }
-const defaultTimings: AnimationTimes = { fadeIn: 400, stay: 3800, fadeOut: 800 }
+const defaultTimings: AnimationTimes = { fadeIn: 500, stay: 3500, fadeOut: 1000 }
 
 const ticksToMs = (ticks: AnimationTimes) => {
   ticks.fadeIn *= 50
@@ -14,6 +16,20 @@ const ticksToMs = (ticks: AnimationTimes) => {
   return ticks
 }
 
+const getComponent = (input: string | any) => {
+  if (typeof input === 'string') {
+    // raw json is sent
+    return mojangson.simplify(mojangson.parse(input))
+  } else if (input.type === 'string') {
+    // this is used for simple chat components without any special properties
+    return { 'text': input.value }
+  } else if (input.type === 'compound') {
+    // this is used for complex chat components with special properties
+    return nbt.simplify(input)
+  }
+  return input
+}
+
 export default () => {
   const [title, setTitle] = useState<string | Record<string, any>>(defaultText)
   const [subtitle, setSubtitle] = useState<string | Record<string, any>>(defaultText)
@@ -25,14 +41,14 @@ export default () => {
   useMemo(() => {
     // todo move to mineflayer
     bot._client.on('set_title_text', (packet) => {
-      setTitle(JSON.parse(packet.text))
+      setTitle(getComponent(packet.text))
       setOpenTitle(true)
     })
     bot._client.on('set_title_subtitle', (packet) => {
-      setSubtitle(JSON.parse(packet.text))
+      setSubtitle(getComponent(packet.text))
     })
     bot._client.on('action_bar', (packet) => {
-      setActionBar(JSON.parse(packet.text))
+      setActionBar(getComponent(packet.text))
       setOpenActionBar(true)
     })
     bot._client.on('set_title_time', (packet) => {
@@ -51,6 +67,7 @@ export default () => {
 
 
     bot.on('actionBar', (packet) => {
+      setAnimTimes({ fadeIn: 0, stay: 2000, fadeOut: 1000 })
       setActionBar(packet)
       setOpenActionBar(true)
     })