wip

packages/superdeck/example/.superdeck/slides.json

@@ -134,11 +134,22 @@
     }
   ],
   "assets": [
+    {
+      "path": ".superdeck/generated/thumbnail_HR8xUsF0.png",
+      "width": 512,
+      "height": 288
+    },
     {
       "path": ".superdeck/generated/thumbnail_RiJb4GGG.png",
       "width": 512,
       "height": 288
     },
+    {
+      "path": ".superdeck/generated/image_caching_woxVKegn.gif",
+      "width": 500,
+      "height": 500,
+      "reference": "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGt1MnQ5N2k3cXVma24wb3V5cThlZ3ExY2NvY3czcmozang0bGQ1ZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XzWd8acQ37byKR4tmd/giphy.gif"
+    },
     {
       "path": ".superdeck/generated/thumbnail_hhnMdIWj.png",
       "width": 512,
@@ -164,6 +175,12 @@
       "width": 512,
       "height": 288
     },
+    {
+      "path": ".superdeck/generated/image_caching_c5tnibJL.gif",
+      "width": 270,
+      "height": 480,
+      "reference": "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExeGswdWJvY2oxazJoY3g2Y2poNHBvZXlpYmd5YTg0Z2g0ODRrbng4MyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/oB6KlAvOuaLtxYy8l4/giphy.gif"
+    },
     {
       "path": ".superdeck/generated/thumbnail_shPxXVHO.png",
       "width": 512,
@@ -190,4 +207,4 @@
       "height": 288
     }
   ]
-}
+}

packages/superdeck/example/lib/main.dart

