1(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{ 2 3/***/ "+HWN": 4/***/ (function(module, exports) { 5 6module.exports = "/a4fae0aba0a32e017559c0a73d70e53d.png"; 7 8/***/ }), 9 10/***/ "+Kbx": 11/***/ (function(module, exports, __webpack_require__) { 12 13// extracted by mini-css-extract-plugin 14module.exports = {"actions":"src-components-ClipActions-ClipActions__actions--aJ1fh","clipActionsItem":"src-components-ClipActions-ClipActions__clipActionsItem--ES7X7","disable":"src-components-ClipActions-ClipActions__disable--G3M1H","newBlank":"src-components-ClipActions-ClipActions__newBlank--BOWG+","newUpload":"src-components-ClipActions-ClipActions__newUpload--oYDwU","newFolder":"src-components-ClipActions-ClipActions__newFolder--7YAEF"}; 15 16/***/ }), 17 18/***/ "+n12": 19/***/ (function(module, __webpack_exports__, __webpack_require__) { 20 21"use strict"; 22/* WEBPACK VAR INJECTION */(function(Buffer) {/* unused harmony export markdownEscape */ 23/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "p", function() { return slugify; }); 24/* unused harmony export rus2lat */ 25/* unused harmony export debounce */ 26/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "i", function() { return getBlankClip; }); 27/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "j", function() { return getBlankClipImage; }); 28/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return blankImageUrl; }); 29/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return dragImageUrl; }); 30/* unused harmony export browserNotification */ 31/* unused harmony export getImageDataFromUrl */ 32/* unused harmony export getImageDataWithMimeFromUrl */ 33/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return getBase64FromUrl; }); 34/* unused harmony export getDataUrlFromUrl */ 35/* unused harmony export getBase64WithMimeFromUrl */ 36/* unused harmony export getBase64AndMimeFromUrl */ 37/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return getBase64; }); 38/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return downloadAfterSave; }); 39/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "l", function() { return getClipsFromParentFolder; }); 40/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "k", function() { return getClipsAndDownloadThem; }); 41/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return downloadClips; }); 42/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return extensionUpdateUserdata; }); 43/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return extensionSetCurrentUser; }); 44/* unused harmony export extensionMessage */ 45/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "n", function() { return isExtInstalled; }); 46/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "o", function() { return isInstalled; }); 47/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "m", function() { return getOS; }); 48/* harmony import */ var jszip__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("xOOu"); 49/* harmony import */ var jszip__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jszip__WEBPACK_IMPORTED_MODULE_0__); 50/* harmony import */ var file_saver__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("Iab2"); 51/* harmony import */ var file_saver__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(file_saver__WEBPACK_IMPORTED_MODULE_1__); 52/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("vDqi"); 53/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_2__); 54/* harmony import */ var _config_constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("YwrL"); 55/* harmony import */ var _editor_mods_constants__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("N3ss"); 56/* harmony import */ var _app_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("n8Gs"); 57/* harmony import */ var jspdf__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("i680"); 58 59 60 61 62 63 64 65const markdownEscape = (string, skips = []) => { 66 // https://github.com/kemitchell/markdown-escape.js 67 // https://www.npmjs.com/package/markdown-escape 68 69 var replacements = [[/\*/g, '\\*', 'asterisks'], [/#/g, '\\#', 'number signs'], [/\//g, '\\/', 'slashes'], [/\(/g, '\\(', 'parentheses'], [/\)/g, '\\)', 'parentheses'], [/\[/g, '\\[', 'square brackets'], [/\]/g, '\\]', 'square brackets'], [/</g, '<', 'angle brackets'], [/>/g, '>', 'angle brackets'], [/_/g, '\\_', 'underscores'], [/`/g, '\\`', 'codeblocks']]; 70 return replacements.reduce(function (str, replacement) { 71 var name = replacement[2]; 72 return name && skips.indexOf(name) !== -1 ? str : str.replace(replacement[0], replacement[1]); 73 }, string); 74}; 75function slugify(string) { 76 const a = 'à áâäæãåÄÄÄ Ã§ÄÄÄÄèéêëÄÄÄÄÄǵḧîïÃīįìÅḿñÅǹÅôöòóÅøÅõÅá¹ÅÅÃÅÅ¡ÅÈÅ¥ÈûüùúūÇůűųáºáºÃ¿Ã½Å¾ÅºÅ¼Â·/_,:;'; 77 const b = 'aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------'; 78 const p = new RegExp(a.split('').join('|'), 'g'); 79 return rus2lat(string.toString()).toLowerCase().replace(/\s+/g, '-') // Replace spaces with - 80 .replace(p, c => b.charAt(a.indexOf(c))) // Replace special characters 81 .replace(/&/g, '-and-') // Replace & with 'and' 82 .replace(/[^\w\-]+/g, '') // Remove all non-word characters 83 .replace(/\-\-+/g, '-') // Replace multiple - with single - 84 .replace(/^-+/, '') // Trim - from start of text 85 .replace(/-+$/, ''); // Trim - from end of text 86} 87function rus2lat(str) { 88 const ru = { 89 'а': 'a', 90 'б': 'b', 91 'в': 'v', 92 'г': 'g', 93 'д': 'd', 94 'е': 'e', 95 'Ñ': 'e', 96 'ж': 'j', 97 'з': 'z', 98 'и': 'i', 99 'к': 'k', 100 'л': 'l', 101 'м': 'm', 102 'н': 'n', 103 'о': 'o', 104 'п': 'p', 105 'Ñ': 'r', 106 'Ñ': 's', 107 'Ñ': 't', 108 'Ñ': 'u', 109 'Ñ': 'f', 110 'Ñ ': 'h', 111 'Ñ': 'c', 112 'Ñ': 'ch', 113 'Ñ': 'sh', 114 'Ñ': 'shch', 115 'Ñ': 'y', 116 'Ñ': 'e', 117 'Ñ': 'u', 118 'Ñ': 'ya' 119 }, 120 n_str = []; 121 str = str.replace(/[ÑÑ]+/g, '').replace(/й/g, 'i'); 122 for (var i = 0; i < str.length; ++i) { 123 n_str.push(ru[str[i]] || ru[str[i].toLowerCase()] == undefined && str[i] || ru[str[i].toLowerCase()].toUpperCase()); 124 } 125 return n_str.join(''); 126} 127function debounce(fn, time) { 128 let timeoutId; 129 return wrapper; 130 function wrapper(...args) { 131 if (timeoutId) { 132 clearTimeout(timeoutId); 133 } 134 timeoutId = setTimeout(() => { 135 timeoutId = null; 136 fn(...args); 137 }, time); 138 } 139} 140function getBlankClip(userId, w = 400, h = 400) { 141 return { 142 clipId: 'blank', 143 downloadUrl: blankImageUrl(w, h), 144 backgroundUrl: blankImageUrl(w, h), 145 width: w, 146 height: h, 147 markers: [], 148 privacy: 'private', 149 ownedBy: userId 150 }; 151} 152function getBlankClipImage(w, h) { 153 const img = document.createElement('img'); 154 const c = document.createElement('canvas'); 155 c.setAttribute("width", w + 'px'); 156 c.setAttribute("height", h + 'px'); 157 const ctx = c.getContext("2d"); 158 ctx.fillStyle = "white"; 159 ctx.fillRect(0, 0, w, h); 160 let data = c.toDataURL("image/png"); 161 return data.split(',')[1]; 162} 163function blankImageUrl(w = 400, h = 400) { 164 return `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='${w}' height='${h}' fill='white' /></svg>`; 165} 166function dragImageUrl(count) { 167 return `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' ` + `width='73px' height='46px' viewBox='0 0 73 46' version='1.1' style='background: transparent;'><defs>` + `<filter x='-18.5%25' y='-31.6%25' width='136.9%25' height='163.2%25' filterUnits='objectBoundingBox' id='filter-1'><feOffset dx='0' dy='2' in='SourceAlpha' ` + `result='shadowOffsetOuter1'/><feGaussianBlur stdDeviation='2' in='shadowOffsetOuter1' result='shadowBlurOuter1'/><feColorMatrix ` + `values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2984866
1677 0' type='matrix' in='shadowBlurOuter1' result='shadowMatrixOuter1'/><feMerge><feMergeNode in='shadowMatrixOuter1'/><feMergeNode in='SourceGraphic'/></feMerge></filter></defs><g id='Dashboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>` + `<g id='Darboard-implements-V1' transform='translate(-3303.000000, -1918.000000)'><g id='ic-dragndrop' filter='url(%23filter-1)' ` + `transform='translate(3307.000000, 1920.000000)'><g id='thumbnail'><rect id='bounds' fill='%23FFFFFF' fill-rule='nonzero' x='0' y='0' width='46' height='38' ` + `rx='5'/><rect id='img-thumbnail' stroke-opacity='0.21' stroke='%23171819' fill-opacity='0.13' fill='%231C436E' x='3.5' y='3.5' width='40' height='26' rx='5'/></g><g id='badge' transform='translate(37.000000, 5.000000)'><circle id='badge-bounds' fill='%232D8EFF' cx='14' cy='14' r='14'/><text id='label' ` + `font-family='MuseoSans' font-size='12' font-weight='normal' letter-spacing='-0.08571427' fill='%23F2F4F7'><tspan y='18' text-anchor='middle' x='14'>${count}</tspan></text></g></g></g></g></svg>`; 168} 169function browserNotification(text) { 170 if (!("Notification" in window)) alert(text);else if (Notification.permission === "granted") new Notification(text);else if (Notification.permission !== "denied") { 171 Notification.requestPermission().then(function (permission) { 172 if (permission === "granted") new Notification(text); 173 }); 174 } 175} 176async function getImageDataFromUrl(url) { 177 const img = document.createElement("img"); 178 img.setAttribute("crossorigin", "anonymous"); 179 const c = document.createElement("canvas"); 180 let src = Object(_app_utils__WEBPACK_IMPORTED_MODULE_5__[/* getViewableImageUrl */ "d"])(url); 181 img.src = src; 182 const getImageDataOnLoad = () => new Promise(ok => { 183 const loaded = () => { 184 c.setAttribute("width", img.width); 185 c.setAttribute("height", img.height); 186 const ctx = c.getContext('2d'); 187 ctx.drawImage(img, 0, 0); 188 ok(c.toDataURL()); 189 }; 190 img.addEventListener("load", loaded); 191 }); 192 return await getImageDataOnLoad(); 193} 194async function getImageDataWithMimeFromUrl(url) { 195 const img = document.createElement("img"); 196 img.setAttribute("crossorigin", "anonymous"); 197 const c = document.createElement("canvas"); 198 let src = url; 199 img.src = src; 200 const getImageDataOnLoad = () => new Promise(ok => { 201 const loaded = () => { 202 c.setAttribute("width", img.width); 203 c.setAttribute("height", img.height); 204 const ctx = c.getContext('2d'); 205 ctx.drawImage(img, 0, 0); 206 const data = c.toDataURL(); 207 const b64 = data.replace(/^data:.+;base64,/, ''); 208 const mime = 'image/png'; 209 ok([b64, mime]); 210 }; 211 img.addEventListener("load", loaded); 212 }); 213 return await getImageDataOnLoad(); 214} 215async function getBase64FromUrl(downloadUrl) { 216 let src = Object(_app_utils__WEBPACK_IMPORTED_MODULE_5__[/* getViewableImageUrl */ "d"])(downloadUrl); 217 let b64; 218 await fetch(src, { 219 // mode: 'cors' 220 }).then(r => r.blob()).then(blob => { 221 return new Promise((resolve, reject) => { 222 let reader = new FileReader(); 223 reader.onload = function () { 224 b64 = reader.result.replace(/^data:.+;base64,/, ''); 225 resolve(b64); 226 // console.log(`${b64.slice(0,20)}...${b64.slice(-20)}`); 227 }; 228 reader.readAsDataURL(blob); 229 }); 230 }); 231 return b64; 232} 233async function getDataUrlFromUrl(downloadUrl) { 234 let src = Object(_app_utils__WEBPACK_IMPORTED_MODULE_5__[/* getViewableImageUrl */ "d"])(downloadUrl); 235 let dataUrl; 236 await fetch(src, { 237 // mode: 'cors' 238 }).then(r => r.blob()).then(blob => { 239 return new Promise((resolve, reject) => { 240 let reader = new FileReader(); 241 reader.readAsDataURL(blob); 242 reader.onload = function () { 243 dataUrl = reader.result; 244 resolve(dataUrl); 245 }; 246 }); 247 }); 248 return dataUrl; 249} 250async function getBase64WithMimeFromUrl(downloadUrl) { 251 downloadUrl = downloadUrl.includes('drive.google') ? downloadUrl.replace("&export=download", "&export=view") : downloadUrl; 252 let src = Object(_app_utils__WEBPACK_IMPORTED_MODULE_5__[/* getViewableImageUrl */ "d"])(downloadUrl); 253 let [b64, mime] = await fetch(src, { 254 // mode: 'cors' 255 }).then(r => r.blob()).then(blob => { 256 return new Promise((resolve, reject) => { 257 let reader = new FileReader(); 258 reader.onload = function () { 259 const b64 = reader.result.replace(/^data:.+;base64,/, ''); 260 resolve([b64, 'image/png']); 261 // console.log(`${b64.slice(0,20)}...${b64.slice(-20)}`); 262 };
263 reader.readAsDataURL(blob); 264 }); 265 }); 266 return [b64, mime]; 267} 268async function getBase64AndMimeFromUrl(downloadUrl) { 269 downloadUrl = Object(_app_utils__WEBPACK_IMPORTED_MODULE_5__[/* getViewableImageUrl */ "d"])(downloadUrl); 270 return await fetch(downloadUrl).then(r => r.blob()).then(blob => { 271 return new Promise((resolve, reject) => { 272 let reader = new FileReader(); 273 reader.onload = function () { 274 const index = reader.result.indexOf(','); 275 const mime = reader.result.split(';')[0].split(':')[1].split(',')[0]; 276 const b64 = reader.result.slice(index + 1); 277 resolve([b64, mime]); 278 // console.log(`${b64.slice(0,20)}...${b64.slice(-20)}`); 279 }; 280 reader.readAsDataURL(blob); 281 }); 282 }).catch(e => { 283 console.log(e); 284 }); 285 // return await getBase64(downloadUrl) 286} 287async function getBase64(url) { 288 return axios__WEBPACK_IMPORTED_MODULE_2___default.a.get(url, { 289 responseType: 'arraybuffer' 290 }).then(response => { 291 const mime = response.headers["content-type"]; 292 const b64 = Buffer.from(response.data, 'binary').toString('base64'); 293 return [b64, mime]; 294 }); 295} 296function downloadAfterSave(base64, title, ext) { 297 let filename = title.replace("/", "_"); 298 if (ext === 'pdf') { 299 var img = new Image(); 300 img.src = base64; 301 img.onload = function () { 302 const doc = new jspdf__WEBPACK_IMPORTED_MODULE_6__[/* jsPDF */ "b"]({ 303 orientation: "landscape", 304 unit: "px", 305 hotfixes: ["px_scaling"], 306 format: [this.width, this.height] 307 }); 308 doc.addImage(img, 'PNG', 0, 0, this.width, this.height); 309 doc.save(`${filename}.${ext}`); 310 }; 311 } else { 312 let a = document.createElement("a"); 313 a.href = base64; 314 a.download = `${filename}.${ext}`; 315 a.click(); 316 } 317} 318async function getClipsFromParentFolder(parentFolderIdQuery) { 319 let url = `${_config_constants__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"].apiUrl}/clips?&parentFolderId=${parentFolderIdQuery}`; 320 const requestOptions = { 321 method: 'get', 322 url: url 323 }; 324 let res; 325 try { 326 res = await axios__WEBPACK_IMPORTED_MODULE_2___default()(requestOptions); 327 return res.data; 328 } catch (e) { 329 console.error("load list of clips", e); 330 return; 331 } 332} 333async function getClipsAndDownloadThem(parentFolderIdQuery, setShowLoader, title) { 334 if (setShowLoader) { 335 setShowLoader(true); 336 } 337 let url = `${_config_constants__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"].apiUrl}/clips?&parentFolderId=${parentFolderIdQuery}`; 338 const requestOptions = { 339 method: 'get', 340 url: url 341 }; 342 let res; 343 try { 344 res = await axios__WEBPACK_IMPORTED_MODULE_2___default()(requestOptions); 345 } catch (e) { 346 console.error("load list of clips", e); 347 return; 348 } 349 return downloadClips(res.data, setShowLoader, title); 350 // return res.data; 351} 352async function downloadClips(clips, setShowLoader, title, extension) { 353 if (setShowLoader) { 354 setShowLoader(true); 355 } 356 if (clips.length == 1) { 357 //if is 1 clip, download it as png/jpg/pdf 358 let filename = clips[0].title.replace("/", "_"); 359 let ext = extension || clips[0].mimeType.split('/').pop(); 360 if (ext === 'pdf') { 361 var img = new Image(); 362 img.src = await getDataUrlFromUrl(clips[0].downloadUrl); 363 img.onload = function () { 364 const doc = new jspdf__WEBPACK_IMPORTED_MODULE_6__[/* jsPDF */ "b"]({ 365 orientation: "landscape", 366 unit: "px", 367 hotfixes: ["px_scaling"], 368 format: [this.width, this.height] 369 }); 370 doc.addImage(img, 'PNG', 0, 0, this.width, this.height); 371 doc.save(`${filename}.${ext}`); 372 }; 373 } else { 374 let base64; 375 base64 = await getBase64FromUrl(clips[0].downloadUrl); 376 let a = document.createElement("a"); 377 a.href = `data:image/${ext};base64,` + base64; 378 379 // let ext = /[.]/.exec(filename) ? /[^.]+$/.exec(filename) : undefined; 380 381 // if (ext == undefined) { 382 // filename += '.png'; 383 // } else if (ext[0] != 'png' && ext[0] != 'jpg' && ext[0] != clips[0].mimeType.split('/').pop()) { 384 // filename += '.png'; 385 // } 386 387 a.download = `${filename}.${ext}`; 388 a.click(); 389 } 390 if (setShowLoader) { 391 setShowLoader(false); 392 } 393 return; 394 } else { 395 //if is more than 1 clip, download it as zip 396 return exportZip(clips, setShowLoader, title); 397 } 398} 399function checkIfNameAlreadyExist(clipsTitleList, clipTitle) { 400 let exist = true; 401 let title = clipTitle; 402 let i = 1; 403 do { 404 if (clipsTitleList.includes(title)) { 405 title = `${clipTitle}(${i})`; 406 i++; 407 } else { 408 exist = false;
409 } 410 } while (exist); 411 return title; 412} 413function exportZip(clips, setShowLoader, title) { 414 const zip = jszip__WEBPACK_IMPORTED_MODULE_0___default()(); 415 let clipsTitleList = [clips[0].title]; 416 clips.forEach((clip, i) => { 417 const downloadUrl = Object(_app_utils__WEBPACK_IMPORTED_MODULE_5__[/* getViewableImageUrl */ "d"])(clip.downloadUrl); 418 let blob = fetch(downloadUrl).then(resp => resp.blob()); 419 let filename; 420 if (i > 0) { 421 filename = checkIfNameAlreadyExist(clipsTitleList, clip.title.replace("/", "_")); 422 clipsTitleList.push(filename); 423 } else { 424 filename = clip.title.replace("/", "_"); 425 } 426 let ext = /[.]/.exec(filename) ? /[^.]+$/.exec(filename) : undefined; 427 if (ext == undefined) { 428 filename += '.png'; 429 } else if (ext[0] != 'png' && ext[0] != 'jpg' && ext[0] != clip.mimeType.split('/').pop()) { 430 filename += '.png'; 431 } 432 zip.file(filename, blob); 433 }); 434 zip.generateAsync({ 435 type: 'blob' 436 }).then(zipFile => { 437 const fileName = `${title}.zip`; 438 file_saver__WEBPACK_IMPORTED_MODULE_1___default.a.saveAs(zipFile, fileName); 439 return setShowLoader(false); 440 }); 441} 442function extensionUpdateUserdata(userdata) { 443 if (typeof chrome !== 'undefined' && chrome.runtime) { 444 const action = "update_userdata"; 445 const id = localStorage.getItem("screenclipExtensionId"); 446 const message = { 447 action, 448 data: { 449 ...userdata 450 } 451 }; 452 if (id) { 453 chrome.runtime.sendMessage(id, message); 454 } 455 } 456} 457function extensionSetCurrentUser(userdata) { 458 if (typeof chrome !== 'undefined' && chrome.runtime) { 459 const action = "setCurrentUser"; 460 const id = localStorage.getItem("screenclipExtensionId"); 461 const message = { 462 action, 463 data: { 464 ...userdata 465 } 466 }; 467 if (id) { 468 chrome.runtime.sendMessage(id, message); 469 } 470 } 471} 472function extensionMessage(action = 'infoFromApp', data) { 473 if (typeof chrome !== 'undefined' && chrome.runtime) { 474 const id = localStorage.getItem("screenclipExtensionId"); 475 const message = { 476 action, 477 data 478 }; 479 if (id) { 480 chrome.runtime.sendMessage(id, message); 481 } 482 } 483} 484function isExtInstalled(cb) { 485 if (typeof chrome !== 'undefined' && chrome.runtime) { 486 const id = localStorage.getItem("screenclipExtensionId"); 487 const action = "is_installed"; 488 const message = { 489 action, 490 data: {} 491 }; 492 if (id) { 493 chrome.runtime.sendMessage(id, message, resp => cb(resp)); 494 } 495 ; 496 } 497} 498 499// ignores any rejects except if all promises rejects 500Promise.firstResolve = function (promises) { 501 return new Promise(function (fulfil, reject) { 502 var rejectCount = 0; 503 promises.forEach(function (promise) { 504 promise.then(fulfil, () => { 505 rejectCount++; 506 if (rejectCount == promises.length) { 507 reject('All promises were rejected'); 508 } 509 }); 510 }); 511 }); 512}; 513function isInstalled(callback) { 514 const id = "agfmhdblakkkljpdgpamkbfblikonemn"; // 515 const id2 = "jmjbgcjbgmcfgbgikmbdioggjlhjegpp"; 516 const id3 = "clbancanfkffnnlgapbiajkpedgcfllk"; 517 let p1 = new Promise(function (resolve, reject) { 518 let img = new Image(); 519 img.src = "chrome-extension://" + id + "/insides/permanent/axis.png"; 520 img.onload = () => resolve(); 521 img.onerror = () => reject(); 522 }); 523 let p2 = new Promise(function (resolve, reject) { 524 let img = new Image(); 525 img.src = "chrome-extension://" + id2 + "/insides/permanent/axis.png"; 526 img.onload = () => resolve(); 527 img.onerror = () => reject(); 528 }); 529 let p3 = new Promise(function (resolve, reject) { 530 let img = new Image(); 531 img.src = "chrome-extension://" + id3 + "/insides/permanent/axis.png"; 532 img.onload = () => resolve(); 533 img.onerror = () => reject(); 534 }); 535 Promise.firstResolve([p1, p2, p3]).then(res => callback(true)).catch(err => callback(false)); 536} 537// chrome-extension://ibipnppgoenchocbnmoipgkocedkfmdh/insides/permanent/axis.png 538 539function getOS() { 540 var _window$navigator, _window$navigator$use; 541 const userAgent = window.navigator.userAgent, 542 platform = ((_window$navigator = window.navigator) === null || _window$navigator === void 0 ? void 0 : (_window$navigator$use = _window$navigator.userAgentData) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.platform) || window.navigator.platform, 543 macosPlatforms = ['macOS', 'Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'], 544 windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'], 545 iosPlatforms = ['iPhone', 'iPad', 'iPod']; 546 let os = null; 547 if (macosPlatforms.indexOf(platform) !== -1) { 548 os = 'macOS'; 549 } else if (iosPlatforms.indexOf(platform) !== -1) { 550 os = 'iOS'; 551 } else if (windowsPlatforms.indexOf(platform) !== -1) { 552 os = 'windows'; 553 } else if (/Android/.test(userAgent)) { 554 os = 'android'; 555 } else if (/Linux/.test(platform)) { 556 os = 'linux'; 557 } 558 return os; 559} 560/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__("tjlA").Buffer)) 561
562/***/ }), 563 564/***/ 0: 565/***/ (function(module, exports) { 566 567/* (ignored) */ 568 569/***/ }), 570 571/***/ "0jGQ": 572/***/ (function(module, exports) { 573 574module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='a' width='140%25' height='140%25' x='-20%25' y='-20%25' filterUnits='objectBoundingBox'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='1'/%3E%3CfeColorMatrix in='shadowBlurOuter1' result='shadowMatrixOuter1' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.21 0'/%3E%3CfeMerge%3E%3CfeMergeNode in='shadowMatrixOuter1'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cfilter id='b' width='188.9%25' height='174.9%25' x='-44.4%25' y='-39.1%25' filterUnits='objectBoundingBox'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='1'/%3E%3CfeColorMatrix in='shadowBlurOuter1' result='shadowMatrixOuter1' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.214758832 0'/%3E%3CfeMerge%3E%3CfeMergeNode in='shadowMatrixOuter1'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='32' height='32'/%3E%3Cg fill='%23171819' stroke='%23FFF' filter='url(%23a)' transform='translate(2 10)'%3E%3Cpath d='M11.5,-0.5 L11.5,8.5 L20.5,8.5 L20.5,11.5 L11.5,11.5 L11.5,20.5 L8.5,20.5 L8.5,11.5 L-0.5,11.5 L-0.5,8.5 L8.5,8.5 L8.5,-0.5 L11.5,-0.5 Z'/%3E%3C/g%3E%3Cg filter='url(%23b)' transform='translate(20 1.311)'%3E%3Cpath fill='%23FFF' d='M4.5,10.6888694 C6.709139,10.6888694 8.5,8.8980084 8.5,6.6888694 C8.5,5.21611007 7.16666667,3.21611007 4.5,0.688869399 C1.83333333,3.21611007 0.5,5.21611007 0.5,6.6888694 C0.5,8.8980084 2.290861,10.6888694 4.5,10.6888694 Z' opacity='.5'/%3E%3Cpath fill='%23000' fill-rule='nonzero' stroke='%23FFF' d='M5.04245009,-0.174044094 C8.05898839,2.65444916 9.5,4.92601377 9.5,6.6888694 C9.5,8.06958127 8.94035594,9.31958127 8.03553391,10.2244033 C7.13071187,11.1292253 5.88071187,11.6888694 4.5,11.6888694 C3.11928813,11.6888694 1.86928813,11.1292253 0.964466094,10.2244033 C0.0596440627,9.31958127 -0.5,8.06958127 -0.5,6.6888694 C-0.5,4.92601377 0.941011605,2.65444916 3.95754991,-0.174044094 L5.04245009,-0.174044094 Z M4.3387259,2.24823823 C2.48546558,4.13394483 1.5,5.62128287 1.5,6.6888694 C1.5,7.51729652 1.83578644,8.26729652 2.37867966,8.81018974 C2.92157288,9.35308296 3.67157288,9.6888694 4.5,9.6888694 C5.32842712,9.6888694 6.07842712,9.35308296 6.62132034,8.81018974 C7.16421356,8.26729652 7.5,7.51729652 7.5,6.6888694 C7.5,5.61970731 6.49640125,4.13493271 4.3387259,2.24823823 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E" 575 576/***/ }), 577 578/***/ "0msA": 579/***/ (function(module, exports, __webpack_require__) { 580 581// extracted by mini-css-extract-plugin 582module.exports = {"stepsListContaier":"src-components-WelcomeBack-StepsList-StepsList__stepsListContaier--s4aGp","logoContainer":"src-components-WelcomeBack-StepsList-StepsList__logoContainer--bH+f1","stepsContainer":"src-components-WelcomeBack-StepsList-StepsList__stepsContainer--QX7W+","step":"src-components-WelcomeBack-StepsList-StepsList__step--+51+3","stepDisabled":"src-components-WelcomeBack-StepsList-StepsList__stepDisabled--jjLtA","stepTitle":"src-components-WelcomeBack-StepsList-StepsList__stepTitle--Uvpj5","stepNumber":"src-components-WelcomeBack-StepsList-StepsList__stepNumber--S93Yr"}; 583 584/***/ }), 585 586/***/ "0x9z": 587/***/ (function(module, exports, __webpack_require__) { 588 589// extracted by mini-css-extract-plugin 590module.exports = {"Tick":"Tick","hidden":"hidden"}; 591 592/***/ }), 593 594/***/ 1: 595/***/ (function(module, exports) { 596 597/* (ignored) */ 598 599/***/ }), 600 601/***/ "1C2E": 602/***/ (function(module, exports, __webpack_require__) { 603 604// extracted by mini-css-extract-plugin 605module.exports = {"shareModal":"src-components-Modal-Content-ShareFolder-ShareFolder__shareModal--+yR7h","shareFolderTitle":"src-components-Modal-Content-ShareFolder-ShareFolder__shareFolderTitle--dmhR0","shareFolderSubtitle":"src-components-Modal-Content-ShareFolder-ShareFolder__shareFolderSubtitle--uJgSL","
605socialSharing":"src-components-Modal-Content-ShareFolder-ShareFolder__socialSharing--Mqabx","email":"src-components-Modal-Content-ShareFolder-ShareFolder__email--2FpEA","facebook":"src-components-Modal-Content-ShareFolder-ShareFolder__facebook--9J9ig","twitter":"src-components-Modal-Content-ShareFolder-ShareFolder__twitter--kTTxo","sharing":"src-components-Modal-Content-ShareFolder-ShareFolder__sharing--fu6po","active":"src-components-Modal-Content-ShareFolder-ShareFolder__active--qLW+i","generateShareableLink":"src-components-Modal-Content-ShareFolder-ShareFolder__generateShareableLink--K+ZmQ","generateShereableLinkLabel":"src-components-Modal-Content-ShareFolder-ShareFolder__generateShereableLinkLabel--LmO9u","inputContainer":"src-components-Modal-Content-ShareFolder-ShareFolder__inputContainer--d12Sp","Input":"src-components-Modal-Content-ShareFolder-ShareFolder__Input--zvLdA","copyButton":"src-components-Modal-Content-ShareFolder-ShareFolder__copyButton--1AIJq","disableLink":"src-components-Modal-Content-ShareFolder-ShareFolder__disableLink--jwQvx"}; 606 607/***/ }), 608 609/***/ "1L6i": 610/***/ (function(module, exports) { 611 612module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='a' width='123.1%25' height='123.1%25' x='-11.5%25' y='-11.5%25' filterUnits='objectBoundingBox'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='1'/%3E%3CfeColorMatrix in='shadowBlurOuter1' result='shadowMatrixOuter1' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.21 0'/%3E%3CfeMerge%3E%3CfeMergeNode in='shadowMatrixOuter1'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='32' height='32'/%3E%3Cg filter='url(%23a)' transform='translate(3.01 3.13)'%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M24.3907258,1.59093866 C25.4813881,2.68160095 25.9816645,3.91395089 25.9816645,5.12358841 C25.9816645,6.35308484 25.4630319,7.58970041 24.3907258,8.66200648 L9.98442216,23.0683102 L3.93165879,25.742787 C3.22442434,26.0552859 2.45747849,26.0515372 1.78921652,25.7928552 C1.12095455,25.5341731 0.551376453,25.0205577 0.23887751,24.3133233 C-0.0796258365,23.5924999 -0.0796258365,22.7708291 0.23887751,22.0500057 L2.83716621,16.1696681 L17.319658,1.59093866 C18.3919641,0.518632596 19.6285797,0 20.8580761,0 C22.0677136,0 23.3000636,0.500276382 24.3907258,1.59093866 Z'/%3E%3Cpolygon fill='%237EA7E6' points='17.32 3.712 22.269 8.662 9.541 21.39 4.592 16.44'/%3E%3Cpolygon fill='%23011E47' points='16.966 4.066 17.673 3.359 22.623 8.308 21.916 9.016'/%3E%3Cpolygon fill='%23011E47' points='4.238 16.794 4.945 16.087 9.895 21.036 9.188 21.743'/%3E%3Cpath stroke='%23011E47' d='M20.8599197,1.50054895 C21.6796465,1.50054895 22.5281611,1.84969429 23.3300657,2.65159884 C24.1319702,3.45350338 24.4811156,4.30201803 24.4811156,5.12174484 C24.4811156,5.98877955 24.0871428,6.84426915 23.3300657,7.6013463 L9.12188803,21.8095239 L3.32541302,24.3707571 C2.99705417,24.5158459 2.64097216,24.5141054 2.33070767,24.394003 C2.02044319,24.2739006 1.75599621,24.0354363 1.61090742,23.7070775 C1.46303086,23.3724095 1.46303086,22.9909195 1.61090742,22.6562515 L4.17214056,16.8597765 L18.3803182,2.65159884 C19.1373953,1.89452169 19.992885,1.50054895 20.8599197,1.50054895 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E" 613 614/***/ }), 615 616/***/ "1NiX": 617/***/ (function(module, exports) { 618 619module.exports = "/f880065ed337bff2313d06005e9003d9.png"; 620 621/***/ }), 622 623/***/ "1bU3": 624/***/ (function(module, exports) { 625 626module.exports = "data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M14.738 3.5 20 8.967V20a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 6 20V6a2.5 2.5 0 0 1 2.5-2.5h6.238zM8.5 5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9h-3.754a2.245 2.245 0 0 1-2.24-2.087L12.5 8.76V5h-4zM14 8.76c0 .407.334.74.746.74h3.686L14.1 5H14z' fill='%232F3C4D' fill-rule='evenodd'/%3E %3C/svg%3E" 627 628/***/ }), 629 630/***/ "1ol1": 631/***/ (function(module, __webpack_exports__, __webpack_require__) { 632 633"use strict"; 634/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getClips; }); 635/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return getSharedCl
635ips; }); 636/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getFolders; }); 637/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return getSharedFolder; }); 638/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("vDqi"); 639/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_0__); 640/* harmony import */ var _config_constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("YwrL"); 641 642 643function getClips() { 644 return async function (dispatch, getState) { 645 dispatch({ 646 type: 'SET_CLIPS_LOADING', 647 value: true 648 }); 649 let state = getState().dashboard; 650 if (!state.hasMoreClips) return; 651 let searchQueryString = ''; 652 if (state.searchQuery !== '') searchQueryString = '&search=' + state.searchQuery; 653 let parentFolderIdQuery = '&parentFolderId=root'; 654 if (state.currentFolder) parentFolderIdQuery = '&parentFolderId=' + state.currentFolder; 655 const preFolder = state.currentFolder; 656 let lastLoadedQuery = ''; 657 if (state.clips.length > 0) lastLoadedQuery = '&lastVisibleClipId=' + state.clips[state.clips.length - 1].clipId; 658 let url = `${_config_constants__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].apiUrl}/clips?${lastLoadedQuery}${searchQueryString}${parentFolderIdQuery}`; 659 const requestOptions = { 660 method: 'get', 661 url: url 662 }; 663 let res; 664 try { 665 res = await axios__WEBPACK_IMPORTED_MODULE_0___default()(requestOptions); 666 } catch (e) { 667 console.error("load list of clips", e); 668 return; 669 } 670 671 // if user changed current folder while clips were loading 672 if (preFolder !== getState().dashboard.currentFolder) { 673 dispatch({ 674 type: 'SET_CLIPS_LOADING', 675 value: false 676 }); 677 return; 678 } 679 const clips = res.data; 680 let ret = [...state.clips]; 681 let more = clips.length !== 0; 682 clips.forEach((clip, i) => { 683 ret.push(clip); 684 }); 685 if (more) { 686 dispatch({ 687 type: 'SET_CLIPS', 688 value: ret 689 }); 690 } else { 691 dispatch({ 692 type: 'SET_CLIPS_HAS_MORE', 693 value: false 694 }); 695 } 696 dispatch({ 697 type: 'SET_CLIPS_LOADING', 698 value: false 699 }); 700 }; 701} 702function getSharedClips() { 703 return async function (dispatch, getState) { 704 dispatch({ 705 type: 'SET_CLIPS_LOADING', 706 value: true 707 }); 708 let state = getState().dashboard; 709 if (!state.hasMoreClips) return; 710 let url = `${_config_constants__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].apiUrl}/clips/${state.currentFolder}`; 711 const requestOptions = { 712 method: 'get', 713 url: url 714 }; 715 let res; 716 try { 717 res = await axios__WEBPACK_IMPORTED_MODULE_0___default()(requestOptions); 718 } catch (e) { 719 console.error("load list of clips", e); 720 return; 721 } 722 const clips = res.data; 723 let ret = [...state.clips]; 724 let more = clips.length !== 0; 725 clips.forEach((clip, i) => { 726 ret.push(clip); 727 }); 728 if (more) { 729 dispatch({ 730 type: 'SET_CLIPS', 731 value: ret 732 }); 733 } else { 734 dispatch({ 735 type: 'SET_CLIPS_HAS_MORE', 736 value: false 737 }); 738 } 739 dispatch({ 740 type: 'SET_CLIPS_LOADING', 741 value: false 742 }); 743 }; 744} 745function getFolders() { 746 return async function (dispatch, getState) { 747 console.log("getFolders requested"); 748 let state = getState().dashboard; 749 const url = `${_config_constants__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].apiUrl}/folders`; 750 const requestOptions = { 751 method: 'get', 752 url: url 753 }; 754 let res = await axios__WEBPACK_IMPORTED_MODULE_0___default()(requestOptions); 755 dispatch({ 756 type: 'SET_FOLDERS', 757 value: [...res.data] 758 }); 759 }; 760} 761function getSharedFolder(folderId) { 762 return async function (dispatch, getState) { 763 console.log("getSharedFolder requested"); 764 let state = getState().dashboard; 765 const url = `${_config_constants__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].apiUrl}/sharedfolder/${folderId}`; 766 const requestOptions = { 767 method: 'get', 768 url: url 769 }; 770 let res = await axios__WEBPACK_IMPORTED_MODULE_0___default()(requestOptions); 771 dispatch({ 772 type: 'SET_FOLDERS', 773 value: [...res.data] 774 }); 775 }; 776} 777 778/***/ }), 779 780/***/ "1pYP":
781/***/ (function(module, exports) { 782 783module.exports = "data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cdefs%3E %3CradialGradient cx='50%25' cy='80.544%25' fx='50%25' fy='80.544%25' r='77.763%25' id='omtv58ngqb'%3E %3Cstop stop-color='%23F2F7FF' stop-opacity='0' offset='0%25'/%3E %3Cstop stop-color='%23F2F7FF' offset='100%25'/%3E %3C/radialGradient%3E %3Ccircle id='pch7jai86a' cx='19' cy='19' r='19'/%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cmask id='ramtihdu1c' fill='%23fff'%3E %3Cuse xlink:href='%23pch7jai86a'/%3E %3C/mask%3E %3Cuse fill='%23FFF' fill-rule='nonzero' xlink:href='%23pch7jai86a'/%3E %3Ccircle fill='url(%23omtv58ngqb)' mask='url(%23ramtihdu1c)' cx='19' cy='19' r='19'/%3E %3Cpath d='M19 23.5c3.176 0 6.05 1.287 8.132 3.368A11.464 11.464 0 0 1 30.5 35c0 3.176-1.287 6.05-3.368 8.132A11.464 11.464 0 0 1 19 46.5c-3.176 0-6.05-1.287-8.132-3.368A11.464 11.464 0 0 1 7.5 35c0-3.176 1.287-6.05 3.368-8.132A11.464 11.464 0 0 1 19 23.5zm0-13c1.519 0 2.894.616 3.89 1.61A5.483 5.483 0 0 1 24.5 16a5.483 5.483 0 0 1-1.61 3.89A5.483 5.483 0 0 1 19 21.5a5.483 5.483 0 0 1-3.89-1.61A5.483 5.483 0 0 1 13.5 16c0-1.519.616-2.894 1.61-3.89A5.483 5.483 0 0 1 19 10.5z' stroke='%23B8CEF1' fill='%23D9E7FF' mask='url(%23ramtihdu1c)'/%3E %3Ccircle stroke='%23C7D4EB' mask='url(%23ramtihdu1c)' cx='19' cy='19' r='18.5'/%3E %3C/g%3E %3C/svg%3E" 784 785/***/ }), 786 787/***/ "1vL0": 788/***/ (function(module, __webpack_exports__, __webpack_require__) { 789 790"use strict"; 791/* harmony default export */ __webpack_exports__["a"] = (__webpack_require__.p + "11825a1bac5175f213c7e5cdb220eca5.ogg"); 792 793/***/ }), 794 795/***/ 2: 796/***/ (function(module, exports) { 797 798/* (ignored) */ 799 800/***/ }), 801 802/***/ "2MmC": 803/***/ (function(module, exports) { 804 805module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='52' height='66' viewBox='0 0 52 66'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='50%25' x2='50%25' y1='0%25' y2='85.125%25'%3E%3Cstop offset='0%25' stop-color='%23D9E7FF'/%3E%3Cstop offset='100%25' stop-color='%23EAF2FF'/%3E%3C/linearGradient%3E%3Cpath id='b' d='M5,0 L33.7573593,0 C34.5530088,-1.46158436e-16 35.3160705,0.316070521 35.8786797,0.878679656 L52,17 L52,17 L52,61 C52,63.7614237 49.7614237,66 47,66 L5,66 C2.23857625,66 3.38176876e-16,63.7614237 0,61 L0,5 C-3.38176876e-16,2.23857625 2.23857625,5.07265313e-16 5,0 Z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='url(%23a)' stroke='%23B8CEF1' d='M33.7573593,0.5 C34.4204005,0.5 35.0562853,0.763392101 35.5251263,1.23223305 L51.5,17.2071068 L51.5,61 C51.5,62.2426407 50.9963203,63.3676407 50.1819805,64.1819805 C49.3676407,64.9963203 48.2426407,65.5 47,65.5 L5,65.5 C3.75735931,65.5 2.63235931,64.9963203 1.81801948,64.1819805 C1.00367966,63.3676407 0.5,62.2426407 0.5,61 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 Z'/%3E%3Cmask id='c' fill='%23fff'%3E%3Cuse xlink:href='%23b'/%3E%3C/mask%3E%3Cpath fill='%2384C55F' fill-opacity='.283' stroke='%238CBB89' stroke-opacity='.91' d='M25.3965618,30.9375 C34.2019901,30.9375 36.8664134,35.3260387 39.9652439,40.3548626 C42.2575555,44.0748568 44.7765344,48.1390694 49.9146069,51.2067068 C51.8097948,52.3382108 53.1986395,53.7919337 54.0682966,55.4077883 C54.9707431,57.0845667 55.3122546,58.9341075 55.0843788,60.7670199 C54.6477849,64.2787496 52.1280007,67.7058934 47.5426975,69.7949993 C45.1416277,70.8889485 35.207771,70.9183818 24.8240977,70.6808573 L23.4832985,70.6486262 C23.0360424,70.6373697 22.5884857,70.6256154 22.1416626,70.6134331 L20.8004556,70.5755619 C15.3250541,70.4157862 9.96959064,70.1980553 5.74700729,70.0263896 C2.33090669,69.8875108 -0.345897514,69.7789123 -1.75018575,69.7549457 L-1.75018575,46.7774009 C-1.75018575,43.8669775 2.52342763,39.587738 8.23242634,36.2135808 C13.2934963,33.2223652 19.5717488,30.9375 25.3965618,30.9375 Z' mask='url(%23c)'/%3E%3Cg mask='url(%23c)'%3E%3Cg transform='translate(5 3)'%3E%3Crect width='26' height='26'/%3E%3Cpath fill='%23FFF' stroke='%23B8CEF1' d='M13,5.40909091 C14.6066465,5.40909091 16.061192,6.06031309 17.1140758,7.11319691 C18.1669596,8.16608073 18.8181818,9.62062618 18.8181818,11.2272727 C19.9976967,11.3181818 21.0189089,11.7753941 21.758121,12.5146062 C22.4973332,13.2538184 22.9545455,14.2750305 22.9545455,15.4030303 C22.9545455,16.6478929 22.4900461,17.7948752 21.716617,18.6682913 C20.9431892,19.5417058 19.8608328,20.1415552 18.6251217,20.2921543 C16.9935828,20.491014 15.1185635,20.5909091 13,20.5909091 C10.8814365,20.5909091 9.00641718,20.491014 7.37488438,20.2921551 C6.13916719,20.1415552 5.05681077,19.5417058 4.283383,18.6682913 C3.50995387,17.7948752 3.04545455,16.6478929 3.04545455,15.4030303 C3.04545455,14.2750305 3.50266679,13.2538184 4.24187897,12.5146062 C4.98109115,11.7753941 6.00230327,11.3181818 7.13107455,11.3181824 C7.18181818,9.62062618 7.83304036,8.16608073 8.88592418,7.11319691 C9.938808,6.06031309 11.3933535,5.40909091 13,5.40909091 Z'/%3E%3C/g%3E%3C/g%3E%3Cpath fill='%23FFF' stroke='%23B8CEF1' d='M1.53,64.6 C0.992212836,64.100723 0.594721264,63.505021 0.337525283,62.8128942 L21,36.75 L30,41.75 L52,24.6 L52,30 L30.75,51.75 L23.5,47.5 L3.53489272,65.7813031 C2.73608474,65.4930447 2.06778716,65.099277 1.53,64.6 Z' mask='url(%23c)'/%3E%3Cpath fill='%23F2F7FF' stroke='%23B8CEF1' d='M34.5,0.5 L51.5,17.2071068 L51.5,17.5 L39,17.5 C37.7573593,17.5 36.6323593,16.9963203 35.8180195,16.1819805 C35.0036797,15.3676407 34.5,14.2426407 34.5,13 L34.5,0.5 Z' mask='url(%23c)'/%3E%3C/g%3E%3C/svg%3E" 806 807/***/ }), 808 809/***/ "2OAq": 810/***/ (function(module, exports, __webpack_require__) { 811 812// extracted by mini-css-extract-plugin 813module.exports = {"bannerMainContainer":"src-components-PromotionBanner-PromotionBanner__bannerMainContainer--EfSH+","bannerTextContainer":"src-components-PromotionBanner-PromotionBanner__bannerTextContainer--RC95R","bannerPrimaryText":"src-components-PromotionBanner-PromotionBanner__bannerPrimaryText--d+Rts","bannerSecondaryText":"src-components-PromotionBanner-PromotionBanner__bannerSecondaryText--XvcvV","bannerButtonContainer":"src-components-PromotionBanner-PromotionBanner__bannerButtonContainer--ybRsm","bannerActionButton":"src-components-PromotionBanner-PromotionBanner__bannerActionButton--Z-mvZ","bannerCloseButton":"src-components-PromotionBanner-PromotionBanner__bannerCloseButton---gDH1"}; 814 815/***/ }), 816 817/***/ "2tX9": 818/***/ (function(module, __webpack_exports__, __webpack_require__) { 819 820"use strict"; 821 822// EXPORTS 823__webpack_require__.d(__webpack_exports__, "a", function() { return /* reexport */ context; }); 824__webpack_require__.d(__webpack_exports__, "c", function() { return /* reexport */ withAuth; }); 825 826// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js 827var helpers_extends = __webpack_require__("pVnL"); 828var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends); 829 830// EXTERNAL MODULE: ./node_modules/react/index.js 831var react = __webpack_require__("q1tI"); 832var react_default = /*#__PURE__*/__webpack_require__.n(react); 833 834// CONCATENATED MODULE: ./src/components/Auth/context.js 835 836 837const AuthContext = /*#__PURE__*/react_default.a.createContext(null); 838
839// export const useAuth = (Auth) => { 840// const [authUser, setAuthUser] = useState(null); 841// let effect = () => { 842// const unlisten = Auth.auth.onAuthStateChanged( 843// authUser => { 844// authUser ? setAuthUser(authUser) : setAuthUser(null); 845// }, 846// ); 847// return () => { 848// unlisten(); 849// } 850// } 851// useEffect(effect) 852// return authUser; 853// } 854 855const withAuth = Component => props => /*#__PURE__*/react_default.a.createElement(AuthContext.Consumer, null, Auth => /*#__PURE__*/react_default.a.createElement(Component, extends_default()({}, props, { 856 Auth: Auth 857}))); 858/* harmony default export */ var context = (AuthContext); 859// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/defineProperty.js 860var defineProperty = __webpack_require__("lSNA"); 861var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty); 862 863// EXTERNAL MODULE: ./node_modules/axios/index.js 864var axios = __webpack_require__("vDqi"); 865var axios_default = /*#__PURE__*/__webpack_require__.n(axios); 866 867// EXTERNAL MODULE: ./node_modules/firebase/auth/dist/index.esm.js 868var index_esm = __webpack_require__("6nsN"); 869 870// EXTERNAL MODULE: ./node_modules/firebase/app/dist/index.cjs.js 871var index_cjs = __webpack_require__("Wcq6"); 872var index_cjs_default = /*#__PURE__*/__webpack_require__.n(index_cjs); 873 874// EXTERNAL MODULE: ./src/config/constants.js 875var constants = __webpack_require__("YwrL"); 876 877// EXTERNAL MODULE: ./src/config/store.js + 5 modules 878var store = __webpack_require__("5Fu3"); 879 880// EXTERNAL MODULE: ./src/utils/app.utils.js 881var app_utils = __webpack_require__("n8Gs"); 882 883// EXTERNAL MODULE: ./src/utils/utils.js 884var utils = __webpack_require__("+n12"); 885 886// CONCATENATED MODULE: ./src/components/Auth/auth.js 887 888 889 890 891 892 893 894 895class auth_Auth { 896 constructor(props) { 897 defineProperty_default()(this, "googleSignIn", async () => { 898 const provider = this.getGoogleAuthProvider(); 899 try { 900 let result = await this.auth().signInWithPopup(provider); 901 const isNewUser = result.additionalUserInfo.isNewUser; 902 if (isNewUser) { 903 const firebaseUser = result.user; 904 await this.createUserAtBackend(firebaseUser); // TODO do sign in at backend 905 window.dataLayer = window.dataLayer || []; 906 dataLayer.push({ 907 event: "sign-up", 908 method: "google", 909 uid: result.user.uid, 910 email: result.user.email 911 }); 912 } 913 const user = await this.signInAtBackend(); 914 store["a" /* default */].dispatch({ 915 type: 'SET_USER', 916 value: user 917 }); 918 console.log("signIn: googleSignIn:", result); 919 return true; 920 } catch (e) { 921 console.log("error: googleSignIn: ", e); 922 return false; 923 } 924 }); 925 index_cjs_default.a.initializeApp(constants["a" /* default */].firebase); 926 console.log(constants["a" /* default */].firebase); 927 this.auth = index_cjs_default.a.auth; 928 } 929 afterLoggingInFirebase(doit) { 930 this.auth().onAuthStateChanged(async user => { 931 if (user) await doit(); 932 }); 933 } 934 afterLoggingInFirebaseOnce(doit) { 935 let unsubscribe = this.auth().onAuthStateChanged(doIfAuthOk); 936 async function doIfAuthOk(user) { 937 if (user) { 938 await doit(); 939 } 940 unsubscribe(); 941 } 942 } 943 getFacebookAuthProvider() { 944 return new this.auth.FacebookAuthProvider(); 945 } 946 getGoogleAuthProvider() { 947 return new this.auth.GoogleAuthProvider(); 948 } 949 getCurrentUser() { 950 return store["a" /* default */].getState().app.user; 951 } 952 validateEmail(email) { 953 const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 954 return re.test(email); 955 } 956 validatePwd(pwd) { 957 return pwd.trim().length > 6; 958 } 959 async signOutServerSide() { 960 let options = { 961 url: '/api/logout' 962 }; 963 await axios_default()(options); 964 this.removeCrispToken(); 965 } 966 async signOut() { 967 this.auth().signOut(); 968 store["a" /* default */].dispatch({ 969 type: 'SET_USER', 970 value: null 971 }); 972 await this.signOutServerSide(); 973 } 974 setCrispToken(userId) { 975 window.CRISP_TOKEN_ID = userId; 976 window.$crisp.push(["do", "session:reset"]); 977 } 978 removeCrispToken() { 979 window.CRISP_TOKEN_ID = null; 980 window.$crisp.push(["do", "session:reset"]); 981 } 982 async signInAtBackend() { 983 let token = await this.auth().currentUser.getIdToken(); 984 let options = { 985 url: '/api/login', 986 headers: { 987 'Authorization': `Bearer ${token}` 988 } 989 }; 990 let resp = await axios_default()(options); 991 this.setCrispToken(resp.data.user.userId); 992 return resp.data.user; 993 } 994 async createUserAtBackend(user) { 995 const userId = user.uid; 996 let token = await user.getIdToken(); 997 let resp = {}; 998 try { 999 let options = { 1000 method: 'post', 1001 url: `${constants["a" /* default */].apiUrl}/users/${userId}`, 1002 headers: { 1003 'Authorization': `Bearer ${token}` 1004 }, 1005 data: user 1006 }; 1007 resp = await axios_default()(options); 1008 } catch (error) { 1009 console.log("error: createUserAtBackend:", error); 1010 } 1011 return resp; 1012 } 1013 1014 // default - with email and password 1015 async signIn(email, pwd) { 1016 let result = {}; 1017 try { 1018 result = await this.auth().signInWithEmailAndPassword(email, pwd); 1019 let user = await this.signInAtBackend(); 1020 store["a" /* default */].dispatch({ 1021 type: 'SET_USER', 1022 value: user 1023 }); 1024 console.log("signIn: signInWithEmailAndPassword:", result); 1025 } catch (error) { 1026 result.error = error; 1027 // console.error("error: signIn: signInWithEmailAndPassword:", error) 1028 result.errorMessage = error.message; 1029 } 1030 return result; 1031 } 1032 async signUp(email, pwd) { 1033 let result = {}; 1034 try { 1035 result = await this.auth().createUserWithEmailAndPassword(email, pwd); 1036 const firebaseUser = result.user; 1037 let resp = await this.createUserAtBackend(firebaseUser); // TODO do sign in at backend 1038 let user = await this.signInAtBackend(); 1039 store["a" /* default */].dispatch({ 1040 type: 'SET_USER', 1041 value: user 1042 }); 1043 window.dataLayer = window.dataLayer || []; 1044 dataLayer.push({ 1045 event: "sign-up", 1046 method: "email", 1047 uid: result.user.uid, 1048 email: email 1049 }); 1050 console.log("signUp: createUserWithEmailAndPassword:", result, resp); 1051 } catch (error) { 1052 result.error = error; 1053 console.log("error: signUp: createUserWithEmailAndPassword:", error); 1054 result.errorMessage = error.message; 1055 } 1056 return result; 1057 } 1058 async forgotPassword(email) { 1059 let response = {}; 1060 await this.auth().sendPasswordResetEmail(email).then(function () { 1061 response.success = true; 1062 response.error = false;
1063 }).catch(function (error) { 1064 response.success = false; 1065 response.error = true; 1066 response.errorMessage = error.message; 1067 }); 1068 return response; 1069 } 1070 async setOnboardingInfo(user, userLastName, displayName, currentUser) { 1071 const userId = user.uid; 1072 let token = await user.getIdToken(); 1073 let resp = {}; 1074 let url = `${constants["a" /* default */].apiUrl}/users/setOnboardingInfo/${userId}`; 1075 try { 1076 let options = { 1077 method: 'patch', 1078 url: url, 1079 headers: { 1080 'Authorization': `Bearer ${token}` 1081 }, 1082 data: { 1083 name: displayName, 1084 lastName: userLastName 1085 } 1086 }; 1087 resp = await axios_default()(options); 1088 } catch (error) { 1089 console.log("error: setOnboardingInfo:", error); 1090 } 1091 return resp; 1092 } 1093 async reSendEmailVerification() { 1094 let response = {}; 1095 return new Promise((resolve, reject) => { 1096 this.auth().onAuthStateChanged(async function (user) { 1097 await user.sendEmailVerification().then(function (res) { 1098 response.emailReSent = true; 1099 resolve(response); 1100 }).catch(function (error) { 1101 response.emailReSent = true; 1102 response.error = error; 1103 resolve(response); 1104 }); 1105 }); 1106 }); 1107 } 1108 async sendEmailVerification(displayName, userLastName, currentUser) { 1109 let this2 = this; 1110 let response = {}; 1111 return new Promise((resolve, reject) => { 1112 this.auth().onAuthStateChanged(async function (user) { 1113 // user 1114 // let user2 = this2.auth().currentUser; 1115 // user2 1116 if (user) { 1117 user.updateProfile({ 1118 displayName: displayName 1119 }).then(async function () { 1120 await this2.setOnboardingInfo(user, userLastName, displayName, currentUser).then(async function () { 1121 await user.sendEmailVerification().then(function () { 1122 response.displayName = displayName; 1123 response.lastName = userLastName; 1124 response.onboardingPassed = true; 1125 resolve(response); 1126 // return true 1127 }).catch(function (error) { 1128 console.log(error); 1129 resolve(false); 1130 // return false 1131 }); 1132 }).catch(function (error) { 1133 // An error happened. 1134 console.log(error); 1135 resolve(false); 1136 // return false 1137 }); 1138 }).catch(function (error) { 1139 // An error happened. 1140 console.log(error); 1141 resolve(false); 1142 // return false 1143 }); 1144 } else resolve(false); 1145 }); 1146 }); 1147 } 1148 async isEmailVerified() { 1149 return new Promise((resolve, reject) => { 1150 this.auth().onAuthStateChanged(user => { 1151 if (user) { 1152 resolve(user.emailVerified); 1153 } else { 1154 resolve(null); 1155 } 1156 }, reject); 1157 }); 1158 } 1159 async verifyEmail(actionCode) { 1160 let response = {}; 1161 await this.auth().applyActionCode(actionCode).then(function (resp) { 1162 // Email address has been verified. 1163 1164 // TODO: Display a confirmation message to the user. 1165 // You could also provide the user with a link back to the app. 1166 1167 // TODO: If a continue URL is available, display a button which on 1168 // click redirects the user back to the app via continueUrl with 1169 // additional state determined from that URL's parameters. 1170 response.success = true; 1171 }).catch(function (error) { 1172 // Code is invalid or expired. Ask the user to verify their email address 1173 // again. 1174 response.code = error.code; 1175 response.success = false; 1176 response.errorMessage = error.message; 1177 }); 1178 return response; 1179 } 1180 async verifyPasswordResetCode(actionCode) { 1181 let response = {}; 1182 await this.auth().verifyPasswordResetCode(actionCode).then(function (email) { 1183 response.success = true; 1184 response.email = email; 1185 }).catch(function (error) { 1186 // Invalid or expired action code. Ask user to try to reset the password 1187 // again. 1188 response.code = error.code; 1189 response.success = false;
1190 response.errorMessage = error.message; 1191 }); 1192 return response; 1193 } 1194 async resetPassword(actionCode, newPassword, continueUrl, lang) { 1195 let response = {}; 1196 // Verify the password reset code is valid. 1197 1198 await this.auth().confirmPasswordReset(actionCode, newPassword).then(function (resp) { 1199 // Password reset has been confirmed and new password updated. 1200 1201 // TODO: Display a link back to the app, or sign-in the user directly 1202 // if the page belongs to the same domain as the app: 1203 // auth.signInWithEmailAndPassword(accountEmail, newPassword); 1204 1205 // TODO: If a continue URL is available, display a button which on 1206 // click redirects the user back to the app via continueUrl with 1207 // additional state determined from that URL's parameters. 1208 response.success = true; 1209 }).catch(function (error) { 1210 // Error occurred during confirmation. The code might have expired or the 1211 // password is too weak. 1212 response.success = false; 1213 response.code = error.code; 1214 response.errorMessage = error.message; 1215 }); 1216 return response; 1217 } 1218} 1219/* harmony default export */ var auth = (auth_Auth); 1220// CONCATENATED MODULE: ./src/components/Auth/index.js 1221 1222 1223/* harmony default export */ var components_Auth = __webpack_exports__["b"] = (auth); 1224 1225 1226/***/ }), 1227 1228/***/ "316e": 1229/***/ (function(module, exports, __webpack_require__) { 1230 1231// extracted by mini-css-extract-plugin 1232module.exports = {"ClipEditor":"ClipEditor","canvasInteraction":"canvasInteraction","toolsBar":"toolsBar","historyBar":"historyBar","smoothshowing":"smoothshowing","hidden":"hidden","escLabel":"escLabel","PureEditor":"PureEditor","zoomButtons":"zoomButtons","value":"value","navButtons":"navButtons","disabled":"disabled","Toolbar":"Toolbar","round-button":"round-button","menuBar":"menuBar","menuItem":"menuItem","bottomRightActionsBar":"bottomRightActionsBar","preview-mode":"preview-mode","logo-dark":"logo-dark","Previewer":"Previewer","hiddentoolbars-mode":"hiddentoolbars-mode","toolbar":"toolbar","viewer-clip":"viewer-clip","toolbar-tools":"toolbar-tools","topRightActionsBar":"topRightActionsBar","addComment":"addComment","remove":"remove","withComments":"withComments","topMobileToolbar":"topMobileToolbar","downloadClip":"downloadClip","dark-theme":"dark-theme","resize":"resize","opened":"opened","horizontal":"horizontal","embedded":"embedded","edit":"edit","coords":"coords","shot":"shot","dummy":"dummy","limit-left":"limit-left","limit-right":"limit-right","expandable":"expandable","expanded-bar":"expanded-bar","expandToTop":"expandToTop","tool":"tool","handler":"handler","delimiter":"delimiter","cursor":"cursor","select":"select","highlighter":"highlighter","pen":"pen","line":"line","arrow":"arrow","arrowtext":"arrowtext","rect":"rect","triangle":"triangle","ellipse":"ellipse","text":"text","img":"img","blur":"blur","comment":"comment","current":"current","crop":"crop","lefted":"lefted","righted":"righted","topped":"topped","bottomed":"bottomed","center":"center","customToolbarPosition":"customToolbarPosition","floatingButton":"floatingButton","saveButton":"saveButton","copyLinkButton":"copyLinkButton","shareButton":"shareButton","downloadButton":"downloadButton","copyButton":"copyButton","extension-shot-button-copy-image":"extension-shot-button-copy-image","extension-shot-button-copy-link":"extension-shot-button-copy-link","extension-menu-button":"extension-menu-button"}; 1233 1234/***/ }), 1235 1236/***/ "3OHZ": 1237/***/ (function(module, __webpack_exports__, __webpack_require__) { 1238 1239"use strict"; 1240 1241// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom.iterable.js 1242var web_dom_iterable = __webpack_require__("rGqo"); 1243 1244// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/defineProperty.js 1245var defineProperty = __webpack_require__("lSNA"); 1246var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty); 1247 1248// EXTERNAL MODULE: ./node_modules/react/index.js 1249var react = __webpack_require__("q1tI"); 1250var react_default = /*#__PURE__*/__webpack_require__.n(react); 1251 1252// EXTERNAL MODULE: ./node_modules/react-redux/es/index.js + 22 modules 1253var es = __webpack_require__("/MKj"); 1254 1255// EXTERNAL MODULE: ./src/editor/components/Markers/Markers.css 1256var Markers_Markers = __webpack_require__("3RPd"); 1257 1258// EXTERNAL MODULE: ./src/editor/mods/util.js 1259var util = __webpack_require__("p2J/"); 1260 1261// EXTERNAL MODULE: ./src/editor/components/Popup/Modal.css 1262var Modal = __webpack_require__("Bz+H"); 1263 1264// CONCATENATED MODULE: ./src/editor/components/Popup/Modal.js 1265 1266 1267function ModalButton(props) { 1268 const [isShown, setModal] = Object(react["useState"])(!!props.shown); 1269 const onCancelClick = Object(react["useCallback"])(() => { 1270 setModal(false); 1271 }); 1272 const onYesClick = Object(react["useCallback"])(type => { 1273 setModal(false); 1274 if (props.onYesClick) props.onYesClick(type); 1275 }); 1276 const afterSigned = Object(react["useCallback"])(buttonType => { 1277 // props.onYesClick(); 1278 if (props.afterSigned) props.afterSigned(buttonType); 1279 }); 1280 const closeModal = Object(react["useCallback"])(() => { 1281 setModal(false); 1282 }); 1283 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, !props.buttonDisabled && isShown && props.closeText == '' ? null : /*#__PURE__*/react_default.a.createElement("button", { 1284 type: "button", 1285 id: props.id, 1286 className: ["pointer", props.className].join(' '), 1287 onClick: () => setModal(!isShown) 1288 }, /*#__PURE__*/react_default.a.createElement("span", null, isShown ? props.closeText : props.openText)), /*#__PURE__*/react_default.a.createElement(ModalWindow, { 1289 show: isShown, 1290 onClose: !props.closingDisabled ? closeModal : null 1291 }, !props.closingDisabled && /*#__PURE__*/react_default.a.createElement("div", { 1292 className: "close", 1293 onClick: () => setModal(false) 1294 }), /*#__PURE__*/react_default.a.cloneElement(props.children, { 1295 onCancelClick: onCancelClick, 1296 onYesClick: onYesClick, 1297 afterSigned: afterSigned, 1298 isShown: isShown 1299 }))); 1300} 1301function ModalCloseButton(props) { 1302 return /*#__PURE__*/react_default.a.createElement("div", { 1303 className: "close", 1304 onClick: props.onClick 1305 }); 1306} 1307function ModalWindow(props) { 1308 // const [mobileAndTabletCheck, setMobileAndTabletCheck] = useState(false); 1309 const [show, setShow] = Object(react["useState"])(false); 1310 let modal = Object(react["useRef"])(null); 1311 Object(react["useEffect"])(() => { 1312 const escListen = e => { 1313 e = e || window.event; 1314 return ("key" in e ? e.key === "Escape" || e.key === "Esc" : e.keyCode === 27) && props.onClose && props.onClose(); 1315 }; 1316 document.addEventListener("keyup", escListen); 1317 return () => document.removeEventListener("keyup", escListen); 1318 }, []); 1319 Object(react["useEffect"])(() => { 1320 if (props.show) { 1321 setShow(props.show); 1322 } else { 1323 if (props.upload && window.innerWidth <= 576) { 1324 modal.current.style.setProperty('bottom', '-600px', "important"); 1325 setTimeout(() => { 1326 modal.current.style.removeProperty('bottom'); 1327 setShow(props.show); 1328 }, 600); 1329 } else { 1330 setShow(props.show); 1331 } 1332 } 1333 }, [props.show]); 1334 const clickOnOtuer = e => { 1335 const cellText = document.getSelection(); 1336 if ((e && e.target.nodeName !== 'BUTTON' || !e) && cellText.type === 'Range') return false;
1337 if (show == "renameFolder" || show == "renameClip") { 1338 return false; 1339 } 1340 if (props.upload && window.innerWidth <= 576) { 1341 modal.current.style.setProperty('bottom', '-600px', "important"); 1342 setTimeout(() => { 1343 props.onClose(); 1344 modal.current.style.removeProperty('bottom'); 1345 }, 600); 1346 } else { 1347 props.onClose(); 1348 } 1349 }; 1350 return /*#__PURE__*/react_default.a.createElement("div", { 1351 className: ["outer", show ? "show" : "hide", props.dontShowUploadModal ? "dontShowUploadModal" : ""].join(' '), 1352 onClick: e => clickOnOtuer(e) 1353 }, /*#__PURE__*/react_default.a.createElement("div", { 1354 ref: modal, 1355 className: [props.loader ? '' : "modal", props.type == "ticketPreview" && "ticketPreview", props.upload ? "uploadModal" : "", props.popup ? "popupModal" : ""].join(' '), 1356 onClick: e => e.stopPropagation() 1357 }, props.children)); 1358} 1359// EXTERNAL MODULE: ./src/editor/components/Popup/Popup.css 1360var Popup_Popup = __webpack_require__("ZWw/"); 1361 1362// CONCATENATED MODULE: ./src/editor/components/Popup/Popup.js 1363 1364 1365class Popup_Popup_Popup extends react_default.a.Component { 1366 onCancelClick() { 1367 this.props.onCancelClick(); 1368 } 1369 onOkClick() { 1370 this.props.onYesClick(this.props.type); 1371 } 1372 render() { 1373 return /*#__PURE__*/react_default.a.createElement("div", { 1374 className: 'popup-container' 1375 }, /*#__PURE__*/react_default.a.createElement("div", { 1376 className: "title" 1377 }, this.props.title), /*#__PURE__*/react_default.a.createElement("div", { 1378 className: "content" 1379 }, this.props.content), this.props.type == "ticketPreview" && /*#__PURE__*/react_default.a.createElement("div", { 1380 className: "content" 1381 }, this.props.images.length > 0 && /*#__PURE__*/react_default.a.createElement("div", null, this.props.images.map((att, index) => /*#__PURE__*/react_default.a.createElement("span", { 1382 key: index 1383 }, /*#__PURE__*/react_default.a.createElement("img", { 1384 className: 'attached-items', 1385 src: att.dataUrl 1386 }))))), /*#__PURE__*/react_default.a.createElement("div", { 1387 className: "button-container" 1388 }, this.props.type == "feedback" ? /*#__PURE__*/react_default.a.createElement("button", { 1389 onClick: this.onCancelClick.bind(this), 1390 className: "yes-button" 1391 }, "Ok") : this.props.type == "delete" ? /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("button", { 1392 onClick: this.onCancelClick.bind(this), 1393 className: "cancel-button" 1394 }, this.props.cancel), /*#__PURE__*/react_default.a.createElement("button", { 1395 onClick: this.onOkClick.bind(this), 1396 className: "delete-button" 1397 }, this.props.ok)) : /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("button", { 1398 onClick: this.onCancelClick.bind(this), 1399 className: "cancel-button" 1400 }, this.props.cancel), /*#__PURE__*/react_default.a.createElement("button", { 1401 onClick: this.onOkClick.bind(this), 1402 className: "yes-button" 1403 }, this.props.ok)))); 1404 } 1405} 1406/* harmony default export */ var components_Popup_Popup = (Popup_Popup_Popup); 1407// EXTERNAL MODULE: ./node_modules/react-textarea-autosize/dist/react-textarea-autosize.browser.esm.js 1408var react_textarea_autosize_browser_esm = __webpack_require__("z430"); 1409 1410// CONCATENATED MODULE: ./src/editor/components/Markers/Markers.js 1411 1412 1413 1414 1415 1416 1417 1418 1419// import Tool from "../Canvas/tools/Tool"; 1420 1421class Markers_Markers_Markers extends react["Component"] { 1422 constructor(props) { 1423 super(props); 1424 defineProperty_default()(this, "touchRemoveMarker", e => { 1425 let touches = e.changedTouches || e.touches; 1426 let el = document.elementFromPoint(touches[0].pageX, touches[0].pageY); 1427 if (el && [].slice.call(document.elementsFromPoint(touches[0].pageX, touches[0].pageY)).filter(el => el.classList.contains('addComment')).length) { 1428 return this.removeMarker(e); 1429 } else return false; 1430 }); 1431 this.state = { 1432 //popup 1433 feedbacPopUp: false, 1434 feedbackPopUpTitle: "", 1435 feedbackPopUpContent: "", 1436 feedbackPopUpOk: "", 1437 feedbackPopUpType: "", 1438 markerIndex: null, 1439 commentIndex: null, 1440 //popup 1441 1442 imageWidth: props.imageWidth, 1443 imageHeight: props.imageHeight, 1444 imageUrl: props.imageUrl, 1445 // markers 1446 1447 isPublic: props.isPublic, 1448 previewMode: props.previewMode, 1449 embedMode: props.embedMode, 1450 embedImageLoaded: props.embedImageLoaded, 1451 // need to be processed in getderived and shouldcomponent 1452 1453 uid: props.uid, 1454 username: props.username, 1455 userphoto: props.userphoto, 1456 markers: props.markers.slice(0), 1457 currentMarker: props.currentMarker, 1458 movingMarkerPoint: props.movingMarkerPoint, 1459 commentDialogOpened: props.commentDialogOpened, 1460 createCommentTextareaFocus: props.createCommentTextareaFocus, 1461 editCommentTextareaFocus: props.editCommentTextareaFocus, 1462 editingComment: props.editingComment, 1463 markerMoving: props.markerMoving, 1464 newMarker: props.newMarker, 1465 mouse: { 1466 x: props.mouse.x, 1467 y: props.mouse.y 1468 }, 1469 sizes: { 1470 left: props.sizes.x, 1471 top: props.sizes.y, 1472 width: props.sizes.width, 1473 height: props.sizes.height 1474 }, 1475 clip: this.props.clip, 1476 canvasInteraction: props.canvasInteraction, 1477 zoom: props.zoom, 1478 initialZoom: props.initialZoom, 1479 zoomPoint: props.zoomPoint, 1480 markersShow: props.markersShow, 1481 commentWordsCount: 0, 1482 textAreaHeight: 0 1483 }; 1484 this.handleMouseMove = this.handleMouseMove.bind(this); 1485 1486 // comments 1487 this.addMarkerStart = this.addMarkerStart.bind(this); 1488 this.addMarkerByClickStart = this.addMarkerByClickStart.bind(this); 1489 this.removeMarker = this.removeMarker.bind(this); 1490 this.startMoveMarker = this.startMoveMarker.bind(this); 1491 this.stopMoveMarker = this.stopMoveMarker.bind(this); 1492 this.doMoveMarker = this.doMoveMarker.bind(this); 1493 this.setMarkerColor = this.setMarkerColor.bind(this); 1494 // this.toggleMarkers = this.toggleMarkers.bind(this); 1495 // this.hideMarkers = this.hideMarkers.bind(this); 1496 // this.showMarkers = this.showMarkers.bind(this); 1497 this.getUserphotoByUid = this.getUserphotoByUid.bind(this); 1498 this.getUsernameByUid = this.getUsernameByUid.bind(this); 1499 this.saveEditedComment = this.saveEditedComment.bind(this); 1500 this.removeComment = this.removeComment.bind(this); 1501 this.createComment = this.createComment.bind(this); 1502 this.threadCommentDialogInner = /*#__PURE__*/react_default.a.createRef(); 1503 this.threadCommentDialogTextarea = /*#__PURE__*/react_default.a.createRef(); 1504 this.editCommentDialogTextarea = /*#__PURE__*/react_default.a.createRef(); 1505 // this.toggleCommentDialog = this.toggleCommentDialog.bind(this); 1506 1507 this.util = new util["c" /* default */](); 1508 this.canvasRef = /*#__PURE__*/react_default.a.createRef(); 1509 this.commentsRef = /*#__PURE__*/react_default.a.createRef(); 1510 this.commentsWasUpdated = false;
1511 this.colorsList = ["#f95f62", "#ffc35c", "#3debb4", "#2c8df5", "#846dd1" // blue "#57e9ff" 1512 ]; 1513 this.nextMarkerColor = this.getRandomMarkerColor(); 1514 this.previousRandomColor = this.nextMarkerColor; 1515 } 1516 static getDerivedStateFromProps(nextProps, prevState) { 1517 let ret = {}; 1518 if (prevState.imageWidth !== nextProps.imageWidth) ret.imageWidth = nextProps.imageWidth; 1519 if (prevState.imageHeight !== nextProps.imageHeight) ret.imageHeight = nextProps.imageHeight; 1520 if (prevState.imageUrl !== nextProps.imageUrl) ret.imageUrl = nextProps.imageUrl; 1521 if (prevState.isPublic !== nextProps.isPublic) ret.isPublic = nextProps.isPublic; 1522 if (prevState.uid !== nextProps.uid) ret.uid = nextProps.uid; 1523 if (prevState.username !== nextProps.username) ret.username = nextProps.username; 1524 if (prevState.userphoto !== nextProps.userphoto) ret.userphoto = nextProps.userphoto; 1525 if (prevState.markersShow !== nextProps.markersShow) ret.markersShow = nextProps.markersShow; 1526 1527 // markers 1528 if (prevState.editCommentTextareaFocus !== nextProps.editCommentTextareaFocus) ret.editCommentTextareaFocus = nextProps.editCommentTextareaFocus; 1529 if (prevState.createCommentTextareaFocus !== nextProps.createCommentTextareaFocus) ret.createCommentTextareaFocus = nextProps.createCommentTextareaFocus; 1530 if (prevState.editingComment !== nextProps.editingComment) ret.editingComment = nextProps.editingComment; 1531 if (prevState.newMarker !== nextProps.newMarker) ret.newMarker = nextProps.newMarker; 1532 if (prevState.markerMoving !== nextProps.markerMoving) ret.markerMoving = nextProps.markerMoving; 1533 if (prevState.currentMarker !== nextProps.currentMarker) ret.currentMarker = nextProps.currentMarker; 1534 if (prevState.commentDialogOpened !== nextProps.commentDialogOpened) ret.commentDialogOpened = nextProps.commentDialogOpened; 1535 1536 // sizes 1537 if (nextProps.sizes.left !== prevState.sizes.left || nextProps.sizes.top !== prevState.sizes.top || nextProps.sizes.width !== prevState.sizes.width || nextProps.sizes.height !== prevState.sizes.height) { 1538 ret.sizes = { 1539 ...nextProps.sizes 1540 }; 1541 } 1542 if (prevState.zoom !== nextProps.zoom) ret.zoom = nextProps.zoom; 1543 if (prevState.initialZoom !== nextProps.initialZoom) ret.initialZoom = nextProps.initialZoom; 1544 if (prevState.zoomPoint.x !== nextProps.zoomPoint.x || prevState.zoomPoint.y !== nextProps.zoomPoint.y) { 1545 ret.zoomPoint = nextProps.zoomPoint; 1546 } 1547 if (prevState.canvasInteraction !== nextProps.canvasInteraction) ret.canvasInteraction = nextProps.canvasInteraction; 1548 if (nextProps.mouse && nextProps.mouse.x !== prevState.mouse.x || nextProps.mouse.y !== prevState.mouse.y) { 1549 ret.mouse = nextProps.mouse; 1550 } 1551 ret.markers = nextProps.markers; 1552 if (prevState.movingMarkerPoint.x !== nextProps.movingMarkerPoint.x || prevState.movingMarkerPoint.y !== nextProps.movingMarkerPoint.y) { 1553 ret.movingMarkerPoint = nextProps.movingMarkerPoint; 1554 } 1555 if (nextProps.clip.x !== prevState.clip.x || nextProps.clip.y !== prevState.clip.y || nextProps.clip.w !== prevState.clip.w || nextProps.clip.h !== prevState.clip.h) ret.clip = nextProps.clip; 1556 if (prevState.previewMode !== nextProps.previewMode) ret.previewMode = nextProps.previewMode; 1557 if (prevState.embedImageLoaded !== nextProps.embedImageLoaded) ret.embedImageLoaded = nextProps.embedImageLoaded; 1558 return Object.keys(ret).length > 0 ? ret : null; 1559 } 1560 shouldComponentUpdate(nextProps, nextState) { 1561 let should = nextState.imageUrl !== this.state.imageUrl || nextState.zoom !== this.state.zoom || nextState.imageHeight !== this.state.imageHeight || nextState.imageWidth !== this.state.imageWidth || this.state.editingComment !== nextState.editingComment || this.state.newMarker !== nextState.newMarker || this.state.markersShow !== nextState.markersShow || this.state.isPublic !== nextState.isPublic || this.state.uid !== nextState.uid || this.state.username !== nextState.username || this.state.userphoto !== nextState.userphoto || this.state.editCommentTextareaFocus !== nextState.editCommentTextareaFocus || this.state.createCommentTextareaFocus !== nextState.createCommentTextareaFocus || this.state.commentsBarShow !== nextState.commentsBarShow || this.state.shareDialogOpened !== nextState.shareDialogOpened || this.state.sizes.left !== nextState.sizes.left || this.state.sizes.top !== nextState.sizes.top || this.state.sizes.width !== nextState.sizes.width || this.state.sizes.height !== nextState.sizes.height || this.state.markers.length !== nextState.markers.length || this.state.movingMarkerPoint.x !== nextState.movingMarkerPoint.x || this.state.movingMarkerPoint.y !== nextState.movingMarkerPoint.y || this.state.currentMarker !== nextState.currentMarker || this.state.markerMoving !== nextState.markerMoving || this.state.commentDialogOpened !== nextState.commentDialogOpened || this.state.embedImageLoaded !== nextState.embedImageLoaded || this.state.clip.x !== nextState.clip.x || this.state.clip.y !== nextState.clip.y || this.state.clip.w !== nextState.clip.w || this.state.clip.h !== nextState.clip.h || this.state.initialZoom !== nextState.initialZoom || this.state.zoom !== nextState.zoom || this.state.zoomPoint.x !== nextState.zoomPoint.x || this.state.zoomPoint.y !== nextState.zoomPoint.y || this.state.canvasInteraction !== nextState.canvasInteraction || this.state.previewMode !== nextState.previewMode || this.state.commentWordsCount !== nextState.commentWordsCount || this.state.feedbacPopUp !== nextState.feedbacPopUp 1562 // || this.state.textAreaHeight !== (this.threadCommentDialogTextarea.current ? this.threadCommentDialogTextarea.current.offsetHeight : 0) 1563 ; 1564 should = should || this.commentsWasUpdated; 1565 if (this.commentsWasUpdated && this.props.embedMode) { 1566 let markers = nextState.markers; //this.util.unshiftMarkers(nextState.markers, nextProps.embedImageWidth, nextProps.embedImageHeight, this.state.sizes); 1567 1568 // markers = this.util.markersPositionToPercents(markers, nextProps.embedImageWidth, nextProps.embedImageHeight); 1569 clearTimeout(this.saveMarkersTimer); 1570 this.saveMarkersTimer = setTimeout(() => this.props.saveMarkers(markers), 3000); 1571 } 1572 if (should && this.props.Canvas.current) { 1573 this.props.Canvas.current.markersUpdated(this.state.markers); 1574 } 1575 this.commentsWasUpdated = false;
1576 1577 // mouse move 1578 if ((this.state.movingMarkerPoint.x !== nextProps.mouse.x || this.state.movingMarkerPoint.y !== nextProps.mouse.y) && this.state.markerMoving) { 1579 this.mouseCoordsChanged = true; 1580 } else this.mouseCoordsChanged = false; 1581 return should; 1582 } 1583 componentDidMount() { 1584 var _this$props$Canvas$cu; 1585 document.addEventListener("mouseup", this.stopMoveMarker); 1586 document.addEventListener("touchend", this.stopMoveMarker); 1587 (_this$props$Canvas$cu = this.props.Canvas.current) === null || _this$props$Canvas$cu === void 0 ? void 0 : _this$props$Canvas$cu.dynamic.on("after:render", () => { 1588 this.forceUpdate(); 1589 }); // bug fix (Markers did not retain correct position when Canvas was moved/scrolled/zoomed) 1590 1591 this.handleMouseMove(); 1592 } 1593 componentDidUpdate() { 1594 if (this.threadCommentDialogInner.current !== null) { 1595 //scroll top after click on edit comment 1596 if (!this.state.editCommentTextareaFocus) { 1597 this.threadCommentDialogInner.current.scrollTo(0, 9999999); 1598 } 1599 } 1600 if (this.threadCommentDialogTextarea.current && this.threadCommentDialogInner.current == null) { 1601 this.threadCommentDialogTextarea.current.style.maxHeight = '380px'; 1602 } else if (this.threadCommentDialogInner.current && this.threadCommentDialogTextarea.current && this.state.textAreaHeight !== this.threadCommentDialogTextarea.current.offsetHeight && window.innerWidth > 600) { 1603 this.setState({ 1604 textAreaHeight: this.threadCommentDialogTextarea.current.offsetHeight 1605 }); 1606 this.threadCommentDialogTextarea.current.style.maxHeight = 322 - this.threadCommentDialogInner.current.offsetHeight + 58 + "px"; 1607 } 1608 // else if( 1609 // this.threadCommentDialogInner.current && 1610 // this.threadCommentDialogTextarea.current && 1611 // this.state.textAreaHeight !== this.threadCommentDialogTextarea.current.offsetHeight && 1612 1613 // window.innerWidth <= 600 1614 // ){ 1615 // this.setState({ 1616 // textAreaHeight: this.threadCommentDialogTextarea.current.offsetHeight 1617 // }) 1618 // this.threadCommentDialogTextarea.current.style.maxHeight = "40px" 1619 // } 1620 // else if( 1621 // this.threadCommentDialogInner.current && 1622 // this.threadCommentDialogTextarea.current && 1623 // this.threadCommentDialogTextarea.current.style.maxHeight < "95px" && 1624 // this.threadCommentDialogTextarea.current.scrollHeight > this.threadCommentDialogTextarea.current.offsetHeight && 1625 // window.innerWidth <= 600 1626 // ){ 1627 // this.setState({ 1628 // textAreaHeight: this.threadCommentDialogTextarea.current.scrollHeight 1629 // }) 1630 // this.threadCommentDialogTextarea.current.style.maxHeight = this.threadCommentDialogTextarea.current.scrollHeight +"px" 1631 // // this.threadCommentDialogTextarea.current.offsetHeight = this.threadCommentDialogTextarea.current.style.maxHeight; 1632 // } 1633 } 1634 componentWillUnmount() { 1635 var _this$props$Canvas$cu2; 1636 this.willUnmount = true; 1637 document.removeEventListener("mouseup", this.stopMoveMarker); 1638 document.removeEventListener("touchend", this.stopMoveMarker); 1639 (_this$props$Canvas$cu2 = this.props.Canvas.current) === null || _this$props$Canvas$cu2 === void 0 ? void 0 : _this$props$Canvas$cu2.dynamic.off("after:render", () => { 1640 this.forceUpdate(); 1641 }); 1642 } 1643 preventBubbling(e) { 1644 e.stopPropagation(); 1645 e.nativeEvent.stopImmediatePropagation(); 1646 return false; 1647 } 1648 updateCommentWordsCount() { 1649 // if(this.threadCommentDialogTextarea.current){ 1650 this.setState({ 1651 commentWordsCount: this.threadCommentDialogTextarea.current.value.length 1652 }); 1653 this.props.setEditCommentTextareaFocus(false); 1654 // } 1655 } 1656 getClipRect(canvas) { 1657 return canvas.backgroundImage ? canvas.backgroundImage.getBoundingRect() : { 1658 left: this.state.clip.x, 1659 top: this.state.clip.y, 1660 width: this.state.clip.w, 1661 height: this.state.clip.h 1662 }; 1663 } 1664 handleMouseMove() { 1665 if (this.willUnmount) return; 1666 // if mouse coords changed 1667 let isOwnerOfMarkerOrClip = this.state.currentMarker !== null && this.state.markers.length > 0 && (this.state.uid === this.state.markers[this.state.currentMarker].owner || this.props.owner); 1668 if (isOwnerOfMarkerOrClip && this.state.markerMoving && this.mouseCoordsChanged && this.props.Canvas.current) { 1669 // this.props.Canvas.current.dynamic.defaultCursor = "grabbing" 1670 // this.props.Canvas.current.bup2Cursor = "grabbing" 1671 const canvas = this.props.Canvas.current.dynamic; 1672 let point = this.props.mouse; 1673 1674 // if embed mode (editor) is on, there can be zoom or panning, so we need to recalculate points 1675 if (this.state.embedMode) { 1676 point = canvas.getPointer({ 1677 clientX: this.props.mouse.x, 1678 clientY: this.props.mouse.y 1679 }); 1680 } 1681 1682 // convert to percents 1683 const clipRect = this.getClipRect(canvas); 1684 const clipStartPoint = fabric.util.transformPoint({ 1685 x: clipRect.left, 1686 y: clipRect.top 1687 }, canvas.viewportTransform); 1688 const pointConverted = fabric.util.transformPoint(point, canvas.viewportTransform); 1689 const percentPoint = { 1690 x: (pointConverted.x - clipStartPoint.x) * 100 / (clipRect.width * this.state.zoom), 1691 y: (pointConverted.y - clipStartPoint.y) * 100 / (clipRect.height * this.state.zoom) 1692 }; 1693 this.props.setMovingMarkerPoint({ 1694 x: percentPoint.x, 1695 y: percentPoint.y 1696 }); 1697 this.doMoveMarker(); 1698 } 1699 requestAnimationFrame(this.handleMouseMove); 1700 } 1701 removeMarker(e) { 1702 e.stopPropagation(); 1703 const index = this.state.currentMarker; 1704 this.props.setMarkerMoving(false); 1705 this.props.setCurrentMarker(null); 1706 if (index !== this.state.markers.length - 1) { 1707 this.props.markerRemove(index); 1708 console.log("marker: remove", index, this.state.markers.length); 1709 } else { 1710 console.log("marker: destroy"); 1711 this.props.markerDestroy(index, index, this.state.markers.length); 1712 } 1713 this.commentsWasUpdated = true; 1714 this.markersTrashOpened = false;
1715 console.log("here we will save markers removeMarker"); 1716 this.forceUpdate(); 1717 } 1718 getRandomMarkerColor() { 1719 this.previousRandomColor = this.nextMarkerColor; 1720 this.nextMarkerColor = this.colorsList[Math.floor(Math.random() * Math.floor(this.colorsList.length - 1))]; 1721 return this.nextMarkerColor; 1722 } 1723 addMarkerByClickStart(e) { 1724 if (this.justRemoved) { 1725 this.props.setNewMarker(false); 1726 this.justRemoved = false; 1727 return; 1728 } 1729 // this.props.Canvas.current.bup2Cursor = "grabbing" 1730 // this.props.Canvas.current.dynamic.defaultCursor = "grabbing" 1731 1732 this.showMarkers(); 1733 this.props.setCommentDialogClosed(); 1734 let point = { 1735 x: e.clientX, 1736 y: e.clientY 1737 }; 1738 if (this.props.embedMode) point = this.props.Canvas.current.dynamic.getPointer({ 1739 clientX: point.x, 1740 clientY: point.y 1741 }); 1742 let marker = { 1743 owner: this.state.uid, 1744 date: new Date().getTime(), 1745 position: point, 1746 color: this.nextMarkerColor 1747 }; 1748 this.props.markerCreate(marker); 1749 this.props.setCurrentMarker(this.state.markers.length - 1); 1750 this.props.setMovingMarkerPoint(point); 1751 this.props.setMarkerMoving(true); 1752 this.markerWasMovedAfterCreation = false; 1753 this.nextMarkerColor = this.getRandomMarkerColor(); 1754 this.props.setNewMarker(true); 1755 } 1756 onCloseFeedbackPopUp() { 1757 this.setState({ 1758 feedbacPopUp: false, 1759 markerIndex: null, 1760 commentIndex: null 1761 }); 1762 } 1763 showDeletePopUp(markerIndex, commentIndex) { 1764 this.setState({ 1765 feedbacPopUp: true, 1766 feedbackPopUpTitle: "Sure you want to delete this comment?", 1767 feedbackPopUpContent: "This action can't be undone.", 1768 feedbackPopUpOk: "Delete", 1769 feedbackPopUpType: "delete", 1770 markerIndex: markerIndex, 1771 commentIndex: commentIndex 1772 }); 1773 } 1774 addMarkerStart(e) { 1775 // this.props.Canvas.current.dynamic.defaultCursor = "grabbing" 1776 // this.props.Canvas.current.bup2Cursor = "grabbing" 1777 // 1778 if (this.state.newMarker && !this.justRemoved) { 1779 this.removeMarker(e); 1780 this.justRemoved = true; 1781 return; 1782 } 1783 this.showMarkers(); 1784 this.props.setCommentDialogClosed(); 1785 let point = { 1786 x: e.clientX || e.touches[0].pageX, 1787 y: e.clientY || e.touches[0].pageY 1788 }; 1789 if (this.props.embedMode) point = this.props.Canvas.current.dynamic.getPointer({ 1790 clientX: point.x, 1791 clientY: point.y 1792 }); 1793 let marker = { 1794 owner: this.state.uid, 1795 date: new Date().getTime(), 1796 position: point, 1797 color: this.nextMarkerColor 1798 }; 1799 this.props.markerCreate(marker); 1800 this.props.setCurrentMarker(this.state.markers.length - 1); 1801 this.props.setMovingMarkerPoint(point); 1802 this.props.setMarkerMoving(true); 1803 this.markerWasMovedAfterCreation = false; 1804 this.nextMarkerColor = this.getRandomMarkerColor(); 1805 this.props.setNewMarker(true); 1806 } 1807 createComment(marker) { 1808 let text = this.threadCommentDialogTextarea.current.value.trim(); 1809 this.threadCommentDialogTextarea.current.value = ""; 1810 if (text === '') return; 1811 this.commentsWasUpdated = true; 1812 let comment = { 1813 index: this.state.markers[marker].comments.length, 1814 uid: this.state.uid, 1815 text: text, 1816 date: new Date(), 1817 marker: marker 1818 }; 1819 this.props.commentCreate(comment); 1820 this.commentWasPosted = true; 1821 this.props.setCommentEditing(""); 1822 setTimeout(() => { 1823 this.threadCommentDialogTextarea.current.focus(); 1824 }, 10); 1825 // this.props.setCreateCommentTextareaFocus(true); 1826 console.log("here we will save markers createComment"); 1827 this.setState({ 1828 commentWordsCount: 0 1829 }); 1830 if (window.innerWidth > 600) { 1831 this.threadCommentDialogTextarea.current.style.height = "58px"; 1832 } 1833 } 1834 1835 // updateMarker(index, position) { 1836 // if (parent < 0) position = position || this.state.markers[index].position; 1837 1838 // this.commentsWasUpdated = true; 1839 1840 // let marker = { 1841 // ...this.state.markers[index], 1842 // position: position 1843 // }; 1844 // this.props.updateMarker(marker); 1845 // this.props.setCommentDialogClosed() 1846 // console.log("here we will save markers updateMarker") 1847 // } 1848 1849 closeCommentDialog() { 1850 this.props.setCommentDialogClosed(); 1851 } 1852 1853 // move 1854 startMoveMarker(index) { 1855 let marker = this.state.markers[index]; 1856 let position = marker ? marker.position : { 1857 x: 0, 1858 y: 0 1859 }; 1860 this.props.setCurrentMarker(index); 1861 1862 // let isLoggedIn = !!this.state.uid; 1863 // let isPublic = this.state.isPublic; 1864 // let isOwnerOfMarkerOrClip = this.state.uid === marker.owner || this.props.owner; 1865 if (this.state.currentMarker !== index) this.props.setCommentDialogClosed(); 1866 // console.log("isPublic", isPublic) 1867 // owner - isOwnerOfMarkerOrClip 1868 // logged - isLoggedIn 1869 // public - isPublic 1870 // if (!isOwnerOfMarkerOrClip) { 1871 // // if (!isPublic) return; 1872 // } 1873 // console.log("going to show") 1874 // if (!isOwnerOfMarkerOrClip) return; 1875 // if (!isLoggedIn) return; 1876 this.props.setMarkerMoving(true); 1877 this.props.setMovingMarkerPoint(position); 1878 1879 // cancel editing 1880 this.props.setCommentEditing(""); 1881 } 1882 correctMarkerPosition() { 1883 const point = { 1884 ...this.state.movingMarkerPoint 1885 }; 1886 point.x = 0 > point.x ? 1 : 100 < point.x ? 99 : point.x; 1887 point.y = 0 > point.y ? 1 : 100 < point.y ? 99 : point.y; 1888 1889 // fabric.util.transformPoint(this.state.movingMarkerPoint, canvas.viewportTransform) 1890 // let backMatrix = fabric.util.invertTransform(canvas.viewportTransform) 1891 1892 this.props.setMarkerPosition(this.state.currentMarker, point); 1893 }
1894 stopMoveMarker(e) { 1895 if (this.state.currentMarker === null) return; 1896 if (!this.state.markerMoving) return; 1897 if (this.state.commentDialogOpened) this.props.setCommentDialogClosed();else this.props.setCommentDialogOpened(); 1898 if (this.state.newMarker) this.props.setNewMarker(false); 1899 // if (!this.markerWasMovedAfterCreation) this.props.destroyCurrentMarker(); 1900 this.correctMarkerPosition(); 1901 this.props.setMarkerMoving(false); 1902 this.commentsWasUpdated = true; 1903 console.log("here we will save markers stopMoveMarker"); 1904 } 1905 doMoveMarker() { 1906 if (this.state.currentMarker === null) return; 1907 if (this.state.commentDialogOpened) { 1908 this.props.setCommentDialogClosed(); 1909 this.markersTrashOpened = true; 1910 } 1911 if (!this.state.markerMoving && this.state.currentMarker !== null && this.state.movingMarkerPoint.x !== null) return; 1912 this.props.setMarkerPosition(this.state.currentMarker, this.state.movingMarkerPoint); 1913 this.markerWasMovedAfterCreation = true; 1914 // this.props.Canvas.current.dynamic.defaultCursor = "grabbing" 1915 // this.props.Canvas.current.bup2Cursor = "grabbing" 1916 } 1917 1918 // save marker 1919 setMarkerColor(index, color) { 1920 let marker = { 1921 ...this.state.markers[index], 1922 color: color 1923 }; 1924 this.props.updateMarker(marker); 1925 this.threadCommentDialogTextarea.current.focus(); 1926 this.commentsWasUpdated = true; 1927 } 1928 getClipBounds(canvas) {
1929 let c = {}; 1930 if (this.state.embedMode && this.state.embedImageLoaded && canvas.backgroundImage) { 1931 let coords = canvas.backgroundImage.calcCoords(); 1932 c = { 1933 x1: coords.tl.x, 1934 x2: coords.tr.x, 1935 y1: coords.tl.y, 1936 y2: coords.bl.y 1937 }; 1938 } else { 1939 c = { 1940 x1: this.props.clip.x, 1941 x2: this.props.clip.x + this.props.clip.w, 1942 y1: this.props.clip.y, 1943 y2: this.props.clip.y + this.props.clip.h 1944 }; 1945 } 1946 return c; 1947 } 1948 isMarkersTerritory(point) { 1949 return point.x >= 0 && point.x <= 100 && point.y >= 0 && point.y <= 100; 1950 } 1951 renderDateString(date) { 1952 if (!date.getTime) date = new Date(date); 1953 date = date.getTime(); 1954 let now = new Date().getTime(); 1955 let delta = Math.abs(date - now) / 1000; 1956 let days = Math.floor(delta / 86400); 1957 delta -= days * 86400; 1958 let hours = Math.floor(delta / 3600) % 24; 1959 delta -= hours * 3600; 1960 let minutes = Math.floor(delta / 60) % 60; 1961 delta -= minutes * 60; 1962 let seconds = delta % 60; 1963 if (days > 0) return days + " days"; 1964 if (hours > 0) return hours + " hours"; 1965 if (minutes > 0) return minutes + " minutes"; 1966 return "just now"; 1967 } 1968 getUserphotoByUid(uid) { 1969 if (uid === this.state.uid) return this.state.userphoto;else if (this.props.users && this.props.users.hasOwnProperty(uid)) return this.props.users[uid].photoUrl;else ""; 1970 } 1971 getUsernameByUid(uid) { 1972 if (uid === this.state.uid) return this.state.username;else if (this.props.users && this.props.users.hasOwnProperty(uid)) return this.props.users[uid].displayName;else ""; 1973 } 1974 showMarkers() { 1975 this.props.setMarkers(true); 1976 } 1977 hideMarkers() { 1978 this.props.setMarkers(false); 1979 } 1980 cancelEditingComment() { 1981 this.commentsWasUpdated = true; 1982 this.props.setEditCommentTextareaFocus(false); 1983 this.props.setCommentEditing(""); 1984 } 1985 async removeComment() { 1986 this.commentsWasUpdated = true; 1987 await this.props.removeComment(this.state.markerIndex, this.state.commentIndex); 1988 console.log("here we will save markers removeComment"); 1989 if (window.innerWidth > 600) { 1990 this.threadCommentDialogTextarea.current.style.height = "58px"; 1991 } 1992 if (this.threadCommentDialogInner.current) { 1993 this.threadCommentDialogTextarea.current.style.maxHeight = 322 - this.threadCommentDialogInner.current.offsetHeight + 58 + "px"; 1994 } 1995 this.onCloseFeedbackPopUp(); 1996 } 1997 saveEditedComment(markerIndex, commentIndex) { 1998 let text = this.editCommentDialogTextarea.current.value.trim(); 1999 this.editCommentDialogTextarea.current.value = ""; 2000 if (text === '') return; 2001 this.commentsWasUpdated = true; 2002 let comment = { 2003 ...this.state.markers[markerIndex].comments[commentIndex], 2004 text: text, 2005 edited: new Date() 2006 }; 2007 this.props.updateComment(comment); 2008 this.props.setEditCommentTextareaFocus(false); 2009 this.props.setCommentEditing(""); 2010 console.log("here we will save markers saveEditedComment"); 2011 } 2012 renderCommentIntoThread(markerIndex, item) { 2013 if (item == null) return; 2014 let editingComment = null; 2015 if (this.state.editingComment) { 2016 let ar = this.state.editingComment.split("-"); 2017 if (ar[0] == markerIndex) editingComment = parseFloat(ar[1]); 2018 } 2019 let display = /*#__PURE__*/react_default.a.createElement("p", { 2020 className: "commentText" 2021 }, editingComment == item.index, item.text); 2022 if (editingComment === item.index) { 2023 let classes = ["editingComment", this.state.editCommentTextareaFocus ? "" : "blurred"]; 2024 display = /*#__PURE__*/react_default.a.createElement("div", { 2025 className: classes.join(" ") 2026 }, /*#__PURE__*/react_default.a.createElement(react_textarea_autosize_browser_esm["a" /* default */], { 2027 autoFocus: true, 2028 maxLength: "1000", 2029 ref: this.editCommentDialogTextarea, 2030 defaultValue: item.text, 2031 spellCheck: "false", 2032 maxRows: "200", 2033 onKeyDown: e => { 2034 e.nativeEvent.stopImmediatePropagation(); 2035 this.preventBubbling(e); 2036 if ((e.ctrlKey || e.metaKey) && e.keyCode == 13) { 2037 this.saveEditedComment(markerIndex, item.index); 2038 } 2039 }, 2040 onKeyPress: e => { 2041 e.nativeEvent.stopImmediatePropagation(); 2042 this.preventBubbling(e); 2043 }, 2044 onKeyUp: e => { 2045 e.nativeEvent.stopImmediatePropagation(); 2046 this.preventBubbling(e); 2047 }, 2048 placeholder: "Write here" 2049 }), /*#__PURE__*/react_default.a.createElement("div", null, /*#__PURE__*/react_default.a.createElement("div", { 2050 className: "saveComment", 2051 onClick: () => { 2052 this.saveEditedComment(markerIndex, item.index); 2053 }, 2054 style: { 2055 backgroundColor: this.state.markers[this.state.currentMarker].color 2056 } 2057 }, "Done"), /*#__PURE__*/react_default.a.createElement("div", { 2058 className: "cancelComment", 2059 onClick: () => { 2060 this.cancelEditingComment(); 2061 } 2062 }, "Cancel"))); 2063 } 2064 setTimeout(() => { 2065 if (this.editCommentDialogTextarea.current === null || !this.state.editCommentTextareaFocus) return; 2066 this.editCommentDialogTextarea.current.select(); 2067 this.editCommentDialogTextarea.current.focus(); 2068 this.editCommentDialogTextarea.current.setSelectionRange(this.editCommentDialogTextarea.current.value.length, this.editCommentDialogTextarea.current.value.length); 2069 }, 10);
2070 let classList = ["commentPosted", editingComment === item.index ? "editing" : ""].join(" "); 2071 let isActionsVisible = this.state.uid && this.state.uid === item.uid; 2072 let c = /*#__PURE__*/react_default.a.createElement("div", { 2073 className: classList, 2074 key: item.index 2075 }, isActionsVisible && /*#__PURE__*/react_default.a.createElement("div", { 2076 className: "comment-actions" 2077 }, /*#__PURE__*/react_default.a.createElement("div", { 2078 onMouseDown: () => this.showDeletePopUp(markerIndex, item.index) 2079 }, "Remove"), /*#__PURE__*/react_default.a.createElement("div", { 2080 onMouseDown: () => { 2081 this.props.setCommentEditing(markerIndex, item.index); 2082 this.props.setEditCommentTextareaFocus(true); 2083 } 2084 }, "Edit ", this.state.uid)), /*#__PURE__*/react_default.a.createElement("div", { 2085 className: "commentUser" 2086 }, /*#__PURE__*/react_default.a.createElement("i", { 2087 style: { 2088 backgroundImage: ["url(", this.getUserphotoByUid(item.uid), ")"].join("") 2089 } 2090 }), /*#__PURE__*/react_default.a.createElement("span", null, this.getUsernameByUid(item.uid))), display, editingComment !== item.index && /*#__PURE__*/react_default.a.createElement("p", { 2091 className: "commentDate" 2092 }, this.renderDateString(item.date))); 2093 return c; 2094 } 2095 2096 // render edit comment dialog 2097 renderThreadCommentDialog(pos) {
2098 let canvasRightLimitX = this.state.sizes.width; 2099 let marker = this.state.markers[this.state.currentMarker]; 2100 let x = pos.x; 2101 let y = pos.y; 2102 let lefty = ""; 2103 if (x > canvasRightLimitX - 250) { 2104 x = pos.x - 330; 2105 } 2106 2107 // let colorsListElements = []; 2108 let isOwnerOfMarkerOrClip = this.state.uid === marker.owner || this.props.owner; 2109 let classNames = ["ThreadCommentDialog", isOwnerOfMarkerOrClip ? "" : "commenter", lefty].join(" "); 2110 // this.colorsList.forEach((color, index) => { 2111 // let className = ""; 2112 // if (marker.color == color) { 2113 // className = "current"; 2114 // } 2115 // colorsListElements.push(<div key={index} style={{ backgroundColor: color }} className={className} onMouseDown={() => this.setMarkerColor(this.state.currentMarker, color)}></div>) 2116 // }); 2117 2118 let comments = []; 2119 marker.comments.forEach(item => { 2120 if (!item) return; 2121 if (this.state.editingComment && window.innerWidth <= 600) { 2122 let ar = this.state.editingComment.split("-"); 2123 if (parseInt(ar[1]) == item.index) { 2124 comments.push(this.renderCommentIntoThread(marker.index, item)); 2125 } 2126 } else { 2127 comments.push(this.renderCommentIntoThread(marker.index, item)); 2128 } 2129 }); 2130 // comments = comments.reverse(); 2131 2132 let commentPostingForm = ""; 2133 let loginDiv = ""; 2134 let styles = {}; 2135 let classes = [!this.state.createCommentTextareaFocus && marker.comments.length > 0 ? "blurred" : ""]; 2136 styles = { 2137 left: x + 30 + "px", 2138 // bottom: ((this.state.sizes.height - y - 30) + "px") 2139 top: y - 82 + "px", 2140 top: y - 304 + "px", 2141 height: "608px" 2142 }; 2143 let sizes = this.state.sizes; 2144 let commentsRef = this.commentsRef.current; 2145 if (pos.x < 0) { 2146 styles.left = "0px"; 2147 styles.zIndex = "1"; 2148 } 2149 if (pos.x > sizes.width) { 2150 styles.left = "calc(100% - 238px)"; 2151 styles.zIndex = "1"; 2152 } 2153 if (pos.y < 0) { 2154 styles.top = "0px"; 2155 styles.alignItems = "flex-start"; 2156 } else if (commentsRef && pos.y < commentsRef.getBoundingClientRect().height / 2) { 2157 styles.top = "-6px"; 2158 styles.height = "auto"; 2159 } 2160 if (pos.y > sizes.height) { 2161 styles.top = "calc(100% - 608px)"; 2162 styles.alignItems = "flex-end"; 2163 } else if (commentsRef && sizes.height - pos.y < commentsRef.getBoundingClientRect().height / 2) { 2164 styles.top = "auto"; 2165 styles.bottom = "-6px"; 2166 styles.display = "block"; 2167 styles.height = "auto"; 2168 } 2169 if (isOwnerOfMarkerOrClip) { 2170 classes = "newCommentDialog-owner " + classes.join(" "); 2171 commentPostingForm = /*#__PURE__*/react_default.a.createElement("div", { 2172 className: classes 2173 }, window.innerWidth < 600 ? /*#__PURE__*/react_default.a.createElement(react_textarea_autosize_browser_esm["a" /* default */], { 2174 autoFocus: true, 2175 minRows: 1, 2176 maxRows: 6, 2177 ref: this.threadCommentDialogTextarea, 2178 spellCheck: "false", 2179 onKeyDown: e => { 2180 this.preventBubbling(e); 2181 if ((e.ctrlKey || e.metaKey) && e.keyCode == 13) { 2182 this.createComment(marker.index); 2183 } 2184 }, 2185 onKeyPress: e => { 2186 e.nativeEvent.stopImmediatePropagation(); 2187 }, 2188 onKeyUp: e => { 2189 e.nativeEvent.stopImmediatePropagation(); 2190 }, 2191 placeholder: "Write here", 2192 maxLength: "1000", 2193 onChange: e => { 2194 this.updateCommentWordsCount(e); 2195 } 2196 }) : /*#__PURE__*/react_default.a.createElement("textarea", { 2197 autoFocus: true, 2198 ref: this.threadCommentDialogTextarea, 2199 spellCheck: "false", 2200 onKeyDown: e => { 2201 e.nativeEvent.stopImmediatePropagation(); 2202 this.preventBubbling(e); 2203 if ((e.ctrlKey || e.metaKey) && e.keyCode == 13) { 2204 this.createComment(marker.index); 2205 } 2206 }, 2207 onKeyPress: e => { 2208 e.nativeEvent.stopImmediatePropagation(); 2209 }, 2210 onKeyUp: e => { 2211 e.nativeEvent.stopImmediatePropagation(); 2212 }, 2213 placeholder: "Write here", 2214 maxLength: "1000", 2215 onChange: e => { 2216 this.updateCommentWordsCount(e); 2217 } 2218 }), /*#__PURE__*/react_default.a.createElement("div", { 2219 className: "bottomLine" 2220 }, /*#__PURE__*/react_default.a.createElement("div", { 2221 className: "characterCounter" 2222 }, this.state.commentWordsCount, "/1000"), /*#__PURE__*/react_default.a.createElement("div", { 2223 className: ["postComment", this.threadCommentDialogTextarea.current && this.threadCommentDialogTextarea.current.value.length == 0 ? "postCommentDisabled" : ''].join(' '), 2224 style: { 2225 backgroundColor: marker.color 2226 }, 2227 onMouseDown: () => this.createComment(marker.index), 2228 title: "Post (\u2318|CTRL + \u23CE)" 2229 }, "Post", /*#__PURE__*/react_default.a.createElement("svg", { 2230 width: "26", 2231 height: "26",
2232 viewBox: "0 0 26 26" 2233 }, /*#__PURE__*/react_default.a.createElement("path", { 2234 fillRule: "evenodd", 2235 d: "M6.67 4.158l15 7.5c1.106.553 1.106 2.13 0 2.684l-15 7.5c-1.233.616-2.575-.618-2.063-1.9L7.384 13 4.607 6.057c-.512-1.28.83-2.515 2.064-1.899zM6 5.5l2.626 6.567 9.532.734a.2.2 0 0 1 .171.127l.013.057a.2.2 0 0 1-.184.214l-9.532.734L6 20.5 21 13 6 5.5z" 2236 }))))); 2237 } else { 2238 // if (isPublic) { 2239 classes = "newCommentDialog-owner " + classes.join(" "); 2240 commentPostingForm = /*#__PURE__*/react_default.a.createElement("div", { 2241 className: classes 2242 }, window.innerWidth < 600 ? /*#__PURE__*/react_default.a.createElement(react_textarea_autosize_browser_esm["a" /* default */], { 2243 autoFocus: true, 2244 minRows: 1, 2245 maxRows: 6, 2246 ref: this.threadCommentDialogTextarea, 2247 spellCheck: "false", 2248 onKeyDown: e => { 2249 this.preventBubbling(e); 2250 if ((e.ctrlKey || e.metaKey) && e.keyCode == 13) { 2251 this.createComment(marker.index); 2252 } 2253 }, 2254 onKeyPress: e => { 2255 e.nativeEvent.stopImmediatePropagation(); 2256 }, 2257 onKeyUp: e => { 2258 e.nativeEvent.stopImmediatePropagation(); 2259 }, 2260 placeholder: "Write here", 2261 maxLength: "1000", 2262 onChange: e => { 2263 this.updateCommentWordsCount(e); 2264 } 2265 }) : /*#__PURE__*/react_default.a.createElement("textarea", { 2266 autoFocus: true, 2267 ref: this.threadCommentDialogTextarea, 2268 spellCheck: "false", 2269 onKeyDown: e => { 2270 e.nativeEvent.stopImmediatePropagation(); 2271 this.preventBubbling(e); 2272 if ((e.ctrlKey || e.metaKey) && e.keyCode == 13) { 2273 this.createComment(marker.index); 2274 } 2275 }, 2276 onKeyPress: e => { 2277 e.nativeEvent.stopImmediatePropagation(); 2278 }, 2279 onKeyUp: e => { 2280 e.nativeEvent.stopImmediatePropagation(); 2281 }, 2282 placeholder: "Write here", 2283 maxLength: "1000", 2284 onChange: e => { 2285 this.updateCommentWordsCount(e); 2286 } 2287 }), /*#__PURE__*/react_default.a.createElement("div", { 2288 className: "bottomLine" 2289 }, /*#__PURE__*/react_default.a.createElement("div", { 2290 className: "characterCounter" 2291 }, this.state.commentWordsCount, "/1000"), /*#__PURE__*/react_default.a.createElement("div", { 2292 className: ["postComment", this.threadCommentDialogTextarea.current && this.threadCommentDialogTextarea.current.value.length == 0 ? "postCommentDisabled" : ''].join(' '), 2293 style: { 2294 backgroundColor: marker.color 2295 }, 2296 onClick: () => this.createComment(marker.index) 2297 }, "Post", /*#__PURE__*/react_default.a.createElement("svg", { 2298 width: "26", 2299 height: "26",
2300 viewBox: "0 0 26 26" 2301 }, /*#__PURE__*/react_default.a.createElement("path", { 2302 fillRule: "evenodd", 2303 d: "M6.67 4.158l15 7.5c1.106.553 1.106 2.13 0 2.684l-15 7.5c-1.233.616-2.575-.618-2.063-1.9L7.384 13 4.607 6.057c-.512-1.28.83-2.515 2.064-1.899zM6 5.5l2.626 6.567 9.532.734a.2.2 0 0 1 .171.127l.013.057a.2.2 0 0 1-.184.214l-9.532.734L6 20.5 21 13 6 5.5z" 2304 }))))); 2305 loginDiv = comments.length > 0 ? /*#__PURE__*/react_default.a.createElement("div", { 2306 className: "loginBottomContainer" 2307 }, /*#__PURE__*/react_default.a.createElement("div", { 2308 className: "loginBottom" 2309 }, /*#__PURE__*/react_default.a.createElement("span", { 2310 className: "loginBottomSpan", 2311 onClick: () => { 2312 this.props.signForm(); 2313 } 2314 }, "Log in"), " to write a reply")) : /*#__PURE__*/react_default.a.createElement("div", { 2315 className: "loginDiv" 2316 }, "There are no comments yet, ", /*#__PURE__*/react_default.a.createElement("span", { 2317 className: "loginBottomSpan", 2318 onClick: () => { 2319 this.props.signForm(); 2320 } 2321 }, "log in"), " to add a comment"); 2322 } 2323 let htmlStyles = { 2324 __html: ['textarea::selection {background-color: ', marker.color, '}'].join("") 2325 }; 2326 let styleTag = /*#__PURE__*/react_default.a.createElement("style", { 2327 dangerouslySetInnerHTML: htmlStyles 2328 }); 2329 let commentCountString = [comments.length, " comment", comments.length > 1 ? "s" : ""].join(""); 2330 let closeButton = /*#__PURE__*/react_default.a.createElement("div", { 2331 className: "closeCommentDialogButton" 2332 }, /*#__PURE__*/react_default.a.createElement("svg", { 2333 width: "26", 2334 height: "26", 2335 viewBox: "0 0 26 26" 2336 }, /*#__PURE__*/react_default.a.createElement("path", { 2337 fillRule: "evenodd", 2338 d: "M6.47 6.47a.75.75 0 0 1 1.06 0L13 11.939l5.47-5.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 0 1.06L14.061 13l5.47 5.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-1.06 0L13 14.061l-5.47 5.47a.75.75 0 0 1-.976.072l-.084-.073a.75.75 0 0 1 0-1.06L11.939 13l-5.47-5.47a.75.75 0 0 1-.072-.976z" 2339 }))); 2340 let colorSelectElements = []; 2341 let colorSelect = ""; 2342 if (isOwnerOfMarkerOrClip) { 2343 this.colorsList.forEach((color, index) => { 2344 colorSelectElements.push(/*#__PURE__*/react_default.a.createElement("div", { 2345 className: marker.color == color ? "current" : "", 2346 onMouseDown: () => this.setMarkerColor(this.state.currentMarker, color), 2347 key: index, 2348 style: { 2349 backgroundColor: color 2350 } 2351 })); 2352 }); 2353 colorSelect = /*#__PURE__*/react_default.a.createElement("div", { 2354 className: "colorSelectDialog" 2355 }, /*#__PURE__*/react_default.a.createElement("div", { 2356 style: { 2357 backgroundColor: marker.color 2358 } 2359 }, /*#__PURE__*/react_default.a.createElement("svg", { 2360 height: "4",
2361 viewBox: "0 0 8 4", 2362 width: "8" 2363 }, /*#__PURE__*/react_default.a.createElement("g", { 2364 fill: "none", 2365 fillRule: "evenodd" 2366 }, /*#__PURE__*/react_default.a.createElement("path", { 2367 d: "m0 0h16v16h-16z" 2368 }), /*#__PURE__*/react_default.a.createElement("g", { 2369 stroke: "rgb(70,77,85)", 2370 strokeLinecap: "round" 2371 }, /*#__PURE__*/react_default.a.createElement("path", { 2372 d: "m1 1 3 2 3-2" 2373 }))))), /*#__PURE__*/react_default.a.createElement("div", { 2374 className: "list" 2375 }, colorSelectElements)); 2376 } 2377 return /*#__PURE__*/react_default.a.createElement("div", { 2378 className: classNames, 2379 style: styles, 2380 onMouseUp: e => { 2381 this.preventBubbling(e); 2382 } 2383 }, styleTag, /*#__PURE__*/react_default.a.createElement("div", { 2384 className: "ThreadCommentDialogOuter", 2385 ref: this.commentsRef 2386 }, /*#__PURE__*/react_default.a.createElement("div", { 2387 className: "ThreadCommentDialogTopbar" 2388 }, /*#__PURE__*/react_default.a.createElement("div", null, comments.length > 0 ? commentCountString : "Write a comment"), colorSelect, /*#__PURE__*/react_default.a.createElement("div", { 2389 onClick: this.closeCommentDialog.bind(this) 2390 }, closeButton)), (comments.length > 0 || this.state.uid && window.innerWidth < 600) && /*#__PURE__*/react_default.a.createElement("div", { 2391 className: "ThreadCommentDialogInner", 2392 ref: this.threadCommentDialogInner 2393 }, /*#__PURE__*/react_default.a.createElement("div", { 2394 className: "postedComments" 2395 }, comments)), this.state.uid ? commentPostingForm : loginDiv)); 2396 } 2397 2398 // render comment marker 2399 renderCommentMarkerToToolbar(index, styles, classes, dummy, npi) { 2400 index = index == -1 ? this.state.markers.length : index; 2401 let classNames = ["CommentMarker", dummy ? "dummy" : "", ...classes]; 2402 let bg = styles.backgroundColor; 2403 delete styles.backgroundColor; 2404 if (dummy) { 2405 styles = {}; 2406 bg = this.nextMarkerColor; 2407 } else if (index === this.state.currentMarker) { 2408 classNames.push("currentMarker"); 2409 const isUserCanComment = this.state.uid && this.state.uid.length > 0; 2410 const isComments = this.state.markers[this.state.currentMarker].comments && this.state.markers[this.state.currentMarker].comments.length > 0; 2411 if ((!this.state.previewMode || isComments || isUserCanComment) && this.state.commentDialogOpened) classNames.push("opened"); 2412 } 2413 2414 // lefty 2415 if (npi && npi.x > this.state.sizes.width - 250) classNames.push("lefty"); 2416 if (npi && 0 > npi.x) { 2417 styles.display = "none !important"; 2418 classNames.push("outFromArea"); 2419 } 2420 let ret = /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 2421 className: classNames.join(" "), 2422 onTouchStart: e => this.startMoveMarker(index), 2423 onTouchEnd: this.touchRemoveMarker, 2424 onMouseDown: e => this.startMoveMarker(index) 2425 // onMouseUp={e => this.stopMoveMarker(index)} 2426 , 2427 key: index, 2428 style: styles 2429 }, /*#__PURE__*/react_default.a.createElement("span", { 2430 className: "number" 2431 }, index + 1), /*#__PURE__*/react_default.a.createElement("svg", { 2432 width: "27px", 2433 height: "30px", 2434 viewBox: "0 0 27 30", 2435 style: { 2436 overflow: "visible" 2437 } 2438 }, /*#__PURE__*/react_default.a.createElement("defs", null, /*#__PURE__*/react_default.a.createElement("filter", { 2439 id: "dropshadow", 2440 height: "130%" 2441 }, /*#__PURE__*/react_default.a.createElement("feGaussianBlur", { 2442 in: "SourceAlpha", 2443 stdDeviation: "1" 2444 }), /*#__PURE__*/react_default.a.createElement("feOffset", { 2445 dx: "0", 2446 dy: "1", 2447 result: "offsetblur" 2448 }), /*#__PURE__*/react_default.a.createElement("feComponentTransfer", null, /*#__PURE__*/react_default.a.createElement("feFuncA", { 2449 type: "linear", 2450 slope: "0.2" 2451 })), /*#__PURE__*/react_default.a.createElement("feMerge", null, /*#__PURE__*/react_default.a.createElement("feMergeNode", null), /*#__PURE__*/react_default.a.createElement("feMergeNode", { 2452 in: "SourceGraphic" 2453 }
2453))), /*#__PURE__*/react_default.a.createElement("filter", { 2454 x: "-9.3%", 2455 y: "-8.3%", 2456 width: "118.5%", 2457 height: "116.7%", 2458 filterUnits: "objectBoundingBox", 2459 id: "filter-1" 2460 }, /*#__PURE__*/react_default.a.createElement("feOffset", { 2461 dx: "0", 2462 dy: "0", 2463 in: "SourceAlpha", 2464 result: "shadowOffsetOuter1" 2465 }), /*#__PURE__*/react_default.a.createElement("feGaussianBlur", { 2466 stdDeviation: "0.5", 2467 in: "shadowOffsetOuter1", 2468 result: "shadowBlurOuter1" 2469 }), /*#__PURE__*/react_default.a.createElement("feColorMatrix", { 2470 values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.128113678 0", 2471 type: "matrix", 2472 in: "shadowBlurOuter1", 2473 result: "shadowMatrixOuter1" 2474 }), /*#__PURE__*/react_default.a.createElement("feMerge", null, /*#__PURE__*/react_default.a.createElement("feMergeNode", { 2475 in: "shadowMatrixOuter1" 2476 }), /*#__PURE__*/react_default.a.createElement("feMergeNode", { 2477 in: "SourceGraphic" 2478 })))), /*#__PURE__*/react_default.a.createElement("g", { 2479 id: "Comments-/Marker", 2480 stroke: "none", 2481 strokeWidth: "1", 2482 fill: "none", 2483 fillRule: "evenodd", 2484 filter: "url(#dropshadow)" 2485 }, /*#__PURE__*/react_default.a.createElement("g", { 2486 id: "NumberMark", 2487 filter: "url(#filter-1)" 2488 }, /*#__PURE__*/react_default.a.createElement("path", { 2489 d: "M13.5,29 C14.9962158,29 26,22 26,13.5 C26,6 20.9558441,1 13.5,1 C6.04415588,1 1,6 1,13.5 C1,22 12.0037842,29 13.5,29 Z", 2490 id: "marker-fill", 2491 fill: bg 2492 }), /*#__PURE__*/react_default.a.createElement("path", { 2493 d: "M13.5,29 C14.0668854,29 17.5018944,26.7297803 20.1183083,24.2163439
2493C23.781909,20.6969362 26,16.9407285 26,13.5 C26,6.56804191 20.4193498,1 13.5,1 C6.5806502,1 1,6.56804191 1,13.5 C1,16.9407285 3.21809103,20.6969362 6.8816917,24.2163439 C9.49810557,26.7297803 12.9331146,29 13.5,29 Z", 2494 id: "marker-border", 2495 stroke: "#FFFFFF", 2496 strokeWidth: "2" 2497 }))))), /*#__PURE__*/react_default.a.createElement("div", { 2498 className: "remove" 2499 })); 2500 return ret; 2501 } 2502 2503 // render comment marker 2504 renderCommentMarker(index, styles, classes, dummy, npi) { 2505 index = index == -1 ? this.state.markers.length : index; 2506 let classNames = ["CommentMarker", dummy ? "dummy" : "", ...classes]; 2507 let bg = styles.backgroundColor; 2508 delete styles.backgroundColor; 2509 if (dummy) { 2510 styles = {}; 2511 bg = this.nextMarkerColor; 2512 } else if (index === this.state.currentMarker) { 2513 classNames.push("currentMarker"); 2514 const isUserCanComment = this.state.uid && this.state.uid.length > 0; 2515 const isComments = this.state.markers[this.state.currentMarker].comments && this.state.markers[this.state.currentMarker].comments.length > 0; 2516 if ((!this.state.previewMode || isComments || isUserCanComment) && this.state.commentDialogOpened) classNames.push("opened"); 2517 } 2518 2519 // lefty 2520 if (npi && npi.x > this.state.sizes.width - 250) classNames.push("lefty"); 2521 if (npi && 0 > npi.x) { 2522 styles.display = "none !important"; 2523 classNames.push("outFromArea"); 2524 } 2525 let ret = /*#__PURE__*/react_default.a.createElement("div", { 2526 className: classNames.join(" "), 2527 onTouchStart: e => this.startMoveMarker(index), 2528 onTouchEnd: this.touchRemoveMarker, 2529 onMouseDown: e => this.startMoveMarker(index), 2530 key: index, 2531 style: styles 2532 }, /*#__PURE__*/react_default.a.createElement("span", { 2533 className: "number" 2534 }, index + 1), /*#__PURE__*/react_default.a.createElement("svg", { 2535 width: "27px", 2536 height: "30px", 2537 viewBox: "0 0 27 30", 2538 style: { 2539 overflow: "visible" 2540 } 2541 }, /*#__PURE__*/react_default.a.createElement("defs", null, /*#__PURE__*/react_default.a.createElement("filter", { 2542 id: "dropshadow", 2543 height: "130%" 2544 }, /*#__PURE__*/react_default.a.createElement("feGaussianBlur", { 2545 in: "SourceAlpha", 2546 stdDeviation: "1" 2547 }), /*#__PURE__*/react_default.a.createElement("feOffset", { 2548 dx: "0", 2549 dy: "1", 2550 result: "offsetblur" 2551 }), /*#__PURE__*/react_default.a.createElement("feComponentTransfer", null, /*#__PURE__*/react_default.a.createElement("feFuncA", { 2552 type: "linear", 2553 slope: "0.2" 2554 })), /*#__PURE__*/react_default.a.createElement("feMerge", null, /*#__PURE__*/react_default.a.createElement("feMergeNode", null), /*#__PURE__*/react_default.a.createElement("feMergeNode", { 2555 in: "SourceGraphic" 2556 }))), /*#__PURE__*/react_default.a.createElement("filter", { 2557 x: "-9.3%", 2558 y: "-8.3%", 2559 width: "118.5%", 2560 height: "116.7%", 2561 filterUnits: "objectBoundingBox", 2562 id: "filter-1" 2563 }, /*#__PURE__*/react_default.a.createElement("feOffset", { 2564 dx: "0", 2565 dy: "0", 2566 in: "SourceAlpha", 2567 result: "shadowOffsetOuter1" 2568 }), /*#__PURE__*/react_default.a.createElement("feGaussianBlur", { 2569 stdDeviation: "0.5", 2570 in: "shadowOffsetOuter1", 2571 result: "shadowBlurOuter1" 2572 }), /*#__PURE__*/react_default.a.createElement("feColorMatrix", { 2573 values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.128113678 0", 2574 type: "matrix", 2575 in: "shadowBlurOuter1", 2576 result: "shadowMatrixOuter1" 2577 }), /*#__PURE__*/react_default.a.createElement("feMerge", null, /*#__PURE__*/react_default.a.createElement("feMergeNode", { 2578 in: "shadowMatrixOuter1" 2579 }), /*#__PURE__*/react_default.a.createElement("feMergeNode", { 2580 in: "SourceGraphic" 2581 })))), /*#__PURE__*/react_default.a.createElement("g", { 2582 id: "Comments-/Marker", 2583 stroke: "none", 2584 strokeWidth: "1", 2585 fill: "none", 2586 fillRule: "evenodd", 2587 filter: "url(#dropshadow)" 2588 }, /*#__PURE__*/react_default.a.createElement("g", { 2589 id: "NumberMark", 2590 filter: "url(#filter-1)" 2591 }, /*#__PURE__*/react_default.a.createElement("path", { 2592 d: "M13.5,29 C14.9962158,29 26,22 26,13.5 C26,6 20.9558441,1 13.5,1 C6.04415588,1 1,6 1,13.5 C1,22 12.0037842,29 13.5,29 Z", 2593 id: "marker-fill", 2594 fill: bg 2595 }), /*#__PURE__*/react_default.a.createElement("path", { 2596 d: "M13.5,29 C14.0668854,29 17.5018944,26.7297803 20.1183083,24.2163439
2596C23.781909,20.6969362 26,16.9407285 26,13.5 C26,6.56804191 20.4193498,1 13.5,1 C6.5806502,1 1,6.56804191 1,13.5 C1,16.9407285 3.21809103,20.6969362 6.8816917,24.2163439 C9.49810557,26.7297803 12.9331146,29 13.5,29 Z", 2597 id: "marker-border", 2598 stroke: "#FFFFFF", 2599 strokeWidth: "2" 2600 }))))); 2601 return ret; 2602 } 2603 // end marker 2604 2605 render() { 2606 let classNames = ["commentsBar", this.state.markersShow ? "" : "hidden"]; 2607 // markers 2608 let threadCommentDialog = ""; 2609 const canvas = this.props.Canvas.current && this.props.Canvas.current.dynamic; 2610 if (!canvas) return null; 2611 let markers = []; 2612 let outsiders = []; 2613 const clipRect = this.getClipRect(canvas); 2614 const clipStartPoint = fabric.util.transformPoint({ 2615 x: clipRect.left, 2616 y: clipRect.top 2617 }, canvas.viewportTransform); 2618 2619 // for debugging clip area 2620 // let rectProps = {}; 2621 // if (canvas && canvas.backgroundImage) { 2622 // const dims = { 2623 // x: clipRect.width * this.state.zoom, y: clipRect.height * this.state.zoom 2624 // } 2625 // rectProps = { 2626 // position: 'absolute', border: '1px solid red', 2627 // left: clipStartPoint.x + 'px', top: clipStartPoint.y + 'px', 2628 // width: dims.x + 'px', height: dims.y + 'px', 2629 // } 2630 // } 2631 2632 // if there are a lot of comments 2633 if (this.state.markers.forEach && !this.state.canvasInteraction) { 2634 this.state.markers.forEach((marker, index) => { 2635 if (marker === null) return true; 2636 if (marker.position.x === null) return true; 2637 const isMarkersTerritory = this.isMarkersTerritory(marker.position); 2638 const markerPosition = { 2639 x: marker.position.x * clipRect.width * this.state.zoom / 100 + clipStartPoint.x, 2640 y: marker.position.y * clipRect.height * this.state.zoom / 100 + clipStartPoint.y 2641 }; 2642 const markerPositionStyles = { 2643 left: markerPosition.x + 'px', 2644 top: markerPosition.y + 'px', 2645 backgroundColor: marker.color 2646 }; 2647 let classes = []; 2648 if (!isMarkersTerritory) { 2649 classes.push("restricted-area"); 2650 outsiders.push(index); 2651 } 2652 if (this.state.currentMarker == index && this.state.markerMoving) classes.push("moving"); 2653 markers.push(this.renderCommentMarker(index, markerPositionStyles, classes, false, markerPosition)); 2654 }); 2655 } 2656 2657 // if there is new comment 2658 if (this.state.currentMarker !== null && this.state.commentDialogOpened && this.state.markers[this.state.currentMarker] && this.state.markers[this.state.currentMarker].position) { 2659 let marker = this.state.markers[this.state.currentMarker]; 2660 let isMarkersTerritory = this.isMarkersTerritory(marker.position); 2661 const markerPosition = { 2662 x: marker.position.x * clipRect.width * this.state.zoom / 100 + clipStartPoint.x, 2663 y: marker.position.y * clipRect.height * this.state.zoom / 100 + clipStartPoint.y 2664 }; 2665 // let shouldBeShownByPerms = ( 2666 // (!this.state.uid && this.state.markers[this.state.currentMarker].comments && this.state.markers[this.state.currentMarker].comments.length>0) || 2667 // (!!this.state.uid) // && isPublic 2668 // ); 2669 if (isMarkersTerritory) { 2670 threadCommentDialog = this.renderThreadCommentDialog(markerPosition, outsiders.includes(this.state.currentMarker)); 2671 } 2672 } 2673 return /*#__PURE__*/react_default.a.createElement("div", { 2674 className: classNames.join(" ") 2675 }, markers, !this.state.canvasInteraction && threadCommentDialog, /*#__PURE__*/react_default.a.createElement(ModalWindow, { 2676 show: this.state.feedbacPopUp, 2677 popup: true 2678 }, /*#__PURE__*/react_default.a.createElement(components_Popup_Popup, { 2679 title: this.state.feedbackPopUpTitle, 2680 content: this.state.feedbackPopUpContent, 2681 cancel: "Cancel", 2682 ok: this.state.feedbackPopUpOk, 2683 onCancelClick: () => { 2684 this.onCloseFeedbackPopUp(); 2685 }, 2686 onYesClick: () => { 2687 this.removeComment(); 2688 }, 2689 type: this.state.feedbackPopUpType 2690 }))); 2691 // show comments here 2692 } 2693} 2694let mapStateToProps = state => { 2695 return { 2696 uid: state.user.uid, 2697 username: state.user.username, 2698 userphoto: state.user.userphoto, 2699 users: state.embed.users, 2700 isPublic: state.embed.isPublic, 2701 previewMode: state.app.previewMode, 2702 embedMode: state.app.embedMode, 2703 embedImageLoaded: state.embed.embedImageLoaded, 2704 canvasInteraction: state.app.canvasInteraction, 2705 zoom: state.app.zoom, 2706 zoomPoint: state.app.zoomPoint, 2707 initialZoom: state.embed.initialZoom, 2708 imageUrl: state.embed.imageUrl,
2709 imageWidth: state.embed.imageWidth, 2710 imageHeight: state.embed.imageHeight, 2711 markers: state.app.markers, 2712 movingMarkerPoint: state.app.movingMarkerPoint, 2713 editCommentTextareaFocus: state.app.editCommentTextareaFocus, 2714 createCommentTextareaFocus: state.app.createCommentTextareaFocus, 2715 editingComment: state.app.editingComment, 2716 newMarker: state.app.newMarker, 2717 mouse: { 2718 x: state.app.mouseX, 2719 y: state.app.mouseY 2720 }, 2721 sizes: { 2722 left: state.app.sizes.left, 2723 top: state.app.sizes.top, 2724 width: state.app.sizes.width, 2725 height: state.app.sizes.height 2726 }, 2727 clip: { 2728 ...state.clip, 2729 clipped: state.app.clipped, 2730 clipping: state.app.clipping, 2731 moving: state.app.moving, 2732 scaling: state.app.scaling, 2733 transforming: state.app.moving || state.app.scaling, 2734 cornerSize: 8 2735 }, 2736 owner: state.embed.owner, 2737 commentDialogOpened: state.app.commentDialogOpened, 2738 markers: state.app.markers, 2739 currentMarker: state.app.currentMarker, 2740 markerMoving: state.app.markerMoving, 2741 embedImageWidth: state.embed.imageWidth, 2742 embedImageHeight: state.embed.imageHeight, 2743 markersShow: state.app.markersShow 2744 }; 2745}; 2746let mapDispatchToProps = dispatch => { 2747 return { 2748 setEditCommentTextareaFocus: val => dispatch({ 2749 type: "EDIT_COMMENT_TEXTAREA_FOCUS", 2750 value: val 2751 }), 2752 setCreateCommentTextareaFocus: val => dispatch({ 2753 type: "CREATE_COMMENT_TEXTAREA_FOCUS", 2754 value: val 2755 }), 2756 updateMarker: marker => dispatch({ 2757 type: "MARKER_UPDATE", 2758 value: marker 2759 }), 2760 updateComment: comment => dispatch({ 2761 type: "COMMENT_UPDATE", 2762 value: comment 2763 }), 2764 markerCreate: marker => dispatch({ 2765 type: "MARKER_CREATE", 2766 value: marker 2767 }), 2768 commentCreate: comment => dispatch({ 2769 type: "COMMENT_CREATE", 2770 value: comment 2771 }), 2772 markerRemove: index => dispatch({ 2773 type: "MARKER_REMOVE", 2774 value: index 2775 }), 2776 markerDestroy: index => dispatch({ 2777 type: "MARKER_DESTROY", 2778 value: index 2779 }), 2780 setCommentEditing: (marker, index) => dispatch({ 2781 type: "COMMENT_EDITING", 2782 value: index, 2783 marker: marker 2784 }), 2785 removeComment: (marker, index) => dispatch({ 2786 type: "COMMENT_REMOVE", 2787 value: index, 2788 marker: marker 2789 }), 2790 setMovingMarkerPoint: point => dispatch({ 2791 type: 'MOVING_MARKER_POINT', 2792 value: point 2793 }), 2794 setMarkerMoving: (doing, cancelled) => dispatch({ 2795 type: 'MARKER_MOVE', 2796 value: doing 2797 }), 2798 setCurrentMarker: index => dispatch({ 2799 type: 'CURRENT_MARKER', 2800 value: index 2801 }), 2802 setMarkerPosition: (index, position) => dispatch({ 2803 type: 'MARKER_UPDATE', 2804 value: { 2805 index: index, 2806 position: position 2807 } 2808 }), 2809 setCommentDialogOpened: () => dispatch({ 2810 type: 'COMMENT_DIALOG_OPENED', 2811 value: true 2812 }), 2813 setCommentDialogClosed: () => dispatch({ 2814 type: 'COMMENT_DIALOG_OPENED', 2815 value: false 2816 }), 2817 setCommentsBar: set => dispatch({ 2818 type: 'COMMENTS_BAR', 2819 value: set 2820 }), 2821 setNewMarker: set => dispatch({ 2822 type: 'NEW_MARKER', 2823 value: set 2824 }), 2825 setMarkers: set => dispatch({ 2826 type: 'MARKERS_SHOW', 2827 value: set 2828 }) 2829 }; 2830}; 2831/* harmony default export */ var components_Markers_Markers = __webpack_exports__["a"] = (Object(es["b" /* connect */])(mapStateToProps, mapDispatchToProps, null, { 2832 forwardRef: true 2833})(Markers_Markers_Markers)); 2834 2835/***/ }), 2836
2837/***/ "3P5J": 2838/***/ (function(module, exports, __webpack_require__) { 2839 2840// extracted by mini-css-extract-plugin 2841module.exports = {"set-new-password-title":"src-screens-PasswordRecovery-PasswordRecovery__set-new-password-title--iVMg-","set-new-password-sub-title":"src-screens-PasswordRecovery-PasswordRecovery__set-new-password-sub-title--+SSri","email-account":"src-screens-PasswordRecovery-PasswordRecovery__email-account--wrPFh","set-new-password-criteria":"src-screens-PasswordRecovery-PasswordRecovery__set-new-password-criteria--h06ua","password-inputs-contaier":"src-screens-PasswordRecovery-PasswordRecovery__password-inputs-contaier--NN3PM","password-input":"src-screens-PasswordRecovery-PasswordRecovery__password-input--TvREz","password-success-focus":"src-screens-PasswordRecovery-PasswordRecovery__password-success-focus--FmlD1","password-error-focus":"src-screens-PasswordRecovery-PasswordRecovery__password-error-focus--xY+DE","error-message":"src-screens-PasswordRecovery-PasswordRecovery__error-message--OwSFW","change-button":"src-screens-PasswordRecovery-PasswordRecovery__change-button--t4tFt"}; 2842 2843/***/ }), 2844 2845/***/ "3RPd": 2846/***/ (function(module, exports, __webpack_require__) { 2847 2848// extracted by mini-css-extract-plugin 2849module.exports = {"ThreadCommentDialog":"ThreadCommentDialog","captureMode":"captureMode","previewMode":"previewMode","ThreadCommentDialogTopbar":"ThreadCommentDialogTopbar","closeCommentDialogButton":"closeCommentDialogButton","colorSelectDialog":"colorSelectDialog","list":"list","current":"current","commentPosted":"commentPosted","commentUser":"commentUser","commentDate":"commentDate","commentText":"commentText","ThreadCommentDialogInner":"ThreadCommentDialogInner","loginBottomContainer":"loginBottomContainer","loginDiv":"loginDiv","loginBottom":"loginBottom","loginBottomSpan":"loginBottomSpan","postedComments":"postedComments","ThreadCommentDialogOuter":"ThreadCommentDialogOuter","commenter":"commenter","editingComment":"editingComment","cancelComment":"cancelComment","saveComment":"saveComment","comment-actions":"comment-actions","editing":"editing","newCommentDialog-commenter":"newCommentDialog-commenter","postComment":"postComment","postCommentDisabled":"postCommentDisabled","newCommentDialog-owner":"newCommentDialog-owner","bottomLine":"bottomLine","colorsList":"colorsList","characterCounter":"characterCounter","blurred":"blurred","commentsBar":"commentsBar","hidden":"hidden","PureEditor":"PureEditor","restricted-area":"restricted-area","CommentMarker":"CommentMarker","outFromArea":"outFromArea","number":"number","addComment":"addComment","dummy":"dummy","withComments":"withComments","remove":"remove","moving":"moving","lefty":"lefty","opened":"opened","currentMarker":"currentMarker","newCommentDialog":"newCommentDialog"}; 2850 2851/***/ }), 2852 2853/***/ "3dzz": 2854/***/ (function(module, __webpack_exports__, __webpack_require__) { 2855 2856"use strict"; 2857/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("q1tI"); 2858/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 2859/* harmony import */ var _Loader_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("bXmf"); 2860/* harmony import */ var _Loader_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_Loader_css__WEBPACK_IMPORTED_MODULE_1__); 2861 2862 2863/* harmony default export */ __webpack_exports__["a"] = (/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.forwardRef(function Loader(props, ref) { 2864 const { 2865 mode 2866 } = props; 2867 const outer = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(c => props.full && !props.hidden ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 2868 className: _Loader_css__WEBPACK_IMPORTED_MODULE_1___default.a.fullscreen 2869 }, c) : c); 2870 let loader; 2871 if (mode === 'circle') { 2872 loader = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { 2873 style: { 2874 display: props.hidden ? 'none' : 'inline-block' 2875 }, 2876 className: _Loader_css__WEBPACK_IMPORTED_MODULE_1___default.a['loader-circle'] 2877 }); 2878 } else { 2879 loader = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 2880 ref: ref, 2881 style: { 2882 display: props.hidden ? 'none' : 'block' 2883 }, 2884 className: [props.className ? props.className : '', _Loader_css__WEBPACK_IMPORTED_MODULE_1___default.a['lds-ellipsis'], props.white ? _Loader_css__WEBPACK_IMPORTED_MODULE_1___default.a.white : ''].join(' ') 2885 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null)); 2886 } 2887 return outer(loader); 2888})); 2889 2890/***/ }), 2891 2892/***/ "44o8": 2893/***/ (function(module, __webpack_exports__, __webpack_require__) { 2894 2895"use strict"; 2896/* WEBPACK VAR INJECTION */(function(process, module) {/* harmony import */ var core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("rGqo"); 2897/* harmony import */ var core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0__); 2898/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("lSNA"); 2899/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__); 2900/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("q1tI"); 2901/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__); 2902/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("/MKj"); 2903/* harmony import */ var _ClipEditor2_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("316e"); 2904/* harmony import */ var _ClipEditor2_css__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_ClipEditor2_css__WEBPACK_IMPORTED_MODULE_4__); 2905/* harmony import */ var _Toolbar_Toolbar_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("fbhK"); 2906/* harmony import */ var _mods_util_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("p2J/"); 2907/* harmony import */ var _mods_ExtensionMessenger_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__("nxsA"); 2908/* harmony import */ var _mods_config_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__("5uWX"); 2909/* harmony import */ var _PropertiesBar_PropertiesBar_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__("IrVv"); 2910/* harmony import */ var _Ticker_Ticker__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__("bi3B"); 2911/* harmony import */ var _sounds_obturation_ogg__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__("1vL0"); 2912/* harmony import */ var _Markers_Markers_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__("3OHZ"); 2913/* harmony import */ var _mods_lang_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__("nlE3"); 2914/* harmony import */ var _ExtClipToolMenu_ExtClipToolMenu_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__("7Pq9"); 2915/* harmony import */ var _store_js__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__("kXoP"); 2916 2917 2918 2919 2920 2921 2922let browser = {}; 2923if (false) {} 2924 2925 2926 2927 2928 2929 2930 2931 2932 2933
2934const IS_FIREFOX = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; 2935class ClipEditor extends react__WEBPACK_IMPORTED_MODULE_2__["Component"] { 2936 constructor(props) { 2937 super(props); 2938 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(this, "zoomPanModeChange", e => { 2939 // key = m 2940 if (e.keyCode == 77 && this.props.Canvas.current && (this.props.Canvas.current.cmdKey || this.props.Canvas.current.ctrlKey) && this.props.Canvas.current.altKey) { 2941 // let mode = localStorage.getItem("mode") 2942 // if (mode == 'novice') localStorage.setItem("mode", "") 2943 // else localStorage.setItem("mode", "novice") 2944 2945 // NAVMODE MODE CHANGER - REMOVE COMMENT WHEN NEEDED 2946 // this.props.websiteCommand('toggle-navigation-mode') 2947 } 2948 return false; 2949 }); 2950 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(this, "renderMarkers", () => this.props.Canvas.current ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_Markers_Markers_js__WEBPACK_IMPORTED_MODULE_12__[/* default */ "a"], { 2951 ref: this.MarkersRef, 2952 signForm: () => this.props.signForm(), 2953 saveMarkers: this.props.saveMarkers, 2954 Canvas: this.props.Canvas 2955 }) : ''); 2956 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(this, "renderPropertiesBar", () => this.state.notVirgin && (this.state.imageMode || this.state.embedMode) && !_mods_config_js__WEBPACK_IMPORTED_MODULE_8__[/* default */ "a"].getToolsWithDisabledPropertiesBar().includes(this.props.objectData.toolName) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_PropertiesBar_PropertiesBar_js__WEBPACK_IMPORTED_MODULE_9__[/* default */ "a"], { 2957 Canvas: this.props.Canvas 2958 }) : ''); 2959 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(this, "getExtShotBtnClass", () => { 2960 if (this.state.isUser && this.props.autoUploadMode) { 2961 return "extension-shot-button-copy-link"; 2962 } else { 2963 return "extension-shot-button-copy-image"; 2964 } 2965 }); 2966 this.clipMargin = 15; 2967 this.setToolbarCustomPositionStart = this.setToolbarCustomPositionStart.bind(this); 2968 this.setToolbarCustomPositionFinish = this.setToolbarCustomPositionFinish.bind(this); 2969 this.setToolbarCustomPositionMovingFinish = this.setToolbarCustomPositionMovingFinish.bind(this); 2970 this.setToolbarCustomPosition = this.setToolbarCustomPosition.bind(this); 2971 this.setToolbarOpened = this.setToolbarOpened.bind(this); 2972 this.setToolbarClosed = this.setToolbarClosed.bind(this); 2973 this.toggleToolbar = this.toggleToolbar.bind(this); 2974 this.playObturationSound = this.playObturationSound.bind(this); 2975 this.playObturationSoundIfNeeded = this.playObturationSoundIfNeeded.bind(this); 2976 this.toggleCommentsBar = this.toggleCommentsBar.bind(this); 2977 this.websiteCommand = this.websiteCommand.bind(this); 2978 this.setShareDialogOpened = this.setShareDialogOpened.bind(this); 2979 this.setShareDialogClosed = this.setShareDialogClosed.bind(this); 2980 this.toggleMenuBar = this.toggleMenuBar.bind(this); 2981 this.mouseCoordsChanged = false; 2982 this.lang = this.props.lang; 2983 this.locale = _mods_lang_js__WEBPACK_IMPORTED_MODULE_13__[/* default */ "a"].get(this.lang); 2984 this.state = { 2985 isToolbarOpened: true, 2986 markerMoving: props.markerMoving, 2987 newMarker: props.newMarker, 2988 uid: props.uid, 2989 username: props.username, 2990 userphoto: props.userphoto, 2991 menuBarShow: props.menuBarShow, 2992 isPublic: props.isPublic, 2993 historyCursor: props.historyCursor, 2994 commentsBarShow: props.commentsBarShow, 2995 shareDialogOpened: props.shareDialogOpened, 2996 canvasInteraction: false, 2997 initialZoom: props.initialZoom, 2998 zoomPanDisabled: props.zoomPanDisabled, 2999 zoom: props.zoom, 3000 zoomPoint: props.zoomPoint, 3001 mouse: { 3002 x: props.mouse.x, 3003 y: props.mouse.y 3004 }, 3005 imageMode: props.imageMode, 3006 notVirgin: !!props.objectData, 3007 embedMode: props.embedMode, 3008 embedCapturingMode: props.embedCapturingMode, 3009 embedImageLoaded: props.embedImageLoaded, 3010 markersShow: props.markersShow, 3011 transforming: false, 3012 bar: { 3013 top: { 3014 width: 'auto', 3015 height: 40, 3016 left: null, 3017 top: null 3018 }, 3019 bottom: { 3020 width: Math.max(405, props.clip.w), 3021 height: 44, 3022 left: null, 3023 top: null 3024 }, 3025 left: { 3026 width: 40, 3027 height: 258, 3028 left: null, 3029 top: null 3030 }, 3031 right: { 3032 width: 40, 3033 height: 224, 3034 left: null, 3035 top: null 3036 } 3037 }, 3038 clip: this.props.clip, 3039 isExtClipToolMenuOpen: false, 3040 extClipToolMenuY: null, 3041 isUser: Boolean(this.props.uid) 3042 }; 3043 this.toolbarFollowsClip = 1; 3044 this.util = new _mods_util_js__WEBPACK_IMPORTED_MODULE_6__[/* default */ "c"](); 3045 this.initAudio(); 3046 3047 // if we are editing 3048 this.ExtensionMessenger = new _mods_ExtensionMessenger_js__WEBPACK_IMPORTED_MODULE_7__[/* default */ "a"](this); 3049 this.MarkersRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createRef(); 3050 } 3051 static getDerivedStateFromProps(nextProps, prevState) { 3052 let ret = {}; 3053 // modes 3054 if (prevState.zoom !== nextProps.zoom) ret.zoom = nextProps.zoom; 3055 if (prevState.initialZoom !== nextProps.initialZoom) ret.initialZoom = nextProps.initialZoom; 3056 if (prevState.zoomPanDisabled !== nextProps.zoomPanDisabled) ret.zoomPanDisabled = nextProps.zoomPanDisabled; 3057 if (prevState.zoomPoint.x !== nextProps.zoomPoint.x || prevState.zoomPoint.y !== nextProps.zoomPoint.y) { 3058 ret.zoomPoint = nextProps.zoomPoint; 3059 } 3060 if (prevState.isPublic !== nextProps.isPublic) ret.isPublic = nextProps.isPublic; 3061 if (prevState.uid !== nextProps.uid) ret.uid = nextProps.uid; 3062 if (prevState.username !== nextProps.username) ret.username = nextProps.username; 3063 if (prevState.userphoto !== nextProps.userphoto) ret.userphoto = nextProps.userphoto; 3064 if (prevState.canvasInteraction !== nextProps.canvasInteraction) ret.canvasInteraction = nextProps.canvasInteraction; 3065 if (prevState.markerMoving !== nextProps.markerMoving) ret.markerMoving = nextProps.markerMoving; 3066 if (prevState.newMarker !== nextProps.newMarker) ret.newMarker = nextProps.newMarker; 3067 if (prevState.imageMode !== nextProps.imageMode) ret.imageMode = nextProps.imageMode; 3068 if (prevState.embedMode !== nextProps.embedMode) ret.embedMode = nextProps.embedMode; 3069 if (prevState.embedCapturingMode !== nextProps.embedCapturingMode) ret.embedCapturingMode = nextProps.embedCapturingMode; 3070 if (prevState.embedImageLoaded !== nextProps.embedImageLoaded) ret.embedImageLoaded = nextProps.embedImageLoaded; 3071 if (prevState.markersShow !== nextProps.markersShow) ret.markersShow = nextProps.markersShow; 3072 if (nextProps.mouse && nextProps.mouse.x !== prevState.mouse.x || nextProps.mouse.y !== prevState.mouse.y) { 3073 ret.mouse = nextProps.mouse; 3074 } 3075 if (prevState.transforming !== nextProps.clip.transforming) { 3076 ret.transforming = nextProps.clip.transforming; 3077 } 3078 if (prevState.historyCursor !== nextProps.historyCursor) ret.historyCursor = nextProps.historyCursor; 3079 if (prevState.menuBarShow !== nextProps.menuBarShow) ret.menuBarShow = nextProps.menuBarShow; 3080 if (prevState.shareDialogOpened !== nextProps.shareDialogOpened) ret.shareDialogOpened = nextProps.shareDialogOpened; 3081 if (prevState.commentsBarShow !== nextProps.commentsBarShow) ret.commentsBarShow = nextProps.commentsBarShow; 3082 if (nextProps.clip.x !== prevState.clip.x || nextProps.clip.y !== prevState.clip.y || nextProps.clip.w !== prevState.clip.w || nextProps.clip.h !== prevState.clip.h) { 3083 ret.clip = { 3084 ...nextProps.clip 3085 }; 3086 } 3087 if (nextProps.clip.w !== prevState.clip.w) { 3088 ret.bar = { 3089 ...prevState.bar, 3090 bottom: { 3091 ...prevState.bar.bottom 3092 } 3093 }; 3094 let minBottomToolbarWidth = 404; 3095 if (!ret.bar.bottom) ret.bar.bottom = {}; 3096 ret.bar.bottom.width = minBottomToolbarWidth > nextProps.clip.w ? minBottomToolbarWidth : nextProps.clip.w; 3097 } 3098 if (prevState.notVirgin !== !!nextProps.objectData) ret.notVirgin = !!nextProps.objectData; 3099 return Object.keys(ret).length > 0 ? ret : null; 3100 } 3101 shouldComponentUpdate(nextProps, nextState, prevProps) { 3102 let should = !this.equals(nextState, this.state); // equals() is your implementation 3103 3104 if (should) { 3105 if (this.state.transforming && !nextProps.clip.transforming || nextState.customToolbarPositionMoving) { 3106 this.toolbarsPosition(nextProps); 3107 } 3108 if (!this.state.imageMode && nextProps.imageMode) { 3109 this.toolbarsFollowClip(); 3110 this.toolbarsPosition(nextProps); 3111 } 3112 } 3113 if (nextProps.saveBeforeDownload && nextProps.saveBeforeDownload != this.props.saveBeforeDownload) { 3114 this.props.Canvas.current.saveCurrentClip(false); 3115 } 3116 return nextProps.tools.tool !== this.props.tools.tool || should; 3117 } 3118 equals(nextState, oldState) { 3119 let ret = oldState.isToolbarOpened === nextState.isToolbarOpened && oldState.isPublic === nextState.isPublic && oldState.zoom === nextState.zoom && oldState.initialZoom === nextState.initialZoom && oldState.zoomPanDisabled === nextState.zoomPanDisabled && oldState.zoomPoint.x === nextState.zoomPoint.x && oldState.zoomPoint.y === nextState.zoomPoint.y && oldState.customToolbarX === nextState.customToolbarX && oldState.customToolbarY === nextState.customToolbarY && oldState.uid === nextState.uid && oldState.username === nextState.username && oldState.userphoto === nextState.userphoto && 3120 // oldState.mouse.x === nextState.mouse.x && 3121 // oldState.mouse.y === nextState.mouse.y && 3122 // markers 3123 oldState.historyCursor === nextState.historyCursor && oldState.markersShow === nextState.markersShow && oldState.imageMode === nextState.imageMode && oldState.embedMode === nextState.embedMode && oldState.embedCapturingMode === nextState.embedCapturingMode && oldState.embedImageLoaded === nextState.embedImageLoaded && oldState.transforming === nextState.transforming && oldState.annotation === nextState.annotation && oldState.menuBarShow === nextState.menuBarShow && oldState.clip.x === nextState.clip.x && oldState.clip.y === nextState.clip.y && oldState.clip.w === nextState.clip.w && oldState.clip.h === nextState.clip.h && oldState.bar.top.hor === nextState.bar.top.hor && oldState.bar.top.expandToLeft === nextState.bar.top.expandToLeft && oldState.bar.top.expandToTo
3123p === nextState.bar.top.expandToTop && oldState.bar.top.stickedToTop === nextState.bar.top.stickedToTop && oldState.bar.top.stickedToBottom === nextState.bar.top.stickedToBottom && oldState.bar.top.stickedToRight === nextState.bar.top.stickedToRight && oldState.bar.top.stickedToLeft === nextState.bar.top.stickedToLeft && oldState.bar.top.left === nextState.bar.top.left && oldState.bar.top.width === nextState.bar.top.width && oldState.bar.top.top === nextState.bar.top.top && oldState.bar.top.height === nextState.bar.top.height && oldState.bar.left.left === nextState.bar.left.left && oldState.bar.left.width === nextState.bar.left.width && oldState.bar.left.top === nextState.bar.left.top && oldState.bar.left.height === nextState.bar.left.height && oldState.bar.bottom.left === nextState.bar.bottom.left && oldState.bar.bottom.width === nextState.bar.bottom.width && oldState.bar.bottom.top === nextState.bar.bottom.top && oldState.bar.bottom.height === nextState.bar.bottom.height && oldState.bar.right.left === nextState.bar.right.left && oldState.bar.right.width === nextState.bar.right.width && oldState.bar.right.top === nextState.bar.right.top && oldState.bar.right.height === nextState.bar.right.height && oldState.canvasInteraction === nextState.canvasInteraction && oldState.notVirgin === nextState.notVirgin && oldState.newMarker === nextState.newMarker && oldState.markerMoving === nextState.markerMoving && oldState.isExtClipToolMenuOpen === nextState.isExtClipToolMenuOpen; 3124 return ret; 3125 } 3126 initAudio() { 3127 if (this.props.embedMode) return; 3128 let path = this.util.getExtContentUrl(); 3129 let embedPath = ""; 3130 if ((this.props.embedMode || this.props.embedCapturingMode) && !path) embedPath = "/embeds/"; 3131 let SaveAudioPath = [embedPath, path, _sounds_obturation_ogg__WEBPACK_IMPORTED_MODULE_11__[/* default */ "a"]].join(""); 3132 this.saveAudio = new Audio(SaveAudioPath); 3133 this.saveAudio.volume = 0.5; 3134 } 3135 componentDidMount() { 3136 this.toolbarsPosition(this.props); 3137 this.ExtensionMessenger.initBrowserMessaging(); 3138 document.addEventListener("mouseup", this.stopMoveMarker); 3139 document.addEventListener("mouseup", this.setToolbarCustomPositionMovingFinish); 3140 document.body.addEventListener("keydown", this.zoomPanModeChange, true); 3141 if (this.props.loadedCallback) this.props.loadedCallback(); 3142 } 3143 componentWillUnmount() { 3144 this.willUnmount = true; 3145 document.removeEventListener("keydown", this.zoomPanModeChange, true); 3146 browser.runtime && browser.runtime.id && this.ExtensionMessenger.stopBrowserMessaging(); 3147 } 3148 3149 // actions bar actions 3150 fireBrowser_CONTENT__BG__COPYCLIP() { 3151 browser.runtime && browser.runtime.id && browser.runtime.sendMessage({ 3152 action: "ALL__BG__COPYCLIP" 3153 }); 3154 } 3155 fireBrowser_CONTENT__BG__SHARECLIP() { 3156 browser.runtime && browser.runtime.id && browser.runtime.sendMessage({ 3157 action: "ALL__BG__SHARECLIP" 3158 }); 3159 } 3160 fireBrowser_CONTENT__BG__COPYLINK() { 3161 browser.runtime && browser.runtime.id && browser.runtime.sendMessage({ 3162 action: "ALL__BG__COPYLINK" 3163 }); 3164 } 3165 setClipPosition(pos) { 3166 let keys = Object.keys(pos); 3167 pos[keys[0]] = parseFloat(pos[keys[0]]) == pos[keys[0]] ? parseFloat(pos[keys[0]]) : this.props.clip[keys[0]]; 3168 let clip = { 3169 ...this.props.clip, 3170 ...pos 3171 }; 3172 clip = this.props.doBorders(clip); 3173 this.props.setClipData(clip); 3174 } 3175 setToolbarCustomPositionStart(e) { 3176 // debugger; 3177 // const pos = { 3178 // x: parseFloat(this.state.bar.top.left.replace("px", '')), 3179 // y: parseFloat(this.state.bar.top.top.replace("px", ''), 3180 // } 3181 const box = e.currentTarget.parentElement.getBoundingClientRect(); 3182 this.setState({ 3183 customToolbarPosition: true, 3184 customToolbarPositionMoving: true, 3185 customToolbarX: e.clientX, 3186 customToolbarY: e.clientY, 3187 customToolbarPositionOffset: { 3188 left: e.clientX - box.left, 3189 top: e.clientY - box.top 3190 } 3191 }); 3192 console.log('TBR', { 3193 left: e.clientX - e.currentTarget.parentElement.offsetLeft, 3194 top: e.clientY - e.currentTarget.parentElement.offsetTop 3195 }, e.currentTarget.parentElement.offsetLeft, e.currentTarget.parentElement.offsetTop); 3196 requestAnimationFrame(this.setToolbarCustomPosition); 3197 } 3198 setToolbarCustomPositionFinish(e) { 3199 this.setState({ 3200 customToolbarPosition: false 3201 }); 3202 } 3203 setToolbarCustomPositionMovingFinish(e) { 3204 const hover = this.props.leftHover || this.props.rightHover || this.props.topHover || this.props.bottomHover; 3205 const stateUpdate = { 3206 customToolbarPositionMoving: false 3207 }; 3208 if (hover) { 3209 this.props.resetToolbarHover(); 3210 stateUpdate.customToolbarPosition = false;
3211 } 3212 this.setState(stateUpdate); 3213 } 3214 setToolbarCustomPosition(e) { 3215 if (this.willUnmount) return; 3216 if (this.state.customToolbarPositionMoving) { 3217 this.setState({ 3218 customToolbarX: this.state.mouse.x, 3219 customToolbarY: this.state.mouse.y 3220 }); 3221 requestAnimationFrame(this.setToolbarCustomPosition); 3222 } 3223 } 3224 getToolbarPosition(props) { 3225 const bar = {}; 3226 const borders = this.props.getBorders(); 3227 const gap = 160; // toolbar expanded gap 3228 const tH = { 3229 width: 400, 3230 height: 44 3231 }; 3232 const tV = { 3233 width: 44, 3234 height: 437 3235 }; 3236 const otH = 132; 3237 const otW = 151; 3238 const clip = this.props.clip; 3239 const margin = this.clipMargin; 3240 let o = false; // vertical; 3241 const point = {}; 3242 const maxWidth = window.innerWidth; 3243 const maxHeight = window.innerHeight; 3244 const sticked = {}; 3245 let expandToLeft = false; 3246 let expandToTop = false; 3247 if (this.state.customToolbarPosition) { 3248 // custom positioning 3249 point.x = this.state.customToolbarX - this.state.customToolbarPositionOffset.left; 3250 point.y = this.state.customToolbarY - this.state.customToolbarPositionOffset.top; 3251 o = point.y < clip.y || point.y > clip.y + clip.h; 3252 if (this.state.customToolbarPositionMoving) { 3253 const hoverMargin = 52; 3254 const leftHover = point.y > clip.y && point.y < clip.y + clip.h && point.x > clip.x - hoverMargin && point.x < clip.x; 3255 const rightHover = point.y > clip.y && point.y < clip.y + clip.h && point.x > clip.x + clip.w && point.x < clip.x + clip.w + hoverMargin; 3256 const topHover = point.y < clip.y && point.y > clip.y - hoverMargin && point.x > clip.x && point.x < clip.x + clip.w; 3257 const bottomHover = point.y > clip.y + clip.h && point.y < clip.y + clip.h + hoverMargin && point.x > clip.x && point.x < clip.x + clip.w; 3258 if (leftHover || rightHover || bottomHover || topHover) { 3259 if (leftHover) this.props.setToolbarHoverLeft();else if (rightHover) this.props.setToolbarHoverRight();else if (bottomHover) this.props.setToolbarHoverBottom();else if (topHover) this.props.setToolbarHoverTop(); 3260 } else this.props.resetToolbarHover(); 3261 } 3262 } else { 3263 // auto positioning 3264 // calculate positions 3265 bar.topInside = props.clip.y - (this.state.bar.top.height + 2 * this.clipMargin) < 0; 3266 bar.bottomInside = props.clip.y + props.clip.h + this.state.bar.bottom.height + 2 * this.clipMargin > borders.bottom; 3267 // bar.bottomInside = (props.clip.y + props.clip.h + this.state.bar.bottom.height + 2 * this.clipMargin) > borders.bottom; 3268 // bar.leftInside = props.clip.x - (this.state.bar.left.width + 2 * this.clipMargin) < 0; 3269 // bar.rightInside = (props.clip.x + props.clip.w + this.state.bar.right.width + 2 * this.clipMargin) > borders.right; 3270 3271 // default outer positions 3272 // if (0 < clip.x - margin - tV.width) { // left vert 3273 // o = false 3274 // point.x = clip.x - margin - tV.width 3275 // point.y = clip.y + clip.h / 2; 3276 // } else if (clip.x + clip.w + margin + tV.width < maxWidth) { // right vert 3277 // o = false 3278 // point.x = clip.x + clip.w + margin 3279 // point.y = clip.y + clip.h / 2; 3280 // } else 3281 if (clip.y - margin - tH.height > 0) { 3282 // top hor 3283 o = true; 3284 point.x = clip.x + clip.w / 2; 3285 point.y = clip.y - margin - tH.height; 3286 } else if (clip.y + clip.h + margin + tH.height < maxHeight) { 3287 // bottom hor 3288 o = true; 3289 point.x = clip.x + clip.w / 2; 3290 point.y = clip.y + clip.h + margin; 3291 } 3292 // if positions not set 3293 if (typeof point.x === 'undefined') { 3294 if (bar.leftInside) { 3295 o = false; 3296 point.x = clip.x + margin; 3297 point.y = clip.y + clip.h / 2; 3298 } else if (bar.rightInside) { 3299 o = false; 3300 point.x = clip.x + clip.w - margin - tV.height; 3301 point.y = clip.y + clip.h / 2; 3302 } else if (bar.bottomInside) { 3303 o = true; 3304 point.x = clip.x + clip.w / 2; 3305 point.y = clip.y + clip.h - margin - tH.height; 3306 } else if (bar.topInside) { 3307 o = true; 3308 point.x = clip.x + clip.w / 2; 3309 point.y = clip.y + margin; 3310 } 3311 } 3312 // may be it should be stopped 3313 if (!o && point.y < tV.height / 2 + margin) { 3314 // top sticked 3315 sticked.topped = true; 3316 point.y = clip.y; 3317 } else if (!o && maxHeight - point.y < tV.height / 2 + margin) { 3318 // bottom sticked 3319 sticked.bottomed = true; 3320 point.y = clip.y + clip.h; 3321 } else if (o && point.x < tH.width / 2 + margin) { 3322 // left sticked 3323 sticked.lefted = true; 3324 point.x = clip.x; 3325 } else if (o && maxWidth - point.x < tH.width / 2 + margin) { 3326 // right sticked 3327 sticked.righted = true; 3328 point.x = clip.x + clip.w; 3329 } 3330 expandToLeft = true; 3331 if (o && maxHeight - point.y - gap - tH.height < 0) expandToTo
3331p = true; 3332 // if (!o && (maxWidth - point.x - gap - tV.width) < 0) expandToLeft = true 3333 // else if (o && (maxHeight - point.y - gap - tH.height) < 0) expandToTop = true 3334 } 3335 return { 3336 o, 3337 ...point, 3338 expandToLeft, 3339 expandToTop, 3340 stickedToTop: sticked.topped, 3341 stickedToBottom: sticked.bottomed, 3342 stickedToLeft: sticked.lefted, 3343 stickedToRight: sticked.righted 3344 }; 3345 } 3346 3347 // positioning of toolbars 3348 toolbarsPosition(props) { 3349 if (!this.toolbarFollowsClip) { 3350 return; 3351 } 3352 let tp = {}; 3353 if (this.props.embedMode) { 3354 props.clip.x = 0; 3355 props.clip.y = 0; 3356 props.clip.w = window.innerWidth; 3357 props.clip.h = window.innerHeight; 3358 tp = { 3359 x: props.clip.w / 2, 3360 y: this.clipMargin, 3361 o: true 3362 }; 3363 } else { 3364 tp = this.getToolbarPosition(props); // toolbar position 3365 } 3366 const position = { 3367 bar: { 3368 ...this.state.bar, 3369 top: { 3370 ...this.state.bar.top, 3371 left: tp.x + "px", 3372 top: tp.y + "px", 3373 hor: tp.o, 3374 stickedToTop: tp.stickedToTop, 3375 stickedToBottom: tp.stickedToBottom, 3376 stickedToLeft: tp.stickedToLeft, 3377 stickedToRight: tp.stickedToRight, 3378 expandToLeft: tp.expandToLeft, 3379 expandToTop: tp.expandToTop 3380 }, 3381 embed: { 3382 ...this.state.bar.top, 3383 left: tp.x + "px", 3384 top: tp.y + "px", 3385 hor: tp.o, 3386 expandToLeft: tp.expandToLeft, 3387 expandToTop: tp.expandToTop 3388 }, 3389 embedCapturing: { 3390 ...this.state.bar.top, 3391 left: tp.x + "px", 3392 top: tp.y + "px", 3393 hor: tp.o, 3394 expandToLeft: tp.expandToLeft, 3395 expandToTop: tp.expandToTop 3396 } 3397 } 3398 }; 3399 this.setState(position); 3400 } 3401 toolbarsFollowClip() { 3402 this.toolbarFollowsClip = 1; 3403 this.toolbarsPosition(this.props); 3404 } 3405 toolbarsUnfollowClip() { 3406 this.toolbarFollowsClip = 0; // todo: add setter/getter for this variable 3407 // this.toolbarsPosition(this.props); 3408 } 3409 preventBubbling(e) { 3410 if (e.currentTarget.className == "ClipEditor") { 3411 // this.props.Canvas.current.bup2Cursor = "grabbing"; 3412 // this.props.Canvas.current.dynamic.defaultCursor = "grabbing" 3413 } 3414 // else{ 3415 e.stopPropagation(); 3416 e.nativeEvent.stopImmediatePropagation(); 3417 // } 3418 return false; 3419 } 3420 cancelClip() { 3421 this.props.Canvas.current.clear(); 3422 this.props.setClipData({ 3423 x: 0, 3424 y: 0, 3425 w: 0, 3426 h: 0 3427 }); 3428 this.props.hideClipControl(); 3429 this.props.unsetImageMode(); 3430 this.props.setCaptureMode(); 3431 this.props.unsetClipped(); 3432 } 3433 downloadClipPressed() { 3434 this.playObturationSoundIfNeeded(); 3435 this.props.Canvas.current.saveCurrentClip(true); 3436 } 3437 // shareClipPressed copyClipPressed copyLinkPressed 3438 3439 saveClipPressed() { 3440 this.playObturationSoundIfNeeded(); 3441 this.props.Canvas.current.saveCurrentClip(); 3442 } 3443 extShotBtnClicked() { 3444 document.body.style.cursor = 'progress'; 3445 this.saveClipPressed(); 3446 } 3447 extClipToolMenuCb(extClipToolMenuAction) { 3448 document.body.style.cursor = 'progress'; 3449 this.props.Canvas.current.saveCurrentClip(false, extClipToolMenuAction); 3450 } 3451 showExtClipToolMenu(e) { 3452 this.setState({ 3453 isExtClipToolMenuOpen: true, 3454 extClipToolMenuY: e.clientY 3455 }); 3456 } 3457 shareClipPressed() { 3458 this.props.Canvas.current.saveShareCurrentClip(); 3459 this.playObturationSoundIfNeeded(); 3460 } 3461 playObturationSoundIfNeeded() { 3462 browser.runtime && browser.runtime.id && browser.runtime.sendMessage({ 3463 action: "CONTENT__BG__PLAY_OBTURATION_SOUND_IF_NEEDED" 3464 }); 3465 } 3466 handleBrowser_BG__CONTENT__PLAY_OBTURATION_SOUND() { 3467 this.playObturationSound(); 3468 } 3469 playObturationSound() { 3470 this.saveAudio.play(); 3471 } 3472 isEscOverlapped() { 3473 let r1 = { 3474 left: window.innerWidth - 21 - 120, 3475 right: window.innerWidth - 21, 3476 top: 21, 3477 bottom: 21 + 32 3478 }; 3479 let r2 = { 3480 left: this.state.clip.x, 3481 right: this.state.clip.x + this.state.clip.w, 3482 top: this.state.clip.y, 3483 bottom: this.state.clip.y + this.state.clip.h 3484 }; 3485 return !(r2.left > r1.right || r2.right < r1.left || r2.top > r1.bottom || r2.bottom < r1.top); 3486 } 3487 zoomInWithButton(o) { 3488 this.props.zoomInWithButton(); 3489 this.props.Canvas.current.saveObjectData(o); 3490 } 3491 zoomOutWithButton(o) { 3492 this.props.zoomOutWithButton(); 3493 this.props.Canvas.current.saveObjectData(o); 3494 } 3495 3496 // 3497 3498 setShareDialogClosed() { 3499 this.props.setShareDialogClosed(); 3500 } 3501 setShareDialogOpened() { 3502 this.props.setShareDialogOpened(); 3503 } 3504 toggleMenuBar() { 3505 this.props.setMenuBar(!this.state.menuBarShow); 3506 } 3507 fitClipToPage() {
3508 let canvas = this.props.Canvas.current; 3509 let to100Zoom = this.state.zoom <= Object(_mods_util_js__WEBPACK_IMPORTED_MODULE_6__[/* currentOrMinZoom */ "b"])(this.state.initialZoom) + 0.00001 && this.state.zoom >= Object(_mods_util_js__WEBPACK_IMPORTED_MODULE_6__[/* currentOrMinZoom */ "b"])(this.state.initialZoom); 3510 let zoom = this.state.initialZoom + 0.00001 == this.state.zoom ? this.state.initialZoom : this.state.initialZoom + 0.00001; 3511 canvas.forceResetZoomPan(to100Zoom ? 1 : zoom); 3512 } 3513 websiteCommand(command) { 3514 this.props.websiteCommand(command); 3515 } 3516 toggleCommentsBar() { 3517 this.props.setCommentsBar(!this.state.commentsBarShow); 3518 } 3519 3520 // comments & markers 3521 toggleMarkers() { 3522 this.props.setMarkers(!this.state.markersShow); 3523 } 3524 showMarkers() { 3525 this.props.setMarkers(true); 3526 } 3527 hideMarkers() { 3528 this.props.setMarkers(false); 3529 } 3530 setToolbarOpened() { 3531 this.setState({ 3532 isToolbarOpened: true 3533 }); 3534 } 3535 setToolbarClosed() { 3536 this.setState({ 3537 isToolbarOpened: false 3538 }); 3539 } 3540 toggleToolbar() { 3541 this.setState({ 3542 isToolbarOpened: !this.state.isToolbarOpened 3543 }); 3544 } 3545 renderMenuBar() { 3546 let menuBar = ""; 3547 if (this.state.menuBarShow) { 3548 menuBar = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3549 className: "menuBar" 3550 }, this.props.owner && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3551 className: "menuItem", 3552 onClick: () => { 3553 this.props.setMenuBar(false); 3554 this.toggleMarkers(); 3555 this.websiteCommand("hide-markers"); 3556 } 3557 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("svg", { 3558 xmlns: "http://www.w3.org/2000/svg", 3559 width: "26", 3560 height: "26",
3561 viewBox: "0 0 26 26" 3562 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("path", { 3563 fillRule: "evenodd", 3564 d: "M20.325 9.919c.115.55.175 1.121.175 1.706 0 2.421-1.282 4.825-3.379 7.184a24.777 24.777 0 0 1-3.221 3.016l-.9.675-.9-.675a24.777 24.777 0 0 1-3.486-3.319l1.213-.89.173.197a23.255 23.255 0 0 0 3 2.812 23.255 23.255 0 0 0 3-2.813c2-2.25 3-4.307 3-6.187 0-.24-.012-.477-.035-.709l1.36-.997zm-.269-3.524a.75.75 0 1 1 .888 1.21l-15 11a.75.75 0 1 1-.888-1.21zM13 4c2.078 0 3.836.743 5.127 1.95l-1.238.909C15.867 6.003 14.53 5.5 13 5.5c-3.506 0-6 2.638-6 6.125 0 .701.14 1.427.417 2.178l-1.25.918c-.432-1.028-.667-2.06-.667-3.096C5.5 7.483 8.5 4 13 4z" 3565 })), this.state.markersShow ? "Hide" : "Show", " Markers"), this.props.owner && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3566 className: "menuItem", 3567 onClick: () => { 3568 this.props.setMenuBar(false); 3569 this.websiteCommand("change-privacy"); 3570 } 3571 }, this.state.isPublic && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("svg", { 3572 xmlns: "http://www.w3.org/2000/svg", 3573 width: "26", 3574 height: "26",
3575 viewBox: "0 0 26 26" 3576 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("path", { 3577 fillRule: "evenodd", 3578 d: "M13 3.25A4.75 4.75 0 0 1 17.75 8l-.001 3.5H18a2.5 2.5 0 0 1 2.5 2.5v6a2.5 2.5 0 0 1-2.5 2.5H8A2.5 2.5 0 0 1 5.5 20v-6A2.5 2.5 0 0 1 8 11.5h.249L8.25 8a4.75 4.75 0 0 1 4.533-4.745zM18 13H8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1zm-5-8.25A3.25 3.25 0 0 0 9.75 8l-.001 3.5h6.5L16.25 8a3.25 3.25 0 0 0-3.066-3.245z" 3579 })), !this.state.isPublic && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("svg", { 3580 xmlns: "http://www.w3.org/2000/svg", 3581 width: "26", 3582 height: "26", 3583 viewBox: "0 0 26 26" 3584 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("path", { 3585 fillRule: "evenodd", 3586 d: "M13 3.25A4.75 4.75 0 0 1 17.75 8l-.001 3.5H18a2.5 2.5 0 0 1 2.5 2.5v6a2.5 2.5 0 0 1-2.5 2.5H8A2.5 2.5 0 0 1 5.5 20v-6A2.5 2.5 0 0 1 8 11.5h8.249L16.25 8a3.25 3.25 0 0 0-3.066-3.245L13 4.75A3.247 3.247 0 0 0 9.75 8h-1.5c0-1.565.757-2.953 1.925-3.819A4.729 4.729 0 0 1 13 3.25zM18 13H8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1z" 3587 })), "Set ", this.state.isPublic ? "Private" : "Public"), this.props.owner && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3588 className: "menuItem", 3589 onClick: () => { 3590 this.props.setMenuBar(false); 3591 this.websiteCommand("rename"); 3592 } 3593 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("svg", { 3594 xmlns: "http://www.w3.org/2000/svg", 3595 width: "26", 3596 height: "26",
3597 viewBox: "0 0 26 26" 3598 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("path", { 3599 fillRule: "evenodd", 3600 d: "M6.5 16v3.75c0 .38.282.693.648.743l.102.007h11.5a.75.75 0 0 0 .743-.648l.007-.102V16H21v3.75a2.25 2.25 0 0 1-2.096 2.245L18.75 22H7.25a2.25 2.25 0 0 1-2.245-2.096L5 19.75V16h1.5zm6.74-8.32v2.336h1.952v1.248H13.24v3.6c0 1.616 1.136 1.824 1.728 1.824.224 0 .368-.032.368-.032v1.376s-.224.032-.544.032c-1.04 0-3.104-.32-3.104-3.024v-3.776h-1.056v-1.248h1.104V7.68h1.504zM6 12a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm14 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-1.25-8a2.25 2.25 0 0 1 2.245 2.096L21 6.25V10h-1.5V6.25a.75.75 0 0 0-.648-.743L18.75 5.5H7.25a.75.75 0 0 0-.743.648L6.5 6.25V10H5V6.25a2.25 2.25 0 0 1 2.096-2.245L7.25 4h11.5z" 3601 })), "Rename"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3602 className: "menuItem", 3603 onClick: () => { 3604 this.props.setMenuBar(false); 3605 this.websiteCommand("copy-named-link"); 3606 } 3607 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("svg", { 3608 xmlns: "http://www.w3.org/2000/svg", 3609 width: "26", 3610 height: "26",
3611 viewBox: "0 0 26 26" 3612 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("path", { 3613 fillRule: "evenodd", 3614 d: "M11 12.893c0 1.184.807 2.107 1.75 2.107h5c.943 0 1.75-.923 1.75-2.107V8.607c0-1.184-.807-2.107-1.75-2.107h-5c-.803 0-1.525.675-1.707 1.643a.75.75 0 1 1-1.474-.276C9.877 6.222 11.185 5 12.75 5h5C19.569 5 21 6.636 21 8.607v4.286c0 1.971-1.431 3.607-3.25 3.607h-5c-1.819 0-3.25-1.636-3.25-3.607a.75.75 0 0 1 1.5 0zm4 .214C15 11.923 14.193 11 13.25 11h-5c-.943 0-1.75.923-1.75 2.107v4.286c0 1.184.807 2.107 1.75 2.107h5c.802 0 1.523-.672 1.706-1.639a.75.75 0 0 1 1.474.28C16.12 19.78 14.813 21 13.25 21h-5C6.431 21 5 19.364 5 17.393v-4.286C5 11.136 6.431 9.5 8.25 9.5h5c1.819 0 3.25 1.636 3.25 3.607a.75.75 0 0 1-1.5 0z" 3615 })), "Copy named URL"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3616 className: "menuItem save", 3617 onClick: () => { 3618 this.props.setMenuBar(false); 3619 this.downloadClipPressed(); 3620 } 3621 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("svg", { 3622 xmlns: "http://www.w3.org/2000/svg", 3623 width: "26", 3624 height: "26",
3625 viewBox: "0 0 26 26" 3626 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("path", { 3627 fillRule: "evenodd", 3628 d: "M13 4a6.003 6.003 0 0 1 5.672 4.037A6 6 0 0 1 18 20H8a6 6 0 0 1-.672-11.963A6.003 6.003 0 0 1 13 4zm0 1.5a4.502 4.502 0 0 0-4.254 3.028l-.31.895-.942.105A4.5 4.5 0 0 0 8 18.5h10a4.5 4.5 0 0 0 .506-8.972l-.942-.105-.31-.895A4.502 4.502 0 0 0 13 5.5zm0 2.524a.75.75 0 0 1 .75.75v5.648l1.77-1.474a.75.75 0 0 1 .96 1.152L13 17l-3.48-2.9a.75.75 0 0 1 .96-1.152l1.77 1.474V8.774a.75.75 0 0 1 .75-.75z" 3629 })), "Download"), this.props.owner && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3630 className: "menuItem", 3631 onClick: () => { 3632 this.props.setMenuBar(false); 3633 this.websiteCommand("remove"); 3634 } 3635 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("svg", { 3636 xmlns: "http://www.w3.org/2000/svg", 3637 width: "26", 3638 height: "26", 3639 viewBox: "0 0 26 26" 3640 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("path", { 3641 fillRule: "evenodd", 3642 d: "M15.901 3.5l1 1.5H20.5a.75.75 0 0 1 .102 1.493L20.5 6.5h-.767l-.45 13.31a1.75 1.75 0 0 1-1.602 1.684l-.148.006H8.467a1.75 1.75 0 0 1-1.738-1.544l-.011-.147L6.266 6.5H5.5a.75.75 0 0 1-.743-.648L4.75 5.75a.75.75 0 0 1 .648-.743L5.5 5h3.599l1-1.5H15.9zM15.1 5H10.9l-1 1.5H7.767l.45 13.258a.25.25 0 0 0 .185.233l.065.009h9.066a.25.25 0 0 0 .24-.177l.01-.065.449-13.258h-2.133l-1-1.5zm.401 3v10H14V8h1.5zM12 8v10h-1.5V8H12z" 3643 })), "Delete")); 3644 } 3645 return menuBar; 3646 } 3647 renderFloatingButton() { 3648 let floatingButton = ""; 3649 const isAnonymous = window.location.href.indexOf("/demo") !== -1 && window.location.href.replace(/[^\/]+/gi, "").length == 3; 3650 const addCommentBarClassName = [this.state.markersShow ? "" : "hidden", "round-button", "addComment", this.state.markerMoving && !this.state.newMarker ? "remove" : ""].join(" "); 3651 const dummy = this.MarkersRef.current && this.MarkersRef.current.renderCommentMarker(-1, {}, [], true); 3652 const addMarkerStart = this.MarkersRef.current && this.MarkersRef.current.addMarkerStart; 3653 const addMarkerByClickStart = this.MarkersRef.current && this.MarkersRef.current.addMarkerByClickStart; 3654 const removeMarker = this.MarkersRef.current && this.MarkersRef.current.removeMarker; 3655 const touchRemoveMarker = this.MarkersRef.current && this.MarkersRef.current.touchRemoveMarker; 3656 floatingButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3657 id: "floatingButton" 3658 }, 3659 // SAVE CLIP 3660 this.props.owner && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3661 className: "saveButton", 3662 "data-title": this.locale.actions.saveClip, 3663 onClick: () => { 3664 this.props.setMenuBar(false); 3665 //copy named link after saving the clip 3666 try { 3667 let text = window.location.href; 3668 navigator.clipboard.writeText(text); 3669 } catch (e) { 3670 console.log("ScreenClip:", "copy error", e); 3671 } 3672 this.saveClipPressed(); 3673 } 3674 }), 3675 // NOT CLIPCLIP COPY 3676 !this.props.clipclipMode && !IS_FIREFOX && this.props.Canvas.current && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3677 "data-title": this.locale.actions.copyClip, 3678 onClick: this.props.clipclipMode ? () => this.websiteCommand("copy-clip") : this.props.Canvas.current.clipToClipboard, 3679 className: "copyButton" 3680 }), 3681 // CLIPCLIP COPY 3682 this.props.clipclipMode && this.props.Canvas.current && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3683 "data-title": this.locale.actions.copyClip, 3684 onClick: this.props.clipclipMode ? () => this.websiteCommand("copy-clip") : this.props.Canvas.current.clipToClipboard, 3685 className: "copyButton" 3686 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3687 className: "copyLinkButton", 3688 "data-title": this.locale.actions.copyShortLink, 3689 onClick: () => { 3690 this.props.setMenuBar(false); 3691 try { 3692 const text = window.location.href.replace(/[^\/]+/gi, "").length <= 3 ? window.location.href : window.location.href.substring(0, window.location.href.lastIndexOf("/")); 3693 navigator.clipboard.writeText(text); 3694 this.props.setAppNotification("Link was copied"); 3695 } catch (e) { 3696 console.log("ScreenClip:", "copy error", e); 3697 } 3698 } 3699 }), 3700 // SHARE (NOT ANON) 3701 !isAnonymous && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3702 "data-title": this.locale.actions.shareClip, 3703 className: "shareButton", 3704 onClick: () => { 3705 this.props.setMenuBar(false); 3706 this.props.websiteCommand("share-dialog"); 3707 } 3708 }), 3709 /*#__PURE__*/ 3710 // ANON DOWNLOAD 3711 react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3712 "data-title": "Download Clip", 3713 className: "downloadButton", 3714 onClick: () => { 3715 this.props.setMenuBar(false); 3716 this.downloadClipPressed(); 3717 } 3718 })); 3719 3720 // { 3721 // !isAnonymous && false && <div title={this.locale.actions.menu} className={showMenuBarClassName} onClick={this.toggleMenuBar.bind(this)}> 3722 // <svg width="26" height="26" viewBox="0 0 26 26"><path fillRule="evenodd" d="M13 19a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm0-7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm0-7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z" /></svg> 3723 // </div> 3724 // } 3725 3726 floatingButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3727 className: "bottomRightActionsBar" 3728 }, this.props.previewMode && this.state.uid && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3729 className: addCommentBarClassName, 3730 onMouseDown: addMarkerStart, 3731 onTouchStart: addMarkerStart, 3732 onClick: addMarkerByClickStart, 3733 onMouseUp: removeMarker, 3734 onTouchEnd: touchRemoveMarker, 3735 style: { 3736 position: "relative", 3737 right: "70px", 3738 top: "-9px" 3739 }, 3740 title: 'Drag this marker to the image to place a comment.' 3741 }, dummy, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("svg", { 3742 className: "remove", 3743 xmlns: "http://www.w3.org/2000/svg", 3744 width: "26", 3745 height: "26",
3746 viewBox: "0 0 26 26" 3747 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("path", { 3748 fillRule: "evenodd", 3749 d: "M15.901 3.5l1 1.5H20.5a.75.75 0 0 1 .102 1.493L20.5 6.5h-.767l-.45 13.31a1.75 1.75 0 0 1-1.602 1.684l-.148.006H8.467a1.75 1.75 0 0 1-1.738-1.544l-.011-.147L6.266 6.5H5.5a.75.75 0 0 1-.743-.648L4.75 5.75a.75.75 0 0 1 .648-.743L5.5 5h3.599l1-1.5H15.9zM15.1 5H10.9l-1 1.5H7.767l.45 13.258a.25.25 0 0 0 .185.233l.065.009h9.066a.25.25 0 0 0 .24-.177l.01-.065.449-13.258h-2.133l-1-1.5zm.401 3v10H14V8h1.5zM12 8v10h-1.5V8H12z" 3750 }))), !window.location.href.includes('chrome-extension:/') && floatingButton); 3751 return floatingButton; 3752 } 3753 // render editor 3754 render() { 3755 let className = []; 3756 className.push("ClipEditor"); 3757 if (this.props.clip.transforming) className.push("hidden"); 3758 const screen_SM = window.innerWidth < 768; 3759 let toolsBar = ""; 3760 if (this.state.imageMode || this.props.embedMode) { 3761 const isEmbed = this.props.embedMode; 3762 const isImage = this.state.imageMode || isEmbed; 3763 const customToolbarPosition = this.state.customToolbarPosition; 3764 const isEmbedCapturing = this.props.embedCapturingMode; 3765 const isClipClipMode = this.props.clipclipMode; 3766 const expandToLeft = this.state.bar.top.expandToLeft; 3767 const expandToTop = this.state.bar.top.expandToTop; 3768 const stickedToBottom = this.state.bar.top.stickedToBottom; 3769 const stickedToTop = this.state.bar.top.stickedToTop; 3770 const stickedToLeft = this.state.bar.top.stickedToLeft; 3771 const stickedToRight = this.state.bar.top.stickedToRight; 3772 const isUser = this.props.uid != ''; 3773 const isToolbarOpened = this.state.isToolbarOpened; 3774 const toolbarClassNames = [customToolbarPosition ? 'customToolbarPosition' : '', expandToTop ? 'expandToTop' : '', expandToLeft ? 'expandToLeft' : '', stickedToBottom ? 'bottomed' : '', stickedToLeft ? 'lefted' : '', stickedToTop ? 'topped' : '', stickedToRight ? 'righted' : '', isEmbedCapturing && !isToolbarOpened || !isToolbarOpened && !isEmbed ? '' : 'opened', isEmbed && !isEmbedCapturing ? 'embedded' : '', this.state.bar.top.hor ? "horizontal" : '', 3775 // ( (isUser ) ? "withComments" : "" ), 3776 isUser && !isEmbedCapturing && !isClipClipMode ? "withComments" : ""]; 3777 const addMarkerStart = this.MarkersRef.current && this.MarkersRef.current.addMarkerStart; 3778 const addMarkerByClickStart = this.MarkersRef.current && this.MarkersRef.current.addMarkerByClickStart; 3779 const removeMarker = this.MarkersRef.current && this.MarkersRef.current.removeMarker; 3780 const touchRemoveMarker = this.MarkersRef.current && this.MarkersRef.current.touchRemoveMarker; 3781 const toolbarMarkerOrRemove = this.MarkersRef.current && this.MarkersRef.current.renderCommentMarkerToToolbar(-1, {}, [], true); 3782 // const toolbarMarkerOrRemove = this.MarkersRef.current && this.MarkersRef.current.renderCommentMarker(-1, {}, [], true); 3783 3784 const inputStyle = { 3785 width: "65px", 3786 marginLeft: "4px" 3787 }; 3788 toolsBar = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_2___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3789 id: "toolbar", 3790 className: toolbarClassNames.join(" ") 3791 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3792 onClick: isEmbed || true ? this.props.setTool : null, 3793 "data-value": 'select', 3794 className: [isEmbed || true ? '' : 'expandable', 'tool', this.props.tools.selectTool, this.props.tools.selectTool === this.props.tools.tool ? 'current' : ''].join(' '), 3795 title: this.locale.tools['select'] 3796 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3797 className: ['tool', this.props.tools.selectTool].join(' '), 3798 onClick: this.props.setTool, 3799 title: this.locale.tools[this.props.tools.selectTool], 3800 "data-value": this.props.tools.selectTool 3801 }), ['select', 'cursor'].filter(tool => tool !== this.props.tools.selectTool).map((tool, i) => { 3802 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3803 key: i, 3804 className: ['tool', tool, tool === this.props.tools.tool ? 'current' : ''].join(' '), 3805 onClick: this.props.setTool, 3806 title: this.locale.tools[tool], 3807 "data-value": tool 3808 }); 3809 })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3810 className: ['tool', 'highlighter', 'highlighter' === this.props.tools.tool ? 'current' : ''].join(' '), 3811 onClick: this.props.setTool, 3812 title: this.locale.tools.highlighter, 3813 "data-value": 'highlighter' 3814 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3815 className: ['tool', 'pen', 'pen' === this.props.tools.tool ? 'current' : ''].join(' '), 3816 onClick: this.props.setTool, 3817 title: this.locale.tools.pen, 3818 "data-value": 'pen' 3819 }), isEmbed && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_2___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3820 className: ['tool', 'ellipse', 'ellipse' === this.props.tools.tool ? 'current' : ''].join(' '), 3821 onClick: this.props.setTool, 3822 title: this.locale.tools.ellipse, 3823 "data-value": 'ellipse' 3824 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3825 className: ['tool', 'rect', 'rect' === this.props.tools.tool ? 'current' : ''].join(' '), 3826 onClick: this.props.setTool, 3827 title: this.locale.tools.rect, 3828 "data-value": 'rect' 3829 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3830 className: ['tool', 'arrow', 'arrow' === this.props.tools.tool ? 'current' : ''].join(' '), 3831 onClick: this.props.setTool, 3832 title: this.locale.tools.arrow, 3833 "data-value": 'arrow' 3834 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3835 className: ['tool', 'arrowtext', 'arrowtext' === this.props.tools.tool ? 'current' : ''].join(' '), 3836 onClick: this.props.setTool, 3837 title: this.locale.tools.arrowtext, 3838 "data-value": 'arrowtext' 3839 })), !isEmbed && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3840 className: ['tool', 'expandable', [this.props.tools.lineTool, this.props.tools.shapeTool].includes(this.props.tools.tool) ? 'current' : ''].join(' ') 3841 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3842 className: ['tool', this.props.tools.expandableTool].join(' '), 3843 onClick: this.props.setTool, 3844 title: this.locale.tools[this.props.tools.expandableTool], 3845 "data-value": this.props.tools.expandableTool 3846 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3847 className: "expanded-bar" 3848 }, ['ellipse', 'rect'].map((tool, i) => { 3849 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3850 key: i, 3851 className: ['tool', tool].join(' '), 3852 onClick: this.props.setTool, 3853 title: this.locale.tools[tool], 3854 "data-value": tool 3855 }); 3856 }), ['arrow', 'arrowtext'].map((tool, i) => { 3857 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3858 key: i, 3859 className: ['tool', tool].join(' '), 3860 onClick: this.props.setTool, 3861 title: this.locale.tools[tool], 3862 "data-value": tool 3863 }); 3864 }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3865 className: ['tool', 'text', 'text' === this.props.tools.tool ? 'current' : ''].join(' '), 3866 onClick: this.props.setTool, 3867 title: this.locale.tools.text, 3868 "data-value": 'text' 3869 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3870 className: ['tool', 'blur', 'blur' === this.props.tools.tool ? 'current' : ''].join(' '), 3871 onClick: this.props.setTool, 3872 title: this.locale.tools.blur, 3873 "data-value": 'blur' 3874 }), isEmbed && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3875 className: ['tool', 'img', 'img' === this.props.tools.tool ? 'current' : ''].join(' '), 3876 onClick: this.props.setTool, 3877 title: this.locale.tools.image, 3878 "data-value": 'img' 3879 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3880 className: 'tool comment withComments addComment ' + (this.state.markerMoving && !this.state.newMarker ? 'remove' : '') 3881 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3882 onMouseDown: addMarkerStart, 3883 onTouchStart: addMarkerStart, 3884 onClick: addMarkerByClickStart, 3885 onMouseUp: removeMarker, 3886 onTouchEnd: touchRemoveMarker, 3887 title: 'Drag this marker to the image to place a comment.' 3888 }, toolbarMarkerOrRemove))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3889 className: "tool shot always expandable", 3890 title: this.locale.actions.saveClip, 3891 onClick: this.saveClipPressed.bind(this) 3892 }), (!isEmbed || window.location.href.includes('chrome-extension:/')) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_2___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3893 className: this.getExtShotBtnClass(), 3894 title: this.locale.actions.saveClip, 3895 onClick: this.extShotBtnClicked.bind(this) 3896 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3897 className: "extension-menu-button", 3898 title: this.locale.actions.moreClipActions, 3899 onClick: this.showExtClipToolMenu.bind(this) 3900 }), this.state.isExtClipToolMenuOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_ExtClipToolMenu_ExtClipToolMenu_js__WEBPACK_IMPORTED_MODULE_14__[/* default */ "a"], { 3901 closeContextMenu: () => this.setState({ 3902 isExtClipToolMenuOpen: false 3903 }), 3904 isUser: isUser, 3905 extClipToolMenuCb: this.extClipToolMenuCb.bind(this), 3906 y: this.state.extClipToolMenuY, 3907 autoUploadMode: this.props.autoUploadMode 3908 }))); 3909 } 3910 if (this.props.canvasInteraction) className.push("canvasInteraction"); 3911 className = className.join(" "); 3912 let zoomButtons = ""; 3913 let navButtons = ""; 3914 let mobileGoBackButton = ""; 3915 let mobileMenuButton = ""; 3916 if (this.props.embedMode) { 3917 mobileMenuButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3918 className: "round-button", 3919 onClick: () => { 3920 this.props.setMenuBar(false); 3921 this.props.websiteCommand("sidebar"); 3922 } 3923 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("svg", { 3924 width: "26", 3925 height: "26",
3926 viewBox: "0 0 26 26" 3927 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("path", { 3928 fillRule: "evenodd", 3929 d: "M21 17v2H5v-2h16zm0-5v1.5H5V12h16zm0-5v1H5V7h16z" 3930 }))); 3931 mobileGoBackButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3932 className: "round-button", 3933 onClick: () => { 3934 this.props.setMenuBar(false); 3935 this.props.websiteCommand("back-button-pressed"); 3936 } 3937 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("svg", { 3938 width: "26", 3939 height: "26", 3940 viewBox: "0 0 26 26" 3941 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("path", { 3942 fillRule: "evenodd", 3943 d: "M8.424 6.52a.75.75 0 0 1 1.152.96l-3.975 4.77H22a.75.75 0 0 1 .743.648l.007.102a.75.75 0 0 1-.75.75H5.6l3.976 4.77a.75.75 0 0 1-.016.979l-.08.077a.75.75 0 0 1-1.056-.096L3.024 13z" 3944 }))); 3945 zoomButtons = this.props.Canvas.current && this.props.Canvas.current.dynamic.backgroundImage ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3946 className: "zoomButtons" 3947 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3948 className: "zoomOutButton", 3949 onClick: this.zoomOutWithButton.bind(this) 3950 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("svg", { 3951 width: "26", 3952 height: "26",
3953 viewBox: "0 0 26 26" 3954 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("rect", { 3955 width: "14", 3956 height: "1.5", 3957 x: "6", 3958 y: "12", 3959 fillRule: "evenodd", 3960 rx: ".75" 3961 }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3962 className: "value" 3963 }, Math.round(this.state.zoom * 100) + "%"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3964 className: "zoomInButton", 3965 onClick: this.zoomInWithButton.bind(this) 3966 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("svg", { 3967 width: "26", 3968 height: "26", 3969 viewBox: "0 0 26 26" 3970 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("path", { 3971 fillRule: "evenodd", 3972 d: "M13.25 6a.75.75 0 0 1 .75.75V12h5.25a.75.75 0 1 1 0 1.5H14v5.75a.75.75 0 1 1-1.5 0V13.5H6.75a.75.75 0 1 1 0-1.5h5.75V6.75a.75.75 0 0 1 .75-.75z" 3973 }))), /* !this.state.zoomPanDisabled */ 3974 this.props.Canvas.current 3975 /* && this.props.Canvas.current.isOut */ && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3976 title: this.locale.actions.fitClipToPage, 3977 className: "fitClipToPage", 3978 onClick: this.fitClipToPage.bind(this) 3979 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("svg", { 3980 width: "26", 3981 height: "26",
3982 viewBox: "0 0 26 26" 3983 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("path", { 3984 fillRule: "evenodd", 3985 d: "M20.222 14.75a.75.75 0 0 1 .75.75v3.75a1.75 1.75 0 0 1-1.75 1.75H15.25a.75.75 0 1 1 0-1.5h3.972a.25.25 0 0 0 .25-.25V15.5a.75.75 0 0 1 .75-.75zM5.75 14.5a.75.75 0 0 1 .743.648l.007.102V19a.25.25 0 0 0 .193.243l.057.007h3.957a.75.75 0 0 1 .101 1.493l-.101.007H6.75a1.75 1.75 0 0 1-1.744-1.606L5 19v-3.75a.75.75 0 0 1 .75-.75zm9.5-9.5h3.972a1.75 1.75 0 0 1 1.744 1.606l.006.144V11a.75.75 0 0 1-1.494.102L19.472 11V6.75a.25.25 0 0 0-.193-.243l-.057-.007H15.25a.75.75 0 0 1-.102-1.493L15.25 5h3.972zm-4.543 0a.75.75 0 0 1 .101 1.493l-.101.007H6.75a.25.25 0 0 0-.243.193L6.5 6.75V11a.75.75 0 0 1-1.493.102L5 11V6.75a1.75 1.75 0 0 1 1.606-1.744L6.75 5h3.957z" 3986 })))) : ""; // 3987 } 3988 const markers = this.renderMarkers(); 3989 const toptoolbar = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_Toolbar_Toolbar_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"], { 3990 style: this.state.bar.top, 3991 visible: true, 3992 id: "tools", 3993 center: toolsBar 3994 }); 3995 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3996 className: className, 3997 onMouseDown: this.preventBubbling.bind(this) 3998 }, !this.props.previewMode && toptoolbar, !this.props.previewMode && this.renderPropertiesBar(), markers, this.props.embedMode && !this.props.previewMode && navButtons, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", { 3999 className: "topMobileToolbar" 4000 }, this.props.embedMode && !this.props.previewMode && mobileMenuButton, this.props.embedMode && !this.props.previewMode && mobileGoBackButton), this.props.embedMode && this.renderFloatingButton(), this.renderMenuBar(), this.props.embedMode && !this.state.zoomPanDisabled && zoomButtons); 4001 } 4002} 4003let mapStateToProps = state => { 4004 return { 4005 bottomHover: state.app.toolbarHoverBottom, 4006 topHover: state.app.toolbarHoverTop, 4007 leftHover: state.app.toolbarHoverLeft, 4008 rightHover: state.app.toolbarHoverRight, 4009 zoomPanDisabled: state.embed.zoomPanDisabled, 4010 markerMoving: state.app.markerMoving, 4011 newMarker: state.app.newMarker, 4012 uid: state.user.uid, 4013 username: state.user.username, 4014 userphoto: state.user.userphoto, 4015 historyCursor: state.embed.historyCursor, 4016 clipclipMode: state.app.clipclipMode, 4017 canvasInteraction: state.app.canvasInteraction, 4018 initialZoom: state.embed.initialZoom, 4019 zoom: state.app.zoom, 4020 zoomPoint: state.app.zoomPoint, 4021 markersShow: state.app.markersShow, 4022 commentsBarShow: state.embed.commentsBarShow, 4023 menuBarShow: state.embed.menuBarShow, 4024 shareDialogOpened: state.app.shareDialogOpened, 4025 previewMode: state.app.previewMode, 4026 isPublic: state.embed.isPublic, 4027 imageMode: state.app.imageMode, 4028 clip: { 4029 ...state.clip, 4030 clipped: state.app.clipped, 4031 clipping: state.app.clipping, 4032 moving: state.app.moving, 4033 scaling: state.app.scaling, 4034 transforming: state.app.moving || state.app.scaling, 4035 cornerSize: 8 4036 }, 4037 mouse: { 4038 x: state.app.mouseX, 4039 y: state.app.mouseY 4040 }, 4041 objectData: state.app.currentObjectData, 4042 tools: state.tools, 4043 owner: state.embed.owner, 4044 embedMode: state.app.embedMode, 4045 embedCapturingMode: state.app.embedCapturingMode, 4046 embedImageLoaded: state.embed.embedImageLoaded, 4047 lang: state.app.lang, 4048 autoUploadMode: state.app.autoUploadMode 4049 }; 4050}; 4051let mapDispatchToProps = dispatch => { 4052 return { 4053 websiteCommand: command => { 4054 dispatch({ 4055 type: "WEBSITE_COMMAND", 4056 value: command 4057 }); 4058 dispatch({ 4059 type: "WEBSITE_COMMAND", 4060 value: false 4061 }); 4062 }, 4063 resetToolbarHover: () => dispatch({ 4064 type: 'RESET_TOOLBAR_HOVER' 4065 }), 4066 setToolbarHoverTop: () => dispatch({ 4067 type: 'TOOLBAR_HOVER_TOP', 4068 value: true 4069 }), 4070 setToolbarHoverBottom: () => dispatch({ 4071 type: 'TOOLBAR_HOVER_BOTTOM', 4072 value: true 4073 }), 4074 setToolbarHoverLeft: () => dispatch({ 4075 type: 'TOOLBAR_HOVER_LEFT', 4076 value: true 4077 }), 4078 setToolbarHoverRight: () => dispatch({ 4079 type: 'TOOLBAR_HOVER_RIGHT', 4080 value: true 4081 }), 4082 setShareDialogOpened: () => dispatch({ 4083 type: 'SHARE_DIALOG_OPENED', 4084 value: true 4085 }), 4086 setShareDialogClosed: () => dispatch({ 4087 type: 'SHARE_DIALOG_OPENED', 4088 value: false 4089 }), 4090 setMenuBar: set => dispatch({ 4091 type: 'MENU_BAR', 4092 value: set 4093 }), 4094 zoomInWithButton: () => dispatch({ 4095 type: 'ZOOM_TO', 4096 point: { 4097 x: null, 4098 y: null 4099 }, 4100 dir: 1 4101 }), 4102 zoomOutWithButton: () => dispatch({ 4103 type: 'ZOOM_TO', 4104 point: { 4105 x: null, 4106 y: null 4107 }, 4108 dir: -1 4109 }), 4110 setClipData: data => dispatch({ 4111 type: 'CLIPCOORDS', 4112 value: data 4113 }), 4114 // setAnnotationMode: () => dispatch({ type: 'ANNOTATION' }), 4115 setImageMode: () => dispatch({ 4116 type: 'IMAGEMODE' 4117 }), 4118 unsetImageMode: () => dispatch({ 4119 type: 'NOTIMAGEMODE' 4120 }), 4121 setCaptureMode: () => dispatch({ 4122 type: 'CAPTUREMODE' 4123 }), 4124 setTool: tool => { 4125 tool = typeof tool == 'string' ? tool : tool.target.dataset.value; 4126 dispatch({ 4127 type: 'CHANGE_TOOL', 4128 value: tool 4129 }); 4130 4131 // return to the select tool if current is img 4132 if (tool === 'img') setTimeout(() => dispatch({ 4133 type: 'CHANGE_TOOL', 4134 value: 'select' 4135 }), 0); 4136 }, 4137 unsetClipped: () => dispatch({ 4138 type: 'NOTCLIPPED' 4139 }), 4140 setClipping: () => dispatch({ 4141 type: 'CLIPPING' 4142 }), 4143 hideClipControl: () => dispatch({ 4144 type: 'HIDE_CLIP_CONTROL' 4145 }), 4146 setMarkers: set => dispatch({ 4147 type: 'MARKERS_SHOW', 4148 value: set 4149 }) 4150 }; 4151}; 4152const connected = Object(react_redux__WEBPACK_IMPORTED_MODULE_3__[/* connect */ "b"])(mapStateToProps, mapDispatchToProps)(ClipEditor); 4153if (process.env.NODE_AREA === 'outer') { 4154 module.exports = connected; // for conditional requiring 4155} 4156/* harmony default export */ __webpack_exports__["a"] = (connected); 4157/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__("8oxB"), __webpack_require__("3UD+")(module))) 4158 4159/***/ }), 4160 4161/***/ "49eV":
4162/***/ (function(module, exports) { 4163 4164module.exports = "/81285b6db32dcfe419d4dcbc1e3593fa.png"; 4165 4166/***/ }), 4167 4168/***/ "4TXh": 4169/***/ (function(module, exports, __webpack_require__) { 4170 4171// extracted by mini-css-extract-plugin 4172module.exports = {"title":"src-components-Modal-Content-ExpiredLink-ExpiredLink__title--JxIM9","sub-title":"src-components-Modal-Content-ExpiredLink-ExpiredLink__sub-title--jffy4","close-button-container":"src-components-Modal-Content-ExpiredLink-ExpiredLink__close-button-container--wC9iz","close-button":"src-components-Modal-Content-ExpiredLink-ExpiredLink__close-button--mQUTh"}; 4173 4174/***/ }), 4175 4176/***/ "4iYn": 4177/***/ (function(module, exports) { 4178 4179module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='a' width='121.6%25' height='122.6%25' x='-10.8%25' y='-11.3%25' filterUnits='objectBoundingBox'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='1'/%3E%3CfeColorMatrix in='shadowBlurOuter1' result='shadowMatrixOuter1' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.21 0'/%3E%3CfeMerge%3E%3CfeMergeNode in='shadowMatrixOuter1'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='32' height='32'/%3E%3Cg filter='url(%23a)' transform='translate(2.223 2.54)'%3E%3Cpath fill='%23FFF' d='M27.1342269,4.18414543 C27.5122661,4.56218462 27.7081971,5.05546513 27.7194975,5.55293962 C27.7307979,6.05041411 27.5574677,6.55208259 27.1969843,6.94689772 L13.2963561,22.1040518 C12.922566,22.513441 12.4410732,22.7659182 11.9346554,22.8575843 L10.8393598,23.9517242 C10.4488355,24.3422485 9.93699088,24.5375106 9.42514624,24.5375106 C9.25091444,24.5375106 9.07668264,24.5148852 8.90723605,24.4696344 L7.42167703,25.9551934 C7.13621742,26.240653 6.77893579,26.4262932 6.39969573,26.5021412 C6.02045568,26.5779892 5.61925719,26.5440451 5.24596385,26.390336 L1.23902543,24.7404202 C0.728339815,24.5301379 0.351234513,24.1327668 0.154371191,23.6602948 C-0.0685509075,23.1252818 -0.0603556385,22.4939698 0.246709484,21.9289649 L3.25384995,18.825596 C3.20628702,18.652125 3.18250555,18.4734975 3.18250555,18.2948699 C3.18250555,17.7830253 3.3777677,17.2711807 3.76777247,16.8811763 L4.86244965,15.7848888 C4.94909186,15.3064404 5.17969624,14.8489484 5.55423488,14.4820259 L20.7731185,0.523031878 C21.1679336,0.162548496 21.6696021,-0.0107817419 22.1670766,0.000518662617 C22.6645511,0.0118190671 23.1578316,0.207750114 23.5358708,0.585789304 L27.1342269,4.18414543 Z'/%3E%3Cpath fill='%23FFF' d='M21.8173839,3.10994311 L24.6807838,5.97334299 C25.0644118,6.35697109 25.0721683,6.97652036 24.6982647,7.3696324 L11.6061068,21.1343675 L11.6061068,21.1343675 L8.77767968,22.5485811 L6.61444702,24.7118137 C6.33831461,24.9879462 5.92670532,25.078077 5.56044437,24.9426106 L2.46331667,23.7970976 C1.94532679,23.6055123 1.68072359,23.030288 1.87230889,22.5122981 C1.92235627,22.3769848 2.00109002,22.2541029 2.10310576,22.1520872 L5.24214578,19.0130472 L5.24214578,19.0130472 L6.65635934,16.1846201 L20.4210945,3.09246221 C20.8142065,2.71855854 21.4337558,2.72631502 21.8173839,3.10994311 Z'/%3E%3Cpath fill='%237EA7E6' d='M9.42514624,13.3451225 L14.3748937,18.2948699 L11.7232433,21.3000738 L10.8393598,21.1232971 L6.59671912,16.8806564 L6.41994242,15.9967729 L9.42514624,13.3451225 Z M22.1530683,1.3243072 L26.395709,5.56694788 L23.3905052,8.92570509 L18.7943111,4.32951102 L22.1530683,1.3243072 Z'/%3E%3Cpath stroke='%23011E47' d='M22.1338544,1.50145623 L26.0722313,5.24347024 C26.1668761,5.33811497 26.2158541,5.46163565 26.21856,5.58616176 C26.2212658,5.71068788 26.1776993,5.83621944 26.087255,5.93488594 L12.1914765,21.0939171 C12.0167851,21.2844894 11.7813871,21.3862127 11.5420189,21.39662 C11.1670497,21.412923 10.782338,21.2051453 10.6059802,20.7638045 L8.74792948,22.5076206 L6.36101685,24.8945332 C6.28965195,24.9658981 6.20033155,25.0123082 6.10552153,25.0312702 C6.01071152,25.0502322 5.9104119,25.0417462 5.81708856,25.0033189 L1.81015013,23.3534031 C1.68247873,23.3008325 1.58820241,23.2014897 1.53898658,23.0833717 C1.49951006,22.9886281 1.4890246,22.8818049 1.5135
41795026,22.7773502 L5.18250555,19.0019767 L7.04267217,17.1418101 C6.56256577,16.9952359 6.32251257,16.6069496 6.32251257,16.2186632 C6.32251257,15.9820726 6.41163732,15.745482 6.58988681,15.5635721 L21.7851302,1.63276116 C21.8837968,1.54231686 22.0093283,1.49875042 22.1338544,1.50145623 Z'/%3E%3Cpath fill='%23F0F5FD' stroke='%23011E47' d='M6.24316572,16.527103 L11.1929132,21.4768505 L9.77869963,22.891064 L4.82895216,18.6484233 L6.24316572,16.527103 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E" 4180 4181/***/ }), 4182 4183/***/ "4jib": 4184/***/ (function(module, __webpack_exports__, __webpack_require__) { 4185 4186"use strict"; 4187/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("q1tI"); 4188/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 4189/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("55Ip"); 4190/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("Ty5D"); 4191/* harmony import */ var _Auth__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("2tX9"); 4192/* harmony import */ var _assets_images_screen_clip_icon_new_svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("1pYP"); 4193/* harmony import */ var _assets_images_screen_clip_icon_new_svg__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_assets_images_screen_clip_icon_new_svg__WEBPACK_IMPORTED_MODULE_4__); 4194/* harmony import */ var _Dropdown_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("JpM/"); 4195/* harmony import */ var _Dropdown_css__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_Dropdown_css__WEBPACK_IMPORTED_MODULE_5__); 4196 4197 4198 4199 4200 4201 4202function Dropdown(props) { 4203 // const [imgSrc, setImgSrc] = useState(false); 4204 4205 function signOut() { 4206 if (props.location.pathname.includes('/dashboard') || props.location.pathname.includes('/folder')) { 4207 props.history.push({ 4208 pathname: '/', 4209 state: { 4210 loginModal: true 4211 } 4212 }); 4213 } 4214 props.isOpen(false); 4215 props.Auth.signOut(); 4216 } 4217 // useEffect(() => { 4218 // if(props.Auth.getCurrentUser()){ 4219 // setImgSrc(props.Auth.getCurrentUser().photoUrl); 4220 // } 4221 4222 // }, [props.Auth.getCurrentUser().photoUrl]); 4223 let wrapperRef = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null); 4224 let dropDown = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null); 4225 let [clicked, setClicked] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(true); 4226 let dropdownHomeStyle = [_Dropdown_css__WEBPACK_IMPORTED_MODULE_5___default.a['dropdownHome'], _Dropdown_css__WEBPACK_IMPORTED_MODULE_5___default.a['dropdown']].join(' '); 4227 let dropdownStyle = [_Dropdown_css__WEBPACK_IMPORTED_MODULE_5___default.a['dropdown'], _Dropdown_css__WEBPACK_IMPORTED_MODULE_5___default.a[props.className]].join(' '); 4228 4229 // let event = clickOusideDropdown(wrapperRef, dropDown,clicked,setClicked); 4230 function resetOpacity() { 4231 dropDown.current.style.opacity = ""; 4232 } 4233 Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { 4234 // let isMobile = false; 4235 function handleClickOutside(event) { 4236 if (wrapperRef.current && !wrapperRef.current.contains(event.target)) { 4237 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && dropDown && dropDown.current) { 4238 dropDown.current.style.opacity = 0; 4239 if (props.isOpen && clicked) { 4240 props.isOpen(!clicked); 4241 } 4242 setClicked(true); 4243 } 4244 } 4245 } 4246 4247 // Bind the event listener 4248 document.addEventListener("mousedown", handleClickOutside); 4249 return () => { 4250 // Unbind the event listener on clean up 4251 document.removeEventListener("mousedown", handleClickOutside); 4252 }; 4253 }, [wrapperRef]); 4254 function showDropDownMobile() { 4255 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && dropDown && dropDown.current) { 4256 // alert(clicked) 4257 if (clicked) { 4258 dropDown.current.style.opacity = 1; 4259 } else { 4260 dropDown.current.style.opacity = 0; 4261 } 4262 if (props.isOpen) { 4263 props.isOpen(clicked); 4264 } 4265 setClicked(!clicked); 4266 } 4267 } 4268 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 4269 ref: wrapperRef, 4270 className: [props.dropdownHome ? dropdownHomeStyle : dropdownStyle].join(' '), 4271 onMouseEnter: resetOpacity 4272 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 4273 type: "button", 4274 className: _Dropdown_css__WEBPACK_IMPORTED_MODULE_5___default.a['dropdown-button'], 4275 onClick: showDropDownMobile 4276 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", { 4277 src: props.imgSrc != undefined ? props.imgSrc : props.Auth.getCurrentUser() && props.Auth.getCurrentUser().photoUrl ? props.Auth.getCurrentUser().photoUrl : _assets_images_screen_clip_icon_new_svg__WEBPACK_IMPORTED_MODULE_4___default.a, 4278 className: _Dropdown_css__WEBPACK_IMPORTED_MODULE_5___default.a.userIcon 4279 })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 4280 ref: dropDown, 4281 className: _Dropdown_css__WEBPACK_IMPORTED_MODULE_5___default.a['dropdown-inner'] 4282 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 4283 type: "button", 4284 translate: "no", 4285 className: _Dropdown_css__WEBPACK_IMPORTED_MODULE_5___default.a['dropdown-item'] 4286 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__[/* Link */ "b"], { 4287 to: "/dashboard" 4288 }, "Dashboard")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 4289 type: "button", 4290 className: _Dropdown_css__WEBPACK_IMPORTED_MODULE_5___default.a['dropdown-item'] 4291 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_1__[/* Link */ "b"], { 4292 to: "/settings" 4293 }, "Settings")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 4294 type: "button", 4295 className: _Dropdown_css__WEBPACK_IMPORTED_MODULE_5___default.a['dropdown-item'] 4296 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", { 4297 href: "https://chrome.google.com/webstore/detail/screen-capture-screenshot/jmjbgcjbgmcfgbgikmbdioggjlhjegpp/support" 4298 }
4298, "Support")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 4299 type: "button", 4300 id: "logoutButton", 4301 className: [_Dropdown_css__WEBPACK_IMPORTED_MODULE_5___default.a['dropdown-item'], _Dropdown_css__WEBPACK_IMPORTED_MODULE_5___default.a['dropdpwm-item-logout']].join(' '), 4302 onClick: () => { 4303 signOut(); 4304 } 4305 }, "Log-out"))); 4306} 4307/* harmony default export */ __webpack_exports__["a"] = (Object(react_router_dom__WEBPACK_IMPORTED_MODULE_2__[/* withRouter */ "h"])(Object(_Auth__WEBPACK_IMPORTED_MODULE_3__[/* withAuth */ "c"])(Dropdown))); 4308 4309/***/ }), 4310 4311/***/ "4xOj": 4312/***/ (function(module, exports, __webpack_require__) { 4313 4314// extracted by mini-css-extract-plugin 4315module.exports = {"title":"src-components-Title-AutoSizeTitle__title--eDeV0"}; 4316 4317/***/ }), 4318 4319/***/ "5Fu3": 4320/***/ (function(module, __webpack_exports__, __webpack_require__) { 4321 4322"use strict"; 4323 4324// EXTERNAL MODULE: ./node_modules/redux/es/redux.js 4325var redux = __webpack_require__("ANjH"); 4326 4327// EXTERNAL MODULE: ./node_modules/redux-thunk/es/index.js 4328var es = __webpack_require__("sINF"); 4329 4330// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom.iterable.js 4331var web_dom_iterable = __webpack_require__("rGqo"); 4332 4333// CONCATENATED MODULE: ./src/config/state.initial.js 4334// get prerendered values 4335let userId = window._userId; 4336let currentUser = typeof window._currentUser === 'undefined' ? false : window._currentUser; 4337let folders = typeof window._folders === 'undefined' ? [] : window._folders; 4338let clips = typeof window._clips === 'undefined' ? [] : window._clips; 4339let clipData = typeof window._clip === 'undefined' ? {} : window._clip; 4340let currentFolder = false; 4341if (window && window.sessionStorage) { 4342 let f = window.sessionStorage.getItem('CURRENT_FOLDER'); 4343 currentFolder = f === 'false' ? false : f; 4344} 4345let app = { 4346 loggedIn: false, 4347 userId: userId, 4348 user: currentUser, 4349 loading: false, 4350 notification: '', 4351 notificationError: false 4352}; 4353let dashboard = { 4354 clips: clips, 4355 hasMoreClips: true, 4356 folders: folders, 4357 searchQuery: '', 4358 currentFolder: currentFolder, 4359 clipsLoading: false 4360}; 4361let clip = { 4362 current: clipData 4363}; 4364/* harmony default export */ var state_initial = ({ 4365 app: app, 4366 dashboard: dashboard, 4367 clip: clip 4368}); 4369// EXTERNAL MODULE: ./src/utils/utils.js 4370var utils = __webpack_require__("+n12"); 4371 4372// CONCATENATED MODULE: ./src/reducers/app.js 4373 4374 4375 4376function app_app(state = state_initial.app, action) { 4377 let ret = { 4378 ...state 4379 }; 4380 switch (action.type) { 4381 case 'SET_USER_ID': 4382 ret.userId = action.value; 4383 break; 4384 case 'MERGE_USER': 4385 ret.user = { 4386 ...state.user, 4387 ...action.value 4388 }; 4389 const extMsg = {}; 4390 if (action.value.displayName) { 4391 extMsg.username = action.value.displayName; 4392 extMsg.displayName = action.value.displayName; 4393 } 4394 if (action.value.photoUrl) { 4395 extMsg.userphoto = action.value.photoUrl; 4396 extMsg.photoUrl = action.value.photoUrl; 4397 } 4398 if (Object.keys(extMsg).length > 0) Object(utils["f" /* extensionUpdateUserdata */])(extMsg); 4399 break; 4400 case 'SET_USER': 4401 ret.user = action.value; 4402 ret.userId = action.value ? action.value.userId : false; 4403 if (!action.value) { 4404 ret.folders = []; 4405 ret.clips = []; 4406 ret.hasMoreClips = false; 4407 } else { 4408 const extMsg = {}; 4409 if (action.value.displayName) { 4410 extMsg.username = action.value.displayName; 4411 extMsg.displayName = action.value.displayName; 4412 } 4413 if (action.value.photoUrl) { 4414 extMsg.userphoto = action.value.photoUrl; 4415 extMsg.photoUrl = action.value.photoUrl; 4416 } 4417 if (Object.keys(extMsg).length > 0) Object(utils["f" /* extensionUpdateUserdata */])(extMsg); 4418 } 4419 Object(utils["e" /* extensionSetCurrentUser */])(ret.user); 4420 break; 4421 case 'SET_USER_PHOTO': 4422 const url = action.value; 4423 Object(utils["f" /* extensionUpdateUserdata */])({ 4424 userphoto: url, 4425 photoUrl: url 4426 }); 4427 ret.user.photoUrl = url; 4428 break; 4429 case 'SET_USER_NAVIGATION_MODE': 4430 const mode = action.value; 4431 ret.user.navigationMode = mode; 4432 break; 4433 case 'SET_APP_LOADING': 4434 ret.loading = action.value; 4435 break; 4436 case 'SET_APP_NOTIFICATION': 4437 ret.multiple = action.multiple; 4438 ret.notification = action.value; 4439 ret.notificationError = !!action.error; 4440 ret.timer = !!action.timer; 4441 ret.uploadingUpdate = action.uploadingUpdate; 4442 ret.notificationAdditional = action.additional; 4443 break; 4444 default: 4445 break; 4446 } 4447 return ret; 4448} 4449// CONCATENATED MODULE: ./src/reducers/clip.js 4450 4451function clip_app(state = state_initial.clip, action) { 4452 let ret = { 4453 ...state 4454 }; 4455 switch (action.type) { 4456 case 'SET_CLIP': 4457 ret.current = action.value; 4458 break; 4459 default: 4460 break; 4461 } 4462 return ret; 4463} 4464// EXTERNAL MODULE: ./src/editor/reducers/clip.js 4465var reducers_clip = __webpack_require__("Qzl6"); 4466 4467// CONCATENATED MODULE: ./src/reducers/dashboard.js 4468 4469 4470function dashboard_dashboard(state = state_initial.dashboard, action) { 4471 let ret = { 4472 ...state 4473 }; 4474 switch (action.type) { 4475 case 'SET_USER_ID': 4476 ret.searchQuery = state_initial.searchQuery; 4477 ret.hasMoreClips = state_initial.hasMoreClips; 4478 ret.currentFolder = state_initial.currentFolder; 4479 ret.clips = []; 4480 ret.folders = []; 4481 break; 4482 case 'SET_FOLDERS': 4483 ret.folders = action.value; 4484 break; 4485 case 'SET_CLIPS': 4486 ret.clips = action.value; 4487 break; 4488 case 'CLEAR_UPLOAD_STATE_FROM_CLIPS': 4489 ret.clips = ret.clips.map(clip => ({ 4490 ...clip, 4491 newUpload: false 4492 })); 4493 break; 4494 case 'SET_CLIPS_HAS_MORE': 4495 ret.hasMoreClips = action.value; 4496 break; 4497 case 'SET_SEARCH_QUERY': 4498 ret.clips = []; 4499 ret.searchQuery = action.value.trim(); 4500 ret.hasMoreClips = true; 4501 break; 4502 case 'CLEAR_SEARCH_QUERY': 4503 ret.searchQuery = ''; 4504 break; 4505 case 'SET_CURRENT_FOLDER': 4506 if (window && window.sessionStorage) { 4507 action.value ? window.sessionStorage.setItem('CURRENT_FOLDER', action.value) : window.sessionStorage.removeItem('CURRENT_FOLDER'); 4508 } 4509 ret.clips = []; 4510 ret.searchQuery = ''; // todo: clear search input 4511 ret.currentFolder = action.value; 4512 ret.hasMoreClips = true; 4513 break; 4514 case 'SET_CLIPS_LOADING': 4515 ret.clipsLoading = action.value; 4516 break; 4517 default: 4518 break; 4519 } 4520 return ret; 4521} 4522// CONCATENATED MODULE: ./src/reducers/index.js 4523 4524 4525 4526 4527/* harmony default export */ var reducers = (Object(redux["c" /* combineReducers */])({ 4528 app: app_app, 4529 clip: clip_app, 4530 dashboard: dashboard_dashboard 4531})); 4532// CONCATENATED MODULE: ./src/config/store.js 4533 4534 4535 4536 4537let mw = Object(redux["a" /* applyMiddleware */])(es["a" /* default */]); 4538let store = Object(redux["d" /* createStore */])(reducers, state_initial, mw); 4539/* harmony default export */ var config_store = __webpack_exports__["a"] = (store); 4540 4541/***/ }), 4542 4543/***/ "5uWX": 4544/***/ (function(module, __webpack_exports__, __webpack_require__) { 4545 4546"use strict";
4547// import grabCursor from "../../images/cursors/grab.png"; 4548// import grabbingCursor from "../../images/cursors/grabbing.png"; 4549 4550let tag = "screen-clip"; 4551let embedCapturingTag = "screen-clip-embed-capturing"; 4552let embedTag = "screen-clip-embed"; 4553let collectionsUrl = "https://app.screenclip.com/dashboard"; 4554// collectionsUrl = "https://screenclip-website-test.firebaseapp.com/dashboard"; 4555class Config { 4556 static getCollectionsUrl() { 4557 return collectionsUrl; 4558 } 4559 static getTagName() { 4560 return tag; 4561 } 4562 static getEmbedCapturingTagName() { 4563 return embedCapturingTag; 4564 } 4565 static getEmbedTagName() { 4566 return embedTag; 4567 } 4568 static getToolsWithDisabledPropertiesBar() { 4569 return ['crop']; 4570 } 4571 static getToolsWithTwoControlCorners() { 4572 return ['line', 'arrow']; 4573 } 4574 static getCanvasConfigs(previewMode, path = false) { 4575 // let grab = "url(", path, grabCursor, ") 10 21, default" 4576 let canvasConfig = { 4577 canvasSettings: { 4578 fireRightClick: true, 4579 preserveObjectStacking: true, 4580 stopContextMenu: true, 4581 backgroundColor: "transparent", 4582 uniScaleTransform: true, 4583 uniScaleKey: "shiftKey", 4584 selectionKey: "shiftKey", 4585 selectionColor: 'rgba(255,255,255,0.3)', 4586 selectionBorderColor: '#fff', 4587 selectionLineWidth: 2, 4588 imageSmoothingEnabled: true, 4589 hoverCursor: "grab", 4590 moveCursor: "grabbing" 4591 }, 4592 shapeSettings: { 4593 left: 0, 4594 top: 0, 4595 height: 0, 4596 width: 0, 4597 stroke: "#fff", 4598 strokeWidth: 2, 4599 selectable: true, 4600 strokeUniform: true, 4601 hasControls: true, 4602 hasRotatingPoint: false, 4603 padding: -1, 4604 noScaleCache: false, 4605 // 4606 hasBorders: true, 4607 borderOpacityWhenMoving: 1, 4608 borderColor: 'rgba(255, 255, 255)', 4609 paintFirst: "fill", 4610 borderShadowColor: 'rgba(0, 0, 0, .21)', 4611 borderShadowBlur: 2, 4612 editingBorderColor: '#fff', 4613 // box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.13); 4614 // border: solid 0.5px rgba(255, 255, 255, 0.56); 4615 cornerStyle: "circle", 4616 cornerSize: 14, 4617 cornerStrokeColor: "rgba(0, 0, 0)", 4618 cornerFill: "#fff", 4619 cornerColor: '#fff', 4620 cornerOpacityWhenMoving: 1, 4621 transparentCorners: false, 4622 cornerShadowColor: 'rgba(0,0,0)', 4623 cornerShadowBlur: 2, 4624 imageSmoothingEnabled: true, 4625 lockUniScaling: false, 4626 // 4627 lockSkewingX: true, 4628 lockSkewingY: true 4629 4630 // objectCaching: false, 4631 // statefullCache: false, 4632 // needsItsOwnCache: false, 4633 // // noScaleCache: false 4634 }, 4635 specialFields: ['startPoint', 'managedScaling', 'managedHistory', 'toolName', 'objectID', 'hasRotatingPoint', 'clipOriginLeft', 'clipOriginTop', 'isEdited', 4636 // disabled props props 4637 'disabledStrokeWidth', 'disabledFill', 'disabledOpacity', 'disabledBackgroundColor', '_controlsVisibility', 'hasBorders', 'textBgColorDisabled'], 4638 cursors: ['ns-resize', 'nesw-resize', 'ew-resize', 'nwse-resize', 'ns-resize', 'nesw-resize', 'ew-resize', 'nwse-resize'], 4639 shapeShadowSettings: { 4640 color: "rgba(0, 0, 0, 0.15)", 4641 offsetX: 0, 4642 offsetY: 3, 4643 blur: 21 4644 } 4645 }; 4646 if (previewMode) { 4647 canvasConfig.shapeSettings.hasControls = false; 4648 canvasConfig.shapeSettings.hasRotatingPoint = false; 4649 canvasConfig.shapeSettings.selectable = false; 4650 canvasConfig.canvasSettings.selection = false; 4651 } 4652 return canvasConfig; 4653 } 4654} 4655; 4656/* harmony default export */ __webpack_exports__["a"] = (Config); 4657 4658/***/ }), 4659 4660/***/ "6izW": 4661/***/ (function(module, exports, __webpack_require__) { 4662 4663// extracted by mini-css-extract-plugin 4664module.exports = {"folderName":"src-components-Modal-Content-MoveClips-MoveClips__folderName--aBIts","buttons":"src-components-Modal-Content-MoveClips-MoveClips__buttons--s+YU2","primary":"src-components-Modal-Content-MoveClips-MoveClips__primary--MZNG8","activated":"src-components-Modal-Content-MoveClips-MoveClips__activated--SyOu6","secondary":"src-components-Modal-Content-MoveClips-MoveClips__secondary--NvzZL","moveFolderModal":"src-components-Modal-Content-MoveClips-MoveClips__moveFolderModal--9lfz8","error":"src-components-Modal-Content-MoveClips-MoveClips__error--Myy4d"}; 4665 4666/***/ }), 4667 4668/***/ "79y4": 4669/***/ (function(module, exports, __webpack_require__) { 4670 4671// extracted by mini-css-extract-plugin 4672module.exports = {"hide":"src-components-FolderActions-FolderActions__hide--F6P3o","disabled":"src-components-FolderActions-FolderActions__disabled--xfNL5","folderActions":"src-components-FolderActions-FolderActions__folderActions--B22QP","shadowEffect":"src-components-FolderActions-FolderActions__shadowEffect--xx0Ii","folderTitle":"src-components-FolderActions-FolderActions__folderTitle--mqPdy","folderTitleHome":"src-components-FolderActions-FolderActions__folderTitleHome--V5tQW","folderTitleHover":"src-components-FolderActions-FolderActions__folderTitleHover--7p4qO","folderGroupActions":"src-components-FolderActions-FolderActions__folderGroupActions--k3BEA","closeButton":"src-components-FolderActions-FolderActions__closeButton--hzxFm","buttonText":"src-components-FolderActions-FolderActions__buttonText--zoa9P","downloadButton":"src-components-FolderActions-FolderActions__downloadButton--QWq2q","downloadButtonTrashFolder":"src-components-FolderActions-FolderActions__downloadButtonTrashFolder--Z8ZDz","moveButton":"src-components-FolderActions-FolderActions__moveButton--6NlGd","moveButtonTrashFolder":"src-components-FolderActions-FolderActions__moveButtonTrashFolder--YK+MC","duplicateButton":"src-components-FolderActions-FolderActions__duplicateButton--jD9Za","deleteButton":"src-components-FolderActions-FolderActions__deleteButton--AlWGp","deleteButtonTrashFolder":"src-components-FolderActions-FolderActions__deleteButtonTrashFolder--y9sxK","folderClipActions":"src-components-FolderActions-FolderActions__folderClipActions--ksC5X","folderActionClipCopy":"src-components-FolderActions-FolderActions__folderActionClipCopy--S2O-+","folderActionClipDownload":"src-components-FolderActions-FolderActions__folderActionClipDownload--jnxCd","folderActionClipDownloadDisabled":"src-components-FolderActions-FolderActions__folderActionClipDownloadDisabled--yt8cK","folderActionClipCopyLink":"src-components-FolderActions-FolderActions__folderActionClipCopyLink--oYXC0","folderActionClipShare":"src-components-FolderActions-FolderActions__folderActionClipShare--OeU5L","folderActionFolderDelete":"src-components-FolderActions-FolderActions__folderActionFolderDelete--8ii+I","folderActionClipOptions":"src-components-FolderActions-FolderActions__folderActionClipOptions--7xx+n","folderActionRename":"src-components-FolderActions-FolderActions__folderActionRename--8Oh6H"}; 4673 4674/***/ }), 4675 4676/***/ "7Pq9": 4677/***/ (function(module, __webpack_exports__, __webpack_require__) { 4678 4679"use strict"; 4680/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("q1tI"); 4681/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 4682/* harmony import */ var _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("LOKO"); 4683/* harmony import */ var _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1__); 4684/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("/MKj"); 4685/* harmony import */ var _actions_Previewer_actions_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("uuAL"); 4686/* harmony import */ var _mods_util_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("p2J/"); 4687 4688 4689 4690 4691 4692function closeIfOuterClick(ref, subMenuRef, cb) { 4693 Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { 4694 const handle = e => { 4695 var _ref$current, _subMenuRef$current; 4696 return !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(e.target)) && !((_subMenuRef$current = subMenuRef.current) !== null && _subMenuRef$current !== void 0 && _subMenuRef$current.contains(e.target)) && cb && cb(); 4697 }; 4698 document.addEventListener("mousedown", handle); 4699 return () => document.removeEventListener("mousedown", handle); 4700 }, [ref, subMenuRef]); 4701} 4702const ExtClipToolMenu = function (props) { 4703 const menuRef = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null); 4704 const subMenuRef = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null); 4705 const [subMenu, setSubMenu] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false); 4706 closeIfOuterClick(menuRef, subMenuRef, props.closeContextMenu); 4707 const getPositionStyles = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => { 4708 const pos = {}; 4709 const height = 290; 4710 const top = -2; 4711 pos['left'] = props.isUser ? 168 : 127; 4712 pos['top'] = props.y < window.innerHeight - height ? top : top - height; 4713 return pos; 4714 }); 4715 const calcSubMenuLeft = () => { 4716 const menuData = menuRef.current.getBoundingClientRect(); 4717 const subMenuWidth = menuData.width;
4718 if (window.innerWidth - menuData.right > subMenuWidth) { 4719 return (props.isUser ? 168 : 127) + subMenuWidth; 4720 } else { 4721 return (props.isUser ? 168 : 127) - subMenuWidth; 4722 } 4723 }; 4724 const getSubMenuPositionStyles = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(subMenu => { 4725 const pos = {}; 4726 const height = 290; 4727 let top = null; 4728 pos['left'] = calcSubMenuLeft(); 4729 if (subMenu === 'downloadAs') { 4730 top = 32; 4731 } 4732 if (subMenu === 'copyAsCode') { 4733 top = 134; 4734 } 4735 if (subMenu === 'shareOn') { 4736 top = 168; 4737 } 4738 pos['top'] = props.y < window.innerHeight - height ? top : top - height; 4739 return pos; 4740 }); 4741 const actionCb = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(action => { 4742 props.extClipToolMenuCb(action); 4743 props.closeContextMenu(); 4744 }); 4745 const handleClick = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(action => { 4746 // if (action === 'COPY_AS_IMAGE' || action === 'DOWNLOAD_CLIP_PNG' || action === 'DOWNLOAD_CLIP_JPG' || action === 'DOWNLOAD_CLIP_PDF') { 4747 // actionCb(action) 4748 // return; 4749 // } 4750 4751 // if (props.isUser && !props.autoUploadMode) return; 4752 4753 actionCb(action); 4754 }); 4755 const handleSubMenu = value => { 4756 // if (!props.autoUploadMode) return; 4757 4758 setSubMenu(value); 4759 }; 4760 const getTooltipClass = () => { 4761 if (!props.isUser) { 4762 return [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.tooltip, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.login].join(' '); 4763 } 4764 // if (!props.autoUploadMode) { 4765 // return [styles.tooltip, styles.autoupload].join(' '); 4766 // } 4767 4768 return _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.hidden; 4769 }; 4770 const getTooltipText = () => { 4771 if (!props.isUser) { 4772 return "You will need to sign in as the clip needs to be sent to the cloud."; 4773 } 4774 // if (!props.autoUploadMode) { 4775 // return "The auto-upload setting is off, please turn it on from the settings to enable this option."; 4776 // } 4777 4778 return null; 4779 }; 4780 const Tooltip = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { 4781 className: getTooltipClass() 4782 }, getTooltipText()); 4783 4784 // const autoUploadClass = props.isUser && !props.autoUploadMode ? styles.autoupload : ''; 4785 const autoUploadClass = ''; 4786 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", { 4787 ref: menuRef, 4788 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.contextMenu].join(' '), 4789 style: getPositionStyles() 4790 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4791 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.copyImage].join(' '), 4792 onClick: () => handleClick('COPY_AS_IMAGE') 4793 }, "Copy as Image"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4794 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.downloadClip].join(' '), 4795 onMouseEnter: () => setSubMenu('downloadAs'), 4796 onMouseLeave: () => setSubMenu(false), 4797 onClick: null 4798 }, "Download as"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4799 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.copyLink, autoUploadClass].join(' '), 4800 onClick: () => handleClick('COPY_SHORT_LINK') 4801 }, "Copy Short Link"), Tooltip, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4802 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.copyLink, autoUploadClass].join(' '), 4803 onClick: () => handleClick('COPY_NAMED_LINK') 4804 }, "Copy Named Link"), Tooltip, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4805 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.copyCode, autoUploadClass].join(' '), 4806 onMouseEnter: () => handleSubMenu('copyAsCode'), 4807 onMouseLeave: () => setSubMenu(false), 4808 onClick: null 4809 }, "Copy as Code"), Tooltip, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4810 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.shareClip, autoUploadClass].join(' '), 4811 onMouseEnter: () =>
4811 handleSubMenu('shareOn'), 4812 onMouseLeave: () => setSubMenu(false), 4813 onClick: null 4814 }, "Share on"), Tooltip, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4815 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.uploadOnly, autoUploadClass].join(' '), 4816 onClick: () => handleClick('SEND_TO_CLOUD') 4817 }, "Upload (only)"), Tooltip, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4818 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.print].join(' '), 4819 onClick: null 4820 }, "Print (coming soon)")), subMenu === 'downloadAs' && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", { 4821 ref: subMenuRef, 4822 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.contextMenu].join(' '), 4823 style: getSubMenuPositionStyles('downloadAs'), 4824 onMouseEnter: () => setSubMenu('downloadAs'), 4825 onMouseLeave: () => setSubMenu(false) 4826 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4827 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.png].join(' '), 4828 onClick: () => handleClick('DOWNLOAD_CLIP_PNG') 4829 }, "PNG"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4830 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.jpeg].join(' '), 4831 onClick: () => handleClick('DOWNLOAD_CLIP_JPG') 4832 }, "JPEG"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4833 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.pdf].join(' '), 4834 onClick: () => handleClick('DOWNLOAD_CLIP_PDF') 4835 }, "PDF")), subMenu === 'copyAsCode' && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", { 4836 ref: subMenuRef, 4837 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.contextMenu].join(' '), 4838 style: getSubMenuPositionStyles('copyAsCode'), 4839 onMouseEnter: () => setSubMenu('copyAsCode'), 4840 onMouseLeave: () => setSubMenu(false) 4841 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4842 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.copyCodeSubMenu].join(' '), 4843 onClick: () => handleClick('COPY_AS_CODE_HTML') 4844 }, "HTML"), Tooltip, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4845 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.copyCodeSubMenu].join(' '), 4846 onClick: () => handleClick('COPY_AS_CODE_MARKDOWN') 4847 }, "Markdown link"), Tooltip, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4848 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.copyCodeSubMenu].join(' '), 4849 onClick: () => handleClick('COPY_AS_CODE_BBCODE') 4850 }, "BBCode"), Tooltip), subMenu === 'shareOn' && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", { 4851 ref: subMenuRef, 4852 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.contextMenu].join(' '), 4853 style: getSubMenuPositionStyles('shareOn'), 4854 onMouseEnter: () => setSubMenu('shareOn'), 4855 onMouseLeave: () => setSubMenu(false) 4856 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4857 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.facebook].join(' '), 4858 onClick: () => handleClick('SHARE_FB') 4859 }, "Facebook"), Tooltip, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", { 4860 className: [_ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.item, _ExtClipToolMenu_css__WEBPACK_IMPORTED_MODULE_1___default.a.twitter].join(' '), 4861 onClick: () => handleClick('SHARE_X') 4862 }, "X (Twitter)"), Tooltip)); 4863}; 4864/* harmony default export */ __webpack_exports__["a"] = (Object(react_redux__WEBPACK_IMPORTED_MODULE_2__[/* connect */ "b"])(null, dispatch => { 4865 return { 4866 setNotification: message => dispatch({ 4867 type: 'SET_APP_NOTIFICATION', 4868 value: message 4869 }), 4870 makeClipularClipReadableAgain: (clipId, callback) => dispatch(Object(_actions_Previewer_actions_js__WEBPACK_IMPORTED_MODULE_3__[/* dispatchMakeClipularClipReadableAgain */ "a"])({ 4871 reload: false, 4872 clipId, 4873 callback 4874 })) 4875 }; 4876})(ExtClipToolMenu)); 4877 4878/***/ }), 4879 4880/***/ "7h/F":
4881/***/ (function(module, exports) { 4882 4883module.exports = "/eaa7afdea0f0952a7e8a3a5a3d231e79.png"; 4884 4885/***/ }), 4886 4887/***/ "8+WH": 4888/***/ (function(module, exports, __webpack_require__) { 4889 4890// extracted by mini-css-extract-plugin 4891module.exports = {"parentContainer":"src-components-SearchInput-SearchInput__parentContainer--wWl+s","search":"src-components-SearchInput-SearchInput__search--WDUbB","searchIcon":"src-components-SearchInput-SearchInput__searchIcon--nuacL","cross":"src-components-SearchInput-SearchInput__cross--neNSQ"}; 4892 4893/***/ }), 4894 4895/***/ "8HDH": 4896/***/ (function(module, exports, __webpack_require__) { 4897 4898// extracted by mini-css-extract-plugin 4899module.exports = {"newBlankClipModal":"src-components-Modal-Content-NewBlankClip-NewBlankClip__newBlankClipModal--F4PyO","modalTitle":"src-components-Modal-Content-NewBlankClip-NewBlankClip__modalTitle--3rbpa","titleText":"src-components-Modal-Content-NewBlankClip-NewBlankClip__titleText--GmeNW","titleInput":"src-components-Modal-Content-NewBlankClip-NewBlankClip__titleInput--jUUsi","dimInput":"src-components-Modal-Content-NewBlankClip-NewBlankClip__dimInput--8hXEV","dimensionInputs":"src-components-Modal-Content-NewBlankClip-NewBlankClip__dimensionInputs--jXUKJ","error":"src-components-Modal-Content-NewBlankClip-NewBlankClip__error--ZS8Vc","buttons":"src-components-Modal-Content-NewBlankClip-NewBlankClip__buttons--v4Lsy","primary":"src-components-Modal-Content-NewBlankClip-NewBlankClip__primary--LnFZ3","activated":"src-components-Modal-Content-NewBlankClip-NewBlankClip__activated--cQChP","secondary":"src-components-Modal-Content-NewBlankClip-NewBlankClip__secondary--qtY8N"}; 4900 4901/***/ }), 4902 4903/***/ "8JvB": 4904/***/ (function(module, exports, __webpack_require__) { 4905 4906// extracted by mini-css-extract-plugin 4907module.exports = {"title":"src-components-Popup-Popup__title--ttwwV","content":"src-components-Popup-Popup__content--8VYYB","attached-items":"src-components-Popup-Popup__attached-items--ZR8Ds","button-container":"src-components-Popup-Popup__button-container--h4cn-","yes-button":"src-components-Popup-Popup__yes-button--cTh4H","cancel-button":"src-components-Popup-Popup__cancel-button--gTKvK","delete-button":"src-components-Popup-Popup__delete-button--YFXD1","popup-container":"src-components-Popup-Popup__popup-container--hlITG"}; 4908 4909/***/ }), 4910 4911/***/ "8Zus": 4912/***/ (function(module, exports, __webpack_require__) { 4913 4914// extracted by mini-css-extract-plugin 4915module.exports = {"checkbox":"src-components-Checkbox-Checkbox__checkbox--OY-B6","indeterminate":"src-components-Checkbox-Checkbox__indeterminate--qbYOP","checked":"src-components-Checkbox-Checkbox__checked--0YubP"}; 4916 4917/***/ }), 4918 4919/***/ "8u73": 4920/***/ (function(module, __webpack_exports__, __webpack_require__) { 4921 4922"use strict"; 4923 4924// EXPORTS 4925__webpack_require__.d(__webpack_exports__, "a", function() { return /* binding */ ClipActions_ClipActions; }); 4926 4927// EXTERNAL MODULE: ./node_modules/react/index.js 4928var react = __webpack_require__("q1tI"); 4929var react_default = /*#__PURE__*/__webpack_require__.n(react); 4930 4931// EXTERNAL MODULE: ./src/components/ClipActions/ClipActions.css 4932var ClipActions = __webpack_require__("+Kbx"); 4933var ClipActions_default = /*#__PURE__*/__webpack_require__.n(ClipActions); 4934 4935// EXTERNAL MODULE: ./node_modules/react-tooltip/dist/index.es.js + 3 modules 4936var index_es = __webpack_require__("cpGi"); 4937 4938// EXTERNAL MODULE: ./src/components/Browse/Browse.js 4939var Browse = __webpack_require__("SL9e"); 4940 4941// CONCATENATED MODULE: ./src/components/Support/AddImageSvg/AddImageSvg.js 4942 4943function AddImageSvg() { 4944 return /*#__PURE__*/react_default.a.createElement("svg", { 4945 xmlns: "http://www.w3.org/2000/svg", 4946 xmlnsXlink: "http://www.w3.org/1999/xlink", 4947 width: "48", 4948 height: "48", 4949 viewBox: "0 0 48 48" 4950 }, /*#__PURE__*/react_default.a.createElement("defs", null, /*#__PURE__*/react_default.a.createElement("path", { 4951 id: "path-1", 4952 d: "M2.564 0h20.872c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v14.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756C.093 18.65 0 18.327 0 17.437V2.563c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757C1.35.093 1.673 0 2.563 0z" 4953 }), /*#__PURE__*/react_default.a.createElement("linearGradient", { 4954 id: "linearGradient-3", 4955 x1: "50%", 4956 x2: "50%", 4957 y1: "0%", 4958 y2: "98.334%" 4959 }, /*#__PURE__*/react_default.a.createElement("stop", { 4960 offset: "0%", 4961 stopColor: "#F5C68C" 4962 }), /*#__PURE__*/react_default.a.createElement("stop", { 4963 offset: "100%", 4964 stopColor: "#F1C5A1" 4965 }))), /*#__PURE__*/react_default.a.createElement("g", { 4966 fill: "none", 4967 fillRule: "evenodd", 4968 stroke: "none", 4969 strokeWidth: "1" 4970 }, /*#__PURE__*/react_default.a.createElement("g", { 4971 transform: "translate(11 14)" 4972 }, /*#__PURE__*/react_default.a.createElement("mask", { 4973 id: "mask-2", 4974 fill: "#fff" 4975 }, /*#__PURE__*/react_default.a.createElement("use", { 4976 xlinkHref: "#path-1" 4977 })), /*#__PURE__*/react_default.a.createElement("use", { 4978 fill: "#FFBD52", 4979 xlinkHref: "#path-1" 4980 }), /*#__PURE__*/react_default.a.createElement("path", { 4981 fill: "url(#linearGradient-3)", 4982 fillRule: "nonzero", 4983 d: "M2.368.002L23.436 0c.892 0 1.215.093 1.54.267.327.174.583.43.757.756.174.326.267.65.267 1.54v14.873c0 .892-.093 1.215-.267 1.54-.174.327-.43.583-.756.757-.326.174-.65.267-1.54.267H2.563c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756c-.16-.301-.252-.6-.265-1.345L0 2.564c0-.892.093-1.215.267-1.54.174-.327.43-.583.756-.757.301-.16.6-.252 1.345-.265zM2.564 1c-.662 0-.864.039-1.07.149a.818.818 0 00-.345.346c-.1.187-.141.37-.148.9L1 17.435c0 .662.039.864.149 1.07a.818.818 0 00.346.345c.187.1.37.141.9.148L23.435 19c.662 0 .864-.039 1.07-.149a.818.818 0 00.345-.346c.1-.187.141-.37.148-.9L25 2.565c0-.662-.039-.864-.149-1.07a.818.818 0 00-.346-.345c-.187-.1-.37-.
4983141-.9-.148L2.565 1z", 4984 style: { 4985 mixBlendMode: "multiply" 4986 }, 4987 mask: "url(#mask-2)" 4988 }), /*#__PURE__*/react_default.a.createElement("path", { 4989 fill: "#F5812C", 4990 fillOpacity: "0.6", 4991 d: "M17.357 12.252l7.903 7.295a1.87 1.87 0 01-.283.186c-.326.174-.65.267-1.54.267H6.25l8.393-7.748a2 2 0 012.714 0z", 4992 style: { 4993 mixBlendMode: "multiply" 4994 }, 4995 mask: "url(#mask-2)" 4996 }), /*#__PURE__*/react_default.a.createElement("path", { 4997 fill: "#F5812C", 4998 fillOpacity: "0.6", 4999 d: "M8.357 12.252L16.749 20H2.564c-.892 0-1.215-.093-1.54-.267a1.817 1.817 0 01-.757-.756c-.172-.323-.265-.643-.267-1.515l5.643-5.21a2 2 0 012.714 0z", 5000 style: { 5001 mixBlendMode: "multiply" 5002 }, 5003 mask: "url(#mask-2)" 5004 }), /*#__PURE__*/react_default.a.createElement("circle", { 5005 cx: "20.5", 5006 cy: "6.5", 5007 r: "2.5", 5008 fill: "#F46317", 5009 fillOpacity: "0.65", 5010 style: { 5011 mixBlendMode: "multiply" 5012 }, 5013 mask: "url(#mask-2)" 5014 })), /*#__PURE__*/react_default.a.createElement("g", { 5015 fill: "#FFF", 5016 stroke: "#000", 5017 strokeOpacity: "0.34", 5018 transform: "translate(27 23)" 5019 }, /*#__PURE__*/react_default.a.createElement("path", { 5020 d: "M8.5 1.5c-.552 0-1.052.224-1.414.586A1.994 1.994 0 006.5 3.5v3h-3c-.552 0-1.052.224-1.414.586A1.994 1.994 0 001.5 8.5c0 .552.224 1.052.586 1.414.362.362.862.586 1.414.586h3v3c0 .552.224 1.052.586 1.414.362.362.862.586 1.414.586.552 0 1.052-.224 1.414-.586.362-.362.586-.862.586-1.414v-3h3c.552 0 1.052-.224 1.414-.586.362-.362.586-.862.586-1.414 0-.552-.224-1.052-.586-1.414A1.994 1.994 0 0013.5 6.5h-3v-3c0-.552-.224-1.052-.586-1.414A1.994 1.994 0 008.5 1.5z" 5021 })))); 5022} 5023/* harmony default export */ var AddImageSvg_AddImageSvg = (AddImageSvg); 5024// CONCATENATED MODULE: ./src/components/ClipActions/ClipActions.js 5025 5026 5027 5028 5029 5030function ClipActions_ClipActions(props) { 5031 const atleastOneClipSelected = props.selectAllClips || props.selectedClips.length > 0; 5032 const { 5033 isFull 5034 } = props || {}; 5035 5036 // props.history.push("/blank") 5037 5038 let newBlankClick = Object(react["useCallback"])(e => { 5039 if (isFull) { 5040 props.setNotification(/*#__PURE__*/react_default.a.createElement("span", null, /*#__PURE__*/react_default.a.createElement("b", null, "Your storage is full!"), /*#__PURE__*/react_default.a.createElement("br", null), "Please delete some clips or upgrade your plan."), true, false, false, false, { 5041 buttonLabel: 'View plans', 5042 newTabLink: 'https://screenclip.com/pricing?utm_source=dashboard&utm_medium=notification_full_storage', 5043 manualHide: true, 5044 storageFull: true 5045 }); 5046 } else { 5047 return props.setModal('newBlankClip'); 5048 } 5049 }); 5050 let newFolderClick = Object(react["useCallback"])(e => props.setModal('newFolder')); 5051 const childRef = Object(react["useRef"])(); 5052 const fileLoaded = fileData => { 5053 props.setFileData(fileData); 5054 if (window.innerWidth <= 576) { 5055 props.showUploadModal(); 5056 } 5057 }; 5058 const showUploadModal = Object(react["useCallback"])(() => { 5059 if (window.innerWidth > 576) { 5060 props.showUploadModal(); 5061 } 5062 }, [window.innerWidth]); 5063 const functionShowBrowser = Object(react["useCallback"])(() => { 5064 if (isFull) { 5065 props.setNotification(/*#__PURE__*/react_default.a.createElement("span", null, /*#__PURE__*/react_default.a.createElement("b", null, "Your storage is full!"), /*#__PURE__*/react_default.a.createElement("br", null), "Please delete some clips or upgrade your plan."), true, false, false, false, { 5066 buttonLabel: 'View plans', 5067 newTabLink: 'https://screenclip.com/pricing?utm_source=dashboard&utm_medium=notification_full_storage', 5068 manualHide: true, 5069 storageFull: true 5070 }); 5071 } else { 5072 childRef.current.chooseFileClicked(); 5073 index_es["a" /* default */].hide(); 5074 } 5075 }); 5076 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 5077 className: [ClipActions_default.a.actions, atleastOneClipSelected ? ClipActions_default.a.disable : ''].join(' ') 5078 }, /*#__PURE__*/react_default.a.createElement("div", { 5079 "data-tip": 'Create blank sheet', 5080 "data-delay-show": "500", 5081 className: [ClipActions_default.a.clipActionsItem, ClipActions_default.a.newBlank, props.currentFolder == "trash" && !atleastOneClipSelected ? ClipActions_default.a.disable : ""].join(' '), 5082 onClick: newBlankClick 5083 }), /*#__PURE__*/react_default.a.createElement(Browse["a" /* default */], { 5084 setNotification: props.setNotification, 5085 ref: childRef, 5086 showUploadModalAndFileSelectionDialog: fileLoaded, 5087 showUploadModal: showUploadModal, 5088 uploadClip: props.uploadClip 5089 }), /*#__PURE__*/react_default.a.createElement("div", { 5090 className: [ClipActions_default.a.clipActionsItem, props.currentFolder == "trash" && !atleastOneClipSelected ? ClipActions_default.a.disable : ""].join(' '), 5091 onClick: () => functionShowBrowser(), 5092 "data-tip": 'Upload an image from your own files', 5093 "data-delay-show": "500" 5094 }, /*#__PURE__*/react_default.a.createElement(AddImageSvg_AddImageSvg, null)), /*#__PURE__*/react_default.a.createElement("div", { 5095 className: [ClipActions_default.a.clipActionsItem, ClipActions_default.a.newFolder].join(' '), 5096 "data-tip": 'Create a new folder', 5097 "data-delay-show": "500", 5098 onClick: newFolderClick 5099 })), /*#__PURE__*/react_default.a.createElement(index_es["a" /* default */], null)); 5100} 5101; 5102 5103/***/ }), 5104 5105/***/ "9MsG": 5106/***/ (function(module, __webpack_exports__, __webpack_require__) { 5107 5108"use strict"; 5109 5110// EXPORTS 5111__webpack_require__.d(__webpack_exports__, "a", function() { return /* binding */ ClipList_ClipList; }); 5112 5113// EXTERNAL MODULE: ./node_modules/react/index.js 5114var react = __webpack_require__("q1tI"); 5115var react_default = /*#__PURE__*/__webpack_require__.n(react); 5116 5117// EXTERNAL MODULE: ./src/components/ClipList/ClipList.css 5118var ClipList = __webpack_require__("RibH"); 5119var ClipList_default = /*#__PURE__*/__webpack_require__.n(ClipList); 5120 5121// EXTERNAL MODULE: ./src/components/Loader/Loader.js 5122var Loader = __webpack_require__("3dzz"); 5123 5124// EXTERNAL MODULE: ./src/utils/utils.js 5125var utils = __webpack_require__("+n12"); 5126 5127// EXTERNAL MODULE: ./src/components/ClipContextMenu/ClipContextMenu.css 5128var ClipContextMenu = __webpack_require__("ZElj"); 5129var ClipContextMenu_default = /*#__PURE__*/__webpack_require__.n(ClipContextMenu); 5130 5131// EXTERNAL MODULE: ./src/config/constants.js 5132var constants = __webpack_require__("YwrL"); 5133 5134// EXTERNAL MODULE: ./node_modules/react-redux/es/index.js + 22 modules 5135var es = __webpack_require__("/MKj"); 5136 5137// EXTERNAL MODULE: ./src/actions/Previewer.actions.js 5138var Previewer_actions = __webpack_require__("uuAL"); 5139 5140// EXTERNAL MODULE: ./src/utils/app.utils.js 5141var app_utils = __webpack_require__("n8Gs"); 5142 5143// CONCATENATED MODULE: ./src/components/ClipContextMenu/ClipContextMenu.js 5144 5145 5146 5147 5148 5149// import Loader from '../Loader/Loader' 5150 5151 5152 5153function closeIfOuterClick(ref, subMenuRef, cb) { 5154 Object(react["useEffect"])(() => { 5155 const handle = e => { 5156 var _ref$current, _subMenuRef$current; 5157 return !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(e.target)) && !((_subMenuRef$current = subMenuRef.current) !== null && _subMenuRef$current !== void 0 && _subMenuRef$current.contains(e.target)) && cb && cb(); 5158 }; 5159 document.addEventListener("mousedown", handle); 5160 return () => document.removeEventListener("mousedown", handle); 5161 }, [ref, subMenuRef]); 5162} 5163function closeOnScrollOrResize(ref, cb) { 5164 Object(react["useEffect"])(() => { 5165 const handle = () => cb && cb(); 5166 window.addEventListener("resize", handle); 5167 ref.current.parentElement.addEventListener("scroll", handle); 5168 return () => { 5169 window.removeEventListener("resize", handle); 5170 ref.current.parentElement.removeEventListener("scroll", handle); 5171 }; 5172 }, [ref]); 5173} 5174const ClipContextMenu_ClipContextMenu = function (props) { 5175 const originalExt = props.clip.mimeType.split('/').pop(); 5176 5177 // const [showLoader, setShowLoader] = useState(false); 5178 5179 const menuRef = Object(react["useRef"])(null); 5180 const subMenuRef = Object(react["useRef"])(null); 5181 const [blob, setBlob] = Object(react["useState"])(null);
5182 const [isMenuLoader, setIsMenuLoader] = Object(react["useState"])(true); 5183 const [isImageNotAccessible, setIsImageNotAccessible] = Object(react["useState"])(false); 5184 const [hideMenu, setHideMenu] = Object(react["useState"])(false); 5185 const [subMenuOpen, setSubMenuOpen] = Object(react["useState"])(false); 5186 closeIfOuterClick(menuRef, subMenuRef, props.closeContextMenu); 5187 closeOnScrollOrResize(menuRef, props.closeContextMenu); 5188 const closeContextMenu = Object(react["useCallback"])(() => { 5189 props.closeContextMenu(); 5190 }); 5191 const getPositionStyles = Object(react["useCallback"])(() => { 5192 const pos = {}; 5193 if (window.innerWidth > 576) { 5194 const width = 220; // menuRef.current.clientWidth; 5195 const height = props.selectAllClips || props.selectedClips.length > 1 ? 164 : 413; // menuRef.current.clientHeight; 5196 5197 pos['left'] = props.x < window.innerWidth - width ? props.x : props.x - width; 5198 pos['top'] = props.y < window.innerHeight - height ? props.y : props.y - height; 5199 } else { 5200 const margin = 13; 5201 pos['width'] = window.innerWidth - margin * 2; 5202 pos['left'] = margin; 5203 pos['bottom'] = margin; 5204 } 5205 return pos; 5206 }); 5207 const calcSubMenuLeft = width => { 5208 if (props.x < window.innerWidth - 2 * width) { 5209 return props.x + width; 5210 } else { 5211 if (props.x < window.innerWidth - width) { 5212 return props.x - width; 5213 } else { 5214 return props.x - 2 * width; 5215 } 5216 } 5217 }; 5218 const getSubMenuPositionStyles = Object(react["useCallback"])(() => { 5219 const pos = {}; 5220 if (window.innerWidth > 576) { 5221 const width = 220; // subMenuRef.current.clientWidth; 5222 const height = 413; // menuRef.current.clientHeight; 5223 const marginTop = 136; 5224 pos['left'] = calcSubMenuLeft(width); 5225 pos['top'] = props.y < window.innerHeight - height ? props.y + marginTop : props.y - height + marginTop; 5226 } else { 5227 const margin = 13; 5228 pos['width'] = window.innerWidth - margin * 2; 5229 pos['left'] = margin; 5230 pos['bottom'] = margin; 5231 } 5232 return pos; 5233 }); 5234 5235 // function showEmbedNotification(text) { 5236 // if (!("Notification" in window)) alert(text); 5237 // else if (Notification.permission === "granted") new Notification(text); 5238 // else if (Notification.permission !== "denied") { 5239 // Notification.requestPermission().then(function (permission) { 5240 // if (permission === "granted") new Notification(text); 5241 // }); 5242 // } 5243 // } 5244 5245 Object(react["useEffect"])(() => { 5246 setBlob(null); 5247 setIsMenuLoader(true); 5248 let url = Object(app_utils["d" /* getViewableImageUrl */])(props.clip.downloadUrl); 5249 if (!url) { 5250 setIsMenuLoader(false); 5251 return; 5252 } 5253 ; 5254 const img = document.createElement('img'); 5255 img.crossOrigin = "anonymous"; 5256 const canvas = document.createElement('canvas'); 5257 const ctx = canvas.getContext('2d'); 5258 img.onload = function () { 5259 const w = img.width; 5260 const h = img.height; 5261 canvas.setAttribute("width", w); 5262 canvas.setAttribute("height", h); 5263 ctx.drawImage(img, 0, 0); 5264 canvas.toBlob(blob => { 5265 setBlob(blob); 5266 setIsMenuLoader(false); 5267 }, 'image/png'); 5268 }; 5269 img.onerror = function () { 5270 if (props.clip.clipLocatedInClipular) { 5271 // call to refresh link at clipular 5272 try { 5273 props.makeClipularClipReadableAgain(props.clip.clipId, url => img.src = url); 5274 return; 5275 } catch (e) { 5276 console.log("dashboard: error making clip readable"); 5277 } 5278 } 5279 setBlob(blob); 5280 setIsMenuLoader(false); 5281 setIsImageNotAccessible(true); 5282 }; 5283 img.src = url; 5284 }, [props.clip.downloadUrl]); 5285 const actions = {}; 5286 actions.copyLink = Object(react["useCallback"])(() => { 5287 const clipUrl = props.clip.url || props.clip.clipId; 5288 navigator.clipboard.writeText(constants["a" /* default */].host + clipUrl); 5289 props.setNotification("Link copied to the clipboard."); 5290 props.closeContextMenu(); 5291 }); 5292 actions.copyNamedLink = Object(react["useCallback"])(() => { 5293 const clipUrl = props.clip.url || props.clip.clipId; 5294 navigator.clipboard.writeText(constants["a" /* default */].host + clipUrl + "/" + Object(utils["p" /* slugify */])(props.clip.title)); 5295 props.setNotification("Named link copied to the clipboard."); 5296 props.closeContextMenu(); 5297 }); 5298 actions.copyAsImage = Object(react["useCallback"])(async () => { 5299 navigator.clipboard.write([new ClipboardItem({ 5300 "image/png": blob 5301 })]); 5302 props.setNotification("Image copied to the clipboard."); 5303 props.closeContextMenu(); 5304 }); 5305 actions.shareClip = Object(react["useCallback"])(e => { 5306 props.setShareClipModal(props.clip.clipId); 5307 props.closeContextMenu(); 5308 }); 5309 actions.togglePrivacy = Object(react["useCallback"])(() => { 5310 props.setClipPrivacyClip({ 5311 clipId: props.clip.clipId, 5312 privacy: props.clip.privacy === 'private' ? 'public' : 'private', 5313 loading: true 5314 }, () => props.setNotification("Clip Privacy wasn't set. There was an error.")); 5315 props.closeContextMenu(); 5316 }); 5317 actions.duplicateClip = Object(react["useCallback"])(() => { 5318 props.duplicateClip(props.clip, msg => { 5319 props.setNotification(msg || "Clip duplication error", true); 5320 }); 5321 props.closeContextMenu(); 5322 }); 5323 actions.moveTo = Object(react["useCallback"])(() => { 5324 props.selectDestinationFolderTrigger(props.clip); 5325 props.closeContextMenu(); 5326 }); 5327 actions.renameClip = Object(react["useCallback"])(() => { 5328 props.setRenameClipModal(props.clip.clipId); 5329 props.closeContextMenu(); 5330 }); 5331 actions.downloadClip = Object(react["useCallback"])(ext => { 5332 props.downloadClip([props.clip], ext); 5333 props.closeContextMenu(); 5334 }); 5335 actions.visitSource = Object(react["useCallback"])(() => { 5336 window.open(props.clip.pageUrl, "_blank"); 5337 props.closeContextMenu(); 5338 }); 5339 actions.sendToTrash = Object(react["useCallback"])(() => {
5340 let clips = []; 5341 if (props.selectAllClips || !props.selectedClips.includes(props.clip.clipId)) { 5342 clips = [props.clip.clipId]; 5343 } else { 5344 clips = [...props.selectedClips]; 5345 } 5346 props.removeClips(() => props.setNotification("Moving Clip to Trash wasn't successful"), clips); 5347 props.closeContextMenu(); 5348 }); 5349 actions.removePermanently = Object(react["useCallback"])(() => { 5350 let clips = []; 5351 if (props.selectAllClips || !props.selectedClips.includes(props.clip.clipId)) { 5352 clips = [props.clip.clipId]; 5353 } else { 5354 clips = [...props.selectedClips]; 5355 } 5356 props.setRemoveClipsModal(clips); 5357 props.closeContextMenu(); 5358 }); 5359 const disableForBrokenImage = () => { 5360 if (!isImageNotAccessible && (props.clip.previewUrl || props.clip.downloadUrl)) { 5361 return ''; 5362 } else { 5363 return ClipContextMenu_default.a.disable; 5364 } 5365 }; 5366 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("ul", { 5367 ref: menuRef, 5368 className: [ClipContextMenu_default.a.contextMenu, hideMenu ? ClipContextMenu_default.a.hidden : ''].join(' '), 5369 style: getPositionStyles() 5370 }, !props.selectAllClips && props.selectedClips.length <= 1 && /*#__PURE__*/react_default.a.createElement("li", { 5371 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.copyLink, disableForBrokenImage()].join(' '), 5372 onClick: actions.copyLink 5373 }, "Copy Short Link"), !props.selectAllClips && props.selectedClips.length <= 1 && /*#__PURE__*/react_default.a.createElement("li", { 5374 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.copyLink, disableForBrokenImage()].join(' '), 5375 onClick: actions.copyNamedLink 5376 }, "Copy Named Link"), !props.selectAllClips && props.selectedClips.length <= 1 && /*#__PURE__*/react_default.a.createElement("li", { 5377 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.copyImage, isMenuLoader && !isImageNotAccessible ? ClipContextMenu_default.a.itemIsLoading : '', disableForBrokenImage()].join(' '), 5378 onClick: actions.copyAsImage 5379 }, /*#__PURE__*/react_default.a.createElement(Loader["a" /* default */], { 5380 mode: "circle", 5381 hidden: !isMenuLoader || isImageNotAccessible 5382 }), "Copy as Image"), !props.selectAllClips && props.selectedClips.length <= 1 && /*#__PURE__*/react_default.a.createElement("li", { 5383 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.shareClip, disableForBrokenImage()].join(' '), 5384 onClick: actions.shareClip 5385 }, "Share on..."), !props.selectAllClips && props.selectedClips.length <= 1 && /*#__PURE__*/react_default.a.createElement("li", { 5386 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.downloadClip, isMenuLoader && !isImageNotAccessible ? [ClipContextMenu_default.a.itemIsLoading, ClipContextMenu_default.a.downloadClipLoading].join(' ') : '', disableForBrokenImage()].join(' '), 5387 onMouseEnter: () => setSubMenuOpen(true),
5388 onMouseLeave: () => setSubMenuOpen(false), 5389 onClick: () => window.innerWidth < 576 ? setHideMenu(true) : null 5390 }, /*#__PURE__*/react_default.a.createElement(Loader["a" /* default */], { 5391 mode: "circle", 5392 hidden: !isMenuLoader || isImageNotAccessible 5393 }), "Download as"), !props.selectAllClips && props.selectedClips.length <= 1 && /*#__PURE__*/react_default.a.createElement("li", { 5394 className: ClipContextMenu_default.a.separator 5395 }), !props.sharedFolder && /*#__PURE__*/react_default.a.createElement("li", { 5396 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.duplicateClip, disableForBrokenImage()].join(' '), 5397 onClick: actions.duplicateClip 5398 }, "Duplicate"), !props.sharedFolder && !props.selectAllClips && props.selectedClips.length <= 1 && /*#__PURE__*/react_default.a.createElement("li", { 5399 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.renameClip].join(' '), 5400 onClick: actions.renameClip 5401 }, "Rename"), !props.sharedFolder && /*#__PURE__*/react_default.a.createElement("li", { 5402 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.moveTo, disableForBrokenImage()].join(' '), 5403 onClick: actions.moveTo 5404 }, "Move to"), (props.selectAllClips || props.selectedClips.length > 1) && /*#__PURE__*/react_default.a.createElement("li", { 5405 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.downloadClipsZip, isMenuLoader && !isImageNotAccessible ? ClipContextMenu_default.a.itemIsLoading : '', disableForBrokenImage()].join(' '), 5406 onClick: actions.downloadClip 5407 }, /*#__PURE__*/react_default.a.createElement(Loader["a" /* default */], { 5408 mode: "circle", 5409 hidden: !isMenuLoader || isImageNotAccessible 5410 }), "Download as .zip"), !props.sharedFolder && !props.selectAllClips && props.selectedClips.length <= 1 && /*#__PURE__*/react_default.a.createElement("li", { 5411 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.clipPrivacy, props.clip.privacy === 'public' ? ClipContextMenu_default.a.clipPrivate : ClipContextMenu_default.a.clipPublic].join(' '), 5412 onClick: actions.togglePrivacy 5413 }, "Set to ", props.clip.privacy === 'public' ? 'Private' : 'Public'), !props.selectAllClips && props.selectedClips.length <= 1 && /*#__PURE__*/react_default.a.createElement("li", { 5414 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.visitSource, props.clip.pageUrl ? '' : ClipContextMenu_default.a.disable].join(' '), 5415 onClick: actions.visitSource 5416 }, "Visit Webpage \u203A"), !props.sharedFolder && /*#__PURE__*/react_default.a.createElement("li", { 5417 className: ClipContextMenu_default.a.separator 5418 }), !props.sharedFolder && (props.clip.parentFolderId != "trash" ? /*#__PURE__*/react_default.a.createElement("li", { 5419 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.Trash].join(' '), 5420 onClick: actions.sendToTrash 5421 }, "Send to Trash") : /*#__PURE__*/react_default.a.createElement("li", { 5422 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.Trash].join(' '), 5423 onClick: actions.removePermanently 5424 }, "Remove"))), subMenuOpen && /*#__PURE__*/react_default.a.createElement("ul", { 5425 ref: subMenuRef, 5426 className: [ClipContextMenu_default.a.contextMenu].join(' '), 5427 style: getSubMenuPositionStyles(), 5428 onMouseEnter: () => setSubMenuOpen(true),
5429 onMouseLeave: () => setSubMenuOpen(false) 5430 }, /*#__PURE__*/react_default.a.createElement("li", { 5431 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.png].join(' '), 5432 onClick: () => actions.downloadClip('png') 5433 }, "PNG", originalExt == 'png' ? ' (Original)' : ''), /*#__PURE__*/react_default.a.createElement("li", { 5434 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.jpeg].join(' '), 5435 onClick: () => actions.downloadClip('jpg') 5436 }, "JPEG", originalExt == 'jpeg' || originalExt == 'jpg' ? ' (Original)' : ''), /*#__PURE__*/react_default.a.createElement("li", { 5437 className: [ClipContextMenu_default.a.item, ClipContextMenu_default.a.pdf].join(' '), 5438 onClick: () => actions.downloadClip('pdf') 5439 }, "PDF"))); 5440}; 5441/* harmony default export */ var components_ClipContextMenu_ClipContextMenu = (Object(es["b" /* connect */])(null, dispatch => { 5442 return { 5443 setNotification: message => dispatch({ 5444 type: 'SET_APP_NOTIFICATION', 5445 value: message 5446 }), 5447 makeClipularClipReadableAgain: (clipId, callback) => dispatch(Object(Previewer_actions["a" /* dispatchMakeClipularClipReadableAgain */])({ 5448 reload: false, 5449 clipId, 5450 callback 5451 })) 5452 }; 5453})(ClipContextMenu_ClipContextMenu)); 5454// CONCATENATED MODULE: ./src/components/EmptyScreen/EmptyFolder.js 5455 5456function EmptyFolder() { 5457 return /*#__PURE__*/react_default.a.createElement("svg", { 5458 xmlns: "http://www.w3.org/2000/svg", 5459 xmlnsXlink: "http://www.w3.org/1999/xlink", 5460 width: "196", 5461 height: "83", 5462 viewBox: "0 0 196 83" 5463 }, /*#__PURE__*/react_default.a.createElement("defs", null, /*#__PURE__*/react_default.a.createElement("linearGradient", { 5464 id: "84hxlz3vmb", 5465 x1: "33.389%", 5466 x2: "33.389%", 5467 y1: "99.596%", 5468 y2: "0%" 5469 }, /*#__PURE__*/react_default.a.createElement("stop", { 5470 offset: "0%", 5471 stopOpacity: "0.13" 5472 }), /*#__PURE__*/react_default.a.createElement("stop", { 5473 offset: "100%", 5474 stopOpacity: "0.08" 5475 })), /*#__PURE__*/react_default.a.createElement("path", { 5476 id: "yx7djfho1a", 5477 d: "M3.846 0h53.308c1.337 0 1.822.14 2.311.4.49.262.873.646 1.134 1.135.262.489.401.974.401 2.31v35.31c0 1.336-.14 1.821-.4 2.31-.262.49-.646.873-1.135 1.134-.489.262-.974.401-2.31.401H3.844c-1.336 0-1.821-.14-2.31-.4A2.722 2.722 0 01.4 41.465c-.262-.489-.401-.974-.401-2.31V3.844c0-1.336.14-1.821.4-2.31.262-.49.646-.873 1.135-1.134.49-.261.975-.4 2.311-.4z" 5478 })), /*#__PURE__*/react_default.a.createElement("g", { 5479 fill: "none", 5480 fillRule: "evenodd" 5481 }, /*#__PURE__*/react_default.a.createElement("g", { 5482 transform: "translate(65 40)" 5483 }, /*#__PURE__*/react_default.a.createElement("mask", { 5484 id: "ip9arwfucc", 5485 fill: "#fff" 5486 }, /*#__PURE__*/react_default.a.createElement("use", { 5487 xlinkHref: "#yx7djfho1a" 5488 })), /*#__PURE__*/react_default.a.createElement("path", { 5489 stroke: "url(#84hxlz3vmb)", 5490 d: "M57.154.5H3.846C2.65.5 2.21.607 1.77.842c-.4.214-.715.528-.93.929C.608 2.21.5 2.65.5 3.846v35.308c0 1.196.107 1.636.342 2.075.214.4.528.715.929.93.439.234.88.341 2.075.341h53.308c1.196 0 1.636-.107 2.075-.342.4-.214.715-.528.93-.929.234-.439.341-.88.341-2.075V3.846c0-1.196-.107-1.636-.342-2.075a2.239 2.239 0 00-.929-.93C58.79.608 58.35.5 57.154.5z" 5491 }), /*#__PURE__*/react_default.a.createElement("path", { 5492 fill: "#1D2B36", 5493 fillOpacity: "0.1", 5494 d: "M-18 46.185l31.235-22.717a3.002 3.002 0 013.53 0L48 46.185h-66z", 5495 style: { 5496 mixBlendMode: "normal" 5497 }, 5498 mask: "url(#ip9arwfucc)" 5499 }), /*#__PURE__*/react_default.a.createElement("path", { 5500 fill: "#1D2B36", 5501 fillOpacity: "0.1", 5502 d: "M2 46.185l31.235-22.717a3.002 3.002 0 013.53 0L68 46.185H2z", 5503 style: { 5504 mixBlendMode: "normal" 5505 }, 5506 mask: "url(#ip9arwfucc)" 5507 }), /*#__PURE__*/react_default.a.createElement("circle", { 5508 fill: "#A6AFB8", 5509 fillOpacity: "0.34", 5510 style: { 5511 mixBlendMode: "normal" 5512 }, 5513 cx: "47.5", 5514 cy: "12.685", 5515 r: "5.5", 5516 mask: "url(#ip9arwfucc)" 5517 })), /*#__PURE__*/react_default.a.createElement("path", { 5518 fill: "#1C5A9C", 5519 fillOpacity: "0.05", 5520 stroke: "#000", 5521 strokeOpacity: "0.08", 5522 d: "M14.718 53.5H9.282c-.304 0-.422.014-.708.247-.06.113-.074.23-.074.535V66.5l-7.688.827 11.566 12.474L22.81 66.5H15.5V54.282c0-.304-.014-.422-.247-.708-.113-.06-.23-.074-.535-.074zm172 0h-5.436c-.304 0-.422.014-.708.247-.06.113-.074.23-.074.535V66.5l-7.688.827 11.566 12.474L194.81 66.5
5522h-7.31V54.282c0-.304-.014-.422-.247-.708-.113-.06-.23-.074-.535-.074zm-31-35h-5.436c-.304 0-.422.014-.708.247-.06.113-.074.23-.074.535V29.5l-5.726.823 9.608 10.452 8.462-11.275H156.5V19.282c0-.304-.014-.422-.247-.708-.113-.06-.23-.074-.535-.074zm-115 0h-5.436c-.304 0-.422.014-.708.247-.06.113-.074.23-.074.535V29.5l-5.726.823 9.608 10.452L46.844 29.5H41.5V19.282c0-.304-.014-.422-.247-.708-.113-.06-.23-.074-.535-.074zm57-18h-5.436c-.304 0-.422.014-.708.247-.06.113-.074.23-.074.535V13.5l-7.688.827 11.566 12.474L105.81 13.5H98.5V1.282c0-.304-.014-.422-.247-.708-.113-.06-.23-.074-.535-.074z" 5523 }))); 5524} 5525/* harmony default export */ var EmptyScreen_EmptyFolder = (EmptyFolder); 5526// EXTERNAL MODULE: ./assets/images/[email protected] 5527var trash_empty_2x = __webpack_require__("nvUd"); 5528var trash_empty_2x_default = /*#__PURE__*/__webpack_require__.n(trash_empty_2x); 5529 5530// CONCATENATED MODULE: ./src/components/EmptyScreen/EmptyPublic.js 5531 5532function EmptyPublic() { 5533 return /*#__PURE__*/react_default.a.createElement("svg", { 5534 xmlns: "http://www.w3.org/2000/svg", 5535 width: "85", 5536 height: "83", 5537 viewBox: "0 0 85 83" 5538 }, /*#__PURE__*/react_default.a.createElement("g", { 5539 fill: "none", 5540 fillRule: "evenodd", 5541 transform: "translate(-3.554)" 5542 }, /*#__PURE__*/react_default.a.createElement("path", { 5543 fill: "#ECF0F3", 5544 stroke: "#000", 5545 strokeOpacity: "0.13", 5546 d: "M8.915 28.5h24.019c2.683 0 6.083 1.832 7.585 4.09l1.12 1.686c.254.381.435.75.544 1.099H72.38c1.748 0 3.328.715 4.472 1.87a6.413 6.413 0 011.854 4.525v34.335a6.407 6.407 0 01-1.854 4.524A6.273 6.273 0 0172.38 82.5H10.609a6.273 6.273 0 01-4.473-1.87 6.413 6.413 0 01-1.854-4.525V33.156c0-1.292.517-2.455 1.353-3.296a4.614 4.614 0 013.28-1.36z" 5547 }), /*#__PURE__*/react_default.a.createElement("path", { 5548 fill: "#1D2B36", 5549 fillOpacity: "0.1", 5550 d: "M78.094 34.567h-54.9a10 10 0 00-9.586 7.148L4.765 71.433A9 9 0 0013.391 83h56.988a9 9 0 008.626-6.433l8.674-29.148c1.575-5.293-1.44-10.861-6.733-12.436a9.976 9.976 0 00-2.852-.416z" 5551 }), /*#__PURE__*/react_default.a.createElement("circle", { 5552 cx: "44.054", 5553 cy: "15.5", 5554 r: "3", 5555 fill: "#ECF0F3", 5556 stroke: "#000", 5557 strokeOpacity: "0.1" 5558 }), /*#__PURE__*/react_default.a.createElement("circle", { 5559 cx: "56.554", 5560 cy: "21", 5561 r: "2.5", 5562 fill: "#ECF0F3", 5563 stroke: "#000", 5564 strokeOpacity: "0.1" 5565 }), /*#__PURE__*/react_default.a.createElement("circle", { 5566 cx: "50.554", 5567 cy: "28", 5568 r: "1.5", 5569 fill: "#ECF0F3", 5570 stroke: "#000", 5571 strokeOpacity: "0.1" 5572 }), /*#__PURE__*/react_default.a.createElement("circle", { 5573 cx: "51.554", 5574 cy: "5", 5575 r: "4.5", 5576 fill: "#ECF0F3", 5577 stroke: "#000", 5578 strokeOpacity: "0.1" 5579 }))); 5580} 5581/* harmony default export */ var EmptyScreen_EmptyPublic = (EmptyPublic); 5582// EXTERNAL MODULE: ./assets/images/[email protected] 5583var empty_search_2x = __webpack_require__("7h/F"); 5584var empty_search_2x_default = /*#__PURE__*/__webpack_require__.n(empty_search_2x); 5585 5586// EXTERNAL MODULE: ./assets/images/dashboard-empty-2x.png 5587var dashboard_empty_2x = __webpack_require__("EeIO"); 5588var dashboard_empty_2x_default = /*#__PURE__*/__webpack_require__.n(dashboard_empty_2x); 5589 5590// CONCATENATED MODULE: ./src/components/BackToTop/BackToTopSVG.js 5591 5592function BackToTopSVG() { 5593 return /*#__PURE__*/react_default.a.createElement("svg", { 5594 xmlns: "http://www.w3.org/2000/svg", 5595 width: "24", 5596 height: "24", 5597 viewBox: "0 0 24 24" 5598 }, /*#__PURE__*/react_default.a.createElement("defs", null, /*#__PURE__*/react_default.a.createElement("filter", { 5599 id: "9ywy6sn21a", 5600 width: "125%", 5601 height: "185%", 5602 x: "-12.5%", 5603 y: "-42.5%", 5604 filterUnits: "objectBoundingBox" 5605 }, /*#__PURE__*/react_default.a.createElement("feOffset", { 5606 dy: "2", 5607 in: "SourceAlpha", 5608 result: "shadowOffsetOuter1" 5609 }), /*#__PURE__*/react_default.a.createElement("feGaussianBlur", { 5610 in: "shadowOffsetOuter1", 5611 result: "shadowBlurOuter1", 5612 stdDeviation: "3" 5613 }), /*#__PURE__*/react_default.a.createElement("feColorMatrix", { 5614 in: "shadowBlurOuter1", 5615 result: "shadowMatrixOuter1", 5616 values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.243607955 0"
5617 }), /*#__PURE__*/react_default.a.createElement("feMerge", null, /*#__PURE__*/react_default.a.createElement("feMergeNode", { 5618 in: "shadowMatrixOuter1" 5619 }), /*#__PURE__*/react_default.a.createElement("feMergeNode", { 5620 in: "SourceGraphic" 5621 })))), /*#__PURE__*/react_default.a.createElement("g", { 5622 fill: "#151E28", 5623 fillOpacity: "0.79", 5624 fillRule: "evenodd", 5625 filter: "url(#9ywy6sn21a)", 5626 transform: "translate(-8 -8)" 5627 }, /*#__PURE__*/react_default.a.createElement("path", { 5628 d: "M20 10.77A9.23 9.23 0 0129.23 20 9.23 9.23 0 0120 29.23 9.23 9.23 0 0110.77 20 9.23 9.23 0 0120 10.77zm0 1.384a7.846 7.846 0 00-.692 15.662v-8.915L17.72 20.49a.693.693 0 01-.893.073l-.086-.073a.694.694 0 010-.98L20 16.252l3.259 3.258a.694.694 0 01-.98.98l-1.587-1.588v8.914a7.847 7.847 0 007.15-7.567l.004-.249A7.846 7.846 0 0020 12.154z" 5629 }))); 5630} 5631/* harmony default export */ var BackToTop_BackToTopSVG = (BackToTopSVG); 5632// EXTERNAL MODULE: ./node_modules/react-xmasonry/dist/index.js 5633var dist = __webpack_require__("emVg"); 5634 5635// CONCATENATED MODULE: ./src/hooks/useWindowSize.js 5636 5637function useWindowSize() { 5638 // Initialize state with undefined width/height so server and client renders match 5639 // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/ 5640 const [windowSize, setWindowSize] = Object(react["useState"])({ 5641 width: window.innerWidth, 5642 height: window.innerHeight 5643 }); 5644 Object(react["useEffect"])(() => { 5645 // Handler to call on window resize 5646 function handleResize() { 5647 // Set window width/height to state 5648 setWindowSize({ 5649 width: window.innerWidth, 5650 height: window.innerHeight 5651 }); 5652 } 5653 5654 // Add event listener 5655 window.addEventListener("resize", handleResize); 5656 5657 // Call handler right away so state gets updated with initial window size 5658 handleResize(); 5659 5660 // Remove event listener on cleanup 5661 return () => window.removeEventListener("resize", handleResize); 5662 }, []); // Empty array ensures that effect is only run on mount 5663 5664 return windowSize; 5665} 5666// EXTERNAL MODULE: ./src/components/Browse/Browse.js 5667var Browse = __webpack_require__("SL9e"); 5668 5669// EXTERNAL MODULE: ./src/components/AccountNotification/AccountNotification.css 5670var AccountNotification = __webpack_require__("IVX6"); 5671var AccountNotification_default = /*#__PURE__*/__webpack_require__.n(AccountNotification); 5672 5673// CONCATENATED MODULE: ./src/components/AccountNotification/AccountNotification.js 5674 5675 5676function AccountNotification_AccountNotification(props) { 5677 const [title, setTitle] = Object(react["useState"])(""); 5678 const [buttonLabel, setButtonLabel] = Object(react["useState"])(''); 5679 const [verificationSuccess, setVerificationSuccess] = Object(react["useState"])(false); 5680 Object(react["useEffect"])(() => { 5681 if (props.isEmailVerified === "Verification Success") { 5682 setTitle("Thank you, email verification was successful. Keep clipping!"); 5683 setButtonLabel("Dissmiss"); 5684 setVerificationSuccess(true); 5685 const timer = setTimeout(() => { 5686 hideVerificationSuccessNotification(); 5687 }, 3000); 5688 return () => clearTimeout(timer); 5689 } else { 5690 setTitle("Please check your inbox for a verification email and click the link inside to verify your address. You may have to check your spam folder."); 5691 setButtonLabel("Resend verification"); 5692 } 5693 }, []); 5694 function reSendEmailVerification() { 5695 props.reSendEmailVerification(); 5696 } 5697 function hideVerificationSuccessNotification() { 5698 props.hideVerificationSuccessNotification(); 5699 } 5700 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 5701 className: verificationSuccess ? AccountNotification_default.a.verificationSuccessContainer : AccountNotification_default.a.container 5702 }, /*#__PURE__*/react_default.a.createElement("div", { 5703 className: verificationSuccess ? AccountNotification_default.a.verificationSuccessTitle : AccountNotification_default.a.title 5704 }, title), verificationSuccess ? /*#__PURE__*/react_default.a.createElement("button", { 5705 className: AccountNotification_default.a.verificationSuccessButton, 5706 onClick: hideVerificationSuccessNotification 5707 }, buttonLabel) : /*#__PURE__*/react_default.a.createElement("button", { 5708 className: AccountNotification_default.a.button, 5709 onClick: reSendEmailVerification 5710 }, buttonLabel))); 5711} 5712// EXTERNAL MODULE: ./src/components/BrokenImage/BrokenImage.js 5713var BrokenImage = __webpack_require__("BdHJ"); 5714 5715// EXTERNAL MODULE: ./src/editor/mods/util.js 5716var util = __webpack_require__("p2J/"); 5717 5718// EXTERNAL MODULE: ./assets/images/dashboard.add.file.svg 5719var dashboard_add_file = __webpack_require__("xQZx"); 5720var dashboard_add_file_default = /*#__PURE__*/__webpack_require__.n(dashboard_add_file); 5721 5722// EXTERNAL MODULE: ./assets/images/dashboard.empty.file.svg
5723var dashboard_empty_file = __webpack_require__("1bU3"); 5724var dashboard_empty_file_default = /*#__PURE__*/__webpack_require__.n(dashboard_empty_file); 5725 5726// EXTERNAL MODULE: ./assets/images/dashboard.book.svg 5727var dashboard_book = __webpack_require__("Tyxy"); 5728var dashboard_book_default = /*#__PURE__*/__webpack_require__.n(dashboard_book); 5729 5730// CONCATENATED MODULE: ./src/components/ClipList/ClipList.js 5731 5732 5733 5734 5735 5736 5737// import EmptyTrashCan from '../EmptyScreen/EmptyTrashCan' 5738 5739 5740// import EmptySearchResult from '../EmptyScreen/EmptySearchResult' 5741 5742 5743 5744 5745 5746 5747 5748 5749 5750 5751 5752// import MultipleUploadContainer from '../MultipleUploadContainer/MultipleUploadContainer'; 5753 5754 5755 5756function ClipList_ClipList(props) { 5757 const atleastOneClipSelected = props.selectAllClips || props.selectedClips.length > 0; 5758 const [isDragging, setDragging] = Object(react["useState"])(false); 5759 // const [isMobileOrTablet, setIsMobileOrTablet] = useState(false) 5760 const windowSize = useWindowSize(); 5761 const targetBlockWidth = windowSize.width <= 576 ? 350 : 260; 5762 const [showScroll, setShowScroll] = Object(react["useState"])(false); 5763 const [clipContext, setClipContext] = Object(react["useState"])(false); 5764 const [isExtensionInstalled, setIsExtensionInstalled] = Object(react["useState"])(false); 5765 const clipsListRef = Object(react["useRef"])(null);
5766 const loadMoreRef = Object(react["useRef"])(null); 5767 const scrollLoadingInitialized = Object(react["useRef"])(false); 5768 const childRef = Object(react["useRef"])(); 5769 const dragImagesBuffer = Object(react["useRef"])({}); 5770 const fillDragImagesBuffer = Object(react["useCallback"])(c => { 5771 if (c === 0 || c > 99 || typeof dragImagesBuffer.current[c] !== 'undefined') return; 5772 dragImagesBuffer.current[c] = new Image(); 5773 dragImagesBuffer.current[c].src = Object(utils["d" /* dragImageUrl */])(c); 5774 }); 5775 [1, 2, 'all', '99+'].forEach(fillDragImagesBuffer); 5776 5777 // const fileLoaded = useCallback((fileData) => { 5778 // props.showPreview(fileData) 5779 // }) 5780 5781 const fileLoaded = fileData => { 5782 props.setFileData(fileData); 5783 if (window.innerWidth <= 576) { 5784 props.showUploadModal(); 5785 } 5786 }; 5787 const showUploadModal = () => { 5788 if (window.innerWidth > 576) { 5789 props.showUploadModal(); 5790 } 5791 }; 5792 function contextMenu(e, clip) { 5793 e.preventDefault(); 5794 showClipContextMenu(e, clip); 5795 } 5796 Object(react["useLayoutEffect"])(() => { 5797 Object(utils["n" /* isExtInstalled */])(data => { 5798 if (data.msg) { 5799 setIsExtensionInstalled(data.msg); 5800 } 5801 }); 5802 }, []); 5803 Object(react["useEffect"])(() => { 5804 const count = props.selectedClips.length; 5805 [count, count + 1].forEach(fillDragImagesBuffer); 5806 }, [props.selectedClips.length]); 5807 const initClipsLoading = Object(react["useCallback"])(() => { 5808 const options = { 5809 root: clipsListRef.current, 5810 rootMargin: '0px', 5811 threshold: 0.01 5812 }; 5813 let scrollObserver = new IntersectionObserver(async entries => { 5814 const firstEntry = entries[0]; 5815 if (firstEntry.isIntersecting) { 5816 props.getClips(); 5817 } 5818 }, options); 5819 scrollObserver.observe(loadMoreRef.current); 5820 scrollLoadingInitialized.current = true; 5821 return () => scrollObserver.disconnect(); 5822 }); 5823 5824 // useEffect(() => { 5825 // debugger; 5826 // const f = async () => { 5827 // await initClipsLoading() 5828 // } 5829 // f(); 5830 // }, [props.isFilesUploading]) 5831 5832 Object(react["useEffect"])(() => { 5833 const f = async () => { 5834 if (!!props.userId) { 5835 await initClipsLoading(); 5836 if (props.clips.length == 0 && !props.sharedFolder) { 5837 props.getClips(); 5838 } 5839 } 5840 }; 5841 f(); 5842 }, [props.userId]); 5843 const goToClip = Object(react["useCallback"])((clipLink, e) => { 5844 e.preventDefault(); 5845 const url = "/" + clipLink; 5846 if (e.ctrlKey || e.metaKey || props.sharedFolder) window.open(url, "_blank");else props.history.push(url); 5847 }); 5848 const clipDragStart = Object(react["useCallback"])((clipId, e) => {
5849 let count = props.selectedClips.length; 5850 if (!props.selectedClips.includes(clipId) && !props.selectAllClips) { 5851 props.clipSelectionAdd(clipId); 5852 count += 1; 5853 } 5854 count = props.selectAllClips ? 'all' : count > 99 ? '99+' : count; 5855 setDragging(true); 5856 e.dataTransfer.setData('text/plain', ''); 5857 e.dataTransfer.setDragImage(dragImagesBuffer.current[count], 40, 10); 5858 }); 5859 const showClipContextMenu = Object(react["useCallback"])((e, clip) => { 5860 e.stopPropagation(); 5861 e.nativeEvent.stopImmediatePropagation(); 5862 if (!props.selectedClips.includes(clip.clipId) && !props.selectAllClips) { 5863 props.resetClipsSelection(); 5864 } 5865 setClipContext({ 5866 x: e.clientX, 5867 y: e.clientY, 5868 clip: clip 5869 }); 5870 }); 5871 const sendToTrash = () => { 5872 let clips = [...props.selectedClips]; 5873 props.removeClips(() => props.setNotification("Moving Clip to Trash wasn't successful"), clips); 5874 setClipContext(false); 5875 }; 5876 const removePermanently = () => { 5877 let clips = [...props.selectedClips]; 5878 props.setRemoveClipsModal(clips); 5879 setClipContext(false); 5880 }; 5881 const onKeyUp = e => { 5882 if (!atleastOneClipSelected || props.currentModal) return; 5883 if (e.key === "Delete" || Object(utils["m" /* getOS */])() === 'macOS' && e.key === "Backspace") { 5884 window.location.pathname === "/dashboard/trash" ? removePermanently() : sendToTrash(); 5885 } 5886 if (e.key === "Escape") { 5887 props.resetClipsSelection(); 5888 } 5889 }; 5890 const onKeyDown = e => { 5891 if (props.currentModal) return; 5892 if (e.ctrlKey && e.keyCode === 65) { 5893 e.preventDefault(); 5894 props.setClipsSelection(); 5895 } 5896 }; 5897 Object(react["useEffect"])(() => { 5898 clipsListRef.current.addEventListener('scroll', checkScrollTop); 5899 document.addEventListener("keyup", onKeyUp); 5900 document.addEventListener("keydown", onKeyDown); 5901 return function cleanup() { 5902 clipsListRef.current.removeEventListener('scroll', checkScrollTop); 5903 document.removeEventListener("keyup", onKeyUp); 5904 document.removeEventListener("keydown", onKeyDown); 5905 }; 5906 }); 5907 Object(react["useEffect"])(() => { 5908 if (!clipContext) { 5909 props.isOpen(false); 5910 } else { 5911 props.isOpen(true); 5912 } 5913 }, [clipContext]); 5914 5915 // useEffect(() => { 5916 // if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 5917 // setIsMobileOrTablet(true) 5918 // } 5919 // }, []); 5920 5921 const checkScrollTop = () => { 5922 if (!showScroll && clipsListRef.current.scrollTop > 300) { 5923 setShowScroll(true); 5924 } else if (showScroll && clipsListRef.current.scrollTop <= 300) { 5925 setShowScroll(false); 5926 } 5927 if (clipsListRef.current.scrollTop > 5) { 5928 // setShadowEffect(true) 5929 props.shadowEffect(true); 5930 } else { 5931 // setShadowEffect(false) 5932 props.shadowEffect(false); 5933 } 5934 }; 5935 const scrollTop = () => { 5936 clipsListRef.current.scrollTo({ 5937 top: 0, 5938 behavior: 'smooth' 5939 }); 5940 }; 5941 const checkPreview = clip => { 5942 let url = clip.downloadUrl; 5943 if (clip.previewUrl) { 5944 url = clip.previewUrl; 5945 } 5946 url = url.replace("http:/", "https:/"); 5947 return Object(app_utils["d" /* getViewableImageUrl */])(url); 5948 }; 5949 const getTitle = clip => { 5950 if (clip.previewUrl || clip.downloadUrl) { 5951 return clip.title; 5952 } else { 5953 return "Sorry, this clip's image is missing or damaged."; 5954 } 5955 }; 5956 const toggleClipSelection = (e, clip) => { 5957 e.stopPropagation(); 5958 props.clipSelectionToggle(clip.clipId); 5959 }; 5960 const goToChromeWebStore = () => { 5961 window.open('https://chromewebstore.google.com/detail/screenclip-screenshot-com/jmjbgcjbgmcfgbgikmbdioggjlhjegpp'); 5962 }; 5963 const goToInstructionsPage = () => { 5964 window.open('https://screenclip.com/browser-extension-installed'); 5965 }; 5966 const isMobileScreen = window.innerWidth < 767.98; 5967 const text = isMobileScreen ? /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, "Add ", /*#__PURE__*/react_default.a.createElement("b", null, "png"), " or ", /*#__PURE__*/react_default.a.createElement("b", null, "jpeg images"), " up to 7MB.") : /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, "Add ", /*#__PURE__*/react_default.a.createElement("b", null, "screenshots"), " using ", /*#__PURE__*/react_default.a.createElement("span", { 5968 onClick: goToChromeWebStore 5969 }, "ScreenClip Browser Extension"), ", ", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("b", null, "drag + drop"), " images, or browse files using the ", /*#__PURE__*/react_default.a.createElement("b", null, "file explorer"), ". ", /*#__PURE__*/react_default.a.createElement("br", null), "Please use ", /*#__PURE__*/react_default.a.createElement("b", null, "png"), " or ", /*#__PURE__*/react_default.a.createElement("b", null, "jpeg images"), " up to 7MB."); 5970 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, !props.loading && (props.isEmailVerified === false || props.isEmailVerified === "Verification Success") && /*#__PURE__*/react_default.a.createElement(AccountNotification_AccountNotification, { 5971 reSendEmailVerification: props.reSendEmailVerification, 5972 isEmailVerified: props.isEmailVerified, 5973 hideVerificationSuccessNotification: props.hideVerificationSuccessNotification 5974 }), /*#__PURE__*/react_default.a.createElement("div", { 5975 className: [ClipList_default.a.clipList, props.clips.length == 0 ? ClipList_default.a.clipListEmpty : ''].join(' '), 5976 ref: clipsListRef 5977 }, props.isFilesUploading ? /*#__PURE__*/react_default.a.createElement("div", { 5978 className: ClipList_default.a.uploadPleaseContainer 5979 }, /*#__PURE__*/react_default.a.createElement("div", {
5980 className: ClipList_default.a.emptyDashboardPNGContainer 5981 }, /*#__PURE__*/react_default.a.createElement("img", { 5982 alt: "empty dashboard png", 5983 src: dashboard_empty_2x_default.a, 5984 className: ClipList_default.a.emptyDashboardPNG 5985 })), /*#__PURE__*/react_default.a.createElement("div", { 5986 className: ClipList_default.a.uploadPleaseText 5987 }, text)) : /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, props.clips.length > 0 || props.loading || props.hasMoreClips ? /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement(dist["XMasonry"], { 5988 updateOnImagesLoad: true, 5989 center: true /*maxColumns={10}*/, 5990 targetBlockWidth: targetBlockWidth, 5991 style: { 5992 "left": "-5px" 5993 } 5994 }, props.clips.map(clip => { 5995 // if(!props.currentUser.cloudConnectProvider && clip.storageLocation == "googleDrive"){ 5996 // return 5997 // } 5998 const isNotBroken = clip.previewUrl || clip.downloadUrl; 5999 const clipLink = (clip.url || clip.clipUrl || clip.clipId) + "/" + Object(utils["p" /* slugify */])(clip.title); 6000 const isSelected = props.selectAllClips || props.selectedClips.includes(clip.clipId); 6001 const classes = [ClipList_default.a.clipCard, isDragging && isSelected ? ClipList_default.a.cardDragging : '', isSelected ? ClipList_default.a.selectedClip : '', clip.newUpload ? ClipList_default.a.newlyUploadedClip : '', atleastOneClipSelected ? ClipList_default.a.atleastOneClipSelected : ''].join(' '); 6002 const isPrivate = clip.privacy === 'private'; 6003 return /*#__PURE__*/react_default.a.createElement(dist["XBlock"], { 6004 key: clip.clipId 6005 }, /*#__PURE__*/react_default.a.createElement("div", { 6006 onContextMenu: e => contextMenu(e, clip), 6007 className: classes, 6008 draggable: "true", 6009 onDragStart: e => clipDragStart(clip.clipId, e), 6010 onDragEnd: () => setDragging(false), 6011 onClick: e => atleastOneClipSelected || e.shiftKey ? toggleClipSelection(e, clip) : goToClip(clipLink, e) 6012 }, /*#__PURE__*/react_default.a.createElement("div", { 6013 className: ClipList_default.a.checkBox, 6014 onClick: e => toggleClipSelection(e, clip) 6015 }), /*#__PURE__*/react_default.a.createElement("div", { 6016 title: getTitle(clip), 6017 className: [ClipList_default.a.clipImageContainer, isPrivate ? ClipList_default.a.clipPrivate : ''].join(' ') 6018 }, /*#__PURE__*/react_default.a.createElement("div", { 6019 className: ClipList_default.a.imageOverlay 6020 }), isNotBroken ? /*#__PURE__*/react_default.a.createElement("img", { 6021 alt: clip.title, 6022 className: ClipList_default.a.clipImage, 6023 src: checkPreview(clip) 6024 }) : /*#__PURE__*/react_default.a.createElement("div", { 6025 className: ClipList_default.a.brokenImageBackground 6026 }, /*#__PURE__*/react_default.a.createElement(BrokenImage["a" /* default */], null))), /*#__PURE__*/react_default.a.createElement("div", { 6027 className: ClipList_default.a.titleLine 6028 }, /*#__PURE__*/react_default.a.createElement("span", null, clip.title), /*#__PURE__*/react_default.a.createElement("div", { 6029 className: ClipList_default.a.contextMenuRunner, 6030 onClick: e => showClipContextMenu(e, clip) 6031 })))); 6032 })), clipContext && /*#__PURE__*/react_default.a.createElement(components_ClipContextMenu_ClipContextMenu, { 6033 x: clipContext.x, 6034 y: clipContext.y, 6035 clip: clipContext.clip, 6036 selectAllClips: props.selectAllClips, 6037 selectedClips: props.selectedClips, 6038 closeContextMenu: () => setClipContext(false), 6039 setModal: props.setModal, 6040 setShareClipModal: props.setShareClipModal, 6041 setRenameClipModal: props.setRenameClipModal, 6042 downloadClip: props.downloadClip, 6043 setClipPrivacyClip: props.setClipPrivacyClip, 6044 setRemoveClipsModal: props.setRemoveClipsModal, 6045 duplicateClip: props.duplicateClip, 6046 removeClips: props.removeClips, 6047 clipSelectionAdd: props.clipSelectionAdd, 6048 resetClipsSelection: props.resetClipsSelection, 6049 sharedFolder: props.sharedFolder, 6050 selectDestinationFolderTrigger: props.selectDestinationFolderTrigger 6051 })) : props.currentFolder == "trash" ? /*#__PURE__*/react_default.a.createElement("div", { 6052 className: [ClipList_default.a.uploadPleaseContainer, ClipList_default.a.emptyTrashCanContainer].join(" ") 6053 }, /*#__PURE__*/react_default.a.createElement("div", { 6054 className: ClipList_default.a.emptyTrashCanPNGContainer 6055 }, /*#__PURE__*/react_default.a.createElement("img", { 6056 alt: "empty trash png", 6057 src: trash_empty_2x_default.a, 6058 className: ClipList_default.a.emptyTrashPNG 6059 })), /*#__PURE__*/react_default.a.createElement("div", { 6060 className: [ClipList_default.a.uploadPleaseText, ClipList_default.a.emptyTrashCanText].join(' ') 6061 }, "Your trash is empty")) : props.sharedFolder ? /*#__PURE__*/react_default.a.createElement("div", { 6062 className: [ClipList_default.a.uploadPleaseContainer, ClipList_default.a.emptyPublicContainer].join(' ') 6063 }, /*#__PURE__*/react_default.a.createElement("div", { 6064 className: ClipList_default.a.emptyPublicSVGContainer 6065 }, /*#__PURE__*/react_default.a.createElement(EmptyScreen_EmptyPublic, null)), /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("div", { 6066 className: ClipList_default.a.uploadPleaseText 6067 }, "Shared folder is empty or has no public clips")) : props.searchQuery.length > 0 && props.clips.length == 0 ? /*#__PURE__*/react_default.a.createElement("div", { 6068 className: [ClipList_default.a.uploadPleaseContainer, ClipList_default.a.emptySearchContainer].join(' ') 6069 }, /*#__PURE__*/react_default.a.createElement("div", { 6070 className: ClipList_default.a.emptySearchResultPNGContainer 6071 }, /*#__PURE__*/react_default.a.createElement("img", { 6072 alt: "empty search png", 6073 src: empty_search_2x_default.a, 6074 className: ClipList_default.a.emptySearchPNG 6075 })), /*#__PURE__*/react_default.a.createElement("div", { 6076 className: [ClipList_default.a.uploadPleaseText, ClipList_default.a.emptySearchText].join(' ') 6077 }, "No coincidences were found,", /*#__PURE__*/react_default.a.createElement("br", null), "please try a different query.")) : /*#__PURE__*/react_default.a.createElement("div", { 6078 className: ClipList_default.a.uploadPleaseContainer 6079 }, /*#__PURE__*/react_default.a.createElement("div", {
6080 className: ClipList_default.a.emptyDashboardPNGContainer 6081 }, /*#__PURE__*/react_default.a.createElement("img", { 6082 alt: "empty dashboard png", 6083 src: dashboard_empty_2x_default.a, 6084 className: ClipList_default.a.emptyDashboardPNG 6085 })), /*#__PURE__*/react_default.a.createElement("div", { 6086 className: ClipList_default.a.uploadPleaseText 6087 }, text, /*#__PURE__*/react_default.a.createElement(Browse["a" /* default */], { 6088 uploadClip: props.uploadClip, 6089 ref: childRef, 6090 showUploadModalAndFileSelectionDialog: fileLoaded, 6091 showUploadModal: showUploadModal 6092 })), !isMobileScreen && !isExtensionInstalled && /*#__PURE__*/react_default.a.createElement("button", { 6093 className: ClipList_default.a.getBrowserExtensionButton, 6094 onClick: goToChromeWebStore 6095 }, "Get Browser Extension"), /*#__PURE__*/react_default.a.createElement("button", { 6096 className: ClipList_default.a.uploadContainerButton, 6097 onClick: () => childRef.current.chooseFileClicked() 6098 }, /*#__PURE__*/react_default.a.createElement("img", { 6099 alt: "ext add file icon", 6100 src: dashboard_add_file_default.a 6101 }), "Add Image"), !isMobileScreen && /*#__PURE__*/react_default.a.createElement("button", { 6102 className: ClipList_default.a.uploadContainerButton, 6103 onClick: () => props.setModal('newBlankClip') 6104 }, /*#__PURE__*/react_default.a.createElement("img", { 6105 alt: "ext empty file icon", 6106 src: dashboard_empty_file_default.a 6107 }), "Create a Whiteboard"), !isMobileScreen ? /*#__PURE__*/react_default.a.createElement("button", { 6108 className: ClipList_default.a.uploadContainerButton, 6109 onClick: goToInstructionsPage 6110 }, /*#__PURE__*/react_default.a.createElement("img", { 6111 alt: "ext instructions icon", 6112 src: dashboard_book_default.a 6113 }), "Extension Instructions") : /*#__PURE__*/react_default.a.createElement("button", { 6114 className: ClipList_default.a.uploadContainerButton, 6115 onClick: goToChromeWebStore 6116 }, "Add Extension to Desktop")), /*#__PURE__*/react_default.a.createElement("div", { 6117 className: ClipList_default.a["scrollTop"], 6118 onClick: scrollTop, 6119 style: { 6120 display: showScroll ? 'flex' : 'none', 6121 right: clipsListRef.current ? clipsListRef.current.clientWidth / 2 - 60 : '' 6122 } 6123 }, /*#__PURE__*/react_default.a.createElement(BackToTop_BackToTopSVG, null), /*#__PURE__*/react_default.a.createElement("span", { 6124 className: [ClipList_default.a['backToTop'], ClipList_default.a['noSelect']].join(' ') 6125 }, "Back to top"))), /*#__PURE__*/react_default.a.createElement(Loader["a" /* default */], { 6126 ref: loadMoreRef, 6127 hidden: !(!props.loading && props.hasMoreClips) 6128 }), props.loading && /*#__PURE__*/react_default.a.createElement(Loader["a" /* default */], { 6129 hidden: !props.hasMoreClips 6130 }))); 6131} 6132 6133/***/ }), 6134 6135/***/ "9a+k": 6136/***/ (function(module, exports, __webpack_require__) { 6137 6138// extracted by mini-css-extract-plugin 6139module.exports = {"outer":"src-components-Notification-Notification__outer--Wia28","shown":"src-components-Notification-Notification__shown--ZxUFt","notificationContainer":"src-components-Notification-Notification__notificationContainer--lFkt0","notificationContainerForMultipleImages":"src-components-Notification-Notification__notificationContainerForMultipleImages--NW0Ss","notificationContainerviewErrors":"src-components-Notification-Notification__notificationContainerviewErrors--Uq1I4","message":"src-components-Notification-Notification__message--29o6G","gotit":"src-components-Notification-Notification__gotit--GJqqD","viewErrors":"src-components-Notification-Notification__viewErrors--vHWNA","gotitLabel":"src-components-Notification-Notification__gotitLabel--mHleq","error":"src-components-Notification-Notification__error--HOoq8","viewErrorsContainer":"src-components-Notification-Notification__viewErrorsContainer--yLAJn","hideViewErrorsContainer":"src-components-Notification-Notification__hideViewErrorsContainer--7JOeL","retryinfo":"src-components-Notification-Notification__retryinfo--qpBQW","errorMessage":"src-components-Notification-Notification__errorMessage--ty7vQ","sourceTitle":"src-components-Notification-Notification__sourceTitle--lwgmg","tryAgain":"src-components-Notification-Notification__tryAgain--lBBim","info":"src-components-Notification-Notification__info--WVw++","clipular":"src-components-Notification-Notification__clipular--4V0P6","notyWarning":"src-components-Notification-Notification__notyWarning--A7asQ","notyDefault":"src-components-Notification-Notification__notyDefault--sJFAu","done":"src-components-Notification-Notification__done--eDBV9","action":"src-components-Notification-Notification__action--xfK6e","storageFull":"src-components-Notification-Notification__storageFull--t-dyj","storageLow":"src-components-Notification-Notification__storageLow--iCbO9","multipleButtons":"src-components-Notification-Notification__multipleButtons--N2aMQ"}; 6140 6141/***/ }), 6142 6143/***/ "A+iP": 6144/***/ (function(module, __webpack_exports__, __webpack_require__) { 6145 6146"use strict"; 6147/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("q1tI"); 6148/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 6149/* harmony import */ var _Popup_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("8JvB"); 6150/* harmony import */ var _Popup_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_Popup_css__WEBPACK_IMPORTED_MODULE_1__); 6151 6152 6153class Popup extends react__WEBPACK_IMPORTED_MODULE_0___default.a.Component { 6154 onCancelClick() { 6155 this.props.onCancelClick(); 6156 } 6157 onOkClick() { 6158 this.props.onYesClick(this.props.type); 6159 } 6160 render() { 6161 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 6162 className: _Popup_css__WEBPACK_IMPORTED_MODULE_1___default.a['popup-container'] 6163 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 6164 className: _Popup_css__WEBPACK_IMPORTED_MODULE_1___default.a["title"] 6165 }, this.props.title), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 6166 className: _Popup_css__WEBPACK_IMPORTED_MODULE_1___default.a["content"] 6167 }, this.props.content), this.props.type == "ticketPreview" && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 6168 className: _Popup_css__WEBPACK_IMPORTED_MODULE_1___default.a["content"] 6169 }, this.props.images.length > 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, this.props.images.map((att, index) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { 6170 key: index 6171 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", { 6172 className: _Popup_css__WEBPACK_IMPORTED_MODULE_1___default.a['attached-items'], 6173 src: att.dataUrl 6174 }
6174))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 6175 className: _Popup_css__WEBPACK_IMPORTED_MODULE_1___default.a["button-container"] 6176 }, this.props.type == "feedback" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 6177 onClick: this.onCancelClick.bind(this), 6178 className: _Popup_css__WEBPACK_IMPORTED_MODULE_1___default.a["yes-button"] 6179 }, "Ok") : this.props.type == "delete" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 6180 onClick: this.onCancelClick.bind(this), 6181 className: _Popup_css__WEBPACK_IMPORTED_MODULE_1___default.a["cancel-button"] 6182 }, this.props.cancel), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 6183 onClick: this.onOkClick.bind(this), 6184 className: _Popup_css__WEBPACK_IMPORTED_MODULE_1___default.a["delete-button"] 6185 }, this.props.ok)) : 6186 /*#__PURE__*/ 6187 // this.props.type == "disconnect" 6188 // ? 6189 // <> 6190 // <button onClick={this.onCancelClick.bind(this)} className ={styles["cancel-button"]}> 6191 // {this.props.cancel} 6192 // </button> 6193 // <button onClick={this.onOkClick.bind(this)} className ={styles["yes-button"]}> 6194 // {this.props.ok} 6195 // </button> 6196 // </> 6197 // : 6198 react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 6199 onClick: this.onCancelClick.bind(this), 6200 className: _Popup_css__WEBPACK_IMPORTED_MODULE_1___default.a["cancel-button"] 6201 }, this.props.cancel), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 6202 onClick: this.onOkClick.bind(this), 6203 className: _Popup_css__WEBPACK_IMPORTED_MODULE_1___default.a["yes-button"] 6204 }, this.props.ok)))); 6205 } 6206} 6207/* harmony default export */ __webpack_exports__["a"] = (Popup); 6208 6209/***/ }), 6210 6211/***/ "AEz2": 6212/***/ (function(module, __webpack_exports__, __webpack_require__) { 6213 6214"use strict"; 6215 6216// EXTERNAL MODULE: ./node_modules/redux/es/redux.js 6217var redux = __webpack_require__("ANjH"); 6218 6219// EXTERNAL MODULE: ./src/editor/mods/util.js 6220var util = __webpack_require__("p2J/"); 6221 6222// EXTERNAL MODULE: ./src/editor/mods/embed.version.js 6223var embed_version = __webpack_require__("RzzB"); 6224 6225// CONCATENATED MODULE: ./src/editor/reducers/app.js 6226let browser = {}; 6227if (false) {} 6228 6229 6230function app(state = {}, action) { 6231 let ret = { 6232 ...state 6233 }; 6234 switch (action.type) { 6235 case 'CLEAR': 6236 var version = "embed"; 6237 try { 6238 version = browser.runtime && browser.runtime.id && browser.runtime.getManifest && browser.runtime.getManifest() && browser.runtime.getManifest()['version']; 6239 if (typeof version === "undefined") version = embed_version["a" /* default */].version; 6240 } catch (e) { 6241 version = embed_version["a" /* default */].version; 6242 } 6243 ; 6244 // modes 6245 // select area 6246 ret.editCommentTextareaFocus = false; 6247 ret.createCommentTextareaFocus = true; 6248 ret.editingComment = null; 6249 ret.markers = []; 6250 ret.movingCommentPoint = { 6251 x: null, 6252 y: null 6253 }; 6254 ret.markerMoving = false; 6255 ret.currentMarker = null; 6256 ret.commentsMoveCanceled = false; 6257 ret.commentDialogOpened = false; 6258 ret.markersShow = true; 6259 ret.newMarker = false;
6260 ret.clipUrl = false; 6261 ret.shortClipUrl = false; 6262 ret.clipTitle = false; 6263 ret.shareDialogOpened = false; 6264 ret.canvasInteraction = false; 6265 ret.zoom = 1; 6266 ret.zoomPoint = { 6267 x: null, 6268 y: null 6269 }, ret.pointerEvents = true; 6270 ret.version = version; 6271 ret.captureMode = false; 6272 ret.autosnapMode = false; 6273 ret.unsavedChanges = false; 6274 // edit area 6275 ret.imageMode = false; 6276 ret.videoMode = false; 6277 ret.pageInteractionsMode = false; 6278 ret.embedMode = false; 6279 ret.embedCapturingMode = false; 6280 // edit page view 6281 ret.pageMode = false; 6282 ret.userdata = {}; 6283 ret.ready = false; 6284 ret.clipped = false; 6285 ret.clipping = false; 6286 ret.moving = false; // clip 6287 ret.scaling = false; // clip 6288 6289 ret.video = false; 6290 ret.videoDelay = false; 6291 ret.videoCapture = false; 6292 ret.videoCaptureCountdown = false; 6293 ret.videoDelayValue = 0; 6294 ret.currentObjectData = null; 6295 ret.showPleaseWait = false; 6296 ret.scrollX = 0; 6297 ret.scrollY = 0; 6298 ret.sizes = { 6299 left: 0, 6300 top: 0, 6301 width: window.innerWidth, 6302 height: window.innerHeight 6303 }; 6304 ret.annotations = ''; 6305 ret.backgroundSavedBefore = false; 6306 return ret; 6307 case 'SET_ANNOTATIONS': 6308 ret.annotations = action.value; 6309 return ret; 6310 case 'SET_BACKGROUND_SAVED_BEFORE': 6311 ret.backgroundSavedBefore = action.value; 6312 return ret; 6313 case 'CLIP_SAVED': 6314 ret.clipUrl = action.value.url; 6315 ret.shortClipUrl = action.value.shortUrl; 6316 ret.clipTitle = action.value.title; 6317 return ret; 6318 case 'SET_LANG': 6319 ret.lang = action.value; 6320 return ret; 6321 case 'SIZES': 6322 ret.sizes = action.value; 6323 return ret; 6324 case 'MARKERS_SHOW': 6325 ret.markersShow = action.value; 6326 return ret; 6327 case 'CURRENT_MARKER': 6328 ret.currentMarker = action.value; 6329 return ret; 6330 case 'NEW_MARKER': 6331 ret.newMarker = action.value; 6332 return ret; 6333 case 'CANVAS_INTERACTION': 6334 ret.canvasInteraction = ret.clipped ? action.value : false; 6335 if (!action.value) { 6336 ret.commentDialogOpened = false; 6337 } 6338 return ret; 6339 case 'COMMENT_DIALOG_OPENED': 6340 ret.commentDialogOpened = !!action.value; 6341 return ret; 6342 case 'SHARE_DIALOG_OPENED': 6343 ret.shareDialogOpened = action.value; 6344 return ret; 6345 case 'MARKER_CREATE': 6346 let marker = { 6347 owner: action.value.owner, 6348 date: action.value.date, 6349 index: ret.markers.length, 6350 comments: [], 6351 position: action.value.position, 6352 color: action.value.color 6353 }; 6354 ret.markers.push(marker); 6355 return ret; 6356 case 'COMMENT_CREATE': 6357 let comment = { 6358 index: ret.markers[action.value.marker].comments.length, 6359 uid: action.value.uid, 6360 text: action.value.text, 6361 date: action.value.date, 6362 marker: action.value.marker 6363 }; 6364 ret.markers[action.value.marker].comments.push(comment); 6365 return ret; 6366 case 'MARKER_UPDATE': 6367 ret.markers[action.value.index] = { 6368 ...ret.markers[action.value.index], 6369 ...action.value 6370 }; 6371 return ret; 6372 case 'COMMENT_UPDATE': 6373 ret.markers[action.value.marker].comments[action.value.index] = { 6374 ...ret.markers[action.value.marker].comments[action.value.index], 6375 ...action.value 6376 }; 6377 return ret; 6378 case 'COMMENT_EDITING': 6379 if (action.marker === "") ret.editingComment = null;else ret.editingComment = [action.marker, action.value].join("-"); 6380 return ret; 6381 case 'COMMENT_REMOVE': 6382 ret.markers[action.marker].comments[action.value] = null; 6383 return ret; 6384 case 'MARKER_REMOVE': 6385 ret.markers[action.value] = null; 6386 return ret; 6387 case 'MARKER_DESTROY': 6388 ret.markers.splice(action.value, 1); 6389 return ret; 6390 case 'MOVING_MARKER_POINT': 6391 ret.movingMarkerPoint = action.value; 6392 return ret; 6393 case 'MARKER_MOVE': 6394 ret.markerMoving = !!action.value; 6395 return ret; 6396 case 'MARKERS': 6397 ret.markers = action.value; 6398 return ret; 6399 case 'POINTER_EVENTS': 6400 ret.pointerEvents = action.value; 6401 return ret; 6402 case 'PREVIEW_MODE': 6403 ret.previewMode = action.value; 6404 return ret; 6405 case 'EMBEDCAPTURING': 6406 ret.embedCapturingMode = true; 6407 return ret; 6408 case 'CREATE_COMMENT_TEXTAREA_FOCUS': 6409 ret.createCommentTextareaFocus = action.value; 6410 return ret; 6411 case 'EDIT_COMMENT_TEXTAREA_FOCUS': 6412 ret.editCommentTextareaFocus = action.value; 6413 return ret;
6414 case 'NOT_EMBEDCAPTURING': 6415 ret.embedCapturingMode = false; 6416 return ret; 6417 case 'SCROLL': 6418 ret.scrollX = action.value.left; 6419 ret.scrollY = action.value.top; 6420 return ret; 6421 case 'EMBEDEDITOR': 6422 ret.embedMode = true; 6423 return ret; 6424 case 'NOT_EMBEDEDITOR': 6425 ret.embedMode = false; 6426 return ret; 6427 case 'CHANGES_DONE': 6428 ret.unsavedChanges = true; 6429 return ret; 6430 case 'CHANGES_CLEAR': 6431 ret.unsavedChanges = false; 6432 return ret; 6433 case 'ZOOM_IN': 6434 ret.zoom = ret.zoom + 0.2; 6435 if (ret.zoom > 4) ret.zoom = 4; 6436 return ret; 6437 case 'ZOOM_OUT': 6438 ret.zoom = ret.zoom - 0.2; 6439 if (ret.zoom < 0.1) ret.zoom = 0.1; 6440 return ret; 6441 case 'ZOOM': 6442 ret.zoom = action.value; 6443 return ret; 6444 case 'ZOOM_TO': 6445 if (typeof action.dir !== 'undefined') { 6446 ret.zoom = Object(util["e" /* getNextZoom */])(ret.zoom, action.dir); 6447 } else { 6448 ret.zoom = action.value; 6449 } 6450 if (ret.zoom < 0.1) ret.zoom = 0.1; 6451 if (ret.zoom > 4) ret.zoom = 4; 6452 if (action.point) ret.zoomPoint = action.point; 6453 return ret; 6454 case 'READY': 6455 ret.ready = true; 6456 return ret; 6457 case 'NOTREADY': 6458 ret.ready = false; 6459 return ret; 6460 case 'CLIPPED': 6461 ret.clipped = true; 6462 return ret; 6463 case 'NOTCLIPPED': 6464 ret.clipped = false; 6465 return ret; 6466 case 'CLIPPING': 6467 ret.clipping = true; 6468 return ret; 6469 case 'NOTCLIPPING': 6470 ret.clipping = false; 6471 return ret; 6472 case 'CAPTUREMODE': 6473 ret.captureMode = true; 6474 return ret; 6475 case 'NOTCAPTUREMODE': 6476 ret.captureMode = false; 6477 return ret; 6478 6479 // MODE autosnap 6480 case 'AUTOSNAPMODE': 6481 ret.autosnapMode = true; 6482 return ret; 6483 case 'NOTAUTOSNAPMODE': 6484 ret.autosnapMode = false; 6485 return ret; 6486 6487 // MODE autoupload 6488 case 'AUTOUPLOADMODE': 6489 ret.autoUploadMode = true; 6490 return ret; 6491 case 'NOTAUTOUPLOADMODE': 6492 ret.autoUploadMode = false; 6493 return ret; 6494 case 'CLIPCLIP_MODE': 6495 ret.clipclipMode = true; 6496 return ret; 6497 // 6498 6499 case 'SCALING': 6500 ret.scaling = true; 6501 return ret; 6502 case 'NOTSCALING': 6503 ret.scaling = false; 6504 return ret; 6505 case 'MOVING': 6506 ret.moving = true; 6507 return ret; 6508 case 'NOTMOVING': 6509 ret.moving = false; 6510 return ret; 6511 case 'SHOW_PLEASEWAIT': 6512 ret.showPleaseWait = true; 6513 return ret; 6514 case 'HIDE_PLEASEWAIT': 6515 ret.showPleaseWait = false; 6516 return ret; 6517 case 'VIDEOMODE': 6518 ret.imageMode = false; 6519 ret.videoMode = true; 6520 return ret; 6521 case 'NOTVIDEOMODE': 6522 ret.videoMode = false; 6523 return ret; 6524 case 'PAGEINTERACTIONS': 6525 ret.pageInteractionsMode = true; 6526 return ret; 6527 case 'NOTPAGEINTERACTIONS': 6528 // 6529 ret.pageInteractionsMode = false; 6530 return ret; 6531 case 'VIDEO_CAPTURE': 6532 ret.videoCapture = true; 6533 return ret; 6534 case 'NOTVIDEO_CAPTURE': 6535 ret.videoCapture = false; 6536 return ret; 6537 case 'VIDEO_CAPTURE_COUNTDOWN': 6538 ret.videoCaptureCountdown = true; 6539 return ret; 6540 case 'NOTVIDEO_CAPTURE_COUNTDOWN': 6541 ret.videoCaptureCountdown = false; 6542 return ret; 6543 case 'VIDEO_DELAY_VALUE': 6544 action.value = action.value && action.value >= 0 ? action.value : 0; 6545 ret.videoDelayValue = action.value; 6546 return ret; 6547 case 'VIDEO_DELAY': 6548 ret.videoDelay = true; 6549 return ret; 6550 case 'NOTVIDEO_DELAY': 6551 ret.videoDelay = false; 6552 return ret; 6553 case 'IMAGEMODE': 6554 ret.imageMode = true; 6555 ret.videoMode = false; 6556 ret.videoDelay = false; 6557 return ret; 6558 case 'NOTIMAGEMODE': 6559 ret.imageMode = false; 6560 return ret; 6561 case 'CURRENT_OBJECT_DATA': 6562 ret.currentObjectData = action.value; 6563 return ret; 6564 case 'SET_MOUSE': 6565 ret.mouseX = action.value.x; 6566 ret.mouseY = action.value.y; 6567 return ret; 6568 case 'RESET_TOOLBAR_HOVER': 6569 ret.toolbarHoverLeft = false; 6570 ret.toolbarHoverRight = false; 6571 ret.toolbarHoverTop = false; 6572 ret.toolbarHoverBottom = false;
6573 return ret; 6574 case 'TOOLBAR_HOVER_LEFT': 6575 ret.toolbarHoverLeft = action.value; 6576 ret.toolbarHoverBottom = false; 6577 ret.toolbarHoverRight = false; 6578 ret.toolbarHoverTop = false; 6579 return ret; 6580 case 'TOOLBAR_HOVER_RIGHT': 6581 ret.toolbarHoverRight = action.value; 6582 ret.toolbarHoverBottom = false; 6583 ret.toolbarHoverLeft = false; 6584 ret.toolbarHoverTop = false; 6585 return ret; 6586 case 'TOOLBAR_HOVER_TOP': 6587 ret.toolbarHoverTop = action.value; 6588 ret.toolbarHoverLeft = false; 6589 ret.toolbarHoverRight = false; 6590 ret.toolbarHoverBottom = false; 6591 return ret; 6592 case 'TOOLBAR_HOVER_BOTTOM': 6593 ret.toolbarHoverBottom = action.value; 6594 ret.toolbarHoverLeft = false; 6595 ret.toolbarHoverRight = false; 6596 ret.toolbarHoverTop = false; 6597 return ret; 6598 default: 6599 return ret; 6600 } 6601} 6602; 6603// CONCATENATED MODULE: ./src/editor/reducers/user.js 6604function user(state = {}, action) { 6605 let ret = { 6606 ...state 6607 }; 6608 switch (action.type) { 6609 case 'CLEAR': 6610 // modes 6611 ret.username = null; 6612 ret.uid = null; 6613 ret.userphoto = null; 6614 return ret; 6615 case 'USERPHOTO': 6616 ret.userphoto = action.value; 6617 return ret; 6618 case 'USERNAME': 6619 ret.username = action.value; 6620 return ret; 6621 case 'UID': 6622 ret.uid = action.value; 6623 return ret; 6624 case 'USERDATA': 6625 console.log("USERDATA REDUCER", action.value); 6626 ret.uid = action.value.hasOwnProperty("uid") ? action.value.uid : ""; 6627 ret.username = action.value.hasOwnProperty("username") ? action.value.username : ""; 6628 ret.userphoto = action.value.hasOwnProperty("userphoto") ? action.value.userphoto : ""; 6629 ret.navigationMode = action.value.hasOwnProperty("navigationMode") ? action.value.navigationMode : "default"; 6630 // ret.users = action.value.hasOwnProperty("users") ? action.value.users : {}; 6631 return ret; 6632 default: 6633 return ret; 6634 } 6635} 6636; 6637// CONCATENATED MODULE: ./src/editor/reducers/dialog.js 6638function dialog(state = {}, action) { 6639 let ret = { 6640 ...state 6641 }; 6642 switch (action.type) { 6643 case 'CLEAR': 6644 ret.shown = false; 6645 ret.title = ""; 6646 ret.content = ""; 6647 return ret; 6648 case 'DIALOG_HIDE': 6649 ret.shown = false; 6650 return ret; 6651 case 'DIALOG_SHOW': 6652 ret.shown = true; 6653 ret.title = action.title; 6654 ret.content = action.content; 6655 return ret; 6656 default: 6657 return ret; 6658 } 6659} 6660; 6661// EXTERNAL MODULE: ./src/editor/mods/tools.settings.js + 1 modules 6662var tools_settings = __webpack_require__("NNfZ"); 6663 6664// CONCATENATED MODULE: ./src/editor/reducers/tools.js 6665 6666function tools(state = {}, action) { 6667 let ret = { 6668 ...state 6669 }; 6670 let lines = ['line', 'arrow', 'arrowtext']; 6671 let shapes = ['rect', 'triangle', 'ellipse']; 6672 let selects = ['select', 'cursor']; 6673 let expandables = ['rect', 'triangle', 'ellipse', 'arrow', 'arrowtext']; 6674 switch (action.type) { 6675 case 'RESET_TOOLS_SETTINGS': 6676 localStorage.removeItem('toolsSettings'); 6677 ret = Object(tools_settings["a" /* default */])(); 6678 return ret; 6679 case 'CHANGE_TOOL': 6680 ret.tool = action.value; 6681 if (shapes.includes(ret.tool)) ret.shapeTool = action.value;else if (lines.includes(ret.tool)) ret.lineTool = action.value;else if (selects.includes(ret.tool)) ret.selectTool = action.value; 6682 if (expandables.includes(ret.tool)) ret.expandableTool = action.value; 6683 return ret; 6684 case 'TOOLS_SETTINGS': 6685 ret = action.value; 6686 return ret; 6687 default: 6688 return ret; 6689 } 6690} 6691; 6692// EXTERNAL MODULE: ./src/editor/reducers/clip.js 6693var clip = __webpack_require__("Qzl6"); 6694 6695// CONCATENATED MODULE: ./src/editor/reducers/cursorinfo.js 6696function cursorinfo(state = {}, action) { 6697 let ret = { 6698 ...state 6699 }; 6700 switch (action.type) { 6701 case 'CLEAR': 6702 ret.show = false; 6703 ret.controlled = false; 6704 ret.controlledCoords = null; 6705 ret.curtain = ""; 6706 return ret; 6707 case 'CURTAIN': 6708 ret.curtain = action.value; 6709 return ret; 6710 case 'SHOW_CURTAIN': 6711 ret.showCurtain = true; 6712 return ret; 6713 case 'HIDE_CURTAIN': 6714 ret.showCurtain = false;
6715 return ret; 6716 case 'MAKE_INVISIBLE': 6717 ret.visible = false; 6718 return ret; 6719 case 'MAKE_VISIBLE': 6720 ret.visible = true; 6721 return ret; 6722 case 'SHOW_CURSORINFO': 6723 ret.show = true; 6724 return ret; 6725 case 'HIDE_CURSORINFO': 6726 ret.show = false; 6727 return ret; 6728 case 'CONTROLLED_CURSORINFO': 6729 if (action.value.coords) { 6730 ret.controlled = true; 6731 ret.controlledCoords = action.value.coords; 6732 } 6733 return ret; 6734 case 'FREE_CURSORINFO': 6735 ret.controlled = false; 6736 return ret; 6737 case 'CURSORINFO_COORDS': 6738 ret.coords = action.value; 6739 return ret; 6740 case 'CONTROLLED_CURSORINFO_COORDS': 6741 ret.controlledCoords = action.coords; 6742 return ret; 6743 default: 6744 return ret; 6745 } 6746} 6747; 6748// CONCATENATED MODULE: ./src/editor/reducers/embed.js 6749function embed_embed(state = {}, action) { 6750 let ret = { 6751 ...state 6752 }; 6753 switch (action.type) { 6754 case 'CLEAR': 6755 ret.historyCursor = 1; 6756 ret.owner = false; 6757 ret.imageUrl = ""; 6758 ret.dpxr = 1; 6759 ret.initialZoom = 1; 6760 ret.zoomPanDisabled = false; 6761 ret.embedSavingProcess = 0; 6762 ret.menuBarShow = false; 6763 ret.embedImageLoaded = false; 6764 ret.embedImwebsiteCommandageLoaded = false; 6765 ret.isPublic = false; 6766 ret.isAutosave = false; 6767 return ret; 6768 case 'EMBED_PATH': 6769 ret.path = action.value; 6770 return ret; 6771 case 'INITIAL_ZOOM': 6772 ret.initialZoom = action.value; 6773 return ret; 6774 case 'ZOOMPAN_DISABLE': 6775 ret.zoomPanDisabled = false; //true; 6776 return ret; 6777 case 'ZOOMPAN_ENABLE': 6778 ret.zoomPanDisabled = false; 6779 return ret; 6780 case 'MIME': 6781 ret.mime = action.value; 6782 return ret; 6783 case 'EMBED_IMAGE_LOADED': 6784 ret.embedImageLoaded = true; 6785 return ret; 6786 case 'IS_CLIP_PUBLIC': 6787 ret.isPublic = action.value; 6788 return ret; 6789 case 'IS_CLIP_AUTOSAVE': 6790 ret.isAutosave = action.value; 6791 return ret; 6792 case 'WEBSITE_COMMAND': 6793 ret.websiteCommand = action.value; 6794 return ret; 6795 case 'HISTORY_CURSOR': 6796 ret.historyCursor = action.value; 6797 return ret; 6798 case 'COMMENTS_BAR': 6799 ret.commentsBarShow = action.value; 6800 return ret; 6801 case 'MENU_BAR': 6802 ret.menuBarShow = action.value; 6803 return ret; 6804 case 'OWNER': 6805 ret.owner = action.value; 6806 return ret; 6807 case 'DPXR': 6808 ret.dpxr = action.value; 6809 return ret; 6810 case 'USERS': 6811 ret.users = action.value; 6812 return ret; 6813 case 'EMBEDEDITOR': 6814 ret.embedPath = action.embedPath; 6815 ret.imageUrl = action.url; 6816 ret.imageWidth = action.width; 6817 ret.imageHeight = action.height; 6818 ret.elementWidth = action.elementWidth; 6819 ret.elementHeight = action.elementHeight; 6820 ret.commentsBarShow = action.commentsBarShow; 6821 return ret; 6822 case 'IMAGE_URL': 6823 ret.imageUrl = action.value; 6824 return ret; 6825 case 'NOT_EMBEDEDITOR': 6826 ret.imageWidth = 0; 6827 ret.imageHeight = 0; 6828 ret.embedSavingProcess = 0; 6829 return ret; 6830 case 'EMBEDEDITOR_SAVE': 6831 ret.embedSavingProcess = action.hasOwnProperty("value") ? action.value : ++ret.embedSavingProcess; 6832 return ret; 6833 default: 6834 return ret; 6835 } 6836} 6837; 6838// CONCATENATED MODULE: ./src/editor/reducers/index.js 6839 6840 6841 6842 6843 6844 6845 6846 6847/* harmony default export */ var reducers = __webpack_exports__["a"] = (Object(redux["c" /* combineReducers */])({ 6848 app: app, 6849 user: user, 6850 dialog: dialog, 6851 tools: tools, 6852 clip: clip["a" /* default */], 6853 cursorinfo: cursorinfo, 6854 embed: embed_embed 6855})); 6856 6857/***/ }), 6858 6859/***/ "AUTF": 6860/***/ (function(module, __webpack_exports__, __webpack_require__) { 6861 6862"use strict"; 6863/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ModalButton; }); 6864/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return ModalCloseButton; }); 6865/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return ModalWindow; }); 6866/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("q1tI"); 6867/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 6868/* harmony import */ var _Modal_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("WUP6"); 6869/* harmony import */ var _Modal_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_Modal_css__WEBPACK_IMPORTED_MODULE_1__); 6870 6871 6872function ModalButton(props) { 6873 const [isShown, setModal] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(!!props.shown); 6874 const onCancelClick = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => { 6875 setModal(false); 6876 }); 6877 const onYesClick = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(type => { 6878 setModal(false); 6879 if (props.onYesClick) props.onYesClick(type); 6880 }); 6881 const afterSigned = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(buttonType => { 6882 // props.onYesClick(); 6883 if (props.afterSigned) props.afterSigned(buttonType); 6884 }); 6885 const closeModal = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => { 6886 setModal(false); 6887 }); 6888 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, true && !props.buttonDisabled && isShown && props.closeText == '' ? null : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 6889 type: "button", 6890 id: props.id,
6891 className: [_Modal_css__WEBPACK_IMPORTED_MODULE_1___default.a.pointer, props.className].join(' '), 6892 onClick: () => setModal(!isShown) 6893 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, isShown ? props.closeText : props.openText)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(ModalWindow, { 6894 show: isShown, 6895 onClose: !props.closingDisabled ? closeModal : null 6896 }, !props.closingDisabled && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 6897 className: _Modal_css__WEBPACK_IMPORTED_MODULE_1___default.a.close, 6898 onClick: () => setModal(false) 6899 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.cloneElement(props.children, { 6900 onCancelClick: onCancelClick, 6901 onYesClick: onYesClick, 6902 afterSigned: afterSigned, 6903 isShown: isShown 6904 }))); 6905} 6906function ModalCloseButton(props) { 6907 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 6908 className: _Modal_css__WEBPACK_IMPORTED_MODULE_1___default.a.close, 6909 onClick: props.onClick 6910 }); 6911} 6912function ModalWindow(props) { 6913 // const [mobileAndTabletCheck, setMobileAndTabletCheck] = useState(false); 6914 const [show, setShow] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false); 6915 let modal = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null); 6916 Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { 6917 const escListen = e => { 6918 e = e || window.event; 6919 return ("key" in e ? e.key === "Escape" || e.key === "Esc" : e.keyCode === 27) && props.onClose && props.onClose(); 6920 }; 6921 document.addEventListener("keyup", escListen); 6922 return () => document.removeEventListener("keyup", escListen); 6923 }, []); 6924 6925 // useEffect(() => { 6926 // let check = false; 6927 // (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); 6928 // setMobileAndTabletCheck(check); 6929 // }, []) 6930 6931 Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { 6932 if (props.show) { 6933 setShow(props.show); 6934 } else { 6935 if (props.upload && window.innerWidth <= 576) { 6936 modal.current.style.setProperty('bottom', '-600px', "important"); 6937 setTimeout(() => { 6938 modal.current.style.removeProperty('bottom'); 6939 setShow(props.show); 6940 }, 600); 6941 } else { 6942 setShow(props.show); 6943 } 6944 } 6945 }, [props.show]); 6946 const clickOnOtuer = e => { 6947 const cellText = document.getSelection(); 6948 if ((e && e.target.nodeName !== 'BUTTON' || !e) && cellText.type === 'Range') return false;
6949 if (show == "renameFolder" || show == "renameClip" || show == "onboarding") { 6950 return false; 6951 } 6952 if (props.upload && window.innerWidth <= 576) { 6953 modal.current.style.setProperty('bottom', '-600px', "important"); 6954 setTimeout(() => { 6955 props.onClose(); 6956 modal.current.style.removeProperty('bottom'); 6957 }, 600); 6958 } else { 6959 props.onClose(); 6960 } 6961 }; 6962 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 6963 className: [_Modal_css__WEBPACK_IMPORTED_MODULE_1___default.a.outer, show ? _Modal_css__WEBPACK_IMPORTED_MODULE_1___default.a.show : _Modal_css__WEBPACK_IMPORTED_MODULE_1___default.a.hide, props.dontShowUploadModal ? _Modal_css__WEBPACK_IMPORTED_MODULE_1___default.a.dontShowUploadModal : ""].join(' '), 6964 onClick: e => clickOnOtuer(e) 6965 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 6966 ref: modal, 6967 className: [props.loader ? '' : _Modal_css__WEBPACK_IMPORTED_MODULE_1___default.a.modal, props.type == "ticketPreview" && _Modal_css__WEBPACK_IMPORTED_MODULE_1___default.a["ticketPreview"], props.upload ? _Modal_css__WEBPACK_IMPORTED_MODULE_1___default.a.uploadModal : "", props.popup ? _Modal_css__WEBPACK_IMPORTED_MODULE_1___default.a.popupModal : "", show === 'onboarding' ? _Modal_css__WEBPACK_IMPORTED_MODULE_1___default.a.onboarding : ""].join(' '), 6968 onClick: e => e.stopPropagation() 6969 }, props.children)); 6970} 6971 6972/***/ }), 6973 6974/***/ "B3Ff": 6975/***/ (function(module, exports, __webpack_require__) { 6976 6977// extracted by mini-css-extract-plugin 6978module.exports = {"PropertiesBar":"PropertiesBar","hidden":"hidden","setting":"setting","opacity":"opacity","character":"character","paragraph":"paragraph","disabled":"disabled","blur":"blur","expand-to-left":"expand-to-left","SliderTick":"SliderTick","caption":"caption","captionWithButton":"captionWithButton","CheckCircle":"CheckCircle","label":"label","Textbox":"Textbox","text":"text","ellipse":"ellipse","rect":"rect","pen":"pen","highlighter":"highlighter","tooltiptext":"tooltiptext","inners":"inners","param":"param"}; 6979 6980/***/ }), 6981 6982/***/ "Bcwi": 6983/***/ (function(module, exports, __webpack_require__) { 6984 6985// extracted by mini-css-extract-plugin 6986module.exports = {"Toolbar":"Toolbar","visible":"visible","left":"left","right":"right","center":"center","toolbar-actions":"toolbar-actions","historyBar":"historyBar","actionsBar":"actionsBar","toolbar-tools":"toolbar-tools","hidden":"hidden","switchBar":"switchBar","active":"active","line":"line","toolsBar":"toolsBar","imageMode":"imageMode","videoMode":"videoMode","videoCaptureDelay":"videoCaptureDelay","videoCaptureButton":"videoCaptureButton","record":"record","expandable":"expandable","coords":"coords","current":"current","resize-frame":"resize-frame","embedEditorToolbar":"embedEditorToolbar","tool":"tool","cursor":"cursor","embedMode":"embedMode","PureEditor":"PureEditor"}; 6987 6988/***/ }), 6989 6990/***/ "BdHJ": 6991/***/ (function(module, __webpack_exports__, __webpack_require__) { 6992 6993"use strict"; 6994/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("q1tI"); 6995/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 6996/* harmony import */ var _BrokenImage_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("cg0I"); 6997/* harmony import */ var _BrokenImage_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_BrokenImage_css__WEBPACK_IMPORTED_MODULE_1__); 6998/* harmony import */ var _assets_images_broken_image_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("2MmC"); 6999/* harmony import */ var _assets_images_broken_image_svg__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_assets_images_broken_image_svg__WEBPACK_IMPORTED_MODULE_2__); 7000 7001 7002 7003const BrokenImage = props => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", { 7004 style: { 7005 ...props 7006 }, 7007 className: _BrokenImage_css__WEBPACK_IMPORTED_MODULE_1___default.a.image, 7008 src: _assets_images_broken_image_svg__WEBPACK_IMPORTED_MODULE_2___default.a 7009}); 7010/* harmony default export */ __webpack_exports__["a"] = (BrokenImage); 7011 7012/***/ }), 7013 7014/***/ "BjsJ": 7015/***/ (function(module, exports, __webpack_require__) { 7016 7017// extracted by mini-css-extract-plugin 7018module.exports = {"ColorList":"ColorList","text":"text","current":"current","blue":"blue","lightblue":"lightblue","green":"green","yellow":"yellow","orange":"orange","red":"red","pink":"pink","purple":"purple","black":"black","gray":"gray","lightgray":"lightgray","white":"white"}; 7019 7020/***/ }), 7021 7022/***/ "Bz+H": 7023/***/ (function(module, exports, __webpack_require__) { 7024 7025// extracted by mini-css-extract-plugin 7026module.exports = {"outer":"outer","dontShowUploadModal":"dontShowUploadModal","modal":"modal","uploadModal":"uploadModal","close"
7026:"close","show":"show","outerCloseModal":"outerCloseModal","ticketPreview":"ticketPreview","popupModal":"popupModal"}; 7027 7028/***/ }), 7029 7030/***/ "CPMs": 7031/***/ (function(module, exports, __webpack_require__) { 7032 7033// extracted by mini-css-extract-plugin 7034module.exports = {"CheckCircle":"CheckCircle","hidden":"hidden"}; 7035 7036/***/ }), 7037 7038/***/ "CvwL": 7039/***/ (function(module, exports) { 7040 7041module.exports = "/aa012e2eff7d75b3bdf952a933b878ff.png"; 7042 7043/***/ }), 7044 7045/***/ "DI6R": 7046/***/ (function(module, exports, __webpack_require__) { 7047 7048// extracted by mini-css-extract-plugin 7049module.exports = {"PureEditor":"PureEditor","shown":"shown","previewMode":"previewMode","canvasInteraction":"canvasInteraction"}; 7050 7051/***/ }), 7052 7053/***/ "DbAi": 7054/***/ (function(module, exports, __webpack_require__) { 7055 7056// extracted by mini-css-extract-plugin 7057module.exports = {"backButton":"src-components-WelcomeBack-BackButton-BackButton__backButton--6WHN7"}; 7058 7059/***/ }), 7060 7061/***/ "DwQI": 7062/***/ (function(module, exports, __webpack_require__) { 7063 7064// extracted by mini-css-extract-plugin 7065module.exports = {"container":"src-components-InputText-InputText__container--osfKj","input":"src-components-InputText-InputText__input--aq3qw","showHidePassword":"src-components-InputText-InputText__showHidePassword--0pnDC","passwordField":"src-components-InputText-InputText__passwordField--2sLdn","passwordHidden":"src-components-InputText-InputText__passwordHidden--mzRfV","error":"src-components-InputText-InputText__error--TS95a"}; 7066 7067/***/ }), 7068 7069/***/ "DxJ5": 7070/***/ (function(module, exports, __webpack_require__) { 7071 7072// extracted by mini-css-extract-plugin 7073module.exports = {"SCIM":"SCIM","slembedded":"slembedded","overscroll-disabled":"overscroll-disabled"}; 7074 7075/***/ }), 7076 7077/***/ "E3Y2": 7078/***/ (function(module, exports, __webpack_require__) { 7079 7080// extracted by mini-css-extract-plugin 7081module.exports = {"container":"src-screens-Dashboard-Dashboard__container--BOvz2","containerWithBanner":"src-screens-Dashboard-Dashboard__containerWithBanner--7pEah","sidebar":"src-screens-Dashboard-Dashboard__sidebar--MOh2m","logo":"src-screens-Dashboard-Dashboard__logo--0o7ZW","logoTop":"src-screens-Dashboard-Dashboard__logoTop--75-9u","logoBottom":"src-screens-Dashboard-Dashboard__logoBottom--ys8pB","content":"src-screens-Dashboard-Dashboard__content--dpUr2","header":"src-screens-Dashboard-Dashboard__header--zj0O9","shadowEffect":"src-screens-Dashboard-Dashboard__shadowEffect--T-rsV","toggleSidebarButton":"src-screens-Dashboard-Dashboard__toggleSidebarButton--nzbaM","pointEventsNone":"src-screens-Dashboard-Dashboard__pointEventsNone--Ppya3","sidebarOpened":"src-screens-Dashboard-Dashboard__sidebarOpened--eVM52","clipsLimitations":"src-screens-Dashboard-Dashboard__clipsLimitations--6hB8J","hide":"src-screens-Dashboard-Dashboard__hide--UI0l-"}; 7082 7083/***/ }), 7084 7085/***/ "EI7V": 7086/***/ (function(module, __webpack_exports__, __webpack_require__) { 7087 7088"use strict"; 7089/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("q1tI"); 7090/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 7091/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("/MKj"); 7092/* harmony import */ var _Auth__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("2tX9"); 7093/* harmony import */ var _Limitations_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("bTLw"); 7094/* harmony import */ var _Limitations_css__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_Limitations_css__WEBPACK_IMPORTED_MODULE_3__); 7095 7096 7097 7098 7099const Limitations = ({ 7100 clipsUsed = 0, 7101 clipsLimit, 7102 isDashboard = true 7103}) => { 7104 if (clipsUsed === null && clipsLimit === null) return null; 7105 const isFull = clipsLimit - clipsUsed <= 0; 7106 const isLow = !isFull && clipsLimit * .85 - clipsUsed <= 0; 7107 const viewPlans = () => { 7108 window.open("https://screenclip.com/pricing?utm_source=dashboard&utm_medium=limitation_feedback"); 7109 }; 7110 const clipsLimitReduced = clipsLimit === 10000 ? "10K" : clipsLimit; 7111 return isDashboard ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 7112 className: _Limitations_css__WEBPACK_IMPORTED_MODULE_3___default.a.storageNotyContainer 7113 }, isLow && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { 7114 className: _Limitations_css__WEBPACK_IMPORTED_MODULE_3___default.a.notification 7115 }, "Low storage\u2757\uFE0F"), isFull && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", { 7116 className: _Limitations_css__WEBPACK_IMPORTED_MODULE_3___default.a.notification 7117 }, "Full storage\u26D4\uFE0F"), (isLow || isFull) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 7118 className: [_Limitations_css__WEBPACK_IMPORTED_MODULE_3___default.a.viewAllPlans, isFull ? _Limitations_css__WEBPACK_IMPORTED_MODULE_3___default.a.full : ''].join(' '), 7119 onClick: viewPlans 7120 }, "View all plans \u203A")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 7121 className: _Limitations_css__WEBPACK_IMPORTED_MODULE_3___default.a.clipsCountContainer 7122 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 7123 className: [_Limitations_css__WEBPACK_IMPORTED_MODULE_3___default.a['attribute'], _Limitations_css__WEBPACK_IMPORTED_MODULE_3___default.a['type']].join(' ') 7124 }, "Cloud clips:"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 7125 className: [_Limitations_css__WEBPACK_IMPORTED_MODULE_3___default.a.clipsLimitation, isLow ? _Limitations_css__WEBPACK_IMPORTED_MODULE_3___default.a.low : '', isFull ? _Limitations_css__WEBPACK_IMPORTED_MODULE_3___default.a.full : ''].join(' ') 7126 }, `${clipsUsed} / ${clipsLimitReduced}`)); 7127}; 7128/* harmony default export */ __webpack_exports__["a"] = (Object(_Auth__WEBPACK_IMPORTED_MODULE_2__[/* withAuth */ "c"])(Object(react_redux__WEBPACK_IMPORTED_MODULE_1__[/* connect */ "b"])(null, null, null, { 7129 forwardRef: true 7130})(Limitations))); 7131 7132/***/ }), 7133 7134/***/ "EXP5": 7135/***/ (function(module, exports, __webpack_require__) { 7136 7137// extracted by mini-css-extract-plugin 7138module.exports = {"clipName":"src-components-Modal-Content-RenameClip-RenameClip__clipName--QEGQQ","buttons":"src-components-Modal-Content-RenameClip-RenameClip__buttons--jEOik","primary":"src-components-Modal-Content-RenameClip-RenameClip__primary--nayo+","activated":"src-components-Modal-Content-RenameClip-RenameClip__activated--Ro-RC","secondary":"src-components-Modal-Content-RenameClip-RenameClip__secondary--BTmW9","renameClipModal":"src-components-Modal-Content-RenameClip-RenameClip__renameClipModal--g82+D","error":"src-components-Modal-Content-RenameClip-RenameClip__error--j7xvy"}; 7139 7140/***/ }), 7141 7142/***/ "EeIO":
7143/***/ (function(module, exports) { 7144 7145module.exports = "/2c2b57c5dbb751f95528e8395dae335b.png"; 7146 7147/***/ }), 7148 7149/***/ "F/43": 7150/***/ (function(module, exports, __webpack_require__) { 7151 7152// extracted by mini-css-extract-plugin 7153module.exports = {"container":"src-components-Notification-ButtonsStack-ButtonsStack__container--Q5cNg","retry":"src-components-Notification-ButtonsStack-ButtonsStack__retry--67aqN","close":"src-components-Notification-ButtonsStack-ButtonsStack__close--8IV+7","cancel":"src-components-Notification-ButtonsStack-ButtonsStack__cancel--rBed4","done":"src-components-Notification-ButtonsStack-ButtonsStack__done--iD83i"}; 7154 7155/***/ }), 7156 7157/***/ "FeOE": 7158/***/ (function(module, exports) { 7159 7160module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='a' width='188.9%25' height='188.9%25' x='-44.4%25' y='-44.4%25' filterUnits='objectBoundingBox'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='1'/%3E%3CfeColorMatrix in='shadowBlurOuter1' result='shadowMatrixOuter1' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.214758832 0'/%3E%3CfeMerge%3E%3CfeMergeNode in='shadowMatrixOuter1'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cfilter id='b' width='140%25' height='140%25' x='-20%25' y='-20%25' filterUnits='objectBoundingBox'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='1'/%3E%3CfeColorMatrix in='shadowBlurOuter1' result='shadowMatrixOuter1' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.21 0'/%3E%3CfeMerge%3E%3CfeMergeNode in='shadowMatrixOuter1'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='32' height='32'/%3E%3Cg filter='url(%23a)' transform='translate(20 3)'%3E%3Crect width='7' height='7' x='1' y='1' fill='%23FFF' opacity='.501'/%3E%3Cpath fill='%23000' fill-rule='nonzero' stroke='%23FFF' d='M9.5,-0.5 L9.5,9.5 L-0.5,9.5 L-0.5,-0.5 L9.5,-0.5 Z M1.5,1.5 L1.5,7.5 L7.5,7.5 L7.5,1.5 L1.5,1.5 Z'/%3E%3C/g%3E%3Cg fill='%23171819' stroke='%23FFF' filter='url(%23b)' transform='translate(2 10)'%3E%3Cpath d='M11.5,-0.5 L11.5,8.5 L20.5,8.5 L20.5,11.5 L11.5,11.5 L11.5,20.5 L8.5,20.5 L8.5,11.5 L-0.5,11.5 L-0.5,8.5 L8.5,8.5 L8.5,-0.5 L11.5,-0.5 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E" 7161 7162/***/ }), 7163 7164/***/ "FrAB": 7165/***/ (function(module, exports, __webpack_require__) { 7166 7167// extracted by mini-css-extract-plugin 7168module.exports = {"faq":"src-components-Accordion-Accordion__faq--nbXs7","expanded":"src-components-Accordion-Accordion__expanded--LxKLL","box":"src-components-Accordion-Accordion__box--dkeCT","faq-list":"src-components-Accordion-Accordion__faq-list--vvCOR","collapsible":"src-components-Accordion-Accordion__collapsible--IZdlh","section":"src-components-Accordion-Accordion__section--xs6h6","content":"src-components-Accordion-Accordion__content--nm1uI","content-active":"src-components-Accordion-Accordion__content-active--JVrgw","svg-arrow-container":"src-components-Accordion-Accordion__svg-arrow-container--KFEMz","svg-arrow":"src-components-Accordion-Accordion__svg-arrow--pP8uQ","link":"src-components-Accordion-Accordion__link--43y0n","cursor-pointer":"src-components-Accordion-Accordion__cursor-pointer--r-PcP","full-width":"src-components-Accordion-Accordion__full-width--dZYz8"}; 7169 7170/***/ }), 7171 7172/***/ "GCiL": 7173/***/ (function(module, exports, __webpack_require__) { 7174 7175// extracted by mini-css-extract-plugin 7176module.exports = {"stepsMobileContainer":"src-components-WelcomeBack-StepsListMobile-StepsListMobile__stepsMobileContainer--8hOKd","step":"src-components-WelcomeBack-StepsListMobile-StepsListMobile__step--hnnwb","stepActivated":"src-components-WelcomeBack-StepsListMobile-StepsListMobile__stepActivated--yJvsX","stepNumber":"src-components-WelcomeBack-StepsListMobile-StepsListMobile__stepNumber--p2teI","stepNumberActivated":"src-components-WelcomeBack-StepsListMobile-StepsListMobile__stepNumberActivated--koGmi","step4":"src-components-WelcomeBack-StepsListMobile-StepsListMobile__step4--pmp5I"}; 7177 7178/***/ }), 7179 7180/***/ "HeBf": 7181/***/ (function(module, exports, __webpack_require__) { 7182 7183// extracted by mini-css-extract-plugin 7184module.exports = {"CursorInfo":"CursorInfo","scaling":"scaling","clipping":"clipping","clipped":"clipped","invisible":"invisible","hidden":"hidden","crossing":"crossing","bottomy":"bottomy","curtain":"curtain","topty":"topty","righty":"righty","lefty":"lefty","CursorInfo-crossingToggle":"CursorInfo-crossingToggle","CursorInfo-curtainToggle":"CursorInfo-curtainToggle"}; 7185 7186/***/ }), 7187 7188/***/ "HpD1": 7189/***/ (function(module, __webpack_exports__, __webpack_require__) { 7190 7191"use strict"; 7192let fontList = ["Arial", "Arial Black", "Avant Garde", "Bookman", "Helvetica", "Courier New", "Comic Sans MS", "Garamond", "Georgia", "Times New Roman", "Trebuchet MS", "Impact", "Palatino", "Verdana"]; 7193/* harmony default export */ __webpack_exports__["a"] = (fontList); 7194 7195/***/ }), 7196 7197/***/ "Hr6e": 7198/***/ (function(module, exports, __webpack_require__) { 7199 7200// extracted by mini-css-extract-plugin 7201module.exports = {"nextButton":"src-components-WelcomeBack-NextButton-NextButton__nextButton--iGCju","skipButton":"src-components-WelcomeBack-NextButton-NextButton__skipButton--yB+0p","disable":"src-components-WelcomeBack-NextButton-NextButton__disable--P+IYh"}; 7202 7203/***/ }), 7204 7205/***/ "IK+S": 7206/***/ (function(module, exports, __webpack_require__) { 7207 7208// extracted by mini-css-extract-plugin 7209module.exports = {"ClipControl":"ClipControl","clipping":"clipping","corner":"corner","hidden":"hidden","nw":"nw","se":"se","ne":"ne","sw":"sw","e":"e","
7209w":"w","n":"n","s":"s","annotationMode":"annotationMode"}; 7210 7211/***/ }), 7212 7213/***/ "IVX6": 7214/***/ (function(module, exports, __webpack_require__) { 7215 7216// extracted by mini-css-extract-plugin 7217module.exports = {"container":"src-components-AccountNotification-AccountNotification__container--AIoDM","verificationSuccessContainer":"src-components-AccountNotification-AccountNotification__verificationSuccessContainer--2DUch","title":"src-components-AccountNotification-AccountNotification__title--tLeIV","verificationSuccessTitle":"src-components-AccountNotification-AccountNotification__verificationSuccessTitle--Mhcem","button":"src-components-AccountNotification-AccountNotification__button--Sl+Ni","verificationSuccessButton":"src-components-AccountNotification-AccountNotification__verificationSuccessButton--YLNOf"}; 7218 7219/***/ }), 7220 7221/***/ "Ipjc": 7222/***/ (function(module, exports, __webpack_require__) { 7223 7224// extracted by mini-css-extract-plugin 7225module.exports = {"Ticker":"Ticker","nolabel":"nolabel","up":"up","down":"down"}; 7226 7227/***/ }), 7228 7229/***/ "IrVv": 7230/***/ (function(module, __webpack_exports__, __webpack_require__) { 7231 7232"use strict"; 7233 7234// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom.iterable.js 7235var web_dom_iterable = __webpack_require__("rGqo"); 7236 7237// EXTERNAL MODULE: ./node_modules/react/index.js 7238var react = __webpack_require__("q1tI"); 7239var react_default = /*#__PURE__*/__webpack_require__.n(react); 7240 7241// EXTERNAL MODULE: ./node_modules/react-redux/es/index.js + 22 modules 7242var es = __webpack_require__("/MKj"); 7243 7244// EXTERNAL MODULE: ./src/editor/components/CheckCircle/CheckCircle.css 7245var CheckCircle_CheckCircle = __webpack_require__("CPMs"); 7246 7247// CONCATENATED MODULE: ./src/editor/components/CheckCircle/CheckCircle.js 7248 7249 7250class CheckCircle_CheckCircle_CheckCircle extends react["PureComponent"] { 7251 constructor(props) { 7252 super(props); 7253 this.state = { 7254 checked: props.checked 7255 }; 7256 this.hidden = { 7257 display: "none" 7258 }; 7259 } 7260 static getDerivedStateFromProps(nextProps, prevState) { 7261 if (nextProps.checked !== prevState.checked) { 7262 return { 7263 checked: nextProps.checked 7264 }; 7265 } 7266 return null; 7267 } 7268 componentDidMount() {} 7269 checkIfChecked(e) { 7270 if (e.target.checked) this.props.onChecked();else this.props.onUnchecked(); 7271 } 7272 render() {
7273 let checked = this.state.checked ? "checked" : ""; 7274 let styles = this.props.styles || {}; 7275 let checkedContent = this.props.checkedContent; 7276 let content = checked && checkedContent ? checkedContent : this.props.label; 7277 return /*#__PURE__*/react_default.a.createElement("div", { 7278 className: "CheckCircle" 7279 }, /*#__PURE__*/react_default.a.createElement("input", { 7280 type: "checkbox", 7281 checked: checked, 7282 name: this.props.id, 7283 id: this.props.id, 7284 onChange: this.checkIfChecked.bind(this), 7285 className: "hidden" 7286 }), /*#__PURE__*/react_default.a.createElement("label", { 7287 htmlFor: this.props.id 7288 }, /*#__PURE__*/react_default.a.createElement("i", { 7289 style: styles 7290 }), content)); 7291 } 7292} 7293/* harmony default export */ var components_CheckCircle_CheckCircle = (CheckCircle_CheckCircle_CheckCircle); 7294// EXTERNAL MODULE: ./src/editor/components/SliderTick/SliderTick.css 7295var SliderTick_SliderTick = __webpack_require__("nbNY"); 7296 7297// CONCATENATED MODULE: ./src/editor/components/SliderTick/SliderTick.js 7298 7299 7300class SliderTick_SliderTick_SliderTick extends react["PureComponent"] { 7301 constructor(props) { 7302 super(props); 7303 this.state = { 7304 name: props.name, 7305 value: props.value 7306 }; 7307 } 7308 static getDerivedStateFromProps(nextProps, prevState) { 7309 if (prevState.value !== nextProps.value) { 7310 return { 7311 value: nextProps.value 7312 }; 7313 } 7314 return null; 7315 } 7316 onChange(e) { 7317 let val = parseFloat(e.target.value) / this.props.mul; 7318 let data = { 7319 name: this.state.name, 7320 value: val 7321 }; 7322 this.props.onChange(data); 7323 } 7324 7325 // onKeyPress (e) { 7326 // if ([37, 40].includes(e.which)) { 7327 // this.stepDown(); 7328 // } else if ([38, 39].includes(e.which) && this.state.value<this.props.max) { 7329 // this.stepUp(); 7330 // } 7331 // } 7332 7333 // stepUp (e) { 7334 // if (this.state.value>=this.props.max) return; 7335 // let data = { 7336 // name: this.state.name, 7337 // value: (this.props.value + 1/this.props.mul) 7338 // } 7339 // this.props.onChange(data); 7340 // } 7341 7342 // stepDown (e) { 7343 // if (this.state.value<=this.props.min) return; 7344 // let data = { 7345 // name: this.state.name, 7346 // value: (this.props.value - 1/this.props.mul) 7347 // } 7348 // this.props.onChange(data); 7349 // } 7350 7351 render() { 7352 let min = this.props.min * this.props.mul; 7353 let max = this.props.max * this.props.mul; 7354 let value = Math.round(this.props.value * this.props.mul); 7355 let inputProgress = (value - min) / (max - min); 7356 return /*#__PURE__*/react_default.a.createElement("div", { 7357 className: "SliderTick" 7358 }, /*#__PURE__*/react_default.a.createElement("label", null, /*#__PURE__*/react_default.a.createElement("span", { 7359 className: `${this.props.name} leftIcon ${this.props.tool}` 7360 }), /*#__PURE__*/react_default.a.createElement("input", { 7361 type: "range", 7362 min: min, 7363 max: max, 7364 step: 1 7365 // defaultValue={this.state.value} 7366 , 7367 value: value, 7368 onChange: this.onChange.bind(this), 7369 style: { 7370 boxShadow: `inset calc(${inputProgress} * (var(--slider-width) - 12px)) 0 var(--progress-color)` 7371 } // Slider progress 7372 }), /*#__PURE__*/react_default.a.createElement("span", { 7373 className: `${this.props.name} rightIcon ${this.props.tool}` 7374 }))); 7375 } 7376} 7377/* harmony default export */ var components_SliderTick_SliderTick = (SliderTick_SliderTick_SliderTick); 7378// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/defineProperty.js 7379var defineProperty = __webpack_require__("lSNA"); 7380var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty); 7381 7382// EXTERNAL MODULE: ./src/editor/components/ColorList/ColorList.css 7383var ColorList_ColorList = __webpack_require__("BjsJ"); 7384 7385// EXTERNAL MODULE: ./src/editor/mods/util.js 7386var mods_util = __webpack_require__("p2J/"); 7387 7388// EXTERNAL MODULE: ./src/editor/mods/constants.js 7389var constants = __webpack_require__("N3ss"); 7390 7391// CONCATENATED MODULE: ./src/editor/components/ColorList/ColorList.js 7392 7393 7394 7395// import ColorPicker from "../ColorPicker/ColorPicker.js"; 7396 7397 7398 7399class ColorList_ColorList_ColorList extends react["Component"] { 7400 constructor(props) { 7401 super(props); 7402 defineProperty_default()(this, "handleMouseEnterList", () => { 7403 this.setState({ 7404 selectedColor: this.state.value 7405 }); 7406 }); 7407 defineProperty_default()(this, "handleMouseLeaveList", () => { 7408 this.setColor(this.state.selectedColor || this.state.value); 7409 this.setState({ 7410 selectedColor: null 7411 }); 7412 }); 7413 defineProperty_default()(this, "handleMouseEnter", e => { 7414 this.setColor(e.target.dataset.color); 7415 }); 7416 this.state = { 7417 name: props.name, 7418 value: props.value, 7419 tool: props.tool, 7420 selectedColor: null 7421 }; 7422 } 7423 static getDerivedStateFromProps(nextProps, prevState) { 7424 let ret = {}; 7425 if (prevState.value !== nextProps.value) { 7426 ret.value = nextProps.value; 7427 } 7428 if (prevState.tool !== nextProps.tool) { 7429 ret.tool = nextProps.tool; 7430 } 7431 return Object.keys(ret).length > 0 ? ret : null; 7432 } 7433 shouldComponentUpdate(nextProps, nextState) { 7434 let prevState = this.state; 7435 let should = nextState.value !== prevState.value || nextState.selectedColor !== prevState.selectedColor || nextState.tool !== prevState.tool; 7436 return should; 7437 } 7438 onClick(e) { 7439 let value = e.target.dataset.color; 7440 this.setState({ 7441 selectedColor: value 7442 }); 7443 this.setColor(value); 7444 } 7445
7446 // onChange (data) { 7447 // let value = data.hex; 7448 // this.setColor(value); 7449 // } 7450 7451 setColor(value) { 7452 if (value !== this.state.value) { 7453 let data = { 7454 ...this.state, 7455 value: value 7456 }; 7457 if (this.state.tool === 'text') { 7458 Object(mods_util["j" /* setTextObjectColors */])(data, this.props.onChange); 7459 } else if (this.state.tool === 'ellipse' || this.state.tool === 'rect') { 7460 Object(mods_util["i" /* setEllipseRectObjectColors */])(data, this.props.onChange); 7461 } else { 7462 this.props.onChange(data); 7463 } 7464 } 7465 } 7466 render() { 7467 let p = this.props; 7468 let colors = constants["b" /* COLORS */]; 7469 // let picker = !(Object.values(colors).includes(this.state.value)); 7470 let currentValue = this.state.selectedColor || this.state.value; 7471 return /*#__PURE__*/react_default.a.createElement("div", { 7472 className: `ColorList ${this.state.tool}`, 7473 name: p.name, 7474 onMouseEnter: this.handleMouseEnterList, 7475 onMouseLeave: this.handleMouseLeaveList 7476 }, /*#__PURE__*/react_default.a.createElement("div", { 7477 onClick: this.onClick.bind(this), 7478 className: ["pink", currentValue === colors["pink"] ? "current" : ""].join(" "), 7479 "data-color": colors["pink"], 7480 onMouseEnter: this.handleMouseEnter 7481 }), /*#__PURE__*/react_default.a.createElement("div", { 7482 onClick: this.onClick.bind(this), 7483 className: ["red", currentValue === colors["red"] ? "current" : ""].join(" "), 7484 "data-color": colors["red"], 7485 onMouseEnter: this.handleMouseEnter 7486 }), /*#__PURE__*/react_default.a.createElement("div", { 7487 onClick: this.onClick.bind(this), 7488 className: ["orange", currentValue === colors["orange"] ? "current" : ""].join(" "), 7489 "data-color": colors["orange"], 7490 onMouseEnter: this.handleMouseEnter 7491 }), /*#__PURE__*/react_default.a.createElement("div", { 7492 onClick: this.onClick.bind(this), 7493 className: ["yellow", currentValue === colors["yellow"] ? "current" : ""].join(" "), 7494 "data-color": colors["yellow"], 7495 onMouseEnter: this.handleMouseEnter 7496 }), /*#__PURE__*/react_default.a.createElement("div", { 7497 onClick: this.onClick.bind(this), 7498 className: ["white", currentValue === colors["white"] ? "current" : ""].join(" "), 7499 "data-color": colors["white"], 7500 onMouseEnter: this.handleMouseEnter 7501 }), /*#__PURE__*/react_default.a.createElement("div", { 7502 onClick: this.onClick.bind(this), 7503 className: ["gray", currentValue === colors["gray"] ? "current" : ""].join(" "), 7504 "data-color": colors["gray"], 7505 onMouseEnter: this.handleMouseEnter 7506 }), /*#__PURE__*/react_default.a.createElement("div", { 7507 onClick: this.onClick.bind(this), 7508 className: ["purple", currentValue === colors["purple"] ? "current" : ""].join(" "), 7509 "data-color": colors["purple"], 7510 onMouseEnter: this.handleMouseEnter 7511 }), /*#__PURE__*/react_default.a.createElement("div", { 7512 onClick: this.onClick.bind(this), 7513 className: ["blue", currentValue === colors["blue"] ? "current" : ""].join(" "), 7514 "data-color": colors["blue"], 7515 onMouseEnter: this.handleMouseEnter 7516 }), /*#__PURE__*/react_default.a.createElement("div", { 7517 onClick: this.onClick.bind(this), 7518 className: ["lightblue", currentValue === colors["lightblue"] ? "current" : ""].join(" "), 7519 "data-color": colors["lightblue"], 7520 onMouseEnter: this.handleMouseEnter 7521 }), /*#__PURE__*/react_default.a.createElement("div", { 7522 onClick: this.onClick.bind(this), 7523 className: ["green", currentValue === colors["green"] ? "current" : ""].join(" "), 7524 "data-color": colors["green"], 7525 onMouseEnter: this.handleMouseEnter 7526 }), /*#__PURE__*/react_default.a.createElement("div", { 7527 onClick: this.onClick.bind(this), 7528 className: ["lightgray", currentValue === colors["lightgray"] ? "current" : ""].join(" "), 7529 "data-color": colors["lightgray"], 7530 onMouseEnter: this.handleMouseEnter 7531 }), /*#__PURE__*/react_default.a.createElement("div", { 7532 onClick: this.onClick.bind(this), 7533 className: ["black", currentValue === colors["black"] ? "current" : ""].join(" "), 7534 "data-color": colors["black"], 7535 onMouseEnter: this.handleMouseEnter 7536 })); 7537 } 7538} 7539/* harmony default export */ var components_ColorList_ColorList = (ColorList_ColorList_ColorList); 7540// EXTERNAL MODULE: ./src/editor/components/Tick/Tick.css 7541var Tick_Tick = __webpack_require__("0x9z"); 7542 7543// CONCATENATED MODULE: ./src/editor/components/Tick/Tick.js 7544 7545 7546class Tick_Tick_Tick extends react["Component"] { 7547 constructor(props) { 7548 super(props); 7549 this.step = 1; 7550 this.state = { 7551 name: props.name, 7552 value: parseFloat(props.value), 7553 mul: props.mul 7554 }; 7555 } 7556 static getDerivedStateFromProps(nextProps, prevState) { 7557 if (prevState.value !== nextProps.value) { 7558 return { 7559 value: nextProps.value 7560 }; 7561 } 7562 return null; 7563 } 7564 shouldComponentUpdate(nextProps, nextState) { 7565 if (this.state.value !== nextState.value) { 7566 return true; 7567 } 7568 return false;
7569 } 7570 onChange(e) { 7571 let val = parseFloat(e.target.value) / this.state.mul; 7572 this.sendChangeRequest(val); 7573 } 7574 sendChangeRequest(value) { 7575 let data = { 7576 name: this.state.name, 7577 value: value 7578 }; 7579 this.props.onChange(data); 7580 } 7581 onKeyPress(e) { 7582 if (e.key === 'ArrowDown') { 7583 this.stepDown(); 7584 } else if (e.key === 'ArrowUp') { 7585 this.stepUp(); 7586 } else e.preventDefault(); 7587 } 7588 stepUp() { 7589 if (this.state.value >= this.props.max) return; 7590 let val = (this.state.value * this.state.mul + this.step) / this.state.mul; 7591 this.sendChangeRequest(val); 7592 } 7593 stepDown() { 7594 if (this.state.value <= this.props.min) return; 7595 let val = (this.state.value * this.state.mul - this.step) / this.state.mul; 7596 this.sendChangeRequest(val); 7597 } 7598 render() { 7599 let min = this.props.min * this.state.mul; 7600 let max = this.props.max * this.state.mul; 7601 let value = this.state.value * this.state.mul; 7602 return /*#__PURE__*/react_default.a.createElement("div", { 7603 className: "Tick" 7604 }, /*#__PURE__*/react_default.a.createElement("label", null, /*#__PURE__*/react_default.a.createElement("input", { 7605 type: "number", 7606 id: this.props.id, 7607 maxLength: "2", 7608 min: min, 7609 max: max, 7610 step: this.step 7611 // defaultValue={this.state.value} 7612 , 7613 value: value, 7614 onChange: this.onChange.bind(this), 7615 onKeyDown: this.onKeyPress.bind(this) 7616 }), /*#__PURE__*/react_default.a.createElement("div", null, /*#__PURE__*/react_default.a.createElement("div", { 7617 className: "up", 7618 onClick: this.stepUp.bind(this) 7619 }), /*#__PURE__*/react_default.a.createElement("div", { 7620 className: "down", 7621 onClick: this.stepDown.bind(this) 7622 })))); 7623 } 7624} 7625/* harmony default export */ var components_Tick_Tick = (Tick_Tick_Tick); 7626// EXTERNAL MODULE: ./src/editor/components/Select/Select.css 7627var Select_Select = __webpack_require__("M3Bq"); 7628 7629// CONCATENATED MODULE: ./src/editor/components/Select/Select.js 7630 7631 7632class Select_Select_Select extends react["PureComponent"] { 7633 constructor(props) { 7634 super(props); 7635 this.state = { 7636 name: props.name, 7637 value: props.value 7638 }; 7639 } 7640 static getDerivedStateFromProps(nextProps, prevState) { 7641 if (prevState.value !== nextProps.value) { 7642 return { 7643 value: nextProps.value 7644 }; 7645 } 7646 return null; 7647 } 7648 onChange(e) { 7649 let val = e.target.value; 7650 this.props.onChange({ 7651 name: this.state.name, 7652 value: val 7653 }); 7654 } 7655 render() { 7656 let options = this.props.options.map(option => { 7657 let selected = option.value === this.state.value ? "selected" : ""; 7658 return /*#__PURE__*/react_default.a.createElement("option", { 7659 key: option.value, 7660 value: option.value 7661 }, option.caption); 7662 }); 7663 return /*#__PURE__*/react_default.a.createElement("div", { 7664 className: "Select-component" 7665 }, /*#__PURE__*/react_default.a.createElement("label", null, /*#__PURE__*/react_default.a.createElement("select", { 7666 className: this.props.name, 7667 id: this.props.id, 7668 value: this.state.value, 7669 onChange: this.onChange.bind(this) 7670 }, options))); 7671 } 7672} 7673/* harmony default export */ var components_Select_Select = (Select_Select_Select); 7674// EXTERNAL MODULE: ./src/editor/components/Align/Align.css 7675var Align_Align = __webpack_require__("ags5"); 7676 7677// CONCATENATED MODULE: ./src/editor/components/Align/Align.js 7678 7679 7680class Align_Align_Align extends react["Component"] { 7681 constructor(props) { 7682 super(props); 7683 this.state = { 7684 name: props.name, 7685 value: props.value 7686 }; 7687 } 7688 static getDerivedStateFromProps(nextProps, prevState) { 7689 if (prevState.value !== nextProps.value) { 7690 return { 7691 value: nextProps.value 7692 }; 7693 } 7694 return null; 7695 } 7696 shouldComponentUpdate(nextProps, nextState) { 7697 if (this.state.value !== nextState.value) { 7698 return true; 7699 } 7700 return false; 7701 } 7702 onChange(e) { 7703 let val = e.target.dataset.value; 7704 let data = { 7705 name: this.state.name, 7706 value: val 7707 }; 7708 this.props.onChange(data); 7709 } 7710 render() { 7711 // let value = this.props.value; 7712 return /*#__PURE__*/react_default.a.createElement("div", { 7713 className: "Align" 7714 }, /*#__PURE__*/react_default.a.createElement("label", null, /*#__PURE__*/react_default.a.createElement("span", null, this.props.label), /*#__PURE__*/react_default.a.createElement("div", null, /*#__PURE__*/react_default.a.createElement("div", { 7715 className: this.state.value === 'left' ? "current" : "", 7716 "data-value": "left", 7717 onClick: this.onChange.bind(this) 7718 }), /*#__PURE__*/react_default.a.createElement("div", { 7719 className: this.state.value === 'center' ? "current" : "", 7720 "data-value": "center", 7721 onClick: this.onChange.bind(this) 7722 }), /*#__PURE__*/react_default.a.createElement("div", { 7723 className: this.state.value === 'right' ? "current" : "", 7724 "data-value": "right", 7725 onClick: this.onChange.bind(this) 7726 })))); 7727 } 7728} 7729/* harmony default export */ var components_Align_Align = (Align_Align_Align); 7730// EXTERNAL MODULE: ./src/editor/mods/font.list.js 7731var font_list = __webpack_require__("HpD1"); 7732 7733// EXTERNAL MODULE: ./src/editor/components/PropertiesBar/PropertiesBar.css 7734var PropertiesBar_PropertiesBar = __webpack_require__("B3Ff"); 7735 7736// CONCATENATED MODULE: ./src/editor/components/PropertiesBar/PropertiesBar.js 7737 7738 7739 7740 7741 7742 7743
7744// import Ticker from "../Ticker/Ticker.js"; 7745 7746 7747 7748 7749 7750 7751 7752class PropertiesBar_PropertiesBar_PropertiesBar extends react["Component"] { 7753 constructor(props) { 7754 super(props); 7755 this.state = { 7756 tool: props.objectData.toolName, 7757 objectID: props.objectData.objectID, 7758 objectData: props.objectData, 7759 objectSettings: props.objectSettings, 7760 sizes: { 7761 ...props.sizes 7762 } 7763 }; 7764 this.INFO_BADGE_TOOLTIPS = { 7765 text: 'When background is enabled, the text gets a predefined color to ensure legibility.', 7766 ellipse: 'When background is enabled, the border gets a different shade and the opacity applies to the background.', 7767 rect: 'When background is enabled, the border gets a different shade and the opacity applies to the background.', 7768 blur: "Hide sensitive information. This effect will get rasterized along with the image, so it can't be edited after saving.", 7769 pen: "Hold SHIFT to draw horizontal straight lines.", 7770 highlighter: "Hold SHIFT or CTRL/CMD to deactivate the straightness." 7771 }; 7772 } 7773 static getDerivedStateFromProps(nextProps, prevState) { 7774 let keys = nextProps.toolSettings && Object.keys(nextProps.toolSettings); 7775 let nothing = !nextProps.toolSettings || !keys || keys.length === 0; 7776 if (!nothing) { 7777 let changed = nextProps.objectData && (nextProps.objectData.objectID !== prevState.objectID || nextProps.sizes.left !== prevState.sizes.left || nextProps.sizes.top !== prevState.sizes.top || nextProps.sizes.width !== prevState.sizes.width || nextProps.sizes.height !== prevState.sizes.height || nextProps.objectData.left !== prevState.objectData.left || nextProps.objectData.top !== prevState.objectData.top || nextProps.objectData.zoom !== prevState.objectData.zoom || nextProps.objectData.width !== prevState.objectData.width || nextProps.objectData.height !== prevState.objectData.height || nextProps.objectData.toolName !== prevState.tool); 7778 7779 // read shape settings 7780 if (nextProps.objectData && nextProps.objectSettings) { 7781 changed = changed || (sets => { 7782 let changed = false; 7783 let oldSet = prevState.objectSettings; 7784 let keys = Object.keys(sets); 7785 keys.forEach(propName => { 7786 if (oldSet[propName] !== sets[propName]) changed = true; 7787 }); 7788 return changed; 7789 })(nextProps.objectSettings); 7790 } 7791 if (nextProps.canvasInteraction !== prevState.canvasInteraction) changed = true; 7792 if (changed) { 7793 let ret = { 7794 sizes: nextProps.sizes, 7795 objectID: nextProps.objectData.objectID, 7796 objectData: nextProps.objectData, 7797 objectSettings: nextProps.objectSettings, 7798 tool: nextProps.objectData.toolName, 7799 canvasInteraction: nextProps.canvasInteraction 7800 }; 7801 return ret; 7802 } 7803 } 7804 return null; 7805 } 7806 shouldComponentUpdate(nextProps, nextState) { 7807 let prevState = this.state; 7808 let eq = nextState.canvasInteraction == prevState.canvasInteraction && nextState.objectID === prevState.objectID && nextState.objectData.zoom === prevState.objectData.zoom && nextState.objectData.left === prevState.objectData.left && nextState.objectData.top === prevState.objectData.top && nextState.objectData.width === prevState.objectData.width && nextState.objectData.height === prevState.objectData.height && nextState.sizes.left === prevState.sizes.left && nextState.sizes.top === prevState.sizes.top && nextState.sizes.width === prevState.sizes.width && nextState.sizes.height === prevState.sizes.height && (sets => { 7809 let virgin = true; 7810 let oldSet = prevState.objectSettings; 7811 let keys = Object.keys(sets); 7812 keys.forEach(propName => { 7813 if (oldSet[propName] !== sets[propName]) virgin = false; 7814 }); 7815 return virgin; 7816 })(nextProps.objectSettings); 7817 return !eq; 7818 } 7819 componentDidMount() { 7820 var _this$props$Canvas$cu; 7821 (_this$props$Canvas$cu = this.props.Canvas.current) === null || _this$props$Canvas$cu === void 0 ? void 0 : _this$props$Canvas$cu.dynamic.on("mouse:wheel", () => { 7822 this.forceUpdate(); 7823 });
7823 // bug fix (collapsed PropertiesBar did not retain correct position when Canvas was scrolled) 7824 } 7825 componentWillUnmount() { 7826 var _this$props$Canvas$cu2; 7827 (_this$props$Canvas$cu2 = this.props.Canvas.current) === null || _this$props$Canvas$cu2 === void 0 ? void 0 : _this$props$Canvas$cu2.dynamic.off("mouse:wheel", () => { 7828 this.forceUpdate(); 7829 }); 7830 } 7831 componentDidUpdate(prevProps, prevState) {} 7832 renderAlign(p, onChange, currentValue, disabled) { 7833 return /*#__PURE__*/react_default.a.createElement(components_Align_Align, { 7834 label: p.caption, 7835 disabled: disabled, 7836 value: currentValue ? currentValue : p.value, 7837 name: p.name, 7838 onChange: onChange 7839 }); 7840 } 7841 renderTick(p, onChange, currentValue, disabled) { 7842 return /*#__PURE__*/react_default.a.createElement(components_Tick_Tick, { 7843 label: p.caption, 7844 value: currentValue ? currentValue : p.value, 7845 disabled: disabled, 7846 min: p.min, 7847 max: p.max, 7848 mul: p.mul ? p.mul : 1, 7849 name: p.name, 7850 onChange: onChange 7851 }); 7852 } 7853 renderSelect(p, onChange, currentValue, disabled) { 7854 console.log("render select for:", p.caption, currentValue ? currentValue : p.value); 7855 // label={p.caption} 7856 let select = /*#__PURE__*/react_default.a.createElement(components_Select_Select, { 7857 name: p.name, 7858 value: currentValue ? currentValue : p.value, 7859 disabled: disabled, 7860 onChange: onChange, 7861 options: p.options 7862 }); 7863 return select; 7864 } 7865 renderColor(p, onChange, currentValue, disabled) {
7866 let colorList = /*#__PURE__*/react_default.a.createElement(components_ColorList_ColorList, { 7867 name: p.name, 7868 value: currentValue ? currentValue : p.value, 7869 disabled: disabled, 7870 onChange: onChange, 7871 tool: this.state.tool 7872 }); 7873 return colorList; 7874 } 7875 renderSliderTick(p, onChange, currentValue, disabled) { 7876 return /*#__PURE__*/react_default.a.createElement(components_SliderTick_SliderTick, { 7877 label: p.caption, 7878 name: p.name, 7879 value: currentValue || currentValue === 0 ? currentValue : p.value, 7880 min: p.min, 7881 max: p.max, 7882 onChange: onChange, 7883 mul: p.mul ? p.mul : 1, 7884 disabled: disabled, 7885 tool: this.state.tool 7886 }); 7887 } 7888 renderLabel(p, onChange, currentValue) { 7889 const checkedDataText = { 7890 name: 'backgroundColor', 7891 value: this.state.objectSettings.fill, 7892 tool: this.state.tool 7893 }; 7894 const uncheckedDataText = { 7895 name: 'fill', 7896 value: this.state.objectSettings.backgroundColor, 7897 tool: this.state.tool 7898 }; 7899 const checkedDataEllipseRect = { 7900 name: 'fill', 7901 value: this.state.objectSettings.stroke, 7902 tool: this.state.tool 7903 }; 7904 const uncheckedDataEllipseRect = { 7905 name: 'stroke', 7906 value: this.state.objectSettings.fill, 7907 tool: this.state.tool 7908 }; 7909 return /*#__PURE__*/react_default.a.createElement("div", { 7910 className: "label" 7911 }, /*#__PURE__*/react_default.a.createElement(components_CheckCircle_CheckCircle, { 7912 id: p.name, 7913 label: p.caption, 7914 checked: !currentValue, 7915 onChecked: () => { 7916 if (this.state.tool === 'text') { 7917 Object(mods_util["j" /* setTextObjectColors */])(checkedDataText, onChange); 7918 } 7919 if (this.state.tool === 'ellipse' || this.state.tool === 'rect') { 7920 Object(mods_util["i" /* setEllipseRectObjectColors */])(checkedDataEllipseRect, onChange); 7921 } 7922 onChange({ 7923 name: p.name, 7924 value: false 7925 }); 7926 }, 7927 onUnchecked: () => { 7928 if (this.state.tool === 'text') { 7929 Object(mods_util["j" /* setTextObjectColors */])(uncheckedDataText, onChange); 7930 } 7931 if (this.state.tool === 'ellipse' || this.state.tool === 'rect') { 7932 Object(mods_util["i" /* setEllipseRectObjectColors */])(uncheckedDataEllipseRect, onChange); 7933 } 7934 onChange({ 7935 name: p.name, 7936 value: true 7937 }); 7938 } 7939 })); 7940 } 7941 renderParam(p, onChange, currentValue) { 7942 let param; 7943 if (p.type === 'color') { 7944 param = this.renderColor(p, onChange, currentValue); 7945 } else if (p.type === 'slider') { 7946 param = this.renderSliderTick(p, onChange, currentValue); 7947 } else if (p.type === 'tick') { 7948 param = this.renderTick(p, onChange, currentValue); 7949 } else if (p.type === 'select') { 7950 param = this.renderSelect(p, onChange, currentValue); 7951 } else if (p.type === 'align') { 7952 param = this.renderAlign(p, onChange, currentValue); 7953 } else if (p.type === 'label') { 7954 param = this.renderLabel(p, onChange, currentValue); 7955 } else { 7956 param = /*#__PURE__*/react_default.a.createElement("div", null, "-none-", p.name, "-", p.type, "-"); 7957 } 7958 return /*#__PURE__*/react_default.a.createElement("div", { 7959 key: p.name 7960 }, param); 7961 } 7962 renderBars(bars, onChange, tool) { 7963 let wheels = []; 7964 let that = this; 7965 7966 // tooling of onChange 7967 let onChangeTooled = (tool => { 7968 return data => { 7969 data.tool = tool; 7970 onChange(data); 7971 }; 7972 })(tool); 7973 bars.forEach((wheel, i) => { 7974 let inners = []; 7975 let backgroundColor = "#fff"; 7976 let disabled = typeof this.props.objectData.object.get(wheel.name) === 'undefined' ? wheel.disabled : this.props.objectData.object.get(wheel.name); 7977 let textBgColorDisabled = this.props.objectSettings['textBgColorDisabled']; 7978 let disabledFill = this.props.objectSettings['disabledFill']; 7979 let spin = p => { 7980 if (textBgColorDisabled === undefined) { 7981 // handle old text annotations that were created with old text tool and did not save "textBgColorDisabled" property to database 7982 textBgColorDisabled = true; 7983 } 7984 if (this.state.tool === 'text') { 7985 if (textBgColorDisabled && p.name === 'backgroundColor') return; 7986 if (!textBgColorDisabled && p.name === 'fill') return; 7987 } 7988 if (this.state.tool === 'ellipse' || this.state.tool === 'rect') { 7989 if (disabledFill && p.name === 'fill') return; 7990 if (!disabledFill && p.name === 'stroke') return; 7991 } 7992 7993 // get current value of this shape's property 7994 // let value = this.props.objectData.object?this.props.objectData.object.get(p.name):false; 7995 7996 let value = this.props.objectSettings[p.name] ? this.props.objectSettings[p.name] : false;
7997 7998 // process special field values 7999 if (this.state.tool === 'text') { 8000 if (p.name === 'fontFamily') { 8001 font_list["a" /* default */].forEach((font, i) => { 8002 if (font === value) { 8003 value = i; 8004 } 8005 }); 8006 } 8007 if (p.name === 'textBgColorDisabled') { 8008 value = textBgColorDisabled; 8009 } 8010 } 8011 let inner = this.renderParam(p, onChangeTooled, value); 8012 8013 // get background color for colory props 8014 if ('color' === p.type) { 8015 backgroundColor = value ? value : p.value; 8016 } 8017 inners.push(inner); 8018 }; 8019 let c = ["setting"]; 8020 c.push(wheel.key ? wheel.key : ""); 8021 8022 // is disabled 8023 if (wheel.hasOwnProperty("disabled")) { 8024 let currentDisabled = that.props.objectSettings[wheel.name]; 8025 currentDisabled = typeof currentDisabled !== 'undefined' ? that.props.objectData.object.get(wheel.name) : wheel.disabled; 8026 c.push(currentDisabled ? "disabled" : ""); 8027 } 8028 c = c.join(" "); 8029 wheel.inner.forEach(spin); 8030 let caption = /*#__PURE__*/react_default.a.createElement("div", { 8031 className: `caption ${wheel.caption}` 8032 }, wheel.caption, /*#__PURE__*/react_default.a.createElement("span", { 8033 className: this.state.tool 8034 }, /*#__PURE__*/react_default.a.createElement("span", { 8035 className: "tooltiptext" 8036 }, this.INFO_BADGE_TOOLTIPS[this.state.tool]))); 8037 if (typeof disabled !== "undefined") { 8038 let id = "dis_che_" + wheel.name; 8039 caption = /*#__PURE__*/react_default.a.createElement("div", { 8040 className: "captionWithButton" 8041 }, /*#__PURE__*/react_default.a.createElement(components_CheckCircle_CheckCircle, { 8042 id: id, 8043 label: wheel.caption, 8044 checked: !disabled, 8045 onChecked: () => onChangeTooled({ 8046 name: wheel.name, 8047 value: false 8048 }), 8049 onUnchecked: () => onChangeTooled({ 8050 name: wheel.name, 8051 value: true 8052 }) 8053 })); 8054 } 8055 let innersClassName = ["inners"]; 8056 if (disabled) { 8057 // innersClassName.push("disabled"); 8058 } 8059 let bar = /*#__PURE__*/react_default.a.createElement("div", { 8060 className: c, 8061 key: i, 8062 style: wheel.key ? {} : { 8063 backgroundColor: backgroundColor, 8064 border: `solid 1px ${Object(mods_util["d" /* getBorderColor */])(backgroundColor)}` 8065 } 8066 }, /*#__PURE__*/react_default.a.createElement("div", null, caption, /*#__PURE__*/react_default.a.createElement("div", { 8067 className: innersClassName.join(" "), 8068 onClick: disabled ? () => { 8069 console.log("wow"); 8070 {/* onChangeTooled({ 8071 name: wheel.name, 8072 value: false 8073 }); */} 8074 } : null 8075 }, inners))); 8076 wheels.push(bar); 8077 }); 8078 return wheels; 8079 } 8080 render() { 8081 if (!this.props.toolSettings || !this.props.toolSettings.bars) return null; 8082 let margin = 12; // margin between annotation and toolbar 8083 let styles = {}; 8084 let className = ["PropertiesBar"]; 8085 let barsCount = this.props.toolSettings.bars.length; 8086 let toolbarCoords = { 8087 width: 42 8088 }; 8089 toolbarCoords.height = barsCount * 32 + 10; 8090 if (!this.state.objectData || this.state.objectData.isGroup || barsCount === 0 || !this.props.imageMode && !this.props.embedMode || this.state.canvasInteraction) { 8091 className.push("hidden"); 8092 } else { 8093 let o = this.state.objectData.object; 8094 o.setCoords(); 8095 // let ocoords = o.calcCoords(false); 8096 let bound = o.getBoundingRect(); 8097 // let odata = this.state.objectData; 8098 // let zoom = this.state.objectData.zoom; 8099 8100 // TODO 8101 // find a formula 8102 // SET_ZOOM 8103 // mirror 8104 8105 // odata.width = zoom * (this.state.objectData.object.calcCoords(false).tr.x - this.state.objectData.object.calcCoords(false).tl.x); 8106 // odata.height = zoom * (this.state.objectData.object.calcCoords(false).bl.y - this.state.objectData.object.calcCoords(false).tl.y); 8107 8108 toolbarCoords.left = bound.left - margin - toolbarCoords.width; 8109 toolbarCoords.top = bound.top + bound.height / 2 - toolbarCoords.height / 2; 8110 let propertiesBarMenuWidth = 250; // width of properties bar is 250px; 8111 8112 if (bound.left < propertiesBarMenuWidth + margin) { 8113 toolbarCoords.left = bound.left + bound.width + margin; // move toolbar to the right side of annotation 8114 } else { 8115 className.push("expand-to-left"); // set properties panel expansion position to left 8116 } 8117 8118 // if (toolbarCoords.left + toolbarCoords.width + propertiesBarMenuWidth > window.innerWidth + margin) { 8119 // if ( !(toolbarCoords.left - propertiesBarMenuWidth - margin < 0) ) { 8120 // className.push("expand-to-left"); 8121 // } 8122 8123 // let origin = {}; 8124 // origin.left = odata.left - toolbarCoords.left + odata.width/2; 8125 // origin.top = odata.top - toolbarCoords.top + odata.height/2; 8126 8127 styles = {}; 8128 styles.width = toolbarCoords.width + "px"; 8129 styles.height = toolbarCoords.height + "px"; 8130 styles.left = toolbarCoords.left + "px"; 8131 styles.top = toolbarCoords.top + "px"; 8132 } 8133 className = className.join(" "); 8134 return /*#__PURE__*/react_default.a.createElement("div", { 8135 className: className, 8136 style: styles 8137 }, this.renderBars(this.props.toolSettings.bars, this.props.setObjectSettings.bind(this), this.state.tool)); 8138 } 8139} 8140; 8141let mapStateToProps = state => { 8142 let getSettableProps = bars => { 8143 let inn = inn => { 8144 return inn.name; 8145 }; 8146 let bar = bar => { 8147 let ret = bar.inner.map(inn); 8148 if (bar.hasOwnProperty("disabled")) ret.push(bar.name); 8149 return ret; 8150 }; 8151 let ret = bars.map(bar); 8152 // return flatten array 8153 return ret.reduce((acc, val) => acc.concat(val), []); 8154 }; 8155 let getObjectSettings = (shape, list) => { 8156 let settableSet = {}; 8157 list.forEach(propName => { 8158 settableSet[propName] = shape.get(propName); 8159 if (propName == 'stroke') { 8160 settableSet[propName] = settableSet[propName].slice(0, 7); 8161 } 8162 }); 8163 return settableSet; 8164 }; 8165 let objectSettings = {}; 8166 if (state.app.currentObjectData != null && typeof state.app.currentObjectData.toolName != "undefined") { 8167 // if (state.app.currentObjectData==) debugger; 8168 if (typeof state.tools.tools[state.app.currentObjectData.toolName] === 'undefined') { 8169 debugger; 8170 } 8171 // let settableProps = getSettableProps(state.tools.tools[state.app.currentObjectData.toolName].bars); 8172 let settableProps = getSettableProps(state.tools.tools[state.app.currentObjectData.toolName || state.tools.tool].bars); 8173 objectSettings = getObjectSettings(state.app.currentObjectData.object, settableProps); 8174 } 8175 return { 8176 sizes: { 8177 left: state.app.sizes.left, 8178 top: state.app.sizes.top, 8179 width: state.app.sizes.width, 8180 height: state.app.sizes.height 8181 }, 8182 canvasInteraction: state.app.canvasInteraction, 8183 globalPropSynList: state.tools.globalPropSynList, 8184 imageMode: state.app.imageMode, 8185 embedMode: state.app.embedMode, 8186 objectData: state.app.currentObjectData, 8187 // toolSettings: state.tools.tools[state.app.currentObjectData.toolName], 8188 toolSettings: state.tools.tools[state.app.currentObjectData ? state.app.currentObjectData.toolName : state.tools.tool], 8189 objectSettings: objectSettings, 8190 tools: state.tools 8191 }; 8192};
8193let mapDispatchToProps = dispatch => { 8194 return { 8195 setTool: tool => dispatch({ 8196 type: 'CHANGE_TOOL', 8197 value: tool 8198 }), 8199 refresh: () => { 8200 dispatch({ 8201 type: "__REFRESH" 8202 }); 8203 }, 8204 setToolSettings: (data, tools, syns, embedMode) => { 8205 let inn = inn => { 8206 if (inn.name === data.name) inn.value = data.value; 8207 return inn; 8208 }; 8209 let bar = bar => { 8210 bar.inner = bar.inner.map(inn); 8211 return bar; 8212 }; 8213 let options = { 8214 ...tools 8215 }; 8216 options.tools[data.tool].bars = options.tools[data.tool].bars.map(bar); 8217 8218 // const textToolSettingsInner = options.tools.text.bars.find(e=>e.caption === 'Textbox').inner; 8219 // const textBgColorDisabled = textToolSettingsInner.find(e=>e.name === 'textBgColorDisabled').value; 8220 8221 const ellipseToolSettingsInner = options.tools.ellipse.bars.find(e => e.caption === 'Circle').inner; 8222 const ellipseDisabledFill = ellipseToolSettingsInner.find(e => e.name === 'disabledFill').value; 8223 const rectToolSettingsInner = options.tools.rect.bars.find(e => e.caption === 'Rectangle').inner; 8224 const rectDisabledFill = rectToolSettingsInner.find(e => e.name === 'disabledFill').value; 8225 8226 // change global synonimotic properties 8227 let toolhash = data.tool + "-" + data.name; 8228 let setSyns = s => { 8229 let syntool = s.split("-")[0]; 8230 let synprop = s.split("-")[1]; 8231 8232 // condition to make sure props of same tool don't sync with each other AND skip currently selected tool prop 8233 if (syntool === data.tool) return; 8234 8235 // condition to sync 'fill' and 'backgroundColor' props of text tool based on 'textBgColorDisabled' when other tools' prop changes 8236 // if (data.tool !== 'text' && syntool === 'text') { 8237 // if (textBgColorDisabled) { 8238 // textToolSettingsInner.find(e=>e.name === 'fill').value = data.value; 8239 // textToolSettingsInner.find(e=>e.name === 'backgroundColor').value = COLORS.transparent; 8240 // } else { 8241 // textToolSettingsInner.find(e=>e.name === 'fill').value = getTextColor(data.value); 8242 // textToolSettingsInner.find(e=>e.name === 'backgroundColor').value = data.value; 8243 // } 8244 // return; 8245 // } 8246 8247 // condition to sync 'fill' and 'stroke' props of ellipse tool based on 'disabledFill' when other tools' prop changes 8248 if (data.tool !== 'ellipse' && syntool === 'ellipse' && !ellipseDisabledFill) { 8249 ellipseToolSettingsInner.find(e => e.name === 'fill').value = data.value; 8250 ellipseToolSettingsInner.find(e => e.name === 'stroke').value = Object(mods_util["d" /* getBorderColor */])(data.value); 8251 return; 8252 } 8253 8254 // condition to sync 'fill' and 'stroke' props of rect tool based on 'disabledFill' when other tools' prop changes 8255 if (data.tool !== 'rect' && syntool === 'rect' && !rectDisabledFill) { 8256 rectToolSettingsInner.find(e => e.name === 'fill').value = data.value; 8257 rectToolSettingsInner.find(e => e.name === 'stroke').value = Object(mods_util["d" /* getBorderColor */])(data.value); 8258 return; 8259 } 8260 options.tools[syntool].bars = options.tools[syntool].bars.map(toolset => { 8261 toolset.inner = toolset.inner.map(inn => { 8262 if (inn.name === synprop) inn.value = data.value; 8263 return inn; 8264 }); 8265 return toolset; 8266 }); 8267 }; 8268 let checkIfThereSyns = synSet => { 8269 if (!synSet.includes(toolhash)) return; 8270 synSet.forEach(setSyns); 8271 }; 8272 syns.forEach(checkIfThereSyns); 8273 8274 // save tools 8275 if (embedMode) { 8276 localStorage.setItem("toolsSettings", JSON.stringify(options)); 8277 } 8278 8279 // save tools settings to background 8280 let util = new mods_util["c" /* default */](); 8281 let m = { 8282 action: "CONTENT__BG__UPDATE_TOOLS_SETTINGS", 8283 data: { 8284 settings: options 8285 } 8286 }; 8287 util.extSendMessage(m, false, false); 8288 // let action = { 8289 // type: "CHANGE_TOOLS", 8290 // value: options 8291 // }; 8292 // dispatch(action); 8293 } 8294 }; 8295}; 8296let mergeProps = (stateProps, dispatchProps, ownProps) => { 8297 return { 8298 ...ownProps, 8299 ...stateProps, 8300 ...dispatchProps, 8301 setObjectSettings: data => { 8302 let canvasComponent = ownProps.Canvas.current; 8303 if (!data.name.includes("disabled")) { 8304 let disabledSet = {}; 8305 disabledSet.name = "disabled" + data.name.charAt(0).toUpperCase() + data.name.slice(1); 8306 disabledSet.value = false;
8307 disabledSet.tool = data.tool; 8308 canvasComponent.setCurrentShapeSettings(disabledSet); 8309 } 8310 canvasComponent.setCurrentShapeSettings(data); 8311 canvasComponent.historyManage(); 8312 // change tool default styles 8313 // there is no such reducer yet 8314 dispatchProps.setToolSettings(data, stateProps.tools, stateProps.globalPropSynList, stateProps.embedMode); 8315 console.log("setToolSettings", data, stateProps.tools); 8316 // refresh component 8317 dispatchProps.refresh(); 8318 } 8319 }; 8320}; 8321/* harmony default export */ var components_PropertiesBar_PropertiesBar = __webpack_exports__["a"] = (Object(es["b" /* connect */])(mapStateToProps, mapDispatchToProps, mergeProps)(PropertiesBar_PropertiesBar_PropertiesBar)); 8322 8323/***/ }), 8324 8325/***/ "JpM/": 8326/***/ (function(module, exports, __webpack_require__) { 8327 8328// extracted by mini-css-extract-plugin 8329module.exports = {"dropdown":"src-components-Dropdown-Dropdown__dropdown--37jMH","dropdown-button":"src-components-Dropdown-Dropdown__dropdown-button--k5srX","userIcon":"src-components-Dropdown-Dropdown__userIcon--3GjSF","dropdown-inner":"src-components-Dropdown-Dropdown__dropdown-inner--aiFhR","dropdown-item":"src-components-Dropdown-Dropdown__dropdown-item--CobVg","dropdpwm-item-logout":"src-components-Dropdown-Dropdown__dropdpwm-item-logout--RvKY2","DashboardDropDown":"src-components-Dropdown-Dropdown__DashboardDropDown--G5sZI","dropdownHome":"src-components-Dropdown-Dropdown__dropdownHome--YFT5P"}; 8330 8331/***/ }), 8332 8333/***/ "KJlY": 8334/***/ (function(module, exports, __webpack_require__) { 8335 8336// extracted by mini-css-extract-plugin 8337module.exports = {"pointEventsNone":"src-screens-FolderShared-FolderShared__pointEventsNone---K3zC","container":"src-screens-FolderShared-FolderShared__container--Y9sXw","sidebar":"src-screens-FolderShared-FolderShared__sidebar--GPae+","content":"src-screens-FolderShared-FolderShared__content--RXvPl","header":"src-screens-FolderShared-FolderShared__header--bbkS+","toggleSidebarButton":"src-screens-FolderShared-FolderShared__toggleSidebarButton--PBBvV","sidebarOpened":"src-screens-FolderShared-FolderShared__sidebarOpened---Ki1k"}; 8338 8339/***/ }), 8340 8341/***/ "KrOW": 8342/***/ (function(module, exports, __webpack_require__) { 8343 8344// extracted by mini-css-extract-plugin 8345module.exports = {"clipsLimitation":"src-screens-Settings-Settings__clipsLimitation--LswNh","low":"src-screens-Settings-Settings__low--NPWVI","full":"src-screens-Settings-Settings__full--kR+DE","navigation-message-mode":"src-screens-Settings-Settings__navigation-message-mode--gURps","navigation-message-header":"src-screens-Settings-Settings__navigation-message-header--S972s","navigation-message":"src-screens-Settings-Settings__navigation-message--OpPVA","navigation-message-current":"src-screens-Settings-Settings__navigation-message-current--+8r1c","navigation-message-sub":"src-screens-Settings-Settings__navigation-message-sub--8DtuY","settings-item":"src-screens-Settings-Settings__settings-item--U9iMM","image-container":"src-screens-Settings-Settings__image-container--tRN24","title":"src-screens-Settings-Settings__title--LEJhJ","pointer":"src-screens-Settings-Settings__pointer--OsCYK","btn-action":"src-screens-Settings-Settings__btn-action--1LFGa","back-btn-arrow":"src-screens-Settings-Settings__back-btn-arrow--obS7Y","settings-items-container":"src-screens-Settings-Settings__settings-items-container--1HtPV","first-item":"src-screens-Settings-Settings__first-item--V9coz","last-items":"src-screens-Settings-Settings__last-items--I-Ax0","divider":"src-screens-Settings-Settings__divider--PkOYI","google-drive-contaier":"src-screens-Settings-Settings__google-drive-contaier--x9fSr","section-title":"src-screens-Settings-Settings__section-title--IWeWi","google-drive-icon":"src-screens-Settings-Settings__google-drive-icon---7ASw","google-drive-title":"src-screens-Settings-Settings__google-drive-title--0cC9b","google-drive-message":"src-screens-Settings-Settings__google-drive-message--Kg64m","account-type":"src-screens-Settings-Settings__account-type--5knAT","progress-bar-container":"src-screens-Settings-Settings__progress-bar-container--ku-A7","progress-bar-info":"src-screens-Settings-Settings__progress-bar-info--Zxrbl","margin-adjust":"src-screens-Settings-Settings__margin-adjust--g+8xT","attribute":"src-screens-Settings-Settings__attribute--baIDH","type":"src-screens-Settings-Settings__type--COQ+a","value":"src-screens-Settings-Settings__value--cTZMD","view-all-plans":"src-screens-Settings-Settings__view-all-plans--K9Fp5","change":"src-screens-Settings-Settings__change--NnIFB","image":"src-screens-Settings-Settings__image--17RVb","account-connected":"src-screens-Settings-Settings__account-connected--3XjBl","google-drive-email":"src-screens-Settings-Settings__google-drive-email--ll9Pn","progress-bar-container-google-drive":"src-screens-Settings-Settings__progress-bar-container-google-drive--KITJ2","delete-account":"src-screens-Settings-Settings__delete-account--Oo+aH","sign-form-container":"src-screens-Settings-Settings__sign-form-container--AAwh5","section-hidden":"src-screens-Settings-Settings__section-hidden--XWE3p","button-normal":"src-screens-Settings-Settings__button-normal--ixGJU","button-google":"src-screens-Settings-Settings__button-google--dp4D0","gd-connected":"src-screens-Settings-Settings__gd-connected--i1NcY","clipularLogo":"src-screens-Settings-Settings__clipularLogo--WkUWI","connect-clipular-button":"src-screens-Settings-Settings__connect-clipular-button--81RBP","button-disabled":"src-screens-Settings-Settings__button-disabled--Oo5MF","clipularDescr":"src-screens-Settings-Settings__clipularDescr--b9uFa","clipularDescrBold":"src-screens-Settings-Settings__clipularDescrBold--0M+bR","lds-ripple":"src-screens-Settings-Settings__lds-ripple--torQr","change-img":"src-screens-Settings-Settings__change-img--FOLZm","change-name":"src-screens-Settings-Settings__change-name--gMTCJ","manage-sub":"src-screens-Settings-Settings__manage-sub--DrF7r","button-google-drive":"src-screens-Settings-Settings__button-google-drive--ZIkbi","log-out":"src-screens-Settings-Settings__log-out--Dj1Cg"}; 8346 8347/***/ }), 8348 8349/***/ "KsqR": 8350/***/ (function(module, __webpack_exports__, __webpack_require__) { 8351 8352"use strict"; 8353/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("lSNA"); 8354/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__); 8355/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("q1tI"); 8356/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); 8357/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("/MKj"); 8358/* harmony import */ var _SignForm_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("m85V"); 8359/* harmony import */ var _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_SignForm_css__WEBPACK_IMPORTED_MODULE_3__); 8360/* harmony import */ var _Auth__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("2tX9"); 8361 8362 8363 8364 8365 8366class SignForm extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] { 8367 constructor(props) { 8368 super(props); 8369 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(this, "toggleForm", e => { 8370 e.preventDefault(); 8371 this.setState({ 8372 isSignUpForm: !this.state.isSignUpForm, 8373 error: false, 8374 serverErrorResponseMessage: '' 8375 }); 8376 }); 8377 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(this, "resetError", () => { 8378 this.setState({ 8379 error: false, 8380 serverErrorResponseMessage: '' 8381 }); 8382 }); 8383 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(this, "changed", e => { 8384 if (e.target === this.upEmailRef.current) this.inEmailRef.current.value = e.target.value;else if (e.target === this.inEmailRef.current) this.upEmailRef.current.value = e.target.value;else if (e.target === this.upPwdRef.current) this.inPwdRef.current.value = e.target.value;else if (e.target === this.inPwdRef.current) this.upPwdRef.current.value = e.target.value; 8385 this.resetError(); //I need to close error notification (server response) after input change? 8386 }); 8387 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(this, "agreeWithTOS", e => { 8388 let v = e.target.checked; 8389 this.setState({ 8390 agreeWithTOS: v 8391 }); 8392 }); 8393 this.state = this.props.isSignUpForm ? { 8394 isSignUpForm: this.props.isSignUpForm, 8395 submitLoading: false, 8396 error: false, 8397 signUpEmailErrorMessage: '', 8398 signUpPasswordErrorMessage: '', 8399 signInEmailErrorMessage: '', 8400 signInPasswordErrorMessage: '', 8401 serverErrorResponseMessage: '', 8402 serverErrorResponseMessage: '', 8403 forgotPassword: false, 8404 passwordResetEmailIsValid: false, 8405 passwordResetEmailSended: false 8406 } : { 8407 isSignUpForm: false, 8408 submitLoading: false, 8409 error: false, 8410 signUpEmailErrorMessage: '', 8411 signUpPasswordErrorMessage: '', 8412 signInEmailErrorMessage: '', 8413 signInPasswordErrorMessage: '', 8414 serverErrorResponseMessage: '', 8415 forgotPassword: false, 8416 passwordResetEmailIsValid: false, 8417 passwordResetEmailSended: false 8418 }; 8419 this.Auth = this.props.Auth; 8420 this.inEmailRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createRef(); 8421 this.inPwdRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createRef(); 8422 this.upEmailRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createRef(); 8423 this.upPwdRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createRef(); 8424 this.inSubmitRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createRef(); 8425 this.upSubmitRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createRef(); 8426 this.signUpRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createRef(); 8427 this.forgotPasswordRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createRef(); 8428 this.passwordResetEmailRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createRef(); 8429 this.sendEmailButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createRef(); 8430 this.signIn = this.signIn.bind(this); 8431 this.signUp = this.signUp.bind(this);
8432 this.showForgotPasswordForm = this.showForgotPasswordForm.bind(this); 8433 this.sendForgotPosswordEmail = this.sendForgotPosswordEmail.bind(this); 8434 this.checkIfPasswordResetEmailIsValid = this.checkIfPasswordResetEmailIsValid.bind(this); 8435 } 8436 componentDidUpdate(prevProps, prevState) { 8437 // if(prevState.forgotPassword == false && this.state.forgotPassword == true){ 8438 // this.forgotPasswordRef.current.style.visibility = "visible" 8439 // this.forgotPasswordRef.current.style.opacity = "1" 8440 // } 8441 8442 if (prevProps.isShown && !this.props.isShown) { 8443 //if the modal is closed go back to SignUp/SingIn form 8444 this.setState({ 8445 forgotPassword: false, 8446 passwordResetEmailIsValid: false, 8447 passwordResetEmailSended: false 8448 }); 8449 if (this.props.isSignUpForm) { 8450 this.setState({ 8451 isSignUpForm: true 8452 }); 8453 } else { 8454 this.setState({ 8455 isSignUpForm: false 8456 }); 8457 } 8458 } 8459 } 8460 onNextClick() { 8461 if (this.props.afterSigned) { 8462 this.props.afterSigned(this.props.buttonType); 8463 } 8464 } 8465 async signIn() {
8466 let checkIfSignInEmailIsValid = this.checkIfSignInEmailIsValid(); 8467 let checkIfSignInPasswordIsValid = this.checkIfSignInPasswordIsValid(); 8468 if (checkIfSignInEmailIsValid && checkIfSignInPasswordIsValid) { 8469 this.setState({ 8470 submitLoading: true 8471 }); 8472 const email = this.inEmailRef.current.value; 8473 const pwd = this.inPwdRef.current.value; 8474 let result = await this.Auth.signIn(email, pwd); 8475 if (typeof result.error == "undefined" && this.props.buttonType != 'freeButton') { 8476 this.onNextClick(); 8477 } 8478 let changes = {}; 8479 if (result.error) { 8480 changes.error = result.error; 8481 changes.serverErrorResponseMessage = result.errorMessage; 8482 changes.submitLoading = false; 8483 this.setState(changes); 8484 this.props.setNotification(changes.serverErrorResponseMessage, true); 8485 } else if (this.props.whenSigned) this.props.whenSigned(false); 8486 return result; 8487 } 8488 } 8489 async signUp() { 8490 if (!this.state.agreeWithTOS) return; 8491 if (this.state.submitLoading) return; 8492 let checkIfSignUpEmailIsValid = this.checkIfSignUpEmailIsValid(); 8493 let checkIfSignUpPasswordIsValid = this.checkIfSignUpPasswordIsValid(); 8494 if (checkIfSignUpEmailIsValid && checkIfSignUpPasswordIsValid) { 8495 this.setState({ 8496 submitLoading: true 8497 }); 8498 const email = this.upEmailRef.current.value; 8499 const pwd = this.upPwdRef.current.value; 8500 let result = await this.Auth.signUp(email, pwd); 8501 let changes = {}; 8502 if (result.error) { 8503 changes.error = result.error; 8504 changes.serverErrorResponseMessage = result.errorMessage; 8505 changes.submitLoading = false; 8506 this.setState(changes); 8507 this.props.setNotification(changes.serverErrorResponseMessage, true); 8508 } else { 8509 if (this.props.whenSigned) { 8510 this.props.whenSigned(true); 8511 } 8512 } 8513 return result; 8514 } 8515 } 8516 showForgotPasswordForm() { 8517 // await this.Auth.forgotPassword('[email protected]') 8518 // await this.Auth.signIn(email, pwd) 8519 this.setState({ 8520 forgotPassword: !this.state.forgotPassword 8521 }); 8522 8523 // if(!this.state.forgotPassword){ 8524 // this.signUpRef.current.style.opacity = "0" 8525 // this.signUpRef.current.style.display = "none"; 8526 // this.forgotPasswordRef.current.style.display = "block" 8527 // this.forgotPasswordRef.current.style.opacity = "1" 8528 // } 8529 // else{ 8530 // this.forgotPasswordRef.current.style.opacity = "0" 8531 // this.forgotPasswordRef.current.style.display = "none" 8532 // this.signUpRef.current.style.display = ""; 8533 // this.signUpRef.current.style.opacity = "1" 8534 // } 8535 } 8536 validateEmail(email) { 8537 const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i; 8538 return re.test(String(email)); 8539 } 8540 checkIfPasswordResetEmailIsValid() { 8541 let isValid = this.validateEmail(this.passwordResetEmailRef.current.value); 8542 if (isValid) { 8543 this.setState({ 8544 passwordResetEmailIsValid: true 8545 }); 8546 } else { 8547 this.setState({ 8548 passwordResetEmailIsValid: false 8549 }); 8550 } 8551 } 8552 checkIfSignUpEmailIsValid() { 8553 let isValid = this.validateEmail(this.upEmailRef.current.value); 8554 if (isValid) { 8555 this.setState({ 8556 signUpEmailErrorMessage: "" 8557 }); 8558 } else { 8559 this.setState({ 8560 signUpEmailErrorMessage: "The email address is badly formatted" 8561 }); 8562 } 8563 return isValid; 8564 } 8565 checkIfSignUpPasswordIsValid() { 8566 let isValid = false; 8567 if (this.upPwdRef.current.value.length < 6) { 8568 this.setState({ 8569 signUpPasswordErrorMessage: "Password should be at least 6 characters" 8570 }); 8571 } else { 8572 isValid = true; 8573 this.setState({ 8574 signUpPasswordErrorMessage: "" 8575 }); 8576 } 8577 return isValid; 8578 } 8579 checkIfSignInEmailIsValid() { 8580 let isValid = this.validateEmail(this.inEmailRef.current.value); 8581 if (isValid) { 8582 this.setState({ 8583 signInEmailErrorMessage: "" 8584 }); 8585 } else { 8586 this.setState({ 8587 signInEmailErrorMessage: "The email address is badly formatted" 8588 }); 8589 } 8590 return isValid; 8591 }
8592 checkIfSignInPasswordIsValid() { 8593 let isValid = false; 8594 if (this.upPwdRef.current.value.length < 6) { 8595 this.setState({ 8596 signInPasswordErrorMessage: "Password should be at least 6 characters" 8597 }); 8598 } else { 8599 isValid = true; 8600 this.setState({ 8601 signInPasswordErrorMessage: "" 8602 }); 8603 } 8604 return isValid; 8605 } 8606 async sendForgotPosswordEmail() { 8607 let response; 8608 if (this.state.passwordResetEmailIsValid) { 8609 response = await this.Auth.forgotPassword(this.passwordResetEmailRef.current.value); 8610 this.setState({ 8611 passwordResetEmailSended: response.success 8612 }); 8613 this.setState({ 8614 passwordResetEmailIsValid: false 8615 }); 8616 if (!response.success) { 8617 this.props.setNotification(response.errorMessage, true); 8618 } else { 8619 this.props.setNotification(''); 8620 } 8621 } 8622 } 8623 render() { 8624 const loggedInMessage = this.props.currentUser && (this.props.whenSigned ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", null, "Wait a moment...") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("p", null, "Logged in as ", this.props.currentUser.email), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("button", { 8625 id: "logoutButton", 8626 onClick: async () => await this.Auth.signOut() 8627 }, "Sign out"))); 8628 const toggleButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("button", { 8629 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.toggleSign, 8630 onClick: this.toggleForm 8631 }, !this.state.isSignUpForm ? 'I already have an account' : 'Sign up with email'); 8632 const singInStyle = { 8633 position: "absolute", 8634 right: "25px" 8635 }; 8636 const form = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_1___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 8637 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a['openSignUpForm'], 8638 ref: this.signUpRef 8639 }, !this.props.welcomeBack && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("h2", { 8640 testid: "SignUpHeader", 8641 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.header 8642 }, "Sign Up"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("button", { 8643 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.google, 8644 onClick: async () => { 8645 const signed = await this.Auth.googleSignIn(); 8646 if (signed && this.props.whenSigned) this.props.whenSigned(); 8647 } 8648 }, "Continue with Google"), !this.props.welcomeBack && toggleButton, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 8649 className: [_SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.formContainerSignIn, this.state.isSignUpForm ? '' : _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.collapsed].join(' ') 8650 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 8651 className: [_SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.form, _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.signinForm].join(' '), 8652 title: "Log in" 8653 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("input", { 8654 type: "text", 8655 placeholder: "Email", 8656 autoCapitalize: "none", 8657 name: "email", 8658 ref: this.inEmailRef, 8659 onChange: this.changed, 8660 onKeyPress: e => e.key === 'Enter' && this.signIn(), 8661 className: this.state.signInEmailErrorMessage && _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a["input-error-focus"] 8662 })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("span", { 8663 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a['error-message'] 8664 }, this.state.signInEmailErrorMessage), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("input", { 8665 type: "password", 8666 placeholder: "Password", 8667 autoCapitalize: "none", 8668 name: "password", 8669 ref: this.inPwdRef, 8670 onChange: this.changed, 8671 onKeyPress: e => e.key === 'Enter' && this.signIn(), 8672 className: this.state.signInPasswordErrorMessage && _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a["input-error-focus"] 8673 })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("span", { 8674 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a['error-message'] 8675 }, this.state.signInPasswordErrorMessage), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("span", {
8676 onClick: this.showForgotPasswordForm, 8677 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.forgotPasswordButton 8678 }, "Forgot your password?"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("button", { 8679 onClick: this.signIn, 8680 ref: this.inSubmitRef, 8681 className: [_SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.signButton, this.state.submitLoading && _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.loading].join(' '), 8682 style: singInStyle 8683 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("span", { 8684 role: "status" 8685 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("span", null, "Next")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 8686 className: [_SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.formContainerSignUp, !this.state.isSignUpForm ? '' : _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.collapsed, this.props.welcomeBack ? _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.modifyPadding : ""].join(' ') 8687 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 8688 className: [_SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.form, _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.signupForm, this.props.welcomeBack ? _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.hideBorder : ""].join(' '), 8689 title: "Or sign up with your email" 8690 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("input", { 8691 type: "text", 8692 placeholder: "Email", 8693 autoCapitalize: "none", 8694 name: "email", 8695 ref: this.upEmailRef, 8696 onChange: this.changed, 8697 onKeyPress: e => e.key === 'Enter' && this.signUp(), 8698 className: this.state.signUpEmailErrorMessage && _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a["input-error-focus"] 8699 })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("span", { 8700 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a['error-message'] 8701 }, this.state.signUpEmailErrorMessage), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("input", { 8702 type: "password", 8703 placeholder: "Password", 8704 autoCapitalize: "none", 8705 name: "password", 8706 ref: this.upPwdRef, 8707 onChange: this.changed, 8708 onKeyPress: e => e.key === 'Enter' && this.signUp(), 8709 className: this.state.signUpPasswordErrorMessage && _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a["input-error-focus"] 8710 })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("span", { 8711 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a['error-message'] 8712 }, this.state.signUpPasswordErrorMessage), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 8713 className: this.props.welcomeBack ? _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.removePadding : "", 8714 style: { 8715 textAlign: "right" 8716 } 8717 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("label", { 8718 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.termsOfUse 8719 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("input", { 8720 type: "checkbox", 8721 onChange: this.agreeWithTOS 8722 }), "\xA0I agree with Terms of Use"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("br", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("button", { 8723 ref: this.upSubmitRef, 8724 className: [_SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.signButton, this.state.submitLoading && _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.loading].join(' '), 8725 onClick: this.signUp, 8726 disabled: this.state.agreeWithTOS ? '' : 'disabled', 8727 id: "signUp-done" 8728 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("span", { 8729 role: "status" 8730 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("span", null, this.props.welcomeBack ? 'Sign-up' : 'Next'))))))); 8731 const forgotPasswordForm = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 8732 ref: this.forgotPasswordRef, 8733 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a['openForgotPasswordForm'] 8734 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 8735 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a['back'],
8736 onClick: this.showForgotPasswordForm 8737 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("svg", { 8738 xmlns: "http://www.w3.org/2000/svg", 8739 width: "28", 8740 height: "28", 8741 viewBox: "0 0 28 28" 8742 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("path", { 8743 fill: "#151E28", 8744 fillOpacity: ".89", 8745 fillRule: "evenodd", 8746 d: "M10.982 5.866c.587.51.683 1.374.246 1.995l-.094.121L6.784 13H24.5c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5H6.783l4.35 5.018c.51.587.482 1.456-.04 2.01l-.11.106c-.588.508-1.457.48-2.01-.04l-.107-.112-7.35-8.482 7.35-8.482c.543-.626 1.49-.694 2.116-.152z" 8747 }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("h2", { 8748 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.header 8749 }, "Password Reset"), !this.state.passwordResetEmailSended ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 8750 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a['password-reset-subtitle'] 8751 }, "You will receive an email with instructions for how to proceed.") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 8752 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a['password-reset-subtitle'] 8753 }, "Email sent!", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("br", null), "Please check your inbox."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 8754 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a['password-reset-email-input-container'] 8755 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("input", { 8756 type: "text", 8757 placeholder: "Email", 8758 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a['password-reset-email-input'], 8759 ref: this.passwordResetEmailRef, 8760 onChange: this.checkIfPasswordResetEmailIsValid, 8761 onKeyPress: e => e.key === 'Enter' && this.sendForgotPosswordEmail 8762 })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("button", { 8763 ref: this.sendEmailButton, 8764 className: [ 8765 // styles['sendButton'], 8766 this.state.passwordResetEmailIsValid ? _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a['sendButtonReady'] : _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a['sendButton'], this.state.submitLoading && _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.loading].join(' '), 8767 onClick: this.sendForgotPosswordEmail, 8768 disabled: this.state.passwordResetEmailIsValid ? '' : 'disabled' 8769 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("span", { 8770 role: "status" 8771 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("span", null, "Send"))); 8772 const inner = this.state.forgotPassword ? forgotPasswordForm : !this.props.currentUser ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 8773 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.area 8774 }, form, " ") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 8775 className: _SignForm_css__WEBPACK_IMPORTED_MODULE_3___default.a.area 8776 }, loggedInMessage); 8777 return inner; 8778 } 8779} 8780let mapStateToProps = state => { 8781 return { 8782 userId: state.app.userId, 8783 currentUser: state.app.user 8784 }; 8785}; 8786let mapDispatchToProps = dispatch => { 8787 return { 8788 setUserId: userId => dispatch({ 8789 action: "SET_USER_ID", 8790 value: userId 8791 }), 8792 setUser: user => dispatch({ 8793 action: "SET_USER", 8794 value: user 8795 }), 8796 setNotification: (v, error) => dispatch({ 8797 type: "SET_APP_NOTIFICATION", 8798 value: v, 8799 error: !!error 8800 }) 8801 }; 8802}; 8803/* harmony default export */ __webpack_exports__["a"] = (Object(_Auth__WEBPACK_IMPORTED_MODULE_4__[/* withAuth */ "c"])(Object(react_redux__WEBPACK_IMPORTED_MODULE_2__[/* connect */ "b"])(mapStateToProps, mapDispatchToProps, null, { 8804 forwardRef: true 8805})(SignForm))); 8806 8807/***/ }), 8808 8809/***/ "L5Ih": 8810/***/ (function(module, exports, __webpack_require__) { 8811 8812// extracted by mini-css-extract-plugin 8813module.exports = {"logoIcon":"src-components-Logo-Logo__logoIcon--oBxo6","logo":"src-components-Logo-Logo__logo--eleV8","logo-dark":"src-components-Logo-Logo__logo-dark--2XtH3","screenlink-icon-light-container":"src-components-Logo-Logo__screenlink-icon-light-container--yqH89","screenlink-icon-dark-container":"src-components-Logo-Logo__screenlink-icon-dark-container--RNoha"}; 8814 8815/***/ }), 8816 8817/***/ "L6Tz": 8818/***/ (function(module, exports, __webpack_require__) { 8819 8820// extracted by mini-css-extract-plugin 8821module.exports = {"selectDestinationFolderModal":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__selectDestinationFolderModal--IGOJN","title":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__title--LHuql","folderList
8821Container":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__folderListContainer--H+o+c","folderListEmpty":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__folderListEmpty--nORmx","folderListEmptySpan":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__folderListEmptySpan--fzQX1","onlyOneFolderContainer":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__onlyOneFolderContainer--Cx9yL","onlyOneFolder":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__onlyOneFolder---x2YF","buttons":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__buttons--CgPOy","primary":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__primary--3u0Bl","activated":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__activated---KxMn","secondary":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__secondary--kyv3z","sharedFolder":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__sharedFolder--+csnI","folders":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__folders--UWk-K","homeFolder":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__homeFolder--nojqa","currentFolder":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__currentFolder--KgFeS","folder":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__folder--VMXhl","trashFolder":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__trashFolder--Nqd3w","hovered":"src-components-Modal-Content-SelectDestinationFolder-SelectDestinationFolder__hovered--og-qj"}; 8822 8823/***/ }), 8824 8825/***/ "LOKO": 8826/***/ (function(module, exports, __webpack_require__) { 8827 8828// extracted by mini-css-extract-plugin 8829module.exports = {"contextMenu":"contextMenu","item":"item","copyLink":"copyLink","copyImage":"copyImage","shareClip":"shareClip","facebook":"facebook","twitter":"twitter","copyCode":"copyCode","copyCodeSubMenu":"copyCodeSubMenu","uploadOnly":"uploadOnly","print":"print","downloadClip":"downloadClip","png":"png","jpeg":"jpeg","pdf":"pdf","tooltip":"tooltip","login":"login","hidden":"hidden"}; 8830 8831/***/ }), 8832 8833/***/ "M3Bq": 8834/***/ (function(module, exports, __webpack_require__) { 8835 8836// extracted by mini-css-extract-plugin 8837module.exports = {"Select-component":"Select-component","fontFamily":"fontFamily","fontWeight":"fontWeight","hidden":"hidden"}; 8838 8839/***/ }), 8840 8841/***/ "N3ss": 8842/***/ (function(module, __webpack_exports__, __webpack_require__) { 8843 8844"use strict"; 8845/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return COLORS; }); 8846/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return BORDER_COLORS; }); 8847/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return SELECTION_COLORS; }); 8848/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return TIMEZONE_TO_COUNTRY; }); 8849const COLORS = { 8850 black: "#050912", 8851 blue: "#2c8df5", 8852 lightblue: "#3ecbda", 8853 green: "#30d190", 8854 yellow: "#f5af38", 8855 orange: "#ff9052", 8856 red: "#f15f62", 8857 alsored: "#f95f62", 8858 pink: "#f77fb3", 8859 purple: "#8358f0", 8860 gray: "#5a6370", 8861 lightgray: "#f2f7ff", 8862 white: "#ffffff", 8863 transparent: 'transparent' 8864}; 8865const BORDER_COLORS = { 8866 black: "#050912", 8867 blue: "#0074f1", 8868 lightblue: "#1babbb", 8869 green: "#0fb06f", 8870 yellow: "#e4940b", 8871 orange: "#e77536", 8872 red: "#dc3438", 8873 alsored: "#dc3438", 8874 pink: "#d05b8e", 8875 purple: "#6438d4", 8876 gray: "#4c5561", 8877 lightgray: "#c7d4eb", 8878 white: "#d9e7ff", 8879 transparent: 'transparent' 8880}; 8881const SELECTION_COLORS = { 8882 white: "rgba(255,255,255,0.34)", 8883 blue: "rgba(0, 123, 255, 0.34)" 8884}; 8885const TIMEZONE_TO_COUNTRY = { 8886 "Europe/Andorra": "Andorra", 8887 "Asia/Dubai": "United Arab Emirates", 8888 "Asia/Kabul": "Afghanistan", 8889 "Europe/Tirane": "Albania", 8890 "Asia/Yerevan": "Armenia", 8891 "Antarctica/Casey": "Antarctica", 8892 "Antarctica/Davis": "Antarctica", 8893 "Antarctica/Mawson": "Antarctica", 8894 "Antarctica/Palmer": "Antarctica", 8895 "Antarctica/Rothera": "Antarctica", 8896 "Antarctica/Troll": "Antarctica", 8897 "Antarctica/Vostok": "Antarctica", 8898 "America/Argentina/Buenos_Aires": "Argentina", 8899 "America/Argentina/Cordoba": "Argentina", 8900 "America/Argentina/Salta": "Argentina", 8901 "America/Argentina/Jujuy": "Argentina", 8902 "America/Argentina/Tucuman": "Argentina", 8903 "America/Argentina/Catamarca": "Argentina", 8904 "America/Argentina/La_Rioja": "Argentina", 8905 "America/Argentina/San_Juan": "Argentina", 8906 "America/Argentina/Mendoza": "Argentina", 8907 "America/Argentina/San_Luis": "Argentina", 8908 "America/Argentina/Rio_Gallegos": "Argentina", 8909 "America/Argentina/Ushuaia": "Argentina", 8910 "Pacific/Pago_Pago": "Samoa (American)",
8911 "Europe/Vienna": "Austria", 8912 "Australia/Lord_Howe": "Australia", 8913 "Antarctica/Macquarie": "Australia", 8914 "Australia/Hobart": "Australia", 8915 "Australia/Melbourne": "Australia", 8916 "Australia/Sydney": "Australia", 8917 "Australia/Broken_Hill": "Australia", 8918 "Australia/Brisbane": "Australia", 8919 "Australia/Lindeman": "Australia", 8920 "Australia/Adelaide": "Australia", 8921 "Australia/Darwin": "Australia", 8922 "Australia/Perth": "Australia", 8923 "Australia/Eucla": "Australia", 8924 "Asia/Baku": "Azerbaijan", 8925 "America/Barbados": "Barbados", 8926 "Asia/Dhaka": "Bangladesh", 8927 "Europe/Brussels": "Belgium", 8928 "Europe/Sofia": "Bulgaria", 8929 "Atlantic/Bermuda": "Bermuda", 8930 "Asia/Brunei": "Brunei", 8931 "America/La_Paz": "Bolivia", 8932 "America/Noronha": "Brazil", 8933 "America/Belem": "Brazil", 8934 "America/Fortaleza": "Brazil", 8935 "America/Recife": "Brazil", 8936 "America/Araguaina": "Brazil", 8937 "America/Maceio": "Brazil", 8938 "America/Bahia": "Brazil", 8939 "America/Sao_Paulo": "Brazil", 8940 "America/Campo_Grande": "Brazil", 8941 "America/Cuiaba": "Brazil", 8942 "America/Santarem": "Brazil", 8943 "America/Porto_Velho": "Brazil", 8944 "America/Boa_Vista": "Brazil", 8945 "America/Manaus": "Brazil", 8946 "America/Eirunepe": "Brazil", 8947 "America/Rio_Branco": "Brazil", 8948 "Asia/Thimphu": "Bhutan", 8949 "Europe/Minsk": "Belarus", 8950 "America/Belize": "Belize", 8951 "America/St_Johns": "Canada", 8952 "America/Halifax": "Canada", 8953 "America/Glace_Bay": "Canada", 8954 "America/Moncton": "Canada", 8955 "America/Goose_Bay": "Canada", 8956 "America/Toronto": "Canada", 8957 "America/Nipigon": "Canada", 8958 "America/Thunder_Bay": "Canada", 8959 "America/Iqaluit": "Canada", 8960 "America/Pangnirtung": "Canada", 8961 "America/Winnipeg": "Canada", 8962 "America/Rainy_River": "Canada", 8963 "America/Resolute": "Canada", 8964 "America/Rankin_Inlet": "Canada", 8965 "America/Regina": "Canada", 8966 "America/Swift_Current": "Canada", 8967 "America/Edmonton": "Canada", 8968 "America/Cambridge_Bay": "Canada", 8969 "America/Yellowknife": "Canada", 8970 "America/Inuvik": "Canada", 8971 "America/Dawson_Creek": "Canada", 8972 "America/Fort_Nelson": "Canada", 8973 "America/Whitehorse": "Canada", 8974 "America/Dawson": "Canada", 8975 "America/Vancouver": "Canada", 8976 "Indian/Cocos": "Cocos (Keeling) Islands", 8977 "Europe/Zurich": "Switzerland", 8978 "Africa/Abidjan": "Côte d'Ivoire", 8979 "Pacific/Rarotonga": "Cook Islands", 8980 "America/Santiago": "Chile", 8981 "America/Punta_Arenas": "Chile", 8982 "Pacific/Easter": "Chile", 8983 "Asia/Shanghai": "China", 8984 "Asia/Urumqi": "China", 8985 "America/Bogota": "Colombia", 8986 "America/Costa_Rica": "Costa Rica", 8987 "America/Havana": "Cuba", 8988 "Atlantic/Cape_Verde": "Cape Verde", 8989 "Indian/Christmas": "Christmas Island", 8990 "Asia/Nicosia": "Cyprus", 8991 "Asia/Famagusta": "Cyprus", 8992 "Europe/Prague": "Czech Republic", 8993 "Europe/Berlin": "Germany", 8994 "Europe/Copenhagen": "Denmark", 8995 "America/Santo_Domingo": "Dominican Republic", 8996 "Africa/Algiers": "Algeria", 8997 "America/Guayaquil": "Ecuador", 8998 "Pacific/Galapagos": "Ecuador", 8999 "Europe/Tallinn": "Estonia", 9000 "Africa/Cairo": "Egypt", 9001 "Africa/El_Aaiun": "Western Sahara", 9002 "Europe/Madrid": "Spain", 9003 "Africa/Ceuta": "Spain", 9004 "Atlantic/Canary": "Spain", 9005 "Europe/Helsinki": "Finland", 9006 "Pacific/Fiji": "Fiji", 9007 "Atlantic/Stanley": "Falkland Islands", 9008 "Pacific/Chuuk": "Micronesia", 9009 "Pacific/Pohnpei": "Micronesia", 9010 "Pacific/Kosrae": "Micronesia", 9011 "Atlantic/Faroe": "Faroe Islands", 9012 "Europe/Paris": "France", 9013 "Europe/London": "Britain (UK)", 9014 "Asia/Tbilisi": "Georgia", 9015 "America/Cayenne": "French Guiana", 9016 "Europe/Gibraltar": "Gibraltar", 9017 "America/Nuuk": "Greenland", 9018 "America/Danmarkshavn": "Greenland", 9019 "America/Scoresbysund": "Greenland", 9020 "America/Thule": "Greenland", 9021 "Europe/Athens": "Greece", 9022 "Atlantic/South_Georgia": "South Georgia & the South Sandwich Islands", 9023 "America/Guatemala": "Guatemala", 9024 "Pacific/Guam": "Guam", 9025 "Africa/Bissau": "Guinea-Bissau", 9026 "America/Guyana": "Guyana", 9027 "Asia/Hong_Kong": "Hong Kong", 9028 "America/Tegucigalpa": "Honduras", 9029 "America/Port-au-Prince": "Haiti", 9030 "Europe/Budapest": "Hungary", 9031 "Asia/Jakarta": "Indonesia", 9032 "Asia/Pontianak": "Indonesia", 9033 "Asia/Makassar": "Indonesia", 9034 "Asia/Jayapura": "Indonesia", 9035 "Europe/Dublin": "Ireland", 9036 "Asia/Jerusalem": "Israel", 9037 "Asia/Kolkata": "India", 9038 "Asia/Calcutta": "India", 9039 "Indian/Chagos": "British Indian Ocean Territory", 9040 "Asia/Baghdad": "Iraq", 9041 "Asia/Tehran": "Iran", 9042 "Atlantic/Reykjavik": "Iceland", 9043 "Europe/Rome": "Italy", 9044 "America/Jamaica": "Jamaica", 9045 "Asia/Amman": "Jordan", 9046 "Asia/Tokyo": "Japan", 9047 "Africa/Nairobi": "Kenya", 9048 "Asia/Bishkek": "Kyrgyzstan", 9049 "Pacific/Tarawa": "Kiribati", 9050 "Pacific/Kanton": "Kiribati", 9051 "Pacific/Kiritimati": "Kiribati", 9052 "Asia/Pyongyang": "Korea (North)", 9053 "Asia/Seoul": "Korea (South)", 9054 "Asia/Almaty": "Kazakhstan", 9055 "Asia/Qyzylorda": "Kazakhstan", 9056 "Asia/Qostanay": "Kazakhstan", 9057 "Asia/Aqtobe": "Kazakhstan", 9058 "Asia/Aqtau": "Kazakhstan", 9059 "Asia/Atyrau": "Kazakhstan", 9060 "Asia/Oral": "Kazakhstan", 9061 "Asia/Beirut": "Lebanon", 9062 "Asia/Colombo": "Sri Lanka", 9063 "Africa/Monrovia": "Liberia", 9064 "Europe/Vilnius": "Lithuania", 9065 "Europe/Luxembourg": "Luxembourg", 9066 "Europe/Riga": "Latvia", 9067 "Africa/Tripoli": "Libya", 9068 "Africa/Casablanca": "Morocco", 9069 "Europe/Monaco": "Monaco", 9070 "Europe/Chisinau": "Moldova", 9071 "Pacific/Majuro": "Marshall Islands", 9072 "Pacific/Kwajalein": "Marshall Islands", 9073 "Asia/Yangon": "Myanmar (Burma)", 9074 "Asia/Ulaanbaatar": "Mongolia", 9075 "Asia/Hovd": "Mongolia", 9076 "Asia/Choibalsan": "Mongolia", 9077 "Asia/Macau": "Macau", 9078 "America/Martinique": "Martinique", 9079 "Europe/Malta": "Malta", 9080 "Indian/Mauritius": "Mauritius", 9081 "Indian/Maldives": "Maldives", 9082 "America/Mexico_City": "Mexico", 9083 "America/Cancun": "Mexico", 9084 "America/Merida": "Mexico", 9085 "America/Monterrey": "Mexico", 9086 "America/Matamoros": "Mexico", 9087 "America/Mazatlan": "Mexico", 9088 "America/Chihuahua": "Mexico", 9089 "America/Ojinaga": "Mexico", 9090 "America/Hermosillo": "Mexico", 9091 "America/Tijuana": "Mexico", 9092 "America/Bahia_Banderas": "Mexico", 9093 "Asia/Kuala_Lumpur": "Malaysia", 9094 "Asia/Kuching": "Malaysia", 9095 "Africa/Maputo": "Mozambique", 9096 "Africa/Windhoek": "Namibia", 9097 "Pacific/Noumea": "New Caledonia", 9098 "Pacific/Norfolk": "Norfolk Island", 9099 "Africa/Lagos": "Nigeria", 9100 "America/Managua": "Nicaragua", 9101 "Europe/Amsterdam": "Netherlands", 9102 "Europe/Oslo": "Norway", 9103 "Asia/Kathmandu": "Nepal", 9104 "Pacific/Nauru": "Nauru", 9105 "Pacific/Niue": "Niue", 9106 "Pacific/Auckland": "New Zealand", 9107 "Pacific/Chatham": "New Zealand", 9108 "America/Panama": "Panama", 9109 "America/Lima": "Peru", 9110 "Pacific/Tahiti": "French Polynesia", 9111 "Pacific/Marquesas": "French Polynesia", 9112 "Pacific/Gambier": "French Polynesia", 9113 "Pacific/Port_Moresby": "Papua New Guinea", 9114 "Pacific/Bougainville": "Papua New Guinea", 9115 "Asia/Manila": "Philippines", 9116 "Asia/Karachi": "Pakistan", 9117 "Europe/Warsaw": "Poland", 9118 "America/Miquelon": "St Pierre & Miquelon", 9119 "Pacific/Pitcairn": "Pitcairn", 9120 "America/Puerto_Rico": "Puerto Rico", 9121 "Asia/Gaza": "Palestine", 9122 "Asia/Hebron": "Palestine", 9123 "Europe/Lisbon": "Portugal", 9124 "Atlantic/Madeira": "Portugal", 9125 "Atlantic/Azores": "Portugal", 9126 "Pacific/Palau": "Palau", 9127 "America/Asuncion": "Paraguay", 9128 "Asia/Qatar": "Qatar", 9129 "Indian/Reunion": "Réunion", 9130 "Europe/Bucharest": "Romania", 9131 "Europe/Belgrade": "Serbia", 9132 "Europe/Kaliningrad": "Russia", 9133 "Europe/Moscow": "Russia", 9134 "Europe/Simferopol": "Russia", 9135 "Europe/Kirov": "Russia", 9136 "Europe/Volgograd": "Russia", 9137 "Europe/Astrakhan": "Russia", 9138 "Europe/Saratov": "Russia", 9139 "Europe/Ulyanovsk": "Russia", 9140 "Europe/Samara": "Russia", 9141 "Asia/Yekaterinburg": "Russia", 9142 "Asia/Omsk": "Russia", 9143 "Asia/Novosibirsk": "Russia", 9144 "Asia/Barnaul": "Russia", 9145 "Asia/Tomsk": "Russia", 9146 "Asia/Novokuznetsk": "Russia", 9147 "Asia/Krasnoyarsk": "Russia", 9148 "Asia/Irkutsk": "Russia", 9149 "Asia/Chita": "Russia", 9150 "Asia/Yakutsk": "Russia", 9151 "Asia/Khandyga": "Russia", 9152 "Asia/Vladivostok": "Russia", 9153 "Asia/Ust-Nera": "Russia", 9154 "Asia/Magadan": "Russia", 9155 "Asia/Sakhalin": "Russia", 9156 "Asia/Srednekolymsk": "Russia", 9157 "Asia/Kamchatka": "Russia", 9158 "Asia/Anadyr": "Russia", 9159 "Asia/Riyadh": "Saudi Arabia", 9160 "Pacific/Guadalcanal": "Solomon Islands", 9161 "Indian/Mahe": "Seychelles", 9162 "Africa/Khartoum": "Sudan",
9163 "Europe/Stockholm": "Sweden", 9164 "Asia/Singapore": "Singapore", 9165 "America/Paramaribo": "Suriname", 9166 "Africa/Juba": "South Sudan", 9167 "Africa/Sao_Tome": "Sao Tome & Principe", 9168 "America/El_Salvador": "El Salvador", 9169 "Asia/Damascus": "Syria", 9170 "America/Grand_Turk": "Turks & Caicos Is", 9171 "Africa/Ndjamena": "Chad", 9172 "Indian/Kerguelen": "French Southern & Antarctic Lands", 9173 "Asia/Bangkok": "Thailand", 9174 "Asia/Dushanbe": "Tajikistan", 9175 "Pacific/Fakaofo": "Tokelau", 9176 "Asia/Dili": "East Timor", 9177 "Asia/Ashgabat": "Turkmenistan", 9178 "Africa/Tunis": "Tunisia", 9179 "Pacific/Tongatapu": "Tonga", 9180 "Europe/Istanbul": "Turkey", 9181 "Pacific/Funafuti": "Tuvalu", 9182 "Asia/Taipei": "Taiwan", 9183 "Europe/Kiev": "Ukraine", 9184 "Europe/Uzhgorod": "Ukraine", 9185 "Europe/Zaporozhye": "Ukraine", 9186 "Pacific/Wake": "US minor outlying islands", 9187 "America/New_York": "United States", 9188 "America/Detroit": "United States", 9189 "America/Kentucky/Louisville": "United States", 9190 "America/Kentucky/Monticello": "United States", 9191 "America/Indiana/Indianapolis": "United States", 9192 "America/Indiana/Vincennes": "United States", 9193 "America/Indiana/Winamac": "United States", 9194 "America/Indiana/Marengo": "United States", 9195 "America/Indiana/Petersburg": "United States", 9196 "America/Indiana/Vevay": "United States", 9197 "America/Chicago": "United States", 9198 "America/Indiana/Tell_City": "United States", 9199 "America/Indiana/Knox": "United States", 9200 "America/Menominee": "United States", 9201 "America/North_Dakota/Center": "United States", 9202 "America/North_Dakota/New_Salem": "United States", 9203 "America/North_Dakota/Beulah": "United States", 9204 "America/Denver": "United States", 9205 "America/Boise": "United States", 9206 "America/Phoenix": "United States", 9207 "America/Los_Angeles": "United States", 9208 "America/Anchorage": "United States", 9209 "America/Juneau": "United States", 9210 "America/Sitka": "United States", 9211 "America/Metlakatla": "United States", 9212 "America/Yakutat": "United States", 9213 "America/Nome": "United States", 9214 "America/Adak": "United States", 9215 "Pacific/Honolulu": "United States", 9216 "America/Montevideo": "Uruguay", 9217 "Asia/Samarkand": "Uzbekistan", 9218 "Asia/Tashkent": "Uzbekistan", 9219 "America/Caracas": "Venezuela", 9220 "Asia/Ho_Chi_Minh": "Vietnam", 9221 "Pacific/Efate": "Vanuatu", 9222 "Pacific/Wallis": "Wallis & Futuna", 9223 "Pacific/Apia": "Samoa (western)", 9224 "Africa/Johannesburg": "South Africa", 9225 "America/Antigua": "Antigua & Barbuda", 9226 "America/Anguilla": "Anguilla", 9227 "Africa/Luanda": "Angola", 9228 "Antarctica/McMurdo": "Antarctica", 9229 "Antarctica/DumontDUrville": "Antarctica", 9230 "Antarctica/Syowa": "Antarctica", 9231 "America/Aruba": "Aruba", 9232 "Europe/Mariehamn": "à land Islands", 9233 "Europe/Sarajevo": "Bosnia & Herzegovina", 9234 "Africa/Ouagadougou": "Burkina Faso", 9235 "Asia/Bahrain": "Bahrain", 9236 "Africa/Bujumbura": "Burundi", 9237 "Africa/Porto-Novo": "Benin", 9238 "America/St_Barthelemy": "St Barthelemy", 9239 "America/Kralendijk": "Caribbean NL", 9240 "America/Nassau": "Bahamas", 9241 "Africa/Gaborone": "Botswana", 9242 "America/Blanc-Sablon": "Canada", 9243 "America/Atikokan": "Canada", 9244 "America/Creston": "Canada", 9245 "Africa/Kinshasa": "Congo (Dem. Rep.)", 9246 "Africa/Lubumbashi": "Congo (Dem. Rep.)", 9247 "Africa/Bangui": "Central African Rep.", 9248 "Africa/Brazzaville": "Congo (Rep.)", 9249 "Africa/Douala": "Cameroon", 9250 "America/Curacao": "Curaçao", 9251 "Europe/Busingen": "Germany", 9252 "Africa/Djibouti": "Djibouti", 9253 "America/Dominica": "Dominica", 9254 "Africa/Asmara": "Eritrea", 9255 "Africa/Addis_Ababa": "Ethiopia", 9256 "Africa/Libreville": "Gabon", 9257 "America/Grenada": "Grenada", 9258 "Europe/Guernsey": "Guernsey", 9259 "Africa/Accra": "Ghana", 9260 "Africa/Banjul": "Gambia", 9261 "Africa/Conakry": "Guinea", 9262 "America/Guadeloupe": "Guadeloupe", 9263 "Africa/Malabo": "Equatorial Guinea", 9264 "Europe/Zagreb": "Croatia", 9265 "Europe/Isle_of_Man": "Isle of Man", 9266 "Europe/Jersey": "Jersey", 9267 "Asia/Phnom_Penh": "Cambodia", 9268 "Indian/Comoro": "Comoros", 9269 "America/St_Kitts": "St Kitts & Nevis", 9270 "Asia/Kuwait": "Kuwait", 9271 "America/Cayman": "Cayman Islands", 9272 "Asia/Vientiane": "Laos", 9273 "America/St_Lucia": "St Lucia", 9274 "Europe/Vaduz": "Liechtenstein", 9275 "Africa/Maseru": "Lesotho", 9276 "Europe/Podgorica": "Montenegro", 9277 "America/Marigot": "St Martin (French)", 9278 "Indian/Antananarivo": "Madagascar", 9279 "Europe/Skopje": "North Macedonia", 9280 "Africa/Bamako": "Mali", 9281 "Pacific/Saipan": "Northern Mariana Islands", 9282 "Africa/Nouakchott": "Mauritania", 9283 "America/Montserrat": "Montserrat", 9284 "Africa/Blantyre": "Malawi", 9285 "Africa/Niamey": "Niger", 9286 "Asia/Muscat": "Oman",
9287 "Africa/Kigali": "Rwanda", 9288 "Atlantic/St_Helena": "St Helena", 9289 "Europe/Ljubljana": "Slovenia", 9290 "Arctic/Longyearbyen": "Svalbard & Jan Mayen", 9291 "Europe/Bratislava": "Slovakia", 9292 "Africa/Freetown": "Sierra Leone", 9293 "Europe/San_Marino": "San Marino", 9294 "Africa/Dakar": "Senegal", 9295 "Africa/Mogadishu": "Somalia", 9296 "America/Lower_Princes": "St Maarten (Dutch)", 9297 "Africa/Mbabane": "Eswatini (Swaziland)", 9298 "Africa/Lome": "Togo", 9299 "America/Port_of_Spain": "Trinidad & Tobago", 9300 "Africa/Dar_es_Salaam": "Tanzania", 9301 "Africa/Kampala": "Uganda", 9302 "Pacific/Midway": "US minor outlying islands", 9303 "Europe/Vatican": "Vatican City", 9304 "America/St_Vincent": "St Vincent", 9305 "America/Tortola": "Virgin Islands (UK)", 9306 "America/St_Thomas": "Virgin Islands (US)", 9307 "Asia/Aden": "Yemen", 9308 "Indian/Mayotte": "Mayotte", 9309 "Africa/Lusaka": "Zambia", 9310 "Africa/Harare": "Zimbabwe" 9311}; 9312 9313/***/ }), 9314 9315/***/ "NLkX": 9316/***/ (function(module, __webpack_exports__, __webpack_require__) { 9317 9318"use strict"; 9319/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Checkbox; }); 9320/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("q1tI"); 9321/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 9322/* harmony import */ var _Checkbox_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("8Zus"); 9323/* harmony import */ var _Checkbox_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_Checkbox_css__WEBPACK_IMPORTED_MODULE_1__); 9324 9325 9326function Checkbox(props) { 9327 const [checked, toggleCheckbox] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(props.checked); 9328 const [indeterminate, setIndeterminate] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(props.indeterminate); 9329 Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { 9330 toggleCheckbox(props.checked); 9331 }, [props.checked]); 9332 Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { 9333 setIndeterminate(props.indeterminate); 9334 }, [props.indeterminate]); 9335 let changed = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(e => { 9336 let setTo = !checked; 9337 toggleCheckbox(setTo); 9338 props.onClick(setTo); 9339 }); 9340 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 9341 className: [_Checkbox_css__WEBPACK_IMPORTED_MODULE_1___default.a.checkbox, indeterminate ? _Checkbox_css__WEBPACK_IMPORTED_MODULE_1___default.a.indeterminate : '', checked ? _Checkbox_css__WEBPACK_IMPORTED_MODULE_1___default.a.checked : ''].join(' '), 9342 onClick: changed 9343 }); 9344} 9345 9346/***/ }), 9347 9348/***/ "NNfZ": 9349/***/ (function(module, __webpack_exports__, __webpack_require__) { 9350 9351"use strict"; 9352 9353// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom.iterable.js 9354var web_dom_iterable = __webpack_require__("rGqo"); 9355 9356// EXTERNAL MODULE: ./src/editor/mods/constants.js 9357var constants = __webpack_require__("N3ss"); 9358 9359// CONCATENATED MODULE: ./src/editor/mods/font.detect.js 9360let FontDetector = function () { 9361 // a font will be compared against all the three default fonts. 9362 // and if it doesn't match all 3 then that font is not available. 9363 var baseFonts = ['monospace', 'sans-serif', 'serif']; 9364 9365 //we use m or w because these two characters take up the maximum width. 9366 // And we use a LLi so that the same matching fonts can get separated 9367 var testString = "mmmmmmmmmmlli"; 9368 9369 //we test using 72px font size, we may use any size. I guess larger the better. 9370 var testSize = '72px';
9371 var h = document.getElementsByTagName("body")[0]; 9372 9373 // create a SPAN in the document to get the width of the text we use to test 9374 var s = document.createElement("span"); 9375 s.style.fontSize = testSize; 9376 s.innerHTML = testString; 9377 var defaultWidth = {}; 9378 var defaultHeight = {}; 9379 for (var index in baseFonts) { 9380 //get the default width for the three base fonts 9381 s.style.fontFamily = baseFonts[index]; 9382 h.appendChild(s); 9383 defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font 9384 defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font 9385 h.removeChild(s); 9386 } 9387 function detect(font) { 9388 var detected = false; 9389 for (var index in baseFonts) { 9390 s.style.fontFamily = "\"" + font + "\"" + "," + baseFonts[index]; // name of the font along with the base font for fallback. 9391 h.appendChild(s); 9392 var matched = s.offsetWidth !== defaultWidth[baseFonts[index]] || s.offsetHeight !== defaultHeight[baseFonts[index]]; 9393 h.removeChild(s); 9394 detected = detected || matched; 9395 } 9396 return detected; 9397 } 9398 this.detect = detect; 9399}; 9400let fontDetect = font => ['monospace', 'sans-serif', 'serif', "Arial", "Arial Black", "Avant Garde", "Bookman", "Helvetica", "Courier New", "Comic Sans MS", "Garamond", "Georgia", "Times New Roman", "Trebuchet MS", "Impact", "Palatino", "Verdana"].includes(font); 9401document.addEventListener("DOMContentLoaded", () => { 9402 fontDetect = new FontDetector().detect; 9403}); 9404/* harmony default export */ var font_detect = (fontDetect); 9405// EXTERNAL MODULE: ./src/editor/mods/font.list.js 9406var font_list = __webpack_require__("HpD1"); 9407 9408// CONCATENATED MODULE: ./src/editor/mods/tools.settings.js 9409 9410 9411 9412 9413const embedMode = "embeds" === 'embeds'; 9414function toolsDefaults() { 9415 // properties 9416 let fontsOptions = (fonts => { 9417 return fonts.map((font, i) => { 9418 if (font_detect(font)) return { 9419 value: i, 9420 caption: font 9421 };else return false; 9422 }).filter(option => option); 9423 })(font_list["a" /* default */]); 9424 let radiusLength = { 9425 name: "radius", 9426 caption: "Amount", 9427 min: 10, 9428 value: 20, 9429 max: 30, 9430 type: "slider" 9431 }; 9432 let blurRadiusLength = { 9433 name: "radius", 9434 caption: "Amount", 9435 min: 10, 9436 value: 20, 9437 max: 30, 9438 type: "slider" 9439 }; 9440 let strokeWidth = { 9441 // strokeWidth 9442 name: "strokeWidth", 9443 caption: "Thickness", 9444 min: 5, 9445 value: 10, 9446 max: 20, 9447 type: "slider" 9448 }; 9449 let color = { 9450 caption: "", 9451 name: "stroke", 9452 type: "color", 9453 value: constants["b" /* COLORS */].blue 9454 }; 9455 let opacity = { 9456 // opacity 9457 caption: "Amount", 9458 name: "opacity", 9459 value: 1, 9460 type: "slider", 9461 min: 0.01, 9462 max: 1, 9463 mul: 100 9464 }; 9465 9466 // tools 9467 9468 let blur = { 9469 bars: [{ 9470 caption: "Blur", 9471 key: "blur", 9472 inner: [{ 9473 ...blurRadiusLength 9474 }] 9475 } 9476 // , { 9477 // caption: "Opacity", 9478 // key: "opacity", 9479 // inner: [ 9480 // { ...opacity } 9481 // ] 9482 // } 9483 ] 9484 }; 9485 let line = { 9486 // start line 9487 bars: [{ 9488 // stroke 9489 caption: "Color", 9490 inner: [{ 9491 ...strokeWidth 9492 }, { 9493 ...color, 9494 value: constants["b" /* COLORS */].gray, 9495 name: "stroke" 9496 }], 9497 type: "group" 9498 }, { 9499 caption: "Opacity", 9500 key: "opacity", 9501 inner: [{ 9502 ...opacity 9503 }], 9504 type: "group" 9505 }] 9506 // finish line 9507 }; 9508 let highlighter = { 9509 // start highlighter 9510 bars: [{ 9511 caption: "Highlighter", 9512 inner: [{ 9513 ...strokeWidth, 9514 value: 24, 9515 name: "strokeWidth", 9516 min: 15, 9517 max: 40 9518 }, { 9519 ...color, 9520 value: constants["b" /* COLORS */].yellow, 9521 name: "stroke" 9522 }, { 9523 ...opacity, 9524 min: 0.15, 9525 max: 0.8, 9526 value: 0.4 9527 }] 9528 }] 9529 // end highlighter 9530 }; 9531 let pen = { 9532 // start pen 9533 bars: [{ 9534 caption: "Pen", 9535 inner: [{ 9536 ...strokeWidth, 9537 value: 10, 9538 name: "strokeWidth", 9539 min: 5, 9540 max: 20 9541 }, { 9542 ...color, 9543 value: constants["b" /* COLORS */].red, 9544 name: "stroke" 9545 }, { 9546 ...opacity 9547 }] 9548 }] 9549 // end pen 9550 }; 9551 let rect = { 9552 // start rect 9553 bars: [{ 9554 caption: "Rectangle", 9555 inner: [{ 9556 ...strokeWidth, 9557 min: 5, 9558 max: 30, 9559 value: 13 9560 }, {
9561 // label (Background enable/disable) 9562 caption: "Background", 9563 name: "disabledFill", 9564 type: "label", 9565 value: true 9566 }, { 9567 ...color, 9568 value: constants["b" /* COLORS */].red, 9569 name: "fill" 9570 }, { 9571 ...color, 9572 value: constants["b" /* COLORS */].red, 9573 name: "stroke" 9574 }, { 9575 ...opacity 9576 }] 9577 } 9578 // { 9579 // // stroke 9580 // caption: "Border", 9581 // disabled: false, 9582 // name: "disabledStrokeWidth", 9583 // inner: [ 9584 // { ...strokeWidth }, 9585 // { 9586 // ...color, 9587 // value: COLORS.red, 9588 // name: "stroke" 9589 // }, 9590 // { ...opacity } 9591 // ] 9592 // } 9593 ] 9594 // finish rect 9595 }; 9596 let crop = { 9597 // start rect 9598 bars: [{ 9599 // fill 9600 caption: "Background", 9601 disabled: true, 9602 name: "disabledFill", 9603 inner: [{ 9604 ...color, 9605 value: "rgba(255,255,255,0.5)", 9606 name: "fill" 9607 }] 9608 }, { 9609 // stroke 9610 caption: "Border", 9611 disabled: false, 9612 name: "disabledStrokeWidth", 9613 inner: [{ 9614 ...strokeWidth, 9615 value: 2 9616 }, { 9617 ...color, 9618 value: constants["b" /* COLORS */].white, 9619 name: "stroke" 9620 }] 9621 }, { 9622 // opacity 9623 caption: "Opacity", 9624 key: "opacity", 9625 inner: [{ 9626 ...opacity 9627 }] 9628 }] 9629 // finish crop 9630 }; 9631 let img = { 9632 bars: [] 9633 }; 9634 let arrowtext = { 9635 // start arrowtext 9636 type: "complex", 9637 tools: ["arrow", "text"] 9638 // finish arrowtext 9639 }; 9640 let arrow = { 9641 // start arrow 9642 bars: [{ 9643 // stroke 9644 caption: "Arrow", 9645 inner: [{ 9646 ...strokeWidth, 9647 min: 5, 9648 max: 30, 9649 value: 10 9650 }, { 9651 ...color, 9652 value: constants["b" /* COLORS */].red, 9653 name: "stroke" 9654 }, { 9655 ...opacity 9656 }] 9657 }] 9658 // finish arrow 9659 }; 9660 let ellipse = { 9661 // start of an ellipse 9662 bars: [{ 9663 caption: "Circle", 9664 inner: [{ 9665 ...strokeWidth, 9666 min: 5, 9667 max: 30, 9668 value: 13 9669 }, { 9670 // label (Background enable/disable) 9671 caption: "Background", 9672 name: "disabledFill", 9673 type: "label", 9674 value: true 9675 }, { 9676 ...color, 9677 value: constants["b" /* COLORS */].red, 9678 name: "fill" 9679 }, { 9680 ...color, 9681 value: constants["b" /* COLORS */].red, 9682 name: "stroke" 9683 }, { 9684 ...opacity 9685 }] 9686 } 9687 // { 9688 // // stroke 9689 // caption: "Border", 9690 // disabled: false, 9691 // name: "disabledStrokeWidth", 9692 // inner: [ 9693 // { ...strokeWidth }, 9694 // { 9695 // ...color, 9696 // value: COLORS.red, 9697 // name: "stroke" 9698 // }, 9699 // { ...opacity } 9700 // ], 9701 // type: "group" 9702 // } 9703 ] 9704 // finish of an ellipse 9705 }; 9706 let triangle = { 9707 // start triangle 9708 bars: [{ 9709 // fill 9710 caption: "Background", 9711 disabled: true, 9712 name: "disabledFill", 9713 inner: [{ 9714 ...color, 9715 name: "fill" 9716 }], 9717 type: "group" 9718 }, { 9719 // stroke 9720 caption: "Border", 9721 disabled: false, 9722 name: "disabledStrokeWidth", 9723 inner: [{ 9724 ...strokeWidth 9725 }, { 9726 ...color, 9727 value: constants["b" /* COLORS */].red, 9728 name: "stroke" 9729 }], 9730 type: "group" 9731 }, { 9732 caption: "Opacity", 9733 key: "opacity", 9734 inner: [{ 9735 ...opacity 9736 }], 9737 type: "group" 9738 }] 9739 // end triangle 9740 }; 9741 let text = { 9742 // start text 9743 bars: [{ 9744 caption: "Textbox", 9745 inner: [{ 9746 // fontFamily 9747 caption: "Type", 9748 name: "fontFamily", 9749 options: fontsOptions, 9750 type: "select", 9751 value: 0 // Arial 9752 }, { 9753 // weight 9754 caption: "Weight", 9755 name: "fontWeight", 9756 options: [{ 9757 value: "lighter", 9758 caption: "Thin" 9759 }, { 9760 value: "normal", 9761 caption: "Normal" 9762 }, { 9763 value: "bold", 9764 caption: "Bold" 9765 }], 9766 value: "bold", 9767 type: "select" 9768 }, { 9769 // fontSize 9770 caption: "Size", 9771 name: "fontSize", 9772 value: 28, 9773 min: 3, 9774 max: 120, 9775 type: "tick" 9776 }, { 9777 // align 9778 caption: "Align", 9779 name: "textAlign", 9780 type: "align", 9781 value: "left" 9782 }, {
9783 // label (Background enable/disable) 9784 caption: "Background", 9785 name: "textBgColorDisabled", 9786 type: "label", 9787 value: false 9788 }, { 9789 // fill 9790 caption: "", 9791 name: "fill", 9792 type: "color", 9793 value: constants["b" /* COLORS */].white 9794 }, { 9795 // backgroundColor 9796 caption: "", 9797 name: "backgroundColor", 9798 type: "color", 9799 value: constants["b" /* COLORS */].black 9800 }] 9801 } 9802 9803 // { 9804 9805 // // stroke 9806 // caption: "Stroke", 9807 // inner: [ 9808 // { 9809 // ...color, 9810 // name: "stroke" 9811 // } 9812 // ], 9813 // type: "group", 9814 // } 9815 /* { 9816 9817 // fill 9818 caption: "Text Color", 9819 type: "group", 9820 inner: [ 9821 { 9822 ...color, 9823 value: "black", 9824 name: "fill" 9825 } 9826 ] 9827 }, { 9828 9829 // backgroundColor 9830 caption: "Background", 9831 disabled: true, 9832 name: "disabledBackgroundColor", 9833 inner: [ 9834 { 9835 ...color, 9836 value: "white", 9837 name: "backgroundColor" 9838 } 9839 ] 9840 }, 9841 // { 9842 9843 9844 // caption: "Opacity", 9845 // key:"opacity", 9846 // inner: [ 9847 // { ...opacity } 9848 // ], 9849 // type: "group" 9850 // }, 9851 { 9852 9853 caption: "Character", 9854 key:"character", 9855 inner: [{ 9856 9857 // fontFamily 9858 caption: "Type", 9859 name: "fontFamily", 9860 options: fontsOptions, 9861 type: "select", 9862 value: 0 // Arial 9863 }, { 9864 9865 // weight 9866 caption: "Weight", 9867 name: "fontWeight", 9868 options: [ 9869 { 9870 value: "lighter", 9871 caption: "Thin" 9872 }, { 9873 value: "normal", 9874 caption: "Normal" 9875 }, { 9876 value: "bold", 9877 caption: "Bold" 9878 } 9879 ], 9880 value: "bold", 9881 type: "select" 9882 }, { 9883 9884 // fontSize 9885 caption: "Size", 9886 name: "fontSize", 9887 value: 24, 9888 min: 4, 9889 max: 120, 9890 type: "tick" 9891 } 9892 ], 9893 }, { 9894 9895 caption: "Paragraph", 9896 key:"paragraph", 9897 inner: [ 9898 { 9899 9900 // align 9901 caption: "Align", 9902 name: "textAlign", 9903 type: "align", 9904 value: "left" 9905 }, { 9906 9907 // lineHeight 9908 caption: "Line", 9909 name: "lineHeight", 9910 value: 1.4, 9911 min: 0.5, 9912 max:2, 9913 mul:10, 9914 type: "tick" 9915 }, { 9916 9917 // charSpacing 9918 caption: "Spacing", 9919 name: "charSpacing", 9920 value: 4, 9921 min: -10, 9922 max: 10, 9923 type: "tick" 9924 } 9925 ], 9926 } */] 9927 // end text 9928 }; 9929 let tools = { 9930 crop: crop, 9931 blur: blur, 9932 line: line, 9933 highlighter: highlighter, 9934 pen: pen, 9935 rect: rect, 9936 img: img, 9937 arrow: arrow, 9938 arrowtext: arrowtext, 9939 ellipse: ellipse, 9940 triangle: triangle, 9941 text: text 9942 }; 9943 let globalPropSynList = [[ 9944 // colors and strokes 9945 ["line", "stroke"].join("-"), 9946 // ["highlighter", "stroke"].join("-"), 9947 // ["pen", "stroke"].join("-"), 9948 ["rect", "stroke"].join("-"), ["rect", "fill"].join("-"), ["triangle", "stroke"].join("-"), ["ellipse", "stroke"].join("-"), ["ellipse", "fill"].join("-"), 9949 // ["text", "fill"].join("-"), 9950 // ["text", "backgroundColor"].join("-"), 9951 ["arrow", "stroke"].join("-")]]; 9952 9953 // settings 9954 let mergedTools; 9955 if (embedMode) { 9956 let td; 9957 td = localStorage.getItem('toolsSettings'); 9958 if (td) { 9959 td = JSON.parse(td); 9960 mergedTools = { 9961 ...td 9962 }; 9963 let toolsKeys = Object.keys(tools); 9964 toolsKeys.forEach(function (key, i) {
9965 tools[key].bars && tools[key].bars.forEach(function (bar, ii) { 9966 tools[key].bars[ii].inner && tools[key].bars[ii].inner.forEach(function (prop, iii) { 9967 var _td$key, _td$key$bars$ii; 9968 if ((_td$key = td[key]) !== null && _td$key !== void 0 && (_td$key$bars$ii = _td$key.bars[ii]) !== null && _td$key$bars$ii !== void 0 && _td$key$bars$ii.inner[iii]) { 9969 var _td$tools$key, _td$tools$key$bars$ii; 9970 mergedTools.tools[key].bars[ii].inner[iii] = (_td$tools$key = td.tools[key]) === null || _td$tools$key === void 0 ? void 0 : (_td$tools$key$bars$ii = _td$tools$key.bars[ii]) === null || _td$tools$key$bars$ii === void 0 ? void 0 : _td$tools$key$bars$ii.inner[iii]; 9971 } 9972 }); 9973 }); 9974 }); 9975 const expandables = ['rect', 'triangle', 'ellipse', 'arrow', 'arrowtext']; 9976 if (!mergedTools.expandableTool) { 9977 mergedTools.expandableTool = expandables.includes(mergedTools.tool) ? mergedTools.tool : 'arrow'; 9978 } 9979 } 9980 } 9981 const ret = mergedTools ? mergedTools : { 9982 tool: !embedMode ? "pen" : "select", 9983 // default annotation tool 9984 shapeTool: "rect", 9985 lineTool: "arrow", 9986 selectTool: "select", 9987 expandableTool: 'arrow', 9988 tools: tools, 9989 globalPropSynList: globalPropSynList 9990 }; 9991 return ret; 9992} 9993; 9994/* harmony default export */ var tools_settings = __webpack_exports__["a"] = (toolsDefaults); 9995 9996/***/ }), 9997 9998/***/ "Oswd": 9999/***/ (function(module, exports) { 10000 10001module.exports = "/2494c83b4341cf9c3411ae383b9ccda2.png"; 10002 10003/***/ }), 10004 10005/***/ "Ovf+": 10006/***/ (function(module, exports, __webpack_require__) { 10007 10008// extracted by mini-css-extract-plugin 10009module.exports = {"Clip":"Clip","Clipping":"Clipping","Clipped":"Clipped","imageMode":"imageMode","shareDialogOpened":"shareDialogOpened","captureSnapMode":"captureSnapMode","CursorInfo":"CursorInfo"}; 10010 10011/***/ }), 10012 10013/***/ "Q8kY": 10014/***/ (function(module, exports, __webpack_require__) { 10015 10016// extracted by mini-css-extract-plugin 10017module.exports = {"nav":"src-App__nav--GqKRB"}; 10018 10019/***/ }), 10020 10021/***/ "Qzl6": 10022/***/ (function(module, __webpack_exports__, __webpack_require__) { 10023 10024"use strict"; 10025/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return clip; }); 10026function clip(state = {}, action) { 10027 let ret = { 10028 ...state 10029 }; 10030 switch (action.type) { 10031 case 'CLEAR': 10032 ret.x = 0; 10033 ret.y = 0; 10034 ret.w = 0; 10035 ret.h = 0; 10036 ret.minW = 20; 10037 ret.minH = 20; 10038 ret.show = false; 10039 ret.showUnderlay = false; 10040 ret.showControl = false; 10041 ret.showControlCorners = false; 10042 ret.snappedElementCoords = { 10043 x: 0, 10044 y: 0, 10045 w: 0, 10046 h: 0 10047 }; 10048 return ret; 10049 case 'SHOWUNDERLAY': 10050 ret.showUnderlay = true; 10051 return ret; 10052 case 'NOTSHOWUNDERLAY': 10053 ret.showUnderlay = false; 10054 return ret; 10055 case 'SNAPPED_ELEMENT_COORDS': 10056 if (action.value) ret.snappedElementCoords = { 10057 x: Math.round(action.value.left), 10058 y: Math.round(action.value.top), 10059 w: Math.round(action.value.width), 10060 h: Math.round(action.value.height) 10061 }; 10062 return ret; 10063 case 'CLIPCOORDS': 10064 if (action.value.hasOwnProperty('x')) ret.x = action.value.x; 10065 if (action.value.hasOwnProperty('y')) ret.y = action.value.y; 10066 if (action.value.hasOwnProperty('w')) ret.w = action.value.w; 10067 if (action.value.hasOwnProperty('h')) ret.h = action.value.h; 10068 return ret; 10069 case 'CLIPMINW': 10070 ret.minW = action.value; 10071 return ret; 10072 case 'CLIPMINH': 10073 ret.minH = action.value; 10074 return ret; 10075 case 'SHOW_CLIP': 10076 ret.show = true; 10077 return ret; 10078 case 'HIDE_CLIP': 10079 ret.show = false; 10080 return ret; 10081 case 'SHOW_CLIP_CONTROL': 10082 ret.showControl = true; 10083 return ret; 10084 case 'HIDE_CLIP_CONTROL': 10085 ret.showControl = false; 10086 return ret; 10087 case 'SHOW_CLIP_CONTROL_CORNERS': 10088 ret.showControlCorners = true; 10089 return ret; 10090 case 'HIDE_CLIP_CONTROL_CORNERS': 10091 ret.showControlCorners = false; 10092 return ret; 10093 default: 10094 return ret; 10095 } 10096} 10097; 10098 10099/***/ }), 10100 10101/***/ "RJox": 10102/***/ (function(module, exports, __webpack_require__) { 10103 10104// extracted by mini-css-extract-plugin 10105module.exports = {"page":"src-components-BrokenImageView-BrokenImageView__page--GdKJ9","background":"src-components-BrokenImageView-BrokenImageView__background--I6NVv","message":"src-components-BrokenImageView-BrokenImageView__message--v2+02"}; 10106 10107/***/ }), 10108 10109/***/ "RPdR": 10110/***/ (function(module, exports, __webpack_require__) { 10111 10112// extracted by mini-css-extract-plugin 10113module.exports = {"footerLinks":"src-components-FooterLinks-FooterLinks__footerLinks--qa8WP"}; 10114 10115/***/ }), 10116 10117/***/ "RibH": 10118/***/ (function(module, exports, __webpack_require__) { 10119 10120// extracted by mini-css-extract-plugin 10121module.exports = {"shadowEffect":"src-components-ClipList-ClipList__shadowEffect--OIZP3","withoutShadowEffect":"src-components-ClipList-ClipList__withoutShadowEffect--cP1XV","clipList":"src-components-ClipList-ClipList__clipList--xipH3","clipListEmpty":"src-components-ClipList-ClipList__clipListEmpty--CG7o8","clipCard":"src-components-ClipList-ClipList__clipCard--DIHYs","cardDragging":"src-components-ClipList-ClipList__cardDragging--nPcup","clipImageContainer":"src-components-ClipList-ClipList__clipImageContainer--nvk20","imageOverlay":"src-components-ClipList-ClipList__imageOverlay--HD5Bj","checkBox":"src-components-ClipList-ClipList__checkBox--59-o4","selectedClip":"src-components-ClipList-ClipList__selectedClip--D-aZB","atleastOneClipSelected":"src-components-ClipList-ClipList__atleastOneClipSelected--68f-3","clipPrivate":"src-components-ClipList-ClipList__clipPrivate--quOGW","newlyUploadedClip":"src-components-ClipList-ClipList__newlyUploadedClip---tOYD","clipImage":"src-components-ClipList-ClipList__clipImage--k2mCm","titleLine":"src-components-ClipList-ClipList__titleLine--W+I3v","contextMenuRunner":"src-components-ClipList-ClipList__contextMenuRunner---BC2Q","scrollActions":"src-components-ClipList-ClipList__scrollActions--9mdQc","hidden":"src-components-ClipList-ClipList__hidden--zNVcf","getBrowserExtensionButton":"src-components-ClipList-ClipList__getBrowserExtensionButton--+AVzA","uploadContainerButton":"src-components-ClipList-ClipList__uploadContainerButton--dNanb","dragImage":"src-components-ClipList-ClipList__dragImage--keeYH","uploadPleaseContainer":"src-components-ClipList-ClipList__uploadPleaseContainer--KNAe1","uploadPleaseText":"src-components-ClipList-ClipList__uploadPleaseText--DeffG","emptyTrashCanContainer":"src-components-ClipList-ClipList__emptyTrashCanContainer--3SOyZ","emptyTrashCanPNGContainer":"src-components-ClipList-ClipList__emptyTrashCanPNGContainer--M6aYf","emptyTrashPNG":"src-components-ClipList-ClipList__emptyTrashPNG--viX2i","emptyTrashCanText":"src-components-ClipList-ClipList__emptyTrashCanText--r8KlQ","emptyPublicContainer":"src-components-ClipList-ClipList__emptyPublicContainer--e8DLU","emptyPublicSVGContainer":"src-components-ClipList-ClipList__emptyPublicSVGContainer--qvY+X","emptySearchResultPNGContainer":"src-components-ClipList-ClipList__emptySearchResultPNGContainer--GZnsq","emptySearchPNG":"src-components-ClipList-ClipList__emptySearchPNG--OkQTG","emptySearchText":"src-components-ClipList-ClipList__emptySearchText--KNPa+","emptyDashboardPNGContainer":"src-components-ClipList-ClipList__emptyDashboardPNGContainer--Q79gf","emptyDashboardPNG":"src-components-ClipList-ClipList__emptyDashboardPNG--dr2xD","scrollTop":"src-components-ClipList-ClipList__scrollTop--FBnN0","fadeIn":"src-components-ClipList-ClipList__fadeIn--fwJYZ","backToTop":"src-components-ClipList-ClipList__backToTop--zxQzp","noSelect":"src-components-ClipList-ClipList__noSelect--4NJU6","brokenImageBackgroun
10121d":"src-components-ClipList-ClipList__brokenImageBackground--rcM6A"}; 10122 10123/***/ }), 10124 10125/***/ "RzzB": 10126/***/ (function(module, __webpack_exports__, __webpack_require__) { 10127 10128"use strict"; 10129/* harmony default export */ __webpack_exports__["a"] = ({ 10130 version: "embed-0.5.3" 10131}); 10132 10133/***/ }), 10134 10135/***/ "SAt1": 10136/***/ (function(module, __webpack_exports__, __webpack_require__) { 10137 10138"use strict"; 10139// ESM COMPAT FLAG 10140__webpack_require__.r(__webpack_exports__); 10141 10142// EXPORTS 10143__webpack_require__.d(__webpack_exports__, "fetchStorageLimitations", function() { return /* binding */ fetchStorageLimitations; }); 10144 10145// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom.iterable.js 10146var web_dom_iterable = __webpack_require__("rGqo"); 10147 10148// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/defineProperty.js 10149var defineProperty = __webpack_require__("lSNA"); 10150var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty); 10151 10152// EXTERNAL MODULE: ./node_modules/react/index.js 10153var react = __webpack_require__("q1tI"); 10154var react_default = /*#__PURE__*/__webpack_require__.n(react); 10155 10156// EXTERNAL MODULE: ./src/utils/app.utils.js 10157var app_utils = __webpack_require__("n8Gs"); 10158 10159// EXTERNAL MODULE: ./node_modules/react-redux/es/index.js + 22 modules 10160var es = __webpack_require__("/MKj"); 10161 10162// EXTERNAL MODULE: ./src/components/Auth/index.js + 2 modules 10163var Auth = __webpack_require__("2tX9"); 10164 10165// EXTERNAL MODULE: ./src/screens/Dashboard/Dashboard.css 10166var Dashboard_Dashboard = __webpack_require__("E3Y2"); 10167var Dashboard_default = /*#__PURE__*/__webpack_require__.n(Dashboard_Dashboard); 10168 10169// EXTERNAL MODULE: ./src/components/Modal/Modal.js 10170var Modal = __webpack_require__("AUTF"); 10171 10172// EXTERNAL MODULE: ./src/components/ClipList/ClipList.js + 6 modules 10173var ClipList = __webpack_require__("9MsG"); 10174 10175// EXTERNAL MODULE: ./src/components/FolderList/FolderList.js 10176var FolderList = __webpack_require__("tOAM"); 10177 10178// EXTERNAL MODULE: ./src/components/SignForm/SignForm.js 10179var SignForm = __webpack_require__("KsqR"); 10180 10181// EXTERNAL MODULE: ./src/components/SearchInput/SearchInput.js 10182var SearchInput = __webpack_require__("o58s"); 10183 10184// EXTERNAL MODULE: ./src/components/ClipActions/ClipActions.js + 1 modules 10185var ClipActions = __webpack_require__("8u73"); 10186 10187// EXTERNAL MODULE: ./src/components/FolderActions/FolderActions.js 10188var FolderActions = __webpack_require__("aYym"); 10189 10190// EXTERNAL MODULE: ./src/components/Dropdown/Dropdown.js 10191var Dropdown = __webpack_require__("4jib"); 10192 10193// EXTERNAL MODULE: ./src/components/Limitations/Limitations.js 10194var Limitations = __webpack_require__("EI7V"); 10195 10196// EXTERNAL MODULE: ./src/actions/Dashboard.actions.js 10197var Dashboard_actions = __webpack_require__("1ol1"); 10198 10199// EXTERNAL MODULE: ./node_modules/react-router/esm/react-router.js 10200var react_router = __webpack_require__("Ty5D"); 10201 10202// EXTERNAL MODULE: ./src/components/Modal/Content/index.js + 16 modules 10203var Content = __webpack_require__("uvQ8"); 10204 10205// EXTERNAL MODULE: ./src/utils/utils.js 10206var utils = __webpack_require__("+n12"); 10207 10208// EXTERNAL MODULE: ./src/components/PromotionBanner/PromotionBanner.css 10209var PromotionBanner = __webpack_require__("2OAq"); 10210var PromotionBanner_default = /*#__PURE__*/__webpack_require__.n(PromotionBanner); 10211 10212// CONCATENATED MODULE: ./src/components/PromotionBanner/PromotionBanner.js 10213 10214 10215const PromotionBanner_PromotionBanner = ({ 10216 actionCallback, 10217 closeCallback 10218}) => { 10219 return /*#__PURE__*/react_default.a.createElement("div", { 10220 className: PromotionBanner_default.a.bannerMainContainer 10221 }, /*#__PURE__*/react_default.a.createElement("div", { 10222 className: PromotionBanner_default.a.bannerTextContainer 10223 }, /*#__PURE__*/react_default.a.createElement("span", { 10224 className: PromotionBanner_default.a.bannerPrimaryText 10225 }, "Increase your storage with a 50% OFF! \uD83C\uDF89"), /*#__PURE__*/react_default.a.createElement("span", { 10226 className: PromotionBanner_default.a.bannerSecondaryText 10227 }, "Hurry up, it\u2019s only for a few days!")), /*#__PURE__*/react_default.a.createElement("div", { 10228 className: PromotionBanner_default.a.bannerButtonContainer 10229 }, /*#__PURE__*/react_default.a.createElement("button", { 10230 className: PromotionBanner_default.a.bannerActionButton, 10231 onClick: actionCallback 10232 }, "View plans"), /*#__PURE__*/react_default.a.createElement("button", { 10233 className: PromotionBanner_default.a.bannerCloseButton, 10234 onClick: closeCallback 10235 }, "Close"))); 10236}; 10237/* harmony default export */ var components_PromotionBanner_PromotionBanner = (PromotionBanner_PromotionBanner); 10238// EXTERNAL MODULE: ./node_modules/axios/index.js 10239var axios = __webpack_require__("vDqi"); 10240var axios_default = /*#__PURE__*/__webpack_require__.n(axios); 10241 10242// EXTERNAL MODULE: ./src/config/constants.js 10243var constants = __webpack_require__("YwrL"); 10244 10245// CONCATENATED MODULE: ./src/screens/Dashboard/Dashboard.js 10246 10247 10248 10249 10250 10251 10252 10253 10254 10255 10256 10257 10258 10259 10260 10261 10262 10263 10264 10265 10266 10267 10268 10269 10270const fetchStorageLimitations = async function (userId) { 10271 let data = await axios_default.a.get(`${constants["a" /* default */].apiUrl}/v2/users/${userId}/storageQuotaClips`).then(res => { 10272 return res.data; 10273 }).catch(err => { 10274 console.log("Get clips limit error: ", err); 10275 return err; 10276 }); 10277 return data; 10278}; 10279class Dashboard_Dashboard_Dashboard extends react["Component"] { 10280 constructor(_props) { 10281 super(_props); 10282 defineProperty_default()(this, "setImgSrcState", async (data, onError) => { 10283 this.setState({ 10284 imgSrc: data 10285 }); 10286 }); 10287 defineProperty_default()(this, "preventDefault", e => e.preventDefault()); 10288 defineProperty_default()(this, "updateStorageLimitations", async () => { 10289 const { 10290 clipsCount 10291 } = await fetchStorageLimitations(this.props.currentUser.userId); 10292 const { 10293 usage, 10294 limit, 10295 remaining 10296 } = clipsCount; 10297 const isFull = limit - usage <= 0; 10298 const isLow = !isFull && limit * .85 - usage <= 0; 10299 this.setState({ 10300 clipsUsed: usage, 10301 clipsLimit: limit, 10302 clipsRemaining: remaining, 10303 isFull: isFull, 10304 isLow: isLow 10305 }); 10306 sessionStorage.setItem('storageQuotaClips', JSON.stringify(clipsCount)); 10307 }); 10308 defineProperty_default()(this, "globalUploadAbility", e => { 10309 e.preventDefault(); 10310 e.stopPropagation(); 10311 const isUploadingFiles = e.dataTransfer.types.length > 0 && (e.dataTransfer.types[1] && e.dataTransfer.types[1].toLowerCase() === 'files' || e.dataTransfer.types[0] && e.dataTransfer.types[0].toLowerCase() === 'files'); 10312 if (isUploadingFiles && !this.state.isFilesUploading) { 10313 this.setState({ 10314 isFilesUploading: true 10315 }); 10316 // this.setModal('upload') 10317 } 10318 }); 10319 defineProperty_default()(this, "onDragEnd", e => { 10320 if (!(e.target == this.DashboardRef.current)) return; 10321 e.preventDefault(); 10322 e.stopPropagation(); 10323 this.setState({ 10324 isFilesUploading: false 10325 }); 10326 // if (this.state.currentModal == "upload"){ 10327 // this.setModal(false) 10328 // } 10329 }); 10330 defineProperty_default()(this, "onDrop", async e => { 10331 e.preventDefault(); 10332 e.dataTransfer.dropEffect = 'move'; 10333 if (e.dataTransfer.files.length === 1) { 10334 const isImage = e.dataTransfer.files[0].type === 'image/png' || e.dataTransfer.files[0].type === 'image/jpeg'; 10335 if (!isImage) { 10336 this.props.setNotification("Sorry, this format is not supported yet. Please use JPG or PNG.", true, true); 10337 } else { 10338 this.handleFilesAndUpload(e.dataTransfer.files); 10339 } 10340 // handleFile(e.dataTransfer.files[0]) 10341 // handleFilesAndUpload(e.dataTransfer.files) 10342 } else if (e.dataTransfer.files.length > 1) { 10343 // props.setNotification("Please drop one image at a time") 10344 this.handleFilesAndUpload(e.dataTransfer.files); 10345 } else { 10346 // setFileData({}) 10347 } 10348 this.setState({ 10349 isFilesUploading: false 10350 }); 10351 // if (zoneRef.current) { 10352 // this.setState() 10353 // } 10354 }); 10355 defineProperty_default()(this, "formatSize", size => { 10356 if (size > 1024 * 1024 * 1024 * 1024) return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB';else if (size > 1024 * 1024 * 1024) return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB';else if (size > 1024 * 1024) return (size / 1024 / 1024).toFixed(2) + ' MB';else if (size > 1024) return (size / 1024).toFixed(2) + ' KB'; 10357 return size.toString() + ' B'; 10358 }); 10359 defineProperty_default()(this, "handleFilesAndUpload", async files => { 10360 let filesReadyToUpload = []; 10361 let filePromises = []; 10362 // const filePromises = files.map((file) => { 10363 for (const file of files) { 10364 const isImage = file.type === 'image/png' || file.type === 'image/jpeg'; 10365 if (!isImage) { 10366 // props.setNotification("Woops! Unsupported file format, try with JPG or PNG",true,true) 10367 const fileToUpload = { 10368 name: file.name, 10369 displayName: file.name.substring(0, 20) + '...', 10370 size: this.formatSize(file.size), 10371 sizeRaw: file.size, 10372 type: file.type 10373 }; 10374 filesReadyToUpload.push(fileToUpload); 10375 } else { 10376 filePromises.push(new Promise((resolve, reject) => { 10377 let r = new FileReader();
10378 r.readAsDataURL(file); 10379 const onLoadEnd = async () => { 10380 resolve(filesReadyToUpload.push({ 10381 url: r.result, 10382 name: file.name, 10383 displayName: file.name.substring(0, 20) + '...', 10384 size: this.formatSize(file.size), 10385 sizeRaw: file.size, 10386 type: file.type 10387 })); 10388 }; 10389 r.onloadend = onLoadEnd; 10390 })); 10391 } 10392 } 10393 await Promise.all(filePromises); 10394 this.uploadClip(filesReadyToUpload, msg => { 10395 this.props.setNotification(msg || "Uploading wasn't finished. Please, check your storage quota", true); 10396 }); 10397 }); 10398 defineProperty_default()(this, "alertBeforeClosing", e => { 10399 e.preventDefault(); 10400 e.returnValue = ''; 10401 }); 10402 defineProperty_default()(this, "shadowEffect", value => { 10403 this.setState({ 10404 shadowEffect: value 10405 }); 10406 }); 10407 defineProperty_default()(this, "cleanup", () => { 10408 this.props.setClips([]); 10409 this.props.setFolders([]); 10410 if (!this.state.hasMoreClips) this.props.setClipsHasMore(true); 10411 }); 10412 defineProperty_default()(this, "clipSelectionToggle", clipId => { 10413 let selectedClips = []; 10414 if (this.state.selectAllClips) { 10415 this.state.clips.forEach(clip => selectedClips.push(clip.clipId)); 10416 selectedClips.splice(selectedClips.indexOf(clipId), 1); 10417 } else { 10418 selectedClips = [...this.state.selectedClips]; 10419 if (selectedClips.includes(clipId)) selectedClips.splice(selectedClips.indexOf(clipId), 1);else selectedClips.push(clipId); 10420 } 10421 this.setState({ 10422 selectedClips: selectedClips, 10423 selectAllClips: false 10424 }); 10425 }); 10426 defineProperty_default()(this, "clipSelectionAdd", clipId => { 10427 if (this.props.isAllClipsSelected) return; 10428 let selectedClips = [...this.state.selectedClips]; 10429 if (!selectedClips.includes(clipId)) selectedClips.push(clipId); 10430 this.setState({ 10431 selectedClips: selectedClips 10432 }); 10433 }); 10434 defineProperty_default()(this, "setClipsSelection", v => { 10435 this.setState({ 10436 selectAllClips: !this.state.selectAllClips, 10437 selectedClips: [] 10438 }); 10439 }); 10440 defineProperty_default()(this, "resetClipsSelection", v => { 10441 this.setState({ 10442 selectAllClips: false, 10443 selectedClips: [] 10444 }); 10445 }); 10446 defineProperty_default()(this, "goHome", () => { 10447 this.props.history.push({ 10448 pathname: '/', 10449 state: { 10450 stayAtHomePage: true 10451 } 10452 }); 10453 }); 10454 defineProperty_default()(this, "moveAllClipsToFolder", async folderId => { 10455 const currentFolder = this.props.currentFolder ? this.props.currentFolder : 'root'; 10456 this.props.setAppLoading(true); 10457 const res = await app_utils["e" /* moveAllClipsToFolder */](currentFolder, folderId); 10458 if (res.error) { 10459 console.log("Error moveAllClipsToFolder", res.error); 10460 this.props.setAppLoading(false); 10461 return; 10462 } 10463 this.props.setClips([]); 10464 this.setState({ 10465 selectAllClips: false, 10466 selectedClips: [] 10467 }); 10468 this.props.setAppLoading(false); 10469 }); 10470 defineProperty_default()(this, "selectDestinationFolderTrigger", (clip, onError) => { 10471 this.setModal('selectDestinationFolder'); 10472 if (this.state.selectedClips.length == 0) { 10473 this.setState({ 10474 selectedClips: [clip.clipId] 10475 }); 10476 } 10477 }); 10478 defineProperty_default()(this, "setFileData", fileData => { 10479 this.setState({ 10480 fileData: fileData 10481 }); 10482 }); 10483 defineProperty_default()(this, "showUploadModal", () => { 10484 this.setModal('uploadPreview'); 10485 }); 10486 defineProperty_default()(this, "setNewFolderBeforeMovingClips", () => { 10487 this.setState({ 10488 newFolderBeforeMovingClips: true 10489 }); 10490 this.setModal('newFolder'); 10491 }); 10492 defineProperty_default()(this, "moveToFolder", async (folderId, onError, clipIds) => { 10493 if (!folderId) folderId = 'root'; 10494 let clips = []; 10495 if (!clipIds && this.state.selectAllClips) { 10496 // return this.moveAllClipsToFolder(folderId) 10497 for (let i = 0; i < this.state.clips.length; i++) { 10498 clips.push(this.state.clips[i].clipId); 10499 } 10500 } else if (!clipIds) clips = this.state.selectedClips;else clips = clipIds; 10501 const currentFolder = this.props.currentFolder ? this.props.currentFolder : 'root'; 10502 this.props.setAppLoading(true); 10503 const res = await app_utils["f" /* moveToFolder */](currentFolder, folderId, clips); 10504 if (res.error) { 10505 if (onError) onError(); 10506 console.log("Error moveToFolder", res.error); 10507 this.props.setAppLoading(false); 10508 return; 10509 } 10510 this.props.setClips(this.state.clips.filter(clip => !clips.includes(clip.clipId))); 10511 this.setState({ 10512 selectAllClips: false, 10513 selectedClips: [] 10514 }); 10515 this.props.setNotification("The clip was successfully moved"); 10516 this.props.setAppLoading(false); 10517 }); 10518 defineProperty_default()(this, "removeClipsFromCurrentFolder", async onError => { 10519 this.props.setAppLoading(true); 10520 const res = await app_utils["g" /* removeAllClipsFromFolder */](this.state.currentFolder); 10521 if (res.error) { 10522 if (onError) onError(); 10523 console.error("Error removeClipsFromCurrentFolder", res.error); 10524 this.props.setAppLoading(false); 10525 return; 10526 } 10527 this.props.setClips([]); 10528 this.setState({ 10529 selectAllClips: false, 10530 selectedClips: [] 10531 }); 10532 this.props.setAppLoading(false); 10533 }); 10534 defineProperty_default()(this, "reSendEmailVerification", async () => { 10535 let response = await this.props.Auth.reSendEmailVerification(); 10536 if (response.emailReSent) { 10537 this.setState({ 10538 isEmailVerified: true 10539 }); 10540 this.props.setNotification("Please check your inbox to verify your account"); 10541 } else { 10542 this.props.setNotification("There was an error resending the verification email", true); 10543 } 10544 }); 10545 defineProperty_default()(this, "hideVerificationSuccessNotification", () => { 10546 this.setState({ 10547 isEmailVerified: true 10548 }); 10549 }); 10550 defineProperty_default()(this, "removeClips", async (onError, clipIds) => { 10551 // if clips are not in Trash, then move them there firstly 10552 this.props.setAppLoading(true); 10553 let clips = []; 10554 let allClips = []; 10555 let res; 10556 if (!clipIds) { 10557 clips = this.state.selectedClips; 10558 } else { 10559 clips = clipIds; 10560 } 10561 if (this.state.currentFolder !== 'trash') { 10562 if (this.state.selectAllClips) { 10563 await this.moveToFolder('trash', onError); 10564 this.props.setNotification("The clip has been sent to trash"); 10565 } else { 10566 await this.moveToFolder('trash', onError, clips); 10567 this.props.setNotification("The clip has been sent to trash"); 10568 } 10569 return; 10570 } 10571 if (this.state.selectAllClips) { 10572 for (let i = 0; i < this.state.clips.length; i++) { 10573 allClips.push(this.state.clips[i].clipId); 10574 } 10575 res = await app_utils["h" /* removeClips */](allClips); 10576 } else { 10577 res = await app_utils["h" /* removeClips */](clips); 10578 } 10579 if (res.error) { 10580 if (onError) onError(); 10581 console.error("Error removeClips", res.error); 10582 // props.setNotification("Moving Clip to Trash wasn't successful") 10583 this.props.setAppLoading(false); 10584 return; 10585 } else { 10586 this.updateStorageLimitations(); 10587 } 10588 if (this.state.selectAllClips) { 10589 this.props.setClips(this.state.clips.filter(clip => !allClips.includes(clip.clipId))); 10590 } else { 10591 this.props.setClips(this.state.clips.filter(clip => !clips.includes(clip.clipId))); 10592 } 10593 this.setState({ 10594 selectAllClips: false, 10595 selectedClips: [] 10596 }); 10597 this.props.setAppLoading(false); 10598 }); 10599 defineProperty_default()(this, "uploadClip", (fileData, onError) => { 10600 if (fileData.length > 0) { 10601 return this.uploadMultipleClips(fileData, onError); 10602 } 10603 10604 // const data = { 10605 // fileData: fileData, 10606 // parentFolderId: this.state.currentFolder 10607 // } 10608 // this.props.setAppLoading(true) 10609 // const res = await utils.uploadClip(data) 10610 // if (res.error) { 10611 // if (onError) onError(res.error.message); 10612 // console.log("Error uploadClip", res.error) 10613 // this.props.setAppLoading(false) 10614 // return res.error.message 10615 // } 10616 // if ('trash' !== this.state.currentFolder) { 10617 // this.props.setClips([ 10618 // res.data, 10619 // ...this.state.clips 10620 // ]) 10621 // } 10622 // this.props.setAppLoading(false) 10623 }); 10624 defineProperty_default()(this, "uploadMultipleClips", async (fileDataArray, onError) => { 10625 if (this.state.isFull || fileDataArray.length > this.state.remaining) { 10626 this.props.setNotification(/*#__PURE__*/react_default.a.createElement("span", null, /*#__PURE__*/react_default.a.createElement("b", null, "Your storage is full!"), /*#__PURE__*/react_default.a.createElement("br", null), "Please delete some clips or upgrade your plan."), true, false, false, false, { 10627 buttonLabel: 'View plans', 10628 newTabLink: 'https://screenclip.com/pricing?utm_source=dashboard&utm_medium=notification_full_storage', 10629 manualHide: true, 10630 storageFull: true 10631 }); 10632 return; 10633 } 10634 this.setState({ 10635 cancelUpload: false 10636 }); 10637 let uploadingUpdate = { 10638 circularProgress: 0, 10639 cancelUploadHandler: this.cancelUploadHandler, 10640 cancelUpload: this.state.cancelUpload 10641 }; 10642 let retryInfo = []; 10643 let errorCounter = 0; 10644 this.props.setNotification("Uploading", false, false, uploadingUpdate); 10645 let showError = false;
10646 const filteredFileDataArray = [...fileDataArray].filter(item => { 10647 if (item.sizeRaw / 1024 / 1024 < 7 && (item.type === 'image/png' || item.type === 'image/jpeg')) { 10648 return true; 10649 } else { 10650 showError = true; 10651 return false; 10652 } 10653 }); 10654 for (let i = 1; i <= filteredFileDataArray.length; i++) { 10655 if (this.state.cancelUpload) { 10656 return; 10657 } else { 10658 let fileData = filteredFileDataArray[i - 1]; 10659 let res; 10660 let data; 10661 // const isImage = fileData.type === 'image/png' || fileData.type === 'image/jpeg' 10662 10663 // if (!isImage) { 10664 // data = { 10665 // fileData: fileData, 10666 // parentFolderId: this.state.currentFolder 10667 // }; 10668 // res = { error: true }; 10669 // } else { 10670 data = { 10671 fileData: fileData, 10672 parentFolderId: this.state.currentFolder 10673 }; 10674 res = await app_utils["r" /* uploadClip */](data); 10675 // } 10676 10677 if (res.error) { 10678 errorCounter++; 10679 data.error = { 10680 error: res.error, 10681 status: res.status 10682 }; 10683 retryInfo.push(res); 10684 uploadingUpdate = { 10685 circularProgress: i / filteredFileDataArray.length * 100, 10686 retryInfo: data, 10687 clips: this.state.clips, 10688 currentFolder: this.props.currentFolder, 10689 cancelUploadHandler: this.cancelUploadHandler, 10690 cancelUpload: this.state.cancelUpload 10691 }; 10692 // return 10693 } else { 10694 uploadingUpdate = { 10695 circularProgress: i / filteredFileDataArray.length * 100, 10696 cancelUploadHandler: this.cancelUploadHandler, 10697 cancelUpload: this.state.cancelUpload 10698 }; 10699 if ('trash' !== this.state.currentFolder) { 10700 res.data.newUpload = true; 10701 this.props.setClips([res.data, ...this.state.clips]); 10702 setTimeout(() => { 10703 this.props.clearUploadStateFromClips(); 10704 }, 12000); 10705 } 10706 } 10707 if (errorCounter == 0 && !this.state.cancelUpload) { 10708 this.props.setNotification("Uploading " + i + "/" + filteredFileDataArray.length, false, false, uploadingUpdate, true); 10709 } 10710 // else if (!this.state.cancelUpload) { 10711 // this.props.setNotification(errorCounter + " out of " + filteredFileDataArray.length + " didn't make it.", true, false, uploadingUpdate) 10712 // this.props.setNotification('Only PNGs and JPEGs up to ~7MB', true, false, uploadingUpdate, false) 10713 // } 10714 } 10715 } 10716 if (showError) { 10717 this.props.setNotification(/*#__PURE__*/react_default.a.createElement("span", null, "One or more images are incompatible. Please use ", /*#__PURE__*/react_default.a.createElement("b", null, "PNG"), " and ", /*#__PURE__*/react_default.a.createElement("b", null, "JPEG"), " images up to ", /*#__PURE__*/react_default.a.createElement("b", null, "7MB"), "."), true, false, uploadingUpdate, false); 10718 } 10719 10720 // this.props.setAppLoading(false) 10721 10722 this.updateStorageLimitations(); 10723 }); 10724 defineProperty_default()(this, "cancelUploadHandler", () => { 10725 this.setState({ 10726 cancelUpload: true 10727 }); 10728 }); 10729 defineProperty_default()(this, "createFolder", async (folderName, onError) => { 10730 this.props.setAppLoading(true); 10731 const res = await app_utils["c" /* createFolder */](folderName); 10732 if (res.error) { 10733 console.log("Error createFolder", res.error); 10734 if (onError) onError(); 10735 this.props.setAppLoading(false); 10736 return; 10737 } 10738 this.props.setFolders([res.data, ...this.state.folders]); 10739 if (this.state.newFolderBeforeMovingClips) { 10740 await this.moveToFolder(res.data.folderId, msg => { 10741 props.setNotification(msg || "There was an error moving the clips to that destination folder", true); 10742 }); 10743 this.setState({ 10744 newFolderBeforeMovingClips: false 10745 }); 10746 } 10747 this.props.setAppLoading(false); 10748 }); 10749 defineProperty_default()(this, "removeFolder", async (folderId, onError) => { 10750 // this.props.setAppLoading(true) 10751 const res = await app_utils["i" /* removeFolder */](folderId); 10752 if (res.error) { 10753 console.log("Create Folder error:", res.error); 10754 if (onError) onError(); 10755 this.props.setAppLoading(false); 10756 return; 10757 } 10758 if (folderId == this.state.currentFolder) { 10759 this.props.history.push("./"); 10760 this.props.setCurrentFolder(false); 10761 } 10762 if (this.state.folders.length == 1) { 10763 this.props.setFolders([]); 10764 this.setState({ 10765 lastFolderDeleted: true 10766 }); 10767 } else { 10768 this.props.setFolders(this.state.folders.filter(folder => folder.folderId !== folderId)); 10769 } 10770 // this.props.setAppLoading(false) 10771 }); 10772 defineProperty_default()(this, "renameFolder", async (data, onError) => { 10773 this.props.setAppLoading(true); 10774 const res = await app_utils["j" /* renameFolder */](data); 10775 if (res.error) { 10776 console.log("Rename Folder error:", res.error); 10777 if (onError) onError(); 10778 this.props.setAppLoading(false); 10779 return; 10780 } 10781 const newFolders = this.state.folders.map(folder => { 10782 if (folder.folderId == data.folderId) { 10783 folder.title = data.title; 10784 } 10785 return folder; 10786 }); 10787 this.props.setFolders(newFolders); 10788 this.props.setAppLoading(false); 10789 }); 10790 defineProperty_default()(this, "renameClip", async (data, onError) => { 10791 this.props.setAppLoading(true); 10792 const res = await app_utils["l" /* updateClip */](data); 10793 if (res.error) {
10794 console.log("Rename Clip error:", res.error); 10795 if (onError) onError(); 10796 this.props.setAppLoading(false); 10797 return; 10798 } 10799 const newClips = this.state.clips.map(clip => { 10800 if (clip.clipId == data.clipId) { 10801 clip.title = data.title; 10802 } 10803 return clip; 10804 }); 10805 this.props.setClips(newClips); 10806 this.props.setAppLoading(false); 10807 }); 10808 defineProperty_default()(this, "setClipPrivacyClip", async (data, onError) => { 10809 if (data.loading) this.props.setAppLoading(true); 10810 const res = await app_utils["l" /* updateClip */](data); 10811 if (res.error) { 10812 console.log("Privacy change for Clip error:", e); 10813 if (data.loading) this.props.setAppLoading(false); 10814 if (onError) onError(); 10815 return; 10816 } 10817 const newClips = this.state.clips.map(clip => { 10818 if (clip.clipId == data.clipId) { 10819 clip.privacy = data.privacy; 10820 } 10821 return clip; 10822 }); 10823 this.props.setClips(newClips); 10824 if (data.loading) this.props.setAppLoading(false); 10825 }); 10826 defineProperty_default()(this, "duplicateClip", async (orig, onError) => { 10827 this.props.setAppLoading(true); 10828 if (this.state.selectAllClips) { 10829 for (let i = 0; i < this.state.clips.length; i++) { 10830 this.duplicateClipAux(this.state.clips[i], onError); 10831 } 10832 } else if (this.state.selectedClips.length > 0) { 10833 for (let i = 0; i < this.state.selectedClips.length; i++) { 10834 for (let j = 0; j < this.state.clips.length; j++) { 10835 if (this.state.selectedClips[i] == this.state.clips[j].clipId) { 10836 this.duplicateClipAux(this.state.clips[j], onError); 10837 } 10838 } 10839 } 10840 } else { 10841 const data = { 10842 ...orig 10843 }; 10844 this.duplicateClipAux(data, onError); 10845 } 10846 }); 10847 defineProperty_default()(this, "duplicateClipAux", async (data, onError) => { 10848 const clip = { 10849 ...data 10850 }; 10851 clip.title = clip.title + " - copy"; 10852 clip.duplicate = true; 10853 // data.image = ( 10854 // await getImageDataFromUrl(data.downloadUrl) 10855 // ).split(",")[1]; 10856 clip.image = await Object(utils["h" /* getBase64FromUrl */])(clip.downloadUrl); 10857 if (!clip.privacy) clip.privacy = 'private'; 10858 if (!clip.parentFolderId) clip.parentFolderId = this.state.currentFolder; 10859 if (!clip.mimeType) clip.mimeType = 'image/png'; 10860 const res = await app_utils["b" /* createClip */](clip); 10861 if (res.error) { 10862 this.props.setAppLoading(false); 10863 this.props.setNotification(res.error.message || "Clip duplication error", true); 10864 return; 10865 } 10866 // const clip = res.data 10867 const newClips = [res.data, ...this.state.clips]; 10868 this.props.setClips(newClips); 10869 this.props.setAppLoading(false); 10870 }); 10871 defineProperty_default()(this, "createClip", async (data, onError) => { 10872 if (!data.parentFolderId) data.parentFolderId = this.state.currentFolder; 10873 if (!data.mimeType) data.mimeType = 'image/png'; 10874 this.props.setAppLoading(true); 10875 const res = await app_utils["b" /* createClip */](data); 10876 if (res.error) { 10877 console.log("Create Clip error:", res.error); 10878 if (onError) onError(); 10879 this.props.setAppLoading(false); 10880 return; 10881 } 10882 this.props.setAppLoading(false); 10883 this.props.history.push("/" + res.data.url); 10884 }); 10885 defineProperty_default()(this, "changeFolderPrivacy", async (data, onError) => { 10886 this.props.setAppLoading(true); 10887 const res = await app_utils["a" /* changeFolderPrivacy */](data); 10888 if (res.error) { 10889 console.log("Public Folder error:", res.error); 10890 if (onError) onError(); 10891 this.props.setAppLoading(false); 10892 return; 10893 } 10894 if (data.folderId == this.props.currentFolder) { 10895 let newClips = this.state.clips.map(clip => { 10896 clip.privacy = data.privacy; 10897 return clip; 10898 }); 10899 this.props.setClips(newClips); 10900 } 10901 const newFolders = this.state.folders.map(folder => { 10902 if (data.folderId == folder.folderId) { 10903 folder.privacy = data.privacy; 10904 } 10905 return folder; 10906 }); 10907 this.props.setFolders(newFolders); 10908 this.props.setAppLoading(false); 10909 }); 10910 defineProperty_default()(this, "setFolderPrivate", async (data, onError) => { 10911 this.props.setAppLoading(true); 10912 const res = await app_utils["setFolderPrivate"](data); 10913 if (res.error) { 10914 console.log("private Folder error:", res.error); 10915 if (onError) onError(); 10916 this.props.setAppLoading(false); 10917 return; 10918 } 10919 let newClips = this.state.clips.map(clip => { 10920 clip.privacy = "private"; 10921 return clip; 10922 }); 10923 const newFolders = this.state.folders.map(folder => { 10924 if (data.folderId == folder.folderId) { 10925 folder.privacy = "private"; 10926 } 10927 return folder; 10928 }); 10929 this.props.setFolders(newFolders); 10930 this.props.setClips(newClips); 10931 this.props.setAppLoading(false); 10932 }); 10933 defineProperty_default()(this, "setRemoveClipsModal", clipId => { 10934 this.setState({ 10935 selectedClips: clipId, 10936 currentModal: 'removeClips' 10937 }); 10938 }); 10939 defineProperty_default()(this, "setShareClipModal", clipId => { 10940 this.setState({ 10941 actionClipId: clipId, 10942 currentModal: 'shareClip' 10943 }); 10944 }); 10945 defineProperty_default()(this, "setMoveModal", destFolderId => { 10946 this.setState({ 10947 destFolderId: destFolderId, 10948 currentModal: 'moveClips' 10949 }); 10950 }); 10951 defineProperty_default()(this, "setRenameClipModal", clipId => { 10952 this.setState({ 10953 actionClipId: clipId, 10954 currentModal: 'renameClip' 10955 }); 10956 }); 10957 defineProperty_default()(this, "downloadClip", async (data, ext) => { 10958 const currentFolderTitle = this.getFolderById(this.state.currentFolder).title || this.getFolderById(this.state.currentFolder); 10959 if (this.state.selectAllClips) { 10960 return Object(utils["c" /* downloadClips */])(this.state.clips, this.props.setAppLoading, currentFolderTitle, ext); 10961 } else if (this.state.selectedClips.length > 0) { 10962 let selectedClips = []; 10963 for (let i = 0; i < this.state.selectedClips.length; i++) { 10964 for (let j = 0; j < this.state.clips.length; j++) { 10965 if (this.state.selectedClips[i] == this.state.clips[j].clipId) { 10966 selectedClips.push(this.state.clips[j]); 10967 } 10968 } 10969 } 10970 Object(utils["c" /* downloadClips */])(selectedClips, this.props.setAppLoading, currentFolderTitle, ext); 10971 } else { 10972 Object(utils["c" /* downloadClips */])(data, this.props.setAppLoading, currentFolderTitle, ext); 10973 } 10974 }); 10975 defineProperty_default()(this, "setModal", modal => { 10976 this.setState({ 10977 currentModal: modal 10978 }); 10979 }); 10980 defineProperty_default()(this, "setFolderRightClicked", folder => { 10981 this.setState({ 10982 folderRightClicked: folder 10983 }); 10984 }); 10985 defineProperty_default()(this, "hideModal", e => { 10986 this.setState({ 10987 currentModal: false, 10988 fileData: {} 10989 }); 10990 }); 10991 defineProperty_default()(this, "showDefaultNoty", () => { 10992 this.props.setNotification("Please check your inbox to verify your account"); 10993 }); 10994 defineProperty_default()(this, "showClipularUserNoty", () => { 10995 this.props.setNotification("Go to Settings after confirming your email to import your content.", false, false, false, false, { 10996 buttonLabel: 'Settings', 10997 href: '/settings', 10998 manualHide: true, 10999 icon: 'clipular' 11000 }); 11001 }); 11002 defineProperty_default()(this, "onCloseOnboardingModal", () => { 11003 this.setState({ 11004 currentModal: false 11005 }); 11006 setTimeout(() => { 11007 if (this.props.currentUser.clipularTransferAvailable) { 11008 this.showClipularUserNoty(); 11009 } else { 11010 this.showDefaultNoty(); 11011 } 11012 }, 2000); 11013 this.DashboardRef.current.addEventListener("drop", this.onDrop); 11014 document.addEventListener('dragover', this.globalUploadAbility); 11015 window.removeEventListener('beforeunload', this.alertBeforeClosing); 11016 }); 11017 defineProperty_default()(this, "toggleSidebar", () => { 11018 this.setState({ 11019 sidebarOpened: !this.state.sidebarOpened 11020 }); 11021 }); 11022 defineProperty_default()(this, "closeSidebar", () => { 11023 if (this.state.sidebarOpened) this.setState({ 11024 sidebarOpened: false 11025 }); 11026 }); 11027 defineProperty_default()(this, "isOpen", bool => { 11028 this.setState({ 11029 pointEventsNone: bool 11030 }); 11031 }); 11032 defineProperty_default()(this, "closeBanner", () => { 11033 sessionStorage.setItem('isPromoBannerClosed', true); 11034 this.setState({ 11035 isPromoBannerClosed: true 11036 }); 11037 }); 11038 defineProperty_default()(this, "viewPlans", () => { 11039 window.open("https://screenclip.com/pricing?utm_source=dashboard&utm_medium=promo_banner"); 11040 }); 11041 this.state = { 11042 lastFolderDeleted: false, 11043 newFolderBeforeMovingClips: false, 11044 selectAllClips: false, 11045 selectedClips: [], 11046 hasMoreClips: _props.hasMoreClips, 11047 clips: _props.clips, 11048 folders: _props.folders, 11049 searchQuery: _props.searchQuery, 11050 currentFolder: _props.currentFolder,
11051 folderRightClicked: false, 11052 currentModal: false, 11053 sidebarOpened: false, 11054 pointEventsNone: false, 11055 shadowEffect: false, 11056 isEmailVerified: true, 11057 fileData: false, 11058 cancelUpload: false, 11059 isFilesUploading: false, 11060 imgSrc: this.props.currentUser ? this.props.currentUser.photoUrl : '', 11061 // isPromoBannerClosed: props.currentUser.accountType === 'plus' ? true : sessionStorage.getItem('isPromoBannerClosed'), 11062 isPromoBannerClosed: true, 11063 clipsUsed: null, 11064 clipsLimit: null, 11065 clipsRemaining: null, 11066 isFull: null, 11067 isLow: null 11068 }; 11069 this.DashboardRef = /*#__PURE__*/react_default.a.createRef(); 11070 } 11071 static getDerivedStateFromProps(nextProps, prevState) { 11072 let ret = {}; 11073 if (nextProps.folders && nextProps.folders.length !== prevState.folders.length) { 11074 ret.folders = nextProps.folders; 11075 } 11076 if (nextProps.clips && nextProps.clips.length !== prevState.clips.length) { 11077 ret.clips = nextProps.clips; 11078 } 11079 if (nextProps.clips && nextProps.clips.filter(clip => clip.newUpload).length !== prevState.clips.filter(clip => clip.newUpload).length) ret.clips = nextProps.clips; 11080 if (nextProps.searchQuery !== prevState.searchQuery) { 11081 ret.searchQuery = nextProps.searchQuery; 11082 } 11083 if (nextProps.hasMoreClips !== prevState.hasMoreClips) { 11084 ret.hasMoreClips = nextProps.hasMoreClips; 11085 } 11086 if (nextProps.currentFolder !== prevState.currentFolder) { 11087 ret.currentFolder = nextProps.currentFolder; 11088 ret.selectAllClips = false; 11089 ret.selectedClips = []; 11090 } 11091 return Object.keys(ret).length > 0 ? ret : null; 11092 } 11093 async componentDidMount() { 11094 // window.location.hash = '' 11095 11096 document.title = 'Dashboard â ScreenClip'; 11097 this.updateStorageLimitations(); 11098 this.unlistenHistory = this.props.history.listen((location, action) => { 11099 if (!location.pathname.includes("/dashboard")) { 11100 // if user goes out of dashboard then return current folder to default state 11101 this.props.setCurrentFolder(false); 11102 } 11103 }); 11104 11105 // let isEmailVerified = await this.props.Auth.isEmailVerified(); 11106 // if(this.props.currentUser && isEmailVerified){ 11107 if (this.props.currentUser && !this.props.currentUser.onboardingPassed) { 11108 // if(true){ 11109 11110 this.setState({ 11111 currentModal: "onboarding" 11112 }); 11113 window.addEventListener('beforeunload', this.alertBeforeClosing); 11114 } else { 11115 document.addEventListener('dragover', this.globalUploadAbility); 11116 if (this.DashboardRef.current) { 11117 this.DashboardRef.current.addEventListener("drop", this.onDrop); 11118 // this.DashboardRef.current.addEventListener('dragenter', this.globalUploadAbility); 11119 this.DashboardRef.current.addEventListener("dragleave", this.onDragEnd); 11120 this.DashboardRef.current.addEventListener("dragend", this.onDragEnd); 11121 if (this.props.history.location.state && this.props.history.location.state.emailVerified) { 11122 this.setState({ 11123 isEmailVerified: "Verification Success" 11124 }); 11125 this.props.history.push({ 11126 state: { 11127 emailVerified: false 11128 } 11129 }); 11130 } else { 11131 const verified = await this.props.Auth.isEmailVerified(); 11132 this.setState({ 11133 isEmailVerified: verified 11134 }); 11135 } 11136 } 11137 } 11138 } 11139 componentWillUnmount() { 11140 document.removeEventListener('dragover', this.preventDefault); 11141 this.DashboardRef.current.removeEventListener("drop", this.onDrop); 11142 this.DashboardRef.current.removeEventListener("dragleave", this.onDragEnd); 11143 this.DashboardRef.current.removeEventListener("dragend", this.onDragEnd); 11144 window.removeEventListener('beforeunload', this.alertBeforeClosing); 11145 this.unlistenHistory(); 11146 // to refresh clips & folders we need to set them empty when user is going to other page 11147 this.cleanup(); 11148 } 11149 componentDidUpdate(prevProps, prevState) { 11150 // console.log("FOLDERCHANGED:SETFOLDER:componentDidUpdate", this.state.currentFolder, this.props.match.params.folderId, this.state.currentFolder == this.props.match.params.folderId) 11151 // if (this.state.currentFolder !== this.props.match.params.folderId) { 11152 // console.log("FOLDERCHANGED:SETFOLDER:START",this.state.currentFolder, this.props.match.params.folderId, this.state.currentFolder == this.props.match.params.folderId) 11153 // if ( 11154 // this.props.match.params.folderId 11155 // && this.state.folders.filter( 11156 // folder => folder.folderId === this.props.match.params.folderId 11157 // ).length > 0 11158 // ) { 11159 // console.log("FOLDERCHANGED:SETFOLDER:STOP", this.props.match.params.folderId) 11160 // this.props.setCurrentFolder(this.props.match.params.folderId) 11161 // } 11162 // } 11163 if (prevProps.userId && !this.props.userId) { 11164 this.cleanup(); 11165 } 11166 if (prevProps.userId !== this.props.userId) { 11167 this.updateStorageLimitations(); 11168 } 11169 if (prevState.clipsUsed !== null && prevState.clipsUsed !== this.state.clipsUsed && prevState.clipsUsed < this.state.clipsUsed) { 11170 if (this.state.isFull) { 11171 this.props.setNotification(/*#__PURE__*/react_default.a.createElement("span", null, /*#__PURE__*/react_default.a.createElement("b", null, "Your storage is full!"), /*#__PURE__*/react_default.a.createElement("br", null), "Please delete some clips or upgrade your plan."), true, false, false, false, { 11172 buttonLabel: 'View plans', 11173 newTabLink: 'https://screenclip.com/pricing?utm_source=dashboard&utm_medium=notification_full_storage', 11174 manualHide: true, 11175 storageFull: true 11176 }); 11177 } else if (this.state.isLow) { 11178 this.props.setNotification(/*#__PURE__*/react_default.a.createElement("span", null, /*#__PURE__*/react_default.a.createElement("b", null, "Clip(s) uploaded!"), /*#__PURE__*/react_default.a.createElement("br", null), "Your storage is low. Please consider upgrading your plan."), false, false, false, false, { 11179 buttonLabel: 'View plans', 11180 newTabLink: 'https://screenclip.com/pricing?utm_source=dashboard&utm_medium=notification_low_storage', 11181 notificationTime: 6000, 11182 storageLow: true, 11183 icon: 'info' 11184 }); 11185 } 11186 } 11187 if (prevState.clips.length < this.state.clips.length) { 11188 if (window.location.hash.includes('newUploadClipId')) { 11189 const newUploadClipId = window.location.hash.substring(17); 11190 const clips = this.state.clips.map(clip => { 11191 if (clip.clipId === newUploadClipId) { 11192 return { 11193 ...clip, 11194 newUpload: true 11195 }; 11196 } else { 11197 return { 11198 ...clip 11199 }; 11200 } 11201 });
11202 this.props.setClips([...clips]); 11203 setTimeout(() => { 11204 this.props.clearUploadStateFromClips(); 11205 }, 12000); 11206 } 11207 window.location.hash = ''; 11208 } 11209 } 11210 11211 // For Multiple Images 11212 11213 getFolderTitleById(folderId) { 11214 const suchFolderIsHere = this.state.folders.filter(folder => folder.folderId === folderId).length > 0; 11215 return folderId === 'trash' ? 'Trash' : folderId && suchFolderIsHere ? this.state.folders.filter(folder => folder.folderId === folderId)[0].title : 'Main folder'; 11216 } 11217 getFolderById(folderId) { 11218 const suchFolderIsHere = this.state.folders.filter(folder => folder.folderId === folderId).length > 0; 11219 return folderId === 'trash' ? 'Trash' : folderId && suchFolderIsHere ? this.state.folders.filter(folder => folder.folderId === folderId)[0] : 'Main folder'; 11220 } 11221 getFolderTitleForUploadClip(folderId) { 11222 let folderTitle = this.getFolderTitleById(folderId); 11223 if (folderTitle == "Trash") { 11224 return "Main folder"; 11225 } else { 11226 return folderTitle; 11227 } 11228 } 11229 getPrivacyById(folderId) { 11230 return this.state.folders.filter(folder => folder.folderId === folderId)[0].privacy; 11231 } 11232 getClipTitleById(clipId) { 11233 return this.state.clips.length > 0 ? this.state.clips.filter(clip => clip.clipId === clipId)[0].title : ''; 11234 } 11235 getClipUrlById(clipId) { 11236 return this.state.clips.length > 0 ? this.state.clips.filter(clip => clip.clipId === clipId)[0].url : ''; 11237 } 11238 getModalContent(modal) { 11239 switch (modal) { 11240 case false: 11241 return null; 11242 case 'removeFolder': 11243 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].RemoveFolderModalContent, { 11244 currentFolder: this.state.folderRightClicked ? this.state.folderRightClicked.folderId : this.state.currentFolder, 11245 removeFolder: this.removeFolder, 11246 closeModal: this.hideModal, 11247 setNotification: this.props.setNotification 11248 // title={this.getFolderTitleById(this.state.currentFolder)} 11249 , 11250 title: this.state.folderRightClicked ? this.state.folderRightClicked.title : this.getFolderTitleById(this.state.currentFolder) 11251 }); 11252 case 'renameFolder': 11253 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].RenameFolderModalContent, { 11254 currentFolder: this.state.folderRightClicked ? this.state.folderRightClicked.folderId : this.state.currentFolder, 11255 oldFolderTitle: this.state.folderRightClicked ? this.state.folderRightClicked.title : this.getFolderTitleById(this.state.currentFolder), 11256 renameFolder: this.renameFolder, 11257 closeModal: this.hideModal, 11258 setNotification: this.props.setNotification 11259 }); 11260 case 'removeClips': 11261 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].RemoveClipsModalContent, { 11262 removeClips: this.removeClips, 11263 closeModal: this.hideModal, 11264 setNotification: this.props.setNotification, 11265 currentFolder: this.state.currentFolder 11266 }); 11267 case 'selectDestinationFolder': 11268 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].SelectDestinationFolder, { 11269 moveToFolder: this.moveToFolder, 11270 closeModal: this.hideModal, 11271 folders: this.props.folders, 11272 sharedFolder: this.state.currentFolder && this.state.currentFolder != "trash" ? this.getPrivacyById(this.state.currentFolder) : false, 11273 currentFolder: this.state.currentFolder, 11274 currentFolderTitle: this.getFolderTitleById(this.state.currentFolder), 11275 setNotification: this.props.setNotification, 11276 setNewFolderBeforeMovingClips: this.setNewFolderBeforeMovingClips 11277 }); 11278 // case 'removeClipsFromTrash': 11279 // return <ModalWindow show={feedbacPopUp} > 11280 // <Popup 11281 // title={feedbackPopUpTitle} 11282 // content={feedbackPopUpContent} 11283 // cancel={"Cancel"} 11284 // ok={"Delete"} 11285 // onCancelClick={() => {onCloseFeedbackPopUp()}} 11286 // onYesClick={() => {onOkFeedbackPopUp()}} 11287 // type="delete" 11288 // /> 11289 // </ModalWindow> 11290 case 'renameClip': 11291 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].RenameClipModalContent, { 11292 actionClipId: this.state.actionClipId, 11293 oldClipTitle: this.getClipTitleById(this.state.actionClipId), 11294 renameClip: this.renameClip, 11295 closeModal: this.hideModal, 11296 setNotification: this.props.setNotification 11297 }); 11298 case 'newFolder': 11299 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].NewFolderModalContent, { 11300 createFolder: this.createFolder, 11301 closeModal: this.hideModal, 11302 setNotification: this.props.setNotification 11303 }); 11304 case 'newBlankClip': 11305 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].NewBlankClipModalContent, { 11306 createClip: this.createClip, 11307 history: this.props.history, 11308 closeModal: this.hideModal, 11309 setNotification: this.props.setNotification 11310 }); 11311 case 'shareClip': 11312 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].ShareClipModalContent, { 11313 clipUrl: this.getClipUrlById(this.state.actionClipId), 11314 title: this.getClipTitleById(this.state.actionClipId), 11315 closeModal: this.hideModal, 11316 setNotification: this.props.setNotification 11317 }); 11318 //this case is for the drag and drop case 11319 case 'upload': 11320 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].UploadModalContent, { 11321 uploadClip: this.uploadClip, 11322 closeModal: () => this.hideModal, 11323 setNotification: this.props.setNotification, 11324 folderTitle: this.getFolderTitleForUploadClip(this.state.currentFolder) 11325 }); 11326 case 'uploadPreview': 11327 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].UploadModalContent, { 11328 uploadClip: this.uploadClip, 11329 closeModal: this.hideModal, 11330 setNotification: this.props.setNotification, 11331 folderTitle: this.getFolderTitleForUploadClip(this.state.currentFolder), 11332 fileData: this.state.fileData 11333 }); 11334 case 'moveClips': 11335 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].MoveClipsModalContent, { 11336 destFolderId: this.state.destFolderId, 11337 toFolderTitle: this.getFolderTitleById(this.state.destFolderId), 11338 moveToFolder: this.moveToFolder, 11339 closeModal: this.hideModal, 11340 setNotification: this.props.setNotification 11341 }); 11342 case 'shareFolder': 11343 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].ShareFolderModalContent, { 11344 folderUrl: this.state.folderRightClicked ? this.state.folderRightClicked.folderId : this.state.currentFolder, 11345 title: this.getFolderTitleById(this.state.currentFolder), 11346 sharedFolder: this.state.folderRightClicked ? this.state.folderRightClicked.privacy : this.getPrivacyById(this.state.currentFolder), 11347 changeFolderPrivacy: this.changeFolderPrivacy, 11348 closeModal: this.hideModal, 11349 setNotification: this.props.setNotification, 11350 showDisableLink: true 11351 }); 11352 case 'onboarding': 11353 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].Onboarding, { 11354 closeModal: this.onCloseOnboardingModal, 11355 currentUser: this.props.currentUser, 11356 setImgSrc: this.setImgSrcState 11357 }); 11358 default: 11359 alert("there is no such modal " + modal); 11360 return null; 11361 } 11362 } 11363 render() { 11364 const currentUser = this.props.currentUser; 11365 let dashboard = currentUser && /*#__PURE__*/react_default.a.createElement("div", { 11366 ref: this.DashboardRef, 11367 className: [this.state.isPromoBannerClosed ? Dashboard_default.a.container : Dashboard_default.a.containerWithBanner, this.state.sidebarOpened ? Dashboard_default.a.sidebarOpened : '', this.state.pointEventsNone ? Dashboard_default.a.pointEventsNone : '', this.state.isFilesUploading ? 'filesDragover' : ''].join(' ') 11368 }, /*#__PURE__*/react_default.a.createElement("div", { 11369 className: [Dashboard_default.a.sidebar].join(' '), 11370 onClick: this.closeSidebar 11371 }, /*#__PURE__*/react_default.a.createElement("div", { 11372 className: [Dashboard_default.a.logo, Dashboard_default.a.logoTop].join(' '), 11373 onClick: this.goHome 11374 }, "screen.link"), /*#__PURE__*/react_default.a.createElement(ClipActions["a" /* default */], { 11375 setNotification: this.props.setNotification, 11376 setModal: this.setModal, 11377 history: this.props.history, 11378 uploadClip: this.uploadClip, 11379 createFolder: this.createFolder, 11380 setFileData: this.setFileData, 11381 showUploadModal: this.showUploadModal, 11382 currentFolder: this.state.currentFolder, 11383 isFull: this.state.isFull, 11384 selectAllClips: this.state.selectAllClips, 11385 selectedClips: this.state.selectedClips 11386 }), /*#__PURE__*/react_default.a.createElement(FolderList["a" /* default */], { 11387 setFolderRightClicked: this.setFolderRightClicked, 11388 setModal: this.setModal, 11389 setMoveModal: this.setMoveModal, 11390 setCurrentFolder: this.props.setCurrentFolder, 11391 setClipsSelection: this.setClipsSelection, 11392 resetClipsSelection: this.resetClipsSelection, 11393 history: this.props.history, 11394 userId: this.props.userId, 11395 lastFolderDeleted: this.state.lastFolderDeleted, 11396 folders: this.props.folders, 11397 getFolders: this.props.getFolders, 11398 currentFolder: this.state.currentFolder, 11399 changeFolderPrivacy: this.changeFolderPrivacy, 11400 sharedFolder: this.props.sharedFolder, 11401 isLow: this.state.isLow, 11402 isFull: this.state.isFull, 11403 isPromoBannerClosed: this.state.isPromoBannerClosed, 11404 selectAllClips: this.state.selectAllClips, 11405 selectedClips: this.state.selectedClips, 11406 setNotification: this.props.setNotification, 11407 removeClips: this.removeClips 11408 }), /*#__PURE__*/react_default.a.createElement("div", { 11409 className: Dashboard_default.a.clipsLimitations 11410 }, /*#__PURE__*/react_default.a.createElement(Limitations["a" /* default */], { 11411 clipsUsed: this.state.clipsUsed, 11412 clipsLimit: this.state.clipsLimit 11413 })), /*#__PURE__*/react_default.a.createElement("div", { 11414 className: [Dashboard_default.a.logo, Dashboard_default.a.logoBottom, this.state.isFull || this.state.isLow ? Dashboard_default.a.hide : ''].join(' '), 11415 onClick: this.goHome 11416 }, "screen.link")), /*#__PURE__*/react_default.a.createElement("div", { 11417 className: Dashboard_default.a.content 11418 }, /*#__PURE__*/react_default.a.createElement("div", { 11419 className: [Dashboard_default.a.header, this.state.shadowEffect ? Dashboard_default.a.shadowEffect : ''].join(' ') 11420 }, /*#__PURE__*/react_default.a.createElement("div", { 11421 className: Dashboard_default.a.toggleSidebarButton, 11422 onClick: this.toggleSidebar 11423 }), /*#__PURE__*/react_default.a.createElement(FolderActions["a" /* default */], { 11424 setModal: this.setModal, 11425 setShareClipModal: this.setShareClipModal, 11426 title: this.getFolderTitleById(this.state.currentFolder), 11427 isClipsSelected: this.state.selectedClips.length > 1 && this.state.clips.length > 1 || this.state.selectedClips.length > 1, 11428 isClipSelected: this.state.selectedClips.length === 1 && this.state.clips.length === 1 || this.state.selectedClips.length === 1, 11429 isAllClipsSelected: this.state.selectAllClips, 11430 clips: this.state.clips, 11431 selectedClips: this.state.selectedClips, 11432 setClipsSelection: this.setClipsSelection, 11433 resetClipsSelection: this.resetClipsSelection, 11434 removeClips: this.removeClips, 11435 renameFolder: this.renameFolder, 11436 removeFolder: this.removeFolder, 11437 changeFolderPrivacy: this.changeFolderPrivacy, 11438 currentFolderObject: this.getFolderById(this.state.currentFolder), 11439 currentFolder: this.state.currentFolder, 11440 isOpen: this.isOpen, 11441 setFolderRightClicked: this.setFolderRightClicked, 11442 setNotification: this.props.setNotification, 11443 setRemoveClipsModal: this.setRemoveClipsModal, 11444 downloadClip: this.downloadClip, 11445 selectDestinationFolderTrigger: this.selectDestinationFolderTrigger, 11446 duplicateClip: this.duplicateClip 11447 }), this.state.currentFolder !== 'trash' && (this.state.clips.length > 0 || this.state.searchQuery || this.props.clipsLoading) && !(this.state.selectedClips.length > 0 || this.state.selectAllClips) && /*#__PURE__*/react_default.a.createElement(SearchInput["a" /* default */], { 11448 set: this.props.setSearchQuery, 11449 text: this.props.searchQuery, 11450 loading: this.props.clipsLoading 11451 }), currentUser && /*#__PURE__*/react_default.a.createElement(Dropdown["a" /* default */], { 11452 isOpen: this.isOpen, 11453 className: 'DashboardDropDown', 11454 imgSrc: this.state.imgSrc 11455 })), /*#__PURE__*/react_default.a.createElement(ClipList["a" /* default */], { 11456 uploadClip: this.uploadClip, 11457 isFilesUploading: this.state.isFilesUploading, 11458 hasMoreClips: this.state.hasMoreClips, 11459 history: this.props.history, 11460 clips: this.state.clips, 11461 currentUser: this.props.currentUser, 11462 userId: this.props.userId, 11463 getClips: this.props.getClips, 11464 selectAllClips: this.state.selectAllClips, 11465 selectedClips: this.state.selectedClips, 11466 clipSelectionToggle: this.clipSelectionToggle, 11467 clipSelectionAdd: this.clipSelectionAdd, 11468 searchQuery: this.state.searchQuery, 11469 currentFolder: this.state.currentFolder, 11470 loading: this.props.clipsLoading,
11471 setLoading: this.props.setClipsLoading, 11472 setModal: this.setModal, 11473 setShareClipModal: this.setShareClipModal, 11474 setRenameClipModal: this.setRenameClipModal, 11475 downloadClip: this.downloadClip, 11476 setRemoveClipsModal: this.setRemoveClipsModal, 11477 setClipPrivacyClip: this.setClipPrivacyClip, 11478 duplicateClip: this.duplicateClip, 11479 removeClips: this.removeClips, 11480 resetClipsSelection: this.resetClipsSelection, 11481 sharedFolder: this.props.sharedFolder, 11482 shadowEffect: value => this.shadowEffect(value), 11483 isOpen: this.isOpen, 11484 selectDestinationFolderTrigger: this.selectDestinationFolderTrigger, 11485 setFileData: this.setFileData, 11486 showUploadModal: this.showUploadModal, 11487 setNotification: this.props.setNotification, 11488 isEmailVerified: this.state.isEmailVerified, 11489 hideVerificationSuccessNotification: this.hideVerificationSuccessNotification, 11490 reSendEmailVerification: this.reSendEmailVerification, 11491 setClipsSelection: this.setClipsSelection, 11492 currentModal: this.state.currentModal 11493 }))); 11494 let notLoggedIn = !currentUser && /*#__PURE__*/react_default.a.createElement(Modal["a" /* ModalButton */], { 11495 shown: true, 11496 buttonDisabled: true, 11497 closingDisabled: true 11498 }, /*#__PURE__*/react_default.a.createElement(SignForm["a" /* default */], null)); 11499 const currentModalContent = this.getModalContent(this.state.currentModal); 11500 if (!currentUser) { 11501 window.location.href = '/log-in'; 11502 } 11503 const banner = !this.state.isPromoBannerClosed && /*#__PURE__*/react_default.a.createElement(components_PromotionBanner_PromotionBanner, { 11504 actionCallback: this.viewPlans, 11505 closeCallback: this.closeBanner 11506 }); 11507 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, banner, dashboard, /*#__PURE__*/react_default.a.createElement(Modal["c" /* ModalWindow */], { 11508 upload: this.state.fileData, 11509 show: this.state.currentModal, 11510 onClose: this.hideModal 11511 }, currentModalContent)); 11512 } 11513} 11514let mapStateToProps = state => { 11515 return { 11516 userId: state.app.userId, 11517 currentUser: state.app.user, 11518 currentFolder: state.dashboard.currentFolder, 11519 clips: state.dashboard.clips, 11520 folders: state.dashboard.folders, 11521 hasMoreClips: state.dashboard.hasMoreClips, 11522 searchQuery: state.dashboard.searchQuery, 11523 clipsLoading: state.dashboard.clipsLoading 11524 }; 11525}; 11526let mapDispatchToProps = dispatch => { 11527 return { 11528 setAppLoading: v => dispatch({ 11529 type: "SET_APP_LOADING", 11530 value: v 11531 }), 11532 setClipsLoading: v => dispatch({ 11533 type: "SET_CLIPS_LOADING", 11534 value: v 11535 }), 11536 setUserId: userId => dispatch({ 11537 type: "SET_USER_ID", 11538 value: userId 11539 }), 11540 setUser: user => dispatch({ 11541 type: "SET_USER", 11542 value: user 11543 }), 11544 getFolders: () => dispatch(Dashboard_actions["b" /* getFolders */]()), 11545 setFolders: folders => dispatch({ 11546 type: "SET_FOLDERS", 11547 value: folders 11548 }), 11549 getClips: () => dispatch(Dashboard_actions["a" /* getClips */]()), 11550 setClips: clips => dispatch({ 11551 type: "SET_CLIPS", 11552 value: clips 11553 }), 11554 clearUploadStateFromClips: () => dispatch({ 11555 type: "CLEAR_UPLOAD_STATE_FROM_CLIPS" 11556 }), 11557 setClipsHasMore: v => dispatch({ 11558 type: "SET_CLIPS_HAS_MORE", 11559 value: v 11560 }), 11561 setSearchQuery: v => dispatch({ 11562 type: "SET_SEARCH_QUERY", 11563 value: v 11564 }), 11565 setCurrentFolder: v => dispatch({ 11566 type: "SET_CURRENT_FOLDER", 11567 value: v 11568 }), 11569 setNotification: (v, error, timer, uploadingUpdate, multiple, additional) => { 11570 const action = { 11571 type: "SET_APP_NOTIFICATION", 11572 value: v, 11573 error: !!error, 11574 timer: !!timer, 11575 uploadingUpdate, 11576 multiple 11577 }; 11578 if (additional) { 11579 action.additional = additional; 11580 } 11581 ; 11582 return dispatch(action); 11583 } 11584 }; 11585}; 11586/* harmony default export */ var screens_Dashboard_Dashboard = __webpack_exports__["default"] = (Object(react_router["h" /* withRouter */])(Object(Auth["c" /* withAuth */])(Object(es["b" /* connect */])(mapStateToProps, mapDispatchToProps, null, { 11587 forwardRef: true 11588})(Dashboard_Dashboard_Dashboard)))); 11589 11590/***/ }), 11591 11592/***/ "SFJw": 11593/***/ (function(module, exports, __webpack_require__) { 11594 11595// extracted by mini-css-extract-plugin 11596module.exports = {"context-menu-inner":"src-components-FolderContextMenu-FolderContextMenu__context-menu-inner--PFhAE","context-menu-inner-transition":"src-components-FolderContextMenu-FolderContextMenu__context-menu-inner-transition--UmXgG","context-menu-inner-shared-folder":"src-components-FolderContextMenu-FolderContextMenu__context-menu-inner-shared-folder--zSy-
11596p","context-menu-item":"src-components-FolderContextMenu-FolderContextMenu__context-menu-item--eAbvw","disable":"src-components-FolderContextMenu-FolderContextMenu__disable--DX446","separator":"src-components-FolderContextMenu-FolderContextMenu__separator--sWyQP","edit-folder-title":"src-components-FolderContextMenu-FolderContextMenu__edit-folder-title--j0Ke3","share-folder":"src-components-FolderContextMenu-FolderContextMenu__share-folder---9LRo","copy-folder-link":"src-components-FolderContextMenu-FolderContextMenu__copy-folder-link--rlK-z","setPrivate":"src-components-FolderContextMenu-FolderContextMenu__setPrivate--080Qq","setPublic":"src-components-FolderContextMenu-FolderContextMenu__setPublic--2bCNX","download-folder":"src-components-FolderContextMenu-FolderContextMenu__download-folder--n+Vha","delete-folder":"src-components-FolderContextMenu-FolderContextMenu__delete-folder--tedIr"}; 11597 11598/***/ }), 11599 11600/***/ "SL9e": 11601/***/ (function(module, __webpack_exports__, __webpack_require__) { 11602 11603"use strict"; 11604/* harmony import */ var core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("rGqo"); 11605/* harmony import */ var core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0__); 11606/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("q1tI"); 11607/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); 11608/* harmony import */ var _Modal_Modal_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("AUTF"); 11609/* harmony import */ var _Popup_Popup__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("A+iP"); 11610/* harmony import */ var _assets_images_screen_clip_icon_new_svg__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("1pYP"); 11611/* harmony import */ var _assets_images_screen_clip_icon_new_svg__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_assets_images_screen_clip_icon_new_svg__WEBPACK_IMPORTED_MODULE_4__); 11612 11613 11614// import styles from './Browse.css' 11615 11616 11617// import AddImageSvg from '../Support/AddImageSvg/AddImageSvg'; 11618 11619/* harmony default export */ __webpack_exports__["a"] = (/*#__PURE__*/Object(react__WEBPACK_IMPORTED_MODULE_1__["forwardRef"])(function Browse(props, ref) { 11620 // const Browse = forwardRef((props, ref) => { 11621 // export default function Browse(props) { 11622 const [fileData, setFileData] = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(false); 11623 // const [uploading, setUploading] = useState(false); 11624 11625 const [feedbackPopUp, setFeedbackPopUp] = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(false); 11626 const [feedbackPopUpTitle, setFeedbackPopUpTitle] = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(""); 11627 const [feedbackPopUpContent, setFeedbackPopUpContent] = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(""); 11628 let fileRef = Object(react__WEBPACK_IMPORTED_MODULE_1__["useRef"])(null); 11629 11630 // useEffect(() => { 11631 // if(props.fileExplorer){ 11632 // fileRef.current.click() 11633 // } 11634 // }, [props.fileExplorer]) 11635 11636 Object(react__WEBPACK_IMPORTED_MODULE_1__["useImperativeHandle"])(ref, () => ({ 11637 chooseFileClicked() { 11638 if (window.location.pathname === "/settings") { 11639 props.showUploadModal(); 11640 console.log(props.currentUser); 11641 props.showUploadModalAndFileSelectionDialog({ 11642 url: props.currentUser.photoUrl || _assets_images_screen_clip_icon_new_svg__WEBPACK_IMPORTED_MODULE_4___default.a, 11643 name: null, 11644 displayName: null, 11645 size: null, 11646 type: null 11647 }); 11648 } else { 11649 fileRef.current.click(); 11650 } 11651 } 11652 })); 11653 11654 // const chooseFileClicked = useCallback(e => { 11655 // fileRef.current.click() 11656 // }) 11657 11658 function onCloseFeedbackPopUp() { 11659 setFeedbackPopUp(false); 11660 } 11661 const fileChanged = Object(react__WEBPACK_IMPORTED_MODULE_1__["useCallback"])(e => { 11662 if (window.location.pathname === "/settings") { 11663 if (e.target.files.length === 1) { 11664 handleFile(e.target.files[0]); 11665 } else { 11666 setFileData({}); 11667 } 11668 } else { 11669 handleFilesAndUpload(e.target.files); 11670 } 11671 }); 11672 const handleFilesAndUpload = Object(react__WEBPACK_IMPORTED_MODULE_1__["useCallback"])(async files => { 11673 let filesReadyToUpload = []; 11674 let filePromises = []; 11675 // const filePromises = files.map((file) => { 11676 for (const file of files) { 11677 const isImage = file.type === 'image/png' || file.type === 'image/jpeg'; 11678 if (!isImage) { 11679 // props.setNotification("Woops! Unsupported file format, try with JPG or PNG",true,true) 11680 filesReadyToUpload.push({ 11681 name: file.name, 11682 displayName: file.name.substring(0, 20) + '...', 11683 size: formatSize(file.size), 11684 type: file.type, 11685 sizeRaw: file.size 11686 }); 11687 } else { 11688 filePromises.push(new Promise((resolve, reject) => { 11689 let r = new FileReader();
11690 r.readAsDataURL(file); 11691 r.onloadend = async () => { 11692 resolve(filesReadyToUpload.push({ 11693 url: r.result, 11694 name: file.name, 11695 displayName: file.name.substring(0, 20) + '...', 11696 size: formatSize(file.size), 11697 type: file.type, 11698 sizeRaw: file.size 11699 })); 11700 }; 11701 })); 11702 } 11703 } 11704 await Promise.all(filePromises); 11705 props.uploadClip(filesReadyToUpload, msg => { 11706 props.setNotification(msg || "Uploading wasn't finished. Please, check your storage quota", true); 11707 }); 11708 }); 11709 function setFileExplorerFalse() { 11710 window.addEventListener('focus', handleFocusBack); 11711 } 11712 function handleFocusBack() { 11713 props.setFileExplorer(false); 11714 window.removeEventListener('focus', handleFocusBack); 11715 } 11716 const handleFile = Object(react__WEBPACK_IMPORTED_MODULE_1__["useCallback"])(file => { 11717 const isImage = file.type === 'image/png' || file.type === 'image/jpeg'; 11718 if (!isImage) return; 11719 if (props.userImage) { 11720 if (file.size / 1024 / 1024 > 1) { 11721 setFeedbackPopUp(true); 11722 setFeedbackPopUpTitle("Error"); 11723 setFeedbackPopUpContent("The image most be smaller than 1 MB"); 11724 return; 11725 } 11726 } 11727 props.showUploadModal(); 11728 let r = new FileReader(); 11729 r.readAsDataURL(file); 11730 r.onloadend = () => { 11731 setFileData({ 11732 url: r.result, 11733 name: file.name, 11734 displayName: file.name.substring(0, 20) + '...', 11735 size: formatSize(file.size), 11736 type: file.type 11737 }); 11738 if (r.result) { 11739 // alert('file loaded') 11740 props.showUploadModalAndFileSelectionDialog({ 11741 url: r.result, 11742 name: file.name, 11743 displayName: file.name.substring(0, 20) + '...', 11744 size: formatSize(file.size), 11745 type: file.type 11746 }); 11747 fileRef.current.value = ""; 11748 } 11749 }; 11750 }); 11751 function pasteClipHandler(e) { 11752 let items = (e.clipboardData || e.originalEvent.clipboardData).items; 11753 const files = []; 11754 for (let i = 0; i < items.length; i++) { 11755 // if (items[i].type.indexOf("image") === 0) { 11756 // handleFile(items[i].getAsFile()); 11757 files.push(items[i].getAsFile()); 11758 // break; // only one image limit 11759 // } 11760 } 11761 if (files.length === 1) { 11762 const isImage = files[0].type === 'image/png' || files[0].type === 'image/jpeg'; 11763 if (!isImage) { 11764 props.setNotification("Sorry, this format is not supported yet. Please use JPG or PNG.", true, true); 11765 return; 11766 } 11767 } 11768 handleFilesAndUpload(files); 11769 } 11770 ; 11771 Object(react__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(() => { 11772 document.addEventListener('paste', pasteClipHandler); 11773 return () => document.removeEventListener('paste', pasteClipHandler); 11774 }, []); 11775 const formatSize = Object(react__WEBPACK_IMPORTED_MODULE_1__["useCallback"])(size => { 11776 if (size > 1024 * 1024 * 1024 * 1024) return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB';else if (size > 1024 * 1024 * 1024) return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB';else if (size > 1024 * 1024) return (size / 1024 / 1024).toFixed(2) + ' MB';else if (size > 1024) return (size / 1024).toFixed(2) + ' KB'; 11777 return size.toString() + ' B'; 11778 }); 11779 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_1___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("input", { 11780 "data-max-size": "1024", 11781 type: "file", 11782 multiple: "multiple", 11783 ref: fileRef, 11784 accept: "image/jpeg, image/png", 11785 onChange: fileChanged, 11786 style: { 11787 display: 'none' 11788 } 11789 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_Modal_Modal_js__WEBPACK_IMPORTED_MODULE_2__[/* ModalWindow */ "c"], { 11790 show: feedbackPopUp, 11791 popup: true 11792 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_Popup_Popup__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], { 11793 title: feedbackPopUpTitle, 11794 content: feedbackPopUpContent, 11795 type: "feedback", 11796 onCancelClick: () => { 11797 onCloseFeedbackPopUp(); 11798 } 11799 }))); 11800})); 11801 11802/***/ }), 11803 11804/***/ "TwnW":
11805/***/ (function(module, exports) { 11806 11807module.exports = "/89fc9930891325624126aa0c3533f573.png"; 11808 11809/***/ }), 11810 11811/***/ "Tyxy": 11812/***/ (function(module, exports) { 11813 11814module.exports = "data:image/svg+xml,%3Csvg width='27' height='26' viewBox='0 0 27 26' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M21 5a2.5 2.5 0 0 1 2.5 2.5v11A2.5 2.5 0 0 1 21 21H6a2.5 2.5 0 0 1-2.5-2.5v-11A2.5 2.5 0 0 1 6 5h15zm-8.25 1.5H6a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h6.75v-13zm8.25 0h-6.75v13H21a1 1 0 0 0 1-1v-11a1 1 0 0 0-1-1zM11 15a.5.5 0 1 1 0 1H7a.5.5 0 1 1 0-1h4zm9-3a.5.5 0 1 1 0 1h-4a.5.5 0 1 1 0-1h4zm-9 0a.5.5 0 1 1 0 1H7a.5.5 0 1 1 0-1h4zm0-3a.5.5 0 1 1 0 1H7a.5.5 0 0 1 0-1h4zm9 0a.5.5 0 1 1 0 1h-4a.5.5 0 1 1 0-1h4z' fill='%232F3C4D' fill-rule='evenodd'/%3E %3C/svg%3E" 11815 11816/***/ }), 11817 11818/***/ "UCaZ": 11819/***/ (function(module, exports, __webpack_require__) { 11820 11821// extracted by mini-css-extract-plugin 11822module.exports = {"PleaseWait":"PleaseWait","hidden":"hidden","lds-ripple":"lds-ripple"}; 11823 11824/***/ }), 11825 11826/***/ "UbHR": 11827/***/ (function(module, exports) { 11828 11829module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='a' width='155%25' height='155%25' x='-27.5%25' y='-27.5%25' filterUnits='objectBoundingBox'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='1.5'/%3E%3CfeColorMatrix in='shadowBlurOuter1' result='shadowMatrixOuter1' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.21 0'/%3E%3CfeMerge%3E%3CfeMergeNode in='shadowMatrixOuter1'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='32' height='32'/%3E%3Cg fill='%23171819' stroke='%23FFF' filter='url(%23a)' transform='translate(6 6)'%3E%3Cpath d='M11.5,-0.5 L11.5,8.5 L20.5,8.5 L20.5,11.5 L11.5,11.5 L11.5,20.5 L8.5,20.5 L8.5,11.5 L-0.5,11.5 L-0.5,8.5 L8.5,8.5 L8.5,-0.5 L11.5,-0.5 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E" 11830 11831/***/ }), 11832 11833/***/ "V8AA": 11834/***/ (function(module, exports, __webpack_require__) { 11835 11836// extracted by mini-css-extract-plugin 11837module.exports = {"Underlay":"Underlay","autosnapMode":"autosnapMode","clipping":"clipping","clipped":"clipped","pointerless":"pointerless","leftHover":"leftHover","rightHover":"rightHover","topHover":"topHover","bottomHover":"bottomHover"}; 11838 11839/***/ }), 11840 11841/***/ "WLdm": 11842/***/ (function(module, exports, __webpack_require__) { 11843 11844// extracted by mini-css-extract-plugin 11845module.exports = {"welcomeBackContaier":"src-screens-WelcomeBack-WelcomeBack__welcomeBackContaier--oKHt0","stepsListContaier":"src-screens-WelcomeBack-WelcomeBack__stepsListContaier--LHsmO","stepsListMobileContaier":"src-screens-WelcomeBack-WelcomeBack__stepsListMobileContaier--33amh","stepsListTabletContaier":"src-screens-WelcomeBack-WelcomeBack__stepsListTabletContaier--X8Qz1","mainContentContaier":"src-screens-WelcomeBack-WelcomeBack__mainContentContaier--8OmiD","logoContainer":"src-screens-WelcomeBack-WelcomeBack__logoContainer--F8hTO","separatorContainer":"src-screens-WelcomeBack-WelcomeBack__separatorContainer--BJYW4","separator":"src-screens-WelcomeBack-WelcomeBack__separator--7w5i2"}; 11846 11847/***/ }), 11848 11849/***/ "WUP6": 11850/***/ (function(module, exports, __webpack_require__) { 11851 11852// extracted by mini-css-extract-plugin 11853module.exports = {"outer":"src-components-Modal-Modal__outer--s9ZNP","dontShowUploadModal":"src-components-Modal-Modal__dontShowUploadModal--XVp-g","modal":"src-components-Modal-Modal__modal--08yR6","onboarding":"src-components-Modal-Modal__onboarding--fUtQh","uploadModal":"src-components-Modal-Modal__uploadModal--dVEhG","close"
11853:"src-components-Modal-Modal__close--2aDNs","show":"src-components-Modal-Modal__show--mXDgw","outerCloseModal":"src-components-Modal-Modal__outerCloseModal---Fpfi","ticketPreview":"src-components-Modal-Modal__ticketPreview--y5Y4t","popupModal":"src-components-Modal-Modal__popupModal--OxjwE"}; 11854 11855/***/ }), 11856 11857/***/ "XLB/": 11858/***/ (function(module, exports, __webpack_require__) { 11859 11860// extracted by mini-css-extract-plugin 11861module.exports = {"logos":"src-components-WelcomeBack-Welcome-Welcome__logos--r0iCa","title":"src-components-WelcomeBack-Welcome-Welcome__title--2woZt","content":"src-components-WelcomeBack-Welcome-Welcome__content--O+IEC","clipularUnderline":"src-components-WelcomeBack-Welcome-Welcome__clipularUnderline--d70Zw","bold":"src-components-WelcomeBack-Welcome-Welcome__bold--OJTfu","mainContainer":"src-components-WelcomeBack-Welcome-Welcome__mainContainer--AgFDX","topContainer":"src-components-WelcomeBack-Welcome-Welcome__topContainer--+j4OZ","buttonsContainer":"src-components-WelcomeBack-Welcome-Welcome__buttonsContainer--ED5CZ"}; 11862 11863/***/ }), 11864 11865/***/ "XakR": 11866/***/ (function(module, exports) { 11867 11868module.exports = "/e66054630dfbe391437ee3c758a70d9b.png"; 11869 11870/***/ }), 11871 11872/***/ "Ypp/": 11873/***/ (function(module, exports, __webpack_require__) { 11874 11875// extracted by mini-css-extract-plugin 11876module.exports = {"Dialog":"Dialog","hidden":"hidden","header":"header","content":"content","buttons":"buttons","checkbox":"checkbox","checked":"checked","primary":"primary"}; 11877 11878/***/ }), 11879 11880/***/ "YwrL": 11881/***/ (function(module, __webpack_exports__, __webpack_require__) { 11882 11883"use strict"; 11884let config = { 11885 environment: null, 11886 host: window.location.protocol + '//' + window.location.host + '/', 11887 apiHost: null, 11888 currentHost: window.location.host, 11889 googleDriveClientId: '', 11890 paddleConfig: null 11891}; 11892let firebaseConfig = {}; 11893switch (config.currentHost) { 11894 case 'app.screenclip.com': 11895 case 'screen.link': 11896 config.environment = 'prod'; 11897 config.apiHost = 'https://us-central1-screenclip-website-test.cloudfunctions.net/application'; 11898 firebaseConfig = { 11899 apiKey: "AIzaSyCmupiZeueLiNaj-0dGUr6TkFA0oMEFV00", 11900 authDomain: "screenclip-website-test.firebaseapp.com", 11901 databaseURL: "https://screenclip-website-test.firebaseio.com", 11902 projectId: "screenclip-website-test", 11903 storageBucket: "screenclip-website-test.appspot.com", 11904 messagingSenderId: "908089298480" 11905 }; 11906 config.paddleConfig = { 11907 subscriptionPlans: [{ 11908 id: 577031, 11909 type: "pro", 11910 price: 49.00, 11911 yearly: true, 11912 unit: "y" 11913 }, { 11914 id: 577027, 11915 type: "plus", 11916 price: 29.00, 11917 yearly: true, 11918 unit: "y" 11919 }, { 11920 id: 577026, 11921 type: "pro", 11922 price: 5.00, 11923 yearly: false, 11924 unit: "mo" 11925 }, { 11926 id: 577025, 11927 type: "plus", 11928 price: 3.00, 11929 yearly: false, 11930 unit: "mo" 11931 }], 11932 vendor: 105045 11933 }; 11934 config.googleDriveClientId = '908089298480-5ltjev22q5cfnoipkvbsr0sn4opohlta.apps.googleusercontent.com'; 11935 break; 11936 case 'localhost': 11937 case 'screen-link-test.web.app': 11938 config.environment = 'test'; 11939 config.apiHost = 'https://us-central1-screenclip-website.cloudfunctions.net/application'; 11940 firebaseConfig = { 11941 apiKey: "AIzaSyDU03ZxmPd5OG0meWcGzOTZvH0rNaQz7hs", 11942 authDomain: "screenclip-website.firebaseapp.com", 11943 databaseURL: "https://screenclip-website.firebaseio.com", 11944 projectId: "screenclip-website", 11945 storageBucket: "screenclip-website.appspot.com", 11946 messagingSenderId: "1059375991642" 11947 }; 11948 config.paddleConfig = { 11949 subscriptionPlans: [{ 11950 id: 21683, 11951 type: "pro", 11952 price: 49.00, 11953 yearly: true, 11954 unit: "y" 11955 }, { 11956 id: 21682, 11957 type: "plus", 11958 price: 29.00, 11959 yearly: true, 11960 unit: "y" 11961 }, { 11962 id: 21681, 11963 type: "pro", 11964 price: 5.00, 11965 yearly: false, 11966 unit: "mo" 11967 }, { 11968 id: 21680, 11969 type: "plus", 11970 price: 3.00, 11971 yearly: false, 11972 unit: "mo" 11973 }], 11974 vendor: 4220 11975 }; 11976 config.googleDriveClientId = '908089298480-5ltjev22q5cfnoipkvbsr0sn4opohlta.apps.googleusercontent.com'; 11977 break; 11978 default: 11979 config.environment = 'test'; 11980 config.apiHost = 'http://localhost:5001/screenclip-website/us-central1/application'; 11981 firebaseConfig = { 11982 apiKey: "AIzaSyDU03ZxmPd5OG0meWcGzOTZvH0rNaQz7hs", 11983 authDomain: "screenclip-website.firebaseapp.com", 11984 databaseURL: "https://screenclip-website.firebaseio.com", 11985 projectId: "screenclip-website", 11986 storageBucket: "screenclip-website.appspot.com", 11987 messagingSenderId: "1059375991642" 11988 }; 11989 config.paddleConfig = { 11990 subscriptionPlans: [{ 11991 id: 21683, 11992 type: "pro", 11993 price: 49.00, 11994 yearly: true, 11995 unit: "y" 11996 }, { 11997 id: 21682, 11998 type: "plus", 11999 price: 29.00, 12000 yearly: true, 12001 unit: "y" 12002 }, { 12003 id: 21681, 12004 type: "pro", 12005 price: 5.00, 12006 yearly: false, 12007 unit: "mo" 12008 }, { 12009 id: 21680, 12010 type: "plus", 12011 price: 3.00, 12012 yearly: false, 12013 unit: "mo" 12014 }], 12015 vendor: 4220 12016 }; 12017 config.googleDriveClientId = '908089298480-5ltjev22q5cfnoipkvbsr0sn4opohlta.apps.googleusercontent.com'; 12018} 12019config.firebase = firebaseConfig; 12020// config.googleDriveAuthHref = `https://accounts.google.com/o/oauth2/auth?access_type=offline&client_id=${config.googleDriveClientId}&scope=openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile%20https://www.googleapis.com/auth/drive.file&response_type=code&approval_prompt=force&redirect_uri=${window.location.protocol}//${config.currentHost}/settings`; 12021 12022config.googleDriveAuthHref = `https://accounts.google.com/o/oauth2/auth/oauthchooseaccount?access_type=offline&client_id=${config.googleDriveClientId}&prompt=consent&redirect_uri=${window.location.protocol}//${config.currentHost}/settings&response_type=code&scope=email%20profile%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.appfolder%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.file&state=state&flowName=GeneralOAuthFlow`; 12023config.googleDriveAuthHrefFromWelcomeBack = `https://accounts.google.com/o/oauth2/auth?access_type=offline&client_id=${config.googleDriveClientId}&scope=https://www.googleapis.com/auth/drive.file openid email profile&response_type=code&approval_prompt=force&redirect_uri=${window.location.protocol}//${config.currentHost}/welcome-back`; 12024config.siteUrl = `http://${config.currentHost}`; 12025config.functionsApiUrl = `${config.apiHost}/api/v2`; 12026config.apiUrl = `/api`; 12027/* harmony default export */ __webpack_exports__["a"] = (config); 12028 12029/***/ }), 12030 12031/***/ "ZElj": 12032/***/ (function(module, exports, __webpack_require__) { 12033 12034// extracted by mini-css-extract-plugin 12035module.exports = {"contextMenu":"src-components-ClipContextMenu-ClipContextMenu__contextMenu--l72-h","item":"src-components-ClipContextMenu-ClipContextMenu__item--sUeGP","copyLink":"src-components-ClipContextMenu-ClipContextMenu__copyLink--pMeV-","copyImage":"src-components-ClipContextMenu-ClipContextMenu__copyImage--H44ju","shareClip":"src-components-ClipContextMenu-ClipContextMenu__shareClip--GK0J6","clipPrivacy":"src-components-ClipContextMenu-ClipContextMenu__clipPrivacy--MS50S","clipPrivate":"src-components-ClipContextMenu-ClipContextMenu__clipPrivate--DU9Hs","clipPublic":"src-components-ClipContextMenu-ClipContextMenu__clipPublic--E9vbR","duplicateClip":"src-components-ClipContextMenu-ClipContextMenu__duplicateClip--G7RHf","moveTo":"src-components-ClipContextMenu-ClipContextMenu__moveTo--Vb8c1","renameClip":"src-components-ClipContextMenu-ClipContextMenu__renameClip--kB79Y","downloadClip":"src-components-ClipContextMenu-ClipContextMenu__downloadClip--VZaIh","downloadClipsZip":"src-components-ClipContextMenu-ClipContextMenu__downloadClipsZip--wugmk","png":"src-components-ClipContextMenu-ClipContextMenu__png--AAnIG","jpeg":"src-components-ClipContextMenu-ClipContextMenu__jpeg--xj4bN","pdf":"src-components-ClipContextMenu-ClipContextMenu__pdf--VmJxk","visitSource":"src-components-ClipContextMenu-ClipContextMenu__visitSource--PH-kv","disable":"src-components-ClipContextMenu-ClipContextMenu__disable--wNYXa","Trash":"src-components-ClipContextMenu-ClipContextMenu__Trash--iaM-e","separator":"src-components-ClipContextMenu-ClipContextMenu__separator--lFjY0","hidden":"src-components-ClipContextMenu-ClipContextMenu__hidden--D1TTd","itemIsLoading":"src-components-ClipContextMenu-ClipContextMenu__itemIsLoading---nMxF","downloadClipLoading":"src-components-ClipContextMenu-ClipContextMenu__downloadClipLoading--M13fH"}; 12036 12037/***/ }), 12038 12039/***/ "ZWw/": 12040/***/ (function(module, exports, __webpack_require__) { 12041 12042// extracted by mini-css-extract-plugin 12043module.exports = {"title":"title","content":"content","attached-items":"attached-items","button-container":"button-container","yes-button":"yes-button","cancel-button":"cancel-button","delete-button":"delete-button","popup-container":"popup-container"}; 12044 12045/***/ }), 12046 12047/***/ "ZdqS": 12048/***/ (function(module, exports, __webpack_require__) { 12049 12050// extracted by mini-css-extract-plugin 12051module.exports = {"folderName":"src-components-Modal-Content-NewFolder-NewFolder__folderName--5xYHi","buttons":"src-components-Modal-Content-NewFolder-NewFolder__buttons--HdGzN","primary":"src-components-Modal-Content-NewFolder-NewFolder__primary--Y6s6a","activated":"src-components-Modal-Content-NewFolder-NewFolder__activated--Uq0uG","secondary":"src-components-Modal-Content-NewFolder-NewFolder__secondary--72Se9","createFolderModal":"src-components-Modal-Content-NewFolder-NewFolder__createFolderModal--FKAHk","error":"src-components-Modal-Content-NewFolder-NewFolder__error--8Hb5+"}; 12052 12053/***/ }), 12054 12055/***/ "aTqI":
12056/***/ (function(module, exports) { 12057 12058module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='32' height='32'/%3E%3Cpath fill='%23000' stroke='%23FFF' d='M14.5,4.5 C14.94,4.5 15.3231072,4.6144796 15.6523501,4.83397485 C16.6768928,4.6144796 17.06,4.5 17.5,4.5 L21.5,4.5 L21.5,6 C21.5,6.41421356 21.3321068,6.78921356 21.0606602,7.06066017 C20.7892136,7.33210678 20.4142136,7.5 20,7.5 L18,7.5 L17.5003334,22.999 L20,23.5 C20.4142136,23.5 20.7892136,23.6678932 21.0606602,23.9393398 C21.3321068,24.2107864 21.5,24.5857864 21.5,25 L21.5,26.5 L17.5,26.5 C16.9642857,26.5 16.5419874,26.3789168 16.2226499,26.1660251 C15.4580126,26.3789168 15.0357143,26.5 14.5,26.5 L10.5,26.5 L10.5,25 C10.5,24.5857864 10.6678932,24.2107864 10.9393398,23.9393398 C11.2107864,23.6678932 11.5857864,23.5 11.99975,23.5000001 L13.9998333,23.499 L14.5,8 L12,7.5 C11.5857864,7.5 11.2107864,7.33210678 10.9393398,7.06066017 C10.6678932,6.78921356 10.5,6.41421356 10.5,6 L10.5,4.5 Z'/%3E%3C/g%3E%3C/svg%3E" 12059 12060/***/ }), 12061 12062/***/ "aYym": 12063/***/ (function(module, __webpack_exports__, __webpack_require__) { 12064 12065"use strict"; 12066/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return FolderActions; }); 12067/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("q1tI"); 12068/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 12069/* harmony import */ var _FolderActions_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("79y4"); 12070/* harmony import */ var _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_FolderActions_css__WEBPACK_IMPORTED_MODULE_1__); 12071/* harmony import */ var _Checkbox_Checkbox__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("NLkX"); 12072/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("+n12"); 12073/* harmony import */ var _FolderContextMenu_FolderContextMenu__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("kNQY"); 12074/* harmony import */ var _Loader_Loader__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("3dzz"); 12075/* harmony import */ var _Title_Title__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("pHYj"); 12076 12077 12078 12079 12080 12081 12082 12083function FolderActions(props) { 12084 const renameFolderClicked = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(e => { 12085 props.setFolderRightClicked(false); 12086 setRenameClicked(true); 12087 // props.setModal('renameFolder') 12088 }); 12089 const removeFolderClicked = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(e => { 12090 props.setFolderRightClicked(false); 12091 props.setModal('removeFolder'); 12092 }); 12093 const shareFolderClicked = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(e => { 12094 props.setFolderRightClicked(false); 12095 props.setModal('shareFolder'); 12096 }); 12097 const [folderPrivacy, setFolderPrivacy] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(props.sharedFolder); 12098 12099 // const downloadClipsClicked = useCallback(e => downloadClips(props.clips)) 12100 const [folderGroupActionsMaxWidth, setFolderGroupActionsMaxWidth] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(null); 12101 const [shadowEffect, setShadowEffect] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false); 12102 const [showFolderContextMenu, setShowFolderContextMenu] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false); 12103 const [showLoader, setShowLoader] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false); 12104 const [renameClicked, setRenameClicked] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false); 12105 const folderActionsContainer = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null); 12106 12107 // const removeClipsClicked = useCallback(e => props.setModal('removeClips')) 12108 // const shareClipClicked = useCallback((e, clipId) => props.setShareClipModal(clipId)) 12109 // const copyClipClicked = useCallback(e => props.setModal('copyClip')) 12110 // const copyClipLinkClicked = useCallback(e => props.setModal('copyClipLink')) 12111 // const downloadClipClicked = useCallback(async e => { 12112 // if (props.selectedClips.length === 0 || props.clips.length === 0) return 12113 // downloadClips(props.clips.filter(clip => props.selectedClips.includes(clip.clipId))) 12114 // }) 12115 12116 Object(react__WEBPACK_IMPORTED_MODULE_0__["useLayoutEffect"])(() => { 12117 let folderNameStyle; 12118 function updateFolderNameStyle() { 12119 if (window.innerWidth < 576) { 12120 folderNameStyle = { 12121 width: "170px" 12122 }; 12123 setFolderGroupActionsMaxWidth(folderNameStyle); 12124 } else { 12125 let folderNameWidth = folderActionsContainer.current.offsetWidth / 2 - 18 - 8 + "px"; 12126 folderNameStyle = { 12127 width: folderNameWidth 12128 }; 12129 setFolderGroupActionsMaxWidth(folderNameStyle); 12130 } 12131 } 12132 window.addEventListener('resize', updateFolderNameStyle); 12133 updateFolderNameStyle(); 12134 return () => window.removeEventListener('resize', updateFolderNameStyle); 12135 }, []); 12136 Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { 12137 if (!showFolderContextMenu) { 12138 props.isOpen(false); 12139 } else { 12140 props.isOpen(true); 12141 } 12142 }, [showFolderContextMenu]); 12143 Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { 12144 setShadowEffect(props.shadowEffect); 12145 }, [props.shadowEffect]); 12146 function handlerFolderActionContextMenu() { 12147 setShowFolderContextMenu(!showFolderContextMenu); 12148 } 12149 function contextMenuItemShareFolderClicked() { 12150 closeContextMenu(); 12151 shareFolderClicked(); 12152 } 12153 function contextMenuItemRenameFolderClicked() { 12154 closeContextMenu(); 12155 renameFolderClicked(); 12156 } 12157 function contextMenuItemRemoveFolderClicked() { 12158 closeContextMenu(); 12159 removeFolderClicked(); 12160 } 12161 async function contextMenuItemDownloadAllClips() { 12162 closeContextMenu(); 12163 await Object(_utils_utils__WEBPACK_IMPORTED_MODULE_3__[/* downloadClips */ "c"])(props.clips, setShowLoader, props.title); 12164 } 12165 const changeFolderPrivacy = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(async privacy => { 12166 closeContextMenu(); 12167 props.setFolderRightClicked(false); 12168 if (privacy == "public") { 12169 setFolderPrivacy("private"); 12170 await props.changeFolderPrivacy({ 12171 folderId: props.currentFolder, 12172 privacy: "private" 12173 }, msg => { 12174 props.setNotification(msg || "Setting the folder privacy to private wasn't finished. There was an error"); 12175 }); 12176 } else { 12177 setFolderPrivacy("public"); 12178 await props.changeFolderPrivacy({ 12179 folderId: props.currentFolder, 12180 privacy: "public" 12181 }, msg => { 12182 props.setNotification(msg || "Setting the folder privacy to private wasn't finished. There was an error"); 12183 }); 12184 } 12185 }); 12186 function closeContextMenu() { 12187 setShowFolderContextMenu(false); 12188 } 12189 function updateTitle(value) { 12190 props.setFolderRightClicked(false); 12191 setRenameClicked(false); 12192 if (value.length > 0 && value !== props.title) { 12193 let data = { 12194 folderId: props.currentFolder, 12195 title: value 12196 }; 12197 props.renameFolder(data, msg => { 12198 props.setNotification(msg || "Renaming Folder wasn't finished. There was an error", true); 12199 }); 12200 } 12201 } 12202 const duplicateClip = () => {
12203 let clip = props.clips.find(clip => props.selectedClips.includes(clip.clipId)); 12204 props.duplicateClip(clip, msg => { 12205 props.setNotification(msg || "Clip duplication error", true); 12206 }); 12207 }; 12208 const sendToTrash = () => { 12209 let clips = [...props.selectedClips]; 12210 props.removeClips(() => props.setNotification("Moving Clip to Trash wasn't successful"), clips); 12211 }; 12212 const removePermanently = () => { 12213 let clips = [...props.selectedClips]; 12214 props.setRemoveClipsModal(clips); 12215 }; 12216 const isNotStatic = props.currentFolder && props.currentFolder !== 'trash'; 12217 const isTrashFolder = window.location.pathname === "/dashboard/trash"; 12218 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("section", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12219 ref: folderActionsContainer, 12220 className: [_FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.folderActions, props.clips.length > 0 ? '' : _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.disabled].join(' ') 12221 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12222 className: _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.folderGroupActions, 12223 onClick: props.setClipsSelection 12224 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Checkbox_Checkbox__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], { 12225 onClick: props.setClipsSelection, 12226 checked: props.isAllClipsSelected, 12227 indeterminate: props.selectedClips.length > 0 12228 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12229 /*onClick={(!props.sharedFolder && isNotStatic) ? renameFolderClicked : null} */className: _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.folderTitle 12230 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12231 className: _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.folderTitleHome, 12232 style: { 12233 cursor: "pointer" 12234 } 12235 }, props.selectedClips.length < 1 && !props.isAllClipsSelected && 'Select all', props.selectedClips.length > 0 && `Selected (${props.selectedClips.length})`, props.isAllClipsSelected && 'All selected'))), (props.selectedClips.length > 0 || props.isAllClipsSelected) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 12236 className: _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.closeButton, 12237 onClick: props.resetClipsSelection 12238 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 12239 className: [_FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.downloadButton, isTrashFolder ? _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.downloadButtonTrashFolder : '', _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.buttonText].join(' '), 12240 onClick: props.downloadClip 12241 }, "Download"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 12242 className: [_FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.moveButton, isTrashFolder ? _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.moveButtonTrashFolder : '', _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.buttonText].join(' '), 12243 onClick: props.selectDestinationFolderTrigger 12244 }, "Move"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 12245 className: [_FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.duplicateButton, isTrashFolder ? _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.hide : '', _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.buttonText].join(' '), 12246 onClick: duplicateClip 12247 }, "Duplicate"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", { 12248 className: [_FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.deleteButton, isTrashFolder ? _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.deleteButtonTrashFolder : '', _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.buttonText].join(' '), 12249 onClick: isTrashFolder ? removePermanently : sendToTrash 12250 }, isTrashFolder ? 'Delete' : 'Trash')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12251 className: _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.folderClipActions, 12252 style: { 12253 display: 'none' 12254 } 12255 }, !props.sharedFolder && isNotStatic && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12256 title: "Rename Folder", 12257 className: _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.folderActionRename, 12258 onClick: renameFolderClicked 12259 }), isNotStatic && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12260 title: "Share folder", 12261 className: _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.folderActionClipShare, 12262 onClick: shareFolderClicked 12263 }), isNotStatic && (props.clips.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12264 title: "Download folder as .zip", 12265 className: _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.folderActionClipDownload, 12266 onClick: () => { 12267 contextMenuItemDownloadAllClips(); 12268 } 12269 }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12270 title: "Add clips to download this folder", 12271 className: _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.folderActionClipDownloadDisabled 12272 })), !props.sharedFolder && isNotStatic && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12273 title: `Delete folder and send all clips to the trash.`, 12274 className: _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.folderActionFolderDelete, 12275 onClick: removeFolderClicked 12276 }), isNotStatic && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12277 className: _FolderActions_css__WEBPACK_IMPORTED_MODULE_1___default.a.folderActionClipOptions, 12278 onClick: handlerFolderActionContextMenu 12279 }))), showFolderContextMenu && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_FolderContextMenu_FolderContextMenu__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"], { 12280 showFolderContextMenu: showFolderContextMenu, 12281 closeContextMenu: closeContextMenu, 12282 shareFolderClicked: contextMenuItemShareFolderClicked, 12283 renameFolderClicked: contextMenuItemRenameFolderClicked, 12284 removeFolderClicked: contextMenuItemRemoveFolderClicked, 12285 downloadAllClipsClicked: contextMenuItemDownloadAllClips, 12286 changeFolderPrivacy: changeFolderPrivacy, 12287 sharedFolder: props.sharedFolder, 12288 privacy: props.currentFolderObject ? props.currentFolderObject.privacy : '', 12289 currentFolder: props.currentFolder, 12290 clips: props.clips 12291 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Loader_Loader__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"], { 12292 full: true, 12293 hidden: !showLoader 12294 }))); 12295} 12296 12297/***/ }), 12298 12299/***/ "ags5": 12300/***/ (function(module, exports, __webpack_require__) { 12301 12302// extracted by mini-css-extract-plugin 12303module.exports = {"Align":"Align","current":"current"}; 12304 12305/***/ }), 12306 12307/***/ "akdU": 12308/***/ (function(module, exports, __webpack_require__) { 12309 12310// extracted by mini-css-extract-plugin 12311 12312/***/ }), 12313 12314/***/ "b/j2": 12315/***/ (function(module, exports, __webpack_require__) { 12316 12317// extracted by mini-css-extract-plugin 12318module.exports = {"overscroll-disabled":"src-screens-Previewer-Previewer__overscroll-disabled--JxOlk","E
12318ditor":"src-screens-Previewer-Previewer__Editor--OMI+F","Previewer":"src-screens-Previewer-Previewer__Previewer--71H-P","navbar":"src-screens-Previewer-Previewer__navbar--q1T5E","clipTitleContainer":"src-screens-Previewer-Previewer__clipTitleContainer--N3Ieq","clipTitle":"src-screens-Previewer-Previewer__clipTitle--N79Qs","topMenu":"src-screens-Previewer-Previewer__topMenu--T-aP8","subMenu":"src-screens-Previewer-Previewer__subMenu--MBrpv","opened":"src-screens-Previewer-Previewer__opened--KHpRs","menuItem":"src-screens-Previewer-Previewer__menuItem--2hiHn","disable":"src-screens-Previewer-Previewer__disable--X15x6","separator":"src-screens-Previewer-Previewer__separator--Px6fc","menuItemHideMarkers":"src-screens-Previewer-Previewer__menuItemHideMarkers--iwX4W","menuItemSetPrivacy":"src-screens-Previewer-Previewer__menuItemSetPrivacy--lTyNL","private":"src-screens-Previewer-Previewer__private---ANOn","public":"src-screens-Previewer-Previewer__public--XwMbx","menuItemRename":"src-screens-Previewer-Previewer__menuItemRename--zS-4K","menuItemCopyUrl":"src-screens-Previewer-Previewer__menuItemCopyUrl--ZcmJx","menuItemShareClip":"src-screens-Previewer-Previewer__menuItemShareClip--pwMan","menuItemDownload":"src-screens-Previewer-Previewer__menuItemDownload--TxTPS","png":"src-screens-Previewer-Previewer__png--zEXc2","jpeg":"src-screens-Previewer-Previewer__jpeg--NQyq9","pdf":"src-screens-Previewer-Previewer__pdf--RBmOH","menuItemDelete":"src-screens-Previewer-Previewer__menuItemDelete--MBA0r","menuItemCopyImage":"src-screens-Previewer-Previewer__menuItemCopyImage--+6tiD","menuItemVisitSource":"src-screens-Previewer-Previewer__menuItemVisitSource--VgzV-","goToDashboard":"src-screens-Previewer-Previewer__goToDashboard--4BG+J","pointEventsNone":"src-screens-Previewer-Previewer__pointEventsNone---2k4R","clipTitleURL":"src-screens-Previewer-Previewer__clipTitleURL--rGDSb","previewMode":"src-screens-Previewer-Previewer__previewMode--i8YQ+","hiddenForClipsOwnedByPlus":"src-screens-Previewer-Previewer__hiddenForClipsOwnedByPlus--2ChQ1"}; 12319 12320/***/ }), 12321 12322/***/ "b81t": 12323/***/ (function(module, exports, __webpack_require__) { 12324 12325// extracted by mini-css-extract-plugin 12326module.exports = {"mainContainer":"src-screens-ClipUlarMigrationEmail-ClipularMigrationEmail__mainContainer--P+ps9","clipularLogo":"src-screens-ClipUlarMigrationEmail-ClipularMigrationEmail__clipularLogo--asDti","dearClipularUsers":"src-screens-ClipUlarMigrationEmail-ClipularMigrationEmail__dearClipularUsers--kXdz2","text1":"src-screens-ClipUlarMigrationEmail-ClipularMigrationEmail__text1--202ky","logosContainer":"src-screens-ClipUlarMigrationEmail-ClipularMigrationEmail__logosContainer--7a8BC","screenclipLogo":"src-screens-ClipUlarMigrationEmail-ClipularMigrationEmail__screenclipLogo--ZfW8K","plusImg":"src-screens-ClipUlarMigrationEmail-ClipularMigrationEmail__plusImg--fv283","screenlinkLogo":"src-screens-ClipUlarMigrationEmail-ClipularMigrationEmail__screenlinkLogo--Asvlb","text2":"src-screens-ClipUlarMigrationEmail-ClipularMigrationEmail__text2--Ga5KW","comments":"src-screens-ClipUlarMigrationEmail-ClipularMigrationEmail__comments---0aJD","lastText":"src-screens-ClipUlarMigrationEmail-ClipularMigrationEmail__lastText--d6HDa","learnMoreButtonContainer":"src-screens-ClipUlarMigrationEmail-ClipularMigrationEmail__learnMoreButtonContainer--zEQQe","learnMoreButton":"src-screens-ClipUlarMigrationEmail-ClipularMigrationEmail__learnMoreButton--8VXL+"}; 12327 12328/***/ }), 12329 12330/***/ "bTLw": 12331/***/ (function(module, exports, __webpack_require__) { 12332 12333// extracted by mini-css-extract-plugin 12334module.exports = {"storageNotyContainer":"src-components-Limitations-Limitations__storageNotyContainer--6G0X-","viewAllPlans":"src-components-Limitations-Limitations__viewAllPlans--dnHIc","full":"src-components-Limitations-Limitations__full--6RXN3","clipsCountContainer":"src-components-Limitations-Limitations__clipsCountContainer--KK+CN","clipsLimitation":"src-components-Limitations-Limitations__clipsLimitation--r4B+W","low":"src-components-Limitations-Limitations__low--nnIOb","attribute":"src-components-Limitations-Limitations__attribute--vIZBa","type":"src-components-Limitations-Limitations__type--cV4J1"}; 12335 12336/***/ }), 12337 12338/***/ "bXmf": 12339/***/ (function(module, exports, __webpack_require__) { 12340 12341// extracted by mini-css-extract-plugin 12342module.exports = {"lds-ellipsis":"src-components-Loader-Loader__lds-ellipsis--wm5j0","fullscreen":"src-components-Loader-Loader__fullscreen--4+Qzb","white":"src-components-Loader-Loader__white--Isxm
12342N","lds-ellipsis1":"src-components-Loader-Loader__lds-ellipsis1--rhLWa","lds-ellipsis2":"src-components-Loader-Loader__lds-ellipsis2--C3-dy","lds-ellipsis3":"src-components-Loader-Loader__lds-ellipsis3--ceDXs","loader-circle":"src-components-Loader-Loader__loader-circle--M6Olg","rotate":"src-components-Loader-Loader__rotate--h2fwL","prixClipFix":"src-components-Loader-Loader__prixClipFix--KHrn6"}; 12343 12344/***/ }), 12345 12346/***/ "bi3B": 12347/***/ (function(module, __webpack_exports__, __webpack_require__) { 12348 12349"use strict"; 12350/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("q1tI"); 12351/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 12352/* harmony import */ var _Ticker_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("Ipjc"); 12353/* harmony import */ var _Ticker_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_Ticker_css__WEBPACK_IMPORTED_MODULE_1__); 12354 12355 12356class Ticker extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] { 12357 constructor(props) { 12358 super(props); 12359 this.step = 1; 12360 this.state = { 12361 value: props.value, 12362 units: props.units, 12363 mul: 1 12364 }; 12365 this.inputRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createRef(); 12366 } 12367 static getDerivedStateFromProps(nextProps, prevState) { 12368 if (prevState.value !== nextProps.value) { 12369 return { 12370 value: nextProps.value 12371 }; 12372 } 12373 return null; 12374 } 12375 shouldComponentUpdate(nextProps, nextState) { 12376 if (this.state.value !== nextState.value) { 12377 return true; 12378 } 12379 return false; 12380 } 12381 onChange(e) { 12382 let val = e.target.value.trim() === '' ? 0 : e.target.value.trim(); 12383 val = parseFloat(val) / this.state.mul; 12384 this.inputRef.current.value = val; 12385 this.sendChangeRequest(val); 12386 } 12387 sendChangeRequest(value) { 12388 this.props.onChange(value); 12389 } 12390 onKeyPress(e) { 12391 e.stopPropagation(); 12392 if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Enter') { 12393 let val = e.target.value.trim() === '' ? 0 : e.target.value.trim(); 12394 if (e.key === 'ArrowUp') { 12395 val = this.state.value + 1; 12396 } 12397 if (e.key === 'ArrowDown') { 12398 val = this.state.value - 1; 12399 } 12400 this.inputRef.current.value = val; 12401 this.sendChangeRequest(val); 12402 } 12403 if (e.which <= 57 && e.which >= 48 || [8, 9, 37, 39].includes(e.which)) { 12404 return true; 12405 } else e.preventDefault(); 12406 } 12407 stepUp(e) { 12408 e.nativeEvent.stopImmediatePropagation(); 12409 e.nativeEvent.preventDefault(); 12410 let val = this.state.value + this.step; 12411 this.inputRef.current.value = val; 12412 this.sendChangeRequest(val); 12413 } 12414 stepDown(e) { 12415 e.nativeEvent.preventDefault(); 12416 e.nativeEvent.stopImmediatePropagation(); 12417 let val = this.state.value - this.step; 12418 this.inputRef.current.value = val; 12419 this.sendChangeRequest(val); 12420 } 12421 stopPropagation(e) { 12422 e.nativeEvent.preventDefault(); 12423 e.nativeEvent.stopImmediatePropagation(); 12424 } 12425 render() {
12426 let className = ["Ticker"]; 12427 let value = this.state.value; 12428 if (this.props.zero > 0 && value < 10) value = "0" + value; 12429 value = [value, this.props.units].join(" "); 12430 let label = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, this.props.label); 12431 if (!this.props.label || this.props.label.length === 0) { 12432 className.push("nolabel"); 12433 label = ""; 12434 } 12435 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12436 className: className.join(" ") 12437 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { 12438 type: "text", 12439 ref: this.inputRef, 12440 id: this.props.id, 12441 defaultValue: parseFloat(value), 12442 style: this.props.inputStyle, 12443 onBlur: this.onChange.bind(this), 12444 onKeyDown: this.onKeyPress.bind(this) 12445 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12446 onClick: this.stopPropagation.bind(this) 12447 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, label), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12448 className: "up", 12449 onClick: this.stepUp.bind(this) 12450 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12451 className: "down", 12452 onClick: this.stepDown.bind(this) 12453 }))); 12454 } 12455} 12456/* unused harmony default export */ var _unused_webpack_default_export = (Ticker); 12457 12458/***/ }), 12459 12460/***/ "bq4O": 12461/***/ (function(module, exports) { 12462 12463module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='a' width='140%25' height='140%25' x='-20%25' y='-20%25' filterUnits='objectBoundingBox'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='1'/%3E%3CfeColorMatrix in='shadowBlurOuter1' result='shadowMatrixOuter1' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.21 0'/%3E%3CfeMerge%3E%3CfeMergeNode in='shadowMatrixOuter1'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cfilter id='b' width='212.5%25' height='212.5%25' x='-56.2%25' y='-56.2%25' filterUnits='objectBoundingBox'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='1'/%3E%3CfeColorMatrix in='shadowBlurOuter1' result='shadowMatrixOuter1' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.214758832 0'/%3E%3CfeMerge%3E%3CfeMergeNode in='shadowMatrixOuter1'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='32' height='32'/%3E%3Cg fill='%23171819' stroke='%23FFF' filter='url(%23a)' transform='translate(2 10)'%3E%3Cpath d='M11.5,-0.5 L11.5,8.5 L20.5,8.5 L20.5,11.5 L11.5,11.5 L11.5,20.5 L8.5,20.5 L8.5,11.5 L-0.5,11.5 L-0.5,8.5 L8.5,8.5 L8.5,-0.5 L11.5,-0.5 Z'/%3E%3C/g%3E%3Cg fill='%23000' fill-rule='nonzero' stroke='%23FFF' filter='url(%23b)' transform='translate(21.5 2.5)'%3E%3Cpath d='M8,-1 C9.08592789,-0.481018308 9,-0.211000466 9,-4.16333634e-17 C9,0.255922318 8.90236893,0.511844635 8.7070794,0.707134156 L2.41323897,7 L5,7 C5.24352568,7 5.46667724,7.08711291 5.64014392,7.23172869 C5.81655774,7.37880145 5.94121133,7.58560321 5.98390636,7.82083067 C5.99886362,8.21900824 5.89552246,8.47218338 5.74486605,8.65283095 C5.55918217,8.87547889 5.29443857,9 5,9 L-1,9 L-1,3 C-1,2.72385763 -0.888071187,2.47385763 -0.707106781,2.29289322 C-0.526142375,2.11192881 -0.276142375,2 0,2 C0.276142375,2 0.526142375,2.11192881 0.707106781,2.29289322 C0.888071187,2.47385763 1,2.72385763 1,3 L1,5.5849999 L7.29289322,-0.707106781 C7.48815536,-0.902368927 7.74407768,-1 8,-1 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E" 12464 12465/***/ }), 12466 12467/***/ "cg0I": 12468/***/ (function(module, exports, __webpack_require__) { 12469 12470// extracted by mini-css-extract-plugin 12471module.exports = {"image":"src-components-BrokenImage-BrokenImage__image--Re6ep"}; 12472 12473/***/ }), 12474 12475/***/ "cgwY":
12476/***/ (function(module, exports) { 12477 12478module.exports = "/1cd7cd169e10f4362ffc4b9780069ebd.png"; 12479 12480/***/ }), 12481 12482/***/ "f1xP": 12483/***/ (function(module, exports, __webpack_require__) { 12484 12485// extracted by mini-css-extract-plugin 12486module.exports = {"banner-container":"src-components-Banner-Banner__banner-container--ejbvZ","container":"src-components-Banner-Banner__container--VhTMZ","text":"src-components-Banner-Banner__text--J1jd5","button":"src-components-Banner-Banner__button--rsGcf","closeButton":"src-components-Banner-Banner__closeButton--llkBK"}; 12487 12488/***/ }), 12489 12490/***/ "fbhK": 12491/***/ (function(module, __webpack_exports__, __webpack_require__) { 12492 12493"use strict"; 12494/* harmony import */ var core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("rGqo"); 12495/* harmony import */ var core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0__); 12496/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("q1tI"); 12497/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); 12498/* harmony import */ var _Toolbar_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("Bcwi"); 12499/* harmony import */ var _Toolbar_css__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_Toolbar_css__WEBPACK_IMPORTED_MODULE_2__); 12500 12501 12502 12503class Toolbar extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] { 12504 constructor(props) { 12505 super(props); 12506 this.state = { 12507 visible: props.visible, 12508 style: 0, 12509 id: "", 12510 position: "" 12511 }; 12512 } 12513 static getDerivedStateFromProps(nextProps, prevState) { 12514 let ret = {}; 12515 // modes 12516 if (prevState.visible !== nextProps.visible) ret.visible = nextProps.visible; 12517 return Object.keys(ret).length > 0 ? ret : null; 12518 } 12519 componentDidMount() {} 12520 render() { 12521 const className = ["Toolbar"]; 12522 if (this.state.visible) className.push("visible"); 12523 const id = "toolbar-" + this.props.id; 12524 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 12525 className: className.join(" "), 12526 style: this.props.style, 12527 id: id 12528 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", { 12529 className: "center" 12530 }, this.props.center)); 12531 } 12532} 12533/* harmony default export */ __webpack_exports__["a"] = (Toolbar); 12534 12535/***/ }), 12536 12537/***/ "ghug": 12538/***/ (function(module, exports, __webpack_require__) { 12539 12540// extracted by mini-css-extract-plugin 12541module.exports = {"createAccountContainer":"src-components-WelcomeBack-CreateAccount-CreateAccount__createAccountContainer--rFS4Z","title":"src-components-WelcomeBack-CreateAccount-CreateAccount__title--AoQBr","content":"src-components-WelcomeBack-CreateAccount-CreateAccount__content--FwetV","bold":"src-components-WelcomeBack-CreateAccount-CreateAccount__bold--lbntq","signFormContainer":"src-components-WelcomeBack-CreateAccount-CreateAccount__signFormContainer--nZHWR","welcomeMessage":"src-components-WelcomeBack-CreateAccount-CreateAccount__welcomeMessage--GYIg-","newLine":"src-components-WelcomeBack-CreateAccount-CreateAccount__newLine--frr7x","firstExclamationMark":"src-components-WelcomeBack-CreateAccount-CreateAccount__firstExclamationMark--HDhzu","helloEmoji":"src-components-WelcomeBack-CreateAccount-CreateAccount__helloEmoji--1TGG3","welcome":"src-components-WelcomeBack-CreateAccount-CreateAccount__welcome--WQ2gr","secondExclamationMark":"src-components-WelcomeBack-CreateAccount-CreateAccount__secondExclamationMark--IUJ-p"}; 12542 12543/***/ }), 12544 12545/***/ "j+y4": 12546/***/ (function(module, exports, __webpack_require__) { 12547 12548// extracted by mini-css-extract-plugin 12549module.exports = {"folderName":"src-components-Modal-Content-RemoveClips-RemoveClips__folderName---L47G","buttons":"src-components-Modal-Content-RemoveClips-RemoveClips__buttons--ZNbPX","primary":"src-components-Modal-Content-RemoveClips-RemoveClips__primary--6-uEE","activated":"src-components-Modal-Content-RemoveClips-RemoveClips__activated--0a-Qq","deleteButton":"src-components-Modal-Content-RemoveClips-RemoveClips__deleteButton--GkHR+","secondary":"src-components-Modal-Content-RemoveClips-RemoveClips__secondary--Gf0s9","removeFolderModal":"src-components-Modal-Content-RemoveClips-RemoveClips__removeFolderModal--dYkzp","error":"src-components-Modal-Content-RemoveClips-RemoveClips__error--zJy5N"}; 12550 12551/***/ }), 12552 12553/***/ "jVp6": 12554/***/ (function(module, exports, __webpack_require__) { 12555 12556// extracted by mini-css-extract-plugin 12557module.exports = {"Canvas":"Canvas","SCIM":"SCIM","clipped":"clipped","static":"static","dynamic":"dynamic","hidden":"hidden","pointerless":"pointerless","staticCanvas":"staticCanvas"}; 12558 12559/***/ }), 12560 12561/***/ "kIDh": 12562/***/ (function(module, exports, __webpack_require__) { 12563 12564// extracted by mini-css-extract-plugin 12565module.exports = {"container":"src-components-Modal-Content-Onboarding-Onboarding__container---vlUs","title":"src-components-Modal-Content-Onboarding-Onboarding__title--vmqyt","subtitle":"src-components-Modal-Content-Onboarding-Onboarding__subtitle--fyDJ+","dragAndDrop":"src-components-Modal-Content-Onboarding-Onboarding__dragAndDrop--TOdy6","fileDragOver":"src-components-Modal-Content-Onboarding-Onboarding__fileDragOver--85SP1","image":"src-components-Modal-Content-Onboarding-Onboarding__image--msnT1","dragAndDropMessage":"src-components-Modal-Content-Onboarding-Onboarding__dragAndDropMessage--BQiy7","browse":"src-components-Modal-Content-Onboarding-Onboarding__browse--8sV38","input-container":"src-components-Modal-Content-Onboarding-Onboarding__input-container---mneZ","input":"src-components-Modal-Content-Onboarding-Onboarding__input--8DEZN","bottom-message":"src-components-Modal-Content-Onboarding-Onboarding__bottom-message--n6Gx9","next-button-container":"src-components-Modal-Content-Onboarding-Onboarding__next-button-container--Xnzzi","next-button":"src-components-Modal-Content-Onboarding-Onboarding__next-button--4HWk3"}; 12566 12567/***/ }), 12568 12569/***/ "kNQY": 12570/***/ (function(module, __webpack_exports__, __webpack_require__) { 12571 12572"use strict"; 12573/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("q1tI"); 12574/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 12575/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("/MKj"); 12576/* harmony import */ var _config_constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("YwrL"); 12577/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("+n12"); 12578/* harmony import */ var _FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("SFJw"); 12579/* harmony import */ var _FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4__); 12580 12581 12582 12583 12584 12585// import { withRouter } from "react-router-dom" 12586// import { withAuth } from '../Auth'; 12587 12588 12589function closeIfOuterClick(ref, cb) { 12590 Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { 12591 const handle = e => ref.current && !ref.current.contains(e.target) && cb && cb(); 12592 document.addEventListener("mousedown", handle); 12593 return () => document.removeEventListener("mousedown", handle); 12594 }, [ref]); 12595} 12596function FolderContextMenu(props) { 12597 let folderActionContextMenu = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null); 12598 closeIfOuterClick(folderActionContextMenu, props.closeContextMenu); 12599 const [clips, setClips] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false); 12600 const [disableDownloadButton, setDisableDownloadButton] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false); 12601 Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { 12602 async function beforeShowingTheContextMenu() { 12603 if (props.showFolderContextMenu) { 12604 if (typeof props.clips == 'undefined') { 12605 //folder context menu from FolderList 12606 let res = await Object(_utils_utils__WEBPACK_IMPORTED_MODULE_3__[/* getClipsFromParentFolder */ "l"])(props.currentFolder); 12607 if (res.length < 1) { 12608 setDisableDownloadButton(true); 12609 } else { 12610 setDisableDownloadButton(false); 12611 } 12612 folderActionContextMenu.current.style.opacity = 1; 12613 folderActionContextMenu.current.style.pointerEvents = "all"; 12614 } else if (props.clips.length < 1) { 12615 //folder context menu from FolderActions 12616 setDisableDownloadButton(true); 12617 folderActionContextMenu.current.style.opacity = 1; 12618 folderActionContextMenu.current.style.pointerEvents = "all"; 12619 } else { 12620 setDisableDownloadButton(false); 12621 folderActionContextMenu.current.style.opacity = 1; 12622 folderActionContextMenu.current.style.pointerEvents = "all"; 12623 } 12624 } else { 12625 folderActionContextMenu.current.style.opacity = ""; 12626 folderActionContextMenu.current.style.pointerEvents = ""; 12627 setDisableDownloadButton(false); 12628 } 12629 } 12630 beforeShowingTheContextMenu(); 12631 }, [props.showFolderContextMenu]); 12632 function resetOpacity() { 12633 folderActionContextMenu.current.style.opacity = ""; 12634 } 12635 function handlerFolderActionContextMenu() { 12636 if (folderActionContextMenu.current.style.opacity == "") { 12637 folderActionContextMenu.current.style.opacity = 1; 12638 folderActionContextMenu.current.style.zIndex = 1; 12639 } else { 12640 folderActionContextMenu.current.style.opacity = ""; 12641 folderActionContextMenu.current.style.zIndex = -1; 12642 } 12643 } 12644 const getPositionStyles = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => { 12645 if (props.x) { 12646 const pos = {}; 12647 if (window.innerWidth > 576) { 12648 const width = 200; 12649 const height = 235 + 8 * 2; // 235px is menu height and 8px is padding on top and bottom 12650 const menuMargin = props.isPromoBannerClosed ? 0 : 68;
12651 pos['left'] = props.x < window.innerWidth - width ? props.x : props.x - width; 12652 pos['top'] = props.y < window.innerHeight - height - menuMargin ? props.y : props.y - height; 12653 } else { 12654 pos['left'] = (window.innerWidth - 280) / 2; 12655 pos['top'] = 80; 12656 } 12657 return pos; 12658 } 12659 }); 12660 function copyFloderLink() { 12661 props.closeContextMenu(); 12662 const folderUrl = _config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].host + 'folder/' + props.currentFolder; 12663 navigator.clipboard.writeText(folderUrl); 12664 props.setNotification("Folder link copied!"); 12665 } 12666 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12667 ref: folderActionContextMenu, 12668 className: [_FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a['context-menu-inner'], 12669 // props.clips ? styles['context-menu-inner-transition'] : "", 12670 props.sharedFolder ? _FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a['context-menu-inner-shared-folder'] : ''].join(' '), 12671 style: getPositionStyles() 12672 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12673 type: "button", 12674 className: [_FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a['context-menu-item'], _FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a['copy-folder-link']].join(' '), 12675 onClick: copyFloderLink 12676 }, "Copy Folder Link"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12677 type: "button", 12678 className: [_FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a['context-menu-item'], _FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a['share-folder']].join(' '), 12679 onClick: props.shareFolderClicked 12680 }, "Share Folder..."), !props.sharedFolder && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12681 className: [_FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a['context-menu-item'], _FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a.clipPrivacy, props.privacy === 'public' ? _FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a.setPrivate : _FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a.setPublic].join(' '), 12682 onClick: () => { 12683 props.changeFolderPrivacy(props.privacy); 12684 } 12685 }, "Set to ", props.privacy === 'public' ? 'Private' : 'Public'), !props.sharedFolder && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12686 type: "button", 12687 className: [_FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a['context-menu-item'], _FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a['edit-folder-title']].join(' '), 12688 onClick: props.renameFolderClicked 12689 }, "Rename Folder"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12690 type: "button", 12691 className: [_FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a['context-menu-item'], _FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a['download-folder'], disableDownloadButton ? _FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a['disable'] : ""].join(' '), 12692 onClick: props.downloadAllClipsClicked 12693 }, "Download as .zip"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12694 className: _FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a.separator 12695 }), !props.sharedFolder && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 12696 className: [_FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a['context-menu-item'], _FolderContextMenu_css__WEBPACK_IMPORTED_MODULE_4___default.a['delete-folder']].join(' '), 12697 onClick: props.removeFolderClicked 12698 }, "Delete Folder..."))); 12699} 12700// export default withRouter(withAuth(FolderContextMenu)) 12701/* harmony default export */ __webpack_exports__["a"] = (Object(react_redux__WEBPACK_IMPORTED_MODULE_1__[/* connect */ "b"])(null, dispatch => { 12702 return { 12703 setNotification: message => dispatch({ 12704 type: 'SET_APP_NOTIFICATION', 12705 value: message 12706 }) 12707 }; 12708})(FolderContextMenu)); 12709 12710/***/ }), 12711 12712/***/ "kXoP": 12713/***/ (function(module, __webpack_exports__, __webpack_require__) { 12714 12715"use strict"; 12716/* harmony import */ var redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("ANjH"); 12717/* harmony import */ var _reducers_index__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("AEz2"); 12718/* harmony import */ var _mods_state_initial_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("pWsF"); 12719// import { createStore, applyMiddleware, compose } from 'redux'; 12720 12721 12722 12723/* unused harmony default export */ var _unused_webpack_default_export = (Object(redux__WEBPACK_IMPORTED_MODULE_0__[/* createStore */ "d"])(_reducers_index__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"], _mods_state_initial_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"])); 12724 12725/***/ }), 12726 12727/***/ "kZEk": 12728/***/ (function(module, exports, __webpack_require__) { 12729 12730// extracted by mini-css-extract-plugin 12731module.exports = {"faq-container":"src-screens-Faq-Faq__faq-container--U9U6s","faq-title":"src-screens-Faq-Faq__faq-title--r2-bG","pointEventsNone":"src-screens-Faq-Faq__pointEventsNone--jNxGD"}; 12732 12733/***/ }), 12734 12735/***/ "lisH": 12736/***/ (function(module, exports, __webpack_require__) { 12737 12738// extracted by mini-css-extract-plugin 12739module.exports = {"userName":"src-components-Modal-Content-UpdateUserName-UpdateUserName__userName--SuvX0","buttons":"src-components-Modal-Content-UpdateUserName-UpdateUserName__buttons--VGndC","primary":"src-components-Modal-Content-UpdateUserName-UpdateUserName__primary--STFx0","activated":"src-components-Modal-Content-UpdateUserName-UpdateUserName__activated--EUUsk","secondary":"src-components-Modal-Content-UpdateUserName-UpdateUserName__secondary--nGvYS","renameFolderModal":"src-components-Modal-Content-UpdateUserName-UpdateUserName__renameFolderModal--wxtWR","error":"src-components-Modal-Content-UpdateUserName-UpdateUserName__error--zmIM6"}; 12740 12741/***/ }), 12742 12743/***/ "m85V": 12744/***/ (function(module, exports, __webpack_require__) { 12745 12746// extracted by mini-css-extract-plugin 12747module.exports = {"area":"src-components-SignForm-SignForm__area--KGrJm","hideBorder":"src-components-SignForm-SignForm__hideBorder--+R5fH","form":"src-components-SignForm-SignForm__form--OQLUI","signupForm":"src-components-SignForm-SignForm__signupForm--tx1tm","signinForm":"src-components-SignForm-SignForm__signinForm--
12747FeYeX","formContainerSignIn":"src-components-SignForm-SignForm__formContainerSignIn--nIsbw","modifyPadding":"src-components-SignForm-SignForm__modifyPadding--AANgG","formContainerSignUp":"src-components-SignForm-SignForm__formContainerSignUp--LYte0","collapsed":"src-components-SignForm-SignForm__collapsed--j5qup","input-error-focus":"src-components-SignForm-SignForm__input-error-focus--LkyEj","toggleSign":"src-components-SignForm-SignForm__toggleSign--1Yv-6","signButton":"src-components-SignForm-SignForm__signButton--NjXrN","spinner-border":"src-components-SignForm-SignForm__spinner-border--0OOpK","loading":"src-components-SignForm-SignForm__loading--aPzwi","header":"src-components-SignForm-SignForm__header--5X6pi","google":"src-components-SignForm-SignForm__google--WXR5y","error-message":"src-components-SignForm-SignForm__error-message--S2ZtF","removePadding":"src-components-SignForm-SignForm__removePadding--igbTl","termsOfUse":"src-components-SignForm-SignForm__termsOfUse--+qinl","forgotPasswordButton":"src-components-SignForm-SignForm__forgotPasswordButton--mBUYU","openSignUpForm":"src-components-SignForm-SignForm__openSignUpForm--mgmCp","openForgotPasswordForm":"src-components-SignForm-SignForm__openForgotPasswordForm--hotwi","closeForgotPasswordForm":"src-components-SignForm-SignForm__closeForgotPasswordForm--Xg0lX","back":"src-components-SignForm-SignForm__back--IE53+","password-reset-subtitle":"src-components-SignForm-SignForm__password-reset-subtitle--Xm+Rn","password-reset-email-input-container":"src-components-SignForm-SignForm__password-reset-email-input-container--r88SJ","password-reset-email-input":"src-components-SignForm-SignForm__password-reset-email-input--C-kMQ","sendButton":"src-components-SignForm-SignForm__sendButton--S0YWC","sendButtonReady":"src-components-SignForm-SignForm__sendButtonReady--5jOOr"}; 12748 12749/***/ }), 12750 12751/***/ "mUsH": 12752/***/ (function(module, exports, __webpack_require__) { 12753 12754// extracted by mini-css-extract-plugin 12755module.exports = {"root":"src-screens-AuthPage-AuthPage__root--FemGp","featureColumn":"src-screens-AuthPage-AuthPage__featureColumn--AAYpj","scLogo":"src-screens-AuthPage-AuthPage__scLogo--av5YJ","featureHeader":"src-screens-AuthPage-AuthPage__featureHeader--HyKxQ","featureImage":"src-screens-AuthPage-AuthPage__featureImage--8QnaS","featureList":"src-screens-AuthPage-AuthPage__featureList--aSsO2","authColumn":"src-screens-AuthPage-AuthPage__authColumn--XeSed","multiColumn":"src-screens-AuthPage-AuthPage__multiColumn--Pdsz8","logo":"src-screens-AuthPage-AuthPage__logo--VNVTG","header":"src-screens-AuthPage-AuthPage__header--FJ-EK","descline":"src-screens-AuthPage-AuthPage__descline--0jJ8u","buttonGoogleAuth":"src-screens-AuthPage-AuthPage__buttonGoogleAuth--cNEiX","formbox":"src-screens-AuthPage-AuthPage__formbox--4xt4H","buttonSubmit":"src-screens-AuthPage-AuthPage__buttonSubmit--9-5xx","bottomLinks":"src-screens-AuthPage-AuthPage__bottomLinks--U9o+C","blockedSubmit":"src-screens-AuthPage-AuthPage__blockedSubmit--hDXLS","loader":"src-screens-AuthPage-AuthPage__loader--5DwZx","hide":"src-screens-AuthPage-AuthPage__hide--Vg1Zk"}; 12756 12757/***/ }), 12758 12759/***/ "mY7j": 12760/***/ (function(module, exports, __webpack_require__) { 12761 12762// extracted by mini-css-extract-plugin 12763module.exports = {"title":"src-components-Modal-Content-DisconnectFromGoogleDrive-DisconnectFromGoogleDrive__title--fKG+m","subTitle":"src-components-Modal-Content-DisconnectFromGoogleDrive-DisconnectFromGoogleDrive__subTitle--VtW5z","buttons":"src-components-Modal-Content-DisconnectFromGoogleDrive-DisconnectFromGoogleDrive__buttons--h4yT1","primary":"src-components-Modal-Content-DisconnectFromGoogleDrive-DisconnectFromGoogleDrive__primary--2XhBa","secondary":"src-components-Modal-Content-DisconnectFromGoogleDrive-DisconnectFromGoogleDrive__secondary--m2qCo","deleteFiles":"src-components-Modal-Content-DisconnectFromGoogleDrive-DisconnectFromGoogleDrive__deleteFiles--fvGEv","separation":"src-components-Modal-Content-DisconnectFromGoogleDrive-DisconnectFromGoogleDrive__separation--CReaw","disconnectFromGoogleDrive":"src-components-Modal-Content-DisconnectFromGoogleDrive-DisconnectFromGoogleDrive__disconnectFromGoogleDrive--iv+Gb"}; 12764 12765/***/ }), 12766 12767/***/ "myYb": 12768/***/ (function(module, exports, __webpack_require__) { 12769 12770// extracted by mini-css-extract-plugin 12771module.exports = {"buttons":"src-components-Modal-Content-RemoveFolder
12771-RemoveFolder__buttons--Ae+vZ","primary":"src-components-Modal-Content-RemoveFolder-RemoveFolder__primary--76P4S","activated":"src-components-Modal-Content-RemoveFolder-RemoveFolder__activated--yoEiH","secondary":"src-components-Modal-Content-RemoveFolder-RemoveFolder__secondary--+ac7g","removeFolderModal":"src-components-Modal-Content-RemoveFolder-RemoveFolder__removeFolderModal--YYJkZ","error":"src-components-Modal-Content-RemoveFolder-RemoveFolder__error--gNlNU"}; 12772 12773/***/ }), 12774 12775/***/ "n8Gs": 12776/***/ (function(module, __webpack_exports__, __webpack_require__) { 12777 12778"use strict"; 12779/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return getViewableImageUrl; }); 12780/* unused harmony export safeRequest */ 12781/* unused harmony export safeGzipRequest */ 12782/* unused harmony export safeDeflateRequest */ 12783/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return moveToFolder; }); 12784/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return moveAllClipsToFolder; }); 12785/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return removeAllClipsFromFolder; }); 12786/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return removeClips; }); 12787/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "r", function() { return uploadClip; }); 12788/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return createFolder; }); 12789/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "i", function() { return removeFolder; }); 12790/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "j", function() { return renameFolder; }); 12791/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "o", function() { return updateUserName; }); 12792/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "m", function() { return updateNavMode; }); 12793/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "n", function() { return updateUserImage; }); 12794/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "p", function() { return updateUserProviderData; }); 12795/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return createClip; }); 12796/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "l", function() { return updateClip; }); 12797/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return changeFolderPrivacy; }); 12798/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "q", function() { return updateUserSurveyBannerInfo; }); 12799/* harmony import */ var pako__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("rP9a"); 12800/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("vDqi"); 12801/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_1__); 12802/* harmony import */ var _config_constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("YwrL"); 12803/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("+n12"); 12804 12805 12806 12807 12808const getViewableImageUrl = urli => { 12809 if (!urli) return false; 12810 const url = urli.includes('drive.google') ? urli.replace("&export=download", "&export=view") : urli; 12811 const isCorsNeeded = url.includes('drive.google'); 12812 // return isCorsNeeded ? "https://cors.screenclip.com/cors.php?url=" + encodeURIComponent(url) : url; 12813 return isCorsNeeded ? "https://cors.screenclip.com/cors.php?url=" + url : url; 12814}; 12815const safeRequest = async function (options) { 12816 let res; 12817 try { 12818 res = await axios__WEBPACK_IMPORTED_MODULE_1___default()(options); 12819 } catch (e) { 12820 console.error("Network Error:", e); 12821 res = { 12822 error: e 12823 }; 12824 } 12825 return errorHandler(res); 12826}; 12827function errorHandler(res, options) { 12828 if (res.error && res.error.response && res.error.response.data.message && res.error.response.data.message.includes("File not found")) { 12829 alert("Google Drive folder no longer exist"); 12830 } 12831 if (res.error && (res.error.request.status == 413 || res.error.request.statusText == "Payload Too Large")) { 12832 const error = { 12833 status: res.error.request.status, 12834 message: 'Image should weight less than 7Mb' 12835 }; 12836 return { 12837 error: error 12838 }; 12839 } 12840 if (res.error && res.error.response && res.error.response.data.message && res.error.response.data.message.includes("Storage limit reached")) { 12841 const error = { 12842 status: res.error.response.status, 12843 message: 'Storage limit reached. Delete clips or upgrade account to save more clips.' 12844 }; 12845 return { 12846 error: error 12847 }; 12848 } 12849 if (res.data && res.data.error) { 12850 const error = { 12851 error: res.data.error, 12852 options: options 12853 }; 12854 return { 12855 error: error 12856 }; 12857 } 12858 return res; 12859} 12860const safeGzipRequest = async function (options) { 12861 let res; 12862 let request = axios__WEBPACK_IMPORTED_MODULE_1___default.a.create({ 12863 url: options.url, 12864 method: options.method, 12865 // withCredentials: true, 12866 transformRequest: axios__WEBPACK_IMPORTED_MODULE_1___default.a.defaults.transformRequest.concat(function (data, headers) { 12867 headers['Content-Encoding'] = 'gzip'; 12868 let req = pako__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"].gzip(data); 12869 // console.log(req.length) 12870 return req; 12871 }) 12872 }); 12873 try { 12874 res = await request.request(options); 12875 } catch (e) { 12876 console.error("Network Error:", e); 12877 res = { 12878 error: e, 12879 status: '666', 12880 options: options 12881 }; 12882 } 12883 return errorHandler(res, options); 12884}; 12885const safeDeflateRequest = async function (options) { 12886 let res; 12887 let request = axios__WEBPACK_IMPORTED_MODULE_1___default.a.create({ 12888 url: options.url, 12889 method: options.method, 12890 // withCredentials: true, 12891 transformRequest: axios__WEBPACK_IMPORTED_MODULE_1___default.a.defaults.transformRequest.concat(function (data, headers) { 12892 headers['Content-Encoding'] = 'deflate'; 12893 return pako__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"].deflate(JSON.stringify(data)); 12894 }) 12895 }); 12896 try { 12897 res = await request.request(options); 12898 } catch (e) { 12899 console.error("Network Error:", e); 12900 res = { 12901 error: e 12902 }; 12903 } 12904 if (res.error && res.error.response.data.message && res.error.response.data.message.includes("File not found")) { 12905 alert("Google Drive folder no longer exist"); 12906 } 12907 return res; 12908}; 12909const moveToFolder = async (fromFolderId, toFolderId, clipIds) => { 12910 const url = `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/folders/${toFolderId}/clips/${fromFolderId}`; 12911 const options = { 12912 method: 'post', 12913 url: url, 12914 data: clipIds 12915 }; 12916 return await safeRequest(options); 12917}; 12918const moveAllClipsToFolder = async (fromFolderId, toFolderId) => { 12919 const url = `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/folders/${toFolderId}/clips/${fromFolderId || 'root'}/all`; 12920 const options = { 12921 method: 'post', 12922 url: url 12923 }; 12924 return await safeRequest(options); 12925}; 12926const removeAllClipsFromFolder = async folderId => { 12927 const url = `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/folder/clips`; 12928 const options = { 12929 method: 'delete', 12930 url: url, 12931 data: folderId 12932 }; 12933 return await safeRequest(options); 12934}; 12935const removeClips = async clipIds => { 12936 const url = `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/clips`; 12937 const options = { 12938 method: 'delete', 12939 url: url, 12940 data: clipIds 12941 }; 12942 return await safeRequest(options); 12943}; 12944const uploadClip = async data => { 12945 let clipTitle = data.fileData.name.split('.'); 12946 clipTitle = clipTitle.length > 0 ? clipTitle.slice(0, -1).join('.') : clipTitle; 12947 let options = { 12948 method: 'post', 12949 url: `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/clips`, 12950 data: { 12951 parentFolderId: data.parentFolderId, 12952 sourceUrl: window.location.href, 12953 sourceTitle: clipTitle, 12954 mimeType: data.fileData.type || 'image/png', 12955 markers: [], 12956 dpxr: 1, 12957 // window.devicePixelRatio, 12958 image: data.fileData.url.split(',')[1] 12959 } 12960 }; 12961 return await safeGzipRequest(options); 12962 // return await safeRequest(options) 12963}; 12964const createFolder = async folderName => { 12965 const options = { 12966 method: 'post', 12967 url: `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/folders`, 12968 data: { 12969 title: folderName.trim() 12970 } 12971 }; 12972 return await safeRequest(options); 12973}; 12974const removeFolder = async folderId => { 12975 let options = { 12976 method: 'delete', 12977 url: `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/folders/${folderId}`, 12978 data: {} 12979 }; 12980 return await safeRequest(options); 12981}; 12982const renameFolder = async data => { 12983 let url = `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/folders/${data.folderId}`; 12984 const options = { 12985 method: 'patch', 12986 url: url, 12987 data: { 12988 title: data.title 12989 } 12990 }; 12991 return await axios__WEBPACK_IMPORTED_MODULE_1___default()(options); 12992}; 12993const updateUserName = async (data, currentUser) => { 12994 let url = `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/users/${data.userId}`; 12995 const options = { 12996 method: 'patch', 12997 url: url, 12998 data: { 12999 displayName: data.displayName 13000 } 13001 }; 13002 return await axios__WEBPACK_IMPORTED_MODULE_1___default()(options); 13003}; 13004const updateNavMode = async data => { 13005 // let url = `${config.apiUrl}/users/${data.userId}` 13006 // const options = { 13007 // method: 'patch', 13008 // url: url, 13009 // data: { 13010 // navigationMode: data.navigationMode, 13011 // } 13012 // }; 13013 // return await axios(options) 13014}; 13015const updateUserImage = async data => { 13016 let url = `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/users/${data.userId}`; 13017 const options = { 13018 method: 'patch', 13019 url: url, 13020 data: { 13021 photoUrl: data.url 13022 } 13023 }; 13024 return await axios__WEBPACK_IMPORTED_MODULE_1___default()(options); 13025}; 13026const updateUserProviderData = async data => { 13027 let url = `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/users/${data.userId}`; 13028 const options = { 13029 method: 'patch', 13030 url: url, 13031 data: { 13032 providerData: data.providerData 13033 } 13034 }; 13035 return await axios__WEBPACK_IMPORTED_MODULE_1___default()(options); 13036}; 13037const createClip = async data => { 13038 const options = { 13039 method: 'post', 13040 url: `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/clips`, 13041 data: data 13042 }; 13043 // return await safeRequest(options) 13044 return await safeGzipRequest(options); 13045}; 13046const updateClip = async data => { 13047 let options = { 13048 method: 'patch', 13049 url: `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/clips/${data.clipId}`, 13050 data: data 13051 }; 13052 return await safeRequest(options); 13053}; 13054const changeFolderPrivacy = async data => { 13055 console.log(_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl + '/folders/privacy/' + data.folderId); 13056 const options = { 13057 method: 'patch', 13058 url: `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/folders/privacy/${data.folderId}`, 13059 data: { 13060 privacy: data.privacy 13061 } 13062 }; 13063 return await axios__WEBPACK_IMPORTED_MODULE_1___default()(options); 13064}; 13065const updateUserSurveyBannerInfo = async data => { 13066 let url = `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/users/${data.userId}`; 13067 const options = { 13068 method: 'patch', 13069 url: url, 13070 data: { 13071 surveyBanner: data.surveyBanner 13072 } 13073 }; 13074 return await axios__WEBPACK_IMPORTED_MODULE_1___default()(options); 13075}; 13076// export const setFolderPrivate = async (data) => { 13077// console.log(config.apiUrl+'/folders/share/'+data.folderId) 13078// const options = { 13079// method: 'patch', 13080// url: `${config.apiUrl}/folders/share/${data.folderId}`, 13081// data: { 13082// privacy: data.privacy 13083// } 13084// }; 13085// return await axios(options) 13086// } 13087 13088/***/ }), 13089 13090/***/ "nMBw": 13091/***/ (function(module, exports, __webpack_require__) { 13092 13093// extracted by mini-css-extract-plugin 13094module.exports = {"clipTitleContainer":"src-components-Title-Title__clipTitleContainer--2BlTH","title":"src-components-Title-Title__title--7DYuT","globeLink":"src-components-Title-Title__globeLink--9JOqZ"}; 13095 13096/***/ }), 13097 13098/***/ "nbNY": 13099/***/ (function(module, exports, __webpack_require__) { 13100 13101// extracted by mini-css-extract-plugin 13102module.exports = {"SliderTick":"SliderTick","strokeWidth":"strokeWidth","leftIcon":"leftIcon","highlighter":"highlighter","rightIcon":"rightIcon","opacity":"opacity","radius":"radius"}; 13103 13104/***/ }), 13105 13106/***/ "nlE3": 13107/***/ (function(module, __webpack_exports__, __webpack_require__) { 13108 13109"use strict"; 13110class Lang { 13111 static get(lang) { 13112 let l = { 13113 "en-us": { 13114 "tools": { 13115 "resize": "Resize", 13116 "select": "Interaction Tool (s)",
13117 "cursor": "Cursor (c)", 13118 "highlighter": "Highlighter (h)", 13119 "pen": "Pen (p)", 13120 "arrow": "Arrow (a)", 13121 "arrowtext": "Arrow Text (x)", 13122 "rect": "Rectangle (r)", 13123 "triangle": "Triangle (t)", 13124 "ellipse": "Oval (o)", 13125 "text": "Text (t)", 13126 "image": "Image (i)", 13127 "blur": "Blur (b)" 13128 }, 13129 "actions": { 13130 "undo": "UnDo Annotation (Ctrl+Z)", 13131 "redo": "ReDo Annotation (Shift+Ctrl+Z)", 13132 "shareClip": "Share Clip", 13133 "downloadClip": "Download Clip", 13134 "copyClip": "Copy Image", 13135 "saveClip": "Save Clip (â|CTRL + â)", 13136 "moreClipActions": "More Clip Actions", 13137 "fitClipToPage": "Fit Clip to Page", 13138 "copyShortLink": "Copy Short Link", 13139 "menu": "Menu" 13140 } 13141 }, 13142 "ru": { 13143 "tools": { 13144 "resize": "РазмеÑ", 13145 "select": "ÐÑÐ±Ð¾Ñ (s)", 13146 "cursor": "ÐÑÑÑÐ¾Ñ (c)", 13147 "highlighter": "ХайлайÑÐµÑ (h)", 13148 "pen": "Ð ÑÑка (p)", 13149 "arrow": "СÑÑелка (a)", 13150 "arrowtext": "СÑÑелка+ТекÑÑ (x)", 13151 "rect": "ÐÑÑмоÑголÑник (r)", 13152 "triangle": "ТÑеÑголÑник (t)", 13153 "ellipse": "ÐÐ»Ð»Ð¸Ð¿Ñ (o)", 13154 "text": "ТекÑÑ (t)", 13155 "image": "ÐаÑÑинка (i)", 13156 "blur": "РазмÑÑие (b)" 13157 }, 13158 "actions": { 13159 "undo": "ÐÑмениÑÑ (Ctrl+Z)", 13160 "redo": "ÐовÑоÑиÑÑ (Shift+Ctrl+Z)", 13161 "shareClip": "ÐоделиÑÑÑÑ", 13162 "downloadClip": "СкаÑаÑÑ", 13163 "copyClip": "СкопиÑоваÑÑ", 13164 "saveClip": "Ð¡Ð¾Ñ ÑаниÑÑ", 13165 "fitClipToPage": "ÐоказаÑÑ", 13166 "copyShortLink": "ÐопиÑоваÑÑ ÐºÐ¾ÑоÑкÑÑ ÑÑÑлкÑ", 13167 "menu": "ÐенÑ" 13168 } 13169 }, 13170 "es": { 13171 "tools": { 13172 "resize": "Redimensionar", 13173 "select": "Seleccionar (s)", 13174 "cursor": "Cursor (c)", 13175 "highlighter": "resaltador (h)", 13176 "pen": "BolÃgrafo (p)", 13177 "arrow": "Flecha (a)", 13178 "arrowtext": "Flecha con texto (x)", 13179 "rect": "Rectángulo (r)", 13180 "triangle": "Triángulo (t)", 13181 "circle": "Circulo (o)", 13182 "text": "Texto (t)", 13183 "image": "Imagen (i)", 13184 "blur": "Difuminar (b)" 13185 }, 13186 "actions": { 13187 "undo": "Deshacer Anotación (Ctrl+Z)", 13188 "redo": "Rehacer Anotación (Shift+Ctrl+Z)", 13189 "shareClip": "Compartir Clip", 13190 "downloadClip": "Descargar Clip", 13191 "copyClip": "Copiar Clip", 13192 "saveClip": "Guardar Clip", 13193 "fitClipToPage": "Ajustar Clip a la Página", 13194 "copyShortLink": "Copiar enlace corto", 13195 "menu": "Menú" 13196 } 13197 }, 13198 "nl": { 13199 "tools": { 13200 "resize": "Resize", 13201 "select": "Selecteer (s)", 13202 "cursor": "Cursor (c)", 13203 "highlighter": "Highlighter (h)", 13204 "pen": "Pen (p)", 13205 "arrow": "Pijl (a)", 13206 "arrowtext": "Pijl Text (x)", 13207 "rect": "Rechthoek (r)", 13208 "triangle": "Driehoek (t)", 13209 "circle": "Cirkel (o)", 13210 "text": "Tekst (t)", 13211 "image": "Beeld (i)", 13212 "blur": "Wazig Maken (b)" 13213 }, 13214 "actions": { 13215 "undo": "Ongedaan Maken (Ctrl+Z)", 13216 "redo": "Hergedaan Maken (Shift+Ctrl+Z)", 13217 "shareClip": "Clip delen", 13218 "downloadClip": "Download Clip", 13219 "copyClip": "Kopieer Clip", 13220 "saveClip": "Clip Bewaren", 13221 "fitClipToPage": "Automatische Grootte", 13222 "copyShortLink": "Kopieer Korte Link", 13223 "menu": "Menu" 13224 } 13225 } 13226 }; 13227 return l[lang]; 13228 } 13229} 13230; 13231/* harmony default export */ __webpack_exports__["a"] = (Lang); 13232 13233/***/ }), 13234 13235/***/ "nvUd": 13236/***/ (function(module, exports) { 13237 13238module.exports = "/c83390c1d3841aad3068acb9de9cde81.png"; 13239 13240/***/ }), 13241 13242/***/ "nxsA": 13243/***/ (function(module, __webpack_exports__, __webpack_require__) { 13244 13245"use strict"; 13246/* harmony import */ var _mods_util_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("p2J/"); 13247let browser = {}; 13248if (false) {} 13249 13250class ExtensionMessenger { 13251 constructor(that) { 13252 this.that = that; 13253 this.util = new _mods_util_js__WEBPACK_IMPORTED_MODULE_0__[/* default */ "c"](); 13254 this.handleBrowserMessaging = this.handleBrowserMessaging.bind(this); 13255 } 13256 initBrowserMessaging() { 13257 browser.runtime && browser.runtime.id && browser.runtime.onMessage.addListener(this.handleBrowserMessaging); 13258 } 13259 stopBrowserMessaging() { 13260 browser.runtime && browser.runtime.id && browser.runtime.onMessage.removeListener(this.handleBrowserMessaging); 13261 } 13262 handleBrowserMessaging(req, sender, sendResponse) {
13263 let consoleStyles = "color:pink;padding:2px;"; 13264 // if (req.action == 'BG__CONTENT__CAPTURE_STARTSHOT') debugger; 13265 let is = req.hasOwnProperty("action") && typeof this.that['handleBrowser_' + req.action] !== 'undefined'; 13266 13267 // legacy fix 13268 // grant = grant && !(req.hasOwnProperty('destination') && req.destination === 'background'); 13269 13270 if (!is) { 13271 this.util.log("%cScreenClip missed handler:\n" + req.action, "color:pink;"); 13272 return; 13273 } else { 13274 this.util.log("%c---------" + req.action + "----------", consoleStyles); 13275 this.util.log(req, sender, this.that.name); 13276 this.util.log("%c---------" + req.action + "----------", consoleStyles); 13277 this.util.log("\n\n"); 13278 this.that['handleBrowser_' + req.action](req, sender, sendResponse); 13279 } 13280 } 13281} 13282/* harmony default export */ __webpack_exports__["a"] = (ExtensionMessenger); 13283 13284/***/ }), 13285 13286/***/ "o+St": 13287/***/ (function(module, exports, __webpack_require__) { 13288 13289// extracted by mini-css-extract-plugin 13290module.exports = {"screenlink-icon-light-container":"src-components-WelcomeBack-WelcomeBackLogo-WelcomeBackLogo__screenlink-icon-light-container--D2iO-","logo":"src-components-WelcomeBack-WelcomeBackLogo-WelcomeBackLogo__logo--lRfhp"}; 13291 13292/***/ }), 13293 13294/***/ "o58s": 13295/***/ (function(module, __webpack_exports__, __webpack_require__) { 13296 13297"use strict"; 13298/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SearchInput; }); 13299/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("q1tI"); 13300/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 13301/* harmony import */ var _SearchInput_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("8+WH"); 13302/* harmony import */ var _SearchInput_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_SearchInput_css__WEBPACK_IMPORTED_MODULE_1__); 13303/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("+n12"); 13304 13305 13306 13307let timeout = false; 13308function SearchInput(props) { 13309 let [text, setText] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(props.text); 13310 13311 // let closeModalClicked = useCallback(e => { 13312 // setModal(null) 13313 // }) 13314 // const setDebounced = useCallback( 13315 // debounce(value => { 13316 // props.set(value) 13317 // }, 1000) 13318 // ) 13319 13320 Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { 13321 if (props.text === '') setText(''); 13322 }, [props.text]); 13323 const onChange = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(e => { 13324 let value = e.target.value; 13325 setText(value); 13326 clearTimeout(timeout); 13327 timeout = setTimeout(() => { 13328 props.set(value); 13329 }, 1000); 13330 }); 13331 const clearText = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => { 13332 if (!text) return; 13333 setText(''); 13334 clearTimeout(timeout); 13335 props.set(''); 13336 }); 13337 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 13338 className: _SearchInput_css__WEBPACK_IMPORTED_MODULE_1___default.a.parentContainer 13339 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", { 13340 type: "text", 13341 placeholder: "Search", 13342 onChange: onChange, 13343 className: _SearchInput_css__WEBPACK_IMPORTED_MODULE_1___default.a.search, 13344 value: text 13345 }), text && !props.loading ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 13346 className: [_SearchInput_css__WEBPACK_IMPORTED_MODULE_1___default.a.searchIcon, _SearchInput_css__WEBPACK_IMPORTED_MODULE_1___default.a.cross].join(' '), 13347 onClick: clearText 13348 }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 13349 className: _SearchInput_css__WEBPACK_IMPORTED_MODULE_1___default.a.searchIcon 13350 })); 13351} 13352 13353/***/ }), 13354 13355/***/ "oqvI": 13356/***/ (function(module, exports, __webpack_require__) { 13357 13358// extracted by mini-css-extract-plugin 13359module.exports = {"title":"src-components-WelcomeBack-ThatIsAll-ThatIsAll__title--N1qnc","content":"src-components-WelcomeBack-ThatIsAll-ThatIsAll__content--kYzbT","bold":"src-components-WelcomeBack-ThatIsAll-ThatIsAll__bold--qE9AG","checkBoxContainer":"src-components-WelcomeBack-ThatIsAll-ThatIsAll__checkBoxContainer--F0TLC","requestClipTransfer":"src-components-WelcomeBack-ThatIsAll-ThatIsAll__requestClipTransfer--KgReV","goToScreenLink":"src-components-WelcomeBack-ThatIsAll-ThatIsAll__goToScreenLink--3Lmaz","mainContainer":"src-components-WelcomeBack-ThatIsAll-ThatIsAll__mainContainer--dMiMR"}; 13360 13361/***/ }), 13362 13363/***/ "owV6":
13364/***/ (function(module, exports) { 13365 13366module.exports = "/28c5fdf9c4c47a4a060061211a417402.png"; 13367 13368/***/ }), 13369 13370/***/ "p2J/": 13371/***/ (function(module, __webpack_exports__, __webpack_require__) { 13372 13373"use strict"; 13374/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SITE_HOST; }); 13375/* unused harmony export getZoomSteps */ 13376/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return currentOrMinZoom; }); 13377/* unused harmony export leadToZoom */ 13378/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return getNextZoom; }); 13379/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return isSafari; }); 13380/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return getTextColor; }); 13381/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return getSelectionColor; }); 13382/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return getBorderColor; }); 13383/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "j", function() { return setTextObjectColors; }); 13384/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "i", function() { return setEllipseRectObjectColors; }); 13385/* harmony import */ var core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("rGqo"); 13386/* harmony import */ var core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0__); 13387/* harmony import */ var jspdf__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("i680"); 13388/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("5uWX"); 13389/* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("N3ss"); 13390 13391let browser = {}; 13392if (false) {} 13393 13394 13395 13396const IS_DEV = "production" === 'development'; 13397const IS_TEST = "production" === 'testing'; 13398let siteHost = ''; 13399if (IS_DEV) { 13400 siteHost = "http://localhost:5005"; 13401} else if (IS_TEST) { 13402 siteHost = "https://screen-link-test.web.app"; 13403} else { 13404 siteHost = "https://app.screenclip.com"; 13405} 13406const SITE_HOST = siteHost; 13407const PIXEL_STEP = 10; 13408const LINE_HEIGHT = 40; 13409const PAGE_HEIGHT = 800; 13410class Util { 13411 constructor() { 13412 this.pageInteractionsClass = "__scim-pageInteractionsMode__"; 13413 this.extSendMessage = this.extSendMessage.bind(this); 13414 this.util = this; 13415 } 13416 RGBfromRGBA(rgba) { 13417 // rgba(255, 99, 132, 0.2) 13418 const [r, g, b, per] = rgba.match(/[0-9\.]+/g); 13419 const diff = Number(per); 13420 let channelInter = (v, p) => 255 - (255 - v) * p | 0; 13421 return `rgb(${channelInter(Number(r), diff)},${channelInter(Number(g), diff)},${channelInter(Number(b), diff)})`; 13422 } 13423 normalizeWheel(/*object*/event) /*object*/{ 13424 var sX = 0, 13425 sY = 0, 13426 // spinX, spinY 13427 pX = 0, 13428 pY = 0; // pixelX, pixelY 13429 13430 // Legacy 13431 if ('detail' in event) { 13432 sY = event.detail; 13433 } 13434 if ('wheelDelta' in event) { 13435 sY = -event.wheelDelta / 120; 13436 } 13437 if ('wheelDeltaY' in event) { 13438 sY = -event.wheelDeltaY / 120; 13439 } 13440 if ('wheelDeltaX' in event) { 13441 sX = -event.wheelDeltaX / 120; 13442 } 13443 13444 // side scrolling on FF with DOMMouseScroll 13445 if ('axis' in event && event.axis === event.HORIZONTAL_AXIS) { 13446 sX = sY; 13447 sY = 0; 13448 } 13449 pX = sX * PIXEL_STEP; 13450 pY = sY * PIXEL_STEP; 13451 if ('deltaY' in event) { 13452 pY = event.deltaY; 13453 } 13454 if ('deltaX' in event) { 13455 pX = event.deltaX; 13456 } 13457 if ((pX || pY) && event.deltaMode) { 13458 if (event.deltaMode == 1) { 13459 // delta in LINE units 13460 pX *= LINE_HEIGHT; 13461 pY *= LINE_HEIGHT; 13462 } else { 13463 // delta in PAGE units 13464 pX *= PAGE_HEIGHT; 13465 pY *= PAGE_HEIGHT; 13466 } 13467 } 13468 13469 // Fall-back if spin cannot be determined 13470 if (pX && !sX) { 13471 sX = pX < 1 ? -1 : 1; 13472 } 13473 if (pY && !sY) { 13474 sY = pY < 1 ? -1 : 1; 13475 } 13476 return { 13477 spinX: sX, 13478 spinY: sY, 13479 pixelX: pX, 13480 pixelY: pY 13481 }; 13482 } 13483 getEmbedTagName() { 13484 return _config_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].getEmbedTagName(); 13485 } 13486 log() { 13487 // this will be removed in PRODUCTION build 13488 console.log(...arguments); 13489 } 13490 generateID(add) { 13491 add = add || ""; 13492 return [add, Math.random().toString(36).substr(2, 9)].join(); 13493 } 13494 toggleExtConnectionError() { 13495 // document.getElementsByTagName(Config.getTagName())[0].classList.toggle("error"); 13496 } 13497 extSendMessage(m, succ, fail) { 13498 let onSucc = () => { 13499 if (succ) succ(); 13500 }; 13501 let onErr = error => { 13502 // event handling 13503 let err = browser.runtime.lastError; 13504 this.util.log("%cExtension Communication Error:", "background-color:red"); 13505 this.util.log(m); 13506 this.util.log(err); 13507 this.util.log(error); 13508 this.util.log("%c---", "background-color:red"); 13509 if (fail) fail(); 13510 this.toggleExtConnectionError(); 13511 }; 13512 let ret = browser.runtime && browser.runtime.id && browser.runtime.sendMessage(m); 13513 if (ret) { 13514 ret.then(onSucc, onErr); 13515 } 13516 } 13517 getExtContentUrl() { 13518 return browser.extension && browser.runtime.getURL('') + "insides/content/"; 13519 } 13520 getExtRootUrl() { 13521 return browser.extension && browser.runtime.getURL(''); 13522 } 13523 markersPositionToPercents(unshiftedMarkers, w, h) { 13524 // markers should be unshifted when saving to db 13525 let results = []; 13526 if (!Array.isArray(unshiftedMarkers)) unshiftedMarkers = [];
13527 unshiftedMarkers.forEach(marker => { 13528 if (marker == null) { 13529 results.push(marker); 13530 } else { 13531 let pos = { 13532 ...marker.position 13533 }; 13534 pos.x = 100 * pos.x / w; 13535 pos.y = 100 * pos.y / h; 13536 results.push({ 13537 ...marker, 13538 position: pos 13539 }); 13540 } 13541 }); 13542 return results; 13543 } 13544 markerPercentsToPosition(marker, w, h) { 13545 // markers should be unshifted when saving to db 13546 let pos = { 13547 ...marker.position 13548 }; 13549 pos.x = w * pos.x / 100; 13550 pos.y = h * pos.y / 100; 13551 return { 13552 ...marker, 13553 position: pos 13554 }; 13555 } 13556 markersPercentsToPosition(unshiftedMarkers, w, h) { 13557 // markers should be unshifted when saving to db 13558 if (!Array.isArray(unshiftedMarkers)) unshiftedMarkers = []; 13559 let results = []; 13560 unshiftedMarkers.forEach(marker => { 13561 if (marker == null) { 13562 results.push(marker); 13563 } else { 13564 let pos = { 13565 ...marker.position 13566 }; 13567 pos.x = w * pos.x / 100; 13568 pos.y = h * pos.y / 100; 13569 results.push({ 13570 ...marker, 13571 position: pos 13572 }); 13573 } 13574 }); 13575 return results; 13576 } 13577 unshiftMarkers(markers, w, h, sizes) { 13578 // markers should be unshifted when saving to db 13579 let results = []; 13580 let left = (sizes.width - w) / 2; 13581 let top = (sizes.height - h) / 2; 13582 markers.forEach(marker => { 13583 if (marker == null) { 13584 results.push(marker); 13585 } else { 13586 let pos = { 13587 ...marker.position 13588 }; 13589 pos.x = pos.x - left; 13590 pos.y = pos.y - top; 13591 results.push({ 13592 ...marker, 13593 position: pos 13594 }); 13595 } 13596 }); 13597 return results; 13598 } 13599 shiftMarkers(markers, w, h, sizes) { 13600 // markers should be shifted when loaded into editor 13601 let results = []; 13602 let left = (sizes.width - w) / 2; 13603 let top = (sizes.height - h) / 2; 13604 markers.forEach(marker => { 13605 if (marker == null) { 13606 results.push(marker); 13607 } else { 13608 let newx = left + marker.position.x; 13609 let newy = top + marker.position.y; 13610 marker.position = { 13611 x: newx, 13612 y: newy 13613 }; 13614 results.push(marker); 13615 } 13616 }); 13617 return results; 13618 } 13619 getCanvasSizes(embedMode, previewMode) { 13620 let smallSize = window.innerWidth < 768; 13621 let cs = { 13622 x: 0, 13623 y: 0, 13624 width: window.innerWidth, 13625 height: window.innerHeight 13626 }; 13627 let ret = {}; 13628 if (embedMode && !previewMode) { 13629 // else if (parent) cs = parent.getBoundingClientRect(); 13630 ret = { 13631 left: parseFloat(cs.x), 13632 top: 40, 13633 width: window.innerWidth - parseFloat(cs.x), 13634 height: parseFloat(cs.height) - 40 13635 }; 13636 // console.log(ret); 13637 } 13638 if (previewMode) { 13639 ret.left = 0; 13640 ret.top = 0; 13641 ret.width = window.innerWidth; 13642 // ret.height = window.innerHeight * 0.8; 13643 ret.height = window.innerHeight; 13644 } else if (!embedMode || smallSize) { 13645 cs = { 13646 x: 0, 13647 y: 0, 13648 width: window.innerWidth, 13649 height: window.innerHeight 13650 }; 13651 ret = { 13652 left: parseFloat(cs.x), 13653 top: parseFloat(cs.y), 13654 width: parseFloat(cs.width), 13655 height: parseFloat(cs.height) 13656 }; 13657 } 13658 return ret; 13659 } 13660 setViewportSizes(store, embedMode, previewMode) { 13661 let sizes = store.getState().app.sizes; 13662 let s = {}; 13663 if (sizes.hasOwnProperty("width") && sizes.width > 0) { 13664 s = sizes; 13665 } else if (!embedMode && !previewMode) { 13666 s = { 13667 left: 0, 13668 top: 0, 13669 width: window.innerWidth, 13670 height: window.innerHeight 13671 }; 13672 store.dispatch({ 13673 type: 'SIZES', 13674 value: s 13675 }); 13676 } else { 13677 s = this.getCanvasSizes(embedMode, previewMode); 13678 store.dispatch({ 13679 type: 'SIZES', 13680 value: s 13681 }); 13682 } 13683 return s; 13684 } 13685 addZero(n) { 13686 return n < 10 ? "0" + n : n; 13687 } 13688 formFileTitle(d) { 13689 // YYYY-MM-DD HH:MM:SS Page Title[ScreenClip].png 13690 d = d || new Date(); 13691 let yyyy = d.getFullYear(); 13692 let mm = d.getMonth() + 1; 13693 mm = this.addZero(mm); 13694 let dd = d.getDate(); 13695 dd = this.addZero(dd); 13696 let hh = d.getHours();
13697 hh = this.addZero(hh); 13698 let m = d.getMinutes(); 13699 m = this.addZero(m); 13700 let ss = d.getSeconds(); 13701 ss = this.addZero(ss); 13702 let date = [[yyyy, mm, dd].join("-"), [hh, m, ss].join(".")].join(" "); 13703 let name = [date, document.title, "(ScreenClip)"].join(" "); 13704 return name; 13705 } 13706 downloadUrl(url, name = 'download') { 13707 let link = document.createElement('a'); 13708 link.href = url; 13709 link.download = name; 13710 link.click(); 13711 } 13712 downloadFile(data, filename = 'download', ext = 'png', isBlob = false) { 13713 if (ext === 'pdf') { 13714 var img = new Image(); 13715 img.src = data; 13716 img.onload = function () { 13717 const doc = new jspdf__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"]({ 13718 orientation: "landscape", 13719 unit: "px", 13720 hotfixes: ["px_scaling"], 13721 format: [this.width, this.height] 13722 }); 13723 doc.addImage(img, 'PNG', 0, 0, this.width, this.height); 13724 doc.save(`${filename}.${ext}`); 13725 }; 13726 } else { 13727 // For PNG and JPEG 13728 let link = document.createElement('a'); 13729 let dataURLtoBlob = dataurl => { 13730 let arr = dataurl.split(','), 13731 mime = arr[0].match(/:(.*?);/)[1], 13732 bstr = atob(arr[1]), 13733 n = bstr.length, 13734 u8arr = new Uint8Array(n); 13735 while (n--) u8arr[n] = bstr.charCodeAt(n); 13736 return new Blob([u8arr], { 13737 type: mime 13738 }); 13739 }; 13740 let blob = data; 13741 if (!isBlob) blob = dataURLtoBlob(data); 13742 let objurl = URL.createObjectURL(blob); 13743 link.href = objurl; 13744 link.download = `${filename}.${ext}`; 13745 link.click(); 13746 URL.revokeObjectURL(blob); 13747 } 13748 } 13749 toggleCanvas(c, show, tagname) { 13750 const oldStyle = c.getElement().getAttribute('style') || ''; 13751 if (!show) { 13752 c.getElement().setAttribute('style', oldStyle + ';display:none;'); 13753 } else { 13754 c.getElement().setAttribute('style', oldStyle.replace(';display:none;', '')); 13755 } 13756 } 13757 toggleAllControls(c, show, tagname) { 13758 if (!show) { 13759 this.hideClipControl(tagname); 13760 } else { 13761 this.showClipControl(tagname); 13762 } 13763 this.toggleShapeControls(c, show); 13764 } 13765 hideClipControl(tagname) { 13766 tagname = tagname || _config_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].getTagName(); 13767 let ar = document.getElementsByTagName(tagname)[0].shadowRoot.querySelectorAll(".ClipControl, .ClipEditor"); 13768 Array.prototype.forEach.call(ar, el => { 13769 el.style.display = 'none'; 13770 }); 13771 } 13772 showClipControl(tagname) { 13773 tagname = tagname || _config_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].getTagName(); 13774 let ar = document.getElementsByTagName(tagname)[0].shadowRoot.querySelectorAll(".ClipControl, .ClipEditor"); 13775 Array.prototype.forEach.call(ar, function (el) { 13776 el.style.display = 'inline-block'; 13777 }); 13778 } 13779 toggleShapeControls(c, v) { 13780 let os = c.getActiveObjects(); 13781 let h = { 13782 "hasControls": v, 13783 "hasBorders": v 13784 }; 13785 let act = c.getActiveObject(); 13786 if (!act) return; 13787 act.set(h); 13788 os.forEach(o => o.set(h)); 13789 c.requestRenderAll(); 13790 } 13791 startPageInteractions() { 13792 document.getElementsByTagName("html")[0].classList.add(this.pageInteractionsClass); 13793 document.getElementsByTagName("body")[0].classList.add(this.pageInteractionsClass); 13794 } 13795 stopPageInteractions() { 13796 document.getElementsByTagName("html")[0].classList.remove(this.pageInteractionsClass); 13797 document.getElementsByTagName("body")[0].classList.remove(this.pageInteractionsClass); 13798 } 13799 clipToBackground(data) { 13800 if (!data.title) data.sourceTitle = this.formFileTitle(); 13801 if (!data.pageUrl) data.pageUrl = window.location.href; 13802 data.dpxr = window.devicePixelRatio > 2 ? 2 : window.devicePixelRatio; 13803 data.sourceUrl = window.location.href; 13804 if (data.background === '') { 13805 // if tab of fullpage (there is no background in such clips (looks like)) 13806 browser.runtime && browser.runtime.id && browser.runtime.sendMessage({ 13807 action: "CONTENT__BG__OPENEDITOR", 13808 data: data 13809 }); 13810 } else { 13811 browser.runtime && browser.runtime.id && browser.runtime.sendMessage({ 13812 action: "CONTENT__BG__ADDCLIP", 13813 data: data 13814 }); 13815 } 13816 } 13817} 13818; 13819/* harmony default export */ __webpack_exports__["c"] = (Util); 13820function getZoomSteps() { 13821 return [10, 15, 20, 25, 50, 75, 100, 125, 150, 200, 250, 300, 350, 400]; 13822} 13823function currentOrMinZoom(current) { 13824 return Math.max(current, getZoomSteps()[0] / 100); 13825} 13826function leadToZoom(zoom) { 13827 const zooms = getZoomSteps(); 13828 var closest = zooms.reduce(function (prev, curr) { 13829 return Math.abs(curr - zoom * 100) < Math.abs(prev - zoom * 100) ? curr : prev; 13830 }); 13831 return closest / 100; 13832} 13833function getNextZoom(current, direction) { 13834 const zooms = getZoomSteps(); 13835 var closest = zooms.reduce(function (prev, curr) { 13836 return Math.abs(curr - current * 100) < Math.abs(prev - current * 100) ? curr : prev; 13837 }); 13838 let i = zooms.indexOf(closest) + direction * 1; 13839 if (i < 0 && direction == -1) i = 0;else if (i > zooms.length - 1 && direction == 1) i = zooms.length - 1; 13840 return zooms[i] / 100; 13841} 13842const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); 13843function getTextColor(bgColor) { 13844 if (bgColor === _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* COLORS */ "b"].white || bgColor === _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* COLORS */ "b"].lightgray) { 13845 return _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* COLORS */ "b"].black; 13846 } 13847 return _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* COLORS */ "b"].white; 13848} 13849function getSelectionColor(name, value) { 13850 if (name === 'backgroundColor') { 13851 if (value === _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* COLORS */ "b"].white || value === _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* COLORS */ "b"].lightgray) { 13852 return _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* SELECTION_COLORS */ "c"].blue; 13853 } 13854 return _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* SELECTION_COLORS */ "c"].white; 13855 } 13856 if (name === 'fill') { 13857 if (value === _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* COLORS */ "b"].white || value === _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* COLORS */ "b"].lightgray) { 13858 return _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* SELECTION_COLORS */ "c"].white; 13859 } 13860 return _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* SELECTION_COLORS */ "c"].blue; 13861 } 13862} 13863function getKeyByValue(obj, val) { 13864 return Object.keys(obj).find(key => obj[key] === val); 13865} 13866function getBorderColor(bgColor) { 13867 const key = getKeyByValue(_constants_js__WEBPACK_IMPORTED_MODULE_3__[/* COLORS */ "b"], bgColor); 13868 return _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* BORDER_COLORS */ "a"][key]; 13869} 13870function setTextObjectColors(data, callback) { 13871 // callback invokes "setObjectSettings" function 13872 13873 if (data.tool !== 'text') return; 13874 if (data.name === 'backgroundColor') { 13875 callback({ 13876 ...data, 13877 name: "fill", 13878 value: getTextColor(data.value) 13879 }); 13880 callback({ 13881 ...data, 13882 name: "selectionColor", 13883 value: getSelectionColor(data.name, data.value) 13884 }); 13885 callback({ 13886 ...data, 13887 name: "shadow", 13888 value: null 13889 }); 13890 } 13891 if (data.name === 'fill') { 13892 callback({ 13893 ...data, 13894 name: "backgroundColor", 13895 value: 'transparent' 13896 }); 13897 callback({ 13898 ...data, 13899 name: "selectionColor", 13900 value: getSelectionColor(data.name, data.value) 13901 }); 13902 var shadow = new fabric.Shadow({ 13903 color: _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* COLORS */ "b"].black, 13904 blur: 8 13905 }); 13906 callback({ 13907 ...data, 13908 name: "shadow", 13909 value: data.value === _constants_js__WEBPACK_IMPORTED_MODULE_3__[/* COLORS */ "b"].white ? shadow : null 13910 }); 13911 } 13912 callback({ 13913 ...data 13914 }); 13915} 13916function setEllipseRectObjectColors(data, callback) { 13917 if (data.tool !== 'rect' && data.tool !== 'ellipse') return; 13918 if (data.name === 'fill') { 13919 callback({ 13920 ...data, 13921 name: "stroke", 13922 value: getBorderColor(data.value) 13923 }); 13924 } 13925 callback({ 13926 ...data 13927 }); 13928} 13929 13930/***/ }), 13931 13932/***/ "p2bk": 13933/***/ (function(module, exports, __webpack_require__) { 13934 13935// extracted by mini-css-extract-plugin 13936 13937/***/ }), 13938 13939/***/ "p4vG": 13940/***/ (function(module, exports, __webpack_require__) { 13941 13942// extracted by mini-css-extract-plugin 13943module.exports = {"connectGoogleDriveIcon":"src-components-WelcomeBack-ConnectGoogleDrive-ConnectGoogleDrive__connectGoogleDriveIcon--UJjNc","title":"src-components-WelcomeBack-ConnectGoogleDrive-ConnectGoogleDrive__title--lCEy3","content":"src-components-WelcomeBack-ConnectGoogleDrive-ConnectGoogleDrive__content--XJMxi","connected":"src-components-WelcomeBack-ConnectGoogleDrive-ConnectGoogleDrive__connected--kY6vr","bold":"src-components-WelcomeBack-ConnectGoogleDrive-ConnectGoogleDrive__bold--+dfk-","connectGoogleDriveButton":"src-components-WelcomeBack-ConnectGoogleDrive-ConnectGoogleDrive__connectGoogleDriveButton--fpgaa"}; 13944 13945/***/ }), 13946 13947/***/ "pHYj": 13948/***/ (function(module, __webpack_exports__, __webpack_require__) { 13949 13950"use strict"; 13951 13952// EXTERNAL MODULE: ./node_modules/react/index.js 13953var react = __webpack_require__("q1tI"); 13954var react_default = /*#__PURE__*/__webpack_require__.n(react); 13955 13956// EXTERNAL MODULE: ./src/components/Title/AutoSizeTitle.css 13957var AutoSizeTitle = __webpack_require__("4xOj"); 13958var AutoSizeTitle_default = /*#__PURE__*/__webpack_require__.n(AutoSizeTitle); 13959 13960// CONCATENATED MODULE: ./src/components/Title/AutoSizeTitle.js 13961 13962 13963const AutoSizeTitle_AutoSizeTitle = props => { 13964 const [value, setValue] = Object(react["useState"])(props.initialValue); 13965 let textInputRef = Object(react["useRef"])(null); 13966 Object(react["useEffect"])(() => { 13967 if (props.renameClicked) { 13968 textInputRef.current.focus(); 13969 textInputRef.current.select(); 13970 } 13971 }, [props.renameClicked]); 13972 const spanStyle = { 13973 paddingLeft: "8px", 13974 paddingRight: "8px", 13975 whiteSpace: "pre", 13976 display: 'inherit', 13977 textShadow: '0 1px 1px transparent', 13978 fontSize: '17px', 13979 fontWeight: '500', 13980 fontStretch: 'normal', 13981 fontStyle: 'normal', 13982 letterSpacing: '-0.21px', 13983 color: 'rgb(90 98 112)', 13984 lineHeight: '20px', 13985 overflow: 'hidden', 13986 textOverflow: 'ellipsis' 13987 // whiteSpace: 'nowrap', 13988 }; 13989 const labelStyle = { 13990 display: "inline-block", 13991 position: "relative", 13992 // minWidth: "5px", 13993 maxWidth: props.containerWidth - props.containerWidth * 0.05 + "px", 13994 minHeight: "1.4em", 13995 marginTop: '-10px' 13996 }; 13997 const inputStyle = { 13998 paddingLeft: "8px", 13999 paddingRight: "8px", 14000 margin: 0, 14001 // border: "none", 14002 border: "1px solid black", 14003 /* added styles */ 14004 fontFamily: 'MuseoSans', 14005 fontSize: "inherit", 14006 position: "absolute", 14007 verticalAlign: "top", 14008 top: 0, 14009 left: 0, 14010 width: "98%", 14011 maxWidth: props.containerWidth - props.containerWidth * 0.05 + "px", 14012 background: "white", 14013 textShadow: '0 1px 1px transparent', 14014 fontSize: '17px', 14015 fontWeight: '500', 14016 fontStretch: 'normal', 14017 fontStyle: 'normal', 14018 letterSpacing: '-0.21px', 14019 color: 'rgb(90 98 112)', 14020 lineHeight: '30px', 14021 display: 'block', 14022 overflow: 'hidden', 14023 textOverflow: 'ellipsis', 14024 whiteSpace: 'nowrap', 14025 border: "none" 14026 }; 14027 function updateTitle(value) { 14028 if (value !== props.initialValue && value.length > 0) { 14029 setValue(value); 14030 } else { 14031 setValue(props.initialValue); 14032 } 14033 props.updateTitle(value); 14034 // if(value.length > 0){ 14035 // props.updateTitle(value); 14036 // } 14037 // else{ 14038 // setValue(props.initialValue); 14039 // } 14040 } 14041 return /*#__PURE__*/react_default.a.createElement("label", { 14042 style: labelStyle 14043 }, /*#__PURE__*/react_default.a.createElement("span", { 14044 style: spanStyle 14045 }, value), /*#__PURE__*/react_default.a.createElement("input", { 14046 ref: textInputRef, 14047 style: inputStyle, 14048 className: AutoSizeTitle_default.a.title, 14049 type: "text", 14050 value: value, 14051 onChange: event => { 14052 setValue(event.target.value); 14053 }, 14054 onKeyPress: event => { 14055 if (event.key === 'Enter') { 14056 event.target.blur(); 14057 } 14058 }, 14059 onBlur: e => { 14060 updateTitle(value); 14061 }, 14062 title: `Rename` 14063 })); 14064}; 14065/* harmony default export */ var Title_AutoSizeTitle = (AutoSizeTitle_AutoSizeTitle); 14066// EXTERNAL MODULE: ./src/components/Title/Title.css 14067var Title = __webpack_require__("nMBw"); 14068var Title_default = /*#__PURE__*/__webpack_require__.n(Title); 14069 14070// CONCATENATED MODULE: ./src/components/Title/Title.js 14071 14072 14073// import { connect } from 'react-redux'; 14074 14075function Title_Title(props) { 14076 const [title, setTitle] = Object(react["useState"])(props.title); 14077 const [renameClicked, setRenameClicked] = Object(react["useState"])(false); 14078 let titleContainer = Object(react["useRef"])(null); 14079 let textInputRef = Object(react["useRef"])(null); 14080 const hanleLinkClick = Object(react["useCallback"])(() => { 14081 window.open(props.link); 14082 }, [props.link]); 14083 Object(react["useEffect"])(() => { 14084 setTitle(props.title); 14085 }, [props.title]); 14086 Object(react["useEffect"])(() => { 14087 // if(props.renameClicked){ 14088 setRenameClicked(props.renameClicked); 14089 if (!props.isClipTitle && props.renameClicked) { 14090 textInputRef.current.focus(); 14091 textInputRef.current.select(); 14092 } 14093 // } 14094 }, [props.renameClicked]); 14095 // let { 14096 // currentUser, 14097 // } = props 14098 const inputChanged = Object(react["useCallback"])(e => { 14099 let value = e.target.value.trimLeft(); 14100 // e.target.style.width = value.length + "ch"; 14101 // e.target.style.width = ((value.length) * 7) + 'px'; 14102 setTitle(value); 14103 }); 14104 function updateTitle(value) { 14105 if (value !== props.title && value.length > 0) { 14106 setTitle(value); 14107 } else { 14108 setTitle(props.title); 14109 } 14110 props.updateTitle(value); 14111 // setRenameClicked(false) 14112 } 14113 const isForeign = props.link && !props.link.includes('screenclip.com') && !props.link.includes('localhost:5005') && !props.link.includes('screen.link'); 14114 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, props.isClipTitle ? /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 14115 ref: titleContainer, 14116 className: Title_default.a.clipTitleContainer 14117 }, props.link && isForeign && /*#__PURE__*/react_default.a.createElement("div", { 14118 className: Title_default.a.globeLink, 14119 onClick: hanleLinkClick 14120 }), /*#__PURE__*/react_default.a.createElement(Title_AutoSizeTitle, { 14121 renameClicked: renameClicked, 14122 initialValue: title, 14123 containerWidth: titleContainer.current ? titleContainer.current.offsetWidth : null, 14124 updateTitle: updateTitle 14125 }))) : 14126 /*#__PURE__*/ 14127 // <div className={styles.title}> 14128 react_default.a.createElement("input", { 14129 // style={titleContainer.current && { 14130 // maxWidth: titleContainer.current.offsetWidth - 20, 14131 // width: titleContainer.current.offsetWidth - 20 14132 // }} 14133 ref: textInputRef, 14134 type: "text", 14135 value: title, 14136 className: Title_default.a.title, 14137 onChange: inputChanged, 14138 onKeyPress: event => { 14139 if (event.key === 'Enter') { 14140 event.target.blur(); 14141 } 14142 }, 14143 onBlur: e => { 14144 updateTitle(title); 14145 }, 14146 title: `Rename` 14147 }) 14148 // </div> 14149 ); 14150} 14151/* harmony default export */ var components_Title_Title = __webpack_exports__["a"] = (Title_Title); 14152// let mapStateToProps = (state) => { 14153// return { 14154// userId: state.app.userId, 14155// currentUser: state.app.user, 14156// }; 14157// }; 14158// export default connect(mapStateToProps, null, null, { forwardRef: true })(Title) 14159 14160/***/ }), 14161 14162/***/ "pWsF": 14163/***/ (function(module, __webpack_exports__, __webpack_require__) { 14164 14165"use strict"; 14166/* harmony import */ var _tools_settings_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("NNfZ"); 14167/* harmony import */ var _embed_version_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("RzzB"); 14168 14169let browser = {}; 14170if (false) {} 14171 14172var version = "embed"; 14173try { 14174 version = browser.runtime && browser.runtime.id && browser.runtime.getManifest && browser.runtime.getManifest() && browser.runtime.getManifest()['version']; 14175 if (typeof version === "undefined") version = _embed_version_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].version; 14176} catch (e) { 14177 version = _embed_version_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].version; 14178} 14179; 14180/* harmony default export */ __webp
14180ack_exports__["a"] = ({ 14181 app: { 14182 lang: "en-us", 14183 shareDialogOpened: false, 14184 sizes: { 14185 left: 0, 14186 top: 0, 14187 width: 0, 14188 //window.innerWidth, 14189 height: 0 //window.innerHeight 14190 }, 14191 createCommentTextareaFocus: true, 14192 editCommentTextareaFocus: false, 14193 editingComment: null, 14194 markers: [], 14195 markersShow: true, 14196 newMarker: false, 14197 movingMarkerPoint: { 14198 x: null, 14199 y: null 14200 }, 14201 markerMoving: false, 14202 currentMarker: null, 14203 pointerEvents: true, 14204 zoom: 1, 14205 zoomPoint: { 14206 x: null, 14207 y: null 14208 }, 14209 version: version, 14210 captureMode: false, 14211 imageMode: false, 14212 videoMode: false, 14213 pageMode: false, 14214 clipclipMode: false, 14215 autosnapMode: false, 14216 pageInteractionsMode: false, 14217 unsavedChanges: false, 14218 clipUrl: false, 14219 shortClipUrl: false, 14220 clipTitle: false, 14221 // for adding annotations on-site 14222 previewMode: false, 14223 embedMode: false, 14224 embedCapturingMode: false, 14225 ready: false, 14226 clipped: false, 14227 clipping: false, 14228 moving: false, 14229 // clip 14230 scaling: false, 14231 // clip 14232 14233 video: false, 14234 videoDelay: false, 14235 videoDelayValue: 0, 14236 videoCapture: false, 14237 videoCaptureCountdown: false, 14238 currentObjectData: null, 14239 showPleaseWait: true, 14240 scrollX: 0, 14241 scrollY: 0, 14242 mouseX: -10, 14243 mouseY: -10, 14244 shapesShadow: false, 14245 toolbarHoverLeft: false, 14246 toolbarHoverRight: false, 14247 toolbarHoverTop: false, 14248 toolbarHoverBottom: false 14249 }, 14250 cursorinfo: { 14251 show: false, 14252 visible: true, 14253 controlled: false, 14254 controlledCoords: null, 14255 curtain: "", 14256 showcurtain: false 14257 }, 14258 clip: { 14259 x: 0, 14260 y: 0, 14261 w: 0, 14262 h: 0, 14263 minW: 20, 14264 minH: 20, 14265 show: false, 14266 showUnderlay: false, 14267 showControl: false, 14268 showControlCorners: false, 14269 snappedElementCoords: { 14270 x: 0, 14271 y: 0, 14272 w: 0, 14273 h: 0 14274 } 14275 }, 14276 user: { 14277 username: null, 14278 uid: null, 14279 userphoto: null 14280 }, 14281 dialog: { 14282 shown: false, 14283 title: "", 14284 content: "" 14285 }, 14286 tools: Object(_tools_settings_js__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"])(), 14287 embed: { 14288 // for embed editor 14289 zoomPanDisabled: false, 14290 embedPath: false, 14291 isPublic: false, 14292 isAutosave: false, 14293 owner: false, 14294 embedImageLoaded: false, 14295 embedSavingProcess: 0, 14296 path: null, 14297 dpxr: 1, 14298 imageUrl: "", 14299 imageWidth: 0, 14300 imageHeight: 0, 14301 elementWidth: window.innerWidth, 14302 elementHeight: window.innerHeight, 14303 commentsBarShow: false, 14304 menuBarShow: false, 14305 users: [], 14306 historyCursor: null 14307 } 14308}); 14309 14310/***/ }), 14311 14312/***/ "pcWY": 14313/***/ (function(module, exports, __webpack_require__) { 14314 14315// extracted by mini-css-extract-plugin 14316module.exports = {"outer":"src-components-Notification-MultipleImages-MultipleImages__outer--3F3mx","shown":"src-components-Notification-MultipleImages-MultipleImages__shown--qpt-T","outerViewError":"src-components-Notification-MultipleImages-MultipleImages__outerViewError--IJ+h3","viewErrorsContainerOuter":"src-components-Notification-MultipleImages-MultipleImages__viewErrorsContainerOuter--Z5JzB","notificationContainer":"src-components-Notification-MultipleImages-MultipleImages__notificationContainer--Q+odg","notificationContainerviewErrorsOpened":"src-components-Notification-MultipleImages-MultipleImages__notificationContainerviewErrorsOpened--IKoAB","notificationContainerviewErrorsClosed":"src-components-Notification-MultipleImages-MultipleImages__notificationContainerviewErrorsClosed--uAzrh","multipleImageUploadMessage":"src-components-Notification-MultipleImages-MultipleImages__multipleImageUploadMessage--HqTqs","message":"src-components-Notification-MultipleImages-MultipleImages__message--+yj9X","gotit":"src-components-Notification-MultipleImages-MultipleImages__gotit--3pHuE","viewErrors":"src-components-Notification-MultipleImages-MultipleImages__viewErrors--jQZMA","gotitLabel":"src-components-Notification-MultipleImages-MultipleImages__gotitLabel--j+cqQ","error":"src-components-Notification-MultipleImages-MultipleImages__error--86fFI","viewErrorsContainer":"src-components-Notification-MultipleImages-MultipleImages__viewErrorsContainer--2i7Dw","hideViewErrorsContainer":"src-components-Notification-MultipleImages-MultipleImages__hideViewErrorsContainer--fAD-Q","unsupportedFormatBanner":"src-components-Notification-MultipleImages-MultipleImages__unsupportedFormatBanner--QMc68","retryinfo":"src-components-Notification-MultipleImages-MultipleImages__retryinfo--UW01C","retryinfoUnsupportedFormat":"src-components-Notification-MultipleImages-MultipleImages__retryinfoUnsupportedFormat--9i2tE","sourceTitleContainer":"src-components-Notification-MultipleImages-MultipleImages__sourceTitleContainer--PLMFh","sourceTitle":"src-components-Notification-MultipleImages-MultipleImages__sourceTitle---H5eJ","sourceTitleError":"src-components-Notification-MultipleImages-MultipleImages__sourceTitleError--jCK+H","clipImage":"src-components-Notification-MultipleImages-MultipleImages__clipImage--pBgM4","tryAgain":"src-components-Notification-MultipleImages-MultipleImages__tryAgain--Wwzvp","circularProgressBarContainer":"src-components-Notification-MultipleImages-MultipleImages__circularProgressBarContainer--vw3qx","viewErrorsLabel":"src-components-Notification-MultipleImages-MultipleImages__viewErrorsLabel--sonv6","hideErrorsLabel":"src-components-Notification-MultipleImages-MultipleImages__hideErrorsLabel--ocKqw","networkError":"src-components-Notification-MultipleImages-MultipleImages__networkError--xxdqy","serverError":"src-components-Notification-MultipleImages-MultipleImages__serverError--4W1zL"}; 14317 14318/***/ }), 14319 14320/***/ "qA9u": 14321/***/ (function(module, exports, __webpack_require__) { 14322 14323// extracted by mini-css-extract-plugin 14324module.exports = {"installScreenClipContainer":"src-components-WelcomeBack-InstallScrenClip-InstallScrenClip__installScreenClipContainer--h5LGa","screenClipLogo":"src-components-WelcomeBack-InstallScrenClip-InstallScrenClip__screenClipLogo--lSgbQ","title":"src-components-WelcomeBack-InstallScrenClip-InstallScrenClip__title--RWbtU","content":"src-components-WelcomeBack-InstallScrenClip-InstallScrenClip__content--7SCXf","bold":"src-components-WelcomeBack-InstallScrenClip-InstallScrenClip__bold--GsGSG","getScreenClip":"src-components-WelcomeBack-InstallScrenClip-InstallScrenClip__getScreenClip--EyV9Q","extensionInstalled":"src-components-WelcomeBack-InstallScrenClip-InstallScrenClip__extensionInstalled--5INBC","topContainer":"src-components-WelcomeBack-InstallScrenClip-InstallScrenClip__topContainer--sMxFS"}; 14325 14326/***/ }), 14327 14328/***/ "s55N": 14329/***/ (function(module, exports, __webpack_require__) { 14330 14331// extracted by mini-css-extract-plugin 14332module.exports = {"privacy-container":"src-screens-PrivacyPolicy-PrivacyPolicy__privacy-container--sy26E","privacy-title":"src-screens-PrivacyPolicy-PrivacyPolicy__privacy-title--CzVRU","privacy-section-title":"src-screens-PrivacyPolicy-PrivacyPolicy__privacy-section-title--y-pvQ","privacy-section-subtitle":"src-screens-PrivacyPolicy-PrivacyPolicy__privacy-section-subtitle--k2SyO","privacy-section-content":"src-screens-PrivacyPolicy-PrivacyPolicy__privacy-section-content--UsqtD"}; 14333 14334/***/ }), 14335 14336/***/ "sTVp":
14337/***/ (function(module, exports) { 14338 14339module.exports = "/b4ed35bd68ded07d031ba2be58e5ae25.png"; 14340 14341/***/ }), 14342 14343/***/ "sxGj": 14344/***/ (function(module, exports, __webpack_require__) { 14345 14346// extracted by mini-css-extract-plugin 14347module.exports = {"root":"src-screens-ResetPassword-ResetPassword__root--WC7xl","column":"src-screens-ResetPassword-ResetPassword__column--xSvat","logo":"src-screens-ResetPassword-ResetPassword__logo--fUW8r","header":"src-screens-ResetPassword-ResetPassword__header--+seLZ","descline":"src-screens-ResetPassword-ResetPassword__descline--tTFAW","buttonGoogleAuth":"src-screens-ResetPassword-ResetPassword__buttonGoogleAuth--4Ppae","formbox":"src-screens-ResetPassword-ResetPassword__formbox--l6i6+","transparent":"src-screens-ResetPassword-ResetPassword__transparent--c4ROw","buttonSubmit":"src-screens-ResetPassword-ResetPassword__buttonSubmit--RU3uF","backLink":"src-screens-ResetPassword-ResetPassword__backLink--+RGFR","blockedSubmit":"src-screens-ResetPassword-ResetPassword__blockedSubmit--rmsdZ","loader":"src-screens-ResetPassword-ResetPassword__loader--Vh4lE"}; 14348 14349/***/ }), 14350 14351/***/ "tOAM": 14352/***/ (function(module, __webpack_exports__, __webpack_require__) { 14353 14354"use strict"; 14355/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return FolderList; }); 14356/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("q1tI"); 14357/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); 14358/* harmony import */ var _FolderList_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("wX93"); 14359/* harmony import */ var _FolderList_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_FolderList_css__WEBPACK_IMPORTED_MODULE_1__); 14360/* harmony import */ var _Loader_Loader__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("3dzz"); 14361/* harmony import */ var _FolderContextMenu_FolderContextMenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("kNQY"); 14362/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("+n12"); 14363 14364 14365 14366 14367 14368// import { downloadClips } from '../../utils/utils'; 14369 14370function FolderList(props) { 14371 const renameFolderClicked = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(e => props.setModal('renameFolder')); 14372 const removeFolderClicked = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(e => props.setModal('removeFolder')); 14373 const shareFolderClicked = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(e => props.setModal('shareFolder')); 14374 const [folderPrivacy, setFolderPrivacy] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(props.sharedFolder); 14375 const [isFoldersRequested, setFoldersRequested] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(true); 14376 const [folderMenuContext, setFolderMenuContext] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false); 14377 const [showLoader, setShowLoader] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false); 14378 14379 // const [showFolderContextMenu, setShowFolderContextMenu] = useState(false); 14380 14381 Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => { 14382 const f = async () => { 14383 if (!!props.userId && props.folders.length === 0) { 14384 setFoldersRequested(true); 14385 await props.getFolders(); 14386 setFoldersRequested(false); 14387 } 14388 }; 14389 f(); 14390 }, [props.userId]); 14391 const addHover = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(e => { 14392 e.preventDefault(); 14393 e.target.classList.add(_FolderList_css__WEBPACK_IMPORTED_MODULE_1___default.a.hovered); 14394 }); 14395 const removeHover = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(e => { 14396 e.target.classList.remove(_FolderList_css__WEBPACK_IMPORTED_MODULE_1___default.a.hovered); 14397 }); 14398 const goToFolder = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(folderId => { 14399 const path = !folderId ? '' : '/' + folderId; 14400 props.history.push("/dashboard" + path); 14401 props.setCurrentFolder(folderId); 14402 }); 14403 const goToSettings = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(folderId => { 14404 props.history.push("/settings"); 14405 }); 14406 const drop = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])((e, id) => { 14407 e.preventDefault(); 14408 e.dataTransfer.effectAllowed = 'move'; 14409 e.target.classList.remove(_FolderList_css__WEBPACK_IMPORTED_MODULE_1___default.a.hovered); 14410 props.setMoveModal(id); 14411 }); 14412 function contextMenu(e, folder) { 14413 e.preventDefault(); 14414 showFolderContextMenu(e, folder); 14415 // alert("123"); 14416 } 14417 const showFolderContextMenu = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])((e, folder) => { 14418 e.stopPropagation(); 14419 e.nativeEvent.stopImmediatePropagation(); 14420 // if(!props.selectedClips.includes(clip.clipId) && !props.selectAllClips){ 14421 // props.resetClipsSelection(); 14422 // } 14423 props.setFolderRightClicked(folder); //to know the folder right clicked on the dashboard 14424 const menuMargin = props.isPromoBannerClosed ? 0 : 68;
14425 setFolderMenuContext({ 14426 x: e.clientX, 14427 y: e.clientY - menuMargin, 14428 folder: folder 14429 }); 14430 }); 14431 const preventDefault = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(e => e.preventDefault()); 14432 14433 // useEffect(() => { 14434 // if(!showFolderContextMenu){ 14435 // props.isOpen(false) 14436 // } 14437 // else{ 14438 // props.isOpen(true) 14439 // } 14440 14441 // }, [showFolderContextMenu]) 14442 14443 function closeContextMenu() { 14444 setFolderMenuContext(false); 14445 } 14446 function contextMenuItemShareFolderClicked() { 14447 closeContextMenu(); 14448 shareFolderClicked(); 14449 } 14450 function contextMenuItemRenameFolderClicked() { 14451 closeContextMenu(); 14452 renameFolderClicked(); 14453 } 14454 function contextMenuItemRemoveFolderClicked() { 14455 closeContextMenu(); 14456 removeFolderClicked(); 14457 } 14458 async function contextMenuItemDownloadAllClips() { 14459 closeContextMenu(); 14460 await Object(_utils_utils__WEBPACK_IMPORTED_MODULE_4__[/* getClipsAndDownloadThem */ "k"])(folderMenuContext.folder.folderId, setShowLoader, folderMenuContext.folder.title); 14461 // await downloadClips(props.clips,setShowLoader); 14462 } 14463 const changeFolderPrivacy = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(async privacy => { 14464 closeContextMenu(); 14465 if (privacy == "public") { 14466 setFolderPrivacy("private"); 14467 await props.changeFolderPrivacy({ 14468 folderId: folderMenuContext.folder.folderId, 14469 privacy: "private" 14470 }, msg => { 14471 props.setNotification(msg || "Setting the folder privacy to private wasn't finished. There was an error"); 14472 }); 14473 } else { 14474 setFolderPrivacy("public"); 14475 await props.changeFolderPrivacy({ 14476 folderId: folderMenuContext.folder.folderId, 14477 privacy: "public" 14478 }, msg => { 14479 props.setNotification(msg || "Setting the folder privacy to private wasn't finished. There was an error"); 14480 }); 14481 } 14482 }); 14483 const isTrashFolder = 'trash' === props.currentFolder; 14484 14485 // const sendToTrash = () => { 14486 // let clips = [...props.selectedClips]; 14487 14488 // props.removeClips(() => props.setNotification("Moving Clip to Trash wasn't successful"), clips); 14489 // } 14490 14491 const handleTrashClick = () => { 14492 // if (!isTrashFolder && (props.selectedClips.length > 0 || props.selectAllClips)) { 14493 // sendToTrash() 14494 // } else { 14495 goToFolder('trash'); 14496 // } 14497 }; 14498 return props.folders.length === 0 && isFoldersRequested && !props.lastFolderDeleted ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Loader_Loader__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 14499 className: [_FolderList_css__WEBPACK_IMPORTED_MODULE_1___default.a.folders, props.isLow || props.isFull ? _FolderList_css__WEBPACK_IMPORTED_MODULE_1___default.a.foldersWithLimitNoty : ''].join(' ') 14500 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 14501 onClick: () => goToFolder(false), 14502 onDragEnter: props.currentFolder ? e => addHover(e) : null, 14503 onDragOver: props.currentFolder ? preventDefault : null, 14504 onDragLeave: props.currentFolder ? e => removeHover(e) : null, 14505 onDrop: props.currentFolder ? e => drop(e) : null, 14506 className: [!props.currentFolder ? _FolderList_css__WEBPACK_IMPORTED_MODULE_1___default.a.selectedFolder : '', _FolderList_css__WEBPACK_IMPORTED_MODULE_1___default.a.firstFolder].join(' ') 14507 }, "Uncategorized"), props.folders.map((folder, i) => { 14508 const isCurrentFolder = folder.folderId === props.currentFolder; 14509 const isSharedFolder = folder.privacy == "public"; 14510 return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 14511 onDragEnter: isCurrentFolder ? null : e => addHover(e, folder.folderId), 14512 onDragOver: isCurrentFolder ? null : preventDefault, 14513 onDragLeave: isCurrentFolder ? null : e => removeHover(e, folder.folderId), 14514 onDrop: isCurrentFolder ? null : e => drop(e, folder.folderId), 14515 key: i, 14516 className: [isSharedFolder ? _FolderList_css__WEBPACK_IMPORTED_MODULE_1___default.a.sharedFolder : '', isCurrentFolder ? _FolderList_css__WEBPACK_IMPORTED_MODULE_1___default.a.selectedFolder : ''].join(' '), 14517 onContextMenu: e => contextMenu(e, folder), 14518 onClick: () => goToFolder(folder.folderId) 14519 }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null, folder.title), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 14520 className: _FolderList_css__WEBPACK_IMPORTED_MODULE_1___default.a.folderOptions, 14521 onClick: e => { 14522 e.stopPropagation(); 14523 contextMenu(e, folder); 14524 } 14525 })); 14526 })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 14527 onClick: handleTrashClick, 14528 onDragEnter: isTrashFolder ? null : e => addHover(e, 'trash'), 14529 onDragOver: isTrashFolder ? null : preventDefault, 14530 onDragLeave: isTrashFolder ? null : e => removeHover(e, 'trash'), 14531 onDrop: isTrashFolder ? null : e => drop(e, 'trash'), 14532 className: [isTrashFolder ? _FolderList_css__WEBPACK_IMPORTED_MODULE_1___default.a.selectedFolder : '', _FolderList_css__WEBPACK_IMPORTED_MODULE_1___default.a.trashFolder].join(' ') 14533 }, "Trash"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { 14534 onClick: () => goToSettings(), 14535 className: _FolderList_css__WEBPACK_IMPORTED_MODULE_1___default.a.SettingsFolderItem 14536 }, "Settings")), folderMenuContext && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_FolderContextMenu_FolderContextMenu__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], { 14537 x: folderMenuContext.x, 14538 y: folderMenuContext.y, 14539 currentFolder: folderMenuContext.folder.folderId, 14540 showFolderContextMenu: true, 14541 closeContextMenu: closeContextMenu, 14542 shareFolderClicked: contextMenuItemShareFolderClicked, 14543 renameFolderClicked: contextMenuItemRenameFolderClicked, 14544 removeFolderClicked: contextMenuItemRemoveFolderClicked, 14545 downloadAllClipsClicked: contextMenuItemDownloadAllClips, 14546 changeFolderPrivacy: changeFolderPrivacy, 14547 sharedFolder: props.sharedFolder, 14548 privacy: folderMenuContext.folder.privacy, 14549 isPromoBannerClosed: props.isPromoBannerClosed 14550 }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Loader_Loader__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], { 14551 full: true, 14552 hidden: !showLoader 14553 })); 14554} 14555 14556/***/ }), 14557 14558/***/ "tjUo": 14559/***/ (function(module, __webpack_exports__, __webpack_require__) { 14560 14561"use strict";
14562// ESM COMPAT FLAG 14563__webpack_require__.r(__webpack_exports__); 14564 14565// EXTERNAL MODULE: ./node_modules/react/index.js 14566var react = __webpack_require__("q1tI"); 14567var react_default = /*#__PURE__*/__webpack_require__.n(react); 14568 14569// EXTERNAL MODULE: ./node_modules/react-dom/index.js 14570var react_dom = __webpack_require__("i8i4"); 14571var react_dom_default = /*#__PURE__*/__webpack_require__.n(react_dom); 14572 14573// EXTERNAL MODULE: ./node_modules/react-router-dom/esm/react-router-dom.js 14574var react_router_dom = __webpack_require__("55Ip"); 14575 14576// EXTERNAL MODULE: ./node_modules/react-redux/es/index.js + 22 modules 14577var es = __webpack_require__("/MKj"); 14578 14579// EXTERNAL MODULE: ./src/index.css 14580var src_0 = __webpack_require__("p2bk"); 14581 14582// EXTERNAL MODULE: ./src/components/Auth/index.js + 2 modules 14583var components_Auth = __webpack_require__("2tX9"); 14584 14585// EXTERNAL MODULE: ./src/config/store.js + 5 modules 14586var store = __webpack_require__("5Fu3"); 14587 14588// EXTERNAL MODULE: ./node_modules/react-router/esm/react-router.js 14589var react_router = __webpack_require__("Ty5D"); 14590 14591// EXTERNAL MODULE: ./node_modules/@loadable/component/dist/loadable.esm.js 14592var loadable_esm = __webpack_require__("MKeS"); 14593 14594// EXTERNAL MODULE: ./node_modules/firebase/app/dist/index.cjs.js 14595var index_cjs = __webpack_require__("Wcq6"); 14596var index_cjs_default = /*#__PURE__*/__webpack_require__.n(index_cjs); 14597 14598// EXTERNAL MODULE: ./src/components/Modal/Modal.js 14599var Modal = __webpack_require__("AUTF"); 14600 14601// EXTERNAL MODULE: ./src/components/Modal/Content/index.js + 16 modules 14602var Content = __webpack_require__("uvQ8"); 14603 14604// EXTERNAL MODULE: ./src/utils/app.utils.js 14605var app_utils = __webpack_require__("n8Gs"); 14606 14607// EXTERNAL MODULE: ./src/components/SignForm/SignForm.js 14608var SignForm = __webpack_require__("KsqR"); 14609 14610// EXTERNAL MODULE: ./src/components/Popup/Popup.js 14611var Popup = __webpack_require__("A+iP"); 14612 14613// EXTERNAL MODULE: ./src/components/ProgressBar/Progressbar.css 14614var Progressbar = __webpack_require__("vbs2"); 14615var Progressbar_default = /*#__PURE__*/__webpack_require__.n(Progressbar); 14616 14617// CONCATENATED MODULE: ./src/components/ProgressBar/ProgressBar.js 14618 14619 14620const ProgressBar = props => { 14621 const { 14622 bgcolor, 14623 completed 14624 } = props; 14625 const containerStyles = { 14626 height: 20, 14627 width: '100%', 14628 backgroundColor: "#e0e0de", 14629 borderRadius: 50, 14630 margin: 50 14631 }; 14632 const fillerStyles = { 14633 height: '100%', 14634 width: `${completed > 100 ? 100 : completed}%`, 14635 backgroundColor: bgcolor, 14636 borderRadius: 'inherit', 14637 textAlign: 'right' 14638 }; 14639 const labelStyles = { 14640 padding: 5, 14641 color: 'white', 14642 fontWeight: 'bold' 14643 }; 14644 return /*#__PURE__*/react_default.a.createElement("div", { 14645 className: Progressbar_default.a['containerStyles'] 14646 }, /*#__PURE__*/react_default.a.createElement("div", { 14647 style: fillerStyles 14648 })); 14649}; 14650/* harmony default export */ var ProgressBar_ProgressBar = (ProgressBar); 14651// EXTERNAL MODULE: ./assets/images/screen.clip.icon.new.svg 14652var screen_clip_icon_new = __webpack_require__("1pYP"); 14653var screen_clip_icon_new_default = /*#__PURE__*/__webpack_require__.n(screen_clip_icon_new); 14654 14655// EXTERNAL MODULE: ./src/config/constants.js 14656var constants = __webpack_require__("YwrL"); 14657 14658// EXTERNAL MODULE: ./node_modules/axios/index.js 14659var axios = __webpack_require__("vDqi"); 14660var axios_default = /*#__PURE__*/__webpack_require__.n(axios); 14661 14662// EXTERNAL MODULE: ./src/components/Loader/Loader.js 14663var Loader = __webpack_require__("3dzz"); 14664 14665// EXTERNAL MODULE: ./src/screens/Settings/Settings.css 14666var Settings = __webpack_require__("KrOW"); 14667var Settings_default = /*#__PURE__*/__webpack_require__.n(Settings); 14668 14669// EXTERNAL MODULE: ./src/components/Browse/Browse.js 14670var Browse = __webpack_require__("SL9e"); 14671 14672// EXTERNAL MODULE: ./assets/images/[email protected] 14673var google_drive_icon_3x = __webpack_require__("TwnW"); 14674var google_drive_icon_3x_default = /*#__PURE__*/__webpack_require__.n(google_drive_icon_3x); 14675 14676// EXTERNAL MODULE: ./src/editor/mods/constants.js 14677var mods_constants = __webpack_require__("N3ss"); 14678 14679// EXTERNAL MODULE: ./src/components/Limitations/Limitations.js 14680var Limitations = __webpack_require__("EI7V"); 14681 14682// EXTERNAL MODULE: ./src/screens/Dashboard/Dashboard.js + 1 modules 14683var Dashboard = __webpack_require__("SAt1"); 14684
14685// CONCATENATED MODULE: ./src/screens/Settings/Settings.js 14686 14687 14688 14689 14690 14691 14692 14693 14694 14695 14696 14697 14698 14699 14700 14701 14702 14703// import DriveSVG from './DriveSVG'; 14704 14705 14706 14707 14708function Settings_objectifyParameters() { 14709 const url = window.location.href; 14710 const params = url.slice(url.indexOf('?') + 1); 14711 const paramsArray = params.split('&'); 14712 const paramsObject = {}; 14713 for (let i = 0; i < paramsArray.length; i++) { 14714 let paramPair = paramsArray[i].split('='); 14715 let key = paramPair[0]; 14716 let value = paramPair[1]; 14717 paramsObject[key] = value; 14718 } 14719 return paramsObject; 14720} 14721let delayedToggleNavModeTimeout = null; 14722function Settings_createAccessTokenUsingApi(user, params, auth) { 14723 return new Promise((resolve, reject) => { 14724 const code = params.code; 14725 const userId = user.userId; 14726 console.log(`${constants["a" /* default */].apiUrl}/v2/users/${userId}/cloudConnect/google/tokens?code=${code}`); 14727 auth.currentUser.getIdToken().then(token => { 14728 return axios_default()({ 14729 method: 'post', 14730 url: `${constants["a" /* default */].apiUrl}/v2/users/${userId}/cloudConnect/google/tokens?code=${code}`, 14731 headers: { 14732 'Authorization': `Bearer ${token}` 14733 }, 14734 data: { 14735 from: 'settings' 14736 } 14737 }); 14738 }).then(httpResponse => { 14739 console.log(httpResponse); 14740 const tokens = httpResponse.data; 14741 // const accessToken = tokens.access_token; 14742 return resolve(tokens); 14743 }).catch(error => { 14744 /*handleError('Something went wrong. Go back to account or dashboard to restart the linking process.');*/ 14745 console.log(error); 14746 return reject(error); 14747 }); 14748 }); 14749} 14750const Settings_Settings = props => { 14751 let { 14752 currentUser 14753 } = props; 14754 const [portalLink, setPortalLink] = Object(react["useState"])(''); 14755 Object(react["useEffect"])(() => { 14756 if (currentUser.accountType === 'plus') { 14757 axios_default()({ 14758 method: 'get', 14759 url: `${constants["a" /* default */].apiUrl}/nexway/portalLink` 14760 }).then(({ 14761 data 14762 }) => setPortalLink(data.link)).catch(e => console.log("error: getting portal link:", e)); 14763 } 14764 }, [currentUser]); 14765 const [storageQuotaClips, setStorageQuotaClips] = Object(react["useState"])(JSON.parse(sessionStorage.getItem('storageQuotaClips'))); 14766 Object(react["useEffect"])(function () { 14767 if (!currentUser) { 14768 props.history.push('/log-in'); 14769 } 14770 if (currentUser && !storageQuotaClips) { 14771 Object(Dashboard["fetchStorageLimitations"])(currentUser.userId).then(data => { 14772 sessionStorage.setItem('storageQuotaClips', JSON.stringify(data.clipsCount)); 14773 setStorageQuotaClips(data.clipsCount); 14774 }); 14775 } 14776 }, [currentUser, storageQuotaClips]); 14777 const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "
14777November", "December"]; 14778 const [clipularImport, setClipularImport] = Object(react["useState"])(false); 14779 const [clipularTransferAvailable, setClipularTransferAvailable] = Object(react["useState"])(false); 14780 const [clipularError, setClipularError] = Object(react["useState"])(false); 14781 const [feedbacPopUp, setFeedbacPopUp] = Object(react["useState"])(false); 14782 const [feedbackPopUpTitle, setFeedbackPopUpTitle] = Object(react["useState"])(""); 14783 const [feedbackPopUpContent, setFeedbackPopUpContent] = Object(react["useState"])(""); 14784 const [feedbackPopUpOk, setFeedbackPopUpOk] = Object(react["useState"])(""); 14785 const [feedbackPopUpType, setFeedbackPopUpType] = Object(react["useState"])(""); 14786 const [imgSrc, setImgSrc] = Object(react["useState"])(""); 14787 const [navigationMode, setNavigationMode] = Object(react["useState"])(currentUser.navigationMode === 'novice' ? 'novice' : 'default'); 14788 const [spaceTotalSLStorage, setSpaceTotalSLStorage] = Object(react["useState"])(""); 14789 const [spaceUsedSLStorage, setSpaceUsedSLStorage] = Object(react["useState"])(""); 14790 const [percentUsedSLStorage, setPercentUsedSLStorage] = Object(react["useState"])(""); 14791 const [spaceTotalGoogleDrive, setSpaceTotalGoogleDrive] = Object(react["useState"])(""); 14792 const [spaceUsedGoogleDrive, setSpaceUsedGoogleDrive] = Object(react["useState"])(""); 14793 const [percentUsedGoogleDrive, setPercentUsedGoogleDrive] = Object(react["useState"])(""); 14794 const [currentModal, setCurrentModal] = Object(react["useState"])(false); 14795 const [userName, setUserName] = Object(react["useState"])(currentUser.displayName); 14796 const [loader, setLoader] = Object(react["useState"])(null); 14797 const [fileData, setFileData] = Object(react["useState"])(null); 14798 const [isEmailVerified, setIsEmailVerified] = Object(react["useState"])(false); 14799 const [isConnected, setIsConnected] = Object(react["useState"])(!!currentUser.cloudConnectProvider); 14800 const [goolgeDriveEamilAddress, setGoogleDriveEmailAddress] = Object(react["useState"])(); 14801 const childRef = Object(react["useRef"])(); 14802 const urlParams = Settings_objectifyParameters(); 14803 Object(react["useEffect"])(() => { 14804 // setIsEmailVerified(true) 14805 props.Auth.isEmailVerified().then(verified => { 14806 // setIsEmailVerified(false) 14807 setIsEmailVerified(verified); 14808 }); 14809 }); 14810 Object(react["useEffect"])(() => { 14811 index_cjs_default.a.auth().onAuthStateChanged(async function (user) { 14812 if (user && props.location.pathname.includes('/settings')) { 14813 document.title = 'Settings â ScreenClip'; 14814 if (currentUser) { 14815 isClipularTransferAvailable(); 14816 if (currentUser.cloudConnectProvider) { 14817 getDriveStorageQuota(user); 14818 } 14819 // else { 14820 let url = `${constants["a" /* default */].apiUrl}/v2/users/${currentUser.userId}/storageQuota`; 14821 axios_default()({ 14822 method: 'get', 14823 url: url, 14824 headers: { 14825 'Authorization': `Bearer ${user.ya}` 14826 } 14827 }).then(httpResponse => { 14828 const screenclipStorageQuota = httpResponse.data.storageQuota; 14829 // if (!currentUser.cloudConnectProvider) { 14830 sessionStorage.setItem('screenclipStorageQuota', JSON.stringify(screenclipStorageQuota)); 14831 // } 14832 setStorageSettings('screenclipStorageQuota'); 14833 }).catch(error => { 14834 console.log(error); 14835 //TODO handleError(error); 14836 }); 14837 // } 14838 14839 // if currently connecting 14840 if (!isConnected && urlParams.code && urlParams.code.length > 0) { 14841 Settings_createAccessTokenUsingApi(currentUser, urlParams, props.Auth.auth()).then(tokens => { 14842 setLoader('loader'); 14843 return props.Auth.auth().currentUser.getIdToken().then(token => { 14844 setGoogleDriveEmailAddress(tokens.emailAddress); 14845 // set cloudConnectProvider for user and init gdrive folder 14846 return axios_default()({ 14847 method: 'post', 14848 url: `${constants["a" /* default */].apiUrl}/v2/users/${currentUser.userId}/cloudConnect/google`, 14849 headers: { 14850 authorization: `Bearer ${token}` 14851 } 14852 }); 14853 }).then(httpResponse => { 14854 setIsConnected(true); 14855 props.setNotification("Google Drive connected."); 14856 getDriveStorageQuota(user); 14857 props.mergeUser({ 14858 cloudConnectProvider: "googleDrive" 14859 });
14860 setLoader(null); 14861 }).catch(e => { 14862 console.log(e); 14863 setLoader(null); 14864 }); 14865 }); 14866 } 14867 // 14868 } 14869 } 14870 }); 14871 }, []); 14872 function setStorageSettings(key) { 14873 const storageQuota = JSON.parse(sessionStorage.getItem(key)); 14874 let percentUsed = 0; 14875 if (key === 'googleDriveStorageQuota') { 14876 setSpaceTotalGoogleDrive(`${storageQuota.limit / (1024 * 1024)} MB`); 14877 setSpaceUsedGoogleDrive(`${(storageQuota.usage / (1024 * 1024)).toFixed(1)}`); 14878 percentUsed = parseInt(storageQuota.usage) / parseInt(storageQuota.limit); 14879 percentUsed = (percentUsed * 100).toFixed(1); 14880 setPercentUsedGoogleDrive(percentUsed); 14881 } 14882 if (key === 'screenclipStorageQuota') { 14883 setSpaceTotalSLStorage(`${storageQuota.limit / (1024 * 1024)} MB`); 14884 setSpaceUsedSLStorage(`${(storageQuota.usage / (1024 * 1024)).toFixed(1)}`); 14885 percentUsed = storageQuota.usage / storageQuota.limit; 14886 percentUsed = (percentUsed * 100).toFixed(1); 14887 setPercentUsedSLStorage(percentUsed); 14888 } 14889 } 14890 function getDriveStorageQuota(user) { 14891 let url = `${constants["a" /* default */].apiUrl}/v2/users/${currentUser.userId}/cloudConnect/google/storageQuota`; 14892 return axios_default()({ 14893 method: 'get', 14894 url: url, 14895 headers: { 14896 authorization: `Bearer ${user.ya}` 14897 } 14898 }).then(httpResponse => { 14899 const googleDriveStorageQuota = httpResponse.data.storageQuota; 14900 googleDriveStorageQuota.remaining = googleDriveStorageQuota.limit - googleDriveStorageQuota.usage; 14901 sessionStorage.setItem('googleDriveStorageQuota', JSON.stringify(googleDriveStorageQuota)); 14902 setStorageSettings('googleDriveStorageQuota'); 14903 }).catch(error => { 14904 if (error.response.data.error == "invalid_grant" || error.response.data.error && error.response.data.error.message == 'Invalid Credentials') { 14905 props.setNotification("Seems like you manually disconnect ScreenClip from your Google Drive account.", true); 14906 props.mergeUser({ 14907 cloudConnectProvider: null, 14908 cloudConnectTokens: null, 14909 cloudConnectFolderId: null 14910 }); 14911 setIsConnected(false); 14912 // setTimeout(()=>{ 14913 // window.location.reload(true) 14914 // },5000) 14915 } else { 14916 console.log(error); 14917 console.log(error.response); 14918 } 14919 //TODO handle error 14920 }); 14921 } 14922 function getDesktopDate(date) { 14923 let m = months[date.getMonth()]; 14924 let d = date.getDate(); 14925 let y = date.getFullYear(); 14926 return m + " " + d + ", " + y; 14927 } 14928 function getJoined() { 14929 let date = new Date(1970, 0, 1); 14930 date.setSeconds(currentUser.creationTime._seconds); 14931 // return formatDate(today) 14932 if (window.innerWidth < 768) { 14933 return date.toISOString().split('T')[0]; 14934 } else { 14935 return getDesktopDate(date); 14936 } 14937 } 14938 function jsUcfirst(string) { 14939 return string.charAt(0).toUpperCase() + string.slice(1); 14940 } 14941 function signOut() { 14942 props.history.push({ 14943 pathname: '/', 14944 state: { 14945 loginModal: true 14946 } 14947 }); 14948 props.Auth.signOut(); 14949 } 14950 function clipTransfer() { 14951 const userId = currentUser.userId; 14952 props.Auth.auth().currentUser.getIdToken().then(token => { 14953 setClipularImport(true); 14954 return axios_default()({ 14955 method: 'get', 14956 url: `${constants["a" /* default */].apiUrl}/v2/transfer/${userId}`, 14957 headers: { 14958 'Authorization': `Bearer ${token}` 14959 } 14960 }).then(httpResponse => { 14961 props.mergeUser({ 14962 clipularTransferDone: true 14963 }); 14964 console.log(httpResponse); 14965 props.setNotification("Clipular connected!", false, true); 14966 }).catch(error => { 14967 console.log(error); 14968 setClipularError(false); // was true before - to show the error message 14969 props.setNotification("Sorry. There was a connection issue. Please try again in some minutes", true, true); 14970 }).finally(() => { 14971 setClipularImport(false); 14972 }); 14973 }).catch(error => { 14974 console.log(error); 14975 }); 14976 } 14977 function isClipularTransferAvailable() { 14978 props.Auth.auth().currentUser.getIdToken().then(token => { 14979 return axios_default()({ 14980 method: 'get', 14981 url: `${constants["a" /* default */].apiUrl}/transfer/able` 14982 }); 14983 }); 14984 if (typeof currentUser.clipularTransferAvailable !== 'undefined') { 14985 setClipularTransferAvailable(currentUser.clipularTransferAvailable); 14986 } else if (currentUser.userId) { 14987 props.Auth.auth().currentUser.getIdToken().then(token => { 14988 return axios_default()({ 14989 method: 'get', 14990 url: `${constants["a" /* default */].apiUrl}/transfer/able` 14991 }); 14992 }).catch(e => { 14993 setClipularTransferAvailable(false); 14994 }).then(resp => { 14995 var _resp$data, _resp$data2; 14996 props.mergeUser({ 14997 clipularTransferAvailable: resp === null || resp === void 0 ? void 0 : (_resp$data = resp.data) === null || _resp$data === void 0 ? void 0 : _resp$data.able 14998 }); 14999 setClipularTransferAvailable(resp === null || resp === void 0 ? void 0 : (_resp$data2 = resp.data) === null || _resp$data2 === void 0 ? void 0 : _resp$data2.able); 15000 }); 15001 } 15002 } 15003 function linkWithGoogleDrive() { 15004 // if(props.currentUser.cloudConnectFolderId){ 15005 // showGoogleDriveConnection() 15006 // } else { 15007 window.open(constants["a" /* default */].googleDriveAuthHref); 15008 // } 15009 } 15010 function onDisconnectOnly() { 15011 const userId = currentUser.userId; 15012 props.Auth.auth().currentUser.getIdToken().then(token => { 15013 return axios_default()({ 15014 method: 'delete', 15015 url: `${constants["a" /* default */].apiUrl}/v2/users/${userId}/cloudConnect/google`, 15016 headers: { 15017 'Authorization': `Bearer ${token}` 15018 } 15019 }).then(httpResponse => { 15020 props.mergeUser({ 15021 cloudConnectProvider: null 15022 }); 15023 // setStorageSettings('screenclipStorageQuota'); 15024 setIsConnected(false); 15025 props.setNotification("Google Drive disconnected."); 15026 }).catch(error => { 15027 console.log(error); 15028 }); 15029 }).catch(error => { 15030 console.log(error); 15031 }); 15032 } 15033 function onDeleteGoogleDriveFolderAndDisconnect() { 15034 const userId = currentUser.userId; 15035 props.Auth.auth().currentUser.getIdToken().then(token => { 15036 return axios_default()({ 15037 method: 'delete', 15038 url: `${constants["a" /* default */].apiUrl}/v2/users/${userId}/cloudConnect/deleteFolderAndDisconnect`, 15039 headers: { 15040 'Authorization': `Bearer ${token}` 15041 } 15042 }).then(httpResponse => { 15043 props.mergeUser({ 15044 cloudConnectProvider: null 15045 }); 15046 // setStorageSettings('screenclipStorageQuota'); 15047 setIsConnected(false); 15048 props.setNotification("Google Drive disconnected."); 15049 }).catch(error => { 15050 console.log(error); 15051 }); 15052 }).catch(error => { 15053 console.log(error); 15054 }); 15055 } 15056 // function onDisableTemporarily(){ 15057 // const userId = currentUser.userId; 15058 // props.Auth.auth().currentUser.getIdToken().then(token => { 15059 // return axios({ 15060 // method: 'post', 15061 // url: `${config.functionsApiUrl}/users/${userId}/cloudConnect/hideConnection`, 15062 // headers: { 'Authorization': `Bearer ${token}` }, 15063 // }) 15064 // .then(httpResponse => { 15065 // props.mergeUser({ 15066 // cloudConnectProvider: null 15067 // }) 15068 // setStorageSettings('screenclipStorageQuota'); 15069 // setIsConnected(false) 15070 // props.setNotification("Google Drive disconnected."); 15071 // }) 15072 // .catch(error => { 15073 // console.log(error); 15074 // }); 15075 // }).catch(error => { 15076 // console.log(error); 15077 // }); 15078 // } 15079 function showGoogleDriveConnection() { 15080 const userId = currentUser.userId; 15081 props.Auth.auth().currentUser.getIdToken().then(token => { 15082 return axios_default()({ 15083 method: 'post', 15084 url: `${constants["a" /* default */].apiUrl}/v2/users/${userId}/cloudConnect/showConnection`, 15085 headers: { 15086 'Authorization': `Bearer ${token}` 15087 } 15088 }).then(httpResponse => { 15089 // props.mergeUser({ 15090 // cloudConnectProvider: "googleDrive" 15091 // }) 15092 // let user = currentUser; 15093 // user.cloudConnectProvider = "googleDrive" 15094 // props.setUser({ 15095 // value: user 15096 // }) 15097 setStorageSettings('googleDriveStorageQuota'); 15098 setIsConnected(true); 15099 props.setNotification("Google Drive connected."); 15100 }).catch(error => { 15101 console.log(error); 15102 }); 15103 }).catch(error => { 15104 console.log(error); 15105 }); 15106 } 15107 async function linkWithAuthProvider(website = 'google') {
15108 setLoader('loader'); 15109 const provider = new props.Auth.auth.GoogleAuthProvider(); 15110 let result; 15111 try { 15112 result = await props.Auth.auth().currentUser.linkWithPopup(provider); 15113 } catch (error) { 15114 setLoader(null); 15115 alert("Error: " + error.message); 15116 console.log("Update Provider data error:", error.message); 15117 if (typeof onError !== 'undefined') onError(); 15118 return; 15119 } 15120 const user = result.user; 15121 const res = await app_utils["p" /* updateUserProviderData */]({ 15122 userId: props.currentUser.userId, 15123 providerData: user.providerData 15124 }); 15125 setLoader(null); 15126 if (res.error) { 15127 console.log("Update Provider data error:", res.error); 15128 if (typeof onError !== 'undefined') onError(); 15129 return; 15130 } 15131 } 15132 function deleteAccount() { 15133 index_cjs_default.a.auth().onAuthStateChanged(async function (user) { 15134 let auth = user.ya; 15135 axios_default()({ 15136 method: 'delete', 15137 url: `/api/users/${currentUser.userId}`, 15138 headers: { 15139 'Authorization': `Bearer ${auth}` 15140 } 15141 }).then(httpResponse => { 15142 afterDeleteAccount(); 15143 }).catch(error => { 15144 console.log(error); 15145 }); 15146 }); 15147 } 15148 function afterDeleteAccount() { 15149 document.location.href = '/'; 15150 // props.Auth.signOut(); 15151 // props.history.push("/"); 15152 } 15153 function onOkFeedbackPopUp() { 15154 onCloseFeedbackPopUp(); 15155 if (feedbackPopUpType == "delete") { 15156 deleteAccount(); 15157 window.open("https://forms.clickup.com/30916228/f/xffm4-27034/SF4YBWSHMU1F1OVANZ"); 15158 if (window && window.gtag) { 15159 gtag('event', 'delete_account', { 15160 'event_category': 'Account Management', 15161 'event_label': 'User deleted their account', 15162 'user_country': mods_constants["d" /* TIMEZONE_TO_COUNTRY */][Intl.DateTimeFormat().resolvedOptions().timeZone], 15163 'user_email': currentUser.email 15164 }); 15165 } 15166 } 15167 } 15168 function onCloseFeedbackPopUp() { 15169 setFeedbacPopUp(false); 15170 } 15171 function showDeletePopUp() { 15172 setFeedbacPopUp(true); 15173 setFeedbackPopUpTitle("Are you sure you want to delete your account?"); 15174 setFeedbackPopUpContent("This action can't be undone."); 15175 setFeedbackPopUpOk("Delete"); 15176 setFeedbackPopUpType("delete"); 15177 } 15178 function showDisconnectDrivePopUp() { 15179 setFeedbacPopUp(true); 15180 setFeedbackPopUpTitle("Disconnect from Google Drive?"); 15181 setFeedbackPopUpContent("You will loose access to all clips stored in your Google Drive account. You can connect back your account any time."); 15182 setFeedbackPopUpOk("Disconnect"); 15183 setFeedbackPopUpType(""); 15184 } 15185 function hideModal() { 15186 setFileData({}); 15187 setCurrentModal(false); 15188 } 15189 async function updateUserName(data, onError) { 15190 setLoader('loader'); 15191 const res = await app_utils["o" /* updateUserName */](data, currentUser); 15192 props.Auth.auth().currentUser.updateProfile({ 15193 displayName: data.displayName 15194 }); 15195 if (res.error) { 15196 console.log("Update Username error:", res.error); 15197 if (onError) onError(); 15198 setLoader(null); 15199 return; 15200 } 15201 props.mergeUser({ 15202 displayName: data.displayName 15203 }); 15204 setUserName(data.displayName);
15205 setLoader(null); 15206 } 15207 async function uploadImage(data, onError) { 15208 setLoader('loader'); 15209 hideModal(); 15210 // await downsizeImg(data); 15211 const res = await app_utils["n" /* updateUserImage */](data); 15212 if (res.error) { 15213 console.log("Update Username error:", res.error); 15214 if (onError) onError(); 15215 setLoader(null); 15216 return; 15217 } 15218 setImgSrc(data.url); 15219 props.Auth.auth().currentUser.updateProfile({ 15220 photoUrl: data.photoUrl 15221 }); 15222 props.setUserPhoto(data.url); 15223 setLoader(null); 15224 } 15225 function getModalContent(modal) { 15226 switch (modal) { 15227 case false: 15228 return null; 15229 case 'updateUserName': 15230 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].UpdateUserName, { 15231 userId: currentUser.userId, 15232 oldUserName: currentUser.displayName, 15233 renameUserName: updateUserName, 15234 onClose: () => { 15235 hideModal(); 15236 } 15237 }); 15238 case 'disconnectFromGoogleDrive': 15239 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].DisconnectFromGoogleDrive, { 15240 onDeleteGoogleDriveFolderAndDisconnect: () => { 15241 onDeleteGoogleDriveFolderAndDisconnect(); 15242 }, 15243 onDisconnectOnly: () => { 15244 onDisconnectOnly(); 15245 }, 15246 onClose: () => { 15247 hideModal(); 15248 } 15249 }); 15250 case 'uploadImage': 15251 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].UploadModalContent, { 15252 uploadImg: uploadImage, 15253 closeModal: hideModal, 15254 userImage: true, 15255 fileData: fileData 15256 }); 15257 } 15258 } 15259 const fileLoaded = fileData => { 15260 setFileData(fileData); 15261 if (window.innerWidth <= 576) { 15262 setCurrentModal("uploadImage"); 15263 } 15264 }; 15265 const showUploadModal = () => { 15266 if (window.innerWidth > 576) { 15267 setCurrentModal("uploadImage"); 15268 } 15269 }; 15270 15271 // NAVMODE CHANGER 15272 // const toggleNavMode = useCallback(async function (data) { 15273 // const res = await utils.updateNavMode(data) 15274 // if (res.error) { 15275 // console.log("Update NavMode error:", res.error) 15276 // if (onError) onError(); 15277 // setNavigationMode(data.navigationMode === 'novice' ? 'default' : 'novice'); 15278 // // setLoader(null) 15279 // return 15280 // } 15281 15282 // props.mergeUser({ 15283 // navigationMode: data.navigationMode, 15284 // }) 15285 // }, []) 15286 15287 // const delayedToggleNavMode = useCallback((e) => { 15288 // clearTimeout(delayedToggleNavModeTimeout); 15289 // const data = { 15290 // userId: currentUser.userId, 15291 // navigationMode: navigationMode === 'novice' ? 'default' : 'novice', 15292 // } 15293 // setNavigationMode(data.navigationMode); 15294 // delayedToggleNavModeTimeout = setTimeout(() => toggleNavMode(data), 1000) 15295 // }, [currentUser.userId, navigationMode]) 15296 15297 const googleDriveUI = () => { 15298 if (currentUser.accountType === 'plus' || isConnected) { 15299 if (isConnected) { 15300 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 15301 className: [Settings_default.a["settings-item"], Settings_default.a['account-connected']].join(' ') 15302 }, /*#__PURE__*/react_default.a.createElement("span", { 15303 className: Settings_default.a['google-drive-email'] 15304 }, currentUser.cloudConnectTokens ? currentUser.cloudConnectTokens.emailAddress : goolgeDriveEamilAddress)), /*#__PURE__*/react_default.a.createElement("div", { 15305 className: Settings_default.a['progress-bar-container-google-drive'] 15306 }, /*#__PURE__*/react_default.a.createElement(ProgressBar_ProgressBar, { 15307 bgcolor: "#257be4", 15308 completed: percentUsedGoogleDrive, 15309 spaceTotal: spaceTotalGoogleDrive, 15310 spaceUsed: spaceUsedGoogleDrive 15311 }), /*#__PURE__*/react_default.a.createElement("div", { 15312 className: Settings_default.a['progress-bar-info'] 15313 }, /*#__PURE__*/react_default.a.createElement("span", null, spaceUsedGoogleDrive, " MB"), " of ", /*#__PURE__*/react_default.a.createElement("span", null, spaceTotalGoogleDrive), " used")), /*#__PURE__*/react_default.a.createElement("button", { 15314 testid: "disconnectGoogleDrive", 15315 onClick: () => { 15316 setCurrentModal("disconnectFromGoogleDrive"); 15317 }, 15318 className: [Settings_default.a['change'], Settings_default.a['button-google-drive']].join(' ') 15319 }, "Disconnect")); 15320 } else { 15321 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 15322 className: Settings_default.a['google-drive-message'] 15323 }, "Connect to send copies of the clips you create to your Google Drive storage."), /*#__PURE__*/react_default.a.createElement("button", { 15324 testid: "LinkWithGoogleDrive", 15325 onClick: () => { 15326 linkWithGoogleDrive(); 15327 }, 15328 className: [Settings_default.a['change'], Settings_default.a['button-google-drive']].join(' ') 15329 }, "Connect")); 15330 } 15331 } else { 15332 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 15333 className: Settings_default.a['google-drive-message'] 15334 }, "Please upgrade your plan to connect your Google Drive account."), /*#__PURE__*/react_default.a.createElement("button", { 15335 onClick: () => { 15336 window.open('https://screenclip.com/pricing'); 15337 }, 15338 className: [Settings_default.a['change'], Settings_default.a['button-google-drive']].join(' ') 15339 }, "View all plans")); 15340 } 15341 }; 15342 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 15343 className: Settings_default.a["settings-item"] 15344 }, /*#__PURE__*/react_default.a.createElement("button", { 15345 className: Settings_default.a["btn-action"], 15346 onClick: () => { 15347 props.history.push('/dashboard'); 15348 } 15349 }, /*#__PURE__*/react_default.a.createElement("svg", { 15350 className: Settings_default.a["back-btn-arrow"], 15351 xmlns: "http://www.w3.org/2000/svg", 15352 width: "26", 15353 height: "26",
15354 viewBox: "0 0 26 26" 15355 }, /*#__PURE__*/react_default.a.createElement("path", { 15356 fill: "#5A6270", 15357 fillRule: "evenodd", 15358 d: "M8.424 6.52a.75.75 0 0 1 1.152.96l-3.975 4.77H22a.75.75 0 0 1 .743.648l.007.102a.75.75 0 0 1-.75.75H5.6l3.976 4.77a.75.75 0 0 1-.016.979l-.08.077a.75.75 0 0 1-1.056-.096L3.024 13z" 15359 }))), /*#__PURE__*/react_default.a.createElement("div", { 15360 className: Settings_default.a['title'] 15361 }, "Settings")), currentUser ? /*#__PURE__*/react_default.a.createElement("div", { 15362 className: Settings_default.a['settings-items-container'] 15363 }, /*#__PURE__*/react_default.a.createElement("div", { 15364 className: [Settings_default.a["settings-item"], Settings_default.a['first-item']].join(' ') 15365 }, /*#__PURE__*/react_default.a.createElement("div", { 15366 testid: "Type", 15367 className: [Settings_default.a['attribute'], Settings_default.a['type']].join(' ') 15368 }, "Type:"), /*#__PURE__*/react_default.a.createElement("div", { 15369 className: Settings_default.a['account-type'] 15370 }, jsUcfirst(currentUser.accountType) == "Registered" ? "Basic âï¸" : jsUcfirst(currentUser.accountType) == "Plus" ? "Plus ð" : jsUcfirst(currentUser.accountType) == "Pro" && "Pro ð")), /*#__PURE__*/react_default.a.createElement(Limitations["a" /* default */], { 15371 clipsUsed: storageQuotaClips === null || storageQuotaClips === void 0 ? void 0 : storageQuotaClips.usage, 15372 clipsLimit: storageQuotaClips === null || storageQuotaClips === void 0 ? void 0 : storageQuotaClips.limit, 15373 isDashboard: false 15374 }), props.Auth.getCurrentUser().accountType === 'plus' && /*#__PURE__*/react_default.a.createElement("button", { 15375 onClick: () => { 15376 if (portalLink) { 15377 window.open(portalLink, '_blank'); 15378 } 15379 }, 15380 className: portalLink ? [Settings_default.a["change"], Settings_default.a['manage-sub']].join(' ') : Settings_default.a['button-disabled'], 15381 style: { 15382 marginTop: 21, 15383 marginBottom: 33 15384 } 15385 }, "Manage Subscription"), props.Auth.getCurrentUser().accountType === 'registered' && /*#__PURE__*/react_default.a.createElement("button", { 15386 onClick: () => { 15387 window.open('https://screenclip.com/pricing'); 15388 }, 15389 className: [Settings_default.a["change"], Settings_default.a['view-all-plans']].join(' '), 15390 style: { 15391 marginTop: 15, 15392 marginBottom: 15 15393 } 15394 }, "View All Plans \u203A"), /*#__PURE__*/react_default.a.createElement("div", { 15395 className: [Settings_default.a["settings-item"], Settings_default.a['image-container']].join(' ') 15396 }, /*#__PURE__*/react_default.a.createElement("div", { 15397 testid: "Image", 15398 className: [Settings_default.a['attribute'], Settings_default.a['margin-adjust']].join(' ') 15399 }, "Image:"), /*#__PURE__*/react_default.a.createElement("img", { 15400 onClick: () => childRef.current.chooseFileClicked(), 15401 className: Settings_default.a['image'], 15402 src: imgSrc || props.Auth.getCurrentUser().photoUrl || screen_clip_icon_new_default.a 15403 })), /*#__PURE__*/react_default.a.createElement(Browse["a" /* default */], { 15404 setNotification: props.setNotification, 15405 ref: childRef, 15406 showUploadModalAndFileSelectionDialog: fileLoaded, 15407 showUploadModal: showUploadModal, 15408 currentUser: currentUser 15409 }), /*#__PURE__*/react_default.a.createElement("div", { 15410 className: Settings_default.a["settings-item"] 15411 }, /*#__PURE__*/react_default.a.createElement("div", { 15412 testid: "UserName", 15413 className: Settings_default.a['attribute'] 15414 }, "User Name:"), /*#__PURE__*/react_default.a.createElement("div", { 15415 className: Settings_default.a['value'] 15416 }, userName)), /*#__PURE__*/react_default.a.createElement("button", { 15417 className: [Settings_default.a["change"], Settings_default.a["change-name"]].join(' '), 15418 onClick: () => { 15419 setCurrentModal("updateUserName"); 15420 } 15421 }, "Edit User Name"), /*#__PURE__*/react_default.a.createElement("div", { 15422 className: [Settings_default.a["settings-item"], Settings_default.a['last-items']].join(' ') 15423 }, /*#__PURE__*/react_default.a.createElement("span", { 15424 testid: "Email", 15425 className: Settings_default.a['attribute'] 15426 }, "Email:"), /*#__PURE__*/react_default.a.createElement("span", { 15427 className: Settings_default.a['value'] 15428 }, currentUser.email)), /*#__PURE__*/react_default.a.createElement("div", { 15429 className: [Settings_default.a["settings-item"]].join(' ') 15430 }, /*#__PURE__*/react_default.a.createElement("div", { 15431 testid: "Joined", 15432 className: Settings_default.a['attribute'] 15433 }, "Joined:"), /*#__PURE__*/react_default.a.createElement("div", { 15434 className: Settings_default.a['value'] 15435 }, getJoined())), /*#__PURE__*/react_default.a.createElement("div", { 15436 className: Settings_default.a['google-drive-contaier'] 15437 }, /*#__PURE__*/react_default.a.createElement("div", { 15438 className: Settings_default.a.divider 15439 }), /*#__PURE__*/react_default.a.createElement("div", { 15440 className: Settings_default.a['section-title'] 15441 }, /*#__PURE__*/react_default.a.createElement("img", { 15442 alt: "Google drive icon", 15443 src: google_drive_icon_3x_default.a, 15444 className: Settings_default.a['google-drive-icon'] 15445 }), /*#__PURE__*/react_default.a.createElement("div", { 15446 className: Settings_default.a['google-drive-title'] 15447 }, "Google Drive")), googleDriveUI()), clipularTransferAvailable && /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 15448 className: Settings_default.a.divider 15449 }), /*#__PURE__*/react_default.a.createElement("div", { 15450 className: Settings_default.a.clipularDescr 15451 }, /*#__PURE__*/react_default.a.createElement("div", { 15452 className: Settings_default.a.clipularLogo 15453 }, "Clipular"), isEmailVerified ? !clipularImport ? currentUser.clipularTransferDone ? /*#__PURE__*/react_default.a.createElement("span", null, currentUser.email) : clipularError ? /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("span", null, "There was an error while importing clips. May be you don't have a Clipular account or it was suspended.")) : /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("span", null, "Connect your account to access all your Clipular information. Your clips will get transfered once you modify/save them."), /*#__PURE__*/react_default.a.createElement("button", { 15454 onClick: clipTransfer, 15455 className: [Settings_default.a['change'], Settings_default.a['log-out'], Settings_default.a['connect-clipular-button']].join(' ') 15456 }, "Connect")) : /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 15457 className: Settings_default.a['lds-ripple'] 15458 }, /*#__PURE__*/react_default.a.createElement("div", null), /*#__PURE__*/react_default.a.createElement("div", null))) : /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("span", null, "To enable the connection please ", /*#__PURE__*/react_default.a.createElement("span", { 15459 className: Settings_default.a.clipularDescrBold 15460 }, "verify your ScreenClip account"), " by clicking on the link we\u2019ve sent to your email."), /*#__PURE__*/react_default.a.createElement("button", { 15461 className: Settings_default.a['button-disabled'] 15462 }, "Connect")))), /*#__PURE__*/react_default.a.createElement("div", { 15463 className: Settings_default.a.divider 15464 }), /*#__PURE__*/react_default.a.createElement("button", { 15465 onClick: signOut, 15466 className: [Settings_default.a['change'], Settings_default.a['log-out']].join(' ') 15467 }, "Log-out"), /*#__PURE__*/react_default.a.createElement("button", { 15468 testid: "DeleteAccount", 15469 onClick: () => { 15470 showDeletePopUp(); 15471 }, 15472 className: [Settings_default.a['change'], Settings_default.a['delete-account']].join(' ') 15473 }, "Delete Account")) : /*#__PURE__*/react_default.a.createElement("div", { 15474 className: Settings_default.a['sign-form-container'] 15475 }, /*#__PURE__*/react_default.a.createElement(SignForm["a" /* default */], null)), /*#__PURE__*/react_default.a.createElement(Modal["c" /* ModalWindow */], { 15476 show: feedbacPopUp, 15477 popup: true 15478 }, /*#__PURE__*/react_default.a.createElement(Popup["a" /* default */], { 15479 title: feedbackPopUpTitle, 15480 content: feedbackPopUpContent, 15481 cancel: "Cancel", 15482 ok: feedbackPopUpOk, 15483 onCancelClick: () => { 15484 onCloseFeedbackPopUp(); 15485 }, 15486 onYesClick: () => { 15487 onOkFeedbackPopUp(); 15488 }, 15489 type: feedbackPopUpType 15490 })), /*#__PURE__*/react_default.a.createElement(Modal["c" /* ModalWindow */], { 15491 upload: fileData, 15492 show: currentModal, 15493 onClose: () => { 15494 hideModal(); 15495 } 15496 }, getModalContent(currentModal)), /*#__PURE__*/react_default.a.createElement(Modal["c" /* ModalWindow */], { 15497 show: loader !== null, 15498 loader: true 15499 }, /*#__PURE__*/react_default.a.createElement(Loader["a" /* default */], null))); 15500}; 15501let mapStateToProps = state => { 15502 return { 15503 currentUser: state.app.user 15504 }; 15505};
15506let mapDispatchToProps = dispatch => { 15507 return { 15508 mergeUser: changes => dispatch({ 15509 type: 'MERGE_USER', 15510 value: changes 15511 }), 15512 setUserPhoto: url => dispatch({ 15513 type: "SET_USER_PHOTO", 15514 value: url 15515 }), 15516 setNavMode: url => dispatch({ 15517 type: "SET_USER_NAVIGATION_MODE", 15518 value: url 15519 }), 15520 setUser: user => dispatch({ 15521 type: "SET_USER", 15522 value: user 15523 }), 15524 setNotification: (v, error, timer) => dispatch({ 15525 type: "SET_APP_NOTIFICATION", 15526 value: v, 15527 error: !!error, 15528 timer: !!timer 15529 }) 15530 }; 15531}; 15532/* harmony default export */ var screens_Settings_Settings = (Object(react_router["h" /* withRouter */])(Object(components_Auth["c" /* withAuth */])(Object(es["b" /* connect */])(mapStateToProps, mapDispatchToProps, null, { 15533 forwardRef: true 15534})(Settings_Settings)))); 15535// EXTERNAL MODULE: ./src/screens/Faq/Faq.css 15536var Faq = __webpack_require__("kZEk"); 15537var Faq_default = /*#__PURE__*/__webpack_require__.n(Faq); 15538 15539// EXTERNAL MODULE: ./src/components/Accordion/Accordion.css 15540var Accordion_Accordion = __webpack_require__("FrAB"); 15541var Accordion_default = /*#__PURE__*/__webpack_require__.n(Accordion_Accordion); 15542 15543// CONCATENATED MODULE: ./src/components/Accordion/Accordion.js 15544 15545 15546 15547 15548class Accordion_Accordion_Accordion extends react_default.a.Component { 15549 constructor(props) { 15550 super(props); 15551 this.state = {}; 15552 } 15553 componentDidMount() {} 15554 handleClick(e) { 15555 let li = e.currentTarget.parentElement; 15556 if (e.target.tagName.toLowerCase() == 'div') li = e.currentTarget.parentElement.parentElement; 15557 let isCollapsed = !li.classList.contains(Accordion_default.a['expanded']); // e.target.getAttribute("transform") == undefined 15558 if (isCollapsed) { 15559 li.classList.add(Accordion_default.a['expanded']); 15560 // e.target.setAttribute("transform", "rotate(90deg)") 15561 } else { 15562 li.classList.remove(Accordion_default.a['expanded']); 15563 // e.target.removeAttribute("transform") 15564 } 15565 } 15566 render() {
15567 let collapser = /*#__PURE__*/react_default.a.createElement("i", { 15568 className: Accordion_default.a["cursor-pointer"], 15569 onClick: this.handleClick 15570 }, /*#__PURE__*/react_default.a.createElement("i", null, /*#__PURE__*/react_default.a.createElement("svg", { 15571 className: Accordion_default.a["svg-arrow"], 15572 xmlns: "http://www.w3.org/2000/svg", 15573 width: "26", 15574 height: "26", 15575 viewBox: "0 0 26 26" 15576 }, /*#__PURE__*/react_default.a.createElement("path", { 15577 fill: "none", 15578 fillRule: "evenodd", 15579 stroke: "#000", 15580 strokeLinecap: "round", 15581 strokeWidth: "1.5", 15582 d: "M12 7l5 6-5 6" 15583 })))); 15584 return /*#__PURE__*/react_default.a.createElement("div", { 15585 className: Accordion_default.a.faq 15586 }, /*#__PURE__*/react_default.a.createElement("h2", null, "About ScreenLink"), /*#__PURE__*/react_default.a.createElement("ul", null, /*#__PURE__*/react_default.a.createElement("li", null, collapser, /*#__PURE__*/react_default.a.createElement("div", { 15587 className: Accordion_default.a["full-width"] 15588 }, /*#__PURE__*/react_default.a.createElement("div", { 15589 className: Accordion_default.a["cursor-pointer"], 15590 onClick: this.handleClick 15591 }, "What is ScreenLink?"), /*#__PURE__*/react_default.a.createElement("p", null, "ScreenLink is a ", /*#__PURE__*/react_default.a.createElement("strong", null, "cloud service"), " to store your images, allowing you to share them easily by copy/pasting their link to any communication or social media platform. You can annotate or comment on your images to accurately communicate your ideas.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "ScreenLink was designed to help you ", /*#__PURE__*/react_default.a.createElement("strong", null, "save time"), " on your personal/work flows by sharing information fast and easily."))), /*#__PURE__*/react_default.a.createElement("li", null, collapser, /*#__PURE__*/react_default.a.createElement("div", { 15592 className: Accordion_default.a["full-width"] 15593 }, /*#__PURE__*/react_default.a.createElement("div", { 15594 className: Accordion_default.a["cursor-pointer"], 15595 onClick: this.handleClick 15596 }, "Why should I use ScreenLink?"), /*#__PURE__*/react_default.a.createElement("p", null, "ScreenLink makes a connection with ScreenClip, making it easier to save Clips on the cloud and sharing ideas or content you care with anyone. You can also use ScreenLink independently, as an image presentation tool by simply adding your own content from your device, annotating comments and ideas, and commenting to give or receive feedback."))), /*#__PURE__*/react_default.a.createElement("li", null, collapser, /*#__PURE__*/react_default.a.createElement("div", { 15597 className: Accordion_default.a["full-width"] 15598 }, /*#__PURE__*/react_default.a.createElement("div", { 15599 className: Accordion_default.a["cursor-pointer"], 15600 onClick: this.handleClick 15601 }, "What is ScreenLink used for/by?"), /*#__PURE__*/react_default.a.createElement("p", null, "ScreenLink is mostly used by professionals with a need to share visual information and easily get feedback from collaborators, in the simplest and fastest way possible. Architects, researchers, designers, developers, share screenshots and previews of their work, highlighting important aspects, and then get replies from people involved in their projects.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "ScreenLink was created for a wide range of professionals that work on a computer to save time and effort by improving the speed of their communication flows.")))), /*#__PURE__*/react_default.a.createElement("h2", null, "About clips"), /*#__PURE__*/react_default.a.createElement("ul", null, /*#__PURE__*/react_default.a.createElement("li", null, collapser, /*#__PURE__*/react_default.a.createElement("div", { 15602 className: Accordion_default.a["full-width"] 15603 }, /*#__PURE__*/react_default.a.createElement("div", { 15604 className: Accordion_default.a["cursor-pointer"], 15605 onClick: this.handleClick 15606 }, "What is a Clip?"), /*#__PURE__*/react_default.a.createElement("p", null, "When image data is copied to the clipboard, it\u2019s referred to as a Clip. It\u2019s basically the equivalent of a screenshot or any other image, though we use this term to highlight the fact that screenshots are usually of a whole desktop, whereas ScreenClips most often contain a cropped area of a screenshot. If we\u2019re referring to the softw
15606are itself we\u2019ll write \u201CScreenClip\u201D rather than \u201Ca ScreenClip\u201D. "))), /*#__PURE__*/react_default.a.createElement("li", null, collapser, /*#__PURE__*/react_default.a.createElement("div", { 15607 className: Accordion_default.a["full-width"] 15608 }, /*#__PURE__*/react_default.a.createElement("div", { 15609 className: Accordion_default.a["cursor-pointer"], 15610 onClick: this.handleClick 15611 }, "Are my Clips safe?"), /*#__PURE__*/react_default.a.createElement("p", null, "All content you create in ScreenLink is private by default. No one else has access to your content unless you share it, in which case will allow any person that has the clip\u2019s link to view the clip and the containing comments and annotations. You can set any clip (or folder) to public and private states.")))), /*#__PURE__*/react_default.a.createElement("h2", null, "Billing Info & Payments"), /*#__PURE__*/react_default.a.createElement("ul", null, /*#__PURE__*/react_default.a.createElement("li", null, collapser, /*#__PURE__*/react_default.a.createElement("div", { 15612 className: Accordion_default.a["full-width"] 15613 }, /*#__PURE__*/react_default.a.createElement("div", { 15614 className: Accordion_default.a["cursor-pointer"], 15615 onClick: this.handleClick 15616 }, "How can I view my payment receipts?"), /*#__PURE__*/react_default.a.createElement("p", null, "Every payment receipt is sent (by Paddle) to the email address you registered as soon as each payment is generated."))), /*#__PURE__*/react_default.a.createElement("li", null, collapser, /*#__PURE__*/react_default.a.createElement("div", { 15617 className: Accordion_default.a["full-width"] 15618 }, /*#__PURE__*/react_default.a.createElement("div", { 15619 className: Accordion_default.a["cursor-pointer"], 15620 onClick: this.handleClick 15621 }, "How can I update my billing information?"), /*#__PURE__*/react_default.a.createElement("p", null, "We are working on a better way to update your billing information. For now, you can:", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("ol", null, /*#__PURE__*/react_default.a.createElement("li", null, "Go to the email inbox from the email address you used to create your ScreenLink account."), /*#__PURE__*/react_default.a.createElement("li", null, "Search for Paddle using the search field from your email list."), /*#__PURE__*/react_default.a.createElement("li", null, "Sort your results by date and locate the very first email. It should read something like \u201CSubscription Created\u201D."), /*#__PURE__*/react_default.a.createElement("li", null, "Inside this email, look for the link to update your billing information.")), "You can also send us an email to ", /*#__PURE__*/react_default.a.createElement("a", { 15622 href: "mailto:[email protected]" 15623 }, "[email protected]"), ", or create a support ticket from the account you would like to request a change. We will contact you back as soon as possible.")))), /*#__PURE__*/react_default.a.createElement("h2", null, "Clipular related"), /*#__PURE__*/react_default.a.createElement("ul", null, /*#__PURE__*/react_default.a.createElement("li", null, collapser, /*#__PURE__*/react_default.a.createElement("div", { 15624 className: Accordion_default.a["full-width"] 15625 }, /*#__PURE__*/react_default.a.createElement("div", { 15626 className: Accordion_default.a["cursor-pointer"], 15627 onClick: this.handleClick 15628 }, "What happened with Clipular?"), /*#__PURE__*/react_default.a.createElement("p", null, "Nothing! It was just reinvented, re-branded, re-built for improvement and new features.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "We have been working on new and exciting features, like comments, web annotations and customer support. In order to reflect these improvements, we thought this new phase deserves a look refresh. Therefore, we decided to rebrand Clipular into ScreenLink, which also looks to have more integrations with other applications in the future."))), /*#__PURE__*/react_default.a.createElement("li", null, collapser, /*#__PURE__*/react_default.a.createElement("div", { 15629 className: Accordion_default.a["full-width"] 15630 }, /*#__PURE__*/react_default.a.createElement("div", { 15631 className: Accordion_default.a["cursor-pointer"], 15632 onClick: this.handleClick 15633 }, "What will happen with Clipular and my account/content?"), /*#__PURE__*/react_default.a.createElement("p", null, "Nothing really. Clipular will continue to work, but all improvements, new features and support will be provided only in ScreenClip. If you have a Clipular account you can ", /*#__PURE__*/react_default.a.createElement("a", { 15634 href: "mailto:[email protected]" 15635 }, "ask for clip migration"), ".")))), /*#__PURE__*/react_default.a.createElement("div", { 15636 className: Accordion_default.a.box 15637 }
15637, /*#__PURE__*/react_default.a.createElement("div", null, "Do you have more questions? \uD83E\uDD14"), /*#__PURE__*/react_default.a.createElement("div", null, "Send us an email to [email protected] or create a support ticket. We will gladly solve any doubts you may have."), /*#__PURE__*/react_default.a.createElement(react_router_dom["b" /* Link */], { 15638 to: "/support" 15639 }, "Visit\xA0Support\xA0\u203A"))); 15640 } 15641} 15642/* harmony default export */ var components_Accordion_Accordion = (Object(react_router["h" /* withRouter */])(Accordion_Accordion_Accordion)); 15643// EXTERNAL MODULE: ./src/components/Dropdown/Dropdown.js 15644var Dropdown = __webpack_require__("4jib"); 15645 15646// EXTERNAL MODULE: ./src/components/Logo/Logo.css 15647var Logo = __webpack_require__("L5Ih"); 15648var Logo_default = /*#__PURE__*/__webpack_require__.n(Logo); 15649 15650// CONCATENATED MODULE: ./src/components/Logo/LogoLight.js 15651 15652 15653 15654function LogoLight(props) { 15655 function goHome() { 15656 props.history.push({ 15657 pathname: '/', 15658 state: { 15659 stayAtHomePage: true 15660 } 15661 }); 15662 } 15663 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("a", { 15664 className: Logo_default.a.logo, 15665 onClick: () => { 15666 goHome(); 15667 } 15668 }, "screen.link"), /*#__PURE__*/react_default.a.createElement("svg", { 15669 onClick: () => { 15670 goHome(); 15671 }, 15672 className: Logo_default.a["screenlink-icon-light-container"], 15673 version: "1.1", 15674 xmlns: "http://www.w3.org/2000/svg", 15675 xmlns: "http://www.w3.org/1999/xlink", 15676 x: "0px", 15677 y: "0px", 15678 width: "192px", 15679 height: "192px", 15680 viewBox: "0 0 192 192", 15681 enableBackground: "new 0 0 192 192" 15682 }, /*#__PURE__*/react_default.a.createElement("image", { 15683 id: "image0", 15684 width: "192", 15685 height: "192", 15686 x: "0", 15687 y: "0", 15688 xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAABTmlDQ1BpY2MAACiRY2BgUkksKMhhYWBgyM0rKQpyd1KIiIxSYH/IwA6EvAxiDAqJycUFjgEBPkAlDDAaFXy7xsAIoi/rgsw6JTW1SbVewNdipvDVi69EmzDVowCulNTiZCD9B4hTkwuKShgYGFOAbOXykgIQuwPIFikCOgrIngNip0PYG0DsJAj7CFhNSJAzkH0DyFZIzkgEmsH4A8jWSUIST0diQ+0FAW6XzOKCnMRKhQBjAq4lA5SkVpSAaOf8gsqizPSMEgVHYCilKnjmJevpKBgZGJozMIDCHKL6cyA4LBnFziDEmu8zMNju/////26EmNd+BoaNQJ1cOxFiGhYMDILcDAwndhYkFiWChZiBmCktjYHh03IGBt5IBgbhC0A90cVpxkZgeUYeJwYG1nv//39WY2Bgn8zA8HfC//+/F/3//3cxUPMdBoYDeQAVIWXu+j9DEQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAABEFElEQVR42u19d6AVxfX/Z/aWV3gNHo+uFFFBUKoNCygWNBoViRg1seRrNMZoTCwIPKogGr8pan72fBNjNIAaMbE3QNEgiiCiSEfp7cHrt+zO74/dqbv33r2Pe0Fkj15m35bZOXPOnDltZoEAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAII4EAAOdANYLB3zrCeIVgXGYQMAmgnAJ0A0olSq1WLkSMElFIQYqPJjimlObk/1+/PNXwX8AdIAyF0E0A2U4otIPgkYZGXyy+au3q/dEKmNh7Il9fPGd6e0sSvAIwENXvrBNhX0AmY6/r3tT06HFL4k9BXAF4kJPJQyUXvbDsgDcIBGgA75pxSWkiN2wnIHZSaRQcKeVdnHGCJfaDhQOBPSKiJgv6umVgPVF20oG6/47y/X1j30mmjKCWPgiYr9/e79xUoKAgIKByJ6hyTFN34XZPA32n8SXgXIfTG0ovff35/4hTaXy+aNGmSMedWczKo+TClZrGfZ/ZVIh3sEv2Qwp9axQC9bMzl3UKFva+bN3fu3P3SyP0iijb/+8Li4sTeZ2DFL1FenoFAhACU2qV9XZzz8/w+d84Brv+QxZ9E/tUYKb+q04X/bszJi9JA3meASZMmGae1+3omrPglegfKpW0YgZf2eTjnVOILhqDOOeqq0+7gfWMgV/vyXX+Av3PO7B1Bok9R7+tm53smyPsMUPPCqVOpGR/vp0MyShwCgEqtptI5X/WrBNMrzLo92XZ2gH9W+MOI3NP60g+qW/Qyv23KZ+V1c4b+KBlvmpWqv3Sjyk3Q7AimM4hupLmNOJWf9pUhMrU3wD87/A2DgISil1WM/GB2yzgwM+RtANAPTindtZVsImZzKef/DBLLVUeOdeJ9fV9mBtHap6Ib4N8S/MNFdVbE6pwvF2k4H5UCQM02YwySjaVU6QJGLdaBFgDilF5A+D2sQ+xzVLqevj55urYPKdLNSPb/TCI50omK+m2i2fUTAlgWlRiSOPUTqcYA/33CP9lYGiLFYwCMQx4gLzMAfXt4+917YlusRBORJVQmHdZ9XRNx7jk+3QzrRwRlJ7IyvDCThA7wbxn+JFSEwuJwx5IfzN2KHENeZoDde+K/NeONREgDIVEgSRQQAELAARawapuJWR/G8OGqBLbUWGiI+fc6ZILMKkSm+rNjiMwNQnqGyLL930X8o2GC7lUEJ/aM4LKTC3FkByMt/fk5fp2C0kY0N7e6DcBdLevo9CTIOWx//rR1NF7fLfPLhZGWSFLc+3Ijnl0QkwTQvooQHTJwWK7rz1YkZjsDHGT4hw3gNxcU4bqhhS76ez2vuH4jJevbXfZ+d+QYcj4Adrw4/CiradfXOgKZ+u8XT9Zj7leJfSRIrgmcqb581/9dr69l9Q/rHcWD1xQjEiZZ1WYUVR5dNfKdlT4b4wuMXFYGAGYiPsqiFBalAEQpOkHqTGdk/N/cJrz3Zdw5JXe2/AxVjDjVoEt1XVUPMgV2XNcpeOnVfB305ymFVHq1V5Re7fm+4j/3qzhmzGlSG+nRYMs5ZvxEzfilvpgwC8j5AAgZ5ATWY/IgsCgFtSxeUssCpRQrNyfw+1djjncBvFQ7jypRT0KEVqF60NIzjDwjy8f8OkRJYP/DSjlKm5phVZDb6NVe5v4jhBxy+D/3UQwrtyQ5H9g/SyotwDlmDSQgJ+aaX3M+ACxqHSYkBhUld65RfpkCmLUwjkTSRpw4HcoIQAgRpeQzFh2m/nSCEKmU6xb3i9JLxGWSmBq/ufHVJHym36GEv2VRzF4YV3hBe1xvjs1bOYace4EsSg+zqGg9Y3p4lRT4eJXQ+9Uh4t0J2YThXfVpx26NlXmtfd4vSWV2g5zLk61Gfajh/+HKpCPhnevOdESJ9xOEIucDIOczADWTVWIOh1SyHmJdYyO5fief71mvSpVpOqL+0+/X25JJ55VK6tRF5fdp9bvud6OjGPiZJWh6Hfj7jv/WGlN9wP0GqQSsZLwKOYbczwDxei41XG4urVMpKOIJy3/l7ti8cuwKzbNzchX7glwmx7mf5+VSPz7E8G+IwbYBuIR3+IV610ethn1pvSfkfACoEsY9BWd6liCFlARAHAlF+ADycLLJBCfEvjeFHz7T83p7Ml3XwYsBA/zdOPPjDPyShajwDbkfANySga/QJZWut8SrLZf6cSYC7ivo73dlN2oYubM31f45FPFvaWp1riD3A8CSEZLNeohjuX+yiMV72IRpwU9+PZU4jh2L5mSZD68ZgS6JRhzmaGEuwvcRf/l+lwhw9Y9PxLOA/MwAogfU0utYnw2kUu9Qd39r+e4agTJ5QTwqVErZ7623kd8noUtAQEnq/HvF2S4qPKTxl+UjIdTheVlFk1qch8kiPzZAyjlcO8GjI6kqS/+8Tl49nddlVGXUMTy0YllEerVPKn0xnPyn3p5DEH9KLWlG0BQG3WdwcMwAmpGmaTzM12wjZru7qNyRyvggoJb/bUSY5Em5AsrLy7APUsWt87rbkzHZCzik8bdLbxWPALBkeXowzACgVM1mhUDAK9uVdZN0QpmCiTYFyxRzTZmeKrW8YMOrPkj1pb9fV9GJQ0ySUqRSzooCMSFRiXN8KONvyV4l7Wlgn8anL8irG9SvF0jt8NQrnvzkw6eTEno+itfzmXEjKRnS/Xd6knoz3KGFfzZi/eBwg8oEdeYv7hki4hxgT2+2CsQILBLCRF1Sh+sLavgxlZ7PbhcDlXmI0h5xnKp+0WZBIv/t0d93qOIvOw69hko+Z4GcDwBlynSkRaqt81LrhNIdGQIlyrFXuD8LCZPJRvSu3wunVPerEj3Af3+weHrIfSqEJS3Idixg6uiobiOASRxvieECDydFWopled1yFn1bfNE34ef8gDsVQTMCmUeAUOl+5AR/nrcvG9EG+c7jb1myFyhLnSwHkBcvEAMNXw+vkCA86wB5Fb2LXl4Mojg0dK+H+v5MSjR7t1y/fOwisNYeV2SWOO+W+UduurQe
15688wC/+liXy5Fn+PCj1bp+Ds51ObYAYIfvYML4z+FOJD9jx/pwP8pwLpJYurxBV79dVJmeCSGkkerrR0+q7GXJttPoyJpexY8XtKyUC0PS5Ozqkwh/UgmWZsEwTyozpA382QCgsUDMpBoURgmGExGA4UPhTzQZQL2pP5D4QkJ99gVKE9lNpfJLJxWMFXg/oBMhW49Hf7WIgjaDQj3U0XX5wduzXb6+3V+BPKQU1babn+/BkwM83/pSCmklQMwkQA6FQCMQICVrsZ/yVd6VNDfFVbVaQhxlAkvEuq85NMkUiM2njNxdGv9/dmLQdyoiVams+vX7X/RrBXV7xDCqDV3KYZVmwqAXLTAJMP/aBPyEExcVFCIfCSCQTMJMmYrFYZvyphWTSBCEEhhEGCYUknT3/+KflF730m3adBeTeC6R1kCKTXAxGoapAmgQjzjmS8g5JTwCP2qfyoni1Vi1dfg+11IwYt4ByR0az8dJQ04SZjAtMU+DfrVt3HD94MPr07Y0+x/RFr1690K6qymWs7ty1C6tXr8aqVauwaNEnWLJkCVavXo2kabrwpxQwkwkQy4IRCsMwjP2Cv2ykESdZjkgDLl2kOReQhyWRwgvEpnNliqceKo6k43OPhtR56mauWn3Kdc3t6lZqmR4l+l5rhqrjwt1Omk17M7iBmVsfFsxkAtS0lAbxVhKCY4/ti1EjR+LiSy5Bxw4dfNGibWUl2lZW4qQTT8RPrroKALC7pgazZs3CnDkv49PFix37QDTHskxQywQNhWGEwo5hnD/85fR5V/IdEefyBXkKhNkt9uNWY4NCwhhiSlXLVMeprrunBL1+CjZniafT6LBeRkwWwsnLS2VaJqxkwrPuosJC/PCiC/GbX9+GHj165IQ+bVq3xo033IAbb7gBK1aswP/+/g947bVXEY8nWA/ZtDPtHRtCkQgIYV6j3OOvgMuNpB6n3kO05ZDzNcGAHQuwnO0uLGXbC31nAIsL5HRBIP4MpBLaOY+fGnghyrl06kjqNbRCwnm9X55B5NmK3a/MYJQimUjASiRAqcpbhBD86Eej8PHHC/Hwgw/ljPl16NWrF554/DEs/OgjnDX8LKUNFDbDJeMxWJaZc/wF3Snnl0y/fCyeyce2KFIXArKIYCOY+7BBIfGnMgXKQaJU++Ck23dGfXeK9mhX2WzP6rN3QxbtlXHw835ZoDGC22oGhZlM2OqG1tpOnTriuef+gT8//DA6tG+fa/J4QucuXfDss8/gH3//Ozp27KAwMACYiRhMM5Ez/LnAY32bYkAJl69Mv9xCzgcAd13b3SX02JROUNFBhEilxPy8Q6TSPgYvbeFAeSkfs+uy0abEGJzmsWhqqhnEbjpJeT/lx9COxYxiWZbD/JbCIAYh+PHll+OjBQtw5hln5oXYmeCcc87GvLnzMGzoUMXjQ0FgJpNOHGLf8NedHi5GkBlCuykfxnAeZgDBoJZUWkztcakp/lWYFN2WpgdlM9f9Pp0gWdLDA1xzilTa++BbySQodQJazn1lZWWYOfOfePBPf0Rxsa8PaOYNKirKMWvWTNz0i1+48LeSCVArnR6eHn8vemT7yzXkZT2AErhIG6nJhFB6N5w7t8TL7U1Tuo+9893V9GS3VwLaKEiHg9p+y0zCoqZyR0V5BWbPmoX+/fvlnBT7ApMnTYJpmnjs8ccV/M1EDKFoVBjGWeCf8v4UcQLnla77cgl5yQWSpYTq8iWO242oD0gMl/aTPhm8BBkuuyCdXeGJm+PSS53slRofy0zyVAZ2Q5s2rTF79vM47ti+uSZDTuCeqVMRi8Xx17/+lSEECoJkIo5QOAqDGL7xT9VflsQgfmblXEMeUiGokq6uxrtVicA7hEtse4C09CuK+/xhaY1AbPkgd9vpA5JC8ZO7Bgh7N6WOJ0VMUa1bV+KFF55H3z599qm36+rq8NFHH2H5l18hHo8jHo8hkYijXVV79OvfDwP690dJSUmL6//d/fch1hzDc/98VppeCahlAiHDF/4p6UWhDoiMKkPuIR97g6ropNZYJNcYe0D1heqBKT2ZLdN1aMcecWQtHyX9lJ0ykqnUr615phTJZFzBraSkBHPmvIjevXq3qI+XLP0cjz3+KD5d9Ak2fPONkoKuAyEEnTp3xg8vvAA3XH89OnfJfnvNBx/8I7bt2IZ333mH42CZSYAQGIb41LQX/mnp5dRFU6pIqR0nuYK8eIH4MR/pVDkW+FHeCZ6BABeoRpbsafLTVRn9/BmuZzKKvZ43zaQLp3tnzGgR8z/33LM46+yzcfbZZ+H52c9j3fr1aZmftWXTxo145JFHMWjwCbh45EgsXPhx1u9+6MEHUV5erpyzNNwyx1Fk6kGluS/65x5yvzkuFbnq9t+yPeCOAwCQ/Z6i1FyfvrxCeofqP90Pqr1PcVZ7Vp+ewO6+sEBN1ej90Y9+hMsvuyyrPl21ahXOPuds3HLrr7F0ydI0nS+VHj/TMrHg/Q9w8SUXY9z4cUgmk77b0K6qCtXjx2v1OzNBS4EQLQ5gidLzdxC4QZXkJyJKytzHRKWLwuBy7od3YEBlWO0nptQUM4I2QDLdn5HhM9RnJROQwhKorKzEfTNmZNWfD/zv73Hm8OFYsmSp7kWUOtFZ8OKkNZNQCDAMm8FU4gAAkokkHn/sCZx62mn48qsvfbfl6quvxkknnqTUZ+cOWd79qc/wOr2ke30pO3kwBfI0A4hUBznUradGyHh5RgqlYJefKTKjiiKVXl5qUFH6oYieGqCcsyxtm0hg3NixKC0t9d2Xv7jpJsyYMQPNTc2u9hCDwAiHEYpEEY5EEQpHEAqF+S8cjiDsXDNCYWUwMPTWrF6Diy8eiRVfrfDdpocffgjFxUUCVzYINPz9gG6v6Z9E0n/UOghygQj/182CLgaVvAeeuSTSOc9cIO0/nQC6BM+Uq+LObRGliImK98leI+L4MlhJzaRS/7HHHYuf/OQnvvvx+ut/jtmzZ6vtc7xIRiQMIxyxV3MRpMWfLYEMhSMIhcNaWIqiZvdujBw1EmvXrvXVrq5du+LHV1yu4E8tkwsP0Q9u+sk0gXSdjUhZCHn98jEF5GcGgGX/2HGqyJ5zLaXI1kYMgSj9GqGq3qjKQObs9B3pdVlxUGYInjtjJXkGLDs3YcIE3334y5t/iZdeekk9SYBQOIxQJAKDGC3C33AGAjGIgv+O7Ttw8chLUFdX56t9t956G6LRqNIvsk3nVyDxvK9U/KIJPOugyAZNl8wmlUqENVUHSaWsDvlVkfRkLbcJkT5XJRXBUiXvgal4ySTkEXLqqadi2NChvrrv5Zf/jZkzZ3HfFmOgUCgMQkL7jL9hEBAjDBgGr52CYvOmTRhz9xhfbezYoQPOOfdchckt03TRK5NTQeeXTP2bhwVhecgFknT8TDYAz/RrsRssvdafrdcmayNCPsffaSlSjxCCSRMn+sKmpqYGd955h6tRobCUk58D/PnyR63OWbNmY/777/tq61VXXOnGW+9bt99TlFA9fH74JZPLtyWQl/UA0KR9quxOeemvF/+7+U3NLnUnt3mlz2bhp3Zd192uqhvGK5lPdQtSjBgxAv379/fVbbf++jbs2LlTwT+kGLC5wx+AbRxLYFELt99+u6+2Dh9+Jior27rwT6dyutujaQjQUlF0FfhgmAGoR4ekIpAlDQS2TyTfL5IbSKl19MzrAbIDXZ5SavHSz3oA20shCByJRHxL/08//QSvvfqKgn+I7eOTJ/zZTCDjv3btGrz11pu+nj399NPU9zvrJ1KByynhWL2pPqzuJWByDXnxAvk1KlXSwsWBug7o/sl6vFun13+6TaLPSO77RS5Lpu/0WpblbGHC6YeRl4zEEUf09NVvEyZMFKoTcXKMiJF3/I2QAcCQ6gCefPIvvtp86imnKM9Ri9kAcDQcysvUgUzmOXL2RYX4ULiXCZFryE82qM+RyiRAutvT1ZUpVUpWWOS6RG6Kumhbdu2lep9cKgqRZSkKSlFRIcaPr/bVD2+/8zb+u3Chcs4IhTIm8uUK/5ARgmla/P558+dh+/YdaNcu/VdJzznnHK1+yavH3516EwNKndwxIq5Duy6XfrdozAby4AaVA12qyuOe0vbNqNHdbrof326PNwMxfd1ytiIxk3F79zXLVO5hJY9aspK3wTlnqSkPP/3pT9Cxo7/dG6ZOnar8rWxfmCf8Ga3ketj9iUQCb7zxesb3d+zYEeUVFVJ79PZJfZTqHiqnPlCFf1yz7MHgBqWg9szt1Cw7GuRz9rFk/aIFXpuWtI/aLjsrmbB3ZLBMEW00TZhm0t6ixKOzU7lpqZkU7aQU5eVlGHPX3b7aM2v2bHzxxXL+LAAQYuQNfwXYnp6GI
15688Qacc+7TTxf7qqJL506qF0NZC5LerW2/G+BDhEgloSBSSYg8jHIH+VkTbFFHH7REKR/z647sYUavtB7AS+eWO9Wzg+WdzDwc/5ZlwUom7C0/FOWVO9YdItn3mabtz09lE4iFH5aisN54ww0oLytz+EnSdbVjSilmzJgh+c3temX1J5f4K4PW5aAgEAKJYvmXy3zR+/CuXZVcFntH8BT0ZHgzVqYSH9DMmQD5sAPysC+QmFJ1HVBXWrmhIz8slXInAGqHZHvdJakz4QEApgmLwA5AebSPAk6d4rmqqirceuuvObEZdupyS5tRn3jiSWxYv17pPBIKtQg/P9fT2TC6+2bt2nW++qmstFwRzJTKL3DTE3J7nZNy/6VyojL8cg15+kwqYxBtCLB9IKn4ShifAQBVaqWoXR4yNI2Zxepnz1CLbTIrrkciUQwdOgzdunVFLBbD++/Px/r1GxSKWEkTRtiR+NoIptTSgjMUt/36NhQWFkjniDN9q5tuJRJx/OEPv5fwgp3JmVbOtRx/cVVa4QZtiSLjXkoRj8V80bu8XE7uE14fj9fDSwLKe4OyYzWFPo8qIPKyKN5SJTpTDTj+VOoQh1zS33KWnEQP/rzby6AKHHlRPPtAhwVm3Ionjju2L5546ikc2fNIpZMffOghTLtnqpMr7zCYZYGEwqqaAUh+f7sFh3ftip///HrYTM/aITGttDTwD3/8A7Zv3ya1Hjy5Ldf4sw+UeC75hEjv4zQAfEddC6IFyt9aArZ2TWsvT4fx1hh0L9ZBoQLJ0tOD39US2gjXekjeqIpVrRBYc5u56nPAMi3lxR07dsTs519A27ZtJbXEbsCtt9wCSi1MmTyZ308tE5QYXKe132NJnh/73NgxYxEKhbgqbd9OROncWV9fj0cfeUx5lpCQWF+bY/yVa0S9hz+rPeZ3ADQ1NysPKwJfo7dXewl1P6u2Lr9DIC/ZoH6MLm4Aqw+Lknokv0EZX1oPe40uR0prHp37778Pbdu2lYxSIhsiuPmXN6NDh45a2ywhnYmT8yS9sVfv3hh9+WW8HkWb07S6e6ffi71790iVO27PPOCvXqailGdbj0hTVJPsqaCpuUl7O01fv/Yexa2sOUUcHzOv7qCIBFPqMBy1nMZbEkHVz/uA7TmZIlJImf6e4j/R4d5gJ1WZCgMNHDQIP/jBBa4dKLhLkBBEwmH0cXZrUKQtk/6mCVB1Z7eJEyfx5+EYumJ8Ccm+Y8cOPP33vyl1SzfmFP+MbmV5VFmW8me37t180XvXrp0e/E0UXNJ5sTgfMBvNKb1+yEMcID9fiGEIwnJ0TNnolT+SpOq0ug3ANNX06RRQ6pI3uoLU8QymTJosvYswXnV5Iiq0BeBOdTZWDrMwKX/SiSdgxLnn8GdZLcLgFFPBxIkT0dDQyBtPKex0BFla5gp/+Jea+kDq3auXr+e+/Xaj1h5ViVF6RFfBstRo0g32lkLuP5BBhXRizC+MLnVA6Jqd7PdOUTs0MwrQdERV6tgzDBOww4adgSFDhih1sClX7G9jS+7Pli5RjF5C7aCNbU8IRjMMA5MmT9H0d6+9cYC1a9bhxRdfULCBYcDwvY+R5NVi+FHmPRFtBzFAiAHDIHygOmgqNoTcf9SyJCOboK/Pzbq2bN6s2RTgL3DtC+SiFhSnSTojnV3PNeTpE0msM9Rpmji7AKg5HWouUDZ6XtoPS0v56ZTaq6GmTJ0iAjKMAszKlMbVsmWfY+2aNZBvASGwLCccLzVx+PDhOPnkkzShJw0oKSBUXV2NeDzOagSlxGFS/xKbpwtYlmRnEOlZx+ULE6D2R/BElfp3egXNeN8BCIdCuOSiSzL2/+aNm7Bz565suEPuUdVB4rSD8YjOQ/pxriAPn0hKh7/2VcGsjRrV0PMyDEV2ppqbc+EFF6Jvnz4KCYjyh5BYEyZUKzori2SyT5QyCBkhTJ06RTwPMVhYweTZ0mWf49XXXlVwNgwjqwQvxvgiNdsbfwaWZYKAis2rUril2eJ99uyQU4agc5cuGdvzzrvvQBjWADGIIqXTRa9lnpBVImrJbl5tRjgYAmE6Quk0lowfhm5xE1RjKRqNYvLkyR5bGkozk9OoDxd8iPfem+vUw9pmM78dTBPtvfiSS3BM72Ok2ICNnEhfELiPGzcOpmmqOGeJv7wuwXdfWBYsEOmbX7rK6K7zZ9dd76vu+e/PZ9UwgqaVgLqKRwhxZjJpBpfUx321GfxAHlaEiXxzIvWJckyk1IB0NWleDFf+ilRyd6vFpKQ4d/llo9G1WzenLnCDVPkYm6OyVFdX8/r5B6AZ80jqTEE0iilTprCGcuOPe5fAJCIwb/58zJs3X0lNMJy4gl/8xXoDgX9hQQGuueY6vPvOu1i3dh3+859XcPXV1yDE0il4nzh793hsDEYVLx3F4YcfjgsvvCAzlSnFu+++p7i5RRqG/dOzf2X8FQcZpyN4KfkNFH7KNeRhBlCNHLfGKYDLohRTm9xhgFt+uQJnFLBgcQakAEpatcL4CdXcPUdYshaR32P/8cor/8Gniz9R2+BkSep70lxx5VU4rEtn0RD2Qtm16TBb9fhqtamEgCoRrcz4s6Abq6e4uBivvPIq+vfvz/OLhgwZgiFDhmDEuefiZz+7Dg2NjbwOi1oIUcf+YQNLMn5ZB995512+yPz6669i9+5dEiMTrqykCvy76Ocweyr+8NLYcg15WRPsZLHyY4GRVPpAyn27vOSEGc8iUGSxTFOIzr722uvQrl077l4kDrPyUlKLJk+d4uJFQgxYVlIEbChFq5ISTJw4Qc0K5baC/CzBnDlz8NmSzxTiG5Lnxw/+FrX4plHs3AMPPICBAwdoDgD7neeOGIFrr7tOHXSUKm2ggD2jgE8A6N27F6644gpfNH766b8r9bO+UN0bKv2U+/WbPB7QsqPVe3ME+VkUn6oHNIRZ7oe4X5KIbCqVplSuZoAox2JAqDsTVLRujbvGjEFKNpOm2meeeca1Q5rtQaHQR8UNP78elW3aKIRlHhT7Q
15688dGqKVMmK6+zBx6BZyDLA39qWYr0B4CBAwbiyiuv5ALAntmI9Ddw111juDHOBq48CJiXTO6Z6mp/K9jWrl2Lt99+WyUpYdgIeik0ZO5xqgby2KPMK0ekE/qmCgeHDWBJOn+GH/+eXiqlT3ZRUodZKEQHyucs6tqK8OabfqlsRcg/xMx62nmNaVm4997pyrO2NCOg1FT4v7Ky0mEudwYB0cr/+8tfsHLlKrVeJ1eI450Jf0jjwqnDHlRiJzq5zczALykpcQXz2CBg9oRc5/GDB+O8837gi8S/e+A+ZWNdpoK5Rb5EQw96ApTzAbVs3mFlyl+OIT9uUJ9TlfDFe82D7E/qvuRxO6VyZiZFxw4dcettv+Y3EAjm4LqpQ4uHH3oY327UIpqO9NcH1a9vuQXFrYp5XV7BK0IIEokE7rvvfrVOKfLMcVMjUwpyXksthw0ditNPH2oPfCnIJjwlduWWZSFhsg26dNHp9qhPZgZ9BtiwYQNefOFfUltVMcA8OQrtUhoF6W0AwFvA5BLymgrhC5i7EAAh1OEJbzPaHRkURrRw5dnXfnv77YhEokLNYsJV6k0KINbcjD/96Y+8LdIKbft7XhLBOnfqgltuvVVqusgkJRJnU0rxpz/9CZs2a4OKfVJI4guCNPjzqLpdr2EQTJ12j9x5/L1cCDtK/bvvvoP6unrxbtYPlGV6CmFx5pnDcfLJQ3yRq3r8OCeYJ+rlQoVJ9BQS0PWBlDzo9NlCXlaEQRJG6UPxdhcygsszpHhA9JS6qsp5FhSW5RDTeUH3Ht1x/f9cD0YKoRrIHiqbVPff/zvs2LmDnQR44MjtLbr77jEIhUNc+vNmOozFGLipqQkPPfSQ0i+2kSj74hmje+PPpb+E/w9+cCH6HdtPEgTCUyTUfxvRRx55FFzFIhSUEISIIQUIbfxDoTCmaIvyU8GyZV/glVdfUSU6cwR4gNsLqC4KIoSq+W0Z4kb5mALykAsk/UE5T4n2a1OesiBCDwxpSrVL3SBwtiNRpf+E8dXC0wO1DnkG2FOzB4899qhEUMe8JoTvdclGbM8jj8K1116rIcnMWuGkNgxg+vTp2Llzh+Z3N3hgR0gAtVTwp1QsFCJ2MG/qlCk2XlR4npgBKjPZRx/9F++9+7baRieSTZVUDooLLrgAfY7x952y6vHjxLeCeW8SRWDJ7l3K8ZAloIq/wtNpVFzXcY4gvzZApkAAx0qoDkCaZDB50bf9gOalITi273EYeemlGjMJA9i+yybMlKlTUVu7V1F7SMiAxTZ4knCZPGkydFEkcpFEE3bt2o0nnnhca7bt9uSRzhQdxPC3nGCeTPHLLrsMPY44QpGKcqoAD5oBGD9+nOIh4heomsoRLSgQwbwMsODDBZg3f66MPgiBK5dJrt8t0N34uwaALvH1GSHHkJcBwNuv6XzeA0LX6dNEhzWjiiW9yTB16lTerbwkUr2Ovrpx4yb8/em/qfU6UtpyDGrWnoEDBuDii39o10jU5mjLCTBp4kTU19dL9XoN7nQ2jez6taG4uBiTJk1WDGi2nJA/73iQ3nj9dXyyaJHWPoPbBnKbLx/9Yxx+eFdfdJ0wfpza/45fMuMKNKn0xl9jHrnUjvNhMuRlWxTD+RGpVNQf5vVziCL7EfyqeSztQYZTTjkFZ5x5JtfJZeGneyaqq6vR3NystJzt4kAk/zgBcM+0aYr3iD8hO60BfPPNN3jmH8+o/SHryJqfnwWo1MCQew3Dtddeh/bt23Nc5LpFMM/GedLESWrqAQCDECf6K/Bq1aoVxvv0+7/6yn+wePFiTf4YUuzBN9E88AcPdBFIpQe/GAeDDaAEvTSJrzM51WaDzPnw8r1q0IsQgqnTprl80nxGktwkX69YgX+9+KJQSQG+aZdlWUr7hg0bimFDh8FRvhVdW0d27NhxaG6OKW1SUMwk4eQ8Jwdat67AuPHj7bcxnVrGi4qZ5Jl/PIMvv1yuzFIG/w6AJBQocN3P/gdVVem3PmQwefJkRdUjhkjjTkcvPx86l4WK7iV12YwHiwqU0nmr6XjMg6F2RvpdAZjbE8wb5Nx03nnnYdDAgc6DYp7n0t85RwjB2LFj1S8kEql2iWMNw8C9985wqtIMVfsPTrAvli/HnDlz1L7gIUzWrAwD3JnVZPxvvvlmlJWW8j4wpOcJCCixmd80TcyYMV30idM+AvHNBsZglW1a+875+fvTT+Prr78WDZL7k/W1T/CMmdDU7HLwe4E8e6HldQsngbqIJhwKczWF+RIZgwqRYh8v+uQTvPHmG9y/bmeC2uKf7YTA6v7hhRegf/9+ip6u7BDHd3ygGDfubmdQOVQjEv2kxvrRmRl06NAev/nNbwGpHurgRSWVhlKKR/7fI9iw4RvleYMQO4eICnuGgOCXv7rF19fjLcvCfffPUAUSS+PmlEhttfpZD/C98wIBitBLC8wwE9JaMCXrHqoqEYqKwLp71KWj0LMn24Zc+MghzSYsWW3s2LEeTChJfwei0SimTZ+m4SV5i6SgwsKF/8Wbb77t1EJ4cEjOCeIIyy4jyU3KF4hL+N9xx532t7iI9E64JWksFsMfnU22OAuy2UfavQIAOnbqiF/96hZf9HnowQex8duNSC2CVZ1Gxh9wC3Av/N1xIZWPZKM9H5DzAWAoGHv0l24TpHMDaB3GmFpm4FA4jPHV40W3K0seiRgEhODNt97Chx8ukN5DQQz23S3VoB49ejR6HtGTR5E9YwrOGBhz1xjleeb3JsyXrwjIFHO+YhARdO/eHTfeeCN/t5w8p+yzSSnu/9392LZ9myYsbea3pN0rAII77rgL0Wgko+ZiB/MeVIhJYOv/qR5muFJpBGTCX3EAeHgJtdWzOYf9qwKlmOLUXclEj9n+bbGonsDZT156/LwR56Nr127uztOkKyEEE8aP53MMu4e7HiUoLi7G1KlTBLOxVGd30/Haa6/hI21vf/7hD12CaSKRKRAWX5UlbpgwcYJgflliUlWNqK2txWOPPsr7x76NgBgElmkpbe7Z4whce921vtT2+++bYQfzBFKSz9dpvybQdfoSP/h7qTj58HemgPzEAVJ0gJcGIPUnoM0Aup/c1oGFpDWIgbFj7+bXeAYnmJEsJOWsmTPx+Refa3534ixyp8q7rvvZdejQvoMk6QXzEw2pasdDw+jGIskpCSq7Ufk5Kg1x4Ni+x2L0ZaP5A8yzJbaQEXdPmTIZe/fu1foLPJAmr6mtnlgNeev1VFBTU4Mnn3pS6RPxFReqCCTZS+NWeXzgn4Y/vHgr15CXAUBSTGF60MjGX1307Ep1kKZMIeTtEyeceCL6HnssQAADjk+ayB4aoTpNcQJkMjFtHdn+Si2DiooKTKieoFCV29Yarn//+9NY9sUXmkojWIBpNVIcSFMBCQ+6yfhPvWeaxghSn0getM2bN+Ppv/1NncGcuID6xRqKfv3645JLLvVFwylTJqOutlaqkkAegKk3v9V43Qf+Rgb+yDfkZ0WYw1tsMMh6nkv9pUxOURGxJYKPOD+xqZ85v0Fx6ahRYGnOVO442RtECJ76y5NYu3YNf56v7pK3OXHaceuvbkGZs7e/XZVKIc4EloV77pmmDnAm/ana9lT4WNQCLKrgP2TIEJzrbLKlv5+vUXb+Hj9+PJqaGsX7mOuJcoR4H0+Zco9zTIWR7gGbN27Es88+w+MG8mzpwgcas8oS3wf+cgQ8JX9o13MNeTGCU6lAOpLc7pONXMhSJNX2eraX5sofX8n1dGZwsc6SZ5aHHnxIvJgKHVlkW9qXO3TogNtvv0M0Ts4fYsznqEN/evhBrFu3zht57q2BSwIqtq5F+Q7OrMPunT6d4ytmAabOiZ5ZtWoVXnjxeVcwEVz6CzROO+10nHnGGdyFap/31jOqJ6gRcvlDhm7Xv+YGJVniT6nKLxp/pDvOFeQlEswRoWrp6QWistPTW9XgFUswZMgQlJaVMmXGYX43cV966SWsWrXKVQWV9sJkcOeddyJaEHUaI2V5ytmLhCDWHMMDDzygNFrNEZLctLLTQxrhesQXAM4bMQInnngSnw2cZoAytwoVnp+7774biXhC7XOi9qf9PME990wT7XT1pICvv16Bl176l9pPYCkI1C3RdKOWirhEJvzlx1N5gVLZjLmEnKtA4YLUuUBKvodzXBSxUk6BXpu7ss4bPvwszqAid8wJ+Uv5N089+aTSPkKYNFfZoHuP7rjpFzdJwoz59MS8zVSM6TPuxbat23h7mG
15688LiNWX7pVk4HMa9987gcQ+iSV0+C1CKxYs/xWuvvapWwPJymJroPDfivPMxcNBAJe0j1V5E48eOU5c6+qCHHsnPBv9oiCq5Pzp/GBClASAU9dmZWUDuB0Bpe2ED6D+oNgEB0LHcSt2hkuhgswUTK2fqSW+OCJT3oayvr8eCBR/IFARAeGoApF/1uGqwXR3EuwjzZnJS1tbW4s8P/1lFmohvmjEc0kVBRV6+eP+loy5Fr969lNVVaj8QfjzmrjEiEVBxC6u7ZkQiEa5Suex0DT5Z9DHeevtNxQXDvF5p9/WR6vCLP7vetXVS4QWFRzx+kbL2uWbX3A+AaFmX1EaNNK2z35CuqTvItRGWMx+WlZfjuH79VHccI5kU+p85axaaYzHBaLIHQ7KaDzv8MFx55ZX8NNeVmf0htX3CxAnc7QiJKbwInhak2woLCzF92nSBu2S/qFoHxdtvv4MPFnygXOBS3WkT69xRo0bhiJ49Be4CcW3gAOPHj3W2JSSKGpvOJ5+J4TPBSV1VXpB5xAsipZ39VZwF5HwARMo6U4aQIZWGdo79LhuYoZdlcDq3zzF9hD+fOXw4w4jenD/vPc2pzK0vpb6rrvqJsEuIJi0heG3L1i34y1N/EQMKUmzAs7kqgxCwbFMV36uvuQaHOXtxiliG1AY+cAmqWV6+ZpfI7wOlKC4qwuQpU7m7l02eesQcAN566w189OFH4AKEKWKa4Z0tw3vhz8qIYdNe5gUDovT6Rcq6+B9dPiH3blCKfyvTmvST7QJ2fFQVcOUgM6tXdOveVfLnC6+PMAXsflry2WcQMl22QEVdBQUFuPnmm2WqcUnJP+npCMa7x45FU1OTqI8Zh767RmYa+7isrBRTpkzRYkXsurADCCGYPWs2lixZotVKpPoEjldffQ06derE65K8s7wNzB06aeJE0Td2lYr6KbdMlNTjuk/8QfGbM5M4skqzEXUVSD5nP/jvbPjED+R+QUwkMj3VAIBUysdjzwaGHZlU/WxMyjAVCEwyUXTr1l2SepCkGzhR44kE1qxZK71JdjGIuk497VRUVlZKjZJ8+RIB1qxeg1n/nMmNVDb1EGJ4tzelDqwyzC9u+iUqKio0VdHdS5RSTJkySRoc0roA+X2gKC8vR/WEieCxAacekdYtBvfMfz6HZcs+57XJ+Lld0OoXbBQ/pw/8GQw70sR1J7qNZpeAlGYFQmzeyjW/5nwAdLj4hYWF7btwtUf+haQy5CAXIkA0BDxxGXDXWSZCUnJIKq/CEUf0VIxfiV+5Prx65UqY7BNM8pSueS0GDRrsVmGoKv1BgPHV1Ugk4owd/SnJmsRkXhrGwm2r2mLcuHGu9wsvjZDejz32GFavXuWyqeyZUF3BdtNNN6OsvIzjLpiUDS5Ry/RpU2VPvwh48Tqpdl3gkz3+FFcNTuLRUSr9UzG8fK6wfRd0uPiFhcgx5CUduqDj4CWJ7Rv7a25d26csdYtBZD8z8POTgTOOMPHcZ8B/NwBrdgBJGnJJkcO7drMJz/LxISQ/M2BXrVrliivIywQZnHTiiSKPSFo/wA1fCuzZsxf/+ffLqttb8VGzGtX0bXVCo9pV4Pbbb0dRYSFP8BOLbYQ9QylFIpHEfffN0FjNvUQTANq1a4877rqL3WLvIAE4a4hFU+01BH/GWj2YJzVcz/2RnHCColq6p45/cdRCpzKK03oAowcAR7VLTX/WZl67M/tSAhR2PH4xsBG5BrLvVbhhz6ujj6hdMnM1jbsHgM6AGRsod4hHYCRdtqFXZO0/y9Qd9q59aicKiiuUGcKQDEQCYM0Hf8WbD/+MVxcNAeccDRAjPT7y6z/eAGytE+cq2h2O0X9aA7YYh+dBsQ9EUKEzL395Glovm8QZhkgvyBb/tJDmeTmO4Jee2d6fCowoUNZ/dM+K82euyfLRzHXnukIAqDh/5ppWfUYu8vL6KFa/5iXy/EEKhEjTpqxO8XsNqTSc5wxpitXCBgWFxYgUlauGoaQmMcbaueZjRcXoUAaEQpnxYcc1jcC2OlWNO+FHE2CwjbLk90pcQ0CQaK7HklceBPNQ6u/ICn+p9KNzK14ZDUc/9MwJ/QnQqs/IRflgfiCPWyNGjILzwyXhHVZDUkx5EGoQpON0EkQuPSVIGukm5cTxe3mgSz6v18umXofpmmt3KtK3okirR6tDb++K7eJ+CqDd4b1xxGnXclUqlfObgmL5nClort8N0wKiYQ+hng3+WYJMHwLvCcIP/vtCf6NVGBGj4PyWYZAZ8rY9etmFz+1sdfQl02QJLoe3vULdBpVKdk86I1qTgPp1IpV6Qh4Ax4YQZp1s18o2gOEoqex6wvT2U3vht70W2N0gPKYEwAmjp/H6+C5wUoSVRbjj9Tux7I3HAQokkqLucAvxz1ZiK3UwHOGNux/6Zkt/A0Croy+aVnbhczvzxad53Ry3/ILZ4/e8POr8pqXPD1A4KIXR43VdSdvRRIxLolB3NiozVhmo+edUMYDthe5UvMph2PL2RyrP1cdS7FGjtZ9SW/ob0vnOR52AzgMvsq+zf1n6g2zREmDp7HFIxhtgGLb0N5wRQlqIv5eEliVwOvL4kpQtoG+660X9Rn1WfsHz4/28uqWQ992hyy+cPZgkRpjNX77RIquIAHzPHkrtYzm9lsgDgqheBa/7QwRgO54nY41ortmEotZdINKqbY6R1aF2vU5V6LStFqhtslUhV2Ol9qzdCdQ1qzQ+/or71XshOJY/TggadqzDinnP8Gcjkk6/L/jL97PjlDv3SfShBJnplYm+WdC/8JhzUXbh7MF58tNwyO8XYgAQQqyyrl0rCo85123g6EZbih+fsg1R+jLyDFGyd1W2UtWAnasXCCLLEpjn1gDt+45AeVVn5bklm4DmpNZWCafdjcAXW4XuTwB0H3g22h59muJVUfJ5pH5bMvMuWGbcVkEMoDgqDO8W46/dr5zLdN0PveR7/PxS1FfY51yUde1aQQjJwycx9vMAAAAy+PG9ZSNfDxUNGP15OKR5eIjU4fI5po8CqXVOonktfHgVulSof+9e53wUTzJqdec6AdD/gt8qz9XFgPlrgC17AcsS5y0L+Hob8NE6qS0GUFBYiOOv/KNdG/PFa+9g79/77edYu2gOr7O0wB4EucDf5WHL0P/78gsZopSPU70/ZADFA0Z/XnbJ6yEy+PG9+4M399sHMpzR3K/x9ctnxFfMvos2mv7cAjJjZphCPb0Kmj1RVaJOqjtXfiStcZWMXa4G2YGgnmffig2LXsDGLxfwZ+NJYNE3NuEqioBYEmhKAKblejUGjbwbpZ16OZFgae8iLTpNKcXSmXcClsmf71gqmHtf8de9YnJ9rjgLpGCUV//r4KHypFW5JPqT4jAKjx51X+GIf44B
15688ZmbNXy2F/CpYqfrpvR+3jcXwXnz5c31pPM2NWbbOD30sC/jX5+IBAoKLf/clWrU/0v1KNiCcipOxOrxzz+nYtu5zZAPHnftz9P/pI7wRnE+03HsA2LXyfbw29QwFofP7AEWR3OCfjUquqP3ZRq98AokC0T6Xf1FQQM4gZ+TP25Ouzw4Y0HnXHBlrir9qbZrX09yxKSUFs7CZMyJLYasnm8WmB+hz9g047sqHoS9Al3NyWDpAsrkenz1zE76e/6ybK7T2h6OFGDRqAo4ccRcXrerWtu5vBrw79WRsXb2IV1lRBJx1JLjmlAv8W2yjZmsE6yA9H6rqjFDn01dGiwouIEP/ugoHCA7oAJAh8e7Vp9Bk8h4arx2G+o2w6r4Frd8JmkDLRJbXdQd2NwDvrhaXi0rb4MI/fINQpNAV8JG3NuffBAbB7lXz8fVrv8eGpW/CjDcrryssaY0eJ43E0eeNQXG7Hs7j8qaB4El7cvO2LfkX3vnDjxSijOgFlBTkFn8O2UwZzHDXVaQMryNRgJRUwig5DKTkMNCC0nkhRMZFzvnbAnwH4DszALKFwgHD/tn82dzRQFugtBIIhx1/qbPUsGYjgDoUHNXvB7GVS+QFtCEH7x8C4IrF1Af+eOudt/zyZNkVShRqS7ODVJlFKZZ8+RW2bd/RSAzD6NapU+HRRx7Bxomq8gBQJb99EwVFXW0dfvDDC37z3wULNkvV7wDwro57p06dijdvjjcAu4HoYUBJqVDwQYBkAqjdDmAXio4/d2vTojc6Hmh6fVdhv3iB8gG0vsb5EkWj49gn9gAwQvYvVA4ghFB51X3ao6aD9zr55PTqux9esGix/Ye8wsqVRyA+8sxmiAF9jsF5ZwwtHjH0tMJeRx0heNFL8lJIao9TG6X4/SOPvqkxPwB8Bg8hVVPVYwqwG0AZUFwi8CaG/c54EsAeAIC15ZvTDzStvstw0A6Aitqt79lOrEYgaUHk+xo2I5SWAYigcdG8vq3adddXU5sAvgDQxE40NTWZ902fNqG5qTnlQm4bbIelPPUz6c6YXlZtlOelASUvNXxz/gJzxsTxf9XauBJADbRhVF5+eOumpct+C4SA4iog5Mx8DH/LApprAFgoHHT2x7GNXx0w/fpggIN2AGzbtq2haNCZtjsm1uDkODuzAAnZjIEKAAbMLj30lUQmbFVokXzyjVdeXnnbnWOeiLP9djSQP8jH9+qHYHJZ/5UjyZDO6du7fLBoMW7+2dU3mKYpB33qASyDh/SP9ej5sD1uy4GiVo7a50RLKAGa4wBqAYRBtn018kDT6bsOoQPdgH1qfEnFt+buLVcABIiWq6FSQoBwFIjVIrll94DSThV/jtfVNUqPWwAaALSCPVIAAJ998vG6nXvq954z/MyBhmFA/gSqYuzJXiI5hYKKlIpUtik7+eGixbjuytE/X79+fZ2G2gewuVyJhBZ27921+auvngIMoLQzEI7Yg52936RAwzYATSgYMPT55pVLnzrQNPquw0E9AMzdWzYAVdVAHUDLgEgYMMJOaDRkG8YNCQCNMI458eLkplUPS49T2EbwVgCdABSyC4sXLVy7bffemhMGDx7UqlWrlG5Z/XNJcl6/rSgxM1ebBgjwxrwF5o3XXHXjunXratXasRzAergtCBLpddLa5MZ1RUAboKzCwdW5agFobATMHQAK0Spcf1qstrYJAaSFg1YFciBecFzvBwALSOyxmYDCCV86qkHr9gAiaF74/lEFvU6+QH/eeWIubL2Bw1OPPvzO2WededMLr71Zby/yFtf45mvS1ih8ra8S3GLqkvg4dWNjI6be//t3Lj73zJ94MP8K2LaJC4p6n3RZ03/ntQYKgDZVNvOD2LhasH/xXQCSKOg3+MHajRt3H2jiHAxw0LpBGVRUVFTs2ZOoAUygoDtQ3MpWhUJOJphlAbt3A8ldQGl7dCrd22rz5s2NWjVR2MLgTACl+jt+dceYS/7n6qtH9zqqZ8o9gMQqLvCF9MplSvHSm+82/vmBe6fMnzt3vUcNKwAsddqhqD5FXY7q3LSxcSPQABR3AkpKxAC3TCCZBGrrAfMbABWoqkqW7tixo/5A0+ZggINaBQKA5ubm5oKBZ/Q3t6zrBRNAQanjCjWEflxYDDQ0AfG9SPYe3De5adU/tWqYa3QDgHYAlETnjz/8YMUTjz364sZt27bFEO59dI9uUcMQH5rgATIWMIJQhWpqavDXmS+uvOM3t0z/w4zpz2xYv36PBxpfAvgctkqmb5JUkDxswG7s+BZAOdCmUtL7YScemSbQvAVADNFj+91Vt+7L9w40XQ4WOOhnAAAo69KlTe3Gxl1AHAgfBpSWApGIyAcGBZpjQM23sFWEvr+ILZ37qEdVIftm9ALQBylUxKOPPrr1qWec1b/7UUf369atR68O7aoqTIuCUkqTVtLasnXbjnWrVn229NNPFs19+/WvGxoaUu381QDgYwC7nPcqkr9Tp07FNd1P2tW0YH4hUAS06+J4uQzh8kwmgZrdALYAnfsCmxZGACQRgC/4XgwAAIgeN2xi/POFk4BWQFk3ewBEIg7DODp4ba3jJUmi6NjeVzYtm/+sR1URAAnYnqETALTOU5NXw1Z5CmAPBAU6depUvLvbyQ3NH74PIApUdgGiUcH8pmn/GhuBpg0AmhE+otcpyTVLPjzQtDiY4HszAABEUdE/hj1rAVQBrauACFtF4mBqUaB2L9CwHYCJgj5HXRRbPv9lj7qYakgBdIc9I2T+sG5msAB8A2AVgDrYg023R9CmTZuy3d1O2YvFiwAUAm07A9EIOLmY2hOPAbWbANSi4PgzFscW/XvQgSbCwQbfpwGA8BH9hyTXrFwARIGCbraxGHLcoSynmVJbZWjaBYCg8JjOZzV/+dE7KaoMQaglHQF0he0yzXYdRT2Atc6POM97GqklHXpW1Vf23I7lywAUAu062f5+Riqm9pgmULMNwC6g9HBUFW4JDN8WwEFvBMtg1Wz9tmDA8C7m1m8GwowBYWcDH8PJf2MxgsIiIGkAyUYkd9T/tGDAyTXm1tUfe1TJfJoR2GrKNwC+BvAtgJ3OORO2O7XR+TUA2AvboF4BO59nBYAYbG9Tg3O/DkZBv+E/b1pbPw/bNwMoAtp3sZnfCAv3rmXZM8DeWoBuB0AQ7VJ6XN2mdbnfNu0QgO/VDOBABEefE8fXiwCUARVdbFWIzQKGlDG6uwZo2gnAQtGQEz4tWfXVsB07lmeSomHYAyIJ21bwboOtMoVhR3TT1lnU5ajOtNuAVc0fLCgCQoBRCrRr77hyDWkVf9L+NdQDsY0AYig4dvBvY8ve+f2B7vSDFb6PAwDFbbt2bNxVtBl0J4A2QJuO9gAIOe7RUMjxophAYwNQsxWACZS0RuERlT9tXvrWP6B5ZPIE0cKB593evHjVNO6JLW0HlJXark4AfPtr0/H3NzQAzd8CiCM66OTn4p++csWB7u+DGb6XAwAAoof36xP/ZvcXtrZRBVRW2YPAcIJkIGITnXgc2L4NoI5GM3gwCpp3Xhj7Yu5rcPvl9xmqqvqU7D28223xldunoG4ngBAQKgEqK4FoAZSImmUBSdMerPX1QPMmADEUnHDqB7GPXxqK/TNQv7fwvR0AAFBw1Cnnx1auesU2daqANm3FTMAS5wDwVSsNDY5hGQdgAV17oLBt8QSybcVfmjau3LSPzYkW9B46lLTueG/zh4sH2RqUAaDYDm4Vt7LvMoit8jDJb5n2tnC1dUBiM4BmFJw49KvYwheORR4G56EG3+sBAAAFvU69MLZi3cs2h1cCbdoDYcczJG86BNjSFrDjBbV7YKvvJgAK9OuHwkLytNW491+hXVsXN21evg22YesFoeKuvdtZRZVHW61an24Ulf26+YNPWttM76Quh8qAigqgqEi8n60XsBwbJWnaq7t274Gds5dA4fFDZjcveulyBJI/J/C9HwAAED7y+NOTq3bMsyV7GVDe2Q4qhQwpTiDvdU5tKdzcBNTVA/E62AOBZZ05QdvitkC3DkBBBCiIArUNwLfbYas1cheHYEv7Anv5YkmpPQjZlnfyoknTsqW+admSf88m2DZ0HNF+/SfEl74x9UD35/cJDokBAADR7gOPi28xlqJ5K4ACoLgL0MpJnOM7SjkMyWMGEGuCGxttW6G5GUg2w5bmptSF8spfA0DY2fMjChQXAwUFdmSa3avsWQjbyAWcAWDZs1DMzu8BaYvwkUVnJVemjFcE0EI4ZAYAAFRUdKto7D1kffyj+eW2h7ISqKi0mZSpRKxXtIUukL7Ly/+2nIgsy482iJOIR1TVytCYXa7XdAaRaTrLGZuB2m2wA8UmokNO21v4zfweQXpzfuCQGgAOGNEBF9wT/2z53TbXRoFwO6Ci3F5GKW90ybYx4+nN2jYPgPsaB8bk2j3UWb8MiEFkWXZaw57dsJcBJwCUI3Jch5sSn7/5GAJ9P29wKA4AAEBRpz6HW9
156880GfB778H1nNigAwpW2YcpcpbqRLB9zsDS+J9J+gmz9r1Qy1yZfwN4M1O6GHTxOArAQPf74l8vWvXfVzp076xBAXuGQHQAMoseccVG8NvoSNq6EbawWwDaUK2yfvEFE4MwIST1GhK3AvTjOJWo5apK057Nlib/jcdu4TtbCNnDtewpOPP4DsuXTq5u/WbnWR9MDyAEc8gPAAaOg9xkjYq06vYJP/gvhtSkEUGIbsYUFTlIaxMwAuGcE+SvussRvbgIamwCrHmK9uwmgFNHjj/pnZP0XtzXsWL71QHfEoQbBANAg2n3gcag68s74ss1XoslONhO77kcAFNrenXBYzS/iKQuWPQMkEgCNww4VsKXHJq8vOuT4VaRm022xr95+C97JcQHsBwgGQGowIj2GDEKbTleQwrIb4x98Vmgne7LBAKnUNyVnsQLiHBtA3+MQKaJP0rrNzyRXvL8QQPOBRjCAYABkA6GC7oN7orCip1lQ1NuIthqAUKQXIaFSahglAFoBdC81k2uRjK0nVmIDad77Canbsbz5m2XfInXmaAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAaSD/w9pjtkiChl2zQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wNy0xNlQxODowMjo1MyswMzowMDrRFi8AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDctMTZUMTg6MDI6NTMrMDM6MDBLjK6TAAAAKHRFWHRpY2M6Y29weXJpZ2h0AENvcHlyaWdodCBBcHBsZSBJbmMuLCAyMDE3v/MY0AAAABp0RVh0aWNjOmRlc2NyaXB0aW9uAERpc3BsYXkgUDOPebu8AAAAG3RFWHRpY2M6bWFudWZhY3R1cmVyAERpc3BsYXkgUDMy4RxJAAAAFHRFWHRpY2M6bW9kZWwARGlzcGxheSBQM95n/9EAAAAASUVORK5CYII=" 15689 }))); 15690} 15691/* harmony default export */ var Logo_LogoLight = (Object(react_router["h" /* withRouter */])(LogoLight)); 15692// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js 15693var helpers_extends = __webpack_require__("pVnL"); 15694var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends); 15695 15696// CONCATENATED MODULE: ./src/components/Logo/LogoDarkMobileSize.js 15697 15698 15699function LogoDarkMobileSize(props) { 15700 return /*#__PURE__*/react["createElement"]("svg", extends_default()({ 15701 id: "Layer_1", 15702 x: "0px", 15703 y: "0px", 15704 width: "60px", 15705 viewBox: "0 0 60 60", 15706 xmlSpace: "preserve" 15707 }, props), /*#__PURE__*/react["createElement"]("style", null, ".st7{fill-rule:evenodd;clip-rule:evenodd;fill:#f77c00}"), /*#__PURE__*/react["createElement"]("defs", null, /*#__PURE__*/react["createElement"]("circle", { 15708 id: "SVGID_1_", 15709 cx: 30, 15710 cy: 30, 15711 r: 30 15712 })), /*#__PURE__*/react["createElement"]("clipPath", { 15713 id: "SVGID_2_" 15714 }, /*#__PURE__*/react["createElement"]("use", { 15715 xlinkHref: "#SVGID_1_", 15716 overflow: "visible" 15717 })), /*#__PURE__*/react["createElement"]("circle", { 15718 cx: 30, 15719 cy: 30, 15720 r: 30, 15721 opacity: 0.13, 15722 clipPath: "url(#SVGID_2_)", 15723 fill: " rgb(51 59 65)" 15724 }), /*#__PURE__*/react["createElement"]("defs", null, /*#__PURE__*/react["createElement"]("circle", { 15725 id: "SVGID_3_", 15726 cx: 30, 15727 cy: 30, 15728 r: 30 15729 })), /*#__PURE__*/react["createElement"]("clipPath", { 15730 id: "SVGID_4_" 15731 }, /*#__PURE__*/react["createElement"]("use", { 15732 xlinkHref: "#SVGID_3_", 15733 overflow: "visible" 15734 })), /*#__PURE__*/react["createElement"]("circle", { 15735 cx: 30, 15736 cy: 30, 15737 r: 30, 15738 opacity: 0.08, 15739 clipPath: "url(#SVGID_4_)", 15740 fill: "none", 15741 stroke: "#171819", 15742 strokeWidth: 2, 15743 strokeMiterlimit: 10 15744 }), /*#__PURE__*/react["createElement"]("path", { 15745 d: "M19.41 15h21.18c2.23 0 3.04.23 3.85.67a4.65 4.65 0 011.89 1.89c.44.81.67 1.62.67 3.85v12.18c0 2.23-.23 3.04-.67 3.85a4.65 4.65 0 01-1.89 1.89c-.81.44-1.62.67-3.85.67H19.41c-2.23 0-3.04-.23-3.85-.67a4.65 4.65 0 01-1.89-1.89c-.44-.81-.67-1.62-.67-3.85V21.41c0-2.23.23-3.04.67-3.85a4.65 4.65 0 011.89-1.89c.81-.44 1.62-.67 3.85-.67z", 15746 fillRule: "evenodd", 15747 clipRule: "evenodd" 15748 }), /*#__PURE__*/react["createElement"]("linearGradient", { 15749 id: "SVGID_5_", 15750 gradientUnits: "userSpaceOnUse", 15751 x1: 30, 15752 y1: 12.9238, 15753 x2: 30, 15754 y2: 41.9657 15755 }, /*#__PURE__*/react["createElement"]("stop", { 15756 offset: 0, 15757 stopColor: "#ffab00" 15758 }), /*#__PURE__*/react["createElement"]("stop", { 15759 offset: 0.5282, 15760 stopColor: "#d28500" 15761 }), /*#__PURE__*/react["createElement"]("stop", { 15762 offset: 1, 15763 stopColor: "#ff8000" 15764 })), /*#__PURE__*/react["createElement"]("path", { 15765 d: "M44 16H16c-1.05 0-1.92.82-1.99 1.85L14 18v19c0 1.05.82 1.92 1.85 1.99L16 39h28c1.05 0 1.92-.82 1.99-1.85L46 37V18c0-1.05-.82-1.92-1.85-1.99L44 16zm0-3c2.76 0 5 2.24 5 5v19c0 2.76-2.24 5-5 5H16c-2.76 0-5-2.24-5-5V18c0-2.76 2.24-5 5-5h28z", 15766 fillRule: "evenodd", 15767 clipRule: "evenodd", 15768 fill: "url(#SVGID_5_)" 15769 }), /*#__PURE__*/react["createElement"]("path", { 15770 d: "M42.79 26.74c-.63-2.12-2.02-3.84-3.91-4.85-1.9-1.01-4.1-1.2-6.21-.53-2.1.65-3.81 2.06-4.82 3.96l-6.19 11.65c-1.5 2.83-.45 6.34 2.35 7.82 2.8 1.49 6.3.41 7.8-2.42l4.73-8.9c.28-.52.34-1.11.17-1.67-.17-.56-.55-1.02-1.06-1.3a2.21 2.21 0 00-2.97.92l-4.73 8.9c-.38.7-1.18.95-1.87.59-.7-.37-.93-1.
1577018-.56-1.88l6.2-11.66c.95-1.79 3.33-2.53 5.09-1.59.86.45 1.49 1.25 1.79 2.24.29.97.19 2.02-.26 2.87l-6.2 11.66c-1.52 2.86-5.49 4.1-8.32 2.6-2.83-1.51-4.02-5.49-2.49-8.35l3.04-5.72c.57-1.08.16-2.41-.9-2.97-1.07-.57-2.4-.16-2.96.91l-3.05 5.72c-1.27 2.4-1.53 5.32-.72 8.03.81 2.72 2.64 5 5.02 6.26 1.51.8 3.15 1.18 4.78 1.18 3.81 0 7.58-2.06 9.47-5.61l6.19-11.65c1.01-1.9 1.22-4.11.59-6.21zm-1.47 5.74l-6.2 11.65c-2.41 4.54-8.39 6.41-12.89 4.02-4.5-2.4-6.3-8.4-3.88-12.94l3.04-5.72c.31-.58 1.03-.81 1.61-.5s.8 1.03.49 1.62l-3.05 5.72c-1.79 3.37-.43 7.92 2.91 9.7 3.35 1.78 7.88.36 9.68-3.01l6.19-11.66c1.21-2.27.33-5.26-1.94-6.47-2.27-1.2-5.24-.26-6.45 2.01l-6.19 11.66c-.63 1.17-.22 2.6.97 3.23s2.6.17 3.22-1l4.73-8.9c.31-.59 1.04-.81 1.62-.5.57.3.79 1.03.48 1.61l-4.73 8.9c-1.24 2.33-4.08 3.27-6.45 2.01s-3.18-4.14-1.94-6.47l6.2-11.65c1.82-3.44 6.24-4.84 9.67-3.01 3.43 1.82 4.73 6.26 2.91 9.7z", 15771 opacity: 0.34 15772 }), /*#__PURE__*/react["createElement"]("path", { 15773 d: "M41.32 32.48l-6.2 11.65c-2.41 4.54-8.39 6.41-12.89 4.02-4.5-2.4-6.3-8.4-3.88-12.94l3.04-5.72c.31-.58 1.03-.81 1.61-.5s.8 1.03.49 1.62l-3.05 5.72c-1.79 3.37-.43 7.92 2.91 9.7 3.35 1.78 7.88.36 9.68-3.01l6.19-11.66c1.21-2.27.33-5.26-1.94-6.47-2.27-1.2-5.24-.26-6.45 2.01l-6.19 11.66c-.63 1.17-.22 2.6.97 3.23s2.6.17 3.22-1l4.73-8.9c.31-.59 1.04-.81 1.62-.5.57.3.79 1.03.48 1.61l-4.73 8.9c-1.24 2.33-4.08 3.27-6.45 2.01s-3.18-4.14-1.94-6.47l6.2-11.65c1.82-3.44 6.24-4.84 9.67-3.01 3.43 1.82 4.73 6.26 2.91 9.7z", 15774 fillRule: "evenodd", 15775 clipRule: "evenodd", 15776 fill: "#fff" 15777 }), /*#__PURE__*/react["createElement"]("path", { 15778 d: "M35.66 33l-4.73 8.9c-1.24 2.32-4.08 3.27-6.45 2.01-2.37-1.26-3.18-4.14-1.94-6.47l6.2-11.65c1.83-3.43 6.24-4.84 9.67-3.01 3.43 1.83 4.74 6.27 2.91 9.7l-6.2 11.65c-2.41 4.54-8.39 6.41-12.89 4.02-4.5-2.39-6.29-8.4-3.88-12.94l3.04-5.72c.31-.59 1.03-.81 1.61-.5.58.31.8 1.03.49 1.62l-3.04 5.72c-1.79 3.37-.43 7.93 2.91 9.7 3.34 1.78 7.88.36 9.67-3.01l6.2-11.65c1.21-2.27.33-5.26-1.94-6.47s-5.24-.26-6.45 2.01l-6.2 11.65c-.62 1.17-.22 2.6.97 3.23 1.19.63 2.6.17 3.22-1l4.73-8.9a1.187 1.187 0 112.1 1.11z", 15779 fillRule: "evenodd", 15780 clipRule: "evenodd", 15781 fill: "#f6f7f9" 15782 }), /*#__PURE__*/react["createElement"]("path", { 15783 className: "st7", 15784 d: "M16 39h5c-.13 1.48-.03 1.65.4 3H16v-3z" 15785 }), /*#__PURE__*/react["createElement"]("path", { 15786 className: "st7", 15787 d: "M33.75 39L40.5 39 40.5 42 32.1 42z" 15788 })); 15789} 15790/* harmony default export */ var Logo_LogoDarkMobileSize = (LogoDarkMobileSize); 15791// CONCATENATED MODULE: ./src/components/Logo/LogoDark.js 15792 15793 15794 15795 15796function LogoDark(props) { 15797 const goHome = Object(react["useCallback"])(() => { 15798 props.history.push({ 15799 pathname: '/', 15800 state: { 15801 stayAtHomePage: true 15802 } 15803 }); 15804 }, [props.history]); 15805 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 15806 className: Logo_default.a.logoIcon, 15807 onClick: goHome 15808 })); 15809} 15810/* harmony default export */ var Logo_LogoDark = (Object(react_router["h" /* withRouter */])(LogoDark)); 15811// EXTERNAL MODULE: ./src/components/Navbar/Navbar.css 15812var Navbar = __webpack_require__("u/zt"); 15813var Navbar_default = /*#__PURE__*/__webpack_require__.n(Navbar); 15814 15815// CONCATENATED MODULE: ./src/components/Navbar/Navbar.js 15816 15817 15818 15819 15820 15821 15822 15823 15824 15825// import loadable from '@loadable/component' 15826// const Logo = loadable(() => import(/* webpackPrefetch: true */ '../../components/Logo/Logo')) 15827 15828 15829function Navbar_Navbar(props) { 15830 let { 15831 currentUser, 15832 ownedBy, 15833 mode = '' 15834 } = props; 15835 const isPreview = mode === 'preview'; 15836 let [pointEventsNone, setPointEventsNone] = Object(react["useState"])(false); 15837 const signInButton = !currentUser && /*#__PURE__*/react_default.a.createElement("div", { 15838 onClick: () => props.history.push('/sign-up'), 15839 className: Navbar_default.a.sign_up 15840 }, /*#__PURE__*/react_default.a.createElement("span", null, "Sign Up")); 15841 // <ModalButton 15842 // isShown={false} 15843 // openText="Sign Up" 15844 // closeText="Sign Up" 15845 // className={styles["sign_up"]} 15846 // ><SignForm /></ModalButton>; 15847 15848 function isOpen(bool) { 15849 setPointEventsNone(bool); 15850 props.isOpen(bool); 15851 } 15852 return /*#__PURE__*/react_default.a.createElement("div", { 15853 className: [Navbar_default.a["nav-bar-container"], pointEventsNone ? Navbar_default.a.pointEventsNone : ''].join(' ') 15854 }, /*#__PURE__*/react_default.a.createElement(Logo_LogoDark, null), currentUser && /*#__PURE__*/react_default.a.createElement(Dropdown["a" /* default */], { 15855 isOpen: bool => { 15856 isOpen(bool); 15857 } 15858 }), !currentUser && /*#__PURE__*/react_default.a.createElement("div", { 15859 className: Navbar_default.a["sign-container"] 15860 }, signInButton)); 15861} 15862let Navbar_mapStateToProps = state => { 15863 var _state$clip, _state$clip$current; 15864 const ownedBy = (_state$clip = state.clip) === null || _state$clip === void 0 ? void 0 : (_state$clip$current = _state$clip.current) === null || _state$clip$current === void 0 ? void 0 : _state$clip$current.ownedBy; 15865 return { 15866 ownedBy, 15867 userId: state.app.userId, 15868 currentUser: state.app.user 15869 }; 15870}; 15871/* harmony default export */ var components_Navbar_Navbar = (Object(react_router["h" /* withRouter */])(Object(es["b" /* connect */])(Navbar_mapStateToProps, null, null, { 15872 forwardRef: true 15873})(Navbar_Navbar))); 15874// EXTERNAL MODULE: ./src/components/FooterLinks/FooterLinks.css 15875var FooterLinks = __webpack_require__("RPdR"); 15876var FooterLinks_default = /*#__PURE__*/__webpack_require__.n(FooterLinks); 15877 15878// CONCATENATED MODULE: ./src/components/FooterLinks/FooterLinks.js 15879 15880 15881 15882function FooterLinks_FooterLinks() { 15883 return /*#__PURE__*/react_default.a.createElement("div", { 15884 className: FooterLinks_default.a['footerLinks'] 15885 }, /*#__PURE__*/react_default.a.createElement("div", null, /*#__PURE__*/react_default.a.createElement(react_router_dom["b" /* Link */], { 15886 to: "/terms-and-conditions" 15887 }, "Terms\xA0&\xA0Conditions"), /*#__PURE__*/react_default.a.createElement(react_router_dom["b" /* Link */], { 15888 to: "/privacy-policy" 15889 }, "Privacy\xA0Policy"), /*#__PURE__*/react_default.a.createElement(react_router_dom["b" /* Link */], { 15890 to: "/faq" 15891 }, "FAQ's"), /*#__PURE__*/react_default.a.createElement("a", { 15892 href: "https://chrome.google.com/webstore/detail/screen-capture-screenshot/jmjbgcjbgmcfgbgikmbdioggjlhjegpp/support" 15893 }
15893, "Support"), /*#__PURE__*/react_default.a.createElement(react_router_dom["b" /* Link */], { 15894 to: "/pricing" 15895 }, "Pricing")), /*#__PURE__*/react_default.a.createElement("span", null, "Copyright\xA0", new Date().getFullYear(), "\xA0Vitzo\xA0LLC")); 15896} 15897/* harmony default export */ var components_FooterLinks_FooterLinks = (FooterLinks_FooterLinks); 15898// CONCATENATED MODULE: ./src/screens/Faq/Faq.js 15899 15900 15901 15902 15903 15904function Faq_Faq(props) { 15905 let [pointEventsNone, setPointEventsNone] = Object(react["useState"])(false); 15906 Object(react["useEffect"])(() => { 15907 document.title = 'FAQ â ScreenClip'; 15908 }, []); 15909 function isOpen(bool) { 15910 setPointEventsNone(bool); 15911 } 15912 return /*#__PURE__*/react_default.a.createElement("div", { 15913 className: pointEventsNone ? Faq_default.a.pointEventsNone : '' 15914 }, /*#__PURE__*/react_default.a.createElement(components_Navbar_Navbar, { 15915 isOpen: bool => { 15916 isOpen(bool); 15917 }, 15918 theme: "light" 15919 }), /*#__PURE__*/react_default.a.createElement("main", { 15920 className: Faq_default.a["faq-container"] 15921 }, /*#__PURE__*/react_default.a.createElement("h1", { 15922 className: Faq_default.a["faq-title"] 15923 }, "FAQ\u2019s"), /*#__PURE__*/react_default.a.createElement(components_Accordion_Accordion, null)), /*#__PURE__*/react_default.a.createElement(components_FooterLinks_FooterLinks, null)); 15924} 15925// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom.iterable.js 15926var web_dom_iterable = __webpack_require__("rGqo"); 15927 15928// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/defineProperty.js 15929var defineProperty = __webpack_require__("lSNA"); 15930var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty); 15931 15932// EXTERNAL MODULE: ./src/screens/FolderShared/FolderShared.css 15933var FolderShared_FolderShared = __webpack_require__("KJlY"); 15934var FolderShared_default = /*#__PURE__*/__webpack_require__.n(FolderShared_FolderShared); 15935 15936// EXTERNAL MODULE: ./src/components/ClipList/ClipList.js + 6 modules 15937var ClipList = __webpack_require__("9MsG"); 15938 15939// EXTERNAL MODULE: ./src/components/FolderList/FolderList.js 15940var FolderList = __webpack_require__("tOAM"); 15941 15942// EXTERNAL MODULE: ./src/components/SearchInput/SearchInput.js 15943var SearchInput = __webpack_require__("o58s"); 15944 15945// EXTERNAL MODULE: ./src/components/ClipActions/ClipActions.js + 1 modules 15946var ClipActions = __webpack_require__("8u73"); 15947 15948// EXTERNAL MODULE: ./src/components/FolderActions/FolderActions.js 15949var FolderActions = __webpack_require__("aYym"); 15950 15951// EXTERNAL MODULE: ./src/actions/Dashboard.actions.js 15952var Dashboard_actions = __webpack_require__("1ol1"); 15953 15954// EXTERNAL MODULE: ./src/components/ErrorView/ErrorView.css 15955var ErrorView = __webpack_require__("v117"); 15956var ErrorView_default = /*#__PURE__*/__webpack_require__.n(ErrorView); 15957 15958// CONCATENATED MODULE: ./src/components/ErrorView/ErrorView.js 15959 15960 15961 15962function ErrorView_ErrorView(props) { 15963 let [pointEventsNone, setPointEventsNone] = Object(react["useState"])(false); 15964 function isOpen(bool) { 15965 setPointEventsNone(bool); 15966 } 15967 const mode = props.mode; 15968 let messages = { 15969 '404': 'The page does not exist or is no longer available.', 15970 '403': 'ð¤ Sorry, there is an error reading this document.', 15971 'access-denied': 'This clip is privateð', 15972 'access-denied-folder': 'This folder is privateð' 15973 }; 15974 let classes = { 15975 '404': 'page-404', 15976 '403': 'page-403', 15977 'access-denied': 'page', 15978 'access-denied-folder': 'page' 15979 }; 15980 return /*#__PURE__*/react_default.a.createElement("div", { 15981 className: [ErrorView_default.a[classes[mode]], pointEventsNone ? ErrorView_default.a.pointEventsNone : ''].join(' ') 15982 }, /*#__PURE__*/react_default.a.createElement(components_Navbar_Navbar, { 15983 isOpen: bool => { 15984 isOpen(bool); 15985 }, 15986 theme: "dark" 15987 }), /*#__PURE__*/react_default.a.createElement("div", { 15988 className: ErrorView_default.a['message'] 15989 }, messages[mode]), props.mode !== '403' ? props.currentUser ? /*#__PURE__*/react_default.a.createElement("div", { 15990 className: ErrorView_default.a['logged-in-button-container'] 15991 }, /*#__PURE__*/react_default.a.createElement("button", { 15992 className: ErrorView_default.a['logged-in-button'], 15993 onClick: () => props.history.push("/dashboard") 15994 }, "Go to my Dashboard \u203A")) : /*#__PURE__*/react_default.a.createElement("div", { 15995 className: ErrorView_default.a['logged-out-button-container'] 15996 }, /*#__PURE__*/react_default.a.createElement("button", { 15997 className: ErrorView_default.a['logged-out-button'], 15998 onClick: () => props.history.push("/") 15999 }, "Take me home \u203A")) : props.currentUser ? /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 16000 className: ErrorView_default.a['logged-in-button-container'] 16001 }, /*#__PURE__*/react_default.a.createElement("button", { 16002 className: ErrorView_default.a['logged-in-button'], 16003 onClick: () => props.history.push("/dashboard") 16004 }, "Go to my Dashboard \u203A")), /*#__PURE__*/react_default.a.createElement("div", { 16005 className: ErrorView_default.a['logged-out-button-container'] 16006 }, /*#__PURE__*/react_default.a.createElement("button", { 16007 className: ErrorView_default.a['logged-out-button'], 16008 onClick: () => props.history.push("/support") 16009 }, "Contact support \u203A"))) : /*#__PURE__*/react_default.a.createElement("div", { 16010 className: ErrorView_default.a['logged-out-button-container'] 16011 }, /*#__PURE__*/react_default.a.createElement("button", { 16012 className: ErrorView_default.a['logged-out-button'], 16013 onClick: () => props.history.push("/") 16014 }, "Take me home \u203A"))); 16015} 16016// CONCATENATED MODULE: ./src/screens/FolderShared/FolderShared.js 16017 16018 16019 16020 16021 16022 16023 16024 16025 16026 16027 16028 16029 16030 16031 16032 16033 16034 16035 16036 16037 16038class FolderShared_FolderShared_FolderShared extends react["Component"] { 16039 constructor(props) { 16040 super(props); 16041 defineProperty_default()(this, "shadowEffect", value => { 16042 this.setState({ 16043 shadowEffect: value 16044 }); 16045 }); 16046 defineProperty_default()(this, "isOpen", bool => { 16047 this.setState({ 16048 pointEventsNone: bool 16049 }); 16050 }); 16051 defineProperty_default()(this, "globalUploadAbility", e => { 16052 if (e.dataTransfer.types.length > 0 && e.dataTransfer.types[0].toLowerCase() === 'files') { 16053 this.setModal('upload'); 16054 } 16055 }); 16056 defineProperty_default()(this, "cleanup", () => { 16057 this.props.setClips([]); 16058 this.props.setFolders([]); 16059 if (!this.state.hasMoreClips) this.props.setClipsHasMore(true); 16060 }); 16061 defineProperty_default()(this, "clipSelectionToggle", clipId => { 16062 let selectedClips = []; 16063 if (this.state.selectAllClips) { 16064 this.state.clips.forEach(clip => selectedClips.push(clip.clipId)); 16065 selectedClips.splice(selectedClips.indexOf(clipId), 1); 16066 } else { 16067 selectedClips = [...this.state.selectedClips]; 16068 if (selectedClips.includes(clipId)) selectedClips.splice(selectedClips.indexOf(clipId), 1);else selectedClips.push(clipId); 16069 } 16070 this.setState({ 16071 selectedClips: selectedClips, 16072 selectAllClips: false 16073 }); 16074 }); 16075 defineProperty_default()(this, "clipSelectionAdd", clipId => { 16076 if (this.props.isAllClipsSelected) return; 16077 let selectedClips = [...this.state.selectedClips]; 16078 if (!selectedClips.includes(clipId)) selectedClips.push(clipId); 16079 this.setState({ 16080 selectedClips: selectedClips 16081 }); 16082 }); 16083 defineProperty_default()(this, "setClipsSelection", v => { 16084 this.setState({ 16085 selectAllClips: !this.state.selectAllClips, 16086 selectedClips: [] 16087 }); 16088 }); 16089 defineProperty_default()(this, "resetClipsSelection", v => { 16090 this.setState({ 16091 selectAllClips: false, 16092 selectedClips: [] 16093 }); 16094 }); 16095 defineProperty_default()(this, "goHome", () => { 16096 console.log('goHome'); 16097 this.props.history.push("/"); 16098 }); 16099 defineProperty_default()(this, "setShareClipModal", clipId => { 16100 this.setState({ 16101 actionClipId: clipId, 16102 currentModal: 'shareClip' 16103 }); 16104 }); 16105 defineProperty_default()(this, "setMoveModal", destFolderId => { 16106 this.setState({ 16107 destFolderId: destFolderId, 16108 currentModal: 'moveClips' 16109 }); 16110 }); 16111 defineProperty_default()(this, "setRenameClipModal", clipId => { 16112 this.setState({ 16113 actionClipId: clipId, 16114 currentModal: 'renameClip' 16115 }); 16116 }); 16117 defineProperty_default()(this, "setModal", modal => { 16118 this.setState({ 16119 currentModal: modal 16120 }); 16121 }); 16122 defineProperty_default()(this, "hideModal", () => { 16123 this.setState({ 16124 currentModal: false 16125 }); 16126 }); 16127 defineProperty_default()(this, "toggleSidebar", () => { 16128 this.setState({ 16129 sidebarOpened: !this.state.sidebarOpened 16130 }); 16131 }); 16132 defineProperty_default()(this, "closeSidebar", () => { 16133 if (this.state.sidebarOpened) this.setState({ 16134 sidebarOpened: false 16135 }); 16136 }); 16137 this.state = { 16138 selectAllClips: false, 16139 selectedClips: [], 16140 hasMoreClips: props.hasMoreClips, 16141 clips: props.clips, 16142 folders: props.folders, 16143 searchQuery: props.searchQuery, 16144 currentFolder: props.currentFolder, 16145 currentModal: false, 16146 sidebarOpened: false, 16147 isOwner: false, 16148 pointEventsNone: false, 16149 shadowEffect: false 16150 }; 16151 } 16152 static getDerivedStateFromProps(nextProps, prevState) { 16153 let ret = {}; 16154 if (nextProps.folders && nextProps.folders.length !== prevState.folders.length) { 16155 ret.folders = nextProps.folders; 16156 } 16157 if (nextProps.clips && nextProps.clips.length !== prevState.clips.length) { 16158 ret.clips = nextProps.clips; 16159 } 16160 if (nextProps.searchQuery !== prevState.searchQuery) { 16161 ret.searchQuery = nextProps.searchQuery; 16162 } 16163 if (nextProps.hasMoreClips !== prevState.hasMoreClips) { 16164 ret.hasMoreClips = nextProps.hasMoreClips; 16165 } 16166 if (nextProps.currentFolder !== prevState.currentFolder) { 16167 ret.currentFolder = nextProps.currentFolder; 16168 ret.selectAllClips = false;
16169 ret.selectedClips = []; 16170 } 16171 return Object.keys(ret).length > 0 ? ret : null; 16172 } 16173 async componentDidMount() { 16174 document.title = 'Dashboard â ScreenClip'; 16175 this.unlistenHistory = this.props.history.listen((location, action) => { 16176 console.log(location); 16177 }); 16178 document.addEventListener('dragover', this.globalUploadAbility); 16179 } 16180 componentWillUnmount() { 16181 document.removeEventListener('dragover', this.globalUploadAbility); 16182 this.unlistenHistory(); 16183 // to refresh clips & folders we need to set them empty when user is going to other page 16184 this.cleanup(); 16185 } 16186 componentDidUpdate(prevProps) { 16187 if (this.props.currentFolder !== this.props.match.params.folderId && this.props.currentUser && this.props.currentUser.userId == this.props.folders[0].ownedBy) { 16188 if (this.props.match.params.folderId) this.props.setCurrentFolder(this.props.match.params.folderId); 16189 } 16190 if (this.props.currentUser) { 16191 let isOwner = false; 16192 for (let i = 0; i < this.state.folders.length; i++) { 16193 if (this.state.folders[i].folderId == this.state.currentFolder && this.state.folders[i].ownedBy == this.props.currentUser.userId) { 16194 isOwner = true; 16195 i = this.state.folders.length; 16196 this.props.history.push("/dashboard/" + this.props.currentFolder); 16197 } 16198 } 16199 } 16200 } 16201 16202 // setFolderPublic = async (data, onError) => { 16203 // this.props.setAppLoading(true) 16204 // const res = await utils.setFolderPublic(data) 16205 // if (res.error) { 16206 // console.log("Public Folder error:", res.error) 16207 // if (onError) onError(); 16208 // this.props.setAppLoading(false) 16209 // return 16210 // } 16211 // const newFolders = this.state.folders.map(folder => { 16212 // if (folder.folderId == data.folderId) { 16213 // folder.privacy = data.privacy; 16214 // } 16215 // return folder 16216 // }) 16217 // this.props.setFolders(newFolders) 16218 // this.props.setAppLoading(false) 16219 // } 16220 16221 getFolderTitleById(folderId) { 16222 const suchFolderIsHere = this.state.folders.filter(folder => folder.folderId === folderId).length > 0; 16223 return folderId === 'trash' ? 'Trash' : folderId && suchFolderIsHere ? this.state.folders.filter(folder => folder.folderId === folderId)[0].title : 'Main folder'; 16224 } 16225 // getPrivacyById(folderId){ 16226 // return this.state.folders.filter(folder => folder.folderId === folderId)[0].privacy; 16227 // } 16228 16229 getClipTitleById(clipId) { 16230 return this.state.clips.length > 0 ? this.state.clips.filter(clip => clip.clipId === clipId)[0].title : ''; 16231 } 16232 getClipUrlById(clipId) { 16233 return this.state.clips.length > 0 ? this.state.clips.filter(clip => clip.clipId === clipId)[0].url : ''; 16234 } 16235 getModalContent(modal) { 16236 switch (modal) { 16237 case false: 16238 return null; 16239 case 'shareFolder': 16240 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].ShareFolderModalContent, { 16241 folderUrl: this.state.folders[0].folderId, 16242 title: this.getFolderTitleById(this.state.currentFolder), 16243 sharedFolder: "public" 16244 // setFolderPublic={this.setFolderPublic} 16245 , 16246 closeModal: this.hideModal, 16247 setNotification: this.props.setNotification, 16248 showDisableLink: false 16249 }); 16250 case 'shareClip': 16251 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].ShareClipModalContent, { 16252 clipUrl: this.getClipUrlById(this.state.actionClipId), 16253 title: this.getClipTitleById(this.state.actionClipId), 16254 closeModal: this.hideModal, 16255 setNotification: this.props.setNotification 16256 }); 16257 default: 16258 alert("there is no such modal " + modal); 16259 return null; 16260 } 16261 } 16262 render() { 16263 const currentUser = this.props.currentUser; 16264 let dashboard = (currentUser || this.props.sharedFolder) && /*#__PURE__*/react_default.a.createElement("div", { 16265 className: [FolderShared_default.a.container, this.state.sidebarOpened ? FolderShared_default.a.sidebarOpened : '', this.state.pointEventsNone ? FolderShared_default.a.pointEventsNone : ''].join(' ') 16266 }, /*#__PURE__*/react_default.a.createElement("div", { 16267 className: FolderShared_default.a.content 16268 }, /*#__PURE__*/react_default.a.createElement(components_Navbar_Navbar, { 16269 theme: "light" 16270 }), /*#__PURE__*/react_default.a.createElement(FolderActions["a" /* default */], { 16271 setModal: this.setModal, 16272 title: this.props.folders[0].title, 16273 isAllClipsSelected: this.state.selectAllClips, 16274 setClipsSelection: this.setClipsSelection, 16275 currentFolder: this.props.folders[0].folderId, 16276 sharedFolder: this.props.sharedFolder, 16277 isOpen: this.isOpen, 16278 clips: this.state.clips, 16279 shadowEffect: this.state.shadowEffect 16280 }), /*#__PURE__*/react_default.a.createElement(ClipList["a" /* default */], { 16281 hasMoreClips: false, 16282 history: this.props.history, 16283 clips: this.state.clips, 16284 userId: this.props.userId, 16285 getClips: this.props.getClips, 16286 selectAllClips: this.state.selectAllClips, 16287 selectedClips: this.state.selectedClips, 16288 clipSelectionToggle: this.clipSelectionToggle, 16289 clipSelectionAdd: this.clipSelectionAdd, 16290 searchQuery: this.state.searchQuery, 16291 currentFolder: this.props.folders[0].folderId, 16292 loading: this.props.clipsLoading,
16293 setLoading: this.props.setClipsLoading, 16294 setModal: this.setModal, 16295 setShareClipModal: this.setShareClipModal, 16296 setRenameClipModal: this.setRenameClipModal 16297 // setClipPrivacyClip={this.setClipPrivacyClip} 16298 // duplicateClip={this.duplicateClip} 16299 // removeClips={this.removeClips} 16300 , 16301 resetClipsSelection: this.resetClipsSelection, 16302 sharedFolder: this.props.sharedFolder, 16303 getSharedClips: this.props.getSharedClips, 16304 isOpen: this.isOpen, 16305 shadowEffect: value => this.shadowEffect(value) 16306 }))); 16307 let notLoggedIn = !currentUser && /*#__PURE__*/react_default.a.createElement(Modal["a" /* ModalButton */], { 16308 shown: true, 16309 buttonDisabled: true, 16310 closingDisabled: true 16311 }, /*#__PURE__*/react_default.a.createElement(SignForm["a" /* default */], null)); 16312 const currentModalContent = this.getModalContent(this.state.currentModal); 16313 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, this.props.sharedFolder && this.props.folders.length > 0 && this.props.folders[0]._error === 'access-denied' ? /*#__PURE__*/react_default.a.createElement(ErrorView_ErrorView, { 16314 mode: "access-denied-folder", 16315 history: this.props.history 16316 }) : this.props.sharedFolder && this.props.folders.length > 0 && this.props.folders[0]._error === '404' ? /*#__PURE__*/react_default.a.createElement(ErrorView_ErrorView, { 16317 mode: "404", 16318 history: this.props.history 16319 }) : currentUser || this.props.sharedFolder ? dashboard : notLoggedIn, /*#__PURE__*/react_default.a.createElement(Modal["c" /* ModalWindow */], { 16320 show: this.state.currentModal, 16321 onClose: this.hideModal 16322 }, currentModalContent)); 16323 } 16324} 16325let FolderShared_mapStateToProps = state => { 16326 return { 16327 userId: state.app.userId, 16328 currentUser: state.app.user, 16329 currentFolder: state.dashboard.currentFolder, 16330 clips: state.dashboard.clips, 16331 folders: state.dashboard.folders, 16332 hasMoreClips: state.dashboard.hasMoreClips, 16333 searchQuery: state.dashboard.searchQuery, 16334 clipsLoading: state.dashboard.clipsLoading 16335 }; 16336}; 16337let FolderShared_mapDispatchToProps = dispatch => { 16338 return { 16339 setAppLoading: v => dispatch({ 16340 type: "SET_APP_LOADING", 16341 value: v 16342 }), 16343 setClipsLoading: v => dispatch({ 16344 type: "SET_CLIPS_LOADING", 16345 value: v 16346 }), 16347 setUserId: userId => dispatch({ 16348 type: "SET_USER_ID", 16349 value: userId 16350 }), 16351 setUser: user => dispatch({ 16352 type: "SET_USER", 16353 value: user 16354 }), 16355 getFolders: () => dispatch(Dashboard_actions["b" /* getFolders */]()), 16356 getSharedFolder: currentFolder => dispatch(Dashboard_actions["d" /* getSharedFolder */](currentFolder)), 16357 setFolders: folders => dispatch({ 16358 type: "SET_FOLDERS", 16359 value: folders 16360 }), 16361 getClips: () => dispatch(Dashboard_actions["a" /* getClips */]()), 16362 getSharedClips: () => dispatch(Dashboard_actions["c" /* getSharedClips */]()), 16363 setClips: clips => dispatch({ 16364 type: "SET_CLIPS", 16365 value: clips 16366 }), 16367 setClipsHasMore: v => dispatch({ 16368 type: "SET_CLIPS_HAS_MORE", 16369 value: v 16370 }), 16371 setCurrentFolder: v => dispatch({ 16372 type: "SET_CURRENT_FOLDER", 16373 value: v 16374 }), 16375 setNotification: (v, error) => dispatch({ 16376 type: "SET_APP_NOTIFICATION", 16377 value: v, 16378 error: !!error 16379 }) 16380 }; 16381}; 16382/* harmony default export */ var screens_FolderShared_FolderShared = (Object(react_router["h" /* withRouter */])(Object(components_Auth["c" /* withAuth */])(Object(es["b" /* connect */])(FolderShared_mapStateToProps, FolderShared_mapDispatchToProps, null, { 16383 forwardRef: true 16384})(FolderShared_FolderShared_FolderShared)))); 16385 16386// export default FolderShared; 16387// EXTERNAL MODULE: ./src/screens/Unsubscribed/Unsubscribed.css 16388var Unsubscribed = __webpack_require__("x4HX"); 16389var Unsubscribed_default = /*#__PURE__*/__webpack_require__.n(Unsubscribed); 16390 16391// CONCATENATED MODULE: ./src/screens/Unsubscribed/Unsubscribed.js 16392 16393 16394 16395 16396 16397 16398function Unsubscribed_Unsubscribed(props) { 16399 Object(react["useEffect"])(() => { 16400 document.title = 'Unsubscribed'; 16401 }, []); 16402 let email = window.location.hash.replace("#", ""); 16403 let boldEmail = /*#__PURE__*/react_default.a.createElement("span", { 16404 className: Unsubscribed_default.a.boldEmail 16405 }, email); 16406 return /*#__PURE__*/react_default.a.createElement("div", null, /*#__PURE__*/react_default.a.createElement(components_Navbar_Navbar, { 16407 isOpen: bool => {}, 16408 theme: "light" 16409 }), /*#__PURE__*/react_default.a.createElement("main", null, /*#__PURE__*/react_default.a.createElement("span", { 16410 className: Unsubscribed_default.a.MainTypo 16411 }, "Unsubscribed"), /*#__PURE__*/react_default.a.createElement("span", { 16412 className: Unsubscribed_default.a.description 16413 }, email == '' ? 'You' : boldEmail, " will no longer receive emails from us."), /*#__PURE__*/react_default.a.createElement("button", { 16414 type: "button", 16415 className: Unsubscribed_default.a['new-ticket-btn'], 16416 onClick: () => props.history.push("/") 16417 }, /*#__PURE__*/react_default.a.createElement("span", null, "Go to Homepage"))), /*#__PURE__*/react_default.a.createElement(components_FooterLinks_FooterLinks, null)); 16418} 16419/* harmony default export */ var screens_Unsubscribed_Unsubscribed = (Object(react_router["h" /* withRouter */])(Object(es["b" /* connect */])(null, null, null, { 16420 forwardRef: true 16421})(Unsubscribed_Unsubscribed))); 16422// EXTERNAL MODULE: ./src/utils/utils.js 16423var utils = __webpack_require__("+n12"); 16424 16425// CONCATENATED MODULE: ./src/hooks/useIsOwnedByPlus.js 16426 16427 16428 16429const userIdsToAccountTypeMemo = {}; 16430async function fetchIsPlus(userId) { 16431 if (userIdsToAccountTypeMemo[userId]) { 16432 return userIdsToAccountTypeMemo[userId]; 16433 } 16434 let data = await axios_default.a.get(`${constants["a" /* default */].apiUrl}/v2/users/${userId}/isPlus`).then(res => { 16435 const { 16436 isPlus 16437 } = res.data; 16438 userIdsToAccountTypeMemo[userId] = isPlus; 16439 return isPlus; 16440 }).catch(err => { 16441 console.log("Error. Get owner plus-status: ", err); 16442 return err; 16443 }); 16444 return data; 16445} 16446; 16447const useIsOwnedByPlus = ownedBy => { 16448 const [isOwnedByPlus, setIsOwnedByPlus] = Object(react["useState"])(true); 16449 Object(react["useEffect"])(() => { 16450 const fetch = async () => { 16451 const { 16452 isPlus 16453 } = await fetchIsPlus(ownedBy); 16454 setIsOwnedByPlus(isPlus); 16455 }; 16456 fetch(); 16457 }, [ownedBy]); 16458 return isOwnedByPlus; 16459}; 16460// EXTERNAL MODULE: ./src/screens/Previewer/Previewer.css 16461var Previewer_Previewer = __webpack_require__("b/j2"); 16462var Previewer_default = /*#__PURE__*/__webpack_require__.n(Previewer_Previewer); 16463 16464// EXTERNAL MODULE: ./src/actions/Previewer.actions.js 16465var Previewer_actions = __webpack_require__("uuAL"); 16466 16467// EXTERNAL MODULE: ./node_modules/redux/es/redux.js 16468var redux = __webpack_require__("ANjH"); 16469 16470// EXTERNAL MODULE: ./src/editor/reducers/index.js + 6 modules 16471var reducers = __webpack_require__("AEz2"); 16472 16473// EXTERNAL MODULE: ./src/editor/mods/state.initial.js 16474var state_initial = __webpack_require__("pWsF"); 16475 16476// EXTERNAL MODULE: ./src/editor/components/ShareDialog/ShareDialog.css 16477var ShareDialog_ShareDialog = __webpack_require__("wXvf"); 16478 16479// CONCATENATED MODULE: ./src/editor/components/ShareDialog/ShareDialog.js 16480 16481 16482 16483 16484class ShareDialog_ShareDialog_ShareDialog extends react["Component"] { 16485 constructor(props) { 16486 super(props); 16487 this.state = { 16488 url: props.url, 16489 shortUrl: props.shortUrl, 16490 title: props.title 16491 }; 16492 this.buttonBBURL = /*#__PURE__*/react_default.a.createRef(); 16493 this.buttonHTMLURL = /*#__PURE__*/react_default.a.createRef(); 16494 // this.buttonShortURL = React.createRef(); 16495 this.buttonURL = /*#__PURE__*/react_default.a.createRef(); 16496 this.inputURL = /*#__PURE__*/react_default.a.createRef(); 16497 this.handleExit = this.handleExit.bind(this); 16498 } 16499 static getDerivedStateFromProps(nextProps, prevState) { 16500 let ret = {}; 16501 if (prevState.url !== nextProps.url) ret.url = nextProps.url; 16502 if (prevState.shortUrl !== nextProps.shortUrl) ret.shortUrl = nextProps.shortUrl; 16503 if (prevState.title !== nextProps.title) ret.title = nextProps.title; 16504 return Object.keys(ret).length > 0 ? ret : null; 16505 } 16506 shouldComponentUpdate(nextProps, nextState) { 16507 let should = false;
16508 if (this.state.url != nextState.url) { 16509 should = true; 16510 } 16511 return should; 16512 } 16513 exportFacebook() { 16514 window.open(["https://www.facebook.com/sharer/sharer.php?u=", this.state.url].join("")); 16515 } 16516 exportTwitter() { 16517 window.open(["https://twitter.com/intent/tweet?&url=", this.state.url, "&text=", this.state.title, "&via=ScreenClip&hashtags=ScreenClip,capture"].join("")); 16518 } 16519 copyInput() { 16520 let text = this.inputURL.current.value; 16521 try { 16522 navigator.clipboard.writeText(text); 16523 } catch (e) { 16524 console.log("ScreenClip:", "copy error", e); 16525 } 16526 this.props.stop(); 16527 } 16528 exportTypeChanged(e) { 16529 let id = e.nativeEvent.target.id; 16530 this.buttonURL.current.classList.remove("active"); 16531 this.buttonBBURL.current.classList.remove("active"); 16532 this.buttonHTMLURL.current.classList.remove("active"); 16533 // this.buttonShortURL.current.classList.remove("active"); 16534 switch (id) { 16535 case 'url': 16536 this.inputURL.current.value = this.state.url; 16537 this.buttonURL.current.classList.add("active"); 16538 break; 16539 // case 'short-url': 16540 // this.inputURL.current.value = this.state.shortUrl; 16541 // this.buttonShortURL.current.classList.add("active"); 16542 // break; 16543 case 'bb-url': 16544 this.inputURL.current.value = ["[url=", this.state.url, "]", this.state.title, "[/url]"].join(""); 16545 this.buttonBBURL.current.classList.add("active"); 16546 break; 16547 case 'html-url': 16548 this.inputURL.current.value = ['<a href="', this.state.url, '">', this.state.title, '</a>'].join(""); 16549 this.buttonHTMLURL.current.classList.add("active"); 16550 break; 16551 } 16552 } 16553 ok() { 16554 this.props.stop(); 16555 } 16556 cancel() {} 16557 handleExit(e) { 16558 if (e.composedPath && e.composedPath() && e.composedPath().length && e.composedPath().filter(el => { 16559 return el.classList && el.classList.contains("ShareDialog"); 16560 }).length > 0) return false; 16561 this.props.stop(); 16562 } 16563 componentDidMount() { 16564 document.addEventListener("click", this.handleExit, false); 16565 } 16566 componentWillUnmount() { 16567 document.removeEventListener("click", this.handleExit); 16568 } 16569 render() {
16570 let className = ["ShareDialog"]; 16571 if (!this.state.url) className.push("hidden"); 16572 return /*#__PURE__*/react_default.a.createElement("div", { 16573 className: className.join(" ") 16574 }, /*#__PURE__*/react_default.a.createElement("div", { 16575 className: "lds-ripple" 16576 }, /*#__PURE__*/react_default.a.createElement("div", null), /*#__PURE__*/react_default.a.createElement("div", null)), /*#__PURE__*/react_default.a.createElement("div", { 16577 className: "inner" 16578 }, /*#__PURE__*/react_default.a.createElement("div", { 16579 className: "buttons" 16580 }, /*#__PURE__*/react_default.a.createElement("div", { 16581 onClick: this.exportFacebook.bind(this) 16582 }, /*#__PURE__*/react_default.a.createElement("svg", { 16583 width: "36", 16584 height: "36", 16585 viewBox: "0 0 36 36" 16586 }, /*#__PURE__*/react_default.a.createElement("defs", null, /*#__PURE__*/react_default.a.createElement("linearGradient", { 16587 id: "a", 16588 x1: "50%", 16589 x2: "50%", 16590 y1: "15.97%", 16591 y2: "100%" 16592 }, /*#__PURE__*/react_default.a.createElement("stop", { 16593 offset: "0%", 16594 "stop-color": "#2C8DF5" 16595 }), /*#__PURE__*/react_default.a.createElement("stop", { 16596 offset: "100%", 16597 "stop-color": "#1873E3" 16598 }))), /*#__PURE__*/react_default.a.createElement("g", { 16599 fill: "none", 16600 "fill-rule": "evenodd", 16601 transform: "translate(2 2)" 16602 }, /*#__PURE__*/react_default.a.createElement("circle", { 16603 cx: "16", 16604 cy: "16", 16605 r: "16", 16606 fill: "url(#a)" 16607 }), /*#__PURE__*/react_default.a.createElement("path", { 16608 fill: "#FFF", 16609 d: "M17.855 33.333V21.17h3.67l.549-4.74h-4.219v-3.026c0-1.373.343-2.307 2.112-2.307l2.255-.002v-4.24c-.39-.059-1.729-.187-3.287-.187-3.252 0-5.48 2.21-5.48 6.266v3.496H9.779v4.74h3.678v12.164h4.4z" 16610 }
16610)))), /*#__PURE__*/react_default.a.createElement("div", { 16611 onClick: this.exportTwitter.bind(this) 16612 }, /*#__PURE__*/react_default.a.createElement("svg", { 16613 width: "36", 16614 height: "36", 16615 viewBox: "0 0 36 36" 16616 }, /*#__PURE__*/react_default.a.createElement("path", { 16617 fill: "#03A9F4", 16618 "fill-rule": "evenodd", 16619 d: "M29.583 9.795a6.056 6.056 0 0 0 2.616-3.352 11.79 11.79 0 0 1-3.779 1.47A5.893 5.893 0 0 0 24.078 6c-3.286 0-5.95 2.713-5.95 6.059 0 .475.053.937.153 1.38-4.944-.252-9.328-2.665-12.263-6.33a6.124 6.124 0 0 0-.805 3.046 6.085 6.085 0 0 0 2.646 5.043 5.848 5.848 0 0 1-2.694-.758v.076c0 2.936 2.05 5.384 4.773 5.94a5.834 5.834 0 0 1-2.688.105c.758 2.407 2.955 4.16 5.559 4.208A11.798 11.798 0 0 1 4 27.28 16.621 16.621 0 0 0 13.12 30c10.944 0 16.928-9.232 16.928-17.239 0-.262-.006-.524-.017-.783A12.239 12.239 0 0 0 33 8.84a11.713 11.713 0 0 1-3.417.954z" 16620 })))), /*#__PURE__*/react_default.a.createElement("div", { 16621 className: "tabs" 16622 }, /*#__PURE__*/react_default.a.createElement("ul", null, /*#__PURE__*/react_default.a.createElement("li", { 16623 id: "url", 16624 ref: this.buttonURL, 16625 onClick: this.exportTypeChanged.bind(this), 16626 className: "active" 16627 }, "URL"), /*#__PURE__*/react_default.a.createElement("li", { 16628 id: "bb-url", 16629 ref: this.buttonBBURL, 16630 onClick: this.exportTypeChanged.bind(this) 16631 }, "BBCode"), /*#__PURE__*/react_default.a.createElement("li", { 16632 id: "html-url", 16633 ref: this.buttonHTMLURL, 16634 onClick: this.exportTypeChanged.bind(this) 16635 }, "HTML"))), /*#__PURE__*/react_default.a.createElement("div", { 16636 className: "inputs" 16637 }, /*#__PURE__*/react_default.a.createElement("input", { 16638 type: "text", 16639 disabled: "disabled", 16640 value: this.state.url, 16641 className: "in-url", 16642 ref: this.inputURL 16643 }), /*#__PURE__*/react_default.a.createElement("button", { 16644 className: "copy-btn", 16645 onClick: this.copyInput.bind(this) 16646 }, /*#__PURE__*/react_default.a.createElement("svg", { 16647 width: "26", 16648 height: "26", 16649 viewBox: "0 0 26 26" 16650 }, /*#__PURE__*/react_default.a.createElement("path", { 16651 fill: "#F2F4F7", 16652 "fill-rule": "evenodd", 16653 d: "M11 12.893c0 1.184.807 2.107 1.75 2.107h5c.943 0 1.75-.923 1.75-2.107V8.607c0-1.184-.807-2.107-1.75-2.107h-5c-.803 0-1.525.675-1.707 1.643a.75.75 0 1 1-1.474-.276C9.877 6.222 11.185 5 12.75 5h5C19.569 5 21 6.636 21 8.607v4.286c0 1.971-1.431 3.607-3.25 3.607h-5c-1.819 0-3.25-1.636-3.25-3.607a.75.75 0 0 1 1.5 0zm4 .214C15 11.923 14.193 11 13.25 11h-5c-.943 0-1.75.923-1.75 2.107v4.286c0 1.184.807 2.107 1.75 2.107h5c.802 0 1.523-.672 1.706-1.639a.75.75 0 0 1 1.474.28C16.12 19.78 14.813 21 13.25 21h-5C6.431 21 5 19.364 5 17.393v-4.286C5 11.136 6.431 9.5 8.25 9.5h5c1.819 0 3.25 1.636 3.25 3.607a.75.75 0 0 1-1.5 0z" 16654 })))))); 16655 } 16656} 16657let ShareDialog_mapStateToProps = state => { 16658 return { 16659 url: state.app.clipUrl, 16660 shortUrl: state.app.shortClipUrl, 16661 title: state.app.clipTitle 16662 }; 16663}; 16664let ShareDialog_mapDispatchToProps = dispatch => { 16665 return { 16666 stop: () => { 16667 dispatch({ 16668 type: 'CLEAR' 16669 }); 16670 dispatch({ 16671 type: 'SCROLL', 16672 value: { 16673 left: window.scrollX, 16674 top: window.scrollY 16675 } 16676 }); 16677 dispatch({ 16678 type: 'SHOW_CLIP' 16679 }); 16680 dispatch({ 16681 type: "READY" 16682 }); 16683 }, 16684 closeDialog: data => dispatch({ 16685 type: 'SHARE_DIALOG_HIDE' 16686 }) 16687 }; 16688}; 16689/* harmony default export */ var components_ShareDialog_ShareDialog = (Object(es["b" /* connect */])(ShareDialog_mapStateToProps, ShareDialog_mapDispatchToProps)(ShareDialog_ShareDialog_ShareDialog)); 16690// EXTERNAL MODULE: ./src/editor/components/Underlay/Underlay.css 16691var Underlay_Underlay = __webpack_require__("V8AA"); 16692 16693// CONCATENATED MODULE: ./src/editor/components/Underlay/Underlay.js 16694 16695 16696 16697 16698class Underlay_Underlay_Underlay extends react["Component"] { 16699 constructor(props) { 16700 super(props); 16701 this.state = { 16702 rightHover: false, 16703 leftHover: false, 16704 topHover: false, 16705 bottomHover: false, 16706 autosnapMode: this.props.autosnapMode, 16707 pointer: true, 16708 x: 0, 16709 y: 0, 16710 w: 0, 16711 h: 0, 16712 clipped: this.props.clip.clipped, 16713 clipping: this.props.clip.clipping 16714 }; 16715 } 16716 static getDerivedStateFromProps(nextProps, prevState) { 16717 let ret = {}; 16718 if (prevState.pointer !== nextProps.pointer) { 16719 ret.pointer = nextProps.pointer; 16720 } 16721 if (prevState.rightHover !== nextProps.rightHover) ret.rightHover = nextProps.rightHover; 16722 if (prevState.leftHover !== nextProps.leftHover) ret.leftHover = nextProps.leftHover; 16723 if (prevState.topHover !== nextProps.topHover) ret.topHover = nextProps.topHover; 16724 if (prevState.bottomHover !== nextProps.bottomHover) ret.bottomHover = nextProps.bottomHover;
16725 if (prevState.x !== nextProps.clip.x) ret.x = nextProps.clip.x; 16726 if (prevState.y !== nextProps.clip.y) ret.y = nextProps.clip.y; 16727 if (prevState.w !== nextProps.clip.w) ret.w = nextProps.clip.w; 16728 if (prevState.h !== nextProps.clip.h) ret.h = nextProps.clip.h; 16729 if (prevState.autosnapMode !== nextProps.autosnapMode) ret.autosnapMode = nextProps.autosnapMode; 16730 if (prevState.clipped !== nextProps.clip.clipped) ret.clipped = nextProps.clip.clipped; 16731 if (prevState.clipping !== nextProps.clip.clipping) ret.clipping = nextProps.clip.clipping; 16732 return Object.keys(ret).length > 0 ? ret : false; 16733 } 16734 componentDidMount() {} 16735 componentWillUnmount() {} 16736 render() { 16737 let underlayClass = ['Underlay']; 16738 if (this.state.leftHover) underlayClass.push("leftHover"); 16739 if (this.state.rightHover) underlayClass.push("rightHover"); 16740 if (this.state.topHover) underlayClass.push("topHover"); 16741 if (this.state.bottomHover) underlayClass.push("bottomHover"); 16742 if (!this.state.pointer) underlayClass.push("pointerless"); 16743 if (this.state.autosnapMode) underlayClass.push("autosnapMode"); 16744 if (this.state.clipped) underlayClass.push("clipped"); 16745 if (this.state.clipping) underlayClass.push("clipping"); 16746 let styles = { 16747 left: this.state.x + "px", 16748 top: this.state.y + "px", 16749 width: this.state.w + "px", 16750 height: this.state.h + "px" 16751 }; 16752 return /*#__PURE__*/react_default.a.createElement("div", { 16753 className: underlayClass.join(" "), 16754 style: styles 16755 }); 16756 } 16757} 16758let Underlay_mapStateToProps = state => { 16759 return { 16760 clip: { 16761 ...state.clip, 16762 clipped: state.app.clipped, 16763 clipping: state.app.clipping 16764 }, 16765 leftHover: state.app.toolbarHoverLeft, 16766 rightHover: state.app.toolbarHoverRight, 16767 topHover: state.app.toolbarHoverTop, 16768 bottomHover: state.app.toolbarHoverBottom, 16769 autosnapMode: state.app.autosnapMode, 16770 pointer: !state.clip.moving && !state.app.imageMode || state.clip.showUnderlay //|| state.app.autosnapMode 16771 }; 16772}; 16773/* harmony default export */ var components_Underlay_Underlay = (Object(es["b" /* connect */])(Underlay_mapStateToProps)(Underlay_Underlay_Underlay)); 16774// EXTERNAL MODULE: ./src/editor/mods/util.js 16775var util = __webpack_require__("p2J/"); 16776 16777// EXTERNAL MODULE: ./src/editor/components/Clip/Clip.css 16778var Clip_Clip = __webpack_require__("Ovf+"); 16779 16780// CONCATENATED MODULE: ./src/editor/components/Clip/Clip.js 16781 16782 16783 16784 16785 16786class Clip_Clip_Clip extends react["Component"] { 16787 constructor(props) { 16788 super(props); 16789 this.util = new util["c" /* default */](); 16790 this.state = { 16791 autosnapMode: this.props.autosnapMode, 16792 imageMode: this.props.imageMode, 16793 captureMode: this.props.captureMode, 16794 mouse: { 16795 x: this.props.mouse.x, 16796 y: this.props.mouse.y 16797 }, 16798 x: this.props.clip.x, 16799 y: this.props.clip.y, 16800 w: this.props.clip.w, 16801 h: this.props.clip.h, 16802 snappedElementCoordsX: this.props.snappedElementCoords.x, 16803 snappedElementCoordsY: this.props.snappedElementCoords.y, 16804 snappedElementCoordsW: this.props.snappedElementCoords.w, 16805 snappedElementCoordsH: this.props.snappedElementCoords.h, 16806 scaling: this.props.clip.scaling, 16807 moving: this.props.clip.moving, 16808 clipped: this.props.clip.clipped, 16809 clipping: this.props.clip.clipping, 16810 shareDialogOpened: this.props.shareDialogOpened 16811 }; 16812 this.start = { 16813 x: 0, 16814 y: 0 16815 }; 16816 this.mouseCoordsChanged = false; 16817 this.currentMovingPoint = { 16818 x: 0, 16819 y: 0 16820 }; 16821 this.shiftKey = false; 16822 this.altKey = false; 16823 16824 // clipping 16825 this.doClipping = this.doClipping.bind(this); 16826 this.startClipping = this.startClipping.bind(this); 16827 this.stopClipping = this.stopClipping.bind(this); 16828 this.handleMouseMove = this.handleMouseMove.bind(this); 16829 16830 // moving 16831 this.doMoving = this.doMoving.bind(this); 16832 this.startMoving = this.startMoving.bind(this); 16833 this.stopMoving = this.stopMoving.bind(this); 16834 this.keyMove = this.keyMove.bind(this); 16835 this.altKeyHandle = this.altKeyHandle.bind(this); 16836 this.shiftKeyHandle = this.shiftKeyHandle.bind(this); 16837 } 16838 static getDerivedStateFromProps(nextProps, prevState) { 16839 let ret = {}; 16840 if (nextProps.imageMode !== prevState.imageMode) ret.imageMode = nextProps.imageMode; 16841 if (nextProps.captureMode !== prevState.captureMode) ret.captureMode = nextProps.captureMode; 16842 if (nextProps.autosnapMode !== prevState.autosnapMode) ret.autosnapMode = nextProps.autosnapMode; 16843 if (nextProps.showUnderlay !== prevState.showUnderlay) ret.showUnderlay = nextProps.showUnderlay; 16844 if (nextProps.mouse && nextProps.mouse.x !== prevState.mouse.x || nextProps.mouse.y !== prevState.mouse.y) ret.mouse = nextProps.mouse; 16845 if (nextProps.shareDialogOpened !== prevState.shareDialogOpened) ret.shareDialogOpened = nextProps.shareDialogOpened; 16846 if (nextProps.clip && nextProps.snappedElementCoords.x !== prevState.snappedElementCoordsX) ret.snappedElementCoordsX = nextProps.snappedElementCoords.x; 16847 if (nextProps.clip && nextProps.snappedElementCoords.y !== prevState.snappedElementCoordsY) ret.snappedElementCoordsY = nextProps.snappedElementCoords.y; 16848 if (nextProps.clip && nextProps.snappedElementCoords.w !== prevState.snappedElementCoordsW) ret.snappedElementCoordsW = nextProps.snappedElementCoords.w; 16849 console.log("----h---", nextProps.snappedElementCoords.h, prevState.snappedElementCoordsH); 16850 if (nextProps.clip && nextProps.snappedElementCoords.h !== prevState.snappedElementCoordsH) { 16851 ret.snappedElementCoordsH = nextProps.snappedElementCoords.h; 16852 } 16853 if (nextProps.clip && nextProps.clip.x !== prevState.x) ret.x
16853= nextProps.clip.x; 16854 if (nextProps.clip && nextProps.clip.y !== prevState.y) ret.y = nextProps.clip.y; 16855 if (nextProps.clip && nextProps.clip.w !== prevState.w) ret.w = nextProps.clip.w; 16856 if (nextProps.clip && nextProps.clip.h !== prevState.h) ret.h = nextProps.clip.h; 16857 if (nextProps.clip.scaling !== prevState.scaling) ret.scaling = nextProps.clip.scaling; 16858 if (nextProps.clip.clipping !== prevState.clipping) ret.clipping = nextProps.clip.clipping; 16859 if (nextProps.clip.clipped !== prevState.clipped) ret.clipped = nextProps.clip.clipped; 16860 if (nextProps.clip.moving !== prevState.moving) ret.moving = nextProps.clip.moving; 16861 return Object.keys(ret).length > 0 ? ret : null; 16862 } 16863 shouldComponentUpdate(nextProps, nextState) { 16864 let should = !this.equals(nextState, this.state); 16865 if ((this.state.mouse.x !== nextState.mouse.x || this.state.mouse.y !== nextState.mouse.y) && (this.state.clipping || this.state.moving)) this.mouseCoordsChanged = true;else this.mouseCoordsChanged = false; 16866 return should; 16867 } 16868 equals(nextState, oldState) { 16869 const ret = nextState.scaling === oldState.scaling && nextState.clipping === oldState.clipping && nextState.clipped === oldState.clipped && nextState.shareDialogOpened === oldState.shareDialogOpened && nextState.moving === oldState.moving && nextState.x === oldState.x && nextState.y === oldState.y && nextState.w === oldState.w && nextState.h === oldState.h && nextState.snappedElementCoordsX === oldState.snappedElementCoordsX && nextState.snappedElementCoordsY === oldState.snappedElementCoordsY && nextState.snappedElementCoordsW === oldState.snappedElementCoordsW && nextState.snappedElementCoordsH === oldState.snappedElementCoordsH && nextState.imageMode === oldState.imageMode && nextState.autosnapMode === oldState.autosnapMode && nextState.captureMode === oldState.captureMode && nextState.showUnderlay === oldState.showUnderlay 16870 // && nextState.mouse.x === oldState.mouse.x 16871 // && nextState.mouse.y === oldState.mouse.y 16872 ; 16873 return ret; 16874 } 16875 16876 // clipping 16877 startClipping(e) { 16878 if (this.state.clipped) return; 16879 if (this.state.shareDialogOpened) { 16880 return; 16881 } 16882 if (!this.state.captureMode) return; 16883 // do shot when start clipping 16884 // this.props.Canvas.current.fireBrowser_CONTENT__BG__CAPTURE_SHOT(); 16885 // if (!this.state.imageMode && this.state.autosnapMode) { 16886 if (this.containsPoint({ 16887 x: e.pageX, 16888 y: e.pageY 16889 }) // moving? 16890 || this.state.scaling // scaling? 16891 // || this.state.imageMode // imageMode? 16892 || this.state.moving // imageMode? 16893 ) { 16894 return; 16895 } 16896 this.props.Canvas.current.clear(); 16897 this.props.unsetClipped(); 16898 this.props.setClipping(); 16899 if (e.detail && e.detail.x) this.start = { 16900 x: e.detail.x, 16901 y: e.detail.y 16902 };else this.start = { 16903 ...this.state.mouse 16904 }; 16905 this.props.setClipData({ 16906 ...this.start, 16907 w: 0, 16908 h: 0 16909 }); 16910 this.props.showClipControl(); 16911 this.props.hideClipControlCorners(); 16912 this.props.showCursorInfo(this.start); 16913 } 16914 doClipping() { 16915 if (this.state.shareDialogOpened) return; 16916 if (!this.state.clipping) return; 16917 if (this.state.clipped) return; 16918 let x = this.state.mouse.x; 16919 let y = this.state.mouse.y; 16920 let clip = { 16921 x: Math.min(this.start.x, x), 16922 y: Math.min(this.start.y, y), 16923 w: Math.abs(this.start.x - x), 16924 h: Math.abs(this.start.y - y) 16925 }; 16926 16927 // equalizer 16928 if (this.shiftKey) { 16929 let coords = {}; 16930 let dir = { 16931 x: 1, 16932 y: 1 16933 }; 16934 clip.h = Math.round(clip.w / this.startProportions); 16935 if (x <= this.start.x) { 16936 clip.w = this.start.x - x; 16937 clip.h = Math.round(clip.w / this.startProportions); 16938 dir.x = -1; 16939 } 16940 if (y <= this.start.y) { 16941 clip.y = this.start.y - clip.h; 16942 dir.y = -1; 16943 } 16944 coords.y = this.start.y + dir.y * clip.h; 16945 coords.x = this.start.x + dir.x * clip.w; 16946 this.props.setControlledCursorInfo(coords); 16947 } else { 16948 this.props.unsetControlledCursorInfo(); 16949 } 16950 this.props.setClipData(clip); 16951 } 16952 stopClipping(e) { 16953 if (this.state.shareDialogOpened) return; 16954 if (!this.state.clipping || this.state.scaling) return; 16955 this.props.unsetControlledCursorInfo();
16956 let clip = this.props.clip; 16957 clip = this.props.doBorders(clip); 16958 this.props.setClipData(clip); 16959 this.props.unsetClipping(); 16960 const captureSnapMode = this.state.autosnapMode && this.state.snappedElementCoordsH > 0; 16961 if (this.props.isClipDone()) { 16962 this.props.setAppClipped(true); 16963 this.props.setClipped(); 16964 this.props.setImageMode(); 16965 this.props.hideCursorInfo(); 16966 this.props.showClipControlCorners(); 16967 } else if (captureSnapMode) { 16968 clip = this.props.doBorders({ 16969 ...this.props.snappedElementCoords 16970 }); 16971 this.props.setClipData(clip); 16972 this.props.setAppClipped(true); 16973 this.props.setClipped(); 16974 this.props.setImageMode(); 16975 this.props.hideCursorInfo(); 16976 this.props.showClipControlCorners(); 16977 } else { 16978 this.props.setAppClipped(false); 16979 this.props.hideClipControlCorners(); 16980 this.props.hideClipControl(); 16981 this.props.unsetClipped(); 16982 this.props.showCursorInfo({ 16983 x: e.pageX, 16984 y: e.pageY 16985 }); 16986 } 16987 } 16988 containsPoint(point) { 16989 return this.state.clipped && this.state.x <= point.x && this.state.x + this.state.w >= point.x && this.state.y <= point.y && this.state.y + this.state.h >= point.y; 16990 } 16991 16992 // moving 16993 startMoving(e) { 16994 if (this.state.clipping) return; 16995 if (this.state.scaling) return; 16996 if (!this.state.showUnderlay) return; 16997 var contains = this.containsPoint({ 16998 x: e.clientX, 16999 y: e.clientY 17000 }); 17001 if (contains) { 17002 this.currentMovingPoint.x = e.clientX; 17003 this.currentMovingPoint.y = e.clientY; 17004 this.props.setMoving(); 17005 } 17006 } 17007 doMoving() { 17008 if (!this.state.moving) return; 17009 let x = this.state.mouse.x; 17010 let y = this.state.mouse.y; 17011 let dX = x - this.currentMovingPoint.x; 17012 let dY = y - this.currentMovingPoint.y; 17013 let clip = { 17014 x: this.state.x + dX, 17015 y: this.state.y + dY, 17016 w: this.state.w, 17017 h: this.state.h 17018 }; 17019 clip = this.props.doBorders(clip); 17020 this.props.setClipData(clip); 17021 this.currentMovingPoint.x = x; 17022 this.currentMovingPoint.y = y; 17023 } 17024 stopMoving(e) { 17025 if (this.state.moving) { 17026 this.props.unsetMoving(); 17027 } 17028 } 17029 componentDidMount() { 17030 this.util.log("%cCOMPONENT: Clip mounted", "background-color:green;color:white;padding:0 100px"); 17031 17032 // clipping 17033 document.addEventListener("keydown", this.altKeyHandle); 17034 document.addEventListener("keyup", this.altKeyHandle); 17035 document.addEventListener("keydown", this.keyMove); 17036 document.addEventListener("keydown", this.shiftKeyHandle); 17037 document.addEventListener("keyup", this.shiftKeyHandle); 17038 // document.addEventListener("mousemove", this.doClipping); 17039 // document.addEventListener("screenclip-embed-startClipping", this.startClipping); 17040 document.addEventListener("mousedown", this.startClipping); 17041 document.addEventListener("mouseup", this.stopClipping); 17042 17043 // moving 17044 // document.addEventListener("mousemove", this.doMoving); 17045 document.addEventListener("mousedown", this.startMoving); 17046 document.addEventListener("mouseup", this.stopMoving); 17047 this.handleMouseMove(); 17048 17049 // document.addEventListener("mouseenter", this.stopClipping.bind(this)); 17050 } 17051 handleMouseMove() { 17052 if (this.willUnmount) return; 17053 // if mouse coords changed 17054 if (this.mouseCoordsChanged) { 17055 if (this.state.clipping && !this.state.clipped) this.doClipping();else if (this.state.moving && this.state.clipped) this.doMoving(); 17056 } 17057 requestAnimationFrame(this.handleMouseMove); 17058 } 17059 componentWillUnmount() { 17060 this.util.log("%cCOMPONENT: Clip unmount", "background-color:red;color:white;padding:0 100px"); 17061 this.willUnmount = true; 17062 // clipping remove 17063 document.removeEventListener("keydown", this.altKeyHandle); 17064 document.removeEventListener("keyup", this.altKeyHandle); 17065 document.removeEventListener("keydown", this.keyMove); 17066 document.removeEventListener("keydown", this.shiftKeyHandle); 17067 document.removeEventListener("keyup", this.shiftKeyHandle); 17068 // document.removeEventListener("mousemove", this.doClipping); 17069 // document.removeEventListener("screenclip-embed-startClipping", this.startClipping); 17070 document.removeEventListener("mousedown", this.startClipping); 17071 document.removeEventListener("mouseup", this.stopClipping); 17072 17073 // moving remove 17074 // document.removeEventListener("mousemove", this.doMoving); 17075 document.removeEventListener("mousedown", this.startMoving); 17076 document.removeEventListener("mouseup", this.stopMoving); 17077 } 17078 keyMove(e) { 17079 // debugger; 17080 if (!this.state.imageMode) return; 17081 if (!this.state.clipped) return; 17082 let state = {}; 17083 let step = 1; 17084 if (this.shiftKey) { 17085 step = 10; 17086 } 17087 if (e.keyCode === 37) { 17088 // left 17089 state.x = this.state.x - step; 17090 } else if (40 === e.keyCode) { 17091 // down 17092 state.y = this.state.y + step; 17093 } else if (38 === e.keyCode) { 17094 // up 17095 state.y = this.state.y - step; 17096 } else if (39 === e.keyCode) { 17097 // right 17098 state.x = this.state.x + step; 17099 } 17100 this.props.setMoving(); 17101 state = this.props.doBorders(state); 17102 this.props.setClipData(state); 17103 this.props.unsetMoving(); 17104 } 17105 altKeyHandle(e) { 17106 this.altKey = e.altKey; 17107 if (!this.state.clipped) return; 17108 if (this.shiftKey && this.altKey) { 17109 this.props.setShowUnderlay(); 17110 } else { 17111 this.props.setHideUnderlay(); 17112 } 17113 } 17114 shiftKeyHandle(e) { 17115 this.startProportions = this.props.clip.w / this.props.clip.h; 17116 this.shiftKey = e.shiftKey; 17117 if (!this.state.clipped) return; 17118 if (this.shiftKey && this.altKey) { 17119 this.props.setShowUnderlay(); 17120 } else { 17121 this.props.setHideUnderlay(); 17122 } 17123 } 17124 render() { 17125 var className = ["Clip"]; 17126 if (this.state.clipping) className.push("Clipping"); 17127 if (this.state.clipped) className.push("Clipped"); 17128 // if (this.state.autosnapMode && !this.state.imageMode) className.push("autosnapMode"); 17129 if (this.state.imageMode) className.push("imageMode"); 17130 if (this.state.shareDialogOpened) className.push("shareDialogOpened");
17131 let clipPath = ["polygon(0 0"]; 17132 if (this.state.clipped || this.state.clipping) { 17133 clipPath.push(["0 100%, 100% 100%, 100% 0, 0 0", this.state.x + "px " + this.state.y + "px", this.state.x + this.state.w + "px " + this.state.y + "px", this.state.x + this.state.w + "px " + (this.state.y + this.state.h) + "px", this.state.x + "px " + (this.state.y + this.state.h) + "px", this.state.x + "px " + this.state.y + "px", "0 0"].join(", ")); 17134 } 17135 clipPath.push("0 0)"); 17136 const captureSnapMode = this.state.autosnapMode && this.state.snappedElementCoordsH > 0 && !this.state.clipping && !this.state.clipped; 17137 if (captureSnapMode) { 17138 className.push('captureSnapMode'); 17139 const x1 = this.state.snappedElementCoordsX; 17140 const y1 = this.state.snappedElementCoordsY; 17141 const x2 = x1 + this.state.snappedElementCoordsW; 17142 const y2 = y1 + this.state.snappedElementCoordsH; 17143 clipPath = [` 17144 polygon( 17145 100% 0, 0 0, 0 100%, 100% 100%, 17146 100% 0, 17147 ${x2}px ${y1}px, ${x2}px ${y2}px, ${x1}px ${y2}px, ${x1}px ${y1}px, 17148 ${x2}px ${y1}px 17149 ) 17150 `]; 17151 } 17152 17153 // close path 17154 let styles = { 17155 clipPath: clipPath.join(", ") 17156 }; 17157 if (this.state.shareDialogOpened) { 17158 styles.clipPath = ""; 17159 } 17160 return /*#__PURE__*/react_default.a.createElement("div", { 17161 className: className.join(" "), 17162 style: styles, 17163 onMouseDown: this.startClipping.bind(this), 17164 onMouseUp: this.stopClipping.bind(this) 17165 }); 17166 } 17167} 17168let Clip_mapStateToProps = state => { 17169 return { 17170 clip: { 17171 ...state.clip, 17172 clipped: state.app.clipped, 17173 clipping: state.app.clipping, 17174 moving: state.app.moving, 17175 scaling: state.app.scaling, 17176 cornerSize: 8 17177 }, 17178 snappedElementCoords: { 17179 ...state.clip.snappedElementCoords 17180 }, 17181 showUnderlay: state.clip.showUnderlay, 17182 mouse: { 17183 x: state.app.mouseX, 17184 y: state.app.mouseY 17185 }, 17186 autosnapMode: state.app.autosnapMode, 17187 imageMode: state.app.imageMode, 17188 captureMode: state.app.captureMode, 17189 shareDialogOpened: state.app.shareDialogOpened 17190 }; 17191}; 17192let Clip_mapDispatchToProps = dispatch => { 17193 return { 17194 changeTool: tool => dispatch({ 17195 type: 'CHANGE_TOOL', 17196 value: tool 17197 }), 17198 // setCurrentObjectData: (data) => dispatch({ 17199 // type: "CURRENT_OBJECT_DATA", 17200 // value: data 17201 // }), 17202 setSnappedElementCoords: data => dispatch({ 17203 type: 'SNAPPED_ELEMENT_COORDS', 17204 value: data 17205 }), 17206 setClipData: data => dispatch({ 17207 type: 'CLIPCOORDS', 17208 value: data 17209 }), 17210 setClipped: () => dispatch({ 17211 type: 'CLIPPED' 17212 }), 17213 setImageMode: () => dispatch({ 17214 type: 'IMAGEMODE' 17215 }), 17216 unsetClipped: () => dispatch({ 17217 type: 'NOTCLIPPED' 17218 }), 17219 setClipping: () => dispatch({ 17220 type: 'CLIPPING' 17221 }), 17222 unsetClipping: () => dispatch({ 17223 type: 'NOTCLIPPING' 17224 }), 17225 setShowUnderlay: () => dispatch({ 17226 type: 'SHOWUNDERLAY' 17227 }), 17228 setHideUnderlay: () => dispatch({ 17229 type: 'NOTSHOWUNDERLAY' 17230 }), 17231 setMoving: () => dispatch({ 17232 type: 'MOVING' 17233 }), 17234 unsetMoving: () => dispatch({ 17235 type: 'NOTMOVING' 17236 }), 17237 showClipControl: () => dispatch({ 17238 type: 'SHOW_CLIP_CONTROL' 17239 }), 17240 hideClipControl: () => dispatch({ 17241 type: 'HIDE_CLIP_CONTROL' 17242 }), 17243 showClipControlCorners: () => dispatch({ 17244 type: 'SHOW_CLIP_CONTROL_CORNERS' 17245 }), 17246 hideClipControlCorners: () => dispatch({ 17247 type: 'HIDE_CLIP_CONTROL_CORNERS' 17248 }), 17249 unsetControlledCursorInfo: () => dispatch({ 17250 type: 'FREE_CURSORINFO', 17251 value: { 17252 controlled: false 17253 } 17254 }), 17255 setControlledCursorInfo: data => dispatch({ 17256 type: 'CONTROLLED_CURSORINFO', 17257 value: { 17258 controlled: true, 17259 coords: data 17260 } 17261 }), 17262 showCursorInfo: () => dispatch({ 17263 type: 'SHOW_CURSORINFO' 17264 }), 17265 hideCursorInfo: () => dispatch({ 17266 type: 'HIDE_CURSORINFO' 17267 }) 17268 }; 17269}; 17270/* harmony default export */ var components_Clip_Clip = (Object(es["b" /* connect */])(Clip_mapStateToProps, Clip_mapDispatchToProps)(Clip_Clip_Clip)); 17271// EXTERNAL MODULE: ./src/editor/components/Dialog/Dialog.css 17272var Dialog_Dialog = __webpack_require__("Ypp/"); 17273 17274// CONCATENATED MODULE: ./src/editor/components/Dialog/Dialog.js 17275 17276 17277 17278let browser = {}; 17279if (false) {} 17280 17281 17282class Dialog_Dialog_Dialog extends react["Component"] { 17283 constructor(props) { 17284 super(props); 17285 this.bro = browser.runtime && browser.runtime.id; 17286 this.state = { 17287 shown: props.shown, 17288 title: props.title, 17289 content: props.content, 17290 stop: props.stop, 17291 checked: !!document.cookie.includes("showNotSavedChangedDialog=1") 17292 }; 17293 this.util = new util["c" /* default */](); 17294 } 17295 static getDerivedStateFromProps(nextProps, prevState) { 17296 let ret = {}; 17297 if (prevState.shown !== nextProps.shown) ret.shown = nextProps.shown; 17298 if (prevState.title !== nextProps.title) ret.title = nextProps.title; 17299 if (prevState.content !== nextProps.content) ret.content = nextProps.content; 17300 return Object.keys(ret).length > 0 ? ret : null; 17301 } 17302 shouldComponentUpdate(nextProps, nextState) { 17303 let should = false;
17304 if (this.state.shown != nextState.shown || this.state.checked != nextState.checked) { 17305 should = true; 17306 } 17307 return should; 17308 } 17309 ok() { 17310 if (this.state.checked && this.bro) { 17311 let m = { 17312 action: "CONTENT__BG__SHOW_SAVE_WARNING_OFF" 17313 }; 17314 this.util.extSendMessage(m); 17315 } 17316 if (this.props.exitWithoutSavingCallback) this.props.exitWithoutSavingCallback(); 17317 this.props.stop(); 17318 } 17319 cancel() { 17320 this.props.closeDialog(); 17321 this.props.Canvas.current.saveCurrentClip(); 17322 setTimeout(() => { 17323 this.props.stop(); 17324 }, 1000); 17325 } 17326 setChecked() { 17327 let checked = this.state.checked; 17328 if (checked) document.cookie = "showNotSavedChangedDialog=0; path=/";else document.cookie = "showNotSavedChangedDialog=1; path=/"; 17329 this.setState({ 17330 checked: !checked 17331 }); 17332 } 17333 render() { 17334 let className = ["Dialog"]; 17335 let checked = ["checkbox"]; 17336 if (!this.state.shown) className.push("hidden"); 17337 if (this.state.checked) checked.push("checked"); 17338 return /*#__PURE__*/react_default.a.createElement("div", { 17339 className: className.join(" ") 17340 }, /*#__PURE__*/react_default.a.createElement("div", { 17341 className: "header" 17342 }, "Changes not saved"), /*#__PURE__*/react_default.a.createElement("div", { 17343 className: "content" 17344 }, "Would you like to save your changes?"), /*#__PURE__*/react_default.a.createElement("div", { 17345 className: "buttons" 17346 }, /*#__PURE__*/react_default.a.createElement("div", { 17347 className: checked.join(" "), 17348 onClick: this.setChecked.bind(this) 17349 }, "Don't ask again"), /*#__PURE__*/react_default.a.createElement("div", { 17350 className: "button-cancel", 17351 onClick: this.ok.bind(this) 17352 }, "Discard"), /*#__PURE__*/react_default.a.createElement("div", { 17353 className: "button-ok primary", 17354 onClick: this.cancel.bind(this) 17355 }, "Save"))); 17356 } 17357} 17358let Dialog_mapStateToProps = state => { 17359 return { 17360 shown: state.dialog.shown, 17361 title: state.dialog.title, 17362 content: state.dialog.content 17363 }; 17364}; 17365let Dialog_mapDispatchToProps = dispatch => { 17366 return { 17367 closeDialog: data => dispatch({ 17368 type: 'DIALOG_HIDE' 17369 }) 17370 }; 17371}; 17372/* harmony default export */ var components_Dialog_Dialog = (Object(es["b" /* connect */])(Dialog_mapStateToProps, Dialog_mapDispatchToProps)(Dialog_Dialog_Dialog)); 17373// EXTERNAL MODULE: ./src/editor/components/PleaseWait/PleaseWait.css 17374var PleaseWait_PleaseWait = __webpack_require__("UCaZ"); 17375 17376// CONCATENATED MODULE: ./src/editor/components/PleaseWait/PleaseWait.js 17377 17378 17379 17380class PleaseWait_PleaseWait_PleaseWait extends react["Component"] { 17381 constructor(props) { 17382 super(props); 17383 this.state = {}; 17384 } 17385 componentDidMount() {} 17386 componentWillUnmount() {} 17387 render() { 17388 var className = ["PleaseWait"]; 17389 if (this.props.hidden) { 17390 className.push("hidden"); 17391 } 17392 return /*#__PURE__*/react_default.a.createElement("div", { 17393 className: className.join(" ") 17394 }, /*#__PURE__*/react_default.a.createElement("div", null), /*#__PURE__*/react_default.a.createElement("div", null, /*#__PURE__*/react_default.a.createElement("div", { 17395 className: "lds-ripple" 17396 }, /*#__PURE__*/react_default.a.createElement("div", null), /*#__PURE__*/react_default.a.createElement("div", null)))); 17397 } 17398} 17399let PleaseWait_mapStateToProps = state => { 17400 return { 17401 hidden: !state.app.showPleaseWait 17402 }; 17403}; 17404/* harmony default export */ var components_PleaseWait_PleaseWait = (Object(es["b" /* connect */])(PleaseWait_mapStateToProps)(PleaseWait_PleaseWait_PleaseWait)); 17405// EXTERNAL MODULE: ./node_modules/fabric/dist/fabric.js 17406var dist_fabric = __webpack_require__("epSk"); 17407 17408// EXTERNAL MODULE: ./src/editor/mods/config.js 17409var config = __webpack_require__("5uWX"); 17410 17411// CONCATENATED MODULE: ./src/editor/mods/fabric.panning.js 17412 17413const panStopClipPercentage = 50; 17414 17415/* global fabric */ 17416const STATE_IDLE = 'idle'; 17417const STATE_PANNING = 'panning'; 17418let initialPan = false; 17419// Remember the previous X and Y coordinates for delta calculations 17420let lastClientX; 17421let lastClientY; 17422let totalDelta = { 17423 x: 0, 17424 y: 0 17425}; 17426let fabric_panning_util = new util["c" /* default */](); 17427 17428// Keep track of the state 17429fabric.Canvas.prototype.getTotalDelta = function () { 17430 return totalDelta; 17431}; 17432fabric.Canvas.prototype.setInitialPan = function () { 17433 // zoom = 1 17434 if (!initialPan) initialPan = { 17435 x: this.viewportTransform[4], 17436 y: this.viewportTransform[5] 17437 }; 17438 return initialPan; 17439}; 17440fabric.Canvas.prototype.getInitialPan = function () { 17441 return initialPan; 17442}; 17443fabric.Canvas.prototype.getPanDelta = function () { 17444 return panDelta; 17445}; 17446fabric.Canvas.prototype.panState = STATE_IDLE; 17447fabric.Canvas.prototype.panMouseMoveHandler = function (e) { 17448 if (this.panState === STATE_PANNING && e && e.e && !this.component.cmdKey && !this.component.ctrlKey && (e.e.touches && e.e.touches.length == 1 || !e.e.touches) && !this.component.state.zoomPanDisabled) { 17449 // let delta = new fabric.Point(e.e.movementX, e.e.movementY); // No Safari support for movementX and movementY 17450 // For cross-browser compatibility, I had to manually keep track of the delta 17451 // get default pan right on load 17452 17453 // Calculate deltas 17454 let deltaX = 0; 17455 let deltaY = 0; 17456 if (lastClientX) { 17457 deltaX = (e.e.clientX || e.e.touches[0].clientX) - lastClientX; 17458 } 17459 if (lastClientY) { 17460 deltaY = (e.e.clientY || e.e.touches[0].clientY) - lastClientY; 17461 } 17462 totalDelta.x = totalDelta.x + deltaX * this.getZoom(); 17463 totalDelta.y = totalDelta.y + deltaY * this.getZoom(); 17464 17465 // Update the last X and Y values 17466 lastClientX = e.e.clientX || e.e.touches[0].clientX; 17467 lastClientY = e.e.clientY || e.e.touches[0].clientY; 17468 const delta = new fabric.Point(deltaX, deltaY); 17469 let prevPers = this.component.getOnScreenClipPercentage({ 17470 x: 0, 17471 y: 0 17472 }); 17473 this.relativePan(delta); 17474 let nextPers = this.component.getOnScreenClipPercentage({ 17475 x: 0, 17476 y: 0 17477 }); 17478 if (nextPers < panStopClipPercentage && nextPers < prevPers) { 17479 this.relativePan({ 17480 x: -delta.x,
17481 y: -delta.y 17482 }); 17483 } 17484 this.trigger('moved'); 17485 17486 // past zoom flag 17487 clearTimeout(this.component.zoomDoneTimer); 17488 this.component.zoomDoneTimer = setTimeout(() => { 17489 clearTimeout(this.component.zoomDoneTimer); 17490 // this.component.props.setCanvasInteraction() 17491 // this.component.props.setCanvasInteraction() 17492 this.component.zoomDoneTimer = false; 17493 }, 500); 17494 } 17495}; 17496let panScrollStoppedTimer = null; 17497let setCanvasNoInteraction = function () { 17498 this.component.props.setCanvasNoInteraction(); 17499 panScrollStoppedTimer = null; 17500}; 17501fabric.Canvas.prototype.panScrollHandler = function (e) { 17502 // const isModeNovice = localStorage.getItem("mode") === 'novice' 17503 const isModeNovice = this.component.props.navigationMode === 'novice'; 17504 if (!isModeNovice && !this.component.cmdKey && !this.component.ctrlKey && e && e.e && !e.e.ctrlKey && (e.e.touches && e.e.touches.length == 1 || !e.e.touches) && !this.component.state.zoomPanDisabled) { 17505 // let delta = new fabric.Point(e.e.movementX, e.e.movementY); // No Safari support for movementX and movementY 17506 // For cross-browser compatibility, I had to manually keep track of the delta 17507 // get default pan right on load 17508 17509 // Calculate deltas 17510 let deltaX = 0; 17511 let deltaY = 0; 17512 if (lastClientX) { 17513 deltaX = -fabric_panning_util.normalizeWheel(e.e).pixelX; 17514 deltaX = Math.abs(deltaX) > 10 ? 10 * deltaX / Math.abs(deltaX) : deltaX; 17515 } 17516 if (lastClientY) { 17517 deltaY = -fabric_panning_util.normalizeWheel(e.e).pixelY; 17518 deltaY = Math.abs(deltaY) > 10 ? 10 * deltaY / Math.abs(deltaY) : deltaY; 17519 } 17520 totalDelta.x = totalDelta.x + deltaX * this.getZoom(); 17521 totalDelta.y = totalDelta.y + deltaY * this.getZoom(); 17522 17523 // Update the last X and Y values 17524 lastClientX = e.e.clientX || e.e.touches[0].clientX; 17525 lastClientY = e.e.clientY || e.e.touches[0].clientY; 17526 const delta = new fabric.Point(deltaX, deltaY); 17527 let prevPers = this.component.getOnScreenClipPercentage({ 17528 x: 0, 17529 y: 0 17530 }); 17531 this.relativePan(delta); 17532 let nextPers = this.component.getOnScreenClipPercentage({ 17533 x: 0, 17534 y: 0 17535 }); 17536 if (nextPers < panStopClipPercentage && nextPers < prevPers) { 17537 this.relativePan({ 17538 x: -delta.x, 17539 y: -delta.y 17540 }); 17541 } 17542 this.trigger('moved'); 17543 17544 // update markers positions 17545 let setCanvasNoInteractionFunc = setCanvasNoInteraction.bind(this); 17546 if (!panScrollStoppedTimer) { 17547 this.component.props.setCanvasInteraction(); 17548 } else { 17549 clearTimeout(panScrollStoppedTimer); 17550 } 17551 panScrollStoppedTimer = setTimeout(setCanvasNoInteractionFunc, 300); 17552 } 17553}; 17554fabric.Canvas.prototype.panMouseUpHandler = function (e) { 17555 this.panState = STATE_IDLE; 17556 this.defaultCursor = 'grab'; 17557}; 17558fabric.Canvas.prototype.panMouseDownHandler = function (e) { 17559 if (this.panDisabled) return; 17560 this.defaultCursor = 'grabbing'; 17561 this.panState = STATE_PANNING; 17562 lastClientX = e.e.clientX; 17563 lastClientY = e.e.clientY; 17564}; 17565fabric.Canvas.prototype.toggleDragMode = function (dragMode) { 17566 // We're entering dragmode 17567 if (dragMode) { 17568 // Discard any active object 17569 this.discardActiveObject(); 17570 // Set the cursor to 'move' 17571 this.defaultCursor = 'grab'; 17572 // Loop over all objects and disable events / selectable. We remember its value in a temp variable stored on each object 17573 this.forEachObject(function (object) { 17574 object.prevEvented = object.evented; 17575 object.prevSelectable = object.selectable; 17576 object.evented = false; 17577 object.selectable = false; 17578 }); 17579 // Remove selection ability on the canvas 17580 this.selection = false; 17581 this.on('mouse:up', this.panMouseUpHandler); 17582 this.on('mouse:down', this.panMouseDownHandler); 17583 this.on('mouse:move', this.panMouseMoveHandler); 17584 } else { 17585 initialPan = false; 17586 // Remember the previous X and Y coordinates for delta calculations 17587 lastClientX = null; 17588 lastClientY = null; 17589 totalDelta = { 17590 x: 0, 17591 y: 0 17592 }; 17593 17594 // When we exit dragmode, we restore the previous values on all objects 17595 this.forEachObject(function (object) { 17596 object.evented = object.prevEvented !== undefined ? object.prevEvented : object.evented; 17597 object.selectable = object.prevSelectable !== undefined ? object.prevSelectable : object.selectable; 17598 }); 17599 // Reset the cursor 17600 this.defaultCursor = 'default'; 17601 // Remove the event listeners 17602 this.off('mouse:up', this.panMouseUpHandler); 17603 this.off('mouse:down', this.panMouseDownHandler); 17604 this.off('mouse:move', this.panMouseMoveHandler); 17605 // Restore selection ability on the canvas 17606 this.selection = true; 17607 } 17608}; 17609/* harmony default export */ var fabric_panning = ({}); 17610// CONCATENATED MODULE: ./src/editor/mods/fabric.shadow.corners.js 17611function fabricShadowCornersTransform(fabric, color, blur) { 17612 // fabric.Object.prototype.controls.mtr = new fabric.Control({ 17613 // x: 0, 17614 // y: -0.5, 17615 // offsetY: -40, 17616 // cursorStyle: 'crosshair', 17617 // actionHandler: fabric.controlsUtils.rotationWithSnapping, 17618 // actionName: 'rotate', 17619 // render: renderIcon, 17620 // cornerSize: 28, 17621 // withConnection: true 17622 // }); 17623 17624 fabric.util.object.extend(fabric.Object.prototype, { 17625 _drawControl: function (control, ctx, methodName, left, top, styleOverride) { 17626 styleOverride = styleOverride || {}; 17627 if (!this.isControlVisible(control)) { 17628 return; 17629 } 17630 var size = this.cornerSize, 17631 stroke = !this.transparentCorners && this.cornerStrokeColor; 17632 switch (styleOverride.cornerStyle || this.cornerStyle) { 17633 case 'circle': 17634 ctx.beginPath(); 17635 ctx.arc(left + size / 2, top + size / 2, size / 2, 0, 2 * Math.PI, false); 17636 ctx.shadowColor = color; 17637 // diff start 17638 ctx.shadowBlur = blur; 17639 ctx.shadowOffsetX = 0; 17640 ctx.shadowOffsetY = 0; 17641 // diff end 17642 ctx[methodName](); 17643 if (stroke) { 17644 // ctx.stroke(); 17645 } 17646 break; 17647 default: 17648 this.transparentCorners || ctx.clearRect(left, top, size, size); 17649 ctx[methodName + 'Rect'](left, top, size, size); 17650 if (stroke) { 17651 ctx.strokeRect(left, top, size, size); 17652 } 17653 } 17654 } 17655 }); 17656} 17657/* harmony default export */ var fabric_shadow_corners = (fabricShadowCornersTransform); 17658// CONCATENATED MODULE: ./src/editor/mods/fabric.shadow.borders.js 17659function fabricShadowBordersTransform(fabric, color, blur) { 17660 fabric.util.object.extend(fabric.Object.prototype, { 17661 drawBorders: function (ctx, styleOverride) { 17662 styleOverride = styleOverride || {}; 17663 var wh = this._calculateCurrentDimensions(), 17664 strokeWidth = 1 / this.borderScaleFactor, 17665 width = wh.x + strokeWidth, 17666 height = wh.y + strokeWidth, 17667 drawRotatingPoint = typeof styleOverride.hasRotatingPoint !== 'undefined' ? styleOverride.hasRotatingPoint : this.hasRotatingPoint, 17668 hasControls = typeof styleOverride.hasControls !== 'undefined' ? styleOverride.hasControls : this.hasControls, 17669 rotatingPointOffset = typeof styleOverride.rotatingPointOffset !== 'undefined' ? styleOverride.rotatingPointOffset : this.rotatingPointOffset; 17670 ctx.save(); 17671 ctx.strokeStyle = styleOverride.borderColor || this.borderColor; 17672 this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray, null); 17673 ctx.shadowColor = color; 17674 ctx.shadowBlur = blur; 17675 ctx.shadowOffsetX = 0; 17676 ctx.shadowOffsetY = 0; 17677 ctx.strokeRect(-width / 2, -height / 2, width, height); 17678 if (drawRotatingPoint && this.isControlVisible('mtr') && hasControls) { 17679 var rotateHeight = -height / 2; 17680 ctx.beginPath(); 17681 ctx.moveTo(0, rotateHeight); 17682 ctx.lineTo(0, rotateHeight - rotatingPointOffset); 17683 ctx.stroke(); 17684 }
17685 ctx.restore(); 17686 return this; 17687 } 17688 }); 17689} 17690/* harmony default export */ var fabric_shadow_borders = (fabricShadowBordersTransform); 17691// EXTERNAL MODULE: ./src/editor/components/Canvas/Canvas.css 17692var Canvas_Canvas = __webpack_require__("jVp6"); 17693 17694// EXTERNAL MODULE: ./src/editor/images/cursors/rotate.png 17695var rotate = __webpack_require__("owV6"); 17696var rotate_default = /*#__PURE__*/__webpack_require__.n(rotate); 17697 17698// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Select.js 17699 17700class Select_Select { 17701 constructor(component) { 17702 defineProperty_default()(this, "stopEvent", e => { 17703 // e.stopImmediatePropagation() 17704 }); 17705 defineProperty_default()(this, "start", () => { 17706 document.addEventListener("keydown", this.stopEvent, true); 17707 document.addEventListener("mousedown", this.start, true); 17708 this.canvas.on("mouse:up", this.stop); 17709 }); 17710 defineProperty_default()(this, "stop", () => { 17711 document.removeEventListener("keydown", this.stopEvent, true); 17712 document.removeEventListener("mousedown", this.start, true); 17713 this.canvas.off("mouse:up", this.stop); 17714 }); 17715 defineProperty_default()(this, "onDown", () => { 17716 const canvas = this.canvas; 17717 const hovered = canvas._hoveredTarget; 17718 if (!hovered) { 17719 canvas.toggleDragMode(true); 17720 } 17721 }); 17722 defineProperty_default()(this, "onUp", () => { 17723 const canvas = this.canvas; 17724 canvas.toggleDragMode(false); 17725 }); 17726 this.component = component; 17727 this.canvas = component.dynamic; 17728 this.cursor = 'grab'; // default 17729 } 17730 stopAnnotation() {
17731 let canvas = this.canvas; 17732 if (canvas) { 17733 // canvas.discardActiveObject(); 17734 17735 // canvas.selection = false; // false 17736 canvas.selectionColor = 'transparent', canvas.selectionBorderColor = 'transparent', canvas.hoverCursor = "grab"; 17737 canvas.moveCursor = "grabbing"; 17738 canvas.defaultCursor = "grab"; 17739 canvas.forEachObject(function (o) { 17740 o.selectable = false; 17741 }); 17742 canvas.toggleDragMode(false); 17743 canvas.requestRenderAll(); 17744 canvas.off("mouse:down:before", this.onDown); 17745 canvas.off("mouse:up", this.onUp); 17746 document.removeEventListener("mouseout", this.onUp); 17747 } 17748 } 17749 startAnnotation() { 17750 let canvas = this.canvas; 17751 if (canvas) { 17752 this.start(); 17753 canvas.selection = true; 17754 // canvas.selectionColor = 'rgba(255,255,255,0.3)'; 17755 // canvas.selectionBorderColor = '#fff'; 17756 canvas.selectionColor = 'transparent', canvas.selectionBorderColor = 'transparent'; 17757 canvas.hoverCursor = "grab"; 17758 canvas.moveCursor = "grabbing";
17759 canvas.defaultCursor = "default"; 17760 canvas.forEachObject(function (o) { 17761 o.evented = true; 17762 o.selectable = true; 17763 }); 17764 this.canvas.defaultCursor = 'grab'; 17765 canvas.on("mouse:down:before", this.onDown); 17766 canvas.on("mouse:up", this.onUp); 17767 document.addEventListener("mouseout", this.onUp); 17768 } 17769 } 17770 setSettings() {} 17771} 17772/* harmony default export */ var tools_Select = (Select_Select); 17773// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Move.js 17774// import panningMode from "../../../mods/fabric.panning.js"; 17775class Move { 17776 constructor(component) { 17777 this.toolName = 'move'; 17778 this.component = component; 17779 this.canvas = component.dynamic; 17780 this.cursor = 1; // default 17781 } 17782 stopAnnotation() { 17783 let canvas = this.canvas; 17784 if (canvas) { 17785 canvas.discardActiveObject(); 17786 canvas.selection = false; // false 17787 canvas.selectionColor = 'transparent', canvas.selectionBorderColor = 'transparent', canvas.hoverCursor = "move"; 17788 canvas.defaultCursor = "move"; 17789 canvas.toggleDragMode(false); 17790 } 17791 } 17792 startAnnotation() {
17793 let canvas = this.canvas; 17794 if (canvas) { 17795 canvas.selection = false; 17796 canvas.toggleDragMode(true); 17797 } 17798 } 17799 setSettings() {} 17800} 17801/* harmony default export */ var tools_Move = (Move); 17802// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Cursor.js 17803 17804class Cursor_Cursor { 17805 constructor(component) { 17806 this.component = component; 17807 this.canvas = component.dynamic; 17808 this.util = new util["c" /* default */](); 17809 } 17810 stopAnnotation() { 17811 this.util.stopPageInteractions(); 17812 this.component.stopPageInteractions(); 17813 // let canvas = this.canvas; 17814 // if (canvas) { 17815 // // canvas.discardActiveObject(); 17816 17817 // // canvas.selection = false; // false 17818 // canvas.selectionColor = 'transparent', 17819 // canvas.selectionBorderColor = 'transparent', 17820 // canvas.hoverCursor = "move"; 17821 // canvas.defaultCursor = "default"; 17822 17823 // canvas.requestRenderAll(); 17824 // } 17825 } 17826 startAnnotation() { 17827 this.util.startPageInteractions(); 17828 this.component.startPageInteractions(); 17829 // let canvas = this.canvas; 17830 // if (canvas) { 17831 // canvas.selection = true; 17832 // canvas.selectionColor = 'transparent', 17833 // canvas.selectionBorderColor = 'transparent', 17834 // canvas.hoverCursor = "default"; 17835 // canvas.defaultCursor = "default"; 17836 17837 // // canvas.forEachObject(function(o) { 17838 // // o.selectable = true; 17839 // // }); 17840 // } 17841 } 17842 setSettings() {} 17843} 17844/* harmony default export */ var tools_Cursor = (Cursor_Cursor); 17845// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Tool.js 17846 17847 17848 17849 17850 17851// Daddy of annotation tools 17852class Tool_Tool { 17853 constructor(component) { 17854 defineProperty_default()(this, "startTool", o => { 17855 console.log(o.button === 2, o.button === 3, this.canvas.component.spacePressed); 17856 if (o.button === 2 || o.button === 3 || this.canvas.component.spacePressed) return; // disable tool activation not by left click 17857 this.start(o); 17858 }); 17859 this.component = component; 17860 this.canvas = component.dynamic; 17861 this.util = new util["c" /* default */](); 17862 17863 // start point for transform events 17864 this.startPoint = {}; 17865 if (this.start) this.start = this.start.bind(this); 17866 if (this.do) this.do = this.do.bind(this); 17867 if (this.stop) this.stop = this.stop.bind(this); 17868 this.onCopied = this.onCopied.bind(this); 17869 this.onCloning = this.onCloning.bind(this); 17870 this.onSettings = this.onSettings.bind(this); 17871 this.onScaling = this.onScaling.bind(this); 17872 this.onMoving = this.onMoving.bind(this); 17873 this.onMoved = this.onMoved.bind(this); 17874 this.eventsEnable = this.eventsEnable.bind(this); 17875 this.eventsDisable = this.eventsDisable.bind(this); 17876 this.setCursor = this.setCursor.bind(this); 17877 this.releaseCursor = this.releaseCursor.bind(this); 17878 this.doDo = this.doDo.bind(this); 17879 this.disabledProps = ['disabledStrokeWidth', 'disabledFill', 'disabledOpacity', 'disabledBackgroundColor']; 17880 } 17881 setSettings(set) { 17882 // let settings = {}; 17883 // set.bars.forEach((b)=>{ 17884 // b.inner.forEach((p)=>{ 17885 // settings[p.name] = p.value; 17886 // }); 17887 // }); 17888 let keys = Object.keys(set); 17889 if (keys.length > 0) { 17890 let propName = keys[0]; 17891 if (!propName.includes("disabled")) { 17892 propName = "disabled" + propName.charAt(0).toUpperCase() + propName.slice(1); 17893 set[propName] = false; 17894 } 17895 } 17896 this.settings = { 17897 ...this.settings, 17898 ...set 17899 }; 17900 console.log("setSettings", this.toolName, this.settings); 17901 if (this.settings.type === 'complex') { 17902 Object.keys(this.settings).forEach(toolSet => { 17903 if (toolSet === 'complex') return; 17904 let ret = this.backupOrRecoverDisabledProperties(this.settings[toolSet], this.settings[toolSet]); 17905 this.settings[toolSet] = { 17906 ...this.settings[toolSet], 17907 ...ret 17908 }; 17909 }); 17910 return; 17911 } else { 17912 let ret = this.backupOrRecoverDisabledProperties(this.settings, this.settings); 17913 this.settings = { 17914 ...this.settings, 17915 ...ret 17916 }; 17917 } 17918 // this.setDisabledProperties(this.settings, this.settings); 17919 } 17920 stopAnnotation() {
17921 let canvas = this.canvas; 17922 if (canvas) { 17923 canvas.off("mouse:down", this.startTool); 17924 // document.removeEventListener("mousemove", this.do, false); 17925 canvas.off("mouse:move", this.doDo); 17926 canvas.off("mouse:up", this.stop); 17927 } 17928 this.releaseCursor(); 17929 this.releaseTool(); 17930 } 17931 doDo(e) { 17932 if (e.e.altKey && e.e.shiftKey) return; 17933 requestAnimationFrame(() => this.do(e)); 17934 } 17935 startAnnotation(obj) { 17936 let canvas = this.canvas; 17937 canvas.on("mouse:down", this.startTool); 17938 // document.addEventListener("mousemove", this.do, false); 17939 canvas.on("mouse:move", this.doDo); 17940 canvas.on("mouse:up", this.stop); 17941 this.setCursor(); 17942 } 17943 setCanvasObjectSelection(isSelectable) { 17944 this.canvas.selection = isSelectable; 17945 // fabric.Object.prototype.perPixelTargetFind = !isSelectable; 17946 dist_fabric["fabric"].Object.prototype.selectable = isSelectable; 17947 dist_fabric["fabric"].Object.prototype.evented = isSelectable; 17948 } 17949 startAnnotationForceDraw() { 17950 // add esc handler 17951 // split screen.link and screenclip.com 17952 // test 17953 if (this.canvas) { 17954 this.canvas.discardActiveObject().renderAll(); 17955 // remove hover (get all objects and remove with hover in id) 17956 this.canvas.getObjects().forEach(object => { 17957 if (object.objectID.includes("HOVER")) { 17958 object.remove(); 17959 return false; 17960 } 17961 }); 17962 if (this.toolName === 'pen' || this.toolName === 'highlighter') { 17963 this.setCanvasObjectSelection(false); 17964 } else { 17965 this.setCanvasObjectSelection(true); 17966 } 17967 this.canvas.forEachObject(obj => { 17968 if (obj.toolName === 'img') { 17969 obj.evented = false; 17970 obj.selectable = false; 17971 } 17972 ; 17973 }); 17974 } 17975 } 17976 stopAnnotationForceDraw() { 17977 if (this.canvas) { 17978 this.setCanvasObjectSelection(true); 17979 } 17980 } 17981 setCursor() {
17982 let canvas = this.canvas; 17983 if (canvas) { 17984 this.bupCursor = canvas.defaultCursor; 17985 let path = this.util.getExtContentUrl(); 17986 let embedPath = ""; 17987 let xCoordinates = 0; 17988 let yCoordinates = 0; 17989 if (this.component.props.embedPath) { 17990 path = ''; 17991 embedPath = ''; 17992 } else { 17993 if ((this.component.props.embedMode || this.component.props.embedCapturingMode) && !path) embedPath = "/embeds/"; 17994 if (this.component.props.embedMode && this.component.props.clipclipMode) embedPath = "./"; 17995 } 17996 if (this.toolName === 'pen') { 17997 xCoordinates = 5; 17998 yCoordinates = 26; 17999 } else if (this.toolName === 'highlighter') { 18000 xCoordinates = 6; 18001 yCoordinates = 26; 18002 } else if (this.toolName === 'ellipse' || this.toolName === 'rect' || this.toolName === 'blur' || this.toolName === 'arrow') { 18003 xCoordinates = 12; 18004 yCoordinates = 20; 18005 } else if (this.toolName === 'text' || this.toolName === 'line') { 18006 xCoordinates = 16; 18007 yCoordinates = 16; 18008 } 18009 canvas.defaultCursor = this.cursor === 1 ? "grab" : ['url("', this.cursor, `") ${xCoordinates} ${yCoordinates}, crosshair`].join(""); 18010 console.log("default cursor", canvas.defaultCursor); 18011 } 18012 } 18013 releaseCursor() {
18014 let canvas = this.canvas; 18015 if (canvas) { 18016 canvas.defaultCursor = this.bupCursor; 18017 } 18018 } 18019 releaseTool() {} 18020 eventsEnable(o) { 18021 let shape = o || this.shape; 18022 this.eventsDisable(shape); 18023 shape.on("scaling", this.onScaling); 18024 shape.on("moving", this.onMoving); 18025 shape.on("moved", this.onMoved); 18026 shape.on("special:cloning", this.onCloning); 18027 shape.on("special:copied", this.onCopied); 18028 shape.on("special:settings", this.onSettings); 18029 18030 // let removeEvents = (e) => { 18031 // if (e.target.objectID==shape.objectID) { 18032 // this.eventsDisable(e.target); 18033 // } 18034 // canvas.off("object:removed", removeEvents); 18035 // } 18036 // removeEvents = removeEvents.bind(this); 18037 // canvas.on("object:removed", removeEvents); 18038 } 18039 eventsDisable(o) { 18040 let shape = o || this.shape; 18041 shape.off("scaling", this.onScaling); 18042 shape.off("moving", this.onMoving); 18043 shape.off("moved", this.onMoved); 18044 shape.off("special:cloning", this.onCloning); 18045 shape.off("special:copied", this.onCopied);
18046 shape.off("special:settings", this.onSettings); 18047 } 18048 onCopied(o) { 18049 o.copy.set("_controlsVisibility", { 18050 ...o.copy._controlsVisibility 18051 }); 18052 this.setupControlCorners(o.copy); 18053 } 18054 onScaling(e) { 18055 if (e.target.managedScaling) return; 18056 this.setupControlCorners(e.target); 18057 this.transform = true; 18058 let obj = e.target, 18059 w = obj.width * obj.scaleX, 18060 h = obj.height * obj.scaleY; 18061 let left = e.transform.target.left; 18062 let top = e.transform.target.top; 18063 if (e.transform.originX == 'right') left += e.transform.target.width; 18064 if (e.transform.originY == 'bottom') top += e.transform.target.height; 18065 // obj.set({ 18066 // 'height' : h, 'width' : w, 18067 // 'scaleX' : 1, 'scaleY' : 1, 18068 // // left: left, top: top, 18069 // }); 18070 this.transform = false; 18071 } 18072 onMoving(e) { 18073 let component = this.component; 18074 let shape = e.target; 18075 this.transform = true; 18076 if (typeof this.startPoint.x === 'undefined') { 18077 this.startPoint.x = e.e.pageX; 18078 this.startPoint.y = e.e.pageY; 18079 } 18080 if (component.shiftKey) { 18081 let dx = Math.abs(this.startPoint.x - e.e.pageX); 18082 let dy = Math.abs(this.startPoint.y - e.e.pageY); 18083 let lockx = shape.lockMovementY ? Infinity : 0; 18084 let locky = shape.lockMovementX ? Infinity : 0; 18085 if (dx + lockx < dy) shape.set({ 18086 "lockMovementX": true, 18087 "lockMovementY": false 18088 });else if (dx > dy + locky) shape.set({ 18089 "lockMovementX": false, 18090 "lockMovementY": true 18091 }); 18092 } else e.target.set({ 18093 "lockMovementX": false, 18094 "lockMovementY": false 18095 }); 18096 this.transform = false; 18097 } 18098 onSettings(e) { 18099 let shape = e.target; 18100 let addition = this.backupOrRecoverDisabledProperties(shape, e.settings); 18101 let s = { 18102 ...e.settings, 18103 ...addition 18104 }; 18105 shape.set(s); 18106 18107 // this.setDisabledProperties(shape); 18108 shape.canvas.renderAll(); 18109 } 18110 backupOrRecoverDisabledProperties(shape, sets) { 18111 let ret = {}; 18112 let checkProp = propName => { 18113 let firstUpperRealPropName = propName.replace("disabled", ""); 18114 let realPropName = firstUpperRealPropName.charAt(0).toLowerCase() + firstUpperRealPropName.slice(1); 18115 let lowerRealPropName = realPropName.toLowerCase(); 18116 let nullValue = lowerRealPropName.indexOf("color") > -1 || lowerRealPropName.indexOf("strokewidth") == -1 && lowerRealPropName.indexOf("stroke") > -1 || lowerRealPropName.indexOf("fill") > -1 ? "transparent" : 0; 18117 if (sets.hasOwnProperty(propName) && sets[propName] === false) { 18118 let bup = shape["bup" + firstUpperRealPropName]; 18119 if (typeof bup === 'undefined') return; 18120 ret["bup" + firstUpperRealPropName] = undefined; 18121 ret[realPropName] = bup; 18122 } else if (sets.hasOwnProperty(propName) && sets[propName] === true) { 18123 ret["bup" + firstUpperRealPropName] = shape[realPropName]; 18124 ret[realPropName] = nullValue; 18125 } 18126 }; 18127 this.disabledProps.forEach(checkProp); 18128 return ret; 18129 } 18130 18131 // setDisabledProperties (shape, obj) { 18132 // if (shape && shape.get("disabledstroke")) { 18133 // shape.set("strokeWidth", 0); 18134 // } else if (obj && obj["disabledstroke"]) { 18135 // obj["strokeWidth"] = 0; 18136 // } 18137 18138 // if (shape && shape.get("disabledfill")) { 18139 // shape.set("fill", 'transparent'); 18140 // } else if (obj && obj["disabledfill"]) obj["fill"] = 'transparent'; 18141 // } 18142 18143 onMoved(e) { 18144 this.startPoint = {}; 18145 this.transform = true; 18146 e.target.set({ 18147 lockMovementX: false, 18148 lockMovementY: false 18149 }); 18150 this.transform = false; 18151 } 18152 setupControlCorners(shape) { 18153 if (!config["a" /* default */].getToolsWithTwoControlCorners().includes(shape.toolName)) return; 18154 let x1, x2, y1, y2; 18155 let flipX = shape.flipX; 18156 let flipY = shape.flipY; 18157 x1 = flipX ? shape.x2 : shape.x1; 18158 x2 = flipX ? shape.x1 : shape.x2; 18159 y1 = flipY ? shape.y2 : shape.y1; 18160 y2 = flipY ? shape.y1 : shape.y2;
18161 let cornersOptions = { 18162 bl: false, 18163 br: false, 18164 mb: false, 18165 ml: false, 18166 mr: false, 18167 mt: false, 18168 tl: false, 18169 tr: false, 18170 mtr: false 18171 }; 18172 if (x1 <= x2 && y1 <= y2) { 18173 cornersOptions.tl = true; 18174 cornersOptions.br = true; 18175 } else if (x1 >= x2 && y1 <= y2) { 18176 cornersOptions.tr = true; 18177 cornersOptions.bl = true; 18178 } else if (x1 <= x2 && y1 >= y2) { 18179 cornersOptions.tr = true; 18180 cornersOptions.bl = true; 18181 } else if (x1 >= x2 && y1 >= y2) { 18182 cornersOptions.tl = true; 18183 cornersOptions.br = true; 18184 } 18185 shape.setControlsVisibility(cornersOptions); 18186 } 18187 onCloning(e) { 18188 let component = this.component; 18189 let that = this; 18190 let shape = e.original; 18191 let clone = e.clone; 18192 18193 // refresh link to controlsVisibility object with new one 18194 clone.set("_controlsVisibility", { 18195 ...clone._controlsVisibility 18196 }); 18197 18198 // use original as clone 18199 this.draw = true; // history off 18200 shape.bringToFront(); 18201 let moved = () => { 18202 if (!component.historyDisabled) { 18203 let e = { 18204 target: shape 18205 }; 18206 that.canvas.trigger("object:special:transform", e); 18207 } 18208 shape.off(moved); 18209 }; 18210 shape.on("moved", moved); 18211 that.draw = false; // history on 18212 18213 // use clone as original 18214 that.eventsEnable(clone); 18215 that.component.saveObjectData(clone); 18216 } 18217} 18218/* harmony default export */ var tools_Tool = (Tool_Tool); 18219// EXTERNAL MODULE: ./src/editor/images/cursors/highlighter.svg 18220var highlighter = __webpack_require__("4iYn"); 18221var highlighter_default = /*#__PURE__*/__webpack_require__.n(highlighter); 18222 18223// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Highlighter.js 18224 18225 18226 18227class Highlighter_Highlighter extends tools_Tool { 18228 constructor(component) { 18229 super(component); 18230 this.toolName = 'highlighter'; 18231 this.cursor = highlighter_default.a; 18232 this.onSettings = this.onSettings.bind(this); 18233 } 18234 startAnnotation() { 18235 super.startAnnotationForceDraw(); 18236 super.startAnnotation(); 18237 } 18238 stopAnnotation() { 18239 super.stopAnnotationForceDraw(); 18240 super.stopAnnotation(); 18241 } 18242 shiftShapesSettings(o, k) { 18243 o.set('scaleX', k * o.scaleX); 18244 o.set('scaleY', k * o.scaleY); 18245 o.set('strokeWidth', o.strokeWidth * k); 18246 } 18247 onScaling(e) { 18248 // M = moveto 18249 // L = lineto 18250 // H = horizontal lineto 18251 // V = vertical lineto 18252 // C = curveto 18253 // S = smooth curveto 18254 // Q = quadratic Bézier curve 18255 // T = smooth quadratic Bézier curveto 18256 // A = elliptical Arc 18257 // Z = closepath 18258 this.transform = true; 18259 let obj = e.target; 18260 if (typeof this.strokeWidthBeforeScaling === 'undefined') { 18261 this.strokeWidthBeforeScaling = obj.get("strokeWidth"); 18262 } 18263 obj.set({ 18264 "strokeWidth": this.strokeWidthBeforeScaling 18265 }); 18266 this.transform = false; 18267 } 18268 start(o) {
18269 let canvas = this.canvas; 18270 if (o.target !== null) { 18271 // if target is selected object 18272 // canvas.setActiveObject(o.target); 18273 return; 18274 } 18275 this.draw = true; 18276 let point = canvas.getPointer(o.e); 18277 this.startPoint = point; 18278 let opacity = Math.round(this.settings.opacity * 255).toString(16); 18279 opacity = opacity.length == 1 ? "0" + opacity : opacity; 18280 this.shape = new dist_fabric["fabric"].PencilBrush(canvas); 18281 console.log("highlighter settings", this.settings, opacity); 18282 this.shape.color = this.settings.stroke.slice(0, 7) + opacity; 18283 this.shape.width = this.settings.strokeWidth; 18284 this.shape.strokeLineCap = 'square'; 18285 this.shape.onMouseDown(point, { 18286 e: {} 18287 }); 18288 } 18289 do(o) { 18290 if (!this.draw) return; 18291 let component = this.component; 18292 let canvas = this.canvas; 18293 let point = canvas.getPointer(o.e); 18294 if (!component.shiftKey && !component.ctrlKey && !component.cmdKey && this.startPoint) { 18295 if (Math.abs(this.startPoint.x - point.x) < Math.abs(this.startPoint.y - point.y)) { 18296 point.x = this.startPoint.x; 18297 } else point.y = this.startPoint.y; 18298 } 18299 this.shape.onMouseMove(point, { 18300 e: {} 18301 }); 18302 } 18303 stop(o) { 18304 if (!this.draw) return; 18305 let that = this; 18306 let component = this.component;
18307 let canvas = this.canvas; 18308 let point = canvas.getPointer(o.e); 18309 this.shape.onMouseUp({ 18310 e: {} 18311 }); 18312 this.shape = component.getLastShape(); 18313 this.shape.set({ 18314 toolName: that.toolName, 18315 objectID: component.util.generateID(this.toolName), 18316 managedScaling: true, 18317 opacity: this.settings.opacity, 18318 stroke: this.settings.stroke 18319 }); 18320 that.eventsEnable(this.shape); 18321 18322 // canvas.setActiveObject(this.shape); 18323 this.draw = false; 18324 component.historyDo(); 18325 // component.backToDefaultTool(); 18326 } 18327 onSettings(e) { 18328 // if (e.settings.hasOwnProperty("opacity")) { 18329 // let opacity = Math.round(e.settings.opacity * 255).toString(16); 18330 // opacity = opacity.length == 1 ? "0" + opacity : opacity; 18331 // e.settings.stroke = (e.settings.stroke ? e.settings.stroke.slice(0,7) : e.target.get("stroke").slice(0,7) ) + opacity; 18332 // } 18333 if (e.settings.hasOwnProperty("stroke")) { 18334 // e.settings.stroke = this.shape.get("stroke").length > 7 ? e.settings.stroke.slice(0, 7) + this.shape.get("stroke").slice(-2) : e.settings.stroke; 18335 e.settings.stroke = e.target.get("stroke").length > 7 ? e.settings.stroke.slice(0, 7) + e.target.get("stroke").slice(-2) : e.settings.stroke; 18336 } 18337 super.onSettings(e); 18338 } 18339} 18340/* harmony default export */ var tools_Highlighter = (Highlighter_Highlighter); 18341// EXTERNAL MODULE: ./src/editor/images/cursors/pen.svg 18342var pen = __webpack_require__("1L6i"); 18343var pen_default = /*#__PURE__*/__webpack_require__.n(pen); 18344 18345// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Pen.js 18346 18347 18348 18349class Pen_Pen extends tools_Tool { 18350 constructor(component) { 18351 super(component); 18352 this.toolName = 'pen'; 18353 this.cursor = pen_default.a; 18354 this.onSettings = this.onSettings.bind(this); 18355 } 18356 startAnnotation() { 18357 super.startAnnotationForceDraw(); 18358 super.startAnnotation(); 18359 } 18360 stopAnnotation() { 18361 super.stopAnnotationForceDraw(); 18362 super.stopAnnotation(); 18363 } 18364 shiftShapesSettings(o, k) { 18365 o.set('scaleX', k * o.scaleX); 18366 o.set('scaleY', k * o.scaleY); 18367 o.set('strokeWidth', o.strokeWidth * k); 18368 } 18369 onScaling(e) { 18370 // M = moveto 18371 // L = lineto 18372 // H = horizontal lineto 18373 // V = vertical lineto 18374 // C = curveto 18375 // S = smooth curveto 18376 // Q = quadratic Bézier curve 18377 // T = smooth quadratic Bézier curveto 18378 // A = elliptical Arc 18379 // Z = closepath 18380 this.transform = true; 18381 let obj = e.target; 18382 if (typeof this.strokeWidthBeforeScaling === 'undefined') { 18383 this.strokeWidthBeforeScaling = obj.get("strokeWidth"); 18384 } 18385 obj.set({ 18386 "strokeWidth": this.strokeWidthBeforeScaling 18387 }); 18388 this.transform = false; 18389 } 18390 start(o) {
18391 let canvas = this.canvas; 18392 if (o.target !== null) { 18393 // if target is selected object 18394 // canvas.setActiveObject(o.target); 18395 return; 18396 } 18397 this.draw = true; 18398 let point = canvas.getPointer(o.e); 18399 this.startPoint = point; 18400 18401 // let opacity = Math.round(this.settings.opacity * 255).toString(16); 18402 // opacity = opacity.length == 1 ? "0" + opacity : opacity; 18403 18404 this.shape = new dist_fabric["fabric"].PencilBrush(canvas); 18405 console.log("pen settings", this.settings); 18406 this.shape.color = this.settings.stroke.slice(0, 7); 18407 this.shape.width = this.settings.strokeWidth; 18408 this.shape.onMouseDown(point, { 18409 e: {} 18410 }); 18411 } 18412 do(o) { 18413 if (!this.draw) return; 18414 let component = this.component; 18415 let canvas = this.canvas; 18416 let point = canvas.getPointer(o.e); 18417 if (component.shiftKey && this.startPoint) { 18418 if (Math.abs(this.startPoint.x - point.x) < Math.abs(this.startPoint.y - point.y)) { 18419 point.x = this.startPoint.x; 18420 } else point.y = this.startPoint.y; 18421 } 18422 this.shape.onMouseMove(point, { 18423 e: {} 18424 }); 18425 } 18426 stop(o) { 18427 if (!this.draw) return; 18428 let that = this; 18429 let component = this.component;
18430 let canvas = this.canvas; 18431 let point = canvas.getPointer(o.e); 18432 this.shape.onMouseUp({ 18433 e: {} 18434 }); 18435 this.shape = component.getLastShape(); 18436 this.shape.set({ 18437 toolName: that.toolName, 18438 objectID: component.util.generateID(this.toolName), 18439 managedScaling: true 18440 }); 18441 that.eventsEnable(this.shape); 18442 18443 // canvas.setActiveObject(this.shape); 18444 this.draw = false; 18445 component.historyDo(); 18446 // component.backToDefaultTool(); 18447 } 18448 onSettings(e) { 18449 // if (e.settings.hasOwnProperty("opacity")) { 18450 // let opacity = Math.round(e.settings.opacity * 255).toString(16); 18451 // opacity = opacity.length == 1 ? "0" + opacity : opacity; 18452 // e.settings.stroke = (e.settings.stroke ? e.settings.stroke.slice(0,7) : e.target.get("stroke").slice(0,7) ) + opacity; 18453 // } 18454 if (e.settings.hasOwnProperty("stroke")) { 18455 // e.settings.stroke = this.shape.get("stroke").length > 7 ? e.settings.stroke.slice(0, 7) + this.shape.get("stroke").slice(-2) : e.settings.stroke; 18456 e.settings.stroke = e.target.get("stroke").length > 7 ? e.settings.stroke.slice(0, 7) + e.target.get("stroke").slice(-2) : e.settings.stroke; 18457 } 18458 super.onSettings(e); 18459 } 18460} 18461/* harmony default export */ var tools_Pen = (Pen_Pen); 18462// EXTERNAL MODULE: ./src/editor/images/cursors/rectangle.svg 18463var rectangle = __webpack_require__("FeOE"); 18464var rectangle_default = /*#__PURE__*/__webpack_require__.n(rectangle); 18465 18466// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Rect.js 18467 18468 18469 18470class Rect_Rect extends tools_Tool { 18471 constructor(component) { 18472 super(component); 18473 this.toolName = "rect"; 18474 this.cursor = rectangle_default.a; 18475 } 18476 startAnnotation() { 18477 super.startAnnotationForceDraw(); 18478 super.startAnnotation(); 18479 } 18480 stopAnnotation() { 18481 super.stopAnnotationForceDraw(); 18482 super.stopAnnotation(); 18483 } 18484 start(o) {
18485 let component = this.component; 18486 let canvas = this.canvas; 18487 if (o.target !== null) { 18488 // if target is selected object 18489 //canvas.setActiveObject(o.target); 18490 return; 18491 } 18492 this.draw = true; 18493 let point = canvas.getPointer(o.e); 18494 let settings = { 18495 left: point.x, 18496 top: point.y, 18497 width: 0, 18498 height: 0, 18499 ...this.settings 18500 }; 18501 this.startPoint = point; 18502 this.shape = new dist_fabric["fabric"].Rect(settings); 18503 18504 // set custom fields 18505 this.shape.set({ 18506 toolName: this.toolName, 18507 objectID: component.util.generateID(this.toolName) 18508 }); 18509 canvas.add(this.shape); 18510 } 18511 do(o) { 18512 if (!this.draw) return; 18513 let component = this.component; 18514 let canvas = this.canvas; 18515 let point = canvas.getPointer(o.e); 18516 let prevX = this.shape.get("left"); 18517 let prevWidth = this.shape.get("width"); 18518 let left = Math.min(this.startPoint.x, point.x); 18519 let top = Math.min(this.startPoint.y, point.y); 18520 let width = Math.abs(this.startPoint.x - point.x); 18521 let height = Math.abs(this.startPoint.y - point.y); 18522 if (!component.altKey) { 18523 this.shape.originX = "left"; 18524 this.shape.originY = "top"; 18525 } else { 18526 this.shape.originX = "center"; 18527 this.shape.originY = "center"; 18528 left = this.startPoint.x; 18529 top = this.startPoint.y; 18530 } 18531 if (component.shiftKey) { 18532 if (!component.altKey) { 18533 if (point.x < this.startPoint.x && point.y < this.startPoint.y) { 18534 width = prevX + prevWidth - point.x; 18535 top = this.startPoint.y - width; 18536 } else if (point.x > this.startPoint.x && point.y < this.startPoint.y) { 18537 top = this.startPoint.y - width; 18538 } 18539 } 18540 height = width; 18541 } 18542 this.shape.set({ 18543 left: left, 18544 top: top, 18545 width: width, 18546 height: height 18547 }); 18548 canvas.renderAll(); 18549 } 18550 stop(o) { 18551 if (!this.draw) return; 18552 this.shape.setCoords(); 18553 this.canvas.setActiveObject(this.shape); 18554 this.component.shapeRemoveIfZero(); 18555 this.shape.set({ 18556 originX: "left", 18557 originY: "top" 18558 }); 18559 18560 // enable history 18561 this.draw = false; 18562 this.transform = false; 18563 this.component.shapeAfterTransforming(); 18564 this.eventsEnable(); 18565 // this.component.backToDefaultTool(); 18566 } 18567} 18568/* harmony default export */ var tools_Rect = (Rect_Rect); 18569// EXTERNAL MODULE: ./src/editor/images/cursors/circle.svg 18570var circle = __webpack_require__("wj4Z"); 18571var circle_default = /*#__PURE__*/__webpack_require__.n(circle); 18572 18573// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Ellipse.js 18574 18575 18576 18577class Ellipse_Ellipse extends tools_Tool { 18578 constructor(component) { 18579 super(component); 18580 this.toolName = 'ellipse'; 18581 this.cursor = circle_default.a; 18582 } 18583 startAnnotation() { 18584 super.startAnnotationForceDraw(); 18585 super.startAnnotation(); 18586 } 18587 stopAnnotation() { 18588 super.stopAnnotationForceDraw(); 18589 super.stopAnnotation(); 18590 } 18591 start(o) {
18592 let component = this.component; 18593 let canvas = this.canvas; 18594 if (o.target !== null) { 18595 // if target is selected object 18596 // canvas.setActiveObject(o.target); 18597 return; 18598 } 18599 this.draw = true; 18600 let point = canvas.getPointer(o.e); 18601 let settings = { 18602 left: point.x, 18603 top: point.y, 18604 rx: 0, 18605 ry: 0, 18606 ...this.settings 18607 }; 18608 this.startPoint = point; 18609 this.shape = new dist_fabric["fabric"].Ellipse(settings); 18610 this.shape.set({ 18611 toolName: this.toolName, 18612 objectID: component.util.generateID(this.toolName) 18613 }); 18614 canvas.add(this.shape); 18615 } 18616 do(o) { 18617 if (!this.draw) return; 18618 let component = this.component; 18619 let canvas = this.canvas; 18620 let prevX = this.shape.get("left"); 18621 // let prevY = this.shape.get("top"); 18622 let prevRx = this.shape.get("rx"); 18623 // let prevRy = this.shape.get("ry"); 18624 let point = canvas.getPointer(o.e); 18625 let left = Math.min(this.startPoint.x, point.x); 18626 let top = Math.min(this.startPoint.y, point.y); 18627 let rx = Math.abs(this.startPoint.x - point.x) / 2; 18628 let ry = Math.abs(this.startPoint.y - point.y) / 2; 18629 if (!this.altKey) { 18630 this.shape.originX = "left"; 18631 this.shape.originY = "top"; 18632 } else { 18633 this.shape.originX = "center"; 18634 this.shape.originY = "center"; 18635 left = this.startPoint.x; 18636 top = this.startPoint.y; 18637 } 18638 if (component.shiftKey) { 18639 if (!component.altKey) { 18640 if (point.x < this.startPoint.x && point.y < this.startPoint.y) { 18641 rx = (prevX + prevRx * 2 - point.x) / 2; 18642 top = this.startPoint.y - rx * 2; 18643 } else if (point.x > this.startPoint.x && point.y < this.startPoint.y) { 18644 top = this.startPoint.y - rx * 2; 18645 } 18646 } 18647 ry = rx; 18648 } 18649 this.shape.set({ 18650 left: left, 18651 top: top, 18652 rx: rx, 18653 ry: ry 18654 }); 18655 canvas.renderAll(); 18656 } 18657 stop(o) { 18658 if (!this.draw) return; 18659 this.shape.setCoords(); 18660 this.canvas.setActiveObject(this.shape); 18661 this.component.shapeRemoveIfZero(); 18662 18663 // enable history 18664 this.draw = false; 18665 this.transform = false; 18666 this.component.shapeAfterTransforming(); 18667 this.eventsEnable(); 18668 // this.component.backToDefaultTool(); 18669 } 18670 onScaling(e) { 18671 this.transform = true; 18672 var obj = e.target, 18673 rx = obj.rx * obj.scaleX, 18674 ry = obj.ry * obj.scaleY; 18675 obj.set({ 18676 'rx': rx, 18677 'ry': ry, 18678 'scaleX': 1, 18679 'scaleY': 1 18680 }); 18681 this.transform = false; 18682 } 18683 shiftShapesSettings(o, k) { 18684 var obj = o, 18685 rx = obj.rx * obj.scaleX * k, 18686 ry = obj.ry * obj.scaleY * k; 18687 obj.set({ 18688 'rx': rx, 18689 'ry': ry, 18690 'scaleX': 1, 18691 'scaleY': 1 18692 }); 18693 obj.set('strokeWidth', o.strokeWidth * k); 18694 } 18695} 18696/* harmony default export */ var tools_Ellipse = (Ellipse_Ellipse); 18697// EXTERNAL MODULE: ./src/editor/images/cursors/triangle.png 18698var triangle = __webpack_require__("+HWN"); 18699var triangle_default = /*#__PURE__*/__webpack_require__.n(triangle); 18700 18701// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Triangle.js 18702 18703 18704 18705class Triangle_Triangle extends tools_Tool { 18706 constructor(component) { 18707 super(component); 18708 this.toolName = 'triangle'; 18709 this.cursor = triangle_default.a; 18710 } 18711 startAnnotation() { 18712 super.startAnnotationForceDraw(); 18713 super.startAnnotation(); 18714 } 18715 stopAnnotation() { 18716 super.stopAnnotationForceDraw(); 18717 super.stopAnnotation(); 18718 } 18719 start(o) {
18720 let component = this.component; 18721 let canvas = this.canvas; 18722 if (o.target !== null) { 18723 // if target is selected object 18724 // canvas.setActiveObject(o.target); 18725 return; 18726 } 18727 this.draw = true; 18728 let point = canvas.getPointer(o.e); 18729 let settings = { 18730 left: point.x, 18731 top: point.y, 18732 width: 0, 18733 height: 0, 18734 ...this.settings 18735 // originX: 'center', originY: 'center' 18736 }; 18737 this.startPoint = point; 18738 this.shape = new dist_fabric["fabric"].Triangle(settings); 18739 this.shape.set({ 18740 toolName: this.toolName, 18741 objectID: component.util.generateID(this.toolName) 18742 }); 18743 canvas.add(this.shape); 18744 } 18745 do(o) { 18746 if (!this.draw) return; 18747 let component = this.component; 18748 let canvas = this.canvas; 18749 let point = canvas.getPointer(o.e); 18750 let prevX = this.shape.get("left"); 18751 let prevWidth = this.shape.get("width"); 18752 let left = Math.min(this.startPoint.x, point.x); 18753 let top = Math.min(this.startPoint.y, point.y); 18754 let width = Math.abs(this.startPoint.x - point.x); 18755 let height = Math.abs(this.startPoint.y - point.y); 18756 if (!component.altKey) { 18757 this.shape.originX = "left"; 18758 this.shape.originY = "top"; 18759 } else { 18760 this.shape.originX = "center"; 18761 this.shape.originY = "center"; 18762 left = this.startPoint.x; 18763 top = this.startPoint.y; 18764 } 18765 if (component.shiftKey) { 18766 if (!component.altKey) { 18767 if (point.x < this.startPoint.x && point.y < this.startPoint.y) { 18768 width = prevX + prevWidth - point.x; 18769 top = this.startPoint.y - width; 18770 } else if (point.x > this.startPoint.x && point.y < this.startPoint.y) { 18771 top = this.startPoint.y - width; 18772 } 18773 } 18774 height = width; 18775 } 18776 this.shape.set({ 18777 left: left, 18778 top: top, 18779 width: width, 18780 height: height 18781 }); 18782 canvas.renderAll(); 18783 } 18784 stop(o) { 18785 if (!this.draw) return; 18786 this.shape.setCoords(); 18787 this.canvas.setActiveObject(this.shape); 18788 this.component.shapeRemoveIfZero(); 18789 18790 // enable history 18791 this.draw = false; 18792 this.transform = false; 18793 this.component.shapeAfterTransforming(); 18794 this.eventsEnable(); 18795 this.component.backToDefaultTool(); 18796 } 18797} 18798/* harmony default export */ var tools_Triangle = (Triangle_Triangle); 18799// EXTERNAL MODULE: ./src/editor/images/cursors/axis.svg 18800var axis = __webpack_require__("UbHR"); 18801var axis_default = /*#__PURE__*/__webpack_require__.n(axis); 18802 18803// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Line.js 18804 18805 18806 18807class Line_Line extends tools_Tool { 18808 constructor(component) { 18809 super(component); 18810 this.toolName = 'line'; 18811 this.cursor = axis_default.a; 18812 } 18813 startAnnotation() { 18814 super.startAnnotationForceDraw(); 18815 super.startAnnotation(); 18816 } 18817 stopAnnotation() { 18818 super.stopAnnotationForceDraw(); 18819 super.stopAnnotation(); 18820 } 18821 onScaling(o) { 18822 super.onScaling(o); 18823 } 18824 start(o) {
18825 let component = this.component; 18826 let canvas = this.canvas; 18827 if (o.target !== null) { 18828 // if target is selected object 18829 // canvas.setActiveObject(o.target); 18830 return; 18831 } 18832 this.draw = true; 18833 let point = canvas.getPointer(o.e); 18834 let coords = [point.x, point.y, point.x, point.y]; 18835 let settings = this.settings; 18836 this.startPoint = point; 18837 this.shape = new dist_fabric["fabric"].Line(coords, settings); 18838 this.shape.set({ 18839 hasBorders: false, 18840 hasRotatingPoint: false, 18841 toolName: this.toolName, 18842 strokeLineJoin: "round", 18843 strokeLineCap: "round", 18844 objectID: component.util.generateID(this.toolName), 18845 managedScaling: true 18846 }); 18847 canvas.add(this.shape); 18848 } 18849 do(o) { 18850 if (!this.draw) return; 18851 let component = this.component; 18852 let canvas = this.canvas; 18853 let point = canvas.getPointer(o.e); 18854 let x1 = this.startPoint.x; 18855 let y1 = this.startPoint.y; 18856 let x2 = point.x; 18857 let y2 = point.y; 18858 if (component.shiftKey) { 18859 let dx = Math.abs(x2 - x1); 18860 let dy = Math.abs(y2 - y1); 18861 if (dx < dy) { 18862 x2 = this.startPoint.x; 18863 } else { 18864 y2 = this.startPoint.y; 18865 } 18866 } 18867 this.shape.set({ 18868 x1: x1, 18869 y1: y1, 18870 x2: x2, 18871 y2: y2 18872 }); 18873 canvas.requestRenderAll(); 18874 } 18875 setupCustomOptions(shape) { 18876 super.setupControlCorners(shape); 18877 shape.set({ 18878 hasBorders: false, 18879 hasRotatingPoint: false, 18880 toolName: this.toolName, 18881 strokeLineJoin: "round", 18882 strokeLineCap: "round", 18883 objectID: this.component.util.generateID(this.toolName), 18884 managedScaling: true 18885 }); 18886 } 18887 stop(o) { 18888 if (!this.draw) return; 18889 this.shape.setCoords(); 18890 this.shape.set({ 18891 startPoint: this.startPoint 18892 }); 18893 this.setupCustomOptions(this.shape); 18894 this.canvas.setActiveObject(this.shape); 18895 this.component.shapeRemoveIfZero(); 18896 18897 // enable history 18898 this.draw = false; 18899 this.transform = false; 18900 this.component.shapeAfterTransforming(); 18901 this.eventsEnable(); 18902 this.component.backToDefaultTool(); 18903 } 18904} 18905/* harmony default export */ var tools_Line = (Line_Line); 18906// CONCATENATED MODULE: ./src/editor/mods/fabric.arrow-arrow.class.js 18907 18908dist_fabric["fabric"].LineArrow = dist_fabric["fabric"].util.createClass(dist_fabric["fabric"].Line, { 18909 type: 'LineArrow', 18910 initialize: function (element, options) { 18911 options || (options = {}); 18912 this.callSuper('initialize', element, options); 18913 }, 18914 toObject: function (sf) { 18915 return dist_fabric["fabric"].util.object.extend(this.callSuper('toObject', sf)); 18916 }, 18917 // _render: function(ctx) { 18918 // this.callSuper('_render', ctx); 18919 18920 // // do not render if width & height are zeros or object is not visible 18921 // if ( (this.width*this.scaleX === 0 && this.height*this.scaleY === 0) || !this.visible) return; 18922 // let p = this.calcLinePoints(); 18923 // let dx = (p.x2 - p.x1); 18924 // let dy = (p.y2 - p.y1) 18925 // let ak = Math.sqrt(dx*dx + dy*dy)/8; 18926 18927 // ctx.save(); 18928 18929 // let xDiff = dx; 18930 // let yDiff = dy; 18931 // let angle = Math.atan2(yDiff, xDiff); 18932 18933 // ctx.translate(dx / 2, dy / 2); 18934 // ctx.rotate(angle); 18935 // ctx.beginPath(); 18936 // //move 10px in front of line to start the arrow so it does not have the square line end showing in front (0,0) 18937 // ctx.moveTo(0, 0); 18938 // ctx.lineTo(-ak, ak/2); 18939 // // ctx.lineTo(-ak+ak/6, 0); 18940 // ctx.moveTo(0,0); 18941 // ctx.lineTo(-ak, -ak/2); 18942 // ctx.closePath(); 18943 // // ctx.fillStyle = this.stroke; 18944 // ctx.fill(); 18945 // ctx.stroke(); 18946 // ctx.restore(); 18947 18948 // } 18949 18950 _render: function (ctx) { 18951 this.callSuper('_render', ctx); 18952 18953 // do not render if width & height are zeros or object is not visible 18954 if (this.width * this.scaleX === 0 && this.height * this.scaleY === 0 || !this.visible) return; 18955 let p = this.calcLinePoints(); 18956 let dx = p.x2 - p.x1; 18957 let dy = p.y2 - p.y1; 18958 let ak = Math.sqrt(dx * dx + dy * dy) / 10; 18959 ctx.save(); 18960 let xDiff = dx; 18961 let yDiff = dy; 18962 let angle = Math.atan2(yDiff, xDiff); 18963 ctx.translate(dx / 2, dy / 2); 18964 ctx.rotate(angle); 18965 ctx.lineJoin = 'miter'; 18966 ctx.lineCap = 'butt'; 18967 // ctx.miterLimit = 10; 18968 18969 ctx.beginPath(); 18970 //move 10px in front of line to start the arrow so it does not have the square line end showing in front (0,0) 18971 18972 // ctx.moveTo(0, 0); 18973 // ctx.lineTo(-ak, ak/2); 18974 // ctx.lineTo(-ak+ak/6, 0); 18975 // ctx.moveTo(0,0); 18976 // ctx.lineTo(-ak, -ak/2); 18977 // ctx.lineTo(-ak+ak/6, 0); 18978 // ctx.lineTo(ak, ak); 18979 // ctx.moveTo(0,0); 18980 // ctx.closePath(); 18981 18982 ctx.moveTo(0, 0); 18983 // ctx.moveTo(-ak, ak / 2 - ak / 6); 18984 ctx.moveTo(-ak, ak / 2); 18985 ctx.lineTo(0, 0); 18986 ctx.lineTo(-ak, -ak / 2); 18987 // ctx.lineTo(-ak + ak / 6, 0); 18988 ctx.lineTo(-ak, ak / 2); 18989 ctx.lineTo(0, 0); 18990 ctx.closePath(); 18991 ctx.fillStyle = this.stroke; 18992 ctx.fill(); 18993 ctx.stroke();
18994 ctx.restore(); 18995 } 18996}); 18997dist_fabric["fabric"].LineArrow.fromObject = function (object, callback) { 18998 callback && callback(new dist_fabric["fabric"].LineArrow([object.x1, object.y1, object.x2, object.y2], object)); 18999}; 19000dist_fabric["fabric"].LineArrow.async = true; 19001// EXTERNAL MODULE: ./src/editor/images/cursors/arrow.svg 19002var arrow = __webpack_require__("bq4O"); 19003var arrow_default = /*#__PURE__*/__webpack_require__.n(arrow); 19004 19005// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Arrow.js 19006 19007 19008 19009 19010class Arrow_Arrow extends tools_Tool { 19011 constructor(component) { 19012 super(component); 19013 this.toolName = "arrow"; 19014 this.cursor = arrow_default.a; 19015 } 19016 startAnnotation() { 19017 super.startAnnotationForceDraw(); 19018 super.startAnnotation(); 19019 } 19020 stopAnnotation() { 19021 super.stopAnnotationForceDraw(); 19022 super.stopAnnotation(); 19023 } 19024 onScaling(o) { 19025 let cornersOptions = { 19026 bl: false, 19027 br: false, 19028 mb: false, 19029 ml: false, 19030 mr: false, 19031 mt: false, 19032 tl: false, 19033 tr: false, 19034 mtr: false 19035 }; 19036 let corner = o.transform.corner; 19037 let flipX = o.transform.originX != o.transform.original.originX; 19038 let flipY = o.transform.originY != o.transform.original.originY; 19039 let oppoCorners = { 19040 tl: 'tr', 19041 tr: 'tl', 19042 bl: 'br', 19043 br: 'bl' 19044 }; 19045 let cornerBro = { 19046 tl: 'br', 19047 br: 'tl', 19048 tr: 'bl', 19049 bl: 'tr' 19050 }; 19051 if (flipX && !flipY || !flipX && flipY) { 19052 cornersOptions[oppoCorners[corner]] = true; 19053 cornersOptions[cornerBro[oppoCorners[corner]]] = true; 19054 console.log(flipX, flipY, oppoCorners[corner], cornerBro[oppoCorners[corner]]); 19055 } else { 19056 cornersOptions[corner] = true; 19057 cornersOptions[cornerBro[corner]] = true; 19058 console.log(flipX, flipY, corner, cornerBro[corner]); 19059 } 19060 o.target.setControlsVisibility(cornersOptions); 19061 this.transform = true; 19062 var obj = o.target, 19063 w = obj.width * obj.scaleX, 19064 h = obj.height * obj.scaleY; //, s = obj.strokeWidth; 19065 19066 obj.set({ 19067 'height': h, 19068 'width': w, 19069 'scaleX': 1, 19070 'scaleY': 1 19071 }); 19072 o.target.set({ 19073 fill: "rgba(255,255,255,0)" 19074 }); 19075 // super.onScaling(o) 19076 } 19077 shiftShapesSettings(o, k) { 19078 var obj = o, 19079 w = obj.width * obj.scaleX * k, 19080 h = obj.height * obj.scaleY * k; //, s = obj.strokeWidth; 19081 19082 obj.set({ 19083 'height': h, 19084 'width': w, 19085 'scaleX': 1, 19086 'scaleY': 1 19087 }); 19088 obj.set({ 19089 fill: "rgba(255,255,255,0)" 19090 }); 19091 } 19092 start(o) {
19093 let component = this.component; 19094 let canvas = this.canvas; 19095 if (o.target !== null) { 19096 // if target is selected object 19097 // canvas.setActiveObject(o.target); 19098 return; 19099 } 19100 this.draw = true; 19101 let point = canvas.getPointer(o.e); 19102 let coords = [point.x, point.y, point.x, point.y]; 19103 let settings = this.settings; 19104 this.startPoint = point; 19105 this.shape = new dist_fabric["fabric"].LineArrow(coords, settings); 19106 this.shape.set({ 19107 startPoint: this.startPoint, 19108 hasBorders: true, 19109 hasRotatingPoint: false, 19110 toolName: this.toolName, 19111 strokeLineJoin: "miter", 19112 strokeLineCap: "round", 19113 strokeMiterLimit: 10, 19114 objectID: component.util.generateID(this.toolName) 19115 }); 19116 canvas.add(this.shape); 19117 } 19118 do(o) { 19119 if (!this.draw) return; 19120 let component = this.component; 19121 let canvas = this.canvas; 19122 let point = canvas.getPointer(o.e); 19123 let x1 = this.startPoint.x; 19124 let y1 = this.startPoint.y; 19125 let x2 = point.x; 19126 let y2 = point.y; 19127 if (component.shiftKey) { 19128 let dx = Math.abs(x2 - x1); 19129 let dy = Math.abs(y2 - y1); 19130 if (dx < dy) { 19131 x2 = this.startPoint.x; 19132 } else { 19133 y2 = this.startPoint.y; 19134 } 19135 } 19136 this.shape.set({ 19137 x1: x1, 19138 y1: y1, 19139 x2: x2, 19140 y2: y2 19141 }); 19142 canvas.requestRenderAll(); 19143 } 19144 stop(o) { 19145 if (!this.draw) return; 19146 let point = this.canvas.getPointer(o.e); 19147 let x1 = this.startPoint.x; 19148 let y1 = this.startPoint.y; 19149 let x2 = point.x; 19150 let y2 = point.y; 19151 let cornersOptions = { 19152 bl: false, 19153 br: false, 19154 mb: false, 19155 ml: false, 19156 mr: false, 19157 mt: false, 19158 tl: false, 19159 tr: false, 19160 mtr: false 19161 }; 19162 if (x1 <= x2 && y1 <= y2) { 19163 cornersOptions.tl = true; 19164 cornersOptions.br = true; 19165 } else if (x1 >= x2 && y1 <= y2) { 19166 cornersOptions.tr = true; 19167 cornersOptions.bl = true; 19168 } else if (x1 <= x2 && y1 >= y2) { 19169 cornersOptions.tr = true; 19170 cornersOptions.bl = true; 19171 } else if (x1 >= x2 && y1 >= y2) { 19172 cornersOptions.tl = true; 19173 cornersOptions.br = true; 19174 } 19175 this.shape.setControlsVisibility(cornersOptions); 19176 this.shape.setCoords(); 19177 this.canvas.setActiveObject(this.shape); 19178 this.component.shapeRemoveIfZero(); 19179 19180 // enable history 19181 this.draw = false; 19182 this.transform = false; 19183 this.component.shapeAfterTransforming(); 19184 this.eventsEnable(); 19185 // this.component.backToDefaultTool(); 19186 } 19187} 19188/* harmony default export */ var tools_Arrow = (Arrow_Arrow); 19189// CONCATENATED MODULE: ./src/editor/mods/fabric.itext.class.js 19190 19191 19192 19193// Change the padding logic to include background-color in padding area 19194dist_fabric["fabric"].IText.prototype.set({ 19195 _getNonTransformedDimensions() { 19196 // Object dimensions 19197 return new dist_fabric["fabric"].Point(this.width, this.height).scalarAdd(this.padding * 2); 19198 }, 19199 _calculateCurrentDimensions() { 19200 // Controls dimensions 19201 return dist_fabric["fabric"].util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true).scalarAdd(this.padding * 2); 19202 } 19203}); 19204 19205// Override text object render method to draw permanent border 19206var originalRender = dist_fabric["fabric"].IText.prototype._render; 19207dist_fabric["fabric"].IText.prototype._render = function (ctx) { 19208 if (dist_fabric["fabric"].IText.prototype._screenclippedItext) originalRender.call(this, ctx); 19209 var w = this.width + this.padding * 2, 19210 h = this.height + this.padding * 2, 19211 x = -(this.width / 2) - this.padding, 19212 y = -(this.height / 2) - this.padding; 19213 ctx.beginPath(); 19214 ctx.moveTo(x, y); 19215 ctx.lineTo(x + w, y); 19216 ctx.lineTo(x + w, y + h); 19217 ctx.lineTo(x, y + h); 19218 ctx.lineTo(x, y); 19219 ctx.closePath(); 19220 var stroke = ctx.strokeStyle; 19221 ctx.strokeStyle = Object(util["d" /* getBorderColor */])(this.backgroundColor); 19222 ctx.stroke(); 19223 ctx.strokeStyle = stroke; 19224}; 19225dist_fabric["fabric"].IText.prototype.onKeyDown = function (onKeyDown) { 19226 if (dist_fabric["fabric"].IText.prototype._screenclippedItext) { 19227 return onKeyDown; 19228 } 19229 return function (e) { 19230 if (e.keyCode == 32) { 19231 e.stopImmediatePropagation(); 19232 // e.preventDefault(); 19233 console.log('space pressed'); 19234 } else { 19235 onKeyDown.call(this, e); 19236 } 19237 }; 19238}(dist_fabric["fabric"].IText.prototype.onKeyDown); 19239dist_fabric["fabric"].IText.prototype._screenclippedItext = true; 19240// EXTERNAL MODULE: ./src/editor/mods/font.list.js 19241var font_list = __webpack_require__("HpD1"); 19242 19243// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/ArrowText.js 19244 19245 19246 19247 19248 19249 19250 19251 19252class ArrowText_ArrowText extends tools_Tool { 19253 constructor(component) { 19254 super(component); 19255 this.toolName = "arrow"; 19256 this.textToolName = "text"; 19257 this.cursor = arrow_default.a; 19258 this.onEditingEntered = this.onEditingEntered.bind(this); 19259 this.textSettings = { 19260 left: 0, 19261 top: 0, 19262 fontFamily: 'Arial', 19263 editingBorderColor: '#fff', 19264 selectionColor: mods_constants["c" /* SELECTION_COLORS */].white, 19265 selectable: true, 19266 perPixelTargetFind: false, 19267 // textBgColorDisabled: false, 19268 fontSize: 24 19269 }; 19270 } 19271 startAnnotation() { 19272 super.startAnnotationForceDraw(); 19273 super.startAnnotation(); 19274 } 19275 stopAnnotation() { 19276 super.stopAnnotationForceDraw(); 19277 super.stopAnnotation(); 19278 } 19279 start(o) {
19280 let component = this.component; 19281 let canvas = this.canvas; 19282 if (o.target !== null) { 19283 // if target is selected object 19284 // canvas.setActiveObject(o.target); 19285 return; 19286 } 19287 this.draw = true; 19288 let point = canvas.getPointer(o.e); 19289 let coords = [point.x, point.y, point.x, point.y]; 19290 let arrowSettings = this.settings.arrow; 19291 this.startPoint = point; 19292 this.shape = new dist_fabric["fabric"].LineArrow(coords, arrowSettings); 19293 this.shape.set({ 19294 startPoint: this.startPoint, 19295 toolName: this.toolName, 19296 hasBorders: true, 19297 hasRotatingPoint: false, 19298 strokeLineJoin: "miter", 19299 strokeLineCap: "round", 19300 strokeMiterLimit: 10, 19301 objectID: component.util.generateID(this.toolName) 19302 }); 19303 19304 // text 19305 19306 canvas.add(this.shape); 19307 } 19308 do(o) { 19309 if (!this.draw) return; 19310 19311 // if (o.target !== null) { // if target is selected object 19312 // // canvas.setActiveObject(o.target); 19313 // return; 19314 // } 19315 19316 let component = this.component; 19317 let canvas = this.canvas; 19318 let point = canvas.getPointer(o.e); 19319 let x1 = this.startPoint.x; 19320 let y1 = this.startPoint.y; 19321 let x2 = point.x; 19322 let y2 = point.y; 19323 if (component.shiftKey) { 19324 let dx = Math.abs(x2 - x1); 19325 let dy = Math.abs(y2 - y1); 19326 if (dx < dy) { 19327 x2 = this.startPoint.x; 19328 } else { 19329 y2 = this.startPoint.y; 19330 } 19331 } 19332 this.shape.set({ 19333 x1: x1, 19334 y1: y1, 19335 x2: x2, 19336 y2: y2 19337 }); 19338 canvas.requestRenderAll(); 19339 } 19340 stop(o) { 19341 if (!this.draw) return; 19342 let x1 = this.startPoint.x; 19343 let y1 = this.startPoint.y; 19344 let endPoint = this.canvas.getPointer(o.e); 19345 let x2 = endPoint.x; 19346 let y2 = endPoint.y; 19347 let cornersOptions = { 19348 bl: false, 19349 br: false, 19350 mb: false, 19351 ml: false, 19352 mr: false, 19353 mt: false, 19354 tl: false, 19355 tr: false, 19356 mtr: false 19357 }; 19358 if (x1 <= x2 && y1 <= y2) { 19359 cornersOptions.tl = true; 19360 cornersOptions.br = true; 19361 } else if (x1 >= x2 && y1 <= y2) { 19362 cornersOptions.tr = true; 19363 cornersOptions.bl = true; 19364 } else if (x1 <= x2 && y1 >= y2) { 19365 cornersOptions.tr = true; 19366 cornersOptions.bl = true; 19367 } else if (x1 >= x2 && y1 >= y2) { 19368 cornersOptions.tl = true; 19369 cornersOptions.br = true; 19370 } 19371 this.shape.setControlsVisibility(cornersOptions); 19372 this.shape.setCoords(); 19373 this.shape.setCoords(); 19374 this.shape.set({ 19375 startPoint: this.startPoint 19376 }); 19377 let zero = x1 == x2 || y1 == y2; 19378 if (!zero) { 19379 this.addTextShape(o); 19380 this.canvas.setActiveObject(this.textShape); 19381 this.textShape.enterEditing(); 19382 } else { 19383 this.canvas.remove(this.shape); 19384 } 19385 19386 // enable history 19387 this.draw = false; 19388 this.transform = false; 19389 this.component.shapeAfterTransforming(); 19390 this.eventsEnable(); 19391 } 19392 fixFontFamily(set) { 19393 let o = { 19394 ...set 19395 }; 19396 if (set.hasOwnProperty("fontFamily")) { 19397 o.fontFamily = font_list["a" /* default */][parseFloat(set.fontFamily)]; 19398 } 19399 return o; 19400 } 19401 addTextShape(o) { 19402 let x1 = this.startPoint.x; 19403 let y1 = this.startPoint.y; 19404 let endPoint = this.canvas.getPointer(o.e); 19405 let x2 = endPoint.x; 19406 let y2 = endPoint.y; 19407 let os = { 19408 ...this.fixFontFamily(this.settings.text), 19409 ...this.textSettings 19410 }; 19411 this.textShape = new dist_fabric["fabric"].IText('Type something', os); 19412 19413 // Initiate a shadow instance 19414 var shadow = new dist_fabric["fabric"].Shadow({ 19415 color: mods_constants["b" /* COLORS */].black, 19416 blur: 8 19417 }); 19418 this.textShape.set({ 19419 left: x1 - this.textShape.get('width') / 2, 19420 top: y1 - this.textShape.get('height') / 2, 19421 selectionStart: 0, 19422 selectionEnd: this.textShape.get("text").length, 19423 toolName: this.textToolName, 19424 objectID: this.component.util.generateID(this.textToolName), 19425 managedScaling: true, 19426 backgroundColor: this.shape.stroke, 19427 shadow: this.textShape.fill === mods_constants["b" /* COLORS */].white && this.shape.stroke === mods_constants["b" /* COLORS */].transparent ? shadow : null, 19428 fill: Object(util["g" /* getTextColor */])(this.shape.stroke) 19429 }); 19430 this.canvas.add(this.textShape); 19431 this.eventsEnable(); 19432 this.textShape.on("editing:entered", e => { 19433 if (this.textShape.hasOwnProperty("editCount")) { 19434 this.textShape.editCount++; 19435 } else { 19436 this.textShape.editCount = 0; 19437 } 19438 }); 19439 // remove if empty 19440 this.textShape.on("editing:exited", e => { 19441 if (this.textShape.text.length === 0) { 19442 this.canvas.remove(this.textShape); 19443 this.canvas.remove(this.shape); 19444 } 19445 }); 19446 } 19447 eventsEnable(o) { 19448 this.eventsEnableArrow(); 19449 this.eventsEnableText(); 19450 } 19451 eventsDisable(o) { 19452 this.eventsEnableArrow(); 19453 this.eventsEnableText(); 19454 } 19455 onScaling(o) {
19456 let cornersOptions = { 19457 bl: false, 19458 br: false, 19459 mb: false, 19460 ml: false, 19461 mr: false, 19462 mt: false, 19463 tl: false, 19464 tr: false, 19465 mtr: false 19466 }; 19467 let corner = o.transform.corner; 19468 let flipX = o.transform.originX != o.transform.original.originX; 19469 let flipY = o.transform.originY != o.transform.original.originY; 19470 let oppoCorners = { 19471 tl: 'tr', 19472 tr: 'tl', 19473 bl: 'br', 19474 br: 'bl' 19475 }; 19476 let cornerBro = { 19477 tl: 'br', 19478 br: 'tl', 19479 tr: 'bl', 19480 bl: 'tr' 19481 }; 19482 if (flipX && !flipY || !flipX && flipY) { 19483 cornersOptions[oppoCorners[corner]] = true; 19484 cornersOptions[cornerBro[oppoCorners[corner]]] = true; 19485 console.log(flipX, flipY, oppoCorners[corner], cornerBro[oppoCorners[corner]]); 19486 } else { 19487 cornersOptions[corner] = true; 19488 cornersOptions[cornerBro[corner]] = true; 19489 console.log(flipX, flipY, corner, cornerBro[corner]); 19490 } 19491 o.target.setControlsVisibility(cornersOptions); 19492 this.transform = true; 19493 var obj = o.target, 19494 w = obj.width * obj.scaleX, 19495 h = obj.height * obj.scaleY; //, s = obj.strokeWidth; 19496 19497 obj.set({ 19498 'height': h, 19499 'width': w, 19500 'scaleX': 1, 19501 'scaleY': 1 19502 }); 19503 o.target.set({ 19504 fill: "rgba(255,255,255,0)" 19505 }); 19506 // super.onScaling(o) 19507 } 19508 eventsEnableArrow(o) { 19509 let shape = o || this.shape; 19510 shape.on("scaling", this.onScaling); 19511 shape.on("moving", this.onMoving); 19512 shape.on("moved", this.onMoved); 19513 shape.on("special:cloning", this.onCloning); 19514 shape.on("editing:entered", this.onEditingEntered);
19515 shape.on("special:settings", this.onSettings); 19516 } 19517 eventsDisableArrow(o) { 19518 let shape = o || this.shape; 19519 shape.off("scaling", this.onScaling); 19520 shape.off("moving", this.onMoving); 19521 shape.off("moved", this.onMoved); 19522 shape.off("special:cloning", this.onCloning); 19523 shape.off("editing:entered", this.onEditingEntered); 19524 shape.off("special:settings", this.onSettings); 19525 } 19526 eventsEnableText(o) { 19527 let shape = o || this.textShape; 19528 shape.on("scaling", super.onScaling); 19529 shape.on("moving", this.onMoving); 19530 shape.on("moved", this.onMoved); 19531 shape.on("special:cloning", this.onCloning); 19532 shape.on("editing:entered", this.onEditingEntered); 19533 shape.on("special:settings", this.onSettings); 19534 } 19535 eventsDisableText(o) { 19536 let shape = o || this.textShape; 19537 shape.off("scaling", super.onScaling); 19538 shape.off("moving", this.onMoving); 19539 shape.off("moved", this.onMoved); 19540 shape.off("special:cloning", this.onCloning); 19541 shape.off("editing:entered", this.onEditingEntered);
19542 shape.off("special:settings", this.onSettings); 19543 } 19544 onEditingEntered() { 19545 let o = this.canvas.getActiveObject(); 19546 o.set({ 19547 selectionColor: Object(util["f" /* getSelectionColor */])('fill', o.fill) 19548 }); 19549 o.selectAll(); 19550 } 19551} 19552/* harmony default export */ var tools_ArrowText = (ArrowText_ArrowText); 19553// EXTERNAL MODULE: ./src/editor/images/cursors/textbox.svg 19554var textbox = __webpack_require__("aTqI"); 19555var textbox_default = /*#__PURE__*/__webpack_require__.n(textbox); 19556 19557// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Text.js 19558 19559 19560 19561 19562 19563 19564 19565class Text_Text extends tools_Tool { 19566 constructor(component) { 19567 super(component); 19568 this.toolName = "text"; 19569 this.cursor = textbox_default.a; 19570 this.hoverCursor = textbox_default.a; 19571 this.onEditingEntered = this.onEditingEntered.bind(this); 19572 this.removeIfTextEmpty = this.removeIfTextEmpty.bind(this); 19573 this.textSettings = { 19574 left: 0, 19575 top: 0, 19576 fontFamily: 'Arial', 19577 // editingBorderColor: '#fff', 19578 selectionColor: mods_constants["c" /* SELECTION_COLORS */].blue, 19579 selectable: true, 19580 perPixelTargetFind: false, 19581 originX: "left", 19582 originY: "top" 19583 }; 19584 } 19585 stopAnnotation() {
19586 let canvas = this.canvas; 19587 canvas.off("mouse:up", this.do); 19588 super.stopAnnotationForceDraw(); 19589 // super.stopAnnotation(); 19590 } 19591 startAnnotation() { 19592 let canvas = this.canvas; 19593 canvas.on("mouse:up", this.do); 19594 this.setCursor(); 19595 super.startAnnotationForceDraw(); 19596 // super.startAnnotation(); 19597 } 19598 fixFontFamily(set) { 19599 let o = { 19600 ...set 19601 }; 19602 if (set.hasOwnProperty("fontFamily")) { 19603 o.fontFamily = font_list["a" /* default */][set.fontFamily]; 19604 } 19605 return o; 19606 } 19607 do(o) { 19608 var _o$transform; 19609 let component = this.component; 19610 let canvas = this.canvas; 19611 if (((_o$transform = o.transform) === null || _o$transform === void 0 ? void 0 : _o$transform.action) === 'drag' && o.target.toolName !== 'text') { 19612 return; 19613 } 19614 if (o.target !== null && o.target.toolName === 'text') { 19615 // if target is selected object 19616 // canvas.setActiveObject(o.target); 19617 o.target.enterEditing(); 19618 return; 19619 } 19620 let current = canvas.getActiveObject() || component.getLastShape(); 19621 if (current && current.toolName == "text" && current.discardInsteadOfCreation) { 19622 current.set("discardInsteadOfCreation", false); 19623 canvas.discardActiveObject(); 19624 return; 19625 } 19626 let point = canvas.getPointer(o); 19627 let sets = this.fixFontFamily(this.settings); 19628 19629 // Initiate a shadow instance 19630 var shadow = new dist_fabric["fabric"].Shadow({ 19631 color: mods_constants["b" /* COLORS */].black, 19632 blur: 8 19633 }); 19634 let os = { 19635 ...this.textSettings, 19636 left: point.x, 19637 top: point.y, 19638 shadow: this.settings.fill === mods_constants["b" /* COLORS */].white && this.settings.backgroundColor === mods_constants["b" /* COLORS */].transparent ? shadow : null, 19639 ...sets 19640 }; 19641 this.shape = new dist_fabric["fabric"].IText('Type something', os); 19642 this.shape.set({ 19643 selectionStart: 0, 19644 selectionEnd: this.shape.get("text").length, 19645 toolName: this.toolName, 19646 objectID: component.util.generateID(this.toolName), 19647 managedScaling: true 19648 }); 19649 canvas.add(this.shape); 19650 canvas.setActiveObject(this.shape); 19651 // text after creation 19652 component.shapeAfterTransforming(); 19653 this.eventsEnable(); 19654 let shape = this.shape; 19655 // count edits to remove on escape pressed in Canvas component 19656 this.shape.on("event:changed", e => {}); 19657 this.shape.on("editing:exited", function (e) { 19658 this.set("discardInsteadOfCreation", true); 19659 }); 19660 this.shape.on("editing:entered", e => { 19661 if (shape.hasOwnProperty("editCount")) { 19662 shape.editCount++; 19663 } else { 19664 shape.editCount = 0; 19665 } 19666 }); 19667 // remove if empty 19668 this.shape.on("editing:exited", e => { 19669 if (shape.text.length === 0) { 19670 // || shape.text=='Type something') { 19671 canvas.remove(shape); 19672 } 19673 }); 19674 this.shape.enterEditing(); 19675 } 19676 eventsEnable(o) { 19677 let shape = o || this.shape; 19678 shape.on("scaling", this.onScaling); 19679 shape.on("moving", this.onMoving); 19680 shape.on("moved", this.onMoved); 19681 shape.on("special:cloning", this.onCloning); 19682 shape.on("editing:entered", this.onEditingEntered);
19683 shape.on("special:settings", this.onSettings); 19684 } 19685 eventsDisable(o) { 19686 let shape = o || this.shape; 19687 shape.off("scaling", this.onScaling); 19688 shape.off("moving", this.onMoving); 19689 shape.off("moved", this.onMoved); 19690 shape.off("special:cloning", this.onCloning); 19691 shape.off("editing:entered", this.onEditingEntered); 19692 shape.off("special:settings", this.onSettings); 19693 } 19694 onSettings(e) { 19695 let shape = e.target; 19696 e.settings = this.fixFontFamily(e.settings); 19697 super.onSettings(e); 19698 shape.canvas.requestRenderAll(); 19699 } 19700 removeIfTextEmpty(o) { 19701 let de = o.deselected; 19702 // if (typeof(o.deselected)==='undefined') return; 19703 let canvas = this.canvas; 19704 o.deselected.forEach(shape => { 19705 if (shape.get("type") === 'i-text' && shape.get("type") === '') { 19706 canvas.remove(shape); 19707 canvas.requestRenderAll(); 19708 } 19709 }); 19710 } 19711 onEditingEntered() { 19712 let o = this.canvas.getActiveObject(); 19713 o.set({ 19714 selectionColor: Object(util["f" /* getSelectionColor */])('fill', o.fill) 19715 }); 19716 o.selectAll(); 19717 } 19718} 19719/* harmony default export */ var tools_Text = (Text_Text); 19720// CONCATENATED MODULE: ./src/editor/mods/stackblur.js 19721/* 19722StackBlur - a fast almost Gaussian Blur For Canvas 19723Version: 0.6 19724Author: Mario Klingemann 19725Contact: [email protected] 19726Website: http://www.quasimondo.com/StackBlurForCanvas 19727Twitter: @quasimondo 19728In case you find this class useful - especially in commercial projects - 19729I am not totally unhappy for a small donation to my PayPal account 19730[email protected] 19731Or support me on flattr: 19732https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript 19733Copyright (c) 2010 Mario Klingemann 19734Permission is hereby granted, free of charge, to any person 19735obtaining a copy of this software and associated documentation 19736files (the "Software"), to deal in the Software without 19737restriction, including without limitation the rights to use, 19738copy, modify, merge, publish, distribute, sublicense, and/or sell 19739copies of the Software, and to permit persons to whom the 19740Software is furnished to do so, subject to the following 19741conditions: 19742The above copyright notice and this permission notice shall be 19743included in all copies or substantial portions of the Software. 19744THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 19745EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 19746OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19747NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19748HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 19749WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 19750FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 19751OTHER DEALINGS IN THE SOFTWARE. 19752*/ 19753 19754var mul_table = [512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512, 505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405, 399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328, 324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271, 268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456, 451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388, 385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335, 332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292, 289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259]; 19755var shg_table = [9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24]; 19756function stackBlurImage(imageIDOrElement, canvasIDOrElement, radius, blurAlphaChannel) { 19757 var img = stackBlurGetElement(imageIDOrElement);
19758 var w = img.naturalWidth; 19759 var h = img.naturalHeight; 19760 var canvas = stackBlurGetElement(canvasIDOrElement); 19761 canvas.style.width = w + "px"; 19762 canvas.style.height = h + "px"; 19763 canvas.width = w; 19764 canvas.height = h; 19765 var context = canvas.getContext("2d"); 19766 context.clearRect(0, 0, w, h); 19767 context.drawImage(img, 0, 0); 19768 if (isNaN(radius) || radius < 1) return; 19769 if (blurAlphaChannel) stackBlurCanvasRGBA(canvasIDOrElement, 0, 0, w, h, radius);else stackBlurCanvasRGB(canvasIDOrElement, 0, 0, w, h, radius); 19770} 19771function stackBlurCanvasRGBA(canvasIDOrElement, top_x, top_y, width, height, radius) { 19772 var canvas = stackBlurGetElement(canvasIDOrElement); 19773 var context = canvas.getContext("2d"); 19774 var imageData; 19775 try { 19776 try { 19777 imageData = context.getImageData(top_x, top_y, width, height); 19778 } catch (e) { 19779 // NOTE: this part is supposedly only needed if you want to work with local files 19780 // so it might be okay to remove the whole try/catch block and just use 19781 // imageData = context.getImageData( top_x, top_y, width, height );
19782 try { 19783 imageData = context.getImageData(top_x, top_y, width, height); 19784 } catch (e) { 19785 alert("Cannot access local image"); 19786 throw new Error("unable to access local image data: " + e); 19787 return; 19788 } 19789 } 19790 } catch (e) { 19791 alert("Cannot access image"); 19792 throw new Error("unable to access image data: " + e); 19793 } 19794 imageData = stackBlurImageDataRGBA(imageData, radius); 19795 context.putImageData(imageData, top_x, top_y); 19796} 19797function stackBlurImageDataRGBA(imageData, radius) { 19798 if (isNaN(radius) || radius < 1) return; 19799 radius |= 0; 19800 var pixels = imageData.data; 19801 var width = imageData.width; 19802 var height = imageData.height; 19803 var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum, r_out_sum, g_out_sum, b_out_sum, a_out_sum, r_in_sum, g_in_sum, b_in_sum, a_in_sum, pr, pg, pb, pa, rbs; 19804 var div = radius + radius + 1; 19805 var w4 = width << 2; 19806 var widthMinus1 = width - 1; 19807 var heightMinus1 = height - 1; 19808 var radiusPlus1 = radius + 1; 19809 var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2; 19810 var stackStart = new BlurStack(); 19811 var stack = stackStart; 19812 for (i = 1; i < div; i++) { 19813 stack = stack.next = new BlurStack(); 19814 if (i == radiusPlus1) var stackEnd = stack; 19815 } 19816 stack.next = stackStart; 19817 var stackIn = null; 19818 var stackOut = null; 19819 yw = yi = 0; 19820 var mul_sum = mul_table[radius]; 19821 var shg_sum = shg_table[radius]; 19822 for (y = 0; y < height; y++) { 19823 r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0; 19824 r_out_sum = radiusPlus1 * (pr = pixels[yi]); 19825 g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]); 19826 b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]); 19827 a_out_sum = radiusPlus1 * (pa = pixels[yi + 3]); 19828 r_sum += sumFactor * pr; 19829 g_sum += sumFactor * pg; 19830 b_sum += sumFactor * pb; 19831 a_sum += sumFactor * pa; 19832 stack = stackStart; 19833 for (i = 0; i < radiusPlus1; i++) { 19834 stack.r = pr; 19835 stack.g = pg; 19836 stack.b = pb; 19837 stack.a = pa; 19838 stack = stack.next; 19839 } 19840 for (i = 1; i < radiusPlus1; i++) { 19841 p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2); 19842 r_sum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i); 19843 g_sum += (stack.g = pg = pixels[p + 1]) * rbs; 19844 b_sum += (stack.b = pb = pixels[p + 2]) * rbs; 19845 a_sum += (stack.a = pa = pixels[p + 3]) * rbs; 19846 r_in_sum += pr; 19847 g_in_sum += pg; 19848 b_in_sum += pb; 19849 a_in_sum += pa; 19850 stack = stack.next; 19851 } 19852 stackIn = stackStart; 19853 stackOut = stackEnd; 19854 for (x = 0; x < width; x++) { 19855 pixels[yi] = r_sum * mul_sum >> shg_sum; 19856 pixels[yi + 1] = g_sum * mul_sum >> shg_sum; 19857 pixels[yi + 2] = b_sum * mul_sum >> shg_sum; 19858 pixels[yi + 3] = a_sum * mul_sum >> shg_sum; 19859 r_sum -= r_out_sum; 19860 g_sum -= g_out_sum; 19861 b_sum -= b_out_sum; 19862 a_sum -= a_out_sum; 19863 r_out_sum -= stackIn.r; 19864 g_out_sum -= stackIn.g; 19865 b_out_sum -= stackIn.b; 19866 a_out_sum -= stackIn.a; 19867 p = yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1) << 2; 19868 r_in_sum += stackIn.r = pixels[p]; 19869 g_in_sum += stackIn.g = pixels[p + 1]; 19870 b_in_sum += stackIn.b = pixels[p + 2]; 19871 a_in_sum += stackIn.a = pixels[p + 3]; 19872 r_sum += r_in_sum; 19873 g_sum += g_in_sum; 19874 b_sum += b_in_sum; 19875 a_sum += a_in_sum; 19876 stackIn = stackIn.next; 19877 r_out_sum += pr = stackOut.r; 19878 g_out_sum += pg = stackOut.g; 19879 b_out_sum += pb = stackOut.b; 19880 a_out_sum += pa = stackOut.a; 19881 r_in_sum -= pr; 19882 g_in_sum -= pg; 19883 b_in_sum -= pb; 19884 a_in_sum -= pa; 19885 stackOut = stackOut.next; 19886 yi += 4; 19887 } 19888 yw += width; 19889 } 19890 for (x = 0; x < width; x++) { 19891 g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0; 19892 yi = x << 2; 19893 r_out_sum = radiusPlus1 * (pr = pixels[yi]); 19894 g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]); 19895 b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]); 19896 a_out_sum = radiusPlus1 * (pa = pixels[yi + 3]); 19897 r_sum += sumFactor * pr; 19898 g_sum += sumFactor * pg; 19899 b_sum += sumFactor * pb; 19900 a_sum += sumFactor * pa; 19901 stack = stackStart; 19902 for (i = 0; i < radiusPlus1; i++) { 19903 stack.r = pr; 19904 stack.g = pg; 19905 stack.b = pb; 19906 stack.a = pa; 19907 stack = stack.next; 19908 } 19909 yp = width; 19910 for (i = 1; i <= radius; i++) { 19911 yi = yp + x << 2;
19912 r_sum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i); 19913 g_sum += (stack.g = pg = pixels[yi + 1]) * rbs; 19914 b_sum += (stack.b = pb = pixels[yi + 2]) * rbs; 19915 a_sum += (stack.a = pa = pixels[yi + 3]) * rbs; 19916 r_in_sum += pr; 19917 g_in_sum += pg; 19918 b_in_sum += pb; 19919 a_in_sum += pa; 19920 stack = stack.next; 19921 if (i < heightMinus1) { 19922 yp += width; 19923 } 19924 } 19925 yi = x; 19926 stackIn = stackStart; 19927 stackOut = stackEnd; 19928 for (y = 0; y < height; y++) { 19929 p = yi << 2; 19930 pixels[p + 3] = pa = a_sum * mul_sum >> shg_sum; 19931 if (pa > 0) { 19932 pa = 255 / pa; 19933 pixels[p] = (r_sum * mul_sum >> shg_sum) * pa; 19934 pixels[p + 1] = (g_sum * mul_sum >> shg_sum) * pa; 19935 pixels[p + 2] = (b_sum * mul_sum >> shg_sum) * pa; 19936 } else { 19937 pixels[p] = pixels[p + 1] = pixels[p + 2] = 0; 19938 } 19939 r_sum -= r_out_sum; 19940 g_sum -= g_out_sum; 19941 b_sum -= b_out_sum; 19942 a_sum -= a_out_sum; 19943 r_out_sum -= stackIn.r; 19944 g_out_sum -= stackIn.g; 19945 b_out_sum -= stackIn.b; 19946 a_out_sum -= stackIn.a; 19947 p = x + ((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width << 2; 19948 r_sum += r_in_sum += stackIn.r = pixels[p]; 19949 g_sum += g_in_sum += stackIn.g = pixels[p + 1]; 19950 b_sum += b_in_sum += stackIn.b = pixels[p + 2]; 19951 a_sum += a_in_sum += stackIn.a = pixels[p + 3]; 19952 stackIn = stackIn.next; 19953 r_out_sum += pr = stackOut.r; 19954 g_out_sum += pg = stackOut.g; 19955 b_out_sum += pb = stackOut.b; 19956 a_out_sum += pa = stackOut.a; 19957 r_in_sum -= pr; 19958 g_in_sum -= pg; 19959 b_in_sum -= pb; 19960 a_in_sum -= pa; 19961 stackOut = stackOut.next; 19962 yi += width; 19963 } 19964 } 19965 return imageData; 19966} 19967function stackBlurCanvasRGB(canvasIDOrElement, top_x, top_y, width, height, radius) { 19968 if (isNaN(radius) || radius < 1) return; 19969 radius |= 0; 19970 var canvas = stackBlurGetElement(canvasIDOrElement); 19971 var context = canvas.getContext("2d"); 19972 var imageData; 19973 try { 19974 try { 19975 imageData = context.getImageData(top_x, top_y, width, height); 19976 } catch (e) { 19977 // NOTE: this part is supposedly only needed if you want to work with local files 19978 // so it might be okay to remove the whole try/catch block and just use 19979 // imageData = context.getImageData( top_x, top_y, width, height );
19980 try { 19981 imageData = context.getImageData(top_x, top_y, width, height); 19982 } catch (e) { 19983 alert("Cannot access local image"); 19984 throw new Error("unable to access local image data: " + e); 19985 return; 19986 } 19987 } 19988 } catch (e) { 19989 alert("Cannot access image"); 19990 throw new Error("unable to access image data: " + e); 19991 } 19992 var pixels = imageData.data; 19993 var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, r_out_sum, g_out_sum, b_out_sum, r_in_sum, g_in_sum, b_in_sum, pr, pg, pb, rbs; 19994 var div = radius + radius + 1; 19995 var w4 = width << 2; 19996 var widthMinus1 = width - 1; 19997 var heightMinus1 = height - 1; 19998 var radiusPlus1 = radius + 1; 19999 var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2; 20000 var stackStart = new BlurStack(); 20001 var stack = stackStart; 20002 for (i = 1; i < div; i++) { 20003 stack = stack.next = new BlurStack(); 20004 if (i == radiusPlus1) var stackEnd = stack; 20005 } 20006 stack.next = stackStart; 20007 var stackIn = null; 20008 var stackOut = null; 20009 yw = yi = 0; 20010 var mul_sum = mul_table[radius]; 20011 var shg_sum = shg_table[radius]; 20012 for (y = 0; y < height; y++) { 20013 r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0; 20014 r_out_sum = radiusPlus1 * (pr = pixels[yi]); 20015 g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]); 20016 b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]); 20017 r_sum += sumFactor * pr; 20018 g_sum += sumFactor * pg; 20019 b_sum += sumFactor * pb; 20020 stack = stackStart; 20021 for (i = 0; i < radiusPlus1; i++) { 20022 stack.r = pr; 20023 stack.g = pg; 20024 stack.b = pb; 20025 stack = stack.next; 20026 } 20027 for (i = 1; i < radiusPlus1; i++) { 20028 p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2); 20029 r_sum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i); 20030 g_sum += (stack.g = pg = pixels[p + 1]) * rbs; 20031 b_sum += (stack.b = pb = pixels[p + 2]) * rbs; 20032 r_in_sum += pr; 20033 g_in_sum += pg; 20034 b_in_sum += pb; 20035 stack = stack.next; 20036 } 20037 stackIn = stackStart; 20038 stackOut = stackEnd; 20039 for (x = 0; x < width; x++) { 20040 pixels[yi] = r_sum * mul_sum >> shg_sum; 20041 pixels[yi + 1] = g_sum * mul_sum >> shg_sum; 20042 pixels[yi + 2] = b_sum * mul_sum >> shg_sum; 20043 r_sum -= r_out_sum; 20044 g_sum -= g_out_sum; 20045 b_sum -= b_out_sum; 20046 r_out_sum -= stackIn.r; 20047 g_out_sum -= stackIn.g; 20048 b_out_sum -= stackIn.b; 20049 p = yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1) << 2; 20050 r_in_sum += stackIn.r = pixels[p]; 20051 g_in_sum += stackIn.g = pixels[p + 1]; 20052 b_in_sum += stackIn.b = pixels[p + 2]; 20053 r_sum += r_in_sum; 20054 g_sum += g_in_sum; 20055 b_sum += b_in_sum; 20056 stackIn = stackIn.next; 20057 r_out_sum += pr = stackOut.r; 20058 g_out_sum += pg = stackOut.g; 20059 b_out_sum += pb = stackOut.b; 20060 r_in_sum -= pr; 20061 g_in_sum -= pg; 20062 b_in_sum -= pb; 20063 stackOut = stackOut.next; 20064 yi += 4; 20065 } 20066 yw += width; 20067 } 20068 for (x = 0; x < width; x++) { 20069 g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0; 20070 yi = x << 2; 20071 r_out_sum = radiusPlus1 * (pr = pixels[yi]); 20072 g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]); 20073 b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]); 20074 r_sum += sumFactor * pr; 20075 g_sum += sumFactor * pg; 20076 b_sum += sumFactor * pb; 20077 stack = stackStart; 20078 for (i = 0; i < radiusPlus1; i++) { 20079 stack.r = pr; 20080 stack.g = pg; 20081 stack.b = pb; 20082 stack = stack.next; 20083 } 20084 yp = width; 20085 for (i = 1; i <= radius; i++) { 20086 yi = yp + x << 2; 20087 r_sum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i); 20088 g_sum += (stack.g = pg = pixels[yi + 1]) * rbs; 20089 b_sum += (stack.b = pb = pixels[yi + 2]) * rbs; 20090 r_in_sum += pr; 20091 g_in_sum += pg; 20092 b_in_sum += pb; 20093 stack = stack.next; 20094 if (i < heightMinus1) { 20095 yp += width; 20096 } 20097 } 20098 yi = x; 20099 stackIn = stackStart; 20100 stackOut = stackEnd; 20101 for (y = 0; y < height; y++) { 20102 p = yi << 2; 20103 pixels[p] = r_sum * mul_sum >> shg_sum; 20104 pixels[p + 1] = g_sum * mul_sum >> shg_sum; 20105 pixels[p + 2] = b_sum * mul_sum >> shg_sum; 20106 r_sum -= r_out_sum; 20107 g_sum -= g_out_sum; 20108 b_sum -= b_out_sum; 20109 r_out_sum -= stackIn.r; 20110 g_out_sum -= stackIn.g; 20111 b_out_sum -= stackIn.b;
20112 p = x + ((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width << 2; 20113 r_sum += r_in_sum += stackIn.r = pixels[p]; 20114 g_sum += g_in_sum += stackIn.g = pixels[p + 1]; 20115 b_sum += b_in_sum += stackIn.b = pixels[p + 2]; 20116 stackIn = stackIn.next; 20117 r_out_sum += pr = stackOut.r; 20118 g_out_sum += pg = stackOut.g; 20119 b_out_sum += pb = stackOut.b; 20120 r_in_sum -= pr; 20121 g_in_sum -= pg; 20122 b_in_sum -= pb; 20123 stackOut = stackOut.next; 20124 yi += width; 20125 } 20126 } 20127 context.putImageData(imageData, top_x, top_y); 20128} 20129function BlurStack() { 20130 this.r = 0; 20131 this.g = 0; 20132 this.b = 0; 20133 this.a = 0; 20134 this.next = null; 20135} 20136function stackBlurGetElement(elementOrID) { 20137 if (elementOrID.nodeType == 1) return elementOrID; 20138 return document.getElementById(elementOrID); 20139} 20140/* harmony default export */ var stackblur = (stackBlurImageDataRGBA); 20141// EXTERNAL MODULE: ./src/editor/images/cursors/blur.svg 20142var cursors_blur = __webpack_require__("0jGQ"); 20143var blur_default = /*#__PURE__*/__webpack_require__.n(cursors_blur); 20144 20145// EXTERNAL MODULE: ./node_modules/html2canvas/dist/html2canvas.js 20146var html2canvas = __webpack_require__("wOnQ"); 20147var html2canvas_default = /*#__PURE__*/__webpack_require__.n(html2canvas); 20148 20149// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Blur.js 20150 20151 20152 20153 20154 20155 20156class Blur_Blur extends tools_Tool { 20157 constructor(component) { 20158 super(component); 20159 this.toolName = "blur"; 20160 this.cursor = blur_default.a; 20161 this.startPoint = {}; 20162 this.onModified = this.onModified.bind(this); 20163 this.onSettings = this.onSettings.bind(this); 20164 this.blurRadius = 16; 20165 } 20166 startAnnotation() { 20167 super.startAnnotationForceDraw(); 20168 super.startAnnotation(); 20169 } 20170 stopAnnotation() { 20171 super.stopAnnotationForceDraw(); 20172 super.stopAnnotation(); 20173 } 20174 20175 // draw 20176 start(o) { 20177 if (this.draw) return; 20178 let canvas = this.canvas; 20179 if (o.target !== null) { 20180 // if target is selected object 20181 // canvas.setActiveObject(o.target); 20182 return; 20183 } 20184 let component = this.component; 20185 this.blurRadius = this.settings.radius; 20186 let point = canvas.getPointer(o.e); 20187 let settings = { 20188 ...this.settings, 20189 left: point.x, 20190 top: point.y, 20191 width: 0, 20192 height: 0, 20193 hasRotatingPoint: false, 20194 fill: "rgba(36,134,255,0.34)", 20195 selectable: true, 20196 imageSmoothingEnabled: false 20197 }; 20198 this.startPoint = point; 20199 this.draw = true; 20200 this.drawBlur = true; 20201 this.shape = new dist_fabric["fabric"].Rect(settings); 20202 20203 // set custom history management 20204 this.shape.set({ 20205 managedHistory: true, 20206 toolName: this.toolName, 20207 objectID: component.util.generateID(this.toolName) 20208 }); 20209 canvas.add(this.shape); 20210 } 20211 do(o) { 20212 if (!this.draw) return; 20213 if (!this.drawBlur) return; 20214 let component = this.component;
20215 let canvas = this.canvas; 20216 let point = canvas.getPointer(o.e); 20217 let prevX = this.shape.get("left"); 20218 let prevWidth = this.shape.get("width"); 20219 let left = Math.min(this.startPoint.x, point.x); 20220 let top = Math.min(this.startPoint.y, point.y); 20221 let width = Math.abs(this.startPoint.x - point.x); 20222 let height = Math.abs(this.startPoint.y - point.y); 20223 if (!component.altKey) { 20224 this.shape.originX = "left"; 20225 this.shape.originY = "top"; 20226 } else { 20227 this.shape.originX = "center"; 20228 this.shape.originY = "center"; 20229 left = this.startPoint.x; 20230 top = this.startPoint.y; 20231 } 20232 if (component.shiftKey) { 20233 if (!component.altKey) { 20234 if (point.x < this.startPoint.x && point.y < this.startPoint.y) { 20235 width = prevX + prevWidth - point.x; 20236 top = this.startPoint.y - width; 20237 } else if (point.x > this.startPoint.x && point.y < this.startPoint.y) { 20238 top = this.startPoint.y - width; 20239 } 20240 } 20241 height = width; 20242 } 20243 this.shape.set({ 20244 left: left, 20245 top: top, 20246 width: width, 20247 height: height 20248 }); 20249 canvas.requestRenderAll(); 20250 } 20251 stop(o) { 20252 if (!this.draw) return; 20253 this.drawBlur = false; 20254 this.shape.setCoords(); 20255 if (!this.component.shapeRemoveIfZero(this.shape)) { 20256 this.canvas.setActiveObject(this.shape); 20257 // enable history 20258 this.onModified({ 20259 target: this.shape 20260 }); 20261 this.eventsEnable(this.shape); 20262 } else { 20263 this.draw = false; 20264 this.transform = false; 20265 } 20266 this.component.backToDefaultTool(); 20267 } 20268 20269 // events 20270 events(o) { 20271 let that = this; 20272 let component = this.component;
20273 let canvas = this.canvas; 20274 let event = { 20275 target: o, 20276 notMe: true 20277 }; 20278 let otherObjectScaling = t => { 20279 if (that.historyDisabled) return; 20280 if (t.target === o) return; 20281 if (component.hasZeroDimension(t.target)) return; 20282 event.who = t.target; 20283 that.onScaling(event); 20284 }; 20285 let otherObjectMoving = t => { 20286 if (that.historyDisabled) return; 20287 if (t.target === o) return; 20288 event.who = t.target; 20289 that.onMoving(event); 20290 }; 20291 let otherObjectTransformed = t => { 20292 var _t$target; 20293 if (that.historyDisabled) return; 20294 if (t.target === o) return; 20295 let shape = t.target; 20296 if (component.hasZeroDimension(shape)) return; 20297 event.who = t.target; 20298 event.action = "otherObjectTransformed"; 20299 if (((_t$target = t.target) === null || _t$target === void 0 ? void 0 : _t$target.toolName) == 'img') { 20300 that.onModified(event); 20301 } 20302 }; 20303 let thatObjectRemoved = t => { 20304 let shape = t.target; 20305 // if (that.historyDisabled) return; 20306 if (shape.objectID === o.objectID) { 20307 canvas.off("object:scaling", o.customEvents.otherObjectScaling); 20308 canvas.off("object:rotating", o.customEvents.otherObjectMoving); 20309 // canvas.off("object:scaled", otherObjectTransformed); 20310 canvas.off("object:moving", o.customEvents.otherObjectMoving); 20311 canvas.off("object:modified", o.customEvents.otherObjectTransformed); 20312 canvas.off("path:created", o.customEvents.otherObjectTransformed); 20313 canvas.off("object:special:transformed", o.customEvents.otherObjectTransformed); 20314 canvas.off("object:removed", o.customEvents.thatObjectRemoved); 20315 } else if (!component.hasZeroDimension(shape)) { 20316 that.onMoving(event); 20317 // force rerender 20318 canvas.renderCanvas(canvas.getContext('2d'), canvas.getObjects()); 20319 otherObjectTransformed(t); 20320 } 20321 }; 20322 o.customEvents = { 20323 otherObjectScaling: otherObjectScaling, 20324 otherObjectMoving: otherObjectMoving, 20325 otherObjectTransformed: otherObjectTransformed, 20326 thatObjectRemoved: thatObjectRemoved 20327 }; 20328 return o.customEvents; 20329 } 20330 eventsDisable(o) { 20331 var canvas = this.canvas; 20332 canvas.off("object:scaling", o.customEvents.otherObjectScaling); 20333 canvas.off("object:rotating", o.customEvents.otherObjectMoving); 20334 canvas.off("object:moving", o.customEvents.otherObjectMoving); 20335 canvas.off("object:modified", o.customEvents.otherObjectTransformed); 20336 canvas.off("path:created", o.customEvents.otherObjectTransformed); 20337 canvas.off("object:removed", o.customEvents.thatObjectRemoved); 20338 canvas.off("object:special:transformed", o.customEvents.otherObjectTransformed); 20339 o.off("moving", this.onMoving); 20340 o.off("moved", this.onModified); 20341 o.off("scaling", this.onScaling); 20342 o.off("scaled", this.onModified); 20343 o.off("special:cloning", this.onCloning); 20344 } 20345 eventsEnable(o) {
20346 let canvas = this.canvas; 20347 o = o || this.shape; 20348 if (!o.customEvents) { 20349 this.events(o); 20350 } 20351 this.eventsDisable(o); 20352 20353 // listen what happining around 20354 canvas.on("object:scaling", o.customEvents.otherObjectScaling); 20355 canvas.on("object:rotating", o.customEvents.otherObjectMoving); 20356 // canvas.on("object:scaled", o.customEvents.otherObjectTransformed); 20357 canvas.on("object:moving", o.customEvents.otherObjectMoving); 20358 canvas.on("object:modified", o.customEvents.otherObjectTransformed); 20359 canvas.on("path:created", o.customEvents.otherObjectTransformed); 20360 canvas.on("object:special:transformed", o.customEvents.otherObjectTransformed); 20361 canvas.on("object:removed", o.customEvents.thatObjectRemoved); 20362 20363 // listen what happened with me 20364 o.on("moving", this.onMoving); 20365 o.on("moved", this.onModified); 20366 o.on("scaling", this.onScaling); 20367 o.on("scaled", this.onModified); 20368 o.on("special:cloning", this.onCloning); 20369 o.on("special:settings", this.onSettings); 20370 } 20371 20372 // handlers 20373 onSettings(e) { 20374 super.onSettings(e); 20375 let shape = e.target; 20376 let set = e.settings; 20377 if (set.radius) { 20378 let r = set.radius; 20379 this.settings.radius = r; 20380 this.blurRadius = r; 20381 let event = { 20382 target: shape, 20383 e: { 20384 pageX: shape.left, 20385 pageY: shape.top 20386 } 20387 }; 20388 if (shape.timer) { 20389 clearTimeout(shape.timer); 20390 } 20391 shape.timer = setTimeout(() => this.onModified(event), 100); 20392 } 20393 } 20394 onScaling(e) { 20395 this.transform = true; 20396 var obj = e.target, 20397 w = obj.width * obj.scaleX, 20398 h = obj.height * obj.scaleY; //, s = obj.strokeWidth; 20399 20400 obj.set({ 20401 'height': h, 20402 'width': w, 20403 'scaleX': 1, 20404 'scaleY': 1 20405 }); 20406 e.target.set({ 20407 fill: "rgba(255,255,255,0.34)" 20408 }); 20409 } 20410 shiftShapesSettings(o, k) { 20411 var obj = o, 20412 w = obj.width * obj.scaleX * k, 20413 h = obj.height * obj.scaleY * k; //, s = obj.strokeWidth; 20414 20415 obj.set({ 20416 'height': h, 20417 'width': w, 20418 'scaleX': 1, 20419 'scaleY': 1 20420 }); 20421 obj.set({ 20422 fill: "rgba(255,255,255,0)" 20423 }); 20424 } 20425 onMoving(e) { 20426 var _e$who; 20427 // break if not me, we dont need to check shift if so 20428 if (e.notMe && ((_e$who = e.who) === null || _e$who === void 0 ? void 0 : _e$who.toolName) !== 'img') return; 20429 this.transform = true; 20430 let component = this.component; 20431 let shape = e.target; 20432 shape.set({ 20433 fill: "rgba(255,255,255,0.34)" 20434 }); 20435 if (e.notMe) return; 20436 if (typeof this.startPoint.x === 'undefined') { 20437 this.startPoint.x = e.e.pageX; 20438 this.startPoint.y = e.e.pageY; 20439 } 20440 if (component.shiftKey) { 20441 let dx = Math.abs(this.startPoint.x - e.e.pageX); 20442 let dy = Math.abs(this.startPoint.y - e.e.pageY); 20443 let lockx = shape.lockMovementY ? Infinity : 0; 20444 let locky = shape.lockMovementX ? Infinity : 0; 20445 if (dx + lockx < dy) { 20446 shape.set({ 20447 "lockMovementX": true, 20448 "lockMovementY": false 20449 }); 20450 } else if (dx > dy + locky) { 20451 shape.set({ 20452 "lockMovementX": false, 20453 "lockMovementY": true 20454 }); 20455 } 20456 } else { 20457 shape.set({ 20458 "lockMovementX": false, 20459 "lockMovementY": false 20460 }); 20461 } 20462 } 20463 onModified(e) { 20464 let that = this; 20465 let component = this.component;
20466 let canvas = this.canvas; 20467 let shape = e.target; 20468 let notMe = e.notMe; 20469 let who = e.who; 20470 var isGroup = who && who.type === 'activeSelection'; 20471 20472 // reset start point 20473 this.startPoint = {}; 20474 let boundingRect = shape.getBoundingRect(); 20475 // options.left = shape.get("left") + (isGroup?(who.left + who.width/2 ):0); 20476 // options.top = shape.get("top") + (isGroup?(who.top + who.height/2 ):0); 20477 // options.height = shape.get("height"); 20478 // options.width = shape.get("width"); 20479 let options = {}; 20480 // https://gist.github.com/ryan-digbil/21b6b0fc9974b3ab29be 20481 // const zoom = canvas.getZoom(); 20482 // const viewportMatrix = canvas.viewportTransform 20483 options.left = boundingRect.left + (isGroup ? who.left + who.width / 2 : 0); // - viewportMatrix[4]; 20484 options.top = boundingRect.top + (isGroup ? who.top + who.height / 2 : 0); // - viewportMatrix[5]; 20485 // options.height = boundingRect.height / zoom; 20486 // options.width = boundingRect.width / zoom; 20487 options.height = boundingRect.height; 20488 options.width = boundingRect.width; 20489 options.format = "png"; 20490 // options.enableRetinaScaling = window.devicePixelRatio >= 2; 20491 20492 // shape.set({ 20493 // fill: "transparent", 20494 // strokeWidth: 0 20495 // }); 20496 let isImg = false; 20497 canvas.getObjects().forEach(o => { 20498 if (o.toolName !== 'img') { 20499 o.visible = false; 20500 isImg = true; 20501 } 20502 }); 20503 const canvasUrl = isImg && canvas.toDataURL(options); 20504 canvas.getObjects().forEach(o => { 20505 if (o.toolName !== 'img') { 20506 o.visible = true; 20507 } 20508 }); 20509 this.blurData(options, canvasUrl, img => { 20510 let imgInstance = new dist_fabric["fabric"].Image(img, { 20511 left: 0, 20512 top: 0, 20513 scaleX: shape.width / img.width, 20514 scaleY: shape.height / img.height 20515 }); 20516 // imgInstance.scaleToWidth(shape.width) 20517 20518 let patternSourceCanvas = new dist_fabric["fabric"].StaticCanvas(); 20519 patternSourceCanvas.setDimensions({ 20520 width: shape.width, 20521 height: shape.height 20522 }); 20523 patternSourceCanvas.add(imgInstance); 20524 patternSourceCanvas.renderAll(); 20525 let bars = { 20526 fill: new dist_fabric["fabric"].Pattern({ 20527 source: patternSourceCanvas.toCanvasElement(), 20528 repeat: 'no-repeat' 20529 }), 20530 // left: shape.left,// options are negative 20531 // top: shape.top, 20532 // width: shape.width, 20533 // height: shape.height, 20534 strokeWidth: 0 20535 }; 20536 // shape.setPatternFill({ 20537 // source: img, 20538 // repeat: 'no-repeat' 20539 // }) 20540 shape.set(bars); 20541 // debugger; 20542 20543 // unlock history 20544 that.draw = false; 20545 that.transform = false; 20546 if (notMe) { 20547 // change history (add pattern to the blurrect) 20548 // add onto pattern all other shapes 20549 that.historyFix(shape); 20550 } else { 20551 component.shapeAfterTransforming(); 20552 } 20553 canvas.renderAll(); 20554 }); 20555 } 20556 historyFix(shape) { 20557 let component = this.component; 20558 if (!component.history) return; 20559 let h = component.history; 20560 let i = h.length - 1; 20561 let state = h[i]; 20562 let id = shape.get("objectID"); 20563 let objects = state.objects.map(item => { 20564 if (id === item.objectID) { 20565 item.fill = shape.toObject().fill; 20566 } 20567 return item; 20568 }); 20569 component.history[i].objects = objects; 20570 } 20571 shot(b) { 20572 let se = document.scrollingElement; 20573 let options = { 20574 x: se.scrollLeft + b.left, 20575 y: se.scrollTop + b.top, 20576 width: b.width, 20577 height: b.height, 20578 useCORS: true, 20579 scale: 1 20580 }; 20581 return new Promise(ok => { 20582 html2canvas_default()(document.body, options).then(shot => { 20583 let ctx = shot.getContext('2d'); 20584 ctx.webkitImageSmoothingEnabled = false; 20585 ctx.mozImageSmoothingEnabled = false; 20586 ctx.imageSmoothingEnabled = false; 20587 ok(shot.toDataURL()); 20588 }); 20589 }); 20590 } 20591 blurData(shapeSettings, canvasUrl, callback) { 20592 let that = this; 20593 let tmpCanvas = document.createElement("canvas"); // a 20594 tmpCanvas.setAttribute("id", "tmp_c"); 20595 tmpCanvas.width = shapeSettings.width; 20596 tmpCanvas.height = shapeSettings.height;
20597 let ctx = tmpCanvas.getContext("2d"); 20598 let loadImage = url => { 20599 return new Promise(fulfill => { 20600 let imageObj = new Image(); 20601 imageObj.src = url; 20602 imageObj.onload = () => fulfill(imageObj); 20603 }); 20604 }; 20605 let imagesLoaded = images => { 20606 if (!this.component.props.embedMode) { 20607 ctx.drawImage(images[0], 0, 0, shapeSettings.width, shapeSettings.height); 20608 } 20609 if (canvasUrl) { 20610 ctx.drawImage(images[1], 0, 0, shapeSettings.width, shapeSettings.height); 20611 } 20612 let blurRadius = that.blurRadius; 20613 let data = ctx.getImageData(0, 0, shapeSettings.width, shapeSettings.height); 20614 let blurData = stackblur(data, blurRadius); 20615 ctx.clearRect(0, 0, shapeSettings.width, shapeSettings.height); 20616 ctx.putImageData(blurData, 0, 0); 20617 let blurImage = new Image(); 20618 blurImage.src = tmpCanvas.toDataURL(); 20619 blurImage.onload = function () { 20620 tmpCanvas.remove(); 20621 callback(blurImage); 20622 }; 20623 }; 20624 let concat = img => { 20625 const imgs = [loadImage(img)]; 20626 if (canvasUrl) { 20627 imgs.push(loadImage(canvasUrl)); 20628 } 20629 Promise.all(imgs).then(imagesLoaded).catch(e => console.error("ScreenClip Canvas Error:", e)); 20630 }; 20631 if (this.component.props.embedMode) { 20632 let img; 20633 if (this.component.dynamic.backgroundImage) { 20634 // const zoom = this.canvas.getZoom(); 20635 this.component.dynamic.backgroundImage.setCoords(); 20636 const correction = this.component.dynamic.backgroundImage.getBoundingRect(); 20637 const backgroundSettings = { 20638 ...shapeSettings, 20639 // left: (shapeSettings.left - correction.left) / zoom, 20640 // top: (shapeSettings.top - correction.top) / zoom, 20641 left: shapeSettings.left - correction.left, 20642 top: shapeSettings.top - correction.top 20643 }; 20644 img = this.component.dynamic.backgroundImage.toDataURL(backgroundSettings); 20645 } else { 20646 img = this.component.dynamic.toDataURL(shapeSettings); 20647 } 20648 concat(img); 20649 } else this.shot(shapeSettings).then(concat); 20650 } 20651} 20652/* harmony default export */ var tools_Blur = (Blur_Blur); 20653// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Crop.js 20654 20655 20656 20657let bupProps = {}; 20658class Crop_Crop extends tools_Tool { 20659 constructor(component) { 20660 super(component); 20661 this.toolName = "crop"; 20662 this.cursor = rectangle_default.a; 20663 } 20664 20665 // onScaling(o) { 20666 // this.shape.setControlsVisibility({ 20667 // bl: false, 20668 // br: false, 20669 // mb: false, 20670 // ml: false, 20671 // mr: false, 20672 // mt: false, 20673 // tl: false, 20674 // tr: false, 20675 // mtr: false, 20676 // }) 20677 // super.onScaling(o) 20678 // } 20679 20680 stopAnnotation() { 20681 super.stopAnnotation(); 20682 let canvas = this.canvas; 20683 if (canvas) { 20684 // canvas.selection = bupProps['selection'] 20685 canvas.selectionColor = bupProps['selectionColor']; 20686 canvas.selectionBorderColor = bupProps['selectionBorderColor']; 20687 // canvas.hoverCursor = "move"; 20688 // canvas.defaultCursor = "move"; 20689 } 20690 this.removeOthers(); 20691 } 20692 startAnnotation() { 20693 super.startAnnotation(); 20694 let canvas = this.canvas; 20695 if (canvas) { 20696 // bupProps['selection'] = canvas.selection 20697 bupProps['selectionColor'] = canvas.selectionColor; 20698 bupProps['selectionBorderColor'] = canvas.bupSelectionBorderColor; 20699 // canvas.selection = false; 20700 canvas.selectionColor = 'transparent'; 20701 canvas.selectionBorderColor = 'transparent'; 20702 } 20703 } 20704 removeOthers() { 20705 this.canvas.getObjects().forEach(o => { 20706 o.toolName == 'crop' && this.canvas.remove(o); 20707 }); 20708 } 20709 start(o) {
20710 let component = this.component; 20711 let canvas = this.canvas; 20712 if (o.target !== null) { 20713 // if target is selected object 20714 //canvas.setActiveObject(o.target); 20715 return; 20716 } 20717 this.component.disableHistoryEvents(); 20718 this.removeOthers(); 20719 this.draw = true; 20720 let point = canvas.getPointer(o.e); 20721 let settings = { 20722 managedHistory: true, 20723 left: point.x, 20724 top: point.y, 20725 width: 0, 20726 height: 0, 20727 ...this.settings, 20728 backgroundColor: "rgba(255,255,255,0.5)", 20729 strokeDashArray: [50, 50], 20730 stroke: "#fff", 20731 borderColor: 'transparent' 20732 }; 20733 this.startPoint = point; 20734 this.shape = new dist_fabric["fabric"].Rect(settings); 20735 20736 // set custom fields 20737 this.shape.set({ 20738 toolName: this.toolName, 20739 objectID: component.util.generateID(this.toolName) 20740 }); 20741 canvas.add(this.shape); 20742 } 20743 do(o) { 20744 if (!this.draw) return; 20745 let component = this.component; 20746 let canvas = this.canvas; 20747 let point = canvas.getPointer(o.e); 20748 let prevX = this.shape.get("left"); 20749 let prevWidth = this.shape.get("width"); 20750 let left = Math.min(this.startPoint.x, point.x); 20751 let top = Math.min(this.startPoint.y, point.y); 20752 let width = Math.abs(this.startPoint.x - point.x); 20753 let height = Math.abs(this.startPoint.y - point.y); 20754 if (!component.altKey) { 20755 this.shape.originX = "left"; 20756 this.shape.originY = "top"; 20757 } else { 20758 this.shape.originX = "center"; 20759 this.shape.originY = "center"; 20760 left = this.startPoint.x; 20761 top = this.startPoint.y; 20762 } 20763 if (component.shiftKey) { 20764 if (!component.altKey) { 20765 if (point.x < this.startPoint.x && point.y < this.startPoint.y) { 20766 width = prevX + prevWidth - point.x; 20767 top = this.startPoint.y - width; 20768 } else if (point.x > this.startPoint.x && point.y < this.startPoint.y) { 20769 top = this.startPoint.y - width; 20770 } 20771 } 20772 height = width; 20773 } 20774 this.shape.set({ 20775 left: left, 20776 top: top, 20777 width: width, 20778 height: height 20779 }); 20780 canvas.renderAll(); 20781 } 20782 stop(o) { 20783 if (!this.draw) return; 20784 this.shape.setCoords(); 20785 this.component.shapeRemoveIfZero(); 20786 this.shape.set({ 20787 originX: "left", 20788 originY: "top" 20789 }); 20790 this.shape.setControlsVisibility({ 20791 bl: false, 20792 br: false, 20793 mb: false, 20794 ml: false, 20795 mr: false, 20796 mt: false, 20797 tl: false, 20798 tr: false, 20799 mtr: false 20800 }); 20801 this.canvas.setActiveObject(this.shape); 20802 20803 // enable history 20804 20805 // this.component.shapeAfterTransforming(); 20806 this.eventsEnable(); 20807 this.draw = false; 20808 this.transform = false; 20809 // this.component.enableHistoryEvents() 20810 // this.component.backToDefaultTool(); 20811 this.chopCrop(); 20812 } 20813 async chopCrop() { 20814 // zoom to original 20815 let zoomToPoint = { 20816 x: null, 20817 y: null 20818 }; 20819 this.component.props.zoomTo(1, zoomToPoint); 20820 let imagebb = this.component.dynamic.backgroundImage.getBoundingRect(); 20821 20822 // get crop coords 20823 let shapebb = this.shape.getBoundingRect(); 20824 20825 // hide crop shape 20826 this.shape.visible = false; 20827 20828 // crop image 20829 let croppedImageDataUrl = this.component.dynamic.toDataURL({ 20830 format: 'png', 20831 ...shapebb 20832 // enableRetinaScaling: true 20833 }); 20834 let bufferCanvas = document.createElement('canvas'); 20835 bufferCanvas.setAttribute('width', shapebb.width); 20836 bufferCanvas.setAttribute('height', shapebb.height); 20837 let ctx = bufferCanvas.getContext("2d"); 20838 ctx.fillStyle = "white"; 20839 ctx.fillRect(0, 0, shapebb.width, shapebb.height); 20840 let img = new Image(); 20841 img.src = croppedImageDataUrl; 20842 // await new Promise(r => img.onload=r, img.src=url); 20843 img.onload = () => { 20844 ctx.drawImage(img, 0, 0); 20845 let dataUrl = bufferCanvas.toDataURL(); 20846 20847 // clear canvas component 20848 this.component.clear(); 20849 20850 // set background image 20851 this.component.setImage({ 20852 data: dataUrl, 20853 width: shapebb.width, 20854 height: shapebb.height, 20855 mime: 'image/png' 20856 }); 20857 this.component.props.changeTool('select'); 20858 // delete bufferCanvas; 20859 // delete ctx; 20860 // delete dataUrl; 20861 // delete img 20862 }; 20863 } 20864} 20865/* harmony default export */ var tools_Crop = (Crop_Crop); 20866// CONCATENATED MODULE: ./src/editor/components/Canvas/tools/Img.js 20867 20868 20869class Img_Img extends tools_Tool { 20870 constructor(component) { 20871 super(component); 20872 this.toolName = 'img'; 20873 this.revokeObjectURLs = []; 20874 this.handleFiles = this.handleFiles.bind(this); 20875 this.release = this.release.bind(this); 20876 } 20877 20878 // clear parent's method 20879 stopAnnotation() {} 20880 onScaling(e) {} 20881 startAnnotation() { 20882 this.get(); 20883 } 20884 get(o) { 20885 this.input = document.createElement("input"); 20886 this.input.type = "file"; 20887 this.input.multiple = false;
20888 this.input.accept = ".png, .jpg, .jpeg"; 20889 this.input.addEventListener("change", this.handleFiles, false); 20890 this.input.click(); 20891 this.draw = true; 20892 } 20893 release(img) { 20894 if (!this.draw) return; 20895 let component = this.component; 20896 img.set({ 20897 toolName: this.toolName, 20898 lockUniScaling: true, 20899 objectID: component.util.generateID(this.toolName), 20900 managedScaling: true 20901 }); 20902 this.canvas.add(img); 20903 this.canvas.setActiveObject(img); 20904 this.component.shapeRemoveIfZero(img); 20905 component.props.hidePleaseWait(); 20906 20907 // enable history 20908 this.draw = false; 20909 this.transform = false; 20910 this.component.shapeAfterTransforming(); 20911 this.eventsEnable(img); 20912 component.backToDefaultTool(); 20913 } 20914 imageSize(url) { 20915 const img = document.createElement("img"); 20916 const promise = new Promise((resolve, reject) => { 20917 img.onload = () => { 20918 // Natural size is the actual image size regardless of rendering. 20919 // The 'normal' `width`/`height` are for the **rendered** size. 20920 const width = img.naturalWidth; 20921 const height = img.naturalHeight; 20922 20923 // Resolve promise with the width and height 20924 resolve({ 20925 width, 20926 height 20927 }); 20928 }; 20929 20930 // Reject promise on error 20931 img.onerror = reject; 20932 }); 20933 20934 // Setting the source makes it start downloading and eventually call `onload` 20935 img.src = url; 20936 return promise; 20937 } 20938 async readBase64(blob) { 20939 return new Promise(resolve => { 20940 let reader = new FileReader(); 20941 reader.onload = function () { 20942 resolve(reader.result); 20943 }; 20944 reader.readAsDataURL(blob); 20945 }); 20946 } 20947 async handleFiles() { 20948 let that = this; 20949 let component = this.component; 20950 let input = this.input; 20951 component.props.showPleaseWait(); 20952 for (let i = 0; i < input.files.length; i++) { 20953 const file = input.files[i]; 20954 if (!file.type.startsWith('image/')) { 20955 console.error("ScreenClip Image Error: not an image"); 20956 continue; 20957 } else { 20958 let url = await this.readBase64(file); 20959 const coord = component.centerCoord(); 20960 const size = await that.imageSize(url); 20961 dist_fabric["fabric"].Image.fromURL(url, that.release, { 20962 left: coord.x - size.width / 2, 20963 top: coord.y - size.height / 2 20964 }); 20965 } 20966 } 20967 } 20968} 20969/* harmony default export */ var tools_Img = (Img_Img); 20970// EXTERNAL MODULE: ./src/editor/mods/ExtensionMessenger.js 20971var ExtensionMessenger = __webpack_require__("nxsA"); 20972 20973// CONCATENATED MODULE: ./src/editor/components/Canvas/Canvas.js 20974 20975 20976 20977 20978 20979 20980 20981 20982// import imagesToObjectMode from "../../mods/fabric.image.toObject.js"; 20983 20984let Canvas_browser = {}; 20985if (false) {} 20986let Canvas_html2canvas = {}; 20987if (true) Canvas_html2canvas = __webpack_require__("wOnQ"); 20988 20989// import html2canvas from 'html2canvas'; 20990 20991 20992 20993 20994 20995 20996// tools 20997 20998 20999 21000 21001 21002 21003 21004 21005 21006 21007 21008 21009 21010 21011 21012 21013 21014 21015let Canvas_store; 21016if (false) {} 21017let commentingCursor = "grabbing"; 21018const tapDelay = 300; 21019var tappedTwice = false; 21020window.tappedOnceTimer = false; 21021function isTappedTwice(event) { 21022 if (!tappedTwice) { 21023 tappedTwice = true; 21024 setTimeout(function () { 21025 tappedTwice = false; 21026 }, tapDelay); 21027 return false; 21028 } 21029 tappedTwice = false; 21030 //action on double tap goes below 21031 return true; 21032} 21033function isTappedOnce(event, falseTimer) { 21034 console.log(event.touches, falseTimer); 21035 if (!!window.tappedOnceTimer || event.touches && event.touches.length > 1 || falseTimer) { 21036 clearTimeout(window.tappedOnceTimer); 21037 window.tappedOnceTimer = false; 21038 return false; 21039 } 21040 return new Promise(function (resolve) { 21041 window.tappedOnceTimer = setTimeout(function () { 21042 resolve(!!window.tappedOnceTimer); 21043 clearTimeout(window.tappedOnceTimer); 21044 window.tappedOnceTimer = false; 21045 }, tapDelay); 21046 }); 21047} 21048 21049// canvas scrollbars https://github.com/fabricjs/fabric.js/issues/3164 21050// class Canvas extends Component { 21051class Canvas_Canvas_Canvas extends react["Component"] { 21052 constructor(props) { 21053 super(props); 21054 defineProperty_default()(this, "getIntersectingRectangle", (r1, r2) => { 21055 [r1, r2] = [r1, r2].map(r => { 21056 return { 21057 x: [r.x1, r.x2].sort((a, b) => a - b), 21058 y: [r.y1, r.y2].sort((a, b) => a - b) 21059 }; 21060 }); 21061 const noIntersect = r2.x[0] > r1.x[1] || r2.x[1] < r1.x[0] || r2.y[0] > r1.y[1] || r2.y[1] < r1.y[0]; 21062 return noIntersect ? false : { 21063 x1: Math.max(r1.x[0], r2.x[0]), 21064 // _[0] is the lesser, 21065 y1: Math.max(r1.y[0], r2.y[0]), 21066 // _[1] is the greater 21067 x2: Math.min(r1.x[1], r2.x[1]), 21068 y2: Math.min(r1.y[1], r2.y[1]) 21069 }; 21070 }); 21071 defineProperty_default()(this, "getOnScreenClipPercentage", delta => {
21072 const rect = this.dynamic.backgroundImage.getBoundingRect(); 21073 const oRect = { 21074 x1: rect.left + delta.x, 21075 x2: rect.left + rect.width + delta.x, 21076 y1: rect.top + delta.y, 21077 y2: rect.top + rect.height + delta.y 21078 }; 21079 const sRect = (oRect.x2 - oRect.x1) * (oRect.y2 - oRect.y1); 21080 const bounds = this.dynamic.calcViewportBoundaries(); 21081 const oBounds = { 21082 x1: bounds.tl.x, 21083 x2: bounds.tr.x, 21084 y1: bounds.tl.y, 21085 y2: bounds.br.y 21086 }; 21087 const sBounds = (oBounds.x2 - oBounds.x1) * (oBounds.y2 - oBounds.y1); 21088 const i = this.getIntersectingRectangle(oRect, oBounds); 21089 const percentsOfClipAtViewport = i ? (i.x2 - i.x1) * (i.y2 - i.y1) * 100 / sRect : 0; 21090 const sFilling = Math.abs(Math.min(oRect.x2, oBounds.x2) - Math.max(oRect.x1, oBounds.x1)) * Math.abs(Math.min(oRect.y2, oBounds.y2) - Math.max(oRect.y1, oBounds.y1)); 21091 21092 // let currentZoom = this.dynamic.getZoom() 21093 21094 const isLayout100Filled = sBounds == sFilling || oBounds.x1 < oRect.x1 && oBounds.y1 < oRect.y1 && oBounds.x2 > oRect.x2 && oBounds.y2 > oRect.y2; 21095 const isLayoutNormFilled = sFilling * 100 / sBounds > 50; 21096 const isClipInLayoutX = oBounds.x1 < oRect.x1 && oBounds.x2 > oRect.x2; 21097 const isClipInLayoutY = oBounds.y1 < oRect.y1 && oBounds.y2 > oRect.y2; 21098 21099 // const isLayoutFilledByX = oBounds.x1 >= oRect.x1 && oBounds.x2 <= oRect.x2 21100 // const isLayoutFilledByY = oBounds.y1 >= oRect.y1 && oBounds.y2 <= oRect.y2 21101 21102 const isLayoutNormFilledByX = (Math.min(oBounds.x2, oRect.x2) - Math.max(oBounds.x1, oRect.x1)) * 100 / (oBounds.x2 - oBounds.x1) > 50; 21103 const isLayoutNormFilledByY = (Math.min(oBounds.y2, oRect.y2) - Math.max(oBounds.y1, oRect.y1)) * 100 / (oBounds.y2 - oBounds.y1) > 50; 21104 return isLayout100Filled || isLayoutNormFilled || isLayoutNormFilledByX && (isLayoutNormFilledByY || isClipInLayoutY) || isLayoutNormFilledByY && (isLayoutNormFilledByX || isClipInLayoutX) ? 100 : percentsOfClipAtViewport; 21105 }); 21106 defineProperty_default()(this, "getOnScreenClipPercentage_deprecated", () => { 21107 const rect = this.dynamic.backgroundImage.getBoundingRect(); 21108 const bounds = this.dynamic.calcViewportBoundaries(); 21109 let xx1 = bounds.tl.x; 21110 let xx2 = bounds.tr.x; 21111 let yy1 = bounds.tl.y; 21112 let yy2 = bounds.br.y; 21113 let x1 = rect.left < xx1 ? xx1 : rect.left; 21114 let x2 = rect.left + rect.width > xx2 ? xx2 : rect.left + rect.width; 21115 let y1 = rect.top < yy1 ? yy1 : rect.top; 21116 let y2 = rect.top + rect.height > yy2 ? yy2 : rect.top + rect.height; 21117 let s1 = (x2 - x1) * (y2 - y1); 21118 let s2 = (xx2 - xx1) * (yy2 - yy1); 21119 let sR = Math.abs(Math.min(x2, xx2) - Math.max(x1, xx1)) * Math.abs(Math.min(y2, yy2) - Math.max(y1, yy1)); 21120 21121 // let currentZoom = this.dynamic.getZoom() 21122 21123 const is100 = s2 == sR || xx1 < x1 && yy1 < y1 && xx2 > x2 && yy2 > y2; 21124 // x1 >= xx1 && x2 <= xx2 && y1 >= yy1 && y2 <= yy2) 21125 let percents = is100 ? 100 : sR / (s1 + s2 - sR) * 100; 21126 return percents; 21127 }); 21128 defineProperty_default()(this, "saveCurrentClipIfThereWereChanges", async download => { 21129 if (this.props.unsavedChanges) { 21130 await this.saveCurrentClip(download); 21131 } 21132 }); 21133 defineProperty_default()(this, "hideToolbarsKeyDown", e => { 21134 // key = . 21135 if (e.keyCode == 190 && (this.cmdKey || this.ctrlKey) && this.shiftKey) { 21136 document.body.classList.toggle("hiddentoolbars-mode"); 21137 setTimeout(() => { 21138 this.resizeWindow(); 21139 }, 100); 21140 } 21141 return false; 21142 }); 21143 defineProperty_default()(this, "gestureZoomStop", o => { 21144 if (!o.e || !o.e.touches || o.e.touches.length != 2) return; 21145 clearTimeout(this.zoomInProgressTimer); 21146 this.zoomInProgressTimer = false; 21147 }); 21148 defineProperty_default()(this, "gestureZoom", o => { 21149 clearTimeout(this.zoomInProgressTimer); 21150 if (!o.e.touches || o.e.touches.length != 2) return; 21151 21152 // alert(JSON.stringify(o.e.touches)) 21153 21154 const diffX = Math.abs(o.e.touches[0].clientX - o.e.touches[1].clientX); 21155 const diffY = Math.abs(o.e.touches[0].clientY - o.e.touches[1].clientY); 21156 if (this.zoomInProgressTimer) { 21157 const currentPinchZoomDiff = Math.sqrt(diffX * diffX + diffY * diffY); 21158 let zoom = this.dynamic.getZoom(); 21159 // zoom = zoom + delta / 200; 21160 const delta = this.startPinchZoomDiff - currentPinchZoomDiff; 21161 zoom *= 0.9996 ** delta; 21162 const zoomToPoint = { 21163 x: Math.abs(o.e.touches[0].clientX - o.e.touches[1].clientX) / 2 + Math.min(o.e.touches[0].clientX, o.e.touches[1].clientX), 21164 y: Math.abs(o.e.touches[0].clientY - o.e.touches[1].clientY) / 2 + Math.min(o.e.touches[0].clientY, o.e.touches[1].clientY) 21165 }; 21166 this.props.zoomTo(zoom, zoomToPoint); 21167 } else { 21168 // this.dynamic.discardActiveObject() 21169 this.startPinchZoomDiff = Math.sqrt(diffX * diffX + diffY * diffY); 21170 } 21171 this.zoomInProgressTimer = setTimeout(() => { 21172 // this.dynamic.forEachObject(object => { 21173 // object.evented = object.prevEvented; 21174 // object.selectable = object.prevSelectable; 21175 // this.dynamic.selection = true; 21176 // if (this.tools['pen'] && this.tools['pen'].stopAnnotation) this.tools['pen'].startAnnotation() 21177 // }); 21178 clearTimeout(this.zoomInProgressTimer); 21179 this.zoomInProgressTimer = false;
21180 this.startPinchZoomDiff = null; 21181 }, 100); 21182 21183 // past zoom flag 21184 clearTimeout(this.zoomDoneTimer); 21185 this.zoomDoneTimer = setTimeout(() => { 21186 clearTimeout(this.zoomDoneTimer); 21187 this.zoomDoneTimer = false; 21188 }, 500); 21189 return false; 21190 }); 21191 defineProperty_default()(this, "setUnsavedChangesIfTheyWere", o => { 21192 if (o.target && o.target.get('objectID') && o.target.get('objectID').includes('HOVER')) return; 21193 this.props.setUnsavedChanges(); 21194 }); 21195 defineProperty_default()(this, "handleDocumentHidden", e => { 21196 if (document.hidden) { 21197 this.ctrlKey = false; 21198 this.cmdKey = false; 21199 this.spaceKey = false; 21200 this.altKey = false; 21201 this.shiftKey = false; 21202 } 21203 }); 21204 defineProperty_default()(this, "singleTapHandler", async e => { 21205 if (!e.e || !e.e.type || e.e.type !== 'touchend') return; 21206 let tapped = isTappedOnce(e.e, this.zoomDoneTimer); 21207 tapped.then && tapped.then(isTappedOnce => { 21208 if (window.touchMove) return; 21209 this.toggleCleanPreviewMode(); 21210 }); 21211 }); 21212 defineProperty_default()(this, "disableTextSelections", function () { 21213 const objects = this.dynamic.getObjects(); 21214 objects.forEach(o => { 21215 if (o.toolName === 'text') { 21216 o.selectionStart = -1; 21217 o.selectionEnd = -1; 21218 o.exitEditing(); 21219 } 21220 }); 21221 }); 21222 defineProperty_default()(this, "saveCurrentClip", async (download, extClipToolMenuAction) => { 21223 this.disableTextSelections(); 21224 this.props.clearUnsavedChanges(); 21225 if (this.props.embedCapturingMode && this.state.clipped) { 21226 // embed capturing mode 21227 this.saveCurrentClip_embedCapturing(this.props.stop); 21228 } else if (this.props.embedMode) { 21229 // embed mode 21230 await this.saveCurrentClip_embedMode(download); 21231 } else if (!this.props.embedMode) { 21232 // embed mode 21233 this.fireBrowser_CONTENT__BG__CAPTURE_STARTSHOT(download, this.props.stop, extClipToolMenuAction); 21234 } 21235 }); 21236 defineProperty_default()(this, "saveCurrentClip_embedMode", async download => { 21237 this.props.clearUnsavedChanges(); 21238 let canvas = this.dynamic; 21239 let transform = canvas.viewportTransform.slice(); 21240 canvas.viewportTransform = [1, 0, 0, 1, 0, 0]; 21241 canvas.renderAll(); 21242 let sizes = this.state.sizes; 21243 // let pos = { 21244 // left: (sizes.width / 2 - this.props.embedImageWidth / 2), 21245 // top: (sizes.height / 2 - this.props.embedImageHeight / 2) 21246 // }; 21247 let pos = { 21248 left: canvas.backgroundImage.left + 1, 21249 top: canvas.backgroundImage.top + 1 21250 }; 21251 // debugger; 21252 // let coords = canvas.backgroundImage.getCoords(); 21253 // let pos = { 21254 // left: coords[0].x+1, 21255 // top: coords[0].y+1 21256 // }; 21257 let isBlur = false; 21258 const objects = canvas.getObjects(); 21259 for (const object of objects) { 21260 if (object.objectID.includes("HOVER")) { 21261 object.remove(); 21262 } else if (object.toolName === 'blur') { 21263 isBlur = true; 21264 } 21265 } 21266 let dataurl = canvas.toDataURL({ 21267 format: this.props.mime.split('/')[1], 21268 left: pos.left, 21269 top: pos.top, 21270 width: this.props.embedImageWidth, 21271 height: this.props.embedImageHeight 21272 }); 21273 // for (const object of objects) { 21274 // object.visible = true; 21275 // } 21276 21277 let data = {}; 21278 data = { 21279 ...data, 21280 markers: this.markers, 21281 clipData: JSON.stringify(dataurl).length / 1024 / 1024 > 2 ? canvas.toDataURL({ 21282 format: 'jpeg', 21283 quality: 0.8, 21284 left: pos.left, 21285 top: pos.top, 21286 width: this.props.embedImageWidth, 21287 height: this.props.embedImageHeight 21288 }) : dataurl, 21289 mimeType: this.props.mime, 21290 download: download, 21291 annotations: this.unshiftShapes(pos.left, pos.top, true, 'blur') 21292 }; 21293 21294 // previously saved background 21295 if (!this.props.backgroundSavedBefore && !isBlur) { 21296 data.background = canvas.backgroundImage.toDataURL({ 21297 format: 'png' 21298 }); 21299 if (JSON.stringify(data).length / 1024 / 1024 > 2) { 21300 // if data size is greater than 2MB, reduce the image quality to 80% 21301 data.background = canvas.backgroundImage.toDataURL({ 21302 format: 'jpeg', 21303 quality: 0.8 21304 }); 21305 } 21306 } else if (isBlur) { 21307 for (const object of objects) { 21308 if (object.toolName !== 'blur') { 21309 object.visible = false;
21310 } 21311 } 21312 const backgroundWithBlurs = canvas.toDataURL({ 21313 format: this.props.mime.split('/')[1], 21314 left: pos.left, 21315 top: pos.top, 21316 width: this.props.embedImageWidth, 21317 height: this.props.embedImageHeight 21318 }); 21319 data.background = backgroundWithBlurs; 21320 for (const object of objects) { 21321 if (object.toolName !== 'blur') { 21322 object.visible = true; 21323 } 21324 } 21325 } 21326 21327 // let markers = this.util.unshiftMarkers(this.markers, this.props.embedImageWidth, this.props.embedImageHeight, this.props.sizes); 21328 // markers = this.util.markersPositionToPercents(markers, this.props.embedImageWidth, this.props.embedImageHeight); 21329 canvas.viewportTransform = transform; 21330 canvas.renderAll(); 21331 21332 // if (!this.props.backgroundSavedBefore) { 21333 // data.background = canvas.backgroundImage.toDataURL({ format: 'png' } ) 21334 // } 21335 21336 if (download) { 21337 this.util.downloadFile(dataurl, document.title, 'png'); 21338 } else { 21339 await this.props.saveCallback(data); 21340 } 21341 // window.postMessage({ 21342 // action: "save-image", 21343 // imageDataUrl: dataurl 21344 // }, "*") 21345 }); 21346 this.state = { 21347 zoom: props.zoom, 21348 zoomPanDisabled: props.zoomPanDisabled, 21349 zoomPoint: props.zoomPoint, 21350 tool: props.tools.tool, 21351 imageMode: props.imageMode, 21352 videoMode: props.videoMode, 21353 previewMode: props.previewMode, 21354 pageInteractionsMode: props.pageInteractionsMode, 21355 videoCapture: props.videoCapture, 21356 clipped: props.clipped, 21357 embedSavingProcess: props.embedSavingProcess, 21358 newMarker: props.newMarker, 21359 sizes: { 21360 left: props.sizes.left, 21361 top: props.sizes.top, 21362 width: props.sizes.width, 21363 height: props.sizes.height 21364 } 21365 }; 21366 this.isOut = false; 21367 this.util = new util["c" /* default */](); 21368 this.dynamicCanvas = /*#__PURE__*/react_default.a.createRef(); 21369 let canvasConfig = config["a" /* default */].getCanvasConfigs(); 21370 this.specialFields = canvasConfig.specialFields; 21371 this.cursorMap = canvasConfig.cursors; 21372 this.canvasSettings = { 21373 ...canvasConfig.canvasSettings, 21374 width: this.state.sizes.width, 21375 height: this.state.sizes.height 21376 }; 21377 this.shapeSettings = canvasConfig.shapeSettings; 21378 if (this.props.shapesShadow) { 21379 this.shapeShadow = new dist_fabric["fabric"].Shadow(canvasConfig.shapeShadowSettings); 21380 this.shapeSettings.shadow = this.shapeShadow; 21381 } 21382 this.history = []; 21383 this.historyCurrent = -1; 21384 this.historyDisabled = false; 21385 this.resetZoomPan = this.resetZoomPan.bind(this); 21386 this.resetZoom100 = this.resetZoom100.bind(this); 21387 this.shiftKey = false; 21388 this.shiftKeyHandle = this.shiftKeyHandle.bind(this); 21389 this.altKey = false; 21390 this.altKeyHandle = this.altKeyHandle.bind(this); 21391 this.spacePressed = false; 21392 this.spacePressedHandle = this.spacePressedHandle.bind(this); 21393 this.spaceUnpressedHandle = this.spaceUnpressedHandle.bind(this); 21394 this.revokeObjectURLs = []; 21395 this.dynamic = false; 21396 this.currentTool = "pen"; 21397 this.handleBrowser_BG__CONTENT__TOOLS_SETTINGS = this.handleBrowser_BG__CONTENT__TOOLS_SETTINGS.bind(this); 21398 this.handleBrowser_BG__CONTENT__CAPTURE_STARTSHOT = this.handleBrowser_BG__CONTENT__CAPTURE_STARTSHOT.bind(this); 21399 this.unDo = this.unDo.bind(this); 21400 this.reDo = this.reDo.bind(this); 21401 this.setCommentDragCursor = this.setCommentDragCursor.bind(this); 21402 this.markersUpdated = this.markersUpdated.bind(this); 21403 this.copyKey = this.copyKey.bind(this); 21404 this.pasteKey = this.pasteKey.bind(this); 21405 this.zoomInZero = this.zoomInZero.bind(this); 21406 this.handleDocumentHidden = this.handleDocumentHidden.bind(this); 21407 this.zoomInPressed = this.zoomInPressed.bind(this); 21408 this.zoomOutPressed = this.zoomOutPressed.bind(this); 21409 this.escapePressed = this.escapePressed.bind(this); 21410 this.enterPressed = this.enterPressed.bind(this); 21411 this.cmdctrlKeyHandle = this.cmdctrlKeyHandle.bind(this); 21412 this.historyDo = this.historyDo.bind(this); 21413 this.historyManage = this.historyManage.bind(this); 21414 this.historyLoaded = this.historyLoaded.bind(this); 21415 this.shouldReact = this.shouldReact.bind(this); 21416 this.panStarted = this.panStarted.bind(this); 21417 this.selectionForNoviceStarted = this.selectionForNoviceStarted.bind(this); 21418 this.selectionForNoviceStopped = this.selectionForNoviceStopped.bind(this); 21419 this.panStopped = this.panStopped.bind(this); 21420 this.setAnnotationsVisibility = this.setAnnotationsVisibility.bind(this); 21421 this.downloadPressed = this.downloadPressed.bind(this); 21422 this.doDefaultZoom = this.doDefaultZoom.bind(this); 21423 this.toggleCleanPreviewPressed = this.toggleCleanPreviewPressed.bind(this); 21424 this.defaultZoomMouse = this.defaultZoomMouse.bind(this); 21425 this.historyByKey = this.historyByKey.bind(this); 21426 this.removeObjectByKey = this.removeObjectByKey.bind(this); 21427 this.selectToolByKey = this.selectToolByKey.bind(this); 21428 this.saveCurrentClip_embedCapturing = this.saveCurrentClip_embedCapturing.bind(this); 21429 this.cropClippedImage = this.cropClippedImage.bind(this); 21430 this.saveCurrentClip = this.saveCurrentClip.bind(this); 21431 this.clipToClipboard = this.clipToClipboard.bind(this); 21432 this.trash = this.trash.bind(this); 21433 this.clear = this.clear.bind(this); 21434 this.addImage = this.addImage.bind(this); 21435 this.shapeAfterTransforming = this.shapeAfterTransforming.bind(this); 21436 this.drawHout = this.drawHout.bind(this); 21437 this.drawHover = this.drawHover.bind(this); 21438 this.releaseClone = this.releaseClone.bind(this); 21439 this.snapAngleRotating = this.snapAngleRotating.bind(this); 21440 this.bringToFront = this.bringToFront.bind(this); 21441 this.selectLast = this.selectLast.bind(this); 21442 // this.selectLastAfterRemoving = this.selectLastAfterRemoving.bind(this); 21443 this.selectAll = this.selectAll.bind(this); 21444 this.handleTextChange = this.handleTextChange.bind(this); 21445 this.saveObjectData = this.saveObjectData.bind(this); 21446 this.clearObjectData = this.clearObjectData.bind(this); 21447 this.ExtensionMessenger = new ExtensionMessenger["a" /* default */](this); 21448 this.resizeCanvas = this.resizeCanvas.bind(this); 21449 this.resizeWindow = this.resizeWindow.bind(this); 21450 this.turnAllControlsOn = this.turnAllControlsOn.bind(this); 21451 this.turnAllControlsOff = this.turnAllControlsOff.bind(this); 21452 this.startPageInteractions = this.startPageInteractions.bind(this); 21453 this.stopPageInteractions = this.stopPageInteractions.bind(this); 21454 this.zoomHandler = this.zoomHandler.bind(this); 21455 this.getCanvas = this.getCanvas.bind(this); 21456 // this.handleBrowserMessaging = this.handleBrowserMessaging.bind(this); 21457 // this.toggleBorders = this.toggleBorders.bind(this); 21458 21459 this.tools = {}; 21460 this.blurRadius = 20; 21461 this.markers = []; 21462 } 21463 static getDerivedStateFromProps(nextProps, prevState) { 21464 let ret = {}; 21465 if (nextProps.zoom !== prevState.zoom) { 21466 ret.zoom = nextProps.zoom; 21467 } 21468 if (nextProps.zoomPoint.x !== prevState.zoomPoint.x || nextProps.zoomPoint.y !== prevState.zoomPoint.y) { 21469 ret.zoomPoint = nextProps.zoomPoint; 21470 } 21471 if (nextProps.sizes.left !== prevState.sizes.left || nextProps.sizes.top !== prevState.sizes.top || nextProps.sizes.width !== prevState.sizes.width || nextProps.sizes.height !== prevState.sizes.height) { 21472 ret.sizes = { 21473 ...nextProps.sizes 21474 }; 21475 } 21476 if (nextProps.tools.tool !== prevState.tool) { 21477 ret.tool = nextProps.tools.tool; 21478 } 21479 if (nextProps.newMarker !== prevState.newMarker) { 21480 ret.newMarker = nextProps.newMarker; 21481 } 21482 if (prevState.imageMode !== nextProps.imageMode) { 21483 ret.imageMode = nextProps.imageMode; 21484 } 21485 if (prevState.videoMode !== nextProps.videoMode) { 21486 ret.videoMode = nextProps.videoMode; 21487 } 21488 if (prevState.previewMode !== nextProps.previewMode) { 21489 ret.previewMode = nextProps.previewMode; 21490 } 21491 if (prevState.zoomPanDisabled !== nextProps.zoomPanDisabled) { 21492 ret.zoomPanDisabled = nextProps.zoomPanDisabled; 21493 } 21494 if (prevState.pageInteractionsMode !== nextProps.pageInteractionsMode) { 21495 ret.pageInteractionsMode = nextProps.pageInteractionsMode; 21496 } 21497 if (prevState.videoCapture !== nextProps.videoCapture) { 21498 ret.videoCapture = nextProps.videoCapture; 21499 } 21500 if (prevState.clipped !== nextProps.clipped) { 21501 ret.clipped = nextProps.clipped; 21502 } 21503 if (prevState.embedSavingProcess !== nextProps.embedSavingProcess) { 21504 ret.embedSavingProcess = nextProps.embedSavingProcess; 21505 } 21506 if (prevState.commentsMoving !== nextProps.commentsMoving) { 21507 ret.commentsMoving = nextProps.commentsMoving; 21508 } 21509 if (prevState.unsavedChanges !== nextProps.unsavedChanges) { 21510 ret.unsavedChanges = nextProps.unsavedChanges; 21511 } 21512 // if (prevState.commentsCancelled !== nextProps.commentsCancelled) { 21513 // ret.commentsCancelled = nextProps.commentsCancelled; 21514 // } 21515 21516 return Object.keys(ret).length > 0 ? ret : null; 21517 } 21518 getCenterPointOfTheEmbed(pure) { 21519 let tag = this.util.getEmbedTagName(); 21520 let parent = document.getElementsByTagName(tag)[0]; 21521 if (!parent) return { 21522 x: 0, 21523 y: 0 21524 };
21525 let cs = window.getComputedStyle(parent); 21526 let csleft = parseFloat(cs.left.replace("px", "")); 21527 let cstop = parseFloat(cs.top.replace("px", "")); 21528 let cswidth = parseFloat(cs.width.replace("px", "")); 21529 let csheight = parseFloat(cs.height.replace("px", "")); 21530 let center = { 21531 x: (pure ? 0 : csleft) + cswidth / 2, 21532 y: (pure ? 0 : cstop) + csheight / 2 21533 }; 21534 return center; 21535 } 21536 shouldComponentUpdate(nextProps, nextState) { 21537 let should = this.dynamic.justCleared || !this.equals(nextState) || nextProps.embedSavingProcess > 0 || this.props.clip.transforming != nextProps.clip.transforming || this.props.newMarker != nextProps.newMarker || this.props.zoom != nextProps.zoom || this.props.zoomPoint.x != nextProps.zoomPoint.x || this.props.zoomPoint.y != nextProps.zoomPoint.y || this.state.sizes.left !== nextProps.sizes.left || this.state.sizes.top !== nextProps.sizes.top || this.state.sizes.width !== nextProps.sizes.width || this.props.navigationMode !== nextProps.navigationMode || this.state.sizes.height !== nextProps.sizes.height; // equals() is your implementation 21538 21539 if (this.state.sizes.left !== nextProps.sizes.left || this.state.sizes.top !== nextProps.sizes.top || this.state.sizes.width !== nextProps.sizes.width || this.state.sizes.height !== nextProps.sizes.height) { 21540 this.resizeCanvas(); 21541 } 21542 if (should) { 21543 this.dynamic.justCleared = false; 21544 if (this.state.tool !== nextProps.tools.tool) { 21545 this.setAnnotationTool(this.state.tool, nextProps.tools.tool); 21546 } 21547 if (!this.props.markerMoving && nextProps.markerMoving) { 21548 this.setCommentDragCursor(true); 21549 // this.dynamic.defaultCursor = "grabbing" 21550 } 21551 if (!nextProps.markerMoving && this.props.markerMoving) { 21552 this.setCommentDragCursor(false); 21553 // this.dynamic.defaultCursor = "default" 21554 } 21555 if (!this.state.commentsMoving && nextProps.commentsMoving) { 21556 this.setCommentDragCursor(true); 21557 } 21558 if (!nextProps.commentsMoving && this.state.commentsMoving) { 21559 this.setCommentDragCursor(false); 21560 } 21561 21562 // zoomhandler 21563 let c = this.dynamic; 21564 if (c.backgroundImage) { 21565 this.isOut = this.state.sizes.left > c.backgroundImage.calcCoords().tl.x || this.state.sizes.top > c.backgroundImage.calcCoords().tl.y || this.state.sizes.left + this.state.sizes.width < c.backgroundImage.calcCoords().br.x || this.state.sizes.top + this.state.sizes.height < c.backgroundImage.calcCoords().br.y; 21566 // console.log(this.state.sizes) 21567 // console.log(c.backgroundImage.calcCoords()) 21568 // console.log(this.state.sizes.left > c.backgroundImage.calcCoords().tl.x 21569 // , this.state.sizes.top > c.backgroundImage.calcCoords().tl.y 21570 // , (this.state.sizes.left + this.state.sizes.width) < c.backgroundImage.calcCoords().br.x 21571 // , (this.state.sizes.top + this.state.sizes.height) < c.backgroundImage.calcCoords().br.y) 21572 // console.log(this.isOut) 21573 } 21574 if (!this.state.zoomPanDisabled // disable zoom if needed 21575 && this.state.zoom !== nextProps.zoom && this.props.embedMode) { 21576 this.props.setCanvasInteraction(); 21577 21578 // zoom animation http://jsfiddle.net/5KKQ2/813/ 21579 if (nextProps.zoomPoint.x === null && this.dynamic.backgroundImage) { 21580 // zoom with buttons 21581 21582 let object = this.dynamic.getActiveObject(); 21583 let comment = this.props.commentDialogOpened ? this.props.markers[this.props.currentMarker].position : false; 21584 let currentZoom = c.getZoom(); 21585 if (object) { 21586 let box = object.getBoundingRect(); 21587 let p = {}; 21588 p.x = box.left + box.width / 2; 21589 p.y = box.top + box.height / 2; 21590 dist_fabric["fabric"].util.animate({ 21591 startValue: currentZoom, 21592 endValue: nextProps.zoom, 21593 duration: 300, 21594 onChange: function (zoomvalue) { 21595 c.zoomToPoint(p, zoomvalue); 21596 c.renderAll(); 21597 }, 21598 onComplete: () => { 21599 c.calcViewportBoundaries(); 21600 c.renderAll(); 21601 setTimeout(() => this.props.setCanvasNoInteraction(), 100); 21602 } 21603 }); 21604 } else if (comment) { 21605 let p = dist_fabric["fabric"].util.transformPoint(comment, this.dynamic.viewportTransform); 21606 dist_fabric["fabric"].util.animate({ 21607 startValue: currentZoom, 21608 endValue: nextProps.zoom, 21609 duration: 300, 21610 onChange: function (zoomvalue) { 21611 c.zoomToPoint(p, zoomvalue); 21612 c.renderAll(); 21613 }, 21614 onComplete: () => { 21615 c.calcViewportBoundaries(); 21616 c.renderAll(); 21617 setTimeout(() => this.props.setCanvasNoInteraction(), 100); 21618 } 21619 }); 21620 } else if (Math.abs(currentZoom - nextProps.zoom) < 0.01) { 21621 let center = this.getCenterPointOfTheEmbed(true); 21622 let p = center; 21623 let zoomvalue = nextProps.zoom; 21624 let ciX = c.backgroundImage.calcCoords().tl.x + (c.backgroundImage.calcCoords().tr.x - c.backgroundImage.calcCoords().tl.x) / 2; 21625 let ciY = c.backgroundImage.calcCoords().tl.y + (c.backgroundImage.calcCoords().bl.y - c.backgroundImage.calcCoords().tl.y
21625) / 2; 21626 let pX = c.getCenter().left - ciX; 21627 let pY = c.getCenter().top - ciY; 21628 c.relativePan(new dist_fabric["fabric"].Point(pX, pY)); 21629 c.zoomToPoint(p, zoomvalue); 21630 c.calcViewportBoundaries(); 21631 c.renderAll(); 21632 setTimeout(() => this.props.setCanvasNoInteraction(), 100); 21633 } else { 21634 let center = this.getCenterPointOfTheEmbed(true); 21635 let p = center; 21636 let zoomvalue = isNaN(nextProps.zoom) ? 1 : nextProps.zoom; 21637 dist_fabric["fabric"].util.animate({ 21638 startValue: currentZoom, 21639 endValue: zoomvalue, 21640 duration: 300, 21641 onChange: function (zoomvalue) { 21642 c.zoomToPoint(p, zoomvalue); 21643 let ciX = c.backgroundImage.calcCoords().tl.x + (c.backgroundImage.calcCoords().tr.x - c.backgroundImage.calcCoords().tl.x) / 2; 21644 let ciY = c.backgroundImage.calcCoords().tl.y + (c.backgroundImage.calcCoords().bl.y - c.backgroundImage.calcCoords().tl.y) / 2; 21645 let pX = c.getCenter().left - ciX; 21646 let pY = c.getCenter().top - ciY; 21647 c.relativePan(new dist_fabric["fabric"].Point(pX, pY)); 21648 }, 21649 onComplete: () => { 21650 c.calcViewportBoundaries(); 21651 c.renderAll(); 21652 setTimeout(() => this.props.setCanvasNoInteraction(), 100); 21653 } 21654 }); 21655 } 21656 21657 // c.relativePan(new fabric.Point(panPoint.x, panPoint.y)); 21658 21659 // let center = this.getCenterPointOfTheEmbed(true); 21660 // c.zoomToPoint(center, nextProps.zoom); 21661 // let ciX = c.backgroundImage.calcCoords().tl.x + (c.backgroundImage.calcCoords().tr.x - c.backgroundImage.calcCoords().tl.x) / 2; 21662 // let ciY = c.backgroundImage.calcCoords().tl.y + (c.backgroundImage.calcCoords().bl.y - c.backgroundImage.calcCoords().tl.y) / 2; 21663 // let pX = c.getCenter().left - ciX; 21664 // let pY = c.getCenter().top - ciY; 21665 // c.relativePan(new fabric.Point(pX, pY)); 21666 } else { 21667 this.props.setCanvasNoInteraction(); 21668 let rect = { 21669 x1: c.backgroundImage.calcCoords().tl.x, 21670 y1: c.backgroundImage.calcCoords().tl.y, 21671 x2: c.backgroundImage.calcCoords().br.x, 21672 y2: c.backgroundImage.calcCoords().br.y 21673 }; 21674 let point = nextProps.zoomPoint; 21675 let outOfClip = !(rect.x1 <= nextProps.zoomPoint.x && rect.x2 >= nextProps.zoomPoint.x && rect.y1 <= nextProps.zoomPoint.y && rect.y2 >= nextProps.zoomPoint.y); 21676 let ciX = (rect.x2 - rect.x1) / 2; 21677 let ciY = (rect.y2 - rect.y1) / 2; 21678 if (outOfClip) { 21679 point = { 21680 x: c.getCenter().left, 21681 y: c.getCenter().top 21682 }; 21683 } 21684 c.zoomToPoint(point, nextProps.zoom); 21685 // if (outOfClip) { 21686 // console.log("x:",c.getCenter().left, ciX) 21687 // console.log("y:", c.getCenter().top, ciY) 21688 // let pX = c.getCenter().left - ciX; 21689 // let pY = c.getCenter().top - ciY; 21690 // c.relativePan(new fabric.Point(pX, pY)); 21691 // } 21692 } 21693 } 21694 if (this.state.videoCapture !== nextProps.videoCapture) { 21695 this.util.log("CANVAS START VC", nextProps.videoCapture); 21696 nextProps.videoCapture ? this.startVideoCapture() : this.stopVideoCapture(); 21697 } 21698 if (this.state.videoMode !== nextState.videoMode) { 21699 this.util.toggleShapeControls(this.dynamic, !nextState.videoMode); 21700 } 21701 if (this.state.embedSavingProcess !== nextProps.embedSavingProcess && nextProps.embedSavingProcess > 0) { 21702 this.handleBrowser_BG__CONTENT__EMBED_SAVE_EDITOR(); 21703 } 21704 21705 // if (this.state.clipped !== nextProps.clipped) { 21706 // // stop overscroll if clip is clipped 21707 // this.toggleHTMLAnnotationClass(); 21708 // } 21709 } 21710 return should; 21711 } 21712 equals(nextState) { 21713 return this.state.tool === nextState.tool 21714 // && this.state.commentsCancelled === nextState.commentsCancelled 21715 && this.state.zoomPanDisabled === nextState.zoomPanDisabled && this.state.commentsMoving === nextState.commentsMoving && this.state.previewMode === nextState.previewMode && this.state.imageMode === nextState.imageMode && this.state.zoom !== nextState.zoom && this.state.videoMode === nextState.videoMode && this.state.pageInteractionsMode === nextState.pageInteractionsMode && this.state.embedSavingProcess === nextState.embedSavingProcess && this.state.videoCapture === nextState.videoCapture && this.state.unsavedChanges === nextState.unsavedChanges; 21716 } 21717 setCommentDragCursor(set) { 21718 if (set) { 21719 this.bup2Cursor = this.dynamic.defaultCursor; 21720 this.dynamic.defaultCursor = commentingCursor; 21721 } else { 21722 this.dynamic.defaultCursor = this.bup2Cursor; 21723 } 21724 } 21725 initTools() { 21726 this.tools = {}; 21727 this.tools["select"] = new tools_Select(this); 21728 if (true) { 21729 this.tools["move"] = new tools_Move(this); 21730 } 21731 // if (this.props.previewMode) return; 21732 this.tools["cursor"] = new tools_Cursor(this); 21733 this.tools["highlighter"] = new tools_Highlighter(this); 21734 this.tools["pen"] = new tools_Pen(this); 21735 this.tools["rect"] = new tools_Rect(this); 21736 this.tools["ellipse"] = new tools_Ellipse(this); 21737 this.tools["triangle"] = new tools_Triangle(this); 21738 this.tools["line"] = new tools_Line(this); 21739 this.tools["arrow"] = new tools_Arrow(this); 21740 this.tools["arrowtext"] = new tools_ArrowText(this); 21741 this.tools["text"] = new tools_Text(this); 21742 this.tools["blur"] = new tools_Blur(this); 21743 this.tools["crop"] = new tools_Crop(this); 21744 this.tools["img"] = new tools_Img(this); 21745 } 21746 async componentDidMount() { 21747 // this.props.showPleaseWait(); 21748 this.initCanvas(); 21749 this.initTools(); 21750 document.addEventListener("keydown", this.spacePressedHandle, false); 21751 document.addEventListener("keyup", this.spaceUnpressedHandle, false); 21752 if (this.props.embedMode) { 21753 let c = document.createElement("canvas"); 21754 let w = this.props.embedImageWidth + 2; 21755 let h = this.props.embedImageHeight + 2; 21756 c.setAttribute("width", w); 21757 c.setAttribute("height", h); 21758 let i = new Image(); 21759 const isCorsNeeded = this.props.embedImageUrl.includes('drive.google') || this.props.embedImageUrl.includes("googleapis.com/clipular-clips"); 21760 const imageUrl = this.props.embedImageUrl.includes('drive.google') ? this.props.embedImageUrl.replace('&export=download', '&export=view') : this.props.embedImageUrl; 21761 if (isCorsNeeded) i.setAttribute("crossOrigin", "anonymous"); 21762 let src = Object(app_utils["d" /* getViewableImageUrl */])(imageUrl); 21763 console.log("Current clip:", src); 21764 let data = this.props.clipclipMode ? (d => { 21765 let s = d; 21766 let ret = [s.slice(s.indexOf(',') + 1), d.split(';')[0].split(':')[1].split(',')[0]]; 21767 return ret; 21768 })(src) : await Object(utils["g" /* getBase64 */])(src); 21769 this.setImage({ 21770 // "data": c.toDataURL(), 21771 "data": this.props.clipclipMode ? src : 'data:' + data[1] + ';base64,' + data[0], 21772 "mime": data[1], 21773 "width": this.props.embedImageWidth + 2, 21774 "height": this.props.embedImageHeight + 2, 21775 "crossOrigin": "anonymous" 21776 }); 21777 document.addEventListener("keydown", this.panStarted, false); 21778 this.dynamic.on("mouse:down:before", this.selectionForNoviceStarted); 21779 document.addEventListener("keyup", this.panStopped, false); 21780 document.addEventListener("mousedown", this.panStarted, false); 21781 document.addEventListener("mouseup", this.panStopped, false); 21782 document.addEventListener("mouseup", this.selectionForNoviceStopped, false); 21783 // document.addEventListener("keydown", this.resetZoomPan, false); 21784 document.addEventListener("keydown", this.resetZoom100, false); 21785 document.addEventListener("keydown", this.hideToolbarsKeyDown, true); 21786 this.props.setCanvasNoInteraction(); 21787 } else { 21788 this.initCanvasEvents(); 21789 this.props.setCanvasNoInteraction(); 21790 } 21791 this.ExtensionMessenger.initBrowserMessaging(); 21792 this.defaultTool = 'select'; 21793 if (this.props.previewMode) this.setAnnotationTool('select', 'move');else this.setAnnotationTool('select', this.props.tools.tool); 21794 window.addEventListener("resize", this.resizeWindow, false); 21795 document.addEventListener("keydown", this.selectToolByKey, false); 21796 document.addEventListener("keydown", this.removeObjectByKey, false); 21797 document.addEventListener("keydown", this.historyByKey, false); 21798 document.addEventListener("keydown", this.selectAll, false); 21799 document.addEventListener("keydown", this.copyKey, false); 21800 document.addEventListener("keydown", this.pasteKey, false); 21801 document.addEventListener("keydown", this.shiftKeyHandle, true); 21802 document.addEventListener("keydown", this.altKeyHandle, true); 21803 document.addEventListener("keydown", this.cmdctrlKeyHandle, false); 21804 document.addEventListener("keydown", this.escapePressed, false); 21805 document.addEventListener("keydown", this.zoomInZero, true); 21806 document.addEventListener("keydown", this.zoomInPressed, true); 21807 document.addEventListener("keydown", this.zoomOutPressed, true); 21808 document.addEventListener("keydown", this.downloadPressed, false); 21809 document.addEventListener("keydown", this.enterPressed, false); 21810 document.addEventListener("keyup", this.cmdctrlKeyHandle, false); 21811 document.addEventListener("keyup", this.shiftKeyHandle, false); 21812 document.addEventListener("keyup", this.altKeyHandle, false); 21813 document.addEventListener("keydown", this.doDefaultZoom, false); 21814 if (this.props.embedMode || this.props.previewMode) { 21815 document.addEventListener("keydown", this.toggleCleanPreviewPressed, true); 21816 } 21817 document.addEventListener("DOMMouseScroll", this.defaultZoomMouse, false); 21818 // document.addEventListener("mousewheel", this.defaultZoomMouse, false); 21819 window.addEventListener("wheel", this.defaultZoomMouse); 21820 window.changeTool = this.props.changeTool; 21821 } 21822 componentDidUpdate(prevProps, prevState) { 21823 var _this$props$copyAsIma; 21824 if (prevProps.previewMode !== this.props.previewMode) { 21825 this.initTools(); 21826 if (this.props.previewMode) this.setAnnotationTool('select', 'move');else this.setAnnotationTool('select', this.props.tools.tool); 21827 } 21828 if ((_this$props$copyAsIma = this.props.copyAsImage) !== null && _this$props$copyAsIma !== void 0 && _this$props$copyAsIma.copyAsImage) { 21829 this.clipToClipboard(); 21830 this.props.copyAsImage.setCopyAsImageFalse(); 21831 } 21832 // update save callback 21833 if (this.props.embedMode && this.props.shareSaveCurrentClip) { 21834 this.props.shareSaveCurrentClip(this.saveCurrentClipIfThereWereChanges); 21835 } 21836 } 21837 defaultZoomMouse(e) { 21838 console.log("zoome mouse", this.cmdKey, this.ctrlKey, this.props.embedMode); 21839 // if (this.cmdKey || this.ctrlKey || this.props.embedMode) e.preventDefault(); 21840 } 21841 doDefaultZoom(e) { 21842 if ((e.which == '61' || e.which == '107' || e.which == '173' || e.which == '109' || e.which == '187' || e.which == '189') && (this.cmdKey || this.ctrlKey)) { 21843 e.preventDefault(); 21844 } 21845 } 21846 downloadPressed(e) { 21847 if (e.keyCode == 83 && (this.cmdKey || this.ctrlKey)) { 21848 let download = !this.props.clipclipMode; // download if not a clipclipMode - else - call saveCallback 21849 e.preventDefault(); 21850 e.stopImmediatePropagation(); 21851 this.saveCurrentClip(download); 21852 } 21853 } 21854 resetZoomPan(e) { 21855 if ((e.keyCode == 48 || e.keyCode == 96) && (this.cmdKey || this.ctrlKey)) { 21856 let zoomToPoint = { 21857 x: null, 21858 y: null 21859 }; 21860 // this.dynamic.zoomToPoint(zoomToPoint, zoom); 21861 let to100Zoom = this.state.zoom <= this.props.initialZoom + 0.00001 && this.state.zoom >= this.props.initialZoom; 21862 let zoom = this.props.initialZoom + 0.00001 == this.state.zoom ? this.props.initialZoom : this.props.initialZoom + 0.00001; 21863 this.props.zoomTo(to100Zoom ? 1 : zoom, zoomToPoint); 21864 this.saveObjectData(e); 21865 } 21866 return false;
21867 } 21868 resetZoom100(e) { 21869 // if (e.keyCode==48 && (this.cmdKey || this.ctrlKey) ) { 21870 // const p = { 21871 // x: window.innerWidth / 2, 21872 // y: window.innerHeight / 2 21873 // } 21874 // // this.dynamic.zoomToPoint(zoomToPoint, zoom); 21875 21876 // this.props.zoomTo(1.000001, p); 21877 // // this.saveObjectData(e); 21878 // } 21879 return false; 21880 } 21881 // zoomPanModeChange 21882 21883 forceResetZoomPan(initialZoom) { 21884 let zoomToPoint = { 21885 x: null, 21886 y: null 21887 }; 21888 this.props.zoomTo(initialZoom, zoomToPoint); 21889 this.saveObjectData(); 21890 return false; 21891 } 21892 selectionForNoviceStarted(e) { 21893 const isModeNovice = this.props.navigationMode === 'novice'; 21894 if (!isModeNovice || this.props.previewMode) return; 21895 if (this.spacePressed && e.button !== 2 && e.button !== 3 && this.currentTool !== 'select') { 21896 //spacebar 21897 this.prevTool = this.currentTool; 21898 this.props.changeTool("select"); 21899 // this.selectionWithSpacebar = true 21900 // this.dynamic.fire("mouse:down", { e }) 21901 } 21902 } 21903 selectionForNoviceStopped(e) { 21904 // const isModeNovice = this.props.navigationMode === 'novice' 21905 // if (!this.selectionWithSpacebar || !isModeNovice || this.props.previewMode || this.currentTool !== 'select') return; 21906 // e.stopImmediatePropagation(); 21907 // this.props.changeTool(this.prevTool); 21908 // this.selectionWithSpacebar = false 21909 // 21910 } 21911 panStarted(e) { 21912 const isModeNovice = this.props.navigationMode === 'novice'; 21913 if (e.target.tagName == 'INPUT') return; 21914 if (this.props.commentDialogOpened) return; 21915 if ((e.keyCode == 32 && !isModeNovice || e.which == 2) && this.state.tool != 'move' || e.button === 2 || e.button === 3) { 21916 this.prevTool = this.props.previewMode ? 'move' : this.state.tool || this.currentTool; 21917 e.preventDefault(); 21918 e.stopImmediatePropagation(); 21919 this.props.changeTool("move"); 21920 if (e.button === 2 || e.button === 3) { 21921 this.dynamic.fire("mouse:down", { 21922 e 21923 }); 21924 } 21925 } 21926 } 21927 panStopped(e) { 21928 if ((e.keyCode == 32 || e.which == 2) && this.state.tool == 'move' || e.button === 2 || e.button === 3) { 21929 e.preventDefault(); 21930 e.stopImmediatePropagation(); 21931 if (e.button === 2 || e.button === 3) this.dynamic.fire("mouse:up", { 21932 e 21933 }); 21934 this.props.changeTool(this.prevTool); 21935 } 21936 } 21937 shouldReact() { 21938 if (this.props.clip.clipped || this.props.embedMode || this.props.embedCapturingMode || !this.props.commentDialogOpened) return true;else return false; 21939 } 21940 componentWillUnmount() { 21941 document.removeEventListener("keydown", this.spacePressedHandle, false); 21942 document.removeEventListener("keyup", this.spaceUnpressedHandle, false); 21943 if (this.props.embedMode) { 21944 document.removeEventListener("keydown", this.panStarted, false); 21945 this.dynamic.on("mouse:down:before", this.selectionForNoviceStarted, false); 21946 document.removeEventListener("keyup", this.panStopped, false); 21947 document.removeEventListener("mousedown", this.panStarted, false); 21948 document.removeEventListener("mouseup", this.panStopped, false); 21949 document.removeEventListener("mouseup", this.selectionForNoviceStopped, false); 21950 // document.removeEventListener("keydown", this.resetZoomPan, false); 21951 document.removeEventListener("keydown", this.resetZoom100, false); 21952 } 21953 window.removeEventListener("resize", this.resizeWindow, false); 21954 document.removeEventListener("keydown", this.selectToolByKey, false); 21955 document.removeEventListener("keydown", this.removeObjectByKey, false); 21956 document.removeEventListener("keydown", this.historyByKey, false); 21957 document.removeEventListener("keydown", this.selectAll, false); 21958 document.removeEventListener("keydown", this.copyKey, false); 21959 document.removeEventListener("keydown", this.pasteKey, false); 21960 document.removeEventListener("keydown", this.shiftKeyHandle, false); 21961 document.removeEventListener("keydown", this.altKeyHandle, false); 21962 document.removeEventListener("keydown", this.cmdctrlKeyHandle, false); 21963 document.removeEventListener("keydown", this.escapePressed, false); 21964 document.removeEventListener("keydown", this.zoomInZero, false); 21965 document.removeEventListener("keydown", this.zoomInPressed, false); 21966 document.removeEventListener("keydown", this.zoomOutPressed, false); 21967 document.removeEventListener("keydown", this.enterPressed, false); 21968 document.removeEventListener("keydown", this.downloadPressed, false); 21969 document.removeEventListener("keydown", this.doDefaultZoom, false); 21970 document.removeEventListener("keydown", this.toggleCleanPreviewPressed, false); 21971 document.removeEventListener("DOMMouseScroll", this.defaultZoomMouse, false); 21972 // document.removeEventListener("mousewheel", this.defaultZoomMouse, false); 21973 window.removeEventListener("wheel", this.defaultZoomMouse, false); 21974 document.removeEventListener("keyup", this.altKeyHandle, false); 21975 document.removeEventListener("keyup", this.shiftKeyHandle, false); 21976 document.removeEventListener("keyup", this.cmdctrlKeyHandle, false); 21977 this.uninitCanvas(); 21978 Canvas_browser.runtime && Canvas_browser.runtime.id && this.ExtensionMessenger.stopBrowserMessaging(); 21979 } 21980 stopPageInteractions() { 21981 this.props.stopPageInteractions(); 21982 } 21983 startPageInteractions() { 21984 this.props.startPageInteractions(); 21985 } 21986 resizeWindow() { 21987 let s = this.util.getCanvasSizes(this.props.embedMode, this.props.previewMode); 21988 if (document.body.classList.contains("hiddentoolbars-mode")) { 21989 s.height = s.height + 46; 21990 } 21991 this.props.setNewSizes(s); 21992 } 21993 resizeCanvas() { 21994 clearTimeout(this.resizeTimeout); 21995 // this.props.setCanvasInteraction(); 21996 this.resizeTimeout = setTimeout(() => { 21997 let c = this.dynamic; 21998 if (!c.backgroundImage) { 21999 return null; 22000 } 22001 let sizes = this.state.sizes; 22002 c.setWidth(sizes.width); 22003 c.setHeight(sizes.height); 22004 22005 // this.props.setCanvasNoInteraction(); 22006 22007 let ciX = c.backgroundImage.calcCoords().tl.x + (c.backgroundImage.calcCoords().tr.x - c.backgroundImage.calcCoords().tl.x) / 2; 22008 let ciY = c.backgroundImage.calcCoords().tl.y + (c.backgroundImage.calcCoords().bl.y - c.backgroundImage.calcCoords().tl.y
22008) / 2; 22009 let pX = c.getCenter().left - ciX; 22010 let pY = c.getCenter().top - ciY; 22011 c.relativePan(new dist_fabric["fabric"].Point(pX, pY)); 22012 c.renderAll(); 22013 c.calcOffset(); 22014 }, 10); 22015 } 22016 22017 // toggleHTMLAnnotationClass() { 22018 // this.util.log("%cCANVAS: scroll fixed", "color:red"); 22019 // document.getElementsByTagName("html")[0].classList.toggle("__scim-annotationMode__"); 22020 // } 22021 22022 removeObjectByKey(e) { 22023 if (this.props.previewMode) return; 22024 // catch removing of area 22025 let canvas = this.dynamic; 22026 let objects = canvas.getActiveObjects(); 22027 // 8 backspace, 46 delete keycode // 22028 if (objects.length > 0 && [8, 46].includes(e.keyCode) && (this.props.imageMode || this.props.embedMode) && e.target.tagName === 'BODY') { 22029 objects.forEach(function (o) { 22030 canvas.remove(o); 22031 }); 22032 canvas.discardActiveObject(); 22033 } 22034 canvas.requestRenderAll(); 22035 } 22036 selectToolByKey(e) { 22037 if (!this.shouldReact()) return; 22038 if (this.props.previewMode) return; 22039 let tools = { 22040 83: 'select', 22041 72: 'highlighter', 22042 80: 'pen', 22043 76: 'line', 22044 65: 'arrow', 22045 82: 'rect', 22046 // 88: 'crop', 22047 69: 'triangle', 22048 //e 22049 79: 'ellipse', 22050 //o 22051 84: 'text', 22052 73: 'img', 22053 66: 'blur', 22054 88: 'arrowtext' 22055 }; 22056 let keys = Object.keys(tools); 22057 let notService = !e.shiftKey && !e.altKey && !e.metaKey && !e.ctrlKey; 22058 let okMode = this.props.imageMode || this.props.embedMode; 22059 if (notService && keys.includes("" + e.keyCode) && okMode && e.target.tagName === 'BODY') { 22060 this.props.changeTool(tools[e.keyCode]); 22061 } 22062 } 22063 shiftKeyHandle(e) { 22064 if (!this.shouldReact()) return; 22065 this.shiftKey = e.shiftKey; 22066 // console.info("shiftkey", this.shiftKey) 22067 } 22068 altKeyHandle(e) { 22069 if (!this.shouldReact()) return; 22070 this.altKey = e.altKey; 22071 // console.info("altkey", this.altKey) 22072 } 22073 spacePressedHandle(e) { 22074 if (!this.shouldReact()) return; 22075 if (e.key === " ") { 22076 this.spacePressed = true; 22077 } 22078 // console.info("altkey", this.altKey) 22079 } 22080 spaceUnpressedHandle(e) { 22081 if (!this.shouldReact()) return; 22082 if (e.key === " ") { 22083 this.spacePressed = false; 22084 } 22085 // console.info("altkey", this.altKey) 22086 } 22087 cmdctrlKeyHandle(e) { 22088 this.cmdKey = e.metaKey; 22089 this.ctrlKey = e.ctrlKey; 22090 // console.info("cmdctrlkey", this.cmdKey) 22091 } 22092 isHistoryBlocked() { 22093 let keys = Object.keys(this.tools); 22094 let keysLength = keys.length; 22095 let blocked = false; 22096 let tools = this.tools; 22097 for (let i = 0; i < keysLength; i++) { 22098 // move into tool module, move image & into module 22099 blocked = tools[keys[i]].draw; // || tools[keys[i]].transform; 22100 if (blocked) break; 22101 } 22102 return blocked; 22103 } 22104 isHistoryKeysBlocked() { 22105 let keys = Object.keys(this.tools); 22106 let keysLength = keys.length; 22107 let blocked = false; 22108 let tools = this.tools; 22109 for (let i = 0; i < keysLength; i++) { 22110 // move into tool module, move image & into module 22111 blocked = tools[keys[i]].draw || tools[keys[i]].transform; 22112 if (blocked) break; 22113 } 22114 return blocked; 22115 } 22116 historyByKey(e) { 22117 if (!this.shouldReact()) return; 22118 let zkey = 90; 22119 let ykey = 89;
22120 let csz = (e.metaKey || e.ctrlKey) && (e.shiftKey && e.keyCode === zkey || ykey == e.keyCode); 22121 // let cy = e.ctrlKey && e.keyCode===zkey; 22122 let cz = (e.metaKey || e.ctrlKey) && !e.shiftKey && e.keyCode === zkey; 22123 let hkb = this.isHistoryKeysBlocked(); 22124 console.log(); 22125 if (!hkb) { 22126 if (csz) { 22127 this.reDo(); 22128 } else if (cz) { 22129 this.unDo(); 22130 } 22131 } 22132 // console.info("meta="+e.metaKey, "ctrl=" + e.ctrlKey, "shift="+e.shiftKey, "keycode="+e.keyCode, "keysblocked=", hkb) 22133 } 22134 selectAll(e) { 22135 if (!this.shouldReact()) return; 22136 let akey = 65; // a 22137 let ca = (e.metaKey || e.ctrlKey) && e.keyCode === akey; 22138 if (!ca || this.isHistoryKeysBlocked()) return; 22139 let canvas = this.dynamic; 22140 canvas.discardActiveObject(); 22141 var sel = new dist_fabric["fabric"].ActiveSelection(canvas.getObjects(), { 22142 canvas: canvas 22143 }); 22144 canvas.setActiveObject(sel); 22145 canvas.requestRenderAll(); 22146 } 22147 copyKey(e) { 22148 if (!this.shouldReact()) return; 22149 let that = this; 22150 let ckey = 67; 22151 let cc = (e.metaKey || e.ctrlKey) && e.keyCode === ckey; 22152 let shape = this.dynamic.getActiveObject(); 22153 if (shape && cc) { 22154 this.copiedShape = shape; 22155 // shape.clone((clone)=>{ 22156 // that.copiedShape = clone; 22157 // that.copiedShape.set({ 22158 // objectID: that.util.generateID(shape.toolName) 22159 // }); 22160 // }, this.specialFields); 22161 } 22162 } 22163 zoomInZero(e) { 22164 if (!this.shouldReact()) return; 22165 let that = this; 22166 let vkey = 48; // + 22167 let canvas = this.dynamic; 22168 let cp = (e.metaKey || e.ctrlKey) && e.keyCode === vkey; 22169 if (cp) { 22170 e.preventDefault(); 22171 const p = { 22172 x: window.innerWidth / 2, 22173 y: window.innerHeight / 2 22174 }; 22175 let to100Zoom = this.state.zoom <= this.props.initialZoom + 0.00001 && this.state.zoom >= this.props.initialZoom; 22176 let zoom = this.props.initialZoom + 0.00001 == this.state.zoom ? this.props.initialZoom : this.props.initialZoom + 0.00001; 22177 this.props.zoomTo(to100Zoom ? 1 : zoom, p); 22178 // this.props.zoomTo(this.props.initialZoom, p); 22179 } 22180 } 22181 zoomInPressed(e) { 22182 if (!this.shouldReact()) return; 22183 let that = this; 22184 let vkey = 187; // + 22185 let canvas = this.dynamic; 22186 let cp = (e.metaKey || e.ctrlKey) && (e.keyCode === vkey || e.keyCode == 61); 22187 if (cp) { 22188 e.preventDefault(); 22189 const nextZoom = Object(util["e" /* getNextZoom */])(this.props.zoom, 1); 22190 this.props.zoomTo(nextZoom, { 22191 x: null, 22192 y: null 22193 }); 22194 } 22195 } 22196 zoomOutPressed(e) { 22197 if (!this.shouldReact()) return; 22198 let that = this; 22199 let vkey = 189; // - 22200 let canvas = this.dynamic; 22201 let cm = (e.metaKey || e.ctrlKey) && (e.keyCode === vkey || e.keyCode == 173); 22202 if (cm) { 22203 e.preventDefault(); 22204 const nextZoom = Object(util["e" /* getNextZoom */])(this.props.zoom, -1); 22205 this.props.zoomTo(nextZoom, { 22206 x: null, 22207 y: null 22208 }); 22209 } 22210 } 22211 pasteKey(e) { 22212 if (!this.shouldReact()) return; 22213 let that = this; 22214 let vkey = 86; 22215 let canvas = this.dynamic; 22216 let cv = (e.metaKey || e.ctrlKey) && e.keyCode === vkey; 22217 if (this.copiedShape && cv) { 22218 canvas.off("keydown", this.pasteKey); 22219 this.copiedShape.clone(clone => { 22220 // this.copiedShape = clone; 22221 clone.set({ 22222 objectID: this.util.generateID(this.copiedShape.toolName) 22223 }); 22224 this.setupCustomOptionsForShape(clone); 22225 canvas.add(clone).setActiveObject(clone); 22226 canvas.requestRenderAll(); 22227 this.disableCustomEvents(); 22228 this.enableCustomEvents(); 22229 clone.trigger("special:copied", { 22230 copy: clone 22231 }); 22232 canvas.on("keydown", this.pasteKey); 22233 }, this.specialFields); 22234 } 22235 } 22236 escapePressed(e) { 22237 const esckey = 27; 22238 if (esckey === e.keyCode) { 22239 if (!this.shouldReact()) return; 22240 console.log("Canvas KeyDown", e.keyCode); 22241 let active = this.dynamic.getActiveObject(); 22242 if (this.currentTool === 'pen' || this.currentTool === 'highlighter') { 22243 let all = this.dynamic.getObjects(); 22244 if (all.length > 0) { 22245 e.stopImmediatePropagation(); 22246 let lastShape = all[all.length - 1]; 22247 if (active && (active.toolName === 'pen' || active.toolName === 'highlighter')) this.backToDefaultTool();else if ((lastShape.toolName == 'pen' || lastShape.toolName == 'highlighter') && !active) { 22248 lastShape.canvas.setActiveObject(lastShape); 22249 this.backToDefaultTool(); 22250 } else this.backToDefaultTool(); 22251 } else { 22252 this.backToDefaultTool(); 22253 } 22254 return; 22255 } else if (active) { 22256 this.backToDefaultTool(); 22257 e.stopImmediatePropagation(); 22258 this.dynamic.discardActiveObject().renderAll(); 22259 return; 22260 } 22261 let keys = Object.keys(this.tools); 22262 let keysLength = keys.length; 22263 let tools = this.tools; 22264 for (let i = 0; i < keysLength; i++) { 22265 let tool = tools[keys[i]]; 22266 if (tool.draw && !['text', 'img'].includes(tool.toolName)) { 22267 let canvas = this.dynamic; 22268 if (tool.toolName === 'pen' || tool.toolName === 'highlighter') { 22269 tool.shape.onMouseUp(); 22270 canvas.remove(this.getLastShape()); 22271 } else { 22272 canvas.remove(tools[keys[i]].shape); 22273 } 22274 canvas.requestRenderAll(); 22275 tool.draw = false;
22276 return; 22277 } 22278 } 22279 console.log("this is canvas escape"); 22280 if (this.props.escapePressed) this.props.escapePressed(); 22281 } 22282 } 22283 enterPressed(e) { 22284 if (!this.shouldReact()) return; 22285 let enterkey = 13; 22286 if (enterkey === e.keyCode && (this.cmdKey || this.ctrlKey) && (this.state.clipped || this.state.embed)) { 22287 this.saveCurrentClip(); 22288 } 22289 } 22290 22291 //other events 22292 22293 groupOnScaling(e) { 22294 let group = e.target; // group 22295 group.forEachObject(function (item) { 22296 group.removeWithUpdate(item).addWithUpdate(item); 22297 }); 22298 group.setCoords(); 22299 this.dynamic.renderAll(); 22300 } 22301 groupOnMoving(e) { 22302 let obj = e.target; // group 22303 22304 this.groupEdit = true; 22305 obj.forEachObject(function (inner) { 22306 inner.notMe = true; 22307 inner.linkToGroup = obj; 22308 // inner.set({hasBorders: false}) 22309 inner.trigger("moving", { 22310 target: inner, 22311 notMe: true, 22312 who: obj, 22313 e: e.e 22314 }); 22315 }); 22316 this.groupEdit = false; 22317 } 22318 groupOnModified(e) { 22319 let obj = e.target; // group 22320 // let wg = obj.width * obj.scaleX; 22321 // let hg = obj.height * obj.scaleY; 22322 22323 this.groupEdit = true; 22324 obj.forEachObject(function (inner) { 22325 inner.trigger("modified", { 22326 target: inner 22327 }); 22328 }); 22329 this.groupEdit = false; 22330 } 22331 22332 // gestureZoom = (o) => { 22333 // if (o.e.touches.length !== 2) return; 22334 // debugger; 22335 // var delta = o.e.deltaY; 22336 // var zoom = this.dynamic.getZoom(); 22337 // zoom *= 0.999 ** delta; 22338 // const zoomToPoint = { 22339 // x: (o.e.touches[0].clientX + o.e.touches[1].clientX) / 2, 22340 // y: (o.e.touches[0].clientY + o.e.touches[1].clientY) / 2 22341 // }; 22342 // this.props.zoomTo(zoom, zoomToPoint); 22343 // } 22344 22345 initCanvas() { 22346 this.props.resetToolsSettings(); 22347 let dynamicSettings = this.canvasSettings; 22348 dist_fabric["fabric"].IText.prototype.padding = 10; 22349 dist_fabric["fabric"].IText.prototype.lockUniScaling = true; 22350 22351 // rewrite default cursors 22352 dist_fabric["fabric"].Object.prototype.perPixelTargetFind = false; 22353 dist_fabric["fabric"].Image.prototype.targetFindTolerance = 4; 22354 dist_fabric["fabric"].Canvas.prototype.cursorMap = this.cursorMap; 22355 let path = this.util.getExtContentUrl(); 22356 let embedPath = ""; 22357 if (this.props.embedMode && !path) embedPath = "/embeds/"; 22358 if (this.props.embedMode && this.props.clipclipMode) embedPath = "./"; 22359 if (this.props.embedCapturingMode && !path) embedPath = "/embed-capturing/"; 22360 dist_fabric["fabric"].Canvas.prototype.rotationCursor = ["url(", embedPath, path, rotate_default.a, ") 10 21, default"].join(""); 22361 dist_fabric["fabric"].Canvas.prototype.defaultCursor = 'default'; 22362 dist_fabric["fabric"].Object.prototype.set(this.shapeSettings); 22363 22364 // group events 22365 dist_fabric["fabric"].Group.prototype.hasRotatingPoint = false; 22366 dist_fabric["fabric"].Group.prototype.on("scaling", this.groupOnScaling.bind(this)); 22367 dist_fabric["fabric"].Group.prototype.on("moving", this.groupOnMoving.bind(this)); 22368 dist_fabric["fabric"].Group.prototype.on("modified", this.groupOnModified.bind(this)); 22369 22370 // fix corner shadows 22371 fabric_shadow_corners(dist_fabric["fabric"], this.shapeSettings.cornerShadowColor, this.shapeSettings.cornerShadowBlur); 22372 fabric_shadow_borders(dist_fabric["fabric"], this.shapeSettings.borderShadowColor, this.shapeSettings.borderShadowBlur); 22373 22374 // fix uni scale transform 22375 dist_fabric["fabric"].Canvas.prototype._isUniscalePossible = function (e, target) { 22376 var ret = this.uniScaleTransform; 22377 if (e[this.uniScaleKey]) ret = !ret; 22378 if (target.get('lockUniScaling')) ret = false;
22379 return ret; 22380 }; 22381 22382 // create a canvas for clip 22383 this.dynamic = new dist_fabric["fabric"].Canvas(this.dynamicCanvas.current, dynamicSettings); 22384 this.dynamic.component = this; 22385 setTimeout(() => { 22386 this.dynamic.setInitialPan(); 22387 // initial zoom 22388 let center = this.getCenterPointOfTheEmbed(true); 22389 this.dynamic.zoomToPoint(center, this.state.zoom); 22390 if (this.props.previewMode) { 22391 this.dynamic.selection = false; 22392 } 22393 if (this.props.imageMode) { 22394 this.dynamic.requestRenderAll(); 22395 } 22396 }, 10); 22397 22398 // this.dynamic.on("selection:created", this.toggleBorders); 22399 // this.dynamic.on("selection:updated", this.toggleBorders); 22400 // this.dynamic.on("selection:cleared", this.toggleBorders); 22401 this.dynamic.on('touch:gesture', this.gestureZoom); 22402 this.dynamic.on('mouse:up', this.gestureZoomStop); 22403 this.dynamic.on('mouse:down:before', o => { 22404 if (o.e.touches && o.e.touches.length === 1) { 22405 if (this.tools['highlighter'] && this.tools['highlighter'].stopAnnotation) this.tools['highlighter'].stopAnnotation(); 22406 if (this.tools['pen'] && this.tools['pen'].stopAnnotation) this.tools['pen'].stopAnnotation(); 22407 if (this.tools['move'] && this.tools['move'].startAnnotation) this.tools['move'].startAnnotation(); 22408 return false; 22409 } else if (o.e.touches && o.e.touches.length === 2) { 22410 if (this.tools['highlighter'] && this.tools['highlighter'].stopAnnotation) this.tools['highlighter'].stopAnnotation(); 22411 if (this.tools['pen'] && this.tools['pen'].stopAnnotation) this.tools['pen'].stopAnnotation(); 22412 // alert(JSON.stringify(o.e)) 22413 // this.zoomHandler(o) 22414 } 22415 }); 22416 } 22417 initCanvasEvents() { 22418 if (!this.props.previewMode) { 22419 this.dynamic.on("object:added", this.setUnsavedChangesIfTheyWere); 22420 this.dynamic.on("object:modified", this.setUnsavedChangesIfTheyWere); 22421 this.dynamic.on("object:removed", this.setUnsavedChangesIfTheyWere); 22422 } 22423 this.dynamic.on("text:changed", this.handleTextChange); 22424 this.dynamic.on("object:moving", this.saveObjectData); 22425 this.dynamic.on("object:rotating", this.saveObjectData); 22426 this.dynamic.on("object:modified", this.saveObjectData); 22427 this.dynamic.on("object:scaling", this.saveObjectData); 22428 this.dynamic.on("selection:updated", this.saveObjectData); 22429 this.dynamic.on("selection:created", this.saveObjectData); 22430 this.dynamic.on("selection:updated", o => { 22431 if (o.deselected.length > 0 && o.deselected[0] != o.target && o.deselected[0].toolName == 'crop') { 22432 this.dynamic.remove(o.deselected[0]); 22433 this.props.changeTool('select'); 22434 } 22435 }); 22436 this.dynamic.on("selection:cleared", this.clearObjectData); 22437 this.dynamic.on("selection:created", this.bringToFront); 22438 this.dynamic.on("selection:updated", this.bringToFront); 22439 this.dynamic.on("object:moving", this.releaseClone); // if alt pressed 22440 this.dynamic.on("object:rotating", this.snapAngleRotating); 22441 this.dynamic.on("object:moved", this.releaseCloneWhenMoved); 22442 this.dynamic.on("object:removed", this.selectLast); 22443 this.dynamic.on("mouse:down", this.props.setCanvasInteraction); 22444 this.dynamic.on("mouse:up", this.props.setCanvasNoInteraction); 22445 this.dynamic.on("object:modified", this.extendCanvasByShapePosition); 22446 22447 // hover 22448 this.dynamic.on("mouse:over", this.drawHover); 22449 this.dynamic.on("mouse:out", this.drawHout); 22450 if (this.props.embedMode) { 22451 document.addEventListener("visibilitychange", this.handleDocumentHidden, false); 22452 this.dynamic.on("mouse:wheel", this.zoomHandler); 22453 this.dynamic.on('mouse:wheel', dist_fabric["fabric"].Canvas.prototype.panScrollHandler); 22454 } 22455 // if (this.props.previewMode) { // enable for editor too 22456 this.dynamic.on("mouse:up", e => { 22457 this.doubleTapHandler(e); 22458 }); 22459 this.dynamic.on("mouse:up", async e => { 22460 await this.singleTapHandler(e); 22461 }); 22462 this.dynamic.on("mouse:down", async e => { 22463 window.touchMove = false; 22464 }); 22465 this.dynamic.on("mouse:move", async e => { 22466 // clearTimeout(window.tappedOnceTimer) 22467 // window.tappedOnceTimer = false 22468 if (!window.tappedOnceTimer) return; 22469 window.touchMove = true; 22470 }); 22471 // } 22472 this.enableHistoryEvents(); 22473 } 22474 doubleTapHandler(e) { 22475 if (!isTappedTwice(e.e)) return; 22476 if (!e.e || !e.e.type || e.e.type !== 'touchend') return; 22477 this.fitClipToPageByTouchOrHotkey(e); 22478 } 22479 toggleCleanPreviewPressed(e) { 22480 if ((this.cmdKey || this.ctrlKey || this.altKey) && e.which === 190) { 22481 this.toggleCleanPreviewMode(); 22482 } 22483 } 22484 toggleCleanPreviewMode() { 22485 const isCleanPreviewModeActivated = document.body.classList.contains("preview-mode"); 22486 this.props.changeSizes(!isCleanPreviewModeActivated || this.props.previewMode ? { 22487 left: 0, 22488 top: 0, 22489 width: window.innerWidth, 22490 height: window.innerHeight 22491 } : { 22492 left: 0, 22493 top: 40, 22494 width: window.innerWidth, 22495 height: window.innerHeight - 40 22496 }); 22497 document.body.classList.toggle("preview-mode"); 22498 } 22499 fitClipToPageByTouchOrHotkey(e) {
22500 let rect = this.dynamic.backgroundImage.getBoundingRect(); 22501 let p = { 22502 x: null, 22503 y: null 22504 }; 22505 if (this.props.zoom === this.props.initialZoom) { 22506 if (e.pointer && rect.left <= e.pointer.x && rect.top <= e.pointer.y && rect.left + rect.width >= e.pointer.x && rect.top + rect.height >= e.pointer.y) p = e.pointer; 22507 this.props.zoomTo(1, p); 22508 } else { 22509 this.props.zoomTo(this.props.initialZoom, p); 22510 } 22511 } 22512 getCanvas() { 22513 return this.dynamic; 22514 } 22515 drawHout(e) { 22516 let shape = e.target; 22517 let canvas = this.dynamic; 22518 let current = canvas.getActiveObject(); 22519 if (!shape) return; 22520 let shapeID = shape.get('objectID'); 22521 if (!shapeID) return; 22522 let selected = current != null && current.get('objectID') === shapeID; 22523 if (selected) return; 22524 if (this.hover) { 22525 this.disableHistoryEvents(); 22526 canvas.remove(this.hover); 22527 this.enableHistoryEvents(); 22528 } 22529 } 22530 drawHover(e) { 22531 let shape = e.target; 22532 let canvas = this.dynamic; 22533 let current = canvas.getActiveObject(); 22534 if (!shape) return; 22535 if (this.props.previewMode) return; 22536 let shapeID = shape.get('objectID'); 22537 if (!shapeID || shapeID === 'HOVER-1') return; 22538 let selected = current != null && current.get('objectID') === shapeID; 22539 if (selected) return; 22540 this.disableHistoryEvents(); 22541 // let bound = shape.getBoundingRect(); 22542 let hoverOptions; 22543 // if(shape.text){ 22544 // let height = shape.height*shape.scaleY + 1 + shape.strokeWidth; 22545 // hoverOptions = { 22546 // left: shape.left-1, 22547 // top: (shape.top - (height* 0.5)), 22548 // fill:"transparent", 22549 // selectable: false, 22550 // evented: false, 22551 // stroke: "#47A0FF", 22552 // width: shape.width*shape.scaleX + 1 + shape.strokeWidth, 22553 // height: height, 22554 // strokeWidth: 1, 22555 // opacity: .8, 22556 // objectID: "HOVER-1", 22557 // angle: shape.angle 22558 // }; 22559 // } 22560 // else{ 22561 hoverOptions = { 22562 left: shape.left - 1, 22563 top: shape.top - 1, 22564 fill: "transparent", 22565 selectable: false, 22566 evented: false, 22567 stroke: "#47A0FF", 22568 width: shape.width * shape.scaleX + 1 + shape.strokeWidth, 22569 height: shape.height * shape.scaleY + 1 + shape.strokeWidth, 22570 strokeWidth: 1, 22571 opacity: .8, 22572 objectID: "HOVER-1", 22573 angle: shape.angle 22574 }; 22575 // } 22576 if (this.hover) canvas.remove(this.hover); 22577 this.hover = new dist_fabric["fabric"].Rect(hoverOptions); 22578 canvas.add(this.hover); 22579 canvas.renderAll(); 22580 this.enableHistoryEvents(); 22581 } 22582 centerCoord() { 22583 const canvas = this.dynamic; 22584 const zoom = canvas.getZoom(); 22585 return { 22586 x: dist_fabric["fabric"].util.invertTransform(canvas.viewportTransform)[4] + canvas.width / zoom / 2, 22587 y: dist_fabric["fabric"].util.invertTransform(canvas.viewportTransform)[5] + canvas.height / zoom / 2 22588 }; 22589 } 22590 zoomHandler(opt) { 22591 opt.e.stopImmediatePropagation(); 22592 opt.e.preventDefault(); 22593 const isModeNovice = this.props.navigationMode === 'novice'; 22594 if (!isModeNovice && !opt.e.ctrlKey && !this.cmdKey && !this.ctrlKey && !opt.e.altKey) return true; 22595 const normalEvent = this.util.normalizeWheel(opt.e); 22596 let normalDelta = Math.abs(normalEvent.pixelX) > Math.abs(normalEvent.pixelY) ? normalEvent.pixelX : normalEvent.pixelY; 22597 normalDelta = Math.abs(normalDelta) > 10 ? 10 * normalDelta / Math.abs(normalDelta) : normalDelta; 22598 let delta = normalDelta; 22599 let zoom = this.dynamic.getZoom(); 22600 // zoom = zoom + delta / 200; 22601 zoom *= 0.992 ** delta; 22602 let zoomToPoint = { 22603 x: opt.e.offsetX, 22604 y: opt.e.offsetY 22605 }; 22606 22607 // this.dynamic.zoomToPoint(zoomToPoint, zoom); 22608 this.props.zoomTo(zoom, zoomToPoint); 22609 this.saveObjectData(opt); 22610 } 22611 handleTextChange(o) { 22612 if (o.target.height !== this.props.objectData.height) { 22613 // update objectData if Text object's height changes by Enter/Backspace. This will re-render PropertiesBar and position it correctly with Text box 22614 this.saveObjectData(o); 22615 } 22616 } 22617 saveObjectData(o) { 22618 let obj = this.dynamic.getActiveObject(); 22619 try { 22620 let type = obj.get("type"); 22621 let t = o.transform && o.transform.action ? o.transform.target : obj; 22622 let rotation = o.transform && o.transform.action && o.transform.action === 'rotate'; 22623 let rotated = t.angle !== 0; 22624 let action = o.transform && o.transform.action && o.transform.action !== ''; 22625 let rect = { 22626 left: t.left, 22627 top: t.top, 22628 width: t.scaleX !== 1 ? t.width * t.scaleX : t.width, 22629 height: t.scaleY !== 1 ? t.height * t.scaleY : t.height, 22630 angle: t.angle 22631 }; 22632 if (rotation) { 22633 // rotation
22634 rect = t.getBoundingRect(true, true); 22635 } else if (rotated && !rotation && action) { 22636 // rotated but not rotation; 22637 rect = obj.getBoundingRect(true, true); 22638 } 22639 type = type === 'activeSelection' ? 'group' : type; 22640 let toolName = obj.toolName; 22641 if (type === 'group') toolName = obj.getObjects()[obj.getObjects().length - 1].toolName; 22642 this.util.log("save object settings:", toolName, obj); 22643 let data = { 22644 ...rect, 22645 zoom: this.dynamic.getZoom(), 22646 type: type, 22647 objectID: obj.objectID, 22648 toolName: toolName, 22649 isGroup: type === "group", 22650 object: obj 22651 }; 22652 this.props.setCurrentObjectData(data); 22653 } catch (e) { 22654 this.util.log("Error, saveObjectData:", e); 22655 } 22656 } 22657 clearObjectData(o) { 22658 this.props.setCurrentObjectData(null); 22659 } 22660 uninitCanvas() { 22661 // this.dynamic.off("selection:created", this.toggleBorders); 22662 // this.dynamic.off("selection:updated", this.toggleBorders); 22663 this.dynamic.off("touch:gesture", this.gestureZoom); 22664 this.dynamic.off("object:added", this.setUnsavedChangesIfTheyWere); 22665 this.dynamic.off("object:modified", this.setUnsavedChangesIfTheyWere); 22666 this.dynamic.off("object:removed", this.setUnsavedChangesIfTheyWere); 22667 this.dynamic.off("text:changed", this.handleTextChange); 22668 this.dynamic.off("object:moving", this.saveObjectData); 22669 this.dynamic.off("object:rotating", this.saveObjectData); 22670 this.dynamic.off("object:modified", this.saveObjectData); 22671 this.dynamic.off("object:scaling", this.saveObjectData); 22672 this.dynamic.off("selection:updated", this.saveObjectData); 22673 this.dynamic.off("selection:created", this.saveObjectData); 22674 this.dynamic.off("selection:cleared", this.clearObjectData); 22675 this.dynamic.off("selection:created", this.bringToFront); 22676 this.dynamic.off("selection:updated", this.bringToFront); 22677 this.dynamic.off("object:moving", this.releaseClone); 22678 this.dynamic.off("object:rotating", this.snapAngleRotating); 22679 this.dynamic.off("object:moved", this.releaseCloneWhenMoved); 22680 this.dynamic.off("object:removed", this.selectLast); 22681 this.disableHistoryEvents(); 22682 if (this.props.embedMode || this.props.previewMode) { 22683 document.removeEventListener("visibilitychange", this.handleDocumentHidden, false); 22684 this.dynamic.off("mouse:wheel", this.zoomHandler); 22685 this.dynamic.off("mouse:wheel", dist_fabric["fabric"].Canvas.prototype.panScrollHandler); 22686 } 22687 } 22688 enableHistoryEvents() { 22689 this.dynamic.on("path:created", this.historyManage); 22690 this.dynamic.on("object:modified", this.historyManage); 22691 this.dynamic.on("object:removed", this.historyManage); 22692 // this.enableCustomEvents(); 22693 } 22694 disableHistoryEvents() {
22695 let canvas = this.dynamic; 22696 canvas.off("path:created", this.historyManage); 22697 canvas.off("object:modified", this.historyManage); 22698 canvas.off("object:removed", this.historyManage); 22699 // this.disableCustomEvents(); 22700 } 22701 enableCustomEvents() { 22702 this.historyDisabled = false; 22703 let tools = this.tools; 22704 let canvas = this.dynamic; 22705 canvas.forEachObject(o => { 22706 if (o.toolName && tools[o.toolName] && typeof tools[o.toolName]['eventsEnable'] !== 'undefined') { 22707 console.info("%citems events setted", "background-color:grey; color:white"); 22708 tools[o.toolName]['eventsEnable'](o); 22709 } 22710 }); 22711 } 22712 disableCustomEvents() { 22713 this.historyDisabled = false; 22714 let tools = this.tools; 22715 let canvas = this.dynamic; 22716 canvas.forEachObject(o => { 22717 if (o.toolName && tools[o.toolName] && typeof tools[o.toolName]['eventsDisable'] !== 'undefined') { 22718 tools[o.toolName]['eventsDisable'](o); 22719 } 22720 }); 22721 } 22722 22723 // history 22724 historyClear() { 22725 this.history.length = 0; 22726 this.historyCurrent = -1; 22727 this.revokeObjectURLs.forEach(function (url) { 22728 URL.revokeObjectURL(url); 22729 }); 22730 } 22731 historyManage() {
22732 let canvas = this.dynamic; 22733 let o = canvas.getActiveObject(); // thats ok, because object is modified or removed (still active); 22734 if (o && (o.managedHistory || o.silentRemove)) return; 22735 this.historyDo(); 22736 } 22737 historyDo() { 22738 if (this.isHistoryBlocked()) return; 22739 let current = this.historyCurrent; 22740 let history = this.history; 22741 let state = this.dynamic.toObject(this.specialFields); 22742 history.splice(current + 1); 22743 history.push(state); 22744 current = history.length - 1; 22745 this.historyCurrent = current; 22746 this.history = history; 22747 console.log('HISTORY_CURSOR', this.historyCurrent); 22748 this.props.setHistoryCursor(this.historyCurrent); 22749 } 22750 unDo() { 22751 if (this.props.embedMode && (this.history.length == 0 || this.historyCurrent <= 0) // editor 22752 || !this.props.embedMode && (this.history.length == 0 || this.historyCurrent < 0) // extension/demo 22753 ) return; 22754 let canvas = this.dynamic; 22755 let history = this.history; 22756 let current = this.historyCurrent; 22757 let state = false; 22758 current = current - 1; 22759 if (current > -1) { 22760 state = history[current]; 22761 } else { 22762 current = -1; 22763 // not to remove background Image 22764 if (this.props.embedMode) state = history[0]; 22765 canvas.clear(); 22766 } 22767 if (state) { 22768 this.disableHistoryEvents(); 22769 canvas.loadFromJSON(state, this.historyLoaded.bind(this)); 22770 } 22771 this.historyCurrent = current; 22772 this.props.setHistoryCursor(this.historyCurrent); 22773 this.util.log("-- history undo2", current); 22774 } 22775 reDo() { 22776 if (this.historyCurrent == this.history.length - 1) return; 22777 let history = this.history; 22778 let current = this.historyCurrent;
22779 let canvas = this.dynamic; 22780 let state = false; 22781 this.util.log("-- history redo", current); 22782 if (current < history.length - 1) { 22783 current = current + 1; 22784 state = history[current]; 22785 } 22786 if (state) { 22787 this.disableHistoryEvents(); 22788 canvas.loadFromJSON(state, this.historyLoaded.bind(this)); 22789 this.historyCurrent = current; 22790 this.props.setHistoryCursor(this.historyCurrent); 22791 } 22792 this.util.log("-- history redo2", current); 22793 } 22794 historyLoaded() { 22795 var canvas = this.dynamic; 22796 canvas.requestRenderAll(); 22797 this.selectLast(); 22798 this.enableHistoryEvents(); 22799 this.enableCustomEvents(); 22800 } 22801 setSpecialFields(source, dest) { 22802 this.specialFields.forEach(f => { 22803 dest[f] = source[f]; 22804 }); 22805 } 22806 setupClone(o, c, point) { 22807 let canvas = this.dynamic; 22808 c.set({ 22809 left: point.x, 22810 top: point.y 22811 }); 22812 this.setSpecialFields(o, c); 22813 c.set({ 22814 objectID: this.util.generateID(o.get("toolName")) 22815 }); 22816 this.setupCustomOptionsForShape(c); 22817 canvas.add(c); 22818 canvas.requestRenderAll(); 22819 o.trigger("special:cloning", { 22820 original: o, 22821 clone: c 22822 }); 22823 o.myClone = c; 22824 } 22825 releaseClone(o) {
22826 let canvas = this.dynamic; 22827 const original = o.target; 22828 const isGroup = original.type === 'activeSelection' && original.getObjects; 22829 if (this.altKey && !o.target.myClone && o.target && o.target.get && o.transform && o.transform.action === "drag") { 22830 let original = o.target; 22831 if (isGroup) { 22832 const ors = original.getObjects(); 22833 ors.forEach((orig, i) => orig.clone(cln => this.setupClone(orig, cln, orig.aCoords.tl))); 22834 original.myClone = true; 22835 canvas.requestRenderAll(); 22836 } else { 22837 original.clone(clone => this.setupClone(original, clone, { 22838 x: o.transform.original.left, 22839 y: o.transform.original.top 22840 })); 22841 } 22842 this.disableCustomEvents(); 22843 this.enableCustomEvents(); 22844 // this.uninitCanvas() 22845 // this.initCanvasEvents(); 22846 } else if (!this.altKey && o.target.myClone) { 22847 if (isGroup) { 22848 o.target.getObjects && o.target.getObjects().forEach(object => { 22849 // canvas.remove(object.myClone) 22850 object.myClone = false; 22851 }); 22852 } else { 22853 // canvas.remove(o.target.myClone); 22854 } 22855 o.target.myClone = false; 22856 } 22857 } 22858 snapAngleRotating(o) { 22859 let step = 15; 22860 if (this.shiftKey) { 22861 o.target.snapAngle = step; //Math.round(o.target.angle / step) * step; 22862 } else { 22863 o.target.snapAngle = false; 22864 } 22865 } 22866 releaseCloneWhenMoved(o) { 22867 // const isGroup = o.target.myClone && o.target.myClone.getObjects && o.target.myClone.getObjects().length > 0; 22868 // if (isGroup) { 22869 // o.target.toActiveSelection(); 22870 // } 22871 o.target.myClone = false; 22872 } 22873 22874 // shape functions 22875 getClone(original, cb) { 22876 let that = this; 22877 let canvas = this.dynamic; 22878 original.clone(function (clone) { 22879 clone.set({ 22880 objectID: that.util.generateID(clone.get("toolName")) 22881 }); 22882 canvas.add(clone); 22883 canvas.requestRenderAll(); 22884 cb(clone); 22885 }, this.specialFields); 22886 } 22887 22888 // annotation 22889 22890 backToDefaultTool() { 22891 this.props.changeTool('select'); 22892 } 22893 setAnnotationTool(o, n = 'select') { 22894 if (o !== n && this.tools && this.tools[o] && this.tools[n] && this.tools[o].stopAnnotation && this.tools[n].startAnnotation) { 22895 this.tools[o].stopAnnotation(); 22896 this.tools[n].startAnnotation(this.props.objectData); 22897 let preparedSettings = {}; 22898 let sets = typeof this.props.tools.tools[n] === 'undefined' ? {} : this.props.tools.tools[n]; 22899 if (sets.type === 'complex') { 22900 sets.tools.forEach(tool => { 22901 let toolSet = typeof this.props.tools.tools[tool] === 'undefined' ? {} : this.props.tools.tools[tool]; 22902 preparedSettings[tool] = this.getToolSet(toolSet); 22903 }); 22904 preparedSettings.type = 'complex'; 22905 } else preparedSettings = this.getToolSet(sets); 22906 this.currentTool = n; 22907 this.tools[n].setSettings(preparedSettings); 22908 } else { 22909 this.util.log(["%cCANVAS warning, no startAnnotation stopAnnotation method for this tools: ", o, ", ", n].join(" "), "background-color:purple;color:#fff"); 22910 } 22911 } 22912 extendCanvasByShapePosition(o) { 22913 // const objBounds = o.transform.target.getBoundingRect() 22914 // const boxBounds = this.component.dynamic.backgroundImage.getBoundingRect() 22915 // let extend = { 22916 // left: 0, top: 0, bottom: 0, right: 0 22917 // }; 22918 // let widthBound = objBounds.left + objBounds.width; 22919 // let boxWidthBound = boxBounds.left + boxBounds.width 22920 // let heightBound = objBounds.top + objBounds.height; 22921 // let boxHeightBound = boxBounds.top + boxBounds.height; 22922 // if (objBounds.left < boxBounds.left) extend.left = objBounds.left; 22923 // if (objBounds.top < boxBounds.top) extend.top = objBounds.top; 22924 // if (widthBound > boxWidthBound) extend.right = widthBound; 22925 // if (heightBound > boxHeightBound) extend.bottom = heightBound; 22926 // console.log("obj", objBounds) 22927 // console.log("box", boxBounds) 22928 // console.log("should extend to", extend) 22929 // debugger 22930 } 22931 shiftShapesSettings(left, top) { 22932 const k = this.props.dpxr; 22933 const tools = this.tools; 22934 const canvas = this.dynamic; 22935 canvas.forEachObject(o => { 22936 if (typeof o.clipOriginLeft !== 'undefined') { 22937 // if it last edited in screenclip 22938 const clipOriginLeft = o.clipOriginLeft; 22939 const clipOriginTop = o.clipOriginTop; 22940 o.set("left", left - (o.isEdited ? clipOriginLeft : clipOriginLeft * k)); 22941 o.set("top", top - (o.isEdited ? clipOriginTop : clipOriginTop * k)); 22942 if (!o.isEdited) { 22943 if (o.toolName && tools[o.toolName] && typeof tools[o.toolName]['shiftShapesSettings'] !== 'undefined') { 22944 tools[o.toolName]['shiftShapesSettings'](o, k); 22945 } else { 22946 o.set('scaleX', o.scaleX * k); 22947 o.set('scaleY', o.scaleY * k); 22948 // o.set('width', o.width * k); 22949 // o.set('height', o.height * k); 22950 o.set('strokeWidth', o.strokeWidth * k); 22951 } 22952 } 22953 o.setCoords(); 22954 } 22955 }); 22956 canvas.renderAll(); 22957 } 22958 unshiftShapes(left, top, isEdited, exclude) { 22959 let annotationsExtended = this.dynamic.toObject(this.specialFields); 22960 if (annotationsExtended.objects.length > 0) { 22961 annotationsExtended.objects = annotationsExtended.objects.map(object => { 22962 if (object.toolName === exclude) return null; 22963 return { 22964 ...object, 22965 clipOriginLeft: left - object.left, 22966 clipOriginTop: top - object.top, 22967 isEdited 22968 }; 22969 }); 22970 annotationsExtended.objects = annotationsExtended.objects.filter(o => o !== null); 22971 } 22972 return annotationsExtended; 22973 } 22974 setupCustomOptionsForShape(shape) { 22975 var _this$tools$shape$too; 22976 if ((_this$tools$shape$too = this.tools[shape.toolName]) !== null && _this$tools$shape$too !== void 0 && _this$tools$shape$too.setupCustomOptions) { 22977 this.tools[shape.toolName].setupCustomOptions(shape); 22978 } 22979 } 22980 setupCustomOptionsForShapes() { 22981 this.dynamic.forEachObject(object => this.setupCustomOptionsForShape(object)); 22982 } 22983 22984 // embed mode on 22985 setImage(opts) {
22986 let canvas = this.dynamic; 22987 let sizes = this.state.sizes; 22988 let left = (sizes.width - opts.width / this.props.dpxr) / 2; 22989 let top = (sizes.height - opts.height / this.props.dpxr) / 2; 22990 if (this.props.preloadedAnnotations && this.props.preloadedAnnotations !== '') { 22991 this.dynamic.loadFromJSON(this.props.preloadedAnnotations, () => { 22992 this.shiftShapesSettings(left, top); 22993 this.setupCustomOptionsForShapes(); 22994 this.enableCustomEvents(); 22995 if (this.props.previewMode) { 22996 this.dynamic.hoverCursor = 'move'; 22997 this.dynamic.forEachObject(function (object) { 22998 object.selectable = false; 22999 }); 23000 } 23001 this.initCanvasEvents(); 23002 this.dynamic.renderAll(); 23003 }); 23004 } else { 23005 this.initCanvasEvents(); 23006 } 23007 canvas.setBackgroundImage(opts.data, () => { 23008 this.resizeCanvas(); 23009 // set initial zoom 23010 let zoom = this.state.zoom; 23011 this.props.setMimeType(opts.mime); 23012 23013 // if clip is out of the space of the page 23014 23015 if (sizes.width < zoom * opts.width || sizes.height < zoom * opts.height) { 23016 // set pan disabled right now 23017 dist_fabric["fabric"].Canvas.prototype.panDisabled = false; 23018 23019 // set global state pan to disabled 23020 this.props.enableZoomPan(); 23021 let wgreaterh = zoom * opts.width - sizes.width > zoom * opts.height - sizes.height; 23022 if (wgreaterh) zoom = zoom / (zoom * opts.width / (sizes.width - 21));else zoom = zoom / (zoom * opts.height / (sizes.height - 13)); 23023 23024 // set default zoom - fit clip to page 23025 this.defaultZoom = zoom; 23026 this.props.zoomTo(zoom, { 23027 x: null, 23028 y: null 23029 }); 23030 } else { 23031 // set pan disabled right now 23032 // fabric.Canvas.prototype.panDisabled = true; 23033 dist_fabric["fabric"].Canvas.prototype.panDisabled = false; 23034 23035 // this.props.zoomTo(zoom / this.props.dpxr, { x: null, y: null }); 23036 zoom = zoom / this.props.dpxr; 23037 this.props.zoomTo(zoom, { 23038 x: null, 23039 y: null 23040 }); 23041 // set global state pan to disabled 23042 // this.props.disableZoomPan(); 23043 } 23044 // set default tool for preview mode 23045 if (this.props.previewMode) this.setAnnotationTool(this.currentTool, 'move');else this.setAnnotationTool(this.currentTool, 'select'); 23046 this.props.setInitialZoom(zoom); // / this.props.dpxr); 23047 canvas.renderAll(); 23048 this.props.setCanvasNoInteraction(); 23049 this.props.setEmbedImageLoaded(); 23050 this.historyDo(); 23051 if (this.props.isAutosave && this.props.embedMode) { 23052 let f = () => { 23053 this.saveCurrentClip_embedMode(); 23054 setTimeout(f, 10 * 1000); 23055 }; 23056 setTimeout(f, 10 * 1000); 23057 } 23058 this.props.hidePleaseWait(); 23059 if (this.props.setGetImageDataFn) this.props.setGetImageDataFn(this.getImageData.bind(this)); 23060 }, {
23061 left: left, 23062 top: top 23063 }); 23064 } 23065 // service tools 23066 23067 // image // bug in chrome mac (double click instead of clicking open when image didn't load) 23068 addImage(cb) { 23069 let that = this; 23070 let canvas = this.dynamic; 23071 let input = document.createElement("input"); 23072 let counter = 0; 23073 let pasteImage = img => { 23074 canvas.add(img).setActiveObject(img); 23075 canvas.requestRenderAll(); 23076 counter++; 23077 if (counter === input.files.length) { 23078 that.props.hidePleaseWait(); 23079 // images after creation 23080 that.shapeAfterTransforming(); 23081 } 23082 }; 23083 let handleFiles = function () { 23084 that.props.showPleaseWait(); 23085 // this.util.log("file 1st", input.files.length); 23086 for (var i = 0; i < input.files.length; i++) { 23087 if (!input.files[i].type.startsWith('image/')) { 23088 this.util.log("canvas: not an image"); 23089 continue; 23090 } else { 23091 // todo: add size check 23092 var file = input.files[i]; 23093 that.revokeObjectURLs.push(URL.createObjectURL(file)); 23094 dist_fabric["fabric"].Image.fromURL(that.revokeObjectURLs[that.revokeObjectURLs.length - 1], pasteImage, { 23095 left: that.props.clip.x, 23096 top: that.props.clip.y 23097 }); 23098 if (cb) { 23099 cb(); 23100 } 23101 } 23102 } 23103 // this.util.log("file last", i) 23104 }; 23105 input.type = "file"; 23106 input.multiple = true; 23107 input.accept = "image/*"; 23108 input.addEventListener("change", handleFiles, false); 23109 input.click(); 23110 } 23111 23112 // trash 23113 23114 trash() { 23115 var objects = this.dynamic.getActiveObjects(); 23116 var canvas = this.dynamic; 23117 if (objects.length > 0) { 23118 objects.forEach(function (o) { 23119 canvas.remove(o); 23120 }); 23121 canvas.discardActiveObject(); 23122 } else { 23123 canvas.clear(); 23124 } 23125 canvas.requestRenderAll(); 23126 } 23127 clear() { 23128 this.dynamic.clear(); 23129 this.dynamic.justCleared = true; 23130 this.historyClear(); 23131 this.props.changeTool(this.currentTool); 23132 } 23133 23134 // clearCanvas () { 23135 // this.dynamic.clear(); 23136 // this.dynamic.justCleared = true; 23137 // this.historyClear(); 23138 // } 23139 23140 // end of annotation tools handlers 23141 markersUpdated(markers) { 23142 this.markers = markers.slice(0); 23143 } 23144 cropMarkersPositions(markers, dx, dy, dpxr) { 23145 // dpxr - window.devicePixelRatio; 23146 23147 if (typeof markers === 'undefined') return []; 23148 if (typeof markers === 'string') markers = JSON.parse(markers); 23149 let result = []; 23150 markers.forEach(marker => { 23151 let position = {}; 23152 position.x = marker.position.x - dx; 23153 position.y = marker.position.y - dy; 23154 position.x = position.x * dpxr; 23155 position.y = position.y * dpxr; 23156 marker.position = position; 23157 result.push(marker); 23158 }); 23159 return result; 23160 } 23161 cropImage(img, cb) { 23162 let k = window.devicePixelRatio; 23163 const clip = this.props.clip; 23164 // virtual canvas 23165 let c = document.createElement("canvas"); 23166 c.setAttribute("width", clip.w * k); 23167 c.setAttribute("height", clip.h * k); 23168 let ctx = c.getContext("2d"); 23169 23170 // virtual image 23171 let i = document.createElement("img"); 23172 i.src = img; 23173 i.addEventListener("load", () => { 23174 let dx = clip.x; 23175 let dy = clip.y; 23176 ctx.drawImage(i, dx * k, dy * k, clip.w * k, clip.h * k, 0, 0, clip.w * k, clip.h * k); 23177 let base64 = c.toDataURL(); 23178 cb(base64); 23179 }); 23180 } 23181 cropClippedImage(img, download, clip, markers, upload, background, annotations, extClipToolMenuAction) { 23182 const k = window.devicePixelRatio; 23183 23184 // virtual canvas 23185 let c = document.createElement("canvas"); 23186 c.setAttribute("width", clip.w * k); 23187 c.setAttribute("height", clip.h * k); 23188 let ctx = c.getContext("2d"); 23189 23190 // virtual image 23191 let i = document.createElement("img"); 23192 i.src = img; 23193 i.addEventListener("load", () => { 23194 let dx = clip.x; 23195 let dy = clip.y; 23196 ctx.drawImage(i, dx * k, dy * k, clip.w * k, clip.h * k, 0, 0, clip.w * k, clip.h * k); 23197 if (download) { 23198 this.util.downloadFile(c.toDataURL(), this.util.formFileTitle(), "png"); 23199 } 23200 this.handleExtClipToolMenuAction(extClipToolMenuAction, c); 23201 this.props.startClipsUpdate(); 23202 const clipToAdd = { 23203 clipUrl: c.toDataURL(), 23204 mimeType: 'image/png', 23205 markers: markers, 23206 upload: upload, 23207 // if we need to upload clip to screen.link (if connected) 23208 background: background, 23209 annotations: annotations, 23210 extClipToolMenuAction 23211 }; 23212 console.log("clipadd:", clipToAdd);
23213 this.util.clipToBackground(clipToAdd); 23214 setTimeout(() => { 23215 this.clear(); 23216 this.props.setAppClipped(false); 23217 }, 0); 23218 }); 23219 } 23220 async handleExtClipToolMenuAction(action, canvas) { 23221 if (!action) return; 23222 if (action.includes('DOWNLOAD_CLIP')) { 23223 const ext = action.substring(action.length - 3).toLowerCase(); 23224 this.util.downloadFile(canvas.toDataURL(), this.util.formFileTitle(), ext); 23225 } 23226 if (action === 'COPY_AS_IMAGE') { 23227 canvas.toBlob(blob => { 23228 navigator.clipboard.write([new ClipboardItem({ 23229 "image/png": blob 23230 })]); 23231 }, 'image/png'); 23232 } 23233 } 23234 handleBrowser_BG__CONTENT__CLIPADDED(req, sender) { 23235 document.body.style.cursor = 'default'; 23236 if (req.data.title) { 23237 this.props.setSavedClipData(req.data); 23238 } 23239 } 23240 handleBrowser_BG__CONTENT__EMBED_SAVE_EDITOR() { 23241 let canvas = this.dynamic; 23242 let transform = canvas.viewportTransform.slice(); 23243 canvas.viewportTransform = [1, 0, 0, 1, 0, 0]; 23244 let sizes = this.state.sizes; 23245 let pos = { 23246 left: sizes.width / 2 - this.props.embedImageWidth / 2, 23247 top: sizes.height / 2 - this.props.embedImageHeight / 2 23248 }; 23249 let dataurl = canvas.toDataURL({ 23250 format: 'png', 23251 left: pos.left, 23252 top: pos.top, 23253 width: this.props.embedImageWidth, 23254 height: this.props.embedImageHeight 23255 }); 23256 canvas.viewportTransform = transform; 23257 window.postMessage({ 23258 action: "save-image", 23259 imageDataUrl: dataurl 23260 }, "*"); 23261 } 23262 23263 // fireBrowser_CONTENT__BG__CAPTURE_SAVESHARE () { 23264 // this.turnAllControlsOff(); 23265 // let m = { 23266 // action: "CONTENT__BG__CAPTURE_SAVESHARE", 23267 // data: { 23268 // clip: this.props.clip, 23269 // markers: this.markers 23270 // } 23271 // }; 23272 // setTimeout(() => this.util.extSendMessage(m), 100); 23273 // } 23274 23275 // handleBrowser_BG__CONTENT__CAPTURE_SAVESHARE(req, sender, sendResponse) { 23276 // this.cropClippedImage(req.image, false, req.clip, req.markers, req.upload); 23277 // this.props.setShareDialogOpened(); 23278 // }; 23279 23280 // SAVE 23281 23282 fireBrowser_CONTENT__BG__CAPTURE_STARTSHOT(download, cb, extClipToolMenuAction) { 23283 this.turnAllControlsOff(); 23284 this.turnCanvasOff(); 23285 let m = { 23286 action: "CONTENT__BG__CAPTURE_STARTSHOT", 23287 data: { 23288 download, 23289 extClipToolMenuAction 23290 } 23291 }; 23292 setTimeout(() => this.util.extSendMessage(m, () => {}, () => {}), 100); 23293 } 23294 handleBrowser_BG__CONTENT__CAPTURE_STARTSHOT(req, sender, sendResponse) { 23295 this.cropImage(req.image, croppedBase64 => { 23296 this.fireBrowser_CONTENT__BG__CAPTURE_SAVESHOT(croppedBase64, req.download, this.props.stop, req.extClipToolMenuAction); 23297 }); 23298 } 23299 fireBrowser_CONTENT__BG__CAPTURE_SAVESHOT(croppedBase64, download, cb, extClipToolMenuAction) { 23300 this.turnAllControlsOff(); 23301 this.turnCanvasOn(); 23302 const annotationsExtended = this.unshiftShapes(this.props.clip.x, this.props.clip.y, false, 'blur'); 23303 let m = { 23304 action: "CONTENT__BG__CAPTURE_SAVESHOT", 23305 data: { 23306 download, 23307 background: croppedBase64, 23308 clip: this.props.clip, 23309 markers: this.markers, 23310 annotations: annotationsExtended, 23311 extClipToolMenuAction 23312 } 23313 }; 23314 setTimeout(() => this.util.extSendMessage(m, cb, this.turnAllControlsOn), 100); 23315 } 23316 handleBrowser_BG__CONTENT__CAPTURE_SAVESHOT(req, sender, sendResponse) { 23317 this.cropClippedImage(req.image, req.download, req.clip, req.markers, req.upload, req.background, req.annotations, req.extClipToolMenuAction); 23318 this.props.stop(); 23319 } 23320 // 23321 fireBrowser_CONTENT__BG__CAPTURE_COPYSHOT() { 23322 this.turnAllControlsOff(); 23323 let m = { 23324 action: "CONTENT__BG__CAPTURE_COPYSHOT", 23325 data: { 23326 x: this.props.clip.x, 23327 y: this.props.clip.y, 23328 w: this.props.clip.w, 23329 h: this.props.clip.h 23330 } 23331 }; 23332 this.util.extSendMessage(m, false, this.turnAllControlsOn); 23333 // setTimeout(() => this.util.extSendMessage(m, false, this.turnAllControlsOn), 10); 23334 } 23335 handleBrowser_BG__CONTENT__CAPTURE_COPYSHOT(req, sender, sendResponse) { 23336 this.turnAllControlsOn(); 23337 // }); 23338 } 23339 // 23340 23341 fireBrowser_CONTENT__BG__CAPTURE_SHOT() { 23342 this.turnAllControlsOff(); 23343 let m = { 23344 action: "CONTENT__BG__CAPTURE_SHOT" 23345 }; 23346 setTimeout(() => this.util.extSendMessage(m, false, this.turnAllControlsOn), 10); 23347 } 23348 handleBrowser_BG__CONTENT__CAPTURE_SHOT(req) {
23349 let canvas = document.createElement('canvas'); 23350 let w = window.innerWidth; 23351 let h = window.innerHeight; 23352 canvas.width = w; 23353 canvas.height = h; 23354 let ctx = canvas.getContext('2d'); 23355 let img = new Image(); 23356 img.src = req.image; 23357 img.onload = () => { 23358 ctx.drawImage(img, 0, 0, w, h); 23359 this.background = canvas.toDataURL('image/png'); 23360 }; 23361 } 23362 23363 // controls 23364 23365 turnAllControlsOn() { 23366 let tagname = this.props.embedCapturingMode ? config["a" /* default */].getEmbedTagName() : false; 23367 this.util.toggleAllControls(this.dynamic, true, tagname); 23368 } 23369 turnAllControlsOff() { 23370 let tagname = this.props.embedCapturingMode ? config["a" /* default */].getEmbedTagName() : false; 23371 this.util.toggleAllControls(this.dynamic, false, tagname); 23372 } 23373 23374 // canvas 23375 setAnnotationsVisibility(visibility, exceptToolName, removeException) { 23376 const canvas = this.dynamic; 23377 canvas.forEachObject(o => { 23378 if (o.toolName !== exceptToolName) { 23379 o.visible = visibility; 23380 } else if (o.toolName === exceptToolName && removeException) { 23381 canvas.remove(o); 23382 } 23383 }); 23384 canvas.renderAll(); 23385 } 23386 turnCanvasOn() { 23387 let tagname = this.props.embedCapturingMode ? config["a" /* default */].getEmbedTagName() : false; 23388 // this.util.toggleCanvas(this.dynamic, true, tagname); 23389 this.setAnnotationsVisibility(true, 'blur'); 23390 } 23391 turnCanvasOff() { 23392 let tagname = this.props.embedCapturingMode ? config["a" /* default */].getEmbedTagName() : false; 23393 // this.util.toggleCanvas(this.dynamic, false, tagname); 23394 this.setAnnotationsVisibility(false, 'blur'); 23395 } 23396 23397 // video 23398 startVideoCapture() { 23399 this.fireBrowser_CONTENT__BG__CAPTURE_VIDEO_START(); 23400 } 23401 stopVideoCapture() { 23402 this.fireBrowser_ALL__BG__CAPTURE_VIDEO_STOP(); 23403 } 23404 23405 // end of fullscreenvideo 23406 23407 // tools settings restore 23408 handleBrowser_BG__CONTENT__TOOLS_SETTINGS(req, sender, sendResponse) { 23409 let toolsSettings = req.data; 23410 if (toolsSettings) { 23411 if (false) {} 23412 console.log(toolsSettings, this.state.tool); 23413 setTimeout(() => { 23414 this.setAnnotationTool(this.state.tool, "select"); 23415 this.setAnnotationTool("select", toolsSettings.tool); 23416 }, 0); 23417 } 23418 } 23419 23420 // clipped video 23421 fireBrowser_CONTENT__BG__CAPTURE_VIDEO_START() { 23422 // this.turnAllControl3sOff(); 23423 let m = { 23424 action: "CONTENT__BG__CAPTURE_VIDEO_START", 23425 data: { 23426 x: this.props.clip.x, 23427 y: this.props.clip.y, 23428 w: this.props.clip.w, 23429 h: this.props.clip.h 23430 } 23431 }; 23432 this.util.log("start capture"); 23433 setTimeout(() => this.util.extSendMessage(m, false, this.turnAllControlsOn), 0); 23434 } 23435 fireBrowser_ALL__BG__CAPTURE_VIDEO_STOP() { 23436 let m = { 23437 action: "ALL__BG__CAPTURE_VIDEO_STOP" 23438 }; 23439 setTimeout(() => this.util.extSendMessage(m, this.turnAllControlsOn), 0); 23440 } 23441 handleBrowser_BG__CONTENT__CAPTURE_VIDEO_STOP(req, sender, sendResponse) { 23442 setTimeout(() => { 23443 this.props.stopVideoCapture(); 23444 }, 0); 23445 this.turnAllControlsOn(); 23446 } 23447 23448 // end of clipped video 23449 saveShareCurrentClip() { 23450 this.props.clearUnsavedChanges(); 23451 this.fireBrowser_CONTENT__BG__CAPTURE_SAVESHARE(); 23452 } 23453 getImageData() {
23454 let canvas = this.dynamic; 23455 let transform = canvas.viewportTransform.slice(); 23456 canvas.viewportTransform = [1, 0, 0, 1, 0, 0]; 23457 let sizes = this.state.sizes; 23458 let pos = { 23459 left: sizes.width / 2 - this.props.embedImageWidth / 2, 23460 top: sizes.height / 2 - this.props.embedImageHeight / 2 23461 }; 23462 23463 // if (this.props.embedMode) { 23464 // pos = { 23465 // left: canvas.backgroundImage.aCoords.tl.x + 1, 23466 // top: canvas.backgroundImage.aCoords.tl.y + 1 23467 // }; 23468 // } 23469 let dataurl = canvas.toDataURL({ 23470 format: 'png', 23471 left: pos.left, 23472 top: pos.top, 23473 width: this.props.embedImageWidth, 23474 height: this.props.embedImageHeight 23475 }); 23476 canvas.viewportTransform = transform; 23477 return dataurl; 23478 } 23479 saveCurrentClip_embedCapturing(cb) { 23480 let shotSettings = { 23481 x: this.props.clip.x, 23482 y: this.props.clip.y, 23483 width: this.props.clip.w, 23484 height: this.props.clip.h, 23485 useCORS: true, 23486 scale: 1 23487 }; 23488 Canvas_html2canvas && Canvas_html2canvas(document.body, shotSettings).then(shot => { 23489 let ctx = shot.getContext('2d'); 23490 ctx.webkitImageSmoothingEnabled = false; 23491 ctx.mozImageSmoothingEnabled = false; 23492 ctx.imageSmoothingEnabled = false; 23493 let img = new Image(); 23494 img.src = this.dynamic.toDataURL(); 23495 img.onload = () => { 23496 // ctx.drawImage(img, shotSettings.x, shotSettings.y, shotSettings.width, shotSettings.height, 0, 0, shotSettings.width, shotSettings.height); 23497 ctx.drawImage(img, 0, 0); 23498 let clip = shot.toDataURL("image/png"); 23499 23500 // let markers = this.cropMarkersPositions(this.markers, shotSettings.x, shotSettings.y, 1); 23501 // markers = this.util.markersPositionToPercents(markers, shotSettings.width, shotSettings.height); 23502 this.props.saveCallback({ 23503 clipData: clip, 23504 markers: this.markers 23505 }); 23506 if (cb) cb(); 23507 }; 23508 }); 23509 } 23510 showEmbedNotification(text) { 23511 if (!("Notification" in window)) alert(text);else if (Notification.permission === "granted") new Notification(text);else if (Notification.permission !== "denied") { 23512 Notification.requestPermission().then(function (permission) { 23513 if (permission === "granted") new Notification(text); 23514 }); 23515 } 23516 } 23517 copyFromImg(url) { 23518 let img = document.createElement('img'); 23519 img.style.position = 'fixed'; 23520 img.style.top = '-99999px'; 23521 img.style.left = '-99999px'; 23522 document.body.appendChild(img); 23523 img.src = url; 23524 img.addEventListener('load', () => { 23525 window.getSelection().removeAllRanges(); 23526 let r = document.createRange(); 23527 r.selectNode(img); 23528 window.getSelection().addRange(r); 23529 document.execCommand('copy'); 23530 console.log(img, r); 23531 console.log(window.getSelection()); 23532 window.getSelection().removeAllRanges(); 23533 if (this.props.setAppNotification) { 23534 this.props.setAppNotification("Image copied to the clipboard."); 23535 } 23536 }); 23537 } 23538 async copyShot_embed(cb) { 23539 let canvas = this.dynamic; 23540 let transform = canvas.viewportTransform.slice(); 23541 canvas.viewportTransform = [1, 0, 0, 1, 0, 0]; 23542 let pos = { 23543 left: canvas.backgroundImage.aCoords.tl.x + 1, 23544 top: canvas.backgroundImage.aCoords.tl.y + 1 23545 }; 23546 let dataurl = canvas.toDataURL({ 23547 format: 'png', 23548 left: pos.left, 23549 top: pos.top, 23550 width: this.props.embedImageWidth, 23551 height: this.props.embedImageHeight 23552 }); 23553 canvas.viewportTransform = transform; 23554 if (typeof ClipboardItem === 'undefined') this.copyFromImg(dataurl);else { 23555 const makeImagePromise = async () => { 23556 const response = await fetch(dataurl); 23557 return await response.blob(); 23558 }; 23559 util["h" /* isSafari */] ? await navigator.clipboard.write([new ClipboardItem({ 23560 "image/png": makeImagePromise() 23561 })]) : navigator.clipboard.write([new ClipboardItem({ 23562 "image/png": await (await fetch(dataurl)).blob() 23563 })]); 23564 this.props.setAppNotification("Image copied to the clipboard."); 23565 } 23566 } 23567 copyShot_embedCapturing(cb) { 23568 this.turnAllControlsOff(); 23569 let shotSettings = { 23570 x: this.props.clip.x, 23571 y: this.props.clip.y, 23572 width: this.props.clip.w, 23573 height: this.props.clip.h, 23574 useCORS: true, 23575 scale: 1 23576 }; 23577 Canvas_html2canvas && Canvas_html2canvas(document.body, shotSettings).then(shot => { 23578 let ctx = shot.getContext('2d'); 23579 ctx.webkitImageSmoothingEnabled = false;
23580 ctx.mozImageSmoothingEnabled = false; 23581 ctx.imageSmoothingEnabled = false; 23582 let img = new Image(); 23583 img.src = this.dynamic.toDataURL(); 23584 // debugger; 23585 img.onload = () => { 23586 // ctx.drawImage(img, shotSettings.x, shotSettings.y, shotSettings.width, shotSettings.height, 0, 0, shotSettings.width, shotSettings.height); 23587 ctx.drawImage(img, 0, 0); 23588 shot.toBlob(blob => { 23589 console.log(shot.toDataURL()); 23590 try { 23591 navigator.clipboard.write([new ClipboardItem({ 23592 "image/png": blob 23593 })]); 23594 } catch (e) { 23595 console.log("error copying image", e); 23596 } 23597 this.showEmbedNotification("Image copied to the clipboard."); 23598 if (cb) cb(); 23599 }); 23600 }; 23601 }); 23602 } 23603 clipToClipboard() { 23604 if (this.props.embedCapturingMode) this.copyShot_embedCapturing(this.turnAllControlsOn);else if (this.props.embedMode) this.copyShot_embed();else this.fireBrowser_CONTENT__BG__CAPTURE_COPYSHOT(); 23605 } 23606 hasZeroDimension(o) { 23607 let type = o && o.get && o.get("type"); 23608 return type === 'rect' && o.get("width") <= 1 && o.get("height") <= 1 // and blur rect too 23609 || type === 'ellipse' && o.get("rx") <= 1 && o.get("ry") <= 1 || type === 'triangle' && o.get("width") <= 1 && o.get("height") <= 1 || type === 'line' && Math.abs(o.get("x1") - o.get("x2")) <= 1 && Math.abs(o.get("y1") - o.get("y2")) <= 1 || type === 'triangle' && o.get("width") <= 1 && o.get("height") <= 1; 23610 } 23611 shapeRemoveIfZero(shape) { 23612 let o = shape || this.dynamic.getActiveObject(); 23613 let canvas = this.dynamic; 23614 if (!o) return; 23615 let zero = this.hasZeroDimension(o); 23616 if (zero) { 23617 canvas.remove(o); 23618 canvas.requestRenderAll(); 23619 } 23620 return zero; 23621 } 23622 shapeAfterTransforming() { 23623 let o = this.dynamic.getActiveObject(); 23624 let canvas = this.dynamic; 23625 if (!o) return; 23626 if (!this.historyDisabled) { 23627 this.historyDo(); 23628 canvas.fire("object:special:transformed", { 23629 target: o 23630 }); 23631 } 23632 } 23633 bringToFront(o) { 23634 if (this.hover) { 23635 this.disableHistoryEvents(); 23636 this.dynamic.remove(this.hover); 23637 this.enableHistoryEvents(); 23638 } 23639 const BOTTOMED_TOOLS = ['img', 'blur', 'ellipse', 'rect', 'arrow', 'pen', 'highlighter']; 23640 if (o.selected && o.selected.length > 0 && !BOTTOMED_TOOLS.includes(o.selected[0].toolName)) { 23641 o = o.selected[0].group ? o.selected[0].group : o.target; 23642 if (!o) debugger; 23643 try { 23644 o.bringToFront(); 23645 } catch (e) { 23646 this.dynamic.discardActiveObject(); 23647 this.dynamic.renderAll(); 23648 } 23649 // this.historyFixLast(); 23650 } else if (o.selected && o.selected.length > 0 && BOTTOMED_TOOLS.includes(o.selected[0].toolName) && o.selected[0].toolName !== 'img') { 23651 const upperTools = o.selected[0].toolName == 'pen' || o.selected[0].toolName == 'highlighter' ? ['text'] : [...BOTTOMED_TOOLS, 'text'].splice(BOTTOMED_TOOLS.indexOf(o.selected[0].toolName) + 1); 23652 const current = o.selected[0]; 23653 o.selected[0].sendToBack(); 23654 let objects = this.dynamic.getObjects(); 23655 let firstIndex = objects.findIndex(object => upperTools.includes(object.toolName)); 23656 firstIndex = firstIndex == -1 ? objects.length - 1 : firstIndex - 1; 23657 firstIndex = firstIndex < 0 ? 0 : firstIndex; //+ this.props.embedMode ? 1 : 0; 23658 current.moveTo(firstIndex); 23659 } else if (o.selected && o.selected.length > 0 && o.selected[0].toolName === 'img') { 23660 const current = o.selected[0]; 23661 o.selected[0].sendToBack(); 23662 let firstIndex = -1; 23663 let objects = this.dynamic.getObjects(); 23664 objects.forEach((object, i) => { 23665 if (object.toolName === 'img') { 23666 firstIndex = i; 23667 } 23668 }); 23669 firstIndex = firstIndex === -1 ? 0 : firstIndex; //+ this.props.embedMode ? 1 : 0; 23670 current.moveTo(firstIndex); 23671 } 23672 } 23673 getLastShape() { 23674 let os = this.dynamic.getObjects(); 23675 return os.length > 0 ? os[os.length - 1] : false; 23676 } 23677 selectLast(o) { 23678 if (o && o.target && o.target.objectID === 'HOVER-1') return; 23679 let shape = this.getLastShape(); 23680 if (shape 23681 // not to select previous shape if zero-shape drawn and previous was text
23682 && shape.type !== 'i-text') { 23683 setTimeout(() => { 23684 if (shape && shape.canvas) { 23685 shape.canvas.setActiveObject(shape); 23686 } 23687 }, 0); 23688 } 23689 } 23690 historyFixLast() { 23691 let h = this.history; 23692 let len = h.length; 23693 if (len > 0) { 23694 h[len - 1] = this.dynamic.toObject(this.specialFields); 23695 } 23696 } 23697 getToolSet(sets) { 23698 let settings = {}; 23699 if (sets.bars) { 23700 sets.bars.forEach(b => { 23701 if (b.hasOwnProperty("disabled")) { 23702 settings[b.name] = b.disabled; 23703 } 23704 b.inner.forEach(p => { 23705 let value = p.value; 23706 settings[p.name] = value; 23707 }); 23708 }); 23709 } 23710 return settings; 23711 } 23712 setCurrentShapeSettings(data) { 23713 let canvas = this.dynamic; 23714 if (!canvas) return; 23715 let current = canvas.getActiveObject(); 23716 if (current) { 23717 // ugly hack to get current object (because of selection isnt disabled in annotation mode) 23718 // let tool = (current.type === 'activeSelection') ? current.getObjects()[current.getObjects().length-1].toolName:current.toolName; 23719 23720 let newSet = {}; 23721 newSet[data.name] = data.value; 23722 newSet['styles'] = {}; 23723 23724 // current shape
23725 current.fire("special:settings", { 23726 target: current, 23727 settings: newSet 23728 }); 23729 23730 // current tool 23731 this.tools[data.tool].setSettings(newSet); 23732 canvas.requestRenderAll(); 23733 } 23734 } 23735 setCurrentShapeToolSettings(sets) { 23736 let canvas = this.dynamic; 23737 if (!canvas) return; 23738 let current = canvas.getActiveObject(); 23739 current = current && current.type === 'activeSelection' ? current.getObjects()[current.getObjects().length - 1] : current; 23740 if (current) { 23741 // ugly hack to get current object (because of selection isnOt disabled in annotation mode in fact) 23742 let tool = current.toolName; 23743 let newSet = this.getToolSet(sets.tools[tool]); 23744 23745 // tool defaults 23746 this.tools[tool].setSettings(newSet); 23747 canvas.requestRenderAll(); 23748 } 23749 } 23750 23751 // render 23752 23753 render() { 23754 let className = ["Canvas"]; 23755 if (this.state.imageMode || this.state.videoMode || this.props.embedMode) { 23756 className.push("dynamic"); 23757 } else { 23758 className.push("static"); 23759 } 23760 if (this.state.pageInteractionsMode || this.state.newMarker) { 23761 className.push("pointerless"); 23762 } 23763 // if (this.props.autosnapMode && !this.props.imageMode) className.push("autosnapMode"); 23764 23765 if (this.props.clip.transforming) { 23766 className.push("hidden"); 23767 } 23768 return /*#__PURE__*/react_default.a.createElement("div", { 23769 className: className.join(" ") 23770 }, /*#__PURE__*/react_default.a.createElement("canvas", { 23771 id: "dynamicCanvas", 23772 ref: this.dynamicCanvas 23773 })); 23774 } 23775} 23776let Canvas_mapStateToProps = state => { 23777 return { 23778 zoomPanDisabled: state.embed.zoomPanDisabled, 23779 commentsMoving: state.app.commentsMoving, 23780 currentMarker: state.app.currentMarker, 23781 commentDialogOpened: state.app.commentDialogOpened, 23782 shapesShadow: state.app.shapesShadow, 23783 markers: state.app.markers, 23784 clip: { 23785 ...state.clip, 23786 clipped: state.app.clipped, 23787 clipping: state.app.clipping, 23788 moving: state.app.moving, 23789 scaling: state.app.scaling, 23790 transforming: state.app.moving || state.app.scaling, 23791 cornerSize: 8 23792 }, 23793 sizes: { 23794 left: state.app.sizes.left, 23795 top: state.app.sizes.top, 23796 width: state.app.sizes.width, 23797 height: state.app.sizes.height 23798 }, 23799 mime: state.embed.mime, 23800 embedPath: state.embed.embedPath, 23801 dpxr: state.embed.dpxr, 23802 zoom: state.app.zoom, 23803 zoomPoint: state.app.zoomPoint, 23804 previewMode: state.app.previewMode, 23805 embedCapturingMode: state.app.embedCapturingMode, 23806 clipclipMode: state.app.clipclipMode, 23807 embedSavingProcess: state.embed.embedSavingProcess, 23808 embedImageUrl: state.embed.imageUrl, 23809 embedImageWidth: state.embed.imageWidth, 23810 embedImageHeight: state.embed.imageHeight, 23811 clipped: state.app.clipped, 23812 imageMode: state.app.imageMode, 23813 videoMode: state.app.videoMode, 23814 videoCapture: state.app.videoCapture, 23815 objectData: state.app.currentObjectData, 23816 autosnapMode: state.app.autosnapMode, 23817 imageMode: state.app.imageMode, 23818 pageInteractionsMode: state.app.pageInteractionsMode, 23819 controlledCoords: state.cursorinfo.controlledCoords, 23820 shown: state.cursorinfo.show, 23821 tools: state.tools, 23822 newMarker: state.app.newMarker, 23823 isAutosave: state.embed.isAutosave, 23824 initialZoom: state.embed.initialZoom, 23825 markerMoving: state.app.markerMoving, 23826 preloadedAnnotations: state.app.annotations, 23827 backgroundSavedBefore: state.app.backgroundSavedBefore, 23828 unsavedChanges: state.app.unsavedChanges, 23829 navigationMode: state.user.navigationMode 23830 }; 23831}; 23832let Canvas_mapDispatchToProps = dispatch => { 23833 return { 23834 changeSizes: sizes => dispatch({ 23835 type: "SIZES", 23836 value: sizes 23837 }), 23838 setEmbedImageLoaded: () => dispatch({ 23839 type: "EMBED_IMAGE_LOADED" 23840 }), 23841 setMimeType: val => dispatch({ 23842 type: 'MIME', 23843 value: val 23844 }), 23845 zoomTo: (val, point) => dispatch({ 23846 type: "ZOOM_TO", 23847 value: val, 23848 point: point 23849 }), 23850 setNewSizes: s => dispatch({ 23851 type: "SIZES", 23852 value: s 23853 }), 23854 setCanvasInteraction: () => dispatch({ 23855 type: "CANVAS_INTERACTION", 23856 value: true 23857 }), 23858 setCanvasNoInteraction: () => dispatch({ 23859 type: "CANVAS_INTERACTION", 23860 value: false 23861 }), 23862 clearUnsavedChanges: () => dispatch({ 23863 type: "CHANGES_CLEAR" 23864 }), 23865 setUnsavedChanges: () => dispatch({ 23866 type: "CHANGES_DONE" 23867 }), 23868 startClipsUpdate: () => dispatch({ 23869 type: "CLIPSUPDATE", 23870 value: true 23871 }), 23872 changeTool: tool => dispatch({ 23873 type: 'CHANGE_TOOL', 23874 value: tool 23875 }), 23876 resetToolsSettings: () => dispatch({ 23877 type: 'RESET_TOOLS_SETTINGS' 23878 }), 23879 setCurrentObjectData: data => { 23880 dispatch({
23881 type: "CURRENT_OBJECT_DATA", 23882 value: data 23883 }); 23884 }, 23885 stop: () => { 23886 dispatch({ 23887 type: 'CLEAR' 23888 }); 23889 dispatch({ 23890 type: 'SCROLL', 23891 value: { 23892 left: window.scrollX, 23893 top: window.scrollY 23894 } 23895 }); 23896 dispatch({ 23897 type: 'SHOW_CLIP' 23898 }); 23899 dispatch({ 23900 type: "READY" 23901 }); 23902 }, 23903 setSavedClipData: data => { 23904 dispatch({ 23905 type: 'CLIP_SAVED', 23906 value: { 23907 url: data.url, 23908 shortUrl: data.clip.url, 23909 title: data.title 23910 } 23911 }); 23912 }, 23913 stopVideoCapture: () => { 23914 dispatch({ 23915 type: 'NOTVIDEO_CAPTURE' 23916 }); 23917 }, 23918 enableZoomPan: () => { 23919 dispatch({ 23920 type: 'ZOOMPAN_ENABLE' 23921 }); 23922 }, 23923 disableZoomPan: () => { 23924 dispatch({ 23925 type: 'ZOOMPAN_DISABLE' 23926 }); 23927 }, 23928 setInitialZoom: val => dispatch({ 23929 type: 'INITIAL_ZOOM', 23930 value: val 23931 }), 23932 // setShareDialogOpened: () => dispatch({ type: 'SHARE_DIALOG_OPENED', value: true }), 23933 startPageInteractions: () => dispatch({ 23934 type: 'PAGEINTERACTIONS' 23935 }), 23936 stopPageInteractions: () => dispatch({ 23937 type: 'NOTPAGEINTERACTIONS' 23938 }), 23939 showPleaseWait: () => dispatch({ 23940 type: 'SHOW_PLEASEWAIT' 23941 }), 23942 hidePleaseWait: () => dispatch({ 23943 type: 'HIDE_PLEASEWAIT' 23944 }), 23945 stopEmbedCapturing: () => dispatch({ 23946 "type": "NOT_EMBEDCAPTURING" 23947 }), 23948 setHistoryCursor: val => dispatch({ 23949 type: "HISTORY_CURSOR", 23950 value: val 23951 }) 23952 }; 23953}; 23954/* harmony default export */ var components_Canvas_Canvas = (Object(es["b" /* connect */])(Canvas_mapStateToProps, Canvas_mapDispatchToProps, null, { 23955 forwardRef: true 23956})(Canvas_Canvas_Canvas)); 23957// EXTERNAL MODULE: ./src/editor/components/ClipEditor/ClipEditor2.js 23958var ClipEditor2 = __webpack_require__("44o8"); 23959 23960// EXTERNAL MODULE: ./src/editor/components/PureEditor/PureEditor.css 23961var PureEditor_PureEditor = __webpack_require__("DI6R"); 23962 23963// CONCATENATED MODULE: ./src/editor/components/PureEditor/PureEditor.js 23964 23965 23966 23967 23968 23969 23970 23971class PureEditor_PureEditor_PureEditor extends react["Component"] { 23972 constructor(props) { 23973 super(props); 23974 this.state = { 23975 previewMode: props.previewMode, 23976 embedMode: props.embedMode, 23977 canvasInteraction: false 23978 }; 23979 this.canvasRef = /*#__PURE__*/react_default.a.createRef(); 23980 this.util = new util["c" /* default */](); 23981 } 23982 static getDerivedStateFromProps(nextProps, prevState) { 23983 let ret = {}; 23984 if (prevState.canvasInteraction !== nextProps.canvasInteraction) ret.canvasInteraction = nextProps.canvasInteraction; 23985 if (prevState.previewMode !== nextProps.previewMode) ret.previewMode = nextProps.previewMode; 23986 if (prevState.embedMode !== nextProps.embedMode) ret.embedMode = nextProps.embedMode; 23987 return Object.keys(ret).length > 0 ? ret : null; 23988 } 23989 shouldComponentUpdate(nextProps, nextState) { 23990 var _nextProps$copyAsImag, _this$props$copyAsIma; 23991 let should = nextState.embedMode !== this.state.embedMode || nextState.previewMode !== this.state.previewMode || nextState.canvasInteraction !== this.state.canvasInteraction || nextProps.copyAsImage && ((_nextProps$copyAsImag = nextProps.copyAsImage) === null || _nextProps$copyAsImag === void 0 ? void 0 : _nextProps$copyAsImag.copyAsImage) !== ((_this$props$copyAsIma = this.props.copyAsImage) === null || _this$props$copyAsIma === void 0 ? void 0 : _this$props$copyAsIma.copyAsImage) || this.props.saveBeforeDownload != nextProps.saveBeforeDownload; 23992 return should; 23993 } 23994 componentDidMount() {} 23995 render() {
23996 let className = ["PureEditor", this.state.embedMode ? "shown" : "", this.state.previewMode ? "previewMode" : "", this.state.canvasInteraction ? "canvasInteraction" : ""].join(" "); 23997 return /*#__PURE__*/react_default.a.createElement("div", { 23998 className: className 23999 }, /*#__PURE__*/react_default.a.createElement(components_Canvas_Canvas, { 24000 shareSaveCurrentClip: this.props.shareSaveCurrentClip, 24001 ref: this.canvasRef, 24002 copyAsImage: this.props.copyAsImage, 24003 setGetImageDataFn: this.props.setGetImageDataFn, 24004 saveCallback: this.props.saveCallback, 24005 embedMode: this.state.embedMode, 24006 previewMode: this.state.previewMode, 24007 setAppNotification: this.props.setAppNotification 24008 }), this.state.embedMode && /*#__PURE__*/react_default.a.createElement(ClipEditor2["a" /* default */], { 24009 signForm: () => this.props.signForm(), 24010 saveMarkers: this.props.saveMarkers, 24011 saveCallback: this.props.saveCallback, 24012 loadedCallback: this.props.loadedCallback, 24013 embedMode: this.state.embedMode, 24014 previewMode: this.state.previewMode, 24015 getBorders: this.props.getBorders, 24016 Canvas: this.canvasRef, 24017 saveBeforeDownload: this.props.saveBeforeDownload, 24018 setAppNotification: this.props.setAppNotification 24019 })); 24020 } 24021} 24022let PureEditor_mapStateToProps = state => { 24023 return { 24024 canvasInteraction: state.app.canvasInteraction, 24025 previewMode: state.app.previewMode, 24026 embedMode: state.app.embedMode, 24027 imageWidth: state.embed.imageWidth, 24028 imageHeight: state.embed.imageHeight, 24029 tools: state.tools 24030 }; 24031}; 24032let PureEditor_mapDispatchToProps = dispatch => { 24033 return {}; 24034}; 24035/* harmony default export */ var components_PureEditor_PureEditor = (Object(es["b" /* connect */])(PureEditor_mapStateToProps, PureEditor_mapDispatchToProps, null, { 24036 forwardRef: false 24037})(PureEditor_PureEditor_PureEditor)); 24038// EXTERNAL MODULE: ./src/editor/components/ClipControl/ClipControl.css 24039var ClipControl_ClipControl = __webpack_require__("IK+S"); 24040 24041// CONCATENATED MODULE: ./src/editor/components/ClipControl/ClipControl.js 24042 24043 24044 24045 24046 24047class ClipControl_ClipControl_ClipControl extends react["Component"] { 24048 constructor(props) { 24049 super(props); 24050 this.util = new util["c" /* default */](); 24051 this.state = { 24052 annotationMode: this.props.annotationMode, 24053 x: this.props.clip.x, 24054 y: this.props.clip.y, 24055 w: this.props.clip.w, 24056 h: this.props.clip.h, 24057 mouse: { 24058 x: this.props.mouse.x, 24059 y: this.props.mouse.y 24060 }, 24061 scaling: this.props.clip.scaling, 24062 moving: this.props.clip.moving, 24063 clipping: this.props.clip.clipping, 24064 clipped: this.props.clip.clipped, 24065 transforming: this.props.clip.transforming, 24066 showControlCorners: this.props.showControlCorners 24067 }; 24068 this.mouseCoordsChanged = false; 24069 this.borderWidth = 2; 24070 this.cornerRadius = 4; 24071 this.cornerBorder = 3; 24072 this.scaler = false; 24073 24074 // scaling 24075 this.handleMouseMove = this.handleMouseMove.bind(this); 24076 this.doScaling = this.doScaling.bind(this); 24077 this.startScaling = this.startScaling.bind(this); 24078 this.stopScaling = this.stopScaling.bind(this); 24079 this.shiftKeyHandle = this.shiftKeyHandle.bind(this); 24080 this.currentScalingPoint = { 24081 x: 0, 24082 y: 0 24083 }; 24084 this.startScalingPoint = { 24085 x: 0, 24086 y: 0 24087 }; 24088 } 24089 shiftKeyHandle(e) { 24090 this.shiftKey = e.shiftKey; 24091 } 24092 static getDerivedStateFromProps(nextProps, prevState) { 24093 let ret = {}; 24094 if (nextProps.annotationMode !== prevState.annotationMode) ret.annotationMode = nextProps.annotationMode; 24095 if (nextProps.showControlCorners !== prevState.showControlCorners) ret.showControlCorners = nextProps.showControlCorners; 24096 if (nextProps.mouse && nextProps.mouse.x !== prevState.mouse.x) ret.mouse = nextProps.mouse; 24097 if (nextProps.mouse && nextProps.mouse.y !== prevState.mouse.y) ret.mouse = nextProps.mouse; 24098 if (nextProps.clip && nextProps.clip.x !== prevState.x) ret.x = nextProps.clip.x; 24099 if (nextProps.clip && nextProps.clip.y !== prevState.y) ret.y = nextProps.clip.y; 24100 if (nextProps.clip && nextProps.clip.w !== prevState.w) ret.w = nextProps.clip.w; 24101 if (nextProps.clip && nextProps.clip.h !== prevState.h) ret.h = nextProps.clip.h; 24102 if (nextProps.clip.scaling !== prevState.scaling) ret.scaling = nextProps.clip.scaling; 24103 if (nextProps.clip.clipping !== prevState.clipping) ret.clipping = nextProps.clip.clipping; 24104 if (nextProps.clip.clipped !== prevState.clipped) ret.clipped = nextProps.clip.clipped; 24105 if (nextProps.clip.moving !== prevState.moving) ret.moving = nextProps.clip.moving; 24106 if (nextProps.clip.transforming !== prevState.transforming) ret.transforming = nextProps.clip.transforming; 24107 return Object.keys(ret).length > 0 ? ret : null; 24108 } 24109 shouldComponentUpdate(nextProps, nextState) { 24110 let should = !this.equals(nextState, this.state); 24111 if ((this.state.mouse.x !== nextState.mouse.x || this.state.mouse.y !== nextState.mouse.y) && this.state.scaling) this.mouseCoordsChanged = true;else this.mouseCoordsChanged = false;
24112 return should; 24113 } 24114 equals(nextState, oldState) { 24115 let ret = nextState.transforming === oldState.transforming && nextState.scaling === oldState.scaling && nextState.clipping === oldState.clipping && nextState.clipped === oldState.clipped && nextState.moving === oldState.moving && nextState.x === oldState.x && nextState.y === oldState.y && nextState.w === oldState.w && nextState.h === oldState.h && nextState.annotationMode === oldState.annotationMode && nextState.showControlCorners === oldState.showControlCorners 24116 24117 // && nextState.mouse.x === oldState.mouse.x 24118 // && nextState.mouse.y === oldState.mouse.y 24119 ; 24120 return ret; 24121 } 24122 componentDidMount() { 24123 document.addEventListener("keydown", this.shiftKeyHandle); 24124 document.addEventListener("keyup", this.shiftKeyHandle); 24125 // document.addEventListener("mousemove", this.doScaling); 24126 document.addEventListener("mouseup", this.stopScaling); 24127 requestAnimationFrame(this.handleMouseMove); 24128 } 24129 handleMouseMove() { 24130 if (this.willUnmount) return; 24131 if (this.state.scaling && this.state.clipped) this.doScaling(); 24132 requestAnimationFrame(this.handleMouseMove); 24133 } 24134 componentWillUnmount() { 24135 this.willUnmount = true; 24136 document.removeEventListener("keydown", this.shiftKeyHandle); 24137 document.removeEventListener("keyup", this.shiftKeyHandle); 24138 // document.removeEventListener("mousemove", this.doScaling); 24139 document.removeEventListener("mouseup", this.stopScaling); 24140 } 24141 24142 // scaling 24143 startScaling(e) { 24144 e.nativeEvent.stopImmediatePropagation(); 24145 this.util.log("scaler:", this.scaler, e); 24146 var target = e.target.dataset.scaler ? e.target : e.target.parentNode; 24147 if (this.state.clipping) return; 24148 this.scaler = target.dataset.scaler; 24149 this.startProportions = this.props.clip.w / this.props.clip.h; 24150 if (this.scaler) { 24151 this.currentScalingPoint.x = e.pageX; 24152 this.currentScalingPoint.y = e.pageY; 24153 this.setStartScalingPoint(); 24154 this.props.setScaling(() => this.props.showCursorInfo(this.currentScalingPoint)); 24155 } 24156 } 24157 doScaling(e) { 24158 if (!this.state.scaling) return; 24159 if (!this.scaler) return; 24160 let clip = {}; 24161 const x = this.state.mouse.x; 24162 const y = this.state.mouse.y; 24163 let dir = { 24164 x: 1, 24165 y: 1 24166 }; 24167 if (this.shiftKey && ['n', 'e', 's', 'w'].includes(this.scaler)) return; 24168 switch (this.scaler) { 24169 case 'n': 24170 clip.y = y; 24171 clip.h = this.props.clip.h + (this.props.clip.y - y); 24172 if (clip.h < 0) { 24173 clip.h = 0; 24174 clip.y = this.props.clip.y + this.props.clip.h; 24175 this.setStartScalingPoint({ 24176 y: clip.y 24177 }); 24178 this.scaler = 's'; 24179 } 24180 dir = { 24181 x: 0, 24182 y: -1 24183 }; 24184 break; 24185 case 's': 24186 clip.x = this.props.clip.x; 24187 clip.y = Math.min(this.getStartScalingPoint().y, y); 24188 clip.h = Math.abs(this.getStartScalingPoint().y - y); 24189 dir = { 24190 x: 0, 24191 y: 1 24192 }; 24193 break; 24194 case 'w': 24195 clip.x = x; 24196 clip.w = this.props.clip.w + (this.props.clip.x - x); 24197 if (clip.w < 0) { 24198 clip.w = 0; 24199 clip.x = this.props.clip.x + this.props.clip.w; 24200 this.setStartScalingPoint({ 24201 x: clip.x 24202 }); 24203 this.scaler = 'e'; 24204 } 24205 dir = { 24206 x: -1, 24207 y: 0 24208 }; 24209 break; 24210 case 'e': 24211 clip.x = Math.min(this.getStartScalingPoint().x, x); 24212 clip.w = Math.abs(this.getStartScalingPoint().x - x); 24213 dir = { 24214 x: 1, 24215 y: 0 24216 }; 24217 break; 24218 case 'nw': 24219 clip.x = x; 24220 clip.y = y; 24221 clip.w = this.props.clip.w + (this.props.clip.x - x); 24222 clip.h = this.props.clip.h + (this.props.clip.y - y); 24223 dir = { 24224 x: -1, 24225 y: -1 24226 }; 24227 if (clip.w < 0 && clip.h < 0) { 24228 clip.w = 0; 24229 clip.h = 0; 24230 clip.x = this.props.clip.x + this.props.clip.w; 24231 clip.y = this.props.clip.y + this.props.clip.h; 24232 this.setStartScalingPoint({ 24233 x: clip.x, 24234 y: clip.y 24235 }); 24236 this.scaler = 'se'; 24237 dir = { 24238 x: 1, 24239 y: 1 24240 }; 24241 } else if (clip.w < 0) { 24242 clip.w = 0; 24243 clip.x = this.props.clip.x + this.props.clip.w; 24244 this.setStartScalingPoint({ 24245 x: clip.x 24246 }); 24247 this.scaler = 'ne'; 24248 dir = { 24249 x: 1, 24250 y: -1 24251 }; 24252 } else if (clip.h < 0) { 24253 clip.h = 0; 24254 clip.y = this.props.clip.y + this.props.clip.h; 24255 this.setStartScalingPoint({ 24256 y: clip.y 24257 }); 24258 this.scaler = 'sw'; 24259 dir = { 24260 x: -1, 24261 y: 1 24262 }; 24263 } 24264 break;
24265 case 'ne': 24266 clip.x = Math.min(this.getStartScalingPoint().x, x); 24267 clip.y = y; 24268 clip.w = x - this.getStartScalingPoint().x; 24269 clip.h = this.props.clip.h + (this.props.clip.y - y); 24270 dir = { 24271 x: 1, 24272 y: -1 24273 }; 24274 if (clip.w < 0 && clip.h < 0) { 24275 clip.w = 0; 24276 clip.h = 0; 24277 clip.x = this.props.clip.x; 24278 clip.y = this.props.clip.y + this.props.clip.h; 24279 this.setStartScalingPoint({ 24280 x: clip.x, 24281 y: clip.y 24282 }); 24283 this.scaler = 'sw'; 24284 dir = { 24285 x: -1, 24286 y: 1 24287 }; 24288 } else if (clip.w < 0) { 24289 clip.w = 0; 24290 clip.x = this.props.clip.x; 24291 this.setStartScalingPoint({ 24292 x: clip.x 24293 }); 24294 this.scaler = 'nw'; 24295 dir = { 24296 x: -1, 24297 y: -1 24298 }; 24299 } else if (clip.h < 0) { 24300 clip.h = 0; 24301 clip.y = this.props.clip.y + this.props.clip.h; 24302 this.setStartScalingPoint({ 24303 y: clip.y 24304 }); 24305 this.scaler = 'se'; 24306 dir = { 24307 x: 1, 24308 y: 1 24309 }; 24310 } 24311 break; 24312 case 'sw': 24313 clip.x = x; 24314 clip.y = Math.min(this.getStartScalingPoint().y, y); 24315 clip.w = this.props.clip.w + (this.props.clip.x - x); 24316 clip.h = y - this.getStartScalingPoint().y; 24317 dir = { 24318 x: -1, 24319 y: 1 24320 }; 24321 if (clip.w < 0 && clip.h < 0) { 24322 clip.w = 0; 24323 clip.h = 0; 24324 clip.x = this.props.clip.x + this.props.clip.w; 24325 clip.y = this.props.clip.y; 24326 this.setStartScalingPoint({ 24327 x: clip.x, 24328 y: clip.y 24329 }); 24330 this.scaler = 'ne'; 24331 dir = { 24332 x: 1, 24333 y: -1 24334 }; 24335 } else if (clip.w < 0) { 24336 clip.w = 0; 24337 clip.x = this.props.clip.x + this.props.clip.w; 24338 this.setStartScalingPoint({ 24339 x: clip.x 24340 }); 24341 this.scaler = 'se'; 24342 dir = { 24343 x: 1, 24344 y: 1 24345 }; 24346 } else if (clip.h < 0) { 24347 clip.h = 0; 24348 clip.y = this.props.clip.y; 24349 this.setStartScalingPoint({ 24350 y: clip.y 24351 }); 24352 this.scaler = 'nw'; 24353 dir = { 24354 x: -1, 24355 y: -1 24356 }; 24357 } 24358 break; 24359 case 'se': 24360 clip.x = Math.min(this.getStartScalingPoint().x, x); 24361 clip.y = Math.min(this.getStartScalingPoint().y, y); 24362 clip.w = Math.abs(this.getStartScalingPoint().x - x); 24363 clip.h = Math.abs(this.getStartScalingPoint().y - y); 24364 dir = { 24365 x: 1, 24366 y: 1 24367 }; 24368 break; 24369 default: 24370 break; 24371 } 24372 24373 // equalizer 24374 if (this.shiftKey) { 24375 // let coords = {}; 24376 // let dir = { x: 1, y: 1 }; 24377 if (this.scaler === 'ne') clip.w = x - this.getStartScalingPoint().x;else if (this.scaler === 'sw') clip.w = this.props.clip.w + (this.props.clip.x - x);else if (this.scaler === 'nw') clip.w = this.props.clip.w + (this.props.clip.x - x);else if (this.scaler === 'se') clip.w = Math.abs(this.getStartScalingPoint().x - x); 24378 clip.h = Math.round(clip.w / this.startProportions); 24379 if (x <= this.startScalingPoint.x) { 24380 // clip.w = this.startScalingPoint.x - x; 24381 // clip.h = Math.round(clip.w / this.startProportions); 24382 dir.x = -1; 24383 } 24384 if (y <= this.startScalingPoint.y) { 24385 // clip.y = this.startScalingPoint.y - clip.h; 24386 dir.y = -1; 24387 } 24388 // coords.y = this.startScalingPoint.y + dir.y * clip.h; 24389 // coords.x = this.startScalingPoint.x + dir.x * clip.w; 24390 // this.props.setControlledCursorInfo(coords); 24391 } else { 24392 this.props.unsetControlledCursorInfo(); 24393 } 24394 24395 // 24396 clip = this.props.doBorders(clip); 24397 this.props.setClipData(clip); 24398 this.currentScalingPoint.x = x; 24399 this.currentScalingPoint.y = y; 24400 } 24401 stopScaling(e) { 24402 if (this.state.scaling) { 24403 let clip = this.props.doBorders(this.props.clip); 24404 this.props.setClipData(clip); 24405 this.props.unsetScaling(); 24406 this.scaler = false;
24407 this.props.hideCursorInfo(); 24408 this.props.unsetControlledCursorInfo(); 24409 if (!this.props.isClipDone()) { 24410 this.props.setAppClipped(false); 24411 this.props.Canvas.current.clear(); 24412 this.props.setToolSelect(); 24413 this.props.hideClipControl(); 24414 this.props.unsetClipped(); 24415 this.props.showCursorInfo({ 24416 x: e.pageX, 24417 y: e.pageY 24418 }); 24419 } 24420 } 24421 } 24422 setStartScalingPoint(coords) { 24423 coords = coords || {}; 24424 this.startScalingPoint.x = coords.x || this.props.clip.x; 24425 this.startScalingPoint.y = coords.y || this.props.clip.y; 24426 } 24427 getStartScalingPoint() { 24428 return this.startScalingPoint; 24429 } 24430 render() { 24431 let styles = {}; 24432 let className = ["ClipControl"]; 24433 let cornerClassName = ["corner"]; 24434 let clip = this.state; 24435 // clip = this.props.doBorders(clip); 24436 24437 if (!this.state.showControlCorners) { 24438 cornerClassName.push("hidden"); 24439 } 24440 if (this.state.annotationMode) { 24441 className.push("annotationMode"); 24442 } 24443 if (this.state.clipping) { 24444 className.push("clipping"); 24445 } 24446 let k = 0; //6; 24447 // borders 24448 styles.top = { 24449 width: clip.w + 2 * this.borderWidth + k + "px", 24450 left: clip.x - this.borderWidth + "px", 24451 top: clip.y - this.borderWidth + "px" 24452 }; 24453 styles.right = { 24454 height: clip.h + k + "px", 24455 left: clip.x + clip.w + "px", 24456 top: clip.y + "px" 24457 }; 24458 styles.bottom = { 24459 width: clip.w + 2 * this.borderWidth + k + "px", 24460 left: clip.x - this.borderWidth + "px", 24461 top: clip.y + clip.h + "px" 24462 }; 24463 styles.left = { 24464 height: clip.h + k + "px", 24465 left: clip.x - this.borderWidth + "px", 24466 top: clip.y + "px" 24467 }; 24468 if (this.state.clipping) { 24469 styles.top = { 24470 width: clip.w + 2 * this.borderWidth + k + "px", 24471 left: clip.x - this.borderWidth + "px", 24472 top: clip.y - this.borderWidth + "px" 24473 }; 24474 styles.right = { 24475 height: clip.h + k + "px", 24476 left: clip.x + clip.w + "px", 24477 top: clip.y + "px" 24478 }; 24479 styles.bottom = { 24480 width: clip.w + 2 * this.borderWidth + k + "px", 24481 left: clip.x - this.borderWidth + "px", 24482 top: clip.y + clip.h + "px" 24483 }; 24484 styles.left = { 24485 height: clip.h + k + "px", 24486 left: clip.x - this.borderWidth + "px", 24487 top: clip.y + "px" 24488 }; 24489 } 24490 24491 // corners 24492 styles.nw = { 24493 left: clip.x - Math.round(this.borderWidth / 2) - this.cornerRadius + "px", 24494 top: clip.y - Math.round(this.borderWidth / 2) - this.cornerRadius + "px" 24495 }; 24496 styles.n = { 24497 left: clip.x + clip.w / 2 - this.borderWidth / 2 - this.cornerBorder + "px", 24498 top: clip.y - Math.round(this.borderWidth / 2) - this.cornerRadius + "px" 24499 }; 24500 styles.ne = { 24501 left: clip.x + clip.w - this.cornerRadius + Math.round(this.borderWidth / 2) + "px", 24502 top: clip.y - Math.round(this.borderWidth / 2) - this.cornerRadius + "px" 24503 }; 24504 styles.w = { 24505 left: clip.x - Math.round(this.borderWidth / 2) - this.cornerRadius + "px", 24506 top: clip.y + clip.h / 2 - this.cornerRadius + "px" 24507 }; 24508 styles.e = { 24509 left: clip.x + clip.w - this.cornerRadius + Math.round(this.borderWidth / 2) + "px", 24510 top: clip.y + clip.h / 2 - this.cornerRadius + "px" 24511 }; 24512 styles.sw = { 24513 left: clip.x - Math.round(this.borderWidth / 2) - this.cornerRadius + "px", 24514 top: clip.y + clip.h + Math.round(this.borderWidth / 2) - this.cornerRadius + "px" 24515 }; 24516 styles.s = { 24517 left: clip.x + clip.w / 2 - this.borderWidth / 2 - this.cornerBorder + "px", 24518 top: clip.y + clip.h + Math.round(this.borderWidth / 2) - this.cornerRadius + "px" 24519 }; 24520 styles.se = { 24521 left: clip.x + clip.w - this.cornerRadius + Math.round(this.borderWidth / 2) + "px", 24522 top: clip.y + clip.h + Math.round(this.borderWidth / 2) - this.cornerRadius + "px" 24523 }; 24524 return /*#__PURE__*/react_default.a.createElement("div", { 24525 className: className.join(" ") 24526 }, /*#__PURE__*/react_default.a.createElement("div", { 24527 "data-scaler": "n", 24528 style: styles.top, 24529 onMouseDown: this.startScaling 24530 }, /*#__PURE__*/react_default.a.createElement("div", null)), /*#__PURE__*/react_default.a.createElement("div", { 24531 "data-scaler": "e", 24532 style: styles.right, 24533 onMouseDown: this.startScaling 24534 }, /*#__PURE__*/react_default.a.createElement("div", null)), /*#__PURE__*/react_default.a.createElement("div", { 24535 "data-scaler": "s", 24536 style: styles.bottom, 24537 onMouseDown: this.startScaling 24538 }, /*#__PURE__*/react_default.a.createElement("div", null)), /*#__PURE__*/react_default.a.createElement("div", { 24539 "data-scaler": "w", 24540 style: styles.left, 24541 onMouseDown: this.startScaling 24542 }, /*#__PURE__*/react_default.a.createElement("div", null)), /*#__PURE__*/react_default.a.createElement("div", { 24543 "data-scaler": "nw", 24544 className: [cornerClassName, "nw"].join(" "), 24545 style: styles.nw, 24546 onMouseDown: this.startScaling 24547 }, /*#__PURE__*/react_default.a.createElement("div", null)), /*#__PURE__*/react_default.a.createElement("div", { 24548 "data-scaler": "n", 24549 className: [cornerClassName, "n"].join(" "), 24550 style: styles.n, 24551 onMouseDown: this.startScaling 24552 }, /*#__PURE__*/react_default.a.createElement("div", null)), /*#__PURE__*/react_default.a.createElement("div", { 24553 "data-scaler": "ne", 24554 className: [cornerClassName, "ne"].join(" "), 24555 style: styles.ne, 24556 onMouseDown: this.startScaling 24557 }, /*#__PURE__*/react_default.a.createElement("div", null)), /*#__PURE__*/react_default.a.createElement("div", { 24558 "data-scaler": "w", 24559 className: [cornerClassName, "w"].join(" "), 24560 style: styles.w, 24561 onMouseDown: this.startScaling 24562 }, /*#__PURE__*/react_default.a.createElement("div", null)), /*#__PURE__*/react_default.a.createElement("div", { 24563 "data-scaler": "e", 24564 className: [cornerClassName, "e"].join(" "), 24565 style: styles.e, 24566 onMouseDown: this.startScaling 24567 }, /*#__PURE__*/react_default.a.createElement("div", null)), /*#__PURE__*/react_default.a.createElement("div", { 24568 "data-scaler": "sw", 24569 className: [cornerClassName, "sw"].join(" "), 24570 style: styles.sw, 24571 onMouseDown: this.startScaling 24572 }, /*#__PURE__*/react_default.a.createElement("div", null)), /*#__PURE__*/react_default.a.createElement("div", { 24573 "data-scaler": "s", 24574 className: [cornerClassName, "s"].join(" "), 24575 style: styles.s, 24576 onMouseDown: this.startScaling 24577 }, /*#__PURE__*/react_default.a.createElement("div", null)), /*#__PURE__*/react_default.a.createElement("div", { 24578 "data-scaler": "se", 24579 className: [cornerClassName, "se"].join(" "), 24580 style: styles.se, 24581 onMouseDown: this.startScaling 24582 }, /*#__PURE__*/react_default.a.createElement("div", null))); 24583 } 24584} 24585let ClipControl_mapStateToProps = state => { 24586 return { 24587 clip: { 24588 ...state.clip,
24589 clipped: state.app.clipped, 24590 clipping: state.app.clipping, 24591 moving: state.app.moving, 24592 scaling: state.app.scaling, 24593 transforming: state.app.moving || state.app.scaling, 24594 cornerSize: 8 24595 }, 24596 mouse: { 24597 x: state.app.mouseX, 24598 y: state.app.mouseY 24599 }, 24600 annotationMode: state.app.annotation, 24601 showControlCorners: state.clip.showControlCorners 24602 }; 24603}; 24604let ClipControl_mapDispatchToProps = dispatch => { 24605 return { 24606 setClipData: data => dispatch({ 24607 type: 'CLIPCOORDS', 24608 value: data 24609 }), 24610 setClipped: () => dispatch({ 24611 type: 'CLIPPED' 24612 }), 24613 unsetClipped: () => dispatch({ 24614 type: 'NOTCLIPPED' 24615 }), 24616 unsetScaling: () => dispatch({ 24617 type: 'NOTSCALING' 24618 }), 24619 setScaling: cb => { 24620 dispatch({ 24621 type: 'SCALING' 24622 }); 24623 cb(); 24624 }, 24625 showClipControlCorners: () => dispatch({ 24626 type: 'SHOW_CLIP_CONTROL_CORNERS' 24627 }), 24628 hideClipControlCorners: () => dispatch({ 24629 type: 'HIDE_CLIP_CONTROL_CORNERS' 24630 }), 24631 unsetControlledCursorInfo: () => dispatch({ 24632 type: 'FREE_CURSORINFO' 24633 }), 24634 setControlledCursorInfo: data => { 24635 dispatch({ 24636 type: 'CONTROLLED_CURSORINFO', 24637 value: { 24638 controlled: true, 24639 coords: data 24640 } 24641 }); 24642 }, 24643 showCursorInfo: () => dispatch({ 24644 type: 'SHOW_CURSORINFO' 24645 }), 24646 hideCursorInfo: () => dispatch({ 24647 type: 'HIDE_CURSORINFO' 24648 }), 24649 showClipControl: () => dispatch({ 24650 type: 'SHOW_CLIP_CONTROL' 24651 }), 24652 hideClipControl: () => dispatch({ 24653 type: 'HIDE_CLIP_CONTROL' 24654 }), 24655 setToolSelect: tool => { 24656 dispatch({ 24657 type: 'CHANGE_TOOL', 24658 value: 'select' 24659 }); 24660 } 24661 }; 24662}; 24663/* harmony default export */ var components_ClipControl_ClipControl = (Object(es["b" /* connect */])(ClipControl_mapStateToProps, ClipControl_mapDispatchToProps)(ClipControl_ClipControl_ClipControl)); 24664// EXTERNAL MODULE: ./src/editor/components/CursorInfo/CursorInfo.css 24665var CursorInfo_CursorInfo = __webpack_require__("HeBf"); 24666 24667// CONCATENATED MODULE: ./src/editor/components/CursorInfo/CursorInfo.js 24668 24669 24670 24671 24672 24673 24674let globalX = -1; 24675let globalY = -1; 24676const debounce = (func, wait) => { 24677 let timeout; 24678 return function executedFunction(...args) { 24679 const later = () => { 24680 clearTimeout(timeout); 24681 func(...args); 24682 }; 24683 clearTimeout(timeout); 24684 timeout = setTimeout(later, wait); 24685 }; 24686}; 24687function throttle(func, ms) { 24688 let isThrottled = false, 24689 savedArgs, 24690 savedThis; 24691 function wrapper() { 24692 if (isThrottled) { 24693 // (2) 24694 savedArgs = arguments; 24695 savedThis = this; 24696 return; 24697 } 24698 func.apply(this, arguments); // (1) 24699 24700 isThrottled = true; 24701 setTimeout(function () { 24702 isThrottled = false; // (3) 24703 if (savedArgs) { 24704 wrapper.apply(savedThis, savedArgs); 24705 savedArgs = savedThis = null; 24706 } 24707 }, ms); 24708 } 24709 return wrapper; 24710} 24711class CursorInfo_CursorInfo_CursorInfo extends react["Component"] { 24712 constructor(props) { 24713 super(props); 24714 this.util = new util["c" /* default */](); 24715 this.zoom = 8; 24716 this.radius = 32; 24717 this.showCurtainDelay = 500; 24718 this.shotCache = {}; 24719 this.shotProccess = false; 24720 this.ExtensionMessenger = new ExtensionMessenger["a" /* default */](this); 24721 this.doSnapping = this.doSnapping.bind(this); 24722 let x = this.props.coords.x; 24723 let y = this.props.coords.y; 24724 this.state = { 24725 shown: this.props.shown, 24726 visible: this.props.visible, 24727 clipping: this.props.clip.clipping, 24728 clipped: this.props.clip.clipped, 24729 scaling: this.props.clip.scaling, 24730 controlled: false, 24731 controlledCoords: { 24732 x: 0, 24733 y: 0 24734 }, 24735 directed: false, 24736 curtain: "", 24737 showCurtain: false, 24738 x: x, 24739 y: y 24740 }; 24741 this.keyMove = this.keyMove.bind(this); 24742 this.handleMouseMove = this.handleMouseMove.bind(this); 24743 this.doShot = this.doShot.bind(this); 24744 this.handleBrowser_BG__CONTENT__CAPTURE_CURTAIN = this.handleBrowser_BG__CONTENT__CAPTURE_CURTAIN.bind(this); 24745 this.mag = /*#__PURE__*/react_default.a.createRef(); 24746 this.altKey = false;
24747 } 24748 static getDerivedStateFromProps(nextProps, prevState) { 24749 let ret = {}; 24750 if (nextProps.shown !== prevState.shown) ret.shown = nextProps.shown; 24751 if (nextProps.visible !== prevState.visible) ret.visible = nextProps.visible; 24752 if (nextProps.curtain !== prevState.curtain) ret.curtain = nextProps.curtain; 24753 if (nextProps.showCurtain !== prevState.showCurtain) ret.showCurtain = nextProps.showCurtain; 24754 if (nextProps.coords && nextProps.coords.x !== prevState.x) ret.x = nextProps.coords.x; 24755 if (nextProps.coords && nextProps.coords.y !== prevState.y) ret.y = nextProps.coords.y; 24756 if (nextProps.controlled !== prevState.controlled) ret.controlled = nextProps.controlled; 24757 if (nextProps.clip.scaling !== prevState.scaling) ret.scaling = nextProps.clip.scaling; 24758 if (nextProps.clip.clipping !== prevState.clipping) ret.clipping = nextProps.clip.clipping; 24759 if (nextProps.clip.clipped !== prevState.clipped) ret.clipped = nextProps.clip.clipped; 24760 if (nextProps.captureMode !== prevState.captureMode) ret.captureMode = nextProps.captureMode; 24761 if (nextProps.controlledCoords && nextProps.controlledCoords.x !== prevState.controlledCoords.x) ret.controlledCoords = nextProps.controlledCoords; 24762 if (nextProps.controlledCoords && nextProps.controlledCoords.y !== prevState.controlledCoords.y) ret.controlledCoords = nextProps.controlledCoords; 24763 return Object.keys(ret).length > 0 ? ret : null; 24764 } 24765 shouldComponentUpdate(nextProps, nextState) { 24766 let should = nextState.scaling || (nextProps.shown || this.state.shown && !nextProps.shown) && !this.equals(nextState, this.state); 24767 return should; 24768 } 24769 equals(nextState, oldState) { 24770 let ret = nextState.shown === oldState.shown && nextState.visible === oldState.visible && nextState.curtain === oldState.curtain && nextState.showCurtain === oldState.showCurtain && nextState.controlledCoords.x === oldState.controlledCoords.x && nextState.controlledCoords.y === oldState.controlledCoords.y && nextState.controlled === oldState.controlled && nextState.scaling === oldState.scaling && nextState.clipping === oldState.clipping && nextState.clipped === oldState.clipped && nextState.directed === oldState.directed && nextState.x === oldState.x && nextState.y === oldState.y; 24771 return ret; 24772 } 24773 componentDidMount() { 24774 this.throttledDoSnapping = throttle(this.doSnapping, 50); 24775 document.addEventListener("keydown", this.keyMove, false); 24776 document.addEventListener("mousemove", this.handleMouseMove, false); 24777 document.addEventListener("scroll", this.props.doHideCurtain, false); 24778 this.ExtensionMessenger.initBrowserMessaging(); 24779 } 24780 componentWillUnmount() { 24781 document.removeEventListener("keydown", this.keyMove, false); 24782 document.removeEventListener("mousemove", this.handleMouseMove, false); 24783 document.removeEventListener("scroll", this.props.doHideCurtain, false); 24784 this.ExtensionMessenger.stopBrowserMessaging(); 24785 } 24786 keyMove(e) { 24787 let coords = this.state; 24788 let step = 1; 24789 if (e.keyCode === 37) { 24790 // left 24791 coords.x = this.state.x - step; 24792 } else if (40 === e.keyCode) { 24793 // down 24794 coords.y = this.state.y + step; 24795 } else if (38 === e.keyCode) { 24796 // up 24797 coords.y = this.state.y - step; 24798 } else if (39 === e.keyCode) { 24799 // right 24800 coords.x = this.state.x + step; 24801 } 24802 this.props.setCursorInfoCoords({ 24803 x: coords.x, 24804 y: coords.y 24805 }); 24806 } 24807 fireBrowser_CONTENT__BG__CAPTURE_CURTAIN() { 24808 let m = { 24809 action: "CONTENT__BG__CAPTURE_CURTAIN" 24810 }; 24811 document.querySelector("screen-clip").style.display = 'none'; 24812 // debugger; 24813 // make visible if it isn't 24814 setTimeout(() => this.util.extSendMessage(m), 100); 24815 } 24816 handleBrowser_BG__CONTENT__CURTAIN_TOGGLE(req, sender, sendResponse) { 24817 if (!this.props.clip.clipped) { 24818 console.log("showCurtain", this.state.showCurtain); 24819 if (!this.state.showCurtain) { 24820 this.doShot(); 24821 this.props.doShowCurtain(); 24822 } else { 24823 this.props.doHideCurtain(); 24824 this.shotProccess = false; 24825 } 24826 } 24827 } 24828 handleBrowser_BG__CONTENT__CAPTURE_CURTAIN(req, sender, sendResponse) { 24829 // document.querySelector("#__scim-root__").shadowRoot.querySelector(".CursorInfo").style.visibility = 'visible'; 24830 document.querySelector("screen-clip").style.display = 'block'; 24831 this.props.setCurtain(req.image); 24832 this.shotProccess = false;
24833 } 24834 recordMouseDistance(coords) { 24835 let x = typeof this.state.x === 'undefined' ? coords.x : this.state.x; 24836 let y = typeof this.state.y === 'undefined' ? coords.y : this.state.y; 24837 let cx = coords.x; 24838 let cy = coords.y; 24839 let dx = Math.abs(cx - x); 24840 let dy = Math.abs(cy - y); 24841 this.mouseDistance += Math.sqrt(dx * dx + dy * dy); // Mr.Pythagoras 24842 } 24843 24844 // shot the screen 24845 doShot() { 24846 if (!this.props.clip.clipping && !this.props.clip.clipped && this.props.captureMode) { 24847 this.props.setCurtain(""); 24848 this.fireBrowser_CONTENT__BG__CAPTURE_CURTAIN(); 24849 } 24850 } 24851 handleMouseMove(e) { 24852 this.recordMouseDistance({ 24853 x: e.pageX, 24854 y: e.pageY 24855 }); 24856 if (!this.state.clipped) { 24857 globalX = e.clientX; 24858 globalY = e.clientY; 24859 this.throttledDoSnapping(); 24860 } 24861 } 24862 24863 // doSnapping(e) { 24864 doSnapping() { 24865 // const coords = this.getSnappedElementCoords(e.pageX, e.pageY) 24866 const coords = this.getSnappedElementCoords(globalX, globalY); 24867 this.props.setSnappedElementCoords(coords); 24868 } 24869 getSnappedElementCoords(x, y) { 24870 let elements = document.elementsFromPoint(x, y); 24871 let isVisibleAndHuge = el => { 24872 let rect = el.getBoundingClientRect(); 24873 return !!(rect.width || rect.height) && el.tagName.toLowerCase() !== "screen-clip" && el.tagName.toLowerCase() !== "screen-clip-embed" && rect.width > 20 && rect.height > 20; 24874 }; 24875 elements = elements.filter(isVisibleAndHuge); 24876 return elements.length > 0 ? elements[0].getBoundingClientRect() : { 24877 left: 0, 24878 top: 0, 24879 width: 0, 24880 height: 0 24881 }; 24882 } 24883 handleMouseUp(e) { 24884 // this.setState({ 24885 // directed: false 24886 // }); 24887 } 24888 getDirection() { 24889 let x = this.state.x; 24890 let y = this.state.y; 24891 let centerX = this.props.clip.x + this.props.clip.w / 2; 24892 let centerY = this.props.clip.y + this.props.clip.h / 2; 24893 let direction = ""; 24894 if (x < centerX && y <= centerY) direction = "nw";else if (x < centerX && y > centerY) direction = "sw";else if (x >= centerX && y <= centerY) direction = "ne";else if (x >= centerX && y > centerY) direction = "se"; 24895 return direction; 24896 } 24897 isInnerCoords(direction) {
24898 let clip = this.props.clip; 24899 let coordsWidth = 40; 24900 let coordsHeight = 30; 24901 let coordsMargin = 10; 24902 let dWidth = coordsWidth + 2 * coordsMargin; 24903 let dHeight = coordsHeight + 2 * coordsMargin; 24904 let borders = this.props.getBorders(); 24905 if (direction === 'nw' && (clip.x < dWidth || clip.y < dHeight) || direction === 'ne' && (borders.right - (clip.x + clip.w) < dWidth || clip.y < dHeight) || direction === 'se' && (borders.right - (clip.x + clip.w) < dWidth || borders.bottom - (clip.y + clip.h) < dHeight) || direction === 'sw' && (clip.x < dWidth || borders.bottom - (clip.y + clip.h) < dHeight)) { 24906 return true; 24907 } 24908 } 24909 render() { 24910 let direction = this.getDirection(); 24911 let className = ["CursorInfo"]; 24912 let showCurtain = !this.state.clipped && this.state.curtain && this.state.showCurtain && this.state.curtain.length !== 0; 24913 if (this.state.clipping) className.push("clipping"); 24914 if (this.state.clipped) className.push("clipped"); 24915 if (this.state.scaling) className.push("scaling"); 24916 if (!this.state.shown) className.push("hidden"); 24917 if (!this.state.visible) className.push("invisible"); 24918 if (this.state.x < 0 || this.state.y < 0) className.push("invisible"); 24919 if (showCurtain) className.push("curtain"); 24920 let borders = this.props.getBorders(); 24921 let n = 84; 24922 if (this.state.x < borders.left + n) className.push("lefty"); 24923 if (this.state.x > borders.right - n) className.push("righty"); 24924 if (this.state.y < borders.top + n) className.push("topty"); 24925 if (this.state.y > borders.bottom - n) className.push("bottomy"); 24926 let coords = this.props.controlled ? this.props.controlledCoords : this.state; 24927 let position = ""; 24928 let correction = { 24929 x: 0, 24930 y: 0 24931 }; 24932 let crossing = {}; 24933 let styleTag = ""; 24934 let htmlStyles = {}; 24935 let curtainStyles = {}; 24936 let curtainImage = {}; 24937 let curtainTag = ""; 24938 let crossingInfoMargin = 8; 24939 if (this.state.shown) { 24940 // cursor info position 24941 position = [this.props.clip.clipped ? this.props.clip.w : this.state.x, this.props.clip.clipped ? this.props.clip.h : this.state.y].join("\n"); 24942 24943 // correction 24944 if (direction === 'nw') correction = { 24945 x: -2, 24946 y: -2 24947 };else if (direction === 'ne') correction = { 24948 x: 0, 24949 y: -2 24950 };else if (direction === 'sw') correction = { 24951 x: -2, 24952 y: 0 24953 }; 24954 let dx = 0; 24955 let dy = 0; 24956 if (direction === 'nw') { 24957 dx = 1; 24958 dy = 1; 24959 } else if (direction === 'sw' || direction === 'w') { 24960 dx = 1; 24961 } else if (direction === 'ne' || direction === 'n') { 24962 dy = 1; 24963 } 24964 // crossing styles 24965 crossing = { 24966 top: coords.y + correction.y + dy, 24967 left: coords.x + correction.x + dx 24968 }; 24969 let percentLeft = 100 * coords.x / window.innerWidth; 24970 let percentTop = 100 * coords.y / window.innerHeight; 24971 // styles of pseudos 24972 htmlStyles = { 24973 __html: ['.CursorInfo:before {left: ', crossing.left, 'px} .CursorInfo:after {top: ', crossing.top, 'px}', '.CursorInfo > .crossing:before {top: ', crossing.top + crossingInfoMargin, 'px}', '.CursorInfo:before {background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.92) ', percentTop, '%, rgba(255, 255, 255, 0.21))}', '.CursorInfo:after {background-image: linear-gradient(to right, rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.92) ', percentLeft, '%, rgba(255, 255, 255, 0.21))}'].join("") 24974 }; 24975 styleTag = /*#__PURE__*/react_default.a.createElement("style", { 24976 dangerouslySetInnerHTML: htmlStyles 24977 }); 24978 if (showCurtain) { 24979 curtainStyles = { 24980 top: coords.y + crossingInfoMargin + 'px', 24981 left: coords.x + crossingInfoMargin + 'px' 24982 }; 24983 curtainImage = { 24984 width: window.innerWidth * this.zoom + 'px', 24985 height: window.innerHeight * this.zoom + 'px', 24986 left: -1 * (crossing.left - 3) * this.zoom + 'px', 24987 top: -1 * (crossing.top - 3) * this.zoom + 'px', 24988 backgroundImage: 'url(' + this.state.curtain + ')' 24989 }; 24990 curtainTag = /*#__PURE__*/react_default.a.createElement("div", { 24991 className: "curtain", 24992 style: curtainStyles 24993 }, /*#__PURE__*/react_default.a.createElement("div", { 24994 style: curtainImage 24995 })); 24996 } 24997 } 24998 className = className.join(" "); 24999 return /*#__PURE__*/react_default.a.createElement("div", { 25000 className: className 25001 }, styleTag, /*#__PURE__*/react_default.a.createElement("div", { 25002 className: "crossing", 25003 "data-position": position, 25004 style: { 25005 left: crossing.left 25006 } 25007 }), curtainTag); 25008 } 25009} 25010let CursorInfo_mapStateToProps = state => { 25011 return { 25012 clip: { 25013 ...state.clip,
25014 clipped: state.app.clipped, 25015 clipping: state.app.clipping, 25016 moving: state.app.moving, 25017 scaling: state.app.scaling, 25018 transforming: state.app.moving || state.app.scaling, 25019 cornerSize: 8 25020 }, 25021 captureMode: state.app.captureMode, 25022 showCurtain: state.cursorinfo.showCurtain, 25023 curtain: state.cursorinfo.curtain, 25024 coords: { 25025 x: state.app.mouseX, 25026 y: state.app.mouseY 25027 }, 25028 controlled: state.cursorinfo.controlled, 25029 controlledCoords: state.cursorinfo.controlledCoords, 25030 shown: state.cursorinfo.show, 25031 visible: state.cursorinfo.visible 25032 }; 25033}; 25034let CursorInfo_mapDispatchToProps = dispatch => { 25035 return { 25036 setSnappedElementCoords: data => dispatch({ 25037 type: 'SNAPPED_ELEMENT_COORDS', 25038 value: data 25039 }), 25040 setCursorInfoCoords: coords => dispatch({ 25041 type: 'CURSORINFO_COORDS', 25042 value: { 25043 ...coords 25044 } 25045 }), 25046 setCurtain: image => dispatch({ 25047 type: 'CURTAIN', 25048 value: image 25049 }), 25050 doShowInfo: () => dispatch({ 25051 type: 'SHOW_CURSORINFO' 25052 }), 25053 doHideInfo: () => dispatch({ 25054 type: 'HIDE_CURSORINFO' 25055 }), 25056 doShowCurtain: () => dispatch({ 25057 type: 'SHOW_CURTAIN' 25058 }), 25059 doHideCurtain: () => dispatch({ 25060 type: 'HIDE_CURTAIN' 25061 }) 25062 }; 25063}; 25064/* harmony default export */ var components_CursorInfo_CursorInfo = (Object(es["b" /* connect */])(CursorInfo_mapStateToProps, CursorInfo_mapDispatchToProps)(CursorInfo_CursorInfo_CursorInfo)); 25065// EXTERNAL MODULE: ./src/editor/components/SCIM/SCIM.css 25066var SCIM_SCIM = __webpack_require__("xW3e"); 25067 25068// CONCATENATED MODULE: ./src/editor/components/SCIM/SCIM.js 25069/*global chrome*/ 25070 25071// import reactVT from 'react-vt'; 25072 25073 25074 25075 25076 25077 25078 25079 25080 25081 25082 25083 25084// import Previewer from "../Previewer/Previewer.js"; 25085 25086// const ClipControl = import("../ClipControl/ClipControl.js"); 25087 25088// const CursorInfo = import("../CursorInfo/ 25089 25090 25091 25092 25093class SCIM_SCIM_SCIM extends react["Component"] { 25094 constructor(props) { 25095 super(props); 25096 this.store = this.props.store ? this.props.store : Object(redux["d" /* createStore */])(reducers["a" /* default */], state_initial["a" /* default */]); 25097 // this.store = this.props.store;; 25098 let outerStore = this.store.getState(); 25099 this.state = {
25100 autosnapMode: outerStore.app.autosnapMode, 25101 previewMode: outerStore.app.previewMode, 25102 embedMode: outerStore.app.embedMode, 25103 embedCapturingMode: outerStore.app.embedCapturingMode, 25104 shareDialogOpened: outerStore.app.shareDialogOpened, 25105 captureMode: outerStore.app.captureMode, 25106 imageMode: outerStore.app.imageMode, 25107 scaling: outerStore.app.scaling, 25108 moving: outerStore.app.moving, 25109 clipped: outerStore.app.clipped, 25110 clipping: outerStore.app.clipping, 25111 showClip: outerStore.clip.show, 25112 showClipControl: outerStore.clip.showControl, 25113 ready: outerStore.app.ready, 25114 pointerEvents: outerStore.app.pointerEvents 25115 }; 25116 25117 // redux subsribe 25118 this.store.subscribe(this.updateState.bind(this)); 25119 this.showCursorInfo = this.showCursorInfo.bind(this); 25120 this.hideCursorInfo = this.hideCursorInfo.bind(this); 25121 this.doAutosnap = this.doAutosnap.bind(this); 25122 this.handleMousePosition = this.handleMousePosition.bind(this); 25123 this.update = this.update.bind(this); 25124 this.CanvasComponentRef = /*#__PURE__*/react_default.a.createRef(); 25125 } 25126 shouldComponentUpdate(nextProps, nextState) { 25127 var _this$props$copyAsIma, _nextProps$copyAsImag; 25128 return this.props.saveBeforeDownload != nextProps.saveBeforeDownload || ((_this$props$copyAsIma = this.props.copyAsImage) === null || _this$props$copyAsIma === void 0 ? void 0 : _this$props$copyAsIma.copyAsImage) != ((_nextProps$copyAsImag = nextProps.copyAsImage) === null || _nextProps$copyAsImag === void 0 ? void 0 : _nextProps$copyAsImag.copyAsImage) || !this.equals(nextState, this.state); // equals() is your implementation 25129 } 25130 equals(nextState) { 25131 return this.state.clipped === nextState.clipped && this.state.autosnapMode === nextState.autosnapMode && this.state.shareDialogOpened === nextState.shareDialogOpened && this.state.previewMode === nextState.previewMode && this.state.embedMode === nextState.embedMode && this.state.embedCapturingMode === nextState.embedCapturingMode && this.state.captureMode === nextState.captureMode && this.state.clipping === nextState.clipping && this.state.showClip === nextState.showClip && this.state.showClipControl === nextState.showClipControl && this.state.ready === nextState.ready && this.state.scaling === nextState.scaling && this.state.moving === nextState.moving && this.state.pointerEvents === nextState.pointerEvents; 25132 } 25133 updateState() { 25134 let outerStore = this.store.getState(); 25135 let state = {
25136 autosnapMode: outerStore.app.autosnapMode, 25137 pointerEvents: outerStore.app.pointerEvents, 25138 previewMode: outerStore.app.previewMode, 25139 embedMode: outerStore.app.embedMode, 25140 embedCapturingMode: outerStore.app.embedCapturingMode, 25141 captureMode: outerStore.app.captureMode, 25142 imageMode: outerStore.app.imageMode, 25143 shareDialogOpened: outerStore.app.shareDialogOpened, 25144 scaling: outerStore.app.scaling, 25145 moving: outerStore.app.moving, 25146 clipped: outerStore.app.clipped, 25147 clipping: outerStore.app.clipping, 25148 showClip: outerStore.clip.show, 25149 showClipControl: outerStore.clip.showControl, 25150 ready: outerStore.app.ready 25151 }; 25152 this.setState(state); 25153 } 25154 25155 // lifecyrcle hooks 25156 componentDidMount() { 25157 console.log("scim mounted"); 25158 document.addEventListener("mouseenter", this.showCursorInfo); 25159 document.addEventListener("mouseleave", this.hideCursorInfo); 25160 document.addEventListener("mousemove", this.handleMousePosition); 25161 document.addEventListener("touchmove", this.handleMousePosition); 25162 document.addEventListener("mousemove", this.doAutosnap); 25163 25164 // 25165 this.start(); 25166 } 25167 componentWillUnmount() { 25168 console.log("scim unmounted"); 25169 this.willUnmount = true; 25170 document.removeEventListener("mouseenter", this.showCursorInfo); 25171 document.removeEventListener("mouseleave", this.hideCursorInfo); 25172 document.removeEventListener("mousemove", this.handleMousePosition); 25173 document.removeEventListener("touchmove", this.handleMousePosition); 25174 document.removeEventListener("mousemove", this.doAutosnap); 25175 } 25176 start() { 25177 if (this.props.startEditor) this.props.startEditor(this.store); 25178 this.store.dispatch({ 25179 type: 'SCROLL', 25180 value: { 25181 left: window.scrollX, 25182 top: window.scrollY 25183 } 25184 }); 25185 this.store.dispatch({ 25186 type: 'SHOW_CLIP' 25187 }); 25188 this.store.dispatch({ 25189 type: 'READY' 25190 }); 25191 requestAnimationFrame(this.update); 25192 } 25193 update() { 25194 let mouse = this.mouse ? this.mouse : { 25195 x: -100, 25196 y: -100 25197 }; // 25198 let state = this.store.getState().app; 25199 if ((state.mouseX !== mouse.x || state.mouseY !== mouse.y) && (this.state.captureMode || this.state.autosnapMode || this.state.clipped || this.state.embedMode)) { 25200 this.setMouse(mouse); 25201 } 25202 if (!this.willUnmount) requestAnimationFrame(this.update); 25203 } 25204 handleMousePosition(e) { 25205 // let should = this.state.captureMode || this.state.autosnapMode || this.state.clipping || this.state.clipped; 25206 // if (should) { 25207 this.mouse = { 25208 x: e.clientX || (e.touches && e.touches.length > 0 ? e.touches[0].pageX : 0), 25209 y: e.clientY || (e.touches && e.touches.length > 0 ? e.touches[0].pageY : 0) 25210 }; 25211 // } 25212 } 25213 25214 // mouse 25215 setMouse(o) { 25216 let should = this.state.captureMode || this.state.autosnapMode || this.state.clipping || this.state.clipped || this.state.embedMode; 25217 if (should) { 25218 let action = { 25219 type: 'SET_MOUSE', 25220 value: { 25221 x: o.x || -100, 25222 y: o.y || -100 25223 } 25224 }; 25225 this.store.dispatch(action); 25226 } 25227 } 25228 enableAutosnap(s) { 25229 // store.dispatch({ type: "AUTOSNAP" }); 25230 // store.dispatch({ type: "NOTAUTOSNAP" }); 25231 this.store.dispatch({ 25232 type: "CLIPCOORDS", 25233 value: { 25234 x: s.x, 25235 y: s.y, 25236 w: s.w, 25237 h: s.h 25238 } 25239 }); 25240 } 25241 25242 // clip control 25243 showPleaseWait() { 25244 let action = { 25245 type: 'SHOW_PLEASEWAIT' 25246 }; 25247 this.store.dispatch(action); 25248 } 25249 hidePleaseWait() { 25250 let action = { 25251 type: 'HIDE_PLEASEWAIT' 25252 }; 25253 this.store.dispatch(action); 25254 } 25255 25256 // Cursor Info 25257 showCursorInfo(mousePosition) { 25258 let state = this.store.getState().app; 25259 if (state.clipped && !state.scaling || !state.captureMode || state.shareDialogOpened) { 25260 return; 25261 } 25262 let action = { 25263 type: 'SHOW_CURSORINFO' 25264 }; 25265 this.store.dispatch(action); 25266 if (state.mouseX !== mousePosition.x || state.mouseY !== mousePosition.y) { 25267 this.setMouse(mousePosition); 25268 } 25269 } 25270 hideCursorInfo() { 25271 let state = this.store.getState().app; 25272 if (state.clipped && !state.scaling || !state.captureMode) { 25273 return; 25274 } 25275 let action = { 25276 type: 'HIDE_CURSORINFO' 25277 }; 25278 this.store.dispatch(action); 25279 } 25280 getBorders() { 25281 return { 25282 top: 0, 25283 left: 0, 25284 bottom: window.innerHeight, 25285 right: window.innerWidth 25286 }; 25287 }
25288 doBorders(clip) { 25289 var borders = this.getBorders(); 25290 clip = clip || {}; 25291 let outerStore = this.store.getState(); 25292 if (clip.hasOwnProperty("x")) { 25293 if (!clip.hasOwnProperty("w")) clip.w = outerStore.clip.w; 25294 if (clip.x < borders.left) { 25295 if (outerStore.app.moving) { 25296 clip.x = borders.left; 25297 clip.w = outerStore.clip.w; 25298 } else if (outerStore.app.scaling || outerStore.app.clipping || outerStore.app.autosnapMode) { 25299 clip.x = borders.left; 25300 clip.w = outerStore.clip.x + outerStore.clip.w; 25301 } 25302 } 25303 if (clip.x + clip.w > borders.right) { 25304 if (outerStore.app.moving) { 25305 clip.x = Math.abs(borders.right - outerStore.clip.w); 25306 clip.w = outerStore.clip.w; 25307 } else if (outerStore.app.scaling || outerStore.app.clipping || outerStore.app.autosnapMode) { 25308 clip.w = borders.right - clip.x; 25309 } 25310 } 25311 } 25312 if (clip.hasOwnProperty("y")) { 25313 if (!clip.hasOwnProperty("h")) clip.h = outerStore.clip.h; 25314 if (clip.y < borders.top) { 25315 if (outerStore.app.moving) { 25316 clip.y = borders.top; 25317 clip.h = outerStore.clip.h; 25318 }
25318 else if (outerStore.app.scaling || outerStore.app.clipping || outerStore.app.autosnapMode) { 25319 clip.y = borders.top; 25320 clip.h = outerStore.clip.y + outerStore.clip.h; 25321 } 25322 } 25323 if (clip.y + clip.h > borders.bottom) { 25324 if (outerStore.app.moving) { 25325 clip.y = Math.abs(borders.bottom - outerStore.clip.h); 25326 clip.h = outerStore.clip.h; 25327 } else if (outerStore.app.scaling || outerStore.app.clipping || outerStore.app.autosnapMode) { 25328 clip.h = borders.bottom - clip.y; 25329 } 25330 } 25331 } 25332 if (clip.x && clip.x + clip.w > borders.right) clip.x = outerStore.clip.x; 25333 if (clip.y && clip.y + clip.h > borders.bottom) clip.y = outerStore.clip.y; 25334 return clip; 25335 } 25336 doAutosnap(e) {//(clip, pointer) { 25337 // if ( 25338 // !( 25339 // this.state.autosnapMode && 25340 // !this.state.clipped && !this.state.clipping && !this.state.scaling) 25341 // || !this.mouse 25342 // ) return; 25343 // const x = e.clientX; // this.mouse.x; 25344 // const y = e.clientY; // this.mouse.y; 25345 25346 // let elements = document.elementsFromPoint(x, y); 25347 25348 // let isVisibleAndHuge = (el) => { 25349 // let rect = el.getBoundingClientRect(); 25350 // return !!(rect.width || rect.height) 25351 // && el.tagName.toLowerCase() !== "screen-clip" 25352 // && el.tagName.toLowerCase() !== "screen-clip-embed" 25353 // && rect.width > 20 && rect.height > 20; 25354 // }; 25355 25356 // elements = elements.filter(isVisibleAndHuge); 25357 25358 // let c = elements.length > 0 ? elements[0].getBoundingClientRect() : { left: 0, top: 0, width: 0, height: 0 }; 25359 // this.enableAutosnap({ x: c.left, y: c.top, w: c.width, h: c.height }); 25360 } 25361 isClipDone() { 25362 let outerStore = this.store.getState(); 25363 if (outerStore.clip.w > outerStore.clip.minW && outerStore.clip.h > outerStore.clip.minH) return true;else return false; 25364 } 25365 handleShareDialogClose() { 25366 this.store.dispatch({ 25367 type: 'SHARE_DIALOG_OPENED', 25368 value: false 25369 }); 25370 } 25371 render() { 25372 let outerStore = this.store.getState(); 25373 let className = ['SCIM', !this.state.ready ? "loading" : "", this.state.clipping ? "clipping" : "", 25374 // this.state.autosnapMode ? "autosnapMode" : "", 25375 this.state.embedMode ? "embedMode" : "", this.state.embedCapturingMode ? "embedCapturingMode" : "", this.state.captureMode ? "captureMode" : "", this.state.imageMode ? "imageMode" : "", this.state.pointerEvents ? "" : "noPointerEvents", this.state.clipped ? "clipped" : "", this.props.slembedded ? "slembedded" : "", this.state.previewMode ? "preview-mode" : ""].join(" "); 25376 let dialog = ""; 25377 let editor = ""; 25378 let cursorinfo = ""; 25379 let clip = ""; 25380 let clipcontrol = ""; 25381 let canvas = ""; 25382 let underlay = ""; 25383 let embed = ""; 25384 let embedversion = ""; 25385 let shareDialog = ""; 25386 let pleasewait = ""; 25387 if (this.state.ready) { 25388 // embed version start 25389 if (this.state.embedMode || this.state.embedCapturingMode) { 25390 embedversion = /*#__PURE__*/react_default.a.createElement("div", { 25391 className: "embed-version" 25392 }, this.props.version); 25393 } 25394 // embed version end 25395 25396 if (this.state.embedMode) { 25397 if (this.state.previewMode) { 25398 // embed = <Previewer></Previewer>; 25399 embed = /*#__PURE__*/react_default.a.createElement(components_PureEditor_PureEditor, { 25400 saveCallback: this.props.saveCallback, 25401 loadedCallback: this.props.loadedCallback, 25402 saveMarkers: this.props.saveMarkers, 25403 getBorders: this.getBorders.bind(this), 25404 signForm: () => { 25405 this.props.signForm(); 25406 } 25407 }); 25408 } else { 25409 embed = /*#__PURE__*/react_default.a.createElement(components_PureEditor_PureEditor, { 25410 shareSaveCurrentClip: this.props.shareSaveCurrentClip, 25411 copyAsImage: this.props.copyAsImage, 25412 setGetImageDataFn: this.props.setGetImageDataFn, 25413 setAppNotification: this.props.setAppNotification, 25414 saveCallback: this.props.saveCallback, 25415 loadedCallback: this.props.loadedCallback, 25416 saveMarkers: this.props.saveMarkers, 25417 getBorders: this.getBorders.bind(this), 25418 saveBeforeDownload: this.props.saveBeforeDownload 25419 }); 25420 } 25421 } else { 25422 let isInteraction = this.state.scaling || this.state.moving; 25423 underlay = !isInteraction && /*#__PURE__*/react_default.a.createElement(components_Underlay_Underlay, null); 25424 canvas = /*#__PURE__*/react_default.a.createElement(components_Canvas_Canvas, { 25425 escapePressed: this.props.escapePressed, 25426 saveCallback: this.props.saveCallback, 25427 setAppClipped: this.props.setAppClipped, 25428 ref: this.CanvasComponentRef 25429 }); 25430 25431 // clip 25432 if (this.state.showClip) { 25433 clip = /*#__PURE__*/react_default.a.createElement(components_Clip_Clip, { 25434 isClipDone: this.isClipDone.bind(this), 25435 setAppClipped: this.props.setAppClipped, 25436 Canvas: this.CanvasComponentRef, 25437 doBorders: this.doBorders.bind(this) 25438 }); 25439 if (this.state.showClipControl && this.state.clipped) { 25440 clipcontrol = /*#__PURE__*/react_default.a.createElement(components_ClipControl_ClipControl, { 25441 isClipDone: this.isClipDone.bind(this), 25442 setAppClipped: this.props.setAppClipped, 25443 Canvas: this.CanvasComponentRef, 25444 doBorders: this.doBorders.bind(this), 25445 borders: this.getBorders.bind(this) 25446 }); 25447 } 25448 } 25449 25450 // if (!this.state.autosnapMode && this.state.captureMode) { 25451 if (this.state.captureMode) { 25452 // cursor info 25453 cursorinfo = /*#__PURE__*/react_default.a.createElement(components_CursorInfo_CursorInfo, { 25454 getBorders: this.getBorders.bind(this) 25455 }); 25456 } 25457 25458 // editor 25459 if (this.state.clipped) { 25460 editor = /*#__PURE__*/react_default.a.createElement(ClipEditor2["a" /* default */], { 25461 Canvas: this.CanvasComponentRef, 25462 escapePressed: this.props.escapePressed, 25463 doBorders: this.doBorders.bind(this), 25464 getBorders: this.getBorders.bind(this) 25465 }); 25466 } 25467 } 25468 dialog = /*#__PURE__*/react_default.a.createElement(components_Dialog_Dialog, { 25469 stop: this.props.stop, 25470 exitWithoutSavingCallback: this.props.exitWithoutSavingCallback, 25471 Canvas: this.CanvasComponentRef 25472 }); 25473 if (this.state.shareDialogOpened) { 25474 shareDialog = /*#__PURE__*/react_default.a.createElement(Modal["c" /* ModalWindow */], { 25475 show: true, 25476 onClose: this.handleShareDialogClose.bind(this) 25477 }, /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].ShareClipModalContent, {
25478 clipUrl: outerStore.app.shortClipUrl, 25479 title: outerStore.app.clipTitle, 25480 closeModal: this.handleShareDialogClose.bind(this), 25481 setNotification: null 25482 })); 25483 } 25484 pleasewait = this.state.embedMode ? /*#__PURE__*/react_default.a.createElement(components_PleaseWait_PleaseWait, null) : ""; 25485 } 25486 let app = /*#__PURE__*/react_default.a.createElement("div", { 25487 className: className 25488 }, canvas, underlay, clip, clipcontrol, cursorinfo, editor, embed, dialog, embedversion, shareDialog, pleasewait); 25489 return /*#__PURE__*/react_default.a.createElement(es["a" /* Provider */], { 25490 store: this.store 25491 }, app); 25492 } 25493} 25494/* harmony default export */ var components_SCIM_SCIM = (SCIM_SCIM_SCIM); 25495// EXTERNAL MODULE: ./src/editor/mods/embed.version.js 25496var embed_version = __webpack_require__("RzzB"); 25497 25498// EXTERNAL MODULE: ./src/editor/index.css 25499var src_editor = __webpack_require__("DxJ5"); 25500 25501// CONCATENATED MODULE: ./src/editor/website-connector.js 25502 25503 25504// import '../ext/insides/permanent/outside.css'; 25505 25506 25507 25508// import Util from './mods/util.js'; 25509// import Config from './mods/config.js'; 25510 25511 25512function fn() {} 25513class website_connector_Editor extends react["Component"] { 25514 constructor(props) { 25515 super(props); 25516 defineProperty_default()(this, "updateStore", () => { 25517 const state = this.store.getState(); 25518 const command = state.embed.websiteCommand; 25519 const unsavedChanges = state.app.unsavedChanges; 25520 if (this.props.setChangesMade) { 25521 this.props.setChangesMade(unsavedChanges); 25522 } 25523 if (typeof command !== 'undefined' && command !== this.state.websiteCommand) { 25524 console.log("---COMMAND:", command); 25525 switch (command) { 25526 case "toggle-navigation-mode": 25527 if (this.props.toggleNavigationMode) { 25528 // this.props.toggleNavigationMode() 25529 } 25530 break; 25531 case "dashboard-pressed": 25532 this.props.setCurrentFolder(this.props.data.parentFolderId); 25533 this.props.history.push("/dashboard"); 25534 break; 25535 case "change-privacy": 25536 this.props.data.togglePrivacy(); 25537 break; 25538 case "rename": 25539 this.props.setModal('renameClip'); 25540 break; 25541 case "remove": 25542 this.props.setModal('removeClip'); 25543 break; 25544 case "share-dialog": 25545 this.props.setModal('shareClip'); 25546 break; 25547 case "copy-named-link": 25548 this.props.copyNamedUrl(); 25549 break; 25550 default: 25551 break; 25552 } 25553 } 25554 }); 25555 defineProperty_default()(this, "startEditor", store => { 25556 this.store = store; 25557 let embed = { 25558 type: "EMBEDEDITOR", 25559 embedPath: this.props.embedPath, 25560 url: this.props.data.imageUrl, 25561 width: this.props.data.imageWidth, 25562 height: this.props.data.imageHeight, 25563 elementWidth: this.props.data.elementWidth, 25564 elementHeight: this.props.data.elementHeight, 25565 commentsBarShow: function () {} 25566 }; 25567 this.store.dispatch({ 25568 type: "IS_CLIP_PUBLIC", 25569 value: this.props.data.isPublic 25570 }); 25571 this.store.dispatch(embed); 25572 this.store.subscribe(this.updateStore); 25573 let sizesValues = this.props.data.previewMode ? { 25574 left: 0, 25575 top: 0, 25576 width: window.innerWidth, 25577 height: window.innerHeight 25578 } : { 25579 left: 0, 25580 top: 40, 25581 width: window.innerWidth, 25582 height: window.innerHeight - 40 25583 }; 25584 let sizes = { 25585 type: 'SIZES', 25586 value: sizesValues 25587 }; 25588 this.store.dispatch(sizes); 25589 this.store.dispatch({ 25590 type: 'DPXR', 25591 value: this.props.data.dpxr 25592 }); 25593 25594 // store.dispatch({ 25595 // type: 'ZOOM', 25596 // value: z 25597 // }) 25598 25599 let lang = this.props.data.lang || "en-us"; 25600 this.store.dispatch({ 25601 type: 'SET_LANG', 25602 value: lang 25603 }); 25604 this.store.dispatch({ 25605 type: 'OWNER', 25606 value: this.props.data.owner 25607 }); 25608 this.store.dispatch({ 25609 type: 'USERDATA', 25610 value: { 25611 ...this.props.data.userdata 25612 } 25613 }); 25614 this.store.dispatch({ 25615 type: 'USERS', 25616 value: this.props.data.users 25617 }); 25618 this.store.dispatch({ 25619 type: "PREVIEW_MODE", 25620 value: this.props.data.previewMode 25621 }); 25622 if (this.props.data.annotations != '') { 25623 this.store.dispatch({ 25624 type: "SET_ANNOTATIONS", 25625 value: this.props.data.annotations 25626 }); 25627 }
25628 if (this.props.data.isBackgroundSavedBefore) { 25629 this.store.dispatch({ 25630 type: "SET_BACKGROUND_SAVED_BEFORE", 25631 value: true 25632 }); 25633 } 25634 let w = this.props.data.imageWidth; 25635 let h = this.props.data.imageHeight; 25636 25637 // TODO Move sizes to separate function 25638 25639 let markers = this.props.data.markers; 25640 // let markers = this.util.markersPercentsToPosition(this.props.data.markers, w, h); 25641 // markers = this.util.shiftMarkers(markers, w, h, sizesValues, this.props.data.dpxr); 25642 let markersAction = { 25643 type: 'MARKERS', 25644 value: markers || [] 25645 }; 25646 store.dispatch(markersAction); 25647 if (this.props.setSetMarkers) this.props.setSetMarkers(set => this.store.dispatch({ 25648 type: 'MARKERS_SHOW', 25649 value: set 25650 })); 25651 }); 25652 this.util = new util["c" /* default */](); 25653 this.store = null; 25654 this.state = { 25655 websiteCommand: false 25656 }; 25657 } 25658 25659 // static getDerivedStateFromProps(nextProps, prevState) { 25660 // let ret = {}; 25661 // if (nextProps.data && nextProps.data.isPublic !== prevState.data.isPublic) { 25662 // ret.zoom = nextProps.data.isPublic; 25663 25664 // } 25665 // return Object.keys(ret).length > 0 ? ret : null; 25666 // } 25667 25668 componentDidUpdate(prevProps, prevState) { 25669 // console.log(prevProps.data, this.props.data) 25670 25671 // update privacy in editor's store if needed 25672 if (prevProps.data.isPublic !== this.props.data.isPublic) { 25673 this.store.dispatch({ 25674 type: "IS_CLIP_PUBLIC", 25675 value: this.props.data.isPublic 25676 }); 25677 } 25678 // update privacy in editor's store if needed 25679 if (prevProps.data.userdata.uid !== this.props.data.userdata.uid || prevProps.data.userdata.navigationMode !== this.props.data.userdata.navigationMode) { 25680 this.store.dispatch({ 25681 type: "USERDATA", 25682 value: this.props.data.userdata 25683 }); 25684 } 25685 25686 // preview mode 25687 if (prevProps.data.previewMode !== this.props.data.previewMode) { 25688 this.store.dispatch({ 25689 type: "PREVIEW_MODE", 25690 value: this.props.data.previewMode 25691 }); 25692 } 25693 // owner mode 25694 if (prevProps.data.owner !== this.props.data.owner) { 25695 this.store.dispatch({ 25696 type: "OWNER", 25697 value: this.props.data.owner 25698 }); 25699 } 25700 } 25701 componentDidMount() {} 25702 render() { 25703 var _this$props, _this$props$data; 25704 return /*#__PURE__*/react_default.a.createElement(components_SCIM_SCIM, { 25705 shareSaveCurrentClip: this.props.data.shareSaveCurrentClip, 25706 copyAsImage: this.props.copyAsImage, 25707 slembedded: true, 25708 version: embed_version["a" /* default */].version, 25709 stop: fn, 25710 setGetImageDataFn: fn, 25711 exitWithoutSavingCallback: fn, 25712 escapePressed: fn, 25713 signForm: () => { 25714 this.props.signForm(); 25715 }, 25716 saveBeforeDownload: this.props.saveBeforeDownload, 25717 saveMarkers: this.props.data.saveMarkers, 25718 saveCallback: this.props.data.saveCallback, 25719 loadedCallback: function () { 25720 console.log("LOADED"); 25721 }, 25722 setAppClipped: fn, 25723 startEditor: this.startEditor, 25724 setAppNotification: (_this$props = this.props) === null || _this$props === void 0 ? void 0 : (_this$props$data = _this$props.data) === null || _this$props$data === void 0 ? void 0 : _this$props$data.setNotificication 25725 }); 25726 } 25727} 25728// CONCATENATED MODULE: ./src/screens/Previewer/WebIconSVG.js 25729 25730function WebIconSVG() { 25731 return /*#__PURE__*/react_default.a.createElement("svg", { 25732 xmlns: "http://www.w3.org/2000/svg", 25733 width: "26", 25734 height: "26", 25735 viewBox: "0 0 26 26", 25736 style: { 25737 marginRight: "6px" 25738 } 25739 }, /*#__PURE__*/react_default.a.createElement("g", { 25740 fill: "none", 25741 fillRule: "evenodd", 25742 stroke: "none", 25743 strokeWidth: "1" 25744 }, /*#__PURE__*/react_default.a.createElement("path", { 25745 fill: "rgba(0, 0, 0, 0.34)", 25746 d: "M13 3c5.523 0 10 4.477 10 10s-4.477 10-10 10S3 18.523 3 13 7.477 3 13 3zm2.735 13.501h-5.47C10.736 19.449 11.784 21.5 13 21.5s2.264-2.051 2.735-4.999zm-7 0H5.253a8.527 8.527 0 004.87 4.5c-.662-1.14-1.128-2.7-1.386-4.5zm12.013 0h-3.484c-.258 1.8-.724 3.36-1.386 4.499a8.525 8.525 0 004.87-4.499zm-12.132-6L4.874 10.5A8.498 8.498 0 004.5 13c0 .689.082 1.359.237 2h3.837a26.639 26.639 0 01-.074-2l.002-.316c.008-.75.047-1.482.114-2.183zm7.252 0h-5.736A23.27 23.27 0 0010 13l.002.305c.007.582.035 1.149.082 1.695h5.832a23.632 23.632 0 00-.048-4.5zm5.258-.001h-3.742c.077.8.116 1.638.116 2.5 0 .685-.025 1.354-.074 2h3.837a8.522 8.522 0 00.237-2c0-.87-.13-1.71-.374-2.5zM10.122 5l-.037.013a8.529 8.529 0 00-4.587 3.988L8.814 9c.269-1.59.708-2.967 1.308-4zM13 4.5l-.108.005c-1.1.11-2.05 1.901-2.54 4.495h5.296C15.143 6.322 14.146 4.5 13 4.5zm2.879.5l.085.153c.556 1.014.966 2.334 1.222 3.847h3.316a8.528 8.528 0 00-4.623-4z" 25747 }))); 25748} 25749/* harmony default export */ var Previewer_WebIconSVG = (WebIconSVG); 25750// EXTERNAL MODULE: ./src/components/Title/Title.js + 1 modules 25751var Title = __webpack_require__("pHYj"); 25752 25753// EXTERNAL MODULE: ./src/components/BrokenImageView/BrokenImageView.css 25754var BrokenImageView = __webpack_require__("RJox"); 25755var BrokenImageView_default = /*#__PURE__*/__webpack_require__.n(BrokenImageView); 25756 25757// EXTERNAL MODULE: ./src/components/BrokenImage/BrokenImage.js 25758var BrokenImage = __webpack_require__("BdHJ"); 25759 25760// CONCATENATED MODULE: ./src/components/BrokenImageView/BrokenImageView.js 25761 25762 25763 25764 25765function BrokenImageView_BrokenImageView(props) { 25766 return /*#__PURE__*/react_default.a.createElement("div", { 25767 className: BrokenImageView_default.a.page 25768 }, /*#__PURE__*/react_default.a.createElement(components_Navbar_Navbar, null), /*#__PURE__*/react_default.a.createElement("div", { 25769 className: BrokenImageView_default.a.background 25770 }, /*#__PURE__*/react_default.a.createElement(BrokenImage["a" /* default */], { 25771 width: "76px", 25772 height: "96px", 25773 justifySelf: "center" 25774 }), /*#__PURE__*/react_default.a.createElement("div", { 25775 className: BrokenImageView_default.a.message 25776 }, "Sorry, this clip\u2019s image is missing or damaged."))); 25777} 25778// CONCATENATED MODULE: ./src/screens/Previewer/Previewer.js 25779 25780 25781 25782 25783 25784 25785 25786 25787 25788 25789 25790 25791 25792 25793 25794 25795 25796 25797 25798 25799 25800 25801 25802 25803 25804 25805const didYouSavedChangesText = "You have unsaved changes. Are you sure you want to leave?"; 25806let Previewer_delayedToggleNavModeTimeout = false;
25807const demoImgDataUrl = (() => { 25808 let url = sessionStorage.getItem('demoImgDataUrl'); 25809 url = typeof url == 'undefined' || url === null || url === '' ? Object(utils["a" /* blankImageUrl */])() : url; 25810 return url; 25811})(); 25812class Previewer_Previewer_Previewer extends react["Component"] { 25813 constructor(props) { 25814 super(props); 25815 defineProperty_default()(this, "ext", 'png'); 25816 defineProperty_default()(this, "getMenuPositionStyles", () => { 25817 const pos = {}; 25818 if (window.innerWidth < 576) { 25819 const margin = 13; 25820 const height = 479; // menu height 25821 25822 pos['width'] = window.innerWidth - margin * 2; 25823 pos['left'] = margin; 25824 pos['top'] = window.innerHeight - (height + margin); 25825 } 25826 return pos; 25827 }); 25828 defineProperty_default()(this, "getSubMenuPositionStyles", () => { 25829 const pos = {}; 25830 if (window.innerWidth > 576) { 25831 pos['right'] = 255; 25832 pos['top'] = 162; 25833 } else { 25834 const margin = 13; 25835 const height = 155; // sub-menu height 25836 25837 pos['width'] = window.innerWidth - margin * 2; 25838 pos['left'] = margin; 25839 pos['top'] = window.innerHeight - (height + margin); 25840 } 25841 return pos; 25842 }); 25843 defineProperty_default()(this, "hideModal", e => { 25844 this.setState({ 25845 currentModal: false 25846 }); 25847 }); 25848 defineProperty_default()(this, "setModal", modal => { 25849 this.setState({ 25850 currentModal: modal 25851 }); 25852 }); 25853 defineProperty_default()(this, "unloadMessage", () => { 25854 return this.state.changesMade ? didYouSavedChangesText : false; 25855 }); 25856 defineProperty_default()(this, "clickIfMenuOpened", e => { 25857 // TODO: make that check less crazy 25858 if (!e.target.parentElement.parentElement.classList.toString().includes("opened")) { 25859 this.setState({ 25860 menuOpened: false 25861 }); 25862 } 25863 }); 25864 defineProperty_default()(this, "unload", e => { 25865 if (this.state.changesMade) { 25866 if (e) e.preventDefault(); 25867 return window.confirm(didYouSavedChangesText); 25868 } 25869 }); 25870 defineProperty_default()(this, "loadClip", async () => { 25871 let demoImg = demoImgDataUrl || ''; 25872 let src = this.props.demoMode ? demoImg : this.state.imageUrl; 25873 if (!this.props.demoMode) { 25874 document.title = this.state.clip.title + ' â ScreenClip'; 25875 } 25876 this.i = new Image(); 25877 const isCorsNeeded = src.includes('drive.google'); 25878 // || src.includes("googleapis.com/clipular-clips"); 25879 25880 src = src.includes('drive.google') ? src.replace("&export=download", '&export=view') : src; 25881 src = Object(app_utils["d" /* getViewableImageUrl */])(src); 25882 if (isCorsNeeded) this.i.setAttribute("crossOrigin", "anonymous"); 25883 this.i.setAttribute("src", src); 25884 this.i.addEventListener("error", this.loadEditorError); 25885 this.i.addEventListener("load", this.loadEditor); 25886 // this.loadEditor() 25887 }); 25888 defineProperty_default()(this, "loadEditorError", e => { 25889 if (this.props.clip.clipLocatedInClipular) { 25890 // call to refresh link at clipular 25891 try { 25892 this.props.makeClipularClipReadableAgain(); 25893 } catch (e) { 25894 this.setState({ 25895 is403: true 25896 }); 25897 } 25898 } else { 25899 this.setState({ 25900 is403: true 25901 }); 25902 } 25903 }); 25904 defineProperty_default()(this, "loadEditor", e => { 25905 const w = parseFloat(this.props.clip.width || this.i.width); 25906 const h = parseFloat(this.props.clip.height || this.i.height); 25907 this.setState({ 25908 loaded: true, 25909 imageWidth: w, 25910 imageHeight: h, 25911 is403: false 25912 }); 25913 }); 25914 defineProperty_default()(this, "saveDemoAndGoToDashboard", async () => { 25915 let dataUrl = sessionStorage.getItem('demoImgDataUrl'); 25916 const data = {}; 25917 if (dataUrl !== '') { 25918 this.props.setAppLoading(true); 25919 data.title = 'Demo'; 25920 data.image = dataUrl.split(',')[1]; 25921 data.mimeType = 'image/png'; 25922 data.parentFolderId = 'root'; 25923 const res = await app_utils["b" /* createClip */](data); 25924 if (res.error) { 25925 this.props.setAppLoading(false); 25926 this.props.setNotification("Clip wasn't saved. There was an error", true); 25927 console.error(res.error); 25928 return; 25929 } 25930 } 25931 this.props.history.push("/dashboard"); 25932 this.props.setAppLoading(false); 25933 }); 25934 defineProperty_default()(this, "updateTitle", value => { 25935 if (this.props.clip.title !== value) { 25936 if (value.length > 0) { 25937 let data = { 25938 clipId: this.props.clip.clipId, 25939 title: value 25940 }; 25941 const onError = () => this.props.setNotification("Clip title wasn't updated. There was an error", true); 25942 this.updateCurrentClip(data, onError, true); 25943 } 25944 } 25945 this.setState({
25946 renameClicked: false 25947 }); 25948 }); 25949 defineProperty_default()(this, "updateCurrentClip", async (data, onError, silent) => { 25950 data.clipId = this.props.clip.clipId; 25951 if (!silent) this.props.setAppLoading(true); 25952 data.mimeType = this.props.clip.mimeType; 25953 const res = await app_utils["l" /* updateClip */](data); 25954 if (res.error) { 25955 if (!silent) this.props.setAppLoading(false); 25956 if (onError) onError();else if (!silent) this.props.setNotification("Clip wasn't updated. There was an error", true); 25957 console.error(res.error); 25958 return; 25959 } 25960 const clip = { 25961 ...this.props.clip 25962 }; 25963 if (data.title) clip.title = data.title; 25964 if (data.markers) clip.markers = data.markers; 25965 if (data.privacy) clip.privacy = data.privacy; 25966 this.props.setClip({ 25967 ...clip 25968 }); 25969 if (res.data.storageLocation == "firebaseStorage" && this.props.currentUser.cloudConnectProvider == "google.com") { 25970 this.props.setNotification("Seems like you are disconnected from Google Drive. Now, your updates will be stored in ScreenClip Cloud"); 25971 this.props.mergeUser({ 25972 cloudConnectProvider: null, 25973 cloudConnectTokens: null, 25974 cloudConnectFolderId: null 25975 }); 25976 } else { 25977 if (!silent) this.props.setNotification("Clip saved successfully"); 25978 } 25979 if (!silent) this.props.setAppLoading(false); 25980 }); 25981 defineProperty_default()(this, "togglePrivacy", async () => { 25982 await this.updateCurrentClip({ 25983 privacy: this.props.clip.privacy === 'public' ? 'private' : 'public' 25984 }, false, false); 25985 }); 25986 defineProperty_default()(this, "moveToFolder", async (folderId, onError, clips) => { 25987 this.props.setAppLoading(true); 25988 const currentFolder = clips[0].parentFolderId; 25989 const res = await app_utils["f" /* moveToFolder */](currentFolder, folderId, clips); 25990 if (res.error) { 25991 if (onError) onError(); 25992 console.error(e); 25993 this.props.setAppLoading(false); 25994 return; 25995 } 25996 this.props.setClip({ 25997 ...clips[0], 25998 folderId: 'trash' 25999 }); 26000 this.props.setCurrentFolder('trash'); 26001 this.props.history.push("/dashboard"); 26002 this.props.setAppLoading(false); 26003 }); 26004 defineProperty_default()(this, "removeClips", async onError => { 26005 // if clips are not in Trash, then move them there firstly 26006 let clips = [this.props.clip.clipId]; 26007 if (this.props.clip.parentFolderId !== 'trash') { 26008 await this.moveToFolder('trash', onError, clips); 26009 return; 26010 } 26011 this.props.setAppLoading(true); 26012 const res = await app_utils["h" /* removeClips */](clips); 26013 if (res.error) { 26014 if (onError) onError(); 26015 console.error(e); 26016 this.props.setAppLoading(false); 26017 return; 26018 } 26019 this.props.setClip({}); 26020 this.props.history.push("/dashboard"); 26021 this.props.setAppLoading(false); 26022 }); 26023 defineProperty_default()(this, "copyAsImage", () => { 26024 this.setState({ 26025 copyAsImage: true 26026 }); 26027 }); 26028 defineProperty_default()(this, "setCopyAsImageFalse", () => { 26029 this.setState({ 26030 copyAsImage: false 26031 }); 26032 }); 26033 defineProperty_default()(this, "copyNamedUrl", () => { 26034 const clipUrl = this.props.clip.url || this.props.clip.clipId; 26035 navigator.clipboard.writeText(constants["a" /* default */].host + clipUrl + "/" + Object(utils["p" /* slugify */])(this.props.clip.title)); 26036 this.props.setNotification("Named link copied to the clipboard."); 26037 }); 26038 defineProperty_default()(this, "copyShortLink", () => { 26039 const clipUrl = this.props.clip.url || this.props.clip.clipId; 26040 navigator.clipboard.writeText(constants["a" /* default */].host + clipUrl); 26041 this.props.setNotification("Short link copied to the clipboard."); 26042 }); 26043 defineProperty_default()(this, "shareOn", () => { 26044 this.setState({ 26045 currentModal: "shareClip" 26046 }); 26047 }); 26048 defineProperty_default()(this, "saveAndGoTo", async url => { 26049 if (this.sharedSaveCurrentClip) { 26050 await this.sharedSaveCurrentClip(false); 26051 } 26052 this.props.history.push(url); 26053 }); 26054 defineProperty_default()(this, "goBack", async () => { 26055 let url = '/'; 26056 if (!this.props.demoMode) { 26057 this.props.setCurrentFolder(this.props.clip.parentFolderId === 'root' ? false : this.props.clip.parentFolderId); 26058 let folderId = this.props.clip.parentFolderId !== 'root' ? '/' + this.props.clip.parentFolderId : ''; 26059 // let x = this.props.history.goBack(); 26060 url = "/dashboard" + folderId; 26061 } 26062 await this.saveAndGoTo(url); 26063 }); 26064 defineProperty_default()(this, "setSetMarkers", fn => { 26065 this.editorMethods.setMarkers = fn; 26066 }); 26067 defineProperty_default()(this, "callSetMarkers", () => { 26068 if (this.editorMethods.setMarkers) this.editorMethods.setMarkers(!this.state.markersShow); 26069 this.setState({ 26070 markersShow: !this.state.markersShow 26071 }); 26072 }); 26073 defineProperty_default()(this, "toggleMenuOpened", e => { 26074 if (e.target.id === "download-as" && window.innerWidth > 576) return; 26075 this.setState({ 26076 menuOpened: !this.state.menuOpened 26077 }); 26078 }); 26079 defineProperty_default()(this, "toggleNavMode", async data => { 26080 await app_utils["m" /* updateNavMode */](data); 26081 this.props.setNavMode(data.navigationMode); 26082 }); 26083 defineProperty_default()(this, "delayedToggleNavigationMode", () => { 26084 clearTimeout(Previewer_delayedToggleNavModeTimeout); 26085 const data = { 26086 userId: this.props.currentUser.userId, 26087 navigationMode: this.props.currentUser.navigationMode === 'novice' ? 'default' : 'novice' 26088 }; 26089 Previewer_delayedToggleNavModeTimeout = setTimeout(() => this.toggleNavMode(data), 1000); 26090 }); 26091 defineProperty_default()(this, "setChangesMade", c => { 26092 if (c && !this.props.previewMode) window.onbeforeunload = this.unloadMessage;else window.onbeforeunload = null; 26093 this.setState({ 26094 changesMade: c 26095 }); 26096 }); 26097 this.editorMethods = {}; 26098 this.state = { 26099 is403: false, 26100 loaded: false, 26101 markersShow: true, 26102 clip: props.clip, 26103 imageUrl: props.clip.backgroundUrl || props.clip.downloadUrl, 26104 imageWidth: 0, 26105 imageHeight: 0, 26106 elementWidth: window.innerWidth, 26107 elementHeight: window.innerHeight, 26108 currentModal: false, 26109 menuOpened: false, 26110 pointEventsNone: false, 26111 saveBeforeDownload: false, 26112 loggedOut: false, 26113 copyAsImage: false,
26114 renameClicked: false, 26115 isOwnedByPlus: true, 26116 subMenuOpen: false 26117 }; 26118 } 26119 static getDerivedStateFromProps(nextProps, prevState) { 26120 let ret = {}; 26121 if (nextProps.clip.clipId != prevState.clip.clipId) { 26122 if (nextProps.clip.clipId === 'blank') { 26123 ret.clip = Object(utils["i" /* getBlankClip */])(window._userId); 26124 ret.imageUrl = ret.clip.backgroundUrl || ret.clip.downloadUrl; 26125 } else { 26126 ret.clip = nextProps.clip; 26127 ret.imageUrl = nextProps.clip.backgroundUrl || nextProps.clip.downloadUrl; 26128 } 26129 } 26130 return Object.keys(ret).length > 0 ? ret : null; 26131 } 26132 async componentDidMount() { 26133 // if (!!this.props.userId) { 26134 if (Object.keys(this.state.clip).length === 0) { 26135 await this.props.getClip(this.props.match.params.clipUrl); 26136 } else if (!this.state.clip._error) { 26137 this.loadClip(); 26138 } 26139 fetchIsPlus(this.state.clip.ownedBy).then(isPlus => { 26140 this.setState({ 26141 isOwnedByPlus: isPlus 26142 }); 26143 }); 26144 // } 26145 this.unblockHistory = this.props.history.block(async () => { 26146 // return this.unload(); // - commented because we need to disable this message on back button 26147 // but we need to call save the clip so 26148 return false; 26149 }); 26150 document.body.classList.add("overscroll-disabled"); 26151 document.body.classList.add("hotjar-hidden"); 26152 document.addEventListener("click", this.clickIfMenuOpened, true); 26153 } 26154 componentWillUnmount() { 26155 document.body.classList.remove("overscroll-disabled"); 26156 document.body.classList.remove("hotjar-hidden"); 26157 this.props.setClip({}); 26158 window.onbeforeunload = null; 26159 if (this.unblockHistory) this.unblockHistory(); 26160 document.removeEventListener("click", this.clickIfMenuOpened, true); 26161 } 26162 componentDidUpdate(prevProps) { 26163 if (prevProps.userId && !this.props.userId && this.props.clip.privacy !== 'public') { 26164 this.cleanup(); 26165 } 26166 if ((!prevProps.clip || !prevProps.clip.clipId) && this.props.clip && this.props.clip.clipId) { 26167 this.loadClip(); 26168 } 26169 if (prevProps.currentUser && this.props.currentUser == null) { 26170 //if user logged out 26171 this.setState({ 26172 loggedOut: true 26173 }); 26174 } 26175 } 26176 cleanup() { 26177 this.props.setClip({}); 26178 } 26179 async updateMarkers(markers) { 26180 await this.updateCurrentClip({ 26181 markers: markers 26182 }, false, true); 26183 } 26184 getModalContent(modal) { 26185 switch (modal) { 26186 case false: 26187 return null; 26188 case 'removeClip': 26189 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].RemoveClipsModalContent, { 26190 removeClips: this.removeClips, 26191 closeModal: this.hideModal, 26192 setNotification: this.props.setNotification, 26193 currentFolder: this.props.currentFolder 26194 }); 26195 case 'renameClip': 26196 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].RenameClipModalContent, { 26197 actionClipId: this.props.clip.clipId, 26198 oldClipTitle: this.props.clip.title, 26199 renameClip: this.updateCurrentClip, 26200 closeModal: this.hideModal, 26201 setNotification: this.props.setNotification 26202 }); 26203 case 'shareClip': 26204 return /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].ShareClipModalContent, { 26205 clipUrl: this.props.clip.url || this.props.clip.clipId, 26206 title: this.props.clip.title, 26207 closeModal: this.hideModal, 26208 setNotification: this.props.setNotification 26209 }); 26210 case 'signForm': 26211 return /*#__PURE__*/react_default.a.createElement(SignForm["a" /* default */], { 26212 whenSigned: this.saveDemoAndGoToDashboard 26213 }); 26214 case 'signFormFromMarkers': 26215 return /*#__PURE__*/react_default.a.createElement(SignForm["a" /* default */], { 26216 whenSigned: this.hideModal 26217 }); 26218 default: 26219 alert("there is no such modal " + modal); 26220 return null; 26221 } 26222 } 26223 isOpen(bool) { 26224 this.setState({ 26225 pointEventsNone: bool 26226 }); 26227 } 26228 downloadClip(ext) { 26229 this.ext = ext; 26230 this.setState({ 26231 saveBeforeDownload: true, 26232 subMenuOpen: false 26233 }); 26234 } 26235 visitSource() { 26236 window.open(this.props.clip.pageUrl, "_blank"); 26237 } 26238 render() { 26239 var _this$props$clip$mime; 26240 const currentUser = this.props.currentUser; 26241 const originalExt = (_this$props$clip$mime = this.props.clip.mimeType) === null || _this$props$clip$mime === void 0 ? void 0 : _this$props$clip$mime.split('/').pop(); 26242 const is404 = this.props.clip._error === '404' || this.state.loggedOut && this.props.clip.clipId === undefined; 26243 if (is404) return /*#__PURE__*/react_default.a.createElement(ErrorView_ErrorView, { 26244 mode: "404", 26245 currentUser: currentUser, 26246 history: this.props.history 26247 }); 26248 const is403 = this.state.is403; 26249 if (is403) return /*#__PURE__*/react_default.a.createElement(ErrorView_ErrorView, { 26250 mode: "403", 26251 currentUser: currentUser, 26252 history: this.props.history 26253 }); 26254 const isAccessDenied = this.props.clip._error === 'access-denied'; 26255 if (isAccessDenied) return /*#__PURE__*/react_default.a.createElement(ErrorView_ErrorView, { 26256 mode: "access-denied", 26257 history: this.props.history 26258 }); 26259 const isBrokenImage = Object.keys(this.props.clip).length !== 0 && !(this.props.clip.previewUrl || this.props.clip.downloadUrl); 26260 if (isBrokenImage) return /*#__PURE__*/react_default.a.createElement(BrokenImageView_BrokenImageView, null); 26261 const currentModalContent = this.getModalContent(this.state.currentModal); 26262 const isPreviewMode = this.props.previewMode; 26263 const navigationMode = this.props.currentUser && this.props.currentUser.navigationMode === 'novice' ? 'novice' : 'default'; 26264 const editorOptions = {
26265 isBackgroundSavedBefore: !!this.props.clip.backgroundUrl, 26266 imageUrl: this.props.demoMode ? demoImgDataUrl : this.state.imageUrl, 26267 annotations: this.props.clip.annotations || '', 26268 elementWidth: this.state.elementWidth, 26269 elementHeight: this.state.elementHeight, 26270 imageHeight: this.state.imageHeight, 26271 imageWidth: this.state.imageWidth, 26272 owner: this.props.demoMode ? true : this.props.userId === this.props.clip.ownedBy, 26273 parentFolderId: this.props.clip.parentFolderId, 26274 isPublic: this.props.clip.privacy !== 'private', 26275 previewMode: isPreviewMode, 26276 dpxr: this.props.clip.dpxr || window.devicePixelRatio, 26277 markers: this.props.clip.markers, 26278 users: this.props.clip.users, 26279 userdata: this.props.currentUser ? { 26280 uid: this.props.userId, 26281 userphoto: this.props.currentUser.photoUrl, 26282 navigationMode, 26283 username: this.props.currentUser.displayName 26284 } : {}, 26285 navigationMode, 26286 demoMode: this.props.demoMode 26287 }; 26288 const classes = [Previewer_default.a.Editor, isPreviewMode ? Previewer_default.a.Previewer + ' ' + "Previewer" : ''].join(' '); 26289 26290 // let editorTitle = <span className={styles.clipTitleContainer}> 26291 // <span className={styles.clipTitle}>{this.props.clip.title}</span> 26292 // </span> 26293 // if (this.props.clip.pageUrl) { 26294 // editorTitle = <span className={styles.clipTitleContainer} onClick={() => { window.open(this.props.clip.pageUrl, "_blank") }}> 26295 // <div className={styles.clipTitleURL}> 26296 // {/* <WebIconSVG /> */} 26297 // <span className={styles.clipTitle}>{this.props.clip.title}</span> 26298 // </div> 26299 // </span> 26300 // } 26301 const editorHeader = /*#__PURE__*/react_default.a.createElement("div", { 26302 className: [Previewer_default.a.navbar].join(' ') 26303 }, /*#__PURE__*/react_default.a.createElement("div", { 26304 className: Previewer_default.a.goToDashboard, 26305 onClick: this.goBack 26306 }, /*#__PURE__*/react_default.a.createElement("svg", { 26307 width: "26", 26308 height: "26", 26309 viewBox: "0 0 26 26" 26310 }, /*#__PURE__*/react_default.a.createElement("path", { 26311 fillRule: "evenodd", 26312 d: "M8.424 6.52a.75.75 0 0 1 1.152.96l-3.975 4.77H22a.75.75 0 0 1 .743.648l.007.102a.75.75 0 0 1-.75.75H5.6l3.976 4.77a.75.75 0 0 1-.016.979l-.08.077a.75.75 0 0 1-1.056-.096L3.024 13z" 26313 }
26313))), /*#__PURE__*/react_default.a.createElement(Title["a" /* default */], { 26314 isClipTitle: true, 26315 link: this.props.clip.pageUrl, 26316 title: this.props.clip.title, 26317 updateTitle: this.updateTitle, 26318 renameClicked: this.state.renameClicked 26319 }), !this.props.demoMode && /*#__PURE__*/react_default.a.createElement("div", { 26320 className: [Previewer_default.a.topMenu, this.state.menuOpened ? Previewer_default.a.opened : ''].join(' '), 26321 onClick: this.toggleMenuOpened 26322 }, /*#__PURE__*/react_default.a.createElement("div", { 26323 style: this.getMenuPositionStyles() 26324 }, /*#__PURE__*/react_default.a.createElement("div", { 26325 className: [Previewer_default.a.menuItem, Previewer_default.a.menuItemCopyUrl].join(' '), 26326 onClick: () => this.copyShortLink() 26327 }, "Copy Short Link"), /*#__PURE__*/react_default.a.createElement("div", { 26328 className: [Previewer_default.a.menuItem, Previewer_default.a.menuItemCopyUrl].join(' '), 26329 onClick: () => this.copyNamedUrl() 26330 }, "Copy Named Link"), /*#__PURE__*/react_default.a.createElement("div", { 26331 className: [Previewer_default.a.menuItem, Previewer_default.a.menuItemCopyImage].join(' '), 26332 onClick: () => this.copyAsImage() 26333 }, "Copy as Image"), /*#__PURE__*/react_default.a.createElement("div", { 26334 className: [Previewer_default.a.menuItem, Previewer_default.a.menuItemShareClip].join(' '), 26335 onClick: () => this.shareOn() 26336 }, "Share on..."), /*#__PURE__*/react_default.a.createElement("div", { 26337 id: "download-as", 26338 className: [Previewer_default.a.menuItem, Previewer_default.a.menuItemDownload, this.props.saveBeforeDownload ? Previewer_default.a.disable : ""].join(' '), 26339 onClick: () => window.innerWidth < 576 ? this.setState({ 26340 subMenuOpen: true 26341 }) : null, 26342 onMouseEnter: () => this.setState({ 26343 subMenuOpen: true 26344 }), 26345 onMouseLeave: () => this.setState({ 26346 subMenuOpen: false 26347 }) 26348 }, "Download as"), /*#__PURE__*/react_default.a.createElement("div", { 26349 className: Previewer_default.a.separator 26350 }), /*#__PURE__*/react_default.a.createElement("div", { 26351 className: [Previewer_default.a.menuItem, Previewer_default.a.menuItemRename].join(' '), 26352 onClick: () => this.setState({ 26353 renameClicked: true 26354 }) 26355 }, "Rename"), /*#__PURE__*/react_default.a.createElement("div", { 26356 className: [Previewer_default.a.menuItem, Previewer_default.a.menuItemHideMarkers].join(' '), 26357 onClick: this.callSetMarkers 26358 }, this.state.markersShow ? 'Hide' : 'Show', " markers"), /*#__PURE__*/react_default.a.createElement("div", { 26359 className: [Previewer_default.a.menuItem, Previewer_default.a.menuItemSetPrivacy, this.props.clip.privacy === 'private' ? Previewer_default.a.public : Previewer_default.a.private].join(' '), 26360 onClick: this.togglePrivacy 26361 }, "Set to ", this.props.clip.privacy === 'private' ? 'Public' : 'Private'), /*#__PURE__*/react_default.a.createElement("div", { 26362 className: [Previewer_default.a.menuItem, Previewer_default.a.menuItemVisitSource, this.props.clip.pageUrl ? "" : Previewer_default.a.disable].join(' '), 26363 onClick: () => this.visitSource() 26364 }, "Visit Webpage \u203A"), /*#__PURE__*/react_default.a.createElement("div", { 26365 className: Previewer_default.a.separator 26366 }), /*#__PURE__*/react_default.a.createElement("div", { 26367 className: [Previewer_default.a.menuItem, Previewer_default.a.menuItemDelete].join(' '), 26368 onClick: () => this.setModal('removeClip') 26369 }, "Send to Trash"))), this.state.subMenuOpen && /*#__PURE__*/react_default.a.createElement("div", { 26370 className: Previewer_default.a.subMenu, 26371 style: this.getSubMenuPositionStyles(), 26372 onMouseEnter: () => this.setState({ 26373 subMenuOpen: true 26374 }), 26375 onMouseLeave: () => this.setState({ 26376 subMenuOpen: false 26377 }) 26378 }, /*#__PURE__*/react_default.a.createElement("div", { 26379 className: [Previewer_default.a.menuItem, Previewer_default.a.png].join(' '), 26380 onClick: () => this.downloadClip('png') 26381 }, "PNG", originalExt == 'png' ? ' (Original)' : ''), /*#__PURE__*/react_default.a.createElement("div", { 26382 className: [Previewer_default.a.menuItem, Previewer_default.a.jpeg].join(' '), 26383 onClick: () => this.downloadClip('jpg') 26384 }, "JPEG", originalExt == 'jpeg' || originalExt == 'jpg' ? ' (Original)' : ''), /*#__PURE__*/react_default.a.createElement("div", { 26385 className: [Previewer_default.a.menuItem, Previewer_default.a.pdf].join(' '), 26386 onClick: () => this.downloadClip('pdf') 26387 }, "PDF")), this.props.demoMode && /*#__PURE__*/react_default.a.createElement("div", null)); 26388 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 26389 className: [classes, this.state.pointEventsNone ? Previewer_default.a.pointEventsNone : '', this.state.isOwnedByPlus ? Previewer_default.a.hiddenForClipsOwnedByPlus : ''].join(' ') 26390 }, /*#__PURE__*/react_default.a.createElement("div", { 26391 className: [Previewer_default.a.viewer, this.state.menuOpened ? 'menuOpened' : ''].join(' '), 26392 id: "viewer-clip" 26393 }, !this.state.loaded ? /*#__PURE__*/react_default.a.createElement(Loader["a" /* default */], null) : /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, !isPreviewMode ? editorHeader : /*#__PURE__*/react_default.a.createElement(components_Navbar_Navbar, { 26394 isOpen: bool => { 26395 this.isOpen(bool); 26396 } 26397 }), /*#__PURE__*/react_default.a.createElement(website_connector_Editor, { 26398 toggleNavigationMode: this.delayedToggleNavigationMode, 26399 copyAsImage: { 26400 copyAsImage: this.state.copyAsImage, 26401 setCopyAsImageFalse: this.setCopyAsImageFalse 26402 }, 26403 saveBeforeDownload: this.state.saveBeforeDownload, 26404 signForm: () => { 26405 this.setModal('signFormFromMarkers'); 26406 }, 26407 setChangesMade: this.setChangesMade, 26408 history: this.props.history, 26409 setModal: this.setModal, 26410 editorInnerFunctions: this.editorInnerFunctions, 26411 copyNamedUrl: this.copyNamedUrl, 26412 setCurrentFolder: this.props.setCurrentFolder, 26413 embedPath: true, 26414 setSetMarkers: this.setSetMarkers, 26415 data: { 26416 ...editorOptions, 26417 shareSaveCurrentClip: f => { 26418 this.sharedSaveCurrentClip = f; 26419 }, 26420 executeCommand: command => { 26421 debugger; 26422 }, 26423 setNotificication: text => { 26424 this.props.setNotification(text); 26425 }, 26426 saveCallback: async clipUpdates => { 26427 if (this.props.demoMode) { 26428 if (clipUpdates.markers) { 26429 sessionStorage.setItem('demoImgDataMarkers', clipUpdates.markers); 26430 } 26431 sessionStorage.setItem('demoImgDataUrl', clipUpdates.clipData); 26432 if (this.props.currentUser) this.saveDemoAndGoToDashboard();else this.setModal('signForm'); 26433 return; 26434 } 26435 let fields = {}; 26436 if (clipUpdates.title) { 26437 fields.title = clipUpdates.title; 26438 window._clip.title = fields.title; 26439 } 26440 if (clipUpdates.privacy) { 26441 fields.privacy = clipUpdates.privacy; 26442 window._clip.privacy = fields.privacy; 26443 } 26444 if (clipUpdates.annotations) { 26445 fields.annotations = JSON.stringify({ 26446 objects: clipUpdates.annotations.objects, 26447 version: clipUpdates.annotations.version 26448 }); 26449 window._clip.annotations = fields.annotations; 26450 } 26451 if (clipUpdates.markers) { 26452 fields.markers = clipUpdates.markers; 26453 window._clip.markers = fields.markers; 26454 } 26455 if (clipUpdates.clipData) fields.image = clipUpdates.clipData.split(',')[1]; 26456 if (clipUpdates.background) fields.background = clipUpdates.background.split(',')[1]; 26457 // if (clipUpdates.mimeType) fields.mimeType = clipUpdates.mimeType; 26458 await this.updateCurrentClip(fields); 26459 if (this.state.saveBeforeDownload) { 26460 this.setState({ 26461 saveBeforeDownload: false 26462 }); 26463 Object(utils["b" /* downloadAfterSave */])(clipUpdates.clipData, this.props.clip.title, this.ext); 26464 } 26465 }, 26466 saveMarkers: markers => { 26467 this.updateMarkers(markers); 26468 }, 26469 togglePrivacy: () => { 26470 this.togglePrivacy(); 26471 }, 26472 loadedCallback: coords => { 26473 console.log("coords is a promise which will return the getToolbarsCoords result", coords); 26474 } 26475 } 26476 })))), /*#__PURE__*/react_default.a.createElement(Modal["c" /* ModalWindow */], { 26477 show: this.state.currentModal, 26478 onClose: this.hideModal 26479 }, currentModalContent)); 26480 } 26481} 26482let Previewer_mapStateToProps = (state, ownProps) => { 26483 return { 26484 userId: state.app.userId, 26485 currentUser: state.app.user, 26486 clip: state.clip.current, 26487 currentFolder: state.dashboard.currentFolder, 26488 previewMode: ownProps.demoMode ? false : state.app.userId !== state.clip.current.ownedBy 26489 }; 26490};
26491let Previewer_mapDispatchToProps = dispatch => { 26492 return { 26493 mergeUser: changes => dispatch({ 26494 type: 'MERGE_USER', 26495 value: changes 26496 }), 26497 setAppLoading: v => dispatch({ 26498 type: "SET_APP_LOADING", 26499 value: v 26500 }), 26501 setUserId: userId => dispatch({ 26502 type: "SET_USER_ID", 26503 value: userId 26504 }), 26505 setUser: user => dispatch({ 26506 type: "SET_USER", 26507 value: user 26508 }), 26509 setCurrentFolder: folderId => dispatch({ 26510 type: "SET_CURRENT_FOLDER", 26511 value: folderId 26512 }), 26513 getClip: clipUrl => dispatch(Previewer_actions["b" /* getClip */](clipUrl)), 26514 makeClipularClipReadableAgain: () => dispatch(Previewer_actions["a" /* dispatchMakeClipularClipReadableAgain */]()), 26515 setClip: clip => dispatch({ 26516 type: "SET_CLIP", 26517 value: clip 26518 }), 26519 setNotification: (v, error, timer, uploadingUpdate) => dispatch({ 26520 type: "SET_APP_NOTIFICATION", 26521 value: v, 26522 error: !!error, 26523 timer: !!timer, 26524 uploadingUpdate: uploadingUpdate 26525 }), 26526 setNavMode: mode => dispatch({ 26527 type: "SET_USER_NAVIGATION_MODE", 26528 value: mode 26529 }) 26530 }; 26531}; 26532/* harmony default export */ var screens_Previewer_Previewer = (Object(components_Auth["c" /* withAuth */])(Object(react_router["h" /* withRouter */])(Object(es["b" /* connect */])(Previewer_mapStateToProps, Previewer_mapDispatchToProps, null, { 26533 forwardRef: true 26534})(Previewer_Previewer_Previewer)))); 26535console.log('Previewer'); 26536// EXTERNAL MODULE: ./src/screens/PasswordRecovery/PasswordRecovery.css 26537var PasswordRecovery = __webpack_require__("3P5J"); 26538var PasswordRecovery_default = /*#__PURE__*/__webpack_require__.n(PasswordRecovery); 26539 26540// CONCATENATED MODULE: ./src/screens/PasswordRecovery/PasswordRecovery.js 26541 26542 26543 26544 26545 26546function PasswordRecovery_PasswordRecovery(props) { 26547 let [passwordValid, setPasswordValid] = Object(react["useState"])(''); 26548 let [repeatPasswordValid, setRepeatPasswordValid] = Object(react["useState"])(''); 26549 // let [emailAccount, setEmailAccount] = useState(''); 26550 let [passwordSuccessfullyChanged, setPasswordSuccessfullyChanged] = Object(react["useState"])(false); 26551 let passwordRef = Object(react["useRef"])(null); 26552 let repeatPasswordRef = Object(react["useRef"])(null); 26553 Object(react["useEffect"])(() => { 26554 document.title = 'Password Recovery â ScreenClip'; 26555 // verifyPasswordResetCode(); 26556 }, []); 26557 26558 // async function verifyPasswordResetCode(){ 26559 // let response = {}; 26560 // let params = new URLSearchParams(props.location.search); 26561 // let oobCode = params.get('oobCode') 26562 // response = await props.Auth.verifyPasswordResetCode(oobCode); 26563 // if(response.success){ 26564 // setEmailAccount(response.email); 26565 // } 26566 // else /*if(response.code == "auth/expired-action-code" || response.code == "auth/invalid-action-code")*/{ 26567 // props.history.push({ 26568 // pathname: '/', 26569 // state: { linkExpired: true } 26570 // }); 26571 // } 26572 // } 26573 26574 function changed() { 26575 if (passwordRef.current.value.length >= 6) { 26576 setPasswordValid(true); 26577 } else { 26578 setPasswordValid(false); 26579 } 26580 if (repeatPasswordRef.current.value.length > 0) { 26581 checkIfRepeatPasswordIsValid(); 26582 } 26583 } 26584 function checkIfRepeatPasswordIsValid() { 26585 if (repeatPasswordRef.current.value === passwordRef.current.value) { 26586 setRepeatPasswordValid(true); 26587 } else { 26588 setRepeatPasswordValid(false); 26589 } 26590 } 26591 async function handleResetPassword() { 26592 let response; 26593 if (repeatPasswordValid) { 26594 // let params = new URLSearchParams(props.location.search); 26595 // let oobCode = params.get('oobCode') 26596 let pass = repeatPasswordRef.current.value; 26597 response = await props.Auth.resetPassword(props.location.state.oobCode, pass); 26598 setPasswordSuccessfullyChanged(response.success); 26599 if (response.success) { 26600 let result = await props.Auth.signIn(props.location.state.emailAccount.email, pass); 26601 props.history.push('/dashboard'); 26602 } else if (response.code == "auth/expired-action-code") { 26603 props.history.push({ 26604 pathname: '/', 26605 state: { 26606 linkExpired: true 26607 } 26608 }); 26609 } 26610 } 26611 } 26612 return /*#__PURE__*/react_default.a.createElement("div", null, /*#__PURE__*/react_default.a.createElement(Logo_LogoLight, null), /*#__PURE__*/react_default.a.createElement("div", { 26613 className: PasswordRecovery_default.a["set-new-password-title"] 26614 }, "Set a new password"), !passwordSuccessfullyChanged ? /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 26615 className: PasswordRecovery_default.a["set-new-password-sub-title"] 26616 }, "Enter a new password for your ", /*#__PURE__*/react_default.a.createElement("span", { 26617 className: PasswordRecovery_default.a["email-account"] 26618 }, props.location.state.emailAccount.email), " account"), /*#__PURE__*/react_default.a.createElement("div", { 26619 className: PasswordRecovery_default.a["set-new-password-criteria"] 26620 }, "Remember, preferably use:", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("span", null, "\u2022 More than 6 caracters")), /*#__PURE__*/react_default.a.createElement("div", { 26621 className: PasswordRecovery_default.a['password-inputs-contaier'] 26622 }, /*#__PURE__*/react_default.a.createElement("input", { 26623 type: "password", 26624 placeholder: "Type your new password", 26625 className: [PasswordRecovery_default.a["password-input"], passwordValid === true ? PasswordRecovery_default.a["password-success-focus"] : passwordValid === false && PasswordRecovery_default.a["password-error-focus"]].join(' '), 26626 ref: passwordRef, 26627 onChange: changed 26628 26629 // onKeyPress={e => e.key === 'Enter' && this.signUp()} 26630 }), /*#__PURE__*/react_default.a.createElement("input", { 26631 type: "password", 26632 placeholder: "Repeat your new password", 26633 className: [PasswordRecovery_default.a["password-input"], repeatPasswordValid === true ? PasswordRecovery_default.a["password-success-focus"] : repeatPasswordValid === false && PasswordRecovery_default.a["password-error-focus"]].join(' '), 26634 ref: repeatPasswordRef, 26635 onChange: changed 26636 // onKeyPress={e => e.key === 'Enter' && this.signUp()} 26637 }), /*#__PURE__*/react_default.a.createElement("span", { 26638 className: PasswordRecovery_default.a['error-message'] 26639 }, repeatPasswordValid === false ? "Passwords donât match" : ""), /*#__PURE__*/react_default.a.createElement("button", { 26640 onClick: () => { 26641 handleResetPassword(); 26642 }, 26643 className: PasswordRecovery_default.a["change-button"] 26644 }, "Change"))) : /*#__PURE__*/react_default.a.createElement("div", { 26645 className: PasswordRecovery_default.a["set-new-password-sub-title"] 26646 }, "Password succesfully changed!", /*#__PURE__*/react_default.a.createElement("br", null), "Redirecting to dashboard\u2026")); 26647} 26648/* harmony default export */ var screens_PasswordRecovery_PasswordRecovery = (Object(react_router["h" /* withRouter */])(Object(components_Auth["c" /* withAuth */])(PasswordRecovery_PasswordRecovery))); 26649// EXTERNAL MODULE: ./src/screens/PrivacyPolicy/PrivacyPolicy.css 26650var PrivacyPolicy = __webpack_require__("s55N"); 26651var PrivacyPolicy_default = /*#__PURE__*/__webpack_require__.n(PrivacyPolicy); 26652 26653// CONCATENATED MODULE: ./src/screens/PrivacyPolicy/PrivacyPolicy.js 26654 26655 26656 26657 26658function PrivacyPolicy_PrivacyPolicy(props) { 26659 let [pointEventsNone, setPointEventsNone] = Object(react["useState"])(false); 26660 Object(react["useEffect"])(() => { 26661 document.title = 'Privacy Policy â ScreenClip'; 26662 }, []); 26663 function isOpen(bool) { 26664 setPointEventsNone(bool); 26665 } 26666 return /*#__PURE__*/react_default.a.createElement("div", { 26667 className: pointEventsNone ? PrivacyPolicy_default.a.pointEventsNone : '' 26668 }, /*#__PURE__*/react_default.a.createElement(components_Navbar_Navbar, { 26669 isOpen: bool => { 26670 isOpen(bool); 26671 }, 26672 theme: "light" 26673 }), /*#__PURE__*/react_default.a.createElement("main", { 26674 className: PrivacyPolicy_default.a["privacy-container"] 26675 }, /*#__PURE__*/react_default.a.createElement("h1", { 26676 className: PrivacyPolicy_default.a["privacy-title"] 26677 }, "Privacy Policy"), /*#__PURE__*/react_default.a.createElement("h3", { 26678 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26679 }, "Effective date: April 17, 2018"), /*#__PURE__*/react_default.a.createElement("div", { 26680 className: PrivacyPolicy_default.a["privacy-section-content"] 26681 }, "Vitzo Ltd. (\"us\", \"we\", or \"our\") operates the https://screen.link website (the \"Service\").", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "This page informs you of our policies regarding the collection, use, and disclosure of personal data when you use our Service and the choices you have associated with that data.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "We use your data to provide and improve the Service. By using the Service, you agree to the collection and use of information in accordance with this policy. Unless otherwise defined in this Privacy Policy, terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, accessible from ", /*#__PURE__*/react_default.a.createElement("a", { 26682 href: "https://screen.link/terms-and-conditions" 26683 }, "https://screen.link/terms-and-conditions"), "."), /*#__PURE__*/react_default.a.createElement("h2", { 26684 className: PrivacyPolicy_default.a["privacy-section-title"] 26685 }, "Definitions"), /*#__PURE__*/react_default.a.createElement("h3", { 26686 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26687 }, "Personal Data"), /*#__PURE__*/react_default.a.createElement("div", { 26688 className: PrivacyPolicy_default.a["privacy-section-content"] 26689 }, "Personal Data means data about a living individual who can be identified from those data (or from those and other information either in our possession or likely to come into our possession)."), /*#__PURE__*/react_default.a.createElement("h3", { 26690 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26691 }, "Usage Data"), /*#__PURE__*/react_default.a.createElement("div", { 26692 className: PrivacyPolicy_default.a["privacy-section-content"] 26693 }, "Usage Data is data collected automatically either generated by the use of the Service or from the Service infrastru
26693cture itself (for example, the duration of a page visit)."), /*#__PURE__*/react_default.a.createElement("h3", { 26694 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26695 }, "Cookies"), /*#__PURE__*/react_default.a.createElement("div", { 26696 className: PrivacyPolicy_default.a["privacy-section-content"] 26697 }, "Cookies are small pieces of data stored on a User\u2019s device."), /*#__PURE__*/react_default.a.createElement("h3", { 26698 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26699 }, "Data Controller"), /*#__PURE__*/react_default.a.createElement("div", { 26700 className: PrivacyPolicy_default.a["privacy-section-content"] 26701 }, "Data Controller means a person who (either alone or jointly or in common with other persons) determines the purposes for which and the manner in which any personal data are, or are to be, processed.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "For the purpose of this Privacy Policy, we are a Data Controller of your data."), /*#__PURE__*/react_default.a.createElement("h3", { 26702 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26703 }, "Data Processor (or Service Providers)"), /*#__PURE__*/react_default.a.createElement("div", { 26704 className: PrivacyPolicy_default.a["privacy-section-content"] 26705 }, "Data Processor (or Service Provider) means any person (other than an employee of the Data Controller) who processes the data on behalf of the Data Controller.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "We may use the services of various Service Providers in order to process your data more effectively."), /*#__PURE__*/react_default.a.createElement("h3", { 26706 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26707 }, "Data Subject"), /*#__PURE__*/react_default.a.createElement("div", { 26708 className: PrivacyPolicy_default.a["privacy-section-content"] 26709 }, "Data Subject is any living individual who is the subject of Personal Data."), /*#__PURE__*/react_default.a.createElement("h3", { 26710 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26711 }, "User"), /*#__PURE__*/react_default.a.createElement("div", { 26712 className: PrivacyPolicy_default.a["privacy-section-content"] 26713 }, "The User is the individual using our Service. The User corresponds to the Data Subject, who is the subject of Personal Data."), /*#__PURE__*/react_default.a.createElement("h2", { 26714 className: PrivacyPolicy_default.a["privacy-section-title"] 26715 }, "Information Collection And Use"), /*#__PURE__*/react_default.a.createElement("div", { 26716 className: PrivacyPolicy_default.a["privacy-section-content"] 26717 }, "We collect several different types of information for various purposes to provide and improve our Service to you."), /*#__PURE__*/react_default.a.createElement("h2", { 26718 className: PrivacyPolicy_default.a["privacy-section-title"] 26719 }, "Types of Data Collected"), /*#__PURE__*/react_default.a.createElement("h3", { 26720 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26721 }, "Personal Data"), /*#__PURE__*/react_default.a.createElement("div", { 26722 className: PrivacyPolicy_default.a["privacy-section-content"] 26723 }, "While using our Service, we may ask you to provide us with certain personally identifiable information that can be used to contact or identify you (\"Personal Data\"). Personally identifiable information may include, but is not limited to:", /*#__PURE__*/react_default.a.createElement("ul", null, /*#__PURE__*/react_default.a.createElement("li", null, "Email address."), /*#__PURE__*/react_default.a.createElement("li", null, "First name and last name."), /*#__PURE__*/react_default.a.createElement("li", null, "Cookies and Usage Data.")), "We may use your Personal Data to contact you with newsletters, marketing or promotional materials and other information that may be of interest to you. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."), /*#__PURE__*/react_default.a.createElement("h3", { 26724 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26725 }, "Usage Data"), /*#__PURE__*/react_default.a.createElement("div", { 26726 className: PrivacyPolicy_default.a["privacy-section-content"] 26727 }
26727, "We may also collect information how the Service is accessed and used (\"Usage Data\"). This Usage Data may include information such as your computer's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that you visit, the time and date of your visit, the time spent on those pages, unique device identifiers and other diagnostic data."), /*#__PURE__*/react_default.a.createElement("h3", { 26728 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26729 }, "Tracking Cookies Data"), /*#__PURE__*/react_default.a.createElement("div", { 26730 className: PrivacyPolicy_default.a["privacy-section-content"] 26731 }, "We use cookies and similar tracking technologies to track the activity on our Service and hold certain information.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "Cookies are files with small amount of data which may include an anonymous unique identifier. Cookies are sent to your browser from a website and stored on your device. Tracking technologies also used are beacons, tags, and scripts to collect and track information and to improve and analyze our Service.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent. However, if you do not accept cookies, you may not be able to use some portions of our Service.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "Examples of Cookies we use:", /*#__PURE__*/react_default.a.createElement("ul", null, /*#__PURE__*/react_default.a.createElement("li", null, /*#__PURE__*/react_default.a.createElement("b", null, "Session Cookies"), ". We use Session Cookies to operate our Service."), /*#__PURE__*/react_default.a.createElement("li", null, /*#__PURE__*/react_default.a.createElement("b", null, "Preference Cookies"), ". We use Preference Cookies to remember your preferences and various settings."), /*#__PURE__*/react_default.a.createElement("li", null, /*#__PURE__*/react_default.a.createElement("b", null, "Security Cookies"), ". We use Security Cookies for security purposes."))), /*#__PURE__*/react_default.a.createElement("h2", { 26732 className: PrivacyPolicy_default.a["privacy-section-title"] 26733 }, "Use of Data"), /*#__PURE__*/react_default.a.createElement("div", { 26734 className: PrivacyPolicy_default.a["privacy-section-content"] 26735 }, "Vitzo Ltd. uses the collected data for various purposes:", /*#__PURE__*/react_default.a.createElement("ul", null, /*#__PURE__*/react_default.a.createElement("li", null, "To provide and maintain our Service."), /*#__PURE__*/react_default.a.createElement("li", null, "To notify you about changes to our Service."), /*#__PURE__*/react_default.a.createElement("li", null, "To allow you to participate in interactive features of our Service when you choose to do so."), /*#__PURE__*/react_default.a.createElement("li", null, "To provide customer support."), /*#__PURE__*/react_default.a.createElement("li", null, "To gather analysis or valuable information so that we can improve our Service."), /*#__PURE__*/react_default.a.createElement("li", null, "To monitor the usage of our Service."), /*#__PURE__*/react_default.a.createElement("li", null, "To detect, prevent and address technical issues."), /*#__PURE__*/react_default.a.createElement("li", null, "To provide you with news, special offers and general information about other goods, services and events which we offer that are similar to those that you have already purchased or enquired about unless you have opted not to receive such information."))), /*#__PURE__*/react_default.a.createElement("h2", { 26736 className: PrivacyPolicy_default.a["privacy-section-title"] 26737 }, "Retention of Data"), /*#__PURE__*/react_default.a.createElement("div", { 26738 className: PrivacyPolicy_default.a["privacy-section-content"] 26739 }, "Vitzo Ltd. will retain your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "Vitzo Ltd. will also retain Usage Data for internal analysis purposes. Usage Data is generally retained for a shorter peri
26739od of time, except when this data is used to strengthen the security or to improve the functionality of our Service, or we are legally obligated to retain this data for longer time periods."), /*#__PURE__*/react_default.a.createElement("h2", { 26740 className: PrivacyPolicy_default.a["privacy-section-title"] 26741 }, "Transfer Of Data"), /*#__PURE__*/react_default.a.createElement("div", { 26742 className: PrivacyPolicy_default.a["privacy-section-content"] 26743 }, "Your information, including Personal Data, may be transferred to \u2014 and maintained on \u2014 computers located outside of your state, province, country or other governmental jurisdiction where the data protection laws may differ than those from your jurisdiction.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "If you are located outside Belize and choose to provide information to us, please note that we transfer the data, including Personal Data, to USA and process it there.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "Your consent to this Privacy Policy followed by your submission of such information represents your agreement to that transfer.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "Vitzo Ltd. will take all steps reasonably necessary to ensure that your data is treated securely and in accordance with this Privacy Policy and no transfer of your Personal Data will take place to an organization or a country unless there are adequate controls in place including the security of your data and other personal information."), /*#__PURE__*/react_default.a.createElement("h2", { 26744 className: PrivacyPolicy_default.a["privacy-section-title"] 26745 }, "Disclosure Of Data"), /*#__PURE__*/react_default.a.createElement("h3", { 26746 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26747 }, "Disclosure for Law Enforcement"), /*#__PURE__*/react_default.a.createElement("div", { 26748 className: PrivacyPolicy_default.a["privacy-section-content"] 26749 }, "Under certain circumstances, Vitzo Ltd. may be required to disclose your Personal Data if required to do so by law or in response to valid requests by public authorities (e.g. a court or a government agency)."), /*#__PURE__*/react_default.a.createElement("h3", { 26750 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26751 }, "Legal Requirements"), /*#__PURE__*/react_default.a.createElement("div", { 26752 className: PrivacyPolicy_default.a["privacy-section-content"] 26753 }, "Vitzo Ltd. may disclose your Personal Data in the good faith belief that such action is necessary to:", /*#__PURE__*/react_default.a.createElement("ul", null, /*#__PURE__*/react_default.a.createElement("li", null, "To comply with a legal obligation."), /*#__PURE__*/react_default.a.createElement("li", null, "To protect and defend the rights or property of Vitzo Ltd."), /*#__PURE__*/react_default.a.createElement("li", null, "To prevent or investigate possible wrongdoing in connection with the Service."), /*#__PURE__*/react_default.a.createElement("li", null, "To protect the personal safety of users of the Service or the public."), /*#__PURE__*/react_default.a.createElement("li", null, "To protect against legal liability."))), /*#__PURE__*/react_default.a.createElement("h2", { 26754 className: PrivacyPolicy_default.a["privacy-section-title"] 26755 }, "Security Of Data"), /*#__PURE__*/react_default.a.createElement("div", { 26756 className: PrivacyPolicy_default.a["privacy-section-content"] 26757 }, "The security of your data is important to us, but remember that no method of transmission over the Internet, or method of electronic storage is 100% secure. While we strive to use commercially acceptable means to protect your Personal Data, we cannot guarantee its absolute security."), /*#__PURE__*/react_default.a.createElement("h2", { 26758 className: PrivacyPolicy_default.a["privacy-section-title"] 26759 }, "\"Do Not Track\" Signals"), /*#__PURE__*/react_default.a.createElement("div", { 26760 className: PrivacyPolicy_default.a["privacy-section-content"] 26761 }, "We do not support Do Not Track (\"DNT\"). Do Not Track is a preference you can set in your web browser to inform websites that you do not want to be tracked."), /*#__PURE__*/react_default.a.createElement("h2", { 26762 className: PrivacyPolicy_default.a["privacy-section-title"] 26763 }, "Your Rights"), /*#__PURE__*/react_default.a.createElement("div", { 26764 className: PrivacyPolicy_default.a["privacy-section-content"] 26765 }, "Vitzo Ltd. aims to take reasonable steps to allow you to correct, amend, delete, or limit the use of your Personal Data.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "Whenever made possible, you can update your Personal Data directly within your account settings section. If you are unable to change your Personal Data, please contact us to make the required changes.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "If you wish to be informed what Personal Data we hold about you and if you want it to be removed from our systems, please contact us.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "In certain circumstances, you have the right:", /*#__PURE__*/react_default.a.createElement("ul", null, /*#__PURE__*/react_default.a.createElement("li", null, "To access and receive a copy of the Personal Data we hold about you."), /*#__PURE__*/react_default.a.createElement("li", null, "To rectify any Personal Data held about you that is inaccurate."), /*#__PURE__*/react_default.a.createElement("li", null, "To request the deletion of Personal Data held about you.")), "You have the right to data portability for the information you provide to Vitzo Ltd.. You can request to obtain a copy of your Personal Data in a commonly used electronic format so that you can manage and move it.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "Please note that we may ask you to verify your identity before responding to such requests."), /*#__PURE__*/react_default.a.createElement("h2", { 26766 className: PrivacyPolicy_default.a["privacy-section-title"] 26767 }, "Service Providers"), /*#__PURE__*/react_default.a.createElement("div", { 26768 className: PrivacyPolicy_default.a["privacy-section-content"] 26769 }, "We may employ third party companies and individuals to facilitate our Service (\"Service Providers\"), to provide the Service on our behalf, to perform Service-related services or to assist us in analyzing how our Service is used.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "These third parties have access to your Personal Data only to perform these tasks on our behalf and are obligated not to disclose or use it for any other purpose."), /*#__PURE__*/react_default.a.createElement("h3", { 26770 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26771 }, "Analytics"), /*#__PURE__*/react_default.a.createElement("div", { 26772 className: PrivacyPolicy_default.a["privacy-section-content"] 26773 }, "We may use third-party Service Providers to monitor and analyze the use of our Service."), /*#__PURE__*/react_default.a.createElement("h3", { 26774 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26775 }, "Google Analytics"), /*#__PURE__*/react_default.a.createElement("div", { 26776 className: PrivacyPolicy_default.a["privacy-section-content"] 26777 }, "Google Analytics is a web analytics service offered by Google that tracks and reports website traffic. Google uses the data collected to track and monitor the use of our Service. This data is shared with other Google services. Google may use the collected data to contextualize and personalize the ads of its own advertising network.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "You can opt-out of having made your activity on the Service available to Google Analytics by installing the Google Analytics opt-out browser add-on. The add-on prevents the Google Analytics JavaScript (ga.js, analytics.js, and dc.js) from sharing information with Google Analytics about visits activity.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "For more information on the privacy practices of Google, please visit the Google Privacy Terms web page: ", /*#__PURE__*/react_default.a.createElement("a", { 26778 href: "http://www.google.com/intl/en/policies/privacy/" 26779 }, "http://www.google.com/intl/en/policies/privacy/"), "."), /*#__PURE__*/react_default.a.createElement("h3", { 26780 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26781 }, "Payments"), /*#__PURE__*/react_default.a.createElement("div", { 26782 className: PrivacyPolicy_default.a["privacy-section-content"] 26783 }, "We may provide paid products and/or services within the Service. In that case, we use third-party services for payment processing (e.g. payment processors).", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "We will not store or collect your payment card details. That information is provided directly to our third-party payment processors whose use of your personal information is governed by their Privacy Policy. These payment processors adhere to the standards set by PCI-DSS as managed by the PCI Security Standards Council, which is a joint effort of brands like Visa, Mastercard, American Express and Discover. PC
26783I-DSS requirements help ensure the secure handling of payment information."), /*#__PURE__*/react_default.a.createElement("h3", { 26784 className: PrivacyPolicy_default.a["privacy-section-subtitle"] 26785 }, "Paddle"), /*#__PURE__*/react_default.a.createElement("div", { 26786 className: PrivacyPolicy_default.a["privacy-section-content"] 26787 }, "Our order process is conducted by our online reseller Paddle.com. Paddle.com is the Merchant of Record for all our orders. Paddle provides all customer service inquiries and handles returns. Their Privacy Policy can be viewed at ", /*#__PURE__*/react_default.a.createElement("a", { 26788 href: "https://paddle.com/privacy" 26789 }, "https://paddle.com/privacy"), "."), /*#__PURE__*/react_default.a.createElement("h2", { 26790 className: PrivacyPolicy_default.a["privacy-section-title"] 26791 }, "Links To Other Sites"), /*#__PURE__*/react_default.a.createElement("div", { 26792 className: PrivacyPolicy_default.a["privacy-section-content"] 26793 }, "Our Service may contain links to other sites that are not operated by us. If you click on a third party link, you will be directed to that third party's site. We strongly advise you to review the Privacy Policy of every site you visit.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "We have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services."), /*#__PURE__*/react_default.a.createElement("h2", { 26794 className: PrivacyPolicy_default.a["privacy-section-title"] 26795 }, "Changes To This Privacy Policy"), /*#__PURE__*/react_default.a.createElement("div", { 26796 className: PrivacyPolicy_default.a["privacy-section-content"] 26797 }, "We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "We will let you know via email and/or a prominent notice on our Service, prior to the change becoming effective and update the \"effective date\" at the top of this Privacy Policy.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page."), /*#__PURE__*/react_default.a.createElement("h2", { 26798 className: PrivacyPolicy_default.a["privacy-section-title"] 26799 }, "Contact Us"), /*#__PURE__*/react_default.a.createElement("div", { 26800 className: PrivacyPolicy_default.a["privacy-section-content"] 26801 }, "If you have any questions about this Privacy Policy, please contact us:", /*#__PURE__*/react_default.a.createElement("ul", null, /*#__PURE__*/react_default.a.createElement("li", null, "By email: ", /*#__PURE__*/react_default.a.createElement("a", { 26802 href: "mailto:[email protected]" 26803 }, "[email protected]"))))), /*#__PURE__*/react_default.a.createElement(components_FooterLinks_FooterLinks, null)); 26804} 26805// EXTERNAL MODULE: ./src/components/WelcomeBack/NextButton/NextButton.css 26806var NextButton = __webpack_require__("Hr6e"); 26807var NextButton_default = /*#__PURE__*/__webpack_require__.n(NextButton); 26808 26809// CONCATENATED MODULE: ./src/components/WelcomeBack/NextButton/NextButton.js 26810 26811 26812function NextButton_NextButton(props) { 26813 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, !props.skipStep ? /*#__PURE__*/react_default.a.createElement("button", { 26814 className: [NextButton_default.a.nextButton, props.disable ? NextButton_default.a.disable : ""].join(' '), 26815 onClick: props.nextButtonAction 26816 }, "Next \u203A") : /*#__PURE__*/react_default.a.createElement("button", { 26817 className: [NextButton_default.a.skipButton, props.disable ? NextButton_default.a.disable : ""].join(' '), 26818 onClick: props.nextButtonAction 26819 }, "Skip \u203A")); 26820} 26821// EXTERNAL MODULE: ./src/components/WelcomeBack/BackButton/BackButton.css 26822var BackButton = __webpack_require__("DbAi"); 26823var BackButton_default = /*#__PURE__*/__webpack_require__.n(BackButton); 26824 26825// CONCATENATED MODULE: ./src/components/WelcomeBack/BackButton/BackButton.js 26826 26827 26828function BackButton_BackButton(props) { 26829 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("button", { 26830 className: BackButton_default.a.backButton, 26831 onClick: props.backButtonAction 26832 }, "\u2039 Back")); 26833} 26834// EXTERNAL MODULE: ./src/components/WelcomeBack/CreateAccount/CreateAccount.css 26835var CreateAccount = __webpack_require__("ghug"); 26836var CreateAccount_default = /*#__PURE__*/__webpack_require__.n(CreateAccount); 26837 26838// CONCATENATED MODULE: ./src/components/WelcomeBack/CreateAccount/CreateAccount.js 26839 26840 26841 26842 26843 26844 26845function CreateAccount_CreateAccount(props) { 26846 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 26847 className: CreateAccount_default.a.createAccountContainer 26848 }, /*#__PURE__*/react_default.a.createElement("div", { 26849 className: CreateAccount_default.a.title 26850 }, "Create your account"), /*#__PURE__*/react_default.a.createElement("div", { 26851 className: CreateAccount_default.a.content 26852 }, "We recommend you create your account with the same email you used for Clipular. You will receive ", /*#__PURE__*/react_default.a.createElement("span", { 26853 className: CreateAccount_default.a.bold 26854 }, "50MB"), " storage for free!"), !props.currentUser ? /*#__PURE__*/react_default.a.createElement("div", { 26855 className: CreateAccount_default.a.signFormContainer 26856 }, /*#__PURE__*/react_default.a.createElement(SignForm["a" /* default */], { 26857 welcomeBack: true 26858 })) : /*#__PURE__*/react_default.a.createElement("div", { 26859 className: CreateAccount_default.a.welcomeMessage 26860 }, /*#__PURE__*/react_default.a.createElement("span", { 26861 className: CreateAccount_default.a.helloEmoji 26862 }, "\uD83D\uDC4B"), /*#__PURE__*/react_default.a.createElement("br", { 26863 className: CreateAccount_default.a.newLine 26864 }), /*#__PURE__*/react_default.a.createElement("span", { 26865 className: CreateAccount_default.a.welcome 26866 }, "Welcome ", /*#__PURE__*/react_default.a.createElement("span", { 26867 className: CreateAccount_default.a.firstExclamationMark 26868 }, "!")), /*#__PURE__*/react_default.a.createElement("span", { 26869 className: CreateAccount_default.a.bold 26870 }, props.currentUser.email, /*#__PURE__*/react_default.a.createElement("span", { 26871 className: CreateAccount_default.a.secondExclamationMark 26872 }
26872, "!")))), /*#__PURE__*/react_default.a.createElement(BackButton_BackButton, { 26873 backButtonAction: props.backButtonAction 26874 }), /*#__PURE__*/react_default.a.createElement(NextButton_NextButton, { 26875 nextButtonAction: props.nextButtonAction, 26876 disable: !props.currentUser ? true : false 26877 })); 26878} 26879let CreateAccount_mapStateToProps = state => { 26880 return { 26881 userId: state.app.userId, 26882 currentUser: state.app.user 26883 }; 26884}; 26885/* harmony default export */ var WelcomeBack_CreateAccount_CreateAccount = (Object(es["b" /* connect */])(CreateAccount_mapStateToProps, null, null, { 26886 forwardRef: true 26887})(CreateAccount_CreateAccount)); 26888// EXTERNAL MODULE: ./src/components/WelcomeBack/WelcomeBackLogo/WelcomeBackLogo.css 26889var WelcomeBackLogo = __webpack_require__("o+St"); 26890var WelcomeBackLogo_default = /*#__PURE__*/__webpack_require__.n(WelcomeBackLogo); 26891 26892// CONCATENATED MODULE: ./src/components/WelcomeBack/WelcomeBackLogo/WelcomeBackLogo.js 26893 26894 26895 26896function WelcomeBackLogo_WelcomeBackLogo(props) { 26897 function goHome() { 26898 // props.history.push({ 26899 // pathname: '/' 26900 // }) 26901 } 26902 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("svg", { 26903 onClick: () => { 26904 goHome(); 26905 }, 26906 className: WelcomeBackLogo_default.a["screenlink-icon-light-container"], 26907 version: "1.1", 26908 xmlns: "http://www.w3.org/2000/svg", 26909 xmlns: "http://www.w3.org/1999/xlink", 26910 x: "0px", 26911 y: "0px", 26912 width: "192px", 26913 height: "192px", 26914 viewBox: "0 0 192 192", 26915 enableBackground: "new 0 0 192 192" 26916 }, /*#__PURE__*/react_default.a.createElement("image", { 26917 id: "image0", 26918 width: "192", 26919 height: "192", 26920 x: "0", 26921 y: "0", 26922 xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAABTmlDQ1BpY2MAACiRY2BgUkksKMhhYWBgyM0rKQpyd1KIiIxSYH/IwA6EvAxiDAqJycUFjgEBPkAlDDAaFXy7xsAIoi/rgsw6JTW1SbVewNdipvDVi69EmzDVowCulNTiZCD9B4hTkwuKShgYGFOAbOXykgIQuwPIFikCOgrIngNip0PYG0DsJAj7CFhNSJAzkH0DyFZIzkgEmsH4A8jWSUIST0diQ+0FAW6XzOKCnMRKhQBjAq4lA5SkVpSAaOf8gsqizPSMEgVHYCilKnjmJevpKBgZGJozMIDCHKL6cyA4LBnFziDEmu8zMNju/////26EmNd+BoaNQJ1cOxFiGhYMDILcDAwndhYkFiWChZiBmCktjYHh03IGBt5IBgbhC0A90cVpxkZgeUYeJwYG1nv//39WY2Bgn8zA8HfC//+/F/3//3cxUPMdBoYDeQAVIWXu+j9DEQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAABEFElEQVR42u19d6AVxfX/Z/aWV3gNHo+uFFFBUKoNCygWNBoViRg1seRrNMZoTCwIPKogGr8pan72fBNjNIAaMbE3QNEgiiCiSEfp7cHrt+zO74/dqbv33r2Pe0Fkj15m35bZOXPOnDltZoEAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAII4EAAOdANYLB3zrCeIVgXGYQMAmgnAJ0A0olSq1WLkSMElFIQYqPJjimlObk/1+/PNXwX8AdIAyF0E0A2U4otIPgkYZGXyy+au3q/dEKmNh7Il9fPGd6e0sSvAIwENXvrBNhX0AmY6/r3tT06HFL4k9BXAF4kJPJQyUXvbDsgDcIBGgA75pxSWkiN2wnIHZSaRQcKeVdnHGCJfaDhQOBPSKiJgv6umVgPVF20oG6/47y/X1j30mmjKCWPgiYr9/e79xUoKAgIKByJ6hyTFN34XZPA32n8SXgXIfTG0ovff35/4hTaXy+aNGmSMedWczKo+TClZrGfZ/ZVIh3sEv2Qwp9axQC9bMzl3UKFva+bN3fu3P3SyP0iijb/+8Li4sTeZ2DFL1FenoFAhACU2qV9XZzz8/w+d84Brv+QxZ9E/tUYKb+q04X/bszJi9JA3meASZMmGae1+3omrPglegfKpW0YgZf2eTjnVOILhqDOOeqq0+7gfWMgV/vyXX+Av3PO7B1Bok9R7+tm53smyPsMUPPCqVOpGR/vp0MyShwCgEqtptI5X/WrBNMrzLo92XZ2gH9W+MOI3NP60g+qW/Qyv23KZ+V1c4b+KBlvmpWqv3Sjyk3Q7AimM4hupLmNOJWf9pUhMrU3wD87/A2DgISil1WM/GB2yzgwM+RtANAPTindtZVsImZzKef/DBLLVUeOdeJ9fV9mBtHap6Ib4N8S/MNFdVbE6pwvF2k4H5UCQM02YwySjaVU6QJGLdaBFgDilF5A+D2sQ+xzVLqevj55urYPKdLNSPb/TCI50omK+m2i2fUTAlgWlRiSOPUTqcYA/33CP9lYGiLFYwCMQx4gLzMAfXt4+917YlusRBORJVQmHdZ9XRNx7jk+3QzrRwRlJ7IyvDCThA7wbxn+JFSEwuJwx5IfzN2KHENeZoDde+K/NeONREgDIVEgSRQQAELAARawapuJWR/G8OGqBLbUWGiI+fc6ZILMKkSm+rNjiMwNQnqGyLL930X8o2GC7lUEJ/aM4LKTC3FkByMt/fk5fp2C0kY0N7e6DcBdLevo9CTIOWx//rR1NF7fLfPLhZGWSFLc+3Ijnl0QkwTQvooQHTJwWK7rz1YkZjsDHGT4hw3gNxcU4bqhhS76ez2vuH4jJevbXfZ+d+QYcj4Adrw4/CiradfXOgKZ+u8XT9Zj7leJfSRIrgmcqb581/9dr69l9Q/rHcWD1xQjEiZZ1WYUVR5dNfKdlT4b4wuMXFYGAGYiPsqiFBalAEQpOkHqTGdk/N/cJrz3Zdw5JXe2/AxVjDjVoEt1XVUPMgV2XNcpeOnVfB305ymFVHq1V5Re7fm+4j/3qzhmzGlSG+nRYMs5ZvxEzfilvpgwC8j5AAgZ5ATWY/IgsCgFtSxeUssCpRQrNyfw+1djjncBvFQ7jypRT0KEVqF60NIzjDwjy8f8OkRJYP/DSjlKm5phVZDb6NVe5v4jhBxy+D/3UQwrtyQ5H9g/SyotwDlmDSQgJ+aaX3M+ACxqHSYkBhUld65RfpkCmLUwjkTSRpw4HcoIQAgRpeQzFh2m/nSCEKmU6xb3i9JLxGWSmBq/ufHVJHym36GEv2VRzF4YV3hBe1xvjs1bOYace4EsSg+zqGg9Y3p4lRT4eJXQ+9Uh4t0J2YThXfVpx26NlXmtfd4vSWV2g5zLk61Gfajh/+HKpCPhnevOdESJ9xOEIucDIOczADWTVWIOh1SyHmJdYyO5fief71mvSpVpOqL+0+/X25JJ55VK6tRF5fdp9bvud6OjGPiZJWh6Hfj7jv/WGlN9wP0GqQSsZLwKOYbczwDxei41XG4urVMpKOIJy3/l7ti8cuwKzbNzchX7glwmx7mf5+VSPz7E8G+IwbYBuIR3+IV610ethn1pvSfkfACoEsY9BWd6liCFlARAHAlF+ADycLLJBCfEvjeFHz7T83p7Ml3XwYsBA/zdOPPjDPyShajwDbkfANySga/QJZWut8SrLZf6cSYC7ivo73dlN2oYubM31f45FPFvaWp1riD3A8CSEZLNeohjuX+yiMV72IRpwU9+PZU4jh2L5mSZD68ZgS6JRhzmaGEuwvcRf/l+lwhw9Y9PxLOA/MwAogfU0utYnw2kUu9Qd39r+e4agTJ5QTwqVErZ7623kd8noUtAQEnq/HvF2S4qPKTxl+UjIdTheVlFk1qch8kiPzZAyjlcO8GjI6kqS/+8Tl49nddlVGXUMTy0YllEerVPKn0xnPyn3p5DEH9KLWlG0BQG3WdwcMwAmpGmaTzM12wjZru7qNyRyvggoJb/bUSY5Em5AsrLy7APUsWt87rbkzHZCzik8bdLbxWPALBkeXowzACgVM1mhUDAK9uVdZN0QpmCiTYFyxRzTZmeKrW8YMOrPkj1pb9fV9GJQ0ySUqRSzooCMSFRiXN8KONvyV4l7Wlgn8anL8irG9SvF0jt8NQrnvzkw6eTEno+itfzmXEjKRnS/Xd6knoz3KGFfzZi/eBwg8oEdeYv7hki4hxgT2+2CsQILBLCRF1Sh+sLavgxlZ7PbhcDlXmI0h5xnKp+0WZBIv/t0d93qOIvOw69hko+Z4GcDwBlynSkRaqt81LrhNIdGQIlyrFXuD8LCZPJRvSu3wunVPerEj3Af3+weHrIfSqEJS3Idixg6uiobiOASRxvieECDydFWopled1yFn1bfNE34ef8gDsVQTMCmUeAUOl+5AR/nrcvG9EG+c7jb1myFyhLnSwHkBcvEAMNXw+vkCA86wB5Fb2LXl4Mojg0dK+H+v5MSjR7t1y/fOwisNYeV2SWOO+W+UduurQe
26922wC/+liXy5Fn+PCj1bp+Ds51ObYAYIfvYML4z+FOJD9jx/pwP8pwLpJYurxBV79dVJmeCSGkkerrR0+q7GXJttPoyJpexY8XtKyUC0PS5Ozqkwh/UgmWZsEwTyozpA382QCgsUDMpBoURgmGExGA4UPhTzQZQL2pP5D4QkJ99gVKE9lNpfJLJxWMFXg/oBMhW49Hf7WIgjaDQj3U0XX5wduzXb6+3V+BPKQU1babn+/BkwM83/pSCmklQMwkQA6FQCMQICVrsZ/yVd6VNDfFVbVaQhxlAkvEuq85NMkUiM2njNxdGv9/dmLQdyoiVams+vX7X/RrBXV7xDCqDV3KYZVmwqAXLTAJMP/aBPyEExcVFCIfCSCQTMJMmYrFYZvyphWTSBCEEhhEGCYUknT3/+KflF730m3adBeTeC6R1kCKTXAxGoapAmgQjzjmS8g5JTwCP2qfyoni1Vi1dfg+11IwYt4ByR0az8dJQ04SZjAtMU+DfrVt3HD94MPr07Y0+x/RFr1690K6qymWs7ty1C6tXr8aqVauwaNEnWLJkCVavXo2kabrwpxQwkwkQy4IRCsMwjP2Cv2ykESdZjkgDLl2kOReQhyWRwgvEpnNliqceKo6k43OPhtR56mauWn3Kdc3t6lZqmR4l+l5rhqrjwt1Omk17M7iBmVsfFsxkAtS0lAbxVhKCY4/ti1EjR+LiSy5Bxw4dfNGibWUl2lZW4qQTT8RPrroKALC7pgazZs3CnDkv49PFix37QDTHskxQywQNhWGEwo5hnD/85fR5V/IdEefyBXkKhNkt9uNWY4NCwhhiSlXLVMeprrunBL1+CjZniafT6LBeRkwWwsnLS2VaJqxkwrPuosJC/PCiC/GbX9+GHj165IQ+bVq3xo033IAbb7gBK1aswP/+/g947bVXEY8nWA/ZtDPtHRtCkQgIYV6j3OOvgMuNpB6n3kO05ZDzNcGAHQuwnO0uLGXbC31nAIsL5HRBIP4MpBLaOY+fGnghyrl06kjqNbRCwnm9X55B5NmK3a/MYJQimUjASiRAqcpbhBD86Eej8PHHC/Hwgw/ljPl16NWrF554/DEs/OgjnDX8LKUNFDbDJeMxWJaZc/wF3Snnl0y/fCyeyce2KFIXArKIYCOY+7BBIfGnMgXKQaJU++Ck23dGfXeK9mhX2WzP6rN3QxbtlXHw835ZoDGC22oGhZlM2OqG1tpOnTriuef+gT8//DA6tG+fa/J4QucuXfDss8/gH3//Ozp27KAwMACYiRhMM5Ez/LnAY32bYkAJl69Mv9xCzgcAd13b3SX02JROUNFBhEilxPy8Q6TSPgYvbeFAeSkfs+uy0abEGJzmsWhqqhnEbjpJeT/lx9COxYxiWZbD/JbCIAYh+PHll+OjBQtw5hln5oXYmeCcc87GvLnzMGzoUMXjQ0FgJpNOHGLf8NedHi5GkBlCuykfxnAeZgDBoJZUWkztcakp/lWYFN2WpgdlM9f9Pp0gWdLDA1xzilTa++BbySQodQJazn1lZWWYOfOfePBPf0Rxsa8PaOYNKirKMWvWTNz0i1+48LeSCVArnR6eHn8vemT7yzXkZT2AErhIG6nJhFB6N5w7t8TL7U1Tuo+9893V9GS3VwLaKEiHg9p+y0zCoqZyR0V5BWbPmoX+/fvlnBT7ApMnTYJpmnjs8ccV/M1EDKFoVBjGWeCf8v4UcQLnla77cgl5yQWSpYTq8iWO242oD0gMl/aTPhm8BBkuuyCdXeGJm+PSS53slRofy0zyVAZ2Q5s2rTF79vM47ti+uSZDTuCeqVMRi8Xx17/+lSEECoJkIo5QOAqDGL7xT9VflsQgfmblXEMeUiGokq6uxrtVicA7hEtse4C09CuK+/xhaY1AbPkgd9vpA5JC8ZO7Bgh7N6WOJ0VMUa1bV+KFF55H3z599qm36+rq8NFHH2H5l18hHo8jHo8hkYijXVV79OvfDwP690dJSUmL6//d/fch1hzDc/98VppeCahlAiHDF/4p6UWhDoiMKkPuIR97g6ropNZYJNcYe0D1heqBKT2ZLdN1aMcecWQtHyX9lJ0ykqnUr615phTJZFzBraSkBHPmvIjevXq3qI+XLP0cjz3+KD5d9Ak2fPONkoKuAyEEnTp3xg8vvAA3XH89OnfJfnvNBx/8I7bt2IZ333mH42CZSYAQGIb41LQX/mnp5dRFU6pIqR0nuYK8eIH4MR/pVDkW+FHeCZ6BABeoRpbsafLTVRn9/BmuZzKKvZ43zaQLp3tnzGgR8z/33LM46+yzcfbZZ+H52c9j3fr1aZmftWXTxo145JFHMWjwCbh45EgsXPhx1u9+6MEHUV5erpyzNNwyx1Fk6kGluS/65x5yvzkuFbnq9t+yPeCOAwCQ/Z6i1FyfvrxCeofqP90Pqr1PcVZ7Vp+ewO6+sEBN1ej90Y9+hMsvuyyrPl21ahXOPuds3HLrr7F0ydI0nS+VHj/TMrHg/Q9w8SUXY9z4cUgmk77b0K6qCtXjx2v1OzNBS4EQLQ5gidLzdxC4QZXkJyJKytzHRKWLwuBy7od3YEBlWO0nptQUM4I2QDLdn5HhM9RnJROQwhKorKzEfTNmZNWfD/zv73Hm8OFYsmSp7kWUOtFZ8OKkNZNQCDAMm8FU4gAAkokkHn/sCZx62mn48qsvfbfl6quvxkknnqTUZ+cOWd79qc/wOr2ke30pO3kwBfI0A4hUBznUradGyHh5RgqlYJefKTKjiiKVXl5qUFH6oYieGqCcsyxtm0hg3NixKC0t9d2Xv7jpJsyYMQPNTc2u9hCDwAiHEYpEEY5EEQpHEAqF+S8cjiDsXDNCYWUwMPTWrF6Diy8eiRVfrfDdpocffgjFxUUCVzYINPz9gG6v6Z9E0n/UOghygQj/182CLgaVvAeeuSTSOc9cIO0/nQC6BM+Uq+LObRGliImK98leI+L4MlhJzaRS/7HHHYuf/OQnvvvx+ut/jtmzZ6vtc7xIRiQMIxyxV3MRpMWfLYEMhSMIhcNaWIqiZvdujBw1EmvXrvXVrq5du+LHV1yu4E8tkwsP0Q9u+sk0gXSdjUhZCHn98jEF5GcGgGX/2HGqyJ5zLaXI1kYMgSj9GqGq3qjKQObs9B3pdVlxUGYInjtjJXkGLDs3YcIE3334y5t/iZdeekk9SYBQOIxQJAKDGC3C33AGAjGIgv+O7Ttw8chLUFdX56t9t956G6LRqNIvsk3nVyDxvK9U/KIJPOugyAZNl8wmlUqENVUHSaWsDvlVkfRkLbcJkT5XJRXBUiXvgal4ySTkEXLqqadi2NChvrrv5Zf/jZkzZ3HfFmOgUCgMQkL7jL9hEBAjDBgGr52CYvOmTRhz9xhfbezYoQPOOfdchckt03TRK5NTQeeXTP2bhwVhecgFknT8TDYAz/RrsRssvdafrdcmayNCPsffaSlSjxCCSRMn+sKmpqYGd955h6tRobCUk58D/PnyR63OWbNmY/777/tq61VXXOnGW+9bt99TlFA9fH74JZPLtyWQl/UA0KR9quxOeemvF/+7+U3NLnUnt3mlz2bhp3Zd192uqhvGK5lPdQtSjBgxAv379/fVbbf++jbs2LlTwT+kGLC5wx+AbRxLYFELt99+u6+2Dh9+Jior27rwT6dyutujaQjQUlF0FfhgmAGoR4ekIpAlDQS2TyTfL5IbSKl19MzrAbIDXZ5SavHSz3oA20shCByJRHxL/08//QSvvfqKgn+I7eOTJ/zZTCDjv3btGrz11pu+nj399NPU9zvrJ1KByynhWL2pPqzuJWByDXnxAvk1KlXSwsWBug7o/sl6vFun13+6TaLPSO77RS5Lpu/0WpblbGHC6YeRl4zEEUf09NVvEyZMFKoTcXKMiJF3/I2QAcCQ6gCefPIvvtp86imnKM9Ri9kAcDQcysvUgUzmOXL2RYX4ULiXCZFryE82qM+RyiRAutvT1ZUpVUpWWOS6RG6Kumhbdu2lep9cKgqRZSkKSlFRIcaPr/bVD2+/8zb+u3Chcs4IhTIm8uUK/5ARgmla/P558+dh+/YdaNcu/VdJzznnHK1+yavH3516EwNKndwxIq5Duy6XfrdozAby4AaVA12qyuOe0vbNqNHdbrof326PNwMxfd1ytiIxk3F79zXLVO5hJY9aspK3wTlnqSkPP/3pT9Cxo7/dG6ZOnar8rWxfmCf8Ga3ketj9iUQCb7zxesb3d+zYEeUVFVJ79PZJfZTqHiqnPlCFf1yz7MHgBqWg9szt1Cw7GuRz9rFk/aIFXpuWtI/aLjsrmbB3ZLBMEW00TZhm0t6ixKOzU7lpqZkU7aQU5eVlGHPX3b7aM2v2bHzxxXL+LAAQYuQNfwXYnp6GI
26922Qacc+7TTxf7qqJL506qF0NZC5LerW2/G+BDhEgloSBSSYg8jHIH+VkTbFFHH7REKR/z647sYUavtB7AS+eWO9Wzg+WdzDwc/5ZlwUom7C0/FOWVO9YdItn3mabtz09lE4iFH5aisN54ww0oLytz+EnSdbVjSilmzJgh+c3temX1J5f4K4PW5aAgEAKJYvmXy3zR+/CuXZVcFntH8BT0ZHgzVqYSH9DMmQD5sAPysC+QmFJ1HVBXWrmhIz8slXInAGqHZHvdJakz4QEApgmLwA5AebSPAk6d4rmqqirceuuvObEZdupyS5tRn3jiSWxYv17pPBIKtQg/P9fT2TC6+2bt2nW++qmstFwRzJTKL3DTE3J7nZNy/6VyojL8cg15+kwqYxBtCLB9IKn4ShifAQBVaqWoXR4yNI2Zxepnz1CLbTIrrkciUQwdOgzdunVFLBbD++/Px/r1GxSKWEkTRtiR+NoIptTSgjMUt/36NhQWFkjniDN9q5tuJRJx/OEPv5fwgp3JmVbOtRx/cVVa4QZtiSLjXkoRj8V80bu8XE7uE14fj9fDSwLKe4OyYzWFPo8qIPKyKN5SJTpTDTj+VOoQh1zS33KWnEQP/rzby6AKHHlRPPtAhwVm3Ionjju2L5546ikc2fNIpZMffOghTLtnqpMr7zCYZYGEwqqaAUh+f7sFh3ftip///HrYTM/aITGttDTwD3/8A7Zv3ya1Hjy5Ldf4sw+UeC75hEjv4zQAfEddC6IFyt9aArZ2TWsvT4fx1hh0L9ZBoQLJ0tOD39US2gjXekjeqIpVrRBYc5u56nPAMi3lxR07dsTs519A27ZtJbXEbsCtt9wCSi1MmTyZ308tE5QYXKe132NJnh/73NgxYxEKhbgqbd9OROncWV9fj0cfeUx5lpCQWF+bY/yVa0S9hz+rPeZ3ADQ1NysPKwJfo7dXewl1P6u2Lr9DIC/ZoH6MLm4Aqw+Lknokv0EZX1oPe40uR0prHp37778Pbdu2lYxSIhsiuPmXN6NDh45a2ywhnYmT8yS9sVfv3hh9+WW8HkWb07S6e6ffi71790iVO27PPOCvXqailGdbj0hTVJPsqaCpuUl7O01fv/Yexa2sOUUcHzOv7qCIBFPqMBy1nMZbEkHVz/uA7TmZIlJImf6e4j/R4d5gJ1WZCgMNHDQIP/jBBa4dKLhLkBBEwmH0cXZrUKQtk/6mCVB1Z7eJEyfx5+EYumJ8Ccm+Y8cOPP33vyl1SzfmFP+MbmV5VFmW8me37t180XvXrp0e/E0UXNJ5sTgfMBvNKb1+yEMcID9fiGEIwnJ0TNnolT+SpOq0ug3ANNX06RRQ6pI3uoLU8QymTJosvYswXnV5Iiq0BeBOdTZWDrMwKX/SiSdgxLnn8GdZLcLgFFPBxIkT0dDQyBtPKex0BFla5gp/+Jea+kDq3auXr+e+/Xaj1h5ViVF6RFfBstRo0g32lkLuP5BBhXRizC+MLnVA6Jqd7PdOUTs0MwrQdERV6tgzDBOww4adgSFDhih1sClX7G9jS+7Pli5RjF5C7aCNbU8IRjMMA5MmT9H0d6+9cYC1a9bhxRdfULCBYcDwvY+R5NVi+FHmPRFtBzFAiAHDIHygOmgqNoTcf9SyJCOboK/Pzbq2bN6s2RTgL3DtC+SiFhSnSTojnV3PNeTpE0msM9Rpmji7AKg5HWouUDZ6XtoPS0v56ZTaq6GmTJ0iAjKMAszKlMbVsmWfY+2aNZBvASGwLCccLzVx+PDhOPnkkzShJw0oKSBUXV2NeDzOagSlxGFS/xKbpwtYlmRnEOlZx+ULE6D2R/BElfp3egXNeN8BCIdCuOSiSzL2/+aNm7Bz565suEPuUdVB4rSD8YjOQ/pxriAPn0hKh7/2VcGsjRrV0PMyDEV2ppqbc+EFF6Jvnz4KCYjyh5BYEyZUKzori2SyT5QyCBkhTJ06RTwPMVhYweTZ0mWf49XXXlVwNgwjqwQvxvgiNdsbfwaWZYKAis2rUril2eJ99uyQU4agc5cuGdvzzrvvQBjWADGIIqXTRa9lnpBVImrJbl5tRjgYAmE6Quk0lowfhm5xE1RjKRqNYvLkyR5bGkozk9OoDxd8iPfem+vUw9pmM78dTBPtvfiSS3BM72Ok2ICNnEhfELiPGzcOpmmqOGeJv7wuwXdfWBYsEOmbX7rK6K7zZ9dd76vu+e/PZ9UwgqaVgLqKRwhxZjJpBpfUx321GfxAHlaEiXxzIvWJckyk1IB0NWleDFf+ilRyd6vFpKQ4d/llo9G1WzenLnCDVPkYm6OyVFdX8/r5B6AZ80jqTEE0iilTprCGcuOPe5fAJCIwb/58zJs3X0lNMJy4gl/8xXoDgX9hQQGuueY6vPvOu1i3dh3+859XcPXV1yDE0il4nzh793hsDEYVLx3F4YcfjgsvvCAzlSnFu+++p7i5RRqG/dOzf2X8FQcZpyN4KfkNFH7KNeRhBlCNHLfGKYDLohRTm9xhgFt+uQJnFLBgcQakAEpatcL4CdXcPUdYshaR32P/8cor/8Gniz9R2+BkSep70lxx5VU4rEtn0RD2Qtm16TBb9fhqtamEgCoRrcz4s6Abq6e4uBivvPIq+vfvz/OLhgwZgiFDhmDEuefiZz+7Dg2NjbwOi1oIUcf+YQNLMn5ZB995512+yPz6669i9+5dEiMTrqykCvy76Ocweyr+8NLYcg15WRPsZLHyY4GRVPpAyn27vOSEGc8iUGSxTFOIzr722uvQrl077l4kDrPyUlKLJk+d4uJFQgxYVlIEbChFq5ISTJw4Qc0K5baC/CzBnDlz8NmSzxTiG5Lnxw/+FrX4plHs3AMPPICBAwdoDgD7neeOGIFrr7tOHXSUKm2ggD2jgE8A6N27F6644gpfNH766b8r9bO+UN0bKv2U+/WbPB7QsqPVe3ME+VkUn6oHNIRZ7oe4X5KIbCqVplSuZoAox2JAqDsTVLRujbvGjEFKNpOm2meeeca1Q5rtQaHQR8UNP78elW3aKIRlHhT7Q
26922dGqKVMmK6+zBx6BZyDLA39qWYr0B4CBAwbiyiuv5ALAntmI9Ddw111juDHOBq48CJiXTO6Z6mp/K9jWrl2Lt99+WyUpYdgIeik0ZO5xqgby2KPMK0ekE/qmCgeHDWBJOn+GH/+eXiqlT3ZRUodZKEQHyucs6tqK8OabfqlsRcg/xMx62nmNaVm4997pyrO2NCOg1FT4v7Ky0mEudwYB0cr/+8tfsHLlKrVeJ1eI450Jf0jjwqnDHlRiJzq5zczALykpcQXz2CBg9oRc5/GDB+O8837gi8S/e+A+ZWNdpoK5Rb5EQw96ApTzAbVs3mFlyl+OIT9uUJ9TlfDFe82D7E/qvuRxO6VyZiZFxw4dcettv+Y3EAjm4LqpQ4uHH3oY327UIpqO9NcH1a9vuQXFrYp5XV7BK0IIEokE7rvvfrVOKfLMcVMjUwpyXksthw0ditNPH2oPfCnIJjwlduWWZSFhsg26dNHp9qhPZgZ9BtiwYQNefOFfUltVMcA8OQrtUhoF6W0AwFvA5BLymgrhC5i7EAAh1OEJbzPaHRkURrRw5dnXfnv77YhEokLNYsJV6k0KINbcjD/96Y+8LdIKbft7XhLBOnfqgltuvVVqusgkJRJnU0rxpz/9CZs2a4OKfVJI4guCNPjzqLpdr2EQTJ12j9x5/L1cCDtK/bvvvoP6unrxbtYPlGV6CmFx5pnDcfLJQ3yRq3r8OCeYJ+rlQoVJ9BQS0PWBlDzo9NlCXlaEQRJG6UPxdhcygsszpHhA9JS6qsp5FhSW5RDTeUH3Ht1x/f9cD0YKoRrIHiqbVPff/zvs2LmDnQR44MjtLbr77jEIhUNc+vNmOozFGLipqQkPPfSQ0i+2kSj74hmje+PPpb+E/w9+cCH6HdtPEgTCUyTUfxvRRx55FFzFIhSUEISIIQUIbfxDoTCmaIvyU8GyZV/glVdfUSU6cwR4gNsLqC4KIoSq+W0Z4kb5mALykAsk/UE5T4n2a1OesiBCDwxpSrVL3SBwtiNRpf+E8dXC0wO1DnkG2FOzB4899qhEUMe8JoTvdclGbM8jj8K1116rIcnMWuGkNgxg+vTp2Llzh+Z3N3hgR0gAtVTwp1QsFCJ2MG/qlCk2XlR4npgBKjPZRx/9F++9+7baRieSTZVUDooLLrgAfY7x952y6vHjxLeCeW8SRWDJ7l3K8ZAloIq/wtNpVFzXcY4gvzZApkAAx0qoDkCaZDB50bf9gOalITi273EYeemlGjMJA9i+yybMlKlTUVu7V1F7SMiAxTZ4knCZPGkydFEkcpFEE3bt2o0nnnhca7bt9uSRzhQdxPC3nGCeTPHLLrsMPY44QpGKcqoAD5oBGD9+nOIh4heomsoRLSgQwbwMsODDBZg3f66MPgiBK5dJrt8t0N34uwaALvH1GSHHkJcBwNuv6XzeA0LX6dNEhzWjiiW9yTB16lTerbwkUr2Ovrpx4yb8/em/qfU6UtpyDGrWnoEDBuDii39o10jU5mjLCTBp4kTU19dL9XoN7nQ2jez6taG4uBiTJk1WDGi2nJA/73iQ3nj9dXyyaJHWPoPbBnKbLx/9Yxx+eFdfdJ0wfpza/45fMuMKNKn0xl9jHrnUjvNhMuRlWxTD+RGpVNQf5vVziCL7EfyqeSztQYZTTjkFZ5x5JtfJZeGneyaqq6vR3NystJzt4kAk/zgBcM+0aYr3iD8hO60BfPPNN3jmH8+o/SHryJqfnwWo1MCQew3Dtddeh/bt23Nc5LpFMM/GedLESWrqAQCDECf6K/Bq1aoVxvv0+7/6yn+wePFiTf4YUuzBN9E88AcPdBFIpQe/GAeDDaAEvTSJrzM51WaDzPnw8r1q0IsQgqnTprl80nxGktwkX69YgX+9+KJQSQG+aZdlWUr7hg0bimFDh8FRvhVdW0d27NhxaG6OKW1SUMwk4eQ8Jwdat67AuPHj7bcxnVrGi4qZ5Jl/PIMvv1yuzFIG/w6AJBQocN3P/gdVVem3PmQwefJkRdUjhkjjTkcvPx86l4WK7iV12YwHiwqU0nmr6XjMg6F2RvpdAZjbE8wb5Nx03nnnYdDAgc6DYp7n0t85RwjB2LFj1S8kEql2iWMNw8C9985wqtIMVfsPTrAvli/HnDlz1L7gIUzWrAwD3JnVZPxvvvlmlJWW8j4wpOcJCCixmd80TcyYMV30idM+AvHNBsZglW1a+875+fvTT+Prr78WDZL7k/W1T/CMmdDU7HLwe4E8e6HldQsngbqIJhwKczWF+RIZgwqRYh8v+uQTvPHmG9y/bmeC2uKf7YTA6v7hhRegf/9+ip6u7BDHd3ygGDfubmdQOVQjEv2kxvrRmRl06NAev/nNbwGpHurgRSWVhlKKR/7fI9iw4RvleYMQO4eICnuGgOCXv7rF19fjLcvCfffPUAUSS+PmlEhttfpZD/C98wIBitBLC8wwE9JaMCXrHqoqEYqKwLp71KWj0LMn24Zc+MghzSYsWW3s2LEeTChJfwei0SimTZ+m4SV5i6SgwsKF/8Wbb77t1EJ4cEjOCeIIyy4jyU3KF4hL+N9xx532t7iI9E64JWksFsMfnU22OAuy2UfavQIAOnbqiF/96hZf9HnowQex8duNSC2CVZ1Gxh9wC3Av/N1xIZWPZKM9H5DzAWAoGHv0l24TpHMDaB3GmFpm4FA4jPHV40W3K0seiRgEhODNt97Chx8ukN5DQQz23S3VoB49ejR6HtGTR5E9YwrOGBhz1xjleeb3JsyXrwjIFHO+YhARdO/eHTfeeCN/t5w8p+yzSSnu/9392LZ9myYsbea3pN0rAII77rgL0Wgko+ZiB/MeVIhJYOv/qR5muFJpBGTCX3EAeHgJtdWzOYf9qwKlmOLUXclEj9n+bbGonsDZT156/LwR56Nr127uztOkKyEEE8aP53MMu4e7HiUoLi7G1KlTBLOxVGd30/Haa6/hI21vf/7hD12CaSKRKRAWX5UlbpgwcYJgflliUlWNqK2txWOPPsr7x76NgBgElmkpbe7Z4whce921vtT2+++bYQfzBFKSz9dpvybQdfoSP/h7qTj58HemgPzEAVJ0gJcGIPUnoM0Aup/c1oGFpDWIgbFj7+bXeAYnmJEsJOWsmTPx+Refa3534ixyp8q7rvvZdejQvoMk6QXzEw2pasdDw+jGIskpCSq7Ufk5Kg1x4Ni+x2L0ZaP5A8yzJbaQEXdPmTIZe/fu1foLPJAmr6mtnlgNeev1VFBTU4Mnn3pS6RPxFReqCCTZS+NWeXzgn4Y/vHgr15CXAUBSTGF60MjGX1307Ep1kKZMIeTtEyeceCL6HnssQAADjk+ayB4aoTpNcQJkMjFtHdn+Si2DiooKTKieoFCV29Yarn//+9NY9sUXmkojWIBpNVIcSFMBCQ+6yfhPvWeaxghSn0getM2bN+Ppv/1NncGcuID6xRqKfv3645JLLvVFwylTJqOutlaqkkAegKk3v9V43Qf+Rgb+yDfkZ0WYw1tsMMh6nkv9pUxOURGxJYKPOD+xqZ85v0Fx6ahRYGnOVO442RtECJ76y5NYu3YNf56v7pK3OXHaceuvbkGZs7e/XZVKIc4EloV77pmmDnAm/ana9lT4WNQCLKrgP2TIEJzrbLKlv5+vUXb+Hj9+PJqaGsX7mOuJcoR4H0+Zco9zTIWR7gGbN27Es88+w+MG8mzpwgcas8oS3wf+cgQ8JX9o13MNeTGCU6lAOpLc7pONXMhSJNX2eraX5sofX8n1dGZwsc6SZ5aHHnxIvJgKHVlkW9qXO3TogNtvv0M0Ts4fYsznqEN/evhBrFu3zht57q2BSwIqtq5F+Q7OrMPunT6d4ytmAabOiZ5ZtWoVXnjxeVcwEVz6CzROO+10nHnGGdyFap/31jOqJ6gRcvlDhm7Xv+YGJVniT6nKLxp/pDvOFeQlEswRoWrp6QWistPTW9XgFUswZMgQlJaVMmXGYX43cV966SWsWrXKVQWV9sJkcOeddyJaEHUaI2V5ytmLhCDWHMMDDzygNFrNEZLctLLTQxrhesQXAM4bMQInnngSnw2cZoAytwoVnp+7774biXhC7XOi9qf9PME990wT7XT1pICvv16Bl176l9pPYCkI1C3RdKOWirhEJvzlx1N5gVLZjLmEnKtA4YLUuUBKvodzXBSxUk6BXpu7ss4bPvwszqAid8wJ+Uv5N089+aTSPkKYNFfZoHuP7rjpFzdJwoz59MS8zVSM6TPuxbat23h7mG
26922LiNWX7pVk4HMa9987gcQ+iSV0+C1CKxYs/xWuvvapWwPJymJroPDfivPMxcNBAJe0j1V5E48eOU5c6+qCHHsnPBv9oiCq5Pzp/GBClASAU9dmZWUDuB0Bpe2ED6D+oNgEB0LHcSt2hkuhgswUTK2fqSW+OCJT3oayvr8eCBR/IFARAeGoApF/1uGqwXR3EuwjzZnJS1tbW4s8P/1lFmohvmjEc0kVBRV6+eP+loy5Fr969lNVVaj8QfjzmrjEiEVBxC6u7ZkQiEa5Suex0DT5Z9DHeevtNxQXDvF5p9/WR6vCLP7vetXVS4QWFRzx+kbL2uWbX3A+AaFmX1EaNNK2z35CuqTvItRGWMx+WlZfjuH79VHccI5kU+p85axaaYzHBaLIHQ7KaDzv8MFx55ZX8NNeVmf0htX3CxAnc7QiJKbwInhak2woLCzF92nSBu2S/qFoHxdtvv4MPFnygXOBS3WkT69xRo0bhiJ49Be4CcW3gAOPHj3W2JSSKGpvOJ5+J4TPBSV1VXpB5xAsipZ39VZwF5HwARMo6U4aQIZWGdo79LhuYoZdlcDq3zzF9hD+fOXw4w4jenD/vPc2pzK0vpb6rrvqJsEuIJi0heG3L1i34y1N/EQMKUmzAs7kqgxCwbFMV36uvuQaHOXtxiliG1AY+cAmqWV6+ZpfI7wOlKC4qwuQpU7m7l02eesQcAN566w189OFH4AKEKWKa4Z0tw3vhz8qIYdNe5gUDovT6Rcq6+B9dPiH3blCKfyvTmvST7QJ2fFQVcOUgM6tXdOveVfLnC6+PMAXsflry2WcQMl22QEVdBQUFuPnmm2WqcUnJP+npCMa7x45FU1OTqI8Zh767RmYa+7isrBRTpkzRYkXsurADCCGYPWs2lixZotVKpPoEjldffQ06derE65K8s7wNzB06aeJE0Td2lYr6KbdMlNTjuk/8QfGbM5M4skqzEXUVSD5nP/jvbPjED+R+QUwkMj3VAIBUysdjzwaGHZlU/WxMyjAVCEwyUXTr1l2SepCkGzhR44kE1qxZK71JdjGIuk497VRUVlZKjZJ8+RIB1qxeg1n/nMmNVDb1EGJ4tzelDqwyzC9u+iUqKio0VdHdS5RSTJkySRoc0roA+X2gKC8vR/WEieCxAacekdYtBvfMfz6HZcs+57XJ+Lld0OoXbBQ/pw/8GQw70sR1J7qNZpeAlGYFQmzeyjW/5nwAdLj4hYWF7btwtUf+haQy5CAXIkA0BDxxGXDXWSZCUnJIKq/CEUf0VIxfiV+5Prx65UqY7BNM8pSueS0GDRrsVmGoKv1BgPHV1Ugk4owd/SnJmsRkXhrGwm2r2mLcuHGu9wsvjZDejz32GFavXuWyqeyZUF3BdtNNN6OsvIzjLpiUDS5Ry/RpU2VPvwh48Tqpdl3gkz3+FFcNTuLRUSr9UzG8fK6wfRd0uPiFhcgx5CUduqDj4CWJ7Rv7a25d26csdYtBZD8z8POTgTOOMPHcZ8B/NwBrdgBJGnJJkcO7drMJz/LxISQ/M2BXrVrliivIywQZnHTiiSKPSFo/wA1fCuzZsxf/+ffLqttb8VGzGtX0bXVCo9pV4Pbbb0dRYSFP8BOLbYQ9QylFIpHEfffN0FjNvUQTANq1a4877rqL3WLvIAE4a4hFU+01BH/GWj2YJzVcz/2RnHCColq6p45/cdRCpzKK03oAowcAR7VLTX/WZl67M/tSAhR2PH4xsBG5BrLvVbhhz6ujj6hdMnM1jbsHgM6AGRsod4hHYCRdtqFXZO0/y9Qd9q59aicKiiuUGcKQDEQCYM0Hf8WbD/+MVxcNAeccDRAjPT7y6z/eAGytE+cq2h2O0X9aA7YYh+dBsQ9EUKEzL395Glovm8QZhkgvyBb/tJDmeTmO4Jee2d6fCowoUNZ/dM+K82euyfLRzHXnukIAqDh/5ppWfUYu8vL6KFa/5iXy/EEKhEjTpqxO8XsNqTSc5wxpitXCBgWFxYgUlauGoaQmMcbaueZjRcXoUAaEQpnxYcc1jcC2OlWNO+FHE2CwjbLk90pcQ0CQaK7HklceBPNQ6u/ICn+p9KNzK14ZDUc/9MwJ/QnQqs/IRflgfiCPWyNGjILzwyXhHVZDUkx5EGoQpON0EkQuPSVIGukm5cTxe3mgSz6v18umXofpmmt3KtK3okirR6tDb++K7eJ+CqDd4b1xxGnXclUqlfObgmL5nClort8N0wKiYQ+hng3+WYJMHwLvCcIP/vtCf6NVGBGj4PyWYZAZ8rY9etmFz+1sdfQl02QJLoe3vULdBpVKdk86I1qTgPp1IpV6Qh4Ax4YQZp1s18o2gOEoqex6wvT2U3vht70W2N0gPKYEwAmjp/H6+C5wUoSVRbjj9Tux7I3HAQokkqLucAvxz1ZiK3UwHOGNux/6Zkt/A0Croy+aVnbhczvzxad53Ry3/ILZ4/e8POr8pqXPD1A4KIXR43VdSdvRRIxLolB3NiozVhmo+edUMYDthe5UvMph2PL2RyrP1cdS7FGjtZ9SW/ob0vnOR52AzgMvsq+zf1n6g2zREmDp7HFIxhtgGLb0N5wRQlqIv5eEliVwOvL4kpQtoG+660X9Rn1WfsHz4/28uqWQ992hyy+cPZgkRpjNX77RIquIAHzPHkrtYzm9lsgDgqheBa/7QwRgO54nY41ortmEotZdINKqbY6R1aF2vU5V6LStFqhtslUhV2Ol9qzdCdQ1qzQ+/or71XshOJY/TggadqzDinnP8Gcjkk6/L/jL97PjlDv3SfShBJnplYm+WdC/8JhzUXbh7MF58tNwyO8XYgAQQqyyrl0rCo85123g6EZbih+fsg1R+jLyDFGyd1W2UtWAnasXCCLLEpjn1gDt+45AeVVn5bklm4DmpNZWCafdjcAXW4XuTwB0H3g22h59muJVUfJ5pH5bMvMuWGbcVkEMoDgqDO8W46/dr5zLdN0PveR7/PxS1FfY51yUde1aQQjJwycx9vMAAAAy+PG9ZSNfDxUNGP15OKR5eIjU4fI5po8CqXVOonktfHgVulSof+9e53wUTzJqdec6AdD/gt8qz9XFgPlrgC17AcsS5y0L+Hob8NE6qS0GUFBYiOOv/KNdG/PFa+9g79/77edYu2gOr7O0wB4EucDf5WHL0P/78gsZopSPU70/ZADFA0Z/XnbJ6yEy+PG9+4M399sHMpzR3K/x9ctnxFfMvos2mv7cAjJjZphCPb0Kmj1RVaJOqjtXfiStcZWMXa4G2YGgnmffig2LXsDGLxfwZ+NJYNE3NuEqioBYEmhKAKblejUGjbwbpZ16OZFgae8iLTpNKcXSmXcClsmf71gqmHtf8de9YnJ9rjgLpGCUV//r4KHypFW5JPqT4jAKjx51X+GIf44B
26922ZmbNXy2F/CpYqfrpvR+3jcXwXnz5c31pPM2NWbbOD30sC/jX5+IBAoKLf/clWrU/0v1KNiCcipOxOrxzz+nYtu5zZAPHnftz9P/pI7wRnE+03HsA2LXyfbw29QwFofP7AEWR3OCfjUquqP3ZRq98AokC0T6Xf1FQQM4gZ+TP25Ouzw4Y0HnXHBlrir9qbZrX09yxKSUFs7CZMyJLYasnm8WmB+hz9g047sqHoS9Al3NyWDpAsrkenz1zE76e/6ybK7T2h6OFGDRqAo4ccRcXrerWtu5vBrw79WRsXb2IV1lRBJx1JLjmlAv8W2yjZmsE6yA9H6rqjFDn01dGiwouIEP/ugoHCA7oAJAh8e7Vp9Bk8h4arx2G+o2w6r4Frd8JmkDLRJbXdQd2NwDvrhaXi0rb4MI/fINQpNAV8JG3NuffBAbB7lXz8fVrv8eGpW/CjDcrryssaY0eJ43E0eeNQXG7Hs7j8qaB4El7cvO2LfkX3vnDjxSijOgFlBTkFn8O2UwZzHDXVaQMryNRgJRUwig5DKTkMNCC0nkhRMZFzvnbAnwH4DszALKFwgHD/tn82dzRQFugtBIIhx1/qbPUsGYjgDoUHNXvB7GVS+QFtCEH7x8C4IrF1Af+eOudt/zyZNkVShRqS7ODVJlFKZZ8+RW2bd/RSAzD6NapU+HRRx7Bxomq8gBQJb99EwVFXW0dfvDDC37z3wULNkvV7wDwro57p06dijdvjjcAu4HoYUBJqVDwQYBkAqjdDmAXio4/d2vTojc6Hmh6fVdhv3iB8gG0vsb5EkWj49gn9gAwQvYvVA4ghFB51X3ao6aD9zr55PTqux9esGix/Ye8wsqVRyA+8sxmiAF9jsF5ZwwtHjH0tMJeRx0heNFL8lJIao9TG6X4/SOPvqkxPwB8Bg8hVVPVYwqwG0AZUFwi8CaG/c54EsAeAIC15ZvTDzStvstw0A6Aitqt79lOrEYgaUHk+xo2I5SWAYigcdG8vq3adddXU5sAvgDQxE40NTWZ902fNqG5qTnlQm4bbIelPPUz6c6YXlZtlOelASUvNXxz/gJzxsTxf9XauBJADbRhVF5+eOumpct+C4SA4iog5Mx8DH/LApprAFgoHHT2x7GNXx0w/fpggIN2AGzbtq2haNCZtjsm1uDkODuzAAnZjIEKAAbMLj30lUQmbFVokXzyjVdeXnnbnWOeiLP9djSQP8jH9+qHYHJZ/5UjyZDO6du7fLBoMW7+2dU3mKYpB33qASyDh/SP9ej5sD1uy4GiVo7a50RLKAGa4wBqAYRBtn018kDT6bsOoQPdgH1qfEnFt+buLVcABIiWq6FSQoBwFIjVIrll94DSThV/jtfVNUqPWwAaALSCPVIAAJ998vG6nXvq954z/MyBhmFA/gSqYuzJXiI5hYKKlIpUtik7+eGixbjuytE/X79+fZ2G2gewuVyJhBZ27921+auvngIMoLQzEI7Yg52936RAwzYATSgYMPT55pVLnzrQNPquw0E9AMzdWzYAVdVAHUDLgEgYMMJOaDRkG8YNCQCNMI458eLkplUPS49T2EbwVgCdABSyC4sXLVy7bffemhMGDx7UqlWrlG5Z/XNJcl6/rSgxM1ebBgjwxrwF5o3XXHXjunXratXasRzAergtCBLpddLa5MZ1RUAboKzCwdW5agFobATMHQAK0Spcf1qstrYJAaSFg1YFciBecFzvBwALSOyxmYDCCV86qkHr9gAiaF74/lEFvU6+QH/eeWIubL2Bw1OPPvzO2WededMLr71Zby/yFtf45mvS1ih8ra8S3GLqkvg4dWNjI6be//t3Lj73zJ94MP8K2LaJC4p6n3RZ03/ntQYKgDZVNvOD2LhasH/xXQCSKOg3+MHajRt3H2jiHAxw0LpBGVRUVFTs2ZOoAUygoDtQ3MpWhUJOJphlAbt3A8ldQGl7dCrd22rz5s2NWjVR2MLgTACl+jt+dceYS/7n6qtH9zqqZ8o9gMQqLvCF9MplSvHSm+82/vmBe6fMnzt3vUcNKwAsddqhqD5FXY7q3LSxcSPQABR3AkpKxAC3TCCZBGrrAfMbABWoqkqW7tixo/5A0+ZggINaBQKA5ubm5oKBZ/Q3t6zrBRNAQanjCjWEflxYDDQ0AfG9SPYe3De5adU/tWqYa3QDgHYAlETnjz/8YMUTjz364sZt27bFEO59dI9uUcMQH5rgATIWMIJQhWpqavDXmS+uvOM3t0z/w4zpz2xYv36PBxpfAvgctkqmb5JUkDxswG7s+BZAOdCmUtL7YScemSbQvAVADNFj+91Vt+7L9w40XQ4WOOhnAAAo69KlTe3Gxl1AHAgfBpSWApGIyAcGBZpjQM23sFWEvr+ILZ37qEdVIftm9ALQBylUxKOPPrr1qWec1b/7UUf369atR68O7aoqTIuCUkqTVtLasnXbjnWrVn229NNPFs19+/WvGxoaUu381QDgYwC7nPcqkr9Tp07FNd1P2tW0YH4hUAS06+J4uQzh8kwmgZrdALYAnfsCmxZGACQRgC/4XgwAAIgeN2xi/POFk4BWQFk3ewBEIg7DODp4ba3jJUmi6NjeVzYtm/+sR1URAAnYnqETALTOU5NXw1Z5CmAPBAU6depUvLvbyQ3NH74PIApUdgGiUcH8pmn/GhuBpg0AmhE+otcpyTVLPjzQtDiY4HszAABEUdE/hj1rAVQBrauACFtF4mBqUaB2L9CwHYCJgj5HXRRbPv9lj7qYakgBdIc9I2T+sG5msAB8A2AVgDrYg023R9CmTZuy3d1O2YvFiwAUAm07A9EIOLmY2hOPAbWbANSi4PgzFscW/XvQgSbCwQbfpwGA8BH9hyTXrFwARIGCbraxGHLcoSynmVJbZWjaBYCg8JjOZzV/+dE7KaoMQaglHQF0he0yzXYdRT2Atc6POM97GqklHXpW1Vf23I7lywAUAu062f5+Riqm9pgmULMNwC6g9HBUFW4JDN8WwEFvBMtg1Wz9tmDA8C7m1m8GwowBYWcDH8PJf2MxgsIiIGkAyUYkd9T/tGDAyTXm1tUfe1TJfJoR2GrKNwC+BvAtgJ3OORO2O7XR+TUA2AvboF4BO59nBYAYbG9Tg3O/DkZBv+E/b1pbPw/bNwMoAtp3sZnfCAv3rmXZM8DeWoBuB0AQ7VJ6XN2mdbnfNu0QgO/VDOBABEefE8fXiwCUARVdbFWIzQKGlDG6uwZo2gnAQtGQEz4tWfXVsB07lmeSomHYAyIJ21bwboOtMoVhR3TT1lnU5ajOtNuAVc0fLCgCQoBRCrRr77hyDWkVf9L+NdQDsY0AYig4dvBvY8ve+f2B7vSDFb6PAwDFbbt2bNxVtBl0J4A2QJuO9gAIOe7RUMjxophAYwNQsxWACZS0RuERlT9tXvrWP6B5ZPIE0cKB593evHjVNO6JLW0HlJXark4AfPtr0/H3NzQAzd8CiCM66OTn4p++csWB7u+DGb6XAwAAoof36xP/ZvcXtrZRBVRW2YPAcIJkIGITnXgc2L4NoI5GM3gwCpp3Xhj7Yu5rcPvl9xmqqvqU7D28223xldunoG4ngBAQKgEqK4FoAZSImmUBSdMerPX1QPMmADEUnHDqB7GPXxqK/TNQv7fwvR0AAFBw1Cnnx1auesU2daqANm3FTMAS5wDwVSsNDY5hGQdgAV17oLBt8QSybcVfmjau3LSPzYkW9B46lLTueG/zh4sH2RqUAaDYDm4Vt7LvMoit8jDJb5n2tnC1dUBiM4BmFJw49KvYwheORR4G56EG3+sBAAAFvU69MLZi3cs2h1cCbdoDYcczJG86BNjSFrDjBbV7YKvvJgAK9OuHwkLytNW491+hXVsXN21evg22YesFoeKuvdtZRZVHW61an24Ulf26+YNPWttM76Quh8qAigqgqEi8n60XsBwbJWnaq7t274Gds5dA4fFDZjcveulyBJI/J/C9HwAAED7y+NOTq3bMsyV7GVDe2Q4qhQwpTiDvdU5tKdzcBNTVA/E62AOBZZ05QdvitkC3DkBBBCiIArUNwLfbYas1cheHYEv7Anv5YkmpPQjZlnfyoknTsqW+admSf88m2DZ0HNF+/SfEl74x9UD35/cJDokBAADR7gOPi28xlqJ5K4ACoLgL0MpJnOM7SjkMyWMGEGuCGxttW6G5GUg2w5bmptSF8spfA0DY2fMjChQXAwUFdmSa3avsWQjbyAWcAWDZs1DMzu8BaYvwkUVnJVemjFcE0EI4ZAYAAFRUdKto7D1kffyj+eW2h7ISqKi0mZSpRKxXtIUukL7Ly/+2nIgsy482iJOIR1TVytCYXa7XdAaRaTrLGZuB2m2wA8UmokNO21v4zfweQXpzfuCQGgAOGNEBF9wT/2z53TbXRoFwO6Ci3F5GKW90ybYx4+nN2jYPgPsaB8bk2j3UWb8MiEFkWXZaw57dsJcBJwCUI3Jch5sSn7/5GAJ9P29wKA4AAEBRpz6HW9
269220GfB778H1nNigAwpW2YcpcpbqRLB9zsDS+J9J+gmz9r1Qy1yZfwN4M1O6GHTxOArAQPf74l8vWvXfVzp076xBAXuGQHQAMoseccVG8NvoSNq6EbawWwDaUK2yfvEFE4MwIST1GhK3AvTjOJWo5apK057Nlib/jcdu4TtbCNnDtewpOPP4DsuXTq5u/WbnWR9MDyAEc8gPAAaOg9xkjYq06vYJP/gvhtSkEUGIbsYUFTlIaxMwAuGcE+SvussRvbgIamwCrHmK9uwmgFNHjj/pnZP0XtzXsWL71QHfEoQbBANAg2n3gcag68s74ss1XoslONhO77kcAFNrenXBYzS/iKQuWPQMkEgCNww4VsKXHJq8vOuT4VaRm022xr95+C97JcQHsBwgGQGowIj2GDEKbTleQwrIb4x98Vmgne7LBAKnUNyVnsQLiHBtA3+MQKaJP0rrNzyRXvL8QQPOBRjCAYABkA6GC7oN7orCip1lQ1NuIthqAUKQXIaFSahglAFoBdC81k2uRjK0nVmIDad77Canbsbz5m2XfInXmaAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAaSD/w9pjtkiChl2zQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wNy0xNlQxODowMjo1MyswMzowMDrRFi8AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDctMTZUMTg6MDI6NTMrMDM6MDBLjK6TAAAAKHRFWHRpY2M6Y29weXJpZ2h0AENvcHlyaWdodCBBcHBsZSBJbmMuLCAyMDE3v/MY0AAAABp0RVh0aWNjOmRlc2NyaXB0aW9uAERpc3BsYXkgUDOPebu8AAAAG3RFWHRpY2M6bWFudWZhY3R1cmVyAERpc3BsYXkgUDMy4RxJAAAAFHRFWHRpY2M6bW9kZWwARGlzcGxheSBQM95n/9EAAAAASUVORK5CYII=" 26923 })), /*#__PURE__*/react_default.a.createElement("a", { 26924 className: WelcomeBackLogo_default.a.logo, 26925 onClick: () => { 26926 goHome(); 26927 } 26928 }, "screen.link")); 26929} 26930/* harmony default export */ var WelcomeBack_WelcomeBackLogo_WelcomeBackLogo = (Object(react_router["h" /* withRouter */])(WelcomeBackLogo_WelcomeBackLogo)); 26931// EXTERNAL MODULE: ./src/components/WelcomeBack/StepsList/StepsList.css 26932var StepsList = __webpack_require__("0msA"); 26933var StepsList_default = /*#__PURE__*/__webpack_require__.n(StepsList); 26934 26935// CONCATENATED MODULE: ./src/components/WelcomeBack/StepsList/StepsList.js 26936 26937 26938 26939 26940function StepsList_StepsList(props) { 26941 // let [pointEventsNone, setPointEventsNone] = useState(false); 26942 26943 return /*#__PURE__*/react_default.a.createElement("div", { 26944 className: StepsList_default.a.stepsListContaier 26945 }, /*#__PURE__*/react_default.a.createElement("div", { 26946 className: StepsList_default.a.logoContainer 26947 }, /*#__PURE__*/react_default.a.createElement(WelcomeBack_WelcomeBackLogo_WelcomeBackLogo, null)), /*#__PURE__*/react_default.a.createElement("div", { 26948 className: StepsList_default.a.stepsContainer 26949 }, /*#__PURE__*/react_default.a.createElement("div", { 26950 className: [StepsList_default.a.step, props.currentStep == 1 ? "" : StepsList_default.a.stepDisabled].join(' ') 26951 }, /*#__PURE__*/react_default.a.createElement("span", { 26952 className: StepsList_default.a.stepNumber 26953 }, "1"), /*#__PURE__*/react_default.a.createElement("span", { 26954 className: StepsList_default.a.stepTitle 26955 }, "Welcome")), /*#__PURE__*/react_default.a.createElement("div", { 26956 className: [StepsList_default.a.step, props.currentStep == 2 ? "" : StepsList_default.a.stepDisabled].join(' ') 26957 }, /*#__PURE__*/react_default.a.createElement("span", { 26958 className: StepsList_default.a.stepNumber 26959 }, "2"), /*#__PURE__*/react_default.a.createElement("span", { 26960 className: StepsList_default.a.stepTitle 26961 }, "Set your account")), /*#__PURE__*/react_default.a.createElement("div", { 26962 className: [StepsList_default.a.step, props.currentStep == 3 ? "" : StepsList_default.a.stepDisabled].join(' ') 26963 }, /*#__PURE__*/react_default.a.createElement("span", { 26964 className: StepsList_default.a.stepNumber 26965 }, "3"), /*#__PURE__*/react_default.a.createElement("span", { 26966 className: StepsList_default.a.stepTitle 26967 }, "Install ScrenClip")), /*#__PURE__*/react_default.a.createElement("div", { 26968 className: [StepsList_default.a.step, props.currentStep == 4 ? "" : StepsList_default.a.stepDisabled].join(' ') 26969 }, /*#__PURE__*/react_default.a.createElement("span", { 26970 className: StepsList_default.a.stepNumber 26971 }, "4"), /*#__PURE__*/react_default.a.createElement("span", { 26972 className: StepsList_default.a.stepTitle 26973 }, "That's all!")))); 26974} 26975/* harmony default export */ var WelcomeBack_StepsList_StepsList = (Object(react_router["h" /* withRouter */])(StepsList_StepsList)); 26976// EXTERNAL MODULE: ./src/components/WelcomeBack/Welcome/Welcome.css 26977var Welcome = __webpack_require__("XLB/"); 26978var Welcome_default = /*#__PURE__*/__webpack_require__.n(Welcome); 26979 26980// CONCATENATED MODULE: ./src/components/WelcomeBack/Welcome/Welcome.js 26981 26982 26983 26984function Welcome_Welcome(props) { 26985 // let [pointEventsNone, setPointEventsNone] = useState(false); 26986 26987 return /*#__PURE__*/react_default.a.createElement("div", { 26988 className: Welcome_default.a.mainContainer 26989 }, /*#__PURE__*/react_default.a.createElement("div", { 26990 className: Welcome_default.a.topContainer 26991 }, /*#__PURE__*/react_default.a.createElement("div", { 26992 className: Welcome_default.a.logos 26993 }), /*#__PURE__*/react_default.a.createElement("div", { 26994 className: Welcome_default.a.title 26995 }, "Welcome Back")), /*#__PURE__*/react_default.a.createElement("div", { 26996 className: Welcome_default.a.content 26997 }, "We invited you because once you used an app called ", /*#__PURE__*/react_default.a.createElement("span", { 26998 onClick: () => window.open("https://www.clipular.com/welcome", "_blank"), 26999 className: Welcome_default.a.clipularUnderline 27000 }, "Clipular"), ", and maybe you still do!"), /*#__PURE__*/react_default.a.createElement("div", { 27001 className: Welcome_default.a.content 27002 }, "We will guide you through the ", /*#__PURE__*/react_default.a.createElement("span", { 27003 className: Welcome_default.a.bold 27004 }, "ScreenClip"), " onboarding experience step by step.", /*#__PURE__*/react_default.a.createElement("br", null), /*#__PURE__*/react_default.a.createElement("br", null), "Now please just click \u201CNext\u201D."), /*#__PURE__*/react_default.a.createElement(NextButton_NextButton, { 27005 nextButtonAction: props.nextButtonAction 27006 })); 27007} 27008// EXTERNAL MODULE: ./src/components/WelcomeBack/InstallScrenClip/InstallScrenClip.css 27009var InstallScrenClip = __webpack_require__("qA9u"); 27010var InstallScrenClip_default = /*#__PURE__*/__webpack_require__.n(InstallScrenClip); 27011 27012// CONCATENATED MODULE: ./src/components/WelcomeBack/InstallScrenClip/InstallScrenClip.js 27013 27014 27015 27016 27017 27018function InstallScrenClip_InstallScrenClip(props) { 27019 let [isScreenClipIsntalled, setIsScreenClipIsntalled] = Object(react["useState"])(1); 27020 // let [isMobileOrTablet, setIsMobileOrTablet] = useState(1); 27021 27022 Object(react["useEffect"])(() => { 27023 Object(utils["o" /* isInstalled */])(setIsScreenClipIsntalled); 27024 // setIsScreenClipIsntalled(response); 27025 }, []); 27026 // useEffect(() => { 27027 // let check = false;
27028 // (function(a){ 27029 // if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))){ 27030 // check = true; 27031 27032 // } 27033 // }) 27034 // (navigator.userAgent||navigator.vendor||window.opera); 27035 // setIsMobileOrTablet(check); 27036 // }, []) 27037 27038 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 27039 className: InstallScrenClip_default.a.installScreenClipContainer 27040 }, /*#__PURE__*/react_default.a.createElement("div", { 27041 className: InstallScrenClip_default.a.topContainer 27042 }, /*#__PURE__*/react_default.a.createElement("div", { 27043 className: InstallScrenClip_default.a.screenClipLogo 27044 }), /*#__PURE__*/react_default.a.createElement("div", { 27045 className: InstallScrenClip_default.a.title 27046 }, "Browser Extension.")), /*#__PURE__*/react_default.a.createElement("div", { 27047 className: InstallScrenClip_default.a.content 27048 }, "This extension will allow you to take screenshots and automatically upload them to ", /*#__PURE__*/react_default.a.createElement("span", { 27049 className: InstallScrenClip_default.a.bold 27050 }, "ScrenLink"), "; just as you did before with Clipular Extension."), /*#__PURE__*/react_default.a.createElement("button", { 27051 onClick: () => window.open("https://chrome.google.com/webstore/detail/screenclip-share-visual-i/agfmhdblakkkljpdgpamkbfblikonemn", "_blank"), 27052 className: InstallScrenClip_default.a.getScreenClip 27053 }, "Get ScreenClip"), isScreenClipIsntalled && /*#__PURE__*/react_default.a.createElement("div", { 27054 className: InstallScrenClip_default.a.extensionInstalled 27055 }, "\u2705 Extension Installed!"), /*#__PURE__*/react_default.a.createElement("div", { 27056 className: InstallScrenClip_default.a.content 27057 }, "If you still have the Clipular Extension please disable it.")), /*#__PURE__*/react_default.a.createElement(BackButton_BackButton, { 27058 backButtonAction: props.backButtonAction 27059 }), /*#__PURE__*/react_default.a.createElement(NextButton_NextButton, { 27060 nextButtonAction: props.nextButtonAction 27061 })); 27062} 27063// EXTERNAL MODULE: ./src/screens/WelcomeBack/WelcomeBack.css 27064var WelcomeBack = __webpack_require__("WLdm"); 27065var WelcomeBack_default = /*#__PURE__*/__webpack_require__.n(WelcomeBack); 27066 27067// EXTERNAL MODULE: ./src/components/WelcomeBack/ConnectGoogleDrive/ConnectGoogleDrive.css 27068var ConnectGoogleDrive = __webpack_require__("p4vG"); 27069var ConnectGoogleDrive_default = /*#__PURE__*/__webpack_require__.n(ConnectGoogleDrive); 27070 27071// CONCATENATED MODULE: ./src/components/WelcomeBack/ConnectGoogleDrive/ConnectGoogleDrive.js 27072 27073 27074 27075 27076 27077 27078 27079 27080 27081 27082 27083function ConnectGoogleDrive_ConnectGoogleDrive(props) { 27084 let { 27085 currentUser 27086 }
27086 = props; 27087 const [isConnected, setIsConnected] = Object(react["useState"])(!!currentUser.cloudConnectProvider); 27088 const [goolgeDriveEamilAddress, setGoogleDriveEmailAddress] = Object(react["useState"])(); 27089 const [loader, setLoader] = Object(react["useState"])(null); 27090 const urlParams = objectifyParameters(); 27091 Object(react["useEffect"])(() => { 27092 index_cjs_default.a.auth().onAuthStateChanged(async function (user) { 27093 if (!isConnected && urlParams.code && urlParams.code.length > 0) { 27094 createAccessTokenUsingApi(currentUser, urlParams, user.ya).then(tokens => { 27095 setLoader('loader'); 27096 setGoogleDriveEmailAddress(tokens.emailAddress); 27097 return props.Auth.auth().currentUser.getIdToken().then(token => { 27098 console.log(`${constants["a" /* default */].functionsApiUrl}/users/${currentUser.userId}/cloudConnect/google`); 27099 // set cloudConnectProvider for user and init gdrive folder 27100 return axios_default()({ 27101 method: 'post', 27102 url: `${constants["a" /* default */].functionsApiUrl}/users/${currentUser.userId}/cloudConnect/google`, 27103 headers: { 27104 authorization: `Bearer ${token}` 27105 } 27106 }); 27107 }).then(httpResponse => { 27108 setIsConnected(true); 27109 setLoader(null); 27110 }).catch(e => { 27111 console.log(e); 27112 setLoader(null); 27113 }); 27114 }); 27115 } 27116 }); 27117 }, []); 27118 function linkWithGoogleDrive() { 27119 window.location.href = constants["a" /* default */].googleDriveAuthHrefFromWelcomeBack; 27120 } 27121 function createAccessTokenUsingApi(user, params, token) { 27122 return new Promise((resolve, reject) => { 27123 const code = params.code; 27124 const userId = user.userId; 27125 return axios_default()({ 27126 method: 'post', 27127 url: `${constants["a" /* default */].functionsApiUrl}/users/${userId}/cloudConnect/google/tokens?code=${code}`, 27128 headers: { 27129 'Authorization': `Bearer ${token}` 27130 }, 27131 data: { 27132 from: 'welcome-back' 27133 } 27134 }).then(httpResponse => { 27135 console.log(httpResponse); 27136 const tokens = httpResponse.data; 27137 // const accessToken = tokens.access_token; 27138 return resolve(tokens); 27139 }).catch(error => { 27140 /*handleError('Something went wrong. Go back to account or dashboard to restart the linking process.');*/ 27141 console.log(error); 27142 return reject(error); 27143 }); 27144 }); 27145 } 27146 function objectifyParameters() { 27147 const url = window.location.href; 27148 const params = url.slice(url.indexOf('?') + 1); 27149 const paramsArray = params.split('&'); 27150 const paramsObject = {}; 27151 for (let i = 0; i < paramsArray.length; i++) { 27152 let paramPair = paramsArray[i].split('='); 27153 let key = paramPair[0]; 27154 let value = paramPair[1]; 27155 paramsObject[key] = value; 27156 } 27157 return paramsObject; 27158 } 27159 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 27160 className: ConnectGoogleDrive_default.a.connectGoogleDriveIcon 27161 }), /*#__PURE__*/react_default.a.createElement("div", { 27162 className: ConnectGoogleDrive_default.a.title 27163 }, "Connect to Google Drive."), /*#__PURE__*/react_default.a.createElement("div", { 27164 className: ConnectGoogleDrive_default.a.content 27165 }, "Connect your Google Drive account to store all your clips without any space or clip-life restrictions."), isConnected ? /*#__PURE__*/react_default.a.createElement("div", { 27166 className: ConnectGoogleDrive_default.a['connected'] 27167 }, "\uD83E\uDD16 connected to\xA0", /*#__PURE__*/react_default.a.createElement("span", { 27168 className: ConnectGoogleDrive_default.a.bold 27169 }, currentUser.cloudConnectTokens ? currentUser.cloudConnectTokens.emailAddress : goolgeDriveEamilAddress), "!") : /*#__PURE__*/react_default.a.createElement("button", { 27170 testid: "LinkWithGoogleDrive", 27171 onClick: () => { 27172 linkWithGoogleDrive(); 27173 }, 27174 className: ConnectGoogleDrive_default.a.connectGoogleDriveButton 27175 }, "Connect to Google Drive"), /*#__PURE__*/react_default.a.createElement("div", null, /*#__PURE__*/react_default.a.createElement(B
27175ackButton_BackButton, { 27176 backButtonAction: props.backButtonAction 27177 }), /*#__PURE__*/react_default.a.createElement(NextButton_NextButton, { 27178 nextButtonAction: props.nextButtonAction, 27179 skipStep: currentUser.cloudConnectTokens || goolgeDriveEamilAddress ? false : true 27180 })), /*#__PURE__*/react_default.a.createElement(Modal["c" /* ModalWindow */], { 27181 show: loader !== null, 27182 loader: true 27183 }, /*#__PURE__*/react_default.a.createElement(Loader["a" /* default */], null))); 27184} 27185let ConnectGoogleDrive_mapStateToProps = state => { 27186 return { 27187 currentUser: state.app.user 27188 }; 27189}; 27190/* harmony default export */ var WelcomeBack_ConnectGoogleDrive_ConnectGoogleDrive = (Object(components_Auth["c" /* withAuth */])(Object(es["b" /* connect */])(ConnectGoogleDrive_mapStateToProps, null, null, { 27191 forwardRef: true 27192})(ConnectGoogleDrive_ConnectGoogleDrive))); 27193// EXTERNAL MODULE: ./src/components/WelcomeBack/ThatIsAll/ThatIsAll.css 27194var ThatIsAll = __webpack_require__("oqvI"); 27195var ThatIsAll_default = /*#__PURE__*/__webpack_require__.n(ThatIsAll); 27196 27197// EXTERNAL MODULE: ./src/components/Checkbox/Checkbox.js 27198var Checkbox = __webpack_require__("NLkX"); 27199 27200// CONCATENATED MODULE: ./src/components/WelcomeBack/ThatIsAll/ThatIsAll.js 27201 27202 27203 27204 27205 27206 27207 27208 27209function ThatIsAll_ThatIsAll(props) { 27210 const [isClipsTransferRequested, setIsClipsTransferRequested] = Object(react["useState"])(false); 27211 function clipsTransferRequested() { 27212 index_cjs_default.a.auth().onAuthStateChanged(async function (user) { 27213 let auth = user.ya; 27214 axios_default()({ 27215 method: 'post', 27216 url: `${constants["a" /* default */].functionsApiUrl}/users/${user.uid}/cloudConnect/google/clipsTransferRequested`, 27217 headers: { 27218 authorization: `Bearer ${user.ya}` 27219 } 27220 }).then(httpResponse => {}).catch(error => { 27221 console.log(error); 27222 }); 27223 }); 27224 } 27225 function goToScreenLink() { 27226 if (isClipsTransferRequested) { 27227 clipsTransferRequested(); 27228 } 27229 props.history.push({ 27230 pathname: '/' 27231 }); 27232 } 27233 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 27234 className: ThatIsAll_default.a.mainContainer 27235 }, /*#__PURE__*/react_default.a.createElement("div", { 27236 className: ThatIsAll_default.a.title 27237 }, "That was smooth! \uD83C\uDFC1"), /*#__PURE__*/react_default.a.createElement("div", { 27238 className: ThatIsAll_default.a.content 27239 }, "Now you can discover all features we have been working on to improve your clipping experience."), /*#__PURE__*/react_default.a.createElement("div", null, /*#__PURE__*/react_default.a.createElement(BackButton_BackButton, { 27240 backButtonAction: props.backButtonAction 27241 }), /*#__PURE__*/react_default.a.createElement("button", { 27242 id: "welcomeBack-done", 27243 onClick: goToScreenLink, 27244 className: ThatIsAll_default.a.goToScreenLink 27245 }, "Go to ScreenClip")))); 27246} 27247/* harmony default export */ var WelcomeBack_ThatIsAll_ThatIsAll = (Object(react_router["h" /* withRouter */])(ThatIsAll_ThatIsAll)); 27248// EXTERNAL MODULE: ./src/components/WelcomeBack/StepsListMobile/StepsListMobile.css 27249var StepsListMobile = __webpack_require__("GCiL"); 27250var StepsListMobile_default = /*#__PURE__*/__webpack_require__.n(StepsListMobile); 27251 27252// CONCATENATED MODULE: ./src/components/WelcomeBack/StepsListMobile/StepsListMobile.js 27253 27254 27255 27256 27257// import { withRouter } from "react-router-dom" 27258 27259 27260function StepsListMobile_StepsListMobile(props) { 27261 // let [pointEventsNone, setPointEventsNone] = useState(false); 27262 27263 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 27264 className: StepsListMobile_default.a.stepsMobileContainer 27265 }, /*#__PURE__*/react_default.a.createElement("div", { 27266 className: [StepsListMobile_default.a.step, props.currentStep != 1 ? "" : StepsListMobile_default.a.stepActivated].join(' ') 27267 }, /*#__PURE__*/react_default.a.createElement("span", { 27268 className: [StepsListMobile_default.a.stepNumber, props.currentStep != 1 ? "" : StepsListMobile_default.a.stepNumberActivated].join(' ') 27269 }, "1")), /*#__PURE__*/react_default.a.createElement("div", { 27270 className: [StepsListMobile_default.a.step, props.currentStep != 2 ? "" : StepsListMobile_default.a.stepActivated].join(' ') 27271 }, /*#__PURE__*/react_default.a.createElement("span", { 27272 className: [StepsListMobile_default.a.stepNumber, props.currentStep != 2 ? "" : StepsListMobile_default.a.stepNumberActivated].join(' ') 27273 }, "2")), /*#__PURE__*/react_default.a.createElement("div", { 27274 className: [StepsListMobile_default.a.step, props.currentStep != 3 ? "" : StepsListMobile_default.a.stepActivated].join(' ') 27275 }, /*#__PURE__*/react_default.a.createElement("span", { 27276 className: [StepsListMobile_default.a.stepNumber, props.currentStep != 3 ? "" : StepsListMobile_default.a.stepNumberActivated].join(' ') 27277 }, "3")), /*#__PURE__*/react_default.a.createElement("div", { 27278 className: [StepsListMobile_default.a.step, StepsListMobile_default.a.step4, props.currentStep != 4 ? "" : StepsListMobile_default.a.stepActivated].join(' ') 27279 }, /*#__PURE__*/react_default.a.createElement("span", { 27280 className: [StepsListMobile_default.a.stepNumber, props.currentStep != 4 ? "" : StepsListMobile_default.a.stepNumberActivated].join(' ') 27281 }, "4")))); 27282} 27283/* harmony default export */ var WelcomeBack_StepsListMobile_StepsListMobile = (StepsListMobile_StepsListMobile); 27284// CONCATENATED MODULE: ./src/screens/WelcomeBack/WelcomeBack.js 27285 27286 27287 27288 27289 27290 27291 27292 27293 27294 27295function WelcomeBack_WelcomeBack(props) { 27296 let [currentStep, setCurrentStep] = Object(react["useState"])(1);
27297 let [mainContentContaierHeight, setMainContentContaierHeight] = Object(react["useState"])(null); 27298 let [mainContentContaierWidth, setMainContentContaierWidth] = Object(react["useState"])(null); 27299 Object(react["useEffect"])(() => { 27300 document.title = 'Welcome Back â ScreenClip'; 27301 27302 //Check if should show step 4, if the current url was redirected from google drive conection 27303 const url = window.location.href; 27304 if (url.indexOf('?') != -1) { 27305 const params = url.slice(url.indexOf('?') + 1); 27306 const paramsArray = params.split('&')[0].split('/'); 27307 const shouldShowStep4 = paramsArray[0].split('=')[1]; 27308 if (shouldShowStep4 == "4") { 27309 setCurrentStep(4); 27310 } 27311 } 27312 }, []); 27313 Object(react["useEffect"])(() => { 27314 if (window.innerWidth < 768) { 27315 setMainContentContaierHeight(window.innerHeight - 82 + "px"); 27316 setMainContentContaierWidth(window.innerWidth - 42 + "px"); 27317 } 27318 if (window.innerWidth >= 768 && window.innerWidth < 992) { 27319 setMainContentContaierHeight(window.innerHeight - 100 + "px"); 27320 setMainContentContaierWidth(window.innerWidth - 68 + "px"); 27321 } 27322 const updateWindowDimensions = () => { 27323 if (window.innerWidth < 768) { 27324 setMainContentContaierHeight(window.innerHeight - 82 + "px"); 27325 setMainContentContaierWidth(window.innerWidth - 42 + "px"); 27326 } 27327 if (window.innerWidth >= 768 && window.innerWidth < 992) { 27328 setMainContentContaierHeight(window.innerHeight - 100 + "px"); 27329 setMainContentContaierWidth(window.innerWidth - 68 + "px"); 27330 } 27331 }; 27332 window.addEventListener("resize", updateWindowDimensions); 27333 return () => window.removeEventListener("resize", updateWindowDimensions); 27334 }, []); 27335 function nextStep() { 27336 setCurrentStep(currentStep + 1); 27337 } 27338 function previousStep() { 27339 setCurrentStep(currentStep - 1); 27340 } 27341 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 27342 className: WelcomeBack_default.a.welcomeBackContaier 27343 }, /*#__PURE__*/react_default.a.createElement("div", { 27344 className: WelcomeBack_default.a.stepsListContaier 27345 }, /*#__PURE__*/react_default.a.createElement(WelcomeBack_StepsList_StepsList, { 27346 currentStep: currentStep 27347 })), /*#__PURE__*/react_default.a.createElement("div", { 27348 className: WelcomeBack_default.a.mainContentContaier, 27349 style: { 27350 height: mainContentContaierHeight 27351 } 27352 }, /*#__PURE__*/react_default.a.createElement("div", { 27353 className: WelcomeBack_default.a.logoContainer 27354 }, /*#__PURE__*/react_default.a.createElement(WelcomeBack_WelcomeBackLogo_WelcomeBackLogo, null)), /*#__PURE__*/react_default.a.createElement("div", { 27355 className: WelcomeBack_default.a.stepsListMobileContaier 27356 }, /*#__PURE__*/react_default.a.createElement(WelcomeBack_StepsListMobile_StepsListMobile, { 27357 currentStep: currentStep 27358 })), currentStep == 1 && /*#__PURE__*/react_default.a.createElement(Welcome_Welcome, { 27359 nextButtonAction: nextStep 27360 }), currentStep == 2 && /*#__PURE__*/react_default.a.createElement(WelcomeBack_CreateAccount_CreateAccount, { 27361 backButtonAction: previousStep, 27362 nextButtonAction: nextStep 27363 }), currentStep == 3 && /*#__PURE__*/react_default.a.createElement(InstallScrenClip_InstallScrenClip, { 27364 backButtonAction: previousStep, 27365 nextButtonAction: nextStep 27366 }), currentStep == 4 && /*#__PURE__*/react_default.a.createElement(WelcomeBack_ThatIsAll_ThatIsAll, { 27367 backButtonAction: previousStep 27368 }))), /*#__PURE__*/react_default.a.createElement("div", { 27369 style: { 27370 width: mainContentContaierWidth 27371 }, 27372 className: WelcomeBack_default.a.separatorContainer 27373 }, /*#__PURE__*/react_default.a.createElement("div", { 27374 style: { 27375 width: mainContentContaierWidth 27376 }, 27377 className: WelcomeBack_default.a.separator 27378 }), /*#__PURE__*/react_default.a.createElement("div", { 27379 className: WelcomeBack_default.a.stepsListTabletContaier 27380 }, /*#__PURE__*/react_default.a.createElement(WelcomeBack_StepsListMobile_StepsListMobile, { 27381 currentStep: currentStep 27382 })))); 27383} 27384// EXTERNAL MODULE: ./src/App.css 27385var App = __webpack_require__("Q8kY"); 27386 27387// EXTERNAL MODULE: ./src/components/Notification/Notification.css 27388var Notification_Notification = __webpack_require__("9a+k"); 27389var Notification_default = /*#__PURE__*/__webpack_require__.n(Notification_Notification); 27390 27391// CONCATENATED MODULE: ./src/components/Notification/Notification.js 27392 27393 27394 27395 27396 27397let timer; 27398const MultipleUploaderNotification = function (props) { 27399 var _props$additional, _props$additional5, _props$additional6; 27400 const notificationTime = ((_props$additional = props.additional) === null || _props$additional === void 0 ? void 0 : _props$additional.notificationTime) || 3000; 27401 const [isShown, setShown] = Object(react["useState"])(props.shown); 27402 const [isError, setError] = Object(react["useState"])(props.error); 27403 const [message, setMessage] = Object(react["useState"])(props.message); 27404 const hide = Object(react["useCallback"])(() => { 27405 setShown(false); 27406 }, [setShown]); 27407 const goToAction = Object(react["useCallback"])(() => { 27408 var _props$additional2, _props$additional3; 27409 if ((_props$additional2 = props.additional) !== null && _props$additional2 !== void 0 && _props$additional2.newTabLink) { 27410 window.open(props.additional.newTabLink); 27411 setShown(false); 27412 } else if ((_props$additional3 = props.additional) !== null && _props$additional3 !== void 0 && _props$additional3.href) { 27413 props.history.push(props.additional.href); 27414 setShown(false); 27415 } 27416 }, [props.history, props.additional, setShown]); 27417 Object(react["useEffect"])(() => { 27418 const isSet = props.message !== ''; 27419 if (isSet) { 27420 var _props$additional4; 27421 setShown(true); 27422 setError(props.error); 27423 setMessage(props.message); 27424 clearTimeout(timer); 27425 if (!props.error && !((_props$additional4 = props.additional) !== null && _props$additional4 !== void 0 && _props$additional4.manualHide)) { 27426 timer = setTimeout(() => { 27427 props.setNotification(''); 27428 }, notificationTime); 27429 } 27430 } else { 27431 setShown(false); 27432 } 27433 }, [props.message, setError, setShown, setMessage]); 27434 return /*#__PURE__*/react_default.a.createElement("div", {
27435 className: [Notification_default.a.outer, isShown ? Notification_default.a.shown : ''].join(' ') 27436 }, /*#__PURE__*/react_default.a.createElement("div", { 27437 className: Notification_default.a.notificationContainer 27438 }, /*#__PURE__*/react_default.a.createElement("div", { 27439 className: [((_props$additional5 = props.additional) === null || _props$additional5 === void 0 ? void 0 : _props$additional5.icon) && Notification_default.a[props.additional.icon], isError ? Notification_default.a.notyWarning : Notification_default.a.notyDefault].join(' ') 27440 }), /*#__PURE__*/react_default.a.createElement("div", { 27441 className: Notification_default.a.message 27442 }, message), (_props$additional6 = props.additional) !== null && _props$additional6 !== void 0 && _props$additional6.signUpButton ? /*#__PURE__*/react_default.a.createElement("button", { 27443 className: Notification_default.a.action, 27444 onClick: goToAction 27445 }, "Sign Up") : props.additional ? /*#__PURE__*/react_default.a.createElement("div", { 27446 className: Notification_default.a.multipleButtons 27447 }, /*#__PURE__*/react_default.a.createElement("button", { 27448 className: [Notification_default.a.action, props.additional.storageFull ? Notification_default.a.storageFull : '', props.additional.storageLow ? Notification_default.a.storageLow : ''].join(' '), 27449 onClick: goToAction 27450 }, props.additional.buttonLabel), /*#__PURE__*/react_default.a.createElement("button", { 27451 className: [Notification_default.a.done, props.additional.storageFull ? Notification_default.a.storageFull : '', props.additional.storageLow ? Notification_default.a.storageLow : ''].join(' '), 27452 onClick: hide 27453 }, "Done")) : /*#__PURE__*/react_default.a.createElement("button", { 27454 className: Notification_default.a.done, 27455 onClick: hide 27456 }, "Done"))); 27457}; 27458const mapDataToProps = state => { 27459 return { 27460 message: state.app.notification, 27461 error: state.app.notificationError, 27462 timer: state.app.timer, 27463 additional: state.app.notificationAdditional 27464 }; 27465}; 27466/* harmony default export */ var components_Notification_Notification = (Object(react_router["h" /* withRouter */])(Object(es["b" /* connect */])(mapDataToProps, dispatch => { 27467 return { 27468 setNotification: message => dispatch({ 27469 type: 'SET_APP_NOTIFICATION', 27470 value: message 27471 }) 27472 }; 27473})(MultipleUploaderNotification))); 27474console.log('Notification.new'); 27475// EXTERNAL MODULE: ./src/components/Banner/Banner.css 27476var Banner = __webpack_require__("f1xP"); 27477var Banner_default = /*#__PURE__*/__webpack_require__.n(Banner); 27478 27479// CONCATENATED MODULE: ./src/components/Banner/Banner.js 27480 27481 27482 27483 27484 27485function Banner_Banner(props) { 27486 let { 27487 currentUser 27488 } = props; 27489 let [displayBanner, setDisplayBanner] = Object(react["useState"])(false); 27490 // let [repeatPasswordValid, setRepeatPasswordValid] = useState(''); 27491 // // let [emailAccount, setEmailAccount] = useState(''); 27492 // let [passwordSuccessfullyChanged, setPasswordSuccessfullyChanged] = useState(false); 27493 // let passwordRef = useRef(null); 27494 // let repeatPasswordRef = useRef(null); 27495 27496 Object(react["useEffect"])(() => { 27497 if (props.currentUser && props.currentUser.surveyBanner) { 27498 setDisplayBanner(false); 27499 } else { 27500 setDisplayBanner(true); 27501 } 27502 }, []); 27503 27504 // async function verifyPasswordResetCode(){ 27505 // let response = {}; 27506 // let params = new URLSearchParams(props.location.search); 27507 // let oobCode = params.get('oobCode') 27508 // response = await props.Auth.verifyPasswordResetCode(oobCode); 27509 // if(response.success){ 27510 // setEmailAccount(response.email); 27511 // } 27512 // else /*if(response.code == "auth/expired-action-code" || response.code == "auth/invalid-action-code")*/{ 27513 // props.history.push({ 27514 // pathname: '/', 27515 // state: { linkExpired: true } 27516 // }); 27517 // } 27518 // } 27519 async function goToSurvey() { 27520 window.open("https://docs.google.com/forms/d/e/1FAIpQLSdY3hnA3SENxB20S0CcbcksR13EqGh6_BAgYPG73JIQLMtAIA/viewform", "_blank"); 27521 if (props.currentUser) { 27522 let data = { 27523 userId: props.currentUser.userId, 27524 surveyBanner: 'opened' 27525 }; 27526 let res = await app_utils["q" /* updateUserSurveyBannerInfo */](data); 27527 if (res.error) { 27528 console.log("Update surveyBanner error:", res.error); 27529 if (onError) onError();
27530 setLoader(null); 27531 return; 27532 } 27533 props.mergeUser({ 27534 surveyBanner: data.surveyBanner 27535 }); 27536 } 27537 setDisplayBanner(false); 27538 } 27539 async function closeSurvey() { 27540 if (props.currentUser) { 27541 let data = { 27542 userId: props.currentUser.userId, 27543 surveyBanner: 'closed' 27544 }; 27545 let res = await app_utils["q" /* updateUserSurveyBannerInfo */](data); 27546 if (res.error) { 27547 console.log("Update surveyBanner error:", res.error); 27548 if (onError) onError(); 27549 setLoader(null); 27550 return; 27551 } 27552 props.mergeUser({ 27553 surveyBanner: data.surveyBanner 27554 }); 27555 } 27556 setDisplayBanner(false); 27557 } 27558 function changed() { 27559 if (passwordRef.current.value.length >= 6) { 27560 setPasswordValid(true); 27561 } else { 27562 setPasswordValid(false); 27563 } 27564 if (repeatPasswordRef.current.value.length > 0) { 27565 checkIfRepeatPasswordIsValid(); 27566 } 27567 } 27568 function checkIfRepeatPasswordIsValid() { 27569 if (repeatPasswordRef.current.value === passwordRef.current.value) { 27570 setRepeatPasswordValid(true); 27571 } else { 27572 setRepeatPasswordValid(false); 27573 } 27574 } 27575 async function handleResetPassword() { 27576 let response; 27577 if (repeatPasswordValid) { 27578 // let params = new URLSearchParams(props.location.search); 27579 // let oobCode = params.get('oobCode') 27580 let pass = repeatPasswordRef.current.value; 27581 response = await props.Auth.resetPassword(props.location.state.oobCode, pass); 27582 setPasswordSuccessfullyChanged(response.success); 27583 if (response.success) { 27584 let result = await props.Auth.signIn(props.location.state.emailAccount.email, pass); 27585 props.history.push('/dashboard'); 27586 } else if (response.code == "auth/expired-action-code") { 27587 props.history.push({ 27588 pathname: '/', 27589 state: { 27590 linkExpired: true 27591 } 27592 }); 27593 } 27594 } 27595 } 27596 let banner = /*#__PURE__*/react_default.a.createElement("div", { 27597 className: Banner_default.a["banner-container"] 27598 }, /*#__PURE__*/react_default.a.createElement("div", { 27599 className: Banner_default.a["container"] 27600 }, /*#__PURE__*/react_default.a.createElement("p", { 27601 className: Banner_default.a["text"] 27602 }, "Do you have 5 minutes? We need your help in order to improve!"), /*#__PURE__*/react_default.a.createElement("button", { 27603 className: Banner_default.a["button"], 27604 onClick: () => { 27605 goToSurvey(); 27606 } 27607 }, "Answer Survey"), /*#__PURE__*/react_default.a.createElement("svg", { 27608 onClick: () => { 27609 closeSurvey(); 27610 }, 27611 className: Banner_default.a["closeButton"], 27612 width: "26", 27613 height: "26", 27614 viewBox: "0 0 26 26", 27615 xmlns: "http://www.w3.org/2000/svg" 27616 }, /*#__PURE__*/react_default.a.createElement("path", { 27617 d: "M6.47 6.47a.75.75 0 0 1 1.06 0L13 11.939l5.47-5.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 0 1.06L14.061 13l5.47 5.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-1.06 0L13 14.061l-5.47 5.47a.75.75 0 0 1-.976.072l-.084-.073a.75.75 0 0 1 0-1.06L11.939 13l-5.47-5.47a.75.75 0 0 1-.072-.976z", 27618 fill: "#FFF", 27619 fillRule: "evenodd" 27620 }))));
27621 return displayBanner && banner; 27622} 27623let Banner_mapStateToProps = state => { 27624 return { 27625 userId: state.app.userId, 27626 currentUser: state.app.user 27627 }; 27628}; 27629let Banner_mapDispatchToProps = dispatch => { 27630 return { 27631 mergeUser: changes => dispatch({ 27632 type: 'MERGE_USER', 27633 value: changes 27634 }) 27635 }; 27636}; 27637/* harmony default export */ var components_Banner_Banner = (Object(es["b" /* connect */])(Banner_mapStateToProps, Banner_mapDispatchToProps, null, { 27638 forwardRef: true 27639})(Banner_Banner)); 27640// EXTERNAL MODULE: ./src/screens/AuthPage/AuthPage.css 27641var AuthPage = __webpack_require__("mUsH"); 27642var AuthPage_default = /*#__PURE__*/__webpack_require__.n(AuthPage); 27643 27644// EXTERNAL MODULE: ./src/components/InputText/InputText.css 27645var InputText = __webpack_require__("DwQI"); 27646var InputText_default = /*#__PURE__*/__webpack_require__.n(InputText); 27647 27648// CONCATENATED MODULE: ./src/components/InputText/InputText.js 27649 27650 27651/* harmony default export */ var InputText_InputText = (function (props) { 27652 const { 27653 withShowHide, 27654 placeholder, 27655 value, 27656 setValue, 27657 error, 27658 onSubmit 27659 } = props; 27660 const [isShowPassword, setShowPassword] = Object(react["useState"])(false); 27661 const togglePassword = Object(react["useCallback"])(() => { 27662 setShowPassword(!isShowPassword); 27663 }, [isShowPassword, setShowPassword]); 27664 const onChange = Object(react["useCallback"])(e => { 27665 const value = e.target.value; 27666 setValue(value); 27667 }); 27668 const onEnterSubmit = Object(react["useCallback"])(e => e.key === 'Enter' && onSubmit && onSubmit(), [onSubmit]); 27669 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 27670 className: [InputText_default.a.container, withShowHide ? InputText_default.a.passwordField : ''].join(' ') 27671 }, /*#__PURE__*/react_default.a.createElement("input", { 27672 type: withShowHide && !isShowPassword ? "password" : "text", 27673 className: InputText_default.a.input, 27674 placeholder: placeholder, 27675 value: value, 27676 onChange: onChange, 27677 onKeyPress: onEnterSubmit 27678 }), withShowHide && /*#__PURE__*/react_default.a.createElement("div", { 27679 className: [InputText_default.a.showHidePassword, isShowPassword ? '' : InputText_default.a.passwordHidden].join(' '), 27680 onClick: togglePassword 27681 })), error && /*#__PURE__*/react_default.a.createElement("div", { 27682 className: InputText_default.a.error 27683 }, error)); 27684}); 27685// EXTERNAL MODULE: ./src/components/Link/Link.css 27686var Link = __webpack_require__("akdU"); 27687 27688// CONCATENATED MODULE: ./src/components/Link/Link.js 27689 27690 27691 27692 27693 27694const Link_Link = ({ 27695 href, 27696 text, 27697 history, 27698 className 27699}) => { 27700 const onClick = Object(react["useCallback"])(e => { 27701 e.preventDefault(); 27702 history.push(href); 27703 }, [href]); 27704 return /*#__PURE__*/react_default.a.createElement("a", { 27705 href: "#", 27706 onClick: onClick, 27707 className: className ? className : '' 27708 }, text); 27709}; 27710let Link_mapStateToProps = state => { 27711 return { 27712 // userId: state.app.userId, 27713 // currentUser: state.app.user, 27714 // user: state.app.user, 27715 }; 27716}; 27717/* harmony default export */ var components_Link_Link = (Object(react_router["h" /* withRouter */])(Object(components_Auth["c" /* withAuth */])(Object(es["b" /* connect */])(Link_mapStateToProps, null, null, { 27718 forwardRef: true 27719})(Link_Link)))); 27720// EXTERNAL MODULE: ./assets/images/sc-logo-3x.png 27721var sc_logo_3x = __webpack_require__("CvwL"); 27722var sc_logo_3x_default = /*#__PURE__*/__webpack_require__.n(sc_logo_3x); 27723 27724// CONCATENATED MODULE: ./src/screens/AuthPage/AuthPage.js 27725 27726 27727 27728 27729 27730 27731 27732 27733 27734 27735 27736 27737 27738async function fetchIfClipularUserEmail(email) { 27739 const url = `${constants["a" /* default */].apiUrl}/isClipularUserEmail?email=${email.replace(/\+/g, '%2B')}`; 27740 const requestOptions = { 27741 method: 'get', 27742 url: url 27743 }; 27744 let res; 27745 try { 27746 res = await axios_default()(requestOptions); 27747 return !!res.data.result; 27748 } catch (e) { 27749 console.error("error checking clipular user", e); 27750 return false; 27751 } 27752} 27753const getTexts = type => { 27754 const texts = { 27755 login: { 27756 headerText: 'Welcome back!', 27757 headerTextPurchase: 'Login now to proceed with checkout.', 27758 headerDescription: 'First time?', 27759 headerLink: { 27760 text: 'Create an account â', 27761 url: '/sign-up' 27762 }, 27763 bottomLink: {
27764 text: 'Reset my password', 27765 url: '/reset-password' 27766 }, 27767 googleButton: 'Continue with Google', 27768 preform: 'Or login with your email', 27769 button: 'Log in' 27770 }, 27771 register: { 27772 headerText: 'Create account ð³', 27773 headerTextPurchase: 'Create an account to proceed with checkout.', 27774 headerDescription: 'Already have one?', 27775 headerLink: { 27776 text: 'Log in â', 27777 url: '/log-in' 27778 }, 27779 bottomText: 'By signing up you agree with our', 27780 bottomLink: { 27781 text: 'terms & conditions.', 27782 url: '/terms-and-conditions' 27783 }, 27784 googleButton: 'Sign up with Google', 27785 preform: 'Or join with your email', 27786 button: 'Sign up' 27787 } 27788 }; 27789 return texts[type]; 27790}; 27791const validateSubscriptionPlan = plan => { 27792 if (plan === 'plus-monthly' || plan === 'plus-yearly') { 27793 return true; 27794 } else { 27795 return false; 27796 } 27797}; 27798function AuthPage_AuthPage(props) { 27799 const params = new URLSearchParams(props.location.search); 27800 const subscriptionPlan = params.get('plan'); 27801 const comingFromExt = params.get('coming-from') === 'extension'; 27802 const clipAction = params.get('clip-action'); 27803 const clipId = params.get('clip-id'); 27804 const extensionId = params.get('extension-id'); 27805 const pageType = props.login ? 'login' : 'register'; 27806 // const {currentUser} = props; 27807 27808 const allowRedirectToDashboard = !validateSubscriptionPlan(subscriptionPlan) && !comingFromExt; 27809 Object(react["useEffect"])(() => { 27810 document.title = `ScreenClip - ${pageType === 'login' ? 'Log In' : 'Sign up'}`; 27811 }, [pageType]); 27812 const isAuthed = !!props.userId; 27813 Object(react["useEffect"])(() => { 27814 if (isAuthed) { 27815 if (validateSubscriptionPlan(subscriptionPlan)) { 27816 if (subscriptionPlan === 'plus-monthly') { 27817 window.location.replace(`https://store.screenclip.com/checkout/add?products=8b9eb988-0a63-476e-8ccf-e5154394f6fe&newCart=true&layout=vitzocart&plan=${subscriptionPlan}&screenclipuserid=${props.currentUser.userId}&screenclipuseremail=${props.currentUser.email}&email=${props.currentUser.email}`); 27818 } else if (subscriptionPlan === 'plus-yearly') { 27819 window.location.replace(`https://store.screenclip.com/checkout/add?products=176052b9-98c3-4604-b827-2862f67b5b7d&newCart=true&layout=vitzocart&plan=${subscriptionPlan}&screenclipuserid=${props.currentUser.userId}&screenclipuseremail=${props.currentUser.email}&email=${props.currentUser.email}`); 27820 } 27821 } else if (comingFromExt) { 27822 const msg = { 27823 action: "ALL__BG__POPUP_MENU_ACTION", 27824 data: { 27825 clipAction, 27826 clipId, 27827 user: { 27828 ...props.user 27829 } 27830 } 27831 }; 27832 chrome.runtime.sendMessage(extensionId, msg); 27833 props.setAppLoading(true); 27834 } else { 27835 props.history.push("/dashboard"); 27836 } 27837 } 27838 }, [isAuthed]); 27839 Object(react["useEffect"])(() => { 27840 async function redirect() { 27841 let oobCode = params.get('oobCode'); 27842 let mode = params.get('mode'); 27843 if (mode == "verifyEmail") { 27844 const response = await props.Auth.verifyEmail(oobCode); 27845 if (response.success) { 27846 if (currentUser && (typeof props.location.state == "undefined" || !props.location.state.stayAtHomePage)) { 27847 props.history.push({ 27848 pathname: '/dashboard', 27849 state: { 27850 stayAtHomePage: false, 27851 emailVerified: true 27852 } 27853 }); 27854 } 27855 } else { 27856 // set link expired 27857 props.history.push({ 27858 state: { 27859 linkExpired: false, 27860 stayAtHomePage: true 27861 } 27862 }); 27863 } 27864 } else if (mode == "resetPassword") { 27865 let response = {}; 27866 response = await props.Auth.verifyPasswordResetCode(oobCode); 27867 if (response.success) { 27868 props.history.push({ 27869 pathname: '/password-recovery', 27870 state: { 27871 emailAccount: response, 27872 oobCode: oobCode 27873 } 27874 }); 27875 } else /*if(response.code == "auth/expired-action-code" || response.code == "auth/invalid-action-code")*/{ 27876 setLinkExpiredModal(/*#__PURE__*/react_default.a.createElement(Modal["c" /* ModalWindow */], { 27877 show: true 27878 }, /*#__PURE__*/react_default.a.createElement(Content["a" /* default */].ExpiredLink, { 27879 mode: mode, 27880 closeModal: hideModal 27881 }))); 27882 props.history.push({ 27883 state: { 27884 linkExpired: false, 27885 stayAtHomePage: true 27886 } 27887 }); 27888 } 27889 // document.location.href = '/password-recovery'+location.search; 27890 } else { 27891 if (props.location.state && props.location.state.loginModal) { 27892 signInButtonContaier.current.children[1].click(); 27893 props.history.push({ 27894 state: { 27895 loginModal: false 27896 } 27897 }); 27898 } 27899 // If a user is connected and stumbles to the homepage b
27899y typing the website URL, redirect to dashboard. 27900 if (false) {} 27901 } 27902 } 27903 redirect(); 27904 }, [props.location]); 27905 const [email, setEmail] = Object(react["useState"])(''); 27906 const [emailError, setEmailError] = Object(react["useState"])(''); 27907 const [password, setPassword] = Object(react["useState"])(''); 27908 const [passwordError, setPasswordError] = Object(react["useState"])(''); 27909 const [isSubmitBlocked, setSubmitBlocked] = Object(react["useState"])(false); 27910 const validatePassword = Object(react["useCallback"])(password => password.trim().length >= 8, [password]); 27911 const validateEmail = Object(react["useCallback"])(email => { 27912 const emailRegex = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i; 27913 return emailRegex.test(email); 27914 }, [email]); 27915 const onSetPassword = Object(react["useCallback"])(password => { 27916 setPassword(password); 27917 setPasswordError(''); 27918 }); 27919 const onSetEmail = Object(react["useCallback"])(email => { 27920 setEmail(email); 27921 setEmailError(''); 27922 }); 27923 const signIn = Object(react["useCallback"])(async (email, password) => { 27924 var _result$error; 27925 if (isSubmitBlocked) return; 27926 setSubmitBlocked(true); 27927 const result = await props.Auth.signIn(email, password); 27928 if (typeof result.error === "undefined") { 27929 // window.location.href = window.location.origin + '/dashboard'; 27930 if (allowRedirectToDashboard) { 27931 props.history.push('/dashboard'); 27932 } 27933 } else if (((_result$error = result.error) === null || _result$error === void 0 ? void 0 : _result$error.code) !== 'auth/wrong-password') { 27934 const isClipularUser = await fetchIfClipularUserEmail(email); 27935 if (isClipularUser) { 27936 props.setNotification("Please create a new account. You can import your content once signed in.", false, { 27937 icon: 'clipular', 27938 signUpButton: true, 27939 href: '/sign-up', 27940 manualHide: true 27941 }, false); 27942 } else { 27943 props.setNotification(result.errorMessage, true); 27944 setSubmitBlocked(false); 27945 } 27946 } else { 27947 props.setNotification(result.errorMessage, true); 27948 setSubmitBlocked(false); 27949 } 27950 return result; 27951 }, [isSubmitBlocked]); 27952 const signUp = Object(react["useCallback"])(async (email, password) => { 27953 if (isSubmitBlocked) return; 27954 setSubmitBlocked(true); 27955 const result = await props.Auth.signUp(email, password); 27956 if (result.error) { 27957 props.setNotification(result.errorMessage, true); 27958 } else { 27959 if (allowRedirectToDashboard) { 27960 props.history.push('/dashboard#signedup'); 27961 } 27962 } 27963 setSubmitBlocked(false); 27964 return result; 27965 }, [isSubmitBlocked]); 27966 const googleSignSubmit = Object(react["useCallback"])(async () => { 27967 const signed = await props.Auth.googleSignIn(); 27968 const url = pageType === 'login' ? '/dashboard' : '/dashboard#signedup'; 27969 if (signed) { 27970 if (allowRedirectToDashboard) { 27971 props.history.push(url); 27972 } 27973 } else { 27974 props.setNotification('There was an error while signing.', true); 27975 } 27976 }, [pageType]); 27977 const onSubmit = Object(react["useCallback"])(() => { 27978 const emailErrorText = 'The email address is badly formatted'; 27979 const passwordErrorText = 'Password should be at least 8 characters'; 27980 const isError = false; 27981 if (!validateEmail(email)) { 27982 setEmailError(emailErrorText); 27983 isError = true; 27984 } else setEmailError(''); 27985 if (!validatePassword(password)) { 27986 setPasswordError(passwordErrorText); 27987 isError = true; 27988 } else setPasswordError(''); 27989 if (!isError) { 27990 pageType === 'login' ? signIn(email, password) : signUp(email, password); 27991 } else { 27992 console.log('Auth stopped with validation error'); 27993 } 27994 }, [email, emailError, password, passwordError, signIn, setEmailError, setPasswordError, pageType]); 27995 27996 // some texts for login and registration pages 27997 const texts = Object(react["useMemo"])(() => getTexts(pageType), [pageType]); 27998 const gotoHome = Object(react["useCallback"])(() => window.location.assign('https://screenclip.com'), []); 27999 if (isAuthed) { 28000 return null; 28001 } 28002 const showFeatureColumn = comingFromExt; 28003 return /*#__PURE__*/react_default.a.createElement("div", { 28004 className: AuthPage_default.a.root 28005 }, /*#__PURE__*/react_default.a.createElement("div", { 28006 className: [AuthPage_default.a.featureColumn, showFeatureColumn ? '' : AuthPage_default.a.hide].join(' ') 28007 }, /*#__PURE__*/react_default.a.createElement("img", { 28008 alt: "Screen Clip Logo", 28009 src: sc_logo_3x_default.a, 28010 className: AuthPage_default.a.scLogo, 28011 onClick: gotoHome 28012 }), /*#__PURE__*/react_default.a.createElement("label", { 28013 className: AuthPage_default.a.featureHeader 28014 }, "Instantly get URLs, HTML, and", /*#__PURE__*/react_default.a.createElement("br", null), "Markdown images and links"), /*#__PURE__*/react_default.a.createElement("div", { 28015 className: AuthPage_default.a.featureImage 28016 }), /*#__PURE__*/react_default.a.createElement("label", { 28017 className: AuthPage_default.a.featureList, 28018 style: { 28019 height: '56px', 28020 margin: '0px' 28021 } 28022 }, "\uD83C\uDFDE\uFE0F See image previews when sharing your screenshot URLs."), /*#__PURE__*/react_default.a.createElement("label", { 28023 className: AuthPage_default.a.featureList 28024 }, "\uD83D\uDDC2\uFE0F Create and share unlimited folders."), /*#__PURE__*/react_default.a.createElement("label", { 28025 className: AuthPage_default.a.featureList 28026 }, "\uD83D\uDC8C Send and reply to messages in screenshots."), /*#__PURE__*/react_default.a.createElement("label", { 28027 className: AuthPage_default.a.featureList 28028 }, "\uD83D\uDD12 Backup your screenshots in Google Drive."), /*#__PURE__*/react_default.a.createElement("label", { 28029 className: AuthPage_default.a.featureList 28030 }, "\uD83D\uDE80 And more!")), /*#__PURE__*/react_default.a.createElement("div", { 28031 className: [AuthPage_default.a.authColumn, showFeatureColumn ? AuthPage_default.a.multiColumn : ''].join(' ') 28032 }, /*#__PURE__*/react_default.a.createElement("div", { 28033 className: [AuthPage_default.a.logo, showFeatureColumn ? AuthPage_default.a.hide : ''].join(' '), 28034 onClick: gotoHome 28035 }), /*#__PURE__*/react_default.a.createElement("div", { 28036 className: AuthPage_default.a.header 28037 }, validateSubscriptionPlan(subscriptionPlan) ? texts.headerTextPurchase : texts.headerText), /*#__PURE__*/react_default.a.createElement("div", { 28038 className: AuthPage_default.a.descline 28039 }, texts.headerDescription, "\xA0", /*#__PURE__*/react_default.a.createElement(components_Link_Link, { 28040 href: texts.headerLink.url + props.location.search, 28041 text: texts.headerLink.text 28042 })), /*#__PURE__*/react_default.a.createElement("div", { 28043 className: AuthPage_default.a.buttonGoogleAuth, 28044 onClick: googleSignSubmit 28045 }, /*#__PURE__*/react_default.a.createElement("span", null, texts.googleButton)), /*#__PURE__*/react_default.a.createElement("div", { 28046 className: AuthPage_default.a.formbox 28047 }, /*#__PURE__*/react_default.a.createElement("span", { 28048 className: AuthPage_default.a.label 28049 }, texts.preform), /*#__PURE__*/react_default.a.createElement(InputText_InputText, { 28050 value: email, 28051 setValue: onSetEmail, 28052 onSubmit: onSubmit, 28053 placeholder: "Email", 28054 error: emailError 28055 }), /*#__PURE__*/react_default.a.createElement(InputText_InputText, { 28056 value: password, 28057 setValue: onSetPassword, 28058 onSubmit: onSubmit, 28059 withShowHide: true, 28060 placeholder: "Password", 28061 error: passwordError 28062 }), /*#__PURE__*/react_default.a.createElement("div", { 28063 className: [AuthPage_default.a.buttonSubmit, isSubmitBlocked ? AuthPage_default.a.blockedSubmit : ''].join(' '), 28064 onClick: onSubmit 28065 }, isSubmitBlocked ? /*#__PURE__*/react_default.a.createElement(Loader["a" /* default */], { 28066 className: AuthPage_default.a.loader, 28067 full: false, 28068 hidden: false, 28069 white: true 28070 }) : /*#__PURE__*/react_default.a.createElement("span", null, texts.button))), /*#__PURE__*/react_default.a.createElement("div", { 28071 className: AuthPage_default.a.bottomLinks 28072 }, texts.bottomText ? /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, texts.bottomText, /*#__PURE__*/react_default.a.createElement("br", null)) : '', /*#__PURE__*/react_default.a.createElement(components_Link_Link, { 28073 href: texts.bottomLink.url, 28074 text: texts.bottomLink.text 28075 })))); 28076} 28077const AuthPage_mapStateToProps = state => { 28078 return { 28079 userId: state.app.userId, 28080 currentUser: state.app.user, 28081 user: state.app.user 28082 }; 28083};
28084const AuthPage_mapDispatchToProps = dispatch => { 28085 return { 28086 setAppLoading: v => dispatch({ 28087 type: "SET_APP_LOADING", 28088 value: v 28089 }), 28090 setUserId: userId => dispatch({ 28091 action: "SET_USER_ID", 28092 value: userId 28093 }), 28094 setUser: user => dispatch({ 28095 action: "SET_USER", 28096 value: user 28097 }), 28098 setNotification: (value, error, additional) => dispatch({ 28099 type: "SET_APP_NOTIFICATION", 28100 value, 28101 error: !!error, 28102 additional 28103 }) 28104 }; 28105}; 28106/* harmony default export */ var screens_AuthPage_AuthPage = (Object(react_router["h" /* withRouter */])(Object(components_Auth["c" /* withAuth */])(Object(es["b" /* connect */])(AuthPage_mapStateToProps, AuthPage_mapDispatchToProps, null, { 28107 forwardRef: true 28108})(AuthPage_AuthPage)))); 28109// EXTERNAL MODULE: ./src/screens/ResetPassword/ResetPassword.css 28110var ResetPassword = __webpack_require__("sxGj"); 28111var ResetPassword_default = /*#__PURE__*/__webpack_require__.n(ResetPassword); 28112 28113// CONCATENATED MODULE: ./src/screens/ResetPassword/ResetPassword.js 28114 28115 28116 28117 28118 28119 28120 28121 28122 28123const ResetPassword_getTexts = type => { 28124 const texts = { 28125 reset: { 28126 headerText: 'Password reset', 28127 preform: 'You will receive an email with a link to reset your password.', 28128 button: 'Send link âï¸' 28129 }, 28130 expired: { 28131 headerText: 'Link expired ð', 28132 preform: 'Let\'s send you a new link to reset your password.', 28133 button: 'Send new link âï¸' 28134 } 28135 }; 28136 return texts[type]; 28137}; 28138function ResetPassword_AuthPage(props) { 28139 Object(react["useEffect"])(() => { 28140 document.title = 'ScreenClip - Password reset'; 28141 }, []); 28142 const [email, setEmail] = Object(react["useState"])(''); 28143 const [emailError, setEmailError] = Object(react["useState"])(''); 28144 const [isSubmitBlocked, setSubmitBlocked] = Object(react["useState"])(false); 28145 const gotoSignup = Object(react["useCallback"])(() => { 28146 props.history.push('/log-in'); 28147 }); 28148 const validateEmail = Object(react["useCallback"])(email => { 28149 const emailRegex = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i; 28150 return emailRegex.test(email); 28151 }, [email]); 28152 const onSetEmail = Object(react["useCallback"])(email => { 28153 setEmail(email); 28154 setEmailError(''); 28155 }); 28156 const sendResetEmail = Object(react["useCallback"])(async () => { 28157 setSubmitBlocked(true); 28158 const result = await props.Auth.forgotPassword(email); 28159 if (result.error) props.setNotification('Sorry, there was an error. Please check if email is valid', true);else { 28160 props.setNotification('We sent you email with link to reset your password', false); 28161 gotoSignup(); 28162 } 28163 setSubmitBlocked(false); 28164 }, [email]); 28165 const onSubmit = Object(react["useCallback"])(() => { 28166 const emailErrorText = 'The email address is badly formatted'; 28167 if (!validateEmail(email)) setEmailError(emailErrorText);else { 28168 setEmailError(''); 28169 sendResetEmail(); 28170 } 28171 }, [email, setEmailError]); 28172 28173 // some texts for login and registration pages 28174 const mode = window.location.hash === '#link-expired' ? 'expired' : 'reset'; 28175 const texts = Object(react["useMemo"])(() => ResetPassword_getTexts(mode), [mode]); 28176 return /*#__PURE__*/react_default.a.createElement("div", { 28177 className: ResetPassword_default.a.root 28178 }, /*#__PURE__*/react_default.a.createElement("div", { 28179 className: ResetPassword_default.a.column 28180 }, mode === 'reset' && /*#__PURE__*/react_default.a.createElement("div", { 28181 className: ResetPassword_default.a.backLink, 28182 onClick: gotoSignup 28183 }), /*#__PURE__*/react_default.a.createElement("div", { 28184 className: ResetPassword_default.a.header 28185 }, texts.headerText), /*#__PURE__*/react_default.a.createElement("div", { 28186 className: [ResetPassword_default.a.formbox, ResetPassword_default.a.transparent].join(' ') 28187 }, /*#__PURE__*/react_default.a.createElement("span", { 28188 className: ResetPassword_default.a.label 28189 }, texts.preform), /*#__PURE__*/react_default.a.createElement(InputText_InputText, { 28190 value: email, 28191 setValue: onSetEmail, 28192 placeholder: "Email", 28193 onSubmit: onSubmit, 28194 error: emailError 28195 }), /*#__PURE__*/react_default.a.createElement("div", { 28196 className: [ResetPassword_default.a.buttonSubmit, isSubmitBlocked ? ResetPassword_default.a.blockedSubmit : ''].join(' '), 28197 onClick: onSubmit 28198 }, isSubmitBlocked ? /*#__PURE__*/react_default.a.createElement(Loader["a" /* default */], { 28199 className: ResetPassword_default.a.loader, 28200 full: false, 28201 hidden: false, 28202 white: true 28203 }) : /*#__PURE__*/react_default.a.createElement("span", null, texts.button))))); 28204} 28205let ResetPassword_mapStateToProps = state => { 28206 return { 28207 userId: state.app.userId, 28208 currentUser: state.app.user, 28209 user: state.app.user 28210 }; 28211};
28212const ResetPassword_mapDispatchToProps = dispatch => { 28213 return { 28214 setUserId: userId => dispatch({ 28215 action: "SET_USER_ID", 28216 value: userId 28217 }), 28218 setUser: user => dispatch({ 28219 action: "SET_USER", 28220 value: user 28221 }), 28222 setNotification: (value, error) => dispatch({ 28223 type: "SET_APP_NOTIFICATION", 28224 value, 28225 error: !!error 28226 }) 28227 }; 28228}; 28229/* harmony default export */ var ResetPassword_ResetPassword = (Object(react_router["h" /* withRouter */])(Object(components_Auth["c" /* withAuth */])(Object(es["b" /* connect */])(ResetPassword_mapStateToProps, ResetPassword_mapDispatchToProps, null, { 28230 forwardRef: true 28231})(ResetPassword_AuthPage)))); 28232// EXTERNAL MODULE: ./src/screens/SetResetPassword/SetResetPassword.css 28233var SetResetPassword = __webpack_require__("x+nE"); 28234var SetResetPassword_default = /*#__PURE__*/__webpack_require__.n(SetResetPassword); 28235 28236// CONCATENATED MODULE: ./src/screens/SetResetPassword/SetResetPassword.js 28237 28238 28239 28240 28241 28242 28243 28244const SetResetPassword_getTexts = type => { 28245 const texts = { 28246 set: { 28247 headerText: 'Change password ð', 28248 preform: 'Please use at least 8 characters.', 28249 button: 'Reset' 28250 } 28251 }; 28252 return texts[type]; 28253}; 28254const noErrors = { 28255 password1: '', 28256 password2: '' 28257}; 28258function SetResetPassword_AuthPage(props) { 28259 var _props$location, _props$location$state, _props$location$state2; 28260 Object(react["useEffect"])(() => { 28261 document.title = 'ScreenClip - Set new password'; 28262 }, []); 28263 const email = (_props$location = props.location) === null || _props$location === void 0 ? void 0 : (_props$location$state = _props$location.state) === null || _props$location$state === void 0 ? void 0 : (_props$location$state2 = _props$location$state.emailAccount) === null || _props$location$state2 === void 0 ? void 0 : _props$location$state2.email; 28264 const [passwords, setPasswords] = Object(react["useState"])({ 28265 password1: '', 28266 password2: '' 28267 }); 28268 const [passwordsErrors, setPasswordsErrors] = Object(react["useState"])(noErrors); 28269 const [isSubmitBlocked, setSubmitBlocked] = Object(react["useState"])(false); 28270 const gotoHome = Object(react["useCallback"])(() => props.history.push('/'), []); 28271 const onSetPassword1 = Object(react["useCallback"])(password1 => { 28272 setPasswords({ 28273 password1, 28274 password2: passwords.password2 28275 }); 28276 setPasswordsErrors(noErrors); 28277 }, [passwords]); 28278 const onSetPassword2 = Object(react["useCallback"])(password2 => { 28279 setPasswords({ 28280 password2, 28281 password1: passwords.password1 28282 }); 28283 setPasswordsErrors(noErrors); 28284 }, [passwords]); 28285 const setNewPassword = Object(react["useCallback"])(async password => { 28286 var _props$location2, _props$location2$stat; 28287 setSubmitBlocked(true); 28288 const result = await props.Auth.resetPassword(((_props$location2 = props.location) === null || _props$location2 === void 0 ? void 0 : (_props$location2$stat = _props$location2.state) === null || _props$location2$stat === void 0 ? void 0 : _props$location2$stat.oobCode) || '', password); 28289 if (result.code) props.history.push({ 28290 pathname: '/', 28291 state: { 28292 linkExpired: true 28293 } 28294 });else { 28295 var _props$location3, _props$location3$stat, _props$location3$stat2; 28296 await props.Auth.signIn((_props$location3 = props.location) === null || _props$location3 === void 0 ? void 0 : (_props$location3$stat = _props$location3.state) === null || _props$location3$stat === void 0 ? void 0 : (_props$location3$stat2 = _props$location3$stat.emailAccount) === null || _props$location3$stat2 === void 0 ? void 0 : _props$location3$stat2.email, password); 28297 props.history.push('/dashboard'); 28298 } 28299 setSubmitBlocked(false); 28300 }, []); 28301 const onSubmit = Object(react["useCallback"])(() => { 28302 const notEqual = 'Passwords should be equal'; 28303 const passwordLength = 'Password should not be less than 8 characters'; 28304 if (passwords.password1 !== passwords.password2.trim()) { 28305 setPasswordsErrors({ 28306 ...noErrors, 28307 password2: notEqual 28308 }); 28309 } else if (passwords.password1.trim().length < 8) { 28310 setPasswordsErrors({ 28311 ...noErrors, 28312 password2: passwordLength 28313 }); 28314 } else { 28315 setNewPassword(passwords.password1); 28316 } 28317 }, [passwords, setPasswordsErrors]); 28318 28319 // some texts for login and registration pages 28320 const texts = Object(react["useMemo"])(() =>
28320 SetResetPassword_getTexts('set'), []); 28321 return /*#__PURE__*/react_default.a.createElement("div", { 28322 className: SetResetPassword_default.a.root 28323 }, /*#__PURE__*/react_default.a.createElement("div", { 28324 className: SetResetPassword_default.a.column 28325 }, /*#__PURE__*/react_default.a.createElement("div", { 28326 className: SetResetPassword_default.a.logo, 28327 onClick: gotoHome 28328 }), /*#__PURE__*/react_default.a.createElement("div", { 28329 className: SetResetPassword_default.a.header 28330 }, texts.headerText), /*#__PURE__*/react_default.a.createElement("div", { 28331 className: SetResetPassword_default.a.email 28332 }, email), /*#__PURE__*/react_default.a.createElement("div", { 28333 className: [SetResetPassword_default.a.formbox, SetResetPassword_default.a.transparent].join(' ') 28334 }, /*#__PURE__*/react_default.a.createElement("span", { 28335 className: SetResetPassword_default.a.label 28336 }, texts.preform), /*#__PURE__*/react_default.a.createElement(InputText_InputText, { 28337 value: passwords.password1, 28338 setValue: onSetPassword1, 28339 placeholder: "Type a new password", 28340 onSubmit: onSubmit, 28341 error: passwordsErrors.password1, 28342 withShowHide: true 28343 }), /*#__PURE__*/react_default.a.createElement(InputText_InputText, { 28344 value: passwords.password2, 28345 setValue: onSetPassword2, 28346 placeholder: "Repeat the password", 28347 onSubmit: onSubmit, 28348 error: passwordsErrors.password2, 28349 withShowHide: true 28350 }), /*#__PURE__*/react_default.a.createElement("div", { 28351 className: [SetResetPassword_default.a.buttonSubmit, isSubmitBlocked ? SetResetPassword_default.a.blockedSubmit : ''].join(' '), 28352 onClick: onSubmit 28353 }, isSubmitBlocked ? /*#__PURE__*/react_default.a.createElement(Loader["a" /* default */], { 28354 className: SetResetPassword_default.a.loader, 28355 full: false, 28356 hidden: false, 28357 white: true 28358 }) : /*#__PURE__*/react_default.a.createElement("span", null, texts.button))))); 28359} 28360let SetResetPassword_mapStateToProps = state => { 28361 return { 28362 userId: state.app.userId, 28363 currentUser: state.app.user, 28364 user: state.app.user 28365 }; 28366}; 28367const SetResetPassword_mapDispatchToProps = dispatch => { 28368 return { 28369 setUserId: userId => dispatch({ 28370 action: "SET_USER_ID", 28371 value: userId 28372 }), 28373 setUser: user => dispatch({ 28374 action: "SET_USER", 28375 value: user 28376 }), 28377 setNotification: (value, error) => dispatch({ 28378 type: "SET_APP_NOTIFICATION", 28379 value, 28380 error: !!error 28381 }) 28382 }; 28383}; 28384/* harmony default export */ var SetResetPassword_SetResetPassword = (Object(react_router["h" /* withRouter */])(Object(components_Auth["c" /* withAuth */])(Object(es["b" /* connect */])(SetResetPassword_mapStateToProps, SetResetPassword_mapDispatchToProps, null, { 28385 forwardRef: true 28386})(SetResetPassword_AuthPage)))); 28387// EXTERNAL MODULE: ./src/screens/ClipUlarMigrationEmail/ClipularMigrationEmail.css 28388var ClipularMigrationEmail = __webpack_require__("b81t"); 28389var ClipularMigrationEmail_default = /*#__PURE__*/__webpack_require__.n(ClipularMigrationEmail); 28390 28391// CONCATENATED MODULE: ./src/screens/ClipUlarMigrationEmail/ClipularMigrationEmail.js 28392 28393 28394function ClipularMigrationEmail_ClipularMigrationEmail(props) { 28395 Object(react["useEffect"])(() => { 28396 document.title = 'Clipular Migration Email Web-version'; 28397 }, []); 28398 return /*#__PURE__*/react_default.a.createElement("div", { 28399 className: ClipularMigrationEmail_default.a.mainContainer 28400 }, /*#__PURE__*/react_default.a.createElement("div", { 28401 className: ClipularMigrationEmail_default.a.clipularLogo 28402 }), /*#__PURE__*/react_default.a.createElement("div", { 28403 className: ClipularMigrationEmail_default.a.dearClipularUsers 28404 }, "Dear Clipular user,", /*#__PURE__*/react_default.a.createElement("br", null), " Great news!"), /*#__PURE__*/react_default.a.createElement("div", { 28405 className: ClipularMigrationEmail_default.a.text1 28406 }, "We've redesigned your Clipular experience. We decided to split Clipular into two components. ", /*#__PURE__*/react_default.a.createElement("b", null, "ScreenClip"), " replaces the ", /*#__PURE__*/react_default.a.createElement("b", null, "browser extension"), ", and ", /*#__PURE__*/react_default.a.createElement("b", null, "ScreenClip"), " will host your clips online and provide a link to share with others."), /*#__PURE__*/react_default.a.createElement("div", { 28407 className: ClipularMigrationEmail_default.a.logosContainer 28408 }, /*#__PURE__*/react_default.a.createElement("div", { 28409 className: ClipularMigrationEmail_default.a.screenclipLogo 28410 }), /*#__PURE__*/react_default.a.createElement("div", { 28411 className: ClipularMigrationEmail_default.a.plusImg 28412 }), /*#__PURE__*/react_default.a.createElement("div", { 28413 className: ClipularMigrationEmail_default.a.screenlinkLogo 28414 })), /*#__PURE__*/react_default.a.createElement("div", { 28415 className: ClipularMigrationEmail_default.a.text2 28416 }, "There are plenty of improvements and new features. For instance, you can now add ", /*#__PURE__*/react_default.a.createElement("b", null, "comments"), " and ", /*#__PURE__*/react_default.a.createElement("b", null, "annotations"), " right on the website."), /*#__PURE__*/react_default.a.createElement("div", { 28417 className: ClipularMigrationEmail_default.a.comments 28418 }), /*#__PURE__*/react_default.a.createElement("div", { 28419 className: ClipularMigrationEmail_default.a.lastText 28420 }, "Give it a try!"), /*#__PURE__*/react_default.a.createElement("div", { 28421 className: ClipularMigrationEmail_default.a.learnMoreButtonContainer 28422 }, /*#__PURE__*/react_default.a.createElement("a", { 28423 className: ClipularMigrationEmail_default.a.learnMoreButton, 28424 href: "https://screen.link/welcome-back?utm_source=Sendy&utm_medium=Email&utm_campaign=Clipular%20Migration&utm_term=1st-round-300users" 28425 }, "Get Started!"))); 28426} 28427// CONCATENATED MODULE: ./src/components/ScrollToTop/ScrollToTop.js 28428 28429 28430function ScrollToTop() { 28431 const { 28432 pathname 28433 } = Object(react_router["g" /* useLocation */])(); 28434 Object(react["useEffect"])(() => { 28435 window.scrollTo(0, 0); 28436 }, [pathname]); 28437 return null; 28438} 28439// EXTERNAL MODULE: ./src/components/Notification/MultipleImages/MultipleImages.css 28440var MultipleImages = __webpack_require__("pcWY"); 28441var MultipleImages_default = /*#__PURE__*/__webpack_require__.n(MultipleImages); 28442 28443// CONCATENATED MODULE: ./src/components/Notification/CircularProgressWithLabel.js 28444 28445const cleanPercentage = percentage => { 28446 const tooLow = !Number.isFinite(+percentage) || percentage < 0; 28447 const tooHigh = percentage > 100; 28448 return tooLow ? 0 : tooHigh ? 100 : +percentage; 28449}; 28450const Circle = ({ 28451 colour, 28452 pct 28453}) => { 28454 const r = 18;
28455 const circ = 2 * Math.PI * r; 28456 let strokePct; 28457 // if(pct>0){ 28458 strokePct = (100 - pct) * circ / 100; 28459 // } 28460 // else{ 28461 // strokePct = 0; 28462 // } 28463 return /*#__PURE__*/react_default.a.createElement("circle", { 28464 shapeRendering: "geometricPrecision", 28465 style: { 28466 transition: "all 0.7s ease-in-out" 28467 }, 28468 r: r, 28469 cx: 175, 28470 cy: 21, 28471 fill: "transparent", 28472 stroke: strokePct !== circ ? colour : "" // remove colour as 0% sets full circumference 28473 , 28474 strokeWidth: "1px", 28475 strokeDasharray: circ, 28476 strokeDashoffset: colour == "lightgrey" ? 0 : pct ? strokePct : circ, 28477 strokeLinecap: "round" 28478 }); 28479}; 28480const CircularProgressWithLabel_Text = ({ 28481 percentage 28482}) => { 28483 return /*#__PURE__*/react_default.a.createElement("text", { 28484 x: "42%", 28485 y: "50%", 28486 dominantBaseline: "central", 28487 textAnchor: "middle", 28488 fontSize: "10px", 28489 style: { 28490 whiteSpace: "pre", 28491 fontFamily: 'MuseoSans', 28492 color: 'var(--Ash)', 28493 letterSpacing: '-0.14px', 28494 lineHeight: '1.2' 28495 } 28496 }, percentage.toFixed(0), "%"); 28497}; 28498const Pie = ({ 28499 percentage, 28500 colour 28501}) => { 28502 const pct = cleanPercentage(percentage); 28503 return /*#__PURE__*/react_default.a.createElement("svg", { 28504 width: 50, 28505 height: 50 28506 }, /*#__PURE__*/react_default.a.createElement("g", { 28507 transform: `rotate(-90 ${"100 100"})` 28508 }, /*#__PURE__*/react_default.a.createElement(Circle, { 28509 colour: "lightgrey" 28510 }), /*#__PURE__*/react_default.a.createElement(Circle, { 28511 colour: colour, 28512 pct: pct 28513 })), /*#__PURE__*/react_default.a.createElement(CircularProgressWithLabel_Text, { 28514 percentage: pct 28515 })); 28516}; 28517/* harmony default export */ var CircularProgressWithLabel = (Pie); 28518// CONCATENATED MODULE: ./src/components/Notification/MultipleImages/ArrowUpSvg.js 28519 28520function ArrowUpSvg() { 28521 return /*#__PURE__*/react_default.a.createElement("svg", { 28522 xmlns: "http://www.w3.org/2000/svg", 28523 width: "60", 28524 height: "60", 28525 viewBox: "0 0 91 90" 28526 }, /*#__PURE__*/react_default.a.createElement("defs", null, /*#__PURE__*/react_default.a.createElement("filter", { 28527 id: "v2n42jx71a", 28528 width: "112.5%", 28529 height: "113.3%", 28530 x: "-6.2%", 28531 y: "-6.6%", 28532 filterUnits: "objectBoundingBox" 28533 }, /*#__PURE__*/react_default.a.createElement("feOffset", { 28534 dy: "3", 28535 in: "SourceAlpha", 28536 result: "shadowOffsetOuter1" 28537 }), /*#__PURE__*/react_default.a.createElement("feGaussianBlur", { 28538 in: "shadowOffsetOuter1", 28539 result: "shadowBlurOuter1", 28540 stdDeviation: "4" 28541 }), /*#__PURE__*/react_default.a.createElement("feColorMatrix", { 28542 in: "shadowBlurOuter1", 28543 result: "shadowMatrixOuter1", 28544 values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" 28545 }), /*#__PURE__*/react_default.a.createElement("feMerge", null, /*#__PURE__*/react_default.a.createElement("feMergeNode", { 28546 in: "shadowMatrixOuter1" 28547 }), /*#__PURE__*/react_default.a.createElement("feMergeNode", { 28548 in: "SourceGraphic" 28549 })))), /*#__PURE__*/react_default.a.createElement("g", { 28550 fill: "#FFF", 28551 fillRule: "evenodd", 28552 stroke: "#000", 28553 strokeOpacity: "0.13", 28554 filter: "url(#v2n42jx71a)", 28555 transform: "translate(-263 2)" 28556 }, /*#__PURE__*/react_default.a.createElement("path", { 28557 d: "M308.7 58.078c-.5.049-.882-.075-1.173-.296a1.565 1.565 0 01-.594-1.028l-1.167-17.747-7.597 3.928a1.497 1.497 0 01-1.62-.157c-.355-.35-.512-.704-.55-1.042-.046-.4.072-.789.332-1.098l11.039-10.715a1.498 1.498 0 011.975-.1l11.047 10.703a1.498 1.498 0 01-.506 2.477 1.497 1.497 0 01-1.097-.008l-7.727-3.99-1.152 17.607c-.023.36-.157.686-.36.938-.218.27-.516.458-.85.528z" 28558 }))); 28559} 28560/* harmony default export */ var MultipleImages_ArrowUpSvg = (ArrowUpSvg); 28561// EXTERNAL MODULE: ./src/components/Notification/ButtonsStack/ButtonsStack.css 28562var ButtonsStack = __webpack_require__("F/43"); 28563var ButtonsStack_default = /*#__PURE__*/__webpack_require__.n(ButtonsStack); 28564 28565// CONCATENATED MODULE: ./src/components/Notification/ButtonsStack/ButtonsStack.js 28566 28567 28568const ButtonsStack_ButtonsStack = function (props) { 28569 function cancelAndHide() { 28570 props.cancelUploadHandler(); 28571 props.hide(); 28572 } 28573 return /*#__PURE__*/react_default.a.createElement("div", { 28574 className: ButtonsStack_default.a.container 28575 }, props.circularProgress != 100 && /*#__PURE__*/react_default.a.createElement("button", { 28576 className: ButtonsStack_default.a.cancel, 28577 onClick: cancelAndHide 28578 }, "Cancel"), props.circularProgress == 100 && props.retryInfo.length == 0 && /*#__PURE__*/react_default.a.createElement("button", { 28579 className: ButtonsStack_default.a.done, 28580 onClick: props.hide 28581 }, "Done"), props.circularProgress == 100 && props.retryInfo.length > 0 && /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("button", { 28582 className: ButtonsStack_default.a.retry, 28583 onClick: props.retryAll 28584 }, "Retry"), /*#__PURE__*/react_default.a.createElement("button", { 28585 className: ButtonsStack_default.a.close, 28586 onClick: props.hide 28587 }, "Close"))); 28588}; 28589/* harmony default export */ var Notification_ButtonsStack_ButtonsStack = (ButtonsStack_ButtonsStack); 28590// CONCATENATED MODULE: ./src/components/Notification/MultipleImages/MultipleImages.js 28591 28592 28593 28594 28595 28596 28597 28598const MultipleImages_MultipleImages = function (props) { 28599 const [shown, setShown] = Object(react["useState"])(props.shown); 28600 const [error, setError] = Object(react["useState"])(props.shown); 28601 const [circularProgress, setCircularProgress] = Object(react["useState"])(null);
28602 const [viewErrors, setViewErrors] = Object(react["useState"])(true); 28603 const [retryInfo, setRetryInfo] = Object(react["useState"])([]); 28604 const [totalErrors, setTotalErrors] = Object(react["useState"])([]); 28605 const [previousClips, setPreviousClips] = Object(react["useState"])([]); 28606 const [message, setMessage] = Object(react["useState"])(props.message); 28607 Object(react["useEffect"])(() => { 28608 const isSet = props.message !== ''; 28609 if (isSet) { 28610 setShown(true); 28611 setError(props.error); 28612 setMessage(props.message); 28613 } 28614 }, [props.message]); 28615 Object(react["useEffect"])(() => { 28616 if (props.uploadingUpdate && !isNaN(props.uploadingUpdate.circularProgress)) { 28617 setCircularProgress(props.uploadingUpdate.circularProgress); 28618 } 28619 if (props.uploadingUpdate && props.uploadingUpdate.retryInfo) { 28620 setRetryInfo([...retryInfo, props.uploadingUpdate.retryInfo]); 28621 setTotalErrors([...retryInfo, props.uploadingUpdate.retryInfo].length); 28622 } 28623 if (props.uploadingUpdate && props.uploadingUpdate.clips && previousClips.length == 0) setPreviousClips(props.uploadingUpdate.clips); 28624 }, [props.uploadingUpdate]); 28625 async function retryAll() { 28626 let previousClipsUpdated = [...previousClips]; 28627 let errorListUpdated = [...retryInfo]; 28628 let i = 0; 28629 for (let error of retryInfo) { 28630 if (error.fileData.type === 'image/png' || error.fileData.type === 'image/jpeg') { 28631 const res = await app_utils["r" /* uploadClip */](error); 28632 if (!res.error) { 28633 errorListUpdated.splice(i, 1); 28634 // setMessage(errorListUpdated.length+" out of "+totalErrors+" didn't make it"); 28635 setMessage('Only PNGs and JPEGs up to ~7MB'); 28636 setRetryInfo(errorListUpdated); 28637 if ('trash' !== error.parentFolderId && window.location.href.split("/")[window.location.href.split("/").length - 1] == error.parentFolderId) { 28638 res.data.newUpload = true; 28639 props.setClips([res.data, ...previousClipsUpdated]); 28640 } 28641 if (errorListUpdated.length == 0) { 28642 props.hide(); 28643 } 28644 previousClipsUpdated.unshift(res.data); 28645 // setPreviousClips(previousClipsUpdated) 28646 } 28647 } else i++; 28648 } 28649 } 28650 async function tryAgain(error, i) { 28651 if (error.fileData.type === 'image/png' || error.fileData.type === 'image/jpeg') { 28652 const res = await app_utils["r" /* uploadClip */](error); 28653 if (res.error) { 28654 return; 28655 } 28656 let list = [...retryInfo]; 28657 list.splice(i, 1); 28658 // setMessage(list.length+" out of "+totalErrors+" didn't make it"); 28659 setMessage('Only PNGs and JPEGs up to ~7MB'); 28660 setRetryInfo(list); 28661 if ('trash' !== error.parentFolderId && window.location.href.split("/")[window.location.href.split("/").length - 1] == error.parentFolderId) { 28662 res.data.newUpload = true; 28663 props.setClips([res.data, ...previousClips]); 28664 } 28665 if (list.length == 0) { 28666 props.hide(); 28667 } 28668 let previousClipsUpdated = [res.data, ...previousClips]; 28669 setPreviousClips(previousClipsUpdated); 28670 } 28671 } 28672 const isFullStorage = retryInfo.some(error => { 28673 var _error$error, _error$error$error, _error$error2, _error$error2$error, _error$error2$error$r; 28674 return navigator.onLine && ((error === null || error === void 0 ? void 0 : (_error$error = error.error) === null || _error$error === void 0 ? void 0 : (_error$error$error = _error$error.error) === null || _error$error$error === void 0 ? void 0 : _error$error$error.status) == '422' || (error === null || error === void 0 ? void 0 : (_error$error2 = error.error) === null || _error$error2 === void 0 ? void 0 : (_error$error2$error = _error$error2.error) === null || _error$error2$error === void 0 ? void 0 : (_error$error2$error$r = _error$error2$error.response) === null || _error$error2$error$r === void 0 ? void 0 : _error$error2$error$r.status) == '422'); 28675 }); 28676 const isNetworkError = retryInfo.some(error => { 28677 var _error$error3; 28678 return !navigator.onLine || (error === null || error === void 0 ? void 0 : (_error$error3 = error.error) === null || _error$error3 === void 0 ? void 0 : _error$error3.status) != '666' && !isFullStorage && (error.fileData.type === 'image/png' || error.fileData.type === 'image/jpeg') && error.fileData.sizeRaw / 1024 / 1024 < 7; 28679 }); 28680 const isServerError = retryInfo.some(error => { 28681 var _error$error4; 28682 return (error === null || error === void 0 ? void 0 : (_error$error4 = error.error) === null || _error$error4 === void 0 ? void 0 : _error$error4.status) == '666' && !isFullStorage; 28683 }); 28684 console.log(">>isFullStorage", isFullStorage, retryInfo); 28685 console.log(">>isServerError", isServerError, retryInfo); 28686 console.log(">>isNetworkError", isNetworkError, retryInfo); 28687 const viewErrorsContainer = /*#__PURE__*/react_default.a.createElement("div", { 28688 className: [MultipleImages_default.a.viewErrorsContainer, viewErrors ? MultipleImages_default.a.viewErrors : ''].join(' ') 28689 }, retryInfo.map((error, i) => { 28690 const isFormatUnsupported = !(error.fileData.type === 'image/png' || error.fileData.type === 'image/jpeg'); 28691 return /*#__PURE__*/react_default.a.createElement("div", { 28692 key: i, 28693 className: [MultipleImages_default.a.retryinfo, isFormatUnsupported ? MultipleImages_default.a.retryinfoUnsupportedFormat : ''].join(' '), 28694 onClick: () => tryAgain(error, i) 28695 }, /*#__PURE__*/react_default.a.createElement("div", { 28696 className: MultipleImages_default.a.sourceTitleContainer 28697 }, !isFormatUnsupported ? /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("span", { 28698 className: MultipleImages_default.a.sourceTitle 28699 }, error.fileData.name), /*#__PURE__*/react_default.a.createElement("span", { 28700 className: MultipleImages_default.a.sourceTitleError 28701 }, error.fileData.size, error.fileData.sizeRaw / 1024 / 1024 < 7 ? " (Network error)" : " (Max ~7MB)")) : /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("span", { 28702 className: MultipleImages_default.a.sourceTitle 28703 }, error.fileData.name), /*#__PURE__*/react_default.a.createElement("span", { 28704 className: MultipleImages_default.a.sourceTitleError 28705 }, /*#__PURE__*/react_default.a.createElement("span", null, error.fileData.type.split('/').at(-1).toUpperCase()), " is not supported"))), isFormatUnsupported && /*#__PURE__*/react_default.a.createElement("div", { 28706 className: MultipleImages_default.a.unsupportedFormatBanner 28707 }), !isFormatUnsupported && /*#__PURE__*/react_default.a.createElement("div", { 28708 className: MultipleImages_default.a.clipImage, 28709 style: { 28710 backgroundImage: 'url("' + error.fileData.url + '")' 28711 } 28712 })); 28713 })); 28714 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, isFullStorage && /*#__PURE__*/react_default.a.createElement("div", { 28715 style: { 28716 display: "flex", 28717 justifyContent: "space-between", 28718 alignItems: "center" 28719 } 28720 }, /*#__PURE__*/react_default.a.createElement("div", { 28721 className: MultipleImages_default.a.serverError 28722 }), /*#__PURE__*/react_default.a.createElement("div", { 28723 className: [MultipleImages_default.a.message, props.uploadingUpdate, props.uploadingUpdate.retryInfo, MultipleImages_default.a.multipleImageUploadMessage].join(' ') 28724 }, "Storage limit reached. Delete clips or update your account to save more clips."), /*#__PURE__*/react_default.a.createElement(Notification_ButtonsStack_ButtonsStack, { 28725 retryInfo: [], 28726 hide: props.hide, 28727 circularProgress: 100, 28728 retryAll: retryAll, 28729 cancelUploadHandler: props.uploadingUpdate.cancelUploadHandler 28730 })), isNetworkError && /*#__PURE__*/react_default.a.createElement("div", { 28731 style: { 28732 display: "flex", 28733 justifyContent: "space-between", 28734 alignItems: "center" 28735 } 28736 }, /*#__PURE__*/react_default.a.createElement("div", { 28737 className: MultipleImages_default.a.networkError 28738 }), /*#__PURE__*/react_default.a.createElement("div", { 28739 className: [MultipleImages_default.a.message, props.uploadingUpdate, props.uploadingUpdate.retryInfo, MultipleImages_default.a.multipleImageUploadMessage].join(' ') 28740 }, "No internet detected. Please revise your connection and try again."), /*#__PURE__*/react_default.a.createElement(Notification_ButtonsStack_ButtonsStack, { 28741 retryInfo: retryInfo, 28742 hide: props.hide, 28743 circularProgress: circularProgress, 28744 retryAll: retryAll, 28745 cancelUploadHandler: props.uploadingUpdate.cancelUploadHandler 28746 })), isServerError && /*#__PURE__*/react_default.a.createElement("div", { 28747 style: { 28748 display: "flex", 28749 justifyContent: "space-between", 28750 alignItems: "center" 28751 } 28752 }, /*#__PURE__*/react_default.a.createElement("div", { 28753 className: MultipleImages_default.a.serverError 28754 }), /*#__PURE__*/react_default.a.createElement("div", { 28755 className: [MultipleImages_default.a.message, props.uploadingUpdate, props.uploadingUpdate.retryInfo, MultipleImages_default.a.multipleImageUploadMessage].join(' ') 28756 }, "Server connection lost. Please retry after a few moments."), /*#__PURE__*/react_default.a.createElement(Notification_ButtonsStack_ButtonsStack, { 28757 retryInfo: retryInfo, 28758 hide: props.hide, 28759 circularProgress: circularProgress, 28760 retryAll: retryAll, 28761 cancelUploadHandler: props.uploadingUpdate.cancelUploadHandler 28762 })), !isNetworkError && !isServerError && !isFullStorage && /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, viewErrorsContainer, retryInfo.length > 0 && /*#__PURE__*/react_default.a.createElement("div", { 28763 style: { 28764 display: "flex" 28765 } 28766 }, !viewErrors ? /*#__PURE__*/react_default.a.createElement("button", { 28767 className: MultipleImages_default.a.viewErrorsLabel, 28768 onClick: () => setViewErrors(!viewErrors) 28769 }, "View errors \u2B06") : /*#__PURE__*/react_default.a.createElement("button", { 28770 className: MultipleImages_default.a.hideErrorsLabel, 28771 onClick: () => setViewErrors(!viewErrors) 28772 }, "Hide errors \u2B07")), /*#__PURE__*/react_default.a.createElement("div", { 28773 style: { 28774 display: "flex", 28775 justifyContent: "space-between" 28776 } 28777 }, props.uploadingUpdate && retryInfo.length == 0 && !isNaN(props.uploadingUpdate.circularProgress) && /*#__PURE__*/react_default.a.createElement("div", { 28778 className: MultipleImages_default.a.circularProgressBarContainer 28779 }, /*#__PURE__*/react_default.a.createElement(CircularProgressWithLabel, { 28780 percentage: circularProgress, 28781 colour: "blue" 28782 })), /*#__PURE__*/react_default.a.createElement("div", { 28783 className: [MultipleImages_default.a.message, props.uploadingUpdate && props.uploadingUpdate.retryInfo && MultipleImages_default.a.multipleImageUploadMessage].join(' ') 28784 }, message), props.uploadingUpdate && !isNaN(props.uploadingUpdate.circularProgress) && /*#__PURE__*/react_default.a.createElement(Notification_ButtonsStack_ButtonsStack, { 28785 retryInfo: retryInfo, 28786 hide: props.hide, 28787 circularProgress: circularProgress, 28788 retryAll: retryAll, 28789 cancelUploadHandler: props.uploadingUpdate.cancelUploadHandler 28790 })))); 28791}; 28792/* harmony default export */ var Notification_MultipleImages_MultipleImages = (Object(es["b" /* connect */])(null, dispatch => { 28793 return { 28794 setClips: clips => dispatch({ 28795 type: "SET_CLIPS", 28796 value: clips 28797 }) 28798 }; 28799})(MultipleImages_MultipleImages)); 28800console.log('MultipleImages'); 28801// CONCATENATED MODULE: ./src/components/Notification/MultipleUploaderNotification.js 28802 28803 28804 28805 28806let MultipleUploaderNotification_timer; 28807const MultipleUploaderNotification_Notification = function (props) { 28808 var _props$uploadingUpdat2, _props$uploadingUpdat3, _props$uploadingUpdat4, _props$uploadingUpdat5, _props$uploadingUpdat6; 28809 const [shown, setShown] = Object(react["useState"])(props.shown); 28810 const [error, setError] = Object(react["useState"])(props.error); 28811 const [retryInfos, setRetryInfos] = Object(react["useState"])([]); 28812 Object(react["useEffect"])(() => { 28813 var _props$uploadingUpdat; 28814 const ry = props === null || props === void 0 ? void 0 : (_props$uploadingUpdat = props.uploadingUpdate) === null || _props$uploadingUpdat === void 0 ? void 0 : _props$uploadingUpdat.retryInfo; 28815 if (ry) { 28816 setRetryInfos([...retryInfos, ry]); 28817 } 28818 }, [props === null || props === void 0 ? void 0 : (_props$uploadingUpdat2 = props.uploadingUpdate) === null || _props$uploadingUpdat2 === void 0 ? void 0 : _props$uploadingUpdat2.retryInfo]); 28819 const [message, setMessage] = Object(react["useState"])(props.message); 28820 function hide() { 28821 setShown(false); 28822 setTimeout(() => { 28823 props.setNotification(''); 28824 }, 1000); 28825 } 28826 Object(react["useEffect"])(() => { 28827 const isSet = props.message !== ''; 28828 if (isSet) { 28829 setShown(true); 28830 setError(props.error); 28831 setMessage(props.message); 28832 if ((!props.uploadingUpdate || props.uploadingUpdate.circularProgress == 100) && (!props.error || props.timer)) {
28833 clearTimeout(MultipleUploaderNotification_timer); 28834 MultipleUploaderNotification_timer = setTimeout(hide, 6 * 1000); 28835 } else { 28836 clearTimeout(MultipleUploaderNotification_timer); 28837 } 28838 } 28839 }, [props.message]); 28840 const isFileTooBig = retryInfos.length > 1 && ((_props$uploadingUpdat3 = props.uploadingUpdate) === null || _props$uploadingUpdat3 === void 0 ? void 0 : (_props$uploadingUpdat4 = _props$uploadingUpdat3.retryInfo) === null || _props$uploadingUpdat4 === void 0 ? void 0 : (_props$uploadingUpdat5 = _props$uploadingUpdat4.error) === null || _props$uploadingUpdat5 === void 0 ? void 0 : (_props$uploadingUpdat6 = _props$uploadingUpdat5.error) === null || _props$uploadingUpdat6 === void 0 ? void 0 : _props$uploadingUpdat6.status) == 413; 28841 return /*#__PURE__*/react_default.a.createElement("div", { 28842 className: [Notification_default.a.outer, shown ? Notification_default.a.shown : ''].join(' ') 28843 }, props.uploadingUpdate && !isFileTooBig ? /*#__PURE__*/react_default.a.createElement("div", { 28844 className: Notification_default.a.notificationContainerForMultipleImages 28845 }, /*#__PURE__*/react_default.a.createElement(Notification_MultipleImages_MultipleImages, { 28846 message: props.message, 28847 error: props.error, 28848 uploadingUpdate: props.uploadingUpdate, 28849 hide: hide 28850 })) : /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 28851 className: Notification_default.a.notificationContainer 28852 }, /*#__PURE__*/react_default.a.createElement("div", { 28853 className: isFileTooBig ? Notification_default.a.notyWarning : Notification_default.a.notyDefault 28854 }), /*#__PURE__*/react_default.a.createElement("div", { 28855 className: Notification_default.a.message 28856 }, isFileTooBig ? 'Due to software limitations, you can upload images up to 7MB each.' : message, /*#__PURE__*/react_default.a.createElement("br", null)), /*#__PURE__*/react_default.a.createElement("button", { 28857 className: Notification_default.a.done, 28858 onClick: hide 28859 }, "Done")))); 28860}; 28861/* harmony default export */ var Notification_MultipleUploaderNotification = (Object(es["b" /* connect */])(state => { 28862 return { 28863 message: state.app.notification, 28864 error: state.app.notificationError, 28865 timer: state.app.timer, 28866 additional: state.app.notificationAdditional, 28867 uploadingUpdate: state.app.uploadingUpdate 28868 }; 28869}, dispatch => { 28870 return { 28871 setNotification: message => dispatch({ 28872 type: 'SET_APP_NOTIFICATION', 28873 value: message 28874 }) 28875 }; 28876})(MultipleUploaderNotification_Notification)); 28877console.log('Notification'); 28878// CONCATENATED MODULE: ./src/App.js 28879 28880 28881 28882 28883 28884 28885 28886// import Support from './screens/Support/Support.js' 28887const App_Dashboard = Object(loadable_esm["a" /* default */])(() => Promise.resolve(/* import() */).then(__webpack_require__.bind(null, "SAt1"))); 28888 28889 28890 28891 28892 28893 28894 28895 28896 28897 28898 28899 28900 28901 28902 28903 28904const App_App = props => { 28905 const Auth = props.Auth; 28906 const currentUser = props.currentUser; 28907 const { 28908 multiple, 28909 loading 28910 } = props; 28911 const showHideCrispChatBox = () => { 28912 if (window.location.pathname === "/dashboard" || window.location.pathname === "/settings" || window.location.pathname === "/log-in" || window.location.pathname === "/sign-up" || window.location.pathname === "/reset-password") { 28913 // Show the crisp chatbox 28914 window.$crisp.push(['do', 'chat:show']); 28915 } else { 28916 // Hide the crisp chatbox 28917 window.$crisp.push(['do', 'chat:hide']); 28918 } 28919 }; 28920 Object(react["useEffect"])(() => { 28921 showHideCrispChatBox(); 28922 return props.history.listen((location, action) => { 28923 props.setNotification(''); 28924 }); 28925 }); 28926 Object(react["useLayoutEffect"])(() => { 28927 async function redirect() { 28928 const params = new URLSearchParams(props.location.search); 28929 const oobCode = params.get('oobCode'); 28930 const mode = params.get('mode'); 28931 if (mode == "verifyEmail") { 28932 const response = await props.Auth.verifyEmail(oobCode); 28933 if (response.success) { 28934 if (currentUser && (typeof props.location.state == "undefined" || !props.location.state.stayAtHomePage)) { 28935 props.history.push({ 28936 pathname: '/dashboard', 28937 state: { 28938 stayAtHomePage: false, 28939 emailVerified: true 28940 } 28941 });
28942 props.setNotification('Thank you for confirming your email!', false, false, false, true, { 28943 notificationTime: 6000 28944 }); 28945 } 28946 } else { 28947 console.log("link expired"); 28948 props.history.push({ 28949 state: { 28950 linkExpired: false, 28951 stayAtHomePage: true 28952 } 28953 }); 28954 } 28955 } else if (mode == "resetPassword") { 28956 const response = await props.Auth.verifyPasswordResetCode(oobCode); 28957 if (response.success) { 28958 props.history.push({ 28959 pathname: '/set-new-password', 28960 state: { 28961 emailAccount: response, 28962 oobCode: oobCode 28963 } 28964 }); 28965 } else props.history.push("/reset-password#link-expired"); 28966 } 28967 } 28968 redirect(); 28969 }, []); 28970 const getTermsAndConditionsComponent = () => { 28971 // Redirected to "screenclip.com" because other hosts are no longer maintained for "/terms-and-conditions" path 28972 window.location.replace("https://screenclip.com/terms-and-conditions"); 28973 return null; 28974 }; 28975 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, !multiple && /*#__PURE__*/react_default.a.createElement(components_Notification_Notification, null), multiple && /*#__PURE__*/react_default.a.createElement(Notification_MultipleUploaderNotification, null), /*#__PURE__*/react_default.a.createElement(Loader["a" /* default */], { 28976 full: true, 28977 hidden: !loading 28978 }), /*#__PURE__*/react_default.a.createElement(react_router["d" /* Switch */], null, !currentUser && /*#__PURE__*/react_default.a.createElement(react_router["a" /* Redirect */], { 28979 exact: true, 28980 from: "/", 28981 to: "/log-in" 28982 }), currentUser && /*#__PURE__*/react_default.a.createElement(react_router["a" /* Redirect */], { 28983 exact: true, 28984 from: "/", 28985 to: "/dashboard" 28986 }), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 28987 path: "/support", 28988 component: () => { 28989 window.location.href = 'https://chrome.google.com/webstore/detail/screenclip-share-visual-i/jmjbgcjbgmcfgbgikmbdioggjlhjegpp/support '; 28990 return null; 28991 } 28992 }), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 28993 path: "/settings" 28994 }, /*#__PURE__*/react_default.a.createElement(screens_Settings_Settings, null)), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 28995 path: "/faq" 28996 }, /*#__PURE__*/react_default.a.createElement(ScrollToTop, null), /*#__PURE__*/react_default.a.createElement(Faq_Faq, null)), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 28997 path: "/log-in" 28998 }, /*#__PURE__*/react_default.a.createElement(ScrollToTop, null), /*#__PURE__*/react_default.a.createElement(screens_AuthPage_AuthPage, { 28999 login: true 29000 })), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 29001 path: "/sign-up" 29002 }, /*#__PURE__*/react_default.a.createElement(ScrollToTop, null), /*#__PURE__*/react_default.a.createElement(screens_AuthPage_AuthPage, null)), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 29003 path: "/reset-password" 29004 }, /*#__PURE__*/react_default.a.createElement(ScrollToTop, null), /*#__PURE__*/react_default.a.createElement(ResetPassword_ResetPassword, null)), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 29005 path: "/set-new-password" 29006 }, /*#__PURE__*/react_default.a.createElement(ScrollToTop, null), /*#__PURE__*/react_default.a.createElement(SetResetPassword_SetResetPassword, null)), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 29007 path: "/emails/clipular-migration-standard" 29008 }, /*#__PURE__*/react_default.a.createElement(ClipularMigrationEmail_ClipularMigrationEmail, null)), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 29009 isExact: false, 29010 path: "/dashboard/:folderId?" 29011 }, /*#__PURE__*/react_default.a.createElement(App_Dashboard, { 29012 sharedFolder: false 29013 })), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 29014 path: "/folder/:folderId?" 29015 }, /*#__PURE__*/react_default.a.createElement(screens_FolderShared_FolderShared, { 29016 sharedFolder: true 29017 })), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 29018 path: "/demo" 29019 }, /*#__PURE__*/react_default.a.createElement(screens_Previewer_Previewer, { 29020 demoMode: true 29021 })), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 29022 path: "/password-recovery" 29023 }, /*#__PURE__*/react_default.a.createElement(screens_PasswordRecovery_PasswordRecovery, null)), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 29024 path: "/privacy-policy" 29025 }, /*#__PURE__*/react_default.a.createElement(ScrollToTop, null), /*#__PURE__*/react_default.a.createElement(PrivacyPolicy_PrivacyPolicy, null)), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 29026 path: "/terms-and-conditions", 29027 component: getTermsAndConditionsComponent 29028 }), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 29029 path: "/unsubscribed" 29030 }, /*#__PURE__*/react_default.a.createElement(screens_Unsubscribed_Unsubscribed, null)), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 29031 path: "/welcome-back" 29032 }, /*#__PURE__*/react_default.a.createElement(WelcomeBack_WelcomeBack, null)), /*#__PURE__*/react_default.a.createElement(react_router["b" /* Route */], { 29033 path: "/:clipUrl" 29034 }, /*#__PURE__*/react_default.a.createElement(screens_Previewer_Previewer, null)))); 29035}; 29036let App_mapStateToProps = state => { 29037 return { 29038 userId: state.app.userId, 29039 currentUser: state.app.user, 29040 loading: state.app.loading, 29041 multiple: state.app.multiple 29042 }; 29043};
29044let App_mapDispatchToProps = dispatch => { 29045 return { 29046 setUserId: userId => dispatch({ 29047 action: "SET_USER_ID", 29048 value: userId 29049 }), 29050 setUser: user => dispatch({ 29051 action: "SET_USER", 29052 value: user 29053 }), 29054 setNotification: (v, error, timer, uploadingUpdate, multiple, additional) => { 29055 const action = { 29056 type: "SET_APP_NOTIFICATION", 29057 value: v, 29058 error: !!error, 29059 timer: !!timer, 29060 uploadingUpdate, 29061 multiple 29062 }; 29063 if (additional) { 29064 action.additional = additional; 29065 } 29066 ; 29067 return dispatch(action); 29068 } 29069 }; 29070}; 29071/* harmony default export */ var src_App = (Object(react_router["h" /* withRouter */])(Object(components_Auth["c" /* withAuth */])(Object(es["b" /* connect */])(App_mapStateToProps, App_mapDispatchToProps, null, { 29072 forwardRef: true 29073})(App_App)))); 29074// CONCATENATED MODULE: ./src/index.js 29075 29076 29077 29078 29079 29080 29081 29082 29083const src_app = /*#__PURE__*/react_default.a.createElement(es["a" /* Provider */], { 29084 store: store["a" /* default */] 29085}, /*#__PURE__*/react_default.a.createElement(react_router_dom["a" /* BrowserRouter */], null, /*#__PURE__*/react_default.a.createElement(components_Auth["a" /* AuthContext */].Provider, { 29086 value: new components_Auth["b" /* default */]() 29087}, /*#__PURE__*/react_default.a.createElement(src_App, null)))); 29088let root = document.getElementById('root'); 29089react_dom_default.a.render(src_app, root); 29090 29091/***/ }), 29092 29093/***/ "u/zt": 29094/***/ (function(module, exports, __webpack_require__) { 29095 29096// extracted by mini-css-extract-plugin 29097module.exports = {"nav-bar-container":"src-components-Navbar-Navbar__nav-bar-container--Jot99","sign-container":"src-components-Navbar-Navbar__sign-container--TNubw","log_in":"src-components-Navbar-Navbar__log_in--kWjPE","sign_up":"src-components-Navbar-Navbar__sign_up--+Dwcm","pointEventsNone":"src-components-Navbar-Navbar__pointEventsNone--NUar5"}; 29098 29099/***/ }), 29100 29101/***/ "u1jP": 29102/***/ (function(module, exports) { 29103 29104module.exports = "/a0df4b95059058c0d4b7b0c44966eb5e.png"; 29105 29106/***/ }), 29107 29108/***/ "uuAL": 29109/***/ (function(module, __webpack_exports__, __webpack_require__) { 29110 29111"use strict"; 29112/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return dispatchMakeClipularClipReadableAgain; }); 29113/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getClip; }); 29114/* harmony import */ var core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("rGqo"); 29115/* harmony import */ var core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_iterable__WEBPACK_IMPORTED_MODULE_0__); 29116/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("vDqi"); 29117/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_1__); 29118/* harmony import */ var _config_constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("YwrL"); 29119/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("+n12"); 29120 29121 29122 29123 29124function dispatchBlankClip(dispatch, getState) { 29125 dispatch({ 29126 type: 'SET_CLIP', 29127 value: Object(_utils_utils__WEBPACK_IMPORTED_MODULE_3__[/* getBlankClip */ "i"])(getState().app.userId) 29128 }); 29129} 29130function dispatchClipFromServer(clipUrl) { 29131 return async function (dispatch, getState) { 29132 let state = getState().clip; 29133 let url = `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/clips/${clipUrl}`; 29134 const requestOptions = { 29135 method: 'get', 29136 url: url 29137 }; 29138 let res; 29139 try { 29140 res = await axios__WEBPACK_IMPORTED_MODULE_1___default()(requestOptions); 29141 } catch (e) { 29142 console.error(e); 29143 return; 29144 } 29145 const clip = res.data; 29146 let exists = Object.keys(clip).length > 0; 29147 dispatch({ 29148 type: 'SET_CLIP', 29149 value: clip 29150 }); 29151 }; 29152} 29153function dispatchMakeClipularClipReadableAgain(options = { 29154 reload: true, 29155 clipId: null, 29156 callback: () => {} 29157}) { 29158 return async function (dispatch, getState) { 29159 const clip = !options.clipId ? getState().clip.current : getState().dashboard.clips.filter(clip => clip.clipId == options.clipId)[0]; 29160 const { 29161 clipId, 29162 clipularFilePath, 29163 ownedBy 29164 } = clip; 29165 const url = `${_config_constants__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"].apiUrl}/v2/transfer/${ownedBy}/${clipId}/${clipularFilePath}`; 29166 const requestOptions = { 29167 method: 'get', 29168 url: url 29169 }; 29170 let res; 29171 try { 29172 res = await axios__WEBPACK_IMPORTED_MODULE_1___default()(requestOptions); 29173 } catch (e) { 29174 console.error(e); 29175 return; 29176 } 29177 if (options.reload) { 29178 window.location.reload(); 29179 } 29180 const clipUpdate = { 29181 ...clip, 29182 ...res.data 29183 }; 29184 let action = { 29185 type: 'SET_CLIP', 29186 value: clipUpdate 29187 }; 29188 if (options.clipId) { 29189 let clips = [...getState().dashboard.clips]; 29190 clips = clips.map(clip => { 29191 let newClip = { 29192 ...clip 29193 }; 29194 if (newClip.clipId == options.clipId) { 29195 newClip = { 29196 ...newClip, 29197 ...clipUpdate 29198 }; 29199 } 29200 return clip; 29201 }); 29202 action = { 29203 type: 'SET_CLIPS', 29204 value: clips 29205 }; 29206 if (options.callback) { 29207 setTimeout(() => options.callback(res.data.downloadUrl), 400); 29208 } 29209 }
29210 return dispatch(action); 29211 }; 29212} 29213function getClip(clipUrl) { 29214 if (clipUrl === 'blank') return dispatchBlankClip;else return dispatchClipFromServer(clipUrl); 29215} 29216 29217/***/ }), 29218 29219/***/ "uvQ8": 29220/***/ (function(module, __webpack_exports__, __webpack_require__) { 29221 29222"use strict"; 29223 29224// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom.iterable.js 29225var web_dom_iterable = __webpack_require__("rGqo"); 29226 29227// EXTERNAL MODULE: ./node_modules/react/index.js 29228var react = __webpack_require__("q1tI"); 29229var react_default = /*#__PURE__*/__webpack_require__.n(react); 29230 29231// EXTERNAL MODULE: ./src/components/Modal/Content/Upload/Upload.css 29232var Upload = __webpack_require__("zEyB"); 29233var Upload_default = /*#__PURE__*/__webpack_require__.n(Upload); 29234 29235// EXTERNAL MODULE: ./src/components/Modal/Modal.js 29236var Modal = __webpack_require__("AUTF"); 29237 29238// EXTERNAL MODULE: ./src/components/Popup/Popup.js 29239var Popup = __webpack_require__("A+iP"); 29240 29241// EXTERNAL MODULE: ./src/components/Checkbox/Checkbox.js 29242var Checkbox = __webpack_require__("NLkX"); 29243 29244// EXTERNAL MODULE: ./src/components/Loader/Loader.js 29245var Loader = __webpack_require__("3dzz"); 29246 29247// CONCATENATED MODULE: ./src/components/Modal/Content/Upload/Upload.js 29248 29249 29250 29251 29252 29253 29254 29255function UploadModalContent(props) { 29256 const [imageChanged, setImageChanged] = Object(react["useState"])(false); 29257 const [fileData, setFileData] = Object(react["useState"])(false); 29258 // const [userImage, setUserImage] = useState({}); 29259 const [uploading, setUploading] = Object(react["useState"])(false); 29260 29261 // const [dontShowAgain, setDontShowAgain] = useState(false); 29262 // const [mobileAndTabletCheck, setMobileAndTabletCheck] = useState(false); 29263 29264 const [feedbackPopUp, setFeedbackPopUp] = Object(react["useState"])(false); 29265 const [feedbackPopUpTitle, setFeedbackPopUpTitle] = Object(react["useState"])(""); 29266 const [feedbackPopUpContent, setFeedbackPopUpContent] = Object(react["useState"])(""); 29267 29268 // const [filesReadyToUpload, setFilesReadyToUpload] = useState(false); 29269 // const [filesReadyToUpload, setFilesReadyToUpload] = useState(false); 29270 29271 let zoneRef = Object(react["useRef"])(null); 29272 let fileRef = Object(react["useRef"])(null); 29273 // let fileName = useRef(null); 29274 // let changeButton = useRef(null); 29275 29276 Object(react["useEffect"])(() => { 29277 if (props.fileData) { 29278 setFileData(props.fileData); 29279 } 29280 }, [props.fileData]); 29281 // useEffect(() => { 29282 // if(fileName.current){ 29283 // fileName.current.value = fileData.name 29284 // } 29285 // }, [fileData]) 29286 29287 // useEffect(() => { 29288 // (function(a){ 29289 // if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|
29289sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)) || window.innerWidth <= 576){ 29290 29291 // } 29292 // else{ 29293 // if(fileData){ 29294 // fileName.current.focus(); 29295 // } 29296 // } 29297 // } 29298 // )(navigator.userAgent||navigator.vendor||window.opera); 29299 // // if(window.innerWidth <= 576){ 29300 // // check = true; 29301 // // } 29302 // // setMobileAndTabletCheck(check); 29303 // // if(window.innerWidth > 576){ 29304 29305 // // } 29306 29307 // }, [fileData.url]) 29308 29309 Object(react["useEffect"])(() => { 29310 const enterscListen = e => { 29311 e = e || window.event; 29312 return ("key" in e ? e.key === "Enter" || e.key === "Ent" : e.keyCode === 13) && uploadClicked(); 29313 }; 29314 document.addEventListener("keyup", enterscListen); 29315 return () => document.removeEventListener("keyup", enterscListen); 29316 }, [fileData]); 29317 const chooseFileClicked = Object(react["useCallback"])(e => { 29318 fileRef.current.click(); 29319 }); 29320 const closeModal = () => { 29321 props.closeModal(); 29322 setFileData({}); 29323 }; 29324 function onCloseFeedbackPopUp() { 29325 setFeedbackPopUp(false); 29326 } 29327 const fileChanged = Object(react["useCallback"])(e => { 29328 if (e.target.files.length === 1) { 29329 handleFile(e.target.files[0]); 29330 } 29331 // else { 29332 // setFileData({}) 29333 // } 29334 }); 29335 const uploadClicked = Object(react["useCallback"])(async e => { 29336 if (!e.currentTarget.className.includes('activated')) return; 29337 29338 // fileNameChanged() 29339 if (props.uploadImg) { 29340 props.uploadImg(fileData); 29341 setFileData({}); 29342 } else { 29343 props.closeModal(); 29344 setUploading(true); 29345 if (fileData.url.length > 10000000) { 29346 return props.setNotification('Image should weight less than 7Mb', true); 29347 } 29348 await props.uploadClip(fileData, msg => { 29349 props.setNotification(msg || "Uploading wasn't finished. Please, check your storage quota", true); 29350 setUploading(false); 29351 setFileData({}); 29352 }); 29353 } 29354 }); 29355 const onDragOver = Object(react["useCallback"])(e => { 29356 e.preventDefault(); 29357 zoneRef.current.classList.add(Upload_default.a.fileDragOver); 29358 }); 29359 const onDragEnd = Object(react["useCallback"])(e => { 29360 e.preventDefault(); 29361 // setFileData(false) 29362 if (!fileData.url) { 29363 closeModal(); 29364 } 29365 // else{ 29366 // zoneRef.current.classList.remove(styles.fileDragOver) 29367 // } 29368 }); 29369 const onDrop = Object(react["useCallback"])(async e => { 29370 e.preventDefault(); 29371 e.dataTransfer.dropEffect = 'move'; 29372 closeModal(); 29373 if (e.dataTransfer.files.length === 1) { 29374 const isImage = e.dataTransfer.files[0].type === 'image/png' || e.dataTransfer.files[0].type === 'image/jpeg'; 29375 if (!isImage) { 29376 props.setNotification("Sorry, this format is not supported yet. Please use JPG or PNG", true, true); 29377 } else { 29378 handleFilesAndUpload(e.dataTransfer.files); 29379 } 29380 // handleFile(e.dataTransfer.files[0]) 29381 // handleFilesAndUpload(e.dataTransfer.files) 29382 } else if (e.dataTransfer.files.length > 1) { 29383 // props.setNotification("Please drop one image at a time") 29384 handleFilesAndUpload(e.dataTransfer.files); 29385 } else { 29386 setFileData({}); 29387 } 29388 if (zoneRef.current) { 29389 zoneRef.current.classList.remove(Upload_default.a.fileDragOver); 29390 } 29391 }); 29392 const handleFilesAndUpload = Object(react["useCallback"])(async files => { 29393 let filesReadyToUpload = []; 29394 let filePromises = []; 29395 29396 // const filePromises = files.map((file) => { 29397 for (const file of files) { 29398 const isImage = file.type === 'image/png' || file.type === 'image/jpeg'; 29399 if (!isImage) { 29400 // props.setNotification("Woops! Unsupported file format, try with JPG or PNG",true,true) 29401 filesReadyToUpload.push({ 29402 name: file.name, 29403 displayName: file.name.substring(0, 20) + '...', 29404 size: formatSize(file.size), 29405 type: file.type, 29406 sizeRaw: file.size 29407 }); 29408 } else { 29409 filePromises.push(new Promise((resolve, reject) => { 29410 let r = new FileReader();
29411 r.readAsDataURL(file); 29412 r.onloadend = async () => { 29413 resolve(filesReadyToUpload.push({ 29414 url: r.result, 29415 name: file.name, 29416 displayName: file.name.substring(0, 20) + '...', 29417 size: formatSize(file.size), 29418 type: file.type, 29419 sizeRaw: file.size 29420 })); 29421 }; 29422 })); 29423 } 29424 } 29425 await Promise.all(filePromises); 29426 props.uploadClip(filesReadyToUpload, msg => { 29427 props.setNotification(msg || "Uploading wasn't finished. Please, check your storage quota", true); 29428 }); 29429 }); 29430 const handleFile = Object(react["useCallback"])(file => { 29431 const isImage = file.type === 'image/png' || file.type === 'image/jpeg'; 29432 if (!isImage) { 29433 props.setNotification("Woops! Unsupported file format, try with JPG or PNG", true, true); 29434 return closeModal(); 29435 } 29436 if (props.userImage && file.size / 1024 / 1024 > 1) { 29437 setFeedbackPopUp(true); 29438 setFeedbackPopUpTitle("Error"); 29439 setFeedbackPopUpContent("The image must be smaller than 1 MB"); 29440 return; 29441 } 29442 let r = new FileReader(); 29443 r.readAsDataURL(file); 29444 r.onloadend = () => { 29445 setFileData({ 29446 url: r.result, 29447 name: file.name, 29448 displayName: file.name.substring(0, 20) + '...', 29449 size: formatSize(file.size), 29450 type: file.type 29451 }); 29452 }; 29453 setImageChanged(true); 29454 }); 29455 const formatSize = Object(react["useCallback"])(size => { 29456 if (size > 1024 * 1024 * 1024 * 1024) return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB';else if (size > 1024 * 1024 * 1024) return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB';else if (size > 1024 * 1024) return (size / 1024 / 1024).toFixed(2) + ' MB';else if (size > 1024) return (size / 1024).toFixed(2) + ' KB'; 29457 return size.toString() + ' B'; 29458 }); 29459 29460 // const fileNameChanged = () => { 29461 // let data = fileData; 29462 // data.name = fileName.current.value 29463 // data.displayName = fileName.current.value.substring(0,20) + '...'; 29464 // setFileData(data) 29465 // } 29466 29467 Object(react["useEffect"])(() => { 29468 document.addEventListener("dragover", onDragOver); 29469 if (!zoneRef.current) return; 29470 zoneRef.current.addEventListener("drop", onDrop); 29471 zoneRef.current.addEventListener("dragleave", onDragEnd); 29472 zoneRef.current.addEventListener("dragend", onDragEnd); 29473 return () => { 29474 document.removeEventListener("dragover", onDragOver); 29475 if (!zoneRef.current) return; 29476 zoneRef.current.removeEventListener("drop", onDrop); 29477 zoneRef.current.removeEventListener("dragleave", onDragEnd); 29478 zoneRef.current.removeEventListener("dragend", onDragEnd); 29479 }; 29480 }, [zoneRef.current]); 29481 // let uploadClicked = useCallback(e => { 29482 // fileAdded = true; 29483 // props.upload(file); 29484 // }); 29485 // function showChangeButton(shouldBeShown){ 29486 // if(shouldBeShown){ 29487 // changeButton.current.style.opacity = 1 29488 // } 29489 // else{ 29490 // changeButton.current.style.opacity = 0 29491 // } 29492 // } 29493 29494 return /*#__PURE__*/react_default.a.createElement("div", { 29495 className: [Upload_default.a.upload].join(' '), 29496 ref: zoneRef 29497 }, /*#__PURE__*/react_default.a.createElement("input", { 29498 "data-max-size": "1024", 29499 type: "file", 29500 ref: fileRef, 29501 accept: "image/jpeg, image/png", 29502 onChange: fileChanged, 29503 style: { 29504 display: 'none' 29505 } 29506 }), 29507 /*#__PURE__*/ 29508 // !fileData.url && 29509 react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 29510 className: Upload_default.a.img 29511 }), /*#__PURE__*/react_default.a.createElement("div", { 29512 className: Upload_default.a.textFullScreenDrop 29513 }, "Release to upload images in \u201C", props.folderTitle, "\u201D folder.")), !uploading && fileData.url && /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, fileData.url ? /*#__PURE__*/react_default.a.createElement("div", { 29514 className: Upload_default.a.clipContainer /*className={[styles.clipContainer,styles.changeButtonContainer].join(' ')} onMouseEnter={()=>{showChangeButton(true)}} onMouseLeave={()=>{showChangeButton(false)}}*/ 29515 }, /*#__PURE__*/react_default.a.createElement("div", { 29516 style: { 29517 backgroundImage: 'url("' + fileData.url + '")' 29518 }, 29519 className: Upload_default.a.clip 29520 })) : /*#__PURE__*/react_default.a.createElement("div", { 29521 className: Upload_default.a.loaderContainer 29522 }, /*#__PURE__*/react_default.a.createElement(Loader["a" /* default */], null)), /*#__PURE__*/react_default.a.createElement("div", { 29523 className: Upload_default.a.inputsContainer 29524 }, /*#__PURE__*/react_default.a.createElement("div", { 29525 className: Upload_default.a.textContainer 29526 }, /*#__PURE__*/react_default.a.createElement("span", { 29527 className: Upload_default.a.textContent 29528 }, "Select a square image up to 1MB.")), /*#__PURE__*/react_default.a.createElement("div", { 29529 className: Upload_default.a.buttons 29530 }, /*#__PURE__*/react_default.a.createElement("button", { 29531 className: Upload_default.a.selectButton, 29532 onClick: chooseFileClicked 29533 }, "Select image...")), /*#__PURE__*/react_default.a.createElement("div", { 29534 className: Upload_default.a.buttons 29535 }, /*#__PURE__*/react_default.a.createElement("button", { 29536 className: Upload_default.a.secondary, 29537 onClick: closeModal 29538 }, "Cancel"), /*#__PURE__*/react_default.a.createElement("button", { 29539 className: [Upload_default.a.primary, imageChanged && fileData.url ? Upload_default.a.activated : ''].join(' '), 29540 onClick: uploadClicked 29541 }, "Update")))), /*#__PURE__*/react_default.a.createElement(Modal["c" /* ModalWindow */], { 29542 show: feedbackPopUp, 29543 popup: true 29544 }, /*#__PURE__*/react_default.a.createElement(Popup["a" /* default */], { 29545 title: feedbackPopUpTitle, 29546 content: feedbackPopUpContent, 29547 type: "feedback", 29548 onCancelClick: () => { 29549 onCloseFeedbackPopUp(); 29550 } 29551 }))); 29552} 29553// EXTERNAL MODULE: ./src/components/Modal/Content/NewFolder/NewFolder.css 29554var NewFolder = __webpack_require__("ZdqS"); 29555var NewFolder_default = /*#__PURE__*/__webpack_require__.n(NewFolder); 29556 29557// CONCATENATED MODULE: ./src/components/Modal/Content/NewFolder/NewFolder.js 29558 29559 29560 29561function NewFolderModalContent(props) { 29562 const defaultFolderName = "New Folder"; 29563 const [folderName, setFolderName] = Object(react["useState"])(defaultFolderName); 29564 const createClicked = Object(react["useCallback"])(async e => { 29565 const name = folderName.trim().length > 0 ? folderName.trim() : defaultFolderName; 29566 props.closeModal(); 29567 await props.createFolder(name, msg => { 29568 props.setNotification(msg || "Creating Folder wasn't finished. There was an error", true); 29569 }); 29570 setFolderName(''); 29571 }); 29572 const inputChanged = Object(react["useCallback"])(async e => { 29573 let value = e.target.value.trimLeft(); 29574 setFolderName(value); 29575 }); 29576 const handleFocus = Object(react["useCallback"])(event => event.target.select()); 29577 return /*#__PURE__*/react_default.a.createElement("div", { 29578 className: NewFolder_default.a.createFolderModal 29579 }, /*#__PURE__*/react_default.a.createElement(Modal["b" /* ModalCloseButton */], { 29580 onClick: props.closeModal 29581 }), /*#__PURE__*/react_default.a.createElement("span", null, "Folder name:"), /*#__PURE__*/react_default.a.createElement("input", { 29582 type: "text", 29583 autoFocus: true, 29584 onFocus: handleFocus, 29585 placeholder: "New folder", 29586 value: folderName, 29587 className: NewFolder_default.a.folderName, 29588 onChange: inputChanged, 29589 onKeyPress: e => e.key === 'Enter' && createClicked() 29590 }), /*#__PURE__*/react_default.a.createElement("div", { 29591 className: NewFolder_default.a.buttons 29592 }, /*#__PURE__*/react_default.a.createElement("button", { 29593 className: NewFolder_default.a.secondary, 29594 onClick: props.closeModal 29595 }, "Cancel"), /*#__PURE__*/react_default.a.createElement("button", { 29596 className: [NewFolder_default.a.primary, NewFolder_default.a.activated].join(' '), 29597 onClick: createClicked 29598 }, "Create"))); 29599} 29600// EXTERNAL MODULE: ./src/components/Modal/Content/NewBlankClip/NewBlankClip.css 29601var NewBlankClip = __webpack_require__("8HDH"); 29602var NewBlankClip_default = /*#__PURE__*/__webpack_require__.n(NewBlankClip); 29603 29604// EXTERNAL MODULE: ./src/utils/utils.js 29605var utils = __webpack_require__("+n12"); 29606 29607// CONCATENATED MODULE: ./src/components/Modal/Content/NewBlankClip/NewBlankClip.js 29608 29609 29610 29611 29612function NewBlankClipModalContent(props) { 29613 const defaultClipName = "New Clip";
29614 const [width, setWidth] = Object(react["useState"])(640); 29615 const [height, setHeight] = Object(react["useState"])(480); 29616 const [clipName, setClipName] = Object(react["useState"])(defaultClipName); 29617 const createClicked = Object(react["useCallback"])(async e => { 29618 const name = clipName.trim().length > 0 ? clipName.trim() : defaultClipName; 29619 const w = isNaN(parseFloat(width)) ? 640 : parseFloat(width); 29620 const h = isNaN(parseFloat(height)) ? 640 : parseFloat(height); 29621 props.closeModal(); 29622 let clipData = { 29623 title: name, 29624 image: Object(utils["j" /* getBlankClipImage */])(w, h) 29625 }; 29626 await props.createClip(clipData, msg => { 29627 props.setNotification(msg || "Creating Clip wasn't finished. There was an error", true); 29628 }); 29629 }); 29630 const inputChanged = Object(react["useCallback"])(async e => { 29631 setClipName(e.target.value.trimLeft()); 29632 }); 29633 const widthChanged = Object(react["useCallback"])(async e => { 29634 setWidth(e.target.value.trimLeft()); 29635 }); 29636 const heightChanged = Object(react["useCallback"])(async e => { 29637 setHeight(e.target.value.trimLeft()); 29638 }); 29639 const handleFocus = Object(react["useCallback"])(event => event.target.select()); 29640 return /*#__PURE__*/react_default.a.createElement("div", { 29641 className: NewBlankClip_default.a.newBlankClipModal 29642 }, /*#__PURE__*/react_default.a.createElement(Modal["b" /* ModalCloseButton */], { 29643 onClick: props.closeModal 29644 }), /*#__PURE__*/react_default.a.createElement("div", { 29645 className: NewBlankClip_default.a.modalTitle 29646 }, "Create a new blank clip:"), /*#__PURE__*/react_default.a.createElement("div", null, /*#__PURE__*/react_default.a.createElement("input", { 29647 type: "text", 29648 autoFocus: true, 29649 onFocus: handleFocus, 29650 placeholder: "New Clip", 29651 value: clipName, 29652 className: NewBlankClip_default.a.titleInput, 29653 onChange: inputChanged, 29654 onKeyPress: e => e.key === 'Enter' && createClicked() 29655 })), /*#__PURE__*/react_default.a.createElement("div", null, /*#__PURE__*/react_default.a.createElement("span", { 29656 className: NewBlankClip_default.a.titleText 29657 }, "Dimensions:"), /*#__PURE__*/react_default.a.createElement("div", { 29658 className: NewBlankClip_default.a.dimensionInputs 29659 }, /*#__PURE__*/react_default.a.createElement("div", { 29660 title: "w" 29661 }, /*#__PURE__*/react_default.a.createElement("input", { 29662 type: "text", 29663 className: NewBlankClip_default.a.dimInput, 29664 maxLength: "5", 29665 value: width, 29666 onChange: widthChanged 29667 })), /*#__PURE__*/react_default.a.createElement("div", { 29668 title: "h" 29669 }, /*#__PURE__*/react_default.a.createElement("input", { 29670 type: "text", 29671 className: NewBlankClip_default.a.dimInput, 29672 maxLength: "5", 29673 value: height, 29674 onChange: heightChanged 29675 })))), /*#__PURE__*/react_default.a.createElement("div", { 29676 className: NewBlankClip_default.a.buttons 29677 }, /*#__PURE__*/react_default.a.createElement("button", { 29678 className: NewBlankClip_default.a.secondary, 29679 onClick: props.closeModal 29680 }, "Cancel"), /*#__PURE__*/react_default.a.createElement("button", { 29681 className: [NewBlankClip_default.a.primary, NewBlankClip_default.a.activated].join(' '), 29682 onClick: createClicked 29683 }, "Create"))); 29684} 29685// EXTERNAL MODULE: ./src/components/Modal/Content/RemoveFolder/RemoveFolder.css 29686var RemoveFolder = __webpack_require__("myYb"); 29687var RemoveFolder_default = /*#__PURE__*/__webpack_require__.n(RemoveFolder); 29688 29689// CONCATENATED MODULE: ./src/components/Modal/Content/RemoveFolder/RemoveFolder.js 29690 29691 29692 29693function RemoveFolderModalContent(props) { 29694 const removeClicked = Object(react["useCallback"])(async e => { 29695 props.closeModal(); 29696 await props.removeFolder(props.currentFolder, msg => { 29697 props.setNotification(msg || "Removing Folder wasn't finished. There was an error", true); 29698 }); 29699 }); 29700 return /*#__PURE__*/react_default.a.createElement("div", { 29701 className: RemoveFolder_default.a.removeFolderModal 29702 }, /*#__PURE__*/react_default.a.createElement(Modal["b" /* ModalCloseButton */], { 29703 onClick: props.closeModal 29704 }), /*#__PURE__*/react_default.a.createElement("span", null, "Delete ", /*#__PURE__*/react_default.a.createElement("strong", null, props.title), " and send its content to the trash?"), /*#__PURE__*/react_default.a.createElement("div", { 29705 className: RemoveFolder_default.a.buttons 29706 }, /*#__PURE__*/react_default.a.createElement("button", { 29707 className: RemoveFolder_default.a.secondary, 29708 onClick: props.closeModal 29709 }, "Cancel"), /*#__PURE__*/react_default.a.createElement("button", { 29710 className: [RemoveFolder_default.a.primary, RemoveFolder_default.a.activated].join(' '), 29711 onClick: removeClicked 29712 }, "Remove"))); 29713} 29714// EXTERNAL MODULE: ./src/components/Modal/Content/RemoveClips/RemoveClips.css 29715var RemoveClips = __webpack_require__("j+y4"); 29716var RemoveClips_default = /*#__PURE__*/__webpack_require__.n(RemoveClips); 29717 29718// CONCATENATED MODULE: ./src/components/Modal/Content/RemoveClips/RemoveClips.js 29719 29720 29721 29722function RemoveClipsModalContent(props) { 29723 const removeClicked = Object(react["useCallback"])(async e => { 29724 props.closeModal(); 29725 await props.removeClips(msg => { 29726 props.setNotification(msg || "Removing Clips wasn't finished. There was an error", true); 29727 }, props.isAllClipsSelected); 29728 }); 29729 const onKeyUp = e => { 29730 if (e.key === "Enter") { 29731 removeClicked(); 29732 } 29733 }; 29734 Object(react["useEffect"])(() => { 29735 document.addEventListener("keyup", onKeyUp); 29736 return () => document.removeEventListener("keyup", onKeyUp); 29737 }); 29738 return /*#__PURE__*/react_default.a.createElement("div", { 29739 className: RemoveClips_default.a.removeFolderModal 29740 }, /*#__PURE__*/react_default.a.createElement(Modal["b" /* ModalCloseButton */], { 29741 onClick: props.closeModal 29742 }), props.currentFolder == "trash" ? /*#__PURE__*/react_default.a.createElement("span", null, "Sure you want to delete this clip? ", /*#__PURE__*/react_default.a.createElement("br", null), " This action can't be und
29742one") : /*#__PURE__*/react_default.a.createElement("span", null, "Are you sure you want to remove selected clips?"), /*#__PURE__*/react_default.a.createElement("div", { 29743 className: RemoveClips_default.a.buttons 29744 }, /*#__PURE__*/react_default.a.createElement("button", { 29745 className: RemoveClips_default.a.secondary, 29746 onClick: props.closeModal 29747 }, "Cancel"), /*#__PURE__*/react_default.a.createElement("button", { 29748 className: [RemoveClips_default.a.primary, props.currentFolder == "trash" ? RemoveClips_default.a.deleteButton : RemoveClips_default.a.activated].join(' '), 29749 onClick: removeClicked 29750 }, "Remove"))); 29751} 29752// EXTERNAL MODULE: ./src/components/Modal/Content/SelectDestinationFolder/SelectDestinationFolder.css 29753var SelectDestinationFolder = __webpack_require__("L6Tz"); 29754var SelectDestinationFolder_default = /*#__PURE__*/__webpack_require__.n(SelectDestinationFolder); 29755 29756// CONCATENATED MODULE: ./src/components/Modal/Content/SelectDestinationFolder/SelectDestinationFolder.js 29757 29758 29759 29760function SelectDestinationFolder_SelectDestinationFolder(props) { 29761 const [selectedFolder, setSelectedFolder] = Object(react["useState"])(false); 29762 const moveClicked = Object(react["useCallback"])(async e => { 29763 props.closeModal(); 29764 await props.moveToFolder(selectedFolder, msg => { 29765 props.setNotification(msg || "There was an error moving the clips to that destination folder", true); 29766 }); 29767 }); 29768 const showNewFolderModal = Object(react["useCallback"])(() => { 29769 props.closeModal(); 29770 props.setNewFolderBeforeMovingClips(); 29771 }); 29772 // const inputChanged = useCallback(async (e) => { 29773 // setFolderName(e.target.value.trimLeft()) 29774 // }) 29775 29776 // const handleFocus = useCallback((event) => event.target.select()); 29777 29778 // const preventDefault = useCallback(e => e.preventDefault()) 29779 // const removeHover = useCallback(e => { 29780 // e.target.classList.remove(styles.hovered) 29781 // }) 29782 const folderSelected = Object(react["useCallback"])((e, folderId) => { 29783 setSelectedFolder(folderId); 29784 for (let i = 0; i < e.target.parentElement.childElementCount; i++) { 29785 e.target.parentElement.children[i].classList.remove(SelectDestinationFolder_default.a.hovered); 29786 } 29787 e.target.classList.add(SelectDestinationFolder_default.a.hovered); 29788 }); 29789 const isTrashFolder = 'trash' === props.currentFolder; 29790 return /*#__PURE__*/react_default.a.createElement("div", { 29791 className: SelectDestinationFolder_default.a.selectDestinationFolderModal 29792 }, /*#__PURE__*/react_default.a.createElement(Modal["b" /* ModalCloseButton */], { 29793 onClick: props.closeModal 29794 }), /*#__PURE__*/react_default.a.createElement("div", { 29795 className: SelectDestinationFolder_default.a.title 29796 }, "Select destination folder:"), /*#__PURE__*/react_default.a.createElement("div", { 29797 className: SelectDestinationFolder_default.a.folderListContainer 29798 }, props.folders.length == 0 ? /*#__PURE__*/react_default.a.createElement("div", { 29799 className: SelectDestinationFolder_default.a.folderListEmpty 29800 }, "There are no other folders, ", /*#__PURE__*/react_default.a.createElement("span", { 29801 className: SelectDestinationFolder_default.a.folderListEmptySpan, 29802 onClick: showNewFolderModal 29803 }, "create a new one and move clip(s)")) : props.folders.length == 1 && props.currentFolder && !isTrashFolder ? /*#__PURE__*/react_default.a.createElement("div", { 29804 className: SelectDestinationFolder_default.a.onlyOneFolderContainer 29805 }, /*#__PURE__*/react_default.a.createElement("div", { 29806 className: [SelectDestinationFolder_default.a.currentFolder, props.currentFolder == null || props.currentFolder == false ? SelectDestinationFolder_default.a.homeFolder : "", props.currentFolder == "trash" && SelectDestinationFolder_default.a.trashFolder, props.sharedFolder == "public" && SelectDestinationFolder_default.a.sharedFolder].join(" ") 29807 }, props.currentFolderTitle), /*#__PURE__*/react_default.a.createElement("div", { 29808 className: SelectDestinationFolder_default.a.onlyOneFolder 29809 }, "There are no other folders, ", /*#__PURE__*/react_default.a.createElement("span", { 29810 className: SelectDestinationFolder_default.a.folderListEmptySp
29810an, 29811 onClick: showNewFolderModal 29812 }, "create a new one and move clip(s)"))) : /*#__PURE__*/react_default.a.createElement("div", { 29813 className: SelectDestinationFolder_default.a.folders 29814 }, /*#__PURE__*/react_default.a.createElement("div", null, /*#__PURE__*/react_default.a.createElement("div", { 29815 className: [SelectDestinationFolder_default.a.currentFolder, props.currentFolder == null || props.currentFolder == false ? SelectDestinationFolder_default.a.homeFolder : "", props.currentFolder == "trash" && SelectDestinationFolder_default.a.trashFolder, props.sharedFolder == "public" && SelectDestinationFolder_default.a.sharedFolder].join(" ") 29816 }, props.currentFolderTitle), props.folders.map((folder, i) => { 29817 const isCurrentFolder = folder.folderId === props.currentFolder; 29818 const isSharedFolder = folder.privacy == "public"; 29819 if (folder.folderId != props.currentFolder) { 29820 return /*#__PURE__*/react_default.a.createElement("div", { 29821 key: i, 29822 className: [SelectDestinationFolder_default.a.folder, isSharedFolder ? SelectDestinationFolder_default.a.sharedFolder : isCurrentFolder ? SelectDestinationFolder_default.a.selectedFolder : ""].join(' '), 29823 onClick: e => folderSelected(e, folder.folderId) 29824 }, folder.title); 29825 } 29826 })))), /*#__PURE__*/react_default.a.createElement("div", { 29827 className: SelectDestinationFolder_default.a.buttons 29828 }, /*#__PURE__*/react_default.a.createElement("button", { 29829 className: SelectDestinationFolder_default.a.secondary, 29830 onClick: props.closeModal 29831 }, "Cancel"), /*#__PURE__*/react_default.a.createElement("button", { 29832 className: [SelectDestinationFolder_default.a.primary, selectedFolder ? SelectDestinationFolder_default.a.activated : ""].join(' '), 29833 onClick: moveClicked 29834 }, "Move"))); 29835} 29836// EXTERNAL MODULE: ./src/components/Modal/Content/RenameFolder/RenameFolder.css 29837var RenameFolder = __webpack_require__("x7sU"); 29838var RenameFolder_default = /*#__PURE__*/__webpack_require__.n(RenameFolder); 29839 29840// CONCATENATED MODULE: ./src/components/Modal/Content/RenameFolder/RenameFolder.js 29841 29842 29843 29844function RenameFolderModalContent(props) { 29845 const [folderName, setFolderName] = Object(react["useState"])(props.oldFolderTitle); 29846 const renameClicked = Object(react["useCallback"])(async e => { 29847 props.closeModal(); 29848 await props.renameFolder({ 29849 folderId: props.currentFolder, 29850 title: folderName 29851 }, msg => { 29852 props.setNotification(msg || "Renaming Folder wasn't finished. There was an error", true); 29853 }); 29854 }); 29855 const inputChanged = Object(react["useCallback"])(async e => { 29856 setFolderName(e.target.value.trimLeft()); 29857 }); 29858 const handleFocus = Object(react["useCallback"])(event => event.target.select()); 29859 return /*#__PURE__*/react_default.a.createElement("div", { 29860 className: RenameFolder_default.a.renameFolderModal 29861 }, /*#__PURE__*/react_default.a.createElement(Modal["b" /* ModalCloseButton */], { 29862 onClick: props.closeModal 29863 }), /*#__PURE__*/react_default.a.createElement("span", null, "Folder name:"), /*#__PURE__*/react_default.a.createElement("input", { 29864 type: "text", 29865 placeholder: "Folder title", 29866 value: folderName, 29867 className: RenameFolder_default.a.folderName, 29868 onChange: inputChanged, 29869 autoFocus: true, 29870 onFocus: handleFocus, 29871 onKeyPress: e => e.key === 'Enter' && renameClicked() 29872 }), /*#__PURE__*/react_default.a.createElement("div", { 29873 className: RenameFolder_default.a.buttons 29874 }, /*#__PURE__*/react_default.a.createElement("button", { 29875 className: RenameFolder_default.a.secondary, 29876 onClick: props.closeModal 29877 }, "Cancel"), /*#__PURE__*/react_default.a.createElement("button", { 29878 className: [RenameFolder_default.a.primary, folderName.length > 0 ? RenameFolder_default.a.activated : ''].join(' '), 29879 onClick: renameClicked 29880 }, "Rename"))); 29881} 29882// EXTERNAL MODULE: ./src/components/Modal/Content/RenameClip/RenameClip.css 29883var RenameClip = __webpack_require__("EXP5"); 29884var RenameClip_default = /*#__PURE__*/__webpack_require__.n(RenameClip); 29885 29886// EXTERNAL MODULE: ./node_modules/react-redux/es/index.js + 22 modules 29887var es = __webpack_require__("/MKj"); 29888 29889// CONCATENATED MODULE: ./src/components/Modal/Content/RenameClip/RenameClip.js 29890 29891 29892 29893 29894const RenameClipModalContent = function (props) { 29895 const [clipName, setClipName] = Object(react["useState"])(props.oldClipTitle); 29896 const renameClicked = Object(react["useCallback"])(async e => { 29897 props.closeModal(); 29898 await props.renameClip({ 29899 clipId: props.actionClipId, 29900 title: clipName 29901 }, msg => { 29902 props.setNotification(msg || "Renaming Clip wasn't finished. There was an error"); 29903 }); 29904 }); 29905 const inputChanged = Object(react["useCallback"])(async e => { 29906 setClipName(e.target.value.trimLeft()); 29907 }); 29908 const handleFocus = Object(react["useCallback"])(event => event.target.select()); 29909 return /*#__PURE__*/react_default.a.createElement("div", { 29910 className: RenameClip_default.a.renameClipModal 29911 }, /*#__PURE__*/react_default.a.createElement(Modal["b" /* ModalCloseButton */], { 29912 onClick: props.closeModal 29913 }), /*#__PURE__*/react_default.a.createElement("span", null, "Clip title:"), /*#__PURE__*/react_default.a.createElement("input", { 29914 type: "text", 29915 placeholder: "Clip title", 29916 value: clipName, 29917 className: RenameClip_default.a.clipName, 29918 onKeyDown: e => e.nativeEvent.stopPropagation(), 29919 autoFocus: true, 29920 onFocus: handleFocus, 29921 onKeyPress: e => e.key === 'Enter' && renameClicked(), 29922 onChange: inputChanged 29923 }), /*#__PURE__*/react_default.a.createElement("div", { 29924 className: RenameClip_default.a.buttons 29925 }, /*#__PURE__*/react_default.a.createElement("button", { 29926 className: RenameClip_default.a.secondary, 29927 onClick: props.closeModal 29928 }, "Cancel"), /*#__PURE__*/react_default.a.createElement("button", { 29929 className: [RenameClip_default.a.primary, clipName.length > 0 ? RenameClip_default.a.activated : ''].join(' '), 29930 onClick: renameClicked 29931 }, "Rename"))); 29932}; 29933/* harmony default export */ var RenameClip_RenameClip = (Object(es["b" /* connect */])(null, dispatch => { 29934 return { 29935 setNotification: message => dispatch({ 29936 type: 'SET_APP_NOTIFICATION', 29937 value: message 29938 }) 29939 }; 29940})(RenameClipModalContent)); 29941// EXTERNAL MODULE: ./src/components/Modal/Content/MoveClips/MoveClips.css 29942var MoveClips = __webpack_require__("6izW"); 29943var MoveClips_default = /*#__PURE__*/__webpack_require__.n(MoveClips); 29944 29945// CONCATENATED MODULE: ./src/components/Modal/Content/MoveClips/MoveClips.js 29946 29947 29948 29949function MoveClipsModalContent(props) { 29950 const moveClicked = Object(react["useCallback"])(async () => { 29951 props.closeModal(); 29952 await props.moveToFolder(props.destFolderId, msg => { 29953 props.setNotification(msg || `Moving Clips to ${props.toFolderTitle} wasn't finished. There was an error`, true); 29954 }); 29955 }); 29956 Object(react["useEffect"])(() => { 29957 moveClicked(); 29958 }, [moveClicked]); 29959 return null; 29960 return /*#__PURE__*/react_default.a.createElement("div", { 29961 className: MoveClips_default.a.moveFolderModal 29962 }, /*#__PURE__*/react_default.a.createElement(Modal["b" /* ModalCloseButton */], { 29963 onClick: props.closeModal 29964 }), /*#__PURE__*/react_default.a.createElement("span", null, "Are you sure you want to move selected clips to ", props.toFolderTitle, "?"), /*#__PURE__*/react_default.a.createElement("div", { 29965 className: MoveClips_default.a.buttons 29966 }, /*#__PURE__*/react_default.a.createElement("button", { 29967 className: MoveClips_default.a.secondary, 29968 onClick: props.closeModal 29969 }, "Cancel"), /*#__PURE__*/react_default.a.createElement("button", { 29970 className: [MoveClips_default.a.primary, MoveClips_default.a.activated].join(' '), 29971 onClick: moveClicked 29972 }, "Move"))); 29973} 29974// EXTERNAL MODULE: ./src/components/Modal/Content/ShareClip/ShareClip.css 29975var ShareClip = __webpack_require__("y5S2"); 29976var ShareClip_default = /*#__PURE__*/__webpack_require__.n(ShareClip); 29977 29978// EXTERNAL MODULE: ./src/editor/mods/util.js 29979var util = __webpack_require__("p2J/"); 29980 29981// CONCATENATED MODULE: ./src/components/Modal/Content/ShareClip/ShareClip.js 29982 29983 29984 29985// import config from '../../../../config/constants' 29986 29987 29988const ShareClipModalContent = function (props) { 29989 const url = util["a" /* SITE_HOST */] + "/" + props.clipUrl; 29990 const namedUrl = util["a" /* SITE_HOST */] + "/" + props.clipUrl + '/' + props.title; 29991 const encodedUrl = encodeURI(url); 29992 const [value, setValue] = Object(react["useState"])(url); 29993 const twitterClicked = Object(react["useCallback"])(e => { 29994 const twitterUrl = `https://twitter.com/share?text=${encodeURIComponent(props.title)}&url=${encodedUrl}&hashtags=screenlink`; 29995 window.open(twitterUrl, "_blank"); 29996 }); 29997 const facebookClicked = Object(react["useCallback"])(e => { 29998 const twitterUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}&t=${encodeURIComponent(props.title)}`; 29999 window.open(twitterUrl, "_blank"); 30000 }); 30001 const html = Object(react["useRef"])(`<a href="${url}">${props.title}</a>`); 30002 const bbcode = Object(react["useRef"])(`[url=${url}]${props.title}[/url]`); 30003 const markdown = Object(react["useRef"])(`[${props.title}](${url})`); 30004 const messages = { 30005 [html]: 'HTML copied to the clipboard.', 30006 [bbcode]: 'BB code copied to the clipboard.', 30007 [markdown]: 'Markdown copied to the clipboard.', 30008 [namedUrl]: 'Named link copied to the clipboard.', 30009 [url]: 'Link copied to the clipboard.' 30010 }; 30011 const copyClicked = Object(react["useCallback"])(e => { 30012 navigator.clipboard.writeText(value); 30013 props.setNotification(messages[value] ? messages[value] : "Sharing data copied!"); 30014 props.closeModal(); 30015 }); 30016 return /*#__PURE__*/react_default.a.createElement("div", { 30017 className: ShareClip_default.a.shareModal 30018 }, /*#__PURE__*/react_default.a.createElement(Modal["b" /* ModalCloseButton */], { 30019 onClick: props.closeModal 30020 }), /*#__PURE__*/react_default.a.createElement("div", null, /*#__PURE__*/react_default.a.createElement("div", { 30021 className: ShareClip_default.a.socialSharing 30022 }, /*#__PURE__*/react_default.a.createElement("div", { 30023 className: ShareClip_default.a.twitter, 30024 onClick: twitterClicked 30025 }), /*#__PURE__*/react_default.a.createElement("div", { 30026 className: ShareClip_default.a.facebook, 30027 onClick: facebookClicked 30028 })), /*#__PURE__*/react_default.a.createElement("div", { 30029 className: ShareClip_default.a.sharing 30030 }, /*#__PURE__*/react_default.a.createElement("div", { 30031 className: url === value ? ShareClip_default.a.active : '', 30032 onClick: () => setValue(url) 30033 }, "URL"), /*#__PURE__*/react_default.a.createElement("div", { 30034 className: namedUrl === value ? ShareClip_default.a.active : '', 30035 onClick: () => setValue(namedUrl) 30036 }, "Named URL"), /*#__PURE__*/react_default.a.createElement("div", { 30037 className: bbcode.current === value ? ShareClip_default.a.active : '', 30038 onClick: () => setValue(bbcode.current) 30039 }, "BBCode"), /*#__PURE__*/react_default.a.createElement("div", { 30040 className: html.current === value ? ShareClip_default.a.active : '', 30041 onClick: () => setValue(html.current) 30042 }, "HTML"), /*#__PURE__*/react_default.a.createElement("div", { 30043 className: markdown.current === value ? ShareClip_default.a.active : '', 30044 onClick: () => setValue(markdown.current) 30045 }, "Markdown")), /*#__PURE__*/react_default.a.createElement("div", { 30046 className: ShareClip_default.a.inputContainer 30047 }, /*#__PURE__*/react_default.a.createElement("input", { 30048 type: "text", 30049 value: value, 30050 readOnly: true, 30051 className: ShareClip_default.a.Input 30052 }), /*#__PURE__*/react_default.a.createElement("div", { 30053 className: ShareClip_default.a.copyButton, 30054 onClick: copyClicked 30055 })))); 30056}; 30057/* harmony default export */ var ShareClip_ShareClip = (Object(es["b" /* connect */])(null, dispatch => { 30058 return { 30059 setNotification: message => dispatch({ 30060 type: 'SET_APP_NOTIFICATION', 30061 value: message 30062 }) 30063 }; 30064})(ShareClipModalContent)); 30065// EXTERNAL MODULE: ./src/components/Modal/Content/ShareFolder/ShareFolder.css 30066var ShareFolder = __webpack_require__("1C2E"); 30067var ShareFolder_default = /*#__PURE__*/__webpack_require__.n(ShareFolder); 30068 30069// EXTERNAL MODULE: ./src/config/constants.js 30070var constants = __webpack_require__("YwrL"); 30071 30072// CONCATENATED MODULE: ./src/components/Modal/Content/ShareFolder/ShareFolder.js 30073 30074 30075 30076 30077 30078const ShareFolderModalContent = function (props) { 30079 const url = constants["a" /* default */].host + 'folder/' + props.folderUrl; 30080 const encodedUrl = encodeURI(url); 30081 const [value, setValue] = Object(react["useState"])(url); 30082 const [sharedFolder, setSharedFolder] = Object(react["useState"])(props.sharedFolder); 30083 const twitterClicked = Object(react["useCallback"])(e => { 30084 const twitterUrl = `https://twitter.com/share?text=${encodeURIComponent(props.title)}&url=${encodedUrl}&hashtags=ScreenClip`; 30085 window.open(twitterUrl, "_blank"); 30086 }); 30087 const emailClicked = Object(react["useCallback"])(e => { 30088 const emailUrl = `mailto:?subject=Share Folder&body=Here is the link: ${value}`; 30089 window.open(emailUrl, "_blank"); 30090 }); 30091 const facebookClicked = Object(react["useCallback"])(e => { 30092 const twitterUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}&t=${encodeURIComponent(props.title)}`; 30093 window.open(twitterUrl, "_blank"); 30094 }); 30095 const copyClicked = Object(react["useCallback"])(e => { 30096 navigator.clipboard.writeText(value); 30097 props.setNotification("Folder link succesfully created and copied to clipboard."); 30098 props.closeModal(); 30099 }); 30100 const shareFolder = Object(react["useCallback"])(async e => { 30101 setSharedFolder("public"); 30102 await props.changeFolderPrivacy({ 30103 folderId: props.folderUrl, 30104 privacy: "public" 30105 }, msg => { 30106 props.setNotification(msg || "Setting the folder privacy to public wasn't finished. There was an error"); 30107 }); 30108 // props.closeModal() 30109 }); 30110 const disableLinkClicked = Object(react["useCallback"])(async e => { 30111 setSharedFolder("private"); 30112 await props.changeFolderPrivacy({ 30113 folderId: props.folderUrl, 30114 privacy: "private" 30115 }, msg => { 30116 props.setNotification(msg || "Setting the folder privacy to private wasn't finished. There was an error"); 30117 }); 30118 // props.closeModal() 30119 }); 30120 const html = Object(react["useRef"])(`<a href="${url}">${props.title}</a>`); 30121 const bbcode = Object(react["useRef"])(`[url=${url}]${props.title}[/url]`); 30122 return /*#__PURE__*/react_default.a.createElement("div", { 30123 className: ShareFolder_default.a.shareModal 30124 }, /*#__PURE__*/react_default.a.createElement(Modal["b" /* ModalCloseButton */], { 30125 onClick: props.closeModal 30126 }), /*#__PURE__*/react_default.a.createElement("div", null, /*#__PURE__*/react_default.a.createElement("div", { 30127 className: ShareFolder_default.a.shareFolderTitle 30128 }, "Share folder"), /*#__PURE__*/react_default.a.createElement("div", { 30129 className: ShareFolder_default.a.shareFolderSubtitle 30130 }, "Anyone with the link is able to view the content of \u201C", props.title, "\u201D folder"), /*#__PURE__*/react_default.a.createElement("div", { 30131 className: ShareFolder_default.a.socialSharing 30132 }, /*#__PURE__*/react_default.a.createElement("div", { 30133 className: ShareFolder_default.a.email, 30134 onClick: emailClicked 30135 }), /*#__PURE__*/react_default.a.createElement("div", { 30136 className: ShareFolder_default.a.twitter, 30137 onClick: twitterClicked 30138 }), /*#__PURE__*/react_default.a.createElement("div", { 30139 className: ShareFolder_default.a.facebook, 30140 onClick: facebookClicked 30141 })), sharedFolder == "private" ? /*#__PURE__*/react_default.a.createElement("div", { 30142 className: ShareFolder_default.a.generateShareableLink, 30143 onClick: shareFolder 30144 }, /*#__PURE__*/react_default.a.createElement("div", { 30145 className: ShareFolder_default.a.generateShereableLinkLabel 30146 }, "Generate shareable link")) : /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 30147 className: ShareFolder_default.a.inputContainer 30148 }, /*#__PURE__*/react_default.a.createElement("input", { 30149 type: "text", 30150 value: value, 30151 readOnly: true, 30152 className: ShareFolder_default.a.Input 30153 }), /*#__PURE__*/react_default.a.createElement("div", { 30154 className: ShareFolder_default.a.copyButton, 30155 onClick: copyClicked 30156 })), props.showDisableLink && /*#__PURE__*/react_default.a.createElement("div
30156", { 30157 className: ShareFolder_default.a.disableLink, 30158 onClick: disableLinkClicked 30159 }, "Disable link")))); 30160}; 30161/* harmony default export */ var ShareFolder_ShareFolder = (Object(es["b" /* connect */])(null, dispatch => { 30162 return { 30163 setNotification: message => dispatch({ 30164 type: 'SET_APP_NOTIFICATION', 30165 value: message 30166 }) 30167 }; 30168})(ShareFolderModalContent)); 30169// EXTERNAL MODULE: ./src/components/Modal/Content/UpdateUserName/UpdateUserName.css 30170var UpdateUserName = __webpack_require__("lisH"); 30171var UpdateUserName_default = /*#__PURE__*/__webpack_require__.n(UpdateUserName); 30172 30173// CONCATENATED MODULE: ./src/components/Modal/Content/UpdateUserName/UpdateUserName.js 30174 30175 30176 30177function UpdateUserName_UpdateUserName(props) { 30178 const [userName, setUserName] = Object(react["useState"])(props.oldUserName); 30179 const renameClicked = Object(react["useCallback"])(async e => { 30180 props.onClose(); 30181 await props.renameUserName({ 30182 userId: props.userId, 30183 displayName: userName 30184 }, msg => { 30185 props.setNotification(msg || "Renaming Folder wasn't finished. There was an error", true); 30186 }); 30187 }); 30188 const inputChanged = Object(react["useCallback"])(async e => { 30189 setUserName(e.target.value.trimLeft()); 30190 }); 30191 const handleFocus = Object(react["useCallback"])(event => event.target.select()); 30192 return /*#__PURE__*/react_default.a.createElement("div", { 30193 className: UpdateUserName_default.a.renameFolderModal 30194 }, /*#__PURE__*/react_default.a.createElement(Modal["b" /* ModalCloseButton */], { 30195 onClick: props.onClose 30196 }), /*#__PURE__*/react_default.a.createElement("span", null, "User Name:"), /*#__PURE__*/react_default.a.createElement("input", { 30197 type: "text", 30198 placeholder: "User Name", 30199 value: userName, 30200 className: UpdateUserName_default.a.userName, 30201 onChange: inputChanged, 30202 autoFocus: true, 30203 onFocus: handleFocus, 30204 onKeyPress: e => e.key === 'Enter' && renameClicked() 30205 }), /*#__PURE__*/react_default.a.createElement("div", { 30206 className: UpdateUserName_default.a.buttons 30207 }, /*#__PURE__*/react_default.a.createElement("button", { 30208 className: UpdateUserName_default.a.secondary, 30209 onClick: props.onClose 30210 }, "Cancel"), /*#__PURE__*/react_default.a.createElement("button", { 30211 className: [UpdateUserName_default.a.primary, userName.length > 0 ? UpdateUserName_default.a.activated : ''].join(' '), 30212 onClick: renameClicked 30213 }, "Rename"))); 30214} 30215// EXTERNAL MODULE: ./src/components/Modal/Content/ExpiredLink/ExpiredLink.css 30216var ExpiredLink = __webpack_require__("4TXh"); 30217var ExpiredLink_default = /*#__PURE__*/__webpack_require__.n(ExpiredLink); 30218 30219// CONCATENATED MODULE: ./src/components/Modal/Content/ExpiredLink/ExpiredLink.js 30220 30221 30222 30223function ExpiredLink_ExpiredLink(props) { 30224 return /*#__PURE__*/react_default.a.createElement("div", { 30225 className: ExpiredLink_default.a.renameFolderModal 30226 }, /*#__PURE__*/react_default.a.createElement(Modal["b" /* ModalCloseButton */], { 30227 onClick: props.closeModal 30228 }), /*#__PURE__*/react_default.a.createElement("div", { 30229 className: ExpiredLink_default.a['title'] 30230 }, "Link expired"), /*#__PURE__*/react_default.a.createElement("div", { 30231 className: ExpiredLink_default.a['sub-title'] 30232 }, props.mode == "resetPassword" ? "Please request a new link to recover the password" : "Please request a new Email Verification link"), /*#__PURE__*/react_default.a.createElement("div", { 30233 className: ExpiredLink_default.a["close-button-container"] 30234 }, /*#__PURE__*/react_default.a.createElement("button", { 30235 className: ExpiredLink_default.a["close-button"], 30236 onClick: props.closeModal 30237 }, "Close"))); 30238} 30239// EXTERNAL MODULE: ./src/components/Modal/Content/Onboarding/Onboarding.css 30240var Onboarding = __webpack_require__("kIDh"); 30241var Onboarding_default = /*#__PURE__*/__webpack_require__.n(Onboarding); 30242 30243// EXTERNAL MODULE: ./assets/images/screen.clip.icon.new.svg 30244var screen_clip_icon_new = __webpack_require__("1pYP"); 30245var screen_clip_icon_new_default = /*#__PURE__*/__webpack_require__.n(screen_clip_icon_new); 30246 30247// EXTERNAL MODULE: ./src/components/Auth/index.js + 2 modules 30248var Auth = __webpack_require__("2tX9"); 30249 30250// EXTERNAL MODULE: ./src/utils/app.utils.js 30251var app_utils = __webpack_require__("n8Gs"); 30252 30253// EXTERNAL MODULE: ./node_modules/axios/index.js 30254var axios = __webpack_require__("vDqi"); 30255var axios_default = /*#__PURE__*/__webpack_require__.n(axios); 30256 30257// EXTERNAL MODULE: ./node_modules/firebase/app/dist/index.cjs.js 30258var index_cjs = __webpack_require__("Wcq6"); 30259 30260// EXTERNAL MODULE: ./src/components/Modal/Content/Onboarding/Walkthrough/Walkthrough.css 30261var Walkthrough = __webpack_require__("yDfs"); 30262var Walkthrough_default = /*#__PURE__*/__webpack_require__.n(Walkthrough); 30263 30264// EXTERNAL MODULE: ./assets/images/walkthrough/[email protected] 30265var walkthrough_clipular_2x = __webpack_require__("cgwY"); 30266var walkthrough_clipular_2x_default = /*#__PURE__*/__webpack_require__.n(walkthrough_clipular_2x); 30267 30268// EXTERNAL MODULE: ./assets/images/walkthrough/[email protected] 30269var walkthrough_browser_extension_2x = __webpack_require__("49eV"); 30270var walkthrough_browser_extension_2x_default = /*#__PURE__*/__webpack_require__.n(walkthrough_browser_extension_2x); 30271 30272// EXTERNAL MODULE: ./assets/images/walkthrough/[email protected] 30273var walkthrough_create_2x = __webpack_require__("1NiX"); 30274var walkthrough_create_2x_default = /*#__PURE__*/__webpack_require__.n(walkthrough_create_2x); 30275 30276// EXTERNAL MODULE: ./assets/images/walkthrough/[email protected] 30277var walkthrough_web_editor_2x = __webpack_require__("u1jP"); 30278var walkthrough_web_editor_2x_default = /*#__PURE__*/__webpack_require__.n(walkthrough_web_editor_2x); 30279 30280// EXTERNAL MODULE: ./assets/images/walkthrough/[email protected]
30281var walkthrough_share_2x = __webpack_require__("sTVp"); 30282var walkthrough_share_2x_default = /*#__PURE__*/__webpack_require__.n(walkthrough_share_2x); 30283 30284// EXTERNAL MODULE: ./assets/images/walkthrough/[email protected] 30285var walkthrough_crisp_2x = __webpack_require__("XakR"); 30286var walkthrough_crisp_2x_default = /*#__PURE__*/__webpack_require__.n(walkthrough_crisp_2x); 30287 30288// EXTERNAL MODULE: ./assets/images/walkthrough/[email protected] 30289var walkthrough_storage_2x = __webpack_require__("Oswd"); 30290var walkthrough_storage_2x_default = /*#__PURE__*/__webpack_require__.n(walkthrough_storage_2x); 30291 30292// CONCATENATED MODULE: ./src/components/Modal/Content/Onboarding/Walkthrough/Walkthrough.js 30293 30294 30295 30296 30297 30298 30299 30300 30301 30302 30303function Walkthrough_Walkthrough(props) { 30304 var _props$currentUser; 30305 const [step, setStep] = Object(react["useState"])(0); 30306 const [walkthroughData, setWalkthroughData] = Object(react["useState"])([{ 30307 image: walkthrough_clipular_2x_default.a, 30308 title: 'Import your Clipular clips', 30309 text: /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, "Welcome to the new Clipular! Import your information from the Settings."), 30310 button: null 30311 }, { 30312 image: walkthrough_browser_extension_2x_default.a, 30313 title: 'Get the Browser Extension', 30314 text: /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, "Take ", /*#__PURE__*/react_default.a.createElement("b", null, "screenshots"), " using the ", /*#__PURE__*/react_default.a.createElement("b", null, "snipping tool"), ", ", /*#__PURE__*/react_default.a.createElement("b", null, "visible area"), " or ", /*#__PURE__*/react_default.a.createElement("b", null, "full page"), " modes. Then ", /*#__PURE__*/react_default.a.createElement("b", null, "annotate"), " and ", /*#__PURE__*/react_default.a.createElement("b", null, "share"), " them with the links. It\u2019s free!"), 30315 button: { 30316 name: 'Get Extension', 30317 link: 'https://chromewebstore.google.com/detail/screenclip-screenshot-com/jmjbgcjbgmcfgbgikmbdioggjlhjegpp', 30318 class: 'action-button-blue' 30319 } 30320 }, { 30321 image: walkthrough_create_2x_default.a, 30322 title: 'Add images, create white boards and folders', 30323 text: /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, "Create ", /*#__PURE__*/react_default.a.createElement("b", null, "blank boards"), ", add images using the ", /*#__PURE__*/react_default.a.createElement("b", null, "file explorer"), ", pasting with ", /*#__PURE__*/react_default.a.createElement("b", null, "CTRL + V"), ", or ", /*#__PURE__*/react_default.a.createElement("b", null, "drag and drop"), " multiple images at once to create your clips."), 30324 button: null 30325 }, { 30326 image: walkthrough_web_editor_2x_default.a, 30327 title: 'Annotate your images', 30328 text: /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, "Highlight anything with the highlighter or pen, add shapes, arrows, text, and blur sensitive information; all you need to complete your tasks with ease."), 30329 button: null 30330 }, { 30331 image: walkthrough_share_2x_default.a, 30332 title: 'Share your clips', 30333 text: /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, "Paste the clip\u2019s link on third party platforms like Slack or X and generate a preview. You can also copy the clip as an image or custom generated code (HTML, markdown, and BBCode)."), 30334 button: null 30335 }, { 30336 image: walkthrough_crisp_2x_default.a, 30337 title: 'ScreenClip knowledge base', 30338 text: /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, "Do you have questions? You are not alone here. Visit our ", /*#__PURE__*/react_default.a.createElement("b", null, "help platform"), " to find more information or contact a support agent using the integrated ", /*#__PURE__*/react_default.a.createElement("b", null, "chat"), "."), 30339 button: { 30340 name: 'Visit the help platform', 30341 link: 'https://helpdesk.screenclip.com/en/', 30342 class: 'action-button-gray' 30343 } 30344 }, { 30345 image: walkthrough_storage_2x_default.a, 30346 title: 'Need more storage?', 30347 text: /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, "Increase your cloud storage, create public views without the branding and send copies of your clips to Google Drive."), 30348 button: { 30349 name: 'View all plan features', 30350 link: 'https://screenclip.com/pricing', 30351 class: 'action-button-gray' 30352 } 30353 }]); 30354 Object(react["useLayoutEffect"])(() => { 30355 props.setShowLoader(false); 30356 }, []); 30357 if (!((_props$currentUser = props.currentUser) !== null && _props$currentUser !== void 0 && _props$currentUser.clipularTransferAvailable) && walkthroughData.length > 6) { 30358 // remove step 0 if clipularTransferAvailable is false 30359 setWalkthroughData(walkthroughData.slice(1)); 30360 } 30361 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 30362 className: Walkthrough_default.a['container'] 30363 }, /*#__PURE__*/react_default.a.createElement("button", { 30364 className: Walkthrough_default.a['cross'], 30365 onClick: () => props.closeModal() 30366 }), /*#__PURE__*/react_default.a.createElement("img", { 30367 alt: "Step 1", 30368 src: walkthroughData[step].image, 30369 className: Walkthrough_default.a['image'] 30370 }), /*#__PURE__*/react_default.a.createElement("span", { 30371 className: Walkthrough_default.a['title'] 30372 }, walkthroughData[step].title), /*#__PURE__*/react_default.a.createElement("span", { 30373 className: Walkthrough_default.a['text'] 30374 }, walkthroughData[step].text), walkthroughData[step].button && /*#__PURE__*/react_default.a.createElement("button", { 30375 className: Walkthrough_default.a[walkthroughData[step].button.class], 30376 onClick: () => window.open(walkthroughData[step].button.link) 30377 }, walkthroughData[step].button.name), /*#__PURE__*/react_default.a.createElement("div", { 30378 className: Walkthrough_default.a['stepper'], 30379 style: walkthroughData.length > 6 ? { 30380 width: '130px' 30381 } : null 30382 }, walkthroughData.map((_, i) => /*#__PURE__*/react_default.a.createElement("span", { 30383 className: [Walkthrough_default.a['step'], step === i ? Walkthrough_default.a['active-step'] : ''].join(' '), 30384 key: i 30385 }))), /*#__PURE__*/react_default.a.createElement("div", { 30386 className: Walkthrough_default.a['buttons-container'] 30387 }, /*#__PURE__*/react_default.a.createElement("button", { 30388 className: Walkthrough_default.a['previous-button'], 30389 style: step < 1 ? { 30390 visibility: 'hidden' 30391 } : null, 30392 onClick: () => setStep(step - 1) 30393 }, "Previous"), step < walkthroughData.length - 1 ? /*#__PURE__*/react_default.a.createElement("button", { 30394 className: Walkthrough_default.a['next-button'], 30395 onClick: () => setStep(step + 1) 30396 }, "Next \u2192") : /*#__PURE__*/react_default.a.createElement("button", { 30397 className: Walkthrough_default.a['start-button'], 30398 onClick: () => props.closeModal() 30399 }, "Start!")))); 30400} 30401let mapStateToProps = state => { 30402 return { 30403 currentUser: state.app.user 30404 }; 30405}; 30406/* harmony default export */ var Onboarding_Walkthrough_Walkthrough = (Object(es["b" /* connect */])(mapStateToProps, null, null, { 30407 forwardRef: true 30408})(Walkthrough_Walkthrough)); 30409// CONCATENATED MODULE: ./src/components/Modal/Content/Onboarding/Onboarding.js 30410 30411 30412 30413 30414 30415 30416 30417 30418 30419 30420 30421 30422function Onboarding_Onboarding(props) { 30423 const [imgSrc, setImgSrc] = Object(react["useState"])(""); 30424 let fileRef = Object(react["useRef"])(null); 30425 let dragAndDropRef = Object(react["useRef"])(null); 30426 const [showLoader, setShowLoader] = Object(react["useState"])(false); 30427 const userName = Object(react["useRef"])(null); 30428 const userLastName = Object(react["useRef"])(null); 30429 Object(react["useEffect"])(() => { 30430 let name = props.currentUser.email.charAt(0).toUpperCase() + props.currentUser.email.slice(1); 30431 name = name.substr(0, name.indexOf('@')); 30432 if (name.substr(0, name.indexOf('-') >
30432 0)) { 30433 name = name.substr(0, name.indexOf('-')); 30434 } 30435 if (name.substr(0, name.indexOf('.'))) { 30436 name = name.substr(0, name.indexOf('.')); 30437 } 30438 userName.current.value = name.split(/[0-9]/)[0]; 30439 if (!dragAndDropRef.current) return; 30440 dragAndDropRef.current.addEventListener('dragover', onDragOver); 30441 dragAndDropRef.current.addEventListener("drop", onDrop); 30442 dragAndDropRef.current.addEventListener("dragleave", onDragEnd); 30443 dragAndDropRef.current.addEventListener("dragend", onDragEnd); 30444 return () => { 30445 if (!dragAndDropRef.current) return; 30446 document.removeEventListener("dragover", onDragOver); 30447 dragAndDropRef.current.removeEventListener("drop", onDrop); 30448 dragAndDropRef.current.removeEventListener("dragleave", onDragEnd); 30449 dragAndDropRef.current.removeEventListener("dragend", onDragEnd); 30450 }; 30451 }, []); 30452 const onDragOver = Object(react["useCallback"])(e => { 30453 e.preventDefault(); 30454 dragAndDropRef.current.classList.add(Onboarding_default.a.fileDragOver); 30455 }); 30456 const onDragEnd = Object(react["useCallback"])(e => { 30457 e.preventDefault(); 30458 dragAndDropRef.current.classList.remove(Onboarding_default.a.fileDragOver); 30459 }); 30460 const onDrop = Object(react["useCallback"])(async e => { 30461 e.preventDefault(); 30462 e.dataTransfer.dropEffect = 'move'; 30463 if (e.dataTransfer.files.length === 1) { 30464 handleFile(e.dataTransfer.files[0]); 30465 } else if (e.dataTransfer.files.length > 1) { 30466 props.setNotification("Please drop one image at a time"); 30467 } 30468 dragAndDropRef.current.classList.remove(Onboarding_default.a.fileDragOver); 30469 }); 30470 const chooseFileClicked = Object(react["useCallback"])(e => { 30471 fileRef.current.click(); 30472 }); 30473 const fileChanged = Object(react["useCallback"])(e => { 30474 if (e.target.files.length === 1) { 30475 handleFile(e.target.files[0]); 30476 } 30477 }); 30478 30479 // const showDefaultNoty = useCallback(() => { 30480 // props.setNotification("Please check your inbox to verify your account") 30481 // }, [props]); 30482 30483 // const showClipularUserNoty = useCallback(() => { 30484 // props.setNotification("Go to Settings after confirming your email to import your content.", false, { 30485 // buttonLabel: 'Settings', 30486 // href: '/settings', 30487 // manualHide: true, 30488 // icon: 'clipular', 30489 // }) 30490 // }, [props]); 30491 30492 const actionContinue = Object(react["useCallback"])(async function () { 30493 setShowLoader(true); 30494 // props.closeModal() 30495 const currentUser = props.currentUser; 30496 const response = await props.Auth.sendEmailVerification(userName.current.value, userLastName.current.value, currentUser); 30497 let isAble = false; 30498 if (response.onboardingPassed) { 30499 axios_default()({ 30500 method: 'get', 30501 url: `${constants["a" /* default */].apiUrl}/transfer/able` 30502 }).catch(error => console.error(error)).then(resp => { 30503 var _resp$data; 30504 return isAble = resp === null || resp === void 0 ? void 0 : (_resp$data = resp.data) === null || _resp$data === void 0 ? void 0 : _resp$data.able; 30505 }).finally(() => { 30506 const localUser = {}; 30507 localUser.clipularTransferAvailable = isAble; 30508 localUser.displayName = response.displayName; 30509 localUser.lastName = response.lastName; 30510 localUser.onboardingPassed = true; 30511 props.mergeUser(localUser); 30512 Object(utils["f" /* extensionUpdateUserdata */])({ 30513 displayName: response.displayName 30514 }); 30515 }); 30516 } else { 30517 props.setNotification("There was an error", true); 30518 } 30519 }); 30520 const handleFile = Object(react["useCallback"])(file => { 30521 const isImage = file.type === 'image/png' || file.type === 'image/jpeg'; 30522 if (!isImage) return; 30523 if (props.userImage) { 30524 if (file.size / 1024 / 1024 > 1) { 30525 // setFeedbackPopUp(true) 30526 // setFeedbackPopUpTitle("Error") 30527 props.setNotification("The image most be smaller than 1 MB"); 30528 return; 30529 } 30530 } 30531 let r = new FileReader(); 30532 r.readAsDataURL(file); 30533 r.onloadend = () => { 30534 uploadImage({ 30535 url: r.result, 30536 name: file.name, 30537 displayName: file.name.substring(0, 20) + '...', 30538 size: formatSize(file.size), 30539 type: file.type 30540 }); 30541 }; 30542 }); 30543 const formatSize = Object(react["useCallback"])(size => { 30544 if (size > 1024 * 1024 * 1024 * 1024) return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB';else if (size > 1024 * 1024 * 1024) return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB';else if (size > 1024 * 1024) return (size / 1024 / 1024).toFixed(2) + ' MB';else if (size > 1024) return (size / 1024).toFixed(2) + ' KB'; 30545 return size.toString() + ' B'; 30546 }); 30547 async function uploadImage(data, onError) { 30548 setShowLoader(true); 30549 const res = await Object(app_utils["n" /* updateUserImage */])(data); 30550 if (res.error) { 30551 console.log("Update Username error:", res.error); 30552 if (onError) onError(); 30553 this.props.setAppLoading(false); 30554 return; 30555 } 30556 props.setImgSrc(data.url); 30557 props.currentUser.photoUrl = data.url; 30558 props.mergeUser({ 30559 photoUrl: data.url 30560 }); 30561 setImgSrc(data.url); 30562 setShowLoader(false); 30563 } 30564 if (props.currentUser.onboardingPassed) return /*#__PURE__*/react_default.a.createElement(Onboarding_Walkthrough_Walkthrough, { 30565 closeModal: props.closeModal, 30566 setShowLoader: setShowLoader 30567 }); 30568 return /*#__PURE__*/react_default.a.createElement(react_default.a.Fragment, null, /*#__PURE__*/react_default.a.createElement("div", { 30569 className: Onboarding_default.a['container'] 30570 }, /*#__PURE__*/react_default.a.createElement("span", { 30571 className: Onboarding_default.a.title 30572 }, "Welcome to ScreenClip!"), /*#__PURE__*/react_default.a.createElement("span", { 30573 className: Onboarding_default.a.subtitle 30574 }, "We are glad you are here.", /*#__PURE__*/react_default.a.createElement("br", null), "Let's set up your account first."), /*#__PURE__*/react_default.a.createElement("div", { 30575 className: Onboarding_default.a.dragAndDrop, 30576 ref: dragAndDropRef 30577 }, /*#__PURE__*/react_default.a.createElement("input", { 30578 "data-max-size": "1024", 30579 type: "file", 30580 ref: fileRef, 30581 accept: "image/jpeg, image/png", 30582 onChange: fileChanged, 30583 style: { 30584 display: 'none' 30585 } 30586 }), /*#__PURE__*/react_default.a.createElement("img", { 30587 className: Onboarding_default.a['image'], 30588 src: imgSrc || props.Auth.getCurrentUser().photoUrl || screen_clip_icon_new_default.a 30589 }), /*#__PURE__*/react_default.a.createElement("div", { 30590 className: Onboarding_default.a['dragAndDropMessage'] 30591 }, "Drop or ", /*#__PURE__*/react_default.a.createElement("span", { 30592 className: Onboarding_default.a['browse'], 30593 onClick: chooseFileClicked 30594 }, "browse"), " an image to ", /*#__PURE__*/react_default.a.createElement("br", null), " create your profile picture.")), /*#__PURE__*/react_default.a.createElement("div", { 30595 className: Onboarding_default.a['input-container'] 30596 }, /*#__PURE__*/react_default.a.createElement("input", { 30597 type: "text", 30598 placeholder: "First Name", 30599 autoCapitalize: "none", 30600 ref: userName
30601 // onChange={this.changed} 30602 // onKeyPress={e => e.key === 'Enter' && this.signIn()} 30603 , 30604 className: Onboarding_default.a["input"] 30605 }), /*#__PURE__*/react_default.a.createElement("input", { 30606 type: "text", 30607 placeholder: "Last Name", 30608 autoCapitalize: "none", 30609 ref: userLastName 30610 // onChange={this.changed} 30611 // onKeyPress={e => e.key === 'Enter' && this.signIn()} 30612 , 30613 className: Onboarding_default.a["input"] 30614 })), /*#__PURE__*/react_default.a.createElement("div", { 30615 className: Onboarding_default.a['bottom-message'] 30616 }, "This information is helpful for others to identify you."), /*#__PURE__*/react_default.a.createElement("div", { 30617 className: Onboarding_default.a['next-button-container'] 30618 }, /*#__PURE__*/react_default.a.createElement("button", { 30619 className: Onboarding_default.a['next-button'], 30620 onClick: actionContinue 30621 }, "Next \u2192"))), /*#__PURE__*/react_default.a.createElement(Loader["a" /* default */], { 30622 full: true, 30623 hidden: !showLoader 30624 })); 30625} 30626 30627// export default withAuth(Onboarding) 30628 30629/* harmony default export */ var Content_Onboarding_Onboarding = (Object(Auth["c" /* withAuth */])(Object(es["b" /* connect */])(null, dispatch => { 30630 return { 30631 mergeUser: changes => dispatch({ 30632 type: 'MERGE_USER', 30633 value: changes 30634 }), 30635 setNotification: (v, error, additional) => { 30636 const action = { 30637 type: "SET_APP_NOTIFICATION", 30638 value: v, 30639 error: !!error 30640 }; 30641 if (additional) { 30642 action.additional = additional; 30643 } 30644 return dispatch(action); 30645 }, 30646 setUser: user => dispatch({ 30647 type: "SET_USER", 30648 value: user 30649 }) 30650 }; 30651})(Onboarding_Onboarding))); 30652// EXTERNAL MODULE: ./src/components/Modal/Content/DisconnectFromGoogleDrive/DisconnectFromGoogleDrive.css 30653var DisconnectFromGoogleDrive = __webpack_require__("mY7j"); 30654var DisconnectFromGoogleDrive_default = /*#__PURE__*/__webpack_require__.n(DisconnectFromGoogleDrive); 30655 30656// CONCATENATED MODULE: ./src/components/Modal/Content/DisconnectFromGoogleDrive/DisconnectFromGoogleDrive.js 30657 30658 30659function DisconnectFromGoogleDrive_DisconnectFromGoogleDrive(props) { 30660 const disconnectOnlyClicked = Object(react["useCallback"])(async e => { 30661 props.onDisconnectOnly(); 30662 props.onClose(); 30663 }); 30664 const deleteGoogleDriveFolderAndDisconnectClicked = Object(react["useCallback"])(e => { 30665 props.onDeleteGoogleDriveFolderAndDisconnect(); 30666 props.onClose(); 30667 }); 30668 return /*#__PURE__*/react_default.a.createElement("div", { 30669 className: DisconnectFromGoogleDrive_default.a.disconnectFromGoogleDrive 30670 }, /*#__PURE__*/react_default.a.createElement("span", { 30671 className: DisconnectFromGoogleDrive_default.a.title 30672 }, "Disconnect from Google Drive"), /*#__PURE__*/react_default.a.createElement("div", { 30673 className: DisconnectFromGoogleDrive_default.a.subTitle 30674 }, "Would you like to clear the space we created for your information?"), /*#__PURE__*/react_default.a.createElement("div", { 30675 className: DisconnectFromGoogleDrive_default.a.buttons 30676 }, /*#__PURE__*/react_default.a.createElement("button", { 30677 className: DisconnectFromGoogleDrive_default.a.primary, 30678 onClick: disconnectOnlyClicked 30679 }, "Disconnect only"), /*#__PURE__*/react_default.a.createElement("button", { 30680 className: [DisconnectFromGoogleDrive_default.a.separation, DisconnectFromGoogleDrive_default.a.deleteFiles].join(' '), 30681 onClick: deleteGoogleDriveFolderAndDisconnectClicked 30682 }, "Clear and disconnect"), /*#__PURE__*/react_default.a.createElement("button", { 30683 className: DisconnectFromGoogleDrive_default.a.secondary, 30684 onClick: props.onClose 30685 }, "Cancel"))); 30686} 30687// CONCATENATED MODULE: ./src/components/Modal/Content/index.js 30688 30689 30690 30691 30692 30693 30694 30695 30696 30697 30698 30699 30700 30701 30702 30703const Modals = { 30704 UploadModalContent: UploadModalContent, 30705 NewFolderModalContent: NewFolderModalContent, 30706 NewBlankClipModalContent: NewBlankClipModalContent, 30707 RemoveFolderModalContent: RemoveFolderModalContent, 30708 RemoveClipsModalContent: RemoveClipsModalContent, 30709 ShareClipModalContent: ShareClip_ShareClip, 30710 ShareFolderModalContent: ShareFolder_ShareFolder, 30711 RenameFolderModalContent: RenameFolderModalContent, 30712 RenameClipModalContent: RenameClip_RenameClip, 30713 SelectDestinationFolder: SelectDestinationFolder_SelectDestinationFolder, 30714 MoveClipsModalContent: MoveClipsModalContent, 30715 UpdateUserName: UpdateUserName_UpdateUserName, 30716 ExpiredLink: ExpiredLink_ExpiredLink, 30717 Onboarding: Content_Onboarding_Onboarding, 30718 DisconnectFromGoogleDrive: DisconnectFromGoogleDrive_DisconnectFromGoogleDrive 30719}; 30720/* harmony default export */ var Content = __webpack_exports__["a"] = (Modals); 30721 30722/***/ }), 30723 30724/***/ "v117": 30725/***/ (function(module, exports, __webpack_require__) { 30726 30727// extracted by mini-css-extract-plugin 30728module.exports = {"page-403":"src-components-ErrorView-ErrorView__page-403--7-Wg4","page-404":"src-components-ErrorView-ErrorView__page-404--rKHHe","page":"src-components-ErrorView-ErrorView__page--w4joo","logged-in-button-container":"src-components-ErrorView-ErrorView__logged-in-button-container--FI43N","logged-out-button-container":"src-components-ErrorView-ErrorView__logged-out-button-container--Oc1nw","logged-out-button":"src-components-ErrorView-ErrorView__logged-out-button--WOuO-","logged-in-button":"src-components-ErrorView-ErrorView__logged-in-button--khO0j","message":"src-components-ErrorView-ErrorView__message--8hYAq","pointEventsNone":"src-components-ErrorView-ErrorView__pointEventsNone--DopCg"}; 30729 30730/***/ }), 30731 30732/***/ "vbs2": 30733/***/ (function(module, exports, __webpack_require__) { 30734 30735// extracted by mini-css-extract-plugin 30736module.exports = {"containerStyles":"src-components-ProgressBar-Progressbar__containerStyles--jEUTb","fillerStyles":"src-components-ProgressBar-Progressbar__fillerStyles--Lzz+k","labelStyles":"src-components-ProgressBar-Progressbar__labelStyles--2xvhm"}; 30737 30738/***/ }), 30739 30740/***/ "wX93": 30741/***/ (function(module, exports, __webpack_require__) { 30742 30743// extracted by mini-css-extract-plugin 30744module.exports = {"sharedFolder":"src-components-FolderList-FolderList__sharedFolder--QOHdI","folders":"src-components-FolderList-FolderList__folders--aapJ4","foldersWithLimitNoty":"src-components-FolderList-FolderList__foldersWithLimitNoty--mERxn","firstFolder":"src-components-FolderList-FolderList__firstFolder
30744--bYF1g","trashFolder":"src-components-FolderList-FolderList__trashFolder--Yqp-Y","SettingsFolderItem":"src-components-FolderList-FolderList__SettingsFolderItem--Ustf5","selectedFolder":"src-components-FolderList-FolderList__selectedFolder--nloES","hovered":"src-components-FolderList-FolderList__hovered--Zq2dp","folderOptions":"src-components-FolderList-FolderList__folderOptions--jK-ZS"}; 30745 30746/***/ }), 30747 30748/***/ "wXvf": 30749/***/ (function(module, exports, __webpack_require__) { 30750 30751// extracted by mini-css-extract-plugin 30752module.exports = {"ShareDialog":"ShareDialog","hidden":"hidden","lds-ripple":"lds-ripple","inner":"inner","buttons":"buttons","tabs":"tabs","active":"active","inputs":"inputs","in-url":"in-url","copy-btn":"copy-btn"}; 30753 30754/***/ }), 30755 30756/***/ "wj4Z": 30757/***/ (function(module, exports) { 30758 30759module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='a' width='172.7%25' height='172.7%25' x='-36.4%25' y='-36.4%25' filterUnits='objectBoundingBox'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='1'/%3E%3CfeColorMatrix in='shadowBlurOuter1' result='shadowMatrixOuter1' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.214758832 0'/%3E%3CfeMerge%3E%3CfeMergeNode in='shadowMatrixOuter1'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cfilter id='b' width='140%25' height='140%25' x='-20%25' y='-20%25' filterUnits='objectBoundingBox'%3E%3CfeOffset in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='1'/%3E%3CfeColorMatrix in='shadowBlurOuter1' result='shadowMatrixOuter1' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.21 0'/%3E%3CfeMerge%3E%3CfeMergeNode in='shadowMatrixOuter1'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='32' height='32'/%3E%3Ccircle cx='25' cy='8' r='5' fill='%23FFF' opacity='.504'/%3E%3Cg fill='%23000' fill-rule='nonzero' stroke='%23FFF' filter='url(%23a)' transform='translate(19 2)'%3E%3Cpath d='M5.5,-0.5 C7.15685425,-0.5 8.65685425,0.171572875 9.74264069,1.25735931 C10.8284271,2.34314575 11.5,3.84314575 11.5,5.5 C11.5,7.15685425 10.8284271,8.65685425 9.74264069,9.74264069 C8.65685425,10.8284271 7.15685425,11.5 5.5,11.5 C3.84314575,11.5 2.34314575,10.8284271 1.25735931,9.74264069 C0.171572875,8.65685425 -0.5,7.15685425 -0.5,5.5 C-0.5,3.84314575 0.171572875,2.34314575 1.25735931,1.25735931 C2.34314575,0.171572875 3.84314575,-0.5 5.5,-0.5 Z M5.5,1.5 C4.3954305,1.5 3.3954305,1.94771525 2.67157288,2.67157288 C1.94771525,3.3954305 1.5,4.3954305 1.5,5.5 C1.5,6.6045695 1.94771525,7.6045695 2.67157288,8.32842712 C3.3954305,9.05228475 4.3954305,9.5 5.5,9.5 C6.6045695,9.5 7.6045695,9.05228475 8.32842712,8.32842712 C9.05228475,7.6045695 9.5,6.6045695 9.5,5.5 C9.5,4.3954305 9.05228475,3.3954305 8.32842712,2.67157288 C7.6045695,1.94771525 6.6045695,1.5 5.5,1.5 Z'/%3E%3C/g%3E%3Cg fill='%23171819' stroke='%23FFF' filter='url(%23b)' transform='translate(2 10)'%3E%3Cpath d='M11.5,-0.5 L11.5,8.5 L20.5,8.5 L20.5,11.5 L11.5,11.5 L11.5,20.5 L8.5,20.5 L8.5,11.5 L-0.5,11.5 L-0.5,8.5 L8.5,8.5 L8.5,-0.5 L11.5,-0.5 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E" 30760 30761/***/ }), 30762 30763/***/ "x+nE": 30764/***/ (function(module, exports, __webpack_require__) { 30765 30766// extracted by mini-css-extract-plugin 30767module.exports = {"root":"src-screens-SetResetPassword-SetResetPassword__root---Jpbj","email":"src-screens-SetResetPassword-SetResetPassword__email--DSwkg","column":"src-screens-SetResetPassword-SetResetPassword__column--lR3E0","logo":"src-screens-SetResetPassword-SetResetPassword__logo--iUZVW","header":"src-screens-SetResetPassword-SetResetPassword__header--rCB6F","descline":"src-screens-SetResetPassword-SetResetPassword__descline--r+tCu","buttonGoogleAuth":"src-screens-SetResetPassword-SetResetPassword__buttonGoogleAuth--pfoj1","formbox":"src-screens-SetResetPassword-SetResetPassword__formbox--9TFt5","transparent":"src-screens-SetResetPassword-SetResetPassword__transparent--dPNz5","buttonSubmit":"src-screens-SetResetPassword-SetResetPassword__buttonSubmit--m2SEf","blockedSubmit":"src-screens-SetResetPassword-SetResetPassword__blockedSubmit--7xr96","loader":"src-screens-SetResetPassword-SetResetPassword__loader--a7a-Q"}; 30768 30769/***/ }), 30770 30771/***/ "x4HX": 30772/***/ (function(module, exports, __webpack_require__) { 30773 30774// extracted by mini-css-extract-plugin 30775module.exports = {"boldEmail":"src-screens-Unsubscribed-Unsubscribed__boldEmail--Fs
30775FUS","MainTypo":"src-screens-Unsubscribed-Unsubscribed__MainTypo--+PsQV","description":"src-screens-Unsubscribed-Unsubscribed__description--LvZ1B","new-ticket-btn":"src-screens-Unsubscribed-Unsubscribed__new-ticket-btn--w8XRf","privacy-container":"src-screens-Unsubscribed-Unsubscribed__privacy-container--O2Bsq"}; 30776 30777/***/ }), 30778 30779/***/ "x7sU": 30780/***/ (function(module, exports, __webpack_require__) { 30781 30782// extracted by mini-css-extract-plugin 30783module.exports = {"folderName":"src-components-Modal-Content-RenameFolder-RenameFolder__folderName--14o-v","buttons":"src-components-Modal-Content-RenameFolder-RenameFolder__buttons--R7q65","primary":"src-components-Modal-Content-RenameFolder-RenameFolder__primary--ABcZV","activated":"src-components-Modal-Content-RenameFolder-RenameFolder__activated--91N1G","secondary":"src-components-Modal-Content-RenameFolder-RenameFolder__secondary--m2vms","renameFolderModal":"src-components-Modal-Content-RenameFolder-RenameFolder__renameFolderModal--TwRP7","error":"src-components-Modal-Content-RenameFolder-RenameFolder__error--5sF6Z"}; 30784 30785/***/ }), 30786 30787/***/ "xQZx": 30788/***/ (function(module, exports) { 30789 30790module.exports = "data:image/svg+xml,%3Csvg width='27' height='26' viewBox='0 0 27 26' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M13.75 6a.75.75 0 0 1 .75.75V12h5.25a.75.75 0 1 1 0 1.5H14.5v5.75a.75.75 0 1 1-1.5 0V13.5H7.25a.75.75 0 1 1 0-1.5H13V6.75a.75.75 0 0 1 .75-.75z' fill='%232F3C4D' fill-rule='evenodd'/%3E %3C/svg%3E" 30791 30792/***/ }), 30793 30794/***/ "xW3e": 30795/***/ (function(module, exports, __webpack_require__) { 30796 30797// extracted by mini-css-extract-plugin 30798module.exports = {"SCIM":"SCIM","root":"root","preview-mode":"preview-mode","__scim-clipclipMode-Element__":"__scim-clipclipMode-Element__","Previewer":"Previewer","slembedded":"slembedded","embed-version":"embed-version","loading":"loading","hidden":"hidden","captureMode":"captureMode","clipped":"clipped","imageMode":"imageMode","noPointerEvents":"noPointerEvents","CursorInfo":"CursorInfo","menuOpened":"menuOpened","topMobileToolbar":"topMobileToolbar","downloadClip":"downloadClip","copyLink":"copyLink","showMenuBar":"showMenuBar","shareClip":"shareClip","__scim-pageInteractionsMode__":"__scim-pageInteractionsMode__","__scim-clipclipMode__":"__scim-clipclipMode__"}; 30799 30800/***/ }), 30801 30802/***/ "y5S2": 30803/***/ (function(module, exports, __webpack_require__) { 30804 30805// extracted by mini-css-extract-plugin 30806module.exports = {"shareModal":"src-components-Modal-Content-ShareClip-ShareClip__shareModal--r-zRN","socialSharing":"src-components-Modal-Content-ShareClip-ShareClip__socialSharing--Ck6Sa","facebook":"src-components-Modal-Content-ShareClip-ShareClip__facebook--psh-g","twitter":"src-components-Modal-Content-ShareClip-ShareClip__twitter--aTAE+","sharing":"src-components-Modal-Content-ShareClip-ShareClip__sharing--lXXNQ","active":"src-components-Modal-Content-ShareClip-ShareClip__active--6viWu","inputContainer":"src-components-Modal-Content-ShareClip-ShareClip__inputContainer--Rki0E","Input":"src-components-Modal-Content-ShareClip-ShareClip__Input--eU-CM","copyButton":"src-components-Modal-Content-ShareClip-ShareClip__copyButton--JdS11"}; 30807 30808/***/ }), 30809 30810/***/ "yDfs": 30811/***/ (function(module, exports, __webpack_require__) { 30812 30813// extracted by mini-css-extract-plugin 30814module.exports = {"container":"src-components-Modal-Content-Onboarding-Walkthrough-Walkthrough__container--Gmev3","cross":"src-components-Modal-Content-Onboarding-Walkthrough-Walkthrough__cross--J1jlz","image":"src-components-Modal-Content-Onboarding-Walkthrough-Walkthrough__image--g+1GS","title":"src-components-Modal-Content-Onboarding-Walkthrough-Walkthrough__title--QMX-I","text":"src-components-Modal-Content-Onboarding-Walkthrough-Walkthrough__text--6gMwN","action-button-blue":"src-components-Modal-Content-Onboarding-Walkthrough-Walkthrough__action-button-blue--1gXgz","action-button-gray":"src-components-Modal-Content-Onboarding-Walkthrough-Walkthrough__action-button-gray--d93ML","stepper":"src-components-Modal-Content-Onboarding-Walkthrough-Walkthrough__stepper--X8+2b","step":"src-components-Modal-Content-Onboarding-Walkthrough-Walkthrough__step--ZTalV","active-step":"src-components-Modal-Content-Onboarding-Walkthrough-Walkthrough__active-step--NbdKA","buttons-container":"src-components-Modal-Content-Onboarding-Walkthrough-Walkthrough__buttons-container--IYV0D","previous-button":"src-components-Modal-Content-Onboarding-Walkthrough-Walkthrough__previous-button--Raid4","next-button":"src-components-Modal-Content-Onboarding-Walkthrough-Walkthrough__next-button--YMkZr","start-button":"src-components-Modal-Content-Onboarding-Walkthrough-Walkthrough__start-button--spjuF"}; 30815 30816/***/ }), 30817 30818/***/ "zEyB": 30819/***/ (function(module, exports, __webpack_require__) { 30820 30821// extracted by mini-css-extract-plugin 30822module.exports = {"upload":"src-components-Modal-Content-Upload-Upload__upload--wJeSn","hideModal":"src-components-Modal-Content-Upload-Upload__hideModal--1J+I8","img":"src-components-Modal-Content-Upload-Upload__img--UD7cp","text":"src-components-Modal-Content-Upload-Upload__text--1a8Jn","textFullScreenDrop":"src-components-Modal-Content-Upload-Upload__textFullScreenDrop--jxZdK","link":"src-components-Modal-Content-Upload-Upload__link--i-xg3","textContent":"src-components-Modal-Content-Upload-Upload__textContent--8y6BX","textContainer":"src-components-Modal-Content-Upload-Upload__textContainer--gah6x","buttons":"src-components-Modal-Content-Upload-Upload__buttons--QZlCW","selectButton":"src-components-Modal-Content-Upload-Upload__selectButton--n7gDK","primary":"src-components-Modal-Content-Upload-Upload__primary--O2sBk","activated":"src-components-Modal-Content-Upload-Upload__activated--JpOBJ","secondary":"src-components-Modal-Content-Upload-Upload__secondary--4N-0Y","inputsContainer":"src-components-Modal-Content-Upload-Upload__inputsContainer--4jB9P","dontShowAgainContainer":"src-components-Modal-Content-Upload-Upload__dontShowAgainContainer--BEfB7","dontShowAgain":"src-components-Modal-Content-Upload-Upload__dontShowAgain--0nA3i","loaderContainer":"src-components-Modal-Content-Upload-Upload__loaderContainer--8LMl-","clipContainer":"src-components-Modal-Content-Upload-Upload__
30822clipContainer--+Hu8n","clip":"src-components-Modal-Content-Upload-Upload__clip--7x9Vd","error":"src-components-Modal-Content-Upload-Upload__error--BSM-g","fileDragOver":"src-components-Modal-Content-Upload-Upload__fileDragOver--8YP2L"}; 30823 30824/***/ }) 30825 30826},[["tjUo",51,0,6,2,31,11,35,26,4,29,30,28,40,42,50,19,3,8,9,10,12,13,14,15,16,17,18,20,21,22,23,25,33,32,34,36,38,37,39,41,43,44,45,46,47,48,49]]]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.