yarn intl:extract

* Implement onViewableItemsChanged on List.web.tsx

* Introduce onItemSeen to List API

* Add FeedFeedback tracker

* Add clickthrough interaction tracking

* Add engagement interaction tracking

* Reduce duplicate sends, introduce a flushAndReset to be triggered on refreshes, and modify the api design a bit

* Wire up SDK types and feedContext

* Avoid needless function allocations

* Fix schema usage

* Add show more / show less buttons

* Fix minor rendering issue on mobile menu

* Wire up sendInteractions()

* Fix logic error

* Fix: it's item not uri

* Update 'seen' to mean 3 seconds on-screen with some significant portion visible

* Fix non-reactive debounce

* Move methods out

* Use a WeakSet for deduping

* Reset timeout

* 3 -> 2 seconds

* Oopsie

* Throttle instead

* Fix divider

* Remove explicit flush calls

* Rm unused

---------

Co-authored-by: dan <dan.abramov@gmail.com>

.github/workflows/build-and-push-embedr-aws.yaml

@@ -0,0 +1,57 @@
+name: build-and-push-embedr-aws
+on:
+  push:
+    branches:
+      - main
+      - bnewbold/embedr
+      - bnewbold/embedr-rebase
+
+env:
+  REGISTRY: ${{ secrets.AWS_ECR_REGISTRY_USEAST2_PACKAGES_REGISTRY }}
+  USERNAME: ${{ secrets.AWS_ECR_REGISTRY_USEAST2_PACKAGES_USERNAME }}
+  PASSWORD: ${{ secrets.AWS_ECR_REGISTRY_USEAST2_PACKAGES_PASSWORD }}
+  IMAGE_NAME: embed
+
+jobs:
+  embedr-container-aws:
+    if: github.repository == 'bluesky-social/social-app'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Docker buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Log into registry ${{ env.REGISTRY }}
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ env.USERNAME}}
+          password: ${{ env.PASSWORD }}
+
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: |
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=sha,enable=true,priority=100,prefix=,suffix=,format=long
+
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          file: ./Dockerfile.embedr
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/golang-test-lint.yml

@@ -20,8 +20,8 @@ jobs:
         uses: actions/setup-go@v3
         with:
           go-version: '1.21'
-      - name: Dummy JS File
-        run: touch bskyweb/static/js/blah.js
+      - name: Dummy Static Files
+        run: touch bskyweb/static/js/blah.js && touch bskyweb/static/media/blah.txt
       - name: Check
         run: cd bskyweb/ && make check
       - name: Build (binary)
@@ -37,7 +37,7 @@ jobs:
         uses: actions/setup-go@v3
         with:
           go-version: '1.21'
-      - name: Dummy JS File
-        run: touch bskyweb/static/js/blah.js
+      - name: Dummy Static Files
+        run: touch bskyweb/static/js/blah.js && touch bskyweb/static/media/blah.txt
       - name: Lint
         run: cd bskyweb/ &&  make lint

Dockerfile

@@ -72,3 +72,5 @@ CMD ["/usr/bin/bskyweb"]
 LABEL org.opencontainers.image.source=https://github.com/bluesky-social/social-app
 LABEL org.opencontainers.image.description="bsky.app Web App"
 LABEL org.opencontainers.image.licenses=MIT
+
+# NOOP

Dockerfile.embedr

@@ -0,0 +1,79 @@
+FROM golang:1.21-bullseye AS build-env
+
+WORKDIR /usr/src/social-app
+
+ENV DEBIAN_FRONTEND=noninteractive
+
+# Node
+ENV NODE_VERSION=18
+ENV NVM_DIR=/usr/share/nvm
+
+# Go
+ENV GODEBUG="netdns=go"
+ENV GOOS="linux"
+ENV GOARCH="amd64"
+ENV CGO_ENABLED=1
+ENV GOEXPERIMENT="loopvar"
+
+COPY . .
+
+#
+# Generate the JavaScript webpack. NOTE: this will change
+#
+RUN mkdir --parents $NVM_DIR && \
+  wget \
+    --output-document=/tmp/nvm-install.sh \
+    https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh && \
+  bash /tmp/nvm-install.sh
+
+RUN \. "$NVM_DIR/nvm.sh" && \
+  nvm install $NODE_VERSION && \
+  nvm use $NODE_VERSION && \
+  npm install --global yarn && \
+  yarn && \
+  cd bskyembed && yarn install --frozen-lockfile && cd .. && \
+  yarn intl:build && \
+  yarn build-embed
+
+# DEBUG
+RUN find ./bskyweb/embedr-static && find ./bskyweb/embedr-templates && find ./bskyembed/dist
+
+# hack around issue with empty directory and go:embed
+RUN touch bskyweb/static/js/empty.txt
+RUN touch bskyweb/static/media/empty.txt
+
+#
+# Generate the embedr Go binary.
+#
+RUN cd bskyweb/ && \
+  go mod download && \
+  go mod verify
+
+RUN cd bskyweb/ && \
+  go build \
+    -v  \
+    -trimpath \
+    -tags timetzdata \
+    -o /embedr \
+    ./cmd/embedr
+
+FROM debian:bullseye-slim
+
+ENV GODEBUG=netdns=go
+ENV TZ=Etc/UTC
+ENV DEBIAN_FRONTEND=noninteractive
+
+RUN apt-get update && apt-get install --yes \
+  dumb-init \
+  ca-certificates
+
+ENTRYPOINT ["dumb-init", "--"]
+
+WORKDIR /embedr
+COPY --from=build-env /embedr /usr/bin/embedr
+
+CMD ["/usr/bin/embedr"]
+
+LABEL org.opencontainers.image.source=https://github.com/bluesky-social/social-app
+LABEL org.opencontainers.image.description="embed.bsky.app Web App"
+LABEL org.opencontainers.image.licenses=MIT

Makefile

@@ -13,6 +13,11 @@ build-web: ## Compile web bundle, copy to bskyweb directory
 	yarn intl:build
 	yarn build-web
 
+.PHONY: build-web-embed
+build-web-embed: ## Compile web embed bundle, copy to bskyweb/embedr* directories
+	yarn intl:build
+	yarn build-embed
+
 .PHONY: test
 test: ## Run all tests
 	NODE_ENV=test EXPO_PUBLIC_ENV=test yarn test
@@ -28,6 +33,7 @@ lint: ## Run style checks and verify syntax
 .PHONY: deps
 deps: ## Installs dependent libs using 'yarn install'
 	yarn install --frozen-lockfile
+	cd bskyembed && yarn install --frozen-lockfile
 
 .PHONY: nvm-setup
 nvm-setup: ## Use NVM to install and activate node+yarn

__e2e__/tests/composer.test.ts

@@ -1,8 +1,9 @@
 /* eslint-env detox/detox */
 
-import {describe, beforeAll, it} from '@jest/globals'
+import {beforeAll, describe, it} from '@jest/globals'
 import {expect} from 'detox'
