Improve blurhash part

README.md

@@ -9,6 +9,7 @@ in matrix and how the different fields influence the result.
 - [x] Image Events
 - [ ] File Events
 - [ ] Audio Events
+- [ ] Video Events
 - [ ] Encrypted Events?
 - [ ] Sticker Events
 - [ ] Emote Events
@@ -19,4 +20,4 @@ in matrix and how the different fields influence the result.
 
 ## Preview
 
-![Unable to load image](.github/previews/output.mp4)
+![Unable to load video](.github/previews/output.mp4)

src/scenes/imageEvent.meta

@@ -7,15 +7,15 @@
     },
     {
       "name": "Show Content",
-      "targetTime": 3.8600209021118603
+      "targetTime": 5.1580138261291335
     },
     {
       "name": "Show Blurhash",
-      "targetTime": 8.29364523469891
+      "targetTime": 9.591638158716183
     },
     {
       "name": "Next",
-      "targetTime": 17.183287978747725
+      "targetTime": 14.680971723168026
     }
   ],
   "seed": 3286913619

src/scenes/imageEvent.tsx

@@ -6,6 +6,7 @@ import { all, delay, waitUntil } from '@motion-canvas/core/lib/flow';
 
 import { BG, BOLD, BOXLEFT, BOXRIGHT, HIGHLIGHT, TEXTBOX, } from '../utils/constants';
 import contentImage from '../assets/image.jpg';
+import contentBlurhash from '../assets/blurhash.png';
 
 export const CODESIZE_DEFAULT = 33;
 export const CODESIZE_SMALLER = 16;
@@ -18,6 +19,8 @@ export default makeScene2D(function* (view) {
   const leftContainer = createRef<Rect>();
   const textEvent = createRef<Rect>();
   const eventContent = createRef<Rect>();
+  const contentImageRef = createRef<Img>();
+  const contentBlurhashRef = createRef<Img>();
 
   view.add(
     <>
@@ -81,9 +84,13 @@ export default makeScene2D(function* (view) {
                   ref={eventContent}
                   alignItems="center"
                   justifyContent="center"
-                  fill={TEXTBOX}
+                  fill={TEXTBOX} width={300} height={300}
                 >
-                  <Img src={contentImage} maxWidth={400} maxHeight={400} />
+                  <Rect layout={false}>
+                    <Img ref={contentImageRef} src={contentImage} width={292} height={292} opacity={1} />
+                    <Img ref={contentBlurhashRef} src={contentBlurhash} width={292} height={292} opacity={0} />
+                  </Rect>
+
                 </Rect>
               </Layout>
             </Rect>
@@ -137,12 +144,25 @@ export default makeScene2D(function* (view) {
 
   //yield* slideTransition(Direction.Right, 1);
 
+  const IMAGE_SMALL = 392;
+  const CONTAINER_IMAGE_SMALL = 400;
+  const IMAGE_EXPANDED = 400;
+  const CONTAINER_IMAGE_EXPANDED = 408;
+
+  let animation_length = 0.8;
   yield* waitUntil('Show Text Event')
   yield* all(
     colLeft().grow(4, 0.8),
     colRight().grow(1, 0.8),
     codeTextContainer().fontSize(CODESIZE_SMALLER, 0.8),
     colRightBG().margin.left(10, 0.1),
+
+    eventContent().width(CONTAINER_IMAGE_SMALL, animation_length),
+    eventContent().height(CONTAINER_IMAGE_SMALL, animation_length),
+    contentImageRef().width(IMAGE_SMALL, animation_length),
+    contentImageRef().height(IMAGE_SMALL, animation_length),
+    contentBlurhashRef().width(IMAGE_SMALL, animation_length),
+    contentBlurhashRef().height(IMAGE_SMALL, animation_length),
     delay(0.25,
       all(
         textEvent().opacity(1, 0.3),
@@ -151,7 +171,7 @@ export default makeScene2D(function* (view) {
   );
   yield* waitUntil('Show Content')
 
-  const animation_length = 1.5;
+  animation_length = 1.5;
   const radius = 5;
   const padding = 8;
   const fontSizeHighlighted = 32;
@@ -165,10 +185,21 @@ export default makeScene2D(function* (view) {
     eventContent().padding(padding, animation_length),
     eventContent().radius(radius, animation_length),
     eventContent().lineWidth(dashSize, animation_length),
+    eventContent().width(CONTAINER_IMAGE_EXPANDED, animation_length),
+    eventContent().height(CONTAINER_IMAGE_EXPANDED, animation_length),
+    contentImageRef().width(IMAGE_EXPANDED, animation_length),
+    contentImageRef().height(IMAGE_EXPANDED, animation_length),
+    contentBlurhashRef().width(IMAGE_EXPANDED, animation_length),
+    contentBlurhashRef().height(IMAGE_EXPANDED, animation_length),
   )
 
-  yield* waitUntil('Show Blurhash')
-  // TODO: replace image with blurhash
+  yield* waitUntil('Show Blurhash');
+  yield* all(
+    codeTextContainer().selection(lines(13), animation_length),
+
+    contentImageRef().opacity(0, animation_length),
+    contentBlurhashRef().opacity(1, animation_length)
+  );
 
 
 

src/scenes/textEvent.tsx

@@ -237,11 +237,12 @@ export default makeScene2D(function* (view) {
     colRight().grow(1, animation_time),
     codeTextContainer().fontSize(33, animation_time),
     textEvent().opacity(0, animation_time),
-    codeTextContainer().selection(lines(0, 10), animation_time)
+    codeTextContainer().selection(lines(0, 10), animation_time),
+    colRightBG().margin.left(0, animation_time)
   );
 
   yield* waitUntil('Next Slide')
-  yield* all(codeTextContainer().edit(1.2)`${edit(TEXT_EVENT, IMAGE_EVENT)}`, colRightBG().margin.left(0, animation_time))
+  yield* codeTextContainer().edit(1.2)`${edit(TEXT_EVENT, IMAGE_EVENT)}`
 
 
 });