@ndla/ui 55.0.12-alpha.0 → 55.0.13-alpha.0

package/src/AudioPlayer/Controls.tsx

@@ -8,188 +8,128 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { Root as PopoverRoot, PopoverContent, PopoverTrigger, PopoverPortal } from "@radix-ui/react-popover";
-import { Root as SliderRoot, Track, Range, SliderThumb } from "@radix-ui/react-slider";
-import { ButtonV2, IconButtonV2 } from "@ndla/button";
-import { breakpoints, colors, fonts, misc, mq, spacing, stackOrder } from "@ndla/core";
-import { DropdownMenu, DropdownContent, DropdownItem, DropdownTrigger } from "@ndla/dropdown-menu";
+import type { SliderValueChangeDetails } from "@ark-ui/react";
 import { Back15, Forward15 } from "@ndla/icons/action";
 import { Play, Pause, VolumeUp } from "@ndla/icons/common";
-
-const ControlsWrapper = styled.div`
-  border: 1px solid ${colors.brand.lighter};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: ${colors.white};
-  font-family: ${fonts.sans};
-  gap: ${spacing.xsmall};
-  padding: ${spacing.small} ${spacing.normal};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    display: grid;
-    padding: ${spacing.small};
-    grid-template-columns: 1fr repeat(5, auto) 1fr;
-    grid-template-areas:
-      "track  track track     track track     track   track"
-      ".      speed backwards play  forwards  volume  .";
-  }
-`;
-
-const PlayButton = styled(IconButtonV2)`
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    grid-area: play;
-  }
-`;
-
-const Forward15SecButton = styled(IconButtonV2)`
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    grid-area: forwards;
-  }
-`;
-const Back15SecButton = styled(IconButtonV2)`
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    grid-area: backwards;
-  }
-`;
-
-const SpeedButton = styled(ButtonV2)`
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    grid-area: speed;
-  }
-`;
-
-const SpeedList = styled(DropdownContent)`
-  border: 1px solid ${colors.brand.lighter};
-  padding: 5px 10px;
-  justify-content: center;
-`;
-
-const SpeedValueButton = styled(ButtonV2)`
-  padding: 0 14px;
-  gap: 0px;
-  color: ${colors.text.light};
-  display: flex;
-  justify-content: center;
-  &:hover,
-  &:active,
-  &:focus,
-  &[data-highlighted] {
-    outline: none;
-    color: ${colors.text.primary};
-  }
-`;
-
-const SpeedSelectedMark = styled.span`
-  align-self: flex-start;
-  border-radius: ${misc.borderRadiusLarge};
-  background: #d1372e;
-  width: 6px;
-  height: 6px;
-  margin: ${spacing.xsmall} 0 0 2px;
-`;
-
-const Time = styled.div`
-  ${fonts.sizes("16px")};
-`;
-
-const ProgressWrapper = styled.div`
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: ${spacing.small};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    grid-area: track;
-  }
-`;
-
-const SliderWrapper = styled(SliderRoot)`
-  cursor: pointer;
-  flex: 1;
-  position: relative;
-  display: flex;
-  align-items: center;
-  user-select: none;
-  touch-action: none;
-`;
-
-const StyledTrack = styled(Track)`
-  height: 4px;
-  width: 100%;
-  background: ${colors.brand.lighter};
-  border-radius: 7px;
-`;
-
-const StyledRange = styled(Range)`
-  position: absolute;
-  height: 4px;
-  background: #5cbc80;
-  border-radius: 7px;
-`;
-
-const StyledThumb = styled(SliderThumb)`
-  display: block;
-  width: 20px;
-  height: 20px;
-  background: #5cbc80;
-  border-radius: ${misc.borderRadiusLarge};
-  outline: none;
-`;
-
-const VolumeWrapper = styled(PopoverRoot)`
-  position: relative;
-  display: flex;
-  justify-content: center;
-`;
-
-const VolumeList = styled(PopoverContent)`
-  box-shadow: 0 14px 20px -5px rgba(32, 88, 143, 0.17);
-  border-radius: 60px;
-  background: ${colors.white};
-  padding: ${spacing.small};
-  border: 1px solid ${colors.brand.lighter};
-  height: 128px;
-  z-index: ${stackOrder.offsetDouble};
-`;
-
-const VolumeSliderWrapper = styled(SliderRoot)`
-  cursor: pointer;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  user-select: none;
-  touch-action: none;
-`;
-
-const VolumeButton = styled(IconButtonV2)`
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    grid-area: volume;
-  }
-`;
-
-const VolumeSliderBackground = styled(Track)`
-  height: 100%;
-  width: 5px;
-  background: ${colors.brand.lighter};
-  border-radius: 7px;
-`;
-
-const VolumeSliderSelected = styled(Range)`
-  position: absolute;
-  width: 5px;
-  background: ${colors.brand.secondary};
-  border-radius: 7px;
-`;
-
-const VolumeSliderHandle = styled(SliderThumb)`
-  display: block;
-  width: 20px;
-  height: 20px;
-  background: ${colors.brand.primary};
-  border-radius: ${misc.borderRadiusLarge};
-`;
+import { Done } from "@ndla/icons/editor";
+import {
+  Button,
+  IconButton,
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger,
+  SelectContent,
+  SelectControl,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectLabel,
+  SelectPositioner,
+  SelectRoot,
+  SelectTrigger,
+  SliderControl,
+  SliderHiddenInput,
+  SliderLabel,
+  SliderRange,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  Text,
+} from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { visuallyHidden } from "@ndla/styled-system/patterns";
+
+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: "xsmall",
+    gridArea: "track",
+    paddingBlock: "xsmall",
+    mobileDown: {
+      paddingInline: "xsmall",
+    },
+  },
+});
+
+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",
+  },
+});
 
 const formatTime = (seconds: number) => {
   const minutes = Math.floor(seconds / 60);
@@ -199,7 +139,7 @@ const formatTime = (seconds: number) => {
   return `${minutes}:${formattedSeconds}`;
 };
 
-const speedValues = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+const speedValues = ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"];
 
 interface Props {
   src: string;
@@ -269,67 +209,38 @@ const Controls = ({ src, title }: Props) => {
     }
   };
 
-  const handleSliderChange = (value: number[]) => {
+  const handleSliderChange = (details: SliderValueChangeDetails) => {
     if (audioRef.current) {
-      audioRef.current.currentTime = value[0];
+      audioRef.current.currentTime = details.value[0];
     }
   };
 
-  const handleVolumeSliderChange = (values: number[]) => {
+  const handleVolumeSliderChange = (details: SliderValueChangeDetails) => {
     if (audioRef.current) {
-      audioRef.current.volume = values[0] / 100;
-      setVolumeValue(values[0]);
+      audioRef.current.volume = details.value[0] / 100;
+      setVolumeValue(details.value[0]);
     }
   };
 
   return (
     <div>
+      {/* TODO: We should tie this up to the textual description somehow */}
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio ref={audioRef} src={src} title={title} preload="metadata" />
       <ControlsWrapper>
-        <PlayButton
-          aria-label={t(playing ? t("audio.pause") : t("audio.play"))}
-          colorTheme="lighter"
-          size="normal"
-          onClick={togglePlay}
-        >
-          {playing ? <Pause /> : <Play />}
-        </PlayButton>
         <Back15SecButton
-          variant="ghost"
-          colorTheme="greyLighter"
+          variant="tertiary"
           title={t("audio.controls.rewind15sec")}
           aria-label={t("audio.controls.rewind15sec")}
           onClick={() => onSeekSeconds(-15)}
         >
           <Back15 />
         </Back15SecButton>
-        <DropdownMenu>
-          <DropdownTrigger>
-            <SpeedButton
-              shape="pill"
-              variant="ghost"
-              size="normal"
-              colorTheme="greyLighter"
-              title={t("audio.controls.selectSpeed")}
-              aria-label={t("audio.controls.selectSpeed")}
-            >
-              {speedValue}x
-            </SpeedButton>
-          </DropdownTrigger>
-          <SpeedList side="top">
-            {speedValues.map((speed) => (
-              <DropdownItem key={speed} onSelect={() => setSpeedValue(speed)}>
-                <SpeedValueButton variant="ghost" colorTheme="greyLighter" size="small">
-                  {speed}x{speed === speedValue && <SpeedSelectedMark />}
-                </SpeedValueButton>
-              </DropdownItem>
-            ))}
-          </SpeedList>
-        </DropdownMenu>
+        <PlayButton aria-label={t(playing ? t("audio.pause") : t("audio.play"))} variant="primary" onClick={togglePlay}>
+          {playing ? <Pause /> : <Play />}
+        </PlayButton>
         <Forward15SecButton
-          colorTheme="greyLighter"
-          variant="ghost"
+          variant="tertiary"
           title={t("audio.controls.forward15sec")}
           aria-label={t("audio.controls.forward15sec")}
           onClick={() => onSeekSeconds(15)}
@@ -337,45 +248,94 @@ const Controls = ({ src, title }: Props) => {
           <Forward15 />
         </Forward15SecButton>
         <ProgressWrapper>
-          <Time>{formatTime(currentTime)}</Time>
-          <SliderWrapper
+          <Text textStyle="label.medium" asChild consumeCss>
+            <div>{formatTime(currentTime)}</div>
+          </Text>
+          <SliderRoot
             value={[audioRef.current?.currentTime ?? 0]}
             defaultValue={[0]}
             step={1}
-            max={audioRef.current?.duration ?? 0}
+            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)),
+              })
+            }
           >
