Add nearly-working contact form and back button. Prevent accidental n…

…avigating away.

src/app/contact.css

@@ -41,4 +41,13 @@
 	text-align: right;
 	margin: 0;
 	padding: 0;
+}
+
+.error {
+	text-align: center;
+	font-weight: bold;
+	padding: 5px 0;
+	margin: 0;
+	font-size: 10pt;
+	color: #C00;
 }

src/app/contact.html

@@ -10,9 +10,11 @@
 	</ons-toolbar>
 	<br /><br />
 
+	<p class="error" *ngIf="error != ''">{{ error }}</p>
+
 	<img src="https://insanityradio.com/res/monkey.svg" class="monkey" />
-	<ons-input style="width: 100%" placeholder="Your Name" [(value)]="name"></ons-input>
-	<textarea [(ngModel)]="message"></textarea>
+	<ons-input [disabled]="sending" style="width: 100%" input-id="contact-required-input" placeholder="Your Name" [(value)]="name"></ons-input>
+	<textarea [disabled]="sending" [(ngModel)]="message"></textarea>
 
 	<p><b>{{remaining()}}</b> characters remaining</p>
 

src/app/contact.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, AfterViewInit} from '@angular/core';
 import {OnsNavigator} from 'angular2-onsenui';
 
 import {Metadata} from './metadata';
@@ -8,22 +8,55 @@ import {Metadata} from './metadata';
 	template: require('./contact.html'),
 	styles: [require('./contact.css')]
 })
