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 = "";
|
let lastSong = "";
|
||||||
// Load stored otherUsername if available.
|
// Load stored otherUsername if available.
|
||||||
let otherUsername = store.get('otherUsername', "");
|
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
|
const apiUrl = "https://ms.bbrunson.com"; // Your API endpoint
|
||||||
|
|
||||||
// ------------------------------
|
// ------------------------------
|
||||||
@@ -274,6 +275,16 @@ function getProfilePageHTML(user, isOwn, currentOtherUsername) {
|
|||||||
<input type="color" id="pfpColorInput"><br>
|
<input type="color" id="pfpColorInput"><br>
|
||||||
<button id="savePfpColor">Save Color</button>
|
<button id="savePfpColor">Save Color</button>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
@@ -316,30 +327,90 @@ function getProfilePageHTML(user, isOwn, currentOtherUsername) {
|
|||||||
// Main Window & IPC handlers
|
// Main Window & IPC handlers
|
||||||
// ------------------------------
|
// ------------------------------
|
||||||
function createWindow() {
|
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({
|
win = new BrowserWindow({
|
||||||
width: 400,
|
width: 400,
|
||||||
height: 800,
|
height: 800,
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
nodeIntegration: true,
|
nodeIntegration: true,
|
||||||
contextIsolation: false, // Keep false if using require in renderer as shown
|
contextIsolation: false,
|
||||||
// preload: path.join(__dirname, 'preload.js') // Consider using preload for better security later
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// 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.on('closed', () => {
|
||||||
win = null; // Dereference the window object
|
win = null;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// REMOVED: ipcMain.on('open-settings', ...);
|
|
||||||
|
|
||||||
ipcMain.on('back-to-main', () => {
|
ipcMain.on('back-to-main', () => {
|
||||||
if (win && !win.isDestroyed()) {
|
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()));
|
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(() => {
|
app.whenReady().then(() => {
|
||||||
createWindow();
|
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",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
"start": "electron ."
|
"start": "electron ."
|
||||||
},
|
},
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://git.bbrunson.com/brandon/musicshare-electron-client.git"
|
|
||||||
},
|
|
||||||
"author": "Brandon Brunson",
|
"author": "Brandon Brunson",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@@ -18,6 +14,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^1.8.4",
|
"axios": "^1.8.4",
|
||||||
|
"electron-packager": "^17.1.2",
|
||||||
"electron-store": "^10.0.1"
|
"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 {
|
} else {
|
||||||
// --- Listener for OTHER user profile (setting the tracked user) ---
|
// --- Listener for OTHER user profile (setting the tracked user) ---
|
||||||
const saveOtherUserBtn = document.getElementById('saveOtherUsername');
|
const saveOtherUserBtn = document.getElementById('saveOtherUsername');
|
||||||
|
|||||||
Reference in New Issue
Block a user