Fallback to show installation URL in textarea for manually copy

resources/css/styles.css

@@ -194,7 +194,7 @@ input[type="text"]:focus, input[type="password"]:focus, select.form-control:focu
     -moz-appearance: none;
     appearance: none;
     border-radius: 0.25rem;
-    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 }
 
 /* Styling for the range slider */
@@ -289,6 +289,40 @@ input[type="text"]:focus, input[type="password"]:focus, select.form-control:focu
     background-color: #4a47a3; /* Different background to distinguish */
 }
 
+/* Fallback URL Container Styles */
+.fallback-url-container {
+    background: rgba(0, 0, 0, 0.37);
+    color: #E0E0E0; /* Lighter text for readability */
+    border-radius: 8px;
+    padding: 15px;
+    margin-top: 20px;
+}
+
+.fallback-url-container p {
+    font-size: 0.9rem;
+    margin-bottom: 10px;
+    color: #fff;
+}
+
+.fallback-url-container label {
+    display: block;
+    margin-bottom: 10px;
+    color: #E0E0E0;
+    font-weight: bold;
+}
+
+.fallback-url-container textarea {
+    background-color: #fff;
+    color: #000;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 0.9rem;
+    height: auto; /* Adjust based on content */
+    resize: none; /* Disable resizing */
+    margin-bottom: 10px;
+}
+
 
 
 /* Responsive Design */
@@ -309,6 +343,15 @@ input[type="text"]:focus, input[type="password"]:focus, select.form-control:focu
     .button-container {
         flex-direction: column; /* Stack buttons on smaller screens */
     }
+
+    .fallback-url-container {
+        padding: 10px;
+    }
+
+    .fallback-url-container textarea,
+    .fallback-url-container button {
+        font-size: 0.8rem;
+    }
 }
 
 @media (min-width: 769px) and (max-width: 1200px) {

resources/html/configure.html

@@ -247,6 +247,15 @@
 
                 </div>
 
+                <!-- Fallback URL Display - Initially hidden -->
+                <div id="fallbackUrlContainer" class="fallback-url-container" style="display: none;">
+                    <label for="fallbackUrl">Installation URL <span class="bi bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top"
+                                                                 title="This is the URL that you can use to install the addon in Stremio."></span></label>
+                    <textarea id="fallbackUrl" class="form-control" readonly></textarea>
+                    <p>Please manually copy the URL above and paste it in the Stremio search bar. Do not share this URL with unknown persons.</p>
+                </div>
+
+
                 <!-- Submit and Share Buttons -->
                 <div class="button-container">
                     <button type="submit" class="btn btn-primary btn-block custom-btn">Install Addon</button>

resources/js/config_script.js

@@ -293,6 +293,15 @@ function getUserData() {
     };
 }
 
+// Function to display the installation URL in a textarea for manual copying
+function displayFallbackUrl(url) {
+    const container = document.getElementById('fallbackUrlContainer');
+    const textarea = document.getElementById('fallbackUrl');
+    textarea.value = url;
+    container.style.display = 'block'; // Make the container visible
+    textarea.focus();
+}
+
 // ---- Event Listeners ----
 
 document.getElementById('provider_token').addEventListener('input', function () {
@@ -351,7 +360,8 @@ document.getElementById('shareBtn').addEventListener('click', async function (ev
             });
             showNotification('Installation URL shared successfully. Do not share this URL with unknown persons.', 'success');
         } catch (error) {
-            showNotification('Sharing was cancelled or not supported.', 'error');
+            displayFallbackUrl(installationUrl);
+            showNotification('Unable to use Share API. URL is ready to be copied manually.', 'warning');
         }
     }
 });
@@ -366,14 +376,13 @@ document.getElementById('copyBtn').addEventListener('click', async function (eve
             await navigator.clipboard.writeText(installationUrl);
             showNotification('Installation URL copied to clipboard. Do not share this URL with unknown persons.', 'success');
         } catch (error) {
-            console.error('Failed to copy:', error);
-            showNotification('Failed to copy the installation URL to the clipboard.', 'error');
+            displayFallbackUrl(installationUrl);
+            showNotification('Unable to access clipboard. URL is ready to be copied manually.', 'warning');
         }
     }
 });
 
 
-
 // ---- Initial Setup ----
 
 document.addEventListener('DOMContentLoaded', function () {
@@ -389,7 +398,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     if (navigator.share) {
         document.getElementById('shareBtn').style.display = 'block';
-    } else if (navigator.clipboard) {
+    } else {
         document.getElementById('copyBtn').style.display = 'block';
     }
 });