No OneTemporary
Actions

Size

36 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/resources/vue/Meet/Room.vue b/src/resources/vue/Meet/Room.vue
	index 2a59ba87..c749cf18 100644
	--- a/src/resources/vue/Meet/Room.vue
	+++ b/src/resources/vue/Meet/Room.vue
	@@ -1,759 +1,759 @@
	<template>
	<div id="meet-component">
	<div id="meet-session-toolbar" class="hidden">
	<span id="meet-counter" :title="$t('meet.partcnt')"><svg-icon icon="users"></svg-icon> <span></span></span>
	<span id="meet-session-logo" v-html="$root.logo()"></span>
	<div id="meet-session-menu">
	<button :class="'btn link-audio' + (audioActive ? '' : ' on')" @click="switchSound" :disabled="!isPublisher()" :title="$t('meet.menu-audio-' + (audioActive ? 'mute' : 'unmute'))">
	<svg-icon :icon="audioActive ? 'microphone' : 'microphone-slash'"></svg-icon>
	</button>
	<button :class="'btn link-video' + (videoActive ? '' : ' on')" @click="switchVideo" :disabled="!isPublisher()" :title="$t('meet.menu-video-' + (videoActive ? 'mute' : 'unmute'))">
	<svg-icon :icon="videoActive ? 'video' : 'video-slash'"></svg-icon>
	</button>
	<button :class="'btn link-screen' + (screenShareActive ? ' on' : '')" @click="switchScreen" :disabled="!canShareScreen \|\| !isPublisher()" :title="$t('meet.menu-screen')">
	<svg-icon icon="desktop"></svg-icon>
	</button>
	<button :class="'btn link-hand' + (handRaised ? ' on' : '')" v-if="!isPublisher()" @click="switchHand" :title="$t('meet.menu-hand-' + (handRaised ? 'lower' : 'raise'))">
	<svg-icon icon="hand-paper"></svg-icon>
	</button>
	<span id="channel-select" :style="'display:' + (channels.length ? '' : 'none')" class="dropdown">
	<button :class="'btn link-channel' + (session.channel ? ' on' : '')" data-toggle="dropdown"
	:title="$t('meet.menu-channel')" aria-haspopup="true" aria-expanded="false"
	>
	<svg-icon icon="headphones"></svg-icon>
	<span class="badge badge-danger" v-if="session.channel">{{ session.channel.toUpperCase() }}</span>
	</button>
	<div class="dropdown-menu">
	<a :class="'dropdown-item' + (!session.channel ? ' active' : '')" href="#" data-code="" @click="switchChannel">- {{ $t('form.none') }} -</a>
	<a v-for="code in channels" :key="code" href="#" @click="switchChannel" :data-code="code"
	:class="'dropdown-item' + (session.channel == code ? ' active' : '')"
	>{{ $t('lang.' + code) }}</a>
	</div>
	</span>
	<button :class="'btn link-chat' + (chatActive ? ' on' : '')" @click="switchChat" :title="$t('meet.menu-chat')">
	<svg-icon icon="comment"></svg-icon>
	</button>
	<button class="btn link-fullscreen closed hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen')">
	<svg-icon icon="expand"></svg-icon>
	</button>
	<button class="btn link-fullscreen open hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen-exit')">
	<svg-icon icon="compress"></svg-icon>
	</button>
	<button class="btn link-options" v-if="isRoomOwner()" @click="roomOptions" :title="$t('meet.options')">
	<svg-icon icon="cog"></svg-icon>
	</button>
	<button class="btn link-logout" @click="logout" :title="$t('meet.menu-leave')">
	<svg-icon icon="power-off"></svg-icon>
	</button>
	</div>
	</div>

	<div id="meet-setup" class="card container mt-2 mt-md-5 mb-5">
	<div class="card-body">
	<div class="card-title">{{ $t('meet.setup-title') }}</div>
	<div class="card-text">
	<form class="media-setup-form row" @submit.prevent="joinSession">
	<div class="media-setup-preview col-sm-6 mb-3 mb-sm-0">
	<video class="rounded"></video>
	<div class="volume"><div class="bar"></div></div>
	</div>
	<div class="col-sm-6 align-self-center">
	<div class="input-group">
	<label for="setup-microphone" class="input-group-prepend mb-0">
	<span class="input-group-text" :title="$t('meet.mic')"><svg-icon icon="microphone"></svg-icon></span>
	</label>
	<select class="custom-select" id="setup-microphone" v-model="microphone" @change="setupMicrophoneChange">
	<option value="">{{ $t('form.none') }}</option>
	<option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
	</select>
	</div>
	<div class="input-group mt-2">
	<label for="setup-camera" class="input-group-prepend mb-0">
	<span class="input-group-text" :title="$t('meet.cam')"><svg-icon icon="video"></svg-icon></span>
	</label>
	<select class="custom-select" id="setup-camera" v-model="camera" @change="setupCameraChange">
	<option value="">{{ $t('form.none') }}</option>
	<option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
	</select>
	</div>
	<div class="input-group mt-2">
	<label for="setup-nickname" class="input-group-prepend mb-0">
	<span class="input-group-text" :title="$t('meet.nick')"><svg-icon icon="user"></svg-icon></span>
	</label>
	<input class="form-control" type="text" id="setup-nickname" v-model="nickname" :placeholder="$t('meet.nick-placeholder')">
	</div>
	<div class="input-group mt-2" v-if="session.config && session.config.requires_password">
	<label for="setup-password" class="input-group-prepend mb-0">
	<span class="input-group-text" :title="$t('form.password')"><svg-icon icon="key"></svg-icon></span>
	</label>
	<input type="password" class="form-control" id="setup-password" v-model="password" :placeholder="$t('form.password')">
	</div>
	<div class="mt-3">
	<button type="submit" id="join-button"
	:class="'btn w-100 btn-' + (isRoomReady() ? 'success' : 'primary')"
	>
	<span v-if="isRoomReady()">{{ $t('meet.joinnow') }}</span>
	<span v-else-if="roomState == 323">{{ $t('meet.imaowner') }}</span>
	<span v-else>{{ $t('meet.join') }}</span>
	</button>
	</div>
	</div>
	<div class="mt-4 col-sm-12">
	<status-message :status="roomState" :status-labels="roomStateLabels"></status-message>
	</div>
	</form>
	</div>
	</div>
	</div>

	<div id="meet-session-layout" class="d-flex hidden">
	<div id="meet-queue">
	<div class="head" :title="$t('meet.qa')"><svg-icon icon="microphone-alt"></svg-icon></div>
	</div>
	<div id="meet-session"></div>
	<div id="meet-chat">
	<div class="chat"></div>
	<div class="chat-input m-2">
	<textarea class="form-control" rows="1"></textarea>
	</div>
	</div>
	</div>

	<logon-form id="meet-auth" class="hidden" :dashboard="false" @success="authSuccess"></logon-form>

	<div id="leave-dialog" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t('meet.leave-title') }}</h5>
	<button type="button" class="close" data-dismiss="modal" :aria-label="$t('btn.close')">
	<span aria-hidden="true">×</span>
	</button>
	</div>
	<div class="modal-body">
	<p>{{ $t('meet.leave-body') }}</p>
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-danger modal-action" data-dismiss="modal">{{ $t('btn.close') }}</button>
	</div>
	</div>
	</div>
	</div>

	<div id="media-setup-dialog" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t('meet.media-title') }}</h5>
	<button type="button" class="close" data-dismiss="modal" :aria-label="$t('btn.close')">
	<span aria-hidden="true">×</span>
	</button>
	</div>
	<div class="modal-body">
	<form class="media-setup-form">
	<div class="media-setup-preview"></div>
	<div class="input-group mt-2">
	<label for="setup-mic" class="input-group-prepend mb-0">
	<span class="input-group-text" :title="$t('meet.mic')"><svg-icon icon="microphone"></svg-icon></span>
	</label>
	<select class="custom-select" id="setup-mic" v-model="microphone" @change="setupMicrophoneChange">
	<option value="">{{ $t('form.none') }}</option>
	<option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
	</select>
	</div>
	<div class="input-group mt-2">
	<label for="setup-cam" class="input-group-prepend mb-0">
	<span class="input-group-text" :title="$t('meet.cam')"><svg-icon icon="video"></svg-icon></span>
	</label>
	<select class="custom-select" id="setup-cam" v-model="camera" @change="setupCameraChange">
	<option value="">{{ $t('form.none') }}</option>
	<option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
	</select>
	</div>
	</form>
	</div>
	<div class="modal-footer">
	<button type="button" class="btn btn-secondary modal-action" data-dismiss="modal">{{ $t('btn.close') }}</button>
	</div>
	</div>
	</div>
	</div>

	<room-options v-if="session.config" :config="session.config" :room="room" @config-update="configUpdate"></room-options>
	</div>
	</template>

	<script>
	import { Meet, Roles } from '../../js/meet/app.js'
	import StatusMessage from '../Widgets/StatusMessage'
	import LogonForm from '../Login'
	import RoomOptions from './RoomOptions'

	// Register additional icons
	import { library } from '@fortawesome/fontawesome-svg-core'

	import {
	faComment,
	faCog,
	faCompress,
	faCrown,
	faDesktop,
	faExpand,
	faHandPaper,
	faHeadphones,
	faMicrophone,
	faMicrophoneSlash,
	faMicrophoneAlt,
	faPowerOff,
	faUser,
	faUsers,
	faVideo,
	faVideoSlash,
	faVolumeMute
	} from '@fortawesome/free-solid-svg-icons'

	// Register only these icons we need
	library.add(
	faComment,
	faCog,
	faCompress,
	faCrown,
	faDesktop,
	faExpand,
	faHandPaper,
	faHeadphones,
	faMicrophone,
	faMicrophoneSlash,
	faMicrophoneAlt,
	faPowerOff,
	faUser,
	faUsers,
	faVideo,
	faVideoSlash,
	faVolumeMute
	)

	let roomRequest
	const authHeader = 'X-Meet-Auth-Token'

	export default {
	components: {
	LogonForm,
	RoomOptions,
	StatusMessage
	},
	data() {
	return {
	setup: {
	cameras: [],
	microphones: [],
	},
	canShareScreen: false,
	camera: '',
	channels: [],
	languages: {
	en: 'lang.en',
	de: 'lang.de',
	fr: 'lang.fr',
	it: 'lang.it'
	},
	meet: null,
	microphone: '',
	nickname: '',
	password: '',
	room: null,
	roomState: 'init',
	roomStateLabels: {
	- 'init': 'meet.status-init',
	+ init: 'meet.status-init',
	323: 'meet.status-323',
	324: 'meet.status-324',
	325: 'meet.status-325',
	326: 'meet.status-326',
	327: 'meet.status-327',
	404: 'meet.status-404',
	429: 'meet.status-429',
	500: 'meet.status-500'
	},
	session: {},
	audioActive: false,
	videoActive: false,
	chatActive: false,
	handRaised: false,
	screenShareActive: false
	}
	},
	mounted() {
	this.room = this.$route.params.room

	// Initialize OpenVidu and do some basic checks
	this.meet = new Meet($('#meet-session')[0]);
	this.canShareScreen = this.meet.isScreenSharingSupported()

	// Check the room and init the session
	this.initSession()

	// Setup the room UI
	this.setupSession()
	},
	beforeDestroy() {
	clearTimeout(roomRequest)

	$('#app').removeClass('meet')

	if (this.meet) {
	this.meet.leaveRoom()
	}

	delete axios.defaults.headers.common[authHeader]

	$(document.body).off('keydown.meet')
	},
	methods: {
	authSuccess() {
	// The user authentication succeeded, we still don't know it's really the room owner
	this.initSession()

	$('#meet-setup').removeClass('hidden')
	$('#meet-auth').addClass('hidden')
	},
	configUpdate(config) {
	this.session.config = Object.assign({}, this.session.config, config)
	},
	dismissParticipant(id) {
	axios.post('/api/v4/openvidu/rooms/' + this.room + '/connections/' + id + '/dismiss')
	},
	initSession(init) {
	const button = $('#join-button').prop('disabled', true)

	this.post = {
	password: this.password,
	nickname: this.nickname,
	screenShare: this.canShareScreen ? 1 : 0,
	init: init ? 1 : 0,
	picture: init ? this.makePicture() : '',
	requestId: this.requestId(),
	canPublish: !!this.camera \|\| !!this.microphone
	}

	$('#setup-password,#setup-nickname').removeClass('is-invalid')

	axios.post('/api/v4/openvidu/rooms/' + this.room, this.post, { ignoreErrors: true })
	.then(response => {
	button.prop('disabled', false)

	// We already have token, the response is redundant
	if (this.roomState == 'ready' && this.session.token) {
	return
	}

	this.roomState = 'ready'
	this.session = response.data

	if (init) {
	this.joinSession()
	}

	if (this.session.authToken) {
	axios.defaults.headers.common[authHeader] = this.session.authToken
	}
	})
	.catch(error => {
	if (!error.response) {
	console.error(error)
	return
	}

	const data = error.response.data \|\| {}

	if (data.code) {
	this.roomState = data.code
	} else {
	this.roomState = error.response.status
	}

	button.prop('disabled', this.roomState == 'init' \|\| this.roomState == 327 \|\| this.roomState >= 400)

	if (data.config) {
	this.session.config = data.config
	}

	switch (this.roomState) {
	case 323:
	// Waiting for the owner to open the room...
	// Update room state every 10 seconds
	roomRequest = setTimeout(() => { this.initSession() }, 10000)
	break;

	case 324:
	// Room is ready for the owner, but the 'init' was not requested yet
	clearTimeout(roomRequest)
	break;

	case 325:
	// Missing/invalid password
	if (init) {
	$('#setup-password').addClass('is-invalid').focus()
	}
	break;

	case 326:
	// Locked room prerequisites error
	if (init && !$('#setup-nickname').val()) {
	$('#setup-nickname').addClass('is-invalid').focus()
	}
	break;

	case 327:
	// Waiting for the owner's approval to join
	// Update room state every 10 seconds
	roomRequest = setTimeout(() => { this.initSession(true) }, 10000)
	break;

	case 429:
	// Rate limited, wait and try again
	const waitTime = error.response.headers['retry-after'] \|\| 10
	roomRequest = setTimeout(() => { this.initSession(init) }, waitTime * 1000)
	break;

	default:
	if (this.roomState >= 400 && this.roomState != 404) {
	this.roomState = 500
	}
	}
	})

	if (document.fullscreenEnabled) {
	$('#meet-session-menu').find('.link-fullscreen.closed').removeClass('hidden')
	}
	},
	isModerator() {
	return this.isRoomOwner() \|\| (!!this.session.role && (this.session.role & Roles.MODERATOR) > 0)
	},
	isPublisher() {
	return !!this.session.role && (this.session.role & Roles.PUBLISHER) > 0
	},
	isRoomOwner() {
	return !!this.session.role && (this.session.role & Roles.OWNER) > 0
	},
	isRoomReady() {
	return ['ready', 322, 324, 325, 326, 327].includes(this.roomState)
	},
	// An event received by the room owner when a participant is asking for a permission to join the room
	joinRequest(data) {
	// The toast for this user request already exists, ignore
	// It's not really needed as we do this on server-side already
	if ($('#i' + data.requestId).length) {
	return
	}

	// FIXME: Should the message close button act as the Deny button? Do we need the Deny button?

	let body = $(
	`<div>`
	+ `<div class="picture"><img src="${data.picture}"></div>`
	+ `<div class="content">`
	+ `<p class="mb-2"></p>`
	+ `<div class="text-right">`
	+ `<button type="button" class="btn btn-sm btn-success accept">${this.$t('btn.accept')}</button>`
	+ `<button type="button" class="btn btn-sm btn-danger deny ml-2">${this.$t('btn.deny')}</button>`
	)

	this.$toast.message({
	className: 'join-request',
	icon: 'user',
	timeout: 0,
	title: this.$t('meet.join-request'),
	// titleClassName: '',
	body: body.html(),
	onShow: element => {
	const id = data.requestId

	$(element).find('p').text(this.$t('meet.join-requested', { user: data.nickname \|\| '' }))

	// add id attribute, so we can identify it
	$(element).attr('id', 'i' + id)
	// add action to the buttons
	.find('button.accept,button.deny').on('click', e => {
	const action = $(e.target).is('.accept') ? 'accept' : 'deny'
	axios.post('/api/v4/openvidu/rooms/' + this.room + '/request/' + id + '/' + action)
	.then(response => {
	$('#i' + id).remove()
	})
	})
	}
	})
	},
	// Entering the room
	joinSession() {
	// The form can be submitted not only via the submit button,
	// make sure the submit is allowed
	if ($('#meet-setup [type=submit]').prop('disabled')) {
	return;
	}

	if (this.roomState == 323) {
	$('#meet-setup').addClass('hidden')
	$('#meet-auth').removeClass('hidden')
	return
	}

	if (this.roomState != 'ready' && !this.session.token) {
	this.initSession(true)
	return
	}

	clearTimeout(roomRequest)

	this.session.nickname = this.nickname
	this.session.languages = this.languages
	this.session.menuElement = $('#meet-session-menu')[0]
	this.session.chatElement = $('#meet-chat')[0]
	this.session.queueElement = $('#meet-queue')[0]
	this.session.counterElement = $('#meet-counter span')[0]
	this.session.translate = (label, args) => this.$t(label, args)
	this.session.onSuccess = () => {
	$('#app').addClass('meet')
	$('#meet-setup').addClass('hidden')
	$('#meet-session-toolbar,#meet-session-layout').removeClass('hidden')
	}
	this.session.onError = () => {
	this.roomState = 500
	}
	this.session.onDestroy = event => {
	// TODO: Display different message for each reason: forceDisconnectByUser,
	// forceDisconnectByServer, sessionClosedByServer?
	if (event.reason != 'disconnect' && event.reason != 'networkDisconnect' && !this.isRoomOwner()) {
	$('#leave-dialog').on('hide.bs.modal', () => {
	// FIXME: Where exactly the user should land? Currently he'll land
	// on dashboard (if he's logged in) or login form (if he's not).

	this.$router.push({ name: 'dashboard' })
	}).modal()
	}
	}
	this.session.onDismiss = connId => { this.dismissParticipant(connId) }
	this.session.onSessionDataUpdate = data => { this.updateSession(data) }
	this.session.onConnectionChange = (connId, data) => { this.updateParticipant(connId, data) }
	this.session.onJoinRequest = data => { this.joinRequest(data) }
	this.session.onMediaSetup = () => { this.setupMedia() }

	this.meet.joinRoom(this.session)

	this.keyboardShortcuts()
	},
	keyboardShortcuts() {
	$(document.body).on('keydown.meet', e => {
	if ($(e.target).is('select,input,textarea')) {
	return
	}

	// Self-Mute with 'm' key
	if (e.key == 'm' \|\| e.key == 'M') {
	if ($('#meet-session-menu').find('.link-audio:not(:disabled)').length) {
	this.switchSound()
	}
	}
	})
	},
	logout() {
	const logout = () => {
	this.meet.leaveRoom()
	this.meet = null
	this.$router.push({ name: 'dashboard' })
	}

	if (this.isRoomOwner()) {
	axios.post('/api/v4/openvidu/rooms/' + this.room + '/close').then(logout)
	} else {
	logout()
	}
	},
	makePicture() {
	const video = $("#meet-setup video")[0];

	// Skip if video is not "playing"
	if (!video.videoWidth \|\| !this.camera) {
	return ''
	}

	// we're going to crop a square from the video and resize it
	const maxSize = 64

	// Calculate sizing
	let sh = Math.floor(video.videoHeight / 1.5)
	let sw = sh
	let sx = (video.videoWidth - sw) / 2
	let sy = (video.videoHeight - sh) / 2

	let dh = Math.min(sh, maxSize)
	let dw = sh < maxSize ? sw : Math.floor(sw * dh/sh)

	const canvas = $("<canvas>")[0];
	canvas.width = dw;
	canvas.height = dh;

	// draw the image on the canvas (square cropped and resized)
	canvas.getContext('2d').drawImage(video, sx, sy, sw, sh, 0, 0, dw, dh);

	// convert it to a usable data URL (png format)
	return canvas.toDataURL();
	},
	requestId() {
	const key = 'kolab-meet-uid'

	if (!this.reqId) {
	this.reqId = localStorage.getItem(key)
	}

	if (!this.reqId) {
	// We store the identifier in the browser to make sure that it is the same after
	// page refresh for the avg user. This will not prevent hackers from sending
	// the new identifier on every request.
	// If we're afraid of a room owner being spammed with join requests we might invent
	// a way to silently ignore all join requests after the owner pressed some button
	// stating "all attendees already joined, lock the room for good!".

	// This will create max. 24-char numeric string
	this.reqId = (String(Date.now()) + String(Math.random()).substring(2)).substring(0, 24)
	localStorage.setItem(key, this.reqId)
	}

	return this.reqId
	},
	roomOptions() {
	$('#room-options-dialog').modal()
	},
	setupMedia() {
	let dialog = $('#media-setup-dialog')

	if (!dialog.find('video').length) {
	$('#meet-setup').find('video,div.volume').appendTo(dialog.find('.media-setup-preview'))
	}

	dialog.on('show.bs.modal', () => { this.meet.setupStart() })
	.on('hide.bs.modal', () => { this.meet.setupStop() })
	.modal()
	},
	setupSession() {
	this.meet.setupStart({
	videoElement: $('#meet-setup video')[0],
	volumeElement: $('#meet-setup .volume')[0],
	onSuccess: setup => {
	this.setup = setup
	this.microphone = setup.audioSource
	this.camera = setup.videoSource

	this.audioActive = setup.audioActive
	this.videoActive = setup.videoActive
	},
	onError: error => {
	this.audioActive = false
	this.videoActive = false
	}
	})
	},
	setupCameraChange() {
	this.meet.setupSetVideoDevice(this.camera).then(enabled => {
	this.videoActive = enabled
	})
	},
	setupMicrophoneChange() {
	this.meet.setupSetAudioDevice(this.microphone).then(enabled => {
	this.audioActive = enabled
	})
	},
	switchChannel(e) {
	let channel = $(e.target).data('code')

	this.$set(this.session, 'channel', channel)
	this.meet.switchChannel(channel)
	},
	switchChat() {
	let chat = $('#meet-chat')
	let enabled = chat.is('.open')

	chat.toggleClass('open')

	if (!enabled) {
	chat.find('textarea').focus()
	}

	this.chatActive = !enabled

	// Trigger resize, so participant matrix can update its layout
	window.dispatchEvent(new Event('resize'));
	},
	switchFullscreen() {
	const element = this.$el

	$(element).off('fullscreenchange').on('fullscreenchange', (e) => {
	let enabled = document.fullscreenElement == element
	let buttons = $('#meet-session-menu').find('.link-fullscreen')

	buttons.first()[enabled ? 'addClass' : 'removeClass']('hidden')
	buttons.last()[!enabled ? 'addClass' : 'removeClass']('hidden')
	})

	if (document.fullscreenElement) {
	document.exitFullscreen()
	} else {
	element.requestFullscreen()
	}
	},
	switchHand() {
	this.updateSelf({ hand: !this.handRaised })
	},
	switchSound() {
	this.audioActive = this.meet.switchAudio()
	},
	switchVideo() {
	this.videoActive = this.meet.switchVideo()
	},
	switchScreen() {
	const switchScreenAction = () => {
	this.meet.switchScreen((enabled, error) => {
	this.screenShareActive = enabled
	if (!enabled && !error) {
	// Closing a screen sharing connection invalidates the token
	delete this.session.shareToken
	}
	})
	}

	if (this.session.shareToken \|\| this.screenShareActive) {
	switchScreenAction()
	} else {
	axios.post('/api/v4/openvidu/rooms/' + this.room + '/connections')
	.then(response => {
	this.session.shareToken = response.data.token
	this.meet.updateSession(this.session)
	switchScreenAction()
	})
	}
	},
	updateParticipant(connId, params) {
	if (this.isModerator()) {
	axios.put('/api/v4/openvidu/rooms/' + this.room + '/connections/' + connId, params)
	}
	},
	updateSelf(params, onSuccess) {
	axios.put('/api/v4/openvidu/rooms/' + this.room + '/connections/' + this.session.connectionId, params)
	.then(response => {
	if (onSuccess) {
	onSuccess(response)
	}
	})
	},
	updateSession(data) {
	this.session = data
	this.channels = data.channels \|\| []

	const isPublisher = this.isPublisher()

	this.videoActive = isPublisher ? data.videoActive : false
	this.audioActive = isPublisher ? data.audioActive : false
	this.handRaised = data.hand
	}
	}
	}
	</script>
	diff --git a/src/resources/vue/Widgets/StatusMessage.vue b/src/resources/vue/Widgets/StatusMessage.vue
	index 293ad5ab..5570e246 100644
	--- a/src/resources/vue/Widgets/StatusMessage.vue
	+++ b/src/resources/vue/Widgets/StatusMessage.vue
	@@ -1,49 +1,49 @@
	<template>
	<div v-if="statusLabel()" :class="statusClass()">
	<div v-if="status == 'init'" class="app-loader small">
	<div class="spinner-border" role="status"></div>
	</div>
	- <span v-if="status == 'init'">{{ statusLabel() }}</span>
	+ <span v-if="status == 'init'">{{ $t(statusLabel()) }}</span>

	<svg-icon v-if="status != 'init' && statusLabel()" :icon="Number(status) >= 400 ? 'exclamation-circle' : 'info-circle'"></svg-icon>
	<span v-if="status != 'init' && statusLabel()">{{ $t(statusLabel()) }}</span>
	</div>
	</template>

	<script>
	const defaultLabels = {
	init: 'msg.loading',
	404: 'msg.notfound'
	}

	export default {
	props: {
	status: { type: [String, Number], default: 'init' },
	statusLabels: { type: Object, default: defaultLabels }
	},
	methods: {
	statusClass() {
	let className = 'status-message'

	if (this.status === 'init') {
	className += ' loading'
	} else if (Number(this.status) >= 400) {
	className += ' text-danger'
	}

	return className
	},
	statusLabel() {
	if (this.status in this.statusLabels) {
	return this.statusLabels[this.status]
	}

	if (this.status in defaultLabels) {
	return defaultLabels[this.status]
	}

	return ''
	}
	}
	}
	</script>

File Metadata

Mime Type: text/x-diff
Expires: Sat, Jan 31, 9:41 AM (20 h, 29 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 426217
Default Alt Text: (36 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions