Dark mode

2022-04-12 21:35:11 +02:00
parent 94f9dbd84a
commit 1edc90103b
11 changed files with 630 additions and 1993 deletions
--- a/database.sqlite
+++ b/database.sqlite
--- a/index.js
+++ b/index.js
@@ -2,13 +2,12 @@ const express = require("express");
 const Eta = require("eta");
 const fs = require("fs");
 const request = require("request");
-const requestSync = require("sync-request");
 var Config = require('config-js');
 const app = express();
 const PrismaClient = require('@prisma/client').PrismaClient;
 const nameToImdb = require("name-to-imdb");
 const imdbHelper = require("./node_modules/name-to-imdb/helpers");
-const imdb = require("imdb");
+const imdbLight = require("imdb-light");
 const port = 4000;
 const eanConvAdress = "http://127.0.0.1:9999/"

@@ -25,6 +24,7 @@ var config = new Config('key.cfg');


 app.use(express.static("static"));
+app.use(express.static("node_modules"));

 app.get("/", async function handleIndex(req, res) {
  // https://imdb-api.com/de/API/Posters//[ID HERE]
@@ -80,32 +80,35 @@ app.get("/returnSaveResult", function (req, res) {
  );
 });

+/********
+* test endpoint
+*/
+
+app.get("/test", function (req, res) {
+  const respo = imdbLight.fetch(req.query.id, (details) => {
+    console.log(details)
+    res.send(details)
+  })
+});
+
+
 app.get("/showDetails", async function (req, res) {
  const data = fs.readFileSync("template/movieDetails.html", "utf8");
-  console.log(req.query["id"])
  const movie = await prisma.movieInfo.findFirst({
    where: {
      movieID: req.query["id"]
    }
  })
-  nameToImdb({name: imdbHelper.parseSearchTerm(movie.movieTitel)},  function handleImdbResp(err, imdbID, imdbData) {
-    if (err) {
-      console.log(err.stack);
-    }
-    if(imdbData.isCached != true) {
-      imdbBuffer[imdbID] = imdbData;
-    } else {
-      imdbData = imdbBuffer[imdbID];
-    }
-    console.log(imdbData, movie.movieID, imdbID);
+  imdbLight.fetch(req.query.id, function handleImdbResp(details) {
+    console.log(details);
    res.send(
      Eta.render(data, {
        internalID: movie.id,
        id: movie.movieID,
        cover: movie.posterUrl,
-        titleByAPI: movie.movieTitel,
+        titleByAPI: details.Title,
        type: typeIndex[movie.type],
-        extendedData: imdbData.meta
+        extendedData: details
      })
    )
  })
@@ -160,23 +163,17 @@ app.get("/apiCallBack", function (req, res) {
        } else {
          var searchTerm = response.body;
          searchTerm = searchTerm.replace("/", " ")
-          var reqString =
-            "https://imdb-api.com/en/API/SearchTitle/" + config.get('keys.imdb') + "/" +
-            searchTerm;
-          request(reqString, function (error, response2, body) {
-            jsonBody = JSON.parse(response2.body);
          
-            console.log(jsonBody.length);
-            if (jsonBody.errorMessage.includes("Maximum usage")) {
-              res.send({ state: "ERR_IMDB_LIMIT_REACHED" });
-            } else {
+          imdbLight.fetch(imdbID, function handleLightReponse(details) {
+
+            console.log(details);
              jsonBody = jsonBody.results[0];
              timest = new Date().valueOf();
              responseJson = {
                state: "OK",
                id: jsonBody.id,
-                coverImage: jsonBody.image,
-                titleByAPI: response.body,
+                coverImage: details.Poster,
+                titleByAPI: details.Title,
                ean: req.query["ean"],
                reponseID: req.query["ean"],
              };
@@ -188,7 +185,7 @@ app.get("/apiCallBack", function (req, res) {
                console.error(err);
              }
              res.send(responseJson);
-            }
+            
          });
        }
      }
@@ -204,29 +201,26 @@ app.get("/apiCallBack", function (req, res) {

 app.get("/apiCallBackTitle", function (req, res) {
  //console.log(req.query);
-  nameToImdb({name: imdbHelper.parseSearchTerm(req.query.title)},  function handleImdbResp(err, imdbID, imdbData) {
+  nameToImdb({ name: imdbHelper.parseSearchTerm(req.query.title) }, function handleImdbResp(err, imdbID, imdbData) {
    if (err) {
      res.send({ state: "ERR_BACK_FAIL" });
      console.log(err.stack);
    }
-    if(imdbData.isCached != true) {
-      imdbBuffer[imdbID] = imdbData;
-    } else {
-      imdbData = imdbBuffer[imdbID];
-    }
+    imdbLight.fetch(imdbID, function handleLightReponse(details) {
      const randId = Math.floor(Math.random() * 100000) + "NO_EAN";
-    
      responseJson = {
        state: "OK",
        id: imdbID,
-      coverImage: imdbData.meta.image.src,
-      titleByAPI: imdbData.meta.name,
+        coverImage: details.Poster,
+        titleByAPI: details.Title,
        ean: String(randId),
        reponseID: String(randId),
      };
      responseBuffer[randId] = responseJson;
      res.send(responseJson);
    })
+  })
+
 });


--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "openmoviedb",
-  "version": "1.0.0",
+  "version": "1.0.5",
  "description": "An openmoviedb where you can save which movies you own.",
  "main": "index.js",
  "scripts": {
@@ -15,22 +15,21 @@
    "imdb"
  ],
  "author": "TheGreydiamond",
-  "license": "ISC",
+  "license": "",
  "dependencies": {
    "config-js": "^1.1.14",
+    "darkreader": "^4.9.46",
    "eta": "^1.12.1",
    "express": "^4.17.1",
    "form-data": "^4.0.0",
-    "imdb": "^1.1.0",
    "imdb-api": "^4.4.1",
+    "imdb-light": "^1.1.5",
    "name-to-imdb": "^3.0.2",
    "node-fetch": "^2.6.1",
    "node-html-parser": "^3.1.2",
    "prisma": "^3.12.0",
    "quagga": "^0.12.1",
-    "request": "^2.88.2",
-    "sqlite3": "^5.0.2",
-    "sync-request": "^6.1.0"
+    "request": "^2.88.2"
  },
  "devDependencies": {
    "@prisma/client": "^3.12.0",
--- a/template/add.html
+++ b/template/add.html
@@ -24,6 +24,75 @@
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/skeleton.css" />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
+  <script src="/darkreader/darkreader.js">    </script>
+  <style>
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: 60px;
+      height: 34px;
+    }
+    
+    .switch input { 
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 26px;
+      width: 26px;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    input:checked + .slider {
+      background-color: #2196F3;
+    }
+    
+    input:focus + .slider {
+      box-shadow: 0 0 1px #2196F3;
+    }
+    
+    input:checked + .slider:before {
+      -webkit-transform: translateX(26px);
+      -ms-transform: translateX(26px);
+      transform: translateX(26px);
+    }
+    
+    /* Rounded sliders */
+    .slider.round {
+      border-radius: 34px;
+    }
+    
+    .slider.round:before {
+      border-radius: 50%;
+    }
+
+    iconContainer {
+      padding: 4px;
+      font-size: 1.5em;
+    }
+    </style>
    <style>
        
        /* In order to place the tracking correctly */
@@ -97,7 +166,16 @@
    </div>
 </div>
    <!-- Include the image-diff library -->
-
+    <script>
+        DarkReader.auto()
+        $("#darkToggle").on("change", function(test){
+          if(test.currentTarget.checked){
+            DarkReader.enable()
+          } else {
+            DarkReader.disable()
+          }
+        })
+      </script>
    <script>

        var coll = document.getElementsByClassName("collapsible");
--- a/template/addByTitle.html
+++ b/template/addByTitle.html
@@ -61,12 +61,76 @@

    </style>

-    <!-- Favicon
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link rel="icon" type="image/png" href="images/favicon.png" />
-    <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
    <script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
+  <script src="/darkreader/darkreader.js">    </script>
+  <style>
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: 60px;
+      height: 34px;
+    }
+    
+    .switch input { 
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 26px;
+      width: 26px;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    input:checked + .slider {
+      background-color: #2196F3;
+    }
+    
+    input:focus + .slider {
+      box-shadow: 0 0 1px #2196F3;
+    }
+    
+    input:checked + .slider:before {
+      -webkit-transform: translateX(26px);
+      -ms-transform: translateX(26px);
+      transform: translateX(26px);
+    }
+    
+    /* Rounded sliders */
+    .slider.round {
+      border-radius: 34px;
+    }
+    
+    .slider.round:before {
+      border-radius: 50%;
+    }
+
+    iconContainer {
+      padding: 4px;
+      font-size: 1.5em;
+    }
+    </style>
  </head>
  <body>

@@ -92,7 +156,16 @@
    </div>
 </div>
    <!-- Include the image-diff library -->
-
+    <script>
+      DarkReader.auto()
+      $("#darkToggle").on("change", function(test){
+        if(test.currentTarget.checked){
+          DarkReader.enable()
+        } else {
+          DarkReader.disable()
+        }
+      })
+    </script>
    <script>

        var coll = document.getElementsByClassName("collapsible");
--- a/template/addToShelf.html
+++ b/template/addToShelf.html
@@ -66,9 +66,76 @@
    <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="icon" type="image/png" href="images/favicon.png" />
-    <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
    <script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
+    <script src="/darkreader/darkreader.js">    </script>
+    <style>
+      .switch {
+        position: relative;
+        display: inline-block;
+        width: 60px;
+        height: 34px;
+      }
+      
+      .switch input { 
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+      
+      .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #ccc;
+        -webkit-transition: .4s;
+        transition: .4s;
+      }
+      
+      .slider:before {
+        position: absolute;
+        content: "";
+        height: 26px;
+        width: 26px;
+        left: 4px;
+        bottom: 4px;
+        background-color: white;
+        -webkit-transition: .4s;
+        transition: .4s;
+      }
+      
+      input:checked + .slider {
+        background-color: #2196F3;
+      }
+      
+      input:focus + .slider {
+        box-shadow: 0 0 1px #2196F3;
+      }
+      
+      input:checked + .slider:before {
+        -webkit-transform: translateX(26px);
+        -ms-transform: translateX(26px);
+        transform: translateX(26px);
+      }
+      
+      /* Rounded sliders */
+      .slider.round {
+        border-radius: 34px;
+      }
+      
+      .slider.round:before {
+        border-radius: 50%;
+      }
+  
+      iconContainer {
+        padding: 4px;
+        font-size: 1.5em;
+      }
+      </style>
  </head>
  <body>

@@ -108,7 +175,16 @@
    </div>
 </div>
    <!-- Include the image-diff library -->
-
+    <script>
+      DarkReader.auto()
+      $("#darkToggle").on("change", function(test){
+        if(test.currentTarget.checked){
+          DarkReader.enable()
+        } else {
+          DarkReader.disable()
+        }
+      })
+    </script>
    <script>
        function on() {
          document.getElementById("overlay").style.display = "block";
--- a/template/bookshelf.html
+++ b/template/bookshelf.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8" />
@@ -14,11 +15,8 @@

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link
-      href="//fonts.googleapis.com/css?family=Raleway:400,300,600"
-      rel="stylesheet"
-      type="text/css"
-    />
+  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css" />
+  

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
@@ -28,12 +26,79 @@
  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png" />
-    <script
-      src="https://kit.fontawesome.com/d7b80a780b.js"
-      crossorigin="anonymous"
-    ></script>
-  </head>
-  <body>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
+  <script src="/darkreader/darkreader.js">    </script>
+  <style>
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: 60px;
+      height: 34px;
+    }
+    
+    .switch input { 
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 26px;
+      width: 26px;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    input:checked + .slider {
+      background-color: #2196F3;
+    }
+    
+    input:focus + .slider {
+      box-shadow: 0 0 1px #2196F3;
+    }
+    
+    input:checked + .slider:before {
+      -webkit-transform: translateX(26px);
+      -ms-transform: translateX(26px);
+      transform: translateX(26px);
+    }
+    
+    /* Rounded sliders */
+    .slider.round {
+      border-radius: 34px;
+    }
+    
+    .slider.round:before {
+      border-radius: 50%;
+    }
+
+    iconContainer {
+      padding: 4px;
+      font-size: 1.5em;
+    }
+    </style>
+</head>
+
+<body>
+
  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <div class="container">
@@ -41,33 +106,51 @@

      <div class="eleven column" style="margin-top: 15%">
        <h4>OpenMovieDB - Bookshelf</h4>
+        
+        
        <div style="float: right; top: -20px;">
            <input class="u-full-width" type="text" placeholder="Search" id="search">
        </div>
-          <button
-            class="button-primary"
-            onclick="window.location.href = '/add'"
-          >
-            <i class="fas fa-plus"></i> Add new movie</button
-          ><br />
+        
+        
+      
+
+        <button class="button-primary" onclick="window.location.href = '/add'">
+          <i class="fas fa-plus"></i> Add new movie</button>
+          <label class="switch" style="">
+            <input type="checkbox" checked id="darkToggle">
+            <span class="slider round"><iconContainer> <i class="fas fa-sun"></i> <i class="fas fa-moon"></i></iconContainer></span>
+          </label><br />
+
        <div id="listOfMovies" class=""></div>
+
      </div>

    </div>
  </div>
+  <script>
+    DarkReader.auto()
+    $("#darkToggle").on("change", function(test){
+      if(test.currentTarget.checked){
+        DarkReader.enable()
+      } else {
+        DarkReader.disable()
+      }
+    })
+  </script>
    <script>
    ser = document.getElementById("search");
    ser.addEventListener("input", updateValue);
-      json = <%~ it.jsonRespo %>;
+    json = <% ~it.jsonRespo %>;
    function updateValue(e) {
      console.log(e.target.value)
      outList = [];
      i = 0;
      elem = document.getElementById("listOfMovies");
      elem.innerHTML = ""
-        while(i < json.length){
+      while (i < json.length) {
        currenElm = json[i]
-          if(currenElm.movieTitel.toLowerCase().replace("(", "").replace(")", "").includes(e.target.value.toLowerCase())){
+        if (currenElm.movieTitel.toLowerCase().replace("(", "").replace(")", "").includes(e.target.value.toLowerCase())) {
          console.log(currenElm.movieID)
          elem.innerHTML += "<a style='width: 150px; float: left; padding: 4px; height: 309 ,jmnpx;' href='/showDetails?id=" + currenElm.movieID + "'><div ><img src='" + currenElm.posterUrl + '\' style="width: 100%;"><br><center><b>' + currenElm.movieTitel + "</b></center></div></a>"
        }
@@ -77,7 +160,7 @@
    }
    i = 0;
    elem = document.getElementById("listOfMovies")
-      while(i < json.length){
+    while (i < json.length) {
      currenElm = json[i]
      elem.innerHTML += "<a style='width: 150px; float: left; padding: 4px; height: 309px;' href='/showDetails?id=" + currenElm.movieID + "'><div ><img src='" + currenElm.posterUrl + '\' style="width: 100%;"><br><center><b>' + currenElm.movieTitel + "</b></center></div></a>"
      i++;
@@ -86,5 +169,6 @@
  </script>
  <!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  </body>
+</body>
+
 </html>
--- a/template/editDetails.html
+++ b/template/editDetails.html
@@ -64,12 +64,75 @@
        }
        </style>

-    <!-- Favicon
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link rel="icon" type="image/png" href="images/favicon.png" />
-    <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
-    <script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+        <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
+        <script src="/darkreader/darkreader.js">    </script>
+        <style>
+          .switch {
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 34px;
+          }
+          
+          .switch input { 
+            opacity: 0;
+            width: 0;
+            height: 0;
+          }
+          
+          .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            -webkit-transition: .4s;
+            transition: .4s;
+          }
+          
+          .slider:before {
+            position: absolute;
+            content: "";
+            height: 26px;
+            width: 26px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            -webkit-transition: .4s;
+            transition: .4s;
+          }
+          
+          input:checked + .slider {
+            background-color: #2196F3;
+          }
+          
+          input:focus + .slider {
+            box-shadow: 0 0 1px #2196F3;
+          }
+          
+          input:checked + .slider:before {
+            -webkit-transform: translateX(26px);
+            -ms-transform: translateX(26px);
+            transform: translateX(26px);
+          }
+          
+          /* Rounded sliders */
+          .slider.round {
+            border-radius: 34px;
+          }
+          
+          .slider.round:before {
+            border-radius: 50%;
+          }
+      
+          iconContainer {
+            padding: 4px;
+            font-size: 1.5em;
+          }
+          </style>
  </head>
  <body>

@@ -98,6 +161,17 @@
            </div>
    </div>
 </div>
+
+<script>
+  DarkReader.auto()
+  $("#darkToggle").on("change", function(test){
+    if(test.currentTarget.checked){
+      DarkReader.enable()
+    } else {
+      DarkReader.disable()
+    }
+  })
+</script>
    <script>

      function on() {
--- a/template/index.html
+++ b/template/index.html
@@ -5,6 +5,7 @@
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="/darkreader/darkreader.js">    </script>
    <style>
        /* In order to place the tracking correctly */
        canvas.drawing, canvas.drawingBuffer {
@@ -26,7 +27,16 @@
    <button onclick="sendEanConvRequest()"> Search</button>

    <!-- Include the image-diff library -->
-
+    <script>
+        DarkReader.auto()
+        $("#darkToggle").on("change", function(test){
+          if(test.currentTarget.checked){
+            DarkReader.enable()
+          } else {
+            DarkReader.disable()
+          }
+        })
+      </script>
    <script>
        var _scannerIsRunning = false;

--- a/template/movieDetails.html
+++ b/template/movieDetails.html
@@ -189,9 +189,27 @@
                Details
              </summary><br>
              <p>
-                Year: <%= it.extendedData.year %>
+                Year: <%= it.extendedData.Year %>
                <br>
-                  Starring: <%= it.extendedData.starring %>
+                  Director: <%= it.extendedData.Director %>
+                  <br>
+                  Starring: <%= it.extendedData.Actors %>
+                  <br>
+                  Writers: <%= it.extendedData.Writers %>
+                  <br>
+                  Release: <%= it.extendedData.Release %>
+                  <br>
+                  Rating: <%= it.extendedData.Rating %>
+                  <br>
+                  <details>
+                    <summary>
+                      Plot
+                    </summary>
+                    <p>
+                      <%~ it.extendedData.Plot %>
+                    </p>
+                  </details>
+                  
              </p>
            </details>
            <br>
@@ -206,6 +224,17 @@
        </div>
      </div>
    </div>
+
+    <script>
+      DarkReader.auto()
+      $("#darkToggle").on("change", function(test){
+        if(test.currentTarget.checked){
+          DarkReader.enable()
+        } else {
+          DarkReader.disable()
+        }
+      })
+    </script>
    <script>

      function on() {