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> | ||||