dnsimg
-
+
dnsimg
-
+
+
+
+
+
+
+
+
+
+
,
+
+
)
@@ -28,7 +30,7 @@ function App() {
)}
- {imageBase64 && 
}
+ {imageBase64 && }
{loading && (
+
+
)
}
diff --git a/web/src/dnsImgStore.js b/web/src/dnsImgStore.js
index 0a61f1e..2711e9e 100644
--- a/web/src/dnsImgStore.js
+++ b/web/src/dnsImgStore.js
@@ -1,15 +1,17 @@
import { create } from 'zustand';
-const GOOGLE_DNS_API = 'https://dns.google/resolve';
+const GOOGLE_DNS_API = 'https://dns.google/resolve?name=';
+
function hexToBase64(hexString) {
const bytes = [];
for (let i = 0; i < hexString.length; i += 2) {
bytes.push(parseInt(hexString.substr(i, 2), 16));
}
-
- const binaryString = String.fromCharCode(...bytes);
-
+ let binaryString = '';
+ for (let i = 0; i < bytes.length; i += 0x8000) {
+ binaryString += String.fromCharCode.apply(null, bytes.slice(i, i + 0x8000));
+ }
return btoa(binaryString);
}
@@ -24,7 +26,6 @@ function downloadBase64Image(base64, filename = 'image.png') {
export const useDnsImgStore = create((set, get) => ({
domain: '',
- setDomain: (domain) => set({ domain }),
loading: false,
error: null,
chunkCount: null,
@@ -37,36 +38,53 @@ export const useDnsImgStore = create((set, get) => ({
setChunks: (chunks) => set({ chunks }),
setImageBase64: (imageBase64) => set({ imageBase64 }),
setChunksDone: (chunksDone) => set({ chunksDone }),
+ setDomain: (domain) => set({ domain }),
fetchChunks: async () => {
const { domain } = get();
if (!domain) {
set({ error: 'No domain set', chunkCount: null, chunks: [] });
return;
}
- set({ loading: true, error: null, chunkCount: null, chunks: [], imageBase64: null, chunksDone: 0 });
+ set({ loading: true, error: null, chunkCount: null, chunks: null, imageBase64: null, chunksDone: 0 });
try {
- const countRes = await fetch(`${GOOGLE_DNS_API}?name=dnsimg-count.${domain}&type=TXT`);
+ const countRes = await fetch(`${GOOGLE_DNS_API}dnsimg-count.${domain}&type=TXT`);
const countJson = await countRes.json();
const countTxt = countJson?.Answer?.[0]?.data?.replace(/"/g, '');
const chunkCount = parseInt(countTxt, 10);
if (isNaN(chunkCount)) throw new Error('Invalid chunk count');
- set({ chunkCount });
-
- const chunkPromises = Array.from({ length: chunkCount }, (_, i) =>
- fetch(`${GOOGLE_DNS_API}?name=dnsimg-${i+1}.${domain}&type=TXT`)
+ set({ chunkCount, chunks: Array(chunkCount).fill(null) });
+ // Start async fetches for each chunk
+ for (let i = 0; i < chunkCount; i++) {
+ fetch(`${GOOGLE_DNS_API}dnsimg-${i+1}.${domain}&type=TXT`)
.then(res => res.json())
- .then(json => json?.Answer?.[0]?.data?.replace(/"/g, '') || '')
- .catch(error => {
- console.log('error', error);
- return '';
+ .then(json => {
+ const chunkData = json?.Answer?.[0]?.data?.replace(/"/g, '') || '';
+ const chunks = [...get().chunks];
+ chunks[i] = chunkData;
+ set({
+ chunks,
+ chunksDone: get().chunksDone + 1
+ });
+
+ // If all chunks are done, create final image
+ if (get().chunksDone === chunkCount) {
+ const hexImg = chunks.join('');
+ const imageBase64 = hexToBase64(hexImg);
+ set({ imageBase64, loading: false });
+ }
})
- );
- const chunks = await Promise.all(chunkPromises);
- set({ chunks, chunksDone: chunkCount });
-
- const hexImg = chunks.join('');
- const imageBase64 = hexToBase64(hexImg);
- set({ imageBase64, loading: false });
+ .catch(error => {
+ console.error('Error fetching chunk', i, error);
+ const chunks = [...get().chunks];
+ chunks[i] = '';
+ set({
+ chunks,
+ chunksDone: get().chunksDone + 1
+ });
+ });
+ }
+
+
} catch (error) {
set({ error: error.message, loading: false });
}
diff --git a/web/src/main.jsx b/web/src/main.jsx
index f82943a..a04db10 100644
--- a/web/src/main.jsx
+++ b/web/src/main.jsx
@@ -7,11 +7,19 @@ import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
-
-
@@ -36,9 +38,13 @@ function App() {
{Array.from({length: chunkCount}).map((_, i) => (
+
{
+ console.log(chunks[i])
+ }}
/>
))}
@@ -50,6 +56,8 @@ function App() {