Shoplive Shortform Editor SDK Integration Guide

// ① Swift Package Manager
dependencies: [
    .package(url: "https://github.com/shoplive/shortform-editor-ios", .upToNextMajor(from: "1.8.12")),
    .package(url: "https://github.com/shoplive/common-ios",           .upToNextMajor(from: "1.8.12")),
]
// Add both ShopLiveShortformEditorSDK and ShopliveFilterSDK to your target.

// ② CocoaPods — Podfile
// pod 'ShopLiveShortformEditorSDK', '1.8.12'   # includes ShopliveFilterSDK
// pod 'ShopliveSDKCommon',          '1.8.12'

// ③ Import
import ShopliveSDKCommon
import ShopLiveShortformEditorSDK

dependencies {
    implementation("cloud.shoplive:shoplive-video-editor:1.8.14")   // editor
    implementation("cloud.shoplive:shoplive-common:1.8.14")         // shared (access key, auth)
    implementation("cloud.shoplive:shoplive-network:1.8.14")        // networking
    implementation("cloud.shoplive:shoplive-filter:1.8.14")         // Filters (required by the editor)

    // Playback engine — declare <b>only one</b> of these (engine versions are numbered separately from the SDK)
    implementation("cloud.shoplive:shoplive-media3:1.10.1.3")       // media3 (default) — minSdk 23
    // implementation("cloud.shoplive:shoplive-exoplayer:2.19.1.20")    // ExoPlayer (legacy) — minSdk 19
}

android {
    defaultConfig { multiDexEnabled = true }

    // Native encoding libraries are bundled — split by ABI if size matters
    bundle { abi { enableSplit = true } }
}

<!-- Info.plist — the app crashes without these -->
<key>NSPhotoLibraryUsageDescription</key>
<string>We need photo access so you can pick a video for your short.</string>
<key>NSCameraUsageDescription</key>
<string>We need camera access so you can record a short.</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need microphone access to record sound with your video.</string>

// Gallery selection uses PickVisualMedia (the photo picker), so no storage permission is needed.
// Only add these to AndroidManifest.xml if you also wire up recording:
// <uses-permission android:name="android.permission.CAMERA" />
// <uses-permission android:name="android.permission.RECORD_AUDIO" />

// ① Once at app startup
ShopLiveCommon.setAccessKey(accessKey: "YOUR_ACCESS_KEY")
ShopLiveCommon.setAuthToken(authToken: myJwtFromServer)

// ② From your "upload a short" button — pick, edit, cover and upload in one go
ShopLiveShortformEditor.shared
    .setDelegate(delegate: self)
    .start(self)

// ① Once at app startup (Application.onCreate)
ShopLiveCommon.setAccessKey("YOUR_ACCESS_KEY")
ShopLiveCommon.setAuthToken(myJwtFromServer)

// ② From your "upload a short" button — pick, edit, cover and upload in one go
ShopLiveShortformEditor(this)          // this = ComponentActivity
    .setHandler(myHandler)
    .start()

@IBAction func createShorts() {
    ShopLiveShortformEditor.shared
        .setPermissionHandler(self)        // optional — see the appendix
        .setDelegate(delegate: self)
        .start(self)                       // presented over the current view controller
}

// When your app has to close it
ShopLiveShortformEditor.shared.close()

fun createShorts() {
    ShopLiveShortformEditor(this)          // this = ComponentActivity
        .setHandler(myHandler)
        .start()
}

extension MyViewController: ShopLiveShortformEditorDelegate {

    func onShopLiveShortformEditorUploadSuccess(result: ShopliveEditorResultData?) {
        // Uploaded — result.shortsId can play the short you just made
        guard let shortsId = result?.shortsId else { return }
        myFeed.insertNewShorts(shortsId)
    }

    func onShopLiveShortformEditorVideoConvertSuccess(videoPath: String) {
        // The encoded local file path (before upload)
    }

    func onShopLiveShortformEditorCoverImageSuccess(image: UIImage?) {
        // The cover image the user picked
    }

    func onShopLiveShortformEditorClosed() {
        // Closed midway — offer a "save draft" prompt if that fits your app
    }

    func onShopLiveShortformEditorError(error: ShopLiveCommonError) {
        log("editor error \(error.codes) \(error.message ?? "")")
    }

    func onShopLiveShortformEditorOnEvent(name: String, payload: [String : Any]?) {
        analytics.log(name)                // per-button behavior logging
    }
}

val myHandler = object : ShopLiveShortformEditorHandler() {

    override fun onSuccess(activity: ComponentActivity) {
        // Uploaded — refresh the list or go to the "my shorts" tab
        activity.finish()
        myFeed.refresh()
    }

    override fun onCancel() {
        // Closed midway
    }

    override fun onError(context: Context, error: ShopLiveCommonError) {
        log("editor error ${error.code} ${error.message}")
    }

    override fun onEvent(context: Context, command: String, payload: Map<String, Any?>) {
        analytics.log(command)             // per-button behavior logging
    }
}

