Minicurso de ReactJS - Construindo um Tocador de Audiobook - Aula 6

Summary

This video script details the development of an audiobook player in React.js, focusing on implementing core functionalities such as track switching and playback control. The tutorial covers creating functions to advance and rewind the audio track by 15 seconds, as well as adjusting the UI for better readability and user experience. The instructor also explains how to enable direct track progression by clicking on the progress bar, utilizing React's state management and HTML5 audio features to synchronize the UI with the audio playback. The script concludes with a call to action for feedback on the React.js experience compared to traditional JavaScript.

Takeaways

• 🎥 The video is a tutorial focused on enhancing an audiobook player application using React JS.
• 🔄 The main objective is to finalize the core functionalities of the audiobook player, including play, pause, and track switching.
• ⏯ The tutorial addresses the issue of not being able to control the progress within the track and introduces a solution for it.
• 🕒 A function named 'advance 15 seconds' is created to move the audio track forward by 15 seconds, demonstrating basic React state manipulation.
• 🔧 The script explains the process of refactoring the code for better readability, emphasizing the importance of clean code practices.
• 📖 It introduces the concept of 'props' in React, detailing how to use them to pass functions and states between components.
• ⏪ A similar function to 'advance 15 seconds' is created for 'retract 15 seconds', showcasing the symmetry in functionality development.
• 📊 The video explains how to use the 'useRef' hook to create a reference to the HTML progress bar, allowing for click interactions.
• 🖱️ A new feature is introduced where clicking on the progress bar advances the audio to the corresponding time, using event handling in React.
• 🛠️ The tutorial touches on the automatic update of the UI in React when state variables change, and how HTML5 audio properties work outside of React's state.
• 👍 The video concludes by encouraging viewers to share their thoughts on React JS compared to traditional JavaScript and to subscribe for more programming content.

Q & A

What is the main focus of the video script?

The main focus of the video script is to demonstrate how to finalize the main functionalities of an audiobook player application using React JS.

What issue was addressed in the previous lesson mentioned in the script?

In the previous lesson, the issue addressed was the inability to control the progression within the audio track, meaning the user couldn't click and adjust their position within the track.

What functionality does the 'avançar 15 segundos' function in the script perform?

The 'avançar 15 segundos' function increases the current time of the audio track by 15 seconds, allowing the user to skip forward in the audiobook.

How does the script improve code readability?

The script improves code readability by refactoring the code to explicitly state the props being used, making it easier to identify and understand the properties at the beginning of the component.

What is the purpose of the 'useRef' in the script?

The 'useRef' is used to create a reference to the HTML elements, such as the audio tag and the progress bar, allowing the script to interact with and manipulate these elements directly.

How does the script handle the synchronization of the audio track with the progress bar?

The script uses the 'onTimeUpdate' event of the audio tag to automatically update the state variable controlling the current time, which in turn updates the progress bar and other related UI elements.

What is the 'retroceder 15 segundos' function and how does it differ from the 'avançar 15 segundos' function?

The 'retroceder 15 segundos' function decreases the current time of the audio track by 15 seconds, allowing the user to rewind the audiobook. It is the opposite of the 'avançar 15 segundos' function.

How does the script enable the user to jump to a specific point in the audio track by clicking on the progress bar?

The script calculates the new time based on the proportion of the progress bar clicked by the user, and then sets the audio track's current time to this new calculated time.

What is the significance of the 'offsetX' property in the script?

The 'offsetX' property is significant as it provides the horizontal distance from the beginning of the element where the click event occurred, which is used to calculate the new time to jump to in the audio track.

How does the script ensure that clicking outside the progress bar but within the container still triggers the jump function?

The script assigns the jump function to the 'onClick' event of the container element, ensuring that any click within the container, not just on the progress bar itself, will trigger the function.

What is the final functionality implemented in the script and how does it enhance the user experience?

The final functionality implemented allows the user to control the playback position of the audiobook by clicking on the progress bar or the container, enhancing the user experience by providing a more intuitive and flexible way to navigate the audio content.

Outlines

00:00

🎥 Introduction to Audiobook Player Development

This paragraph introduces a video tutorial focused on the development of an audiobook player in a programming context. The speaker welcomes viewers and mentions that the tutorial will continue to build upon the main functionalities of the audiobook player, which was previously started. The speaker also hints at the goal of the session, which is to finalize the player's main features, and invites viewers to watch the video after the intro sequence.

