modify ui

src/index.ts

@@ -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

 // 由 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>    `
+  <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',()=>{
+  // 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('数据序列已上传至服务器');
-      stopEvent()
+    },100)
+    
   })
 }