mirror of
https://github.com/owncast/owncast.git
synced 2024-11-27 17:59:21 +03:00
dab7914eab
* Commit updated Javascript packages * Bump preact from 10.5.4 to 10.5.5 in /build/javascript (#265) * Trying a new github workflow to install javascript packages * Bump tailwindcss from 1.9.2 to 1.9.4 in /build/javascript (#266) Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss) from 1.9.2 to 1.9.4. - [Release notes](https://github.com/tailwindlabs/tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/master/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/tailwindcss/compare/v1.9.2...v1.9.4) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Commit updated Javascript packages * Bump preact from 10.5.4 to 10.5.5 in /build/javascript Bumps [preact](https://github.com/preactjs/preact) from 10.5.4 to 10.5.5. - [Release notes](https://github.com/preactjs/preact/releases) - [Commits](https://github.com/preactjs/preact/compare/10.5.4...10.5.5) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Owncast <owncast@owncast.online> * Bump @justinribeiro/lite-youtube in /build/javascript Bumps [@justinribeiro/lite-youtube](https://github.com/justinribeiro/lite-youtube) from 0.9.0 to 0.9.1. - [Release notes](https://github.com/justinribeiro/lite-youtube/releases) - [Commits](https://github.com/justinribeiro/lite-youtube/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Owncast <owncast@owncast.online> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com>
88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
/**
|
|
*
|
|
* The shadowDom / Intersection Observer version of Paul's concept:
|
|
* https://github.com/paulirish/lite-youtube-embed
|
|
*
|
|
* A lightweight YouTube embed. Still should feel the same to the user, just
|
|
* MUCH faster to initialize and paint.
|
|
*
|
|
* Thx to these as the inspiration
|
|
* https://storage.googleapis.com/amp-vs-non-amp/youtube-lazy.html
|
|
* https://autoplay-youtube-player.glitch.me/
|
|
*
|
|
* Once built it, I also found these (👍👍):
|
|
* https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube
|
|
* https://github.com/Daugilas/lazyYT https://github.com/vb/lazyframe
|
|
*/
|
|
export declare class LiteYTEmbed extends HTMLElement {
|
|
shadowRoot: ShadowRoot;
|
|
private iframeLoaded;
|
|
private domRefFrame;
|
|
private domRefImg;
|
|
private domRefPlayButton;
|
|
constructor();
|
|
static get observedAttributes(): string[];
|
|
connectedCallback(): void;
|
|
get videoId(): string;
|
|
set videoId(id: string);
|
|
get videoTitle(): string;
|
|
set videoTitle(title: string);
|
|
get videoPlay(): string;
|
|
set videoPlay(name: string);
|
|
get videoStartAt(): number;
|
|
set videoStartAt(time: number);
|
|
get autoLoad(): boolean;
|
|
set autoLoad(value: boolean);
|
|
get params(): string;
|
|
/**
|
|
* Define our shadowDOM for the component
|
|
*/
|
|
private setupDom;
|
|
/**
|
|
* Parse our attributes and fire up some placeholders
|
|
*/
|
|
private setupComponent;
|
|
/**
|
|
* Lifecycle method that we use to listen for attribute changes to period
|
|
* @param {*} name
|
|
* @param {*} oldVal
|
|
* @param {*} newVal
|
|
*/
|
|
attributeChangedCallback(name: string, oldVal: unknown, newVal: unknown): void;
|
|
/**
|
|
* Inject the iframe into the component body
|
|
*/
|
|
private addIframe;
|
|
/**
|
|
* Setup the placeholder image for the component
|
|
*/
|
|
private initImagePlaceholder;
|
|
/**
|
|
* Setup the Intersection Observer to load the iframe when scrolled into view
|
|
*/
|
|
private initIntersectionObserver;
|
|
private static preconnected;
|
|
/**
|
|
* Add a <link rel={preload | preconnect} ...> to the head
|
|
* @param {*} kind
|
|
* @param {*} url
|
|
* @param {*} as
|
|
*/
|
|
private static addPrefetch;
|
|
/**
|
|
* Begin preconnecting to warm up the iframe load Since the embed's netwok
|
|
* requests load within its iframe, preload/prefetch'ing them outside the
|
|
* iframe will only cause double-downloads. So, the best we can do is warm up
|
|
* a few connections to origins that are in the critical path.
|
|
*
|
|
* Maybe `<link rel=preload as=document>` would work, but it's unsupported:
|
|
* http://crbug.com/593267 But TBH, I don't think it'll happen soon with Site
|
|
* Isolation and split caches adding serious complexity.
|
|
*/
|
|
private static warmConnections;
|
|
}
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'lite-youtube': LiteYTEmbed;
|
|
}
|
|
}
|