- 인쇄
Shortform API
- 인쇄
숏폼 상세 재생
ShopLiveShortform.play(requestData: ShopLiveShortformCollectionData?)
를 통해 Shortform 상세화면을 재생합니다. (ShopLiveShortformCollectionData에 연관된 재생 목록)
ShopLiveShortformCollectionData
의 필드 값 중 하나 이상 넣으면 관련 상세화면을 재생할 수 있습니다.ShopLiveShortformCollectionData
이 null이라면 전체 상세화면을 재생할 수 있습니다.
ShopLiveShortformCollectionData
Property name | Type | Description |
---|---|---|
shortsId | String? | 숏폼 고유 ID |
shortsCollectionId | String? | 숏폼 그룹 ID |
shortsSrn | String? | 숏폼에 할당한 리소스를 관리하기 위한 Global resource name 입니다. 샵라이브 내부적으로 사용하는 값입니다. |
tags | [String]? | 관련 Tag 검색을 할 수 있는 값 |
tagSearchOperator | ShopLiveTagSearchOperator? | Tag 검색 옵션
|
brands | [String]? | 관련 Brand 검색을 할 수 있는 값 (제목, 식별자 모두 검색) |
shuffle | Bool? // default = false | 무작위 재생할 수 있는 값 (Default: |
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?)
자세한 API 설명은 다음 링크를 참조해주세요 . 숏폼 상세 재생
init(shortformIdsData : ShopLiveShortformIdsData, dataSourceDelegate : ShortsCollectionViewDataSourcRequestDelegate, shortsCollectionDelegate : ShopLiveShortformReceiveHandlerDelegate?)
자세한 API 설명은 다음 링크를 참조해주세요. 특정 Shortform ID로 숏폼 상세 목록 구성
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? | |
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 검색 옵션
|
brands | [String]? | 관련 Brand 검색을 할 수 있는 값 (제목, 식별자 모두 검색) |
shuffle | Boolean? //default = false | 무작위 재생할 수 있는 값 (Default: |
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: |
isEnabledVolumeKey | Bool | 숏폼 Preview 디바이스 볼륨에 따라 음소거 해제될 수 있는 기능이 추가되었습니다.(Default: |
maxCount | Int? | 숏폼의 Preview에서 재생될 동영상의 개수를 설정할 때 사용합니다. |
useCloseButton | Bool? | 숏폼 Preview에서 왼쪽 상단의 x 버튼의 사용유무를 설정할 때 사용합니다. (Default: |
useCustomAction | Bool | 숏폼 Preview의 클릭 이벤트를 직접 정의하고 싶을 때 사용합니다. (Default: |
enableSwipeOut | Bool? | 숏폼 Preview를 화면 밖으로 쓸어서 닫기를 허용할지 설정할 때 사용합니다. (Default: |
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: |
isCommentButtonVisible | Bool | 댓글 버튼 숨김 (Default: |
isShareButtonVisible | Bool | 공유 버튼 숨김 (Default: |
isBookmarkVisible | Bool | 북마크 버튼 숨김 (Default: |
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)