Last active
January 28, 2026 22:40
-
-
Save james-prado/e3c89b4fe9c6528ba1933ddf6f4d7a55 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const getVideoId = () => { | |
| const id = window.location.pathname.split('/')[1] | |
| if (isNaN(id)) { | |
| console.warn('cannot find valid video ID') | |
| return undefined | |
| } else { | |
| return parseInt(id) | |
| } | |
| } | |
| const createDownloadLink = (url) => { | |
| const videoId = getVideoId() | |
| const id = videoId ? `thumbnail-${videoId}` : 'thumbnail' | |
| if (!url) return console.warn('thumbnail url is null or undefined') | |
| const link = document.createElement('a') | |
| link.id = id | |
| link.href = url | |
| link.target = '_blank' | |
| const clickHandler = () => { | |
| setTimeout(() => { | |
| URL.revokeObjectURL(url) | |
| removeEventListener('click', clickHandler) | |
| }, 150) | |
| } | |
| link.addEventListener('click', clickHandler, false) | |
| return link | |
| } | |
| const download = (url, fileName) => { | |
| const link = createDownloadLink(url) | |
| link.download = fileName | |
| document.body.append(link) | |
| document.getElementById(link.id).click() | |
| } | |
| const getThumbnailBlob = (videoData) => { | |
| const { thumbnailUrl, name: title } = videoData | |
| if (!thumbnailUrl) return console.warn('thumbnailUrl is null or undefined') | |
| if (!title) return console.warn(`title is null or undefined`) | |
| return fetch(thumbnailUrl) | |
| .then((response) => response.blob()) | |
| .then((blob) => { | |
| // Create a new FileReader innstance | |
| const reader = new FileReader() | |
| // Add a listener to handle successful reading of the blob | |
| reader.addEventListener('load', () => { | |
| const image = new Image() | |
| const url = reader.result | |
| const videoId = getVideoId() | |
| const fileName = videoId ? `Thumbnail - ${title} ${videoId}` : `Thumbnail - ${title}` | |
| // Set the src attribute of the image to be the resulting data URL | |
| // obtained after reading the content of the blob | |
| image.src = url | |
| download(url, fileName) | |
| }) | |
| // Start reading the content of the blob | |
| // The result should be a base64 data URL | |
| reader.readAsDataURL(blob) | |
| }) | |
| } | |
| const videoData = JSON.parse(document.getElementById('microdata').textContent).find((i) => i['@type'] == 'VideoObject') ?? {} | |
| getThumbnailBlob(videoData) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment