Merge pull request #182 from kaltura/ADA-1809-Recorder-Plugin-Update-…

…Zoom ADA-1809 recorder plugin update zoom
kaltura · Dec 10, 2024 · e7d6d65 · e7d6d65
2 parents 878cc04 + 01f2fa1
commit e7d6d65
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 3 deletions.
diff --git a/src/components/App/style.scss b/src/components/App/style.scss
@@ -3,13 +3,26 @@
     text-align: center;
     height: 100%;
     width: 100%;
+    @media (max-width: 1024px) {
+        max-width: 100%;
+        max-height: 100%;
+        display: block;
+        height: auto;
+        width: auto;
+    }
     border-radius: 4px;
     font-family: Lato, sans-serif;
     background-color: black;
 }
 .express-recorder__controls {
     position: relative;
     margin-top: -79px;
+    @media (max-width: 512px) {
+        margin-top: -50px;
+    }
+    @media (max-width: 320px) {
+        margin-top: -45px;
+    }
 }
 .express-recorder__save {
     margin-top: 55px;
@@ -18,6 +31,15 @@
 .express-recorder__countdown {
     position: relative;
     margin-top: -363px;
+    @media(max-width: 512px) {
+        margin-top: -300px;
+    }
+    @media(max-width: 427px) {
+        margin-top: -280px;
+    }
+    @media(max-width: 320px) {
+        margin-top: -190px;
+    }
 }
 .controls__cancel {
     margin-top: 175px;
@@ -30,6 +52,16 @@
     height: 43px;
     width: 100px;
     cursor: pointer;
+    @media(max-width: 512px) {
+        margin-top: 90px;
+    }
+    @media(max-width: 320px) {
+        margin-top: 5px;
+        height: 20px;
+        font-size: 12px;
+        line-height: 15px;
+        width: 60px;
+    }
 }
 .bottom__btn {
     height: 36px;
@@ -90,6 +122,12 @@
 }
 .express-recorder__playback {
     height: 100%;
+    @media (max-width: 1024px) {
+        height: 70vh;
+    }
+    @media (max-width: 639px) {
+        height: 100vh;
+    }
     width: 100%;
     border-radius: 4px;
     overflow: hidden;

diff --git a/src/components/Countdown-timer/style.scss b/src/components/Countdown-timer/style.scss
@@ -5,6 +5,9 @@
     height: 88px;
     width: 88px;
     text-align: center;
+    @media (max-width: 256px) {
+        margin-top: 110px;
+    }
 }
 
 .countdown-number {
@@ -14,6 +17,10 @@
     font-size: 48px;
     z-index: 2;
     position: relative;
+    @media (max-width: 320px) {
+        line-height: 30px;
+        font-size: 25px;
+    }
 }
 
 @keyframes countdown-anim {
@@ -36,6 +43,16 @@
     margin-top: -86px;
     margin-left: 2px;
     background-color: rgba(0,0,0,0.5);
+    @media (max-width: 320px) {
+        width: 40px;
+        height: 40px;
+        margin-left: 20px;
+        margin-top: -39px;
+    }
+    @media (max-width: 256px) {
+        margin-left: 20px;
+        margin-top: -35px;
+    }
 }
 @keyframes spin {
     to {

diff --git a/src/components/Recording-timer/style.scss b/src/components/Recording-timer/style.scss
@@ -21,6 +21,14 @@ button.timer-button {
     align-items: center;
     justify-content: space-between;
     width: 82px;
+
+    @media (max-width: 512px) {
+        height: 15px;
+    }
+    @media (max-width: 320px) {
+        height: 8px;
+        padding: 13px 10px 13px 10px;
+    }
 }
 .recording-timer {
     display: inline-block;

diff --git a/src/components/Settings/Settings-devices.tsx b/src/components/Settings/Settings-devices.tsx
@@ -120,11 +120,32 @@ export class SettingsDevices extends Component<Props, State> {
                 selectedClass = styles["selected-device"];
                 isSelected = true;
             }
+            /**
+             * Positions the tooltip for a menu item dynamically, especially when the menu is zoomed
+             * and scrolling is active. Adjusts the tooltip's position and size based on the screen width.
+             * @param event - The event triggered when interacting with a menu item.
+             */
+            function showTooltip(event: any) {
+                const label = event.currentTarget;
+                const tooltip = label.querySelector(".device-label__popup");
+
+                const rect = label.getBoundingClientRect();
+                if (window.innerWidth <= 427) {
+                    tooltip.style.top = `${rect.top - 10}px`;
+                    tooltip.style.left = `${rect.left - rect.width / 2}px`;
+                    tooltip.style.transform = "translateY(50%)";
+                    tooltip.style.width = "60%";
+                }
+                if (window.innerWidth <= 320) {
+                    tooltip.style.left = `${rect.left - rect.width}px`;
+                }
+            }
             return (
                 <div
                     key={index.toString()}
                     onClick={isOn && !isSelected ? () => this.handleItemClick(item) : undefined}
                     onKeyDown={e => this.handleItemPress(e, item)}
+                    onMouseOver={showTooltip}
                     className={
                         selectedClass +
                         " device-label " +

diff --git a/src/components/Settings/style.scss b/src/components/Settings/style.scss
@@ -3,7 +3,11 @@
     height: 40px;
     background: #111111;
     border-radius: 28px;
+    @media (max-width: 512px) {
+        height: 20px;
+    }
     @media (max-width: 320px) {
+        height: 15px;
         padding: 0.5em 0.5em;
     }
 }
@@ -20,9 +24,12 @@
     &:hover {
         background-image: linear-gradient(-180deg, #ed2a38, #c51c22);
     }
+    @media (max-width: 512px) {
+        height: 18px;
+        width: 18px;
+    }
     @media (max-width: 320px) {
-        height: 1.8em;
-        width: 1.8em;
+        margin-left: 0;
     }
 }
 .resources-item {
@@ -119,6 +126,9 @@
         left: 70px;
         top: -8px;
     }
+    @media (max-width: 427px) {
+        position: fixed;
+    }
 }
 .selected-device:before {
     content: "";
@@ -137,6 +147,10 @@
     i {
         margin-left: 13px;
         margin-bottom: 2px;
+
+        @media (max-width: 320px) {
+            margin-left: 0;
+        }
     }
 }
 .resource-link {
@@ -152,8 +166,11 @@
         background-color: #666666;
         border-radius: 4px;
     }
+    @media (max-width: 512px) {
+        padding: 0;
+    }
     @media (max-width: 320px) {
-        padding: 0.1em;
+        margin: 0;
     }
 }
 .device-disabled {
@@ -188,6 +205,21 @@
     border-radius: 4px;
     background: #333333;
     color: #ffffff;
+    @media (max-width: 427px) {
+        bottom: 30px;
+        left: 8px;
+        padding: 4px 0;
+        max-height: 120px;
+        max-width: 90%;
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+    @media (max-width: 320px) {
+        max-height: 80px;
+    }
+    @media (max-width: 256px) {
+        max-height: 50px;
+    }
 }
 .device-label__selected-icon {
     right: 20px;

diff --git a/src/components/Toggle-button/style.scss b/src/components/Toggle-button/style.scss
@@ -7,6 +7,9 @@
     display: block;
     padding-left: 10px;
     padding-right: 10px;
+    @media (max-width: 320px) {
+        line-height: 20px;
+    }
     &:focus {
         text-decoration: none;
         border-radius: 4px;