Merge pull request #61 from mountainash/develop

Added user account store

.editorconfig

@@ -0,0 +1,17 @@
+// https://EditorConfig.org
+
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.json

@@ -0,0 +1,42 @@
+{
+	"root": true,
+	"env": {
+		"browser": true,
+		"node": true,
+		"commonjs": true,
+		"amd": true,
+		"es6": true
+	},
+	"globals": {
+		"none": "readonly"
+	},
+	"settings": {
+		"import/core-modules": [ "electron" ]
+	},
+	"parserOptions": {
+		"ecmaVersion": 2017,
+		"sourceType": "module"
+	},
+	"extends": "eslint:recommended",
+	"rules": {
+		"indent": ["error", "tab"],
+		"linebreak-style": ["error", "unix"],
+		"quotes": ["error", "single"],
+		"semi": ["error", "always"],
+		"eol-last": ["error", "never"],
+		"no-trailing-spaces": "error",
+		"one-var": "warn",
+		"eqeqeq": ["warn", "smart"],
+		"default-case-last": "warn",
+		"no-empty-function": "error",
+		"no-cond-assign": ["error", "always"],
+		"no-script-url": "error",
+		"no-self-compare": "warn",
+		"no-multi-spaces": "warn",
+		"func-call-spacing": ["error", "never"],
+		"array-bracket-newline": "warn",
+		"keyword-spacing": ["error", { "before": true, "after": true }],
+		"space-before-function-paren": ["error", "never"],
+		"array-bracket-spacing": "warn"
+	}
+}

.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+# github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+# patreon: # Replace with a single Patreon username
+# open_collective: # Replace with a single Open Collective username
+# ko_fi: # Replace with a single Ko-fi username
+# tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+# community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+# liberapay: # Replace with a single Liberapay username
+# issuehunt: # Replace with a single IssueHunt username
+# otechie: # Replace with a single Otechie username
+# custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
+custom: ['https://www.buymeabeer.com/mountainash']

.vscode/settings.json

@@ -1,14 +1,5 @@
 {
 	"javascript.validate.enable": true,
-	"eslint.options": {
-		"useEslintrc": false,
-		"parserOptions": {
-			"ecmaVersion": 6
-		},
-		"env": {
-			"es6": true
-		}
-	},
 	"workbench.colorCustomizations": {
 		"activityBar.background": "#1e2337",
 		"activityBar.activeBackground": "#5937b3",
@@ -27,5 +18,9 @@
 		"statusBar.border": "#586573",
 		"titleBar.border": "#586573"
 	},
-	"peacock.color": "#5937b3"
+	"peacock.color": "#5937b3",
+	"peacock.affectAccentBorders": true,
+	"peacock.affectDebuggingStatusBar": true,
+	"peacock.affectStatusAndTitleBorders": true,
+	"peacock.affectTabActiveBorder": true
 }

README.md

