diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css new file mode 100644 index 00000000..cf377d64 --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css @@ -0,0 +1,64 @@ +@keyframes normal { + 0%{ + height: 20%; + } + 50%{ + height: 40%; + } + 100%{ + height: 20%; + } +} +@keyframes loud { + 0%{ + height: 30%; + } + 50%{ + height: 80%; + + } + 100%{ + height: 30%; + } +} + +.audio-container{ + background-color: var(--ov-tertiary-color); + padding: 5px; + max-width: 15px; + max-height: 15px; + height: 15px; + width: 15px; + border-radius: 50%; + display: flex; + justify-content: space-between; +} + +.stick{ + margin: auto; + height: 80%; + width: 3px; + background: var(--ov-light-color); + border-radius: 8px; +} + +.pause { + animation-play-state:paused; + height: 1px; +} + +.play { + animation-duration: 1.2s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-play-state:running; +} + + +.normal{ + animation-name: normal; +} + +.loud{ + animation-name: loud; +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.html new file mode 100644 index 00000000..4e92fecb --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.html @@ -0,0 +1,5 @@ +
+
+
+
+
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.spec.ts new file mode 100644 index 00000000..beca4764 --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AudioWaveComponent } from './audio-wave.component'; + +describe('AudioWaveComponent', () => { + let component: AudioWaveComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AudioWaveComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AudioWaveComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.ts new file mode 100644 index 00000000..e129924d --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.ts @@ -0,0 +1,41 @@ +import { Component, Input, OnInit } from '@angular/core'; + +import { PublisherSpeakingEvent, StreamManager } from 'openvidu-browser'; + +@Component({ + selector: 'ov-audio-wave', + templateUrl: './audio-wave.component.html', + styleUrls: ['./audio-wave.component.css'] +}) +export class AudioWaveComponent implements OnInit { + isSpeaking: boolean = false; + audioVolume: number = 0; + + @Input() + set streamManager(streamManager: StreamManager) { + console.log('streamManager', streamManager); + + if(streamManager) { + streamManager.on('publisherStartSpeaking', (event: PublisherSpeakingEvent) => { + this.isSpeaking = true; + }); + + streamManager.on('publisherStopSpeaking', (event: PublisherSpeakingEvent) => { + this.isSpeaking = false; + }); + + // streamManager.on('streamAudioVolumeChange', (event: any) => { + // // The loudest sounds on your system will be at 0dB + // // and silence in webaudio is -100dB. + // this.audioVolume = 100 + event.value.newValue; + // console.log('Publisher audio volume change from ' + event.value.oldValue + ' to' + event.value.newValue); + // console.log('AUDIO VOLUME', this.audioVolume); + // }); + } + + } + + constructor() {} + + ngOnInit(): void {} +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css index 2ad707e5..359f99a4 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css @@ -30,6 +30,13 @@ padding: 10px; } + #audio-wave-container { + position: absolute; + right: 0; + z-index: 1; + padding: 5px; + } + .fullscreen { top: 40px; } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html index 6bca2199..0dda7450 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html @@ -31,9 +31,13 @@ +
+ +
+ diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts index 4c0dfecb..32e88978 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts @@ -59,7 +59,7 @@ import { ParticipantsPanelComponent } from './components/panel/participants-pane import { VideoconferenceComponent } from './components/videoconference/videoconference.component'; import { PanelComponent } from './components/panel/panel.component'; import { StreamDirective } from './directives/stream/stream.directive'; -import { BrowserModule } from '@angular/platform-browser'; +import { AudioWaveComponent } from './components/audio-wave/audio-wave.component'; @NgModule({ declarations: [ @@ -81,6 +81,7 @@ import { BrowserModule } from '@angular/platform-browser'; ParticipantItemComponent, ParticipantsPanelComponent, VideoconferenceComponent, + AudioWaveComponent, PanelComponent, ], imports: [ @@ -135,6 +136,7 @@ import { BrowserModule } from '@angular/platform-browser'; LayoutComponent, StreamComponent, VideoComponent, + AudioWaveComponent, ParticipantConnectionsPipe, CommonModule, StreamDirective diff --git a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts index 0a3505b0..0e86b561 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts @@ -30,6 +30,7 @@ export * from './lib/components/session/session.component'; export * from './lib/components/layout/layout.component'; export * from './lib/components/stream/stream.component'; export * from './lib/components/video/video.component'; +export * from './lib/components/audio-wave/audio-wave.component'; // Models export * from './lib/models/participant.model';