Initial commit

2021-06-01 11:51:41 +05:30 · 2021-06-01 11:51:41 +05:30 · 83b69d80ad
commit 83b69d80ad
228 changed files with 19962 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,27 @@
+# VideoChatUser
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.20.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
--- a/angular.json
+++ b/angular.json
@ -0,0 +1,134 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "video-chat-user": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/video-chat-user",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": false,
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "video-chat-user:build",
+            "sslKey": "../../../SSL/server.key",
+             "sslCert": "../../../SSL/server.crt"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "video-chat-user:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "video-chat-user:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "video-chat-user:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "video-chat-user:serve:production"
+            }
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "video-chat-user"
+}
--- a/12
+++ b/12
@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.
--- a/e2e/protractor.conf.js
+++ b/e2e/protractor.conf.js
@ -0,0 +1,32 @@
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    browserName: 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
--- a/e2e/src/app.e2e-spec.ts
+++ b/e2e/src/app.e2e-spec.ts
@ -0,0 +1,23 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('video-chat-user app is running!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});
--- a/e2e/src/app.po.ts
+++ b/e2e/src/app.po.ts
@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get(browser.baseUrl) as Promise<any>;
+  }
+
+  getTitleText() {
+    return element(by.css('app-root .content span')).getText() as Promise<string>;
+  }
+}
--- a/e2e/tsconfig.json
+++ b/e2e/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
--- a/karma.conf.js
+++ b/karma.conf.js
@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, './coverage/video-chat-user'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,53 @@
+{
+  "name": "video-chat-pdgenie",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~8.2.14",
+    "@angular/cdk": "~8.2.3",
+    "@angular/common": "~8.2.14",
+    "@angular/compiler": "~8.2.14",
+    "@angular/core": "~8.2.14",
+    "@angular/flex-layout": "^8.0.0-beta.27",
+    "@angular/forms": "~8.2.14",
+    "@angular/material": "^8.2.3",
+    "@angular/platform-browser": "~8.2.14",
+    "@angular/platform-browser-dynamic": "~8.2.14",
+    "@angular/router": "~8.2.14",
+    "hammerjs": "^2.0.8",
+    "ngx-ui-loader": "^8.0.0",
+    "rxjs": "~6.4.0",
+    "tslib": "^1.10.0",
+    "twilio-video": "^2.7.3",
+    "zone.js": "~0.9.1"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.803.20",
+    "@angular/cli": "~8.3.20",
+    "@angular/compiler-cli": "~8.2.14",
+    "@angular/language-service": "~8.2.14",
+    "@types/node": "~8.9.4",
+    "@types/jasmine": "~3.3.8",
+    "@types/jasminewd2": "~2.0.3",
+    "codelyzer": "^5.0.0",
+    "jasmine-core": "~3.4.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.1.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "protractor": "~5.4.0",
+    "ts-node": "~7.0.0",
+    "tslint": "~5.15.0",
+    "typescript": "~3.5.3"
+  }
+}
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { PdComponent } from './pd/pd.component';
+// import { PdImagesComponent } from './pd/pd-images/pd-images.component';
+import { UrlCheckGuard } from './pd/services/guards/url-check.guard';
+
+
+const routes: Routes = [
+  {
+    path:'',
+    redirectTo:'error',
+    pathMatch:'full'
+  },
+  {
+    path:'',
+    component:PdComponent,
+    canActivate:[UrlCheckGuard],
+    children:[
+      // {
+      //     path:'pd-images/:randomStr',
+      //     loadChildren:() => import('./pd/pd.module').then(m => m.PdModule)
+      // }
+      {
+          path:'chat/:randomStr',
+          loadChildren:() => import('./pd/pd.module').then(m => m.PdModule)
+      }
+    ]
+  }, {
+    path: '**',
+    redirectTo: 'session/404'
+  },
+  {
+    path:'error',
+    loadChildren:() => import('./error/error.module').then(m=>m.ErrorModule)
+  }
+  
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes,{useHash:true})],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -0,0 +1,24 @@
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
+<!-- * * * * * * * to get started with your project! * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+<!--  -->
+
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+
+
+<router-outlet></router-outlet>
+<ngx-ui-loader  overlayColor="rgba(40,40,40,0.51)" fgsType="wandering-cubes"
+fgsSize= "110" overlayColor ="rgba(40,40,40,0.51)" blur = "1" fgsColor = "red" pbColor = "red"></ngx-ui-loader>
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@ -0,0 +1,35 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'tele-pd-user'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('tele-pd-user');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('tele-pd-user app is running!');
+  });
+});
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'tele-pd-user';
+  constructor(){
+    // console.log("dssssssssssss")
+    // this.ngxService.start(); // start foreground spinner of the master loader with 'default' taskId
+    // // Stop the foreground loading after 5s
+    // setTimeout(() => {
+    //    this.ngxService.stop(); // stop foreground spinner of the master loader with 'default' taskId
+    // }, 5000);
+  }
+}
+
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -0,0 +1,34 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { PdComponent } from './pd/pd.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MaterialModule } from './pd/shared/material/material.module';
+import { FlexLayoutModule } from "@angular/flex-layout";
+import { HttpClientModule } from '@angular/common/http';
+import { NgxUiLoaderModule } from 'ngx-ui-loader';
+import { LocationStrategy, HashLocationStrategy } from '@angular/common';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    PdComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MaterialModule,
+    FlexLayoutModule,
+    HttpClientModule,
+    NgxUiLoaderModule
+  ],
+  providers: [ {
+    provide: LocationStrategy,
+    useClass: HashLocationStrategy,
+  },],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
--- a/src/app/error/404/error-404-component.html
+++ b/src/app/error/404/error-404-component.html
@ -0,0 +1,22 @@
+<div class="relative">
+    <div class="form-bg">
+            
+            
+                    <h3 class="page-title"><img src="assets/images/PD.jpeg" style="height: 50px;;"> <span> PD Genie </span>
+                    </h3>
+            
+        <div class="relative error-wrapper">
+            <h1>
+                Oops!</h1>
+            <span class="error-text">{{errorMsgObject.title}}</span>
+            <h2>
+                {{errorMsgObject.subtitle}}</h2>
+            <div class="error-details">
+                <p>{{errorMsgObject.message}}</p>
+            </div>
+            <div class="error-actions" *ngIf="errorMsgObject.is_homebtn">
+                <button class="mat-blue" mat-raised-button (click)="takeMeToHome()">Take me to Home</button>
+            </div>
+        </div>
+    </div>
+</div>
--- a/src/app/error/404/error-404-component.scss
+++ b/src/app/error/404/error-404-component.scss
@ -0,0 +1,9 @@
+.form-bg {
+//background-image:url('http://www.ssa.sineedge.com/beta/assets/images/login.jpg') !important;
+//background-image: url(../../../assets/images/login_o.jpg);
+//background-color: #F44336;
+    background: url(../../../assets/images/bg.png) repeat-x 0 0 #ffffff;
+    height: 100vh !important;
+    background-position: center !important;
+    // min-height: calc(90vh + 90px) !important;
+}
--- a/src/app/error/404/error-404.component.ts
+++ b/src/app/error/404/error-404.component.ts
@ -0,0 +1,34 @@
+import { Component, OnInit,ViewEncapsulation }      from '@angular/core';
+import { Router } from '@angular/router';
+import { DataServiceService, errorMsgInterface } from 'src/app/pd/services/data-service/data-service.service';
+
+@Component({
+    selector: 'ms-error-404',
+  	templateUrl:'./error-404-component.html',
+ 	  styleUrls: ['./error-404-component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ErrorOneComponent implements OnInit {
+errorMsgObject:errorMsgInterface
+	constructor(private router: Router,private dataService:DataServiceService) {}
+
+   	ngOnInit() {
+			//  this.errorMsgObject ={
+			// 	title:"404",
+			// 	subtitle:'Not Found',
+			// 	message:'The requested URL is not found on the server',
+			// 	is_homebtn:false
+			// }
+			 this.errorMsgObject = this.dataService.errorMsg
+
+			 console.log(this.errorMsgObject);
+		 }
+		 
+		 takeMeToHome() {
+			this.router.navigate(['/home']);
+		 }
+
+ 
+}
+
+
--- a/src/app/error/503/error-503-component.html
+++ b/src/app/error/503/error-503-component.html
@ -0,0 +1,23 @@
+<div class="relative">
+        <div class="form-bg">
+        <div fxLayout="row" fxLayoutAlign="center" class="pt-2">
+                <!-- <p>SINEEDGE Login Details</p> -->
+                <h3 class="page-title"><img src="assets/images/PD.jpeg" style="height: 50px;;"> <span> PD Genie </span>
+                </h3>
+        </div>
+
+        <div class="relative error-wrapper">
+            <h1>
+                Error!</h1>
+            <span class="error-text">505</span>
+            <h2>
+                Service is currently unavailbale</h2>
+            <div class="error-details">
+                <p>Sorry, but the page you were trying to view does not exist</p>
+            </div>
+            <div class="error-actions">
+                <button class="mat-blue" mat-raised-button (click)="takeMeToHome()">Take me to Home</button>
+            </div>
+        </div>
+    </div>
+</div>
--- a/src/app/error/503/error-503-component.scss
+++ b/src/app/error/503/error-503-component.scss
@ -0,0 +1,9 @@
+.form-bg {
+    //background-image:url('http://www.ssa.sineedge.com/beta/assets/images/login.jpg') !important;
+    //background-image: url(../../../assets/images/login_o.jpg);
+    //background-color: #F44336;
+        background: url(../../../assets/images/bg.png) repeat-x 0 0 #ffffff;
+        height: 100vh !important;
+        background-position: center !important;
+        // min-height: calc(90vh + 90px) !important;
+    }
--- a/src/app/error/503/error-503.component.ts
+++ b/src/app/error/503/error-503.component.ts
@ -0,0 +1,23 @@
+import { Component, OnInit,ViewEncapsulation }      from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'ms-error-503',
+  	templateUrl:'./error-503-component.html',
+ 	  styleUrls: ['./error-503-component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ErrorTwoComponent implements OnInit {
+
+	constructor(private router: Router) {}
+
+   	ngOnInit() {
+ 
+   	}
+
+		 takeMeToHome() {
+			this.router.navigate(['/home']);
+		 } 
+}
+
+
--- a/src/app/error/error.module.ts
+++ b/src/app/error/error.module.ts
@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule} from '@angular/material';
+import {
+  MatCardModule,
+  MatInputModule,
+  MatRadioModule,
+  MatButtonModule,
+  MatProgressBarModule,
+  MatToolbarModule } from '@angular/material';
+import { ErrorOneComponent}  from './404/error-404.component';
+import { ErrorTwoComponent}  from './503/error-503.component';
+
+import { ErrorRoutes } from './error.routing';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIconModule,
+    MatCardModule,
+    MatIconModule,
+    MatInputModule,
+    MatRadioModule,
+    MatButtonModule,
+    MatProgressBarModule,
+    MatToolbarModule,
+    RouterModule.forChild(ErrorRoutes)
+  ],
+  declarations: [ 
+    ErrorOneComponent,
+    ErrorTwoComponent,
+  ]
+})
+
+export class ErrorModule {}
--- a/src/app/error/error.routing.ts
+++ b/src/app/error/error.routing.ts
@ -0,0 +1,19 @@
+import { Routes } from '@angular/router';
+
+import { ErrorOneComponent}  from './404/error-404.component';
+import { ErrorTwoComponent}  from './503/error-503.component';
+
+export const ErrorRoutes: Routes = [{
+  path: '',
+  redirectTo: '404',
+  pathMatch: 'full',
+},{
+  path: '',
+  children: [{
+    path: '404',
+    component: ErrorOneComponent
+  }, {
+    path: '503',
+    component: ErrorTwoComponent
+  }]
+}];
--- a/src/app/pd/chat-component/chat-component.component.html
+++ b/src/app/pd/chat-component/chat-component.component.html
@ -0,0 +1,86 @@
+<div fxLayout="column"> 
+    <!-- <div  align="end" style="float:right;padding: 10px !important;" fxLayoutAlign="flex-end">
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close"
+            matTooltipPosition="right" (click)="close_all()">
+            <mat-icon>close</mat-icon>
+        </button>
+    </div> -->
+    <!-- <mat-dialog-content> -->
+      <!-- <div fxLayout="row"> -->
+        
+    <div [style.visibility] ="is_video_enable? 'visible' : 'hidden'" >
+      <!-- <div class="my_video"> -->
+    <div #myvideo id="myvideo"  muted></div>
+    <!-- </div> -->
+    <div class="peer_video" fxLayoutAlign="center"  [ngStyle] = "{'height': !peerVideoEnable ? '5%': ''}">
+    <div id="peervideo" #peervideo  [style.visibility]="peerVideoEnable? 'visible' : 'hidden'"></div>
+    </div>
+    <!-- <input type="text" ><br/> -->
+    <!-- {{peerVideoEnable}} -->
+    <div class="peer_message" *ngIf="peerVideoEnable == false" fxLayoutAlign="center" style="position: absolute;bottom:15%;width: 100%;justify-content: center">
+        <p style="text-align: center;"> {{message}} </p><br/>
+    </div>
+
+    <div *ngIf="type == '2' && !peerVideoEnable" class="copy_link">
+        <p>To Copy Customer Link  <button mat-stroked-button (click)="copyToClipBoard(cusUrl)"><mat-icon>content_copy</mat-icon>Click here</button></p>
+      </div>
+    <!-- <div class="input-group mb-3">
+        <label>Paste the JSON String</label>
+        <input type="text" class="form-control" [(ngModel)]="targetpeer" placeholder="JSON String" aria-label="Username" aria-describedby="basic-addon1">
+      </div> -->
+    <!-- <button type="button" class="btn btn-primary" (click)="connect()" >Connect</button> -->
+    <!-- <button type="button"  (click)="message()">Send Message</button> -->
+    <div style="text-align: center;float:center" fxLayout="row" fxLayoutAlign="center" fxLayoutGap = "35px" style="position: absolute;bottom:5%;width: 100%">
+    <!-- <button type="button" style="width: 90px" (click)="switch_camera()" class="btn btn-primary btn-lg" disabled #camera_switch>Switch</button> -->
+    <!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Switch Camera"
+            matTooltipPosition="above" (click)="switch_camera()" disabled #camera_switch >
+            <mat-icon>switch_camera</mat-icon>
+        </button> -->
+    <!-- <button type="button" style="width: 90px" (click)="start_Calling('init')" class="btn btn-primary btn-lg" *ngIf="!peerVideoEnable">Call</button><br/> -->
+    <!-- <button type="button" style="width: 90px" (click)="start_Calling('notinit')" class="btn btn-primary btn-lg" *ngIf="!peerVideoEnable">Recieve</button><br/> -->
+    <!-- <button    class="mr-1 mb-1 hover-icon" type="button" matTooltip="Disconnect"
+    matTooltipPosition="above"  *ngIf="peerVideoEnable"><mat-icon>call_end</mat-icon></button><br/> -->
+    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Video Off / On"
+            matTooltipPosition="above" (click)="videoHandling()" *ngIf="peerVideoEnable">
+            <mat-icon *ngIf="!twilioService.camera">videocam_off</mat-icon>
+            <mat-icon *ngIf="twilioService.camera">videocam</mat-icon>
+        </button>&nbsp;&nbsp;&nbsp;
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Mic Off / On"
+            matTooltipPosition="above" (click)="micMuteHandling()" *ngIf="peerVideoEnable">
+            <mat-icon *ngIf="!twilioService.microphone">mic_off</mat-icon>
+            <mat-icon *ngIf="twilioService.microphone">mic</mat-icon>
+        </button>&nbsp;&nbsp;&nbsp;
+        <span style="margin: 0px !important;" *ngIf="peerVideoEnable && twilioService.switch_camera_option">
+             <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Switch Camera"
+            matTooltipPosition="above" (click)="twilioService.switchCamera()" >
+            <mat-icon>switch_camera</mat-icon>
+        </button> &nbsp;&nbsp;&nbsp;
+        </span>
+    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Disconnect"
+            matTooltipPosition="above" (click)="twilioService.disconnect()"  >
+            <mat-icon>call_end</mat-icon>
+        </button>
+    </div>
+    </div>
+    <div fxLayoutAlign="center center"  *ngIf="!is_video_enable" >
+        <div  style="position: relative;bottom: 50%">
+            <mat-spinner *ngIf="is_spinner"></mat-spinner>
+          </div>
+        <div fxLayout="column" fxLayoutAlign="center center" style="position: absolute;bottom: 40%">
+          <div fxLayout="row" *ngIf="!is_spinner">
+      <button mat-raised-button type="button" matTooltip="Start Video Chat" matTooltipPosition = "above" (click)="connect()">
+        <mat-icon>videocam</mat-icon>
+        {{type == '1' ? 'Connect with PD Officer' : type == '2' ? 'Connect with Customer' : 'Connect the Call'}}
+      </button>
+    </div>
+        <!-- </div> -->
+      <!-- <div fxLayout="column"> -->
+        
+      <div class="note-label">
+        <p>{{message}}</p>
+      </div>
+    <!-- </div> -->
+    </div>
+    </div>
+    <!-- </div> -->
+    <!-- </mat-dialog-content> -->
--- a/src/app/pd/chat-component/chat-component.component.scss
+++ b/src/app/pd/chat-component/chat-component.component.scss
@ -0,0 +1,110 @@
+body{
+    background: #71AFFF;
+    padding: 0;
+  }
+// }
+.copy_link {
+    // position: absolute;
+    // bottom: 40%;
+    margin-top: 21%;
+    text-align: center;
+    border: 1px dashed #cececef5;
+    padding: 5px;
+    border-radius: 10px;
+    p{
+        color: #840000c9;
+        font-weight: 500;
+        font-family: monospace;
+        padding: 5px;
+    }
+}
+@media(max-width:500px) {
+
+    div#myvideo {
+        max-width: 32%;
+        // min-width: 150px;
+        position: absolute;
+        // border: 2px solid #9E9E9E;
+        top:0;
+        left: 0;
+        // border-radius: 10px;
+        margin: 1%
+        // /* top: 20px;
+}
+.body-container {
+    padding: 0px !important;
+}
+div#peervideo {
+    /* height: 498px; */
+    // position: relative;
+    // margin-top: 126px;
+    width: 100%;
+    // margin-top: 25%;
+
+}
+
+// .peer_message{
+//     font-size: 20px;
+//     position: absolute;
+//     top: 11%;
+//     bottom: 10%;
+//     float: right;
+//     padding: 57px;
+//     /* border: 2px solid lavender; */
+//     left: 8%;
+//     p{
+//         text-align: center;
+//     }
+// }
+    }
+    @media(min-width:500px) {
+        .peer_video{
+            max-height: 80vh;
+        }
+    div#myvideo {
+        max-width: 22%;
+        // min-width: 150px;
+        position: absolute;
+        // border: 2px solid #9E9E9E;
+        top:0;
+        left: 0;
+        // border-radius: 10px;
+        margin: 1%
+        // max-width: 45%;
+        // text-align: center;
+        // margin-left:3%;
+        // margin-top:1%;
+        // min-width: 150px;
+        // position: absolute;
+        // border: 2px solid #9E9E9E;
+        // /* top: 20px;
+}
+
+div#peervideo {
+    /* height: 498px; */
+    max-width: 100%;
+    text-align: center;
+    margin-left:3%;
+    margin-top:1%;
+    // position: relative;
+    // margin-top: 126px;
+    // width: 100%;
+}
+}
+.peer_video{
+    max-height: 85vh !important;
+    text-align: center
+}
+body{
+    margin:10px !important;
+}
+.note-label{
+    justify-content: center;
+    text-align: center;
+   
+}
+::ng-deep {
+    span {
+        margin-right: 0px !important;
+    }
+}
--- a/src/app/pd/chat-component/chat-component.component.spec.ts
+++ b/src/app/pd/chat-component/chat-component.component.spec.ts
@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatComponentComponent } from './chat-component.component';
+
+describe('ChatComponentComponent', () => {
+  let component: ChatComponentComponent;
+  let fixture: ComponentFixture<ChatComponentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChatComponentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChatComponentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pd/chat-component/chat-component.component.ts
+++ b/src/app/pd/chat-component/chat-component.component.ts
@ -0,0 +1,298 @@
+import { Component, OnInit, ChangeDetectorRef, ViewChild, HostListener, ElementRef, Renderer2,RendererFactory2 } from '@angular/core';
+// import * as SimplePeer from 'simple-peer'
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog } from '@angular/material';
+// import { IncomingCallComponent } from '../incoming-call/incoming-call.component';
+import { ApiServiceService } from '../services/api-service/api-service.service';
+import { TwilioService } from '../services/twilio/twilio.service';
+import {createLocalTracks} from 'twilio-video'
+
+@Component({
+  selector: 'app-chat-component',
+  templateUrl: './chat-component.component.html',
+  // templateUrl:'./test.html',
+  styleUrls: ['./chat-component.component.scss']
+})
+
+export class ChatComponentComponent implements OnInit {
+  randomStr: string;
+
+  // constructor(private cdRef: ChangeDetectorRef,private actRoute:ActivatedRoute,
+  //   private matDialog:MatDialog,private apiService:ApiServiceService) {
+  //   // this._notificationService.requestPermission();
+  //   // this.notify('Approval','This is First Alert -- By Debasis Saha')
+  //   console.log("Version #8")
+  //    this.randomStr = this.actRoute.snapshot.paramMap.get('randomStr')
+  //    console.log(this.randomStr);
+
+  // }
+
+
+  @ViewChild('myvideo', { static: true }) localVideo: ElementRef;
+  @ViewChild('peervideo', { static: true }) remoteVideo: ElementRef;
+  roomName = "First";
+  username: string = ''
+  access_tokan = '';
+  is_video_enable: boolean = false
+  // myVideoEnable:boolean = false
+  peerVideoEnable: boolean = false
+  is_spinner: boolean = false;
+  // app_id;
+  message: string = "Please wait";
+  pd_id: string;
+  type: string;
+  type_name: string;
+  cusUrl: string = '';
+  private renderer: Renderer2;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    // private httpService: HttpService,
+    public twilioService: TwilioService,private rendererFactory: RendererFactory2,) {
+      this.renderer = rendererFactory.createRenderer(null, null)
+    this.randomStr = this.route.snapshot.paramMap.get('randomStr')
+    // this.flag= this.route.snapshot.paramMap.get('flag');
+    this.type = this.route.snapshot.paramMap.get('type')
+    this.pd_id = this.route.snapshot.paramMap.get('id')
+    if (this.type == null || this.pd_id == null) {
+      this.twilioService.openSnackBar("URL is invalid. Please check the URL", '');
+      return
+    }
+    this.type_name = this.type == '1' ? 'CUSTOMER' : 'PDOFFICER'
+    if(this.type == '2') {
+      if(window.location.origin.includes('localhost')){
+      this.cusUrl = window.location.origin+'/#/chat/'+this.randomStr+";id="+this.pd_id+";type=1;";
+      }
+      else{
+        this.cusUrl = window.location.origin+'/vchat/#/chat/'+this.randomStr+";id="+this.pd_id+";type=1;";
+      }
+    }
+    this.username = this.route.snapshot.paramMap.get('name')
+    if (this.username == null) {
+      this.username = this.type_name
+    }
+    console.log(this.route.snapshot.paramMap.get('id'), this.route.snapshot.paramMap.get('type'), this.route.snapshot.paramMap.get('name'))
+    this.twilioService.msgSubject.subscribe(r => {
+      this.message = r;
+    });
+    // this.message = "Please Wait"
+    this.twilioService.btnSubject.subscribe((data: any) => {
+      if (data.name == "is_video_enable") {
+        this.is_video_enable = data.value
+      }
+      else if (data.name == "peerVideoEnable") {
+        this.peerVideoEnable = data.value
+      }
+    })
+
+
+    console.log(navigator.getUserMedia)
+    // if (navigator.getUserMedia)
+    // navigator.getUserMedia({ audio: true, video: true }, function (stream) {
+
+    // }, function (error) {
+    // console.log(error.name + ": " + error.message);
+    // });
+    // else if (navigator.vendor.match(/[Aa]+pple/g) && navigator.vendor.match(/[Aa]+pple/g).length > 0)
+    // navigator.mediaDevices.getUserMedia({ audio: true, video: true })
+    // .then(function () { })
+    // .catch(function (error) {
+    // console.log(error.name + ": " + error.message);
+
+    // });
+    // this.baCustomPreLoader.show();
+    // this.route.params.subscribe(params => {
+    // this.app_id = params['id'];
+    // const body = {
+    // bookingId: this.app_id
+    // };
+
+    // this.twilioService.getData('/twilio/getToken', body).subscribe(res => {
+    // if (res.statusCode === 200) {
+    // this.roomName = res.data.roomName;
+    // this.access_tokan = res.data.accessToken;
+    // this.connect();
+    // }}, (error) => {
+    // alert(error.message);
+    // });
+
+    // });
+
+    window.addEventListener('unload', () => {
+      this.twilioService.disconnect();
+    })
+  }
+  ngOnInit() {
+    if (this.type == null || this.pd_id == null) {
+      this.twilioService.openSnackBar("URL is invalid. Please check the URL", '');
+      this.message = "URL is invalid. Please check the URL"
+      this.is_spinner = true;
+      return
+    }
+
+    this.twilioService.localVideo = this.localVideo;
+    this.twilioService.remoteVideo = this.remoteVideo;
+    this.twilioService.user_data = {type:this.type,pd_id:this.pd_id,random_string:this.randomStr,type_name:this.type_name}
+
+    console.log("Getting token", this.twilioService.localVideo, this.localVideo, this.remoteVideo, this.type_name);
+  }
+
+  // disconnect() {
+  //   if (this.twilioService.roomObj && this.twilioService.roomObj !== null) {
+  //     this.twilioService.roomObj.disconnect();
+  //     this.twilioService.roomObj = null;
+  //   } else {
+  //     // this.router.navigate(['thanks']);
+  //     console.log("Disconnected");
+  //   }
+  //   this.message = ""
+  //   this.is_video_enable = false
+  //   this.peerVideoEnable = false
+    
+  // }
+
+  connect() {
+    this.is_spinner = true;
+    this.message = "Please Wait.."
+    let tokenParams = { pd_id: this.pd_id, random_key: this.randomStr, user_type: this.type_name, officer_name: this.roomName }
+    return this.twilioService.getToken(tokenParams).subscribe(res => {
+      if (res.dataStatus && res.records) {
+        this.access_tokan = res.records;
+        this.message = ''
+        // this.connect();
+        // let accessToken = this.access_tokan;
+        // console.log("Create or join room", accessToken);
+        this.connectTheCall()
+      }
+
+      else {
+        alert("Something went wrong..");
+        this.message = "Something went wrong.."
+      }
+    }, (error) => {
+      alert(error.message);
+      this.message = error.message
+      this.is_spinner = false
+    });
+  }
+ async connectTheCall() {
+    let accessToken = this.access_tokan;
+    // console.log("Create or join room", accessToken);
+    // OLD ONE (START)
+//     const mediaDevices:any = await this.twilioService.getMediaDevices().catch(err=>{this.handleMediaError(err);return})
+//     const videoInput = mediaDevices.find(device => device.kind === 'videoinput');
+//      const mediaTracks = await createLocalTracks({
+//       audio: true,
+//       video: {  video: { deviceId: videoInput.deviceId } }
+//     }).catch(err=>{this.handleMediaError(err);return});
+//   // },err=>{this.handleMediaError(err);return;})
+//     // Display camera preview.
+// // const localVideoTrack = mediaTracks.find(track => track.kind === 'video');
+// // this.localVideo.nativeElement.appendChild(localVideoTrack.attach());
+//   // await this.startLocalVideo(mediaTracks)
+//     this.is_spinner = false
+//     this.twilioService.mediaTracks = mediaTracks
+//     console.log("Local Tracks",this.twilioService.mediaTracks);
+//    await this.twilioService.connectToRoom(accessToken, {
+//       name: this.username,
+//       tracks:mediaTracks,
+//       // bandwidthProfile: {
+//       //   video: {
+//       //     mode: 'collaboration',
+//       //     renderDimensions: {
+//       //       high: { height: 1080, width: 1980 },
+//       //       standard: { height: 720, width: 1280 },
+//       //       low: { height: 176, width: 144 }
+//       //     }
+//       //   }
+//       // },
+//     })
+ // END OF OLD ONE ()
+
+    navigator.mediaDevices.enumerateDevices().then(devices => {
+      const videoInput = devices.find(device => device.kind === 'videoinput');
+    let  media_devices = devices.filter(vv=>vv.kind === 'videoinput')
+      console.log("video devices from getMediaDevices Fun",media_devices)
+      if(media_devices.length > 1) {
+        this.twilioService.switch_camera_option =true
+      }
+      return createLocalTracks({ audio: true, video: { deviceId: videoInput.deviceId } });
+    }).then(localTracks => {
+      this.is_spinner = false
+      this.twilioService.mediaTracks = localTracks
+          console.log("Local Tracks",this.twilioService.mediaTracks);
+       this.twilioService.connectToRoom(accessToken, {  name: this.username, tracks: localTracks,logLevel: 'debug' });
+    },err=>{
+      this.handleMediaError(err)
+      this.is_spinner = false
+      return;
+    })
+  }
+
+
+  // mute() { this.twilioService.mute(); }
+
+  // unmute() { this.twilioService.unmute(); }
+  micMuteHandling() {
+    this.twilioService.micHandling()
+  }
+  videoHandling() {
+    this.twilioService.videoHandling()
+  }
+
+
+  @HostListener('window:beforeunload', ['$event'])
+  @HostListener('window:pagehide',['$event'])
+  unloadHandler(event) {
+  console.log("unload caled",event);
+  // if(this.peerVideoEnable) {
+    this.twilioService.disconnect();
+  // }
+  }
+  
+  copyToClipBoard(message) {
+    if(message == '') {
+      this.twilioService.openSnackBar("Unable to copy customer url",'');
+      return
+    }
+    const selBox = document.createElement('textarea');
+    selBox.style.position = 'fixed';
+    selBox.style.left = '0';
+    selBox.style.top = '0';
+    selBox.style.opacity = '0';
+    selBox.value = message;
+    document.body.appendChild(selBox);
+    selBox.focus();
+    selBox.select();
+    document.execCommand('copy');
+    document.body.removeChild(selBox);
+    this.twilioService.openSnackBar("Customer URL copied to clipboard",'');
+  }
+//   startLocalVideo(mediaTracks): void {
+//     // console.log("Local Video",this.roomObj.localParticipant)
+//   // this.roomObj.localParticipant.videoTracks.forEach(publication => {
+//   // const element = publication.track.attach();
+//   // this.renderer.data.id = publication.track.sid;
+//   // this.renderer.setStyle(element, 'width', '100%');
+//   // this.renderer.appendChild(this.localVideo.nativeElement, element);
+//   // this.btnSubject.next({name:"is_video_enable",id:'1',value:true})
+//   // this.msgSubject.next("Waiting for participant...")
+//   // })
+//   const localVideoTrack = mediaTracks.find(track => track.kind === 'video');
+// // this.localVideo.nativeElement.appendChild(localVideoTrack.attach());
+//   const element = localVideoTrack.attach();
+//   this.renderer.setStyle(element, 'width', '100%');
+//   this.renderer.appendChild(this.localVideo.nativeElement, element);
+//   // this.btnSubject.next({name:"is_video_enable",id:'1',value:true})
+//   this.is_video_enable= true
+//   // this.msgSubject.next("Waiting for participant...")
+//   this.message = "Waiting for participant..."
+// }
+
+   handleMediaError(error) {
+    console.error('Failed to acquire media:', error.name, error.message);
+    alert("Failed while aquiring media "+error.message)
+    this.is_spinner = false
+  }
+
+}
--- a/src/app/pd/chat-component/test.html
+++ b/src/app/pd/chat-component/test.html
@ -0,0 +1,32 @@
+<!-- <div>
+    <div id="remote" #remoteVideo class="w-100 text-center" style></div>
+    <div id="local" class="position-fixed text-right w-100" #localVideo></div>
+    <button type="button" *ngIf="twilioService.microphone" title="Mute" class="pr-2" style="opacity: 1;cursor: pointer;"
+    (click)="mute()">Mute</button>
+    <button type="button" *ngIf="!twilioService.microphone" title="Unmute" class="pr-2" style="opacity: 1;cursor: pointer;"
+    (click)="unmute()">UnMute</button>
+    <button type="button" title="Disconnect" class="pr-2" style="opacity: 1;cursor: pointer;" (click)="disconnect()">Disconnect</button>
+    </div> -->
+    <p>
+        {{ message }}
+      </p>
+      
+      <div id="video-container">
+      
+        <div id="local" #localVideo>
+          <p>local video</p>
+        </div>
+      
+        <div id="remote" #remoteVideo>
+          <p>remote video</p>
+        </div>
+        <input type="text" [(ngModel)]="username" placeholder="username">
+      
+        <input type="text" [(ngModel)]="roomName" placeholder="room name">
+      
+        <input type="button" [disabled]="!username || !roomName ? true : false" value="connect" (click)="connect()">
+      
+        <input type="button" [disabled]="!twilioService.roomObj ? true : false" value="disconnect" (click)="disconnect()">
+      
+      </div>
+      
--- a/src/app/pd/incoming-call/incoming-call.component.html
+++ b/src/app/pd/incoming-call/incoming-call.component.html
@ -0,0 +1,26 @@
+<div fxLayout="column" fxLayoutGap="50px">
+  <div class="label" fxLayoutAlign="center center">
+    Incoming Call
+  </div>
+<div class="call-animation">
+    <div fxFlex="135px" fxLayout.xs ="100%">
+  <img class="img-circle" src="assets/spinner/notfound_blue.png" alt="Image"/>
+</div>
+  </div>
+  <div fxLayout="column" class="user-name" fxLayoutAlign="center center">
+    <!-- <div > -->
+      <h5>{{this.pd_info.applicant_name}}</h5>
+      <h6>{{this.pd_info.pd_sno}}</h6>
+    <!-- </div> -->
+  </div>
+    <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="30px" fxLayoutGap.xs="5px">
+      <div fxLayout="column">
+      <button  mat-raised-button  class="mr-1 mb-1 hover-icon" type="button" matTooltip="Answer" matTooltipPosition="above" (click)="answer_call()"><mat-icon>call</mat-icon>
+      Answer</button>
+      </div>
+      <div fxLayout="column">
+          <button  mat-raised-button  class="mr-1 mb-1 hover-icon" type="button" matTooltip="Decline" matTooltipPosition="above" (click)="closeDialog()"><mat-icon>call_end</mat-icon>
+          Decline</button>
+        </div>
+      </div>
+</div>
--- a/src/app/pd/incoming-call/incoming-call.component.scss
+++ b/src/app/pd/incoming-call/incoming-call.component.scss
@ -0,0 +1,59 @@
+::ng-deep { .incoming-call-background > mat-dialog-container {
+    background: #71AFFF;
+    padding: 15px;
+  }
+}
+  .label{
+      margin-bottom: 5% !important;
+      color: white
+  }
+  .user-name {
+      margin: 8% !important;
+      h5{
+      font-weight: bold;
+      }
+      h6{
+        margin-top: 8px;
+      }
+      color: white
+  }
+  .call-animation {
+      background: #fff;
+      width: 135px;
+      height: 135px;
+      position: relative;
+      margin: 0px auto !important;
+      border-radius: 100%;
+      border: solid 5px #fff;
+      animation: play 2s ease infinite;
+      -webkit-backface-visibility: hidden;
+      -moz-backface-visibility: hidden;
+      -ms-backface-visibility: hidden;
+      backface-visibility: hidden;
+    
+  }
+   img {
+          width: 135px;
+          height: 135px;
+          border-radius: 100%;
+          position: absolute;
+          left: 0px;
+          top: 0px;
+      }
+  @keyframes play {
+  
+      0% {
+          transform: scale(1);
+      }
+      15% {
+          box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4);
+      }
+      25% {
+          box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4), 0 0 0 20px rgba(255, 255, 255, 0.2);
+      }
+      25% {
+          box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.4), 0 0 0 30px rgba(255, 255, 255, 0.2);
+      }
+  
+  }
+  
--- a/src/app/pd/incoming-call/incoming-call.component.spec.ts
+++ b/src/app/pd/incoming-call/incoming-call.component.spec.ts
@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IncomingCallComponent } from './incoming-call.component';
+
+describe('IncomingCallComponent', () => {
+  let component: IncomingCallComponent;
+  let fixture: ComponentFixture<IncomingCallComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IncomingCallComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IncomingCallComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pd/incoming-call/incoming-call.component.ts
+++ b/src/app/pd/incoming-call/incoming-call.component.ts
@ -0,0 +1,23 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'app-incoming-call',
+  templateUrl: './incoming-call.component.html',
+  styleUrls: ['./incoming-call.component.scss']
+})
+export class IncomingCallComponent implements OnInit {
+
+  constructor(private dialogRef:MatDialogRef<IncomingCallComponent>, @Inject(MAT_DIALOG_DATA) public pd_info:any) { 
+    console.log(this.pd_info)
+  }
+
+  ngOnInit() {
+  }
+  closeDialog(){
+    this.dialogRef.close('decline');
+  }
+  answer_call(){
+    this.dialogRef.close('answered');
+  }
+}
--- a/src/app/pd/pd-routing.module.ts
+++ b/src/app/pd/pd-routing.module.ts
@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ChatComponentComponent } from './chat-component/chat-component.component';
+// import { PdImagesComponent } from './pd-images/pd-images.component';
+
+
+const routes: Routes = [
+  // {
+  //   path:'',
+  //   redirectTo:'pd-images'
+  // },
+  // {
+  //   path:'',
+  //   component:PdImagesComponent
+  // }
+  {
+    path : '',
+    component:ChatComponentComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PdRoutingModule { }
--- a/src/app/pd/pd.component.html
+++ b/src/app/pd/pd.component.html
@ -0,0 +1,122 @@
+<mat-toolbar class="main-header" style="border-bottom:2px solid #f44336;">
+    <div class="horizontal-top-bar w-100">          
+       <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
+        <div class="horizontal-logo">
+          <div class="branding">
+             <!-- <h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> OPTIMA</span>
+             </h2> -->
+             <!--<h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> {{userDep}}({{fullName}})</span>
+             </h2>-->
+              <a>
+               <!-- <img [routerLink]="['/dashboard']" [src]="'http://ssa.sineedge.com/sparqapi/logo/sineedge_red.png'" style="height: 35px;;"> <span> {{userDep}} </span> -->
+               <!--  (click)="menunav('HOME')" -->
+               <img src="assets/images/PD_Genie_TM1_nobg.png" style="height: 45px;"> 
+               <!-- <span> PD Genie </span> -->
+            </a> 
+          </div>
+       </div>
+       </div>
+       <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
+      
+       </div>
+
+       <!-- <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
+       <div class="menu-links">
+         <span *ngFor="let menuitem of horizontalMenuItems.getAll() | roleMenuItems:'1'">
+             <button mat-icon-button matTooltip="{{ menuitem.name}}" matTooltipPosition="below" [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'link'">
+             <mat-icon>{{ menuitem.icon }}</mat-icon>
+           
+             </button>
+         </span>
+         <span *ngFor="let menuitem of horizontalMenuItems.getAll()  | roleMenuItems:'1'">
+              <span *ngIf="menuitem.type === 'multi'">
+               <button [mat-menu-trigger-for]="multi" matTooltip="{{ menuitem.name}}" matTooltipPosition="below" mat-icon-button class="ml-xs">
+                     <mat-icon>{{ menuitem.icon }}</mat-icon>
+               </button>       
+               <mat-menu #multi="matMenu" class="opt-menu" x-position="before">
+                  <div mat-menu-item class="head-menu grad-blue">
+                        {{ menuitem.name}}
+                  </div>
+                  <div class="dropdown">
+                    <div *ngFor="let childitem of menuitem.children">
+                       <button mat-menu-item [routerLink]="['/'+childitem.state ]">{{ childitem.name | translate }}</button>
+                    </div>
+                 </div>
+               </mat-menu>
+               </span>
+            </span>
+
+          
+         
+          <button appToggleFullscreen matTooltip="Fullscreen" matTooltipPosition="below" mat-icon-button>
+             <mat-icon>fullscreen</mat-icon>
+          </button>
+      
+          <button *ngIf="permissionDeined" (click)="end.toggle()" matTooltip="Notifications" matTooltipPosition="below" mat-icon-button class="ml-xs overflow-visible">
+             <mat-icon>notifications</mat-icon>
+         
+             <span *ngIf="alertCount != 0" style = "width:23px" class="notification-label">{{alertCount}}</span>
+          </button>
+          <button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
+             <mat-icon>person</mat-icon>
+          </button>
+          <mat-menu #user="matMenu" class="opt-menu" x-position="before">
+             <div mat-menu-item class="head-menu grad-blue">
+                Settings
+             </div>
+             <button mat-menu-item>
+                <mat-icon>settings</mat-icon>
+                Setting 
+             </button>
+             <button mat-menu-item (click)="userprofile()">
+                <mat-icon>account_box</mat-icon>
+                Profile
+             </button>
+             <button mat-menu-item (click)="logout()">
+                <mat-icon>exit_to_app</mat-icon>
+                Sign Out
+             </button>
+          </mat-menu>
+       </div>
+      </div> 
+    </div>
+    <div class="vertical-menu w-100">
+    <button (click)="menuToggleFunc()" mat-icon-button class="lines-btn">
+       <mat-icon>menu</mat-icon>
+    </button>
+   
+    <span fxFlex></span>
+    <button appToggleFullscreen mat-icon-button>
+       <mat-icon>fullscreen</mat-icon>
+    </button>
+  
+    <button *ngIf="permissionDeined" (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
+       <mat-icon>notifications</mat-icon>
+       <span *ngIf="alertCount != 0" style = "width:23px" class="notification-label"  >{{alertCount}}</span>
+    </button>
+  
+    <button [mat-menu-trigger-for]="user"  matTooltip="Person" matTooltipPosition="below" mat-icon-button class="ml-xs">
+       <mat-icon>person</mat-icon>
+    </button>
+    <mat-menu #user="matMenu" class="opt-menu" x-position="before">
+       <div mat-menu-item class="head-menu grad-blue">
+          {{fullName}}
+       </div>
+     
+       <button mat-menu-item (click)="userprofile()">
+          <mat-icon>account_box</mat-icon>
+          Profile
+       </button>
+     
+       <button mat-menu-item (click)="logout()">
+          <mat-icon>exit_to_app</mat-icon>
+          Sign Out
+       </button>
+    </mat-menu>-->
+     </div>
+ </mat-toolbar>
+ <div class="body-container">
+        
+   <router-outlet></router-outlet>
+  
+</div>
--- a/src/app/pd/pd.component.scss
+++ b/src/app/pd/pd.component.scss
--- a/src/app/pd/pd.component.spec.ts
+++ b/src/app/pd/pd.component.spec.ts
@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PdComponent } from './pd.component';
+
+describe('PdComponent', () => {
+  let component: PdComponent;
+  let fixture: ComponentFixture<PdComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PdComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PdComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/pd/pd.component.ts
+++ b/src/app/pd/pd.component.ts
@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-pd',
+  templateUrl: './pd.component.html',
+  styleUrls: ['./pd.component.scss']
+})
+export class PdComponent implements OnInit {
+spinnerConfig = {
+  "bgsColor": "red",
+  "bgsOpacity": 0.5,
+  "bgsPosition": "bottom-right",
+  "bgsSize": 60,
+  "bgsType": "ball-spin-clockwise",
+  "blur": 1,
+  "delay": 0,
+  "fastFadeOut": true,
+  "fgsColor": "red",
+  "fgsPosition": "center-center",
+  "fgsSize": 70,
+  "fgsType": "wandering-cubes",
+  "gap": 24,
+  "logoPosition": "center-center",
+  "logoSize": 120,
+  "logoUrl": "",
+  "masterLoaderId": "master",
+  "overlayBorderRadius": "0",
+  "overlayColor": "rgba(40,40,40,0.39)",
+  "pbColor": "red",
+  "pbDirection": "ltr",
+  "pbThickness": 3,
+  "hasProgressBar": true,
+  "text": "",
+  "textColor": "#FFFFFF",
+  "textPosition": "center-center",
+  "maxTime": -1,
+  "minTime": 300
+}
+  constructor() { }
+
+  ngOnInit() {
+   
+  }
+
+}
--- a/src/app/pd/pd.module.ts
+++ b/src/app/pd/pd.module.ts
@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { PdRoutingModule } from './pd-routing.module';
+// import { PdImagesComponent } from './pd-images/pd-images.component';
+import { MaterialModule } from './shared/material/material.module';
+import { ChatComponentComponent } from './chat-component/chat-component.component';
+import { IncomingCallComponent } from './incoming-call/incoming-call.component';
+// import { CaptureBtnComponent } from './pd-images/capture-btn/capture-btn.component';
+// import { ImageUploadModule } from 'ng2-imageupload';
+import { MatDialogModule } from '@angular/material';
+import { FormsModule } from '@angular/forms';
+// https://morning-garden-90282.herokuapp.com
+//  const config: SocketIoConfig = { url: 'http://localhost:3000', options: {} };
+// const config: SocketIoConfig = { url: 'https://morning-garden-90282.herokuapp.com', options: {} };
+
+@NgModule({
+  declarations: [ChatComponentComponent,IncomingCallComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    PdRoutingModule,
+    MaterialModule,
+    // Ng2ImgMaxModule
+    // ImageUploadModule
+    // SocketIoModule.forRoot(config),
+    MatDialogModule
+  ],
+  entryComponents:[IncomingCallComponent]
+})
+export class PdModule { }
--- a/src/app/pd/services/api-service/api-service.service.spec.ts
+++ b/src/app/pd/services/api-service/api-service.service.spec.ts
@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiServiceService } from './api-service.service';
+
+describe('ApiServiceService', () => {
+  let service: ApiServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ApiServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/src/app/pd/services/api-service/api-service.service.ts
+++ b/src/app/pd/services/api-service/api-service.service.ts
@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { HttpClient ,HttpHeaders} from '@angular/common/http';
+import { environment } from 'src/environments/environment';
+
+
+const apiUrl = environment.apiEndpoint
+// const Authorization = environment.authorization
+@Injectable({
+  providedIn: 'root'
+})
+
+export class ApiServiceService {
+
+  constructor(private _http:HttpClient) {
+   }
+  //  createAuthorizationHeader() {
+  //   // let headerss = new HttpHeaders();
+  //   // headerss.append('Authorization', Authorization); 
+  //   const headers = new HttpHeaders({'Authorization':Authorization,'token':''});
+  //   return headers
+  // }
+
+  //  getPDImgDetails(params):Observable<any> {
+  //   let headers = this.createAuthorizationHeader()
+  //   return this._http.post(apiUrl+'getPDImgDetails',params,{headers:headers});
+  //  }
+  //  uploadPDImgByApplicant(params):Observable<any> {
+  //   let headers = this.createAuthorizationHeader()
+  //   return this._http.post(apiUrl+'uploadPDImgByApplicant',{records:params},{headers:headers})
+  //  }
+  getIceServers() {
+    return this._http.get(apiUrl+'getServerInfo')
+}
+}
--- a/src/app/pd/services/camera.service.spec.ts
+++ b/src/app/pd/services/camera.service.spec.ts
@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CameraService } from './camera.service';
+
+describe('CameraService', () => {
+  let service: CameraService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CameraService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/src/app/pd/services/camera.service.ts
+++ b/src/app/pd/services/camera.service.ts
@ -0,0 +1,111 @@
+import { Injectable } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import * as watermark from 'watermarkjs';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CameraService {
+pipe = new DatePipe('en-US')
+  constructor() { 
+    setTimeout(()=>{
+    this.getPosition().then(res=>{
+      console.log("geolocation",res)
+    },err=>{
+      console.log("Error in geo",err);
+    })
+  },2000)
+  }
+  addWatermarks(base64Img,geoCords?) {
+
+    return new Promise((resolve, reject) => {
+     
+      // this.constant.getGeoTag().then(geoCoordinates => {
+        // this.getPosition().then(geoCords=>{
+        //   console.log(geoCords);
+      //   this.geoCords = geoCoordinates
+      // });
+    // this.geoCords=localStorage.getItem('current_coordinates')
+    // console.log("corrds",this.geoCords)
+      let raw_img = base64Img
+        var today = new Date();
+        // let today_loc = today.toLocaleString('en-US', { timeZone: "Asia/Kolkata" })
+        let today_loc=this.pipe.transform(today, 'yyyy-MM-dd, h:mm a')
+        var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
+        //  var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
+        var dateTime = 'Date : ' + today_loc;
+       
+        console.log(date)
+
+        // fetch(raw_img)
+        // .then(res => res.blob())
+        // .then(blob => {
+        watermark([raw_img, 'assets/images/PD_watermark.png'])
+          .image(watermark.image.upperRight())
+          .then(img => {
+            raw_img = img.src;
+
+            let text = watermark.text
+            watermark([raw_img])
+              .image(text.upperLeft(dateTime, '19px sans-serif', '#ff0000', 1.0))
+              // .image(text.upperLeft(dateTime, '20px sans-serif', '#ff0000', 1.0))
+              .then(img => {
+                raw_img = img.src;
+                console.log("2d", raw_img)
+                // resolve(img.src)
+                console.log(geoCords)
+                // let geoCoordinates = geoCords ? geoCords : '-'
+                if(geoCords) {
+                let Location = `Location : ` + geoCords
+                watermark([raw_img])
+                  .image(text.upperLeft(Location, '19px sans-serif', '#ff0000', 1.0, 40 ))
+                  .then(img => {
+                    raw_img = img.src
+                    console.log("3rd", raw_img)
+                    resolve(img.src)
+                    // localStorage.removeItem('current_coordinates')
+                  });
+                }
+                else {
+                  resolve(img.src)
+                }
+              });
+          });
+      
+         
+    // },err=>{
+    //   console.log("Error in geo",err);
+    //   switch(err.code) {
+    //     case 1:
+    //       alert("Geolocation permission is denied. Please allow the permission to capture");
+    //       break;
+    //     case 2:
+    //       alert("Do not get the geolocation of your place");
+    //       break;
+    //     case 2:
+    //       alert("Something went wrong");
+    //       break;
+    //   }
+    //   reject(err);
+    // })
+  })
+    // });
+  }
+  getPosition(): Promise<any>
+  {
+    return new Promise((resolve, reject) => {
+
+      navigator.geolocation.getCurrentPosition(resp => {
+        console.log("Geo",resp.coords);
+        let latLong:string = resp.coords.latitude+', '+resp.coords.longitude
+          // resolve({lng: resp.coords.longitude, lat: resp.coords.latitude});
+          resolve(latLong)
+        },
+        err => {
+          resolve('error');
+        });
+    });
+
+  }
+}
--- a/src/app/pd/services/data-service/data-service.service.spec.ts
+++ b/src/app/pd/services/data-service/data-service.service.spec.ts
@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DataServiceService } from './data-service.service';
+
+describe('DataServiceService', () => {
+  let service: DataServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DataServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/src/app/pd/services/data-service/data-service.service.ts
+++ b/src/app/pd/services/data-service/data-service.service.ts
@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+  export interface errorMsgInterface  {
+    title:string;
+    subtitle:string;
+    message:string;
+    is_homebtn:boolean
+  }
+@Injectable({
+  providedIn: 'root'
+})
+export class DataServiceService {
+  errorMsg:errorMsgInterface
+  getPDImageData:any;
+  constructor() { 
+    this.errorMsg ={
+      title:"404",
+      subtitle:'Not Found',
+      message:'The requested URL is not found on the server',
+      is_homebtn:false
+    }
+  }
+  setErrorMsg(obj:errorMsgInterface) {
+   this.errorMsg = obj
+  }
+}
--- a/src/app/pd/services/guards/url-check.guard.spec.ts
+++ b/src/app/pd/services/guards/url-check.guard.spec.ts
@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UrlCheckGuard } from './url-check.guard';
+
+describe('UrlCheckGuard', () => {
+  let guard: UrlCheckGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(UrlCheckGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});
--- a/src/app/pd/services/guards/url-check.guard.ts
+++ b/src/app/pd/services/guards/url-check.guard.ts
@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router, ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { DataServiceService } from '../data-service/data-service.service';
+import { ApiServiceService } from '../api-service/api-service.service';
+// import { resolve } from 'url';
+// import { reject } from 'q';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UrlCheckGuard implements CanActivate {
+  constructor(private router: Router, private actRoute:ActivatedRoute, private dataService: DataServiceService,private apiService:ApiServiceService) {}
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+      // this.router.navigateByUrl('error',{skipLocationChange:true});
+      this.dataService.setErrorMsg({title:'404',subtitle:'Not Found',is_homebtn:false,message:'Url is Invalid. Contant info@pdgenie.com'})
+      // console.log(this.actRoute.snapshot.paramMap.get('randomStr'));
+      // console.log(this.actRoute.snapshot.paramMap.getAll('randomStr'))
+      // return new Promise((resolve,reject)=>{
+      // let params = {"pd_id":"","random_string":"nvngDBShJtLlpy5v"}
+     
+    // })
+      return true;
+  
+  }
+  
+}
--- a/src/app/pd/services/twilio/twilio.service.spec.ts
+++ b/src/app/pd/services/twilio/twilio.service.spec.ts
@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TwilioService } from './twilio.service';
+
+describe('TwilioService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: TwilioService = TestBed.get(TwilioService);
+    expect(service).toBeTruthy();
+  });
+});
--- a/src/app/pd/services/twilio/twilio.service.ts
+++ b/src/app/pd/services/twilio/twilio.service.ts
@ -0,0 +1,373 @@
+import { Injectable, ElementRef, Renderer2, RendererFactory2 } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { Router } from '@angular/router';
+import { connect,isSupported } from 'twilio-video';
+import { HttpClient } from '@angular/common/http';
+import { environment } from 'src/environments/environment';
+import { MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from '@angular/material';
+
+const apiUrl = environment.apiEndpoint
+@Injectable({
+  providedIn: 'root'
+})
+export class TwilioService {
+  horizontalPosition: MatSnackBarHorizontalPosition = 'start';
+  verticalPosition: MatSnackBarVerticalPosition = 'bottom';
+  
+  remoteVideo: ElementRef;
+  localVideo: ElementRef;
+  previewing: boolean;
+  msgSubject = new BehaviorSubject("");
+  roomObj: any;
+  microphone:boolean = true;
+  roomParticipants;
+  btnSubject = new BehaviorSubject({})
+  private renderer: Renderer2;
+  // is_connected: boolean = false;
+  camera: boolean = true;
+  switch_camera_option: boolean = false;
+  shouldFaceUser:boolean = true;
+  mediaTracks:any;
+  user_data:any={};
+  constructor(
+  private http: HttpClient,
+  private router: Router,
+  private rendererFactory: RendererFactory2,private _snackBar:MatSnackBar) {
+  this.renderer = rendererFactory.createRenderer(null, null);
+  }
+  getToken(params): Observable<any> {
+    // return Observable.create((observer:any)=>{
+    //   let accessToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImN0eSI6InR3aWxpby1mcGE7dj0xIn0.eyJqdGkiOiJTS2VhZDA1NDMxMzkxNDhmZDFhMTBlOTczNWI1YjY0MDJmLTE2MDAxNzg3MjgiLCJpc3MiOiJTS2VhZDA1NDMxMzkxNDhmZDFhMTBlOTczNWI1YjY0MDJmIiwic3ViIjoiQUMzNmRhNTgyNWRmZDkzZTc5NzYwN2I3YTAwMTI5NDA4NyIsImV4cCI6MTYwMDE4MjMyOCwiZ3JhbnRzIjp7ImlkZW50aXR5IjoicnIiLCJ2aWRlbyI6eyJyb29tIjoidHRlc3QifX19.ap6T6k-ga_skb1gX2klXvLodlf3RbnD14NP05GT33s4"
+    //   if(params == '2') {
+    //    accessToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImN0eSI6InR3aWxpby1mcGE7dj0xIn0.eyJqdGkiOiJTS2VhZDA1NDMxMzkxNDhmZDFhMTBlOTczNWI1YjY0MDJmLTE2MDAxNzkwMDQiLCJpc3MiOiJTS2VhZDA1NDMxMzkxNDhmZDFhMTBlOTczNWI1YjY0MDJmIiwic3ViIjoiQUMzNmRhNTgyNWRmZDkzZTc5NzYwN2I3YTAwMTI5NDA4NyIsImV4cCI6MTYwMDE4MjYwNCwiZ3JhbnRzIjp7ImlkZW50aXR5IjoiZGRkIiwidmlkZW8iOnsicm9vbSI6InRlc3QifX19.w9lv6bgkchNm2vMV5NstEnz4UmRWm2W83grMBVFjKYU"
+    //   }
+    //   observer.next({records:accessToken,dataStatus:true})
+    //   observer.complete()
+    // })
+    return this.http.post(apiUrl+'getVideoChatAccessKey', params);
+  }
+  // mute() {
+  // this.roomObj.localParticipant.audioTracks.forEach(function (
+  // audioTrack
+  // ) {
+  // audioTrack.track.disable();
+  // });
+  // this.microphone = false;
+  // }
+
+  // unmute() {
+  // this.roomObj.localParticipant.audioTracks.forEach(function (
+  // audioTrack
+  // ) {
+  // audioTrack.track.enable();
+  // });
+  // this.microphone = true;
+  // }
+  micHandling() {
+    this.microphone = !this.microphone
+    this.roomObj.localParticipant.audioTracks.forEach(audioTrack=>{
+        if(this.microphone){
+          audioTrack.track.enable();
+        }
+        else {
+          audioTrack.track.disable();
+        }
+      });
+      // this.microphone = false;
+  }
+  videoHandling() {
+    this.camera = !this.camera
+    this.roomObj.localParticipant.videoTracks.forEach(videoTrack=>{
+        if(this.camera){
+          videoTrack.track.enable();
+        }
+        else {
+          videoTrack.track.disable();
+        }
+      });
+      // this.microphone = false;
+  }
+
+  switchCamera() {
+    console.log(this.mediaTracks);
+    if(this.mediaTracks) {
+        this.mediaTracks.forEach(track => { if(track.kind === 'video') {track.stop()}}) 
+    }
+    this.shouldFaceUser = !this.shouldFaceUser
+     let cameraTrack:any = Array.from(this.roomObj.localParticipant.videoTracks.values())[0]
+     cameraTrack = cameraTrack.track
+     cameraTrack.stop();
+    console.log("Camera Switch",cameraTrack)
+    cameraTrack.restart({ facingMode: this.shouldFaceUser ? 'user':'environment' });
+    // }
+
+  }
+
+  connectToRoom(accessToken: string, options): void {
+    // if(!isSupported) {
+    //   console.error('This browser is not supported by twilio-video.js.');
+    //   this.btnSubject.next({name:"is_video_enable",id:'1',value:false})
+    //   this.msgSubject.next("This browser is not supported")
+    //   return;
+    // }
+    console.log("User Name>>",options.name)
+    this.msgSubject.next("Connecting...");
+  this.btnSubject.next({name:"is_video_enable",id:'1',value:true})
+  connect(accessToken, options).then(room => {
+  this.roomObj = room;
+  // this.getMediaDevices()
+  console.log("Room Class",this.roomObj);
+  // if (!this.previewing && options['video']) {
+  this.startLocalVideo();
+  this.previewing = true;
+  // }
+
+  this.roomParticipants = room.participants;
+  console.log(room.participants.size,room.participants)
+  // if(room.participants.size) {
+  // if(room.participants.size >0 && room.participants.size <= 1) {
+  room.participants.forEach(participant => {
+    console.log("Participant on the Current Room",participant);
+    this.openSnackBar(participant.identity+' joined the call','')
+    this.msgSubject.next("Already in Room: '" + participant.identity + "'");
+  this.attachParticipantTracks(participant);
+  if(this.user_data.type == '2') {
+    console.log("User type in service",this.user_data) 
+    let params = {"fk_pd_id":this.user_data.pd_id,"room_id":this.roomObj.sid,"is_call_ended":"0"}
+    console.log("connected api",params)
+    this.sendRoomandStatus(params).subscribe(rr=>{})
+  }
+  });
+// }
+// else {
+//   this.openSnackBar("Call is already connected",'')
+//   this.btnSubject.next({name:'is_video_enable',value:false})
+// }
+//   }
+
+  // function handleTrackDisabled(track) {
+  //   track.on('disabled', () => {
+  //     /* Hide the associated <video> element and show an avatar image. */
+  //     this.openSnackBar("Peer video disabled");
+  //   });
+  // }
+  
+  // function handleTrackEnabled(track) {
+  //   track.on('enabled', () => {
+  //     /* Hide the avatar image and show the associated <video> element. */
+  //   });
+  // }
+
+  room.on('participantDisconnected', (participant) => {
+    console.log("Participant Disconnected",participant);
+    this.openSnackBar(participant.identity+' left the call','')
+    this.msgSubject.next("Participant '" + participant.identity + "' left the call");
+    this.disconnect();
+  this.detachTracks(participant);
+  });
+
+  room.on('participantConnected', (participant) => {
+    console.log("Participant connected",participant)
+  this.roomParticipants = room.participants;
+  this.attachParticipantTracks(participant);
+  participant.on('trackPublished', track => {
+  const element = track.attach();
+  this.renderer.data.id = track.sid;
+  this.renderer.setStyle(element, 'height', '100%');
+  this.renderer.setStyle(element, 'max-width', '100%');
+  this.renderer.appendChild(this.remoteVideo.nativeElement, element);});
+  console.log("check cc",this.remoteVideo.nativeElement)
+//   console.log("Remote video size",this.remoteVideo.nativeElement.offsetHeight)
+//   if(this.remoteVideo.nativeElement.videoHeight >= 500) {
+//     this.remoteVideo.nativeElement.style.marginTop = '0px'
+//   }
+//   setTimeout(()=>{
+//     console.log("Remote video size",this.remoteVideo.nativeElement.offsetHeight)
+//   this.btnSubject.next({name:"peerVideoEnable",id:'1',value:true})
+// },10000)
+  this.openSnackBar(participant.identity+' joined the call','')
+  if(this.user_data.type == '2') {
+    console.log("User type in service",this.user_data) 
+    let params = {"fk_pd_id":this.user_data.pd_id,"room_id":this.roomObj.sid,"is_call_ended":"0"}
+    console.log("connected api",params)
+    this.sendRoomandStatus(params).subscribe(rr=>{})
+  }
+  });
+
+  // When a Participant adds a Track, attach it to the DOM.
+  room.on('trackPublished', (track, participant) => {
+    console.log("Track Published",participant);
+  this.attachTracks([track]);
+  });
+
+  // When a Participant removes a Track, detach it from the DOM.
+  room.on('trackRemoved', (track, participant) => {
+    console.log("Track Removed",participant);
+  this.detachTracks([track]);
+  });
+
+  room.once('disconnected', (room,error) => {
+    if (error) {
+      console.log('You were disconnected from the Room:', error.code, error.message);
+      this.disconnect();
+      alert(error.message);
+    }
+    this.msgSubject.next('You left the Room:' + room.name);
+  room.localParticipant.tracks.forEach(track => {
+  track.track.stop();
+  const attachedElements = track.track.detach();
+  attachedElements.forEach(element => element.remove());
+  room.localParticipant.videoTracks.forEach(video => {
+  const trackConst = [video][0].track;
+  trackConst.stop(); // <- error
+  trackConst.detach().forEach(element => element.remove());
+  room.localParticipant.unpublishTrack(trackConst);
+  });
+  if(this.mediaTracks) {
+    this.mediaTracks.forEach(ee=>ee.stop());
+  }
+  let element = this.remoteVideo.nativeElement;
+  while (element.firstChild) {
+  element.removeChild(element.firstChild);
+  }
+  let localElement = this.localVideo.nativeElement;
+  while (localElement.firstChild) {
+  localElement.removeChild(localElement.firstChild);
+  }
+  // this.router.navigate(['thanks']);
+  console.log("Disconnected")
+  });});
+
+
+  }, (error) => {
+    this.disconnect();
+    console.log("Error while connecting",error,error.code)
+    this.btnSubject.next({name:"is_video_enable",id:'1',value:false})
+    this.msgSubject.next("Error while connecting>> "+error.message)
+    let alertMsg= error.message+ ''+(error.code ? ' code:'+ error.code : '')
+  alert(alertMsg);
+  if(error.message.includes('Token expired') || error.message.includes('invalid')) {
+    window.location.reload();
+  }
+  })
+
+}
+
+  attachParticipantTracks(participant): void {
+  participant.tracks.forEach(part => {
+    console.log("attachParticipantTracks",participant);
+  this.trackPublished(part);
+  });
+}
+
+  trackPublished(publication) {
+    console.log("trackPublished publication",publication);
+  if (publication.isSubscribed)
+  this.attachTracks(publication.track);
+  if (!publication.isSubscribed)
+  publication.on('subscribed', track => {
+    console.log(track);
+  this.attachTracks(track);
+  });
+  }
+
+  attachTracks(tracks) {
+    console.log("attachTracks",tracks);
+  const element = tracks.attach();
+  this.renderer.data.id = tracks.sid;
+  console.log("Renderer",this.renderer,tracks.sid)
+  this.renderer.setStyle(element, 'min-height', '80vh');
+  this.renderer.setStyle(element, 'height', '100%');
+  console.log("Width",window.screen.width);
+  if(window.screen.width >= 500) {
+    this.renderer.setStyle(element, 'width', '100%');
+  }
+  // this.renderer.setStyle(element, 'min-width', '100%');
+  this.renderer.setStyle(element, 'max-width', '100%');
+  this.renderer.setStyle(element,'object-fit','fill');
+  this.renderer.appendChild(this.remoteVideo.nativeElement, element);
+ 
+  setTimeout(()=>{
+    console.log("Remote video size",this.remoteVideo.nativeElement.offsetHeight,this.remoteVideo)
+  if(this.remoteVideo.nativeElement.offsetHeight < 350) {
+    // this.remoteVideo.nativeElement.style.marginTop = '0px'
+    // this.renderer.setStyle(element,'object-fit','fill');
+  }
+},5000)
+  this.btnSubject.next({name:"peerVideoEnable",id:'1',value:true})
+  }
+
+  startLocalVideo(): void {
+    console.log("Local Video",this.roomObj.localParticipant)
+  this.roomObj.localParticipant.videoTracks.forEach(publication => {
+  const element = publication.track.attach();
+  this.renderer.data.id = publication.track.sid;
+  this.renderer.setStyle(element, 'width', '100%');
+  this.renderer.appendChild(this.localVideo.nativeElement, element);
+  this.btnSubject.next({name:"is_video_enable",id:'1',value:true})
+  this.msgSubject.next("Waiting for participant...")
+  })
+}
+
+  detachTracks(tracks): void {
+    console.log("detachTracks",tracks);
+  tracks.tracks.forEach(track => {
+  let element = this.remoteVideo.nativeElement;
+  while (element.firstChild) {
+  element.removeChild(element.firstChild);
+  }});
+}
+
+disconnect(){
+  if (this.roomObj && this.roomObj !== null) {
+    console.log("User type in service",this.user_data,this.remoteVideo) 
+    if(this.user_data.type == '2' && this.remoteVideo.nativeElement.firstChild != null) {
+      let params = {"fk_pd_id":this.user_data.pd_id,"room_id":this.roomObj.sid,"is_call_ended":"1"}
+      console.log("disconnected api",params)
+      this.sendRoomandStatus(params).subscribe(rr=>{})
+    }
+    this.roomObj.disconnect();
+    this.roomObj = null;
+  } else {
+    if(this.mediaTracks) {
+      this.mediaTracks.forEach(ee=>ee.stop());
+    }
+    // this.router.navigate(['thanks']);
+    console.log("Disconnected");
+  }
+  this.msgSubject.next ("")
+  this.btnSubject.next({name:"is_video_enable",value:false})
+  this.btnSubject.next({name:"peerVideoEnable",value:false})
+  this.microphone = true;
+  this.camera = true;
+  this.shouldFaceUser = true;
+  this.switch_camera_option = false
+}
+
+/**FOR DISPLAYING MESSAGE TO THE USER */
+openSnackBar(message,btn) {
+  this._snackBar.open(message,btn, {
+    duration: 1500,
+    horizontalPosition: this.horizontalPosition,
+    verticalPosition: this.verticalPosition,
+  });
+}
+
+// getMediaDevices() {
+//   navigator.mediaDevices.enumerateDevices().then(devices=>{
+//     let media_devices = devices
+//     // console.log("Devices info",media_devices,devices)
+//     // alert(JSON.stringify(devices));
+//    media_devices = media_devices.filter(vv=>vv.kind === 'videoinput')
+//     console.log("video devices from getMediaDevices Fun",media_devices)
+//     if(media_devices.length > 1) {
+//       this.switch_camera_option =true
+//     }
+//   })
+// }
+
+sendRoomandStatus(params) {
+  return this.http.post(apiUrl+'saveRoomInfo',{records:params})
+}
+
+}
--- a/src/app/pd/shared/material/material.module.ts
+++ b/src/app/pd/shared/material/material.module.ts
@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {MatSidenavModule, MatButtonModule, MatIconModule, MatToolbarModule, MatFormFieldModule, MatInputModule, MatCardModule, MatTooltipModule, MatProgressSpinnerModule, MatSnackBar, MatSnackBarModule} from '@angular/material'
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    MatSidenavModule,
+    MatButtonModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCardModule,
+    FlexLayoutModule,
+    MatTooltipModule,
+    MatProgressSpinnerModule,
+    MatSnackBarModule,
+  ],
+  exports:[
+    MatSidenavModule,
+    MatButtonModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCardModule,
+    FlexLayoutModule,
+    MatProgressSpinnerModule,
+    MatSnackBarModule,
+  ]
+})
+export class MaterialModule { }
--- a/src/assets/.gitkeep
+++ b/src/assets/.gitkeep
--- a/src/assets/images/1.jpg
+++ b/src/assets/images/1.jpg
--- a/src/assets/images/2.jpg
+++ b/src/assets/images/2.jpg
--- a/src/assets/images/3.jpg
+++ b/src/assets/images/3.jpg
--- a/src/assets/images/4.jpg
+++ b/src/assets/images/4.jpg
--- a/src/assets/images/PD.jpeg
+++ b/src/assets/images/PD.jpeg
--- a/src/assets/images/PD_Genie_TM.jpg
+++ b/src/assets/images/PD_Genie_TM.jpg
--- a/src/assets/images/PD_Genie_TM1.jpg
+++ b/src/assets/images/PD_Genie_TM1.jpg
--- a/src/assets/images/PD_Genie_TM1_nobg.png
+++ b/src/assets/images/PD_Genie_TM1_nobg.png
--- a/src/assets/images/PD_watermark.png
+++ b/src/assets/images/PD_watermark.png
--- a/src/assets/images/about.jpg
+++ b/src/assets/images/about.jpg
--- a/src/assets/images/avatar.jpg
+++ b/src/assets/images/avatar.jpg
--- a/src/assets/images/bg-1.jpg
+++ b/src/assets/images/bg-1.jpg
--- a/src/assets/images/bg-2.jpg
+++ b/src/assets/images/bg-2.jpg
--- a/src/assets/images/bg-3.jpg
+++ b/src/assets/images/bg-3.jpg
--- a/src/assets/images/bg-4.jpg
+++ b/src/assets/images/bg-4.jpg
--- a/src/assets/images/bg-5.jpg
+++ b/src/assets/images/bg-5.jpg
--- a/src/assets/images/bg.png
+++ b/src/assets/images/bg.png
--- a/src/assets/images/blog-1.jpg
+++ b/src/assets/images/blog-1.jpg
--- a/src/assets/images/blog-2.jpg
+++ b/src/assets/images/blog-2.jpg
--- a/src/assets/images/contact.jpg
+++ b/src/assets/images/contact.jpg
--- a/src/assets/images/coridoor.jpg
+++ b/src/assets/images/coridoor.jpg
--- a/src/assets/images/curve.jpg
+++ b/src/assets/images/curve.jpg
--- a/src/assets/images/defaultuserimage.png
+++ b/src/assets/images/defaultuserimage.png
--- a/src/assets/images/face1.jpg
+++ b/src/assets/images/face1.jpg
--- a/src/assets/images/face2.jpg
+++ b/src/assets/images/face2.jpg
--- a/src/assets/images/face3.jpg
+++ b/src/assets/images/face3.jpg
--- a/src/assets/images/face4.jpg
+++ b/src/assets/images/face4.jpg
--- a/src/assets/images/face5.jpg
+++ b/src/assets/images/face5.jpg
--- a/src/assets/images/face6.jpg
+++ b/src/assets/images/face6.jpg
--- a/src/assets/images/face7.jpg
+++ b/src/assets/images/face7.jpg
--- a/src/assets/images/flower.jpg
+++ b/src/assets/images/flower.jpg
--- a/src/assets/images/flowers.jpg
+++ b/src/assets/images/flowers.jpg
--- a/src/assets/images/green.jpg
+++ b/src/assets/images/green.jpg
--- a/src/assets/images/img/1.jpg
+++ b/src/assets/images/img/1.jpg
--- a/src/assets/images/img/10.jpg
+++ b/src/assets/images/img/10.jpg
--- a/src/assets/images/img/11.jpg
+++ b/src/assets/images/img/11.jpg
--- a/src/assets/images/img/12.jpg
+++ b/src/assets/images/img/12.jpg
--- a/src/assets/images/img/13.jpg
+++ b/src/assets/images/img/13.jpg
--- a/src/assets/images/img/14.jpg
+++ b/src/assets/images/img/14.jpg
--- a/src/assets/images/img/15.jpg
+++ b/src/assets/images/img/15.jpg
--- a/src/assets/images/img/16.jpg
+++ b/src/assets/images/img/16.jpg
--- a/src/assets/images/img/17.jpg
+++ b/src/assets/images/img/17.jpg
--- a/src/assets/images/img/18.jpg
+++ b/src/assets/images/img/18.jpg
--- a/src/assets/images/img/19.jpg
+++ b/src/assets/images/img/19.jpg
--- a/src/assets/images/img/2.jpg
+++ b/src/assets/images/img/2.jpg
--- a/src/assets/images/img/20.jpg
+++ b/src/assets/images/img/20.jpg
--- a/Show More
+++ b/Show More