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 |