witchsky.app / src / components / live / LiveStatusDialog.tsx

import {useCallback} from 'react'
import {View} from 'react-native'
import {Image} from 'expo-image'
import {type AppBskyActorDefs, type AppBskyEmbedExternal} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {useQueryClient} from '@tanstack/react-query'

import {useOpenLink} from '#/lib/hooks/useOpenLink'
import {type NavigationProp} from '#/lib/routes/types'
import {sanitizeHandle} from '#/lib/strings/handles'
import {toNiceDomain} from '#/lib/strings/url-helpers'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {unstableCacheProfileView} from '#/state/queries/profile'
import {android, atoms as a, platform, tokens, useTheme, web} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo'
import {createStaticClick, SimpleInlineLinkText} from '#/components/Link'
import {useGlobalReportDialogControl} from '#/components/moderation/ReportDialog'
import * as ProfileCard from '#/components/ProfileCard'
import {Text} from '#/components/Typography'
import {useAnalytics} from '#/analytics'
import type * as bsky from '#/types/bsky'
import {Globe_Stroke2_Corner0_Rounded} from '../icons/Globe'
import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRightIcon} from '../icons/SquareArrowTopRight'
import {LiveIndicator} from './LiveIndicator'

export function LiveStatusDialog({
  control,
  profile,
  embed,
  status,
  onPressViewAvatar,
}: {
  control: Dialog.DialogControlProps
  profile: bsky.profile.AnyProfileView
  status: AppBskyActorDefs.StatusView
  embed: AppBskyEmbedExternal.View
  onPressViewAvatar?: () => void
}) {
  const navigation = useNavigation<NavigationProp>()
  return (
    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
      <Dialog.Handle difference={!!embed.external.thumb} />
      <DialogInner
        status={status}
        profile={profile}
        embed={embed}
        navigation={navigation}
        onPressViewAvatar={onPressViewAvatar}
      />
    </Dialog.Outer>
  )
}

function DialogInner({
  profile,
  embed,
  navigation,
  status,
  onPressViewAvatar,
}: {
  profile: bsky.profile.AnyProfileView
  embed: AppBskyEmbedExternal.View
  navigation: NavigationProp
  status: AppBskyActorDefs.StatusView
  onPressViewAvatar?: () => void
}) {
  const {_} = useLingui()
  const control = Dialog.useDialogContext()

  const onPressOpenProfile = useCallback(() => {
    control.close(() => {
      navigation.push('Profile', {
        name: profile.handle,
      })
    })
  }, [navigation, profile.handle, control])

  const handlePressViewAvatar = useCallback(() => {
    if (onPressViewAvatar) {
      control.close(onPressViewAvatar)
    }
  }, [control, onPressViewAvatar])

  return (
    <Dialog.ScrollableInner
      label={_(msg`${sanitizeHandle(profile.handle)} is live`)}
      contentContainerStyle={[a.pt_0, a.px_0]}
      style={[web({maxWidth: 420}), a.overflow_hidden]}>
      <LiveStatus
        status={status}
        profile={profile}
        embed={embed}
        onPressOpenProfile={onPressOpenProfile}
        onPressViewAvatar={handlePressViewAvatar}
      />
      <Dialog.Close />
    </Dialog.ScrollableInner>
  )
}

