zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Add post embeds (images and external links)

Browse source
This commit is contained in:
Paul Frazee 2022-12-14 15:35:15 -06:00
parent 345ec83f26
commit 4966b2152e
30 changed files with 936 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/build-flags.ts
View file

@ -1,3 +1,2 @@
export const LOGIN_INCLUDE_DEV_SERVERS = true
export const TABS_ENABLED = false
export const IMAGES_ENABLED = false

61
src/lib/download.ts Normal file
View file

@ -0,0 +1,61 @@
import RNFetchBlob from 'rn-fetch-blob'
import ImageResizer from '@bam.tech/react-native-image-resizer'
interface DownloadAndResizeOpts {
uri: string
width: number
height: number
mode: 'contain' | 'cover' | 'stretch'
timeout: number
}
export async function downloadAndResize(opts: DownloadAndResizeOpts) {
let appendExt
try {
const urip = new URL(opts.uri)
const ext = urip.pathname.split('.').pop()
if (ext === 'jpg' || ext === 'jpeg') {
appendExt = 'jpeg'
} else if (ext === 'png') {
appendExt = 'png'
} else {
return
}
} catch (e: any) {
console.error('Invalid URI', opts.uri, e)
return
}
let downloadRes
try {
const downloadResPromise = RNFetchBlob.config({
fileCache: true,
appendExt,
}).fetch('GET', opts.uri)
const to1 = setTimeout(() => downloadResPromise.cancel(), opts.timeout)
downloadRes = await downloadResPromise
clearTimeout(to1)
let localUri = downloadRes.path()
if (!localUri.startsWith('file://')) {
localUri = `file://${localUri}`
}
const resizeRes = await ImageResizer.createResizedImage(
localUri,
opts.width,
opts.height,
'JPEG',
0.7,
undefined,
undefined,
undefined,
{mode: opts.mode},
)
return resizeRes
} finally {
if (downloadRes) {
downloadRes.flush()
}
}
}

16
src/lib/link-meta.ts
View file

