diff --git a/play/index.html b/play/index.html index 7cc065e..0174ecb 100644 --- a/play/index.html +++ b/play/index.html @@ -28,6 +28,10 @@

Events JSON: loading...

+

+ Version: + +

Loading player...

diff --git a/src/main.ts b/src/main.ts index 31d47ed..49106e6 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,18 +1,8 @@ +import { populateVersions } from "./populate-versions"; import "./style.css"; -import versionsJson from "./versions.json"; - function onLoad() { - document.getElementById("versions")!.innerHTML = Object.entries(versionsJson) - .map(([version, config]) => { - const { rrwebVersion } = config; - const isDefault = "default" in config && config.default; - - return ``; - }) - .join(""); + populateVersions(); console.log("Welcome to rrwebdebug.com!"); } diff --git a/src/play.js b/src/play.js index 518215a..4410599 100644 --- a/src/play.js +++ b/src/play.js @@ -1,4 +1,5 @@ import versionsJson from "./versions.json"; +import populateVersions from "./populate-versions"; function allowedVersion(version) { const allVersions = Object.keys(versionsJson); @@ -15,13 +16,22 @@ function defaultVersion() { } function scriptSRC(version) { - if (!allowedVersion(version)) version = defaultVersion(); return `https://cdn.jsdelivr.net/npm/rrweb-player@${version}/dist/index.js`; } function styleHref(version) { - if (!allowedVersion(version)) version = defaultVersion(); return `https://cdn.jsdelivr.net/npm/rrweb-player@${version}/dist/style.css`; } +function setupVersionSelector(version) { + populateVersions(version); + document.getElementById("versions").addEventListener("change", (e) => { + const newVersion = e.target.value; + // reload page with selected version + const location = new URL(document.location); + location.searchParams.set("version", newVersion); + + document.location.href = location.href; + }); +} function playVideo(events, config) { const component = new rrwebPlayer({ @@ -69,7 +79,8 @@ function getJSONBlobId(url) { async function startPlayer() { const location = new URL(document.location); const url = location.searchParams.get("url"); - const version = location.searchParams.get("version"); + let version = location.searchParams.get("version"); + if (!allowedVersion(version)) version = defaultVersion(); const canvas = Boolean(location.searchParams.get("canvas")); const autoPlay = Boolean(location.searchParams.get("play")); const useVirtualDom = Boolean(location.searchParams.get("virtual-dom")); @@ -131,6 +142,8 @@ async function startPlayer() { showJSON(events); }); + setupVersionSelector(version); + document.head.appendChild(scriptEl); document.querySelector("a.json").setAttribute("href", url); document.querySelector("a.json").innerText = url; diff --git a/src/populate-versions.ts b/src/populate-versions.ts new file mode 100644 index 0000000..2e8f4b9 --- /dev/null +++ b/src/populate-versions.ts @@ -0,0 +1,20 @@ +import versionsJson from "./versions.json"; +export function populateVersions(selectedVersion?: string) { + document.getElementById("versions")!.innerHTML = Object.entries(versionsJson) + .map(([version, config]) => { + const { rrwebVersion } = config; + const isDefault = "default" in config && config.default; + + return ``; + }) + .join(""); + + if (selectedVersion) { + (document.getElementById("versions") as HTMLSelectElement).value = + selectedVersion; + } +} + +export default populateVersions;