@unissey-web/web-components 5.0.0-rc.3 → 5.0.0-rc.5

package/dist/{video-recorder-4f57f554.js → video-recorder-06fc27aa.js}

@@ -1,11 +1,11 @@
-import { i, d as _taggedTemplateLiteral, _ as _inherits, a as _createClass, x as x$2, s as s$1, b as _classCallCheck, c as _callSuper, e as _objectSpread2, f as _superPropGet, g as _asyncToGenerator, h as _regeneratorRuntime } from './lit-element-ac3d3a27.js';
-import { c as commonjsRequire, a as commonjsGlobal } from './_commonjsHelpers-cef27602.js';
-import { r as recorderVars, d as defaultVars } from './variables-b4a2d316.js';
-import { E as EN } from './en-e76ed5a0.js';
+import { i, d as _taggedTemplateLiteral, _ as _inherits, a as _createClass, x as x$2, s as s$1, b as _classCallCheck, c as _callSuper, e as _objectSpread2, h as _superPropGet, f as _asyncToGenerator, g as _regenerator } from './lit-element-83035a6f.js';
+import { a as commonjsRequire, c as commonjsGlobal } from './_commonjsHelpers-02146103.js';
+import { b as recorderVars, d as defaultVars } from './variables-be2b795f.js';
+import { E as EN } from './en-066d960b.js';
 import './button.js';
 
 var name = "@unissey-web/web-components";
-var version = "5.0.0-rc.3";
+var version = "5.0.0-rc.5";
 var description = "";
 var module = "./dist/index.js";
 var typings = "./dist/index.d.ts";
@@ -71,7 +71,7 @@ var buildPacked = {exports: {}};
 }(buildPacked, buildPacked.exports));
 
 var _templateObject$f;
-var cameraStyle = i(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  .container {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  .wrapper {\n    position: relative;\n    top: 0;\n    left: 0;\n  }\n\n  .video,\n  .hints,\n  .instructions,\n  .errors,\n  .flip-icon-container,\n  .canvas,\n  .face-hints,\n  .arrow-hints {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    border-radius: ", ";\n  }\n\n  .face-hints {\n    width: 100%;\n    height: 100%;\n    z-index: 5;\n  }\n\n  .arrow-hints {\n    width: 100%;\n    height: 100%;\n    z-index: 5;\n  }\n\n  .spinner {\n    z-index: -1;\n    width: 100%;\n    height: 400px;\n  }\n\n  .canvas {\n    z-index: 2;\n  }\n\n  .video {\n    z-index: 1;\n    height: 0;\n    box-shadow: ", ";\n    filter: ", ";\n  }\n\n  .flip-icon-container {\n    z-index: 4;\n    display: none;\n  }\n\n  .flip-icon {\n    position: absolute;\n    bottom: 5%;\n    left: 5d%;\n  }\n\n  .hints {\n    z-index: 3;\n  }\n\n  .instructions {\n    z-index: 4;\n  }\n\n  .errors {\n    display: none;\n    justify-content: center;\n    align-items: center;\n    z-index: 3;\n\n    border-radius: 10px;\n  }\n\n  .errors .message {\n    display: inline-block;\n    width: 70%;\n    background-color: ", ";\n    color: var(--uni-light-color, #fff);\n    padding: 7px 15px;\n    border-radius: 5px;\n    text-align: center;\n  }\n\n  .item-center {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .buttons {\n    text-align: center;\n    width: 100%;\n\n    margin: ", ";\n  }\n\n  .buttons-item {\n    display: inline-block;\n    padding: 7px;\n  }\n\n  @media screen and (max-width: 576px) {\n    .buttons-item {\n      width: 95%;\n    }\n\n    .buttons {\n      margin-top: 15px;\n    }\n  }\n"])), recorderVars.borderRadius, recorderVars.boxShadow, recorderVars.videoFilter, defaultVars.colors.error, recorderVars.buttonsMargin);
+var cameraStyle = i(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  .container {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  .wrapper {\n    position: relative;\n    top: 0;\n    left: 0;\n  }\n\n  .video,\n  .hints,\n  .instructions,\n  .errors,\n  .flip-icon-container,\n  .canvas,\n  .face-hints {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    border-radius: ", ";\n  }\n\n  .face-hints {\n    width: 100%;\n    height: 100%;\n    z-index: 5;\n  }\n\n  .top-hints {\n    margin-bottom: 20px;\n  }\n\n  .bottom-hints {\n    margin-top: 20px;\n  }\n\n  .spinner {\n    z-index: -1;\n    width: 100%;\n    height: 400px;\n  }\n\n  .canvas {\n    z-index: 2;\n  }\n\n  .video {\n    z-index: 1;\n    height: 0;\n    box-shadow: ", ";\n    filter: ", ";\n  }\n\n  .flip-icon-container {\n    z-index: 4;\n    display: none;\n  }\n\n  .flip-icon {\n    position: absolute;\n    bottom: 5%;\n    left: 5d%;\n  }\n\n  .hints {\n    z-index: 3;\n  }\n\n  .instructions {\n    z-index: 4;\n  }\n\n  .errors {\n    display: none;\n    justify-content: center;\n    align-items: center;\n    z-index: 3;\n\n    border-radius: 10px;\n  }\n\n  .errors .message {\n    display: inline-block;\n    width: 70%;\n    background-color: ", ";\n    color: var(--uni-light-color, #fff);\n    padding: 7px 15px;\n    border-radius: 5px;\n    text-align: center;\n  }\n\n  .item-center {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .buttons {\n    text-align: center;\n    width: 100%;\n\n    margin: ", ";\n  }\n\n  .buttons-item {\n    display: inline-block;\n    padding: 7px;\n  }\n\n  @media screen and (max-width: 576px) {\n    .buttons-item {\n      width: 95%;\n    }\n\n    .buttons {\n      margin-top: 15px;\n    }\n  }\n"])), recorderVars.borderRadius, recorderVars.boxShadow, recorderVars.videoFilter, defaultVars.colors.error, recorderVars.buttonsMargin);
 
 var _templateObject$e;
 var fadeAnimation = i(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n  @keyframes fade {\n    from {\n      width: 25px;\n      margin-left: 0%;\n      margin-top: 0%;\n      opacity: 1;\n    }\n    to {\n      width: 30px;\n      margin-left: -2%;\n      margin-top: -2%;\n      opacity: 0;\n    }\n  }\n\n  .icon {\n    width: 25px;\n    animation-name: fade;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n  }\n"])));
@@ -191,7 +191,7 @@ var HandIcon = /*#__PURE__*/function (_LitElement) {
 HandIcon.styles = [fadeAnimation];
 customElements.define("uni-hand-icon", HandIcon);
 
-var _templateObject$6, _templateObject2$3, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+var _templateObject$6, _templateObject2$3, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 var defaultStrings = EN.videoRecorder.hints;
 var OverlayHints = /*#__PURE__*/function (_LitElement) {
   function OverlayHints() {
@@ -210,7 +210,7 @@ var OverlayHints = /*#__PURE__*/function (_LitElement) {
   return _createClass(OverlayHints, [{
     key: "render",
     value: function render() {
-      return x$2(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n      <div class=\"container\">\n        ", "\n        ", "\n        ", "\n        ", "\n        ", "\n        ", "\n        ", "\n        <div class=\"direction\">", "</div>\n      </div>\n    "])), this.hint === "up" ? x$2(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["<div class=\"up\"><uni-up-arrow-icon></uni-up-arrow-icon></div>"]))) : x$2(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral([""]))), this.hint === "down" ? x$2(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["<div class=\"down\"><uni-down-arrow-icon></uni-down-arrow-icon></div>"]))) : x$2(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral([""]))), this.hint === "left" ? x$2(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["<div class=\"left\"><uni-left-arrow-icon></uni-left-arrow-icon></div>"]))) : x$2(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral([""]))), this.hint === "right" ? x$2(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["<div class=\"right\"><uni-right-arrow-icon></uni-right-arrow-icon></div>"]))) : x$2(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([""]))), this.hint === "perfect" ? x$2(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["<div class=\"perfect\"><uni-hand-icon></uni-hand-icon></div>"]))) : x$2(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([""]))), this.hint === "closer" ? x$2(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["<div class=\"closer\"><uni-expand-arrow-icon></uni-expand-arrow-icon></div>"]))) : x$2(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral([""]))), this.hint === "record" ? x$2(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["<div class=\"record\"><uni-camera-video-icon></uni-camera-video-icon></div>"]))) : x$2(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral([""]))), this.strings[this.hint]);
+      return x$2(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n      <div class=\"container\">\n        ", "\n        ", "\n        ", "\n        ", "\n        ", "\n        ", "\n        ", "\n        <div class=\"direction\"></div>\n      </div>\n    "])), this.hint === "up" ? x$2(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["<div class=\"up\"><uni-up-arrow-icon></uni-up-arrow-icon></div>"]))) : x$2(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral([""]))), this.hint === "down" ? x$2(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["<div class=\"down\"><uni-down-arrow-icon></uni-down-arrow-icon></div>"]))) : x$2(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral([""]))), this.hint === "left" ? x$2(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["<div class=\"left\"><uni-left-arrow-icon></uni-left-arrow-icon></div>"]))) : x$2(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""]))), this.hint === "right" ? x$2(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["<div class=\"right\"><uni-right-arrow-icon></uni-right-arrow-icon></div>"]))) : x$2(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([""]))), this.hint === "perfect" ? x$2(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["<div class=\"perfect\"><uni-hand-icon></uni-hand-icon></div>"]))) : x$2(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral([""]))), this.hint === "closer" ? x$2(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["<div class=\"closer\"><uni-expand-arrow-icon></uni-expand-arrow-icon></div>"]))) : x$2(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([""]))), this.hint === "record" ? x$2(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["<div class=\"record\"><uni-camera-video-icon></uni-camera-video-icon></div>"]))) : x$2(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral([""]))));
     }
   }]);
 }(s$1);
