OpenViduLayout: smart layout for recordings
This commit is contained in:
pabloFuente
parent
06e6f496ee
commit
cdf786996c
@ -3,39 +3,36 @@
|
||||
"project": {
|
||||
"name": "openvidu-server-frontend"
|
||||
},
|
||||
"apps": [
|
||||
{
|
||||
"root": "src",
|
||||
"outDir": "dist",
|
||||
"assets": [
|
||||
"assets",
|
||||
"favicon.ico"
|
||||
],
|
||||
"index": "index.html",
|
||||
"main": "main.ts",
|
||||
"polyfills": "polyfills.ts",
|
||||
"test": "test.ts",
|
||||
"tsconfig": "tsconfig.app.json",
|
||||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"styles.css"
|
||||
],
|
||||
"scripts": [],
|
||||
"environmentSource": "environments/environment.ts",
|
||||
"environments": {
|
||||
"dev": "environments/environment.ts",
|
||||
"prod": "environments/environment.prod.ts"
|
||||
}
|
||||
"apps": [{
|
||||
"root": "src",
|
||||
"outDir": "dist",
|
||||
"assets": [
|
||||
"assets",
|
||||
"favicon.ico"
|
||||
],
|
||||
"index": "index.html",
|
||||
"main": "main.ts",
|
||||
"polyfills": "polyfills.ts",
|
||||
"test": "test.ts",
|
||||
"tsconfig": "tsconfig.app.json",
|
||||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"styles.css"
|
||||
],
|
||||
"scripts": [],
|
||||
"environmentSource": "environments/environment.ts",
|
||||
"environments": {
|
||||
"dev": "environments/environment.ts",
|
||||
"prod": "environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
}],
|
||||
"e2e": {
|
||||
"protractor": {
|
||||
"config": "./protractor.conf.js"
|
||||
}
|
||||
},
|
||||
"lint": [
|
||||
{
|
||||
"lint": [{
|
||||
"project": "src/tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,52 +1,52 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"@angular/animations": "5.0.5",
|
||||
"@angular/cdk": "5.0.0-rc.2",
|
||||
"@angular/common": "5.0.5",
|
||||
"@angular/compiler": "5.0.5",
|
||||
"@angular/core": "5.0.5",
|
||||
"@angular/flex-layout": "2.0.0-beta.10-4905443",
|
||||
"@angular/forms": "5.0.5",
|
||||
"@angular/http": "5.0.5",
|
||||
"@angular/material": "5.0.0-rc.1",
|
||||
"@angular/platform-browser": "5.0.5",
|
||||
"@angular/platform-browser-dynamic": "5.0.5",
|
||||
"@angular/router": "5.0.5",
|
||||
"core-js": "2.5.1",
|
||||
"hammerjs": "2.0.8",
|
||||
"openvidu-browser": "1.7.0",
|
||||
"rxjs": "5.5.3",
|
||||
"zone.js": "0.8.18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "^1.6.0",
|
||||
"@angular/compiler-cli": "5.0.5",
|
||||
"@types/jasmine": "2.5.38",
|
||||
"@types/node": "~6.0.60",
|
||||
"codelyzer": "4.0.1",
|
||||
"jasmine-core": "~2.5.2",
|
||||
"jasmine-spec-reporter": "~3.2.0",
|
||||
"karma": "~1.4.1",
|
||||
"karma-chrome-launcher": "~2.0.0",
|
||||
"karma-cli": "~1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "^0.2.0",
|
||||
"karma-jasmine": "~1.1.0",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"protractor": "~5.1.0",
|
||||
"ts-node": "3.3.0",
|
||||
"tslint": "5.8.0",
|
||||
"typescript": "2.4.2"
|
||||
},
|
||||
"license": "MIT",
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "ng build",
|
||||
"e2e": "ng e2e",
|
||||
"lint": "ng lint",
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"test": "ng test"
|
||||
},
|
||||
"version": "0.0.0"
|
||||
}
|
||||
"dependencies": {
|
||||
"@angular/animations": "5.0.5",
|
||||
"@angular/cdk": "5.0.0-rc.2",
|
||||
"@angular/common": "5.0.5",
|
||||
"@angular/compiler": "5.0.5",
|
||||
"@angular/core": "5.0.5",
|
||||
"@angular/flex-layout": "2.0.0-beta.10-4905443",
|
||||
"@angular/forms": "5.0.5",
|
||||
"@angular/http": "5.0.5",
|
||||
"@angular/material": "5.0.0-rc.1",
|
||||
"@angular/platform-browser": "5.0.5",
|
||||
"@angular/platform-browser-dynamic": "5.0.5",
|
||||
"@angular/router": "5.0.5",
|
||||
"core-js": "2.5.1",
|
||||
"hammerjs": "2.0.8",
|
||||
"openvidu-browser": "1.7.0",
|
||||
"rxjs": "5.5.3",
|
||||
"zone.js": "0.8.18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "^1.6.0",
|
||||
"@angular/compiler-cli": "5.0.5",
|
||||
"@types/jasmine": "2.5.38",
|
||||
"@types/node": "~6.0.60",
|
||||
"codelyzer": "4.0.1",
|
||||
"jasmine-core": "~2.5.2",
|
||||
"jasmine-spec-reporter": "~3.2.0",
|
||||
"karma": "~1.4.1",
|
||||
"karma-chrome-launcher": "~2.0.0",
|
||||
"karma-cli": "~1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "^0.2.0",
|
||||
"karma-jasmine": "~1.1.0",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"protractor": "~5.1.0",
|
||||
"ts-node": "3.3.0",
|
||||
"tslint": "5.8.0",
|
||||
"typescript": "2.4.2"
|
||||
},
|
||||
"license": "MIT",
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "ng build",
|
||||
"e2e": "ng e2e",
|
||||
"lint": "ng lint",
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"test": "ng test"
|
||||
},
|
||||
"version": "0.0.0"
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,8 +1,7 @@
|
||||
<div class="bounds">
|
||||
<div *ngFor="let streams of remoteStreams" class="content" fxLayout="row" fxFlexFill [style.height]="100 / remoteStreams.length + '%'"
|
||||
[style.min-height]="100 / remoteStreams.length + '%'">
|
||||
<div *ngFor="let s of streams" [fxFlex]="100 / streams">
|
||||
<video [id]="'native-video-' + s.streamId" autoplay="true" [srcObject]="s.getMediaStream()"></video>
|
||||
<div id="layout" class="bounds">
|
||||
<div *ngFor="let s of streams" class="OT_root OT_publisher custom-class">
|
||||
<div class="OT_widget-container" style="width: 100%; height: 100%;">
|
||||
<video [id]="'native-video-' + s.streamId" autoplay="true" [srcObject]="s.getMediaStream()" (playing)="onVideoPlaying($event)"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,22 +1,28 @@
|
||||
import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
|
||||
import { Component, OnInit, OnDestroy, HostListener, ViewEncapsulation, ApplicationRef } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { OpenVidu, Session, Stream } from 'openvidu-browser';
|
||||
import { OpenVidu, Session, Stream, Subscriber } from 'openvidu-browser';
|
||||
|
||||
import { OpenViduLayout } from '../../../../assets/openvidu-layout';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout-best-fit',
|
||||
templateUrl: './layout-best-fit.component.html',
|
||||
styleUrls: ['./layout-best-fit.component.css']
|
||||
styleUrls: ['./layout-best-fit.component.css'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class LayoutBestFitComponent implements OnInit, OnDestroy {
|
||||
|
||||
openviduLayout: OpenViduLayout;
|
||||
sessionId: string;
|
||||
secret: string;
|
||||
|
||||
session: Session;
|
||||
numberOfVideos = 0;
|
||||
remoteStreams = [];
|
||||
streams = [];
|
||||
|
||||
constructor(private route: ActivatedRoute) {
|
||||
layout: any;
|
||||
resizeTimeout;
|
||||
|
||||
constructor(private route: ActivatedRoute, private appRef: ApplicationRef) {
|
||||
this.route.params.subscribe(params => {
|
||||
this.sessionId = params.sessionId;
|
||||
this.secret = params.secret;
|
||||
@ -28,6 +34,14 @@ export class LayoutBestFitComponent implements OnInit, OnDestroy {
|
||||
this.leaveSession();
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
sizeChange(event) {
|
||||
clearTimeout(this.resizeTimeout);
|
||||
this.resizeTimeout = setTimeout(() => {
|
||||
this.openviduLayout.updateLayout();
|
||||
}, 20);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.leaveSession();
|
||||
}
|
||||
@ -39,15 +53,14 @@ export class LayoutBestFitComponent implements OnInit, OnDestroy {
|
||||
this.session = OV.initSession(fullSessionId);
|
||||
|
||||
this.session.on('streamCreated', (event) => {
|
||||
this.numberOfVideos++;
|
||||
const subscriber: Subscriber = this.session.subscribe(event.stream, '');
|
||||
this.addRemoteStream(event.stream);
|
||||
this.session.subscribe(event.stream, '');
|
||||
});
|
||||
|
||||
this.session.on('streamDestroyed', (event) => {
|
||||
this.numberOfVideos--;
|
||||
event.preventDefault();
|
||||
this.deleteRemoteStream(event.stream);
|
||||
this.openviduLayout.updateLayout();
|
||||
});
|
||||
|
||||
this.session.connect(null, (error) => {
|
||||
@ -55,79 +68,46 @@ export class LayoutBestFitComponent implements OnInit, OnDestroy {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
|
||||
this.openviduLayout = new OpenViduLayout();
|
||||
this.openviduLayout.initLayoutContainer(document.getElementById('layout'), {
|
||||
maxRatio: 3 / 2, // The narrowest ratio that will be used (default 2x3)
|
||||
minRatio: 9 / 16, // The widest ratio that will be used (default 16x9)
|
||||
fixedRatio: false, /* If this is true then the aspect ratio of the video is maintained
|
||||
and minRatio and maxRatio are ignored (default false) */
|
||||
bigClass: 'OV_big', // The class to add to elements that should be sized bigger
|
||||
bigPercentage: 0.8, // The maximum percentage of space the big ones should take up
|
||||
bigFixedRatio: false, // fixedRatio for the big ones
|
||||
bigMaxRatio: 3 / 2, // The narrowest ratio to use for the big elements (default 2x3)
|
||||
bigMinRatio: 9 / 16, // The widest ratio to use for the big elements (default 16x9)
|
||||
bigFirst: true, // Whether to place the big one in the top left (true) or bottom right
|
||||
animate: true // Whether you want to animate the transitions
|
||||
});
|
||||
}
|
||||
|
||||
private addRemoteStream(stream: Stream): void {
|
||||
switch (true) {
|
||||
case (this.numberOfVideos <= 2):
|
||||
if (this.remoteStreams[0] == null) { this.remoteStreams[0] = []; }
|
||||
this.remoteStreams[0].push(stream);
|
||||
break;
|
||||
case (this.numberOfVideos <= 4):
|
||||
if (this.remoteStreams[1] == null) { this.remoteStreams[1] = []; }
|
||||
this.remoteStreams[1].push(stream);
|
||||
break;
|
||||
case (this.numberOfVideos <= 5):
|
||||
this.remoteStreams[0].push(stream);
|
||||
break;
|
||||
case (this.numberOfVideos <= 6):
|
||||
this.remoteStreams[1].push(stream);
|
||||
break;
|
||||
default:
|
||||
if (this.remoteStreams[2] == null) { this.remoteStreams[2] = []; }
|
||||
this.remoteStreams[2].push(stream);
|
||||
break;
|
||||
}
|
||||
this.streams.push(stream);
|
||||
this.appRef.tick();
|
||||
}
|
||||
|
||||
private deleteRemoteStream(stream: Stream): void {
|
||||
for (let i = 0; i < this.remoteStreams.length; i++) {
|
||||
const index = this.remoteStreams[i].indexOf(stream, 0);
|
||||
if (index > -1) {
|
||||
this.remoteStreams[i].splice(index, 1);
|
||||
this.reArrangeVideos();
|
||||
break;
|
||||
}
|
||||
const index = this.streams.indexOf(stream, 0);
|
||||
if (index > -1) {
|
||||
this.streams.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
private reArrangeVideos(): void {
|
||||
switch (true) {
|
||||
case (this.numberOfVideos === 1):
|
||||
if (this.remoteStreams[0].length === 0) {
|
||||
this.remoteStreams[0].push(this.remoteStreams[1].pop());
|
||||
}
|
||||
break;
|
||||
case (this.numberOfVideos === 2):
|
||||
if (this.remoteStreams[0].length === 1) {
|
||||
this.remoteStreams[0].push(this.remoteStreams[1].pop());
|
||||
}
|
||||
break;
|
||||
case (this.numberOfVideos === 3):
|
||||
if (this.remoteStreams[0].length === 1) {
|
||||
this.remoteStreams[0].push(this.remoteStreams[1].pop());
|
||||
}
|
||||
break;
|
||||
case (this.numberOfVideos === 4):
|
||||
if (this.remoteStreams[0].length === 3) {
|
||||
this.remoteStreams[1].unshift(this.remoteStreams[0].pop());
|
||||
}
|
||||
break;
|
||||
case (this.numberOfVideos === 5):
|
||||
if (this.remoteStreams[0].length === 2) {
|
||||
this.remoteStreams[0].push(this.remoteStreams[1].shift());
|
||||
}
|
||||
break;
|
||||
}
|
||||
this.remoteStreams = this.remoteStreams.filter((array) => { return array.length > 0 });
|
||||
|
||||
this.appRef.tick();
|
||||
}
|
||||
|
||||
leaveSession() {
|
||||
if (this.session) { this.session.disconnect(); };
|
||||
this.remoteStreams = [];
|
||||
this.numberOfVideos = 0;
|
||||
this.streams = [];
|
||||
this.session = null;
|
||||
}
|
||||
|
||||
onVideoPlaying(event) {
|
||||
const video: HTMLVideoElement = event.target;
|
||||
video.parentElement.parentElement.classList.remove('custom-class');
|
||||
this.openviduLayout.updateLayout();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -0,0 +1,357 @@
|
||||
declare var $: any;
|
||||
|
||||
export interface OpenViduLayoutOptions {
|
||||
maxRatio: number;
|
||||
minRatio: number;
|
||||
fixedRatio: boolean;
|
||||
animate: any;
|
||||
bigClass: string;
|
||||
bigPercentage: any;
|
||||
bigFixedRatio: any;
|
||||
bigMaxRatio: any;
|
||||
bigMinRatio: any;
|
||||
bigFirst: any;
|
||||
}
|
||||
|
||||
export class OpenViduLayout {
|
||||
|
||||
private layoutContainer: HTMLElement;
|
||||
private opts: OpenViduLayoutOptions;
|
||||
|
||||
private fixAspectRatio(elem: HTMLVideoElement, width: number) {
|
||||
const sub: HTMLVideoElement = <HTMLVideoElement>elem.querySelector('.OT_root');
|
||||
if (sub) {
|
||||
// If this is the parent of a subscriber or publisher then we need
|
||||
// to force the mutation observer on the publisher or subscriber to
|
||||
// trigger to get it to fix it's layout
|
||||
const oldWidth = sub.style.width;
|
||||
sub.style.width = width + 'px';
|
||||
// sub.style.height = height + 'px';
|
||||
sub.style.width = oldWidth || '';
|
||||
}
|
||||
}
|
||||
|
||||
private positionElement(elem: HTMLVideoElement, x: number, y: number, width: number, height: number, animate: any) {
|
||||
const targetPosition = {
|
||||
left: x + 'px',
|
||||
top: y + 'px',
|
||||
width: width + 'px',
|
||||
height: height + 'px'
|
||||
};
|
||||
|
||||
this.fixAspectRatio(elem, width);
|
||||
|
||||
if (animate && $) {
|
||||
$(elem).stop();
|
||||
$(elem).animate(targetPosition, animate.duration || 200, animate.easing || 'swing',
|
||||
() => {
|
||||
this.fixAspectRatio(elem, width);
|
||||
if (animate.complete) { animate.complete.call(this); }
|
||||
});
|
||||
} else {
|
||||
$(elem).css(targetPosition);
|
||||
}
|
||||
this.fixAspectRatio(elem, width);
|
||||
}
|
||||
|
||||
private getVideoRatio(elem: HTMLVideoElement) {
|
||||
if (!elem) {
|
||||
return 3 / 4;
|
||||
}
|
||||
const video: HTMLVideoElement = <HTMLVideoElement>elem.querySelector('video');
|
||||
if (video && video.videoHeight && video.videoWidth) {
|
||||
return video.videoHeight / video.videoWidth;
|
||||
} else if (elem.videoHeight && elem.videoWidth) {
|
||||
return elem.videoHeight / elem.videoWidth;
|
||||
}
|
||||
return 3 / 4;
|
||||
}
|
||||
|
||||
private getCSSNumber(elem: HTMLElement, prop: string) {
|
||||
const cssStr = $(elem).css(prop);
|
||||
return cssStr ? parseInt(cssStr, 10) : 0;
|
||||
}
|
||||
|
||||
// Really cheap UUID function
|
||||
private cheapUUID() {
|
||||
return (Math.random() * 100000000).toFixed(0);
|
||||
}
|
||||
|
||||
private getHeight(elem: HTMLElement) {
|
||||
const heightStr = $(elem).css('height');
|
||||
return heightStr ? parseInt(heightStr, 10) : 0;
|
||||
}
|
||||
|
||||
private getWidth(elem: HTMLElement) {
|
||||
const widthStr = $(elem).css('width');
|
||||
return widthStr ? parseInt(widthStr, 10) : 0;
|
||||
}
|
||||
|
||||
private getBestDimensions(minR: number, maxR: number, count: number, WIDTH: number, HEIGHT: number, targetHeight: number) {
|
||||
let maxArea,
|
||||
targetCols,
|
||||
targetRows,
|
||||
targetWidth,
|
||||
tWidth,
|
||||
tHeight,
|
||||
tRatio;
|
||||
|
||||
// Iterate through every possible combination of rows and columns
|
||||
// and see which one has the least amount of whitespace
|
||||
for (let i = 1; i <= count; i++) {
|
||||
const colsAux = i;
|
||||
const rowsAux = Math.ceil(count / colsAux);
|
||||
|
||||
// Try taking up the whole height and width
|
||||
tHeight = Math.floor(HEIGHT / rowsAux);
|
||||
tWidth = Math.floor(WIDTH / colsAux);
|
||||
|
||||
tRatio = tHeight / tWidth;
|
||||
if (tRatio > maxR) {
|
||||
// We went over decrease the height
|
||||
tRatio = maxR;
|
||||
tHeight = tWidth * tRatio;
|
||||
} else if (tRatio < minR) {
|
||||
// We went under decrease the width
|
||||
tRatio = minR;
|
||||
tWidth = tHeight / tRatio;
|
||||
}
|
||||
|
||||
const area = (tWidth * tHeight) * count;
|
||||
|
||||
// If this width and height takes up the most space then we're going with that
|
||||
if (maxArea === undefined || (area > maxArea)) {
|
||||
maxArea = area;
|
||||
targetHeight = tHeight;
|
||||
targetWidth = tWidth;
|
||||
targetCols = colsAux;
|
||||
targetRows = rowsAux;
|
||||
}
|
||||
}
|
||||
return {
|
||||
maxArea: maxArea,
|
||||
targetCols: targetCols,
|
||||
targetRows: targetRows,
|
||||
targetHeight: targetHeight,
|
||||
targetWidth: targetWidth,
|
||||
ratio: targetHeight / targetWidth
|
||||
};
|
||||
};
|
||||
|
||||
private arrange(children: HTMLVideoElement[], WIDTH: number, HEIGHT: number, offsetLeft: number, offsetTop: number, fixedRatio: boolean,
|
||||
minRatio: number, maxRatio: number, animate: any) {
|
||||
|
||||
let targetHeight;
|
||||
|
||||
const count = children.length;
|
||||
let dimensions;
|
||||
|
||||
if (!fixedRatio) {
|
||||
dimensions = this.getBestDimensions(minRatio, maxRatio, count, WIDTH, HEIGHT, targetHeight);
|
||||
} else {
|
||||
// Use the ratio of the first video element we find to approximate
|
||||
const ratio = this.getVideoRatio(children.length > 0 ? children[0] : null);
|
||||
dimensions = this.getBestDimensions(ratio, ratio, count, WIDTH, HEIGHT, targetHeight);
|
||||
}
|
||||
|
||||
// Loop through each stream in the container and place it inside
|
||||
let x = 0,
|
||||
y = 0;
|
||||
const rows = [];
|
||||
let row;
|
||||
// Iterate through the children and create an array with a new item for each row
|
||||
// and calculate the width of each row so that we know if we go over the size and need
|
||||
// to adjust
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
if (i % dimensions.targetCols === 0) {
|
||||
// This is a new row
|
||||
row = {
|
||||
children: [],
|
||||
width: 0,
|
||||
height: 0
|
||||
};
|
||||
rows.push(row);
|
||||
}
|
||||
const elem: HTMLVideoElement = children[i];
|
||||
row.children.push(elem);
|
||||
let targetWidth = dimensions.targetWidth;
|
||||
targetHeight = dimensions.targetHeight;
|
||||
// If we're using a fixedRatio then we need to set the correct ratio for this element
|
||||
if (fixedRatio) {
|
||||
targetWidth = targetHeight / this.getVideoRatio(elem);
|
||||
}
|
||||
row.width += targetWidth;
|
||||
row.height = targetHeight;
|
||||
}
|
||||
// Calculate total row height adjusting if we go too wide
|
||||
let totalRowHeight = 0;
|
||||
let remainingShortRows = 0;
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
row = rows[i];
|
||||
if (row.width > WIDTH) {
|
||||
// Went over on the width, need to adjust the height proportionally
|
||||
row.height = Math.floor(row.height * (WIDTH / row.width));
|
||||
row.width = WIDTH;
|
||||
} else if (row.width < WIDTH) {
|
||||
remainingShortRows += 1;
|
||||
}
|
||||
totalRowHeight += row.height;
|
||||
}
|
||||
if (totalRowHeight < HEIGHT && remainingShortRows > 0) {
|
||||
// We can grow some of the rows, we're not taking up the whole height
|
||||
let remainingHeightDiff = HEIGHT - totalRowHeight;
|
||||
totalRowHeight = 0;
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
row = rows[i];
|
||||
if (row.width < WIDTH) {
|
||||
// Evenly distribute the extra height between the short rows
|
||||
let extraHeight = remainingHeightDiff / remainingShortRows;
|
||||
if ((extraHeight / row.height) > ((WIDTH - row.width) / row.width)) {
|
||||
// We can't go that big or we'll go too wide
|
||||
extraHeight = Math.floor(((WIDTH - row.width) / row.width) * row.height);
|
||||
}
|
||||
row.width += Math.floor((extraHeight / row.height) * row.width);
|
||||
row.height += extraHeight;
|
||||
remainingHeightDiff -= extraHeight;
|
||||
remainingShortRows -= 1;
|
||||
}
|
||||
totalRowHeight += row.height;
|
||||
}
|
||||
}
|
||||
// vertical centering
|
||||
y = ((HEIGHT - (totalRowHeight)) / 2);
|
||||
// Iterate through each row and place each child
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
row = rows[i];
|
||||
// center the row
|
||||
const rowMarginLeft = ((WIDTH - row.width) / 2);
|
||||
x = rowMarginLeft;
|
||||
for (let j = 0; j < row.children.length; j++) {
|
||||
const elem: HTMLVideoElement = row.children[j];
|
||||
|
||||
let targetWidth = dimensions.targetWidth;
|
||||
targetHeight = row.height;
|
||||
// If we're using a fixedRatio then we need to set the correct ratio for this element
|
||||
if (fixedRatio) {
|
||||
targetWidth = Math.floor(targetHeight / this.getVideoRatio(elem));
|
||||
}
|
||||
elem.style.position = 'absolute';
|
||||
// $(elem).css('position', 'absolute');
|
||||
const actualWidth = targetWidth - this.getCSSNumber(elem, 'paddingLeft') -
|
||||
this.getCSSNumber(elem, 'paddingRight') -
|
||||
this.getCSSNumber(elem, 'marginLeft') -
|
||||
this.getCSSNumber(elem, 'marginRight') -
|
||||
this.getCSSNumber(elem, 'borderLeft') -
|
||||
this.getCSSNumber(elem, 'borderRight');
|
||||
|
||||
const actualHeight = targetHeight - this.getCSSNumber(elem, 'paddingTop') -
|
||||
this.getCSSNumber(elem, 'paddingBottom') -
|
||||
this.getCSSNumber(elem, 'marginTop') -
|
||||
this.getCSSNumber(elem, 'marginBottom') -
|
||||
this.getCSSNumber(elem, 'borderTop') -
|
||||
this.getCSSNumber(elem, 'borderBottom');
|
||||
|
||||
this.positionElement(elem, x + offsetLeft, y + offsetTop, actualWidth, actualHeight, animate);
|
||||
x += targetWidth;
|
||||
}
|
||||
y += targetHeight;
|
||||
}
|
||||
}
|
||||
|
||||
private filterDisplayNone(element: HTMLElement) {
|
||||
return element.style.display !== 'none';
|
||||
}
|
||||
|
||||
updateLayout() {
|
||||
if (this.layoutContainer.style.display === 'none') {
|
||||
return;
|
||||
}
|
||||
let id = this.layoutContainer.id;
|
||||
if (!id) {
|
||||
id = 'OT_' + this.cheapUUID();
|
||||
this.layoutContainer.id = id;
|
||||
}
|
||||
|
||||
const HEIGHT = this.getHeight(this.layoutContainer) -
|
||||
this.getCSSNumber(this.layoutContainer, 'borderTop') -
|
||||
this.getCSSNumber(this.layoutContainer, 'borderBottom');
|
||||
const WIDTH = this.getWidth(this.layoutContainer) -
|
||||
this.getCSSNumber(this.layoutContainer, 'borderLeft') -
|
||||
this.getCSSNumber(this.layoutContainer, 'borderRight');
|
||||
|
||||
const availableRatio = HEIGHT / WIDTH;
|
||||
|
||||
let offsetLeft = 0;
|
||||
let offsetTop = 0;
|
||||
let bigOffsetTop = 0;
|
||||
let bigOffsetLeft = 0;
|
||||
|
||||
const bigOnes = Array.prototype.filter.call(
|
||||
this.layoutContainer.querySelectorAll('#' + id + '>.' + this.opts.bigClass),
|
||||
this.filterDisplayNone);
|
||||
const smallOnes = Array.prototype.filter.call(
|
||||
this.layoutContainer.querySelectorAll('#' + id + '>*:not(.' + this.opts.bigClass + ')'),
|
||||
this.filterDisplayNone);
|
||||
|
||||
if (bigOnes.length > 0 && smallOnes.length > 0) {
|
||||
let bigWidth, bigHeight;
|
||||
|
||||
if (availableRatio > this.getVideoRatio(bigOnes[0])) {
|
||||
// We are tall, going to take up the whole width and arrange small
|
||||
// guys at the bottom
|
||||
bigWidth = WIDTH;
|
||||
bigHeight = Math.floor(HEIGHT * this.opts.bigPercentage);
|
||||
offsetTop = bigHeight;
|
||||
bigOffsetTop = HEIGHT - offsetTop;
|
||||
} else {
|
||||
// We are wide, going to take up the whole height and arrange the small
|
||||
// guys on the right
|
||||
bigHeight = HEIGHT;
|
||||
bigWidth = Math.floor(WIDTH * this.opts.bigPercentage);
|
||||
offsetLeft = bigWidth;
|
||||
bigOffsetLeft = WIDTH - offsetLeft;
|
||||
}
|
||||
if (this.opts.bigFirst) {
|
||||
this.arrange(bigOnes, bigWidth, bigHeight, 0, 0, this.opts.bigFixedRatio, this.opts.bigMinRatio,
|
||||
this.opts.bigMaxRatio, this.opts.animate);
|
||||
this.arrange(smallOnes, WIDTH - offsetLeft, HEIGHT - offsetTop, offsetLeft, offsetTop,
|
||||
this.opts.fixedRatio, this.opts.minRatio, this.opts.maxRatio, this.opts.animate);
|
||||
} else {
|
||||
this.arrange(smallOnes, WIDTH - offsetLeft, HEIGHT - offsetTop, 0, 0, this.opts.fixedRatio,
|
||||
this.opts.minRatio, this.opts.maxRatio, this.opts.animate);
|
||||
this.arrange(bigOnes, bigWidth, bigHeight, bigOffsetLeft, bigOffsetTop,
|
||||
this.opts.bigFixedRatio, this.opts.bigMinRatio, this.opts.bigMaxRatio, this.opts.animate);
|
||||
}
|
||||
} else if (bigOnes.length > 0 && smallOnes.length === 0) {
|
||||
this.
|
||||
// We only have one bigOne just center it
|
||||
arrange(bigOnes, WIDTH, HEIGHT, 0, 0, this.opts.bigFixedRatio, this.opts.bigMinRatio,
|
||||
this.opts.bigMaxRatio, this.opts.animate);
|
||||
} else {
|
||||
this.arrange(smallOnes, WIDTH - offsetLeft, HEIGHT - offsetTop, offsetLeft, offsetTop,
|
||||
this.opts.fixedRatio, this.opts.minRatio, this.opts.maxRatio, this.opts.animate);
|
||||
}
|
||||
}
|
||||
|
||||
initLayoutContainer(container, opts) {
|
||||
this.opts = {
|
||||
maxRatio: (opts.maxRatio != null) ? opts.maxRatio : 3 / 2,
|
||||
minRatio: (opts.minRatio != null) ? opts.minRatio : 9 / 16,
|
||||
fixedRatio: (opts.fixedRatio != null) ? opts.fixedRatio : false,
|
||||
animate: (opts.animate != null) ? opts.animate : false,
|
||||
bigClass: (opts.bigClass != null) ? opts.bigClass : 'OT_big',
|
||||
bigPercentage: (opts.bigPercentage != null) ? opts.bigPercentage : 0.8,
|
||||
bigFixedRatio: (opts.bigFixedRatio != null) ? opts.bigFixedRatio : false,
|
||||
bigMaxRatio: (opts.bigMaxRatio != null) ? opts.bigMaxRatio : 3 / 2,
|
||||
bigMinRatio: (opts.bigMinRatio != null) ? opts.bigMinRatio : 9 / 16,
|
||||
bigFirst: (opts.bigFirst != null) ? opts.bigFirst : true
|
||||
};
|
||||
this.layoutContainer = typeof (container) === 'string' ? $(container) : container;
|
||||
}
|
||||
|
||||
setLayoutOptions(options: OpenViduLayoutOptions) {
|
||||
this.opts = options;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
</head>
|
||||
|
||||
@ -16,7 +16,7 @@ li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
video {
|
||||
#mirrored-video video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user