refactor(docs): update video cover

Also adds responsive-loader support for images.

6 files changed, 150 insertions, 0 deletions

diff --git a/subprojects/docs/src/components/Video/cover-background.png b/subprojects/docs/src/components/Video/cover-background.png
new file mode 100644
index 00000000..11369ae3
--- /dev/null
+++ b/subprojects/docs/src/components/Video/cover-background.png
diff --git a/subprojects/docs/src/components/Video/cover-background.png.license b/subprojects/docs/src/components/Video/cover-background.png.license
new file mode 100644
index 00000000..50ad65f2
--- /dev/null
+++ b/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/
diff --git a/subprojects/docs/src/components/Video/cover.svg b/subprojects/docs/src/components/Video/cover.svg
new file mode 100644
index 00000000..b263c8b3
--- /dev/null
+++ b/subprojects/docs/src/components/Video/cover.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720"><path fill="#fff" fill-opacity=".4" d="M0 95h1280v530H0z"/><path class="videocolor" fill-opacity=".702" d="M0 171h1205v378H0z"/><path fill="#CA1243" d="M1261 95h19v530h-19z"/><path class="videocolor" d="M0 171h19v378H0z"/><g class="videotitle"><path fill-rule="evenodd" d="M1143 387.09v26.293c-69.4 3.985-192.57 26.695-256 95.615v-31.074c64.343-63.744 180.16-88.046 256-90.834M887 211c55.152 64.14 162.7 91.63 256 98.004V335.3c-93.3 6.374-200.85 33.866-256 98.003v-30.676c22.983-34.262 96.979-66.532 153.51-80.476-56.535-13.944-130.53-46.214-153.51-80.475z"/><text font-size="72" font-weight="800" transform="translate(31 439)">Video</text><text font-size="72" font-weight="800" transform="translate(31 525)">introduction</text></g><path class="videoplay" fill-rule="evenodd" d="M593.12 284.23v151.53l131.07-75.765zm46.879-85.227c88.918 0 161 72.082 161 161s-72.082 161-161 161-161-72.082-161-161 72.082-161 161-161"/></svg>
diff --git a/subprojects/docs/src/components/Video/cover.svg.license b/subprojects/docs/src/components/Video/cover.svg.license
new file mode 100644
index 00000000..b80566a0
--- /dev/null
+++ b/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
diff --git a/subprojects/docs/src/components/Video/index.module.css b/subprojects/docs/src/components/Video/index.module.css
new file mode 100644
index 00000000..209c5d64
--- /dev/null
+++ b/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;
+}
diff --git a/subprojects/docs/src/components/Video/index.tsx b/subprojects/docs/src/components/Video/index.tsx
new file mode 100644
index 00000000..bd36eaa4
--- /dev/null
+++ b/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>
+    </>
+  );
+}