Fix video loading

src/data/ad-astra.ts

@@ -1,4 +1,5 @@
-import adAstraPoster from '../static/media/ad_astra.jpg?format=jpg';
+import adAstraWebP from '../static/media/ad_astra.jpg?format=webp';
+import adAstraJpeg from '../static/media/ad_astra.jpg?format=jpg';
 import adAstraMp4 from '../static/media/mp4/ad_astra.mp4';
 import adAstraWebM from '../static/media/webm/ad_astra.webm';
 
@@ -9,7 +10,8 @@ export const adAstraTimelineElement = {
   title: `Gaming on an ATtiny85`,
   date: `2020 Spring`,
   figure: new Video({
-    poster: adAstraPoster,
+    posterWebP: adAstraWebP,
+    posterJpeg: adAstraJpeg,
     mp4: adAstraMp4,
     webm: adAstraWebM,
   }),

src/data/city-simulation.ts

@@ -1,4 +1,5 @@
-import citySimulationPoster from '../static/media/simulation.jpg?format=jpg';
+import citySimulationPosterWebP from '../static/media/simulation.jpg?format=webp';
+import citySimulationPosterJpeg from '../static/media/simulation.jpg?format=jpg';
 import citySimulationMp4 from '../static/media/mp4/simulation.mp4';
 import citySimulationWebM from '../static/media/webm/simulation.webm';
 
@@ -8,7 +9,8 @@ export const citySimulationTimelineElement = {
   date: `2018 July - August`,
   title: `City simulation`,
   figure: new Video({
-    poster: citySimulationPoster,
+    posterWebP: citySimulationPosterWebP,
+    posterJpeg: citySimulationPosterJpeg,
     mp4: citySimulationMp4,
     webm: citySimulationWebM,
   }),

src/data/forex.ts

@@ -1,6 +1,7 @@
+import forexPosterWebP from '../static/media/forex.jpg?format=webp';
+import forexPosterJpeg from '../static/media/forex.jpg?format=jpg';
 import forexMp4 from '../static/media/mp4/forex.mp4';
 import forexWebM from '../static/media/webm/forex.webm';
-import forexPoster from '../static/media/forex.jpg';
 
 import { Video } from '../page/basics/video/video';
 
@@ -8,7 +9,8 @@ export const forexTimelineElement = {
   title: `Predicting foreign exchange rates`,
   date: `2019 Autumn`,
   figure: new Video({
-    poster: forexPoster,
+    posterWebP: forexPosterWebP,
+    posterJpeg: forexPosterJpeg,
     mp4: forexMp4,
     webm: forexWebM,
     invertButton: true,

src/data/leds.ts

@@ -1,4 +1,5 @@
-import ledPoster from '../static/media/led.jpg?format=jpg';
+import ledPosterWebP from '../static/media/led.jpg?format=webp';
+import ledPosterJpeg from '../static/media/led.jpg?format=jpg';
 import ledMp4 from '../static/media/mp4/led.mp4';
 import ledWebM from '../static/media/webm/led.webm';
 
@@ -8,7 +9,8 @@ export const ledsTimelineElement = {
   date: `2016 spring`,
   title: `Lights synchronised to music`,
   figure: new Video({
-    poster: ledPoster,
+    posterWebP: ledPosterWebP,
+    posterJpeg: ledPosterJpeg,
     mp4: ledMp4,
     webm: ledWebM,
   }),

src/data/platform-game.ts

@@ -1,4 +1,5 @@
-import platformJpeg from '../static/media/platform.png?format=jpg';
+import platformPosterWebP from '../static/media/platform.png?format=webp';
+import platformPosterJpeg from '../static/media/platform.png?format=jpg';
 import platformMp4 from '../static/media/mp4/platform.mp4';
 import platformWebM from '../static/media/webm/platform.webm';
 
@@ -8,7 +9,8 @@ export const platformGameTimelineElement = {
   date: `2017 autumn`,
   title: `Platform game`,
   figure: new Video({
-    poster: platformJpeg,
+    posterWebP: platformPosterWebP,
+    posterJpeg: platformPosterJpeg,
     mp4: platformMp4,
     webm: platformWebM,
   }),

src/page/basics/preview/preview.html.ts

@@ -5,7 +5,7 @@ import { html } from '../../../types/html';
 
 export const generate = ({ alt }: { alt: string }): html => `
   <div class="preview">
-    <img image-viewer-ignore class="poster" />
+    <img image-viewer-ignore class="poster"/>
     <div class="overlay">
       <div class="loading">${loading}</div>
       <iframe title="${alt}" allowfullscreen loading="lazy"></iframe>

src/page/basics/video/video.html.ts

@@ -1,14 +1,23 @@
 import './video.scss';
 
+import loading from '../../../static/icons/loading.svg';
+
 import { html } from '../../../types/html';
 import play from '../../../static/icons/play-button.svg';
 import { VideoParameters } from './video';
-import { last } from '../../../helper/last';
 
-export const generate = ({ webm, mp4, poster, invertButton }: VideoParameters): html => `
-  <div class="figure-container" style="padding-top:${(poster.height / poster.width) *
+export const generate = ({
+  webm,
+  mp4,
+  posterJpeg,
+  invertButton,
+}: VideoParameters): html => `
+  <div class="figure-container video-container" style="padding-top:${(posterJpeg.height /
+    posterJpeg.width) *
     100}%">
-    <video playsinline preload="none" poster="${last(poster.images)!.path}">
+    <img image-viewer-ignore class="poster"/>
+    <div class="loading">${loading}</div>
+    <video playsinline preload="none">
         <source src="${webm}" type="video/webm"/>
         <source src="${mp4}" type="video/mp4"/>
     </video>

src/page/basics/video/video.scss

@@ -1 +1,35 @@
 @use '../../../style/mixins' as *;
+
+.video-container {
+  & > *:not(.start-button) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .loading {
+    @include square(var(--large-icon-size));
+    @include absolute-center;
+    visibility: hidden;
+
+    & > svg {
+      @include square(var(--large-icon-size));
+      @include absolute-center;
+    }
+  }
+
+  video {
+    z-index: 1;
+    visibility: hidden;
+  }
+
+  &.loaded .loading {
+    visibility: visible;
+  }
+
+  &.fully-loaded video {
+    visibility: visible;
+  }
+}

src/page/basics/video/video.ts

@@ -1,13 +1,15 @@
 import { PageElement } from '../../page-element';
 import { createElement } from '../../../helper/create-element';
 import { generate } from './video.html';
+import { Image } from '../image/image';
 import { url } from '../../../types/url';
 import { ResponsiveImage } from '../../../types/responsive-image';
 
 export interface VideoParameters {
   mp4: url;
   webm: url;
-  poster: ResponsiveImage;
+  posterWebP: ResponsiveImage;
+  posterJpeg: ResponsiveImage;
   invertButton?: boolean;
 }
 
@@ -16,8 +18,16 @@ export class Video extends PageElement {
 
   public constructor(options: VideoParameters) {
     super(createElement(generate(options)));
+    this.attachElementByReplacing(
+      '.poster',
+      new Image(options.posterWebP, options.posterJpeg, `thumbnail for the video`, false)
+    );
+
     this.video = this.query('video') as HTMLVideoElement;
     this.video.addEventListener('click', this.startVideo.bind(this));
+    this.video.addEventListener('play', () =>
+      this.htmlRoot.classList.add('fully-loaded')
+    );
     this.query('.start-button').addEventListener('click', this.startVideo.bind(this));
     this.video.addEventListener('pause', this.stopVideo.bind(this));
   }
@@ -25,6 +35,7 @@ export class Video extends PageElement {
   private startVideo(e: Event) {
     if (this.video.paused) {
       this.query('.start-button').style.visibility = 'hidden';
+      this.htmlRoot.classList.add('loaded');
       this.video.play();
       this.video.controls = true;
       e.preventDefault();