自建覆盖层显示双语：英文在上中文在下；零/负行距紧贴；独立背景；可调字号与垂直位置与行距；默认更大字号 130%。
// ==UserScript==
// @name Coursera 双语字幕 (覆盖层: 英上中下, 可调行距, 默认大字号)
// @namespace http://tampermonkey.net/
// @version 2025.9.16
// @description 自建覆盖层显示双语：英文在上中文在下；零/负行距紧贴；独立背景；可调字号与垂直位置与行距；默认更大字号 130%。
// @author 唐无诗
// @match *://*.coursera.org/*
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @license MIT
// ==/UserScript==
(function() {
'use strict';
/********* 可配置默认 *********/
const PRIMARY_LANG = 'en';
const SECONDARY_LANG = 'zh-CN';
const DEFAULT_BOTTOM_PERCENT= 8; // 英文行基线（底部偏移百分比）
const DEFAULT_FONT_SIZE = 130; // 初始更大字号
const DEFAULT_LINE_GAP_EM = -0.05; // 中英文之间的默认行距 (可为负数压紧)
const MIN_LINE_GAP_EM = -0.30;
const MAX_LINE_GAP_EM = 0.40;
const LINE_GAP_STEP = 0.05;
/********************************/
let isDualEnabled = GM_getValue('isDualEnabled', true);
let fontSizePercent = GM_getValue('fontSize', DEFAULT_FONT_SIZE);
let bottomOffsetPct = GM_getValue('bottomOffsetPct', DEFAULT_BOTTOM_PERCENT);
let lineGapEm = GM_getValue('lineGapEm', DEFAULT_LINE_GAP_EM);
let overlay, linePrimary, lineSecondary;
let videoEl = null;
let tracksBound = false;
injectBaseStyles();
observePage();
function injectBaseStyles() {
GM_addStyle(`
.dual-sub-overlay {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
z-index: 9999;
font-family: "Helvetica Neue", Arial, sans-serif;
white-space: pre-line;
}
.dual-sub-line {
display: inline-block;
background: rgba(0,0,0,0.75);
color: #fff;
font-weight: 400;
line-height: 1.20; /* 略减行高，整体更紧凑 */
padding: 0.22em 0.65em 0.18em; /* 上下不对称，进一步压缩竖向空间 */
margin: 0;
border-radius: 2px;
max-width: 90vw;
text-align: center;
box-sizing: border-box;
white-space: pre-line;
}
/* 第二行与第一行的间距用变量控制，可为负值 */
.dual-sub-line + .dual-sub-line {
margin-top: var(--dual-gap, 0);
}
/* 控制条样式 */
#custom-subtitle-controls-container {
display: flex;
align-items: center;
gap: 8px;
border-left: 1px solid #e0e0e0;
margin-left: 8px;
padding-left: 16px;
flex-wrap: wrap;
}
#custom-subtitle-controls-container button {
height: 32px;
padding: 0 10px;
cursor: pointer;
}
#custom-subtitle-controls-container span.value {
min-width: 48px;
text-align: center;
font-size: 13px;
}
/* 启用双语覆盖层时隐藏原生显示 */
.dual-sub-active .vjs-text-track-display {
display: none !important;
}
`);
}
function observePage() {
const mo = new MutationObserver(() => {
const v = document.querySelector('video');
if (v && v !== videoEl) {
videoEl = v;
setupVideo();
}
injectControlsIfNeeded();
});
mo.observe(document.body, { childList: true, subtree: true });
}
function setupVideo() {
if (!videoEl) return;
tracksBound = false;
const tryBind = () => {
if (!videoEl.textTracks || videoEl.textTracks.length === 0) return;
if (tracksBound) return;
tracksBound = true;
videoEl.addEventListener('timeupdate', refreshOverlay);
for (const track of videoEl.textTracks) {
track.addEventListener('cuechange', refreshOverlay);
}
applyMode();
buildOverlay();
refreshOverlay();
};
let attempts = 0;
const interval = setInterval(() => {
attempts++;
tryBind();
if (tracksBound || attempts > 30) clearInterval(interval);
}, 500);
}
function getTrackByLang(langCode) {
if (!videoEl || !videoEl.textTracks) return null;
return Array.from(videoEl.textTracks).find(t => (t.language || '').toLowerCase() === langCode.toLowerCase());
}
function applyMode() {
if (!videoEl) return;
const pTrack = getTrackByLang(PRIMARY_LANG);
const sTrack = getTrackByLang(SECONDARY_LANG);
if (isDualEnabled) {
if (pTrack) pTrack.mode = 'hidden';
if (sTrack) sTrack.mode = 'hidden';
addDualClass(true);
} else {
if (pTrack) pTrack.mode = 'showing';
if (sTrack) sTrack.mode = 'disabled';
addDualClass(false);
if (overlay) overlay.style.display = 'none';
}
}
function addDualClass(active) {
const playerWrap = findPlayerContainer();
if (!playerWrap) return;
if (active) playerWrap.classList.add('dual-sub-active');
else playerWrap.classList.remove('dual-sub-active');
}
function findPlayerContainer() {
if (!videoEl) return null;
let node = videoEl.parentElement;
while (node && node !== document.body) {
const style = window.getComputedStyle(node);
if (/(relative|absolute|fixed)/.test(style.position)) return node;
node = node.parentElement;
}
return videoEl.parentElement;
}
function buildOverlay() {
const container = findPlayerContainer();
if (!container) return;
if (!overlay) {
overlay = document.createElement('div');
overlay.className = 'dual-sub-overlay';
linePrimary = document.createElement('div');
lineSecondary = document.createElement('div');
linePrimary.className = 'dual-sub-line primary-line';
lineSecondary.className = 'dual-sub-line secondary-line';
overlay.appendChild(linePrimary);
overlay.appendChild(lineSecondary);
container.appendChild(overlay);
}
overlay.style.display = isDualEnabled ? 'flex' : 'none';
applyFontSize();
applyBottomOffset();
applyLineGap();
}
function getActiveMergedText(track) {
if (!track || !track.activeCues || track.activeCues.length === 0) return '';
const parts = [];
for (const cue of track.activeCues) {
if (cue && cue.text) parts.push(cue.text.trim());
}
return parts.join('\n');
}
function refreshOverlay() {
if (!isDualEnabled || !videoEl) return;
const pTrack = getTrackByLang(PRIMARY_LANG);
const sTrack = getTrackByLang(SECONDARY_LANG);
if (!overlay) buildOverlay();
const pText = getActiveMergedText(pTrack);
const sText = getActiveMergedText(sTrack);
if (pText) {
linePrimary.style.display = 'inline-block';
linePrimary.textContent = pText;
if (sText) {
lineSecondary.style.display = 'inline-block';
lineSecondary.textContent = sText;
} else {
lineSecondary.style.display = 'none';
lineSecondary.textContent = '';
}
} else if (sText) {
linePrimary.style.display = 'inline-block';
linePrimary.textContent = sText;
lineSecondary.style.display = 'none';
lineSecondary.textContent = '';
} else {
linePrimary.style.display = 'none';
lineSecondary.style.display = 'none';
}
}
function injectControlsIfNeeded() {
if (document.getElementById('custom-subtitle-controls-container')) return;
const coachBtn = document.querySelector('div[data-testid="coach-chat-launcher-container"]');
if (!coachBtn) return;
const host = coachBtn.parentElement?.parentElement?.parentElement;
if (!host) return;
const bar = document.createElement('div');
bar.id = 'custom-subtitle-controls-container';
const btnDual = document.createElement('button');
btnDual.textContent = isDualEnabled ? '双语: 开' : '双语: 关';
btnDual.onclick = () => {
isDualEnabled = !isDualEnabled;
GM_setValue('isDualEnabled', isDualEnabled);
btnDual.textContent = isDualEnabled ? '双语: 开' : '双语: 关';
applyMode();
buildOverlay();
refreshOverlay();
};
// 字号
const btnMinus = document.createElement('button'); btnMinus.textContent = '字号 -';
const sizeVal = document.createElement('span'); sizeVal.className='value'; sizeVal.textContent = fontSizePercent + '%';
const btnPlus = document.createElement('button'); btnPlus.textContent = '字号 +';
btnMinus.onclick = () => {
if (fontSizePercent > 50) {
fontSizePercent -= 10;
GM_setValue('fontSize', fontSizePercent);
sizeVal.textContent = fontSizePercent + '%';
applyFontSize();
}
};
btnPlus.onclick = () => {
fontSizePercent += 10;
GM_setValue('fontSize', fontSizePercent);
sizeVal.textContent = fontSizePercent + '%';
applyFontSize();
};
// 垂直位置
const btnPosDown = document.createElement('button'); btnPosDown.textContent = '位置 ↓';
const posVal = document.createElement('span'); posVal.className='value'; posVal.textContent = bottomOffsetPct + '%';
const btnPosUp = document.createElement('button'); btnPosUp.textContent = '位置 ↑';
btnPosDown.onclick = () => {
bottomOffsetPct = Math.max(0, bottomOffsetPct - 1);
GM_setValue('bottomOffsetPct', bottomOffsetPct);
posVal.textContent = bottomOffsetPct + '%';
applyBottomOffset();
};
btnPosUp.onclick = () => {
bottomOffsetPct = Math.min(25, bottomOffsetPct + 1);
GM_setValue('bottomOffsetPct', bottomOffsetPct);
posVal.textContent = bottomOffsetPct + '%';
applyBottomOffset();
};
// 行距（中英文之间距离）
const btnGapMinus = document.createElement('button'); btnGapMinus.textContent = '行距 -';
const gapVal = document.createElement('span'); gapVal.className='value'; gapVal.textContent = lineGapEm.toFixed(2);
const btnGapPlus = document.createElement('button'); btnGapPlus.textContent = '行距 +';
btnGapMinus.onclick = () => {
lineGapEm = Math.max(MIN_LINE_GAP_EM, +(lineGapEm - LINE_GAP_STEP).toFixed(2));
GM_setValue('lineGapEm', lineGapEm);
gapVal.textContent = lineGapEm.toFixed(2);
applyLineGap();
};
btnGapPlus.onclick = () => {
lineGapEm = Math.min(MAX_LINE_GAP_EM, +(lineGapEm + LINE_GAP_STEP).toFixed(2));
GM_setValue('lineGapEm', lineGapEm);
gapVal.textContent = lineGapEm.toFixed(2);
applyLineGap();
};
bar.appendChild(btnDual);
bar.appendChild(btnMinus);
bar.appendChild(sizeVal);
bar.appendChild(btnPlus);
bar.appendChild(btnPosDown);
bar.appendChild(posVal);
bar.appendChild(btnPosUp);
bar.appendChild(btnGapMinus);
bar.appendChild(gapVal);
bar.appendChild(btnGapPlus);
host.appendChild(bar);
}
function applyFontSize() {
if (!overlay) return;
overlay.style.fontSize = fontSizePercent + '%';
}
function applyBottomOffset() {
if (!overlay) return;
overlay.style.bottom = bottomOffsetPct + '%';
}
function applyLineGap() {
if (!overlay) return;
overlay.style.setProperty('--dual-gap', lineGapEm + 'em');
}
})();