youtube-to-html5-loader icon indicating copy to clipboard operation
youtube-to-html5-loader copied to clipboard

How can this be initialized with React.js?

Open pixelRena opened this issue 3 years ago • 3 comments

There seems to be no examples of this with React.js, but there is a package for it. Has anyone been able to configure this properly? My error in console shows as: _thelevicole_youtube_to_html5_loader__WEBPACK_IMPORTED_MODULE_0___default(...) is not a constructor

import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Popover from 'react-bootstrap/Popover';
import YouTubeToHtml5 from '@thelevicole/youtube-to-html5-loader';
import { useState, useEffect, useRef } from 'react';

const Music = () => {
	const [ src, setSrc ] = useState("https://www.youtube.com/watch?v=cI4ryatVkKw");
	const videoRef = useRef();

	useEffect(() => {
		var video = new YouTubeToHtml5();
	})
	const popover = (
		  <Popover id="popover-basic">
		    <Popover.Header as="h3">Music Player</Popover.Header>
		    <Popover.Body>
		    	<h6>Pick a song:</h6>
		    	<button className="btn btn-dark me-2" 
		    	disabled={src === "https://www.youtube.com/watch?v=cI4ryatVkKw"} 
		    	onClick={() => setSrc("https://www.youtube.com/watch?v=cI4ryatVkKw")}>
		    	Song 1
		    	</button>
		    	<button className="btn btn-dark me-2" 
		    	onClick={() => setSrc("https://www.youtube.com/watch?v=qsEBaIMCKl4")}>
		    	Song 2
		    	</button>
		    	<button className="btn btn-dark mt-2" 
		    	onClick={() => setSrc("https://www.youtube.com/watch?v=koRbYQyPU0U")}>
		    	Song 3
		    	</button>
		    </Popover.Body>
		  </Popover>
	);

	return(
		<>
			<div id="musicWidget">
				<OverlayTrigger
				placement="left"
				trigger="click"
				overlay={popover}>
				<button className="btn btn-light bi-music-note"></button>
				</OverlayTrigger>
			</div>
			<video src={src} ref={videoRef}></video>
		</>
	);
};

export default Music;

pixelRena avatar Oct 28 '22 15:10 pixelRena

Hi @pixelRena! Did you manage to fix it? I have the same error when trying to use it with React.js. Thanks a lot!

jsundev avatar Jan 15 '23 09:01 jsundev

Hi @pixelRena! Did you manage to fix it? I have the same error when trying to use it with React.js. Thanks a lot!

I never had any luck with it unfortunately! :[

pixelRena avatar Jan 15 '23 15:01 pixelRena

@pixelRena!、@jsundev! use 4.0.1 is work for me

jokermouth00002 avatar Jul 24 '23 04:07 jokermouth00002