baileytownsend.dev
A stream.place client in a single index.html
replaced the innerhtml
+58
-24
+58
-24
index.html
+58
-24
index.html
···
1826
1826
}
1827
1827
1828
1828
function renderBrowseView(streams, avatarMap) {
1829
-
browseGrid.innerHTML = "";
1829
+
browseGrid.replaceChildren();
1830
1830
const total = streams.length;
1831
1831
browseCount.textContent = `${total} streamer${total !== 1 ? "s" : ""} live`;
1832
1832
1833
1833
for (const stream of streams) {
1834
1834
const handle = stream.author?.handle || "unknown";
1835
1835
const did = stream.author?.did || "";
1836
-
const cid = stream.cid;
1837
1836
const title = stream.record?.title || "Untitled stream";
1838
1837
const viewers = stream.viewerCount?.count ?? 0;
1839
1838
const thumbUrl = getThumbnailUrl(did, stream.record?.thumb);
···
1850
1849
connect();
1851
1850
};
1852
1851
1853
-
const thumbImg = thumbUrl
1854
-
? `<img class="tile-thumb" src="${thumbUrl}" alt="" loading="lazy" onerror="this.style.display='none'">`
1855
-
: `<div class="tile-thumb"></div>`;
1852
+
if (thumbUrl) {
1853
+
const thumbImg = document.createElement("img");
1854
+
thumbImg.className = "tile-thumb";
1855
+
thumbImg.src = thumbUrl;
1856
+
thumbImg.alt = "";
1857
+
thumbImg.loading = "lazy";
1858
+
thumbImg.onerror = () => { thumbImg.style.display = "none"; };
1859
+
tile.appendChild(thumbImg);
1860
+
} else {
1861
+
const thumbDiv = document.createElement("div");
1862
+
thumbDiv.className = "tile-thumb";
1863
+
tile.appendChild(thumbDiv);
1864
+
}
1856
1865
1857
-
const avatarImg = avatarUrl
1858
-
? `<img class="tile-avatar" src="${avatarUrl}" alt="" loading="lazy" onerror="this.style.display='none'">`
1859
-
: `<div class="tile-avatar"></div>`;
1866
+
const tileBody = document.createElement("div");
1867
+
tileBody.className = "tile-body";
1860
1868
1861
-
tile.innerHTML = `
1862
-
${thumbImg}
1863
-
<div class="tile-body">
1864
-
${avatarImg}
1865
-
<div class="tile-info">
1866
-
<div class="tile-title">${title.replace(/</g, "<")}</div>
1867
-
<div class="tile-handle">@${handle.replace(/</g, "<")}</div>
1868
-
<div class="tile-meta">
1869
-
<div class="tile-viewers">
1870
-
<span class="viewer-dot"></span>
1871
-
${viewers} watching
1872
-
</div>
1873
-
</div>
1874
-
</div>
1875
-
</div>
1876
-
`;
1869
+
if (avatarUrl) {
1870
+
const avatarImg = document.createElement("img");
1871
+
avatarImg.className = "tile-avatar";
1872
+
avatarImg.src = avatarUrl;
1873
+
avatarImg.alt = "";
1874
+
avatarImg.loading = "lazy";
1875
+
avatarImg.onerror = () => { avatarImg.style.display = "none"; };
1876
+
tileBody.appendChild(avatarImg);
1877
+
} else {
1878
+
const avatarDiv = document.createElement("div");
1879
+
avatarDiv.className = "tile-avatar";
1880
+
tileBody.appendChild(avatarDiv);
1881
+
}
1882
+
1883
+
const tileInfo = document.createElement("div");
1884
+
tileInfo.className = "tile-info";
1885
+
1886
+
const tileTitle = document.createElement("div");
1887
+
tileTitle.className = "tile-title";
1888
+
tileTitle.textContent = title;
1889
+
1890
+
const tileHandle = document.createElement("div");
1891
+
tileHandle.className = "tile-handle";
1892
+
tileHandle.textContent = `@${handle}`;
1893
+
1894
+
const tileMeta = document.createElement("div");
1895
+
tileMeta.className = "tile-meta";
1896
+
1897
+
const tileViewers = document.createElement("div");
1898
+
tileViewers.className = "tile-viewers";
1899
+
1900
+
const viewerDot = document.createElement("span");
1901
+
viewerDot.className = "viewer-dot";
1902
+
tileViewers.appendChild(viewerDot);
1903
+
tileViewers.appendChild(document.createTextNode(`${viewers} watching`));
1904
+
1905
+
tileMeta.appendChild(tileViewers);
1906
+
tileInfo.appendChild(tileTitle);
1907
+
tileInfo.appendChild(tileHandle);
1908
+
tileInfo.appendChild(tileMeta);
1909
+
tileBody.appendChild(tileInfo);
1910
+
tile.appendChild(tileBody);
1877
1911
1878
1912
browseGrid.appendChild(tile);
1879
1913
}