Add support for video demos

client/app/app.js

@@ -79,6 +79,7 @@ import NewRoleController from './designer/roles/new_role/new_role.controller';
 import SearchRoleController from './designer/roles/search_role/search_role.controller';
 
 import ComplexVarModalController from './modals/complex_var_modal/complex_var_modal.controller';
+import VideoController from './modals/video/video.controller';
 
 import NewModuleController from './custom_modules/new_module/new_module.controller';
 
@@ -106,7 +107,7 @@ angular.module('app2App', [ngCookies, ngResource, ngSanitize, uiRouter, uiBootst
   YAML, yamlFile, Projects, ansible, ansi2html, editor, customModules, system,
   // Controllers
   NewInventoryController, NewGroupController, NewHostController, ComplexVarController, NewPlaybookController, ExecutionController, NewPlayController, NewTaskController, ComplexVarModalController,
-  NewFileController, NewRoleController, SearchRoleController, NewModuleController,
+  NewFileController, NewRoleController, SearchRoleController, NewModuleController, VideoController,
   // Filters
   dictToKeyValueArray, dictToKeyValueArraySimple, keyValueArrayToDict, keyValueArrayToArray, addDotInKey, removeDotInKey, json2yaml,
   // Directives

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;">

client/app/modals/video/video.controller.js

@@ -0,0 +1,19 @@
+'use strict';
+const angular = require('angular');
+
+/*@ngInject*/
+export function videoController($scope, $uibModalInstance,$sce, video) {
+
+  this.video_id = video.video_id;
+  $scope.video_url = $sce.trustAsResourceUrl("https://www.youtube.com/embed/" + this.video_id);
+
+  console.log("Video URL = " + this.video_url);
+
+  $scope.cancel = function () {
+    $uibModalInstance.close();
+  };
+}
+
+export default angular.module('webAppApp.video', [])
+  .controller('VideoController', videoController)
+  .name;

client/app/modals/video/video.controller.spec.js

@@ -0,0 +1,17 @@
+'use strict';
+
+describe('Controller: VideoCtrl', function() {
+  // load the controller's module
+  beforeEach(module('webAppApp.video'));
+
+  var VideoCtrl;
+
+  // Initialize the controller and a mock scope
+  beforeEach(inject(function($controller) {
+    VideoCtrl = $controller('VideoCtrl', {});
+  }));
+
+  it('should ...', function() {
+    expect(1).to.equal(1);
+  });
+});

client/app/modals/video/video.html

@@ -0,0 +1,12 @@
+<!-- Modal content-->
+<div class="modal-content" style="min-width: 800px;">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" ng-click="cancel()">&times;</button>
+    <h4 class="modal-title">Demo</h4>
+  </div>
+  <div class="modal-body" style="text-align: center">
+    <iframe src="{{video_url}}" width="720px" height="500px" allowfullscreen>
+    </iframe>
+  </div>
+
+</div>

server/config/environment/shared.js

@@ -27,6 +27,30 @@ exports = module.exports = {
 
   },
 
-  disablePlayboookExecution: process.env.DISABLE_PLAYBOOK_EXECUTION || false
+  disablePlayboookExecution: process.env.DISABLE_PLAYBOOK_EXECUTION || false,
+
+  videos: [
+    {
+      title: 'Overview',
+      type: 'overview',
+      video_id: '6sE0Gqcw_4U'
+    },
+    {
+      title: 'Getting Started',
+      type: 'getting_started'
+    },
+    {
+      title: 'Google Cloud Example',
+      type: 'google_cloud'
+    },
+    {
+      title: 'VMWare Example',
+      type: 'vmware'
+    },
+    {
+      title: 'Custom Modules',
+      type: 'custom_module'
+    }
+  ]
 
 };