diff --git a/__tests__/lib/string.test.ts b/__tests__/lib/string.test.ts index c59c8b3e34..7a20a49a4e 100644 --- a/__tests__/lib/string.test.ts +++ b/__tests__/lib/string.test.ts @@ -437,6 +437,13 @@ describe('parseEmbedPlayerFromUrl', () => { 'https://www.flickr.com/groups/898944@N23/', 'https://www.flickr.com/groups', + + 'https://maxblansjaar.bandcamp.com/album/false-comforts', + 'https://grmnygrmny.bandcamp.com/track/fluid', + 'https://sufjanstevens.bandcamp.com/', + 'https://sufjanstevens.bandcamp.com', + 'https://bandcamp.com/', + 'https://bandcamp.com', ] const outputs = [ @@ -815,6 +822,23 @@ describe('parseEmbedPlayerFromUrl', () => { undefined, undefined, + + { + type: 'bandcamp_album', + source: 'bandcamp', + playerUri: + 'https://bandcamp.com/EmbeddedPlayer/url=https%3A%2F%2Fmaxblansjaar.bandcamp.com%2Falbum%2Ffalse-comforts/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/', + }, + { + type: 'bandcamp_track', + source: 'bandcamp', + playerUri: + 'https://bandcamp.com/EmbeddedPlayer/url=https%3A%2F%2Fgrmnygrmny.bandcamp.com%2Ftrack%2Ffluid/size=large/bgcol=ffffff/linkcol=0687f5/minimal=true/transparent=true/', + }, + undefined, + undefined, + undefined, + undefined, ] it('correctly grabs the correct id from uri', () => { diff --git a/src/components/dialogs/EmbedConsent.tsx b/src/components/dialogs/EmbedConsent.tsx index a9d96be533..7ffba6f3a7 100644 --- a/src/components/dialogs/EmbedConsent.tsx +++ b/src/components/dialogs/EmbedConsent.tsx @@ -9,7 +9,8 @@ import { externalEmbedLabels, } from '#/lib/strings/embed-player' import {useSetExternalEmbedPref} from '#/state/preferences' -import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {atoms as a, web} from '#/alf' +import {Admonition} from '#/components/Admonition' import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import {Text} from '#/components/Typography' @@ -24,9 +25,7 @@ export function EmbedConsentDialog({ onAccept: () => void }) { const {_} = useLingui() - const t = useTheme() const setExternalEmbedPref = useSetExternalEmbedPref() - const {gtMobile} = useBreakpoints() const onShowAllPress = useCallback(() => { for (const key of embedPlayerSources) { @@ -52,50 +51,46 @@ export function EmbedConsentDialog({ + style={web({maxWidth: 400})}> - + External Media - + This content is hosted by {externalEmbedLabels[source]}. Do you want to enable external media? - + External media may allow websites to collect information about you and your device. No information is sent or requested until you press the "play" button. - +