ShopLiveShortformEditor(this)
    .setShortformUploaderData(
        ShopLiveShortformUploaderData(
            tags = listOf("spring"),
            products = listOf(
                ShopLiveShortformUploaderProductData(
                    customerProductId = "P-1001",
                    sku = "SKU-1001"
                )
            ),
            ui = ShopLiveShortformUploaderUiData(
                hashTag = true,
                videoChange = false,
                rating = false
            )
        )
    )
    .setHandler(myHandler)
    .start()

// On iOS you open the uploader as a standalone component and pre-fill it there.
// (The full flow, ShopLiveShortformEditor, has no injection point.)
ShopLiveShortformUploader.shared
    .setDelegate(self)
    .setUploaderData(ShopLiveShortformUploaderData(
        ui: ShopLiveUgcUploaderUiData(hashTag: true, videoChange: false, rating: false),
        tags: ["spring"],
        products: [ShopLiveConversionProductData(sku: "SKU-1001", customProductId: "P-1001")]
    ))
    .build { uploaderVC in
        uploaderVC.modalPresentationStyle = .fullScreen
        self.present(uploaderVC, animated: true)
    }
let visible = ShopLiveShortFormEditorVisibleContent(
    isDescriptionVisible: true,
    isTagsVisible: true
)

let config = ShopLiveShortformEditorConfiguration(
    videoCropOption: ShopLiveShortFormEditorAspectRatio(width: 9, height: 16, isFixed: true),
    visibleContents: nil,
    videoOutputOption: ShopLiveShortformEditorVideoOuputOption(
        videoOutputQuality: .high,
        videoOutputResoltuion: ._720
    ),
    mediaPickerVideoDurationOption: ShopLiveMediaPickerVideoDurationOption(
        minVideoDuration: 3,                 // seconds
        maxVideoDuration: 60 * 5,
        invalidDurationToastMessage: "Videos must be between 3 seconds and 5 minutes"
    ),
    videoUploadOption: nil,
    minVideoDuration: 3,                     // length of the edited result (seconds)
    maxVideoDuration: 60
)

ShopLiveShortformEditor.shared
    .setConfiguration(config)
    .setDelegate(delegate: self)
    .start(self)

ShopLiveShortformEditor(this)
    .setVideoEditorData(
        ShopLiveVideoEditorData(
            minVideoDuration = 3_000,        // milliseconds
            maxVideoDuration = 60_000,
            aspectRatio = ShopLiveShortformEditorAspectRatio(
                width = 9, height = 16, isFixed = true
            ),
            outputVideoQuality = ShopLiveVideoEditorVideoQuality.HIGH,
            outputResolution = ShopLiveVideoEditorResolution.RESOLUTION_720
        )
    )
    .setHandler(myHandler)
    .start()

// Keep filter and crop; hide speed and volume
let visible = ShopLiveShortFormEditorVisibleContent(
    isDescriptionVisible: true,
    isTagsVisible: true,
    editOptions: [.filter, .crop]        // default: [.filter, .playBackSpeed, .volume, .crop]
)

ShopLiveVideoEditorData(
    visibleActionButton = ShopLiveShortformEditorVisibleActionButton(
        isUsedFilterButton = true,
        isUsedCropButton = true,
        isUsedPlaybackSpeedButton = false,
        isUsedVolumeButton = false
    )
)

// Description and hashtag visibility, plus the upload policy
let visible = ShopLiveShortFormEditorVisibleContent(
    isDescriptionVisible: true,
    isTagsVisible: false                 // hide the hashtag input
)

let upload = ShopLiveShortFormEditorVideoUploadOption(
    shortsStatus: .CLOSED,               // private on upload → publish after review
    isCreatedShortform: true
)

ShopLiveShortformEditor(this)
    .setShortformUploaderData(
        ShopLiveShortformUploaderData(
            ui = ShopLiveShortformUploaderUiData(hashTag = false)
        )
    )
    .setVideoEditorData(
        ShopLiveVideoEditorData(
            shortformStatus = ShopLiveShortformStatus.CLOSED   // upload as private
        )
    )
    .setHandler(myHandler)
    .start()

ShopLiveShortformEditor(this)
    .setVideoEditorCustomize(
        ShopLiveVideoEditorCustomizeData(
            mainData = ShopLiveVideoEditorCustomizeMainData(
                titleTextSize = 16f,
                backButtonBackgroundRes = R.drawable.ic_my_back,
                closeButtonBackgroundRes = R.drawable.ic_my_close,
                confirmButtonTextColor = Color.WHITE,
                confirmButtonBackgroundRes = R.drawable.bg_my_button,
                trimColor = Color.parseColor("#245EFF"),
                trimHandleColor = Color.WHITE
            )
            // volumeData · cropData · filterData · playbackSpeedData work the same way
        )
    )
    .setHandler(myHandler)
    .start()

