diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.css new file mode 100644 index 00000000..c942b6f6 --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.css @@ -0,0 +1,22 @@ +.poster { + position: absolute; + display: inline-grid; + z-index: 1; + margin: auto; + bottom: 0; + right: 0; + left: 0; + top: 0; + height: 70px; + width: 70px; + border-radius: var(--ov-video-radius); + border: 2px solid var(--ov-light-color); + color: #000000; +} + +#poster-text { + padding: 20px; + font-weight: bold; + font-size: 40px; + margin: auto; +} \ No newline at end of file diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.spec.ts new file mode 100644 index 00000000..e170b085 --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AvatarProfileComponent } from './avatar-profile.component'; + +describe('AvatarProfileComponent', () => { + let component: AvatarProfileComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AvatarProfileComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AvatarProfileComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.ts new file mode 100644 index 00000000..e0d70722 --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.ts @@ -0,0 +1,24 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'ov-avatar-profile', + template: ` +
+ {{letter}} +
+ `, + styleUrls: ['./avatar-profile.component.css'] +}) +export class AvatarProfileComponent implements OnInit { + + color: string; + + @Input() letter; + + constructor() { } + + ngOnInit(): void { + this.color = `hsl(${Math.random() * 360}, 100%, 75%)`; + } + +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.css index b4900a5f..f163a97e 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.css @@ -11,14 +11,3 @@ video { border-radius: var(--ov-video-radius); background-color: #000000; } - -.poster { - position: absolute; - z-index: 888; - max-width: 60%; - max-height: 60%; - bottom: 25%; - margin: auto; - right: 0; - left: 0; -} \ No newline at end of file diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts index 86dcb215..7acb23f2 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts @@ -5,12 +5,8 @@ import { VideoType } from '../../models/video-type.model'; @Component({ selector: 'ov-video', template: ` - OpenVidu Logo + +