jirayu_sri/YouTube.js
1
0
Fork 0
mirror of https://github.com/LuanRT/YouTube.js.git synced 2026-07-02 21:52:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: make browser example more complete

Browse Source 
See: https://ytjsexample.pages.dev/
This commit is contained in:
LuanRT
2023-02-14 06:53:28 -03:00
parent 6e30309f56
commit 0d77b59945
3 changed files with 165 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
examples/browser/web/src/main.ts
View File

@@ -4,13 +4,14 @@ import dashjs from 'dashjs';
async function main() {
const yt = await Innertube.create({
generate_session_locally: true,
fetch: async (input: RequestInfo | URL, init?: RequestInit) => {
// url
const url = typeof input === 'string'
? new URL(input)
: input instanceof URL
? input
: new URL(input.url);
? input
: new URL(input.url);
// transform the url for use with our proxy
url.searchParams.set('__host', url.host);
@@ -20,8 +21,8 @@ async function main() {
const headers = init?.headers
? new Headers(init.headers)
: input instanceof Request
? input.headers
: new Headers();
? input.headers
: new Headers();
// now serialize the headers
url.searchParams.set('__headers', JSON.stringify([...headers]));
@@ -48,29 +49,65 @@ async function main() {
cache: new UniversalCache(false),
});
const span = document.getElementById('video_name') as HTMLSpanElement;
const description = document.getElementById('description') as HTMLDivElement;
const form = document.querySelector('form') as HTMLFormElement;
span.textContent = 'Library ready';
const title = document.getElementById('title') as HTMLHeadingElement;
const metadata = document.getElementById('metadata') as HTMLDivElement;
const loader = document.getElementById('loader') as HTMLDivElement;
const video_container = document.getElementById('video_container') as HTMLDivElement;
let player: dashjs.MediaPlayerClass | undefined;
form.addEventListener('submit', async (e) => {
e.preventDefault();
span.textContent = 'Loading...';
if (player) {
player.reset();
}
const video_id = document.querySelector<HTMLInputElement>(
'input[type=text]',
)?.value;
if (!video_id) {
span.textContent = 'No video id';
video_container.style.display = 'none';
loader.style.display = 'block';
let video_id;
const video_id_or_url = document.querySelector<HTMLInputElement>('input[type=text]')?.value;
if (!video_id_or_url) {
title.textContent = 'No video id or URL provided';
return;
}
try {
if (video_id_or_url.match(/(http|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])/)) {
const endpoint = await yt.resolveURL(video_id_or_url);
if (!endpoint.payload.videoId) {
title.textContent = 'Could not resolve URL';
return;
}
video_id = endpoint.payload.videoId;
} else {
video_id = video_id_or_url;
}
const video = await yt.getInfo(video_id);
console.log(video);
span.textContent = video.basic_info.title || null;
loader.style.display = 'none';
title.textContent = video.basic_info.title || null;
description.innerHTML = video.secondary_info?.description.toHTML() || '';
title.textContent = video.basic_info.title || null;
document.title = video.basic_info.title || '';
metadata!.innerHTML = '';
metadata!.innerHTML += `<div class="metadata_item">${video.primary_info?.published.toHTML()}</div>`;
metadata!.innerHTML += `<div class="metadata_item">${video.primary_info?.view_count.toHTML()}</div>`;
metadata!.innerHTML += `<div class="metadata_item">${video.basic_info.like_count} likes</div>`;
video_container.animate({ opacity: [0, 1] }, { duration: 300, easing: 'ease-in-out' });
video_container.style.display = 'block';
const dash = video.toDash((url) => {
url.searchParams.set('__host', url.host);
@@ -79,20 +116,23 @@ async function main() {
return url;
});
const uri = 'data:application/dash+xml;charset=utf-8;base64,' +
btoa(dash);
const uri = 'data:application/dash+xml;charset=utf-8;base64,' + btoa(dash);
// create and append video element
const video_element = document.querySelector('video') as HTMLVideoElement;
video_element.setAttribute('controls', 'true');
video_element.poster = video.basic_info.thumbnail![0].url;
// use dash.js to parse the manifest
if (player) {
player.destroy();
}
player = dashjs.MediaPlayer().create();
player.initialize(video_element, uri, true);
player.setInitialMediaSettingsFor('audio', { lang: 'en-US' });
} catch (error) {
span.textContent = 'An error occurred (see console)';
title.textContent = 'An error occurred (see console)';
console.error(error);
}
});