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="hidden"> | ||||
| <span id="meet-counter" :title="$t('meet.partcnt')"><svg-icon icon="users"></svg-icon> <span></span></span> | <span id="meet-counter" :title="$t('meet.partcnt')"><svg-icon icon="users"></svg-icon> <span></span></span> | ||||
| <span id="meet-session-logo" v-html="$root.logo()"></span> | <span id="meet-session-logo" v-html="$root.logo()"></span> | ||||
| <div id="meet-session-menu"> | <div id="meet-session-menu"> | ||||
| <button :class="'btn link-audio' + (audioActive ? '' : ' on')" @click="switchSound" :disabled="!isPublisher()" :title="$t('meet.menu-audio-' + (audioActive ? 'mute' : 'unmute'))"> | <button :class="'btn link-audio' + (audioActive ? '' : ' on')" @click="switchSound" :disabled="!isPublisher()" :title="$t('meet.menu-audio-' + (audioActive ? 'mute' : 'unmute'))"> | ||||
| <svg-icon :icon="audioActive ? 'microphone' : 'microphone-slash'"></svg-icon> | <svg-icon :icon="audioActive ? 'microphone' : 'microphone-slash'"></svg-icon> | ||||
| </button> | </button> | ||||
| <button :class="'btn link-video' + (videoActive ? '' : ' on')" @click="switchVideo" :disabled="!isPublisher()" :title="$t('meet.menu-video-' + (videoActive ? 'mute' : 'unmute'))"> | <button :class="'btn link-video' + (videoActive ? '' : ' on')" @click="switchVideo" :disabled="!isPublisher()" :title="$t('meet.menu-video-' + (videoActive ? 'mute' : 'unmute'))"> | ||||
| <svg-icon :icon="videoActive ? 'video' : 'video-slash'"></svg-icon> | <svg-icon :icon="videoActive ? 'video' : 'video-slash'"></svg-icon> | ||||
| </button> | </button> | ||||
| <button :class="'btn link-screen' + (screenActive ? ' on' : '')" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" :title="$t('meet.menu-screen')"> | <button :class="'btn link-screen' + (screenActive ? ' on' : '')" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" :title="$t('meet.menu-screen')"> | ||||
| <svg-icon icon="desktop"></svg-icon> | <svg-icon icon="desktop"></svg-icon> | ||||
| </button> | </button> | ||||
| <button :class="'btn link-hand' + (handRaised ? ' on' : '')" v-if="!isPublisher()" @click="switchHand" :title="$t('meet.menu-hand-' + (handRaised ? 'lower' : 'raise'))"> | <button :class="'btn link-hand' + (handRaised ? ' on' : '')" v-if="!isPublisher()" @click="switchHand" :title="$t('meet.menu-hand-' + (handRaised ? 'lower' : 'raise'))"> | ||||
| <svg-icon icon="hand-paper"></svg-icon> | <svg-icon icon="hand"></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 link-channel' + (session.channel ? ' on' : '')" data-bs-toggle="dropdown" | <button :class="'btn link-channel' + (session.channel ? ' on' : '')" data-bs-toggle="dropdown" | ||||
| :title="$t('meet.menu-channel')" aria-haspopup="true" aria-expanded="false" | :title="$t('meet.menu-channel')" aria-haspopup="true" aria-expanded="false" | ||||
| > | > | ||||
| <svg-icon icon="headphones"></svg-icon> | <svg-icon icon="headphones"></svg-icon> | ||||
| <span class="badge bg-danger" v-if="session.channel">{{ session.channel.toUpperCase() }}</span> | <span class="badge bg-danger" v-if="session.channel">{{ session.channel.toUpperCase() }}</span> | ||||
| </button> | </button> | ||||
| Show All 9 Lines | <div id="meet-component"> | ||||
| </button> | </button> | ||||
| <button class="btn link-fullscreen closed hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen')"> | <button class="btn link-fullscreen closed hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen')"> | ||||
| <svg-icon icon="expand"></svg-icon> | <svg-icon icon="expand"></svg-icon> | ||||
| </button> | </button> | ||||
| <button class="btn link-fullscreen open hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen-exit')"> | <button class="btn link-fullscreen open hidden" @click="switchFullscreen" :title="$t('meet.menu-fullscreen-exit')"> | ||||
| <svg-icon icon="compress"></svg-icon> | <svg-icon icon="compress"></svg-icon> | ||||
| </button> | </button> | ||||
| <button class="btn link-options" v-if="isRoomOwner()" @click="roomOptions" :title="$t('meet.options')"> | <button class="btn link-options" v-if="isRoomOwner()" @click="roomOptions" :title="$t('meet.options')"> | ||||
| <svg-icon icon="cog"></svg-icon> | <svg-icon icon="gear"></svg-icon> | ||||
| </button> | </button> | ||||
| <button class="btn link-logout" @click="logout" :title="$t('meet.menu-leave')"> | <button class="btn link-logout" @click="logout" :title="$t('meet.menu-leave')"> | ||||
| <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"> | ||||
| ▲ Show 20 Lines • Show All 51 Lines • ▼ Show 20 Lines | <div id="meet-component"> | ||||
| </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 hidden"> | ||||
| <div id="meet-queue"> | <div id="meet-queue"> | ||||
| <div class="head" :title="$t('meet.qa')"><svg-icon icon="microphone-alt"></svg-icon></div> | <div class="head" :title="$t('meet.qa')"><svg-icon icon="microphone-lines"></svg-icon></div> | ||||
| </div> | </div> | ||||
| <div id="meet-session"></div> | <div id="meet-session"></div> | ||||
| <div id="meet-chat"> | <div id="meet-chat"> | ||||
| <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> | ||||
| ▲ Show 20 Lines • Show All 65 Lines • ▼ Show 20 Lines | <script> | ||||
| import { Media } from '../../js/meet/media.js' | import { Media } from '../../js/meet/media.js' | ||||
| import { Room as Meet } from '../../js/meet/room.js' | import { Room as Meet } from '../../js/meet/room.js' | ||||
| import { Roles } from '../../js/meet/constants.js' | import { Roles } from '../../js/meet/constants.js' | ||||
| import StatusMessage from '../Widgets/StatusMessage' | import StatusMessage from '../Widgets/StatusMessage' | ||||
| import LogonForm from '../Login' | import LogonForm from '../Login' | ||||
| import RoomOptions from './RoomOptions' | import RoomOptions from './RoomOptions' | ||||
| import RoomStats from './RoomStats' | import RoomStats from './RoomStats' | ||||
| // Register additional icons | |||||
| import { library } from '@fortawesome/fontawesome-svg-core' | import { library } from '@fortawesome/fontawesome-svg-core' | ||||
| import { | |||||
| faComment, | |||||
| faCog, | |||||
| faCompress, | |||||
| faCrown, | |||||
| faDesktop, | |||||
| faExpand, | |||||
| faHandPaper, | |||||
| faHeadphones, | |||||
| faMicrophone, | |||||
| faMicrophoneSlash, | |||||
| faMicrophoneAlt, | |||||
| faPowerOff, | |||||
| faUser, | |||||
| faUsers, | |||||
| faVideo, | |||||
| faVideoSlash, | |||||
| faVolumeMute | |||||
| } from '@fortawesome/free-solid-svg-icons' | |||||
| // Register only these icons we need | |||||
| library.add( | library.add( | ||||
| faComment, | require('@fortawesome/free-solid-svg-icons/faComment').definition, | ||||
| faCog, | require('@fortawesome/free-solid-svg-icons/faCompress').definition, | ||||
| faCompress, | require('@fortawesome/free-solid-svg-icons/faCrown').definition, | ||||
| faCrown, | require('@fortawesome/free-solid-svg-icons/faDesktop').definition, | ||||
| faDesktop, | require('@fortawesome/free-solid-svg-icons/faExpand').definition, | ||||
| faExpand, | require('@fortawesome/free-solid-svg-icons/faHand').definition, | ||||
| faHandPaper, | require('@fortawesome/free-solid-svg-icons/faHeadphones').definition, | ||||
| faHeadphones, | require('@fortawesome/free-solid-svg-icons/faGear').definition, | ||||
| faMicrophone, | require('@fortawesome/free-solid-svg-icons/faKey').definition, | ||||
| faMicrophoneSlash, | require('@fortawesome/free-solid-svg-icons/faMicrophone').definition, | ||||
| faMicrophoneAlt, | require('@fortawesome/free-solid-svg-icons/faMicrophoneLines').definition, | ||||
| faPowerOff, | require('@fortawesome/free-solid-svg-icons/faMicrophoneSlash').definition, | ||||
| faUser, | require('@fortawesome/free-solid-svg-icons/faPowerOff').definition, | ||||
| faUsers, | require('@fortawesome/free-solid-svg-icons/faUser').definition, | ||||
| faVideo, | require('@fortawesome/free-solid-svg-icons/faUsers').definition, | ||||
| faVideoSlash, | require('@fortawesome/free-solid-svg-icons/faVideo').definition, | ||||
| faVolumeMute | require('@fortawesome/free-solid-svg-icons/faVideoSlash').definition, | ||||
| require('@fortawesome/free-solid-svg-icons/faVolumeMute').definition, | |||||
| ) | ) | ||||
| let roomRequest | let roomRequest | ||||
| let statsRequest | let statsRequest | ||||
| const authHeader = 'X-Meet-Auth-Token' | const authHeader = 'X-Meet-Auth-Token' | ||||
| export default { | export default { | ||||
| components: { | components: { | ||||
| ▲ Show 20 Lines • Show All 425 Lines • Show Last 20 Lines | |||||