Move files and add minor fixes

src/page/basics/video/video-parameters.ts

@@ -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;
-}

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

@@ -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>
-`;

src/page/basics/video/video.scss

@@ -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;
-  }
-}

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) =>
-    `
+    `<a rel="noopener" target="_blank" href="${href}" ${
-    <div class="image-anchor">
-      ${svg}
-      <a rel="noopener" target="_blank" href="${href}" ${
       shouldDownload ? 'download' : ''
-    }>${title}</a>
+    } class="image-anchor">
-    </div>
+      ${svg}
-`;
+      <span>${title}</span>
+    </a>`;

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;
   }

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 =

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 {
+    > svg {
-      stroke: var(--normal-text-color);
       transition: stroke var(--transition-time), transform var(--transition-time);
     }
   }
 
-  p {
+  > p {
-    @include main-font();
     padding-bottom: var(--small-margin);
     font-size: 0.9rem;
     font-style: italic;

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}"

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;
+    }
   }
 }

src/page/preview/preview.html.ts

@@ -1,8 +1,8 @@
-import loading from '../../../../static/icons/loading.svg';
+import loading from '../../../static/icons/loading.svg';
-import play from '../../../../static/icons/play-button.svg';
+import play from '../../../static/icons/play-button.svg';
-import { html } from '../../../types/html';
+import { html } from '../../types/html';
-import { ResponsiveImage } from '../../../types/responsive-image';
+import { ResponsiveImage } from '../../types/responsive-image';
-import { Image } from '../../basics/image/image.html';
+import { Image } from '../image-viewer/image/image.html';
 import './preview.scss';
 
 export const generate = ({

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 {

src/page/preview/preview.ts

@@ -1,6 +1,6 @@
-import { createElement } from '../../../helper/create-element';
+import { createElement } from '../../helper/create-element';
-import { ResponsiveImage } from '../../../types/responsive-image';
+import { ResponsiveImage } from '../../types/responsive-image';
-import { PageElement } from '../../page-element';
+import { PageElement } from '../page-element';
 import { generate } from './preview.html';
 
 export class Preview extends PageElement {

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;
+}

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>
+`;

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;
+  }
+}

src/page/video/video.ts

@@ -1,5 +1,5 @@
-import { createElement } from '../../../helper/create-element';
+import { createElement } from '../../helper/create-element';
-import { PageElement } from '../../page-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.addEventListener('click', this.startVideo.bind(this));
-      this.htmlRoot.classList.add('fully-loaded')
-    );
     this.query('.start-button').addEventListener('click', this.startVideo.bind(this));
+
     this.video.addEventListener('pause', this.pauseVideo.bind(this));
   }