WIP PWA for Grain
feat: display focus image thumbnail in comments
+47
-3
+19
-1
src/components/molecules/grain-comment.js
+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
+2
src/components/organisms/grain-comment-list.js
···
48
48
avatarUrl=${comment.avatarUrl}
49
49
text=${comment.text}
50
50
createdAt=${comment.createdAt}
51
51
+
focusImageUrl=${comment.focusImageUrl || ''}
52
52
+
focusImageAlt=${comment.focusImageAlt || ''}
51
53
></grain-comment>
52
54
`)}
53
55
`;
+2
src/components/organisms/grain-comment-sheet.js
+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
+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