Redesign widget pip and move into shared component (#32654)

* redesign widget pip and move into shared component

* fix onBackClick handler

* fix ci

* Update README.md prepare -> prepack

* add vm tests

* Update WidgetPipView.stories.tsx

* fix tests

* playwright tests

* fix test id

* remove unused files (reappeared after rebase)

* update storybook screenshot tests

* update playwright tests

* adjust padding

* review

* comment and docstring corrections

* fix imports and `this.props`

* fix double `complementary` item

* add WidgetPipView tests and revmoe `setViewingRoom` from
WidgetPipViewModelInterface.

* add doc sting to `setViewingRoom`

* Update RoomStatusBarView.test.tsx

* fix copyright

* Update RoomView-test.tsx.snap

* revert accidental Copyright year changes

* update snapshot RoomView-test

apps/web/test/unit-tests/components/structures/PipContainer-test.tsx

@@ -17,7 +17,7 @@ import {
     RoomStateEvent,
     type RoomMember,
 } from "matrix-js-sdk/src/matrix";
-import { Widget, type ClientWidgetApi } from "matrix-widget-api";
+import { Widget } from "matrix-widget-api";
 
 import {
     useMockedCalls,
@@ -47,7 +47,6 @@ import { Container, WidgetLayoutStore } from "../../../../src/stores/widgets/Wid
 import WidgetStore from "../../../../src/stores/WidgetStore";
 import { WidgetType } from "../../../../src/widgets/WidgetType";
 import { SdkContextClass } from "../../../../src/contexts/SDKContext";
-import { ElementWidgetActions } from "../../../../src/stores/widgets/ElementWidgetActions";
 import { type WidgetMessaging } from "../../../../src/stores/widgets/WidgetMessaging";
 
 jest.mock("../../../../src/stores/OwnProfileStore", () => ({
@@ -194,7 +193,7 @@ describe("PipContainer", () => {
         expect(screen.queryByRole("complementary")).toBeNull();
     });
 
-    it("shows an active call with back and leave buttons", async () => {
+    it("shows an active call with back buttons", async () => {
         renderPip();
 
         await withCall(async (call) => {
@@ -211,11 +210,6 @@ describe("PipContainer", () => {
                 metricsTrigger: expect.any(String),
             });
             defaultDispatcher.unregister(dispatcherRef);
-
-            // The leave button should disconnect from the call
-            const disconnectSpy = jest.spyOn(call, "disconnect");
-            await user.click(screen.getByRole("button", { name: "Leave" }));
-            expect(disconnectSpy).toHaveBeenCalled();
         });
     });
 
@@ -252,16 +246,7 @@ describe("PipContainer", () => {
         mockPlatformPeg({ supportsJitsiScreensharing: () => true });
         setUpRoomViewStore();
         viewRoom(room2.roomId);
-        const widget = WidgetStore.instance.addVirtualWidget(
-            {
-                id: "1",
-                creatorUserId: "@alice:example.org",
-                type: WidgetType.JITSI.preferred,
-                url: "https://meet.example.org",
-                name: "Jitsi example",
-            },
-            room.roomId,
-        );
+
         renderPip();
 
         await withWidget(async () => {
@@ -277,25 +262,6 @@ describe("PipContainer", () => {
                 metricsTrigger: expect.any(String),
             });
             defaultDispatcher.unregister(dispatcherRef);
-
-            // The leave button should hangup the call
-            const sendSpy = jest
-                .fn<
-                    ReturnType<ClientWidgetApi["transport"]["send"]>,
-                    Parameters<ClientWidgetApi["transport"]["send"]>
-                >()
-                .mockResolvedValue({});
-            const mockMessaging = {
-                on: () => {},
-                off: () => {},
-                stop: () => {},
-                widgetApi: {
-                    transport: { send: sendSpy },
-                },
-            } as unknown as WidgetMessaging;
-            WidgetMessagingStore.instance.storeMessaging(new Widget(widget), room.roomId, mockMessaging);
-            await user.click(screen.getByRole("button", { name: "Leave" }));
-            expect(sendSpy).toHaveBeenCalledWith(ElementWidgetActions.HangupCall, {});
         });
 
         WidgetStore.instance.removeVirtualWidget("1", room.roomId);

apps/web/test/unit-tests/components/structures/__snapshots__/PictureInPictureDragger-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and 2 should render both contents 1`] = `
 <div>
   <aside
-    style="transform: translateX(680px) translateY(478px);"
+    style="transform: translateX(672px) translateY(80px);"
   >
     <div>
       content 1
@@ -20,7 +20,7 @@ exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 a
 exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and rendering PiP content 2 should update the PiP content 1`] = `
 <div>
   <aside
-    style="transform: translateX(680px) translateY(478px);"
+    style="transform: translateX(672px) translateY(80px);"
   >
     <div>
       content 2
@@ -34,7 +34,7 @@ exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 a
 exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and rerendering PiP content 1 should not change the PiP content: pip-content-1 1`] = `
 <div>
   <aside
-    style="transform: translateX(680px) translateY(478px);"
+    style="transform: translateX(672px) translateY(80px);"
   >
     <div>
       content 1
@@ -46,7 +46,7 @@ exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 a
 exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 should render the PiP content: pip-content-1 1`] = `
 <div>
   <aside
-    style="transform: translateX(680px) translateY(478px);"
+    style="transform: translateX(672px) translateY(80px);"
   >
     <div>
       content 1

apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -237,7 +237,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
           class="_content_193k4_38"
         >
           <p
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _title_1rm46_17"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _title_1xryk_24"
             id="_r_1c3_"
           >
             Could not start a chat with this user
@@ -247,7 +247,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
           class="_actions_193k4_60"
         >
           <button
-            class="_button_13vu4_8 _primaryAction_1rm46_13 _has-icon_13vu4_60"
+            class="_button_13vu4_8 _primaryAction_1xryk_20 _has-icon_13vu4_60"
             data-kind="primary"
             data-size="sm"
             role="button"