05:02

🔄 Implementing Forward and Backward Navigation

The speaker discusses the process of adding forward and backward navigation functionalities to the audiobook player. They explain how to create a function in the app.jsx file that advances the audio track by 15 seconds when called. The function utilizes the audio tag's 'currentTime' property to determine the current playback position and then increments it by 15 seconds. This feature is then integrated into the control buttons component of the application, demonstrating how to bind the new function to a button press event for advancing the audio track.

10:02

🔄 Enhancing Control with Progress Bar Interaction

The tutorial continues with the speaker explaining how to enhance the audiobook player's control by allowing users to click on the progress bar to jump to a specific point in the audio track. The speaker details the importance of using React's state to automatically update the UI components like the progress bar and time indicator when the audio 'currentTime' changes. They also demonstrate how to bind the 'onTimeUpdate' event of the audio tag to a state variable to keep the UI in sync with the audio playback.

15:04

⏮️ Creating a 15-Second Rewind Function

Building on the previous functionalities, the speaker introduces a new function to rewind the audio track by 15 seconds. They show how to create a similar function to the 'advance 15 seconds' but with the logic reversed to subtract 15 seconds from the current time. This function is then passed to the control component, specifically to the rewind button, allowing users to move back in the audio track with a single click.

20:07

🖱️ Enabling Click-to-Seek on the Progress Bar

The speaker describes the process of implementing a click-to-seek feature on the progress bar. They explain how to use the 'useRef' hook to create a reference to the progress bar element and then calculate the new playback time based on the click's position within the progress bar. The calculation involves determining the proportion of the click's horizontal offset relative to the total width of the progress bar and then applying this proportion to the total duration of the audio track to find the new current time.

🔄 Finalizing the Audiobook Player with Enhanced Controls

In the final paragraph, the speaker wraps up the tutorial by demonstrating the completed functionalities of the audiobook player. They show how users can now click on the progress bar to jump to any point in the audio track and how the player responds to forward and backward navigation commands. The speaker also addresses potential usability issues, such as accidentally clicking outside the narrow progress bar, by suggesting enhancements to make the feature more accessible. The video concludes with an invitation for feedback and a tease for future projects.

Keywords

💡React

React is a popular JavaScript library used for building user interfaces, particularly single-page applications. It allows developers to create reusable UI components. In the video, React is used to build an audiobook player, demonstrating its capability to handle dynamic updates and user interactions, such as changing the audio track and controlling playback.

💡Audiobook Player

An audiobook player is a software application that enables users to play, pause, and navigate through audiobooks. The script describes the development of a player with functionalities such as track switching and playback control, which are central to the user experience of listening to audiobooks.

💡Functionality

Functionality refers to the specific features or capabilities that a software program or system offers to the user. In the context of the video, functionalities such as 'advance' and 'rewind' are being implemented to enhance the user's interaction with the audiobook player.

💡Props

In React, props (short for properties) are a way to pass data from a parent component to a child component. The script mentions using props to pass functions like 'advance 15 seconds' and 'rewind 15 seconds' to child components, which are then used to control the audio playback.

💡State

State in React refers to a plain JavaScript object used to record and react to user interactions or other events. The video discusses using state to keep track of the current time of the audio track, which is crucial for features like the progress bar and playback position.

💡Refactoring

Refactoring is the process of restructuring existing computer code without changing its external behavior. In the script, the developer refactors the code to improve readability by directly using properties from props instead of the entire props object, making the code cleaner and more maintainable.

💡Progress Bar

A progress bar is a graphical representation of the progress of a task, in this case, the playback progress of an audiobook. The script describes implementing a feature where clicking on the progress bar allows the user to jump to a specific point in the audio track.

💡Event Handling

Event handling is a programming concept where certain functions are executed in response to user actions, such as clicks or key presses. The video script describes using event handling to execute functions like advancing or rewinding the audio when the user interacts with the player controls.

💡UseRef

UseRef is a React hook that allows developers to create a reference to a DOM element. In the script, useRef is used to create references to the audio tag and the progress bar, enabling the developer to directly manipulate these elements within the component.

💡Click Event

A click event is a user action that occurs when the user clicks on an element. In the video, the click event is used to trigger functions that advance or rewind the audio, as well as to calculate the new playback position when the user clicks on the progress bar.

Highlights

