Commits

Mathias Panzenböck  committed 6943e50

rate limit scroll update, put related albums on extra page

  • Participants
  • Parent commits 1a74aa4

Comments (0)

Files changed (3)

File javascripts/magnatune.js

 	};
 }
 
+function rateLimited (f, wait) {
+	var timer = null;
+	var args = null;
+	var self = null;
+	var repeated = false;
+
+	if (wait === undefined) {
+		wait = 150;
+	}
+
+	function callback () {
+		timer = null;
+		try {
+			if (repeated) {
+				f.apply(self, args);
+			}
+		}
+		finally {
+			repeated = false;
+		}
+	}
+
+	return function () {
+		self = this;
+		args = arguments;
+		if (timer === null) {
+			f.apply(self, args);
+			timer = setTimeout(callback, wait);
+		}
+		else {
+			repeated = true;
+		}
+	};
+}
+
 function loadVisibleImages (scroller) {
 	var pos = scroller.offset();
 	var startpos = pos.top - 150;
 				$('#embed_large').is(':checked'),
 				$('#embed_autoplay').is(':checked')));
 		},
-		_also_shown: true,
-		alsoVisible: function () {
-			return this._also_shown;
-		},
-		toggleAlso: function () {
-			this.setAlsoVisible(!this._also_shown);
-		},
-		setAlsoVisible: function (also_visible) {
-			this._also_shown = also_visible;
-			var also = $('#info-content .also-wrapper');
-			if (also.length > 0) {
-				if (this._also_shown) {
-					also.stop().animate({width:'230px'},function () { $('#also-hide').stop().fadeIn('fast'); });
-					$('#also-show').stop().fadeOut('fast');
-				}
-				else {
-					also.stop().animate({width:'0px'}, function () { $('#also-show').stop().fadeIn('fast'); });
-					$('#also-hide').stop().fadeOut('fast');
-				}
-			}
-		},
 		visible: function () {
 			return $('#info').is(':visible');
 		},
 		},
 		_async_page: null,
 		load: function (hash,opts) {
-			var m = /^#?\/([^\/]+)(?:\/(.*))?/.exec(hash);
-			
-			if (!m) return false;
+			var stripped = hash.replace(/^#/,'');
+
+			if (!/^\//.test(stripped)) return false;
+
+			var path = stripped.replace(/^\/+/,'').replace(/\/+$/,'').split(/\/+/).map(decodeURIComponent);
 
 			if (!opts) opts = {};
-			var page = m[1];
-			if (typeof(m[2]) !== "undefined") {
-				opts.id = decodeURIComponent(m[2]);
+			opts.path = path;
+			var page = path[0];
+			if (path.length > 1) {
+				opts.id = path[1];
+				if (path.length > 2) {
+					page += '/'+path.slice(2).join('/');
+				}
 			}
 
 			if (this._async_page) {
 					tag('button',{'class':'index',onclick:'Magnatune.Collection.load();'},'Retry'));
 				Magnatune.Info.update('#/about',[],page,false);
 			},
+			'': function (opts) {
+				return this.about(opts);
+			},
 			about: function (opts) {
 				var page = $("#description").clone().removeAttr("id");
 				var about_float = page.find(".about-float");
 				Magnatune.Info.update(hash,breadcrumbs,page,opts.keeptab);
 				page = null;
 			},
+			'album/related': function (opts) {
+				var id = opts.id||'';
+				var path = 'album/'+encodeURIComponent(id);
+				var hash = '#/'+path+'/related';
+				var album = Magnatune.Collection.Albums[id];
+				var breadcrumbs = [
+					album ?
+					{href: '#/artist/'+encodeURIComponent(album.artist.artist), text: album.artist.artist} :
+					{text: 'Unknown Artist'},
+					{href: '#/'+path, text: id},
+					{href: hash, text: 'Related Albums'}];
+
+				return Magnatune.Collection.request({
+					url: '/api/'+path,
+					success: function (data) {
+						if (!data.body) {
+							Magnatune.Info.pageNotFound(
+								hash,
+								breadcrumbs,
+								tag('p','Album \u00bb'+id+'\u00ab was not found.'),
+								opts.keeptab);
+							return;
+						}
+
+						var also = [];
+						for (var i = 0; i < data.body.also.length; ++ i) {
+							also.push(Magnatune.Collection.Albums[data.body.also[i]]);
+						}
+
+						var page = tag('div',{'class':'also'},
+							tag('h2',tag('a',{
+								href: 'http://magnatune.com/artists/albums/'+data.body.sku+'/recommended',
+								target: '_blank'},'Related Albums')),
+							also.length === 0 ?
+							tag('p',{'class':'empty'},'No related albums.') :
+							Magnatune.Info._albumsList(also));
+
+						Magnatune.Info.update(hash,breadcrumbs,page,opts.keeptab);
+					},
+					error: function (request, textStatus, errorThrown) {
+						if (textStatus === "abort") return;
+						Magnatune.Info.ajaxError(
+							hash,
+							breadcrumbs,
+							textStatus, errorThrown,
+							tag('p','Error retrieving information of album \u00bb'+id+'\u00ab from server.'),
+							opts.keeptab);
+					}
+				});
+			},
 			album: function (opts) {
 				var id = opts.id||'';
 				var path = 'album/'+encodeURIComponent(id);
 							genres.append(tag('li', i === 0 ? {'class':'first'} : null,
 								tag('a', {href:'#/genre/'+encodeURIComponent(genre)}, genre)));
 						}
-						var also = [];
-						for (var i = 0; i < data.body.also.length; ++ i) {
-							also.push(Magnatune.Collection.Albums[data.body.also[i]]);
-						}
 						var launchdate = new Date();
 						launchdate.setTime(data.body.launchdate * 1000);
 						var sku = data.body.sku;
 							cover_file = '/cover_300.jpg';
 							cover_class = 'cover huge';
 						}
-						var also_shown = Magnatune.Info._also_shown;
 						var magnatune_album_url = 'http://magnatune.com/artists/albums/'+sku+'/';
 						var page = tag('div',{'class':authenticated ? 'album authenticated' : 'album'},
 							tag('h2', tag('a', {'class':'albumname',
 								album.albumname)),
 							tag('div',{'class':'launchdate'}, launchdate.toLocaleDateString()),
 							genres,
-							also.length === 0 ? null :
-							tag('div',{'class':'also-wrapper',style:{width:also_shown ? '230px' : '0px'}},
-								tag('div',{'class':'also'},
-									tag('h3','Related Albums'),
-									//Magnatune.Info._albumsTable(also)
-									Magnatune.Info._albumsList(also)
-									)),
-							also.length === 0 ? null :
-							tag('a',{onclick:'Magnatune.Info.toggleAlso();',draggable:'false','class':'also-toggle'},
-								tag('span',{id:'also-show',style:{display:also_shown ? 'none' : 'inline'}},'Related Albums'),
-								tag('span',{id:'also-hide',style:{display:also_shown ? 'inline' : 'none'}},'Hide')),
 							tag('div',{'class':'actions'},
 								authenticated ? null : tag('a',{
 									'class':'buy button',
 									onclick:'Magnatune.Playlist.enqueue($(this).parent().parent().find(".tracklist tbody tr").map(function () { return $(this).dataset(); }), undefined, true);'},
 									'Enqueue Album'),
 								tag('button', {id:'embed-button',onclick:'Magnatune.Info.toggleEmbed('+embed_args+');'},
-									'</> Embed')),
+									'</> Embed'),
+								data.body.also.length === 0 ? null :
+								tag('a',{'class':'related',href:hash+'/related'},'Related Albums')),
 							tag('div',{'id':'embed-container','style':'display:none;'},
 								tag('table',
 									tag('tbody',
 			}
 			localStorage.setItem('collection.changed',Magnatune.Collection.Changed);
 			localStorage.setItem('info.hash',Magnatune.Info.hash()||'#/about');
-			localStorage.setItem('info.also.visible',String(Magnatune.Info.alsoVisible()));
 			localStorage.setItem('playlist.songs',JSON.stringify(Magnatune.Playlist.songs()));
 			localStorage.setItem('playlist.current',String(Magnatune.Playlist.currentIndex()));
 			localStorage.setItem('playlist.visible',String(Magnatune.Playlist.visible()));
 	load: function () {
 		var remember, username = '', password = '', hash, songs, current, member,
 		    volume, playerVisible, navigationVisible, playlistVisible, order, mode,
-			notifications, alsoVisible, style;
+			notifications, style;
 		if (Magnatune.BrowserFeatures.LocalStorage) {
 			remember = getBoolean('login.remember');
 			if (remember) {
 			order = localStorage.getItem('navigation.order') || 'name';
 			mode = localStorage.getItem('navigation.mode') || 'genre/artist/album';
 			notifications = getBoolean('notifications.enabled');
-			alsoVisible = getBoolean('info.also.visible');
 			style = localStorage.getItem('style');
 		}
 		else {
 			playlistVisible = false;
 			order = 'name';
 			mode = 'genre/artist/album';
-			alsoVisible = true;
 		}
 
 		if (remember !== null) {
 			Magnatune.Navigation.hide(true);
 		}
 
-		if (alsoVisible !== null) {
-			Magnatune.Info.setAlsoVisible(alsoVisible);
-		}
-
 		if (notifications) {
 			Magnatune._request_notification_permissions();
 		}
 		$('#import-button').hide();
 	}
 
-	$('#tree').on('scroll',Magnatune.Navigation.loadVisibleImages);
-	$('#info-content').on('scroll',Magnatune.Info.loadVisibleImages);
+	$('#tree').on('scroll',rateLimited(Magnatune.Navigation.loadVisibleImages));
+	$('#info-content').on('scroll',rateLimited(Magnatune.Info.loadVisibleImages));
 	$(window).on('resize',function (event) {
 		Magnatune.Info.loadVisibleImages();
 		// redraw progress (not supported by old IE)
 	top: 65px;
 }
 
-.also-wrapper {
-	float: right;
-	width: 230px;
-	overflow: hidden;
-}
-
-.also {
-	width: 210px;
-	padding: 0 0 5px 20px;
-}
-
-.also h3 {
-	margin: 0 0 5px 0;
-	position: relative;
-}
-
-.also-toggle {
-	position: absolute;
-	right: 5px;
-	padding-top: 2px;
-}
-
 .artist .unfollow,
 .artist .follow {
 	font-size: 13px;
 	margin-bottom: 5px;
 }
 
-a.also-toggle,
+a.related {
+	margin-left: 2px;
+}
+
 .expander,
 .slide-expand button,
 .launchdate,
 	text-align: center;
 }
 
-.also ul.albums.big li {
-	display: block;
+.big-album img.cover {
+	vertical-align: top;
+	-webkit-transition: -webkit-filter 250ms, box-shadow 250ms;
+	-moz-transition: filter 250ms, box-shadow 250ms;
+	transition: filter 250ms, box-shadow 250ms;
 }
 
-.big-album img.cover {
-	vertical-align: top;
+.big-album a:hover img.cover {
+	-webkit-filter: brightness(1.2) contrast(1.1);
+	filter: brightness(1.2) contrast(1.1);
+	box-shadow: 0 0 20px #909090;
 }
 
 .big-album .cover-wrapper {

File style_bright.css

 	background-color: #D91D1D;
 }
 
+.big-album a:hover img.cover {
+	box-shadow: 0 0 20px #6EA7D9;
+}
+
 .expander,
 .slide-expand button,
 .launchdate,