feat: init repo

2026-07-01 20:46:11 +00:00 · 2024-09-13 13:52:28 -03:00
commit a508925216
65 changed files with 14279 additions and 0 deletions
--- a/examples/browser/proxy/deno.ts
+++ b/examples/browser/proxy/deno.ts
@@ -0,0 +1,87 @@
+import { serve } from 'https://deno.land/std@0.148.0/http/server.ts';
+
+const port = 8080;
+
+function copyHeader(headerName: string, to: Headers, from: Headers) {
+  const hdrVal = from.get(headerName);
+  if (hdrVal) {
+    to.set(headerName, hdrVal);
+  }
+}
+
+const handler = async (request: Request): Promise<Response> => {
+  // If options send do CORS preflight
+  if (request.method === 'OPTIONS') {
+    const response = new Response('', {
+      status: 200,
+      headers: new Headers({
+        'Access-Control-Allow-Origin': request.headers.get('origin') || '*',
+        'Access-Control-Allow-Methods': '*',
+        'Access-Control-Allow-Headers':
+          'Origin, X-Requested-With, Content-Type, Accept, Authorization, x-goog-visitor-id, x-goog-api-key, x-origin, x-youtube-client-version, x-youtube-client-name, x-goog-api-format-version, x-user-agent, Accept-Language, Range, Referer',
+        'Access-Control-Max-Age': '86400',
+        'Access-Control-Allow-Credentials': 'true'
+      })
+    });
+    return response;
+  }
+
+  const url = new URL(request.url, 'http://localhost/');
+  if (!url.searchParams.has('__host')) {
+    return new Response(
+      'Request is formatted incorrectly. Please include __host in the query string.',
+      { status: 400 }
+    );
+  }
+
+  // Set the URL host to the __host parameter
+  url.host = url.searchParams.get('__host')!;
+  url.protocol = 'https';
+  url.port = '443';
+  url.searchParams.delete('__host');
+
+  // Copy headers from the request to the new request
+  const request_headers = new Headers(
+    JSON.parse(url.searchParams.get('__headers') || '{}')
+  );
+  copyHeader('range', request_headers, request.headers);
+
+  if (!request_headers.has('user-agent'))
+    copyHeader('user-agent', request_headers, request.headers);
+
+  url.searchParams.delete('__headers');
+
+  // Make the request to YouTube
+  const fetchRes = await fetch(url, {
+    method: request.method,
+    headers: request_headers,
+    body: request.body
+  });
+
+  // Construct the return headers
+  const headers = new Headers();
+
+  // Copy content headers
+  copyHeader('content-length', headers, fetchRes.headers);
+  copyHeader('content-type', headers, fetchRes.headers);
+  copyHeader('content-disposition', headers, fetchRes.headers);
+  copyHeader('accept-ranges', headers, fetchRes.headers);
+  copyHeader('content-range', headers, fetchRes.headers);
+
+  // Add cors headers
+  headers.set(
+    'Access-Control-Allow-Origin',
+    request.headers.get('origin') || '*'
+  );
+  headers.set('Access-Control-Allow-Headers', '*');
+  headers.set('Access-Control-Allow-Methods', '*');
+  headers.set('Access-Control-Allow-Credentials', 'true');
+
+  // Return the proxied response
+  return new Response(fetchRes.body, {
+    status: fetchRes.status,
+    headers: headers
+  });
+};
+
+await serve(handler, { port });
--- a/examples/browser/web/.gitignore
+++ b/examples/browser/web/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/examples/browser/web/favicon.svg
+++ b/examples/browser/web/favicon.svg
@@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>
--- a/examples/browser/web/index.html
+++ b/examples/browser/web/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <link rel="stylesheet" href="/src/assets/style.css" />
+  <link rel="stylesheet" href="/src/assets/player.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>YouTube.js Example</title>
+</head>
+<body>
+  <form>
+    <input type="text" name="id" placeholder="Video ID or URL" />
+    <input type="submit" value="Play" />
+  </form>
+  <div class="loader" id="loader"></div>
+  <div id="video-container">
+    <div class="shaka-container" id="shaka-container" data-shaka-player-container>
+      <video class="videoel" id="videoel" data-shaka-player autoplay></video>
+    </div>
+    <h2 id="title"></h2>
+    <div id="metadata"></div>
+    <hr />
+    <div id="description"></div>
+  </div>
+  <footer>
+    <p>Powered by <a href="https://github.com/LuanRT/YouTube.js">YouTube.js</a></p>
+  </footer>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>
--- a/examples/browser/web/package-lock.json
+++ b/examples/browser/web/package-lock.json
@@ -0,0 +1,381 @@
+{
+  "name": "web",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "web",
+      "version": "0.0.0",
+      "dependencies": {
+        "bgutils-js": "^2.0.1",
+        "shaka-player": "^4.11.2",
+        "youtubei.js": "github:LuanRT/YouTube.js#do-not-merge/ump-debugging"
+      },
+      "devDependencies": {
+        "typescript": "^4.6.4",
+        "vite": "^3.0.0"
+      }
+    },
+    "../../..": {
+      "name": "pot-gen",
+      "version": "1.0.0",
+      "extraneous": true,
+      "license": "MIT",
+      "dependencies": {
+        "jsdom": "^24.1.1"
+      },
+      "devDependencies": {
+        "esbuild": "^0.14.0",
+        "typescript": "^4.4.4"
+      }
+    },
+    "../../../../../codeberg/googlevideo": {
+      "version": "1.0.0",
+      "extraneous": true,
+      "funding": [
+        "https://github.com/sponsors/LuanRT"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@bufbuild/protobuf": "^2.0.0",
+        "youtubei.js": "^10.4.0"
+      },
+      "devDependencies": {
+        "@eslint/js": "^9.9.0",
+        "@stylistic/eslint-plugin": "^2.6.4",
+        "eslint": "^9.9.0",
+        "globals": "^15.9.0",
+        "ts-proto": "^2.2.0",
+        "typescript": "^5.5.4",
+        "typescript-eslint": "^8.2.0"
+      }
+    },
+    "node_modules/@fastify/busboy": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
+      "integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.12.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/bgutils-js": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/bgutils-js/-/bgutils-js-2.0.1.tgz",
+      "integrity": "sha512-Cf0eidVlipmnEBJw/T3gjj3C/4s1eKLyNZF8MDzb/5XRCn52rW0WjJlMf9xF6xyn5nqt8wO9BiQIcBymKOJZNQ==",
+      "funding": [
+        "https://github.com/sponsors/LuanRT"
+      ]
+    },
+    "node_modules/eme-encryption-scheme-polyfill": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.1.5.tgz",
+      "integrity": "sha512-z9BKXV4TCYjmar0wiZLObZ0J8HE13VIg7Zq/iyPWdbEfROtxVXEJalknWKtBR5XNezzy15/zWS964TGbcAWlPg=="
+    },
+    "node_modules/esbuild": {
+      "version": "0.15.18",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/android-arm": "0.15.18",
+        "@esbuild/linux-loong64": "0.15.18",
+        "esbuild-android-64": "0.15.18",
+        "esbuild-android-arm64": "0.15.18",
+        "esbuild-darwin-64": "0.15.18",
+        "esbuild-darwin-arm64": "0.15.18",
+        "esbuild-freebsd-64": "0.15.18",
+        "esbuild-freebsd-arm64": "0.15.18",
+        "esbuild-linux-32": "0.15.18",
+        "esbuild-linux-64": "0.15.18",
+        "esbuild-linux-arm": "0.15.18",
+        "esbuild-linux-arm64": "0.15.18",
+        "esbuild-linux-mips64le": "0.15.18",
+        "esbuild-linux-ppc64le": "0.15.18",
+        "esbuild-linux-riscv64": "0.15.18",
+        "esbuild-linux-s390x": "0.15.18",
+        "esbuild-netbsd-64": "0.15.18",
+        "esbuild-openbsd-64": "0.15.18",
+        "esbuild-sunos-64": "0.15.18",
+        "esbuild-windows-32": "0.15.18",
+        "esbuild-windows-64": "0.15.18",
+        "esbuild-windows-arm64": "0.15.18"
+      }
+    },
+    "node_modules/esbuild-windows-64": {
+      "version": "0.15.18",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.13.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/jintr": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/jintr/-/jintr-2.1.1.tgz",
+      "integrity": "sha512-89cwX4ouogeDGOBsEVsVYsnWWvWjchmwXBB4kiBhmjOKw19FiOKhNhMhpxhTlK2ctl7DS+d/ethfmuBpzoNNgA==",
+      "funding": [
+        "https://github.com/sponsors/LuanRT"
+      ],
+      "dependencies": {
+        "acorn": "^8.8.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.4.33",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "2.79.1",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/shaka-player": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/shaka-player/-/shaka-player-4.11.2.tgz",
+      "integrity": "sha512-KhmEVHlxPn0XPY8uYd/83OVWCJoMZ6kgvZezPOu/HzTQJIh2DGarYMfWM1d9Mlz8WETP+c81W4GjawLR3strzQ==",
+      "dependencies": {
+        "eme-encryption-scheme-polyfill": "^2.1.5"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
+    },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "node_modules/undici": {
+      "version": "5.28.4",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
+      "integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==",
+      "dependencies": {
+        "@fastify/busboy": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "3.2.8",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.15.9",
+        "postcss": "^8.4.18",
+        "resolve": "^1.22.1",
+        "rollup": "^2.79.1"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      },
+      "peerDependencies": {
+        "@types/node": ">= 14",
+        "less": "*",
+        "sass": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/youtubei.js": {
+      "version": "10.3.0",
+      "resolved": "git+ssh://git@github.com/LuanRT/YouTube.js.git#f7ed7b2f5a5928543df516fd6eb2363ee033d0ce",
+      "funding": [
+        "https://github.com/sponsors/LuanRT"
+      ],
+      "dependencies": {
+        "jintr": "^2.1.1",
+        "tslib": "^2.5.0",
+        "undici": "^5.19.1"
+      }
+    }
+  }
+}
--- a/examples/browser/web/package.json
+++ b/examples/browser/web/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^4.6.4",
+    "vite": "^3.0.0"
+  },
+  "dependencies": {
+    "bgutils-js": "^2.0.1",
+    "shaka-player": "^4.11.2",
+    "youtubei.js": "github:LuanRT/YouTube.js#do-not-merge/ump-debugging"
+  }
+}
--- a/examples/browser/web/public/service-worker.js
+++ b/examples/browser/web/public/service-worker.js
@@ -0,0 +1,3 @@
+/* eslint-disable */
+var u=new Set(["www.youtube.com","music.youtube.com","suggestqueries.google.com","youtubei.googleapis.com","youtubei.googleapis.com","green-youtubei.sandbox.googleapis.com","release-youtubei.sandbox.googleapis.com","test-youtubei.sandbox.googleapis.com","cami-youtubei.sandbox.googleapis.com","uytfe.sandbox.google.com"]);self.addEventListener("fetch",o=>{try{let s=new URL(o.request.url).hostname;if(!u.has(s))return}catch(s){return}let e=new URL(o.request.url);e.searchParams.set("__host",e.host),e.host=e.searchParams.get("__proxy");let t=new Request(e,o.request);o.respondWith(fetch(t))});
+//# sourceMappingURL=service-worker.js.map
--- a/examples/browser/web/public/service-worker.js.map
+++ b/examples/browser/web/public/service-worker.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../browser/client/service-worker.ts"],
+  "sourcesContent": ["// We need to proxy requests to youtube to our own server to avoid CORS issues\n\n/// <reference lib=\"WebWorker\" />\n\n// export empty type because of tsc --isolatedModules flag\nexport type {};\ndeclare const self: ServiceWorkerGlobalScope;\n\nconst hosts = new Set([\n    \"www.youtube.com\",\n    \"music.youtube.com\",\n    \"suggestqueries.google.com\",\n    \"youtubei.googleapis.com\",\n    \"youtubei.googleapis.com\",\n    \"green-youtubei.sandbox.googleapis.com\",\n    \"release-youtubei.sandbox.googleapis.com\",\n    \"test-youtubei.sandbox.googleapis.com\",\n    \"cami-youtubei.sandbox.googleapis.com\",\n    \"uytfe.sandbox.google.com\"\n]);\n\nself.addEventListener('fetch', event => {\n    try {\n        const host = new URL(event.request.url).hostname;\n        if (!hosts.has(host))\n            return;\n    } catch {\n        return;\n    }\n    const url =  new URL(event.request.url);\n    url.searchParams.set('__host', url.host);\n    url.host = url.searchParams.get('__proxy')!;\n\n    // we should proxy this to our own server\n    const request = new Request(url, event.request);\n\n    event.respondWith(fetch(request));\n});\n"],
+  "mappings": ";AAQA,GAAM,GAAQ,GAAI,KAAI,CAClB,kBACA,oBACA,4BACA,0BACA,0BACA,wCACA,0CACA,uCACA,uCACA,0BACJ,CAAC,EAED,KAAK,iBAAiB,QAAS,GAAS,CACpC,GAAI,CACA,GAAM,GAAO,GAAI,KAAI,EAAM,QAAQ,GAAG,EAAE,SACxC,GAAI,CAAC,EAAM,IAAI,CAAI,EACf,MACR,OAAQ,EAAN,CACE,MACJ,CACA,GAAM,GAAO,GAAI,KAAI,EAAM,QAAQ,GAAG,EACtC,EAAI,aAAa,IAAI,SAAU,EAAI,IAAI,EACvC,EAAI,KAAO,EAAI,aAAa,IAAI,SAAS,EAGzC,GAAM,GAAU,GAAI,SAAQ,EAAK,EAAM,OAAO,EAE9C,EAAM,YAAY,MAAM,CAAO,CAAC,CACpC,CAAC",
+  "names": []
+}
--- a/examples/browser/web/public/vite.svg
+++ b/examples/browser/web/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/examples/browser/web/src/assets/player.css
+++ b/examples/browser/web/src/assets/player.css
@@ -0,0 +1,423 @@
+@import url(https://fonts.googleapis.com/css?family=Material+Icons+Sharp);
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9vAw.ttf) format('truetype');
+}
+
+.shaka-container {
+  font-family: 'Roboto', sans-serif;
+}
+
+.shaka-container .shaka-bottom-controls {
+  width: 100%;
+  padding: 0;
+  padding-bottom: 0;
+  z-index: 1;
+}
+
+.shaka-container .shaka-bottom-controls {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.shaka-container .shaka-ad-controls {
+  -webkit-box-ordinal-group: 2;
+  -ms-flex-order: 1;
+  order: 1;
+}
+
+.shaka-container .shaka-spinner .shaka-spinner-path {
+  stroke: #ffffff;
+}
+
+.shaka-container .shaka-scrim-container {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  flex-shrink: 1;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  transition: opacity cubic-bezier(.4, 0, .6, 1) .6s;
+  background: linear-gradient(to top, hsla(0, 0%, 0%, 0.61), transparent 15%);
+}
+
+.shaka-container .shaka-play-button {
+  width: 100px;
+  height: 100px;
+  border-radius: 0;
+  background-color: transparent;
+  filter: invert();
+  box-shadow: none;
+  -webkit-box-ordinal-group: -3;
+  -ms-flex-order: -4;
+  order: -4;
+}
+
+.shaka-container .shaka-small-play-button {
+  -webkit-box-ordinal-group: -2;
+  -ms-flex-order: -3;
+  order: -3;
+}
+
+.shaka-container .shaka-mute-button {
+  -webkit-box-ordinal-group: -1;
+  -ms-flex-order: -2;
+  order: -2;
+}
+
+.shaka-container .shaka-controls-button-panel>* {
+  margin: 0;
+  padding: 3px 8px;
+  color: #EEE;
+  height: 40px;
+}
+
+.shaka-container .shaka-controls-button-panel>*:hover {
+  color: #FFF;
+}
+
+.shaka-container .shaka-controls-button-panel .shaka-volume-bar-container {
+  position: relative;
+  z-index: 10;
+  left: -1px;
+  -webkit-box-ordinal-group: 0;
+  -ms-flex-order: -1;
+  order: -1;
+  opacity: 0;
+  width: 0px;
+  -webkit-transition: width 0.2s cubic-bezier(0.4, 0, 1, 1);
+  height: 3px;
+  transition: width 0.2s cubic-bezier(0.4, 0, 1, 1);
+  padding: 0;
+}
+
+.shaka-container .shaka-controls-button-panel .shaka-volume-bar-container:hover,
+.shaka-container .shaka-controls-button-panel .shaka-volume-bar-container:focus {
+  display: block;
+  width: 50px;
+  opacity: 1;
+  padding: 0 6px;
+}
+
+.shaka-container .shaka-mute-button:hover+div {
+  opacity: 1;
+  width: 50px;
+  padding: 0 6px;
+}
+
+.shaka-container .shaka-current-time {
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.shaka-container .shaka-seek-bar-container {
+  height: 3px;
+  position: relative;
+  top: -1px;
+  border-radius: 0;
+  margin-bottom: 0;
+}
+
+.shaka-container .shaka-seek-bar-container .shaka-range-element {
+  opacity: 0;
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
+}
+
+.shaka-container .shaka-seek-bar-container:hover {
+  height: 5px;
+  top: 0;
+  cursor: pointer;
+}
+
+.shaka-container .shaka-seek-bar-container:hover .shaka-range-element {
+  opacity: 1;
+  cursor: pointer;
+}
+
+.shaka-container .shaka-seek-bar-container input[type=range]::-webkit-slider-thumb {
+  background: #FF0000;
+  cursor: pointer;
+}
+
+.shaka-container .shaka-seek-bar-container input[type=range]::-moz-range-thumb {
+  background: #FF0000;
+  cursor: pointer;
+}
+
+.shaka-container .shaka-seek-bar-container input[type=range]::-ms-thumb {
+  background: #FF0000;
+  cursor: pointer;
+}
+
+.shaka-container .shaka-video-container * {
+  font-family: 'Roboto', sans-serif;
+}
+
+.shaka-container .shaka-video-container .material-icons-round {
+  font-family: 'Material Icons Sharp';
+}
+
+.shaka-container .shaka-overflow-menu,
+.shaka-container .shaka-settings-menu {
+  border-radius: 2px;
+  background: rgba(37, 37, 37, 0.9);
+  text-shadow: 0 0 2px rgb(0 0 0%);
+  -webkit-transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1);
+  transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1);
+  -moz-user-select: none;
+  -ms-user-select: none;
+  animation: fade 0.3s;
+  -webkit-user-select: none;
+  right: 10px;
+  bottom: 50px;
+  padding: 0;
+  min-width: 200px;
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.shaka-container .shaka-settings-menu {
+  padding: 0 0 8px;
+}
+
+.shaka-container .shaka-settings-menu button {
+  font-size: 12px;
+}
+
+.shaka-container .shaka-settings-menu button span {
+  margin-left: 33px;
+  font-size: 13px;
+}
+
+.shaka-container .shaka-settings-menu button[aria-selected="true"] {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.shaka-container .shaka-settings-menu button[aria-selected="true"] span {
+  -webkit-box-ordinal-group: 3;
+  -ms-flex-order: 2;
+  order: 2;
+  margin-left: 0;
+}
+
+.shaka-container .shaka-settings-menu button[aria-selected="true"] i {
+  -webkit-box-ordinal-group: 2;
+  -ms-flex-order: 1;
+  order: 1;
+  font-size: 18px;
+  padding-left: 5px;
+}
+
+.shaka-container .shaka-overflow-menu button {
+  padding: 0;
+}
+
+.shaka-container .shaka-overflow-menu button i {
+  display: none;
+}
+
+.shaka-container .shaka-overflow-menu button .shaka-overflow-button-label {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: default;
+  outline: none;
+  height: 40px;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 100%;
+  flex: 0 0 100%;
+}
+
+.shaka-container .shaka-overflow-menu button .shaka-overflow-button-label span {
+  -ms-flex-negative: initial;
+  flex-shrink: initial;
+  padding-left: 15px;
+  font-size: 13px;
+  font-weight: 500;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.shaka-container .shaka-overflow-menu span+span {
+  color: #FFF;
+  font-weight: 400 !important;
+  font-size: 12px !important;
+  padding-right: 8px;
+  padding-left: 0 !important;
+}
+
+.shaka-container .shaka-overflow-menu span+span:after {
+  content: "navigate_next";
+  font-family: 'Material Icons Sharp';
+  font-size: 20px;
+}
+
+.shaka-container .shaka-overflow-menu .shaka-pip-button span+span {
+  padding-right: 15px !important;
+}
+
+.shaka-container .shaka-overflow-menu .shaka-pip-button span+span:after {
+  content: "";
+}
+
+.shaka-container .shaka-back-to-overflow-button {
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  font-size: 12px;
+  color: #eee;
+  height: 40px;
+}
+
+.shaka-container .shaka-back-to-overflow-button .material-icons-round {
+  font-size: 15px;
+  padding-right: 10px;
+}
+
+.shaka-container .shaka-back-to-overflow-button span {
+  margin-left: 3px !important;
+}
+
+.shaka-container .shaka-overflow-menu button:hover,
+.shaka-container .shaka-settings-menu button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+}
+
+.shaka-container .shaka-overflow-menu button:hover label,
+.shaka-container .shaka-settings-menu button:hover label {
+  cursor: pointer;
+}
+
+.shaka-container .shaka-overflow-menu button,
+.shaka-container .shaka-settings-menu button {
+  color: #EEE;
+}
+
+.shaka-container .shaka-captions-off {
+  color: #BFBFBF;
+}
+
+.shaka-container .shaka-overflow-menu-button {
+  font-size: 18px;
+  margin-right: 5px;
+}
+
+.shaka-container .shaka-fullscreen-button:hover {
+  font-size: 25px;
+  -webkit-transition: font-size 0.1s cubic-bezier(0, 0, 0.2, 1);
+  transition: font-size 0.1s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.shaka-container .shaka-overflow-menu,
+.shaka-container .shaka-settings-menu {
+  border-radius: 10px;
+}
+
+@media (prefers-color-scheme: light) {
+
+  .shaka-container .shaka-overflow-menu,
+  .shaka-container .shaka-settings-menu {
+    background: rgba(255, 255, 255, 0.9);
+  }
+
+  .shaka-container .shaka-overflow-menu span+span,
+  .shaka-container .shaka-overflow-menu button,
+  .shaka-container .shaka-settings-menu button {
+    color: #000000;
+  }
+}
+
+@media (min-width: 800px) {
+  .shaka-container .shaka-controls-button-panel {
+    -webkit-box-ordinal-group: 3;
+    -ms-flex-order: 2;
+    order: 2;
+    height: 40px;
+    padding: 0 10px;
+  }
+}
+
+@media (max-width: 800px) {
+  .shaka-container .shaka-scrim-container {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .shaka-container .shaka-range-container {
+    margin: 0;
+    top: 0;
+  }
+
+  .shaka-container .shaka-mute-button {
+    display: none;
+  }
+
+  .shaka-container .shaka-overflow-menu,
+  .shaka-container .shaka-settings-menu {
+    bottom: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 80%;
+    margin: 10px;
+    border-radius: 10px;
+  }
+
+  .shaka-container .shaka-overflow-menu button,
+  .shaka-container .shaka-settings-menu button {
+    width: 100%;
+    height: 40px;
+    padding: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  .shaka-container .shaka-overflow-menu button span,
+  .shaka-container .shaka-settings-menu button span {
+    margin-left: 0;
+    padding-left: 15px;
+  }
+}
--- a/examples/browser/web/src/assets/style.css
+++ b/examples/browser/web/src/assets/style.css
@@ -0,0 +1,135 @@
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #202020;
+  color: rgb(255, 255, 255);
+  line-height: 1.6;
+  font-family: Roboto, Arial, sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: transparent;
+}
+
+hr {
+  width: 100%;
+  border: 1px solid transparent;
+  background-color: rgb(68, 68, 68);
+}
+
+form {
+  margin: 0.5rem 0;
+  display: none;
+  border-radius: 0.3rem;
+  background-color: rgb(68, 68, 68);
+}
+
+form input {
+  padding: 0.5rem;
+  border: none;
+  color: rgb(255, 255, 255);
+}
+
+form input[type="text"] {
+  background: transparent;
+}
+
+form input[type="text"]:focus {
+  outline: none;
+}
+
+form input[type="submit"] {
+  color: rgb(255, 255, 255);
+  background-color: rgba(0, 0, 0, 0.244);
+  cursor: pointer;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: #ffffff;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+#loader {
+  display: block;
+  border: 10px solid rgb(68, 68, 68);
+  border-top: 10px solid rgb(255, 255, 255);
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  align-self: center;
+  animation: spin 1s linear infinite;
+  margin: 0.5rem 0;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#shaka-container {
+  height: 40vw;
+}
+
+#video-container {
+  display: none;
+  flex-direction: column;
+  position: relative;
+  width: 70vw !important;
+  margin: 0.5rem 0;
+}
+
+#metadata {
+  display: flex;
+  flex-direction: row;
+  align-self: left;
+  margin: 0.5rem 0;
+}
+
+#metadata>#metadata-item {
+  margin: 0 0.3rem;
+  background-color: #ffffff;
+  color: rgba(0, 0, 0, 0.757);
+  font-weight: 600;
+  padding: 0.2rem 0.5rem;
+  border-radius: 0.3rem;
+}
+
+#video-container>#description {
+  align-self: left;
+  margin-left: 0.5rem;
+  font-size: medium;
+}
+
+video {
+  width: 100%;
+  height: 100%;
+}
+
+footer {
+  margin: 0.5rem 0;
+}
+
+@media screen and (max-width: 768px) {
+  video {
+    height: auto;
+  }
+
+  #shaka-container {
+    height: auto;
+  }
+  
+  #video-container {
+    width: 100% !important;
+  }
+}
--- a/examples/browser/web/src/main.ts
+++ b/examples/browser/web/src/main.ts
@@ -0,0 +1,408 @@
+import { BG } from 'bgutils-js';
+import GoogleVideo, { PART, Protos } from '../../../..';
+import { Innertube, Proto, UniversalCache, Utils, YTNodes } from 'youtubei.js/web';
+
+// @ts-expect-error - x
+import shaka from 'shaka-player/dist/shaka-player.ui';
+
+import 'shaka-player/dist/controls.css';
+
+function fetchFn(input: RequestInfo | URL, init?: RequestInit) {
+  const url = typeof input === 'string'
+    ? new URL(input)
+    : input instanceof URL
+      ? input
+      : new URL(input.url);
+
+  // Transform the url for use with our proxy.
+  url.searchParams.set('__host', url.host);
+  url.host = 'localhost:8080';
+  url.protocol = 'http';
+
+  const headers = init?.headers
+    ? new Headers(init.headers)
+    : input instanceof Request
+      ? input.headers
+      : new Headers();
+
+  // Now serialize the headers.
+  url.searchParams.set('__headers', JSON.stringify([ ...headers ]));
+
+  if (input instanceof Request) {
+    // @ts-expect-error - x
+    input.duplex = 'half';
+  }
+
+  // Copy over the request.
+  const request = new Request(
+    url,
+    input instanceof Request ? input : undefined
+  );
+
+  headers.delete('user-agent');
+
+  return fetch(request, init ? {
+    ...init,
+    headers
+  } : {
+    headers
+  });
+}
+
+const title = document.getElementById('title') as HTMLHeadingElement;
+const description = document.getElementById('description') as HTMLDivElement;
+const metadata = document.getElementById('metadata') as HTMLDivElement;
+const loader = document.getElementById('loader') as HTMLDivElement;
+const form = document.querySelector('form') as HTMLFormElement;
+
+async function getPo(identifier: string): Promise<string | undefined> {
+  const requestKey = 'O43z0dpjhgX20SCx4KAo';
+
+  const bgConfig = {
+    fetch: fetchFn,
+    globalObj: window,
+    requestKey,
+    identifier
+  };
+
+  const challenge = await BG.Challenge.create(bgConfig);
+
+  if (!challenge)
+    throw new Error('Could not get challenge');
+
+  if (challenge.script) {
+    const script = challenge.script.find((sc) => sc !== null);
+    if (script)
+      new Function(script)();
+  } else {
+    console.warn('Unable to load VM.');
+  }
+
+  const poToken = await BG.PoToken.generate({
+    program: challenge.challenge,
+    globalName: challenge.globalName,
+    bgConfig
+  });
+
+  return poToken;
+}
+
+async function main() {
+  const oauthCreds = undefined;
+  // Const oauthCreds = {
+  //   Access_token: 'ya29.abcd',
+  //   Refresh_token: '1//0abcd',
+  //   Scope: 'https://www.googleapis.com/auth/youtube-paid-content https://www.googleapis.com/auth/youtube',
+  //   Token_type: 'Bearer',
+  //   Expiry_date: '2024-08-13T04:41:34.757Z'
+  // };
+
+  const visitorData = Proto.encodeVisitorData(Utils.generateRandomString(11), Math.floor(Date.now() / 1000));
+  const poToken = await getPo(visitorData);
+
+  let yt = await Innertube.create({
+    po_token: poToken,
+    visitor_data: visitorData,
+    fetch: fetchFn,
+    generate_session_locally: true,
+    cache: new UniversalCache(false)
+  });
+
+  if (oauthCreds)
+    await yt.session.signIn(oauthCreds);
+
+  form.animate({ opacity: [ 0, 1 ] }, { duration: 300, easing: 'ease-in-out' });
+  form.style.display = 'block';
+
+  showUI({ hidePlayer: true });
+
+  let player: shaka.Player | undefined;
+  let ui: shaka.ui.Overlay | undefined;
+
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    if (player) {
+      player.destroy();
+    }
+
+    hideUI();
+
+    let videoId;
+
+    const videoIdOrURL = document.querySelector<HTMLInputElement>('input[type=text]')?.value;
+
+    if (!videoIdOrURL) {
+      title.textContent = 'No video id or URL provided';
+      showUI({ hidePlayer: true });
+      return;
+    }
+
+    try {
+      if (videoIdOrURL.match(/(http|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])/)) {
+        const endpoint = await yt.resolveURL(videoIdOrURL);
+
+        if (!endpoint.payload.videoId) {
+          title.textContent = 'Could not resolve URL';
+          showUI({ hidePlayer: true });
+          return;
+        }
+
+        videoId = endpoint.payload.videoId;
+      } else {
+        videoId = videoIdOrURL;
+      }
+
+      if (yt.session.logged_in) {
+        const user = await yt.account.getInfo();
+        const accountItemSections = user.page.contents_memo?.getType(YTNodes.AccountItemSection);
+
+        if (accountItemSections) {
+          const accountItemSection = accountItemSections.first();
+          const accountItem = accountItemSection.contents.first();
+          const datasyncIdToken = `${accountItem.endpoint.payload.directSigninIdentity.effectiveObfuscatedGaiaId}||`;
+          const poToken = await getPo(datasyncIdToken);
+
+          yt = await Innertube.create({
+            po_token: poToken,
+            visitor_data: visitorData,
+            fetch: fetchFn,
+            generate_session_locally: true,
+            cache: new UniversalCache(false)
+          });
+
+          await yt.session.signIn(oauthCreds);
+        }
+      }
+
+      const info = await yt.getInfo(videoId);
+
+      title.textContent = info.basic_info.title || null;
+      description.innerHTML = info.secondary_info?.description.toHTML() || '';
+      title.textContent = info.basic_info.title || null;
+
+      document.title = info.basic_info.title || '';
+
+      metadata.innerHTML = '';
+      metadata.innerHTML += `<div id="metadata-item">${info.primary_info?.published.toHTML()}</div>`;
+      metadata.innerHTML += `<div id="metadata-item">${info.primary_info?.view_count.toHTML()}</div>`;
+      metadata.innerHTML += `<div id="metadata-item">${info.basic_info.like_count} likes</div>`;
+
+      showUI({ hidePlayer: false });
+
+      const dash = await info.toDash();
+
+      const uri = `data:application/dash+xml;charset=utf-8;base64,${btoa(dash)}`;
+
+      if (player) {
+        await player.destroy();
+        player = undefined;
+      }
+
+      if (ui) {
+        ui.destroy();
+        ui = undefined;
+      }
+
+      const videoEl = document.getElementById('videoel') as HTMLVideoElement;
+      const shakaContainer = document.getElementById('shaka-container') as HTMLDivElement;
+
+      shakaContainer
+        .querySelectorAll('div')
+        .forEach((node) => node.remove());
+
+      shaka.polyfill.installAll();
+
+      if (shaka.Player.isBrowserSupported()) {
+        videoEl.poster = info.basic_info.thumbnail![0].url;
+
+        player = new shaka.Player();
+        await player.attach(videoEl);
+        ui = new shaka.ui.Overlay(player, shakaContainer, videoEl);
+
+        const config = {
+          seekBarColors: {
+            base: 'rgba(255,255,255,.2)',
+            buffered: 'rgba(255,255,255,.4)',
+            played: 'rgb(255,0,0)'
+          },
+          fadeDelay: 0
+        };
+
+        ui.configure(config);
+
+        const overflowMenuButton = document.querySelector('.shaka-overflow-menu-button');
+        if (overflowMenuButton) {
+          overflowMenuButton.innerHTML = 'settings';
+        }
+
+        const backToOverflowButton = document.querySelector('.shaka-back-to-overflow-button .material-icons-round');
+        if (backToOverflowButton) {
+          backToOverflowButton.innerHTML = 'arrow_back_ios_new';
+        }
+
+        player.configure({
+          streaming: {
+            bufferingGoal: (info.page[0].player_config?.media_common_config.dynamic_readahead_config.max_read_ahead_media_time_ms || 0) / 1000,
+            rebufferingGoal: (info.page[0].player_config?.media_common_config.dynamic_readahead_config.read_ahead_growth_rate_ms || 0) / 1000,
+            bufferBehind: 300,
+            autoLowLatencyMode: true
+          },
+          abr: {
+            enabled: true,
+            restrictions: {
+              maxBandwidth: Number(info.page[0].player_config?.stream_selection_config.max_bitrate)
+            }
+          }
+        });
+
+        let rn = 0;
+
+        player.getNetworkingEngine()?.registerRequestFilter((_type: unknown, request: Record<string, any>) => {
+          const uri = request.uris[0];
+          const url = new URL(uri);
+          const headers = request.headers;
+
+          if (url.host.endsWith('.googlevideo.com') || headers.Range) {
+            url.searchParams.set('__host', url.host);
+            url.host = 'localhost:8080';
+            url.protocol = 'http';
+          }
+
+          request.method = 'POST';
+          request.body = new Uint8Array([ 120, 0 ]);
+
+          if (url.pathname === '/videoplayback') {
+            if (headers.Range) {
+              request.headers = {};
+              url.searchParams.set('range', headers.Range.split('=')[1]);
+              url.searchParams.set('ump', '1');
+              url.searchParams.set('srfvp', '1');
+              url.searchParams.set('rn', rn.toString());
+              delete headers.Range;
+            }
+
+            rn += 1;
+          }
+
+          request.uris[0] = url.toString();
+        });
+
+        const RequestType = shaka.net.NetworkingEngine.RequestType;
+
+        player.getNetworkingEngine()?.registerResponseFilter(async (type: unknown, response: Record<string, any>) => {
+          let mediaData = new Uint8Array(0);
+
+          const handleRedirect = async (redirectData: Protos.SabrRedirect) => {
+            const redirectRequest = shaka.net.NetworkingEngine.makeRequest([ redirectData.url ], player!.getConfiguration().streaming.retryParameters);
+            const requestOperation = player!.getNetworkingEngine()!.request(type, redirectRequest);
+            const redirectResponse = await requestOperation.promise;
+
+            response.data = redirectResponse.data;
+            response.headers = redirectResponse.headers;
+            response.uri = redirectResponse.uri;
+          };
+
+          const handleMediaData = async (data: Uint8Array) => {
+            const combinedLength = mediaData.length + data.length;
+            const tempMediaData = new Uint8Array(combinedLength);
+
+            tempMediaData.set(mediaData);
+            tempMediaData.set(data, mediaData.length);
+
+            mediaData = tempMediaData;
+          };
+
+          if (type == RequestType.SEGMENT) {
+            const dataBuffer = new GoogleVideo.ChunkedDataBuffer([ new Uint8Array(response.data) ]);
+
+            const googUmp = new GoogleVideo.UMP(dataBuffer);
+
+            let redirect: Protos.SabrRedirect | undefined;
+
+            googUmp.parse((part) => {
+              try {
+                const data = part.data.chunks[0];
+                switch (part.type) {
+                  case PART.MEDIA_HEADER: {
+                    const mediaHeader = Protos.MediaHeader.decode(data);
+                    console.info('[MediaHeader]:', mediaHeader);
+                    break;
+                  }
+                  case PART.MEDIA: {
+                    handleMediaData(part.data.split(1).remainingBuffer.chunks[0]);
+                    break;
+                  }
+                  case PART.SABR_REDIRECT: {
+                    redirect = Protos.SabrRedirect.decode(data);
+                    console.info('[SabrRedirect]:', redirect);
+                    break;
+                  }
+                  case PART.STREAM_PROTECTION_STATUS: {
+                    const streamProtectionStatus = Protos.StreamProtectionStatus.decode(data);
+                    switch (streamProtectionStatus.status) {
+                      case 1:
+                        console.info('[StreamProtectionStatus]: Good');
+                        break;
+                      case 2:
+                        console.error('[StreamProtectionStatus]: Attestation pending');
+                        break;
+                      case 3:
+                        console.error('[StreamProtectionStatus]: Attestation required');
+                        break;
+                      default:
+                        break;
+                    }
+                    break;
+                  }
+                }
+              } catch (error) {
+                console.error('An error occurred while processing the part:', error);
+              }
+            });
+
+            if (redirect)
+              return handleRedirect(redirect);
+
+            if (mediaData.length)
+              response.data = mediaData;
+          }
+        });
+
+        try {
+          await player.load(uri);
+        } catch (e) {
+          console.error('Could not load manifest', e);
+        }
+      } else {
+        console.error('Browser not supported!');
+      }
+    } catch (error) {
+      title.textContent = 'An error occurred (see console)';
+      showUI({ hidePlayer: true });
+      console.error(error);
+    }
+  });
+}
+
+function showUI(args: { hidePlayer?: boolean } = {
+  hidePlayer: true
+}) {
+  const ytplayer = document.getElementById('shaka-container') as HTMLDivElement;
+
+  ytplayer.style.display = args.hidePlayer ? 'none' : 'block';
+
+  const video_container = document.getElementById('video-container') as HTMLDivElement;
+  video_container.animate({ opacity: [ 0, 1 ] }, { duration: 300, easing: 'ease-in-out' });
+  video_container.style.display = 'block';
+
+  loader.style.display = 'none';
+}
+
+function hideUI() {
+  const video_container = document.getElementById('video-container') as HTMLDivElement;
+  video_container.style.display = 'none';
+  loader.style.display = 'block';
+}
+
+main();
--- a/examples/browser/web/src/vite-env.d.ts
+++ b/examples/browser/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/examples/browser/web/tsconfig.json
+++ b/examples/browser/web/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>