Page MenuHomePhorge
Differential D2518 Diff 7216 src/resources/vue/Meet/Room.vue

Changeset View

Standalone View

View Options

src/resources/vue/Meet/Room.vue

<template> <template>
<div id="meet-component"> <div id="meet-component">
<div id="meet-session-toolbar" class="hidden"> <div id="meet-session-toolbar" class="hidden">
<span id="meet-counter" title="Number of participants"><svg-icon icon="users"></svg-icon> <span></span></span> <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> <span id="meet-session-logo" v-html="$root.logo()"></span>
<div id="meet-session-menu"> <div id="meet-session-menu">
<button :class="'btn link-audio' + (audioActive ? '' : ' on')" @click="switchSound" :disabled="!isPublisher()" :title="audioActive ? 'Mute audio' : 'Unmute audio'"> <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> <svg-icon :icon="audioActive ? 'microphone' : 'microphone-slash'"></svg-icon>
</button> </button>
<button :class="'btn link-video' + (videoActive ? '' : ' on')" @click="switchVideo" :disabled="!isPublisher()" :title="videoActive ? 'Mute video' : 'Unmute video'"> <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> <svg-icon :icon="videoActive ? 'video' : 'video-slash'"></svg-icon>
</button> </button>
<button :class="'btn link-screen' + (screenShareActive ? ' on' : '')" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" title="Share screen"> <button :class="'btn link-screen' + (screenShareActive ? ' on' : '')" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" :title="$t('meet.menu-screen')">
<svg-icon icon="desktop"></svg-icon> <svg-icon icon="desktop"></svg-icon>
</button> </button>
<button :class="'btn link-hand' + (handRaised ? ' on' : '')" v-if="!isPublisher()" @click="switchHand" :title="handRaised ? 'Lower hand' : 'Raise hand'"> <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> <svg-icon icon="hand-paper"></svg-icon>
</button> </button>
<span id="channel-select" :style="'display:' + (channels.length ? '' : 'none')" class="dropdown"> <span id="channel-select" :style="'display:' + (channels.length ? '' : 'none')" class="dropdown">
<button :class="'btn link-channel' + (session.channel ? ' on' : '')" data-toggle="dropdown" <button :class="'btn link-channel' + (session.channel ? ' on' : '')" data-toggle="dropdown"
title="Interpreted language channel" aria-haspopup="true" aria-expanded="false" :title="$t('meet.menu-channel')" aria-haspopup="true" aria-expanded="false"
> >
<svg-icon icon="headphones"></svg-icon> <svg-icon icon="headphones"></svg-icon>
<span class="badge badge-danger" v-if="session.channel">{{ session.channel.toUpperCase() }}</span> <span class="badge badge-danger" v-if="session.channel">{{ session.channel.toUpperCase() }}</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a :class="'dropdown-item' + (!session.channel ? ' active' : '')" href="#" data-code="" @click="switchChannel">- none -</a> <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" <a v-for="code in channels" :key="code" href="#" @click="switchChannel" :data-code="code"
:class="'dropdown-item' + (session.channel == code ? ' active' : '')" :class="'dropdown-item' + (session.channel == code ? ' active' : '')"
>{{ languages[code] }}</a> >{{ $t('lang.' + code) }}</a>
</div> </div>
</span> </span>
<button :class="'btn link-chat' + (chatActive ? ' on' : '')" @click="switchChat" title="Chat"> <button :class="'btn link-chat' + (chatActive ? ' on' : '')" @click="switchChat" :title="$t('meet.menu-chat')">
<svg-icon icon="comment"></svg-icon> <svg-icon icon="comment"></svg-icon>
</button> </button>
<button class="btn link-fullscreen closed hidden" @click="switchFullscreen" title="Full screen"> <button class="btn link-fullscreen closed hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen')">
<svg-icon icon="expand"></svg-icon> <svg-icon icon="expand"></svg-icon>
</button> </button>
<button class="btn link-fullscreen open hidden" @click="switchFullscreen" title="Exit full screen"> <button class="btn link-fullscreen open hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen-exit')">
<svg-icon icon="compress"></svg-icon> <svg-icon icon="compress"></svg-icon>
</button> </button>
<button class="btn link-options" v-if="isRoomOwner()" @click="roomOptions" title="Room options"> <button class="btn link-options" v-if="isRoomOwner()" @click="roomOptions" :title="$t('meet.options')">
<svg-icon icon="cog"></svg-icon> <svg-icon icon="cog"></svg-icon>
</button> </button>
<button class="btn link-logout" @click="logout" title="Leave session"> <button class="btn link-logout" @click="logout" :title="$t('meet.menu-leave')">
<svg-icon icon="power-off"></svg-icon> <svg-icon icon="power-off"></svg-icon>
</button> </button>
</div> </div>
</div> </div>
<div id="meet-setup" class="card container mt-2 mt-md-5 mb-5"> <div id="meet-setup" class="card container mt-2 mt-md-5 mb-5">
<div class="card-body"> <div class="card-body">
<div class="card-title">Set up your session</div> <div class="card-title">{{ $t('meet.setup-title') }}</div>
<div class="card-text"> <div class="card-text">
<form class="media-setup-form row" @submit.prevent="joinSession"> <form class="media-setup-form row" @submit.prevent="joinSession">
<div class="media-setup-preview col-sm-6 mb-3 mb-sm-0"> <div class="media-setup-preview col-sm-6 mb-3 mb-sm-0">
<video class="rounded"></video> <video class="rounded"></video>
<div class="volume"><div class="bar"></div></div> <div class="volume"><div class="bar"></div></div>
</div> </div>
<div class="col-sm-6 align-self-center"> <div class="col-sm-6 align-self-center">
<div class="input-group"> <div class="input-group">
<label for="setup-microphone" class="input-group-prepend mb-0"> <label for="setup-microphone" class="input-group-prepend mb-0">
<span class="input-group-text" title="Microphone"><svg-icon icon="microphone"></svg-icon></span> <span class="input-group-text" :title="$t('meet.mic')"><svg-icon icon="microphone"></svg-icon></span>
</label> </label>
<select class="custom-select" id="setup-microphone" v-model="microphone" @change="setupMicrophoneChange"> <select class="custom-select" id="setup-microphone" v-model="microphone" @change="setupMicrophoneChange">
<option value="">None</option> <option value="">{{ $t('form.none') }}</option>
<option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option> <option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
</select> </select>
</div> </div>
<div class="input-group mt-2"> <div class="input-group mt-2">
<label for="setup-camera" class="input-group-prepend mb-0"> <label for="setup-camera" class="input-group-prepend mb-0">
<span class="input-group-text" title="Camera"><svg-icon icon="video"></svg-icon></span> <span class="input-group-text" :title="$t('meet.cam')"><svg-icon icon="video"></svg-icon></span>
</label> </label>
<select class="custom-select" id="setup-camera" v-model="camera" @change="setupCameraChange"> <select class="custom-select" id="setup-camera" v-model="camera" @change="setupCameraChange">
<option value="">None</option> <option value="">{{ $t('form.none') }}</option>
<option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option> <option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
</select> </select>
</div> </div>
<div class="input-group mt-2"> <div class="input-group mt-2">
<label for="setup-nickname" class="input-group-prepend mb-0"> <label for="setup-nickname" class="input-group-prepend mb-0">
<span class="input-group-text" title="Nickname"><svg-icon icon="user"></svg-icon></span> <span class="input-group-text" :title="$t('meet.nick')"><svg-icon icon="user"></svg-icon></span>
</label> </label>
<input class="form-control" type="text" id="setup-nickname" v-model="nickname" placeholder="Your name"> <input class="form-control" type="text" id="setup-nickname" v-model="nickname" :placeholder="$t('meet.nick-placeholder')">
</div> </div>
<div class="input-group mt-2" v-if="session.config && session.config.requires_password"> <div class="input-group mt-2" v-if="session.config && session.config.requires_password">
<label for="setup-password" class="input-group-prepend mb-0"> <label for="setup-password" class="input-group-prepend mb-0">
<span class="input-group-text" title="Password"><svg-icon icon="key"></svg-icon></span> <span class="input-group-text" :title="$t('form.password')"><svg-icon icon="key"></svg-icon></span>
</label> </label>
<input type="password" class="form-control" id="setup-password" v-model="password" placeholder="Password"> <input type="password" class="form-control" id="setup-password" v-model="password" :placeholder="$t('form.password')">
</div> </div>
<div class="mt-3"> <div class="mt-3">
<button type="submit" id="join-button" <button type="submit" id="join-button"
:class="'btn w-100 btn-' + (isRoomReady() ? 'success' : 'primary')" :class="'btn w-100 btn-' + (isRoomReady() ? 'success' : 'primary')"
> >
<span v-if="isRoomReady()">JOIN NOW</span> <span v-if="isRoomReady()">{{ $t('meet.joinnow') }}</span>
<span v-else-if="roomState == 323">I'm the owner</span> <span v-else-if="roomState == 323">{{ $t('meet.imaowner') }}</span>
<span v-else>JOIN</span> <span v-else>{{ $t('meet.join') }}</span>
</button> </button>
</div> </div>
</div> </div>
<div class="mt-4 col-sm-12"> <div class="mt-4 col-sm-12">
<status-message :status="roomState" :status-labels="roomStateLabels"></status-message> <status-message :status="roomState" :status-labels="roomStateLabels"></status-message>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
<div id="meet-session-layout" class="d-flex hidden"> <div id="meet-session-layout" class="d-flex hidden">
<div id="meet-queue"> <div id="meet-queue">
<div class="head" title="Q &amp; A"><svg-icon icon="microphone-alt"></svg-icon></div> <div class="head" :title="$t('meet.qa')"><svg-icon icon="microphone-alt"></svg-icon></div>
</div> </div>
<div id="meet-session"></div> <div id="meet-session"></div>
<div id="meet-chat"> <div id="meet-chat">
<div class="chat"></div> <div class="chat"></div>
<div class="chat-input m-2"> <div class="chat-input m-2">
<textarea class="form-control" rows="1"></textarea> <textarea class="form-control" rows="1"></textarea>
</div> </div>
</div> </div>
</div> </div>
<logon-form id="meet-auth" class="hidden" :dashboard="false" @success="authSuccess"></logon-form> <logon-form id="meet-auth" class="hidden" :dashboard="false" @success="authSuccess"></logon-form>
<div id="leave-dialog" class="modal" tabindex="-1" role="dialog"> <div id="leave-dialog" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Room closed</h5> <h5 class="modal-title">{{ $t('meet.leave-title') }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" :aria-label="$t('button.close')">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>The session has been closed by the room owner.</p> <p>{{ $t('meet.leave-body') }}</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-danger modal-action" data-dismiss="modal">Close</button> <button type="button" class="btn btn-danger modal-action" data-dismiss="modal">{{ $t('button.close') }}</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="media-setup-dialog" class="modal" tabindex="-1" role="dialog"> <div id="media-setup-dialog" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Media setup</h5> <h5 class="modal-title">{{ $t('meet.media-title') }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" :aria-label="$t('button.close')">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form class="media-setup-form"> <form class="media-setup-form">
<div class="media-setup-preview"></div> <div class="media-setup-preview"></div>
<div class="input-group mt-2"> <div class="input-group mt-2">
<label for="setup-mic" class="input-group-prepend mb-0"> <label for="setup-mic" class="input-group-prepend mb-0">
<span class="input-group-text" title="Microphone"><svg-icon icon="microphone"></svg-icon></span> <span class="input-group-text" :title="$t('meet.mic')"><svg-icon icon="microphone"></svg-icon></span>
</label> </label>
<select class="custom-select" id="setup-mic" v-model="microphone" @change="setupMicrophoneChange"> <select class="custom-select" id="setup-mic" v-model="microphone" @change="setupMicrophoneChange">
<option value="">None</option> <option value="">{{ $t('form.none') }}</option>
<option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option> <option v-for="mic in setup.microphones" :value="mic.deviceId" :key="mic.deviceId">{{ mic.label }}</option>
</select> </select>
</div> </div>
<div class="input-group mt-2"> <div class="input-group mt-2">
<label for="setup-cam" class="input-group-prepend mb-0"> <label for="setup-cam" class="input-group-prepend mb-0">
<span class="input-group-text" title="Camera"><svg-icon icon="video"></svg-icon></span> <span class="input-group-text" :title="$t('meet.cam')"><svg-icon icon="video"></svg-icon></span>
</label> </label>
<select class="custom-select" id="setup-cam" v-model="camera" @change="setupCameraChange"> <select class="custom-select" id="setup-cam" v-model="camera" @change="setupCameraChange">
<option value="">None</option> <option value="">{{ $t('form.none') }}</option>
<option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option> <option v-for="cam in setup.cameras" :value="cam.deviceId" :key="cam.deviceId">{{ cam.label }}</option>
</select> </select>
</div> </div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary modal-action" data-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary modal-action" data-dismiss="modal">{{ $t('button.close') }}</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<room-options v-if="session.config" :config="session.config" :room="room" @config-update="configUpdate"></room-options> <room-options v-if="session.config" :config="session.config" :room="room" @config-update="configUpdate"></room-options>
</div> </div>
</template> </template>
▲ Show 20 Lines • Show All 62 Lines • ▼ Show 20 Lines export default {
setup: { setup: {
cameras: [], cameras: [],
microphones: [], microphones: [],
}, },
canShareScreen: false, canShareScreen: false,
camera: '', camera: '',
channels: [], channels: [],
languages: { languages: {
en: 'English', en: 'lang.en',
de: 'German', de: 'lang.de',
fr: 'French', fr: 'lang.fr',
it: 'Italian' it: 'lang.it'
}, },
meet: null, meet: null,
microphone: '', microphone: '',
nickname: '', nickname: '',
password: '', password: '',
room: null, room: null,
roomState: 'init', roomState: 'init',
roomStateLabels: { roomStateLabels: {
init: 'Checking the room...', 'init': 'meet.status-init',
323: 'The room is closed. Please, wait for the owner to start the session.', 323: 'meet.status-323',
324: 'The room is closed. It will be open for others after you join.', 324: 'meet.status-324',
325: 'The room is ready. Please, provide a valid password.', 325: 'meet.status-325',
326: 'The room is locked. Please, enter your name and try again.', 326: 'meet.status-326',
327: 'Waiting for permission to join the room.', 327: 'meet.status-327',
404: 'The room does not exist.', 404: 'meet.status-404',
429: 'Too many requests. Please, wait.', 429: 'meet.status-429',
500: 'Failed to connect to the room. Server error.' 500: 'meet.status-500'
}, },
session: {}, session: {},
audioActive: false, audioActive: false,
videoActive: false, videoActive: false,
chatActive: false, chatActive: false,
handRaised: false, handRaised: false,
screenShareActive: false screenShareActive: false
} }
▲ Show 20 Lines • Show All 165 Lines • ▼ Show 20 Lines export default {
// FIXME: Should the message close button act as the Deny button? Do we need the Deny button? // FIXME: Should the message close button act as the Deny button? Do we need the Deny button?
let body = $( let body = $(
`<div>` `<div>`
+ `<div class="picture"><img src="${data.picture}"></div>` + `<div class="picture"><img src="${data.picture}"></div>`
+ `<div class="content">` + `<div class="content">`
+ `<p class="mb-2"></p>` + `<p class="mb-2"></p>`
+ `<div class="text-right">` + `<div class="text-right">`
+ `<button type="button" class="btn btn-sm btn-success accept">Accept</button>` + `<button type="button" class="btn btn-sm btn-success accept">${this.$t('button.accept')}</button>`
+ `<button type="button" class="btn btn-sm btn-danger deny ml-2">Deny</button>` + `<button type="button" class="btn btn-sm btn-danger deny ml-2">${this.$t('button.deny')}</button>`
) )
this.$toast.message({ this.$toast.message({
className: 'join-request', className: 'join-request',
icon: 'user', icon: 'user',
timeout: 0, timeout: 0,
title: 'Join request', title: this.$t('meet.join-request'),
// titleClassName: '', // titleClassName: '',
body: body.html(), body: body.html(),
onShow: element => { onShow: element => {
const id = data.requestId const id = data.requestId
$(element).find('p').text((data.nickname || '') + ' requested to join.') $(element).find('p').text(this.$t('meet.join-requested', { user: data.nickname || '' }))
// add id attribute, so we can identify it // add id attribute, so we can identify it
$(element).attr('id', 'i' + id) $(element).attr('id', 'i' + id)
// add action to the buttons // add action to the buttons
.find('button.accept,button.deny').on('click', e => { .find('button.accept,button.deny').on('click', e => {
const action = $(e.target).is('.accept') ? 'accept' : 'deny' const action = $(e.target).is('.accept') ? 'accept' : 'deny'
axios.post('/api/v4/openvidu/rooms/' + this.room + '/request/' + id + '/' + action) axios.post('/api/v4/openvidu/rooms/' + this.room + '/request/' + id + '/' + action)
.then(response => { .then(response => {
Show All 25 Lines export default {
clearTimeout(roomRequest) clearTimeout(roomRequest)
this.session.nickname = this.nickname this.session.nickname = this.nickname
this.session.languages = this.languages this.session.languages = this.languages
this.session.menuElement = $('#meet-session-menu')[0] this.session.menuElement = $('#meet-session-menu')[0]
this.session.chatElement = $('#meet-chat')[0] this.session.chatElement = $('#meet-chat')[0]
this.session.queueElement = $('#meet-queue')[0] this.session.queueElement = $('#meet-queue')[0]
this.session.counterElement = $('#meet-counter span')[0] this.session.counterElement = $('#meet-counter span')[0]
this.session.translate = (label, args) => this.$t(label, args)
this.session.onSuccess = () => { this.session.onSuccess = () => {
$('#app').addClass('meet') $('#app').addClass('meet')
$('#meet-setup').addClass('hidden') $('#meet-setup').addClass('hidden')
$('#meet-session-toolbar,#meet-session-layout').removeClass('hidden') $('#meet-session-toolbar,#meet-session-layout').removeClass('hidden')
} }
this.session.onError = () => { this.session.onError = () => {
this.roomState = 500 this.roomState = 500
} }
▲ Show 20 Lines • Show All 238 Lines • Show Last 20 Lines