Fixes video filter issues (#3792)

This commit is contained in:
CJ 2023-06-01 20:13:28 -05:00 committed by GitHub
parent 94450da8b5
commit c8a796e125
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -108,15 +108,26 @@ export const SceneVideoFilterPanel: React.FC<ISceneVideoFilterPanelProps> = (
aspectRatioRange.default
);
function updateVideoStyle() {
const playerVideoContainer = document.getElementById(VIDEO_PLAYER_ID);
const videoElements =
playerVideoContainer?.getElementsByTagName("canvas") ??
playerVideoContainer?.getElementsByTagName("video") ??
[];
const playerVideoElement =
videoElements.length > 0 ? videoElements[0] : null;
// eslint-disable-next-line
function getVideoElement(playerVideoContainer: any) {
let videoElements = playerVideoContainer.getElementsByTagName("canvas");
if (videoElements.length == 0) {
videoElements = playerVideoContainer.getElementsByTagName("video");
}
if (videoElements.length > 0) {
return videoElements[0];
}
}
function updateVideoStyle() {
const playerVideoContainer = document.getElementById(VIDEO_PLAYER_ID)!;
if (!playerVideoContainer) {
return;
}
const playerVideoElement = getVideoElement(playerVideoContainer);
if (playerVideoElement != null) {
let styleString = "filter:";
let style = playerVideoElement.attributes.getNamedItem("style");
@ -188,6 +199,10 @@ export const SceneVideoFilterPanel: React.FC<ISceneVideoFilterPanelProps> = (
styleString += ` scale(${xScale},${yScale})`;
}
if (playerVideoElement.tagName == "CANVAS") {
styleString += "; width: 100%; height: 100%; position: absolute; top:0";
}
style.value = `${styleString};`;
}
}