Dark theme and bug fix

arvida42 · Mar 1, 2024 · a445d40 · a445d40
1 parent 7e5330c
commit a445d40
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# jackettio
+# Jackettio
 
 Selfhosted Stremio addon that resolve streams using Jackett and Debrid. It seamlessly integrates with private trackers.
 
@@ -106,7 +106,7 @@ docker run --env-file .env -v ./data:/data -e DATA_FOLDER=/data --name jackettio
 
 ## Configuration
 
-jackettio is designed for selfhosted, whether for personal or public use. As a server owner, effortlessly configure many settings with environement variables.
+Jackettio is designed for selfhosted, whether for personal or public use. As a server owner, effortlessly configure many settings with environement variables.
 
 - **Addon ID** `ADDON_ID` Change the `id` field in stremio manifest
 - **Default user settings:** `DEFAULT_*` All default settings available for user configuration on the /configure page are fully customizable

diff --git a/cli.sh b/cli.sh
@@ -266,7 +266,7 @@ case "$INSTALL_TYPE" in
         echo " - Your addon is available on the following address: https://${ACME_DOMAIN}/configure"
         ;;
     "2")
-        echo "Wait for jackettio ..."
+        echo "Wait for Jackettio ..."
         sleep 4
         runDockerCompose logs -n 30 jackettio
         ;;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jackettio",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Jackett and Debrid on Stremio",
   "main": "src/index.js",
   "type": "module",

diff --git a/src/index.js b/src/index.js
@@ -11,7 +11,7 @@ import * as jackettio from "./lib/jackettio.js";
 import {cleanTorrentFolder, createTorrentFolder} from './lib/torrentInfos.js';
 
 const converter = new showdown.Converter();
-const welcomeMessageHtml = config.welcomeMessage ? converter.makeHtml(config.welcomeMessage) : '';
+const welcomeMessageHtml = config.welcomeMessage ? `${converter.makeHtml(config.welcomeMessage)}<div class="my-4 border-top border-secondary-subtle"></div>` : '';
 const addon = JSON.parse(readFileSync(`./package.json`));
 const app = express();
 
@@ -45,18 +45,23 @@ app.get('/', (req, res) => {
 });
 
 app.get('/:userConfig?/configure', async(req, res) => {
-  let template = readFileSync(`./src/template/configure.html`).toString();
+  let indexers = (await getIndexers().catch(() => []))
+    .map(indexer => ({
+      value: indexer.id, 
+      label: indexer.title, 
+      types: ['movie', 'series'].filter(type => indexer.searching[type].available)
+    }));
   const templateConfig = {
     debrids: await debrid.list(),
     addon: {
       version: addon.version,
-      name: addon.name
+      name: addon.name.charAt(0).toUpperCase() + addon.name.slice(1)
     },
     userConfig: req.params.userConfig || '',
     defaultUserConfig: config.defaultUserConfig,
     qualities: config.qualities,
     sorts: config.sorts,
-    indexers: (await getIndexers()).map(indexer => ({value: indexer.id, label: indexer.title, types: ['movie', 'series'].filter(type => indexer.searching[type].available)})),
+    indexers,
     passkey: {required: false},
     immulatableUserConfigKeys: config.immulatableUserConfigKeys
   };
@@ -67,7 +72,10 @@ app.get('/:userConfig?/configure', async(req, res) => {
       pattern: config.replacePasskeyPattern
     }
   }
-  return res.send(template.replace('/** import-config */', `const config = ${JSON.stringify(templateConfig, null, 2)}`).replace('<!-- welcome-message -->', welcomeMessageHtml));
+  let template = readFileSync(`./src/template/configure.html`).toString()
+    .replace('/** import-config */', `const config = ${JSON.stringify(templateConfig, null, 2)}`)
+    .replace('<!-- welcome-message -->', welcomeMessageHtml);
+  return res.send(template);
 });
 
 // https://github.com/Stremio/stremio-addon-sdk/blob/master/docs/advanced.md#using-user-data-in-addons

diff --git a/src/template/configure.html b/src/template/configure.html
@@ -1,30 +1,27 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>jackettio</title>
+    <title>Jackettio</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <style>
-      #app {
-        background-color: #ffffff;
-        opacity: 1;
-        background-image:  radial-gradient(#b3b3b3 0.7000000000000001px, transparent 0.7000000000000001px), radial-gradient(#b3b3b3 0.7000000000000001px, #ffffff 0.7000000000000001px);
-        background-size: 28px 28px;
-        background-position: 0 0,14px 14px;
-      }
       .container {
         max-width: 600px;
       }
+      [v-cloak] { display: none; }
     </style>
   </head>
   <body id="app">
-    <div class="container my-5">
+    <div class="container my-5" v-cloak>
       <h1 class="mb-4">{{addon.name}} <span style="font-size:.6em">v{{addon.version}}</span></h1>
-      <form class="shadow p-3 bg-white z-3 rounded">
+      <form class="shadow p-3 bg-dark-subtle z-3 rounded">
         <!-- welcome-message -->
         <h5>Indexers</h5>
-        <div class="ps-2 border-start">
+        <div class="ps-2 border-start border-secondary-subtle">
+          <div class="mb-3 alert alert-warning" v-if="indexers.length == 0">
+            No indexers available, Jackett instance does not seem to be configured correctly.
+          </div>
           <div class="mb-3" v-if="indexers.length > 1 && !immulatableUserConfigKeys.includes('indexers')">
             <label>Indexers enabled:</label>
             <div class="d-flex">
@@ -41,7 +38,7 @@ <h5>Indexers</h5>
           </div>
         </div>
         <h5>Filters & Sorts</h5>
-        <div class="ps-2 border-start">
+        <div class="ps-2 border-start border-secondary-subtle">
           <div class="mb-3" v-if="!immulatableUserConfigKeys.includes('qualities')">
             <label>Qualities:</label>
             <div class="d-flex">
@@ -80,7 +77,7 @@ <h5>Filters & Sorts</h5>
           </div>
         </div>
         <h5>Debrid</h5>
-        <div class="ps-2 border-start">
+        <div class="ps-2 border-start border-secondary-subtle">
           <div class="mb-3 d-flex flex-row" v-if="!immulatableUserConfigKeys.includes('forceCacheNextEpisode')">
             <input class="form-check-input me-1" type="checkbox" v-model="form.forceCacheNextEpisode" id="forceCacheNextEpisode">
             <label for="forceCacheNextEpisode" class="d-flex flex-column">