chore: Update rrweb-player script source based on version and legacy flag

Author: Juice10

src/play.js

@@ -7,6 +7,10 @@ function allowedVersion(version) {
   return allVersions.includes(version);
 }
 
+function isLegacy(version) {
+  return Boolean(versionsJson[version].legacy);
+}
+
 function defaultVersion() {
   const defaultVersion = Object.entries(versionsJson).find(
     ([version, { default: isDefault }]) => {
@@ -16,8 +20,12 @@ function defaultVersion() {
   return defaultVersion?.[0];
 }
 
-function scriptSRC(version) {
-  return `https://cdn.jsdelivr.net/npm/rrweb-player@${version}/dist/index.js`;
+function scriptSRC(version, legacy = false) {
+  if (legacy) {
+    return `https://cdn.jsdelivr.net/npm/rrweb-player@${version}/dist/index.js`;
+  }
+  // return `https://cdn.jsdelivr.net/npm/rrweb-player@${version}/dist/rrweb-player.umd.cjs`; // <= https://github.com/jsdelivr/jsdelivr/issues/18584
+  return `https://unpkg.dev/rrweb-player@${version}/dist/rrweb-player.umd.cjs`;
 }
 function styleHref(version) {
   return `https://cdn.jsdelivr.net/npm/rrweb-player@${version}/dist/style.css`;
@@ -34,8 +42,9 @@ function setupVersionSelector(version) {
   });
 }
 
-function playVideo(events, config) {
-  const component = new rrwebPlayer({
+async function playVideo(events, config) {
+  const Player = window.rrwebPlayer.Player || window.rrwebPlayer; // for legacy version
+  const component = new Player({
     target: document.getElementById("player"),
     data: {
       events,
@@ -81,6 +90,7 @@ async function startPlayer() {
   const url = location.searchParams.get("url");
   let version = location.searchParams.get("version");
   if (!allowedVersion(version)) version = defaultVersion();
+  const legacy = isLegacy(version);
   const canvas = Boolean(location.searchParams.get("canvas"));
   const autoPlay = Boolean(location.searchParams.get("play"));
   const useVirtualDom = Boolean(location.searchParams.get("virtual-dom"));
@@ -132,7 +142,8 @@ async function startPlayer() {
   document.head.appendChild(styleEl);
 
   const scriptEl = document.createElement("script");
-  scriptEl.setAttribute("src", scriptSRC(version));
+  scriptEl.setAttribute("src", scriptSRC(version, legacy));
+  scriptEl.setAttribute("type", "application/javascript");
   scriptEl.addEventListener("load", function () {
     playVideo(events, {
       canvas,

src/versions.json

@@ -1,81 +1,114 @@
 {
   "0.7.1": {
-    "rrwebVersion": "0.9.14"
+    "rrwebVersion": "0.9.14",
+    "legacy": true
   },
   "0.7.2": {
-    "rrwebVersion": "1.0.0"
+    "rrwebVersion": "1.0.0",
+    "legacy": true
   },
   "0.7.3": {
-    "rrwebVersion": "1.0.1"
+    "rrwebVersion": "1.0.1",
+    "legacy": true
   },
   "0.7.4": {
-    "rrwebVersion": "1.0.2"
+    "rrwebVersion": "1.0.2",
+    "legacy": true
   },
   "0.7.5": {
-    "rrwebVersion": "1.0.3"
+    "rrwebVersion": "1.0.3",
+    "legacy": true
   },
   "0.7.6": {
-    "rrwebVersion": "1.0.4"
+    "rrwebVersion": "1.0.4",
+    "legacy": true
   },
   "0.7.7": {
-    "rrwebVersion": "1.0.5"
+    "rrwebVersion": "1.0.5",
+    "legacy": true
   },
   "0.7.8": {
-    "rrwebVersion": "1.0.6"
+    "rrwebVersion": "1.0.6",
+    "legacy": true
   },
   "0.7.9": {
-    "rrwebVersion": "1.0.7"
+    "rrwebVersion": "1.0.7",
+    "legacy": true
   },
   "0.7.10": {
-    "rrwebVersion": "1.0.8"
+    "rrwebVersion": "1.0.8",
+    "legacy": true
   },
   "0.7.11": {
-    "rrwebVersion": "1.1.0"
+    "rrwebVersion": "1.1.0",
+    "legacy": true
   },
   "0.7.13": {
-    "rrwebVersion": "1.1.2"
+    "rrwebVersion": "1.1.2",
+    "legacy": true
   },
   "0.7.14": {
-    "rrwebVersion": "1.1.3"
+    "rrwebVersion": "1.1.3",
+    "legacy": true
   },
   "1.0.0-alpha.0": {
-    "rrwebVersion": "2.0.0-alpha.0"
+    "rrwebVersion": "2.0.0-alpha.0",
+    "legacy": true
   },
   "1.0.0-alpha.1": {
-    "rrwebVersion": "2.0.0-alpha.1"
+    "rrwebVersion": "2.0.0-alpha.1",
+    "legacy": true
   },
   "1.0.0-alpha.2": {
-    "rrwebVersion": "2.0.0-alpha.2"
+    "rrwebVersion": "2.0.0-alpha.2",
+    "legacy": true
   },
   "1.0.0-alpha.3": {
-    "rrwebVersion": "2.0.0-alpha.3"
+    "rrwebVersion": "2.0.0-alpha.3",
+    "legacy": true
   },
   "2.0.0-alpha.5": {
-    "rrwebVersion": "2.0.0-alpha.5"
+    "rrwebVersion": "2.0.0-alpha.5",
+    "legacy": true
   },
   "2.0.0-alpha.6": {
-    "rrwebVersion": "2.0.0-alpha.6"
+    "rrwebVersion": "2.0.0-alpha.6",
+    "legacy": true
   },
   "2.0.0-alpha.7": {
-    "rrwebVersion": "2.0.0-alpha.7"
+    "rrwebVersion": "2.0.0-alpha.7",
+    "legacy": true
   },
   "2.0.0-alpha.8": {
-    "rrwebVersion": "2.0.0-alpha.8"
+    "rrwebVersion": "2.0.0-alpha.8",
+    "legacy": true
   },
   "2.0.0-alpha.9": {
-    "rrwebVersion": "2.0.0-alpha.9"
+    "rrwebVersion": "2.0.0-alpha.9",
+    "legacy": true
   },
   "2.0.0-alpha.10": {
-    "rrwebVersion": "2.0.0-alpha.10"
+    "rrwebVersion": "2.0.0-alpha.10",
+    "legacy": true
   },
   "2.0.0-alpha.11": {
-    "rrwebVersion": "2.0.0-alpha.11"
+    "rrwebVersion": "2.0.0-alpha.11",
+    "legacy": true
   },
   "2.0.0-alpha.12": {
-    "rrwebVersion": "2.0.0-alpha.12"
+    "rrwebVersion": "2.0.0-alpha.12",
+    "legacy": true
   },
   "2.0.0-alpha.13": {
     "rrwebVersion": "2.0.0-alpha.13",
+    "legacy": true
+  },
+  "2.0.0-alpha.14": {
+    "rrwebVersion": "2.0.0-alpha.14",
+    "legacy": true
+  },
+  "2.0.0-alpha.15": {
+    "rrwebVersion": "2.0.0-alpha.15",
     "default": true
   }
 }