Solving difficult problem by solving way easier one

I decided to experiment a bit with new article format called AppStories where I want to write about my experiences creating apps and hopefully offer at least some advice.

The first one concerns early development of Chill Zones, my app to play custom “screensavers” on Apple TV. From the beginning the plan was that users will have like 20-60 seconds videos that will be looped until they are stopped. And there was the issue with the “yank” when the video ended and began playing from the start.

So my difficult problem was to somehow smooth the video. In theory, I knew perfectly well how to do this. I would cut a few seconds from the end, move it to start and then via cross-fade effect smooth the transition from the end of the cut part to the rest of the video.

The image below hopefully illustrates the idea.

(Awesome pro illustration, I know 😅)

So I imported AVFoundation and started poking around. The initial cutting of the part of the video wasn't that hard but it took me a lot of time anyway. Now I needed just to programatically create the cross-fade effect which is part of basically every video editor that exists.

You basically overlap the clips a bit, then fade out the first one and fade in the second one. The thing is that I could find any resources on how to this. If I remember correctly I eventually found some code but that was using a old version of AVFoundation and I couldn't get it to work.

And I got stuck...

At this point I was thinking if the cross-fade effect is really necessary and after testing a couple of pretty steady videos I realized that it would make a huge different.

With screensavers they are typically in the background and you don't focus on them like on other types of video content, but even then I could easily catch the transition with the corner of my eye and it wasn't pleasant. So maybe this side project is too difficult?

I was pondering the idea of having to dip into programatic video editing for just this one feature.

And then... the big idea!

Dunno why this did not hit me sooner, but I realized I can do this cross-fade when playing the video instead. And thats what I did. With just a two AVPlayers and some timing logic I could fade-out the first AVPlayer just before it ended playing and fade-in the second one that was just starting to play the video.

This wasn't immediate victory but it works pretty nice and was way way easier. It is also better for the user, since there is no need to process selected video and potentially mess something up.

I think this was very valuable lesson. Because my problem to solve wasn't specifically to programmatically add cross-fade effect to video file, but to smooth the transition when looping the video and this could be achieved in an easier way.