@reykjavik/hanna-react 0.10.91 → 0.10.92

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 (8) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/ReadSpeakerPlayer.d.ts +64 -0
  3. package/ReadSpeakerPlayer.js +78 -0
  4. package/esm/ReadSpeakerPlayer.d.ts +64 -0
  5. package/esm/ReadSpeakerPlayer.js +72 -0
  6. package/esm/index.d.ts +1 -0
  7. package/index.d.ts +1 -0
  8. package/package.json +8 -4
package/CHANGELOG.md CHANGED
@@ -4,6 +4,13 @@
4
4
 
5
5
  - ... <!-- Add new lines here. -->
6
6
 
7
+ ## 0.10.92
8
+
9
+ _2023-06-06_
10
+
11
+ - feat: Add component `ReadSpeakerPlayer` and a `stopReading` helper
12
+ - fix: Update dependencies for minor esm and `Modal`-related bugfixes
13
+
7
14
  ## 0.10.90 – 0.10.91
8
15
 
9
16
  _2023-06-01_
package/ReadSpeakerPlayer.d.ts ADDED
@@ -0,0 +1,64 @@
1
+ import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
2
+ import { HTMLProps } from './utils.js';
3
+ export type ReadSpeakerPlayerI18n = {
4
+ linkText: string;
5
+ linkLabel?: string;
6
+ };
7
+ export declare const defaultReadSpeakerPlayerTexts: DefaultTexts<ReadSpeakerPlayerI18n>;
8
+ export type ReadSpeakerPlayerProps = {
9
+ /**
10
+ * Your ReadSpeaker account/customer ID
11
+ *
12
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#customer-id
13
+ */
14
+ customerId?: string;
15
+ /**
16
+ * Reading language/locale for the ReadSpeaker player.
17
+ *
18
+ * If you don't specify a `lang`, the player will try to auto-detect
19
+ * the language of the page, and pick a default `voice` for that language.
20
+ *
21
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-language
22
+ */
23
+ lang?: Lowercase<string>;
24
+ /**
25
+ * Reading voice for the ReadSpeaker player.
26
+ *
27
+ * This prop only makes sense if you specfy a reading `lang`, as
28
+ * the voices are language-specific.
29
+ *
30
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#voice
31
+ */
32
+ voice?: string;
33
+ /**
34
+ * The DOM `id=""` of the element to read.
35
+ *
36
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-area-id
37
+ */
38
+ readId?: string;
39
+ /**
40
+ * The DOM class-name of the element(s) to read
41
+ *
42
+ * Comma-separated list of class-names may also work...
43
+ *
44
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-area-class
45
+ */
46
+ readClass?: string;
47
+ texts?: ReadSpeakerPlayerI18n;
48
+ align?: 'left' | 'right';
49
+ /** Tooggles CSS float layout */
50
+ float?: boolean;
51
+ /** Custom HTML attributes for the wrapper element. */
52
+ wrapperProps?: HTMLProps<'div'>;
53
+ };
54
+ /**
55
+ * Embeds a ReadSpeaker player in the page
56
+ *
57
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html
58
+ */
59
+ export declare const ReadSpeakerPlayer: (props: ReadSpeakerPlayerProps) => JSX.Element;
60
+ /**
61
+ * Run this function if you find that the player keeps reading when a user
62
+ * swaps pages.
63
+ */
64
+ export declare const stopReading: () => void | undefined;
package/ReadSpeakerPlayer.js ADDED
@@ -0,0 +1,78 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.stopReading = exports.ReadSpeakerPlayer = exports.defaultReadSpeakerPlayerTexts = void 0;
4
+ const tslib_1 = require("tslib");
5
+ const react_1 = tslib_1.__importStar(require("react"));
6
+ const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
7
+ const i18n_1 = require("@reykjavik/hanna-utils/i18n");
8
+ const scriptTagId = 'rs_req_Init';
9
+ const scriptTagSelector = `script#${scriptTagId}`;
10
+ let buttons = 0;
11
+ exports.defaultReadSpeakerPlayerTexts = {
12
+ en: { linkText: 'Listen', linkLabel: 'Listen to this page read outloud' },
13
+ is: { linkText: 'Hlusta', linkLabel: 'Hlusta á þessa síðu lesna upphátt' },
14
+ pl: { linkText: 'Posłuchaj', linkLabel: 'Posłuchaj tej strony odczytanej na głos' },
15
+ };
16
+ /**
17
+ * Embeds a ReadSpeaker player in the page
18
+ *
19
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html
20
+ */
21
+ const ReadSpeakerPlayer = (props) => {
22
+ const { align, float, customerId = '11315', lang = '', voice = /^is(?:_is)?$/i.test(lang) ? 'is_dora' : '', readId = '', readClass = readId ? '' : 'Layout__main', wrapperProps = {}, texts, } = props;
23
+ const { linkText, linkLabel } = (0, i18n_1.getTexts)({ lang: lang.slice(0, 2), texts }, exports.defaultReadSpeakerPlayerTexts);
24
+ (0, react_1.useEffect)(() => {
25
+ var _a, _b;
26
+ if (buttons < 0) {
27
+ return;
28
+ }
29
+ if (buttons === 0) {
30
+ if (document.querySelector(scriptTagSelector)) {
31
+ buttons = -1;
32
+ return;
33
+ }
34
+ const script = document.createElement('script');
35
+ script.id = scriptTagId;
36
+ script.src = `https://cdn-eu.readspeaker.com/script/${customerId}/webReader/webReader.js?pids=wr`;
37
+ script.onload = () => { var _a, _b; return (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.addClickEvents(); };
38
+ script.async = true;
39
+ document.head.appendChild(script);
40
+ }
41
+ buttons++;
42
+ (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.addClickEvents();
43
+ return () => {
44
+ var _a;
45
+ buttons--;
46
+ if (buttons === 0) {
47
+ (_a = document.querySelector(scriptTagSelector)) === null || _a === void 0 ? void 0 : _a.remove();
48
+ }
49
+ };
50
+ },
51
+ // eslint-disable-next-line react-hooks/exhaustive-deps
52
+ [
53
+ // We're not trying to support dynamic changes to `customerId`
54
+ // or multiple different `customerId`s on the same page.
55
+ // If you try that, things will be weird and wonky.
56
+ ]);
57
+ return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, getBemClass_1.default)('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], wrapperProps.className) }),
58
+ react_1.default.createElement("div", { id: "readspeaker_button1", className: "rs_skip rsbtn rs_preserve" },
59
+ react_1.default.createElement("a", { rel: "nofollow", className: "rsbtn_play", accessKey: "L", title: linkLabel || linkText, href: `https://app-eu.readspeaker.com/cgi-bin/rsent?${new URLSearchParams({
60
+ customerid: customerId,
61
+ lang,
62
+ voice: lang && voice,
63
+ autoLang: !lang ? 'true' : 'false',
64
+ readclass: readClass,
65
+ readid: readId,
66
+ })}` },
67
+ react_1.default.createElement("span", { className: "rsbtn_left rsimg rspart" },
68
+ react_1.default.createElement("span", { className: "rsbtn_text" },
69
+ react_1.default.createElement("span", null, linkText))),
70
+ react_1.default.createElement("span", { className: "rsbtn_right rsimg rsplay rspart" })))));
71
+ };
72
+ exports.ReadSpeakerPlayer = ReadSpeakerPlayer;
73
+ /**
74
+ * Run this function if you find that the player keeps reading when a user
75
+ * swaps pages.
76
+ */
77
+ const stopReading = () => { var _a, _b; return (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.destroyActivePlayer(); };
78
+ exports.stopReading = stopReading;
package/esm/ReadSpeakerPlayer.d.ts ADDED
@@ -0,0 +1,64 @@
1
+ import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
2
+ import { HTMLProps } from './utils.js';
3
+ export type ReadSpeakerPlayerI18n = {
4
+ linkText: string;
5
+ linkLabel?: string;
6
+ };
7
+ export declare const defaultReadSpeakerPlayerTexts: DefaultTexts<ReadSpeakerPlayerI18n>;
8
+ export type ReadSpeakerPlayerProps = {
9
+ /**
10
+ * Your ReadSpeaker account/customer ID
11
+ *
12
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#customer-id
13
+ */
14
+ customerId?: string;
15
+ /**
16
+ * Reading language/locale for the ReadSpeaker player.
17
+ *
18
+ * If you don't specify a `lang`, the player will try to auto-detect
19
+ * the language of the page, and pick a default `voice` for that language.
20
+ *
21
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-language
22
+ */
23
+ lang?: Lowercase<string>;
24
+ /**
25
+ * Reading voice for the ReadSpeaker player.
26
+ *
27
+ * This prop only makes sense if you specfy a reading `lang`, as
28
+ * the voices are language-specific.
29
+ *
30
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#voice
31
+ */
32
+ voice?: string;
33
+ /**
34
+ * The DOM `id=""` of the element to read.
35
+ *
36
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-area-id
37
+ */
38
+ readId?: string;
39
+ /**
40
+ * The DOM class-name of the element(s) to read
41
+ *
42
+ * Comma-separated list of class-names may also work...
43
+ *
44
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-area-class
45
+ */
46
+ readClass?: string;
47
+ texts?: ReadSpeakerPlayerI18n;
48
+ align?: 'left' | 'right';
49
+ /** Tooggles CSS float layout */
50
+ float?: boolean;
51
+ /** Custom HTML attributes for the wrapper element. */
52
+ wrapperProps?: HTMLProps<'div'>;
53
+ };
54
+ /**
55
+ * Embeds a ReadSpeaker player in the page
56
+ *
57
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html
58
+ */
59
+ export declare const ReadSpeakerPlayer: (props: ReadSpeakerPlayerProps) => JSX.Element;
60
+ /**
61
+ * Run this function if you find that the player keeps reading when a user
62
+ * swaps pages.
63
+ */
64
+ export declare const stopReading: () => void | undefined;
package/esm/ReadSpeakerPlayer.js ADDED
@@ -0,0 +1,72 @@
1
+ import React, { useEffect } from 'react';
2
+ import getBemClass from '@hugsmidjan/react/utils/getBemClass';
3
+ import { getTexts } from '@reykjavik/hanna-utils/i18n';
4
+ const scriptTagId = 'rs_req_Init';
5
+ const scriptTagSelector = `script#${scriptTagId}`;
6
+ let buttons = 0;
7
+ export const defaultReadSpeakerPlayerTexts = {
8
+ en: { linkText: 'Listen', linkLabel: 'Listen to this page read outloud' },
9
+ is: { linkText: 'Hlusta', linkLabel: 'Hlusta á þessa síðu lesna upphátt' },
10
+ pl: { linkText: 'Posłuchaj', linkLabel: 'Posłuchaj tej strony odczytanej na głos' },
11
+ };
12
+ /**
13
+ * Embeds a ReadSpeaker player in the page
14
+ *
15
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html
16
+ */
17
+ export const ReadSpeakerPlayer = (props) => {
18
+ const { align, float, customerId = '11315', lang = '', voice = /^is(?:_is)?$/i.test(lang) ? 'is_dora' : '', readId = '', readClass = readId ? '' : 'Layout__main', wrapperProps = {}, texts, } = props;
19
+ const { linkText, linkLabel } = getTexts({ lang: lang.slice(0, 2), texts }, defaultReadSpeakerPlayerTexts);
20
+ useEffect(() => {
21
+ var _a, _b;
22
+ if (buttons < 0) {
23
+ return;
24
+ }
25
+ if (buttons === 0) {
26
+ if (document.querySelector(scriptTagSelector)) {
27
+ buttons = -1;
28
+ return;
29
+ }
30
+ const script = document.createElement('script');
31
+ script.id = scriptTagId;
32
+ script.src = `https://cdn-eu.readspeaker.com/script/${customerId}/webReader/webReader.js?pids=wr`;
33
+ script.onload = () => { var _a, _b; return (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.addClickEvents(); };
34
+ script.async = true;
35
+ document.head.appendChild(script);
36
+ }
37
+ buttons++;
38
+ (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.addClickEvents();
39
+ return () => {
40
+ var _a;
41
+ buttons--;
42
+ if (buttons === 0) {
43
+ (_a = document.querySelector(scriptTagSelector)) === null || _a === void 0 ? void 0 : _a.remove();
44
+ }
45
+ };
46
+ },
47
+ // eslint-disable-next-line react-hooks/exhaustive-deps
48
+ [
49
+ // We're not trying to support dynamic changes to `customerId`
50
+ // or multiple different `customerId`s on the same page.
51
+ // If you try that, things will be weird and wonky.
52
+ ]);
53
+ return (React.createElement("div", Object.assign({}, wrapperProps, { className: getBemClass('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], wrapperProps.className) }),
54
+ React.createElement("div", { id: "readspeaker_button1", className: "rs_skip rsbtn rs_preserve" },
55
+ React.createElement("a", { rel: "nofollow", className: "rsbtn_play", accessKey: "L", title: linkLabel || linkText, href: `https://app-eu.readspeaker.com/cgi-bin/rsent?${new URLSearchParams({
56
+ customerid: customerId,
57
+ lang,
58
+ voice: lang && voice,
59
+ autoLang: !lang ? 'true' : 'false',
60
+ readclass: readClass,
61
+ readid: readId,
62
+ })}` },
63
+ React.createElement("span", { className: "rsbtn_left rsimg rspart" },
64
+ React.createElement("span", { className: "rsbtn_text" },
65
+ React.createElement("span", null, linkText))),
66
+ React.createElement("span", { className: "rsbtn_right rsimg rsplay rspart" })))));
67
+ };
68
+ /**
69
+ * Run this function if you find that the player keeps reading when a user
70
+ * swaps pages.
71
+ */
72
+ export const stopReading = () => { var _a, _b; return (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.destroyActivePlayer(); };
package/esm/index.d.ts CHANGED
@@ -27,6 +27,7 @@
27
27
  /// <reference path="./RowBlockColumn.d.tsx" />
28
28
  /// <reference path="./RowBlock.d.tsx" />
29
29
  /// <reference path="./RelatedLinks.d.tsx" />
30
+ /// <reference path="./ReadSpeakerPlayer.d.tsx" />
30
31
  /// <reference path="./RadioGroup.d.tsx" />
31
32
  /// <reference path="./RadioButtonsGroup.d.tsx" />
32
33
  /// <reference path="./PullQuote.d.tsx" />
package/index.d.ts CHANGED
@@ -27,6 +27,7 @@
27
27
  /// <reference path="./RowBlockColumn.d.tsx" />
28
28
  /// <reference path="./RowBlock.d.tsx" />
29
29
  /// <reference path="./RelatedLinks.d.tsx" />
30
+ /// <reference path="./ReadSpeakerPlayer.d.tsx" />
30
31
  /// <reference path="./RadioGroup.d.tsx" />
31
32
  /// <reference path="./RadioButtonsGroup.d.tsx" />
32
33
  /// <reference path="./PullQuote.d.tsx" />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reykjavik/hanna-react",
3
- "version": "0.10.91",
3
+ "version": "0.10.92",
4
4
  "author": "Reykjavík (http://www.reykjavik.is)",
5
5
  "contributors": [
6
6
  "Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -14,10 +14,10 @@
14
14
  "license": "MIT",
15
15
  "dependencies": {
16
16
  "@floating-ui/react": "^0.19.2",
17
- "@hugsmidjan/qj": "^4.19.0",
18
- "@hugsmidjan/react": "^0.4.31",
17
+ "@hugsmidjan/qj": "^4.20.0",
18
+ "@hugsmidjan/react": "^0.4.32",
19
19
  "@reykjavik/hanna-css": "^0.4.2",
20
- "@reykjavik/hanna-utils": "^0.2.5",
20
+ "@reykjavik/hanna-utils": "^0.2.6",
21
21
  "@types/react": "^17.0.24",
22
22
  "@types/react-autosuggest": "^10.1.0",
23
23
  "@types/react-datepicker": "^4.8.0",
@@ -161,6 +161,10 @@
161
161
  "import": "./esm/RelatedLinks.js",
162
162
  "require": "./RelatedLinks.js"
163
163
  },
164
+ "./ReadSpeakerPlayer": {
165
+ "import": "./esm/ReadSpeakerPlayer.js",
166
+ "require": "./ReadSpeakerPlayer.js"
167
+ },
164
168
  "./RadioGroup": {
165
169
  "import": "./esm/RadioGroup.js",
166
170
  "require": "./RadioGroup.js"