@@ -227,7 +227,7 @@ OverlayHints.properties = {
     type: Object
   }
 };
-OverlayHints.styles = i(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    :host {\n      text-align: center;\n    }\n\n    @keyframes up {\n      from {\n        top: 17%;\n      }\n      to {\n        top: 15%;\n      }\n    }\n\n    @keyframes down {\n      from {\n        bottom: 27%;\n      }\n      to {\n        bottom: 25%;\n      }\n    }\n\n    @keyframes left {\n      from {\n        left: 32%;\n      }\n      to {\n        left: 30%;\n      }\n    }\n\n    @keyframes right {\n      from {\n        right: 32%;\n      }\n      to {\n        right: 30%;\n      }\n    }\n\n    .up {\n      position: absolute;\n      top: 15%;\n      left: 49%;\n      animation-name: up;\n    }\n\n    .down {\n      position: absolute;\n      bottom: 25%;\n      left: 49%;\n      animation-name: down;\n    }\n\n    .left {\n      position: absolute;\n      top: 45%;\n      left: 30%;\n      animation-name: left;\n    }\n\n    .right {\n      position: absolute;\n      top: 45%;\n      right: 32%;\n      animation-name: right;\n    }\n\n    .perfect,\n    .record,\n    .closer {\n      position: absolute;\n      top: 43%;\n      left: 47%;\n    }\n\n    .direction {\n      position: absolute;\n      top: 85%;\n      width: 100%;\n\n      text-align: center;\n      font-size: ", ";\n      color: ", ";\n    }\n\n    .up,\n    .down,\n    .left,\n    .right,\n    .closer,\n    .record,\n    .perfect {\n      animation-duration: 0.8s;\n      animation-iteration-count: infinite;\n    }\n\n    .container {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n  "])), recorderVars.hintsFontSize, recorderVars.hintsFontColor);
+OverlayHints.styles = i(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    :host {\n      text-align: center;\n    }\n\n    @keyframes up {\n      from {\n        top: 17%;\n      }\n      to {\n        top: 15%;\n      }\n    }\n\n    @keyframes down {\n      from {\n        bottom: 27%;\n      }\n      to {\n        bottom: 25%;\n      }\n    }\n\n    @keyframes left {\n      from {\n        left: 32%;\n      }\n      to {\n        left: 30%;\n      }\n    }\n\n    @keyframes right {\n      from {\n        right: 32%;\n      }\n      to {\n        right: 30%;\n      }\n    }\n\n    .up {\n      position: absolute;\n      top: 15%;\n      left: 49%;\n      animation-name: up;\n    }\n\n    .down {\n      position: absolute;\n      bottom: 25%;\n      left: 49%;\n      animation-name: down;\n    }\n\n    .left {\n      position: absolute;\n      top: 45%;\n      left: 30%;\n      animation-name: left;\n    }\n\n    .right {\n      position: absolute;\n      top: 45%;\n      right: 32%;\n      animation-name: right;\n    }\n\n    .perfect,\n    .record,\n    .closer {\n      position: absolute;\n      top: 43%;\n      left: 47%;\n    }\n\n    .direction {\n      position: absolute;\n      top: 85%;\n      width: 100%;\n\n      text-align: center;\n      font-size: ", ";\n      color: ", ";\n    }\n\n    .up,\n    .down,\n    .left,\n    .right,\n    .closer,\n    .record,\n    .perfect {\n      animation-duration: 0.8s;\n      animation-iteration-count: infinite;\n    }\n\n    .container {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n  "])), recorderVars.hintsFontSize, recorderVars.hintsFontColor);
 customElements.define("uni-overlay-hints", OverlayHints);
 
 /**
@@ -376,7 +376,7 @@ function isMobileDevice() {
   return check;
 }
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 var Recorder = /*#__PURE__*/function (_LitElement) {
   function Recorder() {
     var _this;
@@ -400,10 +400,7 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
     // default value of face checker attribute
     _this.faceChecker = "disabled-on-retry";
     // Instruction messages disaplayed for active challenges
-    _this.instructionMessage = "";
-    _this.instructionTimer = 0;
     _this.instructions = [];
-    _this.instructionNumber = 1;
     // Default strings for translation
     _this.defaultStrings = EN.videoRecorder;
     // Custom overridden strings
@@ -428,9 +425,9 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
     _this.isCameraFlipped = false;
     // Does the latest session fails to find a face ? Used to disable the face detection on retry (depending on 'faceChecker' property value')
     _this.faceDetectionFails = false;
+    _this.activeChallengeFails = false;
     // Enable / disable the debugger hook
     _this.disableDebugMode = false;
-    _this.actionToDisplay = undefined;
     _this.actionState = undefined;
     _this.sdkJsListener_status = function (status) {
       var _this$shadowRoot, _this$shadowRoot2;
@@ -479,12 +476,33 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
           break;
       }
     };
+    _this.handleError = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var _this$shadowRoot3, _this$session;
+      var captureButton, recorderInterruptedEvent;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            _this.willRetryCapture = true;
+            captureButton = (_this$shadowRoot3 = _this.shadowRoot) === null || _this$shadowRoot3 === void 0 ? void 0 : _this$shadowRoot3.getElementById("capture");
+            if (captureButton) captureButton.disabled = false;
+            recorderInterruptedEvent = new CustomEvent("recordInterrupted");
+            _this.dispatchEvent(recorderInterruptedEvent);
+            _context.n = 1;
+            return (_this$session = _this.session) === null || _this$session === void 0 ? void 0 : _this$session.release();
+          case 1:
+            // Note: we release the current session, but we doesn't wait for the completion. This is not an issue because createSession now waits for release completion.
+            _this.session = null;
+            _this.resetHints();
+          case 2:
+            return _context.a(2);
+        }
+      }, _callee);
+    }));
     _this.sdkJsListener_issue = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(type, value) {
-        var _this$shadowRoot3, _this$session;
-        var forbiddenActionMessages, cameraErrorMessages, captureButton, recorderInterruptedEvent;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(type, value) {
+        var forbiddenActionMessages, cameraErrorMessages, _t;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
             case 0:
               forbiddenActionMessages = {
                 "1": _this.getString(["forbiddenActionMessages", "visibility"]),
@@ -496,110 +514,119 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
                 "1": _this.getString(["cameraErrorMessages", "permissionDenied"]),
                 "2": _this.getString(["cameraErrorMessages", "openFailed"])
               };
-              _context.t0 = type;
-              _context.next = _context.t0 === buildPacked.exports.IssueType.NO_FACE ? 5 : _context.t0 === buildPacked.exports.IssueType.FORBIDDEN_ACTION ? 8 : _context.t0 === buildPacked.exports.IssueType.CAMERA_ERROR ? 10 : _context.t0 === buildPacked.exports.IssueType.MOVE ? 12 : 14;
+              _t = type;
+              _context2.n = _t === buildPacked.exports.IssueType.NO_FACE ? 1 : _t === buildPacked.exports.IssueType.FORBIDDEN_ACTION ? 2 : _t === buildPacked.exports.IssueType.CAMERA_ERROR ? 3 : _t === buildPacked.exports.IssueType.MOVE ? 4 : _t === buildPacked.exports.IssueType.UNSUPPORTED_FACE_DETECTOR ? 5 : 6;
               break;
-            case 5:
+            case 1:
               _this.displayError(_this.getString(["errors", "noFace"]));
               _this.faceDetectionFails = true;
-              return _context.abrupt("break", 14);
-            case 8:
+              return _context2.a(3, 6);
+            case 2:
               if (Object.keys(forbiddenActionMessages).includes("".concat(value))) {
                 _this.displayError(forbiddenActionMessages["".concat(value)]);
               } else {
                 _this.displayError(_this.getString(["forbiddenActionMessages", "default"]));
               }
-              return _context.abrupt("break", 14);
-            case 10:
+              return _context2.a(3, 6);
+            case 3:
               if (Object.keys(cameraErrorMessages).includes("".concat(value))) {
                 _this.displayError(cameraErrorMessages["".concat(value)]);
               } else {
                 _this.displayError(_this.getString(["cameraErrorMessages", "default"]));
               }
-              return _context.abrupt("break", 14);
-            case 12:
+              return _context2.a(3, 6);
+            case 4:
               if (value === 7) {
                 _this.displayError(_this.getString(["rotationWhileCapturingErrorMessage"]));
               }
-              return _context.abrupt("break", 14);
-            case 14:
-              _this.willRetryCapture = true;
-              captureButton = (_this$shadowRoot3 = _this.shadowRoot) === null || _this$shadowRoot3 === void 0 ? void 0 : _this$shadowRoot3.getElementById("capture");
-              if (captureButton) captureButton.disabled = false;
-              recorderInterruptedEvent = new CustomEvent("recordInterrupted");
-              _this.dispatchEvent(recorderInterruptedEvent);
-              _context.next = 21;
-              return (_this$session = _this.session) === null || _this$session === void 0 ? void 0 : _this$session.release();
-            case 21:
-              // Note: we release the current session, but we doesn't wait for the completion. This is not an issue because createSession now waits for release completion.
-              _this.session = null;
-              _this.resetHints();
-            case 23:
-            case "end":
-              return _context.stop();
+              return _context2.a(3, 6);
+            case 5:
+              _this.displayError(_this.getString(["errors", "unsupportedFaceDetector"]));
+              return _context2.a(3, 6);
+            case 6:
+              _context2.n = 7;
+              return _this.handleError();
+            case 7:
+              return _context2.a(2);
           }
-        }, _callee);
+        }, _callee2);
       }));
       return function (_x, _x2) {
-        return _ref.apply(this, arguments);
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    _this.sdkJsListener_activeChallenge = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(activeChallengeEventType, value, value2) {
+        var actions, actionId, roundedActionId, detail, activeChallengeEvent, _detail, _activeChallengeEvent, _detail2, _activeChallengeEvent2, _t2;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              actions = ["left", "right", "up", "down", "custom"];
+              if (!(_this.instructions.length < 1)) {
+                _context3.n = 1;
+                break;
+              }
+              return _context3.a(2);
+            case 1:
+              _t2 = activeChallengeEventType;
+              _context3.n = _t2 === buildPacked.exports.ActiveChallengeEventType.ACTION ? 2 : _t2 === buildPacked.exports.ActiveChallengeEventType.REMAINING_SECONDS ? 3 : _t2 === buildPacked.exports.ActiveChallengeEventType.ACTION_ERROR ? 4 : _t2 === buildPacked.exports.ActiveChallengeEventType.COMPLETED ? 7 : 8;
+              break;
+            case 2:
+              actionId = value;
+              roundedActionId = actionId >= 4 ? 4 : actionId;
+              if (actionId >= 0) {
+                detail = {
+                  action: actions[roundedActionId]
+                };
+                activeChallengeEvent = new CustomEvent("activeChallenge", {
+                  detail: detail
+                });
+                _this.dispatchEvent(activeChallengeEvent);
+                _this.actionState = undefined;
+              } else {
+                _this.actionState = !_this.actionState ? "success" : _this.actionState;
+                _detail = {
+                  status: _this.actionState
+                };
+                _activeChallengeEvent = new CustomEvent("activeChallenge", {
+                  detail: _detail
+                });
+                if (actions[roundedActionId] !== "custom") _this.dispatchEvent(_activeChallengeEvent);
+              }
+              return _context3.a(3, 8);
+            case 3:
+              return _context3.a(3, 8);
+            case 4:
+              if (_this.activeChallengeFails) {
+                _context3.n = 6;
+                break;
+              }
+              _this.displayError(_this.getString(["errors", "activeChallenge"]));
+              _context3.n = 5;
+              return _this.handleError();
+            case 5:
+              _this.activeChallengeFails = true;
+            case 6:
+              return _context3.a(3, 8);
+            case 7:
+              _detail2 = {
+                status: "completed"
+              };
+              _activeChallengeEvent2 = new CustomEvent("activeChallenge", {
+                detail: _detail2
+              });
+              _this.dispatchEvent(_activeChallengeEvent2);
+              _this.actionState = undefined;
+              return _context3.a(3, 8);
+            case 8:
+              return _context3.a(2);
+          }
+        }, _callee3);
+      }));
+      return function (_x3, _x4, _x5) {
+        return _ref3.apply(this, arguments);
       };
     }();
-    _this.sdkJsListener_activeChallenge = function (activeChallengeEventType, value, value2) {
-      var actions = ["left", "right", "up", "down", "custom"];
-      if (_this.instructions.length < 1) return; //we shouln't receive this event !
-      if (activeChallengeEventType === buildPacked.exports.ActiveChallengeEventType.ACTION) {
-        var actionId = value;
-        var roundedActionId = actionId >= 4 ? 4 : actionId;
-        if (actionId >= 0) {
-          var detail = {
-            action: actions[roundedActionId]
-          };
-          var activeChallengeEvent = new CustomEvent("activeChallenge", {
-            detail: detail
-          });
-          _this.dispatchEvent(activeChallengeEvent);
-          _this.instructionMessage = "".concat(_this.instructionNumber, ". ").concat(_this.instructions[actionId]);
-          _this.instructionNumber++;
-          _this.actionState = undefined;
-          _this.actionToDisplay = actionId < _this.instructions.length ? actions[actionId] : undefined;
-        } else {
-          _this.instructionMessage = ""; // a negative actionId is for erasing the current message (actionId should always be < instructions.length)
-          _this.instructionTimer = 0;
-          _this.actionState = !_this.actionState ? "success" : _this.actionState;
-          var _detail = {
-            status: _this.actionState
-          };
-          var _activeChallengeEvent = new CustomEvent("activeChallenge", {
-            detail: _detail
-          });
-          if (actions[roundedActionId] !== "custom") _this.dispatchEvent(_activeChallengeEvent);
-        }
-        //console.log("active action:", actionId);
-      }
-      if (activeChallengeEventType === buildPacked.exports.ActiveChallengeEventType.REMAINING_SECONDS) {
-        var remainingSeconds = value;
-        //console.log("remaining Seconds:", remainingSeconds);
-        _this.instructionTimer = remainingSeconds;
-      }
-      if (activeChallengeEventType === buildPacked.exports.ActiveChallengeEventType.ACTION_ERROR) {
-        _this.actionState = "error";
-        // console.log("action error:", expectedActionId, detectedActionId);
-        // TODO : UI and retry !!
-      }
-      if (activeChallengeEventType === buildPacked.exports.ActiveChallengeEventType.COMPLETED) {
-        var _detail2 = {
-          status: "completed"
-        };
-        var _activeChallengeEvent2 = new CustomEvent("activeChallenge", {
-          detail: _detail2
-        });
-        _this.dispatchEvent(_activeChallengeEvent2);
-        //console.log("success:", success);
-        _this.instructionMessage = "";
-        _this.actionToDisplay = undefined;
-        _this.actionState = undefined;
-      }
-    };
     _this.addEventListener("startCapture", _this.capture.bind(_this));
     return _this;
   }
