# Release note

* [https://github.com/pixlee/pixlee-ios-sdk/releases/tag/2.8.0](https://github.com/pixlee/pixlee-ios-sdk/releases/tag/2.8.0)

# A new view: PXLWidgetView (similar to our web Widget)

* automatically fire APIs\[api/v2/albums/from\_sku, api/v2/albums/\{album\_id}/photos] to get and display photos
* automatically fire Analytics[openedWidget, widgetVisible]
* provide grid (2 columns) and list layouts

### UI Options

For both Grid and List: load more UI (customizable color, font, text, height of the cell, padding)

#### List

* turn auto video playing on/off: play a video located at the top of the list

#### Grid

* Line Size between items
* Header
  * Image URL
  * Customizable text

<Table>
  <thead>
    <tr>
      <th>
        Grid Mode
      </th>

      <th>
        ListMode
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        <img src="https://i.ibb.co/YWxZfJ7/ezgif-com-gif-maker.gif" width="200" />
      </td>

      <td>
        <img src="https://i.ibb.co/ZWjVyJp/ezgif-com-gif-maker-1.gif" width="200" />
      </td>
    </tr>
  </tbody>
</Table>

# Example

```swift
#!swift Your View controller
class WidgetExampleViewController: UIViewController {
    static func getInstance() -> WidgetExampleViewController {
        let vc = WidgetExampleViewController(nibName: "EmptyViewController", bundle: Bundle.main)
        return vc
    }

    var widgetView = PXLWidgetView()

    override func viewDidLoad() {
        super.viewDidLoad()
        widgetView.delegate = self
        view.addSubview(widgetView)

        if let pixleeCredentials = try? PixleeCredentials.create() {
            let albumId = pixleeCredentials.albumId
            let album = PXLAlbum(identifier: albumId)
            album.filterOptions = PXLAlbumFilterOptions(hasPermission: true, hasProduct: true)
            album.sortOptions = PXLAlbumSortOptions(sortType: .approvedTime, ascending: false)
            album.perPage = 30
            widgetView.searchingAlbum = album
        }
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        widgetView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)
    }

    /*
     // MARK: - Navigation
     
     // In a storyboard-based application, you will often want to do a little preparation before navigation
     override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
     // Get the new view controller using segue.destination.
     // Pass the selected object to the new view controller.
     }
     */
    var videoCell: PXLGridViewCell?
}

// MARK: - Photo's click-event listeners
extension WidgetViewController: PXLPhotoViewDelegate {
    public func onPhotoButtonClicked(photo: PXLPhoto) {
        print("Action tapped \(photo.id)")
        openPhotoProduct(photo: photo)
    }

    public func onPhotoClicked(photo: PXLPhoto) {
        print("Photo Clicked \(photo.id)")
        openPhotoProduct(photo: photo)
    }

    func openPhotoProduct(photo: PXLPhoto) {
        present(PhotoProductListDemoViewController.getInstance(photo), animated: false, completion: nil)
    }
}

// MARK: Widget's UI settings and scroll events
extension WidgetViewController: PXLWidgetViewDelegate {
    func setWidgetSpec() -> WidgetSpec {
        // A example of List
        /*WidgetSpec.list(.init(cellHeight: 350,
                isVideoMutted: true,
                autoVideoPlayEnabled: true,
                loadMore: .init(cellHeight: 100.0,
                        cellPadding: 10.0,
                        text: "LoadMore",
                        textColor: UIColor.darkGray,
                        textFont: UIFont.systemFont(ofSize: UIFont.buttonFontSize),
                        loadingStyle: .gray)))*/
        // A example of Grid
        WidgetSpec.grid(
                .init(
                        cellHeight: 350,
                        cellPadding: 4,
                        loadMore: .init(cellHeight: 100.0,
                                cellPadding: 10.0,
                                text: "LoadMore",
                                textColor: UIColor.darkGray,
                                textFont: UIFont.systemFont(ofSize: UIFont.buttonFontSize),
                                loadingStyle: .gray),
                        header: .image(.remotePath(.init(headerHeight: 200,
                                headerContentMode: .scaleAspectFill,
                                headerGifUrl: "https://media0.giphy.com/media/CxQw7Rc4Fx4OBNBLa8/giphy.webp")))))
    }

    func setWidgetType() -> String {
        "replace_this_with_yours"
    }

    func setupPhotoCell(cell: PXLGridViewCell, photo: PXLPhoto) {
        if photo.isVideo {
            videoCell = cell
        }
        // Example(all elements) : cell.setupCell(photo: photo, title: "Title", subtitle: "subtitle", buttonTitle: "Button", configuration: PXLPhotoViewConfiguration(cropMode: .centerFill), delegate: self)
        cell.setupCell(photo: photo, title: nil, subtitle: nil, buttonTitle: nil, configuration: PXLPhotoViewConfiguration(cropMode: .centerFill), delegate: self)
    }

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // print("scrollViewDidScroll \(scrollView)")
    }
}