How to Hygraph

Video Reactions with Remix and Hygraph

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

Jamie Barton

, Dec 21, 2021

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

undefined

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 hygraphClient.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 Hygraph):

<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.

Blog Author

Jamie Barton

Jamie is a software engineer turned developer advocate. Born and bred in North East England, he loves learning and teaching others through video and written tutorials. Jamie currently publishes Weekly GraphQL Screencasts.