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

package/lib/AudioPlayer/VolumeSlider.js

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

package/lib/AudioPlayer/VolumeSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeSlider.js","names":["SliderControl","SliderRoot","SliderLabel","SliderTrack","SliderRange","SliderThumb","SliderHiddenInput"],"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,uBAAA,GAAA,wBAAA,QAA6BA,iBAAAA,eAAe,EAChD,MAAM;CACJ,QAAQ;CACR,UAAU;CACX,EACF,CAAC;AAOF,MAAa,gBAAgB,EAAE,OAAO,oBAA2B;AAC/D,QACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,YAAD;EACE,aAAY;EACZ,OAAO,CAAC,MAAM;EACd,KAAK;EACL,KAAK;EACL,cAAc,CAAC,IAAI;EACnB,MAAM;EACS;YAPjB,CASE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,QAAA;4BAAU,8BAA8B;GAAe,CAAA,EACpE,iBAAA,GAAA,kBAAA,MAAC,qBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,EAAe,CAAA,EACH,CAAA,EACd,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,OAAO;aAClB,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,mBAAD,EAAqB,CAAA;GACT,CAAA,CACM,EAAA,CAAA,CACX"}

package/lib/AudioPlayer/audioUtils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ *
+ */
+export declare const formatTime: (seconds: number) => string;

package/lib/AudioPlayer/audioUtils.js

@@ -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
+exports.formatTime = formatTime;
+
+//# sourceMappingURL=audioUtils.js.map

package/lib/AudioPlayer/audioUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audioUtils.js","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/lib/AudioPlayer/useAudioControls.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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";
+import { type ReactEventHandler } from "react";
+export declare const useAudioControls: () => {
+    togglePlay: () => void;
+    onPlaybackRateChange: (rate: number) => void;
+    onSeekSeconds: (seconds: number) => void;
+    handleVolumeSliderChange: (details: SliderValueChangeDetails) => void;
+    handleSliderChange: (details: SliderValueChangeDetails) => void;
+    onEnded: () => void;
+    onHandleTime: ReactEventHandler<HTMLAudioElement>;
+    speedValue: number;
+    volumeValue: number;
+    currentTime: number;
+    duration: number;
+    playing: boolean;
+    audioRef: import("react").RefObject<HTMLAudioElement | null>;
+};

package/lib/AudioPlayer/useAudioControls.js

@@ -0,0 +1,56 @@
+require("../_virtual/_rolldown/runtime.js");
+let react = require("react");
+//#region src/AudioPlayer/useAudioControls.ts
+const useAudioControls = () => {
+	const [speedValue, setSpeedValue] = (0, react.useState)(1);
+	const [volumeValue, setVolumeValue] = (0, react.useState)(100);
+	const [currentTime, setCurrentTime] = (0, react.useState)(0);
+	const [duration, setDuration] = (0, react.useState)(0);
+	const [playing, setPlaying] = (0, react.useState)(false);
+	const audioRef = (0, react.useRef)(null);
+	const togglePlay = (0, react.useCallback)(() => {
+		if (!audioRef.current) return;
+		if (audioRef.current.paused) audioRef.current.play();
+		else audioRef.current.pause();
+		setPlaying((p) => !p);
+	}, []);
+	const onPlaybackRateChange = (0, react.useCallback)((rate) => {
+		setSpeedValue(rate);
+		if (audioRef.current) audioRef.current.playbackRate = rate;
+	}, []);
+	const onSeekSeconds = (0, react.useCallback)((seconds) => {
+		if (audioRef.current) audioRef.current.currentTime += seconds;
+	}, []);
+	const handleSliderChange = (0, react.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: (0, react.useCallback)((details) => {
+			if (audioRef.current) {
+				audioRef.current.volume = details.value[0] / 100;
+				setVolumeValue(details.value[0]);
+			}
+		}, []),
+		handleSliderChange,
+		onEnded: (0, react.useCallback)(() => setPlaying(false), []),
+		onHandleTime: (0, react.useCallback)((meta) => {
+			const target = meta.currentTarget;
+			setCurrentTime(Math.round(target.currentTime));
+			setDuration(Math.round(target.duration));
+		}, []),
+		speedValue,
+		volumeValue,
+		currentTime,
+		duration,
+		playing,
+		audioRef
+	};
+};
+//#endregion
+exports.useAudioControls = useAudioControls;
+
+//# sourceMappingURL=useAudioControls.js.map

