Page MenuHomePhorge
Differential D2008 Diff 5494 src/resources/vue/Meet/Room.vue

Changeset View

Standalone View

View Options

src/resources/vue/Meet/Room.vue

Show First 20 Lines • Show All 64 Lines • ▼ Show 20 Lines <div id="meet-component">
</div> </div>
<div class="input-group mt-2" v-if="session.config && session.config.requires_password"> <div class="input-group mt-2" v-if="session.config && session.config.requires_password">
<label for="setup-password" class="input-group-prepend mb-0"> <label for="setup-password" class="input-group-prepend mb-0">
<span class="input-group-text" title="Password"><svg-icon icon="key"></svg-icon></span> <span class="input-group-text" title="Password"><svg-icon icon="key"></svg-icon></span>
</label> </label>
<input type="password" class="form-control" id="setup-password" v-model="password" placeholder="Password"> <input type="password" class="form-control" id="setup-password" v-model="password" placeholder="Password">
</div> </div>
<div class="mt-3"> <div class="mt-3">
<button type="button" <button type="button" id="join-button"
@click="joinSession" @click="joinSession"
:disabled="roomState == 'init' || roomState == 327 || roomState == 404"
:class="'btn w-100 btn-' + (isRoomReady() ? 'success' : 'primary')" :class="'btn w-100 btn-' + (isRoomReady() ? 'success' : 'primary')"
> >
<span v-if="isRoomReady()">JOIN NOW</span> <span v-if="isRoomReady()">JOIN NOW</span>
<span v-else-if="roomState == 323">I'm the owner</span> <span v-else-if="roomState == 323">I'm the owner</span>
<span v-else>JOIN</span> <span v-else>JOIN</span>
</button> </button>
</div> </div>
</div> </div>
▲ Show 20 Lines • Show All 41 Lines • ▼ Show 20 Lines
</template> </template>
<script> <script>
import Meet from '../../js/meet/app.js' import Meet 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'
let roomRequest
export default { export default {
components: { components: {
LogonForm, LogonForm,
SessionSecurityOptions, SessionSecurityOptions,
StatusMessage StatusMessage
}, },
data() { data() {
return { return {
Show All 31 Lines export default {
// Check the room and init the session // Check the room and init the session
this.initSession() this.initSession()
// Setup the room UI // Setup the room UI
this.setupSession() this.setupSession()
}, },
beforeDestroy() { beforeDestroy() {
clearTimeout(window.roomRequest) clearTimeout(roomRequest)
if (this.meet) { if (this.meet) {
this.meet.leaveRoom() this.meet.leaveRoom()
} }
}, },
methods: { methods: {
authSuccess() { authSuccess() {
// The user authentication succeeded, we still don't know it's really the room owner // The user authentication succeeded, we still don't know it's really the room owner
this.initSession() this.initSession()
$('#meet-setup').removeClass('hidden') $('#meet-setup').removeClass('hidden')
$('#meet-auth').addClass('hidden') $('#meet-auth').addClass('hidden')
}, },
configUpdate(config) { configUpdate(config) {
this.session.config = Object.assign({}, this.session.config, config) this.session.config = Object.assign({}, this.session.config, config)
}, },
dismissParticipant(id) { dismissParticipant(id) {
axios.post('/api/v4/openvidu/rooms/' + this.room + '/connections/' + id + '/dismiss') axios.post('/api/v4/openvidu/rooms/' + this.room + '/connections/' + id + '/dismiss')
}, },
initSession(init) { initSession(init) {
const button = $('#join-button').prop('disabled', true)
this.post = { this.post = {
password: this.password, password: this.password,
nickname: this.nickname, nickname: this.nickname,
screenShare: this.canShareScreen ? 1 : 0, screenShare: this.canShareScreen ? 1 : 0,
init: init ? 1 : 0, init: init ? 1 : 0,
picture: init ? this.makePicture() : '', picture: init ? this.makePicture() : '',
requestId: this.requestId(), requestId: this.requestId(),
canPublish: !!this.camera || !!this.microphone canPublish: !!this.camera || !!this.microphone
} }
$('#setup-password,#setup-nickname').removeClass('is-invalid') $('#setup-password,#setup-nickname').removeClass('is-invalid')
axios.post('/api/v4/openvidu/rooms/' + this.room, this.post, { ignoreErrors: true }) axios.post('/api/v4/openvidu/rooms/' + this.room, this.post, { ignoreErrors: true })
.then(response => { .then(response => {
button.prop('disabled', false)
// We already have token, the response is redundant
if (this.roomState == 'ready' && this.session.token) {
return
}
this.roomState = 'ready' this.roomState = 'ready'
this.session = response.data this.session = response.data
if (init) { if (init) {
this.joinSession() this.joinSession()
} }
}) })
.catch(error => { .catch(error => {
if (!error.response) { if (!error.response) {
console.error(error) console.error(error)
return return
} }
const data = error.response.data || {} const data = error.response.data || {}
if (data.code) { if (data.code) {
this.roomState = data.code this.roomState = data.code
} else { } else {
this.roomState = error.response.status this.roomState = error.response.status
} }
button.prop('disabled', this.roomState == 'init' || this.roomState == 327 || this.roomState == 404)
if (data.config) { if (data.config) {
this.session.config = data.config this.session.config = data.config
} }
switch (this.roomState) { switch (this.roomState) {
case 323: case 323:
// Waiting for the owner to open the room... // Waiting for the owner to open the room...
// Update room state every 10 seconds // Update room state every 10 seconds
window.roomRequest = setTimeout(() => { this.initSession() }, 10000) roomRequest = setTimeout(() => { this.initSession() }, 10000)
break;
case 324:
// Room is ready for the owner, but the 'init' was not requested yet
clearTimeout(roomRequest)
break; break;
case 325: case 325:
// Missing/invalid password // Missing/invalid password
if (init) { if (init) {
$('#setup-password').addClass('is-invalid').focus() $('#setup-password').addClass('is-invalid').focus()
} }
break; break;
case 326: case 326:
// Locked room prerequisites error // Locked room prerequisites error
if (init && !$('#setup-nickname').val()) { if (init && !$('#setup-nickname').val()) {
$('#setup-nickname').addClass('is-invalid').focus() $('#setup-nickname').addClass('is-invalid').focus()
} }
break; break;
case 327: case 327:
// Waiting for the owner's approval to join // Waiting for the owner's approval to join
// Update room state every 10 seconds // Update room state every 10 seconds
window.roomRequest = setTimeout(() => { this.initSession(true) }, 10000) roomRequest = setTimeout(() => { this.initSession(true) }, 10000)
break; break;
} }
}) })
if (document.fullscreenEnabled) { if (document.fullscreenEnabled) {
$('#meet-session-menu').find('.link-fullscreen.closed').removeClass('hidden') $('#meet-session-menu').find('.link-fullscreen.closed').removeClass('hidden')
} }
}, },
▲ Show 20 Lines • Show All 56 Lines • ▼ Show 20 Lines export default {
return return
} }
if (this.roomState != 'ready') { if (this.roomState != 'ready') {
this.initSession(true) this.initSession(true)
return return
} }
clearTimeout(window.roomRequest) clearTimeout(roomRequest)
$('#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 184 Lines • Show Last 20 Lines