@@ -607,19 +634,18 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
   return _createClass(Recorder, [{
     key: "retryCapture",
     value: function () {
-      var _retryCapture = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+      var _retryCapture = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.n) {
             case 0:
               this.hideError();
               this.willRetryCapture = false;
-              _context2.next = 4;
+              _context4.n = 1;
               return this.callInitSession();
-            case 4:
-            case "end":
-              return _context2.stop();
+            case 1:
+              return _context4.a(2);
           }
-        }, _callee2, this);
+        }, _callee4, this);
       }));
       function retryCapture() {
         return _retryCapture.apply(this, arguments);
@@ -629,32 +655,32 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
   }, {
     key: "capture",
     value: function () {
-      var _capture = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+      var _capture = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
         var _this$config$recordin;
         var faceCheckerOptions, captureConfig, _yield$this$session$c, media, metadata, error, detail, recordCompletedEvent, recordEvent;
-        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.n) {
             case 0:
               if (!this.sessionPromise) {
-                _context3.next = 3;
+                _context5.n = 1;
                 break;
               }
-              _context3.next = 3;
+              _context5.n = 1;
               return this.sessionPromise;
-            case 3:
+            case 1:
               if (this.session) {
-                _context3.next = 8;
+                _context5.n = 3;
                 break;
               }
               if (!this.willRetryCapture) {
-                _context3.next = 7;
+                _context5.n = 2;
                 break;
               }
-              _context3.next = 7;
+              _context5.n = 2;
               return this.retryCapture();
-            case 7:
-              return _context3.abrupt("return");
-            case 8:
+            case 2:
+              return _context5.a(2);
+            case 3:
               faceCheckerOptions = this.faceChecker === "disabled" ? undefined : this.faceChecker === "disabled-on-retry" && this.faceDetectionFails ? {
                 check: "disabled"
               } : {
@@ -664,15 +690,29 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
               captureConfig = faceCheckerOptions ? {
                 faceCheckerOptions: faceCheckerOptions
               } : undefined;
-              _context3.next = 12;
+              _context5.n = 4;
               return this.session.capture(captureConfig);
-            case 12:
-              _yield$this$session$c = _context3.sent;
+            case 4:
+              _yield$this$session$c = _context5.v;
               media = _yield$this$session$c.media;
               metadata = _yield$this$session$c.metadata;
               error = _yield$this$session$c.error;
               this.resetHints();
-              if (error) console.log(error);
+              if (!error) {
+                _context5.n = 6;
+                break;
+              }
+              console.log(error);
+              if (this.error) {
+                _context5.n = 5;
+                break;
+              }
+              this.displayError("".concat(this.getString(["errors", "sdkError"]), ": ").concat(error));
+              _context5.n = 5;
+              return this.handleError();
+            case 5:
+              return _context5.a(2);
+            case 6:
               detail = {};
               detail[this.resultEvent.mediaPropertyName] = media;
               if (this.resultEvent.includeMetadata) detail["metadata"] = metadata;
@@ -687,11 +727,10 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
                 detail: detail
               });
               this.dispatchEvent(recordEvent);
-            case 26:
-            case "end":
-              return _context3.stop();
+            case 7:
+              return _context5.a(2);
           }
