Merge pull request #272 from NymexData/development

New version - v.1.1.1
nymexhub · Aug 2, 2023 · 4e1b081 · 4e1b081
2 parents 24f1da3 + fff33ff
commit 4e1b081
Show file tree

Hide file tree

Showing 19 changed files with 177 additions and 46 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/extension/Theatherflix_v1.1.0.zip b/extension/Theatherflix_v1.1.0.zip
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/logo_rect.png → images/logo_icon_rect.png b/images/logo_rect.png → images/logo_icon_rect.png
diff --git a/images/screenshots/.DS_Store b/images/screenshots/.DS_Store
diff --git a/extension/.DS_Store → images/screenshots/v.1.1.0/.DS_Store b/extension/.DS_Store → images/screenshots/v.1.1.0/.DS_Store
diff --git a/images/screenshots/sshot_bottom.png → images/screenshots/v.1.1.0/sshot_bottom.png b/images/screenshots/sshot_bottom.png → images/screenshots/v.1.1.0/sshot_bottom.png
diff --git a/images/screenshots/sshot_top.png → images/screenshots/v.1.1.0/sshot_top.png b/images/screenshots/sshot_top.png → images/screenshots/v.1.1.0/sshot_top.png
diff --git a/images/small_sshots/.DS_Store → images/small_sshots_1.1.0/.DS_Store b/images/small_sshots/.DS_Store → images/small_sshots_1.1.0/.DS_Store
diff --git a/images/small_sshots/sshot_bottom_small.png → ...small_sshots_1.1.0/sshot_bottom_small.png b/images/small_sshots/sshot_bottom_small.png → ...small_sshots_1.1.0/sshot_bottom_small.png
diff --git a/images/small_sshots/sshot_top_small.png → ...es/small_sshots_1.1.0/sshot_top_small.png b/images/small_sshots/sshot_top_small.png → ...es/small_sshots_1.1.0/sshot_top_small.png
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Theaterflix Extension",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Extension to display personalized recommendations for movies and series.",
   "action": {
     "default_popup": "popup/index.html"

diff --git a/options/options.js b/options/options.js
@@ -2,7 +2,6 @@
 const saveBtn = document.getElementById('saveBtn');
 const apiKeyInput = document.getElementById('apiKey');
 
-// Save the entered API key to local storage when the "Save" button is clicked
 saveBtn.addEventListener('click', () => {
   const apiKey = apiKeyInput.value;
   if (apiKey) {

diff --git a/popup/index.html b/popup/index.html
@@ -8,47 +8,56 @@
   <link rel="stylesheet" href="../styles/popup.css">
 </head>
 <body>
-  <h1>Personalized Recommendations</h1>
+  <div class="header">
+    <img src="../images/logo.png" alt="Theaterflix Logo" width="170" height="35">
+    <h1>Theaterflix Extension</h1>
+    <p>Explore a world of personalized movie and TV show recommendations! Our extension harnesses TMDb's vast database to deliver tailored content, enhancing your entertainment journey with seamless suggestions!</p>
+  </div>
+
   <div id="recommendations-list">
     <!-- Recommendations will be displayed here -->
   </div>
+
+  <button id="load-more-button" class="button">Load More</button>
+
   <div class="accordion-header">Configure API Key</div>
   <div id="config-section" class="active">
     <label for="api-key">Enter your TMDb API Key:</label>
     <input type="text" id="api-key" placeholder="Type your API Key here">
     <button id="save-button">Save</button>
     <p id="status-message"></p>
+    <a href="#" id="refresh-button" class="button">Refresh</a>
   </div>
 
-
-  <script src="../scripts/jquery-3.6.0.min.js"></script>
-  <script src="../scripts/axios.min.js"></script>
-
-
-  <script src="../scripts/api.js"></script>
-
-
-  <script src="../popup/popup.js"></script>
-
-
   <div class="developer-info">
-    Developed by <a href="mailto:f.alfonso@res-ear.ch">Felipe Alfonso Gonzalez</a>, Computer Science Engineer
+    <br>
+    Developed by <a href="https://github.com/felipealfonsog" target="_blank">Felipe Alfonso Gonzalez</a>, Computer Science Engineer
     <br>
     in collaboration with other members of Nymex Data Research.
     <br>
     This project is licensed under the MIT License.
     <br>
     <a href="https://github.com/felipealfonsog" target="_blank" rel="noopener">
       <img src="https://img.shields.io/badge/GitHub-Felipe%20Alfonso-blue.svg" alt="GitHub Felipe Alfonso">
-    </a>
-    &nbsp;|&nbsp;
-    <a href="https://github.com/NymexData" target="_blank" rel="noopener">
+    </a> <a href="https://github.com/NymexData" target="_blank" rel="noopener">
       <img src="https://img.shields.io/badge/GitHub-Nymex%20Data-blue.svg" alt="GitHub Nymex Data">
-    </a>
-    &nbsp;|&nbsp;
-    <a href="https://github.com/NymexData/Theatherflix" target="_blank" rel="noopener">
+    </a> <a href="https://github.com/NymexData/Theatherflix" target="_blank" rel="noopener">
       <img src="https://img.shields.io/badge/GitHub-Repository-blue.svg" alt="GitHub Repository">
     </a>
+    <br>
+
+    <div class="api-key-info">
+      <a href="https://www.themoviedb.org/" target="_blank" rel="noopener">
+        <img src="https://img.shields.io/badge/TMDb-Get%20API%20Key-red.svg?logo=themoviedatabase" alt="TMDb API Key">
+      </a>
+      <p>Get your API Key <a href="https://www.themoviedb.org/" target="_blank">here</a>! Sign up on TMDb to get your free API key for accessing movie data.</p>
+    </div>
+
   </div>
+
+  <script src="../scripts/jquery-3.6.0.min.js"></script>
+  <script src="../scripts/axios.min.js"></script>
+  <script src="../scripts/api.js"></script>
+  <script src="../popup/popup.js"></script>
 </body>
 </html>
diff --git a/popup/popup.js b/popup/popup.js
@@ -1,5 +1,3 @@
-// popup/popup.js
-
 document.addEventListener('DOMContentLoaded', () => {
   const configButton = document.querySelector('.accordion-header');
   const configSection = document.getElementById('config-section');
@@ -8,20 +6,119 @@ document.addEventListener('DOMContentLoaded', () => {
     configSection.classList.toggle('active');
   });
 
-
   const saveButton = document.getElementById('save-button');
   const apiKeyInput = document.getElementById('api-key');
   const statusMessage = document.getElementById('status-message');
 
   saveButton.addEventListener('click', () => {
     const apiKey = apiKeyInput.value;
     if (apiKey) {
-
       localStorage.setItem('tmdb_api_key', apiKey);
-
       statusMessage.textContent = 'API Key saved successfully!';
     } else {
       statusMessage.textContent = 'Please enter a valid API Key.';
     }
   });
+
+  const refreshButton = document.getElementById('refresh-button');
+  refreshButton.addEventListener('click', () => {
+    const apiKey = localStorage.getItem('tmdb_api_key');
+    if (apiKey) {
+      fetchMovieRecommendations(apiKey)
+        .then((recommendations) => renderMovieRecommendations(recommendations))
+        .catch((error) => console.error('Error fetching movie recommendations:', error));
+    } else {
+      statusMessage.textContent = 'Please enter your API Key first.';
+    }
+  });
+
+  const loadMoreButton = document.getElementById('load-more-button');
+  let page = 1;
+  const recommendationsPerPage = 5;
+
+  loadMoreButton.addEventListener('click', () => {
+    const apiKey = localStorage.getItem('tmdb_api_key');
+    if (apiKey) {
+      fetchMoreMovieRecommendations(apiKey, page)
+        .then((additionalRecommendations) => {
+          if (additionalRecommendations.length > 0) {
+            renderMovieRecommendations(additionalRecommendations, true);
+            page += 1;
+          } else {
+            statusMessage.textContent = 'No more recommendations to load.';
+            loadMoreButton.style.display = 'none';
+          }
+        })
+        .catch((error) => console.error('Error fetching more movie recommendations:', error));
+    } else {
+      statusMessage.textContent = 'Please enter your API Key first.';
+    }
+  });
+
+  // Function to fetch movie recommendations
+  async function fetchMovieRecommendations(apiKey) {
+    try {
+      const response = await axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}`);
+      return response.data.results.slice(0, recommendationsPerPage);
+    } catch (error) {
+      console.error('Error fetching movie recommendations:', error);
+      return [];
+    }
+  }
+
+  // Function to fetch more movie recommendations
+  async function fetchMoreMovieRecommendations(apiKey, page) {
+    try {
+      const response = await axios.get(
+        `https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}&page=${page + 1}`
+      );
+      return response.data.results.slice(0, recommendationsPerPage);
+    } catch (error) {
+      console.error('Error fetching more movie recommendations:', error);
+      return [];
+    }
+  }
+
+  // Function to render movie recommendations
+  function renderMovieRecommendations(recommendations, append = false) {
+    const recommendationsList = document.getElementById('recommendations-list');
+
+    if (!append) {
+      recommendationsList.innerHTML = '';
+    }
+
+    recommendations.forEach((movie) => {
+      const movieBox = document.createElement('div');
+      movieBox.className = 'movie-box';
+
+      const moviePoster = document.createElement('img');
+      moviePoster.className = 'movie-poster';
+      moviePoster.src = `https://image.tmdb.org/t/p/w185${movie.poster_path}`;
+      movieBox.appendChild(moviePoster);
+
+      const movieInfo = document.createElement('div');
+      movieInfo.className = 'movie-info';
+
+      const movieTitle = document.createElement('h2');
+      movieTitle.textContent = movie.title;
+      movieInfo.appendChild(movieTitle);
+
+      const movieOverview = document.createElement('p');
+      movieOverview.textContent = movie.overview;
+      movieInfo.appendChild(movieOverview);
+
+      movieBox.appendChild(movieInfo);
+      recommendationsList.appendChild(movieBox);
+    });
+  }
+
+  // Initial load of movie recommendations
+  const apiKey = localStorage.getItem('tmdb_api_key');
+  if (apiKey) {
+    fetchMovieRecommendations(apiKey)
+      .then((recommendations) => renderMovieRecommendations(recommendations))
+      .catch((error) => console.error('Error fetching movie recommendations:', error));
+  } else {
+    statusMessage.textContent = 'Please enter your API Key first.';
+  }
 });
diff --git a/scripts/api.js b/scripts/api.js
@@ -1,8 +1,8 @@
 // api.js
 
-async function fetchMovieRecommendations(apiKey) {
+async function fetchMovieRecommendations(apiKey, page = 1) {
   try {
-    const response = await axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}`);
+    const response = await axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}&page=${page}`);
     return response.data.results;
   } catch (error) {
     console.error('Error fetching movie recommendations:', error);
@@ -40,10 +40,8 @@ function renderMovieRecommendations(recommendations) {
   });
 }
 
