Add URL support

nathangathright · Feb 12, 2024 · cffa475 · cffa475
1 parent ebc6d32
commit cffa475
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 56 deletions.
diff --git a/src/index.html b/src/index.html
@@ -11,8 +11,8 @@
   class="font-inter text-base font-normal bg-slate-200 p-4 m-0 flex flex-col place-content-center place-items-center min-h-screen">
     <form class="w-full max-w-3xl flex flex-col">
       <h1 class="mt-3 text-3xl text-center font-extrabold tracking-tight text-slate-900">VTT Chapters</h1>
-      <p class="text-lg text-gray-700 text-center">Conver a <a href="https://github.com/Podcastindex-org/podcast-namespace/blob/main/chapters/jsonChapters.md" class="underline">JSON chapter file</a> to WebVTT</p>
-      <div class="mt-2 flex items-center justify-center w-full">
+      <p class="text-lg text-gray-700 text-center"><a href="/">Upload a JSON file</a> or <a class="underline" href="/?payload=chapters&url=https://raw.githubusercontent.com/Podcastindex-org/podcast-namespace/main/chapters/example.json">see an example</a></p>
+      <div id="uploader" class="mt-2 flex items-center justify-center w-full">
         <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-40 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
             <div class="flex flex-col items-center justify-center pt-5 pb-6">
                 <svg class="w-8 h-8 mb-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">

diff --git a/src/script.js b/src/script.js
@@ -10,7 +10,57 @@ function secondsToTimestamp(startTime) {
   return hours + ':' + minutes + ':' + seconds + '.' + milliseconds;
 }
 
-function generateVTT() {
+function generateVTT(fileContents) {
+  var payload = document.querySelector('input[name="payload"]:checked').id;
+  var json = JSON.parse(fileContents);
+  var chapters = json.chapters;
+
+  if (payload === "chapters") {
+    chapters = chapters.filter(function(chapter) {
+      return chapter.toc !== false;
+    });
+  }
+
+  for (var i = 0; i < chapters.length; i++) {
+    var start = chapters[i].startTime;
+    var end = chapters[i].endTime || (chapters[i + 1] ? chapters[i + 1].startTime : start + 10);
+    var timestamp = secondsToTimestamp(start) + ' --> ' + secondsToTimestamp(end);
+    chapters[i].timestamp = timestamp;
+    delete chapters[i].startTime;
+    delete chapters[i].endTime;
+  }
+
+  var output = document.getElementById('output');
+  output.textContent = 'WEBVTT\n\n';
+
+  // if any chapter with toc==false was removed, add a note to the output
+  if (json.chapters.length !== chapters.length) {
+    output.textContent += 'NOTE\nThis file has been modified to remove chapters with "toc": false\n\n';
+  }
+
+
+  for (var i = 0; i < chapters.length; i++) {
+    output.textContent += (i + 1) + '\n' + chapters[i].timestamp + '\n';
+
+    if (payload === "metadata") {
+      var chapter = JSON.parse(JSON.stringify(chapters[i]));
+      delete chapter.timestamp;
+      output.textContent += JSON.stringify(chapter,null,2) + '\n\n';
+    }
+    else if (payload === "chapters") {
+      output.textContent += chapters[i].title + '\n\n';
+    }
+  }
+
+  var blob = new Blob([output.textContent], {type: 'text/vtt;charset=utf-8'});
+  var url = URL.createObjectURL(blob);
+  var a = document.getElementById('download');
+  a.href = url;
+  a.download = `${payload}.vtt`;
+  a.textContent = `Download ${payload}.vtt`;
+}
+
+function processInput() {
   // get value of selected payload radio button
   var payload = document.querySelector('input[name="payload"]:checked').id;
   if (document.getElementById('dropzone-file').files.length === 0) {
@@ -20,71 +70,55 @@ function generateVTT() {
   var file = document.getElementById('dropzone-file').files[0];
   var reader = new FileReader();
   reader.onload = function(progressEvent) {
-    var json = JSON.parse(this.result);
-    var chapters = json.chapters;
-
-    if (payload === "chapters") {
-      chapters = chapters.filter(function(chapter) {
-        return chapter.toc !== false;
-      });
-
-      // If a toc==false chapter is the first chapter, we need to add a dummy chapter at the beginning
-      if (json.chapters[0].toc === false) {
-        chapters.unshift({
-          title: 'Start',
-          startTime: 0,
-        });
-      }
-    }
+    generateVTT(this.result, payload);
+  };
+  reader.readAsText(file);
+}
 
-    for (var i = 0; i < chapters.length; i++) {
-      var start = chapters[i].startTime;
-      var end = chapters[i].endTime || (chapters[i + 1] ? chapters[i + 1].startTime : start + 10);
-      var timestamp = secondsToTimestamp(start) + ' --> ' + secondsToTimestamp(end);
-      chapters[i].timestamp = timestamp;
-      delete chapters[i].startTime;
-      delete chapters[i].endTime;
+function requestURL(remoteURL){
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', remoteURL, true);
+  xhr.responseType = 'blob';
+  xhr.onload = function() {
+    if (this.status === 200) {
+      // pass filecontents to generateVTT
+      var reader = new FileReader();
+      reader.onload = function(progressEvent) {
+        generateVTT(this.result);
+      };
+      reader.readAsText(this.response);
     }
+  };
+  xhr.send();
+}
 
-    var output = document.getElementById('output');
-    output.textContent = 'WEBVTT\n\n';
+var urlParams = new URLSearchParams(window.location.search);
+var payload = urlParams.get('payload');
+var url = urlParams.get('url');
 
-    // if any chapter with toc==false was removed, add a note to the output
-    if (json.chapters.length !== chapters.length) {
-      output.textContent += 'NOTE\nThis file has been modified to remove chapters with "toc": false\n\n';
-    }
-
-
-    for (var i = 0; i < chapters.length; i++) {
-      output.textContent += (i + 1) + '\n' + chapters[i].timestamp + '\n';
-
-      if (payload === "metadata") {
-        var chapter = JSON.parse(JSON.stringify(chapters[i]));
-        delete chapter.timestamp;
-        output.textContent += JSON.stringify(chapter,null,2) + '\n\n';
-      }
-      else if (payload === "chapters") {
-        output.textContent += chapters[i].title + '\n\n';
-      }
-    }
+if (payload) {
+  document.getElementById(payload).checked = true;
+}
 
-    var blob = new Blob([output.textContent], {type: 'text/vtt;charset=utf-8'});
-    var url = URL.createObjectURL(blob);
-    var a = document.getElementById('download');
-    a.href = url;
-    a.download = `${payload}.vtt`;
-    a.textContent = `Download ${payload}.vtt`;
-  };
-  reader.readAsText(file);
+if (url) {
+  document.getElementById('uploader').style.display = 'none';
+  document.querySelector('a[href="/"').classList.add('underline');
+  requestURL(url);
 }
 
 document.getElementById('dropzone-file').onchange = function() {
-  generateVTT();
+  processInput();
 };
 
 // Listen for changes to the payload radio buttons
 document.querySelectorAll('input[name="payload"]').forEach(function(radio) {
   radio.addEventListener('change', function() {
-    generateVTT();
+    // check if any upload or url or nothing is selected
+    if (url) {
+      requestURL(url);
+    }
+    else if (document.getElementById('dropzone-file').files.length > 0) {
+      processInput();
+    } 
   });
 });