<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
    <style>
      /* Custom Player Styles */
      .custom-player .plyr--video .plyr__controls {
        background-color: #1e2635;
        padding-bottom: 15px;
        padding-top: 15px;
      }

      .custom-player .plyr__control {
        color: #ff8a00;
      }

      .custom-player .plyr__control:hover,
      .custom-player .plyr--video .plyr__control[aria-expanded="true"] {
        color: white;
      }

      .custom-player .plyr__progress--played {
        background-color: #4f5e77;
      }

      .custom-player .plyr__progress--buffer {
        background-color: #36445c;
      }

      .custom-player .plyr__volume--display {
        color: #ff8a00;
      }

      .custom-player .plyr__control.plyr__tab-focus,
      .custom-player .plyr__control[aria-expanded="true"] {
        background-color: #ff8a00;
        color: #323232;
      }

      .custom-player .plyr__menu__value[data-value="0.5"] {
        color: #ff8a00;
      }

      .custom-player .plyr__controls .plyr__controls__item.plyr__time {
        font-size: 16px;
        font-family: "Hind Siliguri", sans-serif;
      }

      .custom-player .plyr__menu__container .plyr__control > span {
        font-family: "Hind Siliguri", sans-serif;
        align-items: inherit;
        display: flex;
        width: 100%;
        color: #36445c;
        font-size: 16px;
      }

      .custom-player .plyr__control--overlaid svg {
        left: 5px;
        position: relative;
        fill: white;
        width: 40px;
        height: 40px;
        margin: 10px;
      }

      .custom-player .plyr__progress .plyr__tooltip {
        font-size: 16px;
        font-family: "Hind Siliguri", sans-serif;
      }

      .custom-player .plyr__progress input[type="range"] {
        cursor: pointer;
      }

      .custom-player .plyr__control {
        color: white;
      }

      .plyr__control.plyr__control--overlaid {
        background-color: #ff8a00;
      }

      .custom-player .plyr__progress input[type="range"] {
        color: #ff8a00;
      }

      .custom-player .plyr__volume input[type="range"] {
        color: #ff8a00;
        cursor: pointer;
      }

      .custom-player .plyr__control:hover {
        background-color: #ff8a00;
        color: white !important;
      }

      .custom-player
        .plyr__menu__container
        .plyr__control[role="menuitemradio"][aria-checked="true"]:before {
        background-color: #ff8a00;
      }

      .custom-player .plyr__control:hover span {
        color: white;
      }

      .plyr--video {
        border: 3px solid #4f5e77;
        border-radius: 10px;
      }

      /* Custom Transcript Styles */
      .transcript {
        margin-top: 20px;
        padding: 10px;
        line-height: 1.5;
        height: 200px;
        overflow-y: auto;
        border: 3px solid #4f5e77;
        border-radius: 10px;
        background-color: white;
      }

      .highlight {
        background-color: #ff8a00;
        color: white;
        font-weight: 600;
        padding: 5px;
        transition: 0.2s ease-in;
      }

      .my-hidden {
        display: none;
      }

      .show-transcript-btn {
        margin-top: 30px;
        background-color: #ff8a00;
        font-family: inherit;
        font-size: 18px;
        font-weight: 600;
        color: white;
        border-radius: 20px;
        padding: 7px 14px;
        cursor: pointer;
        border: none;
        transition: 0.5s ease-in-out;
      }

      .show-transcript-btn:hover {
        background-color: #d27204;
      }
    </style>
  </head>
  <body>
    <div class="custom-player">
      <video
        width="100%"
        controls
        poster="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react-pro/introduction/react-component-video-poster-v1.png"
      >
        
        <source
          src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react-pro/introduction/react0components-recording-v5.mp4"
          type="video/mp4"
          data-plyr-config='{
          "quality": {
            "default": "720",
            "options": ["144", "240", "360", "480", "720", "1080"]
          }
        }'
        />
      </video>
    </div>
    <button class="show-transcript-btn js-show-transcript-btn">
      Show Transcript
    </button>
    <div class="transcript my-hidden"></div>

    <script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>
    <script>
      const showTranscriptBtn = document.querySelector(
        ".js-show-transcript-btn"
      );

      showTranscriptBtn.addEventListener("click", handleClick);

      function handleClick() {
        const transcriptElement = document.querySelector(".transcript");
        transcriptElement.classList.toggle("my-hidden");

        if (transcriptElement.classList.contains("my-hidden")) {
          showTranscriptBtn.textContent = "Show Transcript";
        } else {
          showTranscriptBtn.textContent = "Hide Transcript";
        }
      }

      const player = new Plyr(".custom-player video", {
        controls: [
          "play-large",
          "play",
          "progress",
          "current-time",
          "mute",
          "volume",
          "captions",
          "settings",
          "fullscreen",
        ],
        volume: 0.5,
        muted: false,
        settings: ["captions", "quality", "speed"],
        captions: {
          active: true,
          language: "en",
        },
        fullscreen: {
          enabled: true,
          fallback: true,
          iosNative: true,
        },
        speed: {
          selected: 1,
          options: [0.5, 1, 1.5, 2],
        },
        quality: {
          default: "720",
          options: ["144", "240", "360", "480", "720", "1080"],
        },
      });

      player.on("qualitychange", (event) => {
        console.log(`Quality changed to ${event.quality}`);
      });

      player.on("ratechange", (event) => {
        console.log(`Speed changed to ${event.detail.plyr.speed}`);
      });

      /*
        Change the transcript data:
          - "start" is the time in seconds indicating from what time the text must be shown.
          - "end" is the time in seconds indicating when the text must be hidden.
          - "text" is the text to be shown.
        NOTE: We can specify any time segments (any start/end). It doesn't have to be exactly 10s. 
      */
      const transcriptData = [
        {
          start: 0,
          end: 20,
          text: "A React functional component serves as a means to create reusable UI logic. Within a React application. It takes the form of javascript function that produces jsx (javascript XML), enabling the definition of both the structure and content of the component's rendered output.",
        },
        {
          start: 20,
          end: 39,
          text: "Let's practice by working towards an array of data. Our objective is to create a new component that will handle the rendering process. Before we begin. Let's take a moment to examine our current progress. We have our source folder inside of which:",
        },
        {
          start: 39,
          end: 62,
          text: "We have index.js file. It is the main file of our app. Next, we have data.js. It is exactly that data is exactly that array which we have to render. Finally, we have the app folder with the app file. It is exactly where we built the whole application.",
        },
        {
          start: 64,
          end: 80,
          text: "And we have such live page of our app as right now we render only the 'App' word. So if we change it, our life page shows the changes. So let's start.",
        },
        {
          start: 80,
          end: 100,
          text: "We begin with creating a new folder for this component. So as we have the data talking about the owners like name vehicle and their id, so we will create the folder OwnerList. Source, new folder OwnerList.",
        },
        {
          start: 100,
          end: 120,
          text: "Inside of this folder, I create a new file which will be on an OwnerList.jsx. All right. So now I render only 'OwnerList' text. Let's import this file inside of the app file. So our app file could render it.",
        },
        {
          start: 120,
          end: 143,
          text: "I use import OwnerList from and specify the direction of our OwnerList. OK? So under this text, I will render my OwnerList component. Let's see what we get. We get our 'OwnerList' text. All right, perfect.",
        },
        {
          start: 143,
          end: 160,
          text: "Now we can remove this text for the 'OwnerList' in front of props. We will provide this data which is from the data.js file. So what I do is I will say that data equals to the data. All right.",
        },
        {
          start: 160,
          end: 180,
          text: "Now in the OwnerList, I can get this data. So basically I get the props. Now I can render these props. I will create like each element. It will be like 'Owners' heading.",
        },
        {
          start: 180,
          end: 199,
          text: "Next. I create an unordered list, inside of this unordered list, I will use the map() method which helps me to render the array of objects. What I do is props.data.map()",
        },
        {
          start: 199,
          end: 220,
          text: "Inside of the map, I get the item and I will render li element. For each li, I have to specify the key attribute. key. And each of my items has id, so I will use it.",
        },
        {
          start: 220,
          end: 246,
          text: "as it is unique item.id. Also inside of this element, I will specify h3 and as the content, I will use item.name and also talking about the vehicle. It will be p element and it will be item.vehicle.",
        },
        {
          start: 246,
          end: 260,
          text: "All right. So let's see the result. So I get the list of owners and I render that array of objects.",
        },
        {
          start: 260,
          end: 286,
          text: "OK. It works perfectly. Now, let's improve our function. We can use javascript destructuring. So we know that we get only data. So we don't need any props. I will get data, not props and also for the item, I know that I need id I need name and I need vehicle.",
        },
        {
          start: 286,
          end: 299,
          text: "I don't need item anymore. All right. So nothing was changed on the life page, but my function is clean right now.",
        },
      ];

      const transcriptElement = document.querySelector(".transcript");

      function updateTranscript(currentTime) {
        // Clear previous transcript highlighting
        transcriptElement.querySelectorAll("p").forEach((p) => {
          p.classList.remove("highlight");
        });

        // Find the current segment based on the current time
        const currentSegment = transcriptData.find(
          (segment) =>
            currentTime >= segment.start && currentTime <= segment.end
        );

        // Highlight the current segment's text
        if (currentSegment) {
          const currentSegmentElement = transcriptElement.querySelector(
            `p[data-start="${currentSegment.start}"][data-end="${currentSegment.end}"]`
          );
          if (currentSegmentElement) {
            currentSegmentElement.classList.add("highlight");
          }
        }
      }

      function scrollToCurrentSegment() {
        const currentSegment = transcriptElement.querySelector(".highlight");
        if (currentSegment) {
          const transcriptElementHeight = transcriptElement.offsetHeight;
          const segmentOffsetTop = currentSegment.offsetTop;
          const segmentOffsetHeight = currentSegment.offsetHeight;

          // Calculate the top and bottom positions of the current segment
          const segmentTop = segmentOffsetTop - transcriptElement.offsetTop;
          const segmentBottom = segmentTop + segmentOffsetHeight;

          // Calculate the center position of the transcript div
          const transcriptCenter = transcriptElementHeight / 2;

          // Calculate the scroll offset to center the current segment
          const scrollOffset =
            segmentOffsetTop -
            transcriptElement.offsetTop +
            segmentOffsetHeight / 2 -
            transcriptCenter;

          transcriptElement.scrollTo({
            top: scrollOffset,
            behavior: "smooth",
          });
        }
      }

      player.on("timeupdate", (event) => {
        const currentTime = event.detail.plyr.currentTime;
        updateTranscript(currentTime);
        scrollToCurrentSegment();
      });

      const transcriptHTML = transcriptData
        .map(
          (segment) =>
            `<p data-start="${segment.start}" data-end="${segment.end}">${segment.text}</p>`
        )
        .join("");

      transcriptElement.innerHTML = transcriptHTML;
    </script>
  </body>
