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 |