soundcloud

.eslintrc.js

@@ -12,16 +12,17 @@ module.exports = {
 	// Change errors to warnings to avoid the CI builds failing.
 	rules: {
 		'capitalized-comments': 'off',
-		indent: 'warn',
+		'ember/closure-actions': 'warn',
+		'ember/new-module-imports': 'off',
+		'ember/no-on-calls-in-components': 'warn',
+		'ember/use-brace-expansion': 'warn',
 		'no-alert': 'off',
 		'object-curly-spacing': 'off',
-		semi: 'off',
 		'space-before-function-paren': 'off',
 		// Disable a few "best practices" for now
-		'ember/closure-actions': 'warn',
-		'ember/new-module-imports': 'off',
-		'ember/no-on-calls-in-components': 'warn',
-		'ember/use-brace-expansion': 'warn'
+		curly: ['error', 'multi-line'],
+		indent: 'warn',
+		semi: 'off'
 	},
 	overrides: [
 		// node files

app/auth/login/controller.js

@@ -0,0 +1,11 @@
+import Controller from '@ember/controller'
+
+export default Controller.extend({
+	actions: {
+		// This does nothing else but route the action
+		// up to a "login" action on the parent `auth` route.
+		submitLogin(...args) {
+			this.send('login', args)
+		}
+	}
+})

app/auth/login/route.js

@@ -1,16 +1,18 @@
-import Ember from 'ember';
-
-const {Route, get} = Ember;
+import Route from '@ember/routing/route'
+import {get} from '@ember/object'
 
 export default Route.extend({
 	beforeModel(transition) {
 		if (get(this, 'session.isAuthenticated')) {
-			return transition.send('redirectAfterAuth');
+			return transition.send('redirectAfterAuth')
 		}
 	},
 	actions: {
+		login() {
+			return true
+		},
 		redirectAfterAuth() {
-			return true;
+			return true
 		}
 	}
-});
+})

app/auth/login/template.hbs

@@ -6,7 +6,7 @@
 			</h1>
 		</header>
 		<div class="Container Container--small">
-			{{user-login onLogin="login"}}
+			{{user-login onLogin=(action "submitLogin")}}
 		</div>
 	</section>
 </div>

app/auth/route.js