Introduction to the video on continuing the development of an audiobook player with main functionalities.

Review of the previous lesson where the player was set up and basic operations were functioning correctly.

The current issue with the player is the inability to control progress within the audio track.

Explanation of the need to implement functionality to advance and rewind within the audio track.

Introduction of a new function to advance the audio by 15 seconds.

Technical details on how to use the audio tag's current time property to implement the advance function.

Integration of the advance function into the control buttons component of the player.

Code refactoring for improved readability by directly using properties instead of the props object.

Explanation of the difference between state variables and regular variables in React.

Demonstration of the player's advance function working with a button click.

Discussion on the automatic update of the progress bar due to state variables.

Introduction of a similar function to rewind the audio by 15 seconds.

Explanation of how the HTML5 audio tag's native capabilities are utilized.

Implementation of functionality to jump to a specific point in the audio by clicking on the progress bar.

Technical explanation on calculating the new time position based on the click's offset within the progress bar.

Solution to ensure the progress bar click functionality works even if not clicked precisely on the bar.

Conclusion of the video with the audiobook player functionalities implemented successfully.

Invitation for feedback on the React JS experience compared to traditional JavaScript.

Closing remarks and预告 of the next video in the series.

Transcripts

fala impressionador bem-vindo a mais um

vídeo aqui da # programação e no vídeo

de hoje a gente continua aqui o nosso

Player do audiobook mas com um detalhe é

que agora a gente vai finalizar as

funcionalidades principais do nosso

Player e tudo isso aqui na aula de hoje

logo após da vinheta Então bora

[Música]

lá então vamos lá galera na aula passada

a gente fez o seguinte a gente preparou

aqui todo o nosso Player que tá aqui

funcionando

a gente consegue trocar a

faixa a gente consegue fazer a troca de

faixa a gente consegue operar tudo

corretamente você vê que tudo funciona

aqui bem certinho só que a gente não

consegue fazer o controle aqui de bom

progressão dentro da faixa isso é eu não

consigo clicar aqui e modificar onde eu

estou dentro da faixa não é verdade bom

nesse caso eu tenho que fazer alguma

coisa a respeito e é isso que a gente

vai fazer vamos lá então para isso eu

venho aqui no

app.jsx e o que que eu quero fazer eu

quero estabelecer aquelas

funcionalidades primeiro de avançar e de

retroceder ali dentro daquela faixa e

você vai ver que elas são bem simples na

verdade bem intuitivas para isso eu vou

fazer uma função aqui aqui ó escrever

uma nova

função

avançar 15 segundos beleza isso aqui é o

nome da função não podia ser mais

descritivo vou pegar aqui vou construir

essa função aqui e o que que ela vai

fazer adivinha ela vai pegar exatamente

ela vai fazer exatamente o que a gente

imagina que é pegar a tag de áudio tá eu

tenho uma referência tag de áudio já

preparada ali que a gente já preparou

das aulas passadas tag de audio. current

para pegar ali o elemento de fato tag de

áudio que tem uma propriedade chamada

current time beleza que é o tempo atual

o tempo atual da faixa E olha que

maravilha o tempo atual da faixa dá

justamente Qual é o momento da faixa

Qual é o momento que ele se encontra aí

no tocar da faixa E se eu quero avançar

aqui segundos eu vou simplesmente fazer

isso aqui ó mais igual a 15 beleza super

tranquilo super simples isso aqui que é

o equivalente a pegar e falar que isso

aqui que esse valor aqui vai ser

atualizado pelo qu por isso aqui pelo

mesmo valor acrescido de 15 entendeu

então eu quero acrescer 15 segundos eu

quero acrescentar 15 segundos a esse

elemento eu vou fazer exatamente isso eu

vou botar mais ig a 15 que é uma forma

reduzida mais elegante de escrever isso

aqui beleza e isso aqui olha só se eu

pegar essa função colocar aqui passar

aqui essa função pro nosso componente

botões controle Então vou botar aqui ó

avançar avançar 15 segundos é igual a eu

vou botar aqui avançar 15 segundos Isso

significa que agora eu tenho essa função

sendo recebida aqui dentro desse meu

dentro desse meu componente por meio

desse objeto props a gente também

aprendeu em aulas anteriores e eu vou

até fazer um ajuste aqui no meu código

para melhorar a legibilidade baseado

nisso que a gente aprendeu que é o quê

