mirror of https://github.com/OpenVidu/openvidu.git
OpenVidu users refactored to openvidu-instance component
pabloFuente
parent
d44ba5fd61
commit
8e6b5d0985
|
|
@ -27,7 +27,7 @@ export class Subscriber {
|
|||
callback(event);
|
||||
});
|
||||
if (eventName == 'videoElementCreated') {
|
||||
if (this.stream.isReady) {
|
||||
if (this.stream.isVideoELementCreated) {
|
||||
this.ee.emitEvent('videoElementCreated', [{
|
||||
element: this.stream.getVideoElement()
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -266,7 +266,7 @@ export class Stream {
|
|||
|
||||
if (this.local && !this.displayMyRemote()) {
|
||||
this.video.muted = true;
|
||||
this.video.onplay = () => {
|
||||
this.video.onplaying = () => {
|
||||
console.info("Local 'Stream' with id [" + this.getId() + "] video is now playing");
|
||||
this.ee.emitEvent('video-is-playing', [{
|
||||
element: this.video
|
||||
|
|
@ -595,7 +595,7 @@ export class Stream {
|
|||
let thumbnailId = videoElement.thumb;
|
||||
let video = videoElement.video;
|
||||
video.srcObject = this.wrStream;
|
||||
video.onplay = () => {
|
||||
video.onplaying = () => {
|
||||
if (this.local && this.displayMyRemote()) {
|
||||
console.info("Your own remote 'Stream' with id [" + this.getId() + "] video is now playing");
|
||||
this.ee.emitEvent('remote-video-is-playing', [{
|
||||
|
|
|
|||
|
|
@ -4,5 +4,6 @@
|
|||
}
|
||||
|
||||
main {
|
||||
padding: 50px
|
||||
padding: 50px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,11 +10,13 @@ import { AppComponent } from './app.component';
|
|||
import { DashboardComponent } from './components/dashboard/dashboard.component';
|
||||
|
||||
import { OpenviduRestService } from './services/openvidu-rest.service';
|
||||
import { OpenviduInstanceComponent } from './components/openvidu-instance/openvidu-instance.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
DashboardComponent
|
||||
DashboardComponent,
|
||||
OpenviduInstanceComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
.demo-tab-content {
|
||||
margin-top: 50px;
|
||||
margin-top: 30px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
table {
|
||||
|
|
@ -26,32 +28,6 @@ th {
|
|||
padding-top: 16px;
|
||||
}
|
||||
|
||||
md-card {
|
||||
background-color: rgba(77, 77, 77, 0.05);
|
||||
}
|
||||
|
||||
.join-card {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
margin-bottom: 50px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inner-card {
|
||||
border: 1px solid #e1e1e1;
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.inner-card h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.inner-card md-radio-group {
|
||||
padding-left: 20px;
|
||||
app-openvidu-instance {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -10,73 +10,25 @@
|
|||
|
||||
<md-tab id="audio-video" label="Test session">
|
||||
<div class="demo-tab-content">
|
||||
|
||||
<div fxLayout="row" fxLayoutGap="20px" fxFlex="40" fxLayoutAlign="start start">
|
||||
<md-card class="join-card">
|
||||
<md-card-title>Join a session</md-card-title>
|
||||
<md-card-content>
|
||||
<form>
|
||||
<md-form-field class="full-width">
|
||||
<input mdInput placeholder="Client data" name="clientData" [(ngModel)]="clientData">
|
||||
</md-form-field>
|
||||
<md-form-field class="full-width">
|
||||
<input mdInput placeholder="Session name" name="sessionName" [(ngModel)]="sessionName">
|
||||
</md-form-field>
|
||||
<div class="inner-card">
|
||||
<h4>Send...</h4>
|
||||
<p>
|
||||
<md-checkbox [(ngModel)]="sendVideo" name="sendVideo">Video</md-checkbox>
|
||||
</p>
|
||||
<p>
|
||||
<md-radio-group [(ngModel)]="optionVideo" name="optionVideo" [disabled]="!sendVideo">
|
||||
<md-radio-button value="video">Video</md-radio-button>
|
||||
<md-radio-button value="screen">Screen</md-radio-button>
|
||||
</md-radio-group>
|
||||
</p>
|
||||
<p>
|
||||
<md-checkbox [(ngModel)]="sendAudio" name="sendAudio">Audio</md-checkbox>
|
||||
</p>
|
||||
</div>
|
||||
<div class="inner-card">
|
||||
<h4>Enter with active...</h4>
|
||||
<md-checkbox [(ngModel)]="activeVideo" name="activeVideo" [disabled]="!sendVideo">Video</md-checkbox>
|
||||
<md-checkbox [(ngModel)]="activeAudio" name="activeAudio" [disabled]="!sendAudio">Audio</md-checkbox>
|
||||
</div>
|
||||
</form>
|
||||
</md-card-content>
|
||||
<md-card-actions>
|
||||
<button md-button id="join-btn" (click)="joinSession()">JOIN</button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
<div *ngIf="session" fxLayout="row" fxLayoutGap="20px" fxFlex="60" fxLayoutAlign="start start">
|
||||
<div id="session">
|
||||
<div id="session-header">
|
||||
<h1 id="session-title">{{sessionName}}</h1>
|
||||
<button md-raised-button color="warn" (click)="leaveSession()">Leave session</button>
|
||||
</div>
|
||||
<div id="video-container"></div>
|
||||
</div>
|
||||
<div>
|
||||
<button id="add-user-btn" md-raised-button color="primary" (click)="users.push(true)">ADD USER</button>
|
||||
<button id="remove-user-btn" md-raised-button color="primary" (click)="users.pop()" [disabled]="!users.length">REMOVE USER</button>
|
||||
</div>
|
||||
<app-openvidu-instance *ngFor="let user of users" [openviduURL]="openviduURL" [openviduSecret]="openviduSecret"></app-openvidu-instance>
|
||||
</div>
|
||||
</md-tab>
|
||||
|
||||
<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start space-around">
|
||||
|
||||
</div>
|
||||
|
||||
<md-tab id="api-rest" label="API REST">
|
||||
<div class="demo-tab-content">
|
||||
<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start space-around">
|
||||
<div fxLayout="column" fxFlex="45" fxFlexAlign="center" fxFill>
|
||||
<button md-raised-button color="primary" (click)="getSessionId()">Get sessionId</button>
|
||||
<button md-raised-button color="primary" (click)="getSessionId()">GET SESSIONID</button>
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="45" fxFlexAlign="center" fxFill>
|
||||
<button md-raised-button color="primary" (click)="getToken()" [disabled]="getTokenDisabled()">Get token</button>
|
||||
<button md-raised-button color="primary" (click)="getToken()" [disabled]="getTokenDisabled()">GET TOKEN</button>
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="10" fxFlexAlign="center" fxFill>
|
||||
<button md-raised-button color="warn" (click)="cleanAllSessions()" [disabled]="data.length == 0">Clean sessions</button>
|
||||
<button md-raised-button color="warn" (click)="cleanAllSessions()" [disabled]="data.length == 0">CLEAN</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, HostListener, OnInit } from '@angular/core';
|
||||
import { OpenviduRestService } from '../../services/openvidu-rest.service';
|
||||
import { DataSource } from '@angular/cdk/table';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import 'rxjs/add/observable/of';
|
||||
|
||||
import { OpenVidu, Session } from 'openvidu-browser';
|
||||
|
||||
import * as colormap from 'colormap';
|
||||
const numColors = 64;
|
||||
|
||||
|
|
@ -20,32 +18,22 @@ export class DashboardComponent implements OnInit {
|
|||
|
||||
openviduURL = 'https://localhost:8443';
|
||||
openviduSecret = 'MY_SECRET';
|
||||
|
||||
// OpenViduInstance collection
|
||||
users = [true];
|
||||
|
||||
// API REST params
|
||||
serverData = 'data_test';
|
||||
selectedRole = 'PUBLISHER';
|
||||
selectedRadioIndex = 0;
|
||||
|
||||
selectedRole = 'PUBLISHER';
|
||||
openViduRoles = ['SUBSCRIBER', 'PUBLISHER', 'MODERATOR'];
|
||||
|
||||
sendAudio = true;
|
||||
sendVideo = true;
|
||||
optionVideo = 'video';
|
||||
activeAudio = true;
|
||||
activeVideo = true;
|
||||
|
||||
// Join form
|
||||
clientData: string;
|
||||
sessionName: string;
|
||||
|
||||
// OpenVidu objects
|
||||
OV: OpenVidu;
|
||||
session: Session;
|
||||
|
||||
// API REST data collected
|
||||
data = [];
|
||||
|
||||
cg;
|
||||
|
||||
constructor(private openviduRestService: OpenviduRestService) {
|
||||
this.generateSessionInfo();
|
||||
const options = {
|
||||
colormap: [
|
||||
{ 'index': 0, 'rgb': [135, 196, 213] },
|
||||
|
|
@ -58,92 +46,10 @@ export class DashboardComponent implements OnInit {
|
|||
|
||||
ngOnInit() { }
|
||||
|
||||
|
||||
|
||||
|
||||
/* TEST SESSION TAB */
|
||||
|
||||
private generateSessionInfo() {
|
||||
this.sessionName = 'TestSession';
|
||||
this.clientData = 'TestClient';
|
||||
private addUser() {
|
||||
this.users.push(true);
|
||||
}
|
||||
|
||||
private removeHttps = input => input.replace(/^https?:\/\//, '');
|
||||
|
||||
private joinSession(): void {
|
||||
this.OV = new OpenVidu();
|
||||
|
||||
this.session = this.OV.initSession('wss://'
|
||||
+ this.removeHttps(this.openviduURL)
|
||||
+ '/'
|
||||
+ this.sessionName + '?secret='
|
||||
+ this.openviduSecret);
|
||||
|
||||
this.session.on('streamCreated', (event) => {
|
||||
const subscriber = this.session.subscribe(event.stream, 'video-container');
|
||||
subscriber.on('videoElementCreated', (e) => {
|
||||
this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection);
|
||||
});
|
||||
});
|
||||
|
||||
this.session.on('streamDestroyed', (event) => {
|
||||
this.removeUserData(event.stream.connection);
|
||||
});
|
||||
|
||||
this.session.connect(null, this.clientData, (error) => {
|
||||
|
||||
if (!error) {
|
||||
const publisher = this.OV.initPublisher('video-container', {
|
||||
audio: true,
|
||||
video: true,
|
||||
quality: 'MEDIUM'
|
||||
});
|
||||
|
||||
publisher.on('videoElementCreated', (event) => {
|
||||
this.appendUserData(event.element, this.clientData, null);
|
||||
event.element['muted'] = true;
|
||||
});
|
||||
|
||||
this.session.publish(publisher);
|
||||
|
||||
} else {
|
||||
console.log('There was an error connecting to the session:', error.code, error.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private leaveSession(): void {
|
||||
if (this.session) {
|
||||
this.session.disconnect();
|
||||
}
|
||||
this.session = null;
|
||||
this.OV = null;
|
||||
}
|
||||
|
||||
private appendUserData(videoElement, data, connection) {
|
||||
const dataNode = document.createElement('div');
|
||||
dataNode.className = 'data-node';
|
||||
dataNode.id = 'data-' + (connection ? connection.connectionId : data);
|
||||
dataNode.innerHTML = '<p>' + data + '</p>';
|
||||
videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling);
|
||||
}
|
||||
|
||||
private removeUserData(connection) {
|
||||
$('#data-' + connection.connectionId).remove();
|
||||
}
|
||||
|
||||
private removeAllUserData() {
|
||||
const nicknameElements = $('.data-node');
|
||||
while (nicknameElements[0]) {
|
||||
nicknameElements[0].remove();
|
||||
}
|
||||
}
|
||||
|
||||
/* TEST SESSION TAB */
|
||||
|
||||
|
||||
|
||||
|
||||
/* API REST TAB */
|
||||
|
||||
private getSessionId() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
md-card {
|
||||
background-color: rgba(77, 77, 77, 0.05);
|
||||
margin: 20px 0 5px 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.session-form md-form-field {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.join-card {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.join-card md-card-content {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.inner-card {
|
||||
border: 1px solid #e1e1e1;
|
||||
padding: 10px 15px 10px 15px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.inner-card h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#join-session-btn {
|
||||
margin: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
md-radio-button {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start stretch">
|
||||
|
||||
<div fxFlex="noshrink">
|
||||
<md-card class="join-card">
|
||||
|
||||
<md-card-content>
|
||||
<form class="session-form">
|
||||
|
||||
<md-form-field style="margin-right: 10px">
|
||||
<input mdInput placeholder="Session name" name="sessionName" [(ngModel)]="sessionName">
|
||||
</md-form-field>
|
||||
|
||||
<md-form-field>
|
||||
<input mdInput placeholder="Client data" name="clientData" [(ngModel)]="clientData">
|
||||
</md-form-field>
|
||||
|
||||
<div class="inner-card" fxLayout="row" fxLayoutWrap="wrap">
|
||||
|
||||
<div fxFlex="60">
|
||||
<div>
|
||||
<h4>Send...</h4>
|
||||
<div>
|
||||
<md-checkbox id="send-audio-check" [(ngModel)]="sendAudio" name="sendAudio" class="input-right">Audio</md-checkbox>
|
||||
<md-checkbox id="send-video-check" [(ngModel)]="sendVideo" name="sendVideo" (click)="toggleRadio()">Video</md-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-top: 5px;">
|
||||
<h4>Enter with<br>active...</h4>
|
||||
<div>
|
||||
<md-checkbox id="active-audio-check" [(ngModel)]="activeAudio" name="activeAudio" [checked]="sendAudio" [disabled]="!sendAudio"
|
||||
class="input-right">Audio</md-checkbox>
|
||||
<md-checkbox id="active-video-check" [(ngModel)]="activeVideo" name="activeVideo" [checked]="sendVideo" [disabled]="!sendVideo">Video</md-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div fxFlex="40">
|
||||
<md-radio-group [(ngModel)]="optionVideo" name="optionVideo" [disabled]="!sendVideo">
|
||||
<md-radio-button id="send-video-radio" value="video" [checked]="sendVideo || sendVideoRadio">Video</md-radio-button>
|
||||
<md-radio-button id="send-screen-radio" value="screen" [checked]="sendVideo && !sendVideoRadio" class="input-right">Screen</md-radio-button>
|
||||
</md-radio-group>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</md-card-content>
|
||||
|
||||
<md-card-actions>
|
||||
<button id="join-session-btn" md-button (click)="joinSession()" [disabled]="session">JOIN SESSION</button>
|
||||
</md-card-actions>
|
||||
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
<div *ngIf="session" fxFlex>
|
||||
<md-card>
|
||||
{{sessionName}}
|
||||
<button md-mini-fab color="warn" (click)="leaveSession()">
|
||||
<md-icon class="md-24" aria-label="Leave icon">clear</md-icon>
|
||||
</button>
|
||||
<div *ngIf="session.connection" fxLayout>
|
||||
<div [attr.id]="'local-vid-' + session.connection.connectionId" fxFlex="135px" class="video-container"></div>
|
||||
<div [attr.id]="'remote-vid-' + session.connection.connectionId" fxFlex="270px" class="video-container"></div>
|
||||
</div>
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { OpenviduInstanceComponent } from './openvidu-instance.component';
|
||||
|
||||
describe('OpenviduInstanceComponent', () => {
|
||||
let component: OpenviduInstanceComponent;
|
||||
let fixture: ComponentFixture<OpenviduInstanceComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ OpenviduInstanceComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(OpenviduInstanceComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
import { Component, Input, HostListener, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
|
||||
import { OpenVidu, Session, Subscriber, Stream } from 'openvidu-browser';
|
||||
|
||||
declare var $: any;
|
||||
|
||||
@Component({
|
||||
selector: 'app-openvidu-instance',
|
||||
templateUrl: './openvidu-instance.component.html',
|
||||
styleUrls: ['./openvidu-instance.component.css']
|
||||
})
|
||||
export class OpenviduInstanceComponent implements OnInit, OnDestroy {
|
||||
|
||||
@Input()
|
||||
openviduURL: string;
|
||||
|
||||
@Input()
|
||||
openviduSecret: string;
|
||||
|
||||
sendAudio = true;
|
||||
sendVideo = true;
|
||||
optionVideo = 'video';
|
||||
activeAudio = true;
|
||||
activeVideo = true;
|
||||
sendVideoRadio = true;
|
||||
|
||||
// Join form
|
||||
clientData: string;
|
||||
sessionName: string;
|
||||
|
||||
// OpenVidu objects
|
||||
OV: OpenVidu;
|
||||
session: Session;
|
||||
|
||||
constructor(private changeDetector: ChangeDetectorRef) {
|
||||
this.generateSessionInfo();
|
||||
}
|
||||
|
||||
ngOnInit() { }
|
||||
|
||||
ngOnDestroy() {
|
||||
this.leaveSession();
|
||||
}
|
||||
|
||||
@HostListener('window:beforeunload')
|
||||
beforeunloadHandler() {
|
||||
this.leaveSession();
|
||||
}
|
||||
|
||||
private generateSessionInfo(): void {
|
||||
this.sessionName = 'TestSession';
|
||||
this.clientData = 'TestClient';
|
||||
}
|
||||
|
||||
private removeHttps = input => input.replace(/^https?:\/\//, '');
|
||||
|
||||
private joinSession(): void {
|
||||
|
||||
if (this.session) {
|
||||
this.leaveSession();
|
||||
}
|
||||
|
||||
const OV: OpenVidu = new OpenVidu();
|
||||
|
||||
this.session = OV.initSession('wss://'
|
||||
+ this.removeHttps(this.openviduURL)
|
||||
+ '/'
|
||||
+ this.sessionName + '?secret='
|
||||
+ this.openviduSecret);
|
||||
|
||||
this.session.on('streamCreated', (event) => {
|
||||
|
||||
this.changeDetector.detectChanges();
|
||||
|
||||
const subscriber: Subscriber = this.session.subscribe(event.stream, 'remote-vid-' + this.session.connection.connectionId);
|
||||
subscriber.on('videoElementCreated', (e) => {
|
||||
this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection);
|
||||
});
|
||||
subscriber.on('videoPlaying', (e) => {
|
||||
});
|
||||
});
|
||||
|
||||
this.session.on('streamDestroyed', (event) => {
|
||||
this.removeUserData(event.stream.connection);
|
||||
});
|
||||
|
||||
this.session.on('connectionCreated', (event) => { });
|
||||
this.session.on('connetionDestroyed', (event) => { });
|
||||
this.session.on('sessionDisconnected', (event) => { });
|
||||
|
||||
this.session.connect(null, this.clientData, (error) => {
|
||||
if (!error) {
|
||||
|
||||
const publisher = OV.initPublisher('local-vid-' + this.session.connection.connectionId, {
|
||||
audio: true,
|
||||
video: true,
|
||||
quality: 'MEDIUM'
|
||||
});
|
||||
|
||||
publisher.on('videoElementCreated', (event) => {
|
||||
this.appendUserData(event.element, this.clientData, null);
|
||||
});
|
||||
|
||||
publisher.on('videoPlaying', (e) => {
|
||||
});
|
||||
|
||||
this.session.publish(publisher);
|
||||
|
||||
} else {
|
||||
console.log('There was an error connecting to the session:', error.code, error.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
private leaveSession(): void {
|
||||
if (this.session) {
|
||||
this.session.disconnect();
|
||||
}
|
||||
this.session = null;
|
||||
this.OV = null;
|
||||
this.removeAllUserData();
|
||||
}
|
||||
|
||||
private appendUserData(videoElement, data, connection): void {
|
||||
/*const dataNode = document.createElement('div');
|
||||
dataNode.className = 'data-node';
|
||||
dataNode.id = 'data-' + (connection ? connection.connectionId : data);
|
||||
dataNode.innerHTML = '<p>' + data + '</p>';
|
||||
videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling);*/
|
||||
}
|
||||
|
||||
private removeUserData(connection): void {
|
||||
/*$('#data-' + connection.connectionId).remove();*/
|
||||
}
|
||||
|
||||
private removeAllUserData() {
|
||||
/*const nicknameElements = $('.data-node');
|
||||
while (nicknameElements[0]) {
|
||||
nicknameElements[0].remove();
|
||||
}*/
|
||||
}
|
||||
|
||||
private toggleRadio(): void {
|
||||
this.sendVideoRadio = !this.sendVideo;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -22,5 +22,14 @@ ul {
|
|||
}
|
||||
|
||||
video {
|
||||
max-width: 300px;
|
||||
max-width: 125px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.session-form label {
|
||||
font-size: 12px;
|
||||
}
|
||||
Loading…
Reference in New Issue