@instaread-co/react-native-instaread-sdk 1.3.4

package/android/src/oldarch/java/com/instaread/reactnative/InstareadNativePlayerViewManager.kt

@@ -0,0 +1,29 @@
+package com.instaread.reactnative
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.annotations.ReactProp
+
+/**
+ * Old architecture (Paper). No codegen delegate exists there, so the same two
+ * props are declared with `@ReactProp` instead; everything else is in the
+ * shared base. Kept so apps that have not moved to the new architecture — the
+ * reason this package supports both — still get the player.
+ */
+@ReactModule(name = InstareadNativePlayerViewManagerBase.NAME)
+class InstareadNativePlayerViewManager : InstareadNativePlayerViewManagerBase() {
+
+    @ReactProp(name = "publication")
+    fun setPublication(view: InstareadPlayerHostView, value: String?) {
+        view.setPublicationProp(value)
+    }
+
+    @ReactProp(name = "articleUrl")
+    fun setArticleUrl(view: InstareadPlayerHostView, value: String?) {
+        view.setArticleUrlProp(value)
+    }
+
+    @ReactProp(name = "dark")
+    fun setDark(view: InstareadPlayerHostView, value: Boolean) {
+        view.setDarkProp(value)
+    }
+}

package/ios/InstareadNativePlayerComponentView.h

@@ -0,0 +1,17 @@
+// New Architecture (Fabric) only. The old architecture uses
+// InstareadNativePlayerViewManager instead.
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// Fabric component that hosts the native InstareadSDK player. Internal: apps
+/// use the `InstareadPlayerView` React component, which sizes it.
+@interface InstareadNativePlayerComponentView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif

package/ios/InstareadNativePlayerComponentView.mm

@@ -0,0 +1,86 @@
+#import <Foundation/Foundation.h>
+
+// New Architecture (Fabric) only. The old architecture uses
+// InstareadNativePlayerViewManager instead.
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import "InstareadNativePlayerComponentView.h"
+
+#import <React/RCTConversions.h>
+
+#import <react/renderer/components/InstareadReactNativeSpec/ComponentDescriptors.h>
+#import <react/renderer/components/InstareadReactNativeSpec/EventEmitters.h>
+#import <react/renderer/components/InstareadReactNativeSpec/Props.h>
+#import <react/renderer/components/InstareadReactNativeSpec/RCTComponentViewHelpers.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+#if __has_include(<InstareadReactNative/InstareadReactNative-Swift.h>)
+#import <InstareadReactNative/InstareadReactNative-Swift.h>
+#else
+#import "InstareadReactNative-Swift.h"
+#endif
+
+using namespace facebook::react;
+
+@implementation InstareadNativePlayerComponentView {
+  InstareadPlayerHost *_host;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<InstareadNativePlayerComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const InstareadNativePlayerProps>();
+    _props = defaultProps;
+
+    _host = [[InstareadPlayerHost alloc] init];
+    __weak __typeof(self) weakSelf = self;
+    _host.onHeightChange = ^(CGFloat height) {
+      [weakSelf emitHeight:height];
+    };
+    self.contentView = _host;
+  }
+  return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &oldViewProps = *std::static_pointer_cast<InstareadNativePlayerProps const>(_props);
+  const auto &newViewProps = *std::static_pointer_cast<InstareadNativePlayerProps const>(props);
+
+  if (oldViewProps.publication != newViewProps.publication ||
+      oldViewProps.articleUrl != newViewProps.articleUrl ||
+      oldViewProps.dark != newViewProps.dark) {
+    [_host updateWithPublication:RCTNSStringFromString(newViewProps.publication)
+                      articleUrl:RCTNSStringFromString(newViewProps.articleUrl)
+                            dark:newViewProps.dark];
+  }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)prepareForRecycle
+{
+  [super prepareForRecycle];
+  [_host reset];
+  static const auto defaultProps = std::make_shared<const InstareadNativePlayerProps>();
+  _props = defaultProps;
+}
+
+- (void)emitHeight:(CGFloat)height
+{
+  if (!_eventEmitter) {
+    return;
+  }
+  std::static_pointer_cast<const InstareadNativePlayerEventEmitter>(_eventEmitter)
+      ->onHeightChange({.height = static_cast<double>(height)});
+}
+
+@end
+
+#endif

package/ios/InstareadNativePlayerLegacyView.h

