@ndla/video-search 8.0.148-alpha.0 → 8.0.150-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/VideoListItem.mjs +1 -2
- package/es/VideoListItem.mjs.map +1 -1
- package/es/VideoResultList.mjs +1 -2
- package/es/VideoResultList.mjs.map +1 -1
- package/es/VideoSearch.mjs +1 -2
- package/es/VideoSearch.mjs.map +1 -1
- package/es/index.mjs +1 -2
- package/lib/VideoListItem.d.ts +1 -1
- package/lib/VideoListItem.js +1 -2
- package/lib/VideoListItem.js.map +1 -1
- package/lib/VideoResultList.d.ts +1 -1
- package/lib/VideoResultList.js +2 -3
- package/lib/VideoResultList.js.map +1 -1
- package/lib/VideoSearch.d.ts +1 -10
- package/lib/VideoSearch.js +2 -3
- package/lib/VideoSearch.js.map +1 -1
- package/lib/index.js +3 -4
- package/lib/types.d.ts +17 -0
- package/package.json +4 -4
package/es/VideoListItem.mjs
CHANGED
|
@@ -4,7 +4,6 @@ import { styled } from "@ndla/styled-system/jsx";
|
|
|
4
4
|
import { useState } from "react";
|
|
5
5
|
import { getLicenseByNBTitle } from "@ndla/licenses";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
|
|
8
7
|
//#region src/VideoListItem.tsx
|
|
9
8
|
/**
|
|
10
9
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -113,7 +112,7 @@ const VideoListItem = ({ video, onVideoSelect, translations, locale }) => {
|
|
|
113
112
|
]
|
|
114
113
|
})] });
|
|
115
114
|
};
|
|
116
|
-
|
|
117
115
|
//#endregion
|
|
118
116
|
export { VideoListItem };
|
|
117
|
+
|
|
119
118
|
//# sourceMappingURL=VideoListItem.mjs.map
|
package/es/VideoListItem.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoListItem.mjs","names":[],"sources":["../src/VideoListItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { CloseLine, PanoramaPhotosphere } from \"@ndla/icons\";\nimport { getLicenseByNBTitle, type LicenseLocaleType } from \"@ndla/licenses\";\nimport { Image, Text, ListItemContent, ListItemRoot, Button, IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveApiType } from \"@ndla/types-embed\";\nimport { useState } from \"react\";\nimport type { VideoTranslations } from \"./
|
|
1
|
+
{"version":3,"file":"VideoListItem.mjs","names":[],"sources":["../src/VideoListItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { CloseLine, PanoramaPhotosphere } from \"@ndla/icons\";\nimport { getLicenseByNBTitle, type LicenseLocaleType } from \"@ndla/licenses\";\nimport { Image, Text, ListItemContent, ListItemRoot, Button, IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveApiType } from \"@ndla/types-embed\";\nimport { useState } from \"react\";\nimport type { VideoTranslations } from \"./types\";\n\nconst ButtonWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"small\",\n },\n});\n\nconst PreviewIframe = styled(\"iframe\", {\n base: {\n minHeight: \"surface.xxsmall\",\n },\n});\n\nconst PreviewWrapper = styled(\"div\", {\n base: {\n display: \"grid\",\n gap: \"xsmall\",\n gridTemplateColumns: \"repeat(3,1fr)\",\n padding: \"small\",\n borderBlockEnd: \"1px solid\",\n borderColor: \"stroke.subtle\",\n },\n});\n\nconst StyledImage = styled(Image, {\n base: {\n minWidth: \"surface.xxsmall\",\n height: \"surface.4xsmall\",\n objectFit: \"cover\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n },\n});\n\nconst StyledVideoMeta = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxsmall\",\n },\n});\nconst StyledListItemContent = styled(ListItemContent, {\n base: {\n alignItems: \"flex-end\",\n tabletDown: {\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n },\n },\n});\n\nconst StyledIconButton = styled(IconButton, {\n base: {\n marginLeft: \"auto\",\n },\n});\n\nconst StyledListItemRoot = styled(ListItemRoot, {\n base: {\n paddingBlock: \"medium\",\n tabletDown: {\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n },\n },\n});\n\ninterface LicenseProps {\n license: LicenseLocaleType | string;\n}\nconst License = ({ license }: LicenseProps) => {\n if (typeof license === \"string\") return <Text>{license}</Text>;\n if (license.url?.length) {\n return (\n <a href={license.url} rel=\"license\">\n {license.abbreviation}\n </a>\n );\n }\n return <Text>{license.abbreviation}</Text>;\n};\n\ninterface VideoListItemProps {\n video: BrightcoveApiType;\n translations: VideoTranslations;\n locale: string;\n onVideoSelect: (video: BrightcoveApiType) => void;\n}\n\nexport const VideoListItem = ({ video, onVideoSelect, translations, locale }: VideoListItemProps) => {\n const [isPreviewing, setIsPreviewing] = useState(false);\n const license = video.custom_fields?.license ? getLicenseByNBTitle(video.custom_fields.license, locale) : \"\";\n\n return (\n <li>\n <StyledListItemRoot nonInteractive>\n <StyledImage src={video.images?.thumbnail?.src} alt=\"\" variant=\"rounded\" />\n <StyledListItemContent>\n <StyledVideoMeta>\n <Text textStyle=\"title.medium\">\n {video.name}\n {video.projection === \"equirectangular\" && (\n <PanoramaPhotosphere\n aria-hidden={false}\n aria-label={translations.is360Video}\n title={translations.is360Video}\n />\n )}\n </Text>\n <Text>{video.custom_fields?.licenseinfo ?? \"\"}</Text>\n <License license={license} />\n </StyledVideoMeta>\n <ButtonWrapper>\n <Button\n variant=\"secondary\"\n size=\"small\"\n onClick={() => setIsPreviewing((p) => !p)}\n aria-expanded={isPreviewing}\n aria-controls={`video-preview-${video.id}`}\n >\n {translations.previewVideo}\n </Button>\n <Button size=\"small\" onClick={() => onVideoSelect(video)}>\n {translations.addVideo}\n </Button>\n </ButtonWrapper>\n </StyledListItemContent>\n </StyledListItemRoot>\n {!!isPreviewing && (\n <PreviewWrapper id={`video-preview-${video.id}`}>\n <div />\n <PreviewIframe\n title={video.name}\n src={`//players.brightcove.net/${video.account_id}/BkLm8fT_default/index.html?videoId=${video.id}`}\n allowFullScreen\n />\n <StyledIconButton\n variant=\"secondary\"\n aria-label={translations.close}\n title={translations.close}\n onClick={() => setIsPreviewing(false)}\n >\n <CloseLine />\n </StyledIconButton>\n </PreviewWrapper>\n )}\n </li>\n );\n};\n"],"mappings":"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"}
|
package/es/VideoResultList.mjs
CHANGED
|
@@ -2,7 +2,6 @@ import { VideoListItem } from "./VideoListItem.mjs";
|
|
|
2
2
|
import { Button, Spinner, Text } from "@ndla/primitives";
|
|
3
3
|
import { styled } from "@ndla/styled-system/jsx";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
|
|
6
5
|
//#region src/VideoResultList.tsx
|
|
7
6
|
/**
|
|
8
7
|
* Copyright (c) 2017-present, NDLA.
|
|
@@ -39,7 +38,7 @@ const VideoResultList = ({ videos, existsMoreVideos, isLoading, translations, lo
|
|
|
39
38
|
})
|
|
40
39
|
] });
|
|
41
40
|
};
|
|
42
|
-
|
|
43
41
|
//#endregion
|
|
44
42
|
export { VideoResultList };
|
|
43
|
+
|
|
45
44
|
//# sourceMappingURL=VideoResultList.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoResultList.mjs","names":[],"sources":["../src/VideoResultList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text, Button, Spinner } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveApiType } from \"@ndla/types-embed\";\nimport {
|
|
1
|
+
{"version":3,"file":"VideoResultList.mjs","names":[],"sources":["../src/VideoResultList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text, Button, Spinner } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveApiType } from \"@ndla/types-embed\";\nimport type { VideoTranslations } from \"./types\";\nimport { VideoListItem } from \"./VideoListItem\";\n\nconst StyledList = styled(\"ul\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxsmall\",\n listStyle: \"none\",\n width: \"100%\",\n },\n});\n\nconst StyledVideoResultWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"center\",\n },\n});\n\ninterface Props {\n videos: BrightcoveApiType[];\n existsMoreVideos: boolean;\n isLoading: boolean;\n translations: VideoTranslations;\n locale: string;\n onVideoSelect: (video: BrightcoveApiType) => void;\n onShowMore: () => void;\n}\n\nexport const VideoResultList = ({\n videos,\n existsMoreVideos,\n isLoading,\n translations,\n locale,\n onVideoSelect,\n onShowMore,\n}: Props) => {\n return (\n <StyledVideoResultWrapper>\n {!videos.length && !isLoading ? (\n <Text>{translations.noResults}</Text>\n ) : (\n <StyledList>\n {videos.map((video, index) => (\n <VideoListItem\n key={`${video.id}-${index}`}\n video={video}\n translations={translations}\n locale={locale}\n onVideoSelect={onVideoSelect}\n />\n ))}\n </StyledList>\n )}\n {!!isLoading && <Spinner />}\n {!!existsMoreVideos && <Button onClick={onShowMore}>{translations.loadMoreVideos}</Button>}\n </StyledVideoResultWrapper>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;CACX,OAAO;CACR,EACF,CAAC;AAEF,MAAM,2BAA2B,OAAO,OAAO,EAC7C,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACb,EACF,CAAC;AAYF,MAAa,mBAAmB,EAC9B,QACA,kBACA,WACA,cACA,QACA,eACA,iBACW;AACX,QACE,qBAAC,0BAAD,EAAA,UAAA;EACG,CAAC,OAAO,UAAU,CAAC,YAClB,oBAAC,MAAD,EAAA,UAAO,aAAa,WAAiB,CAAA,GAErC,oBAAC,YAAD,EAAA,UACG,OAAO,KAAK,OAAO,UAClB,oBAAC,eAAD;GAES;GACO;GACN;GACO;GACf,EALK,GAAG,MAAM,GAAG,GAAG,QAKpB,CACF,EACS,CAAA;EAEd,CAAC,CAAC,aAAa,oBAAC,SAAD,EAAW,CAAA;EAC1B,CAAC,CAAC,oBAAoB,oBAAC,QAAD;GAAQ,SAAS;aAAa,aAAa;GAAwB,CAAA;EACjE,EAAA,CAAA"}
|
package/es/VideoSearch.mjs
CHANGED
|
@@ -4,7 +4,6 @@ import { IconButton, Input } from "@ndla/primitives";
|
|
|
4
4
|
import { styled } from "@ndla/styled-system/jsx";
|
|
5
5
|
import { useCallback, useEffect, useState } from "react";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
|
|
8
7
|
//#region src/VideoSearch.tsx
|
|
9
8
|
/**
|
|
10
9
|
* Copyright (c) 2017-present, NDLA.
|
|
@@ -91,7 +90,7 @@ const VideoSearch = ({ onVideoSelect, searchVideos, onError, translations, local
|
|
|
91
90
|
existsMoreVideos: videos.length === offset + VIDEO_FETCH_LIMIT
|
|
92
91
|
})] });
|
|
93
92
|
};
|
|
94
|
-
|
|
95
93
|
//#endregion
|
|
96
94
|
export { VideoSearch };
|
|
95
|
+
|
|
97
96
|
//# sourceMappingURL=VideoSearch.mjs.map
|
package/es/VideoSearch.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoSearch.mjs","names":[],"sources":["../src/VideoSearch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { SearchLine } from \"@ndla/icons\";\nimport { IconButton, Input } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveApiType } from \"@ndla/types-embed\";\nimport { type ChangeEvent, useCallback, useEffect, useState, type KeyboardEvent } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"VideoSearch.mjs","names":[],"sources":["../src/VideoSearch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { SearchLine } from \"@ndla/icons\";\nimport { IconButton, Input } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveApiType } from \"@ndla/types-embed\";\nimport { type ChangeEvent, useCallback, useEffect, useState, type KeyboardEvent } from \"react\";\nimport type { VideoTranslations } from \"./types\";\nimport { VideoResultList } from \"./VideoResultList\";\n\ninterface Props {\n onVideoSelect: (video: BrightcoveApiType) => void;\n searchVideos: (query: VideoQueryType) => Promise<BrightcoveApiType[]>;\n onError: (e: unknown) => void;\n translations: VideoTranslations;\n locale: string;\n}\n\nexport interface VideoQueryType {\n query: string;\n offset: number;\n limit: number;\n}\n\nconst VideoSearchWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n});\n\nconst InputWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xsmall\",\n },\n});\n\nconst VIDEO_FETCH_LIMIT = 10;\n\nexport const VideoSearch = ({ onVideoSelect, searchVideos, onError, translations, locale }: Props) => {\n const [query, setQuery] = useState(\"\");\n const [offset, setOffset] = useState(0);\n const [videos, setVideos] = useState<BrightcoveApiType[]>([]);\n const [isLoading, setIsLoading] = useState(false);\n\n const fetchVideos = useCallback(\n async (query: string, offset: number, isAppending?: boolean) => {\n setIsLoading(true);\n try {\n const results = await searchVideos({\n query,\n offset: offset,\n limit: VIDEO_FETCH_LIMIT,\n });\n setVideos((prev) => (isAppending ? prev.concat(results) : results));\n } catch (e) {\n onError(e);\n }\n setIsLoading(false);\n },\n [searchVideos, onError],\n );\n\n useEffect(() => {\n fetchVideos(\"\", 0);\n // oxlint-disable-next-line react/exhaustive-deps\n }, []);\n\n const onSearch = useCallback(() => {\n setOffset(0);\n fetchVideos(query, 0);\n }, [fetchVideos, query]);\n\n const onShowMore = useCallback(() => {\n const newOffset = offset + VIDEO_FETCH_LIMIT;\n setOffset(newOffset);\n fetchVideos(query, newOffset, true);\n }, [fetchVideos, offset, query]);\n\n const onQueryChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n setQuery(e.target.value);\n }, []);\n\n const onEnter = (e: KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {\n if (e.key === \"Enter\") {\n onSearch();\n }\n };\n\n return (\n <VideoSearchWrapper>\n <InputWrapper role=\"search\">\n <Input\n type=\"search\"\n placeholder={translations.searchPlaceholder}\n value={query}\n onChange={onQueryChange}\n onKeyDown={onEnter}\n />\n <IconButton\n variant=\"primary\"\n type=\"submit\"\n aria-label={translations.searchButtonTitle}\n title={translations.searchButtonTitle}\n onKeyDown={onEnter}\n onClick={onSearch}\n >\n <SearchLine />\n </IconButton>\n </InputWrapper>\n <VideoResultList\n videos={videos}\n isLoading={isLoading}\n translations={translations}\n locale={locale}\n onVideoSelect={onVideoSelect}\n onShowMore={onShowMore}\n existsMoreVideos={videos.length === offset + VIDEO_FETCH_LIMIT}\n />\n </VideoSearchWrapper>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AA8BA,MAAM,qBAAqB,OAAO,OAAO,EACvC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,OAAO,EACjC,MAAM;CACJ,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAM,oBAAoB;AAE1B,MAAa,eAAe,EAAE,eAAe,cAAc,SAAS,cAAc,aAAoB;CACpG,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CACtC,MAAM,CAAC,QAAQ,aAAa,SAAS,EAAE;CACvC,MAAM,CAAC,QAAQ,aAAa,SAA8B,EAAE,CAAC;CAC7D,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAEjD,MAAM,cAAc,YAClB,OAAO,OAAe,QAAgB,gBAA0B;AAC9D,eAAa,KAAK;AAClB,MAAI;GACF,MAAM,UAAU,MAAM,aAAa;IACjC;IACQ;IACR,OAAO;IACR,CAAC;AACF,cAAW,SAAU,cAAc,KAAK,OAAO,QAAQ,GAAG,QAAS;WAC5D,GAAG;AACV,WAAQ,EAAE;;AAEZ,eAAa,MAAM;IAErB,CAAC,cAAc,QAAQ,CACxB;AAED,iBAAgB;AACd,cAAY,IAAI,EAAE;IAEjB,EAAE,CAAC;CAEN,MAAM,WAAW,kBAAkB;AACjC,YAAU,EAAE;AACZ,cAAY,OAAO,EAAE;IACpB,CAAC,aAAa,MAAM,CAAC;CAExB,MAAM,aAAa,kBAAkB;EACnC,MAAM,YAAY,SAAS;AAC3B,YAAU,UAAU;AACpB,cAAY,OAAO,WAAW,KAAK;IAClC;EAAC;EAAa;EAAQ;EAAM,CAAC;CAEhC,MAAM,gBAAgB,aAAa,MAAqC;AACtE,WAAS,EAAE,OAAO,MAAM;IACvB,EAAE,CAAC;CAEN,MAAM,WAAW,MAA2D;AAC1E,MAAI,EAAE,QAAQ,QACZ,WAAU;;AAId,QACE,qBAAC,oBAAD,EAAA,UAAA,CACE,qBAAC,cAAD;EAAc,MAAK;YAAnB,CACE,oBAAC,OAAD;GACE,MAAK;GACL,aAAa,aAAa;GAC1B,OAAO;GACP,UAAU;GACV,WAAW;GACX,CAAA,EACF,oBAAC,YAAD;GACE,SAAQ;GACR,MAAK;GACL,cAAY,aAAa;GACzB,OAAO,aAAa;GACpB,WAAW;GACX,SAAS;aAET,oBAAC,YAAD,EAAc,CAAA;GACH,CAAA,CACA;KACf,oBAAC,iBAAD;EACU;EACG;EACG;EACN;EACO;EACH;EACZ,kBAAkB,OAAO,WAAW,SAAS;EAC7C,CAAA,CACiB,EAAA,CAAA"}
|
package/es/index.mjs
CHANGED
package/lib/VideoListItem.d.ts
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
import type { BrightcoveApiType } from "@ndla/types-embed";
|
|
9
|
-
import type { VideoTranslations } from "./
|
|
9
|
+
import type { VideoTranslations } from "./types";
|
|
10
10
|
interface VideoListItemProps {
|
|
11
11
|
video: BrightcoveApiType;
|
|
12
12
|
translations: VideoTranslations;
|
package/lib/VideoListItem.js
CHANGED
|
@@ -4,7 +4,6 @@ let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
|
4
4
|
let react = require("react");
|
|
5
5
|
let _ndla_licenses = require("@ndla/licenses");
|
|
6
6
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
|
-
|
|
8
7
|
//#region src/VideoListItem.tsx
|
|
9
8
|
/**
|
|
10
9
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -113,7 +112,7 @@ const VideoListItem = ({ video, onVideoSelect, translations, locale }) => {
|
|
|
113
112
|
]
|
|
114
113
|
})] });
|
|
115
114
|
};
|
|
116
|
-
|
|
117
115
|
//#endregion
|
|
118
116
|
exports.VideoListItem = VideoListItem;
|
|
117
|
+
|
|
119
118
|
//# sourceMappingURL=VideoListItem.js.map
|
package/lib/VideoListItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoListItem.js","names":["Image","ListItemContent","IconButton","ListItemRoot","Text","PanoramaPhotosphere","Button","CloseLine"],"sources":["../src/VideoListItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { CloseLine, PanoramaPhotosphere } from \"@ndla/icons\";\nimport { getLicenseByNBTitle, type LicenseLocaleType } from \"@ndla/licenses\";\nimport { Image, Text, ListItemContent, ListItemRoot, Button, IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveApiType } from \"@ndla/types-embed\";\nimport { useState } from \"react\";\nimport type { VideoTranslations } from \"./
|
|
1
|
+
{"version":3,"file":"VideoListItem.js","names":["Image","ListItemContent","IconButton","ListItemRoot","Text","PanoramaPhotosphere","Button","CloseLine"],"sources":["../src/VideoListItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { CloseLine, PanoramaPhotosphere } from \"@ndla/icons\";\nimport { getLicenseByNBTitle, type LicenseLocaleType } from \"@ndla/licenses\";\nimport { Image, Text, ListItemContent, ListItemRoot, Button, IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveApiType } from \"@ndla/types-embed\";\nimport { useState } from \"react\";\nimport type { VideoTranslations } from \"./types\";\n\nconst ButtonWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"small\",\n },\n});\n\nconst PreviewIframe = styled(\"iframe\", {\n base: {\n minHeight: \"surface.xxsmall\",\n },\n});\n\nconst PreviewWrapper = styled(\"div\", {\n base: {\n display: \"grid\",\n gap: \"xsmall\",\n gridTemplateColumns: \"repeat(3,1fr)\",\n padding: \"small\",\n borderBlockEnd: \"1px solid\",\n borderColor: \"stroke.subtle\",\n },\n});\n\nconst StyledImage = styled(Image, {\n base: {\n minWidth: \"surface.xxsmall\",\n height: \"surface.4xsmall\",\n objectFit: \"cover\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n },\n});\n\nconst StyledVideoMeta = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxsmall\",\n },\n});\nconst StyledListItemContent = styled(ListItemContent, {\n base: {\n alignItems: \"flex-end\",\n tabletDown: {\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n },\n },\n});\n\nconst StyledIconButton = styled(IconButton, {\n base: {\n marginLeft: \"auto\",\n },\n});\n\nconst StyledListItemRoot = styled(ListItemRoot, {\n base: {\n paddingBlock: \"medium\",\n tabletDown: {\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n },\n },\n});\n\ninterface LicenseProps {\n license: LicenseLocaleType | string;\n}\nconst License = ({ license }: LicenseProps) => {\n if (typeof license === \"string\") return <Text>{license}</Text>;\n if (license.url?.length) {\n return (\n <a href={license.url} rel=\"license\">\n {license.abbreviation}\n </a>\n );\n }\n return <Text>{license.abbreviation}</Text>;\n};\n\ninterface VideoListItemProps {\n video: BrightcoveApiType;\n translations: VideoTranslations;\n locale: string;\n onVideoSelect: (video: BrightcoveApiType) => void;\n}\n\nexport const VideoListItem = ({ video, onVideoSelect, translations, locale }: VideoListItemProps) => {\n const [isPreviewing, setIsPreviewing] = useState(false);\n const license = video.custom_fields?.license ? getLicenseByNBTitle(video.custom_fields.license, locale) : \"\";\n\n return (\n <li>\n <StyledListItemRoot nonInteractive>\n <StyledImage src={video.images?.thumbnail?.src} alt=\"\" variant=\"rounded\" />\n <StyledListItemContent>\n <StyledVideoMeta>\n <Text textStyle=\"title.medium\">\n {video.name}\n {video.projection === \"equirectangular\" && (\n <PanoramaPhotosphere\n aria-hidden={false}\n aria-label={translations.is360Video}\n title={translations.is360Video}\n />\n )}\n </Text>\n <Text>{video.custom_fields?.licenseinfo ?? \"\"}</Text>\n <License license={license} />\n </StyledVideoMeta>\n <ButtonWrapper>\n <Button\n variant=\"secondary\"\n size=\"small\"\n onClick={() => setIsPreviewing((p) => !p)}\n aria-expanded={isPreviewing}\n aria-controls={`video-preview-${video.id}`}\n >\n {translations.previewVideo}\n </Button>\n <Button size=\"small\" onClick={() => onVideoSelect(video)}>\n {translations.addVideo}\n </Button>\n </ButtonWrapper>\n </StyledListItemContent>\n </StyledListItemRoot>\n {!!isPreviewing && (\n <PreviewWrapper id={`video-preview-${video.id}`}>\n <div />\n <PreviewIframe\n title={video.name}\n src={`//players.brightcove.net/${video.account_id}/BkLm8fT_default/index.html?videoId=${video.id}`}\n allowFullScreen\n />\n <StyledIconButton\n variant=\"secondary\"\n aria-label={translations.close}\n title={translations.close}\n onClick={() => setIsPreviewing(false)}\n >\n <CloseLine />\n </StyledIconButton>\n </PreviewWrapper>\n )}\n </li>\n );\n};\n"],"mappings":"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"}
|
package/lib/VideoResultList.d.ts
CHANGED
package/lib/VideoResultList.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
const require_VideoListItem = require(
|
|
1
|
+
const require_VideoListItem = require("./VideoListItem.js");
|
|
2
2
|
let _ndla_primitives = require("@ndla/primitives");
|
|
3
3
|
let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
4
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
|
-
|
|
6
5
|
//#region src/VideoResultList.tsx
|
|
7
6
|
/**
|
|
8
7
|
* Copyright (c) 2017-present, NDLA.
|
|
@@ -39,7 +38,7 @@ const VideoResultList = ({ videos, existsMoreVideos, isLoading, translations, lo
|
|
|
39
38
|
})
|
|
40
39
|
] });
|
|
41
40
|
};
|
|
42
|
-
|
|
43
41
|
//#endregion
|
|
44
42
|
exports.VideoResultList = VideoResultList;
|
|
43
|
+
|
|
45
44
|
//# sourceMappingURL=VideoResultList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoResultList.js","names":["Text","VideoListItem","Spinner","Button"],"sources":["../src/VideoResultList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text, Button, Spinner } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveApiType } from \"@ndla/types-embed\";\nimport {
|
|
1
|
+
{"version":3,"file":"VideoResultList.js","names":["Text","VideoListItem","Spinner","Button"],"sources":["../src/VideoResultList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text, Button, Spinner } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveApiType } from \"@ndla/types-embed\";\nimport type { VideoTranslations } from \"./types\";\nimport { VideoListItem } from \"./VideoListItem\";\n\nconst StyledList = styled(\"ul\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxsmall\",\n listStyle: \"none\",\n width: \"100%\",\n },\n});\n\nconst StyledVideoResultWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"center\",\n },\n});\n\ninterface Props {\n videos: BrightcoveApiType[];\n existsMoreVideos: boolean;\n isLoading: boolean;\n translations: VideoTranslations;\n locale: string;\n onVideoSelect: (video: BrightcoveApiType) => void;\n onShowMore: () => void;\n}\n\nexport const VideoResultList = ({\n videos,\n existsMoreVideos,\n isLoading,\n translations,\n locale,\n onVideoSelect,\n onShowMore,\n}: Props) => {\n return (\n <StyledVideoResultWrapper>\n {!videos.length && !isLoading ? (\n <Text>{translations.noResults}</Text>\n ) : (\n <StyledList>\n {videos.map((video, index) => (\n <VideoListItem\n key={`${video.id}-${index}`}\n video={video}\n translations={translations}\n locale={locale}\n onVideoSelect={onVideoSelect}\n />\n ))}\n </StyledList>\n )}\n {!!isLoading && <Spinner />}\n {!!existsMoreVideos && <Button onClick={onShowMore}>{translations.loadMoreVideos}</Button>}\n </StyledVideoResultWrapper>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,cAAA,GAAA,wBAAA,QAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;CACX,OAAO;CACR,EACF,CAAC;AAEF,MAAM,4BAAA,GAAA,wBAAA,QAAkC,OAAO,EAC7C,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACb,EACF,CAAC;AAYF,MAAa,mBAAmB,EAC9B,QACA,kBACA,WACA,cACA,QACA,eACA,iBACW;AACX,QACE,iBAAA,GAAA,kBAAA,MAAC,0BAAD,EAAA,UAAA;EACG,CAAC,OAAO,UAAU,CAAC,YAClB,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,MAAD,EAAA,UAAO,aAAa,WAAiB,CAAA,GAErC,iBAAA,GAAA,kBAAA,KAAC,YAAD,EAAA,UACG,OAAO,KAAK,OAAO,UAClB,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;GAES;GACO;GACN;GACO;GACf,EALK,GAAG,MAAM,GAAG,GAAG,QAKpB,CACF,EACS,CAAA;EAEd,CAAC,CAAC,aAAa,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,SAAD,EAAW,CAAA;EAC1B,CAAC,CAAC,oBAAoB,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,QAAD;GAAQ,SAAS;aAAa,aAAa;GAAwB,CAAA;EACjE,EAAA,CAAA"}
|
package/lib/VideoSearch.d.ts
CHANGED
|
@@ -6,16 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
import type { BrightcoveApiType } from "@ndla/types-embed";
|
|
9
|
-
|
|
10
|
-
searchPlaceholder: string;
|
|
11
|
-
searchButtonTitle: string;
|
|
12
|
-
loadMoreVideos: string;
|
|
13
|
-
noResults: string;
|
|
14
|
-
is360Video: string;
|
|
15
|
-
previewVideo: string;
|
|
16
|
-
addVideo: string;
|
|
17
|
-
close: string;
|
|
18
|
-
}
|
|
9
|
+
import type { VideoTranslations } from "./types";
|
|
19
10
|
interface Props {
|
|
20
11
|
onVideoSelect: (video: BrightcoveApiType) => void;
|
|
21
12
|
searchVideos: (query: VideoQueryType) => Promise<BrightcoveApiType[]>;
|
package/lib/VideoSearch.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
const require_VideoResultList = require(
|
|
1
|
+
const require_VideoResultList = require("./VideoResultList.js");
|
|
2
2
|
let _ndla_icons = require("@ndla/icons");
|
|
3
3
|
let _ndla_primitives = require("@ndla/primitives");
|
|
4
4
|
let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
5
5
|
let react = require("react");
|
|
6
6
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
|
-
|
|
8
7
|
//#region src/VideoSearch.tsx
|
|
9
8
|
/**
|
|
10
9
|
* Copyright (c) 2017-present, NDLA.
|
|
@@ -91,7 +90,7 @@ const VideoSearch = ({ onVideoSelect, searchVideos, onError, translations, local
|
|
|
91
90
|
existsMoreVideos: videos.length === offset + VIDEO_FETCH_LIMIT
|
|
92
91
|
})] });
|
|
93
92
|
};
|
|
94
|
-
|
|
95
93
|
//#endregion
|
|
96
94
|
exports.VideoSearch = VideoSearch;
|
|
95
|
+
|
|
97
96
|
//# sourceMappingURL=VideoSearch.js.map
|
package/lib/VideoSearch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoSearch.js","names":["Input","IconButton","SearchLine","VideoResultList"],"sources":["../src/VideoSearch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { SearchLine } from \"@ndla/icons\";\nimport { IconButton, Input } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveApiType } from \"@ndla/types-embed\";\nimport { type ChangeEvent, useCallback, useEffect, useState, type KeyboardEvent } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"VideoSearch.js","names":["Input","IconButton","SearchLine","VideoResultList"],"sources":["../src/VideoSearch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { SearchLine } from \"@ndla/icons\";\nimport { IconButton, Input } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveApiType } from \"@ndla/types-embed\";\nimport { type ChangeEvent, useCallback, useEffect, useState, type KeyboardEvent } from \"react\";\nimport type { VideoTranslations } from \"./types\";\nimport { VideoResultList } from \"./VideoResultList\";\n\ninterface Props {\n onVideoSelect: (video: BrightcoveApiType) => void;\n searchVideos: (query: VideoQueryType) => Promise<BrightcoveApiType[]>;\n onError: (e: unknown) => void;\n translations: VideoTranslations;\n locale: string;\n}\n\nexport interface VideoQueryType {\n query: string;\n offset: number;\n limit: number;\n}\n\nconst VideoSearchWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n});\n\nconst InputWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xsmall\",\n },\n});\n\nconst VIDEO_FETCH_LIMIT = 10;\n\nexport const VideoSearch = ({ onVideoSelect, searchVideos, onError, translations, locale }: Props) => {\n const [query, setQuery] = useState(\"\");\n const [offset, setOffset] = useState(0);\n const [videos, setVideos] = useState<BrightcoveApiType[]>([]);\n const [isLoading, setIsLoading] = useState(false);\n\n const fetchVideos = useCallback(\n async (query: string, offset: number, isAppending?: boolean) => {\n setIsLoading(true);\n try {\n const results = await searchVideos({\n query,\n offset: offset,\n limit: VIDEO_FETCH_LIMIT,\n });\n setVideos((prev) => (isAppending ? prev.concat(results) : results));\n } catch (e) {\n onError(e);\n }\n setIsLoading(false);\n },\n [searchVideos, onError],\n );\n\n useEffect(() => {\n fetchVideos(\"\", 0);\n // oxlint-disable-next-line react/exhaustive-deps\n }, []);\n\n const onSearch = useCallback(() => {\n setOffset(0);\n fetchVideos(query, 0);\n }, [fetchVideos, query]);\n\n const onShowMore = useCallback(() => {\n const newOffset = offset + VIDEO_FETCH_LIMIT;\n setOffset(newOffset);\n fetchVideos(query, newOffset, true);\n }, [fetchVideos, offset, query]);\n\n const onQueryChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n setQuery(e.target.value);\n }, []);\n\n const onEnter = (e: KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {\n if (e.key === \"Enter\") {\n onSearch();\n }\n };\n\n return (\n <VideoSearchWrapper>\n <InputWrapper role=\"search\">\n <Input\n type=\"search\"\n placeholder={translations.searchPlaceholder}\n value={query}\n onChange={onQueryChange}\n onKeyDown={onEnter}\n />\n <IconButton\n variant=\"primary\"\n type=\"submit\"\n aria-label={translations.searchButtonTitle}\n title={translations.searchButtonTitle}\n onKeyDown={onEnter}\n onClick={onSearch}\n >\n <SearchLine />\n </IconButton>\n </InputWrapper>\n <VideoResultList\n videos={videos}\n isLoading={isLoading}\n translations={translations}\n locale={locale}\n onVideoSelect={onVideoSelect}\n onShowMore={onShowMore}\n existsMoreVideos={videos.length === offset + VIDEO_FETCH_LIMIT}\n />\n </VideoSearchWrapper>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AA8BA,MAAM,sBAAA,GAAA,wBAAA,QAA4B,OAAO,EACvC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACjC,MAAM;CACJ,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAM,oBAAoB;AAE1B,MAAa,eAAe,EAAE,eAAe,cAAc,SAAS,cAAc,aAAoB;CACpG,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqB,GAAG;CACtC,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,UAAsB,EAAE;CACvC,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,UAA2C,EAAE,CAAC;CAC7D,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAyB,MAAM;CAEjD,MAAM,eAAA,GAAA,MAAA,aACJ,OAAO,OAAe,QAAgB,gBAA0B;AAC9D,eAAa,KAAK;AAClB,MAAI;GACF,MAAM,UAAU,MAAM,aAAa;IACjC;IACQ;IACR,OAAO;IACR,CAAC;AACF,cAAW,SAAU,cAAc,KAAK,OAAO,QAAQ,GAAG,QAAS;WAC5D,GAAG;AACV,WAAQ,EAAE;;AAEZ,eAAa,MAAM;IAErB,CAAC,cAAc,QAAQ,CACxB;AAED,EAAA,GAAA,MAAA,iBAAgB;AACd,cAAY,IAAI,EAAE;IAEjB,EAAE,CAAC;CAEN,MAAM,YAAA,GAAA,MAAA,mBAA6B;AACjC,YAAU,EAAE;AACZ,cAAY,OAAO,EAAE;IACpB,CAAC,aAAa,MAAM,CAAC;CAExB,MAAM,cAAA,GAAA,MAAA,mBAA+B;EACnC,MAAM,YAAY,SAAS;AAC3B,YAAU,UAAU;AACpB,cAAY,OAAO,WAAW,KAAK;IAClC;EAAC;EAAa;EAAQ;EAAM,CAAC;CAEhC,MAAM,iBAAA,GAAA,MAAA,cAA6B,MAAqC;AACtE,WAAS,EAAE,OAAO,MAAM;IACvB,EAAE,CAAC;CAEN,MAAM,WAAW,MAA2D;AAC1E,MAAI,EAAE,QAAQ,QACZ,WAAU;;AAId,QACE,iBAAA,GAAA,kBAAA,MAAC,oBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAc,MAAK;YAAnB,CACE,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,OAAD;GACE,MAAK;GACL,aAAa,aAAa;GAC1B,OAAO;GACP,UAAU;GACV,WAAW;GACX,CAAA,EACF,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,YAAD;GACE,SAAQ;GACR,MAAK;GACL,cAAY,aAAa;GACzB,OAAO,aAAa;GACpB,WAAW;GACX,SAAS;aAET,iBAAA,GAAA,kBAAA,KAACC,YAAAA,YAAD,EAAc,CAAA;GACH,CAAA,CACA;KACf,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,iBAAD;EACU;EACG;EACG;EACN;EACO;EACH;EACZ,kBAAkB,OAAO,WAAW,SAAS;EAC7C,CAAA,CACiB,EAAA,CAAA"}
|
package/lib/index.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value:
|
|
2
|
-
const require_VideoSearch = require(
|
|
3
|
-
|
|
4
|
-
exports.VideoSearch = require_VideoSearch.VideoSearch;
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_VideoSearch = require("./VideoSearch.js");
|
|
3
|
+
exports.VideoSearch = require_VideoSearch.VideoSearch;
|
package/lib/types.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2026-present, NDLA.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
export interface VideoTranslations {
|
|
9
|
+
searchPlaceholder: string;
|
|
10
|
+
searchButtonTitle: string;
|
|
11
|
+
loadMoreVideos: string;
|
|
12
|
+
noResults: string;
|
|
13
|
+
is360Video: string;
|
|
14
|
+
previewVideo: string;
|
|
15
|
+
addVideo: string;
|
|
16
|
+
close: string;
|
|
17
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/video-search",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "8.0.
|
|
4
|
+
"version": "8.0.150-alpha.0",
|
|
5
5
|
"description": "A simple library for searching NDLA videos",
|
|
6
6
|
"license": "GPL-3.0",
|
|
7
7
|
"exports": {
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
"es"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@ndla/icons": "^8.0.
|
|
33
|
+
"@ndla/icons": "^8.0.87-alpha.0",
|
|
34
34
|
"@ndla/licenses": "^10.0.11-alpha.0",
|
|
35
|
-
"@ndla/primitives": "^1.0.
|
|
35
|
+
"@ndla/primitives": "^1.0.125-alpha.0",
|
|
36
36
|
"@ndla/styled-system": "^0.0.47"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"publishConfig": {
|
|
48
48
|
"access": "public"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "9e92080763987460f8009550db77bfd2b9709fe3"
|
|
51
51
|
}
|