feat: support for GIFs in splash screen for web (#547)

jonbhanson · May 14, 2023 · 877c6f3 · 877c6f3
1 parent 33a3735
commit 877c6f3
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 36 deletions.
diff --git 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
@@ -478,17 +478,17 @@ const String _webCssDark = '''
 // XML's insertBefore can't have a newline at the end:
 const String _indexHtmlPicture = '''
   <picture id="splash">
-      <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x" media="(prefers-color-scheme: light)">
-      <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
-      <img class="[IMAGEMODE]" aria-hidden="true" src="splash/img/light-1x.png" alt=""/>
+      <source srcset="splash/img/light-1x.[IMAGEEXTENSION] 1x, splash/img/light-2x.[IMAGEEXTENSION] 2x, splash/img/light-3x.[IMAGEEXTENSION] 3x, splash/img/light-4x.[IMAGEEXTENSION] 4x" media="(prefers-color-scheme: light)">
+      <source srcset="splash/img/dark-1x.[IMAGEEXTENSION] 1x, splash/img/dark-2x.[IMAGEEXTENSION] 2x, splash/img/dark-3x.[IMAGEEXTENSION] 3x, splash/img/dark-4x.[IMAGEEXTENSION] 4x" media="(prefers-color-scheme: dark)">
+      <img class="[IMAGEMODE]" aria-hidden="true" src="splash/img/light-1x.[IMAGEEXTENSION]" alt=""/>
   </picture>''';
 
 // XML's insertBefore can't have a newline at the end:
 const String _indexHtmlBrandingPicture = '''
   <picture id="splash-branding">
-    <source srcset="splash/img/branding-1x.png 1x, splash/img/branding-2x.png 2x, splash/img/branding-3x.png 3x, splash/img/branding-4x.png 4x" media="(prefers-color-scheme: light)">
-    <source srcset="splash/img/branding-dark-1x.png 1x, splash/img/branding-dark-2x.png 2x, splash/img/branding-dark-3x.png 3x, splash/img/branding-dark-4x.png 4x" media="(prefers-color-scheme: dark)">
-    <img class="[BRANDINGMODE]" aria-hidden="true" src="splash/img/branding-1x.png" alt=""/>
+    <source srcset="splash/img/branding-1x.[BRANDINGEXTENSION] 1x, splash/img/branding-2x.[BRANDINGEXTENSION] 2x, splash/img/branding-3x.[BRANDINGEXTENSION] 3x, splash/img/branding-4x.[BRANDINGEXTENSION] 4x" media="(prefers-color-scheme: light)">
+    <source srcset="splash/img/branding-dark-1x.[BRANDINGEXTENSION] 1x, splash/img/branding-dark-2x.[BRANDINGEXTENSION] 2x, splash/img/branding-dark-3x.[BRANDINGEXTENSION] 3x, splash/img/branding-dark-4x.[BRANDINGEXTENSION] 4x" media="(prefers-color-scheme: dark)">
+    <img class="[BRANDINGMODE]" aria-hidden="true" src="splash/img/branding-1x.[BRANDINGEXTENSION]" alt=""/>
   </picture>''';
 
 const String _webJS = '''

diff --git 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
@@ -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