Skip to content

Commit c0fd5f8

Browse files
xsahil03xxsahil03x
authored
fix(ui): Respect safe area for fullscreen media (#2456)
1 parent 279c6d2 commit c0fd5f8

4 files changed

Lines changed: 108 additions & 109 deletions

File tree

‎packages/stream_chat_flutter/CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
## Upcoming
2+
3+
🐞 Fixed
4+
5+
- Fixed StreamGallery not respecting the safe area for fullscreen
6+
media. [[#2454]](https://github.com/GetStream/stream-chat-flutter/issues/2454)
7+
18
## 9.20.0
29

310
✅ Added

‎packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media.dart‎

Lines changed: 42 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -281,56 +281,53 @@ class _FullScreenMediaState extends State<StreamFullScreenMedia> {
281281
return ValueListenableBuilder(
282282
valueListenable: _isDisplayingDetail,
283283
builder: (context, isDisplayingDetail, child) {
284+
final padding = MediaQuery.paddingOf(context);
285+
284286
return AnimatedContainer(
285287
duration: kThemeChangeDuration,
286-
color: isDisplayingDetail
287-
? StreamChannelHeaderTheme.of(context).color
288-
: Colors.black,
289-
child: Builder(
290-
builder: (context) {
291-
if (attachment.type == AttachmentType.image ||
292-
attachment.type == AttachmentType.giphy) {
293-
return PhotoView.customChild(
294-
maxScale: PhotoViewComputedScale.covered,
295-
minScale: PhotoViewComputedScale.contained,
296-
backgroundDecoration: const BoxDecoration(
297-
color: Colors.transparent,
298-
),
299-
child: StreamMediaAttachmentThumbnail(
300-
media: attachment,
301-
width: double.infinity,
302-
height: double.infinity,
303-
),
304-
);
305-
} else if (attachment.type == AttachmentType.video) {
306-
final controller = videoPackages[attachment.id]!;
307-
if (!controller.initialized) {
308-
return const Center(
309-
child: CircularProgressIndicator.adaptive(),
310-
);
311-
}
312-
313-
final mediaQuery = MediaQuery.of(context);
314-
final bottomPadding = mediaQuery.padding.bottom;
315-
316-
return AnimatedPadding(
317-
duration: kThemeChangeDuration,
318-
padding: EdgeInsets.symmetric(
319-
vertical: isDisplayingDetail
320-
? kToolbarHeight + bottomPadding
321-
: 0,
322-
),
323-
child: Chewie(
324-
controller: controller.chewieController!,
325-
),
326-
);
327-
}
328-
329-
return const Empty();
330-
},
288+
color: switch (isDisplayingDetail) {
289+
true => StreamChannelHeaderTheme.of(context).color,
290+
false => Colors.black,
291+
},
292+
padding: EdgeInsetsDirectional.only(
293+
top: padding.top + kToolbarHeight,
294+
bottom: padding.bottom + kToolbarHeight,
331295
),
296+
child: child,
332297
);
333298
},
299+
child: Builder(
300+
builder: (context) {
301+
if (attachment.type == AttachmentType.image ||
302+
attachment.type == AttachmentType.giphy) {
303+
return PhotoView.customChild(
304+
maxScale: PhotoViewComputedScale.covered,
305+
minScale: PhotoViewComputedScale.contained,
306+
backgroundDecoration: const BoxDecoration(
307+
color: Colors.transparent,
308+
),
309+
child: StreamMediaAttachmentThumbnail(
310+
media: attachment,
311+
width: double.infinity,
312+
height: double.infinity,
313+
),
314+
);
315+
} else if (attachment.type == AttachmentType.video) {
316+
final controller = videoPackages[attachment.id]!;
317+
if (!controller.initialized) {
318+
return const Center(
319+
child: CircularProgressIndicator.adaptive(),
320+
);
321+
}
322+
323+
return Chewie(
324+
controller: controller.chewieController!,
325+
);
326+
}
327+
328+
return const Empty();
329+
},
330+
),
334331
);
335332
},
336333
),

‎packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media_desktop.dart‎

Lines changed: 59 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -317,73 +317,70 @@ class _FullScreenMediaDesktopState extends State<FullScreenMediaDesktop> {
317317
return ValueListenableBuilder(
318318
valueListenable: _isDisplayingDetail,
319319
builder: (context, isDisplayingDetail, child) {
320+
final padding = MediaQuery.paddingOf(context);
321+
320322
return AnimatedContainer(
321323
duration: kThemeChangeDuration,
322-
color: isDisplayingDetail
323-
? StreamChannelHeaderTheme.of(context).color
324-
: Colors.black,
325-
child: Builder(
326-
builder: (context) {
327-
if (attachment.type == AttachmentType.image ||
328-
attachment.type == AttachmentType.giphy) {
329-
return PhotoView.customChild(
330-
maxScale: PhotoViewComputedScale.covered,
331-
minScale: PhotoViewComputedScale.contained,
332-
backgroundDecoration: const BoxDecoration(
333-
color: Colors.transparent,
334-
),
335-
child: StreamMediaAttachmentThumbnail(
336-
media: attachment,
337-
width: double.infinity,
338-
height: double.infinity,
339-
),
340-
);
341-
} else if (attachment.type == AttachmentType.video) {
342-
final package = videoPackages[attachment.id]!;
343-
if (package.attachment.assetUrl != null) {
344-
package.player.open(
345-
Playlist(
346-
[
347-
Media(package.attachment.assetUrl!),
348-
],
349-
),
350-
play: widget.autoplayVideos,
351-
);
352-
}
353-
354-
final mediaQuery = MediaQuery.of(context);
355-
final bottomPadding = mediaQuery.padding.bottom;
356-
357-
return AnimatedPadding(
358-
duration: kThemeChangeDuration,
359-
padding: EdgeInsets.symmetric(
360-
vertical: isDisplayingDetail
361-
? kToolbarHeight + bottomPadding
362-
: 0,
363-
),
364-
child: ContextMenuRegion(
365-
contextMenuBuilder: (_, anchor) {
366-
return ContextMenu(
367-
anchor: anchor,
368-
menuItems: [
369-
DownloadMenuItem(
370-
attachment: attachment,
371-
),
372-
],
373-
);
374-
},
375-
child: Video(
376-
controller: package.controller,
377-
),
378-
),
379-
);
380-
}
381-
382-
return const Empty();
383-
},
324+
color: switch (isDisplayingDetail) {
325+
true => StreamChannelHeaderTheme.of(context).color,
326+
false => Colors.black,
327+
},
328+
padding: EdgeInsetsDirectional.only(
329+
top: padding.top + kToolbarHeight,
330+
bottom: padding.bottom + kToolbarHeight,
384331
),
332+
child: child,
385333
);
386334
},
335+
child: Builder(
336+
builder: (context) {
337+
if (attachment.type == AttachmentType.image ||
338+
attachment.type == AttachmentType.giphy) {
339+
return PhotoView.customChild(
340+
maxScale: PhotoViewComputedScale.covered,
341+
minScale: PhotoViewComputedScale.contained,
342+
backgroundDecoration: const BoxDecoration(
343+
color: Colors.transparent,
344+
),
345+
child: StreamMediaAttachmentThumbnail(
346+
media: attachment,
347+
width: double.infinity,
348+
height: double.infinity,
349+
),
350+
);
351+
} else if (attachment.type == AttachmentType.video) {
352+
final package = videoPackages[attachment.id]!;
353+
if (package.attachment.assetUrl != null) {
354+
package.player.open(
355+
Playlist(
356+
[
357+
Media(package.attachment.assetUrl!),
358+
],
359+
),
360+
play: widget.autoplayVideos,
361+
);
362+
}
363+
364+
return ContextMenuRegion(
365+
contextMenuBuilder: (_, anchor) {
366+
return ContextMenu(
367+
anchor: anchor,
368+
menuItems: [
369+
DownloadMenuItem(
370+
attachment: attachment,
371+
),
372+
],
373+
);
374+
},
375+
child: Video(
376+
controller: package.controller,
377+
),
378+
);
379+
}
380+
381+
return const Empty();
382+
},
383+
),
387384
);
388385
},
389386
),

‎sample_app/ios/Runner.xcodeproj/project.pbxproj‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -304,7 +304,6 @@
304304
"${BUILT_PRODUCTS_DIR}/sqlite3_flutter_libs/sqlite3_flutter_libs.framework",
305305
"${BUILT_PRODUCTS_DIR}/url_launcher_ios/url_launcher_ios.framework",
306306
"${BUILT_PRODUCTS_DIR}/video_player_avfoundation/video_player_avfoundation.framework",
307-
"${BUILT_PRODUCTS_DIR}/volume_controller/volume_controller.framework",
308307
"${BUILT_PRODUCTS_DIR}/wakelock_plus/wakelock_plus.framework",
309308
);
310309
name = "[CP] Embed Pods Frameworks";
@@ -348,7 +347,6 @@
348347
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/sqlite3_flutter_libs.framework",
349348
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/url_launcher_ios.framework",
350349
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/video_player_avfoundation.framework",
351-
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/volume_controller.framework",
352350
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/wakelock_plus.framework",
353351
);
354352
runOnlyForDeploymentPostprocessing = 0;

0 commit comments

Comments
 (0)