-}
-
-export function SelectableBtn({
- testID,
- selected,
- label,
- left,
- right,
- onSelect,
- accessibilityHint,
- style,
-}: SelectableBtnProps) {
- const pal = usePalette('default')
- const palPrimary = usePalette('inverted')
- const needsWidthStyles = !style || !('width' in style || 'flex' in style)
- const {isMobile} = useWebMediaQueries()
- return (
-
- {label}
-
- )
-}
-
-const styles = StyleSheet.create({
- btn: {
- flexDirection: 'row',
- justifyContent: 'center',
- flexGrow: 1,
- borderWidth: 1,
- borderLeftWidth: 0,
- paddingHorizontal: 10,
- paddingVertical: 10,
- },
- btnLeft: {
- borderTopLeftRadius: 8,
- borderBottomLeftRadius: 8,
- borderLeftWidth: 1,
- },
- btnRight: {
- borderTopRightRadius: 8,
- borderBottomRightRadius: 8,
- },
-})
diff --git a/src/view/com/util/layouts/Breakpoints.tsx b/src/view/com/util/layouts/Breakpoints.tsx
deleted file mode 100644
index 45dc236158..0000000000
--- a/src/view/com/util/layouts/Breakpoints.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-
-export const Desktop = ({}: React.PropsWithChildren<{}>) => null
-export const TabletOrDesktop = ({}: React.PropsWithChildren<{}>) => null
-export const Tablet = ({}: React.PropsWithChildren<{}>) => null
-export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => (
- <>{children}
-)
-export const Mobile = ({children}: React.PropsWithChildren<{}>) => (
- <>{children}
-)
diff --git a/src/view/com/util/layouts/Breakpoints.web.tsx b/src/view/com/util/layouts/Breakpoints.web.tsx
deleted file mode 100644
index 5106e3e1f8..0000000000
--- a/src/view/com/util/layouts/Breakpoints.web.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import MediaQuery from 'react-responsive'
-
-export const Desktop = ({children}: React.PropsWithChildren<{}>) => (
- {children}
-)
-export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => (
- {children}
-)
-export const Tablet = ({children}: React.PropsWithChildren<{}>) => (
-
- {children}
-
-)
-export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => (
- {children}
-)
-export const Mobile = ({children}: React.PropsWithChildren<{}>) => (
- {children}
-)
diff --git a/src/view/com/util/layouts/withBreakpoints.tsx b/src/view/com/util/layouts/withBreakpoints.tsx
deleted file mode 100644
index 71971c604b..0000000000
--- a/src/view/com/util/layouts/withBreakpoints.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {isNative} from '#/platform/detection'
-
-export const withBreakpoints = (
- Mobile: React.ComponentType
,
- Tablet: React.ComponentType
,
- Desktop: React.ComponentType
,
-): React.FC
=>
- function WithBreakpoints(props: P) {
- const {isMobile, isTabletOrMobile} = useWebMediaQueries()
-
- if (isMobile || isNative) {
- return
onPressReply: () => void
onPostReply?: (postUri: string | undefined) => void
- logContext: 'FeedItem' | 'PostThreadItem' | 'Post'
+ logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
threadgateRecord?: AppBskyFeedThreadgate.Record
}): React.ReactNode => {
const t = useTheme()
diff --git a/src/view/com/util/post-embeds/VideoEmbed.tsx b/src/view/com/util/post-embeds/VideoEmbed.tsx
index f268bf8db8..b45027089a 100644
--- a/src/view/com/util/post-embeds/VideoEmbed.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbed.tsx
@@ -5,9 +5,9 @@ import {AppBskyEmbedVideo} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
-import {clamp} from '#/lib/numbers'
+import {ConstrainedImage} from '#/view/com/util/images/AutoSizedImage'
import {VideoEmbedInnerNative} from '#/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
import {Button} from '#/components/Button'
import {useThrottledValue} from '#/components/hooks/useThrottledValue'
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
@@ -16,9 +16,11 @@ import * as VideoFallback from './VideoEmbedInner/VideoFallback'
interface Props {
embed: AppBskyEmbedVideo.View
+ crop?: 'none' | 'square' | 'constrained'
}
-export function VideoEmbed({embed}: Props) {
+export function VideoEmbed({embed, crop}: Props) {
+ const t = useTheme()
const [key, setKey] = useState(0)
const renderError = useCallback(
@@ -28,26 +30,51 @@ export function VideoEmbed({embed}: Props) {
[key],
)
- let aspectRatio = 16 / 9
- if (embed.aspectRatio) {
- const {width, height} = embed.aspectRatio
- aspectRatio = width / height
- aspectRatio = clamp(aspectRatio, 1 / 1, 3 / 1)
+ let aspectRatio: number | undefined
+ const dims = embed.aspectRatio
+ if (dims) {
+ aspectRatio = dims.width / dims.height
+ if (Number.isNaN(aspectRatio)) {
+ aspectRatio = undefined
+ }
}
+ let constrained: number | undefined
+ let max: number | undefined
+ if (aspectRatio !== undefined) {
+ const ratio = 1 / 2 // max of 1:2 ratio in feeds
+ constrained = Math.max(aspectRatio, ratio)
+ max = Math.max(aspectRatio, 0.25) // max of 1:4 in thread
+ }
+ const cropDisabled = crop === 'none'
+
+ const contents = (
+
+
+ )
+
return (
-
-
-
+
+ {cropDisabled ? (
+
+ {contents}
+
+ ) : (
+
+ {contents}
+
+ )}
)
}
diff --git a/src/view/com/util/post-embeds/VideoEmbed.web.tsx b/src/view/com/util/post-embeds/VideoEmbed.web.tsx
index a1f4652ac7..b0ded67548 100644
--- a/src/view/com/util/post-embeds/VideoEmbed.web.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbed.web.tsx
@@ -5,7 +5,7 @@ import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {isFirefox} from '#/lib/browser'
-import {clamp} from '#/lib/numbers'
+import {ConstrainedImage} from '#/view/com/util/images/AutoSizedImage'
import {
HLSUnsupportedError,
VideoEmbedInnerWeb,
@@ -18,7 +18,13 @@ import {ErrorBoundary} from '../ErrorBoundary'
import {useActiveVideoWeb} from './ActiveVideoWebContext'
import * as VideoFallback from './VideoEmbedInner/VideoFallback'
-export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
+export function VideoEmbed({
+ embed,
+ crop,
+}: {
+ embed: AppBskyEmbedVideo.View
+ crop?: 'none' | 'square' | 'constrained'
+}) {
const ref = useRef(null)
const {active, setActive, sendPosition, currentActiveView} =
useActiveVideoWeb()
@@ -52,42 +58,58 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
[key],
)
- let aspectRatio = 16 / 9
-
- if (embed.aspectRatio) {
- const {width, height} = embed.aspectRatio
- // min: 3/1, max: square
- aspectRatio = clamp(width / height, 1 / 1, 3 / 1)
+ let aspectRatio: number | undefined
+ const dims = embed.aspectRatio
+ if (dims) {
+ aspectRatio = dims.width / dims.height
+ if (Number.isNaN(aspectRatio)) {
+ aspectRatio = undefined
+ }
}
+ let constrained: number | undefined
+ let max: number | undefined
+ if (aspectRatio !== undefined) {
+ const ratio = 1 / 2 // max of 1:2 ratio in feeds
+ constrained = Math.max(aspectRatio, ratio)
+ max = Math.max(aspectRatio, 0.25) // max of 1:4 in thread
+ }
+ const cropDisabled = crop === 'none'
+
+ const contents = (
+ evt.stopPropagation()}>
+
+
+
+
+
+ )
+
return (
-
- evt.stopPropagation()}>
-
-
-
-
-
+
+ {cropDisabled ? (
+
+ {contents}
+
+ ) : (
+
+ {contents}
+
+ )}
)
}
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/utils.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/utils.tsx
index 8aa2d3f7da..60ee33f450 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/utils.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbedInner/web-controls/utils.tsx
@@ -149,9 +149,6 @@ export function useVideoElement(ref: React.RefObject) {
ref.current.addEventListener('ended', handleEnded, {
signal: abortController.signal,
})
- ref.current.addEventListener('volumechange', handleVolumeChange, {
- signal: abortController.signal,
- })
return () => {
abortController.abort()
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index 9dc43da8e7..6f5f9d3ab9 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -237,7 +237,16 @@ export function PostEmbeds({
if (AppBskyEmbedVideo.isView(embed)) {
return (
-
)
}
diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx
index 60dc089dd8..1a236f8bcd 100644
--- a/src/view/screens/Debug.tsx
+++ b/src/view/screens/Debug.tsx
@@ -10,12 +10,11 @@ import {PaletteColorName, ThemeProvider} from '#/lib/ThemeContext'
import {EmptyState} from '#/view/com/util/EmptyState'
import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
-import {Button, ButtonType} from '#/view/com/util/forms/Button'
+import {Button} from '#/view/com/util/forms/Button'
import {
DropdownButton,
DropdownItem,
} from '#/view/com/util/forms/DropdownButton'
-import {RadioGroup} from '#/view/com/util/forms/RadioGroup'
import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
import * as LoadingPlaceholder from '#/view/com/util/LoadingPlaceholder'
import {Text} from '#/view/com/util/text/Text'
@@ -139,8 +138,6 @@ function ControlsView() {
)
}
-
-const RADIO_BUTTON_ITEMS = [
- {key: 'default-light', label: 'Default Light'},
- {key: 'primary', label: 'Primary'},
- {key: 'secondary', label: 'Secondary'},
- {key: 'inverted', label: 'Inverted'},
- {key: 'primary-outline', label: 'Primary Outline'},
- {key: 'secondary-outline', label: 'Secondary Outline'},
- {key: 'primary-light', label: 'Primary Light'},
- {key: 'secondary-light', label: 'Secondary Light'},
-]
-function RadioButtonsView() {
- const defaultPal = usePalette('default')
- const [rgType, setRgType] = React.useState('default-light')
- return (
-
- setRgType(v as ButtonType)}
- />
-
- )
-}
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 59b2967308..ef672f7fb4 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -15,7 +15,7 @@ import {logEvent} from '#/lib/statsig/statsig'
import {isWeb} from '#/platform/detection'
import {emitSoftReset} from '#/state/events'
import {SavedFeedSourceInfo, usePinnedFeedsInfos} from '#/state/queries/feed'
-import {FeedParams} from '#/state/queries/post-feed'
+import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
import {usePreferencesQuery} from '#/state/queries/preferences'
import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
import {useSession} from '#/state/session'
@@ -99,11 +99,12 @@ function HomeScreenReady({
() => pinnedFeedInfos.map(f => f.feedDescriptor),
[pinnedFeedInfos],
)
- const rawSelectedFeed = useSelectedFeed() ?? allFeeds[0]
+ const maybeRawSelectedFeed: FeedDescriptor | undefined =
+ useSelectedFeed() ?? allFeeds[0]
const setSelectedFeed = useSetSelectedFeed()
- const maybeFoundIndex = allFeeds.indexOf(rawSelectedFeed)
+ const maybeFoundIndex = allFeeds.indexOf(maybeRawSelectedFeed)
const selectedIndex = Math.max(0, maybeFoundIndex)
- const selectedFeed = allFeeds[selectedIndex]
+ const maybeSelectedFeed: FeedDescriptor | undefined = allFeeds[selectedIndex]
const requestNotificationsPermission = useRequestNotificationsPermission()
useSetTitle(pinnedFeedInfos[selectedIndex]?.displayName)
@@ -135,11 +136,11 @@ function HomeScreenReady({
useFocusEffect(
useNonReactiveCallback(() => {
- if (selectedFeed) {
+ if (maybeSelectedFeed) {
logEvent('home:feedDisplayed', {
index: selectedIndex,
- feedType: selectedFeed.split('|')[0],
- feedUrl: selectedFeed,
+ feedType: maybeSelectedFeed.split('|')[0],
+ feedUrl: maybeSelectedFeed,
reason: 'focus',
})
}
@@ -149,16 +150,20 @@ function HomeScreenReady({
const onPageSelected = React.useCallback(
(index: number) => {
setMinimalShellMode(false)
- const feed = allFeeds[index]
+ const maybeFeed = allFeeds[index]
+
// Mutate the ref before setting state to avoid the imperative syncing effect
// above from starting a loop on Android when swiping back and forth.
lastPagerReportedIndexRef.current = index
- setSelectedFeed(feed)
- logEvent('home:feedDisplayed', {
- index,
- feedType: feed.split('|')[0],
- feedUrl: feed,
- })
+ setSelectedFeed(maybeFeed)
+
+ if (maybeFeed) {
+ logEvent('home:feedDisplayed', {
+ index,
+ feedType: maybeFeed.split('|')[0],
+ feedUrl: maybeFeed,
+ })
+ }
},
[setSelectedFeed, setMinimalShellMode, allFeeds],
)
@@ -228,12 +233,13 @@ function HomeScreenReady({
(null)
const repliesSectionRef = React.useRef(null)
const mediaSectionRef = React.useRef(null)
+ const videosSectionRef = React.useRef(null)
const likesSectionRef = React.useRef(null)
const feedsSectionRef = React.useRef(null)
const listsSectionRef = React.useRef(null)
@@ -218,6 +219,7 @@ function ProfileScreenLoaded({
const showPostsTab = true
const showRepliesTab = hasSession
const showMediaTab = !hasLabeler
+ const showVideosTab = !hasLabeler
const showLikesTab = isMe
const showFeedsTab = isMe || (profile.associated?.feedgens || 0) > 0
const showStarterPacksTab =
@@ -231,6 +233,7 @@ function ProfileScreenLoaded({
showPostsTab ? _(msg`Posts`) : undefined,
showRepliesTab ? _(msg`Replies`) : undefined,
showMediaTab ? _(msg`Media`) : undefined,
+ showVideosTab ? _(msg`Videos`) : undefined,
showLikesTab ? _(msg`Likes`) : undefined,
showFeedsTab ? _(msg`Feeds`) : undefined,
showStarterPacksTab ? _(msg`Starter Packs`) : undefined,
@@ -242,6 +245,7 @@ function ProfileScreenLoaded({
let postsIndex: number | null = null
let repliesIndex: number | null = null
let mediaIndex: number | null = null
+ let videosIndex: number | null = null
let likesIndex: number | null = null
let feedsIndex: number | null = null
let starterPacksIndex: number | null = null
@@ -258,6 +262,9 @@ function ProfileScreenLoaded({
if (showMediaTab) {
mediaIndex = nextIndex++
}
+ if (showVideosTab) {
+ videosIndex = nextIndex++
+ }
if (showLikesTab) {
likesIndex = nextIndex++
}
@@ -281,6 +288,8 @@ function ProfileScreenLoaded({
repliesSectionRef.current?.scrollToTop()
} else if (index === mediaIndex) {
mediaSectionRef.current?.scrollToTop()
+ } else if (index === videosIndex) {
+ videosSectionRef.current?.scrollToTop()
} else if (index === likesIndex) {
likesSectionRef.current?.scrollToTop()
} else if (index === feedsIndex) {
@@ -296,6 +305,7 @@ function ProfileScreenLoaded({
postsIndex,
repliesIndex,
mediaIndex,
+ videosIndex,
likesIndex,
feedsIndex,
listsIndex,
@@ -435,6 +445,19 @@ function ProfileScreenLoaded({
/>
)
: null}
+ {showVideosTab
+ ? ({headerHeight, isFocused, scrollElRef}) => (
+ {
+ ({item, index}: {item: ExploreScreenItems; index: number}) => {
switch (item.type) {
case 'header': {
return (
@@ -513,6 +529,9 @@ export function Explore() {
case 'trendingTopics': {
return
)
diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index b11bb0510a..801381a036 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -427,12 +427,12 @@ function useQueryManager({initialQuery}: {initialQuery: string}) {
const {query, params: initialParams} = React.useMemo(() => {
return parseSearchQuery(initialQuery || '')
}, [initialQuery])
- const prevInitialQuery = React.useRef(initialQuery)
+ const [prevInitialQuery, setPrevInitialQuery] = React.useState(initialQuery)
const [lang, setLang] = React.useState(initialParams.lang || '')
- if (initialQuery !== prevInitialQuery.current) {
+ if (initialQuery !== prevInitialQuery) {
// handle new queryParam change (from manual search entry)
- prevInitialQuery.current = initialQuery
+ setPrevInitialQuery(initialQuery)
setLang(initialParams.lang || '')
}
@@ -741,8 +741,14 @@ export function SearchScreen(
scrollToTopWeb()
textInput.current?.blur()
setShowAutocomplete(false)
- setSearchText(queryParam)
- }, [setShowAutocomplete, setSearchText, queryParam])
+ if (isWeb) {
+ // Empty params resets the URL to be /search rather than /search?q=
+ navigation.replace('Search', {})
+ } else {
+ setSearchText('')
+ navigation.setParams({q: ''})
+ }
+ }, [setShowAutocomplete, setSearchText, navigation])
const onSubmit = React.useCallback(() => {
navigateToItem(searchText)
diff --git a/src/view/shell/BlockDrawerGesture.tsx b/src/view/shell/BlockDrawerGesture.tsx
new file mode 100644
index 0000000000..bae9a8db82
--- /dev/null
+++ b/src/view/shell/BlockDrawerGesture.tsx
@@ -0,0 +1,9 @@
+import {useContext} from 'react'
+import {DrawerGestureContext} from 'react-native-drawer-layout'
+import {Gesture, GestureDetector} from 'react-native-gesture-handler'
+
+export function BlockDrawerGesture({children}: {children: React.ReactNode}) {
+ const drawerGesture = useContext(DrawerGestureContext) ?? Gesture.Native() // noop for web
+ const scrollGesture = Gesture.Native().blocksExternalGesture(drawerGesture)
+ return {children}
+}
diff --git a/src/view/shell/Composer.tsx b/src/view/shell/Composer.tsx
index 21ab9ec21a..e40c3528b9 100644
--- a/src/view/shell/Composer.tsx
+++ b/src/view/shell/Composer.tsx
@@ -1,14 +1,14 @@
import {useEffect} from 'react'
-import {Animated, Easing, StyleSheet, View} from 'react-native'
+import {Animated, Easing} from 'react-native'
import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue'
-import {usePalette} from '#/lib/hooks/usePalette'
import {useComposerState} from '#/state/shell/composer'
+import {atoms as a, useTheme} from '#/alf'
import {ComposePost} from '../com/composer/Composer'
export function Composer({winHeight}: {winHeight: number}) {
const state = useComposerState()
- const pal = usePalette('default')
+ const t = useTheme()
const initInterp = useAnimatedValue(0)
useEffect(() => {
@@ -38,12 +38,12 @@ export function Composer({winHeight}: {winHeight: number}) {
// =
if (!state) {
- return
)
}
-
-const styles = StyleSheet.create({
- wrapper: {
- position: 'absolute',
- top: 0,
- bottom: 0,
- width: '100%',
- },
-})
diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx
index cfd9f62802..80a112705f 100644
--- a/src/view/shell/Composer.web.tsx
+++ b/src/view/shell/Composer.web.tsx
@@ -25,7 +25,7 @@ export function Composer({}: {winHeight: number}) {
// =
if (!isActive) {
- return {
- Sign up
+ Create account
-
+
-
- Sign up
-
+ label={_(msg`Create account`)}
+ size="small"
+ variant="solid"
+ color="primary">
+
+ Create account
+
-
-
+ label={_(msg`Sign in`)}
+ size="small"
+ variant="solid"
+ color="secondary">
+
Sign in
-
+
diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx
index 1855969cc4..da935c9fbc 100644
--- a/src/view/shell/bottom-bar/BottomBarWeb.tsx
+++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx
@@ -16,12 +16,11 @@ import {useUnreadNotifications} from '#/state/queries/notifications/unread'
import {useSession} from '#/state/session'
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
import {useCloseAllActiveElements} from '#/state/util'
-import {Button} from '#/view/com/util/forms/Button'
import {Link} from '#/view/com/util/Link'
-import {Text} from '#/view/com/util/text/Text'
import {Logo} from '#/view/icons/Logo'
import {Logotype} from '#/view/icons/Logotype'
import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
import {
Bell_Filled_Corner0_Rounded as BellFilled,
Bell_Stroke2_Corner0_Rounded as Bell,
@@ -40,6 +39,7 @@ import {
UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
UserCircle_Stroke2_Corner0_Rounded as UserCircle,
} from '#/components/icons/UserCircle'
+import {Text} from '#/components/Typography'
import {styles} from './BottomBarStyles'
export function BottomBarWeb() {
@@ -196,24 +196,26 @@ export function BottomBarWeb() {