Remove unnecessary PipContainer component

Author: robintown

res/css/_components.pcss

@@ -372,7 +372,6 @@
 @import "./views/voip/_LegacyCallViewForRoom.pcss";
 @import "./views/voip/_LegacyCallViewHeader.pcss";
 @import "./views/voip/_LegacyCallViewSidebar.pcss";
-@import "./views/voip/_PiPContainer.pcss";
 @import "./views/voip/_VideoFeed.pcss";
 @import "./voice-broadcast/atoms/_LiveBadge.pcss";
 @import "./voice-broadcast/atoms/_PlaybackControlButton.pcss";

res/css/views/voip/_LegacyCallPreview.pcss

@@ -19,8 +19,6 @@ limitations under the License.
     left: 0;
     top: 0;
 
-    pointer-events: initial; /* restore pointer events so the user can leave/interact */
-
     .mx_VideoFeed_remote.mx_VideoFeed_voice {
         min-height: 150px;
     }
@@ -29,4 +27,4 @@ limitations under the License.
         border-radius: 8px;
         overflow: hidden;
     }
-}
+}

res/css/views/voip/_PiPContainer.pcss

@@ -41,7 +41,6 @@ import { DefaultTagID } from "../../stores/room-list/models";
 import { hideToast as hideServerLimitToast, showToast as showServerLimitToast } from "../../toasts/ServerLimitToast";
 import { Action } from "../../dispatcher/actions";
 import LeftPanel from "./LeftPanel";
-import PipContainer from "../views/voip/PipContainer";
 import { ViewRoomDeltaPayload } from "../../dispatcher/payloads/ViewRoomDeltaPayload";
 import RoomListStore from "../../stores/room-list/RoomListStore";
 import NonUrgentToastContainer from "./NonUrgentToastContainer";
