Basic HLS support

README.md

@@ -22,11 +22,14 @@ There are currently two metadata libraries. The first is plain JSON (name Insani
 
 	{
 		"nowPlaying": {
-			"song": "They Can't Take That Away From Me",
-			"artist": "Fred Astaire",
+			"song": "Mr. Brightside",
+			"artist": "The Killers",
 			"external_id": 24716739,
 			"nerve_id": 7084,
-			"album_art": null
+			"album_art": "https://i.scdn.co/image/ac68a9e4a867ec3ce8249cd90a2d7c73755fb487" | null,
+			"external_urls": {
+				"spotify": "https://open.spotify.com/track/3n3Ppam7vgaVa1iaRUc9Lp"
+			} | null
 		},
 		"currentShow": {
 			"dayOfTheWeek": "friday",
@@ -36,5 +39,7 @@ There are currently two metadata libraries. The first is plain JSON (name Insani
 		"now": "2017-04-28T00:45:14+0100"
 	}
 
+`external_id` and `nerve_id` can be empty or missing - they're Insanity-specific metadata. 
+
 The second is InsanityStreamAPI. That uses Nchan (an NGINX module) that can push realtime updates to thousands of clients at a time. Individual data chunks are the same format as above. 
 

src/app/artwork.css

@@ -5,7 +5,6 @@
 	max-height: calc(100vh - 235px);
 	overflow: hidden;
 	text-align: center;
-	width: 100vw;
 }
 img {
 	box-shadow: 0px 0px 3px #000;

src/app/player.ts

@@ -15,13 +15,17 @@ export class Player {
 
 	constructor (private change:ChangeDetectorRef) {
 
-		this.player = new Radio.Icecast({
-			path: 'https://insanityradio.com/listen/get_current_stream.mp3'
+		this.player = Radio.Detector.getBestPlayer({
+			/* hls: {
+				manifest: 'http://10.32.0.126/hls/aud_hi.m3u8'
+			}, */
+			icecast: {
+				path: 'https://insanityradio.com/listen/get_current_stream.mp3'
+			}
 		});
 
-		var webkit = 'WebkitAppearance' in document.documentElement.style;
 
-		this.presentationDelay = webkit ? 8000 : 5000;
+		this.presentationDelay = this.player.presentationDelay;
 
 		this.player.stateChange(() => {
 			console.log("State Change!")

src/app/radio.ts

@@ -3,14 +3,14 @@ declare var Audio:any;
 
 var NchanSubscriber = require('../NchanSubscriber.js');
 
-console.log(NchanSubscriber)
-
 export module Radio {
 
 	export abstract class Player {
 
 		protected stateChangeListeners:Array<(player:Player) => void> = [];
 
+		presentationDelay : number;
+
 		constructor (protected options:any) {}
 
 		play () {}
@@ -75,6 +75,9 @@ export module Radio {
 		constructor (options:Object) {
 			super(options);
 			this.audio = null;
+
+			var webkit = 'WebkitAppearance' in document.documentElement.style;
+			this.presentationDelay = webkit ? 8000 : 5000;
 		}
 
 		play () {
@@ -117,6 +120,77 @@ export module Radio {
 
 	}
 
+	export class VideoElement extends Player {
+
+		private audio:any;
+		private played:boolean = false;
+
+		constructor (options:Object) {
+			super(options);
+			this.audio = null;
+			this.presentationDelay = 15000;
+		}
+
+		play () {
+			var path = this.options.manifest + (this.options.manifest.indexOf("?") != -1 ? '&' : '?') + new Date().getTime();
+			this.played = false;
+
+			if(this.audio != null)
+				this.stop();
+
+			// this.audio = new Audio(path);
+			this.audio = document.createElement('video');
+			this.audio.src = path;
+			this.audio.autoPlay = true;
+			this.audio.setAttribute('playsinline', '1');
+
+			this.audio.addEventListener("playing", () => this.handleStateChange());
+			this.audio.addEventListener("pause", () => this.handleStateChange());
+			this.audio.addEventListener("stalled", () => this.handleStateChange());
+			this.audio.play();
+
+			console.log('hello!!!')
+
+		}
+
+		handleStateChange() {
+			if(this.playing)
+				this.played = true;
+
+			super.handleStateChange();
+		}
+
+		stop () {
+			this.audio.pause();
+			this.audio = null;
+		}
+
+		get playing():boolean {
+			return this.audio != null && this.audio.duration > 0 && !this.audio.paused;
+		}
+
+		get buffering():boolean {
+			return this.audio != null && (!this.played || this.audio.readyState < this.audio.HAVE_FUTURE_DATA);
+		}
+
+		toggle () {
+			this.playing ? this.stop() : this.play();
+		}
+
+	}
+
+	export class HLS extends VideoElement {
+
+		constructor (options:Object) {
+			var canPlay = document.createElement('video').canPlayType('application/vnd.apple.mpegURL');
+			if (!canPlay) {
+				throw new Error('Device does not support HLS');
+			}
+			super(options)
+		}
+
+	}
+
 	export class InsanityAPI extends Metadata {
 
 		public timer:boolean = true;
@@ -172,4 +246,33 @@ export module Radio {
 
 	}
 
+
+	export class Detector { 
+
+		static getBestPlayer (options:any) : Player {
+
+			try {
+				if ('hls' in options) {
+					return new HLS(options.hls);
+				}
+			} catch (e) {}
+
+			try {
+				if ('icecast' in options) {
+					return new Icecast(options.icecast);
+				}
+			} catch (e) {}
+
+			throw new Error('No supported player type. Browser not supported?')
+
+		}
+
+		static getBestMetadata (options:any) {
+
+			return 
+
+		}
+
+	}
+
 }

src/app/shell.css

@@ -89,7 +89,28 @@ a.share.app:hover {
 	overflow: hidden;
 }
 
+.flexbox {
+	display: flex;
+}
+
 artwork {
 	display: block;
+	flex: 1;
+}
+
+.history {
+	display: block;
+	flex: 0;
+	width: 400px;
+	min-width: 400px;
+}
 
+@media screen and (max-width: 500px) {
+	.flexbox {
+		display: block;
+	}
+	.history {
+		min-width: auto;
+		width: 100%;
+	}
 }

src/app/shell.html

@@ -17,5 +17,10 @@
 <div class="content">
 	<player #player></player>
 	<metadata #metadata [player]="player" [artwork]="artwork" [presentationDelay]="player.presentationDelay" class="row"></metadata>
-	<artwork #artwork [url]="metadata.data.nowPlaying.album_art"></artwork>
+	<div class="flexbox">
+		<artwork #artwork [url]="metadata.data.nowPlaying.album_art"></artwork>
+		<div class="history">
+			Track History
+		</div>
+	</div>
 </div>