How to Build A Video Player with timeline comments using Appwrite & Cloudinary in Next.js

Chidi Eze - May 4 '23 - - Dev Community

Timeline comments allow viewers to add comments or notes to specific points in a video, providing additional context or information about what is happening on screen. This feature enhances the viewer's experience, facilitates collaboration and engagement, improves accessibility, and provides valuable data insights for creators.

This article discusses building a video player with timeline comments using Appwrite storage, the Cloudinary video player, and Next.js.

Appwrite is an open-source backend server that provides a range of APIs and SDKs to help developers build web and mobile applications. It offers user authentication, database management, file storage, and more features.

Cloudinary is a cloud-based image and video management platform that provides developers with tools for storing, manipulating, optimizing, and delivering images and videos on their websites or applications.

Next.js is a popular open-source React-based framework for building web applications. It provides a range of features, such as server-side rendering, static site generation, and automatic code splitting.

Check out the GitHub repository to quickly get started:

https://github.com/Kizmelvin/nextjs-video-comments

Prerequisites

To fully grasp the concepts presented in this tutorial, the following are required:

  • Basic understanding of JavaScript and React
  • Cloudinary account and at least one video uploaded to the media library (Create a free account here)

Getting started

Log in to Cloudinary, navigate to the “Dashboard” page, and copy the cloud name.

Next, navigate to the Media Library tab, select a video, or click the Upload button to upload a video. Grab the video's id and keep it safe; we need it later.

image-demo

Creating a Next.js application

First, let’s run the following command in the terminal to create a new Next.js application:

    npx create-next-app with-tailwindcss video-comments
Enter fullscreen mode Exit fullscreen mode

The command above creates a starter Next.js application and adds tailwind CSS to the application with the with-tailwindcss flag in the video-comments folder.

Next, navigate to the project directory and start the application with the following commands:

    cd video-comments #navigate into the project directory
    npm run dev #start the dev server
Enter fullscreen mode Exit fullscreen mode

Building the video player and the comments section

First, clean up the index.js file in the pages folder and update it with the following snippet:

    //pages/index.js
    import { useEffect, useState, useRef } from "react";
    const Home = () => {
      const videoRef = useRef();
      const cloudinaryRef = useRef();
      const playerRef = useRef();

      useEffect(() => {
        if (cloudinaryRef.current) return;
        cloudinaryRef.current = window.cloudinary;
        playerRef.current = cloudinaryRef.current.videoPlayer(videoRef.current, {
          cloud_name: "kizmelvin",
          secure: true,
        });
      });
      return (
        <div className=" flex min-h-screen  justify-around py-2">
          {/* Video player */}
          <section className="flex w-8/12 flex-col items-center justify-center px-10 text-center">
            <div className="w-full">
              <video
                ref={videoRef}
                id="demo-player"
                className="cld-video-player cld-fluid "
                controls
                data-cld-public-id="video-demo"
              />
            </div>
          </section>
        </div>
      );
    };
    export default Home;
Enter fullscreen mode Exit fullscreen mode

In the snippet above:

  • We created some references, instantiated a Cloudinary instance in the useEffect() function, and passed our cloud name.
  • In the return function, we returned a video tag, passed ref and id properties, and set the data-cld-public-id property to the video ID we obtained from Cloudinary.

In the browser, the application should like the image below:

image-demo

Creating the comments section

Let’s create an input to collect user comments and buttons to submit and cancel the process.

Next, let’s update the index.js with the following snippet:

In the snippet above, we:

  • Created state constants using the useState hook.
  • Created the openComment() function to pause the video and grab the current playing time.
  • In the return function, we rendered a Comment button, an input field for the comment, a Submit button to save the comment to Appwrite, and a Cancel button to terminate the process. image-demo

Integrating Appwrite for comments storage

Now it’s time to integrate Appwrite into our application to handle the video timeline comments.

First, log in to the Appwrite cloud or create an account. Check out this article on how to set up an Appwrite instance locally.

After successfully signing in, click on the + Create project button, choose a name for the project, and click the Create button.

image-demo

After creating the project, navigate to the database tab, click the +Create database button, name the database, and click the create button to continue.

image-demo

Next, grab the database ID and keep it handy. Click the +Create collection button, name the collection, and click the Create button to continue.

image-demo

On the next screen, grab the collection ID and save it. Navigate to the attributes tab, click the +Create collection” button and the prompts, and create a name, comment, and videoTime attribute.

image-demo

Finally, click the Settings button in the bottom-left corner and grab the project ID and the API Endpoint; we’ll need them to set up the Appwrite instance.

image-demo

