feat: Complete redesign of media

55gms · Jul 11, 2024 · 57b9412 · 57b9412
1 parent b4a0e15
commit 57b9412
Show file tree

Hide file tree

Showing 5 changed files with 476 additions and 85 deletions.
diff --git a/static/assets/css/media.css b/static/assets/css/media.css
@@ -1,3 +1,7 @@
+body {
+  text-align: center;
+}
+
 .container {
   display: flex;
   flex-direction: column;
@@ -26,20 +30,6 @@
   background-color: #f57c00;
 }
 
-.search-bar {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 20px;
-}
-
-.search-bar input {
-  padding: 10px;
-  margin: 0 5px;
-  border: none;
-  border-radius: 5px;
-  font-size: 16px;
-}
-
 .hidden {
   display: none;
 }
@@ -64,6 +54,8 @@
   border-radius: 5px;
   background: #7a8fab;
   text-align: center;
+  width: 50%;
+  padding: 1vw;
   font-size: 24px;
   border: none;
   outline: none;
@@ -79,3 +71,81 @@
   text-align: center;
   opacity: 0.8;
 }
+
+img {
+  height: auto;
+  max-height: 218px;
+  width: 145px;
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+  vertical-align: middle;
+  border-radius: 25px;
+  max-width: 145px;
+}
+img.ad {
+  height: auto;
+  max-height: none;
+  width: auto;
+  border: none;
+  -ms-interpolation-mode: auto;
+  vertical-align: baseline;
+  border-radius: 0px;
+  max-width: none;
+}
+
+.icon {
+  border-radius: 25px;
+}
+
+.card {
+  transition: 0.1s;
+  width: 158px;
+  background-color: transparent;
+  margin: 16px;
+  float: left;
+}
+.card:hover {
+  color: rgb(164, 176, 176);
+  scale: 1.2;
+  transition: 0.2s;
+}
+
+.image-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.image-container:hover .item-name {
+  opacity: 1;
+}
+
+.item-name {
+  font-family: "Inter", Arial, sans-serif;
+  position: absolute;
+  bottom: 0;
+  left: 7.49px;
+  width: 78.5%;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 5px 10px;
+  margin: 0px;
+  opacity: 0;
+  transition: opacity 0.2s;
+  border-bottom-left-radius: 500px;
+  border-bottom-right-radius: 500px;
+  font-size: 12px;
+}
+.attribution {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 5px;
+  border-radius: 5px;
+  font-size: 12px;
+  z-index: 1000;
+}
+.attribution img {
+  margin-left: 5px;
+}
diff --git a/static/assets/js/media.js b/static/assets/js/media.js
@@ -1,59 +1,67 @@
-document.addEventListener("DOMContentLoaded", function () {
-  document
-    .getElementById("moviePlayerBtn")
-    .addEventListener("click", function () {
-      document.getElementById("seriesPlayerBtn").classList.remove("active");
-      this.classList.add("active");
-      updateLink();
-    });
+function fetchTmdbId() {
+  let search = document.getElementById("searchbar").value;
+  let link;
+  let poster;
+  let encodedSearch = encodeURIComponent(search);
+  let url =
+    "https://api.themoviedb.org/3/search/multi?api_key=66ca93aa37686b7a47476585271855c6&language=en-US&query=" +
+    encodedSearch +
+    "&page=1&include_adult=false";
+  const gameContainer = document.getElementById("game-container");
+  gameContainer.innerHTML = "";
 
-  document
-    .getElementById("seriesPlayerBtn")
-    .addEventListener("click", function () {
-      document.getElementById("moviePlayerBtn").classList.remove("active");
-      this.classList.add("active");
-      updateLink();
-    });
+  try {
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => {
+        const results = data.results;
+        results.forEach(function (movie) {
+          if (movie.poster_path === null) {
+            poster = "/img/no-media.svg";
+          } else {
+            poster = "https://image.tmdb.org/t/p/w500/" + movie.poster_path;
+          }
+          if (movie.media_type === "tv") {
+            link = "https://vidsrc.to/embed/tv/";
+          } else if (movie.media_type === "movie") {
+            link = "https://vidsrc.to/embed/movie/";
+          }
 
-  imdbTmdbValue = "";
-  ssNumberValue = "";
-  epNumberValue = "";
-  document.getElementById("imdbTmdb").addEventListener("input", function () {
-    imdbTmdbValue = this.value;
-    updateLink();
-  });
+          let gameHtml = `<div class="card" style="padding-top: 5px">
+          <a onclick="hire('${link}${movie.id}');"> 
+            <div class="image-container">
+              <img loading="eager" src="${poster}" style="border-radius: 25px">
+              <p class="item-name">${movie.name || movie.title}</p> 
+            </div>
+          </a>
+        </div>`;
+          gameContainer.insertAdjacentHTML("beforeend", gameHtml);
+        });
+      });
+  } catch (error) {
+    text.innerHTML = `Error in fetching data<br>${error}`;
+    console.error(error);
+  }
+}
 
-  document.getElementById("ssNumber").addEventListener("input", function () {
-    ssNumberValue = this.value;
-    updateLink();
-  });
+document.addEventListener("DOMContentLoaded", function () {
+  let cooldown = false;
 
-  document.getElementById("epNumber").addEventListener("input", function () {
-    epNumberValue = this.value;
-    updateLink();
-  });
-  function updateLink() {
-    let link = "";
-    if (
-      document.getElementById("moviePlayerBtn").classList.contains("active")
-    ) {
-      if (imdbTmdbValue.includes("tt")) {
-        link = "https://vidsrc.to/embed/movie/" + imdbTmdbValue;
-      } else {
-        link = "https://vidsrc.to/embed/movie/tt" + imdbTmdbValue;
-      }
-    } else if (
-      document.getElementById("seriesPlayerBtn").classList.contains("active")
-    ) {
-      if (imdbTmdbValue.includes("tt")) {
-        link = "https://vidsrc.to/embed/tv/" + imdbTmdbValue;
-      } else {
-        link = "https://vidsrc.to/embed/tv/tt" + imdbTmdbValue;
+  document
+    .getElementById("searchbar")
+    .addEventListener("keypress", function (e) {
+      if (e.key === "Enter") {
+        if (cooldown) {
+          document.getElementById("cooldownNotice").style.display = "block";
+        } else {
+          fetchTmdbId();
+          document.getElementById("cooldownNotice").style.display = "none";
+          cooldown = true;
+          setTimeout(function () {
+            cooldown = false;
+            document.getElementById("cooldownNotice").style.display = "none";
+          }, 3000);
+        }
       }
-    }
-    console.log(link);
-    document.getElementById("go").onclick = function () {
-      hire(link);
-    };
-  }
+    });
 });