diff --git a/openvidu-test-e2e/src/main/java/io/openvidu/test/e2e/OpenViduTestE2e.java b/openvidu-test-e2e/src/main/java/io/openvidu/test/e2e/OpenViduTestE2e.java index 71a30b5ee..8f56c64b7 100644 --- a/openvidu-test-e2e/src/main/java/io/openvidu/test/e2e/OpenViduTestE2e.java +++ b/openvidu-test-e2e/src/main/java/io/openvidu/test/e2e/OpenViduTestE2e.java @@ -69,7 +69,7 @@ public class OpenViduTestE2e { put("VP8", Triple.of("libvpx", "", "VP8")); put("VP9", Triple.of("libvpx-vp9", "", "VP9")); put("MPEG-4", Triple.of("mpeg4", "", "MPEG-4")); - put("M-JPEG", Triple.of("mjpeg", "-force_duplicated_matrix:v 1 -huffman:v 0", "MJPEG")); + put("M-JPEG", Triple.of("mjpeg", "-force_duplicated_matrix:v 1 -huffman:v 0", "M-JPEG")); // put("AV1", Triple.of("libaom-av1", "", "AV1")); // NOT SUPPORTED BY THE RTSP SERVER // (maybe gstreamer?) // put("H265", Triple.of("libx265", "", "H265")); // NOT SUPPORTED BY INGRESS diff --git a/openvidu-test-e2e/src/test/java/io/openvidu/test/e2e/OpenViduTestAppE2eTest.java b/openvidu-test-e2e/src/test/java/io/openvidu/test/e2e/OpenViduTestAppE2eTest.java index 55f5c22fe..47112ffd5 100644 --- a/openvidu-test-e2e/src/test/java/io/openvidu/test/e2e/OpenViduTestAppE2eTest.java +++ b/openvidu-test-e2e/src/test/java/io/openvidu/test/e2e/OpenViduTestAppE2eTest.java @@ -649,8 +649,7 @@ public class OpenViduTestAppE2eTest extends AbstractOpenViduTestappE2eTest { Thread.sleep(300); user.getDriver().findElement(By.id("trackPublish-backupCodec")).click(); user.getDriver().findElement(By.id("trackPublish-videoCodec")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.id("mat-option-" + codec.toLowerCase())).click(); + this.waitForBackdropAndClick(user, "#mat-option-" + codec.toLowerCase()); this.waitForBackdropAndClick(user, "#close-dialog-btn"); Thread.sleep(300); @@ -750,9 +749,8 @@ public class OpenViduTestAppE2eTest extends AbstractOpenViduTestappE2eTest { Thread.sleep(300); chromeUser.getDriver().findElement(By.id("trackPublish-backupCodec")).click(); chromeUser.getDriver().findElement(By.id("trackPublish-videoCodec")).click(); - Thread.sleep(300); - chromeUser.getDriver().findElement(By.id("mat-option-" + codec.toLowerCase())).click(); - chromeUser.getDriver().findElement(By.id("close-dialog-btn")).click(); + this.waitForBackdropAndClick(chromeUser, "#mat-option-" + codec.toLowerCase()); + this.waitForBackdropAndClick(chromeUser, "#close-dialog-btn"); Thread.sleep(300); chromeUser.getDriver().findElement(By.className("connect-btn")).click(); chromeUser.getEventManager().waitUntilEventReaches("localTrackSubscribed", "ParticipantEvent", 1); @@ -963,13 +961,11 @@ public class OpenViduTestAppE2eTest extends AbstractOpenViduTestappE2eTest { // Manually change video quality of first subscriber to q user.getDriver().findElement(By.cssSelector("#openvidu-instance-1 #max-video-quality")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("mat-option.mode-LOW")).click(); + this.waitForBackdropAndClick(user, "mat-option.mode-LOW"); // Manually change video quality of second subscriber to f user.getDriver().findElement(By.cssSelector("#openvidu-instance-2 #max-video-quality")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("mat-option.mode-HIGH")).click(); + this.waitForBackdropAndClick(user, "mat-option.mode-HIGH"); subscriberVideo1 = user.getDriver().findElement(By.cssSelector("#openvidu-instance-1 video.remote")); WebElement subscriberVideo2 = user.getDriver().findElement(By.cssSelector("#openvidu-instance-2 video.remote")); @@ -996,8 +992,7 @@ public class OpenViduTestAppE2eTest extends AbstractOpenViduTestappE2eTest { // Manually change video quality of second subscriber to h user.getDriver().findElement(By.cssSelector("#openvidu-instance-2 #max-video-quality")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("mat-option.mode-MEDIUM")).click(); + this.waitForBackdropAndClick(user, "mat-option.mode-MEDIUM"); this.waitUntilPublisherLayerActive(user, publisherVideo, "q", true); this.waitUntilPublisherLayerActive(user, publisherVideo, "h", true); @@ -1159,20 +1154,17 @@ public class OpenViduTestAppE2eTest extends AbstractOpenViduTestappE2eTest { // Manually change video quality of subscriber to h user.getDriver().findElement(By.cssSelector("#openvidu-instance-1 #max-video-quality")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("mat-option.mode-MEDIUM")).click(); + this.waitForBackdropAndClick(user, "mat-option.mode-MEDIUM"); this.waitUntilSubscriberFrameWidthIs(user, subscriberVideo, h); // Manually change video quality of subscriber to q user.getDriver().findElement(By.cssSelector("#openvidu-instance-1 #max-video-quality")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("mat-option.mode-LOW")).click(); + this.waitForBackdropAndClick(user, "mat-option.mode-LOW"); this.waitUntilSubscriberFrameWidthIs(user, subscriberVideo, q); // Manually change video quality of subscriber to f user.getDriver().findElement(By.cssSelector("#openvidu-instance-1 #max-video-quality")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("mat-option.mode-HIGH")).click(); + this.waitForBackdropAndClick(user, "mat-option.mode-HIGH"); this.waitUntilSubscriberFrameWidthIs(user, subscriberVideo, f); gracefullyLeaveParticipants(user, 2); @@ -2420,16 +2412,13 @@ public class OpenViduTestAppE2eTest extends AbstractOpenViduTestappE2eTest { // Check manual simulcast changes this.waitUntilSubscriberFrameWidthIs(user, subscriberVideo, 1920); user.getDriver().findElement(By.cssSelector("#openvidu-instance-0 #max-video-quality")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("mat-option.mode-LOW")).click(); + this.waitForBackdropAndClick(user, "mat-option.mode-LOW"); this.waitUntilSubscriberFrameWidthIs(user, subscriberVideo, 640); user.getDriver().findElement(By.cssSelector("#openvidu-instance-0 #max-video-quality")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("mat-option.mode-MEDIUM")).click(); + this.waitForBackdropAndClick(user, "mat-option.mode-MEDIUM"); this.waitUntilSubscriberFrameWidthIs(user, subscriberVideo, 1280); user.getDriver().findElement(By.cssSelector("#openvidu-instance-0 #max-video-quality")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("mat-option.mode-HIGH")).click(); + this.waitForBackdropAndClick(user, "mat-option.mode-HIGH"); this.waitUntilSubscriberFrameWidthIs(user, subscriberVideo, 1920); } @@ -2437,28 +2426,23 @@ public class OpenViduTestAppE2eTest extends AbstractOpenViduTestappE2eTest { // Check manual simulcast changes this.waitUntilSubscriberFrameWidthIs(user, subscriberVideo, 960); user.getDriver().findElement(By.cssSelector("#openvidu-instance-0 #max-video-quality")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("mat-option.mode-LOW")).click(); + this.waitForBackdropAndClick(user, "mat-option.mode-LOW"); this.waitUntilSubscriberFrameWidthIs(user, subscriberVideo, 480); user.getDriver().findElement(By.cssSelector("#openvidu-instance-0 #max-video-quality")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("mat-option.mode-MEDIUM")).click(); + this.waitForBackdropAndClick(user, "mat-option.mode-MEDIUM"); this.waitUntilSubscriberFrameWidthIs(user, subscriberVideo, 960); user.getDriver().findElement(By.cssSelector("#openvidu-instance-0 #max-video-quality")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("mat-option.mode-LOW")).click(); + this.waitForBackdropAndClick(user, "mat-option.mode-LOW"); this.waitUntilSubscriberFrameWidthIs(user, subscriberVideo, 480); user.getDriver().findElement(By.cssSelector("#openvidu-instance-0 #max-video-quality")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("mat-option.mode-HIGH")).click(); + this.waitForBackdropAndClick(user, "mat-option.mode-HIGH"); this.waitUntilSubscriberFrameWidthIs(user, subscriberVideo, 960); } private void testNoSimulcast(OpenViduTestappUser user, WebElement subscriberVideo) throws InterruptedException { this.waitUntilSubscriberFrameWidthIs(user, subscriberVideo, 1920); user.getDriver().findElement(By.cssSelector("#openvidu-instance-0 #max-video-quality")).click(); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("mat-option.mode-LOW")).click(); + this.waitForBackdropAndClick(user, "mat-option.mode-LOW"); // Without simulcast video should remain in high quality Thread.sleep(4000); this.waitUntilSubscriberFrameWidthIs(user, subscriberVideo, 1920); @@ -2757,21 +2741,18 @@ public class OpenViduTestAppE2eTest extends AbstractOpenViduTestappE2eTest { user.getDriver().findElement(By.xpath("//button[contains(@title,'Room API')]")).click(); if (preset != null) { this.waitForBackdropAndClick(user, "#ingress-preset-select"); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("#mat-option-" + preset.toUpperCase())).click(); + this.waitForBackdropAndClick(user, "#mat-option-" + preset.toUpperCase()); } else { if (!simulcast) { this.waitForBackdropAndClick(user, "#ingress-simulcast"); Thread.sleep(300); } this.waitForBackdropAndClick(user, "#ingress-video-codec-select"); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("#mat-option-" + codec.toUpperCase())).click(); + this.waitForBackdropAndClick(user, "#mat-option-" + codec.toUpperCase()); } if (urlType != null) { this.waitForBackdropAndClick(user, "#ingress-url-type-select"); - Thread.sleep(300); - user.getDriver().findElement(By.cssSelector("#mat-option-" + urlType.toUpperCase())).click(); + this.waitForBackdropAndClick(user, "#mat-option-" + urlType.toUpperCase()); } if (urlUri != null) { user.getDriver().findElement(By.cssSelector("#ingress-url-uri-field")).sendKeys(urlUri); @@ -2797,7 +2778,7 @@ public class OpenViduTestAppE2eTest extends AbstractOpenViduTestappE2eTest { } if (scalabilityMode != null) { user.getDriver().findElement(By.id("trackPublish-scalabilityMode")).click(); - user.getDriver().findElement(By.className("mode-" + scalabilityMode)).click(); + this.waitForBackdropAndClick(user, ".mode-" + scalabilityMode); } } diff --git a/openvidu-testapp/src/app/components/video-track/video-track.component.css b/openvidu-testapp/src/app/components/video-track/video-track.component.css index f96668b56..81a5faadc 100644 --- a/openvidu-testapp/src/app/components/video-track/video-track.component.css +++ b/openvidu-testapp/src/app/components/video-track/video-track.component.css @@ -53,31 +53,21 @@ video { line-height: 16px; } +/* Keep the form-field visually compact (16×16 clipped box). + The CDK overlay uses the Popover API (top layer) so it is + immune to overflow:hidden and renders at its natural size. */ #max-video-quality { width: 16px; height: 16px; + overflow: hidden; font-size: 10px; font-weight: bold; } -/* Compact the form-field chrome, but exclude the CDK overlay popover - (Angular CDK v21 renders it inside the component via the Popover API). */ -::ng-deep #max-video-quality > :not(.cdk-overlay-popover), -::ng-deep #max-video-quality > :not(.cdk-overlay-popover) * { - height: 16px !important; - width: 8px !important; - min-height: 16px !important; - min-width: 8px !important; - padding: 0 !important; +::ng-deep #max-video-quality .mdc-notched-outline * { border-color: transparent !important; } -/* Let the dropdown panel and its options render at their natural size */ -::ng-deep #max-video-quality .cdk-overlay-popover, -::ng-deep #max-video-quality .cdk-overlay-popover * { - width: auto !important; - min-width: auto !important; - height: auto !important; - min-height: auto !important; - padding: revert !important; +::ng-deep #max-video-quality .mat-mdc-form-field-subscript-wrapper { + display: none !important; }