WIP PWA for Grain
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: display focus image thumbnail in comments

+47 -3
+19 -1
src/components/molecules/grain-comment.js
··· 11 11 text: { type: String }, 12 12 createdAt: { type: String }, 13 13 isReply: { type: Boolean }, 14 - isOwner: { type: Boolean } 14 + isOwner: { type: Boolean }, 15 + focusImageUrl: { type: String }, 16 + focusImageAlt: { type: String } 15 17 }; 16 18 17 19 static styles = css` ··· 83 85 .delete-btn:hover { 84 86 color: var(--color-error, #e53935); 85 87 } 88 + .focus-image { 89 + width: 40px; 90 + height: 40px; 91 + border-radius: 4px; 92 + object-fit: cover; 93 + flex-shrink: 0; 94 + } 86 95 `; 87 96 88 97 constructor() { ··· 95 104 this.createdAt = ''; 96 105 this.isReply = false; 97 106 this.isOwner = false; 107 + this.focusImageUrl = ''; 108 + this.focusImageAlt = ''; 98 109 } 99 110 100 111 #handleProfileClick(e) { ··· 158 169 ` : ''} 159 170 </div> 160 171 </div> 172 + ${this.focusImageUrl ? html` 173 + <img 174 + class="focus-image" 175 + src=${this.focusImageUrl} 176 + alt=${this.focusImageAlt} 177 + /> 178 + ` : ''} 161 179 </div> 162 180 `; 163 181 }
+2
src/components/organisms/grain-comment-list.js
··· 48 48 avatarUrl=${comment.avatarUrl} 49 49 text=${comment.text} 50 50 createdAt=${comment.createdAt} 51 + focusImageUrl=${comment.focusImageUrl || ''} 52 + focusImageAlt=${comment.focusImageAlt || ''} 51 53 ></grain-comment> 52 54 `)} 53 55 `;
+2
src/components/organisms/grain-comment-sheet.js
··· 357 357 createdAt=${comment.createdAt} 358 358 ?is-reply=${comment.isReply} 359 359 ?isOwner=${comment.handle === auth.user?.handle} 360 + focusImageUrl=${comment.focusImageUrl || ''} 361 + focusImageAlt=${comment.focusImageAlt || ''} 360 362 @reply=${this.#handleReply} 361 363 @delete=${this.#handleDelete} 362 364 ></grain-comment>
+24 -2
src/services/grain-api.js
··· 593 593 createdAt 594 594 actorHandle 595 595 replyTo 596 + focus 597 + focusResolved { 598 + ... on SocialGrainPhoto { 599 + uri 600 + alt 601 + photo { url(preset: "feed_thumbnail") } 602 + } 603 + } 596 604 socialGrainActorProfileByDid { 597 605 displayName 598 606 avatar { url(preset: "avatar") } ··· 640 648 const comments = galleryNode.socialGrainCommentViaSubject?.edges?.map(edge => { 641 649 const node = edge.node; 642 650 const commentProfile = node.socialGrainActorProfileByDid; 651 + const focusPhoto = node.focusResolved; 643 652 return { 644 653 uri: node.uri, 645 654 text: node.text, ··· 647 656 handle: node.actorHandle, 648 657 displayName: commentProfile?.displayName || '', 649 658 avatarUrl: commentProfile?.avatar?.url || '', 650 - replyToUri: node.replyTo || null 659 + replyToUri: node.replyTo || null, 660 + focusImageUrl: focusPhoto?.photo?.url || null, 661 + focusImageAlt: focusPhoto?.alt || '' 651 662 }; 652 663 }) || []; 653 664 ··· 978 989 createdAt 979 990 actorHandle 980 991 replyTo 992 + focus 993 + focusResolved { 994 + ... on SocialGrainPhoto { 995 + uri 996 + alt 997 + photo { url(preset: "feed_thumbnail") } 998 + } 999 + } 981 1000 socialGrainActorProfileByDid { 982 1001 displayName 983 1002 avatar { url(preset: "avatar") } ··· 1003 1022 const comments = connection.edges.map(edge => { 1004 1023 const node = edge.node; 1005 1024 const profile = node.socialGrainActorProfileByDid; 1025 + const focusPhoto = node.focusResolved; 1006 1026 return { 1007 1027 uri: node.uri, 1008 1028 text: node.text, ··· 1010 1030 handle: node.actorHandle, 1011 1031 displayName: profile?.displayName || '', 1012 1032 avatarUrl: profile?.avatar?.url || '', 1013 - replyToUri: node.replyTo || null 1033 + replyToUri: node.replyTo || null, 1034 + focusImageUrl: focusPhoto?.photo?.url || null, 1035 + focusImageAlt: focusPhoto?.alt || '' 1014 1036 }; 1015 1037 }); 1016 1038