modify layout, implemented some more features to match mobile app

This commit is contained in:
Brandon4466
2025-04-01 13:00:04 -07:00
parent ff59c4c0b8
commit 504fdac553
7 changed files with 2439 additions and 155 deletions

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules

Binary file not shown.

107
main.js
View File

@@ -9,7 +9,8 @@ let win;
let lastSong = "";
// Load stored otherUsername if available.
let otherUsername = store.get('otherUsername', "");
const username = "brandon"; // Your own username
// const username = "brandon"; // Your own username
let username = store.get('username', ""); // Load username from store, default to "brandon" if not set
const apiUrl = "https://ms.bbrunson.com"; // Your API endpoint
// ------------------------------
@@ -274,6 +275,16 @@ function getProfilePageHTML(user, isOwn, currentOtherUsername) {
<input type="color" id="pfpColorInput"><br>
<button id="savePfpColor">Save Color</button>
</div>
<div class="editable">
<label>Set Accent Color:</label>
<input type="color" id="pfpColorInput"><br>
<button id="savePfpColor">Save Color</button>
</div>
<div class="editable">
<label>Change Username:</label>
<input type="text" id="usernameInput" placeholder="Enter new username" value="${username}">
<button id="saveUsername">Save Username</button>
</div>
` : ''}
</div>
@@ -316,30 +327,90 @@ function getProfilePageHTML(user, isOwn, currentOtherUsername) {
// Main Window & IPC handlers
// ------------------------------
function createWindow() {
if (!username) {
promptForUsername();
} else {
startMainApp();
}
}
// REMOVED: ipcMain.on('open-settings', ...);
function promptForUsername() {
let promptWin = new BrowserWindow({
width: 300,
height: 220,
resizable: false,
frame: false,
alwaysOnTop: true,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
}
});
promptWin.loadURL('data:text/html;charset=UTF-8,' + encodeURIComponent(`
<html>
<head>
<title>Set Username</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; background: #222; color: #fff; }
.container { padding: 20px; }
input { width: 80%; padding: 8px; margin-top: 10px; background: #444; border: 1px solid #555; color: #fff; }
button { padding: 8px 15px; margin-top: 10px; cursor: pointer; background: #007BFF; color: white; border: none; }
</style>
</head>
<body>
<div class="container">
<h2>Enter a Username</h2>
<input type="text" id="usernameInput" placeholder="Your username">
<button onclick="setUsername()">Save</button>
</div>
<script>
const { ipcRenderer } = require('electron');
function setUsername() {
const username = document.getElementById('usernameInput').value.trim();
if (username) {
ipcRenderer.send('set-initial-username', username);
} else {
alert("Username cannot be empty.");
}
}
</script>
</body>
</html>
`));
ipcMain.once('set-initial-username', (event, newUsername) => {
username = newUsername;
store.set('username', username);
promptWin.close();
startMainApp();
});
}
function startMainApp() {
win = new BrowserWindow({
width: 400,
height: 800,
webPreferences: {
nodeIntegration: true,
contextIsolation: false, // Keep false if using require in renderer as shown
// preload: path.join(__dirname, 'preload.js') // Consider using preload for better security later
contextIsolation: false,
}
});
// win.webContents.openDevTools();
win.removeMenu(); // Remove menu bar for cleaner UI
win.loadURL('data:text/html;charset=UTF-8,' + encodeURIComponent(getMainPageHTML())); // Use dynamic HTML generation
// Handle window close event if needed
win.removeMenu();
win.loadURL('data:text/html;charset=UTF-8,' + encodeURIComponent(getMainPageHTML()));
win.on('closed', () => {
win = null; // Dereference the window object
win = null;
});
}
// REMOVED: ipcMain.on('open-settings', ...);
ipcMain.on('back-to-main', () => {
if (win && !win.isDestroyed()) {
// Reload the main page HTML dynamically
lastSong = ""; // Reset last song so UI updates on reload
win.loadURL('data:text/html;charset=UTF-8,' + encodeURIComponent(getMainPageHTML()));
}
});
@@ -377,6 +448,22 @@ ipcMain.on('open-profile', (event, data) => {
}
});
ipcMain.on('set-username', (event, newUsername) => {
if (!newUsername.trim()) {
event.reply('username-set-confirm', { success: false, message: "Username cannot be empty." });
return;
}
username = newUsername.trim();
store.set('username', username);
console.log("Username changed to:", username);
event.reply('username-set-confirm', { success: true, newUsername: username });
// Reload profile with updated username
if (win && !win.isDestroyed()) {
win.loadURL('data:text/html;charset=UTF-8,' + encodeURIComponent(getProfilePageHTML(username, true, otherUsername)));
}
});
app.whenReady().then(() => {
createWindow();

1220
node_modules/.package-lock.json generated vendored

File diff suppressed because it is too large Load Diff

1221
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -7,10 +7,6 @@
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"repository": {
"type": "git",
"url": "https://git.bbrunson.com/brandon/musicshare-electron-client.git"
},
"author": "Brandon Brunson",
"license": "ISC",
"devDependencies": {
@@ -18,6 +14,7 @@
},
"dependencies": {
"axios": "^1.8.4",
"electron-packager": "^17.1.2",
"electron-store": "^10.0.1"
}
}

View File

@@ -170,6 +170,28 @@ function setupEventListeners(user, isOwn, currentOtherUsername) { // Added curre
});
}
const saveUsernameBtn = document.getElementById('saveUsername');
if (saveUsernameBtn) {
saveUsernameBtn.addEventListener('click', () => {
const newUsername = document.getElementById('usernameInput')?.value;
if (newUsername && newUsername.trim()) {
ipcRenderer.send('set-username', newUsername.trim());
} else {
alert("Username cannot be empty.");
}
});
}
ipcRenderer.on('username-set-confirm', (event, result) => {
if (result.success) {
alert(`Username updated to '${result.newUsername}'`);
document.getElementById('usernameDisplay').textContent = result.newUsername;
} else {
alert(`Failed to update username: ${result.message}`);
}
});
} else {
// --- Listener for OTHER user profile (setting the tracked user) ---
const saveOtherUserBtn = document.getElementById('saveOtherUsername');