@ndla/ui 56.0.186-alpha.0 → 56.0.188-alpha.0

package/es/AudioPlayer/Controls.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.mjs","names":[],"sources":["../../src/AudioPlayer/Controls.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type SliderValueChangeDetails, createListCollection } from \"@ark-ui/react\";\nimport { Replay15Line, Forward15Line, PlayFill, PauseLine, VolumeUpFill, CheckLine } from \"@ndla/icons\";\nimport {\n  Button,\n  FieldRoot,\n  IconButton,\n  PopoverContent,\n  PopoverRoot,\n  PopoverTrigger,\n  SelectContent,\n  SelectControl,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectLabel,\n  SelectRoot,\n  SelectTrigger,\n  SliderControl,\n  SliderHiddenInput,\n  SliderLabel,\n  SliderRange,\n  SliderRoot,\n  SliderThumb,\n  SliderTrack,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nconst ControlsWrapper = styled(\"div\", {\n  base: {\n    borderBlockStart: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderBottomRadius: \"xsmall\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    background: \"background.default\",\n    gap: \"xsmall\",\n    paddingBlock: \"xsmall\",\n    paddingInline: \"medium\",\n    tabletWideDown: {\n      display: \"grid\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"xsmall\",\n      gridTemplateColumns: \"1fr repeat(5, auto) 1fr\",\n      gridTemplateAreas: `\n  \"track  track track     track track     track   track\"\n  \".      speed backwards play  forwards  volume  .\"\n`,\n    },\n    mobileWideDown: {\n      columnGap: \"3xsmall\",\n    },\n  },\n});\n\nconst PlayButton = styled(IconButton, {\n  base: {\n    gridArea: \"play\",\n  },\n});\n\nconst Forward15SecButton = styled(IconButton, {\n  base: {\n    gridArea: \"forwards\",\n  },\n});\n\nconst Back15SecButton = styled(IconButton, {\n  base: {\n    gridArea: \"backwards\",\n  },\n});\n\nconst ProgressWrapper = styled(\"div\", {\n  base: {\n    flex: \"1\",\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xxsmall\",\n    gridArea: \"track\",\n    paddingBlock: \"xsmall\",\n    mobileDown: {\n      paddingInline: \"xsmall\",\n    },\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    minWidth: \"xxlarge\",\n    flexShrink: \"0\",\n    textAlign: \"center\",\n  },\n});\n\nconst VolumeButton = styled(IconButton, {\n  base: {\n    gridArea: \"volume\",\n  },\n});\n\nconst SpeedButton = styled(Button, {\n  base: {\n    paddingBlock: \"auto\",\n    paddingInline: \"auto\",\n    maxWidth: \"xxlarge\",\n    maxHeight: \"xxlarge\",\n    minWidth: \"xxlarge\",\n    minHeight: \"xxlarge\",\n    \"& span\": {\n      flex: \"1\",\n    },\n  },\n});\n\nconst StyledSelectRoot = styled(SelectRoot<string>, {\n  base: {\n    gridArea: \"speed\",\n  },\n});\n\nconst StyledSliderControl = styled(SliderControl, {\n  base: {\n    height: \"surface.3xsmall\",\n    minWidth: \"small\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    paddingInline: \"small\",\n  },\n});\n\nconst formatTime = (seconds: number) => {\n  const minutes = Math.floor(seconds / 60);\n  const currentSeconds = seconds % 60;\n\n  const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;\n  return `${minutes}:${formattedSeconds}`;\n};\n\nconst speedValues = createListCollection({ items: [\"0.5\", \"0.75\", \"1\", \"1.25\", \"1.5\", \"1.75\", \"2\"] });\n\ninterface Props {\n  src: string;\n  title: string;\n}\n\nexport const Controls = ({ src, title }: Props) => {\n  const { t } = useTranslation();\n  const [speedValue, setSpeedValue] = useState(1);\n  const [volumeValue, setVolumeValue] = useState(100);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [playing, setPlaying] = useState(false);\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  useEffect(() => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      const handleTimeUpdate = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setDuration(Math.round(duration));\n      };\n\n      const handleLoadedMetaData = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setDuration(Math.round(duration));\n      };\n\n      const handleTimeEnded = () => {\n        setPlaying(false);\n      };\n\n      audioElement.addEventListener(\"timeupdate\", handleTimeUpdate);\n      audioElement.addEventListener(\"loadedmetadata\", handleLoadedMetaData);\n      audioElement.addEventListener(\"ended\", handleTimeEnded);\n      return () => {\n        audioElement.removeEventListener(\"timeupdate\", handleTimeUpdate);\n        audioElement.removeEventListener(\"loadedmetadata\", handleLoadedMetaData);\n        audioElement.removeEventListener(\"ended\", handleTimeEnded);\n      };\n    }\n  }, []);\n\n  const togglePlay = () => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      if (!playing) {\n        audioElement.play();\n      } else {\n        audioElement.pause();\n      }\n      setPlaying(!playing);\n    }\n  };\n\n  const onPlaybackRateChange = (rate: number) => {\n    setSpeedValue(rate);\n    if (audioRef.current) {\n      audioRef.current.playbackRate = rate;\n    }\n  };\n\n  const onSeekSeconds = (seconds: number) => {\n    if (audioRef.current) {\n      audioRef.current.currentTime += seconds;\n    }\n  };\n\n  const handleSliderChange = (details: SliderValueChangeDetails) => {\n    const newValue = details.value[0];\n    if (audioRef.current && newValue != null && !isNaN(newValue)) {\n      audioRef.current.currentTime = details.value[0];\n    }\n  };\n\n  const handleVolumeSliderChange = (details: SliderValueChangeDetails) => {\n    if (audioRef.current) {\n      audioRef.current.volume = details.value[0] / 100;\n      setVolumeValue(details.value[0]);\n    }\n  };\n\n  return (\n    <div>\n      {/* TODO: We should tie this up to the textual description somehow */}\n      {/* oxlint-disable-next-line jsx-a11y/media-has-caption */}\n      <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n      <ControlsWrapper>\n        <Back15SecButton\n          variant=\"tertiary\"\n          title={t(\"audio.controls.rewind15sec\")}\n          aria-label={t(\"audio.controls.rewind15sec\")}\n          onClick={() => onSeekSeconds(-15)}\n        >\n          <Replay15Line />\n        </Back15SecButton>\n        <PlayButton aria-label={t(playing ? t(\"audio.pause\") : t(\"audio.play\"))} variant=\"primary\" onClick={togglePlay}>\n          {playing ? <PauseLine /> : <PlayFill />}\n        </PlayButton>\n        <Forward15SecButton\n          variant=\"tertiary\"\n          title={t(\"audio.controls.forward15sec\")}\n          aria-label={t(\"audio.controls.forward15sec\")}\n          onClick={() => onSeekSeconds(15)}\n        >\n          <Forward15Line />\n        </Forward15SecButton>\n        <ProgressWrapper>\n          <StyledText textStyle=\"label.medium\" asChild consumeCss>\n            <div>{formatTime(currentTime)}</div>\n          </StyledText>\n          <SliderRoot\n            value={[currentTime]}\n            defaultValue={[0]}\n            step={1}\n            max={duration}\n            onValueChange={handleSliderChange}\n            getAriaValueText={(value) =>\n              t(\"audio.valueText\", {\n                start: formatTime(Math.round(value.value)),\n                end: formatTime(Math.round(duration)),\n              })\n            }\n          >\n            <SliderLabel srOnly>{t(\"audio.progressBar\")}</SliderLabel>\n            <SliderControl>\n              <SliderTrack>\n                <SliderRange />\n              </SliderTrack>\n              <SliderThumb index={0}>\n                <SliderHiddenInput />\n              </SliderThumb>\n            </SliderControl>\n          </SliderRoot>\n          <StyledText textStyle=\"label.medium\" asChild consumeCss>\n            <div>-{formatTime(Math.round(duration - currentTime))}</div>\n          </StyledText>\n        </ProgressWrapper>\n        <FieldRoot>\n          <StyledSelectRoot\n            collection={speedValues}\n            value={[speedValue.toString()]}\n            onValueChange={(details) => onPlaybackRateChange(parseFloat(details.value[0]))}\n            positioning={{ placement: \"top\" }}\n          >\n            <SelectLabel srOnly>{t(\"audio.controls.selectSpeed\")}</SelectLabel>\n            <SelectControl>\n              <SelectTrigger asChild>\n                <SpeedButton\n                  variant=\"tertiary\"\n                  title={t(\"audio.controls.selectSpeed\")}\n                  aria-label={t(\"audio.controls.selectSpeed\")}\n                >\n                  <span>{`${speedValue}x`}</span>\n                </SpeedButton>\n              </SelectTrigger>\n            </SelectControl>\n            <SelectContent>\n              {speedValues.items.map((speed) => (\n                <SelectItem key={speed} item={speed}>\n                  <SelectItemText>{speed}x</SelectItemText>\n                  <SelectItemIndicator>\n                    <CheckLine />\n                  </SelectItemIndicator>\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </StyledSelectRoot>\n        </FieldRoot>\n        <PopoverRoot positioning={{ placement: \"top\" }}>\n          <PopoverTrigger asChild>\n            <VolumeButton variant=\"tertiary\" aria-label={t(\"audio.controls.adjustVolume\")}>\n              <VolumeUpFill />\n            </VolumeButton>\n          </PopoverTrigger>\n          <StyledPopoverContent>\n            <SliderRoot\n              orientation=\"vertical\"\n              value={[volumeValue]}\n              min={0}\n              max={100}\n              defaultValue={[100]}\n              step={1}\n              onValueChange={handleVolumeSliderChange}\n            >\n              <SliderLabel srOnly>{t(\"audio.controls.adjustVolume\")}</SliderLabel>\n              <StyledSliderControl>\n                <SliderTrack>\n                  <SliderRange />\n                </SliderTrack>\n                <SliderThumb index={0}>\n                  <SliderHiddenInput />\n                </SliderThumb>\n              </StyledSliderControl>\n            </SliderRoot>\n          </StyledPopoverContent>\n        </PopoverRoot>\n      </ControlsWrapper>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Controls.mjs","names":[],"sources":["../../src/AudioPlayer/Controls.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { createListCollection } from \"@ark-ui/react\";\nimport { Replay15Line, Forward15Line, VolumeUpFill, CheckLine } from \"@ndla/icons\";\nimport {\n  Button,\n  FieldRoot,\n  IconButton,\n  PopoverContent,\n  PopoverRoot,\n  PopoverTrigger,\n  SelectContent,\n  SelectControl,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectLabel,\n  SelectRoot,\n  SelectTrigger,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { AudioElement } from \"./AudioElement\";\nimport { AudioProgress } from \"./AudioProgress\";\nimport { formatTime } from \"./audioUtils\";\nimport { PlayButton } from \"./PlayButton\";\nimport { useAudioControls } from \"./useAudioControls\";\nimport { VolumeSlider } from \"./VolumeSlider\";\n\nconst ControlsWrapper = styled(\"div\", {\n  base: {\n    borderBlockStart: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderBottomRadius: \"xsmall\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    background: \"background.default\",\n    gap: \"xsmall\",\n    paddingBlock: \"xsmall\",\n    paddingInline: \"medium\",\n    tabletWideDown: {\n      display: \"grid\",\n      paddingBlock: \"xsmall\",\n      paddingInline: \"xsmall\",\n      gridTemplateColumns: \"1fr repeat(5, auto) 1fr\",\n      gridTemplateAreas: `\n  \"track  track track     track track     track   track\"\n  \".      speed backwards play  forwards  volume  .\"\n`,\n    },\n    mobileWideDown: {\n      columnGap: \"3xsmall\",\n    },\n  },\n});\n\nconst StyledPlayButton = styled(PlayButton, {\n  base: {\n    gridArea: \"play\",\n  },\n});\n\nconst Forward15SecButton = styled(IconButton, {\n  base: {\n    gridArea: \"forwards\",\n  },\n});\n\nconst Back15SecButton = styled(IconButton, {\n  base: {\n    gridArea: \"backwards\",\n  },\n});\n\nconst ProgressWrapper = styled(\"div\", {\n  base: {\n    flex: \"1\",\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xxsmall\",\n    gridArea: \"track\",\n    paddingBlock: \"xsmall\",\n    mobileDown: {\n      paddingInline: \"xsmall\",\n    },\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    minWidth: \"xxlarge\",\n    flexShrink: \"0\",\n    textAlign: \"center\",\n  },\n});\n\nconst VolumeButton = styled(IconButton, {\n  base: {\n    gridArea: \"volume\",\n  },\n});\n\nconst SpeedButton = styled(Button, {\n  base: {\n    paddingBlock: \"auto\",\n    paddingInline: \"auto\",\n    maxWidth: \"xxlarge\",\n    maxHeight: \"xxlarge\",\n    minWidth: \"xxlarge\",\n    minHeight: \"xxlarge\",\n    \"& span\": {\n      flex: \"1\",\n    },\n  },\n});\n\nconst StyledSelectRoot = styled(SelectRoot<string>, {\n  base: {\n    gridArea: \"speed\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    paddingInline: \"small\",\n  },\n});\n\nconst speedValues = createListCollection({ items: [\"0.5\", \"0.75\", \"1\", \"1.25\", \"1.5\", \"1.75\", \"2\"] });\n\ninterface Props {\n  src: string;\n  title: string;\n  variant?: \"full\" | \"simplified\";\n}\n\nexport const Controls = ({ src, title }: Props) => {\n  const { t } = useTranslation();\n  const {\n    audioRef,\n    onEnded,\n    onHandleTime,\n    onSeekSeconds,\n    playing,\n    togglePlay,\n    handleSliderChange,\n    handleVolumeSliderChange,\n    currentTime,\n    duration,\n    speedValue,\n    onPlaybackRateChange,\n    volumeValue,\n  } = useAudioControls();\n\n  return (\n    <div>\n      <AudioElement\n        src={src}\n        title={title}\n        ref={audioRef}\n        onEnded={onEnded}\n        onLoadedMetadata={onHandleTime}\n        onTimeUpdate={onHandleTime}\n      />\n      <ControlsWrapper>\n        <Back15SecButton\n          variant=\"tertiary\"\n          title={t(\"audio.controls.rewind15sec\")}\n          aria-label={t(\"audio.controls.rewind15sec\")}\n          onClick={() => onSeekSeconds(-15)}\n        >\n          <Replay15Line />\n        </Back15SecButton>\n        <StyledPlayButton playing={playing} onClick={togglePlay} />\n        <Forward15SecButton\n          variant=\"tertiary\"\n          title={t(\"audio.controls.forward15sec\")}\n          aria-label={t(\"audio.controls.forward15sec\")}\n          onClick={() => onSeekSeconds(15)}\n        >\n          <Forward15Line />\n        </Forward15SecButton>\n        <ProgressWrapper>\n          <StyledText textStyle=\"label.medium\" asChild consumeCss>\n            <div>{formatTime(currentTime)}</div>\n          </StyledText>\n          <AudioProgress currentTime={currentTime} duration={duration} onValueChange={handleSliderChange} />\n          <StyledText textStyle=\"label.medium\" asChild consumeCss>\n            <div>-{formatTime(Math.round(duration - currentTime))}</div>\n          </StyledText>\n        </ProgressWrapper>\n        <FieldRoot>\n          <StyledSelectRoot\n            collection={speedValues}\n            value={[speedValue.toString()]}\n            onValueChange={(details) => onPlaybackRateChange(parseFloat(details.value[0]))}\n            positioning={{ placement: \"top\" }}\n          >\n            <SelectLabel srOnly>{t(\"audio.controls.selectSpeed\")}</SelectLabel>\n            <SelectControl>\n              <SelectTrigger asChild>\n                <SpeedButton\n                  variant=\"tertiary\"\n                  title={t(\"audio.controls.selectSpeed\")}\n                  aria-label={t(\"audio.controls.selectSpeed\")}\n                >\n                  <span>{`${speedValue}x`}</span>\n                </SpeedButton>\n              </SelectTrigger>\n            </SelectControl>\n            <SelectContent>\n              {speedValues.items.map((speed) => (\n                <SelectItem key={speed} item={speed}>\n                  <SelectItemText>{speed}x</SelectItemText>\n                  <SelectItemIndicator>\n                    <CheckLine />\n                  </SelectItemIndicator>\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </StyledSelectRoot>\n        </FieldRoot>\n        <PopoverRoot positioning={{ placement: \"top\" }}>\n          <PopoverTrigger asChild>\n            <VolumeButton variant=\"tertiary\" aria-label={t(\"audio.controls.adjustVolume\")}>\n              <VolumeUpFill />\n            </VolumeButton>\n          </PopoverTrigger>\n          <StyledPopoverContent>\n            <VolumeSlider value={volumeValue} onValueChange={handleVolumeSliderChange} />\n          </StyledPopoverContent>\n        </PopoverRoot>\n      </ControlsWrapper>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ,kBAAkB;CAClB,aAAa;CACb,oBAAoB;CACpB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACL,cAAc;CACd,eAAe;CACf,gBAAgB;EACd,SAAS;EACT,cAAc;EACd,eAAe;EACf,qBAAqB;EACrB,mBAAmB;;;;EAIpB;CACD,gBAAgB,EACd,WAAW,WACZ;CACF,EACF,CAAC;AAEF,MAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,EACJ,UAAU,QACX,EACF,CAAC;AAEF,MAAM,qBAAqB,OAAO,YAAY,EAC5C,MAAM,EACJ,UAAU,YACX,EACF,CAAC;AAEF,MAAM,kBAAkB,OAAO,YAAY,EACzC,MAAM,EACJ,UAAU,aACX,EACF,CAAC;AAEF,MAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ,MAAM;CACN,SAAS;CACT,YAAY;CACZ,KAAK;CACL,UAAU;CACV,cAAc;CACd,YAAY,EACV,eAAe,UAChB;CACF,EACF,CAAC;AAEF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM;CACJ,UAAU;CACV,YAAY;CACZ,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,YAAY,EACtC,MAAM,EACJ,UAAU,UACX,EACF,CAAC;AAEF,MAAM,cAAc,OAAO,QAAQ,EACjC,MAAM;CACJ,cAAc;CACd,eAAe;CACf,UAAU;CACV,WAAW;CACX,UAAU;CACV,WAAW;CACX,UAAU,EACR,MAAM,KACP;CACF,EACF,CAAC;AAEF,MAAM,mBAAmB,OAAO,YAAoB,EAClD,MAAM,EACJ,UAAU,SACX,EACF,CAAC;AAEF,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM,EACJ,eAAe,SAChB,EACF,CAAC;AAEF,MAAM,cAAc,qBAAqB,EAAE,OAAO;CAAC;CAAO;CAAQ;CAAK;CAAQ;CAAO;CAAQ;CAAI,EAAE,CAAC;AAQrG,MAAa,YAAY,EAAE,KAAK,YAAmB;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EACJ,UACA,SACA,cACA,eACA,SACA,YACA,oBACA,0BACA,aACA,UACA,YACA,sBACA,gBACE,kBAAkB;AAEtB,QACE,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,cAAD;EACO;EACE;EACP,KAAK;EACI;EACT,kBAAkB;EAClB,cAAc;EACd,CAAA,EACF,qBAAC,iBAAD,EAAA,UAAA;EACE,oBAAC,iBAAD;GACE,SAAQ;GACR,OAAO,EAAE,6BAA6B;GACtC,cAAY,EAAE,6BAA6B;GAC3C,eAAe,cAAc,IAAI;aAEjC,oBAAC,cAAD,EAAgB,CAAA;GACA,CAAA;EAClB,oBAAC,kBAAD;GAA2B;GAAS,SAAS;GAAc,CAAA;EAC3D,oBAAC,oBAAD;GACE,SAAQ;GACR,OAAO,EAAE,8BAA8B;GACvC,cAAY,EAAE,8BAA8B;GAC5C,eAAe,cAAc,GAAG;aAEhC,oBAAC,eAAD,EAAiB,CAAA;GACE,CAAA;EACrB,qBAAC,iBAAD,EAAA,UAAA;GACE,oBAAC,YAAD;IAAY,WAAU;IAAe,SAAA;IAAQ,YAAA;cAC3C,oBAAC,OAAD,EAAA,UAAM,WAAW,YAAY,EAAO,CAAA;IACzB,CAAA;GACb,oBAAC,eAAD;IAA4B;IAAuB;IAAU,eAAe;IAAsB,CAAA;GAClG,oBAAC,YAAD;IAAY,WAAU;IAAe,SAAA;IAAQ,YAAA;cAC3C,qBAAC,OAAD,EAAA,UAAA,CAAK,KAAE,WAAW,KAAK,MAAM,WAAW,YAAY,CAAC,CAAO,EAAA,CAAA;IACjD,CAAA;GACG,EAAA,CAAA;EAClB,oBAAC,WAAD,EAAA,UACE,qBAAC,kBAAD;GACE,YAAY;GACZ,OAAO,CAAC,WAAW,UAAU,CAAC;GAC9B,gBAAgB,YAAY,qBAAqB,WAAW,QAAQ,MAAM,GAAG,CAAC;GAC9E,aAAa,EAAE,WAAW,OAAO;aAJnC;IAME,oBAAC,aAAD;KAAa,QAAA;eAAQ,EAAE,6BAA6B;KAAe,CAAA;IACnE,oBAAC,eAAD,EAAA,UACE,oBAAC,eAAD;KAAe,SAAA;eACb,oBAAC,aAAD;MACE,SAAQ;MACR,OAAO,EAAE,6BAA6B;MACtC,cAAY,EAAE,6BAA6B;gBAE3C,oBAAC,QAAD,EAAA,UAAO,GAAG,WAAW,IAAU,CAAA;MACnB,CAAA;KACA,CAAA,EACF,CAAA;IAChB,oBAAC,eAAD,EAAA,UACG,YAAY,MAAM,KAAK,UACtB,qBAAC,YAAD;KAAwB,MAAM;eAA9B,CACE,qBAAC,gBAAD,EAAA,UAAA,CAAiB,OAAM,IAAkB,EAAA,CAAA,EACzC,oBAAC,qBAAD,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EACO,CAAA,CACX;OALI,MAKJ,CACb,EACY,CAAA;IACC;MACT,CAAA;EACZ,qBAAC,aAAD;GAAa,aAAa,EAAE,WAAW,OAAO;aAA9C,CACE,oBAAC,gBAAD;IAAgB,SAAA;cACd,oBAAC,cAAD;KAAc,SAAQ;KAAW,cAAY,EAAE,8BAA8B;eAC3E,oBAAC,cAAD,EAAgB,CAAA;KACH,CAAA;IACA,CAAA,EACjB,oBAAC,sBAAD,EAAA,UACE,oBAAC,cAAD;IAAc,OAAO;IAAa,eAAe;IAA4B,CAAA,EACxD,CAAA,CACX;;EACE,EAAA,CAAA,CACd,EAAA,CAAA"}

