translation expo module

modules/expo-bluesky-translate/expo-module.config.json

@@ -0,0 +1,6 @@
+{
+  "platforms": ["ios"],
+  "ios": {
+    "modules": ["ExpoBlueskyTranslateModule"]
+  }
+}

modules/expo-bluesky-translate/index.ts

@@ -0,0 +1,4 @@
+export {
+  ExpoBlueskyTranslateView,
+  isAvailable,
+} from './src/ExpoBlueskyTranslateView'

modules/expo-bluesky-translate/ios/Common/UIHostingControllerCompat.swift

@@ -0,0 +1,20 @@
+import ExpoModulesCore
+import SwiftUI
+
+// Thanks to Andrew Levy for this code snippet
+// https://github.com/andrew-levy/swiftui-react-native/blob/d3fbb2abf07601ff0d4b83055e7717bb980910d6/ios/Common/ExpoView%2BUIHostingController.swift
+
+extension ExpoView {
+  func setupHostingController(_ hostingController: UIHostingController<some View>) {
+    hostingController.view.translatesAutoresizingMaskIntoConstraints = false
+    hostingController.view.backgroundColor = .clear
+
+    addSubview(hostingController.view)
+    NSLayoutConstraint.activate([
+      hostingController.view.topAnchor.constraint(equalTo: self.topAnchor),
+      hostingController.view.bottomAnchor.constraint(equalTo: self.bottomAnchor),
+      hostingController.view.leftAnchor.constraint(equalTo: self.leftAnchor),
+      hostingController.view.rightAnchor.constraint(equalTo: self.rightAnchor),
+    ])
+  }
+}

modules/expo-bluesky-translate/ios/ExpoBlueskyTranslate.podspec

@@ -0,0 +1,21 @@
+Pod::Spec.new do |s|
+  s.name           = 'ExpoBlueskyTranslate'
+  s.version        = '1.0.0'
+  s.summary        = 'Uses SwiftUI translation to translate text.'
+  s.description    = 'Uses SwiftUI translation to translate text.'
+  s.author         = ''
+  s.homepage       = 'https://docs.expo.dev/modules/'
+  s.platforms      = { :ios => '13.4' }
+  s.source         = { git: '' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    'SWIFT_COMPILATION_MODE' => 'wholemodule'
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

modules/expo-bluesky-translate/ios/ExpoBlueskyTranslateModule.swift

@@ -0,0 +1,18 @@
+import ExpoModulesCore
+import Foundation
+import SwiftUI
+
+public class ExpoBlueskyTranslateModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ExpoBlueskyTranslate")
+    View(ExpoBlueskyTranslateView.self) {
+      Events("onEvent")
+      Prop("text") { (view: ExpoBlueskyTranslateView, text: String) in
+        view.props.text = text
+      }
+      Prop("isPresented") { (view: ExpoBlueskyTranslateView, isPresented: Bool) in
+        view.props.isPresented = isPresented
+      }
+    }
+  }
+}

modules/expo-bluesky-translate/ios/ExpoBlueskyTranslateView.swift

@@ -0,0 +1,30 @@
+import ExpoModulesCore
+import Foundation
+import SwiftUI
+
+class TranslateViewProps: ObservableObject {
+  @Published var text: String = ""
+  @Published var isPresented: Bool = false
+  @Published var children: [UIView]?
+  @Published var onEvent: EventDispatcher
+  init(onEvent: EventDispatcher) {
+    self.onEvent = onEvent
+  }
+}
+
+class ExpoBlueskyTranslateView: ExpoView {
+  let props: TranslateViewProps
+  let onEvent = EventDispatcher()
+
+  override func didUpdateReactSubviews() {
+    let subChildren = self.reactSubviews()
+    props.children = subChildren
+  }
+
+  required init(appContext: AppContext? = nil) {
+    props = TranslateViewProps(onEvent: onEvent)
+    let hostingController = UIHostingController(rootView: TranslateView(props: props))
+    super.init(appContext: appContext)
+    setupHostingController(hostingController)
+  }
+}

modules/expo-bluesky-translate/ios/TranslateView.swift

@@ -0,0 +1,33 @@
+import SwiftUI
+import Translation
+
+struct TranslateView: View {
+  @ObservedObject var props: TranslateViewProps
+
+  var body: some View {
+    if #available(iOS 17.4, *) {
+      VStack {
+        ForEach(props.children?.indices ?? 0..<0, id: \.self) { index in
+          UIViewRepresentableWrapper(view: props.children?[index] ?? UIView())
+            .frame(
+              width: props.children?[index].frame.width,
+              height: props.children?[index].frame.height)
+        }
+      }
+      .translationPresentation(
+        isPresented: $props.isPresented,
+        text: props.text
+      )
+    }
+  }
+}
+
+struct UIViewRepresentableWrapper: UIViewRepresentable {
+  let view: UIView
+
+  func makeUIView(context: Context) -> UIView {
+    return view
+  }
+
+  func updateUIView(_ uiView: UIView, context: Context) {}
+}

