react-native-firework-sdk 1.0.0-beta

package/android/src/main/java/com/reactnativefireworksdk/utils/FWVideoPlayerUtils.kt

@@ -0,0 +1,18 @@
+package com.reactnativefireworksdk.utils
+
+import com.loopnow.fireworklibrary.VideoPlayerProperties
+import com.reactnativefireworksdk.constants.FWVideoPlayerConstant
+import com.reactnativefireworksdk.models.FWVideoPlayerConfigModel
+
+object FWVideoPlayerUtils {
+
+  var customCTAClickEnabled: Boolean = false
+  var videoPlaybackEventEnabled: Boolean = false
+
+  fun setVideoPlayerConfig(config: FWVideoPlayerConfigModel?) {
+    VideoPlayerProperties.share = config?.showShareButton != false
+    VideoPlayerProperties.loop = config?.videoCompleteAction != FWVideoPlayerConstant.FW_VIDEO_COMPLETE_ACTION_ADVANCE_TO_NEXT
+//    VideoPlayerProperties.autoPlayOnComplete = config?.videoCompleteAction != FWVideoPlayerConstant.FW_VIDEO_COMPLETE_ACTION_LOOP
+    VideoPlayerProperties.fullScreenPlayer = config?.playerStyle == FWVideoPlayerConstant.FW_PLAYER_STYLE_FULL
+  }
+}

package/android/src/main/res/layout/fwrn_fragment_shoppingcart.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout
+  xmlns:android="http://schemas.android.com/apk/res/android"
+  android:id="@+id/shopping_cart_container"
+  android:layout_width="match_parent"
+  android:layout_height="match_parent">
+
+</androidx.constraintlayout.widget.ConstraintLayout>

package/android/src/main/res/layout/fwrn_fragment_videofeed.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout
+  xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:app="http://schemas.android.com/apk/res-auto"
+  android:layout_width="match_parent"
+  android:layout_height="match_parent">
+
+  <com.loopnow.fireworklibrary.views.VideoFeedView
+    android:id="@+id/fwrn_integrated_videofeed"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    app:feedLayout="horizontal"
+    app:showTitle="true"
+    app:titlePosition="alignBottom"
+    app:feedType="discover"
+    app:imageStyle="@style/FWFeedViewImageStyle"
+    app:textStyle="@style/FWFeedViewCaptionStyle"
+    />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

package/android/src/main/res/values/styles.xml

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+  <!--  Apply your feed image by "FWFeedViewImageStyle" style.-->
+  <style name="FWFeedViewImageStyle" >
+    <item name="android:radius">0dp</item>
+  </style>
+
+  <!--  Apply your feed caption by "FWFeedViewCaptionStyle" style.-->
+  <style name="FWFeedViewCaptionStyle">
+    <item name="android:textColor">#ffffffff</item>
+    <item name="android:textSize">14sp</item>
+    <item name="android:gravity">top</item>
+    <item name="android:paddingLeft">@dimen/fw_padding_8</item>
+    <item name="android:paddingRight">@dimen/fw_padding_8</item>
+    <item name="android:background">#80000000</item>
+  </style>
+
+  <!--  Apply your play button by "FWPlayButtonStyle" style.-->
+  <style name="FWPlayButtonStyle" >
+    <item name="android:layout_width">40dp</item>
+    <item name="android:layout_height">40dp</item>
+    <item name="android:src">@drawable/fw_play_icon</item>
+  </style>
+
+  <!--  Apply your custom CTA button background by "FWCtaButtonBgStyle" style.-->
+  <style name="FWCtaButtonBgStyle">
+    <item name="android:background">@drawable/fw_cta_bg_primary</item>
+  </style>
+
+  <!--  Apply your custom CTA button title by "FWCtaButtonLabelStyle" style.-->
+  <style name="FWCtaButtonLabelStyle">
+    <item name="android:textSize">@dimen/fw_font_size_14</item>
+    <item name="android:textColor">@color/fw_gnt_white</item>
+  </style>
+
+  <!--  Apply your custom "Add to cart" button by "FWAddToCartButtonStyle" style.-->
+  <style name="FWAddToCartButtonStyle">
+    <item name="android:background">@drawable/fw_add_to_cart_button</item>
+    <item name="android:textColor">@color/fw_gnt_white</item>
+    <item name="android:textSize">@dimen/fw_font_size_16</item>
+  </style>
+</resources>

