Add an hlsjsConfig query param to populate the demo editor

Author: quentinms

demo/main.js

@@ -19,11 +19,14 @@ const testStreams = require('../tests/test-streams');
 const defaultTestStreamUrl = testStreams[Object.keys(testStreams)[0]].url;
 const sourceURL = decodeURIComponent(getURLParam('src', defaultTestStreamUrl));
 
-let demoConfig = getURLParam('demoConfig', null);
-if (demoConfig) {
-  demoConfig = JSON.parse(atob(demoConfig));
-} else {
-  demoConfig = {};
+let demoConfig = {};
+const demoConfigParam = getURLParam('demoConfig', null);
+if (demoConfigParam) {
+  try {
+    demoConfig = JSON.parse(atob(demoConfigParam));
+  } catch (error) {
+    console.warn('Failed to parse demoConfig:', error);
+  }
 }
 
 const hlsjsDefaults = {
@@ -33,6 +36,16 @@ const hlsjsDefaults = {
   backBufferLength: 60 * 1.5,
 };
 
+const hlsjsConfigParam = getURLParam('hlsjsConfig', null);
+let hlsjsConfig = hlsjsDefaults;
+if (hlsjsConfigParam) {
+  try {
+    hlsjsConfig = JSON.parse(atob(hlsjsConfigParam));
+  } catch (error) {
+    console.warn('Failed to parse hlsjsConfig:', error);
+  }
+}
+
 let enableStreaming = getDemoConfigPropOrDefault('enableStreaming', true);
 let autoRecoverError = getDemoConfigPropOrDefault('autoRecoverError', true);
 let levelCapping = getDemoConfigPropOrDefault('levelCapping', -1);
@@ -1497,12 +1510,17 @@ function onDemoConfigChanged(firstLoad) {
     persistEditorValue();
   }
 
+  updatePermalink(firstLoad)
+}
+
+function updatePermalink(firstLoad) {
   const serializedDemoConfig = btoa(JSON.stringify(demoConfig));
+  const serializedHlsjsConfig = btoa(JSON.stringify(hlsjsConfig));
   const baseURL = document.URL.split('?')[0];
   const streamURL = $('#streamURL').val();
   const permalinkURL = `${baseURL}?src=${encodeURIComponent(
     streamURL
-  )}&demoConfig=${serializedDemoConfig}`;
+  )}&demoConfig=${serializedDemoConfig}&hlsjsConfig=${serializedHlsjsConfig}`;
 
   $('#StreamPermalink').html(`<a href="${permalinkURL}">${permalinkURL}</a>`);
   if (!firstLoad && self.location.href !== permalinkURL) {
@@ -1565,7 +1583,7 @@ function setupConfigEditor() {
   configEditor.setTheme('ace/theme/github');
   configEditor.session.setMode('ace/mode/json');
 
-  const contents = hlsjsDefaults;
+  const contents = hlsjsConfig;
   const shouldRestorePersisted =
     JSON.parse(localStorage.getItem(STORAGE_KEYS.Editor_Persistence)) === true;
 
@@ -1737,6 +1755,8 @@ function updateConfigEditorValue(obj) {
 
 function applyConfigEditorValue() {
   onDemoConfigChanged();
+  hlsjsConfig = getEditorValue({ parse: true })
+  updatePermalink(false);
   loadSelectedStream();
 }