@ -22,9 +22,13 @@ export interface LinkMeta {
url: string
title?: string
description?: string
image?: string
}
export async function getLinkMeta(url: string): Promise<LinkMeta> {
export async function getLinkMeta(
url: string,
timeout = 5e3,
): Promise<LinkMeta> {
if (isBskyAppUrl(url)) {
// TODO this could be better
url = convertBskyAppUrlIfNeeded(url)
@ -57,14 +61,20 @@ export async function getLinkMeta(url: string): Promise<LinkMeta> {
}
try {
const httpRes = await fetch(url)
const controller = new AbortController()
const to = setTimeout(() => controller.abort(), timeout || 5e3)
const httpRes = await fetch(url, {
headers: {accept: 'text/html'},
signal: controller.signal,
})
const httpResBody = await httpRes.text()
clearTimeout(to)
const httpResMeta = extractHtmlMeta(httpResBody)
meta.title = httpResMeta.title ? he.decode(httpResMeta.title) : undefined
meta.description = httpResMeta.description
? he.decode(httpResMeta.description)
: undefined
// TODO meta.image = httpResMeta.image
meta.image = httpResMeta.image
} catch (e) {
// failed
console.log(e)

148
src/state/lib/api.ts
View file

@ -5,12 +5,15 @@
// import {ReactNativeStore} from './auth'
import {sessionClient as AtpApi} from '../../third-party/api'
import * as Profile from '../../third-party/api/src/client/types/app/bsky/actor/profile'
import * as Post from '../../third-party/api/src/client/types/app/bsky/feed/post'
import {AtUri} from '../../third-party/uri'
import {APP_BSKY_GRAPH} from '../../third-party/api'
import * as AppBskyEmbedImages from '../../third-party/api/src/client/types/app/bsky/embed/images'
import * as AppBskyEmbedExternal from '../../third-party/api/src/client/types/app/bsky/embed/External'
import {RootStoreModel} from '../models/root-store'
import {extractEntities} from '../../lib/strings'
import {isNetworkError} from '../../lib/errors'
import {downloadAndResize} from '../../lib/download'
import {getLikelyType, LikelyType, getLinkMeta} from '../../lib/link-meta'
const TIMEOUT = 10e3 // 10s
@ -21,12 +24,112 @@ export function doPolyfill() {
export async function post(
store: RootStoreModel,
text: string,
replyTo?: Post.ReplyRef,
replyTo?: string,
images?: string[],
knownHandles?: Set<string>,
onStateChange?: (state: string) => void,
) {
let embed: AppBskyEmbedImages.Main | AppBskyEmbedExternal.Main | undefined
let reply
onStateChange?.('Processing...')
const entities = extractEntities(text, knownHandles)
if (entities) {
for (const ent of entities) {
if (ent.type === 'mention') {
const prof = await store.profiles.getProfile(ent.value)
ent.value = prof.data.did
}
}
}
if (images?.length) {
embed = {
$type: 'app.bsky.embed.images',
images: [],
} as AppBskyEmbedImages.Main
let i = 1
for (const image of images) {
onStateChange?.(`Uploading image #${i++}...`)
const res = await store.api.com.atproto.blob.upload(
image, // this will be special-cased by the fetch monkeypatch in /src/state/lib/api.ts
{encoding: 'image/jpeg'},
)
embed.images.push({
image: {
cid: res.data.cid,
mimeType: 'image/jpeg',
},
alt: '', // TODO supply alt text
})
}
}
if (!embed && entities) {
const link = entities.find(
ent =>
ent.type === 'link' &&
getLikelyType(ent.value || '') === LikelyType.HTML,
)
if (link) {
try {
onStateChange?.(`Fetching link metadata...`)
let thumb
const linkMeta = await getLinkMeta(link.value)
if (linkMeta.image) {
onStateChange?.(`Downloading link thumbnail...`)
const thumbLocal = await downloadAndResize({
uri: linkMeta.image,
width: 250,
height: 250,
mode: 'contain',
timeout: 15e3,
}).catch(() => undefined)
if (thumbLocal) {
onStateChange?.(`Uploading link thumbnail...`)
let encoding
if (thumbLocal.uri.endsWith('.png')) {
encoding = 'image/png'
} else if (
thumbLocal.uri.endsWith('.jpeg') ||
thumbLocal.uri.endsWith('.jpg')
) {
encoding = 'image/jpeg'
} else {
console.error(
'Unexpected image format for thumbnail, skipping',
thumbLocal.uri,
)
}
if (encoding) {
const thumbUploadRes = await store.api.com.atproto.blob.upload(
thumbLocal.uri, // this will be special-cased by the fetch monkeypatch in /src/state/lib/api.ts
{encoding},
)
thumb = {
cid: thumbUploadRes.data.cid,
mimeType: encoding,
}
}
}
}
embed = {
$type: 'app.bsky.embed.external',
external: {
uri: link.value,
title: linkMeta.title || linkMeta.url,
description: linkMeta.description || '',
thumb,
},
} as AppBskyEmbedExternal.Main
} catch (e: any) {
console.error('Failed to fetch link meta', link.value, e)
}
}
}
if (replyTo) {
const replyToUrip = new AtUri(replyTo.uri)
const replyToUrip = new AtUri(replyTo)
const parentPost = await store.api.app.bsky.feed.post.get({
user: replyToUrip.host,
rkey: replyToUrip.rkey,
@ -42,24 +145,29 @@ export async function post(
}
}
}
const entities = extractEntities(text, knownHandles)
if (entities) {
for (const ent of entities) {
if (ent.type === 'mention') {
const prof = await store.profiles.getProfile(ent.value)
ent.value = prof.data.did
}
try {
onStateChange?.(`Posting...`)
return await store.api.app.bsky.feed.post.create(
{did: store.me.did || ''},
{
text,
reply,
embed,
entities,
createdAt: new Date().toISOString(),
},
)
} catch (e: any) {
console.error(`Failed to create post: ${e.toString()}`)
if (isNetworkError(e)) {
throw new Error(
'Post failed to upload. Please check your Internet connection and try again.',
)
} else {
throw e
}
}
return await store.api.app.bsky.feed.post.create(
{did: store.me.did || ''},
{
text,
reply,
entities,
createdAt: new Date().toISOString(),
},
)
}
export async function repost(store: RootStoreModel, uri: string, cid: string) {

2
src/state/models/feed-view.ts
View file

@ -49,6 +49,7 @@ export class FeedItemModel implements GetTimeline.FeedItem {
repostedBy?: ActorRef.WithInfo
trendedBy?: ActorRef.WithInfo
record: Record<string, unknown> = {}
embed?: GetTimeline.FeedItem['embed']
replyCount: number = 0
repostCount: number = 0
upvoteCount: number = 0
@ -78,6 +79,7 @@ export class FeedItemModel implements GetTimeline.FeedItem {
this.repostedBy = v.repostedBy
this.trendedBy = v.trendedBy
this.record = v.record
this.embed = v.embed
this.replyCount = v.replyCount
this.repostCount = v.repostCount
this.upvoteCount = v.upvoteCount

3
src/state/models/post-thread-view.ts
View file

@ -1,6 +1,5 @@
import {makeAutoObservable, runInAction} from 'mobx'
import {AppBskyFeedGetPostThread as GetPostThread} from '../../third-party/api'
import * as Embed from '../../third-party/api/src/client/types/app/bsky/feed/embed'
import * as ActorRef from '../../third-party/api/src/client/types/app/bsky/actor/ref'
import {AtUri} from '../../third-party/uri'
import _omit from 'lodash.omit'
@ -60,7 +59,7 @@ export class PostThreadViewPostModel implements GetPostThread.Post {
declaration: {cid: '', actorType: ''},
}
record: Record<string, unknown> = {}
embed?: Embed.Main = undefined
embed?: GetPostThread.Post['embed'] = undefined
parent?: PostThreadViewPostModel
replyCount: number = 0
replies?: PostThreadViewPostModel[]

11
src/state/models/shell-ui.ts
View file

@ -58,6 +58,13 @@ export class ProfileImageLightbox {
}
}
export class ImageLightbox {
name = 'image'
constructor(public uri: string) {
makeAutoObservable(this)
}
}
export interface ComposerOptsPostRef {
uri: string
cid: string
@ -84,7 +91,7 @@ export class ShellUiModel {
| ServerInputModal
| undefined
isLightboxActive = false
activeLightbox: ProfileImageLightbox | undefined
activeLightbox: ProfileImageLightbox | ImageLightbox | undefined
isComposerActive = false
composerOpts: ComposerOpts | undefined
@ -116,7 +123,7 @@ export class ShellUiModel {
this.activeModal = undefined
}
openLightbox(lightbox: ProfileImageLightbox) {
openLightbox(lightbox: ProfileImageLightbox | ImageLightbox) {
this.isLightboxActive = true
this.activeLightbox = lightbox
}

207
src/third-party/api/index.js vendored
View file

@ -38,7 +38,8 @@ __export(src_exports, {
AppBskyActorSearch: () => search_exports,
AppBskyActorSearchTypeahead: () => searchTypeahead_exports,
AppBskyActorUpdateProfile: () => updateProfile_exports,
AppBskyFeedEmbed: () => embed_exports,
AppBskyEmbedExternal: () => external_exports,
AppBskyEmbedImages: () => images_exports,
AppBskyFeedGetAuthorFeed: () => getAuthorFeed_exports,
AppBskyFeedGetPostThread: () => getPostThread_exports,
AppBskyFeedGetRepostedBy: () => getRepostedBy_exports,
@ -99,6 +100,7 @@ __export(src_exports, {
ComNS: () => ComNS,
ConfirmationRecord: () => ConfirmationRecord,
DeclarationRecord: () => DeclarationRecord,
EmbedNS: () => EmbedNS,
FeedNS: () => FeedNS,
FollowRecord: () => FollowRecord,
GraphNS: () => GraphNS,
@ -5621,69 +5623,25 @@ var schemaDict = {
}
}
},
AppBskyFeedEmbed: {
AppBskyEmbedExternal: {
lexicon: 1,
id: "app.bsky.feed.embed",
description: "Content embedded in other content, such as an image or link embedded in a post.",
id: "app.bsky.embed.external",
description: "An representation of some externally linked content, embedded in another form of content",
defs: {
main: {
type: "object",
description: "A list embeds in a post or document.",
required: ["media"],
required: ["external"],
properties: {
items: {
type: "array",
items: {
type: "union",
refs: [
"lex:app.bsky.feed.embed#media",
"lex:app.bsky.feed.embed#record",
"lex:app.bsky.feed.embed#external"
]
}
}
}
},
media: {
type: "object",
required: ["original"],
properties: {
alt: {
type: "string"
},
thumb: {
type: "image"
},
original: {
type: "blob"
}
}
},
record: {
type: "object",
required: ["type", "author", "record"],
properties: {
type: {
type: "string",
const: "record"
},
author: {
external: {
type: "ref",
ref: "lex:app.bsky.actor.ref#withInfo"
},
record: {
type: "unknown"
ref: "lex:app.bsky.embed.external#external"
}
}
},
external: {
type: "object",
required: ["type", "uri", "title", "description", "imageUri"],
required: ["uri", "title", "description"],
properties: {
type: {
type: "string",
const: "external"
},
uri: {
type: "string"
},
@ -5693,7 +5651,105 @@ var schemaDict = {
description: {
type: "string"
},
imageUri: {
thumb: {
type: "image",
accept: ["image/*"],
maxWidth: 250,
maxHeight: 250,
maxSize: 1e5
}
}
},
presented: {
type: "object",
required: ["external"],
properties: {
external: {
type: "ref",
ref: "lex:app.bsky.embed.external#presentedExternal"
}
}
},
presentedExternal: {
type: "object",
required: ["uri", "title", "description"],
properties: {
uri: {
type: "string"
},
title: {
type: "string"
},
description: {
type: "string"
},
thumb: {
type: "string"
}
}
}
}
},
AppBskyEmbedImages: {
lexicon: 1,
id: "app.bsky.embed.images",
description: "A set of images embedded in some other form of content",
defs: {
main: {
type: "object",
required: ["images"],
properties: {
images: {
type: "array",
items: {
type: "ref",
ref: "lex:app.bsky.embed.images#image"
},
maxLength: 4
}
}
},
image: {
type: "object",
required: ["image", "alt"],
properties: {
image: {
type: "image",
accept: ["image/*"],
maxWidth: 500,
maxHeight: 500,
maxSize: 3e5
},
alt: {
type: "string"
}
}
},
presented: {
type: "object",
required: ["images"],
properties: {
images: {
type: "array",
items: {
type: "ref",
ref: "lex:app.bsky.embed.images#presentedImage"
},
maxLength: 4
}
}
},
presentedImage: {
type: "object",
required: ["thumb", "fullsize", "alt"],
properties: {
thumb: {
type: "string"
},
fullsize: {
type: "string"
},
alt: {
type: "string"
}
}
@ -5781,8 +5837,11 @@ var schemaDict = {
type: "unknown"
},
embed: {
type: "ref",
ref: "lex:app.bsky.feed.embed"
type: "union",
refs: [
"lex:app.bsky.embed.images#presented",
"lex:app.bsky.embed.external#presented"
]
},
replyCount: {
type: "integer"
@ -5889,8 +5948,11 @@ var schemaDict = {
type: "unknown"
},
embed: {
type: "ref",
ref: "lex:app.bsky.feed.embed"
type: "union",
refs: [
"lex:app.bsky.embed.images#presented",
"lex:app.bsky.embed.external#presented"
]
},
parent: {
type: "union",
@ -6123,8 +6185,11 @@ var schemaDict = {
type: "unknown"
},
embed: {
type: "ref",
ref: "lex:app.bsky.feed.embed"
type: "union",
refs: [
"lex:app.bsky.embed.images#presented",
"lex:app.bsky.embed.external#presented"
]
},
replyCount: {
type: "integer"
@ -6268,6 +6333,13 @@ var schemaDict = {
type: "ref",
ref: "lex:app.bsky.feed.post#replyRef"
},
embed: {
type: "union",
refs: [
"lex:app.bsky.embed.images",
"lex:app.bsky.embed.external"
]
},
createdAt: {
type: "datetime"
}
@ -7748,8 +7820,11 @@ var profile_exports = {};
// src/client/types/app/bsky/actor/ref.ts
var ref_exports = {};
// src/client/types/app/bsky/feed/embed.ts
var embed_exports = {};
// src/client/types/app/bsky/embed/external.ts
var external_exports = {};
// src/client/types/app/bsky/embed/images.ts
var images_exports = {};
// src/client/types/app/bsky/feed/post.ts
var post_exports = {};
@ -8015,6 +8090,7 @@ var BskyNS = class {
constructor(service) {
this._service = service;
this.actor = new ActorNS(service);
this.embed = new EmbedNS(service);
this.feed = new FeedNS(service);
this.graph = new GraphNS(service);
this.notification = new NotificationNS(service);
@ -8094,6 +8170,11 @@ var ProfileRecord = class {
);
}
};
var EmbedNS = class {
constructor(service) {
this._service = service;
}
};
var FeedNS = class {
constructor(service) {
this._service = service;
@ -8626,7 +8707,8 @@ var SessionManager = class extends import_events.default {
AppBskyActorSearch,
AppBskyActorSearchTypeahead,
AppBskyActorUpdateProfile,
AppBskyFeedEmbed,
AppBskyEmbedExternal,
AppBskyEmbedImages,
AppBskyFeedGetAuthorFeed,
AppBskyFeedGetPostThread,
AppBskyFeedGetRepostedBy,
@ -8687,6 +8769,7 @@ var SessionManager = class extends import_events.default {
ComNS,
ConfirmationRecord,
DeclarationRecord,
EmbedNS,
FeedNS,
FollowRecord,
GraphNS,

6
src/third-party/api/index.js.map vendored
View file

File diff suppressed because one or more lines are too long

8
src/third-party/api/src/client/index.d.ts vendored
View file

@ -83,7 +83,8 @@ export * as AppBskyActorRef from './types/app/bsky/actor/ref';
export * as AppBskyActorSearch from './types/app/bsky/actor/search';
export * as AppBskyActorSearchTypeahead from './types/app/bsky/actor/searchTypeahead';
export * as AppBskyActorUpdateProfile from './types/app/bsky/actor/updateProfile';
export * as AppBskyFeedEmbed from './types/app/bsky/feed/embed';
export * as AppBskyEmbedExternal from './types/app/bsky/embed/external';
export * as AppBskyEmbedImages from './types/app/bsky/embed/images';
export * as AppBskyFeedGetAuthorFeed from './types/app/bsky/feed/getAuthorFeed';
export * as AppBskyFeedGetPostThread from './types/app/bsky/feed/getPostThread';
export * as AppBskyFeedGetRepostedBy from './types/app/bsky/feed/getRepostedBy';
@ -209,6 +210,7 @@ export declare class AppNS {
export declare class BskyNS {
_service: ServiceClient;
actor: ActorNS;
embed: EmbedNS;
feed: FeedNS;
graph: GraphNS;
notification: NotificationNS;
@ -247,6 +249,10 @@ export declare class ProfileRecord {
}>;
delete(params: Omit<ComAtprotoRepoDeleteRecord.InputSchema, 'collection'>, headers?: Record<string, string>): Promise<void>;
}
export declare class EmbedNS {
_service: ServiceClient;
constructor(service: ServiceClient);
}
export declare class FeedNS {
_service: ServiceClient;
post: PostRecord;

157
src/third-party/api/src/client/lexicons.d.ts vendored
View file

@ -1371,65 +1371,25 @@ export declare const schemaDict: {
};
};
};
AppBskyFeedEmbed: {
AppBskyEmbedExternal: {
lexicon: number;
id: string;
description: string;
defs: {
main: {
type: string;
description: string;
required: string[];
properties: {
items: {
type: string;
items: {
type: string;
refs: string[];
};
};
};
};
media: {
type: string;
required: string[];
properties: {
alt: {
type: string;
};
thumb: {
type: string;
};
original: {
type: string;
};
};
};
record: {
type: string;
required: string[];
properties: {
type: {
type: string;
const: string;
};
author: {
external: {
type: string;
ref: string;
};
record: {
type: string;
};
};
};
external: {
type: string;
required: string[];
properties: {
type: {
type: string;
const: string;
};
uri: {
type: string;
};
@ -1439,7 +1399,105 @@ export declare const schemaDict: {
description: {
type: string;
};
imageUri: {
thumb: {
type: string;
accept: string[];
maxWidth: number;
maxHeight: number;
maxSize: number;
};
};
};
presented: {
type: string;
required: string[];
properties: {
external: {
type: string;
ref: string;
};
};
};
presentedExternal: {
type: string;
required: string[];
properties: {
uri: {
type: string;
};
title: {
type: string;
};
description: {
type: string;
};
thumb: {
type: string;
};
};
};
};
};
AppBskyEmbedImages: {
lexicon: number;
id: string;
description: string;
defs: {
main: {
type: string;
required: string[];
properties: {
images: {
type: string;
items: {
type: string;
ref: string;
};
maxLength: number;
};
};
};
image: {
type: string;
required: string[];
properties: {
image: {
type: string;
accept: string[];
maxWidth: number;
maxHeight: number;
maxSize: number;
};
alt: {
type: string;
};
};
};
presented: {
type: string;
required: string[];
properties: {
images: {
type: string;
items: {
type: string;
ref: string;
};
maxLength: number;
};
};
};
presentedImage: {
type: string;
required: string[];
properties: {
thumb: {
type: string;
};
fullsize: {
type: string;
};
alt: {
type: string;
};
};
@ -1518,7 +1576,7 @@ export declare const schemaDict: {
};
embed: {
type: string;
ref: string;
refs: string[];
};
replyCount: {
type: string;
@ -1611,7 +1669,7 @@ export declare const schemaDict: {
};
embed: {
type: string;
ref: string;
refs: string[];
};
parent: {
type: string;
@ -1829,7 +1887,7 @@ export declare const schemaDict: {
};
embed: {
type: string;
ref: string;
refs: string[];
};
replyCount: {
type: string;
@ -1973,6 +2031,10 @@ export declare const schemaDict: {
type: string;
ref: string;
};
embed: {
type: string;
refs: string[];
};
createdAt: {
type: string;
};
@ -2869,7 +2931,8 @@ export declare const ids: {
AppBskyActorSearch: string;
AppBskyActorSearchTypeahead: string;
AppBskyActorUpdateProfile: string;
AppBskyFeedEmbed: string;
AppBskyEmbedExternal: string;
AppBskyEmbedImages: string;
AppBskyFeedGetAuthorFeed: string;
AppBskyFeedGetPostThread: string;
AppBskyFeedGetRepostedBy: string;

26
src/third-party/api/src/client/types/app/bsky/embed/external.d.ts vendored Normal file
View file

@ -0,0 +1,26 @@
export interface Main {
external: External;
[k: string]: unknown;
}
export interface External {
uri: string;
title: string;
description: string;
thumb?: {
cid: string;
mimeType: string;
[k: string]: unknown;
};
[k: string]: unknown;
}
export interface Presented {
external: PresentedExternal;
[k: string]: unknown;
}
export interface PresentedExternal {
uri: string;
title: string;
description: string;
thumb?: string;
[k: string]: unknown;
}

23
src/third-party/api/src/client/types/app/bsky/embed/images.d.ts vendored Normal file
View file

@ -0,0 +1,23 @@
export interface Main {
images: Image[];
[k: string]: unknown;
}
export interface Image {
image: {
cid: string;
mimeType: string;
[k: string]: unknown;
};
alt: string;
[k: string]: unknown;
}
export interface Presented {
images: PresentedImage[];
[k: string]: unknown;
}
export interface PresentedImage {
thumb: string;
fullsize: string;
alt: string;
[k: string]: unknown;
}

8
src/third-party/api/src/client/types/app/bsky/feed/getAuthorFeed.d.ts vendored
View file

@ -1,6 +1,7 @@
import { Headers } from '@atproto/xrpc';
import * as AppBskyActorRef from '../actor/ref';
import * as AppBskyFeedEmbed from './embed';
import * as AppBskyEmbedImages from '../embed/images';
import * as AppBskyEmbedExternal from '../embed/external';
export interface QueryParams {
author: string;
limit?: number;
@ -28,7 +29,10 @@ export interface FeedItem {
trendedBy?: AppBskyActorRef.WithInfo;
repostedBy?: AppBskyActorRef.WithInfo;
record: {};
embed?: AppBskyFeedEmbed.Main;
embed?: AppBskyEmbedImages.Presented | AppBskyEmbedExternal.Presented | {
$type: string;
[k: string]: unknown;
};
replyCount: number;
repostCount: number;
upvoteCount: number;

8
src/third-party/api/src/client/types/app/bsky/feed/getPostThread.d.ts vendored
View file

@ -1,6 +1,7 @@
import { Headers, XRPCError } from '@atproto/xrpc';
import * as AppBskyActorRef from '../actor/ref';
import * as AppBskyFeedEmbed from './embed';
import * as AppBskyEmbedImages from '../embed/images';
import * as AppBskyEmbedExternal from '../embed/external';
export interface QueryParams {
uri: string;
depth?: number;
@ -30,7 +31,10 @@ export interface Post {
cid: string;
author: AppBskyActorRef.WithInfo;
record: {};
embed?: AppBskyFeedEmbed.Main;
embed?: AppBskyEmbedImages.Presented | AppBskyEmbedExternal.Presented | {
$type: string;
[k: string]: unknown;
};
parent?: Post | NotFoundPost | {
$type: string;
[k: string]: unknown;

8
src/third-party/api/src/client/types/app/bsky/feed/getTimeline.d.ts vendored
View file

@ -1,6 +1,7 @@
import { Headers } from '@atproto/xrpc';
import * as AppBskyActorRef from '../actor/ref';
import * as AppBskyFeedEmbed from './embed';
import * as AppBskyEmbedImages from '../embed/images';
import * as AppBskyEmbedExternal from '../embed/external';
export interface QueryParams {
algorithm?: string;
limit?: number;
@ -28,7 +29,10 @@ export interface FeedItem {
trendedBy?: AppBskyActorRef.WithInfo;
repostedBy?: AppBskyActorRef.WithInfo;
record: {};
embed?: AppBskyFeedEmbed.Main;
embed?: AppBskyEmbedImages.Presented | AppBskyEmbedExternal.Presented | {
$type: string;
[k: string]: unknown;
};
replyCount: number;
repostCount: number;
upvoteCount: number;

6
src/third-party/api/src/client/types/app/bsky/feed/post.d.ts vendored
View file

@ -1,8 +1,14 @@
import * as AppBskyEmbedImages from '../embed/images';
import * as AppBskyEmbedExternal from '../embed/external';
import * as ComAtprotoRepoStrongRef from '../../../com/atproto/repo/strongRef';
export interface Record {
text: string;
entities?: Entity[];
reply?: ReplyRef;
embed?: AppBskyEmbedImages.Main | AppBskyEmbedExternal.Main | {
$type: string;
[k: string]: unknown;
};
createdAt: string;
[k: string]: unknown;
}

2
src/third-party/api/tsconfig.build.tsbuildinfo vendored
View file

File diff suppressed because one or more lines are too long

56
src/view/com/composer/ComposePost.tsx
View file

@ -29,7 +29,6 @@ import {detectLinkables} from '../../../lib/strings'
import {UserLocalPhotosModel} from '../../../state/models/user-local-photos'
import {PhotoCarouselPicker} from './PhotoCarouselPicker'
import {SelectedPhoto} from './SelectedPhoto'
import {IMAGES_ENABLED} from '../../../build-flags'
const MAX_TEXT_LENGTH = 256
const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH
@ -46,6 +45,7 @@ export const ComposePost = observer(function ComposePost({
const store = useStores()
const textInput = useRef<TextInput>(null)
const [isProcessing, setIsProcessing] = useState(false)
const [processingState, setProcessingState] = useState('')
const [error, setError] = useState('')
const [text, setText] = useState('')
const [selectedPhotos, setSelectedPhotos] = useState<string[]>([])
@ -81,6 +81,10 @@ export const ComposePost = observer(function ComposePost({
}
}, [])
const onSelectPhotos = (photos: string[]) => {
setSelectedPhotos(photos)
}
const onChangeText = (newText: string) => {
setText(newText)
@ -109,15 +113,16 @@ export const ComposePost = observer(function ComposePost({
}
setIsProcessing(true)
try {
const replyRef = replyTo
? {uri: replyTo.uri, cid: replyTo.cid}
: undefined
await apilib.post(store, text, replyRef, autocompleteView.knownHandles)
} catch (e: any) {
console.error(`Failed to create post: ${e.toString()}`)
setError(
'Post failed to upload. Please check your Internet connection and try again.',
await apilib.post(
store,
text,
replyTo?.uri,
selectedPhotos,
autocompleteView.knownHandles,
setProcessingState,
)
} catch (e: any) {
setError(e.message)
setIsProcessing(false)
return
}
@ -189,6 +194,11 @@ export const ComposePost = observer(function ComposePost({
</View>
)}
</View>
{isProcessing ? (
<View style={styles.processingLine}>
<Text>{processingState}</Text>
</View>
) : undefined}
{error !== '' && (
<View style={styles.errorLine}>
<View style={styles.errorIcon}>
@ -198,7 +208,7 @@ export const ComposePost = observer(function ComposePost({
size={10}
/>
</View>
<Text style={s.red4}>{error}</Text>
<Text style={[s.red4, s.flex1]}>{error}</Text>
</View>
)}
{replyTo ? (
@ -240,18 +250,15 @@ export const ComposePost = observer(function ComposePost({
</View>
<SelectedPhoto
selectedPhotos={selectedPhotos}
setSelectedPhotos={setSelectedPhotos}
onSelectPhotos={onSelectPhotos}
/>
{IMAGES_ENABLED &&
localPhotos.photos != null &&
text === '' &&
selectedPhotos.length === 0 && (
<PhotoCarouselPicker
selectedPhotos={selectedPhotos}
setSelectedPhotos={setSelectedPhotos}
localPhotos={localPhotos}
/>
)}
{localPhotos.photos != null && selectedPhotos.length < 4 && (
<PhotoCarouselPicker
selectedPhotos={selectedPhotos}
onSelectPhotos={onSelectPhotos}
localPhotos={localPhotos}
/>
)}
<View style={styles.bottomBar}>
<View style={s.flex1} />
<Text style={[s.mr10, {color: progressColor}]}>
@ -322,6 +329,13 @@ const styles = StyleSheet.create({
paddingHorizontal: 20,
paddingVertical: 6,
},
processingLine: {
backgroundColor: colors.gray1,
borderRadius: 6,
paddingHorizontal: 8,
paddingVertical: 6,
marginBottom: 6,
},
errorLine: {
flexDirection: 'row',
backgroundColor: colors.red1,

35
src/view/com/composer/PhotoCarouselPicker.tsx
View file

@ -8,48 +8,54 @@ import {
openCropper,
} from 'react-native-image-crop-picker'
const IMAGE_PARAMS = {
width: 500,
height: 500,
freeStyleCropEnabled: true,
forceJpg: true, // ios only
compressImageQuality: 0.7,
}
export const PhotoCarouselPicker = ({
selectedPhotos,
setSelectedPhotos,
onSelectPhotos,
localPhotos,
}: {
selectedPhotos: string[]
setSelectedPhotos: React.Dispatch<React.SetStateAction<string[]>>
onSelectPhotos: (v: string[]) => void
localPhotos: any
}) => {
const handleOpenCamera = useCallback(() => {
openCamera({
mediaType: 'photo',
cropping: true,
width: 1000,
height: 1000,
...IMAGE_PARAMS,
}).then(
item => {
setSelectedPhotos([item.path, ...selectedPhotos])
onSelectPhotos([item.path, ...selectedPhotos])
},
_err => {
// ignore
},
)
}, [selectedPhotos, setSelectedPhotos])
}, [selectedPhotos, onSelectPhotos])
const handleSelectPhoto = useCallback(
async (uri: string) => {
const img = await openCropper({
mediaType: 'photo',
path: uri,
width: 1000,
height: 1000,
...IMAGE_PARAMS,
})
setSelectedPhotos([img.path, ...selectedPhotos])
onSelectPhotos([img.path, ...selectedPhotos])
},
[selectedPhotos, setSelectedPhotos],
[selectedPhotos, onSelectPhotos],
)
const handleOpenGallery = useCallback(() => {
openPicker({
multiple: true,
maxFiles: 4,
maxFiles: 4 - selectedPhotos.length,
mediaType: 'photo',
}).then(async items => {
const result = []
@ -58,14 +64,13 @@ export const PhotoCarouselPicker = ({
const img = await openCropper({
mediaType: 'photo',
path: image.path,
width: 1000,
height: 1000,
...IMAGE_PARAMS,
})
result.push(img.path)
}
setSelectedPhotos([...result, ...selectedPhotos])
onSelectPhotos([...result, ...selectedPhotos])
})
}, [selectedPhotos, setSelectedPhotos])
}, [selectedPhotos, onSelectPhotos])
return (
<ScrollView

12
src/view/com/composer/SelectedPhoto.tsx
View file

@ -5,10 +5,10 @@ import {colors} from '../../lib/styles'
export const SelectedPhoto = ({
selectedPhotos,
setSelectedPhotos,
onSelectPhotos,
}: {
selectedPhotos: string[]
setSelectedPhotos: React.Dispatch<React.SetStateAction<string[]>>
onSelectPhotos: (v: string[]) => void
}) => {
const imageStyle =
selectedPhotos.length === 1
@ -19,11 +19,9 @@ export const SelectedPhoto = ({
const handleRemovePhoto = useCallback(
item => {
setSelectedPhotos(
selectedPhotos.filter(filterItem => filterItem !== item),
)
onSelectPhotos(selectedPhotos.filter(filterItem => filterItem !== item))
},
[selectedPhotos, setSelectedPhotos],
[selectedPhotos, onSelectPhotos],
)
return selectedPhotos.length !== 0 ? (
@ -57,8 +55,10 @@ const styles = StyleSheet.create({
marginTop: 16,
},
image: {
resizeMode: 'contain',
borderRadius: 8,
margin: 2,
backgroundColor: colors.gray1,
},
image250: {
width: 250,

25
src/view/com/lightbox/Image.tsx Normal file
View file

@ -0,0 +1,25 @@
import React from 'react'
import {Image, StyleSheet, useWindowDimensions, View} from 'react-native'
export function Component({uri}: {uri: string}) {
const winDim = useWindowDimensions()
const top = winDim.height / 2 - (winDim.width - 40) / 2 - 100
console.log(uri)
return (
<View style={[styles.container, {top}]}>
<Image style={styles.image} source={{uri}} />
</View>
)
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
left: 0,
},
image: {
resizeMode: 'contain',
width: '100%',
aspectRatio: 1,
},
})

7
src/view/com/lightbox/Lightbox.tsx
View file

@ -7,6 +7,7 @@ import {useStores} from '../../../state'
import * as models from '../../../state/models/shell-ui'
import * as ProfileImageLightbox from './ProfileImage'
import * as ImageLightbox from './Image'
export const Lightbox = observer(function Lightbox() {
const store = useStores()
@ -26,6 +27,12 @@ export const Lightbox = observer(function Lightbox() {
{...(store.shell.activeLightbox as models.ProfileImageLightbox)}
/>
)
} else if (store.shell.activeLightbox?.name === 'image') {
element = (
<ImageLightbox.Component
{...(store.shell.activeLightbox as models.ImageLightbox)}
/>
)
} else {
return <View />
}

4
src/view/com/post-thread/PostThreadItem.tsx
View file

@ -167,7 +167,7 @@ export const PostThreadItem = observer(function PostThreadItem({
style={[styles.postText, styles.postTextLarge]}
/>
</View>
<PostEmbeds entities={record.entities} style={s.mb10} />
<PostEmbeds embed={item.embed} style={s.mb10} />
{item._isHighlightedPost && hasEngagement ? (
<View style={styles.expandedInfo}>
{item.repostCount ? (
@ -277,7 +277,7 @@ export const PostThreadItem = observer(function PostThreadItem({
style={[styles.postText]}
/>
</View>
<PostEmbeds entities={record.entities} style={{marginBottom: 10}} />
<PostEmbeds embed={item.embed} style={{marginBottom: 10}} />
<PostCtrls
replyCount={item.replyCount}
repostCount={item.repostCount}

2
src/view/com/posts/FeedItem.tsx
View file

@ -198,7 +198,7 @@ export const FeedItem = observer(function FeedItem({
style={styles.postText}
/>
</View>
<PostEmbeds entities={record.entities} style={{marginBottom: 10}} />
<PostEmbeds embed={item.embed} style={{marginBottom: 10}} />
<PostCtrls
replyCount={item.replyCount}
repostCount={item.repostCount}

180
src/view/com/util/PostEmbeds.tsx
View file

@ -1,88 +1,170 @@
import React, {useEffect, useState} from 'react'
import {
ActivityIndicator,
Image,
ImageStyle,
StyleSheet,
StyleProp,
Text,
TouchableWithoutFeedback,
View,
ViewStyle,
} from 'react-native'
import {Entity} from '../../../third-party/api/src/client/types/app/bsky/feed/post'
import {
Record as PostRecord,
Entity,
} from '../../../third-party/api/src/client/types/app/bsky/feed/post'
import * as AppBskyEmbedImages from '../../../third-party/api/src/client/types/app/bsky/embed/images'
import * as AppBskyEmbedExternal from '../../../third-party/api/src/client/types/app/bsky/embed/external'
import {Link} from '../util/Link'
import {LinkMeta, getLikelyType, LikelyType} from '../../../lib/link-meta'
import {colors} from '../../lib/styles'
import {useStores} from '../../../state'
import {AutoSizedImage} from './images/AutoSizedImage'
type Embed =
| AppBskyEmbedImages.Presented
| AppBskyEmbedExternal.Presented
| {$type: string; [k: string]: unknown}
export function PostEmbeds({
entities,
embed,
style,
}: {
entities?: Entity[]
embed?: Embed
style?: StyleProp<ViewStyle>
}) {
const store = useStores()
const [linkMeta, setLinkMeta] = useState<LinkMeta | undefined>(undefined)
const link = entities?.find(
ent =>
ent.type === 'link' && getLikelyType(ent.value || '') === LikelyType.HTML,
)
useEffect(() => {
let aborted = false
store.linkMetas.getLinkMeta(link?.value || '').then(linkMeta => {
if (!aborted) {
setLinkMeta(linkMeta)
if (embed?.$type === 'app.bsky.embed.images#presented') {
const imgEmbed = embed as AppBskyEmbedImages.Presented
if (imgEmbed.images.length > 0) {
const Thumb = ({i, style}: {i: number; style: StyleProp<ImageStyle>}) => (
<AutoSizedImage
style={style}
uri={imgEmbed.images[i].thumb}
fullSizeUri={imgEmbed.images[i].fullsize}
/>
)
if (imgEmbed.images.length === 4) {
return (
<View style={styles.imagesContainer}>
<View style={styles.imagePair}>
<Thumb i={0} style={styles.imagePairItem} />
<View style={styles.imagesWidthSpacer} />
<Thumb i={1} style={styles.imagePairItem} />
</View>
<View style={styles.imagesHeightSpacer} />
<View style={styles.imagePair}>
<Thumb i={2} style={styles.imagePairItem} />
<View style={styles.imagesWidthSpacer} />
<Thumb i={3} style={styles.imagePairItem} />
</View>
</View>
)
} else if (imgEmbed.images.length === 3) {
return (
<View style={styles.imagesContainer}>
<View style={styles.imageWide}>
<Thumb i={0} style={styles.imageWideItem} />
</View>
<View style={styles.imagesHeightSpacer} />
<View style={styles.imagePair}>
<Thumb i={1} style={styles.imagePairItem} />
<View style={styles.imagesWidthSpacer} />
<Thumb i={2} style={styles.imagePairItem} />
</View>
</View>
)
} else if (imgEmbed.images.length === 2) {
return (
<View style={styles.imagesContainer}>
<View style={styles.imagePair}>
<Thumb i={0} style={styles.imagePairItem} />
<View style={styles.imagesWidthSpacer} />
<Thumb i={1} style={styles.imagePairItem} />
</View>
</View>
)
} else {
return (
<View style={styles.imagesContainer}>
<View style={styles.imageBig}>
<Thumb i={0} style={styles.imageBigItem} />
</View>
</View>
)
}
})
return () => {
aborted = true
}
}, [link])
if (!link) {
return <View />
}
return (
<Link style={[styles.outer, style]} href={link.value}>
{linkMeta ? (
<>
<Text numberOfLines={1} style={styles.title}>
{linkMeta.title || linkMeta.url}
if (embed?.$type === 'app.bsky.embed.external#presented') {
const externalEmbed = embed as AppBskyEmbedExternal.Presented
const link = externalEmbed.external
return (
<Link style={[styles.extOuter, style]} href={link.uri}>
{link.thumb ? (
<AutoSizedImage style={style} uri={link.thumb} />
) : undefined}
<Text numberOfLines={1} style={styles.extTitle}>
{link.title || link.uri}
</Text>
<Text numberOfLines={1} style={styles.extUrl}>
{link.uri}
</Text>
{link.description ? (
<Text numberOfLines={2} style={styles.extDescription}>
{link.description}
</Text>
<Text numberOfLines={1} style={styles.url}>
{linkMeta.url}
</Text>
{linkMeta.description ? (
<Text numberOfLines={2} style={styles.description}>
{linkMeta.description}
</Text>
) : undefined}
</>
) : (
<ActivityIndicator />
)}
</Link>
)
) : undefined}
</Link>
)
}
return <View />
}
const styles = StyleSheet.create({
outer: {
imagesContainer: {
marginBottom: 20,
},
imagesWidthSpacer: {
width: 5,
},
imagesHeightSpacer: {
height: 5,
},
imagePair: {
flexDirection: 'row',
},
imagePairItem: {
resizeMode: 'contain',
flex: 1,
borderRadius: 4,
},
imageWide: {},
imageWideItem: {
resizeMode: 'contain',
borderRadius: 4,
},
imageBig: {},
imageBigItem: {
borderRadius: 4,
},
extOuter: {
borderWidth: 1,
borderColor: colors.gray2,
borderRadius: 8,
padding: 10,
},
title: {
extImage: {
// TODO
},
extTitle: {
fontSize: 16,
fontWeight: 'bold',
},
description: {
extDescription: {
marginTop: 4,
fontSize: 15,
},
url: {
extUrl: {
color: colors.gray4,
},
})

112
src/view/com/util/images/AutoSizedImage.tsx Normal file
View file

@ -0,0 +1,112 @@
import React, {useState, useEffect, useMemo} from 'react'
import {
Image,
ImageStyle,
LayoutChangeEvent,
StyleProp,
StyleSheet,
Text,
TouchableWithoutFeedback,
View,
} from 'react-native'
import {ImageLightbox} from '../../../../state/models/shell-ui'
import {useStores} from '../../../../state'
import {colors} from '../../../lib/styles'
const MAX_HEIGHT = 300
interface Dim {
width: number
height: number
}
export function AutoSizedImage({
uri,
fullSizeUri,
style,
}: {
uri: string
fullSizeUri?: string
style: StyleProp<ImageStyle>
}) {
const store = useStores()
const [error, setError] = useState<string | undefined>()
const [imgInfo, setImgInfo] = useState<Dim | undefined>()
const [containerInfo, setContainerInfo] = useState<Dim | undefined>()
const calculatedStyle = useMemo(() => {
if (imgInfo && containerInfo) {
// imgInfo.height / imgInfo.width = x / containerInfo.width
// x = imgInfo.height / imgInfo.width * containerInfo.width
return {
height: Math.min(
MAX_HEIGHT,
(imgInfo.height / imgInfo.width) * containerInfo.width,
),
}
}
return undefined
}, [imgInfo, containerInfo])
useEffect(() => {
Image.getSize(
uri,
(width: number, height: number) => {
setImgInfo({width, height})
},
(error: any) => {
setError(String(error))
},
)
}, [uri])
const onLayout = (evt: LayoutChangeEvent) => {
setContainerInfo({
width: evt.nativeEvent.layout.width,
height: evt.nativeEvent.layout.height,
})
}
const onPressImage = () => {
if (fullSizeUri) {
store.shell.openLightbox(new ImageLightbox(fullSizeUri))
}
}
return (
<View style={style}>
<TouchableWithoutFeedback onPress={onPressImage}>
{error ? (
<View style={[styles.container, styles.errorContainer]}>
<Text style={styles.error}>{error}</Text>
</View>
) : calculatedStyle ? (
<View style={styles.container}>
<Image style={calculatedStyle} source={{uri}} />
</View>
) : (
<View style={[style, styles.placeholder]} onLayout={onLayout} />
)}
</TouchableWithoutFeedback>
</View>
)
}
const styles = StyleSheet.create({
placeholder: {
width: '100%',
aspectRatio: 1,
backgroundColor: colors.gray1,
},
errorContainer: {
backgroundColor: colors.red1,
paddingHorizontal: 8,
paddingVertical: 4,
},
container: {
borderRadius: 8,
overflow: 'hidden',
},
error: {
color: colors.red5,
},
})