From dd15cc06a0d68e690fd1d2f801e08f1fb70da751 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 9 Feb 2017 15:44:38 +0000
Subject: [PATCH] Integrate playback state directive in tutorial videos; style
 adjustments.

---
 .../project/editor/feature-onboarding.pug     | 61 ++++++++++---------
 .../app/editor/feature-onboarding.less        |  6 +-
 2 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/services/web/app/views/project/editor/feature-onboarding.pug b/services/web/app/views/project/editor/feature-onboarding.pug
index da05d7b541..2b81e304ab 100644
--- a/services/web/app/views/project/editor/feature-onboarding.pug
+++ b/services/web/app/views/project/editor/feature-onboarding.pug
@@ -22,35 +22,38 @@
 				ng-click="gotoPrevStep();"
 				ng-disabled="onboarding.innerStep === 1;")
 				i.fa.fa-arrow-left
-			.feat-onboard-video-container(ng-switch="onboarding.innerStep")
-				div(ng-switch-when="1")
-					video.feat-onboard-video(
-						autoplay
-						loop
-					)
-						source(src="/img/onboarding/review-panel/open-review.mp4", type="video/mp4")
-						img(src="/img/onboarding/review-panel/open-review.gif")
-				div(ng-switch-when="2")
-					video.feat-onboard-video(
-						autoplay
-						loop
-					)
-						source(src="/img/onboarding/review-panel/commenting.mp4", type="video/mp4")
-						img(src="/img/onboarding/review-panel/commenting.gif")
-				div(ng-switch-when="3")
-					video.feat-onboard-video(
-						autoplay
-						loop
-					)
-						source(src="/img/onboarding/review-panel/add-changes.mp4", type="video/mp4")
-						img(src="/img/onboarding/review-panel/add-changes.gif")
-				div(ng-switch-when="4")
-					video.feat-onboard-video(
-						autoplay
-						loop
-					)
-						source(src="/img/onboarding/review-panel/accept-changes.mp4", type="video/mp4")
-						img(src="/img/onboarding/review-panel/accept-changes.gif")
+			div(ng-show="onboarding.innerStep === 1;")
+				video.feat-onboard-video(
+					video-play-state="onboarding.innerStep === 1;"
+					autoplay
+					loop
+				)
+					source(src="/img/onboarding/review-panel/open-review.mp4", type="video/mp4")
+					img(src="/img/onboarding/review-panel/open-review.gif")
+			div(ng-show="onboarding.innerStep === 2;")
+				video.feat-onboard-video(
+					video-play-state="onboarding.innerStep === 2;"
+					autoplay
+					loop
+				)
+					source(src="/img/onboarding/review-panel/commenting.mp4", type="video/mp4")
+					img(src="/img/onboarding/review-panel/commenting.gif")
+			div(ng-show="onboarding.innerStep === 3;")
+				video.feat-onboard-video(
+					video-play-state="onboarding.innerStep === 3;"
+					autoplay
+					loop
+				)
+					source(src="/img/onboarding/review-panel/add-changes.mp4", type="video/mp4")
+					img(src="/img/onboarding/review-panel/add-changes.gif")
+			div(ng-show="onboarding.innerStep === 4;")
+				video.feat-onboard-video(
+					video-play-state="onboarding.innerStep === 4;"
+					autoplay
+					loop
+				)
+					source(src="/img/onboarding/review-panel/accept-changes.mp4", type="video/mp4")
+					img(src="/img/onboarding/review-panel/accept-changes.gif")
 			button.btn.btn-primary.feat-onboard-nav-btn(
 				ng-click="gotoNextStep();"
 				ng-disabled="onboarding.innerStep === onboarding.nSteps;")
diff --git a/services/web/public/stylesheets/app/editor/feature-onboarding.less b/services/web/public/stylesheets/app/editor/feature-onboarding.less
index 42d193bf8f..65c70001e2 100644
--- a/services/web/public/stylesheets/app/editor/feature-onboarding.less
+++ b/services/web/public/stylesheets/app/editor/feature-onboarding.less
@@ -66,11 +66,9 @@
 		align-items: center;
 		padding: 30px 0;
 	}
-		.feat-onboard-video-container {
-			width: 618px;
-			margin: 0 30px;
-		}
 		.feat-onboard-video {
+			width: 616px;
+			margin: 0 30px;
 			box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3);
 		}