# Rich media modal para iOS

A partir da versão 6.7.5 do SDK da Pushwoosh, você tem a capacidade de enviar **Rich Media Modal**.

Estamos introduzindo o novo **Rich Media Modal**, que pode ser personalizado. O novo Rich Media Modal não bloqueia completamente a tela e pode ser posicionado em diferentes partes da tela (topo, inferior e centro).

> Para mais informações sobre páginas de Rich Media, por favor, consulte [nosso guia](/pt/product/content/rich-media).

## Configuração

<Aside type="note">
 Por padrão, o SDK da Pushwoosh para iOS suporta a exibição de rich media legados.
</Aside>

<Aside type="note">
Se você planeja usar a exibição de rich media modal como mensagens in-app no Customer Journey Builder, certifique-se de ter implementado o código mostrado abaixo. Veja a [integração básica do SDK](/pt/developer/pushwoosh-sdk/ios-sdk/setting-up-pushwoosh-ios-sdk/basic-integration-guide/) para detalhes.
</Aside>

```swift
//for silent push notifications
func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable : Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
    Pushwoosh.configure.handlePushReceived(userInfo)
    completionHandler(.noData)
}
```

### Opção 1: Configuração do Info.plist

Para habilitar a exibição do Rich Media Modal, defina o parâmetro `Pushwoosh_RICH_MEDIA_STYLE` no seu **info.plist** e atribua a ele o valor `MODAL_RICH_MEDIA`.

**Info.plist**:
```xml
<key>Pushwoosh_RICH_MEDIA_STYLE</key>
<string>MODAL_RICH_MEDIA</string>
```

### Opção 2: Configuração programática (SDK 7.0.14+)

<Aside type="tip">
Disponível desde a versão **7.0.14** do SDK da Pushwoosh para iOS.
</Aside>

Você também pode configurar o estilo de apresentação do Rich Media programaticamente no seu AppDelegate:

<Tabs>
<TabItem label="Swift">
```swift
func application(_ application: UIApplication,
                 didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Set modal presentation style
    Pushwoosh.media.setRichMediaPresentationStyle(.modal)

    // Configure modal window appearance
    Pushwoosh.media.modalRichMedia.configure(
        position: .PWModalWindowPositionBottom,
        presentAnimation: .PWAnimationPresentFromBottom,
        dismissAnimation: .PWAnimationDismissDown
    )

    Pushwoosh.configure.registerForPushNotifications()
    return true
}
```
</TabItem>
<TabItem label="Objective-C">
```objective-c
- (BOOL)application:(UIApplication *)application
        didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    // Set modal presentation style
    [[Pushwoosh media] setRichMediaPresentationStyle:PWRichMediaPresentationStyleModal];

    // Configure modal window appearance
    [[[Pushwoosh media] modalRichMedia] configureWithPosition:PWModalWindowPositionBottom
                                             presentAnimation:PWAnimationPresentFromBottom
                                             dismissAnimation:PWAnimationDismissDown];

    [[Pushwoosh configure] registerForPushNotifications];
    return YES;
}
```
</TabItem>
</Tabs>

Por padrão, o Rich Media Modal será exibido no centro da tela com uma animação de aparecimento de baixo para cima.

<div style={{ display: "flex", justifyContent: "center" }}>
<video src="/ios-push-notifications-ios-modal-rich-media-1.webm" title="Exemplo" autoplay loop muted playsinline width="300" />
</div>

### Posicionamento do Rich Media Modal

O Rich Media Modal pode ser posicionado em diferentes locais na tela.

```objective-c
/**
 Enum defining the possible positions for displaying a modal window.

 - `PWModalWindowPositionTop`: The modal window appears at the top of the screen, within the safe area.
 - `PWModalWindowPositionCenter`: The modal window appears at the center of the screen, within the safe area.
 - `PWModalWindowPositionBottom`: The modal window appears at the bottom of the screen, within the safe area.
 - `PWModalWindowPositionBottomSheet`: The modal window appears at the very bottom of the screen, ignoring the safe area.
 - `PWModalWindowPositionDefault`: The default position is the center of the screen, within the safe area.
 */
typedef NS_ENUM(NSInteger, ModalWindowPosition) {
    PWModalWindowPositionTop,       // Appears at the top of the screen (within safe area)
    PWModalWindowPositionCenter,    // Appears at the center of the screen (within safe area)
    PWModalWindowPositionBottom,    // Appears at the bottom of the screen (within safe area)
    PWModalWindowPositionBottomSheet, // Appears at the very bottom of the screen (ignores safe area)
    PWModalWindowPositionFullScreen, // Fullscreen, ignores safe area insets
    PWModalWindowPositionDefault    // Default position (center of the screen, within safe area)
};
```

