diff --git a/index.html b/index.html index e69de29..dc52b46 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,141 @@ + + + + + + SyncGroove + + + +
+

SyncGroove

+
+ +
+
+ + +
+ +
+
+ + + + + diff --git a/main.js b/main.js index e69de29..40c71a2 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,59 @@ +const { app, BrowserWindow, ipcMain, shell } = require('electron'); +const axios = require('axios'); + +let mainWindow; + +function createWindow() { + mainWindow = new BrowserWindow({ + width: 700, + height: 700, + webPreferences: { + nodeIntegration: true, + contextIsolation: false, + } + }); + + mainWindow.loadFile('index.html'); + mainWindow.removeMenu(); +} + +app.whenReady().then(createWindow); + +app.on('window-all-closed', () => { + if (process.platform !== 'darwin') { + app.quit(); + } +}); + +app.on('activate', () => { + if (BrowserWindow.getAllWindows().length === 0) { + createWindow(); + } +}); + +function extractVideoId(url) { + const regex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/; + const match = url.match(regex); + return match ? match[1] : null; +} + +ipcMain.on('getVideoInfo', async (event, url) => { + const videoId = extractVideoId(url); + + if (videoId) { + try { + const response = await axios.get(`http://node1.mindwired.com.br:8452/api/wrapper/v1/youtube-video?id=${videoId}`); + event.reply('videoInfo', response.data); + } catch (error) { + console.error(`Error fetching video information: ${error.message}`); + event.reply('videoInfo', { error: `Error fetching video information: ${error.message}` }); + } + } else { + console.error('Invalid video URL'); + event.reply('videoInfo', { error: 'Invalid video URL' }); + } +}); + +ipcMain.on('openExternalLink', (event, link) => { + shell.openExternal(link); +}); diff --git a/styles.css b/styles.css index e69de29..72d37f9 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,94 @@ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #fff; + color: #333; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + overflow: hidden; +} + +.header { + width: 100%; + text-align: center; + padding: 20px 0; + background-color: #7289da; + color: #fff; + border-top-left-radius: 10px; + border-top-right-radius: 10px; +} + +.container { + width: 80%; + max-width: 400px; + text-align: left; + margin: auto; + border-radius: 10px; + overflow: hidden; + background-color: #fff; +} + +.input-container { + margin-bottom: 10px; + text-align: center; +} + +.input-container input, +.input-container button { + margin-bottom: 10px; + padding: 10px; + font-size: 16px; + border-radius: 5px; +} + +.input-container button { + background-color: #7289da; + color: #fff; + border: none; + cursor: pointer; + transition: background-color 0.3s; + border-radius: 5px; +} + +.input-container button:hover { + background-color: #677bc4; +} + +.result-container { + white-space: pre-wrap; + max-height: 400px; + overflow-y: auto; + padding: 10px; + border-radius: 5px; +} + +.category { + font-size: 18px; + font-weight: bold; + margin-top: 15px; + cursor: pointer; + background-color: #7289da; + color: #fff; + padding: 5px 10px; + border-bottom: 1px solid #fff; +} + +.section { + list-style-type: none; + padding: 0; + background-color: #f2f2f2; + padding: 10px; + border-bottom: 1px solid #ddd; + display: none; +} + +.section li { + margin-top: 5px; +} + +.collapsed { + display: none; +}