@myinterview/widget-react 1.1.22-development-2bfa0c3 → 1.1.23-beta-df99642
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/DeviceSelector.d.ts +2 -1
- package/dist/cjs/components/Setup.d.ts +1 -0
- package/dist/cjs/components/SetupChecks.d.ts +1 -0
- package/dist/cjs/components/VideoCamera.d.ts +1 -0
- package/dist/cjs/index.js +861 -386
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/interfaces/configInterface.d.ts +1 -0
- package/dist/cjs/interfaces/recorderInterface.d.ts +4 -1
- package/dist/cjs/interfaces/widgetInterface.d.ts +2 -0
- package/dist/cjs/utils/debug.utils.d.ts +1 -0
- package/dist/cjs/utils/messages.utils.d.ts +1 -0
- package/dist/esm/components/DeviceSelector.d.ts +2 -1
- package/dist/esm/components/Setup.d.ts +1 -0
- package/dist/esm/components/SetupChecks.d.ts +1 -0
- package/dist/esm/components/VideoCamera.d.ts +1 -0
- package/dist/esm/index.js +861 -386
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/interfaces/configInterface.d.ts +1 -0
- package/dist/esm/interfaces/recorderInterface.d.ts +4 -1
- package/dist/esm/interfaces/widgetInterface.d.ts +2 -0
- package/dist/esm/utils/debug.utils.d.ts +1 -0
- package/dist/esm/utils/messages.utils.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/package.json +3 -3
package/dist/esm/index.js
CHANGED
|
@@ -2071,7 +2071,10 @@ function visit(
|
|
|
2071
2071
|
const [memoize, unmemoize] = memo;
|
|
2072
2072
|
|
|
2073
2073
|
// Get the simple cases out of the way first
|
|
2074
|
-
if (
|
|
2074
|
+
if (
|
|
2075
|
+
value == null || // this matches null and undefined -> eqeq not eqeqeq
|
|
2076
|
+
(['number', 'boolean', 'string'].includes(typeof value) && !isNaN$1(value))
|
|
2077
|
+
) {
|
|
2075
2078
|
return value ;
|
|
2076
2079
|
}
|
|
2077
2080
|
|
|
@@ -2209,11 +2212,6 @@ function stringifyValue(
|
|
|
2209
2212
|
return '[NaN]';
|
|
2210
2213
|
}
|
|
2211
2214
|
|
|
2212
|
-
// this catches `undefined` (but not `null`, which is a primitive and can be serialized on its own)
|
|
2213
|
-
if (value === void 0) {
|
|
2214
|
-
return '[undefined]';
|
|
2215
|
-
}
|
|
2216
|
-
|
|
2217
2215
|
if (typeof value === 'function') {
|
|
2218
2216
|
return `[Function: ${getFunctionName(value)}]`;
|
|
2219
2217
|
}
|
|
@@ -5796,7 +5794,7 @@ function getEventForEnvelopeItem(item, type) {
|
|
|
5796
5794
|
return Array.isArray(item) ? (item )[1] : undefined;
|
|
5797
5795
|
}
|
|
5798
5796
|
|
|
5799
|
-
const SDK_VERSION = '7.
|
|
5797
|
+
const SDK_VERSION = '7.52.1';
|
|
5800
5798
|
|
|
5801
5799
|
let originalFunctionToString;
|
|
5802
5800
|
|
|
@@ -5977,8 +5975,9 @@ function _getPossibleEventMessages(event) {
|
|
|
5977
5975
|
return [event.message];
|
|
5978
5976
|
}
|
|
5979
5977
|
if (event.exception) {
|
|
5978
|
+
const { values } = event.exception;
|
|
5980
5979
|
try {
|
|
5981
|
-
const { type = '', value = '' } = (
|
|
5980
|
+
const { type = '', value = '' } = (values && values[values.length - 1]) || {};
|
|
5982
5981
|
return [`${value}`, `${type}: ${value}`];
|
|
5983
5982
|
} catch (oO) {
|
|
5984
5983
|
(typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.error(`Cannot extract message for event ${getEventDescription(event)}`);
|
|
@@ -8335,7 +8334,7 @@ function maskInputValue({ input, maskInputSelector, unmaskInputSelector, maskInp
|
|
|
8335
8334
|
if (unmaskInputSelector && input.matches(unmaskInputSelector)) {
|
|
8336
8335
|
return text;
|
|
8337
8336
|
}
|
|
8338
|
-
if (input.hasAttribute('
|
|
8337
|
+
if (input.hasAttribute('data-rr-is-password')) {
|
|
8339
8338
|
type = 'password';
|
|
8340
8339
|
}
|
|
8341
8340
|
if (isInputTypeMasked({ maskInputOptions, tagName, type }) ||
|
|
@@ -8368,6 +8367,21 @@ function is2DCanvasBlank(canvas) {
|
|
|
8368
8367
|
}
|
|
8369
8368
|
return true;
|
|
8370
8369
|
}
|
|
8370
|
+
function getInputType(element) {
|
|
8371
|
+
const type = element.type;
|
|
8372
|
+
return element.hasAttribute('data-rr-is-password')
|
|
8373
|
+
? 'password'
|
|
8374
|
+
: type
|
|
8375
|
+
? type.toLowerCase()
|
|
8376
|
+
: null;
|
|
8377
|
+
}
|
|
8378
|
+
function getInputValue(el, tagName, type) {
|
|
8379
|
+
typeof type === 'string' ? type.toLowerCase() : '';
|
|
8380
|
+
if (tagName === 'INPUT' && (type === 'radio' || type === 'checkbox')) {
|
|
8381
|
+
return el.getAttribute('value') || '';
|
|
8382
|
+
}
|
|
8383
|
+
return el.value;
|
|
8384
|
+
}
|
|
8371
8385
|
|
|
8372
8386
|
let _id = 1;
|
|
8373
8387
|
const tagNameRegex = new RegExp('[^a-z0-9-_:]');
|
|
@@ -8406,6 +8420,13 @@ function getCssRuleString(rule) {
|
|
|
8406
8420
|
catch (_a) {
|
|
8407
8421
|
}
|
|
8408
8422
|
}
|
|
8423
|
+
return validateStringifiedCssRule(cssStringified);
|
|
8424
|
+
}
|
|
8425
|
+
function validateStringifiedCssRule(cssStringified) {
|
|
8426
|
+
if (cssStringified.indexOf(':') > -1) {
|
|
8427
|
+
const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
|
|
8428
|
+
return cssStringified.replace(regex, '$1\\$2');
|
|
8429
|
+
}
|
|
8409
8430
|
return cssStringified;
|
|
8410
8431
|
}
|
|
8411
8432
|
function isCSSImportRule(rule) {
|
|
@@ -8414,7 +8435,7 @@ function isCSSImportRule(rule) {
|
|
|
8414
8435
|
function stringifyStyleSheet(sheet) {
|
|
8415
8436
|
return sheet.cssRules
|
|
8416
8437
|
? Array.from(sheet.cssRules)
|
|
8417
|
-
.map((rule) => rule.cssText
|
|
8438
|
+
.map((rule) => rule.cssText ? validateStringifiedCssRule(rule.cssText) : '')
|
|
8418
8439
|
.join('')
|
|
8419
8440
|
: '';
|
|
8420
8441
|
}
|
|
@@ -8749,14 +8770,15 @@ function serializeNode(n, options) {
|
|
|
8749
8770
|
tagName === 'select' ||
|
|
8750
8771
|
tagName === 'option') {
|
|
8751
8772
|
const el = n;
|
|
8752
|
-
const
|
|
8773
|
+
const type = getInputType(el);
|
|
8774
|
+
const value = getInputValue(el, tagName.toUpperCase(), type);
|
|
8753
8775
|
const checked = n.checked;
|
|
8754
|
-
if (
|
|
8755
|
-
|
|
8776
|
+
if (type !== 'submit' &&
|
|
8777
|
+
type !== 'button' &&
|
|
8756
8778
|
value) {
|
|
8757
8779
|
attributes.value = maskInputValue({
|
|
8758
8780
|
input: el,
|
|
8759
|
-
type
|
|
8781
|
+
type,
|
|
8760
8782
|
tagName,
|
|
8761
8783
|
value,
|
|
8762
8784
|
maskInputSelector,
|
|
@@ -9229,15 +9251,8 @@ function snapshot(n, options) {
|
|
|
9229
9251
|
function skipAttribute(tagName, attributeName, value) {
|
|
9230
9252
|
return ((tagName === 'video' || tagName === 'audio') && attributeName === 'autoplay');
|
|
9231
9253
|
}
|
|
9232
|
-
function getInputValue(tagName, el, attributes) {
|
|
9233
|
-
if (tagName === 'input' &&
|
|
9234
|
-
(attributes.type === 'radio' || attributes.type === 'checkbox')) {
|
|
9235
|
-
return el.getAttribute('value') || '';
|
|
9236
|
-
}
|
|
9237
|
-
return el.value;
|
|
9238
|
-
}
|
|
9239
9254
|
|
|
9240
|
-
var EventType;
|
|
9255
|
+
var EventType$1;
|
|
9241
9256
|
(function (EventType) {
|
|
9242
9257
|
EventType[EventType["DomContentLoaded"] = 0] = "DomContentLoaded";
|
|
9243
9258
|
EventType[EventType["Load"] = 1] = "Load";
|
|
@@ -9246,7 +9261,7 @@ var EventType;
|
|
|
9246
9261
|
EventType[EventType["Meta"] = 4] = "Meta";
|
|
9247
9262
|
EventType[EventType["Custom"] = 5] = "Custom";
|
|
9248
9263
|
EventType[EventType["Plugin"] = 6] = "Plugin";
|
|
9249
|
-
})(EventType || (EventType = {}));
|
|
9264
|
+
})(EventType$1 || (EventType$1 = {}));
|
|
9250
9265
|
var IncrementalSource;
|
|
9251
9266
|
(function (IncrementalSource) {
|
|
9252
9267
|
IncrementalSource[IncrementalSource["Mutation"] = 0] = "Mutation";
|
|
@@ -9861,9 +9876,9 @@ class MutationBuffer {
|
|
|
9861
9876
|
this.attributes.push(item);
|
|
9862
9877
|
}
|
|
9863
9878
|
if (m.attributeName === 'type' &&
|
|
9864
|
-
|
|
9879
|
+
target.tagName === 'INPUT' &&
|
|
9865
9880
|
(m.oldValue || '').toLowerCase() === 'password') {
|
|
9866
|
-
|
|
9881
|
+
target.setAttribute('data-rr-is-password', 'true');
|
|
9867
9882
|
}
|
|
9868
9883
|
if (m.attributeName === 'style') {
|
|
9869
9884
|
const old = this.doc.createElement('span');
|
|
@@ -10260,27 +10275,25 @@ function initInputObserver({ inputCb, doc, mirror, blockClass, blockSelector, un
|
|
|
10260
10275
|
isBlocked(target, blockClass, blockSelector, unblockSelector)) {
|
|
10261
10276
|
return;
|
|
10262
10277
|
}
|
|
10263
|
-
|
|
10264
|
-
|
|
10265
|
-
|
|
10278
|
+
const el = target;
|
|
10279
|
+
const type = getInputType(el);
|
|
10280
|
+
if (el.classList.contains(ignoreClass) ||
|
|
10281
|
+
(ignoreSelector && el.matches(ignoreSelector))) {
|
|
10266
10282
|
return;
|
|
10267
10283
|
}
|
|
10268
|
-
let text =
|
|
10284
|
+
let text = getInputValue(el, tagName, type);
|
|
10269
10285
|
let isChecked = false;
|
|
10270
|
-
if (target.hasAttribute('rr_is_password')) {
|
|
10271
|
-
type = 'password';
|
|
10272
|
-
}
|
|
10273
10286
|
if (type === 'radio' || type === 'checkbox') {
|
|
10274
10287
|
isChecked = target.checked;
|
|
10275
10288
|
}
|
|
10276
|
-
|
|
10289
|
+
if (hasInputMaskOptions({
|
|
10277
10290
|
maskInputOptions,
|
|
10278
10291
|
maskInputSelector,
|
|
10279
10292
|
tagName,
|
|
10280
10293
|
type,
|
|
10281
10294
|
})) {
|
|
10282
10295
|
text = maskInputValue({
|
|
10283
|
-
input:
|
|
10296
|
+
input: el,
|
|
10284
10297
|
maskInputOptions,
|
|
10285
10298
|
maskInputSelector,
|
|
10286
10299
|
unmaskInputSelector,
|
|
@@ -10297,8 +10310,18 @@ function initInputObserver({ inputCb, doc, mirror, blockClass, blockSelector, un
|
|
|
10297
10310
|
.querySelectorAll(`input[type="radio"][name="${name}"]`)
|
|
10298
10311
|
.forEach((el) => {
|
|
10299
10312
|
if (el !== target) {
|
|
10313
|
+
const text = maskInputValue({
|
|
10314
|
+
input: el,
|
|
10315
|
+
maskInputOptions,
|
|
10316
|
+
maskInputSelector,
|
|
10317
|
+
unmaskInputSelector,
|
|
10318
|
+
tagName,
|
|
10319
|
+
type,
|
|
10320
|
+
value: getInputValue(el, tagName, type),
|
|
10321
|
+
maskInputFn,
|
|
10322
|
+
});
|
|
10300
10323
|
cbWithDedup(el, callbackWrapper(wrapEventWithUserTriggeredFlag)({
|
|
10301
|
-
text
|
|
10324
|
+
text,
|
|
10302
10325
|
isChecked: !isChecked,
|
|
10303
10326
|
userTriggered: false,
|
|
10304
10327
|
}, userTriggeredOnInput));
|
|
@@ -11211,17 +11234,17 @@ function record(options = {}) {
|
|
|
11211
11234
|
wrappedEmit = (e, isCheckout) => {
|
|
11212
11235
|
var _a;
|
|
11213
11236
|
if (((_a = mutationBuffers[0]) === null || _a === void 0 ? void 0 : _a.isFrozen()) &&
|
|
11214
|
-
e.type !== EventType.FullSnapshot &&
|
|
11215
|
-
!(e.type === EventType.IncrementalSnapshot &&
|
|
11237
|
+
e.type !== EventType$1.FullSnapshot &&
|
|
11238
|
+
!(e.type === EventType$1.IncrementalSnapshot &&
|
|
11216
11239
|
e.data.source === IncrementalSource.Mutation)) {
|
|
11217
11240
|
mutationBuffers.forEach((buf) => buf.unfreeze());
|
|
11218
11241
|
}
|
|
11219
11242
|
emit(eventProcessor(e), isCheckout);
|
|
11220
|
-
if (e.type === EventType.FullSnapshot) {
|
|
11243
|
+
if (e.type === EventType$1.FullSnapshot) {
|
|
11221
11244
|
lastFullSnapshotEvent = e;
|
|
11222
11245
|
incrementalSnapshotCount = 0;
|
|
11223
11246
|
}
|
|
11224
|
-
else if (e.type === EventType.IncrementalSnapshot) {
|
|
11247
|
+
else if (e.type === EventType$1.IncrementalSnapshot) {
|
|
11225
11248
|
if (e.data.source === IncrementalSource.Mutation &&
|
|
11226
11249
|
e.data.isAttachIframe) {
|
|
11227
11250
|
return;
|
|
@@ -11237,16 +11260,16 @@ function record(options = {}) {
|
|
|
11237
11260
|
};
|
|
11238
11261
|
const wrappedMutationEmit = (m) => {
|
|
11239
11262
|
wrappedEmit(wrapEvent({
|
|
11240
|
-
type: EventType.IncrementalSnapshot,
|
|
11263
|
+
type: EventType$1.IncrementalSnapshot,
|
|
11241
11264
|
data: Object.assign({ source: IncrementalSource.Mutation }, m),
|
|
11242
11265
|
}));
|
|
11243
11266
|
};
|
|
11244
11267
|
const wrappedScrollEmit = (p) => wrappedEmit(wrapEvent({
|
|
11245
|
-
type: EventType.IncrementalSnapshot,
|
|
11268
|
+
type: EventType$1.IncrementalSnapshot,
|
|
11246
11269
|
data: Object.assign({ source: IncrementalSource.Scroll }, p),
|
|
11247
11270
|
}));
|
|
11248
11271
|
const wrappedCanvasMutationEmit = (p) => wrappedEmit(wrapEvent({
|
|
11249
|
-
type: EventType.IncrementalSnapshot,
|
|
11272
|
+
type: EventType$1.IncrementalSnapshot,
|
|
11250
11273
|
data: Object.assign({ source: IncrementalSource.CanvasMutation }, p),
|
|
11251
11274
|
}));
|
|
11252
11275
|
const iframeManager = new IframeManager({
|
|
@@ -11291,7 +11314,7 @@ function record(options = {}) {
|
|
|
11291
11314
|
takeFullSnapshot = (isCheckout = false) => {
|
|
11292
11315
|
var _a, _b, _c, _d;
|
|
11293
11316
|
wrappedEmit(wrapEvent({
|
|
11294
|
-
type: EventType.Meta,
|
|
11317
|
+
type: EventType$1.Meta,
|
|
11295
11318
|
data: {
|
|
11296
11319
|
href: window.location.href,
|
|
11297
11320
|
width: getWindowWidth(),
|
|
@@ -11334,7 +11357,7 @@ function record(options = {}) {
|
|
|
11334
11357
|
}
|
|
11335
11358
|
mirror.map = idNodeMap;
|
|
11336
11359
|
wrappedEmit(wrapEvent({
|
|
11337
|
-
type: EventType.FullSnapshot,
|
|
11360
|
+
type: EventType$1.FullSnapshot,
|
|
11338
11361
|
data: {
|
|
11339
11362
|
node,
|
|
11340
11363
|
initialOffset: {
|
|
@@ -11359,7 +11382,7 @@ function record(options = {}) {
|
|
|
11359
11382
|
const handlers = [];
|
|
11360
11383
|
handlers.push(on$1('DOMContentLoaded', () => {
|
|
11361
11384
|
wrappedEmit(wrapEvent({
|
|
11362
|
-
type: EventType.DomContentLoaded,
|
|
11385
|
+
type: EventType$1.DomContentLoaded,
|
|
11363
11386
|
data: {},
|
|
11364
11387
|
}));
|
|
11365
11388
|
}));
|
|
@@ -11369,40 +11392,40 @@ function record(options = {}) {
|
|
|
11369
11392
|
onMutation,
|
|
11370
11393
|
mutationCb: wrappedMutationEmit,
|
|
11371
11394
|
mousemoveCb: (positions, source) => wrappedEmit(wrapEvent({
|
|
11372
|
-
type: EventType.IncrementalSnapshot,
|
|
11395
|
+
type: EventType$1.IncrementalSnapshot,
|
|
11373
11396
|
data: {
|
|
11374
11397
|
source,
|
|
11375
11398
|
positions,
|
|
11376
11399
|
},
|
|
11377
11400
|
})),
|
|
11378
11401
|
mouseInteractionCb: (d) => wrappedEmit(wrapEvent({
|
|
11379
|
-
type: EventType.IncrementalSnapshot,
|
|
11402
|
+
type: EventType$1.IncrementalSnapshot,
|
|
11380
11403
|
data: Object.assign({ source: IncrementalSource.MouseInteraction }, d),
|
|
11381
11404
|
})),
|
|
11382
11405
|
scrollCb: wrappedScrollEmit,
|
|
11383
11406
|
viewportResizeCb: (d) => wrappedEmit(wrapEvent({
|
|
11384
|
-
type: EventType.IncrementalSnapshot,
|
|
11407
|
+
type: EventType$1.IncrementalSnapshot,
|
|
11385
11408
|
data: Object.assign({ source: IncrementalSource.ViewportResize }, d),
|
|
11386
11409
|
})),
|
|
11387
11410
|
inputCb: (v) => wrappedEmit(wrapEvent({
|
|
11388
|
-
type: EventType.IncrementalSnapshot,
|
|
11411
|
+
type: EventType$1.IncrementalSnapshot,
|
|
11389
11412
|
data: Object.assign({ source: IncrementalSource.Input }, v),
|
|
11390
11413
|
})),
|
|
11391
11414
|
mediaInteractionCb: (p) => wrappedEmit(wrapEvent({
|
|
11392
|
-
type: EventType.IncrementalSnapshot,
|
|
11415
|
+
type: EventType$1.IncrementalSnapshot,
|
|
11393
11416
|
data: Object.assign({ source: IncrementalSource.MediaInteraction }, p),
|
|
11394
11417
|
})),
|
|
11395
11418
|
styleSheetRuleCb: (r) => wrappedEmit(wrapEvent({
|
|
11396
|
-
type: EventType.IncrementalSnapshot,
|
|
11419
|
+
type: EventType$1.IncrementalSnapshot,
|
|
11397
11420
|
data: Object.assign({ source: IncrementalSource.StyleSheetRule }, r),
|
|
11398
11421
|
})),
|
|
11399
11422
|
styleDeclarationCb: (r) => wrappedEmit(wrapEvent({
|
|
11400
|
-
type: EventType.IncrementalSnapshot,
|
|
11423
|
+
type: EventType$1.IncrementalSnapshot,
|
|
11401
11424
|
data: Object.assign({ source: IncrementalSource.StyleDeclaration }, r),
|
|
11402
11425
|
})),
|
|
11403
11426
|
canvasMutationCb: wrappedCanvasMutationEmit,
|
|
11404
11427
|
fontCb: (p) => wrappedEmit(wrapEvent({
|
|
11405
|
-
type: EventType.IncrementalSnapshot,
|
|
11428
|
+
type: EventType$1.IncrementalSnapshot,
|
|
11406
11429
|
data: Object.assign({ source: IncrementalSource.Font }, p),
|
|
11407
11430
|
})),
|
|
11408
11431
|
blockClass,
|
|
@@ -11435,7 +11458,7 @@ function record(options = {}) {
|
|
|
11435
11458
|
observer: p.observer,
|
|
11436
11459
|
options: p.options,
|
|
11437
11460
|
callback: (payload) => wrappedEmit(wrapEvent({
|
|
11438
|
-
type: EventType.Plugin,
|
|
11461
|
+
type: EventType$1.Plugin,
|
|
11439
11462
|
data: {
|
|
11440
11463
|
plugin: p.name,
|
|
11441
11464
|
payload,
|
|
@@ -11463,7 +11486,7 @@ function record(options = {}) {
|
|
|
11463
11486
|
else {
|
|
11464
11487
|
handlers.push(on$1('load', () => {
|
|
11465
11488
|
wrappedEmit(wrapEvent({
|
|
11466
|
-
type: EventType.Load,
|
|
11489
|
+
type: EventType$1.Load,
|
|
11467
11490
|
data: {},
|
|
11468
11491
|
}));
|
|
11469
11492
|
init();
|
|
@@ -11482,7 +11505,7 @@ record.addCustomEvent = (tag, payload) => {
|
|
|
11482
11505
|
throw new Error('please add custom event after start recording');
|
|
11483
11506
|
}
|
|
11484
11507
|
wrappedEmit(wrapEvent({
|
|
11485
|
-
type: EventType.Custom,
|
|
11508
|
+
type: EventType$1.Custom,
|
|
11486
11509
|
data: {
|
|
11487
11510
|
tag,
|
|
11488
11511
|
payload,
|
|
@@ -11500,6 +11523,475 @@ record.takeFullSnapshot = (isCheckout) => {
|
|
|
11500
11523
|
};
|
|
11501
11524
|
record.mirror = mirror;
|
|
11502
11525
|
|
|
11526
|
+
/**
|
|
11527
|
+
* Create a breadcrumb for a replay.
|
|
11528
|
+
*/
|
|
11529
|
+
function createBreadcrumb(
|
|
11530
|
+
breadcrumb,
|
|
11531
|
+
) {
|
|
11532
|
+
return {
|
|
11533
|
+
timestamp: Date.now() / 1000,
|
|
11534
|
+
type: 'default',
|
|
11535
|
+
...breadcrumb,
|
|
11536
|
+
};
|
|
11537
|
+
}
|
|
11538
|
+
|
|
11539
|
+
var NodeType;
|
|
11540
|
+
(function (NodeType) {
|
|
11541
|
+
NodeType[NodeType["Document"] = 0] = "Document";
|
|
11542
|
+
NodeType[NodeType["DocumentType"] = 1] = "DocumentType";
|
|
11543
|
+
NodeType[NodeType["Element"] = 2] = "Element";
|
|
11544
|
+
NodeType[NodeType["Text"] = 3] = "Text";
|
|
11545
|
+
NodeType[NodeType["CDATA"] = 4] = "CDATA";
|
|
11546
|
+
NodeType[NodeType["Comment"] = 5] = "Comment";
|
|
11547
|
+
})(NodeType || (NodeType = {}));
|
|
11548
|
+
|
|
11549
|
+
/**
|
|
11550
|
+
* Converts a timestamp to ms, if it was in s, or keeps it as ms.
|
|
11551
|
+
*/
|
|
11552
|
+
function timestampToMs(timestamp) {
|
|
11553
|
+
const isMs = timestamp > 9999999999;
|
|
11554
|
+
return isMs ? timestamp : timestamp * 1000;
|
|
11555
|
+
}
|
|
11556
|
+
|
|
11557
|
+
/**
|
|
11558
|
+
* Add an event to the event buffer.
|
|
11559
|
+
* `isCheckout` is true if this is either the very first event, or an event triggered by `checkoutEveryNms`.
|
|
11560
|
+
*/
|
|
11561
|
+
async function addEvent(
|
|
11562
|
+
replay,
|
|
11563
|
+
event,
|
|
11564
|
+
isCheckout,
|
|
11565
|
+
) {
|
|
11566
|
+
if (!replay.eventBuffer) {
|
|
11567
|
+
// This implies that `_isEnabled` is false
|
|
11568
|
+
return null;
|
|
11569
|
+
}
|
|
11570
|
+
|
|
11571
|
+
if (replay.isPaused()) {
|
|
11572
|
+
// Do not add to event buffer when recording is paused
|
|
11573
|
+
return null;
|
|
11574
|
+
}
|
|
11575
|
+
|
|
11576
|
+
const timestampInMs = timestampToMs(event.timestamp);
|
|
11577
|
+
|
|
11578
|
+
// Throw out events that happen more than 5 minutes ago. This can happen if
|
|
11579
|
+
// page has been left open and idle for a long period of time and user
|
|
11580
|
+
// comes back to trigger a new session. The performance entries rely on
|
|
11581
|
+
// `performance.timeOrigin`, which is when the page first opened.
|
|
11582
|
+
if (timestampInMs + replay.timeouts.sessionIdlePause < Date.now()) {
|
|
11583
|
+
return null;
|
|
11584
|
+
}
|
|
11585
|
+
|
|
11586
|
+
try {
|
|
11587
|
+
if (isCheckout) {
|
|
11588
|
+
replay.eventBuffer.clear();
|
|
11589
|
+
}
|
|
11590
|
+
|
|
11591
|
+
return await replay.eventBuffer.addEvent(event);
|
|
11592
|
+
} catch (error) {
|
|
11593
|
+
(typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.error(error);
|
|
11594
|
+
await replay.stop('addEvent');
|
|
11595
|
+
|
|
11596
|
+
const client = getCurrentHub().getClient();
|
|
11597
|
+
|
|
11598
|
+
if (client) {
|
|
11599
|
+
client.recordDroppedEvent('internal_sdk_error', 'replay');
|
|
11600
|
+
}
|
|
11601
|
+
}
|
|
11602
|
+
}
|
|
11603
|
+
|
|
11604
|
+
/**
|
|
11605
|
+
* Add a breadcrumb event to replay.
|
|
11606
|
+
*/
|
|
11607
|
+
function addBreadcrumbEvent(replay, breadcrumb) {
|
|
11608
|
+
if (breadcrumb.category === 'sentry.transaction') {
|
|
11609
|
+
return;
|
|
11610
|
+
}
|
|
11611
|
+
|
|
11612
|
+
if (['ui.click', 'ui.input'].includes(breadcrumb.category )) {
|
|
11613
|
+
replay.triggerUserActivity();
|
|
11614
|
+
} else {
|
|
11615
|
+
replay.checkAndHandleExpiredSession();
|
|
11616
|
+
}
|
|
11617
|
+
|
|
11618
|
+
replay.addUpdate(() => {
|
|
11619
|
+
void addEvent(replay, {
|
|
11620
|
+
type: EventType$1.Custom,
|
|
11621
|
+
// TODO: We were converting from ms to seconds for breadcrumbs, spans,
|
|
11622
|
+
// but maybe we should just keep them as milliseconds
|
|
11623
|
+
timestamp: (breadcrumb.timestamp || 0) * 1000,
|
|
11624
|
+
data: {
|
|
11625
|
+
tag: 'breadcrumb',
|
|
11626
|
+
// normalize to max. 10 depth and 1_000 properties per object
|
|
11627
|
+
payload: normalize(breadcrumb, 10, 1000),
|
|
11628
|
+
},
|
|
11629
|
+
});
|
|
11630
|
+
|
|
11631
|
+
// Do not flush after console log messages
|
|
11632
|
+
return breadcrumb.category === 'console';
|
|
11633
|
+
});
|
|
11634
|
+
}
|
|
11635
|
+
|
|
11636
|
+
/**
|
|
11637
|
+
* Detect a slow click on a button/a tag,
|
|
11638
|
+
* and potentially create a corresponding breadcrumb.
|
|
11639
|
+
*/
|
|
11640
|
+
function detectSlowClick(
|
|
11641
|
+
replay,
|
|
11642
|
+
config,
|
|
11643
|
+
clickBreadcrumb,
|
|
11644
|
+
node,
|
|
11645
|
+
) {
|
|
11646
|
+
if (ignoreElement(node, config)) {
|
|
11647
|
+
return;
|
|
11648
|
+
}
|
|
11649
|
+
|
|
11650
|
+
/*
|
|
11651
|
+
We consider a slow click a click on a button/a, which does not trigger one of:
|
|
11652
|
+
- DOM mutation
|
|
11653
|
+
- Scroll (within 100ms)
|
|
11654
|
+
Within the given threshold time.
|
|
11655
|
+
After time timeout time, we stop listening and mark it as a slow click anyhow.
|
|
11656
|
+
*/
|
|
11657
|
+
|
|
11658
|
+
let cleanup = () => {
|
|
11659
|
+
// replaced further down
|
|
11660
|
+
};
|
|
11661
|
+
|
|
11662
|
+
// After timeout time, def. consider this a slow click, and stop watching for mutations
|
|
11663
|
+
const timeout = setTimeout(() => {
|
|
11664
|
+
handleSlowClick(replay, clickBreadcrumb, config.timeout, 'timeout');
|
|
11665
|
+
cleanup();
|
|
11666
|
+
}, config.timeout);
|
|
11667
|
+
|
|
11668
|
+
const mutationHandler = () => {
|
|
11669
|
+
maybeHandleSlowClick(replay, clickBreadcrumb, config.threshold, config.timeout, 'mutation');
|
|
11670
|
+
cleanup();
|
|
11671
|
+
};
|
|
11672
|
+
|
|
11673
|
+
const scrollHandler = () => {
|
|
11674
|
+
maybeHandleSlowClick(replay, clickBreadcrumb, config.scrollTimeout, config.timeout, 'scroll');
|
|
11675
|
+
cleanup();
|
|
11676
|
+
};
|
|
11677
|
+
|
|
11678
|
+
const obs = new MutationObserver(mutationHandler);
|
|
11679
|
+
|
|
11680
|
+
obs.observe(WINDOW.document.documentElement, {
|
|
11681
|
+
attributes: true,
|
|
11682
|
+
characterData: true,
|
|
11683
|
+
childList: true,
|
|
11684
|
+
subtree: true,
|
|
11685
|
+
});
|
|
11686
|
+
|
|
11687
|
+
WINDOW.addEventListener('scroll', scrollHandler);
|
|
11688
|
+
|
|
11689
|
+
// Stop listening to scroll timeouts early
|
|
11690
|
+
const scrollTimeout = setTimeout(() => {
|
|
11691
|
+
WINDOW.removeEventListener('scroll', scrollHandler);
|
|
11692
|
+
}, config.scrollTimeout);
|
|
11693
|
+
|
|
11694
|
+
cleanup = () => {
|
|
11695
|
+
clearTimeout(timeout);
|
|
11696
|
+
clearTimeout(scrollTimeout);
|
|
11697
|
+
obs.disconnect();
|
|
11698
|
+
WINDOW.removeEventListener('scroll', scrollHandler);
|
|
11699
|
+
};
|
|
11700
|
+
}
|
|
11701
|
+
|
|
11702
|
+
function maybeHandleSlowClick(
|
|
11703
|
+
replay,
|
|
11704
|
+
clickBreadcrumb,
|
|
11705
|
+
threshold,
|
|
11706
|
+
timeout,
|
|
11707
|
+
endReason,
|
|
11708
|
+
) {
|
|
11709
|
+
const now = Date.now();
|
|
11710
|
+
const timeAfterClickMs = now - clickBreadcrumb.timestamp * 1000;
|
|
11711
|
+
|
|
11712
|
+
if (timeAfterClickMs > threshold) {
|
|
11713
|
+
handleSlowClick(replay, clickBreadcrumb, Math.min(timeAfterClickMs, timeout), endReason);
|
|
11714
|
+
return true;
|
|
11715
|
+
}
|
|
11716
|
+
|
|
11717
|
+
return false;
|
|
11718
|
+
}
|
|
11719
|
+
|
|
11720
|
+
function handleSlowClick(
|
|
11721
|
+
replay,
|
|
11722
|
+
clickBreadcrumb,
|
|
11723
|
+
timeAfterClickMs,
|
|
11724
|
+
endReason,
|
|
11725
|
+
) {
|
|
11726
|
+
const breadcrumb = {
|
|
11727
|
+
message: clickBreadcrumb.message,
|
|
11728
|
+
timestamp: clickBreadcrumb.timestamp,
|
|
11729
|
+
category: 'ui.slowClickDetected',
|
|
11730
|
+
data: {
|
|
11731
|
+
...clickBreadcrumb.data,
|
|
11732
|
+
url: WINDOW.location.href,
|
|
11733
|
+
// TODO FN: add parametrized route, when possible
|
|
11734
|
+
timeAfterClickMs,
|
|
11735
|
+
endReason,
|
|
11736
|
+
},
|
|
11737
|
+
};
|
|
11738
|
+
|
|
11739
|
+
addBreadcrumbEvent(replay, breadcrumb);
|
|
11740
|
+
}
|
|
11741
|
+
|
|
11742
|
+
const SLOW_CLICK_IGNORE_TAGS = ['SELECT', 'OPTION'];
|
|
11743
|
+
|
|
11744
|
+
function ignoreElement(node, config) {
|
|
11745
|
+
// If <input> tag, we only want to consider input[type='submit'] & input[type='button']
|
|
11746
|
+
if (node.tagName === 'INPUT' && !['submit', 'button'].includes(node.getAttribute('type') || '')) {
|
|
11747
|
+
return true;
|
|
11748
|
+
}
|
|
11749
|
+
|
|
11750
|
+
if (SLOW_CLICK_IGNORE_TAGS.includes(node.tagName)) {
|
|
11751
|
+
return true;
|
|
11752
|
+
}
|
|
11753
|
+
|
|
11754
|
+
// If <a> tag, detect special variants that may not lead to an action
|
|
11755
|
+
// If target !== _self, we may open the link somewhere else, which would lead to no action
|
|
11756
|
+
// Also, when downloading a file, we may not leave the page, but still not trigger an action
|
|
11757
|
+
if (
|
|
11758
|
+
node.tagName === 'A' &&
|
|
11759
|
+
(node.hasAttribute('download') || (node.hasAttribute('target') && node.getAttribute('target') !== '_self'))
|
|
11760
|
+
) {
|
|
11761
|
+
return true;
|
|
11762
|
+
}
|
|
11763
|
+
|
|
11764
|
+
if (config.ignoreSelector && node.matches(config.ignoreSelector)) {
|
|
11765
|
+
return true;
|
|
11766
|
+
}
|
|
11767
|
+
|
|
11768
|
+
return false;
|
|
11769
|
+
}
|
|
11770
|
+
|
|
11771
|
+
// Note that these are the serialized attributes and not attributes directly on
|
|
11772
|
+
// the DOM Node. Attributes we are interested in:
|
|
11773
|
+
const ATTRIBUTES_TO_RECORD = new Set([
|
|
11774
|
+
'id',
|
|
11775
|
+
'class',
|
|
11776
|
+
'aria-label',
|
|
11777
|
+
'role',
|
|
11778
|
+
'name',
|
|
11779
|
+
'alt',
|
|
11780
|
+
'title',
|
|
11781
|
+
'data-test-id',
|
|
11782
|
+
'data-testid',
|
|
11783
|
+
]);
|
|
11784
|
+
|
|
11785
|
+
/**
|
|
11786
|
+
* Inclusion list of attributes that we want to record from the DOM element
|
|
11787
|
+
*/
|
|
11788
|
+
function getAttributesToRecord(attributes) {
|
|
11789
|
+
const obj = {};
|
|
11790
|
+
for (const key in attributes) {
|
|
11791
|
+
if (ATTRIBUTES_TO_RECORD.has(key)) {
|
|
11792
|
+
let normalizedKey = key;
|
|
11793
|
+
|
|
11794
|
+
if (key === 'data-testid' || key === 'data-test-id') {
|
|
11795
|
+
normalizedKey = 'testId';
|
|
11796
|
+
}
|
|
11797
|
+
|
|
11798
|
+
obj[normalizedKey] = attributes[key];
|
|
11799
|
+
}
|
|
11800
|
+
}
|
|
11801
|
+
|
|
11802
|
+
return obj;
|
|
11803
|
+
}
|
|
11804
|
+
|
|
11805
|
+
const handleDomListener = (
|
|
11806
|
+
replay,
|
|
11807
|
+
) => {
|
|
11808
|
+
const slowClickExperiment = replay.getOptions()._experiments.slowClicks;
|
|
11809
|
+
|
|
11810
|
+
const slowClickConfig = slowClickExperiment
|
|
11811
|
+
? {
|
|
11812
|
+
threshold: slowClickExperiment.threshold,
|
|
11813
|
+
timeout: slowClickExperiment.timeout,
|
|
11814
|
+
scrollTimeout: slowClickExperiment.scrollTimeout,
|
|
11815
|
+
ignoreSelector: slowClickExperiment.ignoreSelectors ? slowClickExperiment.ignoreSelectors.join(',') : '',
|
|
11816
|
+
}
|
|
11817
|
+
: undefined;
|
|
11818
|
+
|
|
11819
|
+
return (handlerData) => {
|
|
11820
|
+
if (!replay.isEnabled()) {
|
|
11821
|
+
return;
|
|
11822
|
+
}
|
|
11823
|
+
|
|
11824
|
+
const result = handleDom(handlerData);
|
|
11825
|
+
|
|
11826
|
+
if (!result) {
|
|
11827
|
+
return;
|
|
11828
|
+
}
|
|
11829
|
+
|
|
11830
|
+
const isClick = handlerData.name === 'click';
|
|
11831
|
+
const event = isClick && (handlerData.event );
|
|
11832
|
+
// Ignore clicks if ctrl/alt/meta keys are held down as they alter behavior of clicks (e.g. open in new tab)
|
|
11833
|
+
if (isClick && slowClickConfig && event && !event.altKey && !event.metaKey && !event.ctrlKey) {
|
|
11834
|
+
detectSlowClick(
|
|
11835
|
+
replay,
|
|
11836
|
+
slowClickConfig,
|
|
11837
|
+
result ,
|
|
11838
|
+
getClickTargetNode(handlerData.event) ,
|
|
11839
|
+
);
|
|
11840
|
+
}
|
|
11841
|
+
|
|
11842
|
+
addBreadcrumbEvent(replay, result);
|
|
11843
|
+
};
|
|
11844
|
+
};
|
|
11845
|
+
|
|
11846
|
+
/** Get the base DOM breadcrumb. */
|
|
11847
|
+
function getBaseDomBreadcrumb(target, message) {
|
|
11848
|
+
// `__sn` property is the serialized node created by rrweb
|
|
11849
|
+
const serializedNode = target && isRrwebNode(target) && target.__sn.type === NodeType.Element ? target.__sn : null;
|
|
11850
|
+
|
|
11851
|
+
return {
|
|
11852
|
+
message,
|
|
11853
|
+
data: serializedNode
|
|
11854
|
+
? {
|
|
11855
|
+
nodeId: serializedNode.id,
|
|
11856
|
+
node: {
|
|
11857
|
+
id: serializedNode.id,
|
|
11858
|
+
tagName: serializedNode.tagName,
|
|
11859
|
+
textContent: target
|
|
11860
|
+
? Array.from(target.childNodes)
|
|
11861
|
+
.map(
|
|
11862
|
+
(node) => '__sn' in node && node.__sn.type === NodeType.Text && node.__sn.textContent,
|
|
11863
|
+
)
|
|
11864
|
+
.filter(Boolean) // filter out empty values
|
|
11865
|
+
.map(text => (text ).trim())
|
|
11866
|
+
.join('')
|
|
11867
|
+
: '',
|
|
11868
|
+
attributes: getAttributesToRecord(serializedNode.attributes),
|
|
11869
|
+
},
|
|
11870
|
+
}
|
|
11871
|
+
: {},
|
|
11872
|
+
};
|
|
11873
|
+
}
|
|
11874
|
+
|
|
11875
|
+
/**
|
|
11876
|
+
* An event handler to react to DOM events.
|
|
11877
|
+
* Exported for tests.
|
|
11878
|
+
*/
|
|
11879
|
+
function handleDom(handlerData) {
|
|
11880
|
+
const { target, message } = getDomTarget(handlerData);
|
|
11881
|
+
|
|
11882
|
+
return createBreadcrumb({
|
|
11883
|
+
category: `ui.${handlerData.name}`,
|
|
11884
|
+
...getBaseDomBreadcrumb(target, message),
|
|
11885
|
+
});
|
|
11886
|
+
}
|
|
11887
|
+
|
|
11888
|
+
function getDomTarget(handlerData) {
|
|
11889
|
+
const isClick = handlerData.name === 'click';
|
|
11890
|
+
|
|
11891
|
+
let message;
|
|
11892
|
+
let target = null;
|
|
11893
|
+
|
|
11894
|
+
// Accessing event.target can throw (see getsentry/raven-js#838, #768)
|
|
11895
|
+
try {
|
|
11896
|
+
target = isClick ? getClickTargetNode(handlerData.event) : getTargetNode(handlerData.event);
|
|
11897
|
+
message = htmlTreeAsString(target, { maxStringLength: 200 }) || '<unknown>';
|
|
11898
|
+
} catch (e) {
|
|
11899
|
+
message = '<unknown>';
|
|
11900
|
+
}
|
|
11901
|
+
|
|
11902
|
+
return { target, message };
|
|
11903
|
+
}
|
|
11904
|
+
|
|
11905
|
+
function isRrwebNode(node) {
|
|
11906
|
+
return '__sn' in node;
|
|
11907
|
+
}
|
|
11908
|
+
|
|
11909
|
+
function getTargetNode(event) {
|
|
11910
|
+
if (isEventWithTarget(event)) {
|
|
11911
|
+
return event.target ;
|
|
11912
|
+
}
|
|
11913
|
+
|
|
11914
|
+
return event;
|
|
11915
|
+
}
|
|
11916
|
+
|
|
11917
|
+
const INTERACTIVE_SELECTOR = 'button,a';
|
|
11918
|
+
|
|
11919
|
+
// For clicks, we check if the target is inside of a button or link
|
|
11920
|
+
// If so, we use this as the target instead
|
|
11921
|
+
// This is useful because if you click on the image in <button><img></button>,
|
|
11922
|
+
// The target will be the image, not the button, which we don't want here
|
|
11923
|
+
function getClickTargetNode(event) {
|
|
11924
|
+
const target = getTargetNode(event);
|
|
11925
|
+
|
|
11926
|
+
if (!target || !(target instanceof Element)) {
|
|
11927
|
+
return target;
|
|
11928
|
+
}
|
|
11929
|
+
|
|
11930
|
+
const closestInteractive = target.closest(INTERACTIVE_SELECTOR);
|
|
11931
|
+
return closestInteractive || target;
|
|
11932
|
+
}
|
|
11933
|
+
|
|
11934
|
+
function isEventWithTarget(event) {
|
|
11935
|
+
return typeof event === 'object' && !!event && 'target' in event;
|
|
11936
|
+
}
|
|
11937
|
+
|
|
11938
|
+
/** Handle keyboard events & create breadcrumbs. */
|
|
11939
|
+
function handleKeyboardEvent(replay, event) {
|
|
11940
|
+
if (!replay.isEnabled()) {
|
|
11941
|
+
return;
|
|
11942
|
+
}
|
|
11943
|
+
|
|
11944
|
+
replay.triggerUserActivity();
|
|
11945
|
+
|
|
11946
|
+
const breadcrumb = getKeyboardBreadcrumb(event);
|
|
11947
|
+
|
|
11948
|
+
if (!breadcrumb) {
|
|
11949
|
+
return;
|
|
11950
|
+
}
|
|
11951
|
+
|
|
11952
|
+
addBreadcrumbEvent(replay, breadcrumb);
|
|
11953
|
+
}
|
|
11954
|
+
|
|
11955
|
+
/** exported only for tests */
|
|
11956
|
+
function getKeyboardBreadcrumb(event) {
|
|
11957
|
+
const { metaKey, shiftKey, ctrlKey, altKey, key, target } = event;
|
|
11958
|
+
|
|
11959
|
+
// never capture for input fields
|
|
11960
|
+
if (!target || isInputElement(target )) {
|
|
11961
|
+
return null;
|
|
11962
|
+
}
|
|
11963
|
+
|
|
11964
|
+
// Note: We do not consider shift here, as that means "uppercase"
|
|
11965
|
+
const hasModifierKey = metaKey || ctrlKey || altKey;
|
|
11966
|
+
const isCharacterKey = key.length === 1; // other keys like Escape, Tab, etc have a longer length
|
|
11967
|
+
|
|
11968
|
+
// Do not capture breadcrumb if only a word key is pressed
|
|
11969
|
+
// This could leak e.g. user input
|
|
11970
|
+
if (!hasModifierKey && isCharacterKey) {
|
|
11971
|
+
return null;
|
|
11972
|
+
}
|
|
11973
|
+
|
|
11974
|
+
const message = htmlTreeAsString(target, { maxStringLength: 200 }) || '<unknown>';
|
|
11975
|
+
const baseBreadcrumb = getBaseDomBreadcrumb(target , message);
|
|
11976
|
+
|
|
11977
|
+
return createBreadcrumb({
|
|
11978
|
+
category: 'ui.keyDown',
|
|
11979
|
+
message,
|
|
11980
|
+
data: {
|
|
11981
|
+
...baseBreadcrumb.data,
|
|
11982
|
+
metaKey,
|
|
11983
|
+
shiftKey,
|
|
11984
|
+
ctrlKey,
|
|
11985
|
+
altKey,
|
|
11986
|
+
key,
|
|
11987
|
+
},
|
|
11988
|
+
});
|
|
11989
|
+
}
|
|
11990
|
+
|
|
11991
|
+
function isInputElement(target) {
|
|
11992
|
+
return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
|
|
11993
|
+
}
|
|
11994
|
+
|
|
11503
11995
|
const NAVIGATION_ENTRY_KEYS = [
|
|
11504
11996
|
'name',
|
|
11505
11997
|
'type',
|
|
@@ -11653,20 +12145,19 @@ class EventBufferArray {
|
|
|
11653
12145
|
return this.events.length > 0;
|
|
11654
12146
|
}
|
|
11655
12147
|
|
|
12148
|
+
/** @inheritdoc */
|
|
12149
|
+
get type() {
|
|
12150
|
+
return 'sync';
|
|
12151
|
+
}
|
|
12152
|
+
|
|
11656
12153
|
/** @inheritdoc */
|
|
11657
12154
|
destroy() {
|
|
11658
12155
|
this.events = [];
|
|
11659
12156
|
}
|
|
11660
12157
|
|
|
11661
12158
|
/** @inheritdoc */
|
|
11662
|
-
async addEvent(event
|
|
11663
|
-
if (isCheckout) {
|
|
11664
|
-
this.events = [event];
|
|
11665
|
-
return;
|
|
11666
|
-
}
|
|
11667
|
-
|
|
12159
|
+
async addEvent(event) {
|
|
11668
12160
|
this.events.push(event);
|
|
11669
|
-
return;
|
|
11670
12161
|
}
|
|
11671
12162
|
|
|
11672
12163
|
/** @inheritdoc */
|
|
@@ -11680,6 +12171,22 @@ class EventBufferArray {
|
|
|
11680
12171
|
resolve(JSON.stringify(eventsRet));
|
|
11681
12172
|
});
|
|
11682
12173
|
}
|
|
12174
|
+
|
|
12175
|
+
/** @inheritdoc */
|
|
12176
|
+
clear() {
|
|
12177
|
+
this.events = [];
|
|
12178
|
+
}
|
|
12179
|
+
|
|
12180
|
+
/** @inheritdoc */
|
|
12181
|
+
getEarliestTimestamp() {
|
|
12182
|
+
const timestamp = this.events.map(event => event.timestamp).sort()[0];
|
|
12183
|
+
|
|
12184
|
+
if (!timestamp) {
|
|
12185
|
+
return null;
|
|
12186
|
+
}
|
|
12187
|
+
|
|
12188
|
+
return timestampToMs(timestamp);
|
|
12189
|
+
}
|
|
11683
12190
|
}
|
|
11684
12191
|
|
|
11685
12192
|
/**
|
|
@@ -11787,11 +12294,20 @@ class WorkerHandler {
|
|
|
11787
12294
|
* Exported only for testing.
|
|
11788
12295
|
*/
|
|
11789
12296
|
class EventBufferCompressionWorker {
|
|
11790
|
-
/** @inheritdoc */
|
|
11791
12297
|
|
|
11792
12298
|
constructor(worker) {
|
|
11793
12299
|
this._worker = new WorkerHandler(worker);
|
|
11794
|
-
this.
|
|
12300
|
+
this._earliestTimestamp = null;
|
|
12301
|
+
}
|
|
12302
|
+
|
|
12303
|
+
/** @inheritdoc */
|
|
12304
|
+
get hasEvents() {
|
|
12305
|
+
return !!this._earliestTimestamp;
|
|
12306
|
+
}
|
|
12307
|
+
|
|
12308
|
+
/** @inheritdoc */
|
|
12309
|
+
get type() {
|
|
12310
|
+
return 'worker';
|
|
11795
12311
|
}
|
|
11796
12312
|
|
|
11797
12313
|
/**
|
|
@@ -11814,13 +12330,10 @@ class EventBufferCompressionWorker {
|
|
|
11814
12330
|
*
|
|
11815
12331
|
* Returns true if event was successfuly received and processed by worker.
|
|
11816
12332
|
*/
|
|
11817
|
-
|
|
11818
|
-
|
|
11819
|
-
|
|
11820
|
-
|
|
11821
|
-
// This event is a checkout, make sure worker buffer is cleared before
|
|
11822
|
-
// proceeding.
|
|
11823
|
-
await this._clear();
|
|
12333
|
+
addEvent(event) {
|
|
12334
|
+
const timestamp = timestampToMs(event.timestamp);
|
|
12335
|
+
if (!this._earliestTimestamp || timestamp < this._earliestTimestamp) {
|
|
12336
|
+
this._earliestTimestamp = timestamp;
|
|
11824
12337
|
}
|
|
11825
12338
|
|
|
11826
12339
|
return this._sendEventToWorker(event);
|
|
@@ -11833,6 +12346,18 @@ class EventBufferCompressionWorker {
|
|
|
11833
12346
|
return this._finishRequest();
|
|
11834
12347
|
}
|
|
11835
12348
|
|
|
12349
|
+
/** @inheritdoc */
|
|
12350
|
+
clear() {
|
|
12351
|
+
this._earliestTimestamp = null;
|
|
12352
|
+
// We do not wait on this, as we assume the order of messages is consistent for the worker
|
|
12353
|
+
void this._worker.postMessage('clear');
|
|
12354
|
+
}
|
|
12355
|
+
|
|
12356
|
+
/** @inheritdoc */
|
|
12357
|
+
getEarliestTimestamp() {
|
|
12358
|
+
return this._earliestTimestamp;
|
|
12359
|
+
}
|
|
12360
|
+
|
|
11836
12361
|
/**
|
|
11837
12362
|
* Send the event to the worker.
|
|
11838
12363
|
*/
|
|
@@ -11846,15 +12371,10 @@ class EventBufferCompressionWorker {
|
|
|
11846
12371
|
async _finishRequest() {
|
|
11847
12372
|
const response = await this._worker.postMessage('finish');
|
|
11848
12373
|
|
|
11849
|
-
this.
|
|
12374
|
+
this._earliestTimestamp = null;
|
|
11850
12375
|
|
|
11851
12376
|
return response;
|
|
11852
12377
|
}
|
|
11853
|
-
|
|
11854
|
-
/** Clear any pending events from the worker. */
|
|
11855
|
-
_clear() {
|
|
11856
|
-
return this._worker.postMessage('clear');
|
|
11857
|
-
}
|
|
11858
12378
|
}
|
|
11859
12379
|
|
|
11860
12380
|
/**
|
|
@@ -11872,6 +12392,11 @@ class EventBufferProxy {
|
|
|
11872
12392
|
this._ensureWorkerIsLoadedPromise = this._ensureWorkerIsLoaded();
|
|
11873
12393
|
}
|
|
11874
12394
|
|
|
12395
|
+
/** @inheritdoc */
|
|
12396
|
+
get type() {
|
|
12397
|
+
return this._used.type;
|
|
12398
|
+
}
|
|
12399
|
+
|
|
11875
12400
|
/** @inheritDoc */
|
|
11876
12401
|
get hasEvents() {
|
|
11877
12402
|
return this._used.hasEvents;
|
|
@@ -11883,13 +12408,23 @@ class EventBufferProxy {
|
|
|
11883
12408
|
this._compression.destroy();
|
|
11884
12409
|
}
|
|
11885
12410
|
|
|
12411
|
+
/** @inheritdoc */
|
|
12412
|
+
clear() {
|
|
12413
|
+
return this._used.clear();
|
|
12414
|
+
}
|
|
12415
|
+
|
|
12416
|
+
/** @inheritdoc */
|
|
12417
|
+
getEarliestTimestamp() {
|
|
12418
|
+
return this._used.getEarliestTimestamp();
|
|
12419
|
+
}
|
|
12420
|
+
|
|
11886
12421
|
/**
|
|
11887
12422
|
* Add an event to the event buffer.
|
|
11888
12423
|
*
|
|
11889
12424
|
* Returns true if event was successfully added.
|
|
11890
12425
|
*/
|
|
11891
|
-
addEvent(event
|
|
11892
|
-
return this._used.addEvent(event
|
|
12426
|
+
addEvent(event) {
|
|
12427
|
+
return this._used.addEvent(event);
|
|
11893
12428
|
}
|
|
11894
12429
|
|
|
11895
12430
|
/** @inheritDoc */
|
|
@@ -12171,59 +12706,6 @@ function getSession({
|
|
|
12171
12706
|
return { type: 'new', session: newSession };
|
|
12172
12707
|
}
|
|
12173
12708
|
|
|
12174
|
-
/**
|
|
12175
|
-
* Add an event to the event buffer.
|
|
12176
|
-
* `isCheckout` is true if this is either the very first event, or an event triggered by `checkoutEveryNms`.
|
|
12177
|
-
*/
|
|
12178
|
-
async function addEvent(
|
|
12179
|
-
replay,
|
|
12180
|
-
event,
|
|
12181
|
-
isCheckout,
|
|
12182
|
-
) {
|
|
12183
|
-
if (!replay.eventBuffer) {
|
|
12184
|
-
// This implies that `_isEnabled` is false
|
|
12185
|
-
return null;
|
|
12186
|
-
}
|
|
12187
|
-
|
|
12188
|
-
if (replay.isPaused()) {
|
|
12189
|
-
// Do not add to event buffer when recording is paused
|
|
12190
|
-
return null;
|
|
12191
|
-
}
|
|
12192
|
-
|
|
12193
|
-
// TODO: sadness -- we will want to normalize timestamps to be in ms -
|
|
12194
|
-
// requires coordination with frontend
|
|
12195
|
-
const isMs = event.timestamp > 9999999999;
|
|
12196
|
-
const timestampInMs = isMs ? event.timestamp : event.timestamp * 1000;
|
|
12197
|
-
|
|
12198
|
-
// Throw out events that happen more than 5 minutes ago. This can happen if
|
|
12199
|
-
// page has been left open and idle for a long period of time and user
|
|
12200
|
-
// comes back to trigger a new session. The performance entries rely on
|
|
12201
|
-
// `performance.timeOrigin`, which is when the page first opened.
|
|
12202
|
-
if (timestampInMs + replay.timeouts.sessionIdlePause < Date.now()) {
|
|
12203
|
-
return null;
|
|
12204
|
-
}
|
|
12205
|
-
|
|
12206
|
-
// Only record earliest event if a new session was created, otherwise it
|
|
12207
|
-
// shouldn't be relevant
|
|
12208
|
-
const earliestEvent = replay.getContext().earliestEvent;
|
|
12209
|
-
if (replay.session && replay.session.segmentId === 0 && (!earliestEvent || timestampInMs < earliestEvent)) {
|
|
12210
|
-
replay.getContext().earliestEvent = timestampInMs;
|
|
12211
|
-
}
|
|
12212
|
-
|
|
12213
|
-
try {
|
|
12214
|
-
return await replay.eventBuffer.addEvent(event, isCheckout);
|
|
12215
|
-
} catch (error) {
|
|
12216
|
-
(typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.error(error);
|
|
12217
|
-
await replay.stop('addEvent');
|
|
12218
|
-
|
|
12219
|
-
const client = getCurrentHub().getClient();
|
|
12220
|
-
|
|
12221
|
-
if (client) {
|
|
12222
|
-
client.recordDroppedEvent('internal_sdk_error', 'replay');
|
|
12223
|
-
}
|
|
12224
|
-
}
|
|
12225
|
-
}
|
|
12226
|
-
|
|
12227
12709
|
/** If the event is an error event */
|
|
12228
12710
|
function isErrorEvent(event) {
|
|
12229
12711
|
return !event.type;
|
|
@@ -12273,22 +12755,18 @@ function handleAfterSendEvent(replay) {
|
|
|
12273
12755
|
return;
|
|
12274
12756
|
}
|
|
12275
12757
|
|
|
12276
|
-
// Add error to list of errorIds of replay
|
|
12758
|
+
// Add error to list of errorIds of replay. This is ok to do even if not
|
|
12759
|
+
// sampled because context will get reset at next checkout.
|
|
12760
|
+
// XXX: There is also a race condition where it's possible to capture an
|
|
12761
|
+
// error to Sentry before Replay SDK has loaded, but response returns after
|
|
12762
|
+
// it was loaded, and this gets called.
|
|
12277
12763
|
if (event.event_id) {
|
|
12278
12764
|
replay.getContext().errorIds.add(event.event_id);
|
|
12279
12765
|
}
|
|
12280
12766
|
|
|
12281
|
-
//
|
|
12767
|
+
// If error event is tagged with replay id it means it was sampled (when in buffer mode)
|
|
12282
12768
|
// Need to be very careful that this does not cause an infinite loop
|
|
12283
|
-
if (
|
|
12284
|
-
replay.recordingMode === 'buffer' &&
|
|
12285
|
-
event.exception &&
|
|
12286
|
-
event.message !== UNABLE_TO_SEND_REPLAY // ignore this error because otherwise we could loop indefinitely with trying to capture replay and failing
|
|
12287
|
-
) {
|
|
12288
|
-
if (!isSampled(replay.getOptions().errorSampleRate)) {
|
|
12289
|
-
return;
|
|
12290
|
-
}
|
|
12291
|
-
|
|
12769
|
+
if (replay.recordingMode === 'buffer' && event.tags && event.tags.replayId) {
|
|
12292
12770
|
setTimeout(() => {
|
|
12293
12771
|
// Capture current event buffer as new replay
|
|
12294
12772
|
void replay.sendBufferedReplayOrFlush();
|
|
@@ -12313,167 +12791,6 @@ function isBaseTransportSend() {
|
|
|
12313
12791
|
);
|
|
12314
12792
|
}
|
|
12315
12793
|
|
|
12316
|
-
var NodeType;
|
|
12317
|
-
(function (NodeType) {
|
|
12318
|
-
NodeType[NodeType["Document"] = 0] = "Document";
|
|
12319
|
-
NodeType[NodeType["DocumentType"] = 1] = "DocumentType";
|
|
12320
|
-
NodeType[NodeType["Element"] = 2] = "Element";
|
|
12321
|
-
NodeType[NodeType["Text"] = 3] = "Text";
|
|
12322
|
-
NodeType[NodeType["CDATA"] = 4] = "CDATA";
|
|
12323
|
-
NodeType[NodeType["Comment"] = 5] = "Comment";
|
|
12324
|
-
})(NodeType || (NodeType = {}));
|
|
12325
|
-
|
|
12326
|
-
/**
|
|
12327
|
-
* Create a breadcrumb for a replay.
|
|
12328
|
-
*/
|
|
12329
|
-
function createBreadcrumb(
|
|
12330
|
-
breadcrumb,
|
|
12331
|
-
) {
|
|
12332
|
-
return {
|
|
12333
|
-
timestamp: Date.now() / 1000,
|
|
12334
|
-
type: 'default',
|
|
12335
|
-
...breadcrumb,
|
|
12336
|
-
};
|
|
12337
|
-
}
|
|
12338
|
-
|
|
12339
|
-
/**
|
|
12340
|
-
* Add a breadcrumb event to replay.
|
|
12341
|
-
*/
|
|
12342
|
-
function addBreadcrumbEvent(replay, breadcrumb) {
|
|
12343
|
-
if (breadcrumb.category === 'sentry.transaction') {
|
|
12344
|
-
return;
|
|
12345
|
-
}
|
|
12346
|
-
|
|
12347
|
-
if (['ui.click', 'ui.input'].includes(breadcrumb.category )) {
|
|
12348
|
-
replay.triggerUserActivity();
|
|
12349
|
-
} else {
|
|
12350
|
-
replay.checkAndHandleExpiredSession();
|
|
12351
|
-
}
|
|
12352
|
-
|
|
12353
|
-
replay.addUpdate(() => {
|
|
12354
|
-
void addEvent(replay, {
|
|
12355
|
-
type: EventType.Custom,
|
|
12356
|
-
// TODO: We were converting from ms to seconds for breadcrumbs, spans,
|
|
12357
|
-
// but maybe we should just keep them as milliseconds
|
|
12358
|
-
timestamp: (breadcrumb.timestamp || 0) * 1000,
|
|
12359
|
-
data: {
|
|
12360
|
-
tag: 'breadcrumb',
|
|
12361
|
-
// normalize to max. 10 depth and 1_000 properties per object
|
|
12362
|
-
payload: normalize(breadcrumb, 10, 1000),
|
|
12363
|
-
},
|
|
12364
|
-
});
|
|
12365
|
-
|
|
12366
|
-
// Do not flush after console log messages
|
|
12367
|
-
return breadcrumb.category === 'console';
|
|
12368
|
-
});
|
|
12369
|
-
}
|
|
12370
|
-
|
|
12371
|
-
// Note that these are the serialized attributes and not attributes directly on
|
|
12372
|
-
// the DOM Node. Attributes we are interested in:
|
|
12373
|
-
const ATTRIBUTES_TO_RECORD = new Set([
|
|
12374
|
-
'id',
|
|
12375
|
-
'class',
|
|
12376
|
-
'aria-label',
|
|
12377
|
-
'role',
|
|
12378
|
-
'name',
|
|
12379
|
-
'alt',
|
|
12380
|
-
'title',
|
|
12381
|
-
'data-test-id',
|
|
12382
|
-
'data-testid',
|
|
12383
|
-
]);
|
|
12384
|
-
|
|
12385
|
-
/**
|
|
12386
|
-
* Inclusion list of attributes that we want to record from the DOM element
|
|
12387
|
-
*/
|
|
12388
|
-
function getAttributesToRecord(attributes) {
|
|
12389
|
-
const obj = {};
|
|
12390
|
-
for (const key in attributes) {
|
|
12391
|
-
if (ATTRIBUTES_TO_RECORD.has(key)) {
|
|
12392
|
-
let normalizedKey = key;
|
|
12393
|
-
|
|
12394
|
-
if (key === 'data-testid' || key === 'data-test-id') {
|
|
12395
|
-
normalizedKey = 'testId';
|
|
12396
|
-
}
|
|
12397
|
-
|
|
12398
|
-
obj[normalizedKey] = attributes[key];
|
|
12399
|
-
}
|
|
12400
|
-
}
|
|
12401
|
-
|
|
12402
|
-
return obj;
|
|
12403
|
-
}
|
|
12404
|
-
|
|
12405
|
-
const handleDomListener =
|
|
12406
|
-
(replay) =>
|
|
12407
|
-
(handlerData) => {
|
|
12408
|
-
if (!replay.isEnabled()) {
|
|
12409
|
-
return;
|
|
12410
|
-
}
|
|
12411
|
-
|
|
12412
|
-
const result = handleDom(handlerData);
|
|
12413
|
-
|
|
12414
|
-
if (!result) {
|
|
12415
|
-
return;
|
|
12416
|
-
}
|
|
12417
|
-
|
|
12418
|
-
addBreadcrumbEvent(replay, result);
|
|
12419
|
-
};
|
|
12420
|
-
|
|
12421
|
-
/**
|
|
12422
|
-
* An event handler to react to DOM events.
|
|
12423
|
-
*/
|
|
12424
|
-
function handleDom(handlerData) {
|
|
12425
|
-
let target;
|
|
12426
|
-
let targetNode;
|
|
12427
|
-
|
|
12428
|
-
// Accessing event.target can throw (see getsentry/raven-js#838, #768)
|
|
12429
|
-
try {
|
|
12430
|
-
targetNode = getTargetNode(handlerData);
|
|
12431
|
-
target = htmlTreeAsString(targetNode);
|
|
12432
|
-
} catch (e) {
|
|
12433
|
-
target = '<unknown>';
|
|
12434
|
-
}
|
|
12435
|
-
|
|
12436
|
-
// `__sn` property is the serialized node created by rrweb
|
|
12437
|
-
const serializedNode =
|
|
12438
|
-
targetNode && '__sn' in targetNode && targetNode.__sn.type === NodeType.Element ? targetNode.__sn : null;
|
|
12439
|
-
|
|
12440
|
-
return createBreadcrumb({
|
|
12441
|
-
category: `ui.${handlerData.name}`,
|
|
12442
|
-
message: target,
|
|
12443
|
-
data: serializedNode
|
|
12444
|
-
? {
|
|
12445
|
-
nodeId: serializedNode.id,
|
|
12446
|
-
node: {
|
|
12447
|
-
id: serializedNode.id,
|
|
12448
|
-
tagName: serializedNode.tagName,
|
|
12449
|
-
textContent: targetNode
|
|
12450
|
-
? Array.from(targetNode.childNodes)
|
|
12451
|
-
.map(
|
|
12452
|
-
(node) => '__sn' in node && node.__sn.type === NodeType.Text && node.__sn.textContent,
|
|
12453
|
-
)
|
|
12454
|
-
.filter(Boolean) // filter out empty values
|
|
12455
|
-
.map(text => (text ).trim())
|
|
12456
|
-
.join('')
|
|
12457
|
-
: '',
|
|
12458
|
-
attributes: getAttributesToRecord(serializedNode.attributes),
|
|
12459
|
-
},
|
|
12460
|
-
}
|
|
12461
|
-
: {},
|
|
12462
|
-
});
|
|
12463
|
-
}
|
|
12464
|
-
|
|
12465
|
-
function getTargetNode(handlerData) {
|
|
12466
|
-
if (isEventWithTarget(handlerData.event)) {
|
|
12467
|
-
return handlerData.event.target;
|
|
12468
|
-
}
|
|
12469
|
-
|
|
12470
|
-
return handlerData.event;
|
|
12471
|
-
}
|
|
12472
|
-
|
|
12473
|
-
function isEventWithTarget(event) {
|
|
12474
|
-
return !!(event ).target;
|
|
12475
|
-
}
|
|
12476
|
-
|
|
12477
12794
|
/**
|
|
12478
12795
|
* Returns true if we think the given event is an error originating inside of rrweb.
|
|
12479
12796
|
*/
|
|
@@ -12497,6 +12814,30 @@ function isRrwebError(event, hint) {
|
|
|
12497
12814
|
});
|
|
12498
12815
|
}
|
|
12499
12816
|
|
|
12817
|
+
/**
|
|
12818
|
+
* Determine if event should be sampled (only applies in buffer mode).
|
|
12819
|
+
* When an event is captured by `hanldleGlobalEvent`, when in buffer mode
|
|
12820
|
+
* we determine if we want to sample the error or not.
|
|
12821
|
+
*/
|
|
12822
|
+
function shouldSampleForBufferEvent(replay, event) {
|
|
12823
|
+
if (replay.recordingMode !== 'buffer') {
|
|
12824
|
+
return false;
|
|
12825
|
+
}
|
|
12826
|
+
|
|
12827
|
+
// ignore this error because otherwise we could loop indefinitely with
|
|
12828
|
+
// trying to capture replay and failing
|
|
12829
|
+
if (event.message === UNABLE_TO_SEND_REPLAY) {
|
|
12830
|
+
return false;
|
|
12831
|
+
}
|
|
12832
|
+
|
|
12833
|
+
// Require the event to be an error event & to have an exception
|
|
12834
|
+
if (!event.exception || event.type) {
|
|
12835
|
+
return false;
|
|
12836
|
+
}
|
|
12837
|
+
|
|
12838
|
+
return isSampled(replay.getOptions().errorSampleRate);
|
|
12839
|
+
}
|
|
12840
|
+
|
|
12500
12841
|
/**
|
|
12501
12842
|
* Returns a listener to be added to `addGlobalEventProcessor(listener)`.
|
|
12502
12843
|
*/
|
|
@@ -12526,8 +12867,16 @@ function handleGlobalEventListener(
|
|
|
12526
12867
|
return null;
|
|
12527
12868
|
}
|
|
12528
12869
|
|
|
12529
|
-
//
|
|
12530
|
-
if
|
|
12870
|
+
// When in buffer mode, we decide to sample here.
|
|
12871
|
+
// Later, in `handleAfterSendEvent`, if the replayId is set, we know that we sampled
|
|
12872
|
+
// And convert the buffer session to a full session
|
|
12873
|
+
const isErrorEventSampled = shouldSampleForBufferEvent(replay, event);
|
|
12874
|
+
|
|
12875
|
+
// Tag errors if it has been sampled in buffer mode, or if it is session mode
|
|
12876
|
+
// Only tag transactions if in session mode
|
|
12877
|
+
const shouldTagReplayId = isErrorEventSampled || replay.recordingMode === 'session';
|
|
12878
|
+
|
|
12879
|
+
if (shouldTagReplayId) {
|
|
12531
12880
|
event.tags = { ...event.tags, replayId: replay.getSessionId() };
|
|
12532
12881
|
}
|
|
12533
12882
|
|
|
@@ -12577,7 +12926,7 @@ function createPerformanceSpans(
|
|
|
12577
12926
|
) {
|
|
12578
12927
|
return entries.map(({ type, start, end, name, data }) =>
|
|
12579
12928
|
addEvent(replay, {
|
|
12580
|
-
type: EventType.Custom,
|
|
12929
|
+
type: EventType$1.Custom,
|
|
12581
12930
|
timestamp: start,
|
|
12582
12931
|
data: {
|
|
12583
12932
|
tag: 'performanceSpan',
|
|
@@ -13359,7 +13708,32 @@ function _strIsProbablyJson(str) {
|
|
|
13359
13708
|
|
|
13360
13709
|
/** Match an URL against a list of strings/Regex. */
|
|
13361
13710
|
function urlMatches(url, urls) {
|
|
13362
|
-
|
|
13711
|
+
const fullUrl = getFullUrl(url);
|
|
13712
|
+
|
|
13713
|
+
return stringMatchesSomePattern(fullUrl, urls);
|
|
13714
|
+
}
|
|
13715
|
+
|
|
13716
|
+
/** exported for tests */
|
|
13717
|
+
function getFullUrl(url, baseURI = WINDOW.document.baseURI) {
|
|
13718
|
+
// Short circuit for common cases:
|
|
13719
|
+
if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith(WINDOW.location.origin)) {
|
|
13720
|
+
return url;
|
|
13721
|
+
}
|
|
13722
|
+
const fixedUrl = new URL(url, baseURI);
|
|
13723
|
+
|
|
13724
|
+
// If these do not match, we are not dealing with a relative URL, so just return it
|
|
13725
|
+
if (fixedUrl.origin !== new URL(baseURI).origin) {
|
|
13726
|
+
return url;
|
|
13727
|
+
}
|
|
13728
|
+
|
|
13729
|
+
const fullUrl = fixedUrl.href;
|
|
13730
|
+
|
|
13731
|
+
// Remove trailing slashes, if they don't match the original URL
|
|
13732
|
+
if (!url.endsWith('/') && fullUrl.endsWith('/')) {
|
|
13733
|
+
return fullUrl.slice(0, -1);
|
|
13734
|
+
}
|
|
13735
|
+
|
|
13736
|
+
return fullUrl;
|
|
13363
13737
|
}
|
|
13364
13738
|
|
|
13365
13739
|
/**
|
|
@@ -13909,7 +14283,8 @@ function addGlobalListeners(replay) {
|
|
|
13909
14283
|
client.on('afterSendEvent', handleAfterSendEvent(replay));
|
|
13910
14284
|
client.on('createDsc', (dsc) => {
|
|
13911
14285
|
const replayId = replay.getSessionId();
|
|
13912
|
-
|
|
14286
|
+
// We do not want to set the DSC when in buffer mode, as that means the replay has not been sent (yet)
|
|
14287
|
+
if (replayId && replay.isEnabled() && replay.recordingMode === 'session') {
|
|
13913
14288
|
dsc.replay_id = replayId;
|
|
13914
14289
|
}
|
|
13915
14290
|
});
|
|
@@ -14189,6 +14564,23 @@ function debounce(func, wait, options) {
|
|
|
14189
14564
|
return debounced;
|
|
14190
14565
|
}
|
|
14191
14566
|
|
|
14567
|
+
/* eslint-disable @typescript-eslint/naming-convention */
|
|
14568
|
+
|
|
14569
|
+
var EventType; (function (EventType) {
|
|
14570
|
+
const DomContentLoaded = 0; EventType[EventType["DomContentLoaded"] = DomContentLoaded] = "DomContentLoaded";
|
|
14571
|
+
const Load = 1; EventType[EventType["Load"] = Load] = "Load";
|
|
14572
|
+
const FullSnapshot = 2; EventType[EventType["FullSnapshot"] = FullSnapshot] = "FullSnapshot";
|
|
14573
|
+
const IncrementalSnapshot = 3; EventType[EventType["IncrementalSnapshot"] = IncrementalSnapshot] = "IncrementalSnapshot";
|
|
14574
|
+
const Meta = 4; EventType[EventType["Meta"] = Meta] = "Meta";
|
|
14575
|
+
const Custom = 5; EventType[EventType["Custom"] = Custom] = "Custom";
|
|
14576
|
+
const Plugin = 6; EventType[EventType["Plugin"] = Plugin] = "Plugin";
|
|
14577
|
+
})(EventType || (EventType = {}));
|
|
14578
|
+
|
|
14579
|
+
/**
|
|
14580
|
+
* This is a partial copy of rrweb's eventWithTime type which only contains the properties
|
|
14581
|
+
* we specifcally need in the SDK.
|
|
14582
|
+
*/
|
|
14583
|
+
|
|
14192
14584
|
/**
|
|
14193
14585
|
* Handler for recording events.
|
|
14194
14586
|
*
|
|
@@ -14231,6 +14623,14 @@ function getHandleRecordingEmit(replay) {
|
|
|
14231
14623
|
return false;
|
|
14232
14624
|
}
|
|
14233
14625
|
|
|
14626
|
+
// Additionally, create a meta event that will capture certain SDK settings.
|
|
14627
|
+
// In order to handle buffer mode, this needs to either be done when we
|
|
14628
|
+
// receive checkout events or at flush time.
|
|
14629
|
+
//
|
|
14630
|
+
// `isCheckout` is always true, but want to be explicit that it should
|
|
14631
|
+
// only be added for checkouts
|
|
14632
|
+
void addSettingsEvent(replay, isCheckout);
|
|
14633
|
+
|
|
14234
14634
|
// If there is a previousSessionId after a full snapshot occurs, then
|
|
14235
14635
|
// the replay session was started due to session expiration. The new session
|
|
14236
14636
|
// is started before triggering a new checkout and contains the id
|
|
@@ -14241,10 +14641,10 @@ function getHandleRecordingEmit(replay) {
|
|
|
14241
14641
|
return true;
|
|
14242
14642
|
}
|
|
14243
14643
|
|
|
14244
|
-
//
|
|
14245
|
-
// checkout
|
|
14246
|
-
if (replay.recordingMode === 'buffer' && replay.session) {
|
|
14247
|
-
const
|
|
14644
|
+
// When in buffer mode, make sure we adjust the session started date to the current earliest event of the buffer
|
|
14645
|
+
// this should usually be the timestamp of the checkout event, but to be safe...
|
|
14646
|
+
if (replay.recordingMode === 'buffer' && replay.session && replay.eventBuffer) {
|
|
14647
|
+
const earliestEvent = replay.eventBuffer.getEarliestTimestamp();
|
|
14248
14648
|
if (earliestEvent) {
|
|
14249
14649
|
replay.session.started = earliestEvent;
|
|
14250
14650
|
|
|
@@ -14268,6 +14668,46 @@ function getHandleRecordingEmit(replay) {
|
|
|
14268
14668
|
};
|
|
14269
14669
|
}
|
|
14270
14670
|
|
|
14671
|
+
/**
|
|
14672
|
+
* Exported for tests
|
|
14673
|
+
*/
|
|
14674
|
+
function createOptionsEvent(replay) {
|
|
14675
|
+
const options = replay.getOptions();
|
|
14676
|
+
return {
|
|
14677
|
+
type: EventType.Custom,
|
|
14678
|
+
timestamp: Date.now(),
|
|
14679
|
+
data: {
|
|
14680
|
+
tag: 'options',
|
|
14681
|
+
payload: {
|
|
14682
|
+
sessionSampleRate: options.sessionSampleRate,
|
|
14683
|
+
errorSampleRate: options.errorSampleRate,
|
|
14684
|
+
useCompressionOption: options.useCompression,
|
|
14685
|
+
blockAllMedia: options.blockAllMedia,
|
|
14686
|
+
maskAllText: options.maskAllText,
|
|
14687
|
+
maskAllInputs: options.maskAllInputs,
|
|
14688
|
+
useCompression: replay.eventBuffer ? replay.eventBuffer.type === 'worker' : false,
|
|
14689
|
+
networkDetailHasUrls: options.networkDetailAllowUrls.length > 0,
|
|
14690
|
+
networkCaptureBodies: options.networkCaptureBodies,
|
|
14691
|
+
networkRequestHasHeaders: options.networkRequestHeaders.length > 0,
|
|
14692
|
+
networkResponseHasHeaders: options.networkResponseHeaders.length > 0,
|
|
14693
|
+
},
|
|
14694
|
+
},
|
|
14695
|
+
};
|
|
14696
|
+
}
|
|
14697
|
+
|
|
14698
|
+
/**
|
|
14699
|
+
* Add a "meta" event that contains a simplified view on current configuration
|
|
14700
|
+
* options. This should only be included on the first segment of a recording.
|
|
14701
|
+
*/
|
|
14702
|
+
function addSettingsEvent(replay, isCheckout) {
|
|
14703
|
+
// Only need to add this event when sending the first segment
|
|
14704
|
+
if (!isCheckout || !replay.session || replay.session.segmentId !== 0) {
|
|
14705
|
+
return Promise.resolve(null);
|
|
14706
|
+
}
|
|
14707
|
+
|
|
14708
|
+
return addEvent(replay, createOptionsEvent(replay), false);
|
|
14709
|
+
}
|
|
14710
|
+
|
|
14271
14711
|
/**
|
|
14272
14712
|
* Create a replay envelope ready to be sent.
|
|
14273
14713
|
* This includes both the replay event, as well as the recording data.
|
|
@@ -14382,7 +14822,6 @@ async function sendReplayRequest({
|
|
|
14382
14822
|
eventContext,
|
|
14383
14823
|
timestamp,
|
|
14384
14824
|
session,
|
|
14385
|
-
options,
|
|
14386
14825
|
}) {
|
|
14387
14826
|
const preparedRecordingData = prepareRecordingData({
|
|
14388
14827
|
recordingData,
|
|
@@ -14424,15 +14863,6 @@ async function sendReplayRequest({
|
|
|
14424
14863
|
return;
|
|
14425
14864
|
}
|
|
14426
14865
|
|
|
14427
|
-
replayEvent.contexts = {
|
|
14428
|
-
...replayEvent.contexts,
|
|
14429
|
-
replay: {
|
|
14430
|
-
...(replayEvent.contexts && replayEvent.contexts.replay),
|
|
14431
|
-
session_sample_rate: options.sessionSampleRate,
|
|
14432
|
-
error_sample_rate: options.errorSampleRate,
|
|
14433
|
-
},
|
|
14434
|
-
};
|
|
14435
|
-
|
|
14436
14866
|
/*
|
|
14437
14867
|
For reference, the fully built event looks something like this:
|
|
14438
14868
|
{
|
|
@@ -14463,10 +14893,6 @@ async function sendReplayRequest({
|
|
|
14463
14893
|
},
|
|
14464
14894
|
"sdkProcessingMetadata": {},
|
|
14465
14895
|
"contexts": {
|
|
14466
|
-
"replay": {
|
|
14467
|
-
"session_sample_rate": 1,
|
|
14468
|
-
"error_sample_rate": 0,
|
|
14469
|
-
},
|
|
14470
14896
|
},
|
|
14471
14897
|
}
|
|
14472
14898
|
*/
|
|
@@ -14650,7 +15076,6 @@ class ReplayContainer {
|
|
|
14650
15076
|
errorIds: new Set(),
|
|
14651
15077
|
traceIds: new Set(),
|
|
14652
15078
|
urls: [],
|
|
14653
|
-
earliestEvent: null,
|
|
14654
15079
|
initialTimestamp: Date.now(),
|
|
14655
15080
|
initialUrl: '',
|
|
14656
15081
|
};}
|
|
@@ -14660,7 +15085,7 @@ class ReplayContainer {
|
|
|
14660
15085
|
recordingOptions,
|
|
14661
15086
|
}
|
|
14662
15087
|
|
|
14663
|
-
) {ReplayContainer.prototype.__init.call(this);ReplayContainer.prototype.__init2.call(this);ReplayContainer.prototype.__init3.call(this);ReplayContainer.prototype.__init4.call(this);ReplayContainer.prototype.__init5.call(this);ReplayContainer.prototype.__init6.call(this);ReplayContainer.prototype.__init7.call(this);ReplayContainer.prototype.__init8.call(this);ReplayContainer.prototype.__init9.call(this);ReplayContainer.prototype.__init10.call(this);ReplayContainer.prototype.__init11.call(this);ReplayContainer.prototype.__init12.call(this);ReplayContainer.prototype.__init13.call(this);ReplayContainer.prototype.__init14.call(this);ReplayContainer.prototype.__init15.call(this);ReplayContainer.prototype.__init16.call(this);ReplayContainer.prototype.__init17.call(this);
|
|
15088
|
+
) {ReplayContainer.prototype.__init.call(this);ReplayContainer.prototype.__init2.call(this);ReplayContainer.prototype.__init3.call(this);ReplayContainer.prototype.__init4.call(this);ReplayContainer.prototype.__init5.call(this);ReplayContainer.prototype.__init6.call(this);ReplayContainer.prototype.__init7.call(this);ReplayContainer.prototype.__init8.call(this);ReplayContainer.prototype.__init9.call(this);ReplayContainer.prototype.__init10.call(this);ReplayContainer.prototype.__init11.call(this);ReplayContainer.prototype.__init12.call(this);ReplayContainer.prototype.__init13.call(this);ReplayContainer.prototype.__init14.call(this);ReplayContainer.prototype.__init15.call(this);ReplayContainer.prototype.__init16.call(this);ReplayContainer.prototype.__init17.call(this);ReplayContainer.prototype.__init18.call(this);
|
|
14664
15089
|
this._recordingOptions = recordingOptions;
|
|
14665
15090
|
this._options = options;
|
|
14666
15091
|
|
|
@@ -15152,6 +15577,7 @@ class ReplayContainer {
|
|
|
15152
15577
|
WINDOW.document.addEventListener('visibilitychange', this._handleVisibilityChange);
|
|
15153
15578
|
WINDOW.addEventListener('blur', this._handleWindowBlur);
|
|
15154
15579
|
WINDOW.addEventListener('focus', this._handleWindowFocus);
|
|
15580
|
+
WINDOW.addEventListener('keydown', this._handleKeyboardEvent);
|
|
15155
15581
|
|
|
15156
15582
|
// There is no way to remove these listeners, so ensure they are only added once
|
|
15157
15583
|
if (!this._hasInitializedCoreListeners) {
|
|
@@ -15180,6 +15606,7 @@ class ReplayContainer {
|
|
|
15180
15606
|
|
|
15181
15607
|
WINDOW.removeEventListener('blur', this._handleWindowBlur);
|
|
15182
15608
|
WINDOW.removeEventListener('focus', this._handleWindowFocus);
|
|
15609
|
+
WINDOW.removeEventListener('keydown', this._handleKeyboardEvent);
|
|
15183
15610
|
|
|
15184
15611
|
if (this._performanceObserver) {
|
|
15185
15612
|
this._performanceObserver.disconnect();
|
|
@@ -15230,6 +15657,11 @@ class ReplayContainer {
|
|
|
15230
15657
|
this._doChangeToForegroundTasks(breadcrumb);
|
|
15231
15658
|
};}
|
|
15232
15659
|
|
|
15660
|
+
/** Ensure page remains active when a key is pressed. */
|
|
15661
|
+
__init16() {this._handleKeyboardEvent = (event) => {
|
|
15662
|
+
handleKeyboardEvent(this, event);
|
|
15663
|
+
};}
|
|
15664
|
+
|
|
15233
15665
|
/**
|
|
15234
15666
|
* Tasks to run when we consider a page to be hidden (via blurring and/or visibility)
|
|
15235
15667
|
*/
|
|
@@ -15309,7 +15741,7 @@ class ReplayContainer {
|
|
|
15309
15741
|
_createCustomBreadcrumb(breadcrumb) {
|
|
15310
15742
|
this.addUpdate(() => {
|
|
15311
15743
|
void addEvent(this, {
|
|
15312
|
-
type: EventType.Custom,
|
|
15744
|
+
type: EventType$1.Custom,
|
|
15313
15745
|
timestamp: breadcrumb.timestamp || 0,
|
|
15314
15746
|
data: {
|
|
15315
15747
|
tag: 'breadcrumb',
|
|
@@ -15350,22 +15782,35 @@ class ReplayContainer {
|
|
|
15350
15782
|
this._context.errorIds.clear();
|
|
15351
15783
|
this._context.traceIds.clear();
|
|
15352
15784
|
this._context.urls = [];
|
|
15353
|
-
|
|
15785
|
+
}
|
|
15786
|
+
|
|
15787
|
+
/** Update the initial timestamp based on the buffer content. */
|
|
15788
|
+
_updateInitialTimestampFromEventBuffer() {
|
|
15789
|
+
const { session, eventBuffer } = this;
|
|
15790
|
+
if (!session || !eventBuffer) {
|
|
15791
|
+
return;
|
|
15792
|
+
}
|
|
15793
|
+
|
|
15794
|
+
// we only ever update this on the initial segment
|
|
15795
|
+
if (session.segmentId) {
|
|
15796
|
+
return;
|
|
15797
|
+
}
|
|
15798
|
+
|
|
15799
|
+
const earliestEvent = eventBuffer.getEarliestTimestamp();
|
|
15800
|
+
if (earliestEvent && earliestEvent < this._context.initialTimestamp) {
|
|
15801
|
+
this._context.initialTimestamp = earliestEvent;
|
|
15802
|
+
}
|
|
15354
15803
|
}
|
|
15355
15804
|
|
|
15356
15805
|
/**
|
|
15357
15806
|
* Return and clear _context
|
|
15358
15807
|
*/
|
|
15359
15808
|
_popEventContext() {
|
|
15360
|
-
if (this._context.earliestEvent && this._context.earliestEvent < this._context.initialTimestamp) {
|
|
15361
|
-
this._context.initialTimestamp = this._context.earliestEvent;
|
|
15362
|
-
}
|
|
15363
|
-
|
|
15364
15809
|
const _context = {
|
|
15365
15810
|
initialTimestamp: this._context.initialTimestamp,
|
|
15366
15811
|
initialUrl: this._context.initialUrl,
|
|
15367
|
-
errorIds: Array.from(this._context.errorIds)
|
|
15368
|
-
traceIds: Array.from(this._context.traceIds)
|
|
15812
|
+
errorIds: Array.from(this._context.errorIds),
|
|
15813
|
+
traceIds: Array.from(this._context.traceIds),
|
|
15369
15814
|
urls: this._context.urls,
|
|
15370
15815
|
};
|
|
15371
15816
|
|
|
@@ -15404,6 +15849,9 @@ class ReplayContainer {
|
|
|
15404
15849
|
}
|
|
15405
15850
|
|
|
15406
15851
|
try {
|
|
15852
|
+
// This uses the data from the eventBuffer, so we need to call this before `finish()
|
|
15853
|
+
this._updateInitialTimestampFromEventBuffer();
|
|
15854
|
+
|
|
15407
15855
|
// Note this empties the event buffer regardless of outcome of sending replay
|
|
15408
15856
|
const recordingData = await this.eventBuffer.finish();
|
|
15409
15857
|
|
|
@@ -15444,7 +15892,7 @@ class ReplayContainer {
|
|
|
15444
15892
|
* Flush recording data to Sentry. Creates a lock so that only a single flush
|
|
15445
15893
|
* can be active at a time. Do not call this directly.
|
|
15446
15894
|
*/
|
|
15447
|
-
|
|
15895
|
+
__init17() {this._flush = async ({
|
|
15448
15896
|
force = false,
|
|
15449
15897
|
}
|
|
15450
15898
|
|
|
@@ -15499,7 +15947,7 @@ class ReplayContainer {
|
|
|
15499
15947
|
}
|
|
15500
15948
|
|
|
15501
15949
|
/** Handler for rrweb.record.onMutation */
|
|
15502
|
-
|
|
15950
|
+
__init18() {this._onMutationHandler = (mutations) => {
|
|
15503
15951
|
const count = mutations.length;
|
|
15504
15952
|
|
|
15505
15953
|
const mutationLimit = this._options._experiments.mutationLimit || 0;
|
|
@@ -15738,6 +16186,8 @@ class Replay {
|
|
|
15738
16186
|
errorSampleRate,
|
|
15739
16187
|
useCompression,
|
|
15740
16188
|
blockAllMedia,
|
|
16189
|
+
maskAllInputs,
|
|
16190
|
+
maskAllText,
|
|
15741
16191
|
networkDetailAllowUrls,
|
|
15742
16192
|
networkCaptureBodies,
|
|
15743
16193
|
networkRequestHeaders: _getMergedNetworkHeaders(networkRequestHeaders),
|
|
@@ -24965,6 +25415,7 @@ var ACTIONS$7;
|
|
|
24965
25415
|
ACTIONS["SET_MEDIA_RECORDER"] = "SET_MEDIA_RECORDER";
|
|
24966
25416
|
ACTIONS["SET_MIC_ERROR"] = "SET_MIC_ERROR";
|
|
24967
25417
|
ACTIONS["SET_PERMISSION_LISTENER"] = "SET_PERMISSION_LISTENER";
|
|
25418
|
+
ACTIONS["SET_ACTIVELY_STOPPED"] = "SET_ACTIVELY_STOPPED";
|
|
24968
25419
|
})(ACTIONS$7 || (ACTIONS$7 = {}));
|
|
24969
25420
|
var EVENTS$6;
|
|
24970
25421
|
(function (EVENTS) {
|
|
@@ -25054,6 +25505,7 @@ const CAMERA_STATES = {
|
|
|
25054
25505
|
WAITING: 'WAITING',
|
|
25055
25506
|
ERROR: 'ERROR',
|
|
25056
25507
|
READY: 'READY',
|
|
25508
|
+
SKIP: 'SKIP',
|
|
25057
25509
|
};
|
|
25058
25510
|
const MICROPHONE_STATES = {
|
|
25059
25511
|
WAITING: 'WAITING',
|
|
@@ -25083,6 +25535,7 @@ var STATES$5;
|
|
|
25083
25535
|
STATES["SETUP__TEST__CAMERA__WAITING"] = "testCameraWaiting";
|
|
25084
25536
|
STATES["SETUP__TEST__CAMERA__ERROR"] = "testCameraError";
|
|
25085
25537
|
STATES["SETUP__TEST__CAMERA__SUCCESS"] = "testCameraSuccess";
|
|
25538
|
+
STATES["SETUP__TEST__CAMERA__SKIP"] = "testCameraSkip";
|
|
25086
25539
|
STATES["SETUP__TEST__MICROPHONE"] = "testMicrophone";
|
|
25087
25540
|
STATES["SETUP__TEST__MICROPHONE__WAITING"] = "testMicrophoneWaiting";
|
|
25088
25541
|
STATES["SETUP__TEST__MICROPHONE__ERROR"] = "testMicrophoneError";
|
|
@@ -25192,6 +25645,7 @@ var SERVICES$1;
|
|
|
25192
25645
|
})(SERVICES$1 || (SERVICES$1 = {}));
|
|
25193
25646
|
var GUARDS$3;
|
|
25194
25647
|
(function (GUARDS) {
|
|
25648
|
+
GUARDS["IS_VIDEO_RECORDING_SKIP"] = "isVideoRecordingSkip";
|
|
25195
25649
|
GUARDS["NO_STORAGE"] = "noStorage";
|
|
25196
25650
|
GUARDS["NO_RECORDER"] = "noRecorder";
|
|
25197
25651
|
GUARDS["IS_THINKING_TIME"] = "isThinkingTime";
|
|
@@ -29939,7 +30393,7 @@ const configGenerator = () => {
|
|
|
29939
30393
|
let release;
|
|
29940
30394
|
try {
|
|
29941
30395
|
environment !== null && environment !== void 0 ? environment : (environment = "staging");
|
|
29942
|
-
release !== null && release !== void 0 ? release : (release = "1.1.
|
|
30396
|
+
release !== null && release !== void 0 ? release : (release = "1.1.23");
|
|
29943
30397
|
}
|
|
29944
30398
|
catch (_a) {
|
|
29945
30399
|
console.error('sentry configGenerator error');
|
|
@@ -30454,7 +30908,7 @@ const DeviceSelectorList = ({ deviceList, selectedDevice, onDeviceSelected, devi
|
|
|
30454
30908
|
${device.deviceId === (selectedDevice === null || selectedDevice === void 0 ? void 0 : selectedDevice.deviceId) ? 'myinterview-widget-device__select-option--selected' : ''}`, size: "S-Regular", onClick: () => onDeviceSelected(deviceType, device.deviceId) }, device.label))))));
|
|
30455
30909
|
};
|
|
30456
30910
|
|
|
30457
|
-
const DeviceSelector = ({ handleDeviceChange, videoDevices = [], audioDevices = [], selectedAudioDevice, selectedVideoDevice, myinterviewRef, }) => {
|
|
30911
|
+
const DeviceSelector = ({ handleDeviceChange, videoDevices = [], audioDevices = [], selectedAudioDevice, selectedVideoDevice, myinterviewRef, recordWithoutVideo, }) => {
|
|
30458
30912
|
const menuRef = useRef(null);
|
|
30459
30913
|
const [isSettingsOpen, setSettingsOpen] = useState(false);
|
|
30460
30914
|
useEffect(() => {
|
|
@@ -30473,7 +30927,7 @@ const DeviceSelector = ({ handleDeviceChange, videoDevices = [], audioDevices =
|
|
|
30473
30927
|
(_b = (_a = myinterviewRef === null || myinterviewRef === void 0 ? void 0 : myinterviewRef.current) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousedown', checkIfClickedOutside);
|
|
30474
30928
|
};
|
|
30475
30929
|
}, [isSettingsOpen]);
|
|
30476
|
-
return isMobile
|
|
30930
|
+
return (isMobile && !recordWithoutVideo)
|
|
30477
30931
|
? (React__default.createElement("span", { className: "myinterview-widget-device myinterview-widget-device__mobile", onClick: () => handleDeviceChange(), role: "presentation" },
|
|
30478
30932
|
React__default.createElement(Ne, null)))
|
|
30479
30933
|
: (React__default.createElement("div", { ref: menuRef, className: "myinterview-widget-device myinterview-widget-device__desktop" },
|
|
@@ -30481,7 +30935,7 @@ const DeviceSelector = ({ handleDeviceChange, videoDevices = [], audioDevices =
|
|
|
30481
30935
|
React__default.createElement(ke, null)),
|
|
30482
30936
|
isSettingsOpen && (React__default.createElement("div", { className: "myinterview-widget-device__modal" },
|
|
30483
30937
|
React__default.createElement("div", { className: "myinterview-widget-device__select-wrapper" },
|
|
30484
|
-
React__default.createElement(DeviceSelectorList, { deviceList: videoDevices, selectedDevice: selectedVideoDevice, onDeviceSelected: handleDeviceChange, deviceType: "video" }),
|
|
30938
|
+
!recordWithoutVideo && (React__default.createElement(DeviceSelectorList, { deviceList: videoDevices, selectedDevice: selectedVideoDevice, onDeviceSelected: handleDeviceChange, deviceType: "video" })),
|
|
30485
30939
|
React__default.createElement(DeviceSelectorList, { deviceList: audioDevices, selectedDevice: selectedAudioDevice, onDeviceSelected: handleDeviceChange, deviceType: "audio" }))))));
|
|
30486
30940
|
};
|
|
30487
30941
|
|
|
@@ -30544,14 +30998,15 @@ const PracticeMode = () => {
|
|
|
30544
30998
|
React__default.createElement(Qe, { size: "S-Regular", color: "primary" }, t('practice.title'))));
|
|
30545
30999
|
};
|
|
30546
31000
|
|
|
30547
|
-
const VideoCamera = React__default.forwardRef(({ isCameraDisplayed, microphoneRef, isPracticeModeDisplayed, errorType, isPermissionStepsOpen, onDisplayPermissionSteps, onClosePermissionSteps, onRecorderRetry, isRecorderCanChangeSettings, videoDevices, audioDevices, selectedVideoDevice, selectedAudioDevice, handleDeviceChange, canStartRecording, currentQuestion, numberOfQuestions, currentQuestionObj, isRecording, durations, recordingTime, isCountDown, countdown, isQuestionDisplayed, onReInitRecorder, myinterviewRef, isAssessment, }, videoRef) => (React__default.createElement("div", { className: `myinterview-widget-video-camera ${!isCameraDisplayed ? 'myinterview-widget-video-camera--hidden' : ''}` },
|
|
30548
|
-
React__default.createElement("
|
|
31001
|
+
const VideoCamera = React__default.forwardRef(({ recordWithoutVideo, isCameraDisplayed, microphoneRef, isPracticeModeDisplayed, errorType, isPermissionStepsOpen, onDisplayPermissionSteps, onClosePermissionSteps, onRecorderRetry, isRecorderCanChangeSettings, videoDevices, audioDevices, selectedVideoDevice, selectedAudioDevice, handleDeviceChange, canStartRecording, currentQuestion, numberOfQuestions, currentQuestionObj, isRecording, durations, recordingTime, isCountDown, countdown, isQuestionDisplayed, onReInitRecorder, myinterviewRef, isAssessment, }, videoRef) => (React__default.createElement("div", { className: `myinterview-widget-video-camera ${!isCameraDisplayed ? 'myinterview-widget-video-camera--hidden' : ''}` },
|
|
31002
|
+
recordWithoutVideo ? (React__default.createElement("div", { className: "myinterview-widget-video-camera__recording-without-video" },
|
|
31003
|
+
React__default.createElement(Se, null))) : React__default.createElement("video", { ref: videoRef, playsInline: true, autoPlay: true, disablePictureInPicture: true, controls: false, muted: true, hidden: isAssessment }),
|
|
30549
31004
|
canStartRecording && React__default.createElement(QuestionNumber, { currentQuestion: currentQuestion, numberOfQuestions: numberOfQuestions }),
|
|
30550
31005
|
isRecording && (React__default.createElement("div", { className: "myinterview-widget-video-camera__recording-counter-wrapper" },
|
|
30551
31006
|
React__default.createElement(Counter, { limit: durations, counter: recordingTime, isRecording: true }))),
|
|
30552
31007
|
microphoneRef && React__default.createElement(MicrophoneIndicator, { microphoneRef: microphoneRef }),
|
|
30553
31008
|
isPracticeModeDisplayed && React__default.createElement(PracticeMode, null),
|
|
30554
|
-
isRecorderCanChangeSettings && (React__default.createElement(DeviceSelector, { myinterviewRef: myinterviewRef, videoDevices: videoDevices, audioDevices: audioDevices, selectedVideoDevice: selectedVideoDevice, selectedAudioDevice: selectedAudioDevice, handleDeviceChange: handleDeviceChange })),
|
|
31009
|
+
isRecorderCanChangeSettings && (React__default.createElement(DeviceSelector, { recordWithoutVideo: recordWithoutVideo, myinterviewRef: myinterviewRef, videoDevices: videoDevices, audioDevices: audioDevices, selectedVideoDevice: selectedVideoDevice, selectedAudioDevice: selectedAudioDevice, handleDeviceChange: handleDeviceChange })),
|
|
30555
31010
|
isCountDown && React__default.createElement(CountDown, { countDown: countdown }),
|
|
30556
31011
|
((errorType && (!isPermissionStepsOpen || isMobile)) || (!isRecording && isQuestionDisplayed && (!(videoDevices === null || videoDevices === void 0 ? void 0 : videoDevices.length) || (currentQuestionObj)))) && (React__default.createElement(RecorderModal, { isRecording: isRecording, errorType: errorType, onDisplayPermissionSteps: onDisplayPermissionSteps, onReInitRecorder: onReInitRecorder, onRecorderRetry: onRecorderRetry, currentQuestionObj: currentQuestionObj, deviceList: audioDevices || [], selectedDevice: selectedAudioDevice, onDeviceSelected: handleDeviceChange, deviceType: "audio" })),
|
|
30557
31012
|
!isMobile && isPermissionStepsOpen && (React__default.createElement("div", { className: "myinterview-widget-video-camera__permissions" },
|
|
@@ -38819,7 +39274,7 @@ const InnerView = React__default.forwardRef(({ widgetMachine, sendToWidget, reco
|
|
|
38819
39274
|
const [isQuestionVideoWatched, setIsQuestionVideoWatched] = useState(false);
|
|
38820
39275
|
const innerRef = useRef(null);
|
|
38821
39276
|
const { previewRef, questions, currentQuestion, currentTake, recordingType, isConnected, checksState, widgetConfig, failedRecordingMessage, timer, } = widgetMachine.context;
|
|
38822
|
-
const { recordingTime, countdown, durations, videoDevices, audioDevices, selectedVideoDevice, selectedAudioDevice, microphoneRef, mediaStream, } = recorderMachine.context;
|
|
39277
|
+
const { recordingTime, countdown, durations, videoDevices, audioDevices, selectedVideoDevice, selectedAudioDevice, microphoneRef, mediaStream, recordWithoutVideo, } = recorderMachine.context;
|
|
38823
39278
|
const currentQuestionObj = questions[currentQuestion - 1];
|
|
38824
39279
|
const isAssessment = !!(currentQuestionObj === null || currentQuestionObj === void 0 ? void 0 : currentQuestionObj.answerType) && currentQuestionObj.answerType !== ANSWER_TYPES.VIDEO;
|
|
38825
39280
|
const isThinkingTime = isAssessment ? !!(currentQuestionObj === null || currentQuestionObj === void 0 ? void 0 : currentQuestionObj.partDuration) : !!(currentQuestionObj === null || currentQuestionObj === void 0 ? void 0 : currentQuestionObj.thinkingTime);
|
|
@@ -38862,7 +39317,7 @@ const InnerView = React__default.forwardRef(({ widgetMachine, sendToWidget, reco
|
|
|
38862
39317
|
}, [isUploadingState]);
|
|
38863
39318
|
useEffect(() => {
|
|
38864
39319
|
var _a, _b, _c;
|
|
38865
|
-
if (mediaStream) {
|
|
39320
|
+
if (mediaStream && !recordWithoutVideo) {
|
|
38866
39321
|
const settings = (_a = mediaStream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings();
|
|
38867
39322
|
const { aspectRatio, width, height } = settings;
|
|
38868
39323
|
const _width = isMobile ? Math.min(Number(width), Number(height)) : Number(width);
|
|
@@ -38945,7 +39400,7 @@ const InnerView = React__default.forwardRef(({ widgetMachine, sendToWidget, reco
|
|
|
38945
39400
|
React__default.createElement("div", { ref: innerRef, className: innerClassNames },
|
|
38946
39401
|
React__default.createElement("div", { className: contentClasseNames },
|
|
38947
39402
|
isExplanationState && (React__default.createElement(Explanation, { isVideoQuestion: !!(currentQuestionObj === null || currentQuestionObj === void 0 ? void 0 : currentQuestionObj.videoQuestion), isAssessment: isAssessment, timeLimit: isAssessment ? currentQuestionObj.partDuration : currentQuestionObj.thinkingTime, answerType: currentQuestionObj.answerType || ANSWER_TYPES.VIDEO, duration: currentQuestionObj.partDuration, takes: currentQuestionObj.numOfRetakes })),
|
|
38948
|
-
React__default.createElement(VideoCamera, { myinterviewRef: myinterviewRef, ref: videoRef, microphoneRef: microphoneRef, isCameraDisplayed: isCameraDisplayed, isPracticeModeDisplayed: !isQuestionMode && isRecording, errorType: errorType, isPermissionStepsOpen: isSliderModalOpen, onDisplayPermissionSteps: onOpenSliderModal, onReInitRecorder: onReInitRecorder, onClosePermissionSteps: onCloseSliderModal, onRecorderRetry: isSetupState ? onRecorderRetry : onReInitRecorder, isRecorderCanChangeSettings: isRecorderCanChangeSettings, videoDevices: videoDevices, audioDevices: audioDevices, selectedVideoDevice: selectedVideoDevice, selectedAudioDevice: selectedAudioDevice, handleDeviceChange: handleDeviceChange, canStartRecording: canStartRecording, currentQuestion: currentQuestion, numberOfQuestions: questions.length, currentQuestionObj: currentQuestionObj, isRecording: isRecording, durations: durations, recordingTime: recordingTime, isCountDown: isCountDown, countdown: countdown, isQuestionDisplayed: isQuestionDisplayed, isAssessment: isAssessment }),
|
|
39403
|
+
React__default.createElement(VideoCamera, { recordWithoutVideo: recordWithoutVideo, myinterviewRef: myinterviewRef, ref: videoRef, microphoneRef: microphoneRef, isCameraDisplayed: isCameraDisplayed, isPracticeModeDisplayed: !isQuestionMode && isRecording, errorType: errorType, isPermissionStepsOpen: isSliderModalOpen, onDisplayPermissionSteps: onOpenSliderModal, onReInitRecorder: onReInitRecorder, onClosePermissionSteps: onCloseSliderModal, onRecorderRetry: isSetupState ? onRecorderRetry : onReInitRecorder, isRecorderCanChangeSettings: isRecorderCanChangeSettings, videoDevices: videoDevices, audioDevices: audioDevices, selectedVideoDevice: selectedVideoDevice, selectedAudioDevice: selectedAudioDevice, handleDeviceChange: handleDeviceChange, canStartRecording: canStartRecording, currentQuestion: currentQuestion, numberOfQuestions: questions.length, currentQuestionObj: currentQuestionObj, isRecording: isRecording, durations: durations, recordingTime: recordingTime, isCountDown: isCountDown, countdown: countdown, isQuestionDisplayed: isQuestionDisplayed, isAssessment: isAssessment }),
|
|
38949
39404
|
isAssessmentState && !!(currentQuestionObj === null || currentQuestionObj === void 0 ? void 0 : currentQuestionObj.answerType) && (currentQuestionObj === null || currentQuestionObj === void 0 ? void 0 : currentQuestionObj.answerType) !== ANSWER_TYPES.VIDEO
|
|
38950
39405
|
&& (React__default.createElement(AssessmentController, { currentQuestionObj: currentQuestionObj, timer: timer, currentQuestion: currentQuestion, numberOfQuestions: questions.length, onSubmitAssessment: onSubmitAssessment })),
|
|
38951
39406
|
isTimesUpState && React__default.createElement(TimesUp, { onContinue: onContinue }),
|
|
@@ -39025,6 +39480,7 @@ const ICON_BY_CAMERA_STATE = {
|
|
|
39025
39480
|
WAITING: { el: React__default.createElement(Loading, null), color: 'neutral-20' },
|
|
39026
39481
|
ERROR: { el: React__default.createElement(be, null), color: 'error' },
|
|
39027
39482
|
READY: { el: React__default.createElement(Ae, null), color: 'success' },
|
|
39483
|
+
SKIP: { el: React__default.createElement(be, null), color: 'success' },
|
|
39028
39484
|
};
|
|
39029
39485
|
const ICON_BY_MICROPHONE_STATE = {
|
|
39030
39486
|
WAITING: { el: React__default.createElement(Loading, null), color: 'neutral-20' },
|
|
@@ -39037,14 +39493,14 @@ const ICON_BY_INTERNET_STATE = {
|
|
|
39037
39493
|
SLOW_CONNECTION: { el: React__default.createElement(be, null), color: 'success' },
|
|
39038
39494
|
CONNECTED: { el: React__default.createElement(Ae, null), color: 'success' },
|
|
39039
39495
|
};
|
|
39040
|
-
const SetupChecks = ({ checksState, checksMessages, canRetrySpeedTest, onRetry, }) => {
|
|
39496
|
+
const SetupChecks = ({ checksState, checksMessages, canRetrySpeedTest, onRetry, recordWithoutVideo, }) => {
|
|
39041
39497
|
const { t } = useTranslation();
|
|
39042
39498
|
return (React__default.createElement("div", { className: "myinterview-widget-checks" },
|
|
39043
|
-
React__default.createElement("div", { className: "myinterview-widget-checks__item" },
|
|
39499
|
+
!recordWithoutVideo && (React__default.createElement("div", { className: "myinterview-widget-checks__item" },
|
|
39044
39500
|
React__default.createElement("div", { className: `myinterview-widget-checks__icon color--${ICON_BY_CAMERA_STATE[checksState.camera].color}` }, ICON_BY_CAMERA_STATE[checksState.camera].el),
|
|
39045
39501
|
React__default.createElement("div", { className: "myinterview-widget-checks__text-wrapper" },
|
|
39046
39502
|
React__default.createElement(Qe, null, t('setup.camera.name')),
|
|
39047
|
-
React__default.createElement(Qe, { color: "neutral-50" }, t(checksMessages.camera)))),
|
|
39503
|
+
React__default.createElement(Qe, { color: "neutral-50" }, t(checksMessages.camera))))),
|
|
39048
39504
|
React__default.createElement("div", { className: "myinterview-widget-checks__item" },
|
|
39049
39505
|
React__default.createElement("div", { className: `myinterview-widget-checks__icon color--${ICON_BY_MICROPHONE_STATE[checksState.microphone].color}` }, ICON_BY_MICROPHONE_STATE[checksState.microphone].el),
|
|
39050
39506
|
React__default.createElement("div", { className: "myinterview-widget-checks__text-wrapper" },
|
|
@@ -39059,7 +39515,7 @@ const SetupChecks = ({ checksState, checksMessages, canRetrySpeedTest, onRetry,
|
|
|
39059
39515
|
canRetrySpeedTest && (React__default.createElement("button", { className: "myinterview-widget-checks__retry", onClick: onRetry, type: "button" }, t('buttons.btn_internet_test_again'))))))));
|
|
39060
39516
|
};
|
|
39061
39517
|
|
|
39062
|
-
const Setup = ({ widgetMachine, sendToWidget, isPracticeDisabled }) => {
|
|
39518
|
+
const Setup = ({ widgetMachine, sendToWidget, isPracticeDisabled, recordWithoutVideo }) => {
|
|
39063
39519
|
const canRetrySpeedTest = widgetMachine.nextEvents.includes(EVENTS$5.RETRY) && widgetMachine.context.speedTestResult < FAST_UPLOAD_SPEED;
|
|
39064
39520
|
const canStartInterview = widgetMachine.can(EVENTS$5.QUESTION_MODE);
|
|
39065
39521
|
const { isResumed } = widgetMachine.context;
|
|
@@ -39074,7 +39530,7 @@ const Setup = ({ widgetMachine, sendToWidget, isPracticeDisabled }) => {
|
|
|
39074
39530
|
});
|
|
39075
39531
|
return (React__default.createElement("div", { className: "myinterview-widget-outer__setup myinterview-widget--rtl-support" },
|
|
39076
39532
|
React__default.createElement(Qe, { className: "myinterview-widget-outer__title", size: "H2-Bold" }, t('setup.title')),
|
|
39077
|
-
React__default.createElement(SetupChecks, { checksState: widgetMachine.context.checksState, checksMessages: widgetMachine.context.checksMessage, canRetrySpeedTest: canRetrySpeedTest, onRetry: onRetry }),
|
|
39533
|
+
React__default.createElement(SetupChecks, { recordWithoutVideo: recordWithoutVideo, checksState: widgetMachine.context.checksState, checksMessages: widgetMachine.context.checksMessage, canRetrySpeedTest: canRetrySpeedTest, onRetry: onRetry }),
|
|
39078
39534
|
React__default.createElement("div", { className: "myinterview-widget-outer__mode-wrapper" },
|
|
39079
39535
|
!isPracticeDisabled && (React__default.createElement(C, { className: "myinterview-widget-outer__mode-button", onClick: () => sendToWidget(EVENTS$5.PRACTICE_MODE), backgroundColor: "special", disabled: !canStartInterview }, t('buttons.btn_practice'))),
|
|
39080
39536
|
React__default.createElement(C, { className: startButtonClassNames, color: "special", backgroundColor: "white", onClick: () => sendToWidget(EVENTS$5.QUESTION_MODE), disabled: !canStartInterview }, t(isResumed ? 'welcome.resumeInterview' : 'buttons.btn_start').toUpperCase()))));
|
|
@@ -39166,7 +39622,7 @@ const OuterView = ({ widgetMachine, sendToWidget, recorderRef }) => {
|
|
|
39166
39622
|
var _a;
|
|
39167
39623
|
const { questions, currentQuestion, widgetConfig: { job, video, company, config }, recordingType, isConnected, totalFileSize, totalUploadedFilesSize, totalUploadSpeed, } = widgetMachine.context;
|
|
39168
39624
|
const [recorderMachine] = useActor(recorderRef);
|
|
39169
|
-
const { countdown } = recorderMachine.context;
|
|
39625
|
+
const { countdown, recordWithoutVideo } = recorderMachine.context;
|
|
39170
39626
|
const currentQuestionObj = questions[currentQuestion - 1];
|
|
39171
39627
|
const isOuterViewDisplayed = widgetMachine.hasTag(TAGS.DISPLAY_OUTER_VIEW);
|
|
39172
39628
|
const isSetupState = widgetMachine.matches(STATES$5.SETUP);
|
|
@@ -39191,7 +39647,7 @@ const OuterView = ({ widgetMachine, sendToWidget, recorderRef }) => {
|
|
|
39191
39647
|
React__default.createElement(Header, { logo: (job === null || job === void 0 ? void 0 : job.logo) || '', companyName: (job === null || job === void 0 ? void 0 : job.company) || (company === null || company === void 0 ? void 0 : company.name) || '', jobTitle: (job === null || job === void 0 ? void 0 : job.title) || '', forDesktopLayout: true }),
|
|
39192
39648
|
isPracticeMode && !isSetupState && (React__default.createElement(PracticeModeInfo, null)),
|
|
39193
39649
|
isCountDown && React__default.createElement(CountDown, { countDown: countdown }),
|
|
39194
|
-
isSetupState && React__default.createElement(Setup, { widgetMachine: widgetMachine, sendToWidget: sendToWidget, isPracticeDisabled: !!config.disablePractice }),
|
|
39650
|
+
isSetupState && React__default.createElement(Setup, { recordWithoutVideo: recordWithoutVideo, widgetMachine: widgetMachine, sendToWidget: sendToWidget, isPracticeDisabled: !!config.disablePractice }),
|
|
39195
39651
|
isQuestionsListDisplayed && React__default.createElement(QuestionsList, { questions: questions, currentQuestion: currentQuestion, isPracticeMode: isPracticeMode, questionsStatus: questionsStatus }),
|
|
39196
39652
|
isQuestionDisplayed && React__default.createElement(Question, { questionObj: currentQuestionObj }),
|
|
39197
39653
|
(isUploadingState || isConfirmState) && (React__default.createElement(Upload, { isConnected: isConnected, totalFileSize: totalFileSize, totalUploadedFilesSize: totalUploadedFilesSize, totalUploadSpeed: totalUploadSpeed }))));
|
|
@@ -43515,6 +43971,7 @@ const initialState = {
|
|
|
43515
43971
|
isSafeMode: false,
|
|
43516
43972
|
isAutoStart: false,
|
|
43517
43973
|
isMicError: false,
|
|
43974
|
+
isActivelyStopped: false,
|
|
43518
43975
|
};
|
|
43519
43976
|
const recorderMachineV2 = createMachine({
|
|
43520
43977
|
predictableActionArguments: true,
|
|
@@ -43733,6 +44190,7 @@ const recorderMachineV2 = createMachine({
|
|
|
43733
44190
|
on: {
|
|
43734
44191
|
[EVENTS$6.STOP_RECORDING]: {
|
|
43735
44192
|
actions: [
|
|
44193
|
+
ACTIONS$7.SET_ACTIVELY_STOPPED,
|
|
43736
44194
|
ACTIONS$7.STOP_COUNT_DOWN_ACTOR,
|
|
43737
44195
|
ACTIONS$7.STOP_MEDIA_RECORDER,
|
|
43738
44196
|
ACTIONS$7.STOP_MICROPHONE_MACHINE,
|
|
@@ -43833,21 +44291,22 @@ const recorderMachineV2 = createMachine({
|
|
|
43833
44291
|
try {
|
|
43834
44292
|
const audioDeviceId = context.selectedAudioDevice && context.selectedAudioDevice.deviceId;
|
|
43835
44293
|
const videoDeviceId = context.selectedVideoDevice && context.selectedVideoDevice.deviceId;
|
|
44294
|
+
const isVideoOff = () => !!context.recordWithoutVideo;
|
|
43836
44295
|
const defaultConstraint = {
|
|
43837
|
-
video:
|
|
44296
|
+
video: !isVideoOff(),
|
|
43838
44297
|
audio: true,
|
|
43839
44298
|
};
|
|
43840
44299
|
const mobileConstrains = {
|
|
43841
44300
|
audio: {
|
|
43842
44301
|
deviceId: audioDeviceId ? { exact: audioDeviceId } : undefined,
|
|
43843
44302
|
},
|
|
43844
|
-
video: Object.assign(Object.assign({}, context.constraint.video), {
|
|
44303
|
+
video: isVideoOff() ? false : Object.assign(Object.assign({}, context.constraint.video), { deviceId: videoDeviceId ? { exact: videoDeviceId } : undefined, aspectRatio: 16 / 9 }),
|
|
43845
44304
|
};
|
|
43846
44305
|
const desktopConstraints = {
|
|
43847
44306
|
audio: {
|
|
43848
44307
|
deviceId: audioDeviceId ? { exact: audioDeviceId } : undefined,
|
|
43849
44308
|
},
|
|
43850
|
-
video: Object.assign(Object.assign({}, context.constraint.video), { deviceId: videoDeviceId ? { exact: videoDeviceId } : undefined, aspectRatio: 16 / 9 }),
|
|
44309
|
+
video: isVideoOff() ? false : Object.assign(Object.assign({}, context.constraint.video), { deviceId: videoDeviceId ? { exact: videoDeviceId } : undefined, aspectRatio: 16 / 9 }),
|
|
43851
44310
|
};
|
|
43852
44311
|
const constraintCheck = () => {
|
|
43853
44312
|
if (context.isSafeMode)
|
|
@@ -43862,20 +44321,22 @@ const recorderMachineV2 = createMachine({
|
|
|
43862
44321
|
const audioDevices = devices.filter(({ kind }) => kind === 'audioinput');
|
|
43863
44322
|
let currentVideo;
|
|
43864
44323
|
let currentAudio;
|
|
43865
|
-
if (!isFireFox)
|
|
44324
|
+
if (!isVideoOff() && !isFireFox)
|
|
43866
44325
|
currentVideo = mediaStream.getVideoTracks()[0].getCapabilities();
|
|
44326
|
+
if (!isFireFox)
|
|
43867
44327
|
currentAudio = mediaStream.getAudioTracks()[0].getCapabilities();
|
|
43868
|
-
|
|
43869
|
-
const selectedVideoDevice = !isFireFox ? videoDevices
|
|
44328
|
+
const selectedVideoDevice = (!isFireFox && !isVideoOff()) ? videoDevices
|
|
43870
44329
|
.filter((device) => device.deviceId === currentVideo.deviceId)[0] : undefined; // TODO: use find instead of filter
|
|
43871
44330
|
const selectedAudioDevice = !isFireFox ? audioDevices
|
|
43872
44331
|
.filter((device) => device.deviceId === currentAudio.deviceId)[0] : undefined; // TODO: use find instead of filter
|
|
43873
44332
|
if (context.videoRef.current) {
|
|
43874
44333
|
context.videoRef.current.srcObject = mediaStream;
|
|
43875
44334
|
}
|
|
43876
|
-
|
|
44335
|
+
const [track] = isVideoOff() ? mediaStream.getAudioTracks() : mediaStream.getVideoTracks();
|
|
44336
|
+
const permissionName = isVideoOff() ? 'microphone' : 'camera';
|
|
44337
|
+
track.onended = (_event) => {
|
|
43877
44338
|
if ('permissions' in navigator && 'query' in navigator.permissions && !isFireFox) {
|
|
43878
|
-
navigator.permissions.query({ name:
|
|
44339
|
+
navigator.permissions.query({ name: permissionName })
|
|
43879
44340
|
.then((permissionStatus) => {
|
|
43880
44341
|
if (permissionStatus.state === 'denied') {
|
|
43881
44342
|
callback({ type: 'RECORDER_DEVICE_ERROR', data: recorderErrors.NotAllowedError });
|
|
@@ -43884,14 +44345,13 @@ const recorderMachineV2 = createMachine({
|
|
|
43884
44345
|
}
|
|
43885
44346
|
};
|
|
43886
44347
|
navigator.mediaDevices.ondevicechange = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
43887
|
-
var _a, _b;
|
|
44348
|
+
var _a, _b, _c;
|
|
43888
44349
|
const newDevices = yield navigator.mediaDevices.enumerateDevices();
|
|
43889
44350
|
const newVideoDevices = newDevices.filter(({ kind }) => kind === 'videoinput');
|
|
43890
44351
|
const newAudioDevices = newDevices.filter(({ kind }) => kind === 'audioinput');
|
|
43891
|
-
|
|
43892
|
-
|
|
43893
|
-
|
|
43894
|
-
|| (mediaStream.getAudioTracks()[0].readyState === 'ended' && ((_b = context.audioDevices) === null || _b === void 0 ? void 0 : _b.length) !== newAudioDevices.length)) {
|
|
44352
|
+
if ((mediaStream.getAudioTracks()[0].readyState === 'ended' && ((_a = context.audioDevices) === null || _a === void 0 ? void 0 : _a.length) !== newAudioDevices.length)
|
|
44353
|
+
|| (!isVideoOff() && ((mediaStream.getVideoTracks()[0].readyState === 'ended' && ((_b = context.videoDevices) === null || _b === void 0 ? void 0 : _b.length) !== newVideoDevices.length)
|
|
44354
|
+
|| (mediaStream.getAudioTracks()[0].readyState === 'ended' && ((_c = context.audioDevices) === null || _c === void 0 ? void 0 : _c.length) !== newAudioDevices.length)))) {
|
|
43895
44355
|
callback({ type: EVENTS$6.UPDATE_CURRENT_DEVICE, data: recorderErrors.NotAllowedError });
|
|
43896
44356
|
}
|
|
43897
44357
|
callback({ type: EVENTS$6.UPDATE_DEVICES_LIST, data: { newVideoDevices, newAudioDevices } });
|
|
@@ -43905,7 +44365,7 @@ const recorderMachineV2 = createMachine({
|
|
|
43905
44365
|
}
|
|
43906
44366
|
}),
|
|
43907
44367
|
[SERVICES$2.GET_MEDIA_RECORDER]: (context) => (callback) => __awaiter(void 0, void 0, void 0, function* () {
|
|
43908
|
-
var
|
|
44368
|
+
var _d;
|
|
43909
44369
|
const { mediaStream, mimeType, videoBitsPerSecond } = context;
|
|
43910
44370
|
let startTime;
|
|
43911
44371
|
let pausedTime;
|
|
@@ -43945,7 +44405,7 @@ const recorderMachineV2 = createMachine({
|
|
|
43945
44405
|
webm = new File([blob], Date.now().toString(), {
|
|
43946
44406
|
type: mimeType,
|
|
43947
44407
|
});
|
|
43948
|
-
callback({ type:
|
|
44408
|
+
callback({ type: EVENTS$6.SEND_CURRENT_TAKE, data: { webm, videoLength } });
|
|
43949
44409
|
})
|
|
43950
44410
|
.catch((error) => {
|
|
43951
44411
|
console.error('fixVideoMetadata', error);
|
|
@@ -43967,7 +44427,7 @@ const recorderMachineV2 = createMachine({
|
|
|
43967
44427
|
};
|
|
43968
44428
|
mediaRecorder.start(10000);
|
|
43969
44429
|
callback({ type: EVENTS$6.SET_MEDIA_RECORDER, data: mediaRecorder });
|
|
43970
|
-
emitTrackEvent({ eventType: 'cameraInitialized', extraData: { label: (
|
|
44430
|
+
emitTrackEvent({ eventType: 'cameraInitialized', extraData: { label: (_d = context.selectedVideoDevice) === null || _d === void 0 ? void 0 : _d.label } });
|
|
43971
44431
|
if (context.isMicError)
|
|
43972
44432
|
callback(EVENTS$6.PAUSE_MEDIA_RECORDER);
|
|
43973
44433
|
return () => {
|
|
@@ -43994,6 +44454,7 @@ const recorderMachineV2 = createMachine({
|
|
|
43994
44454
|
[ACTIONS$7.INIT_COUNT_DOWN_ACTOR]: assign$2({
|
|
43995
44455
|
countDownRef: (context, event, meta) => spawn(counterMachine.withContext(Object.assign(Object.assign({}, counterMachine.context), { callback: meta.action.data.callback })), { name: 'countDownRef' }),
|
|
43996
44456
|
}),
|
|
44457
|
+
[ACTIONS$7.SET_ACTIVELY_STOPPED]: assign$2((context) => ({ isActivelyStopped: true })),
|
|
43997
44458
|
[ACTIONS$7.STOP_COUNT_DOWN_ACTOR]: assign$2((context) => {
|
|
43998
44459
|
context.countDownRef.stop();
|
|
43999
44460
|
return {
|
|
@@ -44064,7 +44525,7 @@ const recorderMachineV2 = createMachine({
|
|
|
44064
44525
|
// send success event to the parent, to be able to proceed to the next step
|
|
44065
44526
|
[ACTIONS$7.SEND_SUCCESS_TO_PARENT]: sendParent$1((context, event) => (Object.assign(Object.assign({}, event), { type: EVENTS$5.READY_TO_START_RECORDING }))),
|
|
44066
44527
|
// on stop recording send webm file to storage machine
|
|
44067
|
-
[ACTIONS$7.SEND_CURRENT_TAKE]: sendParent$1((
|
|
44528
|
+
[ACTIONS$7.SEND_CURRENT_TAKE]: sendParent$1(({ isActivelyStopped }, event) => (Object.assign(Object.assign({}, event), { type: EVENTS$5.STOP_RECORDING, data: Object.assign(Object.assign({}, event.data), { isActivelyStopped }) }))),
|
|
44068
44529
|
// send null param to mic machine to be able to stop sound detecting
|
|
44069
44530
|
[ACTIONS$7.STOP_MICROPHONE_MACHINE]: send$2((_, _event) => ({ type: EVENTS$3.ON_SET_MEDIA_STREAM, data: null }), { to: (context) => context.microphoneRef }),
|
|
44070
44531
|
// clean mic error, this is really sensitive, !! a lot of user can't start recording coz of it
|
|
@@ -44139,13 +44600,13 @@ const recorderMachineV2 = createMachine({
|
|
|
44139
44600
|
[ACTIONS$7.UPDATE_RECORDING_TIME]: assign$2({
|
|
44140
44601
|
recordingTime: (context) => context.recordingTime + 1,
|
|
44141
44602
|
}),
|
|
44142
|
-
[ACTIONS$7.UPDATE_MACHINE_FOR_NEW_QUESTION]: assign$2((context, _event) => (Object.assign(Object.assign({}, initialState), { selectedAudioDevice: context.selectedAudioDevice, selectedVideoDevice: context.selectedVideoDevice, videoRef: context.videoRef, microphoneRef: context.microphoneRef, constraint: context.constraint, durations: context.durations, facingMode: context.facingMode }))),
|
|
44603
|
+
[ACTIONS$7.UPDATE_MACHINE_FOR_NEW_QUESTION]: assign$2((context, _event) => (Object.assign(Object.assign({}, initialState), { selectedAudioDevice: context.selectedAudioDevice, selectedVideoDevice: context.selectedVideoDevice, videoRef: context.videoRef, microphoneRef: context.microphoneRef, constraint: context.constraint, durations: context.durations, facingMode: context.facingMode, recordWithoutVideo: context.recordWithoutVideo }))),
|
|
44143
44604
|
[ACTIONS$7.DISABLED_AUTO_START]: assign$2({
|
|
44144
44605
|
isAutoStart: (_, _event) => false,
|
|
44145
44606
|
}),
|
|
44146
44607
|
[ACTIONS$7.RESET_MACHINE]: assign$2((context, event) => {
|
|
44147
44608
|
var _a;
|
|
44148
|
-
return (Object.assign(Object.assign({}, initialState), { videoRef: context.videoRef, microphoneRef: context.microphoneRef, constraint: context.constraint, durations: context.durations, isAutoStart: ((_a = event.data) === null || _a === void 0 ? void 0 : _a.isAutoStart) || context.isAutoStart }));
|
|
44609
|
+
return (Object.assign(Object.assign({}, initialState), { videoRef: context.videoRef, microphoneRef: context.microphoneRef, constraint: context.constraint, durations: context.durations, isAutoStart: ((_a = event.data) === null || _a === void 0 ? void 0 : _a.isAutoStart) || context.isAutoStart, recordWithoutVideo: context.recordWithoutVideo }));
|
|
44149
44610
|
}),
|
|
44150
44611
|
[ACTIONS$7.STOP_MEDIA_RECORDER]: assign$2({
|
|
44151
44612
|
mediaRecorder: (context) => {
|
|
@@ -44524,6 +44985,7 @@ const CAMERA_STATES_MESSAGES = {
|
|
|
44524
44985
|
WAITING: 'setup.camera.WAITING',
|
|
44525
44986
|
ERROR: 'setup.camera.ERROR',
|
|
44526
44987
|
READY: 'setup.camera.READY',
|
|
44988
|
+
SKIP: 'setup.camera.SKIP',
|
|
44527
44989
|
};
|
|
44528
44990
|
const MICROPHONE_STATES_MESSAGES = {
|
|
44529
44991
|
WAITING: 'setup.microphone.WAITING',
|
|
@@ -44560,6 +45022,7 @@ var DEBUG;
|
|
|
44560
45022
|
DEBUG["WELCOME_PAGE_STAGE"] = "In welcome page stage";
|
|
44561
45023
|
DEBUG["SETUP_STAGE"] = "In setup stage";
|
|
44562
45024
|
DEBUG["MEIDA_DEVICE_SUCCESS"] = "Media device available";
|
|
45025
|
+
DEBUG["MEDIA_DEVICE_SWITCH_OFF"] = "Media device is off";
|
|
44563
45026
|
DEBUG["MEDIA_DEVICE_ERROR"] = "Media device error";
|
|
44564
45027
|
DEBUG["NO_SOUND_DETECTED"] = "No sound detected";
|
|
44565
45028
|
DEBUG["DEVICE_CHANGED"] = "Device changed";
|
|
@@ -44593,7 +45056,7 @@ const MAPPED_EVENT_TYPES = {
|
|
|
44593
45056
|
PRACTICE: EVENT_TYPES.TIMES_UP,
|
|
44594
45057
|
},
|
|
44595
45058
|
};
|
|
44596
|
-
const questionEventFormatter = (questionActionType) => pure_1(({ recordingType, questions, currentQuestion, widgetConfig, currentTake }) => {
|
|
45059
|
+
const questionEventFormatter = (questionActionType) => pure_1(({ recordingType, questions, currentQuestion, widgetConfig, currentTake }, event) => {
|
|
44597
45060
|
var _a, _b;
|
|
44598
45061
|
const isQuestionMode = recordingType === TAKE_TYPES.QUESTION;
|
|
44599
45062
|
const currentQuestionFile = isQuestionMode ? (_b = (_a = widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.video) === null || _a === void 0 ? void 0 : _a.videos) === null || _b === void 0 ? void 0 : _b[currentQuestion - 1] : null;
|
|
@@ -44601,10 +45064,11 @@ const questionEventFormatter = (questionActionType) => pure_1(({ recordingType,
|
|
|
44601
45064
|
const isAssessment = currentQuestionObj.answerType && currentQuestionObj.answerType !== ANSWER_TYPES.VIDEO;
|
|
44602
45065
|
return {
|
|
44603
45066
|
type: ACTIONS$6.EMIT_TRACKING_EVENT,
|
|
44604
|
-
data: Object.assign({ eventType: isQuestionMode ? MAPPED_EVENT_TYPES[questionActionType].QUESTION : MAPPED_EVENT_TYPES[questionActionType].PRACTICE }, (currentQuestionFile && { extraData: Object.assign(Object.assign(
|
|
45067
|
+
data: Object.assign({ eventType: isQuestionMode ? MAPPED_EVENT_TYPES[questionActionType].QUESTION : MAPPED_EVENT_TYPES[questionActionType].PRACTICE }, (currentQuestionFile && { extraData: Object.assign(Object.assign({ questionFilename: currentQuestionFile.filename, questionNumber: currentQuestion }, (!isAssessment && {
|
|
44605
45068
|
currentTake,
|
|
44606
45069
|
numberOfTakes: currentQuestionObj.numOfRetakes,
|
|
44607
|
-
|
|
45070
|
+
isActivelyStopped: (event.data || {}).isActivelyStopped,
|
|
45071
|
+
})), { questionType: currentQuestionObj.videoQuestion ? 'video' : 'text', answerType: currentQuestionObj.answerType || ANSWER_TYPES.VIDEO }) })),
|
|
44608
45072
|
};
|
|
44609
45073
|
});
|
|
44610
45074
|
const accWidgetMachine = createMachine({
|
|
@@ -44774,10 +45238,17 @@ const accWidgetMachine = createMachine({
|
|
|
44774
45238
|
target: `.${STATES$5.SETUP__TEST__CAMERA__ERROR}`,
|
|
44775
45239
|
cond: GUARDS$3.IS_VIDEO_ERROR,
|
|
44776
45240
|
},
|
|
44777
|
-
[EVENTS$5.READY_TO_START_RECORDING]:
|
|
44778
|
-
|
|
44779
|
-
|
|
44780
|
-
|
|
45241
|
+
[EVENTS$5.READY_TO_START_RECORDING]: [
|
|
45242
|
+
{
|
|
45243
|
+
actions: [{ type: ACTIONS$6.CONSOLE_DEBUG, data: { message: `CAMERA: ${DEBUG.MEDIA_DEVICE_SWITCH_OFF}` } }],
|
|
45244
|
+
target: `.${STATES$5.SETUP__TEST__CAMERA__SKIP}`,
|
|
45245
|
+
cond: GUARDS$3.IS_VIDEO_RECORDING_SKIP,
|
|
45246
|
+
},
|
|
45247
|
+
{
|
|
45248
|
+
actions: [{ type: ACTIONS$6.CONSOLE_DEBUG, data: { message: `CAMERA: ${DEBUG.MEIDA_DEVICE_SUCCESS}` } }],
|
|
45249
|
+
target: `.${STATES$5.SETUP__TEST__CAMERA__SUCCESS}`,
|
|
45250
|
+
},
|
|
45251
|
+
],
|
|
44781
45252
|
},
|
|
44782
45253
|
states: {
|
|
44783
45254
|
[STATES$5.SETUP__TEST__CAMERA__WAITING]: {
|
|
@@ -44789,6 +45260,9 @@ const accWidgetMachine = createMachine({
|
|
|
44789
45260
|
[STATES$5.SETUP__TEST__CAMERA__SUCCESS]: {
|
|
44790
45261
|
entry: [{ type: ACTIONS$6.SET_CHECKS, data: { key: 'camera', state: CAMERA_STATES.READY, message: CAMERA_STATES_MESSAGES.READY } }],
|
|
44791
45262
|
},
|
|
45263
|
+
[STATES$5.SETUP__TEST__CAMERA__SKIP]: {
|
|
45264
|
+
entry: [{ type: ACTIONS$6.SET_CHECKS, data: { key: 'camera', state: CAMERA_STATES.SKIP, message: CAMERA_STATES_MESSAGES.READY } }],
|
|
45265
|
+
},
|
|
44792
45266
|
},
|
|
44793
45267
|
},
|
|
44794
45268
|
[STATES$5.SETUP__TEST__MICROPHONE]: {
|
|
@@ -45308,7 +45782,7 @@ const accWidgetMachine = createMachine({
|
|
|
45308
45782
|
storageRef: spawn(storageMachine, { name: 'storage' }),
|
|
45309
45783
|
})),
|
|
45310
45784
|
[ACTIONS$6.SPAWN_RECORDER]: assign$2((context) => ({
|
|
45311
|
-
recorderRef: spawn(recorderMachineV2.withContext(Object.assign(Object.assign({}, recorderMachineV2.context), { videoRef: context.videoRef, speedTestLevel: SPEED_TEST_LEVEL.HIGH })), { name: 'recorder' }),
|
|
45785
|
+
recorderRef: spawn(recorderMachineV2.withContext(Object.assign(Object.assign({}, recorderMachineV2.context), { videoRef: context.videoRef, speedTestLevel: SPEED_TEST_LEVEL.HIGH, recordWithoutVideo: context.widgetConfig.config.recordWithoutVideo })), { name: 'recorder' }),
|
|
45312
45786
|
})),
|
|
45313
45787
|
[ACTIONS$6.SPAWN_PREVIEW]: assign$2((_) => ({
|
|
45314
45788
|
previewRef: spawn(previewMachine, { name: 'preview' }),
|
|
@@ -45458,6 +45932,7 @@ const accWidgetMachine = createMachine({
|
|
|
45458
45932
|
},
|
|
45459
45933
|
},
|
|
45460
45934
|
guards: {
|
|
45935
|
+
[GUARDS$3.IS_VIDEO_RECORDING_SKIP]: ({ widgetConfig }) => !!widgetConfig.config.recordWithoutVideo,
|
|
45461
45936
|
[GUARDS$3.NO_STORAGE]: ({ storageRef }) => !storageRef,
|
|
45462
45937
|
[GUARDS$3.NO_RECORDER]: ({ recorderRef }) => !recorderRef,
|
|
45463
45938
|
[GUARDS$3.IS_THINKING_TIME]: ({ questions, currentQuestion }) => {
|
|
@@ -45474,7 +45949,7 @@ const accWidgetMachine = createMachine({
|
|
|
45474
45949
|
[GUARDS$3.CAN_RETEST_SPEED_CONNECTION]: ({ speedTestResult }) => (speedTestResult || 0) < FAST_UPLOAD_SPEED,
|
|
45475
45950
|
[GUARDS$3.IS_CONNECTED]: ({ isConnected }) => isConnected,
|
|
45476
45951
|
[GUARDS$3.IS_DISCONNECTED]: ({ isConnected }) => !isConnected,
|
|
45477
|
-
[GUARDS$3.CAN_START_INTERVIEW]: ({ checksState }) => checksState.camera === CAMERA_STATES.READY && checksState.microphone === MICROPHONE_STATES.READY && [INTERNET_STATES.CONNECTED, INTERNET_STATES.SLOW_CONNECTION].includes(checksState.internet),
|
|
45952
|
+
[GUARDS$3.CAN_START_INTERVIEW]: ({ checksState }) => (checksState.camera === CAMERA_STATES.READY || checksState.camera === CAMERA_STATES.SKIP) && checksState.microphone === MICROPHONE_STATES.READY && [INTERNET_STATES.CONNECTED, INTERNET_STATES.SLOW_CONNECTION].includes(checksState.internet),
|
|
45478
45953
|
[GUARDS$3.ARE_ALL_QUESTIONS_UPLOADED]: ({ widgetConfig }) => { var _a, _b; return !!((_b = (_a = widgetConfig.video) === null || _a === void 0 ? void 0 : _a.videos) === null || _b === void 0 ? void 0 : _b.every((video) => video.uploaded)); },
|
|
45479
45954
|
[GUARDS$3.SHOULD_SHOW_WELCOME]: ({ widgetConfig }) => !!widgetConfig.config.introVideo || !!widgetConfig.config.welcomeTitle || !!widgetConfig.config.welcomeText,
|
|
45480
45955
|
[GUARDS$3.IS_NO_SOUND_ERROR]: (_, { data }) => data.code === MICROPHONE_NO_SOUND_ERROR_CODE,
|
|
@@ -48076,7 +48551,7 @@ const Main = ({ widgetConfig, setShouldShowWaterMark, myinterviewRef, isWidgetMi
|
|
|
48076
48551
|
isMobile && (React__default.createElement(SliderModal, { isOpen: isSliderModalOpen, onClose: () => setIsSliderModalOpen(false), onRetry: isSetupState ? onRecorderRetry : onReInitRecorder }))));
|
|
48077
48552
|
};
|
|
48078
48553
|
|
|
48079
|
-
var css_248z = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap\");:host,:root,html[data-theme=light]{--color-primary:#5aa4f5;--color-secondary:#5ed0bc;--color-premium:#fac918;--color-special:#6690ff;--color-neutral-10:#f2f2f2;--color-neutral-20:#e6e6e6;--color-neutral-30:#ccc;--color-neutral-40:#aaa;--color-neutral-50:#8d8d8d;--color-neutral-60:#777;--color-neutral-70:#444;--color-neutral-90:#404852;--color-white:#fff;--color-black:#000;--color-success:#5ed0bc;--color-warning:#fac918;--color-error:#f25f5b;--color-info:#404852;--color-malibu:linear-gradient(50.24deg,#135 -146.43%,#557ede -0.68%,#6690ff 75.97%)}html[data-theme=dark]{--color-primary:#5aa4f5;--color-secondary:#5ed0bc;--color-premium:#fac918;--color-special:#6690ff;--color-neutral-10:#f2f2f2;--color-neutral-20:#e6e6e6;--color-neutral-30:#ccc;--color-neutral-40:#aaa;--color-neutral-50:#8d8d8d;--color-neutral-60:#777;--color-neutral-70:#444;--color-neutral-90:#404852;--color-white:#222;--color-black:#ddd;--color-success:#5ed0bc;--color-warning:#fac918;--color-error:#f25f5b;--color-info:#404852;--color-malibu:linear-gradient(135deg,#51beff,#6690ff)}.color--primary{color:var(--color-primary)}.background-color--primary{background-color:var(--color-primary)}.border-color--primary{border-color:var(--color-primary)}.color--secondary{color:var(--color-secondary)}.background-color--secondary{background-color:var(--color-secondary)}.border-color--secondary{border-color:var(--color-secondary)}.color--premium{color:var(--color-premium)}.background-color--premium{background-color:var(--color-premium)}.border-color--premium{border-color:var(--color-premium)}.color--special{color:var(--color-special)}.background-color--special{background-color:var(--color-special)}.border-color--special{border-color:var(--color-special)}.color--neutral-10{color:var(--color-neutral-10)}.background-color--neutral-10{background-color:var(--color-neutral-10)}.border-color--neutral-10{border-color:var(--color-neutral-10)}.color--neutral-20{color:var(--color-neutral-20)}.background-color--neutral-20{background-color:var(--color-neutral-20)}.border-color--neutral-20{border-color:var(--color-neutral-20)}.color--neutral-30{color:var(--color-neutral-30)}.background-color--neutral-30{background-color:var(--color-neutral-30)}.border-color--neutral-30{border-color:var(--color-neutral-30)}.color--neutral-40{color:var(--color-neutral-40)}.background-color--neutral-40{background-color:var(--color-neutral-40)}.border-color--neutral-40{border-color:var(--color-neutral-40)}.color--neutral-50{color:var(--color-neutral-50)}.background-color--neutral-50{background-color:var(--color-neutral-50)}.border-color--neutral-50{border-color:var(--color-neutral-50)}.color--neutral-60{color:var(--color-neutral-60)}.background-color--neutral-60{background-color:var(--color-neutral-60)}.border-color--neutral-60{border-color:var(--color-neutral-60)}.color--neutral-70{color:var(--color-neutral-70)}.background-color--neutral-70{background-color:var(--color-neutral-70)}.border-color--neutral-70{border-color:var(--color-neutral-70)}.color--neutral-90{color:var(--color-neutral-90)}.background-color--neutral-90{background-color:var(--color-neutral-90)}.border-color--neutral-90{border-color:var(--color-neutral-90)}.color--white{color:var(--color-white)}.background-color--white{background-color:var(--color-white)}.border-color--white{border-color:var(--color-white)}.color--black{color:var(--color-black)}.background-color--black{background-color:var(--color-black)}.border-color--black{border-color:var(--color-black)}.color--success{color:var(--color-success)}.background-color--success{background-color:var(--color-success)}.border-color--success{border-color:var(--color-success)}.color--warning{color:var(--color-warning)}.background-color--warning{background-color:var(--color-warning)}.border-color--warning{border-color:var(--color-warning)}.color--error{color:var(--color-error)}.background-color--error{background-color:var(--color-error)}.border-color--error{border-color:var(--color-error)}.color--info{color:var(--color-info)}.background-color--info{background-color:var(--color-info)}.border-color--info{border-color:var(--color-info)}.background-color--malibu{background:var(--color-malibu)}*{box-sizing:border-box;font-family:Nunito Sans,sans-serif;margin:0;outline:none;padding:0}body{background-color:var(--color-white)}@keyframes react-loading-skeleton{to{transform:translateX(100%)}}.react-loading-skeleton{--base-color:#ebebeb;--highlight-color:#f5f5f5;--animation-duration:1.5s;--animation-direction:normal;--pseudo-element-display:block;background-color:var(--base-color);border-radius:.25rem;display:inline-flex;line-height:1;overflow:hidden;position:relative;width:100%;z-index:1}.react-loading-skeleton:after{animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-iteration-count:infinite;animation-name:react-loading-skeleton;animation-timing-function:ease-in-out;background-image:linear-gradient(90deg,var(--base-color),var(--highlight-color),var(--base-color));background-repeat:no-repeat;content:\" \";display:var(--pseudo-element-display);height:100%;left:0;position:absolute;right:0;top:0;transform:translateX(-100%)}.myinterview-button{border:none;border-radius:10px;cursor:pointer;font-weight:700;height:45px;letter-spacing:1px}.myinterview-button:disabled{cursor:unset;opacity:.6;pointer-events:none}.myinterview-button--small{font-size:10px;height:35px;min-width:100px;padding:0 20px}.myinterview-button--medium{font-size:12px;height:45px;min-width:150px;padding:0 30px}.myinterview-button--large{font-size:16px;height:65px;min-width:180px;padding:0 45px}.dropdown{align-items:center;cursor:pointer;display:flex;font-size:14px;justify-content:space-between;padding:15px;white-space:nowrap}.dropdown--rtl{direction:rtl}.dropdown--rtl .dropdown__input{padding-left:30px;padding-right:15px}.dropdown--rtl .dropdown__arrow-wrapper,.dropdown--rtl .dropdown__clear-wrapper{margin-left:0;margin-right:5px}.dropdown--rtl .dropdown__item span{margin-left:5px;margin-right:0}.dropdown--rtl.dropdown--with-icon{padding-left:15px;padding-right:10px}.dropdown--rtl.dropdown--with-icon .dropdown__selected-item,.dropdown--rtl.dropdown--with-icon .dropdown__selected-item--placeholder{padding-left:0;padding-right:8px}.dropdown--standalone{border:.5px solid var(--color-neutral-30);border-radius:10px;border-width:.5px!important;height:50px;position:relative}.dropdown--with-icon{padding-left:10px}.dropdown--with-icon svg{height:22px}.dropdown--with-icon .dropdown__selected-item,.dropdown--with-icon .dropdown__selected-item--placeholder{padding-left:8px}.dropdown--opened{border-radius:10px 10px 0 0;box-shadow:0 0 10px -2px #0000001a}.dropdown--opened .dropdown__options{box-shadow:0 0 10px -2px #0000001a;visibility:visible}.dropdown--opened .dropdown__arrow-wrapper{transform:rotate(-180deg)}.dropdown--upside.dropdown--opened{border-radius:0 0 4px 4px;border-top:0}.dropdown--upside .dropdown__options{border-bottom:0;border-radius:10px 10px 0 0;border-top:.5px solid var(--color-neutral-30);bottom:auto;top:0;transform:translateY(-100%)}.dropdown__selected-item{flex:1;overflow:hidden;text-overflow:ellipsis}.dropdown__selected-item::selection{background-color:initial}.dropdown__selected-item--placeholder{opacity:.5}.dropdown__input{border:0;border-radius:10px;height:100%;left:0;opacity:0;padding:15px 30px 15px 15px;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}.dropdown__input--searchable:focus{opacity:1}.dropdown__input--searchable:focus+.dropdown__selected-item{opacity:0!important}.dropdown__arrow-wrapper,.dropdown__clear-wrapper{align-items:center;display:flex;flex-shrink:0;justify-content:center;margin-left:5px;transition:.2s;width:1em}.dropdown__options{background-color:var(--color-white);border:.5px solid var(--color-neutral-30);border-radius:0 0 4px 4px;border-top:0;bottom:0;left:-.75px;list-style:none;margin:0;max-height:0;overflow:auto;padding:0;position:absolute;transform:translateY(100%);visibility:hidden;width:calc(100% + 1.25px)}.dropdown__item{cursor:pointer;max-width:100%;overflow:hidden;padding:15px;text-overflow:ellipsis}.dropdown__item:not(:last-child){border-bottom:.5px solid var(--color-neutral-30)}.dropdown__item--highlighted,.dropdown__item:hover{background-color:var(--color-primary);color:var(--color-white)}.dropdown__item span{margin-right:5px}.tag{background-color:#dde8f6;border-radius:3px;color:#4a90e2;display:inline-block;font-size:13px;font-weight:500;letter-spacing:.5px;margin:5px 8px 5px 0;padding:4px 11px;text-transform:capitalize}.myinterview-text--XS{font-size:12px;line-height:20px}.myinterview-text--S{font-size:14px;line-height:22px}.myinterview-text--M{font-size:16px;line-height:24px}.myinterview-text--L{font-size:18px;line-height:26px}.myinterview-text--H3{font-size:20px;line-height:28px}.myinterview-text--H2{font-size:24px;line-height:32px}.myinterview-text--H1{font-size:30px;line-height:38px}.myinterview-text--D3{font-size:38px;line-height:46px}.myinterview-text--D2{font-size:48px;line-height:54px}.myinterview-text--D1{font-size:56px;line-height:64px}.myinterview-text--regular{font-weight:400}.myinterview-text--semibold{font-weight:600}.myinterview-text--bold{font-weight:700}.myinterview-text--italic{font-style:italic}.myinterview-text--truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toggle-switch{align-items:center;border-radius:99999px;cursor:pointer;display:flex;position:relative;transition:.2s}.toggle-switch__indicator{border-radius:50%;height:.65em;left:10%;position:absolute;transition:.2s;width:.65em}.toggle-switch__indicator--active{left:90%;transform:translateX(-100%)}.toggle-switch:active .toggle-switch__indicator{height:.5em;width:.5em}.toggle-text{align-items:center;cursor:pointer;display:flex;justify-content:center;width:fit-content}.toggle-text__arrow-wrapepr{align-items:center;display:flex;margin-left:5px;transition:.25s ease-in-out;width:1em}.toggle-text__arrow-wrapepr--opened{transform:rotate(-180deg)}.progress{align-items:center;border-radius:50%;display:flex;height:1em;justify-content:center;width:1em}.progress__fill{border-radius:50%;height:.7em;width:.7em}.input-text{display:flex;flex-direction:column;flex-grow:1}.input-text__field{border:.5px solid var(--color-neutral-30);border-radius:10px;font-size:14px;padding:14px 16px;width:100%}.input-text__field--with-icon{padding:14px 43px!important}.input-text__icon-container{margin:10px 12px;position:absolute}.input-text__icon-container i{vertical-align:-webkit-baseline-middle}.input-text__icon-container i svg{height:22px;width:22px}.input-text--error{border:1px solid var(--color-error)}.input-text__error-msg{color:var(--color-error);margin-top:3px}.dnd-wrapper{border:1px solid var(--color-neutral-30);border-radius:10px;height:50px;max-width:500px;padding:7px 10px;position:relative;transition:.3s ease-in-out;width:100%}.dnd-wrapper--rtl{direction:rtl}.dnd-wrapper--rtl .dnd-wrapper__placeholder{margin-left:0;margin-right:5px}.dnd-wrapper--rtl .dnd-wrapper__label .progress{margin-left:5px;margin-right:0}.dnd-wrapper--rtl .dnd-wrapper__text{margin-left:0;margin-right:5px}.dnd-wrapper--rtl .dnd-wrapper__icon--close{margin-left:0;margin-right:auto}.dnd-wrapper__placeholder{color:var(--color-neutral-50);font-size:14px;margin-left:5px}.dnd-wrapper__left-hand{align-items:flex-end;display:flex}.dnd-wrapper--scale{transform:scale(1.1)}.dnd-wrapper--border-solid{border:.5px solid var(--color-neutral-30)}.dnd-wrapper__label{align-items:center;display:flex;font-size:14px;height:100%;justify-content:center}.dnd-wrapper__label svg{height:16px;vertical-align:middle;width:16px}.dnd-wrapper__label--with-icon{justify-content:space-between}.dnd-wrapper__label--with-icon i{color:var(--color-neutral-60)}.dnd-wrapper__label--uploaded,.dnd-wrapper__label--uploading{justify-content:flex-start}.dnd-wrapper__label .progress{height:18px;margin-right:5px;width:18px}.dnd-wrapper__icon{align-items:center;display:flex}.dnd-wrapper__icon--clip{font-size:18px;transform:rotate(10deg) rotateX(180deg)}.dnd-wrapper__icon--close{cursor:pointer;margin-left:auto;z-index:10}.dnd-wrapper__text{margin-left:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dnd-wrapper__input{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:1}.dnd-wrapper__input:disabled{cursor:auto}.myinterview-modal-wrapper{border-radius:4px;box-shadow:0 4px 6px -1px #00000014,0 2px 4px -1px #0000000f;left:50%;max-height:90vh;max-width:90vw;overflow:auto;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:30}.myinterview-modal-wrapper--fullscreen{border-radius:0;box-shadow:none;height:100vh;left:0;max-height:100vh;max-width:100vw;padding:0;top:0;transform:none;width:100vw}.myinterview-modal-wrapper__box{height:100%;max-height:100%;max-width:100%;overflow:auto;width:100%}.myinterview-modal-wrapper__close-btn{cursor:pointer;height:16px;position:absolute;right:20px;top:20px;width:16px}.myinterview-modal-wrapper-background{background-color:#0000001a;height:100vh;left:0;position:fixed;top:0;width:100vw}.phone-number{border:.5px solid var(--color-neutral-30);border-radius:10px;display:flex;position:relative}.phone-number--rtl{direction:rtl}.phone-number--rtl .input-text{direction:ltr}.phone-number--rtl .input-text input{text-align:end}.phone-number--rtl .dropdown{border-left:.5px solid var(--color-neutral-20);border-right:0!important}.phone-number--opened{border-radius:10px 10px 0 0!important}.phone-number--opened--up{border-radius:0 0 10px 10px!important}.phone-number .dropdown{border-right:.5px solid var(--color-neutral-20);padding:0 15px;width:75px}.phone-number .dropdown__selected-item{font-size:16px}.phone-number .dropdown--opened{border-radius:unset!important;box-shadow:unset!important}.phone-number .input-text{border:0;flex:1}.myinterview-logo-wrapper{max-height:400px}.myinterview-checkbox{align-items:center;border-radius:4px;border-style:solid;border-width:1px;display:flex;flex-shrink:0;justify-content:center;position:relative;transition:all .15s ease-out}.myinterview-checkbox__input{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:1}.myinterview-checkbox__checkmark{border-radius:50%;display:flex;height:100%;padding:2px;transform:scale(0);transition:.15s ease-out;width:100%}.myinterview-checkbox__checkmark--checked{border-radius:0;transform:scale(1)}.myinterview-checkbox__checkmark svg{height:100%;width:100%}.myinterview-widget-no-select{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.myinterview-widget-scroll-indicator::-webkit-scrollbar{display:initial!important;width:5px}.myinterview-widget-scroll-indicator::-webkit-scrollbar-thumb{background:var(--color-neutral-40)}@keyframes fade-in{0%{opacity:0}}:host{--myinterview-widget-dynamic-overflow:auto;--myinterview-widget-background-height:calc(40vh - 100px);--myinterview-widget-background-preview-display:none;--myinterview-widget-video-aspect-ratio:0.75;--myinterview-widget-camera-transform:translateZ(0) rotateY(180deg);--myinterview-widget-outer-width:530px;--myinterview-widget-recorder-border-radius:10px;--myinterview-widget-preview-video-border-radius:20px;--myinterview-background-opacity:0;--myinterview-widget-wrapper-padding:20px}@media (min-width:1200px){:host{--myinterview-widget-recorder-border-radius:20px;--myinterview-widget-preview-video-border-radius:10px;--myinterview-widget-video-aspect-ratio:1.77778;--myinterview-widget-wrapper-padding:10px}}.myinterview-widget{word-wrap:normal;--myinterview-widget-layout-top:0;--myinterview-widget-layout-right:0;--myinterview-widget-layout-bottom:0;--myinterview-widget-layout-left:0;border-collapse:initial;border-spacing:0;caption-side:top;cursor:auto;direction:ltr;empty-cells:show;font-size:1rem;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:400;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;orphans:2;quotes:initial;tab-size:8;text-align:initial;text-align-last:auto;text-decoration-color:initial;text-indent:0;text-justify:auto;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;widows:2;word-break:normal;word-spacing:normal}.myinterview-widget *,.myinterview-widget :after,.myinterview-widget :before{box-sizing:border-box;font-family:Nunito Sans,sans-serif;margin:0}.myinterview-widget__layout{background-color:var(--color-white);border-radius:0;bottom:0;display:flex;flex-direction:column;left:0;max-height:100%;padding:20px 20px 0;position:fixed;right:0;top:0;transform:translateZ(0);-webkit-transform:translateZ(0);z-index:2147483000}.myinterview-widget__layout--animated{animation:myinterview-widget-open .4s ease-out;-webkit-animation:myinterview-widget-open .4s ease-out;-moz-animation:myinterview-widget-open .4s ease-out;-o-animation:myinterview-widget-open .4s ease-out}.myinterview-widget__layout--minimized{animation:myinterview-widget-minimize .5s ease-in-out forwards;-webkit-animation:myinterview-widget-minimize .5s ease-in-out forwards;-moz-animation:myinterview-widget-minimize .5s ease-in-out forwards;-o-animation:myinterview-widget-minimize .5s ease-in-out forwards;overflow:hidden}.myinterview-widget__layout--minimized>*{opacity:0;transition:opacity .2s ease-out}@media (min-width:480px){.myinterview-widget__layout{display:grid;grid-template-columns:minmax(20px,1fr) minmax(auto,480px) minmax(20px,1fr);padding:20px 0 0}.myinterview-widget__layout>*{grid-column:2}.myinterview-widget__layout>.full{grid-column:1/-1;padding:0}}@media (min-width:1200px){.myinterview-widget__layout{grid-template-columns:10px 1fr 10px;padding:50px 0}}@keyframes myinterview-widget-open{0%{background-color:var(--color-primary);border-radius:10px;bottom:var(--myinterview-widget-layout-bottom);left:var(--myinterview-widget-layout-left);min-height:45px;overflow:hidden;padding:0;right:var(--myinterview-widget-layout-right);top:var(--myinterview-widget-layout-top)}50%{background-color:var(--color-white)}}@keyframes myinterview-widget-minimize{90%{border-radius:10px;bottom:var(--myinterview-widget-layout-bottom);left:var(--myinterview-widget-layout-left);min-height:45px;opacity:1;padding:0;right:var(--myinterview-widget-layout-right);top:var(--myinterview-widget-layout-top);z-index:2147483000}99%{opacity:0}to{background-color:var(--color-primary);border-radius:10px;bottom:var(--myinterview-widget-layout-bottom);left:var(--myinterview-widget-layout-left);min-height:45px;opacity:0;padding:0;right:var(--myinterview-widget-layout-right);top:var(--myinterview-widget-layout-top);z-index:-1}}.myinterview-widget-icons__play-button{cursor:pointer;position:relative}.myinterview-widget-icons__play-button svg{color:var(--color-primary)}.myinterview-widget-icons__play-button svg path{transition:d .4s ease-out;-webkit-transition:d .4s}.myinterview-widget-icons__play-button svg rect{transition:rx .4s;-webkit-transition:rx .4s}.myinterview-widget-icons__loading{background-color:currentColor;border-radius:50%;height:38px;overflow:hidden;position:relative;transform:translateZ(0);width:38px}.myinterview-widget-icons__loading:after{animation:slide 1s infinite;background:linear-gradient(to right,currentColor,var(--color-neutral-10),currentColor);content:\"\";height:100%;left:-50px;position:absolute;width:100%}.myinterview-widget-icons__no-camera-mic{align-items:center;background-color:#eff6fe;border-radius:50%;display:flex;height:80px;justify-content:center;position:relative;width:80px}.myinterview-widget-icons__no-camera-mic__camera,.myinterview-widget-icons__no-camera-mic__mic{align-items:center;border-radius:4px;display:flex;height:28px;justify-content:center;position:absolute;width:28px}.myinterview-widget-icons__no-camera-mic__camera svg,.myinterview-widget-icons__no-camera-mic__mic svg{height:20px;width:20px}.myinterview-widget-icons__no-camera-mic__camera{background-color:var(--color-primary);color:var(--color-white);transform:translate(-35%,-35%)}.myinterview-widget-icons__no-camera-mic__mic{background-color:var(--color-white);color:var(--color-primary);transform:translate(35%,35%)}.myinterview-widget__wrapper{-ms-overflow-style:none;display:flex;flex:1;flex-direction:column;overflow:hidden;position:relative;scrollbar-width:none}.myinterview-widget__wrapper ::-webkit-scrollbar,.myinterview-widget__wrapper::-webkit-scrollbar{display:none}.myinterview-widget__wrapper--hide-header .myinterview-widget-header{visibility:hidden}.myinterview-widget__background{background:linear-gradient(50.24deg,var(--color-primary) 0,var(--color-special) 75%);height:var(--myinterview-widget-background-height);left:0;opacity:var(--myinterview-background-opacity);overflow:hidden;position:absolute;top:0;transition:opacity .5s;width:100%}.myinterview-widget__background:before{border:6vh solid hsla(0,0%,100%,.267);border-radius:50%;content:\"\";height:30vh;position:absolute;right:0;top:0;transform:translate(50%,-50%);width:30vh}.myinterview-widget__background:after{background-color:var(--color-white);border-radius:20px 20px 0 0;bottom:0;content:\"\";display:var(--myinterview-widget-background-preview-display);height:20px;position:absolute;width:100%}@media (min-width:1200px){.myinterview-widget__background:after{display:none}.myinterview-widget__background{height:100vh;left:auto;right:0;width:calc(100% - var(--myinterview-widget-outer-width))}.myinterview-widget__background:before{border:12vh solid hsla(0,0%,100%,.267);height:70vh;width:70vh}}.myinterview-widget__watermark{display:none}@media (min-width:1200px){.myinterview-widget__watermark{bottom:20px;display:flex;height:64px;left:20px;position:absolute}}.myinterview-widget__background-dots{display:none}@media (min-width:1200px){.myinterview-widget__background-dots{background-image:radial-gradient(hsla(0,0%,100%,.467) 15%,#0000 0);background-position:0 0,50px 50px;background-size:20px 20px;bottom:0;display:flex;height:200px;position:absolute;right:0;width:200px}}.myinterview-widget__views{--myinterview-widget-views-margin-top:0px;--myinterview-widget-practice-opacity:1;-webkit-overflow-scrolling:touch;color:var(--color-primary);display:flex;flex:1;flex-direction:column;overflow-y:var(--myinterview-widget-dynamic-overflow);scroll-snap-type:y mandatory;z-index:20}.myinterview-widget__views--uploading{gap:0;justify-content:center;margin-bottom:30px}@media (min-width:1200px){.myinterview-widget__views{align-items:start;flex:initial;flex:1;flex-direction:row-reverse;gap:0;justify-content:flex-end;overflow:hidden;padding:0;scroll-snap-type:none}.myinterview-widget__views--uploading{margin-bottom:0}}.myinterview-widget__views--rtl .myinterview-widget--rtl-support{direction:rtl}.myinterview-widget-recording-action-button{margin-bottom:20px;min-height:45px;position:relative;scroll-snap-align:end;z-index:1}@media (min-width:1200px){.myinterview-widget-recording-action-button{display:none}}.myinterview-widget-recording-action-button--video-question:disabled{display:none!important}.myinterview-widget-recording-action-button--stop-recording{border:1px solid var(--color-neutral-40)!important}@media (min-width:1200px){.myinterview-widget-recording-action-button--stop-recording{border:none!important}}.myinterview-widget-rotate-screen{align-items:center;animation:fade-in .3s;background-color:var(--color-white);display:none;height:100%;justify-content:center;left:0;padding:20px!important;position:absolute;top:0;width:100%;z-index:400}.myinterview-widget-rotate-screen svg{flex:0;margin-right:40px;min-width:120px}@media screen and (orientation:landscape){.myinterview-widget-rotate-screen{display:flex}}.myinterview-widget-unsupported-modal{align-items:center;background-color:var(--color-white);display:flex;height:100%;justify-content:center;left:0;padding:20px;position:absolute;top:0;width:100%;z-index:400}.myinterview-widget-unsupported-modal__message{text-align:center}.myinterview-widget-minimize{color:var(--color-white);cursor:pointer;display:none;height:20px;position:fixed;right:30px;top:30px;width:20px;z-index:50}@media (min-width:1024px){.myinterview-widget-minimize{display:flex}}.myinterview-widget-header{display:flex;flex-wrap:wrap;gap:18px;height:fit-content;margin:0 0 20px;max-height:112px;max-width:100%;overflow:hidden;transition:all .2s}.myinterview-widget-header--hidden{height:0;margin:0;overflow:hidden}@media (min-width:1200px){.myinterview-widget-header--hidden{height:fit-content;margin:0 0 20px}}.myinterview-widget-header__logo{height:48px}.myinterview-widget-header__logo img{flex-shrink:1;max-height:100%;max-width:100%;object-fit:contain;overflow:hidden}.myinterview-widget-header__details-wrapper{display:flex;flex-direction:column;flex-shrink:0;justify-content:center;letter-spacing:.2px;max-width:100%;min-width:60%;overflow:hidden}@media (min-width:1200px){.myinterview-widget-header{display:none;max-width:var(--myinterview-widget-outer-width);overflow:visible;padding-left:20px}.myinterview-widget-header__company-name{color:var(--color-neutral-50)}.myinterview-widget-header__job-title{color:var(--color-neutral-90)}}.myinterview-widget-header--desktop-layout{display:none}@media (min-width:1200px){.myinterview-widget-header--desktop-layout{display:flex;min-height:48px}}.myinterview-widget-inner{align-items:center;display:flex;flex-direction:column;margin-bottom:20px;min-height:min((100vw - 40px) * 1/var(--myinterview-widget-video-aspect-ratio),480px * 1/var(--myinterview-widget-video-aspect-ratio));position:relative;scroll-snap-align:start;z-index:1}.myinterview-widget-inner--no-snap{scroll-snap-align:none}@media (min-width:1200px){.myinterview-widget-inner{background-color:var(--color-white);border-radius:var(--myinterview-widget-recorder-border-radius);box-shadow:0 4px 14px -2px #00000026;height:calc((100vw - 20px - var(--myinterview-widget-outer-width))*9/16);margin:auto;max-height:440px;max-width:782.2222222222px;min-height:auto;overflow:hidden;width:100%}}.myinterview-widget-inner--hidden{max-height:0;min-height:0;overflow:hidden;visibility:hidden}.myinterview-widget-inner--welcome-hidden{aspect-ratio:16/9;visibility:hidden;width:100%}.myinterview-widget-inner__content{aspect-ratio:var(--myinterview-widget-video-aspect-ratio);border-radius:var(--myinterview-widget-recorder-border-radius);display:flex;flex-direction:column;height:calc(100% - var(--myinterview-widget-views-margin-top));max-height:100%;max-width:fit-content;min-height:200px;min-width:200px;overflow:hidden;position:sticky;top:0}.myinterview-widget-inner__content--full-width{min-width:100%}@media (min-width:1200px){.myinterview-widget-inner__content{height:100%;max-width:100%;position:relative;width:100%}}.myinterview-widget-inner__content--error{display:flex;flex:1;flex-direction:column;height:calc(100% - var(--myinterview-widget-views-margin-top));max-width:100%;min-height:fit-content;width:100%}.myinterview-widget-inner .myinterview-widget-explanation{align-items:center;background-color:#fffffff2;border-radius:var(--myinterview-widget-recorder-border-radius);display:flex;flex-direction:column;height:100%;justify-content:center;padding:20px;position:absolute;text-align:center;white-space:pre-line;width:100%;z-index:1}.myinterview-widget-inner .myinterview-widget-explanation .myinterview-widget-question__question-parameters{margin-bottom:15px}.myinterview-widget-inner .myinterview-widget-explanation__main{margin-bottom:15px;max-width:50ch}.myinterview-widget-inner .myinterview-widget-explanation__header{margin-bottom:15px}.myinterview-widget-inner .myinterview-widget-times-up{align-items:center;background-color:var(--color-white);display:flex;flex:1;flex-direction:column;gap:10px;justify-content:center;padding:20px;text-align:center}.myinterview-widget-inner .myinterview-widget-times-up__button{margin-top:50px}@media (min-width:1200px){.myinterview-widget-inner .myinterview-widget-times-up__button,.myinterview-widget-inner .myinterview-widget-times-up__title{margin-top:auto}}.myinterview-widget-inner .myinterview-widget-recording-action-button{display:none}@media (min-width:1200px){.myinterview-widget-inner .myinterview-widget-recording-action-button{bottom:20px;display:block;left:50%;margin:0;position:absolute;transform:translate(-50%);white-space:nowrap;width:fit-content;z-index:20}}.myinterview-widget-inner--video-question-state,.myinterview-widget-inner--welcome-page-state{min-height:fit-content;min-width:100%}.myinterview-widget-inner--video-question-state .myinterview-widget-inner__content,.myinterview-widget-inner--welcome-page-state .myinterview-widget-inner__content{aspect-ratio:auto;height:auto}@media (min-width:1200px){.myinterview-widget-inner--video-question-state,.myinterview-widget-inner--welcome-page-state{min-width:auto}.myinterview-widget-inner--video-question-state .myinterview-widget-recording-action-button,.myinterview-widget-inner--welcome-page-state .myinterview-widget-recording-action-button{bottom:70px}}.myinterview-widget-inner--full{flex:1;scroll-snap-align:none}.myinterview-widget-inner--full .myinterview-widget-inner__content{flex:1;height:max-content;max-width:100%;width:100%}@media (min-width:1200px){.myinterview-widget-inner--full{flex:auto}}.myinterview-widget-outer{border-radius:10px;display:flex;flex-direction:column;padding-bottom:20px;scroll-snap-align:end}.myinterview-widget-outer--no-snap{scroll-snap-align:none}.myinterview-widget-outer--hidden{display:none}.myinterview-widget-outer--uploading{flex:0;padding:0}@media (min-width:1200px){.myinterview-widget-outer{background-color:initial;flex:none;height:100%;padding:0 20px 0 0!important;width:var(--myinterview-widget-outer-width)}.myinterview-widget-outer>*{padding:0 20px}.myinterview-widget-outer--hidden{display:flex}.myinterview-widget-outer--uploading{padding:0}}.myinterview-widget-outer .myinterview-widget-question{background-color:#fffffff2;border-radius:10px;margin:0 auto;transition:opacity .25s;width:100%}@media (min-width:1200px){.myinterview-widget-outer .myinterview-widget-question{padding:40px 20px 0}.myinterview-widget-outer .myinterview-widget-question__question{font-size:26px;line-height:36px}}.myinterview-widget-outer--hide-question .myinterview-widget-question{display:none}.myinterview-widget-outer__setup{display:flex;flex:1;flex-direction:column}.myinterview-widget-outer__title{margin-bottom:15px}.myinterview-widget-outer__mode-wrapper{background-color:var(--color-white);bottom:0;display:flex;justify-content:space-around;margin-top:15px;padding:10px 0;position:sticky}.myinterview-widget-outer__mode-wrapper:before{background-color:var(--color-white);content:\"\";height:40px;left:0;mask-image:linear-gradient(#0000,var(--color-black));-webkit-mask-image:linear-gradient(#0000,var(--color-black));mask-mode:alpha;position:absolute;top:0;transform:translateY(-100%);width:100%}@media (min-width:1200px){.myinterview-widget-outer__mode-wrapper{background-color:initial;flex-direction:column;justify-content:flex-start;padding:0;position:static;width:65%}.myinterview-widget-outer__mode-wrapper:after,.myinterview-widget-outer__mode-wrapper:before{display:none}}.myinterview-widget-outer__mode-button{letter-spacing:.5px;max-width:42%!important;min-width:100px!important;padding:0 15px!important;width:150px!important}.myinterview-widget-outer__mode-button--start{border:1px solid!important}.myinterview-widget-outer__mode-button--single{background-color:var(--color-special);color:var(--color-white);max-width:100%!important;width:100%!important}@media (min-width:1200px){.myinterview-widget-outer__mode-button{max-width:100%!important;min-width:150px!important;width:100%!important}.myinterview-widget-outer__mode-button:first-child{margin-bottom:20px}}.myinterview-widget-outer__practice-mode-info{margin-bottom:20px}.myinterview-widget-outer .myinterview-widget__countdown-mobile{display:none}.myinterview-widget-video-camera{border-radius:var(--myinterview-widget-recorder-border-radius);display:flex;flex:1;flex-direction:column;max-height:100%;position:relative;width:100%}@media (min-width:1200px){.myinterview-widget-video-camera{transform:translateZ(0) scale(1.005)}}.myinterview-widget-video-camera--hidden{display:none}.myinterview-widget-video-camera video{border-radius:var(--myinterview-widget-recorder-border-radius);object-fit:contain;overflow:hidden;transform:var(--myinterview-widget-camera-transform);-webkit-transform:var(--myinterview-widget-camera-transform);width:100%}.myinterview-widget-video-camera__recording-counter-wrapper{align-self:center;position:absolute;top:var(--myinterview-widget-wrapper-padding);width:70px;z-index:2}.myinterview-widget-video-camera__permissions{align-items:center;animation:fade-in .5s;background-color:#fffffff2;border-radius:var(--myinterview-widget-recorder-border-radius);color:var(--color-neutral-90);display:flex;height:100%;justify-content:center;padding:20px;position:absolute;width:100%;z-index:21}.myinterview-widget-video-camera__permissions-close{cursor:pointer;left:25px;position:absolute;top:25px;width:20px}.myinterview-widget-video-camera .myinterview-widget__microphone-indicator{align-items:center;background-color:var(--color-primary);border-radius:50%;bottom:18px;color:var(--color-white);display:flex;height:40px;isolation:isolate;justify-content:center;left:18px;padding:10px;position:absolute;width:40px}.myinterview-widget-video-camera .myinterview-widget__microphone-indicator--hidden{visibility:hidden}@media (min-width:1200px){.myinterview-widget-video-camera .myinterview-widget__microphone-indicator{bottom:25px;left:25px}}.myinterview-widget-video-camera .myinterview-widget__microphone-indicator:after{background:radial-gradient(#0000 40%,var(--color-primary) 90%);border-radius:50%;content:\"\";height:100%;position:absolute;transform:scale(var(--myinterview-widget-voice-level));transform-origin:center;width:100%;will-change:transform;z-index:-1}.myinterview-widget-video-camera .myinterview-widget__microphone-indicator svg{height:100%;width:100%}.myinterview-widget-video-camera .myinterview-widget__practice-mode{opacity:var(--myinterview-widget-practice-opacity);position:absolute;right:10px;top:10px;transition:opacity .3s}@media (min-width:1200px){.myinterview-widget-video-camera .myinterview-widget__practice-mode{opacity:1;right:25px;top:25px}}.myinterview-widget-video-camera .myinterview-widget__question-number{left:var(--myinterview-widget-wrapper-padding);top:var(--myinterview-widget-wrapper-padding);z-index:25}@media (min-width:1200px){.myinterview-widget-video-camera .myinterview-widget__question-number{letter-spacing:.5px}}.myinterview-widget-video-camera .myinterview-widget__countdown-desktop{display:none}.myinterview-widget-video-camera__watermark{height:50px;left:15px;opacity:.5;position:absolute;top:15px;width:120px}@media (min-width:1200px){.myinterview-widget-video-camera__watermark{left:25px;top:25px}}.myinterview-widget-recorder-modal{align-items:center;animation:fade-in .5s;background-color:#fffffff2;border-radius:var(--myinterview-widget-recorder-border-radius);bottom:0;color:var(--color-neutral-90);display:flex;filter:drop-shadow(0 0 0 rgba(0,0,0,.2));justify-content:center;left:0;min-height:100%;overflow:hidden;padding:var(--myinterview-widget-wrapper-padding);position:absolute;right:0;text-align:center;top:0;z-index:20}.myinterview-widget-recorder-modal__content-wrapper{align-items:center;display:flex;flex-direction:column;gap:5px;letter-spacing:.5px}@media (min-width:1200px){.myinterview-widget-recorder-modal__content-wrapper{max-width:700px}}.myinterview-widget-recorder-modal__question{max-width:100%;overflow:hidden;overflow-wrap:break-word;text-align:start}@media (min-width:1200px){.myinterview-widget-recorder-modal__question{text-align:center}.myinterview-widget-recorder-modal__question .myinterview-widget__question-duration{justify-content:center}}.myinterview-widget-checks{display:flex;flex-direction:column}.myinterview-widget-checks__item{align-items:center;display:flex;gap:20px;margin-bottom:20px}.myinterview-widget-checks__icon{align-items:center;display:flex;height:100%;justify-content:center;width:40px}.myinterview-widget-checks__text-wrapper{display:flex;flex-direction:column}.myinterview-widget-checks__retry{background-color:initial;border:0;cursor:pointer;margin-left:10px;text-decoration:underline}.myinterview-widget-preview__container{background-color:var(--color-white);display:flex;flex-direction:column;min-height:100%;padding-top:var(--myinterview-widget-wrapper-padding);position:relative;width:100%}@media (min-width:1200px){.myinterview-widget-preview__container{max-height:100%;padding:var(--myinterview-widget-wrapper-padding)}}.myinterview-widget-preview__container .myinterview-widget__question-number{margin-bottom:var(--myinterview-widget-wrapper-padding);position:relative}.myinterview-widget-preview__container .myinterview-widget-errors{animation:fade-in .3s;background-color:var(--color-white);bottom:0;left:0;padding:20px;position:absolute;right:0;text-align:center;top:0;transform:translateZ(150px);-webkit-transform:translateZ(150px);z-index:150}.myinterview-widget-preview__title{margin-bottom:30px;text-align:center}@media (min-width:1200px){.myinterview-widget-preview__title{color:var(--color-neutral-90);margin-bottom:12px}}.myinterview-widget-preview__background{animation:background-fade-in .3s ease-out;background-color:#000000e6;height:100%;isolation:isolate;left:0;position:fixed;top:0;transform:translateZ(150px);width:100%;z-index:150}@keyframes background-fade-in{0%{background-color:#0000;transform:translateZ(-2px);z-index:-2}}.myinterview-widget-preview__close{background-color:var(--color-neutral-60);border-radius:2.5rem;bottom:1vh;left:50%;padding:3px 8px;pointer-events:none;position:absolute;transform:translateX(-50%)}.myinterview-widget-preview__main{animation:fade-in .5s;display:flex;height:350px;margin:auto;overflow:hidden;position:relative;touch-action:pan-y;width:100%;z-index:1}.myinterview-widget-preview__items-wrapper{--myinterview-widget-preview-transform-x:0;--myinterview-widget-preview-item-transition:0ms;--myinterview-widget-item-width:100%;box-sizing:initial;display:flex;margin-bottom:10px;position:relative;transition-duration:0ms;transition-property:transform;width:100%;z-index:2}.myinterview-widget-preview__items-wrapper--centered{justify-content:center}.myinterview-widget-preview__item{display:flex;flex-direction:column;flex-shrink:0;height:100%;justify-content:center;padding:2%;position:relative;transition:transform var(--myinterview-widget-preview-item-transition);width:var(--myinterview-widget-item-width);z-index:1}.myinterview-widget-preview__item--current{z-index:2}.myinterview-widget-preview__item--single-take{flex:1;max-width:50%}.myinterview-widget-preview__video-wrapper{border:0 solid var(--color-primary);border-radius:var(--myinterview-widget-preview-video-border-radius);display:flex;margin:0 auto;opacity:1;overflow:hidden;position:relative;transition-delay:.29s;z-index:3}.myinterview-widget-preview__video-wrapper--mobile{aspect-ratio:var(--myinterview-widget-video-aspect-ratio);height:100%}@media (min-width:1200px){.myinterview-widget-preview__video-wrapper{border-radius:var(--myinterview-widget-preview-video-border-radius);margin:0}}.myinterview-widget-preview__video-wrapper:before{background-color:rgba(0,0,0,.267);border-radius:var(--myinterview-widget-preview-video-border-radius);content:\"\";height:100%;left:0;pointer-events:none;position:absolute;top:0;transform:translateZ(1px);transition:background-color .3s;width:100%;z-index:1}.myinterview-widget-preview__video-wrapper--current:before,.myinterview-widget-preview__video-wrapper--preview:before,.myinterview-widget-preview__video-wrapper:hover:before{background-color:#0000;pointer-events:none}.myinterview-widget-preview__video-wrapper--preview-mobile{opacity:0}.myinterview-widget-preview__video-wrapper:after{border:0 solid var(--color-primary);border-radius:var(--myinterview-widget-preview-video-border-radius);content:\"\";height:100%;pointer-events:none;position:absolute;transition:.15s;width:100%}@media (min-width:1200px){.myinterview-widget-preview__video-wrapper:after{border-radius:var(--myinterview-widget-preview-video-border-radius)}}.myinterview-widget-preview__video-wrapper--selected:before{background-color:#0000;z-index:-1}.myinterview-widget-preview__video-wrapper--selected:after{border:3px solid var(--color-primary)}.myinterview-widget-preview__video{cursor:pointer;transform:translateZ(0);-webkit-transform:translateZ(0);width:100%}.myinterview-widget-preview__dynamic-video{--myinterview-preview-video-top:50%;--myinterview-preview-video-left:50%;--myinterview-preview-video-width:0%;--myinterview-preview-video-height:0%;border-radius:var(--myinterview-widget-preview-video-border-radius);height:var(--myinterview-preview-video-height);left:var(--myinterview-preview-video-left);position:fixed;top:var(--myinterview-preview-video-top);transform:translateZ(-1px);transition:all .3s ease-out;transition-delay:.01s;visibility:hidden;width:var(--myinterview-preview-video-width);z-index:-1}.myinterview-widget-preview__dynamic-video--preview{border-radius:0;height:100%;left:0;max-height:70vh;top:46%;transform:translate3d(0,-50%,200px);visibility:visible;width:100%;z-index:200}.myinterview-widget-preview__number-wrapper{align-items:center;cursor:pointer;display:flex;gap:5px;margin:7px auto 0;position:relative;width:fit-content}@media (min-width:1200px){.myinterview-widget-preview__number-wrapper{margin:7px 0 0}}.myinterview-widget-preview__selected-check-mark{align-items:center;border:1px solid var(--color-neutral-60);border-radius:50%;display:flex;height:20px;justify-content:center;overflow:hidden;padding:1px;pointer-events:none;position:relative;width:20px}.myinterview-widget-preview__selected-check-mark svg{transform:scale(0);-webkit-transform:scale(0);transition:.15s ease-out}.myinterview-widget-preview__selected-check-mark--selected{border:1px solid var(--color-primary)}.myinterview-widget-preview__selected-check-mark--selected svg{transform:scale(1);-webkit-transform:scale(1)}.myinterview-widget-preview__dots-wrapper{align-items:center;display:flex;height:20px;justify-content:center;width:100%}.myinterview-widget-preview__dot{background-color:var(--color-neutral-20);border-radius:50%;cursor:pointer;height:10px;margin:0 7px;position:relative;transition:.3s ease-out;width:10px}.myinterview-widget-preview__dot--selected{background-color:var(--color-primary);cursor:auto;transform:scale(1.5);-webkit-transform:scale(1.5)}.myinterview-widget-preview__play-container{align-items:center;cursor:pointer;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.myinterview-widget-preview__play-button-wrapper{left:50%;top:50%;transform:translateZ(1px);transition:opacity .3s;width:60px}@media (min-width:1200px){.myinterview-widget-preview__play-button-wrapper{max-width:76px;width:25%}}.myinterview-widget-preview__horizontal-line{display:none}@media (min-width:1200px){.myinterview-widget-preview__horizontal-line{background-color:#bdbdbd;display:block;height:1px;margin:15px auto;width:50%}}.myinterview-widget-preview__preview-buttons{align-items:center;display:flex;flex-direction:column;gap:20px;margin-bottom:10px;margin-top:33px;max-width:100%}@media (min-width:1200px){.myinterview-widget-preview__preview-buttons{gap:10px;margin-top:auto}}.myinterview-widget-preview__preview-buttons-top{display:flex;gap:10px;justify-content:space-evenly;max-width:100%;width:100%}@media (min-width:1200px){.myinterview-widget-preview__preview-buttons-top{justify-content:center;width:auto}}.myinterview-widget-preview__preview-button{max-width:45%;min-width:100px;width:150px}.myinterview-widget-preview__preview-button--retake{align-items:center;border:1px solid var(--color-neutral-30);display:flex;justify-content:center;max-width:100%}.myinterview-widget-preview__preview-button--start-interview{background-color:initial;color:var(--color-primary);font-size:13px;max-height:30px;max-width:max-content;padding:0;width:max-content}@media (min-width:1200px){.myinterview-widget-preview__preview-button{flex:1;max-height:42px;min-width:150px}}.myinterview-widget-preview__retakes-wrapper{max-width:45%;min-width:100px;text-align:center;width:150px}@media (min-width:1200px){.myinterview-widget-preview__retakes-wrapper{max-height:42px;min-width:150px}}.myinterview-widget-preview__retakes-left{color:var(--color-neutral-60)}.myinterview-widget-preview__arrow{align-items:center;animation:fade-in .3s;display:flex;height:100%;justify-content:center;min-width:40px;position:absolute;right:0;z-index:5}@media (min-width:1200px){.myinterview-widget-preview__arrow{min-width:4%}.myinterview-widget-preview__arrow:before{background-color:#fff;content:\"\";height:100%;left:0;mask-image:linear-gradient(to right,#0000,var(--color-black));-webkit-mask-image:linear-gradient(to right,#0000,var(--color-black));position:absolute;transform:translateX(5px);width:100%}}.myinterview-widget-preview__arrow--prev{left:0;right:auto;transform:translateZ(5px) rotateY(180deg)}@media (min-width:1200px){.myinterview-widget-preview__arrow--prev{transform:translateZ(5px) rotateY(180deg)}}.myinterview-widget-preview__arrow-icon-wrapper{align-items:center;background-color:var(--color-white);border:1px solid var(--color-neutral-30);border-radius:50%;color:var(--color-neutral-90);cursor:pointer;display:flex;height:36px;justify-content:center;position:relative;transform:translateY(-11px);width:36px}@media (min-width:1200px){.myinterview-widget-preview__arrow-icon-wrapper{box-shadow:0 4px 30px #00000026}}.myinterview-widget-video-question{aspect-ratio:16/9;background-color:var(--color-black);border-radius:var(--myinterview-widget-recorder-border-radius);height:fit-content;isolation:isolate;margin:auto;overflow:hidden;position:relative;width:100%;z-index:1}@media (min-width:1200px){.myinterview-widget-video-question{height:100%}}.myinterview-widget-video-question--hidden{position:absolute;visibility:hidden;z-index:-1}.myinterview-widget-video-question--loading{background-color:hsla(0,0%,100%,.467)}.myinterview-widget-video-question--loading:before{animation:slide 1.5s infinite;background:linear-gradient(to right,#0000,var(--color-neutral-10),#0000);content:\"\";height:100%;left:-100%;position:absolute;top:0;width:100%;z-index:-1}@media (min-width:1200px){.myinterview-widget-video-question--loading{background-color:#ccd7f5}}.myinterview-widget-video-question:after{content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.myinterview-widget-video-question--done:after{background-color:var(--color-black)}.myinterview-widget-video-question__play-button-wrapper{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transition:transform .2s ease-out,opacity .3s ease-out;width:clamp(50px,15vw,76px);z-index:1}.myinterview-widget-video-question__play-button-wrapper--hidden{opacity:0;pointer-events:none;touch-action:none;transform:translate(-50%,-50%) scale(1.3);-webkit-transform:translate(-50%,-50%) scale(1.3)}.myinterview-widget-video-question__controls{align-items:center;bottom:0;display:flex;justify-content:center;left:0;margin:10px 12px;position:absolute;right:0;transition:opacity .2s,transform .2s;z-index:1}.myinterview-widget-video-question__controls--inactive{opacity:0;pointer-events:none;touch-action:none;transform:translateY(25%)}.myinterview-widget-video-question__controls>:not(:last-child){margin-right:15px}.myinterview-widget-video-question__controls .myinterview-widget-video-question__control-play-button{min-width:40px;width:50px}.myinterview-widget-video-question__controls .myinterview-widget-video-question__control-play-button .myinterview-widget-icons svg{color:var(--color-white)}.myinterview-widget-video-question__timebar-counter-wrapper{width:100%}.myinterview-widget-video-question__counter-wrapper{-webkit-text-stroke-width:.5px;-webkit-text-stroke-color:var(--color-neutral-90);color:var(--color-white);font-size:13px;font-weight:700}.myinterview-widget-video-question__time-bar{background-color:hsla(0,0%,100%,.467);border-radius:2.5rem;cursor:pointer;height:10px;margin-bottom:5px;position:relative;width:100%}.myinterview-widget-video-question__time-bar--disabled{cursor:auto;pointer-events:none}.myinterview-widget-video-question__time-bar:before{content:\"\";height:30px;left:0;position:absolute;top:0;transform:translateY(-30%);width:100%}@media (min-width:1200px){.myinterview-widget-video-question__time-bar:before{display:none}}.myinterview-widget-video-question__time-bar-progress{background-color:var(--color-primary);border-radius:2.5rem;height:100%;position:absolute;transition:width .25s linear}.myinterview-widget-video-question__time-bar-progress:after{background-color:var(--color-primary);border-radius:50%;content:\"\";height:15px;left:100%;pointer-events:none;position:absolute;top:50%;touch-action:none;transform:translate(-50%,-50%);width:15px}.myinterview-widget-video-question__time-bar-progress--changing{transition:none}.myinterview-widget-video-question__time-bar-progress--unchangeable{cursor:auto}.myinterview-widget-video-question__time-bar-progress--unchangeable:after{display:none}.myinterview-widget-video-question__retry-button{margin-top:20px;width:100%;z-index:2}.myinterview-widget-video-question__retry-button--hidden{position:absolute;visibility:hidden;z-index:-1}@media (min-width:1200px){.myinterview-widget-video-question__retry-button{bottom:70px;left:50%;margin:0 auto;position:absolute;transform:translateX(-50%);width:fit-content}}@keyframes slide{50%{opacity:.9}to{left:100%;opacity:1}}.myinterview-widget-device{align-items:center;background-color:var(--color-white);border-radius:50%;color:var(--color-neutral-90);display:flex;height:40px;justify-content:center;position:absolute;right:18px;width:40px}.myinterview-widget-device__mobile{bottom:18px}.myinterview-widget-device__desktop{right:18px;top:18px;z-index:30}@media (min-width:1200px){.myinterview-widget-device__desktop{right:25px;top:25px}}.myinterview-widget-device__menu-button{align-items:center;background-color:initial;border:none;border-radius:50%;cursor:pointer;display:flex;height:100%;justify-content:center;width:100%}.myinterview-widget-device__modal{--myinterview-widget-select-device-height:48px;background-color:var(--color-white);border-radius:20px;bottom:-15px;box-shadow:0 2px 12px -4px #0000001a;max-width:400px;min-width:300px;position:absolute;right:-12px;transform:translateY(100%)}.myinterview-widget-device__modal:before{background-color:var(--color-white);border-radius:5px;content:\"\";height:20px;position:absolute;right:22px;top:-8px;transform:rotate(45deg);width:20px}.myinterview-widget-device__select-wrapper{display:flex;flex-direction:column;overflow:hidden;padding:20px}.myinterview-widget-device__select-group{display:flex;flex-direction:column}.myinterview-widget-device__select-group:not(:last-child):after{background-color:var(--color-neutral-20);content:\"\";height:1px;margin:10px 0;width:100%}.myinterview-widget-device__selected-device{cursor:pointer;display:flex;height:var(--myinterview-widget-select-device-height);width:100%}.myinterview-widget-device__select-icon{align-items:center;display:flex;min-width:40px}.myinterview-widget-device__select-icon svg{height:20px;width:20px}.myinterview-widget-device__selected-title-wrapper{flex:1;overflow:hidden;padding-right:23px}.myinterview-widget-device__selected-title{line-height:var(--myinterview-widget-select-device-height)!important;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.myinterview-widget-device__arrow{align-items:center;display:flex;margin-left:auto;transform:rotate(0);transition:.2s}.myinterview-widget-device__arrow--open{transform:rotate(-180deg)}.myinterview-widget-device__select-list{display:flex;flex-direction:column;max-height:0;overflow:hidden;transition:max-height .2s ease-out}.myinterview-widget-device__select-list--open{max-height:calc(var(--myinterview-widget-select-device-height)*2);overflow:auto;transition:max-height .2s ease-in}.myinterview-widget-device__select-option{border-radius:4px;cursor:pointer;line-height:var(--myinterview-widget-select-device-height)!important;min-height:var(--myinterview-widget-select-device-height);overflow:hidden;padding:0 40px;text-overflow:ellipsis;white-space:nowrap}.myinterview-widget-device__select-option--selected,.myinterview-widget-device__select-option:hover{color:var(--color-primary)!important}.myinterview-widget-device__select-option--selected{background-color:rgba(90,164,245,.051)!important}.myinterview-widget__countdown-mobile{align-items:center;background-color:var(--color-white);border-radius:2.5rem;display:flex;height:25px;left:50%;padding:6px 10px;position:absolute;top:var(--myinterview-widget-wrapper-padding);transform:translateX(-50%);z-index:30}.myinterview-widget__countdown-mobile--red{color:var(--color-error)}@media (min-width:1200px){.myinterview-widget__countdown-mobile[hidden]{display:none}}.myinterview-widget__countdown-desktop{display:none}@media (min-width:1200px){.myinterview-widget__countdown-desktop{--myinterview-widget-p:100;--myinterview-widget-b:5px;--myinterview-widget-w:160px;align-items:center;display:flex;height:var(--myinterview-widget-w);justify-content:center;margin:auto;padding:0;position:relative;transform:rotateY(180deg);width:var(--myinterview-widget-w)}.myinterview-widget__countdown-desktop:after,.myinterview-widget__countdown-desktop:before{border-radius:50%;content:\"\";position:absolute}.myinterview-widget__countdown-desktop:before{background:radial-gradient(farthest-side,var(--color-primary) 100%,#0000) top/var(--myinterview-widget-b) var(--myinterview-widget-b) no-repeat,conic-gradient(var(--color-primary) calc((var(--myinterview-widget-p))*1%),#0000 0);inset:0;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - var(--myinterview-widget-b)),#000 calc(100% - var(--myinterview-widget-b)));mask:radial-gradient(farthest-side,#0000 calc(100% - var(--myinterview-widget-b)),#000 calc(100% - var(--myinterview-widget-b)));transition:all 1s}.myinterview-widget__countdown-desktop:after{background:var(--color-primary);inset:calc(50% - var(--myinterview-widget-b)/2);transform:rotate(calc(var(--myinterview-widget-p)*3.6deg)) translateY(calc(50% - var(--myinterview-widget-w)/2))}.myinterview-widget__countdown-desktop[hidden]{display:none}}.myinterview-widget__countdown-desktop .myinterview-widget__countdown-desktop-text{align-items:center;border:var(--myinterview-widget-b) solid #edf6fe;border-radius:50%;display:flex;height:100%;justify-content:center;position:absolute;transform:rotateY(180deg);width:100%;z-index:-1}.myinterview-widget-counter{align-items:center;background-color:var(--color-white);border-radius:2.5rem;color:var(--color-neutral-90);display:flex;gap:5px;height:25px;justify-content:center}.myinterview-widget-counter__dot{background-color:var(--color-error);border-radius:50%;height:10px;width:10px}.myinterview-widget-counter__clock{display:flex}.myinterview-widget-counter__timer{transition:color .25s}.myinterview-widget-counter__timer--red{color:#f45b2b}.myinterview-widget-loader{-webkit-animation:fade 1.6s infinite;-moz-animation:fade 1.6s infinite;-o-animation:fade 1.6s infinite;animation:fade 1.6s infinite;margin:auto;width:80px}@keyframes fade{0%,to{opacity:0}50%{opacity:1}}@-o-keyframes fade{0%,to{opacity:0}50%{opacity:1}}@-moz-keyframes fade{0%,to{opacity:0}50%{opacity:1}}@-webkit-keyframes fade{0%,to{opacity:0}50%{opacity:1}}.myinterview-widget-error{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;margin:auto}.myinterview-widget-error__message{margin-bottom:10px}.myinterview-widget-errors{align-items:center;display:flex;flex-direction:column;justify-content:center}.myinterview-widget-errors__icon{margin-bottom:15px}.myinterview-widget-errors__details,.myinterview-widget-errors__title{margin-bottom:5px}.myinterview-widget-errors__cta{cursor:pointer;margin-bottom:5px;position:relative;text-decoration:underline}.myinterview-widget-errors__cta .myinterview-widget-select-native{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.myinterview-widget-errors__cta--secondary{text-transform:capitalize}.myinterview-widget-slider-modal{animation:close-modal .3s forwards;bottom:0;height:100vh;height:-moz-available;height:-webkit-fill-available;height:stretch;left:0;min-height:100vh;min-height:-moz-available;min-height:-webkit-fill-available;min-height:stretch;overflow:hidden;position:fixed;width:100vw;z-index:50}.myinterview-widget-slider-modal__wrapper{-webkit-overflow-scrolling:touch;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;width:100%}.myinterview-widget-slider-modal__top{min-height:100%;scroll-snap-align:start;touch-action:none}.myinterview-widget-slider-modal__bottom{background-color:var(--color-white);border-radius:20px 20px 0 0;display:flex;flex-direction:column;height:10%;isolation:isolate;min-height:10%;overflow:hidden;position:relative;scroll-snap-align:end;transition:min-height .5s,height .5s;visibility:hidden}.myinterview-widget-slider-modal__pill{background-color:var(--color-neutral-30);border-radius:2.5rem;margin:20px auto 32px;min-height:4px;width:60px}.myinterview-widget-slider-modal--open{animation:none;background-color:#0009;visibility:visible}.myinterview-widget-slider-modal--open .myinterview-widget-slider-modal__bottom{height:80%;min-height:80%;visibility:visible}@keyframes close-modal{0%{background-color:#0009}to{background-color:#0000;visibility:hidden}}.myinterview-widget-permissions__wrapper{display:flex;flex:1;flex-direction:column;margin:0 auto;max-height:100%;max-width:480px;overflow:auto;padding:0 20px 20px;width:100%}@media (min-width:1200px){.myinterview-widget-permissions__wrapper{padding:0 20px}}.myinterview-widget-permissions__icon-wrapper{align-items:center;background-color:#eff6fe;border-radius:50%;color:var(--color-primary);display:flex;justify-content:center;margin:0 auto 20px;min-height:70px;min-width:70px}.myinterview-widget-permissions__icon-wrapper svg{height:32px;width:32px}@media (min-width:1200px){.myinterview-widget-permissions__icon-wrapper{display:none!important}}.myinterview-widget-permissions__title{margin-bottom:20px;text-align:center}@media (min-width:1200px){.myinterview-widget-permissions__title{margin-bottom:15px}}.myinterview-widget-permissions__sub-title{margin-bottom:10px}.myinterview-widget-permissions__steps-wrapper{margin-bottom:15px;padding:0 20px}.myinterview-widget-permissions__step{font-size:14px;list-style:decimal;margin-bottom:10px}.myinterview-widget-permissions__step .text--bold{font-weight:700}.myinterview-widget-permissions__step .safari__key{background-color:var(--color-neutral-20);border-radius:2px;padding:2px 4px}.myinterview-widget-permissions__button{margin-top:auto;min-height:45px}.myinterview-widget-question{margin-bottom:10px;position:relative}.myinterview-widget-question>*{position:relative;z-index:1}.myinterview-widget-question__question{letter-spacing:.5px;margin-bottom:6px}.myinterview-widget-question__description{letter-spacing:.5px}.myinterview-widget-question__question-parameters{align-items:center;display:inline-flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}.myinterview-widget-question__question-parameters>*{white-space:nowrap}.myinterview-widget-questions-list{display:none}@media (min-width:1200px){.myinterview-widget-questions-list{display:flex;flex-direction:column;overflow-y:auto;padding:0;position:relative}.myinterview-widget-questions-item{align-items:center;border-radius:0 4px 4px 0;display:flex;gap:20px;letter-spacing:.5px;max-width:100%;min-height:90px;overflow:hidden;padding:20px;position:relative}.myinterview-widget-questions-item__number{align-items:center;background-color:var(--color-neutral-20);border-radius:50%;color:var(--color-neutral-90);display:flex;height:38px;justify-content:center;min-width:38px}.myinterview-widget-questions-item__number--icon{background-color:var(--color-white);color:var(--color-primary)}.myinterview-widget-questions-item__wrapper{flex:1;overflow:hidden}.myinterview-widget-questions-item__question{display:flex;flex-direction:column;gap:2px;overflow:hidden}.myinterview-widget-questions-item__duration-wrapper{align-items:center;color:var(--color-neutral-50);display:flex;font-size:12px;gap:5px;line-height:20px}.myinterview-widget-questions-item__duration-wrapper *{font-size:12px;line-height:20px}.myinterview-widget-questions-item__duration-wrapper svg{width:15px}.myinterview-widget-questions-item--active{background-color:#f7fbff}.myinterview-widget-questions-item--active:before{background-color:var(--color-primary);content:\"\";height:100%;left:0;position:absolute;width:3px}.myinterview-widget-questions-item--active .myinterview-widget-questions-item__number{background-color:var(--color-white);border:1px solid var(--color-primary);color:var(--color-primary)}}.myinterview-widget-upload{align-items:center;background-color:var(--color-white);border-radius:20px;display:flex;flex-direction:column;height:100%;justify-content:center;margin:auto;max-height:500px;overflow:hidden;padding:40px;text-align:center;width:100%}@media (min-width:1200px){.myinterview-widget-upload{margin:0;min-height:360px}}.myinterview-widget-upload__icon{align-items:center;background-color:#5aa4f5;border:12px solid #d7e8fb;border-radius:50%;color:var(--color-white);display:flex;height:110px;justify-content:center;margin-bottom:30px;min-height:110px;position:relative;width:110px}.myinterview-widget-upload__icon:before{background-color:initial;border:12px solid #99c6f8;border-radius:50%;content:\"\";height:100%;position:absolute;width:100%}.myinterview-widget-upload__title{margin-bottom:20px}.myinterview-widget-upload__sub-title{margin-bottom:40px;white-space:pre-line}.myinterview-widget-upload__progress{margin-bottom:10px;width:100%}.myinterview-widget-upload__time-left{align-items:center;color:var(--color-neutral-90);display:flex;gap:10px}.myinterview-widget-top-tips{background-color:var(--color-white);color:var(--color-neutral-90);display:flex;flex-direction:column;padding:50px}.myinterview-widget-top-tips__title{margin-bottom:20px}.myinterview-widget-top-tips__tips{margin-bottom:10px;padding:0 15px}.myinterview-widget-top-tips li{margin-bottom:10px}.myinterview-widget__practice-mode{border-radius:2.5rem;height:36px;padding:5px 15px}.myinterview-widget__practice-mode,.myinterview-widget__recording-button{align-items:center;background-color:var(--color-white);display:flex;justify-content:center}.myinterview-widget__recording-button{border:1px solid var(--color-neutral-30);border-radius:50%;height:64px;width:64px}.myinterview-widget__recording-button-inner{background-color:var(--color-error);border-radius:50%;height:52px;width:52px}.myinterview-widget__recording-button-inner--stop{border-radius:2px;height:16px;width:16px}.myinterview-widget__question-number{display:flex;gap:5px;position:absolute}@media (min-width:1200px){.myinterview-widget__question-number{margin-left:10px}}.myinterview-widget__question-number-track{direction:ltr;display:flex;gap:5px}.myinterview-widget__question-duration{align-items:center;display:flex;gap:8px}.myinterview-widget__question-duration svg{height:1em;width:1em}.myinterview-widget__progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:2.5rem;height:15px;overflow:hidden;width:100%}.myinterview-widget__progress::-webkit-progress-bar{background-color:#e7f1ef}.myinterview-widget__progress::-webkit-progress-value{background-color:var(--color-success);transition:.3s}.myinterview-widget__dot-separator{background-color:currentColor;border-radius:50%;height:3px;width:3px}.myinterview-widget-welcome-page{display:flex;flex-direction:column;gap:20px;height:100%;margin:30px 0;max-height:100%;overflow:auto;position:relative}@media (min-width:1200px){.myinterview-widget-welcome-page{padding:0 20px}}.myinterview-widget-welcome-page__text-wrapper{display:flex;flex-direction:column;position:relative}.myinterview-widget-welcome-page__text{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.myinterview-widget-welcome-page__text--closed{-webkit-line-clamp:4;line-clamp:4}.myinterview-widget-welcome-page__toggle{margin-left:auto}.myinterview-widget-welcome-page__action-buttons{display:flex;gap:20px;justify-content:space-between}.myinterview-widget-welcome-page__continue-button{flex:1;max-width:250px;min-width:fit-content}.myinterview-widget-welcome-page__top-tips-button{margin:0 auto}.myinterview-widget-welcome-page__top-tips{align-items:center;display:flex;gap:10px;justify-content:center}.myinterview-modal-wrapper{background-color:var(--color-white);border-radius:0;height:100vh;max-height:100%;max-width:500px;opacity:0;pointer-events:none;top:calc(50% + 40px);transition:top .2s ease-out,opacity .2s ease-out;width:100vw}@media (min-width:480px){.myinterview-modal-wrapper{border-radius:10px;height:auto}}.myinterview-modal-wrapper--opened{opacity:1;pointer-events:all;top:50%}.myinterview-modal-wrapper__close-btn{color:var(--color-neutral-90)}.myinterview-widget-assessment{--myinterview-widget-assessment-spacing:20px;background-color:var(--color-white);display:flex;flex:1;flex-direction:column;justify-content:space-between;overflow:auto;padding:var(--myinterview-widget-wrapper-padding)}@media (min-width:1200px){.myinterview-widget-assessment{--myinterview-widget-assessment-spacing:7px;align-items:center}.myinterview-widget-assessment .myinterview-widget-question{display:none}}.myinterview-widget-assessment .myinterview-widget__question-number{align-self:flex-start;margin-bottom:var(--myinterview-widget-assessment-spacing);position:relative}.myinterview-widget-assessment__countdown-wrapper{display:flex;height:100%;justify-content:center;left:0;padding:var(--myinterview-widget-wrapper-padding);pointer-events:none;position:absolute;top:0;width:100%}.myinterview-widget-assessment__countdown-wrapper .myinterview-widget__countdown-mobile{background-color:var(--color-neutral-10);position:sticky;top:0}.myinterview-widget-assessment__instructions{margin-bottom:var(--myinterview-widget-assessment-spacing);z-index:1}@media (min-width:1200px){.myinterview-widget-assessment__instructions{text-align:center}}.myinterview-widget-assessment__free-text,.myinterview-widget-assessment__multi-select,.myinterview-widget-assessment__single-select{align-items:center;display:flex;flex:1;flex-direction:column;margin-bottom:var(--myinterview-widget-assessment-spacing);position:relative;width:100%;z-index:1}@media (min-width:1200px){.myinterview-widget-assessment__free-text,.myinterview-widget-assessment__multi-select,.myinterview-widget-assessment__single-select{width:550px}}.myinterview-widget-assessment__input{border:.5px solid var(--color-neutral-40);border-radius:4px;flex:1;min-height:100px;padding:15px 15px 30px;resize:none;width:100%}.myinterview-widget-assessment__input::placeholder{color:var(--color-neutral-40)}.myinterview-widget-assessment__options-form{display:flex;flex-direction:column;width:100%}@media (min-width:1200px){.myinterview-widget-assessment__options-form{margin:auto 0}}.myinterview-widget-assessment__option{align-items:center;cursor:pointer;display:flex;gap:var(--myinterview-widget-assessment-spacing);padding:var(--myinterview-widget-assessment-spacing) 0;position:relative}.myinterview-widget-assessment__option:before{background-color:var(--color-white);border-radius:5px;content:\"\";height:100%;left:0;opacity:.1;pointer-events:none;position:absolute;top:0;transition:background-color .1s;width:100%;z-index:-1}.myinterview-widget-assessment__option:active:before{background-color:var(--color-primary)}.myinterview-widget-assessment__option:not(:last-child){border-bottom:1px solid var(--color-neutral-20)}.myinterview-widget-assessment__checkmark{align-items:center;border:1px solid var(--color-neutral-60);border-radius:50%;display:flex;flex-shrink:0;height:16px;justify-content:center;overflow:hidden;padding:1px;pointer-events:none;position:relative;width:16px}.myinterview-widget-assessment__checkmark svg{transform:scale(0);-webkit-transform:scale(0);transition:.15s ease-out}.myinterview-widget-assessment__checkmark--selected{border:1px solid var(--color-primary)}.myinterview-widget-assessment__checkmark--selected svg{transform:scale(1);-webkit-transform:scale(1)}.myinterview-widget-assessment .myinterview-widget__characters-limit{bottom:10px;position:absolute;right:15px}.myinterview-widget-assessment__submit-button{min-height:45px;width:100%}@media (min-width:1200px){.myinterview-widget-assessment__submit-button{width:auto}}";
|
|
48554
|
+
var css_248z = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap\");:host,:root,html[data-theme=light]{--color-primary:#5aa4f5;--color-secondary:#5ed0bc;--color-premium:#fac918;--color-special:#6690ff;--color-neutral-10:#f2f2f2;--color-neutral-20:#e6e6e6;--color-neutral-30:#ccc;--color-neutral-40:#aaa;--color-neutral-50:#8d8d8d;--color-neutral-60:#777;--color-neutral-70:#444;--color-neutral-90:#404852;--color-white:#fff;--color-black:#000;--color-success:#5ed0bc;--color-warning:#fac918;--color-error:#f25f5b;--color-info:#404852;--color-malibu:linear-gradient(50.24deg,#135 -146.43%,#557ede -0.68%,#6690ff 75.97%)}html[data-theme=dark]{--color-primary:#5aa4f5;--color-secondary:#5ed0bc;--color-premium:#fac918;--color-special:#6690ff;--color-neutral-10:#f2f2f2;--color-neutral-20:#e6e6e6;--color-neutral-30:#ccc;--color-neutral-40:#aaa;--color-neutral-50:#8d8d8d;--color-neutral-60:#777;--color-neutral-70:#444;--color-neutral-90:#404852;--color-white:#222;--color-black:#ddd;--color-success:#5ed0bc;--color-warning:#fac918;--color-error:#f25f5b;--color-info:#404852;--color-malibu:linear-gradient(135deg,#51beff,#6690ff)}.color--primary{color:var(--color-primary)}.background-color--primary{background-color:var(--color-primary)}.border-color--primary{border-color:var(--color-primary)}.color--secondary{color:var(--color-secondary)}.background-color--secondary{background-color:var(--color-secondary)}.border-color--secondary{border-color:var(--color-secondary)}.color--premium{color:var(--color-premium)}.background-color--premium{background-color:var(--color-premium)}.border-color--premium{border-color:var(--color-premium)}.color--special{color:var(--color-special)}.background-color--special{background-color:var(--color-special)}.border-color--special{border-color:var(--color-special)}.color--neutral-10{color:var(--color-neutral-10)}.background-color--neutral-10{background-color:var(--color-neutral-10)}.border-color--neutral-10{border-color:var(--color-neutral-10)}.color--neutral-20{color:var(--color-neutral-20)}.background-color--neutral-20{background-color:var(--color-neutral-20)}.border-color--neutral-20{border-color:var(--color-neutral-20)}.color--neutral-30{color:var(--color-neutral-30)}.background-color--neutral-30{background-color:var(--color-neutral-30)}.border-color--neutral-30{border-color:var(--color-neutral-30)}.color--neutral-40{color:var(--color-neutral-40)}.background-color--neutral-40{background-color:var(--color-neutral-40)}.border-color--neutral-40{border-color:var(--color-neutral-40)}.color--neutral-50{color:var(--color-neutral-50)}.background-color--neutral-50{background-color:var(--color-neutral-50)}.border-color--neutral-50{border-color:var(--color-neutral-50)}.color--neutral-60{color:var(--color-neutral-60)}.background-color--neutral-60{background-color:var(--color-neutral-60)}.border-color--neutral-60{border-color:var(--color-neutral-60)}.color--neutral-70{color:var(--color-neutral-70)}.background-color--neutral-70{background-color:var(--color-neutral-70)}.border-color--neutral-70{border-color:var(--color-neutral-70)}.color--neutral-90{color:var(--color-neutral-90)}.background-color--neutral-90{background-color:var(--color-neutral-90)}.border-color--neutral-90{border-color:var(--color-neutral-90)}.color--white{color:var(--color-white)}.background-color--white{background-color:var(--color-white)}.border-color--white{border-color:var(--color-white)}.color--black{color:var(--color-black)}.background-color--black{background-color:var(--color-black)}.border-color--black{border-color:var(--color-black)}.color--success{color:var(--color-success)}.background-color--success{background-color:var(--color-success)}.border-color--success{border-color:var(--color-success)}.color--warning{color:var(--color-warning)}.background-color--warning{background-color:var(--color-warning)}.border-color--warning{border-color:var(--color-warning)}.color--error{color:var(--color-error)}.background-color--error{background-color:var(--color-error)}.border-color--error{border-color:var(--color-error)}.color--info{color:var(--color-info)}.background-color--info{background-color:var(--color-info)}.border-color--info{border-color:var(--color-info)}.background-color--malibu{background:var(--color-malibu)}*{box-sizing:border-box;font-family:Nunito Sans,sans-serif;margin:0;outline:none;padding:0}body{background-color:var(--color-white)}@keyframes react-loading-skeleton{to{transform:translateX(100%)}}.react-loading-skeleton{--base-color:#ebebeb;--highlight-color:#f5f5f5;--animation-duration:1.5s;--animation-direction:normal;--pseudo-element-display:block;background-color:var(--base-color);border-radius:.25rem;display:inline-flex;line-height:1;overflow:hidden;position:relative;width:100%;z-index:1}.react-loading-skeleton:after{animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-iteration-count:infinite;animation-name:react-loading-skeleton;animation-timing-function:ease-in-out;background-image:linear-gradient(90deg,var(--base-color),var(--highlight-color),var(--base-color));background-repeat:no-repeat;content:\" \";display:var(--pseudo-element-display);height:100%;left:0;position:absolute;right:0;top:0;transform:translateX(-100%)}.myinterview-button{border:none;border-radius:10px;cursor:pointer;font-weight:700;height:45px;letter-spacing:1px}.myinterview-button:disabled{cursor:unset;opacity:.6;pointer-events:none}.myinterview-button--small{font-size:10px;height:35px;min-width:100px;padding:0 20px}.myinterview-button--medium{font-size:12px;height:45px;min-width:150px;padding:0 30px}.myinterview-button--large{font-size:16px;height:65px;min-width:180px;padding:0 45px}.dropdown{align-items:center;cursor:pointer;display:flex;font-size:14px;justify-content:space-between;padding:15px;white-space:nowrap}.dropdown--rtl{direction:rtl}.dropdown--rtl .dropdown__input{padding-left:30px;padding-right:15px}.dropdown--rtl .dropdown__arrow-wrapper,.dropdown--rtl .dropdown__clear-wrapper{margin-left:0;margin-right:5px}.dropdown--rtl .dropdown__item span{margin-left:5px;margin-right:0}.dropdown--rtl.dropdown--with-icon{padding-left:15px;padding-right:10px}.dropdown--rtl.dropdown--with-icon .dropdown__selected-item,.dropdown--rtl.dropdown--with-icon .dropdown__selected-item--placeholder{padding-left:0;padding-right:8px}.dropdown--standalone{border:.5px solid var(--color-neutral-30);border-radius:10px;border-width:.5px!important;height:50px;position:relative}.dropdown--with-icon{padding-left:10px}.dropdown--with-icon svg{height:22px}.dropdown--with-icon .dropdown__selected-item,.dropdown--with-icon .dropdown__selected-item--placeholder{padding-left:8px}.dropdown--opened{border-radius:10px 10px 0 0;box-shadow:0 0 10px -2px #0000001a}.dropdown--opened .dropdown__options{box-shadow:0 0 10px -2px #0000001a;visibility:visible}.dropdown--opened .dropdown__arrow-wrapper{transform:rotate(-180deg)}.dropdown--upside.dropdown--opened{border-radius:0 0 4px 4px;border-top:0}.dropdown--upside .dropdown__options{border-bottom:0;border-radius:10px 10px 0 0;border-top:.5px solid var(--color-neutral-30);bottom:auto;top:0;transform:translateY(-100%)}.dropdown__selected-item{flex:1;overflow:hidden;text-overflow:ellipsis}.dropdown__selected-item::selection{background-color:initial}.dropdown__selected-item--placeholder{opacity:.5}.dropdown__input{border:0;border-radius:10px;height:100%;left:0;opacity:0;padding:15px 30px 15px 15px;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}.dropdown__input--searchable:focus{opacity:1}.dropdown__input--searchable:focus+.dropdown__selected-item{opacity:0!important}.dropdown__arrow-wrapper,.dropdown__clear-wrapper{align-items:center;display:flex;flex-shrink:0;justify-content:center;margin-left:5px;transition:.2s;width:1em}.dropdown__options{background-color:var(--color-white);border:.5px solid var(--color-neutral-30);border-radius:0 0 4px 4px;border-top:0;bottom:0;left:-.75px;list-style:none;margin:0;max-height:0;overflow:auto;padding:0;position:absolute;transform:translateY(100%);visibility:hidden;width:calc(100% + 1.25px)}.dropdown__item{cursor:pointer;max-width:100%;overflow:hidden;padding:15px;text-overflow:ellipsis}.dropdown__item:not(:last-child){border-bottom:.5px solid var(--color-neutral-30)}.dropdown__item--highlighted,.dropdown__item:hover{background-color:var(--color-primary);color:var(--color-white)}.dropdown__item span{margin-right:5px}.tag{background-color:#dde8f6;border-radius:3px;color:#4a90e2;display:inline-block;font-size:13px;font-weight:500;letter-spacing:.5px;margin:5px 8px 5px 0;padding:4px 11px;text-transform:capitalize}.myinterview-text--XS{font-size:12px;line-height:20px}.myinterview-text--S{font-size:14px;line-height:22px}.myinterview-text--M{font-size:16px;line-height:24px}.myinterview-text--L{font-size:18px;line-height:26px}.myinterview-text--H3{font-size:20px;line-height:28px}.myinterview-text--H2{font-size:24px;line-height:32px}.myinterview-text--H1{font-size:30px;line-height:38px}.myinterview-text--D3{font-size:38px;line-height:46px}.myinterview-text--D2{font-size:48px;line-height:54px}.myinterview-text--D1{font-size:56px;line-height:64px}.myinterview-text--regular{font-weight:400}.myinterview-text--semibold{font-weight:600}.myinterview-text--bold{font-weight:700}.myinterview-text--italic{font-style:italic}.myinterview-text--truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toggle-switch{align-items:center;border-radius:99999px;cursor:pointer;display:flex;position:relative;transition:.2s}.toggle-switch__indicator{border-radius:50%;height:.65em;left:10%;position:absolute;transition:.2s;width:.65em}.toggle-switch__indicator--active{left:90%;transform:translateX(-100%)}.toggle-switch:active .toggle-switch__indicator{height:.5em;width:.5em}.toggle-text{align-items:center;cursor:pointer;display:flex;justify-content:center;width:fit-content}.toggle-text__arrow-wrapepr{align-items:center;display:flex;margin-left:5px;transition:.25s ease-in-out;width:1em}.toggle-text__arrow-wrapepr--opened{transform:rotate(-180deg)}.progress{align-items:center;border-radius:50%;display:flex;height:1em;justify-content:center;width:1em}.progress__fill{border-radius:50%;height:.7em;width:.7em}.input-text{display:flex;flex-direction:column;flex-grow:1}.input-text__field{border:.5px solid var(--color-neutral-30);border-radius:10px;font-size:14px;padding:14px 16px;width:100%}.input-text__field--with-icon{padding:14px 43px!important}.input-text__icon-container{margin:10px 12px;position:absolute}.input-text__icon-container i{vertical-align:-webkit-baseline-middle}.input-text__icon-container i svg{height:22px;width:22px}.input-text--error{border:1px solid var(--color-error)}.input-text__error-msg{color:var(--color-error);margin-top:3px}.dnd-wrapper{border:1px solid var(--color-neutral-30);border-radius:10px;height:50px;max-width:500px;padding:7px 10px;position:relative;transition:.3s ease-in-out;width:100%}.dnd-wrapper--rtl{direction:rtl}.dnd-wrapper--rtl .dnd-wrapper__placeholder{margin-left:0;margin-right:5px}.dnd-wrapper--rtl .dnd-wrapper__label .progress{margin-left:5px;margin-right:0}.dnd-wrapper--rtl .dnd-wrapper__text{margin-left:0;margin-right:5px}.dnd-wrapper--rtl .dnd-wrapper__icon--close{margin-left:0;margin-right:auto}.dnd-wrapper__placeholder{color:var(--color-neutral-50);font-size:14px;margin-left:5px}.dnd-wrapper__left-hand{align-items:flex-end;display:flex}.dnd-wrapper--scale{transform:scale(1.1)}.dnd-wrapper--border-solid{border:.5px solid var(--color-neutral-30)}.dnd-wrapper__label{align-items:center;display:flex;font-size:14px;height:100%;justify-content:center}.dnd-wrapper__label svg{height:16px;vertical-align:middle;width:16px}.dnd-wrapper__label--with-icon{justify-content:space-between}.dnd-wrapper__label--with-icon i{color:var(--color-neutral-60)}.dnd-wrapper__label--uploaded,.dnd-wrapper__label--uploading{justify-content:flex-start}.dnd-wrapper__label .progress{height:18px;margin-right:5px;width:18px}.dnd-wrapper__icon{align-items:center;display:flex}.dnd-wrapper__icon--clip{font-size:18px;transform:rotate(10deg) rotateX(180deg)}.dnd-wrapper__icon--close{cursor:pointer;margin-left:auto;z-index:10}.dnd-wrapper__text{margin-left:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dnd-wrapper__input{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:1}.dnd-wrapper__input:disabled{cursor:auto}.myinterview-modal-wrapper{border-radius:4px;box-shadow:0 4px 6px -1px #00000014,0 2px 4px -1px #0000000f;left:50%;max-height:90vh;max-width:90vw;overflow:auto;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:30}.myinterview-modal-wrapper--fullscreen{border-radius:0;box-shadow:none;height:100vh;left:0;max-height:100vh;max-width:100vw;padding:0;top:0;transform:none;width:100vw}.myinterview-modal-wrapper__box{height:100%;max-height:100%;max-width:100%;overflow:auto;width:100%}.myinterview-modal-wrapper__close-btn{cursor:pointer;height:16px;position:absolute;right:20px;top:20px;width:16px}.myinterview-modal-wrapper-background{background-color:#0000001a;height:100vh;left:0;position:fixed;top:0;width:100vw}.phone-number{border:.5px solid var(--color-neutral-30);border-radius:10px;display:flex;position:relative}.phone-number--rtl{direction:rtl}.phone-number--rtl .input-text{direction:ltr}.phone-number--rtl .input-text input{text-align:end}.phone-number--rtl .dropdown{border-left:.5px solid var(--color-neutral-20);border-right:0!important}.phone-number--opened{border-radius:10px 10px 0 0!important}.phone-number--opened--up{border-radius:0 0 10px 10px!important}.phone-number .dropdown{border-right:.5px solid var(--color-neutral-20);padding:0 15px;width:75px}.phone-number .dropdown__selected-item{font-size:16px}.phone-number .dropdown--opened{border-radius:unset!important;box-shadow:unset!important}.phone-number .input-text{border:0;flex:1}.myinterview-logo-wrapper{max-height:400px}.myinterview-checkbox{align-items:center;border-radius:4px;border-style:solid;border-width:1px;display:flex;flex-shrink:0;justify-content:center;position:relative;transition:all .15s ease-out}.myinterview-checkbox__input{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:1}.myinterview-checkbox__checkmark{border-radius:50%;display:flex;height:100%;padding:2px;transform:scale(0);transition:.15s ease-out;width:100%}.myinterview-checkbox__checkmark--checked{border-radius:0;transform:scale(1)}.myinterview-checkbox__checkmark svg{height:100%;width:100%}.myinterview-widget-no-select{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.myinterview-widget-scroll-indicator::-webkit-scrollbar{display:initial!important;width:5px}.myinterview-widget-scroll-indicator::-webkit-scrollbar-thumb{background:var(--color-neutral-40)}@keyframes fade-in{0%{opacity:0}}:host{--myinterview-widget-dynamic-overflow:auto;--myinterview-widget-background-height:calc(40vh - 100px);--myinterview-widget-background-preview-display:none;--myinterview-widget-video-aspect-ratio:0.75;--myinterview-widget-camera-transform:translateZ(0) rotateY(180deg);--myinterview-widget-outer-width:530px;--myinterview-widget-recorder-border-radius:10px;--myinterview-widget-preview-video-border-radius:20px;--myinterview-background-opacity:0;--myinterview-widget-wrapper-padding:20px}@media (min-width:1200px){:host{--myinterview-widget-recorder-border-radius:20px;--myinterview-widget-preview-video-border-radius:10px;--myinterview-widget-video-aspect-ratio:1.77778;--myinterview-widget-wrapper-padding:10px}}.myinterview-widget{word-wrap:normal;--myinterview-widget-layout-top:0;--myinterview-widget-layout-right:0;--myinterview-widget-layout-bottom:0;--myinterview-widget-layout-left:0;border-collapse:initial;border-spacing:0;caption-side:top;cursor:auto;direction:ltr;empty-cells:show;font-size:1rem;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:400;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;orphans:2;quotes:initial;tab-size:8;text-align:initial;text-align-last:auto;text-decoration-color:initial;text-indent:0;text-justify:auto;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;widows:2;word-break:normal;word-spacing:normal}.myinterview-widget *,.myinterview-widget :after,.myinterview-widget :before{box-sizing:border-box;font-family:Nunito Sans,sans-serif;margin:0}.myinterview-widget__layout{background-color:var(--color-white);border-radius:0;bottom:0;display:flex;flex-direction:column;left:0;max-height:100%;padding:20px 20px 0;position:fixed;right:0;top:0;transform:translateZ(0);-webkit-transform:translateZ(0);z-index:2147483000}.myinterview-widget__layout--animated{animation:myinterview-widget-open .4s ease-out;-webkit-animation:myinterview-widget-open .4s ease-out;-moz-animation:myinterview-widget-open .4s ease-out;-o-animation:myinterview-widget-open .4s ease-out}.myinterview-widget__layout--minimized{animation:myinterview-widget-minimize .5s ease-in-out forwards;-webkit-animation:myinterview-widget-minimize .5s ease-in-out forwards;-moz-animation:myinterview-widget-minimize .5s ease-in-out forwards;-o-animation:myinterview-widget-minimize .5s ease-in-out forwards;overflow:hidden}.myinterview-widget__layout--minimized>*{opacity:0;transition:opacity .2s ease-out}@media (min-width:480px){.myinterview-widget__layout{display:grid;grid-template-columns:minmax(20px,1fr) minmax(auto,480px) minmax(20px,1fr);padding:20px 0 0}.myinterview-widget__layout>*{grid-column:2}.myinterview-widget__layout>.full{grid-column:1/-1;padding:0}}@media (min-width:1200px){.myinterview-widget__layout{grid-template-columns:10px 1fr 10px;padding:50px 0}}@keyframes myinterview-widget-open{0%{background-color:var(--color-primary);border-radius:10px;bottom:var(--myinterview-widget-layout-bottom);left:var(--myinterview-widget-layout-left);min-height:45px;overflow:hidden;padding:0;right:var(--myinterview-widget-layout-right);top:var(--myinterview-widget-layout-top)}50%{background-color:var(--color-white)}}@keyframes myinterview-widget-minimize{90%{border-radius:10px;bottom:var(--myinterview-widget-layout-bottom);left:var(--myinterview-widget-layout-left);min-height:45px;opacity:1;padding:0;right:var(--myinterview-widget-layout-right);top:var(--myinterview-widget-layout-top);z-index:2147483000}99%{opacity:0}to{background-color:var(--color-primary);border-radius:10px;bottom:var(--myinterview-widget-layout-bottom);left:var(--myinterview-widget-layout-left);min-height:45px;opacity:0;padding:0;right:var(--myinterview-widget-layout-right);top:var(--myinterview-widget-layout-top);z-index:-1}}.myinterview-widget-icons__play-button{cursor:pointer;position:relative}.myinterview-widget-icons__play-button svg{color:var(--color-primary)}.myinterview-widget-icons__play-button svg path{transition:d .4s ease-out;-webkit-transition:d .4s}.myinterview-widget-icons__play-button svg rect{transition:rx .4s;-webkit-transition:rx .4s}.myinterview-widget-icons__loading{background-color:currentColor;border-radius:50%;height:38px;overflow:hidden;position:relative;transform:translateZ(0);width:38px}.myinterview-widget-icons__loading:after{animation:slide 1s infinite;background:linear-gradient(to right,currentColor,var(--color-neutral-10),currentColor);content:\"\";height:100%;left:-50px;position:absolute;width:100%}.myinterview-widget-icons__no-camera-mic{align-items:center;background-color:#eff6fe;border-radius:50%;display:flex;height:80px;justify-content:center;position:relative;width:80px}.myinterview-widget-icons__no-camera-mic__camera,.myinterview-widget-icons__no-camera-mic__mic{align-items:center;border-radius:4px;display:flex;height:28px;justify-content:center;position:absolute;width:28px}.myinterview-widget-icons__no-camera-mic__camera svg,.myinterview-widget-icons__no-camera-mic__mic svg{height:20px;width:20px}.myinterview-widget-icons__no-camera-mic__camera{background-color:var(--color-primary);color:var(--color-white);transform:translate(-35%,-35%)}.myinterview-widget-icons__no-camera-mic__mic{background-color:var(--color-white);color:var(--color-primary);transform:translate(35%,35%)}.myinterview-widget__wrapper{-ms-overflow-style:none;display:flex;flex:1;flex-direction:column;overflow:hidden;position:relative;scrollbar-width:none}.myinterview-widget__wrapper ::-webkit-scrollbar,.myinterview-widget__wrapper::-webkit-scrollbar{display:none}.myinterview-widget__wrapper--hide-header .myinterview-widget-header{visibility:hidden}.myinterview-widget__background{background:linear-gradient(50.24deg,var(--color-primary) 0,var(--color-special) 75%);height:var(--myinterview-widget-background-height);left:0;opacity:var(--myinterview-background-opacity);overflow:hidden;position:absolute;top:0;transition:opacity .5s;width:100%}.myinterview-widget__background:before{border:6vh solid hsla(0,0%,100%,.267);border-radius:50%;content:\"\";height:30vh;position:absolute;right:0;top:0;transform:translate(50%,-50%);width:30vh}.myinterview-widget__background:after{background-color:var(--color-white);border-radius:20px 20px 0 0;bottom:0;content:\"\";display:var(--myinterview-widget-background-preview-display);height:20px;position:absolute;width:100%}@media (min-width:1200px){.myinterview-widget__background:after{display:none}.myinterview-widget__background{height:100vh;left:auto;right:0;width:calc(100% - var(--myinterview-widget-outer-width))}.myinterview-widget__background:before{border:12vh solid hsla(0,0%,100%,.267);height:70vh;width:70vh}}.myinterview-widget__watermark{display:none}@media (min-width:1200px){.myinterview-widget__watermark{bottom:20px;display:flex;height:64px;left:20px;position:absolute}}.myinterview-widget__background-dots{display:none}@media (min-width:1200px){.myinterview-widget__background-dots{background-image:radial-gradient(hsla(0,0%,100%,.467) 15%,#0000 0);background-position:0 0,50px 50px;background-size:20px 20px;bottom:0;display:flex;height:200px;position:absolute;right:0;width:200px}}.myinterview-widget__views{--myinterview-widget-views-margin-top:0px;--myinterview-widget-practice-opacity:1;-webkit-overflow-scrolling:touch;color:var(--color-primary);display:flex;flex:1;flex-direction:column;overflow-y:var(--myinterview-widget-dynamic-overflow);scroll-snap-type:y mandatory;z-index:20}.myinterview-widget__views--uploading{gap:0;justify-content:center;margin-bottom:30px}@media (min-width:1200px){.myinterview-widget__views{align-items:start;flex:initial;flex:1;flex-direction:row-reverse;gap:0;justify-content:flex-end;overflow:hidden;padding:0;scroll-snap-type:none}.myinterview-widget__views--uploading{margin-bottom:0}}.myinterview-widget__views--rtl .myinterview-widget--rtl-support{direction:rtl}.myinterview-widget-recording-action-button{margin-bottom:20px;min-height:45px;position:relative;scroll-snap-align:end;z-index:1}@media (min-width:1200px){.myinterview-widget-recording-action-button{display:none}}.myinterview-widget-recording-action-button--video-question:disabled{display:none!important}.myinterview-widget-recording-action-button--stop-recording{border:1px solid var(--color-neutral-40)!important}@media (min-width:1200px){.myinterview-widget-recording-action-button--stop-recording{border:none!important}}.myinterview-widget-rotate-screen{align-items:center;animation:fade-in .3s;background-color:var(--color-white);display:none;height:100%;justify-content:center;left:0;padding:20px!important;position:absolute;top:0;width:100%;z-index:400}.myinterview-widget-rotate-screen svg{flex:0;margin-right:40px;min-width:120px}@media screen and (orientation:landscape){.myinterview-widget-rotate-screen{display:flex}}.myinterview-widget-unsupported-modal{align-items:center;background-color:var(--color-white);display:flex;height:100%;justify-content:center;left:0;padding:20px;position:absolute;top:0;width:100%;z-index:400}.myinterview-widget-unsupported-modal__message{text-align:center}.myinterview-widget-minimize{color:var(--color-white);cursor:pointer;display:none;height:20px;position:fixed;right:30px;top:30px;width:20px;z-index:50}@media (min-width:1024px){.myinterview-widget-minimize{display:flex}}.myinterview-widget-header{display:flex;flex-wrap:wrap;gap:18px;height:fit-content;margin:0 0 20px;max-height:112px;max-width:100%;overflow:hidden;transition:all .2s}.myinterview-widget-header--hidden{height:0;margin:0;overflow:hidden}@media (min-width:1200px){.myinterview-widget-header--hidden{height:fit-content;margin:0 0 20px}}.myinterview-widget-header__logo{height:48px}.myinterview-widget-header__logo img{flex-shrink:1;max-height:100%;max-width:100%;object-fit:contain;overflow:hidden}.myinterview-widget-header__details-wrapper{display:flex;flex-direction:column;flex-shrink:0;justify-content:center;letter-spacing:.2px;max-width:100%;min-width:60%;overflow:hidden}@media (min-width:1200px){.myinterview-widget-header{display:none;max-width:var(--myinterview-widget-outer-width);overflow:visible;padding-left:20px}.myinterview-widget-header__company-name{color:var(--color-neutral-50)}.myinterview-widget-header__job-title{color:var(--color-neutral-90)}}.myinterview-widget-header--desktop-layout{display:none}@media (min-width:1200px){.myinterview-widget-header--desktop-layout{display:flex;min-height:48px}}.myinterview-widget-inner{align-items:center;display:flex;flex-direction:column;margin-bottom:20px;min-height:min((100vw - 40px) * 1/var(--myinterview-widget-video-aspect-ratio),480px * 1/var(--myinterview-widget-video-aspect-ratio));position:relative;scroll-snap-align:start;z-index:1}.myinterview-widget-inner--no-snap{scroll-snap-align:none}@media (min-width:1200px){.myinterview-widget-inner{background-color:var(--color-white);border-radius:var(--myinterview-widget-recorder-border-radius);box-shadow:0 4px 14px -2px #00000026;height:calc((100vw - 20px - var(--myinterview-widget-outer-width))*9/16);margin:auto;max-height:440px;max-width:782.2222222222px;min-height:auto;overflow:hidden;width:100%}}.myinterview-widget-inner--hidden{max-height:0;min-height:0;overflow:hidden;visibility:hidden}.myinterview-widget-inner--welcome-hidden{aspect-ratio:16/9;visibility:hidden;width:100%}.myinterview-widget-inner__content{aspect-ratio:var(--myinterview-widget-video-aspect-ratio);border-radius:var(--myinterview-widget-recorder-border-radius);display:flex;flex-direction:column;height:calc(100% - var(--myinterview-widget-views-margin-top));max-height:100%;max-width:fit-content;min-height:200px;min-width:200px;overflow:hidden;position:sticky;top:0}.myinterview-widget-inner__content--full-width{min-width:100%}@media (min-width:1200px){.myinterview-widget-inner__content{height:100%;max-width:100%;position:relative;width:100%}}.myinterview-widget-inner__content--error{display:flex;flex:1;flex-direction:column;height:calc(100% - var(--myinterview-widget-views-margin-top));max-width:100%;min-height:fit-content;width:100%}.myinterview-widget-inner .myinterview-widget-explanation{align-items:center;background-color:#fffffff2;border-radius:var(--myinterview-widget-recorder-border-radius);display:flex;flex-direction:column;height:100%;justify-content:center;padding:20px;position:absolute;text-align:center;white-space:pre-line;width:100%;z-index:1}.myinterview-widget-inner .myinterview-widget-explanation .myinterview-widget-question__question-parameters{margin-bottom:15px}.myinterview-widget-inner .myinterview-widget-explanation__main{margin-bottom:15px;max-width:50ch}.myinterview-widget-inner .myinterview-widget-explanation__header{margin-bottom:15px}.myinterview-widget-inner .myinterview-widget-times-up{align-items:center;background-color:var(--color-white);display:flex;flex:1;flex-direction:column;gap:10px;justify-content:center;padding:20px;text-align:center}.myinterview-widget-inner .myinterview-widget-times-up__button{margin-top:50px}@media (min-width:1200px){.myinterview-widget-inner .myinterview-widget-times-up__button,.myinterview-widget-inner .myinterview-widget-times-up__title{margin-top:auto}}.myinterview-widget-inner .myinterview-widget-recording-action-button{display:none}@media (min-width:1200px){.myinterview-widget-inner .myinterview-widget-recording-action-button{bottom:20px;display:block;left:50%;margin:0;position:absolute;transform:translate(-50%);white-space:nowrap;width:fit-content;z-index:20}}.myinterview-widget-inner--video-question-state,.myinterview-widget-inner--welcome-page-state{min-height:fit-content;min-width:100%}.myinterview-widget-inner--video-question-state .myinterview-widget-inner__content,.myinterview-widget-inner--welcome-page-state .myinterview-widget-inner__content{aspect-ratio:auto;height:auto}@media (min-width:1200px){.myinterview-widget-inner--video-question-state,.myinterview-widget-inner--welcome-page-state{min-width:auto}.myinterview-widget-inner--video-question-state .myinterview-widget-recording-action-button,.myinterview-widget-inner--welcome-page-state .myinterview-widget-recording-action-button{bottom:70px}}.myinterview-widget-inner--full{flex:1;scroll-snap-align:none}.myinterview-widget-inner--full .myinterview-widget-inner__content{flex:1;height:max-content;max-width:100%;width:100%}@media (min-width:1200px){.myinterview-widget-inner--full{flex:auto}}.myinterview-widget-outer{border-radius:10px;display:flex;flex-direction:column;padding-bottom:20px;scroll-snap-align:end}.myinterview-widget-outer--no-snap{scroll-snap-align:none}.myinterview-widget-outer--hidden{display:none}.myinterview-widget-outer--uploading{flex:0;padding:0}@media (min-width:1200px){.myinterview-widget-outer{background-color:initial;flex:none;height:100%;padding:0 20px 0 0!important;width:var(--myinterview-widget-outer-width)}.myinterview-widget-outer>*{padding:0 20px}.myinterview-widget-outer--hidden{display:flex}.myinterview-widget-outer--uploading{padding:0}}.myinterview-widget-outer .myinterview-widget-question{background-color:#fffffff2;border-radius:10px;margin:0 auto;transition:opacity .25s;width:100%}@media (min-width:1200px){.myinterview-widget-outer .myinterview-widget-question{padding:40px 20px 0}.myinterview-widget-outer .myinterview-widget-question__question{font-size:26px;line-height:36px}}.myinterview-widget-outer--hide-question .myinterview-widget-question{display:none}.myinterview-widget-outer__setup{display:flex;flex:1;flex-direction:column}.myinterview-widget-outer__title{margin-bottom:15px}.myinterview-widget-outer__mode-wrapper{background-color:var(--color-white);bottom:0;display:flex;justify-content:space-around;margin-top:15px;padding:10px 0;position:sticky}.myinterview-widget-outer__mode-wrapper:before{background-color:var(--color-white);content:\"\";height:40px;left:0;mask-image:linear-gradient(#0000,var(--color-black));-webkit-mask-image:linear-gradient(#0000,var(--color-black));mask-mode:alpha;position:absolute;top:0;transform:translateY(-100%);width:100%}@media (min-width:1200px){.myinterview-widget-outer__mode-wrapper{background-color:initial;flex-direction:column;justify-content:flex-start;padding:0;position:static;width:65%}.myinterview-widget-outer__mode-wrapper:after,.myinterview-widget-outer__mode-wrapper:before{display:none}}.myinterview-widget-outer__mode-button{letter-spacing:.5px;max-width:42%!important;min-width:100px!important;padding:0 15px!important;width:150px!important}.myinterview-widget-outer__mode-button--start{border:1px solid!important}.myinterview-widget-outer__mode-button--single{background-color:var(--color-special);color:var(--color-white);max-width:100%!important;width:100%!important}@media (min-width:1200px){.myinterview-widget-outer__mode-button{max-width:100%!important;min-width:150px!important;width:100%!important}.myinterview-widget-outer__mode-button:first-child{margin-bottom:20px}}.myinterview-widget-outer__practice-mode-info{margin-bottom:20px}.myinterview-widget-outer .myinterview-widget__countdown-mobile{display:none}.myinterview-widget-video-camera{border-radius:var(--myinterview-widget-recorder-border-radius);display:flex;flex:1;flex-direction:column;max-height:100%;position:relative;width:100%}@media (min-width:1200px){.myinterview-widget-video-camera{transform:translateZ(0) scale(1.005)}}.myinterview-widget-video-camera--hidden{display:none}.myinterview-widget-video-camera video{border-radius:var(--myinterview-widget-recorder-border-radius);object-fit:contain;overflow:hidden;transform:var(--myinterview-widget-camera-transform);-webkit-transform:var(--myinterview-widget-camera-transform);width:100%}.myinterview-widget-video-camera__recording-without-video{align-items:center;background-color:#fff;display:flex;height:100%;justify-content:center}.myinterview-widget-video-camera__recording-without-video svg{height:45px;width:45px}.myinterview-widget-video-camera__recording-counter-wrapper{align-self:center;position:absolute;top:var(--myinterview-widget-wrapper-padding);width:70px;z-index:2}.myinterview-widget-video-camera__permissions{align-items:center;animation:fade-in .5s;background-color:#fffffff2;border-radius:var(--myinterview-widget-recorder-border-radius);color:var(--color-neutral-90);display:flex;height:100%;justify-content:center;padding:20px;position:absolute;width:100%;z-index:21}.myinterview-widget-video-camera__permissions-close{cursor:pointer;left:25px;position:absolute;top:25px;width:20px}.myinterview-widget-video-camera .myinterview-widget__microphone-indicator{align-items:center;background-color:var(--color-primary);border-radius:50%;bottom:18px;color:var(--color-white);display:flex;height:40px;isolation:isolate;justify-content:center;left:18px;padding:10px;position:absolute;width:40px}.myinterview-widget-video-camera .myinterview-widget__microphone-indicator--hidden{visibility:hidden}@media (min-width:1200px){.myinterview-widget-video-camera .myinterview-widget__microphone-indicator{bottom:25px;left:25px}}.myinterview-widget-video-camera .myinterview-widget__microphone-indicator:after{background:radial-gradient(#0000 40%,var(--color-primary) 90%);border-radius:50%;content:\"\";height:100%;position:absolute;transform:scale(var(--myinterview-widget-voice-level));transform-origin:center;width:100%;will-change:transform;z-index:-1}.myinterview-widget-video-camera .myinterview-widget__microphone-indicator svg{height:100%;width:100%}.myinterview-widget-video-camera .myinterview-widget__practice-mode{opacity:var(--myinterview-widget-practice-opacity);position:absolute;right:10px;top:10px;transition:opacity .3s}@media (min-width:1200px){.myinterview-widget-video-camera .myinterview-widget__practice-mode{opacity:1;right:25px;top:25px}}.myinterview-widget-video-camera .myinterview-widget__question-number{left:var(--myinterview-widget-wrapper-padding);top:var(--myinterview-widget-wrapper-padding);z-index:25}@media (min-width:1200px){.myinterview-widget-video-camera .myinterview-widget__question-number{letter-spacing:.5px}}.myinterview-widget-video-camera .myinterview-widget__countdown-desktop{display:none}.myinterview-widget-video-camera__watermark{height:50px;left:15px;opacity:.5;position:absolute;top:15px;width:120px}@media (min-width:1200px){.myinterview-widget-video-camera__watermark{left:25px;top:25px}}.myinterview-widget-recorder-modal{align-items:center;animation:fade-in .5s;background-color:#fffffff2;border-radius:var(--myinterview-widget-recorder-border-radius);bottom:0;color:var(--color-neutral-90);display:flex;filter:drop-shadow(0 0 0 rgba(0,0,0,.2));justify-content:center;left:0;min-height:100%;overflow:hidden;padding:var(--myinterview-widget-wrapper-padding);position:absolute;right:0;text-align:center;top:0;z-index:20}.myinterview-widget-recorder-modal__content-wrapper{align-items:center;display:flex;flex-direction:column;gap:5px;letter-spacing:.5px}@media (min-width:1200px){.myinterview-widget-recorder-modal__content-wrapper{max-width:700px}}.myinterview-widget-recorder-modal__question{max-width:100%;overflow:hidden;overflow-wrap:break-word;text-align:start}@media (min-width:1200px){.myinterview-widget-recorder-modal__question{text-align:center}.myinterview-widget-recorder-modal__question .myinterview-widget__question-duration{justify-content:center}}.myinterview-widget-checks{display:flex;flex-direction:column}.myinterview-widget-checks__item{align-items:center;display:flex;gap:20px;margin-bottom:20px}.myinterview-widget-checks__icon{align-items:center;display:flex;height:100%;justify-content:center;width:40px}.myinterview-widget-checks__text-wrapper{display:flex;flex-direction:column}.myinterview-widget-checks__retry{background-color:initial;border:0;cursor:pointer;margin-left:10px;text-decoration:underline}.myinterview-widget-preview__container{background-color:var(--color-white);display:flex;flex-direction:column;min-height:100%;padding-top:var(--myinterview-widget-wrapper-padding);position:relative;width:100%}@media (min-width:1200px){.myinterview-widget-preview__container{max-height:100%;padding:var(--myinterview-widget-wrapper-padding)}}.myinterview-widget-preview__container .myinterview-widget__question-number{margin-bottom:var(--myinterview-widget-wrapper-padding);position:relative}.myinterview-widget-preview__container .myinterview-widget-errors{animation:fade-in .3s;background-color:var(--color-white);bottom:0;left:0;padding:20px;position:absolute;right:0;text-align:center;top:0;transform:translateZ(150px);-webkit-transform:translateZ(150px);z-index:150}.myinterview-widget-preview__title{margin-bottom:30px;text-align:center}@media (min-width:1200px){.myinterview-widget-preview__title{color:var(--color-neutral-90);margin-bottom:12px}}.myinterview-widget-preview__background{animation:background-fade-in .3s ease-out;background-color:#000000e6;height:100%;isolation:isolate;left:0;position:fixed;top:0;transform:translateZ(150px);width:100%;z-index:150}@keyframes background-fade-in{0%{background-color:#0000;transform:translateZ(-2px);z-index:-2}}.myinterview-widget-preview__close{background-color:var(--color-neutral-60);border-radius:2.5rem;bottom:1vh;left:50%;padding:3px 8px;pointer-events:none;position:absolute;transform:translateX(-50%)}.myinterview-widget-preview__main{animation:fade-in .5s;display:flex;height:350px;margin:auto;overflow:hidden;position:relative;touch-action:pan-y;width:100%;z-index:1}.myinterview-widget-preview__items-wrapper{--myinterview-widget-preview-transform-x:0;--myinterview-widget-preview-item-transition:0ms;--myinterview-widget-item-width:100%;box-sizing:initial;display:flex;margin-bottom:10px;position:relative;transition-duration:0ms;transition-property:transform;width:100%;z-index:2}.myinterview-widget-preview__items-wrapper--centered{justify-content:center}.myinterview-widget-preview__item{display:flex;flex-direction:column;flex-shrink:0;height:100%;justify-content:center;padding:2%;position:relative;transition:transform var(--myinterview-widget-preview-item-transition);width:var(--myinterview-widget-item-width);z-index:1}.myinterview-widget-preview__item--current{z-index:2}.myinterview-widget-preview__item--single-take{flex:1;max-width:50%}.myinterview-widget-preview__video-wrapper{border:0 solid var(--color-primary);border-radius:var(--myinterview-widget-preview-video-border-radius);display:flex;margin:0 auto;opacity:1;overflow:hidden;position:relative;transition-delay:.29s;z-index:3}.myinterview-widget-preview__video-wrapper--mobile{aspect-ratio:var(--myinterview-widget-video-aspect-ratio);height:100%}@media (min-width:1200px){.myinterview-widget-preview__video-wrapper{border-radius:var(--myinterview-widget-preview-video-border-radius);margin:0}}.myinterview-widget-preview__video-wrapper:before{background-color:rgba(0,0,0,.267);border-radius:var(--myinterview-widget-preview-video-border-radius);content:\"\";height:100%;left:0;pointer-events:none;position:absolute;top:0;transform:translateZ(1px);transition:background-color .3s;width:100%;z-index:1}.myinterview-widget-preview__video-wrapper--current:before,.myinterview-widget-preview__video-wrapper--preview:before,.myinterview-widget-preview__video-wrapper:hover:before{background-color:#0000;pointer-events:none}.myinterview-widget-preview__video-wrapper--preview-mobile{opacity:0}.myinterview-widget-preview__video-wrapper:after{border:0 solid var(--color-primary);border-radius:var(--myinterview-widget-preview-video-border-radius);content:\"\";height:100%;pointer-events:none;position:absolute;transition:.15s;width:100%}@media (min-width:1200px){.myinterview-widget-preview__video-wrapper:after{border-radius:var(--myinterview-widget-preview-video-border-radius)}}.myinterview-widget-preview__video-wrapper--selected:before{background-color:#0000;z-index:-1}.myinterview-widget-preview__video-wrapper--selected:after{border:3px solid var(--color-primary)}.myinterview-widget-preview__video{cursor:pointer;transform:translateZ(0);-webkit-transform:translateZ(0);width:100%}.myinterview-widget-preview__dynamic-video{--myinterview-preview-video-top:50%;--myinterview-preview-video-left:50%;--myinterview-preview-video-width:0%;--myinterview-preview-video-height:0%;border-radius:var(--myinterview-widget-preview-video-border-radius);height:var(--myinterview-preview-video-height);left:var(--myinterview-preview-video-left);position:fixed;top:var(--myinterview-preview-video-top);transform:translateZ(-1px);transition:all .3s ease-out;transition-delay:.01s;visibility:hidden;width:var(--myinterview-preview-video-width);z-index:-1}.myinterview-widget-preview__dynamic-video--preview{border-radius:0;height:100%;left:0;max-height:70vh;top:46%;transform:translate3d(0,-50%,200px);visibility:visible;width:100%;z-index:200}.myinterview-widget-preview__number-wrapper{align-items:center;cursor:pointer;display:flex;gap:5px;margin:7px auto 0;position:relative;width:fit-content}@media (min-width:1200px){.myinterview-widget-preview__number-wrapper{margin:7px 0 0}}.myinterview-widget-preview__selected-check-mark{align-items:center;border:1px solid var(--color-neutral-60);border-radius:50%;display:flex;height:20px;justify-content:center;overflow:hidden;padding:1px;pointer-events:none;position:relative;width:20px}.myinterview-widget-preview__selected-check-mark svg{transform:scale(0);-webkit-transform:scale(0);transition:.15s ease-out}.myinterview-widget-preview__selected-check-mark--selected{border:1px solid var(--color-primary)}.myinterview-widget-preview__selected-check-mark--selected svg{transform:scale(1);-webkit-transform:scale(1)}.myinterview-widget-preview__dots-wrapper{align-items:center;display:flex;height:20px;justify-content:center;width:100%}.myinterview-widget-preview__dot{background-color:var(--color-neutral-20);border-radius:50%;cursor:pointer;height:10px;margin:0 7px;position:relative;transition:.3s ease-out;width:10px}.myinterview-widget-preview__dot--selected{background-color:var(--color-primary);cursor:auto;transform:scale(1.5);-webkit-transform:scale(1.5)}.myinterview-widget-preview__play-container{align-items:center;cursor:pointer;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.myinterview-widget-preview__play-button-wrapper{left:50%;top:50%;transform:translateZ(1px);transition:opacity .3s;width:60px}@media (min-width:1200px){.myinterview-widget-preview__play-button-wrapper{max-width:76px;width:25%}}.myinterview-widget-preview__horizontal-line{display:none}@media (min-width:1200px){.myinterview-widget-preview__horizontal-line{background-color:#bdbdbd;display:block;height:1px;margin:15px auto;width:50%}}.myinterview-widget-preview__preview-buttons{align-items:center;display:flex;flex-direction:column;gap:20px;margin-bottom:10px;margin-top:33px;max-width:100%}@media (min-width:1200px){.myinterview-widget-preview__preview-buttons{gap:10px;margin-top:auto}}.myinterview-widget-preview__preview-buttons-top{display:flex;gap:10px;justify-content:space-evenly;max-width:100%;width:100%}@media (min-width:1200px){.myinterview-widget-preview__preview-buttons-top{justify-content:center;width:auto}}.myinterview-widget-preview__preview-button{max-width:45%;min-width:100px;width:150px}.myinterview-widget-preview__preview-button--retake{align-items:center;border:1px solid var(--color-neutral-30);display:flex;justify-content:center;max-width:100%}.myinterview-widget-preview__preview-button--start-interview{background-color:initial;color:var(--color-primary);font-size:13px;max-height:30px;max-width:max-content;padding:0;width:max-content}@media (min-width:1200px){.myinterview-widget-preview__preview-button{flex:1;max-height:42px;min-width:150px}}.myinterview-widget-preview__retakes-wrapper{max-width:45%;min-width:100px;text-align:center;width:150px}@media (min-width:1200px){.myinterview-widget-preview__retakes-wrapper{max-height:42px;min-width:150px}}.myinterview-widget-preview__retakes-left{color:var(--color-neutral-60)}.myinterview-widget-preview__arrow{align-items:center;animation:fade-in .3s;display:flex;height:100%;justify-content:center;min-width:40px;position:absolute;right:0;z-index:5}@media (min-width:1200px){.myinterview-widget-preview__arrow{min-width:4%}.myinterview-widget-preview__arrow:before{background-color:#fff;content:\"\";height:100%;left:0;mask-image:linear-gradient(to right,#0000,var(--color-black));-webkit-mask-image:linear-gradient(to right,#0000,var(--color-black));position:absolute;transform:translateX(5px);width:100%}}.myinterview-widget-preview__arrow--prev{left:0;right:auto;transform:translateZ(5px) rotateY(180deg)}@media (min-width:1200px){.myinterview-widget-preview__arrow--prev{transform:translateZ(5px) rotateY(180deg)}}.myinterview-widget-preview__arrow-icon-wrapper{align-items:center;background-color:var(--color-white);border:1px solid var(--color-neutral-30);border-radius:50%;color:var(--color-neutral-90);cursor:pointer;display:flex;height:36px;justify-content:center;position:relative;transform:translateY(-11px);width:36px}@media (min-width:1200px){.myinterview-widget-preview__arrow-icon-wrapper{box-shadow:0 4px 30px #00000026}}.myinterview-widget-video-question{aspect-ratio:16/9;background-color:var(--color-black);border-radius:var(--myinterview-widget-recorder-border-radius);height:fit-content;isolation:isolate;margin:auto;overflow:hidden;position:relative;width:100%;z-index:1}@media (min-width:1200px){.myinterview-widget-video-question{height:100%}}.myinterview-widget-video-question--hidden{position:absolute;visibility:hidden;z-index:-1}.myinterview-widget-video-question--loading{background-color:hsla(0,0%,100%,.467)}.myinterview-widget-video-question--loading:before{animation:slide 1.5s infinite;background:linear-gradient(to right,#0000,var(--color-neutral-10),#0000);content:\"\";height:100%;left:-100%;position:absolute;top:0;width:100%;z-index:-1}@media (min-width:1200px){.myinterview-widget-video-question--loading{background-color:#ccd7f5}}.myinterview-widget-video-question:after{content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.myinterview-widget-video-question--done:after{background-color:var(--color-black)}.myinterview-widget-video-question__play-button-wrapper{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transition:transform .2s ease-out,opacity .3s ease-out;width:clamp(50px,15vw,76px);z-index:1}.myinterview-widget-video-question__play-button-wrapper--hidden{opacity:0;pointer-events:none;touch-action:none;transform:translate(-50%,-50%) scale(1.3);-webkit-transform:translate(-50%,-50%) scale(1.3)}.myinterview-widget-video-question__controls{align-items:center;bottom:0;display:flex;justify-content:center;left:0;margin:10px 12px;position:absolute;right:0;transition:opacity .2s,transform .2s;z-index:1}.myinterview-widget-video-question__controls--inactive{opacity:0;pointer-events:none;touch-action:none;transform:translateY(25%)}.myinterview-widget-video-question__controls>:not(:last-child){margin-right:15px}.myinterview-widget-video-question__controls .myinterview-widget-video-question__control-play-button{min-width:40px;width:50px}.myinterview-widget-video-question__controls .myinterview-widget-video-question__control-play-button .myinterview-widget-icons svg{color:var(--color-white)}.myinterview-widget-video-question__timebar-counter-wrapper{width:100%}.myinterview-widget-video-question__counter-wrapper{-webkit-text-stroke-width:.5px;-webkit-text-stroke-color:var(--color-neutral-90);color:var(--color-white);font-size:13px;font-weight:700}.myinterview-widget-video-question__time-bar{background-color:hsla(0,0%,100%,.467);border-radius:2.5rem;cursor:pointer;height:10px;margin-bottom:5px;position:relative;width:100%}.myinterview-widget-video-question__time-bar--disabled{cursor:auto;pointer-events:none}.myinterview-widget-video-question__time-bar:before{content:\"\";height:30px;left:0;position:absolute;top:0;transform:translateY(-30%);width:100%}@media (min-width:1200px){.myinterview-widget-video-question__time-bar:before{display:none}}.myinterview-widget-video-question__time-bar-progress{background-color:var(--color-primary);border-radius:2.5rem;height:100%;position:absolute;transition:width .25s linear}.myinterview-widget-video-question__time-bar-progress:after{background-color:var(--color-primary);border-radius:50%;content:\"\";height:15px;left:100%;pointer-events:none;position:absolute;top:50%;touch-action:none;transform:translate(-50%,-50%);width:15px}.myinterview-widget-video-question__time-bar-progress--changing{transition:none}.myinterview-widget-video-question__time-bar-progress--unchangeable{cursor:auto}.myinterview-widget-video-question__time-bar-progress--unchangeable:after{display:none}.myinterview-widget-video-question__retry-button{margin-top:20px;width:100%;z-index:2}.myinterview-widget-video-question__retry-button--hidden{position:absolute;visibility:hidden;z-index:-1}@media (min-width:1200px){.myinterview-widget-video-question__retry-button{bottom:70px;left:50%;margin:0 auto;position:absolute;transform:translateX(-50%);width:fit-content}}@keyframes slide{50%{opacity:.9}to{left:100%;opacity:1}}.myinterview-widget-device{align-items:center;background-color:var(--color-white);border-radius:50%;color:var(--color-neutral-90);display:flex;height:40px;justify-content:center;position:absolute;right:18px;width:40px}.myinterview-widget-device__mobile{bottom:18px}.myinterview-widget-device__desktop{right:18px;top:18px;z-index:30}@media (min-width:1200px){.myinterview-widget-device__desktop{right:25px;top:25px}}.myinterview-widget-device__menu-button{align-items:center;background-color:initial;border:none;border-radius:50%;cursor:pointer;display:flex;height:100%;justify-content:center;width:100%}.myinterview-widget-device__modal{--myinterview-widget-select-device-height:48px;background-color:var(--color-white);border-radius:20px;bottom:-15px;box-shadow:0 2px 12px -4px #0000001a;max-width:400px;min-width:300px;position:absolute;right:-12px;transform:translateY(100%)}.myinterview-widget-device__modal:before{background-color:var(--color-white);border-radius:5px;content:\"\";height:20px;position:absolute;right:22px;top:-8px;transform:rotate(45deg);width:20px}.myinterview-widget-device__select-wrapper{display:flex;flex-direction:column;overflow:hidden;padding:20px}.myinterview-widget-device__select-group{display:flex;flex-direction:column}.myinterview-widget-device__select-group:not(:last-child):after{background-color:var(--color-neutral-20);content:\"\";height:1px;margin:10px 0;width:100%}.myinterview-widget-device__selected-device{cursor:pointer;display:flex;height:var(--myinterview-widget-select-device-height);width:100%}.myinterview-widget-device__select-icon{align-items:center;display:flex;min-width:40px}.myinterview-widget-device__select-icon svg{height:20px;width:20px}.myinterview-widget-device__selected-title-wrapper{flex:1;overflow:hidden;padding-right:23px}.myinterview-widget-device__selected-title{line-height:var(--myinterview-widget-select-device-height)!important;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.myinterview-widget-device__arrow{align-items:center;display:flex;margin-left:auto;transform:rotate(0);transition:.2s}.myinterview-widget-device__arrow--open{transform:rotate(-180deg)}.myinterview-widget-device__select-list{display:flex;flex-direction:column;max-height:0;overflow:hidden;transition:max-height .2s ease-out}.myinterview-widget-device__select-list--open{max-height:calc(var(--myinterview-widget-select-device-height)*2);overflow:auto;transition:max-height .2s ease-in}.myinterview-widget-device__select-option{border-radius:4px;cursor:pointer;line-height:var(--myinterview-widget-select-device-height)!important;min-height:var(--myinterview-widget-select-device-height);overflow:hidden;padding:0 40px;text-overflow:ellipsis;white-space:nowrap}.myinterview-widget-device__select-option--selected,.myinterview-widget-device__select-option:hover{color:var(--color-primary)!important}.myinterview-widget-device__select-option--selected{background-color:rgba(90,164,245,.051)!important}.myinterview-widget__countdown-mobile{align-items:center;background-color:var(--color-white);border-radius:2.5rem;display:flex;height:25px;left:50%;padding:6px 10px;position:absolute;top:var(--myinterview-widget-wrapper-padding);transform:translateX(-50%);z-index:30}.myinterview-widget__countdown-mobile--red{color:var(--color-error)}@media (min-width:1200px){.myinterview-widget__countdown-mobile[hidden]{display:none}}.myinterview-widget__countdown-desktop{display:none}@media (min-width:1200px){.myinterview-widget__countdown-desktop{--myinterview-widget-p:100;--myinterview-widget-b:5px;--myinterview-widget-w:160px;align-items:center;display:flex;height:var(--myinterview-widget-w);justify-content:center;margin:auto;padding:0;position:relative;transform:rotateY(180deg);width:var(--myinterview-widget-w)}.myinterview-widget__countdown-desktop:after,.myinterview-widget__countdown-desktop:before{border-radius:50%;content:\"\";position:absolute}.myinterview-widget__countdown-desktop:before{background:radial-gradient(farthest-side,var(--color-primary) 100%,#0000) top/var(--myinterview-widget-b) var(--myinterview-widget-b) no-repeat,conic-gradient(var(--color-primary) calc((var(--myinterview-widget-p))*1%),#0000 0);inset:0;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - var(--myinterview-widget-b)),#000 calc(100% - var(--myinterview-widget-b)));mask:radial-gradient(farthest-side,#0000 calc(100% - var(--myinterview-widget-b)),#000 calc(100% - var(--myinterview-widget-b)));transition:all 1s}.myinterview-widget__countdown-desktop:after{background:var(--color-primary);inset:calc(50% - var(--myinterview-widget-b)/2);transform:rotate(calc(var(--myinterview-widget-p)*3.6deg)) translateY(calc(50% - var(--myinterview-widget-w)/2))}.myinterview-widget__countdown-desktop[hidden]{display:none}}.myinterview-widget__countdown-desktop .myinterview-widget__countdown-desktop-text{align-items:center;border:var(--myinterview-widget-b) solid #edf6fe;border-radius:50%;display:flex;height:100%;justify-content:center;position:absolute;transform:rotateY(180deg);width:100%;z-index:-1}.myinterview-widget-counter{align-items:center;background-color:var(--color-white);border-radius:2.5rem;color:var(--color-neutral-90);display:flex;gap:5px;height:25px;justify-content:center}.myinterview-widget-counter__dot{background-color:var(--color-error);border-radius:50%;height:10px;width:10px}.myinterview-widget-counter__clock{display:flex}.myinterview-widget-counter__timer{transition:color .25s}.myinterview-widget-counter__timer--red{color:#f45b2b}.myinterview-widget-loader{-webkit-animation:fade 1.6s infinite;-moz-animation:fade 1.6s infinite;-o-animation:fade 1.6s infinite;animation:fade 1.6s infinite;margin:auto;width:80px}@keyframes fade{0%,to{opacity:0}50%{opacity:1}}@-o-keyframes fade{0%,to{opacity:0}50%{opacity:1}}@-moz-keyframes fade{0%,to{opacity:0}50%{opacity:1}}@-webkit-keyframes fade{0%,to{opacity:0}50%{opacity:1}}.myinterview-widget-error{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;margin:auto}.myinterview-widget-error__message{margin-bottom:10px}.myinterview-widget-errors{align-items:center;display:flex;flex-direction:column;justify-content:center}.myinterview-widget-errors__icon{margin-bottom:15px}.myinterview-widget-errors__details,.myinterview-widget-errors__title{margin-bottom:5px}.myinterview-widget-errors__cta{cursor:pointer;margin-bottom:5px;position:relative;text-decoration:underline}.myinterview-widget-errors__cta .myinterview-widget-select-native{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.myinterview-widget-errors__cta--secondary{text-transform:capitalize}.myinterview-widget-slider-modal{animation:close-modal .3s forwards;bottom:0;height:100vh;height:-moz-available;height:-webkit-fill-available;height:stretch;left:0;min-height:100vh;min-height:-moz-available;min-height:-webkit-fill-available;min-height:stretch;overflow:hidden;position:fixed;width:100vw;z-index:50}.myinterview-widget-slider-modal__wrapper{-webkit-overflow-scrolling:touch;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;width:100%}.myinterview-widget-slider-modal__top{min-height:100%;scroll-snap-align:start;touch-action:none}.myinterview-widget-slider-modal__bottom{background-color:var(--color-white);border-radius:20px 20px 0 0;display:flex;flex-direction:column;height:10%;isolation:isolate;min-height:10%;overflow:hidden;position:relative;scroll-snap-align:end;transition:min-height .5s,height .5s;visibility:hidden}.myinterview-widget-slider-modal__pill{background-color:var(--color-neutral-30);border-radius:2.5rem;margin:20px auto 32px;min-height:4px;width:60px}.myinterview-widget-slider-modal--open{animation:none;background-color:#0009;visibility:visible}.myinterview-widget-slider-modal--open .myinterview-widget-slider-modal__bottom{height:80%;min-height:80%;visibility:visible}@keyframes close-modal{0%{background-color:#0009}to{background-color:#0000;visibility:hidden}}.myinterview-widget-permissions__wrapper{display:flex;flex:1;flex-direction:column;margin:0 auto;max-height:100%;max-width:480px;overflow:auto;padding:0 20px 20px;width:100%}@media (min-width:1200px){.myinterview-widget-permissions__wrapper{padding:0 20px}}.myinterview-widget-permissions__icon-wrapper{align-items:center;background-color:#eff6fe;border-radius:50%;color:var(--color-primary);display:flex;justify-content:center;margin:0 auto 20px;min-height:70px;min-width:70px}.myinterview-widget-permissions__icon-wrapper svg{height:32px;width:32px}@media (min-width:1200px){.myinterview-widget-permissions__icon-wrapper{display:none!important}}.myinterview-widget-permissions__title{margin-bottom:20px;text-align:center}@media (min-width:1200px){.myinterview-widget-permissions__title{margin-bottom:15px}}.myinterview-widget-permissions__sub-title{margin-bottom:10px}.myinterview-widget-permissions__steps-wrapper{margin-bottom:15px;padding:0 20px}.myinterview-widget-permissions__step{font-size:14px;list-style:decimal;margin-bottom:10px}.myinterview-widget-permissions__step .text--bold{font-weight:700}.myinterview-widget-permissions__step .safari__key{background-color:var(--color-neutral-20);border-radius:2px;padding:2px 4px}.myinterview-widget-permissions__button{margin-top:auto;min-height:45px}.myinterview-widget-question{margin-bottom:10px;position:relative}.myinterview-widget-question>*{position:relative;z-index:1}.myinterview-widget-question__question{letter-spacing:.5px;margin-bottom:6px}.myinterview-widget-question__description{letter-spacing:.5px}.myinterview-widget-question__question-parameters{align-items:center;display:inline-flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}.myinterview-widget-question__question-parameters>*{white-space:nowrap}.myinterview-widget-questions-list{display:none}@media (min-width:1200px){.myinterview-widget-questions-list{display:flex;flex-direction:column;overflow-y:auto;padding:0;position:relative}.myinterview-widget-questions-item{align-items:center;border-radius:0 4px 4px 0;display:flex;gap:20px;letter-spacing:.5px;max-width:100%;min-height:90px;overflow:hidden;padding:20px;position:relative}.myinterview-widget-questions-item__number{align-items:center;background-color:var(--color-neutral-20);border-radius:50%;color:var(--color-neutral-90);display:flex;height:38px;justify-content:center;min-width:38px}.myinterview-widget-questions-item__number--icon{background-color:var(--color-white);color:var(--color-primary)}.myinterview-widget-questions-item__wrapper{flex:1;overflow:hidden}.myinterview-widget-questions-item__question{display:flex;flex-direction:column;gap:2px;overflow:hidden}.myinterview-widget-questions-item__duration-wrapper{align-items:center;color:var(--color-neutral-50);display:flex;font-size:12px;gap:5px;line-height:20px}.myinterview-widget-questions-item__duration-wrapper *{font-size:12px;line-height:20px}.myinterview-widget-questions-item__duration-wrapper svg{width:15px}.myinterview-widget-questions-item--active{background-color:#f7fbff}.myinterview-widget-questions-item--active:before{background-color:var(--color-primary);content:\"\";height:100%;left:0;position:absolute;width:3px}.myinterview-widget-questions-item--active .myinterview-widget-questions-item__number{background-color:var(--color-white);border:1px solid var(--color-primary);color:var(--color-primary)}}.myinterview-widget-upload{align-items:center;background-color:var(--color-white);border-radius:20px;display:flex;flex-direction:column;height:100%;justify-content:center;margin:auto;max-height:500px;overflow:hidden;padding:40px;text-align:center;width:100%}@media (min-width:1200px){.myinterview-widget-upload{margin:0;min-height:360px}}.myinterview-widget-upload__icon{align-items:center;background-color:#5aa4f5;border:12px solid #d7e8fb;border-radius:50%;color:var(--color-white);display:flex;height:110px;justify-content:center;margin-bottom:30px;min-height:110px;position:relative;width:110px}.myinterview-widget-upload__icon:before{background-color:initial;border:12px solid #99c6f8;border-radius:50%;content:\"\";height:100%;position:absolute;width:100%}.myinterview-widget-upload__title{margin-bottom:20px}.myinterview-widget-upload__sub-title{margin-bottom:40px;white-space:pre-line}.myinterview-widget-upload__progress{margin-bottom:10px;width:100%}.myinterview-widget-upload__time-left{align-items:center;color:var(--color-neutral-90);display:flex;gap:10px}.myinterview-widget-top-tips{background-color:var(--color-white);color:var(--color-neutral-90);display:flex;flex-direction:column;padding:50px}.myinterview-widget-top-tips__title{margin-bottom:20px}.myinterview-widget-top-tips__tips{margin-bottom:10px;padding:0 15px}.myinterview-widget-top-tips li{margin-bottom:10px}.myinterview-widget__practice-mode{border-radius:2.5rem;height:36px;padding:5px 15px}.myinterview-widget__practice-mode,.myinterview-widget__recording-button{align-items:center;background-color:var(--color-white);display:flex;justify-content:center}.myinterview-widget__recording-button{border:1px solid var(--color-neutral-30);border-radius:50%;height:64px;width:64px}.myinterview-widget__recording-button-inner{background-color:var(--color-error);border-radius:50%;height:52px;width:52px}.myinterview-widget__recording-button-inner--stop{border-radius:2px;height:16px;width:16px}.myinterview-widget__question-number{display:flex;gap:5px;position:absolute}@media (min-width:1200px){.myinterview-widget__question-number{margin-left:10px}}.myinterview-widget__question-number-track{direction:ltr;display:flex;gap:5px}.myinterview-widget__question-duration{align-items:center;display:flex;gap:8px}.myinterview-widget__question-duration svg{height:1em;width:1em}.myinterview-widget__progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:2.5rem;height:15px;overflow:hidden;width:100%}.myinterview-widget__progress::-webkit-progress-bar{background-color:#e7f1ef}.myinterview-widget__progress::-webkit-progress-value{background-color:var(--color-success);transition:.3s}.myinterview-widget__dot-separator{background-color:currentColor;border-radius:50%;height:3px;width:3px}.myinterview-widget-welcome-page{display:flex;flex-direction:column;gap:20px;height:100%;margin:30px 0;max-height:100%;overflow:auto;position:relative}@media (min-width:1200px){.myinterview-widget-welcome-page{padding:0 20px}}.myinterview-widget-welcome-page__text-wrapper{display:flex;flex-direction:column;position:relative}.myinterview-widget-welcome-page__text{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:pre-line}.myinterview-widget-welcome-page__text--closed{-webkit-line-clamp:4;line-clamp:4}.myinterview-widget-welcome-page__toggle{margin-left:auto}.myinterview-widget-welcome-page__action-buttons{display:flex;gap:20px;justify-content:space-between}.myinterview-widget-welcome-page__continue-button{flex:1;max-width:250px;min-width:fit-content}.myinterview-widget-welcome-page__top-tips-button{margin:0 auto}.myinterview-widget-welcome-page__top-tips{align-items:center;display:flex;gap:10px;justify-content:center}.myinterview-modal-wrapper{background-color:var(--color-white);border-radius:0;height:100vh;max-height:100%;max-width:500px;opacity:0;pointer-events:none;top:calc(50% + 40px);transition:top .2s ease-out,opacity .2s ease-out;width:100vw}@media (min-width:480px){.myinterview-modal-wrapper{border-radius:10px;height:auto}}.myinterview-modal-wrapper--opened{opacity:1;pointer-events:all;top:50%}.myinterview-modal-wrapper__close-btn{color:var(--color-neutral-90)}.myinterview-widget-assessment{--myinterview-widget-assessment-spacing:20px;background-color:var(--color-white);display:flex;flex:1;flex-direction:column;justify-content:space-between;overflow:auto;padding:var(--myinterview-widget-wrapper-padding)}@media (min-width:1200px){.myinterview-widget-assessment{--myinterview-widget-assessment-spacing:7px;align-items:center}.myinterview-widget-assessment .myinterview-widget-question{display:none}}.myinterview-widget-assessment .myinterview-widget__question-number{align-self:flex-start;margin-bottom:var(--myinterview-widget-assessment-spacing);position:relative}.myinterview-widget-assessment__countdown-wrapper{display:flex;height:100%;justify-content:center;left:0;padding:var(--myinterview-widget-wrapper-padding);pointer-events:none;position:absolute;top:0;width:100%}.myinterview-widget-assessment__countdown-wrapper .myinterview-widget__countdown-mobile{background-color:var(--color-neutral-10);position:sticky;top:0}.myinterview-widget-assessment__instructions{margin-bottom:var(--myinterview-widget-assessment-spacing);z-index:1}@media (min-width:1200px){.myinterview-widget-assessment__instructions{text-align:center}}.myinterview-widget-assessment__free-text,.myinterview-widget-assessment__multi-select,.myinterview-widget-assessment__single-select{align-items:center;display:flex;flex:1;flex-direction:column;margin-bottom:var(--myinterview-widget-assessment-spacing);position:relative;width:100%;z-index:1}@media (min-width:1200px){.myinterview-widget-assessment__free-text,.myinterview-widget-assessment__multi-select,.myinterview-widget-assessment__single-select{width:550px}}.myinterview-widget-assessment__input{border:.5px solid var(--color-neutral-40);border-radius:4px;flex:1;min-height:100px;padding:15px 15px 30px;resize:none;width:100%}.myinterview-widget-assessment__input::placeholder{color:var(--color-neutral-40)}.myinterview-widget-assessment__options-form{display:flex;flex-direction:column;width:100%}@media (min-width:1200px){.myinterview-widget-assessment__options-form{margin:auto 0}}.myinterview-widget-assessment__option{align-items:center;cursor:pointer;display:flex;gap:var(--myinterview-widget-assessment-spacing);padding:var(--myinterview-widget-assessment-spacing) 0;position:relative}.myinterview-widget-assessment__option:before{background-color:var(--color-white);border-radius:5px;content:\"\";height:100%;left:0;opacity:.1;pointer-events:none;position:absolute;top:0;transition:background-color .1s;width:100%;z-index:-1}.myinterview-widget-assessment__option:active:before{background-color:var(--color-primary)}.myinterview-widget-assessment__option:not(:last-child){border-bottom:1px solid var(--color-neutral-20)}.myinterview-widget-assessment__checkmark{align-items:center;border:1px solid var(--color-neutral-60);border-radius:50%;display:flex;flex-shrink:0;height:16px;justify-content:center;overflow:hidden;padding:1px;pointer-events:none;position:relative;width:16px}.myinterview-widget-assessment__checkmark svg{transform:scale(0);-webkit-transform:scale(0);transition:.15s ease-out}.myinterview-widget-assessment__checkmark--selected{border:1px solid var(--color-primary)}.myinterview-widget-assessment__checkmark--selected svg{transform:scale(1);-webkit-transform:scale(1)}.myinterview-widget-assessment .myinterview-widget__characters-limit{bottom:10px;position:absolute;right:15px}.myinterview-widget-assessment__submit-button{min-height:45px;width:100%}@media (min-width:1200px){.myinterview-widget-assessment__submit-button{width:auto}}";
|
|
48080
48555
|
|
|
48081
48556
|
const RotateScreenIcon = () => (React__default.createElement("svg", { width: "824", height: "800", viewBox: "0 0 824 800", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
48082
48557
|
React__default.createElement("rect", { x: "2.5", y: "2.5", width: "385", height: "795", rx: "37.5", stroke: "currentColor", strokeWidth: "5" }),
|