-import {openApp, loginAsAlice, createServer, sleep} from '../util'
+
+import {createServer, loginAsAlice, openApp, sleep} from '../util'
 
 describe('Composer', () => {
   beforeAll(async () => {
@@ -41,7 +42,6 @@ describe('Composer', () => {
     await element(by.id('composerTextInput')).typeText(
       'Post with a https://example.com link card',
     )
-    await element(by.id('addLinkCardBtn')).tap()
     await element(by.id('composerPublishBtn')).tap()
     await expect(element(by.id('composeFAB'))).toBeVisible()
   })
@@ -72,7 +72,6 @@ describe('Composer', () => {
     await element(by.id('composerTextInput')).typeText(
       'Reply with a https://example.com link card',
     )
-    await element(by.id('addLinkCardBtn')).tap()
     await element(by.id('composerPublishBtn')).tap()
     await expect(element(by.id('composeFAB'))).toBeVisible()
   })
@@ -104,7 +103,6 @@ describe('Composer', () => {
     await element(by.id('composerTextInput')).typeText(
       'QP with a https://example.com link card',
     )
-    await element(by.id('addLinkCardBtn')).tap()
     await element(by.id('composerPublishBtn')).tap()
     await expect(element(by.id('composeFAB'))).toBeVisible()
   })

__e2e__/tests/curate-lists.test.ts

@@ -1,8 +1,9 @@
 /* eslint-env detox/detox */
 
-import {describe, beforeAll, it} from '@jest/globals'
+import {beforeAll, describe, it} from '@jest/globals'
 import {expect} from 'detox'
-import {openApp, loginAsAlice, loginAsBob, createServer, sleep} from '../util'
+
+import {createServer, loginAsAlice, loginAsBob, openApp, sleep} from '../util'
 
 describe('Curate lists', () => {
   beforeAll(async () => {
@@ -115,6 +116,7 @@ describe('Curate lists', () => {
     await element(by.text('About')).tap()
     await element(by.id('addUserBtn')).tap()
     await expect(element(by.id('listAddUserModal'))).toBeVisible()
+    await element(by.id('searchInput')).typeText('b')
     await waitFor(element(by.id('user-bob.test-addBtn')))
       .toBeVisible()
       .withTimeout(5000)

__e2e__/util.ts

@@ -1,5 +1,5 @@
-import {resolveConfig} from 'detox/internals'
 import {execSync} from 'child_process'
+import {resolveConfig} from 'detox/internals'
 import http from 'http'
 
 const platform = device.getPlatform()
@@ -52,7 +52,7 @@ export async function login(
   if (await isVisible('chooseAccountForm')) {
     await element(by.id('chooseNewAccountBtn')).tap()
   }
-  await element(by.id('loginSelectServiceButton')).tap()
+  await element(by.id('selectServiceButton')).tap()
   if (takeScreenshots) {
     await device.takeScreenshot('2- opened service selector')
   }

__tests__/lib/images.test.ts

@@ -1,9 +1,10 @@
+import ImageResizer from '@bam.tech/react-native-image-resizer'
+import RNFetchBlob from 'rn-fetch-blob'
+
 import {
   downloadAndResize,
   DownloadAndResizeOpts,
 } from '../../src/lib/media/manip'
-import ImageResizer from '@bam.tech/react-native-image-resizer'
-import RNFetchBlob from 'rn-fetch-blob'
 
 describe('downloadAndResize', () => {
   const errorSpy = jest.spyOn(global.console, 'error')
@@ -30,6 +31,7 @@ describe('downloadAndResize', () => {
     const mockedFetch = RNFetchBlob.fetch as jest.Mock
     mockedFetch.mockResolvedValueOnce({
       path: jest.fn().mockReturnValue('file://downloaded-image.jpg'),
+      info: jest.fn().mockReturnValue({status: 200}),
       flush: jest.fn(),
     })
 
@@ -84,6 +86,7 @@ describe('downloadAndResize', () => {
     const mockedFetch = RNFetchBlob.fetch as jest.Mock
     mockedFetch.mockResolvedValueOnce({
       path: jest.fn().mockReturnValue('file://downloaded-image'),
+      info: jest.fn().mockReturnValue({status: 200}),
       flush: jest.fn(),
     })
 
@@ -118,4 +121,26 @@ describe('downloadAndResize', () => {
       {mode: 'cover'},
     )
   })
+
+  it('should return undefined for non-200 response', async () => {
+    const mockedFetch = RNFetchBlob.fetch as jest.Mock
+    mockedFetch.mockResolvedValueOnce({
+      path: jest.fn().mockReturnValue('file://downloaded-image'),
+      info: jest.fn().mockReturnValue({status: 400}),
+      flush: jest.fn(),
+    })
+
+    const opts: DownloadAndResizeOpts = {
+      uri: 'https://example.com/image',
+      width: 100,
+      height: 100,
+      maxSize: 500000,
+      mode: 'cover',
+      timeout: 10000,
+    }
+
+    const result = await downloadAndResize(opts)
+    expect(errorSpy).not.toHaveBeenCalled()
+    expect(result).toBeUndefined()
+  })
 })

__tests__/lib/string.test.ts

@@ -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 = [
@@ -395,6 +396,7 @@ describe('parseEmbedPlayerFromUrl', () => {
     'https://youtube.com/watch?v=videoId&feature=share',
     'https://youtube.com/shorts/videoId',
     'https://m.youtube.com/watch?v=videoId',
+    'https://music.youtube.com/watch?v=videoId',
 
     'https://youtube.com/shorts/',
     'https://youtube.com/',
@@ -434,6 +436,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',
@@ -456,6 +460,12 @@ describe('parseEmbedPlayerFromUrl', () => {
     'https://tenor.com/view',
     'https://tenor.com/view/gifId.gif',
     'https://tenor.com/intl/view/gifId.gif',
+
+    'https://media.tenor.com/someID_AAAAC/someName.gif?hh=100&ww=100',
+    'https://media.tenor.com/someID_AAAAC/someName.gif',
+    'https://media.tenor.com/someID/someName.gif',
+    'https://media.tenor.com/someID',
+    'https://media.tenor.com',
   ]
 
   const outputs = [
@@ -495,6 +505,11 @@ describe('parseEmbedPlayerFromUrl', () => {
       source: 'youtube',
       playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
     },
+    {
+      type: 'youtube_video',
+      source: 'youtube',
+      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
+    },
 
     undefined,
     undefined,
@@ -621,18 +636,17 @@ 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/gifId',
-      playerUri: 'https://i.giphy.com/media/gifId/giphy.webp',
+      metaUri: 'https://giphy.com/gifs/39248209509382934029',
+      playerUri: 'https://i.giphy.com/media/39248209509382934029/200.webp',
     },
     {
       type: 'giphy_gif',
@@ -640,7 +654,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 +662,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 +670,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 +678,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 +686,15 @@ 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',
+      source: 'giphy',
+      isGif: true,
+      hideDetails: true,
+      metaUri: 'https://giphy.com/gifs/gifId',
+      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
     },
     undefined,
     undefined,
@@ -684,7 +706,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 +715,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 +723,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 +731,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,32 +739,30 @@ 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,
+    undefined,
+    undefined,
+    undefined,
+
     {
       type: 'tenor_gif',
       source: 'tenor',
       isGif: true,
       hideDetails: true,
-      playerUri: 'https://tenor.com/view/gifId.gif',
+      playerUri: 'https://t.gifs.bsky.app/someID_AAAAM/someName.gif',
+      dimensions: {
+        width: 100,
+        height: 100,
+      },
     },
     undefined,
     undefined,
-    {
-      type: 'tenor_gif',
-      source: 'tenor',
-      isGif: true,
-      hideDetails: true,
-      playerUri: 'https://tenor.com/view/gifId.gif',
-    },
-    {
-      type: 'tenor_gif',
-      source: 'tenor',
-      isGif: true,
-      hideDetails: true,
-      playerUri: 'https://tenor.com/intl/view/gifId.gif',
-    },
+    undefined,
+    undefined,
   ]
 
   it('correctly grabs the correct id from uri', () => {

__tests__/lib/strings/url-helpers.test.ts

@@ -1,10 +1,10 @@
-import {it, describe, expect} from '@jest/globals'
+import {describe, expect, it} from '@jest/globals'
 
 import {
-  linkRequiresWarning,
   isPossiblyAUrl,
-  splitApexDomain,
   isTrustedUrl,
+  linkRequiresWarning,
+  splitApexDomain,
 } from '../../../src/lib/strings/url-helpers'
 
 describe('linkRequiresWarning', () => {
@@ -170,6 +170,7 @@ describe('isTrustedUrl', () => {
     ['https://google.com', false],
     ['https://docs.google.com', false],
     ['https://google.com/#', false],
+    ['https://blueskywebxzendesk.com', false],
   ]
 
   it.each(cases)('given input uri %p, returns %p', (str, expected) => {

app.config.js

@@ -35,11 +35,6 @@ module.exports = function (config) {
    */
   const PLATFORM = process.env.EAS_BUILD_PLATFORM
 
-  const DIST_BUILD_NUMBER =
-    PLATFORM === 'android'
-      ? process.env.BSKY_ANDROID_VERSION_CODE
-      : process.env.BSKY_IOS_BUILD_NUMBER
-
   const IS_DEV = process.env.EXPO_PUBLIC_ENV === 'development'
   const IS_TESTFLIGHT = process.env.EXPO_PUBLIC_ENV === 'testflight'
   const IS_PRODUCTION = process.env.EXPO_PUBLIC_ENV === 'production'
@@ -51,6 +46,10 @@ module.exports = function (config) {
     : undefined
   const UPDATES_ENABLED = !!UPDATES_CHANNEL
 
+  const SENTRY_DIST = `${PLATFORM}.${VERSION}.${IS_TESTFLIGHT ? 'tf' : ''}${
+    IS_DEV ? 'dev' : ''
+  }`
+
   return {
     expo: {
       version: VERSION,
@@ -65,6 +64,8 @@ module.exports = function (config) {
       icon: './assets/icon.png',
       userInterfaceStyle: 'automatic',
       splash: SPLASH_CONFIG,
+      // hsl(211, 99%, 53%), same as palette.default.brandText
+      primaryColor: '#1083fe',
       ios: {
         supportsTablet: false,
         bundleIdentifier: 'xyz.blueskyweb.app',
@@ -181,6 +182,7 @@ module.exports = function (config) {
         './plugins/withAndroidManifestPlugin.js',
         './plugins/withAndroidManifestFCMIconPlugin.js',
         './plugins/withAndroidStylesWindowBackgroundPlugin.js',
+        './plugins/withAndroidStylesAccentColorPlugin.js',
         './plugins/withAndroidSplashScreenStatusBarTranslucentPlugin.js',
         './plugins/shareExtension/withShareExtensions.js',
       ].filter(Boolean),
@@ -217,7 +219,7 @@ module.exports = function (config) {
               organization: 'blueskyweb',
               project: 'react-native',
               release: VERSION,
-              dist: `${PLATFORM}.${VERSION}.${DIST_BUILD_NUMBER}`,
+              dist: SENTRY_DIST,
             },
           },
         ],

assets/icons/alien_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M5 11a7 7 0 0 1 14 0c0 2.625-1.547 5.138-3.354 7.066a17.23 17.23 0 0 1-2.55 2.242 8.246 8.246 0 0 1-.924.577 2.904 2.904 0 0 1-.172.083 2.904 2.904 0 0 1-.172-.083 8.246 8.246 0 0 1-.923-.577 17.227 17.227 0 0 1-2.55-2.242C6.547 16.138 5 13.625 5 11Zm6.882 10.012Zm.232-.001h-.003a.047.047 0 0 0 .007.001l-.004-.001ZM12 2a9 9 0 0 0-9 9c0 3.375 1.953 6.362 3.895 8.434a19.216 19.216 0 0 0 2.856 2.508c.425.3.82.545 1.159.72.168.087.337.164.498.222.14.05.356.116.592.116s.451-.066.592-.116c.16-.058.33-.135.498-.222.339-.175.734-.42 1.159-.72.85-.6 1.87-1.457 2.856-2.508C19.047 17.362 21 14.375 21 11a9 9 0 0 0-9-9ZM7.38 9.927c2.774-.094 3.459 1.31 3.591 3.19a.89.89 0 0 1-.855.956c-2.774.094-3.458-1.31-3.59-3.19a.89.89 0 0 1 .854-.956Zm9.236 0c-2.774-.094-3.458 1.31-3.59 3.19a.89.89 0 0 0 .854.956c2.774.094 3.459-1.31 3.591-3.19a.89.89 0 0 0-.855-.956Z" clip-rule="evenodd"/></svg>

assets/icons/apple_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M8.148 2.034a1 1 0 0 1 1.35-.419c1.054.556 1.873 1.266 2.46 2.174.369.57.63 1.197.807 1.873 1.143-.349 2.194-.46 3.15-.342a5.122 5.122 0 0 1 3.134 1.556c1.564 1.63 2.086 4.183 1.922 6.58-.166 2.414-1.043 4.938-2.607 6.619-.792.851-1.78 1.505-2.95 1.782-1.063.251-2.213.176-3.415-.262-1.202.438-2.351.513-3.414.262-1.17-.277-2.158-.93-2.95-1.782-1.563-1.682-2.44-4.205-2.606-6.62-.164-2.396.358-4.949 1.921-6.579A5.121 5.121 0 0 1 8.085 5.32c.777-.095 1.617-.04 2.518.172a4.011 4.011 0 0 0-.325-.618c-.372-.576-.912-1.068-1.712-1.49a1 1 0 0 1-.418-1.35Zm.897 17.877c.71.167 1.557.117 2.562-.31a1 1 0 0 1 .784 0c1.005.428 1.853.477 2.563.31.715-.17 1.37-.579 1.946-1.198 1.171-1.26 1.932-3.303 2.076-5.394.144-2.109-.353-3.998-1.37-5.059a3.124 3.124 0 0 0-1.936-.955c-.83-.102-1.912.043-3.282.621a1 1 0 0 1-.778 0c-1.37-.578-2.45-.723-3.281-.62-.815.1-1.445.443-1.935.954-1.017 1.06-1.514 2.95-1.37 5.059.144 2.09.905 4.135 2.076 5.394.575.62 1.23 1.029 1.945 1.198Z" clip-rule="evenodd"/></svg>

assets/icons/arrowLeft_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 12a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 1.414L6.414 11H20a1 1 0 1 1 0 2H6.414l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6A1 1 0 0 1 3 12Z" clip-rule="evenodd"/></svg>

assets/icons/atom_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.17 5.004c-.553-.029-.814.107-.937.23-.122.122-.258.383-.23.936.03.552.222 1.28.611 2.15.282.628.655 1.304 1.112 2.005a28.26 28.26 0 0 1 1.72-1.88 28.258 28.258 0 0 1 1.88-1.719 14.886 14.886 0 0 0-2.007-1.112c-.868-.39-1.597-.581-2.15-.61Zm5.83.44c-.985-.688-1.953-1.247-2.863-1.655-.998-.447-1.978-.736-2.863-.782-.885-.047-1.791.148-2.455.812-.664.664-.859 1.57-.812 2.455.046.885.335 1.865.782 2.863.408.91.967 1.878 1.655 2.863-.688.985-1.247 1.953-1.655 2.863-.447.998-.736 1.978-.782 2.863-.047.885.148 1.791.812 2.455.664.663 1.57.859 2.455.812.885-.046 1.865-.335 2.863-.782.91-.408 1.878-.967 2.863-1.655.985.688 1.952 1.247 2.863 1.655.998.447 1.978.736 2.863.782.885.047 1.791-.148 2.455-.812.663-.664.859-1.57.812-2.455-.046-.885-.335-1.865-.782-2.863-.408-.91-.967-1.878-1.655-2.863.688-.985 1.247-1.952 1.655-2.863.447-.998.736-1.978.782-2.863.047-.885-.148-1.791-.812-2.455-.664-.664-1.57-.859-2.455-.812-.885.046-1.865.335-2.863.782-.91.408-1.878.967-2.863 1.655Zm0 2.497A25.9 25.9 0 0 0 9.86 9.86 25.899 25.899 0 0 0 7.94 12c.569.711 1.211 1.431 1.92 2.14.709.709 1.429 1.351 2.14 1.92a25.925 25.925 0 0 0 2.14-1.92A25.925 25.925 0 0 0 16.06 12a25.921 25.921 0 0 0-1.92-2.14A25.904 25.904 0 0 0 12 7.94Zm5.274 2.384a28.232 28.232 0 0 0-1.72-1.88 28.27 28.27 0 0 0-1.88-1.719 14.89 14.89 0 0 1 2.007-1.112c.868-.39 1.597-.581 2.15-.61.552-.029.813.107.936.23.123.122.258.383.23.936-.03.552-.222 1.28-.611 2.15a14.883 14.883 0 0 1-1.112 2.005Zm0 3.35a28.24 28.24 0 0 1-1.72 1.88 28.24 28.24 0 0 1-1.88 1.719c.702.457 1.378.83 2.007 1.112.868.39 1.597.581 2.15.61.552.03.813-.106.936-.23.123-.122.258-.383.23-.935-.03-.553-.222-1.282-.611-2.15a14.888 14.888 0 0 0-1.112-2.006Zm-6.949 3.599a28.23 28.23 0 0 1-1.88-1.72 28.27 28.27 0 0 1-1.719-1.88 14.89 14.89 0 0 0-1.112 2.007c-.39.868-.581 1.597-.61 2.15-.029.552.107.813.23.936.122.123.383.258.936.23.552-.03 1.28-.222 2.15-.611a14.884 14.884 0 0 0 2.005-1.112Z" clip-rule="evenodd"/></svg>

assets/icons/celebrate_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M13.832 1.014a1 1 0 0 1 1.154.818L14 2l.986-.168v.003l.001.005.002.014.007.045.021.156c.017.13.035.312.048.527.025.42.028 1.01-.082 1.6-.127.69-.447 1.31-.701 1.726a7.107 7.107 0 0 1-.498.712l-.01.014-.004.005-.002.001v.002L13 6l.767.642a1 1 0 0 1-1.535-1.282l.002-.003.017-.02a5.13 5.13 0 0 0 .324-.47c.198-.325.378-.705.442-1.049.068-.37.071-.78.051-1.12a6.268 6.268 0 0 0-.05-.504l-.004-.025m.818-1.155a1 1 0 0 0-.818 1.155Zm5.257 1.545a1 1 0 0 1 .602 1.28l-.45 1.25a1 1 0 0 1-1.882-.678l.45-1.25a1 1 0 0 1 1.28-.602ZM6.524 7.136a2 2 0 0 1 3.294-.732l7.778 7.778a2 2 0 0 1-.732 3.294L4.653 21.91c-1.596.579-3.142-.967-2.563-2.563L6.524 7.136Zm9.658 8.46L8.404 7.818 3.97 20.03l12.212-4.434Zm5.712-8.543a1 1 0 0 1-.447 1.341l-1 .5a1 1 0 1 1-.894-1.788l1-.5a1 1 0 0 1 1.341.447Zm-4.687-.26a1 1 0 0 1 0 1.414l-1 1a1 1 0 1 1-1.414-1.414l1-1a1 1 0 0 1 1.414 0Zm-.206 4.165A1 1 0 0 1 18.042 10L18 11l.042-1 .003.001h.014l.035.003.117.008a7.693 7.693 0 0 1 1.594.306c.423.135.861.352 1.168.516a11.873 11.873 0 0 1 .508.288l.032.02.01.006.004.002L21 12l.527-.85a1 1 0 0 1-1.054 1.7l-.005-.003-.023-.014a7.477 7.477 0 0 0-.415-.236 5.497 5.497 0 0 0-.835-.374A5.684 5.684 0 0 0 17.973 12l-.015-.002h-.002a1 1 0 0 1-.955-1.041Z" clip-rule="evenodd"/></svg>

assets/icons/coffee_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7 2a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V3a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1ZM4 9a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2h.5a3.5 3.5 0 1 1 0 7H18v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9Zm12 0H6v11h10V9Zm2 5h.5a1.5 1.5 0 0 0 0-3H18v3Z" clip-rule="evenodd"/></svg>

assets/icons/emojiArc_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm8-5a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1Zm-5.894 7.803a1 1 0 0 1 1.341-.447c1.719.859 3.387.859 5.106 0a1 1 0 1 1 .894 1.788c-2.281 1.141-4.613 1.141-6.894 0a1 1 0 0 1-.447-1.341Z" clip-rule="evenodd"/></svg>

assets/icons/emojiHeartEyes_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM9.351 12.13c1.898-1.507 2.176-2.95 1.613-3.83a1.524 1.524 0 0 0-1.225-.707 1.562 1.562 0 0 0-1.218.53 1.561 1.561 0 0 0-1.326-.082c-.456.186-.8.588-.91 1.083-.227 1.02.527 2.282 2.826 3.048a.256.256 0 0 0 .24-.043Zm5.538.042c2.299-.766 3.053-2.027 2.826-3.048a1.524 1.524 0 0 0-.91-1.082 1.561 1.561 0 0 0-1.326.081 1.562 1.562 0 0 0-1.217-.53 1.524 1.524 0 0 0-1.226.706c-.563.881-.285 2.325 1.613 3.83.068.054.158.07.24.043Zm1.072 2.38a4 4 0 0 1-7.924 0c-.04-.293.218-.525.514-.499 2.309.206 4.587.206 6.896 0 .296-.026.555.206.514.5Z" clip-rule="evenodd"/></svg>

assets/icons/emojiSmile_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M17.657 6.343A8 8 0 1 0 6.343 17.657 8 8 0 0 0 17.657 6.343ZM4.929 4.93c3.905-3.905 10.237-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142-3.905 3.905-10.237 3.905-14.142 0-3.905-3.905-3.905-10.237 0-14.142Zm3.536 9.192a1 1 0 0 1 1.414 0 3 3 0 0 0 4.243 0 1 1 0 0 1 1.414 1.415 5 5 0 0 1-7.071 0 1 1 0 0 1 0-1.415Z M10.5 9.5c0 .828-.56 1.5-1.25 1.5S8 10.328 8 9.5 8.56 8 9.25 8s1.25.672 1.25 1.5ZM16 9.5c0 .828-.56 1.5-1.25 1.5s-1.25-.672-1.25-1.5.56-1.5 1.25-1.5S16 8.672 16 9.5Z" clip-rule="evenodd"/></svg>

assets/icons/envelope_filled_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 11.708 2.654 4.06A.998.998 0 0 1 3 4h18c.122 0 .238.022.346.061L12 11.708ZM2 19V6.11l9.367 7.664a1 1 0 0 0 1.266 0L22 6.11V19a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>

assets/icons/explosion_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 2a1 1 0 0 1 .889.542l1.679 3.259 3.491-1.117a1 1 0 0 1 1.257 1.257L18.2 9.432l3.259 1.679a1 1 0 0 1 0 1.778l-3.124 1.61 2.609 5.098a1 1 0 0 1-1.346 1.346l-5.098-2.61-1.61 3.125a1 1 0 0 1-1.778 0l-1.679-3.259-3.491 1.117a1 1 0 0 1-1.257-1.257L5.8 14.568l-3.259-1.679a1 1 0 0 1 0-1.778l3.124-1.61-2.609-5.098a1 1 0 0 1 1.346-1.346l5.098 2.61-.455.89.455-.89 1.61-3.125A1 1 0 0 1 12 2Zm0 3.183-.72 1.4a2 2 0 0 1-2.69.864L6.248 6.248 7.447 8.59a2 2 0 0 1-.865 2.69L5.183 12l1.534.79a2 2 0 0 1 .989 2.387L7.18 16.82l1.643-.526a2 2 0 0 1 2.387.99l.79 1.533.72-1.4a2 2 0 0 1 2.69-.864l2.342 1.199-1.199-2.342a2 2 0 0 1 .864-2.69l1.4-.72-1.534-.79a2 2 0 0 1-.989-2.387l.526-1.643-1.643.526a2 2 0 0 1-2.387-.99L12 5.184Z" clip-rule="evenodd"/></svg>

assets/icons/gameController_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M1 8a3 3 0 0 1 3-3h16a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V8Zm3-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H4Zm4 2a1 1 0 0 1 1 1v1h1a1 1 0 1 1 0 2H9v1a1 1 0 1 1-2 0v-1H6a1 1 0 1 1 0-2h1v-1a1 1 0 0 1 1-1Zm5.5 4.5a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Zm3-3a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Z" clip-rule="evenodd"/></svg>

assets/icons/gifSquare_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Zm1 16V5h14v14H5Zm10.725-5.2c0 .566-.283.872-.802.872-.538 0-.848-.318-.848-.872v-3.635c0-.512.314-.826.82-.826h2.496c.35 0 .609.272.609.64 0 .369-.26.629-.609.629h-1.666v.973h1.47c.365 0 .608.248.608.613 0 .36-.247.613-.608.613h-1.47v.993Zm-3.367.872c.526 0 .813-.31.813-.872v-3.627c0-.558-.295-.873-.825-.873s-.825.31-.825.873V13.8c0 .558.302.872.837.872Zm-3.879.078C6.92 14.75 6 13.827 6 12.287v-.617c0-1.47.955-2.42 2.472-2.42.589 0 1.139.147 1.548.388.404.236.664.562.664.915 0 .373-.271.636-.656.636a.82.82 0 0 1-.41-.108 2.34 2.34 0 0 1-.271-.177c-.208-.148-.421-.3-.746-.3-.644 0-.95.38-.95 1.155v.52c0 .768.306 1.168.903 1.168.436 0 .735-.248.735-.61v-.061h-.146c-.412 0-.632-.194-.632-.551 0-.353.216-.535.632-.535h.806c.617 0 .884.256.884.834v.166c0 1.253-.92 2.06-2.354 2.06Z" clip-rule="evenodd"/></svg>

assets/icons/gif_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H3Zm1 14V6h16v12H4Zm2-5.713c0 1.54.92 2.463 2.48 2.463 1.434 0 2.353-.807 2.353-2.06v-.166c0-.578-.267-.834-.884-.834h-.806c-.416 0-.632.182-.632.535 0 .357.22.55.632.55h.146v.063c0 .36-.299.609-.735.609-.597 0-.904-.4-.904-1.168v-.52c0-.775.307-1.155.951-1.155.325 0 .538.152.746.3.089.064.176.127.272.177a.82.82 0 0 0 .409.108c.385 0 .656-.263.656-.636 0-.353-.26-.679-.664-.915-.409-.24-.96-.388-1.548-.388C6.955 9.25 6 10.2 6 11.67v.617Zm6.358 2.385c.526 0 .813-.31.813-.872v-3.627c0-.558-.295-.873-.825-.873s-.825.31-.825.873V13.8c0 .558.302.872.837.872Zm3.367-.872c0 .566-.283.872-.802.872-.538 0-.848-.318-.848-.872v-3.635c0-.512.314-.826.82-.826h2.496c.35 0 .609.272.609.64 0 .369-.26.629-.609.629h-1.666v.973h1.47c.365 0 .608.248.608.613 0 .36-.247.613-.608.613h-1.47v.993Z" clip-rule="evenodd"/></svg>

assets/icons/image_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm16 0H5v7.213l1.246-.932.044-.03a3 3 0 0 1 3.863.454c1.468 1.58 2.941 2.749 4.847 2.749 1.703 0 2.855-.555 4-1.618V5Zm0 10.357c-1.112.697-2.386 1.097-4 1.097-2.81 0-4.796-1.755-6.313-3.388a1 1 0 0 0-1.269-.164L5 14.712V19h14v-3.643ZM15 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z" clip-rule="evenodd"/></svg>

assets/icons/lab_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M13.5 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM10 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM8 6a1 1 0 0 0 0 2v2.64c-.212.25-.45.515-.711.8l-.129.142c-.312.342-.649.711-.974 1.092-.731.857-1.488 1.866-1.89 2.99A4.845 4.845 0 0 0 4 17.297 4.702 4.702 0 0 0 8.702 22h6.596A4.702 4.702 0 0 0 20 17.298c0-.575-.114-1.122-.297-1.634-.401-1.124-1.157-2.133-1.89-2.99-.324-.38-.66-.75-.973-1.092l-.129-.141c-.26-.286-.5-.55-.711-.8V8a1 1 0 1 0 0-2H8Zm2 5.35V8h4v3.35l.22.275c.306.383.661.777 1.013 1.163l.13.143c.315.345.628.688.93 1.042.372.435.704.861.974 1.28l-.159.025c-.845.13-1.838.242-2.581.222-.842-.022-1.475-.217-2.227-.454l-.027-.008c-.746-.235-1.61-.507-2.746-.538-.743-.02-1.617.064-2.38.165.173-.228.36-.459.56-.692.302-.354.615-.697.93-1.042l.13-.143c.352-.386.707-.78 1.014-1.163L10 11.35Zm7.41 5.905c.21-.032.407-.064.586-.095A2.702 2.702 0 0 1 15.298 20H8.702A2.702 2.702 0 0 1 6 17.298c0-.142.013-.286.039-.434.236-.043.53-.093.853-.142.845-.13 1.837-.242 2.581-.222.842.022 1.475.217 2.227.454l.027.008c.746.235 1.61.507 2.746.538.931.024 2.07-.113 2.937-.245Z" clip-rule="evenodd"/></svg>

assets/icons/leaf_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h1a8.003 8.003 0 0 1 7.75 6.006A7.985 7.985 0 0 1 19 6h1a1 1 0 0 1 1 1v1a8 8 0 0 1-8 8v4a1 1 0 1 1-2 0v-7a8 8 0 0 1-8-8V4Zm2 1a6 6 0 0 1 6 6 6 6 0 0 1-6-6Zm8 9a6 6 0 0 1 6-6 6 6 0 0 1-6 6Z" clip-rule="evenodd"/></svg>

assets/icons/musicNote_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M18.423 2.428a2 2 0 0 1 2.575 1.916V15.5c0 2.096-1.97 3.5-4 3.5-2.03 0-4-1.404-4-3.5s1.97-3.5 4-3.5c.7 0 1.392.167 2 .471V4.344l-8 2.4V18.5c0 2.096-1.97 3.5-4 3.5-2.03 0-4-1.404-4-3.5s1.97-3.5 4-3.5c.7 0 1.393.167 2 .471V6.744a2 2 0 0 1 1.425-1.916l8-2.4ZM8.998 18.5c0-.666-.717-1.5-2-1.5s-2 .834-2 1.5c0 .665.717 1.5 2 1.5s2-.835 2-1.5Zm10-3c0-.665-.717-1.5-2-1.5s-2 .835-2 1.5.717 1.5 2 1.5 2-.835 2-1.5Z" clip-rule="evenodd"/></svg>

assets/icons/paperPlane_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3.374 3.22a1 1 0 0 1 1.073-.114l16 8a1 1 0 0 1 0 1.788l-16 8a1 1 0 0 1-1.417-1.136L4.97 12 3.03 4.243a1 1 0 0 1 .344-1.023ZM6.781 13l-1.284 5.133L17.764 12 5.497 5.867 6.781 11H9a1 1 0 1 1 0 2H6.78Z" clip-rule="evenodd"/></svg>

assets/icons/pencil_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21"><path fill="#000" fill-rule="evenodd" d="M13.586 1.5a2 2 0 0 1 2.828 0L19.5 4.586a2 2 0 0 1 0 2.828l-13 13A2 2 0 0 1 5.086 21H1a1 1 0 0 1-1-1v-4.086A2 2 0 0 1 .586 14.5l13-13ZM15 2.914l-13 13V19h3.086l13-13L15 2.914ZM11 20a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>

assets/icons/piggyBank_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.5 4.999Zm0 0a.054.054 0 0 1-.016.024.196.196 0 0 1-.152.043c.057.01.113.02.168.032V7.5a1 1 0 0 1-.33.742c-.543.49-.917 1.176-1.23 2.036a1 1 0 0 1-.94.657H3V14h1a1 1 0 0 1 .866.5c.436.754.879 1.195 1.637 1.636A1 1 0 0 1 7 17v2h2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2h2v-2.537a1 1 0 0 1 .332-.744A4.978 4.978 0 0 0 19 11.999 5 5 0 0 0 14 7H9.474a1 1 0 0 1-.893-.55v-.001l-.001-.002-.005-.008L9.474 6l-.9.438h.001v.002l.002.001.001.003.002.003v.003a2.62 2.62 0 0 0-.443-.538c-.319-.298-.839-.648-1.637-.814V5Zm2.082 1.452ZM9.5 4.447c.211.196.379.387.508.553H14a7 7 0 0 1 6.72 8.96 1.003 1.003 0 0 0 1.146-1.46 1 1 0 1 1 1.731-1 3 3 0 0 1-3.714 4.286A7.074 7.074 0 0 1 19 16.888V19a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2h-2a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-1.45A5.783 5.783 0 0 1 3.448 16H3a2 2 0 0 1-2-2v-3.065a2 2 0 0 1 2-2h.324c.286-.649.657-1.291 1.176-1.852V5c0-1.047.89-2.12 2.161-1.907 1.33.223 2.248.805 2.839 1.354ZM8.25 12a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z" clip-rule="evenodd"/></svg>

assets/icons/pizza_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M18.438 3.253a2 2 0 0 1 2.309 2.31L18.243 20.17c-.186 1.083-1.244 1.868-2.387 1.588a18.525 18.525 0 0 1-8.702-4.912 18.525 18.525 0 0 1-4.912-8.702C1.962 7 2.747 5.943 3.83 5.757l14.608-2.504Zm-1.474 2.282a3 3 0 0 1-5.914 1.014l-3.368.577a13.022 13.022 0 0 0 3.376 5.816c.35.35.713.675 1.09.976a4.002 4.002 0 0 1 5.571-2.53l1.056-6.164-1.81.311Zm.388 7.991a2 2 0 0 0-3.346 1.634c.916.504 1.879.89 2.868 1.158l.478-2.792Zm-.817 4.77a15 15 0 0 1-6.891-3.94 15.02 15.02 0 0 1-3.94-6.89l-1.505.257a16.525 16.525 0 0 0 4.369 7.709 16.525 16.525 0 0 0 7.709 4.37l.258-1.505ZM13.022 6.212a1 1 0 0 0 1.97-.338l-1.97.338Z" clip-rule="evenodd"/></svg>

assets/icons/plusSmall_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 6a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2h-4v4a1 1 0 1 1-2 0v-4H7a1 1 0 1 1 0-2h4V7a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>

assets/icons/poop_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4c0-1.012.894-2.187 2.237-1.846a5.002 5.002 0 0 1 3.218 7.119 4.001 4.001 0 0 1 2.345 4.976A3.501 3.501 0 0 1 18.5 21h-13a3.5 3.5 0 0 1-1.3-6.75 4 4 0 0 1 2.052-4.848A4 4 0 0 1 10 4h2.001Zm-4.187 7.009A2 2 0 0 0 6 13c0 .366.098.706.271 1H12a1 1 0 1 1 0 2H5.5a1.5 1.5 0 0 0 0 3h13a1.5 1.5 0 1 0 0-3H17a1 1 0 1 1 0-2h.729c.173-.294.271-.634.271-1a2 2 0 0 0-2-2h-2a1 1 0 1 1 0-2h1.236a3.002 3.002 0 0 0-1.243-4.832A2 2 0 0 1 12 6h-2a2 2 0 0 0-1.728 3.009H9a1 1 0 0 1 0 2H7.813Z" clip-rule="evenodd"/></svg>

assets/icons/rose_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M10.75 2.469a2 2 0 0 1 2.5 0l1.42 1.136 1.44-.576A1.378 1.378 0 0 1 18 4.309V8a6.002 6.002 0 0 1-5 5.917v1.69a6.12 6.12 0 0 1 4.224-1.606A1.796 1.796 0 0 1 19 15.857a6.143 6.143 0 0 1-6 6.141V22h-2v-.002a6.143 6.143 0 0 1-6-6.222A1.796 1.796 0 0 1 6.858 14 6.12 6.12 0 0 1 11 15.607v-1.69A6.002 6.002 0 0 1 6 8V4.308c0-.975.985-1.641 1.89-1.28l1.44.577 1.42-1.136ZM7.004 16.003a4.143 4.143 0 0 1 3.995 3.994 4.143 4.143 0 0 1-3.995-3.994Zm9.994 0a4.143 4.143 0 0 1-3.995 3.994 4.143 4.143 0 0 1 3.995-3.994ZM13.42 5.167 12 4.03l-1.42 1.136a2 2 0 0 1-1.992.295L8 5.227V8a4 4 0 0 0 8 0V5.227l-.588.235a2 2 0 0 1-1.992-.295Z" clip-rule="evenodd"/></svg>

assets/icons/settingsSliderVertical_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7 3a1 1 0 0 1 1 1v1.126a4 4 0 0 1 0 7.748V20a1 1 0 1 1-2 0v-7.126a4 4 0 0 1 0-7.748V4a1 1 0 0 1 1-1Zm10 0a1 1 0 0 1 1 1v9.126a4 4 0 1 1-2 0V4a1 1 0 0 1 1-1ZM7 7a2 2 0 1 0 0 4 2 2 0 1 0 0-4Zm10 8a2 2 0 1 0 0 4 2 2 0 1 0 0-4Z" clip-rule="evenodd"/></svg>

assets/icons/shaka_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2.275 4.312A1 1 0 0 1 3 4h.55a4 4 0 0 1 3.656 2.375l.616 1.388.47-.47 1.001-1a2.414 2.414 0 0 1 3.948.807 2.41 2.41 0 0 1 2.5 1.5 2.41 2.41 0 0 1 2.234 1.01l.805-.804c.95-.95 2.49-.95 3.44 0 .93.93.958 2.439.035 3.395-1.228 1.271-3.406 3.497-5.078 5.035a94.045 94.045 0 0 1-2.82 2.467c-2.481 2.1-6.156 1.748-8.264-.684L3.87 16.452a6 6 0 0 1-1.458-3.614l-.41-7.785a1 1 0 0 1 .274-.741Zm14.022 6.977-1.004 1.004-.007.006-.493.494a.414.414 0 1 1-.586-.586l1.5-1.5a.414.414 0 0 1 .59.582Zm-4.18 1.595a2.414 2.414 0 0 0 4.09 1.323l1.5-1.5.01-.01 2.477-2.477c.169-.169.443-.169.612 0a.42.42 0 0 1 .01.591c-1.228 1.272-3.37 3.46-4.993 4.953a92.183 92.183 0 0 1-2.757 2.412c-1.62 1.371-4.05 1.162-5.461-.467L5.38 15.143a4 4 0 0 1-.972-2.41l-.35-6.668a2 2 0 0 1 1.32 1.123l1.208 2.718a1 1 0 0 0 1.42.456A2.421 2.421 0 0 0 10.26 11.4c.118.294.296.57.534.807.373.373.839.599 1.323.677Zm.676-2.091 1-1a.414.414 0 1 0-.586-.586l-1 1a.414.414 0 1 0 .586.586Zm-2-2 .5-.5a.414.414 0 1 0-.586-.586l-1 1a.414.414 0 0 0 .586.586l.5-.5Z" clip-rule="evenodd"/></svg>

assets/icons/timesLarge_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4.293 4.293a1 1 0 0 1 1.414 0L12 10.586l6.293-6.293a1 1 0 1 1 1.414 1.414L13.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414L12 13.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L10.586 12 4.293 5.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>

assets/icons/ufo_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7.03 6.443c-.889.17-1.707.385-2.431.638-.966.338-1.82.764-2.45 1.286C1.523 8.884 1 9.6 1 10.5c0 1.321 1.098 2.24 2.203 2.821.854.45 1.928.817 3.142 1.093l-3.19 5.052a1 1 0 1 0 1.69 1.068l5.767-9.13a8.502 8.502 0 0 1 2.776 0l5.766 9.13a1 1 0 0 0 1.692-1.068l-3.191-5.052c1.214-.276 2.288-.644 3.142-1.093 1.105-.58 2.203-1.5 2.203-2.821 0-.9-.524-1.616-1.148-2.133-.631-.522-1.485-.948-2.45-1.286a17.147 17.147 0 0 0-2.433-.638 5 5 0 0 0-9.938 0Zm2.095-.301A28.736 28.736 0 0 1 12 6c.992 0 1.957.049 2.875.142a3.001 3.001 0 0 0-5.75 0Zm7.389 6.466c1.403-.262 2.55-.635 3.352-1.057C20.87 11.023 21 10.611 21 10.5c0-.066-.036-.271-.423-.592-.381-.315-.993-.644-1.836-.939C17.063 8.382 14.68 8 12 8c-2.68 0-5.063.382-6.74.969-.844.295-1.456.624-1.837.94-.387.32-.423.525-.423.591 0 .11.13.523 1.134 1.051.802.422 1.95.795 3.352 1.057l1.441-2.282a1.952 1.952 0 0 1 1.328-.89 10.51 10.51 0 0 1 3.49 0c.57.094 1.042.437 1.328.89l1.44 2.282Z" clip-rule="evenodd"/></svg>

assets/icons/zap_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="m9.368 4-4 8h2.944a1.5 1.5 0 0 1 1.427 1.963l-1.65 5.087L19.374 9h-3.49a1.5 1.5 0 0 1-1.287-2.272L16.234 4H9.368Zm-1.65-1.17A1.5 1.5 0 0 1 9.058 2h8.058a1.5 1.5 0 0 1 1.286 2.272L16.766 7h3.92c1.38 0 2.028 1.703.998 2.62L8.042 21.77c-1.142 1.018-2.896-.127-2.424-1.583L7.624 14H4.56a1.5 1.5 0 0 1-1.342-2.17l4.5-9Z" clip-rule="evenodd"/></svg>

bskyembed/src/screens/post.tsx

@@ -17,9 +17,6 @@ const agent = new BskyAgent({
 })
 
 const uri = `at://${window.location.pathname.slice('/embed/'.length)}`
-
-console.log(uri)
-
 if (!uri) {
   throw new Error('No uri in path')
 }

bskyweb/.gitignore

@@ -3,16 +3,24 @@ test-coverage.out
 
 # Don't check in the binary.
 /bskyweb
+/embedr
 
 # Don't accidentally commit JS-generated code
 static/js/*.js
 static/js/*.map
 static/js/*.js.LICENSE.txt
+static/js/empty.txt
+static/media/*.png
+static/media/empty.txt
 templates/scripts.html
 templates/*-embed.html
 static/embed/*.html
 static/embed/assets/*.js
 static/embed/assets/*.css
+embedr-static/post-*.js
+embedr-static/post-*.css
+embedr-static/index-*.js
+embedr-static/polyfills-*.js
 
 # Don't ignore this file
 !.gitignore

bskyweb/Makefile

@@ -14,6 +14,7 @@ help: ## Print info about all commands
 .PHONY: build
 build: ## Build all executables
 	go build ./cmd/bskyweb
+	go build ./cmd/embedr
 
 .PHONY: test
 test: ## Run all tests
@@ -43,3 +44,7 @@ check: ## Compile everything, checking syntax (does not output binaries)
 .PHONY: run-dev-bskyweb
 run-dev-bskyweb: .env ## Runs 'bskyweb' for local dev
 	GOLOG_LOG_LEVEL=info go run ./cmd/bskyweb serve
+
+.PHONY: run-dev-embedr
+run-dev-embedr: .env ## Runs 'embedr' for local dev
+	GOLOG_LOG_LEVEL=info go run ./cmd/embedr serve

bskyweb/README.embed.md

@@ -0,0 +1,52 @@
+
+## oEmbed
+
+<https://oembed.com/>
+
+* URL scheme: `https://bsky.app/profile/*/post/*`
+* API endpoint: `https://embed.bsky.app/oembed`
+
+Request params:
+
+- `url` (required): support both AT-URI and bsky.app URL
+- `maxwidth` (optional): [220..550], 325 is default
+- `maxheight` (not supported!)
+- `format` (optional): only `json` supported
+
+Response format:
+
+- `type` (required): "rich"
+- `version` (required): "1.0"
+- `author_name` (optional): display name
+- `author_url` (optional): profile URL
+- `provider_name` (optional): "Bluesky Social"
+- `provider_url` (optional): "https://bsky.app"
+- `cache_age` (optional, integer seconds): 86400 (24 hours) (?)
+- `width` (required): ?
+- `height` (required): ?
+
+Not used:
+
+- title (optional): A text title, describing the resource.
+- thumbnail_url (optional): A URL to a thumbnail image representing the resource. The thumbnail must respect any maxwidth and maxheight parameters. If this parameter is present, thumbnail_width and thumbnail_height must also be present.
+- thumbnail_width (optional): The width of the optional thumbnail. If this parameter is present, thumbnail_url and thumbnail_height must also be present.
+- thumbnail_height (optional): The height of the optional thumbnail. If this parameter is present, thumbnail_url and thumbnail_width must also be present.
+
+Only `json` is supported; `xml` is a 501.
+
+```
+<link rel="alternate" type="application/json+oembed" href="https://embed.bsky.app/oembed?format=json&url=https://bsky.app/profile/bnewbold.net/post/abc123" />
+```
+
+
+## iframe URL
+
+`https://embed.bsky.app/embed/<did>/app.bsky.feed.post/<rkey>`
+`https://embed.bsky.app/static/embed.js`
+
+```
+<blockquote class="bluesky-post" data-lang="en" data-align="center">
+  <p lang="en" dir="ltr">{{ post-text }}</p>
+  &mdash; US Department of the Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw">May 5, 2014</a>
+</blockquote>
+```

bskyweb/cmd/bskyweb/server.go

@@ -158,7 +158,7 @@ func serve(cctx *cli.Context) error {
 
 			// Cache javascript and images files for 1 week, which works because
 			// they're always versioned (e.g. /static/js/main.64c14927.js)
-			if strings.HasPrefix(path, "/static/js/") || strings.HasPrefix(path, "/static/images/") {
+			if strings.HasPrefix(path, "/static/js/") || strings.HasPrefix(path, "/static/images/") || strings.HasPrefix(path, "/static/media/") {
 				maxAge = 7 * (60 * 60 * 24) // 1 week
 			}
 
@@ -170,6 +170,9 @@ func serve(cctx *cli.Context) error {
 	// home
 	e.GET("/", server.WebHome)
 
+	// download
+	e.GET("/download", server.Download)
+
 	// generic routes
 	e.GET("/hashtag/:tag", server.WebGeneric)
 	e.GET("/search", server.WebGeneric)
@@ -187,6 +190,7 @@ func serve(cctx *cli.Context) error {
 	e.GET("/settings/saved-feeds", server.WebGeneric)
 	e.GET("/settings/threads", server.WebGeneric)
 	e.GET("/settings/external-embeds", server.WebGeneric)
+	e.GET("/settings/accessibility", server.WebGeneric)
 	e.GET("/sys/debug", server.WebGeneric)
 	e.GET("/sys/debug-mod", server.WebGeneric)
 	e.GET("/sys/log", server.WebGeneric)
@@ -196,6 +200,8 @@ func serve(cctx *cli.Context) error {
 	e.GET("/support/community-guidelines", server.WebGeneric)
 	e.GET("/support/copyright", server.WebGeneric)
 	e.GET("/intent/compose", server.WebGeneric)
+	e.GET("/messages", server.WebGeneric)
+	e.GET("/messages/:conversation", server.WebGeneric)
 
 	// profile endpoints; only first populates info
 	e.GET("/profile/:handleOrDID", server.WebProfile)
@@ -271,6 +277,20 @@ func (srv *Server) errorHandler(err error, c echo.Context) {
 	c.Render(code, "error.html", data)
 }
 
+// Handler for redirecting to the download page.
+func (srv *Server) Download(c echo.Context) error {
+	ua := c.Request().UserAgent()
+	if strings.Contains(ua, "Android") {
+		return c.Redirect(http.StatusFound, "https://play.google.com/store/apps/details?id=xyz.blueskyweb.app")
+	}
+
+	if strings.Contains(ua, "iPhone") || strings.Contains(ua, "iPad") || strings.Contains(ua, "iPod") {
+		return c.Redirect(http.StatusFound, "https://apps.apple.com/tr/app/bluesky-social/id6444370199")
+	}
+
+	return c.Redirect(http.StatusFound, "/")
+}
+
 // handler for endpoint that have no specific server-side handling
 func (srv *Server) WebGeneric(c echo.Context) error {
 	data := pongo2.Context{}

bskyweb/cmd/embedr/.gitignore

@@ -0,0 +1 @@
+/bskyweb

bskyweb/cmd/embedr/handlers.go

@@ -0,0 +1,213 @@
+package main
+
+import (
+	"context"
+	"errors"
+	"fmt"
+	"net/http"
+	"net/url"
+	"strconv"
+	"strings"
+
+	appbsky "github.com/bluesky-social/indigo/api/bsky"
+	"github.com/bluesky-social/indigo/atproto/syntax"
+
+	"github.com/labstack/echo/v4"
+)
+
+var ErrPostNotFound = errors.New("post not found")
+var ErrPostNotPublic = errors.New("post is not publicly accessible")
+
+func (srv *Server) getBlueskyPost(ctx context.Context, did syntax.DID, rkey syntax.RecordKey) (*appbsky.FeedDefs_PostView, error) {
+
+	// fetch the post post (with extra context)
+	uri := fmt.Sprintf("at://%s/app.bsky.feed.post/%s", did, rkey)
+	tpv, err := appbsky.FeedGetPostThread(ctx, srv.xrpcc, 1, 0, uri)
+	if err != nil {
+		log.Warnf("failed to fetch post: %s\t%v", uri, err)
+		// TODO: detect 404, specifically?
+		return nil, ErrPostNotFound
+	}
+
+	if tpv.Thread.FeedDefs_BlockedPost != nil {
+		return nil, ErrPostNotPublic
+	} else if tpv.Thread.FeedDefs_ThreadViewPost.Post == nil {
+		return nil, ErrPostNotFound
+	}
+
+	postView := tpv.Thread.FeedDefs_ThreadViewPost.Post
+	for _, label := range postView.Author.Labels {
+		if label.Src == postView.Author.Did && label.Val == "!no-unauthenticated" {
+			return nil, ErrPostNotPublic
+		}
+	}
+	return postView, nil
+}
+
+func (srv *Server) WebHome(c echo.Context) error {
+	return c.Render(http.StatusOK, "home.html", nil)
+}
+
+type OEmbedResponse struct {
+	Type         string `json:"type"`
+	Version      string `json:"version"`
+	AuthorName   string `json:"author_name,omitempty"`
+	AuthorURL    string `json:"author_url,omitempty"`
+	ProviderName string `json:"provider_url,omitempty"`
+	CacheAge     int    `json:"cache_age,omitempty"`
+	Width        *int   `json:"width"`
+	Height       *int   `json:"height"`
+	HTML         string `json:"html,omitempty"`
+}
+
+func (srv *Server) parseBlueskyURL(ctx context.Context, raw string) (*syntax.ATURI, error) {
+
+	if raw == "" {
+		return nil, fmt.Errorf("empty url")
+	}
+
+	// first try simple AT-URI
+	uri, err := syntax.ParseATURI(raw)
+	if nil == err {
+		return &uri, nil
+	}
+
+	// then try bsky.app post URL
+	u, err := url.Parse(raw)
+	if err != nil {
+		return nil, err
+	}
+	if u.Hostname() != "bsky.app" {
+		return nil, fmt.Errorf("only bsky.app URLs currently supported")
+	}
+	pathParts := strings.Split(u.Path, "/") // NOTE: pathParts[0] will be empty string
+	if len(pathParts) != 5 || pathParts[1] != "profile" || pathParts[3] != "post" {
+		return nil, fmt.Errorf("only bsky.app post URLs currently supported")
+	}
+	atid, err := syntax.ParseAtIdentifier(pathParts[2])
+	if err != nil {
+		return nil, err
+	}
+	rkey, err := syntax.ParseRecordKey(pathParts[4])
+	if err != nil {
+		return nil, err
+	}
+	var did syntax.DID
+	if atid.IsHandle() {
+		ident, err := srv.dir.Lookup(ctx, *atid)
+		if err != nil {
+			return nil, err
+		}
+		did = ident.DID
+	} else {
+		did, err = atid.AsDID()
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	// TODO: don't really need to re-parse here, if we had test coverage
+	aturi, err := syntax.ParseATURI(fmt.Sprintf("at://%s/app.bsky.feed.post/%s", did, rkey))
+	if err != nil {
+		return nil, err
+	} else {
+		return &aturi, nil
+	}
+}
+
+func (srv *Server) WebOEmbed(c echo.Context) error {
+	formatParam := c.QueryParam("format")
+	if formatParam != "" && formatParam != "json" {
+		return c.String(http.StatusNotImplemented, "Unsupported oEmbed format: "+formatParam)
+	}
+
+	// TODO: do we actually do something with width?
+	width := 600
+	maxWidthParam := c.QueryParam("maxwidth")
+	if maxWidthParam != "" {
+		maxWidthInt, err := strconv.Atoi(maxWidthParam)
+		if err != nil {
+			return c.String(http.StatusBadRequest, "Invalid maxwidth (expected integer)")
+		}
+		if maxWidthInt < 220 {
+			width = 220
+		} else if maxWidthInt > 600 {
+			width = 600
+		} else {
+			width = maxWidthInt
+		}
+	}
+	// NOTE: maxheight ignored
+
+	aturi, err := srv.parseBlueskyURL(c.Request().Context(), c.QueryParam("url"))
+	if err != nil {
+		return c.String(http.StatusBadRequest, fmt.Sprintf("Expected 'url' to be bsky.app URL or AT-URI: %v", err))
+	}
+	if aturi.Collection() != syntax.NSID("app.bsky.feed.post") {
+		return c.String(http.StatusNotImplemented, "Only posts (app.bsky.feed.post records) can be embedded currently")
+	}
+	did, err := aturi.Authority().AsDID()
+	if err != nil {
+		return err
+	}
+
+	post, err := srv.getBlueskyPost(c.Request().Context(), did, aturi.RecordKey())
+	if err == ErrPostNotFound {
+		return c.String(http.StatusNotFound, fmt.Sprintf("%v", err))
+	} else if err == ErrPostNotPublic {
+		return c.String(http.StatusForbidden, fmt.Sprintf("%v", err))
+	} else if err != nil {
+		return c.String(http.StatusInternalServerError, fmt.Sprintf("%v", err))
+	}
+
+	html, err := srv.postEmbedHTML(post)
+	if err != nil {
+		return c.String(http.StatusInternalServerError, fmt.Sprintf("%v", err))
+	}
+	data := OEmbedResponse{
+		Type:         "rich",
+		Version:      "1.0",
+		AuthorName:   "@" + post.Author.Handle,
+		AuthorURL:    fmt.Sprintf("https://bsky.app/profile/%s", post.Author.Handle),
+		ProviderName: "Bluesky Social",
+		CacheAge:     86400,
+		Width:        &width,
+		Height:       nil,
+		HTML:         html,
+	}
+	if post.Author.DisplayName != nil {
+		data.AuthorName = fmt.Sprintf("%s (@%s)", *post.Author.DisplayName, post.Author.Handle)
+	}
+	return c.JSON(http.StatusOK, data)
+}
+
+func (srv *Server) WebPostEmbed(c echo.Context) error {
+
+	// sanity check arguments. don't 4xx, just let app handle if not expected format
+	rkeyParam := c.Param("rkey")
+	rkey, err := syntax.ParseRecordKey(rkeyParam)
+	if err != nil {
+		return c.String(http.StatusBadRequest, fmt.Sprintf("Invalid RecordKey: %v", err))
+	}
+	didParam := c.Param("did")
+	did, err := syntax.ParseDID(didParam)
+	if err != nil {
+		return c.String(http.StatusBadRequest, fmt.Sprintf("Invalid DID: %v", err))
+	}
+	_ = rkey
+	_ = did
+
+	// NOTE: this request was't really necessary; the JS will do the same fetch
+	/*
+		postView, err := srv.getBlueskyPost(ctx, did, rkey)
+		if err == ErrPostNotFound {
+			return c.String(http.StatusNotFound, fmt.Sprintf("%v", err))
+		} else if err == ErrPostNotPublic {
+			return c.String(http.StatusForbidden, fmt.Sprintf("%v", err))
+		} else if err != nil {
+			return c.String(http.StatusInternalServerError, fmt.Sprintf("%v", err))
+		}
+	*/
+
+	return c.Render(http.StatusOK, "postEmbed.html", nil)
+}

bskyweb/cmd/embedr/main.go

@@ -0,0 +1,60 @@
+package main
+
+import (
+	"os"
+
+	_ "github.com/joho/godotenv/autoload"
+
+	logging "github.com/ipfs/go-log"
+	"github.com/urfave/cli/v2"
+)
+
+var log = logging.Logger("embedr")
+
+func init() {
+	logging.SetAllLoggers(logging.LevelDebug)
+	//logging.SetAllLoggers(logging.LevelWarn)
+}
+
+func main() {
+	run(os.Args)
+}
+
+func run(args []string) {
+
+	app := cli.App{
+		Name:  "embedr",
+		Usage: "web server for embed.bsky.app post embeds",
+	}
+
+	app.Commands = []*cli.Command{
+		&cli.Command{
+			Name:   "serve",
+			Usage:  "run the server",
+			Action: serve,
+			Flags: []cli.Flag{
+				&cli.StringFlag{
+					Name:    "appview-host",
+					Usage:   "method, hostname, and port of PDS instance",
+					Value:   "https://public.api.bsky.app",
+					EnvVars: []string{"ATP_APPVIEW_HOST"},
+				},
+				&cli.StringFlag{
+					Name:     "http-address",
+					Usage:    "Specify the local IP/port to bind to",
+					Required: false,
+					Value:    ":8100",
+					EnvVars:  []string{"HTTP_ADDRESS"},
+				},
+				&cli.BoolFlag{
+					Name:     "debug",
+					Usage:    "Enable debug mode",
+					Value:    false,
+					Required: false,
+					EnvVars:  []string{"DEBUG"},
+				},
+			},
+		},
+	}
+	app.RunAndExitOnError()
+}

bskyweb/cmd/embedr/render.go

@@ -0,0 +1,16 @@
+package main
+
+import (
+	"html/template"
+	"io"
+
+	"github.com/labstack/echo/v4"
+)
+
+type Template struct {
+	templates *template.Template
+}
+
+func (t *Template) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
+	return t.templates.ExecuteTemplate(w, name, data)
+}

bskyweb/cmd/embedr/server.go

@@ -0,0 +1,236 @@
+package main
+
+import (
+	"context"
+	"errors"
+	"fmt"
+	"html/template"
+	"io/fs"
+	"net/http"
+	"os"
+	"os/signal"
+	"strings"
+	"syscall"
+	"time"
+
+	"github.com/bluesky-social/indigo/atproto/identity"
+	"github.com/bluesky-social/indigo/util/cliutil"
+	"github.com/bluesky-social/indigo/xrpc"
+	"github.com/bluesky-social/social-app/bskyweb"
+
+	"github.com/klauspost/compress/gzhttp"
+	"github.com/klauspost/compress/gzip"
+	"github.com/labstack/echo/v4"
+	"github.com/labstack/echo/v4/middleware"
+	"github.com/urfave/cli/v2"
+)
+
+type Server struct {
+	echo  *echo.Echo
+	httpd *http.Server
+	xrpcc *xrpc.Client
+	dir   identity.Directory
+}
+
+func serve(cctx *cli.Context) error {
+	debug := cctx.Bool("debug")
+	httpAddress := cctx.String("http-address")
+	appviewHost := cctx.String("appview-host")
+
+	// Echo
+	e := echo.New()
+
+	// create a new session (no auth)
+	xrpcc := &xrpc.Client{
+		Client: cliutil.NewHttpClient(),
+		Host:   appviewHost,
+	}
+
+	// httpd
+	var (
+		httpTimeout          = 2 * time.Minute
+		httpMaxHeaderBytes   = 2 * (1024 * 1024)
+		gzipMinSizeBytes     = 1024 * 2
+		gzipCompressionLevel = gzip.BestSpeed
+		gzipExceptMIMETypes  = []string{"image/png"}
+	)
+
+	// Wrap the server handler in a gzip handler to compress larger responses.
+	gzipHandler, err := gzhttp.NewWrapper(
+		gzhttp.MinSize(gzipMinSizeBytes),
+		gzhttp.CompressionLevel(gzipCompressionLevel),
+		gzhttp.ExceptContentTypes(gzipExceptMIMETypes),
+	)
+	if err != nil {
+		return err
+	}
+
+	//
+	// server
+	//
+	server := &Server{
+		echo:  e,
+		xrpcc: xrpcc,
+		dir:   identity.DefaultDirectory(),
+	}
+
+	// Create the HTTP server.
+	server.httpd = &http.Server{
+		Handler:        gzipHandler(server),
+		Addr:           httpAddress,
+		WriteTimeout:   httpTimeout,
+		ReadTimeout:    httpTimeout,
+		MaxHeaderBytes: httpMaxHeaderBytes,
+	}
+
+	e.HideBanner = true
+
+	tmpl := &Template{
+		templates: template.Must(template.ParseFS(bskyweb.EmbedrTemplateFS, "embedr-templates/*.html")),
+	}
+	e.Renderer = tmpl
+	e.HTTPErrorHandler = server.errorHandler
+
+	e.IPExtractor = echo.ExtractIPFromXFFHeader()
+
+	// SECURITY: Do not modify without due consideration.
+	e.Use(middleware.SecureWithConfig(middleware.SecureConfig{
+		ContentTypeNosniff: "nosniff",
+		// diable XFrameOptions; we're embedding here!
+		HSTSMaxAge: 31536000, // 365 days
+		// TODO:
+		// ContentSecurityPolicy
+		// XSSProtection
+	}))
+	e.Use(middleware.LoggerWithConfig(middleware.LoggerConfig{
+		// Don't log requests for static content.
+		Skipper: func(c echo.Context) bool {
+			return strings.HasPrefix(c.Request().URL.Path, "/static")
+		},
+	}))
+	e.Use(middleware.RateLimiterWithConfig(middleware.RateLimiterConfig{
+		Skipper: middleware.DefaultSkipper,
+		Store: middleware.NewRateLimiterMemoryStoreWithConfig(
+			middleware.RateLimiterMemoryStoreConfig{
+				Rate:      10,              // requests per second
+				Burst:     30,              // allow bursts
+				ExpiresIn: 3 * time.Minute, // garbage collect entries older than 3 minutes
+			},
+		),
+		IdentifierExtractor: func(ctx echo.Context) (string, error) {
+			id := ctx.RealIP()
+			return id, nil
+		},
+		DenyHandler: func(c echo.Context, identifier string, err error) error {
+			return c.String(http.StatusTooManyRequests, "Your request has been rate limited. Please try again later. Contact support@bsky.app if you believe this was a mistake.\n")
+		},
+	}))
+
+	// redirect trailing slash to non-trailing slash.
+	// all of our current endpoints have no trailing slash.
+	e.Use(middleware.RemoveTrailingSlashWithConfig(middleware.TrailingSlashConfig{
+		RedirectCode: http.StatusFound,
+	}))
+
+	//
+	// configure routes
+	//
+	// static files
+	staticHandler := http.FileServer(func() http.FileSystem {
+		if debug {
+			log.Debugf("serving static file from the local file system")
+			return http.FS(os.DirFS("embedr-static"))
+		}
+		fsys, err := fs.Sub(bskyweb.EmbedrStaticFS, "embedr-static")
+		if err != nil {
+			log.Fatal(err)
+		}
+		return http.FS(fsys)
+	}())
+
+	e.GET("/robots.txt", echo.WrapHandler(staticHandler))
+	e.GET("/ips-v4", echo.WrapHandler(staticHandler))
+	e.GET("/ips-v6", echo.WrapHandler(staticHandler))
+	e.GET("/.well-known/*", echo.WrapHandler(staticHandler))
+	e.GET("/security.txt", func(c echo.Context) error {
+		return c.Redirect(http.StatusMovedPermanently, "/.well-known/security.txt")
+	})
+	e.GET("/static/*", echo.WrapHandler(http.StripPrefix("/static/", staticHandler)), func(next echo.HandlerFunc) echo.HandlerFunc {
+		return func(c echo.Context) error {
+			path := c.Request().URL.Path
+			maxAge := 1 * (60 * 60) // default is 1 hour
+
+			// Cache javascript and images files for 1 week, which works because
+			// they're always versioned (e.g. /static/js/main.64c14927.js)
+			if strings.HasPrefix(path, "/static/js/") || strings.HasPrefix(path, "/static/images/") {
+				maxAge = 7 * (60 * 60 * 24) // 1 week
+			}
+
+			c.Response().Header().Set("Cache-Control", fmt.Sprintf("public, max-age=%d", maxAge))
+			return next(c)
+		}
+	})
+
+	// actual routes
+	e.GET("/", server.WebHome)
+	e.GET("/iframe-resize.js", echo.WrapHandler(staticHandler))
+	e.GET("/embed.js", echo.WrapHandler(staticHandler))
+	e.GET("/oembed", server.WebOEmbed)
+	e.GET("/embed/:did/app.bsky.feed.post/:rkey", server.WebPostEmbed)
+
+	// Start the server.
+	log.Infof("starting server address=%s", httpAddress)
+	go func() {
+		if err := server.httpd.ListenAndServe(); err != nil {
+			if !errors.Is(err, http.ErrServerClosed) {
+				log.Errorf("HTTP server shutting down unexpectedly: %s", err)
+			}
+		}
+	}()
+
+	// Wait for a signal to exit.
+	log.Info("registering OS exit signal handler")
+	quit := make(chan struct{})
+	exitSignals := make(chan os.Signal, 1)
+	signal.Notify(exitSignals, syscall.SIGINT, syscall.SIGTERM)
+	go func() {
+		sig := <-exitSignals
+		log.Infof("received OS exit signal: %s", sig)
+
+		// Shut down the HTTP server.
+		if err := server.Shutdown(); err != nil {
+			log.Errorf("HTTP server shutdown error: %s", err)
+		}
+
+		// Trigger the return that causes an exit.
+		close(quit)
+	}()
+	<-quit
+	log.Infof("graceful shutdown complete")
+	return nil
+}
+
+func (srv *Server) ServeHTTP(rw http.ResponseWriter, req *http.Request) {
+	srv.echo.ServeHTTP(rw, req)
+}
+
+func (srv *Server) Shutdown() error {
+	log.Info("shutting down")
+
+	ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+	defer cancel()
+
+	return srv.httpd.Shutdown(ctx)
+}
+
+func (srv *Server) errorHandler(err error, c echo.Context) {
+	code := http.StatusInternalServerError
+	if he, ok := err.(*echo.HTTPError); ok {
+		code = he.Code
+	}
+	c.Logger().Error(err)
+	data := map[string]interface{}{
+		"statusCode": code,
+	}
+	c.Render(code, "error.html", data)
+}

bskyweb/cmd/embedr/snippet.go

@@ -0,0 +1,79 @@
+package main
+
+import (
+	"bytes"
+	"fmt"
+	"html/template"
+
+	appbsky "github.com/bluesky-social/indigo/api/bsky"
+	"github.com/bluesky-social/indigo/atproto/syntax"
+)
+
+func (srv *Server) postEmbedHTML(postView *appbsky.FeedDefs_PostView) (string, error) {
+	// ensure that there isn't an injection from the URI
+	aturi, err := syntax.ParseATURI(postView.Uri)
+	if err != nil {
+		log.Error("bad AT-URI in reponse", "aturi", aturi, "err", err)
+		return "", err
+	}
+
+	post, ok := postView.Record.Val.(*appbsky.FeedPost)
+	if !ok {
+		log.Error("bad post record value", "err", err)
+		return "", err
+	}
+
+	const tpl = `<blockquote class="bluesky-embed" data-bluesky-uri="{{ .PostURI }}" data-bluesky-cid="{{ .PostCID }}"><p{{ if .PostLang }} lang="{{ .PostLang }}"{{ end }}>{{ .PostText }}</p>&mdash; <a href="{{ .ProfileURL }}">{{ .PostAuthor }}</a> <a href="{{ .PostURL }}">{{ .PostIndexedAt }}</a></blockquote><script async src="{{ .WidgetURL }}" charset="utf-8"></script>`
+
+	t, err := template.New("snippet").Parse(tpl)
+	if err != nil {
+		log.Error("template parse error", "err", err)
+		return "", err
+	}
+
+	sortAt := postView.IndexedAt
+	createdAt, err := syntax.ParseDatetime(post.CreatedAt)
+	if nil == err && createdAt.String() < sortAt {
+		sortAt = createdAt.String()
+	}
+
+	var lang string
+	if len(post.Langs) > 0 {
+		lang = post.Langs[0]
+	}
+	var authorName string
+	if postView.Author.DisplayName != nil {
+		authorName = fmt.Sprintf("%s (@%s)", *postView.Author.DisplayName, postView.Author.Handle)
+	} else {
+		authorName = fmt.Sprintf("@%s", postView.Author.Handle)
+	}
+	data := struct {
+		PostURI       template.URL
+		PostCID       string
+		PostLang      string
+		PostText      string
+		PostAuthor    string
+		PostIndexedAt string
+		ProfileURL    template.URL
+		PostURL       template.URL
+		WidgetURL     template.URL
+	}{
+		PostURI:       template.URL(postView.Uri),
+		PostCID:       postView.Cid,
+		PostLang:      lang,
+		PostText:      post.Text,
+		PostAuthor:    authorName,
+		PostIndexedAt: sortAt,
+		ProfileURL:    template.URL(fmt.Sprintf("https://bsky.app/profile/%s?ref_src=embed", aturi.Authority())),
+		PostURL:       template.URL(fmt.Sprintf("https://bsky.app/profile/%s/post/%s?ref_src=embed", aturi.Authority(), aturi.RecordKey())),
+		WidgetURL:     template.URL("https://embed.bsky.app/static/embed.js"),
+	}
+
+	var buf bytes.Buffer
+	err = t.Execute(&buf, data)
+	if err != nil {
+		log.Error("template parse error", "err", err)
+		return "", err
+	}
+	return buf.String(), nil
+}

bskyweb/embedr-static/.well-known/security.txt

@@ -0,0 +1,4 @@
+Contact: mailto:security@bsky.app
+Preferred-Languages: en
+Canonical: https://bsky.app/.well-known/security.txt
+Acknowledgements: https://github.com/bluesky-social/atproto/blob/main/CONTRIBUTORS.md

bskyweb/embedr-static/embed.js

@@ -0,0 +1 @@
+/* embed javascript widget will go here */

bskyweb/embedr-static/iframe-resize.js

@@ -0,0 +1 @@
+/* script to resize embed ifame would go here? */

bskyweb/embedr-static/ips-v4

@@ -0,0 +1,30 @@
+13.59.225.103/32
+3.18.47.21/32
+18.191.104.94/32
+3.129.134.255/32
+3.129.237.113/32
+3.138.56.230/32
+44.218.10.163/32
+54.89.116.251/32
+44.217.166.202/32
+54.208.221.149/32
+54.166.110.54/32
+54.208.146.65/32
+3.129.234.15/32
+3.138.168.48/32
+3.23.53.192/32
+52.14.89.53/32
+3.18.126.246/32
+3.136.69.4/32
+3.22.137.152/32
+3.132.247.113/32
+3.141.186.104/32
+18.222.43.214/32
+3.14.35.197/32
+3.23.182.70/32
+18.224.144.69/32
+3.129.98.29/32
+3.130.134.20/32
+3.17.197.213/32
+18.223.234.21/32
+3.20.248.177/32

bskyweb/embedr-static/robots.txt

@@ -0,0 +1,9 @@
+# Hello Friends!
+# If you are considering bulk or automated crawling, you may want to look in
+# to our protocol (API), including a firehose of updates. See: https://atproto.com/
+
+# By default, may crawl anything on this domain. HTTP 429 ("backoff") status
+# codes are used for rate-limiting. Up to a handful concurrent requests should
+# be ok.
+User-Agent: *
+Allow: /

bskyweb/embedr-templates/error.html

@@ -0,0 +1 @@
+placeholder!

bskyweb/embedr-templates/home.html

@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<h1>embed.bsky.app homepage</h1>
+	<p>could redirect to bsky.app? or show a "create embed" widget?
+</body>
+</html>

bskyweb/embedr-templates/oembed.html

@@ -0,0 +1 @@
+oembed JSON response will go here

bskyweb/embedr-templates/postEmbed.html

@@ -0,0 +1 @@
+embed post HTML will go here

bskyweb/static.go

@@ -4,3 +4,6 @@ import "embed"
 
 //go:embed static/*
 var StaticFS embed.FS
+
+//go:embed embedr-static/*
+var EmbedrStaticFS embed.FS

bskyweb/templates.go

@@ -4,3 +4,6 @@ import "embed"
 
 //go:embed templates/*
 var TemplateFS embed.FS
+
+//go:embed embedr-templates/*
+var EmbedrTemplateFS embed.FS

bskyweb/templates/post.html

@@ -36,6 +36,8 @@
   <meta name="twitter:label1" content="Posted At">
   <meta name="twitter:value1" content="{{ postView.IndexedAt }}">
   <meta name="article:published_time" content="{{ postView.IndexedAt }}">
+  <meta name="article:published_time" content="{{ postView.IndexedAt }}">
+  <link rel="alternate" type="application/json+oembed" href="https://embed.bsky.app/oembed?format=json&url={{ postView.Uri | urlencode }}" />
 {% endif -%}
 {%- endblock %}
 

docs/build.md

@@ -2,7 +2,8 @@
 
 ## App Build
 
-- Set up your environment [using the react native instructions](https://reactnative.dev/docs/environment-setup).
+- Set up your environment [using the expo instructions](https://docs.expo.dev/guides/local-app-development/).
+  - make sure that the JAVA_HOME points to the zulu-17 directory in your `.zshrc` or `.bashrc` file: `export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home`. DO NOT use another JDK or you will encounter build errors.
 - If you're running macOS, make sure you are running the correct versions of Ruby and Cocoapods:
   - Check if you've installed Cocoapods through `homebrew`. If you have, remove it:
     - `brew info cocoapods`
@@ -14,7 +15,7 @@
     - `rbenv global 2.7.6`
     - Add `eval "$(rbenv init - zsh)"` to your `~/.zshrc`
   - From inside the project directory:
-    - `bundler install`
+    - `bundler install` (this will install Cocoapods)
 - Setup your environment [for e2e testing using detox](https://wix.github.io/Detox/docs/introduction/getting-started):
   - `yarn global add detox-cli`
   - `brew tap wix/brew`
@@ -27,7 +28,7 @@
   - `git clone git@github.com:bluesky-social/atproto.git`
   - `cd atproto`
   - `brew install pnpm`
-  - `brew install jq`
+  - optional: `brew install jq`
   - `pnpm i`
   - `pnpm build`
   - Start the docker daemon (on MacOS this entails starting the Docker Desktop app)
@@ -38,11 +39,22 @@
     - Xcode must be installed for this to run.
       - A simulator must be preconfigured in Xcode settings.
         - if no iOS versions are available, install the iOS runtime at `Xcode > Settings > Platforms`.
+        - if the simulator download keeps failing you can download it from the developer website.
+          - [Apple Developer](https://developer.apple.com/download/all/?q=Simulator%20Runtime)
+          - `xcode-select -s /Applications/Xcode.app`
+          - `xcodebuild -runFirstLaunch`
+          - `xcrun simctl runtime add "~/Downloads/iOS_17.4_Simulator_Runtime.dmg"` (adapt the path to the downloaded file)
       - In addition, ensure Xcode Command Line Tools are installed using `xcode-select --install`.
-    - Pods must be installed:
-      - From the project directory root: `cd ios && pod install`.
     - Expo will require you to configure Xcode Signing. Follow the linked instructions. Error messages in Xcode related to the signing process can be safely ignored when installing on the iOS Simulator; Expo merely requires the profile to exist in order to install the app on the Simulator.
+      - Make sure you do have a certificate: open Xcode > Settings > Accounts > (sign-in) > Manage Certificates > + > Apple Development > Done.
+      - If you still encounter issues, try `rm -rf ios` before trying to build again (`yarn ios`)
   - Android: `yarn android`
+    - Install "Android Studio"
+      - Make sure you have the Android SDK installed (Android Studio > Tools > Android SDK).
+        - In "SDK Platforms": "Android x" (where x is Android's current version).
+        - In "SDK Tools": "Android SDK Build-Tools" and "Android Emulator" are required.
+        - Add `export ANDROID_HOME=/Users/<your_username>/Library/Android/sdk` to your `.zshrc` or `.bashrc` (and restart your terminal).
+      - Setup an emulator (Android Studio > Tools > Device Manager).
   - Web: `yarn web`
 - If you are cloning or forking this repo as an open-source developer, please check the tips below as well
 - Run e2e tests

eslint/use-typed-gates.js

@@ -25,6 +25,7 @@ exports.create = function create(context) {
             "Use useGate() from '#/lib/statsig/statsig' instead of the one on npm.",
         })
       }
+      // TODO: Verify gate() call results aren't stored in variables.
     },
   }
 }

modules/expo-bluesky-gif-view/android/build.gradle

@@ -0,0 +1,98 @@
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+apply plugin: 'maven-publish'
+
+group = 'expo.modules.blueskygifview'
+version = '0.5.0'
+
+buildscript {
+  def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+  if (expoModulesCorePlugin.exists()) {
+    apply from: expoModulesCorePlugin
+    applyKotlinExpoModulesCorePlugin()
+  }
+
+  // Simple helper that allows the root project to override versions declared by this library.
+  ext.safeExtGet = { prop, fallback ->
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+  }
+
+  // Ensures backward compatibility
+  ext.getKotlinVersion = {
+    if (ext.has("kotlinVersion")) {
+      ext.kotlinVersion()
+    } else {
+      ext.safeExtGet("kotlinVersion", "1.8.10")
+    }
+  }
+
+  repositories {
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${getKotlinVersion()}")
+  }
+}
+
+afterEvaluate {
+  publishing {
+    publications {
+      release(MavenPublication) {
+        from components.release
+      }
+    }
+    repositories {
+      maven {
+        url = mavenLocal().url
+      }
+    }
+  }
+}
+
+android {
+  compileSdkVersion safeExtGet("compileSdkVersion", 33)
+
+  def agpVersion = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION
+  if (agpVersion.tokenize('.')[0].toInteger() < 8) {
+    compileOptions {
+      sourceCompatibility JavaVersion.VERSION_11
+      targetCompatibility JavaVersion.VERSION_11
+    }
+
+    kotlinOptions {
+      jvmTarget = JavaVersion.VERSION_11.majorVersion
+    }
+  }
+
+  namespace "expo.modules.blueskygifview"
+  defaultConfig {
+    minSdkVersion safeExtGet("minSdkVersion", 21)
+    targetSdkVersion safeExtGet("targetSdkVersion", 34)
+    versionCode 1
+    versionName "0.5.0"
+  }
+  lintOptions {
+    abortOnError false
+  }
+  publishing {
+    singleVariant("release") {
+      withSourcesJar()
+    }
+  }
+}
+
+repositories {
+  mavenCentral()
+}
+
+dependencies {
+  implementation 'androidx.appcompat:appcompat:1.6.1'
+    def GLIDE_VERSION = "4.13.2"
+
+  implementation project(':expo-modules-core')
+  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${getKotlinVersion()}"
+
+  // Keep glide version up to date with expo-image so that we don't have duplicate deps
+  implementation 'com.github.bumptech.glide:glide:4.13.2'
+}

modules/expo-bluesky-gif-view/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

modules/expo-bluesky-gif-view/android/src/main/java/expo/modules/blueskygifview/AppCompatImageViewExtended.kt

@@ -0,0 +1,37 @@
+package expo.modules.blueskygifview
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.drawable.Animatable
+import androidx.appcompat.widget.AppCompatImageView
+
+class AppCompatImageViewExtended(context: Context, private val parent: GifView): AppCompatImageView(context) {
+  override fun onDraw(canvas: Canvas) {
+    super.onDraw(canvas)
+
+    if (this.drawable is Animatable) {
+      if (!parent.isLoaded) {
+        parent.isLoaded = true
+        parent.firePlayerStateChange()
+      }
+
+      if (!parent.isPlaying) {
+        this.pause()
+      }
+    }
+  }
+
+  fun pause() {
+    val drawable = this.drawable
+    if (drawable is Animatable) {
+      drawable.stop()
+    }
+  }
+
+  fun play() {
+    val drawable = this.drawable
+    if (drawable is Animatable) {
+      drawable.start()
+    }
+  }
+}

modules/expo-bluesky-gif-view/android/src/main/java/expo/modules/blueskygifview/ExpoBlueskyGifViewModule.kt

@@ -0,0 +1,54 @@
+package expo.modules.blueskygifview
+
+import com.bumptech.glide.Glide
+import com.bumptech.glide.load.engine.DiskCacheStrategy
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class ExpoBlueskyGifViewModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("ExpoBlueskyGifView")
+
+    AsyncFunction("prefetchAsync") { sources: List<String> ->
+      val activity = appContext.currentActivity ?: return@AsyncFunction
+      val glide = Glide.with(activity)
+
+      sources.forEach { source ->
+        glide
+          .download(source)
+          .diskCacheStrategy(DiskCacheStrategy.DATA)
+          .submit()
+      }
+    }
+
+    View(GifView::class) {
+      Events(
+        "onPlayerStateChange"
+      )
+
+      Prop("source") { view: GifView, source: String ->
+        view.source = source
+      }
+
+      Prop("placeholderSource") { view: GifView, source: String ->
+        view.placeholderSource = source
+      }
+
+      Prop("autoplay") { view: GifView, autoplay: Boolean ->
+        view.autoplay = autoplay
+      }
+
+      AsyncFunction("playAsync") { view: GifView ->
+        view.play()
+      }
+
+      AsyncFunction("pauseAsync") { view: GifView ->
+        view.pause()
+      }
+
+      AsyncFunction("toggleAsync") { view: GifView ->
+        view.toggle()
+      }
+    }
+  }
+}

modules/expo-bluesky-gif-view/android/src/main/java/expo/modules/blueskygifview/GifView.kt

@@ -0,0 +1,180 @@
+package expo.modules.blueskygifview
+
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.drawable.Animatable
+import android.graphics.drawable.Drawable
+import com.bumptech.glide.Glide
+import com.bumptech.glide.load.engine.DiskCacheStrategy
+import com.bumptech.glide.load.engine.GlideException
+import com.bumptech.glide.request.RequestListener
+import com.bumptech.glide.request.target.Target
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.exception.Exceptions
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class GifView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  // Events
+  private val onPlayerStateChange by EventDispatcher()
+
+  // Glide
+  private val activity = appContext.currentActivity ?: throw Exceptions.MissingActivity()
+  private val glide = Glide.with(activity)
+  val imageView = AppCompatImageViewExtended(context, this)
+  var isPlaying = true
+  var isLoaded = false
+
+  // Requests
+  private var placeholderRequest: Target<Drawable>? = null
+  private var webpRequest: Target<Drawable>? = null
+
+  // Props
+  var placeholderSource: String? = null
+  var source: String? = null
+  var autoplay: Boolean = true
+    set(value) {
+      field = value
+
+      if (value) {
+        this.play()
+      } else {
+        this.pause()
+      }
+    }
+
+
+  //<editor-fold desc="Lifecycle">
+
+  init {
+    this.setBackgroundColor(Color.TRANSPARENT)
+
+    this.imageView.setBackgroundColor(Color.TRANSPARENT)
+    this.imageView.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+
+    this.addView(this.imageView)
+  }
+
+  override fun onAttachedToWindow() {
+    if (this.imageView.drawable == null || this.imageView.drawable !is Animatable) {
+      this.load()
+    } else if (this.isPlaying) {
+      this.imageView.play()
+    }
+    super.onAttachedToWindow()
+  }
+
+  override fun onDetachedFromWindow() {
+    this.imageView.pause()
+    super.onDetachedFromWindow()
+  }
+
+  //</editor-fold>
+
+  //<editor-fold desc="Loading">
+
+  private fun load() {
+    if (placeholderSource == null || source == null) {
+      return
+    }
+
+    this.webpRequest = glide.load(source)
+      .diskCacheStrategy(DiskCacheStrategy.DATA)
+      .skipMemoryCache(false)
+      .listener(object: RequestListener<Drawable> {
+        override fun onResourceReady(
+          resource: Drawable?,
+          model: Any?,
+          target: Target<Drawable>?,
+          dataSource: com.bumptech.glide.load.DataSource?,
+          isFirstResource: Boolean
+        ): Boolean {
+          if (placeholderRequest != null) {
+            glide.clear(placeholderRequest)
+          }
+          return false
+        }
+
+        override fun onLoadFailed(
+          e: GlideException?,
+          model: Any?,
+          target: Target<Drawable>?,
+          isFirstResource: Boolean
+        ): Boolean {
+          return true
+        }
+      })
+      .into(this.imageView)
+
+    if (this.imageView.drawable == null || this.imageView.drawable !is Animatable) {
+      this.placeholderRequest = glide.load(placeholderSource)
+        .diskCacheStrategy(DiskCacheStrategy.DATA)
+        // Let's not bloat the memory cache with placeholders
+        .skipMemoryCache(true)
+        .listener(object: RequestListener<Drawable> {
+          override fun onResourceReady(
+            resource: Drawable?,
+            model: Any?,
+            target: Target<Drawable>?,
+            dataSource: com.bumptech.glide.load.DataSource?,
+            isFirstResource: Boolean
+          ): Boolean {
+            // Incase this request finishes after the webp, let's just not set
+            // the drawable. This shouldn't happen because the request should get cancelled
+            if (imageView.drawable == null) {
+              imageView.setImageDrawable(resource)
+            }
+            return true
+          }
+
+          override fun onLoadFailed(
+            e: GlideException?,
+            model: Any?,
+            target: Target<Drawable>?,
+            isFirstResource: Boolean
+          ): Boolean {
+            return true
+          }
+        })
+        .submit()
+    }
+  }
+
+  //</editor-fold>
+
+  //<editor-fold desc="Controls">
+
+  fun play() {
+    this.imageView.play()
+    this.isPlaying = true
+    this.firePlayerStateChange()
+  }
+
+  fun pause() {
+    this.imageView.pause()
+    this.isPlaying = false
+    this.firePlayerStateChange()
+  }
+
+  fun toggle() {
+    if (this.isPlaying) {
+      this.pause()
+    } else {
+      this.play()
+    }
+  }
+
+  //</editor-fold>
+
+  //<editor-fold desc="Util">
+
+  fun firePlayerStateChange() {
+    onPlayerStateChange(mapOf(
+      "isPlaying" to this.isPlaying,
+      "isLoaded" to this.isLoaded,
+    ))
+  }
+
+  //</editor-fold>
+}

modules/expo-bluesky-gif-view/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["ios", "android", "web"],
+  "ios": {
+    "modules": ["ExpoBlueskyGifViewModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.blueskygifview.ExpoBlueskyGifViewModule"]
+  }
+}

modules/expo-bluesky-gif-view/index.ts

@@ -0,0 +1 @@
+export {GifView} from './src/GifView'

modules/expo-bluesky-gif-view/ios/ExpoBlueskyGifView.podspec

@@ -0,0 +1,23 @@
+Pod::Spec.new do |s|
+  s.name           = 'ExpoBlueskyGifView'
+  s.version        = '1.0.0'
+  s.summary        = 'A simple GIF player for Bluesky'
+  s.description    = 'A simple GIF player for Bluesky'
+  s.author         = ''
+  s.homepage       = 'https://github.com/bluesky-social/social-app'
+  s.platforms      = { :ios => '13.4', :tvos => '13.4' }
+  s.source         = { git: '' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+  s.dependency 'SDWebImage', '~> 5.17.0'
+  s.dependency 'SDWebImageWebPCoder', '~> 0.13.0'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    'SWIFT_COMPILATION_MODE' => 'wholemodule'
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

modules/expo-bluesky-gif-view/ios/ExpoBlueskyGifViewModule.swift

@@ -0,0 +1,47 @@
+import ExpoModulesCore
+import SDWebImage
+import SDWebImageWebPCoder
+
+public class ExpoBlueskyGifViewModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ExpoBlueskyGifView")
+    
+    OnCreate {
+      SDImageCodersManager.shared.addCoder(SDImageGIFCoder.shared)
+    }
+    
+    AsyncFunction("prefetchAsync") { (sources: [URL]) in
+      SDWebImagePrefetcher.shared.prefetchURLs(sources, context: Util.createContext(), progress: nil)
+    }
+
+    View(GifView.self) {
+      Events(
+        "onPlayerStateChange"
+      )
+      
+      Prop("source") { (view: GifView, prop: String) in
+        view.source = prop
+      }
+      
+      Prop("placeholderSource") { (view: GifView, prop: String) in
+        view.placeholderSource = prop
+      }
+      
+      Prop("autoplay") { (view: GifView, prop: Bool) in
+        view.autoplay = prop
+      }
+      
+      AsyncFunction("toggleAsync") { (view: GifView) in
+        view.toggle()
+      }
+      
+      AsyncFunction("playAsync") { (view: GifView) in
+        view.play()
+      }
+      
+      AsyncFunction("pauseAsync") { (view: GifView) in
+        view.pause()
+      }
+    }
+  }
+}

modules/expo-bluesky-gif-view/ios/GifView.swift

@@ -0,0 +1,185 @@
+import ExpoModulesCore
+import SDWebImage
+import SDWebImageWebPCoder
+
+typealias SDWebImageContext = [SDWebImageContextOption: Any]
+
+public class GifView: ExpoView, AVPlayerViewControllerDelegate {
+  // Events
+  private let onPlayerStateChange = EventDispatcher()
+
+  // SDWebImage
+  private let imageView = SDAnimatedImageView(frame: .zero)
+  private let imageManager = SDWebImageManager(
+    cache: SDImageCache.shared,
+    loader: SDImageLoadersManager.shared
+  )
+  private var isPlaying = true
+  private var isLoaded = false
+  
+  // Requests
+  private var webpOperation: SDWebImageCombinedOperation?
+  private var placeholderOperation: SDWebImageCombinedOperation?
+
+  // Props
+  var source: String? = nil
+  var placeholderSource: String? = nil
+  var autoplay = true {
+    didSet {
+      if !autoplay {
+        self.pause()
+      } else {
+        self.play()
+      }
+    }
+  }
+
+  // MARK: - Lifecycle
+
+  public required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    self.clipsToBounds = true
+
+    self.imageView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+    self.imageView.layer.masksToBounds = false
+    self.imageView.backgroundColor = .clear
+    self.imageView.contentMode = .scaleToFill
+
+    // We have to explicitly set this to false. If we don't, every time
+    // the view comes into the viewport, it will start animating again
+    self.imageView.autoPlayAnimatedImage = false
+
+    self.addSubview(self.imageView)
+  }
+
+  public override func willMove(toWindow newWindow: UIWindow?) {
+    if newWindow == nil {
+      // Don't cancel the placeholder operation, because we really want that to complete for
+      // when we scroll back up
+      self.webpOperation?.cancel()
+      self.placeholderOperation?.cancel()
+    } else if self.imageView.image == nil {
+      self.load()
+    }
+  }
+
+  // MARK: - Loading
+
+  private func load() {
+    guard let source = self.source, let placeholderSource = self.placeholderSource else {
+      return
+    }
+
+    self.webpOperation?.cancel()
+    self.placeholderOperation?.cancel()
+
+    // We only need to start an operation for the placeholder if it doesn't exist
+    // in the cache already. Cache key is by default the absolute URL of the image.
+    // See:
+    // https://github.com/SDWebImage/SDWebImage/blob/master/Docs/HowToUse.md#using-asynchronous-image-caching-independently
+    if !SDImageCache.shared.diskImageDataExists(withKey: source),
+       let url = URL(string: placeholderSource)
+    {
+      self.placeholderOperation = imageManager.loadImage(
+        with: url,
+        options: [.retryFailed],
+        context: Util.createContext(),
+        progress: onProgress(_:_:_:),
+        completed: onLoaded(_:_:_:_:_:_:)
+      )
+    }
+
+    if let url = URL(string: source) {
+      self.webpOperation = imageManager.loadImage(
+        with: url,
+        options: [.retryFailed],
+        context: Util.createContext(),
+        progress: onProgress(_:_:_:),
+        completed: onLoaded(_:_:_:_:_:_:)
+      )
+    }
+  }
+
+  private func setImage(_ image: UIImage) {
+    if self.imageView.image == nil || image.sd_isAnimated {
+      self.imageView.image = image
+    }
+
+    if image.sd_isAnimated {
+      self.firePlayerStateChange()
+      if isPlaying {
+        self.imageView.startAnimating()
+      }
+    }
+  }
+
+  // MARK: - Loading blocks
+
+  private func onProgress(_ receivedSize: Int, _ expectedSize: Int, _ imageUrl: URL?) {}
+
+  private func onLoaded(
+    _ image: UIImage?,
+    _ data: Data?,
+    _ error: Error?,
+    _ cacheType: SDImageCacheType,
+    _ finished: Bool,
+    _ imageUrl: URL?
+  ) {
+    guard finished else {
+      return
+    }
+
+    if let placeholderSource = self.placeholderSource,
+       imageUrl?.absoluteString == placeholderSource,
+       self.imageView.image == nil,
+       let image = image
+    {
+      self.setImage(image)
+      return
+    }
+
+    if let source = self.source,
+       imageUrl?.absoluteString == source,
+       // UIImage perf suckssss if the image is animated
+       let data = data,
+       let animatedImage = SDAnimatedImage(data: data)
+    {
+      self.placeholderOperation?.cancel()
+      self.isPlaying = self.autoplay
+      self.isLoaded = true
+      self.setImage(animatedImage)
+      self.firePlayerStateChange()
+    }
+  }
+
+  // MARK: - Playback Controls
+
+  func play() {
+    self.imageView.startAnimating()
+    self.isPlaying = true
+    self.firePlayerStateChange()
+  }
+
+  func pause() {
+    self.imageView.stopAnimating()
+    self.isPlaying = false
+    self.firePlayerStateChange()
+  }
+
+  func toggle() {
+    if self.isPlaying {
+      self.pause()
+    } else {
+      self.play()
+    }
+  }
+
+  // MARK: - Util
+
+  private func firePlayerStateChange() {
+    onPlayerStateChange([
+      "isPlaying": self.isPlaying,
+      "isLoaded": self.isLoaded
+    ])
+  }
+}

modules/expo-bluesky-gif-view/ios/Util.swift

@@ -0,0 +1,17 @@
+import SDWebImage
+
+class Util {
+  static func createContext() -> SDWebImageContext {
+    var context = SDWebImageContext()
+
+    // SDAnimatedImage for some reason has issues whenever loaded from memory. Instead, we
+    // will just use the disk. SDWebImage will manage this cache for us, so we don't need
+    // to worry about clearing it.
+    context[.originalQueryCacheType] = SDImageCacheType.disk.rawValue
+    context[.originalStoreCacheType] = SDImageCacheType.disk.rawValue
+    context[.queryCacheType] = SDImageCacheType.disk.rawValue
+    context[.storeCacheType] = SDImageCacheType.disk.rawValue
+
+    return context
+  }
+}

modules/expo-bluesky-gif-view/src/GifView.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import {requireNativeModule} from 'expo'
+import {requireNativeViewManager} from 'expo-modules-core'
+
+import {GifViewProps} from './GifView.types'
+
+const NativeModule = requireNativeModule('ExpoBlueskyGifView')
+const NativeView: React.ComponentType<
+  GifViewProps & {ref: React.RefObject<any>}
+> = requireNativeViewManager('ExpoBlueskyGifView')
+
+export class GifView extends React.PureComponent<GifViewProps> {
+  // TODO native types, should all be the same as those in this class
+  private nativeRef: React.RefObject<any> = React.createRef()
+
+  constructor(props: GifViewProps | Readonly<GifViewProps>) {
+    super(props)
+  }
+
+  static async prefetchAsync(sources: string[]): Promise<void> {
+    return await NativeModule.prefetchAsync(sources)
+  }
+
+  async playAsync(): Promise<void> {
+    await this.nativeRef.current.playAsync()
+  }
+
+  async pauseAsync(): Promise<void> {
+    await this.nativeRef.current.pauseAsync()
+  }
+
+  async toggleAsync(): Promise<void> {
+    await this.nativeRef.current.toggleAsync()
+  }
+
+  render() {
+    return <NativeView {...this.props} ref={this.nativeRef} />
+  }
+}

modules/expo-bluesky-gif-view/src/GifView.types.ts

@@ -0,0 +1,15 @@
+import {ViewProps} from 'react-native'
+
+export interface GifViewStateChangeEvent {
+  nativeEvent: {
+    isPlaying: boolean
+    isLoaded: boolean
+  }
+}
+
+export interface GifViewProps extends ViewProps {
+  autoplay?: boolean
+  source?: string
+  placeholderSource?: string
+  onPlayerStateChange?: (event: GifViewStateChangeEvent) => void
+}

modules/expo-bluesky-gif-view/src/GifView.web.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react'
+import {StyleSheet} from 'react-native'
+
+import {GifViewProps} from './GifView.types'
+
+export class GifView extends React.PureComponent<GifViewProps> {
+  private readonly videoPlayerRef: React.RefObject<HTMLMediaElement> =
+    React.createRef()
+  private isLoaded = false
+
+  constructor(props: GifViewProps | Readonly<GifViewProps>) {
+    super(props)
+  }
+
+  componentDidUpdate(prevProps: Readonly<GifViewProps>) {
+    if (prevProps.autoplay !== this.props.autoplay) {
+      if (this.props.autoplay) {
+        this.playAsync()
+      } else {
+        this.pauseAsync()
+      }
+    }
+  }
+
+  static async prefetchAsync(_: string[]): Promise<void> {
+    console.warn('prefetchAsync is not supported on web')
+  }
+
+  private firePlayerStateChangeEvent = () => {
+    this.props.onPlayerStateChange?.({
+      nativeEvent: {
+        isPlaying: !this.videoPlayerRef.current?.paused,
+        isLoaded: this.isLoaded,
+      },
+    })
+  }
+
+  private onLoad = () => {
+    // Prevent multiple calls to onLoad because onCanPlay will fire after each loop
+    if (this.isLoaded) {
+      return
+    }
+
+    this.isLoaded = true
+    this.firePlayerStateChangeEvent()
+  }
+
+  async playAsync(): Promise<void> {
+    this.videoPlayerRef.current?.play()
+  }
+
+  async pauseAsync(): Promise<void> {
+    this.videoPlayerRef.current?.pause()
+  }
+
+  async toggleAsync(): Promise<void> {
+    if (this.videoPlayerRef.current?.paused) {
+      await this.playAsync()
+    } else {
+      await this.pauseAsync()
+    }
+  }
+
+  render() {
+    return (
+      <video
+        src={this.props.source}
+        autoPlay={this.props.autoplay ? 'autoplay' : undefined}
+        preload={this.props.autoplay ? 'auto' : undefined}
+        playsInline={true}
+        loop="loop"
+        muted="muted"
+        style={StyleSheet.flatten(this.props.style)}
+        onCanPlay={this.onLoad}
+        onPlay={this.firePlayerStateChangeEvent}
+        onPause={this.firePlayerStateChangeEvent}
+        aria-label={this.props.accessibilityLabel}
+        ref={this.videoPlayerRef}
+      />
+    )
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsky.app",
-  "version": "1.77.0",
+  "version": "1.80.0",
   "private": true,
   "engines": {
     "node": ">=18"
@@ -15,12 +15,12 @@
     "web": "expo start --web",
     "use-build-number": "./scripts/useBuildNumberEnv.sh",
     "use-build-number-with-bump": "./scripts/useBuildNumberEnvWithBump.sh",
-    "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/",
+    "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/ && cp -v ./web-build/static/media/*.png ./bskyweb/static/media/",
     "build-all": "yarn intl:build && yarn use-build-number-with-bump eas build --platform all",
     "build-ios": "yarn use-build-number-with-bump eas build -p ios",
     "build-android": "yarn use-build-number-with-bump eas build -p android",
     "build": "yarn use-build-number-with-bump eas build",
-    "build-embed": "cd bskyembed && yarn build && cd .. && node ./scripts/post-embed-build.js",
+    "build-embed": "cd bskyembed && yarn build && yarn build-snippet && cd .. && node ./scripts/post-embed-build.js",
     "start": "expo start --dev-client",
     "start:prod": "expo start --dev-client --no-dev --minify",
     "clean-cache": "rm -rf node_modules/.cache/babel-loader/*",
@@ -50,10 +50,11 @@
     "open-analyzer": "EXPO_PUBLIC_OPEN_ANALYZER=1 yarn build-web"
   },
   "dependencies": {
-    "@atproto/api": "^0.12.2",
+    "@atproto-labs/api": "^0.12.8-clipclops.0",
+    "@atproto/api": "^0.12.5",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
-    "@discord/bottom-sheet": "https://github.com/bluesky-social/react-native-bottom-sheet.git#discord-fork-4.6.1",
+    "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
     "@emoji-mart/react": "^1.1.1",
     "@expo/html-elements": "^0.4.2",
     "@expo/webpack-config": "^19.0.0",
@@ -97,6 +98,7 @@
     "@tiptap/react": "^2.0.0-beta.220",
     "@tiptap/suggestion": "^2.0.0-beta.220",
     "@types/invariant": "^2.2.37",
+    "@types/lodash.throttle": "^4.1.9",
     "@types/node": "^18.16.2",
     "@zxing/text-encoding": "^0.9.0",
     "array.prototype.findlast": "^1.2.3",
@@ -116,6 +118,7 @@
     "expo-constants": "~15.4.5",
     "expo-dev-client": "~3.3.8",
     "expo-device": "~5.9.3",
+    "expo-file-system": "^16.0.9",
     "expo-haptics": "^12.8.1",
     "expo-image": "~1.10.6",
     "expo-image-manipulator": "^11.8.0",
@@ -147,6 +150,7 @@
     "lodash.samplesize": "^4.2.0",
     "lodash.set": "^4.3.2",
     "lodash.shuffle": "^4.2.0",
+    "lodash.throttle": "^4.1.1",
     "mobx": "^6.6.1",
     "mobx-react-lite": "^3.4.0",
     "mobx-utils": "^6.0.6",
@@ -167,6 +171,7 @@
     "react-native-get-random-values": "~1.11.0",
     "react-native-image-crop-picker": "^0.38.1",
     "react-native-ios-context-menu": "^1.15.3",
+    "react-native-keyboard-controller": "^1.11.7",
     "react-native-pager-view": "6.2.3",
     "react-native-picker-select": "^8.1.0",
     "react-native-progress": "bluesky-social/react-native-progress",
@@ -182,6 +187,7 @@
     "react-native-web-webview": "^1.0.2",
     "react-native-webview": "13.6.4",
     "react-responsive": "^9.0.2",
+    "react-textarea-autosize": "^8.5.3",
     "rn-fetch-blob": "^0.12.0",
     "sentry-expo": "~7.0.1",
     "statsig-react-native-expo": "^4.6.1",
@@ -191,7 +197,7 @@
     "zod": "^3.20.2"
   },
   "devDependencies": {
-    "@atproto/dev-env": "^0.3.4",
+    "@atproto/dev-env": "^0.3.5",
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",

patches/@atproto+lexicon+0.4.0.patch

@@ -0,0 +1,28 @@
+diff --git a/node_modules/@atproto/lexicon/dist/validators/complex.js b/node_modules/@atproto/lexicon/dist/validators/complex.js
+index 32d7798..9d688b7 100644
+--- a/node_modules/@atproto/lexicon/dist/validators/complex.js
++++ b/node_modules/@atproto/lexicon/dist/validators/complex.js
+@@ -113,7 +113,22 @@ function object(lexicons, path, def, value) {
+             if (value[key] === null && nullableProps.has(key)) {
+                 continue;
+             }
+-            const propDef = def.properties[key];
++            const propDef = def.properties[key]
++            if (typeof value[key] === 'undefined' && !requiredProps.has(key)) {
++              // Fast path for non-required undefined props.
++              if (
++                propDef.type === 'integer' ||
++                propDef.type === 'boolean' ||
++                propDef.type === 'string'
++              ) {
++                if (typeof propDef.default === 'undefined') {
++                  continue
++                }
++              } else {
++                // Other types have no defaults.
++                continue
++              }
++            }
+             const propPath = `${path}/${key}`;
+             const validated = (0, util_1.validateOneOf)(lexicons, propPath, propDef, value[key]);
+             const propValue = validated.success ? validated.value : value[key];

plugins/withAndroidStylesAccentColorPlugin.js

@@ -0,0 +1,25 @@
+/**
+ * @file Set accent color to primaryColor from app.config.js.
+ * This way we get a sane default color for spinners, text inputs, etc.
+ */
+
+const {withAndroidStyles, AndroidConfig} = require('@expo/config-plugins')
+
+module.exports = function withAndroidStylesAccentColorPlugin(appConfig) {
+  return withAndroidStyles(appConfig, function (decoratedAppConfig) {
+    try {
+      decoratedAppConfig.modResults = AndroidConfig.Styles.assignStylesValue(
+        decoratedAppConfig.modResults,
+        {
+          add: true,
+          parent: AndroidConfig.Styles.getAppThemeLightNoActionBarGroup(),
+          name: 'colorAccent',
+          value: '@color/colorPrimary',
+        },
+      )
+    } catch (e) {
+      console.error(`withAndroidStylesAccentColorPlugin failed`, e)
+    }
+    return decoratedAppConfig
+  })
+}

scripts/post-embed-build.js

@@ -1,49 +1,65 @@
-// const path = require('node:path')
-// const fs = require('node:fs')
+const path = require('node:path')
+const fs = require('node:fs')
 
-// const projectRoot = path.join(__dirname, '..')
+const projectRoot = path.join(__dirname, '..')
 
-// // copy embed assets to web-build
+// copy embed assets to embedr
 
-// const embedAssetSource = path.join(
-//   projectRoot,
-//   'bskyembed',
-//   'dist',
-//   'static',
-//   'embed',
-//   'assets',
-// )
+const embedAssetSource = path.join(projectRoot, 'bskyembed', 'dist', 'static')
 
-// const embedAssetDest = path.join(
-//   projectRoot,
-//   'web-build',
-//   'static',
-//   'embed',
-//   'assets',
-// )
+const embedAssetDest = path.join(projectRoot, 'bskyweb', 'embedr-static')
 
-// fs.cpSync(embedAssetSource, embedAssetDest, {recursive: true})
+fs.cpSync(embedAssetSource, embedAssetDest, {recursive: true})
 
-// // copy entrypoint(s) to web-build
+const embedEmbedJSSource = path.join(
+  projectRoot,
+  'bskyembed',
+  'dist',
+  'embed.js',
+)
 
-// // additional entrypoints will need more work, but this'll do for now
-// const embedHtmlSource = path.join(
-//   projectRoot,
-//   'bskyembed',
-//   'dist',
-//   'index.html',
-// )
+const embedEmbedJSDest = path.join(
+  projectRoot,
+  'bskyweb',
+  'embedr-static',
+  'embed.js',
+)
 
-// const embedHtmlDest = path.join(
-//   projectRoot,
-//   'web-build',
-//   'static',
-//   'embed',
-//   'post.html',
-// )
+fs.cpSync(embedEmbedJSSource, embedEmbedJSDest)
 
-// fs.copyFileSync(embedHtmlSource, embedHtmlDest)
+// copy entrypoint(s) to embedr
 
-// console.log(`Copied embed assets to web-build`)
+// additional entrypoints will need more work, but this'll do for now
+const embedHomeHtmlSource = path.join(
+  projectRoot,
+  'bskyembed',
+  'dist',
+  'index.html',
+)
 
-console.log('post-embed-build.js - waiting for embedr!')
+const embedHomeHtmlDest = path.join(
+  projectRoot,
+  'bskyweb',
+  'embedr-templates',
+  'home.html',
+)
+
+fs.copyFileSync(embedHomeHtmlSource, embedHomeHtmlDest)
+
+const embedPostHtmlSource = path.join(
+  projectRoot,
+  'bskyembed',
+  'dist',
+  'post.html',
+)
+
+const embedPostHtmlDest = path.join(
+  projectRoot,
+  'bskyweb',
+  'embedr-templates',
+  'postEmbed.html',
+)
+
+fs.copyFileSync(embedPostHtmlSource, embedPostHtmlDest)
+
+console.log(`Copied embed assets to embedr`)

src/App.native.tsx

@@ -4,6 +4,7 @@ import 'view/icons'
 
 import React, {useEffect, useState} from 'react'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
+import {KeyboardProvider} from 'react-native-keyboard-controller'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import {
   initialWindowMetrics,
@@ -16,8 +17,9 @@ import {useQueryClient} from '@tanstack/react-query'
 
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
 import {init as initPersistedState} from '#/state/persisted'
-import * as persisted from '#/state/persisted'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
+import {Provider as ModerationOptsProvider} from '#/state/preferences/moderation-opts'
+import {readLastActiveAccount} from '#/state/session/util'
 import {useIntentHandler} from 'lib/hooks/useIntentHandler'
 import {useNotificationsListener} from 'lib/notifications/notifications'
 import {QueryProvider} from 'lib/react-query'
@@ -64,7 +66,7 @@ function InnerApp() {
       Toast.show(_(msg`Sorry! Your session expired. Please log in again.`))
     })
 
-    const account = persisted.get('session').currentAccount
+    const account = readLastActiveAccount()
     resumeSession(account)
   }, [resumeSession, _])
 
@@ -78,22 +80,25 @@ function InnerApp() {
             <QueryProvider currentDid={currentAccount?.did}>
               <PushNotificationsListener>
                 <StatsigProvider>
+                  {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
                   <LabelDefsProvider>
-                    <LoggedOutViewProvider>
-                      <SelectedFeedProvider>
-                        <UnreadNotifsProvider>
-                          <ThemeProvider theme={theme}>
-                            {/* All components should be within this provider */}
-                            <RootSiblingParent>
-                              <GestureHandlerRootView style={s.h100pct}>
-                                <TestCtrls />
-                                <Shell />
-                              </GestureHandlerRootView>
-                            </RootSiblingParent>
-                          </ThemeProvider>
-                        </UnreadNotifsProvider>
-                      </SelectedFeedProvider>
-                    </LoggedOutViewProvider>
+                    <ModerationOptsProvider>
+                      <LoggedOutViewProvider>
+                        <SelectedFeedProvider>
+                          <UnreadNotifsProvider>
+                            <ThemeProvider theme={theme}>
+                              {/* All components should be within this provider */}
+                              <RootSiblingParent>
+                                <GestureHandlerRootView style={s.h100pct}>
+                                  <TestCtrls />
+                                  <Shell />
+                                </GestureHandlerRootView>
+                              </RootSiblingParent>
+                            </ThemeProvider>
+                          </UnreadNotifsProvider>
+                        </SelectedFeedProvider>
+                      </LoggedOutViewProvider>
+                    </ModerationOptsProvider>
                   </LabelDefsProvider>
                 </StatsigProvider>
               </PushNotificationsListener>
@@ -137,7 +142,9 @@ function App() {
                   <LightboxStateProvider>
                     <I18nProvider>
                       <PortalProvider>
-                        <InnerApp />
+                        <KeyboardProvider>
+                          <InnerApp />
+                        </KeyboardProvider>
                       </PortalProvider>
                     </I18nProvider>
                   </LightboxStateProvider>

src/App.web.tsx

@@ -7,8 +7,9 @@ import {SafeAreaProvider} from 'react-native-safe-area-context'
 
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
 import {init as initPersistedState} from '#/state/persisted'
-import * as persisted from '#/state/persisted'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
+import {Provider as ModerationOptsProvider} from '#/state/preferences/moderation-opts'
+import {readLastActiveAccount} from '#/state/session/util'
 import {useIntentHandler} from 'lib/hooks/useIntentHandler'
 import {QueryProvider} from 'lib/react-query'
 import {ThemeProvider} from 'lib/ThemeContext'
@@ -42,7 +43,7 @@ function InnerApp() {
 
   // init
   useEffect(() => {
-    const account = persisted.get('session').currentAccount
+    const account = readLastActiveAccount()
     resumeSession(account)
   }, [resumeSession])
 
@@ -56,22 +57,25 @@ function InnerApp() {
         key={currentAccount?.did}>
         <QueryProvider currentDid={currentAccount?.did}>
           <StatsigProvider>
+            {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
             <LabelDefsProvider>
-              <LoggedOutViewProvider>
-                <SelectedFeedProvider>
-                  <UnreadNotifsProvider>
-                    <ThemeProvider theme={theme}>
-                      {/* All components should be within this provider */}
-                      <RootSiblingParent>
-                        <SafeAreaProvider>
-                          <Shell />
-                        </SafeAreaProvider>
-                      </RootSiblingParent>
-                      <ToastContainer />
-                    </ThemeProvider>
-                  </UnreadNotifsProvider>
-                </SelectedFeedProvider>
-              </LoggedOutViewProvider>
+              <ModerationOptsProvider>
+                <LoggedOutViewProvider>
+                  <SelectedFeedProvider>
+                    <UnreadNotifsProvider>
+                      <ThemeProvider theme={theme}>
+                        {/* All components should be within this provider */}
+                        <RootSiblingParent>
+                          <SafeAreaProvider>
+                            <Shell />
+                          </SafeAreaProvider>
+                        </RootSiblingParent>
+                        <ToastContainer />
+                      </ThemeProvider>
+                    </UnreadNotifsProvider>
+                  </SelectedFeedProvider>
+                </LoggedOutViewProvider>
+              </ModerationOptsProvider>
             </LabelDefsProvider>
           </StatsigProvider>
         </QueryProvider>

src/Navigation.tsx

@@ -25,6 +25,7 @@ import {
   FeedsTabNavigatorParams,
   FlatNavigatorParams,
   HomeTabNavigatorParams,
+  MessagesTabNavigatorParams,
   MyProfileTabNavigatorParams,
   NotificationsTabNavigatorParams,
   SearchTabNavigatorParams,
@@ -46,6 +47,9 @@ import {init as initAnalytics} from './lib/analytics/analytics'
 import {useWebScrollRestoration} from './lib/hooks/useWebScrollRestoration'
 import {attachRouteToLogEvents, logEvent} from './lib/statsig/statsig'
 import {router} from './routes'
+import {MessagesConversationScreen} from './screens/Messages/Conversation'
+import {MessagesListScreen} from './screens/Messages/List'
+import {MessagesSettingsScreen} from './screens/Messages/Settings'
 import {useModalControls} from './state/modals'
 import {useUnreadNotifications} from './state/queries/notifications/unread'
 import {useSession} from './state/session'
@@ -53,6 +57,7 @@ import {
   setEmailConfirmationRequested,
   shouldRequestEmailConfirmation,
 } from './state/shell/reminders'
+import {AccessibilitySettingsScreen} from './view/screens/AccessibilitySettings'
 import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines'
 import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy'
 import {DebugModScreen} from './view/screens/DebugMod'
@@ -91,6 +96,8 @@ const NotificationsTab =
   createNativeStackNavigatorWithAuth<NotificationsTabNavigatorParams>()
 const MyProfileTab =
   createNativeStackNavigatorWithAuth<MyProfileTabNavigatorParams>()
+const MessagesTab =
+  createNativeStackNavigatorWithAuth<MessagesTabNavigatorParams>()
 const Flat = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
 const Tab = createBottomTabNavigator<BottomTabNavigatorParams>()
 
@@ -276,11 +283,29 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
           requireAuth: true,
         }}
       />
+      <Stack.Screen
+        name="AccessibilitySettings"
+        getComponent={() => AccessibilitySettingsScreen}
+        options={{
+          title: title(msg`Accessibility Settings`),
+          requireAuth: true,
+        }}
+      />
       <Stack.Screen
         name="Hashtag"
         getComponent={() => HashtagScreen}
         options={{title: title(msg`Hashtag`)}}
       />
+      <Stack.Screen
+        name="MessagesConversation"
+        getComponent={() => MessagesConversationScreen}
+        options={{title: title(msg`Chat`), requireAuth: true}}
+      />
+      <Stack.Screen
+        name="MessagesSettings"
+        getComponent={() => MessagesSettingsScreen}
+        options={{title: title(msg`Messaging settings`), requireAuth: true}}
+      />
     </>
   )
 }
@@ -314,6 +339,10 @@ function TabsNavigator() {
         name="MyProfileTab"
         getComponent={() => MyProfileTabNavigator}
       />
+      <Tab.Screen
+        name="MessagesTab"
+        getComponent={() => MessagesTabNavigator}
+      />
     </Tab.Navigator>
   )
 }
@@ -420,6 +449,28 @@ function MyProfileTabNavigator() {
   )
 }
 
+function MessagesTabNavigator() {
+  const pal = usePalette('default')
+  return (
+    <MessagesTab.Navigator
+      screenOptions={{
+        animation: isAndroid ? 'none' : undefined,
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true,
+        headerShown: false,
+        animationDuration: 250,
+        contentStyle: pal.view,
+      }}>
+      <MessagesTab.Screen
+        name="MessagesList"
+        getComponent={() => MessagesListScreen}
+        options={{requireAuth: true}}
+      />
+      {commonScreens(MessagesTab as typeof HomeTab)}
+    </MessagesTab.Navigator>
+  )
+}
+
 /**
  * The FlatNavigator is used by Web to represent the routes
  * in a single ("flat") stack.
@@ -460,6 +511,11 @@ const FlatNavigator = () => {
         getComponent={() => NotificationsScreen}
         options={{title: title(msg`Notifications`), requireAuth: true}}
       />
+      <Flat.Screen
+        name="MessagesList"
+        getComponent={() => MessagesListScreen}
+        options={{title: title(msg`Messages`), requireAuth: true}}
+      />
       {commonScreens(Flat as typeof HomeTab, numUnread)}
     </Flat.Navigator>
   )
@@ -513,6 +569,9 @@ const LINKING = {
       if (name === 'Home') {
         return buildStateObject('HomeTab', 'Home', params)
       }
+      if (name === 'Messages') {
+        return buildStateObject('MessagesTab', 'MessagesList', params)
+      }
       // if the path is something else, like a post, profile, or even settings, we need to initialize the home tab as pre-existing state otherwise the back button will not work
       return buildStateObject('HomeTab', name, params, [
         {

src/components/AppLanguageDropdown.tsx

@@ -1,16 +1,19 @@
 import React from 'react'
 import {View} from 'react-native'
 import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
+import {useQueryClient} from '@tanstack/react-query'
 
 import {sanitizeAppLanguageSetting} from '#/locale/helpers'
 import {APP_LANGUAGES} from '#/locale/languages'
 import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
+import {resetPostsFeedQueries} from '#/state/queries/post-feed'
 import {atoms as a, useTheme} from '#/alf'
 import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
 
 export function AppLanguageDropdown() {
   const t = useTheme()
 
+  const queryClient = useQueryClient()
   const langPrefs = useLanguagePrefs()
   const setLangPrefs = useLanguagePrefsApi()
   const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage)
@@ -21,8 +24,13 @@ export function AppLanguageDropdown() {
       if (sanitizedLang !== value) {
         setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value))
       }
+      setLangPrefs.setPrimaryLanguage(value)
+      setLangPrefs.setContentLanguage(value)
+
+      // reset feeds to refetch content
+      resetPostsFeedQueries(queryClient)
     },
-    [sanitizedLang, setLangPrefs],
+    [sanitizedLang, setLangPrefs, queryClient],
   )
 
   return (

src/components/AppLanguageDropdown.web.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import {View} from 'react-native'
+import {useQueryClient} from '@tanstack/react-query'
 
 import {sanitizeAppLanguageSetting} from '#/locale/helpers'
 import {APP_LANGUAGES} from '#/locale/languages'
 import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
+import {resetPostsFeedQueries} from '#/state/queries/post-feed'
 import {atoms as a, useTheme} from '#/alf'
 import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
 import {Text} from '#/components/Typography'
@@ -11,6 +13,7 @@ import {Text} from '#/components/Typography'
 export function AppLanguageDropdown() {
   const t = useTheme()
 
+  const queryClient = useQueryClient()
   const langPrefs = useLanguagePrefs()
   const setLangPrefs = useLanguagePrefsApi()
 
@@ -24,32 +27,51 @@ export function AppLanguageDropdown() {
       if (sanitizedLang !== value) {
         setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value))
       }
+      setLangPrefs.setPrimaryLanguage(value)
+      setLangPrefs.setContentLanguage(value)
+
+      // reset feeds to refetch content
+      resetPostsFeedQueries(queryClient)
     },
-    [sanitizedLang, setLangPrefs],
+    [sanitizedLang, setLangPrefs, queryClient],
   )
 
   return (
-    <View style={[a.flex_row, a.gap_sm, a.align_center, a.flex_shrink]}>
-      <Text aria-hidden={true} style={t.atoms.text_contrast_medium}>
-        {APP_LANGUAGES.find(l => l.code2 === sanitizedLang)?.name}
-      </Text>
-      <ChevronDown fill={t.atoms.text.color} size="xs" style={a.flex_shrink} />
+    <View
+      style={[
+        // We don't have hitSlop here to increase the tap region,
+        // alternative is negative margins.
+        {height: 32, marginVertical: -((32 - 14) / 2)},
+      ]}>
+      <View
+        style={[
+          a.flex_row,
+          a.gap_sm,
+          a.align_center,
+          a.flex_shrink,
+          a.h_full,
+          t.atoms.bg,
+        ]}>
+        <Text aria-hidden={true} style={t.atoms.text_contrast_medium}>
+          {APP_LANGUAGES.find(l => l.code2 === sanitizedLang)?.name}
+        </Text>
+        <ChevronDown fill={t.atoms.text.color} size="xs" style={a.flex_0} />
+      </View>
 
       <select
         value={sanitizedLang}
         onChange={onChangeAppLanguage}
         style={{
+          fontSize: a.text_sm.fontSize,
+          letterSpacing: a.text_sm.letterSpacing,
           cursor: 'pointer',
-          MozAppearance: 'none',
-          WebkitAppearance: 'none',
-          appearance: 'none',
           position: 'absolute',
           inset: 0,
-          width: '100%',
-          color: 'transparent',
-          background: 'transparent',
-          border: 0,
-          padding: 0,
+          opacity: 0,
+          color: t.atoms.text.color,
+          background: t.atoms.bg.backgroundColor,
+          padding: 4,
+          maxWidth: '100%',
         }}>
         {APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => (
           <option key={l.code2} value={l.code2}>

src/components/Dialog/index.tsx

@@ -4,6 +4,8 @@ import Animated, {useAnimatedStyle} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import BottomSheet, {
   BottomSheetBackdropProps,
+  BottomSheetFlatList,
+  BottomSheetFlatListMethods,
   BottomSheetScrollView,
   BottomSheetScrollViewMethods,
   BottomSheetTextInput,
@@ -11,10 +13,10 @@ import BottomSheet, {
   useBottomSheet,
   WINDOW_HEIGHT,
 } from '@discord/bottom-sheet/src'
+import {BottomSheetFlatListProps} from '@discord/bottom-sheet/src/components/bottomSheetScrollable/types'
 
 import {logger} from '#/logger'
 import {useDialogStateControlContext} from '#/state/dialogs'
-import {isNative} from 'platform/detection'
 import {atoms as a, flatten, useTheme} from '#/alf'
 import {Context} from '#/components/Dialog/context'
 import {
@@ -150,6 +152,12 @@ export function Outer({
     [open, close],
   )
 
+  React.useEffect(() => {
+    return () => {
+      setDialogIsOpen(control.id, false)
+    }
+  }, [control.id, setDialogIsOpen])
+
   const context = React.useMemo(() => ({close}), [close])
 
   return (
@@ -238,7 +246,7 @@ export const ScrollableInner = React.forwardRef<
         },
         flatten(style),
       ]}
-      contentContainerStyle={isNative ? a.pb_4xl : undefined}
+      contentContainerStyle={a.pb_4xl}
       ref={ref}>
       {children}
       <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
@@ -246,6 +254,34 @@ export const ScrollableInner = React.forwardRef<
   )
 })
 
+export const InnerFlatList = React.forwardRef<
+  BottomSheetFlatListMethods,
+  BottomSheetFlatListProps<any>
+>(function InnerFlatList({style, contentContainerStyle, ...props}, ref) {
+  const insets = useSafeAreaInsets()
+  return (
+    <BottomSheetFlatList
+      keyboardShouldPersistTaps="handled"
+      contentContainerStyle={[a.pb_4xl, flatten(contentContainerStyle)]}
+      ListFooterComponent={
+        <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
+      }
+      ref={ref}
+      {...props}
+      style={[
+        a.flex_1,
+        a.p_xl,
+        a.pt_0,
+        a.h_full,
+        {
+          marginTop: 40,
+        },
+        flatten(style),
+      ]}
+    />
+  )
+})
+
 export function Handle() {
   const t = useTheme()
 

src/components/Dialog/index.web.tsx

@@ -1,5 +1,10 @@
 import React, {useImperativeHandle} from 'react'
-import {TouchableWithoutFeedback, View} from 'react-native'
+import {
+  FlatList,
+  FlatListProps,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
 import Animated, {FadeIn, FadeInDown} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -192,6 +197,29 @@ export function Inner({
 
 export const ScrollableInner = Inner
 
+export const InnerFlatList = React.forwardRef<
+  FlatList,
+  FlatListProps<any> & {label: string}
+>(function InnerFlatList({label, style, ...props}, ref) {
+  const {gtMobile} = useBreakpoints()
+  return (
+    <Inner
+      label={label}
+      // @ts-ignore web only -sfn
+      style={{
+        paddingHorizontal: 0,
+        maxHeight: 'calc(-36px + 100vh)',
+        overflow: 'hidden',
+      }}>
+      <FlatList
+        ref={ref}
+        style={[gtMobile ? a.px_2xl : a.px_xl, flatten(style)]}
+        {...props}
+      />
+    </Inner>
+  )
+})
+
 export function Handle() {
   return null
 }

src/components/Error.tsx

@@ -16,10 +16,16 @@ export function Error({
   title,
   message,
   onRetry,
+  onGoBack: onGoBackProp,
+  hideBackButton,
+  sideBorders = true,
 }: {
   title?: string
   message?: string
   onRetry?: () => unknown
+  onGoBack?: () => unknown
+  hideBackButton?: boolean
+  sideBorders?: boolean
 }) {
   const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
@@ -28,6 +34,10 @@ export function Error({
 
   const canGoBack = navigation.canGoBack()
   const onGoBack = React.useCallback(() => {
+    if (onGoBackProp) {
+      onGoBackProp()
+      return
+    }
     if (canGoBack) {
       navigation.goBack()
     } else {
@@ -41,18 +51,19 @@ export function Error({
         navigation.dispatch(StackActions.popToTop())
       }
     }
-  }, [navigation, canGoBack])
+  }, [navigation, canGoBack, onGoBackProp])
 
   return (
     <CenteredView
       style={[
         a.flex_1,
         a.align_center,
-        !gtMobile ? a.justify_between : a.gap_5xl,
+        a.gap_5xl,
+        !gtMobile && a.justify_between,
         t.atoms.border_contrast_low,
         {paddingTop: 175, paddingBottom: 110},
       ]}
-      sideBorders>
+      sideBorders={sideBorders}>
       <View style={[a.w_full, a.align_center, a.gap_lg]}>
         <Text style={[a.font_bold, a.text_3xl]}>{title}</Text>
         <Text
@@ -61,7 +72,7 @@ export function Error({
             a.text_center,
             t.atoms.text_contrast_high,
             {lineHeight: 1.4},
-            gtMobile && {width: 450},
+            gtMobile ? {width: 450} : [a.w_full, a.px_lg],
           ]}>
           {message}
         </Text>
@@ -80,17 +91,19 @@ export function Error({
             </ButtonText>
           </Button>
         )}
-        <Button
-          variant="solid"
-          color={onRetry ? 'secondary' : 'primary'}
-          label={_(msg`Return to previous page`)}
-          onPress={onGoBack}
-          size="large"
-          style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
-          <ButtonText>
-            <Trans>Go Back</Trans>
-          </ButtonText>
-        </Button>
+        {!hideBackButton && (
+          <Button
+            variant="solid"
+            color={onRetry ? 'secondary' : 'primary'}
+            label={_(msg`Return to previous page`)}
+            onPress={onGoBack}
+            size="large"
+            style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
+            <ButtonText>
+              <Trans>Go Back</Trans>
+            </ButtonText>
+          </Button>
+        )}
       </View>
     </CenteredView>
   )