</html>

## Key concepts to remember
1. React follows a component-based architecture, promoting reusability and modularity.
2. Components receive data and configuration through props, allowing parent components to pass information to child components.
3. Components can have an internal state, allowing them to manage and update their data independently.
4. React uses a virtual DOM for efficient updates and rendering, minimizing actual DOM manipulations.
5. JSX is a syntax extension for writing HTML-like code within JavaScript files, making component structure and appearance more intuitive.

## Example
Let's consider building a Book Shelve List component in React. Here's an example of how we can structure and implement this component:
```jsx
import React from "react";

const BookList = () => {
  const books = [
    { id: 1, title: "A Tale of Lost Memories" },
    { id: 2, title: "Unraveling the Secrets of the Hidden Realm" },
    { id: 3, title: "A Journey Through Time and Space" },
    { id: 4, title: "Unleashing the Power of the Elements" },
  ];

  return (
    <div>
      <h2>Book shelve</h2>
      <ul>
        {books.map((book) => (
          <li key={book.id}>{book.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default BookList;
```
**Code explanation:**
- Line 3: The code defines a React functional component named `BookList`.
- Lines 11-20: The component renders a `<div>` element containing an `<h2>` element with the text "Book shelve" and an `<ul>` element. The `<ul>` element displays a list of books by utilizing the `map()` method on an array of book objects. Each book object has an `id` and `title` property. Within the `map()` method, an `<li>` element is generated for each book, with the book's title set as the content and the book's id assigned as the `key` attribute.
- Line 23: The `BookList` component is exported as the `default export`, allowing it to be imported and used in other application parts.