package/es/AudioPlayer/PlayButton.mjs

@@ -0,0 +1,24 @@
+import { IconButton } from "@ndla/primitives";
+import { useTranslation } from "react-i18next";
+import { PauseLine, PlayFill } from "@ndla/icons";
+import { jsx } from "react/jsx-runtime";
+//#region src/AudioPlayer/PlayButton.tsx
+/**
+* Copyright (c) 2026-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+const PlayButton = ({ playing, children, ...rest }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(IconButton, {
+		"aria-label": playing ? t("audio.pause") : t("audio.play"),
+		...rest,
+		children: children ?? (playing ? /* @__PURE__ */ jsx(PauseLine, {}) : /* @__PURE__ */ jsx(PlayFill, {}))
+	});
+};
+//#endregion
+export { PlayButton };
+
+//# sourceMappingURL=PlayButton.mjs.map

package/es/AudioPlayer/PlayButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayButton.mjs","names":[],"sources":["../../src/AudioPlayer/PlayButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { PauseLine, PlayFill } from \"@ndla/icons\";\nimport { IconButton, type IconButtonProps } from \"@ndla/primitives\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props extends IconButtonProps {\n  playing?: boolean;\n}\n\nexport const PlayButton = ({ playing, children, ...rest }: Props) => {\n  const { t } = useTranslation();\n  return (\n    <IconButton aria-label={playing ? t(\"audio.pause\") : t(\"audio.play\")} {...rest}>\n      {children ?? (playing ? <PauseLine /> : <PlayFill />)}\n    </IconButton>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAa,cAAc,EAAE,SAAS,UAAU,GAAG,WAAkB;CACnE,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,oBAAC,YAAD;EAAY,cAAY,UAAU,EAAE,cAAc,GAAG,EAAE,aAAa;EAAE,GAAI;YACvE,aAAa,UAAU,oBAAC,WAAD,EAAa,CAAA,GAAG,oBAAC,UAAD,EAAY,CAAA;EACzC,CAAA"}

