Memories redesign (#1660)

lib/generated/l10n.dart

@@ -8307,16 +8307,6 @@ class S {
       args: [],
     );
   }
-
-  /// `Memories`
-  String get memories {
-    return Intl.message(
-      'Memories',
-      name: 'memories',
-      desc: '',
-      args: [],
-    );
-  }
 }
 
 class AppLocalizationDelegate extends LocalizationsDelegate<S> {

lib/l10n/intl_cs.arb

@@ -10,6 +10,5 @@
   "selectALocation": "Select a location",
   "selectALocationFirst": "Select a location first",
   "changeLocationOfSelectedItems": "Change location of selected items?",
-  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente",
-  "memories": "Memories"
+  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente"
 }

lib/l10n/intl_de.arb

@@ -1178,6 +1178,5 @@
   "selectALocationFirst": "Wähle zuerst einen Standort",
   "changeLocationOfSelectedItems": "Standort der gewählten Elemente ändern?",
   "editsToLocationWillOnlyBeSeenWithinEnte": "Änderungen des Standorts werden nur in ente sichtbar sein",
-  "cleanUncategorized": "Unkategorisiert leeren",
-  "memories": "Memories"
+  "cleanUncategorized": "Unkategorisiert leeren"
 }

lib/l10n/intl_en.arb

@@ -1187,6 +1187,5 @@
   "selectALocationFirst": "Select a location first",
   "changeLocationOfSelectedItems": "Change location of selected items?",
   "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente",
-  "cleanUncategorized": "Clean Uncategorized",
-  "memories": "Memories"
-}
+  "cleanUncategorized": "Clean Uncategorized"
+}

lib/l10n/intl_es.arb

@@ -973,6 +973,5 @@
   "selectALocation": "Select a location",
   "selectALocationFirst": "Select a location first",
   "changeLocationOfSelectedItems": "Change location of selected items?",
-  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente",
-  "memories": "Memories"
+  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente"
 }

lib/l10n/intl_fr.arb

@@ -1154,6 +1154,5 @@
   "selectALocation": "Select a location",
   "selectALocationFirst": "Select a location first",
   "changeLocationOfSelectedItems": "Change location of selected items?",
-  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente",
-  "memories": "Memories"
+  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente"
 }

lib/l10n/intl_it.arb

@@ -1116,6 +1116,5 @@
   "selectALocation": "Select a location",
   "selectALocationFirst": "Select a location first",
   "changeLocationOfSelectedItems": "Change location of selected items?",
-  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente",
-  "memories": "Memories"
+  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente"
 }

lib/l10n/intl_ko.arb

@@ -10,6 +10,5 @@
   "selectALocation": "Select a location",
   "selectALocationFirst": "Select a location first",
   "changeLocationOfSelectedItems": "Change location of selected items?",
-  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente",
-  "memories": "Memories"
+  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente"
 }

lib/l10n/intl_nl.arb

@@ -1163,6 +1163,5 @@
   "selectALocation": "Select a location",
   "selectALocationFirst": "Select a location first",
   "changeLocationOfSelectedItems": "Change location of selected items?",
-  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente",
-  "memories": "Memories"
+  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente"
 }

lib/l10n/intl_no.arb

@@ -24,6 +24,5 @@
   "selectALocation": "Select a location",
   "selectALocationFirst": "Select a location first",
   "changeLocationOfSelectedItems": "Change location of selected items?",
-  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente",
-  "memories": "Memories"
+  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente"
 }

lib/l10n/intl_pl.arb

@@ -111,6 +111,5 @@
   "selectALocation": "Select a location",
   "selectALocationFirst": "Select a location first",
   "changeLocationOfSelectedItems": "Change location of selected items?",
-  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente",
-  "memories": "Memories"
+  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente"
 }

lib/l10n/intl_pt.arb

@@ -277,6 +277,5 @@
   "selectALocation": "Select a location",
   "selectALocationFirst": "Select a location first",
   "changeLocationOfSelectedItems": "Change location of selected items?",
-  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente",
-  "memories": "Memories"
+  "editsToLocationWillOnlyBeSeenWithinEnte": "Edits to location will only be seen within Ente"
 }

lib/l10n/intl_zh.arb

@@ -1187,6 +1187,5 @@
   "selectALocationFirst": "首先选择一个位置",
   "changeLocationOfSelectedItems": "确定要更改所选项目的位置吗？",
   "editsToLocationWillOnlyBeSeenWithinEnte": "对位置的编辑只能在 Ente 内看到",
