Add support for video demos

client/app/main/main.component.js

@@ -5,10 +5,32 @@ import routing from './main.routes';
 export class MainController {
 
   /*@ngInject*/
-  constructor($http, $scope, appConfig) {
+  constructor($http, $scope, $uibModal, appConfig) {
     'ngInject';
     this.$http = $http;
     $scope.appVersion = appConfig.version;
+
+    this.videos = appConfig.videos;
+
+    this.showVideoModal = function (video) {
+      var modalInstance = $uibModal.open({
+        animation: true,
+        template: require('../modals/video/video.html'),
+        controller: 'VideoController',
+        size: 'md',
+        backdrop: 'static',
+        keyboard: false,
+        closeByEscape: false,
+        closeByDocument: false,
+        resolve: {
+          video: function () {
+            return video
+          }
+        }
+      });
+
+    };
+
   }
 }
 

client/app/main/main.html

@@ -2,11 +2,34 @@
   <div class="container">
     <logo></logo>
     <p class="lead"><a style="color:#d9534f;" href="http://www.ansible.com" target="_blank">Ansible</a> Playbook generator and orchestrator</p>
-    <img src="assets/images/Button-1-play-icon.png" alt="I'm Playable">
   </div>
+
+    <div class="row">
+      <div class="col-md-offset-4 col-md-4">
+        Try it !
+        <div class="logconsole" style="font-size: larger;">
+          > docker run mmumshad/ansible-playable
+        </div>
+      </div>
+    </div>
+
 </header>
 
 <div class="container">
+
+  <div class="row" style="margin-top: 10px;">
+    <div class="col-md-2" style="text-align: center" ng-repeat="video in $ctrl.videos">
+      <a href="" ng-click="$ctrl.showVideoModal(video)" style="color: grey">
+        <div style="color: #d9534f">
+          <!--<i class="fa fa-play fa-2x" aria-hidden="true" style="color: #ffa800"></i>-->
+          <!--<img  class="md-whiteframe-21dp" src="assets/images/video-4-icon.png">-->
+          <i class="fa fa-youtube-play fa-4x" aria-hidden="true" ></i>
+        </div>
+        {{ video.title }}
+      </a>
+    </div>
+  </div>
+
   <div class="features-unit">
     <div class="row" style="margin-top:50px;">
       <div class="col-md-6 " style="align-content: center;text-align: center;">