@ndla/ui 56.0.123-alpha.0 → 56.0.124-alpha.0

package/lib/AudioPlayer/Controls.js

@@ -1,338 +1,255 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _react2 = require("@ark-ui/react");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Copyright (c) 2021-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 ControlsWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    borderBlockStart: "1px solid",
-    borderColor: "stroke.default",
-    borderBottomRadius: "xsmall",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    background: "background.default",
-    gap: "xsmall",
-    paddingBlock: "xsmall",
-    paddingInline: "medium",
-    tabletWideDown: {
-      display: "grid",
-      paddingBlock: "xsmall",
-      paddingInline: "xsmall",
-      gridTemplateColumns: "1fr repeat(5, auto) 1fr",
-      gridTemplateAreas: `
+//#region src/AudioPlayer/Controls.tsx
+const ControlsWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	borderBlockStart: "1px solid",
+	borderColor: "stroke.default",
+	borderBottomRadius: "xsmall",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	background: "background.default",
+	gap: "xsmall",
+	paddingBlock: "xsmall",
+	paddingInline: "medium",
+	tabletWideDown: {
+		display: "grid",
+		paddingBlock: "xsmall",
+		paddingInline: "xsmall",
+		gridTemplateColumns: "1fr repeat(5, auto) 1fr",
+		gridTemplateAreas: `
   "track  track track     track track     track   track"
   ".      speed backwards play  forwards  volume  ."
 `
-    },
-    mobileWideDown: {
-      columnGap: "3xsmall"
-    }
-  }
-});
-const PlayButton = (0, _jsx2.styled)(_primitives.IconButton, {
-  base: {
-    gridArea: "play"
-  }
-});
-const Forward15SecButton = (0, _jsx2.styled)(_primitives.IconButton, {
-  base: {
-    gridArea: "forwards"
-  }
-});
-const Back15SecButton = (0, _jsx2.styled)(_primitives.IconButton, {
-  base: {
-    gridArea: "backwards"
-  }
-});
-const ProgressWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    flex: "1",
-    display: "flex",
-    alignItems: "center",
-    gap: "xxsmall",
-    gridArea: "track",
-    paddingBlock: "xsmall",
-    mobileDown: {
-      paddingInline: "xsmall"
-    }
-  }
-});
-const StyledText = (0, _jsx2.styled)(_primitives.Text, {
-  base: {
-    minWidth: "xxlarge",
-    flexShrink: "0",
-    textAlign: "center"
-  }
-});
-const VolumeButton = (0, _jsx2.styled)(_primitives.IconButton, {
-  base: {
-    gridArea: "volume"
-  }
-});
-const SpeedButton = (0, _jsx2.styled)(_primitives.Button, {
-  base: {
-    paddingBlock: "auto",
-    paddingInline: "auto",
-    maxWidth: "xxlarge",
-    maxHeight: "xxlarge",
-    minWidth: "xxlarge",
-    minHeight: "xxlarge",
-    "& span": {
-      flex: "1"
-    }
-  }
-});
-const StyledSelectRoot = (0, _jsx2.styled)(_primitives.SelectRoot, {
-  base: {
-    gridArea: "speed"
-  }
-});
-const StyledSliderControl = (0, _jsx2.styled)(_primitives.SliderControl, {
-  base: {
-    height: "surface.3xsmall",
-    minWidth: "small"
-  }
-});
-const StyledPopoverContent = (0, _jsx2.styled)(_primitives.PopoverContent, {
-  base: {
-    paddingInline: "small"
-  }
-});
-const formatTime = seconds => {
-  const minutes = Math.floor(seconds / 60);
-  const currentSeconds = seconds % 60;
-  const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;
-  return `${minutes}:${formattedSeconds}`;
+	},
+	mobileWideDown: { columnGap: "3xsmall" }
+} });
+const PlayButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: { gridArea: "play" } });
+const Forward15SecButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: { gridArea: "forwards" } });
+const Back15SecButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: { gridArea: "backwards" } });
+const ProgressWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	flex: "1",
+	display: "flex",
+	alignItems: "center",
+	gap: "xxsmall",
+	gridArea: "track",
+	paddingBlock: "xsmall",
+	mobileDown: { paddingInline: "xsmall" }
+} });
+const StyledText = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: {
+	minWidth: "xxlarge",
+	flexShrink: "0",
+	textAlign: "center"
+} });
+const VolumeButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: { gridArea: "volume" } });
+const SpeedButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: {
+	paddingBlock: "auto",
+	paddingInline: "auto",
+	maxWidth: "xxlarge",
+	maxHeight: "xxlarge",
+	minWidth: "xxlarge",
+	minHeight: "xxlarge",
+	"& span": { flex: "1" }
+} });
+const StyledSelectRoot = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.SelectRoot, { base: { gridArea: "speed" } });
+const StyledSliderControl = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.SliderControl, { base: {
+	height: "surface.3xsmall",
+	minWidth: "small"
+} });
+const StyledPopoverContent = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.PopoverContent, { base: { paddingInline: "small" } });
+const formatTime = (seconds) => {
+	const minutes = Math.floor(seconds / 60);
+	const currentSeconds = seconds % 60;
+	const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;
+	return `${minutes}:${formattedSeconds}`;
 };
-const speedValues = (0, _react2.createListCollection)({
-  items: ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"]
-});
-const Controls = _ref => {
-  let {
-    src,
-    title
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const [speedValue, setSpeedValue] = (0, _react.useState)(1);
-  const [volumeValue, setVolumeValue] = (0, _react.useState)(100);
-  const [currentTime, setCurrentTime] = (0, _react.useState)(0);
-  const [remainingTime, setRemainingTime] = (0, _react.useState)(0);
-  const [playing, setPlaying] = (0, _react.useState)(false);
-  const audioRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (audioRef.current) {
-      audioRef.current.playbackRate = speedValue;
-    }
-  }, [speedValue]);
-  (0, _react.useEffect)(() => {
-    if (audioRef.current) {
-      const audioElement = audioRef.current;
-      const handleTimeUpdate = () => {
-        const {
-          currentTime,
-          duration
-        } = audioElement;
-        setCurrentTime(Math.round(currentTime));
-        setRemainingTime(Math.round(duration - currentTime));
-      };
-      const handleLoadedMetaData = () => {
-        const {
-          currentTime,
-          duration
-        } = audioElement;
-        setCurrentTime(Math.round(currentTime));
-        setRemainingTime(Math.round(duration - currentTime));
-      };
-      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 onSeekSeconds = seconds => {
-    if (audioRef.current) {
-      audioRef.current.currentTime += seconds;
-    }
-  };
-  const handleSliderChange = details => {
-    const newValue = details.value[0];
-    if (audioRef.current && newValue != null && !isNaN(newValue)) {
-      audioRef.current.currentTime = details.value[0];
-    }
-  };
-  const handleVolumeSliderChange = details => {
-    if (audioRef.current) {
-      audioRef.current.volume = details.value[0] / 100;
-      setVolumeValue(details.value[0]);
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("audio", {
-      ref: audioRef,
-      src: src,
-      title: title,
-      preload: "metadata"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ControlsWrapper, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Back15SecButton, {
-        variant: "tertiary",
-        title: t("audio.controls.rewind15sec"),
-        "aria-label": t("audio.controls.rewind15sec"),
-        onClick: () => onSeekSeconds(-15),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Replay15Line, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PlayButton, {
-        "aria-label": t(playing ? t("audio.pause") : t("audio.play")),
-        variant: "primary",
-        onClick: togglePlay,
-        children: playing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PauseLine, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlayFill, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Forward15SecButton, {
-        variant: "tertiary",
-        title: t("audio.controls.forward15sec"),
-        "aria-label": t("audio.controls.forward15sec"),
-        onClick: () => onSeekSeconds(15),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Forward15Line, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ProgressWrapper, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
-          textStyle: "label.medium",
-          asChild: true,
-          consumeCss: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: formatTime(currentTime)
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SliderRoot, {
-          value: [audioRef.current?.currentTime ?? 0],
-          defaultValue: [0],
-          step: 1,
-          max: Math.round(audioRef.current?.duration ?? 0),
-          onValueChange: handleSliderChange,
-          getAriaValueText: value => t("audio.valueText", {
-            start: formatTime(Math.round(value.value)),
-            end: formatTime(Math.round(audioRef.current?.duration ?? 0))
-          }),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderLabel, {
-            srOnly: true,
-            children: t("audio.progressBar")
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SliderControl, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderTrack, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderRange, {})
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderThumb, {
-              index: 0,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderHiddenInput, {})
-            })]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
-          textStyle: "label.medium",
-          asChild: true,
-          consumeCss: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            children: ["-", formatTime(remainingTime)]
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.FieldRoot, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSelectRoot, {
-          collection: speedValues,
-          value: [speedValue.toString()],
-          onValueChange: details => setSpeedValue(parseFloat(details.value[0])),
-          positioning: {
-            placement: "top"
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectLabel, {
-            srOnly: true,
-            children: t("audio.controls.selectSpeed")
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectControl, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectTrigger, {
-              asChild: true,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedButton, {
-                variant: "tertiary",
-                title: t("audio.controls.selectSpeed"),
-                "aria-label": t("audio.controls.selectSpeed"),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                  children: `${speedValue}x`
-                })
-              })
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectContent, {
-            children: speedValues.items.map(speed => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SelectItem, {
-              item: speed,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SelectItemText, {
-                children: [speed, "x"]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectItemIndicator, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckLine, {})
-              })]
-            }, speed))
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.PopoverRoot, {
-        positioning: {
-          placement: "top"
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverTrigger, {
-          asChild: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(VolumeButton, {
-            variant: "tertiary",
-            "aria-label": t("audio.controls.adjustVolume"),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.VolumeUpFill, {})
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopoverContent, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SliderRoot, {
-            orientation: "vertical",
-            value: [volumeValue],
-            min: 0,
-            max: 100,
-            defaultValue: [100],
-            step: 1,
-            onValueChange: handleVolumeSliderChange,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderLabel, {
-              srOnly: true,
-              children: t("audio.controls.adjustVolume")
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSliderControl, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderTrack, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderRange, {})
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderThumb, {
-                index: 0,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderHiddenInput, {})
-              })]
-            })]
-          })
-        })]
-      })]
-    })]
-  });
+const speedValues = (0, __ark_ui_react.createListCollection)({ items: [
+	"0.5",
+	"0.75",
+	"1",
+	"1.25",
+	"1.5",
+	"1.75",
+	"2"
+] });
+const Controls = ({ src, title }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const [speedValue, setSpeedValue] = (0, react.useState)(1);
+	const [volumeValue, setVolumeValue] = (0, react.useState)(100);
+	const [currentTime, setCurrentTime] = (0, react.useState)(0);
+	const [remainingTime, setRemainingTime] = (0, react.useState)(0);
+	const [playing, setPlaying] = (0, react.useState)(false);
+	const audioRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (audioRef.current) audioRef.current.playbackRate = speedValue;
+	}, [speedValue]);
+	(0, react.useEffect)(() => {
+		if (audioRef.current) {
+			const audioElement = audioRef.current;
+			const handleTimeUpdate = () => {
+				const { currentTime: currentTime$1, duration } = audioElement;
+				setCurrentTime(Math.round(currentTime$1));
+				setRemainingTime(Math.round(duration - currentTime$1));
+			};
+			const handleLoadedMetaData = () => {
+				const { currentTime: currentTime$1, duration } = audioElement;
+				setCurrentTime(Math.round(currentTime$1));
+				setRemainingTime(Math.round(duration - currentTime$1));
+			};
+			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 onSeekSeconds = (seconds) => {
+		if (audioRef.current) audioRef.current.currentTime += seconds;
+	};
+	const handleSliderChange = (details) => {
+		const newValue = details.value[0];
+		if (audioRef.current && newValue != null && !isNaN(newValue)) audioRef.current.currentTime = details.value[0];
+	};
+	const handleVolumeSliderChange = (details) => {
+		if (audioRef.current) {
+			audioRef.current.volume = details.value[0] / 100;
+			setVolumeValue(details.value[0]);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
+		ref: audioRef,
+		src,
+		title,
+		preload: "metadata"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ControlsWrapper, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Back15SecButton, {
+			variant: "tertiary",
+			title: t("audio.controls.rewind15sec"),
+			"aria-label": t("audio.controls.rewind15sec"),
+			onClick: () => onSeekSeconds(-15),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.Replay15Line, {})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayButton, {
+			"aria-label": t(playing ? t("audio.pause") : t("audio.play")),
+			variant: "primary",
+			onClick: togglePlay,
+			children: playing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.PauseLine, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.PlayFill, {})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Forward15SecButton, {
+			variant: "tertiary",
+			title: t("audio.controls.forward15sec"),
+			"aria-label": t("audio.controls.forward15sec"),
+			onClick: () => onSeekSeconds(15),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.Forward15Line, {})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ProgressWrapper, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, {
+				textStyle: "label.medium",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: formatTime(currentTime) })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SliderRoot, {
+				value: [audioRef.current?.currentTime ?? 0],
+				defaultValue: [0],
+				step: 1,
+				max: Math.round(audioRef.current?.duration ?? 0),
+				onValueChange: handleSliderChange,
+				getAriaValueText: (value) => t("audio.valueText", {
+					start: formatTime(Math.round(value.value)),
+					end: formatTime(Math.round(audioRef.current?.duration ?? 0))
+				}),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderLabel, {
+					srOnly: true,
+					children: t("audio.progressBar")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SliderControl, { 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, {})
+				})] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, {
+				textStyle: "label.medium",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: ["-", formatTime(remainingTime)] })
+			})
+		] }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.FieldRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSelectRoot, {
+			collection: speedValues,
+			value: [speedValue.toString()],
+			onValueChange: (details) => setSpeedValue(parseFloat(details.value[0])),
+			positioning: { placement: "top" },
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectLabel, {
+					srOnly: true,
+					children: t("audio.controls.selectSpeed")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectControl, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SpeedButton, {
+						variant: "tertiary",
+						title: t("audio.controls.selectSpeed"),
+						"aria-label": t("audio.controls.selectSpeed"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: `${speedValue}x` })
+					})
+				}) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectContent, { children: speedValues.items.map((speed) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SelectItem, {
+					item: speed,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SelectItemText, { children: [speed, "x"] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.CheckLine, {}) })]
+				}, speed)) })
+			]
+		}) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.PopoverRoot, {
+			positioning: { placement: "top" },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VolumeButton, {
+					variant: "tertiary",
+					"aria-label": t("audio.controls.adjustVolume"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.VolumeUpFill, {})
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SliderRoot, {
+				orientation: "vertical",
+				value: [volumeValue],
+				min: 0,
+				max: 100,
+				defaultValue: [100],
+				step: 1,
+				onValueChange: handleVolumeSliderChange,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderLabel, {
+					srOnly: true,
+					children: 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, {})
+				})] })]
+			}) })]
+		})
+	] })] });
 };
-var _default = exports.default = Controls;
+var Controls_default = Controls;
+
+//#endregion
+exports.Controls_default = Controls_default;
+//# sourceMappingURL=Controls.js.map