{
"version": 3,
"sources": ["../../card/condensed_thumbnail.tsx"],
"sourcesContent": ["import * as React from \"react\"\nimport {BlobUID, is_BlobUID, MediaTranscodeStatus} from \"@cling/lib.shared.model\"\nimport {media_info_resource} from \"@cling/lib.web.resources\"\n\nimport {classNames} from \"@cling/lib.web.utils\"\nimport {observer} from \"mobx-react\"\nimport {LoadingIndicator} from \"@cling/lib.web.lazy_load/loading_indicator\"\nimport {is_provisional_thumbnail_url, thumbnail_url} from \"@cling/lib.web.resources/thumbnails\"\n\nexport const CondensedThumbnailLoading = ({\n className,\n image_style,\n playable_media,\n onClick,\n}: {\n className?: string\n image_style?: React.CSSProperties\n playable_media: boolean\n onClick?: React.MouseEventHandler\n}) => (\n <div\n className={classNames(\"condensed-thumbnail condensed-thumbnail__loading\", className, {\n \"card-with-icon__play\": playable_media,\n })}\n style={image_style}\n onClick={onClick}\n data-test-id=\"CondensedThumbnail_loading\"\n data-test-thumbnail-state=\"waiting\"\n >\n <LoadingIndicator delay={2000} />\n </div>\n)\n\nexport const CondensedThumbnailNoImage = ({\n className,\n image_style,\n playable_media,\n onClick,\n}: {\n className?: string\n image_style?: React.CSSProperties\n playable_media: boolean\n onClick?: React.MouseEventHandler\n}) => (\n <div\n className={classNames(\"condensed-thumbnail\", className, {\n \"condensed-thumbnail__no-image\": !playable_media && !image_style,\n \"card-with-icon__play\": playable_media,\n })}\n style={image_style}\n onClick={onClick}\n data-test-id=\"CondensedThumbnail_fallback\"\n />\n)\n\nexport const CondensedThumbnail = observer(\n ({\n blob_uid_or_style,\n className,\n playable_media,\n background_color,\n onClick,\n }: {\n blob_uid_or_style: BlobUID | React.CSSProperties\n className?: string\n playable_media?: boolean\n background_color?: string\n onClick?: React.MouseEventHandler<HTMLElement>\n }) => {\n const blob_uid = is_BlobUID(blob_uid_or_style) ? blob_uid_or_style : undefined\n const image_style = is_BlobUID(blob_uid_or_style) ? undefined : blob_uid_or_style\n let aspect_ratio: number\n let attributes: any\n let is_provisional_thumbnail = false\n if (blob_uid) {\n const url = thumbnail_url({blob_uid, width: 128, height: 128})\n const media_info = blob_uid ? media_info_resource.read(blob_uid) : undefined\n if (!media_info || media_info.transcode_status === MediaTranscodeStatus.in_progress) {\n return (\n <CondensedThumbnailLoading\n playable_media={!!playable_media}\n className={className}\n image_style={image_style}\n onClick={playable_media ? onClick : undefined}\n />\n )\n }\n if (media_info.invalid) {\n return (\n <CondensedThumbnailNoImage\n playable_media={!!playable_media}\n className={className}\n image_style={image_style}\n onClick={playable_media ? onClick : undefined}\n />\n )\n }\n is_provisional_thumbnail = is_provisional_thumbnail_url(url)\n const {width: image_width, height: image_height} = media_info\n aspect_ratio = image_height / image_width\n attributes = {\n \"data-blob-uid\": blob_uid /* See card/lightbox.tsx */,\n style: {backgroundImage: `url(${url})`},\n }\n } else {\n aspect_ratio = 1\n attributes = {\n style: image_style,\n }\n }\n if (background_color) {\n attributes.style.backgroundColor = background_color\n }\n return (\n <div\n className={classNames(\"condensed-thumbnail\", className, {\n // Very wide/narrow images should be displayed completely.\n \"condensed-thumbnail--contain\": aspect_ratio < 0.25 || aspect_ratio > 4,\n })}\n data-test-thumbnail-state={is_provisional_thumbnail ? \"waiting\" : \"\"}\n onClick={onClick}\n data-test-id=\"CondensedThumbnail\"\n {...attributes}\n >\n {playable_media && <div className=\"card-with-icon__play\" />}\n </div>\n )\n },\n)\n"],
"mappings": "0UAAAA,IASO,IAAMC,EAA4BC,EAAA,CAAC,CACtC,UAAAC,EACA,YAAAC,EACA,eAAAC,EACA,QAAAC,CACJ,IAMIC,EAAC,OACG,UAAWC,EAAW,mDAAoDL,EAAW,CACjF,uBAAwBE,CAC5B,CAAC,EACD,MAAOD,EACP,QAASE,EACT,eAAa,6BACb,4BAA0B,WAE1BC,EAACE,EAAA,CAAiB,MAAO,IAAM,CACnC,EArBqC,6BAwB5BC,EAA4BR,EAAA,CAAC,CACtC,UAAAC,EACA,YAAAC,EACA,eAAAC,EACA,QAAAC,CACJ,IAMIC,EAAC,OACG,UAAWC,EAAW,sBAAuBL,EAAW,CACpD,gCAAiC,CAACE,GAAkB,CAACD,EACrD,uBAAwBC,CAC5B,CAAC,EACD,MAAOD,EACP,QAASE,EACT,eAAa,8BACjB,EAnBqC,6BAsB5BK,EAAqBC,EAC9B,CAAC,CACG,kBAAAC,EACA,UAAAV,EACA,eAAAE,EACA,iBAAAS,EACA,QAAAR,CACJ,IAMM,CACF,IAAMS,EAAWC,EAAWH,CAAiB,EAAIA,EAAoB,OAC/DT,EAAcY,EAAWH,CAAiB,EAAI,OAAYA,EAC5DI,EACAC,EACAC,EAA2B,GAC/B,GAAIJ,EAAU,CACV,IAAMK,EAAMC,EAAc,CAAC,SAAAN,EAAU,MAAO,IAAK,OAAQ,GAAG,CAAC,EACvDO,EAAaP,EAAWQ,EAAoB,KAAKR,CAAQ,EAAI,OACnE,GAAI,CAACO,GAAcA,EAAW,mBAAqB,EAC/C,OACIf,EAACN,EAAA,CACG,eAAgB,CAAC,CAACI,EAClB,UAAWF,EACX,YAAaC,EACb,QAASC,EAAiBC,EAAU,OACxC,EAGR,GAAIgB,EAAW,QACX,OACIf,EAACG,EAAA,CACG,eAAgB,CAAC,CAACL,EAClB,UAAWF,EACX,YAAaC,EACb,QAASC,EAAiBC,EAAU,OACxC,EAGRa,EAA2BK,EAA6BJ,CAAG,EAC3D,GAAM,CAAC,MAAOK,EAAa,OAAQC,CAAY,EAAIJ,EACnDL,EAAeS,EAAeD,EAC9BP,EAAa,CACT,gBAAiBH,EACjB,MAAO,CAAC,gBAAiB,OAAOK,CAAG,GAAG,CAC1C,CACJ,MACIH,EAAe,EACfC,EAAa,CACT,MAAOd,CACX,EAEJ,OAAIU,IACAI,EAAW,MAAM,gBAAkBJ,GAGnCP,EAAC,OACG,UAAWC,EAAW,sBAAuBL,EAAW,CAEpD,+BAAgCc,EAAe,KAAQA,EAAe,CAC1E,CAAC,EACD,4BAA2BE,EAA2B,UAAY,GAClE,QAASb,EACT,eAAa,qBACZ,GAAGY,GAEHb,GAAkBE,EAAC,OAAI,UAAU,uBAAuB,CAC7D,CAER,CACJ",
"names": ["init_compat_module", "CondensedThumbnailLoading", "__name", "className", "image_style", "playable_media", "onClick", "_", "classNames", "LoadingIndicator", "CondensedThumbnailNoImage", "CondensedThumbnail", "observer", "blob_uid_or_style", "background_color", "blob_uid", "is_BlobUID", "aspect_ratio", "attributes", "is_provisional_thumbnail", "url", "thumbnail_url", "media_info", "media_info_resource", "is_provisional_thumbnail_url", "image_width", "image_height"]
}