diff --git a/extension/.DS_Store b/extension/.DS_Store index 5008ddf..c6d8850 100644 Binary files a/extension/.DS_Store and b/extension/.DS_Store differ diff --git a/extension/Theatherflix.zip b/extension/Theatherflix.zip deleted file mode 100644 index 7077d40..0000000 Binary files a/extension/Theatherflix.zip and /dev/null differ diff --git a/extension/Theatherflix_v1.1.0.zip b/extension/Theatherflix_v1.1.0.zip new file mode 100644 index 0000000..28abd21 Binary files /dev/null and b/extension/Theatherflix_v1.1.0.zip differ diff --git a/images/.DS_Store b/images/.DS_Store index 73db529..1a60a26 100644 Binary files a/images/.DS_Store and b/images/.DS_Store differ diff --git a/images/128x128_icon_logotflx.png b/images/128x128_icon_logotflx.png new file mode 100644 index 0000000..94a5d2e Binary files /dev/null and b/images/128x128_icon_logotflx.png differ diff --git a/images/logo_rect.png b/images/logo_rect.png new file mode 100644 index 0000000..0d78a3b Binary files /dev/null and b/images/logo_rect.png differ diff --git a/images/screenshots/.DS_Store b/images/screenshots/.DS_Store new file mode 100644 index 0000000..da02d79 Binary files /dev/null and b/images/screenshots/.DS_Store differ diff --git a/images/screenshots/sshot_bottom.png b/images/screenshots/sshot_bottom.png new file mode 100644 index 0000000..cec55b2 Binary files /dev/null and b/images/screenshots/sshot_bottom.png differ diff --git a/images/screenshots/sshot_top.png b/images/screenshots/sshot_top.png new file mode 100644 index 0000000..db6841e Binary files /dev/null and b/images/screenshots/sshot_top.png differ diff --git a/manifest.json b/manifest.json index b5116c8..d4e4fa7 100644 --- a/manifest.json +++ b/manifest.json @@ -1,18 +1,12 @@ { "manifest_version": 3, "name": "Theaterflix Extension", - "version": "1.0", + "version": "1.1.0", "description": "Extension to display personalized recommendations for movies and series.", "action": { - "default_popup": "popup/index.html" + "default_popup": "popup/index.html" }, "icons": { "48": "assets/icon.png" - }, - "content_scripts": [ - { - "matches": [""], - "js": ["scripts/content.js"] - } - ] + } } diff --git a/popup/index.html b/popup/index.html index 627a1c3..7c287f1 100644 --- a/popup/index.html +++ b/popup/index.html @@ -4,27 +4,51 @@ Theaterflix Extension - + +

Personalized Recommendations

-
- - +
Configure API Key
+
+ + + +

- - + + + - - + + + + + + +
+ Developed by Felipe Alfonso Gonzalez, Computer Science Engineer +
+ in collaboration with other members of Nymex Data Research. +
+ This project is licensed under the MIT License. +
+ + GitHub Felipe Alfonso + +  |  + + GitHub Nymex Data + +  |  + + GitHub Repository + +
diff --git a/popup/popup.js b/popup/popup.js index 0914775..d919d99 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -1,22 +1,28 @@ -// popup.js +// popup/popup.js -$(document).ready(function() { - // Add accordion behavior using jQuery - $('.accordion-header').click(function() { - $('.accordion-content').slideToggle(); +// Add a click event listener to toggle the configuration section +document.addEventListener('DOMContentLoaded', () => { + const configButton = document.querySelector('.accordion-header'); + const configSection = document.getElementById('config-section'); + + configButton.addEventListener('click', () => { + configSection.classList.toggle('active'); }); // Add a click event listener to save the API key - $('#save-button').click(function() { - const apiKey = $('#api-key').val(); + 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) { - // Save the API key to local storage or wherever you need to store it - // For simplicity, let's store it in local storage + // Save the API key to local storage localStorage.setItem('tmdb_api_key', apiKey); - // Optionally, you can display a success message to the user - alert('API Key saved successfully!'); + // Display a success message to the user + statusMessage.textContent = 'API Key saved successfully!'; } else { - alert('Please enter a valid API Key.'); + statusMessage.textContent = 'Please enter a valid API Key.'; } }); }); diff --git a/scripts/api.js b/scripts/api.js index 7ee8d6b..c37c109 100755 --- a/scripts/api.js +++ b/scripts/api.js @@ -1,58 +1,53 @@ -// scripts/api.js -const recommendationsContainer = document.getElementById('recommendations'); +// api.js -// Function to fetch recommendations from the TMDB API using the user's API key -async function fetchRecommendations(apiKey) { +// Function to fetch movie recommendations using the provided API key +async function fetchMovieRecommendations(apiKey) { try { - // Fetch recommendations data from the TMDB API using the user's API key - const response = await axios.get('https://api.themoviedb.org/3/discover/movie', { - params: { - api_key: apiKey, - language: 'en-US', - sort_by: 'popularity.desc', - include_adult: false, - include_video: false, - page: 1, - }, - }); - - const recommendationsData = response.data.results; - // Process the data and display recommendations in the popup - displayRecommendations(recommendationsData); + const response = await axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}`); + return response.data.results; } catch (error) { - console.error('Error fetching recommendations:', error); + console.error('Error fetching movie recommendations:', error); + return []; } } -// Function to display the recommendations in the popup -function displayRecommendations(recommendationsData) { - recommendationsContainer.innerHTML = ''; - - recommendationsData.forEach((recommendation) => { - const { title, poster_path, vote_average } = recommendation; - const poster = `https://image.tmdb.org/t/p/w200${poster_path}`; - const rating = vote_average.toFixed(1); - - const recommendationElement = document.createElement('div'); - recommendationElement.classList.add('recommendation'); - recommendationElement.innerHTML = ` - ${title} -

${title}

-

Rating: ${rating}/10

-
- `; - - recommendationsContainer.appendChild(recommendationElement); +// Function to render movie recommendations in the popup +function renderMovieRecommendations(recommendations) { + const recommendationsList = document.getElementById('recommendations-list'); + + recommendationsList.innerHTML = ''; // Clear previous recommendations + + 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); }); } -// Fetch the user's API key from local storage -chrome.storage.local.get(['apiKey'], (result) => { - const apiKey = result.apiKey; - if (apiKey) { - fetchRecommendations(apiKey); - } else { - // Display a message to prompt the user to enter their API key - console.log('Please enter your API key.'); - } -}); +// Check if the API key is already saved in local storage +const apiKey = localStorage.getItem('tmdb_api_key'); + +// If the API key is already saved, fetch and render movie recommendations +if (apiKey) { + fetchMovieRecommendations(apiKey) + .then((recommendations) => renderMovieRecommendations(recommendations)) + .catch((error) => console.error('Error fetching movie recommendations:', error)); +} diff --git a/styles/popup.css b/styles/popup.css new file mode 100644 index 0000000..d1a07f8 --- /dev/null +++ b/styles/popup.css @@ -0,0 +1,42 @@ +/* styles/popup.css */ +/* popup.css */ +body { + width: 600px; /* Set the width of the popup */ + margin: 20px auto; /* Center the popup horizontally */ + 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; +} + + +/* CSS styles for the configuration section */ +#config-section { + display: none; + border: 1px solid #ccc; + padding: 10px; + margin-bottom: 10px; +} +#config-section.active { + display: block; +} diff --git a/styles/styles.css b/styles/styles.css index 0914195..944948c 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -36,3 +36,20 @@ h1 { .accordion.active .accordion-content { display: block; } + + +/* Add CSS for the accordion */ +.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; +}