Skip to content

Commit 8b2b5ce

Browse files
szuperazszuperaz
committed
feat: allow defining original dimenstion variables inside ngStyle
1 parent 8fed426 commit 8b2b5ce

File tree

3 files changed

+118
-36
lines changed

3 files changed

+118
-36
lines changed

‎projects/stream-chat-angular/src/lib/attachment-configuration.service.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,15 @@ export class AttachmentConfigurationService<
4747
* You can turn on/off thumbnail generation for video attachments
4848
*/
4949
shouldGenerateVideoThumbnail = true;
50+
/**
51+
* For image and video attachments the SDK will define the `--original-height` and `--original-width` CSS variables which are necessary to have correct aspect ratio.
52+
*
53+
* By default the SDK defines these as inline style attributes, but that can cause problems with strict CSP settings.
54+
*
55+
* You can choose to define these in an [ngStyle](https://angular.io/api/common/NgStyle) attribute, but that only works with newer versions of Angular.
56+
*/
57+
defineOriginalDimensionCSSVariablesIn: 'ngStyle' | 'inlineStyle' =
58+
'inlineStyle';
5059

5160
/**
5261
* Handles the configuration for image attachments, it's possible to provide your own function to override the default logic

‎projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.html‎

Lines changed: 106 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -40,20 +40,34 @@
4040
(click)="openImageModal([attachmentContext])"
4141
(keyup.enter)="openImageModal([attachmentContext])"
4242
[style.--original-height]="
43-
getImageAttachmentConfiguration(
43+
defineOriginalDimensionCSSVariablesIn === 'inlineStyle'
44+
? getImageAttachmentConfiguration(
45+
attachmentContext,
46+
'single',
47+
imgElement
48+
).originalHeight
49+
: ''
50+
"
51+
[style.--original-width]="
52+
defineOriginalDimensionCSSVariablesIn === 'inlineStyle'
53+
? getImageAttachmentConfiguration(
54+
attachmentContext,
55+
'single',
56+
imgElement
57+
).originalWidth
58+
: ''
59+
"
60+
[ngStyle]="{
61+
'--original-width': getImageAttachmentConfiguration(
4462
attachmentContext,
4563
'single',
4664
imgElement
47-
).originalHeight
48-
"
49-
[style.--original-width]="
50-
getImageAttachmentConfiguration(
65+
).originalWidth,
66+
'--original-height': getImageAttachmentConfiguration(
5167
attachmentContext,
5268
'single',
5369
imgElement
54-
).originalWidth
55-
"
56-
[ngStyle]="{
70+
).originalHeight,
5771
height: getImageAttachmentConfiguration(
5872
attachmentContext,
5973
'single',
@@ -118,20 +132,34 @@
118132
"
119133
[alt]="galleryImage.fallback"
120134
[style.--original-height]="
121-
getImageAttachmentConfiguration(
135+
defineOriginalDimensionCSSVariablesIn === 'inlineStyle'
136+
? getImageAttachmentConfiguration(
137+
galleryImage,
138+
'gallery',
139+
imgElement
140+
).originalHeight
141+
: ''
142+
"
143+
[style.--original-width]="
144+
defineOriginalDimensionCSSVariablesIn === 'inlineStyle'
145+
? getImageAttachmentConfiguration(
146+
galleryImage,
147+
'gallery',
148+
imgElement
149+
).originalWidth
150+
: ''
151+
"
152+
[ngStyle]="{
153+
'--original-height': getImageAttachmentConfiguration(
122154
galleryImage,
123155
'gallery',
124156
imgElement
125-
).originalHeight
126-
"
127-
[style.--original-width]="
128-
getImageAttachmentConfiguration(
157+
).originalHeight,
158+
'--original-width': getImageAttachmentConfiguration(
129159
galleryImage,
130160
'gallery',
131161
imgElement
132-
).originalWidth
133-
"
134-
[ngStyle]="{
162+
).originalWidth,
135163
height: getImageAttachmentConfiguration(
136164
galleryImage,
137165
'gallery',
@@ -157,20 +185,34 @@
157185
isSvg(galleryImage)
158186
"
159187
[style.--original-height]="
160-
getImageAttachmentConfiguration(
188+
defineOriginalDimensionCSSVariablesIn === 'inlineStyle'
189+
? getImageAttachmentConfiguration(
190+
galleryImage,
191+
'gallery',
192+
element
193+
).originalHeight
194+
: ''
195+
"
196+
[style.--original-width]="
197+
defineOriginalDimensionCSSVariablesIn === 'inlineStyle'
198+
? getImageAttachmentConfiguration(
199+
galleryImage,
200+
'gallery',
201+
element
202+
).originalWidth
203+
: ''
204+
"
205+
[ngStyle]="{
206+
'--original-height': getImageAttachmentConfiguration(
161207
galleryImage,
162208
'gallery',
163209
element
164-
).originalHeight
165-
"
166-
[style.--original-width]="
167-
getImageAttachmentConfiguration(
210+
).originalHeight,
211+
'--original-width': getImageAttachmentConfiguration(
168212
galleryImage,
169213
'gallery',
170214
element
171-
).originalWidth
172-
"
173-
[ngStyle]="{
215+
).originalWidth,
174216
'background-image':
175217
'url(' +
176218
getImageAttachmentConfiguration(
@@ -216,14 +258,30 @@
216258
class="str-chat__player-wrapper"
217259
data-testclass="video-attachment-parent"
218260
[style.--original-height]="
219-
getVideoAttachmentConfiguration(attachmentContext, videoElement)
220-
.originalHeight
261+
defineOriginalDimensionCSSVariablesIn === 'inlineStyle'
262+
? getVideoAttachmentConfiguration(
263+
attachmentContext,
264+
videoElement
265+
).originalHeight
266+
: ''
221267
"
222268
[style.--original-width]="
223-
getVideoAttachmentConfiguration(attachmentContext, videoElement)
224-
.originalWidth
269+
defineOriginalDimensionCSSVariablesIn === 'inlineStyle'
270+
? getVideoAttachmentConfiguration(
271+
attachmentContext,
272+
videoElement
273+
).originalWidth
274+
: ''
225275
"
226276
[ngStyle]="{
277+
'--original-height': getVideoAttachmentConfiguration(
278+
attachmentContext,
279+
videoElement
280+
).originalHeight,
281+
'--original-width': getVideoAttachmentConfiguration(
282+
attachmentContext,
283+
videoElement
284+
).originalWidth,
227285
height: getVideoAttachmentConfiguration(
228286
attachmentContext,
229287
videoElement
@@ -477,19 +535,31 @@
477535
).url
478536
"
479537
[style.--original-height]="
480-
getCarouselImageAttachmentConfiguration(
481-
imagesToView[imagesToViewCurrentIndex],
482-
imgElement
483-
).originalHeight
538+
defineOriginalDimensionCSSVariablesIn === 'inlineStyle'
539+
? getCarouselImageAttachmentConfiguration(
540+
imagesToView[imagesToViewCurrentIndex],
541+
imgElement
542+
).originalHeight
543+
: ''
484544
"
485545
[style.--original-width]="
486-
getCarouselImageAttachmentConfiguration(
487-
imagesToView[imagesToViewCurrentIndex],
488-
imgElement
489-
).originalWidth
546+
defineOriginalDimensionCSSVariablesIn === 'inlineStyle'
547+
? getCarouselImageAttachmentConfiguration(
548+
imagesToView[imagesToViewCurrentIndex],
549+
imgElement
550+
).originalWidth
551+
: ''
490552
"
491553
[alt]="imagesToView[imagesToViewCurrentIndex].fallback"
492554
[ngStyle]="{
555+
'--original-height': getCarouselImageAttachmentConfiguration(
556+
imagesToView[imagesToViewCurrentIndex],
557+
imgElement
558+
).originalHeight,
559+
'--original-width': getCarouselImageAttachmentConfiguration(
560+
imagesToView[imagesToViewCurrentIndex],
561+
imgElement
562+
).originalWidth,
493563
width: getCarouselImageAttachmentConfiguration(
494564
imagesToView[imagesToViewCurrentIndex],
495565
imgElement

‎projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export class AttachmentListComponent implements OnChanges {
5757
imagesToView: Attachment<DefaultStreamChatGenerics>[] = [];
5858
imagesToViewCurrentIndex = 0;
5959
themeVersion: '1' | '2';
60+
defineOriginalDimensionCSSVariablesIn: 'ngStyle' | 'inlineStyle';
6061
@ViewChild('modalContent', { static: true })
6162
private modalContent!: TemplateRef<void>;
6263
private attachmentConfigurations: Map<
@@ -73,6 +74,8 @@ export class AttachmentListComponent implements OnChanges {
7374
themeService: ThemeService
7475
) {
7576
this.themeVersion = themeService.themeVersion;
77+
this.defineOriginalDimensionCSSVariablesIn =
78+
this.attachmentConfigurationService.defineOriginalDimensionCSSVariablesIn;
7679
}
7780
ngOnChanges(changes: SimpleChanges): void {
7881
if (changes.attachments) {

0 commit comments

Comments
 (0)