Added featured channels to the index route

src/app/app.js

@@ -29,6 +29,7 @@ define(function( require ) {
 			ModalView: require( "views/ModalView" ),
 
 			IndexRoute: require( "routes/IndexRoute" ),
+			IndexController: require( "controllers/IndexController" ),
 			IndexView: require( "views/IndexView" ),
 
 			GamesIndexRoute: require( "routes/GamesIndexRoute" ),

src/app/controllers/IndexController.js

@@ -0,0 +1,15 @@
+define( [ "ember" ], function( Ember ) {
+
+	return Ember.ObjectController.extend({
+		stream: function() {
+			return this.get( "model.featured.0.stream" );
+		}.property( "model.featured.0.stream" ),
+
+		actions: {
+			"switchFeatured": function( stream ) {
+				this.set( "stream", stream );
+			}
+		}
+	});
+
+});

src/app/models/Featured.js

@@ -0,0 +1,10 @@
+define( [ "utils/twitch" ], function( twitch ) {
+
+	return function( limit, offset ) {
+		return twitch( "streams/featured", {
+			limit: limit,
+			offset: offset
+		});
+	}
+
+});

src/app/models/Summary.js

@@ -0,0 +1,7 @@
+define( [ "utils/twitch" ], function( twitch ) {
+
+	return function() {
+		return twitch( "streams/summary" );
+	}
+
+});

src/app/routes/IndexRoute.js

@@ -1,8 +1,26 @@
-define( [ "ember" ], function( Ember ) {
+define([
+	"ember",
+	"utils/preload",
+	"models/Summary",
+	"models/Featured"
+], function( Ember, preload, ModelSummary, ModelFeatured ) {
 
 	return Ember.Route.extend({
-		beforeModel: function() {
-			//this.transitionTo( "games" );
+		model: function() {
+			return Ember.RSVP.all([
+				ModelSummary(),
+				ModelFeatured( 5, 0 )
+			])
+				.then(function( models ) {
+					return {
+						summary: models[0],
+						featured: models[1].featured
+					};
+				})
+				.then( preload([
+					"[email protected]",
+					"[email protected][email protected]"
+				]) );
 		}
 	});
 

src/styles/content.less

@@ -142,23 +142,13 @@
 
 	&.list-item-stream {
 		.content-item-grid( 3 );
+		.stream-hover();
 		border-top-width: 0;
 		border-bottom-width: 0;
-
-		&:hover::before {
-			content: @fa-var-play-circle-o;
-			display: block;
-			position: absolute;
-			width: 100%;
-			top: 50%;
-			font: 6em/0 "FontAwesome";
-			color: rgba( 255, 255, 255, 1 );
-			text-align: center;
-			-webkit-text-stroke: .025em #000;
-		}
 	}
 }
 
+
 .description {
 	display: block;
 	color: fade( #fff, 80% );
@@ -184,3 +174,79 @@
 		}
 	}
 }
+
+.featured {
+	padding-left: .5em;
+	.clearfix();
+
+	.title, .game, .stats, .status {
+		float: right;
+		clear: right;
+		width: 45%;
+		padding-left: 1rem;
+	}
+
+	.title {
+		margin-top: 0;
+	}
+
+	.game {
+		padding-left: 2.667rem;
+
+		&::before {
+			content: @fa-var-gamepad;
+			display: inline-block;
+			width: 1.667rem;
+			margin-left: -1.667rem;
+			font: 1.2em/1.1 FontAwesome;
+		}
+	}
+
+	.stats {
+		> i:not(:first-of-type) {
+			margin-left: .5em;
+		}
+	}
+
+	.status {
+		font-size: .8em;
+	}
+
+	.preview {
+		position: relative;
+		width: 55%;
+		float: left;
+		.stream-hover();
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: auto;
+		border: .333rem solid fade( @color-twitch-grey-light, 60% );
+		cursor: pointer;
+	}
+
+	ul {
+		clear: both;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+
+		> li {
+			width: 18%;
+			float: left;
+			margin: 1em 1%;
+
+			&:first-of-type {
+				margin-left: 0;
+			}
+
+		}
+	}
+}
+
+.globalstats {
+	margin: 1em 0;
+	text-align: center;
+}

src/styles/mixins.less

@@ -32,4 +32,22 @@
 		border-width: @size @size 0;
 		border-top-color: @background-hover;
 	}
-}
+}
+
+
+.stream-hover( @content: @fa-var-play-circle-o ) {
+	cursor: pointer;
+
+	&:hover::before {
+		content: @content;
+		display: block;
+		position: absolute;
+		width: 100%;
+		top: 50%;
+		z-index: 2;
+		font: 6em/0 "FontAwesome";
+		color: rgba( 255, 255, 255, 1 );
+		text-align: center;
+		-webkit-text-stroke: .025em #000;
+	}
+}

src/templates/index.html.hbs

@@ -1 +1,16 @@
-<h2>Index</h2>
+<h2>Featured channels</h2>
+<section class="featured">
+<h3 class="title">{{stream.channel.name}}</h3>
+<div class="preview" {{action "open_livestreamer" stream}}><img {{bind-attr src=stream.preview}}></div>
+<p class="game">{{#link-to "games.game" stream.game}}{{stream.game}}{{/link-to}}</p>
+<p class="stats"><i class="fa fa-clock-o"></i> {{hours-from-now stream.channel.updated_at}} <i class="fa fa-users"></i> {{format-viewers stream.viewers}}</p>
+<p class="status">{{stream.channel.status}}</p>
+<ul>
+{{#each featured in model.featured}}
+<li {{bind-attr title="featured.channel.name"}} {{action "switchFeatured" featured.stream}}>
+<img src="{{unbound featured.image}}" title="{{unbound featured.stream.channel.name}}">
+</li>
+{{/each}}
+</ul>
+</section>
+<section class="globalstats">There are {{model.summary.viewers}} people watching {{model.summary.channels}} live streams right now!</section>