package/es/AudioPlayer/SpeechControl.mjs

@@ -1,6 +1,5 @@
-import { IconButton } from "@ndla/primitives";
-import { useRef } from "react";
-import { useTranslation } from "react-i18next";
+import { PlayButton } from "./PlayButton.mjs";
+import { useAudioControls } from "./useAudioControls.mjs";
 import { VolumeUpFill } from "@ndla/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/AudioPlayer/SpeechControl.tsx
@@ -11,16 +10,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 *
 */
-const SpeechControl = ({ src, title, type = "audio" }) => {
-	const { t } = useTranslation();
-	const audioRef = useRef(null);
-	const togglePlay = () => {
-		if (audioRef.current) {
-			const audioElement = audioRef.current;
-			if (audioElement.paused) audioElement.play();
-			else audioElement.pause();
-		}
-	};
+const SpeechControl = ({ src, title }) => {
+	const { audioRef, togglePlay } = useAudioControls();
 	return /* @__PURE__ */ jsxs("div", {
 		"data-embed-type": "speech",
 		children: [/* @__PURE__ */ jsx("audio", {
@@ -28,10 +19,8 @@ const SpeechControl = ({ src, title, type = "audio" }) => {
 			src,
 			title,
 			preload: "metadata"
-		}), /* @__PURE__ */ jsx(IconButton, {
+		}), /* @__PURE__ */ jsx(PlayButton, {
 			variant: "tertiary",
-			"aria-label": t(`${type}.play`),
-			title: t(`${type}.play`),
 			onClick: togglePlay,
 			children: /* @__PURE__ */ jsx(VolumeUpFill, {})
 		})]

package/es/AudioPlayer/SpeechControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SpeechControl.mjs","names":[],"sources":["../../src/AudioPlayer/SpeechControl.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { VolumeUpFill } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\nimport { useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ntype Props = {\n  src: string;\n  title: string;\n  type?: \"gloss\" | \"audio\";\n};\n\nexport const SpeechControl = ({ src, title, type = \"audio\" }: Props) => {\n  const { t } = useTranslation();\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  const togglePlay = () => {\n    if (audioRef.current) {\n      const audioElement = audioRef.current;\n      if (audioElement.paused) {\n        audioElement.play();\n      } else {\n        audioElement.pause();\n      }\n    }\n  };\n  return (\n    <div data-embed-type=\"speech\">\n      {/* oxlint-disable-next-line jsx-a11y/media-has-caption */}\n      <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n      <IconButton variant=\"tertiary\" aria-label={t(`${type}.play`)} title={t(`${type}.play`)} onClick={togglePlay}>\n        <VolumeUpFill />\n      </IconButton>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAmBA,MAAa,iBAAiB,EAAE,KAAK,OAAO,OAAO,cAAqB;CACtE,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,mBAAmB;AACvB,MAAI,SAAS,SAAS;GACpB,MAAM,eAAe,SAAS;AAC9B,OAAI,aAAa,OACf,cAAa,MAAM;OAEnB,cAAa,OAAO;;;AAI1B,QACE,qBAAC,OAAD;EAAK,mBAAgB;YAArB,CAEE,oBAAC,SAAD;GAAO,KAAK;GAAe;GAAY;GAAO,SAAQ;GAAa,CAAA,EACnE,oBAAC,YAAD;GAAY,SAAQ;GAAW,cAAY,EAAE,GAAG,KAAK,OAAO;GAAE,OAAO,EAAE,GAAG,KAAK,OAAO;GAAE,SAAS;aAC/F,oBAAC,cAAD,EAAgB,CAAA;GACL,CAAA,CACT"}
+{"version":3,"file":"SpeechControl.mjs","names":[],"sources":["../../src/AudioPlayer/SpeechControl.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { VolumeUpFill } from \"@ndla/icons\";\nimport { PlayButton } from \"./PlayButton\";\nimport { useAudioControls } from \"./useAudioControls\";\n\ntype Props = {\n  src: string;\n  title: string;\n};\n\nexport const SpeechControl = ({ src, title }: Props) => {\n  const { audioRef, togglePlay } = useAudioControls();\n\n  return (\n    <div data-embed-type=\"speech\">\n      {/* oxlint-disable-next-line jsx-a11y/media-has-caption */}\n      <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n      <PlayButton variant=\"tertiary\" onClick={togglePlay}>\n        <VolumeUpFill />\n      </PlayButton>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAa,iBAAiB,EAAE,KAAK,YAAmB;CACtD,MAAM,EAAE,UAAU,eAAe,kBAAkB;AAEnD,QACE,qBAAC,OAAD;EAAK,mBAAgB;YAArB,CAEE,oBAAC,SAAD;GAAO,KAAK;GAAe;GAAY;GAAO,SAAQ;GAAa,CAAA,EACnE,oBAAC,YAAD;GAAY,SAAQ;GAAW,SAAS;aACtC,oBAAC,cAAD,EAAgB,CAAA;GACL,CAAA,CACT"}

package/es/AudioPlayer/VolumeSlider.mjs

@@ -0,0 +1,31 @@
+import { SliderControl, SliderHiddenInput, SliderLabel, SliderRange, SliderRoot, SliderThumb, SliderTrack } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { t } from "i18next";
+//#region src/AudioPlayer/VolumeSlider.tsx
+const StyledSliderControl = styled(SliderControl, { base: {
+	height: "surface.3xsmall",
+	minWidth: "small"
+} });
+const VolumeSlider = ({ value, onValueChange }) => {
+	return /* @__PURE__ */ jsxs(SliderRoot, {
+		orientation: "vertical",
+		value: [value],
+		min: 0,
+		max: 100,
+		defaultValue: [100],
+		step: 1,
+		onValueChange,
+		children: [/* @__PURE__ */ jsx(SliderLabel, {
+			srOnly: true,
+			children: t("audio.controls.adjustVolume")
+		}), /* @__PURE__ */ jsxs(StyledSliderControl, { children: [/* @__PURE__ */ jsx(SliderTrack, { children: /* @__PURE__ */ jsx(SliderRange, {}) }), /* @__PURE__ */ jsx(SliderThumb, {
+			index: 0,
+			children: /* @__PURE__ */ jsx(SliderHiddenInput, {})
+		})] })]
+	});
+};
+//#endregion
+export { VolumeSlider };
+
+//# sourceMappingURL=VolumeSlider.mjs.map

package/es/AudioPlayer/VolumeSlider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeSlider.mjs","names":[],"sources":["../../src/AudioPlayer/VolumeSlider.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { SliderValueChangeDetails } from \"@ark-ui/react\";\nimport {\n  SliderControl,\n  SliderRoot,\n  SliderLabel,\n  SliderTrack,\n  SliderRange,\n  SliderHiddenInput,\n  SliderThumb,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { t } from \"i18next\";\n\nconst StyledSliderControl = styled(SliderControl, {\n  base: {\n    height: \"surface.3xsmall\",\n    minWidth: \"small\",\n  },\n});\n\ninterface Props {\n  value: number;\n  onValueChange: (value: SliderValueChangeDetails) => void;\n}\n\nexport const VolumeSlider = ({ value, onValueChange }: Props) => {\n  return (\n    <SliderRoot\n      orientation=\"vertical\"\n      value={[value]}\n      min={0}\n      max={100}\n      defaultValue={[100]}\n      step={1}\n      onValueChange={onValueChange}\n    >\n      <SliderLabel srOnly>{t(\"audio.controls.adjustVolume\")}</SliderLabel>\n      <StyledSliderControl>\n        <SliderTrack>\n          <SliderRange />\n        </SliderTrack>\n        <SliderThumb index={0}>\n          <SliderHiddenInput />\n        </SliderThumb>\n      </StyledSliderControl>\n    </SliderRoot>\n  );\n};\n"],"mappings":";;;;;AAqBA,MAAM,sBAAsB,OAAO,eAAe,EAChD,MAAM;CACJ,QAAQ;CACR,UAAU;CACX,EACF,CAAC;AAOF,MAAa,gBAAgB,EAAE,OAAO,oBAA2B;AAC/D,QACE,qBAAC,YAAD;EACE,aAAY;EACZ,OAAO,CAAC,MAAM;EACd,KAAK;EACL,KAAK;EACL,cAAc,CAAC,IAAI;EACnB,MAAM;EACS;YAPjB,CASE,oBAAC,aAAD;GAAa,QAAA;aAAQ,EAAE,8BAA8B;GAAe,CAAA,EACpE,qBAAC,qBAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UACE,oBAAC,aAAD,EAAe,CAAA,EACH,CAAA,EACd,oBAAC,aAAD;GAAa,OAAO;aAClB,oBAAC,mBAAD,EAAqB,CAAA;GACT,CAAA,CACM,EAAA,CAAA,CACX"}

package/es/AudioPlayer/audioUtils.mjs

@@ -0,0 +1,17 @@
+//#region src/AudioPlayer/audioUtils.ts
+/**
+* Copyright (c) 2026-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+const formatTime = (seconds) => {
+	const minutes = Math.floor(seconds / 60);
+	const currentSeconds = seconds % 60;
+	return `${minutes}:${currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds}`;
+};
+//#endregion
+export { formatTime };
+
+//# sourceMappingURL=audioUtils.mjs.map

package/es/AudioPlayer/audioUtils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"audioUtils.mjs","names":[],"sources":["../../src/AudioPlayer/audioUtils.ts"],"sourcesContent":["/**\n * Copyright (c) 2026-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nexport const formatTime = (seconds: number) => {\n  const minutes = Math.floor(seconds / 60);\n  const currentSeconds = seconds % 60;\n\n  const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;\n  return `${minutes}:${formattedSeconds}`;\n};\n"],"mappings":";;;;;;;;AAQA,MAAa,cAAc,YAAoB;CAC7C,MAAM,UAAU,KAAK,MAAM,UAAU,GAAG;CACxC,MAAM,iBAAiB,UAAU;AAGjC,QAAO,GAAG,QAAQ,GADO,iBAAiB,KAAK,IAAI,mBAAmB"}

package/es/AudioPlayer/useAudioControls.mjs

@@ -0,0 +1,55 @@
+import { useCallback, useRef, useState } from "react";
+//#region src/AudioPlayer/useAudioControls.ts
+const useAudioControls = () => {
+	const [speedValue, setSpeedValue] = useState(1);
+	const [volumeValue, setVolumeValue] = useState(100);
+	const [currentTime, setCurrentTime] = useState(0);
+	const [duration, setDuration] = useState(0);
+	const [playing, setPlaying] = useState(false);
+	const audioRef = useRef(null);
+	const togglePlay = useCallback(() => {
+		if (!audioRef.current) return;
+		if (audioRef.current.paused) audioRef.current.play();
+		else audioRef.current.pause();
+		setPlaying((p) => !p);
+	}, []);
+	const onPlaybackRateChange = useCallback((rate) => {
+		setSpeedValue(rate);
+		if (audioRef.current) audioRef.current.playbackRate = rate;
+	}, []);
+	const onSeekSeconds = useCallback((seconds) => {
+		if (audioRef.current) audioRef.current.currentTime += seconds;
+	}, []);
+	const handleSliderChange = useCallback((details) => {
+		const newValue = details.value[0];
+		if (audioRef.current && newValue != null && !isNaN(newValue)) audioRef.current.currentTime = details.value[0];
+	}, []);
+	return {
+		togglePlay,
+		onPlaybackRateChange,
+		onSeekSeconds,
+		handleVolumeSliderChange: useCallback((details) => {
+			if (audioRef.current) {
+				audioRef.current.volume = details.value[0] / 100;
+				setVolumeValue(details.value[0]);
+			}
+		}, []),
+		handleSliderChange,
+		onEnded: useCallback(() => setPlaying(false), []),
+		onHandleTime: useCallback((meta) => {
+			const target = meta.currentTarget;
+			setCurrentTime(Math.round(target.currentTime));
+			setDuration(Math.round(target.duration));
+		}, []),
+		speedValue,
+		volumeValue,
+		currentTime,
+		duration,
+		playing,
+		audioRef
+	};
+};
+//#endregion
+export { useAudioControls };
+
+//# sourceMappingURL=useAudioControls.mjs.map

package/es/AudioPlayer/useAudioControls.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAudioControls.mjs","names":[],"sources":["../../src/AudioPlayer/useAudioControls.ts"],"sourcesContent":["/**\n * Copyright (c) 2026-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { SliderValueChangeDetails } from \"@ark-ui/react\";\nimport { useCallback, useRef, useState, type ReactEventHandler } from \"react\";\n\nexport const useAudioControls = () => {\n  const [speedValue, setSpeedValue] = useState(1);\n  const [volumeValue, setVolumeValue] = useState(100);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [playing, setPlaying] = useState(false);\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  const togglePlay = useCallback(() => {\n    if (!audioRef.current) return;\n    if (audioRef.current.paused) {\n      audioRef.current.play();\n    } else {\n      audioRef.current.pause();\n    }\n    setPlaying((p) => !p);\n  }, []);\n\n  const onPlaybackRateChange = useCallback((rate: number) => {\n    setSpeedValue(rate);\n    if (audioRef.current) {\n      audioRef.current.playbackRate = rate;\n    }\n  }, []);\n\n  const onSeekSeconds = useCallback((seconds: number) => {\n    if (audioRef.current) {\n      audioRef.current.currentTime += seconds;\n    }\n  }, []);\n\n  const handleSliderChange = useCallback((details: SliderValueChangeDetails) => {\n    const newValue = details.value[0];\n    if (audioRef.current && newValue != null && !isNaN(newValue)) {\n      audioRef.current.currentTime = details.value[0];\n    }\n  }, []);\n\n  const handleVolumeSliderChange = useCallback((details: SliderValueChangeDetails) => {\n    if (audioRef.current) {\n      audioRef.current.volume = details.value[0] / 100;\n      setVolumeValue(details.value[0]);\n    }\n  }, []);\n\n  const onEnded = useCallback(() => setPlaying(false), []);\n\n  const onHandleTime: ReactEventHandler<HTMLAudioElement> = useCallback((meta) => {\n    const target = meta.currentTarget;\n    setCurrentTime(Math.round(target.currentTime));\n    setDuration(Math.round(target.duration));\n  }, []);\n\n  return {\n    togglePlay,\n    onPlaybackRateChange,\n    onSeekSeconds,\n    handleVolumeSliderChange,\n    handleSliderChange,\n    onEnded,\n    onHandleTime,\n    speedValue,\n    volumeValue,\n    currentTime,\n    duration,\n    playing,\n    audioRef,\n  };\n};\n"],"mappings":";;AAWA,MAAa,yBAAyB;CACpC,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,CAAC,aAAa,kBAAkB,SAAS,IAAI;CACnD,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CACjD,MAAM,CAAC,UAAU,eAAe,SAAS,EAAE;CAC3C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,aAAa,kBAAkB;AACnC,MAAI,CAAC,SAAS,QAAS;AACvB,MAAI,SAAS,QAAQ,OACnB,UAAS,QAAQ,MAAM;MAEvB,UAAS,QAAQ,OAAO;AAE1B,cAAY,MAAM,CAAC,EAAE;IACpB,EAAE,CAAC;CAEN,MAAM,uBAAuB,aAAa,SAAiB;AACzD,gBAAc,KAAK;AACnB,MAAI,SAAS,QACX,UAAS,QAAQ,eAAe;IAEjC,EAAE,CAAC;CAEN,MAAM,gBAAgB,aAAa,YAAoB;AACrD,MAAI,SAAS,QACX,UAAS,QAAQ,eAAe;IAEjC,EAAE,CAAC;CAEN,MAAM,qBAAqB,aAAa,YAAsC;EAC5E,MAAM,WAAW,QAAQ,MAAM;AAC/B,MAAI,SAAS,WAAW,YAAY,QAAQ,CAAC,MAAM,SAAS,CAC1D,UAAS,QAAQ,cAAc,QAAQ,MAAM;IAE9C,EAAE,CAAC;AAiBN,QAAO;EACL;EACA;EACA;EACA,0BAnB+B,aAAa,YAAsC;AAClF,OAAI,SAAS,SAAS;AACpB,aAAS,QAAQ,SAAS,QAAQ,MAAM,KAAK;AAC7C,mBAAe,QAAQ,MAAM,GAAG;;KAEjC,EAAE,CAAC;EAeJ;EACA,SAdc,kBAAkB,WAAW,MAAM,EAAE,EAAE,CAAC;EAetD,cAbwD,aAAa,SAAS;GAC9E,MAAM,SAAS,KAAK;AACpB,kBAAe,KAAK,MAAM,OAAO,YAAY,CAAC;AAC9C,eAAY,KAAK,MAAM,OAAO,SAAS,CAAC;KACvC,EAAE,CAAC;EAUJ;EACA;EACA;EACA;EACA;EACA;EACD"}

package/es/Embed/AudioEmbed.mjs

@@ -18,11 +18,7 @@ const AudioEmbed = ({ embed, lang }) => {
 	const type = embed.embedData.type === "standard" ? "audio" : "podcast";
 	if (embed.status === "error") return /* @__PURE__ */ jsx(EmbedErrorPlaceholder, { type });
 	const { data, embedData } = embed;
-	if (embedData.type === "minimal") return /* @__PURE__ */ jsx(AudioPlayer, {
-		speech: true,
-		src: data.audioFile.url,
-		title: data.title.title
-	});
+	const variant = embedData.type === "podcast" ? "standard" : embedData.type;
 	const subtitle = data.series ? {
 		title: data.series.title.title,
 		url: `/podkast/${data.series.id}`
@@ -37,13 +33,14 @@ const AudioEmbed = ({ embed, lang }) => {
 		"data-embed-type": type,
 		...licenseAttributes(data.copyright.license.license, lang, embedData.url),
 		children: [/* @__PURE__ */ jsx(AudioPlayer, {
+			variant,
 			description: data.podcastMeta?.introduction ?? "",
 			img,
 			src: data.audioFile.url,
 			textVersion: data.manuscript?.manuscript.length ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: data.manuscript.manuscript } }) : void 0,
 			title: data.title.title,
 			subtitle
-		}), /* @__PURE__ */ jsx(EmbedByline, {
+		}), variant === "standard" && /* @__PURE__ */ jsx(EmbedByline, {
 			error: false,
 			type: data.audioType === "standard" ? "audio" : "podcast",
 			copyright: embed.data.copyright

package/es/Embed/AudioEmbed.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AudioEmbed.mjs","names":[],"sources":["../../src/Embed/AudioEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { AudioMetaData } from \"@ndla/types-embed\";\nimport { AudioPlayer } from \"../AudioPlayer/AudioPlayer\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { Author } from \"./ImageEmbed\";\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n  },\n});\n\ninterface Props {\n  embed: AudioMetaData;\n  lang?: string;\n}\n\nexport const getFirstNonEmptyLicenseCredits = (authors: {\n  creators: Author[];\n  rightsholders: Author[];\n  processors: Author[];\n}) => Object.values(authors).find((i) => i.length > 0) ?? [];\n\nexport const AudioEmbed = ({ embed, lang }: Props) => {\n  const type = embed.embedData.type === \"standard\" ? \"audio\" : \"podcast\";\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type={type} />;\n  }\n\n  const { data, embedData } = embed;\n\n  if (embedData.type === \"minimal\") {\n    return <AudioPlayer speech src={data.audioFile.url} title={data.title.title} />;\n  }\n\n  const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;\n\n  const coverPhoto = data.podcastMeta?.coverPhoto;\n\n  const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };\n\n  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n  return (\n    <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>\n      <AudioPlayer\n        description={data.podcastMeta?.introduction ?? \"\"}\n        img={img}\n        src={data.audioFile.url}\n        textVersion={\n          data.manuscript?.manuscript.length ? (\n            <div dangerouslySetInnerHTML={{ __html: data.manuscript.manuscript }} />\n          ) : undefined\n        }\n        title={data.title.title}\n        subtitle={subtitle}\n      />\n      <EmbedByline\n        error={false}\n        type={data.audioType === \"standard\" ? \"audio\" : \"podcast\"}\n        copyright={embed.data.copyright}\n      />\n    </StyledFigure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAaF,MAAa,cAAc,EAAE,OAAO,WAAkB;CACpD,MAAM,OAAO,MAAM,UAAU,SAAS,aAAa,UAAU;AAC7D,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,uBAAD,EAA6B,MAAQ,CAAA;CAG9C,MAAM,EAAE,MAAM,cAAc;AAE5B,KAAI,UAAU,SAAS,UACrB,QAAO,oBAAC,aAAD;EAAa,QAAA;EAAO,KAAK,KAAK,UAAU;EAAK,OAAO,KAAK,MAAM;EAAS,CAAA;CAGjF,MAAM,WAAW,KAAK,SAAS;EAAE,OAAO,KAAK,OAAO,MAAM;EAAO,KAAK,YAAY,KAAK,OAAO;EAAM,GAAG,KAAA;CAEvG,MAAM,aAAa,KAAK,aAAa;CAErC,MAAM,MAAM,cAAc;EAAE,KAAK,WAAW;EAAK,KAAK,WAAW;EAAS;AAI1E,QACE,qBAAC,cAAD;EAAoB;EAAM,mBAAiB;EAAM,GAH9B,kBAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAAI;YAGzF,CACE,oBAAC,aAAD;GACE,aAAa,KAAK,aAAa,gBAAgB;GAC1C;GACL,KAAK,KAAK,UAAU;GACpB,aACE,KAAK,YAAY,WAAW,SAC1B,oBAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,KAAK,WAAW,YAAY,EAAI,CAAA,GACtE,KAAA;GAEN,OAAO,KAAK,MAAM;GACR;GACV,CAAA,EACF,oBAAC,aAAD;GACE,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;GACtB,CAAA,CACW"}
+{"version":3,"file":"AudioEmbed.mjs","names":[],"sources":["../../src/Embed/AudioEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { AudioMetaData } from \"@ndla/types-embed\";\nimport { AudioPlayer, type AudioPlayerVariant } from \"../AudioPlayer/AudioPlayer\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { Author } from \"./ImageEmbed\";\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n  },\n});\n\ninterface Props {\n  embed: AudioMetaData;\n  lang?: string;\n}\n\nexport const getFirstNonEmptyLicenseCredits = (authors: {\n  creators: Author[];\n  rightsholders: Author[];\n  processors: Author[];\n}) => Object.values(authors).find((i) => i.length > 0) ?? [];\n\nexport const AudioEmbed = ({ embed, lang }: Props) => {\n  const type = embed.embedData.type === \"standard\" ? \"audio\" : \"podcast\";\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type={type} />;\n  }\n\n  const { data, embedData } = embed;\n\n  const variant = embedData.type === \"podcast\" ? \"standard\" : (embedData.type as AudioPlayerVariant);\n\n  const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;\n\n  const coverPhoto = data.podcastMeta?.coverPhoto;\n\n  const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };\n\n  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n  return (\n    <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>\n      <AudioPlayer\n        variant={variant}\n        description={data.podcastMeta?.introduction ?? \"\"}\n        img={img}\n        src={data.audioFile.url}\n        textVersion={\n          data.manuscript?.manuscript.length ? (\n            <div dangerouslySetInnerHTML={{ __html: data.manuscript.manuscript }} />\n          ) : undefined\n        }\n        title={data.title.title}\n        subtitle={subtitle}\n      />\n      {variant === \"standard\" && (\n        <EmbedByline\n          error={false}\n          type={data.audioType === \"standard\" ? \"audio\" : \"podcast\"}\n          copyright={embed.data.copyright}\n        />\n      )}\n    </StyledFigure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAaF,MAAa,cAAc,EAAE,OAAO,WAAkB;CACpD,MAAM,OAAO,MAAM,UAAU,SAAS,aAAa,UAAU;AAC7D,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,uBAAD,EAA6B,MAAQ,CAAA;CAG9C,MAAM,EAAE,MAAM,cAAc;CAE5B,MAAM,UAAU,UAAU,SAAS,YAAY,aAAc,UAAU;CAEvE,MAAM,WAAW,KAAK,SAAS;EAAE,OAAO,KAAK,OAAO,MAAM;EAAO,KAAK,YAAY,KAAK,OAAO;EAAM,GAAG,KAAA;CAEvG,MAAM,aAAa,KAAK,aAAa;CAErC,MAAM,MAAM,cAAc;EAAE,KAAK,WAAW;EAAK,KAAK,WAAW;EAAS;AAI1E,QACE,qBAAC,cAAD;EAAoB;EAAM,mBAAiB;EAAM,GAH9B,kBAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAAI;YAGzF,CACE,oBAAC,aAAD;GACW;GACT,aAAa,KAAK,aAAa,gBAAgB;GAC1C;GACL,KAAK,KAAK,UAAU;GACpB,aACE,KAAK,YAAY,WAAW,SAC1B,oBAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,KAAK,WAAW,YAAY,EAAI,CAAA,GACtE,KAAA;GAEN,OAAO,KAAK,MAAM;GACR;GACV,CAAA,EACD,YAAY,cACX,oBAAC,aAAD;GACE,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;GACtB,CAAA,CAES"}

package/es/Gloss/Gloss.mjs

@@ -110,8 +110,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
 					})
 				] }), !!audio?.src && /* @__PURE__ */ jsx(SpeechControl, {
 					src: audio.src,
-					title: audio.title,
-					type: "gloss"
+					title: audio.title
 				})] }),
 				/* @__PURE__ */ jsxs(StyledContainer, { children: [/* @__PURE__ */ jsx(Text, {
 					textStyle: "label.medium",

package/es/Gloss/Gloss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Gloss.mjs","names":["AccordionItemTrigger"],"sources":["../../src/Gloss/Gloss.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { AccordionItemTrigger } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  AccordionRoot,\n  IconButton,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ConceptTitleDTO, GlossDataDTO, GlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { SpeechControl } from \"../AudioPlayer/SpeechControl\";\nimport { GlossExample } from \"./GlossExample\";\n\n// TODO: Figure out padding between bordered and simple variant.\n// The design says that the content above the accordion content should have enough padding to align with the accordion content.\n// When a gloss is bordered there's way too much padding.\n\nconst getFilteredExamples = (\n  glossData: GlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): GlossExampleDTO[][] => {\n  if (exampleIds !== undefined || exampleLangs !== undefined) {\n    const exampleIdsList = exampleIds?.toString()?.split(\",\") ?? [];\n    const exampleLangsList = exampleLangs?.split(\",\") ?? [];\n\n    const filteredExamples =\n      glossData?.examples?.map((examples, i) => {\n        if (exampleIdsList.includes(i.toString())) {\n          return examples.filter((e) => exampleLangsList.includes(e.language));\n        }\n        return [];\n      }) ?? [];\n    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);\n    return examplesWithoutEmpty;\n  }\n  return glossData?.examples ?? [];\n};\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n  },\n});\n\nconst StyledAccordionItemContent = styled(AccordionItemContent, {\n  base: {\n    paddingInline: \"0\",\n  },\n});\n\nconst StyledContainer = styled(Container, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst StyledAccordionItem = styled(AccordionItem, {\n  base: {\n    paddingBlock: \"small\",\n    paddingInline: \"medium\",\n  },\n  defaultVariants: {\n    variant: \"simple\",\n  },\n  variants: {\n    variant: {\n      simple: {},\n      bordered: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;\n\nexport interface Props {\n  title: ConceptTitleDTO;\n  glossData?: GlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nexport const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {\n  const { t } = useTranslation();\n\n  const parsedTitle = useMemo(() => parse(title.htmlTitle), [title.htmlTitle]);\n\n  const filteredExamples = useMemo(\n    () => getFilteredExamples(glossData, exampleIds, exampleLangs),\n    [exampleIds, exampleLangs, glossData],\n  );\n\n  if (!glossData) return null;\n\n  return (\n    <AccordionRoot multiple variant=\"clean\">\n      <StyledAccordionItem value=\"gloss\" variant={variant}>\n        <Container>\n          <TextWrapper>\n            <Text textStyle=\"label.medium\" fontWeight=\"bold\" asChild consumeCss lang={glossData.originalLanguage}>\n              <span>{glossData.gloss}</span>\n            </Text>\n            {!!glossData.transcriptions.traditional && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  key={t(\"gloss.transcriptions.traditional\")}\n                  aria-label={t(\"gloss.transcriptions.traditional\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.traditional}\n                </span>\n              </Text>\n            )}\n            {!!glossData.transcriptions.pinyin && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  data-pinyin=\"\"\n                  key={t(\"gloss.transcriptions.pinyin\")}\n                  aria-label={t(\"gloss.transcriptions.pinyin\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.pinyin}\n                </span>\n              </Text>\n            )}\n            {!!glossData.wordClass && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span aria-label={t(\"gloss.wordClass\")}>\n                  {glossData.wordClass.map((wc) => t(`wordClass.${wc}`).toLowerCase()).join(\" / \")}\n                </span>\n              </Text>\n            )}\n          </TextWrapper>\n          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} type=\"gloss\" />}\n        </Container>\n        <StyledContainer>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span lang={title.language}>{parsedTitle}</span>\n          </Text>\n          {!!filteredExamples.length && (\n            <AccordionItemTrigger asChild>\n              <IconButton variant=\"tertiary\" aria-label={t(\"gloss.showExamples\")} title={t(\"gloss.showExamples\")}>\n                <AccordionItemIndicator asChild>\n                  <ArrowDownShortLine size=\"medium\" />\n                </AccordionItemIndicator>\n              </IconButton>\n            </AccordionItemTrigger>\n          )}\n        </StyledContainer>\n        <StyledAccordionItemContent>\n          {filteredExamples.map((examples, index) => (\n            <GlossExample\n              key={`gloss-example-${index}`}\n              examples={examples}\n              originalLanguage={glossData.originalLanguage}\n            />\n          ))}\n        </StyledAccordionItemContent>\n      </StyledAccordionItem>\n    </AccordionRoot>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Gloss.mjs","names":["AccordionItemTrigger"],"sources":["../../src/Gloss/Gloss.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { AccordionItemTrigger } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  AccordionRoot,\n  IconButton,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ConceptTitleDTO, GlossDataDTO, GlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { SpeechControl } from \"../AudioPlayer/SpeechControl\";\nimport { GlossExample } from \"./GlossExample\";\n\n// TODO: Figure out padding between bordered and simple variant.\n// The design says that the content above the accordion content should have enough padding to align with the accordion content.\n// When a gloss is bordered there's way too much padding.\n\nconst getFilteredExamples = (\n  glossData: GlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): GlossExampleDTO[][] => {\n  if (exampleIds !== undefined || exampleLangs !== undefined) {\n    const exampleIdsList = exampleIds?.toString()?.split(\",\") ?? [];\n    const exampleLangsList = exampleLangs?.split(\",\") ?? [];\n\n    const filteredExamples =\n      glossData?.examples?.map((examples, i) => {\n        if (exampleIdsList.includes(i.toString())) {\n          return examples.filter((e) => exampleLangsList.includes(e.language));\n        }\n        return [];\n      }) ?? [];\n    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);\n    return examplesWithoutEmpty;\n  }\n  return glossData?.examples ?? [];\n};\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n  },\n});\n\nconst StyledAccordionItemContent = styled(AccordionItemContent, {\n  base: {\n    paddingInline: \"0\",\n  },\n});\n\nconst StyledContainer = styled(Container, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst StyledAccordionItem = styled(AccordionItem, {\n  base: {\n    paddingBlock: \"small\",\n    paddingInline: \"medium\",\n  },\n  defaultVariants: {\n    variant: \"simple\",\n  },\n  variants: {\n    variant: {\n      simple: {},\n      bordered: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;\n\nexport interface Props {\n  title: ConceptTitleDTO;\n  glossData?: GlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nexport const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {\n  const { t } = useTranslation();\n\n  const parsedTitle = useMemo(() => parse(title.htmlTitle), [title.htmlTitle]);\n\n  const filteredExamples = useMemo(\n    () => getFilteredExamples(glossData, exampleIds, exampleLangs),\n    [exampleIds, exampleLangs, glossData],\n  );\n\n  if (!glossData) return null;\n\n  return (\n    <AccordionRoot multiple variant=\"clean\">\n      <StyledAccordionItem value=\"gloss\" variant={variant}>\n        <Container>\n          <TextWrapper>\n            <Text textStyle=\"label.medium\" fontWeight=\"bold\" asChild consumeCss lang={glossData.originalLanguage}>\n              <span>{glossData.gloss}</span>\n            </Text>\n            {!!glossData.transcriptions.traditional && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  key={t(\"gloss.transcriptions.traditional\")}\n                  aria-label={t(\"gloss.transcriptions.traditional\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.traditional}\n                </span>\n              </Text>\n            )}\n            {!!glossData.transcriptions.pinyin && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  data-pinyin=\"\"\n                  key={t(\"gloss.transcriptions.pinyin\")}\n                  aria-label={t(\"gloss.transcriptions.pinyin\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.pinyin}\n                </span>\n              </Text>\n            )}\n            {!!glossData.wordClass && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span aria-label={t(\"gloss.wordClass\")}>\n                  {glossData.wordClass.map((wc) => t(`wordClass.${wc}`).toLowerCase()).join(\" / \")}\n                </span>\n              </Text>\n            )}\n          </TextWrapper>\n          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} />}\n        </Container>\n        <StyledContainer>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span lang={title.language}>{parsedTitle}</span>\n          </Text>\n          {!!filteredExamples.length && (\n            <AccordionItemTrigger asChild>\n              <IconButton variant=\"tertiary\" aria-label={t(\"gloss.showExamples\")} title={t(\"gloss.showExamples\")}>\n                <AccordionItemIndicator asChild>\n                  <ArrowDownShortLine size=\"medium\" />\n                </AccordionItemIndicator>\n              </IconButton>\n            </AccordionItemTrigger>\n          )}\n        </StyledContainer>\n        <StyledAccordionItemContent>\n          {filteredExamples.map((examples, index) => (\n            <GlossExample\n              key={`gloss-example-${index}`}\n              examples={examples}\n              originalLanguage={glossData.originalLanguage}\n            />\n          ))}\n        </StyledAccordionItemContent>\n      </StyledAccordionItem>\n    </AccordionRoot>\n  );\n};\n"],"mappings":"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"}

package/es/index.mjs

@@ -9,6 +9,7 @@ import { IframeEmbed } from "./Embed/IframeEmbed.mjs";
 import { ImageEmbed, getCrop, getFocalPoint } from "./Embed/ImageEmbed.mjs";
 import { Concept } from "./Concept/Concept.mjs";
 import { InlineTriggerButton } from "./Embed/InlineTriggerButton.mjs";
+import { CompactAudioPlayer } from "./AudioPlayer/CompactAudioPlayer.mjs";
 import { AudioPlayer } from "./AudioPlayer/AudioPlayer.mjs";
 import { AudioEmbed } from "./Embed/AudioEmbed.mjs";
 import { FootnoteEmbed } from "./Embed/FootnoteEmbed.mjs";
@@ -54,4 +55,4 @@ import { LinkBlock } from "./LinkBlock/LinkBlock.mjs";
 import { LinkBlockSection } from "./LinkBlock/LinkBlockSection.mjs";
 import { ZendeskButton } from "./ZendeskButton/ZendeskButton.mjs";
 import { messagesEN, messagesNB, messagesNN, messagesSE } from "@ndla/locales";
-export { AnchorHeading, ArticleByline, ArticleBylineAccordionItem, ArticleContent, ArticleFootNotes, ArticleFooter, ArticleHGroup, ArticleHeader, ArticleTitle, ArticleWrapper, AudioEmbed, AudioPlayer, BadgesContainer, BlockConcept, Breadcrumb, BrightcoveEmbed, CampaignBlock, CodeBlock, CodeEmbed, Concept, ConceptEmbed, ConceptInlineTriggerButton, ContactBlock, ContentLinkEmbed, CopyrightEmbed, EmbedByline, EmbedWrapper, ExternalEmbed, FactBox, File, FileListElement, FileListEmbed, FileListItem, FileListWrapper, FootnoteEmbed, Gloss, GlossExample, Grid, GridItem, H5pEmbed, HomeBreadcrumb, IframeEmbed, ImageEmbed, InlineConcept, InlineTriggerButton, KeyFigure, LicenseLink, LinkBlock, LinkBlockSection, PdfFile, Pitch, RelatedArticle, RelatedArticleList, RelatedContentEmbed, ResourceBox, TagSelectorClearTrigger, TagSelectorControl, TagSelectorInput, TagSelectorInputBase, TagSelectorItemInput, TagSelectorLabel, TagSelectorRoot, TagSelectorTrigger, UnknownEmbed, UuDisclaimerEmbed, ZendeskButton, codeLanguageOptions, constants, contactBlockBackgrounds, contentTypeMapping, contentTypes, getCrop, getFocalPoint, getPossiblyRelativeUrl, licenseAttributes, messagesEN, messagesNB, messagesNN, messagesSE, resourceEmbedTypeMapping, subjectCategories, subjectTypes, useAudioSearchTranslations, useComboboxTranslations, useDatePickerTranslations, useImageSearchTranslations, usePaginationTranslations, useTagSelectorTranslations, useTagsInputTranslations, useVideoSearchTranslations, wordClass };
+export { AnchorHeading, ArticleByline, ArticleBylineAccordionItem, ArticleContent, ArticleFootNotes, ArticleFooter, ArticleHGroup, ArticleHeader, ArticleTitle, ArticleWrapper, AudioEmbed, AudioPlayer, BadgesContainer, BlockConcept, Breadcrumb, BrightcoveEmbed, CampaignBlock, CodeBlock, CodeEmbed, CompactAudioPlayer, Concept, ConceptEmbed, ConceptInlineTriggerButton, ContactBlock, ContentLinkEmbed, CopyrightEmbed, EmbedByline, EmbedWrapper, ExternalEmbed, FactBox, File, FileListElement, FileListEmbed, FileListItem, FileListWrapper, FootnoteEmbed, Gloss, GlossExample, Grid, GridItem, H5pEmbed, HomeBreadcrumb, IframeEmbed, ImageEmbed, InlineConcept, InlineTriggerButton, KeyFigure, LicenseLink, LinkBlock, LinkBlockSection, PdfFile, Pitch, RelatedArticle, RelatedArticleList, RelatedContentEmbed, ResourceBox, TagSelectorClearTrigger, TagSelectorControl, TagSelectorInput, TagSelectorInputBase, TagSelectorItemInput, TagSelectorLabel, TagSelectorRoot, TagSelectorTrigger, UnknownEmbed, UuDisclaimerEmbed, ZendeskButton, codeLanguageOptions, constants, contactBlockBackgrounds, contentTypeMapping, contentTypes, getCrop, getFocalPoint, getPossiblyRelativeUrl, licenseAttributes, messagesEN, messagesNB, messagesNN, messagesSE, resourceEmbedTypeMapping, subjectCategories, subjectTypes, useAudioSearchTranslations, useComboboxTranslations, useDatePickerTranslations, useImageSearchTranslations, usePaginationTranslations, useTagSelectorTranslations, useTagsInputTranslations, useVideoSearchTranslations, wordClass };

package/lib/AudioPlayer/AudioElement.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2026-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { ComponentProps } from "react";
+interface Props extends ComponentProps<"audio"> {
+    src: string;
+    title: string;
+}
+export declare const AudioElement: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/AudioPlayer/AudioElement.js

@@ -0,0 +1,13 @@
+require("../_virtual/_rolldown/runtime.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/AudioPlayer/AudioElement.tsx
+const AudioElement = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
+		preload: "metadata",
+		...props
+	});
+};
+//#endregion
+exports.AudioElement = AudioElement;
+
+//# sourceMappingURL=AudioElement.js.map

package/lib/AudioPlayer/AudioElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioElement.js","names":[],"sources":["../../src/AudioPlayer/AudioElement.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { ComponentProps } from \"react\";\n\ninterface Props extends ComponentProps<\"audio\"> {\n  src: string;\n  title: string;\n}\n\nexport const AudioElement = (props: Props) => {\n  // TODO: We should tie this up to the textual description somehow\n  // oxlint-disable-next-line jsx-a11y/media-has-caption\n  return <audio preload=\"metadata\" {...props} />;\n};\n"],"mappings":";;;AAeA,MAAa,gBAAgB,UAAiB;AAG5C,QAAO,iBAAA,GAAA,kBAAA,KAAC,SAAD;EAAO,SAAQ;EAAW,GAAI;EAAS,CAAA"}

