Dev

README.md

@@ -87,6 +87,31 @@ TMDB Player is a browser extension designed to enhance your movie and TV show ex
 
 ---
 
+## Tips and Tricks
+
+Here are some handy tips and tricks to enhance your experience with the extension:
+
+### 1. Quick Access to TMDB Website  
+- The extension popup includes a button to quickly open the TMDB website for easy navigation.  
+
+### 2. Control How Streaming Pages Open  
+- By default, the streaming webpage opens in a new tab. If you prefer it to open in the same tab as the TMDB page, simply switch off the "Open movie/tv show in new tab" toggle button in the extension popup.  
+
+### 3. Choose Your Default Streaming Server  
+- Customize your experience by selecting your preferred default server in the extension popup. This ensures your streaming webpage always opens with your chosen server.  
+
+### 4. Android: App-Like Experience  
+- For a more seamless, app-like experience on Android, add the TMDB homepage to your device’s home screen. This allows quick access without opening a browser.  
+
+### 5. Edge: Install TMDB as an App  
+- On Microsoft Edge, you can install TMDB as a standalone app for a more immersive experience. Here’s how:  
+  1. Go to the [TMDB website](https://www.themoviedb.org/).  
+  2. Click on the three dots (settings) in the top-right corner.  
+  3. Select **Apps** and then click **Install The Movie Database**.  
+- **Important:** Don’t forget to switch off the "Open movie/tv show in new tab" toggle button in the extension popup to ensure the streaming page opens in the app.  
+
+---
+
 ## Recommendations
 
 - **Ad Blocker:** While some servers are ad-free and others feature minimal ads, it is highly recommended to use an ad blocker for a smoother and uninterrupted streaming experience. For the best results, consider using **uBlock Origin**.

src/assets/content/movie.js

@@ -28,8 +28,17 @@
             `;
 
             // Add event listener to open the new link
-            customButton.onclick = function() {
-                window.open(`https://tmdbplayer.nunesnetwork.com/?type=movie&id=${movieid}`, '_blank');
+            customButton.onclick = async function() { // Make the function async
+                // Get Saved preferences
+                const preferences = await savedPreferences();
+
+                const url = `https://tmdbplayer.nunesnetwork.com/?type=movie&id=${movieid}&server=${preferences.selectedServerNumber}`;
+
+                if (preferences.isToggleActive) {
+                    window.open(url, '_blank'); // Opens in a new tab
+                } else {
+                    window.location.href = url; // Opens in the same tab
+                }
             };
 
             // Insert custom play Button

src/assets/content/tv.js

@@ -30,8 +30,17 @@
             `;
 
             // Add event listener to open the new link
-            customButton.onclick = function() {
-                window.open(`https://tmdbplayer.nunesnetwork.com/?type=tv&id=${tvid}&s=${seasonSelect.value}&e=${episodeSelect.value}`, '_blank');
+            customButton.onclick = async function() { // Make the function async
+                // Get Saved preferences
+                const preferences = await savedPreferences();
+
+                const url = `https://tmdbplayer.nunesnetwork.com/?type=tv&id=${tvid}&s=${seasonSelect.value}&e=${episodeSelect.value}&server=${preferences.selectedServerNumber}`;
+
+                if (preferences.isToggleActive) {
+                    window.open(url, '_blank'); // Opens in a new tab
+                } else {
+                    window.location.href = url; // Opens in the same tab
+                }
             };
 
             // Insert custom play Button

src/assets/content/utils.js

@@ -53,4 +53,15 @@ function isMobile() {
     const isMobileUserAgent = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Windows Phone|Mobile|Tablet|Kindle|Silk|PlayBook|KaiOS|Tizen|SMART-TV|Xbox/i.test(navigator.userAgent);
     const isSmallScreen = window.innerWidth <= 768;
     return isMobileUserAgent || isSmallScreen;
+}
+
+// Function to Retireve saved preference from popup
+function savedPreferences() {
+    return new Promise((resolve) => {
+        chrome.storage.sync.get(['isToggleActive', 'selectedServerNumber'], (data) => {
+            const isToggleActive = data.isToggleActive !== undefined ? data.isToggleActive : true;
+            const selectedServerNumber = data.selectedServerNumber || '1';
+            resolve({ isToggleActive, selectedServerNumber });
+        });
+    });
 }

src/assets/popup/popup.html

@@ -1,13 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>TMDB Extension</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TMDB Player</title>
+
+    <!-- Include Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+    <!-- Link to the external CSS file -->
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <h3>TMDB Extension</h3>
-    <button id="goToTmdb">Open TMDB</button>
-
+    <div class="header">
+        TMDB Player
+    </div>
+    <div class="row">
+        <span>Open movie/tv show in new tab</span>
+        <label class="toggle">
+            <input type="checkbox">
+            <span class="slider"></span>
+        </label>
+    </div>
+    <div class="row">
+        <span>Default server</span>
+        <select class="server-selection" id="server-select">
+            <option server-number="1">Rakan</option>
+            <option server-number="2">Bard</option>
+            <option server-number="3">Xayah</option>
+            <option server-number="4">Ekko</option>
+            <option server-number="5">Naafiri</option>
+            <option server-number="6">Ryze</option>
+        </select>
+    </div>
+    <div class="row center-row">
+        <button class="tmdb-button" id="tmdb-button">Open TMDB Website</button>
+    </div>
+    <div class="row center-row">
+        <div class="button-group">
+            <button class="git-button" id="git-button">
+                <i class="fab fa-github"></i> GitHub
+            </button>
+            <button class="bug-button" id="bug-button">Report Bug</button>
+        </div>
+    </div>
+
     <script src="popup.js"></script>
 </body>
-</html>
+</html>

src/assets/popup/popup.js

@@ -1,5 +1,54 @@
-document.addEventListener("DOMContentLoaded", () => {
-    document.getElementById('goToTmdb').addEventListener('click', () => {
-        chrome.tabs.create({ url: 'https://www.themoviedb.org/' });
+// popup.js
+
+// Get references to DOM elements
+const toggleButton = document.querySelector('.toggle input');
+const serverSelect = document.getElementById('server-select');
+const tmdbButton = document.getElementById('tmdb-button');
+const gitButton = document.getElementById('git-button');
+const bugButton = document.getElementById('bug-button');
+
+// Load saved preferences when the popup is opened
+document.addEventListener('DOMContentLoaded', () => {
+    chrome.storage.sync.get(['isToggleActive', 'selectedServerNumber'], (data) => {
+        // Set the toggle button state
+        toggleButton.checked = data.isToggleActive !== undefined ? data.isToggleActive : true; // Default to true
+
+        // Set the selected server based on the saved server number
+        if (data.selectedServerNumber) {
+            const optionToSelect = Array.from(serverSelect.options).find(
+                (option) => option.getAttribute('server-number') === data.selectedServerNumber
+            );
+            if (optionToSelect) {
+                serverSelect.value = optionToSelect.value;
+            }
+        }
     });
 });
+
+// Save toggle button state when changed
+toggleButton.addEventListener('change', () => {
+    const isToggleActive = toggleButton.checked;
+    chrome.storage.sync.set({ isToggleActive });
+});
+
+// Save selected server number when changed
+serverSelect.addEventListener('change', () => {
+    const selectedOption = serverSelect.options[serverSelect.selectedIndex];
+    const selectedServerNumber = selectedOption.getAttribute('server-number');
+    chrome.storage.sync.set({ selectedServerNumber });
+});
+
+// Open TMDB Website
+tmdbButton.addEventListener('click', () => {
+    window.open('https://www.themoviedb.org/', '_blank');
+});
+
+// Open GitHub Repository
+gitButton.addEventListener('click', () => {
+    window.open('https://github.com/TomasTNunes/TMDB-Player/tree/master?tab=readme-ov-file#tmdb-player', '_blank');
+});
+
+// Open Bug Report Page
+bugButton.addEventListener('click', () => {
+    window.open('https://github.com/TomasTNunes/TMDB-Player/issues', '_blank');
+});

src/assets/popup/styles.css

@@ -1,42 +1,160 @@
-/* General Body Styles */
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Ubuntu', 'El Messiri', sans-serif;
     margin: 0;
-    padding: 20px; /* Added padding for spacing */
-    background-color: #2e3a47; /* TMDB dark background */
-    color: #ffffff; /* White text */
-    width: 250px; /* Set width of popup */
+    padding: 0;
+    width: 350px;
+    background-color: #f9f9f9;
+    color: #333;
+}
+
+.header {
+    background: linear-gradient(to right, #90cea1, #01b4e4);
+    font-family: 'Ubuntu', 'El Messiri', sans-serif;
+    color: white;
+    padding: 15px;
     text-align: center;
-    border-radius: 10px; /* Rounded corners */
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Shadow for depth */
+    font-size: 22px;
+    font-weight: bold;
+}
+
+.row {
+    padding: 15px 30px;
+    font-size: 15px;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    width: 100%; /* Ensure row takes full width */
+    box-sizing: border-box; /* Include padding in width calculation */
+}
+
+.row:last-child {
+    border-bottom: none;
+}
+
+.row span {
+    max-width: 60%;
+    word-wrap: break-word;
+}
+
+.toggle {
+    position: relative;
+    display: inline-block;
+    width: 48px;
+    height: 24px;
+    box-sizing: border-box;
+}
+
+.toggle 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;
+    border-radius: 24px;
+    box-sizing: border-box;
+    min-width: 48px;
 }
 
-/* Header Styles */
-h3 {
-    font-size: 20px;
-    color: #00b5e2; /* TMDB blue */
-    margin-top: 20px;
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
 }
 
-/* Button Styles */
-button {
-    padding: 12px 20px;
-    background-color: #00b5e2; /* TMDB blue */
+input:checked + .slider {
+    background-color: #4CAF50;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(24px);
+    -ms-transform: translateX(24px);
+    transform: translateX(24px);
+}
+
+.server-selection {
+    padding: 8px 12px;
+    background-color: transparent;
+    border: 1px solid #0d253f;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: 'Ubuntu', 'El Messiri', sans-serif;
+    font-size: 14px;
+    height: 36px;
+}
+
+.center-row {
+    display: flex;
+    justify-content: center;
+    align-items: center; /* Center vertically */
+    width: 100%; /* Ensure it takes full width of parent */
+    max-width: 100%; /* Constrain to parent width */
+    gap: 10px;
+    box-sizing: border-box; /* Include padding in width calculation */
+}
+
+.tmdb-button {
+    padding: 10px;
+    background-color: #0d253f;
     color: white;
+    font-family: 'Ubuntu', 'El Messiri', sans-serif;
+    font-size: 15px;
     border: none;
-    border-radius: 5px;
+    border-radius: 18px;
     cursor: pointer;
-    font-size: 16px;
-    font-weight: bold;
-    transition: background-color 0.3s ease;
-    width: 100%; /* Full width */
-    margin-top: 20px;
+    width: 65%; /* Make button take full width of its container */
+    max-width: 250px; /* Limit maximum width */
+    box-sizing: border-box; /* Include padding in width calculation */
+}
+
+.button-group {
+    display: flex;
+    gap: 10px;
+    justify-content: center; /* Center buttons horizontally */
+    width: 100%;
+    box-sizing: border-box; /* Include padding in width calculation */
 }
 
-button:hover {
-    background-color: #0288d1; /* Darker blue for hover */
+.git-button,
+.bug-button {
+    padding: 10px;
+    background-color: #0d253f;
+    color: white;
+    font-family: 'Ubuntu', 'El Messiri', sans-serif;
+    font-size: 15px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px; /* Space between icon and text */
+    width: 140px; /* Fixed width for both buttons */
+    box-sizing: border-box; /* Include padding in width calculation */
 }
 
-button:active {
-    background-color: #0277bd; /* Even darker blue when pressed */
+.git-button i {
+    font-size: 18px; /* Adjust icon size */
 }
+
+.bug-button::before {
+    content: "🐛"; /* Bug emoji */
+}