From 4524291331514a2ca0a9f5e181be6dbf502fabd1 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 6 Sep 2022 00:28:01 -0400
Subject: [PATCH] Fix the picture-in-picture component being off screen (#9246)

---
 cypress/e2e/widgets/widget-pip-close.spec.ts | 4 ++--
 res/css/views/right_panel/_TimelineCard.pcss | 4 ++--
 res/css/views/rooms/_EventBubbleTile.pcss    | 4 ++--
 src/components/views/voip/PipView.tsx        | 8 ++++----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/cypress/e2e/widgets/widget-pip-close.spec.ts b/cypress/e2e/widgets/widget-pip-close.spec.ts
index 7689e38ed0..df574a68b0 100644
--- a/cypress/e2e/widgets/widget-pip-close.spec.ts
+++ b/cypress/e2e/widgets/widget-pip-close.spec.ts
@@ -141,7 +141,7 @@ describe("Widget PIP", () => {
                     win.mxActiveWidgetStore.setWidgetPersistence(DEMO_WIDGET_ID, roomId, true);
 
                     // checks that pip window is opened
-                    cy.get(".mx_CallView_pip").should("exist");
+                    cy.get(".mx_LegacyCallView_pip").should("exist");
 
                     // checks that widget is opened in pip
                     cy.accessIframe(`iframe[title="${DEMO_WIDGET_NAME}"]`).within({}, () => {
@@ -158,7 +158,7 @@ describe("Widget PIP", () => {
                             }
 
                             // checks that pip window is closed
-                            cy.get(".mx_CallView_pip").should("not.exist");
+                            cy.get(".mx_LegacyCallView_pip").should("not.exist");
                         });
                     });
                 });
diff --git a/res/css/views/right_panel/_TimelineCard.pcss b/res/css/views/right_panel/_TimelineCard.pcss
index 13ddda8915..7e50457ae8 100644
--- a/res/css/views/right_panel/_TimelineCard.pcss
+++ b/res/css/views/right_panel/_TimelineCard.pcss
@@ -143,10 +143,10 @@ limitations under the License.
         }
     }
 
-    .mx_CallEvent_wrapper {
+    .mx_LegacyCallEvent_wrapper {
         justify-content: center;
         margin: auto 5px;
-        .mx_CallEvent {
+        .mx_LegacyCallEvent {
             margin: 4px;
         }
     }
diff --git a/res/css/views/rooms/_EventBubbleTile.pcss b/res/css/views/rooms/_EventBubbleTile.pcss
index a49dc395e0..f536355d3f 100644
--- a/res/css/views/rooms/_EventBubbleTile.pcss
+++ b/res/css/views/rooms/_EventBubbleTile.pcss
@@ -154,7 +154,7 @@ limitations under the License.
         }
     }
 
-    .mx_CallEvent {
+    .mx_LegacyCallEvent {
         background-color: unset;
 
         border-style: solid;
@@ -533,7 +533,7 @@ limitations under the License.
         max-width: 100%;
     }
 
-    .mx_CallEvent_wrapper {
+    .mx_LegacyCallEvent_wrapper {
         justify-content: center;
     }
 }
diff --git a/src/components/views/voip/PipView.tsx b/src/components/views/voip/PipView.tsx
index 58ecd1e4ff..be411bb155 100644
--- a/src/components/views/voip/PipView.tsx
+++ b/src/components/views/voip/PipView.tsx
@@ -319,9 +319,9 @@ export default class PipView extends React.Component<IProps, IState> {
 
         if (this.state.showWidgetInPip) {
             const pipViewClasses = classNames({
-                mx_CallView: true,
-                mx_CallView_pip: pipMode,
-                mx_CallView_large: !pipMode,
+                mx_LegacyCallView: true,
+                mx_LegacyCallView_pip: pipMode,
+                mx_LegacyCallView_large: !pipMode,
             });
             const roomId = this.state.persistentRoomId;
             const roomForWidget = MatrixClientPeg.get().getRoom(roomId);
@@ -348,7 +348,7 @@ export default class PipView extends React.Component<IProps, IState> {
 
         if (!!pipContent) {
             return <PictureInPictureDragger
-                className="mx_CallPreview"
+                className="mx_LegacyCallPreview"
                 draggable={pipMode}
                 onDoubleClick={this.onDoubleClick}
                 onMove={this.onMove}