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

package/src/AudioPlayer/Controls.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import { type SliderValueChangeDetails, createListCollection } from "@ark-ui/react";
-import { Replay15Line, Forward15Line, PlayFill, PauseLine, VolumeUpFill, CheckLine } from "@ndla/icons";
+import { createListCollection } from "@ark-ui/react";
+import { Replay15Line, Forward15Line, VolumeUpFill, CheckLine } from "@ndla/icons";
 import {
   Button,
   FieldRoot,
@@ -23,18 +23,16 @@ import {
   SelectLabel,
   SelectRoot,
   SelectTrigger,
-  SliderControl,
-  SliderHiddenInput,
-  SliderLabel,
-  SliderRange,
-  SliderRoot,
-  SliderThumb,
-  SliderTrack,
   Text,
 } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { useEffect, useRef, useState } from "react";
 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 ControlsWrapper = styled("div", {
   base: {
@@ -64,7 +62,7 @@ const ControlsWrapper = styled("div", {
   },
 });
 
-const PlayButton = styled(IconButton, {
+const StyledPlayButton = styled(PlayButton, {
   base: {
     gridArea: "play",
   },
@@ -130,117 +128,48 @@ const StyledSelectRoot = styled(SelectRoot<string>, {
   },
 });
 
-const StyledSliderControl = styled(SliderControl, {
-  base: {
-    height: "surface.3xsmall",
-    minWidth: "small",
-  },
-});
-
 const StyledPopoverContent = styled(PopoverContent, {
   base: {
     paddingInline: "small",
   },
 });
 
-const formatTime = (seconds: number) => {
-  const minutes = Math.floor(seconds / 60);
-  const currentSeconds = seconds % 60;
-
-  const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;
-  return `${minutes}:${formattedSeconds}`;
-};
-
 const speedValues = createListCollection({ items: ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"] });
 
 interface Props {
   src: string;
   title: string;
+  variant?: "full" | "simplified";
 }
 
 export const Controls = ({ src, title }: Props) => {
   const { t } = useTranslation();
-  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<HTMLAudioElement>(null);
-
-  useEffect(() => {
-    if (audioRef.current) {
-      const audioElement = audioRef.current;
-      const handleTimeUpdate = () => {
-        const { currentTime, duration } = audioElement;
-        setCurrentTime(Math.round(currentTime));
-        setDuration(Math.round(duration));
-      };
-
-      const handleLoadedMetaData = () => {
-        const { currentTime, duration } = audioElement;
-        setCurrentTime(Math.round(currentTime));
-        setDuration(Math.round(duration));
-      };
-
-      const handleTimeEnded = () => {
-        setPlaying(false);
-      };
-
-      audioElement.addEventListener("timeupdate", handleTimeUpdate);
-      audioElement.addEventListener("loadedmetadata", handleLoadedMetaData);
-      audioElement.addEventListener("ended", handleTimeEnded);
-      return () => {
-        audioElement.removeEventListener("timeupdate", handleTimeUpdate);
-        audioElement.removeEventListener("loadedmetadata", handleLoadedMetaData);
-        audioElement.removeEventListener("ended", handleTimeEnded);
-      };
-    }
-  }, []);
-
-  const togglePlay = () => {
-    if (audioRef.current) {
-      const audioElement = audioRef.current;
-      if (!playing) {
-        audioElement.play();
-      } else {
-        audioElement.pause();
-      }
-      setPlaying(!playing);
-    }
-  };
-
-  const onPlaybackRateChange = (rate: number) => {
-    setSpeedValue(rate);
-    if (audioRef.current) {
-      audioRef.current.playbackRate = rate;
-    }
-  };
-
-  const onSeekSeconds = (seconds: number) => {
-    if (audioRef.current) {
-      audioRef.current.currentTime += seconds;
-    }
-  };
-
-  const handleSliderChange = (details: SliderValueChangeDetails) => {
-    const newValue = details.value[0];
-    if (audioRef.current && newValue != null && !isNaN(newValue)) {
-      audioRef.current.currentTime = details.value[0];
-    }
-  };
-
-  const handleVolumeSliderChange = (details: SliderValueChangeDetails) => {
-    if (audioRef.current) {
-      audioRef.current.volume = details.value[0] / 100;
-      setVolumeValue(details.value[0]);
-    }
-  };
+  const {
+    audioRef,
+    onEnded,
+    onHandleTime,
+    onSeekSeconds,
+    playing,
+    togglePlay,
+    handleSliderChange,
+    handleVolumeSliderChange,
+    currentTime,
+    duration,
+    speedValue,
+    onPlaybackRateChange,
+    volumeValue,
+  } = useAudioControls();
 
   return (
     <div>
-      {/* TODO: We should tie this up to the textual description somehow */}
-      {/* oxlint-disable-next-line jsx-a11y/media-has-caption */}
-      <audio ref={audioRef} src={src} title={title} preload="metadata" />
+      <AudioElement
+        src={src}
+        title={title}
+        ref={audioRef}
+        onEnded={onEnded}
+        onLoadedMetadata={onHandleTime}
+        onTimeUpdate={onHandleTime}
+      />
       <ControlsWrapper>
         <Back15SecButton
           variant="tertiary"
@@ -250,9 +179,7 @@ export const Controls = ({ src, title }: Props) => {
         >
           <Replay15Line />
         </Back15SecButton>
-        <PlayButton aria-label={t(playing ? t("audio.pause") : t("audio.play"))} variant="primary" onClick={togglePlay}>
-          {playing ? <PauseLine /> : <PlayFill />}
-        </PlayButton>
+        <StyledPlayButton playing={playing} onClick={togglePlay} />
         <Forward15SecButton
           variant="tertiary"
           title={t("audio.controls.forward15sec")}
@@ -265,29 +192,7 @@ export const Controls = ({ src, title }: Props) => {
           <StyledText textStyle="label.medium" asChild consumeCss>
             <div>{formatTime(currentTime)}</div>
           </StyledText>
-          <SliderRoot
-            value={[currentTime]}
-            defaultValue={[0]}
-            step={1}
-            max={duration}
-            onValueChange={handleSliderChange}
-            getAriaValueText={(value) =>
-              t("audio.valueText", {
-                start: formatTime(Math.round(value.value)),
-                end: formatTime(Math.round(duration)),
-              })
-            }
-          >
-            <SliderLabel srOnly>{t("audio.progressBar")}</SliderLabel>
-            <SliderControl>
-              <SliderTrack>
-                <SliderRange />
-              </SliderTrack>
-              <SliderThumb index={0}>
-                <SliderHiddenInput />
-              </SliderThumb>
-            </SliderControl>
-          </SliderRoot>
+          <AudioProgress currentTime={currentTime} duration={duration} onValueChange={handleSliderChange} />
           <StyledText textStyle="label.medium" asChild consumeCss>
             <div>-{formatTime(Math.round(duration - currentTime))}</div>
           </StyledText>
@@ -330,25 +235,7 @@ export const Controls = ({ src, title }: Props) => {
             </VolumeButton>
           </PopoverTrigger>
           <StyledPopoverContent>
-            <SliderRoot
-              orientation="vertical"
-              value={[volumeValue]}
-              min={0}
-              max={100}
-              defaultValue={[100]}
-              step={1}
-              onValueChange={handleVolumeSliderChange}
-            >
-              <SliderLabel srOnly>{t("audio.controls.adjustVolume")}</SliderLabel>
-              <StyledSliderControl>
-                <SliderTrack>
-                  <SliderRange />
-                </SliderTrack>
-                <SliderThumb index={0}>
-                  <SliderHiddenInput />
-                </SliderThumb>
-              </StyledSliderControl>
-            </SliderRoot>
+            <VolumeSlider value={volumeValue} onValueChange={handleVolumeSliderChange} />
           </StyledPopoverContent>
         </PopoverRoot>
       </ControlsWrapper>

package/src/AudioPlayer/PlayButton.tsx

@@ -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 { PauseLine, PlayFill } from "@ndla/icons";
+import { IconButton, type IconButtonProps } from "@ndla/primitives";
+import { useTranslation } from "react-i18next";
+
+interface Props extends IconButtonProps {
+  playing?: boolean;
+}
+
+export const PlayButton = ({ playing, children, ...rest }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <IconButton aria-label={playing ? t("audio.pause") : t("audio.play")} {...rest}>
+      {children ?? (playing ? <PauseLine /> : <PlayFill />)}
+    </IconButton>
+  );
+};

package/src/AudioPlayer/SpeechControl.tsx

@@ -7,37 +7,24 @@
  */
 
 import { VolumeUpFill } from "@ndla/icons";
-import { IconButton } from "@ndla/primitives";
-import { useRef } from "react";
-import { useTranslation } from "react-i18next";
+import { PlayButton } from "./PlayButton";
+import { useAudioControls } from "./useAudioControls";
 
 type Props = {
   src: string;
   title: string;
-  type?: "gloss" | "audio";
 };
 
-export const SpeechControl = ({ src, title, type = "audio" }: Props) => {
-  const { t } = useTranslation();
-  const audioRef = useRef<HTMLAudioElement>(null);
+export const SpeechControl = ({ src, title }: Props) => {
+  const { audioRef, togglePlay } = useAudioControls();
 
-  const togglePlay = () => {
-    if (audioRef.current) {
-      const audioElement = audioRef.current;
-      if (audioElement.paused) {
-        audioElement.play();
-      } else {
-        audioElement.pause();
-      }
-    }
-  };
   return (
     <div data-embed-type="speech">
       {/* oxlint-disable-next-line jsx-a11y/media-has-caption */}
       <audio ref={audioRef} src={src} title={title} preload="metadata" />
-      <IconButton variant="tertiary" aria-label={t(`${type}.play`)} title={t(`${type}.play`)} onClick={togglePlay}>
+      <PlayButton variant="tertiary" onClick={togglePlay}>
         <VolumeUpFill />
-      </IconButton>
+      </PlayButton>
     </div>
   );
 };

package/src/AudioPlayer/VolumeSlider.tsx

@@ -0,0 +1,56 @@
+/**
+ * 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 {
+  SliderControl,
+  SliderRoot,
+  SliderLabel,
+  SliderTrack,
+  SliderRange,
+  SliderHiddenInput,
+  SliderThumb,
+} from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { t } from "i18next";
+
+const StyledSliderControl = styled(SliderControl, {
+  base: {
+    height: "surface.3xsmall",
+    minWidth: "small",
+  },
+});
+
+interface Props {
+  value: number;
+  onValueChange: (value: SliderValueChangeDetails) => void;
+}
+
+export const VolumeSlider = ({ value, onValueChange }: Props) => {
+  return (
+    <SliderRoot
+      orientation="vertical"
+      value={[value]}
+      min={0}
+      max={100}
+      defaultValue={[100]}
+      step={1}
+      onValueChange={onValueChange}
+    >
+      <SliderLabel srOnly>{t("audio.controls.adjustVolume")}</SliderLabel>
+      <StyledSliderControl>
+        <SliderTrack>
+          <SliderRange />
+        </SliderTrack>
+        <SliderThumb index={0}>
+          <SliderHiddenInput />
+        </SliderThumb>
+      </StyledSliderControl>
+    </SliderRoot>
+  );
+};

package/src/AudioPlayer/audioUtils.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 const formatTime = (seconds: number) => {
+  const minutes = Math.floor(seconds / 60);
+  const currentSeconds = seconds % 60;
+
+  const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;
+  return `${minutes}:${formattedSeconds}`;
+};

package/src/AudioPlayer/useAudioControls.ts

@@ -0,0 +1,80 @@
+/**
+ * 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 { useCallback, useRef, useState, type ReactEventHandler } from "react";
+
+export 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<HTMLAudioElement>(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: number) => {
+    setSpeedValue(rate);
+    if (audioRef.current) {
+      audioRef.current.playbackRate = rate;
+    }
+  }, []);
+
+  const onSeekSeconds = useCallback((seconds: number) => {
+    if (audioRef.current) {
+      audioRef.current.currentTime += seconds;
+    }
+  }, []);
+
+  const handleSliderChange = useCallback((details: SliderValueChangeDetails) => {
+    const newValue = details.value[0];
+    if (audioRef.current && newValue != null && !isNaN(newValue)) {
+      audioRef.current.currentTime = details.value[0];
+    }
+  }, []);
+
+  const handleVolumeSliderChange = useCallback((details: SliderValueChangeDetails) => {
+    if (audioRef.current) {
+      audioRef.current.volume = details.value[0] / 100;
+      setVolumeValue(details.value[0]);
+    }
+  }, []);
+
+  const onEnded = useCallback(() => setPlaying(false), []);
+
+  const onHandleTime: ReactEventHandler<HTMLAudioElement> = useCallback((meta) => {
+    const target = meta.currentTarget;
+    setCurrentTime(Math.round(target.currentTime));
+    setDuration(Math.round(target.duration));
+  }, []);
+
+  return {
+    togglePlay,
+    onPlaybackRateChange,
+    onSeekSeconds,
+    handleVolumeSliderChange,
+    handleSliderChange,
+    onEnded,
+    onHandleTime,
+    speedValue,
+    volumeValue,
+    currentTime,
+    duration,
+    playing,
+    audioRef,
+  };
+};

package/src/Embed/AudioEmbed.tsx

@@ -9,7 +9,7 @@
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { AudioMetaData } from "@ndla/types-embed";
-import { AudioPlayer } from "../AudioPlayer/AudioPlayer";
+import { AudioPlayer, type AudioPlayerVariant } from "../AudioPlayer/AudioPlayer";
 import { EmbedByline } from "../LicenseByline/EmbedByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
 import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
@@ -40,9 +40,7 @@ export const AudioEmbed = ({ embed, lang }: Props) => {
 
   const { data, embedData } = embed;
 
-  if (embedData.type === "minimal") {
-    return <AudioPlayer speech src={data.audioFile.url} title={data.title.title} />;
-  }
+  const variant = embedData.type === "podcast" ? "standard" : (embedData.type as AudioPlayerVariant);
 
   const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;
 
@@ -55,6 +53,7 @@ export const AudioEmbed = ({ embed, lang }: Props) => {
   return (
     <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>
       <AudioPlayer
+        variant={variant}
         description={data.podcastMeta?.introduction ?? ""}
         img={img}
         src={data.audioFile.url}
@@ -66,11 +65,13 @@ export const AudioEmbed = ({ embed, lang }: Props) => {
         title={data.title.title}
         subtitle={subtitle}
       />
-      <EmbedByline
-        error={false}
-        type={data.audioType === "standard" ? "audio" : "podcast"}
-        copyright={embed.data.copyright}
-      />
+      {variant === "standard" && (
+        <EmbedByline
+          error={false}
+          type={data.audioType === "standard" ? "audio" : "podcast"}
+          copyright={embed.data.copyright}
+        />
+      )}
     </StyledFigure>
   );
 };

package/src/Gloss/Gloss.tsx

@@ -162,7 +162,7 @@ export const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, varia
               </Text>
             )}
           </TextWrapper>
-          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} type="gloss" />}
+          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} />}
         </Container>
         <StyledContainer>
           <Text textStyle="label.medium" asChild consumeCss>

package/src/index.ts

@@ -57,6 +57,8 @@ 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";