Page MenuHomePhorge
Differential D1936 Diff 5368 src/resources/vue/Meet/Room.vue

Changeset View

Standalone View

View Options

src/resources/vue/Meet/Room.vue

Show First 20 Lines • Show All 66 Lines • ▼ Show 20 Lines <div id="meet-component">
<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"
@click="joinSession" @click="joinSession"
:disabled="roomState == 'init' || roomState == 427 || roomState == 404" :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 == 423">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>
<div class="mt-4 col-sm-12"> <div class="mt-4 col-sm-12">
<status-message :status="roomState" :status-labels="roomStateLabels"></status-message> <status-message :status="roomState" :status-labels="roomStateLabels"></status-message>
</div> </div>
</form> </form>
▲ Show 20 Lines • Show All 60 Lines • ▼ Show 20 Lines export default {
microphone: '', microphone: '',
nickname: '', nickname: '',
password: '', password: '',
room: null, room: null,
roomState: 'init', roomState: 'init',
roomStateLabels: { roomStateLabels: {
init: 'Checking the room...', init: 'Checking the room...',
404: 'The room does not exist.', 404: 'The room does not exist.',
423: 'The room is closed. Please, wait for the owner to start the session.', 323: 'The room is closed. Please, wait for the owner to start the session.',
424: 'The room is closed. It will be open for others after you join.', 324: 'The room is closed. It will be open for others after you join.',
425: 'The room is ready. Please, provide a valid password.', 325: 'The room is ready. Please, provide a valid password.',
426: 'The room is locked. Please, enter your name and try again.', 326: 'The room is locked. Please, enter your name and try again.',
427: 'Waiting for permission to join the room.', 327: 'Waiting for permission to join the room.',
500: 'Failed to create a session. Server error.' 500: 'Failed to create a session. Server error.'
}, },
session: {} session: {}
} }
}, },
mounted() { mounted() {
this.room = this.$route.params.room this.room = this.$route.params.room
▲ Show 20 Lines • Show All 46 Lines • ▼ Show 20 Lines export default {
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 => {
this.roomState = String(error.response.status) const data = error.response.data || {}
if (error.response.data && error.response.data.config) { if (data.code) {
this.session.config = error.response.data.config this.roomState = data.code
} else {
this.roomState = error.response.status
}
if (data.config) {
this.session.config = data.config
} }
switch (this.roomState) { switch (this.roomState) {
case '423': 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) window.roomRequest = setTimeout(() => { this.initSession() }, 10000)
break; break;
case '425': 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 '426': 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 '427': 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) window.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')
} }
}, },
isRoomReady() { isRoomReady() {
return ['ready', '424', '425', '426', '427'].includes(this.roomState) return ['ready', 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
if ($('#i' + data.requestId).length) { if ($('#i' + data.requestId).length) {
return return
} }
Show All 32 Lines export default {
$('#i' + id).remove() $('#i' + id).remove()
}) })
}) })
} }
}) })
}, },
// Entering the room // Entering the room
joinSession() { joinSession() {
if (this.roomState == 423) { if (this.roomState == 323) {
$('#meet-setup').addClass('hidden') $('#meet-setup').addClass('hidden')
$('#meet-auth').removeClass('hidden') $('#meet-auth').removeClass('hidden')
return return
} }
if (this.roomState != 'ready') { if (this.roomState != 'ready') {
this.initSession(true) this.initSession(true)
return return
▲ Show 20 Lines • Show All 195 Lines • Show Last 20 Lines