mirror of
https://github.com/tl-open-source/tl-rtc-file.git
synced 2025-09-26 19:41:16 +08:00
b1c62419aa
feat: video face mode feat: change nickname feat: update self connect css feat: docker-compose inner env fix: some lang error
1259 lines
83 KiB
HTML
1259 lines
83 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" id="iamtsm">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>tl-rtc-file</title>
|
|
|
|
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
|
|
<link rel="stylesheet" href="/static/layui/css/admin.css" media="all">
|
|
<link rel="stylesheet" href="/css/comm.min.css" media="all">
|
|
<link rel="stylesheet" href="/css/index.min.css" media="all">
|
|
<link rel="stylesheet" href="/static/css/swiper-bundle.min.css" media="all">
|
|
<link rel="stylesheet" href="/static/css/default.min.css">
|
|
<link rel="stylesheet" href="/static/css/pdf_viewer.min.css">
|
|
<script type="text/javascript" src="/static/js/swiper-bundle.min.js"></script>
|
|
<script type="text/javascript" src="/static/js/adapter.js"></script>
|
|
<script type="text/javascript" src="/static/js/socket.io.js"></script>
|
|
<script type="text/javascript" src="/static/js/vue.min.js"></script>
|
|
<script type="text/javascript" src="/static/js/axios.js"></script>
|
|
<script type="text/javascript" src="/static/js/clipboard.min.js"></script>
|
|
<script type="text/javascript" src="/static/js/highlight.min.js"></script>
|
|
<script type="text/javascript" src="/static/js/pdf.min.js"></script>
|
|
<script type="text/javascript" src="/static/js/pdf.worker.min.js"></script>
|
|
<script type="text/javascript" src="/static/js/pdf_viewer.min.js"></script>
|
|
<script type="text/javascript" src="/static/js/jszip.min.js"></script>
|
|
<script type="text/javascript" src="/static/js/docx-preview.min.js"></script>
|
|
<script type="text/javascript" src="/static/js/qrcode.min.js"></script>
|
|
<script type="text/javascript" src="/static/layui/font-ext/iconfont.js"></script>
|
|
<link href="/image/44826979.png" rel="shortcut icon" type="image/x-icon">
|
|
<style>
|
|
.icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: -0.15em;
|
|
fill: currentColor;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<script>
|
|
window.Bus = new Vue({});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="tl-rtc-file-app" v-cloak>
|
|
|
|
<div class="tl-rtc-file-notification-container" id="notificationContainer"></div>
|
|
|
|
<!-- 顶部图标 -->
|
|
<div class="tl-rtc-file-header-tool">
|
|
<a :title="lang.disclaimer" @click="openDisclaimer">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;margin-right: 10px;">
|
|
<use xlink:href="#icon-rtc-file-jinggao"></use>
|
|
</svg>
|
|
</a>
|
|
<a :title="lang.relay_on" id="useTurn" v-show="switchData.openUseTurnIcon && useTurn" @click="useTurnMsg">
|
|
<svg class="icon" aria-hidden="true" style="width: 20px;height: 20px;margin-right: 10px;">
|
|
<use xlink:href="#icon-rtc-file-yunfuwuqi"></use>
|
|
</svg>
|
|
</a>
|
|
<a :title="network" id="currentNetwork" @click="networkMsg" v-show="switchData.openNetworkIcon">
|
|
<svg class="icon" aria-hidden="true" v-show="network === '2g'"
|
|
style="width: 20px;height: 20px;margin-right: 10px;">
|
|
<use xlink:href="#icon-rtc-file-two-g"></use>
|
|
</svg>
|
|
<svg class="icon" aria-hidden="true" v-show="network === '3g'"
|
|
style="width: 20px;height: 20px;margin-right: 10px;">
|
|
<use xlink:href="#icon-rtc-file-three-g"></use>
|
|
</svg>
|
|
<svg class="icon" aria-hidden="true" v-show="network === '4g'"
|
|
style="width: 20px;height: 20px;margin-right: 10px;">
|
|
<use xlink:href="#icon-rtc-file-four-g"></use>
|
|
</svg>
|
|
<svg class="icon" aria-hidden="true" v-show="network === '5g'"
|
|
style="width: 20px;height: 20px;margin-right: 10px;">
|
|
<use xlink:href="#icon-rtc-file-five-g"></use>
|
|
</svg>
|
|
<svg class="icon" aria-hidden="true" v-show="network === 'wifi'"
|
|
style="scale: 1.3;width: 20px;height: 20px;margin-right: 10px;">
|
|
<use xlink:href="#icon-rtc-file-WIFI"></use>
|
|
</svg>
|
|
</a>
|
|
<a :title="lang.other_language" id="language">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;margin-right: 10px;">
|
|
<use xlink:href="#icon-rtc-file-duoyuyan"></use>
|
|
</svg>
|
|
</a>
|
|
<a :title="lang.timer" style="position: relative;top: -3px;">
|
|
<b style="transition: color 0.8s;margin-right: 5px;" id="screenShareTimes" v-show="isScreenShare">
|
|
{{lang.sharing}}: {{screenShareTimes < 10 ? '0' + screenShareTimes :
|
|
screenShareTimes}}{{lang.second}} </b>
|
|
<b style="transition: color 0.8s;margin-right: 5px;" id="videoShareTimes" v-show="isVideoShare">
|
|
{{lang.videoing}}: {{videoShareTimes < 10 ? '0' + videoShareTimes :
|
|
videoShareTimes}}{{lang.second}} </b>
|
|
<b style="transition: color 0.8s;margin-right: 5px;" id="liveShareTimes"
|
|
v-show="isLiveShare && owner">
|
|
{{lang.living}}: {{liveShareTimes < 10 ? '0' + liveShareTimes :
|
|
liveShareTimes}}{{lang.second}} </b>
|
|
<b style="transition: color 0.8s;margin-right: 5px;" id="audioShareTimes"
|
|
v-show="isAudioShare && owner">
|
|
{{lang.audioing}}: {{audioShareTimes < 10 ? '0' + audioShareTimes :
|
|
audioShareTimes}}{{lang.second}} </b>
|
|
<b style="transition: color 0.8s;margin-right: 5px;" id="screenTimes"></b>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 侧边图标 -->
|
|
<div class="tl-rtc-file-side-tool">
|
|
|
|
<a :title="lang.notice" @click="clickNotice" v-show="switchData.openNotice">
|
|
<i class="layui-icon layui-icon-notice">
|
|
<span v-show="switchData.noticeMsgList && switchData.noticeMsgList.length > 0"
|
|
class="layui-badge tl-rtc-file-msg-dot"
|
|
style="right: 7px;top: 20px; width: 7px; height: 7px;"></span>
|
|
</i>
|
|
</a>
|
|
|
|
<a :title="lang.home" href="/home.html">
|
|
<i class="layui-icon layui-icon-home"></i>
|
|
</a>
|
|
|
|
<a :title="lang.share_link" @click="shareUrl" id="shareUrl" v-show="switchData.openShareRoom">
|
|
<i class="layui-icon layui-icon-share"></i>
|
|
</a>
|
|
|
|
<a :title="lang.give_coffee" @click="coffee">
|
|
<svg class="icon" aria-hidden="true" style="width: 24px;height: 24px;margin-right: 10px;">
|
|
<use xlink:href="#icon-rtc-file-hongbao"></use>
|
|
</svg>
|
|
</a>
|
|
|
|
<a :title="lang.log" @click="clickLogs">
|
|
<i class="layui-icon layui-icon-about"></i>
|
|
</a>
|
|
|
|
<a :title="lang.setting" @click="setting()" v-show="switchDataGet">
|
|
<i id="setting" class="layui-icon layui-icon-set"></i>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<!-- 顶部标题 -->
|
|
<div class="tl-rtc-file-header-intro">
|
|
<div class="tl-rtc-file-header-intro-txt">{{lang.note_website_for_learing}}</div>
|
|
<div class="tl-rtc-file-header-intro-qq">{{lang.qq}} : <a target="_blank"
|
|
href="https://jq.qq.com/?_wv=1027&k=TKCwMBjN">624214498</a> </div>
|
|
<div class="tl-rtc-file-header-user-online">
|
|
<svg viewBox="0 0 1024 1024" p-id="4241">
|
|
<path
|
|
d="M512 277.333333a234.666667 234.666667 0 1 0 0 469.333334 234.666667 234.666667 0 0 0 0-469.333334z"
|
|
p-id="4242" fill="#1afa29"></path>
|
|
</svg>
|
|
{{lang.online}} : {{allManCount}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 发文件/文字 -->
|
|
<div class="layui-row swiper-container tl-rtc-file-send-file-txt-tool">
|
|
<div class="swiper-wrapper">
|
|
<div class="layui-col-xs6 swiper-slide" style="text-align: center;">
|
|
<div class="tl-rtc-file-send-file-tool" :class="!hasManInRoom ? 'layui-disabled' : ''">
|
|
<div>
|
|
<i class="layui-icon layui-icon-release tl-rtc-file-send-file-tool-i-one"></i>
|
|
<i class="layui-icon layui-icon-release tl-rtc-file-send-file-tool-i-two"></i>
|
|
<i class="layui-icon layui-icon-release tl-rtc-file-send-file-tool-i-three" :style="{
|
|
left: sendFileRecoderList.length > 0 ? '10px' :'0'
|
|
}"></i>
|
|
<span v-show="sendFileRecoderList.length > 0" style="position: relative;right: -9px;"
|
|
class="layui-badge tl-rtc-file-msg-dot layui-anim layui-anim-rotate layui-anim-loop">
|
|
{{Math.min(sendFileRecoderList.length, 99)}}
|
|
</div>
|
|
<div>
|
|
<button v-show="hasManInRoom" @click="clickSendFile" type="button"
|
|
class="layui-btn tl-rtc-file-send-file-tool-send">{{lang.send_file}}</button>
|
|
<button v-show="!hasManInRoom" @click="clickSendFile" type="button"
|
|
class="layui-btn tl-rtc-file-send-file-tool-send layui-disabled">{{lang.send_file}}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs6 swiper-slide" style="text-align: center;">
|
|
<div class="tl-rtc-file-send-txt-tool">
|
|
<div>
|
|
<i class="layui-icon layui-icon-reply-fill tl-rtc-file-send-txt-tool-i-one"></i>
|
|
<i class="layui-icon layui-icon-reply-fill tl-rtc-file-send-txt-tool-i-two"></i>
|
|
<i class="layui-icon layui-icon-reply-fill tl-rtc-file-send-txt-tool-i-three" :style="{
|
|
left: receiveChatRoomList.length > 0 ? '10px' :'0'
|
|
}"></i>
|
|
<span v-show="receiveChatRoomList.length > 0" style="position: relative;right: -7px;"
|
|
class="layui-badge tl-rtc-file-msg-dot layui-anim layui-anim-rotate layui-anim-loop">
|
|
{{Math.min(receiveChatRoomList.length, 99)}}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<button @click="openChatingRoom" type="button"
|
|
class="layui-btn tl-rtc-file-send-txt-tool-send">{{lang.send_text}}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 工具功能 -->
|
|
<div class="layui-row swiper-container tl-rtc-file-tool-list" style="margin-top: 30px; padding-bottom: 20px;">
|
|
<div class="swiper-wrapper">
|
|
<div class="layui-col-xs3 swiper-slide" @click="openChatingComm"
|
|
:class="switchData.openCommRoom ? '':'tl-rtc-file-tool-disabled'">
|
|
<div class="tl-rtc-file-tool" :class="clientWidth < 450 ? 'tl-rtc-file-tool-mobile' : ''">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-chat"></use>
|
|
</svg>
|
|
<b class="tl-rtc-file-tool-title" :class="clientWidth < 450 ? 'tl-rtc-file-tool-title-mobile' : ''">{{lang.chat_comm}}</b>
|
|
<span v-show="receiveChatCommList.length > 0" class="layui-badge tl-rtc-file-msg-dot"
|
|
style="right: 2px; top: 2px; width: 7px; height: 7px;position: relative;"></span>
|
|
<!-- <svg class="icon tl-rtc-file-msg-dot" aria-hidden="true" style="width: 20px;height: 20px;">
|
|
<use xlink:href="#icon-rtc-file-remenhot"></use> -->
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs3 swiper-slide" @click="startScreenShare"
|
|
:class="switchData.openScreenShare ? '':'tl-rtc-file-tool-disabled'">
|
|
<div class="tl-rtc-file-tool" v-if="isScreenShare" :class="clientWidth < 450 ? 'tl-rtc-file-tool-mobile' : ''">
|
|
<svg id="screenShareIcon" class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-guaduandianhua"></use>
|
|
</svg>
|
|
<b class="tl-rtc-file-tool-title" :class="clientWidth < 450 ? 'tl-rtc-file-tool-title-mobile' : ''">{{lang.screen_sharing}}</b>
|
|
</div>
|
|
<div class="tl-rtc-file-tool" v-else :class="clientWidth < 450 ? 'tl-rtc-file-tool-mobile' : ''">
|
|
<svg id="screenShareIcon" class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-pingmugongxiang"></use>
|
|
</svg>
|
|
<b class="tl-rtc-file-tool-title" :class="clientWidth < 450 ? 'tl-rtc-file-tool-title-mobile' : ''">{{lang.screen_sharing}}</b>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs3 swiper-slide" @click="startVideoShare"
|
|
:class="switchData.openVideoShare ? '':'tl-rtc-file-tool-disabled'">
|
|
<div class="tl-rtc-file-tool" v-if="isVideoShare" :class="clientWidth < 450 ? 'tl-rtc-file-tool-mobile' : ''">
|
|
<svg id="videoShareIcon" class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-guaduandianhua"></use>
|
|
</svg>
|
|
<b class="tl-rtc-file-tool-title" :class="clientWidth < 450 ? 'tl-rtc-file-tool-title-mobile' : ''">{{lang.video_call}}</b>
|
|
</div>
|
|
<div class="tl-rtc-file-tool" v-else :class="clientWidth < 450 ? 'tl-rtc-file-tool-mobile' : ''">
|
|
<svg id="videoShareIcon" class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-shexiangtou"></use>
|
|
</svg>
|
|
<b class="tl-rtc-file-tool-title" :class="clientWidth < 450 ? 'tl-rtc-file-tool-title-mobile' : ''">{{lang.video_call}}</b>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs3 swiper-slide" @click="startLiveShare"
|
|
:class="switchData.openLiveShare ? '':'tl-rtc-file-tool-disabled'">
|
|
<div class="tl-rtc-file-tool " v-if="isLiveShare" :class="clientWidth < 450 ? 'tl-rtc-file-tool-mobile' : ''">
|
|
<svg id="liveShareIcon" class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-guaduandianhua"></use>
|
|
</svg>
|
|
<b class="tl-rtc-file-tool-title" :class="clientWidth < 450 ? 'tl-rtc-file-tool-title-mobile' : ''">{{lang.start_live}}</b>
|
|
</div>
|
|
<div class="tl-rtc-file-tool" v-else :class="clientWidth < 450 ? 'tl-rtc-file-tool-mobile' : ''">
|
|
<svg id="liveShareIcon" class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-zhibo"></use>
|
|
</svg>
|
|
<b class="tl-rtc-file-tool-title" :class="clientWidth < 450 ? 'tl-rtc-file-tool-title-mobile' : ''">{{lang.start_live}}</b>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs3 swiper-slide" @click="startAudioShare"
|
|
:class="switchData.openAudioShare ? '':'tl-rtc-file-tool-disabled'">
|
|
<div class="tl-rtc-file-tool " v-if="isAudioShare" :class="clientWidth < 450 ? 'tl-rtc-file-tool-mobile' : ''">
|
|
<svg id="audioShareIcon" class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-guaduandianhua"></use>
|
|
</svg>
|
|
<b class="tl-rtc-file-tool-title" :class="clientWidth < 450 ? 'tl-rtc-file-tool-title-mobile' : ''">{{lang.start_audio}}</b>
|
|
</div>
|
|
<div class="tl-rtc-file-tool" v-else :class="clientWidth < 450 ? 'tl-rtc-file-tool-mobile' : ''">
|
|
<svg id="audioShareIcon" class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-yuyin"></use>
|
|
</svg>
|
|
<b class="tl-rtc-file-tool-title" :class="clientWidth < 450 ? 'tl-rtc-file-tool-title-mobile' : ''">{{lang.start_audio}}</b>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs3 swiper-slide" @click="getCodeFile"
|
|
:class="switchData.openGetCodeFile ? '':'tl-rtc-file-tool-disabled'">
|
|
<div class="tl-rtc-file-tool" :class="clientWidth < 450 ? 'tl-rtc-file-tool-mobile' : ''">
|
|
<svg id="liveShareIcon" class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-wangpan"></use>
|
|
</svg>
|
|
<b class="tl-rtc-file-tool-title" :class="clientWidth < 450 ? 'tl-rtc-file-tool-title-mobile' : ''">{{lang.pickup_code}}</b>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs3 swiper-slide" @click="openRemoteDraw"
|
|
:class="switchData.openRemoteDraw ? '':'tl-rtc-file-tool-disabled'">
|
|
<div class="tl-rtc-file-tool" :class="clientWidth < 450 ? 'tl-rtc-file-tool-mobile' : ''">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-shiwu-huabi"></use>
|
|
</svg>
|
|
<b class="tl-rtc-file-tool-title" :class="clientWidth < 450 ? 'tl-rtc-file-tool-title-mobile' : ''">{{lang.remote_draw}}</b>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs3 swiper-slide" @click="openLocalScreen"
|
|
:class="switchData.openScreen ? '':'tl-rtc-file-tool-disabled'">
|
|
<div class="tl-rtc-file-tool" :class="clientWidth < 450 ? 'tl-rtc-file-tool-mobile' : ''">
|
|
<svg id="screenIcon" class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-luzhi"></use>
|
|
</svg>
|
|
<b class="tl-rtc-file-tool-title" :class="clientWidth < 450 ? 'tl-rtc-file-tool-title-mobile' : ''">{{lang.screen_recording}}</b>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs3 swiper-slide" @click="startPassword"
|
|
:class="switchData.openPasswordRoom ? '':'tl-rtc-file-tool-disabled'">
|
|
<div class="tl-rtc-file-tool" :class="clientWidth < 450 ? 'tl-rtc-file-tool-mobile' : ''">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-mima"></use>
|
|
</svg>
|
|
<b class="tl-rtc-file-tool-title" :class="clientWidth < 450 ? 'tl-rtc-file-tool-title-mobile' : ''">{{lang.password_room}}</b>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs3 swiper-slide" @click="openaiChat"
|
|
:class="switchData.openAiChat ? '':'tl-rtc-file-tool-disabled'">
|
|
<div class="tl-rtc-file-tool" :class="clientWidth < 450 ? 'tl-rtc-file-tool-mobile' : ''">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-24px2x"></use>
|
|
</svg>
|
|
<b class="tl-rtc-file-tool-title" :class="clientWidth < 450 ? 'tl-rtc-file-tool-title-mobile' : ''" style="letter-spacing: 0px;">{{lang.chat_gpt}}</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-scrollbar"></div>
|
|
</div>
|
|
|
|
<!-- 自己 -->
|
|
<div class="layui-row" style="margin-top: 30px;" v-show="socketId !== 0">
|
|
<div class="layui-col-xs12 tl-rtc-file-user-list">
|
|
<div class="tl-rtc-file-user" style="background: #f6fdff;">
|
|
<div class="tl-rtc-file-user-body" @click="changeNickName()">
|
|
<div>
|
|
<svg class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-jiangbei-"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="tl-rtc-file-user-body-left">
|
|
<b class="tl-rtc-file-user-body-left-nick">
|
|
<b v-show="owner" style="color: #51d788;">【{{roomTypeName}}】-</b>
|
|
<b v-show="owner" style="color: #7375e9;">【{{lang.owner}}】-</b>【{{lang.self}}】- {{nickName}}
|
|
</b>
|
|
<b class="tl-rtc-file-user-body-left-id">
|
|
{{socketId}}
|
|
</b>
|
|
</div>
|
|
</div>
|
|
<div class="tl-rtc-file-user-body-right">
|
|
<i v-show="sendFileRecoderHistoryList.length > 0" :title="lang.file_send_record"
|
|
class="layui-icon layui-icon-time" @click="clickSendFileHistory"></i>
|
|
<i v-show="sendFileRecoderHistoryList.length === 0" :title="lang.file_send_record"
|
|
class="layui-icon layui-icon-time layui-disabled" @click="clickSendFileHistory"></i>
|
|
<span v-show="sendFileRecoderHistoryList.length > 0" style="left: 20px;"
|
|
class="layui-badge tl-rtc-file-msg-dot layui-anim layui-anim-rotate layui-anim-loop">
|
|
{{Math.min(sendFileRecoderHistoryList.length, 99)}}
|
|
</span>
|
|
<i v-show="receiveFileRecoderList.length > 0" :title="lang.file_receive"
|
|
class="layui-icon layui-icon-print" @click="clickReceiveFile"></i>
|
|
<i v-show="receiveFileRecoderList.length === 0" :title="lang.file_receive"
|
|
class="layui-icon layui-icon-print layui-disabled" @click="clickReceiveFile"></i>
|
|
<span v-show="receiveFileRecoderList.length > 0"
|
|
class="layui-badge tl-rtc-file-msg-dot layui-anim layui-anim-rotate layui-anim-loop">
|
|
{{Math.min(receiveFileRecoderList.length, 99)}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 远端连接 -->
|
|
<div class="layui-row" style="position: relative;">
|
|
<div class="layui-col-xs12 tl-rtc-file-user-list" v-for="remote in remoteMap" @click="showRemoteUser(remote)">
|
|
<div class="tl-rtc-file-user">
|
|
<div class="tl-rtc-file-user-body">
|
|
<svg class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-icon-test"></use>
|
|
</svg>
|
|
<div class="tl-rtc-file-user-body-left">
|
|
<b class="tl-rtc-file-user-body-left-nick">
|
|
<b v-show="remote.owner" style="color: #7375e9;">【{{lang.owner}}】- </b>
|
|
{{remote.nickName}} - {{remote.id}}
|
|
</b>
|
|
<b class="tl-rtc-file-user-body-left-id">
|
|
<svg class="icon" aria-hidden="true" style="width: 12px;height: 12px;">
|
|
<use xlink:href="#icon-rtc-file-kongzhuangzhongduan"></use>
|
|
</svg> : {{remote.langMode}} - {{remote.ua}} - {{remote.network}} -
|
|
<svg class="icon" aria-hidden="true" style="width: 12px;height: 12px;">
|
|
<use xlink:href="#icon-rtc-file-yunfuwuqi"></use>
|
|
</svg> :
|
|
<b v-if="iceOk(remote.iceConnectionState)" style="font-weight: bold;color: #69d31e;">{{remote.iceConnectionState}} - {{remote.p2pMode}}</b>
|
|
<b v-else style="font-weight: bold;color: red;">{{remote.iceConnectionState}} - {{remote.p2pMode}}</b>
|
|
</b>
|
|
</div>
|
|
</div>
|
|
<div class="tl-rtc-file-user-body-right">
|
|
<i :title="lang.send_text" @click="startChatRoomSingle(event, remote)"
|
|
class="layui-icon layui-icon-reply-fill"></i>
|
|
<span v-show="remote.receiveChatRoomSingleList.length > 0" style="right: -7px;"
|
|
class="layui-badge tl-rtc-file-msg-dot layui-anim layui-anim-rotate layui-anim-loop">
|
|
{{Math.min(remote.receiveChatRoomSingleList.length, 99)}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 进入房间 -->
|
|
<div class="tl-rtc-file-bottom">
|
|
<div v-show="socketId === 0">
|
|
<input :style="{
|
|
width: openRoomInput ? '96%' : '0',
|
|
paddingLeft: openRoomInput ? (clientWidth < 450 ? '100px' : '155px') : '15px',
|
|
height: clientWidth < 450 ? '40px' : '48px',
|
|
left: '2%',
|
|
}" type="text" maxlength="15" class="layui-input tl-rtc-file-create-room-input" v-model="roomId"
|
|
:placeholder="lang.input_room_num">
|
|
<button :style="(clientWidth < 450) ? 'height:40px;' : '' " class="tl-rtc-file-create-room-btn"
|
|
@click="createFileRoom">
|
|
<i v-show="clientWidth > 450" class="layui-icon layui-icon-search"></i>
|
|
<b :style="(clientWidth < 450) ? 'font-size:12px;' : '' ">{{lang.create_join_room}}</b>
|
|
</button>
|
|
</div>
|
|
<div v-show="socketId !== 0">
|
|
<button :style="(clientWidth < 450) ? 'height:40px;' : '' " class="tl-rtc-file-exit-room-btn"
|
|
@click="exitRoom">
|
|
<i v-show="clientWidth >= 450" class="layui-icon layui-icon-logout"></i>
|
|
<b :style="(clientWidth < 450) ? 'font-size:12px;' : '' ">{{lang.exit_room}} {{roomId}}</b>
|
|
</button>
|
|
</div>
|
|
|
|
<div v-show="socketId === 0" class="tl-rtc-file-receive-list-icon">
|
|
<i v-show="receiveFileRecoderList.length > 0" :title="lang.file_box"
|
|
class="layui-icon layui-icon-print tl-rtc-file-receive-list-icon" @click="clickReceiveFile"></i>
|
|
<i v-show="receiveFileRecoderList.length === 0" :title="lang.file_box"
|
|
class="layui-icon layui-icon-print tl-rtc-file-receive-list-icon layui-disabled"
|
|
@click="clickReceiveFile"></i>
|
|
<span v-show="receiveFileRecoderList.length > 0" style="top: -40px; right: 0px;"
|
|
class="layui-badge tl-rtc-file-msg-dot layui-anim layui-anim-rotate layui-anim-loop">
|
|
{{Math.min(receiveFileRecoderList.length, 99)}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 待发送文件列表 -->
|
|
<div id="send-file-list" :class="isMediaing? 'isMediaing': '' " class="tl-rtc-file-mask-send-file-list"
|
|
:style="{top: sendFileMaskHeightNum + '%'}">
|
|
<div class="layui-card" style="border-radius: 15px;">
|
|
<div class="layui-card-header">
|
|
{{lang.wait_sending}}({{chooseFileList.length}})- {{lang.total}}:{{Object.keys(remoteMap).length}} -
|
|
{{lang.wait_sending}}:{{sendFileRecoderList.length}}
|
|
<i @click="clickSendFile" class="layui-icon layui-icon-close"
|
|
style="cursor: pointer; right: 10px;position: absolute;"></i>
|
|
</div>
|
|
<div class="layui-upload-drag tl-rtc-file-choose-file-list" id="chooseFileList">
|
|
<i class="layui-icon layui-icon-upload" style="color:black;"></i>
|
|
<p style="color: #00000087; font-weight: bold;">{{lang.click_choose_file}}</p>
|
|
</div>
|
|
|
|
<div class="layui-row tl-rtc-file-send-list-all"
|
|
:style="{height: sendFileRecoderHeight+'px',overflowY: (sendFileRecoderList.length > 1 ? 'auto' : 'none') }">
|
|
<div class="layui-col-xs12 tl-rtc-file-send-list send-file-item"
|
|
v-for="file, index in sendFileRecoderList" :id="'send-file-item'+index">
|
|
<div class="tl-rtc-file-send" :style="{'--progress': file.progress + '%'}">
|
|
<div class="tl-rtc-file-send-body">
|
|
|
|
<svg v-if="typeInArr(['image','png','jpg','webp','gif','jpeg','svg'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-tupian"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['text','json','log'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-txt1"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['video','mp4','mpeg','audio','wav','quicktime'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-shipin"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['zip','7z','rar','compressed'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-yasuobao"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['pdf'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Pdf"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['excel','sheet'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Excel"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['word'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Word"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['powerpoint'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-PPT"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['javascript','css','java','php','c++','python','html'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-chengxu"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['sql'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-shujuku"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['conf'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-peizhiwenjian"></use>
|
|
</svg>
|
|
|
|
<svg v-else class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-weizhiwenjian"></use>
|
|
</svg>
|
|
|
|
<div class="tl-rtc-file-send-body-left">
|
|
<b class="tl-rtc-file-send-body-left-nick">
|
|
{{lang.name}}: {{file.name}}, {{lang.type}}: {{file.type === '' ?
|
|
lang.unknown_type : file.type}}, {{lang.size}}: {{getFileSizeStr(file.size)}}
|
|
</b>
|
|
<b class="tl-rtc-file-send-body-left-id">
|
|
{{lang.send_to}}: {{file.nickName}} - {{file.id}} - {{file.progress}}% -
|
|
{{file.cost}}s
|
|
</b>
|
|
<b class="tl-rtc-file-send-body-left-icon">
|
|
<a v-show="!file.done && file.progress > 0" :title="lang.sending">
|
|
<i
|
|
class="layui-icon layui-disabled layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
|
|
<span class="layui-disabled"
|
|
style="top: -2px; margin-right: 5px; left: -5px; position: relative;">[{{lang.sending}}]</span>
|
|
</a>
|
|
|
|
<a v-show="!file.done && file.progress === 0 && !isSending && !isSendAllWaiting"
|
|
:title="lang.send_alone" @click="sendFileToSingle(file)">
|
|
<i class="layui-icon layui-icon-release"></i>
|
|
<span
|
|
style="top: -2px; margin-right: 5px; left: -5px; position: relative;">[{{lang.send}}]</span>
|
|
</a>
|
|
|
|
<a v-show="!file.done && file.progress === 0 && (isSending || isSendAllWaiting)"
|
|
:title="lang.send_alone">
|
|
<i class="layui-icon layui-icon-release layui-disabled"></i>
|
|
<span class="layui-disabled"
|
|
style="top: -2px; margin-right: 5px; left: -5px; position: relative;">[{{lang.wait}}]</span>
|
|
</a>
|
|
|
|
<a v-show="file.done" :title="lang.sent">
|
|
<i class="layui-icon layui-icon-release layui-disabled"></i>
|
|
<span class="layui-disabled"
|
|
style="top: -2px; margin-right: 5px; left: -5px; position: relative;">[{{lang.sent}}]</span>
|
|
</a>
|
|
|
|
<a :title="lang.preview_file" @click="previewSendFile(file.index)">
|
|
<i class="layui-icon layui-icon-camera" style="font-size: 18px;"></i>
|
|
<span
|
|
style="top: -2px; margin-right: 5px; left: -5px; position: relative;">[{{lang.preview}}]</span>
|
|
</a>
|
|
|
|
<a v-show="file.upload === 'wait'" :title="lang.save"
|
|
@click="prepareCodeFile(file)">
|
|
<i class="layui-icon layui-icon-upload-circle" style="font-size: 15px;"></i>
|
|
<span
|
|
style="top: -2px; margin-right: 5px; left: -5px; position: relative;">[{{lang.save}}]</span>
|
|
</a>
|
|
|
|
<a v-show="file.upload === 'uploading'" :title="lang.saving">
|
|
<i class="layui-icon layui-disabled layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"
|
|
style="font-size: 15px;"></i>
|
|
<span class="layui-disabled"
|
|
style="top: -2px; margin-right: 5px; left: -5px; position: relative;">[{{lang.saving}}]</span>
|
|
</a>
|
|
|
|
<a v-show="file.upload === 'fail'" :title="lang.save_failed">
|
|
<i class="layui-icon layui-icon-close-fill layui-disabled"
|
|
style="font-size: 15px;"></i>
|
|
<span class="layui-disabled"
|
|
style="top: -2px; margin-right: 5px; left: -5px; position: relative;">[{{lang.save_failed}}]</span>
|
|
</a>
|
|
|
|
<a v-show="file.upload === 'done'" :title="lang.saved">
|
|
<i class="layui-icon layui-icon-ok-circle layui-disabled"
|
|
style="font-size: 15px;"></i>
|
|
<span class="layui-disabled"
|
|
style="top: -2px; margin-right: 5px; left: -5px; position: relative;">[{{lang.saved}}]</span>
|
|
</a>
|
|
|
|
<a v-show="file.upload === 'done'" :title="lang.view_pickup_code"
|
|
@click="getCodeFileCode(file)">
|
|
<i class="layui-icon layui-icon-share" style="font-size: 15px;"></i>
|
|
<span
|
|
style="top: -2px; margin-right: 5px; left: -5px; position: relative;">[{{lang.view_pickup_code}}]</span>
|
|
</a>
|
|
</b>
|
|
</div>
|
|
</div>
|
|
<div class="tl-rtc-file-send-body-right">
|
|
<i v-show="file.progress === 0 || file.progress === 100"
|
|
class="layui-icon layui-icon-close" @click="deleteSendFile(index)"
|
|
style="top: -26px;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 一键发送 -->
|
|
<div>
|
|
<div v-show="canSendFile">
|
|
<button v-if="!isSending && !isSendAllWaiting" class="tl-rtc-file-send-file-list-btn"
|
|
@click="initSendFile">
|
|
<i class="layui-icon layui-icon-release"></i>
|
|
<div>{{lang.send_all}}</div>
|
|
</button>
|
|
<button v-else class="tl-rtc-file-send-file-list-btn layui-disabled">
|
|
<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
|
|
<div>{{lang.sending}}...</div>
|
|
</button>
|
|
</div>
|
|
<div v-show="sendFileRecoderHistoryList.length > 0">
|
|
<button class="tl-rtc-file-send-file-history-list-btn" @click="clickSendFileHistory">
|
|
<i class="layui-icon layui-icon-time"></i>
|
|
<div>{{lang.sending_history}}</div>
|
|
<span style="top:0;right: 0;"
|
|
class="layui-badge tl-rtc-file-msg-dot layui-anim layui-anim-rotate layui-anim-loop">
|
|
{{Math.min(sendFileRecoderHistoryList.length, 99)}}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div v-show="chooseFileList.length > 0">
|
|
<button class="tl-rtc-file-send-file-choose-list-btn" @click="clickChooseFile" :style="{
|
|
bottom: sendFileRecoderHistoryList.length > 0 ? '14%' : '2%'
|
|
}">
|
|
<i class="layui-icon layui-icon-templeate-1"></i>
|
|
<div>{{lang.selected_file}}</div>
|
|
<span style="top:0;right: 0;"
|
|
class="layui-badge tl-rtc-file-msg-dot layui-anim layui-anim-rotate layui-anim-loop">
|
|
{{Math.min(chooseFileList.length, 99)}}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 已选文件列表 -->
|
|
<div id="send-file-list-choose" :class="isMediaing? 'isMediaing': '' " class="tl-rtc-file-mask-send-file-list"
|
|
:style="{top: chooseFileMaskHeightNum + '%'}">
|
|
<div class="layui-card" style="border-radius: 15px;">
|
|
<div class="layui-card-header">
|
|
{{lang.cur_selected_file}} - {{lang.total}}({{chooseFileList.length}})
|
|
<i @click="clickChooseFile" class="layui-icon layui-icon-close"
|
|
style="cursor: pointer; right: 10px;position: absolute;"></i>
|
|
</div>
|
|
<div class="layui-row tl-rtc-file-send-list-all"
|
|
:style="{height: chooseFileHeight+'px',overflowY: (chooseFileList.length > 1 ? 'auto' : 'none') }">
|
|
<div class="layui-col-xs12 tl-rtc-file-send-list" v-for="file, index in chooseFileList">
|
|
<div class="tl-rtc-file-send" :style="{'--progress': file.progress + '%'}">
|
|
<div class="tl-rtc-file-send-body">
|
|
|
|
<svg v-if="typeInArr(['image','png','jpg','webp','gif','jpeg','svg'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-tupian"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['text','json','log'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-txt1"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['video','mp4','mpeg','audio','wav','quicktime'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-shipin"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['zip','7z','rar','compressed'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-yasuobao"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['pdf'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Pdf"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['excel','sheet'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Excel"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['word'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Word"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['powerpoint'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-PPT"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['javascript','css','java','php','c++','python','html'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-chengxu"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['sql'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-shujuku"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['conf'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-peizhiwenjian"></use>
|
|
</svg>
|
|
|
|
<svg v-else class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-weizhiwenjian"></use>
|
|
</svg>
|
|
|
|
<div class="tl-rtc-file-send-body-left">
|
|
<b class="tl-rtc-file-send-body-left-nick">
|
|
{{lang.name}}: {{file.name}}, {{lang.type}}: {{file.type === '' ?
|
|
lang.unknown_type : file.type}}, {{lang.size}}: {{getFileSizeStr(file.size)}}
|
|
</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 发送文件历史记录列表 -->
|
|
<div id="send-file-list-history" :class="isMediaing? 'isMediaing': '' " class="tl-rtc-file-mask-send-file-list"
|
|
:style="{top: sendFileHistoryMaskHeightNum + '%'}">
|
|
<div class="layui-card" style="border-radius: 15px;">
|
|
<div class="layui-card-header">
|
|
{{lang.sending_history}} - {{lang.total}}({{sendFileRecoderHistoryList.length}})
|
|
<i @click="clickSendFileHistory" class="layui-icon layui-icon-close"
|
|
style="cursor: pointer; right: 10px;position: absolute;"></i>
|
|
</div>
|
|
<div class="layui-row tl-rtc-file-send-list-all"
|
|
:style="{height: sendFileRecoderHistoryHeight+'px',overflowY: (sendFileRecoderHistoryList.length > 1 ? 'auto' : 'none') }">
|
|
<div class="layui-col-xs12 tl-rtc-file-send-list" v-for="file, index in sendFileRecoderHistoryList">
|
|
<div class="tl-rtc-file-send" :style="{'--progress': file.progress + '%'}">
|
|
<div class="tl-rtc-file-send-body">
|
|
|
|
<svg v-if="typeInArr(['image','png','jpg','webp','gif','jpeg','svg'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-tupian"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['text','json','log'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-txt1"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['video','mp4','mpeg','audio','wav','quicktime'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-shipin"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['zip','7z','rar','compressed'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-yasuobao"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['pdf'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Pdf"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['excel','sheet'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Excel"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['word'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Word"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['powerpoint'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-PPT"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['javascript','css','java','php','c++','python','html'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-chengxu"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['sql'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-shujuku"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['conf'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-peizhiwenjian"></use>
|
|
</svg>
|
|
|
|
<svg v-else class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-weizhiwenjian"></use>
|
|
</svg>
|
|
|
|
<div class="tl-rtc-file-send-body-left">
|
|
<b class="tl-rtc-file-send-body-left-nick">
|
|
{{lang.name}}: {{file.name}}, {{lang.type}}: {{file.type === '' ?
|
|
lang.unknown_type : file.type}}, {{lang.size}}: {{getFileSizeStr(file.size)}}
|
|
</b>
|
|
<b class="tl-rtc-file-send-body-left-id">
|
|
{{lang.send_to}}: {{file.nickName}} - {{file.id}} - {{file.progress}}% -
|
|
{{file.cost}}s
|
|
</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 已接收文件列表 -->
|
|
<div id="receive-file-list" :class="isMediaing? 'isMediaing': '' " class="tl-rtc-file-mask-send-file-list"
|
|
:style="{top: receiveFileMaskHeightNum + '%'}">
|
|
<div class="layui-card" style="border-radius: 15px;">
|
|
<div class="layui-card-header">
|
|
{{lang.receive_file_list}} - {{lang.total}}:{{receiveFileRecoderList.length}}
|
|
<i @click="clickReceiveFile" class="layui-icon layui-icon-close"
|
|
style="cursor: pointer; right: 10px;position: absolute;"></i>
|
|
</div>
|
|
<div class="layui-row tl-rtc-file-send-list-all"
|
|
:style="{height: receiveFileHeight+'px',overflowY: (receiveFileRecoderList.length > 1 ? 'auto' : 'none')}">
|
|
<div class="layui-col-xs12 tl-rtc-file-send-list" v-for="file in receiveFileRecoderList">
|
|
<div class="tl-rtc-file-send" :style="{'--progress': file.progress + '%'}">
|
|
<div class="tl-rtc-file-send-body">
|
|
|
|
<svg v-if="typeInArr(['image','png','jpg','webp','gif','jpeg','svg'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-tupian"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['text','json','log'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-txt1"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['video','mp4','mpeg','audio','wav','quicktime'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-shipin"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['zip','7z','rar','compressed'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-yasuobao"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['pdf'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Pdf"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['excel','sheet'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Excel"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['word'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Word"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['powerpoint'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-PPT"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['javascript','css','java','php','c++','python','html'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-chengxu"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['sql'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-shujuku"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['conf'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-peizhiwenjian"></use>
|
|
</svg>
|
|
|
|
<svg v-else class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-weizhiwenjian"></use>
|
|
</svg>
|
|
|
|
<div class="tl-rtc-file-send-body-left">
|
|
<b class="tl-rtc-file-send-body-left-nick">
|
|
{{lang.name}}: {{file.name}}, {{lang.type}}: {{file.type === '' ?
|
|
lang.unknown_type : file.type}}, {{lang.size}}: {{getFileSizeStr(file.size)}}
|
|
</b>
|
|
<b class="tl-rtc-file-send-body-left-id">
|
|
{{lang.file_from}}: {{file.nickName}} - {{file.id}} - {{file.progress}}% -
|
|
{{file.cost}}s
|
|
</b>
|
|
<b class="tl-rtc-file-send-body-left-icon">
|
|
<a :href="file.href" :download="file.name" :title="lang.download">
|
|
<i class="layui-icon layui-icon-download-circle"></i>
|
|
<span
|
|
style="top: -2px; margin-right: 5px; left: -5px; position: relative;">[{{lang.download}}]</span>
|
|
</a>
|
|
<a :title="lang.preview_file" @click="previewReceiveFile(file.index)">
|
|
<i class="layui-icon layui-icon-camera" style="font-size: 18px;"></i>
|
|
<span
|
|
style="top: -2px; margin-right: 5px; left: -5px; position: relative;">[{{lang.preview}}]</span>
|
|
</a>
|
|
</b>
|
|
</div>
|
|
</div>
|
|
<div class="tl-rtc-file-send-body-right">
|
|
<!-- <i class="layui-icon layui-icon-close" style="top: -26px;"></i> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 暂存文件列表 -->
|
|
<div id="code-file-list" :class="isMediaing? 'isMediaing': '' " class="tl-rtc-file-mask-send-file-list"
|
|
:style="{top: codeFileMaskHeightNum + '%'}">
|
|
<div class="layui-card" style="border-radius: 15px;">
|
|
<div class="layui-card-header">
|
|
{{lang.total_pickup_file}} - ({{receiveCodeFileList.length}})
|
|
<i @click="clickCodeFile()" class="layui-icon layui-icon-close"
|
|
style="cursor: pointer; right: 10px;position: absolute;"></i>
|
|
</div>
|
|
|
|
<div class="layui-row tl-rtc-file-send-list-all"
|
|
:style="{height: codeFileHeight+'px',overflowY: (receiveCodeFileList.length > 1 ? 'auto' : 'none') }">
|
|
<div class="layui-col-xs12 tl-rtc-file-send-list" v-for="file, index in receiveCodeFileList">
|
|
<div class="tl-rtc-file-send">
|
|
<div class="tl-rtc-file-send-body">
|
|
|
|
<svg v-if="typeInArr(['image','png','jpg','webp','gif','jpeg','svg'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-tupian"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['text','json','log'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-txt1"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['video','mp4','mpeg','audio','wav','quicktime'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-shipin"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['zip','7z','rar','compressed'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-yasuobao"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['pdf'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Pdf"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['excel','sheet'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Excel"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['word'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-Word"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['powerpoint'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-PPT"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['javascript','css','java','php','c++','python','html'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-chengxu"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['sql'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-shujuku"></use>
|
|
</svg>
|
|
|
|
<svg v-else-if="typeInArr(['conf'], file.type)" class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-peizhiwenjian"></use>
|
|
</svg>
|
|
|
|
<svg v-else class="icon" aria-hidden="true" style="width: 32px;height: 32px;">
|
|
<use xlink:href="#icon-rtc-file-weizhiwenjian"></use>
|
|
</svg>
|
|
|
|
<div class="tl-rtc-file-send-body-left">
|
|
<b class="tl-rtc-file-send-body-left-nick">
|
|
{{lang.name}}: {{file.name}} - {{lang.type}}: {{file.type === '' ?
|
|
lang.unknown_type : file.type}} - {{lang.size}}: {{getFileSizeStr(file.size)}} -
|
|
{{lang.pickup_code}}: {{file.code}}
|
|
</b>
|
|
<b class="tl-rtc-file-send-body-left-id">
|
|
{{lang.file_from}}: {{file.fromRoom}} - {{file.fromNickName}} - {{lang.type}}:
|
|
{{file.createTime}}
|
|
<a :href="file.download"
|
|
style="color:rgb(117 124 204); font-weight: bold;margin-left: 5px;">
|
|
[{{lang.click_download}}] </a>
|
|
</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 执行日志 -->
|
|
<div id="logMask" class="tl-rtc-file-mask-log-list" :style="{left: logMaskHeightNum + '%'}">
|
|
<div class="layui-col-sm2" style="width: 100%;">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">
|
|
{{lang.log}} - {{lang.total}}:{{filterLogs.length}}
|
|
<i @click="clickLogs" class="layui-icon layui-icon-close"
|
|
style="cursor: pointer; right: 10px;position: absolute;"></i>
|
|
</div>
|
|
<div class="layui-card-body tl-rtc-file-mask-log">
|
|
<input type="text" v-model="logsFilter" class="layui-input" :placeholder="lang.query_log">
|
|
</div>
|
|
</div>
|
|
<div class="layui-card">
|
|
<div :style="{height: logsHeight+'px',overflowY: 'auto'}">
|
|
<div class="layui-card-body tl-rtc-file-mask-log" v-for="log in filterLogs">
|
|
<div class="tl-rtc-file-mask-log-time">
|
|
<div>{{log.time}}</div>
|
|
<svg class="icon" aria-hidden="true" style="width: 16px;height: 16px;">
|
|
<use xlink:href="#icon-rtc-file-zhengque"></use>
|
|
</svg>
|
|
</div>
|
|
<div v-show="log.msg.length >= 500" class="tl-rtc-file-mask-log-msg"
|
|
style="max-height: 300px; overflow-y: auto;">
|
|
<b v-show="log.type === '【{{lang.sys_log}}】: '" style="color: #b54343;">{{log.type}}</b>
|
|
<b v-show="log.type === '【{{lang.op_log}}】: '"
|
|
style="color: cadetblue;">{{log.type}}</b>
|
|
{{log.msg}}
|
|
</div>
|
|
<div v-show="log.msg.length < 500" class="tl-rtc-file-mask-log-msg">
|
|
<b v-show="log.type === '【{{lang.sys_log}}】: '" style="color: #b54343;">{{log.type}}</b>
|
|
<b v-show="log.type === '【{{lang.op_log}}】: '"
|
|
style="color: cadetblue;">{{log.type}}</b>
|
|
{{log.msg}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 音视频 -->
|
|
<div id="videoMask" class="tl-rtc-file-mask-media-list" :style="{left: mediaVideoMaskHeightNum + '%'}">
|
|
<div class="layui-col-sm2" style="width: 100%;">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header"> {{lang.video_call}} </div>
|
|
</div>
|
|
<div class="layui-card">
|
|
<div :style="{height: logsHeight + 80 +'px',overflowY: 'auto'}">
|
|
<div class="layui-card-body">
|
|
<div class="tl-rtc-file-mask-media-container" id="mediaVideoRoomList">
|
|
<div style="text-align: center;font-weight: bold;">{{nickName}}</div>
|
|
<div class="tl-rtc-file-mask-media-video">
|
|
<video v-show="isCameraEnabled" id="selfMediaShareVideo"
|
|
preload="auto" autoplay="autoplay" x-webkit-airplay="true"
|
|
playsinline ="true" webkit-playsinline ="true" x5-video-player-type="h5"
|
|
x5-video-player-fullscreen="true" x5-video-orientation="portraint"></video>
|
|
<svg v-show="!isCameraEnabled" class="icon" aria-hidden="true" style="width: 100%;height: 100%;">
|
|
<use xlink:href="#icon-rtc-file-shexiangtou_guanbi"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="tl-rtc-file-mask-media-video-tool">
|
|
<div class="tl-rtc-file-mask-media-video-tool-item" @click="changeVideoShareMediaTrackAndStream()">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-xiangjifanzhuan"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="tl-rtc-file-mask-media-video-tool-item" @click="changeShareStreamSwitch('video','video')">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use v-if="isCameraEnabled" xlink:href="#icon-rtc-file-shexiangtou"></use>
|
|
<use v-else xlink:href="#icon-rtc-file-shexiangtou_guanbi"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="tl-rtc-file-mask-media-video-tool-item" @click="changeShareStreamSwitch('video','audio')">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use v-if="isAudioEnabled" xlink:href="#icon-rtc-file-maikefeng-XDY"></use>
|
|
<use v-else xlink:href="#icon-rtc-file-guanbimaikefeng"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="tl-rtc-file-mask-media-video-tool-item" @click="startVideoShare()">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-guaduandianhua"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 屏幕共享 -->
|
|
<div id="screenMask" class="tl-rtc-file-mask-media-list" :style="{left: mediaScreenMaskHeightNum + '%'}">
|
|
<div class="layui-col-sm2" style="width: 100%;">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="text-align: left;">
|
|
{{lang.screen_sharing}}
|
|
</div>
|
|
</div>
|
|
<div class="layui-card">
|
|
<div :style="{height: logsHeight + 80 +'px',overflowY: 'auto'}">
|
|
<div class="layui-card-body">
|
|
<div class="tl-rtc-file-mask-media-container" id="mediaScreenRoomList">
|
|
<div style="text-align: center;font-weight: bold;">{{nickName}}</div>
|
|
<div class="tl-rtc-file-mask-media-video">
|
|
<video v-show="isCameraEnabled" id="selfMediaShareScreen"
|
|
preload="auto" autoplay="autoplay" x-webkit-airplay="true"
|
|
playsinline ="true" webkit-playsinline ="true" x5-video-player-type="h5"
|
|
x5-video-player-fullscreen="true" x5-video-orientation="portraint"></video>
|
|
<svg v-show="!isCameraEnabled" class="icon" aria-hidden="true" style="width: 100%;height: 100%;">
|
|
<use xlink:href="#icon-rtc-file-guanbipingmu"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="tl-rtc-file-mask-media-video-tool">
|
|
<div class="tl-rtc-file-mask-media-video-tool-item" @click="changeShareStreamSwitch('screen','video')">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use v-if="isCameraEnabled" xlink:href="#icon-rtc-file-pingmugongxiang"></use>
|
|
<use v-else xlink:href="#icon-rtc-file-guanbipingmu"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="tl-rtc-file-mask-media-video-tool-item" @click="startScreenShare()">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-guaduandianhua"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 直播 -->
|
|
<div id="liveMask" class="tl-rtc-file-mask-media-list" :style="{left: mediaLiveMaskHeightNum + '%'}">
|
|
<div class="layui-col-sm2" style="width: 100%;">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="text-align: left;">
|
|
{{lang.start_live}} - {{owner ? lang.owner : lang.audience}}
|
|
</div>
|
|
</div>
|
|
<div class="layui-card">
|
|
<div :style="{height: logsHeight + 80 +'px',overflowY: 'auto'}">
|
|
<div class="layui-card-body">
|
|
<div class="tl-rtc-file-mask-media-container" id="mediaLiveRoomList">
|
|
<div v-show="isLiveShare && owner" style="text-align: center;font-weight: bold;">{{nickName}}</div>
|
|
<div class="tl-rtc-file-mask-media-video" v-show="owner">
|
|
<video v-show="isCameraEnabled" id="selfMediaShareLive"
|
|
preload="auto" autoplay="autoplay" x-webkit-airplay="true"
|
|
playsinline ="true" webkit-playsinline ="true" x5-video-player-type="h5"
|
|
x5-video-player-fullscreen="true" x5-video-orientation="portraint"></video>
|
|
<svg v-show="!isCameraEnabled" class="icon" aria-hidden="true" style="width: 100%;height: 100%;">
|
|
<use v-if="liveShareMode === 'video'" xlink:href="#icon-rtc-file-shexiangtou_guanbi"></use>
|
|
<use v-else xlink:href="#icon-rtc-file-guanbipingmu"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="tl-rtc-file-mask-media-video-tool" v-show="owner">
|
|
<div v-show="liveShareMode === 'video'" class="tl-rtc-file-mask-media-video-tool-item" @click="changeLiveVideoShareMediaTrackAndStream()">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-xiangjifanzhuan"></use>
|
|
</svg>
|
|
</div>
|
|
<div v-show="changeLiveShareMediaTrackAndStreamTime === 0" class="tl-rtc-file-mask-media-video-tool-item" @click="changeLiveShareMediaTrackAndStream()">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-fanzhuanjingtou"></use>
|
|
</svg>
|
|
</div>
|
|
<div v-show="changeLiveShareMediaTrackAndStreamTime > 0" class="tl-rtc-file-mask-media-video-tool-item layui-disabled" style="padding: 2px 10px 2px 10px">
|
|
{{changeLiveShareMediaTrackAndStreamTime}}
|
|
</div>
|
|
<div class="tl-rtc-file-mask-media-video-tool-item" @click="changeShareStreamSwitch('live', 'video')">
|
|
<svg v-if="liveShareMode === 'video'" class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use v-if="isCameraEnabled" xlink:href="#icon-rtc-file-shexiangtou"></use>
|
|
<use v-else xlink:href="#icon-rtc-file-shexiangtou_guanbi"></use>
|
|
</svg>
|
|
<svg v-else class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use v-if="isCameraEnabled" xlink:href="#icon-rtc-file-pingmugongxiang"></use>
|
|
<use v-else xlink:href="#icon-rtc-file-guanbipingmu"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="tl-rtc-file-mask-media-video-tool-item" @click="changeShareStreamSwitch('live','audio')">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use v-if="isAudioEnabled" xlink:href="#icon-rtc-file-maikefeng-XDY"></use>
|
|
<use v-else xlink:href="#icon-rtc-file-guanbimaikefeng"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="tl-rtc-file-mask-media-video-tool-item" @click="startLiveShare()">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-guaduandianhua"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 语音连麦 -->
|
|
<div id="audioMask" class="tl-rtc-file-mask-media-list" :style="{left: mediaAudioMaskHeightNum + '%'}">
|
|
<div class="layui-col-sm2" style="width: 100%;">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="text-align: left;">
|
|
{{lang.audio_sharing}}
|
|
</div>
|
|
</div>
|
|
<div class="layui-card">
|
|
<div :style="{height: logsHeight + 80 +'px',overflowY: 'auto'}">
|
|
<div class="layui-card-body">
|
|
<div class="tl-rtc-file-mask-media-container" id="mediaAudioRoomList">
|
|
<div style="text-align: center;font-weight: bold;">{{nickName}}</div>
|
|
<div class="tl-rtc-file-mask-media-video">
|
|
<video v-show="false" id="selfMediaShareAudio"
|
|
preload="auto" autoplay="autoplay" x-webkit-airplay="true"
|
|
playsinline ="true" webkit-playsinline ="true" x5-video-player-type="h5"
|
|
x5-video-player-fullscreen="true" x5-video-orientation="portraint"></video>
|
|
<svg v-show="isAudioEnabled" class="icon layui-anim layui-anim-scaleSpring layui-anim-loop" aria-hidden="true" style="width: 100%;height: 100%;animation-duration:.7s;max-width:50%;color:cadetblue;">
|
|
<use xlink:href="#icon-rtc-file-shengboyuyinxiaoxi"></use>
|
|
</svg>
|
|
<svg v-show="!isAudioEnabled" class="icon" aria-hidden="true" style="width: 100%;height: 100%;max-width:50%">
|
|
<use xlink:href="#icon-rtc-file-shengboyuyinxiaoxi"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="tl-rtc-file-mask-media-video-tool">
|
|
<div class="tl-rtc-file-mask-media-video-tool-item" @click="changeShareStreamSwitch('audio','audio')">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use v-if="isAudioEnabled" xlink:href="#icon-rtc-file-maikefeng-XDY"></use>
|
|
<use v-else xlink:href="#icon-rtc-file-guanbimaikefeng"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="tl-rtc-file-mask-media-video-tool-item" @click="startAudioShare()">
|
|
<svg class="icon" aria-hidden="true" style="width: 18px;height: 18px;">
|
|
<use xlink:href="#icon-rtc-file-guaduandianhua"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript" src="/js/language.min.js"></script>
|
|
<script type="text/javascript" src="/js/comm.min.js"></script>
|
|
<script type="text/javascript" src="/js/draw.min.js"></script>
|
|
<script type="text/javascript" src="/js/videoShare.min.js"></script>
|
|
<script type="text/javascript" src="/js/liveShare.min.js"></script>
|
|
<script type="text/javascript" src="/js/audioShare.min.js"></script>
|
|
<script type="text/javascript" src="/js/screen.min.js"></script>
|
|
<script type="text/javascript" src="/js/screenShare.min.js"></script>
|
|
<script type="text/javascript" src="/js/index.min.js"></script>
|
|
<script src="/static/layui/layui.js"></script>
|
|
<script>
|
|
|
|
layui.use([
|
|
'layedit', 'form', 'layer', 'laytpl', 'upload',
|
|
'dropdown', 'carousel', 'util', 'colorpicker',
|
|
'slider', 'dropdown', 'carousel'
|
|
], function () {
|
|
window.layer = layui.layer;
|
|
window.form = layui.form;
|
|
window.carousel = layui.carousel;
|
|
window.$ = layui.$;
|
|
window.layedit = layui.layedit;
|
|
window.laytpl = layui.laytpl;
|
|
window.upload = layui.upload;
|
|
window.dropdown = layui.dropdown;
|
|
window.carousel = layui.carousel;
|
|
window.util = layui.util;
|
|
window.colorpicker = layui.colorpicker;
|
|
window.slider = layui.slider;
|
|
window.dropdown = layui.dropdown;
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |