Merge pull request #5 from QXIP/develop

feature: tuned RTP Streams dialog
QXIP · Jan 4, 2024 · 11d6dd8 · 11d6dd8
2 parents a288f13 + 84f6d08
commit 11d6dd8
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 18 deletions.
diff --git a/src/app/components/controls/custom-table/custom-table.component.html b/src/app/components/controls/custom-table/custom-table.component.html
@@ -3,9 +3,6 @@
   style="
     display: flex;
     flex-direction: column;
-
-    height: 100vh;
-    min-height: 50vh;
   "
 >
   <cdk-virtual-scroll-viewport

diff --git a/src/app/components/controls/custom-table/custom-table.component.scss b/src/app/components/controls/custom-table/custom-table.component.scss
@@ -2,8 +2,8 @@ $bgColor: rgba(black, 0.12);
 
 table.this-table {
   table-layout: fixed;
-  width: 100%;
-  max-width: 100%;
+  // width: 100%;
+  // max-width: 100%;
 
   & tr {
     transition: background-color 0.3s;

diff --git a/src/app/components/controls/tap/tap-rtp-streams/tap-rtp-streams.component.html b/src/app/components/controls/tap/tap-rtp-streams/tap-rtp-streams.component.html
@@ -1,6 +1,6 @@
 <isData class="is-data-wrapper" [noDataIf]="streams.length === 0">
   <as-split *ngIf="isReady" direction="vertical" [gutterSize]="5">
-    <as-split-area [size]="30">
+    <as-split-area [size]="20">
       <app-custom-table
         [details]="streams"
         [columns]="columns"
@@ -10,8 +10,12 @@
         #recordTable
       ></app-custom-table>
     </as-split-area>
-    <as-split-area [size]="70">
-      <div style="display: flex; margin-bottom: 3rem">
+    <as-split-area [size]="80">
+      <div style="
+        display: flex;
+        margin-bottom: 3rem;
+        flex-direction: column;
+      ">
         <ng-container *ngFor="let rec of players; let idx = index">
           <mat-card
             class="player-card"
@@ -30,7 +34,7 @@
             (click)="setRecActive(rec); recordTable.setSelected(idx)"
             [class.active]="rec.isActive"
           >
-            <div>
+            <div class="player-card-data">
               <div>
                 CurrentTime:
                 {{ rec.player?.getCurrentTime() || 0 | number : "1.3-3" }}s

diff --git a/src/app/components/controls/tap/tap-rtp-streams/tap-rtp-streams.component.scss b/src/app/components/controls/tap/tap-rtp-streams/tap-rtp-streams.component.scss
@@ -8,6 +8,12 @@ $primary: map.get($my-theme, primary);
     width: 100%;
     display: block;
   }
+  .player-card-data {
+    display: flex;
+    &>div{
+      padding: 0.5rem;
+    }
+  }
   .player-card {
     margin: 0.5rem;
     flex: 5;

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
@@ -3,7 +3,7 @@ import { WebSharkDataService } from '@app/services/web-shark-data.service';
 import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { hash } from '@app/helper/functions';
 import WaveSurfer from 'wavesurfer.js';
-
+import TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline';
 
 declare const transcode: Function;
 const DATA_TYPE = 'application/octet-stream';
@@ -23,9 +23,11 @@ export class TapRtpStreamsComponent implements OnInit {
   players: any[] = [];
   optionsAudioContainer = {
     // waveColor: '#D2EDD4',
+    normalize: true,
     progressColor: 'green',
     responsive: true,
-    minPxPerSec: 1
+    minPxPerSec: 100,
+
   }
 
   @Input() set data(val: any) {
@@ -154,7 +156,18 @@ export class TapRtpStreamsComponent implements OnInit {
         // rec.mp3 = 'http://localhost:8003/assets/we__will_rock_you.mp3'
         const player = WaveSurfer.create({
           ...this.optionsAudioContainer,
-          ...{ container: '#' + (rec.id || 'audio-player') }
+          container: '#' + (rec.id || 'audio-player'),
+          plugins: [TimelinePlugin.create({
+            /** The duration of the timeline in seconds, defaults to wavesurfer's duration */
+            // duration: 1,
+            /** Interval between ticks in seconds */
+            timeInterval: 0.1,
+            /** Interval between numeric labels in seconds */
+            primaryLabelInterval: 1,
+            /** Interval between secondary numeric labels in seconds */
+            // secondaryLabelInterval: 8,
+          })]
+
         });
         if (rec.mp3) {
           // this.webSharkDataService.getBLOB(rec.mp3).subscribe((data: any) => {
@@ -179,8 +192,8 @@ export class TapRtpStreamsComponent implements OnInit {
           // }
           // });
         } else {
-            rec.noData = true;
-            this.cdr.detectChanges();
+          rec.noData = true;
+          this.cdr.detectChanges();
         }
         rec.player = player;
 

diff --git a/src/app/components/controls/webshark/webshark.component.scss b/src/app/components/controls/webshark/webshark.component.scss
@@ -78,10 +78,10 @@
       // border: 1px solid #999;
 
       .line-html {
-        flex: 1;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        // flex: 1;
+        // white-space: nowrap;
+        // overflow: hidden;
+        // text-overflow: ellipsis;
       }
 
       // &:hover {