Added web search temporarily

MediaHarbor · Oct 26, 2024 · f9c4b1c · f9c4b1c
1 parent ba1c4d1
commit f9c4b1c
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 3 deletions.
diff --git a/app.js b/app.js
@@ -71,7 +71,8 @@ const pages = {
     video: 'video.html',
     downloads: 'downloads.html',
     settings: 'settings.html',
-    help: 'help.html'
+    help: 'help.html',
+    search: 'web_search.html'
 };
 
 
@@ -129,6 +130,50 @@ async function clearDownloadsDatabase() {
     }
 }
 
+// URL mappings for each service's search
+const searchUrls = {
+    youtube: "https://music.youtube.com/search?q=",
+    spotify: "https://open.spotify.com/search/",
+    qobuz: "https://www.qobuz.com/gb-en/search?q=",
+    tidal: "https://listen.tidal.com/search?q=",
+    deezer: "https://www.deezer.com/us/search/",
+    appleMusic: "https://music.apple.com/search?term="
+};
+
+// Set default tab
+let activeTab = "youtube";
+
+// Function to update the active tab
+function updateActiveTab(tab) {
+    document.querySelector('.tab-button.active').classList.remove('active');
+    document.querySelector(`button[data-tab="${tab}"]`).classList.add('active');
+    activeTab = tab;
+}
+
+// Add event listeners to each tab button
+function initializeSearchPage() {
+    document.querySelectorAll('.tab-button').forEach(button => {
+        button.addEventListener('click', () => {
+            updateActiveTab(button.getAttribute('data-tab'));
+        });
+    });
+}
+
+// Function to perform the search
+function performSearch() {
+    const query = document.getElementById('searchInput').value;
+    console.log('Renderer: Attempting search with:', { query, activeTab });
+    if (query) {
+        try {
+            window.electronAPI.performSearch({ query, activeTab });
+            console.log('Renderer: Search request sent to main process');
+        } catch (error) {
+            console.error('Renderer: Error sending search:', error);
+        }
+    }
+}
+
+
 async function loadPage(pageName) {
     const contentDiv = document.getElementById('content');
     try {
@@ -152,6 +197,9 @@ async function loadPage(pageName) {
         else if (pageName === 'downloads') {
             await initializeDownloadStatusPage();
         }
+        else if (pageName === 'search') {
+            await initializeSearchPage()
+        }
     } catch (error) {
         contentDiv.innerHTML = '<p>Error loading the page: ' + error.message + '</p>';
     }
@@ -1313,6 +1361,7 @@ window.electronAPI.receive('download-complete', (data) => {
 document.getElementById('musicBtn').addEventListener('click', () => loadPage('music'));
 document.getElementById('videoBtn').addEventListener('click', () => loadPage('video'));
 document.getElementById('downloadsBtn').addEventListener('click', () => loadPage('downloads'));
+document.getElementById('searchBtn').addEventListener('click', () => loadPage('search'));
 document.getElementById('settingsBtn').addEventListener('click', () => loadPage('settings'));
 document.getElementById('helpBtn').addEventListener('click', () => loadPage('help'));
 

diff --git a/help.html b/help.html
@@ -37,7 +37,7 @@ <h3>Streamrip downloads (Qobuz, Deezer, Tidal) get stuck, what to do?</h3>
         <h2 class="helph2"><i class="fas fa-search"></i> Search FAQ</h2>
         <div class="faq-content">
             <h3>What is this?</h3>
-            <p>A search function using API requests is in progress. Meanwhile, use your service’s search page.</p>
+            <p>A search function using API requests is in progress. Meanwhile, use your service’s search page on our app.</p>
         </div>
     </section>
     <section id="sponsor-help">

diff --git a/index.html b/index.html
@@ -16,6 +16,7 @@ <h1>MediaHarbor</h1>
         <a href="#" id="musicBtn" class="active"><i class="fas fa-music"></i>Music</a>
         <a href="#" id="videoBtn"><i class="fas fa-film"></i>Video</a>
         <a href="#" id="downloadsBtn"><i class="fas fa-download"></i>Downloads</a>
+        <a href="#" id="searchBtn"><i class="fa-solid fa-magnifying-glass"></i>Search</a>
     </div>
     <div class="secondary-nav">
         <a href="#" id="settingsBtn"><i class="fas fa-cogs"></i>Settings</a>

diff --git a/main.js b/main.js
@@ -10,6 +10,15 @@ const GamRip = require('./funcs/gamRip');
 const CustomRip = require('./funcs/customRip');
 const { setupSettingsHandlers } = require('./funcs/settings');
 
+const searchUrls = {
+    youtube: "https://music.youtube.com/search?q=",
+    spotify: "https://open.spotify.com/search/",
+    qobuz: "https://www.qobuz.com/gb-en/search?q=",
+    tidal: "https://listen.tidal.com/search?q=",
+    deezer: "https://www.deezer.com/us/search/",
+    appleMusic: "https://music.apple.com/search?term="
+};
+
 ipcMain.handle('load-downloads', (event) => {
     return new Promise((resolve, reject) => {
         loadDownloadsFromDatabase((rows) => {
@@ -204,6 +213,31 @@ function createWindow() {
     ipcMain.on('start-deezer-batch-download', (event, data) => {
         customRip.handleDeezerBatchDownload(event, data);
     });
+    ipcMain.on('search-on-browser', (event, searchData) => {
+        console.log('Main: Received search data:', searchData);
+        const { query, activeTab } = searchData;
+
+        if (!query) {
+            console.error('Main: No query provided');
+            return;
+        }
+
+        if (!searchUrls[activeTab]) {
+            console.error('Main: Invalid activeTab:', activeTab);
+            return;
+        }
+
+        const searchUrl = searchUrls[activeTab] + encodeURIComponent(query);
+        console.log('Main: Opening URL:', searchUrl);
+
+        shell.openExternal(searchUrl)
+            .then(() => {
+                console.log('Main: Browser opened successfully');
+            })
+            .catch(err => {
+                console.error('Main: Failed to open external browser:', err);
+            });
+    });
 }
 
 app.whenReady().then(createWindow);
@@ -218,4 +252,5 @@ app.on('activate', () => {
     if (BrowserWindow.getAllWindows().length === 0) {
         createWindow();
     }
-});
+});
+
diff --git a/preload.js b/preload.js
@@ -48,4 +48,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
     folderLocation: () => ipcRenderer.invoke('dialog:openFolder'),
     fileSelectLocation: () => ipcRenderer.invoke('dialog:openFile'),
     openWvdLocation: () => ipcRenderer.invoke('dialog:openwvdFile'),
+    performSearch: (searchData) => {
+        console.log('Preload: Sending search data:', searchData);
+        return ipcRenderer.send('search-on-browser', searchData);
+    }
 });
diff --git a/web_search.html b/web_search.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web Search</title>
+    <style>
+        #searchInputContainer {
+            display: flex;
+            padding: 10px;
+            background-color: #f4f4f4;
+        }
+        #searchInput {
+            flex: 1;
+            padding: 8px;
+            font-size: 1em;
+        }
+        iframe {
+            flex-grow: 1;
+            width: 100%;
+            border: none;
+        }
+    </style>
+</head>
+<body>
+<!-- Tab Bar -->
+<div class="tab-bar">
+    <button class="tab-button active" data-tab="youtube">YouTube</button>
+    <button class="tab-button" data-tab="spotify">Spotify</button>
+    <button class="tab-button" data-tab="qobuz">Qobuz</button>
+    <button class="tab-button" data-tab="tidal">Tidal</button>
+    <button class="tab-button" data-tab="deezer">Deezer</button>
+    <button class="tab-button" data-tab="appleMusic">Apple Music</button>
+</div>
+
+<!-- Search Input -->
+<div id="searchInputContainer">
+    <input type="text" id="searchInput" placeholder="Enter search query...">
+    <button onclick="performSearch()">Search</button>
+</div>
+
+<!-- Iframe for displaying search results -->
+<iframe id="searchFrame"></iframe>
+
+</body>
+</html>