que a gente não precisa botar

necessariamente props aqui a gente pode

simplesmente E aí fica mais legal mais

elegante mais bonito aqui o código mais

legível se a gente simplesmente ao invés

do objeto props a gente coloca já quais

são as propriedades que a gente vai

utilizar e aqui ó retroceder faixa tocar

ou pausar faixa essas todas aqui que eu

tô tirando aqui do props tá vendo tá

tocando avançar faixa

beleza Daniel qual é a diferença disso O

que que é qual é a diferença do que você

tá fazendo agora porque a gente tinha

antes então é a mesma coisa na verdade o

que eu tô dizendo é o seguinte aqui

quando eu faço essa estrutura eu tô

dizendo por isso que tem essas chaves

aqui olha eu tô recebendo um objeto de

props aqui E esse objeto de props Contém

todas essas informações e essas

informações são relevantes para mim

então já me entrega essas informações É

isso que eu tô dizendo eu tô

explicitando que eu vou utilizar essas

informações e aí Quando eu for utilizar

nos pontos do código em que eu for

utilizar eu não preciso escrever props

pon nome da informação eu só invoco a

informação direto Beleza então você vai

ver que eu tenho uma preocupação com

legibilidade aqui do código e isso aqui

é mais legível né torna a estrutura mais

legível não que anterior estivesse

errado na verdade o resultado é o mesmo

beleza Tá Daniel Por que que você fez

isso exclusivamente por legibilidade do

código e também por quê Porque agora

como essa estrutur assim repara eu

escrevi quatro props aqui aqui eu já

tinha quatro props aqui que eu estava

utilizando e eu vou adicionar uma quinta

pô se eu quiser depois adicionar uma

sexta prop aqui nesse componente vai ser

mais fácil para mim ao entrar no

componente identificar o que que já está

presente aqui sacou porque eu já tenho

uma listagem logo de início beleza é por

isso que eu fiz para melhorar para

facilitar minha vida enquanto

desenvolvedor bom com isso aqui feito eu

tenho acesso a essa funcionalidade aqui

dentro desse componente que significa

que eu posso pegar esse botão aqui por

exemplo de Ah esse botão aqui que é o

botão de avançar 15 segundos na faixa eu

vou fazer o nele on Click belza on Click

eu vou pegar eu vou acessar esse

atributo aqui dentro dessa tag e eu V

dizer que ele vai invocar a função

avançar 15 segundos e aí olha só o que

acontece

aqui qu Gal você tá vendo aqui que tá

funcionando tá vendo eu t clicando aqui

eu t adicionando 15 segundos e ele tá

respeitando ess essa adição Olha só

cliquei aqui cliquei

cliquei cliquei Você tá vendo que tem 15

segundos sendo adicionado toda vez que

eu clico agora eu quero chamar atenção

para você chamar sua atenção para um

detalhe muito importante que é o

seguinte eu disse para você que o lance

do react era fazer uma instrutura que

reagia que atualizava automaticamente a

página na medida em que variáveis de

estado eram atualizadas isso aqui não é

uma variável de estado Putz o minha tag

de áudio não é variável de est variável

de estado é uma variável normal que tá

olhando para uma tag pra tag de áudio né

A minha variável tag áudio ela tá

olhando pra tag de áudio beleza por que

que tá atualizando automaticamente

porque tá né porque eu tenho aqui ó toda

vez que eu clico aqui olha só barra de

progresso avança o tempo aqui atualiza

Por que que tá atualizando

automaticamente se você dar uma olhada

aqui ó no contêiner

Progresso beleza no contêiner Progresso

a gente tem aqui a definição olha do

tempo aqui no tempo atual da faixa sendo

usada para calcular tanto a barra ali de

progresso quanto esse marcador de

posição quanto o a indicação aqui de

qual é o tempo ou seja todas essas

informações aqui são utilizadas em

função dessa variável de estado aqui

beleza então essa variável de estado tá

sendo utilizada para calcular Todas

aquelas informações Isso é o que a gente

fez na aula passada e o que que tá

acontecendo também aqui no gerenciador

de faixa a gente tem aqui essa essa

função aqui esse atributo aqui On Time

update O que que significa ele significa

que quando a tag de áudio tem uma

atualização no tempo dela E é isso que a

gente tá fazendo porque a gente tá

adicionando 15 segundos ela vem e