modules/expo-bluesky-translate/src/ExpoBlueskyTranslate.types.ts

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export type ExpoBlueskyTranslateProps = {
+  text: string
+  isPresented?: boolean
+  children: React.ReactNode
+}

modules/expo-bluesky-translate/src/ExpoBlueskyTranslateView.ios.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import {Platform} from 'react-native'
+import {requireNativeViewManager} from 'expo-modules-core'
+
+import {ExpoBlueskyTranslateProps} from './ExpoBlueskyTranslate.types'
+
+const NativeView: React.ComponentType<ExpoBlueskyTranslateProps> =
+  requireNativeViewManager('ExpoBlueskyTranslate')
+
+export function ExpoBlueskyTranslateView(props: ExpoBlueskyTranslateProps) {
+  return <NativeView {...props} />
+}
+
+export const isAvailable = Number(Platform.Version) >= 17.4

modules/expo-bluesky-translate/src/ExpoBlueskyTranslateView.tsx

@@ -0,0 +1,7 @@
+import {ExpoBlueskyTranslateProps} from './ExpoBlueskyTranslate.types'
+
+export function ExpoBlueskyTranslateView(_: ExpoBlueskyTranslateProps) {
+  return null
+}
+
+export const isAvailable = false

modules/expo-scroll-forwarder/src/ExpoScrollForwarderView.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
+
 import {ExpoScrollForwarderViewProps} from './ExpoScrollForwarder.types'
+
 export function ExpoScrollForwarderView({
   children,
 }: React.PropsWithChildren<ExpoScrollForwarderViewProps>) {

src/view/com/post-thread/PostThreadItem.tsx

@@ -32,6 +32,10 @@ import {useSession} from 'state/session'
 import {PostThreadFollowBtn} from 'view/com/post-thread/PostThreadFollowBtn'
 import {atoms as a} from '#/alf'
 import {RichText} from '#/components/RichText'
+import {
+  ExpoBlueskyTranslateView,
+  isAvailable as isNativeTranslateAvailable,
+} from '../../../../modules/expo-bluesky-translate'
 import {ContentHider} from '../../../components/moderation/ContentHider'
 import {LabelsOnMyPost} from '../../../components/moderation/LabelsOnMe'
 import {PostAlerts} from '../../../components/moderation/PostAlerts'
@@ -318,6 +322,7 @@ let PostThreadItemLoaded = ({
             </ContentHider>
             <ExpandedPostDetails
               post={post}
+              text={record?.text || ''}
               translatorUrl={translatorUrl}
               needsTranslation={needsTranslation}
             />
@@ -620,32 +625,40 @@ function PostOuterWrapper({
 
 function ExpandedPostDetails({
   post,
+  text,
   needsTranslation,
   translatorUrl,
 }: {
   post: AppBskyFeedDefs.PostView
+  text: string
   needsTranslation: boolean
   translatorUrl: string
 }) {
   const pal = usePalette('default')
   const {_} = useLingui()
   const openLink = useOpenLink()
-  const onTranslatePress = React.useCallback(
-    () => openLink(translatorUrl),
-    [openLink, translatorUrl],
-  )
+  const [presented, setPresented] = React.useState(false)
+  const onTranslatePress = React.useCallback(() => {
+    if (isNativeTranslateAvailable) {
+      setPresented(true)
+    } else {
+      openLink(translatorUrl)
+    }
+  }, [openLink, translatorUrl])
   return (
     <View style={[s.flexRow, s.mt2, s.mb10]}>
       <Text style={pal.textLight}>{niceDate(post.indexedAt)}</Text>
       {needsTranslation && (
         <>
           <Text style={pal.textLight}> &middot; </Text>
-          <Text
-            style={pal.link}
-            title={_(msg`Translate`)}
-            onPress={onTranslatePress}>
-            <Trans>Translate</Trans>
-          </Text>
+          <ExpoBlueskyTranslateView text={text} isPresented={presented}>
+            <Text
+              style={pal.link}
+              title={_(msg`Translate`)}
+              onPress={onTranslatePress}>
+              <Trans>Translate</Trans>
+            </Text>
+          </ExpoBlueskyTranslateView>
         </>
       )}
     </View>