Page MenuHomePhorge
Differential D2257 Diff 6295 src/resources/vue/Meet/RoomOptions.vue

Changeset View

Standalone View

View Options

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">&times;</span> <span aria-hidden="true">&times;</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