Skip to content
This repository has been archived by the owner on Oct 4, 2023. It is now read-only.

Allow track owner to share premium content to socials C-2424 #3177

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Allow track owner to share premium content to socials C-2424 #3177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d341f5
allow track owner to share premium content to socials
nicoback Apr 5, 2023
cd0303f
share drawer fix
nicoback Apr 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/mobile/src/components/share-drawer/ShareDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ export const ShareDrawer = () => {
!content.track.is_unlisted &&
!content.track.is_invalid &&
!content.track.is_delete &&
!isPremiumTrack
(!isPremiumTrack || isOwner)

const shouldIncludeTikTokSoundAction = Boolean(
isShareSoundToTikTokEnabled && isOwner && isShareableTrack
Expand Down
50 changes: 44 additions & 6 deletions packages/mobile/src/components/share-drawer/useShareToStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,14 @@ import { useCallback, useMemo, useRef, useState } from 'react'
import EventEmitter from 'events'
import path from 'path'

import type { Color, Nullable, ShareModalContent } from '@audius/common'
import type {
Color,
Nullable,
QueryParams,
ShareModalContent
} from '@audius/common'
import {
premiumContentSelectors,
encodeHashId,
ErrorLevel,
modalsActions,
Expand Down Expand Up @@ -36,6 +42,7 @@ import { isImageUriSource } from 'app/hooks/useContentNodeImage'
import { useToast } from 'app/hooks/useToast'
import { make, track } from 'app/services/analytics'
import { apiClient } from 'app/services/audius-api-client'
import { audiusBackendInstance } from 'app/services/audius-backend-instance'
import { setVisibility } from 'app/store/drawers/slice'
import {
getCancel,
Expand Down Expand Up @@ -63,6 +70,7 @@ import { NativeDrawer } from '../drawer'
import { DEFAULT_IMAGE_URL, useTrackImage } from '../image/TrackImage'

import { messages } from './messages'
const { getPremiumTrackSignatureMap } = premiumContentSelectors

const DEFAULT_DOMINANT_COLORS = ['000000', '434343']
const stickerLoadedEventEmitter = new EventEmitter()
Expand Down Expand Up @@ -140,6 +148,7 @@ export const useShareToStory = ({
isStickerImageLoadedRef.current = true
stickerLoadedEventEmitter.emit(STICKER_LOADED_EVENT)
}
const premiumTrackSignatureMap = useSelector(getPremiumTrackSignatureMap)
const trackImageUri =
content?.type === 'track' && isImageUriSource(trackImage?.source)
? trackImage?.source?.uri
Expand Down Expand Up @@ -291,12 +300,40 @@ export const useShareToStory = ({
dispatch(setCancel(() => cancelStory(platform)))
toggleProgressDrawer(true, platform)

const encodedTrackId = encodeHashId(content.track.track_id)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

basically copied the logic from the Audio component for getting the right query params for the stream track URL.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool! Would it make sense to break this out into a helper function that both places use?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm yeah i think i can break out some of it


const premiumContentSignature = content.track.is_premium
? content.track.premium_content_signature ||
premiumTrackSignatureMap[content.track.track_id]
: null
const userData = `Premium content user signature at ${Date.now()}`
const trackStreamQueryParams = content.track.is_premium
? ({
user_data: userData,
user_signature: await audiusBackendInstance.getSignature(
userData
),
...(premiumContentSignature
? {
premium_content_signature: JSON.stringify(
premiumContentSignature
)
}
: {})
} as QueryParams)
: null
let streamMp3Url: string
if (trackStreamQueryParams) {
streamMp3Url = apiClient.makeUrl(
`/tracks/${encodedTrackId}/stream`,
trackStreamQueryParams
)
} else {
streamMp3Url = apiClient.makeUrl(`/tracks/${encodedTrackId}/stream`)
}

// Step 1: Render and take a screenshot of the sticker:
// Note: We have to capture the sticker image first because it doesn't work if you get the dominant colors first (mysterious).
const encodedTrackId = encodeHashId(content.track.track_id)
const streamMp3Url = apiClient.makeUrl(
`/tracks/${encodedTrackId}/stream`
)
const storyVideoPath = path.join(
RNFS.TemporaryDirectoryPath,
`storyVideo-${uuid()}.mp4`
Expand Down Expand Up @@ -450,7 +487,8 @@ export const useShareToStory = ({
cleanup,
dispatch,
cancelStory,
pasteToTikTokApp
pasteToTikTokApp,
premiumTrackSignatureMap
]
)

Expand Down