Implement ContentListComponent

and detect duplicates. Resolves #216

src/app/app.js

@@ -128,6 +128,7 @@ define(function( require ) {
 		HoursFromNowHelper: require( "helpers/HoursFromNowHelper" ),
 		TimeFromNowHelper: require( "helpers/TimeFromNowHelper" ),
 		GetParamHelper: require( "helpers/GetParamHelper" ),
+		HasOwnPropertyHelper: require( "helpers/HasOwnPropertyHelper" ),
 
 
 		// Services
@@ -188,6 +189,7 @@ define(function( require ) {
 		ModalNewreleaseComponent: require( "components/modal/ModalNewreleaseComponent" ),
 		ModalQuitComponent: require( "components/modal/ModalQuitComponent" ),
 
+		ContentListComponent: require( "components/list/ContentListComponent" ),
 		ChannelItemComponent: require( "components/list/ChannelItemComponent" ),
 		GameItemComponent: require( "components/list/GameItemComponent" ),
 		HeadlineTotalsComponent: require( "components/list/HeadlineTotalsComponent" ),

src/app/components/list/ContentListComponent.js

@@ -0,0 +1,56 @@
+define([
+	"Ember",
+	"hbs!templates/components/list/ContentListComponent"
+], function(
+	Ember,
+	layout
+) {
+
+	var get = Ember.get;
+	var set = Ember.set;
+	var setProperties = Ember.setProperties;
+
+
+	return Ember.Component.extend({
+		layout: layout,
+
+		tagName: "",
+		"class": "",
+
+		content   : null,
+		duplicates: null,
+
+		length : 0,
+		initial: 0,
+
+
+		init: function() {
+			this._super.apply( this, arguments );
+
+			var length = get( this, "content.length" );
+			setProperties( this, {
+				initial   : length,
+				length    : length,
+				duplicates: {}
+			});
+		},
+
+
+		_contentLengthObserver: function() {
+			var duplicates = get( this, "duplicates" );
+			var content    = get( this, "content" );
+			var index      = get( this, "length" );
+			var length     = get( content, "length" );
+			var diff       = -length + index - 1;
+
+			for ( ; index < length; index++ ) {
+				if ( content.lastIndexOf( content[ index ], diff ) !== -1 ) {
+					duplicates[ index ] = true;
+				}
+			}
+
+			set( this, "length", length );
+		}.observes( "content.length" )
+	});
+
+});

src/app/components/list/ListItemComponent.js

@@ -4,9 +4,13 @@ define( [ "Ember" ], function( Ember ) {
 		settings: Ember.inject.service(),
 
 		tagName: "li",
-		classNameBindings: [ "isNewItem:newItem" ],
+		classNameBindings: [
+			"isNewItem:newItem",
+			"isDuplicateItem:duplicateItem"
+		],
 
-		isNewItem: false
+		isNewItem: false,
+		isDuplicateItem: false
 	});
 
 });

src/app/components/list/StreamItemComponent.js

@@ -39,7 +39,7 @@ define([
 		locked  : false,
 		timer   : null,
 
-		showGame: false,
+		showGame : true,
 		_showGame: and( "showGame", "channel.game" ),
 
 		infoGame : equal( "settings.stream_info", 0 ),

src/app/helpers/HasOwnPropertyHelper.js

@@ -0,0 +1,7 @@
+define( [ "Ember" ], function( Ember ) {
+
+	return Ember.Helper.helper(function( params ) {
+		return params[0].hasOwnProperty( params[1] );
+	});
+
+});

src/styles/components/GameItemComponent.less

@@ -13,6 +13,14 @@
 	.dynamic-elems-per-row( 4, @content-width, 8%, @additional-width );
 	.block-aspect-ratio( ( 272 / 380 ) );
 
+	&.duplicateItem {
+		transition: opacity .333s ease-out;
+
+		&:not(:hover) {
+			opacity: .25;
+		}
+	}
+
 	> header,
 	> footer {
 		position: absolute;

src/styles/components/StreamItemComponent.less

@@ -9,6 +9,7 @@
 	.dynamic-elems-per-row( 3, @content-width, 8%, @additional-width );
 	.stream-hover( @duration: @duration );
 
+	&.duplicateItem,
 	&.faded {
 		&:not(:hover):not(.expanded) > * {
 			opacity: .25;

src/templates/Channels.hbs

@@ -7,14 +7,9 @@
 {{quick-bar-homepage}}
 {{/quick-bar}}
 </header>
-{{#if model.length}}
-<ul class="content-list">
-{{#each model as |stream index|}}
-{{stream-item content=stream isNewItem=(is-gte index initialFetchSize) showGame=true}}
-{{/each}}
-</ul>
-{{infinite-scroll}}
+{{#content-list content=model as |item isNewItem isDuplicateItem|}}
+{{stream-item content=item isNewItem=isNewItem isDuplicateItem=isDuplicateItem}}
 {{else}}
 <p>The returned list of top channels is empty.</p>
-{{/if}}
+{{/content-list}}
 </main>

src/templates/components/list/ContentListComponent.hbs

@@ -0,0 +1,12 @@
+{{#if content.length}}
+<ul class="content-list {{class}}">
+{{#each content as |item index|}}
+{{yield item (is-gte index initial) (has-own-property duplicates index)}}
+{{/each}}
+</ul>
+{{infinite-scroll targetObject=targetObject}}
+{{else if (hasBlock "inverse")}}
+<div class="content-empty">
+{{yield to="inverse"}}
+</div>
+{{/if}}

src/templates/games/GamesGame.hbs

@@ -7,14 +7,9 @@
 {{quick-bar-homepage}}
 {{/quick-bar}}
 </header>
-{{#if model.length}}
-<ul class="content-list">
-{{#each model as |stream index|}}
-{{stream-item content=stream isNewItem=(is-gte index initialFetchSize)}}
-{{/each}}
-</ul>
-{{infinite-scroll}}
+{{#content-list content=model as |item isNewItem isDuplicateItem|}}
+{{stream-item content=item isNewItem=isNewItem isDuplicateItem=isDuplicateItem showGame=false}}
 {{else}}
 <p>The returned list of streams of this game is empty.</p>
-{{/if}}
+{{/content-list}}
 </main>

src/templates/games/GamesIndex.hbs

@@ -7,14 +7,9 @@
 {{quick-bar-homepage}}
 {{/quick-bar}}
 </header>
-{{#if model.length}}
-<ul class="content-list">
-{{#each model as |game index|}}
-{{game-item content=game isNewItem=(is-gte index initialFetchSize)}}
-{{/each}}
-</ul>
-{{infinite-scroll}}
+{{#content-list content=model as |item isNewItem isDuplicateItem|}}
+{{game-item content=item isNewItem=isNewItem isDuplicateItem=isDuplicateItem}}
 {{else}}
 <p>The returned list of top games is empty.</p>
-{{/if}}
+{{/content-list}}
 </main>

src/templates/user/UserFollowedChannels.hbs

@@ -40,19 +40,12 @@
 {{quick-bar-homepage}}
 {{/quick-bar}}
 </header>
-{{#if content.length}}
-<ul class="content-list">
-{{#each model as |channel index|}}
-{{channel-item content=channel isNewItem=(is-gte index initialFetchSize)}}
-{{/each}}
-</ul>
-{{infinite-scroll}}
+{{#content-list content=model as |item isNewItem isDuplicateItem|}}
+{{channel-item content=item isNewItem=isNewItem isDuplicateItem=isDuplicateItem}}
 {{else}}
-<div class="content-empty">
 <p>The returned list of followed channels is empty.</p>
 <ul class="fa-ul list-empty">
 <li>{{#link-to "channels"}}<i class="fa fa-li fa-caret-right"></i>Watch top channels{{/link-to}}</li>
 </ul>
-</div>
-{{/if}}
+{{/content-list}}
 </main>

src/templates/user/UserFollowedGames.hbs

@@ -6,19 +6,12 @@
 {{quick-bar-homepage}}
 {{/quick-bar}}
 </header>
-{{#if content.length}}
-<ul class="content-list">
-{{#each model as |game index|}}
-{{game-item content=game isNewItem=(is-gte index initialFetchSize)}}
-{{/each}}
-</ul>
-{{infinite-scroll}}
+{{#content-list content=model as |item isNewItem isDuplicateItem|}}
+{{game-item content=item isNewItem=isNewItem isDuplicateItem=isDuplicateItem}}
 {{else}}
-<div class="content-empty">
 <p>The returned list of followed games is empty.</p>
 <ul class="fa-ul list-empty">
 <li>{{#link-to "games"}}<i class="fa fa-li fa-caret-right"></i>Watch top games{{/link-to}}</li>
 </ul>
-</div>
-{{/if}}
+{{/content-list}}
 </main>

src/templates/user/UserFollowedStreams.hbs

@@ -7,20 +7,13 @@
 {{quick-bar-homepage}}
 {{/quick-bar}}
 </header>
-{{#if content.length}}
-<ul class="content-list">
-{{#each model as |stream index|}}
-{{stream-item content=stream isNewItem=(is-gte index initialFetchSize) showGame=true faded=false}}
-{{/each}}
-</ul>
-{{infinite-scroll}}
+{{#content-list content=model as |item isNewItem isDuplicateItem|}}
+{{stream-item content=item isNewItem=isNewItem isDuplicateItem=isDuplicateItem faded=false}}
 {{else}}
-<div class="content-empty">
 <p>The returned list of followed streams is empty.</p>
 <ul class="fa-ul list-empty">
 <li>{{#link-to "featured"}}<i class="fa fa-li fa-caret-right"></i>Watch currently featured streams{{/link-to}}</li>
 <li>{{#link-to "channels"}}<i class="fa fa-li fa-caret-right"></i>Watch top channels{{/link-to}}</li>
 </ul>
-</div>
-{{/if}}
+{{/content-list}}
 </main>

src/templates/user/UserHostedStreams.hbs

@@ -7,20 +7,13 @@
 {{quick-bar-homepage}}
 {{/quick-bar}}
 </header>
-{{#if content.length}}
-<ul class="content-list">
-{{#each model as |host index|}}
-{{stream-item content=host.target host=host isNewItem=(is-gte index initialFetchSize) showGame=true}}
-{{/each}}
-</ul>
-{{infinite-scroll}}
+{{#content-list content=model as |item isNewItem isDuplicateItem|}}
+{{stream-item host=item content=item.target isNewItem=isNewItem isDuplicateItem=isDuplicateItem}}
 {{else}}
-<div class="content-empty">
 <p>The returned list of hosted streams is empty.</p>
 <ul class="fa-ul list-empty">
 <li>{{#link-to "featured"}}<i class="fa fa-li fa-caret-right"></i>Watch currently featured streams{{/link-to}}</li>
 <li>{{#link-to "user.followedStreams"}}<i class="fa fa-li fa-caret-right"></i>Watch your followed streams{{/link-to}}</li>
 </ul>
-</div>
-{{/if}}
+{{/content-list}}
 </main>

src/templates/user/UserSubscriptions.hbs

@@ -5,17 +5,10 @@
 {{quick-bar-homepage}}
 {{/quick-bar}}
 </header>
-{{#if model.length}}
-<ul class="content-list">
-{{#each model as |subscription index|}}
-{{subscription-item content=subscription isNewItem=(is-gte index initialFetchSize)}}
-{{/each}}
-</ul>
-{{infinite-scroll}}
+{{#content-list content=model as |item isNewItem isDuplicateItem|}}
+{{subscription-item content=item isNewItem=isNewItem isDuplicateItem=isDuplicateItem}}
 {{else}}
-<div class="content-empty">
 <p>You don't have any channel subscriptions.</p>
 <p>Directly support broadcasters by subscribing to their channel.</p>
-</div>
-{{/if}}
+{{/content-list}}
 </main>