automaticamente Define um novo valor

para variável de estado para quê para

sincronizar a variável de estado que tá

controlando o tempo atual com o novo

valor lá da tag de áudio Beleza então

isso aqui tá atualizando a variável de

estado e aí a variável de estado sendo

atualizada tudo que é calculado a partir

da variável estado também é atualizado

beleza é por causa disso aqui que a

gente tá conseguindo que as coisas real

estejam todas sincronizadas tudo

certinho beleza então é a gente tá

usando o poder da variável de estado

somado a uma característica a uma a um

poder a uma capacidade do próprio HTML

porque as funcionalidades da tag de

áudio aqui são do próprio HTML eu tô

tirando de lá beleza com isso entendido

o que que eu vou fazer agora eu vou vir

aqui pro app.jsx e eu vou fazer uma

funcionalidade muito parecida só que é

olha só con retroceder 15

segundos que adivinha só vai ser uma

função Idêntica só que ela vai fazer o

oposto

né current time vai ser menos igual

menos igual 15 e aí com isso eu tenho

aqui uma função que vai retroceder 15

segundos na faixa de áudio toda vez que

ela foi executada E aí o que que eu vou

fazer vou passar essa função para esse

componente aqui que tem os meus botões ó

então retrocede aqui em

segundos e aqui dentro do meu componente

botões de controle Ah é por isso que eu

fiz aquela aquela pequena alteração

Aquela pequena refatoração do meu código

beleza refatoração gente isso é um termo

usado para quando a gente vai e quando a

gente reescreve o código fazendo

pequenas alterações não para mudar a

funcionalidade não para corrigir nada

nem para alterar nada mas só para

melhorar a legibilidade do código aqui

eu fiz aquela refatoração porque agora

olha só eu tenho aqui todas essas propós

e eu posso ver aqui que ah ah não

Realmente eu ainda tenho que adicionar

essa retroceder 15 segundos porque ela

ainda não tá presente aqui eu tenho que

dizer que ela é recebida aqui por esse

componente por quê Porque ela sendo

recebida Então ela pode ser utilizada

aqui dentro do componente

especificamente no botão de a flecha no

sentido antihorário aqui ó Arrow Counter

clockwise aqui um

click E aí eu vou dizer que ele vai usar

quando for clicado esse botão aqui vai

retroceder 15 vai Executar a função que

retrocede 15 segundos aí na minha faixa

e olha só o resultado retrocedeu 15

segundos 15 segundos 15 segundos 15

segundos a gente tem aqui tá funcionando

beleza pô errado bacana isso aqui na

verdade foi até relativamente simples a

gente conseguiu fazer aqui a

funcionalidade de avançar e de

retroceder aqui a faixa Pô legal Mas tem

uma funcionalidade a mais que eu

gostaria de colocar que é a seguinte eu

gostaria de clicar aqui na barra de

progresso e fazer o progresso aqui fazer

a minha pular pro ponto em que eu

cliquei Beleza então como é que a gente

vai fazer isso a gente vai vir aqui no

app.jsx primeiro de tudo eu quero

estabelecer mais uma referência porque

eu vou pilotar mais uma tag

HTML então aqui ó

const barra Progresso é igual a use

Breath no Ou seja eu vou preparar essa

variável para ela ter uma referência

mais uma tag exatamente como eu fiz na

tag de áudio ela começa com uma

referência vazia eu vou passar essa

referência aqui pra pro componente que

tem a barra de progresso que é o

componente contêiner Progresso tá então

eu vou botar aqui ó ele tem uma nova

propriedade referência que é igual ao

quê Barra Progresso Ou seja eu passei

essa variável que tem uma referência

vazia aqui para dentro do componente

então aqui dentro do contêiner Progresso

eu vou fazer o seguinte eu vou dizer que

ele recebe essa variável barra Progresso

tá bom tá aqui barra Progresso E aí o

que que eu quero que ele faça com ela eu

quero que ele pegue essa div aqui ó o

progresso Total Essa div é o que

determina Qual é a barra de é que

determina a barra de progresso eu vou

dizer que ela vai estabelecer aqui ó

ref e o que que ela vai usar como

referência essa variável aqui barra de

progresso então com essa estrutura aqui

agora eu eu linki eu juntei eu conectei

aquela variável que eu criei com use RF

aqui nesse atributo aqui basicamente

determinando então que aquela variável

