[alextran1502]

This PR builds the foundation for the memory feature.

The first iteration only includes "x year ago"

TODO

• Auto play

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
immich	⬜️ Ignored (Inspect)			Jun 15, 2023 1:25am

[uhthomas]

Why 30?

[alextran1502]

Cause I am 30 years old 😁

[uhthomas]

Haha

[uhthomas]

Maybe rather than a static number like 30, there should be a config which sets an upper limit?

Also, might it be more efficient to query the database for all distinct years? Would therefore be a single query followed by however many more are required, or just one query if you want to go crazy, instead of 30 always.

Something like:

SELECT DATE_PART('year', date_creation::date) AS year, count(*)
FROM assets
WHERE EXTRACT(MONTH FROM fileCreatedAt) = 2 AND EXTRACT(MONTH FROM fileCreatedAt) = 15;
GROUP BY year;

I haven't tested it, but theoretically it would produce something like:

const result = {
    2023: [{ fileCreatedAt: '2023-02-15', ... }],
    2000: [{ fileCreatedAt: '2000-02-15', ... }, { fileCreatedAt: '2000-02-15', ... }],
};

[uhthomas]

What is Dto? Data Transfer Object? What's the significance?

[alextran1502]

We use DTO for openapi to generate the strong type for request and response

[uhthomas]

Given the condition checks against showNextMemory, it may be simpler just to return that value.

Suggested change

	return true;
	}
	return false;
	return showNextMemory;

[uhthomas]

nit:

Suggested change

	currentIndex -= 1;
	currentIndex--;

[alextran1502]

This is Svelte reactivity, the rule of thumb is that the props need to be on the left hand side to trigger state changes

Read more here

https://svelte.dev/tutorial/updating-arrays-and-objects

[uhthomas]

fwiw I changed the example code to ++ and it seems to work okay.

[alextran1502]

Yeah, that indeed works, I tried to follow the convention of updating the left-hand side across the web app for consistency. However, it does make the code cleaner for this component. Thank you for the feedback

[uhthomas]

What's the purpose of an animation frame here?

[alextran1502]

I believe it is optimized for animation on screen

You can search around the internet for more information. I used this technique from implementing the virtual viewport

You can read the "Minimize changes" section in the article below

https://medium.com/google-design/google-photos-45b714dfbed1

[uhthomas]

That's a nice article, and even talks a bit about low resolution thumbnails which is relevant to some other work going on in #2649.

Though I still don't quite get the actual use of animation frame here. An animation frame is being request to increment an integer? I would imagine that won't do much if anything at all, and instead more logic would need to be moved into the animation frame. I could be mistaken though.

[jrasm91]

The biggest thing it will do is not update the progress bar when the page is in the background.

[uhthomas]

Well, it's still not great as suddenly all the animation frames are run all at once when the page is moved to the foreground again.

[uhthomas]

The behaviour also becomes really strange if the animation frame doesn't run in reasonable time, all those animation frames will run all at once as mentioned before and I'm not sure how svelte would deal with that. Would it quickly do all steps from 0-100? Seems like it needs some thinking.

[uhthomas]

Assuming the intended behaviour is for the animation to pause when the page is moved to the foreground, this may make more sense:

Details

```ts function draw() { setTimeout(() => requestAnimationFrame(() => {}), autoPlaySpeed / 100); } draw(); ```

It could be better to use requestAnimationFrame exclusively. It would be very efficient.

let previousTransition;
function draw(now) {
  previousTransition ??= now;

  const elapsed = previousTransition - now;
  const progress = elapsed / autoPlaySpeed * 100;

  if (progress >= 100) {
    autoPlayProgress = 0;
    autoPlayTransition();
    previousTransition = now;
  } else {
    autoPlayProgress = progress;
  }
 
  if (autoPlay) {
    requestAnimationFrame(draw);
  }
}
requestAnimationFrame(draw);

[uhthomas]

It would probably be worth using cancelAnimationFrame somewhere too to prevent two animation threads from running at the same time if one were to enable/disable auto-play in quick succession.