From 97f181b2124878dc6ab10d7782977a3fa1f4f79d Mon Sep 17 00:00:00 2001 From: LuanRT Date: Thu, 16 Feb 2023 07:50:02 -0300 Subject: [PATCH] docs: update browser example --- examples/browser/web/index.html | 2 +- examples/browser/web/src/main.ts | 63 +++++++++++++++++++----------- examples/browser/web/src/style.css | 3 +- 3 files changed, 43 insertions(+), 25 deletions(-) diff --git a/examples/browser/web/index.html b/examples/browser/web/index.html index 50043d41..b69d6b3b 100644 --- a/examples/browser/web/index.html +++ b/examples/browser/web/index.html @@ -15,7 +15,7 @@
- +

diff --git a/examples/browser/web/src/main.ts b/examples/browser/web/src/main.ts index 75210157..2d15b258 100644 --- a/examples/browser/web/src/main.ts +++ b/examples/browser/web/src/main.ts @@ -2,6 +2,14 @@ import './style.css'; import { Innertube, UniversalCache } from '../../../../bundle/browser'; import dashjs from 'dashjs'; +const description = document.getElementById('description') as HTMLDivElement; +const form = document.querySelector('form') as HTMLFormElement; +const title = document.getElementById('title') as HTMLHeadingElement; +const metadata = document.getElementById('metadata') as HTMLDivElement; +const loader = document.getElementById('loader') as HTMLDivElement; +const video = document.getElementById('video') as HTMLVideoElement; +const video_container = document.getElementById('video_container') as HTMLDivElement; + async function main() { const yt = await Innertube.create({ generate_session_locally: true, @@ -49,12 +57,10 @@ async function main() { cache: new UniversalCache(false), }); - const description = document.getElementById('description') as HTMLDivElement; - const form = document.querySelector('form') as HTMLFormElement; - 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; + form.animate({ opacity: [0, 1] }, { duration: 300, easing: 'ease-in-out' }); + form.style.display = 'block'; + + showUI(false); let player: dashjs.MediaPlayerClass | undefined; @@ -65,8 +71,7 @@ async function main() { player.reset(); } - video_container.style.display = 'none'; - loader.style.display = 'block'; + hideUI(); let video_id; @@ -74,6 +79,7 @@ async function main() { if (!video_id_or_url) { title.textContent = 'No video id or URL provided'; + showUI(false); return; } @@ -83,6 +89,7 @@ async function main() { if (!endpoint.payload.videoId) { title.textContent = 'Could not resolve URL'; + showUI(false); return; } @@ -91,25 +98,22 @@ async function main() { video_id = video_id_or_url; } - const video = await yt.getInfo(video_id); + const info = await yt.getInfo(video_id); - loader.style.display = 'none'; + title.textContent = info.basic_info.title || null; + description.innerHTML = info.secondary_info?.description.toHTML() || ''; + title.textContent = info.basic_info.title || null; - 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 || ''; + document.title = info.basic_info.title || ''; metadata!.innerHTML = ''; - metadata!.innerHTML += `
${video.primary_info?.published.toHTML()}
`; - metadata!.innerHTML += `
${video.primary_info?.view_count.toHTML()}
`; - metadata!.innerHTML += `
${video.basic_info.like_count} likes
`; + metadata!.innerHTML += `
${info.primary_info?.published.toHTML()}
`; + metadata!.innerHTML += `
${info.primary_info?.view_count.toHTML()}
`; + metadata!.innerHTML += `
${info.basic_info.like_count} likes
`; - video_container.animate({ opacity: [0, 1] }, { duration: 300, easing: 'ease-in-out' }); - video_container.style.display = 'block'; + showUI(true); - const dash = video.toDash((url) => { + const dash = info.toDash((url) => { url.searchParams.set('__host', url.host); url.host = 'localhost:8080'; url.protocol = 'http'; @@ -121,7 +125,7 @@ async function main() { // 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; + video_element.poster = info.basic_info.thumbnail![0].url; // use dash.js to parse the manifest if (player) { @@ -133,9 +137,22 @@ async function main() { player.setInitialMediaSettingsFor('audio', { lang: 'en-US' }); } catch (error) { title.textContent = 'An error occurred (see console)'; + showUI(false); console.error(error); } }); } -main(); +function showUI(with_video = true) { + loader.style.display = 'none'; + video.style.display = with_video ? 'block' : 'none'; + video_container.animate({ opacity: [0, 1] }, { duration: 300, easing: 'ease-in-out' }); + video_container.style.display = 'block'; +} + +function hideUI() { + video_container.style.display = 'none'; + loader.style.display = 'block'; +} + +main(); \ No newline at end of file diff --git a/examples/browser/web/src/style.css b/examples/browser/web/src/style.css index 4d45fb4f..7acb2fd3 100644 --- a/examples/browser/web/src/style.css +++ b/examples/browser/web/src/style.css @@ -16,10 +16,11 @@ hr { form { margin: 0.5rem 0; + display: none; } #loader { - display: none; + display: block; border: 10px solid rgb(68, 68, 68); border-top: 10px solid rgb(255, 255, 255); border-radius: 50%;