Skip to content

Commit

Permalink
fix(101): split warm connection when nocookie in use (#106)
Browse files Browse the repository at this point in the history
  • Loading branch information
justinribeiro authored Nov 13, 2024
1 parent 785c960 commit b9334dc
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 73 deletions.
45 changes: 45 additions & 0 deletions demo/nocookie.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"
/>
<title>lite-youtube demo</title>
<script type="module" src="../lite-youtube.js"></script>
<style>
* {
box-sizing: content-box;
}
body {
max-width: 800px;
margin: auto;
}
pre {
width: 100%;
padding: 1em;
overflow-x: scroll;
background-clip: z;
background-color: #eee;
}
.styleIt {
width: 400px;
}
#bigBlock {
height: 600px;
}
</style>
</head>
<body>


&lt;lite-youtube videoid=&quot;guJLfqTFfIw&quot; nocookie&lt;/lite-youtube&gt;
</pre>
<lite-youtube
videoid="guJLfqTFfIw"
nocookie
></lite-youtube>

</body>
</html>
48 changes: 27 additions & 21 deletions lite-youtube.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export class LiteYTEmbed extends HTMLElement {
}

connectedCallback(): void {
this.addEventListener('pointerover', LiteYTEmbed.warmConnections, {
this.addEventListener('pointerover', () => LiteYTEmbed.warmConnections(this), {
once: true,
});

Expand Down Expand Up @@ -219,7 +219,7 @@ export class LiteYTEmbed extends HTMLElement {

this.domRefPlayButton.setAttribute(
'aria-label',
`${this.videoPlay}: ${this.videoTitle}`
`${this.videoPlay}: ${this.videoTitle}`,
);
this.setAttribute('title', `${this.videoPlay}: ${this.videoTitle}`);

Expand All @@ -237,7 +237,7 @@ export class LiteYTEmbed extends HTMLElement {
attributeChangedCallback(
name: string,
oldVal: unknown,
newVal: unknown
newVal: unknown,
): void {
if (oldVal !== newVal) {
this.setupComponent();
Expand Down Expand Up @@ -289,7 +289,7 @@ export class LiteYTEmbed extends HTMLElement {
},
bubbles: true,
cancelable: true,
})
}),
);
}
}
Expand All @@ -306,11 +306,11 @@ export class LiteYTEmbed extends HTMLElement {
this.domRefImg.fallback.src = posterUrlJpeg;
this.domRefImg.fallback.setAttribute(
'aria-label',
`${this.videoPlay}: ${this.videoTitle}`
`${this.videoPlay}: ${this.videoTitle}`,
);
this.domRefImg?.fallback?.setAttribute(
'alt',
`${this.videoPlay}: ${this.videoTitle}`
`${this.videoPlay}: ${this.videoTitle}`,
);
}

