API: Shortform

    API: Shortform


    기사 요약

    숏폼 상세 재생

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

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

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

    ShopLiveShortformCollectionData

    Property name

    Type

    Description

    shortsId

    String?

    숏폼 고유 ID

    shortsCollectionId

    String?

    숏폼 그룹 ID

    tags

    List?

    관련 Tag 검색을 할 수 있는 값

    tagSearchOperator

    ShopLiveShortformTagSearchOperator?

    Tag 검색 옵션

    • OR : 통합 검색

    • AND : 교차 검색

    brands

    List?

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

    shuffle

    Boolean?

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

    referrer

    String?

    경로를 추적할 수 있는 값

    handler

    ShopLiveShortformHandler?

    Event handler

    숏폼 상세 View: 전체

    ShopLiveShortform.play(context)

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

    ShopLiveShortform.play(context, ShopLiveShortformCollectionData().apply {
        shortsId = "{CLICKED_IN_LIST_SHORTS_ID}"
    })

    숏폼 상세 View: 그룹 재생

    ShopLiveShortform.play(context, ShopLiveShortformCollectionData().apply {
        shortsCollectionId = "{CLICKED_IN_LIST_SHORTS_COLLECTION_ID}"
    })

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

    ShopLiveShortform.play(context, ShopLiveShortformCollectionData().apply {
        shortsId = "{CLICKED_IN_LIST_SHORTS_ID}"
        tags = "{CLICKED_IN_LIST_TAGS}"
        tagSearchOperator = "{CLICKED_IN_LIST_TAG_SEARCH_OPERATOR}"
    })

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

    ShopLiveShortform.play(context, ShopLiveShortformCollectionData().apply {
        shortsId = "{CLICKED_IN_LIST_SHORTS_ID}"
        brands = "{CLICKED_IN_LIST_BRANDS}"
    })

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

    ShopLiveShortform.play(context, ShopLiveShortformCollectionData().apply {
        tags = "{YOUR_TAGS}"
        tagSearchOperator = "{YOUR_SEARCH_OPERATOR}"
    })

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

    ShopLiveShortform.play(context, ShopLiveShortformCollectionData().apply {
        brands = "{YOUR_BRANDS}"
    })


    숏폼 상세 Intent 구성

    ShopLiveShortform.intent(context: Context, requestData: ShopLiveShortformCollectionData? = null)을 통해 Shortform 상세 화면을 재생할 수 있는 intent를 사용할 수 있습니다. (ShopLiveShortformCollectionData에 연관된 재생 목록)

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

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

    ShopLiveShortformCollectionData

    Property name

    Type

    Description

    shortsId

    String?

    숏폼 고유 ID

    shortsCollectionId

    String?

    숏폼 그룹 ID

    tags

    List?

    관련 Tag 검색을 할 수 있는 값

    tagSearchOperator

    ShopLiveShortformTagSearchOperator?

    Tag 검색 옵션

    • OR : 통합 검색

    • AND : 교차 검색

    brands

    List?

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

    shuffle

    Boolean?

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

    referrer

    String?

    경로를 추적할 수 있는 값

    handler

    ShopLiveShortformHandler?

    Event handler

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

    val intent = ShopLiveShortform.intent(context, ShopLiveShortformCollectionData().apply {
        shortsId = "{CLICKED_IN_LIST_SHORTS_ID}"
    })
    startActivity(intent)

    숏폼 상세 View: 그룹 재생

    val intent = ShopLiveShortform.intent(context, ShopLiveShortformCollectionData().apply {
        shortsCollectionId = "{CLICKED_IN_LIST_SHORTS_COLLECTION_ID}"
    })
    startActivity(intent)

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

    val intent = ShopLiveShortform.intent(context, ShopLiveShortformCollectionData().apply {
        shortsId = "{CLICKED_IN_LIST_SHORTS_ID}"
        tags = "{CLICKED_IN_LIST_TAGS}"
        tagSearchOperator = "{CLICKED_IN_LIST_TAG_SEARCH_OPERATOR}"
    })
    startActivity(intent)

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

    val intent = ShopLiveShortform.intent(context, ShopLiveShortformCollectionData().apply {
        shortsId = "{CLICKED_IN_LIST_SHORTS_ID}"
        brands = "{CLICKED_IN_LIST_BRANDS}"
    })
    startActivity(intent)

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

    val intent = ShopLiveShortform.intent(context, ShopLiveShortformCollectionData().apply {
        tags = "{YOUR_TAGS}"
        tagSearchOperator = "{YOUR_SEARCH_OPERATOR}"
    })
    startActivity(intent)

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

    val intent = ShopLiveShortform.intent(context, ShopLiveShortformCollectionData().apply {
        brands = "{YOUR_BRANDS}"
    })
    startActivity(intent)

    숏폼 상세 종료

    숏폼 상세 뷰를 닫습니다.

    ShopLiveShortform.close()


    상세 화면 버튼 숨김처리

    상세 화면의 버튼을 보여주게 할지 설정합니다.

    ShopLiveShortformVisibleDetailTypeData

    Property name

    Type

    Description

    isLikeButtonVisible

    Boolean

    좋아요 버튼을 숨김 처리할 수 있습니다. (Default: true)

    isCommentButtonVisible

    Boolean

    댓글 버튼을 숨김 처리할 수 있습니다. (Default: true)

    isShareButtonVisible

    Boolean

    공유 버튼을 숨김 처리할 수 있습니다. (Default: true)

    isBookmarkVisible

    Boolean

    북마크 버튼을 숨김 처리할 수 있습니다. (Default: true)

    ShopLiveShortform.setVisibleDetailTypeViews(ShopLiveShortformVisibleDetailTypeData().apply {
        isLikeButtonVisible = true
        isCommentButtonVisible = true
        isShareButtonVisible = true
        isBookmarkVisible = true
    })


    숏폼 프리뷰 재생

    ShopLiveShortform.showPreview(activity: Activity, data: ShopLiveShortformPreviewData)을 통해 Shortform 미리보기를 재생합니다. ( ShopLiveShortformRelatedData에 연관된 재생 목록 )

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

    ShopLiveShortformRelatedData

    Property name

    Type

    Description

    shortsId

    String?

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

    productId

    Long?

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

    customerProductId

    String?

    상품 고유 ID

    sku

    String?

    상품의 고유 SKU 정보

    name

    String?

    상품명

    url

    String?

    상품 URL

    tags

    List?

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

    tagSearchOperator

    ShopLiveShortformTagSearchOperator?

    Tag 검색 옵션

    • OR : 통합 검색

    • AND : 교차 검색

    brands

    List?

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

    shuffle

    Boolean

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

    referrer

    String?

    경로를 추적할 수 있는 값

    handler

    ShopLiveShortformHandler?

    Event handler

    ShopLiveShortformPreviewData

    Property name

    Type

    Description

    width

    Int?  (px)

    숏폼 Preview의 width (Default: 180dp)

    height

    Int? (px)

    숏폼 Preview의 height (Default: 180dp)

    marginTop

    Int? (px)

    숏폼 Preview의 marginTop (Default: 16dp)

    marginBottom

    Int? (px)

    숏폼 Preview의 marginBottom (Default: 16dp)

    marginLeft

    Int? (px)

    숏폼 Preview의 marginLeft (Default: 16dp)

    marginRight

    Int? (px)

    숏폼 Preview의 marginRight (Default: 16dp)

    radius

    Int? (px)

    숏폼 Preview의 radius (Default: 10dp)

    isMuted

    Boolean

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

    position

    ShopLivePreviewPositionConfig?

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

    maxCount

    Int?

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

    useCloseButton

    Boolean

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

    useCustomAction

    Boolean

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

    enableSwipeOut

    Boolean

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

    isEnabledVolumeKey

    Boolean

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

    onClickListener

    View.OnClickListener?

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

    handler

    ShopLiveShortformHandler?

    Event handler

    숏폼 프리뷰: ProductId 기반

    ShopLiveShortform.showPreview(activity: Activity, ShopLiveShortformRelatedData().apply {
        productId = "{PRODUCT_ID}"
    })

    숏폼 프리뷰: SKU 기반

    ShopLiveShortform.showPreview(activity: Activity, ShopLiveShortformRelatedData().apply {
        sku = "{PRODUCT_SKU}"
    })

    숏폼 프리뷰: Tag 기반

    ShopLiveShortform.showPreview(activity: Activity, ShopLiveShortformRelatedData().apply {
        tags = "{YOUR_TAGS}"
        tagSearchOperator = "{YOUR_SEARCH_OPERATOR}"
    })

    숏폼 프리뷰: Brand 기반

    ShopLiveShortform.showPreview(activity: Activity, ShopLiveShortformRelatedData().apply {
        brands = "{YOUR_BRANDS}"
    })

    숏폼 프리뷰 종료

    ShopLiveShortform.hidePreview()을 통해 현재 실행중인 숏폼 프리뷰를 닫습니다.

    ShopLiveShortform.hidePreview()


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

    Coroutine 사용

    ShopLiveShortform.play(context: Context, shortformIdsData: ShopLiveShortformIdsData, moreSuspendListener: ShopLiveShortformMoreSuspendListener)을 통해 숏폼 API로 받아온 shortformId를 이용해 playlist를 구성하고 순서대로 재생합니다.

    ShopLiveShortformIdsData

    Property name

    Type

    Description

    ids

    List<ShopLiveShortformIdData>?

    숏폼 ID를 통한 목록 구성 요소 (최대 30개)

    currentId

    String?

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

    referrer

    String?

    경로를 추적할 수 있는 값

    handler

    ShopLiveShortformHandler?

    Event handler

    ShopLiveShortformIdData

    Property name

    Type

    Description

    shortsId

    String

    숏폼 ID

    payload

    Map<String, Any?>?

    Custom payload

    ShopLiveShortformMoreSuspendListener

    Property name

    Type

    Description

    onMore

    ShopLiveShortformIdsMoreData?

    Coroutine을 활용하여 Pagination 목록 구성할 수 있는 function

    ShopLiveShortformIdsMoreData

    Property name

    Type

    Description

    ids

    List<ShopLiveShortformIdData>?

    숏폼 ID를 통한 목록 구성 요소 (최대 30개)

    hasMore

    Boolean?

    Pagination 가능 여부

    ShopLiveShortform.play(context, ShopLiveShortformIdsData().apply {
        ids = listOf(ShopLiveShortformIdData("{YOUR_IDS}"))
        currentId = "{YOUR_CURRENT_ID}"
    }, ShopLiveShortformMoreSuspendListener {
        val moreResponse =
            kotlin.runCatching {
                "{YOUR_MORE_API_RESPONSE}"
            }.getOrNull() ?: return@ShopLiveShortformMoreSuspendListener null
        val ids = moreResponse.shortsList?.mapNotNull { it.shortsId }?.map { ShopLiveShortformIdData(it) } ?: emptyList()
        val hasMore = moreResponse.hasMore
        return@ShopLiveShortformMoreSuspendListener ShopLiveShortformIdsMoreData().apply {
            this.ids = ids
            this.hasMore = hasMore
        }
    })

    Future 사용

    ShopLiveShortform.play(context: Context, shortformIdsData: ShopLiveShortformIdsData, moreFutureListener: ShopLiveShortformMoreFutureListener)을 통해 숏폼 API로 받아온 shortformId를 이용해 playlist를 구성하고 순서대로 재생합니다.

    ShopLiveShortformIdsData

    Property name

    Type

    Description

    ids

    List<ShopLiveShortformIdData>?

    숏폼 ID를 통한 목록 구성 요소 (최대 30개)

    currentId

    String?

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

    referrer

    String?

    경로를 추적할 수 있는 값

    handler

    ShopLiveShortformHandler?

    Event handler

    ShopLiveShortformIdData

    Property name

    Type

    Description

    shortsId

    String

    숏폼 ID

    payload

    Map<String, Any?>?

    Custom payload

    ShopLiveShortformMoreFutureListener

    Property name

    Type

    Description

    onMore

    Future<ShopLiveShortformIdsMoreData?>

    Future를 활용하여 Pagination 목록 구성할 수 있는 function

    ShopLiveShortformIdsMoreData

    Property name

    Type

    Description

    ids

    List<ShopLiveShortformIdData>?

    숏폼 ID를 통한 목록 구성 요소 (최대 30개)

    hasMore

    Boolean?

    Pagination 가능 여부

    ShopLiveShortform.play(context, ShopLiveShortformIdsData().apply {
        ids = listOf(ShopLiveShortformIdData("{YOUR_IDS}"))
        currentId = "{YOUR_CURRENT_ID}"
    }, ShopLiveShortformMoreFutureListener {
        val task: Future<ShopLiveShortformIdsMoreData?> =
            Executors.newCachedThreadPool().submit {
                "{YOUR_MORE_API_RESPONSE}"
                ShopLiveShortformIdsMoreData().apply {
                    this.ids = listOf(ShopLiveShortformIdData("{YOUR_MORE_IDS}"))
                    this.hasMore = hasMore
                }
            }
        return@ShopLiveShortformMoreFutureListener task
    })


    상세 결과값 호출 API

    ShopLiveShortform.get(context: Context, collectionData: ShopLiveShortformCollectionData? = null, callback: ShopLiveShortformCollectionListener)을 통해 Collection의 결과를 Callback형태로 확인할 수 있습니다.

    • 재사용이 가능한 RecyclerView 에서 미리 Data를 받아 처리할 수 있습니다

    ShopLiveShortformCollectionData

    Property name

    Type

    Description

    shortsId

    String?

    숏폼 고유 ID

    shortsCollectionId

    String?

    숏폼 그룹 ID

    tags

    List?

    관련 Tag 검색을 할 수 있는 값

    tagSearchOperator

    ShopLiveShortformTagSearchOperator?

    Tag 검색 옵션

    • OR : 통합 검색

    • AND : 교차 검색

    brands

    List?

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

    shuffle

    Boolean?

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

    referrer

    String?

    경로를 추적할 수 있는 값

    handler

    ShopLiveShortformHandler?

    Event handler

    ShopLiveShortformCollectionListener

    Function name

    Description

    onData(response: ShopLiveShortformCollectionResponse)

    ShopLiveShortform.get 이 성공 했을 때 Response를 받아 처리할 수 있습니다.

    onError(e: Exception)

    ShopLiveShortform.get 이 실패 했을 때 Exception을 처리할 수 있습니다.

    referrer

    경로를 추적할 수 있는 값


    val data = ShopLiveShortformCollectionData()
    ShopLiveShortform.get(context, data, object : ShopLiveShortformCollectionListener {
        // In background thread
        override fun onData(response: ShopLiveShortformCollectionResponse) {
            // Do something
        }
        override fun onError(e: Exception) {
            // Handle error
        }
    })


    숏폼 상세 뷰 버튼 숨김 처리

    setVisibleFullTypeViews()를 통해 숏폼 상세의 버튼 노출 여부를 설정합니다.

    ShopLiveShortformVisibleFullTypeData

    Property name

    Type

    Description

    isLikeButtonVisible

    Boolean

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

    isCommentButtonVisible

    Boolean

    댓글 버튼 숨김 (Default: true)

    isShareButtonVisible

    Boolean

    공유 버튼 숨김 (Default: true)

    isBookmarkVisible

    Boolean

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

    ShopLiveShortform.setVisibleFullTypeViews(ShopLiveShortformVisibleFullTypeData().apply {
        isLikeButtonVisible = true
        isCommentButtonVisible = true
        isShareButtonVisible = true
        isBookmarkVisible = true
    })


    숏폼 상세 종횡비 유지

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

    ShopLiveShortform.setResizeMode(resizeMode: ShopLiveResizeMode)


    하이브리드 환경 연결 API

    ShopLiveShortform.connectBridgeInterface(activity: Activity, webView: WebView)을 통해 하이브리드 환경에서 Web과 SDK를 연결합니다.

    ShopLiveShortform.connectBridgeInterface(activity, webView)

    ShopLiveShortform.receiveBridgeInterface(webView: WebView)을 통해 하이브리드 환경에서 Web과 SDK에서 메세지를 주고 받습니다.

    ShopLiveShortform.receiveBridgeInterface(webView)

    ShopLiveShortform.updateVisitedHistory(view: WebView?, url: String?, isReload: Boolean)을 통해 Web 페이지 이동 시 자동으로 미리보기를 제거할 수 있습니다.

    webView.webViewClient = object : WebViewClient() {
        ...
        // Required
        override fun doUpdateVisitedHistory(view: WebView?, url: String?, isReload: Boolean) {
            super.doUpdateVisitedHistory(view, url, isReload)
            ShopLiveShortform.updateVisitedHistory(view, url, isReload)
        }
        ...
    }


    What's Next