#84 - updated user sign in process

package.json

@@ -12,7 +12,7 @@
     "testc": "gulp test",
     "testd": "DEBUG=true gulp test",
     "start": "ENV='dev' gulp serve",
-    "release": "gulp dist:prepare && gulp build && gulp style && gulp assets && gulp dist && gulp dist:rev",
+    "release": "gulp dist:prepare && npm run build && gulp assets && gulp dist && gulp dist:rev",
     "release:dist": "git checkout -f gh-pages && gulp copy:dist",
     "rs": "gulp dist:assets",
     "build": "gulp build && gulp build:vendors && gulp style",

src/components/playlist-viewer/index.js

@@ -33,7 +33,7 @@ function config ($stateProvider) {
 /* ngInject */
 function getPlaylistVideos ($stateParams, YoutubeVideoInfo, PlaylistInfo, YoutubeUser) {
     var playlistId = $stateParams.playlistId;
-    return YoutubeUser.isSignedIn() ?
+    return YoutubeUser.isUserSignedIn() ?
         YoutubeVideoInfo.getPlaylist(playlistId) :
         PlaylistInfo.list(playlistId);
 }

src/components/playlist-viewer/playlist-viewer.tpl.html

@@ -21,7 +21,7 @@ <h4>Total {{ $ctrl.videos.length}} videos</h4>
 				<i class="fa fa-play"></i>
 			</button>
 			<button class="btn btn-default btn-lg ux-maker play-media bg-primary"
-				title="Queue this video to now playlist"
+				title="Queue this playlist to now playlist"
 				ng-click="$ctrl.queuePlaylist($ctrl.videos)">
 				<i class="fa fa-share"></i>
 			</button>

src/components/user-playlists/user-playlists.component.js

@@ -17,6 +17,7 @@ export let UserPlaylistsComponent = {
 			this.title = 'UserPlaylistsCtrl';
 			this.playlists = UserPlaylists.tracks;
 			this.search = '';
+			this.data = YoutubeUser.data;
 			UserPlaylists.list();
 		}
 

src/components/user-playlists/user-playlists.less

@@ -2,7 +2,22 @@
 	.videos-list {
 		padding-left: 2rem;
 	}
+	.title {
+		margin: 0 0 2rem;
 
+		.sidebar-toggle {
+			display: none;
+			padding: 0.7rem 1rem;
+		}
+	}
+	.search-form {
+		padding-left: .5rem;
+		margin-bottom: 1rem;
+
+		.form-control {
+			border: none;
+		}
+	}
 	.well {
 		&.ng-leave {
 			transition: all .5s ease-out;
@@ -14,6 +29,10 @@
 				opacity:0;
 			}
 		}
-
 	}
 }
+.drawer-closed .user-playlists {
+	.sidebar-toggle {
+		display: inline-block;
+	}
+}

src/components/user-playlists/user-playlists.tpl.html

@@ -1,9 +1,19 @@
 <div class="view-content youtube-results user-playlists">
-	<div class="col-md-12">
-		<h2>My Playlists</h2>
+	<div class="col-md-10">
+		<h2 class="title">
+			<span class="btn btn-navbar btn-link pull-left ux-maker sidebar-toggle" drawer-toggle="drawer-opened">
+				<i class="fa fa-bars"></i>
+			</span>
+			My Playlists
+		</h2>
 	</div>
+	<user-profile class="navbar-right col-md-offset-2"></user-profile>
 	<div class="col-md-12">
-		<input type="text" ng-model="userPlaylists.search" placeholder="find a playlist...">
+		<section class="col-md-6 search-form">
+			<input type="text" class="form-control"
+			ng-model="userPlaylists.search"
+			placeholder="find a playlist...">
+		</section>
 	</div>
 	<div ng-if="!userPlaylists.isUserSignedIn()" class="col-md-12 well text-center">
 		<a href="" class="sign-in btn btn-primary btn-lg"

src/components/user-profile/user-profile.component.js

@@ -1,4 +1,3 @@
-import UserProfileCtrl from './user-profile.ctrl.js';
 import template from './user-profile.tpl.html';
 
 /* @ngInject */
@@ -9,12 +8,44 @@ export default function userProfile() {
     //
     var directive = {
         template,
-        controller: UserProfileCtrl,
-        controllerAs: 'userProfile',
         scope: {},
         bindToController: true,
         replace: true,
-        restrict: 'E'
+        restrict: 'E',
+        controllerAs: 'userProfile',
+        controller: class UserProfileCtrl {
+            /* @ngInject */
+            constructor (GapiLoader, YoutubeUser, UserPlaylists) {
+                Object.assign(this, { GapiLoader, YoutubeUser, UserPlaylists })
+                this.data = YoutubeUser.data;
+                if (!YoutubeUser.isUserSignedIn()) {
+                    this.signIn();
+                }
+            }
+
+            signIn (options) {
+                this.GapiLoader.auth(options)
+                    .then((res) => {
+                        // debugger
+                        this.YoutubeUser.signIn(res);
+                        this.UserPlaylists.list();
+                    });
+            }
+
+            signInDialog () {
+                var options = {
+                    immediate: false,
+                    loadClientApi: false
+                };
+                this.signIn(options);
+            }
+
+            signOut () {
+                this.GapiLoader.signOut()
+                    .then(this.YoutubeUser.signOut)
+                    .then(this.UserPlaylists.clearPlaylists);
+            }
+        }
     };
     return directive;
 }

src/components/user-profile/user-profile.tpl.html

@@ -28,13 +28,13 @@
 				<i class="fa fa-cloud-upload"></i> Check For Updates</a>
 			</li> -->
 			<li ng-show="!userProfile.data.status.signed_in">
-				<a href="javascript:return false;" class="sign-in"
-				google-sign-in>
+				<a href="" class="sign-in"
+					ng-click="userProfile.signInDialog()">
 					<i class="fa fa-google-plus"></i> Sign In</a>
 			</li>
 			<li ng-show="userProfile.data.status.signed_in">
-				<a href="javascript:return false;" class="sign-out"
-					google-sign-out >
+				<a href="" class="sign-out"
+					ng-click="userProfile.signOut()">
 					<i class="fa fa-off"></i> Sign Out
 				</a>
 			</li>

src/components/youtube-video/youtube-video.less

@@ -1,8 +1,15 @@
 .youtube-video {
+	@bg-color: rgba(255, 255, 255, 0.7);
 	padding-bottom: 60px;
 
+	.style() {
+		background: @bg-color;
+	    box-shadow: 0 1px 30px -5px rgba(0, 0, 0, 0.3);
+	}
 	.thumbnail {
 		position: relative;
+		background: transparent;
+		border: none;
 	}
 	.play-media {
 		color: white;
@@ -13,4 +20,7 @@
 		left: 50%;
 		top: 50%;
 	}
+	.panel-body {
+		.style();
+	}
 }

src/core/components/e-dropdown/e-dropdown.less

@@ -0,0 +1,5 @@
+.uib-dropdown-menu {
+	li {
+		cursor: pointer;
+	}
+}