react-vimeo not firing onPause and onPlay events

I am facing an issue with triggering props when playing a Vimeo video on my webpage. Here's a snippet of my code:

import Vimeo from '@u-wave/react-vimeo';

const handleVimeoProgress = (data: any) => {
    console.log('Progress:', data.percent);
};

<Vimeo
    video="..."
    width="850"
    height="400"
    onProgress={handleVimeoProgress}
    autoplay
/>

Software versions:

"@u-wave/react-vimeo": "^0.9.10",
"next": "14.0.3",

The video is playing fine, but the handleVimeoProgress function doesn't seem to be triggered. Any suggestions?

typescriptnext.jsvimeo

Answer №1

Encountered a similar issue myself. To resolve it, simply delete the React.StrictMode provider from either your index.tsx file or any app component where it may be present.

<React.StrictMode>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble reloading a seekbar (input range) in Angular 7 with a function?

I am currently in the process of developing a music player using Angular 7, and below is the HTML code for my component: <div class="track-controller"> <small>{{musicPlayerService.getCurrentTime()}}</small> <div class="progress- ...

htmlangulartypescript

Guide to resolving typescript issue 'name' is not found in type 'ByRoleOptions' while accessing by name using getByRole in react-testing-library

I have a custom component that showcases a collection of filters in the form of removable chips. To test this functionality, I am utilizing react-testing-library with a focus on querying by accessible name as outlined here, using the getByRole method. The ...

reactjstypescriptmaterial-uireact-testing-library

I possess a table that showcases MatIcon buttons. Upon clicking on a button, two additional buttons should appear at the bottom of the table

I am working on a table that contains mat-icon-buttons. When the button is clicked, it should display 2 additional buttons at the end of the table. Upon clicking the first button, its color changes from primary to red, and I would like to add two more butt ...

htmlangulartypescriptangular6

The following 13 pages are static and non-responsive

Hey there, presenting one of my pages in next 13 from the app directory : import { cookies } from "next/headers"; import Link from "next/link"; import styles from "@/styles/chatPage/ChatPage.module.css"; import ChatClient from ...

cachingnext.jsserver-side-renderingnext.js13

What is the process of destructuring an array containing objects?

Examining this JSON structure: { "Person": { "UID": 78, "Name": "Brampage", "Surname": "Foo" }, "Notes": [ { "UID": 78, "DateTime": "2017-03-15T15:43:04.4072317", "Person": { ...

typescriptdestructuring

Leveraging Next.js 13/14 (App Router) to store cached data retrieved by a Server Component in a DYNAMIC route

The current functionality I have: I currently have a Server Component that fetches data which is then passed into a Client Component. This process takes place within a dynamic route (app/.../[username]), with the username also included in the POST request ...

next.jsnext.js13nextjs-dynamic-routingapp-routerreact-server-components

Export interface for material-ui wrapper to cast any type in TypeScript (React)

I work with React using TypeScript. Recently, I encountered an issue with exporting. I'm creating an interface that encapsulates components from Material-ui. Here is a simplified example: Wrapping.tsx import { default as Component, ComponentProps ...

typescriptimportexportmaterial-ui

Why is it important to implement an Authorization flow when developing a Stripe App for its marketplace?

As I develop a Stripe App for its marketplace, two distinct methods of server calls are at play. One involves Server-Side Logic, outlined in this diagram: https://i.stack.imgur.com/cKlOS.png The other encompasses Authorization flows, depicted in this di ...

next.jsoauthmulti-tenantnext-authstripe-apps

Is it feasible to implement early-return typeguards in Typescript?

There are instances where I find myself needing to perform type checks on variables within a function before proceeding further. Personally, I try to minimize nesting in my code and often utilize early-return statements to keep the main functionality of a ...

typescripttypescastingtypeguardsearly-return

What is the best way to showcase a firebase "row" containing two columns within an Ionic 2 application?

Currently in the process of developing an app to keep track of assignments using Ionic 2/Typescript and Firebase as the backend database. The main page displays a list of assignments retrieved from the database. Creating a new assignment requires the user ...

angulartypescriptfirebasefirebase-realtime-databaseionic2

At what point does the constructor of an injected service in Angular execute?

When using @Injectable({providedIn: 'root'}) in Angular 7 for a service, the constructor of the service executes when exactly? Is it upon the creation of a component that utilizes it as a dependency or does it wait until a method within the servi ...

angulartypescriptangular7

Next.js shallow routing is not functioning as expected when a query string is added

The issue at hand: When attempting shallow routing in Next.js by changing the query string (adding or removing, but not updating), the page is reloaded and the shallow option is ignored. Is there a way to prevent reloading while modifying the query strin ...

next.jsnext-router

How can Firebase and Ionic be used to customize the password reset template for sending verification emails and more?

I'm facing an issue with firebase's auth templates not supporting my native language. Is there a way to customize the password reset template to also handle verification and email address change emails? ...

angularjstypescriptfirebaseionic-frameworkfirebase-authentication

What steps can I take to troubleshoot and repair my accordion feature within an Angular project?

As a newcomer to Angular, I recently attempted to create an accordion component but encountered unexpected behavior. Here is the HTML code for my attempt: <div class="faq-item-container"> <h1 class="mt-1 mb-5"><strong>Frequently A ...

htmlcssangulartypescript

Utilize Typescript to Invoke Functions of Different Components in Angular 2

Hello everyone, I am a newcomer to Angular 2 and I'm looking to utilize the value of one component in another component. This will help me populate data based on that particular value. In my setup, I have three Components - App.Component, Category.Co ...

typescriptangular

Disappearing Ionic React useState value issue encountered when passing it as a prop parameter in a function

After transitioning from JavaScript to TypeScript, I encountered an issue with my useState hook not printing anything when used in a parent component. My confusion also extends to importing types in TypeScript. interface Props { sendTextMessage: (text? ...

reactjstypescriptionic-framework

Looking to update the state of a nested object with useReducer?

I am currently developing a Next.js application using Typescript and I need to make changes to a nested object state. Here is the structure of the state: const initialState ={ userInfo: string | null, isLoading: boolean, cursorState: boolean, compa ...

reactjstypescriptobjectnext.jsreact-hooks

Learn how to set up a class using TypeScript decorators

Is there a way to automatically initialize a class when a specific decorator is present above the class? For example: @apiController export class usersControllers extends lib.baseClasses.apiControllerBase().apiController { @lib.decorators.routesRegist ...

typescript

The exploration of child routes and modules

I'm currently working on a somewhat large project and I've decided to break it down into modules. However, I'm facing an issue with accessing the routes of admin.module.ts. In my app.module, I have imported the admin Module. imports: [ Br ...

angulartypescript

When either the post request body or header is set, Next-auth's getSession function will return null

I've been working on implementing a post request in nextjs using the next-auth package. I noticed that when making a get request without setting headers or body, the await getSession({ req }); function on the server returns the correct data. However, ...

next.jsnext-auth