@escolalms/components - npm Package Compare versions

Comparing version 0.0.62 to 0.0.63

lib/components/players/AudioVideoPlayer/AudioVideoPlayer.d.ts

@@ -23,2 +23,3 @@ import * as React from "react";
     error: boolean;
+    muted: boolean;
 }
@@ -35,2 +36,3 @@ interface AudioVideoPlayerControlsProps {
     ratio?: number;
+    onTopicEnd?: () => void;
 }
@@ -37,0 +39,0 @@ export declare const AudioVideoPlayer: React.FC<AudioVideoPlayerProps>;

lib/components/players/AudioVideoPlayer/AudioVideoPlayer.js

@@ -54,5 +54,6 @@ "use strict";
 var react_i18next_1 = require("react-i18next");
+var i18next_1 = require("i18next");
 var initialVideoState = {
     ready: false,
-    playing: false,
+    playing: true,
     progress: {
@@ -71,2 +72,3 @@ played: 0,
     error: false,
+    muted: true,
 };
@@ -154,3 +156,3 @@ var StyledAudioVideoPlayer = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n\n  ", ";\n\n  .react-player__preview {\n    &:before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(0, 0, 0, 0.5);\n      content: \"\";\n    }\n\n    > svg {\n      position: relative;\n    }\n  }\n\n  .video-player-overlay {\n    position: absolute;\n    padding: 20px;\n    bottom: ", ";\n    right: ", ";\n    top: ", ";\n    display: flex;\n    align-items: flex-end;\n    left: 0;\n    background-color: ", ";\n    transition: ", ";\n    opacity: ", ";\n\n    * {\n      color: ", ";\n    }\n\n    h3 {\n      margin-bottom: 10px;\n      margin-top: 10px;\n    }\n  }\n\n  .video-player-header {\n    display: flex;\n    align-items: center;\n\n    .video-player-badge {\n      margin-right: 10px;\n    }\n  }\n\n  .video-player-footer {\n    display: flex;\n\n    > p:first-child {\n      margin-right: 35px;\n    }\n  }\n\n  .video-player-breadcrumbs {\n    display: inline-flex;\n\n    a {\n      position: relative;\n      margin-right: 36px;\n\n      &:not(:last-child):before {\n        position: absolute;\n        right: -24px;\n\n        content: \">\";\n      }\n    }\n  }\n\n  .video-player-error {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n"], ["\n  position: relative;\n  background: ", ";\n\n  ", ";\n\n  .react-player__preview {\n    &:before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(0, 0, 0, 0.5);\n      content: \"\";\n    }\n\n    > svg {\n      position: relative;\n    }\n  }\n\n  .video-player-overlay {\n    position: absolute;\n    padding: 20px;\n    bottom: ", ";\n    right: ", ";\n    top: ", ";\n    display: flex;\n    align-items: flex-end;\n    left: 0;\n    background-color: ", ";\n    transition: ", ";\n    opacity: ", ";\n\n    * {\n      color: ", ";\n    }\n\n    h3 {\n      margin-bottom: 10px;\n      margin-top: 10px;\n    }\n  }\n\n  .video-player-header {\n    display: flex;\n    align-items: center;\n\n    .video-player-badge {\n      margin-right: 10px;\n    }\n  }\n\n  .video-player-footer {\n    display: flex;\n\n    > p:first-child {\n      margin-right: 35px;\n    }\n  }\n\n  .video-player-breadcrumbs {\n    display: inline-flex;\n\n    a {\n      position: relative;\n      margin-right: 36px;\n\n      &:not(:last-child):before {\n        position: absolute;\n        right: -24px;\n\n        content: \">\";\n      }\n    }\n  }\n\n  .video-player-error {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])), function (props) {
     };
-    return ((0, jsx_runtime_1.jsx)(StyledVideoControls, __assign({}, props, { className: "video-player-controls" }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { onChange: function (e) { return onSeek && onSeek(e.target.valueAsNumber); }, type: "range", className: "input-seek", min: 0, max: state.duration, value: state.progress.playedSeconds, style: getBackgroundSize(state.progress.playedSeconds, state.duration) }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "controls-group" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "controls-left" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "control-button" }, { children: (0, jsx_runtime_1.jsxs)("button", __assign({ type: "button", onClick: function () {
+    return ((0, jsx_runtime_1.jsx)(StyledVideoControls, __assign({}, props, { className: "video-player-controls" }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { "aria-label": (0, i18next_1.t)("VideoPlayer.Progress"), onChange: function (e) { return onSeek && onSeek(e.target.valueAsNumber); }, type: "range", className: "input-seek", min: 0, max: state.duration, value: state.progress.playedSeconds, style: getBackgroundSize(state.progress.playedSeconds, state.duration) }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "controls-group" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "controls-left" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "control-button" }, { children: (0, jsx_runtime_1.jsxs)("button", __assign({ type: "button", title: (0, i18next_1.t)("VideoPlayer.SeekBackward"), onClick: function () {
                                             var newSek = state.progress.playedSeconds - 10;
@@ -162,3 +164,3 @@ newSek <= state.duration && onSeek && onSeek(newSek);
                                                     marginLeft: "6px",
-                                                } }, { children: "10s" }))] })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "control-button" }, { children: (0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return onToggle && onToggle(); } }, { children: state.playing ? (0, jsx_runtime_1.jsx)(IconStop, {}) : (0, jsx_runtime_1.jsx)(IconPlay, {}) })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "control-button" }, { children: (0, jsx_runtime_1.jsxs)("button", __assign({ type: "button", onClick: function () {
+                                                } }, { children: "10s" }))] })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "control-button" }, { children: (0, jsx_runtime_1.jsx)("button", __assign({ type: "button", title: (0, i18next_1.t)(state.playing ? "VideoPlayer.Pause" : "VideoPlayer.Play"), onClick: function () { return onToggle && onToggle(); } }, { children: state.playing ? (0, jsx_runtime_1.jsx)(IconStop, {}) : (0, jsx_runtime_1.jsx)(IconPlay, {}) })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "control-button" }, { children: (0, jsx_runtime_1.jsxs)("button", __assign({ title: (0, i18next_1.t)("VideoPlayer.SeekForward"), type: "button", onClick: function () {
                                             var newSek = state.progress.playedSeconds + 10;
@@ -170,3 +172,3 @@ newSek <= state.duration && onSeek && onSeek(newSek);
                                                     marginLeft: "6px",
-                                                } }, { children: "10s" }))] })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "control-button control-button-volume" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return toggleVolume(); } }, { children: getVolumeIcon() })), (0, jsx_runtime_1.jsx)("input", { onChange: function (e) { return onVolume && onVolume(e.target.valueAsNumber); }, type: "range", min: 0, max: 0.999999, value: state.volume, step: "any", className: "input-volume", style: getBackgroundSize(state.volume, 0.999999) }), (0, jsx_runtime_1.jsxs)(__1.Text, __assign({ noMargin: true, size: 14, style: { color: "white" } }, { children: [(0, format_1.default)(state.progress.playedSeconds * 1000, "mm:ss"), " /", " ", (0, format_1.default)(state.duration * 1000, "mm:ss")] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "controls-right" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "control-button" }, { children: (0, jsx_runtime_1.jsx)(__1.Dropdown, { options: [
+                                                } }, { children: "10s" }))] })) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "control-button control-button-volume" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: "button", title: (0, i18next_1.t)(state.volume === 0 ? "VideoPlayer.Unmute" : "VideoPlayer.Mute"), onClick: function () { return toggleVolume(); } }, { children: getVolumeIcon() })), (0, jsx_runtime_1.jsx)("input", { onChange: function (e) { return onVolume && onVolume(e.target.valueAsNumber); }, "aria-label": (0, i18next_1.t)("VideoPlayer.Progress"), type: "range", min: 0, max: 0.999999, value: state.volume, step: "any", className: "input-volume", style: getBackgroundSize(state.volume, 0.999999) }), (0, jsx_runtime_1.jsxs)(__1.Text, __assign({ noMargin: true, size: 14, style: { color: "white" } }, { children: [(0, format_1.default)(state.progress.playedSeconds * 1000, "mm:ss"), " /", " ", (0, format_1.default)(state.duration * 1000, "mm:ss")] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "controls-right" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "control-button" }, { children: (0, jsx_runtime_1.jsx)(__1.Dropdown, { options: [
                                             { label: "1x", value: "1.0" },
@@ -185,6 +187,6 @@ { label: "1.5x", value: "1.5" },
                                         padding: "0 4px",
-                                    }, size: "12", noMargin: true }, { children: [state.quality, "p"] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "control-button" }, { children: (0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return onFullscreen && onFullscreen(); } }, { children: (0, jsx_runtime_1.jsx)(IconFullscreen, {}) })) }))] }))] }))] }) })));
+                                    }, size: "12", noMargin: true }, { children: [state.quality, "p"] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "control-button" }, { children: (0, jsx_runtime_1.jsx)("button", __assign({ type: "button", title: (0, i18next_1.t)("VideoPlayer.Fullscreen"), onClick: function () { return onFullscreen && onFullscreen(); } }, { children: (0, jsx_runtime_1.jsx)(IconFullscreen, {}) })) }))] }))] }))] }) })));
 };
 var AudioVideoPlayer = function (props) {
-    var children = props.children, mobile = props.mobile, _a = props.audio, audio = _a === void 0 ? false : _a, _b = props.light, light = _b === void 0 ? true : _b, _c = props.ratio, ratio = _c === void 0 ? 9 / 16 : _c, _d = props.className, className = _d === void 0 ? "" : _d;
+    var children = props.children, mobile = props.mobile, _a = props.audio, audio = _a === void 0 ? false : _a, _b = props.light, light = _b === void 0 ? true : _b, _c = props.ratio, ratio = _c === void 0 ? 9 / 16 : _c, _d = props.className, className = _d === void 0 ? "" : _d, onTopicEnd = props.onTopicEnd;
     var ref = React.useRef(null);
@@ -205,3 +207,9 @@ var refWrapper = React.useRef(null);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(StyledAudioVideoPlayer, __assign({ className: "wellms-component ".concat(className), state: audioVideoState, ref: refWrapper, audio: audio, light: light }, { children: [(0, jsx_runtime_1.jsx)(__1.RatioBox, __assign({ ratio: ratio }, { children: (0, jsx_runtime_1.jsx)(react_player_1.default, __assign({}, props, { light: light, ref: ref, width: "100%", height: "100%", controls: !!mobile, playIcon: IconPlayCircle(), playing: audioVideoState.playing, volume: audioVideoState.volume, playbackRate: audioVideoState.playbackRate, onReady: function () {
+    React.useEffect(function () {
+        var reactPlayers = document.querySelectorAll(".react-player__preview");
+        if (!reactPlayers)
+            return;
+        reactPlayers.forEach(function (player) { return player.click(); });
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(StyledAudioVideoPlayer, __assign({ className: "wellms-component ".concat(className), state: audioVideoState, ref: refWrapper, audio: audio, light: light }, { children: [(0, jsx_runtime_1.jsx)(__1.RatioBox, __assign({ ratio: ratio }, { children: (0, jsx_runtime_1.jsx)(react_player_1.default, __assign({}, props, { light: light, ref: ref, width: "100%", height: "100%", controls: !!mobile, playIcon: IconPlayCircle(), playing: audioVideoState.playing, volume: audioVideoState.volume, playbackRate: audioVideoState.playbackRate, muted: audioVideoState.muted, onReady: function () {
                         setAudioVideoState(function (prevState) { return (__assign(__assign({}, prevState), { ready: true })); });
@@ -212,7 +220,13 @@ !audio && checkQuality(ref.current);
                     }, onStart: function () {
-                        return setAudioVideoState(function (prevState) { return (__assign(__assign({}, prevState), { playing: true })); });
+                        setTimeout(function () {
+                            setAudioVideoState(function (prevState) { return (__assign(__assign({}, prevState), { playing: false })); });
+                            if (!ref.current)
+                                return;
+                            ref.current.seekTo(0);
+                        }, 500);
+                        setTimeout(function () {
+                            setAudioVideoState(function (prevState) { return (__assign(__assign({}, prevState), { muted: false })); });
+                        }, 600);
                     }, onProgress: function (progress) {
                         setAudioVideoState(function (prevState) { return (__assign(__assign({}, prevState), { progress: progress })); });
-                    }, onPlay: function () {
-                        setAudioVideoState(function (prevState) { return (__assign(__assign({}, prevState), { playing: true })); });
                     }, onEnded: function () {
@@ -222,2 +236,3 @@ var _a;
                         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.showPreview();
+                        onTopicEnd && onTopicEnd();
                     }, onError: function () {
@@ -224,0 +239,0 @@ setAudioVideoState(function (prevState) { return (__assign(__assign({}, prevState), { error: true })); });

lib/components/players/H5Player/H5Player.d.ts

@@ -11,2 +11,3 @@ import React from "react";
     h5pObject?: API.H5PObject;
+    onTopicEnd?: () => void;
 }
@@ -13,0 +14,0 @@ export declare const H5Player: React.FC<H5PProps>;

lib/components/players/H5Player/H5Player.js

@@ -51,3 +51,3 @@ "use strict";
 var H5Player = function (_a) {
-    var uuid = _a.uuid, onXAPI = _a.onXAPI, _b = _a.overwriteFileName, overwriteFileName = _b === void 0 ? "h5p_overwrite.css" : _b, h5pObject = _a.h5pObject, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.className, className = _d === void 0 ? "" : _d;
+    var uuid = _a.uuid, onXAPI = _a.onXAPI, onTopicEnd = _a.onTopicEnd, _b = _a.overwriteFileName, overwriteFileName = _b === void 0 ? "h5p_overwrite.css" : _b, h5pObject = _a.h5pObject, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.className, className = _d === void 0 ? "" : _d;
     var _e = (0, react_1.useContext)(context_1.EscolaLMSContext), fetchH5P = _e.fetchH5P, h5p = _e.h5p;
@@ -70,3 +70,8 @@ (0, react_1.useEffect)(function () {
     }, [themeContext]);
-    return ((0, jsx_runtime_1.jsxs)(StyledH5P, __assign({ className: "wellms-component ".concat(className) }, { children: [((h5p && h5p.loading) || loading) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "h5p-loading" }, { children: (0, jsx_runtime_1.jsx)(Spin_1.Spin, {}) }))), (h5p.value || h5pObject) && ((0, jsx_runtime_1.jsx)(h5p_react_1.ContextlessPlayer, { state: h5p.value || h5pObject, onXAPI: function (event) { return onXAPI && onXAPI(event); }, styles: [
+    return ((0, jsx_runtime_1.jsxs)(StyledH5P, __assign({ className: "wellms-component ".concat(className) }, { children: [((h5p && h5p.loading) || loading) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "h5p-loading" }, { children: (0, jsx_runtime_1.jsx)(Spin_1.Spin, {}) }))), (h5p.value || h5pObject) && ((0, jsx_runtime_1.jsx)(h5p_react_1.ContextlessPlayer, { state: h5p.value || h5pObject, onXAPI: function (event) {
+                    onXAPI && onXAPI(event);
+                    if (event.statement.result.success) {
+                        onTopicEnd && onTopicEnd();
+                    }
+                }, styles: [
                     "".concat(window.location.origin, "/").concat(overwriteFileName),
@@ -73,0 +78,0 @@ h5pThemeCSSOverwriteSrc,

lib/components/players/PdfPlayer/PdfPlayer.d.ts

 import * as React from "react";
+import { Document, Page } from "react-pdf";
 import { ExtendableStyledComponent } from "types/component";
 interface PdfPlayerProps extends ExtendableStyledComponent {
     url: string;
+    documentConfig: React.PropsWithoutRef<Document>;
+    pageConfig: React.PropsWithoutRef<Page>;
     onLoad?: () => void;
+    onTopicEnd?: () => void;
 }
@@ -7,0 +11,0 @@ export declare const PdfPlayer: React.FunctionComponent<PdfPlayerProps>;

lib/components/players/PdfPlayer/PdfPlayer.js

@@ -50,7 +50,16 @@ "use strict";
 var PdfPlayer = function (_a) {
-    var url = _a.url, onLoad = _a.onLoad, _b = _a.className, className = _b === void 0 ? "" : _b;
+    var url = _a.url, onLoad = _a.onLoad, onTopicEnd = _a.onTopicEnd, documentConfig = _a.documentConfig, pageConfig = _a.pageConfig, _b = _a.className, className = _b === void 0 ? "" : _b;
     var _c = React.useState(null), allPages = _c[0], setAllPages = _c[1];
     var _d = React.useState(1), currentPage = _d[0], setCurrentPage = _d[1];
     var _e = React.useState(false), isMounted = _e[0], setIsMounted = _e[1];
+    var _f = React.useState(false), endActionFired = _f[0], setEndActionFired = _f[1];
     var t = (0, react_i18next_1.useTranslation)().t;
+    var handleNextPageClick = function () {
+        if (onTopicEnd && allPages && !(allPages > currentPage)) {
+            setEndActionFired(true);
+            onTopicEnd();
+            return;
+        }
+        setCurrentPage(currentPage + 1);
+    };
     React.useEffect(function () {
@@ -72,3 +81,3 @@ react_pdf_1.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(react_pdf_1.pdfjs.version, "/pdf.worker.js");
                     return setAllPages(numPages);
-                }, file: url }, { children: (0, jsx_runtime_1.jsx)(react_pdf_1.Page, { pageNumber: currentPage }) }))), allPages && allPages > 1 && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "pagination-area" }, { children: [(0, jsx_runtime_1.jsxs)(__1.Text, { children: [(0, jsx_runtime_1.jsx)("strong", { children: currentPage }), " ", t("PdfPlayer.of"), " ", (0, jsx_runtime_1.jsx)("strong", { children: allPages })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(__1.Button, __assign({ mode: "secondary", disabled: !(currentPage > 1), className: "nav-btn-modal", onClick: function () { return setCurrentPage(currentPage - 1); } }, { children: t("Prev") })), (0, jsx_runtime_1.jsx)(__1.Button, __assign({ style: { marginLeft: "10px" }, mode: "secondary", disabled: !(allPages > currentPage), className: "nav-btn-modal", onClick: function () { return setCurrentPage(currentPage + 1); } }, { children: t("Next") }))] })] })))] })));
+                }, file: url }, documentConfig, { children: (0, jsx_runtime_1.jsx)(react_pdf_1.Page, __assign({ pageNumber: currentPage }, pageConfig)) }))), allPages && allPages > 1 && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "pagination-area" }, { children: [(0, jsx_runtime_1.jsxs)(__1.Text, { children: [(0, jsx_runtime_1.jsx)("strong", { children: currentPage }), " ", t("PdfPlayer.of"), " ", (0, jsx_runtime_1.jsx)("strong", { children: allPages })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(__1.Button, __assign({ mode: "secondary", disabled: !(currentPage > 1), className: "nav-btn-modal", onClick: function () { return setCurrentPage(currentPage - 1); } }, { children: t("Prev") })), (0, jsx_runtime_1.jsx)(__1.Button, __assign({ style: { marginLeft: "10px" }, mode: "secondary", disabled: onTopicEnd ? endActionFired : !(allPages > currentPage), className: "nav-btn-modal", onClick: handleNextPageClick }, { children: t("Next") }))] })] })))] })));
 };
@@ -75,0 +84,0 @@ exports.PdfPlayer = PdfPlayer;

lib/styleguide/i18n.d.ts

@@ -118,3 +118,16 @@ import i18n from "i18next";
             VideoPlayer: {
+                PlayNow: string;
+                Next: string;
+                Cancel: string;
+                Seconds: string;
+                Second: string;
                 Error: string;
+                SeekBackward: string;
+                SeekForward: string;
+                Play: string;
+                Pause: string;
+                Mute: string;
+                Unmute: string;
+                Fullscreen: string;
+                Progress: string;
             };
@@ -256,3 +269,16 @@ Upload: {
             VideoPlayer: {
+                PlayNow: string;
+                Next: string;
+                Cancel: string;
+                Seconds: string;
+                Second: string;
                 Error: string;
+                SeekBackward: string;
+                SeekForward: string;
+                Play: string;
+                Pause: string;
+                Mute: string;
+                Unmute: string;
+                Fullscreen: string;
+                Progress: string;
             };
@@ -259,0 +285,0 @@ Upload: {

lib/styleguide/i18n.js

@@ -128,3 +128,16 @@ "use strict";
             VideoPlayer: {
+                PlayNow: "Play now",
+                Next: "Next in",
+                Cancel: "Cancel",
+                Seconds: "Seconds",
+                Second: "Second",
                 Error: "Error loading material. Please try again later.",
+                SeekBackward: "Seek backward",
+                SeekForward: "Seek forward",
+                Play: "Play",
+                Pause: "Pause",
+                Mute: "Mute",
+                Unmute: "Unmute",
+                Fullscreen: "Fullscreen",
+                Progress: "Progress of media",
             },
@@ -266,3 +279,16 @@ Upload: {
             VideoPlayer: {
+                PlayNow: "Odtwórz teraz",
+                Next: "Następna za",
+                Cancel: "Anuluj",
+                Seconds: "Sekundy",
+                Second: "Sekundę",
                 Error: "Błąd podczas ładowania materiału. Spróbuj ponownie później.",
+                SeekBackward: "Przewiń do tyłu",
+                SeekForward: "Przewiń do przodu",
+                Play: "Włącz",
+                Pause: "Pauzuj",
+                Mute: "Wycisz",
+                Unmute: "Wyłącz wyciszenie",
+                Fullscreen: "Tryb pełnego ekranu",
+                Progress: "Progres medium",
             },
@@ -269,0 +295,0 @@ Upload: {

package.json

 {
   "name": "@escolalms/components",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "main": "lib/index.js",
@@ -5,0 +5,0 @@ "license": "MIT",

src/components/players/H5Player/H5Player.md

@@ -136,3 +136,8 @@ ```js
         <Title level={4}>{ids.find((idd) => idd.uuid === uuid).name}</Title>
-        <H5Player key={uuid} onXAPI={(e) => console.log(e)} {...playerProps} />
+        <H5Player
+          key={uuid}
+          onXAPI={(e) => console.log("onXAPI ", e)}
+          onTopicEnd={() => console.log("H5P progress")}
+          {...playerProps}
+        />
       </div>
@@ -139,0 +144,0 @@ </ThemeTester>

src/components/players/PdfPlayer/PdfPlayer.md

@@ -24,2 +24,3 @@ ```js
         onLoad={() => console.log("load")}
+        onTopicEnd={() => console.log("Action on topic end")}
       />
@@ -26,0 +27,0 @@ </ThemeTester>

src/styleguide/i18n.ts

@@ -124,3 +124,16 @@ import i18n from "i18next";
       VideoPlayer: {
+        PlayNow: "Play now",
+        Next: "Next in",
+        Cancel: "Cancel",
+        Seconds: "Seconds",
+        Second: "Second",
         Error: "Error loading material. Please try again later.",
+        SeekBackward: "Seek backward",
+        SeekForward: "Seek forward",
+        Play: "Play",
+        Pause: "Pause",
+        Mute: "Mute",
+        Unmute: "Unmute",
+        Fullscreen: "Fullscreen",
+        Progress: "Progress of media",
       },
@@ -263,3 +276,16 @@ Upload: {
       VideoPlayer: {
+        PlayNow: "Odtwórz teraz",
+        Next: "Następna za",
+        Cancel: "Anuluj",
+        Seconds: "Sekundy",
+        Second: "Sekundę",
         Error: "Błąd podczas ładowania materiału. Spróbuj ponownie później.",
+        SeekBackward: "Przewiń do tyłu",
+        SeekForward: "Przewiń do przodu",
+        Play: "Włącz",
+        Pause: "Pauzuj",
+        Mute: "Wycisz",
+        Unmute: "Wyłącz wyciszenie",
+        Fullscreen: "Tryb pełnego ekranu",
+        Progress: "Progres medium",
       },
@@ -266,0 +292,0 @@ Upload: {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18311662

increased by7.56%

Number of package files

472

increased by1.07%

Lines of code

27546

increased by1.39%

No dependency changes