diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..7a7e810
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+ SyncGroove
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/main.js b/docs/main.js
new file mode 100644
index 0000000..d580c6d
--- /dev/null
+++ b/docs/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: 600,
+ 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/docs/mainRenderer.js b/docs/mainRenderer.js
new file mode 100644
index 0000000..add2883
--- /dev/null
+++ b/docs/mainRenderer.js
@@ -0,0 +1,114 @@
+const { ipcRenderer, shell } = require('electron');
+
+document.addEventListener('DOMContentLoaded', () => {
+ toggleSection('GeneralInformation');
+});
+
+function getVideoInfo() {
+ const urlInput = document.getElementById('urlInput').value;
+ ipcRenderer.send('getVideoInfo', urlInput);
+}
+
+ipcRenderer.on('videoInfo', (event, result) => {
+ document.getElementById('result').innerHTML = formatResult(result);
+});
+
+ipcRenderer.on('openExternalLink', (event, link) => {
+ shell.openExternal(link);
+});
+
+function formatResult(result) {
+ if (result.error) {
+ return `Error: ${result.error}
`;
+ }
+
+ let formattedResult = 'General Information
';
+ formattedResult += '';
+
+ if (result.output.data.media.video && result.output.data.media.video.length > 0) {
+ formattedResult += 'Video Direct URLs
';
+ formattedResult += '';
+
+ result.output.data.media.video.sort((a, b) => compareQualities(a.quality, b.quality)).reverse().forEach((video) => {
+ const videoInfo = `${video.quality} - ${video.bitrate} kbps - ${video.codec} - ${formatBytes(video.size)}`;
+ formattedResult += `- ${videoInfo}
`;
+ });
+
+ formattedResult += '
';
+ }
+
+ if (result.output.data.media.audio && result.output.data.media.audio.length > 0) {
+ formattedResult += 'Audio Direct URLs
';
+ formattedResult += '';
+
+ result.output.data.media.audio.sort((a, b) => b.bitrate - a.bitrate).forEach((audio) => {
+ const audioInfo = `${audio.bitrate} kbps - ${audio.codec} - ${formatBytes(audio.size)}`;
+ formattedResult += `- ${audioInfo}
`;
+ });
+
+ formattedResult += '
';
+ }
+
+ if (result.output.data.media.subtitles && result.output.data.media.subtitles.length > 0) {
+ formattedResult += 'Subtitle Direct URLs
';
+ formattedResult += '';
+
+ result.output.data.media.subtitles.sort((a, b) => a.lang.localeCompare(b.lang)).forEach((subtitle) => {
+ const subtitleInfo = `${subtitle.lang} - ${subtitle.ext}`;
+ formattedResult += `- ${subtitleInfo}
`;
+ });
+
+ formattedResult += '
';
+ }
+
+ return formattedResult;
+}
+
+function formatBytes(bytes) {
+ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+ if (bytes === 0) return '0 Byte';
+ const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+ return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
+}
+
+function compareQualities(qualityA, qualityB) {
+ const order = ['4320p', '2160p', '1440p', '1080p', '720p', '480p', '360p', '240p', '144p'];
+ return order.indexOf(qualityB) - order.indexOf(qualityA);
+}
+
+function formatDuration(seconds) {
+ const hours = Math.floor(seconds / 3600);
+ const minutes = Math.floor((seconds % 3600) / 60);
+ const remainingSeconds = seconds % 60;
+ return `${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}`;
+}
+
+function pad(value) {
+ return value < 10 ? `0${value}` : value;
+}
+
+function toggleSection(sectionId) {
+ const sections = document.querySelectorAll('.section');
+ sections.forEach((section) => {
+ section.style.display = 'none';
+ });
+
+ const section = document.getElementById(sectionId);
+ section.style.display = 'block';
+}
+
+function openLink(link) {
+ ipcRenderer.send('openExternalLink', link);
+}
diff --git a/docs/styles.css b/docs/styles.css
new file mode 100644
index 0000000..674dac7
--- /dev/null
+++ b/docs/styles.css
@@ -0,0 +1,67 @@
+body {
+ margin: 0;
+ font-family: 'Arial', sans-serif;
+ background-color: #ffffff;
+ color: #000000;
+}
+
+.header {
+ background-color: #7289da;
+ padding: 15px;
+ text-align: center;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 10px;
+}
+
+.input-container {
+ margin-bottom: 10px;
+}
+
+input, button {
+ margin: 5px;
+ padding: 10px;
+ border: none;
+ border-radius: 5px;
+}
+
+button {
+ background-color: #7289da;
+ color: #ffffff;
+ cursor: pointer;
+}
+
+.result-container {
+ width: 90%;
+}
+
+ul {
+ list-style-type: none;
+ padding: 0;
+}
+
+.category {
+ background-color: #99aab5;
+ padding: 5px;
+ cursor: pointer;
+ margin-top: 5px;
+ border-radius: 5px;
+}
+
+.section {
+ margin-top: 5px;
+}
+
+a {
+ color: #7289da;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+a:hover {
+ text-decoration: underline;
+}