agora vai ter as informações dessa di E

por que que isso aqui é importante para

mim porque eu preciso das informações

dessa div que é responsável pela barra

de progresso inteira para determinar

onde foi o meu clique sacou porque eu

quero clicar na barra de progresso e eu

quero que a música ou que a faixa avance

pro ponto correspondente ao meu clique

beleza como é que a gente faz isso vamos

lá

app.jsx eu vou criar mais uma função e o

nome da minha função vai ser avançar

para beleza avançar para porque ele vai

avançar para onde eu cliquei tá bom

botar

aqui construir aqui uma estrutura de

função vazia e aí o que que eu quero que

aconteça bom primeiro de tudo eu vou

pegar a largura da minha barra de

progresso tá porque eu vou fazer uma

continha matemática mas que ela vai

fazer sentido eu vou explicar PR você

então aqui ó const largura da barra de

progresso ela vai ser o quê Ah barra de

progresso Ponto current beleza porque é

aquilo é mesmo mesma forma lá que a

gente lidava com a tag de áudio para

quando a gente cria uma variável com

esse use ref a gente tem um campo

current e esse campo ele aponta pro

elemento que a gente lincou a essa

variável do use ref beleza ponto a gente

vai botar aqui ó client with client with

é uma propriedade que qualquer elemento

HTML tem que me informa qual é a largura

desse elemento em pixels beleza Pixel

que é a medida ali de que é a medida ali

de comprimento do computador então aqui

ó largura client with beleza que tá aqui

na referência que é uma que tá aqui na

referência do elemento Beleza então aqui

eu tenho a largura do elemento agora eu

vou fazer o seguinte agora eu vou

primeiro de tudo eu vou pegar e vou

botar essa função aqui ó avançar para eu

vou pegar ela e vou passar ela paraa

barra de progresso Beleza então aqui ó

avançar para e eu vou dizer que o

componente contêiner Progresso tem

acesso a essa função por quê Porque eu

quero que essa função esteja associada

que ela seja executada no Clique no

momento em que ela ouviu é um clique na

barra de progresso Beleza então aqui ó

onclick e ele vai executar essa função

avançar para

beleza gente vamos lá isso aqui é do

próprio JavaScript beleza isso aqui é do

próprio JavaScript quando eu clico em

algum elemento houve um evento de clique

beleza houve um evento de clique isso é

o a página da internet o navegador ele é

capaz de perceber que Opa o usuário

clicou aqui beleza então quando eu falo

ou clique eu boto ali a função eu tô

dizendo que o US que o o navegador

identifica um clique naquele elemento e

vai reagir com aquela função Beleza

então o que que eu posso fazer bom aqui

então todas as funções que a gente

estava colocando a gente colocava que

elas não recebiam nenhuma informação mas

tem uma informação que o navegador

disponibiliza por padrão e que a gente

pode usar e aí a gente só precisa

explicitar ela que é uma informação é um

objeto com as informações desse evento

no caso o evento de clique Então vou

botar aqui ó evento Beleza então isso

aqui é padrão eu podia ter usado esse

objeto aqui em qualquer uma dessas

outras funções aqui que eu associei a

qualquer a todos os outros botões ali

que eu botei funcionalidade de clique

lembra Mas aqui é que para nenhum deles

era necessário para esse é por quê

Porque o que que eu vou fazer aqui eu

vou fazer o

seguinte conste a aqui

ah tempo Novo Tempo beleza novo tempo

por quê Porque eu quero pular para um

novo tempo ali na minha faixa e como é

que eu vou fazer esse cálculo bom eu vou

fazer o cálculo do Novo Tempo baseado no

seguinte eu cliquei em algum lugar ali

da minha barra de progresso se eu

cliquei no fim da minha barra de

progresso bom eu cliquei lá no fim da

minha barra de progresso se eu cliquei

no início eu cliquei lá no início vamos

supor que eu cliquei na metade vamos

supor que eu cliquei na metade como é

que eu vou identificar um eu cliquei é

aí que entra esse elemento aqui o evento

por o evento ele tem um campo chamado

Native event beleza Native event e

dentro desse Campo Native event ele tem

um negócio aqui muito legal que é

offset x beleza offset x o que que é

isso offset X é o seguinte ele o evento

o evento e aqui foi um evento de clique

aqui no Native event ele tem explicação

de qual é a partir do início do elemento