-            <StyledTrack>
-              <StyledRange />
-            </StyledTrack>
-            <StyledThumb />
-          </SliderWrapper>
-          <Time>-{formatTime(remainingTime)}</Time>
+            <SliderControl>
+              <SliderTrack>
+                <SliderRange />
+              </SliderTrack>
+              <SliderThumb index={0}>
+                <SliderHiddenInput />
+              </SliderThumb>
+            </SliderControl>
+          </SliderRoot>
+          <Text textStyle="label.medium" asChild consumeCss>
+            <div>-{formatTime(remainingTime)}</div>
+          </Text>
         </ProgressWrapper>
-        <VolumeWrapper>
+        <StyledSelectRoot
+          items={speedValues}
+          value={[speedValue.toString()]}
+          onValueChange={(details) => setSpeedValue(parseFloat(details.value[0]))}
+          positioning={{ placement: "top" }}
+        >
+          <SelectLabel css={visuallyHidden.raw()}>{t("audio.controls.selectSpeed")}</SelectLabel>
+          <SelectControl>
+            <SelectTrigger asChild>
+              <SpeedButton
+                variant="tertiary"
+                title={t("audio.controls.selectSpeed")}
+                aria-label={t("audio.controls.selectSpeed")}
+              >
+                <span>{`${speedValue}x`}</span>
+              </SpeedButton>
+            </SelectTrigger>
+          </SelectControl>
+          <SelectPositioner>
+            <SelectContent>
+              {speedValues.map((speed) => (
+                <SelectItem key={speed} item={speed}>
+                  <SelectItemText>{speed}x</SelectItemText>
+                  <SelectItemIndicator>
+                    <Done />
+                  </SelectItemIndicator>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </SelectPositioner>
+        </StyledSelectRoot>
+        <PopoverRoot positioning={{ placement: "top" }}>
           <PopoverTrigger asChild>
-            <VolumeButton variant="ghost" colorTheme="greyLighter" aria-label={t("audio.controls.adjustVolume")}>
+            <VolumeButton variant="tertiary" aria-label={t("audio.controls.adjustVolume")}>
               <VolumeUp />
             </VolumeButton>
           </PopoverTrigger>
-          <PopoverPortal>
-            <VolumeList side="top">
-              <VolumeSliderWrapper
-                orientation="vertical"
-                value={[volumeValue]}
-                min={0}
-                defaultValue={[100]}
-                step={1}
-                onValueChange={handleVolumeSliderChange}
-              >
-                <VolumeSliderBackground>
-                  <VolumeSliderSelected />
-                </VolumeSliderBackground>
-                <VolumeSliderHandle />
-              </VolumeSliderWrapper>
-            </VolumeList>
-          </PopoverPortal>
-        </VolumeWrapper>
+          <PopoverContent>
+            <SliderRoot
+              orientation="vertical"
+              value={[volumeValue]}
+              min={0}
+              max={100}
+              defaultValue={[100]}
+              step={1}
+              onValueChange={handleVolumeSliderChange}
+            >
+              <SliderLabel css={visuallyHidden.raw()}>{t("audio.controls.adjustVolume")}</SliderLabel>
+              <StyledSliderControl>
+                <SliderTrack>
+                  <SliderRange />
+                </SliderTrack>
+                <SliderThumb index={0}>
+                  <SliderHiddenInput />
+                </SliderThumb>
+              </StyledSliderControl>
+            </SliderRoot>
+          </PopoverContent>
+        </PopoverRoot>
       </ControlsWrapper>
     </div>
   );

package/src/AudioPlayer/SpeechControl.tsx

@@ -8,9 +8,8 @@
 
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { IconButtonV2 } from "@ndla/button";
 import { VolumeUp } from "@ndla/icons/common";
-import { Tooltip } from "@ndla/tooltip";
+import { TooltipRoot, TooltipTrigger, TooltipContent, IconButton } from "@ndla/primitives";
 
 type Props = {
   src: string;
@@ -36,11 +35,14 @@ const SpeechControl = ({ src, title, type = "audio" }: Props) => {
     <div>
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio ref={audioRef} src={src} title={title} preload="metadata" />
-      <Tooltip tooltip={t(`${type}.play`)}>
-        <IconButtonV2 type="button" onClick={togglePlay} aria-label={t(`${type}.play`)} variant="ghost">
-          <VolumeUp />
-        </IconButtonV2>
-      </Tooltip>
+      <TooltipRoot>
+        <TooltipTrigger asChild>
+          <IconButton variant="tertiary" aria-label={t(`${type}.play`)} onClick={togglePlay}>
+            <VolumeUp />
+          </IconButton>
+        </TooltipTrigger>
+        <TooltipContent>{t(`${type}.play`)}</TooltipContent>
+      </TooltipRoot>
     </div>
   );
 };