Changeset View
Changeset View
Standalone View
Standalone View
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"> | |||||
<svg-icon icon="hand-paper"></svg-icon> | |||||
</button> | |||||
<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 61 Lines • ▼ Show 20 Lines | <div id="meet-component"> | ||||
<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 class="head" title="Q & A"><svg-icon icon="microphone-alt"></svg-icon></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> | ||||
▲ Show 20 Lines • Show All 73 Lines • ▼ Show 20 Lines | <script> | ||||
import { | import { | ||||
faAlignLeft, | faAlignLeft, | ||||
faCog, | faCog, | ||||
faCompress, | faCompress, | ||||
faCrown, | faCrown, | ||||
faDesktop, | faDesktop, | ||||
faExpand, | faExpand, | ||||
faHandPaper, | |||||
faMicrophone, | faMicrophone, | ||||
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, | |||||
faMicrophone, | faMicrophone, | ||||
faMicrophoneAlt, | |||||
faPowerOff, | faPowerOff, | ||||
faUser, | faUser, | ||||
faShieldAlt, | faShieldAlt, | ||||
faVideo, | faVideo, | ||||
faVolumeMute | faVolumeMute | ||||
) | ) | ||||
let roomRequest | let roomRequest | ||||
▲ Show 20 Lines • Show All 249 Lines • ▼ Show 20 Lines | export default { | ||||
return | return | ||||
} | } | ||||
clearTimeout(roomRequest) | clearTimeout(roomRequest) | ||||
this.session.nickname = this.nickname | this.session.nickname = this.nickname | ||||
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.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') | ||||
if (!this.canShareScreen) { | if (!this.canShareScreen) { | ||||
this.setMenuItem('screen', false, true) | this.setMenuItem('screen', false, true) | ||||
} | } | ||||
▲ Show 20 Lines • Show All 157 Lines • ▼ Show 20 Lines | export default { | ||||
}) | }) | ||||
if (document.fullscreenElement) { | if (document.fullscreenElement) { | ||||
document.exitFullscreen() | document.exitFullscreen() | ||||
} else { | } else { | ||||
element.requestFullscreen() | element.requestFullscreen() | ||||
} | } | ||||
}, | }, | ||||
switchHand() { | |||||
let enabled = $('#meet-session-menu').find('.link-hand').is('.text-danger') | |||||
this.updateSelf({ hand: enabled }, () => { this.setMenuItem('hand', enabled) }) | |||||
}, | |||||
switchSound() { | switchSound() { | ||||
const enabled = this.meet.switchAudio() | const enabled = this.meet.switchAudio() | ||||
this.setMenuItem('audio', enabled) | this.setMenuItem('audio', enabled) | ||||
}, | }, | ||||
switchVideo() { | switchVideo() { | ||||
const enabled = this.meet.switchVideo() | const enabled = this.meet.switchVideo() | ||||
this.setMenuItem('video', enabled) | this.setMenuItem('video', enabled) | ||||
}, | }, | ||||
Show All 19 Lines | export default { | ||||
}) | }) | ||||
} | } | ||||
}, | }, | ||||
updateParticipant(connId, params) { | updateParticipant(connId, params) { | ||||
if (this.isModerator()) { | if (this.isModerator()) { | ||||
axios.put('/api/v4/openvidu/rooms/' + this.room + '/connections/' + connId, params) | 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) { | updateSession(data) { | ||||
let params = {} | let params = {} | ||||
if ('role' in data) { | if ('role' in data) { | ||||
params.role = data.role | params.role = data.role | ||||
} | } | ||||
// merge new params into the object | // merge new params into the object | ||||
this.session = Object.assign({}, this.session, params) | this.session = Object.assign({}, this.session, params) | ||||
if ('hand' in data) { | |||||
this.setMenuItem('hand', data.hand) | |||||
} | |||||
// update some buttons state e.g. when switching from publisher to subscriber | // update some buttons state e.g. when switching from publisher to subscriber | ||||
if (!this.isPublisher()) { | if (!this.isPublisher()) { | ||||
this.setMenuItem('audio', false) | this.setMenuItem('audio', false) | ||||
this.setMenuItem('video', false) | this.setMenuItem('video', false) | ||||
} else { | } else { | ||||
if ('videoActive' in data) { | if ('videoActive' in data) { | ||||
this.setMenuItem('video', data.videoActive) | this.setMenuItem('video', data.videoActive) | ||||
} | } | ||||
if ('audioActive' in data) { | if ('audioActive' in data) { | ||||
this.setMenuItem('audio', data.audioActive) | this.setMenuItem('audio', data.audioActive) | ||||
} | } | ||||
} | } | ||||
} | } | ||||
} | } | ||||
} | } | ||||
</script> | </script> |