onde eu cliquei quanto na horizontal eu

andei Beleza o basicamente quanto da

largura do elemento em pixels eu andei

aqui do início do elemento por que que

eu tô fazendo isso aqui isso aqui na

verdade é uma coisa maior doida mas

Acompanha comigo basicamente é o

seguinte se eu tiver clicado aqui ó

vamos supor que aqui é a metade do

elemento vamos supor que aqui é a metade

do elemento se eu cliquei aqui E esse

elemento tem sei lá 1000 pixels eu

cliquei aqui na parte aqui 500 pixels

Beleza se aqui é a metade do elemento eu

cliquei e ele já tem até aqui 500 pixels

sacou então 500 pixels é a metade de

1000 pixels beleza é isso que eu quero

identificar quantos pixels eu já andei

essa informação vai vir aqui para mim no

offset x beleza essa informação vai vir

no offset x vamos supor que aqui É 10%

aqui da minha barra de progresso eu

cliquei aqui então vai ser um Déo aí dos

Tais 1000 pixels ou seja vai ser 100

pixels sacou E aí a partir dessa

informação do offset X eu vou calcular

Qual é o momento da faixa que eu tenho

que ir para qual momento da faixa eu

tenho que ir por uma questão de

proporcionalidade Beleza você vai ver

isso comigo Olha só offset x ou seja

quanto a partir do início do elemento eu

já em que quanto a partir do início do

elemento eu cliquei sabe em quantos

pixels a partir do início do elemento eu

cliquei Beleza então vou pegar esse

elemento aqui e eu vou dividir pelo qu

pela largura pela cura do elemento sabe

por quê Porque isso aqui agora passa a

não ser uma informação de pixels isso

aqui passa a ser uma informação só de

proporção sacou porque se eu divido pela

largura a largura do elemento é tudo né

é o é a largura inteira da barra vai ser

sei lá os 1000 pixels então se eu clicar

aqui vai ser 1000 so 1000 que dá 1 por

quê Porque eu já tô no final eu já um é

100% né É porque eu já andei a a barra

inteira se eu clicar aqui sei lá se aqui

é 60% da Barra eu cliquei aqui vai ficar

o 600 pixels sobre 1000 pixels que dá

0,6 que dá o 60% sacou Então eu tenho

aqui uma proporção da faixa o quanto da

faixa eu tô para onde percentualmente da

faixa eu tô querendo ir saô esse

percentual ele vai me dar essa

informação é isso que eu quero e aí Olha

só eu vou pegar aqui ó evento Native

event ofs x eu vou dividir pela largura

Isso aqui vai me dar uma informação de

proporção aqui de onde eu quero é uma

proporção ali da barra de Progresso de

onde eu cliquei E aí eu vou pegar isso

aqui e vou fazer o seguinte essa

proporção eu vou pegar e vou multiplicar

ela pelo tempo total da faixa sabe por

quê Porque aí com essa proporção vamos

supor que eu ti tinha aqui sei lá 0,6

60% né 60% vezes o tempo total da faixa

isso vai me gerar um novo nova

informação do tempo que é o quê com 60%

da faixa já completa isso aqui na

verdade vai me dar informação de qual é

o novo tempo que eu quero que eu quero

estabelecer com esse meu clique sacou Se

eu clico aqui que eu quero que aqui que

é sei lá 60% da Barra aqui eu quero que

ele vá para 60% da música concluída

faltando só 40% ou seja eu quero que ele

vá para um lugar da minha música que é

correspondente ao lugar da Barra em que

eu cliquei sacou Se eu clicar aqui no

final eu quero que ele vá pro fim da

música se eu clicar aqui no início eu

quero que ele vá pro início da música se

eu clicar aqui no meio Eu quero que ele

vá pro meio da música se eu clicar aqui

eu quero que ele vá para salá 60% da

música se eu clicar aqui 70% da música

sacou É isso que eu tô fazendo E aí com

isso feito que que eu vou fazer eu vou

pegar aqui olha só vou pegar aqui eu vou

pegar aquele tag

audio ponto

current ponto current time Ou seja a

mesma informação que eu tava usando lá

no avançar e retroceder 15 segundos só

que eu vou fazer o seguinte o tempo

atual da faixa vai ser atualizado para

quê para essa variável novo tempo aqui

que é o Clei beleza com isso aqui feito

Olha

