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"> | ||||
<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 btn-link link-audio" @click="switchSound" :disabled="!isPublisher()" title="Mute audio"> | ||||
<svg-icon icon="microphone"></svg-icon> | <svg-icon icon="microphone-slash"></svg-icon> | ||||
</button> | </button> | ||||
<button class="btn btn-link link-video" @click="switchVideo" :disabled="!isPublisher()" title="Mute video"> | <button class="btn btn-link link-video" @click="switchVideo" :disabled="!isPublisher()" title="Mute video"> | ||||
<svg-icon icon="video"></svg-icon> | <svg-icon icon="video-slash"></svg-icon> | ||||
</button> | </button> | ||||
<button class="btn btn-link link-screen text-danger" @click="switchScreen" :disabled="!canShareScreen || !isPublisher()" title="Share screen"> | <button class="btn btn-link link-screen text-danger" @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 btn-link link-hand text-danger" 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 btn-link 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 btn-link link-chat text-danger" @click="switchChat" title="Chat"> | ||||
<svg-icon icon="align-left"></svg-icon> | <svg-icon icon="comment"></svg-icon> | ||||
</button> | </button> | ||||
<button class="btn btn-link link-fullscreen closed hidden" @click="switchFullscreen" title="Full screen"> | <button class="btn btn-link 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 btn-link 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 btn-link link-options" v-if="isRoomOwner()" @click="roomOptions" title="Room options"> | ||||
▲ Show 20 Lines • Show All 145 Lines • ▼ Show 20 Lines | <script> | ||||
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' | ||||
// Register additional icons | // Register additional icons | ||||
import { library } from '@fortawesome/fontawesome-svg-core' | import { library } from '@fortawesome/fontawesome-svg-core' | ||||
import { | import { | ||||
faAlignLeft, | faComment, | ||||
faCog, | faCog, | ||||
faCompress, | faCompress, | ||||
faCrown, | faCrown, | ||||
faDesktop, | faDesktop, | ||||
faExpand, | faExpand, | ||||
faHandPaper, | faHandPaper, | ||||
faHeadphones, | faHeadphones, | ||||
faMicrophone, | faMicrophone, | ||||
faMicrophoneSlash, | |||||
faMicrophoneAlt, | faMicrophoneAlt, | ||||
faPowerOff, | faPowerOff, | ||||
faUser, | faUser, | ||||
faVideo, | faVideo, | ||||
faVideoSlash, | |||||
faVolumeMute | faVolumeMute | ||||
} from '@fortawesome/free-solid-svg-icons' | } from '@fortawesome/free-solid-svg-icons' | ||||
// Register only these icons we need | // Register only these icons we need | ||||
library.add( | library.add( | ||||
faAlignLeft, | faComment, | ||||
faCog, | faCog, | ||||
faCompress, | faCompress, | ||||
faCrown, | faCrown, | ||||
faDesktop, | faDesktop, | ||||
faExpand, | faExpand, | ||||
faHandPaper, | faHandPaper, | ||||
faHeadphones, | faHeadphones, | ||||
faMicrophone, | faMicrophone, | ||||
faMicrophoneSlash, | |||||
faMicrophoneAlt, | faMicrophoneAlt, | ||||
faPowerOff, | faPowerOff, | ||||
faUser, | faUser, | ||||
faVideo, | faVideo, | ||||
faVideoSlash, | |||||
faVolumeMute | faVolumeMute | ||||
) | ) | ||||
let roomRequest | let roomRequest | ||||
const authHeader = 'X-Meet-Auth-Token' | const authHeader = 'X-Meet-Auth-Token' | ||||
export default { | export default { | ||||
components: { | components: { | ||||
▲ Show 20 Lines • Show All 522 Lines • Show Last 20 Lines |