Merge pull request #287 from mansurskTarento/kcm-mapping-video

Kcm mapping video

package.json

@@ -41,7 +41,7 @@
     "@angular/service-worker": "~8.2.1",
     "@project-sunbird/telemetry-sdk": "0.0.26",
     "@sunbird-cb/collection": "^1.0.34",
-    "@sunbird-cb/taxonomy-editor": "^0.0.31",
+    "@sunbird-cb/taxonomy-editor": "^0.0.32",
     "@sunbird-cb/rain-dashboards": "^0.3.9",
     "@sunbird-cb/resolver": "^1.0.0",
     "@sunbird-cb/utils": "^1.0.17",

project/ws/app/src/lib/routes/home/components/demo-video-popup/demo-video-popup.component.html

@@ -0,0 +1,8 @@
+<div class="video-content">
+  <div class="popup-close">
+    <mat-icon mat-dialog-close class="close-icon">cancel</mat-icon>
+  </div>
+  <video disablePictureInPicture="true" controls controlsList="nodownload" height="100%" width="100%" [autoplay]="true">
+    <source [src]="getVideoLink" type="video/mp4">
+  </video>
+</div>

project/ws/app/src/lib/routes/home/components/demo-video-popup/demo-video-popup.component.scss

@@ -0,0 +1,27 @@
+.video-content {
+  position: relative;
+  height: 100%;
+}
+
+.popup-close {
+  position: absolute;
+  right: -55px;
+  top: -55px;
+  color: #2f2e2e;
+  height: 20px;
+  width: 20px;
+  background-color: white;
+  border-radius: 11px;
+
+  .close-icon {
+    font-size: 30px;
+    margin-top: -4px;
+    margin-left: -3px;
+    pointer-events: all;
+    cursor: pointer;
+  }
+}
+
+::ng-deep.overflow-visable .mat-dialog-container {
+    overflow: visible !important;
+  }

project/ws/app/src/lib/routes/home/components/demo-video-popup/demo-video-popup.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { DemoVideoPopupComponent } from './demo-video-popup.component'
+
+describe('DemoVideoPopupComponent', () => {
+  let component: DemoVideoPopupComponent
+  let fixture: ComponentFixture<DemoVideoPopupComponent>
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [DemoVideoPopupComponent],
+    })
+    .compileComponents()
+  }))
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DemoVideoPopupComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

project/ws/app/src/lib/routes/home/components/demo-video-popup/demo-video-popup.component.ts

@@ -0,0 +1,28 @@
+import { Component, Inject, OnInit } from '@angular/core'
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'
+import { DomSanitizer } from '@angular/platform-browser'
+
+@Component({
+  selector: 'ws-app-demo-video-popup',
+  templateUrl: './demo-video-popup.component.html',
+  styleUrls: ['./demo-video-popup.component.scss'],
+})
+export class DemoVideoPopupComponent implements OnInit {
+  videoLink = ''
+
+  constructor(
+    public dialogRef: MatDialogRef<DemoVideoPopupComponent>,
+    @Inject(MAT_DIALOG_DATA) public dialogData: any,
+    private domSanitizer: DomSanitizer
+  ) {
+    this.videoLink = this.dialogData.videoLink
+  }
+
+  ngOnInit() {
+  }
+
+  get getVideoLink() {
+    return this.domSanitizer.bypassSecurityTrustResourceUrl(this.videoLink)
+  }
+
+}

project/ws/app/src/lib/routes/home/home.module.ts

@@ -92,6 +92,7 @@ import { AssignListPopupComponent } from './routes/request/assign-list-popup/ass
 import { KCMMappingComponent } from './routes/kcm-mapping/kcm-mapping.component'
 import { TaxonomyEditorModule } from '@sunbird-cb/taxonomy-editor'
 import { SingleAssignPopupComponent } from './routes/request/single-assign-popup/single-assign-popup.component'
