@vodafone_de/brix-components 17.1.2 → 18.0.0

package/dist/components/Video/index.js

@@ -0,0 +1,902 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import "../../index-C_6tWuWh.js";
+import "../../index-E0RMtc9X.js";
+import "../../hooks/useLinkComponent/index.js";
+import "../../styled-R9Zq1ahD.js";
+import "../../hooks/useImageComponent/index.js";
+import "../../styled-BrSdmb0C.js";
+import { a as aspectRatio16_9 } from "../../props-CLadRD1u.js";
+import styled, { keyframes, css } from "styled-components";
+import { translateLayoutPropsToCss } from "../../foundations/layout/index.js";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
+import { b as borderRadiusMd } from "../../BorderRadius-0jhn76gB.js";
+import { d as colorObjectBrand } from "../../ObjectColor-CSHEae46.js";
+import { s as spacingMd } from "../../Spacing-Dj-qX3Z5.js";
+import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+const i18n = {
+  play: "Abspielen",
+  pause: "Pausieren",
+  restart: "Von vorne abspielen",
+  rewind: "{seektime} Sekunden zurückspulen",
+  fastForward: "{seektime} Sekunden vorspulen",
+  seek: "Wiedergabeposition",
+  seekLabel: "{currentTime} von {duration}",
+  played: "Abgespielt",
+  buffered: "Geladen",
+  currentTime: "Aktuelle Zeit",
+  duration: "Gesamtdauer",
+  volume: "Lautstärke",
+  mute: "Stummschalten",
+  unmute: "Stummschaltung aufheben",
+  captions: "Untertitel",
+  enableCaptions: "Untertitel einblenden",
+  disableCaptions: "Untertitel ausblenden",
+  enterFullscreen: "Vollbild aktivieren",
+  exitFullscreen: "Vollbild beenden",
+  pip: "Bild-in-Bild",
+  airplay: "AirPlay",
+  settings: "Einstellungen",
+  menuBack: "Zurück zum Menü",
+  speed: "Geschwindigkeit",
+  normal: "Normal",
+  quality: "Qualität",
+  loop: "Wiederholen",
+  start: "Anfang",
+  end: "Ende",
+  all: "Alle",
+  reset: "Zurücksetzen",
+  disabled: "Aus",
+  enabled: "Ein",
+  download: "Herunterladen",
+  frameTitle: "Videoplayer: {title}",
+  advertisement: "Werbung"
+};
+const plyrFadeIn = keyframes({
+  "0%": {
+    opacity: 0
+  },
+  to: {
+    opacity: 1
+  }
+});
+const plyrPopup = keyframes({
+  "0%": {
+    opacity: 0.5,
+    transform: "translateY(10px)"
+  },
+  to: {
+    opacity: 1,
+    transform: "translateY(0)"
+  }
+});
+const plyrProgress = keyframes({
+  to: {
+    backgroundPosition: "var(--plyr-progress-loading-size, 25px) 0"
+  }
+});
+const VideoStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "VideoStyled",
+  componentId: "sc-2y53u0-0"
+})(
+  ({
+    roundedCorners,
+    aspectRatio = aspectRatio16_9,
+    bottomSpacing = spacingMd
+  }) => ({
+    position: "relative",
+    width: "100%",
+    // The box is sized by the aspect ratio, never by the video itself: the
+    // player keeps its height before the first frame is decoded, so nothing
+    // shifts once the media loads.
+    aspectRatio,
+    overflow: "hidden",
+    ...roundedCorners && {
+      borderRadius: getBorderRadius(borderRadiusMd)
+    },
+    ...getBottomSpacing({
+      bottomSpacing
+    }),
+    // Ensure Plyr fills the container
+    //
+    // Ported subset of `plyr/dist/plyr.css` (Plyr v3, default video controls only).
+    // This intentionally excludes anything audio-, YouTube- or Vimeo-specific, since
+    // this component only ever renders a self-hosted <video> with Plyr's default UI.
+    // Kept as scoped styled-components CSS (instead of a global stylesheet import) so
+    // it doesn't leak outside this component and doesn't require consumers to import a
+    // separate `dist/brix.css` (see ADR-003, ADR-014).
+    ".plyr": {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      width: "100%",
+      // Fill the aspect-ratio box set on the container above
+      height: "100%",
+      maxWidth: "100%",
+      minWidth: "200px",
+      lineHeight: 1.7,
+      zIndex: 0,
+      // Recolor Plyr's controls (progress, volume, hover/focus states)
+      // from its default blue to the brand object color
+      // https://github.com/sampotts/plyr#customizing-the-css
+      "--plyr-color-main": getObjectColor(colorObjectBrand),
+      "& video": {
+        display: "block",
+        height: "100%",
+        width: "100%",
+        // Letterbox instead of distorting when the media ratio differs
+        // from the configured aspectRatio
+        objectFit: "contain"
+      },
+      "&:focus": {
+        outline: 0
+      },
+      // .plyr--video: self-hosted video player wrapper
+      "&.plyr--video": {
+        overflow: "hidden"
+      },
+      "&.plyr--video.plyr--menu-open": {
+        overflow: "visible"
+      },
+      // .plyr__video-wrapper: positioned wrapper for the native <video> element and poster
+      "& .plyr__video-wrapper": {
+        background: "var(--plyr-video-background, #000)",
+        borderRadius: "inherit",
+        height: "100%",
+        margin: "auto",
+        overflow: "hidden",
+        position: "relative",
+        width: "100%"
+      },
+      "& .plyr__video-wrapper--fixed-ratio": {
+        aspectRatio: "16/9",
+        "@supports not (aspect-ratio: 16/9)": {
+          height: 0,
+          paddingBottom: "56.25%",
+          position: "relative"
+        }
+      },
+      "& .plyr__video-wrapper--fixed-ratio video": {
+        border: 0,
+        height: "100%",
+        left: 0,
+        position: "absolute",
+        top: 0,
+        width: "100%"
+      },
+      // .plyr__poster: poster image shown before playback starts
+      "& .plyr__poster": {
+        backgroundColor: "var(--plyr-video-background, #000)",
+        backgroundPosition: "50% 50%",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "contain",
+        height: "100%",
+        left: 0,
+        opacity: 0,
+        position: "absolute",
+        top: 0,
+        transition: "opacity 0.2s ease",
+        width: "100%",
+        zIndex: 1
+      },
+      "&.plyr--stopped.plyr__poster-enabled .plyr__poster": {
+        opacity: 1
+      },
+      // .plyr__controls: control bar container (play/pause, progress, volume, time, settings, fullscreen)
+      "& .plyr__controls": {
+        alignItems: "center",
+        display: "flex",
+        justifyContent: "flex-end",
+        textAlign: "center"
+      },
+      "& .plyr__controls .plyr__progress__container": {
+        flex: 1,
+        minWidth: 0
+      },
+      "& .plyr__controls .plyr__controls__item": {
+        marginLeft: "calc(var(--plyr-control-spacing, 10px) / 4)"
+      },
+      "& .plyr__controls .plyr__controls__item:first-child": {
+        marginLeft: 0,
+        marginRight: "auto"
+      },
+      "& .plyr__controls .plyr__controls__item.plyr__progress__container": {
+        paddingLeft: "calc(var(--plyr-control-spacing, 10px) / 4)"
+      },
+      "& .plyr__controls .plyr__controls__item.plyr__time": {
+        padding: "0 calc(var(--plyr-control-spacing, 10px) / 2)"
+      },
+      "& .plyr__controls .plyr__controls__item.plyr__progress__container:first-child, & .plyr__controls .plyr__controls__item.plyr__time:first-child, & .plyr__controls .plyr__controls__item.plyr__time + .plyr__time": {
+        paddingLeft: 0
+      },
+      "& [data-plyr=airplay], & [data-plyr=captions], & [data-plyr=fullscreen], & [data-plyr=pip]": {
+        display: "none"
+      },
+      "& .plyr__controls:empty": {
+        display: "none"
+      },
+      "&.plyr--airplay-supported [data-plyr=airplay], &.plyr--captions-enabled [data-plyr=captions], &.plyr--fullscreen-enabled [data-plyr=fullscreen], &.plyr--pip-supported [data-plyr=pip]": {
+        display: "inline-block"
+      },
+      "&.plyr--video .plyr__controls": {
+        background: "var(--plyr-video-controls-background, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)))",
+        borderBottomLeftRadius: "inherit",
+        borderBottomRightRadius: "inherit",
+        bottom: 0,
+        color: "var(--plyr-video-control-color, #fff)",
+        left: 0,
+        padding: "calc(var(--plyr-control-spacing, 10px) / 2)",
+        paddingTop: "calc(var(--plyr-control-spacing, 10px) * 2)",
+        position: "absolute",
+        right: 0,
+        transition: "opacity 0.4s ease-in-out, transform 0.4s ease-in-out",
+        zIndex: 3,
+        "@media (min-width: 480px)": {
+          padding: "var(--plyr-control-spacing, 10px)",
+          paddingTop: "calc(var(--plyr-control-spacing, 10px) * 3.5)"
+        }
+      },
+      "&.plyr--video.plyr--hide-controls .plyr__controls": {
+        opacity: 0,
+        pointerEvents: "none",
+        transform: "translateY(100%)"
+      },
+      "&.plyr--video .plyr__control:focus-visible, &.plyr--video .plyr__control:hover, &.plyr--video .plyr__control[aria-expanded=true]": {
+        background: "var(--plyr-video-control-background-hover, var(--plyr-color-main, #00b2ff))",
+        color: "var(--plyr-video-control-color-hover, #fff)"
+      },
+      // .plyr__control: shared button styles for all control bar buttons
+      "& .plyr__control": {
+        background: "transparent",
+        border: 0,
+        borderRadius: "var(--plyr-control-radius, 4px)",
+        color: "inherit",
+        cursor: "pointer",
+        flexShrink: 0,
+        overflow: "visible",
+        padding: "calc(var(--plyr-control-spacing, 10px) * 0.7)",
+        position: "relative",
+        transition: "all 0.1s ease-in-out"
+      },
+      "& .plyr__control svg": {
+        display: "block",
+        fill: "currentColor",
+        height: "var(--plyr-control-icon-size, 18px)",
+        pointerEvents: "none",
+        width: "var(--plyr-control-icon-size, 18px)"
+      },
+      "& .plyr__control:focus": {
+        outline: 0
+      },
+      "& .plyr__control:focus-visible": {
+        outline: "2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, #00b2ff))",
+        outlineOffset: "2px"
+      },
+      "& a.plyr__control": {
+        textDecoration: "none"
+      },
+      // .plyr__sr-only: visually hidden labels (e.g. "Abspielen" inside the
+      // overlaid play button) that must stay available to screen readers
+      "& .plyr__sr-only": {
+        clip: "rect(1px, 1px, 1px, 1px)",
+        border: 0,
+        height: "1px",
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        width: "1px"
+      },
+      "& .plyr__control.plyr__control--pressed .icon--not-pressed, & .plyr__control.plyr__control--pressed .label--not-pressed, & .plyr__control:not(.plyr__control--pressed) .icon--pressed, & .plyr__control:not(.plyr__control--pressed) .label--pressed": {
+        display: "none"
+      },
+      // .plyr__control--overlaid: big centered play button shown before playback starts
+      "& .plyr__control--overlaid": {
+        background: "var(--plyr-video-control-background-hover, var(--plyr-color-main, #00b2ff))",
+        border: 0,
+        borderRadius: "100%",
+        color: "var(--plyr-video-control-color, #fff)",
+        display: "none",
+        left: "50%",
+        opacity: 0.9,
+        padding: "calc(var(--plyr-control-spacing, 10px) * 1.5)",
+        position: "absolute",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        transition: "0.3s",
+        zIndex: 2,
+        "& svg": {
+          left: "2px",
+          position: "relative",
+          // Plyr's overlaid play icon uses a fixed 35x35 viewBox that isn't
+          // covered by any of the design system's icon size tokens
+          // (`src/foundations/types/IconSize.ts`), so the literal Plyr default
+          // is kept as-is here.
+          height: "35px",
+          width: "35px"
+        }
+      },
+      "& .plyr__control--overlaid:focus, & .plyr__control--overlaid:hover": {
+        opacity: 1
+      },
+      "&.plyr--playing .plyr__control--overlaid": {
+        opacity: 0,
+        visibility: "hidden"
+      },
+      "&.plyr--full-ui.plyr--video .plyr__control--overlaid": {
+        display: "block"
+      },
+      // .plyr__time: current time / duration labels
+      "& .plyr__time": {
+        fontSize: "var(--plyr-font-size-time, var(--plyr-font-size-small, 13px))"
+      },
+      "& .plyr__time + .plyr__time:before": {
+        content: '"⁄"',
+        marginRight: "var(--plyr-control-spacing, 10px)"
+      },
+      "@media (max-width: 767px)": {
+        "& .plyr__time + .plyr__time": {
+          display: "none"
+        }
+      },
+      // .plyr__tooltip: hover/focus tooltips for control bar buttons and the progress bar
+      "& .plyr__tooltip": {
+        background: "var(--plyr-tooltip-background, #fff)",
+        borderRadius: "var(--plyr-tooltip-radius, 5px)",
+        bottom: "100%",
+        boxShadow: "var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15))",
+        color: "var(--plyr-tooltip-color, #4a5464)",
+        fontSize: "var(--plyr-font-size-small, 13px)",
+        fontWeight: "var(--plyr-font-weight-regular, 400)",
+        left: "50%",
+        lineHeight: 1.3,
+        marginBottom: "calc(var(--plyr-control-spacing, 10px) / 2 * 2)",
+        opacity: 0,
+        padding: "calc(var(--plyr-control-spacing, 10px) / 2) calc(var(--plyr-control-spacing, 10px) / 2 * 1.5)",
+        pointerEvents: "none",
+        position: "absolute",
+        transform: "translate(-50%, 10px) scale(0.8)",
+        transformOrigin: "50% 100%",
+        transition: "transform 0.2s ease 0.1s, opacity 0.2s ease 0.1s",
+        whiteSpace: "nowrap",
+        zIndex: 2,
+        "&:before": {
+          borderLeft: "var(--plyr-tooltip-arrow-size, 4px) solid transparent",
+          borderRight: "var(--plyr-tooltip-arrow-size, 4px) solid transparent",
+          borderTop: "var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, #fff)",
+          bottom: "calc(var(--plyr-tooltip-arrow-size, 4px) * -1)",
+          content: '""',
+          height: 0,
+          left: "50%",
+          position: "absolute",
+          transform: "translateX(-50%)",
+          width: 0,
+          zIndex: 2
+        }
+      },
+      "& .plyr__control:focus-visible .plyr__tooltip, & .plyr__control:hover .plyr__tooltip, & .plyr__tooltip--visible": {
+        opacity: 1,
+        transform: "translate(-50%) scale(1)"
+      },
+      "& .plyr__control:hover .plyr__tooltip": {
+        zIndex: 3
+      },
+      "& .plyr__controls > .plyr__control:first-child .plyr__tooltip, & .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip": {
+        left: 0,
+        transform: "translateY(10px) scale(0.8)",
+        transformOrigin: "0 100%"
+      },
+      "& .plyr__controls > .plyr__control:last-child .plyr__tooltip": {
+        left: "auto",
+        right: 0,
+        transform: "translateY(10px) scale(0.8)",
+        transformOrigin: "100% 100%"
+      },
+      // .plyr__progress: seek bar (range input + buffered progress)
+      "& .plyr__progress": {
+        left: "calc(var(--plyr-range-thumb-height, 13px) * 0.5)",
+        marginRight: "var(--plyr-range-thumb-height, 13px)",
+        position: "relative",
+        "& input[type=range]": {
+          position: "relative",
+          zIndex: 2
+        },
+        "& .plyr__tooltip": {
+          left: 0,
+          maxWidth: "120px",
+          overflowWrap: "break-word"
+        }
+      },
+      "& .plyr__progress input[type=range], & .plyr__progress__buffer": {
+        marginLeft: "calc(var(--plyr-range-thumb-height, 13px) * -0.5)",
+        marginRight: "calc(var(--plyr-range-thumb-height, 13px) * -0.5)",
+        width: "calc(100% + var(--plyr-range-thumb-height, 13px))"
+      },
+      "& .plyr__progress__buffer": {
+        appearance: "none",
+        background: "transparent",
+        border: 0,
+        borderRadius: "100px",
+        height: "var(--plyr-range-track-height, 5px)",
+        left: 0,
+        marginTop: "calc(var(--plyr-range-track-height, 5px) / 2 * -1)",
+        padding: 0,
+        position: "absolute",
+        top: "50%",
+        "&::-webkit-progress-bar": {
+          background: "transparent"
+        },
+        "&::-webkit-progress-value": {
+          background: "currentColor",
+          borderRadius: "100px",
+          minWidth: "var(--plyr-range-track-height, 5px)",
+          transition: "width 0.2s ease"
+        },
+        "&::-moz-progress-bar": {
+          background: "currentColor",
+          borderRadius: "100px",
+          minWidth: "var(--plyr-range-track-height, 5px)",
+          transition: "width 0.2s ease"
+        },
+        "&::-ms-fill": {
+          borderRadius: "100px",
+          transition: "width 0.2s ease"
+        }
+      },
+      "&.plyr--loading .plyr__progress__buffer": {
+        backgroundImage: "linear-gradient(-45deg, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 25%, transparent 25%, transparent 50%, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 50%, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 75%, transparent 75%, transparent)",
+        backgroundRepeat: "repeat-x",
+        backgroundSize: "var(--plyr-progress-loading-size, 25px) var(--plyr-progress-loading-size, 25px)",
+        color: "transparent"
+      },
+      "&.plyr--video.plyr--loading .plyr__progress__buffer": {
+        backgroundColor: "var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25))"
+      },
+      "&.plyr--video .plyr__progress__buffer": {
+        color: "var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25))"
+      },
+      "& .plyr__progress__marker": {
+        backgroundColor: "var(--plyr-progress-marker-background, #fff)",
+        borderRadius: "1px",
+        height: "var(--plyr-range-track-height, 5px)",
+        position: "absolute",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        width: "var(--plyr-progress-marker-width, 3px)",
+        zIndex: 3
+      },
+      // Range inputs (progress + volume) across browser engines
+      // Hide the native media UI in WebKit/Blink — without this, Chrome and
+      // Safari paint their own controls on top of Plyr's.
+      "&.plyr--full-ui ::-webkit-media-controls": {
+        display: "none"
+      },
+      "&.plyr--full-ui ::-webkit-media-text-track-container": {
+        display: "none"
+      },
+      "&.plyr--full-ui input[type=range]::-moz-focus-outer": {
+        border: 0
+      },
+      "&.plyr--no-transition": {
+        transition: "none !important"
+      },
+      // Fullscreen (native and JS fallback)
+      "&.plyr:fullscreen, &.plyr--fullscreen-fallback": {
+        background: "#000",
+        borderRadius: "0 !important",
+        height: "100%",
+        margin: 0,
+        width: "100%",
+        "& video": {
+          height: "100%"
+        },
+        "& .plyr__control .icon--exit-fullscreen": {
+          display: "block",
+          "& + svg": {
+            display: "none"
+          }
+        },
+        "& .plyr__captions": {
+          fontSize: "var(--plyr-font-size-xlarge, 21px)"
+        },
+        "&.plyr--hide-controls": {
+          cursor: "none"
+        }
+      },
+      "&.plyr--fullscreen-fallback": {
+        inset: 0,
+        position: "fixed",
+        zIndex: 1e7
+      },
+      "&.plyr--full-ui input[type=range]": {
+        appearance: "none",
+        background: "transparent",
+        border: 0,
+        borderRadius: "calc(var(--plyr-range-thumb-height, 13px) * 2)",
+        color: "var(--plyr-range-fill-background, var(--plyr-color-main, #00b2ff))",
+        display: "block",
+        height: "calc(var(--plyr-range-thumb-active-shadow-width, 3px) * 2 + var(--plyr-range-thumb-height, 13px))",
+        margin: 0,
+        minWidth: 0,
+        padding: 0,
+        transition: "box-shadow 0.3s ease",
+        width: "100%",
+        "&::-webkit-slider-runnable-track": {
+          background: "transparent",
+          backgroundImage: "linear-gradient(to right, currentColor var(--value, 0), transparent var(--value, 0))",
+          border: 0,
+          borderRadius: "calc(var(--plyr-range-track-height, 5px) / 2)",
+          height: "var(--plyr-range-track-height, 5px)",
+          transition: "box-shadow 0.3s ease",
+          userSelect: "none"
+        },
+        "&::-webkit-slider-thumb": {
+          appearance: "none",
+          background: "var(--plyr-range-thumb-background, #fff)",
+          border: 0,
+          borderRadius: "100%",
+          boxShadow: "var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2))",
+          height: "var(--plyr-range-thumb-height, 13px)",
+          marginTop: "calc((var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px)) / 2 * -1)",
+          position: "relative",
+          transition: "all 0.2s ease",
+          width: "var(--plyr-range-thumb-height, 13px)"
+        },
+        "&::-moz-range-track": {
+          background: "transparent",
+          border: 0,
+          borderRadius: "calc(var(--plyr-range-track-height, 5px) / 2)",
+          height: "var(--plyr-range-track-height, 5px)",
+          transition: "box-shadow 0.3s ease",
+          userSelect: "none"
+        },
+        "&::-moz-range-thumb": {
+          background: "var(--plyr-range-thumb-background, #fff)",
+          border: 0,
+          borderRadius: "100%",
+          boxShadow: "var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2))",
+          height: "var(--plyr-range-thumb-height, 13px)",
+          position: "relative",
+          transition: "all 0.2s ease",
+          width: "var(--plyr-range-thumb-height, 13px)"
+        },
+        "&::-moz-range-progress": {
+          background: "currentColor",
+          borderRadius: "calc(var(--plyr-range-track-height, 5px) / 2)",
+          height: "var(--plyr-range-track-height, 5px)"
+        },
+        "&::-ms-track": {
+          color: "transparent"
+        },
+        "&:focus": {
+          outline: 0
+        },
+        // Vendor pseudo-elements must stay in separate rules: a selector
+        // list containing a pseudo-element the engine does not know
+        // invalidates the whole rule.
+        "&:focus-visible::-webkit-slider-runnable-track": {
+          outline: "2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, #00b2ff))",
+          outlineOffset: "2px"
+        },
+        "&:focus-visible::-moz-range-track": {
+          outline: "2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, #00b2ff))",
+          outlineOffset: "2px"
+        },
+        "&:focus-visible::-ms-track": {
+          outline: "2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, #00b2ff))",
+          outlineOffset: "2px"
+        }
+      },
+      "&.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track": {
+        backgroundColor: "var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25)))"
+      },
+      "&.plyr--full-ui.plyr--video input[type=range]::-moz-range-track": {
+        backgroundColor: "var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25)))"
+      },
+      "&.plyr--full-ui.plyr--video input[type=range]::-ms-track": {
+        backgroundColor: "var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25)))"
+      },
+      // .plyr__volume: volume slider + mute toggle
+      "& .plyr__volume": {
+        alignItems: "center",
+        display: "flex",
+        position: "relative"
+      },
+      "& .plyr__volume input[type=range]": {
+        marginLeft: "calc(var(--plyr-control-spacing, 10px) / 2)",
+        marginRight: "calc(var(--plyr-control-spacing, 10px) / 2)",
+        maxWidth: "90px",
+        minWidth: "60px",
+        position: "relative",
+        zIndex: 2
+      },
+      // .plyr__menu / .plyr__menu__container: settings menu (quality, speed, captions)
+      "& .plyr__menu": {
+        display: "flex",
+        position: "relative",
+        "& .plyr__control svg": {
+          transition: "transform 0.3s ease"
+        },
+        "& .plyr__control[aria-expanded=true] svg": {
+          transform: "rotate(90deg)"
+        },
+        "& .plyr__control[aria-expanded=true] .plyr__tooltip": {
+          display: "none"
+        }
+      },
+      "& .plyr__menu__container": {
+        background: "var(--plyr-menu-background, rgba(255, 255, 255, 0.9))",
+        borderRadius: "var(--plyr-menu-radius, 8px)",
+        bottom: "100%",
+        boxShadow: "var(--plyr-menu-shadow, 0 1px 2px rgba(0, 0, 0, 0.15))",
+        color: "var(--plyr-menu-color, #4a5464)",
+        fontSize: "var(--plyr-font-size-base, 15px)",
+        marginBottom: "10px",
+        position: "absolute",
+        right: "-3px",
+        textAlign: "left",
+        whiteSpace: "nowrap",
+        zIndex: 3,
+        "& > div": {
+          overflow: "hidden",
+          transition: "height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1)"
+        },
+        "&:after": {
+          border: "var(--plyr-menu-arrow-size, 4px) solid transparent",
+          borderTopColor: "var(--plyr-menu-background, rgba(255, 255, 255, 0.9))",
+          content: '""',
+          height: 0,
+          position: "absolute",
+          right: "calc(var(--plyr-control-icon-size, 18px) / 2 + var(--plyr-control-spacing, 10px) * 0.7 - var(--plyr-menu-arrow-size, 4px) / 2)",
+          top: "100%",
+          width: 0
+        },
+        "& [role=menu]": {
+          padding: "calc(var(--plyr-control-spacing, 10px) * 0.7)"
+        },
+        "& [role=menuitem], & [role=menuitemradio]": {
+          marginTop: "2px"
+        },
+        "& [role=menuitem]:first-child, & [role=menuitemradio]:first-child": {
+          marginTop: 0
+        },
+        "& .plyr__control": {
+          alignItems: "center",
+          color: "var(--plyr-menu-color, #4a5464)",
+          display: "flex",
+          fontSize: "var(--plyr-font-size-menu, var(--plyr-font-size-small, 13px))",
+          padding: "calc(var(--plyr-control-spacing, 10px) * 0.7 / 1.5) calc(var(--plyr-control-spacing, 10px) * 0.7 * 1.5)",
+          userSelect: "none",
+          width: "100%",
+          "& > span": {
+            alignItems: "inherit",
+            display: "flex",
+            width: "100%"
+          },
+          "&:after": {
+            border: "var(--plyr-menu-item-arrow-size, 4px) solid transparent",
+            content: '""',
+            position: "absolute",
+            top: "50%",
+            transform: "translateY(-50%)"
+          }
+        },
+        "& .plyr__control--forward": {
+          paddingRight: "calc(var(--plyr-control-spacing, 10px) * 0.7 * 4)",
+          "&:after": {
+            borderLeftColor: "var(--plyr-menu-arrow-color, #728197)",
+            right: "calc(var(--plyr-control-spacing, 10px) * 0.7 * 1.5 - var(--plyr-menu-item-arrow-size, 4px))"
+          },
+          "&:focus-visible:after, &:hover:after": {
+            borderLeftColor: "initial"
+          }
+        },
+        "& .plyr__control--back": {
+          fontWeight: "var(--plyr-font-weight-regular, 400)",
+          margin: "calc(var(--plyr-control-spacing, 10px) * 0.7)",
+          marginBottom: "calc(var(--plyr-control-spacing, 10px) * 0.7 / 2)",
+          paddingLeft: "calc(var(--plyr-control-spacing, 10px) * 0.7 * 4)",
+          position: "relative",
+          width: "calc(100% - var(--plyr-control-spacing, 10px) * 0.7 * 2)",
+          "&:after": {
+            borderRightColor: "var(--plyr-menu-arrow-color, #728197)",
+            left: "calc(var(--plyr-control-spacing, 10px) * 0.7 * 1.5 - var(--plyr-menu-item-arrow-size, 4px))"
+          },
+          "&:before": {
+            background: "var(--plyr-menu-back-border-color, #dcdfe5)",
+            boxShadow: "0 1px 0 var(--plyr-menu-back-border-shadow-color, #fff)",
+            content: '""',
+            height: "1px",
+            left: 0,
+            marginTop: "calc(var(--plyr-control-spacing, 10px) * 0.7 / 2)",
+            overflow: "hidden",
+            position: "absolute",
+            right: 0,
+            top: "100%"
+          },
+          "&:focus-visible:after, &:hover:after": {
+            borderRightColor: "initial"
+          }
+        },
+        "& .plyr__control[role=menuitemradio]": {
+          paddingLeft: "calc(var(--plyr-control-spacing, 10px) * 0.7)",
+          "&:after, &:before": {
+            borderRadius: "100%"
+          },
+          "&:before": {
+            background: "rgba(0, 0, 0, 0.1)",
+            content: '""',
+            display: "block",
+            flexShrink: 0,
+            height: "16px",
+            marginRight: "var(--plyr-control-spacing, 10px)",
+            transition: "all 0.3s ease",
+            width: "16px"
+          },
+          "&:after": {
+            background: "#fff",
+            border: 0,
+            height: "6px",
+            left: "12px",
+            opacity: 0,
+            top: "50%",
+            transform: "translateY(-50%) scale(0)",
+            transition: "transform 0.3s ease, opacity 0.3s ease",
+            width: "6px"
+          },
+          "&[aria-checked=true]:before": {
+            background: "var(--plyr-control-toggle-checked-background, var(--plyr-color-main, #00b2ff))"
+          },
+          "&[aria-checked=true]:after": {
+            opacity: 1,
+            transform: "translateY(-50%) scale(1)"
+          },
+          "&:focus-visible:before, &:hover:before": {
+            background: "rgba(35, 40, 47, 0.1)"
+          }
+        },
+        "& .plyr__menu__value": {
+          alignItems: "center",
+          display: "flex",
+          marginLeft: "auto",
+          marginRight: "calc(var(--plyr-control-spacing, 10px) * 0.7 * -1 - -2px)",
+          overflow: "hidden",
+          paddingLeft: "calc(var(--plyr-control-spacing, 10px) * 0.7 * 3.5)",
+          pointerEvents: "none"
+        }
+      },
+      // .plyr__captions: subtitle/caption cue rendering
+      "& .plyr__captions": {
+        bottom: 0,
+        display: "none",
+        fontSize: "var(--plyr-font-size-small, 13px)",
+        left: 0,
+        padding: "var(--plyr-control-spacing, 10px)",
+        position: "absolute",
+        textAlign: "center",
+        transition: "transform 0.4s ease-in-out",
+        width: "100%",
+        "@media (min-width: 480px)": {
+          fontSize: "var(--plyr-font-size-base, 15px)",
+          padding: "calc(var(--plyr-control-spacing, 10px) * 2)"
+        },
+        "@media (min-width: 768px)": {
+          fontSize: "var(--plyr-font-size-large, 18px)"
+        },
+        "& span:empty": {
+          display: "none"
+        }
+      },
+      "&.plyr--captions-active .plyr__captions": {
+        display: "block"
+      },
+      "&:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions": {
+        transform: "translateY(calc(var(--plyr-control-spacing, 10px) * -4))"
+      },
+      "& .plyr__caption": {
+        background: "var(--plyr-captions-background, rgba(0, 0, 0, 0.8))",
+        borderRadius: "4px",
+        boxDecorationBreak: "clone",
+        color: "var(--plyr-captions-text-color, #fff)",
+        lineHeight: "185%",
+        padding: "0.2em 0.5em",
+        whiteSpace: "pre-wrap",
+        "& div": {
+          display: "inline"
+        }
+      }
+    }
+  }),
+  ({
+    layout
+  }) => layout && translateLayoutPropsToCss(layout),
+  // Animation shorthands live outside the object styles: styled-components can
+  // only inject `keyframes` when they are interpolated into a css`` block.
+  css([".plyr .plyr__menu__container{animation:", " 0.2s ease;}.plyr.plyr--loading .plyr__progress__buffer{animation:", " 1s linear infinite;}.plyr .plyr__captions{animation:", " 0.3s ease;}"], plyrPopup, plyrProgress, plyrFadeIn)
+);
+let plyrModulePromise;
+const loadPlyr = () => plyrModulePromise ?? (plyrModulePromise = import("plyr"));
+const Video = ({
+  video,
+  preview,
+  caption,
+  roundedCorners,
+  aspectRatio = aspectRatio16_9,
+  ...props
+}) => {
+  const videoRef = useRef(null);
+  const playerRef = useRef(null);
+  const isInitialMount = useRef(true);
+  useEffect(() => {
+    const element = videoRef.current;
+    if (!element) {
+      return;
+    }
+    let cancelled = false;
+    let player = null;
+    let isReady = false;
+    let destroyRequested = false;
+    void loadPlyr().then(({
+      default: PlyrConstructor
+    }) => {
+      if (cancelled) {
+        return;
+      }
+      player = new PlyrConstructor(element, {
+        i18n,
+        tooltips: {
+          controls: true,
+          seek: true
+        },
+        // Captions are enabled by default: passing a `caption` prop is an
+        // explicit opt-in by the author. Plyr persists a later opt-out in
+        // localStorage. `language` must be pinned to 'de' - Plyr's default
+        // ('auto') resolves to the browser language and would never match
+        // our German-only track on a non-German browser.
+        captions: {
+          active: true,
+          update: true,
+          language: "de"
+        }
+      });
+      playerRef.current = player;
+      player.once("ready", () => {
+        isReady = true;
+        if (destroyRequested) {
+          player == null ? void 0 : player.destroy();
+          player = null;
+        }
+      });
+    });
+    return () => {
+      cancelled = true;
+      destroyRequested = true;
+      if (isReady) {
+        player == null ? void 0 : player.destroy();
+        player = null;
+      }
+      playerRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    (_a = videoRef.current) == null ? void 0 : _a.load();
+  }, [video.src, video.type, caption]);
+  return /* @__PURE__ */ jsx(VideoStyled, { roundedCorners, aspectRatio, ...props, children: /* @__PURE__ */ jsxs("video", { ref: videoRef, playsInline: true, poster: preview, ...caption && {
+    crossOrigin: "anonymous"
+  }, children: [
+    /* @__PURE__ */ jsx("source", { src: video.src, type: video.type }),
+    caption && /* @__PURE__ */ jsx("track", { kind: "subtitles", src: caption, srcLang: "de", label: "Deutsch" })
+  ] }) });
+};
+export {
+  VideoStyled,
+  Video as default
+};