feat: Add PIP (Picture-in-Picture) support (#2391)

- Closes: #1657

tests/components-lib/media-player/image.test.ts

@@ -114,4 +114,10 @@ describe('ImageMediaPlayerController', () => {
       expect(controller.getFullscreenElement()).toBeNull();
     });
   });
+
+  it('should return null for getPIPElement', () => {
+    const controller = new ImageMediaPlayerController(createLitElement(), () => null);
+
+    expect(controller.getPIPElement()).toBeNull();
+  });
 });

tests/components-lib/media-player/jsmpeg.test.ts

@@ -249,4 +249,14 @@ describe('JSMPEGMediaPlayerController', () => {
       expect(controller.getFullscreenElement()).toBeNull();
     });
   });
+
+  it('should return null for getPIPElement', () => {
+    const controller = new JSMPEGMediaPlayerController(
+      createLitElement(),
+      () => mock<JSMpeg.VideoElement>(),
+      () => null,
+    );
+
+    expect(controller.getPIPElement()).toBeNull();
+  });
 });

tests/components-lib/media-player/updating-image.test.ts

@@ -189,4 +189,14 @@ describe('UpdatingImageMediaPlayerController', () => {
       expect(controller.getFullscreenElement()).toBeNull();
     });
   });
+
+  it('should return null for getPIPElement', () => {
+    const controller = new UpdatingImageMediaPlayerController(
+      createLitElement(),
+      () => null,
+      () => mock<CachedValueController<string>>(),
+    );
+
+    expect(controller.getPIPElement()).toBeNull();
+  });
 });

tests/components-lib/media-player/video.test.ts

@@ -270,4 +270,20 @@ describe('VideoMediaPlayerController', () => {
       expect(controller.getFullscreenElement()).toBeNull();
     });
   });
+
+  describe('should get PIP element', () => {
+    it('should return video element when available', () => {
+      const video = mock<HTMLVideoElement>();
+
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      expect(controller.getPIPElement()).toBe(video);
+    });
+
+    it('should return null without video', () => {
+      const controller = new VideoMediaPlayerController(createLitElement(), () => null);
+
+      expect(controller.getPIPElement()).toBeNull();
+    });
+  });
 });

tests/components-lib/menu-button-controller.test.ts

@@ -8,6 +8,7 @@ import { FoldersManager } from '../../src/card-controller/folders/manager.js';
 import { FolderQuery } from '../../src/card-controller/folders/types';
 import { FullscreenManager } from '../../src/card-controller/fullscreen/fullscreen-manager.js';
 import { MediaPlayerManager } from '../../src/card-controller/media-player-manager.js';
+import { PIPManager } from '../../src/card-controller/pip-manager.js';
 import { MicrophoneManager } from '../../src/card-controller/microphone-manager.js';
 import { ViewManager } from '../../src/card-controller/view/view-manager.js';
 import {
@@ -1484,6 +1485,75 @@ describe('MenuButtonController', () => {
     });
   });
 
+  describe('should have pip button', () => {
+    it('when not in PIP mode', () => {
+      const pipManager = mock<PIPManager>();
+      vi.mocked(pipManager.isInPIP).mockReturnValue(false);
+      vi.mocked(pipManager.isAvailable).mockReturnValue(true);
+
+      const buttons = calculateButtons(controller, { pipManager });
+
+      expect(buttons).toContainEqual({
+        alignment: 'matching',
+        state_color: true,
+        permanent: false,
+        icon: 'mdi:picture-in-picture-bottom-right',
+        enabled: false,
+        priority: 50,
+        type: 'custom:advanced-camera-card-menu-icon',
+        title: 'Picture in Picture',
+        tap_action: {
+          action: 'fire-dom-event',
+          advanced_camera_card_action: 'pip',
+        },
+        style: {},
+      });
+    });
+
+    it('when in PIP mode', () => {
+      const pipManager = mock<PIPManager>();
+      vi.mocked(pipManager.isInPIP).mockReturnValue(true);
+      vi.mocked(pipManager.isAvailable).mockReturnValue(true);
+
+      const buttons = calculateButtons(controller, { pipManager });
+
+      expect(buttons).toContainEqual({
+        alignment: 'matching',
+        state_color: true,
+        permanent: false,
+        icon: 'mdi:picture-in-picture-bottom-right-outline',
+        enabled: false,
+        priority: 50,
+        type: 'custom:advanced-camera-card-menu-icon',
+        title: 'Picture in Picture',
+        tap_action: {
+          action: 'fire-dom-event',
+          advanced_camera_card_action: 'pip',
+        },
+        style: { color: 'var(--advanced-camera-card-menu-button-active-color)' },
+      });
+    });
+
+    it('when not supported', () => {
+      const pipManager = mock<PIPManager>();
+      vi.mocked(pipManager.isAvailable).mockReturnValue(false);
+
+      const buttons = calculateButtons(controller, { pipManager });
+
+      expect(buttons).not.toContainEqual(
+        expect.objectContaining({ title: 'Picture in Picture' }),
+      );
+    });
+
+    it('when no pipManager provided', () => {
+      const buttons = calculateButtons(controller, {});
+
+      expect(buttons).not.toContainEqual(
+        expect.objectContaining({ title: 'Picture in Picture' }),
+      );
+    });
+  });
+
   describe('should have expand button', () => {
     it('when not expanded', () => {
       const buttons = calculateButtons(controller, { inExpandedMode: false });