diff --git a/packages/mobile/src/components/share-drawer/ShareDrawer.tsx b/packages/mobile/src/components/share-drawer/ShareDrawer.tsx index d397c6fcb5..db065e9a0a 100644 --- a/packages/mobile/src/components/share-drawer/ShareDrawer.tsx +++ b/packages/mobile/src/components/share-drawer/ShareDrawer.tsx @@ -3,6 +3,7 @@ import React, { useCallback, useRef } from 'react' import { accountSelectors, collectionsSocialActions, + createChatModalActions, FeatureFlags, shareModalUISelectors, shareSoundToTiktokModalActions, @@ -16,12 +17,15 @@ import { useDispatch, useSelector } from 'react-redux' import IconInstagram from 'app/assets/images/iconInstagram.svg' import IconLink from 'app/assets/images/iconLink.svg' +import IconMessage from 'app/assets/images/iconMessage.svg' import IconShare from 'app/assets/images/iconShare.svg' import IconSnapchat from 'app/assets/images/iconSnapchat.svg' import TikTokIcon from 'app/assets/images/iconTikTokInverted.svg' import IconTwitterBird from 'app/assets/images/iconTwitterBird.svg' +import { useNavigation } from 'app/hooks/useNavigation' import { useFeatureFlag } from 'app/hooks/useRemoteConfig' import { useToast } from 'app/hooks/useToast' +import type { AppTabScreenParamList } from 'app/screens/app-screen' import { makeStyles } from 'app/styles' import { useThemeColors } from 'app/utils/theme' @@ -39,6 +43,7 @@ const { shareUser } = usersSocialActions const { shareTrack } = tracksSocialActions const { shareCollection } = collectionsSocialActions const { getAccountUser } = accountSelectors +const { setState: setCreateChatModalState } = createChatModalActions export const shareToastTimeout = 1500 @@ -81,6 +86,7 @@ const useStyles = makeStyles(({ spacing }) => ({ export const ShareDrawer = () => { const styles = useStyles() const viewShotRef = useRef() as React.RefObject + const navigation = useNavigation() const { isEnabled: isShareSoundToTikTokEnabled } = useFeatureFlag( FeatureFlags.SHARE_SOUND_TO_TIKTOK @@ -100,6 +106,17 @@ export const ShareDrawer = () => { const isPremiumTrack = content?.type === 'track' && content.track.is_premium + const handleShareToDirectMessage = useCallback(async () => { + if (!content) return + navigation.navigate('ChatUserList') + dispatch( + setCreateChatModalState({ + // Just care about the link + presetMessage: getContentUrl(content) + }) + ) + }, [content, dispatch, navigation]) + const handleShareToTwitter = useCallback(async () => { if (!content) return const twitterShareUrl = await getTwitterShareUrl(content) @@ -166,6 +183,12 @@ export const ShareDrawer = () => { ) const getRows = useCallback(() => { + const shareToChatAction = { + icon: , + text: messages.directMessage, + callback: handleShareToDirectMessage + } + const shareToTwitterAction = { icon: , text: messages.twitter, @@ -185,13 +208,13 @@ export const ShareDrawer = () => { } const copyLinkAction = { - text: messages.copyLink(shareType), + text: messages.copyLink, icon: , callback: handleCopyLink } const shareSheetAction = { - text: messages.shareSheet(shareType), + text: messages.shareSheet, icon: , callback: handleOpenShareSheet } @@ -213,7 +236,7 @@ export const ShareDrawer = () => { icon: React.ReactElement style?: Record callback: (() => void) | (() => Promise) - }[] = [shareToTwitterAction] + }[] = [shareToChatAction, shareToTwitterAction] if (shouldIncludeTikTokSoundAction) { result.push(shareSoundToTiktokAction) @@ -221,8 +244,8 @@ export const ShareDrawer = () => { if (isShareableTrack) { result.push(shareToInstagramStoriesAction) - result.push(shareToSnapchatAction) result.push(shareVideoToTiktokAction) + result.push(shareToSnapchatAction) } result.push(copyLinkAction, shareSheetAction) @@ -231,7 +254,6 @@ export const ShareDrawer = () => { }, [ handleShareToTwitter, handleShareSoundToTikTok, - shareType, secondary, handleCopyLink, handleOpenShareSheet, @@ -239,7 +261,8 @@ export const ShareDrawer = () => { handleShareToInstagramStory, shouldIncludeTikTokSoundAction, isShareableTrack, - handleShareVideoToTiktok + handleShareVideoToTiktok, + handleShareToDirectMessage ]) return ( diff --git a/packages/mobile/src/components/share-drawer/messages.ts b/packages/mobile/src/components/share-drawer/messages.ts index bb042332c9..1b7222402b 100644 --- a/packages/mobile/src/components/share-drawer/messages.ts +++ b/packages/mobile/src/components/share-drawer/messages.ts @@ -12,14 +12,15 @@ export const messages = { modalTitle: (asset: ShareType) => `Share ${shareTypeMap[asset]}`, hiddenPlaylistShareHelperText: 'Spread the word! Share your playlist with friends and fans! Hidden playlists will be visible to anyone on the internet with the link.', - twitter: 'Share to Twitter', - instagramStory: 'Share to Instagram Story', - snapchat: 'Share to Snapchat', - tikTokVideo: 'Share to TikTok', + directMessage: 'Direct Message', + twitter: 'Twitter', + instagramStory: ' Instagram Story', + snapchat: 'Snapchat', + tikTokVideo: 'TikTok', tikTokSound: 'Share Sound to TikTok', - copyLink: (asset: ShareType) => `Copy Link to ${shareTypeMap[asset]}`, + copyLink: 'Copy Link', shareToStoryError: 'Sorry, something went wrong.', - shareSheet: (asset: ShareType) => `Share ${asset} via...`, + shareSheet: 'More...', toast: (asset: ShareType) => `Copied Link to ${shareTypeMap[asset]}`, trackShareText: (title: string, handle: string) => `Check out ${title} by ${handle} on @AudiusProject #Audius`, diff --git a/packages/mobile/src/screens/chat-screen/ChatTextInput.tsx b/packages/mobile/src/screens/chat-screen/ChatTextInput.tsx index 0d71ae8047..ba31a7a1ee 100644 --- a/packages/mobile/src/screens/chat-screen/ChatTextInput.tsx +++ b/packages/mobile/src/screens/chat-screen/ChatTextInput.tsx @@ -1,6 +1,10 @@ import { useCallback, useState } from 'react' -import { chatActions, playerSelectors } from '@audius/common' +import { + chatActions, + createChatModalSelectors, + playerSelectors +} from '@audius/common' import { Platform, Pressable } from 'react-native' import { useDispatch, useSelector } from 'react-redux' @@ -13,6 +17,7 @@ import { useThemeColors } from 'app/utils/theme' const { sendMessage } = chatActions const { getHasTrack } = playerSelectors +const { getPresetMessage } = createChatModalSelectors const messages = { startNewMessage: ' Start a New Message' @@ -60,7 +65,8 @@ export const ChatTextInput = ({ const dispatch = useDispatch() const { primary, primaryDark2 } = useThemeColors() - const [inputMessage, setInputMessage] = useState('') + const presetMessage = useSelector(getPresetMessage) + const [inputMessage, setInputMessage] = useState(presetMessage ?? '') const hasLength = inputMessage.length > 0 const hasCurrentlyPlayingTrack = useSelector(getHasTrack)