modify layout, implemented some more features to match mobile app
This commit is contained in:
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
node_modules
|
||||
BIN
currentSong.json
BIN
currentSong.json
Binary file not shown.
107
main.js
107
main.js
@@ -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
1220
node_modules/.package-lock.json
generated
vendored
File diff suppressed because it is too large
Load Diff
1221
package-lock.json
generated
1221
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
22
profile.js
22
profile.js
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user