// On iOS you replace icons and colors through per-screen global config singletons.
// Set them once before presenting the editor.
ShopLiveShortformEditor.MediaPickerConfig.global.cellCornerRadius = 8
ShopLiveShortformEditor.EditorMainConfig.global.confirmButtonBackgroundColor = .systemPink
ShopLiveShortformEditor.EditorMainConfig.global.confirmButtonTextColor = .white
ShopLiveShortformEditor.EditorCropConfig.global.cropColor = .systemPink
// EditorVolumeConfig · EditorSpeedConfig · EditorFilterConfig
// · EditorCoverPickerConfig expose .global the same way.

// iOS — it returns the editor "screen", so your app presents it
ShopliveVideoEditor.shared
    .setDelegate(self)
    .setConfiguration(ShopliveVideoEditorConfiguration(
        videoCropOption: ShopliveVideoEditorAspectRatio(width: 9, height: 16, isFixed: true),
        videoOutputOption: nil,
        videoTrimOption: ShopliveVideoEditorTrimOption(minVideoDuration: 3, maxVideoDuration: 60),
        visibleContents: nil,
        videoUploadOption: nil
    ))
    .build(data: ShopLiveVideoEditorData(videoUrl: pickedFileURL, isCreatedShortform: true)) { editorVC in
        editorVC.modalPresentationStyle = .fullScreen
        self.present(editorVC, animated: true)
    }

// Free memory after closing the editor
ShopliveVideoEditor.shared.cleanUpMemory()

// Android — the SDK opens an Activity and returns the result through the handler
ShopLiveVideoEditor(this)
    .setData(ShopLiveVideoEditorData(
        minVideoDuration = 3_000,
        maxVideoDuration = 60_000,
        isCreatedShortform = true
    ))
    .setHandler(object : ShopLiveVideoEditorHandler() {
        override fun onSuccess(
            videoEditorActivity: ComponentActivity,
            result: ShopLiveEditorResultData
        ) {
            // result.shortsId · localVideoUri · localCoverImageUri · duration …
            ShopLiveVideoEditor.close()
            uploadToMyServer(result.localVideoUri)
        }
        override fun onCancel() { /* the user closed it */ }
        override fun onError(context: Context, error: ShopLiveCommonError) { log(error) }
    })
    .start(ShopLiveEditorLocalData(pickedUri))     // ShopLiveEditorCameraData for camera results

ShopLiveCoverPicker(this)
    .setData(ShopLiveCoverPickerData(
        shortsId = "SHORTS_ID",
        aspectRatio = ShopLiveShortformEditorAspectRatio(9, 16, isFixed = true),
        visibleActionButton = ShopLiveCoverPickerVisibleActionButton(isUsedCropButton = true)
    ))
    .setHandler(object : ShopLiveCoverPickerHandler() {
        override fun onSuccess(
            coverPickerActivity: ComponentActivity,
            result: ShopLiveEditorResultData
        ) {
            ShopLiveCoverPicker.close()
            applyCover(result.localCoverImageUri)
        }
        override fun onCancel() { /* … */ }
    })
    .start(ShopLiveCoverPickerLocalData(localVideoUri))   // or ShopLiveCoverPickerUrlData(remoteUrl)

// iOS can open the cover picker on its own too (it returns a screen, so your app presents it)
ShopLiveCoverPicker.shared
    .setDelegate(self)
    .setConfiguration(ShopLiveCoverPickerConfiguration(
        cropOption: ShopLiveShortFormEditorAspectRatio(width: 9, height: 16, isFixed: true),
        visibleActionButton: ShopLiveCoverPickerVisibleActionButton(editOptions: [.crop])
    ))
    .build(data: ShopLiveCoverPickerData(videoUrl: localVideoURL, shortsId: shortsId)) { pickerVC in
        self.present(pickerVC, animated: true)
    }

// Free memory after closing it
ShopLiveCoverPicker.shared.cleanUpMemory()

ShopLiveImageEditor(this)
    .setData(ShopLiveImageEditorData(
        isCreatedShortform = true,
        resolution = ShopLiveVideoEditorResolution.RESOLUTION_720,
        videoDuration = 10_000                 // milliseconds — a 10-second video from the image
    ))
    .setHandler(object : ShopLiveImageEditorHandler() {
        override fun onSuccess(result: ShopLiveEditorResultData) { /* … */ }
        override fun onError(error: ShopLiveCommonError) { log(error) }
    })
    .start(ShopLiveEditorLocalData(pickedImageUri))

// iOS exposes no image-to-video API.

ShopLiveShortformEditor.shared
    .setPermissionHandler(self)
    .setDelegate(delegate: self)
    .start(self)

extension MyViewController: ShopLivePermissionHandler {
    func handlePhotoLibraryUsagePermission(status: PermissionStatus) {
        // On denial, show your own "please allow photo access in Settings" prompt
    }
    func handleCameraPermission(status: PermissionStatus) { /* … */ }
    func handleMicroPhonePermission(status: PermissionStatus) { /* … */ }
    func handleMediaLibraryUsagePermission(status: PermissionStatus) { /* … */ }
}

// Android uses the photo picker (PickVisualMedia), so there is no storage permission to handle.
// Only when you add recording does your app request CAMERA and RECORD_AUDIO itself, then
// start the editor with ShopLiveEditorCameraData once granted.