só eu tenho isso aqui então olha só isso

aqui e gente só um segundo se não deu

certo pera aí

Ah tá gente bobagem olha só tá vendo

aqui o componente contêiner barra de

progresso aqui ó contêiner Progresso eu

passei a variável para ele barra de

progresso só que eu variei passei com

esse nome aqui referência então aqui

dentro ele tem que usar esse mesmo nome

né referência beleza

referência E aí aqui ele tá pegando

referência e tá usando aqui não é barra

de progresso beleza aqui fora no app.jsx

é que eu falei ó esse componente espera

uma propriedade referência e eu tô

passando para ele a variável barra de

progresso que vai fazer a vez Dessa

propriedade beleza e aqui dentro tá bom

então ele esperava a propriedade de

referência e ele vai usar essa

propriedade de referência Tá bom eu só

tenho que usar aqui tudo com os nomes

correspondentes se eu tivesse usando

barra de progresso aqui ela teria que

ser barra de progresso aqui para lá

dentro eu poder utilizar barra de

progresso lá dentro do componente mas

com isso tudo aqui feito Vamos lá olha

só com isso aqui feito eu tenho aqui a

capacidade de clicar aqui na minha barra

de progresso e ver o meu progresso sendo

atualizado para onde eu cliquei tá vendo

ó cliquei aqui e aí eu vi aqui o meu

progresso sendo atualizado para onde eu

cliquei beleza gente a gente aqui

manipulou essas informações e conseguiu

com isso gerar aqui aquela

funcionalidade de clicar e aí controlar

o momento atual da faixa baseado em onde

a gente clicou para encerrar eu vou só

dar uma dica aqui tá vendo que ó eu

cliquei aqui beleza tá funcionando tudo

certo ó cliquei aqui também mas se eu

clicar um pouquinho aqui embaixo ele não

vai por quê Porque eu tenho que clicar

especificamente na barra de progresso só

que a barra de progresso é fininha às

vezes assim pô eu erro a mão clico ali

um pouquinho embaixo e aí não vai como é

que eu resolvo isso como é que eu faço

ficar mais fácil de ar essa

funcionalidade aqui eu posso vir aqui no

contêiner de progresso tá vendo

contêiner de progresso eu disse que essa

funcionalidade de avançar a faixa ela

vai ser executada quando eu clicar na

barra de progresso mas olha só a

malandragem aqui eu vou pegar esse on

Click igual avançar para e eu vou

colocar aqui também na tag de cima que é

a tag container que a tag aqui section

que é o contêiner desse componente aqui

beleza basicamente eu T dizendo o

seguinte que todo elemento aqui desse

componente onde eu clicar eu vou

conseguir executar essa função e a isso

aqui é bom porque aqui ó eu não preciso

clicar exatamente na barra de progresso

eu posso clicar aqui um pouco embaixo tá

vendo porque ele ainda responde beleza

isso aqui é muito bom né porque às vezes

sei lá você imagina que você tá fazendo

um aplicativo do celular por exemplo o

usuário às vezes ali tá com um dedo né

operando o seu aplicativo ele erra um

pouco né não clica exatamente ali na

barra de progresso Mas não tem problema

se você botou num elemento maior que a

graça barra de progresso você garante

que a funcionalidade vale pra Barra de

progresso aqui ó tá valendo pra Barra de

progresso mas tá valendo também aqui

para baixo

sabe beleza é isso gente a gente

conseguiu então aqui implementar as

funcionalidades fundamentais aqui dessa

página a gente então fez aqui o nosso

tocador de audiobook aqui inspirado no

tocador do audible e é isso aqui bom

esse é o nosso projeto feito com react

JS Eu espero que você tenha gostado se

você gostou deixa o seu like aproveita

se inscreve aqui no canal para não

perder futuros projetos que a gente vai

lançar aqui dentro do dentro aqui do

universo da programação e também os

vários outros conteúdos aqui do universo

da programação que a gente lança

diariamente aqui no nosso canal e fazer

o seguinte Aproveita e deixa aqui para

mim Você gostou foi o seuu primeiro

contato com react JS O que que você

achou como é que você acha que o react

funciona comparado com o JavaScript

tradicional você preferiu um você

preferiu o outro Fala aí para mim eu tô

interessado em saber aí o que que vocês

TM a dizer beleza gente é isso para essa

aula mas a gente volta na semana que vem

então até lá