Sineedge/sparqsineedge
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
venbatechnologies@gmail.com 2020-09-05 13:21:49 +05:30
parent 5fcb071b31
commit bcc4c67ea1
10 changed files with 143 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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) {

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

@ -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>

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

@ -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')) {
this.getVideoUrl(this.viewID,this.masterRandomString)
this.videoplayback.enableBtn = true;
}
// 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.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) {
this.notifier.notify('info',"No Videos Found");
return;
}
// if(this.videoplayback.url == null) {
// this.notifier.notify('info',"No Videos Found");
// 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%',
width: '80%',
height: '90%',
width: '70%',
disableClose: false,
panelClass:'video-player'
})
}
getVideoUrl(pd_id,randomStr){
let params = {"pd_id":pd_id,"random_string":randomStr}
this._pd.getRecordedPlaybackUrl(params).subscribe(result=>{
this.videoplayback.url=result['url'];
})
else {
this.notifier.notify('info',"No Videos Found");
}
})
}
// getVideoUrl(pd_id,randomStr){
// let params = {"pd_id":pd_id,"random_string":randomStr}
// this._pd.getRecordedPlaybackUrl(params).subscribe(result=>{
// this.videoplayback.url=result['url'];
// })
// }
}

2
ng6-seed/src/app/video-chat/video-chat.component.ts
View File

@ -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)
}

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

@ -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>

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

@ -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)
}

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

@ -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) {
this.videoSrc = data.videoUrl
if(data.hasOwnProperty('videoUrl') && data.videoUrl && data.videoUrl.length > 0) {
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);
}
}

BIN
ng6-seed/src/assets/spinner/equalizer.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

30
ng6-seed/src/environments/environment.stage.ts
View File

@ -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",
seIdentityPoolId: 'ap-south-1:9a551eab-97cf-4991-b677-2f9bcd058961',
seUserPoolId: 'ap-south-1_qQ85yQZJO',
seClientId: '67b4fnbuols5upms5to8bvqddh',
login_string: "cognito-idp.ap-south-1.amazonaws.com/ap-south-1_GqN9ZKRne",
// seIdentityPoolId: 'ap-south-1:9a551eab-97cf-4991-b677-2f9bcd058961',
// 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 :SPARQ_LENDER_DEV
lenClientId: "vkotfqgqorgjh3fvp1r26hslv", // ClientName:LENDER_DEV_WEB
// OLD ONE
// lenUserPoolId: "ap-south-1_hFiGyr1Gw", // Username
// lenClientId: "vkotfqgqorgjh3fvp1r26hslv", // ClientName
venIdentityPoolId: "ap-south-1:5ad3ce43-4260-4273-87b2-e6a377b8e874",
venUserPoolId: "ap-south-1_K57yPaWxV",
venClientId: "6coneo2783pdhr30nstq32o86i",
lenUserPoolId:"ap-south-1_4kkhgsYo0",
lenClientId:"3fn24p62t3k7ja0pa50g453p30",
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",

29
ng6-seed/src/environments/environment.ts
View File

@ -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',
seUserPoolId: 'ap-south-1_qQ85yQZJO',
seClientId: '67b4fnbuols5upms5to8bvqddh',
// OLD ONE
// seIdentityPoolId: 'ap-south-1:9a551eab-97cf-4991-b677-2f9bcd058961',
// 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
lenClientId: "vkotfqgqorgjh3fvp1r26hslv", // ClientName
// OLD ONE
// 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",
venClientId: "6coneo2783pdhr30nstq32o86i",
// OLD ONE
// venUserPoolId: "ap-south-1_K57yPaWxV",
// venClientId: "6coneo2783pdhr30nstq32o86i",
venUserPoolId:"ap-south-1_cBDvQB1ok",
venClientId:"6coneo2783pdhr30nstq32o86i",
rekognitionBucket: '',