@ndla/video-search 8.0.98-alpha.0 → 8.0.100-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/package.json +5 -5
- package/es/VideoListItem.js +0 -154
- package/es/VideoResultList.js +0 -52
- package/es/VideoSearch.js +0 -104
- package/es/index.js +0 -9
- package/lib/VideoListItem.js +0 -161
- package/lib/VideoResultList.js +0 -59
- package/lib/VideoSearch.js +0 -111
- package/lib/index.js +0 -12
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/video-search",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.100-alpha.0",
|
|
4
4
|
"description": "A simple library for searching NDLA videos",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -26,13 +26,13 @@
|
|
|
26
26
|
"es"
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@ndla/icons": "^8.0.
|
|
29
|
+
"@ndla/icons": "^8.0.58-alpha.0",
|
|
30
30
|
"@ndla/licenses": "^9.0.1",
|
|
31
|
-
"@ndla/primitives": "^1.0.
|
|
31
|
+
"@ndla/primitives": "^1.0.88-alpha.0",
|
|
32
32
|
"@ndla/styled-system": "^0.0.34"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@ndla/preset-panda": "^0.0.
|
|
35
|
+
"@ndla/preset-panda": "^0.0.54",
|
|
36
36
|
"@ndla/types-embed": "^5.0.14-alpha.0",
|
|
37
37
|
"@pandacss/dev": "^0.53.6"
|
|
38
38
|
},
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"publishConfig": {
|
|
44
44
|
"access": "public"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "52adafa4348c1c02ebc4da28317aa5270cbe2a80"
|
|
47
47
|
}
|
package/es/VideoListItem.js
DELETED
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2024-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
|
-
|
|
9
|
-
import { useState } from "react";
|
|
10
|
-
import { CloseLine, PanoramaPhotosphere } from "@ndla/icons";
|
|
11
|
-
import { getLicenseByNBTitle } from "@ndla/licenses";
|
|
12
|
-
import { Image, Text, ListItemContent, ListItemRoot, Button, IconButton } from "@ndla/primitives";
|
|
13
|
-
import { styled } from "@ndla/styled-system/jsx";
|
|
14
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
|
-
const ButtonWrapper = styled("div", {
|
|
16
|
-
base: {
|
|
17
|
-
display: "flex",
|
|
18
|
-
gap: "small"
|
|
19
|
-
}
|
|
20
|
-
});
|
|
21
|
-
const PreviewIframe = styled("iframe", {
|
|
22
|
-
base: {
|
|
23
|
-
minHeight: "surface.xxsmall"
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
const PreviewWrapper = styled("div", {
|
|
27
|
-
base: {
|
|
28
|
-
display: "grid",
|
|
29
|
-
gap: "xsmall",
|
|
30
|
-
gridTemplateColumns: "repeat(3,1fr)",
|
|
31
|
-
padding: "small",
|
|
32
|
-
borderBlockEnd: "1px solid",
|
|
33
|
-
borderColor: "stroke.subtle"
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
const StyledImage = styled(Image, {
|
|
37
|
-
base: {
|
|
38
|
-
minWidth: "surface.xxsmall",
|
|
39
|
-
height: "surface.4xsmall",
|
|
40
|
-
objectFit: "cover",
|
|
41
|
-
border: "1px solid",
|
|
42
|
-
borderColor: "stroke.subtle"
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
const StyledVideoMeta = styled("div", {
|
|
46
|
-
base: {
|
|
47
|
-
display: "flex",
|
|
48
|
-
flexDirection: "column",
|
|
49
|
-
gap: "xxsmall"
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
const StyledListItemContent = styled(ListItemContent, {
|
|
53
|
-
base: {
|
|
54
|
-
alignItems: "flex-end",
|
|
55
|
-
tabletDown: {
|
|
56
|
-
flexDirection: "column",
|
|
57
|
-
alignItems: "flex-start"
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
const StyledIconButton = styled(IconButton, {
|
|
62
|
-
base: {
|
|
63
|
-
marginLeft: "auto"
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
const StyledListItemRoot = styled(ListItemRoot, {
|
|
67
|
-
base: {
|
|
68
|
-
paddingBlock: "medium",
|
|
69
|
-
tabletDown: {
|
|
70
|
-
flexDirection: "column",
|
|
71
|
-
alignItems: "flex-start"
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
const License = _ref => {
|
|
76
|
-
let {
|
|
77
|
-
license
|
|
78
|
-
} = _ref;
|
|
79
|
-
if (typeof license === "string") return /*#__PURE__*/_jsx(Text, {
|
|
80
|
-
children: license
|
|
81
|
-
});
|
|
82
|
-
if (license.url?.length) {
|
|
83
|
-
return /*#__PURE__*/_jsx("a", {
|
|
84
|
-
href: license.url,
|
|
85
|
-
rel: "license",
|
|
86
|
-
children: license.abbreviation
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
return /*#__PURE__*/_jsx(Text, {
|
|
90
|
-
children: license.abbreviation
|
|
91
|
-
});
|
|
92
|
-
};
|
|
93
|
-
export const VideoListItem = _ref2 => {
|
|
94
|
-
let {
|
|
95
|
-
video,
|
|
96
|
-
onVideoSelect,
|
|
97
|
-
translations,
|
|
98
|
-
locale
|
|
99
|
-
} = _ref2;
|
|
100
|
-
const [isPreviewing, setIsPreviewing] = useState(false);
|
|
101
|
-
const license = video.custom_fields?.license ? getLicenseByNBTitle(video.custom_fields.license, locale) : "";
|
|
102
|
-
return /*#__PURE__*/_jsxs("li", {
|
|
103
|
-
children: [/*#__PURE__*/_jsxs(StyledListItemRoot, {
|
|
104
|
-
context: "list",
|
|
105
|
-
nonInteractive: true,
|
|
106
|
-
children: [/*#__PURE__*/_jsx(StyledImage, {
|
|
107
|
-
src: video.images?.thumbnail?.src,
|
|
108
|
-
alt: "",
|
|
109
|
-
variant: "rounded"
|
|
110
|
-
}), /*#__PURE__*/_jsxs(StyledListItemContent, {
|
|
111
|
-
children: [/*#__PURE__*/_jsxs(StyledVideoMeta, {
|
|
112
|
-
children: [/*#__PURE__*/_jsxs(Text, {
|
|
113
|
-
textStyle: "title.medium",
|
|
114
|
-
children: [video.name, video.projection === "equirectangular" && /*#__PURE__*/_jsx(PanoramaPhotosphere, {
|
|
115
|
-
"aria-hidden": false,
|
|
116
|
-
"aria-label": translations.is360Video,
|
|
117
|
-
title: translations.is360Video
|
|
118
|
-
})]
|
|
119
|
-
}), /*#__PURE__*/_jsx(Text, {
|
|
120
|
-
children: video.custom_fields?.licenseinfo ?? ""
|
|
121
|
-
}), /*#__PURE__*/_jsx(License, {
|
|
122
|
-
license: license
|
|
123
|
-
})]
|
|
124
|
-
}), /*#__PURE__*/_jsxs(ButtonWrapper, {
|
|
125
|
-
children: [/*#__PURE__*/_jsx(Button, {
|
|
126
|
-
variant: "secondary",
|
|
127
|
-
size: "small",
|
|
128
|
-
onClick: () => setIsPreviewing(p => !p),
|
|
129
|
-
"aria-expanded": isPreviewing,
|
|
130
|
-
"aria-controls": `video-preview-${video.id}`,
|
|
131
|
-
children: translations.previewVideo
|
|
132
|
-
}), /*#__PURE__*/_jsx(Button, {
|
|
133
|
-
size: "small",
|
|
134
|
-
onClick: () => onVideoSelect(video),
|
|
135
|
-
children: translations.addVideo
|
|
136
|
-
})]
|
|
137
|
-
})]
|
|
138
|
-
})]
|
|
139
|
-
}), !!isPreviewing && /*#__PURE__*/_jsxs(PreviewWrapper, {
|
|
140
|
-
id: `video-preview-${video.id}`,
|
|
141
|
-
children: [/*#__PURE__*/_jsx("div", {}), /*#__PURE__*/_jsx(PreviewIframe, {
|
|
142
|
-
title: video.name,
|
|
143
|
-
src: `//players.brightcove.net/${video.account_id}/BkLm8fT_default/index.html?videoId=${video.id}`,
|
|
144
|
-
allowFullScreen: true
|
|
145
|
-
}), /*#__PURE__*/_jsx(StyledIconButton, {
|
|
146
|
-
variant: "secondary",
|
|
147
|
-
"aria-label": translations.close,
|
|
148
|
-
title: translations.close,
|
|
149
|
-
onClick: () => setIsPreviewing(false),
|
|
150
|
-
children: /*#__PURE__*/_jsx(CloseLine, {})
|
|
151
|
-
})]
|
|
152
|
-
})]
|
|
153
|
-
});
|
|
154
|
-
};
|
package/es/VideoResultList.js
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2017-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
|
-
|
|
9
|
-
import { Text, Button, Spinner } from "@ndla/primitives";
|
|
10
|
-
import { styled } from "@ndla/styled-system/jsx";
|
|
11
|
-
import { VideoListItem } from "./VideoListItem";
|
|
12
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
const StyledList = styled("ul", {
|
|
14
|
-
base: {
|
|
15
|
-
listStyle: "none",
|
|
16
|
-
width: "100%"
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const StyledVideoResultWrapper = styled("div", {
|
|
20
|
-
base: {
|
|
21
|
-
display: "flex",
|
|
22
|
-
flexDirection: "column",
|
|
23
|
-
gap: "medium",
|
|
24
|
-
alignItems: "center"
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
export const VideoResultList = _ref => {
|
|
28
|
-
let {
|
|
29
|
-
videos,
|
|
30
|
-
existsMoreVideos,
|
|
31
|
-
isLoading,
|
|
32
|
-
translations,
|
|
33
|
-
locale,
|
|
34
|
-
onVideoSelect,
|
|
35
|
-
onShowMore
|
|
36
|
-
} = _ref;
|
|
37
|
-
return /*#__PURE__*/_jsxs(StyledVideoResultWrapper, {
|
|
38
|
-
children: [!videos.length && !isLoading ? /*#__PURE__*/_jsx(Text, {
|
|
39
|
-
children: translations.noResults
|
|
40
|
-
}) : /*#__PURE__*/_jsx(StyledList, {
|
|
41
|
-
children: videos.map((video, index) => /*#__PURE__*/_jsx(VideoListItem, {
|
|
42
|
-
video: video,
|
|
43
|
-
translations: translations,
|
|
44
|
-
locale: locale,
|
|
45
|
-
onVideoSelect: onVideoSelect
|
|
46
|
-
}, `${video.id}-${index}`))
|
|
47
|
-
}), !!isLoading && /*#__PURE__*/_jsx(Spinner, {}), !!existsMoreVideos && /*#__PURE__*/_jsx(Button, {
|
|
48
|
-
onClick: onShowMore,
|
|
49
|
-
children: translations.loadMoreVideos
|
|
50
|
-
})]
|
|
51
|
-
});
|
|
52
|
-
};
|
package/es/VideoSearch.js
DELETED
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2017-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
|
-
|
|
9
|
-
import { useCallback, useEffect, useState } from "react";
|
|
10
|
-
import { SearchLine } from "@ndla/icons";
|
|
11
|
-
import { IconButton, Input } from "@ndla/primitives";
|
|
12
|
-
import { styled } from "@ndla/styled-system/jsx";
|
|
13
|
-
import { VideoResultList } from "./VideoResultList";
|
|
14
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
|
-
const VideoSearchWrapper = styled("div", {
|
|
16
|
-
base: {
|
|
17
|
-
display: "flex",
|
|
18
|
-
flexDirection: "column",
|
|
19
|
-
gap: "xsmall"
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
const InputWrapper = styled("div", {
|
|
23
|
-
base: {
|
|
24
|
-
display: "flex",
|
|
25
|
-
gap: "xsmall"
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
const VIDEO_FETCH_LIMIT = 10;
|
|
29
|
-
export const VideoSearch = _ref => {
|
|
30
|
-
let {
|
|
31
|
-
onVideoSelect,
|
|
32
|
-
searchVideos,
|
|
33
|
-
onError,
|
|
34
|
-
translations,
|
|
35
|
-
locale
|
|
36
|
-
} = _ref;
|
|
37
|
-
const [query, setQuery] = useState("");
|
|
38
|
-
const [offset, setOffset] = useState(0);
|
|
39
|
-
const [videos, setVideos] = useState([]);
|
|
40
|
-
const [isLoading, setIsLoading] = useState(false);
|
|
41
|
-
const fetchVideos = useCallback(async (query, offset, isAppending) => {
|
|
42
|
-
setIsLoading(true);
|
|
43
|
-
try {
|
|
44
|
-
const results = await searchVideos({
|
|
45
|
-
query,
|
|
46
|
-
offset: offset,
|
|
47
|
-
limit: VIDEO_FETCH_LIMIT
|
|
48
|
-
});
|
|
49
|
-
setVideos(prev => isAppending ? prev.concat(results) : results);
|
|
50
|
-
} catch (e) {
|
|
51
|
-
onError(e);
|
|
52
|
-
}
|
|
53
|
-
setIsLoading(false);
|
|
54
|
-
}, [searchVideos, onError]);
|
|
55
|
-
useEffect(() => {
|
|
56
|
-
fetchVideos("", 0);
|
|
57
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
58
|
-
}, []);
|
|
59
|
-
const onSearch = useCallback(() => {
|
|
60
|
-
setOffset(0);
|
|
61
|
-
fetchVideos(query, 0);
|
|
62
|
-
}, [fetchVideos, query]);
|
|
63
|
-
const onShowMore = useCallback(() => {
|
|
64
|
-
const newOffset = offset + VIDEO_FETCH_LIMIT;
|
|
65
|
-
setOffset(newOffset);
|
|
66
|
-
fetchVideos(query, newOffset, true);
|
|
67
|
-
}, [fetchVideos, offset, query]);
|
|
68
|
-
const onQueryChange = useCallback(e => {
|
|
69
|
-
setQuery(e.target.value);
|
|
70
|
-
}, []);
|
|
71
|
-
const onEnter = e => {
|
|
72
|
-
if (e.key === "Enter") {
|
|
73
|
-
onSearch();
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
return /*#__PURE__*/_jsxs(VideoSearchWrapper, {
|
|
77
|
-
children: [/*#__PURE__*/_jsxs(InputWrapper, {
|
|
78
|
-
role: "search",
|
|
79
|
-
children: [/*#__PURE__*/_jsx(Input, {
|
|
80
|
-
type: "search",
|
|
81
|
-
placeholder: translations.searchPlaceholder,
|
|
82
|
-
value: query,
|
|
83
|
-
onChange: onQueryChange,
|
|
84
|
-
onKeyDown: onEnter
|
|
85
|
-
}), /*#__PURE__*/_jsx(IconButton, {
|
|
86
|
-
variant: "primary",
|
|
87
|
-
type: "submit",
|
|
88
|
-
"aria-label": translations.searchButtonTitle,
|
|
89
|
-
title: translations.searchButtonTitle,
|
|
90
|
-
onKeyDown: onEnter,
|
|
91
|
-
onClick: onSearch,
|
|
92
|
-
children: /*#__PURE__*/_jsx(SearchLine, {})
|
|
93
|
-
})]
|
|
94
|
-
}), /*#__PURE__*/_jsx(VideoResultList, {
|
|
95
|
-
videos: videos,
|
|
96
|
-
isLoading: isLoading,
|
|
97
|
-
translations: translations,
|
|
98
|
-
locale: locale,
|
|
99
|
-
onVideoSelect: onVideoSelect,
|
|
100
|
-
onShowMore: onShowMore,
|
|
101
|
-
existsMoreVideos: videos.length === offset + VIDEO_FETCH_LIMIT
|
|
102
|
-
})]
|
|
103
|
-
});
|
|
104
|
-
};
|
package/es/index.js
DELETED
package/lib/VideoListItem.js
DELETED
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.VideoListItem = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
var _icons = require("@ndla/icons");
|
|
9
|
-
var _licenses = require("@ndla/licenses");
|
|
10
|
-
var _primitives = require("@ndla/primitives");
|
|
11
|
-
var _jsx2 = require("@ndla/styled-system/jsx");
|
|
12
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
-
/**
|
|
14
|
-
* Copyright (c) 2024-present, NDLA.
|
|
15
|
-
*
|
|
16
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
17
|
-
* LICENSE file in the root directory of this source tree.
|
|
18
|
-
*
|
|
19
|
-
*/
|
|
20
|
-
|
|
21
|
-
const ButtonWrapper = (0, _jsx2.styled)("div", {
|
|
22
|
-
base: {
|
|
23
|
-
display: "flex",
|
|
24
|
-
gap: "small"
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
const PreviewIframe = (0, _jsx2.styled)("iframe", {
|
|
28
|
-
base: {
|
|
29
|
-
minHeight: "surface.xxsmall"
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
const PreviewWrapper = (0, _jsx2.styled)("div", {
|
|
33
|
-
base: {
|
|
34
|
-
display: "grid",
|
|
35
|
-
gap: "xsmall",
|
|
36
|
-
gridTemplateColumns: "repeat(3,1fr)",
|
|
37
|
-
padding: "small",
|
|
38
|
-
borderBlockEnd: "1px solid",
|
|
39
|
-
borderColor: "stroke.subtle"
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
const StyledImage = (0, _jsx2.styled)(_primitives.Image, {
|
|
43
|
-
base: {
|
|
44
|
-
minWidth: "surface.xxsmall",
|
|
45
|
-
height: "surface.4xsmall",
|
|
46
|
-
objectFit: "cover",
|
|
47
|
-
border: "1px solid",
|
|
48
|
-
borderColor: "stroke.subtle"
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
const StyledVideoMeta = (0, _jsx2.styled)("div", {
|
|
52
|
-
base: {
|
|
53
|
-
display: "flex",
|
|
54
|
-
flexDirection: "column",
|
|
55
|
-
gap: "xxsmall"
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
const StyledListItemContent = (0, _jsx2.styled)(_primitives.ListItemContent, {
|
|
59
|
-
base: {
|
|
60
|
-
alignItems: "flex-end",
|
|
61
|
-
tabletDown: {
|
|
62
|
-
flexDirection: "column",
|
|
63
|
-
alignItems: "flex-start"
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
const StyledIconButton = (0, _jsx2.styled)(_primitives.IconButton, {
|
|
68
|
-
base: {
|
|
69
|
-
marginLeft: "auto"
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
const StyledListItemRoot = (0, _jsx2.styled)(_primitives.ListItemRoot, {
|
|
73
|
-
base: {
|
|
74
|
-
paddingBlock: "medium",
|
|
75
|
-
tabletDown: {
|
|
76
|
-
flexDirection: "column",
|
|
77
|
-
alignItems: "flex-start"
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
const License = _ref => {
|
|
82
|
-
let {
|
|
83
|
-
license
|
|
84
|
-
} = _ref;
|
|
85
|
-
if (typeof license === "string") return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
|
|
86
|
-
children: license
|
|
87
|
-
});
|
|
88
|
-
if (license.url?.length) {
|
|
89
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
|
|
90
|
-
href: license.url,
|
|
91
|
-
rel: "license",
|
|
92
|
-
children: license.abbreviation
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
|
|
96
|
-
children: license.abbreviation
|
|
97
|
-
});
|
|
98
|
-
};
|
|
99
|
-
const VideoListItem = _ref2 => {
|
|
100
|
-
let {
|
|
101
|
-
video,
|
|
102
|
-
onVideoSelect,
|
|
103
|
-
translations,
|
|
104
|
-
locale
|
|
105
|
-
} = _ref2;
|
|
106
|
-
const [isPreviewing, setIsPreviewing] = (0, _react.useState)(false);
|
|
107
|
-
const license = video.custom_fields?.license ? (0, _licenses.getLicenseByNBTitle)(video.custom_fields.license, locale) : "";
|
|
108
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
|
|
109
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledListItemRoot, {
|
|
110
|
-
context: "list",
|
|
111
|
-
nonInteractive: true,
|
|
112
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
|
|
113
|
-
src: video.images?.thumbnail?.src,
|
|
114
|
-
alt: "",
|
|
115
|
-
variant: "rounded"
|
|
116
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledListItemContent, {
|
|
117
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledVideoMeta, {
|
|
118
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Text, {
|
|
119
|
-
textStyle: "title.medium",
|
|
120
|
-
children: [video.name, video.projection === "equirectangular" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PanoramaPhotosphere, {
|
|
121
|
-
"aria-hidden": false,
|
|
122
|
-
"aria-label": translations.is360Video,
|
|
123
|
-
title: translations.is360Video
|
|
124
|
-
})]
|
|
125
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
|
|
126
|
-
children: video.custom_fields?.licenseinfo ?? ""
|
|
127
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(License, {
|
|
128
|
-
license: license
|
|
129
|
-
})]
|
|
130
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonWrapper, {
|
|
131
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Button, {
|
|
132
|
-
variant: "secondary",
|
|
133
|
-
size: "small",
|
|
134
|
-
onClick: () => setIsPreviewing(p => !p),
|
|
135
|
-
"aria-expanded": isPreviewing,
|
|
136
|
-
"aria-controls": `video-preview-${video.id}`,
|
|
137
|
-
children: translations.previewVideo
|
|
138
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Button, {
|
|
139
|
-
size: "small",
|
|
140
|
-
onClick: () => onVideoSelect(video),
|
|
141
|
-
children: translations.addVideo
|
|
142
|
-
})]
|
|
143
|
-
})]
|
|
144
|
-
})]
|
|
145
|
-
}), !!isPreviewing && /*#__PURE__*/(0, _jsxRuntime.jsxs)(PreviewWrapper, {
|
|
146
|
-
id: `video-preview-${video.id}`,
|
|
147
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewIframe, {
|
|
148
|
-
title: video.name,
|
|
149
|
-
src: `//players.brightcove.net/${video.account_id}/BkLm8fT_default/index.html?videoId=${video.id}`,
|
|
150
|
-
allowFullScreen: true
|
|
151
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIconButton, {
|
|
152
|
-
variant: "secondary",
|
|
153
|
-
"aria-label": translations.close,
|
|
154
|
-
title: translations.close,
|
|
155
|
-
onClick: () => setIsPreviewing(false),
|
|
156
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseLine, {})
|
|
157
|
-
})]
|
|
158
|
-
})]
|
|
159
|
-
});
|
|
160
|
-
};
|
|
161
|
-
exports.VideoListItem = VideoListItem;
|
package/lib/VideoResultList.js
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.VideoResultList = void 0;
|
|
7
|
-
var _primitives = require("@ndla/primitives");
|
|
8
|
-
var _jsx2 = require("@ndla/styled-system/jsx");
|
|
9
|
-
var _VideoListItem = require("./VideoListItem");
|
|
10
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
-
/**
|
|
12
|
-
* Copyright (c) 2017-present, NDLA.
|
|
13
|
-
*
|
|
14
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
15
|
-
* LICENSE file in the root directory of this source tree.
|
|
16
|
-
*
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
const StyledList = (0, _jsx2.styled)("ul", {
|
|
20
|
-
base: {
|
|
21
|
-
listStyle: "none",
|
|
22
|
-
width: "100%"
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
const StyledVideoResultWrapper = (0, _jsx2.styled)("div", {
|
|
26
|
-
base: {
|
|
27
|
-
display: "flex",
|
|
28
|
-
flexDirection: "column",
|
|
29
|
-
gap: "medium",
|
|
30
|
-
alignItems: "center"
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
const VideoResultList = _ref => {
|
|
34
|
-
let {
|
|
35
|
-
videos,
|
|
36
|
-
existsMoreVideos,
|
|
37
|
-
isLoading,
|
|
38
|
-
translations,
|
|
39
|
-
locale,
|
|
40
|
-
onVideoSelect,
|
|
41
|
-
onShowMore
|
|
42
|
-
} = _ref;
|
|
43
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledVideoResultWrapper, {
|
|
44
|
-
children: [!videos.length && !isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
|
|
45
|
-
children: translations.noResults
|
|
46
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
|
|
47
|
-
children: videos.map((video, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoListItem.VideoListItem, {
|
|
48
|
-
video: video,
|
|
49
|
-
translations: translations,
|
|
50
|
-
locale: locale,
|
|
51
|
-
onVideoSelect: onVideoSelect
|
|
52
|
-
}, `${video.id}-${index}`))
|
|
53
|
-
}), !!isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Spinner, {}), !!existsMoreVideos && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Button, {
|
|
54
|
-
onClick: onShowMore,
|
|
55
|
-
children: translations.loadMoreVideos
|
|
56
|
-
})]
|
|
57
|
-
});
|
|
58
|
-
};
|
|
59
|
-
exports.VideoResultList = VideoResultList;
|
package/lib/VideoSearch.js
DELETED
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.VideoSearch = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
var _icons = require("@ndla/icons");
|
|
9
|
-
var _primitives = require("@ndla/primitives");
|
|
10
|
-
var _jsx2 = require("@ndla/styled-system/jsx");
|
|
11
|
-
var _VideoResultList = require("./VideoResultList");
|
|
12
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
-
/**
|
|
14
|
-
* Copyright (c) 2017-present, NDLA.
|
|
15
|
-
*
|
|
16
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
17
|
-
* LICENSE file in the root directory of this source tree.
|
|
18
|
-
*
|
|
19
|
-
*/
|
|
20
|
-
|
|
21
|
-
const VideoSearchWrapper = (0, _jsx2.styled)("div", {
|
|
22
|
-
base: {
|
|
23
|
-
display: "flex",
|
|
24
|
-
flexDirection: "column",
|
|
25
|
-
gap: "xsmall"
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
const InputWrapper = (0, _jsx2.styled)("div", {
|
|
29
|
-
base: {
|
|
30
|
-
display: "flex",
|
|
31
|
-
gap: "xsmall"
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
const VIDEO_FETCH_LIMIT = 10;
|
|
35
|
-
const VideoSearch = _ref => {
|
|
36
|
-
let {
|
|
37
|
-
onVideoSelect,
|
|
38
|
-
searchVideos,
|
|
39
|
-
onError,
|
|
40
|
-
translations,
|
|
41
|
-
locale
|
|
42
|
-
} = _ref;
|
|
43
|
-
const [query, setQuery] = (0, _react.useState)("");
|
|
44
|
-
const [offset, setOffset] = (0, _react.useState)(0);
|
|
45
|
-
const [videos, setVideos] = (0, _react.useState)([]);
|
|
46
|
-
const [isLoading, setIsLoading] = (0, _react.useState)(false);
|
|
47
|
-
const fetchVideos = (0, _react.useCallback)(async (query, offset, isAppending) => {
|
|
48
|
-
setIsLoading(true);
|
|
49
|
-
try {
|
|
50
|
-
const results = await searchVideos({
|
|
51
|
-
query,
|
|
52
|
-
offset: offset,
|
|
53
|
-
limit: VIDEO_FETCH_LIMIT
|
|
54
|
-
});
|
|
55
|
-
setVideos(prev => isAppending ? prev.concat(results) : results);
|
|
56
|
-
} catch (e) {
|
|
57
|
-
onError(e);
|
|
58
|
-
}
|
|
59
|
-
setIsLoading(false);
|
|
60
|
-
}, [searchVideos, onError]);
|
|
61
|
-
(0, _react.useEffect)(() => {
|
|
62
|
-
fetchVideos("", 0);
|
|
63
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
64
|
-
}, []);
|
|
65
|
-
const onSearch = (0, _react.useCallback)(() => {
|
|
66
|
-
setOffset(0);
|
|
67
|
-
fetchVideos(query, 0);
|
|
68
|
-
}, [fetchVideos, query]);
|
|
69
|
-
const onShowMore = (0, _react.useCallback)(() => {
|
|
70
|
-
const newOffset = offset + VIDEO_FETCH_LIMIT;
|
|
71
|
-
setOffset(newOffset);
|
|
72
|
-
fetchVideos(query, newOffset, true);
|
|
73
|
-
}, [fetchVideos, offset, query]);
|
|
74
|
-
const onQueryChange = (0, _react.useCallback)(e => {
|
|
75
|
-
setQuery(e.target.value);
|
|
76
|
-
}, []);
|
|
77
|
-
const onEnter = e => {
|
|
78
|
-
if (e.key === "Enter") {
|
|
79
|
-
onSearch();
|
|
80
|
-
}
|
|
81
|
-
};
|
|
82
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(VideoSearchWrapper, {
|
|
83
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(InputWrapper, {
|
|
84
|
-
role: "search",
|
|
85
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Input, {
|
|
86
|
-
type: "search",
|
|
87
|
-
placeholder: translations.searchPlaceholder,
|
|
88
|
-
value: query,
|
|
89
|
-
onChange: onQueryChange,
|
|
90
|
-
onKeyDown: onEnter
|
|
91
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.IconButton, {
|
|
92
|
-
variant: "primary",
|
|
93
|
-
type: "submit",
|
|
94
|
-
"aria-label": translations.searchButtonTitle,
|
|
95
|
-
title: translations.searchButtonTitle,
|
|
96
|
-
onKeyDown: onEnter,
|
|
97
|
-
onClick: onSearch,
|
|
98
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchLine, {})
|
|
99
|
-
})]
|
|
100
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoResultList.VideoResultList, {
|
|
101
|
-
videos: videos,
|
|
102
|
-
isLoading: isLoading,
|
|
103
|
-
translations: translations,
|
|
104
|
-
locale: locale,
|
|
105
|
-
onVideoSelect: onVideoSelect,
|
|
106
|
-
onShowMore: onShowMore,
|
|
107
|
-
existsMoreVideos: videos.length === offset + VIDEO_FETCH_LIMIT
|
|
108
|
-
})]
|
|
109
|
-
});
|
|
110
|
-
};
|
|
111
|
-
exports.VideoSearch = VideoSearch;
|
package/lib/index.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "VideoSearch", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _VideoSearch.VideoSearch;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
var _VideoSearch = require("./VideoSearch");
|