From 06915def2707a26c89c3995e807ef37dbd41198e Mon Sep 17 00:00:00 2001 From: OutdatedGuy Date: Thu, 4 May 2023 17:53:32 +0530 Subject: [PATCH] feat: support for GIFs in splash screen for web --- example/pubspec.lock | 4 +- lib/templates.dart | 12 ++-- lib/web.dart | 133 ++++++++++++++++++++++++++++++++++--------- pubspec.yaml | 2 +- 4 files changed, 115 insertions(+), 36 deletions(-) diff --git a/example/pubspec.lock b/example/pubspec.lock index 9de9448..4c9e2b8 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -131,10 +131,10 @@ packages: dependency: transitive description: name: image - sha256: "483a389d6ccb292b570c31b3a193779b1b0178e7eb571986d9a49904b6861227" + sha256: a72242c9a0ffb65d03de1b7113bc4e189686fc07c7147b8b41811d0dd0e0d9bf url: "https://pub.dev" source: hosted - version: "4.0.15" + version: "4.0.17" js: dependency: transitive description: diff --git a/lib/templates.dart b/lib/templates.dart index e19c8f7..6908567 100644 --- a/lib/templates.dart +++ b/lib/templates.dart @@ -478,17 +478,17 @@ const String _webCssDark = ''' // XML's insertBefore can't have a newline at the end: const String _indexHtmlPicture = ''' - - - + + + '''; // XML's insertBefore can't have a newline at the end: const String _indexHtmlBrandingPicture = ''' - - - + + + '''; const String _webJS = ''' diff --git a/lib/web.dart b/lib/web.dart index 3f9cc50..c967dce 100644 --- a/lib/web.dart +++ b/lib/web.dart @@ -42,7 +42,8 @@ void _createWebSplash({ // Remove items that may have been added to index.html: document .querySelector( - 'link[rel="stylesheet"][type="text/css"][href="splash/style.css"]') + 'link[rel="stylesheet"][type="text/css"][href="splash/style.css"]', + ) ?.remove(); document .querySelector( @@ -57,52 +58,98 @@ void _createWebSplash({ } darkImagePath ??= imagePath; + final imageExtension = (imagePath?.endsWith('.gif') ?? false) ? 'gif' : 'png'; + _createWebImages( imagePath: imagePath, webSplashImages: [ - _WebLaunchImageTemplate(fileName: 'light-1x.png', pixelDensity: 1), - _WebLaunchImageTemplate(fileName: 'light-2x.png', pixelDensity: 2), - _WebLaunchImageTemplate(fileName: 'light-3x.png', pixelDensity: 3), - _WebLaunchImageTemplate(fileName: 'light-4x.png', pixelDensity: 4), + _WebLaunchImageTemplate( + fileName: 'light-1x.$imageExtension', + pixelDensity: 1, + ), + _WebLaunchImageTemplate( + fileName: 'light-2x.$imageExtension', + pixelDensity: 2, + ), + _WebLaunchImageTemplate( + fileName: 'light-3x.$imageExtension', + pixelDensity: 3, + ), + _WebLaunchImageTemplate( + fileName: 'light-4x.$imageExtension', + pixelDensity: 4, + ), ], ); + final darkImageExtension = + (darkImagePath?.endsWith('.gif') ?? false) ? 'gif' : 'png'; _createWebImages( imagePath: darkImagePath, webSplashImages: [ - _WebLaunchImageTemplate(fileName: 'dark-1x.png', pixelDensity: 1), - _WebLaunchImageTemplate(fileName: 'dark-2x.png', pixelDensity: 2), - _WebLaunchImageTemplate(fileName: 'dark-3x.png', pixelDensity: 3), - _WebLaunchImageTemplate(fileName: 'dark-4x.png', pixelDensity: 4), + _WebLaunchImageTemplate( + fileName: 'dark-1x.$darkImageExtension', + pixelDensity: 1, + ), + _WebLaunchImageTemplate( + fileName: 'dark-2x.$darkImageExtension', + pixelDensity: 2, + ), + _WebLaunchImageTemplate( + fileName: 'dark-3x.$darkImageExtension', + pixelDensity: 3, + ), + _WebLaunchImageTemplate( + fileName: 'dark-4x.$darkImageExtension', + pixelDensity: 4, + ), ], ); brandingDarkImagePath ??= brandingImagePath; + final brandingExtension = + (brandingImagePath?.endsWith('.gif') ?? false) ? 'gif' : 'png'; + _createWebImages( imagePath: brandingImagePath, webSplashImages: [ - _WebLaunchImageTemplate(fileName: 'branding-1x.png', pixelDensity: 1), - _WebLaunchImageTemplate(fileName: 'branding-2x.png', pixelDensity: 2), - _WebLaunchImageTemplate(fileName: 'branding-3x.png', pixelDensity: 3), - _WebLaunchImageTemplate(fileName: 'branding-4x.png', pixelDensity: 4), + _WebLaunchImageTemplate( + fileName: 'branding-1x.$brandingExtension', + pixelDensity: 1, + ), + _WebLaunchImageTemplate( + fileName: 'branding-2x.$brandingExtension', + pixelDensity: 2, + ), + _WebLaunchImageTemplate( + fileName: 'branding-3x.$brandingExtension', + pixelDensity: 3, + ), + _WebLaunchImageTemplate( + fileName: 'branding-4x.$brandingExtension', + pixelDensity: 4, + ), ], ); + + final darkBrandingExtension = + (brandingDarkImagePath?.endsWith('.gif') ?? false) ? 'gif' : 'png'; _createWebImages( imagePath: brandingDarkImagePath, webSplashImages: [ _WebLaunchImageTemplate( - fileName: 'branding-dark-1x.png', + fileName: 'branding-dark-1x.$darkBrandingExtension', pixelDensity: 1, ), _WebLaunchImageTemplate( - fileName: 'branding-dark-2x.png', + fileName: 'branding-dark-2x.$darkBrandingExtension', pixelDensity: 2, ), _WebLaunchImageTemplate( - fileName: 'branding-dark-3x.png', + fileName: 'branding-dark-3x.$darkBrandingExtension', pixelDensity: 3, ), _WebLaunchImageTemplate( - fileName: 'branding-dark-4x.png', + fileName: 'branding-dark-4x.$darkBrandingExtension', pixelDensity: 4, ), ], @@ -133,13 +180,19 @@ void createBackgroundImages({ required String? darkBackgroundImage, }) { print('[Web] Creating background images'); + + final bgExtension = + (backgroundImage?.endsWith('.gif') ?? false) ? 'gif' : 'png'; _createBackgroundImage( backgroundImage: backgroundImage, - fileName: "light-background.png", + fileName: "light-background.$bgExtension", ); + + final darkBgExtension = + (darkBackgroundImage?.endsWith('.gif') ?? false) ? 'gif' : 'png'; _createBackgroundImage( backgroundImage: darkBackgroundImage, - fileName: "dark-background.png", + fileName: "dark-background.$darkBgExtension", ); } @@ -170,6 +223,7 @@ void _createWebImages({ } } else { final image = decodeImage(File(imagePath).readAsBytesSync()); + if (image == null) { print('$imagePath could not be read'); exit(1); @@ -194,7 +248,9 @@ void _saveImageWeb({ final file = File(_webSplashImagesFolder + template.fileName); file.createSync(recursive: true); - file.writeAsBytesSync(encodePng(newFile)); + file.writeAsBytesSync( + (template.fileName.endsWith('.gif') ? encodeGif : encodePng)(newFile), + ); } void _createSplashCss({ @@ -209,25 +265,32 @@ void _createSplashCss({ var cssContent = _webCss.replaceFirst('[LIGHTBACKGROUNDCOLOR]', '#$color'); if (darkColor != null || darkBackgroundImage != null || hasDarkImage) { darkColor ??= '000000'; - cssContent += - _webCssDark.replaceFirst('[DARKBACKGROUNDCOLOR]', '#$darkColor'); + cssContent += _webCssDark.replaceFirst( + '[DARKBACKGROUNDCOLOR]', + '#$darkColor', + ); } if (backgroundImage == null) { cssContent = cssContent.replaceFirst(' [LIGHTBACKGROUNDIMAGE]\n', ''); } else { + final bgExtension = backgroundImage.endsWith('.gif') ? 'gif' : 'png'; + cssContent = cssContent.replaceFirst( '[LIGHTBACKGROUNDIMAGE]', - 'background-image: url("img/light-background.png");', + 'background-image: url("img/light-background.$bgExtension");', ); } - if (backgroundImage == null) { + if (darkBackgroundImage == null) { cssContent = cssContent.replaceFirst(' [DARKBACKGROUNDIMAGE]\n', ''); } else { + final darkBgExtension = + darkBackgroundImage.endsWith('.gif') ? 'gif' : 'png'; + cssContent = cssContent.replaceFirst( '[DARKBACKGROUNDIMAGE]', - 'background-image: url("img/dark-background.png");', + 'background-image: url("img/dark-background.$darkBgExtension");', ); } @@ -290,7 +353,15 @@ void _updateHtml({ if (imagePath != null) { document.body?.insertBefore( html_parser.parseFragment( - _indexHtmlPicture.replaceAll('[IMAGEMODE]', imageMode), + _indexHtmlPicture + .replaceAll( + '[IMAGEMODE]', + imageMode, + ) + .replaceAll( + '[IMAGEEXTENSION]', + imagePath.endsWith('.gif') ? 'gif' : 'png', + ), container: '', ), document.body?.firstChild, @@ -302,7 +373,15 @@ void _updateHtml({ if (brandingImagePath != null) { document.body?.insertBefore( html_parser.parseFragment( - _indexHtmlBrandingPicture.replaceAll('[BRANDINGMODE]', brandingMode), + _indexHtmlBrandingPicture + .replaceAll( + '[BRANDINGMODE]', + brandingMode, + ) + .replaceAll( + '[BRANDINGEXTENSION]', + brandingImagePath.endsWith('.gif') ? 'gif' : 'png', + ), container: '', ), document.body?.firstChild, diff --git a/pubspec.yaml b/pubspec.yaml index bdaf7ef..d67b661 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -17,7 +17,7 @@ dependencies: sdk: flutter js: ^0.6.5 html: ^0.15.2 - image: ^4.0.15 + image: ^4.0.17 meta: ^1.8.0 path: ^1.8.2 universal_io: ^2.2.0