@@ -0,0 +1,22 @@
+// Old architecture (Paper) only. The New Architecture uses
+// InstareadNativePlayerComponentView instead.
+#ifndef RCT_NEW_ARCH_ENABLED
+
+#import <React/RCTComponent.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// The native InstareadSDK player as a view a React Native view manager can create.
+@interface InstareadNativePlayerLegacyView : UIView
+
+@property (nonatomic, copy, nullable) NSString *publication;
+@property (nonatomic, copy, nullable) NSString *articleUrl;
+@property (nonatomic, assign) BOOL dark;
+@property (nonatomic, copy, nullable) RCTDirectEventBlock onHeightChange;
+
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif

package/ios/InstareadNativePlayerLegacyView.m

@@ -0,0 +1,45 @@
+#import <Foundation/Foundation.h>
+
+// Old architecture (Paper) only. The New Architecture uses
+// InstareadNativePlayerComponentView instead.
+#ifndef RCT_NEW_ARCH_ENABLED
+
+#import "InstareadNativePlayerLegacyView.h"
+
+#if __has_include(<InstareadReactNative/InstareadReactNative-Swift.h>)
+#import <InstareadReactNative/InstareadReactNative-Swift.h>
+#else
+#import "InstareadReactNative-Swift.h"
+#endif
+
+@implementation InstareadNativePlayerLegacyView {
+  InstareadPlayerHost *_host;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    _host = [[InstareadPlayerHost alloc] initWithFrame:self.bounds];
+    _host.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    __weak __typeof(self) weakSelf = self;
+    _host.onHeightChange = ^(CGFloat height) {
+      __strong __typeof(weakSelf) strongSelf = weakSelf;
+      if (strongSelf.onHeightChange) {
+        strongSelf.onHeightChange(@{@"height": @(height)});
+      }
+    };
+    [self addSubview:_host];
+  }
+  return self;
+}
+
+// React Native calls this once after each batch of prop changes, so changing
+// both props at once builds the player once.
+- (void)didSetProps:(NSArray<NSString *> *)changedProps
+{
+  [_host updateWithPublication:self.publication ?: @"" articleUrl:self.articleUrl ?: @"" dark:self.dark];
+}
+
+@end
+
+#endif

package/ios/InstareadNativePlayerViewManager.h

@@ -0,0 +1,14 @@
+// Old architecture (Paper) only. The New Architecture registers
+// InstareadNativePlayerComponentView through codegen instead.
+#ifndef RCT_NEW_ARCH_ENABLED
+
+#import <React/RCTViewManager.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface InstareadNativePlayerViewManager : RCTViewManager
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif

package/ios/InstareadNativePlayerViewManager.m