Expand All @@ -327,7 +327,7 @@ export class LiteYTEmbed extends HTMLElement {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting && !this.isIframeLoaded) {
LiteYTEmbed.warmConnections();
LiteYTEmbed.warmConnections(this);
this.addIframe(true);
observer.unobserve(this);
}
Expand Down Expand Up @@ -355,7 +355,7 @@ export class LiteYTEmbed extends HTMLElement {
.querySelector('iframe')
?.contentWindow?.postMessage(
'{"event":"command","func":"' + 'playVideo' + '","args":""}',
'*'
'*',
);
// for youtube video recording demo
}, 2000);
Expand Down Expand Up @@ -398,28 +398,34 @@ export class LiteYTEmbed extends HTMLElement {
* 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(): void {
private static warmConnections(context: LiteYTEmbed): void {
if (LiteYTEmbed.isPreconnected || window.liteYouTubeIsPreconnected) return;

// we don't know which image type to preload, so warm the connection
LiteYTEmbed.addPrefetch('preconnect', 'https://i.ytimg.com/');

// Host that YT uses to serve JS needed by player, per amp-youtube
LiteYTEmbed.addPrefetch('preconnect', 'https://s.ytimg.com');

// The iframe document and most of its subresources come right off
// youtube.com
LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube.com');
if (!context.noCookie) {
// The iframe document and most of its subresources come right off
// youtube.com
LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube.com');

// The botguard script is fetched off from google.com
LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com');
// The botguard script is fetched off from google.com
LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com');

// TODO: Not certain if these ad related domains are in the critical path.
// Could verify with domain-specific throttling.
LiteYTEmbed.addPrefetch(
'preconnect',
'https://googleads.g.doubleclick.net',
);
LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net');
} else {
LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com');
}

// TODO: Not certain if these ad related domains are in the critical path.
// Could verify with domain-specific throttling.
LiteYTEmbed.addPrefetch(
'preconnect',
'https://googleads.g.doubleclick.net'
);
LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net');
LiteYTEmbed.isPreconnected = true;

// multiple embeds in the same page don't check for each other
Expand Down
6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,10 @@
"@esm-bundle/chai": "^4.3.4-fix.0",
"@open-wc/eslint-config": "^12.0.3",
"@open-wc/testing": "^4.0.0",
"@typescript-eslint/eslint-plugin": "^8.13.0",
"@typescript-eslint/parser": "^8.13.0",
"@types/mocha": "^10.0.9",
"@types/node": "^22.9.0",
"@typescript-eslint/eslint-plugin": "^8.14.0",
"@typescript-eslint/parser": "^8.14.0",
"@web/dev-server": "^0.4.6",
"@web/test-runner": "^0.19.0",
"concurrently": "^9.1.0",
Expand Down
117 changes: 67 additions & 50 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -565,11 +565,23 @@
resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
integrity sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==

"@types/mocha@^10.0.9":
version "10.0.9"
resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.9.tgz#101e9da88d2c02e5ac8952982c23b224524d662a"
integrity sha512-sicdRoWtYevwxjOHNMPTl3vSfJM6oyW8o1wXeI7uww6b6xHg8eBznQDNSGBCDJmsE8UMxP05JgZRtsKbTqt//Q==

"@types/node@*":
version "18.11.18"
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.18.tgz#8dfb97f0da23c2293e554c5a50d61ef134d7697f"
integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==

"@types/node@^22.9.0":
version "22.9.0"
resolved "https://registry.yarnpkg.com/@types/node/-/node-22.9.0.tgz#b7f16e5c3384788542c72dc3d561a7ceae2c0365"
integrity sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==
dependencies:
undici-types "~6.19.8"

"@types/parse5@^2.2.34":
version "2.2.34"
resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-2.2.34.tgz#e3870a10e82735a720f62d71dcd183ba78ef3a9d"
Expand Down Expand Up @@ -644,85 +656,85 @@
dependencies:
"@types/node" "*"

"@typescript-eslint/eslint-plugin@^8.13.0":
version "8.13.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.13.0.tgz#650c50b8c795b5d092189f139f6d00535b5b0f3d"
integrity sha512-nQtBLiZYMUPkclSeC3id+x4uVd1SGtHuElTxL++SfP47jR0zfkZBJHc+gL4qPsgTuypz0k8Y2GheaDYn6Gy3rg==
"@typescript-eslint/eslint-plugin@^8.14.0":
version "8.14.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.14.0.tgz#7dc0e419c87beadc8f554bf5a42e5009ed3748dc"
integrity sha512-tqp8H7UWFaZj0yNO6bycd5YjMwxa6wIHOLZvWPkidwbgLCsBMetQoGj7DPuAlWa2yGO3H48xmPwjhsSPPCGU5w==
dependencies:
"@eslint-community/regexpp" "^4.10.0"
"@typescript-eslint/scope-manager" "8.13.0"
"@typescript-eslint/type-utils" "8.13.0"
"@typescript-eslint/utils" "8.13.0"
"@typescript-eslint/visitor-keys" "8.13.0"
"@typescript-eslint/scope-manager" "8.14.0"
"@typescript-eslint/type-utils" "8.14.0"
"@typescript-eslint/utils" "8.14.0"
"@typescript-eslint/visitor-keys" "8.14.0"
graphemer "^1.4.0"
ignore "^5.3.1"
natural-compare "^1.4.0"
ts-api-utils "^1.3.0"

"@typescript-eslint/parser@^8.13.0":
version "8.13.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.13.0.tgz#ef76203b7cac515aa3ccc4f7ce5320dd61c46b29"
integrity sha512-w0xp+xGg8u/nONcGw1UXAr6cjCPU1w0XVyBs6Zqaj5eLmxkKQAByTdV/uGgNN5tVvN/kKpoQlP2cL7R+ajZZIQ==
"@typescript-eslint/parser@^8.14.0":
version "8.14.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.14.0.tgz#0a7e9dbc11bc07716ab2d7b1226217e9f6b51fc8"
integrity sha512-2p82Yn9juUJq0XynBXtFCyrBDb6/dJombnz6vbo6mgQEtWHfvHbQuEa9kAOVIt1c9YFwi7H6WxtPj1kg+80+RA==
dependencies:
"@typescript-eslint/scope-manager" "8.13.0"
"@typescript-eslint/types" "8.13.0"
"@typescript-eslint/typescript-estree" "8.13.0"
"@typescript-eslint/visitor-keys" "8.13.0"
"@typescript-eslint/scope-manager" "8.14.0"
"@typescript-eslint/types" "8.14.0"
"@typescript-eslint/typescript-estree" "8.14.0"
"@typescript-eslint/visitor-keys" "8.14.0"
debug "^4.3.4"

"@typescript-eslint/scope-manager@8.13.0":
version "8.13.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.13.0.tgz#2f4aed0b87d72360e64e4ea194b1fde14a59082e"
integrity sha512-XsGWww0odcUT0gJoBZ1DeulY1+jkaHUciUq4jKNv4cpInbvvrtDoyBH9rE/n2V29wQJPk8iCH1wipra9BhmiMA==
"@typescript-eslint/scope-manager@8.14.0":
version "8.14.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.14.0.tgz#01f37c147a735cd78f0ff355e033b9457da1f373"
integrity sha512-aBbBrnW9ARIDn92Zbo7rguLnqQ/pOrUguVpbUwzOhkFg2npFDwTgPGqFqE0H5feXcOoJOfX3SxlJaKEVtq54dw==
dependencies:
"@typescript-eslint/types" "8.13.0"
"@typescript-eslint/visitor-keys" "8.13.0"
"@typescript-eslint/types" "8.14.0"
"@typescript-eslint/visitor-keys" "8.14.0"

"@typescript-eslint/type-utils@8.13.0":
version "8.13.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.13.0.tgz#8c8fa68490dcb9ae1687ffc7de8fbe23c26417bd"
integrity sha512-Rqnn6xXTR316fP4D2pohZenJnp+NwQ1mo7/JM+J1LWZENSLkJI8ID8QNtlvFeb0HnFSK94D6q0cnMX6SbE5/vA==
"@typescript-eslint/type-utils@8.14.0":
version "8.14.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.14.0.tgz#455c6af30c336b24a1af28bc4f81b8dd5d74d94d"
integrity sha512-Xcz9qOtZuGusVOH5Uk07NGs39wrKkf3AxlkK79RBK6aJC1l03CobXjJbwBPSidetAOV+5rEVuiT1VSBUOAsanQ==
dependencies:
"@typescript-eslint/typescript-estree" "8.13.0"
"@typescript-eslint/utils" "8.13.0"
"@typescript-eslint/typescript-estree" "8.14.0"
"@typescript-eslint/utils" "8.14.0"
debug "^4.3.4"
ts-api-utils "^1.3.0"

"@typescript-eslint/types@8.13.0":
version "8.13.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.13.0.tgz#3f35dead2b2491a04339370dcbcd17bbdfc204d8"
integrity sha512-4cyFErJetFLckcThRUFdReWJjVsPCqyBlJTi6IDEpc1GWCIIZRFxVppjWLIMcQhNGhdWJJRYFHpHoDWvMlDzng==
"@typescript-eslint/types@8.14.0":
version "8.14.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.14.0.tgz#0d33d8d0b08479c424e7d654855fddf2c71e4021"
integrity sha512-yjeB9fnO/opvLJFAsPNYlKPnEM8+z4og09Pk504dkqonT02AyL5Z9SSqlE0XqezS93v6CXn49VHvB2G7XSsl0g==

"@typescript-eslint/typescript-estree@8.13.0":
version "8.13.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.13.0.tgz#db8c93dd5437ca3ce417a255fb35ddc3c12c3e95"
integrity sha512-v7SCIGmVsRK2Cy/LTLGN22uea6SaUIlpBcO/gnMGT/7zPtxp90bphcGf4fyrCQl3ZtiBKqVTG32hb668oIYy1g==
"@typescript-eslint/typescript-estree@8.14.0":
version "8.14.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.14.0.tgz#a7a3a5a53a6c09313e12fb4531d4ff582ee3c312"
integrity sha512-OPXPLYKGZi9XS/49rdaCbR5j/S14HazviBlUQFvSKz3npr3NikF+mrgK7CFVur6XEt95DZp/cmke9d5i3vtVnQ==
dependencies:
"@typescript-eslint/types" "8.13.0"
"@typescript-eslint/visitor-keys" "8.13.0"
"@typescript-eslint/types" "8.14.0"
"@typescript-eslint/visitor-keys" "8.14.0"
debug "^4.3.4"
fast-glob "^3.3.2"
is-glob "^4.0.3"
minimatch "^9.0.4"
semver "^7.6.0"
ts-api-utils "^1.3.0"

"@typescript-eslint/utils@8.13.0":
version "8.13.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.13.0.tgz#f6d40e8b5053dcaeabbd2e26463857abf27d62c0"
integrity sha512-A1EeYOND6Uv250nybnLZapeXpYMl8tkzYUxqmoKAWnI4sei3ihf2XdZVd+vVOmHGcp3t+P7yRrNsyyiXTvShFQ==
"@typescript-eslint/utils@8.14.0":
version "8.14.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.14.0.tgz#ac2506875e03aba24e602364e43b2dfa45529dbd"
integrity sha512-OGqj6uB8THhrHj0Fk27DcHPojW7zKwKkPmHXHvQ58pLYp4hy8CSUdTKykKeh+5vFqTTVmjz0zCOOPKRovdsgHA==
dependencies:
"@eslint-community/eslint-utils" "^4.4.0"
"@typescript-eslint/scope-manager" "8.13.0"
"@typescript-eslint/types" "8.13.0"
"@typescript-eslint/typescript-estree" "8.13.0"
"@typescript-eslint/scope-manager" "8.14.0"
"@typescript-eslint/types" "8.14.0"
"@typescript-eslint/typescript-estree" "8.14.0"

"@typescript-eslint/visitor-keys@8.13.0":
version "8.13.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.13.0.tgz#e97b0d92b266ef38a1faf40a74da289b66683a5b"
integrity sha512-7N/+lztJqH4Mrf0lb10R/CbI1EaAMMGyF5y0oJvFoAhafwgiRA7TXyd8TFn8FC8k5y2dTsYogg238qavRGNnlw==
"@typescript-eslint/visitor-keys@8.14.0":
version "8.14.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.14.0.tgz#2418d5a54669af9658986ade4e6cfb7767d815ad"
integrity sha512-vG0XZo8AdTH9OE6VFRwAZldNc7qtJ/6NLGWak+BtENuEUXGZgFpihILPiBvKXvJ2nFu27XNGC6rKiwuaoMbYzQ==
dependencies:
"@typescript-eslint/types" "8.13.0"
"@typescript-eslint/types" "8.14.0"
eslint-visitor-keys "^3.4.3"

"@web/browser-logs@^0.4.0":
Expand Down Expand Up @@ -4202,6 +4214,11 @@ unbzip2-stream@^1.4.3:
buffer "^5.2.1"
through "^2.3.8"

undici-types@~6.19.8:
version "6.19.8"
resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==

universalify@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
Expand Down

0 comments on commit b9334dc

Please sign in to comment.