@ndla/ui 56.0.121-alpha.0 → 56.0.122-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.
Files changed (206) hide show
  1. package/lib/i18n/index.d.ts +1 -1
  2. package/lib/i18n/useComponentTranslations.d.ts +2 -1
  3. package/lib/index.d.ts +1 -1
  4. package/lib/locale/messages-en.d.ts +34 -0
  5. package/lib/locale/messages-nb.d.ts +34 -0
  6. package/lib/locale/messages-nn.d.ts +34 -0
  7. package/lib/locale/messages-se.d.ts +34 -0
  8. package/package.json +6 -5
  9. package/src/Article/ArticleByline.tsx +1 -1
  10. package/src/i18n/index.ts +1 -0
  11. package/src/i18n/useComponentTranslations.ts +36 -1
  12. package/src/index.ts +1 -0
  13. package/src/locale/messages-en.ts +34 -0
  14. package/src/locale/messages-nb.ts +34 -0
  15. package/src/locale/messages-nn.ts +34 -0
  16. package/src/locale/messages-se.ts +34 -0
  17. package/es/Article/Article.js +0 -199
  18. package/es/Article/ArticleByline.js +0 -182
  19. package/es/Article/ArticleFootNotes.js +0 -60
  20. package/es/Article/index.js +0 -11
  21. package/es/AudioPlayer/AudioPlayer.js +0 -218
  22. package/es/AudioPlayer/Controls.js +0 -332
  23. package/es/AudioPlayer/SpeechControl.js +0 -56
  24. package/es/AudioPlayer/index.js +0 -10
  25. package/es/Breadcrumb/Breadcrumb.js +0 -60
  26. package/es/Breadcrumb/BreadcrumbItem.js +0 -62
  27. package/es/Breadcrumb/HomeBreadcrumb.js +0 -77
  28. package/es/Breadcrumb/index.js +0 -11
  29. package/es/CampaignBlock/CampaignBlock.js +0 -180
  30. package/es/CampaignBlock/index.js +0 -9
  31. package/es/CodeBlock/CodeBlock.js +0 -35
  32. package/es/CodeBlock/codeLanguageOptions.js +0 -84
  33. package/es/CodeBlock/index.js +0 -10
  34. package/es/Concept/Concept.js +0 -72
  35. package/es/ContactBlock/ContactBlock.js +0 -199
  36. package/es/ContactBlock/index.js +0 -9
  37. package/es/ContentTypeBadge/ContentTypeBadge.js +0 -50
  38. package/es/ContentTypeBlockQuote/ContentTypeBlockQuote.js +0 -32
  39. package/es/ContentTypeFramedContent/ContentTypeFramedContent.js +0 -32
  40. package/es/ContentTypeHero/ContentTypeHero.js +0 -50
  41. package/es/ContentTypeHero/index.js +0 -9
  42. package/es/CopyParagraphButton/CopyParagraphButton.js +0 -83
  43. package/es/CopyParagraphButton/index.js +0 -11
  44. package/es/Embed/AudioEmbed.js +0 -76
  45. package/es/Embed/BrightcoveEmbed.js +0 -133
  46. package/es/Embed/CodeEmbed.js +0 -79
  47. package/es/Embed/ConceptEmbed.js +0 -123
  48. package/es/Embed/ConceptInlineTriggerButton.js +0 -45
  49. package/es/Embed/ContentLinkEmbed.js +0 -51
  50. package/es/Embed/CopyrightEmbed.js +0 -33
  51. package/es/Embed/EmbedErrorPlaceholder.js +0 -58
  52. package/es/Embed/EmbedWrapper.js +0 -51
  53. package/es/Embed/ExternalEmbed.js +0 -74
  54. package/es/Embed/FootnoteEmbed.js +0 -44
  55. package/es/Embed/GlossEmbed.js +0 -80
  56. package/es/Embed/H5pEmbed.js +0 -61
  57. package/es/Embed/IframeEmbed.js +0 -93
  58. package/es/Embed/ImageEmbed.js +0 -238
  59. package/es/Embed/InlineTriggerButton.js +0 -37
  60. package/es/Embed/RelatedContentEmbed.js +0 -55
  61. package/es/Embed/UnknownEmbed.js +0 -31
  62. package/es/Embed/UuDisclaimerEmbed.js +0 -88
  63. package/es/Embed/index.js +0 -25
  64. package/es/Embed/types.js +0 -1
  65. package/es/ErrorMessage/ErrorMessage.js +0 -95
  66. package/es/ErrorMessage/index.js +0 -10
  67. package/es/FactBox/FactBox.js +0 -177
  68. package/es/FactBox/index.js +0 -10
  69. package/es/FileList/File.js +0 -101
  70. package/es/FileList/FileList.js +0 -47
  71. package/es/FileList/PdfFile.js +0 -50
  72. package/es/FileList/index.js +0 -11
  73. package/es/Gloss/Gloss.js +0 -175
  74. package/es/Gloss/GlossExample.js +0 -64
  75. package/es/Gloss/index.js +0 -10
  76. package/es/Grid/Grid.js +0 -94
  77. package/es/Grid/GridParallaxItem.js +0 -32
  78. package/es/Grid/index.js +0 -10
  79. package/es/KeyFigure/KeyFigure.js +0 -63
  80. package/es/KeyFigure/index.js +0 -9
  81. package/es/LicenseByline/EmbedByline.js +0 -212
  82. package/es/LicenseByline/LicenseLink.js +0 -56
  83. package/es/LicenseByline/index.js +0 -10
  84. package/es/LinkBlock/LinkBlock.js +0 -103
  85. package/es/LinkBlock/LinkBlockSection.js +0 -35
  86. package/es/LinkBlock/index.js +0 -10
  87. package/es/Pitch/Pitch.js +0 -83
  88. package/es/Pitch/index.js +0 -9
  89. package/es/RelatedArticleList/RelatedArticleList.js +0 -135
  90. package/es/RelatedArticleList/index.js +0 -11
  91. package/es/ResourceBox/ResourceBox.js +0 -99
  92. package/es/ResourceBox/index.js +0 -10
  93. package/es/TagSelector/TagSelector.js +0 -143
  94. package/es/ZendeskButton/ZendeskButton.js +0 -55
  95. package/es/i18n/formatNestedMessages.js +0 -25
  96. package/es/i18n/i18n.js +0 -35
  97. package/es/i18n/index.js +0 -11
  98. package/es/i18n/useComponentTranslations.js +0 -164
  99. package/es/index.js +0 -45
  100. package/es/locale/messages-en.js +0 -428
  101. package/es/locale/messages-nb.js +0 -428
  102. package/es/locale/messages-nn.js +0 -428
  103. package/es/locale/messages-se.js +0 -428
  104. package/es/model/ContentType.js +0 -68
  105. package/es/model/SubjectCategories.js +0 -12
  106. package/es/model/SubjectTypes.js +0 -11
  107. package/es/model/WordClass.js +0 -45
  108. package/es/model/index.js +0 -21
  109. package/es/types.js +0 -1
  110. package/es/utils/licenseAttributes.js +0 -18
  111. package/es/utils/relativeUrl.js +0 -37
  112. package/lib/Article/Article.js +0 -207
  113. package/lib/Article/ArticleByline.js +0 -189
  114. package/lib/Article/ArticleFootNotes.js +0 -67
  115. package/lib/Article/index.js +0 -68
  116. package/lib/AudioPlayer/AudioPlayer.js +0 -224
  117. package/lib/AudioPlayer/Controls.js +0 -338
  118. package/lib/AudioPlayer/SpeechControl.js +0 -62
  119. package/lib/AudioPlayer/index.js +0 -16
  120. package/lib/Breadcrumb/Breadcrumb.js +0 -67
  121. package/lib/Breadcrumb/BreadcrumbItem.js +0 -68
  122. package/lib/Breadcrumb/HomeBreadcrumb.js +0 -84
  123. package/lib/Breadcrumb/index.js +0 -23
  124. package/lib/CampaignBlock/CampaignBlock.js +0 -187
  125. package/lib/CampaignBlock/index.js +0 -13
  126. package/lib/CodeBlock/CodeBlock.js +0 -41
  127. package/lib/CodeBlock/codeLanguageOptions.js +0 -90
  128. package/lib/CodeBlock/index.js +0 -20
  129. package/lib/Concept/Concept.js +0 -78
  130. package/lib/ContactBlock/ContactBlock.js +0 -206
  131. package/lib/ContactBlock/index.js +0 -18
  132. package/lib/ContentTypeBadge/ContentTypeBadge.js +0 -57
  133. package/lib/ContentTypeBlockQuote/ContentTypeBlockQuote.js +0 -38
  134. package/lib/ContentTypeFramedContent/ContentTypeFramedContent.js +0 -38
  135. package/lib/ContentTypeHero/ContentTypeHero.js +0 -57
  136. package/lib/ContentTypeHero/index.js +0 -12
  137. package/lib/CopyParagraphButton/CopyParagraphButton.js +0 -89
  138. package/lib/CopyParagraphButton/index.js +0 -22
  139. package/lib/Embed/AudioEmbed.js +0 -84
  140. package/lib/Embed/BrightcoveEmbed.js +0 -142
  141. package/lib/Embed/CodeEmbed.js +0 -86
  142. package/lib/Embed/ConceptEmbed.js +0 -131
  143. package/lib/Embed/ConceptInlineTriggerButton.js +0 -51
  144. package/lib/Embed/ContentLinkEmbed.js +0 -57
  145. package/lib/Embed/CopyrightEmbed.js +0 -39
  146. package/lib/Embed/EmbedErrorPlaceholder.js +0 -64
  147. package/lib/Embed/EmbedWrapper.js +0 -57
  148. package/lib/Embed/ExternalEmbed.js +0 -81
  149. package/lib/Embed/FootnoteEmbed.js +0 -50
  150. package/lib/Embed/GlossEmbed.js +0 -88
  151. package/lib/Embed/H5pEmbed.js +0 -68
  152. package/lib/Embed/IframeEmbed.js +0 -100
  153. package/lib/Embed/ImageEmbed.js +0 -248
  154. package/lib/Embed/InlineTriggerButton.js +0 -43
  155. package/lib/Embed/RelatedContentEmbed.js +0 -61
  156. package/lib/Embed/UnknownEmbed.js +0 -37
  157. package/lib/Embed/UuDisclaimerEmbed.js +0 -94
  158. package/lib/Embed/index.js +0 -150
  159. package/lib/Embed/types.js +0 -5
  160. package/lib/ErrorMessage/ErrorMessage.js +0 -101
  161. package/lib/ErrorMessage/index.js +0 -16
  162. package/lib/FactBox/FactBox.js +0 -184
  163. package/lib/FactBox/index.js +0 -16
  164. package/lib/FileList/File.js +0 -108
  165. package/lib/FileList/FileList.js +0 -54
  166. package/lib/FileList/PdfFile.js +0 -57
  167. package/lib/FileList/index.js +0 -44
  168. package/lib/Gloss/Gloss.js +0 -181
  169. package/lib/Gloss/GlossExample.js +0 -70
  170. package/lib/Gloss/index.js +0 -20
  171. package/lib/Grid/Grid.js +0 -101
  172. package/lib/Grid/GridParallaxItem.js +0 -39
  173. package/lib/Grid/index.js +0 -19
  174. package/lib/KeyFigure/KeyFigure.js +0 -70
  175. package/lib/KeyFigure/index.js +0 -13
  176. package/lib/LicenseByline/EmbedByline.js +0 -220
  177. package/lib/LicenseByline/LicenseLink.js +0 -62
  178. package/lib/LicenseByline/index.js +0 -19
  179. package/lib/LinkBlock/LinkBlock.js +0 -110
  180. package/lib/LinkBlock/LinkBlockSection.js +0 -41
  181. package/lib/LinkBlock/index.js +0 -20
  182. package/lib/Pitch/Pitch.js +0 -91
  183. package/lib/Pitch/index.js +0 -12
  184. package/lib/RelatedArticleList/RelatedArticleList.js +0 -143
  185. package/lib/RelatedArticleList/index.js +0 -21
  186. package/lib/ResourceBox/ResourceBox.js +0 -106
  187. package/lib/ResourceBox/index.js +0 -13
  188. package/lib/TagSelector/TagSelector.js +0 -150
  189. package/lib/ZendeskButton/ZendeskButton.js +0 -61
  190. package/lib/i18n/formatNestedMessages.js +0 -32
  191. package/lib/i18n/i18n.js +0 -41
  192. package/lib/i18n/index.js +0 -62
  193. package/lib/i18n/useComponentTranslations.js +0 -176
  194. package/lib/index.js +0 -593
  195. package/lib/locale/messages-en.js +0 -435
  196. package/lib/locale/messages-nb.js +0 -435
  197. package/lib/locale/messages-nn.js +0 -435
  198. package/lib/locale/messages-se.js +0 -435
  199. package/lib/model/ContentType.js +0 -74
  200. package/lib/model/SubjectCategories.js +0 -18
  201. package/lib/model/SubjectTypes.js +0 -17
  202. package/lib/model/WordClass.js +0 -51
  203. package/lib/model/index.js +0 -28
  204. package/lib/types.js +0 -5
  205. package/lib/utils/licenseAttributes.js +0 -25
  206. package/lib/utils/relativeUrl.js +0 -44
