Player improvement pre-reqs (#3618)

* add dims to type

* save

* add the dimensions to the embed info

* add a new case

* add a new case

* limit this case to giphy

* use gate

* flip mp4/webp

* fix tests

* add new test
zio/stable
Hailey 2024-04-19 15:31:20 -07:00 committed by GitHub
parent 22e86c9903
commit c0ca891501
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 89 additions and 43 deletions

View File

@ -1,17 +1,18 @@
import {RichText} from '@atproto/api'
import {parseEmbedPlayerFromUrl} from 'lib/strings/embed-player'
import {cleanError} from '../../src/lib/strings/errors'
import {createFullHandle, makeValidHandle} from '../../src/lib/strings/handles'
import {enforceLen, pluralize} from '../../src/lib/strings/helpers'
import {detectLinkables} from '../../src/lib/strings/rich-text-detection'
import {shortenLinks} from '../../src/lib/strings/rich-text-manip'
import {ago} from '../../src/lib/strings/time'
import {
makeRecordUri,
toNiceDomain,
toShortUrl,
toShareUrl,
toShortUrl,
} from '../../src/lib/strings/url-helpers'
import {pluralize, enforceLen} from '../../src/lib/strings/helpers'
import {ago} from '../../src/lib/strings/time'
import {detectLinkables} from '../../src/lib/strings/rich-text-detection'
import {shortenLinks} from '../../src/lib/strings/rich-text-manip'
import {makeValidHandle, createFullHandle} from '../../src/lib/strings/handles'
import {cleanError} from '../../src/lib/strings/errors'
import {parseEmbedPlayerFromUrl} from 'lib/strings/embed-player'
describe('detectLinkables', () => {
const inputs = [
@ -434,6 +435,8 @@ describe('parseEmbedPlayerFromUrl', () => {
'https://giphy.com/gif/some-random-gif-name-gifId',
'https://giphy.com/gifs/',
'https://giphy.com/gifs/39248209509382934029?hh=100&ww=100',
'https://media.giphy.com/media/gifId/giphy.webp',
'https://media0.giphy.com/media/gifId/giphy.webp',
'https://media1.giphy.com/media/gifId/giphy.gif',
@ -621,18 +624,31 @@ describe('parseEmbedPlayerFromUrl', () => {
isGif: true,
hideDetails: true,
metaUri: 'https://giphy.com/gifs/gifId',
playerUri: 'https://i.giphy.com/media/gifId/giphy.webp',
playerUri: 'https://i.giphy.com/media/gifId/200.webp',
},
undefined,
undefined,
{
type: 'giphy_gif',
source: 'giphy',
isGif: true,
hideDetails: true,
metaUri: 'https://giphy.com/gifs/39248209509382934029',
playerUri: 'https://i.giphy.com/media/39248209509382934029/200.mp4',
dimensions: {
width: 100,
height: 100,
},
},
{
type: 'giphy_gif',
source: 'giphy',
isGif: true,
hideDetails: true,
metaUri: 'https://giphy.com/gifs/gifId',
playerUri: 'https://i.giphy.com/media/gifId/giphy.webp',
playerUri: 'https://i.giphy.com/media/gifId/200.webp',
},
{
type: 'giphy_gif',
@ -640,7 +656,7 @@ describe('parseEmbedPlayerFromUrl', () => {
isGif: true,
hideDetails: true,
metaUri: 'https://giphy.com/gifs/gifId',
playerUri: 'https://i.giphy.com/media/gifId/giphy.webp',
playerUri: 'https://i.giphy.com/media/gifId/200.webp',
},
{
type: 'giphy_gif',
@ -648,7 +664,7 @@ describe('parseEmbedPlayerFromUrl', () => {
isGif: true,
hideDetails: true,
metaUri: 'https://giphy.com/gifs/gifId',
playerUri: 'https://i.giphy.com/media/gifId/giphy.webp',
playerUri: 'https://i.giphy.com/media/gifId/200.webp',
},
{
type: 'giphy_gif',
@ -656,7 +672,7 @@ describe('parseEmbedPlayerFromUrl', () => {
isGif: true,
hideDetails: true,
metaUri: 'https://giphy.com/gifs/gifId',
playerUri: 'https://i.giphy.com/media/gifId/giphy.webp',
playerUri: 'https://i.giphy.com/media/gifId/200.webp',
},
{
type: 'giphy_gif',
@ -664,7 +680,7 @@ describe('parseEmbedPlayerFromUrl', () => {
isGif: true,
hideDetails: true,
metaUri: 'https://giphy.com/gifs/gifId',
playerUri: 'https://i.giphy.com/media/gifId/giphy.webp',
playerUri: 'https://i.giphy.com/media/gifId/200.webp',
},
{
type: 'giphy_gif',
@ -672,7 +688,7 @@ describe('parseEmbedPlayerFromUrl', () => {
isGif: true,
hideDetails: true,
metaUri: 'https://giphy.com/gifs/gifId',
playerUri: 'https://i.giphy.com/media/gifId/giphy.webp',
playerUri: 'https://i.giphy.com/media/gifId/200.webp',
},
undefined,
undefined,
@ -684,7 +700,7 @@ describe('parseEmbedPlayerFromUrl', () => {
isGif: true,
hideDetails: true,
metaUri: 'https://giphy.com/gifs/gifId',
playerUri: 'https://i.giphy.com/media/gifId/giphy.webp',
playerUri: 'https://i.giphy.com/media/gifId/200.webp',
},
{
@ -693,7 +709,7 @@ describe('parseEmbedPlayerFromUrl', () => {
isGif: true,
hideDetails: true,
metaUri: 'https://giphy.com/gifs/gifId',
playerUri: 'https://i.giphy.com/media/gifId/giphy.webp',
playerUri: 'https://i.giphy.com/media/gifId/200.webp',
},
{
type: 'giphy_gif',
@ -701,7 +717,7 @@ describe('parseEmbedPlayerFromUrl', () => {
isGif: true,
hideDetails: true,
metaUri: 'https://giphy.com/gifs/gifId',
playerUri: 'https://i.giphy.com/media/gifId/giphy.webp',
playerUri: 'https://i.giphy.com/media/gifId/200.webp',
},
{
type: 'giphy_gif',
@ -709,7 +725,7 @@ describe('parseEmbedPlayerFromUrl', () => {
isGif: true,
hideDetails: true,
metaUri: 'https://giphy.com/gifs/gifId',
playerUri: 'https://i.giphy.com/media/gifId/giphy.webp',
playerUri: 'https://i.giphy.com/media/gifId/200.webp',
},
{
type: 'giphy_gif',
@ -717,7 +733,7 @@ describe('parseEmbedPlayerFromUrl', () => {
isGif: true,
hideDetails: true,
metaUri: 'https://giphy.com/gifs/gifId',
playerUri: 'https://i.giphy.com/media/gifId/giphy.webp',
playerUri: 'https://i.giphy.com/media/gifId/200.webp',
},
{

View File

@ -4,6 +4,7 @@ export type Gate =
| 'disable_min_shell_on_foregrounding_v2'
| 'disable_poll_on_discover_v2'
| 'hide_vertical_scroll_indicators'
| 'new_gif_player'
| 'new_profile_scroll_component'
| 'receive_updates'
| 'show_follow_back_label_v2'

View File

@ -1,4 +1,5 @@
import {Dimensions} from 'react-native'
import {isWeb} from 'platform/detection'
const {height: SCREEN_HEIGHT} = Dimensions.get('window')
@ -60,6 +61,10 @@ export interface EmbedPlayerParams {
source: EmbedPlayerSource
metaUri?: string
hideDetails?: boolean
dimensions?: {
height: number
width: number
}
}
const giphyRegex = /media(?:[0-4]\.giphy\.com|\.giphy\.com)/i
@ -250,6 +255,16 @@ export function parseEmbedPlayerFromUrl(
if (urlp.hostname === 'giphy.com' || urlp.hostname === 'www.giphy.com') {
const [_, gifs, nameAndId] = urlp.pathname.split('/')
const h = urlp.searchParams.get('hh')
const w = urlp.searchParams.get('ww')
let dimensions
if (h && w) {
dimensions = {
height: Number(h),
width: Number(w),
}
}
/*
* nameAndId is a string that consists of the name (dash separated) and the id of the gif (the last part of the name)
* We want to get the id of the gif, then direct to media.giphy.com/media/{id}/giphy.webp so we can
@ -266,7 +281,10 @@ export function parseEmbedPlayerFromUrl(
isGif: true,
hideDetails: true,
metaUri: `https://giphy.com/gifs/${gifId}`,
playerUri: `https://i.giphy.com/media/${gifId}/giphy.webp`,
playerUri: `https://i.giphy.com/media/${gifId}/${
dimensions ? '200.mp4' : '200.webp'
}`,
dimensions,
}
}
}
@ -287,7 +305,7 @@ export function parseEmbedPlayerFromUrl(
isGif: true,
hideDetails: true,
metaUri: `https://giphy.com/gifs/${trackingOrId}`,
playerUri: `https://i.giphy.com/media/${trackingOrId}/giphy.webp`,
playerUri: `https://i.giphy.com/media/${trackingOrId}/200.webp`,
}
} else if (filename && gifFilenameRegex.test(filename)) {
return {
@ -296,7 +314,7 @@ export function parseEmbedPlayerFromUrl(
isGif: true,
hideDetails: true,
metaUri: `https://giphy.com/gifs/${idOrFilename}`,
playerUri: `https://i.giphy.com/media/${idOrFilename}/giphy.webp`,
playerUri: `https://i.giphy.com/media/${idOrFilename}/200.webp`,
}
}
}
@ -315,7 +333,7 @@ export function parseEmbedPlayerFromUrl(
isGif: true,
hideDetails: true,
metaUri: `https://giphy.com/gifs/${gifId}`,
playerUri: `https://i.giphy.com/media/${gifId}/giphy.webp`,
playerUri: `https://i.giphy.com/media/${gifId}/200.webp`,
}
} else if (mediaOrFilename) {
const gifId = mediaOrFilename.split('.')[0]
@ -327,7 +345,7 @@ export function parseEmbedPlayerFromUrl(
metaUri: `https://giphy.com/gifs/${gifId}`,
playerUri: `https://i.giphy.com/media/${
mediaOrFilename.split('.')[0]
}/giphy.webp`,
}/200.webp`,
}
}
}

View File

@ -1,15 +1,17 @@
import React from 'react'
import {Image} from 'expo-image'
import {Text} from '../text/Text'
import {StyleSheet, View} from 'react-native'
import {Image} from 'expo-image'
import {AppBskyEmbedExternal} from '@atproto/api'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {AppBskyEmbedExternal} from '@atproto/api'
import {toNiceDomain} from 'lib/strings/url-helpers'
import {useGate} from 'lib/statsig/statsig'
import {parseEmbedPlayerFromUrl} from 'lib/strings/embed-player'
import {ExternalPlayer} from 'view/com/util/post-embeds/ExternalPlayerEmbed'
import {ExternalGifEmbed} from 'view/com/util/post-embeds/ExternalGifEmbed'
import {toNiceDomain} from 'lib/strings/url-helpers'
import {useExternalEmbedsPrefs} from 'state/preferences'
import {ExternalGifEmbed} from 'view/com/util/post-embeds/ExternalGifEmbed'
import {ExternalPlayer} from 'view/com/util/post-embeds/ExternalPlayerEmbed'
import {Text} from '../text/Text'
export const ExternalLinkEmbed = ({
link,
@ -19,6 +21,7 @@ export const ExternalLinkEmbed = ({
const pal = usePalette('default')
const {isMobile} = useWebMediaQueries()
const externalEmbedPrefs = useExternalEmbedsPrefs()
const gate = useGate()
const embedPlayerParams = React.useMemo(() => {
const params = parseEmbedPlayerFromUrl(link.uri)
@ -27,6 +30,10 @@ export const ExternalLinkEmbed = ({
return params
}
}, [link.uri, externalEmbedPrefs])
const isCompatibleGiphy =
embedPlayerParams?.source === 'giphy' &&
embedPlayerParams.dimensions &&
gate('new_gif_player')
return (
<View style={styles.container}>
@ -37,20 +44,24 @@ export const ExternalLinkEmbed = ({
accessibilityIgnoresInvertColors
/>
) : undefined}
{(embedPlayerParams?.isGif && (
{isCompatibleGiphy ? (
<View />
) : embedPlayerParams?.isGif ? (
<ExternalGifEmbed link={link} params={embedPlayerParams} />
)) ||
(embedPlayerParams && (
<ExternalPlayer link={link} params={embedPlayerParams} />
))}
) : embedPlayerParams ? (
<ExternalPlayer link={link} params={embedPlayerParams} />
) : undefined}
<View style={[styles.info, {paddingHorizontal: isMobile ? 10 : 14}]}>
<Text
type="sm"
numberOfLines={1}
style={[pal.textLight, styles.extUri]}>
{toNiceDomain(link.uri)}
</Text>
{!embedPlayerParams?.isGif && (
{!isCompatibleGiphy && (
<Text
type="sm"
numberOfLines={1}
style={[pal.textLight, styles.extUri]}>
{toNiceDomain(link.uri)}
</Text>
)}
{!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && (
<Text type="lg-bold" numberOfLines={3} style={[pal.text]}>
{link.title || link.uri}
</Text>