package/lib/AudioPlayer/useAudioControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAudioControls.js","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,kBAAA,GAAA,MAAA,UAA0B,EAAE;CAC/C,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,IAAI;CACnD,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,EAAE;CACjD,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAwB,EAAE;CAC3C,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,YAAA,GAAA,MAAA,QAAoC,KAAK;CAE/C,MAAM,cAAA,GAAA,MAAA,mBAA+B;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,wBAAA,GAAA,MAAA,cAAoC,SAAiB;AACzD,gBAAc,KAAK;AACnB,MAAI,SAAS,QACX,UAAS,QAAQ,eAAe;IAEjC,EAAE,CAAC;CAEN,MAAM,iBAAA,GAAA,MAAA,cAA6B,YAAoB;AACrD,MAAI,SAAS,QACX,UAAS,QAAQ,eAAe;IAEjC,EAAE,CAAC;CAEN,MAAM,sBAAA,GAAA,MAAA,cAAkC,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,2BAAA,GAAA,MAAA,cAnB4C,YAAsC;AAClF,OAAI,SAAS,SAAS;AACpB,aAAS,QAAQ,SAAS,QAAQ,MAAM,KAAK;AAC7C,mBAAe,QAAQ,MAAM,GAAG;;KAEjC,EAAE,CAAC;EAeJ;EACA,UAAA,GAAA,MAAA,mBAdgC,WAAW,MAAM,EAAE,EAAE,CAAC;EAetD,eAAA,GAAA,MAAA,cAbqE,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/lib/Embed/AudioEmbed.js

@@ -19,11 +19,7 @@ const AudioEmbed = ({ embed, lang }) => {
 	const type = embed.embedData.type === "standard" ? "audio" : "podcast";
 	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder, { type });
 	const { data, embedData } = embed;
