refactor(docs): update video cover

Also adds responsive-loader support for images.

subprojects/docs/package.json

@@ -49,6 +49,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remark-smartypants": "^2.1.0",
+    "responsive-loader": "^3.1.2",
+    "sharp": "^0.33.3",
     "swc-loader": "^0.2.6",
     "terser-webpack-plugin": "^5.3.10",
     "unified": "^11.0.4",

subprojects/docs/src/components/Video/cover-background.png.license

@@ -0,0 +1,9 @@
+SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
+
+Modified image based on "Low Angle Shot of Manufacturing Plant under Blue Sky"
+available under the CC-1.0 license at
+https://www.pexels.com/photo/low-angle-shot-of-manufacturing-plant-under-blue-sky-257700/
+Original image "Bulgaria, Vratsa, Abandoned image. Free for use." by "2427999" also available at
+https://pixabay.com/photos/bulgaria-vratsa-abandoned-industry-1351947/

subprojects/docs/src/components/Video/cover.svg.license

@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0

subprojects/docs/src/components/Video/index.module.css

@@ -0,0 +1,75 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+:global(.videocolor) {
+  fill: var(--ifm-color-primary);
+}
+
+[data-theme='dark'] :global(.videocolor) {
+  fill: var(--ifm-color-primary-darker);
+}
+
+.video__container {
+  position: relative;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 560/315;
+  box-shadow: var(--ifm-global-shadow-lw);
+  transition: box-shadow var(--ifm-button-transition-duration) var(--ifm-transition-timing-default);
+}
+
+.video__container:hover,
+.video__container:focus-within {
+  box-shadow: var(--ifm-global-shadow-md);
+}
+
+.video,
+.video__button,
+.video__image,
+.video__svg,
+.video__svg > svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.video__svg text {
+  font-family: var(--ifm-font-family-base);
+}
+
+.video__button {
+  margin: 0;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+  background-size: cover;
+}
+
+.video__cover {
+  z-index: 1;
+}
+
+:global(.videoplay) {
+  fill: rgb(255 255 255 / 40%);
+  transition: fill var(--ifm-button-transition-duration) var(--ifm-transition-timing-default);
+}
+
+.video__container:hover :global(.videoplay),
+.video__container:focus-within :global(.videoplay) {
+  fill: rgb(255 255 255 / 70%);
+}
+
+:global(.videotitle) * {
+  fill: #303846;
+  transition: fill var(--ifm-button-transition-duration) var(--ifm-transition-timing-default);
+}
+
+.video__container:hover :global(.videotitle) *,
+.video__container:focus-within :global(.videotitle) * {
+  fill: #21252b;
+}

subprojects/docs/src/components/Video/index.tsx

@@ -0,0 +1,62 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import { useState } from 'react';
+
+import coverBackground from './cover-background.png?sizes[]=1920&sizes[]=1288&sizes[]=1108&&sizes[]=644&sizes[]=322&placeholder=true&rl';
+import Cover from './cover.svg';
+import styles from './index.module.css';
+
+export default function Video() {
+  const [started, setStarted] = useState(false);
+  return (
+    <>
+      <h2 className="sr-only">Check out the intro video</h2>
+      <div className="container">
+        <div className={styles['video__container']}>
+          {started ? (
+            <iframe
+              width="560"
+              height="315"
+              src="https://www.youtube-nocookie.com/embed/Qy_3udNsWsM?autoplay=1"
+              title="YouTube video player"
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
+              allowFullScreen
+              className={styles['video']}
+            />
+          ) : (
+            <button
+              type="button"
+              aria-label="Video introduction"
+              title="Play video (requires acceping cookies from YouTube)"
+              onClick={() => setStarted(true)}
+              className={styles['video__button']}
+              style={{
+                backgroundImage: `url("${coverBackground.placeholder}")`,
+              }}
+            >
+              <img
+                alt=""
+                src={coverBackground.src}
+                srcSet={coverBackground.srcSet}
+                width={coverBackground.width}
+                height={coverBackground.height}
+                sizes="(min-width: 1440px) 1288px, (min-width: 1140px) 1108px, calc(100vw - 32px)"
+                loading="lazy"
+                className={styles['video__image']}
+              />
+              <div className={styles['video__svg']}>
+                <Cover />
+              </div>
+            </button>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}