deploy: b38494d

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**.
@@ -119,3 +144,7 @@ If you have any questions, encounter issues, or have suggestions for improvement
 ![Streaming Servers](assets/screenshots/player_movie.png)
 
 ![Streaming Servers](assets/screenshots/player_show.png)
+
+### Popup:
+
+![Popup](assets/screenshots/popup.png)

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');
+});