package/ios/Component/VideoFeed.swift

@@ -0,0 +1,262 @@
+//
+//  FWVideoFeed.swift
+//  react-native-firework-sdk
+//
+//  Created by Jeff Zheng on 2021/12/22.
+//
+//  FWVideoFeed wrap the VideoFeedViewController class (which need to embed subview throught 'addChildViewController') which can simply embed host view throught 'addSubview'
+
+import UIKit
+import FireworkVideo
+
+@objc
+public enum VideoFeedMode: Int {
+    case row, colume, grid
+    
+    fileprivate var videoFeedLayout: VideoFeedLayout {
+        switch self {
+            case .row:
+                return VideoFeedHorizontalLayout()
+            case .colume:
+                let layout = VideoFeedGridLayout()
+                layout.numberOfColumns = 1
+                return layout
+            case .grid:
+                let layout = VideoFeedGridLayout()
+                layout.numberOfColumns = 2
+                return layout
+        }
+    }
+}
+
+@objc
+public enum VideFeedSourceType: Int {
+    case discover, channel, playlist
+}
+
+public protocol VideoFeedViewDelegate: AnyObject {
+    /// Called once after a video feed has been successfully loaded
+    func videoFeedDidLoadFeed(_ view: VideoFeed)
+    /// Called if the video feed failed to load
+    func videoFeed(_ view: VideoFeed,
+                   didFailToLoadFeed error: VideoFeedError)
+}
+
+@objc
+public class VideoFeed: UIView, VideoFeedViewControllerDelegate {
+    @objc public var sourceType: VideFeedSourceType = .discover
+    @objc public var channel: String = ""
+    @objc public var playlist: String = ""
+    @objc public var mode: VideoFeedMode = .row
+    @objc public var feedViewConfig: VideoFeedConfiguration? {
+        didSet {
+            guard let feedVC = feedVC else {
+                return
+            }
+            feedVC.viewConfiguration = convertToVideoFeedConentConfiguration()
+        }
+    }
+    @objc public var playerViewConfig: VideoPlayerConfiguration? {
+       didSet {
+           guard let feedVC = feedVC else {
+               return
+           }
+           feedVC.viewConfiguration = convertToVideoFeedConentConfiguration()
+       }
+    }
+    @objc var onVideoFeedLoadFinished: RCTBubblingEventBlock?
+//    @objc var onVideoFeedClick: RCTBubblingEventBlock?
+    
+    public weak var delegate: VideoFeedViewDelegate?
+    
+    private var feedVC: VideoFeedViewController?
+    private var source: VideoFeedContentSource {
+        switch sourceType {
+        case .discover:
+            return .discover
+        case .channel:
+            return .channel(channelID: channel)
+        case .playlist:
+            return .channelPlaylist(channelID: channel, playlistID: playlist)
+        }
+    }
+    
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        
+        embed()
+    }
+    
+    private func embed() {
+        guard let parentVC = parentViewController else {
+            return
+        }
+        guard feedVC == nil else {
+            return
+        }
+        
+        let feedVC = VideoFeedViewController(
+            layout: mode.videoFeedLayout,
+            source: source
+        )
+        
+        feedVC.viewConfiguration = convertToVideoFeedConentConfiguration()
+        feedVC.delegate = self
+        self.feedVC = feedVC
+
+        parentVC.attachChild(feedVC, to: self)
+        
+//        parentVC.addChild(feedVC)
+//        addSubview(feedVC.view)
+//        feedVC.view.frame = bounds
+//        feedVC.didMove(toParent: parentVC)
+    }
+    
+    public override func removeFromSuperview() {
+        guard let feedVC = feedVC, let parentVC = parentViewController else {
+            return
+        }
+        
+        parentVC.detachChild(feedVC)
+//        feedVC.willMove(toParent: nil)
+//        feedVC.removeFromParent()
+//        feedVC.view.removeFromSuperview()
+    }
+    
+    @objc
+    public func refresh() {
+        guard let feedVC = feedVC else {
+            return
+        }
+        feedVC.refresh()
+    }
+    
+    //MARK: - VideoFeedViewControllerDelegate
+    public func videoFeedDidLoadFeed(_ viewController: VideoFeedViewController) {
+        guard let delegate = delegate else {
+            return
+        }
+        delegate.videoFeedDidLoadFeed(self)
+    }
+    
+    public func videoFeed(_ viewController: VideoFeedViewController, didFailToLoadFeed error: VideoFeedError) {
+        guard let delegate = delegate else {
+            return
+        }
+        delegate.videoFeed(self, didFailToLoadFeed: error)
+    }
+}
+
+extension VideoFeed {
+    private func convertToVideoFeedConentConfiguration() -> VideoFeedContentConfiguration {
+        var videoConfig = VideoFeedContentConfiguration()
+        //set default value so that behavior will the same with Android
+        videoConfig.itemView.title.isHidden = false
+        videoConfig.itemView.titleLayoutConfiguration.titlePosition = .nested
+        
+        let vfcConfig = VideoFeed.convertToVideoFeedItemConentConfiguration(feedViewConfig)
+        let vpcConfig = VideoFeed.convertToVideoPlayerConentConfiguration(playerViewConfig)
+        if let vfcConfig = vfcConfig {
+            videoConfig.itemView = vfcConfig
+        }
+        if let vpcConfig = vpcConfig {
+            videoConfig.playerView = vpcConfig
+        }
+        
+        if let backgroundColor = feedViewConfig?.backgroundColor {
+            videoConfig.backgroundColor = backgroundColor.uicolor()
+        }
+        if let shareBaseUrl = gShareBaseURL {
+            videoConfig.playerView.shareButton.behavior.baseURL = URL(string:shareBaseUrl)
+        }
+        
+        //set a value different from default value to compatible with FireworkVideo SDK misalign bug
+        videoConfig.itemView.titleLayoutConfiguration.insets = UIEdgeInsets(top: 7, left: 7, bottom: 7, right: 7)
+        
+        return videoConfig
+    }
+
+    private static func convertToVideoFeedItemConentConfiguration(_ config: VideoFeedConfiguration?) -> VideoFeedItemContentConfiguration? {
+        guard let config = config else {
+            return nil
+        }
+        
+        var vfcConfig = VideoFeedItemContentConfiguration()
+        //set default value so that behavior will the same with Android
+        vfcConfig.title.isHidden = false
+        vfcConfig.titleLayoutConfiguration.titlePosition = .nested
+        
+        if let cornerRadius = config.cornerRadius {
+            vfcConfig.cornerRadius = CGFloat(cornerRadius)
+        }
+        if let title = config.title {
+            if let hidden = title.hidden {
+                vfcConfig.title.isHidden = hidden
+            }
+            if let textcolor = title.textColor {
+                vfcConfig.title.textColor = textcolor.uicolor()
+            }
+            if let fontSize = title.fontSize {
+                vfcConfig.title.font = UIFont.systemFont(ofSize: CGFloat(fontSize))
+            }
+        }
+        if let playIcon = config.playIcon {
+            if let hidden = playIcon.hidden {
+                vfcConfig.playIcon.isHidden = hidden
+            }
+            if let iconWidth = playIcon.iconWidth {
+                vfcConfig.playIcon.iconWidth = CGFloat(iconWidth)
+            }
+        }
+        if let position = config.titlePosition {
+            switch position {
+            case .stacked:
+                vfcConfig.titleLayoutConfiguration.titlePosition = .stacked
+            default:
+                vfcConfig.titleLayoutConfiguration.titlePosition = .nested
+            }
+        }
+        
+        return vfcConfig
+    }
+    
+    private static func convertToVideoPlayerConentConfiguration(_ config: VideoPlayerConfiguration?) -> VideoPlayerContentConfiguration? {
+        guard let config = config else {
+            return nil
+        }
+        
+        var vpcConfig = VideoPlayerContentConfiguration()
+        if let playerStyle = config.playerStyle {
+            switch playerStyle {
+            case .full:
+                vpcConfig.playerStyle = .fullBleed
+            default:
+                vpcConfig.playerStyle = .fit
+            }
+        }
+        if let videoCompleteAction = config.videoCompleteAction {
+            switch videoCompleteAction {
+            case .loop:
+                vpcConfig.videoCompleteAction = .loop
+            default:
+                vpcConfig.videoCompleteAction = .advanceToNext
+            }
+        }
+        if let showShareButton = config.showShareButton {
+            vpcConfig.shareButton.isHidden = !showShareButton
+        }
+        if let ctaButtonStyle = config.ctaButtonStyle {
+            if let backgroundColor = ctaButtonStyle.backgroundColor {
+                vpcConfig.ctaButton.backgroundColor = backgroundColor.uicolor()
+            }
+            if let textcolor = ctaButtonStyle.textColor {
+                vpcConfig.ctaButton.textColor = textcolor.uicolor()
+            }
+            if let fontSize = ctaButtonStyle.fontSize {
+                vpcConfig.ctaButton.font = UIFont.systemFont(ofSize: CGFloat(fontSize))
+            }
+        }
+        
+        return vpcConfig
+    }
+}

