[creating playlist] closes #23, closes #22, #17

successful flow in creating a new playlist with youtube api and adding a video to a playlist
orizens · Sep 26, 2013 · 92066e1 · 92066e1
1 parent 4ae90e8
commit 92066e1
Show file tree

Hide file tree

Showing 11 changed files with 75 additions and 44 deletions.
diff --git a/css/modules.css b/css/modules.css
diff --git a/css/modules/global.less b/css/modules/global.less
@@ -50,16 +50,18 @@
 {
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
-    transition: all 1s ease;
+    transition: all .8s ease;
 }
 
-.card .face.back
+.card .front
 {
     -webkit-transform: perspective(400px) rotateY(0deg);
     transform: perspective(400px) rotateY(0deg);
+    -webkit-backface-visibility: visible;
+    backface-visibility: visible;
 }
 
-.card .front
+.card .back
 {
     -webkit-transform: perspective(400px) rotateY(-179.9deg);
     transform: perspective(400px) rotateY(-179.9deg);
@@ -76,12 +78,11 @@
     -webkit-transform: perspective(400px) rotateY(0deg);
     transform: perspective(400px) rotateY(0deg);
 }*/
-.show-description .face.back {
+.show-description .face.front {
     -webkit-transform: perspective(400px) rotateY(179.9deg);
     transform: perspective(400px) rotateY(179.9deg);
 }
-.show-description .face.front {
+.show-description .face.back {
     -webkit-transform: perspective(400px) rotateY(0deg);
     transform: perspective(400px) rotateY(0deg);
-    -webkit-backface-visibility: visible;
 }
diff --git a/css/style.css b/css/style.css
@@ -122,19 +122,28 @@ iframe {
 	vertical-align: middle;
 }
 .youtube-item .description {
-	height: 0;
-	overflow: auto;
+	height: 235px;
+	overflow: hidden;
 	background-color: rgba(255, 255, 255, .9);
 	position: absolute;
-	bottom: 0;
+	top: 0px;
 	left:0;
-	margin: 0px;
-	padding: 0 8px;
-	width: 100%;
+	margin: 8px;
+	padding: 8px;
+	/*width: 100%;*/
 	box-sizing: border-box;
 	word-wrap:break-word;
 }
-
+.youtube-item.show-description .description {
+	overflow: auto;
+}
+.youtube-item .indicators {
+	height: 22px;
+}
+.show-description .btn.btn-mini.media-desc {
+	color: #efefef;
+	background: rgb(71, 68, 68);
+}
 .youtube-item .title {
 	height: 27px;
 	white-space: nowrap;
@@ -206,14 +215,6 @@ iframe {
 }
 .youtube-item .add-to-playlist {
 
-}
-.youtube-item.show-description .description {
-	height: 100px;
-	padding: 4px 8px;
-	margin: 0;
-}
-.show-description .icon-chevron-up {
-	-webkit-transform: rotate(180deg);
 }
 /* youtube player module */
 .youtube-player {
@@ -504,7 +505,7 @@ iframe {
 	box-shadow: 0px 1px 2px rgba(0,0,0,.3), inset 0px 0px 0px rgba(0,0,0, .6);
 	font-family: "Open Sans Condensed", Arial;
 	text-decoration: none;
-	-webkit-transform: translate3d(0px, 0px, 0);
+	/*-webkit-transform: translate3d(0px, 0px, 0);*/
 }
 .wood .youtube-item .add-to-playlists ul {
 	font-size: 12px;
@@ -661,7 +662,7 @@ iframe {
 @media (min-width: 1000px) {
 	.youtube-item:hover .media-title {
 	   box-shadow: 0px 0px 0px rgba(0,0,0,.3), inset 0px 1px 17px rgba(0,0,0, .7);
-		-webkit-transform: translate3d(0px, 2px, 0);
+		/*-webkit-transform: translate3d(0px, 2px, 0);*/
 		background: rgba(0, 0, 0, 0.1);
 	}
 	/* Webkit browsers */

diff --git a/index.html b/index.html
@@ -283,6 +283,7 @@ <h3>Notice - Before You Start Listening...</h3>
 	  <div class="modal-header"></div>
 	  <div class="modal-body">
 	  	<h3 class="sign-in-message">Please sign in to add videos to your playlists</h3>
+	  	<h5>Select a playlist to add the video to it</h5>
 	    <ul class="unstyled"></ul>
 	  </div>
 	  <div class="modal-footer">

diff --git a/js/collections/youtube_playlists_provider.js b/js/collections/youtube_playlists_provider.js
@@ -50,9 +50,19 @@ define([
 
 		createPlaylist: function (title, description) {
 			var playlist = new PlaylistsService();
+			playlist.on('sync', function(model){
+				this.resetParams();
+				this.fetch();
+				playlist.off();
+			}, this);
 			return playlist.insert(title, description);
 		},
 
+		resetParams: function () {
+			this.index = 1;
+			this.tempItems.length = 0;
+		},
+
 		getInfo: function() {
 			// reset startIndex for 'playlist' only, because it's a new request
 			if (this.hasChanged('id')) {

diff --git a/js/views/playlists-viewer/playlist_search.js b/js/views/playlists-viewer/playlist_search.js
@@ -2,7 +2,7 @@ define([
 	'jquery',
 	'underscore',
 	'backbone',
-	'text!templates/viewer-search.html'
+	'text!templates/playlist-search.html'
 ], function($, _, Backbone, template) {
 
 	var ViewerSearch = Backbone.View.extend({
@@ -15,7 +15,7 @@ define([
 			},
 			'click button[data-action="create"]': function () {
 				var query = this.$('input[type=search]').val();
-				this.createPlaylist(query);
+				this.setState('loading');
 				this.trigger('search:add', query);
 			},
 
@@ -34,7 +34,18 @@ define([
 		render: function(model, video) {
 			video.query = this.filter;
 			this.$el.html(this.template(video));
+			setTimeout(_.bind(function(){
+				this.$('input').get(0).focus();
+			}, this), 500);
 			return this;
+		},
+
+		setState: function (state) {
+			this.$('.add-btn').button(state);
+		},
+
+		resetState: function () {
+			this.setState('reset');
 		}
 
 	});

diff --git a/js/views/youtube/PlaylistsViewer.js b/js/views/youtube/PlaylistsViewer.js
@@ -28,6 +28,7 @@ define([
 			// this.listenTo(this.model.youtube().playlists, 'sync', this.renderGapiResult);
 			// listen to modal events
 			this.$el.on('hidden', _.bind(this.reset, this));
+			this.$el.on('show', _.bind(this.render, this));
 			this.header = new ViewerSearch({
 				el: this.$('.modal-header'),
 				model: this.model
@@ -40,6 +41,7 @@ define([
 			this.filter = "";
 
 			this.listenTo(this.header, 'search:change', this.filterPlaylist);
+			this.listenTo(this.header, 'search:add', this.createPlaylist);
 			// prerendering
 			this.render();
 		},
@@ -97,8 +99,12 @@ define([
 		},
 
 		createPlaylist: function (title) {
+			var playlist;
 			if (title.length) {
-				this.model.user().playlists.createPlaylist({ title: title });
+				playlist = this.model.user().playlists.createPlaylist(title);
+				this.listenTo(playlist, 'sync', function(model){
+					this.header.resetState();
+				});
 			}
 		}
 	});

diff --git a/js/views/youtube_item.js b/js/views/youtube_item.js
@@ -8,7 +8,7 @@ define([
     var YoutubeItemView = Backbone.View.extend({
 		tagName: 'li',
 
-		className: 'youtube-item span3 nicer-ux ux-maker',
+		className: 'youtube-item card span3 nicer-ux ux-maker',
 
 		template: _.template(YoutubeItemTemplate),
 

diff --git a/templates/viewer-search.html → templates/playlist-search.html b/templates/viewer-search.html → templates/playlist-search.html
@@ -2,9 +2,9 @@
 <div class="thumbnail">
 	<img src="<%= thumbnail.hqDefault %>" class="media-thumb">
 </div>
-<h3>Add to a playlist:</h3>
+<h3>Add To A Playlist:</h3>
 <div class="video-title ellipsis"><%= title %></div>
 <form class="form-inline">
-	<input type="search" placeholder="find a playlist" value="<%= query %>">
-	<button class="btn btn-success add-btn" data-action="create">Create New</button>
+	<input type="search" placeholder="find or create a playlist">
+	<button class="btn btn-success add-btn" data-action="create" data-loading-text="Creating...">Create New</button>
 </form>
diff --git a/templates/youtube_item.html b/templates/youtube_item.html
@@ -1,15 +1,15 @@
-	<section class="media-title">
+	<section class="media-title front face">
 
 		<div class="indicators clearfix">
 
 			<span class="pull-left item-is-playing playing-<%= isPlaying %>">
 				<i class="icon-play"></i>Now Playing
 			</span>
 
-			<button class="pull-right btn btn-mini item-action favorite-media is-favorite-<%= isFavorite %>">
+			<!-- <button class="pull-right btn btn-mini item-action favorite-media is-favorite-<%= isFavorite %>">
 				<i class="icon-heart-empty"></i>
 				<i class="icon-heart"></i>
-			</button>
+			</button> -->
 
 			<button class="pull-right btn btn-mini add-to-playlist" title="Add this video to a playlist">
 				<i class="icon-plus"></i> Add
@@ -29,13 +29,14 @@ <h4 class="title span11"><%- title %></h4>
 
 
 
-		<p class="description">
-			<span class="close"><i class="icon-remove-sign"></i></span>
-			<%- description %>
-		</p>
 
 	</section>
 
+	<div class="description back face">
+		<h5>"<%= title %>"</h5>
+		<%- description %>
+	</div>
+
 	<section class="item-actions">
 
 		<span class="btn btn-mini media-desc " title="more info about this video">

diff --git a/templates/youtube_playlist_item.html b/templates/youtube_playlist_item.html
@@ -5,9 +5,9 @@
             <i class="icon-play"></i>Now Playing
         </span>
 
-        <button class="pull-right btn btn-mini add-to-playlist" title="Add this video to a playlist">
+        <!-- <button class="pull-right btn btn-mini add-to-playlist" title="Add this video to a playlist">
             <i class="icon-plus"></i> Add
-        </button>
+        </button> -->
 
     </div>