does it work on codepen? I mean I tried and I got this:
import React, { useRef, useState } from "react" import "./style.scss" import logo from "./logo.png" export default function App() { const videoLink = useRef("") const [video, setVideo] = useState(false) const [items, setItems] = useState([]) const matchYoutubeUrl = (url) => { var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/ var matches = url.match(p) if (matches) { return matches[1] } else { alert("Please enter a valid link!") } return false; } const convertVideo = () => { if (videoLink.current.value === "") { alert("Don't forget the link...") } else { const newUrl = matchYoutubeUrl(videoLink.current.value) if (newUrl !== false) { setVideo(true) const apiUrl = "https://www.googleapis.com/youtube/v3/videos?part=snippet&id=" + newUrl + "&key=" fetch(apiUrl) .then(response => response.json()) .then(data => { setItems(data.items) console.log(data) }) } } } return ( <> {logo}
Converter Youtube
https://www.youtube.com/watch?v=CXHgHcCLImA&list=RDCXHgHcCLImA&index=1
convertVideo()} id="convert" />
{ items.map((item, key) => { var description if (item.snippet.description !== "") { description = item.snippet.description.substring(0, 100) + "..." } return (
{item.snippet.title}
{item.snippet.title}
{description}
Download
) } ) }
Copyright 2021
) }