package/ios/Component/VideoFeedConfiguration.swift

@@ -0,0 +1,32 @@
+//
+//  VideoFeedConfiguration.swift
+//  react-native-firework-sdk
+//
+//  Created by Jeff Zheng on 2021/12/28.
+//
+
+import Foundation
+
+@objc
+public class VideoFeedConfiguration: NSObject, Codable {
+    var backgroundColor: String?
+    var cornerRadius: Int?
+    var title: VideoFeedTitleConfiguration?
+    var titlePosition: VideoFeedTitlePosition?
+    var playIcon: VideoFeedPlayIconConfiguration?
+    
+    class VideoFeedTitleConfiguration: NSObject, Codable {
+        public var hidden: Bool?
+        public var textColor: String?
+        public var fontSize: Int?
+    }
+
+    class VideoFeedPlayIconConfiguration: NSObject, Codable {
+        public var hidden: Bool?
+        public var iconWidth: Int?
+    }
+    
+    enum VideoFeedTitlePosition: String, Codable {
+        case stacked, nested
+    }
+}

package/ios/Component/VideoFeedManager.m

@@ -0,0 +1,51 @@
+//
+//  VideoFeedManager.m
+//  react-native-firework-sdk
+//
+//  Created by Jeff Zheng on 2021/12/22.
+//
+//  The FWVideoFeedManager exposes instances of Objective-C (native) classes to JavaScript (JS) as JS objects
+
+#import <React/RCTBridgeModule.h>
+#import <React/RCTViewManager.h>
+#import <react_native_firework_sdk/react_native_firework_sdk-Swift.h>
+
+@interface RCT_EXTERN_REMAP_MODULE(FWVideoFeed, VideoFeedManager, NSObject)
+
+RCT_CUSTOM_VIEW_PROPERTY(source, VideFeedSourceType, VideoFeed) {
+    if (json) {
+        VideFeedSourceType sourceType = [RCTConvert videoFeedSourceType:json];
+        view.sourceType = sourceType;
+    }
+}
+RCT_EXPORT_VIEW_PROPERTY(channel, NSString)
+RCT_EXPORT_VIEW_PROPERTY(playlist, NSString)
+RCT_CUSTOM_VIEW_PROPERTY(mode, VideoFeedMode, VideoFeed) {
+    if (json) {
+        VideoFeedMode mode = [RCTConvert videoFeedMode:json];
+        view.mode = mode;
+    }
+}
+RCT_CUSTOM_VIEW_PROPERTY(videoFeedConfiguration, VideoFeedConfiguration, VideoFeed) {
+    VideoFeedConfiguration *config = [RCTConvert videoFeedConfiguration:json];
+    view.feedViewConfig = config;
+}
+RCT_CUSTOM_VIEW_PROPERTY(videoPlayerConfiguration, VideoPlayerConfiguration, VideoFeed) {
+    VideoPlayerConfiguration *config = [RCTConvert videoPlayerConfiguration:json];
+    view.playerViewConfig = config;
+}
+
+RCT_EXPORT_VIEW_PROPERTY(onVideoFeedLoadFinished, RCTBubblingEventBlock)
+//RCT_EXPORT_VIEW_PROPERTY(onVideoFeedClick, RCTBubblingEventBlock)
+
+RCT_EXPORT_METHOD(refresh:(nonnull NSNumber *)reactTag) {
+    [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
+            VideoFeed *view = (VideoFeed *)(viewRegistry[reactTag]);
+            if (!view || ![view isKindOfClass:[VideoFeed class]]) {
+                RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
+                return;
+            }
+            [view refresh];
+    }];
+}
+@end

