feat: optimize images on directus

Solvro · Aug 27, 2024 · f69f65b · f69f65b
1 parent 0cc11be
commit f69f65b
Show file tree

Hide file tree

Showing 27 changed files with 185 additions and 85 deletions.
diff --git a/lib/api_base/directus_assets_url.dart b/lib/api_base/directus_assets_url.dart
@@ -1,13 +1,37 @@
+import "package:flutter/material.dart";
+
 import "../config/api_base_config.dart";
 
 extension DirectusAssetsUrlX on String {
   String get directusUrl {
+    if (startsWith("https://") || startsWith("http://")) {
+      return this; // Already a full URL (not from directus)
+    }
     return "${ApiBaseEnv.assetsUrl}/$this";
   }
+
+  String directusUrlWithSize(Size size, BoxFit fit) {
+    return "$directusUrl?width=${size.width.toInt()}&height=${size.height.toInt()}&fit=${fit.directusFit}";
+  }
 }
 
-extension DirectusAssetsUrlNullableX on String? {
-  String get directusUrl {
-    return this?.directusUrl ?? "";
+extension _GetDirectusFitX on BoxFit {
+  String get directusFit {
+    switch (this) {
+      case BoxFit.fill:
+        return "cover";
+      case BoxFit.contain:
+        return "contain";
+      case BoxFit.cover:
+        return "cover";
+      case BoxFit.fitWidth:
+        return "inside";
+      case BoxFit.fitHeight:
+        return "inside";
+      case BoxFit.none:
+        return "inside";
+      case BoxFit.scaleDown:
+        return "inside";
+    }
   }
 }
diff --git a/lib/features/about_us_view/about_us_view.dart b/lib/features/about_us_view/about_us_view.dart
@@ -2,7 +2,6 @@ import "package:auto_route/auto_route.dart";
 import "package:flutter/material.dart";
 import "package:flutter_riverpod/flutter_riverpod.dart";
 
-import "../../api_base/directus_assets_url.dart";
 import "../../config/ui_config.dart";
 import "../../theme/app_theme.dart";
 import "../../utils/context_extensions.dart";
@@ -46,9 +45,8 @@ class _AboutUsView extends ConsumerWidget {
           slivers: [
             SliverPersistentHeader(
               delegate: SliverHeaderSection(
-                logoImageUrl: AboutUsConfig.defaultLogoUrl,
-                backgroundImageUrl:
-                    value?.aboutUs?.cover?.filename_disk?.directusUrl,
+                logoDirectusImageUrl: AboutUsConfig.defaultLogoUrl,
+                backgroundImageUrl: value?.aboutUs?.cover?.filename_disk,
               ),
             ),
             SliverList(

diff --git a/lib/features/about_us_view/models/about_us_details.dart b/lib/features/about_us_view/models/about_us_details.dart
@@ -1,5 +1,3 @@
-import "../../../api_base/directus_assets_url.dart";
-
 import "../../../utils/determine_contact_icon.dart";
 import "../../../utils/where_non_null_iterable.dart";
 import "../repository/about_us_repository.dart";
@@ -15,7 +13,7 @@ class AboutUsDetails {
     return aboutUsTeam.whereNonNull.map((e) {
       return MemberData(
         name: e.name,
-        imageUrl: e.photo?.filename_disk?.directusUrl,
+        directusImageUrl: e.photo?.filename_disk,
         socialLinks: e.socialLinks.whereNonNull.map((e) => e.url).toList(),
         subtitle: e.subtitle,
       );

diff --git a/lib/features/about_us_view/models/member_data.dart b/lib/features/about_us_view/models/member_data.dart
@@ -8,13 +8,13 @@ class MemberData {
   final String? name;
   final String? subtitle;
   final List<ContactIconsModel> links;
-  final String? imageUrl;
+  final String? directusImageUrl;
 
   MemberData({
     required this.socialLinks,
     required this.name,
     required this.subtitle,
-    required this.imageUrl,
+    required this.directusImageUrl,
   }) : links = _determineLinksIcons(socialLinks);
 
   static List<ContactIconsModel> _determineLinksIcons(List<String> urls) {
@@ -30,7 +30,7 @@ class MemberData {
         other.name == name &&
         other.subtitle == subtitle &&
         listEquals(other.links, links) &&
-        other.imageUrl == imageUrl;
+        other.directusImageUrl == directusImageUrl;
   }
 
   @override
@@ -39,5 +39,5 @@ class MemberData {
       name.hashCode ^
       subtitle.hashCode ^
       links.hashCode ^
-      imageUrl.hashCode;
+      directusImageUrl.hashCode;
 }
diff --git a/lib/features/about_us_view/widgets/team_section.dart b/lib/features/about_us_view/widgets/team_section.dart
@@ -6,8 +6,7 @@ import "../../../config/ui_config.dart";
 import "../../../theme/app_theme.dart";
 import "../../../utils/determine_contact_icon.dart";
 import "../../../utils/launch_url_util.dart";
-
-import "../../../widgets/my_cached_image.dart";
+import "../../../widgets/optimized_directus_image.dart";
 import "../models/member_data.dart";
 
 class TeamSection extends StatelessWidget {
@@ -47,7 +46,7 @@ class _TeamMemberCard extends StatelessWidget {
           children: [
             SizedBox.square(
               dimension: AboutUsConfig.photoSize,
-              child: MyCachedImage(member.imageUrl),
+              child: OptimizedDirectusImage(member.directusImageUrl),
             ),
             const SizedBox(
               width: 14,

diff --git a/lib/features/buildings_view/building_tile.dart b/lib/features/buildings_view/building_tile.dart
@@ -1,7 +1,6 @@
 import "package:flutter/material.dart";
 import "package:flutter_riverpod/flutter_riverpod.dart";
 
-import "../../api_base/directus_assets_url.dart";
 import "../../theme/app_theme.dart";
 import "../../utils/context_extensions.dart";
 import "../../widgets/wide_tile_card.dart";
@@ -22,7 +21,7 @@ class BuildingTile extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     return PhotoTrailingWideTileCard(
       activeGradient: context.colorTheme.toPwrGradient,
-      photoUrl: building.cover?.filename_disk.directusUrl,
+      directusPhotoUrl: building.cover?.filename_disk,
       title: "${context.localize.building_prefix} ${building.name}",
       subtitle: context.changeNull(building.addresFormatted),
       isActive: isActive,

diff --git a/lib/features/department_detail_view/department_detail_view.dart b/lib/features/department_detail_view/department_detail_view.dart
@@ -3,7 +3,6 @@ import "package:fast_immutable_collections/fast_immutable_collections.dart";
 import "package:flutter/material.dart";
 import "package:flutter_riverpod/flutter_riverpod.dart";
 
-import "../../api_base/directus_assets_url.dart";
 import "../../config/ui_config.dart";
 import "../../theme/app_theme.dart";
 import "../../utils/context_extensions.dart";
@@ -38,8 +37,8 @@ class DepartmentDetailView extends ConsumerWidget {
               SliverPersistentHeader(
                 delegate: DepartmentSliverHeaderSection(
                   activeGradient: value?.Departments_by_id?.gradient,
-                  logoImageUrl: value
-                      ?.Departments_by_id?.logo?.filename_disk?.directusUrl,
+                  logoDirectusImageUrl:
+                      value?.Departments_by_id?.logo?.filename_disk,
                 ),
               ),
               SliverList(

diff --git a/lib/features/department_detail_view/widgets/science_clubs_section.dart b/lib/features/department_detail_view/widgets/science_clubs_section.dart
@@ -1,7 +1,6 @@
 import "package:flutter/material.dart";
 import "package:flutter_riverpod/flutter_riverpod.dart";
 
-import "../../../api_base/directus_assets_url.dart";
 import "../../../config/ui_config.dart";
 import "../../../utils/context_extensions.dart";
 import "../../../widgets/big_preview_card.dart";
@@ -51,7 +50,7 @@ class _ScienceClubsList extends ConsumerWidget {
           child: BigPreviewCard(
             title: sciClub.name,
             shortDescription: sciClub.shortDescription ?? "",
-            photoUrl: sciClub.logo?.filename_disk?.directusUrl,
+            directusUrl: sciClub.logo?.filename_disk,
             onClick: () async => ref.navigateSciClubsDetail(sciClub.id),
           ),
         );

diff --git a/lib/features/department_detail_view/widgets/sliver_header_section.dart b/lib/features/department_detail_view/widgets/sliver_header_section.dart
@@ -6,7 +6,7 @@ import "../../../widgets/detail_views/sliver_logo.dart";
 class DepartmentSliverHeaderSection extends SliverHeaderSection {
   DepartmentSliverHeaderSection({
     super.activeGradient,
-    super.logoImageUrl,
+    super.logoDirectusImageUrl,
   }) : super(backgroundImageUrl: null);
 
   @override
@@ -26,9 +26,11 @@ class DepartmentSliverHeaderSection extends SliverHeaderSection {
         SliverLogo(
           scaleFactor: scaleFactor,
           activeGradient: activeGradient,
-          logoImageUrl: logoImageUrl,
+          logoDirectusUrl: logoDirectusImageUrl,
           logoOpacity: logoOpacity,
           logoSize: logoSize,
+          boxfit: BoxFit.scaleDown,
+          noShimmeringLoading: true,
         ),
       ],
     );

diff --git a/lib/features/departments_view/widgets/department_card.dart b/lib/features/departments_view/widgets/department_card.dart
@@ -1,10 +1,9 @@
 import "package:flutter/material.dart";
 
-import "../../../api_base/directus_assets_url.dart";
 import "../../../config/ui_config.dart";
 import "../../../theme/app_theme.dart";
 import "../../../theme/utils.dart";
-import "../../../widgets/my_cached_image.dart";
+import "../../../widgets/optimized_directus_image.dart";
 import "../../../widgets/wide_tile_card.dart";
 import "../repository/departments_extensions.dart";
 import "../repository/departments_repository.dart";
@@ -36,9 +35,9 @@ class DepartmentCard extends StatelessWidget {
             dimension: WideTileCardConfig.imageSize,
             child: Opacity(
               opacity: .5,
-              child: MyCachedImage(
-                department.logo?.filename_disk.directusUrl,
-                boxFit: BoxFit.contain,
+              child: OptimizedDirectusImage(
+                department.logo?.filename_disk,
+                boxFit: BoxFit.scaleDown,
                 noShimmeringLoading: true,
               ),
             ),

diff --git a/lib/features/guide_detail_view/guide_detail_view.dart b/lib/features/guide_detail_view/guide_detail_view.dart
@@ -2,16 +2,15 @@ import "package:auto_route/auto_route.dart";
 import "package:flutter/material.dart";
 import "package:flutter_riverpod/flutter_riverpod.dart";
 
-import "../../api_base/directus_assets_url.dart";
 import "../../config/ui_config.dart";
 import "../../utils/context_extensions.dart";
 import "../../widgets/detail_views/detail_view_app_bar.dart";
 import "../../widgets/loading_widgets/shimmer_loading.dart";
 import "../../widgets/loading_widgets/simple_previews/preview_text_prototype.dart";
-import "../../widgets/my_cached_image.dart";
 import "../../widgets/my_error_widget.dart";
 import "../../widgets/my_expansion_tile.dart";
 import "../../widgets/my_html_widget.dart";
+import "../../widgets/optimized_directus_image.dart";
 import "repository/guide_detail_view_repository.dart";
 import "widgets/faq_expansion_tile.dart";
 
@@ -50,8 +49,8 @@ class _GuideDetailDataView extends ConsumerWidget {
               expandedHeight: 254,
               flexibleSpace: SizedBox(
                 height: 254,
-                child: MyCachedImage(
-                  value?.cover?.filename_disk?.directusUrl,
+                child: OptimizedDirectusImage(
+                  value?.cover?.filename_disk,
                 ),
               ),
               automaticallyImplyLeading: false,

diff --git a/lib/features/guide_view/widgets/about_us_section.dart b/lib/features/guide_view/widgets/about_us_section.dart
@@ -19,7 +19,7 @@ class GuideAboutUsSection extends ConsumerWidget {
       child: PhotoTrailingWideTileCard(
         title: context.localize.guide_about_us,
         subtitle: context.localize.guide_meet_creators,
-        photoUrl: "",
+        directusPhotoUrl: "",
         onTap: ref.navigateAboutUs,
       ),
     );

diff --git a/lib/features/guide_view/widgets/guide_tile.dart b/lib/features/guide_view/widgets/guide_tile.dart
@@ -1,7 +1,6 @@
 import "package:flutter/material.dart";
 import "package:flutter_riverpod/flutter_riverpod.dart";
 
-import "../../../api_base/directus_assets_url.dart";
 import "../../../widgets/wide_tile_card.dart";
 import "../../navigator/utils/navigation_commands.dart";
 import "../repository/guide_repository.dart";
@@ -14,7 +13,7 @@ class GuideTile extends ConsumerWidget {
     return PhotoTrailingWideTileCard(
       title: item.name ?? "",
       subtitle: item.short_description,
-      photoUrl: item.cover?.filename_disk?.directusUrl ?? "",
+      directusPhotoUrl: item.cover?.filename_disk,
       onTap: () async => ref.navigateGuideDetail(item.id),
     );
   }

diff --git a/lib/features/home_view/widgets/buildings_section/building_card.dart b/lib/features/home_view/widgets/buildings_section/building_card.dart
@@ -2,20 +2,20 @@ import "package:flutter/material.dart";
 
 import "../../../../config/ui_config.dart";
 import "../../../../theme/app_theme.dart";
-import "../../../../widgets/my_cached_image.dart";
+import "../../../../widgets/optimized_directus_image.dart";
 import "../../../../widgets/tile_splash.dart";
 
 class BuildingCard extends StatelessWidget {
   const BuildingCard({
     super.key,
     required this.onTap,
     required this.buildingName,
-    this.imageUrl,
+    this.directusImageUrl,
   });
 
   final VoidCallback onTap;
   final String buildingName;
-  final String? imageUrl;
+  final String? directusImageUrl;
 
   @override
   Widget build(BuildContext context) {
@@ -26,8 +26,10 @@ class BuildingCard extends StatelessWidget {
         child: Stack(
           fit: StackFit.expand,
           children: [
-            MyCachedImage(imageUrl),
-            if (imageUrl != null)
+            OptimizedDirectusImage(
+              directusImageUrl,
+            ),
+            if (directusImageUrl != null)
               Positioned.fill(
                 child: Container(
                   decoration: BoxDecoration(

diff --git a/lib/features/home_view/widgets/buildings_section/buildings_section.dart b/lib/features/home_view/widgets/buildings_section/buildings_section.dart
@@ -1,7 +1,6 @@
 import "package:flutter/material.dart";
 import "package:flutter_riverpod/flutter_riverpod.dart";
 
-import "../../../../api_base/directus_assets_url.dart";
 import "../../../../utils/context_extensions.dart";
 import "../../../../utils/where_non_null_iterable.dart";
 import "../../../../widgets/my_error_widget.dart";
@@ -65,7 +64,7 @@ class _DataListBuildingsTiles extends ConsumerWidget {
         return MediumLeftPadding(
           child: BuildingCard(
             buildingName: mapItem.name,
-            imageUrl: mapItem.cover?.filename_disk?.directusUrl,
+            directusImageUrl: mapItem.cover?.filename_disk,
             onTap: () async => ref.navigateBuilding(mapItem),
           ),
         );

diff --git a/lib/features/home_view/widgets/departments_section/deparment_box.dart b/lib/features/home_view/widgets/departments_section/deparment_box.dart
@@ -1,9 +1,8 @@
 import "package:flutter/material.dart";
 
-import "../../../../api_base/directus_assets_url.dart";
 import "../../../../config/ui_config.dart";
 import "../../../../theme/app_theme.dart";
-import "../../../../widgets/my_cached_image.dart";
+import "../../../../widgets/optimized_directus_image.dart";
 import "../../../../widgets/tile_splash.dart";
 import "../../../departments_view/repository/departments_extensions.dart";
 import "../../../departments_view/repository/departments_repository.dart";
@@ -34,10 +33,10 @@ class DepartmentBox extends StatelessWidget {
               opacity: logoOpacity,
               child: SizedBox.square(
                 dimension: 100,
-                child: MyCachedImage(
-                  department.logo?.filename_disk.directusUrl,
+                child: OptimizedDirectusImage(
+                  department.logo?.filename_disk,
                   noShimmeringLoading: true,
-                  boxFit: BoxFit.contain,
+                  boxFit: BoxFit.scaleDown,
                 ),
               ),
             ),

diff --git a/lib/features/home_view/widgets/news_section.dart b/lib/features/home_view/widgets/news_section.dart
@@ -4,7 +4,6 @@ import "package:fast_immutable_collections/fast_immutable_collections.dart";
 import "package:flutter/material.dart";
 import "package:flutter_riverpod/flutter_riverpod.dart";
 
-import "../../../api_base/directus_assets_url.dart";
 import "../../../config/ui_config.dart";
 import "../../../utils/context_extensions.dart";
 import "../../../utils/where_non_null_iterable.dart";
@@ -85,10 +84,11 @@ class _NewsDataList extends ConsumerWidget {
           child: BigPreviewCard(
             title: value[index].name ?? "",
             shortDescription: value[index].short_description ?? "",
-            photoUrl: value[index].cover?.filename_disk?.directusUrl,
+            directusUrl: value[index].cover?.filename_disk,
             onClick: () {
               unawaited(ref.navigateGuideDetail(value[index].id));
             },
+            boxFit: BoxFit.cover,
           ),
         );
       },

diff --git a/lib/features/home_view/widgets/parkings_section.dart b/lib/features/home_view/widgets/parkings_section.dart
@@ -67,7 +67,7 @@ class _DataListParkingsTiles extends ConsumerWidget {
         return MediumLeftPadding(
           child: BuildingCard(
             buildingName: parking.symbol,
-            imageUrl: parking.iParkPhotoUrl,
+            directusImageUrl: parking.iParkPhotoUrl,
             onTap: () async {
               unawaited(ref.navigateParkings());
               ref