@@ -0,0 +1,28 @@
+#import <Foundation/Foundation.h>
+
+// Old architecture (Paper) only. The New Architecture registers
+// InstareadNativePlayerComponentView through codegen instead.
+#ifndef RCT_NEW_ARCH_ENABLED
+
+#import "InstareadNativePlayerViewManager.h"
+
+#import "InstareadNativePlayerLegacyView.h"
+
+@implementation InstareadNativePlayerViewManager
+
+// Same name as the codegen component, so the JS side is identical on both architectures.
+RCT_EXPORT_MODULE(InstareadNativePlayer)
+
+- (UIView *)view
+{
+  return [[InstareadNativePlayerLegacyView alloc] init];
+}
+
+RCT_EXPORT_VIEW_PROPERTY(publication, NSString)
+RCT_EXPORT_VIEW_PROPERTY(articleUrl, NSString)
+RCT_EXPORT_VIEW_PROPERTY(dark, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(onHeightChange, RCTDirectEventBlock)
+
+@end
+
+#endif

package/ios/InstareadPlayerHost.swift

@@ -0,0 +1,114 @@
+//
+//  InstareadPlayerHost.swift
+//  InstareadReactNative
+//
+//  The only place the React Native wrapper touches the native SDK. It uses the
+//  SDK's public API exactly as a UIKit app would — `InstareadPlayerView` and
+//  `InstareadPlayer.configure` — and adds nothing to it. The SDK's classes are
+//  Swift-only, so the Objective-C++ Fabric component talks to these two @objc
+//  types instead.
+//
+
+import InstareadSDK
+import UIKit
+
+/// Hosts one `InstareadPlayerView` and reports how tall it wants to be.
+///
+/// `InstareadPlayerView` sizes itself through `intrinsicContentSize` only, and a
+/// Fabric view is laid out by frame from JS, so this reads the intrinsic height
+/// after each layout pass and hands it to `onHeightChange`; JS turns it into the
+/// component's height.
+@objc(InstareadPlayerHost)
+public final class InstareadPlayerHost: UIView {
+    /// Set by the view that owns this host. If a height was already measured
+    /// before the handler arrived, it is delivered right away instead of lost.
+    @objc public var onHeightChange: ((CGFloat) -> Void)? {
+        didSet {
+            if reportedHeight > 0 {
+                onHeightChange?(reportedHeight)
+            }
+        }
+    }
+
+    private var player: InstareadPlayerView?
+    private var publication = ""
+    private var articleUrl = ""
+    private var dark = false
+    private var reportedHeight: CGFloat = 0
+
+    @objc(updateWithPublication:articleUrl:dark:)
+    public func update(publication: String, articleUrl: String, dark: Bool) {
+        guard publication != self.publication || articleUrl != self.articleUrl || dark != self.dark else { return }
+        self.publication = publication
+        self.articleUrl = articleUrl
+        self.dark = dark
+        rebuildPlayer()
+    }
+
+    /// Drops the player, e.g. when Fabric recycles this view for another article.
+    @objc public func reset() {
+        update(publication: "", articleUrl: "", dark: false)
+    }
+
+    private func rebuildPlayer() {
+        player?.removeFromSuperview()
+        player = nil
+
+        // Nothing to show without an article; an empty publication falls back to
+        // the one passed to InstareadPlayer.configure.
+        if !articleUrl.isEmpty {
+            let player = publication.isEmpty
+                ? InstareadPlayerView(articleUrl: articleUrl, dark: dark)
+                : InstareadPlayerView(publication: publication, articleUrl: articleUrl, dark: dark)
+            player.translatesAutoresizingMaskIntoConstraints = false
+            addSubview(player)
+            // No bottom constraint: the player's height is its own intrinsic one,
+            // whatever frame JS has given this view so far.
+            NSLayoutConstraint.activate([
+                player.topAnchor.constraint(equalTo: topAnchor),
+                player.leadingAnchor.constraint(equalTo: leadingAnchor),
+                player.trailingAnchor.constraint(equalTo: trailingAnchor),
+            ])
+            self.player = player
+        }
+        setNeedsLayout()
+        reportHeightIfNeeded()
+    }
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        reportHeightIfNeeded()
+    }
+
+    private func reportHeightIfNeeded() {
+        let height = ceil(player?.intrinsicContentSize.height ?? 0)
+        guard abs(height - reportedHeight) > 0.5 else { return }
+        reportedHeight = height
+        onHeightChange?(height)
+    }
+}
+
+/// `InstareadPlayer.configure(publication:)` for the TurboModule.
+@objc(InstareadBridge)
+public final class InstareadBridge: NSObject {
+    @objc(configureWithPublication:)
+    @MainActor
+    public static func configure(publication: String) {
+        #if DEBUG
+        warnIfBackgroundAudioIsMissing()
+        #endif
+        InstareadPlayer.configure(publication: publication)
+    }
+
+    #if DEBUG
+    /// The most common integration mistake: without `audio` in UIBackgroundModes,
+    /// playback stops when the screen locks. Development builds only; a release
+    /// build prints nothing.
+    private static func warnIfBackgroundAudioIsMissing() {
+        let modes = Bundle.main.object(forInfoDictionaryKey: "UIBackgroundModes") as? [String] ?? []
+        if !modes.contains("audio") {
+            NSLog("InstareadSDK: this app's Info.plist has no \"audio\" entry in UIBackgroundModes, so playback stops when the screen locks and the lock screen stays empty. Add it and rebuild.")
+        }
+    }
+    #endif
+}

package/ios/InstareadReactNativeModule.h

@@ -0,0 +1,18 @@
+#import <React/RCTBridgeModule.h>
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <InstareadReactNativeSpec/InstareadReactNativeSpec.h>
+#endif
+
+NS_ASSUME_NONNULL_BEGIN
+
+// The same module on both architectures: a TurboModule on the New Architecture,
+// a regular native module on the old one.
+#ifdef RCT_NEW_ARCH_ENABLED
+@interface InstareadReactNativeModule : NSObject <NativeInstareadReactNativeSpec>
+#else
+@interface InstareadReactNativeModule : NSObject <RCTBridgeModule>
+#endif
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/InstareadReactNativeModule.mm

