Bilibili-Evolved/min/record-live-danmaku.vue.min.js
2020-02-22 11:45:31 +08:00

1 line
3.2 KiB
JavaScript

(()=>{return(e,r)=>{const o=`<div class=live-danmaku-recorder :class={opened}><div class=header><div class=title>记录弹幕</div><div class=close @click="opened = false"><icon type=mdi icon=close></icon></div></div><div class=record-stats>已记录{{danmakus.length}}条弹幕</div><div class=toggle-record @click="isRecording = !isRecording"><template v-if=isRecording><icon type=mdi icon=square></icon>记录中</template><template v-else><icon type=mdi icon=circle></icon>开始记录</template></div><div class=exports><div class=export-xml @click=exportXML()>导出XML</div><div class=export-ass @click=exportASS()>导出ASS</div></div></div>`;r.applyStyleFromText(`.live-danmaku-recorder{position:fixed;top:100%;left:0;transform:translateX(8px) translateY(calc(-100% - 8px)) scale(.95);opacity:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;padding:16px;z-index:1000;background-color:#fff;box-shadow:rgba(0,0,0,.2) 0 4px 8px 0;border-radius:8px}.live-danmaku-recorder.opened{transform:translateX(8px) translateY(calc(-100% - 8px));opacity:1;pointer-events:initial}body.dark .live-danmaku-recorder{background-color:#222}.live-danmaku-recorder,.live-danmaku-recorder *{transition:.2s ease-out}.live-danmaku-recorder .header{display:flex;align-items:center;align-self:stretch;padding-bottom:8px}.live-danmaku-recorder .header .title{flex-grow:1;font-weight:700;font-size:15px;color:#000;padding-right:16px}body.dark .live-danmaku-recorder .header .title{color:#fff}.live-danmaku-recorder .header .close{cursor:pointer}.live-danmaku-recorder .header .close .be-icon{font-size:20px}.live-danmaku-recorder .header .close:hover{color:var(--theme-color)}.live-danmaku-recorder .record-stats{margin-top:16px;margin-bottom:8px}.live-danmaku-recorder .toggle-record{display:flex;align-items:center;padding:8px;margin-bottom:16px;background-color:var(--theme-color);color:var(--foreground-color);cursor:pointer;border-radius:8px}.live-danmaku-recorder .toggle-record .be-icon{font-size:14px;margin-right:8px}.live-danmaku-recorder .exports{align-self:stretch}.live-danmaku-recorder .exports>*{border-radius:8px;cursor:pointer;padding:8px;text-align:center;white-space:nowrap;background-color:#8882}.live-danmaku-recorder .exports>:hover{background-color:#8884}.live-danmaku-recorder .exports .export-ass{margin-top:8px}`,"record-live-danmaku-style");return{export:Object.assign({template:o},{components:{Icon:()=>r.importAsync("icon.vue")},data(){return{isRecording:false,danmakus:[],opened:false}},async mounted(){const{LiveSocket:e}=await r.importAsync("live-socket");const o=new e(parseInt(document.URL.match(/live\.bilibili\.com\/(\d+)/)[1]));o.addEventListener("danmaku",e=>{if(this.isRecording){console.log(e.detail.content);this.danmakus.push(e.detail)}});await o.start()},methods:{getXML(){const e=this.danmakus.map(e=>{const r=e.content.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;");return`<d p="${fixed(e.time/1e3,3)},${e.type},${e.fontSize},${e.color},${e.sendTime},0,${e.userHash},0">${r}</d>`});const r=`\n<?xml version="1.0" encoding="UTF-8"?>\n<i>\n ${e.join("\n ")}\n</i>\n`.trim();return r},exportXML(){console.log(this.getXML())},async exportASS(){const e=this.getXML();console.log(e)}}})}}})();