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

View File

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