Skip to content

Y
Y Recorder
Commit e5965933 authored by yangbowen.x's avatar yangbowen.x
Browse files
Options

modify ui

parent 93b68087
Show whitespace changes
Inline Side-by-side
Showing with 48 additions and 14 deletions
src/index.ts
View file @ e5965933
......@@ -68,10 +68,8 @@ class SessionRecorder implements Recorder {
_warn("Element doesn't existsed!")
}
}
private pushToTrail = (record): void => {
if (!this.recording) return
const thisRecordTime = _now() - this.baseTime
record = { t: thisRecordTime, ...record }
......@@ -167,7 +165,7 @@ const fetchEvent = ({url,method='POST',body})=>{
}
const channel = new BroadcastChannel('y_record');
const playEvent = () => {
const startEvent = () => {
recorder.start()
// channel.postMessage('clear');
}
......@@ -199,8 +197,7 @@ const init = async() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/yrecord_sw.js', { scope: '/' });
}
playEvent()
createUI({ stopEvent })
createUI({ startEvent, stopEvent })
}
init()
src/tools/ui.ts
View file @ e5965933
// 由 https://html2js.esstudio.site/ 转译 ./ui.html 生成
interface EventType {
startEvent: () => void
stopEvent: () => void
}
export default function createUI({stopEvent }: EventType) {
export default function createUI({startEvent,stopEvent }: EventType) {
let ele = document.createElement('div')
ele.setAttribute('id','y-record')
ele.innerHTML = ` <div id="y-record-send" style="position: fixed;z-index: 999999;bottom: 20px;right: 10px; width: 150px;">
<div id="y-record-content" style="display: flex;align-items: center;cursor: pointer;">
<svg id="y-record-svg" t="1653461226743" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1431" width="40" height="40"><path d="M940 512H792V412c76.8 0 139-62.2 139-139 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 34.8-28.2 63-63 63H232c-34.8 0-63-28.2-63-63 0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 76.8 62.2 139 139 139v100H84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h148v96c0 6.5 0.2 13 0.7 19.3C164.1 728.6 116 796.7 116 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-44.2 23.9-82.9 59.6-103.7 6 17.2 13.6 33.6 22.7 49 24.3 41.5 59 76.2 100.5 100.5 28.9 16.9 61 28.8 95.3 34.5 4.4 0 8-3.6 8-8V484c0-4.4 3.6-8 8-8h60c4.4 0 8 3.6 8 8v464.2c0 4.4 3.6 8 8 8 34.3-5.7 66.4-17.6 95.3-34.5 41.5-24.3 76.2-59 100.5-100.5 9.1-15.5 16.7-31.9 22.7-49C812.1 793.1 836 831.8 836 876c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8 0-79.3-48.1-147.4-116.7-176.7 0.4-6.4 0.7-12.8 0.7-19.3v-96h148c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" p-id="1432" fill="#8C1815"></path><path d="M304 280h416c4.4 0 8-3.6 8-8 0-40-8.8-76.7-25.9-108.1-17.2-31.5-42.5-56.8-74-74C596.7 72.8 560 64 520 64h-16c-40 0-76.7 8.8-108.1 25.9-31.5 17.2-56.8 42.5-74 74C304.8 195.3 296 232 296 272c0 4.4 3.6 8 8 8z" p-id="1433" fill="#8C1815"></path></svg>
<span id="y-record-span" style="color: #8C1815;margin-left: 10px;"> BUG 上传</span>
ele.innerHTML = ` <div style="position: fixed;z-index: 999999;bottom: 20px;right: 10px; width: 150px;">
<div id="y-record-start" style="display: flex;align-items: center;cursor: pointer;">
<svg t="1662619630510" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2680" width="40" height="40"><path d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m196.546667 500.493333l-266.666667 176A37.333333 37.333333 0 0 1 384 688V336.033333a37.333333 37.333333 0 0 1 57.893333-31.16l266.666667 176a37.333333 37.333333 0 0 1 0 62.32z" fill="#8C1815" p-id="2681"></path></svg>
<span style="color: #8C1815;margin-left: 10px;user-select:none;"> 故障现场录制</span>
</div>
<div id="y-record-end" style="display: none;align-items: center;cursor: pointer;">
<svg t="1662619679568" class="icon" viewBox="0 0 1040 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3751" width="40" height="40"><path d="M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0z m208 716c0 2.2-1.8 4-4 4H308c-2.2 0-4-1.8-4-4V308c0-2.2 1.8-4 4-4h408c2.2 0 4 1.8 4 4v408z" p-id="3752" fill="#8C1815"></path></svg>
<span style="color: #8C1815;margin-left: 10px;user-select:none;"> 结束录制</span>
</div>
</div> `
document.body.appendChild(ele)
const btn = document.getElementById('y-record-send');
btn.addEventListener('click',()=>{
alert('数据序列已上传至服务器');
// const btn = document.getElementById('y-record-send');
// btn.addEventListener('click',()=>{
// alert('数据序列已上传至服务器');
// stopEvent()
// })
var tempStyle = document.createElement('style');
tempStyle.type = 'text/css';
tempStyle.innerHTML=`#y-record-end {
animation: 1.5s linear infinite fadeInOut;
}
@keyframes fadeInOut {
0% { opacity: 1; }
50% { opacity: 0.2; }
100% { opacity: 1; }
}`;
document.getElementsByTagName('head').item(0).appendChild(tempStyle);
const btnStart = document.getElementById('y-record-start');
const btnEnd = document.getElementById('y-record-end');
btnStart.addEventListener('click',()=>{
startEvent()
btnStart.style.display = 'none';
btnEnd.style.display = 'flex';
})
btnEnd.addEventListener('click',()=>{
btnStart.style.display = 'flex';
btnEnd.style.display = 'none';
stopEvent()
setTimeout(()=>{
alert('数据序列已上传至服务器');
},100)
})
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment