Add a tour controller.

src/styles/components/helptour.scss

@@ -23,11 +23,17 @@
 }
 
 .helptour {
+  .tourControl {
+    top: initial;
+    bottom: 10px;
+    left: 10px;
+    max-width: none;
+  }
   .in {
     display: block;
   }
   .popover {
-    opacity: 0.85;
+    opacity: 0.95;
   }
   .meetingRoom {
     top: 84px;

static/js/directives/helptour.js

@@ -24,20 +24,45 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html
 	//helptour
 	return [function() {
 
-		var controller = ['$scope', '$timeout', '$modal', 'userSettingsData', function($scope, $timeout, $modal, userSettingsData) {
-			var displayTime = 500;
+		var controller = ['$scope', '$timeout', '$modal', 'userSettingsData', '$q', function($scope, $timeout, $modal, userSettingsData, $q) {
+			var displayTime = 2000;
 			var shown = localStorage.getItem('mediastream-helptour');
-			var doStep = function(i, elem) {
-				$timeout(function() {
+			var timeoutAutoStepsIn = [];
+			var timeoutAutoStepsOut = [];
+			var reset = function() {
+				$scope.toAutourPaused = false;
+				$($scope.steps[$scope.currentIndex]).removeClass('in');
+				$scope.currentIndex = null;
+			};
+			var outStep = function(i, elem) {
+				$(elem).removeClass('in');
+			};
+			var inStep = function(i, elem) {
 				$(elem).addClass('in');
+				$scope.currentIndex = i;
+			};
+			var autoStep = function(i, elem) {
+				timeoutAutoStepsIn[i] = $timeout(function() {
+					inStep(i, elem);
 				}, displayTime * i, true);
-				$timeout(function() {
-					$(elem).removeClass('in');
+				timeoutAutoStepsOut[i] = $timeout(function() {
+					outStep(i, elem);
 				}, displayTime * (i + 1), true);
 			};
-			var startTour = function() {
+			var autoTour = function(start) {
+				start = start ? start - 1 : 0;
 				$scope.steps.each(function(i, x) {
-					doStep(i, x);
+					if(i >= start) {
+						autoStep(i, x);
+					}
+				});
+			};
+			var manualTour = function() {
+				timeoutAutoStepsIn.forEach(function(promise) {
+					$timeout.cancel(promise);
+				});
+				timeoutAutoStepsOut.forEach(function(promise) {
+					$timeout.cancel(promise);
 				});
 			};
 			var introTour = function() {
@@ -45,7 +70,7 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html
 				var controller = ['$scope', '$modalInstance', function(scope, $modalInstance) {
 					scope.goTour = function() {
 						$modalInstance.dismiss();
-						startTour();
+						autoTour();
 					};
 				}];
 				$modal.open({
@@ -58,15 +83,43 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html
 				introTour();
 				localStorage.setItem('mediastream-helptour', true);
 			}
-			$scope.$on('showHelpTour', function(current, last) {
-				if(current) {
-					introTour();
+			$scope.tourPaused = false;
+			$scope.currentIndex = null;
+			$scope.stepBeginning = function() {
+				outStep($scope.currentIndex, $scope.steps[$scope.currentIndex]);
+				inStep(0, $scope.steps[0]);
+			};
+			$scope.stepBackward = function() {
+				outStep($scope.currentIndex, $scope.steps[$scope.currentIndex]);
+				inStep($scope.currentIndex - 1, $scope.steps[$scope.currentIndex - 1]);
+			};
+			$scope.stepForward = function() {
+				outStep($scope.currentIndex, $scope.steps[$scope.currentIndex]);
+				inStep($scope.currentIndex + 1, $scope.steps[$scope.currentIndex + 1]);
+			};
+			$scope.stepEnd = function() {
+				outStep($scope.currentIndex, $scope.steps[$scope.currentIndex]);
+				inStep($scope.steps.length - 1, $scope.steps[$scope.steps.length - 1]);
+			};
+			$scope.togglePause = function() {
+				$scope.tourPaused = !$scope.tourPaused;
+				if ($scope.tourPaused) {
+					manualTour();
+				} else {
+					autoTour($scope.currentIndex);
 				}
+			};
+			$scope.exitTour = function() {
+				manualTour();
+				reset();
+			};
+			$scope.$on('showHelpTour', function() {
+				introTour();
 			});
 		}];
 
 		var link = function($scope, $elem, $attrs) {
-			$scope.steps = $elem.find('.popover');
+			$scope.steps = $elem.find('.tourSteps .popover');
 		};
 
 		return {

static/partials/helpoverlay.html

@@ -1,4 +1,5 @@
 <div class="helptour">
+    <div class="tourSteps">
         <div class="popover bottom meetingRoom">
             <div class="arrow"></div><h3 class="popover-title">{{_('Meeting Room')}}</h3>
             <div class="popover-content">{{_('Change the current meeting room here. Not all rooms names are available and certain characters are automatically removed.')}}</div>
@@ -7,4 +8,20 @@
             <div class="arrow"></div><h3 class="popover-title">{{_('Buddy List')}}</h3>
             <div class="popover-content">{{_('Every person in a room is listed here.')}}</div>
         </div>
+    </div>
+    <div class="popover in tourControl" ng-if="currentIndex !== null">
+        <div class="arrow"></div><h3 class="popover-title ng-binding">Tour Control - {{currentIndex + 1}} of {{steps.length}}</h3>
+        <div class="popover-content ng-binding">
+            <div class="btn-group">
+                <button class="btn btn-default" ng-click="exitTour()"><i class="fa fa-stop"></i></button>
+                <button class="btn btn-default" ng-model="tourPaused" ng-click="togglePause()"><i class="fa" ng-class="{'fa-play':tourPaused, 'fa-pause':!tourPaused}"></i></button>
+            </div>
+            <div class="btn-group">
+                <button class="btn btn-default" ng-click="stepBeginning()" ng-disabled="currentIndex < 1"><i class="fa fa-fast-backward"></i></button>
+                <button class="btn btn-default" ng-click="stepBackward()" ng-disabled="currentIndex < 1"><i class="fa fa-backward"></i></button>
+                <button class="btn btn-default" ng-click="stepForward()" ng-disabled="currentIndex === steps.length - 1"><i class="fa fa-forward"></i></button>
+                <button class="btn btn-default" ng-click="stepEnd()" ng-disabled="currentIndex === steps.length - 1"><i class="fa fa-fast-forward"></i></button>
+            </div>
+        </div>
+    </div>
 </div>

static/partials/helptour.html

@@ -4,7 +4,7 @@
     <h3 class="modal-title">{{_('Tour')}}</h3>
   </div>
   <div  class="modal-body">
-    <p>{{_('Congratulations! Anonymous secure peer to peer chat and video calls are a short click away. Quickly get started with the features tour below.')}}</p>
+    <p>{{_('Congratulations! Anonymous secure peer to peer chat and video calls are a short click away. Quickly get started with the features tour below. The tour can be accessed again under settings.')}}</p>
   </div>
   <div class="modal-footer">
     <div class="pull-right">