@@ -1,5 +1,7 @@
-Mixcloud Play
-=====
+# Mixcloud Play
+
+> Application wrapper for Mixcloud
+
 Mixcloud Play is the missing desktop experience for [Mixcloud.com](https://www.mixcloud.com/) with support for media controls and showing current track in menu bar. Enjoy listening to hours of new music...
 
 ## [Download for Mac](https://github.com/mountainash/Mixcloud-Play/releases/latest)
@@ -10,6 +12,7 @@ Mixcloud Play is the missing desktop experience for [Mixcloud.com](https://www.m
 1. Media controls: ⏪ ⏯️ ⏩ (⏪ [requires Mixcloud _PREMIUM_ or _SELECT_](https://help.mixcloud.com/hc/en-us/articles/360004054059))
 2. Menu bar track title
 3. Song notifications
+4. Stores login in local keystore/keychain
 5. Last.fm [Scrobbing](https://www.last.fm/about/trackmymusic) ([_coming soon_](https://github.com/mountainash/Mixcloud-Play/projects/1))
 
 ## Enable Media Controls
@@ -49,7 +52,6 @@ docker-compose run --rm mixcloud-play {any command here}
 Built app will output to `./dist/mac/Mixcloud Play.app`
 
 ### Auto Update Publishing (GitHub)
-
 Publish app updates is set-up as per the [GithubOptions](https://www.electron.build/configuration/publish#githuboptions) for Electron Build's [Auto Update](https://www.electron.build/auto-update).
 
 1. Update the app version number in both `package*.json` files.

browser.css

@@ -7,8 +7,9 @@ textarea::selection {
 }
 .ad-header-wrapper,
 div[class^="Warnings__Container"],
-div[class^="RebrandHeader__"],
-.sidebar-small {
+div[class^="Header__"]::before,
+.sidebar-small,
+.profile-new-design-header {
 	-webkit-app-region: drag;
 }
 input,

browser.js

@@ -1,4 +1,5 @@
-const { ipcRenderer, webFrame, shell } = require('electron');
+const { ipcRenderer } = require('electron');
+const keyStore = require('./src/keystore');
 
 const webview = document;
 const BASE_URL = 'https://www.mixcloud.com';
@@ -25,7 +26,11 @@ const DomHooks = {
 	backbutton: '[aria-label="Seek backwards"]',
 	showtitle: '[class*=PlayerControls__ShowTitle]',
 	trackartist: '[class*=PlayerSliderComponent__Artist]',
-	tracktitle: '[class*=PlayerSliderComponent__Track-]'
+	tracktitle: '[class*=PlayerSliderComponent__Track-]',
+	loginform: 'form[name=login]',
+	loginbutton: 'button',
+	usernameinput: 'input[name=email]',
+	passwordinput: 'input[type=password]'
 };
 
 const Endpoints = concatEndpoints({
@@ -34,7 +39,7 @@ const Endpoints = concatEndpoints({
 });
 
 // Set Window Title
-webview.addEventListener('page-title-updated', ({ title }) => {
+webview.addEventListener('page-title-updated', ({title}) => {
 	webview.title = `${title} | Mixcloud Play`;
 });
 
@@ -48,33 +53,29 @@ ipcRenderer.on('goToNewShows', () => {
 	webview.location = Endpoints.NEWSHOWS;
 });
 
-ipcRenderer.on('notificationClicked', (_, notificationIndex) => {
-	webview.send('notificationClicked', notificationIndex);
+ipcRenderer.on('logOut', async () => {
+	console.log('ipcRenderer: logOut');
+
+	keyStore.Logout();
 });
 
-// Open all links in external browser
-webview.addEventListener('click', (e) => {
-	if (event.target.href) {
-		console.log(event.target.href);
-	}
-	if (event.target.tagName === 'A' && event.target.href.startsWith('http') && !event.target.href.includes(BASE_URL + '/')) {
-		event.preventDefault();
-		shell.openExternal(event.target.href);
-	}
+ipcRenderer.on('notificationClicked', (_, notificationIndex) => {
+	webview.send('notificationClicked', notificationIndex);
 });
 
 if (DEBUG) {
 	webview.addEventListener('dom-ready', () => {
 		webview.openDevTools();
 	});
-	webview.addEventListener('console-message', (e) => {
-		console.log('Guest page logged a message:', e.message)
+	webview.addEventListener('console-message', (event) => {
+		console.log('Guest page logged a message:', event.message)
 	});
 }
 
-// #region Notification
+/* Notifications */
 const notifications = [];
 const NotificationOriginal = Notification;
+
 function NotificationDecorated(title) {
 	const notification = {
 		_handleClick: [],
@@ -108,10 +109,6 @@ Object.defineProperties(NotificationDecorated, {
 });
 
 window.Notification = NotificationDecorated;
-// #endregion
-
-// #region Custom notification sound
-webFrame.registerURLSchemeAsBypassingCSP('file');
 
 const AudioOriginal = Audio;
 const beaconNotificationRegex = /beacon-notification\.(?:.*)$/;
@@ -215,11 +212,34 @@ webview.addEventListener('DOMContentLoaded', () => {
 				if (currentTitle !== '')
 					ipcRenderer.send('nowPlaying', currentTitle, currentArtist);
 			}
+		} else {
+			let loginform = webview.querySelector(DomHooks.loginform);
+
+			if (!loginform || loginform.dataset.listened) return; // only attach an event to the form once
+			loginform.dataset.listened = true;
+
+			console.log('login showing');
+			keyStore.Login(loginform); // try using saved login
+
+			// add a listener to the form to capture login details and store them
+			const loginbutton = loginform.querySelector(DomHooks.loginbutton);
+
+			loginbutton.addEventListener('click', () => {
+				let username = loginform.querySelector(DomHooks.usernameinput).value;
+				let password = loginform.querySelector(DomHooks.passwordinput).value;
+
+				if (username && password) {
+					// delete any exiting logins
+					keyStore.DeleteKeys();
+					// store the users details for auto-login next time
+					keyStore.AddKey(username, password);
+				}
+			});
 		}
 	}, 2000);
 });
 
-webview.addEventListener('click', (e) => {
+webview.addEventListener('click', (event) => {
 	const playPause = webview.querySelector(DomHooks.playbutton);
 	const eventPath = event.path || (event.composedPath && event.composedPath()) || [];
 	const playPauseClicked = eventPath.find(path => path === playPause);