From 77a9bcdddf08d6fb4b3f4cc67b68929671543487 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Sun, 25 Sep 2022 10:38:44 +0200
Subject: [PATCH] Simplify video component

---
 src/page/video/video.html.ts |  2 +-
 src/page/video/video.scss    | 12 ++----------
 src/page/video/video.ts      | 22 +++-------------------
 3 files changed, 6 insertions(+), 30 deletions(-)

diff --git a/src/page/video/video.html.ts b/src/page/video/video.html.ts
index f5c3990..388bd34 100644
--- a/src/page/video/video.html.ts
+++ b/src/page/video/video.html.ts
@@ -19,7 +19,7 @@ export const generate = ({
       alt: altText,
       isIgnoredByImageViewer: true,
     })}
-    <video playsinline preload="none">
+    <video playsinline controls preload="none">
         <source src="${webm}" type="video/webm"/>
         <source src="${mp4}" type="video/mp4"/>
     </video>
diff --git a/src/page/video/video.scss b/src/page/video/video.scss
index 50215db..eff87af 100644
--- a/src/page/video/video.scss
+++ b/src/page/video/video.scss
@@ -1,16 +1,8 @@
 @use '../../style/mixins' as *;
 
 .video-container {
-  video {
-    z-index: 1;
+  &.loaded > .start-button,
+  &:not(.loaded) > video {
     visibility: hidden;
   }
-
-  .start-button {
-    z-index: 1;
-  }
-
-  &.fully-loaded video {
-    visibility: visible;
-  }
 }
diff --git a/src/page/video/video.ts b/src/page/video/video.ts
index c223d91..acd34ad 100644
--- a/src/page/video/video.ts
+++ b/src/page/video/video.ts
@@ -4,31 +4,15 @@ import { VideoParameters } from './video-parameters';
 import { generate } from './video.html';
 
 export class Video extends PageElement {
-  private video: HTMLVideoElement;
-
   public constructor(options: VideoParameters) {
     super(createElement(generate(options)));
-    this.video = this.query('video') as HTMLVideoElement;
 
-    this.htmlRoot.addEventListener('click', this.startVideo.bind(this));
     this.query('.start-button').addEventListener('click', this.startVideo.bind(this));
-
-    this.video.addEventListener('pause', this.pauseVideo.bind(this));
   }
 
   private startVideo() {
-    if (this.video.paused) {
-      this.query('.start-button').style.visibility = 'hidden';
-      this.htmlRoot.classList.add('loaded');
-      this.video.play();
-      this.video.controls = true;
-    }
-  }
-
-  private pauseVideo() {
-    if (this.video.paused) {
-      this.query('.start-button').style.visibility = 'visible';
-      this.video.controls = false;
-    }
+    this.query('.start-button').style.visibility = 'hidden';
+    this.htmlRoot.classList.add('loaded');
+    (this.query('video') as HTMLVideoElement).play();
   }
 }