From 51c8d06569ea56c695166aaddb3cb8f77d6581b6 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Sat, 24 Sep 2022 21:52:25 +0200
Subject: [PATCH] Move files and add minor fixes

---
 src/page/basics/video/video-parameters.ts     |  9 ------
 src/page/basics/video/video.html.ts           | 24 ----------------
 src/page/basics/video/video.scss              | 26 -----------------
 .../image-anchor/image-anchor.html.ts         | 14 ++++------
 .../image-anchor/image-anchor.scss            |  6 ++--
 .../image-button/image-button.html.ts         |  2 +-
 .../image-button/image-button.scss            | 10 +++----
 .../image/image.html.ts                       |  7 +++--
 .../{basics => image-viewer}/image/image.scss |  9 +++---
 src/page/{basics => }/preview/preview.html.ts | 10 +++----
 src/page/{basics => }/preview/preview.scss    |  7 +----
 src/page/{basics => }/preview/preview.ts      |  6 ++--
 src/page/video/video-parameters.ts            | 10 +++++++
 src/page/video/video.html.ts                  | 28 +++++++++++++++++++
 src/page/video/video.scss                     | 16 +++++++++++
 src/page/{basics => }/video/video.ts          | 10 +++----
 16 files changed, 89 insertions(+), 105 deletions(-)
 delete mode 100644 src/page/basics/video/video-parameters.ts
 delete mode 100644 src/page/basics/video/video.html.ts
 delete mode 100644 src/page/basics/video/video.scss
 rename src/page/{basics => }/image-anchor/image-anchor.html.ts (59%)
 rename src/page/{basics => }/image-anchor/image-anchor.scss (77%)
 rename src/page/{basics => }/image-button/image-button.html.ts (90%)
 rename src/page/{basics => }/image-button/image-button.scss (73%)
 rename src/page/{basics => image-viewer}/image/image.html.ts (94%)
 rename src/page/{basics => image-viewer}/image/image.scss (54%)
 rename src/page/{basics => }/preview/preview.html.ts (62%)
 rename src/page/{basics => }/preview/preview.scss (80%)
 rename src/page/{basics => }/preview/preview.ts (82%)
 create mode 100644 src/page/video/video-parameters.ts
 create mode 100644 src/page/video/video.html.ts
 create mode 100644 src/page/video/video.scss
 rename src/page/{basics => }/video/video.ts (75%)

diff --git a/src/page/basics/video/video-parameters.ts b/src/page/basics/video/video-parameters.ts
deleted file mode 100644
index c5b081d..0000000
--- a/src/page/basics/video/video-parameters.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ResponsiveImage } from '../../../types/responsive-image';
-import { url } from '../../../types/url';
-
-export interface VideoParameters {
-  mp4: url;
-  webm: url;
-  poster: ResponsiveImage;
-  invertButton?: boolean;
-}
diff --git a/src/page/basics/video/video.html.ts b/src/page/basics/video/video.html.ts
deleted file mode 100644
index 64aa506..0000000
--- a/src/page/basics/video/video.html.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import loading from '../../../../static/icons/loading.svg';
-import play from '../../../../static/icons/play-button.svg';
-import { html } from '../../../types/html';
-import { Image } from '../../basics/image/image.html';
-import { VideoParameters } from './video-parameters';
-import './video.scss';
-
-export const generate = ({ webm, mp4, poster, invertButton }: VideoParameters): html => `
-  <div class="figure-container video-container" style="padding-top:${
-    (poster.height / poster.width) * 100
-  }%">
-    ${Image({
-      image: poster,
-      alt: `thumbnail for the video`,
-      isIgnoredByImageViewer: true,
-    })}
-    <div class="loading">${loading}</div>
-    <video playsinline preload="none">
-        <source src="${webm}" type="video/webm"/>
-        <source src="${mp4}" type="video/mp4"/>
-    </video>
-    <div class="start-button ${invertButton ? 'inverted' : ''}">${play}</div>
-  </div>
-`;
diff --git a/src/page/basics/video/video.scss b/src/page/basics/video/video.scss
deleted file mode 100644
index 76a9c57..0000000
--- a/src/page/basics/video/video.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@use '../../../style/mixins' as *;
-
-.video-container {
-  .loading {
-    @include square(var(--large-icon-size));
-    @include absolute-center;
-    visibility: hidden;
-  }
-
-  video {
-    z-index: 1;
-    visibility: hidden;
-  }
-
-  .start-button {
-    z-index: 1;
-  }
-
-  &.loaded:not(.fully-loaded) .loading {
-    visibility: visible;
-  }
-
-  &.fully-loaded video {
-    visibility: visible;
-  }
-}
diff --git a/src/page/basics/image-anchor/image-anchor.html.ts b/src/page/image-anchor/image-anchor.html.ts
similarity index 59%
rename from src/page/basics/image-anchor/image-anchor.html.ts
rename to src/page/image-anchor/image-anchor.html.ts
index 41c9628..adf76e2 100644
--- a/src/page/basics/image-anchor/image-anchor.html.ts
+++ b/src/page/image-anchor/image-anchor.html.ts
@@ -1,4 +1,4 @@
-import { url } from '../../../types/url';
+import { url } from '../../types/url';
 import './image-anchor.scss';
 
 export const ImageAnchorFactory =