Back in the code editor, run the following command to install Appwrite, uuid, and dotenv npm packages:

    npm install appwrite uuidv4 dotenv #install the packages
Enter fullscreen mode Exit fullscreen mode

Next, create a .env.local file in the root directory of the project and save the Appwrite credentials like the below:

    /.env.local
    NEXT_PUBLIC_PROJECT_ID = "YOUR PROJECT ID"
    NEXT_PUBLIC_DATABASE_ID = "YOUR DATABASE ID"
    NEXT_PUBLIC_COLLECTION_ID = "YOUR COLLECTION ID"
Enter fullscreen mode Exit fullscreen mode

Let’s create a helper folder in the root directory and create a Utils.js file with the following snippet:

    //helper/Utils.js
    import { Client, Databases } from "appwrite";
    import { v4 as uuidv4 } from "uuid";

    //Initializing Appwrite
    export const client = new Client();
    client.setEndpoint("https://cloud.appwrite.io/v1").setProject(process.env.PROJECT_ID);
    const dataB = new Databases(client);

    //Saving Comments to Appwrite Database

    export const saveComments = async (details) => {
      try {
        await dataB.createDocument(
          process.env.DATABASE_ID,
          process.env.COLLECTION_ID,
          uuidv4(),
          {
            comment: `${details.comment}`,
            videoTime: `${details.videoTime}`,
            name: `${details.name}`,
          }
        );
      } catch (error) {
        console.log(error);
      }
    };

    //Fetching comments from Appwrite Database

    export const listComments = ({ setComments }) => {
      const promise = dataB.listDocuments(
        process.env.DATABASE_ID,
        process.env.COLLECTION_ID
      );
      promise.then(
        (response) => setComments(response.documents),
        (error) => console.log(error)
      );
    };
Enter fullscreen mode Exit fullscreen mode

In the snippet above, we did the following:

  • Created a new Client and two Database instances and passed the project_id to the client.
  • Created the saveComment function to save the video time and the user comment to the Appwrite database.
  • Created the listComments function to get the list of comments from Appwrite and update our comment state.

Now in the index.js file, let’s grab the details from our user; update the index.js file with the following snippet:

In the above snippet, we:

  • Imported saveComments and listComments functions from the Utils.js file and created the details object.
  • Called the saveComments() in the handleSubmit() function and passed the details object to it.
  • Created a button to view and hide the comments, looped through the comment state, and displayed the comments.

The complete code of the index.js file can be found in this Github Gist.

Now, we have a functional video player with timeline commenting functionality in the browser.

image-demo

Conclusion

Building a video player with timeline comments is a great way to enhance user experience and engagement. By leveraging the power of these technologies, we created a seamless and interactive video playback experience that allows users to leave comments and feedback at specific points in the video timeline. So, to take your website to the next level, consider implementing a video player with timeline comments using Appwrite and Cloudinary in Next.js.

Resources

These resources might be helpful:

Image
The Most Pervasive Issues With Corner Fabric Sofa
Image
20 Myths About Car Key Lost: Dispelled
Image
Learn About Asbestos Attorney Lawyer Mesothelioma While Working From The Comfort Of Your Home
Image
Question: How Much Do You Know About Self-Propelled Wheelchairs?
Image
Langkah Hack Judi Online Sangat Simpel Di Melakukan Siapa Saja
Image
The Little-Known Benefits Asbestos Claims Law
Image
Kolory, Kształty i Przestrzenie: Magia Aranżacji Wnętrz
Image
🐍Como Importar Dados do Excel para SQLite com Python em Poucas Linhas

programming, tutorial, python, productivity
Image
Spring Boot Actuator: Monitoring and Managing Your Applications

spring, actuator, monitoring
Image
The Reasons Why Adding A Lawsuit Asbestos To Your Life's Journey Will Make The Change
Image
Teknik Sukses Main Taruhan Judi Online Bola
Image
You don't need to know them all!

webdev, beginners, programming, productivity
Image
Testing AWS locally with LocalStack

cloud, aws, localstack, test
Image
Why No One Cares About Mesothelioma And Asbestos Lawyers
Image
"Hack, October, and Fest: A Trio of Tech Triumphs!"

devchallenge, hacktoberfestchallenge, hacktoberfest, opensource
Image
15 Pinterest Boards That Are The Best Of All Time About Lawsuit Asbestos
Image
OAuth2 Client Credentials Grant Type: When and How to Use It

security, authentication, clientcredentials, oauth2
Image
Ciri-Ciri Situs Judi Online Terunggul dan Bisa terbuktikan Aman
Image
Debian (Sid|Unstable) with Gnome 47 on X11

debian, gnome, linux
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .