commit 6b684726e479ca3003b6a65ea67e2db5760eece4 · nekomimi.pet/atproto-ui

+77 -5

lib/components/BlueskyPost.tsx

···

       83
        
       	 */

     

       84
        
       	authorHandle: string;

     

       85
        
       	/**

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       86
        
       	 * The DID that owns the post record.

     

       87
        
       	 */

     

       88
        
       	authorDid: string;

     
···

       191
        
       		const avatar = profile?.avatar;

     

       192
        
       		const avatarCdnUrl = isBlobWithCdn(avatar) ? avatar.cdnUrl : undefined;

     

       193
        
       		const avatarCid = avatarCdnUrl ? undefined : getAvatarCid(profile);

     

       0
        
       
     

       194
        
       

     

       195
        
       		const {

     

       196
        
       			record: fetchedRecord,

     
···

       250
        
       					<Comp

     

       251
        
       						{...props}

     

       252
        
       						authorHandle={authorHandle}

     

       0
        
       
     

       253
        
       						authorDid={repoIdentifier}

     

       254
        
       						avatarUrl={avatarUrl}

     

       255
        
       						iconPlacement={iconPlacement}

     
···

       269
        
       			avatarCid,

     

       270
        
       			avatarCdnUrl,

     

       271
        
       			authorHandle,

     

       0
        
       
     

       272
        
       			iconPlacement,

     

       273
        
       			showIcon,

     

       274
        
       			atUri,

     

       275
        
       			showParent,

     

       276
        
       		]);

     

       277
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       278
        
       		if (!displayHandle && resolvingIdentity) {

     

       279
        
       			return <div style={{ padding: 8 }}>Resolving handle…</div>;

     

       280
        
       		}

     
···

       310
        
       			);

     

       311
        
       		};

     

       312
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       313
        
       		if (showParent) {

     

       314
        
       			if (currentLoading || (parentLoading && !parentRecord)) {

     

       315
        
       				return (

     
···

       349
        
       								record={parentRecord}

     

       350
        
       								showParent={true}

     

       351
        
       								recursiveParent={true}

     

       352
       -
       								showIcon={false}

     

       353
       -
       								iconPlacement="cardBottomRight"

     

       354
        
       							/>

     

       355
        
       						) : (

     

       356
        
       							<BlueskyPost

     

       357
        
       								did={parentDid}

     

       358
        
       								rkey={parentRkey}

     

       359
        
       								record={parentRecord}

     

       360
       -
       								showIcon={false}

     

       361
       -
       								iconPlacement="cardBottomRight"

     

       362
        
       							/>

     

       363
        
       						)}

     

       364
        
       					</div>

     

       365
        
       

     

       366
        
       					<div style={replyPostStyle}>

     

       367
       -
       						{renderMainPost(record || currentRecord)}

     

       368
        
       					</div>

     

       369
        
       				</div>

     

       370
        
       			);

···

       83
        
       	 */

     

       84
        
       	authorHandle: string;

     

       85
        
       	/**

     

       86
       +
       	 * The author's display name from their profile.

     

       87
       +
       	 */

     

       88
       +
       	authorDisplayName?: string;

     

       89
       +
       	/**

     

       90
        
       	 * The DID that owns the post record.

     

       91
        
       	 */

     

       92
        
       	authorDid: string;

     
···

       195
        
       		const avatar = profile?.avatar;

     

       196
        
       		const avatarCdnUrl = isBlobWithCdn(avatar) ? avatar.cdnUrl : undefined;

     

       197
        
       		const avatarCid = avatarCdnUrl ? undefined : getAvatarCid(profile);

     

       198
       +
       		const authorDisplayName = profile?.displayName;

     

       199
        
       

     

       200
        
       		const {

     

       201
        
       			record: fetchedRecord,

     
···

       255
        
       					<Comp

     

       256
        
       						{...props}

     

       257
        
       						authorHandle={authorHandle}

     

       258
       +
       						authorDisplayName={authorDisplayName}

     

       259
        
       						authorDid={repoIdentifier}

     

       260
        
       						avatarUrl={avatarUrl}

     

       261
        
       						iconPlacement={iconPlacement}

     
···

       275
        
       			avatarCid,

     

       276
        
       			avatarCdnUrl,

     

       277
        
       			authorHandle,

     

       278
       +
       			authorDisplayName,

     

       279
        
       			iconPlacement,

     

       280
        
       			showIcon,

     

       281
        
       			atUri,

     

       282
        
       			showParent,

     

       283
        
       		]);

     

       284
        
       

     

       285
       +
       		const WrappedWithoutIcon = useMemo(() => {

     

       286
       +
       			const WrappedComponent: React.FC<{

     

       287
       +
       				record: FeedPostRecord;

     

       288
       +
       				loading: boolean;

     

       289
       +
       				error?: Error;

     

       290
       +
       			}> = (props) => {

     

       291
       +
       				const { url: avatarUrlFromBlob } = useBlob(

     

       292
       +
       					repoIdentifier,

     

       293
       +
       					avatarCid,

     

       294
       +
       				);

     

       295
       +
       				const avatarUrl = avatarCdnUrl || avatarUrlFromBlob;

     

       296
       +
       				return (

     

       297
       +
       					<Comp

     

       298
       +
       						{...props}

     

       299
       +
       						authorHandle={authorHandle}

     

       300
       +
       						authorDisplayName={authorDisplayName}

     

       301
       +
       						authorDid={repoIdentifier}

     

       302
       +
       						avatarUrl={avatarUrl}

     

       303
       +
       						iconPlacement={iconPlacement}

     

       304
       +
       						showIcon={false}

     

       305
       +
       						atUri={atUri}

     

       306
       +
       						isInThread

     

       307
       +
       						threadDepth={showParent ? 1 : 0}

     

       308
       +
       						showThreadBorder={!showParent && !!props.record?.reply?.parent}

     

       309
       +
       					/>

     

       310
       +
       				);

     

       311
       +
       			};

     

       312
       +
       			WrappedComponent.displayName = "BlueskyPostWrappedRendererWithoutIcon";

     

       313
       +
       			return WrappedComponent;

     

       314
       +
       		}, [

     

       315
       +
       			Comp,

     

       316
       +
       			repoIdentifier,

     

       317
       +
       			avatarCid,

     

       318
       +
       			avatarCdnUrl,

     

       319
       +
       			authorHandle,

     

       320
       +
       			authorDisplayName,

     

       321
       +
       			iconPlacement,

     

       322
       +
       			atUri,

     

       323
       +
       			showParent,

     

       324
       +
       		]);

     

       325
       +
       

     

       326
        
       		if (!displayHandle && resolvingIdentity) {

     

       327
        
       			return <div style={{ padding: 8 }}>Resolving handle…</div>;

     

       328
        
       		}

     
···

       358
        
       			);

     

       359
        
       		};

     

       360
        
       

     

       361
       +
       		const renderMainPostWithoutIcon = (mainRecord?: FeedPostRecord) => {

     

       362
       +
       			if (mainRecord !== undefined) {

     

       363
       +
       				return (

     

       364
       +
       					<AtProtoRecord<FeedPostRecord>

     

       365
       +
       						record={mainRecord}

     

       366
       +
       						renderer={WrappedWithoutIcon}

     

       367
       +
       						fallback={fallback}

     

       368
       +
       						loadingIndicator={loadingIndicator}

     

       369
       +
       					/>

     

       370
       +
       				);

     

       371
       +
       			}

     

       372
       +
       

     

       373
       +
       			return (

     

       374
       +
       				<AtProtoRecord<FeedPostRecord>

     

       375
       +
       					did={repoIdentifier}

     

       376
       +
       					collection={BLUESKY_POST_COLLECTION}

     

       377
       +
       					rkey={rkey}

     

       378
       +
       					renderer={WrappedWithoutIcon}

     

       379
       +
       					fallback={fallback}

     

       380
       +
       					loadingIndicator={loadingIndicator}

     

       381
       +
       				/>

     

       382
       +
       			);

     

       383
       +
       		};

     

       384
       +
       

     

       385
        
       		if (showParent) {

     

       386
        
       			if (currentLoading || (parentLoading && !parentRecord)) {

     

       387
        
       				return (

     
···

       421
        
       								record={parentRecord}

     

       422
        
       								showParent={true}

     

       423
        
       								recursiveParent={true}

     

       424
       +
       								showIcon={showIcon}

     

       425
       +
       								iconPlacement={iconPlacement}

     

       426
        
       							/>

     

       427
        
       						) : (

     

       428
        
       							<BlueskyPost

     

       429
        
       								did={parentDid}

     

       430
        
       								rkey={parentRkey}

     

       431
        
       								record={parentRecord}

     

       432
       +
       								showIcon={showIcon}

     

       433
       +
       								iconPlacement={iconPlacement}

     

       434
        
       							/>

     

       435
        
       						)}

     

       436
        
       					</div>

     

       437
        
       

     

       438
        
       					<div style={replyPostStyle}>

     

       439
       +
       						{renderMainPostWithoutIcon(record || currentRecord)}

     

       440
        
       					</div>

     

       441
        
       				</div>

     

       442
        
       			);

+7 -5

lib/renderers/BlueskyPostRenderer.tsx

···

       166
        
       			gap: inline ? 8 : 0,

     

       167
        
       		}}

     

       168
        
       	>

     

       169
       -
       		<strong style={{ fontSize: 14 }}>{primaryName}</strong>

     

       170
       -
       		{authorDisplayName && authorHandle && (

     

       171
        
       			<span

     

       172
        
       				style={{

     

       173
        
       					...baseStyles.handle,

     
···

       254
        
       				))}

     

       255
        
       			</div>

     

       256
        
       		)}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       257
        
       		<div style={baseStyles.timestampRow}>

     

       258
        
       			<time

     

       259
        
       				style={{

     
···

       285
        
       				</span>

     

       286
        
       			)}

     

       287
        
       		</div>

     

       288
       -
       		{resolvedEmbed && (

     

       289
       -
       			<div style={baseStyles.embedContainer}>{resolvedEmbed}</div>

     

       290
       -
       		)}

     

       291
        
       	</div>

     

       292
        
       );

     

       293
        
       

     
···

       419
        
       		marginTop: 12,

     

       420
        
       		padding: 8,

     

       421
        
       		borderRadius: 12,

     

       0
        
       
     

       0
        
       
     

       422
        
       		display: "flex",

     

       423
        
       		flexDirection: "column",

     

       424
        
       		gap: 8,

···

       166
        
       			gap: inline ? 8 : 0,

     

       167
        
       		}}

     

       168
        
       	>

     

       169
       +
       		<strong style={{ fontSize: 14 }}>{authorDisplayName || primaryName}</strong>

     

       170
       +
       		{authorHandle && (

     

       171
        
       			<span

     

       172
        
       				style={{

     

       173
        
       					...baseStyles.handle,

     
···

       254
        
       				))}

     

       255
        
       			</div>

     

       256
        
       		)}

     

       257
       +
       		{resolvedEmbed && (

     

       258
       +
       			<div style={baseStyles.embedContainer}>{resolvedEmbed}</div>

     

       259
       +
       		)}

     

       260
        
       		<div style={baseStyles.timestampRow}>

     

       261
        
       			<time

     

       262
        
       				style={{

     
···

       288
        
       				</span>

     

       289
        
       			)}

     

       290
        
       		</div>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       291
        
       	</div>

     

       292
        
       );

     

       293
        
       

     
···

       419
        
       		marginTop: 12,

     

       420
        
       		padding: 8,

     

       421
        
       		borderRadius: 12,

     

       422
       +
       		border: `1px solid var(--atproto-color-border)`,

     

       423
       +
       		background: `var(--atproto-color-bg-elevated)`,

     

       424
        
       		display: "flex",

     

       425
        
       		flexDirection: "column",

     

       426
        
       		gap: 8,

+2 -2

src/App.tsx

···

       329
        
       									Reply Post Demo

     

       330
        
       								</h3>

     

       331
        
       								<BlueskyPost

     

       332
       -
       									did="nekomimi.pet"

     

       333
       -
       									rkey="3m36jkng6nk22"

     

       334
        
       									showParent={true}

     

       335
        
       									recursiveParent={true}

     

       336
        
       								/>

···

       329
        
       									Reply Post Demo

     

       330
        
       								</h3>

     

       331
        
       								<BlueskyPost

     

       332
       +
       									did="did:plc:xwhsmuozq3mlsp56dyd7copv"

     

       333
       +
       									rkey="3m3je5ydg4s2o"

     

       334
        
       									showParent={true}

     

       335
        
       									recursiveParent={true}

     

       336
        
       								/>