@ndla/video-search 8.0.136-alpha.0 → 8.0.138-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/VideoSearch.mjs +3 -3
- package/es/VideoSearch.mjs.map +1 -1
- package/lib/VideoSearch.js +3 -3
- package/lib/VideoSearch.js.map +1 -1
- package/package.json +5 -5
package/es/VideoSearch.mjs
CHANGED
|
@@ -28,12 +28,12 @@ const VideoSearch = ({ onVideoSelect, searchVideos, onError, translations, local
|
|
|
28
28
|
const [offset, setOffset] = useState(0);
|
|
29
29
|
const [videos, setVideos] = useState([]);
|
|
30
30
|
const [isLoading, setIsLoading] = useState(false);
|
|
31
|
-
const fetchVideos = useCallback(async (query
|
|
31
|
+
const fetchVideos = useCallback(async (query, offset, isAppending) => {
|
|
32
32
|
setIsLoading(true);
|
|
33
33
|
try {
|
|
34
34
|
const results = await searchVideos({
|
|
35
|
-
query
|
|
36
|
-
offset
|
|
35
|
+
query,
|
|
36
|
+
offset,
|
|
37
37
|
limit: VIDEO_FETCH_LIMIT
|
|
38
38
|
});
|
|
39
39
|
setVideos((prev) => isAppending ? prev.concat(results) : results);
|
package/es/VideoSearch.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoSearch.mjs","names":[
|
|
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 { type ChangeEvent, useCallback, useEffect, useState, type KeyboardEvent } from \"react\";\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 { VideoResultList } from \"./VideoResultList\";\n\nexport interface VideoTranslations {\n searchPlaceholder: string;\n searchButtonTitle: string;\n loadMoreVideos: string;\n noResults: string;\n is360Video: string;\n previewVideo: string;\n addVideo: string;\n close: string;\n}\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 // eslint-disable-next-line react-hooks/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":";;;;;;;;;;;;;;;AAwCA,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,iCACC,qBAAC;EAAa,MAAK;aACjB,oBAAC;GACC,MAAK;GACL,aAAa,aAAa;GAC1B,OAAO;GACP,UAAU;GACV,WAAW;IACX,EACF,oBAAC;GACC,SAAQ;GACR,MAAK;GACL,cAAY,aAAa;GACzB,OAAO,aAAa;GACpB,WAAW;GACX,SAAS;aAET,oBAAC,eAAa;IACH;GACA,EACf,oBAAC;EACS;EACG;EACG;EACN;EACO;EACH;EACZ,kBAAkB,OAAO,WAAW,SAAS;GAC7C,IACiB"}
|
package/lib/VideoSearch.js
CHANGED
|
@@ -28,12 +28,12 @@ const VideoSearch = ({ onVideoSelect, searchVideos, onError, translations, local
|
|
|
28
28
|
const [offset, setOffset] = (0, react.useState)(0);
|
|
29
29
|
const [videos, setVideos] = (0, react.useState)([]);
|
|
30
30
|
const [isLoading, setIsLoading] = (0, react.useState)(false);
|
|
31
|
-
const fetchVideos = (0, react.useCallback)(async (query
|
|
31
|
+
const fetchVideos = (0, react.useCallback)(async (query, offset, isAppending) => {
|
|
32
32
|
setIsLoading(true);
|
|
33
33
|
try {
|
|
34
34
|
const results = await searchVideos({
|
|
35
|
-
query
|
|
36
|
-
offset
|
|
35
|
+
query,
|
|
36
|
+
offset,
|
|
37
37
|
limit: VIDEO_FETCH_LIMIT
|
|
38
38
|
});
|
|
39
39
|
setVideos((prev) => isAppending ? prev.concat(results) : results);
|
package/lib/VideoSearch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoSearch.js","names":["
|
|
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 { type ChangeEvent, useCallback, useEffect, useState, type KeyboardEvent } from \"react\";\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 { VideoResultList } from \"./VideoResultList\";\n\nexport interface VideoTranslations {\n searchPlaceholder: string;\n searchButtonTitle: string;\n loadMoreVideos: string;\n noResults: string;\n is360Video: string;\n previewVideo: string;\n addVideo: string;\n close: string;\n}\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 // eslint-disable-next-line react-hooks/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":";;;;;;;;;;;;;;;AAwCA,MAAM,yDAA4B,OAAO,EACvC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,mDAAsB,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,gCAAqB,GAAG;CACtC,MAAM,CAAC,QAAQ,iCAAsB,EAAE;CACvC,MAAM,CAAC,QAAQ,iCAA2C,EAAE,CAAC;CAC7D,MAAM,CAAC,WAAW,oCAAyB,MAAM;CAEjD,MAAM,qCACJ,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,4BAAgB;AACd,cAAY,IAAI,EAAE;IAEjB,EAAE,CAAC;CAEN,MAAM,wCAA6B;AACjC,YAAU,EAAE;AACZ,cAAY,OAAO,EAAE;IACpB,CAAC,aAAa,MAAM,CAAC;CAExB,MAAM,0CAA+B;EACnC,MAAM,YAAY,SAAS;AAC3B,YAAU,UAAU;AACpB,cAAY,OAAO,WAAW,KAAK;IAClC;EAAC;EAAa;EAAQ;EAAM,CAAC;CAEhC,MAAM,wCAA6B,MAAqC;AACtE,WAAS,EAAE,OAAO,MAAM;IACvB,EAAE,CAAC;CAEN,MAAM,WAAW,MAA2D;AAC1E,MAAI,EAAE,QAAQ,QACZ,WAAU;;AAId,QACE,4CAAC,iCACC,4CAAC;EAAa,MAAK;aACjB,2CAACA;GACC,MAAK;GACL,aAAa,aAAa;GAC1B,OAAO;GACP,UAAU;GACV,WAAW;IACX,EACF,2CAACC;GACC,SAAQ;GACR,MAAK;GACL,cAAY,aAAa;GACzB,OAAO,aAAa;GACpB,WAAW;GACX,SAAS;aAET,2CAACC,2BAAa;IACH;GACA,EACf,2CAACC;EACS;EACG;EACG;EACN;EACO;EACH;EACZ,kBAAkB,OAAO,WAAW,SAAS;GAC7C,IACiB"}
|
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.138-alpha.0",
|
|
5
5
|
"description": "A simple library for searching NDLA videos",
|
|
6
6
|
"license": "GPL-3.0",
|
|
7
7
|
"exports": {
|
|
@@ -30,13 +30,13 @@
|
|
|
30
30
|
"es"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@ndla/icons": "^8.0.
|
|
33
|
+
"@ndla/icons": "^8.0.77-alpha.0",
|
|
34
34
|
"@ndla/licenses": "^10.0.9-alpha.0",
|
|
35
|
-
"@ndla/primitives": "^1.0.
|
|
35
|
+
"@ndla/primitives": "^1.0.118-alpha.0",
|
|
36
36
|
"@ndla/styled-system": "^0.0.46"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@ndla/preset-panda": "^0.0.
|
|
39
|
+
"@ndla/preset-panda": "^0.0.70",
|
|
40
40
|
"@ndla/types-embed": "^5.0.20-alpha.0",
|
|
41
41
|
"@pandacss/dev": "^1.7.0"
|
|
42
42
|
},
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"publishConfig": {
|
|
48
48
|
"access": "public"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "53ce5c27affb5122415e71963518dac75fb694a6"
|
|
51
51
|
}
|