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

package/es/AudioPlayer/Controls.js

@@ -1,332 +1,254 @@
-/**
- * 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.
- *
- */
-
 import { useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { createListCollection } from "@ark-ui/react";
-import { Replay15Line, Forward15Line, PlayFill, PauseLine, VolumeUpFill, CheckLine } from "@ndla/icons";
 import { Button, FieldRoot, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, SelectContent, SelectControl, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SliderControl, SliderHiddenInput, SliderLabel, SliderRange, SliderRoot, SliderThumb, SliderTrack, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ControlsWrapper = 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: `
+import { useTranslation } from "react-i18next";
+import { CheckLine, Forward15Line, PauseLine, PlayFill, Replay15Line, VolumeUpFill } from "@ndla/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createListCollection } from "@ark-ui/react";
+
+//#region src/AudioPlayer/Controls.tsx
+const ControlsWrapper = 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 = styled(IconButton, {
-  base: {
-    gridArea: "play"
-  }
-});
-const Forward15SecButton = styled(IconButton, {
-  base: {
-    gridArea: "forwards"
-  }
-});
-const Back15SecButton = styled(IconButton, {
-  base: {
-    gridArea: "backwards"
-  }
-});
-const ProgressWrapper = styled("div", {
-  base: {
-    flex: "1",
-    display: "flex",
-    alignItems: "center",
-    gap: "xxsmall",
-    gridArea: "track",
-    paddingBlock: "xsmall",
-    mobileDown: {
-      paddingInline: "xsmall"
-    }
-  }
-});
-const StyledText = styled(Text, {
-  base: {
-    minWidth: "xxlarge",
-    flexShrink: "0",
-    textAlign: "center"
-  }
-});
-const VolumeButton = styled(IconButton, {
-  base: {
-    gridArea: "volume"
-  }
-});
-const SpeedButton = styled(Button, {
-  base: {
-    paddingBlock: "auto",
-    paddingInline: "auto",
-    maxWidth: "xxlarge",
-    maxHeight: "xxlarge",
-    minWidth: "xxlarge",
-    minHeight: "xxlarge",
-    "& span": {
-      flex: "1"
-    }
-  }
-});
-const StyledSelectRoot = styled(SelectRoot, {
-  base: {
-    gridArea: "speed"
-  }
-});
-const StyledSliderControl = styled(SliderControl, {
-  base: {
-    height: "surface.3xsmall",
-    minWidth: "small"
-  }
-});
-const StyledPopoverContent = styled(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 = styled(IconButton, { base: { gridArea: "play" } });
+const Forward15SecButton = styled(IconButton, { base: { gridArea: "forwards" } });
+const Back15SecButton = styled(IconButton, { base: { gridArea: "backwards" } });
+const ProgressWrapper = styled("div", { base: {
+	flex: "1",
+	display: "flex",
+	alignItems: "center",
+	gap: "xxsmall",
+	gridArea: "track",
+	paddingBlock: "xsmall",
+	mobileDown: { paddingInline: "xsmall" }
+} });
+const StyledText = styled(Text, { base: {
+	minWidth: "xxlarge",
+	flexShrink: "0",
+	textAlign: "center"
+} });
+const VolumeButton = styled(IconButton, { base: { gridArea: "volume" } });
+const SpeedButton = styled(Button, { base: {
+	paddingBlock: "auto",
+	paddingInline: "auto",
+	maxWidth: "xxlarge",
+	maxHeight: "xxlarge",
+	minWidth: "xxlarge",
+	minHeight: "xxlarge",
+	"& span": { flex: "1" }
+} });
+const StyledSelectRoot = styled(SelectRoot, { base: { gridArea: "speed" } });
+const StyledSliderControl = styled(SliderControl, { base: {
+	height: "surface.3xsmall",
+	minWidth: "small"
+} });
+const StyledPopoverContent = styled(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 = createListCollection({
-  items: ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"]
-});
-const Controls = _ref => {
-  let {
-    src,
-    title
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const [speedValue, setSpeedValue] = useState(1);
-  const [volumeValue, setVolumeValue] = useState(100);
-  const [currentTime, setCurrentTime] = useState(0);
-  const [remainingTime, setRemainingTime] = useState(0);
-  const [playing, setPlaying] = useState(false);
-  const audioRef = useRef(null);
-  useEffect(() => {
-    if (audioRef.current) {
-      audioRef.current.playbackRate = speedValue;
-    }
-  }, [speedValue]);
-  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__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx("audio", {
-      ref: audioRef,
-      src: src,
-      title: title,
-      preload: "metadata"
-    }), /*#__PURE__*/_jsxs(ControlsWrapper, {
-      children: [/*#__PURE__*/_jsx(Back15SecButton, {
-        variant: "tertiary",
-        title: t("audio.controls.rewind15sec"),
-        "aria-label": t("audio.controls.rewind15sec"),
-        onClick: () => onSeekSeconds(-15),
-        children: /*#__PURE__*/_jsx(Replay15Line, {})
-      }), /*#__PURE__*/_jsx(PlayButton, {
-        "aria-label": t(playing ? t("audio.pause") : t("audio.play")),
-        variant: "primary",
-        onClick: togglePlay,
-        children: playing ? /*#__PURE__*/_jsx(PauseLine, {}) : /*#__PURE__*/_jsx(PlayFill, {})
-      }), /*#__PURE__*/_jsx(Forward15SecButton, {
-        variant: "tertiary",
-        title: t("audio.controls.forward15sec"),
-        "aria-label": t("audio.controls.forward15sec"),
-        onClick: () => onSeekSeconds(15),
-        children: /*#__PURE__*/_jsx(Forward15Line, {})
-      }), /*#__PURE__*/_jsxs(ProgressWrapper, {
-        children: [/*#__PURE__*/_jsx(StyledText, {
-          textStyle: "label.medium",
-          asChild: true,
-          consumeCss: true,
-          children: /*#__PURE__*/_jsx("div", {
-            children: formatTime(currentTime)
-          })
-        }), /*#__PURE__*/_jsxs(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__*/_jsx(SliderLabel, {
-            srOnly: true,
-            children: t("audio.progressBar")
-          }), /*#__PURE__*/_jsxs(SliderControl, {
-            children: [/*#__PURE__*/_jsx(SliderTrack, {
-              children: /*#__PURE__*/_jsx(SliderRange, {})
-            }), /*#__PURE__*/_jsx(SliderThumb, {
-              index: 0,
-              children: /*#__PURE__*/_jsx(SliderHiddenInput, {})
-            })]
-          })]
-        }), /*#__PURE__*/_jsx(StyledText, {
-          textStyle: "label.medium",
-          asChild: true,
-          consumeCss: true,
-          children: /*#__PURE__*/_jsxs("div", {
-            children: ["-", formatTime(remainingTime)]
-          })
-        })]
-      }), /*#__PURE__*/_jsx(FieldRoot, {
-        children: /*#__PURE__*/_jsxs(StyledSelectRoot, {
-          collection: speedValues,
-          value: [speedValue.toString()],
-          onValueChange: details => setSpeedValue(parseFloat(details.value[0])),
-          positioning: {
-            placement: "top"
-          },
-          children: [/*#__PURE__*/_jsx(SelectLabel, {
-            srOnly: true,
-            children: t("audio.controls.selectSpeed")
-          }), /*#__PURE__*/_jsx(SelectControl, {
-            children: /*#__PURE__*/_jsx(SelectTrigger, {
-              asChild: true,
-              children: /*#__PURE__*/_jsx(SpeedButton, {
-                variant: "tertiary",
-                title: t("audio.controls.selectSpeed"),
-                "aria-label": t("audio.controls.selectSpeed"),
-                children: /*#__PURE__*/_jsx("span", {
-                  children: `${speedValue}x`
-                })
-              })
-            })
-          }), /*#__PURE__*/_jsx(SelectContent, {
-            children: speedValues.items.map(speed => /*#__PURE__*/_jsxs(SelectItem, {
-              item: speed,
-              children: [/*#__PURE__*/_jsxs(SelectItemText, {
-                children: [speed, "x"]
-              }), /*#__PURE__*/_jsx(SelectItemIndicator, {
-                children: /*#__PURE__*/_jsx(CheckLine, {})
-              })]
-            }, speed))
-          })]
-        })
-      }), /*#__PURE__*/_jsxs(PopoverRoot, {
-        positioning: {
-          placement: "top"
-        },
-        children: [/*#__PURE__*/_jsx(PopoverTrigger, {
-          asChild: true,
-          children: /*#__PURE__*/_jsx(VolumeButton, {
-            variant: "tertiary",
-            "aria-label": t("audio.controls.adjustVolume"),
-            children: /*#__PURE__*/_jsx(VolumeUpFill, {})
-          })
-        }), /*#__PURE__*/_jsx(StyledPopoverContent, {
-          children: /*#__PURE__*/_jsxs(SliderRoot, {
-            orientation: "vertical",
-            value: [volumeValue],
-            min: 0,
-            max: 100,
-            defaultValue: [100],
-            step: 1,
-            onValueChange: handleVolumeSliderChange,
-            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, {})
-              })]
-            })]
-          })
-        })]
-      })]
-    })]
-  });
+const speedValues = createListCollection({ items: [
+	"0.5",
+	"0.75",
+	"1",
+	"1.25",
+	"1.5",
+	"1.75",
+	"2"
+] });
+const Controls = ({ src, title }) => {
+	const { t } = useTranslation();
+	const [speedValue, setSpeedValue] = useState(1);
+	const [volumeValue, setVolumeValue] = useState(100);
+	const [currentTime, setCurrentTime] = useState(0);
+	const [remainingTime, setRemainingTime] = useState(0);
+	const [playing, setPlaying] = useState(false);
+	const audioRef = useRef(null);
+	useEffect(() => {
+		if (audioRef.current) audioRef.current.playbackRate = speedValue;
+	}, [speedValue]);
+	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__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("audio", {
+		ref: audioRef,
+		src,
+		title,
+		preload: "metadata"
+	}), /* @__PURE__ */ jsxs(ControlsWrapper, { children: [
+		/* @__PURE__ */ jsx(Back15SecButton, {
+			variant: "tertiary",
+			title: t("audio.controls.rewind15sec"),
+			"aria-label": t("audio.controls.rewind15sec"),
+			onClick: () => onSeekSeconds(-15),
+			children: /* @__PURE__ */ jsx(Replay15Line, {})
+		}),
+		/* @__PURE__ */ jsx(PlayButton, {
+			"aria-label": t(playing ? t("audio.pause") : t("audio.play")),
+			variant: "primary",
+			onClick: togglePlay,
+			children: playing ? /* @__PURE__ */ jsx(PauseLine, {}) : /* @__PURE__ */ jsx(PlayFill, {})
+		}),
+		/* @__PURE__ */ jsx(Forward15SecButton, {
+			variant: "tertiary",
+			title: t("audio.controls.forward15sec"),
+			"aria-label": t("audio.controls.forward15sec"),
+			onClick: () => onSeekSeconds(15),
+			children: /* @__PURE__ */ jsx(Forward15Line, {})
+		}),
+		/* @__PURE__ */ jsxs(ProgressWrapper, { children: [
+			/* @__PURE__ */ jsx(StyledText, {
+				textStyle: "label.medium",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ jsx("div", { children: formatTime(currentTime) })
+			}),
+			/* @__PURE__ */ jsxs(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__ */ jsx(SliderLabel, {
+					srOnly: true,
+					children: t("audio.progressBar")
+				}), /* @__PURE__ */ jsxs(SliderControl, { children: [/* @__PURE__ */ jsx(SliderTrack, { children: /* @__PURE__ */ jsx(SliderRange, {}) }), /* @__PURE__ */ jsx(SliderThumb, {
+					index: 0,
+					children: /* @__PURE__ */ jsx(SliderHiddenInput, {})
+				})] })]
+			}),
+			/* @__PURE__ */ jsx(StyledText, {
+				textStyle: "label.medium",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ jsxs("div", { children: ["-", formatTime(remainingTime)] })
+			})
+		] }),
+		/* @__PURE__ */ jsx(FieldRoot, { children: /* @__PURE__ */ jsxs(StyledSelectRoot, {
+			collection: speedValues,
+			value: [speedValue.toString()],
+			onValueChange: (details) => setSpeedValue(parseFloat(details.value[0])),
+			positioning: { placement: "top" },
+			children: [
+				/* @__PURE__ */ jsx(SelectLabel, {
+					srOnly: true,
+					children: t("audio.controls.selectSpeed")
+				}),
+				/* @__PURE__ */ jsx(SelectControl, { children: /* @__PURE__ */ jsx(SelectTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(SpeedButton, {
+						variant: "tertiary",
+						title: t("audio.controls.selectSpeed"),
+						"aria-label": t("audio.controls.selectSpeed"),
+						children: /* @__PURE__ */ jsx("span", { children: `${speedValue}x` })
+					})
+				}) }),
+				/* @__PURE__ */ jsx(SelectContent, { children: speedValues.items.map((speed) => /* @__PURE__ */ jsxs(SelectItem, {
+					item: speed,
+					children: [/* @__PURE__ */ jsxs(SelectItemText, { children: [speed, "x"] }), /* @__PURE__ */ jsx(SelectItemIndicator, { children: /* @__PURE__ */ jsx(CheckLine, {}) })]
+				}, speed)) })
+			]
+		}) }),
+		/* @__PURE__ */ jsxs(PopoverRoot, {
+			positioning: { placement: "top" },
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(VolumeButton, {
+					variant: "tertiary",
+					"aria-label": t("audio.controls.adjustVolume"),
+					children: /* @__PURE__ */ jsx(VolumeUpFill, {})
+				})
+			}), /* @__PURE__ */ jsx(StyledPopoverContent, { children: /* @__PURE__ */ jsxs(SliderRoot, {
+				orientation: "vertical",
+				value: [volumeValue],
+				min: 0,
+				max: 100,
+				defaultValue: [100],
+				step: 1,
+				onValueChange: handleVolumeSliderChange,
+				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, {})
+				})] })]
+			}) })]
+		})
+	] })] });
 };
-export default Controls;
+var Controls_default = Controls;
+
+//#endregion
+export { Controls_default };
+//# sourceMappingURL=Controls.js.map

package/es/AudioPlayer/Controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.js","names":["seconds: number","currentTime","details: SliderValueChangeDetails"],"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 { useEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\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\";\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\nconst 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 [remainingTime, setRemainingTime] = useState(0);\n  const [playing, setPlaying] = useState(false);\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  useEffect(() => {\n    if (audioRef.current) {\n      audioRef.current.playbackRate = speedValue;\n    }\n  }, [speedValue]);\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        setRemainingTime(Math.round(duration - currentTime));\n      };\n\n      const handleLoadedMetaData = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setRemainingTime(Math.round(duration - currentTime));\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 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      {/* eslint-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={[audioRef.current?.currentTime ?? 0]}\n            defaultValue={[0]}\n            step={1}\n            max={Math.round(audioRef.current?.duration ?? 0)}\n            onValueChange={handleSliderChange}\n            getAriaValueText={(value) =>\n              t(\"audio.valueText\", {\n                start: formatTime(Math.round(value.value)),\n                end: formatTime(Math.round(audioRef.current?.duration ?? 0)),\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(remainingTime)}</div>\n          </StyledText>\n        </ProgressWrapper>\n        <FieldRoot>\n          <StyledSelectRoot\n            collection={speedValues}\n            value={[speedValue.toString()]}\n            onValueChange={(details) => setSpeedValue(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\nexport default Controls;\n"],"mappings":"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"}