// ==UserScript== // @name bilibili同传man弹幕字幕显示 // @namespace https://space.bilibili.com/13525042 // @version 0.4 // @description 匹配直播中同传man的弹幕以字幕形式显示 // @author wetor (www.wetor.top) // @match *://live.bilibili.com/* // @run-at document-end // @grant GM_addStyle // @grant GM_setValue // @grant GM_getValue // @grant GM_registerMenuCommand // @require http://code.jquery.com/jquery-1.7.2.min.js // @downloadURL https://update.greasyfork.icu/scripts/402286/bilibili%E5%90%8C%E4%BC%A0man%E5%BC%B9%E5%B9%95%E5%AD%97%E5%B9%95%E6%98%BE%E7%A4%BA.user.js // @updateURL https://update.greasyfork.icu/scripts/402286/bilibili%E5%90%8C%E4%BC%A0man%E5%BC%B9%E5%B9%95%E5%AD%97%E5%B9%95%E6%98%BE%E7%A4%BA.meta.js // ==/UserScript== /* 此脚本根据 “Bilibili上下弹幕变字幕” 改写，原作者信息如下 @name Bilibili上下弹幕变字幕 @namespace https://space.bilibili.com/68391#!/ @version 2.0 @description 用于突出显示B站的顶部弹幕与底部弹幕，使其呈现Youtube字幕的效果。适用于一些有字幕弹幕的生肉视频。 @author 剧情帝 */ /* 字幕样式来自bilibili CC字幕 */ (function() { 'use strict'; let style = GM_addStyle(''); let $configPanel; let historySub = []; initCss(); SetCss(); SetTextShadow(); CreateConfigPanel(); GM_registerMenuCommand('Bilibili字幕样式设置', ToggleConfigPanel); function initCss(){ var new_element = document.createElement("style"); new_element.innerHTML =( `.bilibili-player-video-subtitle { position: absolute; width: 100%; height: 100%; overflow: visible; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; z-index: 12; pointer-events: none; text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px; } .subtitle-position { position: absolute; left: 5%; width: 90%; max-height: 83%; text-align: center; } .subtitle-position .subtitle-wrap { display: inline-block; } .subtitle-item-text { position: relative; white-space: normal; cursor: move; pointer-events: auto; padding: 0 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 2px; line-height: normal; font-family: none; word-wrap: break-word; }`); document.body.appendChild(new_element); } function SetCss() { for(var i=0;i<2;i++){ if(style.sheet.cssRules.length > 0){ style.sheet.deleteRule(0); } } let css1=` .subtitle-position-custom { ${If_Html(GM_getValue('position', 'top') == 'down', `bottom: 20px;`)} ${If_Html(GM_getValue('position', 'top') == 'top', `top: 20px;`)} font-size: ${ GM_getValue('fontsize', 0)}px; ${If_Html(GM_getValue('fontsize', 0) == 0, 'font-size:unset;')} ${If_Html( GM_getValue('color', 'original') !== 'original', `color: ${ GM_getValue('color', 'original')};`)} opacity: ${ GM_getValue('textAlpha', 0.8)} ; }`; let css2=` .subtitle-item-text-custom{ ${If_Html( GM_getValue('showBackground', false), `background-color: rgba(0,0,0,0);`)} ${If_Html( GM_getValue('showBackground', true), `background-color: rgba(0,0,0,${ GM_getValue('backgroundAlpha', 0.75)});`)} } `; //console.log($('#js-player-decorator .bilibili-live-player-video-area').height() - (Number(GM_getValue('fontsize', 25))+8 ) * 3); //style.sheet.insertRule(css); style.sheet.insertRule(css1,0); style.sheet.insertRule(css2,1); } function If_Html(statement, html1, html2 = '') { return statement ? html1: html2; } function CreateConfigPanel() { $configPanel = $(`
同传字幕设置

✖

