Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Meet/Room.vue
| Show All 14 Lines | <div id="meet-component"> | ||||
| <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> | ||||
| </button> | </button> | ||||
| <button class="btn btn-link link-security" v-if="session && session.owner" @click="securityOptions" title="Security options"> | <button class="btn btn-link link-security" v-if="isRoomOwner()" @click="securityOptions" title="Security options"> | ||||
| <svg-icon icon="shield-alt"></svg-icon> | <svg-icon icon="shield-alt"></svg-icon> | ||||
| </button> | </button> | ||||
| <button class="btn btn-link link-logout" @click="logout" title="Leave session"> | <button class="btn btn-link link-logout" @click="logout" title="Leave session"> | ||||
| <svg-icon icon="power-off"></svg-icon> | <svg-icon icon="power-off"></svg-icon> | ||||
| </button> | </button> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| ▲ Show 20 Lines • Show All 86 Lines • ▼ Show 20 Lines | <div id="meet-component"> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <session-security-options v-if="session.config" :config="session.config" :room="room" @config-update="configUpdate"></session-security-options> | <session-security-options v-if="session.config" :config="session.config" :room="room" @config-update="configUpdate"></session-security-options> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import Meet from '../../js/meet/app.js' | import { Meet, Roles } from '../../js/meet/app.js' | ||||
| import StatusMessage from '../Widgets/StatusMessage' | import StatusMessage from '../Widgets/StatusMessage' | ||||
| import LogonForm from '../Login' | import LogonForm from '../Login' | ||||
| import SessionSecurityOptions from './SessionSecurityOptions' | import SessionSecurityOptions from './SessionSecurityOptions' | ||||
| // Register additional icons | // Register additional icons | ||||
| import { library } from '@fortawesome/fontawesome-svg-core' | import { library } from '@fortawesome/fontawesome-svg-core' | ||||
| import { | import { | ||||
| ▲ Show 20 Lines • Show All 177 Lines • ▼ Show 20 Lines | export default { | ||||
| } | } | ||||
| }) | }) | ||||
| if (document.fullscreenEnabled) { | if (document.fullscreenEnabled) { | ||||
| $('#meet-session-menu').find('.link-fullscreen.closed').removeClass('hidden') | $('#meet-session-menu').find('.link-fullscreen.closed').removeClass('hidden') | ||||
| } | } | ||||
| }, | }, | ||||
| isPublisher() { | isPublisher() { | ||||
| return this.session && this.session.canPublish | return !!this.session.role && (this.session.role & Roles.PUBLISHER) > 0 | ||||
| }, | |||||
| isRoomOwner() { | |||||
| return !!this.session.role && (this.session.role & Roles.OWNER) > 0 | |||||
| }, | }, | ||||
| isRoomReady() { | isRoomReady() { | ||||
| return ['ready', 322, 324, 325, 326, 327].includes(this.roomState) | 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 | // An event received by the room owner when a participant is asking for a permission to join the room | ||||
| joinRequest(data) { | joinRequest(data) { | ||||
| // The toast for this user request already exists, ignore | // The toast for this user request already exists, ignore | ||||
| // It's not really needed as we do this on server-side already | // It's not really needed as we do this on server-side already | ||||
| ▲ Show 20 Lines • Show All 68 Lines • ▼ Show 20 Lines | export default { | ||||
| } | } | ||||
| 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.onDestroy = event => { | this.session.onDestroy = event => { | ||||
| // TODO: Display different message for each reason: forceDisconnectByUser, | // TODO: Display different message for each reason: forceDisconnectByUser, | ||||
| // forceDisconnectByServer, sessionClosedByServer? | // forceDisconnectByServer, sessionClosedByServer? | ||||
| if (event.reason != 'disconnect' && event.reason != 'networkDisconnect' && !this.session.owner) { | if (event.reason != 'disconnect' && event.reason != 'networkDisconnect' && !this.isRoomOwner()) { | ||||
| $('#leave-dialog').on('hide.bs.modal', () => { | $('#leave-dialog').on('hide.bs.modal', () => { | ||||
| // FIXME: Where exactly the user should land? Currently he'll land | // 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). | // on dashboard (if he's logged in) or login form (if he's not). | ||||
| this.$router.push({ name: 'dashboard' }) | this.$router.push({ name: 'dashboard' }) | ||||
| }).modal() | }).modal() | ||||
| } | } | ||||
| } | } | ||||
| this.session.onDismiss = connId => { this.dismissParticipant(connId) } | this.session.onDismiss = connId => { this.dismissParticipant(connId) } | ||||
| if (this.session.owner) { | if (this.isRoomOwner()) { | ||||
| this.session.onJoinRequest = data => { this.joinRequest(data) } | this.session.onJoinRequest = data => { this.joinRequest(data) } | ||||
| } | } | ||||
| this.meet.joinRoom(this.session) | this.meet.joinRoom(this.session) | ||||
| }, | }, | ||||
| logout() { | logout() { | ||||
| const logout = () => { | const logout = () => { | ||||
| this.meet.leaveRoom() | this.meet.leaveRoom() | ||||
| this.meet = null | this.meet = null | ||||
| this.$router.push({ name: 'dashboard' }) | this.$router.push({ name: 'dashboard' }) | ||||
| } | } | ||||
| if (this.session.owner) { | if (this.isRoomOwner()) { | ||||
| axios.post('/api/v4/openvidu/rooms/' + this.room + '/close').then(logout) | axios.post('/api/v4/openvidu/rooms/' + this.room + '/close').then(logout) | ||||
| } else { | } else { | ||||
| logout() | logout() | ||||
| } | } | ||||
| }, | }, | ||||
| makePicture() { | makePicture() { | ||||
| const video = $("#setup-preview video")[0]; | const video = $("#setup-preview video")[0]; | ||||
| ▲ Show 20 Lines • Show All 143 Lines • Show Last 20 Lines | |||||