vrchat-youtube-search-api/test.html

57 lines
1.7 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>search: <input id="input" type="text" value="nyan cat" /></label>
<button id="trending">trending</button>
<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>
<button id="start">start</button>
</div>
<div id="output"></div>
<button id="nextpage">next page</button>
<script>
var num = 0;
var lastData;
start.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}`);
}
nextpage.onclick = () => loadData(`/vrcurl/test1000/${lastData.nextpage_vrcurl}`);
async function loadData(url) {
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);
lastData = data;
}
hljs.highlightAll();
</script>
</body></html>