O exemplo abaixo mostra um Rich Media Modal exibido no topo da tela.

<div style={{ display: "flex", justifyContent: "center" }}>
<video src="/ios-push-notifications-ios-modal-rich-media-2.webm" title="Exemplo" autoplay loop muted playsinline width="300" />
</div>

As animações de exibição do Rich Media Modal incluem:

```objective-c
typedef NS_ENUM(NSInteger, PresentModalWindowAnimation) {
    PWAnimationPresentFromBottom,
    PWAnimationPresentFromTop,
    PWAnimationPresentFromRight,
    PWAnimationPresentFromLeft,
    PWAnimationPresentNone
};
```

As animações de fechamento do Rich Media Modal incluem:

```objective-c
typedef NS_ENUM(NSInteger, DismissModalWindowAnimation) {
    PWAnimationDismissDown,
    PWAnimationDismissUp,
    PWAnimationDismissLeft,
    PWAnimationDismissRight,
    PWAnimationCurveEaseInOut,
    PWAnimationDismissNone,

    /**
     * Default dismiss animation is `PWAnimationCurveEaseInOut`
     */
    PWAnimationDismissDefault
};
```

O exemplo abaixo demonstra a exibição de um Rich Media Modal na parte inferior da tela com uma animação de exibição da esquerda para a direita e uma animação de fechamento para a direita:

<div style={{ display: "flex", justifyContent: "center" }}>
<video src="/ios-push-notifications-ios-modal-rich-media-3.webm" title="Exemplo" autoplay loop muted playsinline width="300" />
</div>

### Parâmetros adicionais para o Rich Media Modal

<Aside type="tip">
A API a seguir está disponível desde a versão **7.0.14** do SDK da Pushwoosh para iOS.
</Aside>

Parâmetros adicionais para a exibição do Rich Media Modal incluem opções como adicionar feedback tátil do tipo vibração, habilitar gestos de deslizar e definir um temporizador de fechamento automático após uma duração especificada.

<Tabs>
<TabItem label="Swift">
```swift
// Haptic Feedback Type
Pushwoosh.media.modalRichMedia.setHapticFeedbackType(.PWHapticFeedbackLight)

// Swipe directions to dismiss
Pushwoosh.media.modalRichMedia.setDismissSwipeDirections([
    NSNumber(value: DismissSwipeDirection.PWSwipeDismissDown.rawValue),
    NSNumber(value: DismissSwipeDirection.PWSwipeDismissUp.rawValue)
])

// Set Rich Media corner radius
let topCorners = PWCornerTypeTopLeft.rawValue | PWCornerTypeTopRight.rawValue
Pushwoosh.media.modalRichMedia.setCornerType(CornerType(rawValue: topCorners), withRadius: 16)

// Close Modal Rich Media after N seconds
Pushwoosh.media.modalRichMedia.closeAfter(3)
```
</TabItem>
<TabItem label="Objective-C">
```objective-c
// Haptic Feedback Type
[[[Pushwoosh media] modalRichMedia] setHapticFeedbackType:PWHapticFeedbackLight];

// Swipe directions to dismiss
[[[Pushwoosh media] modalRichMedia] setDismissSwipeDirections:@[
    @(PWSwipeDismissDown),
    @(PWSwipeDismissUp)
]];

// Set Rich Media corner radius
CornerType topCorners = PWCornerTypeTopLeft | PWCornerTypeTopRight;
[[[Pushwoosh media] modalRichMedia] setCornerType:topCorners withRadius:16.0];

// Close Modal Rich Media after N seconds
[[[Pushwoosh media] modalRichMedia] closeAfter:3.0];
```
</TabItem>
</Tabs>

**Tipos de Feedback Tátil:**

```objective-c
typedef NS_ENUM(NSInteger, HapticFeedbackType) {
    PWHapticFeedbackLight,         // Light vibration feedback
    PWHapticFeedbackMedium,        // Medium vibration feedback
    PWHapticFeedbackHard,          // Strong vibration feedback
    PWHapticFeedbackNone           // Vibration is off (default)
};
```

**Direções de Deslize:**

```objective-c
typedef NS_ENUM(NSInteger, DismissSwipeDirection) {
    PWSwipeDismissDown,
    PWSwipeDismissUp,
    PWSwipeDismissLeft,
    PWSwipeDismissRight,
    PWSwipeDismissNone
};
```

## PWRichMediaPresentingDelegate

<Aside type="tip">
A API de delegate via `Pushwoosh.media.modalRichMedia.delegate` está disponível desde a versão **7.0.14** do SDK.
</Aside>

