{"id":28011,"date":"2022-03-23T22:26:22","date_gmt":"2022-03-23T22:26:22","guid":{"rendered":"http:\/\/Feedback-Form-Trigger-from-Video-Events-in-Gatsby.js"},"modified":"2022-03-23T22:26:22","modified_gmt":"2022-03-23T22:26:22","slug":"feedback-form-trigger-from-video-events-in-gatsby-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/feedback-form-trigger-from-video-events-in-gatsby-js\/","title":{"rendered":"Feedback Form Trigger from Video Events"},"content":{"rendered":"

Modern web pages rely heavily on interactivity. These tasks include gathering data on user engagement, processing form submissions, and controlling media asset interactivity.\nIn this tutorial, we\u2019ll discuss how to utilize video event triggers to handle user interface changes in a Gatsby.js project.<\/p>\n

Sandbox<\/h2>\n

This project was completed in a Codesandbox<\/a>. To get started quickly, fork the Codesandbox<\/a> or run the project.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Prerequisite<\/h1>\n

The knowledge of JavaScript and React.js is needed for this post. The knowledge of Gatsby.js is not required, but preferred.<\/p>\n

Getting Started with Gatsby<\/h1>\n

Gatsby<\/a> is an open-source static site generator (SSG). Gatsby uses efficient pre-configuration for rapid page loads, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching.<\/p>\n

Gatsby uses webpack<\/a>, G<\/a>raphQL<\/a> and React.js<\/a> to build and render high-performance web apps. Gatsby can also be used to create progressive web apps that adhere to the most current web standards and are designed for speed and security.<\/p>\n

Installation of a video event trigger with a feedback form<\/h1>\n

To create a new project, we use the gatsby new <project name><\/code> command to scaffold a new project.\nOnce the app is initialized and the dependencies automatically installed, we will see a message with instructions for navigating to our site and running it locally. We do this with the command<\/p>\n

cd <project<\/span> name<\/span>><\/span> && gatsby develop\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Gatsby will start a hot-reloading development environment accessible by default at<\/p>\n
http:\/\/localhost:8000<\/code><\/p>\n
The boilerplate project creates a landing page with CSS modules for styling.<\/p>\n
Cloudinary\u2019s robust transformation features can be used to modify the video, which is distributed through an integrated content delivery network (CDN).<\/p>\n
We install the cloudinary-react package using npm with:<\/p>\n
    npm i cloudinary-react\n<\/code><\/span><\/pre>\n
We import and render the video player on the home page, whose component is specified in pages\/index.js:<\/p>\n
    import<\/span> { Video, CloudinaryContext, Transformation } from<\/span> \"cloudinary-react\"<\/span>;\n    \n     export<\/span> default<\/span> function<\/span> IndexPage<\/span>(<\/span>) <\/span>{\n    \n      return<\/span> (\n        <div<\/span>><\/span>\n          <Layout<\/span>><\/span>\n            <Seo<\/span> title<\/span>=\"Home\"<\/span> \/><\/span>\n            <p<\/span>><\/span>Welcome to your new Gatsby site.<\/p<\/span>><\/span>\n            <CloudinaryContext<\/span> cloudName<\/span>=\"olanetsoft\"<\/span>><\/span>\n              <Video<\/span>\n                publicId<\/span>=\"samples\/animals\/testvid\"<\/span>\n                controls<\/span>\n                muted<\/span>\n                width<\/span>=\"500px\"<\/span>\n             \/><\/span>\n            <\/CloudinaryContext<\/span>><\/span>\n          <\/Layout<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      )\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
CloudinaryContext<\/code> takes props of any data we want to make available to the Cloudinary components\u2019 children. For example, we sent our Cloudinary cloud name in this situation.<\/p>\n
We use the Video<\/code> component to build a 500px(configurable) wide video player. The video\u2019s public ID, which is a unique identifier for a media asset stored on Cloudinary, was also used to reference the media asset.\nFinally, we included props that enable the video player to be controlled and muted once rendered.<\/p>\n
You should have something similar to the image below if you use the specified cloud name in the snippet.<\/p>\n
\"\"<\/p>\n
How do we get access to the methods and properties of the underlying video element?\nThe cloudinary-react package<\/a> provides the innerRef<\/code> prop, which makes access to underlying video element seamless.<\/p>\n
To reference the underlying HTML video element, we\u2019ll use React\u2019s useRef() hook.<\/p>\n
With useRef(), we are able to access the onended<\/code> video event. We make a new ref and assign it to the video\u2019s innerRef<\/code> prop with:<\/p>\n
    import { Video, CloudinaryContext, Transformation } from \"cloudinary-react\";\n    import { useRef } from \"react\";\n    \n     export default function IndexPage() {\n      const videoRef = useRef();\n      return (\n        <div<\/span>><\/span>\n          <Layout<\/span>><\/span>\n            <Seo<\/span> title<\/span>=\"Home\"<\/span> \/><\/span>\n            <p<\/span>><\/span>Welcome to your new Gatsby site.<\/p<\/span>><\/span>\n            <CloudinaryContext<\/span> cloudName<\/span>=\"olanetsoft\"<\/span>><\/span>\n              <Video<\/span>\n                publicId<\/span>=\"samples\/animals\/testvid\"<\/span>\n                controls<\/span>\n                muted<\/span>\n                width<\/span>=\"500px\"<\/span>\n                innerRef<\/span>={videoRef}<\/span> \/><\/span>\n             \/>\n            <\/CloudinaryContext<\/span>><\/span>\n          <\/Layout<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      )\n    }\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
With the ref in place, we\u2019ll manage user interface behavior corresponding to video events. When the video ends, we call a required action. This action is done in a useEffect<\/code> hook, where you reveal to React the component that needs to accomplish an action after render.\nReact will call the function passed once the component loads and call it later when the DOM rerenders with the following code. We define the ref and useEffect sequence with:<\/p>\n
    import<\/span> { useRef, useEffect, useState } from<\/span> \"react\"<\/span>;\n    \n    export<\/span> default<\/span> function<\/span> IndexPage<\/span>(<\/span>) <\/span>{\n      const<\/span> [videoEnded, setVideoEnded] = useState(undefined<\/span>)\n        const<\/span> videoRef = useRef()\n        useEffect(()<\/span> =><\/span> {\n            const<\/span> video = videoRef.current;\n    \n            video.onended = ()<\/span> =><\/span> {\n                setVideoEnded(true<\/span>)\n                \/\/ Our logic goes in here<\/span>\n            }\n        }, [])\n      return<\/span> (\n        \/\/ render component here<\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the imported useEffect<\/code> hook we listen to the onended<\/code> event of the video to carry out further action in a function.<\/p>\n
We store a true<\/code> boolean value in the component\u2019s state when the video ends. With this state value, we handle several UI updates. These experiences include the following:<\/p>\n
You can get your cloud name from your Cloudinary dashboard by signing up for a Cloudinary Account<\/a>.<\/p>\n
We\u2019ll use the Cloudinary-react package<\/a>, which ships components that help us render images and videos. We\u2019ll also use CloudinaryContext, which is the wrapper component to pass shared data to all child Cloudinary components.<\/p>\n