Automatically adjust the ElementCall PiP when changing orientations

ElementX/Sources/Screens/CallScreen/CallScreenModels.swift

@@ -57,6 +57,9 @@ enum CallScreenJavaScriptMessageName: String, CaseIterable {
     case onOutputDeviceSelect
     /// Used to handle the webview back button
     case onBackButtonPressed
+    /// Used to handle PiP orientation changes
+    case onPipMediaOrientationUpdate
+    
     /// Forward logs to the native side for debugging purposes.
     case forwardLogs
     
@@ -96,6 +99,12 @@ enum CallScreenJavaScriptMessageName: String, CaseIterable {
                 window.webkit.messageHandlers.\(rawValue).postMessage("");
             }
             """
+        case .onPipMediaOrientationUpdate:
+            """
+            window.controls.\(rawValue) = (orientation) => {
+                window.webkit.messageHandlers.\(rawValue).postMessage(orientation);
+            }
+            """
         case .forwardLogs:
             """
             (function() {

ElementX/Sources/Screens/CallScreen/View/CallScreen.swift

@@ -88,7 +88,7 @@ private struct CallView: UIViewRepresentable {
         init(viewModelContext: CallScreenViewModel.Context) {
             self.viewModelContext = viewModelContext
             pictureInPictureViewController = AVPictureInPictureVideoCallViewController()
-            pictureInPictureViewController.preferredContentSize = CGSize(width: 1920, height: 1080)
+            pictureInPictureViewController.preferredContentSize = PiPSize.portrait.size
             
             super.init()
             
@@ -192,6 +192,16 @@ private struct CallView: UIViewRepresentable {
                 viewModelContext?.send(viewAction: .outputDeviceSelected(deviceID: deviceID))
             case .onBackButtonPressed:
                 viewModelContext?.send(viewAction: .navigateBack)
+            case .onPipMediaOrientationUpdate:
+                guard let orientation = message.body as? String else { return }
+                switch orientation {
+                case "portrait":
+                    pictureInPictureViewController.preferredContentSize = PiPSize.portrait.size
+                case "landscape":
+                    pictureInPictureViewController.preferredContentSize = PiPSize.landscape.size
+                default:
+                    break
+                }
             case .forwardLogs:
                 guard let body = message.body as? [String: String],
                       let level = body["level"],
@@ -340,6 +350,20 @@ private struct CallView: UIViewRepresentable {
             coordinator?.userContentController(userContentController, didReceive: message)
         }
     }
+    
+    private enum PiPSize {
+        case portrait
+        case landscape
+        
+        var size: CGSize {
+            switch self {
+            case .portrait:
+                .init(width: 1080, height: 1920)
+            case .landscape:
+                .init(width: 1920, height: 1080)
+            }
+        }
+    }
 }
 
 // MARK: - Previews