package/ios/Component/VideoFeedManager.swift

@@ -0,0 +1,40 @@
+//
+//  VideoFeedManager.swift
+//  react-native-firework-sdk
+//
+//  Created by Jeff Zheng on 2021/12/22.
+//
+//  The FWVideoFeedManager manipulate FWVideoFeed view,need expose to JavaScript in Objective-C
+
+import Foundation
+import FireworkVideo
+
+@objc(VideoFeedManager)
+class VideoFeedManager: RCTViewManager, VideoFeedViewDelegate {
+    
+
+    override func view() -> UIView! {
+        let videFeed = VideoFeed()
+        videFeed.delegate = self
+
+        return videFeed
+    }
+    
+    override class func requiresMainQueueSetup() -> Bool {
+        return true
+    }
+    
+    // MARK: - FWVideoFeedViewDelegate
+    func videoFeedDidLoadFeed(_ view: VideoFeed) {
+        view.onVideoFeedLoadFinished?(nil)
+    }
+    
+    func videoFeed(_ view: VideoFeed, didFailToLoadFeed error: VideoFeedError) {
+        view.onVideoFeedLoadFinished?(error.jsObject)
+    }
+    
+//    // MARK: - FireworkVideoFeedDelegate
+//    func fireworkVideoDidTapVideoThumbnail(_ eventDetails: FeedEventDetails) {
+//        view.onVideoFeedClick?(eventDetails.jsObject)
+//    }
+}