-        }, _callee3, this);
+        }, _callee5, this);
       }));
       function capture() {
         return _capture.apply(this, arguments);
@@ -701,28 +740,27 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
   }, {
     key: "flipCamera",
     value: function () {
-      var _flipCamera = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
+      var _flipCamera = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+        return _regenerator().w(function (_context6) {
+          while (1) switch (_context6.n) {
             case 0:
               this.isCameraFlipped = !this.isCameraFlipped;
               if (!this.willRetryCapture) {
-                _context4.next = 6;
+                _context6.n = 2;
                 break;
               }
-              _context4.next = 4;
+              _context6.n = 1;
               return this.retryCapture();
-            case 4:
-              _context4.next = 8;
+            case 1:
+              _context6.n = 3;
               break;
-            case 6:
-              _context4.next = 8;
+            case 2:
+              _context6.n = 3;
               return this.callInitSession();
-            case 8:
-            case "end":
-              return _context4.stop();
+            case 3:
+              return _context6.a(2);
           }
-        }, _callee4, this);
+        }, _callee6, this);
       }));
       function flipCamera() {
         return _flipCamera.apply(this, arguments);
@@ -779,14 +817,13 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
   }, {
     key: "getString",
     value: function getString(keys) {
-      var _customString;
       var customString = this.strings;
       var defaultString = this.defaultStrings;
       keys.forEach(function (key) {
         customString = customString != undefined && key in customString ? customString[key] : undefined;
         defaultString = defaultString != undefined && key in defaultString ? defaultString[key] : undefined;
       });
-      return (_customString = customString) !== null && _customString !== void 0 ? _customString : defaultString;
+      return customString !== null && customString !== void 0 ? customString : defaultString;
     }
   }, {
     key: "initSdkJs",
@@ -832,7 +869,7 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
         check: faceCheckerValue
       };
       if (((_sessionConfig$iadCon = sessionConfig.iadConfig) === null || _sessionConfig$iadCon === void 0 ? void 0 : _sessionConfig$iadCon.mode) === buildPacked.exports.IadMode.SUBSTANTIAL || !!((_sessionConfig$iadCon2 = sessionConfig.iadConfig) !== null && _sessionConfig$iadCon2 !== void 0 && _sessionConfig$iadCon2.activeChallengeConfig)) {
-        var _this$getString, _this$getString2, _this$getString3, _this$getString4, _sessionConfig$iadCon3, _sessionConfig$iadCon4, _sessionConfig$iadCon5, _sessionConfig$iadCon6, _sessionConfig$iadCon7, _sessionConfig$iadCon8, _sessionConfig$iadCon9, _sessionConfig$iadCon10, _sessionConfig$iadCon11;
+        var _this$getString, _this$getString2, _this$getString3, _this$getString4, _sessionConfig$iadCon3, _sessionConfig$iadCon4, _sessionConfig$iadCon5, _sessionConfig$iadCon6, _sessionConfig$iadCon7, _sessionConfig$iadCon8, _sessionConfig$iadCon9, _sessionConfig$iadCon0, _sessionConfig$iadCon1;
         // configure active challenge
         this.instructions = [(_this$getString = this.getString(["activeChallengeMessages", "rotateLeft"])) !== null && _this$getString !== void 0 ? _this$getString : "undefined action", (_this$getString2 = this.getString(["activeChallengeMessages", "rotateRight"])) !== null && _this$getString2 !== void 0 ? _this$getString2 : "undefined action", (_this$getString3 = this.getString(["activeChallengeMessages", "rotateUp"])) !== null && _this$getString3 !== void 0 ? _this$getString3 : "undefined action", (_this$getString4 = this.getString(["activeChallengeMessages", "rotateDown"])) !== null && _this$getString4 !== void 0 ? _this$getString4 : "undefined action"];
         sessionConfig.iadConfig.activeChallengeConfig = {
@@ -844,9 +881,9 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
           // true, except if force by client application
           selfieBeforeAction: (_sessionConfig$iadCon9 = sessionConfig.iadConfig.activeChallengeConfig) === null || _sessionConfig$iadCon9 === void 0 ? void 0 : _sessionConfig$iadCon9.selfieBeforeAction,
           // default : Selfie is recorded between two actions of the scenario
-          customActions: (_sessionConfig$iadCon10 = sessionConfig.iadConfig.activeChallengeConfig) === null || _sessionConfig$iadCon10 === void 0 ? void 0 : _sessionConfig$iadCon10.customActions
+          customActions: (_sessionConfig$iadCon0 = sessionConfig.iadConfig.activeChallengeConfig) === null || _sessionConfig$iadCon0 === void 0 ? void 0 : _sessionConfig$iadCon0.customActions
         };
-        (_sessionConfig$iadCon11 = sessionConfig.iadConfig.activeChallengeConfig.customActions) === null || _sessionConfig$iadCon11 === void 0 || _sessionConfig$iadCon11.map(function (action) {
+        (_sessionConfig$iadCon1 = sessionConfig.iadConfig.activeChallengeConfig.customActions) === null || _sessionConfig$iadCon1 === void 0 || _sessionConfig$iadCon1.map(function (action) {
           _this2.instructions.push(action.message);
         });
       }
@@ -868,20 +905,19 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
   }, {
     key: "callInitSession",
     value: function () {
-      var _callInitSession = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
+      var _callInitSession = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+        return _regenerator().w(function (_context7) {
+          while (1) switch (_context7.n) {
             case 0:
               this.sessionPromise = this.initSession();
-              _context5.next = 3;
+              _context7.n = 1;
               return this.sessionPromise;
-            case 3:
+            case 1:
               this.sessionPromise = null;
-            case 4:
-            case "end":
-              return _context5.stop();
+            case 2:
+              return _context7.a(2);
           }
-        }, _callee5, this);
+        }, _callee7, this);
       }));
       function callInitSession() {
         return _callInitSession.apply(this, arguments);
@@ -891,25 +927,25 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
   }, {
     key: "initSession",
     value: function () {
-      var _initSession = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+      var _initSession = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
         var _this$shadowRoot6,
           _this$shadowRoot7,
           _this3 = this;
-        var cvs, video, _this$shadowRoot8, _this$shadowRoot9, _this$session3, sessionConfig, _this$session4, acquisitionTime, canvasElem, videoElem, recorderReadyEvent;
-        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-          while (1) switch (_context6.prev = _context6.next) {
+        var cvs, video, _this$shadowRoot8, _this$shadowRoot9, _this$session3, sessionConfig, _this$session4, sessionInfos, acquisitionTime, activeChallengeNumActions, canvasElem, videoElem, recorderReadyEvent;
+        return _regenerator().w(function (_context8) {
+          while (1) switch (_context8.n) {
             case 0:
               cvs = (_this$shadowRoot6 = this.shadowRoot) === null || _this$shadowRoot6 === void 0 ? void 0 : _this$shadowRoot6.getElementById("cvs");
               video = (_this$shadowRoot7 = this.shadowRoot) === null || _this$shadowRoot7 === void 0 ? void 0 : _this$shadowRoot7.getElementById("vid");
               if (!this.initSessionInprogress) {
-                _context6.next = 5;
+                _context8.n = 1;
                 break;
               }
               console.debug("A session is currently in creation. The new creation request is ignored");
-              return _context6.abrupt("return");
-            case 5:
+              return _context8.a(2);
+            case 1:
               if (!(video && cvs)) {
-                _context6.next = 28;
+                _context8.n = 8;
                 break;
               }
               this.displaySpinner();
@@ -917,41 +953,43 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
 
               // Release any active session before create a new one
               if (!this.session) {
-                _context6.next = 12;
+                _context8.n = 3;
                 break;
               }
-              _context6.next = 11;
+              _context8.n = 2;
               return (_this$session3 = this.session) === null || _this$session3 === void 0 ? void 0 : _this$session3.release();
-            case 11:
+            case 2:
               this.session = null; // Note: Should be already set to null by sdkJsListener_status()
-            case 12:
+            case 3:
               sessionConfig = this.buildSessionConfig();
-              _context6.next = 15;
+              _context8.n = 4;
               return buildPacked.exports.UnisseySdk.createSession(video, this.preset, cvs, sessionConfig)["catch"](function (e) {
                 _this3.resetHints();
                 return null;
               })["finally"](function () {
                 _this3.hideSpinner();
               });
-            case 15:
-              this.session = _context6.sent;
+            case 4:
+              this.session = _context8.v;
               this.initSessionInprogress = false;
               if (!this.disconnected) {
-                _context6.next = 21;
+                _context8.n = 6;
                 break;
               }
-              _context6.next = 20;
+              _context8.n = 5;
               return (_this$session4 = this.session) === null || _this$session4 === void 0 ? void 0 : _this$session4.release();
-            case 20:
+            case 5:
               this.session = null; // Note: Should be already set to null by sdkJsListener_status()
-            case 21:
+            case 6:
               if (this.session) {
-                _context6.next = 23;
+                _context8.n = 7;
                 break;
               }
-              return _context6.abrupt("return");
-            case 23:
-              acquisitionTime = this.session.getInfo().acquisition_length;
+              return _context8.a(2);
+            case 7:
+              sessionInfos = this.session.getInfo();
+              acquisitionTime = sessionInfos.acquisition_length;
+              activeChallengeNumActions = sessionInfos.active_challenge_num_actions;
               canvasElem = (_this$shadowRoot8 = this.shadowRoot) === null || _this$shadowRoot8 === void 0 ? void 0 : _this$shadowRoot8.getElementById("cvs");
               videoElem = (_this$shadowRoot9 = this.shadowRoot) === null || _this$shadowRoot9 === void 0 ? void 0 : _this$shadowRoot9.getElementById("vid");
               recorderReadyEvent = new CustomEvent("recorderReady", {
@@ -960,15 +998,15 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
                   canvasElmt: canvasElem,
                   videoElmt: videoElem,
                   mediaType: this.mediaType,
-                  acquisitionTime: acquisitionTime
+                  acquisitionTime: acquisitionTime,
+                  activeChallengeNumActions: activeChallengeNumActions
                 }
               });
               this.dispatchEvent(recorderReadyEvent);
-            case 28:
-            case "end":
-              return _context6.stop();
+            case 8:
+              return _context8.a(2);
           }
-        }, _callee6, this);
+        }, _callee8, this);
       }));
       function initSession() {
         return _initSession.apply(this, arguments);
@@ -1009,9 +1047,6 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
     value: function resetHints() {
       this.adjustContainerSize();
       this.hints = "nil";
-      this.instructionMessage = "";
-      this.instructionTimer = 0;
-      this.instructionNumber = 1;
     }
   }, {
     key: "setDimensionsToElement",
@@ -1022,14 +1057,14 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
   }, {
     key: "adjustContainerSize",
     value: function adjustContainerSize() {
-      var _this$shadowRoot10, _this$shadowRoot11, _this$shadowRoot12, _this$shadowRoot13, _this$shadowRoot14, _this$shadowRoot15, _this$shadowRoot16;
-      var cvs = (_this$shadowRoot10 = this.shadowRoot) === null || _this$shadowRoot10 === void 0 ? void 0 : _this$shadowRoot10.getElementById("cvs");
-      var video = (_this$shadowRoot11 = this.shadowRoot) === null || _this$shadowRoot11 === void 0 ? void 0 : _this$shadowRoot11.getElementById("vid");
-      var container = (_this$shadowRoot12 = this.shadowRoot) === null || _this$shadowRoot12 === void 0 ? void 0 : _this$shadowRoot12.querySelector("#container");
-      var wrapper = (_this$shadowRoot13 = this.shadowRoot) === null || _this$shadowRoot13 === void 0 ? void 0 : _this$shadowRoot13.querySelector("#wrapper");
-      var hints = (_this$shadowRoot14 = this.shadowRoot) === null || _this$shadowRoot14 === void 0 ? void 0 : _this$shadowRoot14.querySelector(".hints");
-      var instructions = (_this$shadowRoot15 = this.shadowRoot) === null || _this$shadowRoot15 === void 0 ? void 0 : _this$shadowRoot15.querySelector(".instructions");
-      var flipIconContainer = (_this$shadowRoot16 = this.shadowRoot) === null || _this$shadowRoot16 === void 0 ? void 0 : _this$shadowRoot16.querySelector("#flip-icon-container");
+      var _this$shadowRoot0, _this$shadowRoot1, _this$shadowRoot10, _this$shadowRoot11, _this$shadowRoot12, _this$shadowRoot13, _this$shadowRoot14;
+      var cvs = (_this$shadowRoot0 = this.shadowRoot) === null || _this$shadowRoot0 === void 0 ? void 0 : _this$shadowRoot0.getElementById("cvs");
+      var video = (_this$shadowRoot1 = this.shadowRoot) === null || _this$shadowRoot1 === void 0 ? void 0 : _this$shadowRoot1.getElementById("vid");
+      var container = (_this$shadowRoot10 = this.shadowRoot) === null || _this$shadowRoot10 === void 0 ? void 0 : _this$shadowRoot10.querySelector("#container");
+      var wrapper = (_this$shadowRoot11 = this.shadowRoot) === null || _this$shadowRoot11 === void 0 ? void 0 : _this$shadowRoot11.querySelector("#wrapper");
+      var hints = (_this$shadowRoot12 = this.shadowRoot) === null || _this$shadowRoot12 === void 0 ? void 0 : _this$shadowRoot12.querySelector(".hints");
+      var instructions = (_this$shadowRoot13 = this.shadowRoot) === null || _this$shadowRoot13 === void 0 ? void 0 : _this$shadowRoot13.querySelector(".instructions");
+      var flipIconContainer = (_this$shadowRoot14 = this.shadowRoot) === null || _this$shadowRoot14 === void 0 ? void 0 : _this$shadowRoot14.querySelector("#flip-icon-container");
 
       // Width of the HTML element that contains the recorder
       var boxWidth = container.offsetWidth;
@@ -1058,38 +1093,37 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
   }, {
     key: "displaySpinner",
     value: function displaySpinner() {
-      var _this$shadowRoot17;
-      var spinner = (_this$shadowRoot17 = this.shadowRoot) === null || _this$shadowRoot17 === void 0 ? void 0 : _this$shadowRoot17.querySelector("#spinner");
+      var _this$shadowRoot15;
+      var spinner = (_this$shadowRoot15 = this.shadowRoot) === null || _this$shadowRoot15 === void 0 ? void 0 : _this$shadowRoot15.querySelector("#spinner");
       spinner.style.display = "flex";
       spinner.style.height = "100%";
     }
   }, {
     key: "hideSpinner",
     value: function hideSpinner() {
-      var _this$shadowRoot18;
-      var spinner = (_this$shadowRoot18 = this.shadowRoot) === null || _this$shadowRoot18 === void 0 ? void 0 : _this$shadowRoot18.querySelector("#spinner");
+      var _this$shadowRoot16;
+      var spinner = (_this$shadowRoot16 = this.shadowRoot) === null || _this$shadowRoot16 === void 0 ? void 0 : _this$shadowRoot16.querySelector("#spinner");
       spinner.style.display = "none";
     }
   }, {
     key: "displayError",
     value: function () {
-      var _displayError = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(message) {
-        var _this$shadowRoot19;
+      var _displayError = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9(message) {
+        var _this$shadowRoot17;
         var errors;
-        return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-          while (1) switch (_context7.prev = _context7.next) {
+        return _regenerator().w(function (_context9) {
+          while (1) switch (_context9.n) {
             case 0:
               this.error = message !== null && message !== void 0 ? message : "Error";
-              errors = (_this$shadowRoot19 = this.shadowRoot) === null || _this$shadowRoot19 === void 0 ? void 0 : _this$shadowRoot19.querySelector("#errors");
+              errors = (_this$shadowRoot17 = this.shadowRoot) === null || _this$shadowRoot17 === void 0 ? void 0 : _this$shadowRoot17.querySelector("#errors");
               errors.style.display = "flex";
               errors.style.height = "100%";
-            case 4:
-            case "end":
-              return _context7.stop();
+            case 1:
+              return _context9.a(2);
           }
-        }, _callee7, this);
+        }, _callee9, this);
       }));
-      function displayError(_x3) {
+      function displayError(_x6) {
         return _displayError.apply(this, arguments);
       }
       return displayError;
@@ -1097,8 +1131,8 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
   }, {
     key: "hideError",
     value: function hideError() {
-      var _this$shadowRoot20;
-      var errors = (_this$shadowRoot20 = this.shadowRoot) === null || _this$shadowRoot20 === void 0 ? void 0 : _this$shadowRoot20.querySelector("#errors");
+      var _this$shadowRoot18;
+      var errors = (_this$shadowRoot18 = this.shadowRoot) === null || _this$shadowRoot18 === void 0 ? void 0 : _this$shadowRoot18.querySelector("#errors");
       errors.style.display = "none";
       this.error = "";
     }
@@ -1106,9 +1140,9 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
     key: "render",
     value: function render() {
       // not necessary : this.strings = { ...this.defaultStrings, ...this.strings };
-      return x$2(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      <div class=\"container\" id=\"container\">\n        <div class=\"wrapper\" id=\"wrapper\">\n          <canvas id=\"cvs\" class=\"canvas\"></canvas>\n          <video id=\"vid\" class=\"video\" autoplay muted playsinline></video>\n\n          <div class=\"face-hints\">\n            <slot name=\"active-challenge-face\"></slot>\n          </div>\n\n          <div class=\"arrow-hints\">\n            <slot name=\"active-challenge-bottom\"></slot>\n          </div>\n\n          ", "\n\n          <uni-overlay-hints\n            class=\"hints\"\n            hints=\"", "\"\n            strings=\"", "\"\n          ></uni-overlay-hints>\n\n          ", "\n          <div id=\"spinner\" class=\"spinner item-center\" style=\"display: none\">\n            <uni-spinner></uni-spinner>\n          </div>\n          <div class=\"errors\" id=\"errors\">\n            <span class=\"message\">", "</span>\n          </div>\n        </div>\n        <div class=\"buttons\" id=\"buttons\">\n          <div class=\"buttons-item\">\n            <slot name=\"left\"></slot>\n          </div>\n\n          <div class=\"buttons-item\">\n            <!-- Display record/retry button -->\n            ", "\n          </div>\n        </div>\n      </div>\n    "])), isMobileDevice() && (
+      return x$2(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      <div class=\"container\" id=\"container\">\n        <div id=\"top-hints\" class=\"top-hints\">\n          <slot name=\"ac-top-hints\"></slot>\n        </div>\n        <div class=\"wrapper\" id=\"wrapper\">\n          <canvas id=\"cvs\" class=\"canvas\"></canvas>\n          <video id=\"vid\" class=\"video\" autoplay muted playsinline></video>\n\n          <div id=\"face-hints\" class=\"face-hints\">\n            <slot name=\"ac-face-hints\"></slot>\n          </div>\n\n          ", "\n\n          <uni-overlay-hints\n            class=\"hints\"\n            hints=\"", "\"\n            strings=\"", "\"\n          ></uni-overlay-hints>\n\n          <div id=\"spinner\" class=\"spinner item-center\" style=\"display: none\">\n            <uni-spinner></uni-spinner>\n          </div>\n          <div class=\"errors\" id=\"errors\">\n            <span class=\"message\">", "</span>\n          </div>\n        </div>\n        <div id=\"bottom-hints\" class=\"bottom-hints\">\n          <slot name=\"ac-bottom-hints\"></slot>\n          <div class=\"ac-bottom-hints\">", "</div>\n        </div>\n        <div class=\"buttons\" id=\"buttons\">\n          <div class=\"buttons-item\">\n            <slot name=\"left\"></slot>\n          </div>\n\n          <div class=\"buttons-item\">\n            <!-- Display record/retry button -->\n            ", "\n          </div>\n        </div>\n      </div>\n    "])), isMobileDevice() && (
       // eslint-disable-next-line no-extra-boolean-cast
-      !!this.displayFlipCameraBtn ? this.displayFlipCameraBtn : this.preset === buildPacked.exports.AcquisitionPreset.DOC_VIDEO || this.preset === buildPacked.exports.AcquisitionPreset.DOC_IMAGE) && !this.isRunning() ? x$2(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([" <div id=\"flip-icon-container\" class=\"flip-icon-container\">\n                <uni-flip-camera-icon @click=\"", "\" class=\"flip-icon\"> </uni-flip-camera-icon>\n              </div>"])), this.flipCamera) : x$2(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""]))), this.hints, JSON.stringify(this.getString(["hints"])), this.instructions.length > 0 ? x$2(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["<uni-instruction-message\n                class=\"instructions\"\n                instruction-message=\"", "\"\n                step-timer=\"", "\"\n              >\n              </uni-instruction-message>"])), this.instructionMessage, this.instructionTimer) : "", this.error, !this.hideCaptureBtn || this.willRetryCapture ? x$2(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["<uni-button id=\"capture\" @click=\"", "\">\n                  <div slot=\"icon\">", "</div>\n                  ", "\n                </uni-button>"])), this.capture, this.captureButtonPicto, this.willRetryCapture ? this.getString(["retry"]) : this.getString(["capture"])) : x$2(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""]))));
+      !!this.displayFlipCameraBtn ? this.displayFlipCameraBtn : this.preset === buildPacked.exports.AcquisitionPreset.DOC_VIDEO || this.preset === buildPacked.exports.AcquisitionPreset.DOC_IMAGE) && !this.isRunning() ? x$2(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([" <div id=\"flip-icon-container\" class=\"flip-icon-container\">\n                <uni-flip-camera-icon @click=\"", "\" class=\"flip-icon\"> </uni-flip-camera-icon>\n              </div>"])), this.flipCamera) : x$2(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""]))), this.hints, JSON.stringify(this.getString(["hints"])), this.error, this.getString(["hints", this.hints]), !this.hideCaptureBtn || this.willRetryCapture ? x$2(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["<uni-button id=\"capture\" @click=\"", "\">\n                  <div slot=\"icon\">", "</div>\n                  ", "\n                </uni-button>"])), this.capture, this.captureButtonPicto, this.willRetryCapture ? this.getString(["retry"]) : this.getString(["capture"])) : x$2(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""]))));
     }
   }]);
 }(s$1);
@@ -1170,15 +1204,6 @@ Recorder.properties = {
   instructions: {
     state: true
   },
-  instructionMessage: {
-    state: true
-  },
-  instructionTimer: {
-    state: true
-  },
-  actionToDisplay: {
-    state: true
-  },
   isActionSuccessful: {
     state: true
   }