Fixed name conflicts between capture and upload of buddy picture.

static/js/directives/buddypicturecapture.js

@@ -142,17 +142,23 @@ define(['jquery', 'underscore', 'text!partials/buddypicturecapture.html'], funct
 				return videoAllowed.promise;
 			};
 
-			$scope.initPicture = function() {
+			$scope.startPictureCapture = function() {
 				videoStart(localStream);
 			};
 
-			$scope.cancelPicture = function() {
+			$scope.cancelPictureCapture = function() {
 				$scope.showTakePicture = false;
 				$scope.previewPicture = false;
 				videoStop(localStream, $scope.video);
 			};
 
-			$scope.retakePicture = function() {
+			$scope.usePictureCapture = function() {
+				writeVideoToCanvas($scope.canvasPic);
+				$scope.save();
+				$scope.cancelPictureCapture();
+			};
+
+			$scope.retakePictureCapture = function() {
 				var permission = videoStart(localStream);
 				permission.then(function(isPermitted) {
 					if(isPermitted) {
@@ -162,16 +168,10 @@ define(['jquery', 'underscore', 'text!partials/buddypicturecapture.html'], funct
 				});
 			};
 
-			$scope.takePicture = function() {
+			$scope.takePictureCapture = function() {
 				makePicture(localStream, countDownFrom, delayToTakePicture);
 			};
 
-			$scope.setAsProfilePicture = function() {
-				writeVideoToCanvas($scope.canvasPic);
-				$scope.save();
-				$scope.cancelPicture();
-			};
-
 		}];
 
 		var link = function($scope, $element, $attrs, modelController) {

static/js/directives/buddypictureupload.js

@@ -126,19 +126,19 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 				$scope.prevImage.style.cssText = null;
 			};
 
-			$scope.cancelPicture = function() {
+			$scope.cancelPictureUpload = function() {
 				$scope.showUploadPicture = false;
 				$scope.previewUpload = false;
 				clearPicture();
 			};
 
-			$scope.usePicture = function() {
+			$scope.usePictureUpload = function() {
 				writePictureToCanvas($scope.canvasPic);
 				$scope.save();
-				$scope.cancelPicture();
+				$scope.cancelPictureUpload();
 			};
 
-			$scope.handleUpload = function(event) {
+			$scope.handlePictureUpload = function(event) {
 				var file = event.target.files[0];
 				if (!file) {
 					return;
@@ -205,7 +205,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 			$scope.prevImage = $element.find("img.preview").get(0);
 
 			// Bind change event of file upload form.
-			$element.find("input[type=file]").on("change", $scope.handleUpload);
+			$element.find("input[type=file]").on("change", $scope.handlePictureUpload);
 
 			var intervalNum = {
 				num: null
@@ -277,6 +277,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 		};
 
 		return {
+			scope: false,
 			restrict: 'E',
 			require: '^buddyPictureCapture',
 			replace: true,

static/partials/buddypicturecapture.html

@@ -9,17 +9,17 @@
 				<canvas class="videoPic hidden"></canvas>
 				<canvas class="videoPrev hidden"></canvas>
 				<img class="preview" ng-class="{previewPicture: previewPicture}" ng-show="previewPicture" ng-src="{{preview}}" alt="" />
-				<a class="btn btn-xs btn-success btn-takePicture" ng-disabled="countingDown || waitingForPermission" ng-show="!previewPicture && !countingDown" ng-click="takePicture()"> {{_('Take')}}</a>
-				<a class="btn btn-xs btn-success btn-retakePicture" ng-disabled="waitingForPermission" ng-show="previewPicture" ng-click="retakePicture()"> {{_('Retake')}}</a>
+				<a class="btn btn-xs btn-success btn-takePicture" ng-disabled="countingDown || waitingForPermission" ng-show="!previewPicture && !countingDown" ng-click="takePictureCapture()"> {{_('Take')}}</a>
+				<a class="btn btn-xs btn-success btn-retakePicture" ng-disabled="waitingForPermission" ng-show="previewPicture" ng-click="retakePictureCapture()"> {{_('Retake')}}</a>
 			</div>
 		</div>
 		<div>
-			<a class="btn btn-small btn-default" ng-click="cancelPicture()"> {{_('Cancel')}}</a>
-			<a class="btn btn-small btn-primary" ng-disabled="!previewPicture || waitingForPermission" ng-click="setAsProfilePicture()"> {{_('Set as Profile Picture')}}</a>
+			<a class="btn btn-small btn-default" ng-click="cancelPictureCapture()"> {{_('Cancel')}}</a>
+			<a class="btn btn-small btn-primary" ng-disabled="!previewPicture || waitingForPermission" ng-click="usePictureCapture()"> {{_('Set as Profile Picture')}}</a>
 		</div>
 	</div>
 	<buddy-picture-upload></buddy-picture-upload>
-	<a class="btn btn-small btn-primary" ng-show="!showTakePicture && !showUploadPicture" ng-disabled="waitingForPermission" ng-click="initPicture()"> {{_('Take picture')}}</a>
+	<a class="btn btn-small btn-primary" ng-show="!showTakePicture && !showUploadPicture" ng-disabled="waitingForPermission" ng-click="startPictureCapture()"> {{_('Take picture')}}</a>
 	<a class="btn btn-small btn-default" ng-show="!showTakePicture && !showUploadPicture" ng-model="showUploadPicture" btn-checkbox>{{_('Upload picture')}}</a>
 	<span ng-show="waitingForPermission">
 		<i class="fa fa-circle-o-notch fa-spin"></i> {{_('Waiting for camera')}}

static/partials/buddypictureupload.html

@@ -27,7 +27,7 @@
 		<input class="btn btn-success" bfi type="file" title="{{_('Select file')}}" data-filename-placement="outside"/>
 	</p>
 	<p>
-		<a class="btn btn-small btn-default" ng-click="cancelPicture()"> {{_('Cancel')}}</a>
-		<a class="btn btn-small btn-primary" ng-click="usePicture()" ng-disabled="!imgData"> {{_('Set as Profile Picture')}}</a>
+		<a class="btn btn-small btn-default" ng-click="cancelPictureUpload()"> {{_('Cancel')}}</a>
+		<a class="btn btn-small btn-primary" ng-click="usePictureUpload()" ng-disabled="!imgData"> {{_('Set as Profile Picture')}}</a>
 	</p>
 </div>