@@ -1,224 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _react = require("react");
8
- var _reactI18next = require("react-i18next");
9
- var _primitives = require("@ndla/primitives");
10
- var _safelink = require("@ndla/safelink");
11
- var _jsx2 = require("@ndla/styled-system/jsx");
12
- var _Controls = _interopRequireDefault(require("./Controls"));
13
- var _SpeechControl = _interopRequireDefault(require("./SpeechControl"));
14
- var _jsxRuntime = require("react/jsx-runtime");
15
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
16
- /**
17
- * Copyright (c) 2017-present, NDLA.
18
- *
19
- * This source code is licensed under the GPLv3 license found in the
20
- * LICENSE file in the root directory of this source tree.
21
- *
22
- */
23
-
24
- // TODO: Could the audio metadata be more tightly coupled to the audio player?
25
- const AudioPlayerWrapper = (0, _jsx2.styled)("div", {
26
- base: {
27
- border: "1px solid",
28
- borderColor: "stroke.default",
29
- borderRadius: "xsmall",
30
- boxShadow: "full",
31
- marginBlockEnd: "4xsmall",
32
- overflow: "hidden"
33
- }
34
- });
35
- const InfoWrapper = (0, _jsx2.styled)("div", {
36
- base: {
37
- display: "flex",
38
- tabletWideDown: {
39
- display: "block"
40
- }
41
- }
42
- });
43
- const ImageWrapper = (0, _jsx2.styled)("div", {
44
- base: {
45
- display: "flex",
46
- alignItems: "center",
47
- flex: "1 0 auto",
48
- width: "surface.4xsmall",
49
- height: "surface.4xsmall",
50
- overflow: "hidden",
51
- "& img": {
52
- width: "100%",
53
- height: "100%",
54
- objectFit: "cover"
55
- },
56
- desktop: {
57
- width: "260px",
58
- height: "260px"
59
- },
60
- tabletWideDown: {
61
- maxHeight: "surface.small",
62
- maxWidth: "100%",
63
- width: "100%",
64
- height: "auto"
65
- }
66
- }
67
- });
68
- const TextWrapper = (0, _jsx2.styled)("div", {
69
- base: {
70
- display: "flex",
71
- alignItems: "flex-start",
72
- flexDirection: "column",
73
- gap: "xsmall",
74
- padding: "xsmall",
75
- width: "100%",
76
- "&[data-has-image='true']": {
77
- tablet: {
78
- paddingBlock: "xsmall",
79
- paddingInline: "medium"
80
- }
81
- }
82
- }
83
- });
84
- const TitleWrapper = (0, _jsx2.styled)("div", {
85
- base: {
86
- display: "flex",
87
- flexDirection: "column",
88
- gap: "xsmall",
89
- fontFamily: "sans",
90
- tabletWide: {
91
- width: "100%",
92
- flexDirection: "row",
93
- justifyContent: "space-between"
94
- }
95
- }
96
- });
97
- const TextVersionWrapper = (0, _jsx2.styled)("div", {
98
- base: {
99
- display: "flex",
100
- flexDirection: "column",
101
- gap: "xsmall",
102
- borderBlockStart: "1px solid",
103
- borderColor: "stroke.default",
104
- paddingBlock: "medium",
105
- paddingInline: "xsmall",
106
- tablet: {
107
- paddingInline: "medium"
108
- }
109
- }
110
- });
111
- const TextVersionText = (0, _jsx2.styled)("div", {
112
- base: {
113
- maxWidth: "surface.xlarge",
114
- "& span > *": {
115
- whiteSpace: "pre-wrap"
116
- },
117
- "& p:not(:first-child):not(:last-child)": {
118
- marginBlock: "small"
119
- },
120
- '& p[data-align="center"]': {
121
- textAlign: "center"
122
- },
123
- '& p:has(span[dir="rtl"])': {
124
- direction: "rtl"
125
- }
126
- }
127
- });
128
- const TextVersionButton = (0, _jsx2.styled)(_primitives.Button, {
129
- base: {
130
- alignSelf: "flex-start"
131
- }
132
- });
133
- const ShowMoreButton = (0, _jsx2.styled)(_primitives.Button, {
134
- base: {
135
- marginInlineStart: "3xsmall"
136
- }
137
- });
138
- const DESCRIPTION_MAX_LENGTH = 200;
139
- const AudioPlayer = _ref => {
140
- let {
141
- src,
142
- title,
143
- subtitle,
144
- speech,
145
- description,
146
- img,
147
- textVersion
148
- } = _ref;
149
- const {
150
- t
151
- } = (0, _reactI18next.useTranslation)();
152
- const [showTextVersion, setShowTextVersion] = (0, _react.useState)(false);
153
- const [showFullDescription, setShowFullDescription] = (0, _react.useState)(false);
154
- const truncatedDescription = (0, _react.useMemo)(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);
155
- const textDescriptionId = (0, _react.useId)();
156
- if (speech) {
157
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeechControl.default, {
158
- src: src,
159
- title: title
160
- });
161
- }
162
- const toggleTextVersion = () => {
163
- setShowTextVersion(curr => !curr);
164
- };
165
- const textVersionButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(TextVersionButton, {
166
- variant: "secondary",
167
- "aria-expanded": showTextVersion,
168
- "aria-controls": textDescriptionId,
169
- size: "small",
170
- onClick: toggleTextVersion,
171
- children: t(showTextVersion ? "audio.textVersion.close" : "audio.textVersion.heading")
172
- });
173
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AudioPlayerWrapper, {
174
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(InfoWrapper, {
175
- children: [!!img && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageWrapper, {
176
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
177
- src: img.url,
178
- alt: img.alt
179
- })
180
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextWrapper, {
181
- "data-has-image": !!img,
182
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TitleWrapper, {
183
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
184
- children: [subtitle?.url ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_safelink.SafeLink, {
185
- to: subtitle.url,
186
- children: subtitle.title
187
- }) : subtitle?.title, /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
188
- asChild: true,
189
- consumeCss: true,
190
- textStyle: "title.large",
191
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
192
- children: title
193
- })
194
- })]
195
- }), !!textVersion && !img && textVersionButton]
196
- }), !!description && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Text, {
197
- textStyle: "body.medium",
198
- children: [showFullDescription || description.length < DESCRIPTION_MAX_LENGTH ? description : `${truncatedDescription}...`, description.length > DESCRIPTION_MAX_LENGTH && /*#__PURE__*/(0, _jsxRuntime.jsx)(ShowMoreButton, {
199
- variant: "link",
200
- onClick: () => setShowFullDescription(p => !p),
201
- children: t(`audio.${showFullDescription ? "readLessDescriptionLabel" : "readMoreDescriptionLabel"}`)
202
- })]
203
- }), !!textVersion && !!img && textVersionButton]
204
- })]
205
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Controls.default, {
206
- src: src,
207
- title: title
208
- }), !!textVersion && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextVersionWrapper, {
209
- id: textDescriptionId,
210
- hidden: !showTextVersion,
211
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
212
- asChild: true,
213
- textStyle: "title.medium",
214
- consumeCss: true,
215
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
216
- children: t("audio.textVersion.heading")
217
- })
218
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextVersionText, {
219
- children: textVersion
220
- })]
221
- })]
222
- });
223
- };
224
- var _default = exports.default = AudioPlayer;
@@ -1,338 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _react = require("react");
8
- var _reactI18next = require("react-i18next");
9
- var _react2 = require("@ark-ui/react");
10
- var _icons = require("@ndla/icons");
11
- var _primitives = require("@ndla/primitives");
12
- var _jsx2 = require("@ndla/styled-system/jsx");
13
- var _jsxRuntime = require("react/jsx-runtime");
14
- /**
15
- * Copyright (c) 2021-present, NDLA.
16
- *
17
- * This source code is licensed under the GPLv3 license found in the
18
- * LICENSE file in the root directory of this source tree.
19
- *
20
- */
21
-
22
- const ControlsWrapper = (0, _jsx2.styled)("div", {
23
- base: {
24
- borderBlockStart: "1px solid",
25
- borderColor: "stroke.default",
26
- borderBottomRadius: "xsmall",
27
- display: "flex",
28
- alignItems: "center",
29
- justifyContent: "center",
30
- background: "background.default",
31
- gap: "xsmall",
32
- paddingBlock: "xsmall",
33
- paddingInline: "medium",
34
- tabletWideDown: {
35
- display: "grid",
36
- paddingBlock: "xsmall",
37
- paddingInline: "xsmall",
38
- gridTemplateColumns: "1fr repeat(5, auto) 1fr",
39
- gridTemplateAreas: `
40
- "track track track track track track track"
41
- ". speed backwards play forwards volume ."
42
- `
43
- },
44
- mobileWideDown: {
45
- columnGap: "3xsmall"
46
- }
47
- }
48
- });
49
- const PlayButton = (0, _jsx2.styled)(_primitives.IconButton, {
50
- base: {
51
- gridArea: "play"
52
- }
53
- });
54
- const Forward15SecButton = (0, _jsx2.styled)(_primitives.IconButton, {
55
- base: {
56
- gridArea: "forwards"
57
- }
58
- });
59
- const Back15SecButton = (0, _jsx2.styled)(_primitives.IconButton, {
60
- base: {
61
- gridArea: "backwards"
62
- }
63
- });
64
- const ProgressWrapper = (0, _jsx2.styled)("div", {
65
- base: {
66
- flex: "1",
67
- display: "flex",
68
- alignItems: "center",
69
- gap: "xxsmall",
70
- gridArea: "track",
71
- paddingBlock: "xsmall",
72
- mobileDown: {
73
- paddingInline: "xsmall"
74
- }
75
- }
76
- });
77
- const StyledText = (0, _jsx2.styled)(_primitives.Text, {
78
- base: {
79
- minWidth: "xxlarge",
80
- flexShrink: "0",
81
- textAlign: "center"
82
- }
83
- });
84
- const VolumeButton = (0, _jsx2.styled)(_primitives.IconButton, {
85
- base: {
86
- gridArea: "volume"
87
- }
88
- });
89
- const SpeedButton = (0, _jsx2.styled)(_primitives.Button, {
90
- base: {
91
- paddingBlock: "auto",
92
- paddingInline: "auto",
93
- maxWidth: "xxlarge",
94
- maxHeight: "xxlarge",
95
- minWidth: "xxlarge",
96
- minHeight: "xxlarge",
97
- "& span": {
98
- flex: "1"
99
- }
100
- }
101
- });
102
- const StyledSelectRoot = (0, _jsx2.styled)(_primitives.SelectRoot, {
103
- base: {
104
- gridArea: "speed"
105
- }
106
- });
107
- const StyledSliderControl = (0, _jsx2.styled)(_primitives.SliderControl, {
108
- base: {
109
- height: "surface.3xsmall",
110
- minWidth: "small"
111
- }
112
- });
113
- const StyledPopoverContent = (0, _jsx2.styled)(_primitives.PopoverContent, {
114
- base: {
115
- paddingInline: "small"
116
- }
117
- });
118
- const formatTime = seconds => {
119
- const minutes = Math.floor(seconds / 60);
120
- const currentSeconds = seconds % 60;
121
- const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;
122
- return `${minutes}:${formattedSeconds}`;
123
- };
124
- const speedValues = (0, _react2.createListCollection)({
125
- items: ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"]
126
- });
127
- const Controls = _ref => {
128
- let {
129
- src,
130
- title
131
- } = _ref;
132
- const {
133
- t
134
- } = (0, _reactI18next.useTranslation)();
135
- const [speedValue, setSpeedValue] = (0, _react.useState)(1);
136
- const [volumeValue, setVolumeValue] = (0, _react.useState)(100);
137
- const [currentTime, setCurrentTime] = (0, _react.useState)(0);
138
- const [remainingTime, setRemainingTime] = (0, _react.useState)(0);
139
- const [playing, setPlaying] = (0, _react.useState)(false);
140
- const audioRef = (0, _react.useRef)(null);
141
- (0, _react.useEffect)(() => {
142
- if (audioRef.current) {
143
- audioRef.current.playbackRate = speedValue;
144
- }
145
- }, [speedValue]);
146
- (0, _react.useEffect)(() => {
147
- if (audioRef.current) {
148
- const audioElement = audioRef.current;
149
- const handleTimeUpdate = () => {
150
- const {
151
- currentTime,
152
- duration
153
- } = audioElement;
154
- setCurrentTime(Math.round(currentTime));
155
- setRemainingTime(Math.round(duration - currentTime));
156
- };
157
- const handleLoadedMetaData = () => {
158
- const {
159
- currentTime,
160
- duration
161
- } = audioElement;
162
- setCurrentTime(Math.round(currentTime));
163
- setRemainingTime(Math.round(duration - currentTime));
164
- };
165
- const handleTimeEnded = () => {
166
- setPlaying(false);
167
- };
168
- audioElement.addEventListener("timeupdate", handleTimeUpdate);
169
- audioElement.addEventListener("loadedmetadata", handleLoadedMetaData);
170
- audioElement.addEventListener("ended", handleTimeEnded);
171
- return () => {
172
- audioElement.removeEventListener("timeupdate", handleTimeUpdate);
173
- audioElement.removeEventListener("loadedmetadata", handleLoadedMetaData);
174
- audioElement.removeEventListener("ended", handleTimeEnded);
175
- };
176
- }
177
- }, []);
178
- const togglePlay = () => {
179
- if (audioRef.current) {
180
- const audioElement = audioRef.current;
181
- if (!playing) {
182
- audioElement.play();
183
- } else {
184
- audioElement.pause();
185
- }
186
- setPlaying(!playing);
187
- }
188
- };
189
- const onSeekSeconds = seconds => {
190
- if (audioRef.current) {
191
- audioRef.current.currentTime += seconds;
192
- }
193
- };
194
- const handleSliderChange = details => {
195
- const newValue = details.value[0];
196
- if (audioRef.current && newValue != null && !isNaN(newValue)) {
197
- audioRef.current.currentTime = details.value[0];
198
- }
199
- };
200
- const handleVolumeSliderChange = details => {
201
- if (audioRef.current) {
202
- audioRef.current.volume = details.value[0] / 100;
203
- setVolumeValue(details.value[0]);
204
- }
205
- };
206
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
207
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("audio", {
208
- ref: audioRef,
209
- src: src,
210
- title: title,
211
- preload: "metadata"
212
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ControlsWrapper, {
213
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Back15SecButton, {
214
- variant: "tertiary",
215
- title: t("audio.controls.rewind15sec"),
216
- "aria-label": t("audio.controls.rewind15sec"),
217
- onClick: () => onSeekSeconds(-15),
218
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Replay15Line, {})
219
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PlayButton, {
220
- "aria-label": t(playing ? t("audio.pause") : t("audio.play")),
221
- variant: "primary",
222
- onClick: togglePlay,
223
- children: playing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PauseLine, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlayFill, {})
224
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Forward15SecButton, {
225
- variant: "tertiary",
226
- title: t("audio.controls.forward15sec"),
227
- "aria-label": t("audio.controls.forward15sec"),
228
- onClick: () => onSeekSeconds(15),
229
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Forward15Line, {})
230
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ProgressWrapper, {
231
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
232
- textStyle: "label.medium",
233
- asChild: true,
234
- consumeCss: true,
235
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
236
- children: formatTime(currentTime)
237
- })
238
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SliderRoot, {
239
- value: [audioRef.current?.currentTime ?? 0],
240
- defaultValue: [0],
241
- step: 1,
242
- max: Math.round(audioRef.current?.duration ?? 0),
243
- onValueChange: handleSliderChange,
244
- getAriaValueText: value => t("audio.valueText", {
245
- start: formatTime(Math.round(value.value)),
246
- end: formatTime(Math.round(audioRef.current?.duration ?? 0))
247
- }),
248
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderLabel, {
249
- srOnly: true,
250
- children: t("audio.progressBar")
251
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SliderControl, {
252
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderTrack, {
253
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderRange, {})
254
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderThumb, {
255
- index: 0,
256
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderHiddenInput, {})
257
- })]
258
- })]
259
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
260
- textStyle: "label.medium",
261
- asChild: true,
262
- consumeCss: true,
263
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
264
- children: ["-", formatTime(remainingTime)]
265
- })
266
- })]
267
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.FieldRoot, {
268
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSelectRoot, {
269
- collection: speedValues,
270
- value: [speedValue.toString()],
271
- onValueChange: details => setSpeedValue(parseFloat(details.value[0])),
272
- positioning: {
273
- placement: "top"
274
- },
275
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectLabel, {
276
- srOnly: true,
277
- children: t("audio.controls.selectSpeed")
278
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectControl, {
279
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectTrigger, {
280
- asChild: true,
281
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedButton, {
282
- variant: "tertiary",
283
- title: t("audio.controls.selectSpeed"),
284
- "aria-label": t("audio.controls.selectSpeed"),
285
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
286
- children: `${speedValue}x`
287
- })
288
- })
289
- })
290
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectContent, {
291
- children: speedValues.items.map(speed => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SelectItem, {
292
- item: speed,
293
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SelectItemText, {
294
- children: [speed, "x"]
295
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectItemIndicator, {
296
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckLine, {})
297
- })]
298
- }, speed))
299
- })]
300
- })
301
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.PopoverRoot, {
302
- positioning: {
303
- placement: "top"
304
- },
305
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverTrigger, {
306
- asChild: true,
307
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(VolumeButton, {
308
- variant: "tertiary",
309
- "aria-label": t("audio.controls.adjustVolume"),
310
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.VolumeUpFill, {})
311
- })
312
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopoverContent, {
313
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SliderRoot, {
314
- orientation: "vertical",
315
- value: [volumeValue],
316
- min: 0,
317
- max: 100,
318
- defaultValue: [100],
319
- step: 1,
320
- onValueChange: handleVolumeSliderChange,
321
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderLabel, {
322
- srOnly: true,
323
- children: t("audio.controls.adjustVolume")
324
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSliderControl, {
325
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderTrack, {
326
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderRange, {})
327
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderThumb, {
328
- index: 0,
329
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderHiddenInput, {})
330
- })]
331
- })]
332
- })
333
- })]
334
- })]
335
- })]
336
- });
337
- };
338
- var _default = exports.default = Controls;
@@ -1,62 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _react = require("react");
8
- var _reactI18next = require("react-i18next");
9
- var _icons = require("@ndla/icons");
10
- var _primitives = require("@ndla/primitives");
11
- var _jsxRuntime = require("react/jsx-runtime");
12
- /**
13
- * Copyright (c) 2021-present, NDLA.
14
- *
15
- * This source code is licensed under the GPLv3 license found in the
16
- * LICENSE file in the root directory of this source tree.
17
- *
18
- */
19
-
20
- const SpeechControl = _ref => {
21
- let {
22
- src,
23
- title,
24
- type = "audio"
25
- } = _ref;
26
- const {
27
- t
28
- } = (0, _reactI18next.useTranslation)();
29
- const audioRef = (0, _react.useRef)(null);
30
- const togglePlay = () => {
31
- if (audioRef.current) {
32
- const audioElement = audioRef.current;
33
- if (audioElement.paused) {
34
- audioElement.play();
35
- } else {
36
- audioElement.pause();
37
- }
38
- }
39
- };
40
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
41
- "data-embed-type": "speech",
42
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("audio", {
43
- ref: audioRef,
44
- src: src,
45
- title: title,
46
- preload: "metadata"
47
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.TooltipRoot, {
48
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TooltipTrigger, {
49
- asChild: true,
50
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.IconButton, {
51
- variant: "tertiary",
52
- "aria-label": t(`${type}.play`),
53
- onClick: togglePlay,
54
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.VolumeUpFill, {})
55
- })
56
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TooltipContent, {
57
- children: t(`${type}.play`)
58
- })]
59
- })]
60
- });
61
- };
62
- var _default = exports.default = SpeechControl;
@@ -1,16 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _AudioPlayer = _interopRequireDefault(require("./AudioPlayer"));
8
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
9
- /**
10
- * Copyright (c) 2021-present, NDLA.
11
- *
12
- * This source code is licensed under the GPLv3 license found in the
13
- * LICENSE file in the root directory of this source tree.
14
- *
15
- */
16
- var _default = exports.default = _AudioPlayer.default;