-
 const apiKey = localStorage.getItem('tmdb_api_key');
 
-
 if (apiKey) {
   fetchMovieRecommendations(apiKey)
     .then((recommendations) => renderMovieRecommendations(recommendations))

diff --git a/scripts/content.js b/scripts/content.js
@@ -10,13 +10,11 @@ function insertExtensionUI() {
     }
   }
 
-
   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message === "showExtensionUI") {
       insertExtensionUI();
     }
   });
 
-
   chrome.runtime.sendMessage("contentScriptReady");
 
diff --git a/styles/popup.css b/styles/popup.css
@@ -1,34 +1,29 @@
 /* styles/popup.css */
-/* popup.css */
+
 body {
   width: 600px; 
   margin: 20px auto; 
   padding: 20px;
 }
-
 #recommendations-list {
   list-style: none;
   padding: 0;
 }
-
 .movie-box {
   border: 1px solid #ccc;
   padding: 10px;
   margin-bottom: 10px;
   display: flex;
 }
-
 .movie-poster {
   width: 100px;
   height: 150px;
   object-fit: cover;
   margin-right: 10px;
 }
-
 .movie-info {
   flex: 1;
 }
-
 #config-section {
   display: none;
   border: 1px solid #ccc;
@@ -38,3 +33,19 @@ body {
 #config-section.active {
   display: block;
 }
