Page MenuHomePhorge
Differential D2245 Diff 6325 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">
<div id="meet-session-menu"> <div id="meet-session-menu">
<button class="btn btn-link link-audio" @click="switchSound" :disabled="!isPublisher()" title="Mute audio"> <button class="btn btn-link link-audio" @click="switchSound" :disabled="!isPublisher()" title="Mute audio">
<svg-icon icon="microphone"></svg-icon> <svg-icon icon="microphone"></svg-icon>
</button> </button>
<button class="btn btn-link link-video" @click="switchVideo" :disabled="!isPublisher()" title="Mute video"> <button class="btn btn-link link-video" @click="switchVideo" :disabled="!isPublisher()" title="Mute video">
<svg-icon icon="video"></svg-icon> <svg-icon icon="video"></svg-icon>
</button> </button>
<button class="btn btn-link link-screen text-danger" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" title="Share screen"> <button class="btn btn-link link-screen text-danger" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" title="Share screen">
<svg-icon icon="desktop"></svg-icon> <svg-icon icon="desktop"></svg-icon>
</button> </button>
<button class="btn btn-link link-hand text-danger" v-if="!isPublisher()" @click="switchHand" title="Raise hand"> <button class="btn btn-link link-hand text-danger" v-if="!isPublisher()" @click="switchHand" title="Raise hand">
<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">
<button class="btn btn-link link-channel" title="Interpreted language channel" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
<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">- none -</a>
<a v-for="code in channels" :key="code" href="#" @click="switchChannel" :data-code="code"
:class="'dropdown-item' + (session.channel == code ? ' active' : '')"
>{{ languages[code] }}</a>
</div>
</span>
<button class="btn btn-link link-chat text-danger" @click="switchChat" title="Chat"> <button class="btn btn-link link-chat text-danger" @click="switchChat" title="Chat">
<svg-icon icon="align-left"></svg-icon> <svg-icon icon="align-left"></svg-icon>
</button> </button>
<button class="btn btn-link link-fullscreen closed hidden" @click="switchFullscreen" title="Full screen"> <button class="btn btn-link link-fullscreen closed hidden" @click="switchFullscreen" title="Full screen">
<svg-icon icon="expand"></svg-icon> <svg-icon icon="expand"></svg-icon>
</button> </button>
<button class="btn btn-link link-fullscreen open hidden" @click="switchFullscreen" title="Full screen"> <button class="btn btn-link link-fullscreen open hidden" @click="switchFullscreen" title="Full screen">
<svg-icon icon="compress"></svg-icon> <svg-icon icon="compress"></svg-icon>
▲ Show 20 Lines • Show All 154 Lines • ▼ Show 20 Lines<script>
import { import {
faAlignLeft, faAlignLeft,
faCog, faCog,
faCompress, faCompress,
faCrown, faCrown,
faDesktop, faDesktop,
faExpand, faExpand,
faHandPaper, faHandPaper,
faHeadphones,
faMicrophone, faMicrophone,
faMicrophoneAlt, faMicrophoneAlt,
faPowerOff, faPowerOff,
faUser, faUser,
faShieldAlt, faShieldAlt,
faVideo, faVideo,
faVolumeMute faVolumeMute
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
// Register only these icons we need // Register only these icons we need
library.add( library.add(
faAlignLeft, faAlignLeft,
faCog, faCog,
faCompress, faCompress,
faCrown, faCrown,
faDesktop, faDesktop,
faExpand, faExpand,
faHandPaper, faHandPaper,
faHeadphones,
faMicrophone, faMicrophone,
faMicrophoneAlt, faMicrophoneAlt,
faPowerOff, faPowerOff,
faUser, faUser,
faShieldAlt, faShieldAlt,
faVideo, faVideo,
faVolumeMute faVolumeMute
) )
Show All 10 Lines export default {
data() { data() {
return { return {
setup: { setup: {
cameras: [], cameras: [],
microphones: [], microphones: [],
}, },
canShareScreen: false, canShareScreen: false,
camera: '', camera: '',
channels: [],
languages: {
en: 'English',
de: 'German',
fr: 'French',
it: 'Italian'
},
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: 'Checking the room...',
▲ Show 20 Lines • Show All 223 Lines • ▼ Show 20 Lines export default {
if (this.roomState != 'ready' && !this.session.token) { if (this.roomState != 'ready' && !this.session.token) {
this.initSession(true) this.initSession(true)
return return
} }
clearTimeout(roomRequest) clearTimeout(roomRequest)
this.session.nickname = this.nickname this.session.nickname = this.nickname
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.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')
▲ Show 20 Lines • Show All 129 Lines • ▼ Show 20 Lines export default {
this.setMenuItem('video', enabled) this.setMenuItem('video', enabled)
}) })
}, },
setupMicrophoneChange() { setupMicrophoneChange() {
this.meet.setupSetAudioDevice(this.microphone).then(enabled => { this.meet.setupSetAudioDevice(this.microphone).then(enabled => {
this.setMenuItem('audio', enabled) this.setMenuItem('audio', enabled)
}) })
}, },
switchChannel(e) {
let channel = $(e.target).data('code')
this.$set(this.session, 'channel', channel)
this.meet.switchChannel(channel)
},
switchChat() { switchChat() {
let chat = $('#meet-chat') let chat = $('#meet-chat')
let enabled = chat.is('.open') let enabled = chat.is('.open')
this.setMenuItem('chat', !enabled) this.setMenuItem('chat', !enabled)
chat.toggleClass('open') chat.toggleClass('open')
if (!enabled) { if (!enabled) {
▲ Show 20 Lines • Show All 63 Lines • ▼ Show 20 Lines export default {
axios.put('/api/v4/openvidu/rooms/' + this.room + '/connections/' + this.session.connectionId, params) axios.put('/api/v4/openvidu/rooms/' + this.room + '/connections/' + this.session.connectionId, params)
.then(response => { .then(response => {
if (onSuccess) { if (onSuccess) {
onSuccess(response) onSuccess(response)
} }
}) })
}, },
updateSession(data) { updateSession(data) {
let params = {} this.session = data
this.channels = data.channels || []
if ('role' in data) {
params.role = data.role
}
// merge new params into the object const isPublisher = this.isPublisher()
this.session = Object.assign({}, this.session, params)
if ('hand' in data) { this.setMenuItem('video', isPublisher ? data.videoActive : false)
this.setMenuItem('audio', isPublisher ? data.audioActive : false)
this.setMenuItem('hand', data.hand) this.setMenuItem('hand', data.hand)
} }
// update some buttons state e.g. when switching from publisher to subscriber
if (!this.isPublisher()) {
this.setMenuItem('audio', false)
this.setMenuItem('video', false)
} else {
if ('videoActive' in data) {
this.setMenuItem('video', data.videoActive)
}
if ('audioActive' in data) {
this.setMenuItem('audio', data.audioActive)
}
}
}
} }
} }
</script> </script>