@@ -5,6 +5,7 @@ import 'src/style.dart';
 import 'src/widget/mix_demo.dart';
 
 void main() async {
+  await SuperDeckApp.initialize();
   runApp(
     Builder(builder: (context) {
       return MaterialApp(

packages/superdeck/example/pubspec_overrides.yaml

@@ -5,6 +5,6 @@ dependency_overrides:
   # mix:
   #   path: ../../mix/packages/mix
   superdeck:
-    path: ../
+    path: ..
   superdeck_cli:
     path: ../../superdeck_cli

packages/superdeck/lib/components/atoms/cache_image_widget.dart

@@ -61,12 +61,22 @@ class CacheImage extends StatelessWidget {
   return (width: cacheWidth, height: cacheHeight);
 }
 
-ImageProvider getImageProvider(String url) {
+ImageProvider getImageProvider(String url, {Size? targetSize}) {
   ImageProvider provider;
 
   final assets = $superdeck.assets;
 
-  final assetUrl = assets.firstWhereOrNull((e) => e.path == url);
+  final assetUrl = assets.firstWhereOrNull((e) {
+    if (e.path == url) {
+      return true;
+    }
+
+    if (e.reference == url) {
+      return true;
+    }
+
+    return false;
+  });
 
   url = assetUrl?.path ?? url;
 
@@ -82,7 +92,8 @@ ImageProvider getImageProvider(String url) {
     }
   }
 
-  final (:width, :height) = calculateImageSize(kResolution, assetUrl);
+  final (:width, :height) =
+      calculateImageSize(targetSize ?? kResolution, assetUrl);
 
   return ResizeImage.resizeIfNeeded(
     width,

packages/superdeck/lib/components/atoms/markdown_viewer.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_markdown/flutter_markdown.dart';
 import 'package:markdown/markdown.dart' as md;
 
+import '../../helpers/constants.dart';
 import '../../helpers/measure_size.dart';
 import '../../helpers/syntax_highlighter.dart';
 import '../../helpers/utils.dart';
@@ -28,6 +29,7 @@ class AnimatedMarkdownViewer extends ImplicitlyAnimatedWidget {
 class _AnimatedMarkdownViewerState
     extends AnimatedWidgetBaseState<AnimatedMarkdownViewer> {
   SlideSpecTween? _styleTween;
+  Size? _size;
 
   @override
   void forEachTween(TweenVisitor<dynamic> visitor) {
@@ -41,31 +43,40 @@ class _AnimatedMarkdownViewerState
   @override
   Widget build(BuildContext context) {
     final spec = _styleTween!.evaluate(animation) ?? const SlideSpec();
-    return MarkdownBody(
-      data: widget.content,
-      extensionSet: md.ExtensionSet(
-        md.ExtensionSet.gitHubFlavored.blockSyntaxes,
-        <md.InlineSyntax>[
-          md.EmojiSyntax(),
-          ...md.ExtensionSet.gitHubFlavored.inlineSyntaxes
-        ],
-      ),
-      imageBuilder: _imageBuilder,
-      builders: {
-        'code': CodeElementBuilder(spec.code),
-      },
-      bulletBuilder: (parameters) {
-        if (parameters.style == BulletStyle.orderedList) {
-          final index = parameters.index + 1;
-          return Text(
-            '$index .',
-            style: spec.list?.bulletStyle,
-          );
-        } else {
-          return Text('•', style: spec.list?.bulletStyle);
-        }
+    return MeasureSingleWidgetSize(
+      onChange: (size) {
+        setState(() {
+          _size = size;
+        });
       },
-      styleSheet: _styleTween!.evaluate(animation)?.toStyle(),
+      child: MarkdownBody(
+        data: widget.content,
+        extensionSet: md.ExtensionSet(
+          md.ExtensionSet.gitHubFlavored.blockSyntaxes,
+          <md.InlineSyntax>[
+            md.EmojiSyntax(),
+            ...md.ExtensionSet.gitHubFlavored.inlineSyntaxes
+          ],
+        ),
+        imageBuilder: (uri, title, alt) {
+          return _imageBuilder(uri, title, alt, size: _size ?? kResolution);
+        },
+        builders: {
+          'code': CodeElementBuilder(spec.code),
+        },
+        bulletBuilder: (parameters) {
+          if (parameters.style == BulletStyle.orderedList) {
+            final index = parameters.index + 1;
+            return Text(
+              '$index .',
+              style: spec.list?.bulletStyle,
+            );
+          } else {
+            return Text('•', style: spec.list?.bulletStyle);
+          }
+        },
+        styleSheet: _styleTween!.evaluate(animation)?.toStyle(),
+      ),
     );
   }
 }
@@ -124,28 +135,19 @@ List<TextSpan> updateTextColor(
 Widget _imageBuilder(
   Uri uri,
   String? title,
-  String? alt,
-) {
-  Size? size;
-  return StatefulBuilder(builder: (context, setState) {
+  String? alt, {
+  required Size size,
+}) {
+  return Builder(builder: (context) {
     final slideSpec = SlideSpec.of(context);
 
-    Widget image = CacheImage(
-      url: uri.toString(),
-      spec: slideSpec.image,
+    return ConstrainedBox(
+      constraints: calculateConstraints(size, slideSpec),
+      child: CacheImage(
+        url: uri.toString(),
+        spec: slideSpec.image,
+      ),
     );
-
-    if (size != null) {
-      return ConstrainedBox(
-        constraints: calculateConstraints(size!, slideSpec),
-        child: image,
-      );
-    } else {
-      return MeasureSingleWidgetSize(
-        onChange: (newSize) => setState(() => size = newSize),
-        child: image,
-      );
-    }
   });
 }
 
@@ -158,29 +160,6 @@ class TextBuilder extends MarkdownElementBuilder {
   }
 }
 
-final List<String> _kBlockTags = <String>[
-  'p',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'li',
-  'blockquote',
-  'pre',
-  'ol',
-  'ul',
-  'hr',
-  'table',
-  'thead',
-  'tbody',
-  'tr',
-  'section',
-];
-
-const List<String> _kListTags = <String>['ul', 'ol'];
-
 class CodeElementBuilder extends MarkdownElementBuilder {
   final MdCodeblockSpec? spec;
   CodeElementBuilder(this.spec);

packages/superdeck/lib/components/atoms/slide_thumbnail.dart

@@ -30,7 +30,7 @@ class SlideThumbnail extends HookWidget {
   @override
   Widget build(BuildContext context) {
     final processThumbnail = useFuture(
-      useMemoized(() => _generateThumbnail(slide), [slide]),
+      useMemoized(() => _generateThumbnail(slide, context), [slide]),
     );
     return LayoutBuilder(builder: (context, constraints) {
       final child = processThumbnail.when(
@@ -134,15 +134,15 @@ class _PreviewContainer extends StatelessWidget {
   }
 }
 
-Future<File> _generateThumbnail(Slide slide) async {
+Future<File> _generateThumbnail(Slide slide, BuildContext context) async {
   final thumbnailFile =
       ReferenceService.instance.getAssetFile('thumbnail_${slide.key}.png');
-  if (!kCanRunProcess) {
-    return thumbnailFile;
-  }
-  if (await thumbnailFile.exists()) {
-    return thumbnailFile;
-  }
+  // if (!kCanRunProcess) {
+  //   return thumbnailFile;
+  // }
+  // if (await thumbnailFile.exists()) {
+  //   return thumbnailFile;
+  // }
 
   final imageData = await SnapshotService.instance.generate(
     // ignore: use_build_context_synchronously

packages/superdeck/lib/components/atoms/slide_view.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import '../../providers/slide_provider.dart';
+import '../../providers/snapshot_provider.dart';
 import '../../providers/style_provider.dart';
 import '../../superdeck.dart';
 import 'cache_image_widget.dart';
@@ -20,6 +21,10 @@ class SlideView<T extends Slide> extends StatelessWidget {
 
     final variantStyle = StyleProvider.of(context, slide.style);
 
+    final isCapturing = SnapshotProvider.isCapturingOf(context);
+    final duration =
+        isCapturing ? Duration.zero : const Duration(milliseconds: 300);
+
     final backgroundWidget = slide.background != null
         ? CacheImage(
             url: slide.background!,
@@ -38,13 +43,13 @@ class SlideView<T extends Slide> extends StatelessWidget {
           return Builder(builder: (context) {
             return AnimatedBoxSpecWidget(
               spec: spec.outerContainer,
-              duration: const Duration(milliseconds: 300),
+              duration: duration,
               child: Stack(
                 children: [
                   Positioned.fill(child: backgroundWidget),
                   AnimatedBoxSpecWidget(
                     spec: spec.innerContainer,
-                    duration: const Duration(milliseconds: 300),
+                    duration: duration,
                     child: SlideBuilder(slide),
                   ),
                 ],

packages/superdeck/lib/components/molecules/slide_content.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:mix/mix.dart';
 
 import '../../models/options_model.dart';
+import '../../providers/snapshot_provider.dart';
 import '../../styles/style_spec.dart';
 import '../atoms/markdown_viewer.dart';
 
@@ -20,19 +21,32 @@ class SlideContent extends StatelessWidget {
   Widget build(context) {
     final alignment = options?.alignment ?? ContentAlignment.center;
     final spec = SlideSpec.of(context);
+    final isCapturing = SnapshotProvider.isCapturingOf(context);
 
     Widget child = AnimatedMarkdownViewer(
       content: content,
       spec: spec,
       duration: Durations.medium1,
     );
 
+    if (!isCapturing) {
+      child = SingleChildScrollView(
+        child: child,
+      );
+    } else {
+      child = Wrap(
+        clipBehavior: Clip.hardEdge,
+        children: [
+          child,
+        ],
+      );
+    }
     return AnimatedBoxSpecWidget(
       duration: const Duration(milliseconds: 300),
       spec: spec.contentContainer.copyWith(
         alignment: alignment.toAlignment(),
       ),
-      child: SingleChildScrollView(child: child),
+      child: child,
     );
   }
 }

packages/superdeck/lib/components/molecules/slide_preview.dart

@@ -17,7 +17,7 @@ class SlidePreview<T extends Slide> extends StatelessWidget {
     return Center(
       child: Container(
         decoration: BoxDecoration(
-          color: Colors.black,
+          color: const Color.fromARGB(255, 68, 60, 60),
           boxShadow: [
             BoxShadow(
               color: Colors.black.withOpacity(0.3),

packages/superdeck/lib/components/superdeck_app.dart

@@ -68,6 +68,7 @@ class SuperDeckApp extends HookWidget {
                       theme: theme,
                       builder: (context, child) {
                         return SnapshotProvider(
+                          isCapturing: true,
                           child: LoadingOverlay(
                             isLoading: $superdeck.loading,
                             key: _uniqueKey,

packages/superdeck/lib/models/asset_model.dart

@@ -40,11 +40,13 @@ final class SlideAsset with SlideAssetMappable {
   final String path;
   final int width;
   final int height;
+  final String? reference;
 
   SlideAsset({
     required this.path,
     required this.width,
     required this.height,
+    required this.reference,
   });
 
   String get extension => p.extension(path);