diff --git a/src/app/components/controls/custom-table/custom-table.component.html b/src/app/components/controls/custom-table/custom-table.component.html index 41c6d8c..2f5040a 100644 --- 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; " > - + - -
+ +
-
+
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 index 921d34c..cb21db5 100644 --- 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 index 5264e07..101465d 100644 --- 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 index 9a779d5..c65f5b7 100644 --- 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 {