vrchat-youtube-search-api/test.html
2024-05-19 12:19:49 -07:00

65 lines
2.0 KiB
HTML

<!DOCTYPE html><html><head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<style>
img {
max-height: 100vh;
}
</style>
</head><body>
<div>
<label><button id="search">search:</button> <input id="input" type="text" value="nyan cat" /></label>
<br /><button id="trending">trending</button>
<br />
<label><input id="thumbnails" type="checkbox" checked>thumbnails</label>
<label><input id="icons" type="checkbox" checked>icons</label>
<label><input id="captions" type="checkbox" checked>captions</label>
</div>
<div id="output"></div>
<div id="buttons"></div>
<button id="nextpage" style="display: none">next page</button>
<script>
var num = 0;
var lastData;
search.onclick = () => {
output.innerHTML = "";
loadData(`/search?pool=test1000&thumbnails=${thumbnails.checked}&icons=${icons.checked}&captions=${captions.checked}&input=${encodeURIComponent(input.value)}`);
};
trending.onclick = () => {
output.innerHTML = "";
loadData(`/trending?pool=test1000&thumbnails=${thumbnails.checked}&icons=${icons.checked}&captions=${captions.checked}`);
}
async function loadData(url) {
buttons.innerHTML = '';
var data = await fetch(url).then(res => res.json());
var pre = document.createElement("pre");
pre.innerHTML = hljs.highlight(JSON.stringify(data, null, 4), {language: "json"}).value;
output.appendChild(pre);
var img = document.createElement("img");
img.src = `/vrcurl/test1000/${data.imagesheet_vrcurl}`;
output.appendChild(img);
if (data.nextpage_vrcurl) {
buttons.innerHTML = `<button onclick="loadData('/vrcurl/test1000/${data.nextpage_vrcurl}')">next page</button>`;
}
if (data.tabs) {
buttons.innerHTML = data.tabs.map(t => `<button onclick="loadData('/vrcurl/test1000/${t.vrcurl}')">${t.name}</button>`).join('');
}
lastData = data;
}
hljs.highlightAll();
</script>
</body></html>