-export class ContactForm {
+export class ContactForm implements AfterViewInit {
 
 	@Input() modal:any;
 	name:string = '';
 	message:string = '';
 	allowedCharacters:number = 140;
+	sending:boolean = false;
+	error:string = 'ERROR TEXT';
 
 	constructor (private navi : OnsNavigator) {
+		this.sending = false;
+	}
+
+	ngAfterViewInit() {
+		let that = this;
+		this.modal.addEventListener('preshow', function () {
+			that.sending = false;
+			that.error = '';
+		})
 	}
 
 	remaining() {
 		return this.allowedCharacters - this.message.length;
 	}
 
 	send () {
-		this.modal.hide({ animation: 'lift' })
+		this.sending = true;
+		this.error = '';
+		let that = this;
+		window['fetch']('https://webapi.insanityradio.com/message/post').then(function (data) {
+			data.json();
+		}).then(function (data) {
+			if (data.error) {
+				return this.showError(data.error);
+			}
+			that.modal.hide({ animation: 'lift' });
+		}).catch(function (error) {
+			console.log('error?', error)
+			that.showError(error.message.substr(0, 12) == 'NetworkError' ? null : error.message);
+		})
+	}
+
+	showError (text) {
+		this.sending = false;
+		if (text != '' && text != null) {
+			this.error = text;
+		} else {
+			this.error = 'Oops - something went wrong! Try again, or alternatively get in touch via email!';
+		}
 	}
 
 }

src/app/error.css

@@ -0,0 +1,10 @@
+.contact-form {
+	width: 80vw;
+	max-width: 600px;
+	padding: 10px;
+}
+
+.contact-form h2 {
+	margin: 0;
+	text-align: center;
+}

src/app/error.ts

@@ -1,18 +1,17 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {OnsNavigator} from 'angular2-onsenui';
 
 @Component({
-  selector: 'ons-page[page]',
-  template: require('./error.html'),
-  styles: [require('./error.css')]
+	selector: 'error',
+	template: require('./error.html'),
+	styles: [require('./error.css')]
 })
-export class Error {
-  constructor(private navi : OnsNavigator) {
-  }
+export class ErrorDialog {
 
-  push() {
-    this.navi.element.pushPage(null);
-  }
-}
+	@Input() modal:any;
+
+	constructor(private navi : OnsNavigator) {
+	}
 
+}
 

src/app/metadata.ts

@@ -1,3 +1,4 @@
+
 import {Component, ChangeDetectorRef, Input}  from '@angular/core';
 import {OnsNavigator} from 'angular2-onsenui';
 
@@ -44,6 +45,8 @@ export class Metadata {
 	private interval:number = 8000;
 	private total:number = 10;
 
+	private changeTimer:any = null;
+
 	constructor(private change:ChangeDetectorRef) {
 
 		this.meta = new Radio.InsanityStreamAPI({
@@ -100,10 +103,21 @@ export class Metadata {
 		}
 
 		data = this.getSongAt(time)
+
+		this.detectChangesWithTimer()
 		this.change.detectChanges()
 
 	}
 
+	detectChangesWithTimer () {
+		if (this.changeTimer == null) {
+			this.changeTimer = setTimeout(() => {
+				this.change.detectChanges()
+				this.changeTimer = null;
+			}, 100);
+		}
+	}
+
 	/* 
 	 * Returns the song at the given timestamp (JS style)
 	 */

src/app/radio.ts

@@ -111,7 +111,18 @@ export module Radio {
 			this.audio.addEventListener("playing", (e) => this.handleStateChange(e));
 			this.audio.addEventListener("pause", (e) => this.handleStateChange(e));
 			this.audio.addEventListener("stalled", (e) => this.handleStateChange(e));
-			this.audio.play();
+
+			let promise = this.audio.play();
+
+			console.log('aa native')
+			if (promise !== undefined) {
+				console.log('aa')
+				promise.then(() => {
+				}).catch ((e) => {
+					// autoplay
+					this.stop();
+				})
+			}
 		}
 
 		handleStateChange(e) {
@@ -228,7 +239,7 @@ export module Radio {
 			this.audio.addEventListener("playing", (e) => this.handleStateChange(e));
 			this.audio.addEventListener("pause", (e) => this.handleStateChange(e));
 			this.audio.addEventListener("stalled", (e) => this.handleStateChange(e));
-			this.audio.play();
+			let promise = this.audio.play();
 
 		}
 
@@ -278,12 +289,9 @@ export module Radio {
 			} else {
 				this.audio = document.createElement('video');
 
-				// Firefox doesn't support HE-AAC on Mac for some reason. Bug 1387127
-				// It plays it as a AAC-LC which sounds worse than DAB.
 				// Safari has a similar effect at the start of every chunk. So fall back to Icecast!
 				let navi = navigator.userAgent.toLowerCase();
-				if ((navi.indexOf('firefox') > -1 && navi.indexOf('macintosh') > -1) ||
-						(navi.indexOf('safari') > -1 && navi.indexOf('chrome') == -1)) {
+				if ((navi.indexOf('safari') > -1 && navi.indexOf('chrome') == -1)) {
 					throw new Error('HLS with audio does not work on Firefox on macOS, or Safari.');
 				}
 
@@ -323,7 +331,18 @@ export module Radio {
 			this.audio.addEventListener("playing", (e) => this.handleStateChange(e));
 			this.audio.addEventListener("pause", (e) => this.handleStateChange(e));
 			this.audio.addEventListener("stalled", (e) => this.handleStateChange(e));
-			console.log(this.audio.play(), '!');
+			let promise = this.audio.play();
+
+			console.log('aa HLS')
+			if (promise !== undefined) {
+				console.log('aa')
+				promise.then(() => {
+				}).catch ((e) => {
+					// autoplay
+					this.played = true;
+					this.stop();
+				})
+			}
 
 		}
 

src/app/shell.css

@@ -35,6 +35,7 @@ a.share, input.share, a.contrast {
 	position: relative;
 	width: 30px;
 	height: 50px;
+	cursor: pointer;
 	transition: background-color 0.08s;
 }
 a.share.facebook {
@@ -56,7 +57,7 @@ a.share.twitter:hover {
 }
 
 a.share.email {
-	background: #C00 url(./resources/e.svg) no-repeat center center;
+	background: transparent url(./resources/e.svg) no-repeat center center;
 	background-size: 15px;
 }
 
@@ -77,6 +78,30 @@ a.share.app:hover {
 	background-color: #000;
 }
 
+a.share.link {
+	float: left;
+	width: auto;
+	background-position: 10px center;
+	padding: 0px 10px 0px 30px;
+	line-height: 50px;
+	color: #FFF;
+	font-size: 10pt;
+}
+
+a.share.back {
+	color: #999;
+	text-align: center;
+	background: transparent;
+	box-shadow: 0px 1px 0px #000;
+	margin-right: 4px;
+	float: left;
+	line-height: 50px;
+}
+
+a.share.back:hover {
+	background: #000;
+}
+
 .row {
 	background: #222;
 	color: #FFF;

src/app/shell.html

@@ -1,11 +1,11 @@
 <ons-toolbar>
 	<div class="left">
-		<img src="../public/resources/cans.svg" height=25 />
+		<a class="share back" (click)="navigateTo('/')" title="Return to the Insanity Radio website"><i class="fa fa-chevron-left"></i></a>
+		<a class="share email link" (click)="modal.show()" target="_blank">Text The Studio</a>
 	</div>
 	<div class="center">
 	</div>
 	<div class="right">
-		<a class="share email" (click)="modal.show()" target="_blank"></a>
 		<a class="share twitter" href="https://twitter.com/insanityradio" target="_blank"></a>
 		<a class="share facebook" href="https://www.facebook.com/insanityradio" target="_blank"></a>
 		<a *ngIf="browser" class="share app" href="https://play.google.com/store/apps/details?id=com.insanityradio.insanityradio&amp;hl=en" target="_blank"><i class="fa fa-android" aria-hidden="true"></i></a>

src/app/shell.ts

@@ -6,20 +6,36 @@ import {Metadata} from './metadata';
 import {Player} from './player';
 import {Artwork} from './artwork';
 
+import * as ons from 'onsenui';
+
 @Component({
 	selector: 'ons-page[shell]',
 	template: require('./shell.html'),
 	styles: [require('./shell.css')]
 })
 export class Shell {
+	@ViewChild('modalError') modalError:any;
 	@ViewChild('player') player:Player;
 	@ViewChild('metadata') metadata:Metadata;
 	@ViewChild('artwork') artwork:Artwork;
 
 	private browser:boolean = process.browser;
 
 	constructor (private navi : OnsNavigator, private zone: NgZone, private _params: Params) {
-
+	}
+
+	navigateTo (url:string) {
+		ons.notification.confirm({
+			messageHTML: "<h3><b>Are you sure?</b></h3>Playback will stop if you leave this page.<br /><br />",
+			cancelable: true,
+			title: '',
+			callback: i => {
+				if (i < 1) {
+					return;
+				}
+				window.location.href = url;
+			}
+		});
 	}
 
 }

src/main.ts

@@ -13,6 +13,7 @@ import {Insanity} from './app/app';
 import {Artwork} from './app/artwork';
 import {Shell} from './app/shell';
 import {ContactForm} from './app/contact';
+import {ErrorDialog} from './app/error';
 import {Player} from './app/player';
 import {Metadata} from './app/metadata';
 import {SongHistory} from './app/history';
@@ -37,14 +38,16 @@ if (process.env.NODE_ENV === 'production') {
 		Metadata,
 		Artwork,
 		SongHistory,
-		ContactForm
+		ContactForm,
+		ErrorDialog
 	],
 	entryComponents: [
 		Shell,
 		Player,
 		Metadata,
 		Artwork,
-		ContactForm
+		ContactForm,
+		ErrorDialog
 	],
 	bootstrap: [
 		Insanity,

src/public/index.html.ejs

@@ -16,7 +16,7 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 		<meta name="apple-mobile-web-app-capable" content="yes">
-		<meta http-equiv="Content-Security-Policy" content="default-src * data: blob:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval' blob:; media-src * blob: data:; connect-src ws://webapi.insanityradio.com wss://webapi.insanityradio.com http://localhost:8080 ws://localhost:8080 http://stream.cor.insanityradio.com https://stream.cor.insanityradio.com https://scdn.insanityradio.com http://scdn.insanityradio.com">
+		<meta http-equiv="Content-Security-Policy" content="default-src * data: blob:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval' blob:; media-src * blob: data:; connect-src ws://webapi.insanityradio.com http://webapi.insanityradio.com wss://webapi.insanityradio.com https://webapi.insanityradio.com http://localhost:8080 ws://localhost:8080 http://stream.cor.insanityradio.com https://stream.cor.insanityradio.com https://scdn.insanityradio.com https://scdnc.insanityradio.com http://scdn.insanityradio.com">
 
 		<script type="text/javascript">
 

www/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html> <html> <head> <title>Listen | Insanity Radio 103.2FM</title> <meta property="og:title" content="Listen to Insanity"> <meta property="og:type" content="music.radio_station"> <meta property="og:music:creator" content="Insanity Radio 103.2FM"> <meta property="og:image" content="https://insanityradio.com/res/og_listen.png"> <meta property="og:image:height" content="768"> <meta property="og:site_name" content="Insanity Radio 103.2FM"> <meta property="og:url" content="http://insanityradio.com/listen/"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta http-equiv="Content-Security-Policy" content="default-src * data: blob:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval' blob:; media-src * blob: data:; connect-src ws://webapi.insanityradio.com wss://webapi.insanityradio.com http://localhost:8080 ws://localhost:8080 http://stream.cor.insanityradio.com https://stream.cor.insanityradio.com https://scdn.insanityradio.com http://scdn.insanityradio.com"> <script type="text/javascript"> // Not supported on any version of IE currently. Fall back to classic
+<!DOCTYPE html> <html> <head> <title>Listen | Insanity Radio 103.2FM</title> <meta property="og:title" content="Listen to Insanity"> <meta property="og:type" content="music.radio_station"> <meta property="og:music:creator" content="Insanity Radio 103.2FM"> <meta property="og:image" content="https://insanityradio.com/res/og_listen.png"> <meta property="og:image:height" content="768"> <meta property="og:site_name" content="Insanity Radio 103.2FM"> <meta property="og:url" content="http://insanityradio.com/listen/"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta http-equiv="Content-Security-Policy" content="default-src * data: blob:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval' blob:; media-src * blob: data:; connect-src ws://webapi.insanityradio.com http://webapi.insanityradio.com wss://webapi.insanityradio.com https://webapi.insanityradio.com http://localhost:8080 ws://localhost:8080 http://stream.cor.insanityradio.com https://stream.cor.insanityradio.com https://scdn.insanityradio.com https://scdnc.insanityradio.com http://scdn.insanityradio.com"> <script type="text/javascript"> // Not supported on any version of IE currently. Fall back to classic
 			if(navigator.userAgent.indexOf("Trident") > -1 || navigator.userAgent.indexOf("MSIE") > -1) {
 				location.href = '/listen/classic/';
 			} </script> <script type="text/javascript" src="components/loader.js"></script> <link rel="stylesheet" type="text/css" href="components/loader.css"> <link href="app.css" rel="stylesheet"></head> <body> <app></app> <script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="app.bundle.js"></script></body> </html>