From 26508cfe6a89df4ae1ab1256753faa860597bbc8 Mon Sep 17 00:00:00 2001 From: Hailey Date: Fri, 13 Sep 2024 12:44:42 -0700 Subject: [PATCH 01/12] [Video] Remove `expo-video`, use `bluesky-video` (#5282) Co-authored-by: Samuel Newman --- app.config.js | 1 - package.json | 4 +- src/App.native.tsx | 79 +++-- src/components/video/PlayButtonIcon.tsx | 2 +- src/view/com/composer/videos/VideoPreview.tsx | 24 +- src/view/com/util/List.tsx | 8 +- .../post-embeds/ActiveVideoNativeContext.tsx | 65 ---- src/view/com/util/post-embeds/VideoEmbed.tsx | 142 ++------ .../VideoEmbedInner/TimeIndicator.tsx | 15 +- .../VideoEmbedInner/VideoEmbedInnerNative.tsx | 305 ++++++++++-------- yarn.lock | 9 +- 11 files changed, 269 insertions(+), 385 deletions(-) delete mode 100644 src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx diff --git a/app.config.js b/app.config.js index 25014ee8f1..ddd72f75f0 100644 --- a/app.config.js +++ b/app.config.js @@ -211,7 +211,6 @@ module.exports = function (config) { sounds: PLATFORM === 'ios' ? ['assets/dm.aiff'] : ['assets/dm.mp3'], }, ], - 'expo-video', 'react-native-compressor', './plugins/starterPackAppClipExtension/withStarterPackAppClip.js', './plugins/withAndroidManifestPlugin.js', diff --git a/package.json b/package.json index 92b6cfe151..5401d5f7d2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bsky.app", - "version": "1.91.0", + "version": "1.91.1", "private": true, "engines": { "node": ">=18" @@ -68,6 +68,7 @@ "@fortawesome/free-regular-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/react-native-fontawesome": "^0.3.2", + "@haileyok/bluesky-video": "0.1.2", "@lingui/react": "^4.5.0", "@mattermost/react-native-paste-input": "^0.7.1", "@miblanchard/react-native-slider": "^2.3.1", @@ -139,7 +140,6 @@ "expo-system-ui": "~3.0.4", "expo-task-manager": "~11.8.1", "expo-updates": "~0.25.14", - "expo-video": "https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4-2.tgz", "expo-web-browser": "~13.0.3", "fast-text-encoding": "^1.0.6", "history": "^5.3.0", diff --git a/src/App.native.tsx b/src/App.native.tsx index 83f133e990..04fea126cb 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -52,7 +52,6 @@ import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed' import {Provider as StarterPackProvider} from '#/state/shell/starter-pack' import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies' import {TestCtrls} from '#/view/com/testing/TestCtrls' -import {Provider as ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoNativeContext' import * as Toast from '#/view/com/util/Toast' import {Shell} from '#/view/shell' import {ThemeProvider as Alf} from '#/alf' @@ -63,7 +62,6 @@ import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialo import {Provider as PortalProvider} from '#/components/Portal' import {Splash} from '#/Splash' import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider' -import {AudioCategory, PlatformInfo} from '../modules/expo-bluesky-swiss-army' SplashScreen.preventAutoHideAsync() @@ -110,45 +108,42 @@ function InnerApp() { - - - - - - - {/* LabelDefsProvider MUST come before ModerationOptsProvider */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + {/* LabelDefsProvider MUST come before ModerationOptsProvider */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -159,8 +154,6 @@ function App() { const [isReady, setReady] = useState(false) React.useEffect(() => { - PlatformInfo.setAudioCategory(AudioCategory.Ambient) - PlatformInfo.setAudioActive(false) initPersistedState().then(() => setReady(true)) }, []) diff --git a/src/components/video/PlayButtonIcon.tsx b/src/components/video/PlayButtonIcon.tsx index 90e93f744b..8e0a6bb7a0 100644 --- a/src/components/video/PlayButtonIcon.tsx +++ b/src/components/video/PlayButtonIcon.tsx @@ -4,7 +4,7 @@ import {View} from 'react-native' import {atoms as a, useTheme} from '#/alf' import {Play_Filled_Corner0_Rounded as PlayIcon} from '#/components/icons/Play' -export function PlayButtonIcon({size = 36}: {size?: number}) { +export function PlayButtonIcon({size = 32}: {size?: number}) { const t = useTheme() const bg = t.name === 'light' ? t.palette.contrast_25 : t.palette.contrast_975 const fg = t.name === 'light' ? t.palette.contrast_975 : t.palette.contrast_25 diff --git a/src/view/com/composer/videos/VideoPreview.tsx b/src/view/com/composer/videos/VideoPreview.tsx index 60b467d62b..b1bfd6715e 100644 --- a/src/view/com/composer/videos/VideoPreview.tsx +++ b/src/view/com/composer/videos/VideoPreview.tsx @@ -1,8 +1,7 @@ -/* eslint-disable @typescript-eslint/no-shadow */ import React from 'react' import {View} from 'react-native' import {ImagePickerAsset} from 'expo-image-picker' -import {useVideoPlayer, VideoView} from 'expo-video' +import {BlueskyVideoView} from '@haileyok/bluesky-video' import {CompressedVideo} from '#/lib/media/video/types' import {clamp} from '#/lib/numbers' @@ -22,15 +21,8 @@ export function VideoPreview({ clear: () => void }) { const t = useTheme() + const playerRef = React.useRef(null) const autoplayDisabled = useAutoplayDisabled() - const player = useVideoPlayer(video.uri, player => { - player.loop = true - player.muted = true - if (!autoplayDisabled) { - player.play() - } - }) - let aspectRatio = asset.width / asset.height if (isNaN(aspectRatio)) { @@ -50,12 +42,12 @@ export function VideoPreview({ t.atoms.border_contrast_low, {backgroundColor: 'black'}, ]}> - {autoplayDisabled && ( diff --git a/src/view/com/util/List.tsx b/src/view/com/util/List.tsx index 79dd2f4917..f9aeae1a86 100644 --- a/src/view/com/util/List.tsx +++ b/src/view/com/util/List.tsx @@ -1,6 +1,7 @@ import React, {memo} from 'react' import {FlatListProps, RefreshControl, ViewToken} from 'react-native' import {runOnJS, useSharedValue} from 'react-native-reanimated' +import {updateActiveVideoViewAsync} from '@haileyok/bluesky-video' import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED' import {usePalette} from '#/lib/hooks/usePalette' @@ -8,7 +9,6 @@ import {useScrollHandlers} from '#/lib/ScrollContext' import {useDedupe} from 'lib/hooks/useDedupe' import {addStyle} from 'lib/styles' import {isIOS} from 'platform/detection' -import {updateActiveViewAsync} from '../../../../modules/expo-bluesky-swiss-army/src/VisibilityView' import {FlatList_INTERNAL} from './Views' export type ListMethods = FlatList_INTERNAL @@ -69,7 +69,7 @@ function ListImpl( onBeginDragFromContext?.(e, ctx) }, onEndDrag(e, ctx) { - runOnJS(updateActiveViewAsync)() + runOnJS(updateActiveVideoViewAsync)() onEndDragFromContext?.(e, ctx) }, onScroll(e, ctx) { @@ -84,13 +84,13 @@ function ListImpl( } if (isIOS) { - runOnJS(dedupe)(updateActiveViewAsync) + runOnJS(dedupe)(updateActiveVideoViewAsync) } }, // Note: adding onMomentumBegin here makes simulator scroll // lag on Android. So either don't add it, or figure out why. onMomentumEnd(e, ctx) { - runOnJS(updateActiveViewAsync)() + runOnJS(updateActiveVideoViewAsync)() onMomentumEndFromContext?.(e, ctx) }, }) diff --git a/src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx b/src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx deleted file mode 100644 index 95fa0bb0ec..0000000000 --- a/src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react' -import {useVideoPlayer, VideoPlayer} from 'expo-video' - -import {isAndroid, isNative} from '#/platform/detection' - -const Context = React.createContext<{ - activeSource: string - activeViewId: string | undefined - setActiveSource: (src: string | null, viewId: string | null) => void - player: VideoPlayer -} | null>(null) - -export function Provider({children}: {children: React.ReactNode}) { - if (!isNative) { - throw new Error('ActiveVideoProvider may only be used on native.') - } - - const [activeSource, setActiveSource] = React.useState('') - const [activeViewId, setActiveViewId] = React.useState() - - const player = useVideoPlayer(activeSource, p => { - p.muted = true - p.loop = true - // We want to immediately call `play` so we get the loading state - p.play() - }) - - const setActiveSourceOuter = (src: string | null, viewId: string | null) => { - // HACK - // expo-video doesn't like it when you try and move a `player` to another `VideoView`. Instead, we need to actually - // unregister that player to let the new screen register it. This is only a problem on Android, so we only need to - // apply it there. - if (src === activeSource && isAndroid) { - setActiveSource('') - setTimeout(() => { - setActiveSource(src ? src : '') - }, 100) - } else { - setActiveSource(src ? src : '') - } - setActiveViewId(viewId ? viewId : '') - } - - return ( - - {children} - - ) -} - -export function useActiveVideoNative() { - const context = React.useContext(Context) - if (!context) { - throw new Error( - 'useActiveVideoNative must be used within a ActiveVideoNativeProvider', - ) - } - return context -} diff --git a/src/view/com/util/post-embeds/VideoEmbed.tsx b/src/view/com/util/post-embeds/VideoEmbed.tsx index a672830db0..267b5d1843 100644 --- a/src/view/com/util/post-embeds/VideoEmbed.tsx +++ b/src/view/com/util/post-embeds/VideoEmbed.tsx @@ -1,22 +1,18 @@ -import React, {useCallback, useEffect, useId, useState} from 'react' +import React, {useCallback, useState} from 'react' import {View} from 'react-native' import {ImageBackground} from 'expo-image' -import {PlayerError, VideoPlayerStatus} from 'expo-video' import {AppBskyEmbedVideo} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {clamp} from '#/lib/numbers' -import {useAutoplayDisabled} from 'state/preferences' import {VideoEmbedInnerNative} from '#/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative' import {atoms as a} from '#/alf' import {Button} from '#/components/Button' -import {useIsWithinMessage} from '#/components/dms/MessageContext' +import {useThrottledValue} from '#/components/hooks/useThrottledValue' import {Loader} from '#/components/Loader' import {PlayButtonIcon} from '#/components/video/PlayButtonIcon' -import {VisibilityView} from '../../../../../modules/expo-bluesky-swiss-army' import {ErrorBoundary} from '../ErrorBoundary' -import {useActiveVideoNative} from './ActiveVideoNativeContext' import * as VideoFallback from './VideoEmbedInner/VideoFallback' interface Props { @@ -59,113 +55,36 @@ export function VideoEmbed({embed}: Props) { function InnerWrapper({embed}: Props) { const {_} = useLingui() - const {activeSource, activeViewId, setActiveSource, player} = - useActiveVideoNative() - const viewId = useId() + const ref = React.useRef<{togglePlayback: () => void}>(null) - const [playerStatus, setPlayerStatus] = useState< - VideoPlayerStatus | 'paused' - >('paused') - const [isMuted, setIsMuted] = useState(player.muted) - const [isFullscreen, setIsFullscreen] = React.useState(false) - const [timeRemaining, setTimeRemaining] = React.useState(0) - const isWithinMessage = useIsWithinMessage() - const disableAutoplay = useAutoplayDisabled() || isWithinMessage - const isActive = embed.playlist === activeSource && activeViewId === viewId - // There are some different loading states that we should pay attention to and show a spinner for - const isLoading = - isActive && - (playerStatus === 'waitingToPlayAtSpecifiedRate' || - playerStatus === 'loading') - // This happens whenever the visibility view decides that another video should start playing - const showOverlay = !isActive || isLoading || playerStatus === 'paused' + const [status, setStatus] = React.useState<'playing' | 'paused' | 'pending'>( + 'pending', + ) + const [isLoading, setIsLoading] = React.useState(false) + const [isActive, setIsActive] = React.useState(false) + const showSpinner = useThrottledValue(isActive && isLoading, 100) - // send error up to error boundary - const [error, setError] = useState(null) - if (error) { - throw error - } + const showOverlay = + !isActive || + isLoading || + (status === 'paused' && !isActive) || + status === 'pending' - useEffect(() => { - if (isActive) { - // eslint-disable-next-line @typescript-eslint/no-shadow - const volumeSub = player.addListener('volumeChange', ({isMuted}) => { - setIsMuted(isMuted) - }) - const timeSub = player.addListener( - 'timeRemainingChange', - secondsRemaining => { - setTimeRemaining(secondsRemaining) - }, - ) - const statusSub = player.addListener( - 'statusChange', - (status, oldStatus, playerError) => { - setPlayerStatus(status) - if (status === 'error') { - setError(playerError ?? new Error('Unknown player error')) - } - if (status === 'readyToPlay' && oldStatus !== 'readyToPlay') { - player.play() - } - }, - ) - return () => { - volumeSub.remove() - timeSub.remove() - statusSub.remove() - } + React.useEffect(() => { + if (!isActive && status !== 'pending') { + setStatus('pending') } - }, [player, isActive, disableAutoplay]) - - // The source might already be active (for example, if you are scrolling a list of quotes and its all the same - // video). In those cases, just start playing. Otherwise, setting the active source will result in the video - // start playback immediately - const startPlaying = (ignoreAutoplayPreference: boolean) => { - if (disableAutoplay && !ignoreAutoplayPreference) { - return - } - - if (isActive) { - player.play() - } else { - setActiveSource(embed.playlist, viewId) - } - } - - const onVisibilityStatusChange = (isVisible: boolean) => { - // When `isFullscreen` is true, it means we're actually still exiting the fullscreen player. Ignore these change - // events - if (isFullscreen) { - return - } - if (isVisible) { - startPlaying(false) - } else { - // Clear the active source so the video view unmounts when autoplay is disabled. Otherwise, leave it mounted - // until it gets replaced by another video - if (disableAutoplay) { - setActiveSource(null, null) - } else { - player.muted = true - if (player.playing) { - player.pause() - } - } - } - } + }, [isActive, status]) return ( - - {isActive ? ( - - ) : null} + <> + - + ) } diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx index be3f907112..66e1df50dc 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx @@ -1,4 +1,5 @@ import React from 'react' +import {StyleProp, ViewStyle} from 'react-native' import Animated, {FadeInDown, FadeOutDown} from 'react-native-reanimated' import {atoms as a, native, useTheme} from '#/alf' @@ -8,7 +9,13 @@ import {Text} from '#/components/Typography' * Absolutely positioned time indicator showing how many seconds are remaining * Time is in seconds */ -export function TimeIndicator({time}: {time: number}) { +export function TimeIndicator({ + time, + style, +}: { + time: number + style?: StyleProp +}) { const t = useTheme() if (isNaN(time)) { @@ -22,18 +29,20 @@ export function TimeIndicator({time}: {time: number}) { void - timeRemaining: number - isMuted: boolean -}) { - const {_} = useLingui() - const {player} = useActiveVideoNative() - const ref = useRef(null) +export const VideoEmbedInnerNative = React.forwardRef( + function VideoEmbedInnerNative( + { + embed, + setStatus, + setIsLoading, + setIsActive, + }: { + embed: AppBskyEmbedVideo.View + setStatus: (status: 'playing' | 'paused') => void + setIsLoading: (isLoading: boolean) => void + setIsActive: (isActive: boolean) => void + }, + ref: React.Ref<{togglePlayback: () => void}>, + ) { + const {_} = useLingui() + const videoRef = useRef(null) + const autoplayDisabled = useAutoplayDisabled() + const isWithinMessage = useIsWithinMessage() - const enterFullscreen = useCallback(() => { - ref.current?.enterFullscreen() - }, []) + const [isMuted, setIsMuted] = React.useState(true) + const [isPlaying, setIsPlaying] = React.useState(false) + const [timeRemaining, setTimeRemaining] = React.useState(0) + const [error, setError] = React.useState() - let aspectRatio = 16 / 9 + React.useImperativeHandle(ref, () => ({ + togglePlayback: () => { + videoRef.current?.togglePlayback() + }, + })) - if (embed.aspectRatio) { - const {width, height} = embed.aspectRatio - aspectRatio = width / height - aspectRatio = clamp(aspectRatio, 1 / 1, 3 / 1) - } + if (error) { + throw new Error(error) + } - return ( - - { - PlatformInfo.setAudioCategory(AudioCategory.Playback) - PlatformInfo.setAudioActive(true) - player.muted = false - setIsFullscreen(true) - if (isAndroid) { - player.play() + let aspectRatio = 16 / 9 + + if (embed.aspectRatio) { + const {width, height} = embed.aspectRatio + aspectRatio = width / height + aspectRatio = clamp(aspectRatio, 1 / 1, 3 / 1) + } + + return ( + + { + setIsActive(e.nativeEvent.isActive) + }} + onLoadingChange={e => { + setIsLoading(e.nativeEvent.isLoading) + }} + onMutedChange={e => { + setIsMuted(e.nativeEvent.isMuted) + }} + onStatusChange={e => { + setStatus(e.nativeEvent.status) + setIsPlaying(e.nativeEvent.status === 'playing') + }} + onTimeRemainingChange={e => { + setTimeRemaining(e.nativeEvent.timeRemaining) + }} + onError={e => { + setError(e.nativeEvent.error) + }} + ref={videoRef} + accessibilityLabel={ + embed.alt ? _(msg`Video: ${embed.alt}`) : _(msg`Video`) } - }} - onFullscreenExit={() => { - PlatformInfo.setAudioCategory(AudioCategory.Ambient) - PlatformInfo.setAudioActive(false) - player.muted = true - player.playbackRate = 1 - setIsFullscreen(false) - }} - accessibilityLabel={ - embed.alt ? _(msg`Video: ${embed.alt}`) : _(msg`Video`) - } - accessibilityHint="" - /> - - - - ) -} + accessibilityHint="" + /> + { + videoRef.current?.enterFullscreen() + }} + toggleMuted={() => { + videoRef.current?.toggleMuted() + }} + togglePlayback={() => { + videoRef.current?.togglePlayback() + }} + isMuted={isMuted} + isPlaying={isPlaying} + timeRemaining={timeRemaining} + /> + + + ) + }, +) function VideoControls({ - player, enterFullscreen, + toggleMuted, + togglePlayback, timeRemaining, + isPlaying, isMuted, }: { - player: VideoPlayer enterFullscreen: () => void + toggleMuted: () => void + togglePlayback: () => void timeRemaining: number + isPlaying: boolean isMuted: boolean }) { const {_} = useLingui() const t = useTheme() - const onPressFullscreen = useCallback(() => { - switch (player.status) { - case 'idle': - case 'loading': - case 'readyToPlay': { - if (!player.playing) player.play() - enterFullscreen() - break - } - case 'error': { - player.replay() - break - } - } - }, [player, enterFullscreen]) - - const toggleMuted = useCallback(() => { - const muted = !player.muted - // We want to set this to the _inverse_ of the new value, because we actually want for the audio to be mixed when - // the video is muted, and vice versa. - const mix = !muted - const category = muted ? AudioCategory.Ambient : AudioCategory.Playback - - PlatformInfo.setAudioCategory(category) - PlatformInfo.setAudioActive(mix) - player.muted = muted - }, [player]) - // show countdown when: // 1. timeRemaining is a number - was seeing NaNs // 2. duration is greater than 0 - means metadata has loaded @@ -140,44 +139,80 @@ function VideoControls({ return ( - {showTime && } - - - {isMuted ? ( - - ) : ( - - )} - - + + {isPlaying ? ( + + ) : ( + + )} + + {showTime && } + + + {isMuted ? ( + + ) : ( + + )} + ) } + +function ControlButton({ + onPress, + children, + label, + accessibilityHint, + style, +}: { + onPress: () => void + children: React.ReactNode + label: string + accessibilityHint: string + style?: StyleProp +}) { + return ( + + + {children} + + + ) +} diff --git a/yarn.lock b/yarn.lock index b2e389aa13..5fd07230a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4104,6 +4104,11 @@ resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861" integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ== +"@haileyok/bluesky-video@0.1.2": + version "0.1.2" + resolved "https://registry.yarnpkg.com/@haileyok/bluesky-video/-/bluesky-video-0.1.2.tgz#53abb04c22885fcf8a1d8a7510d2cfbe7d45ff91" + integrity sha512-OPltVPNhjrm/+d4YYbaSsKLK7VQWC62ci8J05GO4I/PhWsYLWsAu79CGfZ1YTpfpIjYXyo0HjMmiig5X/hhOsQ== + "@hapi/accept@^6.0.3": version "6.0.3" resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-6.0.3.tgz#eef0800a4f89cd969da8e5d0311dc877c37279ab" @@ -12415,10 +12420,6 @@ expo-updates@~0.25.14: ignore "^5.3.1" resolve-from "^5.0.0" -"expo-video@https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4-2.tgz": - version "1.2.4" - resolved "https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4-2.tgz#4127dd5cea5fdf7ab745104c73b8ecf5506f5d34" - expo-web-browser@~13.0.3: version "13.0.3" resolved "https://registry.yarnpkg.com/expo-web-browser/-/expo-web-browser-13.0.3.tgz#dceb05dbc187b498ca937b02adf385b0232a4e92" From 791bc7afbe0efd9519740b999799e6002b0fc835 Mon Sep 17 00:00:00 2001 From: dan Date: Fri, 13 Sep 2024 21:11:17 +0100 Subject: [PATCH 02/12] Fix lexicon validation in PWI Discover (#5329) --- src/lib/api/feed/custom.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/lib/api/feed/custom.ts b/src/lib/api/feed/custom.ts index 6db96a8d63..f3ac45b6e3 100644 --- a/src/lib/api/feed/custom.ts +++ b/src/lib/api/feed/custom.ts @@ -2,6 +2,7 @@ import { AppBskyFeedDefs, AppBskyFeedGetFeed as GetCustomFeed, BskyAgent, + jsonStringToLex, } from '@atproto/api' import {getContentLanguages} from '#/state/preferences/languages' @@ -111,7 +112,7 @@ async function loggedOutFetch({ }&limit=${limit}&lang=${contentLangs}`, {method: 'GET', headers: {'Accept-Language': contentLangs}}, ) - let data = res.ok ? await res.json() : null + let data = res.ok ? jsonStringToLex(await res.text()) : null if (data?.feed?.length) { return { success: true, @@ -126,7 +127,7 @@ async function loggedOutFetch({ }&limit=${limit}`, {method: 'GET', headers: {'Accept-Language': ''}}, ) - data = res.ok ? await res.json() : null + data = res.ok ? jsonStringToLex(await res.text()) : null if (data?.feed?.length) { return { success: true, From 843f9925f5d0773db321e617c1bd0be6a308ef7f Mon Sep 17 00:00:00 2001 From: Hailey Date: Fri, 13 Sep 2024 14:07:13 -0700 Subject: [PATCH 03/12] [Video] Remember mute state while scrolling (#5331) --- package.json | 2 +- src/App.native.tsx | 72 +++++++++--------- src/App.web.tsx | 75 ++++++++++--------- .../VideoEmbedInner/VideoEmbedInnerNative.tsx | 15 ++-- .../util/post-embeds/VideoVolumeContext.tsx | 32 ++++++++ yarn.lock | 8 +- 6 files changed, 121 insertions(+), 83 deletions(-) create mode 100644 src/view/com/util/post-embeds/VideoVolumeContext.tsx diff --git a/package.json b/package.json index 5401d5f7d2..1cff0d4534 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ "@fortawesome/free-regular-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/react-native-fontawesome": "^0.3.2", - "@haileyok/bluesky-video": "0.1.2", + "@haileyok/bluesky-video": "0.1.4", "@lingui/react": "^4.5.0", "@mattermost/react-native-paste-input": "^0.7.1", "@miblanchard/react-native-slider": "^2.3.1", diff --git a/src/App.native.tsx b/src/App.native.tsx index 04fea126cb..2ec666e2cc 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -52,6 +52,7 @@ import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed' import {Provider as StarterPackProvider} from '#/state/shell/starter-pack' import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies' import {TestCtrls} from '#/view/com/testing/TestCtrls' +import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext' import * as Toast from '#/view/com/util/Toast' import {Shell} from '#/view/shell' import {ThemeProvider as Alf} from '#/alf' @@ -109,40 +110,43 @@ function InnerApp() { - - - - - {/* LabelDefsProvider MUST come before ModerationOptsProvider */} - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + {/* LabelDefsProvider MUST come before ModerationOptsProvider */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/App.web.tsx b/src/App.web.tsx index ff9944fa4a..bef320826f 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -41,6 +41,7 @@ import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed' import {Provider as StarterPackProvider} from '#/state/shell/starter-pack' import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies' import {Provider as ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoWebContext' +import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext' import * as Toast from '#/view/com/util/Toast' import {ToastContainer} from '#/view/com/util/Toast.web' import {Shell} from '#/view/shell/index' @@ -95,42 +96,44 @@ function InnerApp() { - - - - - - {/* LabelDefsProvider MUST come before ModerationOptsProvider */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + {/* LabelDefsProvider MUST come before ModerationOptsProvider */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx index 39ed990abe..ee71daa830 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx @@ -9,6 +9,7 @@ import {useLingui} from '@lingui/react' import {HITSLOP_30} from '#/lib/constants' import {clamp} from '#/lib/numbers' import {useAutoplayDisabled} from '#/state/preferences' +import {useVideoVolumeState} from 'view/com/util/post-embeds/VideoVolumeContext' import {atoms as a, useTheme} from '#/alf' import {useIsWithinMessage} from '#/components/dms/MessageContext' import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute' @@ -37,8 +38,8 @@ export const VideoEmbedInnerNative = React.forwardRef( const videoRef = useRef(null) const autoplayDisabled = useAutoplayDisabled() const isWithinMessage = useIsWithinMessage() + const {muted, setMuted} = useVideoVolumeState() - const [isMuted, setIsMuted] = React.useState(true) const [isPlaying, setIsPlaying] = React.useState(false) const [timeRemaining, setTimeRemaining] = React.useState(0) const [error, setError] = React.useState() @@ -66,7 +67,7 @@ export const VideoEmbedInnerNative = React.forwardRef( { setIsActive(e.nativeEvent.isActive) @@ -75,7 +76,7 @@ export const VideoEmbedInnerNative = React.forwardRef( setIsLoading(e.nativeEvent.isLoading) }} onMutedChange={e => { - setIsMuted(e.nativeEvent.isMuted) + setMuted(e.nativeEvent.isMuted) }} onStatusChange={e => { setStatus(e.nativeEvent.status) @@ -103,7 +104,6 @@ export const VideoEmbedInnerNative = React.forwardRef( togglePlayback={() => { videoRef.current?.togglePlayback() }} - isMuted={isMuted} isPlaying={isPlaying} timeRemaining={timeRemaining} /> @@ -119,17 +119,16 @@ function VideoControls({ togglePlayback, timeRemaining, isPlaying, - isMuted, }: { enterFullscreen: () => void toggleMuted: () => void togglePlayback: () => void timeRemaining: number isPlaying: boolean - isMuted: boolean }) { const {_} = useLingui() const t = useTheme() + const {muted} = useVideoVolumeState() // show countdown when: // 1. timeRemaining is a number - was seeing NaNs @@ -161,10 +160,10 @@ function VideoControls({ - {isMuted ? ( + {muted ? ( ) : ( diff --git a/src/view/com/util/post-embeds/VideoVolumeContext.tsx b/src/view/com/util/post-embeds/VideoVolumeContext.tsx new file mode 100644 index 0000000000..cccb93ba8b --- /dev/null +++ b/src/view/com/util/post-embeds/VideoVolumeContext.tsx @@ -0,0 +1,32 @@ +import React from 'react' + +const Context = React.createContext( + {} as { + muted: boolean + setMuted: (muted: boolean) => void + }, +) + +export function Provider({children}: {children: React.ReactNode}) { + const [muted, setMuted] = React.useState(true) + + const value = React.useMemo( + () => ({ + muted, + setMuted, + }), + [muted, setMuted], + ) + + return {children} +} + +export function useVideoVolumeState() { + const context = React.useContext(Context) + if (!context) { + throw new Error( + 'useVideoVolumeState must be used within a VideoVolumeProvider', + ) + } + return context +} diff --git a/yarn.lock b/yarn.lock index 5fd07230a4..16cfb34067 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4104,10 +4104,10 @@ resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861" integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ== -"@haileyok/bluesky-video@0.1.2": - version "0.1.2" - resolved "https://registry.yarnpkg.com/@haileyok/bluesky-video/-/bluesky-video-0.1.2.tgz#53abb04c22885fcf8a1d8a7510d2cfbe7d45ff91" - integrity sha512-OPltVPNhjrm/+d4YYbaSsKLK7VQWC62ci8J05GO4I/PhWsYLWsAu79CGfZ1YTpfpIjYXyo0HjMmiig5X/hhOsQ== +"@haileyok/bluesky-video@0.1.4": + version "0.1.4" + resolved "https://registry.yarnpkg.com/@haileyok/bluesky-video/-/bluesky-video-0.1.4.tgz#76acad0dffb9c80745bb752577be23cb566e4562" + integrity sha512-ggpk6E6U3giT+tmTc4GPraViA3ssnP32/Bty61UbZ3LiCQuc694LX+AOt01SfQ0B0fyd63J9DtT5rfaEJyjuzg== "@hapi/accept@^6.0.3": version "6.0.3" From 533382173c498a382c5192bb7829da7ac900d7e3 Mon Sep 17 00:00:00 2001 From: Hailey Date: Fri, 13 Sep 2024 14:08:45 -0700 Subject: [PATCH 04/12] [Video] Don't require email verification on self-host (#5332) --- src/view/com/composer/videos/SelectVideoBtn.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/view/com/composer/videos/SelectVideoBtn.tsx b/src/view/com/composer/videos/SelectVideoBtn.tsx index da67d781e0..2f2b4c3e7a 100644 --- a/src/view/com/composer/videos/SelectVideoBtn.tsx +++ b/src/view/com/composer/videos/SelectVideoBtn.tsx @@ -13,6 +13,8 @@ import {useVideoLibraryPermission} from '#/lib/hooks/usePermissions' import {isNative} from '#/platform/detection' import {useModalControls} from '#/state/modals' import {useSession} from '#/state/session' +import {BSKY_SERVICE} from 'lib/constants' +import {getHostnameFromUrl} from 'lib/strings/url-helpers' import {atoms as a, useTheme} from '#/alf' import {Button} from '#/components/Button' import {VideoClip_Stroke2_Corner0_Rounded as VideoClipIcon} from '#/components/icons/VideoClip' @@ -38,7 +40,12 @@ export function SelectVideoBtn({onSelectVideo, disabled, setError}: Props) { return } - if (!currentAccount?.emailConfirmed) { + if ( + currentAccount && + !currentAccount.emailConfirmed && + getHostnameFromUrl(currentAccount.service) === + getHostnameFromUrl(BSKY_SERVICE) + ) { Keyboard.dismiss() control.open() } else { @@ -71,12 +78,12 @@ export function SelectVideoBtn({onSelectVideo, disabled, setError}: Props) { } } }, [ - onSelectVideo, requestVideoAccessIfNeeded, + currentAccount, + control, setError, _, - control, - currentAccount?.emailConfirmed, + onSelectVideo, ]) return ( From 88813f57c98041507eec708294272387cdc4a0f2 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Fri, 13 Sep 2024 16:21:45 -0500 Subject: [PATCH 05/12] Always display next button on login page (#5326) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Vinícius Souza <39967235+vinifsouza@users.noreply.github.com> Co-authored-by: Hailey --- src/screens/Login/ForgotPasswordForm.tsx | 3 +-- src/screens/Login/LoginForm.tsx | 31 +++++++----------------- 2 files changed, 10 insertions(+), 24 deletions(-) diff --git a/src/screens/Login/ForgotPasswordForm.tsx b/src/screens/Login/ForgotPasswordForm.tsx index ec30bab4a8..8588888b87 100644 --- a/src/screens/Login/ForgotPasswordForm.tsx +++ b/src/screens/Login/ForgotPasswordForm.tsx @@ -144,8 +144,7 @@ export const ForgotPasswordForm = ({ variant="solid" color={'primary'} size="medium" - onPress={onPressNext} - disabled={!email}> + onPress={onPressNext}> Next diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx index 35b124b611..9a01c04990 100644 --- a/src/screens/Login/LoginForm.tsx +++ b/src/screens/Login/LoginForm.tsx @@ -60,7 +60,6 @@ export const LoginForm = ({ const {track} = useAnalytics() const t = useTheme() const [isProcessing, setIsProcessing] = useState(false) - const [isReady, setIsReady] = useState(false) const [isAuthFactorTokenNeeded, setIsAuthFactorTokenNeeded] = useState(false) const identifierValueRef = useRef(initialHandle || '') @@ -83,12 +82,18 @@ export const LoginForm = ({ Keyboard.dismiss() LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) setError('') - setIsProcessing(true) const identifier = identifierValueRef.current.toLowerCase().trim() const password = passwordValueRef.current const authFactorToken = authFactorTokenValueRef.current + if (!identifier || !password) { + setError(_(msg`Invalid username or password`)) + return + } + + setIsProcessing(true) + try { // try to guess the handle if the user just gave their own username let fullIdent = identifier @@ -157,22 +162,6 @@ export const LoginForm = ({ } } - const checkIsReady = () => { - if ( - !!serviceDescription && - !!identifierValueRef.current && - !!passwordValueRef.current - ) { - if (!isReady) { - setIsReady(true) - } - } else { - if (isReady) { - setIsReady(false) - } - } - } - return ( Sign in}> @@ -204,7 +193,6 @@ export const LoginForm = ({ defaultValue={initialHandle || ''} onChangeText={v => { identifierValueRef.current = v - checkIsReady() }} onSubmitEditing={() => { passwordRef.current?.focus() @@ -233,7 +221,6 @@ export const LoginForm = ({ clearButtonMode="while-editing" onChangeText={v => { passwordValueRef.current = v - checkIsReady() }} onSubmitEditing={onPressNext} blurOnSubmit={false} // HACK: https://github.com/facebook/react-native/issues/21911#issuecomment-558343069 Keyboard blur behavior is now handled in onSubmitEditing @@ -325,7 +312,7 @@ export const LoginForm = ({ Connecting... - ) : isReady ? ( + ) : ( - ) : undefined} + )} ) From ce3893d8169cb63e982b57d18817c9155c2e874c Mon Sep 17 00:00:00 2001 From: dan Date: Fri, 13 Sep 2024 22:30:09 +0100 Subject: [PATCH 06/12] Apply Following settings to Lists (#5313) * Apply Following settings to Lists * Remove dead code --- src/components/StarterPack/Main/PostsList.tsx | 2 +- src/state/preferences/feed-tuners.tsx | 26 +------------------ src/state/queries/post-feed.ts | 2 -- 3 files changed, 2 insertions(+), 28 deletions(-) diff --git a/src/components/StarterPack/Main/PostsList.tsx b/src/components/StarterPack/Main/PostsList.tsx index c19c6bc63e..0ff84ff459 100644 --- a/src/components/StarterPack/Main/PostsList.tsx +++ b/src/components/StarterPack/Main/PostsList.tsx @@ -18,7 +18,7 @@ interface ProfilesListProps { export const PostsList = React.forwardRef( function PostsListImpl({listUri, headerHeight, scrollElRef}, ref) { - const feed: FeedDescriptor = `list|${listUri}|as_following` + const feed: FeedDescriptor = `list|${listUri}` const {_} = useLingui() const onScrollToTop = useCallback(() => { diff --git a/src/state/preferences/feed-tuners.tsx b/src/state/preferences/feed-tuners.tsx index b6f14fae7b..3ed60e5988 100644 --- a/src/state/preferences/feed-tuners.tsx +++ b/src/state/preferences/feed-tuners.tsx @@ -21,31 +21,7 @@ export function useFeedTuners(feedDesc: FeedDescriptor) { if (feedDesc.startsWith('feedgen')) { return [FeedTuner.preferredLangOnly(langPrefs.contentLanguages)] } - if (feedDesc.startsWith('list')) { - let feedTuners = [] - if (feedDesc.endsWith('|as_following')) { - // Same as Following tuners below, copypaste for now. - feedTuners.push(FeedTuner.removeOrphans) - if (preferences?.feedViewPrefs.hideReposts) { - feedTuners.push(FeedTuner.removeReposts) - } - if (preferences?.feedViewPrefs.hideReplies) { - feedTuners.push(FeedTuner.removeReplies) - } else { - feedTuners.push( - FeedTuner.followedRepliesOnly({ - userDid: currentAccount?.did || '', - }), - ) - } - if (preferences?.feedViewPrefs.hideQuotePosts) { - feedTuners.push(FeedTuner.removeQuotePosts) - } - feedTuners.push(FeedTuner.dedupThreads) - } - return feedTuners - } - if (feedDesc === 'following') { + if (feedDesc === 'following' || feedDesc.startsWith('list')) { const feedTuners = [FeedTuner.removeOrphans] if (preferences?.feedViewPrefs.hideReposts) { diff --git a/src/state/queries/post-feed.ts b/src/state/queries/post-feed.ts index ee3e2c14d2..7daf441adb 100644 --- a/src/state/queries/post-feed.ts +++ b/src/state/queries/post-feed.ts @@ -51,7 +51,6 @@ type AuthorFilter = | 'posts_with_media' type FeedUri = string type ListUri = string -type ListFilter = 'as_following' // Applies current Following settings. Currently client-side. export type FeedDescriptor = | 'following' @@ -59,7 +58,6 @@ export type FeedDescriptor = | `feedgen|${FeedUri}` | `likes|${ActorDid}` | `list|${ListUri}` - | `list|${ListUri}|${ListFilter}` export interface FeedParams { mergeFeedEnabled?: boolean mergeFeedSources?: string[] From cac43127f0163c84a921afd806d91e1df10ea568 Mon Sep 17 00:00:00 2001 From: Hailey Date: Fri, 13 Sep 2024 14:46:02 -0700 Subject: [PATCH 07/12] [Video] Bump video (#5333) --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 1cff0d4534..b970a54da5 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ "@fortawesome/free-regular-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/react-native-fontawesome": "^0.3.2", - "@haileyok/bluesky-video": "0.1.4", + "@haileyok/bluesky-video": "0.1.5", "@lingui/react": "^4.5.0", "@mattermost/react-native-paste-input": "^0.7.1", "@miblanchard/react-native-slider": "^2.3.1", diff --git a/yarn.lock b/yarn.lock index 16cfb34067..33c16f3a54 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4104,10 +4104,10 @@ resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861" integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ== -"@haileyok/bluesky-video@0.1.4": - version "0.1.4" - resolved "https://registry.yarnpkg.com/@haileyok/bluesky-video/-/bluesky-video-0.1.4.tgz#76acad0dffb9c80745bb752577be23cb566e4562" - integrity sha512-ggpk6E6U3giT+tmTc4GPraViA3ssnP32/Bty61UbZ3LiCQuc694LX+AOt01SfQ0B0fyd63J9DtT5rfaEJyjuzg== +"@haileyok/bluesky-video@0.1.5": + version "0.1.5" + resolved "https://registry.yarnpkg.com/@haileyok/bluesky-video/-/bluesky-video-0.1.5.tgz#76b2adb89baa321fd881e7463bba3288f161ff06" + integrity sha512-nx0RWk1oghu/ObR2iPvlJDSBdtzh8UOvgawLF60leL/v+mM8SUrCJgba51SfosJKFvAX3/ABms/VOryFu0U/iw== "@hapi/accept@^6.0.3": version "6.0.3" From d76f9abdd718e24848a9b8f67486129aee421427 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Fri, 13 Sep 2024 16:48:28 -0500 Subject: [PATCH 08/12] "N" keyboard shortcut to open a new post modal (#5197) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: Add hook on web app to open composer with 'N' keyboard shortcut * Extract, don't fire open composer if already open * Ignore interactive elements --------- Co-authored-by: João Gabriel Co-authored-by: Hailey --- src/App.web.tsx | 3 ++ .../{composer.tsx => composer/index.tsx} | 0 .../composer/useComposerKeyboardShortcut.tsx | 49 +++++++++++++++++++ 3 files changed, 52 insertions(+) rename src/state/shell/{composer.tsx => composer/index.tsx} (100%) create mode 100644 src/state/shell/composer/useComposerKeyboardShortcut.tsx diff --git a/src/App.web.tsx b/src/App.web.tsx index bef320826f..6efe7cc022 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -35,6 +35,7 @@ import { } from '#/state/session' import {readLastActiveAccount} from '#/state/session/util' import {Provider as ShellStateProvider} from '#/state/shell' +import {useComposerKeyboardShortcut} from '#/state/shell/composer/useComposerKeyboardShortcut' import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out' import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide' import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed' @@ -62,6 +63,8 @@ function InnerApp() { useIntentHandler() const hasCheckedReferrer = useStarterPackEntry() + useComposerKeyboardShortcut() + // init useEffect(() => { async function onLaunch(account?: SessionAccount) { diff --git a/src/state/shell/composer.tsx b/src/state/shell/composer/index.tsx similarity index 100% rename from src/state/shell/composer.tsx rename to src/state/shell/composer/index.tsx diff --git a/src/state/shell/composer/useComposerKeyboardShortcut.tsx b/src/state/shell/composer/useComposerKeyboardShortcut.tsx new file mode 100644 index 0000000000..f460621858 --- /dev/null +++ b/src/state/shell/composer/useComposerKeyboardShortcut.tsx @@ -0,0 +1,49 @@ +import React from 'react' + +import {useComposerControls} from './' + +/** + * Based on {@link https://github.com/jaywcjlove/hotkeys-js/blob/b0038773f3b902574f22af747f3bb003a850f1da/src/index.js#L51C1-L64C2} + */ +function shouldIgnore(event: KeyboardEvent) { + const target: any = event.target || event.srcElement + if (!target) return false + const {tagName} = target + if (!tagName) return false + const isInput = + tagName === 'INPUT' && + ![ + 'checkbox', + 'radio', + 'range', + 'button', + 'file', + 'reset', + 'submit', + 'color', + ].includes(target.type) + // ignore: isContentEditable === 'true', and