mirrors/fcast
1
0
Fork 0
mirror of https://gitlab.com/futo-org/fcast.git synced 2025-06-24 21:25:23 +00:00
Code Activity

Fixed multiline subtitle rendering

Browse source
This commit is contained in:
Michael Hollister 2024-12-09 10:50:39 -06:00
parent 90e1f4de1a
commit 565579d202
2 changed files with 24 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

29
receivers/common/web/player/Renderer.ts
View file

@ -103,6 +103,8 @@ let playerPrevTime: number = 0;
let lastPlayerUpdateGenerationTime = 0; let lastPlayerUpdateGenerationTime = 0;
let isLive = false; let isLive = false;
let isLivePosition = false; let isLivePosition = false;
let captionsBaseHeight = 160;
let captionsContentHeight = 0;
function onPlay(_event, value: PlayMessage) { function onPlay(_event, value: PlayMessage) {
console.log("Handle play message renderer", JSON.stringify(value)); console.log("Handle play message renderer", JSON.stringify(value));
@ -190,6 +192,15 @@ function onPlay(_event, value: PlayMessage) {
subtitle.textContent = e.text; subtitle.textContent = e.text;
videoCaptions.appendChild(subtitle); videoCaptions.appendChild(subtitle);
captionsContentHeight = subtitle.getBoundingClientRect().height - 34;
const captionsHeight = captionsBaseHeight + captionsContentHeight;
if (player.isCaptionsEnabled()) {
videoCaptions.setAttribute("style", `display: block; bottom: ${captionsHeight}px;`);
} else {
videoCaptions.setAttribute("style", `display: none; bottom: ${captionsHeight}px;`);
}
}); });
dashPlayer.on(dashjs.MediaPlayer.events.CUE_EXIT, (e: any) => { dashPlayer.on(dashjs.MediaPlayer.events.CUE_EXIT, (e: any) => {
@ -416,30 +427,36 @@ function playerCtrlStateUpdate(event: PlayerControlEvent) {
break; break;
} }
case PlayerControlEvent.UiFadeOut: case PlayerControlEvent.UiFadeOut: {
document.body.style.cursor = "none"; document.body.style.cursor = "none";
playerControls.setAttribute("style", "opacity: 0"); playerControls.setAttribute("style", "opacity: 0");
captionsBaseHeight = 75;
const captionsHeight = captionsBaseHeight + captionsContentHeight;
if (player.isCaptionsEnabled()) { if (player.isCaptionsEnabled()) {
videoCaptions.setAttribute("style", "display: block; bottom: 75px;"); videoCaptions.setAttribute("style", `display: block; transition: bottom 0.2s ease-in-out; bottom: ${captionsHeight}px;`);
} else { } else {
videoCaptions.setAttribute("style", "display: none; bottom: 75px;"); videoCaptions.setAttribute("style", `display: none; bottom: ${captionsHeight}px;`);
} }
break; break;
}
case PlayerControlEvent.UiFadeIn: case PlayerControlEvent.UiFadeIn: {
document.body.style.cursor = "default"; document.body.style.cursor = "default";
playerControls.setAttribute("style", "opacity: 1"); playerControls.setAttribute("style", "opacity: 1");
captionsBaseHeight = 160;
const captionsHeight = captionsBaseHeight + captionsContentHeight;
if (player.isCaptionsEnabled()) { if (player.isCaptionsEnabled()) {
videoCaptions.setAttribute("style", "display: block; bottom: 160px;"); videoCaptions.setAttribute("style", `display: block; transition: bottom 0.2s ease-in-out; bottom: ${captionsHeight}px;`);
} else { } else {
videoCaptions.setAttribute("style", "display: none; bottom: 160px;"); videoCaptions.setAttribute("style", `display: none; bottom: ${captionsHeight}px;`);
} }
break; break;
}
case PlayerControlEvent.SetCaptions: case PlayerControlEvent.SetCaptions:
if (player.isCaptionsEnabled()) { if (player.isCaptionsEnabled()) {

2
receivers/common/web/player/common.css
View file

@ -409,7 +409,7 @@ body {
width: fit-content; width: fit-content;
transition: bottom 0.2s ease-in-out; /* transition: bottom 0.2s ease-in-out; */
} }
.speedMenu { .speedMenu {