@@ -5,6 +5,7 @@ const {Route, get, inject, debug} = Ember;
 
 export default Route.extend(resetScroll, {
 	flashMessages: inject.service(),
+
 	onLoginError(err) {
 		const messages = get(this, 'flashMessages');
 		let msg;
@@ -31,16 +32,22 @@ export default Route.extend(resetScroll, {
 			messages.warning(msg, {timeout: 10000});
 		}
 	},
+
 	actions: {
-		login(provider, email, password) {
-			const flashMessages = get(this, 'flashMessages');
-			let data = {
+		login([provider, email, password]) {
+			const flashMessages = get(this, 'flashMessages')
+
+			let options = {
 				provider,
 				email,
 				password
-			};
+			}
+
+			// iOS has issues with the default 'popup' method, so we switch to redirect.
+			const iOS = Boolean(navigator.platform) && /iPhone|iPod/.test(navigator.platform)
+			if (iOS) options.redirect = true
 
-			get(this, 'session').open('firebase', data).then(() => {
+			get(this, 'session').open('firebase', options).then(() => {
 				flashMessages.info('You are now signed in!');
 				this.send('redirectAfterAuth');
 			}).catch(error => {

app/components/track-form-add/template.hbs

@@ -1,25 +1,13 @@
 {{#if player.isPlaying}}
-	<div class="u-dn">
-		{{#btn-group class="BtnGroup--right"}}
-			{{#if session.currentUser.channels.firstObject.isPremium}}
-				<button
-					{{action "prefillCurrentTrack"}}
-					class="Btn"
-					type="button"
-					title="Add the current 'on air' track into your radio [⌨ a]">
-					Copy current track
-				</button>
-			{{else}}
-				<button
-					{{action "inviteToPremium"}}
-					class="Btn Muted"
-					type="button"
-					title="(Upgrade) Add the current 'on air' track into your radio [⌨ a]">
-					Copy current track
-				</button>
-			{{/if}}
-		{{/btn-group}}
-	</div>
+	{{#btn-group class="BtnGroup--right"}}
+		<button
+			{{action "prefillCurrentTrack"}}
+			class="Btn"
+			type="button"
+			title="Add the current 'on air' track into your radio">
+			Copy current track
+		</button>
+	{{/btn-group}}
 {{/if}}
 
 {{#form-group
@@ -32,7 +20,7 @@
 			type="url"
 			value=value
 			required="required"
-			placeholder="Paste in a YouTube link"
+			placeholder="Link to a Youtube or Soundcloud media"
 			autoFocus=true}}
 {{/form-group}}
 

app/components/track-form/component.js

@@ -1,5 +1,4 @@
 import Ember from 'ember';
-import youtubeUrlToId from 'radio4000/utils/youtube-url-to-id';
 import {fetchTitle} from 'radio4000/utils/youtube-api';
 import {fetchDiscogsInfo} from 'radio4000/utils/discogs-api';
 import {task, timeout} from 'ember-concurrency';
@@ -42,10 +41,22 @@ export default Component.extend({
 		}
 
 		// Because the URL might have changed
-		const newid = youtubeUrlToId(track.get('url'))
+		let parsedMediaUrl;
+
+		try {
+			parsedMediaUrl = mediaUrlParser(track.get('url'))
+		} catch (e) {
+			return;
+		}
+
+		const newid = parsedMediaUrl.id
 		if (newid) {
 			track.set('ytid', newid);
-			get(this, 'fetchTitle').perform()
+			if (parsedMediaUrl.provider === 'youtube') {
+				get(this, 'fetchYoutubeTitle').perform()
+			} else if (parsedMediaUrl.provider === 'soundcloud') {
+				get(this, 'fetchSoundcloudTitle').perform()
+			}
 		}
 	}),
 
@@ -64,14 +75,57 @@ export default Component.extend({
 		return `https://www.discogs.com/search/?q=${title}&type=all`
 	}),
 
-	fetchTitle: task(function * () {
+	fetchYoutubeTitle: task(function * () {
 		yield timeout(250); // throttle
 		const track = get(this, 'track')
 		const ytid = track.get('ytid')
 		let title = yield fetchTitle(ytid)
 		track.set('title', title)
 	}).restartable(),
 
+	fetchSoundcloudTitle: task(function * () {
+		yield timeout(250); // throttle
+		const track = get(this, 'track')
+		const trackUrl = track.get('url')
+
+		// insert temporarily the soundcloud API script
+		// for the widget to work
+		// maybe the soundcloud widget code does already exist
+		let SC = window.SC
+		if (!window.SC) {
+			let soundcloudApiScript = document.createElement('script')
+			soundcloudApiScript.setAttribute('src', 'https://w.soundcloud.com/player/api.js')
+			soundcloudApiScript.setAttribute('id', 'SoundcloudApiScript')
+			this.get('element').appendChild(soundcloudApiScript)
+			// assign the newly created soundcloud API code to our variable
+			SC = window.SC
+		}
+
+		// create and insert a soundcloud widget,
+		// so we can fetch the title from the track
+		let soundcloudIframe = document.createElement('iframe');
+		soundcloudIframe.setAttribute('id', 'SoundcloudIframe')
+		soundcloudIframe.setAttribute('src', `https://w.soundcloud.com/player/?url=${trackUrl}`)
+		soundcloudIframe.classList.add('u-dn');
+		this.get('element').appendChild(soundcloudIframe)
+
+		// eslint-disable-next-line new-cap
+		var widget = SC.Widget(soundcloudIframe)
+		const readyEvent = SC.Widget.Events.READY
+
+		// attach the ready event to query the track
+		widget.bind(readyEvent, () => {
+			widget.getCurrentSound(sound => {
+				track.set('title', sound.title)
+
+				// cleanup all this mess like nothing happened
+				widget.unbind(readyEvent)
+				// this.get('element').removeChild(document.querySelector('#SoundcloudApiScript'))
+				this.get('element').removeChild(document.querySelector('#SoundcloudIframe'))
+			})
+		})
+	}).restartable(),
+
 	fetchDiscogsInfo: task(function * () {
 		const mediaUrl = mediaUrlParser(this.get('track.discogsUrl'))
 		// Make sure we are dealing with a Discogs URL

app/components/user-login/component.js

@@ -8,7 +8,7 @@ export default Component.extend({
 
 	actions: {
 		login(provider, email, password) {
-			this.sendAction('onLogin', provider, email, password);
+			this.onLogin(provider, email, password)
 		},
 
 		resetPassword(email) {

app/components/x-playback/template.hbs

@@ -6,9 +6,8 @@
 		autoplay="true"
 		r4-url="true"
 		track-id={{track.id}}
-		title="Radio4000 player. [⌨ g c = current channel] [⌨ g x = curent track]"
 	></radio4000-player>
-	{{!-- <script src="http://localhost:4002/radio4000-player.min.js"></script> --}}
+	<!-- <script src="http://localhost:4002/radio4000-player.min.js"></script> -->
 </div>
 
 <div class="Playback-layoutButtons">

app/feedback/template.hbs

@@ -4,7 +4,7 @@
 			<h1>Feedback</h1>
 		</header>
 		<div class="Container">
-			<p>Comments, problem reports, feature ideas or any thoughts are always welcome.</p>
+			<p>Comments, problem reports, feature ideas or any thoughts are always welcome. Prefer email? <a href="mailto:contact@radio4000.com">contact@radio4000.com</a>.</p>
 
 			{{feedback-form-google-spreadsheet
 				scriptUrl="https://script.google.com/macros/s/AKfycbyuhfTf74Lcc5pvfXfxdgMfE4wpDiw8DJN1dzhN2YLRpAa2kBI/exec"}}

app/index.html

@@ -26,17 +26,28 @@
 			<!-- a dummy app that appears independently from Ember and is removed by ember asap -->
 			<style>
 				.DummyApp {
-					z-index: 2;
+					/* above the main r4 nav menu */
+					z-index: 7;
 					position: fixed;
 					top: 0;
 					left: 0;
 					width: 100%;
 					height: 100%;
 					background-color: hsl(60, 4%, 91%);
 				}
-				.DummyApp--hidden {
-					display: none;
+				.DummyApp--hidden .DummyApp-inner {
+					opacity: 0;
 				}
+
+				.DummyApp-inner {
+					transition: opacity 700ms ease-in;
+					opacity: 1;
+				}
+
+				.DummyApp--hidden .DummyApp-loading {
+					transform: translateY(50%);
+				}
+
 				.DummyApp-inner {
 					position: absolute;
 					top: 50%;
@@ -55,6 +66,8 @@
 				}
 				.DummyApp-loading {
 					margin-bottom: 1rem;
+					transition: transform 500ms ease-in;
+					transform: translateY(0%);
 				}
 				.DummyApp p {
 					color: hsl(0, 0%, 30%); /*$dark*/
@@ -103,8 +116,8 @@
 					console.log('A human feel.')
 
 					// Show dummy app
-					var dummyApp = document.querySelectorAll('.DummyApp')
-					dummyApp[0].classList.remove('DummyApp--hidden')
+					var dummyApp = document.querySelector('.DummyApp')
+					dummyApp.classList.remove('DummyApp--hidden')
 
 					// Insert a random sentence to make waiting fun/less annoying
 					var sentences = [
@@ -139,13 +152,13 @@
 						'Omunye mzuzu, sicela'
 					]
 					var randomSentence = sentences[Math.floor(Math.random() * sentences.length)]
-					var slogan = document.querySelectorAll('.DummyApp-slogan')
-					slogan[0].innerHTML = randomSentence + '…'
+					var slogan = document.querySelector('.DummyApp-slogan')
+					slogan.innerHTML = randomSentence + '…'
 
 					// Internet connection check
-					var dummyBody = document.querySelectorAll('.DummyApp-body')
+					var dummyBody = document.querySelector('.DummyApp-inner')
 					if (!navigator.onLine) {
-						dummyBody[0].innerHTML =
+						dummyBody.innerHTML =
 							'<p><strong>It seems that you are not connected to the internet -_-</strong></p><p>Find the internet and then reload this page.</p><p><button class="Btn" onclick="window.location.reload()">Reload</button></p>'
 					}
 				})()

app/models/track.js

@@ -14,9 +14,9 @@ export const Validations = buildValidations({
 	url: [
 		validator('presence', {
 			presence: true,
-			message: 'A YouTube URL (https://...) is required to add a new track'
+			message: 'A YouTube or Soundcloud media URL (https://...) are required to add a new track'
 		}),
-		validator('youtube-url')
+		validator('provider-url')
 	],
 	discogsUrl: [
 		validator('discogs-url')

app/styles/components/_aside.scss

@@ -7,15 +7,16 @@
 	top: 1rem;
 	left: 1rem;
 	z-index: 7;
+
+	display: block;
 	width: 2.7rem;
 	height: 2.7rem;
 
 	// "burger" lines inside
-	display: block;
 	span {
 		display: block;
-		height: 0.2rem;
-		margin: 0.2rem;
+		height: 3px;
+		margin: 3px;
 		background-color: black;
 		border-radius: $border-radius;
 	}