+import { DemoVideoPopupComponent } from './components/demo-video-popup/demo-video-popup.component'
 @NgModule({
   declarations: [
     HomeComponent,
@@ -136,6 +137,7 @@ import { SingleAssignPopupComponent } from './routes/request/single-assign-popup
     AssignListPopupComponent,
     KCMMappingComponent,
     SingleAssignPopupComponent,
+    DemoVideoPopupComponent,
   ],
   imports: [
     CommonModule,
@@ -206,7 +208,8 @@ import { SingleAssignPopupComponent } from './routes/request/single-assign-popup
     ConfirmationPopupComponent,
     SuccessComponent,
     AssignListPopupComponent,
-    SingleAssignPopupComponent],
+    SingleAssignPopupComponent,
+    DemoVideoPopupComponent],
   providers: [
     // CKEditorService,
     // LoaderService,

project/ws/app/src/lib/routes/home/routes/kcm-mapping/kcm-mapping.component.html

@@ -6,21 +6,33 @@ <h1 class="mat-heading-1">{{kcmConfig?.mainHeading}}</h1>
       <mat-icon class="cursor-pointer mat-icon mr-4" *ngIf="showTopSection"
         (click)="showTopSection = !showTopSection;callResizeEvent($event)">keyboard_arrow_up</mat-icon>
       <mat-icon class="cursor-pointer mat-icon mr-4" *ngIf="!showTopSection"
-        (click)="showTopSection = !showTopSection;callResizeEvent($event)" >keyboard_arrow_down</mat-icon>
+        (click)="showTopSection = !showTopSection;callResizeEvent($event)">keyboard_arrow_down</mat-icon>
     </div>
     <div class="mt-5" *ngIf="showTopSection">
-      <div class="flex">
+      <div class="flex gap-20">
         <div class="flex-1 flex-col gap-4">
           <p class="flex items-center" *ngFor="let step of kcmConfig?.topsection?.steps">
             <mat-icon class="mat-icon mr-4">error_outline</mat-icon>
             {{step.title}}
           </p>
         </div>
-        <div *ngIf="kcmConfig?.topsection?.guideVideo?.enabled">
+        <ng-container *ngIf="videoLink">
+          <div class="">
+            <div class="videoDemo flex justify-end section-2">
+              <div class="videoDemoVideo flex flex-column flex-middle justify-center" (click)="openVideoPopup()">
+                <mat-icon class="video_icon mb-2">play_arrow</mat-icon>
+                <div>
+                  Watch how it works
+                </div>
+              </div>
+            </div>
+          </div>
+        </ng-container>
+        <!-- <div *ngIf="kcmConfig?.topsection?.guideVideo?.enabled">
           <video width="173" height="102" controls>
             <source src="{{kcmConfig?.topsection?.guideVideo?.url}}" type="{{kcmConfig?.topsection?.guideVideo?.type}}">
           </video>
-        </div>
+        </div> -->
       </div>
     </div>
   </mat-card>

project/ws/app/src/lib/routes/home/routes/kcm-mapping/kcm-mapping.component.scss

@@ -1,3 +1,19 @@
 .font-bold-imp{
   font-weight: 700 !important;
+}
+
+.videoDemo {
+  .videoDemoVideo {
+    width: 173px;
+    height: 102px;
+    border-radius: 5px;
+    background-color: #FDEAD5;
+    font-weight: 600;
+    pointer-events: all;
+    cursor: pointer;
+
+    .video_icon {
+      font-size: 32px;
+    }
+  }
 }

project/ws/app/src/lib/routes/home/routes/kcm-mapping/kcm-mapping.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core'
 import { environment } from '../../../../../../../../../src/environments/environment'
 import { ActivatedRoute } from '@angular/router'
+import { MatDialog } from '@angular/material'
+import { DemoVideoPopupComponent } from '../../components/demo-video-popup/demo-video-popup.component'
+import * as _ from 'lodash'
 
 @Component({
   selector: 'ws-app-kcm-mapping',
@@ -12,8 +15,10 @@ export class KCMMappingComponent implements OnInit {
   taxonomyConfig: any
   showTopSection = false
   kcmConfig: any
+  videoLink = ''
   constructor(
-    private activateRoute: ActivatedRoute
+    private activateRoute: ActivatedRoute,
+    private dialog: MatDialog
   ) { }
 
   ngOnInit() {
@@ -24,6 +29,7 @@ export class KCMMappingComponent implements OnInit {
       this.kcmConfig = data.pageData.data
       this.kcmConfig.defaultKCMConfig[0].frameworkId = environment.KCMframeworkName
       this.taxonomyConfig = [...this.kcmConfig.defaultKCMConfig, ...this.kcmConfig.frameworkConfig]
+      this.videoLink = _.get(this.kcmConfig, 'topsection.guideVideo.url')
     })
   }
 
@@ -33,4 +39,17 @@ export class KCMMappingComponent implements OnInit {
     },         100)
   }
 
+  openVideoPopup() {
+    const url = `${environment.karmYogiPath}${this.videoLink}`
+    this.dialog.open(DemoVideoPopupComponent, {
+      data: {
+        videoLink: url,
+      },
+      disableClose: true,
+      width: '50%',
+      height: '60%',
+      panelClass: 'overflow-visable',
+    })
+  }
+
 }