the metadata API should return a JSON response like:
{
"title": "title of youtube video",
"thumbnail": "https://i.ytimg.com/vi/wmf4-Tp52Jw/hq720.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AG-B4AC0AWKAgwIABABGGUgUyhHMA8=&rs=AOn4CLDJpNvGiMq5dANgm18RgYqt-Nzy2w"
}
if the youtube video wasn't found, return 404. or return 400/500 if there was any other error(s) with the request. we can discuss this after the JSON response works
if the url is to a playlist, render the playlist title, and the thumbnail of the first video in the playlist.
2. render video metadata when a URL is entered
in the event listener that listens for user input, if the input matches a regex (we can go over the regex value), make a request to the metadata API.
if the /metadata response is 200, use the JSON fields to set an <h3> and <img> tag to be the title and thumbnail respectively. the two elements should be inside of a <div> below the text box and button inputs
3. limiting the number of times we ask for metadata
we need to add a new input of type checkbox, which will always be hidden with (css)
when we requested metadata (the regex matches the user input in step 2), we should check this input. any subsequent URL metadata requests while the user is on the same page will not be sent. this prevents us making too many requests to the /metadata api when the url is changing a bunch of times.
4. override the once-per-visit metadata request
if the user changes the input value, then presses enter. re-request the metadata. the enter button overrides the logic from step 3.
evanugarte
commented
4 months ago
when the user pastes a url into the input box, we should show the title and thumbnail underneath the input and button like below:
game plan
1. video metadata API
add a /metadata endpoint that accepts HTTP GET requests like
/metadata?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DYVPgYtcWOYothe above
valueis the youtube url, but special characters are encoded. the original url would be https://www.youtube.com/watch?v=YVPgYtcWOYothe metadata API should return a JSON response like:
if the youtube video wasn't found, return 404. or return 400/500 if there was any other error(s) with the request. we can discuss this after the JSON response works
if the url is to a playlist, render the playlist title, and the thumbnail of the first video in the playlist.
2. render video metadata when a URL is entered
in the event listener that listens for user input, if the input matches a regex (we can go over the regex value), make a request to the metadata API.
if the
/metadataresponse is 200, use the JSON fields to set an<h3>and<img>tag to be the title and thumbnail respectively. the two elements should be inside of a<div>below the text box and button inputs3. limiting the number of times we ask for metadata
we need to add a new input of type checkbox, which will always be hidden with (css)
when we requested metadata (the regex matches the user input in step 2), we should check this input. any subsequent URL metadata requests while the user is on the same page will not be sent. this prevents us making too many requests to the /metadata api when the url is changing a bunch of times.
4. override the once-per-visit metadata request
if the user changes the input value, then presses enter. re-request the metadata. the enter button overrides the logic from step 3.