Video chat multiple playback, auto disconnection increased to 30sec and cognito credential changes for dev and stage env

ng6-seed/src/app/layouts/admin/admin-layout.component.ts

@@ -377,7 +377,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
     })
     autoCloseDialog = setTimeout(()=>{
       this.dialogRef.close()
-    },15000)
+    },30000)
     this.dialogRef.afterClosed().subscribe(data=>{
       console.log(data)
       if(autoCloseDialog != undefined && autoCloseDialog) {

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html

@@ -163,7 +163,8 @@
            <!-- <div class="fab-group" *ngIf="master.fk_pd_type == '3'"> -->
           <!-- </div> -->
           <span  matTooltip="{{!videoplayback.enableBtn ? 'Recorded video is available after the PD is completed' : 'Play Recorded Video'}}" matTooltipPosition="above">
-            <button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'"  mat-stroked-button class="mr-1 mb-1"  color="primary" (click)="openPlayer()" [disabled]="!videoplayback.enableBtn" >
+            <!--  [disabled]="!videoplayback.enableBtn" -->
+            <button *ngIf="master.fk_pd_type == '3' || master.fk_pd_type == '2'"  mat-stroked-button class="mr-1 mb-1"  color="primary" (click)="openPlayer()" >
                 <mat-icon>play_circle_filled</mat-icon>&nbsp;
               <strong>Play</strong>
               </button>

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.ts

@@ -129,7 +129,7 @@ export class ViewPdComponent implements OnInit, OnDestroy {
       // }
     ]
   };
-  videoplayback: any = {enableBtn:false,url:null};
+  videoplayback: any = {enableBtn:true,url:null};
   openvendorallocation: any;
   vendor_form_status_arr: any =[];
 
@@ -165,10 +165,10 @@ export class ViewPdComponent implements OnInit, OnDestroy {
         if (data.status == 200) {
           let masterData: any = data.records.pd_master_details;
           this.pdMasterData.push(masterData[0]);
-          if((this.pdMasterData[0].fk_pd_type == '3' || this.pdMasterData[0].fk_pd_type == '2') && (this.pdMasterData[0].pd_status == 'COMPLETED' || this.pdMasterData[0].pd_status == 'QC_COMPLETED')) { 
+          // if((this.pdMasterData[0].fk_pd_type == '3' || this.pdMasterData[0].fk_pd_type == '2') && (this.pdMasterData[0].pd_status == 'COMPLETED' || this.pdMasterData[0].pd_status == 'QC_COMPLETED')) { 
-            this.getVideoUrl(this.viewID,this.masterRandomString)
+          //   this.getVideoUrl(this.viewID,this.masterRandomString)
-            this.videoplayback.enableBtn = true;
+          //   this.videoplayback.enableBtn = true;
-          }
+          // }
           this.mandatoryFieldsValidations = masterData[1].mandatory_fields;
           this.pd_QC_Rating = Number(this.pdMasterData.qc_rating);
           this.pdApplicantData = data.records.applicants_details;
@@ -658,7 +658,7 @@ export class ViewPdComponent implements OnInit, OnDestroy {
 
   openVideoChat(){
     let dialogRef  = this.dialog.open(VideoChatComponent,{
-      data:{type:'init',random_string:this.pdMasterData[0].random_string},
+      data:{type:'init',random_string:this.pdMasterData[0].random_string,pd_id:this.viewID},
       maxWidth: '100vw',
       maxHeight: '100vh',
       height: '100%',
@@ -668,25 +668,33 @@ export class ViewPdComponent implements OnInit, OnDestroy {
     })
   }
   openPlayer(){
-    if(this.videoplayback.url == null) {
+    // if(this.videoplayback.url == null) {
-      this.notifier.notify('info',"No Videos Found");
+    //   this.notifier.notify('info',"No Videos Found");
-      return;
+    //   return;
-    }
+    // }
+    let params = {"pd_id":this.viewID,"random_string":this.masterRandomString}
+    this._pd.getRecordedPlaybackUrl(params).subscribe(result=>{
+      if(result && result['dataStatus'] && result['records'] && result['records'].length > 0) {
   let dialogRef  = this.dialog.open(VideoPlayerComponent,{
-    data:{videoUrl:this.videoplayback.url},
+    data:{videoUrl:result['records']},
     maxWidth: '100vw',
     maxHeight: '100vh',
-    height: '80%',
+    height: '90%',
-    width: '80%',
+    width: '70%',
     disableClose: false,
     panelClass:'video-player'
   })
 }
-getVideoUrl(pd_id,randomStr){
+else {
-  let params = {"pd_id":pd_id,"random_string":randomStr}
+  this.notifier.notify('info',"No Videos Found");
-  this._pd.getRecordedPlaybackUrl(params).subscribe(result=>{
-    this.videoplayback.url=result['url'];
-  })
 }
+})
+}
+// getVideoUrl(pd_id,randomStr){
+//   let params = {"pd_id":pd_id,"random_string":randomStr}
+//   this._pd.getRecordedPlaybackUrl(params).subscribe(result=>{
+//     this.videoplayback.url=result['url'];
+//   })
+// }
 
 }

ng6-seed/src/app/video-chat/video-chat.component.ts

@@ -157,7 +157,7 @@ export class VideoChatComponent implements OnInit {
        this.callDisconnectTimer =  setTimeout(()=>{
           this.notify("User is Busy !!.", "Try calling again later")
           this.disconnect()
-        },15000);
+        },30000);
         let event_data = {JSON_to_connect:data,type:'offer',random_string:this.chat_info.random_string,user_type:"officer"}
       this.socket.emit('Offer', event_data)
       }

ng6-seed/src/app/video-chat/video-player/video-player.component.html

@@ -1,4 +1,4 @@
-<div  align="end" style="position: absolute;right: 10%;z-index: 999" fxLayoutAlign="flex-end">
+<div  align="end" style="position: absolute;right: 16%;z-index: 999" fxLayoutAlign="flex-end">
   <!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="reset"
   matTooltipPosition="right" (click)="clearRandomString()"  *ngIf="!is_video_enable" >
   <mat-icon>cached</mat-icon>
@@ -14,9 +14,36 @@
     </button> -->
 </div>
 <!-- <mat-video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></mat-video> -->
-<mat-video title="Recorded Video" [autoplay]="true" [preload]="true" [fullscreen]="true" [download]="false" color="primary" spinner="spin" poster="../../assets/images/img/video-icon.png">
+<div #videoPlayer></div>
+<div style="height: 70% !important;position: sticky;top:0px" >
+<mat-video title="Recorded Video" [autoplay]="true" [preload]="true" [fullscreen]="true" [download]="true" color="primary" spinner="spin" poster="../../assets/images/img/video-icon.png">
   <source matVideoSource [src]="videoSrc" type="video/webm">
+
+</mat-video>
+</div>
   <!-- <source src="tutorial.webm" type="video/webm"> -->
   <!-- <track matVideoTrack src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> -->
   <!-- <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> -->
-</mat-video>
+<mat-card style="background-color: black;margin:0px;margin-top: 3px;">
+  <mat-card-content >
+  <div class="playbackListClass" fxLayout="row" *ngFor="let item of playbackList;let i=index" (click)="playVideo(i,item)">
+    <div fxLayout="column" fxFlex="94%" >
+      <div>
+      <p style="color:white;margin:0px;font-size: 20px;font-weight: bold">Video {{item.video_name}}</p>
+      <p *ngIf="item.date" style="color:white;margin:0px;font-size:16px;">{{item.date}}</p>
+    </div>
+      </div>
+      <div fxLayout="column"   align="start" >
+        <img *ngIf="selectedVideoIndex == i" src="assets/spinner/equalizer.gif" style="height:48px"/>
+        <div align="end"  *ngIf="selectedVideoIndex != i">
+          <!-- <button align="end" style="float: right" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Download Video"
+        matTooltipPosition="right"  (click)="downloadVideo(item.url)">
+        <mat-icon>file_download</mat-icon>
+    </button> -->
+  </div>
+    <p *ngIf="item.duration" style="color:white;margin:0px;font-size:14px;">{{item.duration}}</p>
+      </div>
+      <mat-divider style="border-top:1px solid rgb(105, 105, 105) !important"></mat-divider>
+  </div>
+</mat-card-content>
+</mat-card>

ng6-seed/src/app/video-chat/video-player/video-player.component.scss

@@ -1,9 +1,18 @@
 ::ng-deep { .video-player > mat-dialog-container {
-    background: rgba(255, 0, 0, 0.705);
+    background: black;
     padding: 0;
   }
 }
 .mat-raised-button{
     color: #ffffff;
     background: #ffffff5c;
+}
+.playbackListClass{
+  cursor: pointer;
+  // padding:5px;
+  min-height: 50px;
+}
+.playbackListClass :hover{
+  background-color: darkred;
+  // box-shadow: 2px 3px rgba(255, 0, 0, 0.308)
 }

ng6-seed/src/app/video-chat/video-player/video-player.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 
 @Component({
@@ -7,13 +7,28 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
   styleUrls: ['./video-player.component.scss']
 })
 export class VideoPlayerComponent implements OnInit {
+  playbackList = []
+  //  [{name:"Playback 1",duration:"20:01",date:"2020-05-20"},
+  // {name:"Playback 2",duration:"20:01",date:"2020-05-20"},
+  // {name:"Playback 3",duration:"20:01",date:"2020-05-20"},
+  // {name:"Playback 4",duration:"20:01",date:"2020-05-20"},
+  // {name:"Playback 5",duration:"20:01",date:"2020-05-20"},
+  // {name:"Playback 6",duration:"20:01",date:"2020-05-20"},
+  // {name:"Playback 7",duration:"20:01",date:"2020-05-20"},]
   videoSrc 
+  selectedVideoIndex: Number;
+  // videos_arr: any;
   // = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
   // = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4'
+  @ViewChild('videoPlayer') videoPlayerEle:ElementRef
   constructor( @Inject(MAT_DIALOG_DATA) public data:any,private matDialogRef:MatDialogRef<VideoPlayerComponent>) { 
     if(data) {
-      if(data.hasOwnProperty('videoUrl') && data.videoUrl && data.videoUrl != null) {
+      if(data.hasOwnProperty('videoUrl') && data.videoUrl && data.videoUrl.length > 0) {
-        this.videoSrc = data.videoUrl
+        this.playbackList = data.videoUrl
+        // this.playbackList.push({video_name:"Sample 1",url : "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"},
+        // {video_name:"Sample 2",url : "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"})
+        // this.videoSrc = data.videoUrl
+        this.playVideo(0,this.playbackList[0]);
       }
     }
   }
@@ -25,5 +40,18 @@ export class VideoPlayerComponent implements OnInit {
      console.log(this.videoSrc);
     }
   }
+  playVideo(i,obj) {
+    console.log(obj,this.videoPlayerEle);
+    this.selectedVideoIndex= i;
+    this.videoSrc = obj.url
+
+    if(this.videoPlayerEle && this.videoPlayerEle.nativeElement) {
+    this.videoPlayerEle.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" })
+    }
+  }
+  downloadVideo(url) {
+    console.log(url)
+    window.open(url);
+  }
 
 }

ng6-seed/src/environments/environment.stage.ts

@@ -7,18 +7,30 @@ export const environment = {
   socketServerUrl:'https://morning-garden-90282.herokuapp.com',
 
   authorization: 'sparqvenba2018',
-  login_string: "cognito-idp.ap-south-1.amazonaws.com/ap-south-1_qQ85yQZJO",
+  login_string: "cognito-idp.ap-south-1.amazonaws.com/ap-south-1_GqN9ZKRne",
-  seIdentityPoolId: 'ap-south-1:9a551eab-97cf-4991-b677-2f9bcd058961',
+  // seIdentityPoolId: 'ap-south-1:9a551eab-97cf-4991-b677-2f9bcd058961',
-  seUserPoolId: 'ap-south-1_qQ85yQZJO', 
+  // seUserPoolId: 'ap-south-1_qQ85yQZJO', 
-  seClientId: '67b4fnbuols5upms5to8bvqddh',
+  // seClientId: '67b4fnbuols5upms5to8bvqddh',
+  seIdentityPoolId : 'ap-south-1:d490a5f1-39d3-488b-ad5e-1b8c02d0b582',
+  seUserPoolId:'ap-south-1_GqN9ZKRne',
+  seClientId:'3na5nl7jascp007mg5s93rbj97',
   
   lenIdentityPoolId:"ap-south-1:ca22dabc-db59-4af5-9bb8-265f7ec95907",  //This value is not used in the project
-  lenUserPoolId: "ap-south-1_hFiGyr1Gw", //  Username :SPARQ_LENDER_DEV
+// OLD ONE
-  lenClientId: "vkotfqgqorgjh3fvp1r26hslv", // ClientName:LENDER_DEV_WEB
+    // lenUserPoolId: "ap-south-1_hFiGyr1Gw", //  Username 
+    // lenClientId: "vkotfqgqorgjh3fvp1r26hslv", // ClientName
 
-  venIdentityPoolId: "ap-south-1:5ad3ce43-4260-4273-87b2-e6a377b8e874",
+    lenUserPoolId:"ap-south-1_4kkhgsYo0",
-  venUserPoolId: "ap-south-1_K57yPaWxV", 
+    lenClientId:"3fn24p62t3k7ja0pa50g453p30",
-  venClientId: "6coneo2783pdhr30nstq32o86i",
+    
+
+    venIdentityPoolId: "ap-south-1:5ad3ce43-4260-4273-87b2-e6a377b8e874",
+// OLD ONE
+    // venUserPoolId: "ap-south-1_K57yPaWxV", 
+    // venClientId: "6coneo2783pdhr30nstq32o86i",
+
+    venUserPoolId:"ap-south-1_cBDvQB1ok",
+    venClientId:"6coneo2783pdhr30nstq32o86i",
 
   // firebase: {
   //   apiKey: "AIzaSyCzmyM0WJ0wdLf8UsYoZ4GreICimyt7SEk",

ng6-seed/src/environments/environment.ts

@@ -39,7 +39,7 @@ export const environment = {
   },
 
   region: 'ap-south-1',
-  login_string: "cognito-idp.ap-south-1.amazonaws.com/ap-south-1_qQ85yQZJO",
+  login_string: "cognito-idp.ap-south-1.amazonaws.com/ap-south-1_GqN9ZKRne",
           
   // identityPoolId: 'ap-south-1:9a551eab-97cf-4991-b677-2f9bcd058961',
   // UserPoolId: 'ap-south-1_qQ85yQZJO', 
@@ -47,18 +47,31 @@ export const environment = {
 
   // lenClientId: "6egsdssf0i7h2o9mscqgqbn788" // ClientName
 
-  seIdentityPoolId: 'ap-south-1:9a551eab-97cf-4991-b677-2f9bcd058961',
+// OLD ONE
-  seUserPoolId: 'ap-south-1_qQ85yQZJO', 
+  // seIdentityPoolId: 'ap-south-1:9a551eab-97cf-4991-b677-2f9bcd058961',
-  seClientId: '67b4fnbuols5upms5to8bvqddh',
+  // seUserPoolId: 'ap-south-1_qQ85yQZJO', 
+  // seClientId: '67b4fnbuols5upms5to8bvqddh', 
+
+      seIdentityPoolId : 'ap-south-1:d490a5f1-39d3-488b-ad5e-1b8c02d0b582',
+      seUserPoolId:'ap-south-1_GqN9ZKRne',
+      seClientId:'3na5nl7jascp007mg5s93rbj97',
 
     lenIdentityPoolId:"ap-south-1:ca22dabc-db59-4af5-9bb8-265f7ec95907",  //This value is not used in the project
-    lenUserPoolId: "ap-south-1_hFiGyr1Gw", //  Username 
+// OLD ONE
-    lenClientId: "vkotfqgqorgjh3fvp1r26hslv", // ClientName
+    // lenUserPoolId: "ap-south-1_hFiGyr1Gw", //  Username 
+    // lenClientId: "vkotfqgqorgjh3fvp1r26hslv", // ClientName
+
+    lenUserPoolId:"ap-south-1_4kkhgsYo0",
+    lenClientId:"3fn24p62t3k7ja0pa50g453p30",
     
 
     venIdentityPoolId: "ap-south-1:5ad3ce43-4260-4273-87b2-e6a377b8e874",
-    venUserPoolId: "ap-south-1_K57yPaWxV", 
+// OLD ONE
-    venClientId: "6coneo2783pdhr30nstq32o86i",
+    // venUserPoolId: "ap-south-1_K57yPaWxV", 
+    // venClientId: "6coneo2783pdhr30nstq32o86i",
+
+    venUserPoolId:"ap-south-1_cBDvQB1ok",
+    venClientId:"6coneo2783pdhr30nstq32o86i",
   
 
   rekognitionBucket: '',