package/lib/AudioPlayer/AudioPlayer.d.ts

@@ -6,20 +6,21 @@
  *
  */
 import { type ReactNode } from "react";
-type Props = {
+export type AudioPlayerVariant = "standard" | "minimal" | "compact";
+interface Props {
     src: string;
     title: string;
     subtitle?: {
         title: string;
         url?: string;
     };
-    speech?: boolean;
+    variant?: AudioPlayerVariant;
     description?: string;
     textVersion?: ReactNode;
     img?: {
         url: string;
         alt: string;
     };
-};
-export declare const AudioPlayer: ({ src, title, subtitle, speech, description, img, textVersion }: Props) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const AudioPlayer: ({ src, title, subtitle, variant, description, img, textVersion }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/AudioPlayer/AudioPlayer.js

@@ -1,4 +1,5 @@
 require("../_virtual/_rolldown/runtime.js");
+const require_CompactAudioPlayer = require("./CompactAudioPlayer.js");
 const require_Controls = require("./Controls.js");
 const require_SpeechControl = require("./SpeechControl.js");
 let _ndla_primitives = require("@ndla/primitives");
@@ -93,13 +94,17 @@ const TextVersionText = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 const TextVersionButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Button, { base: { alignSelf: "flex-start" } });
 const ShowMoreButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Button, { base: { marginInlineStart: "3xsmall" } });
 const DESCRIPTION_MAX_LENGTH = 200;