Para gerenciar a fila de rich media modais, você precisa implementar os métodos de delegate do `PWRichMediaPresentingDelegate`.
Ao usar essa funcionalidade, os rich media modais são apresentados sequencialmente, e o próximo não será exibido até que o usuário feche o atual. Assim que o usuário fechar o rich media apresentado, o próximo, que fazia parte de uma notificação push diferente, será exibido.

<Tabs>
<TabItem label="Swift">
```swift
import UIKit
import PushwooshFramework

@main
class AppDelegate: UIResponder, UIApplicationDelegate, PWRichMediaPresentingDelegate {

    var richMediaQueue: [PWRichMedia] = []
    var isPresenting = false

    func application(_ application: UIApplication,
                     didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

        // Configure modal rich media
        Pushwoosh.media.setRichMediaPresentationStyle(.modal)
        Pushwoosh.media.modalRichMedia.configure(
            position: .PWModalWindowPositionBottom,
            presentAnimation: .PWAnimationPresentFromBottom,
            dismissAnimation: .PWAnimationDismissDown
        )

        // Set delegate
        Pushwoosh.media.modalRichMedia.delegate = self

        Pushwoosh.configure.registerForPushNotifications()
        return true
    }

    // MARK: - PWRichMediaPresentingDelegate

    func richMediaManager(_ richMediaManager: PWRichMediaManager, shouldPresent richMedia: PWRichMedia) -> Bool {
        if !richMediaQueue.contains(where: { $0 === richMedia }) {
            richMediaQueue.append(richMedia)
        }
        return !isPresenting
    }

    func richMediaManager(_ richMediaManager: PWRichMediaManager, didPresent richMedia: PWRichMedia) {
        isPresenting = true
    }

    func richMediaManager(_ richMediaManager: PWRichMediaManager, didClose richMedia: PWRichMedia) {
        isPresenting = false

        if let idx = richMediaQueue.firstIndex(where: { $0 === richMedia }) {
            richMediaQueue.remove(at: idx)
        }

        // Present next rich media in queue
        if let nextRichMedia = richMediaQueue.first {
            Pushwoosh.media.modalRichMedia.present(nextRichMedia)
        }
    }

    func richMediaManager(_ richMediaManager: PWRichMediaManager, presentingDidFailFor richMedia: PWRichMedia, withError error: Error) {
        richMediaManager(richMediaManager, didClose: richMedia)
    }
}
```
</TabItem>
<TabItem label="Objective-C">
```objective-c
#import "AppDelegate.h"
#import <PushwooshFramework/PushwooshFramework.h>

@interface AppDelegate () <PWRichMediaPresentingDelegate>

@property (nonatomic, strong) NSMutableArray<PWRichMedia *> *richMediaQueue;
@property (nonatomic, assign) BOOL isPresenting;

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
        didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    self.richMediaQueue = [NSMutableArray array];
    self.isPresenting = NO;

    // Configure modal rich media
    [[Pushwoosh media] setRichMediaPresentationStyle:PWRichMediaPresentationStyleModal];
    [[[Pushwoosh media] modalRichMedia] configureWithPosition:PWModalWindowPositionBottom
                                             presentAnimation:PWAnimationPresentFromBottom
                                             dismissAnimation:PWAnimationDismissDown];

    // Set delegate
    [[[Pushwoosh media] modalRichMedia] setDelegate:self];

    [[Pushwoosh configure] registerForPushNotifications];
    return YES;
}

#pragma mark - PWRichMediaPresentingDelegate

- (BOOL)richMediaManager:(PWRichMediaManager *)richMediaManager shouldPresentRichMedia:(PWRichMedia *)richMedia {
    if (![self.richMediaQueue containsObject:richMedia]) {
        [self.richMediaQueue addObject:richMedia];
    }
    return !self.isPresenting;
}

- (void)richMediaManager:(PWRichMediaManager *)richMediaManager didPresentRichMedia:(PWRichMedia *)richMedia {
    self.isPresenting = YES;
}

- (void)richMediaManager:(PWRichMediaManager *)richMediaManager didCloseRichMedia:(PWRichMedia *)richMedia {
    self.isPresenting = NO;

    [self.richMediaQueue removeObject:richMedia];

    // Present next rich media in queue
    if (self.richMediaQueue.count > 0) {
        [[[Pushwoosh media] modalRichMedia] presentRichMedia:self.richMediaQueue.firstObject];
    }
}

- (void)richMediaManager:(PWRichMediaManager *)richMediaManager presentingDidFailForRichMedia:(PWRichMedia *)richMedia withError:(NSError *)error {
    [self richMediaManager:richMediaManager didCloseRichMedia:richMedia];
}

@end
```
</TabItem>
</Tabs>