-	if (embedData.type === "minimal") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AudioPlayer.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}`
@@ -38,13 +34,14 @@ const AudioEmbed = ({ embed, lang }) => {
 		"data-embed-type": type,
 		...require_licenseAttributes.licenseAttributes(data.copyright.license.license, lang, embedData.url),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AudioPlayer.AudioPlayer, {
+			variant,
 			description: data.podcastMeta?.introduction ?? "",
 			img,
 			src: data.audioFile.url,
 			textVersion: data.manuscript?.manuscript.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: data.manuscript.manuscript } }) : void 0,
 			title: data.title.title,
 			subtitle
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedByline.EmbedByline, {
+		}), variant === "standard" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedByline.EmbedByline, {
 			error: false,
 			type: data.audioType === "standard" ? "audio" : "podcast",
 			copyright: embed.data.copyright

package/lib/Embed/AudioEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"AudioEmbed.js","names":["Figure","EmbedErrorPlaceholder","AudioPlayer","licenseAttributes","EmbedByline"],"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,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,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,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAA6B,MAAQ,CAAA;CAG9C,MAAM,EAAE,MAAM,cAAc;AAE5B,KAAI,UAAU,SAAS,UACrB,QAAO,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,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,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAoB;EAAM,mBAAiB;EAAM,GAH9BC,0BAAAA,kBAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAAI;YAGzF,CACE,iBAAA,GAAA,kBAAA,KAACD,oBAAAA,aAAD;GACE,aAAa,KAAK,aAAa,gBAAgB;GAC1C;GACL,KAAK,KAAK,UAAU;GACpB,aACE,KAAK,YAAY,WAAW,SAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,KAAK,WAAW,YAAY,EAAI,CAAA,GACtE,KAAA;GAEN,OAAO,KAAK,MAAM;GACR;GACV,CAAA,EACF,iBAAA,GAAA,kBAAA,KAACE,oBAAAA,aAAD;GACE,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;GACtB,CAAA,CACW"}
+{"version":3,"file":"AudioEmbed.js","names":["Figure","EmbedErrorPlaceholder","licenseAttributes","AudioPlayer","EmbedByline"],"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,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,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,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,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,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAoB;EAAM,mBAAiB;EAAM,GAH9BC,0BAAAA,kBAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAAI;YAGzF,CACE,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;GACW;GACT,aAAa,KAAK,aAAa,gBAAgB;GAC1C;GACL,KAAK,KAAK,UAAU;GACpB,aACE,KAAK,YAAY,WAAW,SAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,KAAK,WAAW,YAAY,EAAI,CAAA,GACtE,KAAA;GAEN,OAAO,KAAK,MAAM;GACR;GACV,CAAA,EACD,YAAY,cACX,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;GACE,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;GACtB,CAAA,CAES"}

package/lib/Gloss/Gloss.js

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

package/lib/Gloss/Gloss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gloss.js","names":["AccordionItemContent","AccordionItem","AccordionRoot","Text","SpeechControl","AccordionItemTrigger","IconButton","AccordionItemIndicator","ArrowDownShortLine","GlossExample"],"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.js","names":["AccordionItemContent","AccordionItem","AccordionRoot","Text","SpeechControl","AccordionItemTrigger","IconButton","AccordionItemIndicator","ArrowDownShortLine","GlossExample"],"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/lib/index.d.ts

@@ -39,6 +39,8 @@ export { PdfFile } from "./FileList/PdfFile";
 export { FactBox } from "./FactBox/FactBox";
 export { ResourceBox } from "./ResourceBox/ResourceBox";
 export { AudioPlayer } from "./AudioPlayer/AudioPlayer";
+export type { AudioPlayerVariant } from "./AudioPlayer/AudioPlayer";
+export { CompactAudioPlayer } from "./AudioPlayer/CompactAudioPlayer";
 export { constants } from "./model";
 export { contentTypes, contentTypeMapping, resourceEmbedTypeMapping } from "./model/ContentType";
 export { subjectTypes } from "./model/SubjectTypes";

package/lib/index.js

@@ -11,6 +11,7 @@ const require_IframeEmbed = require("./Embed/IframeEmbed.js");
 const require_ImageEmbed = require("./Embed/ImageEmbed.js");
 const require_Concept = require("./Concept/Concept.js");
 const require_InlineTriggerButton = require("./Embed/InlineTriggerButton.js");
+const require_CompactAudioPlayer = require("./AudioPlayer/CompactAudioPlayer.js");
 const require_AudioPlayer = require("./AudioPlayer/AudioPlayer.js");
 const require_AudioEmbed = require("./Embed/AudioEmbed.js");
 const require_FootnoteEmbed = require("./Embed/FootnoteEmbed.js");
@@ -75,6 +76,7 @@ exports.BrightcoveEmbed = require_BrightcoveEmbed.BrightcoveEmbed;
 exports.CampaignBlock = require_CampaignBlock.CampaignBlock;
 exports.CodeBlock = require_CodeBlock.CodeBlock;
 exports.CodeEmbed = require_CodeEmbed.CodeEmbed;
+exports.CompactAudioPlayer = require_CompactAudioPlayer.CompactAudioPlayer;
 exports.Concept = require_Concept.Concept;
 exports.ConceptEmbed = require_ConceptEmbed.ConceptEmbed;
 exports.ConceptInlineTriggerButton = require_ConceptInlineTriggerButton.ConceptInlineTriggerButton;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ndla/ui",
   "type": "module",
-  "version": "56.0.186-alpha.0",
+  "version": "56.0.188-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "exports": {
@@ -63,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f8a73392a71c05f052f6cc69d55ca57c38e0db5b"
+  "gitHead": "2c15990e9a7e9dbe56eb4168449f10f64a2a30b5"
 }

package/src/AudioPlayer/AudioElement.tsx

@@ -0,0 +1,20 @@
+/**
+ * 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 const AudioElement = (props: Props) => {
+  // TODO: We should tie this up to the textual description somehow
+  // oxlint-disable-next-line jsx-a11y/media-has-caption
+  return <audio preload="metadata" {...props} />;
+};

package/src/AudioPlayer/{AudiPlayer.stories.tsx → AudioPlayer.stories.tsx}

@@ -52,12 +52,21 @@ export const AudioPlayerStory: StoryObj<typeof AudioPlayer> = {
 
 AudioPlayerStory.storyName = "AudioPlayer";
 
+export const SpeechVariant: StoryObj<typeof AudioPlayer> = {
+  args: {
+    src: "https://api.staging.ndla.no/audio/files/Alltid_Nyheter_nrk128kps.mp3",
+    title: "Den gode lydhistoria",
+    textVersion: TextVersion,
+    variant: "minimal",
+  },
+};
+
 export const SimpleVariant: StoryObj<typeof AudioPlayer> = {
   args: {
     src: "https://api.staging.ndla.no/audio/files/Alltid_Nyheter_nrk128kps.mp3",
     title: "Den gode lydhistoria",
     textVersion: TextVersion,
-    speech: true,
+    variant: "compact",
   },
 };
 

package/src/AudioPlayer/AudioPlayer.tsx

@@ -11,6 +11,7 @@ import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import { type ReactNode, useId, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { CompactAudioPlayer } from "./CompactAudioPlayer";
 import { Controls } from "./Controls";
 import { SpeechControl } from "./SpeechControl";
 
@@ -140,33 +141,39 @@ const ShowMoreButton = styled(Button, {
 
 const DESCRIPTION_MAX_LENGTH = 200;
 
-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 const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersion }: Props) => {
+export const AudioPlayer = ({ src, title, subtitle, variant = "standard", description, img, textVersion }: Props) => {
   const { t } = useTranslation();
   const [showTextVersion, setShowTextVersion] = useState(false);
   const [showFullDescription, setShowFullDescription] = useState(false);
   const truncatedDescription = useMemo(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);
   const textDescriptionId = useId();
 
-  if (speech) {
+  if (variant === "minimal") {
     return <SpeechControl src={src} title={title} />;
   }
 
+  if (variant === "compact") {
+    return <CompactAudioPlayer src={src} title={title} />;
+  }
+
   const toggleTextVersion = () => {
     setShowTextVersion((curr) => !curr);
   };

package/src/AudioPlayer/AudioProgress.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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";
+import {
+  SliderRoot,
+  SliderLabel,
+  SliderControl,
+  SliderTrack,
+  SliderRange,
+  SliderThumb,
+  SliderHiddenInput,
+} from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
+import { formatTime } from "./audioUtils";
+
+interface Props {
+  currentTime: number;
+  duration: number;
+  onValueChange: (details: SliderValueChangeDetails) => void;
+  variant?: "simple" | "standard";
+}
+
+const StyledSliderThumb = styled(SliderThumb, {
+  variants: {
+    variant: {
+      standard: {},
+      simple: {
+        borderRadius: "0",
+        width: "4xsmall",
+        height: "4xsmall",
+      },
+    },
+  },
+});
+
+const StyledSliderTrack = styled(SliderTrack, {
+  variants: {
+    variant: {
+      standard: {},
+      simple: {
+        background: "unset",
+      },
+    },
+  },
+});
+
+const StyledSliderControl = styled(SliderControl, {
+  variants: {
+    variant: {
+      standard: {},
+      simple: {
+        height: "unset",
+      },
+    },
+  },
+});
+
+export const AudioProgress = ({ currentTime, duration, onValueChange, variant }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <SliderRoot
+      value={[currentTime]}
+      defaultValue={[0]}
+      step={1}
+      max={duration}
+      onValueChange={onValueChange}
+      getAriaValueText={(value) =>
+        t("audio.valueText", {
+          start: formatTime(Math.round(value.value)),
+          end: formatTime(Math.round(duration)),
+        })
+      }
+    >
+      <SliderLabel srOnly>{t("audio.progressBar")}</SliderLabel>
+      <StyledSliderControl variant={variant}>
+        <StyledSliderTrack variant={variant}>
+          <SliderRange />
+        </StyledSliderTrack>
+        <StyledSliderThumb index={0} variant={variant}>
+          <SliderHiddenInput />
+        </StyledSliderThumb>
+      </StyledSliderControl>
+    </SliderRoot>
+  );
+};

package/src/AudioPlayer/CompactAudioPlayer.tsx

@@ -0,0 +1,124 @@
+/**
+ * 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 { VolumeUpFill } from "@ndla/icons";
+import { PopoverRoot, PopoverTrigger, IconButton, PopoverContent, Text, PopoverTitle } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
+import { AudioElement } from "./AudioElement";
+import { AudioProgress } from "./AudioProgress";
+import { formatTime } from "./audioUtils";
+import { PlayButton } from "./PlayButton";
+import { useAudioControls } from "./useAudioControls";
+import { VolumeSlider } from "./VolumeSlider";
+
+const AudioContainer = styled("div", {
+  base: {
+    display: "flex",
+    gap: "xxsmall",
+    flexDirection: "column",
+    padding: "xsmall",
+    paddingBlockEnd: "0",
+    borderRadius: "xsmall",
+    boxShadow: "xsmall",
+    background: "surface.brand.1.subtle",
+  },
+});
+
+const ControlsContainer = styled("div", {
+  base: {
+    display: "flex",
+    gap: "xsmall",
+    alignItems: "center",
+  },
+});
+
+interface Props {
+  src: string;
+  title: string;
+}
+
+const StyledText = styled(Text, {
+  base: {
+    minWidth: "4xlarge",
+    flexShrink: "0",
+    textAlign: "center",
+  },
+});
+
+const StyledIconButton = styled(IconButton, {
+  base: {
+    marginInlineStart: "auto",
+  },
+});
+
+const EllipsedText = styled(Text, {
+  base: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+});
+
+export const CompactAudioPlayer = ({ src, title }: Props) => {
+  const { t } = useTranslation();
+  const {
+    audioRef,
+    playing,
+    togglePlay,
+    currentTime,
+    duration,
+    handleSliderChange,
+    volumeValue,
+    handleVolumeSliderChange,
+    onEnded,
+    onHandleTime,
+  } = useAudioControls();
+  return (
+    <AudioContainer>
+      <AudioElement
+        ref={audioRef}
+        src={src}
+        title={title}
+        onEnded={onEnded}
+        onLoadedMetadata={onHandleTime}
+        onTimeUpdate={onHandleTime}
+      />
+      <ControlsContainer>
+        <PlayButton playing={playing} onClick={togglePlay} />
+        <StyledText>
+          <Text textStyle="label.medium" asChild consumeCss>
+            <span>{formatTime(currentTime)}</span>
+          </Text>
+          {"/ "}
+          <Text textStyle="label.medium" color="text.subtle" asChild consumeCss>
+            <span>{formatTime(duration)}</span>
+          </Text>
+        </StyledText>
+        <EllipsedText textStyle="title.medium">{title}</EllipsedText>
+        <PopoverRoot positioning={{ placement: "top" }}>
+          <PopoverTrigger asChild>
+            <StyledIconButton variant="tertiary">
+              <VolumeUpFill />
+            </StyledIconButton>
+          </PopoverTrigger>
+          <PopoverContent>
+            <PopoverTitle srOnly>{t("audio.controls.adjustVolume")}</PopoverTitle>
+            <VolumeSlider value={volumeValue} onValueChange={handleVolumeSliderChange} />
+          </PopoverContent>
+        </PopoverRoot>
+      </ControlsContainer>
+      <AudioProgress
+        currentTime={currentTime}
+        duration={duration}
+        onValueChange={handleSliderChange}
+        variant="simple"
+      />
+    </AudioContainer>
+  );
+};