fix: browser example (#197)

examples/browser/README.md

@@ -6,17 +6,52 @@ YouTube.js works in the browser!
 
 To use YouTube.js in the browser you must proxy requests through your own server. You can see our simple reference implementation in Deno in `examples/browser/proxy/deno.ts`.
 
-Once the proxy is set up you need to tell Innertube about it when instantiating it.
+We'll use our own fetch implementation to proxy requests through our server. This is a simple example, but you can use any fetch implementation you want.
 
 ```ts
 import { Innertube } from "youtubei.js/build/browser";
 
 const yt = await Innertube.create({
-    browser_proxy: {
-        host: "localhost",
-        schema: 'http',
-    }
-})
+    fetch: async (input, init) => {
+        // url
+        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]));
+
+        // copy over the request
+        const request = new Request(
+            url,
+            input instanceof Request ? input : undefined,
+        );
+
+        headers.delete('user-agent');
+
+        // fetch the url
+        return fetch(request, init ? {
+            ...init,
+            headers
+        } : {
+            headers
+        });
+    },
+    cache: new UniversalCache(),
+});
 ```
 
 after that you can use the library as normal.

examples/browser/proxy/deno.ts

@@ -18,7 +18,7 @@ const handler = async (request: Request): Promise<Response> => {
         '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-origin, x-youtube-client-version, Accept-Language, Range',
+          'Origin, X-Requested-With, Content-Type, Accept, Authorization, x-goog-visitor-id, x-origin, x-youtube-client-version, Accept-Language, Range, Referer',
         'Access-Control-Max-Age': '86400',
         'Access-Control-Allow-Credentials': 'true',
       }),
@@ -45,7 +45,7 @@ const handler = async (request: Request): Promise<Response> => {
     JSON.parse(url.searchParams.get('__headers') || '{}'),
   );
   copyHeader('range', request_headers, request.headers);
-  copyHeader('user-agent', request_headers, request.headers);
+  !request_headers.has('user-agent') && copyHeader('user-agent', request_headers, request.headers);
   url.searchParams.delete('__headers');
 
   // Make the request to YouTube
@@ -62,6 +62,8 @@ const handler = async (request: Request): Promise<Response> => {
   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(