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

openvidu-components: Improved poster animation

pull/748/head
Carlos Santos 2022-10-14 13:37:11 +02:00
parent 12e5a8b9d9
commit 3d0370017a
3 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.ts
View File

@ -1,4 +1,3 @@
import { animate, style, transition, trigger } from '@angular/animations';
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
/** /**
@ -8,19 +7,13 @@ import { Component, Input } from '@angular/core';
@Component({ @Component({
selector: 'ov-avatar-profile', selector: 'ov-avatar-profile',
template: ` template: `
<div class="poster" @posterAnimation> <div class="poster">
<div class="initial" [ngStyle]="{ 'background-color': color }"> <div class="initial" [ngStyle]="{ 'background-color': color }">
<span id="poster-text">{{ letter }}</span> <span id="poster-text">{{ letter }}</span>
</div> </div>
</div> </div>
`, `,
styleUrls: ['./avatar-profile.component.css'], styleUrls: ['./avatar-profile.component.css']
animations: [
trigger('posterAnimation', [
transition(':enter', [style({ opacity: 0 }), animate('600ms', style({ opacity: 1 }))])
// transition(':leave', [animate(600, style({ backgroundColor: 'yellow' }))]),
])
]
}) })
export class AvatarProfileComponent { export class AvatarProfileComponent {
letter: string; letter: string;

1
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
View File

@ -31,6 +31,7 @@
</div> </div>
<ov-avatar-profile <ov-avatar-profile
@posterAnimation
*ngIf="!_stream.streamManager?.stream?.videoActive && _stream.type === 'CAMERA'" *ngIf="!_stream.streamManager?.stream?.videoActive && _stream.type === 'CAMERA'"
[name]="_stream.participant.nickname" [name]="_stream.participant.nickname"
[color]="_stream.participant.colorProfile" [color]="_stream.participant.colorProfile"

25
openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
View File

@ -1,17 +1,18 @@
import { animate, style, transition, trigger } from '@angular/animations';
import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs';
import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu'; import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';
import { PublisherProperties } from 'openvidu-browser';
import { Subscription } from 'rxjs';
import { VideoSizeIcon } from '../../models/icon.model'; import { VideoSizeIcon } from '../../models/icon.model';
import { StreamModel } from '../../models/participant.model';
import { Signal } from '../../models/signal.model';
import { ScreenType, VideoType } from '../../models/video-type.model'; import { ScreenType, VideoType } from '../../models/video-type.model';
import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.service'; import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.service';
import { OpenViduService } from '../../services/openvidu/openvidu.service';
import { LayoutService } from '../../services/layout/layout.service';
import { StorageService } from '../../services/storage/storage.service';
import { Signal } from '../../models/signal.model';
import { PublisherProperties } from 'openvidu-browser';
import { StreamModel } from '../../models/participant.model';
import { ParticipantService } from '../../services/participant/participant.service';
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service'; import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
import { LayoutService } from '../../services/layout/layout.service';
import { OpenViduService } from '../../services/openvidu/openvidu.service';
import { ParticipantService } from '../../services/participant/participant.service';
import { StorageService } from '../../services/storage/storage.service';
/** /**
* The **StreamComponent** is hosted inside of the {@link LayoutComponent}. * The **StreamComponent** is hosted inside of the {@link LayoutComponent}.
@ -55,7 +56,13 @@ import { OpenViduAngularConfigService } from '../../services/config/openvidu-ang
@Component({ @Component({
selector: 'ov-stream', selector: 'ov-stream',
templateUrl: './stream.component.html', templateUrl: './stream.component.html',
styleUrls: ['./stream.component.css'] styleUrls: ['./stream.component.css'],
animations: [
trigger('posterAnimation', [
transition(':enter', [style({ opacity: 0 }), animate('400ms', style({ opacity: 1 }))]),
transition(':leave', [style({ opacity: 1 }), animate('200ms', style({ opacity: 0 }))]),
])
]
}) })
export class StreamComponent implements OnInit { export class StreamComponent implements OnInit {
/** /**