ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Replaced poster image to letter color box

pull/707/head
csantosm 2022-02-28 16:18:37 +01:00
parent e512dcc735
commit d29f650b02
5 changed files with 74 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.css Normal file
View File

@ -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;
}

25
openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.spec.ts Normal file
View File

@ -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<AvatarProfileComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AvatarProfileComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AvatarProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

24
openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.ts Normal file
View File

@ -0,0 +1,24 @@
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'ov-avatar-profile',
template: `
<div class="poster" [ngStyle]="{ 'background-color': color }">
<span id="poster-text">{{letter}}</span>
</div>
`,
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%)`;
}
}

11
openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.css
View File

@ -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;
}

8
openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts
View File

@ -5,12 +5,8 @@ import { VideoType } from '../../models/video-type.model';
@Component({
selector: 'ov-video',
template: `
<img
*ngIf="!_streamManager?.stream?.videoActive && (type === 'CAMERA' || !type)"
class="poster_img"
alt="OpenVidu Logo"
src="assets/images/poster.png"
/>
<ov-avatar-profile *ngIf="!_streamManager?.stream?.videoActive && (type === 'CAMERA' || !type)" [letter]="'K'"></ov-avatar-profile>
<video
class="OT_video-element"
#videoElement