Add explainer video/animations

[rboyd]

One on the landing page explaining the website One upon visiting the Experiment Lab

Video support does not seem to be in core flet yet.

Brainstorming some options:

• YouTube clip in a WebView https://github.com/flet-dev/flet/pull/2049 (can we specify this branch in our requirements.txt? https://stackoverflow.com/questions/16584552/how-to-state-in-requirements-txt-a-direct-github-source)
• RIve animation https://github.com/flet-dev/flet/issues/89
• Customize the index html/js after flet build and do this outside of flet

The language from the HW4 spec is:

"When someone visits your website, there should be an animation (or some other form of communication) that explains concisely what the website does"

[...]

"Once the initial simulation has been presented to the user, leave the final picture of the grid on the screen. Keep it visible until the user pushes a “CONTINUE” button. After the CONTINUE button is pushed, a new screen appears, and your website explains a new function for the website: building, executing, and displaying results from “experiments” based on the painting simulations. This explanation could be made using text and pictures, or with a video."

[rboyd]

I found that the WebView control on flet (just merged) are for mobile only. Those won't work for us. Rive is experimental and not supported yet.

I was able to have some success with the third approach (custom html/js) and customizing the index.html emitted after the flet publish command.

With this kind of code:

<div id="myDiv" style="z-index: 2147483649; position: absolute; display: none;">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/EXhnkm22_Rc?si=CSo_kPcY_VStJgvw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
</div>

<script>
  function checkRouteAndToggleDiv() {
    const pathName = window.location.pathname;
    const div = document.getElementById('myDiv');
    if(pathName.includes('intro1')) {
      div.style.display = 'block';
    }
  }

  checkRouteAndToggleDiv();

  setInterval(checkRouteAndToggleDiv, 1000);

</script>

We would need to update the build command on the CloudFlare pages config to splice this into the generated dist/index.html page. One for each of the explainer videos, and matching their routes. Also would need to add a button to dismiss the video popup.