+#status-message {
+  color: blue;
+}
+#status-message-error {
+  color: blue;
+}
+.api-key-info {
+  text-align: center;
+  margin-top: 20px;
+}
+.api-key-info img {
+  vertical-align: middle;
+}
+.api-key-info p {
+  margin-top: 5px;
+}
diff --git a/styles/styles.css b/styles/styles.css
@@ -3,18 +3,15 @@ body {
   font-family: Arial, sans-serif;
   text-align: center;
 }
-
 h1 {
   margin-bottom: 20px;
 }
-
 .accordion {
   margin-top: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   overflow: hidden;
 }
-
 .accordion-btn {
   background-color: #f1f1f1;
   color: #333;
@@ -25,28 +22,50 @@ h1 {
   border: none;
   outline: none;
 }
-
 .accordion-content {
   display: none;
   padding: 10px;
 }
-
-
 .accordion.active .accordion-content {
   display: block;
 }
-
 .accordion-header {
   cursor: pointer;
   padding: 15px;
   background-color: #f1f1f1;
   border: 1px solid #ccc;
   border-radius: 5px;
 }
-
 .accordion-content {
   display: none;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
 }
+#refresh-button {
+  padding: 8px 16px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+#refresh-button:hover {
+  background-color: #0056b3;
+}
+.button {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 10px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+.button:hover {
+  background-color: #45a049;
+}