package/ios/Component/VideoPlayerConfiguration.swift

@@ -0,0 +1,30 @@
+//
+//  VideoPlayerConfiguration.swift
+//  react-native-firework-sdk
+//
+//  Created by Jeff Zheng on 2021/12/28.
+//
+
+import Foundation
+
+@objc
+public class VideoPlayerConfiguration: NSObject, Codable {
+    var playerStyle: VideoPlayerStyle?
+    var videoCompleteAction: VideoPlayerCompleteAction?
+    var showShareButton: Bool?
+    var ctaButtonStyle: VideoPlayerCTAStyle?
+    
+    public enum VideoPlayerStyle: String, Codable {
+        case full, fit
+    }
+
+    public enum VideoPlayerCompleteAction: String, Codable {
+        case loop, advanceToNext
+    }
+
+    public class VideoPlayerCTAStyle: NSObject, Codable {
+        var backgroundColor: String?
+        var textColor: String?
+        var fontSize: Int?
+    }
+}

package/ios/FireworkSdk-Bridging-Header.h

@@ -0,0 +1,6 @@
+#import <React/RCTBridgeModule.h>
+#import <React/RCTViewManager.h>
+#import <React/RCTConvert.h>
+#import <React/RCTEventEmitter.h>
+#import <React/RCTComponent.h>
+#import <React/RCTLog.h>