@ndla/ui 56.0.155-alpha.0 → 56.0.156-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ndla/ui",
   "type": "module",
-  "version": "56.0.155-alpha.0",
+  "version": "56.0.156-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "exports": {
@@ -39,7 +39,7 @@
     "@ark-ui/react": "^5.25.0",
     "@ndla/core": "^6.0.4-alpha.0",
     "@ndla/icons": "^8.0.71-alpha.0",
-    "@ndla/licenses": "^10.0.2-alpha.0",
+    "@ndla/licenses": "^10.0.3-alpha.0",
     "@ndla/primitives": "^1.0.109-alpha.0",
     "@ndla/safelink": "^7.0.112-alpha.0",
     "@ndla/styled-system": "^0.0.42",
@@ -62,5 +62,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a4a2fbf2afb8cdcb083a3e3a93bbbae3eee718d6"
+  "gitHead": "5a949912b848631d194d74fec102e8fe5657f194"
 }

package/src/Article/Article.tsx

@@ -130,6 +130,7 @@ interface ArticleTitleProps {
   title?: ReactNode;
   introduction?: ReactNode;
   disclaimer?: ReactNode;
+  children?: ReactNode;
 }
 
 export const ArticleTitle = ({
@@ -141,6 +142,7 @@ export const ArticleTitle = ({
   introduction,
   competenceGoals,
   disclaimer,
+  children,
 }: ArticleTitleProps) => {
   return (
     <ArticleHeader>
@@ -164,6 +166,7 @@ export const ArticleTitle = ({
         {competenceGoals}
         {disclaimer}
       </StyledWrapper>
+      {children}
     </ArticleHeader>
   );
 };

package/src/AudioPlayer/Controls.tsx

@@ -163,29 +163,23 @@ export const Controls = ({ src, title }: Props) => {
   const [speedValue, setSpeedValue] = useState(1);
   const [volumeValue, setVolumeValue] = useState(100);
   const [currentTime, setCurrentTime] = useState(0);
-  const [remainingTime, setRemainingTime] = useState(0);
+  const [duration, setDuration] = useState(0);
   const [playing, setPlaying] = useState(false);
   const audioRef = useRef<HTMLAudioElement>(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));
+        setDuration(Math.round(duration));
       };
 
       const handleLoadedMetaData = () => {
         const { currentTime, duration } = audioElement;
         setCurrentTime(Math.round(currentTime));
-        setRemainingTime(Math.round(duration - currentTime));
+        setDuration(Math.round(duration));
       };
 
       const handleTimeEnded = () => {
@@ -215,6 +209,13 @@ export const Controls = ({ src, title }: Props) => {
     }
   };
 
+  const onPlaybackRateChange = (rate: number) => {
+    setSpeedValue(rate);
+    if (audioRef.current) {
+      audioRef.current.playbackRate = rate;
+    }
+  };
+
   const onSeekSeconds = (seconds: number) => {
     if (audioRef.current) {
       audioRef.current.currentTime += seconds;
@@ -265,15 +266,15 @@ export const Controls = ({ src, title }: Props) => {
             <div>{formatTime(currentTime)}</div>
           </StyledText>
           <SliderRoot
-            value={[audioRef.current?.currentTime || 0]}
+            value={[currentTime]}
             defaultValue={[0]}
             step={1}
-            max={Math.round(audioRef.current?.duration || 0)}
+            max={duration}
             onValueChange={handleSliderChange}
             getAriaValueText={(value) =>
               t("audio.valueText", {
                 start: formatTime(Math.round(value.value)),
-                end: formatTime(Math.round(audioRef.current?.duration ?? 0)),
+                end: formatTime(Math.round(duration)),
               })
             }
           >
@@ -288,14 +289,14 @@ export const Controls = ({ src, title }: Props) => {
             </SliderControl>
           </SliderRoot>
           <StyledText textStyle="label.medium" asChild consumeCss>
-            <div>-{formatTime(remainingTime)}</div>
+            <div>-{formatTime(Math.round(duration - currentTime))}</div>
           </StyledText>
         </ProgressWrapper>
         <FieldRoot>
           <StyledSelectRoot
             collection={speedValues}
             value={[speedValue.toString()]}
-            onValueChange={(details) => setSpeedValue(parseFloat(details.value[0]))}
+            onValueChange={(details) => onPlaybackRateChange(parseFloat(details.value[0]))}
             positioning={{ placement: "top" }}
           >
             <SelectLabel srOnly>{t("audio.controls.selectSpeed")}</SelectLabel>

package/src/Embed/ImageEmbed.tsx

@@ -244,6 +244,7 @@ export const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article",
           lang={lang}
           onClick={figureProps?.float ? toggleImageSize : undefined}
           variant="rounded"
+          {...data.image.dimensions}
         />
         {(embedData.align === "right" || embedData.align === "left") && (
           <ExpandButton

package/src/locale/messages-en.ts

@@ -465,6 +465,16 @@ const messages = {
       link: "Link ({{shortcut}})",
     },
   },
+  articleTraits: {
+    VIDEO: "Video",
+    AUDIO: "Audio",
+    H5P: "Interactive content",
+    PODCAST: "Podcast",
+  },
+  relevance: {
+    core: "Core content",
+    supplementary: "Supplementary content",
+  },
 };
 
 export default messages;

package/src/locale/messages-nb.ts

@@ -466,6 +466,16 @@ const messages = {
       link: "Lenke ({{shortcut}})",
     },
   },
+  articleTraits: {
+    VIDEO: "Video",
+    AUDIO: "Lyd",
+    H5P: "Interaktivt innhold",
+    PODCAST: "Podkast",
+  },
+  relevance: {
+    core: "Kjernestoff",
+    supplementary: "Tilleggsstoff",
+  },
 };
 
 export default messages;

package/src/locale/messages-nn.ts

@@ -466,6 +466,16 @@ const messages = {
       link: "Lenke ({{shortcut}})",
     },
   },
+  articleTraits: {
+    VIDEO: "Video",
+    AUDIO: "Lyd",
+    H5P: "Interaktivt innhald",
+    PODCAST: "Podkast",
+  },
+  relevance: {
+    core: "Kjernestoff",
+    supplementary: "Tilleggsstoff",
+  },
 };
 
 export default messages;

package/src/locale/messages-se.ts

@@ -467,6 +467,16 @@ const messages = {
       link: "Lenke ({{shortcut}})",
     },
   },
+  articleTraits: {
+    VIDEO: "Video",
+    AUDIO: "Lyd",
+    H5P: "Interaktivt innhold",
+    PODCAST: "Podkast",
+  },
+  relevance: {
+    core: "Kjernestoff",
+    supplementary: "Tilleggsstoff",
+  },
 };
 
 export default messages;