diff --git a/src/pages/index.astro b/src/pages/index.astro index 12627f2..9d92ac2 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -10,6 +10,28 @@ import Base from "../layouts/Base.astro"; } } + const blobBytes = async (blob: Blob) => { + if ("bytes" in blob) return blob.bytes(); + return new Response(blob).arrayBuffer().then((buffer) => { + const uint = new Uint8Array(buffer); + return uint; + }); + }; + + const uint8array64 = (arru8: Uint8Array) => { + if ("toBase64" in arru8) return arru8.toBase64(); + + function _arrayBufferToBase64(bytes: Uint8Array) { + var binary = ""; + var len = bytes.byteLength; + for (var i = 0; i < len; i++) { + binary += String.fromCharCode(bytes[i]); + } + return btoa(binary); + } + return _arrayBufferToBase64(arru8); + }; + class CreateDong extends HTMLElement { connectedCallback() { const shadow = this.attachShadow({ mode: "open" }); @@ -53,13 +75,6 @@ import Base from "../layouts/Base.astro"; if (image.type === "" || audio.type === "") return console.warn("Mime types invalid"); - console.log( - image.size, - audio.size, - await image.bytes(), - await audio.bytes() - ); - const dongFile = new File( [ // version @@ -77,7 +92,6 @@ import Base from "../layouts/Base.astro"; (() => { const value = new Uint32Array(1); value[0] = image.size; - console.log("image size: ", image.size, value); return value; })(), // audio type @@ -88,13 +102,12 @@ import Base from "../layouts/Base.astro"; (() => { const value = new Uint32Array(1); value[0] = audio.size; - console.log("audio size: ", audio.size, value); return value; })(), // image data - await image.bytes(), + await blobBytes(image), // audio data - await audio.bytes(), + await blobBytes(audio), ], `${prompt("Filename:") ?? "file"}.dong`, { @@ -102,13 +115,6 @@ import Base from "../layouts/Base.astro"; } ); - console.log( - dongFile, - dongFile.size, - await dongFile.text(), - await dongFile.bytes() - ); - // download the dong file const url = URL.createObjectURL(dongFile); const a = document.createElement("a"); @@ -133,6 +139,11 @@ import Base from "../layouts/Base.astro"; // image const image = document.createElement("img"); + // do not append as this is only for playing audio + // loaded here to prevent overlaying the sound + const audio = document.createElement("audio"); + + dongSelect.type = "file"; dongSelect.accept = ".dong"; loadButton.type = "submit"; @@ -166,10 +177,8 @@ import Base from "../layouts/Base.astro"; // get files const dongFile = dongSelect.files[0]; - console.log(dongFile, dongFile.size); //, await dongFile.bytes()); - // get first 2 bytes and verify - const version = new Uint8Array(await dongFile.slice(0, 2).bytes()); + const version = new Uint8Array(await blobBytes(dongFile.slice(0, 2))); if (version[0] !== 0xd0 || version[1] !== 2) return console.warn("Invalid file"); @@ -181,7 +190,7 @@ import Base from "../layouts/Base.astro"; // get next 4 bytes and get image size const imgSize = new Uint32Array( - (await dongFile.slice(258, 262).bytes()).buffer + (await blobBytes(dongFile.slice(258, 262))).buffer )[0]; // get next 256 bytes and get mime type @@ -192,32 +201,21 @@ import Base from "../layouts/Base.astro"; // get next 4 bytes and get image size const audSize = new Uint32Array( - (await dongFile.slice(518, 522).bytes()).buffer + (await blobBytes(dongFile.slice(518, 522))).buffer )[0]; - const imageBytes = await dongFile.slice(522, 522 + imgSize).bytes(); - const audioBytes = await dongFile - .slice(522 + imgSize, 522 + imgSize + audSize) - .bytes(); + const imageBytes = await blobBytes( + dongFile.slice(522, 522 + imgSize) + ); + const audioBytes = await blobBytes( + dongFile.slice(522 + imgSize, 522 + imgSize + audSize) + ); - image.src = `data:${imgMimeType};base64,${imageBytes.toBase64()}`; + image.src = `data:${imgMimeType};base64,${uint8array64(imageBytes)}`; // audio play - const audio = document.createElement("audio"); - audio.src = `data:${audMimeType};base64,${audioBytes.toBase64()}`; + audio.src = `data:${audMimeType};base64,${uint8array64(audioBytes)}`; audio.play(); - - console.log( - imgMimeType, - audMimeType, - imgSize, - audSize, - imageBytes, - audioBytes, - btoa(String.fromCharCode(...imageBytes)), - image, - shadow - ); }); } } @@ -235,8 +233,9 @@ import Base from "../layouts/Base.astro"; href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array/toBase6400" >here.) Please use firefox, a gecko based browser, safari, or a webkit based - browser. (iOs has no issues with this site regardless of browser)
- Contact me if chrome starts working or you encounter any issues (up to u to figure out how) + browser. (iOs has no issues with this site regardless of browser)
+ Contact me if chrome starts working or you encounter any issues (up to u to figure + out how)