## Challenge
Create the `TaskList` component that renders an array of task objects. It is supposed to be an ordered list containing five tasks.
>Note
> 
> By default, all challenges will be broken. After fixing all the issues, the corrected live page will be shown. To fix the code, please drag the slider on the left side of the codesandbox where the file to be fixed is located. Additionally, to view the complete project structure, click on the burger button in the top left corner of the sandbox, which will display the project file folder structure.

Unlock the full potential of React and become a proficient Frontend developer with this course. Whether you're a beginner or an experienced developer looking to level up your skills, this hands-on course will take you on an exciting journey through the core concepts of React and its ecosystem, considering such valuable topics as React Router, Redux Toolkit, Formik, and Jest.

Explore the significance of additional tools that amplify the efficiency and productivity of React applications. Optimize performance. Furthermore, this revision will guarantee a robust groundwork as you delve into more advanced topics.

Discover how to implement navigation and routing in React apps using React Router. Learn about the core concepts of routes and URLs and how React Router facilitates the creation of dynamic, multi-page applications with seamless transitions between different views.

Research the capabilities of Redux Toolkit, which streamlines state management in React-Redux applications. This library provides opinionated tools and best practices, empowering developers to craft cleaner and more efficient code.

Formik is a powerful library that empowers React developers to quickly manage forms with optimal efficiency and best practices. We will explore the high-level capabilities of Formik, guiding you through the best practices for building robust and user-friendly forms in your React apps.

Master testing React applications with Jest. Learn how to ensure code quality, prevent bugs, and confidently refactor your projects with Jest's powerful features tailored for React testing.

Uncover suitable actions to take next by aligning them with your goals and interests.

React Component

Awesome!

React Component