Merge pull request #3 from QXIP/develop

fix couple of bugs
QXIP · Nov 19, 2023 · 6e30e39 · 6e30e39
2 parents 1a5e655 + 8ca7c41
commit 6e30e39
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 68 deletions.
diff --git a/src/app/components/Home/Home.component.ts b/src/app/components/Home/Home.component.ts
@@ -59,7 +59,7 @@ export class HomeComponent implements OnInit {
       ...files.filter((i: any) => i.children),
       ...files.filter((i: any) => !i.children)
     ];
-    console.log('FILES', this.files);
+    // console.log('FILES', this.files);
   }
   onClose(idx: number): void {
     this.dialogs = this.dialogs.filter((i, k) => k !== idx);
@@ -72,7 +72,7 @@ export class HomeComponent implements OnInit {
     if (!filename) {
       return;
     }
-    console.log('downloading file', filename);
+    // console.log('downloading file', filename);
     const href = encodeURIComponent('/' + filename);
     const url = `/webshark/json?method=download&capture=${href}&token=self`;
 

diff --git a/src/app/components/controls/chart-and-table/chart-and-table.component.ts b/src/app/components/controls/chart-and-table/chart-and-table.component.ts
@@ -15,12 +15,12 @@ export class ChartAndTableComponent implements OnInit {
       return;
     }
 
-    console.log({ val });
+    // console.log({ val });
     const _data = val;
     const arrTitle: any[] = [];
     Object.entries(_data).forEach(([key, value]: any) => {
       if (Array.isArray(value)) {
-        console.log({ key, value });
+        // console.log({ key, value });
         this._data = value || [];
       } else {
         // this.title += `${value}`;
@@ -31,10 +31,10 @@ export class ChartAndTableComponent implements OnInit {
      * get data for chart
      */
     //
-    console.log('this._data', this._data);
+    // console.log('this._data', this._data);
     var o: any = {};
     this._data.forEach((i: any) => {
-      console.log(i)
+      // console.log(i)
       Object.entries(i).map(([key, val]) => {
         if (typeof val === 'number') {
           if (!o[key]) {

diff --git a/src/app/components/controls/flexible-chart/flexible-chart.component.ts b/src/app/components/controls/flexible-chart/flexible-chart.component.ts
@@ -40,7 +40,7 @@ export class FlexibleChartComponent implements OnInit, AfterViewInit, OnDestroy
 
   @Input() set typeOfChart(val: TypeOfChart) {
     this._typeOfChart = val;
-    console.log({ val });
+    // console.log({ val });
     this.redraw();
   }
   get typeOfChart(): TypeOfChart {

diff --git a/src/app/components/controls/menu-stat/menu-stat.component.ts b/src/app/components/controls/menu-stat/menu-stat.component.ts
@@ -27,7 +27,7 @@ export class MenuStatComponent implements OnInit {
   async initMenu() {
     try {
       this.menuTreeIndex = [];
-      console.log('MENU:ngOnInit()')
+      // console.log('MENU:ngOnInit()')
       const info = await this.webSharkDataService.getInfo();
       const {
         stats, nstat, convs,

diff --git a/src/app/components/controls/tap/tap-rtp-streams/tap-rtp-streams.component.ts b/src/app/components/controls/tap/tap-rtp-streams/tap-rtp-streams.component.ts
@@ -69,7 +69,7 @@ export class TapRtpStreamsComponent implements OnInit {
       isDone = done;
     }
 
-    console.log({ collectArrayData });
+    // console.log({ collectArrayData });
     return new Blob(collectArrayData, { type: DATA_TYPE });
 
   }
@@ -88,7 +88,7 @@ export class TapRtpStreamsComponent implements OnInit {
     this.progressMessage.push(`Reading data from ${this.captureFile} file`);
     this.cdr.detectChanges();
     const blobData: Blob = await this.getFileArrayOfUint8Array(this.captureFile);
-    console.log(this.captureFile, { blobData });
+    // console.log(this.captureFile, { blobData });
     // const blobUrl = await transcode(blobData);
     // console.log(blobUrl)
 
@@ -104,12 +104,12 @@ export class TapRtpStreamsComponent implements OnInit {
       offset += 16;
       return [offset, ...i.c, blobData.slice(offset, offset + +i.c[5], DATA_TYPE)];
     })
-    console.log(arrOffset);
+    // console.log(arrOffset);
     this.progressMessage.push('Collect payload binary to streams')
     this.cdr.detectChanges();
     // rtp-streams
     const { taps: [{ streams: rtpStreams }] } = await this.webSharkDataService.getTapJson('rtp-streams');
-    console.log(rtpStreams);
+    // console.log(rtpStreams);
 
     const arr = rtpStreams.map((streamData: any) => {
       return {
@@ -120,24 +120,24 @@ export class TapRtpStreamsComponent implements OnInit {
           .map((i: any) => (i[8] as Blob).slice(54)), { type: DATA_TYPE })
       };
     })
-    console.log({ arr })
+    // console.log({ arr })
     const codecDictionary: any = {
       'g711a': 'alaw',
       'g711u': 'mulaw',
       'g722': 'g722',
     };
     const out: any[] = [];
     for (let item of arr) {
-      console.log('<>>>>', item.data);
+      // console.log('<>>>>', item.data);
 
       const codec = codecDictionary[(item.data.payload + '').toLowerCase()] || 'g722';
-      console.log('<>>>>', {codec});
+      // console.log('<>>>>', {codec});
 
       // const i = arr[0];
       this.progressMessage.push(`FFmpeg:: converting ${item.ssrc} stream to audio (mp3)`);
       this.cdr.detectChanges();
       const blobUrl = await transcode(item.blob, codec, `audio-${item.ssrc}.mp3`);
-      console.log(blobUrl)
+      // console.log(blobUrl)
 
       out.push({ ssrc: item.ssrc, blobUrl });
       this.blobSaveAsFile(blobUrl, `audio-${item.ssrc}.mp3`);
@@ -205,14 +205,14 @@ export class TapRtpStreamsComponent implements OnInit {
 
   }
   async rowClick({ row }: any) {
-    console.log({ row });
+    // console.log({ row });
     const id = `player-${hash(JSON.stringify(row))}`;
     let playerElement = this.players.find(p => p.id === id);
     if (!playerElement) {
       const rowData = await this.webSharkDataService.getRTPStreamTap(row);
       // const mp3link = this.webSharkDataService.getMp3LinkByRowData(row);
       const { taps: [{ ssrc }] } = rowData;
-      console.log(this.audioStreamsBlobURL, { rowData })
+      // console.log(this.audioStreamsBlobURL, { rowData })
 
       playerElement = {
         id,
@@ -246,7 +246,7 @@ export class TapRtpStreamsComponent implements OnInit {
     console.log({ event });
   }
   onZoomAudio(event: any, player: any) {
-    console.log(event.wheelDelta);
+    // console.log(event.wheelDelta);
     if (!player._myZoom) {
       player._myZoom = 1;
     }

diff --git a/src/app/components/controls/tree-filter/tree-filter.component.ts b/src/app/components/controls/tree-filter/tree-filter.component.ts
@@ -35,7 +35,7 @@ export class TreeFilterComponent implements OnInit, AfterViewInit {
     }
     this.textFilterTree = val;
     this.onKeyUpFilterTree();
-    console.log('textFilterTree = val')
+    // console.log('textFilterTree = val')
   }
   @Input() set jsonData(val: any) {
     if (!val) {
@@ -69,7 +69,7 @@ export class TreeFilterComponent implements OnInit, AfterViewInit {
     }
     this.dataSource.data = val;
     this.dataIndex = [];
-    console.log('this.dataSource.data = val;')
+    // console.log('this.dataSource.data = val;')
     const pushToIndex = (i: any) => {
       i.forEach(({ name, description, children }: any) => {
         const o: any = { name, description: description || name };
@@ -185,7 +185,7 @@ export class TreeFilterComponent implements OnInit, AfterViewInit {
         tc.collapseAll();
       }
     }
-    console.log('------------', this.bufferFiltered)
+    // console.log('------------', this.bufferFiltered)
     const b = this.dataIndex.filter(i => !!Math.max(...this.textFilterTree.toLowerCase().split('||').map(f => {
       return (i.description + i.name + (i.children || '')).toLowerCase().includes(f)
     })));
@@ -201,7 +201,7 @@ export class TreeFilterComponent implements OnInit, AfterViewInit {
     this.cdr.detectChanges();
   }
   onClickLine(data: any) {
-    console.log(data)
+    // console.log(data)
     this.clickRow.emit(data);
   }
 }
diff --git a/src/app/components/files-page/files-page.component.html b/src/app/components/files-page/files-page.component.html
@@ -1,37 +1,49 @@
-<mat-button-toggle-group aria-label="Font Style"
+<mat-button-toggle-group
+  aria-label="Font Style"
   value="Files"
-  #group="matButtonToggleGroup">
-  <mat-button-toggle value="Files"
+  #group="matButtonToggleGroup"
+  [style.display]="isKIOSK && 'none'"
+>
+  <mat-button-toggle
+    value="Files"
     [checked]="!isFile"
-    (click)="isFile = false; getFiles()">Files</mat-button-toggle>
-  <mat-button-toggle value="Menu"
-    [checked]="isFile">Menu</mat-button-toggle>
+    (click)="isFile = false; getFiles()"
+    >Files</mat-button-toggle
+  >
+  <mat-button-toggle value="Menu" [checked]="isFile">Menu</mat-button-toggle>
 </mat-button-toggle-group>
 
-<div style="height: 1rem; width: 200px; overflow: auto;"></div>
-
-<ng-container [ngSwitch]="group.value">
-  <ng-template ngSwitchCase="Files">
-    <as-split direction="vertical"
-      [gutterSize]="5"
-      [style.max-height]="'calc(100% - 4rem - 3px)'">
-      <as-split-area [size]="80">
-        <div>
-          <tree-filter [data]="files"
-            [isFilter]="false"
-            [fileIcon]="true"
-            (clickRow)="onFileChoose($event)"></tree-filter>
-        </div>
-      </as-split-area>
-      <as-split-area [size]="20">
-
-        <div style="min-height: 100px; min-width: 200px; height:100%">
-          <pcap-uploader></pcap-uploader>
-        </div>
-      </as-split-area>
-    </as-split>
-  </ng-template>
-  <ng-template ngSwitchCase="Menu">
-    <app-menu></app-menu>
-  </ng-template>
+<div style="height: 1rem; width: 200px; overflow: auto"></div>
+<ng-container *ngIf="isKIOSK; else default">
+  <app-menu></app-menu>
 </ng-container>
+<ng-template #default>
+  <ng-container [ngSwitch]="group.value">
+    <ng-template ngSwitchCase="Files">
+      <as-split
+        direction="vertical"
+        [gutterSize]="5"
+        [style.max-height]="'calc(100% - 4rem - 3px)'"
+      >
+        <as-split-area [size]="80">
+          <div>
+            <tree-filter
+              [data]="files"
+              [isFilter]="false"
+              [fileIcon]="true"
+              (clickRow)="onFileChoose($event)"
+            ></tree-filter>
+          </div>
+        </as-split-area>
+        <as-split-area [size]="20">
+          <div style="min-height: 100px; min-width: 200px; height: 100%">
+            <pcap-uploader></pcap-uploader>
+          </div>
+        </as-split-area>
+      </as-split>
+    </ng-template>
+    <ng-template ngSwitchCase="Menu">
+      <app-menu></app-menu>
+    </ng-template>
+  </ng-container>
+</ng-template>
diff --git a/src/app/components/files-page/files-page.component.ts b/src/app/components/files-page/files-page.component.ts
@@ -1,5 +1,6 @@
 import { WebSharkDataService } from '@app/services/web-shark-data.service';
 import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, Output, EventEmitter, Input } from '@angular/core';
+import { environment } from '@environments/environment';
 
 @Component({
   selector: 'app-files-page',
@@ -10,7 +11,7 @@ import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, Output,
 })
 export class FilesPageComponent implements OnInit {
   files: any[] = [];
-
+  isKIOSK = !!environment.kiosk;
   @Input() isFile = false;
 
   @Output() fileChosen: EventEmitter<any> = new EventEmitter();
@@ -21,6 +22,7 @@ export class FilesPageComponent implements OnInit {
   }
 
   ngOnInit() {
+
     this.getFiles();
     this.webSharkDataService.updates.subscribe(({ cm }: { cm: string }) => {
       if (cm === 'uploaded') {

diff --git a/src/app/components/menu/menu.component.ts b/src/app/components/menu/menu.component.ts
@@ -30,7 +30,7 @@ export class MenuComponent implements OnInit {
   async initMenu() {
     try {
       this.menuTreeIndex = [];
-      console.log('MENU:ngOnInit()')
+      // console.log('MENU:ngOnInit()')
       const {
         stats, nstat, convs,
         seqa, taps, eo,
@@ -98,7 +98,7 @@ export class MenuComponent implements OnInit {
         return menu;
       });
 
-      console.log('menu', { menuCollection, menuTree: this.menuTree });
+      // console.log('menu', { menuCollection, menuTree: this.menuTree });
       this.cdr.detectChanges();
     } catch (err) {
       this.menuTree = [];
@@ -108,6 +108,6 @@ export class MenuComponent implements OnInit {
   onSelected(event: any) {
     const menuItem = this.menuTreeIndex.find((i: any) => i.name === event.name);
     menuItem?.func();
-    console.log(event, this.menuTreeIndex.find((i: any) => i.name === event.name))
+    // console.log(event, this.menuTreeIndex.find((i: any) => i.name === event.name))
   }
 }
diff --git a/src/app/services/web-shark-data.service.ts b/src/app/services/web-shark-data.service.ts
@@ -28,9 +28,24 @@ export class WebSharkDataService {
   public updates: Observable<any>;
 
   constructor(private http: HttpClient) {
-    if (location.hash) {
-      this.setCaptureFile(decodeURIComponent(location.hash.slice(1)))
-    }
+    const getParam = decodeURIComponent(location.hash.slice(1))
+    setTimeout(() => {
+      if (getParam) {
+        this.getFiles().then(f => {
+          // hash
+          const fileObject = f.files.find((i: any) => hash(i.name) === getParam);
+          if (!fileObject) {
+            location.hash = '';
+            return;
+          }
+
+          const fileName = fileObject.name;
+          StaticData.captureFile = fileName;
+          location.hash = '#' + encodeURIComponent(hash(fileName));
+          this.behavior.next({});
+        })
+      }
+    }, 200);
     this.updates = this.behavior.asObservable();
   }
 
@@ -57,7 +72,7 @@ export class WebSharkDataService {
   }
   public setCaptureFile(fileName: string) {
     StaticData.captureFile = fileName;
-    location.hash = '#' + encodeURIComponent(fileName);
+    location.hash = '#' + hash(fileName);
     this.behavior.next({});
   }
 
@@ -105,7 +120,7 @@ export class WebSharkDataService {
     if (limit === 0) {
       return this.httpGet('frames', {});
     }
-    return this.httpGet('frames', {limit});
+    return this.httpGet('frames', { limit });
   }
 
   getFrameData(frameId: number): Promise<any> {

diff --git a/src/ffmpeg-init.js b/src/ffmpeg-init.js
@@ -8,7 +8,7 @@ if (!self.crossOriginIsolated) {
 
 const { createFFmpeg, fetchFile } = FFmpeg;
 const ffmpeg = createFFmpeg({
-  log: true,
+  log: false,
   corePath: "./ffmpeg/ffmpeg-core.js",
   progress: ({ ratio }) => {
     message.innerHTML = `Complete: ${(ratio * 100.0).toFixed(2)}%`;
@@ -88,7 +88,7 @@ const defaults = {
 
 const transcode = async (blobData, codec, output) => {
   try {
-    console.log("Loading ffmpeg-core.js");
+    // console.log("Loading ffmpeg-core.js");
 
     if (!ffmpeg.isLoaded()) {
       await ffmpeg.load();
@@ -122,7 +122,7 @@ const transcode = async (blobData, codec, output) => {
 
     const ffmpeg_data = await ffmpeg.run(...command);
 
-    console.log(ffmpeg_data);
+    // console.log(ffmpeg_data);
     // await ffmpeg.run(
     //   "-f",
     //   "g722",