@@ -71,6 +70,7 @@ import { SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload
 import { IConfigOptions } from "../../IConfigOptions";
 import LeftPanelLiveShareWarning from "../views/beacon/LeftPanelLiveShareWarning";
 import { UserOnboardingPage } from "../views/user-onboarding/UserOnboardingPage";
+import { PipContainer } from "./PipContainer";
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.

src/components/structures/LoggedInView.tsx

@@ -16,9 +16,9 @@ limitations under the License.
 
 import React, { createRef } from "react";
 
-import UIStore, { UI_EVENTS } from "../../../stores/UIStore";
-import { lerp } from "../../../utils/AnimationUtils";
-import { MarkedExecution } from "../../../utils/MarkedExecution";
+import UIStore, { UI_EVENTS } from "../../stores/UIStore";
+import { lerp } from "../../utils/AnimationUtils";
+import { MarkedExecution } from "../../utils/MarkedExecution";
 
 const PIP_VIEW_WIDTH = 336;
 const PIP_VIEW_HEIGHT = 232;

src/components/views/voip/PictureInPictureDragger.tsx renamed to src/components/structures/PictureInPictureDragger.tsx

@@ -21,21 +21,21 @@ import classNames from "classnames";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { Optional } from "matrix-events-sdk";
 
-import LegacyCallView from "./LegacyCallView";
-import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../../LegacyCallHandler";
-import PersistentApp from "../elements/PersistentApp";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import LegacyCallView from "../views/voip/LegacyCallView";
+import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../LegacyCallHandler";
+import PersistentApp from "../views/elements/PersistentApp";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
 import PictureInPictureDragger, { CreatePipChildren } from "./PictureInPictureDragger";
-import dis from "../../../dispatcher/dispatcher";
-import { Action } from "../../../dispatcher/actions";
-import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
-import LegacyCallViewHeader from "./LegacyCallView/LegacyCallViewHeader";
-import ActiveWidgetStore, { ActiveWidgetStoreEvent } from "../../../stores/ActiveWidgetStore";
-import WidgetStore, { IApp } from "../../../stores/WidgetStore";
-import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { UPDATE_EVENT } from "../../../stores/AsyncStore";
-import { SDKContext, SdkContextClass } from "../../../contexts/SDKContext";
-import { CallStore } from "../../../stores/CallStore";
+import dis from "../../dispatcher/dispatcher";
+import { Action } from "../../dispatcher/actions";
+import { Container, WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
+import LegacyCallViewHeader from "../views/voip/LegacyCallView/LegacyCallViewHeader";
+import ActiveWidgetStore, { ActiveWidgetStoreEvent } from "../../stores/ActiveWidgetStore";
+import WidgetStore, { IApp } from "../../stores/WidgetStore";
+import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
+import { UPDATE_EVENT } from "../../stores/AsyncStore";
+import { SDKContext, SdkContextClass } from "../../contexts/SDKContext";
+import { CallStore } from "../../stores/CallStore";
 import {
     useCurrentVoiceBroadcastPreRecording,
     useCurrentVoiceBroadcastRecording,
@@ -46,8 +46,8 @@ import {
     VoiceBroadcastRecording,
     VoiceBroadcastRecordingPip,
     VoiceBroadcastSmallPlaybackBody,
-} from "../../../voice-broadcast";
-import { useCurrentVoiceBroadcastPlayback } from "../../../voice-broadcast/hooks/useCurrentVoiceBroadcastPlayback";
+} from "../../voice-broadcast";
+import { useCurrentVoiceBroadcastPlayback } from "../../voice-broadcast/hooks/useCurrentVoiceBroadcastPlayback";
 
 const SHOW_CALL_IN_STATES = [
     CallState.Connected,
@@ -128,12 +128,12 @@ function getPrimarySecondaryCallsForPip(roomId: Optional<string>): [MatrixCall |
 }
 
 /**
- * PipView shows a small version of the LegacyCallView or a sticky widget hovering over the UI in 'picture-in-picture'
- * (PiP mode). It displays the call(s) which is *not* in the room the user is currently viewing
+ * PipContainer shows a small version of the LegacyCallView or a sticky widget hovering over the UI in
+ * 'picture-in-picture' (PiP mode). It displays the call(s) which is *not* in the room the user is currently viewing
  * and all widgets that are active but not shown in any other possible container.
  */
 
-class PipView extends React.Component<IProps, IState> {
+class PipContainerInner extends React.Component<IProps, IState> {
     // The cast is not so great, but solves the typing issue for the moment.
     // Proper solution: use useRef (requires the component to be refactored to a functional component).
     private movePersistedElement = createRef<() => void>() as React.MutableRefObject<() => void>;
@@ -452,7 +452,7 @@ class PipView extends React.Component<IProps, IState> {
     }
 }
 
-const PipViewHOC: React.FC<IProps> = (props) => {
+export const PipContainer: React.FC<IProps> = (props) => {
     const sdkContext = useContext(SDKContext);
     const voiceBroadcastPreRecordingStore = sdkContext.voiceBroadcastPreRecordingStore;
     const { currentVoiceBroadcastPreRecording } = useCurrentVoiceBroadcastPreRecording(voiceBroadcastPreRecordingStore);
@@ -464,13 +464,11 @@ const PipViewHOC: React.FC<IProps> = (props) => {
     const { currentVoiceBroadcastPlayback } = useCurrentVoiceBroadcastPlayback(voiceBroadcastPlaybacksStore);
 
     return (
-        <PipView
+        <PipContainerInner
             voiceBroadcastPlayback={currentVoiceBroadcastPlayback}
             voiceBroadcastPreRecording={currentVoiceBroadcastPreRecording}
             voiceBroadcastRecording={currentVoiceBroadcastRecording}
             {...props}
         />
     );
 };
-
-export default PipViewHOC;

src/components/views/voip/PipView.tsx renamed to src/components/structures/PipContainer.tsx

@@ -34,30 +34,30 @@ import {
     wrapInMatrixClientContext,
     wrapInSdkContext,
     mkRoomCreateEvent,
-} from "../../../test-utils";
-import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import { CallStore } from "../../../../src/stores/CallStore";
-import { WidgetMessagingStore } from "../../../../src/stores/widgets/WidgetMessagingStore";
-import UnwrappedPipView from "../../../../src/components/views/voip/PipView";
-import ActiveWidgetStore from "../../../../src/stores/ActiveWidgetStore";
-import DMRoomMap from "../../../../src/utils/DMRoomMap";
-import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
-import { Action } from "../../../../src/dispatcher/actions";
-import { ViewRoomPayload } from "../../../../src/dispatcher/payloads/ViewRoomPayload";
-import { TestSdkContext } from "../../../TestSdkContext";
+} from "../../test-utils";
+import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
+import { CallStore } from "../../../src/stores/CallStore";
+import { WidgetMessagingStore } from "../../../src/stores/widgets/WidgetMessagingStore";
+import { PipContainer as UnwrappedPipContainer } from "../../../src/components/structures/PipContainer";
+import ActiveWidgetStore from "../../../src/stores/ActiveWidgetStore";
+import DMRoomMap from "../../../src/utils/DMRoomMap";
+import defaultDispatcher from "../../../src/dispatcher/dispatcher";
+import { Action } from "../../../src/dispatcher/actions";
+import { ViewRoomPayload } from "../../../src/dispatcher/payloads/ViewRoomPayload";
+import { TestSdkContext } from "../../TestSdkContext";
 import {
     VoiceBroadcastInfoState,
     VoiceBroadcastPlaybacksStore,
     VoiceBroadcastPreRecording,
     VoiceBroadcastPreRecordingStore,
     VoiceBroadcastRecording,
     VoiceBroadcastRecordingsStore,
-} from "../../../../src/voice-broadcast";
-import { mkVoiceBroadcastInfoStateEvent } from "../../../voice-broadcast/utils/test-utils";
-import { RoomViewStore } from "../../../../src/stores/RoomViewStore";
-import { IRoomStateEventsActionPayload } from "../../../../src/actions/MatrixActionCreators";
+} from "../../../src/voice-broadcast";
+import { mkVoiceBroadcastInfoStateEvent } from "../../voice-broadcast/utils/test-utils";
+import { RoomViewStore } from "../../../src/stores/RoomViewStore";
+import { IRoomStateEventsActionPayload } from "../../../src/actions/MatrixActionCreators";
 
-describe("PipView", () => {
+describe("PipContainer", () => {
     useMockedCalls();
     jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});
 
@@ -120,8 +120,8 @@ describe("PipView", () => {
     });
 
     const renderPip = () => {
-        const PipView = wrapInMatrixClientContext(wrapInSdkContext(UnwrappedPipView, sdkContext));
-        render(<PipView />);
+        const PipContainer = wrapInMatrixClientContext(wrapInSdkContext(UnwrappedPipContainer, sdkContext));
+        render(<PipContainer />);
     };
 
     const viewRoom = (roomId: string) =>