@ndla/ui 34.6.2 → 34.6.4

package/src/Embed/BrightcoveEmbed.tsx

@@ -0,0 +1,203 @@
+/**
+ * Copyright (c) 2023-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 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';
+
+interface Props {
+  embed: BrightcoveMetaData;
+  isConcept?: boolean;
+}
+
+const LinkedVideoButton = styled(ButtonV2)`
+  margin-left: ${spacing.small};
+`;
+
+const BrightcoveIframe = styled.iframe`
+  height: auto;
+`;
+
+export const makeIframeString = (url: string, width: string | number, height: string | number, title: string = '') => {
+  const strippedWidth = isNumber(width) ? width : width.replace(/\s*px/, '');
+  const strippedHeight = isNumber(height) ? height : height.replace(/\s*px/, '');
+  const urlOrTitle = title || url;
+  return `<iframe title="${urlOrTitle}" aria-label="${urlOrTitle}" src="${url}" width="${strippedWidth}" height="${strippedHeight}" allowfullscreen scrolling="no" frameborder="0" loading="lazy"></iframe>`;
+};
+
+export const isNumeric = (value: any) => !Number.isNaN(value - parseFloat(value));
+
+const getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSource[]) => {
+  const { account, videoid, player = 'default' } = data;
+
+  const source = sortBy(
+    sources.filter((s) => s.width && s.height),
+    (s) => s.height,
+  )[0];
+
+  return {
+    src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,
+    height: source?.height ?? '480',
+    width: source?.width ?? '640',
+  };
+};
+const BrightcoveEmbed = ({ embed, isConcept }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showOriginalVideo, setShowOriginalVideo] = useState(true);
+  const { t, i18n } = useTranslation();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const { embedData } = embed;
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (iframe) {
+      const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
+      iframe.style.aspectRatio = `${width}/${height}`;
+    }
+  }, []);
+  if (embed.status === 'error') {
+    return (
+      <Figure type={isConcept ? 'full-column' : 'full'} resizeIframe>
+        <BrightcoveIframe
+          ref={iframeRef}
+          title={`Video: ${embedData.videoid ?? ''}`}
+          aria-label={`Video: ${embedData.videoid ?? ''}`}
+          frameBorder="0"
+          {...getIframeProps(embedData, [])}
+          allowFullScreen
+        />
+        <figcaption>{t('video.error')}</figcaption>
+      </Figure>
+    );
+  }
+  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>
+      <div className="brightcove-video">
+        <BrightcoveIframe
+          ref={iframeRef}
+          className="original"
+          title={`Video: ${data.name}`}
+          aria-label={`Video: ${data.name}`}
+          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={
+          <LinkedVideoButton
+            variant="outline"
+            shape="pill"
+            size="small"
+            onClick={() => setShowOriginalVideo((p) => !p)}>
+            {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>
+    </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.tsx

@@ -0,0 +1,403 @@
+/**
+ * Copyright (c) 2023-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 { useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { isMobile } from 'react-device-detect';
+import { Root, Trigger, Content, Anchor, Close, Portal } from '@radix-ui/react-popover';
+import { ButtonV2, IconButtonV2 } from '@ndla/button';
+import { Cross } from '@ndla/icons/action';
+import { breakpoints, colors, mq, spacing } from '@ndla/core';
+import { getGroupedContributorDescriptionList, getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
+import { ModalV2 } from '@ndla/modal';
+import { ConceptMetaData } from '@ndla/types-embed';
+import Tooltip from '@ndla/tooltip';
+import { Notion as UINotion } from '../Notion';
+import { Figure, FigureCaption } from '../Figure';
+import { FigureLicenseDialogContent } from '../Figure/FigureLicenseDialogContent';
+import { NotionImage } from '../Notion/NotionImage';
+import { ConceptNotionV2, ConceptNotionData } from './conceptComponents';
+
+const BottomBorder = styled.div`
+  margin-top: ${spacing.normal};
+  border-bottom: 1px solid ${colors.brand.greyLight};
+`;
+
+interface PopoverPosition {
+  top?: number;
+}
+
+const PopoverWrapper = styled.div<PopoverPosition>`
+  div[data-radix-popper-content-wrapper] {
+    position: absolute !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+    top: ${({ top }) => top}px !important;
+  }
+
+  ${mq.range({ until: breakpoints.tablet })} {
+    div[data-radix-popper-content-wrapper] {
+      // Fix for popover positioning on mobile.
+      // If we modify all popovers we break license icons.
+      // https://github.com/radix-ui/primitives/issues/1839
+      position: fixed !important;
+      transform: none !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 100vw;
+      z-index: 9999 !important;
+      height: 100vh;
+      min-width: 100vw !important;
+    }
+  }
+`;
+
+const ImageWrapper = styled.div`
+  float: right;
+  padding-left: ${spacing.normal};
+  position: relative;
+
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    width: 100%;
+    padding-left: 0;
+  }
+`;
+
+interface Props {
+  embed: ConceptMetaData;
+  fullWidth?: boolean;
+}
+
+const StyledButton = styled.button`
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-style: inherit;
+  line-height: 1em;
+  padding: 0 0 4px 0;
+  margin-bottom: -4px;
+  text-decoration: none;
+  color: #000;
+  position: relative;
+  cursor: pointer;
+  &:focus,
+  &:hover {
+    color: ${colors.brand.primary};
+    outline: none;
+  }
+`;
+
+export const ConceptEmbed = ({ embed, fullWidth }: Props) => {
+  if (embed.status === 'error') {
+    return <span>{embed.embedData.linkText}</span>;
+  }
+
+  const {
+    data: { concept, visualElement },
+  } = embed;
+
+  if (embed.embedData.type === 'block') {
+    return (
+      <BlockConcept
+        fullWidth={fullWidth}
+        title={concept.title.title}
+        content={concept.content?.content}
+        metaImage={concept.metaImage}
+        copyright={concept.copyright}
+        source={concept.source}
+        visualElement={visualElement}
+      />
+    );
+  } else if (embed.embedData.type === 'inline') {
+    return (
+      <InlineConcept
+        title={concept.title.title}
+        content={concept.content?.content}
+        metaImage={concept.metaImage}
+        copyright={concept.copyright}
+        source={concept.source}
+        visualElement={visualElement}
+        linkText={embed.embedData.linkText}
+      />
+    );
+  } else {
+    return (
+      <ConceptNotionV2
+        title={concept.title.title}
+        content={concept.content?.content}
+        metaImage={concept.metaImage}
+        copyright={concept.copyright}
+        source={concept.source}
+        visualElement={visualElement}
+      />
+    );
+  }
+};
+
+interface InlineConceptProps extends ConceptNotionData {
+  linkText: string;
+}
+
+const BaselineIcon = styled.span`
+  display: block;
+  border-bottom: 5px double currentColor;
+`;
+
+const NotionButton = styled.button`
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-style: inherit;
+  line-height: 1em;
+  padding: 0 0 4px 0;
+  margin-bottom: -4px;
+  text-decoration: none;
+  position: relative;
+  text-align: left;
+  display: inline;
+  color: ${colors.notion.dark};
+  cursor: pointer;
+  &:focus,
+  &:hover {
+    background-color: ${colors.notion.dark};
+    color: ${colors.white};
+    outline: none;
+    ${BaselineIcon} {
+      border-color: transparent;
+    }
+  }
+
+  &:active {
+    color: ${colors.notion.dark};
+    background-color: ${colors.notion.light};
+    ${BaselineIcon} {
+      border-color: currentColor;
+    }
+  }
+`;
+
+const StyledAnchor = styled(Anchor)`
+  ${mq.range({ until: breakpoints.tablet })} {
+    position: fixed;
+    top: 0;
+  }
+`;
+
+const StyledAnchorSpan = styled.span`
+  position: absolute;
+  left: 50%;
+  align-self: center;
+`;
+
+const getModalPosition = (anchor: HTMLElement) => {
+  const article = anchor.closest('.c-article');
+  const articlePos = article?.getBoundingClientRect();
+  const anchorPos = anchor.getBoundingClientRect();
+  return anchorPos.top - (articlePos?.top || -window.scrollY);
+};
+
+const InlineConcept = ({ title, content, copyright, source, visualElement, linkText }: InlineConceptProps) => {
+  const { t } = useTranslation();
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const [modalPos, setModalPos] = useState(-9999);
+
+  const onOpenChange = useCallback((open: boolean) => {
+    if (open) {
+      const anchor = anchorRef.current;
+      if (anchor) {
+        const top = getModalPosition(anchor);
+        setModalPos(top);
+      }
+    } else {
+      setModalPos(-9999);
+    }
+  }, []);
+
+  return (
+    <Root modal={isMobile} onOpenChange={onOpenChange}>
+      <StyledAnchor ref={anchorRef} asChild>
+        <StyledAnchorSpan />
+      </StyledAnchor>
+      <Trigger asChild>
+        <NotionButton>
+          {linkText}
+          {<BaselineIcon />}
+        </NotionButton>
+      </Trigger>
+      <Portal container={(anchorRef.current?.closest('.c-article') as HTMLElement | null) || undefined}>
+        <PopoverWrapper top={modalPos}>
+          <Content avoidCollisions={false} side="bottom" asChild>
+            <ConceptNotionV2
+              title={title}
+              content={content}
+              copyright={copyright}
+              source={source}
+              visualElement={visualElement}
+              inPopover
+              closeButton={
+                <Close asChild>
+                  <IconButtonV2 aria-label={t('close')} variant="ghost">
+                    <Cross />
+                  </IconButtonV2>
+                </Close>
+              }
+            />
+          </Content>
+        </PopoverWrapper>
+      </Portal>
+    </Root>
+  );
+};
+
+interface ConceptProps extends ConceptNotionData {
+  fullWidth?: boolean;
+}
+
+export const BlockConcept = ({
+  title,
+  content,
+  metaImage,
+  copyright,
+  source,
+  visualElement,
+  fullWidth,
+}: ConceptProps) => {
+  const { t, i18n } = useTranslation();
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const [modalPos, setModalPos] = useState(-9999);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const licenseCredits = getLicenseCredits(copyright);
+  const { creators, rightsholders, processors } = licenseCredits;
+  const authors = creators.length || rightsholders.length ? creators.concat(rightsholders) : processors;
+  const visualElementType =
+    visualElement?.embedData.resource === 'brightcove' ? 'video' : visualElement?.embedData.resource;
+
+  const groupedAuthors = getGroupedContributorDescriptionList(licenseCredits, i18n.language).map((item) => ({
+    name: item.description,
+    type: item.label,
+  }));
+  const license = copyright?.license && getLicenseByAbbreviation(copyright?.license?.license, i18n.language);
+
+  const onOpenChange = useCallback((open: boolean) => {
+    if (open) {
+      const anchor = anchorRef.current;
+      if (anchor) {
+        const top = getModalPosition(anchor);
+        setModalPos(top);
+      }
+    } else {
+      setModalPos(-9999);
+    }
+  }, []);
+
+  return (
+    <Root modal={isMobile} onOpenChange={onOpenChange}>
+      <StyledAnchor ref={anchorRef} />
+      <Figure resizeIframe type={fullWidth ? 'full' : 'full-column'}>
+        <UINotion
+          id=""
+          title={title}
+          text={content}
+          visualElement={
+            visualElement?.status === 'success' && (
+              <>
+                <ImageWrapper>
+                  <Tooltip tooltip={t('searchPage.resultType.showNotion')}>
+                    <Trigger asChild>
+                      <StyledButton type="button" aria-label={t('concept.showDescription', { title: title })}>
+                        {visualElement.resource === 'image' ? (
+                          <NotionImage
+                            type={visualElementType}
+                            id={''}
+                            src={visualElement.data.imageUrl}
+                            alt={visualElement.data.alttext.alttext}
+                          />
+                        ) : metaImage ? (
+                          <NotionImage
+                            type={visualElementType}
+                            id={''}
+                            src={metaImage?.url ?? ''}
+                            alt={metaImage?.alt ?? ''}
+                          />
+                        ) : undefined}
+                      </StyledButton>
+                    </Trigger>
+                  </Tooltip>
+                </ImageWrapper>
+                <Portal
+                  container={
+                    typeof document !== 'undefined'
+                      ? (document.querySelector('.c-article') as HTMLElement | null) || undefined
+                      : undefined
+                  }>
+                  <PopoverWrapper top={modalPos}>
+                    <Content avoidCollisions={false} asChild side="bottom">
+                      <ConceptNotionV2
+                        title={title}
+                        content={content}
+                        copyright={copyright}
+                        source={source}
+                        visualElement={visualElement}
+                        inPopover
+                        closeButton={
+                          <Close asChild>
+                            <IconButtonV2 aria-label={t('close')} variant="ghost">
+                              <Cross />
+                            </IconButtonV2>
+                          </Close>
+                        }
+                      />
+                    </Content>
+                  </PopoverWrapper>
+                </Portal>
+              </>
+            )
+          }
+        />
+        {copyright?.license && license ? (
+          <FigureCaption
+            figureId=""
+            id=""
+            authors={authors}
+            licenseRights={license.rights}
+            locale={i18n.language}
+            hideIconsAndAuthors
+            modalButton={
+              <ButtonV2 variant="outline" size="small" shape="pill" onClick={() => setIsOpen(true)}>
+                {t('concept.reuse')}
+              </ButtonV2>
+            }>
+            <ModalV2
+              controlled
+              isOpen={isOpen}
+              onClose={() => setIsOpen(false)}
+              labelledBy="license-dialog-rules-heading">
+              {(close) => (
+                <FigureLicenseDialogContent
+                  authors={groupedAuthors}
+                  locale={i18n.language}
+                  title={title}
+                  origin={copyright.origin}
+                  license={license}
+                  onClose={close}
+                  type="concept"
+                />
+              )}
+            </ModalV2>
+          </FigureCaption>
+        ) : (
+          <BottomBorder />
+        )}
+      </Figure>
+    </Root>
+  );
+};
+
+export default ConceptEmbed;

package/src/Embed/ConceptListEmbed.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-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 { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { colors } from '@ndla/core';
+import { ConceptListMetaData } from '@ndla/types-embed';
+import { Figure } from '../Figure';
+import { BlockConcept } from './ConceptEmbed';
+
+interface Props {
+  embed: ConceptListMetaData;
+}
+
+const ConceptList = styled.div`
+  & > figure:first-of-type {
+    margin-top: 32px;
+  }
+  & li {
+    display: block;
+  }
+`;
+
+const StyledSpan = styled.span`
+  color: ${colors.support.red};
+`;
+
+const ConceptListEmbed = ({ embed }: Props) => {
+  const { t } = useTranslation();
+  if (embed.status === 'error') {
+    return <StyledSpan>{t('embed.conceptListError')}</StyledSpan>;
+  }
+  const { embedData, data } = embed;
+  return (
+    <div>
+      <Figure type="full" resizeIframe>
+        {embedData.title && <h2>{embedData.title}</h2>}
+        <ConceptList>
+          <ul>
+            {data.concepts.map(({ concept, visualElement }) => (
+              <li key={concept.id}>
+                <BlockConcept
+                  title={concept.title.title}
+                  content={concept.content.content}
+                  metaImage={concept.metaImage}
+                  copyright={concept.copyright}
+                  source={concept.source}
+                  visualElement={visualElement}
+                />
+              </li>
+            ))}
+          </ul>
+        </ConceptList>
+      </Figure>
+    </div>
+  );
+};
+
+export default ConceptListEmbed;

package/src/Embed/ContentLinkEmbed.tsx

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-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 { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { colors } from '@ndla/core';
+import { ContentLinkMetaData } from '@ndla/types-embed';
+interface Props {
+  embed: ContentLinkMetaData;
+  isOembed?: boolean;
+}
+
+const StyledSpan = styled.span`
+  color: ${colors.support.red};
+`;
+
+const ContentLinkEmbed = ({ embed, isOembed }: Props) => {
+  const { t } = useTranslation();
+  if (embed.status === 'error') {
+    return <StyledSpan>{`${t('embed.linkError')}: ${embed.embedData.linkText}`}</StyledSpan>;
+  }
+
+  const { embedData, data } = embed;
+
+  if (embedData.openIn === 'new-context' || isOembed) {
+    return (
+      <a href={embed.data.path} target="_blank" rel="noopener noreferrer">
+        {embedData.linkText}
+      </a>
+    );
+  }
+
+  return <a href={data.path}>{embedData.linkText}</a>;
+};
+
+export default ContentLinkEmbed;