Video Reactions with Remix and GraphCMS

Learn how to capture video reactions with Remix actions and store them using GraphQL within your GraphCMS project.

Jamie Barton
Jamie Barton
adding-video-reactions-with-remix

I'm super excited to share a video tutorial walking you through storing reactions to videos with GraphCMS.

Reactions preview

When a user visits a page with a video, they can play the video and add a reaction at any point that the video is playing. There are four reactions we'll store, but you can add as many as you like if you're following along.

All of the code is available on GitHub if you'd rather skip to the fun stuff.

We'll be using Remix to:

  • Fetch a list of videos
  • Fetch reactions per video
  • Handle actions for new reactions

Here's a quick peak at the code powering saving the reactions:

export let action: ActionFunction = async ({ request, params }) => {
const { videoId } = params;
const formData = await request.formData();
const { timestamp, duration, emoji } = Object.fromEntries(formData);
await graphcmsClient.request(CreateReaction, {
timestamp: Number(timestamp),
duration: Number(duration),
emoji: String(emoji),
videoId,
});
return redirect(`/${videoId}`);
};

As you can see, there isn't much to it! The only useState we have throughout the application is to store the seconds elapsed and the duration of the video.

const [secondsEnlapsed, setSecondsEnlapsed] = useState<number>(0);
const [duration, setDuration] = useState<number>(0);

Then, using the Remix Form component, we can capture the reactions of users. We'll specify different <button /> values (as enums stored in GraphCMS):

<Form
method="post"
style={{
display: "flex",
justifyContent: "center",
marginTop: "30px",
}}
>
<input type="hidden" name="timestamp" value={secondsEnlapsed} />
<input type="hidden" name="duration" value={duration} />
<button name="emoji" type="submit" value="CLAP">
👏
</button>
<button name="emoji" type="submit" value="HEART">
❤️
</button>
<button name="emoji" type="submit" value="SHOCK">
😱
</button>
<button name="emoji" type="submit" value="EYE">
👁
</button>
{actionMessage ? (
<p>
<b>{actionMessage}</b>
</p>
) : null}
</Form>

I hope you enjoy the video! Let me know in the comments if you have any questions.

It's Easy To Get Started

GraphCMS plans are flexibly suited to accommodate your growth. Get started for free, or request a demo to discuss larger projects with more complex needs