Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
May 14, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions example/pubspec.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
12 changes: 6 additions & 6 deletions lib/templates.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '''
Expand Down
133 changes: 106 additions & 27 deletions lib/web.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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,
),
],
Expand Down Expand Up @@ -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",
);
}

Expand Down Expand Up @@ -170,6 +223,7 @@ void _createWebImages({
}
} else {
final image = decodeImage(File(imagePath).readAsBytesSync());

if (image == null) {
print('$imagePath could not be read');
exit(1);
Expand All @@ -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({
Expand All @@ -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");',
);
}

Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down