React Remix Project Vimeo Error: Sorry, the Vimeo Player API is not available in this browser. #229
Description
I'm currently working on a react front end using remix and wp-graphql. I'm creating a video banner using react-vimeo, and I'm receiving the error below. Also I've provided Hero Component, am I miss a dependency or did I code something in error? Thanks in advance.
Error: Sorry, the Vimeo Player API is not available in this browser.
[1] at /private/Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/functions/[[path]].js:32172:9
[1] at SourceTextModule.evaluate (node:internal/vm/module:226:23)
[1] at VMScriptRunner.runAsModule (/Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/node_modules/@miniflare/runner-vm/src/index.ts:38:18)
[1] at VMScriptRunner.run (/Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/node_modules/@miniflare/runner-vm/src/index.ts:82:17)
[1] at Miniflare.#reload (/Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/node_modules/@miniflare/core/src/index.ts:775:13)
[1] at Miniflare.getPlugins (/Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/node_modules/@miniflare/core/src/index.ts:1017:5)
[1] at createServer (/Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/node_modules/@miniflare/http-server/src/index.ts:369:19)
[1] at startServer (/Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/node_modules/@miniflare/http-server/src/index.ts:476:18)
[1] at main (file:///Users/ufgcorp/Desktop/Localhost/integrated-upstream-wpsn/unionsq/node_modules/wrangler/miniflare-dist/index.mjs:6221:22)
[1] ✘ [ERROR] Miniflare process exited with code 1
import * as React from 'react';
import clsx from 'clsx';
import {Paragraph} from '../typography';
import {ImageProps} from '~/interfaces';
import Player from '@vimeo/player';
import Vimeo from '@u-wave/react-vimeo';
interface HeroProps {
title: string
text: string
color: string
headline: string
background?: boolean
fullvh?:boolean
video?:string
image?: ImageProps
}
function Hero({
title,
text,
color,
headline,
background,
fullvh,
video,
image,
}: HeroProps) {
color = ''
let confetti = <></>;
if (background || video || image) {
confetti = <div className={`mx-auto mt-6 mb-4 w-2 h-2 rotate-[60deg] ${color ? 'bg-['+color+']' : 'bg-white'}`}></div>
}
return (
<div className={clsx('relative w-full flex flex-col justify-center', {
'h-screen': fullvh,
'min-h-[70vh]': !fullvh,
'bg-charcoal': background
})}>
{/*{ image &&*/}
{/* <img src={image.url} alt={image.alt} title={image.title} className='object-cover h-full w-full' />*/}
{/*}*/}
{ background && video ? (
<Vimeo
className={'vimeo-background'}
video={video}
autoplay={true}
muted={true}
loop={true}
responsive={true}
background={true}
/>
) : (
<img src={image.url} alt={image.alt} title={image.title} className='object-cover h-full w-full' />
) }
<div className='relative container mx-auto w-full pt-10 md:pt-20'>
{confetti}
<div className='text-white text-center cms-hero drop-shadow font-["Magnat"] text-2xl leading-4' dangerouslySetInnerHTML={{__html:text}}></div>
{confetti}
{ title != 'Home' &&
<Paragraph className="text-white text-center drop-shadow" dangerouslySetInnerHTML={{__html:title}}></Paragraph>
}
</div>
</div>
)
}
export {Hero}