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

openvidu-components: Updated captions component

pull/743/head
csantosm 2022-07-08 15:39:05 +02:00
parent 091f53c596
commit e8f110f6b5
7 changed files with 1536 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
openvidu-components-angular/projects/openvidu-angular/src/lib/components/captions/captions.component.css
View File

@ -1,23 +1,27 @@
.subtitles-container {
/* padding: 5px; */
display: flex;
height: 75px;
height: var(--ov-captions-height, 200px);
margin: 0px 10px;
}
.subtitles-offset {
height: 75px;
width: 115px;
height: var(--ov-captions-height, 200px);
width: 15%;
text-align: center;
}
.subtitles-main-container {
flex-grow: 1;
text-align: center;
align-self: center;
margin-left: 15px;
max-height: var(--ov-captions-height, 200px);
width: 70%;
overflow: hidden;
}
.subtitles-offset + .subtitles-offset {
/* .subtitles-offset + .subtitles-offset {
margin-left: 2%;
}
} */
#subtitle-settings-btn {
color: var(--ov-text-color);
background-color: var(--ov-secondary-color);
@ -29,16 +33,46 @@
padding-right: 5px;
}
#subtitle-text {
#author {
margin-bottom: 3px;
font-weight: bold;
}
#subtitle-text,
#author {
color: var(--ov-text-color);
font-family: "Roboto",arial,sans-serif
}
.subtitles-main-container .element {
margin: 5px;
}
#subtitle-text {
background-color: var(--ov-logo-background-color);
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
padding: 4.5px;
line-height: 1.6;
word-break: break-word;
}
.small-text {
font-size: 14px !important;
.big-text {
font-size: 22px;
}
.medium-text {
font-size: 20px;
}
.small-text {
font-size: 18px;
}
.extra-small-text {
font-size: 16px;
}
.big-author {
font-size: 16px;
}
.medium-author {
font-size: 14px;
}
.small-author {
font-size: 12px;
}

32
openvidu-components-angular/projects/openvidu-angular/src/lib/components/captions/captions.component.html
View File

@ -1,12 +1,36 @@
<div class="subtitles-container">
<div class="subtitles-container" #captionsContainer>
<div *ngIf="screenSize !== 'sm' && screenSize !== 'xs' && !settingsPanelOpened" class="subtitles-offset">
<button (click)="onSettingsCliked()" id="subtitle-settings-btn" mat-flat-button>
<mat-icon id="subtitle-settings-icon">settings</mat-icon>
<span>English</span>
</button>
</div>
<div class="subtitles-main-container">
<span id="subtitle-text" [class.small-text]="screenSize === 'xs' ">(Demo preview): {{ subtitleText }}</span>
<div class="subtitles-main-container" #textContainer>
<div class="element" *ngFor="let item of captionElements" #captionElement>
<p
id="author"
[ngClass]="{
'big-author': captionsContainer.offsetWidth >= 1000 || screenSize === 'lg' || screenSize === 'xl',
'medium-author': (captionsContainer.offsetWidth >= 960 && captionsContainer.offsetWidth < 1000) || screenSize === 'md',
'small-author': captionsContainer.offsetWidth < 600 || screenSize === 'xs' || screenSize === 'sm'
}"
>
{{ item.author }} ({{item.text.length}})
</p>
<span
id="subtitle-text"
[ngClass]="{
'big-text': captionsContainer.offsetWidth >= 1000 || screenSize === 'lg' || screenSize === 'xl',
'medium-text': (captionsContainer.offsetWidth >= 960 && captionsContainer.offsetWidth < 1000) || screenSize === 'md',
'small-text': (captionsContainer.offsetWidth >= 600 && captionsContainer.offsetWidth < 960) || screenSize === 'sm',
'extra-small-text': captionsContainer.offsetWidth < 600 || screenSize === 'xs'
}"
>
{{ item.text }}</span
>
</div>
</div>
<div *ngIf="screenSize !== 'sm' && screenSize !== 'xs' && !settingsPanelOpened" class="subtitles-offset">
</div>
<div class="subtitles-offset" *ngIf="screenSize !== 'sm' && screenSize !== 'xs' && !settingsPanelOpened"></div>
</div>

1470
openvidu-components-angular/projects/openvidu-angular/src/lib/components/captions/captions.component.ts
View File

File diff suppressed because it is too large Load Diff

2
openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.css
View File

@ -6,7 +6,7 @@
height: 100%;
}
.withSubtitles {
height: calc(100% - 75px) !important;
height: calc(100% - var(--ov-captions-height, 200px)) !important;
}
.layout {

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

@ -49,7 +49,7 @@
</div>
<div *ngIf="!isMinimal && showSettingsButton" id="settings-container" class="videoButtons">
<button mat-icon-button (click)="toggleVideoMenu($event)" matTooltip="{{ 'STREAM.SETTINGS' | translate }}" aria-label="Video settings menu">
<button mat-icon-button (click)="toggleVideoMenu($event)" matTooltip="{{ 'STREAM.SETTINGS' | translate }}" matTooltipPosition="above" aria-label="Video settings menu">
<mat-icon>more_vert</mat-icon>
</button>
<span [matMenuTriggerFor]="menu"></span>

5
openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.css
View File

@ -23,4 +23,9 @@
text-align: -webkit-center;
text-align: -moz-center;
color: var(--ov-panel-text-color);
}
/* Private css variables */
#call-container {
--ov-captions-height: 250px;
}

3
openvidu-components-angular/projects/openvidu-angular/src/lib/services/document/document.service.ts
View File

@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { MediaChange, MediaObserver } from '@angular/flex-layout';
import { BehaviorSubject, Observable } from 'rxjs';
import { Observable } from 'rxjs';
import { LayoutClass } from '../../models/layout.model';
/**
@ -11,7 +11,6 @@ import { LayoutClass } from '../../models/layout.model';
})
export class DocumentService {
screenSizeObs: Observable<MediaChange[]>;
private screenSize = <BehaviorSubject<MediaChange>><unknown>new BehaviorSubject(MediaChange);
constructor(private media: MediaObserver) {
this.screenSizeObs= this.media.asObservable();