@@ -8,11 +8,9 @@ export const ImageAnchorFactory =
     { shouldDownload = false }: { shouldDownload?: boolean } = {}
   ) =>
   (href: url) =>
-    `
-    <div class="image-anchor">
-      ${svg}
-      <a rel="noopener" target="_blank" href="${href}" ${
+    `<a rel="noopener" target="_blank" href="${href}" ${
       shouldDownload ? 'download' : ''
-    }>${title}</a>
-    </div>
-`;
+    } class="image-anchor">
+      ${svg}
+      <span>${title}</span>
+    </a>`;
diff --git a/src/page/basics/image-anchor/image-anchor.scss b/src/page/image-anchor/image-anchor.scss
similarity index 77%
rename from src/page/basics/image-anchor/image-anchor.scss
rename to src/page/image-anchor/image-anchor.scss
index 519b4d4..a58b8ee 100644
--- a/src/page/basics/image-anchor/image-anchor.scss
+++ b/src/page/image-anchor/image-anchor.scss
@@ -1,8 +1,9 @@
-@use '../../../style/mixins' as *;
+@use '../../style/mixins' as *;
 
 .image-anchor {
   display: flex;
   align-items: center;
+  text-decoration: none;
 
   &:not(:first-child) {
     padding-top: var(--line-height);
@@ -11,10 +12,9 @@
   svg {
     @include square(var(--icon-size));
     margin-right: calc(var(--small-margin) / 2);
-    stroke: var(--normal-text-color);
   }
 
-  a {
+  span {
     @include link;
     font-size: 1.4rem;
   }
diff --git a/src/page/basics/image-button/image-button.html.ts b/src/page/image-button/image-button.html.ts
similarity index 90%
rename from src/page/basics/image-button/image-button.html.ts
rename to src/page/image-button/image-button.html.ts
index 10a3c2d..f38ea59 100644
--- a/src/page/basics/image-button/image-button.html.ts
+++ b/src/page/image-button/image-button.html.ts
@@ -1,4 +1,4 @@
-import { url } from '../../../types/url';
+import { url } from '../../types/url';
 import './image-button.scss';
 
 export const ImageButtonFactory =
diff --git a/src/page/basics/image-button/image-button.scss b/src/page/image-button/image-button.scss
similarity index 73%
rename from src/page/basics/image-button/image-button.scss
rename to src/page/image-button/image-button.scss
index a2d89ea..4d1da99 100644
--- a/src/page/basics/image-button/image-button.scss
+++ b/src/page/image-button/image-button.scss
@@ -1,21 +1,19 @@
-@use '../../../style/mixins' as *;
+@use '../../style/mixins' as *;
 
 .image-button {
   @include image-button(var(--icon-size));
 
-  .svg-container {
+  > .svg-container {
     position: relative;
     margin: auto;
     @include square(var(--icon-size));
 
-    svg {
-      stroke: var(--normal-text-color);
+    > svg {
       transition: stroke var(--transition-time), transform var(--transition-time);
     }
   }
 
-  p {
-    @include main-font();
+  > p {
     padding-bottom: var(--small-margin);
     font-size: 0.9rem;
     font-style: italic;
diff --git a/src/page/basics/image/image.html.ts b/src/page/image-viewer/image/image.html.ts
similarity index 94%
rename from src/page/basics/image/image.html.ts
rename to src/page/image-viewer/image/image.html.ts
index 59df836..fe812c5 100644
--- a/src/page/basics/image/image.html.ts
+++ b/src/page/image-viewer/image/image.html.ts
@@ -25,8 +25,9 @@ export const Image = ({
   }
     <div
       class="image"
-      style="background-size: cover; background-image: url('${image.placeholder}')",
-    }}>
+      style="background-size: cover; background-image: url('${image.placeholder}')"
+      ${isIgnoredByImageViewer ? '' : 'tabindex="0"'}
+    >
       <picture loading="lazy">
         <source
           srcset="${image.srcSet}" 
@@ -35,7 +36,7 @@ export const Image = ({
         />
         <img
           ${isIgnoredByImageViewer ? 'image-viewer-ignore' : ''}
-          tabindex="0"
+         
           loading="lazy"
           width="${image.width}"
           height="${image.height}"
diff --git a/src/page/basics/image/image.scss b/src/page/image-viewer/image/image.scss
similarity index 54%
rename from src/page/basics/image/image.scss
rename to src/page/image-viewer/image/image.scss
index cb1b5d7..8fcacc5 100644
--- a/src/page/basics/image/image.scss
+++ b/src/page/image-viewer/image/image.scss
@@ -1,13 +1,12 @@
 .image {
-  font-size: 0;
   overflow: hidden;
 
-  &:not([image-viewer-ignore]) {
-    cursor: pointer;
-  }
-
   img {
     max-width: 100%;
     max-height: 100%;
+
+    &:not([image-viewer-ignore]) {
+      cursor: pointer;
+    }
   }
 }
diff --git a/src/page/basics/preview/preview.html.ts b/src/page/preview/preview.html.ts
similarity index 62%
rename from src/page/basics/preview/preview.html.ts
rename to src/page/preview/preview.html.ts
index cf9c1f8..89cbf26 100644
--- a/src/page/basics/preview/preview.html.ts
+++ b/src/page/preview/preview.html.ts
@@ -1,8 +1,8 @@
-import loading from '../../../../static/icons/loading.svg';
-import play from '../../../../static/icons/play-button.svg';
-import { html } from '../../../types/html';
-import { ResponsiveImage } from '../../../types/responsive-image';
-import { Image } from '../../basics/image/image.html';
+import loading from '../../../static/icons/loading.svg';
+import play from '../../../static/icons/play-button.svg';
+import { html } from '../../types/html';
+import { ResponsiveImage } from '../../types/responsive-image';
+import { Image } from '../image-viewer/image/image.html';
 import './preview.scss';
 
 export const generate = ({
diff --git a/src/page/basics/preview/preview.scss b/src/page/preview/preview.scss
similarity index 80%
rename from src/page/basics/preview/preview.scss
rename to src/page/preview/preview.scss
index 868324c..a17c202 100644
--- a/src/page/basics/preview/preview.scss
+++ b/src/page/preview/preview.scss
@@ -1,4 +1,4 @@
-@use '../../../style/mixins' as *;
+@use '../../style/mixins' as *;
 
 .preview {
   position: relative;
@@ -18,11 +18,6 @@
       @include square(var(--large-icon-size));
       @include absolute-center;
       visibility: hidden;
-
-      & > svg {
-        @include square(var(--large-icon-size));
-        @include absolute-center;
-      }
     }
 
     iframe {
diff --git a/src/page/basics/preview/preview.ts b/src/page/preview/preview.ts
similarity index 82%
rename from src/page/basics/preview/preview.ts
rename to src/page/preview/preview.ts
index f292a6e..768d459 100644
--- a/src/page/basics/preview/preview.ts
+++ b/src/page/preview/preview.ts
@@ -1,6 +1,6 @@
-import { createElement } from '../../../helper/create-element';
-import { ResponsiveImage } from '../../../types/responsive-image';
-import { PageElement } from '../../page-element';
+import { createElement } from '../../helper/create-element';
+import { ResponsiveImage } from '../../types/responsive-image';
+import { PageElement } from '../page-element';
 import { generate } from './preview.html';
 
 export class Preview extends PageElement {
diff --git a/src/page/video/video-parameters.ts b/src/page/video/video-parameters.ts
new file mode 100644
index 0000000..a235dd1
--- /dev/null
+++ b/src/page/video/video-parameters.ts
@@ -0,0 +1,10 @@
+import { ResponsiveImage } from '../../types/responsive-image';
+import { url } from '../../types/url';
+
+export interface VideoParameters {
+  mp4: url;
+  webm: url;
+  poster: ResponsiveImage;
+  altText: string;
+  invertButton?: boolean;
+}
diff --git a/src/page/video/video.html.ts b/src/page/video/video.html.ts
new file mode 100644
index 0000000..f5c3990
--- /dev/null
+++ b/src/page/video/video.html.ts
@@ -0,0 +1,28 @@
+import play from '../../../static/icons/play-button.svg';
+import { html } from '../../types/html';
+import { Image } from '../image-viewer/image/image.html';
+import { VideoParameters } from './video-parameters';
+import './video.scss';
+
+export const generate = ({
+  webm,
+  mp4,
+  poster,
+  invertButton,
+  altText,
+}: VideoParameters): html => `
+  <div class="figure-container video-container" style="padding-top:${
+    (poster.height / poster.width) * 100
+  }%">
+    ${Image({
+      image: poster,
+      alt: altText,
+      isIgnoredByImageViewer: true,
+    })}
+    <video playsinline preload="none">
+        <source src="${webm}" type="video/webm"/>
+        <source src="${mp4}" type="video/mp4"/>
+    </video>
+    <div class="start-button ${invertButton ? 'inverted' : ''}" tabindex=0>${play}</div>
+  </div>
+`;
diff --git a/src/page/video/video.scss b/src/page/video/video.scss
new file mode 100644
index 0000000..50215db
--- /dev/null
+++ b/src/page/video/video.scss
@@ -0,0 +1,16 @@
+@use '../../style/mixins' as *;
+
+.video-container {
+  video {
+    z-index: 1;
+    visibility: hidden;
+  }
+
+  .start-button {
+    z-index: 1;
+  }
+
+  &.fully-loaded video {
+    visibility: visible;
+  }
+}
diff --git a/src/page/basics/video/video.ts b/src/page/video/video.ts
similarity index 75%
rename from src/page/basics/video/video.ts
rename to src/page/video/video.ts
index 4dc29a9..c223d91 100644
--- a/src/page/basics/video/video.ts
+++ b/src/page/video/video.ts
@@ -1,5 +1,5 @@
-import { createElement } from '../../../helper/create-element';
-import { PageElement } from '../../page-element';
+import { createElement } from '../../helper/create-element';
+import { PageElement } from '../page-element';
 import { VideoParameters } from './video-parameters';
 import { generate } from './video.html';
 
@@ -9,12 +9,10 @@ export class Video extends PageElement {
   public constructor(options: VideoParameters) {
     super(createElement(generate(options)));
     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.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));
   }