Fix the picture-in-picture component being off screen (#9246)

Author: robintown

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");
                         });
                     });
                 });

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;
         }
     }

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;
     }
 }

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}