feat: generate podcast url from an archvie url and copy it to clipboard

assets/js/app.js

@@ -13,3 +13,79 @@ import "../css/app.scss"
 //     import socket from "./socket"
 //
 import "phoenix_html"
+
+window.onload = function () {
+    document.getElementById('archiveUrlInput').addEventListener('keydown', function(event) {
+        setTimeout(function () { generatePodcastUrl(); }, 100)
+    });
+
+    document.getElementById('copiaRss').addEventListener('click', function(event) {
+        setTimeout(function () { copyToClipboard(fetchPodcastUrl()); }, 100)
+    });
+};
+
+function fetchArchiveUrl() {
+    return document.getElementById("archiveUrlInput").value.trim();
+}
+
+function fetchPodcastUrl() {
+    return document.getElementById("podcastUrl").value.trim();
+}
+
+function generatePodcastUrl() {
+    const archiveUrl = fetchArchiveUrl();
+    if (!validateArchiveUrl(archiveUrl)) {
+        document.getElementById("podcastUrl").value = "";
+        return;
+    }
+
+    const url = new URL(archiveUrl);
+    const podcastName = url.pathname.split("/").slice(-1).pop();
+    const podcastUrl = "https://openpod.abbiamoundominio.org/podcast/" + podcastName;
+
+    document.getElementById("podcastUrl").value = podcastUrl;
+}
+
+function validateArchiveUrl(url) {
+    try {
+        const archiveUrl = new URL(url);
+
+        var urlPattern = new RegExp("(http|https)://archive.org/details/[a-zA-Z0-9_-]*$")
+        if (!urlPattern.test(url) ){
+            throw 'Paste and archive.org url';
+        }
+    } catch (e) {
+        return false;
+    }
+
+    return true;
+}
+
+function copyToClipboard(text) {
+    if (window.clipboardData && window.clipboardData.setData) {
+        // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
+        return clipboardData.setData("Text", text);
+
+    }
+    else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
+        var textarea = document.createElement("textarea");
+        textarea.textContent = text;
+        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in Microsoft Edge.
+        document.body.appendChild(textarea);
+        textarea.select();
+        try {
+            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
+        }
+        catch (ex) {
+            console.warn("Copy to clipboard failed.", ex);
+            return false;
+        }
+        finally {
+            document.body.removeChild(textarea);
+        }
+    }
+}
+
+// archiveUrlInput
+// https://archive.org/details/uau-pod
+// https://openpod.abbiamoundominio.org/podcast/il-mio-podcast

lib/openpod_web/templates/page/index.html.eex

@@ -55,25 +55,26 @@
           <span class="emoji">🥳</span>
         </div>
         <div class="col-md-8 col-12 py-3">
-          <form>
+          <form id="podcastUrlGenerationForm">
             <div class="form-group m-0">
-              <label for="exampleInputEmail1">
-                <span class="text-danger"
-                  >Genera il feed RSS del tuo podcast</span
-                >
+              <label for="archiveUrlInput">
+                <span class="text-danger">Genera il feed RSS del tuo podcast</span>
                 pronto per la distribuzione su tutti i servizi e app di
                 podcasting! Incolla qui sotto il link al tuo <i>item</i> su
                 <a href="https://archive.org" target="_blank">archive.org</a>
               </label>
               <input
-                class="form-control mb-3"
-                id="exampleInputEmail1"
+                id="archiveUrlInput"
+                name="archiveUrlInput"
+                type="url"
                 placeholder="es: https://archive.org/details/il-mio-podcast"
+                pattern="https://archive.org/details/.*" size="30" required
+                class="form-control mb-3"
               />
-
               <div class="input-group">
                 <div class="input-group-prepend">
                   <button
+                    id="copiaRss"
                     class="btn btn-danger btn-rss text-uppercase"
                     type="button"
                   >
@@ -81,10 +82,12 @@
                   </button>
                 </div>
                 <input
+                  id="podcastUrl"
+                  name="podcastUrl"
                   type="text"
                   class="form-control"
                   disabled
-                  value="https://openpod.abbiamoundominio.org/podcast/il-mio-podcast"
+                  value=""
                 />
               </div>
             </div>