@@ -0,0 +1,48 @@
+#import "InstareadReactNativeModule.h"
+
+#if __has_include(<InstareadReactNative/InstareadReactNative-Swift.h>)
+#import <InstareadReactNative/InstareadReactNative-Swift.h>
+#else
+#import "InstareadReactNative-Swift.h"
+#endif
+
+@implementation InstareadReactNativeModule
+
+RCT_EXPORT_MODULE(InstareadReactNative)
+
++ (BOOL)requiresMainQueueSetup
+{
+  return NO;
+}
+
+// InstareadPlayer.configure builds a UIWindow, so it has to run on main.
+static void InstareadConfigure(NSString *publication)
+{
+  dispatch_async(dispatch_get_main_queue(), ^{
+    [InstareadBridge configureWithPublication:publication];
+  });
+}
+
+#ifdef RCT_NEW_ARCH_ENABLED
+
+- (void)configure:(NSString *)publication
+{
+  InstareadConfigure(publication);
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeInstareadReactNativeSpecJSI>(params);
+}
+
+#else
+
+RCT_EXPORT_METHOD(configure : (NSString *)publication)
+{
+  InstareadConfigure(publication);
+}
+
+#endif
+
+@end

package/lib/module/InstareadNativePlayerNativeComponent.ts

@@ -0,0 +1,22 @@
+// The codegen types are imported from their original paths, not from the
+// `react-native` root: the root only re-exports them (as `CodegenTypes`) in
+// newer React Native, and the code generator on older versions doesn't
+// recognise that namespace form.
+import type { ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+// eslint-disable-next-line @react-native/no-deep-imports -- deliberate, see above
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+type HeightChangeEvent = Readonly<{ height: Double }>;
+
+export interface NativeProps extends ViewProps {
+  publication?: string;
+  articleUrl?: string;
+  dark?: boolean;
+  onHeightChange?: DirectEventHandler<HeightChangeEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>('InstareadNativePlayer');

package/lib/module/InstareadPlayer.js

@@ -0,0 +1,16 @@
+"use strict";
+
+import NativeInstareadReactNative from "./NativeInstareadReactNative.js";
+export const InstareadPlayer = {
+  /**
+   * Call once at app start, before anything renders.
+   *
+   * Sets the publication that `<InstareadPlayerView articleUrl=... />` uses and
+   * turns on the Instaread mini player, which floats above your app while
+   * something plays.
+   */
+  configure(publication) {
+    NativeInstareadReactNative?.configure(publication);
+  }
+};
+//# sourceMappingURL=InstareadPlayer.js.map

package/lib/module/InstareadPlayerView.js

@@ -0,0 +1,137 @@
+"use strict";
+
+import { Component, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+// In a release build the player stays silent whatever goes wrong; while
+// developing, say why nothing shows.
+function warnInDev(message) {
+  if (__DEV__) {
+    console.warn(`[InstareadSDK] ${message}`);
+  }
+}
+
+// iOS and Android both ship the native component. Anywhere else (web, for
+// instance) requiring it would register a component that doesn't exist, so the
+// player renders nothing instead.
+function loadNativePlayer() {
+  if (Platform.OS !== 'ios' && Platform.OS !== 'android') {
+    return null;
+  }
+  try {
+    return require('./InstareadNativePlayerNativeComponent').default;
+  } catch (error) {
+    warnInDev(`The native player could not be loaded: ${String(error)}`);
+    return null;
+  }
+}
+const NativePlayer = loadNativePlayer();
+
+/**
+ * The player never puts an error in your app: if the native side is missing
+ * (say the app wasn't rebuilt after installing the SDK), it renders nothing.
+ */
+class FailSilent extends Component {
+  state = {
+    failed: false
+  };
+  static getDerivedStateFromError() {
+    return {
+      failed: true
+    };
+  }
+  componentDidCatch(error) {
+    warnInDev(`The player could not be shown (${error.message}). Rebuild the app after installing the SDK` + (Platform.OS === 'ios' ? ', running `pod install` first.' : '.'));
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+}
+
+// The player's size is decided on Instaread's side — the height is reported by
+// the player itself and the width always fills whatever container it is placed
+// in, matching the native SDKs (Compose appends fillMaxWidth(), the Android
+// View takes its parent's width, SwiftUI takes the available width). So none of
+// these can be set from the app; placement — margins, alignment, padding — is
+// still yours.
+const OWNED_STYLE_KEYS = ['height', 'minHeight', 'maxHeight', 'width', 'minWidth', 'maxWidth', 'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'aspectRatio'];
+function layoutOnly(style) {
+  const flat = {
+    ...StyleSheet.flatten(style)
+  };
+  for (const key of OWNED_STYLE_KEYS) {
+    delete flat[key];
+  }
+  return flat;
+}
+
+// How long to wait, after mounting or after articleUrl/publication changes,
+// before treating a still-empty player as onError. Not a signal from the
+// player itself — the native SDK never reports a distinct error, so this is
+// a React Native-side guess, and a legitimately slow load looks the same as
+// a real failure until it either resolves or this fires. 15s, not something
+// shorter: the server can be slow to respond while autoscaling.
+const EMPTY_AFTER_MS = 15000;
+/**
+ * The Instaread player for an article. It sizes itself: zero height until there
+ * is something to show, then the loader, then the player.
+ */
+export function InstareadPlayerView({
+  articleUrl,
+  publication,
+  dark = false,
+  style,
+  onReady,
+  onError
+}) {
+  const [height, setHeight] = useState(0);
+  const isReady = useRef(false);
+  const emptyTimer = useRef(null);
+
+  // A new article/publication is a fresh attempt: forget the last result and
+  // give this one its own onError timeout.
+  useEffect(() => {
+    isReady.current = false;
+    setHeight(0);
+    emptyTimer.current = setTimeout(() => {
+      if (!isReady.current) {
+        onError?.();
+      }
+    }, EMPTY_AFTER_MS);
+    return () => {
+      if (emptyTimer.current) {
+        clearTimeout(emptyTimer.current);
+      }
+    };
+    // Only articleUrl/publication/dark should restart the attempt — not
+    // identity changes of onReady/onError themselves.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [articleUrl, publication, dark]);
+  const onHeightChange = useCallback(event => {
+    const next = event.nativeEvent.height;
+    setHeight(next);
+    if (next > 0 && !isReady.current) {
+      isReady.current = true;
+      if (emptyTimer.current) {
+        clearTimeout(emptyTimer.current);
+      }
+      onReady?.();
+    }
+  }, [onReady]);
+  const layout = useMemo(() => layoutOnly(style), [style]);
+  if (!NativePlayer) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(FailSilent, {
+    children: /*#__PURE__*/_jsx(NativePlayer, {
+      articleUrl: articleUrl,
+      publication: publication ?? '',
+      dark: dark,
+      onHeightChange: onHeightChange,
+      style: [layout, {
+        height
+      }]
+    })
+  });
+}
+//# sourceMappingURL=InstareadPlayerView.js.map

package/lib/module/NativeInstareadReactNative.js

@@ -0,0 +1,7 @@
+"use strict";
+
+import { TurboModuleRegistry } from 'react-native';
+// `get`, not `getEnforcing`: on a platform without the native module (Android)
+// `InstareadPlayer.configure` is a no-op instead of a crash in the app.
+export default TurboModuleRegistry.get('InstareadReactNative');
+//# sourceMappingURL=NativeInstareadReactNative.js.map

package/lib/module/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { InstareadPlayer } from "./InstareadPlayer.js";
+export { InstareadPlayerView } from "./InstareadPlayerView.js";
+//# sourceMappingURL=index.js.map

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/react-native-deep-imports.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=react-native-deep-imports.d.js.map

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/InstareadNativePlayerNativeComponent.d.ts

@@ -0,0 +1,14 @@
+import type { ViewProps } from 'react-native';
+import type { DirectEventHandler, Double } from 'react-native/Libraries/Types/CodegenTypes';
+type HeightChangeEvent = Readonly<{
+    height: Double;
+}>;
+export interface NativeProps extends ViewProps {
+    publication?: string;
+    articleUrl?: string;
+    dark?: boolean;
+    onHeightChange?: DirectEventHandler<HeightChangeEvent>;
+}
+declare const _default: import("react-native").HostComponent<NativeProps>;
+export default _default;
+//# sourceMappingURL=InstareadNativePlayerNativeComponent.d.ts.map

package/lib/typescript/src/InstareadPlayer.d.ts

@@ -0,0 +1,11 @@
+export declare const InstareadPlayer: {
+    /**
+     * Call once at app start, before anything renders.
+     *
+     * Sets the publication that `<InstareadPlayerView articleUrl=... />` uses and
+     * turns on the Instaread mini player, which floats above your app while
+     * something plays.
+     */
+    configure(publication: string): void;
+};
+//# sourceMappingURL=InstareadPlayer.d.ts.map