@ndla/ui 36.0.2 → 37.0.1

package/src/Embed/AudioEmbed.stories.tsx

@@ -11,6 +11,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { AudioEmbedData, AudioMeta } from '@ndla/types-embed';
 import AudioEmbed from './AudioEmbed';
 import { defaultParameters } from '../../../../stories/defaults';
+import StoryFavoriteButton from '../../../../stories/StoryFavoriteButton';
 
 const embedData: AudioEmbedData = {
   resource: 'audio',
@@ -156,9 +157,6 @@ const meta: Meta<typeof AudioEmbed> = {
   title: 'Enkle komponenter/Embeds/AudioEmbed',
   component: AudioEmbed,
   tags: ['autodocs'],
-  args: {
-    articlePath: undefined,
-  },
   decorators: [
     (Story) => (
       <div className="o-wrapper">
@@ -179,6 +177,7 @@ export default meta;
 
 export const AudioEmbedStory: StoryObj<typeof AudioEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'audio',
       status: 'success',
@@ -191,6 +190,7 @@ export const AudioEmbedStory: StoryObj<typeof AudioEmbed> = {
 
 export const AudioEmbedFailed: StoryObj<typeof AudioEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'audio',
       status: 'error',
@@ -202,6 +202,7 @@ export const AudioEmbedFailed: StoryObj<typeof AudioEmbed> = {
 
 export const Podcast: StoryObj<typeof AudioEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'audio',
       status: 'success',
@@ -214,6 +215,7 @@ export const Podcast: StoryObj<typeof AudioEmbed> = {
 
 export const PodcastFailed: StoryObj<typeof AudioEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'audio',
       status: 'error',

package/src/Embed/AudioEmbed.tsx

@@ -6,30 +6,21 @@
  *
  */
 
-import { AudioMetaData } from '@ndla/types-embed';
-import { ICopyright } from '@ndla/types-backend/image-api';
-import {
-  figureApa7CopyString,
-  getGroupedContributorDescriptionList,
-  getLicenseByAbbreviation,
-  getLicenseCredits,
-} from '@ndla/licenses';
-import { ModalV2 } from '@ndla/modal';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { AudioMetaData, ImageMetaData } from '@ndla/types-embed';
 //@ts-ignore
 import { Remarkable } from 'remarkable';
-import { ButtonV2, CopyButton } from '@ndla/button';
-import { SafeLinkButton } from '@ndla/safelink';
 import AudioPlayer from '../AudioPlayer';
-import { Figure, FigureCaption } from '../Figure';
-import { FigureLicenseDialogContent } from '../Figure/FigureLicenseDialogContent';
+import { Figure } from '../Figure';
 import { Author } from './ImageEmbed';
+import { EmbedByline } from '../LicenseByline';
+import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
+import { HeartButtonType } from './types';
 
 interface Props {
   embed: AudioMetaData;
-  articlePath?: string;
+  heartButton?: HeartButtonType;
 }
+
 export const getFirstNonEmptyLicenseCredits = (authors: {
   creators: Author[];
   rightsholders: Author[];
@@ -42,29 +33,25 @@ const renderMarkdown = (text: string) => {
   return <span dangerouslySetInnerHTML={{ __html: rendered }} />;
 };
 
-const AudioEmbed = ({ embed, articlePath }: Props) => {
-  const { t, i18n } = useTranslation();
-  const [isOpen, setIsOpen] = useState(false);
+const imageMetaToMockEmbed = (
+  imageMeta: Extract<AudioMetaData, { status: 'success' }>,
+): Extract<ImageMetaData, { status: 'success' }> => ({
+  resource: 'image',
+  status: 'success',
+  // Make sure the seq is unused. It's rarely used, but it's nice to ensure uniqueness.
+  seq: imageMeta.seq + 0.1,
+  // We check that this exists where the function is used.
+  data: imageMeta.data.imageMeta!,
+  embedData: {
+    resource: 'image',
+    resourceId: imageMeta.data.imageMeta?.id?.toString() || '',
+    alt: imageMeta.data.imageMeta?.alttext.alttext ?? '',
+  },
+});
+
+const AudioEmbed = ({ embed, heartButton: HeartButton }: Props) => {
   if (embed.status === 'error') {
-    return (
-      <Figure>
-        <svg
-          fill="#8A8888"
-          height="50"
-          viewBox="0 0 24 12"
-          width="100%"
-          xmlns="http://www.w3.org/2000/svg"
-          style={{ backgroundColor: '#EFF0F2' }}
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            transform="scale(0.3) translate(28, 8.5)"
-            d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-          />
-        </svg>
-        <figcaption>{t('audio.error.caption')}</figcaption>
-      </Figure>
-    );
+    return <EmbedErrorPlaceholder type={embed.embedData.type === 'standard' ? 'audio' : 'podcast'} />;
   }
 
   const { data, embedData, seq } = embed;
@@ -75,181 +62,47 @@ const AudioEmbed = ({ embed, articlePath }: Props) => {
 
   const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;
 
-  const textVersion = data.manuscript && renderMarkdown(data.manuscript.manuscript);
-  const description = renderMarkdown(data.podcastMeta?.introduction ?? '');
+  const textVersion = data.manuscript?.manuscript.length ? renderMarkdown(data.manuscript.manuscript) : undefined;
 
   const coverPhoto = data.podcastMeta?.coverPhoto;
 
   const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };
 
-  const authors = getLicenseCredits(data.copyright);
-
-  const license = getLicenseByAbbreviation(data.copyright.license.license, i18n.language);
-
-  const contributors = getGroupedContributorDescriptionList(data.copyright, i18n.language).map((item) => ({
-    name: item.description,
-    type: item.label,
-  }));
-
   const figureId = `figure-${seq}-${data.id}`;
 
-  const copyString =
-    data.audioType === 'podcast'
-      ? figureApa7CopyString(
-          data.title.title,
-          undefined,
-          data.audioFile.url,
-          articlePath,
-          data.copyright,
-          data.copyright.license.license,
-          '',
-          (id: string) => t(id),
-          i18n.language,
-        )
-      : undefined;
-  const captionAuthors = getFirstNonEmptyLicenseCredits(authors);
   return (
     <Figure id={figureId} type="full">
       <AudioPlayer
-        description={description}
+        description={data.podcastMeta?.introduction ?? ''}
         img={img}
         src={data.audioFile.url}
         textVersion={textVersion}
         title={data.title.title}
         subtitle={subtitle}
       />
-      <FigureCaption
-        id=""
-        figureId=""
-        modalButton={
-          <ButtonV2 variant="outline" shape="pill" size="small" onClick={() => setIsOpen(true)}>
-            {t('audio.reuse')}
-          </ButtonV2>
-        }
-        licenseRights={license.rights}
-        authors={captionAuthors}
-        locale={i18n.language}
-      />
-      <ModalV2 controlled isOpen={isOpen} onClose={() => setIsOpen(false)} labelledBy="license-dialog-rules-heading">
-        {(close) => (
-          <FigureLicenseDialogContent
-            onClose={close}
-            title={data.title.title}
-            license={license}
-            authors={contributors}
-            origin={data.copyright.origin}
-            locale={i18n.language}
-            type="audio"
-          >
-            {data.copyright.license.license !== 'COPYRIGHT' && (
-              <>
-                {copyString && (
-                  <CopyButton
-                    variant="outline"
-                    copyNode={t('license.hasCopiedTitle')}
-                    onClick={() => navigator.clipboard.writeText(copyString)}
-                  >
-                    {t('license.copyTitle')}
-                  </CopyButton>
-                )}
-                <SafeLinkButton download to={data.audioFile.url} variant="outline">
-                  {t('audio.download')}
-                </SafeLinkButton>
-              </>
-            )}
-          </FigureLicenseDialogContent>
-        )}
-      </ModalV2>
+      <EmbedByline
+        error={false}
+        type={embedData.type === 'standard' ? 'audio' : 'podcast'}
+        topRounded={false}
+        bottomRounded={!data.imageMeta}
+        copyright={embed.data.copyright}
+      >
+        {HeartButton && <HeartButton embed={embed} />}
+      </EmbedByline>
       {data.imageMeta && (
-        <ImageLicense
-          title={data.imageMeta.title.title}
-          imageUrl={data.imageMeta.imageUrl}
+        <EmbedByline
+          error={false}
+          first={false}
+          type="image"
+          topRounded={false}
+          bottomRounded
           copyright={data.imageMeta.copyright}
-          articlePath={articlePath}
-        />
+        >
+          {HeartButton && <HeartButton embed={imageMetaToMockEmbed(embed)} />}
+        </EmbedByline>
       )}
     </Figure>
   );
 };
 
-interface ImageLicenseProps {
-  title: string;
-  imageUrl: string;
-  copyright: ICopyright;
-  articlePath?: string;
-}
-
-const ImageLicense = ({ articlePath, title, imageUrl, copyright }: ImageLicenseProps) => {
-  const { t, i18n } = useTranslation();
-  const [isOpen, setIsOpen] = useState(false);
-  const copyString = figureApa7CopyString(
-    title,
-    undefined,
-    imageUrl,
-    articlePath,
-    copyright,
-    copyright.license.license,
-    undefined,
-    (id: string) => t(id),
-    i18n.language,
-  );
-  const license = getLicenseByAbbreviation(copyright.license.license, i18n.language);
-  const authors = getLicenseCredits(copyright);
-
-  const contributors = getGroupedContributorDescriptionList(copyright, i18n.language).map((item) => ({
-    name: item.description,
-    type: item.label,
-  }));
-
-  const captionAuthors = getFirstNonEmptyLicenseCredits(authors);
-
-  return (
-    <>
-      <FigureCaption
-        figureId=""
-        id=""
-        licenseRights={license.rights}
-        modalButton={
-          <ButtonV2 variant="outline" shape="pill" size="small" onClick={() => setIsOpen(true)}>
-            {t('image.reuse')}
-          </ButtonV2>
-        }
-        authors={captionAuthors}
-        locale={i18n.language}
-      >
-        <ModalV2 controlled isOpen={isOpen} onClose={() => setIsOpen(false)}>
-          {(close) => (
-            <FigureLicenseDialogContent
-              onClose={close}
-              title={title}
-              license={license}
-              authors={contributors}
-              origin={copyright.origin}
-              locale={i18n.language}
-              type="image"
-            >
-              {copyright.license.license !== 'COPYRIGHTED' && (
-                <>
-                  {copyString && (
-                    <CopyButton
-                      variant="outline"
-                      copyNode={t('license.hasCopiedTitle')}
-                      onClick={() => navigator.clipboard.writeText(copyString)}
-                    >
-                      {t('license.copyTitle')}
-                    </CopyButton>
-                  )}
-                  <SafeLinkButton download to={imageUrl} variant="outline">
-                    {t('image.download')}
-                  </SafeLinkButton>
-                </>
-              )}
-            </FigureLicenseDialogContent>
-          )}
-        </ModalV2>
-      </FigureCaption>
-    </>
-  );
-};
-
 export default AudioEmbed;

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -8,9 +8,10 @@
 
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData } from '@ndla/types-embed';
+import { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData, EmbedMetaData } from '@ndla/types-embed';
 import BrightcoveEmbed from './BrightcoveEmbed';
 import { defaultParameters } from '../../../../stories/defaults';
+import StoryFavoriteButton from '../../../../stories/StoryFavoriteButton';
 
 const embedData: BrightcoveEmbedData = {
   resource: 'brightcove',
@@ -179,6 +180,7 @@ export default meta;
 
 export const BrightcoveEmbedStory: StoryObj<typeof BrightcoveEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'brightcove',
       status: 'success',
@@ -191,12 +193,14 @@ export const BrightcoveEmbedStory: StoryObj<typeof BrightcoveEmbed> = {
 
 export const VisuallyInterpreted: StoryObj<typeof BrightcoveEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: visuallyInterpretedEmbedMetaData,
   },
 };
 
 export const BrightcoveFailed: StoryObj<typeof BrightcoveEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'brightcove',
       status: 'error',

package/src/Embed/BrightcoveEmbed.tsx

@@ -10,20 +10,19 @@ import sortBy from 'lodash/sortBy';
 import isNumber from 'lodash/isNumber';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
-import { getGroupedContributorDescriptionList, getLicenseByAbbreviation } from '@ndla/licenses';
 import { useEffect, useRef, useState } from 'react';
-import { ModalV2 } from '@ndla/modal';
-import { SafeLinkButton } from '@ndla/safelink';
 import { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
-import { ButtonV2, CopyButton } from '@ndla/button';
-import { Figure, FigureCaption } from '../Figure';
-import { FigureLicenseDialogContent } from '../Figure/FigureLicenseDialogContent';
-import { getFirstNonEmptyLicenseCredits } from './AudioEmbed';
+import { ButtonV2 } from '@ndla/button';
+import { Figure } from '../Figure';
+import { EmbedByline } from '../LicenseByline';
+import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
+import { HeartButtonType } from './types';
 
 interface Props {
   embed: BrightcoveMetaData;
   isConcept?: boolean;
+  heartButton?: HeartButtonType;
 }
 
 const LinkedVideoButton = styled(ButtonV2)`
@@ -57,12 +56,12 @@ const getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSourc
     width: source?.width ?? '640',
   };
 };
-const BrightcoveEmbed = ({ embed, isConcept }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
+const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton }: Props) => {
   const [showOriginalVideo, setShowOriginalVideo] = useState(true);
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const { embedData } = embed;
+  const fallbackTitle = `${t('embed.type.video')}: ${embedData.videoid}`;
 
   useEffect(() => {
     const iframe = iframeRef.current;
@@ -75,44 +74,27 @@ const BrightcoveEmbed = ({ embed, isConcept }: Props) => {
   }, []);
   if (embed.status === 'error') {
     return (
-      <Figure type={isConcept ? 'full-column' : 'full'} resizeIframe>
+      <EmbedErrorPlaceholder type="video">
         <BrightcoveIframe
           ref={iframeRef}
-          title={`Video: ${embedData.videoid ?? ''}`}
-          aria-label={`Video: ${embedData.videoid ?? ''}`}
+          title={embedData.alt ?? fallbackTitle}
+          aria-label={embedData.alt ?? fallbackTitle}
           frameBorder="0"
           {...getIframeProps(embedData, [])}
           allowFullScreen
         />
-        <figcaption>{t('video.error')}</figcaption>
-      </Figure>
+      </EmbedErrorPlaceholder>
     );
   }
   const { data, seq } = embed;
 
   const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;
 
-  const license = getLicenseByAbbreviation(data.copyright?.license.license ?? '', i18n.language);
-  const contributors = data.copyright
-    ? getGroupedContributorDescriptionList(data.copyright, i18n.language).map((item) => ({
-        name: item.description,
-        type: item.label,
-      }))
-    : [];
-
-  const { rightsholders = [], creators = [], processors = [] } = data.copyright ?? {};
-
-  const download = sortBy(
-    data.sources.filter((src) => src.container === 'MP4' && src.src),
-    (src) => src.size,
-  )?.[0]?.src;
-
   const figureId = `figure-${seq}-${data.id}`;
   const originalVideoProps = getIframeProps(embedData, data.sources);
   const alternativeVideoProps = linkedVideoId
     ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)
     : undefined;
-  const captionAuthors = getFirstNonEmptyLicenseCredits({ rightsholders, creators, processors });
 
   return (
     <Figure id={figureId} type={isConcept ? 'full-column' : 'full'} resizeIframe>
@@ -120,24 +102,20 @@ const BrightcoveEmbed = ({ embed, isConcept }: Props) => {
         <BrightcoveIframe
           ref={iframeRef}
           className="original"
-          title={`Video: ${data.name}`}
-          aria-label={`Video: ${data.name}`}
+          title={embedData.alt ?? data.name ?? fallbackTitle}
+          aria-label={embedData.alt ?? data.name ?? fallbackTitle}
           frameBorder="0"
           {...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps)}
           allowFullScreen
         />
       </div>
-      <FigureCaption
-        figureId={figureId}
-        id={data.id}
-        locale={i18n.language}
-        caption={embedData.caption ?? ''}
-        modalButton={
-          <ButtonV2 variant="outline" shape="pill" size="small" onClick={() => setIsOpen(true)}>
-            {t('video.reuse')}
-          </ButtonV2>
-        }
-        linkedVideoButton={
+      <EmbedByline
+        type="video"
+        copyright={data.copyright!}
+        description={embedData.caption ?? data.description ?? ''}
+        bottomRounded
+      >
+        {!!linkedVideoId && (
           <LinkedVideoButton
             variant="outline"
             shape="pill"
@@ -146,63 +124,11 @@ const BrightcoveEmbed = ({ embed, isConcept }: Props) => {
           >
             {t(`figure.button.${!showOriginalVideo ? 'original' : 'alternative'}`)}
           </LinkedVideoButton>
-        }
-        licenseRights={license.rights}
-        authors={captionAuthors}
-        hasLinkedVideo={!!linkedVideoId}
-      />
-      <ModalV2 controlled isOpen={isOpen} onClose={() => setIsOpen(false)} labelledBy="license-dialog-rules-heading">
-        {(close) => (
-          <FigureLicenseDialogContent
-            onClose={close}
-            title={data.name}
-            locale={i18n.language}
-            license={license}
-            authors={contributors}
-            type="video"
-          >
-            <VideoLicenseButtons
-              download={download}
-              licenseCode={data.copyright?.license.license}
-              src={originalVideoProps.src}
-              width={originalVideoProps.width}
-              height={originalVideoProps.height}
-              name={data.name}
-            />
-          </FigureLicenseDialogContent>
         )}
-      </ModalV2>
+        {HeartButton && <HeartButton embed={embed} />}
+      </EmbedByline>
     </Figure>
   );
 };
 
-interface VideoLicenseButtonsProps {
-  download: string;
-  licenseCode?: string;
-  src: string;
-  width: string | number;
-  height: string | number;
-  name?: string;
-}
-
-const VideoLicenseButtons = ({ download, src, width, height, name, licenseCode }: VideoLicenseButtonsProps) => {
-  const { t } = useTranslation();
-  return (
-    <>
-      {licenseCode !== 'COPYRIGHTED' && (
-        <SafeLinkButton key="download" to={download} variant="outline" download>
-          {t('video.download')}
-        </SafeLinkButton>
-      )}
-      <CopyButton
-        variant="outline"
-        copyNode={t('license.hasCopiedTitle')}
-        onClick={() => navigator.clipboard.writeText(makeIframeString(src, width, height, name))}
-      >
-        {t('license.embed')}
-      </CopyButton>
-    </>
-  );
-};
-
 export default BrightcoveEmbed;

package/src/Embed/ConceptEmbed.stories.tsx

@@ -11,6 +11,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { ConceptData, ConceptEmbedData } from '@ndla/types-embed';
 import ConceptEmbed from './ConceptEmbed';
 import { defaultParameters } from '../../../../stories/defaults';
+import StoryFavoriteButton from '../../../../stories/StoryFavoriteButton';
 
 const blockEmbedData: ConceptEmbedData = {
   contentId: '35',
@@ -145,6 +146,7 @@ export default meta;
 
 export const Block: StoryObj<typeof ConceptEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'concept',
       status: 'success',
@@ -157,6 +159,7 @@ export const Block: StoryObj<typeof ConceptEmbed> = {
 
 export const BlockFailed: StoryObj<typeof ConceptEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'concept',
       status: 'error',
@@ -168,6 +171,7 @@ export const BlockFailed: StoryObj<typeof ConceptEmbed> = {
 
 export const Inline: StoryObj<typeof ConceptEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'concept',
       status: 'success',
@@ -180,6 +184,7 @@ export const Inline: StoryObj<typeof ConceptEmbed> = {
 
 export const InlineFailed: StoryObj<typeof ConceptEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'concept',
       status: 'error',