React Comic Player

Charisma.ai React component for playing web stories like an interactive comic.

pnpm i @charisma-ai/react-comic-player

Integrating into your own app

There's a demo app in ./demo/comic which shows how to integrate the comic player into a React app.

First, integrate @charisma-ai/react into your React app. Once that's done, you should have at least a playthroughToken, a conversationUuid, a Playthrough component, and a Conversation component.

Then, the <ComicPlayer> needs to be linked to the same conversation, so it can display the media for the messages as they arrive.

To do this, render your <ComicPlayer> inside the same <Playthrough> and <Conversation> component, and pass in the same conversation into <ComicPlayer>. The best way to do this is to use the useConversationContext context:

<Playthrough {...playthroughProps}>
  <Conversation {conversationProps}>
    <MyPlayer />
  </Conversation>
</Playthough>

MyPlayer.tsx

const conversation = useConversationContext()

return (
  <div style={{ width: 340, height: 600 }}>
    <ComicPlayer cconversation={conversation} />
  </div>
)

To style the component, import the stylesheet:

import "@charisma-ai/react-comic-player/styles.css";

ComicPlayer is a responsive component, and fills 100% of the height and width of its parent container. If you wanted a full-screen player, for example, you could set the parent's height and width to 100vh and 100vw. Depending on if the comic player is in a portrait or landscape orientation, the ComicPlayer will only display media layers that are configured for that orientation.

ComicPlayer is designed to only display the media of the story. To add controls such as tapping or replying, these should be implemented outside the ComicPlayer. The useConversation hook or Conversation component can be used to link the controls to the same conversationUuid.