@ututrust/web-components 1.1.15 → 1.1.18

package/dist/index.js

@@ -9707,8 +9707,10 @@
 	var ATTR_ENDORSEMENT_NETWORK = 'endorsement-network';
 	var ATTR_TRANSACTION_ID = "transaction-id"; // API BASE URLs
 
-	var UTU_API_BASE_URL_PRODUCTION = "https://api.ututrust.com/core-api";
-	var UTU_API_BASE_URL_TEST = "https://stage-api.ututrust.com/core-api"; // API resource paths
+	var UTU_API_BASE_URL_PRODUCTION = "https://api.ututrust.com/";
+	var UTU_API_BASE_URL_TEST = "https://stage-api.ututrust.com/";
+	var CORE_API_BASE = "core-api";
+	var VIDEO_PUBLISHED_BASE = "published-video"; // API resource paths
 
 	var API_RANKING = "/ranking";
 	var API_FEEDBACK = "/feedback";
@@ -29523,7 +29525,7 @@
 	            switch (_context.prev = _context.next) {
 	              case 0:
 	                _context.next = 2;
-	                return axios.get("".concat(apiUrl).concat(API_RANKING, "?").concat(queryParams), withAuthorizationHeader(accessToken));
+	                return axios.get("".concat(apiUrl).concat(CORE_API_BASE).concat(API_RANKING, "?").concat(queryParams), withAuthorizationHeader(accessToken));
 
 	              case 2:
 	                response = _context.sent;
@@ -29553,7 +29555,7 @@
 	  var targetCriteria = createEntityCriteria(targetUuid);
 
 	  var sendFeedback = function sendFeedback(feedbackData) {
-	    return axios.post("".concat(apiUrl).concat(API_FEEDBACK), {
+	    return axios.post("".concat(apiUrl).concat(CORE_API_BASE).concat(API_FEEDBACK), {
 	      sourceCriteria: sourceCriteria,
 	      targetCriteria: targetCriteria,
 	      transactionId: transactionId,
@@ -29565,6 +29567,7 @@
 	    });
 	  };
 
+	  console.log("".concat(apiUrl).concat(CORE_API_BASE).concat(API_FEEDBACK));
 	  return {
 	    sendFeedback: sendFeedback
 	  };
@@ -29591,7 +29594,7 @@
 	            switch (_context2.prev = _context2.next) {
 	              case 0:
 	                _context2.next = 2;
-	                return axios.get("".concat(apiUrl).concat(API_BADGES), withAuthorizationHeader(accessToken));
+	                return axios.get("".concat(apiUrl).concat(CORE_API_BASE).concat(API_BADGES), withAuthorizationHeader(accessToken));
 
 	              case 2:
 	                response = _context2.sent;
@@ -29638,7 +29641,7 @@
 	            switch (_context3.prev = _context3.next) {
 	              case 0:
 	                _context3.next = 2;
-	                return axios.get("".concat(apiUrl).concat(API_FEEDBACK_SUMMARY, "?").concat(queryParams), withAuthorizationHeader(accessToken));
+	                return axios.get("".concat(apiUrl).concat(CORE_API_BASE).concat(API_FEEDBACK_SUMMARY, "?").concat(queryParams), withAuthorizationHeader(accessToken));
 
 	              case 2:
 	                response = _context3.sent;
@@ -29660,7 +29663,7 @@
 	    feedbackSummary: feedbackSummary
 	  };
 	}
-	function useUploadVideoApi(source) {
+	function useUploadVideoApi(apiUrl, source) {
 	  var _useAuth5 = useAuth(),
 	      accessToken = _useAuth5.accessToken;
 
@@ -29681,7 +29684,7 @@
 	    };
 	    var options = {
 	      resume: false,
-	      endpoint: "http://localhost:2080/uploads",
+	      endpoint: "http://localhost:2080/uploads" ,
 	      headers: getAuthorizationHeader(accessToken),
 	      chunkSize: 28 * 1024,
 	      uploadLengthDeferred: true,
@@ -29697,7 +29700,7 @@
 	        });
 	      },
 	      onSuccess: function onSuccess() {
-	        var publishedVideoUrl = getPublishedVideoUrl(upload.url);
+	        var publishedVideoUrl = getPublishedVideoUrl(apiUrl, upload.url);
 	        var checkVideoInterval = setInterval(function () {
 	          axios.head(publishedVideoUrl).then(function () {
 	            setStatus({
@@ -29726,9 +29729,10 @@
 	  return status;
 	}
 
-	function getPublishedVideoUrl(uploadUrl) {
+	function getPublishedVideoUrl(apiUrl, uploadUrl) {
 	  var videoId = uploadUrl.split("/").pop();
-	  return "".concat("http://localhost:2080/files", "/").concat(videoId);
+	  var publishedUrl = "".concat("http://localhost:2080/files", "/").concat(videoId) || "".concat(apiUrl).concat(VIDEO_PUBLISHED_BASE).concat(videoId);
+	  return publishedUrl;
 	}
 
 	function createEntityCriteria(uuid) {
@@ -33569,7 +33573,7 @@
 	      isDark = _useState2[0],
 	      setIsDark = _useState2[1];
 
-	  var _useState3 = l$1(''),
+	  var _useState3 = l$1(""),
 	      _useState4 = _slicedToArray(_useState3, 2),
 	      txError = _useState4[0],
 	      setTxError = _useState4[1];
@@ -33584,10 +33588,11 @@
 	  var _useForm = useForm(),
 	      register = _useForm.register,
 	      errors = _useForm.errors,
-	      handleSubmit = _useForm.handleSubmit; // @ts-ignore
+	      handleSubmit = _useForm.handleSubmit; // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	  // @ts-ignore
 
 
-	  if (!((_window = window) !== null && _window !== void 0 && _window.ethereum || (_window2 = window) !== null && _window2 !== void 0 && _window2.web3) || !props[ATTR_TARGET_UUID] || !isAddress(props[ATTR_TARGET_UUID])) return null;
+	  if (!((_window = window) !== null && _window !== void 0 && _window.ethereum || (_window2 = window) !== null && _window2 !== void 0 && _window2.web3) || !props[ATTR_TARGET_UUID] || !isAddress(props[ATTR_TARGET_UUID]) || props[ATTR_TRANSACTION_ID]) return null;
 
 	  var switchNetwork = /*#__PURE__*/function () {
 	    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
@@ -33596,6 +33601,7 @@
 	        while (1) {
 	          switch (_context.prev = _context.next) {
 	            case 0:
+	              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	              // @ts-ignore
 	              provider = window.ethereum;
 	              network = String(props[ATTR_ENDORSEMENT_NETWORK]).toLowerCase().trim() || DEFAULT_NETWORK;
@@ -33637,7 +33643,7 @@
 	  }();
 
 	  var sendTransaction = /*#__PURE__*/function () {
-	    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(address, amount) {
+	    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(address, amount, transactionId) {
 	      var web3Provider, signer, wei, contract, transaction;
 	      return regeneratorRuntime.wrap(function _callee2$(_context2) {
 	        while (1) {
@@ -33647,6 +33653,7 @@
 	              return switchNetwork();
 
 	            case 2:
+	              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	              // @ts-ignore
 	              web3Provider = new Web3Provider(window.ethereum);
 	              signer = web3Provider.getSigner(); // Accounts now exposed
@@ -33654,7 +33661,7 @@
 	              wei = String(Number(amount) * 10e17);
 	              contract = new Contract(UTT_CONTRACT_ADDRESS, abi, signer);
 	              _context2.next = 8;
-	              return contract.endorse(address, String(wei));
+	              return contract.endorse(address, String(wei), transactionId);
 
 	            case 8:
 	              transaction = _context2.sent;
@@ -33672,12 +33679,12 @@
 	      }, _callee2);
 	    }));
 
-	    return function sendTransaction(_x, _x2) {
+	    return function sendTransaction(_x, _x2, _x3) {
 	      return _ref2.apply(this, arguments);
 	    };
 	  }();
 
-	  function onSubmit(_x3) {
+	  function onSubmit(_x4) {
 	    return _onSubmit.apply(this, arguments);
 	  }
 
@@ -33698,23 +33705,21 @@
 	              return _context3.abrupt("return");
 
 	            case 3:
-	              setTxError('');
+	              setTxError("");
 	              _context3.prev = 4;
 	              _context3.next = 7;
-	              return sendTransaction(props[ATTR_TARGET_UUID], amount);
+	              return sendTransaction(props[ATTR_TARGET_UUID], amount, props[ATTR_TRANSACTION_ID]);
 
 	            case 7:
-	              _context3.next = 13;
+	              _context3.next = 12;
 	              break;
 
 	            case 9:
 	              _context3.prev = 9;
 	              _context3.t0 = _context3["catch"](4);
-	              // User denied account access...
-	              console.log(_context3.t0);
 	              setTxError(_context3.t0.data ? _context3.t0.data.message : _context3.t0.message);
 
-	            case 13:
+	            case 12:
 	            case "end":
 	              return _context3.stop();
 	          }
@@ -33781,15 +33786,15 @@
 	    placeholder: "Your endorsement"
 	  }), v$2("div", {
 	    className: "mt-1 error"
-	  }, errors.amount && "* ".concat(showError(errors)))), v$2("div", null, v$2("button", {
+	  }, errors.amount && "* ".concat(showError(errors))), txError && v$2("div", {
+	    className: "mt-1 error"
+	  }, txError)), v$2("div", null, v$2("button", {
 	    style: {
 	      backgroundColor: props[ATTR_BTN_COLOR] === undefined ? null : "".concat(props[ATTR_BTN_COLOR])
 	    },
 	    className: "endor-btn btn btn-".concat(envCondition),
 	    type: "submit"
-	  }, "Endorse"), txError && v$2("div", {
-	    className: "mt-1 error"
-	  }, txError)))));
+	  }, "Endorse")))));
 	}
 
 	var preact = createCommonjsModule$1(function (module, exports) {
@@ -36196,7 +36201,7 @@
 
 	var e=0;function t(t){return "__private_"+e+++"_"+t}function i(e,t){if(!Object.prototype.hasOwnProperty.call(e,t))throw new TypeError("attempted to use private field on non-instance");return e}var r=function(e){this.value=e;},n=t("head"),o=t("end"),u=function(){function e(){Object.defineProperty(this,n,{writable:!0,value:void 0}),Object.defineProperty(this,o,{writable:!0,value:void 0});}var t=e.prototype;return t.enqueue=function(e){var t=new r(e);i(this,o)[o]?(i(this,o)[o].next=t,i(this,o)[o]=t):i(this,n)[n]=i(this,o)[o]=t;},t.dequeue=function(){var e=i(this,n)[n];return i(this,n)[n]=null==e?void 0:e.next,i(this,n)[n]||(i(this,o)[o]=void 0),null==e?void 0:e.value},e}();function s(e){return {done:!1,value:e}}var h={done:!0},a=t("chunkQueue"),l=t("resolveQueue"),v=t("isInProgress"),c=t("isLocked"),d=function(){function e(){Object.defineProperty(this,a,{writable:!0,value:void 0}),Object.defineProperty(this,l,{writable:!0,value:void 0}),Object.defineProperty(this,v,{writable:!0,value:void 0}),Object.defineProperty(this,c,{writable:!0,value:void 0}),this.url=null,i(this,a)[a]=new u,i(this,l)[l]=new u,i(this,v)[v]=!0,i(this,c)[c]=!1;}var t=e.prototype;return t.setUrl=function(e){this.url=e;},t.setBlobProperties=function(e){this.blobProperties=e;},t.storeChunk=function(e){i(this,v)[v]=!0;var t=i(this,l)[l].dequeue();t?t(s(e)):i(this,a)[a].enqueue(e);},t.stop=function(){i(this,v)[v]=!1;},t.reset=function(){i(this,v)[v]=!0,i(this,a)[a]=new u,i(this,l)[l]=new u,i(this,c)[c]=!1;},t.getUrl=function(){return this.url},t.getBlob=function(){},t.getReader=function(){if(i(this,c)[c])throw new Error("ReadableStorage is locked.");i(this,c)[c]=!0;var e=this;return {read:function(){var t=i(e,a)[a].dequeue();return t?Promise.resolve(s(t)):i(e,v)[v]?new Promise(function(t){return i(e,l)[l].enqueue(t)}):Promise.resolve(h)}}},e}();
 
-	var css_248z$c = "@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);\nbody {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n.utu-section-light {\n  border-bottom: 1px solid #9b9898;\n  background: #fdfdfd;\n}\n.utu-section-dark {\n  border-bottom: 1px solid #ebe8e8;\n  background: #242323;\n}\n.utu-section-no-border-light {\n  background: #fdfdfd;\n}\n.utu-section-no-border-dark {\n  background: #242323;\n}\n.utu-section-no-border-mid-light {\n  background: #e5e5e5;\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.btn-light {\n  background-color: #fbc93d;\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: #fbc93d;\n  color: #000000 !important;\n}\n.btn-round {\n  color: \"white\" !important;\n}\n.btn-round-text {\n  color: \"white\" !important;\n}\n\n.icon-btn {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n.icon-btn svg {\n  width: 60px;\n  height: 60px;\n}\n\nbutton.p {\n  color: \"white\";\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  top: 41.2rem;\n  left: 21rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\n}\n\n.text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\n    background: #242323;\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n\n  .text-area {\n    background-color: #fdfdfd;\n  }\n}\n.trust-video {\n  left: 0;\n  border: none;\n  max-width: 100%;\n  bottom: 1.4rem;\n  position: relative;\n  border-top-left-radius: 2%;\n  border-top-right-radius: 2%;\n}\n.trust-video-wrapper {\n  display: flex;\n  align-items: center;\n}\n.trust-video-wrapper:hover .trust-video-controls {\n  visibility: visible;\n  opacity: 1;\n}\n.trust-video-msg {\n  display: flex;\n  align-items: center;\n}\n.trust-video-controls {\n  position: absolute;\n  bottom: 14px;\n  padding-left: 36px;\n  left: 14px;\n  width: calc(100% - 28px);\n  right: 0;\n  border-radius: 10px;\n  height: 4em;\n  align-items: center;\n  justify-content: space-between;\n  visibility: hidden;\n  opacity: 0;\n  transition: all 0.25s ease-out;\n  display: none;\n}\n.trust-video-controls.show {\n  display: flex;\n}\n.trust-video-play {\n  border-color: transparent;\n  transition: 0.3s;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 3em;\n  line-height: 1.5em;\n  width: 3em;\n  height: 3em;\n  display: block;\n  position: absolute;\n  padding: 0;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #FFDD33;\n  border-radius: 50%;\n  font: normal normal normal 18px/1 FontAwesome;\n}\n.trust-video-play:before {\n  content: \"\\f04b\";\n}\n.trust-video-play.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-volume {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  line-height: 1.5em;\n  width: 2em;\n  height: 1.5em;\n  display: block;\n  position: absolute;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  left: 20px;\n}\n.trust-video-volume:before {\n  content: \"\\f028\";\n}\n.trust-video-volume.off:before {\n  content: \"\\f026\";\n}\n.trust-video-fullscreen {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  line-height: 1.5em;\n  width: 3em;\n  height: 1.5rem;\n  display: block;\n  position: absolute;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  right: 20px;\n}\n.trust-video-fullscreen:before {\n  content: \"\\f065\";\n}\n\n.utu-screen-recording {\n  max-height: 80rem;\n  min-width: 20rem;\n  width: 27rem;\n  height: 43rem;\n  position: relative;\n  z-index: 1;\n  justify-content: center;\n  border-bottom-left-radius: 2%;\n  border-bottom-right-radius: 2%;\n  border-bottom: 13px #fbc93d solid;\n}\n\n.btn-round {\n  border: none;\n  margin: 5px 0;\n  width: 6rem;\n  height: 6rem;\n  border-radius: 90px;\n  border: none;\n  font-size: 9px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n}\n.btn-round-light {\n  background-color: #fbc93d;\n}\n.btn-round-dark {\n  background-color: #fbc93d;\n}\n.btn-round-loading {\n  position: absolute;\n  bottom: 2.5rem;\n}\n.btn-round-spinner-light {\n  fill: #000000;\n}\n.btn-round-spinner-dark {\n  fill: #000000;\n}\n.btn-round-stop {\n  position: absolute;\n  bottom: 2.5rem;\n}\n.btn-round-stop-light {\n  fill: #000000;\n}\n.btn-round-stop-dark {\n  fill: #000000;\n}\n.btn-round-text-light {\n  color: #000000;\n}\n.btn-round-text-dark {\n  color: #000000;\n}\n.btn-container {\n  display: flex;\n  justify-content: center;\n}\n.btn-stop-icon {\n  width: 30px;\n  height: 30px;\n  border-radius: 5px;\n}\n.btn-stop-icon-light {\n  background: #000000;\n}\n.btn-stop-icon-dark {\n  background: #000000;\n}\n\n.video-container {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.response-message {\n  height: 3rem;\n  line-height: 3rem;\n  width: 100%;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .video-container {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n  }\n}";
+	var css_248z$c = "@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);\nbody {\n  overflow: scroll;\n}\n\nh3 {\n  text-transform: capitalize;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.error {\n  color: #e80054;\n}\n\n:host {\n  margin: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: #000000;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: #000000;\n}\n\n.utu-section-light {\n  border-bottom: 1px solid #9b9898;\n  background: #fdfdfd;\n}\n.utu-section-dark {\n  border-bottom: 1px solid #ebe8e8;\n  background: #242323;\n}\n.utu-section-no-border-light {\n  background: #fdfdfd;\n}\n.utu-section-no-border-dark {\n  background: #242323;\n}\n.utu-section-no-border-mid-light {\n  background: #e5e5e5;\n}\n.utu-section-no-border-mid-dark {\n  background: #494949;\n}\n\n.btn {\n  padding: 12px;\n  border: none;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.btn-light {\n  background-color: #fbc93d;\n  color: #000000 !important;\n}\n.btn-dark {\n  background-color: #fbc93d;\n  color: #000000 !important;\n}\n.btn-round {\n  color: \"white\" !important;\n}\n.btn-round-text {\n  color: \"white\" !important;\n}\n\n.icon-btn {\n  border: none;\n  background: none;\n  padding: 0;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 500;\n  font-size: 14px;\n}\n.icon-btn svg {\n  width: 60px;\n  height: 60px;\n}\n\nbutton.p {\n  color: \"white\";\n}\n\n.logo-position {\n  position: absolute;\n  top: -1rem;\n  right: 6rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-details {\n  position: absolute;\n  top: -2rem;\n  right: 6rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-video {\n  position: absolute;\n  top: 41.2rem;\n  left: 21rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-position-player {\n  position: absolute;\n  bottom: -0.5rem;\n  left: 22rem;\n  z-index: 2;\n  width: 0.5rem;\n}\n.logo-section {\n  position: relative;\n}\n.logo-size {\n  width: 3rem;\n}\n\n.text-area {\n  resize: vertical;\n  min-height: 8rem;\n  border-radius: 10px;\n  border: none;\n  padding: 16px;\n  font-weight: 300;\n  font-size: 0.9rem;\n  background-color: #fcf8e5;\n}\n\nsvg.video-icon {\n  width: 1.5rem;\n  height: 2.4rem;\n  padding-top: 0.3rem;\n}\nsvg.video-icon-dark {\n  fill: #000000;\n}\nsvg.video-icon-light {\n  fill: #000000;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .utu-section-light {\n    border-bottom: 0px;\n    background-color: #fcf8e5;\n  }\n  .utu-section-dark {\n    border-bottom: 0px;\n    background: #242323;\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-dark {\n    background-color: #3d3d3c;\n  }\n  .utu-section-no-border-mid-light {\n    background-color: #fcf8e5;\n  }\n  .utu-section-no-border-mid-dark {\n    background-color: #3d3d3c;\n  }\n\n  .text-area {\n    background-color: #fdfdfd;\n  }\n}\n.trust-video {\n  left: 0;\n  border: none;\n  max-width: 100%;\n  bottom: 1.4rem;\n  position: relative;\n  border-top-left-radius: 2%;\n  border-top-right-radius: 2%;\n}\n.trust-video-wrapper {\n  display: flex;\n  align-items: center;\n}\n.trust-video-wrapper:hover .trust-video-controls {\n  visibility: visible;\n  opacity: 1;\n}\n.trust-video-msg {\n  display: flex;\n  align-items: center;\n}\n.trust-video-controls {\n  position: absolute;\n  bottom: 14px;\n  padding-left: 36px;\n  left: 14px;\n  width: calc(100% - 28px);\n  right: 0;\n  border-radius: 10px;\n  height: 4em;\n  align-items: center;\n  justify-content: space-between;\n  visibility: hidden;\n  opacity: 0;\n  transition: all 0.25s ease-out;\n  display: none;\n}\n.trust-video-controls.show {\n  display: flex;\n}\n.trust-video-play {\n  border-color: transparent;\n  transition: 0.3s;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 3em;\n  line-height: 1.5em;\n  width: 3em;\n  height: 3em;\n  display: block;\n  position: absolute;\n  padding: 0;\n  cursor: pointer;\n  opacity: 1;\n  background-color: #FFDD33;\n  border-radius: 50%;\n  font: normal normal normal 18px/1 FontAwesome;\n}\n.trust-video-play:before {\n  content: \"\\f04b\";\n}\n.trust-video-play.paused:before {\n  content: \"\\f04c\";\n}\n.trust-video-volume {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  line-height: 1.5em;\n  width: 2em;\n  height: 1.5em;\n  display: block;\n  position: absolute;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  left: 20px;\n}\n.trust-video-volume:before {\n  content: \"\\f028\";\n}\n.trust-video-volume.off:before {\n  content: \"\\f026\";\n}\n.trust-video-fullscreen {\n  border-color: transparent;\n  color: rgba(43, 51, 63, 0.7);\n  font-size: 3em;\n  line-height: 1.5em;\n  width: 3em;\n  height: 1.5rem;\n  display: block;\n  position: absolute;\n  font: normal normal normal 18px/1 FontAwesome;\n  background-color: rgba(255, 221, 51, 0.7);\n  right: 20px;\n}\n.trust-video-fullscreen:before {\n  content: \"\\f065\";\n}\n\n.utu-screen-recording {\n  max-height: 80rem;\n  min-width: 20rem;\n  width: 27rem;\n  height: 43rem;\n  margin: 5% auto 0;\n  position: relative;\n  z-index: 1;\n  justify-content: center;\n  border-bottom-left-radius: 2%;\n  border-bottom-right-radius: 2%;\n  border-bottom: 13px #fbc93d solid;\n}\n\n.btn-round {\n  border: none;\n  margin: 5px 0;\n  width: 6rem;\n  height: 6rem;\n  border-radius: 90px;\n  border: none;\n  font-size: 9px;\n  font-weight: 500;\n  font-family: Roboto, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n}\n.btn-round-light {\n  background-color: #fbc93d;\n}\n.btn-round-dark {\n  background-color: #fbc93d;\n}\n.btn-round-loading {\n  position: absolute;\n  bottom: 2.5rem;\n}\n.btn-round-spinner-light {\n  fill: #000000;\n}\n.btn-round-spinner-dark {\n  fill: #000000;\n}\n.btn-round-stop {\n  position: absolute;\n  bottom: 2.5rem;\n}\n.btn-round-stop-light {\n  fill: #000000;\n}\n.btn-round-stop-dark {\n  fill: #000000;\n}\n.btn-round-text-light {\n  color: #000000;\n}\n.btn-round-text-dark {\n  color: #000000;\n}\n.btn-container {\n  display: flex;\n  justify-content: center;\n}\n.btn-stop-icon {\n  width: 30px;\n  height: 30px;\n  border-radius: 5px;\n}\n.btn-stop-icon-light {\n  background: #000000;\n}\n.btn-stop-icon-dark {\n  background: #000000;\n}\n\n.video-container {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.response-message {\n  height: 3rem;\n  line-height: 3rem;\n  width: 100%;\n}\n\n/* ----------- Large screens ----------- */\n@media only screen and (min-width: 768px) {\n  .video-container {\n    padding-top: 4rem;\n    padding-bottom: 4rem;\n  }\n}";
 	styleInject(css_248z$c);
 
 	var RangeError$2 = global$1.RangeError; // `String.prototype.repeat` method implementation
@@ -36887,7 +36892,7 @@
 	    facingMode: "user"
 	  };
 
-	  var _useUploadVideoApi = useUploadVideoApi(activeReader),
+	  var _useUploadVideoApi = useUploadVideoApi(apiUrl, activeReader),
 	      publishedVideoUrl = _useUploadVideoApi.publishedVideoUrl,
 	      successMessage = _useUploadVideoApi.successMessage,
 	      errorMessage = _useUploadVideoApi.errorMessage;