From 8b708228be86a81ca12636eb7f3e68940b07c955 Mon Sep 17 00:00:00 2001 From: Prateek Sunal Date: Fri, 22 Aug 2025 19:04:16 +0530 Subject: [PATCH] fix: add different ui for enabling it --- mobile/apps/photos/lib/l10n/intl_en.arb | 4 +- .../lib/ui/components/title_bar_widget.dart | 7 +- .../video_streaming_settings_page.dart | 162 +++++++++++------- 3 files changed, 109 insertions(+), 64 deletions(-) diff --git a/mobile/apps/photos/lib/l10n/intl_en.arb b/mobile/apps/photos/lib/l10n/intl_en.arb index 71681ab1b5..135b97e502 100644 --- a/mobile/apps/photos/lib/l10n/intl_en.arb +++ b/mobile/apps/photos/lib/l10n/intl_en.arb @@ -1831,7 +1831,7 @@ "videosProcessed": "Videos processed", "totalVideos": "Total videos", "skippedVideos": "Skipped videos", - "videoStreamingDescription": "Video streaming lets you play videos on any device without waiting. Enabling this toggle will process and generate video streams on this device.", + "videoStreamingDescription": "Play videos instantly on any device. Enable to process video streams on this device.", "videoStreamingDescriptionClickable": "More information here.", - "videoStreamingNote": "Only videos created in the last 60 days and shorter than 1 minute will be processed on this device. For the rest of the library, you will have to enable streamable videos in the desktop app." + "videoStreamingNote": "Only videos from last 60 days and under 1 minute are processed on this device. For older/longer videos, enable streaming in the desktop app." } \ No newline at end of file diff --git a/mobile/apps/photos/lib/ui/components/title_bar_widget.dart b/mobile/apps/photos/lib/ui/components/title_bar_widget.dart index 2105d9b36b..914e01fca3 100644 --- a/mobile/apps/photos/lib/ui/components/title_bar_widget.dart +++ b/mobile/apps/photos/lib/ui/components/title_bar_widget.dart @@ -15,6 +15,7 @@ class TitleBarWidget extends StatelessWidget { final Color? backgroundColor; final bool isSliver; final double? expandedHeight; + final double reducedExpandedHeight; const TitleBarWidget({ this.leading, @@ -29,6 +30,7 @@ class TitleBarWidget extends StatelessWidget { this.backgroundColor, this.isSliver = true, this.expandedHeight, + this.reducedExpandedHeight = 0, super.key, }); @@ -43,8 +45,9 @@ class TitleBarWidget extends StatelessWidget { leadingWidth: 48, automaticallyImplyLeading: false, pinned: true, - expandedHeight: - expandedHeight ?? (isFlexibleSpaceDisabled ? toolbarHeight : 102), + expandedHeight: expandedHeight ?? + (isFlexibleSpaceDisabled ? toolbarHeight : 102) - + reducedExpandedHeight, centerTitle: false, titleSpacing: 4, title: TitleWidget( diff --git a/mobile/apps/photos/lib/ui/settings/streaming/video_streaming_settings_page.dart b/mobile/apps/photos/lib/ui/settings/streaming/video_streaming_settings_page.dart index 9e8aa8def3..09d3872129 100644 --- a/mobile/apps/photos/lib/ui/settings/streaming/video_streaming_settings_page.dart +++ b/mobile/apps/photos/lib/ui/settings/streaming/video_streaming_settings_page.dart @@ -43,10 +43,31 @@ class _VideoStreamingSettingsPageState Widget build(BuildContext context) { final hasEnabled = VideoPreviewService.instance.isVideoStreamingEnabled; return Scaffold( + bottomNavigationBar: !hasEnabled + ? SafeArea( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + const SizedBox(height: 12), + ButtonWidget( + buttonType: ButtonType.primary, + labelText: context.l10n.enable, + onTap: () async { + await toggleVideoStreaming(); + }, + ), + ], + ), + ), + ) + : null, body: CustomScrollView( primary: false, slivers: [ TitleBarWidget( + reducedExpandedHeight: 16, flexibleSpaceTitle: TitleBarTitleWidget( title: AppLocalizations.of(context).videoStreaming, ), @@ -62,71 +83,89 @@ class _VideoStreamingSettingsPageState ), ], ), - SliverToBoxAdapter( - child: Padding( - padding: const EdgeInsets.only(left: 16, right: 16), - child: Column( - children: [ - Text.rich( - TextSpan( - children: [ - TextSpan( - text: AppLocalizations.of(context) - .videoStreamingDescription, - ), - const TextSpan(text: " "), - TextSpan( - text: AppLocalizations.of(context) - .videoStreamingDescriptionClickable, - style: const TextStyle( - decoration: TextDecoration.underline, - ), - recognizer: TapGestureRecognizer()..onTap = openHelp, - ), - ], - ), - textAlign: TextAlign.justify, - style: getEnteTextTheme(context).mini.copyWith( - color: getEnteColorScheme(context).textMuted, - ), - ), - ], - ), - ), - ), - if (hasEnabled) + if (hasEnabled) ...[ SliverToBoxAdapter( - child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: 10, - ).copyWith(top: 20), - child: _getStreamingSettings(context), - ), - ) - else - SliverToBoxAdapter( - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 16), + child: Container( + height: MediaQuery.sizeOf(context).height * 0.88, + padding: const EdgeInsets.only(left: 16, right: 16), child: Column( children: [ - const SizedBox(height: 12), - ButtonWidget( - buttonType: ButtonType.primary, - labelText: context.l10n.enable, - onTap: () async { - await toggleVideoStreaming(); - }, - ), - const SizedBox(height: 12), - ButtonWidget( - buttonType: ButtonType.secondary, - labelText: context.l10n.moreDetails, - onTap: openHelp, + Text.rich( + TextSpan( + children: [ + TextSpan( + text: AppLocalizations.of(context) + .videoStreamingDescription, + ), + if (hasEnabled) ...[ + const TextSpan(text: " "), + TextSpan( + text: AppLocalizations.of(context) + .videoStreamingDescriptionClickable, + style: const TextStyle( + decoration: TextDecoration.underline, + ), + recognizer: TapGestureRecognizer() + ..onTap = openHelp, + ), + ], + ], + ), + textAlign: TextAlign.justify, + style: getEnteTextTheme(context).mini.copyWith( + color: getEnteColorScheme(context).textMuted, + ), ), ], ), ), ), + SliverToBoxAdapter( + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 10, + ).copyWith(top: 30), + child: _getStreamingSettings(context), + ), + ), + ] else ...[ + SliverToBoxAdapter( + child: SizedBox( + width: double.infinity, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Image.asset( + "assets/albums-widget-static.png", + height: 160, + ), + const SizedBox(height: 16), + Text.rich( + TextSpan( + text: AppLocalizations.of(context).addSomePhotosDesc1, + children: [ + TextSpan( + text: + AppLocalizations.of(context).addSomePhotosDesc2, + style: TextStyle( + color: getEnteColorScheme(context).primary500, + ), + ), + TextSpan( + text: + AppLocalizations.of(context).addSomePhotosDesc3, + ), + ], + ), + style: getEnteTextTheme(context).smallMuted, + textAlign: TextAlign.center, + ), + const SizedBox(height: 140), + ], + ), + ), + ), + ], ], ), ); @@ -151,11 +190,11 @@ class _VideoStreamingSettingsPageState Widget _getStreamingSettings(BuildContext context) { final hasEnabled = VideoPreviewService.instance.isVideoStreamingEnabled; + final colorScheme = getEnteColorScheme(context); return Column( children: [ MenuItemWidget( - padding: const EdgeInsets.only(left: 8, right: 4), captionedTextWidget: CaptionedTextWidget( title: AppLocalizations.of(context).enabled, ), @@ -167,7 +206,9 @@ class _VideoStreamingSettingsPageState ), singleBorderRadius: 8, alignCaptionedTextToLeft: true, + menuItemColor: colorScheme.fillFaint, ), + const SizedBox(height: 8), const VideoStreamingStatusWidget(), ], ); @@ -196,6 +237,7 @@ class VideoStreamingStatusWidgetState @override Widget build(BuildContext context) { + final colorScheme = getEnteColorScheme(context); return Column( children: [ FutureBuilder( @@ -209,7 +251,6 @@ class VideoStreamingStatusWidgetState crossAxisAlignment: CrossAxisAlignment.start, children: [ MenuItemWidget( - padding: const EdgeInsets.only(left: 8, right: 6), captionedTextWidget: CaptionedTextWidget( title: AppLocalizations.of(context).processed, ), @@ -225,8 +266,9 @@ class VideoStreamingStatusWidgetState alignCaptionedTextToLeft: true, isGestureDetectorDisabled: true, key: ValueKey("processed_items_" + netProcessed.toString()), + menuItemColor: colorScheme.fillFaint, ), - const SizedBox(height: 4), + const SizedBox(height: 12), Padding( padding: const EdgeInsets.symmetric(horizontal: 8.0), child: Text(