@escolalms/components - npm Package Compare versions

Comparing version 0.0.30 to 0.0.31

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

@@ -21,2 +21,3 @@ import * as React from "react";
     quality: number;
+    error: boolean;
 }
@@ -23,0 +24,0 @@ interface AudioVideoPlayerControlsProps {

lib/components/players/AudioVideoPlayer/AudioVideoPlayer.js

@@ -53,2 +53,3 @@ "use strict";
 var react_dom_1 = require("react-dom");
+var react_i18next_1 = require("react-i18next");
 var initialVideoState = {
@@ -69,4 +70,5 @@ ready: false,
     quality: 0,
+    error: false,
 };
-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  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"])), function (props) {
+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 props.audio &&
@@ -187,2 +189,3 @@ props.light &&
     var _d = React.useState(initialVideoState), audioVideoState = _d[0], setAudioVideoState = _d[1];
+    var t = (0, react_i18next_1.useTranslation)().t;
     var checkQuality = React.useCallback(function (player) {
@@ -214,5 +217,7 @@ if (player === null || player === void 0 ? void 0 : player.getInternalPlayer("hls")) {
                         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.showPreview();
+                    }, onError: function () {
+                        setAudioVideoState(function (prevState) { return (__assign(__assign({}, prevState), { error: true })); });
                     }, onClickPreview: function () {
                         return setAudioVideoState(function (prevState) { return (__assign(__assign({}, prevState), { controls: true, playing: true })); });
-                    } })) })), !mobile && audioVideoState.controls && ((0, jsx_runtime_1.jsx)(AudioVideoPlayerControls, { audio: audio, state: audioVideoState, onVolume: function (volume) {
+                    } })) })), !mobile && audioVideoState.controls && !audioVideoState.error && ((0, jsx_runtime_1.jsx)(AudioVideoPlayerControls, { audio: audio, state: audioVideoState, onVolume: function (volume) {
                     setAudioVideoState(function (prevState) { return (__assign(__assign({}, prevState), { volume: volume })); });
@@ -224,3 +229,3 @@ }, onToggle: function () {
                         screenfull_1.default.toggle((0, react_dom_1.findDOMNode)(refWrapper.current));
-                } })), !mobile && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: function () {
+                } })), !mobile && !audioVideoState.error && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: function () {
                     return audioVideoState.ready &&
@@ -230,3 +235,3 @@ setAudioVideoState(function (prevState) { return (__assign(__assign({}, prevState), { playing: !prevState.playing })); });
                     return true;
-                } }, { children: children })))] })));
+                } }, { children: children }))), audioVideoState.error && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "video-player-error" }, { children: (0, jsx_runtime_1.jsx)(__1.Text, __assign({ size: "16" }, { children: t("VideoPlayer.Error") })) })))] })));
 };
@@ -233,0 +238,0 @@ exports.AudioVideoPlayer = AudioVideoPlayer;

lib/styleguide/i18n.d.ts

@@ -105,2 +105,5 @@ import i18n from "i18next";
             };
+            VideoPlayer: {
+                Error: string;
+            };
         };
@@ -215,2 +218,5 @@ };
             };
+            VideoPlayer: {
+                Error: string;
+            };
         };
@@ -217,0 +223,0 @@ };

lib/styleguide/i18n.js

@@ -115,2 +115,5 @@ "use strict";
             },
+            VideoPlayer: {
+                Error: "Error loading material. Please try again later.",
+            },
         },
@@ -225,2 +228,5 @@ },
             },
+            VideoPlayer: {
+                Error: "Błąd podczas ładowania materiału. Spróbuj ponownie później.",
+            },
         },
@@ -227,0 +233,0 @@ },

package.json

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

src/components/players/AudioVideoPlayer/AudioVideoPlayer.md

@@ -54,3 +54,3 @@ ```js
       <AudioVideoPlayer
-        audio={+true}
+        audio
         url="http://commondatastorage.googleapis.com/codeskulptor-assets/Epoq-Lepidoptera.ogg"
@@ -57,0 +57,0 @@ >

src/styleguide/i18n.ts

@@ -111,2 +111,5 @@ import i18n from "i18next";
       },
+      VideoPlayer: {
+        Error: "Error loading material. Please try again later.",
+      },
     },
@@ -222,2 +225,5 @@ },
       },
+      VideoPlayer: {
+        Error: "Błąd podczas ładowania materiału. Spróbuj ponownie później.",
+      },
     },
@@ -224,0 +230,0 @@ },

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

16918605

increased by0.01%

Lines of code

25238

increased by0.18%

No dependency changes