restyle youtube items buttons #17, added profile service v3 #18

removed unused 'destroy' #16
orizens · Aug 24, 2013 · fae7f30 · fae7f30
1 parent 7f91d3f
commit fae7f30
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 23 deletions.
diff --git a/css/style.css b/css/style.css
@@ -162,16 +162,14 @@ iframe {
 
 .youtube-item .item-is-playing {
 	display: none;
-	position: absolute;
-	top: 7px;
 	color: rgb(37, 162, 224);
 	text-shadow: 0 0px 1px rgb(0, 171, 255);
 }
 .youtube-item .item-is-playing i {
 	margin: 2px 4px 0 0;
 }
 .youtube-item .item-is-playing.playing-true {
-	display: block;
+	display: initial;
 }
 .youtube-item .thumbnail {
 	overflow: hidden;

diff --git a/js/models/player_app.js b/js/models/player_app.js
@@ -6,12 +6,12 @@ define([
 	'./youtube_profile_service',
 	'./youtube_player',
 	'./gapi',
-	'./youtube/gplusAuth'
+	'./youtube/ProfileService'
 ], function(_, Backbone, 
 	UserProfileManager, YoutubeMediaProvider, YoutubeProfileService, 
-	YoutubePlayer, gapi, gplusAuth
+	YoutubePlayer, gapi, ProfileService
 	) {
-	window.gplusModel = new gplusAuth();
+	window.gprofile = new ProfileService();
 	var PlayerModel = Backbone.Model.extend({
 		defaults: {
 			query: '',

diff --git a/js/models/youtube/ProfileService.js b/js/models/youtube/ProfileService.js
@@ -0,0 +1,29 @@
+define(['underscore', 'backbone', '../gapi'], function(_, Backbone, Gapi) {
+
+	var YoutubeProfileService = Gapi.extend({
+
+		url: function() {
+			return gapi.client.youtube.channels;
+		},
+
+		// for autorization
+		scopes: "https://www.googleapis.com/auth/youtube",
+
+		// for client api to be loaded after autorization
+		client: {
+			api: 'youtube',
+			version: 'v3'
+		},
+
+		initialize: function() {
+			this.connect();
+		},
+
+		defaults: {
+			part: 'snippet,contentDetails',
+ 			mine: true
+		}
+	});
+
+	return YoutubeProfileService;
+});
diff --git a/js/models/youtube_media_provider.js b/js/models/youtube_media_provider.js
@@ -3,17 +3,20 @@ define([
 	'backbone',
 	'./youtube_item_info',
 	'./youtube_playlist_info_provider',
-	'./youtube/YoutubePlaylistItemsService'
+	'./youtube/YoutubePlaylistItemsService',
+	'./youtube/ProfileService'
 ], function(_, Backbone, YoutubeItemInfo, 
 	YoutubePlaylistInfoProvider,
-	YoutubePlaylistItemsService
+	YoutubePlaylistItemsService,
+	ProfileService
 	) {
 
 	var Developer_API_key = "AI39si4_o0x9AELkUm2d2M30xfHzbgEjFtZgzV8C7Ydu2f6eRZ6XaYaRxD07qwEVBQkMiOK0pwOFbQ4M7sWl6jcJ7r102BsRJg";
     var YoutubeMediaProvider = Backbone.Model.extend({
 		// youtube services
 		playlists: new YoutubePlaylistItemsService(),
-
+		profile: new ProfileService(),
+
 		defaults: {
 			query: '',
 			startIndex: 1,

diff --git a/js/views/youtube/PlaylistsViewer.js b/js/views/youtube/PlaylistsViewer.js
@@ -22,7 +22,7 @@ define([
 			this.renderPlaylists();
 		},
 
-		template: _.template("<li><a href='#<%= id %>' data-id='<%= id %>'><%= title %> <span class='badge badge-info'><%= size %></span></a></li>"),
+		template: _.template("<li><a href='#<%= id %>' data-id='<%= id %>'><%= title %> <span class='badge badge-info'><%= size %></span></a><span class='message'></span></li>"),
 
 		render: function(userPlaylists) {
 			this.$('.modal-body ul').empty().append(
@@ -60,6 +60,8 @@ define([
 			var videoId = model.get('resource').snippet.resourceId.videoId;
 			var size = this.model.user().playlists().get(playlistId).get('size');
 			this.model.user().playlists().get(playlistId).set({ size: size + 1});
+			// TODO render as a change event through a model
+			this.$('a[href="#' + playlistId + '"] + .message').html(message);
 		},
 
 		filterPlaylist: function(ev){

diff --git a/js/views/youtube_item.js b/js/views/youtube_item.js
@@ -39,11 +39,6 @@ define([
 			this.$el.toggleClass('show-description');
 		},
 
-		destroy: function() {
-			this.undelegateEvents();
-			this.remove();
-		},
-
 		addToPlaylist: function(ev){
 			ev.preventDefault();
 			console.log('added to play;list');

diff --git a/js/views/youtube_user_playlist_item.js b/js/views/youtube_user_playlist_item.js
@@ -19,7 +19,7 @@ define([
 		initialize: function () {
 			this.listenTo(this.model, 'change', this.render);
 		},
-		
+
 		render: function() {
 			this.$el.html( this.template(this.model.toJSON()) );
 			return this;
@@ -28,11 +28,6 @@ define([
 		onPlaylistSelected: function(ev) {
 			this.trigger('playlist-selected', this.model.toJSON());
 			this.$el.addClass('active');
-		},
-
-		destroy: function() {
-			this.undelegateEvents();
-			this.$el.remove();
 		}
 	});
 

diff --git a/templates/youtube_item.html b/templates/youtube_item.html
@@ -1,8 +1,8 @@
 	<section class="media-title">
 
-		<div class="indicators">
+		<div class="indicators clearfix">
 
-			<span class="item-is-playing playing-<%= isPlaying %>">
+			<span class="pull-left item-is-playing playing-<%= isPlaying %>">
 				<i class="icon-play"></i>Now Playing
 			</span>