Skip to content
Browse files

Copy/layout/organisation tweaks

  • Loading branch information...
1 parent 63877b4 commit bdb8f72340dee14cc1ad3a3629a43bd976a0f023 @jwheare committed Dec 21, 2009
Showing with 77 additions and 44 deletions.
  1. +45 −25 public/index.html
  2. +5 −4 public/playlick.css
  3. +1 −0 src/js/importers/url.js
  4. +13 −11 src/js/main.js
  5. +13 −4 src/js/main/handlers.js
View
70 public/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>Playlick</title>
- <meta name="description" content="Create playlists, and collect your favourites from around the web">
+ <meta name="description" content="Create, collect and curate your favourite playlists from around the web">
<meta name="keywords" content="playlist, music, album, last.fm, podcast, playlick, playdar, github">
<link rel="stylesheet" href="/playlick.css">
</head>
@@ -26,7 +26,7 @@ <h1 id="title">
<!-- <img src="/logo2.png" width="31" height="33" class="logo2"> -->
Play<span>lick</span>
</a>
- <small>Create playlists, and collect your favourites from around the web</small>
+ <small>Create, collect and curate your favourite playlists from around the web</small>
</h1>
<div id="content">
@@ -45,12 +45,12 @@ <h1 id="albumsTitle">Your favourite albums</h1>
<ul class="playlists" id="albums"></ul>
</div>
- <h1 id="syncedTitle">Your synced playlists</h1>
+ <h1 id="syncedTitle">Synchronised Playlists</h1>
<div class="sidebar_list">
<ul class="playlists" id="synced"></ul>
</div>
- <h1 id="subscriptionsTitle">Your subscriptions</h1>
+ <h1 id="subscriptionsTitle">Podcasts</h1>
<div class="sidebar_list">
<ul class="playlists" id="subscriptions"></ul>
</div>
@@ -125,8 +125,12 @@ <h1 id="createPlaylist">Create a new playlist</h1>
</div>
<div id="mainImporters">
+ <h1>Add an Album to your collection</h1>
+
<form id="album_form">
- <h1><label for="album_import_input">Add an Album to your collection</label></h1>
+ <p class="label">
+ <label for="album_import_input">Search for an Album from Last.fm</label>
+ </p>
<p>
<input type="text" name="album" id="album_import_input" class="importer_input" autocomplete="off" placeholder="Search for an album…">
@@ -139,6 +143,20 @@ <h1 id="createPlaylist">Create a new playlist</h1>
<p class="messages" id="album_error"></p>
</form>
+ <form id="spotify_form">
+ <p class="label">
+ <label for="spotify_input">Use a Spotify URL</label>
+ </p>
+ <p>
+ <img src="spotify_icon.gif" width="16" height="16" class="favicon">
+ <input type="text" name="url" id="spotify_input" class="importer_input" placeholder="Paste a URL…">
+ <input type="submit" id="url_button" value="Go">
+ </p>
+ <p class="messages" id="spotify_loading"><img src="/track_scanning.gif" width="16" height="16"> Loading…</p>
+ <p class="messages" id="spotify_done">Done! Imported “<span id="spotify_title"></span>”</p>
+ <p class="messages" id="spotify_error"></p>
+ </form>
+
<form id="lastfm_battle_form">
@@ -159,11 +177,13 @@ <h1 id="createPlaylist">Create a new playlist</h1>
<p class="messages" id="generate_error"></p>
</form>
- <h1>Import playlists from elsewhere</h1>
+
+
+ <h1>Synchronise playlists from the web</h1>
<form id="lastfm_form">
<p class="label">
- <label for="lastfm_input">Import your Last.fm playlists and Loved Tracks</label>
+ <label for="lastfm_input">Sync your Last.fm playlists and Loved Tracks</label>
</p>
<p>
<img src="lastfm_icon.gif" width="16" height="16" class="favicon">
@@ -175,7 +195,6 @@ <h1 id="createPlaylist">Create a new playlist</h1>
<p class="messages" id="lastfm_import_error"></p>
<p class="messages" id="lastfm_imported">Done!</p>
</form>
-
<form id="lastfm_playlists_form">
<p class="messages" id="lastfm_done">
<small id="lastfm_playlists_count"></small>
@@ -194,32 +213,33 @@ <h1 id="createPlaylist">Create a new playlist</h1>
<input type="submit" value="Import Playlists" class="submit">
</form>
- <form id="spotify_form">
+ <form id="xspf_form">
<p class="label">
- <label for="spotify_input">Add a Spotify Track/Album by URL</label>
+ <label for="xspf_input">Sync with an XSPF file</label>
</p>
<p>
- <img src="spotify_icon.gif" width="16" height="16" class="favicon">
- <input type="text" name="url" id="spotify_input" class="importer_input" placeholder="Paste a URL…">
- <input type="submit" id="url_button" value="Go">
+ <img src="podcast_icon.gif" width="16" height="16" class="favicon">
+ <input type="text" name="url" id="xspf_input" class="importer_input" placeholder="Paste an XSPF URL…">
+ <input type="submit" id="xspf_button" value="Go">
</p>
- <p class="messages" id="spotify_loading"><img src="/track_scanning.gif" width="16" height="16"> Loading…</p>
- <p class="messages" id="spotify_done">Done! Imported “<span id="spotify_title"></span>”</p>
- <p class="messages" id="spotify_error"></p>
+ <p class="messages" id="xspf_loading"><img src="/track_scanning.gif" width="16" height="16"> Loading…</p>
+ <p class="messages" id="xspf_done">Done! Imported “<span id="xspf_title"></span>” (<span id="xspf_count"></span>)</p>
+ <p class="messages" id="xspf_error"></p>
</form>
- <form id="url_form">
- <p class="label">
- <label for="url_input">Import an XSPF or Podcast</label>
- </p>
+
+
+ <h1><label for="podcast_input">Subscribe to a Podcast</label></h1>
+
+ <form id="podcast_form">
<p>
<img src="podcast_icon.gif" width="16" height="16" class="favicon">
- <input type="text" name="url" id="url_input" class="importer_input" placeholder="Paste a URL…">
- <input type="submit" id="url_button" value="Go">
+ <input type="text" name="url" id="podcast_input" class="importer_input" placeholder="Paste a Podcast URL…">
+ <input type="submit" id="podcast_button" value="Go">
</p>
- <p class="messages" id="url_loading"><img src="/track_scanning.gif" width="16" height="16"> Loading…</p>
- <p class="messages" id="url_done">Done! Imported “<span id="url_title"></span>” (<span id="url_count"></span>)</p>
- <p class="messages" id="url_error"></p>
+ <p class="messages" id="podcast_loading"><img src="/track_scanning.gif" width="16" height="16"> Loading…</p>
+ <p class="messages" id="podcast_done">Done! Imported “<span id="podcast_title"></span>” (<span id="podcast_count"></span>)</p>
+ <p class="messages" id="podcast_error"></p>
</form>
</div>
</div>
View
9 public/playlick.css
@@ -285,16 +285,19 @@ ul#importers li input {
margin-right: 5px;
}
input.importer_input {
- width: 200px;
+ width: 400px;
+ margin-right: 10px;
}
/* Last.fm battle */
form#lastfm_battle_form input#lastfm_battle_input_you {
+ width: 175px;
margin: 0 10px 0 0;
}
form#lastfm_battle_form input#lastfm_battle_input_they {
+ width: 175px;
margin: 0 10px;
}
@@ -819,10 +822,8 @@ p#shortcuts {
**/
.ac_results {
- width: 253px !important;
- padding: 0;
+ min-width: 253px;
border: 1px solid #6ea31e;
- border-top: 0;
overflow: hidden;
z-index: 99999;
background: #fff;
View
1 src/js/importers/url.js
@@ -72,6 +72,7 @@ Url.url = function (source, callback, exceptionHandler) {
}
};
if (jspf) {
+ metadata.subscription.synced = true;
playlist = IMPORTERS.createPlaylistFromJspf(
source,
jspf,
View
24 src/js/main.js
@@ -23,9 +23,11 @@ var PLAYLICK = {
checkUrlHash: function () {
var hash_parts = UTIL.getHashParts();
- var url = hash_parts.url || hash_parts.xspf || hash_parts.podcast;
- if (url) {
- PLAYLICK.fetchUrl(url);
+ if (hash_parts.xspf) {
+ PLAYLICK.fetchUrl(hash_parts.xspf, 'xspf');
+ }
+ if (hash_parts.podcast) {
+ PLAYLICK.fetchUrl(hash_parts.podcast, 'podcast');
}
if (hash_parts.lastfm_playlists) {
PLAYLICK.fetchLastFmUserPlaylists(hash_parts.lastfm_playlists);
@@ -71,32 +73,32 @@ var PLAYLICK = {
$('#' + type + '_error').empty();
},
// Import a playlist from an XSPF or Podcast URL
- fetchUrl: function (url) {
- PLAYLICK.importSetup('url');
+ fetchUrl: function (url, type) {
+ PLAYLICK.importSetup(type);
IMPORTERS.Url.url(
url,
function callback (playlist) {
// Update messages
$('p.messages').hide();
- $('#url_title').text(playlist.toString());
- $('#url_count').text(playlist.tracks.length);
- $('#url_done').show();
+ $('#' + type + '_title').text(playlist.toString());
+ $('#' + type + '_count').text(playlist.tracks.length);
+ $('#' + type + '_done').show();
// Register playlist
CONTROLLERS.Playlist.register(playlist);
// Load playlist
CONTROLLERS.Playlist.load(playlist);
},
function exceptionHandler (exception) {
// Reset input
- $('#url_input').val(url);
+ $('#' + type + '_input').val(url);
// Show error message
$('p.messages').hide();
var escapedUrl = $('<b>').text('URL: ' + url);
var errorMessage = $('<p>').text(exception.message);
errorMessage.append('<br>')
.append(escapedUrl);
- $('#url_error').html(errorMessage.html());
- $('#url_error').show();
+ $('#' + type + '_error').html(errorMessage.html());
+ $('#' + type + '_error').show();
}
);
},
View
17 src/js/main/handlers.js
@@ -291,14 +291,23 @@ $('#album_form').submit(function (e) {
* Spotify Add album autocomplete
**/
-// XSPF/Podcast URL import form
-$('#url_form').submit(function (e) {
+// XSPF sync form
+$('#xspf_form').submit(function (e) {
e.preventDefault();
// Parse the form
var params = UTIL.serializeForm(this);
// Clear the input and refocus
- $('#url_input').val('').focus().select();
- PLAYLICK.fetchUrl(params.url);
+ $('#xspf_input').val('').focus().select();
+ PLAYLICK.fetchUrl(params.url, 'xspf');
+});
+// Podcast subscribe form
+$('#podcast_form').submit(function (e) {
+ e.preventDefault();
+ // Parse the form
+ var params = UTIL.serializeForm(this);
+ // Clear the input and refocus
+ $('#podcast_input').val('').focus().select();
+ PLAYLICK.fetchUrl(params.url, 'podcast');
});
// Spotify URL import form

0 comments on commit bdb8f72

Please sign in to comment.
Something went wrong with that request. Please try again.