export function LiveStatus({
  status,
  profile,
  embed,
  padding = 'xl',
  onPressOpenProfile,
  onPressViewAvatar,
}: {
  status: AppBskyActorDefs.StatusView
  profile: bsky.profile.AnyProfileView
  embed: AppBskyEmbedExternal.View
  padding?: 'lg' | 'xl'
  onPressOpenProfile: () => void
  onPressViewAvatar?: () => void
}) {
  const ax = useAnalytics()
  const {_} = useLingui()
  const t = useTheme()
  const queryClient = useQueryClient()
  const openLink = useOpenLink()
  const moderationOpts = useModerationOpts()
  const reportDialogControl = useGlobalReportDialogControl()
  const dialogContext = Dialog.useDialogContext()

  return (
    <>
      {embed.external.thumb && (
        <View
          style={[
            t.atoms.bg_contrast_25,
            a.w_full,
            a.aspect_card,
            android([
              a.overflow_hidden,
              {
                borderTopLeftRadius: a.rounded_md.borderRadius,
                borderTopRightRadius: a.rounded_md.borderRadius,
              },
            ]),
          ]}>
          <Image
            source={embed.external.thumb}
            contentFit="cover"
            style={[a.absolute, a.inset_0]}
            accessibilityIgnoresInvertColors
          />
          <LiveIndicator
            size="large"
            style={[
              a.absolute,
              {top: tokens.space.lg, left: tokens.space.lg},
              a.align_start,
            ]}
          />
        </View>
      )}
      <View
        style={[
          a.gap_lg,
          padding === 'xl'
            ? [a.px_xl, !embed.external.thumb ? a.pt_2xl : a.pt_lg]
            : a.p_lg,
        ]}>
        <View style={[a.w_full, a.justify_center, a.gap_2xs]}>
          <Text
            numberOfLines={3}
            style={[a.leading_snug, a.font_semi_bold, a.text_xl]}>
            {embed.external.title || embed.external.uri}
          </Text>
          <View style={[a.flex_row, a.align_center, a.gap_2xs]}>
            <Globe_Stroke2_Corner0_Rounded
              size="xs"
              style={[t.atoms.text_contrast_medium]}
            />
            <Text
              numberOfLines={1}
              style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
              {toNiceDomain(embed.external.uri)}
            </Text>
          </View>
        </View>
        <Button
          label={_(msg`Watch now`)}
          size={platform({native: 'large', web: 'small'})}
          color="primary"
          variant="solid"
          onPress={() => {
            ax.metric('live:card:watch', {subject: profile.did})
            openLink(embed.external.uri, false)
          }}>
          <ButtonText>
            <Trans>Watch now</Trans>
          </ButtonText>
          <ButtonIcon icon={SquareArrowTopRightIcon} />
        </Button>
        <View style={[t.atoms.border_contrast_low, a.border_t, a.w_full]} />
        {moderationOpts && (
          <ProfileCard.Header>
            <ProfileCard.Avatar
              profile={profile}
              moderationOpts={moderationOpts}
              disabledPreview
            />
            {/* Ensure wide enough on web hover */}
            <View style={[a.flex_1, web({minWidth: 100})]}>
              <ProfileCard.NameAndHandle
                profile={profile}
                moderationOpts={moderationOpts}
              />
            </View>
            <Button
              label={
                onPressViewAvatar ? _(msg`View avatar`) : _(msg`Open profile`)
              }
              size="small"
              color="secondary"
              variant="solid"
              onPress={() => {
                if (onPressViewAvatar) {
                  ax.metric('live:card:viewAvatar', {subject: profile.did})
                  onPressViewAvatar()
                } else {
                  ax.metric('live:card:openProfile', {subject: profile.did})
                  unstableCacheProfileView(queryClient, profile)
                  onPressOpenProfile()
                }
              }}>
              <ButtonText>
                {onPressViewAvatar ? (
                  <Trans>View avatar</Trans>
                ) : (
                  <Trans>Open profile</Trans>
                )}
              </ButtonText>
            </Button>
          </ProfileCard.Header>
        )}
        <View
          style={[
            a.flex_row,
            a.align_center,
            a.justify_between,
            a.w_full,
            a.pt_sm,
          ]}>
          <View style={[a.flex_row, a.align_center, a.gap_xs, a.flex_1]}>
            <CircleInfoIcon size="sm" fill={t.atoms.text_contrast_low.color} />
            <Text style={[t.atoms.text_contrast_low, a.text_sm]}>
              <Trans>Live feature is in beta</Trans>
            </Text>
          </View>
          {status && (
            <SimpleInlineLinkText
              label={_(msg`Report this livestream`)}
              {...createStaticClick(() => {
                function open() {
                  reportDialogControl.open({
                    subject: {
                      ...status,
                      $type: 'app.bsky.actor.defs#statusView',
                    },
                  })
                }
                if (dialogContext.isWithinDialog) {
                  dialogContext.close(open)
                } else {
                  open()
                }
              })}
              style={[a.text_sm, a.underline, t.atoms.text_contrast_medium]}>
              <Trans>Report</Trans>
            </SimpleInlineLinkText>
          )}
        </View>
      </View>
    </>
  )
}