@learncard/react 2.10.2 → 2.10.4

package/src/components/MeritBadgeDisplayCard/MediaAttachmentsBox.tsx

@@ -0,0 +1,347 @@
+import React, { useEffect, useState } from 'react';
+import prettyBytes from 'pretty-bytes';
+
+import Camera from '../svgs/Camera';
+import LinkIcon from '../svgs/LinkIcon';
+import VideoIcon from '../svgs/VideoIcon';
+import GenericDocumentIcon from '../svgs/GenericDocumentIcon';
+
+import { Attachment, MediaMetadata, VideoMetadata } from '../../types';
+import { getBaseUrl } from '../../helpers/url.helpers';
+import { Lightbox, LightboxItem } from '../Lightbox';
+
+type MediaAttachmentsBoxProps = {
+    attachments: Attachment[];
+    getFileMetadata?: (url: string) => MediaMetadata;
+    getVideoMetadata?: (url: string) => VideoMetadata;
+    onMediaAttachmentClick?: (url: string, type: 'photo' | 'document' | 'video' | 'link') => void;
+    enableLightbox?: boolean;
+};
+
+const defaultGetFileMetadata = async (url: string) => {
+    console.log({ url });
+    const isFilestack = url.includes('filestack');
+    if (!isFilestack) return;
+
+    const urlParams = url.split('.com/')[1]?.split('/');
+    if (!urlParams) return;
+    const handle = urlParams[urlParams.length - 1];
+
+    let fetchFailed = false;
+    const data = await fetch(`https://cdn.filestackcontent.com/${handle}/metadata`)
+        .then(res => res.json())
+        .catch(() => (fetchFailed = true));
+
+    if (fetchFailed) return;
+
+    const fileExtension = data.filename.split('.')[1];
+
+    return {
+        fileExtension,
+        sizeInBytes: data.size,
+        numberOfPages: undefined,
+    };
+};
+
+// Function to determine if the URL is from YouTube
+const isYoutubeUrl = (url: string) => {
+    const youtubeUrl = new URL(url);
+    return youtubeUrl.hostname === 'www.youtube.com';
+};
+
+// Function to get the YouTube video ID from the URL
+const getYoutubeVideoId = (url: string) => {
+    const regex = /(?:\?v=|\.com\/embed\/)([^&]+)/;
+    const match = url.match(regex);
+    return match ? match[1] : '';
+};
+
+// Function to get the cover image URL for YouTube videos
+const getCoverImageUrl = (youtubeWatchUrl: string) => {
+    if (!isYoutubeUrl(youtubeWatchUrl)) {
+        return ''; // Return an empty string if the URL is not a YouTube URL
+    }
+
+    const videoId = getYoutubeVideoId(youtubeWatchUrl);
+    // Construct and return the URL for the video's cover image
+    // This URL fetches the highest resolution image available
+    return videoId ? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg` : '';
+};
+
+const defaultGetVideoMetadata = async (url: string) => {
+    const isYoutube = isYoutubeUrl(url);
+    if (!isYoutube) return;
+
+    const metadataUrl = `http://youtube.com/oembed?url=${url}&format=json`;
+
+    let fetchFailed = false;
+    const metadata = await fetch(metadataUrl)
+        .then(res => res.json())
+        .catch(() => (fetchFailed = true));
+
+    const coverImageUrl = getCoverImageUrl(url);
+
+    if (fetchFailed) return { imageUrl: coverImageUrl };
+
+    return {
+        title: metadata.title,
+        imageUrl: coverImageUrl,
+        videoLength: '', // TODO figure out how to get this
+    };
+};
+
+const MediaAttachmentsBox: React.FC<MediaAttachmentsBoxProps> = ({
+    attachments,
+    getFileMetadata = defaultGetFileMetadata,
+    getVideoMetadata = defaultGetVideoMetadata,
+    onMediaAttachmentClick,
+    enableLightbox = false,
+}) => {
+    const [documentMetadata, setDocumentMetadata] = useState<{
+        [documentUrl: string]: MediaMetadata | undefined;
+    }>({});
+    const [videoMetadata, setVideoMetadata] = useState<{
+        [videoUrl: string]: VideoMetadata | undefined;
+    }>({});
+
+    const mediaAttachments: Attachment[] = [];
+    const documentsAndLinks: Attachment[] = [];
+    attachments.forEach(a => {
+        switch (a.type) {
+            case 'document':
+            case 'link':
+                documentsAndLinks.push(a);
+                break;
+            case 'photo':
+            case 'video':
+                mediaAttachments.push(a);
+                break;
+            default:
+                break;
+        }
+    });
+
+    useEffect(() => {
+        const getMetadata = async (attachments: Attachment[]): Promise<any> => {
+            const docMetadata: { [docUrl: string]: MediaMetadata | undefined } = {};
+            const videoMetadata: { [videoUrl: string]: VideoMetadata | undefined } = {};
+            await Promise.all(
+                attachments.map(async attachment => {
+                    if (attachment.type === 'document') {
+                        docMetadata[attachment.url] = await getFileMetadata(attachment.url);
+                    } else if (attachment.type === 'video') {
+                        videoMetadata[attachment.url] = await getVideoMetadata(attachment.url);
+                    }
+                })
+            );
+
+            setVideoMetadata(videoMetadata);
+            setDocumentMetadata(docMetadata);
+        };
+
+        const videos = attachments.filter(a => a.type === 'video');
+        getMetadata([...documentsAndLinks, ...videos]);
+    }, []);
+
+    const [currentLightboxUrl, setCurrentLightboxUrl] = useState<string | undefined>(undefined);
+    const lightboxItems = mediaAttachments.filter(
+        a => a.type === 'photo' || a.type === 'video'
+    ) as LightboxItem[];
+    const handleMediaAttachmentClick = (
+        url: string,
+        type: 'photo' | 'document' | 'video' | 'link'
+    ) => {
+        if (type === 'photo' || type === 'video') {
+            setCurrentLightboxUrl(url);
+        }
+
+        onMediaAttachmentClick?.(url, type);
+    };
+
+    return (
+        <div className="bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full">
+            <h3 className="text-[17px] text-grayscale-900 font-poppins">Attachments</h3>
+            {mediaAttachments.length > 0 && (
+                <div className="flex gap-[5px] justify-between flex-wrap w-full">
+                    {enableLightbox && (
+                        <Lightbox
+                            items={lightboxItems}
+                            currentUrl={currentLightboxUrl}
+                            setCurrentUrl={setCurrentLightboxUrl}
+                        />
+                    )}
+                    {mediaAttachments.map((media, index) => {
+                        let innerContent: React.ReactNode;
+                        let title = media.title;
+
+                        if (media.type === 'video') {
+                            const metadata = videoMetadata[media.url];
+                            title = (title || metadata?.title) ?? '';
+                            const baseUrl = getBaseUrl(media.url);
+
+                            innerContent = (
+                                <div
+                                    className="bg-cover bg-no-repeat bg-center relative font-poppins text-white text-[12px] font-[400] leading-[17px] flex flex-col justify-end items-start p-[10px] text-left bg-rose-600 rounded-[15px] h-full"
+                                    style={{
+                                        backgroundImage: metadata?.imageUrl
+                                            ? `linear-gradient(180deg, rgba(0, 0, 0, 0) 44.20%, rgba(0, 0, 0, 0.6) 69%), url(${metadata?.imageUrl ?? ''
+                                            })`
+                                            : undefined,
+                                    }}
+                                >
+                                    {!metadata?.imageUrl && (
+                                        <VideoIcon size="60" className="m-auto" />
+                                    )}
+                                    <div className="absolute bottom-[10px] left-[10px] z-10 flex items-center gap-[5px]">
+                                        {metadata?.imageUrl && <VideoIcon />}
+                                        {metadata?.videoLength && (
+                                            <span className="leading-[23px]">
+                                                {metadata.videoLength}
+                                            </span>
+                                        )}
+                                    </div>
+                                </div>
+                            );
+                        } else {
+                            innerContent = (
+                                <div className="h-full w-full flex items-center justify-center">
+                                    <img className="object-cover h-full w-full" src={media.url} />
+                                    <Camera className="absolute bottom-[10px] left-[10px] z-10" />
+                                </div>
+                            );
+                        }
+
+                        const className = `media-attachment ${media.type} w-[49%] pt-[49%] overflow-hidden relative`;
+
+                        if (onMediaAttachmentClick || enableLightbox) {
+                            return (
+                                <div
+                                    key={index}
+                                    className="flex media-attachment-box bg-grayscale-100 items-center rounded-[15px] w-full"
+                                >
+                                    <button
+                                        className="relative h-[80px] w-[80px] rounded-[15px] overflow-hidden flex-shrink-0"
+                                        onClick={e => {
+                                            e.stopPropagation();
+                                            handleMediaAttachmentClick(media.url, media.type);
+                                        }}
+                                    >
+                                        {innerContent}
+                                    </button>
+                                    {title && (
+                                        <div className="text-[12px] text-grayscale-900 font-poppins px-[10px] line-clamp-3">
+                                            {title}
+                                        </div>
+                                    )}
+                                </div>
+                            );
+                        }
+
+                        return (
+                            <div key={index} className={className}>
+                                {innerContent}
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+            {documentsAndLinks.length > 0 && (
+                <div className="w-full flex flex-col gap-[5px]">
+                    {documentsAndLinks.map((docOrLink, index) => {
+                        const metadata =
+                            docOrLink.type === 'document'
+                                ? documentMetadata[docOrLink.url]
+                                : undefined;
+                        const { fileExtension, sizeInBytes, numberOfPages } = metadata ?? {};
+
+                        let baseUrl = '';
+                        if (docOrLink.type === 'link') {
+                            baseUrl = getBaseUrl(docOrLink.url);
+                        }
+
+                        const innerContent = (
+                            <div className="flex flex-col gap-[5px]">
+                                <div className="flex gap-[5px] items-center">
+                                    {docOrLink.type === 'document' && (
+                                        <GenericDocumentIcon className="shrink-0" />
+                                    )}
+                                    {docOrLink.type === 'link' && <LinkIcon className="shrink-0" />}
+
+                                    <div className="flex flex-col">
+                                        <span className="text-grayscale-900 font-[400]">
+                                            {docOrLink.title ?? 'No title'}
+                                        </span>
+                                        {docOrLink.type === 'document' && metadata && (
+                                            <a
+                                                href={docOrLink.url}
+                                                target="_blank"
+                                                rel="noreferrer"
+                                                className="text-grayscale-700 font-[500] text-[12px] font-poppins hover:underline"
+                                                onClick={e => e.stopPropagation()}
+                                            >
+                                                {fileExtension && (
+                                                    <span className="uppercase">
+                                                        {fileExtension}
+                                                    </span>
+                                                )}
+                                                {fileExtension &&
+                                                    (numberOfPages || sizeInBytes) &&
+                                                    ' • '}
+                                                {numberOfPages && (
+                                                    <span>
+                                                        {numberOfPages} page
+                                                        {numberOfPages === 1 ? '' : 's'}
+                                                    </span>
+                                                )}
+                                                {numberOfPages && sizeInBytes && ' • '}
+                                                {sizeInBytes && (
+                                                    <span>{prettyBytes(sizeInBytes)}</span>
+                                                )}
+                                            </a>
+                                        )}
+                                        {docOrLink.type === 'link' && (
+                                            <a
+                                                href={docOrLink.url}
+                                                target="_blank"
+                                                rel="noreferrer"
+                                                className="text-indigo-500 font-[500] text-[12px] font-poppins hover:underline"
+                                                onClick={e => e.stopPropagation()}
+                                            >
+                                                {baseUrl}
+                                            </a>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        );
+
+                        const className = `row-attachment ${docOrLink.type} bg-grayscale-100 rounded-[15px] p-[10px] w-full font-poppins text-[12px] leading-[18px] tracking-[-0.33px] text-left`;
+
+                        if (onMediaAttachmentClick) {
+                            return (
+                                <button
+                                    key={index}
+                                    className={className}
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        handleMediaAttachmentClick(docOrLink.url, docOrLink.type);
+                                    }}
+                                >
+                                    {innerContent}
+                                </button>
+                            );
+                        }
+
+                        return (
+                            <div key={index} className={className}>
+                                {innerContent}
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default MediaAttachmentsBox;

package/src/components/MeritBadgeDisplayCard/MeritBadgeBackFace.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { getCategoryDarkColor, getInfoFromCredential } from '../../helpers/credential.helpers';
+import { VC, VerificationItem } from '@learncard/types';
+import {
+    BoostAchievementCredential,
+    LCCategoryEnum,
+    MediaMetadata,
+    VideoMetadata,
+} from '../../types';
+import VerificationsBox from './VerificationsBox';
+import AlignmentsBox from './AlignmentsBox';
+import TruncateTextBox from './TruncateTextBox';
+import MediaAttachmentsBox from './MediaAttachmentsBox';
+import SkillsBox from '../VCDisplayCard2/SkillsBox';
+import LeftArrow from '../svgs/LeftArrow';
+
+type MeritBadgeBackFaceProps = {
+    isFront?: boolean;
+    credential: VC | BoostAchievementCredential;
+    categoryType?: LCCategoryEnum;
+    verificationItems: VerificationItem[];
+    customSkillsComponent?: React.ReactNode;
+
+    getFileMetadata?: (url: string) => MediaMetadata;
+    getVideoMetadata?: (url: string) => VideoMetadata;
+    onMediaAttachmentClick?: (url: string, type: 'photo' | 'document' | 'video' | 'link') => void;
+    enableLightbox?: boolean;
+    showBackButton?: boolean;
+    handleViewFrontFace?: () => void;
+    customLinkedCredentialsComponent?: React.ReactNode;
+};
+
+export const MeritBadgeBackFace: React.FC<MeritBadgeBackFaceProps> = ({
+    credential,
+    categoryType,
+    verificationItems,
+    customSkillsComponent,
+
+    getFileMetadata,
+    getVideoMetadata,
+    onMediaAttachmentClick,
+    enableLightbox,
+    showBackButton,
+    handleViewFrontFace,
+    customLinkedCredentialsComponent,
+}) => {
+    const { createdAt, credentialSubject } = getInfoFromCredential(credential, 'MMM dd, yyyy', {
+        uppercaseDate: false,
+    });
+
+    const { description } = credentialSubject?.achievement ?? {};
+    const criteria = credentialSubject?.achievement?.criteria?.narrative;
+    const alignment = credentialSubject?.achievement?.alignment;
+
+    const credentialDarkColor = getCategoryDarkColor(categoryType);
+
+    let bgColor = `bg-${credentialDarkColor}`;
+
+    if (categoryType === LCCategoryEnum.accommodations) {
+        bgColor = 'bg-amber-700';
+    } else if (categoryType === LCCategoryEnum.accomplishments) {
+        bgColor = 'bg-lime-700';
+    }
+
+    return (
+        <div
+            role="button"
+            onClick={() => handleViewFrontFace?.()}
+            className={`flex flex-col gap-[15px] items-center border-[5px] border-solid border-grayscale-200 py-[30px] px-[20px] rounded-[25px] max-w-[400px] ${bgColor}`}
+        >
+            {showBackButton ? (
+                <div className="w-full">
+                    <button
+                        className="vc-card-back-button rounded-full h-[50px] px-[15px] flex items-center justify-center gap-[5px] z-50 text-[30px] text-white select-none"
+                        onClick={() => handleViewFrontFace?.()}
+                    >
+                        <LeftArrow className="text-white" size="25" />
+                        Details
+                    </button>
+                </div>
+            ) : (
+                <h1 className="text-white text-center text-[22px] font-jacques">Details</h1>
+            )}
+
+            <TruncateTextBox headerText="About" text={description}>
+                <span
+                    className={`text-grayscale-600 font-poppins text-[12px] font-[600] w-full ${
+                        description
+                            ? 'pt-[10px] border-t-[1px] border-solid border-grayscale-200'
+                            : ''
+                    }`}
+                >
+                    Awarded on {createdAt}
+                </span>
+            </TruncateTextBox>
+
+            {criteria && <TruncateTextBox headerText="Criteria" text={criteria} />}
+
+            {customLinkedCredentialsComponent && customLinkedCredentialsComponent}
+
+            {(credential.skills?.length ?? 0) > 0 &&
+                (customSkillsComponent ? (
+                    customSkillsComponent
+                ) : (
+                    <SkillsBox skills={credential.skills ?? []} />
+                ))}
+
+            {credential.attachments && credential.attachments.length > 0 && (
+                <MediaAttachmentsBox
+                    attachments={credential.attachments}
+                    getFileMetadata={getFileMetadata}
+                    getVideoMetadata={getVideoMetadata}
+                    onMediaAttachmentClick={onMediaAttachmentClick}
+                    enableLightbox={enableLightbox}
+                />
+            )}
+
+            {alignment && <AlignmentsBox alignment={alignment} style="MeritBadge" />}
+
+            {verificationItems && verificationItems.length > 0 && (
+                <VerificationsBox verificationItems={verificationItems} />
+            )}
+
+            {/* so that tailwind will put these colors in the css */}
+            <span className="hidden bg-amber-700 bg-spice-700 bg-rose-700 bg-yellow-700 bg-teal-700"></span>
+        </div>
+    );
+};
+
+export default MeritBadgeBackFace;

package/src/components/MeritBadgeDisplayCard/MeritBadgeCornerIcon.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import RoundedCorner from '../svgs/RoundedCorner';
+import { getCategoryIcon, getCategoryLightColor } from '../../helpers/credential.helpers';
+import { LCCategoryEnum } from '../../types';
+
+type MeritBadgeCornerIconProps = {
+    categoryType: LCCategoryEnum;
+    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+};
+
+const MeritBadgeCornerIcon: React.FC<MeritBadgeCornerIconProps> = ({ categoryType, position }) => {
+    const credentialPrimaryColor = getCategoryLightColor(categoryType);
+    const credentialIcon = getCategoryIcon(categoryType, '25');
+
+    let iconPositionClassName, cornerPositionClassName;
+    switch (position) {
+        case 'top-left':
+            iconPositionClassName = 'top-[3px] left-[3px] pb-[10px] pr-[10px] pl-[4px] pt-[4px]';
+            cornerPositionClassName = 'bottom-[-1px] right-0';
+            break;
+        case 'top-right':
+            iconPositionClassName = 'top-[3px] right-[3px] pl-[10px] pb-[10px] pr-[4px] pt-[4px]';
+            cornerPositionClassName = 'bottom-[-1px] left-0 rotate-90';
+            break;
+        case 'bottom-left':
+            iconPositionClassName = 'bottom-[3px] left-[3px] pr-[10px] pt-[10px] pl-[4px] pb-[4px]';
+            cornerPositionClassName = 'top-0 right-0 rotate-[270deg]';
+            break;
+        case 'bottom-right':
+            iconPositionClassName =
+                'bottom-[3px] right-[3px] pl-[10px] pt-[10px] pr-[4px] pb-[4px]';
+            cornerPositionClassName = 'top-[-1px] left-0 rotate-180';
+            break;
+    }
+
+    return (
+        <div
+            className={`text-${credentialPrimaryColor} rounded-full bg-white absolute ${iconPositionClassName}`}
+        >
+            {credentialIcon}
+            <RoundedCorner className={`absolute ${cornerPositionClassName}`} />
+        </div>
+    );
+};
+
+export default MeritBadgeCornerIcon;