Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Meet/RoomOptions.vue
- This file was moved from src/resources/vue/Meet/SessionSecurityOptions.vue.
<template> | <template> | ||||
<div v-if="config"> | <div v-if="config"> | ||||
<div id="security-options-dialog" class="modal" tabindex="-1" role="dialog"> | <div id="room-options-dialog" class="modal" tabindex="-1" role="dialog"> | ||||
<div class="modal-dialog" role="document"> | <div class="modal-dialog" role="document"> | ||||
<div class="modal-content"> | <div class="modal-content"> | ||||
<div class="modal-header"> | <div class="modal-header"> | ||||
<h5 class="modal-title">Security options</h5> | <h5 class="modal-title">Room options</h5> | ||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | ||||
<span aria-hidden="true">×</span> | <span aria-hidden="true">×</span> | ||||
</button> | </button> | ||||
</div> | </div> | ||||
<div class="modal-body"> | <div class="modal-body"> | ||||
<form id="security-options-password"> | <form id="room-options-password"> | ||||
<div id="password-input" class="input-group input-group-activable"> | <div id="password-input" class="input-group input-group-activable"> | ||||
<span class="input-group-text label">Password:</span> | <span class="input-group-text label">Password:</span> | ||||
<span v-if="config.password" id="password-input-text" class="input-group-text">{{ config.password }}</span> | <span v-if="config.password" id="password-input-text" class="input-group-text">{{ config.password }}</span> | ||||
<span v-else id="password-input-text" class="input-group-text text-muted">none</span> | <span v-else id="password-input-text" class="input-group-text text-muted">none</span> | ||||
<input type="text" :value="config.password" name="password" class="form-control rounded-left activable"> | <input type="text" :value="config.password" name="password" class="form-control rounded-left activable"> | ||||
<div class="input-group-append"> | <div class="input-group-append"> | ||||
<button type="button" @click="passwordSave" id="password-save-btn" class="btn btn-outline-primary activable rounded-right">Save</button> | <button type="button" @click="passwordSave" id="password-save-btn" class="btn btn-outline-primary activable rounded-right">Save</button> | ||||
<button type="button" v-if="config.password" id="password-clear-btn" @click="passwordClear" class="btn btn-outline-danger rounded">Clear password</button> | <button type="button" v-if="config.password" id="password-clear-btn" @click="passwordClear" class="btn btn-outline-danger rounded">Clear password</button> | ||||
<button type="button" v-else @click="passwordSet" id="password-set-btn" class="btn btn-outline-primary rounded">Set password</button> | <button type="button" v-else @click="passwordSet" id="password-set-btn" class="btn btn-outline-primary rounded">Set password</button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<small class="form-text text-muted"> | <small class="form-text text-muted"> | ||||
You can add a password to your meeting. Participants will have to provide | You can add a password to your meeting. Participants will have to provide | ||||
the password before they are allowed to join the meeting. | the password before they are allowed to join the meeting. | ||||
</small> | </small> | ||||
</form> | </form> | ||||
<hr> | <hr> | ||||
<form id="security-options-lock"> | <form id="room-options-lock"> | ||||
<div id="room-lock"> | <div id="room-lock"> | ||||
<label for="room-lock-input">Locked room:</label> | <label for="room-lock-input">Locked room:</label> | ||||
<input type="checkbox" id="room-lock-input" name="lock" value="1" :checked="config.locked" @click="lockSave"> | <input type="checkbox" id="room-lock-input" name="lock" value="1" :checked="config.locked" @click="lockSave"> | ||||
</div> | </div> | ||||
<small class="form-text text-muted"> | <small class="form-text text-muted"> | ||||
When the room is locked participants have to be approved by you | When the room is locked participants have to be approved by a moderator | ||||
before they could join the meeting. | before they could join the meeting. | ||||
</small> | </small> | ||||
</form> | </form> | ||||
<hr> | |||||
<form id="room-options-nomedia"> | |||||
<div id="room-nomedia"> | |||||
<label for="room-lock-input">Subscribers only:</label> | |||||
<input type="checkbox" id="room-nomedia-input" name="lock" value="1" :checked="config.nomedia" @click="nomediaSave"> | |||||
</div> | |||||
<small class="form-text text-muted"> | |||||
Forces all participants to join as subscribers (with camera and microphone turned off). | |||||
Moderators will be able to promote them to publishers throughout the session. | |||||
</small> | |||||
</form> | |||||
</div> | </div> | ||||
<div class="modal-footer"> | <div class="modal-footer"> | ||||
<button type="button" class="btn btn-secondary modal-action" data-dismiss="modal">Close</button> | <button type="button" class="btn btn-secondary modal-action" data-dismiss="modal">Close</button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
export default { | export default { | ||||
props: { | props: { | ||||
config: { type: Object, default: () => null }, | config: { type: Object, default: () => null }, | ||||
room: { type: String, default: () => null } | room: { type: String, default: () => null } | ||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
} | } | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
$('#security-options-dialog').on('show.bs.modal', e => { | $('#room-options-dialog').on('show.bs.modal', e => { | ||||
$(e.target).find('.input-group-activable.active').removeClass('active') | $(e.target).find('.input-group-activable.active').removeClass('active') | ||||
}) | }) | ||||
}, | }, | ||||
methods: { | methods: { | ||||
configSave(name, value, callback) { | configSave(name, value, callback) { | ||||
const post = {} | const post = {} | ||||
post[name] = value | post[name] = value | ||||
axios.post('/api/v4/openvidu/rooms/' + this.room + '/config', post) | axios.post('/api/v4/openvidu/rooms/' + this.room + '/config', post) | ||||
.then(response => { | .then(response => { | ||||
this.config[name] = value | this.config[name] = value | ||||
if (callback) { | if (callback) { | ||||
callback(response.data) | callback(response.data) | ||||
} | } | ||||
this.$emit('config-update', this.config) | this.$emit('config-update', this.config) | ||||
this.$toast.success(response.data.message) | this.$toast.success(response.data.message) | ||||
}) | }) | ||||
}, | }, | ||||
lockSave(e) { | lockSave(e) { | ||||
this.configSave('locked', $(e.target).prop('checked') ? 1 : 0) | this.configSave('locked', $(e.target).prop('checked') ? 1 : 0) | ||||
}, | }, | ||||
nomediaSave(e) { | |||||
this.configSave('nomedia', $(e.target).prop('checked') ? 1 : 0) | |||||
}, | |||||
passwordClear() { | passwordClear() { | ||||
this.configSave('password', '') | this.configSave('password', '') | ||||
}, | }, | ||||
passwordSave() { | passwordSave() { | ||||
this.configSave('password', $('#password-input input').val(), () => { | this.configSave('password', $('#password-input input').val(), () => { | ||||
$('#password-input').removeClass('active') | $('#password-input').removeClass('active') | ||||
}) | }) | ||||
}, | }, | ||||
Show All 19 Lines |