-  "cleanUncategorized": "清除未分类的",
-  "memories": "回忆"
+  "cleanUncategorized": "清除未分类的"
 }

lib/services/memories_service.dart

@@ -85,6 +85,7 @@ class MemoriesService extends ChangeNotifier {
   }
 
   Future<List<Memory>> _fetchMemories() async {
+    final stopWatch = Stopwatch()..start();
     _logger.info("Fetching memories");
     final presentTime = DateTime.now();
     final present = presentTime.subtract(
@@ -121,6 +122,8 @@ class MemoriesService extends ChangeNotifier {
       }
     }
     _cachedMemories = memories;
+    stopWatch.stop();
+    _logger.info("Fetched memories, duration: ${stopWatch.elapsed}");
     return _cachedMemories!;
   }
 

lib/ui/home/memories/memories_widget.dart

@@ -1,12 +1,12 @@
 import "dart:async";
 
 import 'package:flutter/material.dart';
+import "package:flutter_animate/flutter_animate.dart";
 import "package:photos/core/event_bus.dart";
 import "package:photos/events/memories_setting_changed.dart";
-import "package:photos/generated/l10n.dart";
 import 'package:photos/models/memory.dart';
 import 'package:photos/services/memories_service.dart';
-import "package:photos/theme/ente_theme.dart";
+import "package:photos/ui/common/loading_widget.dart";
 import 'package:photos/ui/home/memories/memory_cover_widget.dart';
 
 class MemoriesWidget extends StatefulWidget {
@@ -17,9 +17,10 @@ class MemoriesWidget extends StatefulWidget {
 }
 
 class _MemoriesWidgetState extends State<MemoriesWidget> {
-  final double _widthOfItem = 85;
   late ScrollController _controller;
   late StreamSubscription<MemoriesSettingChanged> _subscription;
+  late double _maxHeight;
+  late double _maxWidth;
 
   @override
   void initState() {
@@ -32,6 +33,16 @@ class _MemoriesWidgetState extends State<MemoriesWidget> {
     _controller = ScrollController();
   }
 
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    final screenWidth = MediaQuery.sizeOf(context).width;
+    //factor will be 2 for most phones in portrait mode
+    final factor = (screenWidth / 220).ceil();
+    _maxWidth = screenWidth / (factor * 2);
+    _maxHeight = _maxWidth / MemoryCoverWidget.aspectRatio;
+  }
+
   @override
   void dispose() {
     _subscription.cancel();
@@ -48,34 +59,14 @@ class _MemoriesWidgetState extends State<MemoriesWidget> {
       future: MemoriesService.instance.getMemories(),
       builder: (context, snapshot) {
         if (snapshot.hasError || !snapshot.hasData || snapshot.data!.isEmpty) {
-          return const SizedBox.shrink();
+          return SizedBox(
+            height: _maxHeight + 12 + 10,
+            child: const EnteLoadingWidget(),
+          );
         } else {
           return Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                child: Stack(
-                  alignment: Alignment.centerRight,
-                  children: [
-                    const RotationTransition(
-                      turns: AlwaysStoppedAnimation(20 / 360),
-                      child: Icon(
-                        Icons.favorite_rounded,
-                        color: Color.fromRGBO(0, 179, 60, 0.3),
-                        size: 32,
-                      ),
-                    ),
-                    Padding(
-                      padding: const EdgeInsets.only(right: 16),
-                      child: Text(
-                        S.of(context).memories,
-                        style: getEnteTextTheme(context).body,
-                      ),
-                    ),
-                  ],
-                ),
-              ),
               const SizedBox(
                 height: 12,
               ),
@@ -92,19 +83,27 @@ class _MemoriesWidgetState extends State<MemoriesWidget> {
     final collatedMemories = _collateMemories(memories);
 
     return SizedBox(
-      height: MemoryCoverWidget.height,
+      height: _maxHeight,
       child: ListView.builder(
         physics: const BouncingScrollPhysics(),
         scrollDirection: Axis.horizontal,
         controller: _controller,
         itemCount: collatedMemories.length,
         itemBuilder: (context, itemIndex) {
-          final offsetOfItem = _widthOfItem * itemIndex;
+          final offsetOfItem = _maxWidth * itemIndex;
           return MemoryCoverWidget(
             memories: collatedMemories[itemIndex],
             controller: _controller,
             offsetOfItem: offsetOfItem,
-          );
+            maxHeight: _maxHeight,
+            maxWidth: _maxWidth,
+          )
+              .animate(delay: Duration(milliseconds: 75 * itemIndex))
+              .fadeIn(
+                duration: const Duration(milliseconds: 250),
+                curve: Curves.easeInOutCubic,
+              )
+              .slideX(begin: 0.04, end: 0);
         },
       ),
     );

lib/ui/home/memories/memory_cover_widget.dart

@@ -10,14 +10,17 @@ class MemoryCoverWidget extends StatefulWidget {
   final List<Memory> memories;
   final ScrollController controller;
   final double offsetOfItem;
+  final double maxHeight;
+  final double maxWidth;
   static const centerStrokeWidth = 1.0;
-  static const width = 85.0;
-  static const height = 125.0;
+  static const aspectRatio = 0.68;
 
   const MemoryCoverWidget({
     required this.memories,
     required this.controller,
     required this.offsetOfItem,
+    required this.maxHeight,
+    required this.maxWidth,
     super.key,
   });
 
@@ -46,7 +49,7 @@ class _MemoryCoverWidgetState extends State<MemoryCoverWidget> {
       builder: (context, child) {
         final diff = (widget.controller.offset - widget.offsetOfItem) +
             widthOfScreen / 7;
-        final scale = 1 - (diff / widthOfScreen).abs() / 3;
+        final scale = 1 - (diff / widthOfScreen).abs() / 3.7;
         return Padding(
           padding: const EdgeInsets.symmetric(horizontal: 2.5),
           //Adding this row is a workaround for making height of memory cover
@@ -68,8 +71,8 @@ class _MemoryCoverWidgetState extends State<MemoryCoverWidget> {
             child: Row(
               children: [
                 Container(
-                  height: MemoryCoverWidget.height * scale,
-                  width: MemoryCoverWidget.width * scale,
+                  height: widget.maxHeight * scale,
+                  width: widget.maxWidth * scale,
                   decoration: BoxDecoration(
                     boxShadow: [
                       BoxShadow(
@@ -132,13 +135,13 @@ class _MemoryCoverWidgetState extends State<MemoryCoverWidget> {
                             : Container(
                                 decoration: const BoxDecoration(
                                   gradient: LinearGradient(
-                                    stops: [0, 0.35, 0.5],
+                                    stops: [0, 0.27, 0.4],
                                     colors: [
-                                      Color.fromARGB(71, 1, 222, 78),
-                                      Color(0x1901DE4D),
-                                      Color(0x0001DE4D),
+                                      Color.fromRGBO(1, 222, 78, 0.293),
+                                      Color.fromRGBO(1, 222, 77, 0.07),
+                                      Colors.transparent,
                                     ],
-                                    transform: GradientRotation(-1.2),
+                                    transform: GradientRotation(-1.1),
                                   ),
                                 ),
                               ),
@@ -157,16 +160,18 @@ class _MemoryCoverWidgetState extends State<MemoryCoverWidget> {
                                         child: Container(
                                           decoration: const BoxDecoration(
                                             gradient: LinearGradient(
-                                              stops: [0, 0.5, 1],
+                                              stops: [0, 0.1, 0.5, 0.9, 1],
                                               colors: [
                                                 Colors.transparent,
-                                                Color(0xFF01DE4D),
+                                                Color.fromRGBO(1, 222, 77, 0.1),
+                                                Color.fromRGBO(1, 222, 77, 1),
+                                                Color.fromRGBO(1, 222, 77, 0.1),
                                                 Colors.transparent,
                                               ],
                                             ),
                                           ),
                                           height: 1 * scale,
-                                          width: 68 * scale,
+                                          width: (widget.maxWidth - 16) * scale,
                                         ),
                                       ),
                                     ],
@@ -178,7 +183,7 @@ class _MemoryCoverWidgetState extends State<MemoryCoverWidget> {
                           child: Transform.scale(
                             scale: scale,
                             child: SizedBox(
-                              width: MemoryCoverWidget.width,
+                              width: widget.maxWidth,
                               child: Padding(
                                 padding: const EdgeInsets.symmetric(
                                   horizontal: 8.0,

pubspec.yaml

@@ -12,7 +12,7 @@ description: ente photos application
 # Read more about iOS versioning at
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 
-version: 0.8.36+556
+version: 0.8.38+558
 
 environment:
   sdk: ">=3.0.0 <4.0.0"