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

Suppressed additional errors on player video load error

This commit is contained in:
Michael Hollister 2025-02-18 11:01:07 -06:00
parent 63f22bd488
commit 4dc54346de

View file

@ -11,6 +11,10 @@ import {
} from 'src/player/Renderer'; } from 'src/player/Renderer';
function formatDuration(duration: number) { function formatDuration(duration: number) {
if (isNaN(duration)) {
return '00:00';
}
const totalSeconds = Math.floor(duration); const totalSeconds = Math.floor(duration);
const hours = Math.floor(totalSeconds / 3600); const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60); const minutes = Math.floor((totalSeconds % 3600) / 60);
@ -407,15 +411,15 @@ function playerCtrlStateUpdate(event: PlayerControlEvent) {
break; break;
case PlayerControlEvent.VolumeChange: { case PlayerControlEvent.VolumeChange: {
// console.log(`VolumeChange: isMute ${player.isMuted()}, volume: ${player.getVolume()}`); // console.log(`VolumeChange: isMute ${player?.isMuted()}, volume: ${player?.getVolume()}`);
const volume = Math.round(player.getVolume() * playerCtrlVolumeBar.offsetWidth); const volume = Math.round(player?.getVolume() * playerCtrlVolumeBar.offsetWidth);
if (player.isMuted()) { if (player?.isMuted()) {
playerCtrlVolume.setAttribute("class", "mute iconSize"); playerCtrlVolume.setAttribute("class", "mute iconSize");
playerCtrlVolumeBarProgress.setAttribute("style", `width: 0px`); playerCtrlVolumeBarProgress.setAttribute("style", `width: 0px`);
playerCtrlVolumeBarHandle.setAttribute("style", `left: 0px`); playerCtrlVolumeBarHandle.setAttribute("style", `left: 0px`);
} }
else if (player.getVolume() >= 0.5) { else if (player?.getVolume() >= 0.5) {
playerCtrlVolume.setAttribute("class", "volume_high iconSize"); playerCtrlVolume.setAttribute("class", "volume_high iconSize");
playerCtrlVolumeBarProgress.setAttribute("style", `width: ${volume}px`); playerCtrlVolumeBarProgress.setAttribute("style", `width: ${volume}px`);
playerCtrlVolumeBarHandle.setAttribute("style", `left: ${volume}px`); playerCtrlVolumeBarHandle.setAttribute("style", `left: ${volume}px`);
@ -466,7 +470,7 @@ function playerCtrlStateUpdate(event: PlayerControlEvent) {
captionsBaseHeight = captionsBaseHeightCollapsed; captionsBaseHeight = captionsBaseHeightCollapsed;
const captionsHeight = captionsBaseHeight + captionsContentHeight; const captionsHeight = captionsBaseHeight + captionsContentHeight;
if (player.isCaptionsEnabled()) { if (player?.isCaptionsEnabled()) {
videoCaptions.setAttribute("style", `display: block; transition: bottom 0.2s ease-in-out; bottom: ${captionsHeight}px;`); videoCaptions.setAttribute("style", `display: block; transition: bottom 0.2s ease-in-out; bottom: ${captionsHeight}px;`);
} else { } else {
videoCaptions.setAttribute("style", `display: none; bottom: ${captionsHeight}px;`); videoCaptions.setAttribute("style", `display: none; bottom: ${captionsHeight}px;`);
@ -482,7 +486,7 @@ function playerCtrlStateUpdate(event: PlayerControlEvent) {
captionsBaseHeight = captionsBaseHeightExpanded; captionsBaseHeight = captionsBaseHeightExpanded;
const captionsHeight = captionsBaseHeight + captionsContentHeight; const captionsHeight = captionsBaseHeight + captionsContentHeight;
if (player.isCaptionsEnabled()) { if (player?.isCaptionsEnabled()) {
videoCaptions.setAttribute("style", `display: block; transition: bottom 0.2s ease-in-out; bottom: ${captionsHeight}px;`); videoCaptions.setAttribute("style", `display: block; transition: bottom 0.2s ease-in-out; bottom: ${captionsHeight}px;`);
} else { } else {
videoCaptions.setAttribute("style", `display: none; bottom: ${captionsHeight}px;`); videoCaptions.setAttribute("style", `display: none; bottom: ${captionsHeight}px;`);
@ -492,7 +496,7 @@ function playerCtrlStateUpdate(event: PlayerControlEvent) {
} }
case PlayerControlEvent.SetCaptions: case PlayerControlEvent.SetCaptions:
if (player.isCaptionsEnabled()) { if (player?.isCaptionsEnabled()) {
playerCtrlCaptions.setAttribute("class", "captions_on iconSize"); playerCtrlCaptions.setAttribute("class", "captions_on iconSize");
videoCaptions.setAttribute("style", "display: block"); videoCaptions.setAttribute("style", "display: block");
} else { } else {
@ -514,7 +518,7 @@ function playerCtrlStateUpdate(event: PlayerControlEvent) {
} }
case PlayerControlEvent.SetPlaybackRate: { case PlayerControlEvent.SetPlaybackRate: {
const rate = player.getPlaybackRate().toFixed(2); const rate = player?.getPlaybackRate().toFixed(2);
const entryElement = document.getElementById(`speedMenuEntry_${rate}_enabled`); const entryElement = document.getElementById(`speedMenuEntry_${rate}_enabled`);
playbackRates.forEach(r => { playbackRates.forEach(r => {
@ -538,8 +542,8 @@ function playerCtrlStateUpdate(event: PlayerControlEvent) {
function scrubbingMouseUIHandler(e: MouseEvent) { function scrubbingMouseUIHandler(e: MouseEvent) {
const progressBarOffset = e.offsetX - playerCtrlProgressBar.offsetLeft; const progressBarOffset = e.offsetX - playerCtrlProgressBar.offsetLeft;
const progressBarWidth = PlayerCtrlProgressBarInteractiveArea.offsetWidth - (playerCtrlProgressBar.offsetLeft * 2); const progressBarWidth = PlayerCtrlProgressBarInteractiveArea.offsetWidth - (playerCtrlProgressBar.offsetLeft * 2);
let time = isLive ? Math.round((1 - (progressBarOffset / progressBarWidth)) * player.getDuration()) : Math.round((progressBarOffset / progressBarWidth) * player.getDuration()); let time = isLive ? Math.round((1 - (progressBarOffset / progressBarWidth)) * player?.getDuration()) : Math.round((progressBarOffset / progressBarWidth) * player?.getDuration());
time = Math.min(player.getDuration(), Math.max(0.0, time)); time = Math.min(player?.getDuration(), Math.max(0.0, time));
if (scrubbing && isLive && e.buttons === 1) { if (scrubbing && isLive && e.buttons === 1) {
isLivePosition = false; isLivePosition = false;
@ -556,14 +560,14 @@ function scrubbingMouseUIHandler(e: MouseEvent) {
// Receiver generated event handlers // Receiver generated event handlers
playerCtrlAction.onclick = () => { playerCtrlAction.onclick = () => {
if (player.isPaused()) { if (player?.isPaused()) {
player.play(); player?.play();
} else { } else {
player.pause(); player?.pause();
} }
}; };
playerCtrlVolume.onclick = () => { player.setMute(!player.isMuted()); }; playerCtrlVolume.onclick = () => { player?.setMute(!player?.isMuted()); };
PlayerCtrlProgressBarInteractiveArea.onmousedown = (e: MouseEvent) => { scrubbing = true; scrubbingMouseHandler(e) }; PlayerCtrlProgressBarInteractiveArea.onmousedown = (e: MouseEvent) => { scrubbing = true; scrubbingMouseHandler(e) };
PlayerCtrlProgressBarInteractiveArea.onmouseup = () => { scrubbing = false; }; PlayerCtrlProgressBarInteractiveArea.onmouseup = () => { scrubbing = false; };
@ -580,11 +584,11 @@ PlayerCtrlProgressBarInteractiveArea.onmousemove = (e: MouseEvent) => { scrubbin
function scrubbingMouseHandler(e: MouseEvent) { function scrubbingMouseHandler(e: MouseEvent) {
const progressBarOffset = e.offsetX - playerCtrlProgressBar.offsetLeft; const progressBarOffset = e.offsetX - playerCtrlProgressBar.offsetLeft;
const progressBarWidth = PlayerCtrlProgressBarInteractiveArea.offsetWidth - (playerCtrlProgressBar.offsetLeft * 2); const progressBarWidth = PlayerCtrlProgressBarInteractiveArea.offsetWidth - (playerCtrlProgressBar.offsetLeft * 2);
let time = Math.round((progressBarOffset / progressBarWidth) * player.getDuration()); let time = Math.round((progressBarOffset / progressBarWidth) * player?.getDuration());
time = Math.min(player.getDuration(), Math.max(0.0, time)); time = Math.min(player?.getDuration(), Math.max(0.0, time));
if (scrubbing && e.buttons === 1) { if (scrubbing && e.buttons === 1) {
player.setCurrentTime(time); player?.setCurrentTime(time);
} }
scrubbingMouseUIHandler(e); scrubbingMouseUIHandler(e);
@ -602,9 +606,9 @@ playerCtrlVolumeBarInteractiveArea.onwheel = (e: WheelEvent) => {
const delta = -e.deltaY; const delta = -e.deltaY;
if (delta > 0 ) { if (delta > 0 ) {
volumeChangeHandler(Math.min(player.getVolume() + volumeIncrement, 1)); volumeChangeHandler(Math.min(player?.getVolume() + volumeIncrement, 1));
} else if (delta < 0) { } else if (delta < 0) {
volumeChangeHandler(Math.max(player.getVolume() - volumeIncrement, 0)); volumeChangeHandler(Math.max(player?.getVolume() - volumeIncrement, 0));
} }
}; };
@ -618,14 +622,14 @@ function volumeChangeMouseHandler(e: MouseEvent) {
} }
function volumeChangeHandler(volume: number) { function volumeChangeHandler(volume: number) {
if (!player.isMuted() && volume <= 0) { if (!player?.isMuted() && volume <= 0) {
player.setMute(true); player?.setMute(true);
} }
else if (player.isMuted() && volume > 0) { else if (player?.isMuted() && volume > 0) {
player.setMute(false); player?.setMute(false);
} }
player.setVolume(volume); player?.setVolume(volume);
} }
playerCtrlLiveBadge.onclick = () => { setLivePosition(); }; playerCtrlLiveBadge.onclick = () => { setLivePosition(); };
@ -634,22 +638,22 @@ function setLivePosition() {
if (!isLivePosition) { if (!isLivePosition) {
isLivePosition = true; isLivePosition = true;
player.setCurrentTime(player.getDuration() - livePositionDelta); player?.setCurrentTime(player?.getDuration() - livePositionDelta);
playerCtrlLiveBadge.setAttribute("style", `background-color: red`); playerCtrlLiveBadge.setAttribute("style", `background-color: red`);
if (player.isPaused()) { if (player?.isPaused()) {
player.play(); player?.play();
} }
} }
} }
playerCtrlCaptions.onclick = () => { player.enableCaptions(!player.isCaptionsEnabled()); playerCtrlStateUpdate(PlayerControlEvent.SetCaptions); }; playerCtrlCaptions.onclick = () => { player?.enableCaptions(!player?.isCaptionsEnabled()); playerCtrlStateUpdate(PlayerControlEvent.SetCaptions); };
playerCtrlSpeed.onclick = () => { playerCtrlStateUpdate(PlayerControlEvent.ToggleSpeedMenu); }; playerCtrlSpeed.onclick = () => { playerCtrlStateUpdate(PlayerControlEvent.ToggleSpeedMenu); };
playbackRates.forEach(r => { playbackRates.forEach(r => {
const entry = document.getElementById(`speedMenuEntry_${r}`); const entry = document.getElementById(`speedMenuEntry_${r}`);
entry.onclick = () => { entry.onclick = () => {
player.setPlaybackRate(parseFloat(r)); player?.setPlaybackRate(parseFloat(r));
playerCtrlStateUpdate(PlayerControlEvent.SetPlaybackRate); playerCtrlStateUpdate(PlayerControlEvent.SetPlaybackRate);
playerCtrlStateUpdate(PlayerControlEvent.ToggleSpeedMenu); playerCtrlStateUpdate(PlayerControlEvent.ToggleSpeedMenu);
}; };
@ -657,10 +661,10 @@ playbackRates.forEach(r => {
videoElement.onclick = () => { videoElement.onclick = () => {
if (!playerCtrlSpeedMenuShown) { if (!playerCtrlSpeedMenuShown) {
if (player.isPaused()) { if (player?.isPaused()) {
player.play(); player?.play();
} else { } else {
player.pause(); player?.pause();
} }
} }
}; };
@ -749,7 +753,7 @@ function keyDownEventListener(event: any) {
event.preventDefault(); event.preventDefault();
break; break;
case "Home": case "Home":
player.setCurrentTime(0); player?.setCurrentTime(0);
event.preventDefault(); event.preventDefault();
break; break;
case "End": case "End":
@ -757,7 +761,7 @@ function keyDownEventListener(event: any) {
setLivePosition(); setLivePosition();
} }
else { else {
player.setCurrentTime(player.getDuration()); player?.setCurrentTime(player?.getDuration());
} }
event.preventDefault(); event.preventDefault();
break; break;
@ -765,24 +769,24 @@ function keyDownEventListener(event: any) {
case 'Space': case 'Space':
case 'Enter': case 'Enter':
// Play/pause toggle // Play/pause toggle
if (player.isPaused()) { if (player?.isPaused()) {
player.play(); player?.play();
} else { } else {
player.pause(); player?.pause();
} }
event.preventDefault(); event.preventDefault();
break; break;
case 'KeyM': case 'KeyM':
// Mute toggle // Mute toggle
player.setMute(!player.isMuted()); player?.setMute(!player?.isMuted());
break; break;
case 'ArrowUp': case 'ArrowUp':
// Volume up // Volume up
volumeChangeHandler(Math.min(player.getVolume() + volumeIncrement, 1)); volumeChangeHandler(Math.min(player?.getVolume() + volumeIncrement, 1));
break; break;
case 'ArrowDown': case 'ArrowDown':
// Volume down // Volume down
volumeChangeHandler(Math.max(player.getVolume() - volumeIncrement, 0)); volumeChangeHandler(Math.max(player?.getVolume() - volumeIncrement, 0));
break; break;
default: default:
break; break;
@ -790,12 +794,12 @@ function keyDownEventListener(event: any) {
} }
function skipBack() { function skipBack() {
player.setCurrentTime(Math.max(player.getCurrentTime() - skipInterval, 0)); player?.setCurrentTime(Math.max(player?.getCurrentTime() - skipInterval, 0));
} }
function skipForward() { function skipForward() {
if (!isLivePosition) { if (!isLivePosition) {
player.setCurrentTime(Math.min(player.getCurrentTime() + skipInterval, player.getDuration())); player?.setCurrentTime(Math.min(player?.getCurrentTime() + skipInterval, player?.getDuration()));
} }
} }