Shortform API

    Shortform API


    기사 요약

    숏폼 상세 재생

    ShopLiveShortform.play(requestData: ShopLiveShortformCollectionData?)를 통해 Shortform 상세화면을 재생합니다. (ShopLiveShortformCollectionData에 연관된 재생 목록)

    • ShopLiveShortformCollectionData의 필드 값 중 하나 이상 넣으면 관련 상세화면을 재생할 수 있습니다.

    • ShopLiveShortformCollectionDatanull이라면 전체 상세화면을 재생할 수 있습니다.

    ShopLiveShortformCollectionData

    Property name

    Type

    Description

    shortsId

    String?

    숏폼 고유 ID

    shortsCollectionId

    String?

    숏폼 그룹 ID

    shortsSrn

    String?

    숏폼에 할당한 리소스를 관리하기 위한 Global resource name 입니다. 샵라이브 내부적으로 사용하는 값입니다.

    tags

    [String]?

    관련 Tag 검색을 할 수 있는 값

    tagSearchOperator

    ShopLiveTagSearchOperator?

    Tag 검색 옵션

    • OR : 통합 검색

    • AND : 교차 검색

    brands

    [String]?

    관련 Brand 검색을 할 수 있는 값 (제목, 식별자 모두 검색)

    shuffle

    Bool? // default = false

    무작위 재생할 수 있는 값 (Default: false)

    referrer

    String?

    경로를 추적할 수 있는 값

    delegate

    ShopLiveShortformReceiveHandlerDelegate?

    ShopLiveShortform의 각종 이벤트를 받아볼 수 있는 Delegate

    숏폼 상세 View: 전체

    let requestCollectionData = ShopLiveShortformCollectionData()
    ShopLiveShortform.play(requestData: requestCollectionData)

    숏폼 상세 View: 목록 클릭 후 상세 재생

    let requestCollectionData = ShopLiveShortformCollectionData()
    requestCollectionData.shortsId = "{YOUR_SHORTS_ID}"
    requestCollectionData.shortsSrn = "{YOUR_SHORTS_SRN}"
    ShopLiveShortform.play(requestData: requestCollectionData)

    숏폼 상세 View: 연관 태그 목록 클릭 후 재생

    let requestCollectionData = ShopLiveShortformCollectionData()
    requestCollectionData.shortsId = "{YOUR_SHORTS_ID}"
    requestCollectionData.shortsSrn = "{YOUR_SHORTS_SRN}"
    requestCollectionData.tags = ["testTag1","testTag2"]
    requestCollectionData.tagSearchOperator = .OR
    ShopLiveShortform.play(requestData: requestCollectionData)

    숏폼 상세 View: 연관 브랜드 목록 클릭 후 재생

    let requestCollectionData = ShopLiveShortformCollectionData()
    requestCollectionData.shortsId = "{YOUR_SHORTS_ID}"
    requestCollectionData.shortsSrn = "{YOUR_SHORTS_SRN}"
    requestCollectionData.brands = ["brand1","brand2"]
    ShopLiveShortform.play(requestData: requestCollectionData)

    숏폼 상세 View: 연관 태그 재생

    let requestCollectionData = ShopLiveShortformCollectionData()
    requestCollectionData.tags = ["testTag1","testTag2"]
    requestCollectionData.tagSearchOperator = .OR
    ShopLiveShortform.play(requestData: requestCollectionData)

    숏폼 상세 View: 연관 브랜드 재생

    let requestCollectionData = ShopLiveShortformCollectionData()
    requestCollectionData.brands = ["brand1","brand2"]
    ShopLiveShortform.play(requestData: requestCollectionData)

    UIView 기반으로 숏폼 상세 재생

    ShopLiveShortsCollectionView를 통해 Shortform 상세화면을 재생합니다.

    • init(requestData : ShopLiveShortformCollectionData?)

    • init(shortformIdsData : ShopLiveShortformIdsData, dataSourceDelegate : ShortsCollectionViewDataSourcRequestDelegate, shortsCollectionDelegate : ShopLiveShortformReceiveHandlerDelegate?)

    class ViewController : UIViewController {
        //숏폼 상세 재생
        lazy var shortsCollectionView : ShopLiveShortsCollectionView = {
            let requestData = ShopLiveShortformCollectionData(reference: "REFERENCE",
                                                              shortsId: "SHORTS_ID",
                                                              tags: ["TAG"],
                                                              tagSearchOperator: .OR,
                                                              brands: ["BRAND"],
                                                              shuffle: true,
                                                              referrer: "{REFFERER}",
                                                              skus: ["SKU"],
                                                              shortsCollectionId: "{SHORTS_COLLECTION_ID}",
                                                              delegate: self)
            
            let view = ShopLiveShortsCollectionView(requestData: requestData)
            view.translatesAutoresizingMaskIntoConstraints = false
            return view
        }()
        
        //특정 Shortform ID로 숏폼 상세 목록 구성
        lazy var shortsCollectionView : ShopLiveShortsCollectionView = {
            let shortsIdData = ShopLiveShortformIdData(shortsId: "{SHORTS_ID}", payload: ["CUSTOM_DATA" : "CUSTOM_DATA"])
            let shorformIdsData = ShopLiveShortformIdsData(ids: shortsIdData)
            let view = ShopLiveShortsCollectionView(shortformIdsData: shorformIdsData,
                                                    dataSourceDelegate: self,
                                                    shortsCollectionDelegate: self)
            view.translatesAutoresizingMaskIntoConstraints = false
            return view
        }()
    }
    extension ViewController { 
        private func setLayout() {
            self.view.addSubview(shortsCollectionView)
            
            NSLayoutConstraint.activate([
                shortsCollectionView.topAnchor.constraint(equalTo: self.view.topAnchor,constant: 60),
                shortsCollectionView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
                shortsCollectionView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
                shortsCollectionView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
            ])
        }
    }

    ShopLiveShortsCollectionView 전용 API

    • ShopLiveShortsCollectionView Action
      ShopLiveShortsCollectionView는 .action()을 통하여 명령을 내릴 수 있습니다.

    var shortsCollectionView : ShopLiveShortsCollectionView
    shortsCollectionView.action( .play ) 

    ShopLiveShortsCollectionView Action

    Property name

    Type

    Description

    play

    Void

    비디오를 재생합니다.

    pause

    Void

    비디오를 정지합니다.

    isScrollEnabled

    Bool

    화면의 scrolling의 가능여부를 설정합니다.

    remove

    String?

    shortsId or srn을 기반으로 화면에서 보여줄 Shorts를 삭제합니다.

    onStartRotation

    CGSize

    UIviewController의 viewWillTransition(to size: CGSize, with coordinator: any UIViewControllerTransitionCoordinator)함수를 사용하여 ShopLiveShortsCollectionView가 디바이스 화면 회전에 대응할 수 있게 합니다.
    (아래의 예시와 같게 코드를 구현하면 됩니다.)

    onChangingRotation

    onFinishedRotation

    override func viewWillTransition(to size: CGSize, with coordinator: any UIViewControllerTransitionCoordinator) {
        guard let shortsCollectionView = shortsCollectionView else { return }
        shortsCollectionView.action( .onStartRotation(size: size) )
        coordinator.animate { [weak self] context in
            shortsCollectionView.action( .onChangingRotation(size: size) )
        } completion: { [weak self] context in
            shortsCollectionView.action( .onFinishedRotation(size: size) )
        }
    }

    숏폼 프리뷰 재생

    ShopLiveShortform.showPreview(requestData: ShopLiveShortformPreviewData?)를 통해 Shortform 미리보기를 재생합니다. ( ShopLiveShortformRelatedData에 연관된 재생 목록 )

    • ShopLiveShortformRelatedData의 필드 값 중 하나 이상 넣으면 관련 미리보기를 재생 할 수 있습니다.

    ShopLiveShortformRelatedData

    Property name

    Type

    Description

    shortsId

    String?

    숏폼 고유 ID. 정렬 시 해당 ID의 숏폼을 처음 보여줄 때 사용

    productId

    String?

    상품 고유의 아이디. 상품 등록 시 자동으로 발급

    sku

    String?

    상품의 고유 SKU 정보

    name

    String?

    상품명

    url

    String?

    상품 URL

    tags

    [String]?

    관련 태그 검색을 할 수 있는 값

    tagSearchOperator

    ShopLiveTagSearchOperator?

    Tag 검색 옵션

    • OR : 통합 검색

    • AND : 교차 검색

    brands

    [String]?

    관련 Brand 검색을 할 수 있는 값 (제목, 식별자 모두 검색)

    shuffle

    Boolean? //default = false

    무작위 재생할 수 있는 값 (Default: false)

    referrer

    String?

    경로를 추적할 수 있는 값

    ShopLiveShortformPreviewData

    Property name

    Type

    Description

    previewScale

    CGFloat?

    숏폼 Preview의 크기를 설정할 때 사용합니다.

    previewRadius

    CGFloat?

    숏폼 Preview의 cornerRadius를 설정할 때 사용합니다. (Default: 10)

    previewPosition

    ShopLiveShortform.PreviewPosition?

    숏폼 Preview의  초기 노출 위치를  지정할 때 사용합니다. (Default: BottomRight)

    previewEdgeInset

    UIEdgeInset?

    숏폼 Preview 에서 Preview의 패딩을 설정합니다. (top, left, right, bottom) (Default: 16pt)

    previewFloatingOffset

    UIEdgeInset?

    숏폼 Preview 에서 Preview가 이동할 수 있는 영역을 설정합니다. (Default: 0pt)

    isMuted

    Bool?

    숏폼 Preview의  음소거  여부를 설정할 때 사용합니다. (Default: false)

    isEnabledVolumeKey

    Bool

    숏폼 Preview 디바이스 볼륨에 따라 음소거 해제될 수 있는 기능이 추가되었습니다.(Default: false)

    maxCount

    Int?

    숏폼의 Preview에서 재생될 동영상의 개수를 설정할 때 사용합니다.

    useCloseButton

    Bool?

    숏폼 Preview에서  왼쪽  상단의  x 버튼의  사용유무를  설정할 때 사용합니다. (Default: true)

    useCustomAction

    Bool

    숏폼 Preview의 클릭 이벤트를 직접 정의하고 싶을 때 사용합니다. (Default: false)

    enableSwipeOut

    Bool?

    숏폼 Preview를 화면 밖으로 쓸어서 닫기를 허용할지 설정할 때 사용합니다. (Default: true)

    clickEventCallBack

    ( () → () ) ?

    숏폼 Preview가 클릭되었을 때 발생하는 이벤트를 받아볼 수 있습니다. useCustomAction = true 처리를 하고 해당 이벤트에서 행동을 정의하여, 직접 preview의 click 이벤트를 정의할 수 있습니다.  

    숏폼 프리뷰: ProductId 기반

    let requestRelatedData = ShopLiveShortformRelatedData()
    requestRelatedData.productId = "{YOUR_PRODUCT_ID}"
    ShopLiveShortform.showPreview(requestData: requestRelatedData)

    숏폼 프리뷰: SKU 기반

    let requestRelatedData = ShopLiveShortformRelatedData()
    requestRelatedData.sku = "{YOUR_PRODUCT_SKU}"
    ShopLiveShortform.showPreview(requestData: requestRelatedData)

    숏폼 프리뷰: Tag 기반

    let requestRelatedData = ShopLiveShortformRelatedData()
    requestRelatedData.tags = ["tag1","tag2"]
    requestRelatedData.tagSearchOperator = .OR
    ShopLiveShortform.showPreview(requestData: requestRelatedData)

    숏폼 프리뷰: Brand 기반

    let requestRelatedData = ShopLiveShortformRelatedData()
    requestRelatedData.brands = ["brand1","brand2"]
    ShopLiveShortform.showPreview(requestData: requestRelatedData)

    숏폼 상세 / 프리뷰 종료

    현재 실행중인 숏폼 상세 혹은 프리뷰를 닫습니다.

    ShopLiveShortform.close()


    숏폼 상세 내 버튼 숨김

    setVisibleFullTypeViews(options: ShopLiveShortformVisibleFullTypeData)를 통해 숏폼 상세 뷰에 버튼 노출 여부를 설정합니다. ShopLiveShortformVisibleFullTypeData의 필드 값 중 하나 이상 넣으면 관련 버튼 노출 여부를 설정할 수 있습니다.

    ShopLiveShortformVisibleFullTypeData

    Property name

    Type

    Description

    isLikeButtonVisible

    Bool

    좋아요 버튼 숨김 (Default: true)

    isCommentButtonVisible

    Bool

    댓글 버튼 숨김 (Default: true)

    isShareButtonVisible

    Bool

    공유 버튼 숨김 (Default: true)

    isBookmarkVisible

    Bool

    북마크 버튼 숨김 (Default: true)

    var option = ShopLiveShortformVisibleFullTypeData()
    option.isLikeButtonVisible = true
    option.isCommentButtonVisible = true
    option.isShareButtonVisible = true
    option.isBookMarkVisible = true
    ShopLiveShortform.setVisibleFullTypeViews(options: option)


    특정 Shortform ID로 숏폼 상세 목록 구성

    ShopLiveShortform.play(shortformIdsData: ShopLiveShortformIdsData, delegate: ShortsCollectionViewDataSourceRequestDelegate)를 통해 숏폼 API로 받아온 shortformId를 통해 playlist를 구성하고 순서대로 재생합니다.

    ShopLiveShortformIdsData

    Property name

    Type

    Description

    ids

    [ShopLiveShortformIdData]?

    숏폼 ID와 고객사에서 지정한 해당 숏폼의 추가정보 (최대 30개)

    currentId

    String?

    목록중 현재 Focus 할 수 있는 목록

    referrer

    String?

    경로를 추적할 있는 값

    ShopLiveShortformIdData

    Property name

    Type

    Description

    shortsId

    String

    숏폼 ID

    payload

    [String : Any]?

    ShopLive Server 전달할 추가 정보

    ShortsCollectionViewDataSourcRequestDelegate

    protocol ShortsCollectionViewDataSourceDelegate : AnyObject { 
         func onShortformListPagination(completion : @escaping((ShopLiveShortformIdsMoreData?,Error?) -> ()))
         func onShortformListPaginationError(error : Error)
    }

    onShortformListPagination(completion:_) 함수는 더 이상 보여줄 숏폼의 ID가 없을 때 호출됩니다. 이런 상황에서 completion(ShopLiveShortformIdsMoreData)을 통해서 숏폼의 ID를 계속 공급하여 지속적으로 숏폼이 나오게 합니다.

    ShopLiveShortformIdsMoreData

    Property name

    Type

    Description

    ids

    [ShopLiveShortformIdData]?

    숏폼 ID와 고객사에서 지정한 해당 숏폼의 추가정보 (최대 30개)

    hasMore

    Bool?

    pagination 가능  여부  


    숏폼 상세 종횡비 유지

    ShopLiveShortform.setResizeMode(options: ShopLiveResizeMode)를 통해 영상의 종횡비를 유지할 수 있습니다. (Default: .CENTER_CROP)

    ShopLiveShortform.setResizeModel(option : ShopLiveResizeMode)


    What's Next