Fix video loading

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();