`); if($(".has-stardust").length === 0){ //旧版播放器，加入新播放器调色盘的css $configPanel.append(``); } //sub-enable $("input[name=sub-enable]", $configPanel).prop('checked', GM_getValue('enable', true)).change(e=>{ GM_setValue('enable', $(e.target).prop('checked')); if($(e.target).prop('checked')) $('.bilibili-player-video-subtitle').css('display',''); else $('.bilibili-player-video-subtitle').css('display','none'); }); $("#btn-default", $configPanel).click(()=>{ $('#match-id').val('(.*?)【(.*?)(】|$)'); //console.log($('#match-id').val()) GM_setValue('match', $('#match-id').val()); }); $("#btn-save", $configPanel).click(()=>{ GM_setValue('match', $('#match-id').val()); }); $("input[name=match]", $configPanel).val( GM_getValue('match', '(.*?)【(.*?)(】|$)')).change(e=>{ GM_setValue('match', e.target.value); }); $("select[name=sub-lines]", $configPanel).val( GM_getValue('lines', 3)).change(e=>{ GM_setValue('lines', e.target.value); }); $("select[name=sub-order]", $configPanel).val( GM_getValue('order', 'forward')).change(e=>{ GM_setValue('order', e.target.value); }); $("select[name=sub-position]", $configPanel).val( GM_getValue('position', 'top')).change(e=>{ GM_setValue('position', e.target.value); SetCss(); }); $("select[name=size]", $configPanel).val( GM_getValue('fontsize', 0)).change(e=>{ GM_setValue('fontsize', e.target.value); SetCss(); }); $("input[name=background]", $configPanel).prop('checked', GM_getValue('showBackground', true)).change(e=>{ GM_setValue('showBackground', $(e.target).prop('checked')); SetCss(); }); $("input[name=background-alpha]", $configPanel).val( GM_getValue('backgroundAlpha', 0.75)).change(e=>{ GM_setValue('backgroundAlpha', e.target.value); SetCss(); }); SetColor( GM_getValue('color', 'original'), false); //初始化颜色选框与色盘 $("select[name=color]", $configPanel).change(e=>{ SetColor( e.target.value); }); $("input[name=text-alpha]", $configPanel).val( GM_getValue('textAlpha', 0.80)).change(e=>{ GM_setValue('textAlpha', e.target.value); SetCss(); }); $(".bui-color-picker-option", $configPanel).click(e=>{ SetColor( $(e.target).data('value')); }); let $buiInputInput = $(".bui-input-input", $configPanel); $buiInputInput.on('input', e=>{ if( /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test( $buiInputInput.val())){ $buiInputInput.css('background-color', 'unset'); SetColor( $buiInputInput.val()); } else{ $buiInputInput.css('background-color', 'hsla(0, 100%, 50%, 0.2)'); } }); $configPanel.click(e=>{ e.stopPropagation(); }); $(".close", $configPanel).click(()=>{ $configPanel.hide(); }); $('body').append( $configPanel).click(()=>{ $configPanel.hide(); }); } function SetColor( color, setCss = true) { let $selectColor = $("select[name=color]", $configPanel); let $buiColorPickerMask = $(".bui-color-picker-mask", $configPanel); let $buiInputInput = $(".bui-input-input", $configPanel); let $buiColorPickerDisplay = $(".bui-color-picker-display", $configPanel); if(color === 'original'){ $selectColor.val('original'); $buiColorPickerMask.show(); $buiInputInput.val( '#').css('background-color', 'unset'); $buiColorPickerDisplay.css('background', '#fff'); if(setCss){ GM_setValue('color', color); SetCss(); } } else if(color === 'selected'){ $selectColor.val('selected'); $buiColorPickerMask.hide(); } else{ $selectColor.val('selected'); $buiColorPickerMask.hide(); $buiInputInput.val( color); $buiColorPickerDisplay.css('background', color); if(setCss){ GM_setValue('color', color); SetCss(); } } } function ToggleConfigPanel() { if($configPanel.css('display') === 'none'){ $configPanel.show(); } else{ $configPanel.hide(); } } function CalLight (rgb) { rgb = rgb.replace('rgb(', ''); rgb = rgb.replace(')', ''); rgb = rgb.split(', '); return ((parseInt(rgb[0]) * 0.3 + parseInt(rgb[1]) * 0.6 + parseInt(rgb[2]) * 0.1) / 255); } function SetTextShadow() { let $videoDanmaku; //监测弹幕变化 let damnuObserver = new MutationObserver( records => { let $currentDanmu; records.map( record =>{ for (let i = record.addedNodes.length - 1; i >= 0; i--) { if(record.addedNodes[i].nodeName === '#text'){ $currentDanmu = $(record.addedNodes[i].parentNode); } else{ $currentDanmu = $(record.addedNodes[i]); } var danmaku = $currentDanmu.attr('data-danmaku'); var showSub = ''; if(danmaku){ var tran = danmaku.match(GM_getValue('match',"(.*?)【(.*?)(】|$)")); if(tran){ if(tran[1]) showSub = tran[1]+'：'+tran[2]; else showSub = tran[2]; } } if(showSub){ historySub.push(showSub); while(historySub.length>GM_getValue('lines',3)){ historySub.shift(); } showSub=''; var j; if(GM_getValue('order', 'forward') == 'backward'){ for(j=0;j"+historySub[j]+"
"; else showSub=showSub+``+historySub[j]+"
"; } }else if(GM_getValue('order', 'forward') == 'forward'){ //上方 for(j=historySub.length-1;j>=0;j--){ if(j==historySub.length-1) showSub=showSub+""+historySub[j]+"
"; else showSub=showSub+``+historySub[j]+"
"; } } $(".subtitle-group").html(showSub); } } }); }); //等待弹幕图层的加载 let damunContainerWaiter = new MutationObserver( records => { let $damunContainer = $('#chat-history-list'); if($damunContainer.length > 0){ //弹幕图层加载完毕 damunContainerWaiter.disconnect(); damnuObserver.observe($damunContainer[0], {'childList':true, 'subtree':true}); //var html="
"; var html=`
`; $("#js-player-decorator .bilibili-live-player-video-danmaku").html(html+$("#js-player-decorator .bilibili-live-player-video-danmaku").html()); } }); if($("#chat-history-list").length > 0){ damunContainerWaiter.observe($("#chat-history-list")[0], {'childList':true, 'subtree':true}); } } // Your code here... })();