@charisma-ai/react-comic-player-pa-mod
v1.0.0
Published
Charisma.ai React component for web stories modified for PA project.
Downloads
6
Keywords
Readme
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 test app in ./test/test-app
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
, and a Playthrough
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>
component, and pass in the same conversationUuid
into <ComicPlayer>
:
<Playthrough {...yourPlaythroughProps}>
<div style={{ width: 340, height: 600 }}>
<ComicPlayer conversationUuid={conversationUuid} />
</div>
</Playthrough>
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
.