Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Meet/Room.vue
| <template> | <template> | ||||
| <div id="meet-component"> | <div id="meet-component"> | ||||
| <div id="meet-session-toolbar" class="hidden"> | <div id="meet-session-toolbar" class="bg-white hidden"> | ||||
| <div id="meet-session-menu"> | <div id="meet-session-menu"> | ||||
| <button class="btn btn-link link-audio" @click="switchSound" :disabled="!isPublisher()" title="Mute audio"> | <button class="btn link-audio" @click="switchSound" :disabled="!isPublisher()" title="Mute audio"> | ||||
| <svg-icon icon="microphone"></svg-icon> | <svg-icon icon="microphone"></svg-icon> | ||||
| </button> | </button> | ||||
| <button class="btn btn-link link-video" @click="switchVideo" :disabled="!isPublisher()" title="Mute video"> | <button class="btn link-video" @click="switchVideo" :disabled="!isPublisher()" title="Mute video"> | ||||
| <svg-icon icon="video"></svg-icon> | <svg-icon icon="video"></svg-icon> | ||||
| </button> | </button> | ||||
| <button class="btn btn-link link-screen text-danger" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" title="Share screen"> | <button class="btn link-screen" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" title="Share screen"> | ||||
| <svg-icon icon="desktop"></svg-icon> | <svg-icon icon="desktop"></svg-icon> | ||||
| </button> | </button> | ||||
| <button class="btn btn-link link-hand text-danger" v-if="!isPublisher()" @click="switchHand" title="Raise hand"> | <button class="btn link-hand" v-if="!isPublisher()" @click="switchHand" title="Raise hand"> | ||||
| <svg-icon icon="hand-paper"></svg-icon> | <svg-icon icon="hand-paper"></svg-icon> | ||||
| </button> | </button> | ||||
| <span id="channel-select" :style="'display:' + (channels.length ? '' : 'none')" class="dropdown"> | <span id="channel-select" :style="'display:' + (channels.length ? '' : 'none')" class="dropdown"> | ||||
| <button class="btn btn-link link-channel" title="Interpreted language channel" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown"> | <button class="btn link-channel" title="Interpreted language channel" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown"> | ||||
| <svg-icon icon="headphones"></svg-icon> | <svg-icon icon="headphones"></svg-icon> | ||||
| <span class="badge badge-danger" v-if="session.channel">{{ session.channel.toUpperCase() }}</span> | <span class="badge badge-danger" v-if="session.channel">{{ session.channel.toUpperCase() }}</span> | ||||
| </button> | </button> | ||||
| <div class="dropdown-menu"> | <div class="dropdown-menu"> | ||||
| <a :class="'dropdown-item' + (!session.channel ? ' active' : '')" href="#" data-code="" @click="switchChannel">- none -</a> | <a :class="'dropdown-item' + (!session.channel ? ' active' : '')" href="#" data-code="" @click="switchChannel">- none -</a> | ||||
| <a v-for="code in channels" :key="code" href="#" @click="switchChannel" :data-code="code" | <a v-for="code in channels" :key="code" href="#" @click="switchChannel" :data-code="code" | ||||
| :class="'dropdown-item' + (session.channel == code ? ' active' : '')" | :class="'dropdown-item' + (session.channel == code ? ' active' : '')" | ||||
| >{{ languages[code] }}</a> | >{{ languages[code] }}</a> | ||||
| </div> | </div> | ||||
| </span> | </span> | ||||
| <button class="btn btn-link link-chat text-danger" @click="switchChat" title="Chat"> | <button class="btn link-chat" @click="switchChat" title="Chat"> | ||||
| <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 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 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-options" v-if="isRoomOwner()" @click="roomOptions" title="Room options"> | <button class="btn link-options" v-if="isRoomOwner()" @click="roomOptions" title="Room options"> | ||||
| <svg-icon icon="cog"></svg-icon> | <svg-icon icon="cog"></svg-icon> | ||||
| </button> | </button> | ||||
| <button class="btn btn-link link-logout" @click="logout" title="Leave session"> | <button class="btn 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> | ||||
| <div id="meet-setup" class="card container mt-2 mt-md-5 mb-5"> | <div id="meet-setup" class="card container mt-2 mt-md-5 mb-5"> | ||||
| <div class="card-body"> | <div class="card-body"> | ||||
| <div class="card-title">Set up your session</div> | <div class="card-title">Set up your session</div> | ||||
| ▲ Show 20 Lines • Show All 47 Lines • ▼ Show 20 Lines | <div id="meet-component"> | ||||
| <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> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div id="meet-session-layout" class="d-flex hidden"> | <div id="meet-session-layout" class="d-flex bg-light hidden"> | ||||
| <div id="meet-queue"> | <div id="meet-queue"> | ||||
| <div class="head" title="Q & A"><svg-icon icon="microphone-alt"></svg-icon></div> | <div class="head" title="Q & A"><svg-icon icon="microphone-alt"></svg-icon></div> | ||||
| </div> | </div> | ||||
| <div id="meet-session"></div> | <div id="meet-session"></div> | ||||
| <div id="meet-chat"> | <div id="meet-chat" class="bg-secondary pt-2"> | ||||
| <div class="chat"></div> | <div class="chat"></div> | ||||
| <div class="chat-input m-2"> | <div class="chat-input m-2"> | ||||
| <textarea class="form-control" rows="1"></textarea> | <textarea class="form-control" rows="1"></textarea> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <logon-form id="meet-auth" class="hidden" :dashboard="false" @success="authSuccess"></logon-form> | <logon-form id="meet-auth" class="hidden" :dashboard="false" @success="authSuccess"></logon-form> | ||||
| ▲ Show 20 Lines • Show All 492 Lines • ▼ Show 20 Lines | export default { | ||||
| return this.reqId | return this.reqId | ||||
| }, | }, | ||||
| roomOptions() { | roomOptions() { | ||||
| $('#room-options-dialog').modal() | $('#room-options-dialog').modal() | ||||
| }, | }, | ||||
| setMenuItem(type, state, disabled) { | setMenuItem(type, state, disabled) { | ||||
| let button = $('#meet-session-menu').find('.link-' + type) | let button = $('#meet-session-menu').find('.link-' + type) | ||||
| button[state ? 'removeClass' : 'addClass']('text-danger') | |||||
| if(['audio', 'video', 'screen', 'hand'].includes(type)) { | |||||
| button[state ? 'removeClass' : 'addClass']('btn-secondary text-light') | |||||
| } | |||||
| if (disabled !== undefined) { | if (disabled !== undefined) { | ||||
| button.prop('disabled', disabled) | button.prop('disabled', disabled) | ||||
| } | } | ||||
| }, | }, | ||||
| setupMedia() { | setupMedia() { | ||||
| let dialog = $('#media-setup-dialog') | let dialog = $('#media-setup-dialog') | ||||
| ▲ Show 20 Lines • Show All 133 Lines • Show Last 20 Lines | |||||