-const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersion }) => {
+const AudioPlayer = ({ src, title, subtitle, variant = "standard", description, img, textVersion }) => {
 	const { t } = (0, react_i18next.useTranslation)();
 	const [showTextVersion, setShowTextVersion] = (0, react.useState)(false);
 	const [showFullDescription, setShowFullDescription] = (0, react.useState)(false);
 	const truncatedDescription = (0, react.useMemo)(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);
 	const textDescriptionId = (0, react.useId)();
-	if (speech) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SpeechControl.SpeechControl, {
+	if (variant === "minimal") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SpeechControl.SpeechControl, {
+		src,
+		title
+	});
+	if (variant === "compact") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CompactAudioPlayer.CompactAudioPlayer, {
 		src,
 		title
 	});

package/lib/AudioPlayer/AudioPlayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"AudioPlayer.js","names":["Button","SpeechControl","SafeLink","Heading","Text","Controls"],"sources":["../../src/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Heading, Text, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode, useId, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Controls } from \"./Controls\";\nimport { SpeechControl } from \"./SpeechControl\";\n\n// TODO: Could the audio metadata be more tightly coupled to the audio player?\n\nconst AudioPlayerWrapper = styled(\"div\", {\n  base: {\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    boxShadow: \"full\",\n    marginBlockEnd: \"4xsmall\",\n    overflow: \"hidden\",\n  },\n});\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    tabletWideDown: {\n      display: \"block\",\n    },\n  },\n});\n\nconst ImageWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    flex: \"1 0 auto\",\n    width: \"surface.4xsmall\",\n    height: \"surface.4xsmall\",\n    overflow: \"hidden\",\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      objectFit: \"cover\",\n    },\n    desktop: {\n      width: \"260px\",\n      height: \"260px\",\n    },\n    tabletWideDown: {\n      maxHeight: \"surface.small\",\n      maxWidth: \"100%\",\n      width: \"100%\",\n      height: \"auto\",\n    },\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    padding: \"xsmall\",\n    width: \"100%\",\n    \"&[data-has-image='true']\": {\n      tablet: {\n        paddingBlock: \"xsmall\",\n        paddingInline: \"medium\",\n      },\n    },\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    fontFamily: \"sans\",\n    tabletWide: {\n      width: \"100%\",\n      flexDirection: \"row\",\n      justifyContent: \"space-between\",\n    },\n  },\n});\n\nconst TextVersionWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    borderBlockStart: \"1px solid\",\n    borderColor: \"stroke.default\",\n    paddingBlock: \"medium\",\n    paddingInline: \"xsmall\",\n    tablet: {\n      paddingInline: \"medium\",\n    },\n  },\n});\n\nconst TextVersionText = styled(\"div\", {\n  base: {\n    maxWidth: \"surface.xlarge\",\n    \"& span > *\": {\n      whiteSpace: \"pre-wrap\",\n    },\n    \"& p:not(:first-child):not(:last-child)\": {\n      marginBlock: \"small\",\n    },\n    '& p[data-align=\"center\"]': {\n      textAlign: \"center\",\n    },\n    '& p:has(span[dir=\"rtl\"])': {\n      direction: \"rtl\",\n    },\n  },\n});\n\nconst TextVersionButton = styled(Button, {\n  base: {\n    alignSelf: \"flex-start\",\n  },\n});\n\nconst ShowMoreButton = styled(Button, {\n  base: {\n    marginInlineStart: \"3xsmall\",\n  },\n});\n\nconst DESCRIPTION_MAX_LENGTH = 200;\n\ntype Props = {\n  src: string;\n  title: string;\n  subtitle?: {\n    title: string;\n    url?: string;\n  };\n  speech?: boolean;\n  description?: string;\n  textVersion?: ReactNode;\n  img?: {\n    url: string;\n    alt: string;\n  };\n};\n\nexport const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersion }: Props) => {\n  const { t } = useTranslation();\n  const [showTextVersion, setShowTextVersion] = useState(false);\n  const [showFullDescription, setShowFullDescription] = useState(false);\n  const truncatedDescription = useMemo(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);\n  const textDescriptionId = useId();\n\n  if (speech) {\n    return <SpeechControl src={src} title={title} />;\n  }\n\n  const toggleTextVersion = () => {\n    setShowTextVersion((curr) => !curr);\n  };\n\n  const textVersionButton = (\n    <TextVersionButton\n      variant=\"secondary\"\n      aria-expanded={showTextVersion}\n      aria-controls={textDescriptionId}\n      size=\"small\"\n      onClick={toggleTextVersion}\n    >\n      {t(showTextVersion ? \"audio.textVersion.close\" : \"audio.textVersion.heading\")}\n    </TextVersionButton>\n  );\n\n  return (\n    <AudioPlayerWrapper>\n      <InfoWrapper>\n        {!!img && (\n          <ImageWrapper>\n            <img src={img.url} alt={img.alt} />\n          </ImageWrapper>\n        )}\n        <TextWrapper data-has-image={!!img}>\n          <TitleWrapper>\n            <div>\n              {subtitle?.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle?.title}\n              <Heading asChild consumeCss textStyle=\"title.large\">\n                <h3>{title}</h3>\n              </Heading>\n            </div>\n            {!!textVersion && !img && textVersionButton}\n          </TitleWrapper>\n          {!!description && (\n            <Text textStyle=\"body.medium\">\n              {showFullDescription || description.length < DESCRIPTION_MAX_LENGTH\n                ? description\n                : `${truncatedDescription}...`}\n              {description.length > DESCRIPTION_MAX_LENGTH && (\n                <ShowMoreButton variant=\"link\" onClick={() => setShowFullDescription((p) => !p)}>\n                  {t(`audio.${showFullDescription ? \"readLessDescriptionLabel\" : \"readMoreDescriptionLabel\"}`)}\n                </ShowMoreButton>\n              )}\n            </Text>\n          )}\n          {!!textVersion && !!img && textVersionButton}\n        </TextWrapper>\n      </InfoWrapper>\n      <Controls src={src} title={title} />\n      {!!textVersion && (\n        <TextVersionWrapper id={textDescriptionId} hidden={!showTextVersion}>\n          <Heading asChild textStyle=\"title.medium\" consumeCss>\n            <h4>{t(\"audio.textVersion.heading\")}</h4>\n          </Heading>\n          <TextVersionText>{textVersion}</TextVersionText>\n        </TextVersionWrapper>\n      )}\n    </AudioPlayerWrapper>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AudioPlayer.js","names":["Button","SpeechControl","CompactAudioPlayer","SafeLink","Heading","Text","Controls"],"sources":["../../src/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Heading, Text, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode, useId, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { CompactAudioPlayer } from \"./CompactAudioPlayer\";\nimport { Controls } from \"./Controls\";\nimport { SpeechControl } from \"./SpeechControl\";\n\n// TODO: Could the audio metadata be more tightly coupled to the audio player?\n\nconst AudioPlayerWrapper = styled(\"div\", {\n  base: {\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    boxShadow: \"full\",\n    marginBlockEnd: \"4xsmall\",\n    overflow: \"hidden\",\n  },\n});\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    tabletWideDown: {\n      display: \"block\",\n    },\n  },\n});\n\nconst ImageWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    flex: \"1 0 auto\",\n    width: \"surface.4xsmall\",\n    height: \"surface.4xsmall\",\n    overflow: \"hidden\",\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      objectFit: \"cover\",\n    },\n    desktop: {\n      width: \"260px\",\n      height: \"260px\",\n    },\n    tabletWideDown: {\n      maxHeight: \"surface.small\",\n      maxWidth: \"100%\",\n      width: \"100%\",\n      height: \"auto\",\n    },\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    padding: \"xsmall\",\n    width: \"100%\",\n    \"&[data-has-image='true']\": {\n      tablet: {\n        paddingBlock: \"xsmall\",\n        paddingInline: \"medium\",\n      },\n    },\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    fontFamily: \"sans\",\n    tabletWide: {\n      width: \"100%\",\n      flexDirection: \"row\",\n      justifyContent: \"space-between\",\n    },\n  },\n});\n\nconst TextVersionWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    borderBlockStart: \"1px solid\",\n    borderColor: \"stroke.default\",\n    paddingBlock: \"medium\",\n    paddingInline: \"xsmall\",\n    tablet: {\n      paddingInline: \"medium\",\n    },\n  },\n});\n\nconst TextVersionText = styled(\"div\", {\n  base: {\n    maxWidth: \"surface.xlarge\",\n    \"& span > *\": {\n      whiteSpace: \"pre-wrap\",\n    },\n    \"& p:not(:first-child):not(:last-child)\": {\n      marginBlock: \"small\",\n    },\n    '& p[data-align=\"center\"]': {\n      textAlign: \"center\",\n    },\n    '& p:has(span[dir=\"rtl\"])': {\n      direction: \"rtl\",\n    },\n  },\n});\n\nconst TextVersionButton = styled(Button, {\n  base: {\n    alignSelf: \"flex-start\",\n  },\n});\n\nconst ShowMoreButton = styled(Button, {\n  base: {\n    marginInlineStart: \"3xsmall\",\n  },\n});\n\nconst DESCRIPTION_MAX_LENGTH = 200;\n\nexport type AudioPlayerVariant = \"standard\" | \"minimal\" | \"compact\";\n\ninterface Props {\n  src: string;\n  title: string;\n  subtitle?: {\n    title: string;\n    url?: string;\n  };\n  variant?: AudioPlayerVariant;\n  description?: string;\n  textVersion?: ReactNode;\n  img?: {\n    url: string;\n    alt: string;\n  };\n}\n\nexport const AudioPlayer = ({ src, title, subtitle, variant = \"standard\", description, img, textVersion }: Props) => {\n  const { t } = useTranslation();\n  const [showTextVersion, setShowTextVersion] = useState(false);\n  const [showFullDescription, setShowFullDescription] = useState(false);\n  const truncatedDescription = useMemo(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);\n  const textDescriptionId = useId();\n\n  if (variant === \"minimal\") {\n    return <SpeechControl src={src} title={title} />;\n  }\n\n  if (variant === \"compact\") {\n    return <CompactAudioPlayer src={src} title={title} />;\n  }\n\n  const toggleTextVersion = () => {\n    setShowTextVersion((curr) => !curr);\n  };\n\n  const textVersionButton = (\n    <TextVersionButton\n      variant=\"secondary\"\n      aria-expanded={showTextVersion}\n      aria-controls={textDescriptionId}\n      size=\"small\"\n      onClick={toggleTextVersion}\n    >\n      {t(showTextVersion ? \"audio.textVersion.close\" : \"audio.textVersion.heading\")}\n    </TextVersionButton>\n  );\n\n  return (\n    <AudioPlayerWrapper>\n      <InfoWrapper>\n        {!!img && (\n          <ImageWrapper>\n            <img src={img.url} alt={img.alt} />\n          </ImageWrapper>\n        )}\n        <TextWrapper data-has-image={!!img}>\n          <TitleWrapper>\n            <div>\n              {subtitle?.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle?.title}\n              <Heading asChild consumeCss textStyle=\"title.large\">\n                <h3>{title}</h3>\n              </Heading>\n            </div>\n            {!!textVersion && !img && textVersionButton}\n          </TitleWrapper>\n          {!!description && (\n            <Text textStyle=\"body.medium\">\n              {showFullDescription || description.length < DESCRIPTION_MAX_LENGTH\n                ? description\n                : `${truncatedDescription}...`}\n              {description.length > DESCRIPTION_MAX_LENGTH && (\n                <ShowMoreButton variant=\"link\" onClick={() => setShowFullDescription((p) => !p)}>\n                  {t(`audio.${showFullDescription ? \"readLessDescriptionLabel\" : \"readMoreDescriptionLabel\"}`)}\n                </ShowMoreButton>\n              )}\n            </Text>\n          )}\n          {!!textVersion && !!img && textVersionButton}\n        </TextWrapper>\n      </InfoWrapper>\n      <Controls src={src} title={title} />\n      {!!textVersion && (\n        <TextVersionWrapper id={textDescriptionId} hidden={!showTextVersion}>\n          <Heading asChild textStyle=\"title.medium\" consumeCss>\n            <h4>{t(\"audio.textVersion.heading\")}</h4>\n          </Heading>\n          <TextVersionText>{textVersion}</TextVersionText>\n        </TextVersionWrapper>\n      )}\n    </AudioPlayerWrapper>\n  );\n};\n"],"mappings":"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"}

package/lib/AudioPlayer/AudioProgress.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2026-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { SliderValueChangeDetails } from "@ark-ui/react";
+interface Props {
+    currentTime: number;
+    duration: number;
+    onValueChange: (details: SliderValueChangeDetails) => void;
+    variant?: "simple" | "standard";
+}
+export declare const AudioProgress: ({ currentTime, duration, onValueChange, variant }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};