Add version selector to play page

rrweb-io · Dec 19, 2023 · f56cd2d · f56cd2d
1 parent 045271e
commit f56cd2d
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 15 deletions.
diff --git a/play/index.html b/play/index.html
@@ -28,6 +28,10 @@
   </head>
   <body>
     <p>Events JSON: <a class="json" href="#">loading...</a></p>
+    <p>
+      Version:
+      <select id="versions"></select>
+    </p>
     <div id="jsoneditor" style="width: 100%; height: 400px"></div>
     <div id="player">
       <p class="loading">Loading player...</p>

diff --git 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 `<option value="${version}" ${
-        isDefault ? "selected" : ""
-      } =>${version} (rrweb v${rrwebVersion})</option>`;
-    })
-    .join("");
+  populateVersions();
 
   console.log("Welcome to rrwebdebug.com!");
 }

diff --git 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
@@ -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 `<option value="${version}" ${
+        isDefault ? "selected" : ""
+      }>${version} (rrweb v${rrwebVersion})</option>`;
+    })
+    .join("");
+
+  if (selectedVersion) {
+    (document.getElementById("versions") as HTMLSelectElement).value =
+      selectedVersion;
+  }
+}
+
+export default populateVersions;